@bettercms-ai/kit 0.1.1 → 1.0.0

package/ui/select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"select.js","names":[],"sources":["../../src/kit/ui/select.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Select as SelectPrimitive } from \"@base-ui/react/select\";\nimport { Combobox as ComboboxPrimitive } from \"@base-ui/react/combobox\";\nimport type { BaseUIEvent } from \"@base-ui/react/types\";\nimport { IconCheck, IconChevronDown, IconSearch } from \"@tabler/icons-react\";\nimport { cn } from \"../lib/cn\";\nimport { useFieldId, useFieldLabelledBy, useLabelFor } from \"./field-context\";\nimport { Avatar } from \"./display\";\nimport { GLASS, KIT_SCOPE } from \"./surfaces\";\n\n/* ── Select ─────────────────────────────────────────────────────────────────\n   D34 — one Select for every dropdown. Up to SEARCH_THRESHOLD options it is a plain Base UI Select; past that (or\n   with `searchable`) the same trigger opens a Base UI Combobox: sticky search at the top, type-to-filter with\n   fuzzy-ish matching and highlighted matches, ↑↓ / Enter / Esc, typing on the closed trigger starts a search,\n   groups, avatars / icons, secondary text, \"No matches\". Call sites don't change — long lists just get search. */\n\nexport const SEARCH_THRESHOLD = 7;\n\nexport type SelectOption = {\n  value: string;\n  label: React.ReactNode;\n  /** leading visual (16px icon); ignored when `avatar` is set */\n  icon?: React.ReactNode;\n  /** a person: renders a 20px avatar before the label */\n  avatar?: { name: string; src?: string };\n  /** secondary line under the label (e.g. an email) — searchable */\n  description?: string;\n  /** muted right-aligned text (e.g. \"UTC+1\", a count) — searchable */\n  meta?: string;\n  /** extra words that should match (aliases, ids) */\n  keywords?: string[];\n  /** group heading; options with the same group render together, in first-seen order */\n  group?: string;\n  disabled?: boolean;\n};\n\n/* ── Matching (exported so custom pickers can share it) ─────────────────── */\n\n/** Plain text of a React node — lets `label` stay a ReactNode while still being searchable. */\nexport function nodeText(node: React.ReactNode): string {\n  if (node == null || typeof node === \"boolean\") return \"\";\n  if (typeof node === \"string\" || typeof node === \"number\") return String(node);\n  if (Array.isArray(node)) return node.map(nodeText).join(\"\");\n  if (React.isValidElement<{ children?: React.ReactNode }>(node)) return nodeText(node.props.children);\n  return \"\";\n}\n\nconst SEP = /[\\s\\-_/.(@+]/;\nconst norm = (s: string) => s.normalize(\"NFD\").replace(/[̀-ͯ]/g, \"\").toLowerCase();\n\n/**\n * Score how well `query` matches `text` (0 = no match). Every whitespace-separated term must match.\n * Prefix > word start > substring > in-order characters (\"nyk\" → \"New York\").\n */\nexport function matchScore(text: string, query: string, { fuzzy = true }: { fuzzy?: boolean } = {}): number {\n  const t = norm(text);\n  const terms = norm(query).trim().split(/\\s+/).filter(Boolean);\n  if (!terms.length) return 1;\n  let score = 0;\n  for (const term of terms) {\n    const at = t.indexOf(term);\n    if (at === 0) score += 4;\n    else if (at > 0) score += SEP.test(t[at - 1]) ? 3 : 2;\n    else if (fuzzy && fuzzyPositions(t, term)) score += 1;\n    else return 0;\n  }\n  return score;\n}\n\n/** In-order characters of `term` in `t`, tight enough to be intended (\"nyk\" → New York, not across a paragraph). */\nfunction fuzzyPositions(t: string, term: string): number[] | null {\n  if (term.length < 2) return null;\n  // start at a word boundary (\"nyk\" → New York, not \"krasnoyarsk\"); try each so a tighter run wins\n  for (let start = t.indexOf(term[0]); start >= 0; start = t.indexOf(term[0], start + 1)) {\n    if (start > 0 && !SEP.test(t[start - 1])) continue;\n    const out = [start];\n    let i = start + 1;\n    for (const ch of term.slice(1)) {\n      i = t.indexOf(ch, i);\n      if (i < 0) break;\n      out.push(i++);\n    }\n    if (out.length === term.length && out[out.length - 1] - start + 1 <= term.length * 3) return out;\n  }\n  return null;\n}\n\n/** Character indexes of `text` to emphasise for `query` (substring per term, else in-order characters). */\nexport function matchPositions(text: string, query: string): Set<number> {\n  const t = norm(text);\n  const hits = new Set<number>();\n  for (const term of norm(query).trim().split(/\\s+/).filter(Boolean)) {\n    const at = t.indexOf(term);\n    if (at >= 0) for (let k = 0; k < term.length; k++) hits.add(at + k);\n    else fuzzyPositions(t, term)?.forEach((k) => hits.add(k));\n  }\n  return hits;\n}\n\n/** Renders `text` with the characters that match `query` emphasised. */\nexport function Highlight({ text, query }: { text: string; query: string }) {\n  if (!query.trim()) return <>{text}</>;\n  // NFD normalisation can change length for accented text; only highlight when indexes line up.\n  if (norm(text).length !== text.length) return <>{text}</>;\n  const hits = matchPositions(text, query);\n  if (!hits.size) return <>{text}</>;\n  const parts: React.ReactNode[] = [];\n  let run = \"\";\n  let on = false;\n  const flush = (k: number) => {\n    if (!run) return;\n    parts.push(on ? <mark key={k} className=\"rounded-[2px] bg-transparent font-semibold text-kit-fg\">{run}</mark> : run);\n    run = \"\";\n  };\n  for (let k = 0; k < text.length; k++) {\n    const h = hits.has(k);\n    if (h !== on) {\n      flush(k);\n      on = h;\n    }\n    run += text[k];\n  }\n  flush(text.length);\n  return <>{parts}</>;\n}\n\n/** Filter + rank options for `query` (stable within equal scores). */\nexport function filterOptions<T extends SelectOption>(options: T[], query: string): T[] {\n  if (!query.trim()) return options;\n  return options\n    .map((o, i) => {\n      const label = nodeText(o.label);\n      const main = matchScore(label, query);\n      // secondary text (email, region, aliases) matches on whole substrings only — fuzzy there is noise\n      const rest = matchScore([label, o.description, o.meta, ...(o.keywords ?? [])].filter(Boolean).join(\" \"), query, { fuzzy: false });\n      // a hit in the label outranks a hit only in secondary text\n      // an alias typed exactly (\"IST\", \"PT\", a tag) is as good as a label prefix\n      const exact = o.keywords?.some((k) => norm(k) === norm(query.trim())) ? 9 : 0;\n      return { o, i, s: Math.max(main ? main * 2 + 1 : rest, exact), len: label.length };\n    })\n    .filter((x) => x.s > 0)\n    .sort((a, b) => b.s - a.s || a.len - b.len || a.i - b.i)\n    .map((x) => x.o);\n}\n\nfunction grouped<T extends SelectOption>(options: T[]): { group?: string; items: T[] }[] {\n  if (!options.some((o) => o.group)) return [{ items: options }];\n  const out: { group?: string; items: T[] }[] = [];\n  for (const o of options) {\n    const g = out.find((x) => x.group === o.group);\n    if (g) g.items.push(o);\n    else out.push({ group: o.group, items: [o] });\n  }\n  return out;\n}\n\n/* ── Shared look ────────────────────────────────────────────────────────── */\n\nfunction triggerClass(variant: \"filled\" | \"outline\" | \"ghost\", size: \"sm\" | \"md\" | \"lg\") {\n  const h = size === \"sm\" ? \"h-7 text-kit-sm\" : size === \"lg\" ? \"h-9 text-kit-base\" : \"h-8 text-kit-sm\";\n  return cn(\n    \"group inline-flex w-full min-w-0 items-center justify-between gap-2 rounded-kit-md border px-2.5 text-left text-kit-fg transition-colors data-[placeholder]:text-kit-fg-3 disabled:cursor-not-allowed disabled:opacity-60 data-[disabled]:cursor-not-allowed data-[disabled]:opacity-60\",\n    variant === \"filled\" && \"border-kit-field-border bg-kit-field-bg shadow-kit-field hover:border-kit-field-border-hover\",\n    variant === \"outline\" && \"border-kit-line bg-kit-field-bg shadow-kit-xs hover:border-kit-line-strong\",\n    variant === \"ghost\" && \"w-auto border-transparent bg-transparent px-2 text-kit-fg-2 hover:bg-kit-hover hover:text-kit-fg\",\n    h,\n  );\n}\n\n/** The Select trigger look, for controls that open their own picker but must read as a Select (D57: one look per job). */\nexport const selectTriggerClass = triggerClass;\n\n/* V2's .glass floating surface; the portalled positioner carries its own kit scope so the --kit-* values resolve. */\nconst floatingClass = cn(\"rounded-kit-lg border text-kit-fg outline-none data-[open]:animate-kit-pop-in\", GLASS);\n\nconst itemClass =\n  \"relative flex cursor-pointer select-none items-center gap-2 rounded-kit-md py-1.5 pl-2 pr-8 text-kit-sm text-kit-fg outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-40 data-[highlighted]:bg-kit-hover [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-kit-fg-2\";\n\nconst groupHeading = \"px-2 pb-1 pt-2 text-kit-xs font-medium text-kit-fg-3\";\n\nfunction Lead({ o }: { o: SelectOption }) {\n  if (o.avatar) return <Avatar name={o.avatar.name} src={o.avatar.src} size={20} decorative />;\n  return o.icon ? <>{o.icon}</> : null;\n}\n\n/* ── Select ─────────────────────────────────────────────────────────────── */\n\nexport interface SelectProps {\n  id?: string;\n  \"aria-label\"?: string;\n  value?: string;\n  /** uncontrolled starting value (leave `value` undefined) */\n  defaultValue?: string;\n  onValueChange?: (v: string) => void;\n  options: SelectOption[];\n  placeholder?: string;\n  size?: \"sm\" | \"md\" | \"lg\";\n  className?: string;\n  triggerClassName?: string;\n  variant?: \"filled\" | \"outline\" | \"ghost\";\n  align?: \"start\" | \"center\" | \"end\";\n  disabled?: boolean;\n  /** \"auto\" (default): search appears when there are more than 7 options. */\n  searchable?: boolean | \"auto\";\n  searchPlaceholder?: string;\n  /** popover width for the searchable menu (defaults to the trigger, at least 240px) */\n  menuClassName?: string;\n}\n\nexport function Select(props: SelectProps) {\n  const { searchable = \"auto\", options } = props;\n  const search = searchable === true || (searchable === \"auto\" && options.length > SEARCH_THRESHOLD);\n  return search ? <SearchSelect {...props} /> : <PlainSelect {...props} />;\n}\n\nfunction useTriggerA11y(id: string | undefined, ariaLabel: string | undefined, placeholder: React.ReactNode) {\n  const fieldId = useFieldId();\n  const labelledBy = useFieldLabelledBy();\n  const labelFor = useLabelFor(id ?? fieldId);\n  return {\n    id: id ?? fieldId,\n    \"aria-label\": ariaLabel ?? (fieldId || labelledBy || labelFor ? undefined : typeof placeholder === \"string\" && placeholder !== \"Select…\" ? placeholder : undefined),\n    \"aria-labelledby\": ariaLabel ? undefined : (labelFor ?? (id || fieldId ? undefined : labelledBy)),\n  };\n}\n\n/** Value that is controlled when `value` is passed and internal otherwise. */\nfunction useSelectValue(value: string | undefined, defaultValue: string | undefined, onValueChange?: (v: string) => void) {\n  const [inner, setInner] = React.useState(defaultValue);\n  const controlled = value !== undefined;\n  const current = controlled ? value : inner;\n  const set = (v: string) => {\n    if (!controlled) setInner(v);\n    onValueChange?.(v);\n  };\n  return [current, set] as const;\n}\n\nfunction PlainSelect({\n  value,\n  defaultValue,\n  onValueChange,\n  options,\n  placeholder = \"Select…\",\n  size = \"md\",\n  className,\n  triggerClassName,\n  variant = \"filled\",\n  align = \"start\",\n  disabled,\n  id,\n  \"aria-label\": ariaLabel,\n}: SelectProps) {\n  const a11y = useTriggerA11y(id, ariaLabel, placeholder);\n  const [current, setCurrent] = useSelectValue(value, defaultValue, onValueChange);\n  const [open, setOpen] = React.useState(false);\n  const items = React.useMemo(() => options.map((o) => ({ value: o.value, label: o.label })), [options]);\n  const renderItem = (o: SelectOption) => (\n    <SelectPrimitive.Item key={o.value} value={o.value} disabled={o.disabled} className={itemClass}>\n      <Lead o={o} />\n      <div className=\"min-w-0 flex-1\">\n        <SelectPrimitive.ItemText>{o.label}</SelectPrimitive.ItemText>\n        {o.description ? <div className=\"text-kit-xs text-kit-fg-3\">{o.description}</div> : null}\n      </div>\n      {o.meta ? <span className=\"shrink-0 text-kit-xs tabular-nums text-kit-fg-3\">{o.meta}</span> : null}\n      <SelectPrimitive.ItemIndicator className=\"absolute right-2\">\n        <IconCheck className=\"size-4 !text-kit-fg\" />\n      </SelectPrimitive.ItemIndicator>\n    </SelectPrimitive.Item>\n  );\n  return (\n    <SelectPrimitive.Root<string>\n      items={items}\n      value={current ?? null}\n      onValueChange={(v) => v != null && setCurrent(v)}\n      onOpenChange={setOpen}\n      disabled={disabled}\n    >\n      <SelectPrimitive.Trigger\n        {...a11y}\n        data-state={open ? \"open\" : \"closed\"}\n        className={cn(triggerClass(variant, size), triggerClassName, className)}\n      >\n        <span className=\"flex min-w-0 items-center gap-2 truncate [&_svg]:size-4 [&_svg]:text-kit-fg-3\">\n          <SelectPrimitive.Value placeholder={placeholder} />\n        </span>\n        <SelectPrimitive.Icon>\n          <IconChevronDown className=\"size-3.5 text-kit-fg-3 transition-transform group-data-[popup-open]:rotate-180\" />\n        </SelectPrimitive.Icon>\n      </SelectPrimitive.Trigger>\n      <SelectPrimitive.Portal>\n        <SelectPrimitive.Positioner align={align} sideOffset={6} alignItemWithTrigger={false} className=\"z-[80]\" data-floating-layer=\"\" {...KIT_SCOPE}>\n          <SelectPrimitive.Popup\n            className={cn(floatingClass, \"max-h-[min(360px,var(--available-height))] min-w-[var(--anchor-width)] overflow-y-auto p-1\")}\n          >\n            <SelectPrimitive.List>\n              {grouped(options).map((g, gi) =>\n                g.group ? (\n                  <SelectPrimitive.Group key={g.group + gi}>\n                    <SelectPrimitive.GroupLabel className={groupHeading}>{g.group}</SelectPrimitive.GroupLabel>\n                    {g.items.map(renderItem)}\n                  </SelectPrimitive.Group>\n                ) : (\n                  g.items.map(renderItem)\n                ),\n              )}\n            </SelectPrimitive.List>\n          </SelectPrimitive.Popup>\n        </SelectPrimitive.Positioner>\n      </SelectPrimitive.Portal>\n    </SelectPrimitive.Root>\n  );\n}\n\n/** V2 scrollIntoContainer (block \"nearest\", 4px margin): scroll `el` into view inside `list` ONLY, never the shell behind it.\n *  Rects are transformed while the menu pops in (scaled), so measure in layout pixels. */\nfunction revealInList(list: HTMLElement, el: HTMLElement | null, margin = 4) {\n  if (!el) return;\n  const br = list.getBoundingClientRect();\n  const er = el.getBoundingClientRect();\n  const k = list.offsetHeight ? br.height / list.offsetHeight || 1 : 1;\n  const top = (er.top - br.top) / k + list.scrollTop;\n  const h = er.height / k;\n  let next = list.scrollTop;\n  if (top < list.scrollTop) next = top - margin;\n  else if (top + h > list.scrollTop + list.clientHeight) next = top + h - list.clientHeight + margin;\n  next = Math.max(0, Math.min(next, list.scrollHeight - list.clientHeight));\n  if (Math.abs(next - list.scrollTop) > 0.5) list.scrollTop = next;\n}\n\nfunction SearchSelect({\n  value,\n  defaultValue,\n  onValueChange,\n  options,\n  placeholder = \"Select…\",\n  size = \"md\",\n  className,\n  triggerClassName,\n  variant = \"filled\",\n  align = \"start\",\n  disabled,\n  id,\n  \"aria-label\": ariaLabel,\n  searchPlaceholder = \"Search…\",\n  menuClassName,\n}: SelectProps) {\n  const a11y = useTriggerA11y(id, ariaLabel, placeholder);\n  const [current, setCurrent] = useSelectValue(value, defaultValue, onValueChange);\n  const [open, setOpen] = React.useState(false);\n  const [query, setQuery] = React.useState(\"\");\n  const selected = options.find((o) => o.value === current);\n  const shown = React.useMemo(() => filterOptions(options, query), [options, query]);\n  const shownValues = React.useMemo(() => shown.map((o) => o.value), [shown]);\n  const listRef = React.useRef<HTMLDivElement>(null);\n\n  /* Reveal the current option on open, inside the list only: scrollIntoView would also scroll the app shell behind the\n     menu (V2 S1). The popup sizes itself a frame or two after it opens, so wait until the list is constrained (it\n     scrolls) before revealing (the list portals in, so it may not exist on the first frame either). */\n  React.useEffect(() => {\n    if (!open) return;\n    let raf = 0;\n    const reveal = (tries: number) => {\n      const list = listRef.current;\n      const settled = list && list.scrollHeight > list.clientHeight;\n      if (!settled && tries > 0) return void (raf = requestAnimationFrame(() => reveal(tries - 1)));\n      if (list) revealInList(list, list.querySelector<HTMLElement>('[data-checked=\"true\"]'));\n    };\n    reveal(6);\n    return () => cancelAnimationFrame(raf);\n  }, [open]);\n\n  const openWith = (q: string) => {\n    setQuery(q);\n    setOpen(true);\n  };\n\n  return (\n    <ComboboxPrimitive.Root<string>\n      value={current ?? null}\n      onValueChange={(v) => {\n        if (v == null) return;\n        setCurrent(v);\n        setOpen(false);\n      }}\n      open={open}\n      onOpenChange={(o) => (o ? openWith(\"\") : setOpen(false))}\n      inputValue={query}\n      onInputValueChange={(q, details) => {\n        // only typing filters; Base UI also writes the picked option's value into the input on selection\n        if (details.reason === \"input-change\" || details.reason === \"input-clear\") setQuery(q);\n      }}\n      items={shownValues}\n      filter={null}\n      autoHighlight\n      loopFocus\n      disabled={disabled}\n    >\n      <ComboboxPrimitive.Trigger\n        {...a11y}\n        data-state={open ? \"open\" : \"closed\"}\n        data-placeholder={selected ? undefined : \"\"}\n        className={cn(triggerClass(variant, size), triggerClassName, className)}\n        onKeyDown={(e: BaseUIEvent<React.KeyboardEvent<HTMLButtonElement>>) => {\n          if (e.metaKey || e.ctrlKey || e.altKey) return;\n          if (e.key.length === 1 && e.key !== \" \") {\n            e.preventDefault();\n            e.preventBaseUIHandler();\n            openWith(e.key); // typing on the closed trigger starts a search\n          } else if (e.key === \"ArrowDown\" || e.key === \"ArrowUp\") {\n            e.preventDefault();\n            e.preventBaseUIHandler();\n            openWith(\"\");\n          }\n        }}\n      >\n        <span className=\"flex min-w-0 items-center gap-2 truncate [&_svg]:size-4 [&_svg]:text-kit-fg-3\">\n          {selected ? (\n            <>\n              {selected.avatar ? <Avatar name={selected.avatar.name} src={selected.avatar.src} size={16} decorative /> : null}\n              <span className=\"truncate\">{selected.label}</span>\n            </>\n          ) : (\n            <span className=\"truncate\">{placeholder}</span>\n          )}\n        </span>\n        <IconChevronDown aria-hidden className=\"size-3.5 shrink-0 text-kit-fg-3 transition-transform group-data-[popup-open]:rotate-180\" />\n      </ComboboxPrimitive.Trigger>\n      <ComboboxPrimitive.Portal>\n        <ComboboxPrimitive.Positioner align={align} sideOffset={6} collisionPadding={12} className=\"z-[80]\" data-floating-layer=\"\" {...KIT_SCOPE}>\n          <ComboboxPrimitive.Popup\n            className={cn(\n              floatingClass,\n              \"flex max-h-[min(400px,var(--available-height))] w-[max(var(--anchor-width),240px)] max-w-[min(400px,calc(100vw-24px))] flex-col overflow-hidden\",\n              menuClassName,\n            )}\n          >\n            <div className=\"flex h-9 shrink-0 items-center gap-2 border-b border-kit-line-subtle px-2.5 text-kit-fg-3\">\n              <IconSearch aria-hidden className=\"size-4 shrink-0\" />\n              <ComboboxPrimitive.Input\n                aria-label={typeof a11y[\"aria-label\"] === \"string\" ? a11y[\"aria-label\"] : \"Options\"}\n                placeholder={searchPlaceholder}\n                className=\"h-full min-w-0 flex-1 bg-transparent text-kit-sm text-kit-fg outline-none placeholder:text-kit-fg-4\"\n              />\n            </div>\n            {shown.length === 0 ? <div className=\"px-2 py-6 text-center text-kit-sm text-kit-fg-3\">No matches</div> : null}\n            <ComboboxPrimitive.List ref={listRef} className=\"min-h-0 flex-1 overflow-y-auto overscroll-contain p-1 empty:hidden\">\n              {grouped(shown).map((g, gi) => {\n                const items = g.items.map((o) => {\n                  const text = nodeText(o.label);\n                  const checked = o.value === current;\n                  return (\n                    <ComboboxPrimitive.Item key={o.value} value={o.value} disabled={o.disabled} data-checked={checked} className={itemClass}>\n                      <Lead o={o} />\n                      <div className=\"min-w-0 flex-1\">\n                        <div className=\"truncate\">{typeof o.label === \"string\" ? <Highlight text={text} query={query} /> : o.label}</div>\n                        {o.description ? (\n                          <div className=\"truncate text-kit-xs text-kit-fg-3\">\n                            <Highlight text={o.description} query={query} />\n                          </div>\n                        ) : null}\n                      </div>\n                      {o.meta ? <span className=\"shrink-0 text-kit-xs tabular-nums text-kit-fg-3\">{o.meta}</span> : null}\n                      {checked ? <IconCheck aria-hidden className=\"absolute right-2 size-4 !text-kit-fg\" /> : null}\n                    </ComboboxPrimitive.Item>\n                  );\n                });\n                return g.group ? (\n                  <ComboboxPrimitive.Group key={g.group + gi}>\n                    <ComboboxPrimitive.GroupLabel className={groupHeading}>{g.group}</ComboboxPrimitive.GroupLabel>\n                    {items}\n                  </ComboboxPrimitive.Group>\n                ) : (\n                  <React.Fragment key={\"g\" + gi}>{items}</React.Fragment>\n                );\n              })}\n            </ComboboxPrimitive.List>\n          </ComboboxPrimitive.Popup>\n        </ComboboxPrimitive.Positioner>\n      </ComboboxPrimitive.Portal>\n    </ComboboxPrimitive.Root>\n  );\n}\n"],"mappings":"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"}

package/ui/shortcut-hint.d.ts

@@ -0,0 +1,14 @@
+import * as React from "react";
+export declare function ShortcutHintsProvider({ on, children }: {
+    on?: boolean;
+    children: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function useShortcutHints(): boolean;
+/** Non-hook read for toasts and other imperative call sites. */
+export declare function shortcutHintsOn(): boolean;
+type Props = React.HTMLAttributes<HTMLElement> & {
+    as?: "span" | "div" | "p" | "li" | "fragment";
+    children: React.ReactNode;
+};
+export declare function ShortcutHint({ as, children, ...rest }: Props): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/ui/shortcut-hint.js

@@ -0,0 +1,35 @@
+import * as React from "react";
+import { Fragment, jsx } from "react/jsx-runtime";
+//#region src/kit/ui/shortcut-hint.tsx
+var ShortcutHintsContext = React.createContext(false);
+var current = false;
+function ShortcutHintsProvider({ on = false, children }) {
+	React.useLayoutEffect(() => {
+		current = on;
+		if (typeof document !== "undefined") document.documentElement.dataset.shortcutHints = on ? "on" : "off";
+	}, [on]);
+	return /* @__PURE__ */ jsx(ShortcutHintsContext.Provider, {
+		value: on,
+		children
+	});
+}
+function useShortcutHints() {
+	return React.useContext(ShortcutHintsContext);
+}
+/** Non-hook read for toasts and other imperative call sites. */
+function shortcutHintsOn() {
+	return current;
+}
+function ShortcutHint({ as = "span", children, ...rest }) {
+	if (!useShortcutHints()) return null;
+	if (as === "fragment") return /* @__PURE__ */ jsx(Fragment, { children });
+	return /* @__PURE__ */ jsx(as, {
+		"data-hint": "shortcuts",
+		...rest,
+		children
+	});
+}
+//#endregion
+export { ShortcutHint, ShortcutHintsProvider, shortcutHintsOn, useShortcutHints };
+
+//# sourceMappingURL=shortcut-hint.js.map

package/ui/shortcut-hint.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"shortcut-hint.js","names":[],"sources":["../../src/kit/ui/shortcut-hint.tsx"],"sourcesContent":["import * as React from \"react\";\n\n/* D44: keyboard-shortcut hints are OFF by default (founder: \"genuinely irritating\").\n   Account > Preferences > \"Show keyboard hints\" turns them back on; the host passes that preference to\n   <ShortcutHintsProvider on={...}>.\n   - <ShortcutHint>…</ShortcutHint> renders nothing while off (use it for every new inline hint strip).\n   - `as` keeps the wrapper element when the hint needs one (span by default; `fragment` for none).\n   - For markup you cannot wrap, add data-hint=\"shortcuts\": the provider mirrors the switch on\n     <html data-shortcut-hints=\"on|off\"> and the stylesheet hides it while off.\n   - For strings (toasts, placeholders) use useShortcutHints() / shortcutHintsOn().\n   NOT hints (always shown): menu shortcut columns, the command palette's key labels, the help sheet. */\n\nconst ShortcutHintsContext = React.createContext(false);\nlet current = false;\n\nexport function ShortcutHintsProvider({ on = false, children }: { on?: boolean; children: React.ReactNode }) {\n  React.useLayoutEffect(() => {\n    current = on;\n    if (typeof document !== \"undefined\") document.documentElement.dataset.shortcutHints = on ? \"on\" : \"off\";\n  }, [on]);\n  return <ShortcutHintsContext.Provider value={on}>{children}</ShortcutHintsContext.Provider>;\n}\n\nexport function useShortcutHints() {\n  return React.useContext(ShortcutHintsContext);\n}\n\n/** Non-hook read for toasts and other imperative call sites. */\nexport function shortcutHintsOn() {\n  return current;\n}\n\ntype Props = React.HTMLAttributes<HTMLElement> & { as?: \"span\" | \"div\" | \"p\" | \"li\" | \"fragment\"; children: React.ReactNode };\n\nexport function ShortcutHint({ as = \"span\", children, ...rest }: Props) {\n  const on = useShortcutHints();\n  if (!on) return null;\n  if (as === \"fragment\") return <>{children}</>;\n  const Tag = as as \"span\";\n  return (\n    <Tag data-hint=\"shortcuts\" {...rest}>\n      {children}\n    </Tag>\n  );\n}\n"],"mappings":";;;AAYA,IAAM,uBAAuB,MAAM,cAAc,MAAM;AACvD,IAAI,UAAU;AAEd,SAAgB,sBAAsB,EAAE,KAAK,OAAO,YAAyD;AAC3G,OAAM,sBAAsB;AAC1B,YAAU;AACV,MAAI,OAAO,aAAa,YAAa,UAAS,gBAAgB,QAAQ,gBAAgB,KAAK,OAAO;IACjG,CAAC,GAAG,CAAC;AACR,QAAO,oBAAC,qBAAqB,UAAtB;EAA+B,OAAO;EAAK;EAAyC,CAAA;;AAG7F,SAAgB,mBAAmB;AACjC,QAAO,MAAM,WAAW,qBAAqB;;;AAI/C,SAAgB,kBAAkB;AAChC,QAAO;;AAKT,SAAgB,aAAa,EAAE,KAAK,QAAQ,UAAU,GAAG,QAAe;AAEtE,KAAI,CADO,kBAAkB,CACpB,QAAO;AAChB,KAAI,OAAO,WAAY,QAAO,oBAAA,UAAA,EAAG,UAAY,CAAA;AAE7C,QACE,oBAFU,IAEV;EAAK,aAAU;EAAY,GAAI;EAC5B;EACG,CAAA"}

package/ui/surfaces.d.ts

@@ -0,0 +1,23 @@
+/**
+ * V2's floating-surface recipes (src/styles/index.css .glass, .glass-ink, .bg-tray, --surface-raised, --floating-line),
+ * as class strings. kit.css has no tokens for these yet, so the V2 values are written out here, light and dark
+ * (`[.dark_&]` = the app is dark). Each one is a single constant so the integrator can swap it for a kit token later.
+ *
+ * Portalled layers render outside [data-kit-scope], where every --kit-* value is undefined. Every layer root here
+ * therefore carries KIT_SCOPE (data-kit-scope) itself.
+ */
+export declare const KIT_SCOPE: {
+    readonly "data-kit-scope": "";
+};
+/** .glass: popovers, menus, hover cards. */
+export declare const GLASS = "bg-kit-surface border-kit-line shadow-[0_1px_2px_rgb(16_16_16/0.04),0_8px_24px_-6px_rgb(16_16_16/0.12)] [.dark_&]:bg-[#252528] [.dark_&]:border-kit-line-strong [.dark_&]:shadow-[inset_0_1px_0_oklch(1_0_0/0.04),0_12px_32px_-8px_oklch(0.12_0.01_286/0.5)]";
+/** .glass-ink: tooltips (ink is dark in both themes). */
+export declare const INK = "bg-[#1c1c1e] text-[#f5f5f5] shadow-[0_10px_28px_-8px_rgb(0_0_0/0.35)] [.dark_&]:bg-[#3d3d40] [.dark_&]:text-[#ececef] [.dark_&]:shadow-[inset_0_1px_0_oklch(1_0_0/0.06),0_0_0_1px_rgb(255_255_255/0.12),0_14px_36px_-8px_oklch(0.12_0.01_286/0.55)]";
+/** --ink-active: the kbd chip on ink. */
+export declare const INK_ACTIVE = "bg-[rgb(255_255_255/0.15)] [.dark_&]:bg-[rgb(255_255_255/0.13)]";
+/** --surface-raised: dialogs, sheets, expanded editors. */
+export declare const SURFACE_RAISED = "bg-[var(--kit-surface-raised)]";
+/** --floating-line: the edge of modals, sheets, expanded editors (= line; dark = line-strong). */
+export declare const FLOATING_LINE = "border-kit-line [.dark_&]:border-kit-line-strong";
+/** .bg-tray + --tray-line: the action tray under a dialog. */
+export declare const TRAY = "bg-kit-surface bg-[linear-gradient(180deg,rgb(216_216_216/0)_16.105%,rgb(216_216_216/0.6)_123.57%)] border-[#ededed] [.dark_&]:bg-[linear-gradient(180deg,oklch(0.32_0.005_286/0)_16.105%,oklch(0.32_0.005_286/0.6)_123.57%)] [.dark_&]:border-[#3a3a3d]";

package/ui/surfaces.js

@@ -0,0 +1,26 @@
+//#region src/kit/ui/surfaces.ts
+/**
+* V2's floating-surface recipes (src/styles/index.css .glass, .glass-ink, .bg-tray, --surface-raised, --floating-line),
+* as class strings. kit.css has no tokens for these yet, so the V2 values are written out here, light and dark
+* (`[.dark_&]` = the app is dark). Each one is a single constant so the integrator can swap it for a kit token later.
+*
+* Portalled layers render outside [data-kit-scope], where every --kit-* value is undefined. Every layer root here
+* therefore carries KIT_SCOPE (data-kit-scope) itself.
+*/
+var KIT_SCOPE = { "data-kit-scope": "" };
+/** .glass: popovers, menus, hover cards. */
+var GLASS = "bg-kit-surface border-kit-line shadow-[0_1px_2px_rgb(16_16_16/0.04),0_8px_24px_-6px_rgb(16_16_16/0.12)] [.dark_&]:bg-[#252528] [.dark_&]:border-kit-line-strong [.dark_&]:shadow-[inset_0_1px_0_oklch(1_0_0/0.04),0_12px_32px_-8px_oklch(0.12_0.01_286/0.5)]";
+/** .glass-ink: tooltips (ink is dark in both themes). */
+var INK = "bg-[#1c1c1e] text-[#f5f5f5] shadow-[0_10px_28px_-8px_rgb(0_0_0/0.35)] [.dark_&]:bg-[#3d3d40] [.dark_&]:text-[#ececef] [.dark_&]:shadow-[inset_0_1px_0_oklch(1_0_0/0.06),0_0_0_1px_rgb(255_255_255/0.12),0_14px_36px_-8px_oklch(0.12_0.01_286/0.55)]";
+/** --ink-active: the kbd chip on ink. */
+var INK_ACTIVE = "bg-[rgb(255_255_255/0.15)] [.dark_&]:bg-[rgb(255_255_255/0.13)]";
+/** --surface-raised: dialogs, sheets, expanded editors. */
+var SURFACE_RAISED = "bg-[var(--kit-surface-raised)]";
+/** --floating-line: the edge of modals, sheets, expanded editors (= line; dark = line-strong). */
+var FLOATING_LINE = "border-kit-line [.dark_&]:border-kit-line-strong";
+/** .bg-tray + --tray-line: the action tray under a dialog. */
+var TRAY = "bg-kit-surface bg-[linear-gradient(180deg,rgb(216_216_216/0)_16.105%,rgb(216_216_216/0.6)_123.57%)] border-[#ededed] [.dark_&]:bg-[linear-gradient(180deg,oklch(0.32_0.005_286/0)_16.105%,oklch(0.32_0.005_286/0.6)_123.57%)] [.dark_&]:border-[#3a3a3d]";
+//#endregion
+export { FLOATING_LINE, GLASS, INK, INK_ACTIVE, KIT_SCOPE, SURFACE_RAISED, TRAY };
+
+//# sourceMappingURL=surfaces.js.map

package/ui/surfaces.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"surfaces.js","names":[],"sources":["../../src/kit/ui/surfaces.ts"],"sourcesContent":["/**\n * V2's floating-surface recipes (src/styles/index.css .glass, .glass-ink, .bg-tray, --surface-raised, --floating-line),\n * as class strings. kit.css has no tokens for these yet, so the V2 values are written out here, light and dark\n * (`[.dark_&]` = the app is dark). Each one is a single constant so the integrator can swap it for a kit token later.\n *\n * Portalled layers render outside [data-kit-scope], where every --kit-* value is undefined. Every layer root here\n * therefore carries KIT_SCOPE (data-kit-scope) itself.\n */\nexport const KIT_SCOPE = { \"data-kit-scope\": \"\" } as const;\n\n/** .glass: popovers, menus, hover cards. */\nexport const GLASS =\n  \"bg-kit-surface border-kit-line shadow-[0_1px_2px_rgb(16_16_16/0.04),0_8px_24px_-6px_rgb(16_16_16/0.12)] [.dark_&]:bg-[#252528] [.dark_&]:border-kit-line-strong [.dark_&]:shadow-[inset_0_1px_0_oklch(1_0_0/0.04),0_12px_32px_-8px_oklch(0.12_0.01_286/0.5)]\";\n\n/** .glass-ink: tooltips (ink is dark in both themes). */\nexport const INK =\n  \"bg-[#1c1c1e] text-[#f5f5f5] shadow-[0_10px_28px_-8px_rgb(0_0_0/0.35)] [.dark_&]:bg-[#3d3d40] [.dark_&]:text-[#ececef] [.dark_&]:shadow-[inset_0_1px_0_oklch(1_0_0/0.06),0_0_0_1px_rgb(255_255_255/0.12),0_14px_36px_-8px_oklch(0.12_0.01_286/0.55)]\";\n\n/** --ink-active: the kbd chip on ink. */\nexport const INK_ACTIVE = \"bg-[rgb(255_255_255/0.15)] [.dark_&]:bg-[rgb(255_255_255/0.13)]\";\n\n/** --surface-raised: dialogs, sheets, expanded editors. */\nexport const SURFACE_RAISED = \"bg-[var(--kit-surface-raised)]\";\n\n/** --floating-line: the edge of modals, sheets, expanded editors (= line; dark = line-strong). */\nexport const FLOATING_LINE = \"border-kit-line [.dark_&]:border-kit-line-strong\";\n\n/** .bg-tray + --tray-line: the action tray under a dialog. */\nexport const TRAY =\n  \"bg-kit-surface bg-[linear-gradient(180deg,rgb(216_216_216/0)_16.105%,rgb(216_216_216/0.6)_123.57%)] border-[#ededed] [.dark_&]:bg-[linear-gradient(180deg,oklch(0.32_0.005_286/0)_16.105%,oklch(0.32_0.005_286/0.6)_123.57%)] [.dark_&]:border-[#3a3a3d]\";\n"],"mappings":";;;;;;;;;AAQA,IAAa,YAAY,EAAE,kBAAkB,IAAI;;AAGjD,IAAa,QACX;;AAGF,IAAa,MACX;;AAGF,IAAa,aAAa;;AAG1B,IAAa,iBAAiB;;AAG9B,IAAa,gBAAgB;;AAG7B,IAAa,OACX"}

package/ui/tooltip-root.d.ts

@@ -0,0 +1,12 @@
+import * as React from "react";
+import { Tooltip as TooltipPrimitive } from "@base-ui/react/tooltip";
+export declare const MODAL_LAYER = "data-kit-modal-layer";
+/** Drop-in for Tooltip.Root (controlled or not) that closes itself when a modal layer opens. */
+export declare function TooltipRoot({ open: openProp, defaultOpen, onOpenChange, ...props }: TooltipPrimitive.Root.Props): import("react/jsx-runtime").JSX.Element;
+/** The ink tooltip surface (V2 .glass-ink, radius 6, 8×4 padding, 12/500, 1.45 leading, wraps, fades in 160ms). */
+export declare const TOOLTIP_POPUP_CLASS: string;
+/** Portal → positioner (6px offset, 8px collision padding, z-90, its own kit scope) → ink popup. */
+export declare function TooltipLayer({ side, children, }: {
+    side?: "top" | "bottom" | "left" | "right";
+    children: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;

package/ui/tooltip-root.js

@@ -0,0 +1,76 @@
+import { cn } from "../lib/cn.js";
+import { INK, KIT_SCOPE } from "./surfaces.js";
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+import { Tooltip } from "@base-ui/react/tooltip";
+//#region src/kit/ui/tooltip-root.tsx
+var MODAL_LAYER = "data-kit-modal-layer";
+var LAYER_SELECTOR = `[${MODAL_LAYER}]`;
+var listeners = /* @__PURE__ */ new Set();
+var observer = null;
+var layers = 0;
+var EXPANDED_SELECTOR = "[aria-expanded=\"true\"]";
+var count = () => (Number(document.body.getAttribute("data-scroll-locked")) || 0) + document.querySelectorAll(LAYER_SELECTOR).length + document.querySelectorAll(EXPANDED_SELECTOR).length;
+function onModalLayerOpen(fn) {
+	if (typeof document === "undefined" || typeof MutationObserver === "undefined") return () => {};
+	if (!observer) {
+		layers = count();
+		observer = new MutationObserver(() => {
+			const n = count();
+			if (n > layers) listeners.forEach((l) => l());
+			layers = n;
+		});
+		observer.observe(document.body, {
+			attributes: true,
+			attributeFilter: ["data-scroll-locked", "aria-expanded"],
+			childList: true,
+			subtree: true
+		});
+	}
+	listeners.add(fn);
+	return () => {
+		listeners.delete(fn);
+		if (!listeners.size) {
+			observer?.disconnect();
+			observer = null;
+		}
+	};
+}
+/** Drop-in for Tooltip.Root (controlled or not) that closes itself when a modal layer opens. */
+function TooltipRoot({ open: openProp, defaultOpen, onOpenChange, ...props }) {
+	const [inner, setInner] = React.useState(!!defaultOpen);
+	const open = openProp ?? inner;
+	const change = React.useRef(onOpenChange);
+	change.current = onOpenChange;
+	const set = React.useCallback((o, details) => {
+		setInner(o);
+		if (details) change.current?.(o, details);
+	}, []);
+	React.useEffect(() => open ? onModalLayerOpen(() => set(false)) : void 0, [open, set]);
+	return /* @__PURE__ */ jsx(Tooltip.Root, {
+		...props,
+		open,
+		onOpenChange: set
+	});
+}
+/** The ink tooltip surface (V2 .glass-ink, radius 6, 8×4 padding, 12/500, 1.45 leading, wraps, fades in 160ms). */
+var TOOLTIP_POPUP_CLASS = cn("flex max-w-[min(280px,calc(100vw-16px))] items-start gap-2 rounded-kit-md px-2 py-1 font-kit-sans text-kit-xs font-medium leading-[1.45] data-[open]:not-data-[instant]:animate-kit-fade-in", INK);
+/** Portal → positioner (6px offset, 8px collision padding, z-90, its own kit scope) → ink popup. */
+function TooltipLayer({ side = "top", children }) {
+	return /* @__PURE__ */ jsx(Tooltip.Portal, { children: /* @__PURE__ */ jsx(Tooltip.Positioner, {
+		side,
+		sideOffset: 6,
+		collisionPadding: 8,
+		className: "z-[90]",
+		...KIT_SCOPE,
+		children: /* @__PURE__ */ jsx(Tooltip.Popup, {
+			"data-kit-tooltip": "",
+			className: TOOLTIP_POPUP_CLASS,
+			children
+		})
+	}) });
+}
+//#endregion
+export { MODAL_LAYER, TooltipLayer, TooltipRoot };
+
+//# sourceMappingURL=tooltip-root.js.map

package/ui/tooltip-root.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip-root.js","names":[],"sources":["../../src/kit/ui/tooltip-root.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Tooltip as TooltipPrimitive } from \"@base-ui/react/tooltip\";\nimport { cn } from \"../lib/cn\";\nimport { INK, KIT_SCOPE } from \"./surfaces\";\n\n/*\n * Tooltips close when a modal layer opens.\n *\n * Tooltips sit at z-90, above dialogs (60/61), the expanded editor (70/71) and menus (80), so a tooltip that is open\n * when a modal opens would stay on top of it: hover \"Site settings\", open a dialog, and the hint floats over it.\n * Every modal layer in the kit marks its popup with data-kit-modal-layer (and Radix layers elsewhere in the app count\n * their scroll locks in body[data-scroll-locked]); a popover or menu marks its trigger aria-expanded. When any count\n * rises, a new layer opened, so every open tooltip closes. Tooltips inside the new layer still open normally afterwards.\n */\nexport const MODAL_LAYER = \"data-kit-modal-layer\";\nconst LAYER_SELECTOR = `[${MODAL_LAYER}]`;\nconst listeners = new Set<() => void>();\nlet observer: MutationObserver | null = null;\nlet layers = 0;\n/*\n * A POPOVER OR MENU counts too, by the trigger it opened from (`aria-expanded=\"true\"`, which Base UI and Radix both\n * set). Tooltips sit at z-90 and the dashboard's popovers at --z-dropdown (450): a hint left open on a neighbouring\n * control when the publish popover opened stayed on screen UNDER it — ghost text behind the popover (closing QA\n * UI/UX #12). Non-modal popups mark nothing on the body, so they were never counted.\n */\nconst EXPANDED_SELECTOR = '[aria-expanded=\"true\"]';\nconst count = () =>\n  (Number(document.body.getAttribute(\"data-scroll-locked\")) || 0) +\n  document.querySelectorAll(LAYER_SELECTOR).length +\n  document.querySelectorAll(EXPANDED_SELECTOR).length;\n\nfunction onModalLayerOpen(fn: () => void) {\n  if (typeof document === \"undefined\" || typeof MutationObserver === \"undefined\") return () => {};\n  if (!observer) {\n    layers = count();\n    observer = new MutationObserver(() => {\n      const n = count();\n      if (n > layers) listeners.forEach((l) => l());\n      layers = n;\n    });\n    observer.observe(document.body, { attributes: true, attributeFilter: [\"data-scroll-locked\", \"aria-expanded\"], childList: true, subtree: true });\n  }\n  listeners.add(fn);\n  return () => {\n    listeners.delete(fn);\n    if (!listeners.size) {\n      observer?.disconnect();\n      observer = null;\n    }\n  };\n}\n\n/** Drop-in for Tooltip.Root (controlled or not) that closes itself when a modal layer opens. */\nexport function TooltipRoot({ open: openProp, defaultOpen, onOpenChange, ...props }: TooltipPrimitive.Root.Props) {\n  const [inner, setInner] = React.useState(!!defaultOpen);\n  const open = openProp ?? inner;\n  const change = React.useRef(onOpenChange);\n  change.current = onOpenChange;\n  const set = React.useCallback((o: boolean, details?: TooltipPrimitive.Root.ChangeEventDetails) => {\n    setInner(o);\n    if (details) change.current?.(o, details);\n  }, []);\n  React.useEffect(() => (open ? onModalLayerOpen(() => set(false)) : undefined), [open, set]);\n  return <TooltipPrimitive.Root {...props} open={open} onOpenChange={set} />;\n}\n\n/** The ink tooltip surface (V2 .glass-ink, radius 6, 8×4 padding, 12/500, 1.45 leading, wraps, fades in 160ms). */\nexport const TOOLTIP_POPUP_CLASS = cn(\n  \"flex max-w-[min(280px,calc(100vw-16px))] items-start gap-2 rounded-kit-md px-2 py-1 font-kit-sans text-kit-xs font-medium leading-[1.45] data-[open]:not-data-[instant]:animate-kit-fade-in\",\n  INK,\n);\n\n/** Portal → positioner (6px offset, 8px collision padding, z-90, its own kit scope) → ink popup. */\nexport function TooltipLayer({\n  side = \"top\",\n  children,\n}: {\n  side?: \"top\" | \"bottom\" | \"left\" | \"right\";\n  children: React.ReactNode;\n}) {\n  return (\n    <TooltipPrimitive.Portal>\n      <TooltipPrimitive.Positioner side={side} sideOffset={6} collisionPadding={8} className=\"z-[90]\" {...KIT_SCOPE}>\n        <TooltipPrimitive.Popup data-kit-tooltip=\"\" className={TOOLTIP_POPUP_CLASS}>{children}</TooltipPrimitive.Popup>\n      </TooltipPrimitive.Positioner>\n    </TooltipPrimitive.Portal>\n  );\n}\n"],"mappings":";;;;;;AAcA,IAAa,cAAc;AAC3B,IAAM,iBAAiB,IAAI,YAAY;AACvC,IAAM,4BAAY,IAAI,KAAiB;AACvC,IAAI,WAAoC;AACxC,IAAI,SAAS;AAOb,IAAM,oBAAoB;AAC1B,IAAM,eACH,OAAO,SAAS,KAAK,aAAa,qBAAqB,CAAC,IAAI,KAC7D,SAAS,iBAAiB,eAAe,CAAC,SAC1C,SAAS,iBAAiB,kBAAkB,CAAC;AAE/C,SAAS,iBAAiB,IAAgB;AACxC,KAAI,OAAO,aAAa,eAAe,OAAO,qBAAqB,YAAa,cAAa;AAC7F,KAAI,CAAC,UAAU;AACb,WAAS,OAAO;AAChB,aAAW,IAAI,uBAAuB;GACpC,MAAM,IAAI,OAAO;AACjB,OAAI,IAAI,OAAQ,WAAU,SAAS,MAAM,GAAG,CAAC;AAC7C,YAAS;IACT;AACF,WAAS,QAAQ,SAAS,MAAM;GAAE,YAAY;GAAM,iBAAiB,CAAC,sBAAsB,gBAAgB;GAAE,WAAW;GAAM,SAAS;GAAM,CAAC;;AAEjJ,WAAU,IAAI,GAAG;AACjB,cAAa;AACX,YAAU,OAAO,GAAG;AACpB,MAAI,CAAC,UAAU,MAAM;AACnB,aAAU,YAAY;AACtB,cAAW;;;;;AAMjB,SAAgB,YAAY,EAAE,MAAM,UAAU,aAAa,cAAc,GAAG,SAAsC;CAChH,MAAM,CAAC,OAAO,YAAY,MAAM,SAAS,CAAC,CAAC,YAAY;CACvD,MAAM,OAAO,YAAY;CACzB,MAAM,SAAS,MAAM,OAAO,aAAa;AACzC,QAAO,UAAU;CACjB,MAAM,MAAM,MAAM,aAAa,GAAY,YAAuD;AAChG,WAAS,EAAE;AACX,MAAI,QAAS,QAAO,UAAU,GAAG,QAAQ;IACxC,EAAE,CAAC;AACN,OAAM,gBAAiB,OAAO,uBAAuB,IAAI,MAAM,CAAC,GAAG,KAAA,GAAY,CAAC,MAAM,IAAI,CAAC;AAC3F,QAAO,oBAAC,QAAiB,MAAlB;EAAuB,GAAI;EAAa;EAAM,cAAc;EAAO,CAAA;;;AAI5E,IAAa,sBAAsB,GACjC,+LACA,IACD;;AAGD,SAAgB,aAAa,EAC3B,OAAO,OACP,YAIC;AACD,QACE,oBAAC,QAAiB,QAAlB,EAAA,UACE,oBAAC,QAAiB,YAAlB;EAAmC;EAAM,YAAY;EAAG,kBAAkB;EAAG,WAAU;EAAS,GAAI;YAClG,oBAAC,QAAiB,OAAlB;GAAwB,oBAAiB;GAAG,WAAW;GAAsB;GAAkC,CAAA;EACnF,CAAA,EACN,CAAA"}

package/ui/variants.d.ts

@@ -0,0 +1,15 @@
+/** The slice of class-variance-authority the kit uses (variants + defaults + compound variants), kept in-package. */
+type Config<V extends Record<string, Record<string, string>>> = {
+    variants: V;
+    defaultVariants: {
+        [K in keyof V]: keyof V[K];
+    };
+    compoundVariants?: ({
+        [K in keyof V]?: keyof V[K];
+    } & {
+        className: string;
+    })[];
+};
+export type VariantProps<F> = F extends (props?: infer P) => string ? NonNullable<P> : never;
+export declare function variants<V extends Record<string, Record<string, string>>>(base: string, config: Config<V>): (props?: { [K in keyof V]?: keyof V[K] | null; }) => string;
+export {};

package/ui/variants.js

@@ -0,0 +1,14 @@
+import { cn } from "../lib/cn.js";
+//#region src/kit/ui/variants.ts
+function variants(base, config) {
+	return (props) => {
+		const picked = {};
+		for (const key of Object.keys(config.variants)) picked[key] = props?.[key] ?? config.defaultVariants[key];
+		const compound = (config.compoundVariants ?? []).filter(({ className: _c, ...when }) => Object.entries(when).every(([k, v]) => picked[k] === v)).map((c) => c.className);
+		return cn(base, ...Object.keys(config.variants).map((k) => config.variants[k][picked[k]]), ...compound);
+	};
+}
+//#endregion
+export { variants };
+
+//# sourceMappingURL=variants.js.map

package/ui/variants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"variants.js","names":[],"sources":["../../src/kit/ui/variants.ts"],"sourcesContent":["import { cn } from \"../lib/cn\";\n\n/** The slice of class-variance-authority the kit uses (variants + defaults + compound variants), kept in-package. */\ntype Config<V extends Record<string, Record<string, string>>> = {\n  variants: V;\n  defaultVariants: { [K in keyof V]: keyof V[K] };\n  compoundVariants?: ({ [K in keyof V]?: keyof V[K] } & { className: string })[];\n};\n\nexport type VariantProps<F> = F extends (props?: infer P) => string ? NonNullable<P> : never;\n\nexport function variants<V extends Record<string, Record<string, string>>>(base: string, config: Config<V>) {\n  return (props?: { [K in keyof V]?: keyof V[K] | null }) => {\n    const picked = {} as { [K in keyof V]: keyof V[K] };\n    for (const key of Object.keys(config.variants) as (keyof V)[]) picked[key] = props?.[key] ?? config.defaultVariants[key];\n    const compound = (config.compoundVariants ?? [])\n      .filter(({ className: _c, ...when }) => Object.entries(when).every(([k, v]) => picked[k as keyof V] === v))\n      .map((c) => c.className);\n    return cn(base, ...(Object.keys(config.variants) as (keyof V)[]).map((k) => config.variants[k][picked[k] as string]), ...compound);\n  };\n}\n"],"mappings":";;AAWA,SAAgB,SAA2D,MAAc,QAAmB;AAC1G,SAAQ,UAAmD;EACzD,MAAM,SAAS,EAAE;AACjB,OAAK,MAAM,OAAO,OAAO,KAAK,OAAO,SAAS,CAAiB,QAAO,OAAO,QAAQ,QAAQ,OAAO,gBAAgB;EACpH,MAAM,YAAY,OAAO,oBAAoB,EAAE,EAC5C,QAAQ,EAAE,WAAW,IAAI,GAAG,WAAW,OAAO,QAAQ,KAAK,CAAC,OAAO,CAAC,GAAG,OAAO,OAAO,OAAkB,EAAE,CAAC,CAC1G,KAAK,MAAM,EAAE,UAAU;AAC1B,SAAO,GAAG,MAAM,GAAI,OAAO,KAAK,OAAO,SAAS,CAAiB,KAAK,MAAM,OAAO,SAAS,GAAG,OAAO,IAAc,EAAE,GAAG,SAAS"}

package/LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2026 Sanity.io
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.

package/README.md

@@ -1,27 +0,0 @@
-# @bettercms-ai/kit
-
-The BetterCMS component kit for React: layout and text primitives, buttons, inputs, menus,
-dialogs, popovers, toasts, a theme builder (`@bettercms-ai/kit/theme`) and the workshop stories
-the dashboard's style guide renders. Icons come from `@bettercms-ai/icons`.
-
-```sh
-npm install @bettercms-ai/kit @bettercms-ai/icons styled-components
-```
-
-| Import | What you get |
-| --- | --- |
-| `@bettercms-ai/kit` | Primitives, components, `ThemeProvider`, hooks. |
-| `@bettercms-ai/kit/theme` | `buildTheme`, the theme types and colour helpers. |
-
-The theme lives under the `bcms` key of the styled-components theme. React 18 or 19,
-`react-dom`, `react-is` and styled-components 5.2+ or 6 are peer dependencies.
-
-## How it is built
-
-`scripts/build.mjs` rebuilds `src/`, `exports/` and `dist/` offline from two sha256-pinned
-tarballs in `vendor/` and one rename table with an exact count per entry. `scripts/vendor-gate.mjs`
-is the release gate: `node scripts/vendor-gate.mjs <tgz | dir | lockfile>...` must print 0 hits.
-
-## License
-
-MIT. The code keeps its original MIT copyright notice; see `LICENSE`.