Select is the tool everything else in Quey depends on — Style, Agent, Comment, and Capture-for-agent all start with something Select resolved. This guide covers how a click turns into a selection, and — the less obvious half — what Quey actually knows about the thing you selected once it has it.

Deep select vs. container select

Every click resolves through one setting: deep select, on by default. With it on, a click picks the exact element under your cursor. With it off, a click picks the nearest layout container instead — often the better default on densely nested pages where every pixel has three ancestors. Holding Cmd/Ctrl inverts whichever mode you're in for that one click, so you don't have to leave settings open to switch approaches mid-session.

Drilling in: container → child → text, one gesture

Double-clicking a selected element steps one level deeper toward whatever's actually under your pointer — not straight to the bottom. Select a card, double-click the heading inside it, get the heading's wrapper; double-click again, get the heading itself. Quey remembers where you are mid-drill, so further double-clicks keep descending into that subtree instead of snapping back out. Only once your selection is the deepest element under the cursor does a double-click switch behavior and start inline text editing — “select container, select child, edit text” reads as one continuous gesture. Clicking outside the subtree you've drilled into resets it.

Lasso and context: selecting more than one thing

Click-drag on empty canvas past a small threshold starts a marquee instead of a single selection; everything whose bounding box intersects it becomes selectable, sorted so the smallest — most specific — element becomes primary and the rest become supporting context automatically.

Separately, while something is already selected and you're in the Agent or Comment tool, clicking a different element (no modifier needed) doesn't replace your selection — it adds that element as context, up to eight, each shown as a numbered box on the page. Click one again to remove it. This is how you hand an agent something wider than one element without leaving Select mode.

Dev mode vs. inspect mode — decided for you, per page

Every capture happens in one of two modes, and you don't choose it — Quey infers it from the URL. Anything on localhost, 127.0.0.1, a .local hostname, or simply running on a non-default port counts as a dev page and captures in dev mode. Everything else — a production site, a competitor's page, any live URL — captures in inspect mode. The distinction matters because dev mode assumes it can find source: file paths, line numbers, component names via the React fiber tree. Inspect mode can't assume any of that on a page you don't own the source of, so it builds something else instead.

What inspect mode builds when there's no source to point to

On a page in inspect mode, the capture carries an inspectExport bundle:

• cleanHtml — a serialized copy of the selected subtree
• tailwindHtml — the same subtree, but styled with Tailwind utility classes. If the site already uses Tailwind, your original classes are preserved as-is, including responsive and interactive variants. If it doesn't, Quey reconstructs a best-effort utility-class version of the computed styles, which can mean arbitrary-value classes for anything that doesn't map cleanly to the default scale
• assets, fonts, colors, and colorTokens — everything visually relevant in the subtree, pulled out individually
• warnings — an honest list of what didn't survive the export: interactive behavior and framework bindings are never preserved in exported HTML, and media/SVG rendering may need manual cleanup even though the assets themselves come through

This is what makes inspect mode useful beyond your own codebase: point Quey at any live site and pull a workable HTML/Tailwind starting point out of a component you like, with the tool telling you upfront exactly what it couldn't carry over rather than pretending the export is a perfect clone.

Selecting Export on an inspect-mode capture downloads that bundle as a real .html file, named after the element's identified component. On a dev-mode capture, where there's no inspectExport to export, it downloads the raw capture payload as .json instead.

Color tokens: matched, not guessed

When a captured color happens to come from a CSS custom property, Quey doesn't just report the resolved hex value — it walks up the ancestor chain from the element, checking every --* custom property defined at each level for one whose value matches. Find one, and the capture carries the token name (--palette-brand-blue) alongside the resolved color, even if the token isn't declared on the element itself but somewhere higher in the tree. That's the difference between an agent grepping for a design token to update it everywhere, and an agent hardcoding a hex value because that's all it had.

Naming: what “primaryName” actually means

Every capture gets a primaryName and a list of stateTags — Quey's attempt to describe the element the way a person would, not just by tag. It scores two candidate names against each other (one derived from the element's own attributes/classes, one derived from its position in the semantic component tree) and keeps whichever is more specific. Words in the winning name get split and classified: nouns become the primaryName, modifier-like words (idle, expanded, interactive) become stateTags. There's a specific guard against CSS-module-style generated class names (Button_root__x7f2a) — if the winning candidate looks like a hash rather than a real name, Quey falls back to the plain tag name instead of surfacing gibberish as if it meant something.

Page-level: what Quey knows before you select anything

Selection isn't the only thing Inspect does — hovering nothing still gives you a page profile, including stack detection. Quey scans the DOM for framework and platform fingerprints (Next.js, Nuxt, Astro, Angular, Vue, Svelte, WordPress, Drupal, Joomla, and more), each match scored for confidence rather than asserted as fact — a #__next element or a _next/ script path scores both Next.js and (implied) React high-confidence in one shot; a bare #root div, with none of those stronger markers present, still scores React alone, but at much lower confidence, since that pattern shows up outside React too. Only the high-confidence detections surface prominently; the rest stay available without cluttering the page-level view with guesses.

Tips

• Turn deep select off as your default on component-heavy sites — you'll land on containers more often, and drill in with double-clicks only when you actually need the leaf.
• Use lasso instead of hunting for one element when you actually want several — the smallest element under the marquee becomes primary automatically, no extra step.
• Build agent context with plain clicks after your first selection, while in Agent or Comment mode — no modifier required, and it's the fastest way to hand an agent a group instead of a singleton.
• On someone else's site, trust inspect mode's warnings list over your own assumptions about what came through cleanly — it's telling you specifically what to manually check, not just disclaiming generally.
• If a color's token name shows up in a capture, prefer editing that token over hardcoding a new value — it's the difference between a change that respects the design system and one that quietly forks it.