@verdify/ui 0.1.0

package/dist/components/command-palette/command-palette.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/command-palette/command-palette.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { Dialog as DialogPrimitive } from \"radix-ui\";\nimport { cn } from \"../../lib/cn\";\nimport {\n  commandPaletteScrimClass,\n  commandPalettePanelClass,\n  commandPaletteInputClass,\n  commandPaletteSearchIconClass,\n  commandPaletteListboxClass,\n  commandPaletteGroupLabelClass,\n  commandPaletteOptionVariants,\n  commandPaletteLabelClass,\n  commandPaletteSecondaryClass,\n  commandPaletteOptionIconClass,\n  commandPaletteShortcutClass,\n  commandPaletteEmptyClass,\n  commandPaletteFooterClass,\n} from \"./command-palette.variants\";\n\nexport type CommandPaletteVariant =\n  | \"commands\"\n  | \"navigation\"\n  | \"with-recent\"\n  | \"scoped\";\n\nexport interface CommandPaletteItem {\n  /** Stable id — the option's DOM id derives from it (spec §7 aria-activedescendant target). */\n  id: string;\n  /** The result label — the row's accessible name; the row names itself by this, not its icon (spec §2). */\n  label: string;\n  /** Optional secondary line under the label (spec §2 option). Where a disabled row's short reason fits (spec §4 Disabled). */\n  secondary?: string;\n  /** Optional leading icon (spec §2): decorative, --size-icon-md; the row names itself by its label. */\n  icon?: React.ReactNode;\n  /** Optional trailing keyboard-shortcut hint (spec §2): muted label role, never a focus stop. */\n  shortcut?: React.ReactNode;\n  /** A non-runnable row (spec §4 Disabled): aria-disabled, skipped by arrow movement, not activatable. */\n  disabled?: boolean;\n  /** The group heading this row sits under (spec §2 group-label). Consecutive same-group rows are grouped. */\n  group?: string;\n}\n\nexport interface CommandPaletteProps {\n  /** Controlled open state — the host surface owns the open shortcut (commonly Cmd/Ctrl+K), not this component (spec §6). */\n  open: boolean;\n  /** Reports open changes; called with `false` on Escape, scrim click, or running a result (spec §6/§7). */\n  onOpenChange: (open: boolean) => void;\n  /**\n   * The input's accessible name (spec §7): the input has no visible label, so it names itself via\n   * `aria-label` (for example \"Search commands\"). The placeholder is NEVER the accessible name.\n   */\n  inputLabel: string;\n  /** The runnable results, optionally grouped by `group` (spec §2 listbox / option). */\n  items: CommandPaletteItem[];\n  /**\n   * The recent commands/destinations shown BEFORE any query (spec §3 `with-recent`), so the frequent\n   * case is one keystroke away. Replaced by filtered `items` as soon as you type.\n   */\n  recent?: CommandPaletteItem[];\n  /** Intent (spec §3): `commands` (default), `navigation`, `with-recent`, or `scoped`. */\n  variant?: CommandPaletteVariant;\n  /** The input placeholder (spec §2): de-emphasised, never the accessible name. */\n  placeholder?: string;\n  /**\n   * Results are resolving (spec §4 Loading): sets the listbox `aria-busy` and announces busy state;\n   * the input stays focused and typeable so a slow source never freezes the keyboard. A wait is a\n   * plain wait, not theatre.\n   */\n  loading?: boolean;\n  /** The no-match text (spec §2 empty, §4): says nothing matched and what to try — never a dead end, never a blamed query. */\n  emptyText?: string;\n  /** A thin hint row showing the active keys (spec §2 footer), so the keyboard model is discoverable in place. */\n  footer?: React.ReactNode;\n  /** Run the active/clicked result (spec §6 Enter / pointer): fired with the item, after which the palette closes. */\n  onRun?: (item: CommandPaletteItem) => void;\n  className?: string;\n}\n\n// A neutral magnifier glyph, --size-icon-md, drawn with currentColor so it inherits the input's\n// placeholder color. Decorative (aria-hidden) — the input carries the accessible name (spec §7).\nfunction SearchGlyph() {\n  return (\n    <svg\n      data-testid=\"command-palette-search-glyph\"\n      aria-hidden=\"true\"\n      viewBox=\"0 0 16 16\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"1.5\"\n      className=\"h-(--size-icon-md) w-(--size-icon-md)\"\n    >\n      <circle cx=\"7\" cy=\"7\" r=\"4.5\" />\n      <path d=\"M10.5 10.5L14 14\" strokeLinecap=\"round\" />\n    </svg>\n  );\n}\n\n/** Group rows by their `group` key, preserving order (spec §2 group: consecutive same-group rows group). */\nfunction groupItems(items: CommandPaletteItem[]): { group?: string; rows: CommandPaletteItem[] }[] {\n  const out: { group?: string; rows: CommandPaletteItem[] }[] = [];\n  for (const item of items) {\n    const last = out[out.length - 1];\n    if (last && last.group === item.group) last.rows.push(item);\n    else out.push({ group: item.group, rows: [item] });\n  }\n  return out;\n}\n\nconst matches = (item: CommandPaletteItem, query: string): boolean => {\n  if (!query) return true;\n  const q = query.toLowerCase();\n  return (\n    item.label.toLowerCase().includes(q) ||\n    (item.secondary ? item.secondary.toLowerCase().includes(q) : false)\n  );\n};\n\n/**\n * CommandPalette is a keyboard-first launcher (spec §1): open it from anywhere, type a few letters,\n * and run a command or jump to a place without leaving the keyboard. It is the accelerator OVER the\n * visible navigation, not a replacement — every command in it is also reachable by pointer somewhere\n * in the UI. Reach for a Menu to fire actions behind a trigger, a Select to pick a value, and the\n * Sidebar for page-level navigation.\n *\n * It is a NEUTRAL overlay surface (spec §3): the scrim, panel, input, and result rows are neutral,\n * and the active-row highlight is the SECONDARY hover fill — never Verified Green and never the\n * brand violet. The active row reports WHERE you are in the list, not a verified result, so brand is\n * not a state (G-U2); a verified meaning belongs to VerifiedBadge, never a palette row.\n *\n * It uses the WAI-ARIA APG combobox-with-listbox pattern: the input is the `role=\"combobox\"` and the\n * results are its `role=\"listbox\"` popup, with the active option tracked by `aria-activedescendant`\n * so DOM focus STAYS in the input the whole time (type-ahead keeps working, spec §4/§6/§7/§8). The\n * OVERLAY shell — portal, focus trap, Escape, inert siblings, scrim — is the Radix `Dialog`\n * primitive; the combobox/listbox roving is hand-rolled INSIDE it, because the spec's\n * focus-stays-in-the-input contract is the OPPOSITE of Radix's focus-moving roving listbox and §8\n * names focus-moving as a forbidden anti-pattern (skill: compose a role by hand when Radix can't\n * express the spec's anatomy). A stateful component, so this file is `'use client'`.\n */\nexport function CommandPalette({\n  open,\n  onOpenChange,\n  inputLabel,\n  items,\n  recent,\n  variant = \"commands\",\n  placeholder,\n  loading = false,\n  emptyText = \"Nothing matched. Try a different word.\",\n  footer,\n  onRun,\n  className,\n}: CommandPaletteProps) {\n  void variant; // the structural axis is expressed by the result set the caller passes (spec §3 grouped results)\n  const reactId = React.useId();\n  const listboxId = `${reactId}-listbox`;\n  const inputId = `${reactId}-input`;\n  const statusId = `${reactId}-status`;\n  const inputRef = React.useRef<HTMLInputElement>(null);\n  // The element that had focus when the palette opened — focus returns HERE on close (spec §6/§7),\n  // so a keyboard user is never dropped at the page top. The host owns the open shortcut (Cmd/Ctrl+K\n  // from anywhere), so there is no single DialogTrigger for Radix to restore to; we capture the\n  // opener ourselves and restore it when the palette closes.\n  const openerRef = React.useRef<HTMLElement | null>(null);\n\n  const [query, setQuery] = React.useState(\"\");\n\n  // Before any query, show recent (spec §3 with-recent); as soon as you type, recent is replaced by\n  // the filtered items (spec §3 / §4 Default).\n  const showRecent = query.length === 0 && recent !== undefined && recent.length > 0;\n  const source = showRecent ? recent! : items;\n  const visible = React.useMemo(\n    () => source.filter((item) => matches(item, query)),\n    [source, query],\n  );\n  // The runnable rows (enabled) — arrow movement and Home/End operate over these; group labels and\n  // disabled rows are skipped (spec §6).\n  const runnable = React.useMemo(() => visible.filter((item) => !item.disabled), [visible]);\n\n  const [activeId, setActiveId] = React.useState<string | null>(null);\n  // The active row resets to the FIRST runnable match whenever the result set changes (spec §6\n  // \"the active row resets to the first match\"; spec §4 Default \"the first item is active\").\n  React.useEffect(() => {\n    setActiveId(runnable.length > 0 ? runnable[0].id : null);\n  }, [runnable]);\n\n  const optionDomId = (id: string) => `${reactId}-opt-${id}`;\n  const activeIndex = runnable.findIndex((item) => item.id === activeId);\n\n  const moveActive = (next: number) => {\n    if (runnable.length === 0) return;\n    const wrapped = ((next % runnable.length) + runnable.length) % runnable.length;\n    setActiveId(runnable[wrapped].id);\n  };\n\n  const runItem = (item: CommandPaletteItem) => {\n    if (item.disabled) return;\n    onRun?.(item);\n    onOpenChange(false); // Enter/click runs, then closes; Radix returns focus to the opener (spec §6/§7)\n  };\n\n  const handleInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n    switch (event.key) {\n      case \"ArrowDown\":\n        event.preventDefault();\n        moveActive(activeIndex < 0 ? 0 : activeIndex + 1);\n        break;\n      case \"ArrowUp\":\n        event.preventDefault();\n        moveActive(activeIndex < 0 ? runnable.length - 1 : activeIndex - 1);\n        break;\n      case \"Home\":\n        event.preventDefault();\n        moveActive(0);\n        break;\n      case \"End\":\n        event.preventDefault();\n        moveActive(runnable.length - 1);\n        break;\n      case \"PageDown\":\n        // Move by a viewport of rows (spec §6). Without measured row heights in this headless layer\n        // a fixed page step is the conformant approximation; it clamps to the last runnable row.\n        event.preventDefault();\n        moveActive(Math.min(activeIndex + PAGE_STEP, runnable.length - 1));\n        break;\n      case \"PageUp\":\n        event.preventDefault();\n        moveActive(Math.max(activeIndex - PAGE_STEP, 0));\n        break;\n      case \"Enter\": {\n        event.preventDefault();\n        const item = runnable[activeIndex];\n        if (item) runItem(item);\n        break;\n      }\n      // Escape is handled on Content's onEscapeKeyDown (below), not here: Radix listens for Escape at\n      // the document level, so a React-bubbled stopPropagation on the input would not stop Radix's\n      // own close. Intercepting it on Content's onEscapeKeyDown is the only reliable seam.\n      default:\n        break;\n    }\n  };\n\n  // First Escape with a query CLEARS the query (palette stays open); the next Escape closes (spec\n  // §6). We intercept Radix's Escape at its source: when a query is present, preventDefault keeps the\n  // Dialog open and we clear the query; an empty query lets Radix close as usual.\n  const handleEscapeKeyDown = (event: KeyboardEvent) => {\n    if (query.length > 0) {\n      event.preventDefault();\n      setQuery(\"\");\n    }\n  };\n\n  // The match count a query produced (spec §7 4.1.3): the VISIBLE matches a screen-reader user hears,\n  // including a matched-but-disabled row (it still matched). Arrow movement, by contrast, operates\n  // over the runnable subset.\n  const matchCount = visible.length;\n  const hasOptions = matchCount > 0;\n  // The polite live region copy (spec §7 4.1.3 Status Messages): how many matches a query produced.\n  // The COUNT rides the live region; the actionable empty prose is the visible empty <p> (announced\n  // as text in its own right, spec §2 empty) — so the live region says \"No results.\" rather than\n  // repeating the empty prose, which would make a screen reader hear the same sentence twice.\n  const statusMessage = loading\n    ? \"Loading results.\"\n    : matchCount === 0\n      ? \"No results.\"\n      : `${matchCount} result${matchCount === 1 ? \"\" : \"s\"}.`;\n\n  const groups = groupItems(visible);\n\n  // Restore focus to the opener when the palette closes (spec §6/§7). Radix's FocusScope would\n  // restore to its own Trigger, but a palette is opened from a host shortcut with no single Trigger,\n  // so we take over the close-focus seam: onCloseAutoFocus is the Radix-blessed hook (mirrors\n  // onOpenAutoFocus) — preventDefault its default restoration and focus the captured opener instead,\n  // so a keyboard user lands back where they were, never at the page top.\n  const handleCloseAutoFocus = (event: Event) => {\n    const opener = openerRef.current;\n    openerRef.current = null;\n    if (opener?.isConnected) {\n      event.preventDefault();\n      opener.focus();\n    }\n  };\n\n  return (\n    <DialogPrimitive.Root open={open} onOpenChange={onOpenChange}>\n      <DialogPrimitive.Portal>\n        <DialogPrimitive.Overlay\n          data-testid=\"command-palette-scrim\"\n          className={commandPaletteScrimClass}\n        />\n        <DialogPrimitive.Content\n          // The spec §7 ARIA contract names aria-modal=\"true\" explicitly. This Radix version makes\n          // the rest of the page inert (pointer-events:none on body + aria-hidden on siblings) but\n          // does not emit aria-modal, so we set it to honor the frozen contract literally; the panel\n          // IS modal (the focus trap + inert siblings back the claim).\n          aria-modal=\"true\"\n          // Name the panel by the input's purpose without a visible heading (the input owns the\n          // visible affordance). The input is the operable combobox; the panel is just its shell.\n          aria-label={inputLabel}\n          className={cn(commandPalettePanelClass, className)}\n          // On open, focus moves to the input (spec §4 Focus / §7) rather than Radix's default first\n          // focusable, so type-ahead is live immediately and DOM focus is in the combobox. This fires\n          // while DOM focus is still on the OPENER (before Radix moves it), so capture it here for the\n          // close round-trip — the host owns the open shortcut, so there is no single Trigger for\n          // Radix to restore to (spec §6/§7).\n          onOpenAutoFocus={(event) => {\n            event.preventDefault();\n            openerRef.current = (document.activeElement as HTMLElement) ?? null;\n            inputRef.current?.focus();\n          }}\n          // First Escape with a query clears the query; the next closes (spec §6).\n          onEscapeKeyDown={handleEscapeKeyDown}\n          // On close, return focus to the captured opener (spec §6/§7), not Radix's default.\n          onCloseAutoFocus={handleCloseAutoFocus}\n        >\n          <div className=\"relative\">\n            <span className={commandPaletteSearchIconClass}>\n              <SearchGlyph />\n            </span>\n            <input\n              ref={inputRef}\n              id={inputId}\n              type=\"text\"\n              role=\"combobox\"\n              // The combobox contract (spec §7): expanded while results are shown, controlling the\n              // listbox, with a listbox popup. aria-activedescendant points at the active option and\n              // moves with the arrows so DOM focus never leaves the input (spec §4 Focus / §8).\n              aria-expanded={hasOptions}\n              aria-controls={listboxId}\n              aria-haspopup=\"listbox\"\n              aria-activedescendant={activeId ? optionDomId(activeId) : undefined}\n              // The input has no visible label — it names itself (the placeholder is never the name).\n              aria-label={inputLabel}\n              aria-describedby={statusId}\n              autoComplete=\"off\"\n              spellCheck={false}\n              placeholder={placeholder}\n              value={query}\n              onChange={(event) => setQuery(event.target.value)}\n              onKeyDown={handleInputKeyDown}\n              className={commandPaletteInputClass}\n            />\n          </div>\n\n          <div\n            id={listboxId}\n            // The results region is role=listbox ONLY while it holds options (spec §7): a listbox\n            // requires option children (axe aria-required-children), so the empty/loading region is a\n            // plain region — aria-expanded=false on the input already signals there is no popup, and\n            // the empty prompt + the polite live region announce the state (spec §7 4.1.3).\n            role={hasOptions ? \"listbox\" : undefined}\n            aria-label={hasOptions ? inputLabel : undefined}\n            // While results resolve the listbox is busy; the input stays focused/typeable (spec §4).\n            aria-busy={loading || undefined}\n            className={commandPaletteListboxClass}\n          >\n            {!hasOptions && !loading ? (\n              // The empty state is announced as TEXT, never silence (spec §2 empty, §7 4.1.3).\n              <p className={commandPaletteEmptyClass}>{emptyText}</p>\n            ) : (\n              groups.map((group, groupIndex) => {\n                const groupLabelId = `${reactId}-group-${groupIndex}`;\n                const rows = group.rows.map((item) => {\n                  const isActive = item.id === activeId;\n                  return (\n                    <div\n                      key={item.id}\n                      id={optionDomId(item.id)}\n                      role=\"option\"\n                      // The active option is aria-selected=true and the rest false (spec §7); the\n                      // active row is the SAME for pointer and keyboard (spec §4 Hover).\n                      aria-selected={isActive}\n                      aria-disabled={item.disabled || undefined}\n                      className={cn(commandPaletteOptionVariants())}\n                      // Pointer hover makes the row the active row, so Enter runs what is highlighted\n                      // (spec §4 Hover / §6). Disabled rows are not activatable.\n                      onMouseMove={() => {\n                        if (!item.disabled) setActiveId(item.id);\n                      }}\n                      onClick={() => runItem(item)}\n                    >\n                      {item.icon ? (\n                        <span aria-hidden=\"true\" className={commandPaletteOptionIconClass}>\n                          {item.icon}\n                        </span>\n                      ) : null}\n                      <span className=\"flex min-w-0 flex-1 flex-col\">\n                        <span className={commandPaletteLabelClass}>{item.label}</span>\n                        {item.secondary ? (\n                          <span className={commandPaletteSecondaryClass}>{item.secondary}</span>\n                        ) : null}\n                      </span>\n                      {item.shortcut ? (\n                        <span aria-hidden=\"true\" className={commandPaletteShortcutClass}>\n                          {item.shortcut}\n                        </span>\n                      ) : null}\n                    </div>\n                  );\n                });\n                if (!group.group) {\n                  return <React.Fragment key={groupIndex}>{rows}</React.Fragment>;\n                }\n                return (\n                  <div key={groupIndex} role=\"group\" aria-labelledby={groupLabelId}>\n                    <p id={groupLabelId} className={commandPaletteGroupLabelClass}>\n                      {group.group}\n                    </p>\n                    {rows}\n                  </div>\n                );\n              })\n            )}\n          </div>\n\n          {footer ? <div className={commandPaletteFooterClass}>{footer}</div> : null}\n\n          {/* The polite live region (spec §7 4.1.3): the result count / empty prompt, announced as\n              text. Visually hidden but in the accessibility tree; it backs the input's\n              aria-describedby. */}\n          <span\n            id={statusId}\n            role=\"status\"\n            aria-live=\"polite\"\n            className=\"sr-only\"\n          >\n            {statusMessage}\n          </span>\n        </DialogPrimitive.Content>\n      </DialogPrimitive.Portal>\n    </DialogPrimitive.Root>\n  );\n}\n\n// PageUp/PageDown move the active row by a viewport of rows (spec §6). Without measured row heights\n// in the headless layer, a fixed page step is the conformant approximation; the browser layer can\n// refine it against real row metrics later.\nconst PAGE_STEP = 8;\n"],"mappings":"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","names":[]}

package/dist/components/command-palette/command-palette.variants.d.ts

@@ -0,0 +1,18 @@
+import { type VariantProps } from "class-variance-authority";
+export declare const commandPaletteScrimClass: string;
+export declare const commandPalettePanelClass: string;
+export declare const commandPaletteInputClass: string;
+export declare const commandPaletteSearchIconClass: string;
+export declare const commandPaletteListboxClass = "min-h-0 flex-1 overflow-y-auto border-t border-border-default pt-(--space-2)";
+export declare const commandPaletteGroupLabelClass = "px-(--space-2) py-(--space-1) text-label text-text-muted select-none";
+export declare const commandPaletteOptionVariants: (props?: ({
+    density?: "md" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type CommandPaletteOptionVariantProps = VariantProps<typeof commandPaletteOptionVariants>;
+export declare const commandPaletteLabelClass = "min-w-0 flex-1 truncate text-body text-text-primary";
+export declare const commandPaletteSecondaryClass = "truncate text-label text-text-secondary";
+export declare const commandPaletteOptionIconClass = "inline-flex h-(--size-icon-md) w-(--size-icon-md) shrink-0 items-center justify-center";
+export declare const commandPaletteShortcutClass = "ms-auto ps-(--space-4) text-label text-text-muted";
+export declare const commandPaletteEmptyClass = "px-(--space-2) py-(--space-6) text-center text-body text-text-secondary";
+export declare const commandPaletteFooterClass: string;
+//# sourceMappingURL=command-palette.variants.d.ts.map

package/dist/components/command-palette/command-palette.variants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"command-palette.variants.d.ts","sourceRoot":"","sources":["../../../src/components/command-palette/command-palette.variants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAoBlE,eAAO,MAAM,wBAAwB,QAI0B,CAAC;AAShE,eAAO,MAAM,wBAAwB,QAgB4D,CAAC;AAUlG,eAAO,MAAM,wBAAwB,QAS4D,CAAC;AAKlG,eAAO,MAAM,6BAA6B,QAEgE,CAAC;AAO3G,eAAO,MAAM,0BAA0B,iFACyC,CAAC;AAKjF,eAAO,MAAM,6BAA6B,yEAC8B,CAAC;AAkBzE,eAAO,MAAM,4BAA4B;;8EA2BxC,CAAC;AAEF,MAAM,MAAM,gCAAgC,GAAG,YAAY,CAAC,OAAO,4BAA4B,CAAC,CAAC;AAIjG,eAAO,MAAM,wBAAwB,wDAAwD,CAAC;AAI9F,eAAO,MAAM,4BAA4B,4CAA4C,CAAC;AAItF,eAAO,MAAM,6BAA6B,2FACgD,CAAC;AAM3F,eAAO,MAAM,2BAA2B,sDACa,CAAC;AAMtD,eAAO,MAAM,wBAAwB,4EACsC,CAAC;AAM5E,eAAO,MAAM,yBAAyB,QAEJ,CAAC"}

package/dist/components/command-palette/command-palette.variants.js

@@ -0,0 +1,62 @@
+import { cva } from "class-variance-authority";
+const commandPaletteScrimClass = "fixed inset-0 z-(--z-index-modal) bg-scrim-dark transition-opacity duration-(--motion-duration-base) ease-(--motion-easing-verdify) motion-reduce:duration-(--motion-duration-instant) data-[state=open]:opacity-100 data-[state=closed]:opacity-0";
+const commandPalettePanelClass = (
+  // Horizontally centered, anchored in the UPPER region of the viewport (a palette sits high, not
+  // dead-center like a Dialog): top-1/4 is a Tailwind FRACTION utility (no arbitrary raw value), so
+  // it stays clean against the token-binding gate while keeping the panel near the top.
+  "fixed left-1/2 top-1/4 z-(--z-index-modal) -translate-x-1/2 flex w-[calc(100%-var(--space-8))] max-w-(--container-md) flex-col gap-(--space-3) max-h-[calc(75dvh)] bg-surface-raised border border-surface-border rounded-(--radius-lg) shadow-(--shadow-lg) p-(--space-3) transition-[opacity,transform] duration-(--motion-duration-base) ease-(--motion-easing-verdify) motion-reduce:duration-(--motion-duration-instant) data-[state=open]:opacity-100 data-[state=closed]:opacity-0 data-[state=open]:scale-100 data-[state=closed]:scale-95 outline-none focus-visible:ring-2 focus-visible:ring-border-focus focus-visible:ring-offset-2"
+);
+const commandPaletteInputClass = "w-full rounded-(--radius-md) ps-(--space-9) pe-(--space-3) bg-control-bg text-control-fg border border-control-border placeholder:text-control-placeholder text-base leading-(--text-body--line-height) tracking-(--text-body--letter-spacing) min-h-(--size-target-mobile) sm:min-h-(--size-target-desktop) focus-visible:border-border-focus outline-none focus-visible:ring-2 focus-visible:ring-border-focus focus-visible:ring-offset-2";
+const commandPaletteSearchIconClass = "pointer-events-none absolute start-(--space-3) top-1/2 -translate-y-1/2 inline-flex h-(--size-icon-md) w-(--size-icon-md) items-center justify-center text-control-placeholder";
+const commandPaletteListboxClass = "min-h-0 flex-1 overflow-y-auto border-t border-border-default pt-(--space-2)";
+const commandPaletteGroupLabelClass = "px-(--space-2) py-(--space-1) text-label text-text-muted select-none";
+const commandPaletteOptionVariants = cva(
+  [
+    // shape + the icon-to-label gap + logical inline padding so it mirrors under RTL (G-U6)
+    "relative flex items-center gap-(--space-3) rounded-(--radius-md) px-(--space-2)",
+    // the resting (neutral) label color; pointer cursor; no underline
+    "text-text-primary cursor-pointer select-none",
+    // the shared pointer+keyboard highlight: the secondary hover fill on the ACTIVE row
+    // (aria-selected). NEVER a status/brand fill — the active row is location, not a verified result.
+    "aria-selected:bg-action-secondary-bg-hover",
+    // target-size floor — 44px touch / 40px pointer, on every row (spec §7 2.5.8), never a fixed
+    // height below the floor
+    "min-h-(--size-target-mobile) sm:min-h-(--size-target-desktop)",
+    // focus stays in the input (spec §4 Focus / §8) — the row never paints its own focus ring
+    "outline-none",
+    // disabled (non-runnable) row — DEC-C: dim via the disabled TOKEN, never opacity; not operable
+    "aria-disabled:text-text-disabled aria-disabled:pointer-events-none aria-disabled:cursor-default"
+  ],
+  {
+    variants: {
+      // The result label/secondary type role. There is one row treatment; the axis only exists to
+      // keep the binding file shaped like the other compounds. md is the only value the spec needs.
+      density: {
+        md: "py-(--space-2)"
+      }
+    },
+    defaultVariants: { density: "md" }
+  }
+);
+const commandPaletteLabelClass = "min-w-0 flex-1 truncate text-body text-text-primary";
+const commandPaletteSecondaryClass = "truncate text-label text-text-secondary";
+const commandPaletteOptionIconClass = "inline-flex h-(--size-icon-md) w-(--size-icon-md) shrink-0 items-center justify-center";
+const commandPaletteShortcutClass = "ms-auto ps-(--space-4) text-label text-text-muted";
+const commandPaletteEmptyClass = "px-(--space-2) py-(--space-6) text-center text-body text-text-secondary";
+const commandPaletteFooterClass = "flex items-center gap-(--space-4) border-t border-border-default pt-(--space-2) text-label text-text-secondary";
+export {
+  commandPaletteEmptyClass,
+  commandPaletteFooterClass,
+  commandPaletteGroupLabelClass,
+  commandPaletteInputClass,
+  commandPaletteLabelClass,
+  commandPaletteListboxClass,
+  commandPaletteOptionIconClass,
+  commandPaletteOptionVariants,
+  commandPalettePanelClass,
+  commandPaletteScrimClass,
+  commandPaletteSearchIconClass,
+  commandPaletteSecondaryClass,
+  commandPaletteShortcutClass
+};
+//# sourceMappingURL=command-palette.variants.js.map

package/dist/components/command-palette/command-palette.variants.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/command-palette/command-palette.variants.ts"],"sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\";\n\n// The command palette is a NEUTRAL overlay surface (spec §1/§3/§5/§8): brand violet and Verified\n// Green are accents, neutrals carry the surface. The SCRIM, the PANEL, the INPUT, and the RESULT\n// ROWS are neutral; the active-row highlight is the SECONDARY hover fill, NEVER a status or brand\n// color — the active row reports WHERE you are in the list, not a verified result, so it never\n// takes Verified Green, and Sovereign Violet never marks a row (brand != state, G-U2). A status\n// color appears only when a result row legitimately carries a status (a verified entity in its\n// subtitle), and then it is the --color-status-* accent on that row's OWN affordance, never a flood\n// of the palette — that affordance is the caller's (VerifiedBadge), not bound here. So NOTHING in\n// this file binds an --color-action-primary-* or --color-status-* fill. This is the ONLY\n// token-binding site (skill §5 hard rule).\n\n// The scrim (spec §2 scrim, §5 --color-scrim-*): the dimming layer behind the panel that separates\n// the palette from the page and absorbs outside clicks. A neutral dim on the modal z-layer,\n// decorative (no role). The fade is a PLAIN base transition + verdify easing, instant under reduced\n// motion — never the 350ms VerifiedBadge-only theatre (G-U3). Enter/exit ride Radix's data-state on\n// the overlay (attribute-selector variants, not arbitrary values). On a light surface the dark\n// scrim token applies (spec §5: scrim-dark behind the panel on a light surface; the committed\n// overlays bind scrim-dark with no auto light-surface inversion).\nexport const commandPaletteScrimClass =\n  \"fixed inset-0 z-(--z-index-modal) bg-scrim-dark \" +\n  \"transition-opacity duration-(--motion-duration-base) ease-(--motion-easing-verdify) \" +\n  \"motion-reduce:duration-(--motion-duration-instant) \" +\n  \"data-[state=open]:opacity-100 data-[state=closed]:opacity-0\";\n\n// The panel (spec §2 panel, §5): the raised container holding the input and results; it takes\n// role=dialog + the focus trap (Radix). A NEUTRAL raised surface (--color-surface-raised) with the\n// outer surface border, the lg corner radius, the lg elevation shadow above the scrim, anchored near\n// the top of the modal z-layer. It never exceeds the viewport — the listbox owns the scroll. The\n// open/close transition is the BASE duration + verdify easing, instant under reduced motion, and\n// rides Radix's data-state (attribute-selector enter/exit, not arbitrary values). NEVER the\n// deliberate verified-check theatre (G-U3). Panel padding/gaps come from --space-*.\nexport const commandPalettePanelClass =\n  // Horizontally centered, anchored in the UPPER region of the viewport (a palette sits high, not\n  // dead-center like a Dialog): top-1/4 is a Tailwind FRACTION utility (no arbitrary raw value), so\n  // it stays clean against the token-binding gate while keeping the panel near the top.\n  \"fixed left-1/2 top-1/4 z-(--z-index-modal) -translate-x-1/2 \" +\n  // never exceeds the viewport — the listbox owns the scroll. calc()-bodied brackets are structural\n  // (not raw-value-leading), gate-legitimate, and mirror the Dialog panel's viewport cap.\n  \"flex w-[calc(100%-var(--space-8))] max-w-(--container-md) flex-col gap-(--space-3) \" +\n  \"max-h-[calc(75dvh)] \" +\n  \"bg-surface-raised border border-surface-border rounded-(--radius-lg) shadow-(--shadow-lg) \" +\n  \"p-(--space-3) \" +\n  \"transition-[opacity,transform] duration-(--motion-duration-base) ease-(--motion-easing-verdify) \" +\n  \"motion-reduce:duration-(--motion-duration-instant) \" +\n  \"data-[state=open]:opacity-100 data-[state=closed]:opacity-0 \" +\n  \"data-[state=open]:scale-100 data-[state=closed]:scale-95 \" +\n  // the panel owns no focus stop itself (focus lives in the input); its ring is never removed\n  \"outline-none focus-visible:ring-2 focus-visible:ring-border-focus focus-visible:ring-offset-2\";\n\n// The input (spec §2 input, §4 Focus, §5): the single-line search field at the top, focused on\n// open. It IS the combobox. A control-tier field — control bg/border/fg + the placeholder token\n// (spec §5 --color-control-*). The query text is the body type role in the control fg. While focused\n// the input border takes the focus color and the visible 2px focus ring shows (never removed, spec\n// §4 Focus). The target-size floor (44px touch / 40px pointer, spec §7 2.5.8 / DEC-B) with the\n// height EMERGING from the floor, never fixed below it. The body metrics ride along\n// (leading/tracking) without binding the text-body SIZE — DEC-A: a form field's value size stays\n// text-base (the iOS no-zoom floor), the body type role contributes only its leading + tracking.\nexport const commandPaletteInputClass =\n  \"w-full rounded-(--radius-md) ps-(--space-9) pe-(--space-3) \" +\n  \"bg-control-bg text-control-fg border border-control-border \" +\n  \"placeholder:text-control-placeholder \" +\n  // DEC-A: form-field value size is text-base (iOS no-zoom floor); body type role rides via metrics\n  \"text-base leading-(--text-body--line-height) tracking-(--text-body--letter-spacing) \" +\n  \"min-h-(--size-target-mobile) sm:min-h-(--size-target-desktop) \" +\n  // the input border takes the focus color while focused (spec §5 --color-border-focus)\n  \"focus-visible:border-border-focus \" +\n  \"outline-none focus-visible:ring-2 focus-visible:ring-border-focus focus-visible:ring-offset-2\";\n\n// The leading search icon (spec §2 input, §5 --size-icon-md): decorative (aria-hidden) — the input\n// names itself by its aria-label, not the glyph. Positioned at the inline-start of the input via a\n// logical offset so it mirrors under RTL (G-U6); inherits the placeholder color via currentColor.\nexport const commandPaletteSearchIconClass =\n  \"pointer-events-none absolute start-(--space-3) top-1/2 -translate-y-1/2 \" +\n  \"inline-flex h-(--size-icon-md) w-(--size-icon-md) items-center justify-center text-control-placeholder\";\n\n// The listbox (spec §2 listbox, §5): the results region below the input. A neutral raised surface\n// region with the input-to-results divider above it (a neutral hairline in the default border\n// color), scrolling within the panel when results overflow. Logical inline padding so it mirrors\n// under RTL (G-U6). No motion of its own — a wait is a plain wait (spec §4 Loading), the busy state\n// rides aria-busy, not theatre.\nexport const commandPaletteListboxClass =\n  \"min-h-0 flex-1 overflow-y-auto border-t border-border-default pt-(--space-2)\";\n\n// The group label (spec §2 group-label, §5): a non-selectable heading that partitions results by\n// kind; it is NOT a result and is skipped by arrow movement. The MUTED text color at the LABEL type\n// role (spec §5 --color-text-muted / --text-label). Logical inline padding (G-U6).\nexport const commandPaletteGroupLabelClass =\n  \"px-(--space-2) py-(--space-1) text-label text-text-muted select-none\";\n\n// One result row (spec §2 option, §4 states). A neutral row at rest; the active (highlighted) AND\n// the pointer-hovered row share ONE state — aria-selected — painted with the SECONDARY hover fill\n// (spec §4 Hover, §5 --color-action-secondary-bg-hover). Pointer hover and keyboard active are kept\n// in sync by setting aria-selected on whichever the user touched, so Enter always runs what is\n// highlighted. The active row reports WHERE you are, NOT a verified result — never Verified Green,\n// never the brand (spec §3/§8, G-U2). The label is the PRIMARY text color at the BODY type role\n// (spec §5 --color-text-primary / --text-body).\n//\n// FOCUS (spec §4 Focus): DOM focus stays in the INPUT the whole time; the active row is conveyed by\n// aria-activedescendant, not by moving focus into the list (spec §8 Don't). So a row does NOT paint\n// its own focus-visible ring — the active fill is the affordance, and the visible focus ring lives\n// on the input.\n//\n// DISABLED (spec §4 Disabled): a non-runnable row dims via the disabled TOKEN (DEC-C), never a\n// blanket opacity; it is aria-disabled, skipped by arrow movement (handled in the roving logic), and\n// not activatable. Its short reason sits in the secondary line.\nexport const commandPaletteOptionVariants = cva(\n  [\n    // shape + the icon-to-label gap + logical inline padding so it mirrors under RTL (G-U6)\n    \"relative flex items-center gap-(--space-3) rounded-(--radius-md) px-(--space-2)\",\n    // the resting (neutral) label color; pointer cursor; no underline\n    \"text-text-primary cursor-pointer select-none\",\n    // the shared pointer+keyboard highlight: the secondary hover fill on the ACTIVE row\n    // (aria-selected). NEVER a status/brand fill — the active row is location, not a verified result.\n    \"aria-selected:bg-action-secondary-bg-hover\",\n    // target-size floor — 44px touch / 40px pointer, on every row (spec §7 2.5.8), never a fixed\n    // height below the floor\n    \"min-h-(--size-target-mobile) sm:min-h-(--size-target-desktop)\",\n    // focus stays in the input (spec §4 Focus / §8) — the row never paints its own focus ring\n    \"outline-none\",\n    // disabled (non-runnable) row — DEC-C: dim via the disabled TOKEN, never opacity; not operable\n    \"aria-disabled:text-text-disabled aria-disabled:pointer-events-none aria-disabled:cursor-default\",\n  ],\n  {\n    variants: {\n      // The result label/secondary type role. There is one row treatment; the axis only exists to\n      // keep the binding file shaped like the other compounds. md is the only value the spec needs.\n      density: {\n        md: \"py-(--space-2)\",\n      },\n    },\n    defaultVariants: { density: \"md\" },\n  },\n);\n\nexport type CommandPaletteOptionVariantProps = VariantProps<typeof commandPaletteOptionVariants>;\n\n// The result label (spec §2 option, §5): the primary line, body type role in the primary text color,\n// truncating when long so the row keeps its shape (--color-text-primary / --text-body).\nexport const commandPaletteLabelClass = \"min-w-0 flex-1 truncate text-body text-text-primary\";\n\n// The result secondary line (spec §2 option, §5): the optional second line under/after the label, in\n// the SECONDARY text color (spec §5 --color-text-secondary). Truncates when long.\nexport const commandPaletteSecondaryClass = \"truncate text-label text-text-secondary\";\n\n// The leading result icon (spec §2 option, §5 --size-icon-md): decorative — the row names itself by\n// its label text, not the glyph. Inherits the row color via currentColor; never collapses.\nexport const commandPaletteOptionIconClass =\n  \"inline-flex h-(--size-icon-md) w-(--size-icon-md) shrink-0 items-center justify-center\";\n\n// The trailing keyboard-shortcut hint (spec §2 option, §5): pushed to the inline-end, in the MUTED\n// text color at the LABEL type role (spec §5 --color-text-muted / --text-label). Decorative\n// wayfinding, never a focus stop; logical inline-end placement (G-U6). The monospace ID/shortcut\n// stays isolated LTR inside RTL text (G-U6).\nexport const commandPaletteShortcutClass =\n  \"ms-auto ps-(--space-4) text-label text-text-muted\";\n\n// The empty (no-match) state (spec §2 empty, §4): plain text that says nothing matched and what to\n// try — never a dead end, never a blamed query (principles voice). The SECONDARY text color at the\n// body type role, with breathing room (spec §5 --color-text-secondary). Announced as text, not\n// silence (spec §7 4.1.3).\nexport const commandPaletteEmptyClass =\n  \"px-(--space-2) py-(--space-6) text-center text-body text-text-secondary\";\n\n// The footer (spec §2 footer, §5): a thin hint row showing the active keys (move, run, dismiss) so\n// the keyboard model is discoverable in place. The SECONDARY text color at the LABEL type role with\n// a neutral hairline divider above it (spec §5 --color-text-secondary / --text-label /\n// --color-border-default). Logical inline layout (G-U6).\nexport const commandPaletteFooterClass =\n  \"flex items-center gap-(--space-4) border-t border-border-default pt-(--space-2) \" +\n  \"text-label text-text-secondary\";\n"],"mappings":"AAAA,SAAS,WAA8B;AAoBhC,MAAM,2BACX;AAYK,MAAM;AAAA;AAAA;AAAA;AAAA,EAIX;AAAA;AAsBK,MAAM,2BACX;AAaK,MAAM,gCACX;AAQK,MAAM,6BACX;AAKK,MAAM,gCACX;AAkBK,MAAM,+BAA+B;AAAA,EAC1C;AAAA;AAAA,IAEE;AAAA;AAAA,IAEA;AAAA;AAAA;AAAA,IAGA;AAAA;AAAA;AAAA,IAGA;AAAA;AAAA,IAEA;AAAA;AAAA,IAEA;AAAA,EACF;AAAA,EACA;AAAA,IACE,UAAU;AAAA;AAAA;AAAA,MAGR,SAAS;AAAA,QACP,IAAI;AAAA,MACN;AAAA,IACF;AAAA,IACA,iBAAiB,EAAE,SAAS,KAAK;AAAA,EACnC;AACF;AAMO,MAAM,2BAA2B;AAIjC,MAAM,+BAA+B;AAIrC,MAAM,gCACX;AAMK,MAAM,8BACX;AAMK,MAAM,2BACX;AAMK,MAAM,4BACX;","names":[]}

package/dist/components/command-palette/index.d.ts

@@ -0,0 +1,3 @@
+export { CommandPalette, type CommandPaletteProps, type CommandPaletteItem, type CommandPaletteVariant, } from "./command-palette";
+export { commandPaletteScrimClass, commandPalettePanelClass, commandPaletteInputClass, commandPaletteSearchIconClass, commandPaletteListboxClass, commandPaletteGroupLabelClass, commandPaletteOptionVariants, commandPaletteLabelClass, commandPaletteSecondaryClass, commandPaletteOptionIconClass, commandPaletteShortcutClass, commandPaletteEmptyClass, commandPaletteFooterClass, type CommandPaletteOptionVariantProps, } from "./command-palette.variants";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/command-palette/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/command-palette/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,cAAc,EACd,KAAK,mBAAmB,EACxB,KAAK,kBAAkB,EACvB,KAAK,qBAAqB,GAC3B,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EACL,wBAAwB,EACxB,wBAAwB,EACxB,wBAAwB,EACxB,6BAA6B,EAC7B,0BAA0B,EAC1B,6BAA6B,EAC7B,4BAA4B,EAC5B,wBAAwB,EACxB,4BAA4B,EAC5B,6BAA6B,EAC7B,2BAA2B,EAC3B,wBAAwB,EACxB,yBAAyB,EACzB,KAAK,gCAAgC,GACtC,MAAM,4BAA4B,CAAC"}

package/dist/components/command-palette/index.js

@@ -0,0 +1,35 @@
+import {
+  CommandPalette
+} from "./command-palette";
+import {
+  commandPaletteScrimClass,
+  commandPalettePanelClass,
+  commandPaletteInputClass,
+  commandPaletteSearchIconClass,
+  commandPaletteListboxClass,
+  commandPaletteGroupLabelClass,
+  commandPaletteOptionVariants,
+  commandPaletteLabelClass,
+  commandPaletteSecondaryClass,
+  commandPaletteOptionIconClass,
+  commandPaletteShortcutClass,
+  commandPaletteEmptyClass,
+  commandPaletteFooterClass
+} from "./command-palette.variants";
+export {
+  CommandPalette,
+  commandPaletteEmptyClass,
+  commandPaletteFooterClass,
+  commandPaletteGroupLabelClass,
+  commandPaletteInputClass,
+  commandPaletteLabelClass,
+  commandPaletteListboxClass,
+  commandPaletteOptionIconClass,
+  commandPaletteOptionVariants,
+  commandPalettePanelClass,
+  commandPaletteScrimClass,
+  commandPaletteSearchIconClass,
+  commandPaletteSecondaryClass,
+  commandPaletteShortcutClass
+};
+//# sourceMappingURL=index.js.map

package/dist/components/command-palette/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/command-palette/index.ts"],"sourcesContent":["export {\n  CommandPalette,\n  type CommandPaletteProps,\n  type CommandPaletteItem,\n  type CommandPaletteVariant,\n} from \"./command-palette\";\nexport {\n  commandPaletteScrimClass,\n  commandPalettePanelClass,\n  commandPaletteInputClass,\n  commandPaletteSearchIconClass,\n  commandPaletteListboxClass,\n  commandPaletteGroupLabelClass,\n  commandPaletteOptionVariants,\n  commandPaletteLabelClass,\n  commandPaletteSecondaryClass,\n  commandPaletteOptionIconClass,\n  commandPaletteShortcutClass,\n  commandPaletteEmptyClass,\n  commandPaletteFooterClass,\n  type CommandPaletteOptionVariantProps,\n} from \"./command-palette.variants\";\n"],"mappings":"AAAA;AAAA,EACE;AAAA,OAIK;AACP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAEK;","names":[]}

package/dist/components/consent-toggle/consent-toggle.d.ts

@@ -0,0 +1,107 @@
+import * as React from "react";
+import { type ConsentToggleVariantProps } from "./consent-toggle.variants";
+/** The presentation form of the ConsentToggle (spec §3). Defaults to `grant`. */
+export type ConsentToggleVariant = NonNullable<ConsentToggleVariantProps["variant"]>;
+export interface ConsentToggleProps extends Pick<ConsentToggleVariantProps, "variant"> {
+    /**
+     * The visible statement of WHAT is being consented to (spec §2), written as a plain
+     * sentence ending with a period. It is the control's accessible name — the toggle is
+     * never unlabeled and never a bare on/off with the meaning left implicit. Required.
+     */
+    scope: string;
+    /**
+     * WHO receives or acts on the data — an app, a partner, or an AI agent (spec §2).
+     * "To whom" is not optional; a consent without a named recipient is incomplete. It is
+     * wired to the control via aria-describedby, so a screen reader announces both what is
+     * being consented to AND to whom — never a bare on/off with the meaning missing. In the
+     * `agent-scoped` variant it is rendered AS an agent (an AgentBadge) so the actor knows
+     * they are granting to an agent, not a human. Required.
+     */
+    recipient: React.ReactNode;
+    /**
+     * One optional line under the scope clarifying the bound or the duration of the grant —
+     * for example, what stops when consent is withdrawn (spec §2) — written as a statement.
+     * Announced with the recipient via aria-describedby.
+     */
+    detail?: React.ReactNode;
+    /**
+     * The optional evidence affordance (spec §2/§3) — a link or control to the PROOF of the
+     * grant: what was consented to, to whom, and when, so the act is reviewable later. Pass
+     * the interactive element itself (a link or Button); it is its OWN focus stop with its
+     * own keyboard model and focus ring, never folded into the busy control. Surfaces a
+     * proof of the consent event, not a stored document. Pairs with `variant="with-evidence"`.
+     */
+    evidence?: React.ReactNode;
+    /**
+     * The plain message shown next to the control on a FAILED grant or withdrawal (spec
+     * §4/§7), naming what failed and what to do next without blaming the reader. It is
+     * announced through an assertive live region (4.1.3) and rendered in the critical status
+     * color — never a silent revert, and never a grant the actor did not confirm.
+     */
+    failureMessage?: React.ReactNode;
+    /**
+     * The controlled granted value (spec §4). `true` is granted, `false` is not granted.
+     * Omit for the uncontrolled pattern. Consent is never pre-granted, so the control rests
+     * NOT granted until the actor turns it on.
+     */
+    checked?: boolean;
+    /**
+     * The uncontrolled initial granted value (spec §4). Ignored when `checked` is provided.
+     * Defaults to `false` — a ConsentToggle never renders granted by default.
+     */
+    defaultChecked?: boolean;
+    /** Fires with the next granted value on every toggle — granting OR withdrawing (spec §6). */
+    onCheckedChange?: (granted: boolean) => void;
+    /**
+     * The grant or withdrawal awaits an async result (spec §4): sets aria-busy and blocks
+     * further input until it resolves. Withdrawal is treated exactly like granting.
+     */
+    loading?: boolean;
+    /**
+     * A consent the actor cannot change is shown disabled (spec §4) — reduced emphasis, no
+     * pointer events — and the current granted / not-granted value still reads to assistive
+     * technology. A consent is never silently locked in the granted position.
+     */
+    disabled?: boolean;
+    /** Visible track size, forwarded to the Switch. Defaults to `md`. */
+    size?: "sm" | "md";
+    /** Extra classes for the root layout column. */
+    className?: string;
+}
+/**
+ * ConsentToggle is the explicit, revocable affordance by which a person or an AI-agent
+ * actor grants or withdraws permission for one specific use of their data or identity
+ * (spec §1). It names what is being consented to AND who the data is shared with, in plain
+ * words, before any grant exists. It encodes ACCOUNTABLE BY DESIGN: consent is a deliberate
+ * act the actor takes, never a default the product assumes, and it can be withdrawn as
+ * easily as it was given (spec §1/§4/§6).
+ *
+ * It COMPOSES the committed Switch as its control rather than reinventing a track and thumb
+ * — the granted axis maps to the Switch's `on`, so the role=switch, the Space/Enter
+ * keyboard model, the aria-checked granted/not-granted value, the visible focus ring, the
+ * target-size floor, and the fast functional slide-and-tint motion all come from the proven
+ * primitive. ConsentToggle adds the scope (the control's accessible name, via the Switch's
+ * visible label), the named recipient and optional detail (rendered as its own block and
+ * wired to the control via aria-describedby so a screen reader announces what AND to whom),
+ * an optional evidence affordance to review the recorded grant, and a failure message for a
+ * failed grant or withdrawal.
+ *
+ * It keeps brand and state apart (spec §4/§5/§8, brand != state): the granted state takes
+ * the BRAND action accent (via the Switch), never the verified-status green — a grant
+ * reports permission, not a verification result, so coloring a grant "verified" both breaks
+ * the invariant and dilutes the meaning of verified. The only status color it binds is the
+ * critical foreground on the failure message, never on the granted state. The motion is the
+ * Switch's fast functional slide/tint, never the 350ms VerifiedBadge-only theatre.
+ *
+ * It rests NOT granted by default: consent is never pre-granted, so the control never
+ * renders granted until the actor turns it on, and the scope and recipient read at rest so
+ * the actor knows what they are about to grant, and to whom, before they grant it (spec
+ * §4/§8). Granting and withdrawing are the same gesture; withdrawal is never harder to
+ * reach than granting (spec §6).
+ *
+ * It is `'use client'` for the `React.useId()` calls that mint the recipient/detail ids it
+ * wires to the control (any hook makes the file a client component); the composed Switch
+ * owns its own state and `'use client'` independently.
+ */
+export declare const ConsentToggle: React.ForwardRefExoticComponent<ConsentToggleProps & React.RefAttributes<HTMLButtonElement>>;
+//# sourceMappingURL=consent-toggle.d.ts.map

package/dist/components/consent-toggle/consent-toggle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"consent-toggle.d.ts","sourceRoot":"","sources":["../../../src/components/consent-toggle/consent-toggle.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAML,KAAK,yBAAyB,EAC/B,MAAM,2BAA2B,CAAC;AAEnC,iFAAiF;AACjF,MAAM,MAAM,oBAAoB,GAAG,WAAW,CAAC,yBAAyB,CAAC,SAAS,CAAC,CAAC,CAAC;AAErF,MAAM,WAAW,kBACf,SAAQ,IAAI,CAAC,yBAAyB,EAAE,SAAS,CAAC;IAClD;;;;OAIG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;;;;;OAOG;IACH,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;;;OAIG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;;;;OAKG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACjC;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,6FAA6F;IAC7F,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7C;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qEAAqE;IACrE,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,gDAAgD;IAChD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,eAAO,MAAM,aAAa,8FAiGzB,CAAC"}

package/dist/components/consent-toggle/consent-toggle.js

@@ -0,0 +1,68 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../lib/cn";
+import { Switch } from "../switch";
+import { AgentBadge } from "../agent-badge";
+import {
+  consentToggleVariants,
+  consentToggleRecipientClass,
+  consentToggleDetailClass,
+  consentToggleEvidenceClass,
+  consentToggleFailureClass
+} from "./consent-toggle.variants";
+const ConsentToggle = React.forwardRef(
+  function ConsentToggle2({
+    variant = "grant",
+    scope,
+    recipient,
+    detail,
+    evidence,
+    failureMessage,
+    checked,
+    defaultChecked,
+    onCheckedChange,
+    loading,
+    disabled,
+    size,
+    className
+  }, ref) {
+    const reactId = React.useId();
+    const recipientId = `${reactId}-recipient`;
+    const detailId = detail != null ? `${reactId}-detail` : void 0;
+    const isAgent = variant === "agent-scoped";
+    const describedBy = detailId ? `${recipientId} ${detailId}` : recipientId;
+    const recipientNode = isAgent ? /* @__PURE__ */ jsx(
+      AgentBadge,
+      {
+        id: recipientId,
+        "data-testid": "consent-toggle-agent-recipient",
+        children: recipient
+      }
+    ) : /* @__PURE__ */ jsx("span", { id: recipientId, className: consentToggleRecipientClass, children: recipient });
+    return /* @__PURE__ */ jsxs("div", { className: cn(consentToggleVariants({ variant }), className), children: [
+      /* @__PURE__ */ jsx(
+        Switch,
+        {
+          ref,
+          label: scope,
+          "aria-describedby": describedBy,
+          checked,
+          defaultChecked,
+          onCheckedChange,
+          loading,
+          disabled,
+          size
+        }
+      ),
+      recipientNode,
+      detail != null ? /* @__PURE__ */ jsx("span", { id: detailId, className: consentToggleDetailClass, children: detail }) : null,
+      evidence != null ? /* @__PURE__ */ jsx("span", { className: consentToggleEvidenceClass, children: evidence }) : null,
+      failureMessage != null ? /* @__PURE__ */ jsx("span", { role: "alert", className: consentToggleFailureClass, children: failureMessage }) : null
+    ] });
+  }
+);
+export {
+  ConsentToggle
+};
+//# sourceMappingURL=consent-toggle.js.map

package/dist/components/consent-toggle/consent-toggle.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/consent-toggle/consent-toggle.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"../../lib/cn\";\nimport { Switch } from \"../switch\";\nimport { AgentBadge } from \"../agent-badge\";\nimport {\n  consentToggleVariants,\n  consentToggleRecipientClass,\n  consentToggleDetailClass,\n  consentToggleEvidenceClass,\n  consentToggleFailureClass,\n  type ConsentToggleVariantProps,\n} from \"./consent-toggle.variants\";\n\n/** The presentation form of the ConsentToggle (spec §3). Defaults to `grant`. */\nexport type ConsentToggleVariant = NonNullable<ConsentToggleVariantProps[\"variant\"]>;\n\nexport interface ConsentToggleProps\n  extends Pick<ConsentToggleVariantProps, \"variant\"> {\n  /**\n   * The visible statement of WHAT is being consented to (spec §2), written as a plain\n   * sentence ending with a period. It is the control's accessible name — the toggle is\n   * never unlabeled and never a bare on/off with the meaning left implicit. Required.\n   */\n  scope: string;\n  /**\n   * WHO receives or acts on the data — an app, a partner, or an AI agent (spec §2).\n   * \"To whom\" is not optional; a consent without a named recipient is incomplete. It is\n   * wired to the control via aria-describedby, so a screen reader announces both what is\n   * being consented to AND to whom — never a bare on/off with the meaning missing. In the\n   * `agent-scoped` variant it is rendered AS an agent (an AgentBadge) so the actor knows\n   * they are granting to an agent, not a human. Required.\n   */\n  recipient: React.ReactNode;\n  /**\n   * One optional line under the scope clarifying the bound or the duration of the grant —\n   * for example, what stops when consent is withdrawn (spec §2) — written as a statement.\n   * Announced with the recipient via aria-describedby.\n   */\n  detail?: React.ReactNode;\n  /**\n   * The optional evidence affordance (spec §2/§3) — a link or control to the PROOF of the\n   * grant: what was consented to, to whom, and when, so the act is reviewable later. Pass\n   * the interactive element itself (a link or Button); it is its OWN focus stop with its\n   * own keyboard model and focus ring, never folded into the busy control. Surfaces a\n   * proof of the consent event, not a stored document. Pairs with `variant=\"with-evidence\"`.\n   */\n  evidence?: React.ReactNode;\n  /**\n   * The plain message shown next to the control on a FAILED grant or withdrawal (spec\n   * §4/§7), naming what failed and what to do next without blaming the reader. It is\n   * announced through an assertive live region (4.1.3) and rendered in the critical status\n   * color — never a silent revert, and never a grant the actor did not confirm.\n   */\n  failureMessage?: React.ReactNode;\n  /**\n   * The controlled granted value (spec §4). `true` is granted, `false` is not granted.\n   * Omit for the uncontrolled pattern. Consent is never pre-granted, so the control rests\n   * NOT granted until the actor turns it on.\n   */\n  checked?: boolean;\n  /**\n   * The uncontrolled initial granted value (spec §4). Ignored when `checked` is provided.\n   * Defaults to `false` — a ConsentToggle never renders granted by default.\n   */\n  defaultChecked?: boolean;\n  /** Fires with the next granted value on every toggle — granting OR withdrawing (spec §6). */\n  onCheckedChange?: (granted: boolean) => void;\n  /**\n   * The grant or withdrawal awaits an async result (spec §4): sets aria-busy and blocks\n   * further input until it resolves. Withdrawal is treated exactly like granting.\n   */\n  loading?: boolean;\n  /**\n   * A consent the actor cannot change is shown disabled (spec §4) — reduced emphasis, no\n   * pointer events — and the current granted / not-granted value still reads to assistive\n   * technology. A consent is never silently locked in the granted position.\n   */\n  disabled?: boolean;\n  /** Visible track size, forwarded to the Switch. Defaults to `md`. */\n  size?: \"sm\" | \"md\";\n  /** Extra classes for the root layout column. */\n  className?: string;\n}\n\n/**\n * ConsentToggle is the explicit, revocable affordance by which a person or an AI-agent\n * actor grants or withdraws permission for one specific use of their data or identity\n * (spec §1). It names what is being consented to AND who the data is shared with, in plain\n * words, before any grant exists. It encodes ACCOUNTABLE BY DESIGN: consent is a deliberate\n * act the actor takes, never a default the product assumes, and it can be withdrawn as\n * easily as it was given (spec §1/§4/§6).\n *\n * It COMPOSES the committed Switch as its control rather than reinventing a track and thumb\n * — the granted axis maps to the Switch's `on`, so the role=switch, the Space/Enter\n * keyboard model, the aria-checked granted/not-granted value, the visible focus ring, the\n * target-size floor, and the fast functional slide-and-tint motion all come from the proven\n * primitive. ConsentToggle adds the scope (the control's accessible name, via the Switch's\n * visible label), the named recipient and optional detail (rendered as its own block and\n * wired to the control via aria-describedby so a screen reader announces what AND to whom),\n * an optional evidence affordance to review the recorded grant, and a failure message for a\n * failed grant or withdrawal.\n *\n * It keeps brand and state apart (spec §4/§5/§8, brand != state): the granted state takes\n * the BRAND action accent (via the Switch), never the verified-status green — a grant\n * reports permission, not a verification result, so coloring a grant \"verified\" both breaks\n * the invariant and dilutes the meaning of verified. The only status color it binds is the\n * critical foreground on the failure message, never on the granted state. The motion is the\n * Switch's fast functional slide/tint, never the 350ms VerifiedBadge-only theatre.\n *\n * It rests NOT granted by default: consent is never pre-granted, so the control never\n * renders granted until the actor turns it on, and the scope and recipient read at rest so\n * the actor knows what they are about to grant, and to whom, before they grant it (spec\n * §4/§8). Granting and withdrawing are the same gesture; withdrawal is never harder to\n * reach than granting (spec §6).\n *\n * It is `'use client'` for the `React.useId()` calls that mint the recipient/detail ids it\n * wires to the control (any hook makes the file a client component); the composed Switch\n * owns its own state and `'use client'` independently.\n */\nexport const ConsentToggle = React.forwardRef<HTMLButtonElement, ConsentToggleProps>(\n  function ConsentToggle(\n    {\n      variant = \"grant\",\n      scope,\n      recipient,\n      detail,\n      evidence,\n      failureMessage,\n      checked,\n      defaultChecked,\n      onCheckedChange,\n      loading,\n      disabled,\n      size,\n      className,\n    },\n    ref,\n  ) {\n    const reactId = React.useId();\n    const recipientId = `${reactId}-recipient`;\n    const detailId = detail != null ? `${reactId}-detail` : undefined;\n    const isAgent = variant === \"agent-scoped\";\n\n    // The recipient (and optional detail) are ConsentToggle's OWN elements with stable ids,\n    // wired to the control via aria-describedby (spec §2/§7) — so a screen reader announces\n    // \"to whom\" alongside the scope, never a bare on/off with the meaning missing. The ids\n    // are space-joined (recipient first), the aria-describedby convention for multiple\n    // targets. This OVERRIDES the Switch's own internal aria-describedby (a caller-passed\n    // aria-describedby lands last in the Switch's prop spread), so the Switch is composed,\n    // not modified — its description slot is left unused here.\n    const describedBy = detailId ? `${recipientId} ${detailId}` : recipientId;\n\n    // In the agent-scoped variant the recipient is named AS an agent: an AgentBadge marks\n    // the actor-kind so the human/agent distinction is never the silent default; the\n    // recipient text still reaches AT inside the badge.\n    const recipientNode = isAgent ? (\n      <AgentBadge\n        id={recipientId}\n        data-testid=\"consent-toggle-agent-recipient\"\n      >\n        {recipient}\n      </AgentBadge>\n    ) : (\n      <span id={recipientId} className={consentToggleRecipientClass}>\n        {recipient}\n      </span>\n    );\n\n    return (\n      <div className={cn(consentToggleVariants({ variant }), className)}>\n        {/* the control row: the composed Switch. `scope` is its visible label AND its\n            accessible name (the Switch's aria-labelledby); the recipient + detail are wired\n            as the accessible DESCRIPTION via the overriding aria-describedby. It rests NOT\n            granted unless the actor (or a controlled `checked`) turns it on — consent is\n            never pre-granted (spec §4/§8). */}\n        <Switch\n          ref={ref}\n          label={scope}\n          aria-describedby={describedBy}\n          checked={checked}\n          defaultChecked={defaultChecked}\n          onCheckedChange={onCheckedChange}\n          loading={loading}\n          disabled={disabled}\n          size={size}\n        />\n\n        {/* the recipient + optional detail (spec §2): WHO receives the data, and the\n            optional bound of the grant. Visible at rest so the actor reads to whom and what\n            stops before they act; referenced by the control's aria-describedby above. */}\n        {recipientNode}\n        {detail != null ? (\n          <span id={detailId} className={consentToggleDetailClass}>\n            {detail}\n          </span>\n        ) : null}\n\n        {/* the optional evidence affordance (spec §2/§3): the caller's own link/Button to\n            the proof of the grant. It is a separate focus stop with its own keyboard model\n            and focus ring — never folded into the busy control. */}\n        {evidence != null ? (\n          <span className={consentToggleEvidenceClass}>{evidence}</span>\n        ) : null}\n\n        {/* the failure message on a failed grant or withdrawal (spec §4/§7): stated next to\n            the control, in the critical color, through an ASSERTIVE live region (role=alert,\n            4.1.3) so it is announced — never a silent revert. It names what failed and what\n            to do next without blaming the reader. */}\n        {failureMessage != null ? (\n          <span role=\"alert\" className={consentToggleFailureClass}>\n            {failureMessage}\n          </span>\n        ) : null}\n      </div>\n    );\n  },\n);\n"],"mappings":";AA8JM,cAaA,YAbA;AA5JN,YAAY,WAAW;AACvB,SAAS,UAAU;AACnB,SAAS,cAAc;AACvB,SAAS,kBAAkB;AAC3B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAEK;AA4GA,MAAM,gBAAgB,MAAM;AAAA,EACjC,SAASA,eACP;AAAA,IACE,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,GACA,KACA;AACA,UAAM,UAAU,MAAM,MAAM;AAC5B,UAAM,cAAc,GAAG,OAAO;AAC9B,UAAM,WAAW,UAAU,OAAO,GAAG,OAAO,YAAY;AACxD,UAAM,UAAU,YAAY;AAS5B,UAAM,cAAc,WAAW,GAAG,WAAW,IAAI,QAAQ,KAAK;AAK9D,UAAM,gBAAgB,UACpB;AAAA,MAAC;AAAA;AAAA,QACC,IAAI;AAAA,QACJ,eAAY;AAAA,QAEX;AAAA;AAAA,IACH,IAEA,oBAAC,UAAK,IAAI,aAAa,WAAW,6BAC/B,qBACH;AAGF,WACE,qBAAC,SAAI,WAAW,GAAG,sBAAsB,EAAE,QAAQ,CAAC,GAAG,SAAS,GAM9D;AAAA;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA,OAAO;AAAA,UACP,oBAAkB;AAAA,UAClB;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA;AAAA,MACF;AAAA,MAKC;AAAA,MACA,UAAU,OACT,oBAAC,UAAK,IAAI,UAAU,WAAW,0BAC5B,kBACH,IACE;AAAA,MAKH,YAAY,OACX,oBAAC,UAAK,WAAW,4BAA6B,oBAAS,IACrD;AAAA,MAMH,kBAAkB,OACjB,oBAAC,UAAK,MAAK,SAAQ,WAAW,2BAC3B,0BACH,IACE;AAAA,OACN;AAAA,EAEJ;AACF;","names":["ConsentToggle"]}

package/dist/components/consent-toggle/consent-toggle.variants.d.ts

@@ -0,0 +1,10 @@
+import { type VariantProps } from "class-variance-authority";
+export declare const consentToggleVariants: (props?: ({
+    variant?: "grant" | "with-evidence" | "agent-scoped" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const consentToggleRecipientClass = "text-body text-text-secondary";
+export declare const consentToggleDetailClass = "text-body text-text-secondary";
+export declare const consentToggleEvidenceClass = "flex items-center text-body";
+export declare const consentToggleFailureClass = "text-body text-status-critical-fg";
+export type ConsentToggleVariantProps = VariantProps<typeof consentToggleVariants>;
+//# sourceMappingURL=consent-toggle.variants.d.ts.map

package/dist/components/consent-toggle/consent-toggle.variants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"consent-toggle.variants.d.ts","sourceRoot":"","sources":["../../../src/components/consent-toggle/consent-toggle.variants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAgClE,eAAO,MAAM,qBAAqB;;8EAehC,CAAC;AAMH,eAAO,MAAM,2BAA2B,kCAAkC,CAAC;AAK3E,eAAO,MAAM,wBAAwB,kCAAkC,CAAC;AAOxE,eAAO,MAAM,0BAA0B,gCAAgC,CAAC;AAOxE,eAAO,MAAM,yBAAyB,sCAAsC,CAAC;AAE7E,MAAM,MAAM,yBAAyB,GAAG,YAAY,CAAC,OAAO,qBAAqB,CAAC,CAAC"}

package/dist/components/consent-toggle/consent-toggle.variants.js

@@ -0,0 +1,29 @@
+import { cva } from "class-variance-authority";
+const consentToggleVariants = cva("flex flex-col gap-(--space-2)", {
+  variants: {
+    // STRUCTURAL axis = spec §3. Display/composition forms, never alarm levels.
+    variant: {
+      // grant (default): a single permission the actor turns on to allow, off to withhold.
+      grant: "",
+      // with-evidence: adds the evidence affordance so the actor can review the recorded
+      // grant — what, to whom, when. Use wherever the grant is consequential.
+      "with-evidence": "",
+      // agent-scoped: the recipient is an AI-agent actor, named AS an agent (AgentBadge),
+      // so the actor knows they are granting to an agent, not a human.
+      "agent-scoped": ""
+    }
+  },
+  defaultVariants: { variant: "grant" }
+});
+const consentToggleRecipientClass = "text-body text-text-secondary";
+const consentToggleDetailClass = "text-body text-text-secondary";
+const consentToggleEvidenceClass = "flex items-center text-body";
+const consentToggleFailureClass = "text-body text-status-critical-fg";
+export {
+  consentToggleDetailClass,
+  consentToggleEvidenceClass,
+  consentToggleFailureClass,
+  consentToggleRecipientClass,
+  consentToggleVariants
+};
+//# sourceMappingURL=consent-toggle.variants.js.map

package/dist/components/consent-toggle/consent-toggle.variants.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/consent-toggle/consent-toggle.variants.ts"],"sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\";\n\n// ConsentToggle is the explicit, revocable affordance by which an actor grants or\n// withdraws permission for one specific use of their data or identity (spec §1). It\n// COMPOSES the committed Switch as its control — the granted axis maps to the Switch's\n// `on` — and adds the scope, the named recipient, the optional detail, the optional\n// evidence affordance, and the failure message AROUND it. So the track / thumb / focus\n// ring / target-size floor / slide-and-tint motion are bound ONCE in switch.variants.ts\n// and are NOT re-bound here; this file binds only the surrounding text + layout roles.\n//\n// brand != state (spec §4/§5/§8). The granted track takes the primary ACTION accent\n// (the Switch's `aria-checked:bg-action-primary-bg`), NEVER --color-status-verified-*:\n// verified green is the in-product verified status, never a consent affordance, and a\n// grant reports permission, not a verification result. ConsentToggle therefore binds\n// NOTHING from the status tier on its granted state — the one status color it ever\n// reaches for is --color-status-critical-fg, and ONLY on the failure message (a stated\n// failed grant/withdrawal), never on the granted/checked state. This component-scoped\n// invariant (no status color on the grant; verified green never a consent affordance) is\n// pinned as a test in consent-toggle.test.tsx — the action accent IS legitimate here, so\n// the negative forbids only the STATUS tier, per the build-on-brand skill's scoping note.\n//\n// The motion is the Switch's FAST functional slide/tint on verdify easing, collapsing to\n// the instant endpoint under reduced motion — never the 350ms VerifiedBadge-only theatre\n// duration: a consent grant is not a verification (G-U3).\n\n// The root layout (spec §2): a column stacking the control row, the optional evidence\n// affordance, and the optional failure message at the --space-2 gap. The `variant` axis\n// (spec §3) is a form of how the consent is PRESENTED — a plain grant, a grant with the\n// evidence affordance, or a grant scoped to an AI agent — never a level of color or alarm,\n// so NONE of the variants recolors anything: the granted accent and every text role are\n// identical across all three. Non-interactive container: the focus ring, the keyboard\n// model, and the target-size floor all live on the composed Switch control, not here.\nexport const consentToggleVariants = cva(\"flex flex-col gap-(--space-2)\", {\n  variants: {\n    // STRUCTURAL axis = spec §3. Display/composition forms, never alarm levels.\n    variant: {\n      // grant (default): a single permission the actor turns on to allow, off to withhold.\n      grant: \"\",\n      // with-evidence: adds the evidence affordance so the actor can review the recorded\n      // grant — what, to whom, when. Use wherever the grant is consequential.\n      \"with-evidence\": \"\",\n      // agent-scoped: the recipient is an AI-agent actor, named AS an agent (AgentBadge),\n      // so the actor knows they are granting to an agent, not a human.\n      \"agent-scoped\": \"\",\n    },\n  },\n  defaultVariants: { variant: \"grant\" },\n});\n\n// The recipient + detail block (spec §2/§5): who receives the data and the optional bound\n// of the grant, in the SECONDARY text color at the --text-body type role. It is composed\n// into the control's accessible description (aria-describedby), so a screen reader\n// announces \"to whom\" alongside the scope — never a bare on/off with the meaning missing.\nexport const consentToggleRecipientClass = \"text-body text-text-secondary\";\n\n// The optional detail line (spec §2/§5): one statement clarifying the bound or duration of\n// the grant (for example, what stops when consent is withdrawn), under the recipient, in\n// the secondary text color at the body role.\nexport const consentToggleDetailClass = \"text-body text-text-secondary\";\n\n// The optional evidence affordance row (spec §2/§3): a slot holding the caller's link or\n// Button to the PROOF of the grant — what was consented to, to whom, and when — so the act\n// is reviewable later. It is the caller's own focus stop with its own keyboard model and\n// focus ring (the evidence control is not folded into the busy switch); this row only\n// positions it. Surfaces a proof of the consent event, not a stored document.\nexport const consentToggleEvidenceClass = \"flex items-center text-body\";\n\n// The failure message (spec §4/§5/§7): shown next to the control on a FAILED grant or\n// withdrawal, naming what failed and what to do next without blaming the reader, in the\n// CRITICAL status foreground at the --text-body role. It is the ONLY status color the\n// component binds, and only here — never on the granted state (brand != state). It is\n// announced through an assertive live region (role=alert), set in the tsx, per 4.1.3.\nexport const consentToggleFailureClass = \"text-body text-status-critical-fg\";\n\nexport type ConsentToggleVariantProps = VariantProps<typeof consentToggleVariants>;\n"],"mappings":"AAAA,SAAS,WAA8B;AAgChC,MAAM,wBAAwB,IAAI,iCAAiC;AAAA,EACxE,UAAU;AAAA;AAAA,IAER,SAAS;AAAA;AAAA,MAEP,OAAO;AAAA;AAAA;AAAA,MAGP,iBAAiB;AAAA;AAAA;AAAA,MAGjB,gBAAgB;AAAA,IAClB;AAAA,EACF;AAAA,EACA,iBAAiB,EAAE,SAAS,QAAQ;AACtC,CAAC;AAMM,MAAM,8BAA8B;AAKpC,MAAM,2BAA2B;AAOjC,MAAM,6BAA6B;AAOnC,MAAM,4BAA4B;","names":[]}

package/dist/components/consent-toggle/index.d.ts

@@ -0,0 +1,3 @@
+export { ConsentToggle, type ConsentToggleProps, type ConsentToggleVariant, } from "./consent-toggle";
+export { consentToggleVariants, consentToggleRecipientClass, consentToggleDetailClass, consentToggleEvidenceClass, consentToggleFailureClass, type ConsentToggleVariantProps, } from "./consent-toggle.variants";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/consent-toggle/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/consent-toggle/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,aAAa,EACb,KAAK,kBAAkB,EACvB,KAAK,oBAAoB,GAC1B,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EACL,qBAAqB,EACrB,2BAA2B,EAC3B,wBAAwB,EACxB,0BAA0B,EAC1B,yBAAyB,EACzB,KAAK,yBAAyB,GAC/B,MAAM,2BAA2B,CAAC"}

package/dist/components/consent-toggle/index.js

@@ -0,0 +1,19 @@
+import {
+  ConsentToggle
+} from "./consent-toggle";
+import {
+  consentToggleVariants,
+  consentToggleRecipientClass,
+  consentToggleDetailClass,
+  consentToggleEvidenceClass,
+  consentToggleFailureClass
+} from "./consent-toggle.variants";
+export {
+  ConsentToggle,
+  consentToggleDetailClass,
+  consentToggleEvidenceClass,
+  consentToggleFailureClass,
+  consentToggleRecipientClass,
+  consentToggleVariants
+};
+//# sourceMappingURL=index.js.map

package/dist/components/consent-toggle/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/consent-toggle/index.ts"],"sourcesContent":["export {\n  ConsentToggle,\n  type ConsentToggleProps,\n  type ConsentToggleVariant,\n} from \"./consent-toggle\";\nexport {\n  consentToggleVariants,\n  consentToggleRecipientClass,\n  consentToggleDetailClass,\n  consentToggleEvidenceClass,\n  consentToggleFailureClass,\n  type ConsentToggleVariantProps,\n} from \"./consent-toggle.variants\";\n"],"mappings":"AAAA;AAAA,EACE;AAAA,OAGK;AACP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAEK;","names":[]}