@krizaka/ui 2.2.0 → 2.4.0

package/registry/filter-bar.json

@@ -0,0 +1,347 @@
+{
+  "name": "filter-bar",
+  "type": "primitive",
+  "title": "Filter bar",
+  "summary": "The bar above a list: the controls that narrow it, the filters in force as removable chips, “Clear filters”, and the count of results — the state kept by the app, in the address.",
+  "description": "The bar above a list: the controls that narrow it, the filters in force as removable chips, “Clear filters”, and the count of results — the state kept by the app, in the address.",
+  "status": "beta",
+  "category": "forms",
+  "platforms": "web",
+  "whenToUse": [
+    "Above a table or a grid people narrow with several criteria at once: status, type, owner, period, a query.",
+    "When the filters must be visible and undoable one by one, and shared in a link."
+  ],
+  "whenNotToUse": [
+    {
+      "when": "For one choice among a few views of a list: chips in a single group.",
+      "use": "chip"
+    },
+    {
+      "when": "For a search alone: a search field.",
+      "use": "search-field"
+    }
+  ],
+  "bestPractices": [
+    "Keep the filters in the address: `readFilterParams` on load, `writeFilterParams` (which resets the page) on change.",
+    "Give each active chip the filter's name and value (“Status: Failed”), not the value alone.",
+    "Count the results in `results` (“42 jobs”): it is announced when it changes.",
+    "Use `FilterMenu` for a list of values (checkboxes, or radios with `multiple={false}`), a `DateRangePicker` for a period."
+  ],
+  "accessibility": {
+    "keyboard": [
+      {
+        "keys": "Enter / Space / Arrow Down",
+        "action": "Opens a filter's menu."
+      },
+      {
+        "keys": "Arrow keys",
+        "action": "Move between the options of an open menu; Space checks one, the menu stays open."
+      },
+      {
+        "keys": "Esc",
+        "action": "Closes the menu and returns to its button."
+      }
+    ],
+    "notes": [
+      "The bar is a `group` named by `label`; each chip's remove button is named by `removeLabel` (“Remove Status: Failed”).",
+      "The count of results is a polite live region: a change of filter is heard without moving the focus.",
+      "`FilterMenu` is a Radix menu of checkbox (or radio) items: their state is announced as they toggle."
+    ]
+  },
+  "related": [
+    "search-field",
+    "chip",
+    "dropdown-menu",
+    "date-picker",
+    "data-table"
+  ],
+  "web": {
+    "entry": "@krizaka/ui/filter-bar",
+    "import": "import { FilterBar, FilterMenu, readFilterParams, writeFilterParams } from \"@krizaka/ui/filter-bar\";",
+    "props": [
+      {
+        "component": "FilterBar",
+        "description": "The bar of filters above a list: controls, active filters as chips, clear all, the count of results.",
+        "props": [
+          {
+            "name": "label",
+            "type": "string",
+            "default": null,
+            "description": "The accessible name of the bar (\"Filter jobs\"), passed translated.",
+            "required": true
+          },
+          {
+            "name": "active",
+            "type": "readonly ActiveFilter[]",
+            "default": "[]",
+            "description": "The filters in force, each a removable chip.",
+            "required": false
+          },
+          {
+            "name": "children",
+            "type": "ReactNode",
+            "default": null,
+            "description": "The controls: `SearchField`, `FilterMenu`, `DateRangePicker`, a `Chip.Group`…",
+            "required": false
+          },
+          {
+            "name": "clearLabel",
+            "type": "string",
+            "default": "Clear filters",
+            "description": "The \"Clear all\" button (\"Clear filters\"), passed translated.",
+            "required": false
+          },
+          {
+            "name": "onClearAll",
+            "type": "(() => void)",
+            "default": null,
+            "description": "Clears every filter; the \"Clear all\" button shows when there is at least one.",
+            "required": false
+          },
+          {
+            "name": "removeLabel",
+            "type": "((label: string) => string)",
+            "default": "(text) => `Remove ${text}`",
+            "description": "A chip's remove button: `(label) => \"Remove \" + label`, passed translated.",
+            "required": false
+          },
+          {
+            "name": "results",
+            "type": "string",
+            "default": null,
+            "description": "The count of results (\"42 jobs\"), announced politely when it changes.",
+            "required": false
+          }
+        ]
+      },
+      {
+        "component": "FilterMenu",
+        "description": "A filter's button and its menu of options — checkboxes (several values) or radios (one) — with a count of chosen ones.",
+        "props": [
+          {
+            "name": "label",
+            "type": "string",
+            "default": null,
+            "description": "The name of the filter on its button (\"Status\"), passed translated.",
+            "required": true
+          },
+          {
+            "name": "onValueChange",
+            "type": "((value: string[]) => void) | ((value: string) => void)",
+            "default": null,
+            "description": "Called with the values chosen.\nCalled with the value chosen.",
+            "required": true
+          },
+          {
+            "name": "options",
+            "type": "readonly FilterOption[]",
+            "default": null,
+            "description": "The choices.",
+            "required": true
+          },
+          {
+            "name": "value",
+            "type": "string | readonly string[]",
+            "default": null,
+            "description": "The values chosen.\nThe value chosen, `\"\"` for none.",
+            "required": true
+          },
+          {
+            "name": "className",
+            "type": "string",
+            "default": null,
+            "description": "Classes merged on the button.",
+            "required": false
+          },
+          {
+            "name": "defaultOpen",
+            "type": "boolean",
+            "default": null,
+            "description": "Opens the menu at first (a story, a test).",
+            "required": false
+          },
+          {
+            "name": "multiple",
+            "type": "boolean",
+            "default": null,
+            "description": "Several values (checkboxes, default) or one (radios).\nOne value: the options are radios.",
+            "required": false
+          }
+        ]
+      }
+    ],
+    "examples": [
+      {
+        "name": "jobs",
+        "title": "Jobs",
+        "description": "A search, a status menu (several values), a model menu (one value), the chips and the count.",
+        "path": "examples/filter-bar/jobs.tsx",
+        "module": "@krizaka/ui/registry/examples/filter-bar/jobs",
+        "code": "\"use client\";\n\nimport { FilterBar, FilterMenu } from \"@krizaka/ui/filter-bar\";\nimport { SearchField } from \"@krizaka/ui/search-field\";\nimport * as React from \"react\";\n\nconst STATUS = [\n  { value: \"running\", label: \"Running\", count: 3 },\n  { value: \"done\", label: \"Done\", count: 128 },\n  { value: \"failed\", label: \"Failed\", count: 6 },\n];\nconst MODELS = [\n  { value: \"\", label: \"All models\" },\n  { value: \"flux\", label: \"Flux 1.1\" },\n  { value: \"whisper\", label: \"Whisper large\" },\n];\n\n// Several criteria at once; each one in force is a chip that undoes it.\nexport default function FilterBarJobs() {\n  const [query, setQuery] = React.useState(\"\");\n  const [status, setStatus] = React.useState([\"failed\"]);\n  const [model, setModel] = React.useState(\"flux\");\n  const active = [\n    ...status.map((s) => ({ id: `status:${s}`, label: `Status: ${STATUS.find((o) => o.value === s)?.label}`, onRemove: () => setStatus(status.filter((x) => x !== s)) })),\n    ...(model ? [{ id: \"model\", label: `Model: ${MODELS.find((m) => m.value === model)?.label}`, onRemove: () => setModel(\"\") }] : []),\n  ];\n  return (\n    <FilterBar label=\"Filter jobs\" active={active} onClearAll={() => {\n        setStatus([]);\n        setModel(\"\");\n      }} results=\"6 jobs\">\n      <SearchField label=\"Search jobs\" placeholder=\"Search jobs\" value={query} onValueChange={setQuery} landmark={false} className=\"sm:max-w-64\" />\n      <FilterMenu label=\"Status\" options={STATUS} value={status} onValueChange={setStatus} />\n      <FilterMenu label=\"Model\" multiple={false} options={MODELS} value={model} onValueChange={setModel} />\n    </FilterBar>\n  );\n}\n"
+      },
+      {
+        "name": "menu",
+        "title": "A filter's menu",
+        "description": "`FilterMenu` open: checkboxes with the count each value would give.",
+        "path": "examples/filter-bar/menu.tsx",
+        "module": "@krizaka/ui/registry/examples/filter-bar/menu",
+        "code": "\"use client\";\n\nimport { FilterMenu } from \"@krizaka/ui/filter-bar\";\nimport * as React from \"react\";\n\n// A filter's menu: checkboxes, and what each value would give.\nexport default function FilterBarMenu({ defaultOpen }: { defaultOpen?: boolean }) {\n  const [formats, setFormats] = React.useState([\"vertical\"]);\n  return (\n    <FilterMenu\n      label=\"Format\"\n      defaultOpen={defaultOpen}\n      options={[\n        { value: \"vertical\", label: \"Vertical\", count: 214 },\n        { value: \"landscape\", label: \"Landscape\", count: 96 },\n        { value: \"square\", label: \"Square\", count: 12 },\n        { value: \"audio\", label: \"Audio only\", count: 0, disabled: true },\n      ]}\n      value={formats}\n      onValueChange={setFormats}\n    />\n  );\n}\n"
+      },
+      {
+        "name": "address",
+        "title": "In the address",
+        "description": "The filters read from and written to `URLSearchParams`, the page reset on change.",
+        "path": "examples/filter-bar/address.tsx",
+        "module": "@krizaka/ui/registry/examples/filter-bar/address",
+        "code": "\"use client\";\n\nimport { FilterBar, FilterMenu, readFilterParams, writeFilterParams } from \"@krizaka/ui/filter-bar\";\nimport * as React from \"react\";\n\nconst ROLES = [\n  { value: \"creator\", label: \"Creator\" },\n  { value: \"fan\", label: \"Fan\" },\n  { value: \"admin\", label: \"Admin\" },\n];\n\n// The address is the state: read it, write it back (the page goes back to 1). In Next.js: useSearchParams + router.replace.\nexport default function FilterBarAddress() {\n  const [params, setParams] = React.useState(() => new URLSearchParams(\"role=creator,admin&page=3\"));\n  const { role } = readFilterParams(params, [\"role\"]);\n  const set = (next: string[]) => setParams(writeFilterParams(params, { role: next }));\n  return (\n    <FilterBar\n      label=\"Filter users\"\n      active={role!.map((r) => ({ id: r, label: `Role: ${ROLES.find((o) => o.value === r)?.label}`, onRemove: () => set(role!.filter((x) => x !== r)) }))}\n      onClearAll={() => set([])}\n      results={`?${params.toString()}`}\n    >\n      <FilterMenu label=\"Role\" options={ROLES} value={role!} onValueChange={set} />\n    </FilterBar>\n  );\n}\n"
+      }
+    ]
+  },
+  "native": null,
+  "files": [
+    {
+      "path": "filter-bar/filter-bar.tsx",
+      "content": "// Client (menus in a portal). The bar above a list: the controls that narrow it (a SearchField, FilterMenus, a\n// DateRangePicker — any child), the filters in force as removable chips, \"Clear all\", and the count of results in a\n// polite live region. It holds no state: the app keeps the filters — in the address, ideally — and the\n// `readFilterParams` / `writeFilterParams` helpers move them between a `URLSearchParams` and an object.\nimport { DropdownMenu as MenuPrimitive } from \"radix-ui\";\nimport * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nimport { Chip } from \"../chip\";\nimport { DropdownMenu, menu } from \"../dropdown-menu\";\nimport { ChevronGlyph } from \"../glyphs\";\n\nexport const filterBar = tv({\n  slots: {\n    root: \"flex w-full flex-col gap-3\",\n    controls: \"flex w-full flex-wrap items-center gap-2 [&>*]:min-w-0\",\n    active: \"flex flex-wrap items-center gap-2\",\n    clear:\n      \"rounded-md px-2 py-1 text-xs font-semibold text-fg-accent hover:bg-surface-2 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring\",\n    results: \"ml-auto text-xs text-fg-secondary tabular-nums\",\n    trigger:\n      \"inline-flex h-11 shrink-0 items-center gap-2 rounded-lg border border-border-default bg-surface-1 px-3.5 text-sm font-semibold text-fg-secondary \" +\n      \"transition-colors hover:border-border-strong hover:text-fg focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring \" +\n      \"data-[active]:border-accent data-[active]:bg-accent-soft data-[active]:text-fg data-[state=open]:border-border-strong\",\n    count: \"inline-flex h-5 min-w-5 items-center justify-center rounded-full bg-accent px-1.5 text-[11px] font-bold tabular-nums text-on-accent\",\n    optionCount: \"ml-auto pl-4 text-xs tabular-nums text-fg-secondary\",\n  },\n});\n\nexport type ActiveFilter = {\n  /** A stable key (`\"status:failed\"`). */\n  id: string;\n  /** What the chip says, passed translated (\"Status: Failed\"). */\n  label: string;\n  /** Removes this filter. */\n  onRemove: () => void;\n};\n\nexport type FilterBarProps = Omit<React.ComponentProps<\"div\">, \"children\" | \"results\"> & {\n  /** The accessible name of the bar (\"Filter jobs\"), passed translated. */\n  label: string;\n  /** The controls: `SearchField`, `FilterMenu`, `DateRangePicker`, a `Chip.Group`… */\n  children?: React.ReactNode;\n  /** The filters in force, each a removable chip. */\n  active?: readonly ActiveFilter[];\n  /** Clears every filter; the \"Clear all\" button shows when there is at least one. */\n  onClearAll?: () => void;\n  /** The \"Clear all\" button (\"Clear filters\"), passed translated. */\n  clearLabel?: string;\n  /** A chip's remove button: `(label) => \"Remove \" + label`, passed translated. */\n  removeLabel?: (label: string) => string;\n  /** The count of results (\"42 jobs\"), announced politely when it changes. */\n  results?: string;\n};\n\n/** The bar of filters above a list: controls, active filters as chips, clear all, the count of results. */\nexport function FilterBar({\n  label,\n  children,\n  active = [],\n  onClearAll,\n  clearLabel = \"Clear filters\",\n  removeLabel = (text) => `Remove ${text}`,\n  results,\n  className,\n  ...props\n}: FilterBarProps) {\n  const s = filterBar();\n  return (\n    <div role=\"group\" aria-label={label} className={s.root({ className })} {...props}>\n      {children ? <div className={s.controls()}>{children}</div> : null}\n      {active.length > 0 || results !== undefined ? (\n        <div className={s.active()}>\n          {active.map((filter) => (\n            <Chip key={filter.id} size=\"sm\" removable removeLabel={removeLabel(filter.label)} onRemove={filter.onRemove}>\n              {filter.label}\n            </Chip>\n          ))}\n          {active.length > 0 && onClearAll ? (\n            <button type=\"button\" className={s.clear()} onClick={onClearAll}>\n              {clearLabel}\n            </button>\n          ) : null}\n          <p className={s.results()} aria-live=\"polite\" aria-atomic>\n            {results}\n          </p>\n        </div>\n      ) : null}\n    </div>\n  );\n}\n\nexport type FilterOption = {\n  /** What the app stores (and puts in the address). */\n  value: string;\n  /** What the person reads, passed translated. */\n  label: string;\n  /** How many results it would give: shown on the right. */\n  count?: number;\n  /** Shown but not choosable. */\n  disabled?: boolean;\n};\n\ntype FilterMenuBase = {\n  /** The name of the filter on its button (\"Status\"), passed translated. */\n  label: string;\n  /** The choices. */\n  options: readonly FilterOption[];\n  /** Opens the menu at first (a story, a test). */\n  defaultOpen?: boolean;\n  /** Classes merged on the button. */\n  className?: string;\n};\n\nexport type FilterMenuProps =\n  | (FilterMenuBase & {\n      /** Several values (checkboxes, default) or one (radios). */\n      multiple?: true;\n      /** The values chosen. */\n      value: readonly string[];\n      /** Called with the values chosen. */\n      onValueChange: (value: string[]) => void;\n    })\n  | (FilterMenuBase & {\n      /** One value: the options are radios. */\n      multiple: false;\n      /** The value chosen, `\"\"` for none. */\n      value: string;\n      /** Called with the value chosen. */\n      onValueChange: (value: string) => void;\n    });\n\n/** A filter's button and its menu of options — checkboxes (several values) or radios (one) — with a count of chosen ones. */\nexport function FilterMenu(props: FilterMenuProps) {\n  const { label, options, defaultOpen, className } = props;\n  const s = filterBar();\n  const m = menu();\n  const chosen = props.multiple === false ? (props.value ? [props.value] : []) : props.value;\n  const single = props.multiple === false ? options.find((o) => o.value === props.value) : undefined;\n  const content = (option: FilterOption) => (\n    <>\n      {option.label}\n      {option.count !== undefined ? <span className={s.optionCount()}>{option.count}</span> : null}\n    </>\n  );\n  return (\n    <DropdownMenu.Root defaultOpen={defaultOpen} modal={false}>\n      <DropdownMenu.Trigger className={s.trigger({ className })} data-active={chosen.length > 0 ? \"\" : undefined}>\n        {single ? `${label}: ${single.label}` : label}\n        {props.multiple !== false && chosen.length > 0 ? <span className={s.count()}>{chosen.length}</span> : null}\n        <ChevronGlyph className=\"h-4 w-4\" />\n      </DropdownMenu.Trigger>\n      <DropdownMenu.Content align=\"start\" aria-label={label}>\n        {props.multiple === false ? (\n          <MenuPrimitive.RadioGroup value={props.value} onValueChange={props.onValueChange}>\n            {options.map((option) => (\n              <MenuPrimitive.RadioItem key={option.value} value={option.value} disabled={option.disabled} className={m.item()}>\n                <span className=\"flex h-4 w-4 shrink-0 items-center justify-center rounded-full border border-border-strong\">\n                  <MenuPrimitive.ItemIndicator className=\"h-2 w-2 rounded-full bg-accent\" />\n                </span>\n                {content(option)}\n              </MenuPrimitive.RadioItem>\n            ))}\n          </MenuPrimitive.RadioGroup>\n        ) : (\n          options.map((option) => (\n            <DropdownMenu.CheckboxItem\n              key={option.value}\n              disabled={option.disabled}\n              checked={props.value.includes(option.value)}\n              onSelect={(event) => event.preventDefault()}\n              onCheckedChange={(checked) =>\n                props.onValueChange(checked ? [...props.value, option.value] : props.value.filter((v) => v !== option.value))\n              }\n            >\n              {content(option)}\n            </DropdownMenu.CheckboxItem>\n          ))\n        )}\n      </DropdownMenu.Content>\n    </DropdownMenu.Root>\n  );\n}\n\n/** Filters read from an address: `{ status: [\"failed\", \"running\"], q: [\"cat\"] }` for the keys asked (repeated or comma-separated values). */\nexport function readFilterParams(params: URLSearchParams, keys: readonly string[]): Record<string, string[]> {\n  return Object.fromEntries(\n    keys.map((key) => [key, params.getAll(key).flatMap((v) => v.split(\",\")).map((v) => v.trim()).filter(Boolean)]),\n  );\n}\n\n/** Filters written into an address (a copy of `base`): empty filters removed, several values comma-separated, the page reset. */\nexport function writeFilterParams(base: URLSearchParams, filters: Record<string, string | readonly string[] | null | undefined>, resetKey = \"page\") {\n  const next = new URLSearchParams(base);\n  for (const [key, value] of Object.entries(filters)) {\n    const list = value == null ? [] : typeof value === \"string\" ? [value] : [...value];\n    if (list.filter(Boolean).length === 0) next.delete(key);\n    else next.set(key, list.filter(Boolean).join(\",\"));\n  }\n  if (resetKey) next.delete(resetKey);\n  return next;\n}\n"
+    },
+    {
+      "path": "filter-bar/index.ts",
+      "content": "/** @krizaka/ui/filter-bar — `FilterBar` (controls, active filters as chips, clear all, results), `FilterMenu`, the address helpers, `filterBar` (the slots). Client (\"use client\"). */\nexport {\n  type ActiveFilter,\n  FilterBar,\n  filterBar,\n  type FilterBarProps,\n  FilterMenu,\n  type FilterMenuProps,\n  type FilterOption,\n  readFilterParams,\n  writeFilterParams,\n} from \"./filter-bar\";\n"
+    },
+    {
+      "path": "filter-bar/meta.ts",
+      "content": "import type { ComponentMeta } from \"../meta\";\n\nexport const meta = {\n  title: \"Filter bar\",\n  summary: \"The bar above a list: the controls that narrow it, the filters in force as removable chips, “Clear filters”, and the count of results — the state kept by the app, in the address.\",\n  status: \"beta\",\n  category: \"forms\",\n  platforms: \"web\",\n  whenToUse: [\n    \"Above a table or a grid people narrow with several criteria at once: status, type, owner, period, a query.\",\n    \"When the filters must be visible and undoable one by one, and shared in a link.\",\n  ],\n  whenNotToUse: [\n    { when: \"For one choice among a few views of a list: chips in a single group.\", use: \"chip\" },\n    { when: \"For a search alone: a search field.\", use: \"search-field\" },\n  ],\n  bestPractices: [\n    \"Keep the filters in the address: `readFilterParams` on load, `writeFilterParams` (which resets the page) on change.\",\n    \"Give each active chip the filter's name and value (“Status: Failed”), not the value alone.\",\n    \"Count the results in `results` (“42 jobs”): it is announced when it changes.\",\n    \"Use `FilterMenu` for a list of values (checkboxes, or radios with `multiple={false}`), a `DateRangePicker` for a period.\",\n  ],\n  accessibility: {\n    keyboard: [\n      { keys: \"Enter / Space / Arrow Down\", action: \"Opens a filter's menu.\" },\n      { keys: \"Arrow keys\", action: \"Move between the options of an open menu; Space checks one, the menu stays open.\" },\n      { keys: \"Esc\", action: \"Closes the menu and returns to its button.\" },\n    ],\n    notes: [\n      \"The bar is a `group` named by `label`; each chip's remove button is named by `removeLabel` (“Remove Status: Failed”).\",\n      \"The count of results is a polite live region: a change of filter is heard without moving the focus.\",\n      \"`FilterMenu` is a Radix menu of checkbox (or radio) items: their state is announced as they toggle.\",\n    ],\n  },\n  related: [\"search-field\", \"chip\", \"dropdown-menu\", \"date-picker\", \"data-table\"],\n  web: {\n    imports: [\"FilterBar\", \"FilterMenu\", \"readFilterParams\", \"writeFilterParams\"],\n    examples: [\n      { name: \"jobs\", title: \"Jobs\", description: \"A search, a status menu (several values), a model menu (one value), the chips and the count.\" },\n      { name: \"menu\", title: \"A filter's menu\", description: \"`FilterMenu` open: checkboxes with the count each value would give.\" },\n      { name: \"address\", title: \"In the address\", description: \"The filters read from and written to `URLSearchParams`, the page reset on change.\" },\n    ],\n  },\n} satisfies ComponentMeta;\n"
+    },
+    {
+      "path": "glyphs.tsx",
+      "content": "// The small line glyphs the data and media primitives draw (play, volume, search, chevrons…): decorative, 24-unit\n// box, `currentColor`, sized by the caller's class. Shared by the entries that need them; never exported on its own —\n// a product draws its own icons with @krizaka/icons.\nimport type * as React from \"react\";\n\ntype GlyphProps = { className?: string };\n\nfunction Glyph({ className = \"h-4 w-4\", fill, children }: GlyphProps & { fill?: boolean; children: React.ReactNode }) {\n  return (\n    <svg\n      viewBox=\"0 0 24 24\"\n      className={className}\n      fill={fill ? \"currentColor\" : \"none\"}\n      stroke={fill ? \"none\" : \"currentColor\"}\n      strokeWidth=\"2\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      aria-hidden\n      focusable=\"false\"\n    >\n      {children}\n    </svg>\n  );\n}\n\nexport const PlayGlyph = (p: GlyphProps) => (\n  <Glyph {...p} fill>\n    <path d=\"M8 5.5v13a1 1 0 0 0 1.5.86l10.4-6.5a1 1 0 0 0 0-1.72L9.5 4.64A1 1 0 0 0 8 5.5Z\" />\n  </Glyph>\n);\nexport const PauseGlyph = (p: GlyphProps) => (\n  <Glyph {...p} fill>\n    <rect x=\"6\" y=\"5\" width=\"4\" height=\"14\" rx=\"1\" />\n    <rect x=\"14\" y=\"5\" width=\"4\" height=\"14\" rx=\"1\" />\n  </Glyph>\n);\nexport const VolumeGlyph = ({ muted, ...p }: GlyphProps & { muted?: boolean }) => (\n  <Glyph {...p}>\n    <path d=\"M11 5 6 9H3v6h3l5 4V5Z\" />\n    {muted ? <path d=\"m22 9-6 6m0-6 6 6\" /> : <path d=\"M15.5 8.5a5 5 0 0 1 0 7M18.5 5.5a9 9 0 0 1 0 13\" />}\n  </Glyph>\n);\nexport const FullscreenGlyph = ({ exit, ...p }: GlyphProps & { exit?: boolean }) => (\n  <Glyph {...p}>\n    {exit ? <path d=\"M9 4v5H4m11-5v5h5M9 20v-5H4m11 5v-5h5\" /> : <path d=\"M4 9V4h5m6 0h5v5M4 15v5h5m11-5v5h-5\" />}\n  </Glyph>\n);\nexport const CaptionsGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <rect x=\"3\" y=\"5\" width=\"18\" height=\"14\" rx=\"2\" />\n    <path d=\"M10 10.5a2 2 0 1 0 0 3M17 10.5a2 2 0 1 0 0 3\" />\n  </Glyph>\n);\nexport const PipGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <rect x=\"3\" y=\"5\" width=\"18\" height=\"14\" rx=\"2\" />\n    <rect x=\"12\" y=\"12\" width=\"6\" height=\"4\" rx=\"1\" />\n  </Glyph>\n);\nexport const SearchGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <circle cx=\"11\" cy=\"11\" r=\"7\" />\n    <path d=\"m20 20-3.5-3.5\" />\n  </Glyph>\n);\nexport const CloseGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <path d=\"M18 6 6 18M6 6l12 12\" />\n  </Glyph>\n);\nexport const ChevronGlyph = ({ direction = \"down\", ...p }: GlyphProps & { direction?: \"left\" | \"right\" | \"up\" | \"down\" }) => (\n  <Glyph {...p}>\n    <path d={{ left: \"m15 6-6 6 6 6\", right: \"m9 6 6 6-6 6\", up: \"m6 15 6-6 6 6\", down: \"m6 9 6 6 6-6\" }[direction]} />\n  </Glyph>\n);\nexport const CheckGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <path d=\"M20 6 9 17l-5-5\" />\n  </Glyph>\n);\nexport const PlusGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <path d=\"M12 5v14M5 12h14\" />\n  </Glyph>\n);\nexport const CalendarGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <rect x=\"3\" y=\"5\" width=\"18\" height=\"16\" rx=\"2\" />\n    <path d=\"M3 10h18M8 3v4M16 3v4\" />\n  </Glyph>\n);\nexport const UploadGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <path d=\"M12 16V4m0 0L7 9m5-5 5 5\" />\n    <path d=\"M4 16v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2\" />\n  </Glyph>\n);\nexport const FileGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <path d=\"M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8l-5-5Z\" />\n    <path d=\"M14 3v5h5\" />\n  </Glyph>\n);\nexport const CameraGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <path d=\"M4 8h3l2-3h6l2 3h3a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1Z\" />\n    <circle cx=\"12\" cy=\"13.5\" r=\"3.5\" />\n  </Glyph>\n);\nexport const FlipGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <path d=\"M4 12a8 8 0 0 1 14-5.3M20 12a8 8 0 0 1-14 5.3\" />\n    <path d=\"M18 3v4h-4M6 21v-4h4\" />\n  </Glyph>\n);\nexport const RetryGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <path d=\"M4 12a8 8 0 1 0 2.3-5.7L4 8.5\" />\n    <path d=\"M4 4v4.5h4.5\" />\n  </Glyph>\n);\nexport const SortGlyph = ({ direction, ...p }: GlyphProps & { direction?: \"ascending\" | \"descending\" }) => (\n  <Glyph {...p}>\n    {direction === \"ascending\" ? <path d=\"m7 14 5-5 5 5\" /> : direction === \"descending\" ? <path d=\"m7 10 5 5 5-5\" /> : <path d=\"m8 9 4-4 4 4M8 15l4 4 4-4\" />}\n  </Glyph>\n);\n"
+    },
+    {
+      "path": "meta.ts",
+      "content": "// The documentation of a component, carried by its code: each primitive has a `meta.ts` beside its source\n// (`src/<name>/meta.ts`; a component that exists only in React Native: `src/native/meta/<name>.ts`). Never built into\n// the package: `scripts/build-registry.mjs` reads them into `registry/<name>.json`, which krizaka.com renders as\n// /docs/ui/<name>, and `scripts/registry.test.mjs` fails when one is missing or incomplete.\n//\n// Why a typed module and not JSDoc tags: the fields are lists and links (`related`, `whenNotToUse[].use`, examples),\n// which a type checks and a comment does not; the file is plain data (erasable TypeScript), so Node reads it without a\n// compiler, and an editor completes it.\n\n/** Every documented component: the web primitives (one entry of the package each) and the native-only ones. */\nexport type ComponentName =\n  | \"alert\"\n  | \"audio-player\"\n  | \"avatar\"\n  | \"badge\"\n  | \"button\"\n  | \"card\"\n  | \"checkbox\"\n  | \"chip\"\n  | \"chip-link\"\n  | \"cn\"\n  | \"combobox\"\n  | \"command\"\n  | \"confirm-button\"\n  | \"countdown\"\n  | \"data-table\"\n  | \"date-picker\"\n  | \"dialog\"\n  | \"dropdown-menu\"\n  | \"empty-state\"\n  | \"field\"\n  | \"file-upload\"\n  | \"filter-bar\"\n  | \"glow-card\"\n  | \"image-cropper\"\n  | \"iso\"\n  | \"kbd\"\n  | \"loader\"\n  | \"marquee\"\n  | \"mascots\"\n  | \"media-capture\"\n  | \"meter\"\n  | \"nav-bar\"\n  | \"number-ticker\"\n  | \"page-header\"\n  | \"pagination\"\n  | \"popover\"\n  | \"progress\"\n  | \"radio-group\"\n  | \"search-field\"\n  | \"section-backdrop\"\n  | \"segmented\"\n  | \"separator\"\n  | \"skeleton\"\n  | \"slider\"\n  | \"slot\"\n  | \"spinner\"\n  | \"stat\"\n  | \"stepper\"\n  | \"switch\"\n  | \"tabs\"\n  | \"tag-input\"\n  | \"theme\"\n  | \"toast\"\n  | \"tooltip\"\n  | \"txt\"\n  | \"video-player\"\n  | \"video-trimmer\";\n\n/** Where a component exists: `@krizaka/ui/<name>` (web), `@krizaka/ui/native` (React Native), or both. */\nexport type Platform = \"web\" | \"native\" | \"both\";\n\n/** `stable`: its API only changes in a major. `beta`: it may still change in a minor. */\nexport type Status = \"stable\" | \"beta\";\n\n/** The group of the catalogue. `media`: video, sound, camera, files, cropping. */\nexport type Category = \"actions\" | \"forms\" | \"navigation\" | \"overlays\" | \"feedback\" | \"data-display\" | \"media\" | \"layout\" | \"foundations\";\n\n/**\n * A named example: the file `registry/examples/<component>/<name>.tsx` (web) or\n * `registry/examples/<component>/native/<name>.tsx` (React Native) — at most 40 lines, imported by the stories and\n * shown (live, with its code) by the documentation.\n */\nexport interface Example {\n  /** The file name, kebab-case (`primary`, `icon-button`). */\n  readonly name: string;\n  /** A short title (`Primary`, `Icon button`). */\n  readonly title: string;\n  /** One or two sentences: when this variant is the right one. */\n  readonly description: string;\n}\n\n/** One platform's side of a component. */\nexport interface PlatformDocs {\n  /** The names to import (`[\"Button\", \"IconButton\"]`): from `@krizaka/ui/<name>` on the web, `@krizaka/ui/native` in React Native. */\n  readonly imports: readonly string[];\n  /** The examples, in reading order; the first one is the component's preview. */\n  readonly examples: readonly Example[];\n}\n\n/** The React Native side: the same concept, and what differs from the web API. */\nexport interface NativeDocs extends PlatformDocs {\n  /**\n   * The entry to import from when it is not `@krizaka/ui/native`: a component that needs an Expo module (an optional\n   * peer) has its own, `@krizaka/ui/native/<name>`, so an app that does not use it never installs the module.\n   */\n  readonly entry?: string;\n  /** What differs from the web API (`label` instead of children…); empty for a native-only component. */\n  readonly differences: readonly string[];\n}\n\nexport interface KeyboardInteraction {\n  /** The keys, as written on a keyboard: `Space`, `Enter`, `Arrow keys`, `Esc`, `Tab`. */\n  readonly keys: string;\n  /** What they do. */\n  readonly action: string;\n}\n\nexport interface ComponentMeta {\n  /** The display name: `Button`, `Dropdown menu`. */\n  readonly title: string;\n  /** One sentence: what it is. */\n  readonly summary: string;\n  readonly status: Status;\n  readonly category: Category;\n  /** Must match the sides below: `both` ⇔ `web` and `native`. */\n  readonly platforms: Platform;\n  /** When to reach for it: concrete situations, one per item. */\n  readonly whenToUse: readonly string[];\n  /** When not to — and what to use instead (`use`), when another component is the answer. */\n  readonly whenNotToUse: readonly { readonly when: string; readonly use?: ComponentName }[];\n  /** How to use it well: wording, placement, composition. */\n  readonly bestPractices: readonly string[];\n  readonly accessibility: {\n    /** The keyboard, when it does more than Tab and Enter. */\n    readonly keyboard: readonly KeyboardInteraction[];\n    /** Roles, names and announcements: what the component does, what the app must provide. */\n    readonly notes: readonly string[];\n  };\n  /** The components a reader of this page should know about. */\n  readonly related: readonly ComponentName[];\n  readonly web?: PlatformDocs;\n  readonly native?: NativeDocs;\n}\n"
+    }
+  ],
+  "dependencies": [
+    "radix-ui@^1.7.0",
+    "tailwind-variants@^3.3.1"
+  ],
+  "registryDependencies": [
+    "chip",
+    "dropdown-menu"
+  ],
+  "demo": {
+    "path": "examples/filter-bar/jobs.tsx",
+    "content": "\"use client\";\n\nimport { FilterBar, FilterMenu } from \"@krizaka/ui/filter-bar\";\nimport { SearchField } from \"@krizaka/ui/search-field\";\nimport * as React from \"react\";\n\nconst STATUS = [\n  { value: \"running\", label: \"Running\", count: 3 },\n  { value: \"done\", label: \"Done\", count: 128 },\n  { value: \"failed\", label: \"Failed\", count: 6 },\n];\nconst MODELS = [\n  { value: \"\", label: \"All models\" },\n  { value: \"flux\", label: \"Flux 1.1\" },\n  { value: \"whisper\", label: \"Whisper large\" },\n];\n\n// Several criteria at once; each one in force is a chip that undoes it.\nexport default function FilterBarJobs() {\n  const [query, setQuery] = React.useState(\"\");\n  const [status, setStatus] = React.useState([\"failed\"]);\n  const [model, setModel] = React.useState(\"flux\");\n  const active = [\n    ...status.map((s) => ({ id: `status:${s}`, label: `Status: ${STATUS.find((o) => o.value === s)?.label}`, onRemove: () => setStatus(status.filter((x) => x !== s)) })),\n    ...(model ? [{ id: \"model\", label: `Model: ${MODELS.find((m) => m.value === model)?.label}`, onRemove: () => setModel(\"\") }] : []),\n  ];\n  return (\n    <FilterBar label=\"Filter jobs\" active={active} onClearAll={() => {\n        setStatus([]);\n        setModel(\"\");\n      }} results=\"6 jobs\">\n      <SearchField label=\"Search jobs\" placeholder=\"Search jobs\" value={query} onValueChange={setQuery} landmark={false} className=\"sm:max-w-64\" />\n      <FilterMenu label=\"Status\" options={STATUS} value={status} onValueChange={setStatus} />\n      <FilterMenu label=\"Model\" multiple={false} options={MODELS} value={model} onValueChange={setModel} />\n    </FilterBar>\n  );\n}\n"
+  },
+  "props": [
+    {
+      "component": "FilterBar",
+      "description": "The bar of filters above a list: controls, active filters as chips, clear all, the count of results.",
+      "props": [
+        {
+          "name": "label",
+          "type": "string",
+          "default": null,
+          "description": "The accessible name of the bar (\"Filter jobs\"), passed translated.",
+          "required": true
+        },
+        {
+          "name": "active",
+          "type": "readonly ActiveFilter[]",
+          "default": "[]",
+          "description": "The filters in force, each a removable chip.",
+          "required": false
+        },
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "default": null,
+          "description": "The controls: `SearchField`, `FilterMenu`, `DateRangePicker`, a `Chip.Group`…",
+          "required": false
+        },
+        {
+          "name": "clearLabel",
+          "type": "string",
+          "default": "Clear filters",
+          "description": "The \"Clear all\" button (\"Clear filters\"), passed translated.",
+          "required": false
+        },
+        {
+          "name": "onClearAll",
+          "type": "(() => void)",
+          "default": null,
+          "description": "Clears every filter; the \"Clear all\" button shows when there is at least one.",
+          "required": false
+        },
+        {
+          "name": "removeLabel",
+          "type": "((label: string) => string)",
+          "default": "(text) => `Remove ${text}`",
+          "description": "A chip's remove button: `(label) => \"Remove \" + label`, passed translated.",
+          "required": false
+        },
+        {
+          "name": "results",
+          "type": "string",
+          "default": null,
+          "description": "The count of results (\"42 jobs\"), announced politely when it changes.",
+          "required": false
+        }
+      ]
+    },
+    {
+      "component": "FilterMenu",
+      "description": "A filter's button and its menu of options — checkboxes (several values) or radios (one) — with a count of chosen ones.",
+      "props": [
+        {
+          "name": "label",
+          "type": "string",
+          "default": null,
+          "description": "The name of the filter on its button (\"Status\"), passed translated.",
+          "required": true
+        },
+        {
+          "name": "onValueChange",
+          "type": "((value: string[]) => void) | ((value: string) => void)",
+          "default": null,
+          "description": "Called with the values chosen.\nCalled with the value chosen.",
+          "required": true
+        },
+        {
+          "name": "options",
+          "type": "readonly FilterOption[]",
+          "default": null,
+          "description": "The choices.",
+          "required": true
+        },
+        {
+          "name": "value",
+          "type": "string | readonly string[]",
+          "default": null,
+          "description": "The values chosen.\nThe value chosen, `\"\"` for none.",
+          "required": true
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "default": null,
+          "description": "Classes merged on the button.",
+          "required": false
+        },
+        {
+          "name": "defaultOpen",
+          "type": "boolean",
+          "default": null,
+          "description": "Opens the menu at first (a story, a test).",
+          "required": false
+        },
+        {
+          "name": "multiple",
+          "type": "boolean",
+          "default": null,
+          "description": "Several values (checkboxes, default) or one (radios).\nOne value: the options are radios.",
+          "required": false
+        }
+      ]
+    }
+  ]
+}

package/registry/glow-card.json

@@ -0,0 +1,162 @@
+{
+  "name": "glow-card",
+  "type": "primitive",
+  "title": "Glow card",
+  "summary": "A card lit by the brand: a bloom of the accent follows the pointer across it, and its border is a ring of the brand gradient that turns and brightens under the pointer or the focus.",
+  "description": "A card lit by the brand: a bloom of the accent follows the pointer across it, and its border is a ring of the brand gradient that turns and brightens under the pointer or the focus.",
+  "status": "beta",
+  "category": "layout",
+  "platforms": "web",
+  "whenToUse": [
+    "Cards that invite a choice: plans, products, the entry points of a landing page.",
+    "One featured card among others (`alive`): its ring turns at rest."
+  ],
+  "whenNotToUse": [
+    {
+      "when": "For the cards of an app's lists and feeds: a calm card reads better there.",
+      "use": "card"
+    },
+    {
+      "when": "Around content the reader studies (a form, a table): light that moves distracts."
+    }
+  ],
+  "bestPractices": [
+    "One grid of glowing cards per page; `alive` on one card at most.",
+    "Make the whole card the link with `asChild` when it leads somewhere — the focus lights it like the pointer.",
+    "Colours come from the brand (`.brand-<id>`): never pass one."
+  ],
+  "accessibility": {
+    "keyboard": [
+      {
+        "keys": "Tab",
+        "action": "Focusing the card (or a control inside it) lights its ring, as the pointer does."
+      }
+    ],
+    "notes": [
+      "Decorative light only (pseudo-elements): nothing is added to the accessibility tree; the card's semantics are yours.",
+      "Under `prefers-reduced-motion` the ring rests at a fixed angle — still lit on hover and focus, never turning.",
+      "Its loops pause off screen and while the page settles (MotionObserver)."
+    ]
+  },
+  "related": [
+    "card",
+    "button"
+  ],
+  "web": {
+    "entry": "@krizaka/ui/glow-card",
+    "import": "import { GlowCard } from \"@krizaka/ui/glow-card\";",
+    "props": [
+      {
+        "component": "GlowCard",
+        "description": "A card lit by the brand: a bloom that follows the pointer, a gradient ring that turns. Content is yours.",
+        "props": [
+          {
+            "name": "alive",
+            "type": "boolean",
+            "default": "false",
+            "description": "The ring turns slowly even at rest (a featured card). Otherwise it rests until hovered or focused.",
+            "required": false
+          },
+          {
+            "name": "asChild",
+            "type": "boolean",
+            "default": null,
+            "description": "Renders your element (a link, an article) with the card's look and behaviour.",
+            "required": false
+          },
+          {
+            "name": "glow",
+            "type": "\"both\" | \"border\" | \"spotlight\"",
+            "default": "both",
+            "description": "What answers: `border` (the turning gradient ring), `spotlight` (the bloom under the pointer), or `both`.",
+            "required": false
+          }
+        ]
+      }
+    ],
+    "examples": [
+      {
+        "name": "plans",
+        "title": "Plans",
+        "description": "Three plans: the light follows the pointer across them; the featured one's ring turns at rest.",
+        "path": "examples/glow-card/plans.tsx",
+        "module": "@krizaka/ui/registry/examples/glow-card/plans",
+        "code": "import { Button } from \"@krizaka/ui/button\";\nimport { GlowCard } from \"@krizaka/ui/glow-card\";\n\nconst plans = [\n  { name: \"Community\", price: \"Free\", line: \"Self-hosted, every feature.\" },\n  { name: \"Team\", price: \"€19\", line: \"Shared workspaces and roles.\", featured: true },\n  { name: \"Sovereign\", price: \"Custom\", line: \"Your servers, our support.\" },\n];\n\n// Plans: move the pointer across them — the light follows, the ring brightens. The featured plan's ring turns at rest.\nexport default function GlowCardPlans() {\n  return (\n    <div className=\"grid w-full max-w-3xl gap-4 sm:grid-cols-3\">\n      {plans.map((p) => (\n        <GlowCard key={p.name} alive={p.featured} className=\"flex flex-col gap-3\">\n          <h3 className=\"font-display text-lg font-semibold text-fg\">{p.name}</h3>\n          <p className=\"font-display text-3xl font-bold text-fg\">{p.price}</p>\n          <p className=\"text-sm text-fg-secondary\">{p.line}</p>\n          <Button variant={p.featured ? \"gradient\" : \"outline\"} size=\"sm\" className=\"mt-auto\">\n            Choose {p.name}\n          </Button>\n        </GlowCard>\n      ))}\n    </div>\n  );\n}\n"
+      },
+      {
+        "name": "link-card",
+        "title": "A card that is a link",
+        "description": "`asChild` on an `<a>`, `glow=\"border\"`: the focus lights the ring.",
+        "path": "examples/glow-card/link-card.tsx",
+        "module": "@krizaka/ui/registry/examples/glow-card/link-card",
+        "code": "import { GlowCard } from \"@krizaka/ui/glow-card\";\n\n// `asChild`: the card is the link. The focus lights the ring as the pointer does — keyboard readers get the same answer.\nexport default function GlowCardLink() {\n  return (\n    <GlowCard asChild glow=\"border\" className=\"block max-w-sm no-underline focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring\">\n      <a href=\"#docs\">\n        <span className=\"block font-display text-lg font-semibold text-fg\">Read the documentation</span>\n        <span className=\"mt-1 block text-sm text-fg-secondary\">Every component, its examples and its props — generated from the code.</span>\n      </a>\n    </GlowCard>\n  );\n}\n"
+      },
+      {
+        "name": "spotlight",
+        "title": "Spotlight only",
+        "description": "`glow=\"spotlight\"`: the bloom alone, for a dense grid.",
+        "path": "examples/glow-card/spotlight.tsx",
+        "module": "@krizaka/ui/registry/examples/glow-card/spotlight",
+        "code": "import { GlowCard } from \"@krizaka/ui/glow-card\";\n\n// `glow=\"spotlight\"`: only the bloom under the pointer, for a dense grid where rings would be too much.\nexport default function GlowCardSpotlight() {\n  return (\n    <div className=\"grid w-full max-w-lg grid-cols-2 gap-3\">\n      {[\"Tips\", \"Unlocks\", \"Auctions\", \"Challenges\"].map((name) => (\n        <GlowCard key={name} glow=\"spotlight\" className=\"p-4\">\n          <p className=\"font-semibold text-fg\">{name}</p>\n          <p className=\"text-xs text-fg-secondary\">90 % to the creator</p>\n        </GlowCard>\n      ))}\n    </div>\n  );\n}\n"
+      }
+    ]
+  },
+  "native": null,
+  "files": [
+    {
+      "path": "glow-card/glow-card.tsx",
+      "content": "// Client (the pointer). A card that answers light: a soft bloom of the brand accent follows the pointer across it, and\n// its border is a ring of the brand gradient that turns slowly and brightens under the pointer or the focus. Composited\n// properties only (CSS variables, opacity); no animation frame — the pointer writes two variables. Under reduced motion\n// the ring rests at a fixed angle and the light stays where it is: a designed still frame, not a switched-off one.\nimport { Slot } from \"radix-ui\";\nimport * as React from \"react\";\n\nimport { cn } from \"../cn\";\n\nexport type GlowCardProps = React.ComponentProps<\"div\"> & {\n  /**\n   * What answers: `border` (the turning gradient ring), `spotlight` (the bloom under the pointer), or `both`.\n   * @default \"both\"\n   */\n  glow?: \"border\" | \"spotlight\" | \"both\";\n  /** Renders your element (a link, an article) with the card's look and behaviour. */\n  asChild?: boolean;\n  /**\n   * The ring turns slowly even at rest (a featured card). Otherwise it rests until hovered or focused.\n   * @default false\n   */\n  alive?: boolean;\n};\n\n/** A card lit by the brand: a bloom that follows the pointer, a gradient ring that turns. Content is yours. */\nexport function GlowCard({ glow = \"both\", asChild, alive, className, onPointerMove, ...props }: GlowCardProps) {\n  const Comp = asChild ? Slot.Root : \"div\";\n  return (\n    <Comp\n      data-glow={glow}\n      data-alive={alive ? \"\" : undefined}\n      className={cn(\"kz-glow kz-loop relative isolate rounded-2xl border border-border-default bg-surface-1 p-6\", className)}\n      onPointerMove={(e: React.PointerEvent<HTMLDivElement>) => {\n        const box = e.currentTarget.getBoundingClientRect();\n        e.currentTarget.style.setProperty(\"--kz-glow-x\", `${e.clientX - box.left}px`);\n        e.currentTarget.style.setProperty(\"--kz-glow-y\", `${e.clientY - box.top}px`);\n        onPointerMove?.(e);\n      }}\n      {...props}\n    />\n  );\n}\n"
+    },
+    {
+      "path": "glow-card/index.ts",
+      "content": "/** @krizaka/ui/glow-card — `GlowCard`: a bloom of the brand light under the pointer, a turning gradient ring. Client. */\nexport { GlowCard, type GlowCardProps } from \"./glow-card\";\n"
+    },
+    {
+      "path": "glow-card/meta.ts",
+      "content": "import type { ComponentMeta } from \"../meta\";\n\nexport const meta = {\n  title: \"Glow card\",\n  summary:\n    \"A card lit by the brand: a bloom of the accent follows the pointer across it, and its border is a ring of the brand gradient that turns and brightens under the pointer or the focus.\",\n  status: \"beta\",\n  category: \"layout\",\n  platforms: \"web\",\n  whenToUse: [\n    \"Cards that invite a choice: plans, products, the entry points of a landing page.\",\n    \"One featured card among others (`alive`): its ring turns at rest.\",\n  ],\n  whenNotToUse: [\n    { when: \"For the cards of an app's lists and feeds: a calm card reads better there.\", use: \"card\" },\n    { when: \"Around content the reader studies (a form, a table): light that moves distracts.\" },\n  ],\n  bestPractices: [\n    \"One grid of glowing cards per page; `alive` on one card at most.\",\n    \"Make the whole card the link with `asChild` when it leads somewhere — the focus lights it like the pointer.\",\n    \"Colours come from the brand (`.brand-<id>`): never pass one.\",\n  ],\n  accessibility: {\n    keyboard: [{ keys: \"Tab\", action: \"Focusing the card (or a control inside it) lights its ring, as the pointer does.\" }],\n    notes: [\n      \"Decorative light only (pseudo-elements): nothing is added to the accessibility tree; the card's semantics are yours.\",\n      \"Under `prefers-reduced-motion` the ring rests at a fixed angle — still lit on hover and focus, never turning.\",\n      \"Its loops pause off screen and while the page settles (MotionObserver).\",\n    ],\n  },\n  related: [\"card\", \"button\"],\n  web: {\n    imports: [\"GlowCard\"],\n    examples: [\n      { name: \"plans\", title: \"Plans\", description: \"Three plans: the light follows the pointer across them; the featured one's ring turns at rest.\" },\n      { name: \"link-card\", title: \"A card that is a link\", description: \"`asChild` on an `<a>`, `glow=\\\"border\\\"`: the focus lights the ring.\" },\n      { name: \"spotlight\", title: \"Spotlight only\", description: \"`glow=\\\"spotlight\\\"`: the bloom alone, for a dense grid.\" },\n    ],\n  },\n} satisfies ComponentMeta;\n"
+    },
+    {
+      "path": "meta.ts",
+      "content": "// The documentation of a component, carried by its code: each primitive has a `meta.ts` beside its source\n// (`src/<name>/meta.ts`; a component that exists only in React Native: `src/native/meta/<name>.ts`). Never built into\n// the package: `scripts/build-registry.mjs` reads them into `registry/<name>.json`, which krizaka.com renders as\n// /docs/ui/<name>, and `scripts/registry.test.mjs` fails when one is missing or incomplete.\n//\n// Why a typed module and not JSDoc tags: the fields are lists and links (`related`, `whenNotToUse[].use`, examples),\n// which a type checks and a comment does not; the file is plain data (erasable TypeScript), so Node reads it without a\n// compiler, and an editor completes it.\n\n/** Every documented component: the web primitives (one entry of the package each) and the native-only ones. */\nexport type ComponentName =\n  | \"alert\"\n  | \"audio-player\"\n  | \"avatar\"\n  | \"badge\"\n  | \"button\"\n  | \"card\"\n  | \"checkbox\"\n  | \"chip\"\n  | \"chip-link\"\n  | \"cn\"\n  | \"combobox\"\n  | \"command\"\n  | \"confirm-button\"\n  | \"countdown\"\n  | \"data-table\"\n  | \"date-picker\"\n  | \"dialog\"\n  | \"dropdown-menu\"\n  | \"empty-state\"\n  | \"field\"\n  | \"file-upload\"\n  | \"filter-bar\"\n  | \"glow-card\"\n  | \"image-cropper\"\n  | \"iso\"\n  | \"kbd\"\n  | \"loader\"\n  | \"marquee\"\n  | \"mascots\"\n  | \"media-capture\"\n  | \"meter\"\n  | \"nav-bar\"\n  | \"number-ticker\"\n  | \"page-header\"\n  | \"pagination\"\n  | \"popover\"\n  | \"progress\"\n  | \"radio-group\"\n  | \"search-field\"\n  | \"section-backdrop\"\n  | \"segmented\"\n  | \"separator\"\n  | \"skeleton\"\n  | \"slider\"\n  | \"slot\"\n  | \"spinner\"\n  | \"stat\"\n  | \"stepper\"\n  | \"switch\"\n  | \"tabs\"\n  | \"tag-input\"\n  | \"theme\"\n  | \"toast\"\n  | \"tooltip\"\n  | \"txt\"\n  | \"video-player\"\n  | \"video-trimmer\";\n\n/** Where a component exists: `@krizaka/ui/<name>` (web), `@krizaka/ui/native` (React Native), or both. */\nexport type Platform = \"web\" | \"native\" | \"both\";\n\n/** `stable`: its API only changes in a major. `beta`: it may still change in a minor. */\nexport type Status = \"stable\" | \"beta\";\n\n/** The group of the catalogue. `media`: video, sound, camera, files, cropping. */\nexport type Category = \"actions\" | \"forms\" | \"navigation\" | \"overlays\" | \"feedback\" | \"data-display\" | \"media\" | \"layout\" | \"foundations\";\n\n/**\n * A named example: the file `registry/examples/<component>/<name>.tsx` (web) or\n * `registry/examples/<component>/native/<name>.tsx` (React Native) — at most 40 lines, imported by the stories and\n * shown (live, with its code) by the documentation.\n */\nexport interface Example {\n  /** The file name, kebab-case (`primary`, `icon-button`). */\n  readonly name: string;\n  /** A short title (`Primary`, `Icon button`). */\n  readonly title: string;\n  /** One or two sentences: when this variant is the right one. */\n  readonly description: string;\n}\n\n/** One platform's side of a component. */\nexport interface PlatformDocs {\n  /** The names to import (`[\"Button\", \"IconButton\"]`): from `@krizaka/ui/<name>` on the web, `@krizaka/ui/native` in React Native. */\n  readonly imports: readonly string[];\n  /** The examples, in reading order; the first one is the component's preview. */\n  readonly examples: readonly Example[];\n}\n\n/** The React Native side: the same concept, and what differs from the web API. */\nexport interface NativeDocs extends PlatformDocs {\n  /**\n   * The entry to import from when it is not `@krizaka/ui/native`: a component that needs an Expo module (an optional\n   * peer) has its own, `@krizaka/ui/native/<name>`, so an app that does not use it never installs the module.\n   */\n  readonly entry?: string;\n  /** What differs from the web API (`label` instead of children…); empty for a native-only component. */\n  readonly differences: readonly string[];\n}\n\nexport interface KeyboardInteraction {\n  /** The keys, as written on a keyboard: `Space`, `Enter`, `Arrow keys`, `Esc`, `Tab`. */\n  readonly keys: string;\n  /** What they do. */\n  readonly action: string;\n}\n\nexport interface ComponentMeta {\n  /** The display name: `Button`, `Dropdown menu`. */\n  readonly title: string;\n  /** One sentence: what it is. */\n  readonly summary: string;\n  readonly status: Status;\n  readonly category: Category;\n  /** Must match the sides below: `both` ⇔ `web` and `native`. */\n  readonly platforms: Platform;\n  /** When to reach for it: concrete situations, one per item. */\n  readonly whenToUse: readonly string[];\n  /** When not to — and what to use instead (`use`), when another component is the answer. */\n  readonly whenNotToUse: readonly { readonly when: string; readonly use?: ComponentName }[];\n  /** How to use it well: wording, placement, composition. */\n  readonly bestPractices: readonly string[];\n  readonly accessibility: {\n    /** The keyboard, when it does more than Tab and Enter. */\n    readonly keyboard: readonly KeyboardInteraction[];\n    /** Roles, names and announcements: what the component does, what the app must provide. */\n    readonly notes: readonly string[];\n  };\n  /** The components a reader of this page should know about. */\n  readonly related: readonly ComponentName[];\n  readonly web?: PlatformDocs;\n  readonly native?: NativeDocs;\n}\n"
+    }
+  ],
+  "dependencies": [
+    "radix-ui@^1.7.0"
+  ],
+  "registryDependencies": [
+    "cn"
+  ],
+  "demo": {
+    "path": "examples/glow-card/plans.tsx",
+    "content": "import { Button } from \"@krizaka/ui/button\";\nimport { GlowCard } from \"@krizaka/ui/glow-card\";\n\nconst plans = [\n  { name: \"Community\", price: \"Free\", line: \"Self-hosted, every feature.\" },\n  { name: \"Team\", price: \"€19\", line: \"Shared workspaces and roles.\", featured: true },\n  { name: \"Sovereign\", price: \"Custom\", line: \"Your servers, our support.\" },\n];\n\n// Plans: move the pointer across them — the light follows, the ring brightens. The featured plan's ring turns at rest.\nexport default function GlowCardPlans() {\n  return (\n    <div className=\"grid w-full max-w-3xl gap-4 sm:grid-cols-3\">\n      {plans.map((p) => (\n        <GlowCard key={p.name} alive={p.featured} className=\"flex flex-col gap-3\">\n          <h3 className=\"font-display text-lg font-semibold text-fg\">{p.name}</h3>\n          <p className=\"font-display text-3xl font-bold text-fg\">{p.price}</p>\n          <p className=\"text-sm text-fg-secondary\">{p.line}</p>\n          <Button variant={p.featured ? \"gradient\" : \"outline\"} size=\"sm\" className=\"mt-auto\">\n            Choose {p.name}\n          </Button>\n        </GlowCard>\n      ))}\n    </div>\n  );\n}\n"
+  },
+  "props": [
+    {
+      "component": "GlowCard",
+      "description": "A card lit by the brand: a bloom that follows the pointer, a gradient ring that turns. Content is yours.",
+      "props": [
+        {
+          "name": "alive",
+          "type": "boolean",
+          "default": "false",
+          "description": "The ring turns slowly even at rest (a featured card). Otherwise it rests until hovered or focused.",
+          "required": false
+        },
+        {
+          "name": "asChild",
+          "type": "boolean",
+          "default": null,
+          "description": "Renders your element (a link, an article) with the card's look and behaviour.",
+          "required": false
+        },
+        {
+          "name": "glow",
+          "type": "\"both\" | \"border\" | \"spotlight\"",
+          "default": "both",
+          "description": "What answers: `border` (the turning gradient ring), `spotlight` (the bloom under the pointer), or `both`.",
+          "required": false
+        }
+      ]
+    }
+  ]
+}