@quey/ui

The React toolbar component for Quey — the visual UI that mounts into a shadow root for style isolation from the host page. Both the Chrome extension and the @quey/sdk in-code SDK render the exact same toolbar through this package.

What's in here

• mountQuey() — creates a <div id="__quey_root__">, attaches a shadow root, and mounts the React tree inside it. Returns a MountedQuey handle with an update(viewModel) method — the toolbar is a flat snapshot re-render, not a reactive store.
• QueyViewModel — the full snapshot shape the host application feeds in on every update: selection state, style draft, agent runtime state, onboarding state, annotations, and auth/usage state.
• Toolbar UI (QueyApp.tsx and friends) — dock tools (Select, Style, Agent, Comment, Capture), the agent streaming panel with DotMatrixLoader, style rail controls, and the sign-in/account UI.
• AnnotationMarker.tsx — page-pinned annotation markers, portaled to document.body so backdrop-filter can blur the live page.

Install

npm install @quey/ui react react-dom

react and react-dom are peer dependencies (externalized in the build) — bring your own.

Usage

@quey/ui is a low-level mounting primitive. Most consumers should not call mountQuey() directly — use @quey/sdk's createQueyRuntime()/<Quey> component, which wires DOM capture, MCP bridge connectivity, and auth into this UI for you.

import { mountQuey, type QueyViewModel } from "@quey/ui";

const instance = mountQuey({ /* ... */ });
instance.update(viewModel);

License

PolyForm Shield 1.0.0