@bettercms-ai/kit 1.0.0 → 2.0.0-next.1

package/dist/ui/controls.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"controls.js","names":[],"sources":["../../src/ui/controls.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Switch as SwitchPrimitive } from \"@base-ui/react/switch\";\nimport { Checkbox as CheckboxPrimitive } from \"@base-ui/react/checkbox\";\nimport { RadioGroup as RadioGroupPrimitive } from \"@base-ui/react/radio-group\";\nimport { Radio as RadioPrimitive } from \"@base-ui/react/radio\";\nimport { Tooltip as TooltipPrimitive } from \"@base-ui/react/tooltip\";\nimport { Slider as SliderPrimitive } from \"@base-ui/react/slider\";\nimport { ToggleGroup as ToggleGroupPrimitive } from \"@base-ui/react/toggle-group\";\nimport { Toggle as TogglePrimitive } from \"@base-ui/react/toggle\";\nimport { Progress as ProgressPrimitive } from \"@base-ui/react/progress\";\nimport { IconCheck, IconMinus } from \"@tabler/icons-react\";\nimport { AnimatePresence, motion, useReducedMotion } from \"framer-motion\";\nimport { cn } from \"../lib/cn\";\nimport { useFieldLabelledBy, useLabelFor } from \"./field-context\";\nimport { TooltipScope } from \"./button\";\nimport { useShortcutHints } from \"./shortcut-hint\";\nimport { TooltipLayer, TooltipRoot } from \"./tooltip-root\";\n\n/* Underlines and selected pills share one spring (DESIGN.md 3.6). */\nconst PILL_SPRING = { type: \"spring\", stiffness: 520, damping: 42 } as const;\n\n/* ── Switch ─────────────────────────────────────────────────────────────── */\nexport function Switch({\n  className,\n  size = \"md\",\n  ...props\n}: SwitchPrimitive.Root.Props & { size?: \"sm\" | \"md\" }) {\n  const sm = size === \"sm\";\n  const labelledBy = useFieldLabelledBy();\n  const labelFor = useLabelFor(props.id);\n  return (\n    <SwitchPrimitive.Root\n      className={cn(\n        \"group relative inline-flex shrink-0 items-center rounded-full bg-kit-switch-off transition-colors duration-200 data-[checked]:bg-kit-success data-[disabled]:opacity-40\",\n        sm ? \"h-4 w-7\" : \"h-5 w-9\",\n        className,\n      )}\n      aria-labelledby={props[\"aria-labelledby\"] ?? (props[\"aria-label\"] ? undefined : (labelFor ?? (props.id ? undefined : labelledBy)))}\n      {...props}\n    >\n      <SwitchPrimitive.Thumb\n        className={cn(\n          \"pointer-events-none block rounded-full bg-kit-control-thumb shadow-kit-sm transition-transform duration-200 ease-[var(--kit-ease-spring)]\",\n          sm ? \"size-3 translate-x-0.5 data-[checked]:translate-x-[14px]\" : \"size-4 translate-x-0.5 data-[checked]:translate-x-[18px]\",\n        )}\n      />\n    </SwitchPrimitive.Root>\n  );\n}\n\n/* ── Checkbox ───────────────────────────────────────────────────────────── */\n/** `checked` keeps V2's tri-state value: true, false or \"indeterminate\". */\nexport function Checkbox({\n  className,\n  checked,\n  ...props\n}: Omit<CheckboxPrimitive.Root.Props, \"checked\" | \"indeterminate\"> & { checked?: boolean | \"indeterminate\" }) {\n  const indeterminate = checked === \"indeterminate\";\n  const labelFor = useLabelFor(props.id);\n  return (\n    <CheckboxPrimitive.Root\n      aria-labelledby={props[\"aria-labelledby\"] ?? (props[\"aria-label\"] ? undefined : labelFor)}\n      className={cn(\n        \"peer flex size-4 shrink-0 items-center justify-center rounded-kit-sm border border-kit-line-strong bg-kit-control-bg shadow-kit-xs transition-colors hover:border-[var(--kit-emphasis-line)] data-[checked]:border-kit-inverse data-[checked]:bg-kit-inverse data-[indeterminate]:border-kit-inverse data-[indeterminate]:bg-kit-inverse\",\n        className,\n      )}\n      checked={checked === undefined ? undefined : checked === true}\n      indeterminate={indeterminate}\n      {...props}\n    >\n      <CheckboxPrimitive.Indicator className=\"text-kit-fg-inverse\">\n        {indeterminate ? <IconMinus className=\"size-3\" stroke={3} /> : <IconCheck className=\"size-3\" stroke={3} />}\n      </CheckboxPrimitive.Indicator>\n    </CheckboxPrimitive.Root>\n  );\n}\n\n/* ── Radio ──────────────────────────────────────────────────────────────── */\nexport const RadioGroup = RadioGroupPrimitive;\nexport function Radio({ className, ...props }: RadioPrimitive.Root.Props) {\n  return (\n    <RadioPrimitive.Root\n      className={cn(\n        \"flex size-4 shrink-0 items-center justify-center rounded-full border border-kit-line-strong bg-kit-control-bg shadow-kit-xs transition-colors hover:border-[var(--kit-emphasis-line)] data-[checked]:border-kit-accent\",\n        className,\n      )}\n      {...props}\n    >\n      <RadioPrimitive.Indicator className=\"block size-2 rounded-full bg-kit-accent\" />\n    </RadioPrimitive.Root>\n  );\n}\n\n/** Large selectable card used for choices (plans, project kinds, roles). */\nexport function ChoiceCard({\n  selected,\n  onSelect,\n  icon,\n  title,\n  description,\n  badge,\n  className,\n  children,\n}: {\n  selected: boolean;\n  onSelect: () => void;\n  icon?: React.ReactNode;\n  title: React.ReactNode;\n  description?: React.ReactNode;\n  badge?: React.ReactNode;\n  className?: string;\n  children?: React.ReactNode;\n}) {\n  return (\n    <button\n      type=\"button\"\n      onClick={onSelect}\n      aria-pressed={selected}\n      className={cn(\n        \"focus-inset group relative flex w-full flex-col gap-1.5 rounded-kit-lg border bg-kit-control-bg px-3 py-2.5 text-left transition-[border-color,box-shadow,background-color] duration-150\", // inset: option cards often sit in a clipped, gapless list\n        selected\n          ? \"border-[var(--kit-emphasis-line)] shadow-kit-ring-field\"\n          : \"border-kit-line hover:border-kit-line-strong hover:shadow-kit-sm\",\n        className,\n      )}\n    >\n      <div className=\"flex items-start gap-3\">\n        {icon ? (\n          <span className={cn(\"mt-0.5 flex shrink-0 items-center justify-center text-kit-fg-2 [&_svg]:size-4\", selected && \"text-kit-fg\")}>\n            {icon}\n          </span>\n        ) : null}\n        <div className=\"min-w-0 flex-1\">\n          <div className=\"flex items-center gap-2 text-kit-sm font-medium text-kit-fg\">\n            {title}\n            {badge}\n          </div>\n          {description ? <p className=\"mt-0.5 text-[13px] leading-[18px] text-kit-fg-2\">{description}</p> : null}\n        </div>\n        <span\n          className={cn(\n            \"mt-0.5 flex size-4 shrink-0 items-center justify-center rounded-full border transition-colors\",\n            selected ? \"border-kit-inverse bg-kit-inverse text-kit-fg-inverse\" : \"border-kit-line-strong\",\n          )}\n        >\n          {selected ? <IconCheck className=\"size-2.5\" stroke={3.5} /> : null}\n        </span>\n      </div>\n      {children}\n    </button>\n  );\n}\n\n/** D15: 2–4 choices → one hairline list of compact rows. Wrap <ChoiceCard>s in it; they lose their own card chrome. */\nexport function ChoiceList({ className, children, ...props }: React.HTMLAttributes<HTMLDivElement>) {\n  return (\n    <div\n      role=\"group\"\n      className={cn(\n        \"flex flex-col divide-y divide-kit-line-subtle overflow-hidden rounded-kit-lg border border-kit-line\",\n        \"[&>*]:rounded-none [&>*]:border-0 [&>*]:shadow-none [&>*]:hover:shadow-none [&>*]:hover:bg-kit-hover [&>[aria-pressed=true]]:bg-kit-selected [&>[aria-pressed=true]]:shadow-none\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n}\n\n/* ── Slider ─────────────────────────────────────────────────────────────── */\nexport function Slider({\n  className,\n  \"aria-label\": ariaLabel,\n  \"aria-labelledby\": ariaLabelledby,\n  label,\n  ...props\n}: Omit<SliderPrimitive.Root.Props<number | readonly number[]>, \"className\"> & {\n  className?: string;\n  /** accessible name for the thumb(s) */\n  label?: string;\n}) {\n  const name = ariaLabel ?? label;\n  const v = props.value ?? props.defaultValue ?? [0];\n  const thumbs = Array.isArray(v) ? v.length : 1;\n  return (\n    <SliderPrimitive.Root className={cn(\"w-full\", className)} {...props}>\n      <SliderPrimitive.Control className=\"relative flex h-5 w-full touch-none select-none items-center\">\n        {/* Figma §4.3 slider: 4px track, --fg-2 fill, 12px light thumb with a border (control-thumb lifts off the dark track) */}\n        <SliderPrimitive.Track className=\"relative h-1 w-full grow overflow-hidden rounded-full bg-[var(--kit-track-line)]\">\n          <SliderPrimitive.Indicator className=\"absolute h-full bg-kit-fg-2\" />\n        </SliderPrimitive.Track>\n        {Array.from({ length: thumbs }, (_, i) => (\n          <SliderPrimitive.Thumb\n            key={i}\n            index={thumbs > 1 ? i : undefined}\n            getAriaLabel={name ? () => name : undefined}\n            aria-labelledby={name ? undefined : ariaLabelledby}\n            className=\"block size-3 rounded-full border border-kit-line-strong bg-kit-control-thumb shadow-kit-md transition-transform hover:scale-110 has-[:focus-visible]:scale-110 has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-kit-focus-ring has-[:focus-visible]:[outline-style:solid]\"\n          />\n        ))}\n      </SliderPrimitive.Control>\n    </SliderPrimitive.Root>\n  );\n}\n\n/* V2's overlay <Tooltip> (side bottom, 350ms) for collapsed and icon-only segments, built on the shared ink layer. */\nfunction SegmentTooltip({ content, shortcut, children }: { content: React.ReactNode; shortcut?: string; children: React.ReactElement }) {\n  const hints = useShortcutHints();\n  return (\n    <TooltipScope.Provider value>\n      <TooltipRoot>\n        <TooltipPrimitive.Trigger delay={350} render={children} />\n        <TooltipLayer side=\"bottom\">\n          <span className=\"line-clamp-[8] min-w-0 whitespace-normal [overflow-wrap:anywhere]\">{content}</span>\n          {shortcut && hints ? (\n            <kbd data-hint=\"shortcuts\" className=\"mt-px shrink-0 rounded-kit-sm bg-kit-ink-active px-1 font-kit-sans text-kit-2xs\">\n              {shortcut}\n            </kbd>\n          ) : null}\n        </TooltipLayer>\n      </TooltipRoot>\n    </TooltipScope.Provider>\n  );\n}\n\n/* ── Segmented ───────────────────────────────────────────────────────────\n   Two deliberate looks (founder: no \"AI-sloppy\" grey pills with counts inside):\n   • variant=\"tabs\"   (opt-in) — quiet text tabs, muted tabular count, 1.5px animated underline.\n                      Use for filters, view sections, panel tabs.\n   • variant=\"toggle\" (default) — slim hairline-bordered control, subtle selected fill, no shadow.\n                      Use for binary/ternary switches: list|grid, light|dark, desktop|tablet|mobile.\n   Pass `count` on items instead of baking numbers into labels.                                            */\nexport type SegmentedItem<T extends string> = {\n  value: T;\n  label: React.ReactNode;\n  icon?: React.ReactNode;\n  disabled?: boolean;\n  count?: number;\n  tooltip?: React.ReactNode;\n  shortcut?: string;\n  name?: string;\n};\n\nexport function Segmented<T extends string>({\n  value,\n  onChange,\n  items,\n  size = \"md\",\n  className,\n  layoutId,\n  iconOnly,\n  collapseInactive,\n  variant,\n  bordered,\n  \"aria-label\": ariaLabel,\n}: {\n  \"aria-label\"?: string;\n  value: T;\n  onChange: (v: T) => void;\n  items: SegmentedItem<T>[];\n  /** Toggle variant: only the selected item shows its label; the others collapse to icon + tooltip. */\n  collapseInactive?: boolean;\n  size?: \"sm\" | \"md\";\n  className?: string;\n  layoutId?: string;\n  iconOnly?: boolean;\n  variant?: \"tabs\" | \"toggle\";\n  /** tabs only: draw a hairline under the whole tab row */\n  bordered?: boolean;\n}) {\n  const id = React.useId();\n  const v = variant ?? \"toggle\";\n  const reduceMotion = useReducedMotion();\n  const pillTransition = reduceMotion ? { duration: 0 } : PILL_SPRING;\n  const onKey = (e: React.KeyboardEvent, i: number) => {\n    const enabled = items.filter((x) => !x.disabled);\n    const idx = enabled.findIndex((x) => x.value === items[i].value);\n    const fwd = e.key === \"ArrowRight\" || e.key === \"ArrowDown\";\n    const back = e.key === \"ArrowLeft\" || e.key === \"ArrowUp\";\n    const next = fwd\n      ? enabled[(idx + 1) % enabled.length]\n      : back\n        ? enabled[(idx - 1 + enabled.length) % enabled.length]\n        : e.key === \"Home\"\n          ? enabled[0]\n          : e.key === \"End\"\n            ? enabled[enabled.length - 1]\n            : null;\n    if (next) {\n      e.preventDefault();\n      onChange(next.value);\n      // roving tabindex: keep keyboard focus on the newly selected item\n      const group = (e.currentTarget as HTMLElement).closest(\"[data-segmented]\");\n      requestAnimationFrame(() => group?.querySelector<HTMLElement>(`[data-seg-value=\"${CSS.escape(next.value)}\"]`)?.focus());\n    }\n  };\n\n  if (v === \"tabs\") {\n    return (\n      <div role=\"tablist\" aria-label={ariaLabel} data-segmented className={cn(\"inline-flex items-center gap-5\", bordered && \"border-b border-kit-line\", className)}>\n        {items.map((it, i) => {\n          const active = it.value === value;\n          return (\n            <button\n              key={it.value}\n              role=\"tab\"\n              type=\"button\"\n              data-seg-value={it.value}\n              aria-selected={active}\n              tabIndex={active ? 0 : -1}\n              disabled={it.disabled}\n              onKeyDown={(e) => onKey(e, i)}\n              onClick={() => onChange(it.value)}\n              className={cn(\n                \"group relative inline-flex items-center justify-center gap-1.5 whitespace-nowrap font-medium tracking-[-0.01em] transition-colors duration-150 disabled:opacity-40 [&_svg]:size-4\",\n                size === \"sm\" ? \"h-7 text-kit-xs [&_svg]:size-3.5\" : \"h-8 text-kit-sm\",\n                active ? \"text-kit-fg\" : \"text-kit-fg-3 hover:text-kit-fg-2\",\n              )}\n            >\n              {it.icon}\n              {iconOnly ? null : it.label}\n              {typeof it.count === \"number\" ? (\n                <span className={cn(\"text-kit-xs font-normal tabular-nums\", active ? \"text-kit-fg-2\" : \"text-kit-fg-4\")}>{it.count}</span>\n              ) : null}\n              {active ? (\n                <motion.span\n                  layoutId={layoutId ?? `tab-${id}`}\n                  transition={pillTransition}\n                  data-seg-indicator=\"\"\n                  className={cn(\"absolute inset-x-0 h-[1.5px] rounded-full bg-kit-fg\", bordered ? \"-bottom-px\" : \"bottom-0\")}\n                />\n              ) : null}\n            </button>\n          );\n        })}\n      </div>\n    );\n  }\n\n  return (\n    /* Toggle metrics (D29, founder): container 1px border + 2px padding, 2px between items, pill radius = container (6) − 2.\n       md items are 28px tall and icon-only items exactly 28×28; sm items 24px. Collapsing items keep the icon at the same\n       inset in both states (6px md / 5px sm) — only the label wrapper animates its width, with the icon→label gap inside it. */\n    <div role=\"radiogroup\" aria-label={ariaLabel} data-segmented className={cn(\"inline-flex items-center gap-[2px] rounded-kit-md border border-kit-line bg-kit-field-bg p-[2px]\", className)}>\n      {items.map((it, i) => {\n        const active = it.value === value;\n        const sm = size === \"sm\";\n        const hasLabel = !iconOnly && it.label !== \"\" && it.label != null;\n        const showLabel = hasLabel && (!collapseInactive || active);\n        const btn = (\n          <button\n            key={it.value}\n            role=\"radio\"\n            type=\"button\"\n            data-seg-value={it.value}\n            aria-checked={active}\n            aria-label={iconOnly && typeof it.label === \"string\" ? it.label : collapseInactive ? it.name : undefined}\n            tabIndex={active ? 0 : -1}\n            disabled={it.disabled}\n            onKeyDown={(e) => onKey(e, i)}\n            onClick={() => onChange(it.value)}\n            className={cn(\n              \"relative inline-flex shrink-0 items-center justify-center whitespace-nowrap rounded-kit-sm font-medium transition-[color,background-color,padding] duration-150 disabled:opacity-40 [&_svg]:size-4 [&_svg]:shrink-0\",\n              sm ? \"h-6 text-kit-xs [&_svg]:size-3.5\" : \"h-7 text-kit-sm\",\n              iconOnly || !hasLabel\n                ? sm ? \"w-6 px-0\" : \"w-7 px-0\"\n                : collapseInactive\n                  ? sm ? (active ? \"pl-[5px] pr-2\" : \"px-[5px]\") : active ? \"pl-1.5 pr-2.5\" : \"px-1.5\"\n                  : sm ? \"px-2\" : \"px-2.5\",\n              active ? \"text-kit-fg\" : \"text-kit-fg-3 hover:bg-kit-hover hover:text-kit-fg\",\n            )}\n          >\n            {active ? (\n              <motion.span\n                layoutId={layoutId ?? `seg-${id}`}\n                transition={pillTransition}\n                data-seg-indicator=\"\"\n                className=\"absolute inset-0 rounded-kit-sm bg-kit-selected\"\n              />\n            ) : null}\n            <span className={cn(\"relative z-[1] inline-flex items-center\", !collapseInactive && \"gap-1.5\")}>\n              {it.icon}\n              {!hasLabel ? null : collapseInactive ? (\n                <AnimatePresence initial={false}>\n                  {showLabel ? (\n                    <motion.span\n                      key=\"label\"\n                      initial={{ width: 0, opacity: 0 }}\n                      animate={{ width: \"auto\", opacity: 1 }}\n                      exit={{ width: 0, opacity: 0 }}\n                      transition={reduceMotion ? { duration: 0 } : { duration: 0.18, ease: [0.2, 0, 0, 1] }}\n                      className=\"inline-flex overflow-hidden\"\n                    >\n                      <span className={sm ? \"pl-1\" : \"pl-1.5\"}>{it.label}</span>\n                    </motion.span>\n                  ) : null}\n                </AnimatePresence>\n              ) : (\n                it.label\n              )}\n              {typeof it.count === \"number\" ? <span className=\"text-kit-xs font-normal tabular-nums text-kit-fg-3\">{it.count}</span> : null}\n            </span>\n          </button>\n        );\n        if (collapseInactive && it.tooltip)\n          return (\n            <SegmentTooltip key={it.value} content={it.tooltip} shortcut={it.shortcut}>\n              {btn}\n            </SegmentTooltip>\n          );\n        return iconOnly && typeof it.label === \"string\" ? (\n          <SegmentTooltip key={it.value} content={it.label}>\n            {btn}\n          </SegmentTooltip>\n        ) : (\n          btn\n        );\n      })}\n    </div>\n  );\n}\n\n/* ── Toggle group (toolbar style) ───────────────────────────────────────\n   One choice (the default) is a radio group in WAI-ARIA: role=\"radiogroup\" with role=\"radio\" + aria-checked items, as\n   V2's Radix ToggleGroup type=\"single\" renders. `multiple` keeps group + aria-pressed (independent toggles). The arrow\n   keys rove the items either way (Base UI's composite). */\nconst ToggleGroupSingle = React.createContext(false);\nexport function ToggleGroup({ className, ...props }: Omit<ToggleGroupPrimitive.Props, \"className\"> & { className?: string }) {\n  const single = !props.multiple;\n  return (\n    <ToggleGroupSingle.Provider value={single}>\n      <ToggleGroupPrimitive\n        className={cn(\"inline-flex items-center gap-px rounded-kit-md border border-kit-line bg-kit-field-bg p-[2px]\", className)}\n        {...(single ? { role: \"radiogroup\" } : {})}\n        {...props}\n      />\n    </ToggleGroupSingle.Provider>\n  );\n}\nexport function ToggleItem({ className, ...props }: Omit<TogglePrimitive.Props, \"className\"> & { className?: string }) {\n  const single = React.useContext(ToggleGroupSingle);\n  return (\n    <TogglePrimitive\n      {...(single\n        ? { render: (p: React.ComponentProps<\"button\">, state: { pressed: boolean }) => <button {...p} role=\"radio\" aria-checked={state.pressed} aria-pressed={undefined} /> }\n        : {})}\n      className={cn(\n        \"inline-flex h-6 min-w-6 items-center justify-center gap-1 rounded-kit-sm px-1.5 text-kit-xs font-medium text-kit-fg-3 transition-colors hover:bg-kit-hover hover:text-kit-fg data-[pressed]:bg-kit-selected data-[pressed]:text-kit-fg [&_svg]:size-3.5\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/* ── Progress ──────────────────────────────────────────────────────────── */\nconst progressTones = {\n  success: \"bg-kit-success\",\n  accent: \"bg-kit-accent\",\n  warning: \"bg-kit-warning\",\n  danger: \"bg-kit-danger\",\n  // --bar-fill: ink in light, a quiet grey in dark (no near-white glare on a dark track)\n  ink: \"bg-[var(--kit-bar-fill)]\",\n  brand: \"bg-[var(--kit-bar-fill)]\",\n};\nexport function Progress({\n  value,\n  className,\n  tone = \"success\",\n  size = \"md\",\n  label = \"Progress\",\n}: {\n  value: number;\n  className?: string;\n  /** accessible name, e.g. \"AI credits used\" */\n  label?: string;\n  tone?: keyof typeof progressTones;\n  size?: \"sm\" | \"md\";\n}) {\n  const pct = Math.min(100, Math.max(0, value));\n  return (\n    <ProgressPrimitive.Root\n      value={pct}\n      aria-label={label}\n      className={cn(\n        \"relative w-full overflow-hidden rounded-full bg-[var(--kit-track)]\",\n        size === \"sm\" ? \"h-1\" : \"h-1.5\",\n        className,\n      )}\n    >\n      <ProgressPrimitive.Indicator\n        className={cn(\"h-full rounded-full transition-[width] duration-500 ease-[var(--kit-ease-out-soft)]\", progressTones[tone])}\n        style={{ width: `${pct}%` }}\n      />\n    </ProgressPrimitive.Root>\n  );\n}\n"],"mappings":"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"}

package/{ui → dist/ui}/display.d.ts

@@ -30,12 +30,20 @@ export declare const statusMap: Record<PublishStatus, {
     label: string;
     tone: BadgeTone;
 }>;
-export declare function StatusPill({ status, label, className, size, }: {
+export declare function StatusPill({ status, label, tone, className, size, }: {
     status: PublishStatus;
     label?: string;
+    /** Transition prop: live-preview's pre-D72 `pageStatus.ts` keeps its "Edited" amber pill. Remove when it adopts D72. */
+    tone?: BadgeTone;
     className?: string;
     size?: BadgeSize;
 }): import("react/jsx-runtime").JSX.Element;
+export type MarkStatus = "published" | "changed" | "held" | "draft" | "scheduled" | "review" | "archived";
+export declare function StatusMark({ status, at, className }: {
+    status: MarkStatus;
+    at?: string;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
 export declare function Kbd({ className, ...props }: React.HTMLAttributes<HTMLElement>): import("react/jsx-runtime").JSX.Element;
 /** The person's avatar colour as a CSS value (the light hex is the fallback outside a kit scope). */
 export declare function colorFor(seed: string): string;
@@ -91,8 +99,7 @@ export declare function Separator({ vertical, className }: {
     vertical?: boolean;
     className?: string;
 }): import("react/jsx-runtime").JSX.Element;
-/** V2 .skeleton: a --skeleton → --skeleton-shine sweep (800px wide, 1.6s linear; keyframe kit-shimmer in kit.css). */
-export declare const SKELETON = "bg-[linear-gradient(90deg,var(--kit-skeleton)_0,var(--kit-skeleton-shine)_40%,var(--kit-skeleton)_80%)] bg-[length:800px_100%] animate-[kit-shimmer_1.6s_linear_infinite] motion-reduce:animate-none";
+/** V2 .skeleton: a --kit-skeleton → --kit-skeleton-shine sweep (800px wide, 1.6s linear; keyframe kit-shimmer in kit.css). */
 export declare function Skeleton({ className }: {
     className?: string;
 }): import("react/jsx-runtime").JSX.Element;

package/{ui → dist/ui}/display.js

@@ -1,9 +1,11 @@
 import { cn } from "../lib/cn.js";
 import { HintTooltip } from "./button.js";
+import { Tooltip } from "./overlay.js";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Avatar } from "@base-ui/react/avatar";
-//#region src/kit/ui/display.tsx
+import { IconClock } from "@tabler/icons-react";
+import { Avatar as Avatar$1 } from "@base-ui/react/avatar";
+//#region src/ui/display.tsx
 var badgeTones = {
 	neutral: "bg-kit-muted text-kit-fg-2",
 	outline: "border border-kit-line bg-kit-control-bg text-kit-fg-2",
@@ -20,7 +22,7 @@ var badgeSizes = {
 	lg: "h-6 px-2 text-kit-xs"
 };
 function badgeVariants({ tone, size } = {}) {
-	return cn("inline-flex shrink-0 items-center gap-1 whitespace-nowrap rounded-kit-sm font-medium [&_svg]:size-3", badgeTones[tone ?? "neutral"], badgeSizes[size ?? "md"]);
+	return cn("inline-flex shrink-0 items-center gap-1 whitespace-nowrap rounded-kit-sm font-medium transition-colors duration-150 ease-out [&_svg]:size-3", badgeTones[tone ?? "neutral"], badgeSizes[size ?? "md"]);
 }
 function Badge({ className, tone, size, dot, children, ...props }) {
 	return /* @__PURE__ */ jsxs("span", {
@@ -48,13 +50,15 @@ var statusMap = {
 		label: "Draft",
 		tone: "neutral"
 	},
+	/** D72: still Published; unpublished changes are a fact about it (StatusMark's amber dot), never a status of their own. */
 	changed: {
-		label: "Edited",
-		tone: "warning"
+		label: "Published",
+		tone: "success"
 	},
+	/** D53: live, with changes kept as draft (left out of whole-site publishes). */
 	held: {
-		label: "Edits held",
-		tone: "neutral"
+		label: "Published",
+		tone: "success"
 	},
 	scheduled: {
 		label: "Scheduled",
@@ -81,26 +85,49 @@ var statusMap = {
 		tone: "neutral"
 	}
 };
-function StatusPill({ status, label, className, size = "md" }) {
+function StatusPill({ status, label, tone, className, size = "md" }) {
 	const s = statusMap[status];
 	return /* @__PURE__ */ jsxs(Badge, {
-		tone: s.tone,
+		tone: tone ?? s.tone,
 		size,
 		className,
 		children: [/* @__PURE__ */ jsx("span", {
 			"aria-hidden": true,
 			"data-pulse": status === "building" || status === "live" ? "" : void 0,
-			className: cn("size-1.5 rounded-full bg-current", (status === "building" || status === "live") && "animate-[kit-pulse-dot_1.8s_ease-in-out_infinite] motion-reduce:animate-none")
+			className: cn("size-1.5 rounded-full bg-current", (status === "building" || status === "live") && "animate-kit-pulse-dot")
 		}), label ?? s.label]
 	});
 }
+var shortDate = (iso) => new Date(iso).toLocaleDateString("en-GB", {
+	day: "numeric",
+	month: "short"
+});
+function StatusMark({ status, at, className }) {
+	const label = `${status === "changed" || status === "held" ? "Published, with unpublished changes" : statusMap[status].label}${at ? ` · Edited ${shortDate(at)}` : ""}`;
+	const mark = status === "published" ? /* @__PURE__ */ jsx("span", { className: "size-2 rounded-full bg-kit-success" }) : status === "changed" || status === "held" ? /* @__PURE__ */ jsx("span", {
+		className: "relative size-2 rounded-full bg-kit-success",
+		children: /* @__PURE__ */ jsx("span", { className: "absolute -right-1 -top-1 size-1.5 rounded-full bg-kit-warning ring-2 ring-kit-surface" })
+	}) : status === "scheduled" ? /* @__PURE__ */ jsx(IconClock, {
+		className: "size-3 text-kit-info-fg",
+		stroke: 2
+	}) : status === "review" ? /* @__PURE__ */ jsx("span", { className: "size-[7px] rotate-45 rounded-[1px] bg-kit-info" }) : status === "archived" ? /* @__PURE__ */ jsx("span", { className: "size-2 rounded-kit-xs border border-kit-fg-4" }) : /* @__PURE__ */ jsx("span", { className: "size-2 rounded-full border-[1.5px] border-kit-fg-4" });
+	return /* @__PURE__ */ jsx(Tooltip, {
+		content: label,
+		children: /* @__PURE__ */ jsx("span", {
+			role: "img",
+			"aria-label": label,
+			className: cn("flex size-4 shrink-0 items-center justify-center", className),
+			children: mark
+		})
+	});
+}
 function Kbd({ className, ...props }) {
 	return /* @__PURE__ */ jsx("kbd", {
 		className: cn("inline-flex h-5 min-w-5 items-center justify-center rounded-kit-sm border border-[var(--kit-kbd-line)] bg-[var(--kit-kbd)] px-1 font-kit-sans text-kit-2xs font-medium text-kit-fg-2 shadow-[inset_0_-1px_0_var(--kit-kbd-line)]", className),
 		...props
 	});
 }
-var AVATAR_LIGHT = [
+var avatarPalette = [
 	"#c2410c",
 	"#be185d",
 	"#7e22ce",
@@ -111,30 +138,12 @@ var AVATAR_LIGHT = [
 	"#0369a1",
 	"#a21caf",
 	"#6d28d9"
-];
-var avatarPalette = AVATAR_LIGHT.map((hex, i) => `var(--kit-avatar-${i + 1}, ${hex})`);
-/** One literal class per slot (Tailwind only sees whole class names); kit.css swaps the tone in dark. */
-var AVATAR_BG = [
-	"bg-[var(--kit-avatar-1)]",
-	"bg-[var(--kit-avatar-2)]",
-	"bg-[var(--kit-avatar-3)]",
-	"bg-[var(--kit-avatar-4)]",
-	"bg-[var(--kit-avatar-5)]",
-	"bg-[var(--kit-avatar-6)]",
-	"bg-[var(--kit-avatar-7)]",
-	"bg-[var(--kit-avatar-8)]",
-	"bg-[var(--kit-avatar-9)]",
-	"bg-[var(--kit-avatar-10)]"
-];
-var AVATAR_ON = "text-[var(--kit-avatar-on)]";
-function slotFor(seed) {
-	let h = 0;
-	for (let i = 0; i < seed.length; i++) h = h * 31 + seed.charCodeAt(i) >>> 0;
-	return h % AVATAR_LIGHT.length;
-}
+].map((hex, i) => `var(--kit-avatar-${i + 1}, ${hex})`);
 /** The person's avatar colour as a CSS value (the light hex is the fallback outside a kit scope). */
 function colorFor(seed) {
-	return avatarPalette[slotFor(seed)];
+	let h = 0;
+	for (let i = 0; i < seed.length; i++) h = h * 31 + seed.charCodeAt(i) >>> 0;
+	return avatarPalette[h % avatarPalette.length];
 }
 function initials(name) {
 	return name.split(/\s+/).map((p) => p[0]).slice(0, 2).join("").toUpperCase();
@@ -143,7 +152,7 @@ function initials(name) {
 function avatarRingSpread({ ring, ringWidth = 2, ringAccent }) {
 	return ring ? ringWidth + (ringAccent ? 1 : 0) : 0;
 }
-function Avatar$1({ name, src, size = 24, className, ring, ringWidth = 2, ringAccent, square, status, decorative }) {
+function Avatar({ name, src, size = 24, className, ring, ringWidth = 2, ringAccent, square, status, decorative }) {
 	const spread = avatarRingSpread({
 		ring,
 		ringWidth,
@@ -152,22 +161,25 @@ function Avatar$1({ name, src, size = 24, className, ring, ringWidth = 2, ringAc
 	return /* @__PURE__ */ jsxs("span", {
 		className: "relative inline-flex shrink-0",
 		style: spread ? { padding: spread } : void 0,
-		children: [/* @__PURE__ */ jsxs(Avatar.Root, {
+		children: [/* @__PURE__ */ jsxs(Avatar$1.Root, {
 			style: {
 				width: size,
 				height: size,
 				boxShadow: ring ? `0 0 0 ${ringWidth}px ${ring}${ringAccent ? `, 0 0 0 ${ringWidth + 1}px ${ringAccent}` : ""}` : void 0
 			},
 			className: cn("inline-flex select-none items-center justify-center overflow-hidden bg-kit-muted", square ? "rounded-kit-md" : "rounded-full", className),
-			children: [src ? /* @__PURE__ */ jsx(Avatar.Image, {
+			children: [src ? /* @__PURE__ */ jsx(Avatar$1.Image, {
 				src,
 				alt: decorative ? "" : name,
 				className: "size-full object-cover"
-			}) : null, /* @__PURE__ */ jsx(Avatar.Fallback, {
+			}) : null, /* @__PURE__ */ jsx(Avatar$1.Fallback, {
 				delay: src ? 300 : void 0,
 				"aria-hidden": decorative || void 0,
-				style: { fontSize: Math.max(9, Math.round(size * .4)) },
-				className: cn("flex size-full items-center justify-center font-semibold", AVATAR_BG[slotFor(name)], AVATAR_ON),
+				style: {
+					background: colorFor(name),
+					fontSize: Math.max(9, Math.round(size * .4))
+				},
+				className: "flex size-full items-center justify-center font-semibold text-kit-avatar-on",
 				children: initials(name)
 			})]
 		}), status ? /* @__PURE__ */ jsx("span", {
@@ -183,7 +195,7 @@ function Avatar$1({ name, src, size = 24, className, ring, ringWidth = 2, ringAc
 * AvatarStack (D34). Same-size faces, 25% overlap, a 2px box-shadow ring in the colour of the surface the stack
 * sits on; first face on top; a +N pill names the rest on hover.
 */
-function AvatarStack({ people, max = 4, size = 24, ringColor = "var(--kit-avatar-ring, var(--kit-surface))", className, label }) {
+function AvatarStack({ people, max = 4, size = 24, ringColor = "var(--kit-avatar-ring)", className, label }) {
 	const shown = people.slice(0, max);
 	const hidden = people.slice(shown.length);
 	const step = Math.round(size * .25);
@@ -208,7 +220,7 @@ function AvatarStack({ people, max = 4, size = 24, ringColor = "var(--kit-avatar
 					height: box
 				},
 				className: slot,
-				children: /* @__PURE__ */ jsx(Avatar$1, {
+				children: /* @__PURE__ */ jsx(Avatar, {
 					name: p.name,
 					src: p.src,
 					size,
@@ -277,12 +289,11 @@ function Separator({ vertical, className }) {
 		className: cn(vertical ? "h-4 w-px bg-kit-line" : "h-px w-full bg-kit-line", className)
 	});
 }
-/** V2 .skeleton: a --skeleton → --skeleton-shine sweep (800px wide, 1.6s linear; keyframe kit-shimmer in kit.css). */
-var SKELETON = "bg-[linear-gradient(90deg,var(--kit-skeleton)_0,var(--kit-skeleton-shine)_40%,var(--kit-skeleton)_80%)] bg-[length:800px_100%] animate-[kit-shimmer_1.6s_linear_infinite] motion-reduce:animate-none";
+/** V2 .skeleton: a --kit-skeleton → --kit-skeleton-shine sweep (800px wide, 1.6s linear; keyframe kit-shimmer in kit.css). */
 function Skeleton({ className }) {
 	return /* @__PURE__ */ jsx("div", {
 		"aria-hidden": true,
-		className: cn(SKELETON, "rounded-kit-md", className)
+		className: cn("skeleton rounded-kit-md", className)
 	});
 }
 function EmptyState({ icon, title, description, actions, className, compact }) {
@@ -435,10 +446,10 @@ function Dot({ tone = "success", pulse, className }) {
 	const c = dotTones[tone];
 	return /* @__PURE__ */ jsxs("span", {
 		className: cn("relative inline-flex size-2 shrink-0", className),
-		children: [pulse ? /* @__PURE__ */ jsx("span", { className: cn("absolute inset-0 animate-ping rounded-full opacity-50 motion-reduce:animate-none", c) }) : null, /* @__PURE__ */ jsx("span", { className: cn("relative inline-flex size-2 rounded-full", c) })]
+		children: [pulse ? /* @__PURE__ */ jsx("span", { className: cn("absolute inset-0 animate-ping rounded-full opacity-50", c) }) : null, /* @__PURE__ */ jsx("span", { className: cn("relative inline-flex size-2 rounded-full", c) })]
 	});
 }
 //#endregion
-export { Avatar$1 as Avatar, AvatarStack, Badge, Card, CardHeader, Dot, EmptyState, Kbd, PageHeader, SKELETON, Separator, SettingsSection, Skeleton, Stat, StatusPill, Table, Td, Th, Tr, avatarRingSpread, badgeVariants, colorFor, initials, statusMap };
+export { Avatar, AvatarStack, Badge, Card, CardHeader, Dot, EmptyState, Kbd, PageHeader, Separator, SettingsSection, Skeleton, Stat, StatusMark, StatusPill, Table, Td, Th, Tr, avatarRingSpread, badgeVariants, colorFor, initials, statusMap };
 
 //# sourceMappingURL=display.js.map

package/dist/ui/display.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"display.js","names":[],"sources":["../../src/ui/display.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Avatar as AvatarPrimitive } from \"@base-ui/react/avatar\";\nimport { cn } from \"../lib/cn\";\nimport { IconClock } from \"@tabler/icons-react\";\nimport { HintTooltip } from \"./button\";\nimport { Tooltip } from \"./overlay\";\n\n/* ── Badge ─────────────────────────────────────────────────────────────── */\nconst badgeTones = {\n  neutral: \"bg-kit-muted text-kit-fg-2\",\n  outline: \"border border-kit-line bg-kit-control-bg text-kit-fg-2\",\n  accent: \"bg-kit-accent-soft text-kit-accent-fg\",\n  success: \"bg-kit-success-soft text-kit-success-fg\",\n  warning: \"bg-kit-warning-soft text-kit-warning-fg\",\n  danger: \"bg-kit-danger-soft text-kit-danger-fg\",\n  info: \"bg-kit-info-soft text-kit-info-fg\",\n  // --chip-ink: calm in dark (#343437, = selected), not a white slab\n  ink: \"bg-[var(--kit-chip-ink-bg)] text-[var(--kit-chip-ink-fg)]\",\n};\nconst badgeSizes = { sm: \"h-[18px] px-1.5 text-kit-2xs\", md: \"h-5 px-1.5 text-kit-xs\", lg: \"h-6 px-2 text-kit-xs\" };\nexport type BadgeTone = keyof typeof badgeTones;\nexport type BadgeSize = keyof typeof badgeSizes;\n\nexport function badgeVariants({ tone, size }: { tone?: BadgeTone | null; size?: BadgeSize | null } = {}) {\n  return cn(\n    \"inline-flex shrink-0 items-center gap-1 whitespace-nowrap rounded-kit-sm font-medium transition-colors duration-150 ease-out [&_svg]:size-3\",\n    badgeTones[tone ?? \"neutral\"],\n    badgeSizes[size ?? \"md\"],\n  );\n}\n\nexport function Badge({\n  className,\n  tone,\n  size,\n  dot,\n  children,\n  ...props\n}: React.HTMLAttributes<HTMLSpanElement> & { tone?: BadgeTone | null; size?: BadgeSize | null; dot?: boolean }) {\n  return (\n    <span className={cn(badgeVariants({ tone, size }), className)} {...props}>\n      {dot ? <span aria-hidden className=\"size-1.5 rounded-full bg-current\" /> : null}\n      {children}\n    </span>\n  );\n}\n\n/* ── Status pill: the single source for publish states ─────────────────── */\nexport type PublishStatus =\n  | \"published\"\n  | \"draft\"\n  | \"changed\"\n  | \"held\"\n  | \"scheduled\"\n  | \"review\"\n  | \"archived\"\n  | \"error\"\n  | \"building\"\n  | \"live\"\n  | \"offline\";\nexport const statusMap: Record<PublishStatus, { label: string; tone: BadgeTone }> = {\n  published: { label: \"Published\", tone: \"success\" },\n  live: { label: \"Live\", tone: \"success\" },\n  draft: { label: \"Draft\", tone: \"neutral\" },\n  /** D72: still Published; unpublished changes are a fact about it (StatusMark's amber dot), never a status of their own. */\n  changed: { label: \"Published\", tone: \"success\" },\n  /** D53: live, with changes kept as draft (left out of whole-site publishes). */\n  held: { label: \"Published\", tone: \"success\" },\n  scheduled: { label: \"Scheduled\", tone: \"info\" },\n  review: { label: \"In review\", tone: \"info\" },\n  archived: { label: \"Archived\", tone: \"outline\" },\n  error: { label: \"Failed\", tone: \"danger\" },\n  building: { label: \"Building\", tone: \"info\" },\n  offline: { label: \"Offline\", tone: \"neutral\" },\n};\nexport function StatusPill({\n  status,\n  label,\n  tone,\n  className,\n  size = \"md\",\n}: {\n  status: PublishStatus;\n  label?: string;\n  /** Transition prop: live-preview's pre-D72 `pageStatus.ts` keeps its \"Edited\" amber pill. Remove when it adopts D72. */\n  tone?: BadgeTone;\n  className?: string;\n  size?: BadgeSize;\n}) {\n  const s = statusMap[status];\n  return (\n    <Badge tone={tone ?? s.tone} size={size} className={className}>\n      <span\n        aria-hidden\n        data-pulse={status === \"building\" || status === \"live\" ? \"\" : undefined}\n        className={cn(\n          \"size-1.5 rounded-full bg-current\",\n          // V2 pulse-dot: opacity 1 → .45 and scale 1 → .85, 1.8s ease-in-out (keyframe kit-pulse-dot in kit.css)\n          (status === \"building\" || status === \"live\") && \"animate-kit-pulse-dot\",\n        )}\n      />\n      {label ?? s.label}\n    </Badge>\n  );\n}\n\n/* ── Status mark: a row's publish state as a 16px glyph (V2 nav/panes.tsx StatusMark) ── */\nexport type MarkStatus = \"published\" | \"changed\" | \"held\" | \"draft\" | \"scheduled\" | \"review\" | \"archived\";\nconst shortDate = (iso: string) => new Date(iso).toLocaleDateString(\"en-GB\", { day: \"numeric\", month: \"short\" });\nexport function StatusMark({ status, at, className }: { status: MarkStatus; at?: string; className?: string }) {\n  const label = `${status === \"changed\" || status === \"held\" ? \"Published, with unpublished changes\" : statusMap[status].label}${at ? ` · Edited ${shortDate(at)}` : \"\"}`;\n  const mark =\n    status === \"published\" ? (\n      <span className=\"size-2 rounded-full bg-kit-success\" />\n    ) : status === \"changed\" || status === \"held\" ? (\n      // still Published; unpublished changes are a fact about it, shown as a small amber dot, never a status of their own\n      <span className=\"relative size-2 rounded-full bg-kit-success\"><span className=\"absolute -right-1 -top-1 size-1.5 rounded-full bg-kit-warning ring-2 ring-kit-surface\" /></span>\n    ) : status === \"scheduled\" ? (\n      <IconClock className=\"size-3 text-kit-info-fg\" stroke={2} />\n    ) : status === \"review\" ? (\n      // §E1.9: In review wears the info tone everywhere (V2 code drew the accent)\n      <span className=\"size-[7px] rotate-45 rounded-[1px] bg-kit-info\" />\n    ) : status === \"archived\" ? (\n      <span className=\"size-2 rounded-kit-xs border border-kit-fg-4\" />\n    ) : (\n      <span className=\"size-2 rounded-full border-[1.5px] border-kit-fg-4\" />\n    );\n  return (\n    <Tooltip content={label}>\n      <span role=\"img\" aria-label={label} className={cn(\"flex size-4 shrink-0 items-center justify-center\", className)}>\n        {mark}\n      </span>\n    </Tooltip>\n  );\n}\n\n/* ── Kbd ───────────────────────────────────────────────────────────────── */\nexport function Kbd({ className, ...props }: React.HTMLAttributes<HTMLElement>) {\n  return (\n    <kbd\n      className={cn(\n        \"inline-flex h-5 min-w-5 items-center justify-center rounded-kit-sm border border-[var(--kit-kbd-line)] bg-[var(--kit-kbd)] px-1 font-kit-sans text-kit-2xs font-medium text-kit-fg-2 shadow-[inset_0_-1px_0_var(--kit-kbd-line)]\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/* ── Avatar (used by TrayMeta) ─────────────────────────────────────────── */\n// --kit-avatar-1…10: deep tones with white initials in light, calm lifted tones with dark initials in dark\n// (--kit-avatar-on, ≥ 5:1 both), declared in index.css. colorFor() keeps the light hex as a fallback for a value used outside a kit scope.\nconst AVATAR_LIGHT = [\"#c2410c\", \"#be185d\", \"#7e22ce\", \"#4338ca\", \"#1d4ed8\", \"#047857\", \"#b45309\", \"#0369a1\", \"#a21caf\", \"#6d28d9\"];\nconst avatarPalette = AVATAR_LIGHT.map((hex, i) => `var(--kit-avatar-${i + 1}, ${hex})`);\n/** The person's avatar colour as a CSS value (the light hex is the fallback outside a kit scope). */\nexport function colorFor(seed: string) {\n  let h = 0;\n  for (let i = 0; i < seed.length; i++) h = (h * 31 + seed.charCodeAt(i)) >>> 0;\n  return avatarPalette[h % avatarPalette.length];\n}\nexport function initials(name: string) {\n  return name\n    .split(/\\s+/)\n    .map((p) => p[0])\n    .slice(0, 2)\n    .join(\"\")\n    .toUpperCase();\n}\n/** How far an Avatar's box-shadow ring reaches past the face (0 without a ring). The Avatar pads itself by this. */\nexport function avatarRingSpread({ ring, ringWidth = 2, ringAccent }: { ring?: string; ringWidth?: number; ringAccent?: string }) {\n  return ring ? ringWidth + (ringAccent ? 1 : 0) : 0;\n}\nexport function Avatar({\n  name,\n  src,\n  size = 24,\n  className,\n  ring,\n  ringWidth = 2,\n  ringAccent,\n  square,\n  status,\n  decorative,\n}: {\n  name: string;\n  /** a11y: true when the person's name is already shown as text next to the avatar */\n  decorative?: boolean;\n  src?: string;\n  size?: number;\n  className?: string;\n  /** separating ring colour, drawn as box-shadow so the image keeps its full size (D34) */\n  ring?: string;\n  ringWidth?: number;\n  /** optional 1px outer ring outside `ring` (e.g. a presence colour) */\n  ringAccent?: string;\n  square?: boolean;\n  status?: \"online\" | \"away\" | \"offline\";\n}) {\n  // The ring is a box-shadow, which paints OUTSIDE the element's box. The wrapper reserves that band with padding, so\n  // the face and ring sit wholly inside the avatar's layout box and a clipping ancestor never shaves them.\n  const spread = avatarRingSpread({ ring, ringWidth, ringAccent });\n  return (\n    <span className=\"relative inline-flex shrink-0\" style={spread ? { padding: spread } : undefined}>\n      <AvatarPrimitive.Root\n        style={{\n          width: size,\n          height: size,\n          boxShadow: ring ? `0 0 0 ${ringWidth}px ${ring}${ringAccent ? `, 0 0 0 ${ringWidth + 1}px ${ringAccent}` : \"\"}` : undefined,\n        }}\n        className={cn(\n          \"inline-flex select-none items-center justify-center overflow-hidden bg-kit-muted\",\n          square ? \"rounded-kit-md\" : \"rounded-full\",\n          className,\n        )}\n      >\n        {src ? <AvatarPrimitive.Image src={src} alt={decorative ? \"\" : name} className=\"size-full object-cover\" /> : null}\n        <AvatarPrimitive.Fallback\n          delay={src ? 300 : undefined}\n          aria-hidden={decorative || undefined}\n          style={{ background: colorFor(name), fontSize: Math.max(9, Math.round(size * 0.4)) }}\n          className=\"flex size-full items-center justify-center font-semibold text-kit-avatar-on\"\n        >\n          {initials(name)}\n        </AvatarPrimitive.Fallback>\n      </AvatarPrimitive.Root>\n      {status ? (\n        <span\n          // inside the box (never -1px outside it), offset past any reserved ring band\n          style={spread ? { right: spread, bottom: spread } : undefined}\n          className={cn(\n            \"absolute bottom-0 right-0 size-2.5 rounded-full border-2 border-kit-surface\",\n            status === \"online\" ? \"bg-kit-success\" : status === \"away\" ? \"bg-kit-warning\" : \"bg-kit-fg-4\",\n          )}\n        />\n      ) : null}\n    </span>\n  );\n}\n\n/**\n * AvatarStack (D34). Same-size faces, 25% overlap, a 2px box-shadow ring in the colour of the surface the stack\n * sits on; first face on top; a +N pill names the rest on hover.\n */\nexport function AvatarStack({\n  people,\n  max = 4,\n  size = 24,\n  ringColor = \"var(--kit-avatar-ring)\",\n  className,\n  label,\n}: {\n  people: { name: string; src?: string; color?: string }[];\n  max?: number;\n  size?: number;\n  ringColor?: string;\n  className?: string;\n  label?: string;\n}) {\n  const shown = people.slice(0, max);\n  const hidden = people.slice(shown.length);\n  const step = Math.round(size * 0.25);\n  const band = avatarRingSpread({ ring: ringColor });\n  const box = size + band * 2;\n  const vars = {\n    \"--stack-ov\": `-${step + band * 2}px`,\n    \"--stack-ov-open\": `-${Math.max(1, Math.round(step * 0.35)) + band * 2}px`,\n  } as React.CSSProperties;\n  const slot =\n    \"relative inline-flex shrink-0 rounded-full transition-[margin,transform] duration-150 ease-out [&:not(:first-child)]:ml-[var(--stack-ov)] group-hover/stack:[&:not(:first-child)]:ml-[var(--stack-ov-open)] hover:!z-30 hover:-translate-y-0.5 motion-reduce:transition-none\";\n  return (\n    <div\n      role=\"group\"\n      aria-label={label ?? `${people.length} ${people.length === 1 ? \"person\" : \"people\"}: ${people.map((p) => p.name).join(\", \")}`}\n      style={vars}\n      className={cn(\"group/stack isolate flex shrink-0 items-center\", className)}\n    >\n      {shown.map((p, i) => (\n        <HintTooltip key={p.name + i} content={p.name}>\n          <span style={{ zIndex: shown.length - i + 1, width: box, height: box }} className={slot}>\n            <Avatar name={p.name} src={p.src} size={size} ring={ringColor} decorative />\n          </span>\n        </HintTooltip>\n      ))}\n      {hidden.length ? (\n        <HintTooltip content={hidden.map((p) => p.name).join(\", \")}>\n          <span style={{ zIndex: 1, width: box, height: box, padding: band }} className={slot}>\n            <span\n              style={{ width: size, height: size, boxShadow: `0 0 0 ${band}px ${ringColor}`, fontSize: Math.max(9, Math.round(size * 0.38)) }}\n              className=\"inline-flex items-center justify-center rounded-full bg-kit-muted font-medium leading-none tabular-nums text-kit-fg-2\"\n            >\n              +{hidden.length}\n            </span>\n          </span>\n        </HintTooltip>\n      ) : null}\n    </div>\n  );\n}\n\n/* ── Card ──────────────────────────────────────────────────────────────── */\nexport function Card({ className, interactive, ...props }: React.HTMLAttributes<HTMLDivElement> & { interactive?: boolean }) {\n  return (\n    <div\n      className={cn(\n        \"rounded-kit-xl border border-kit-line bg-kit-surface\",\n        interactive && \"cursor-pointer transition-[border-color,box-shadow,transform] duration-150 hover:border-kit-line-strong hover:shadow-kit-md\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\nexport function CardHeader({\n  title,\n  description,\n  actions,\n  icon,\n  className,\n}: {\n  title: React.ReactNode;\n  description?: React.ReactNode;\n  actions?: React.ReactNode;\n  icon?: React.ReactNode;\n  className?: string;\n}) {\n  return (\n    <div className={cn(\"flex items-start justify-between gap-3 px-4 pt-4\", className)}>\n      <div className=\"flex min-w-0 items-start gap-2.5\">\n        {icon ? <span className=\"mt-0.5 flex text-kit-fg-2 [&_svg]:size-4\">{icon}</span> : null}\n        <div className=\"min-w-0\">\n          <h2 className=\"text-kit-base font-semibold text-kit-fg\">{title}</h2>\n          {description ? <p className=\"mt-0.5 text-kit-sm text-kit-fg-2\">{description}</p> : null}\n        </div>\n      </div>\n      {actions ? <div className=\"flex shrink-0 items-center gap-1.5\">{actions}</div> : null}\n    </div>\n  );\n}\n\n/* ── Separator ─────────────────────────────────────────────────────────── */\nexport function Separator({ vertical, className }: { vertical?: boolean; className?: string }) {\n  return (\n    <div\n      role=\"separator\"\n      aria-orientation={vertical ? \"vertical\" : undefined}\n      className={cn(vertical ? \"h-4 w-px bg-kit-line\" : \"h-px w-full bg-kit-line\", className)}\n    />\n  );\n}\n\n/* ── Skeleton ──────────────────────────────────────────────────────────── */\n/** V2 .skeleton: a --kit-skeleton → --kit-skeleton-shine sweep (800px wide, 1.6s linear; keyframe kit-shimmer in kit.css). */\nexport function Skeleton({ className }: { className?: string }) {\n  return <div aria-hidden className={cn(\"skeleton rounded-kit-md\", className)} />;\n}\n\n/* ── Empty state ───────────────────────────────────────────────────────── */\nexport function EmptyState({\n  icon,\n  title,\n  description,\n  actions,\n  className,\n  compact,\n}: {\n  icon?: React.ReactNode;\n  title: React.ReactNode;\n  description?: React.ReactNode;\n  actions?: React.ReactNode;\n  className?: string;\n  compact?: boolean;\n}) {\n  return (\n    // D15: compact = 16px icon (no tile), two lines, one action.\n    <div className={cn(\"flex flex-col items-center justify-center text-center\", compact ? \"gap-2 py-8\" : \"gap-2.5 py-12\", className)}>\n      {icon ? <span className=\"flex text-kit-fg-3 [&_svg]:size-4\">{icon}</span> : null}\n      <div className=\"max-w-sm\">\n        <h2 className=\"text-kit-base font-medium text-kit-fg\">{title}</h2>\n        {description ? <p className=\"mt-0.5 text-kit-sm text-kit-fg-2\">{description}</p> : null}\n      </div>\n      {actions ? <div className=\"mt-1 flex flex-wrap items-center justify-center gap-2\">{actions}</div> : null}\n    </div>\n  );\n}\n\n/* ── Page header (inside main surface) ─────────────────────────────────── */\nexport function PageHeader({\n  title,\n  description,\n  actions,\n  meta,\n  className,\n  eyebrow,\n  as: Heading = \"h1\",\n}: {\n  title: React.ReactNode;\n  description?: React.ReactNode;\n  actions?: React.ReactNode;\n  meta?: React.ReactNode;\n  className?: string;\n  eyebrow?: React.ReactNode;\n  /** Heading level: h1 in the app; demos nested in documentation pass a lower level. */\n  as?: \"h1\" | \"h2\" | \"h3\" | \"h4\";\n}) {\n  return (\n    <div className={cn(\"flex flex-wrap items-end justify-between gap-x-6 gap-y-3\", className)}>\n      <div className=\"min-w-0\">\n        {eyebrow ? <div className=\"mb-1.5 text-kit-xs font-medium text-kit-fg-3\">{eyebrow}</div> : null}\n        <div className=\"flex items-center gap-2.5\">\n          <Heading className=\"truncate text-kit-xl font-semibold tracking-[-0.015em] text-kit-fg\">{title}</Heading>\n          {meta}\n        </div>\n        {description ? <p className=\"mt-0.5 text-kit-sm text-kit-fg-2\">{description}</p> : null}\n      </div>\n      {actions ? <div className=\"flex shrink-0 flex-wrap items-center gap-2\">{actions}</div> : null}\n    </div>\n  );\n}\n\n/** Section header used inside settings and long pages: title INSIDE the card (founder rule). */\nexport function SettingsSection({\n  title,\n  description,\n  children,\n  footer,\n  className,\n  danger,\n  actions,\n}: {\n  title: React.ReactNode;\n  description?: React.ReactNode;\n  children?: React.ReactNode;\n  footer?: React.ReactNode;\n  className?: string;\n  danger?: boolean;\n  actions?: React.ReactNode;\n}) {\n  return (\n    <section className={cn(\"overflow-hidden rounded-kit-xl border bg-kit-surface\", danger ? \"border-kit-danger-line\" : \"border-kit-line\", className)}>\n      <div className=\"flex items-start justify-between gap-4 px-5 pt-5\">\n        <div>\n          <h2 className={cn(\"text-kit-base font-semibold\", danger ? \"text-kit-danger-fg\" : \"text-kit-fg\")}>{title}</h2>\n          {description ? <p className=\"mt-0.5 max-w-xl text-kit-sm text-kit-fg-2\">{description}</p> : null}\n        </div>\n        {actions}\n      </div>\n      {children ? <div className=\"flex flex-col gap-4 px-5 pb-5 pt-4\">{children}</div> : <div className=\"h-5\" />}\n      {footer ? (\n        // --subtle-2: half a step between surface and subtle\n        <div className=\"flex items-center justify-between gap-3 border-t border-kit-line bg-[var(--kit-subtle-2)] px-5 py-3 text-kit-sm text-kit-fg-2\">\n          {footer}\n        </div>\n      ) : null}\n    </section>\n  );\n}\n\n/* ── Stat ──────────────────────────────────────────────────────────────── */\nexport function Stat({\n  label,\n  value,\n  delta,\n  hint,\n  className,\n}: {\n  label: React.ReactNode;\n  value: React.ReactNode;\n  delta?: { value: string; positive?: boolean };\n  hint?: React.ReactNode;\n  className?: string;\n}) {\n  return (\n    <div className={cn(\"flex flex-col gap-1\", className)}>\n      <span className=\"text-kit-sm text-kit-fg-2\">{label}</span>\n      <div className=\"flex items-baseline gap-2\">\n        <span className=\"text-kit-xl font-semibold tabular-nums tracking-[-0.01em] text-kit-fg\">{value}</span>\n        {delta ? (\n          <span className={cn(\"text-kit-xs font-medium tabular-nums\", delta.positive ? \"text-kit-success-fg\" : \"text-kit-danger-fg\")}>\n            {delta.positive ? \"↑\" : \"↓\"} {delta.value}\n          </span>\n        ) : null}\n      </div>\n      {hint ? <span className=\"text-kit-xs text-kit-fg-3\">{hint}</span> : null}\n    </div>\n  );\n}\n\n/* ── Table (simple, styled) ────────────────────────────────────────────── */\nexport function Table({ className, ...props }: React.TableHTMLAttributes<HTMLTableElement>) {\n  return <table className={cn(\"w-full border-separate border-spacing-0 text-kit-sm\", className)} {...props} />;\n}\nexport function Th({ className, children, ...props }: React.ThHTMLAttributes<HTMLTableCellElement>) {\n  // a11y: an icon/action column header still needs text for screen readers (empty-table-header)\n  const empty = children == null || children === false || children === \"\";\n  return (\n    <th\n      className={cn(\n        \"sticky top-0 z-[1] h-10 border-b border-kit-line bg-kit-surface px-3 text-left text-kit-sm font-normal text-kit-fg-3 first:pl-4 last:pr-4\",\n        className,\n      )}\n      {...props}\n    >\n      {empty ? <span className=\"sr-only\">{props[\"aria-label\"] ?? \"Actions\"}</span> : children}\n    </th>\n  );\n}\nexport function Td({ className, ...props }: React.TdHTMLAttributes<HTMLTableCellElement>) {\n  return <td className={cn(\"h-14 border-b border-kit-line-subtle px-3 text-kit-fg first:pl-4 last:pr-4\", className)} {...props} />;\n}\nexport function Tr({ className, selected, ...props }: React.HTMLAttributes<HTMLTableRowElement> & { selected?: boolean }) {\n  return (\n    <tr\n      data-selected={selected ? \"true\" : undefined}\n      className={cn(\"group/row transition-colors hover:bg-kit-subtle data-[selected=true]:bg-kit-accent-softer\", className)}\n      {...props}\n    />\n  );\n}\n\n/* ── Dot / live indicator ──────────────────────────────────────────────── */\nconst dotTones = {\n  success: \"bg-kit-success\",\n  warning: \"bg-kit-warning\",\n  danger: \"bg-kit-danger\",\n  neutral: \"bg-kit-fg-4\",\n  accent: \"bg-kit-accent\",\n  info: \"bg-kit-info\",\n};\nexport function Dot({ tone = \"success\", pulse, className }: { tone?: keyof typeof dotTones; pulse?: boolean; className?: string }) {\n  const c = dotTones[tone];\n  return (\n    <span className={cn(\"relative inline-flex size-2 shrink-0\", className)}>\n      {pulse ? <span className={cn(\"absolute inset-0 animate-ping rounded-full opacity-50\", c)} /> : null}\n      <span className={cn(\"relative inline-flex size-2 rounded-full\", c)} />\n    </span>\n  );\n}\n"],"mappings":"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"}

package/{ui → dist/ui}/expanded-editor-modal.d.ts

@@ -1,7 +1,7 @@
 /**
  * ExpandedEditorModal (CPO D49): the ONE surface for "expand this editor": rich-text fields (⤢ in the toolbar / label row)
  * and the table editor's Full screen. A focused dialog over a dimmed app: inset 32 to 48px from the viewport, at most 1100px
- * wide, header = breadcrumb (… › Field) + a quiet meta line (word count, rows) + Done. Esc closes (menus and popovers
+ * wide, header = breadcrumb (… › Field) + a quiet meta line (lines, rows) + Done. Esc closes (menus and popovers
  * inside close first), focus is trapped and returns to whatever opened it. The body edits the SAME value as the field
  * underneath, so both stay in sync. Inline editors stay in place; only expanded editors open here.
  * D54: a component's properties panel opens INSIDE this modal; docked, it takes the right 340px and the reading column
@@ -13,7 +13,7 @@ export interface ExpandedEditorModalProps {
     onOpenChange: (open: boolean) => void;
     /** root → current, e.g. ["Alternating feature rows", "Thin walls…", "Body"]; the last one is the title */
     crumbs: string[];
-    /** quiet right-side line in the header ("312 words", "6 rows · 4 columns") */
+    /** quiet right-side line in the header ("12 lines", "6 rows · 4 columns") */
     meta?: React.ReactNode;
     /** "reading" centres a ~720px column (rich text); "wide" uses the full dialog width (tables) */
     layout?: "reading" | "wide";

package/{ui → dist/ui}/expanded-editor-modal.js

@@ -1,17 +1,17 @@
 import { cn } from "../lib/cn.js";
-import { FLOATING_LINE, KIT_SCOPE, SURFACE_RAISED } from "./surfaces.js";
+import { KIT_SCOPE } from "./surfaces.js";
 import { MODAL_LAYER } from "./tooltip-root.js";
 import { Button } from "./button.js";
 import { FLOATING_LAYER, Tooltip } from "./overlay.js";
 import * as React from "react";
-import { IconChevronRight } from "@tabler/icons-react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { IconChevronRight } from "@tabler/icons-react";
 import { Dialog } from "@base-ui/react/dialog";
-//#region src/kit/ui/expanded-editor-modal.tsx
+//#region src/ui/expanded-editor-modal.tsx
 /**
 * ExpandedEditorModal (CPO D49): the ONE surface for "expand this editor": rich-text fields (⤢ in the toolbar / label row)
 * and the table editor's Full screen. A focused dialog over a dimmed app: inset 32 to 48px from the viewport, at most 1100px
-* wide, header = breadcrumb (… › Field) + a quiet meta line (word count, rows) + Done. Esc closes (menus and popovers
+* wide, header = breadcrumb (… › Field) + a quiet meta line (lines, rows) + Done. Esc closes (menus and popovers
 * inside close first), focus is trapped and returns to whatever opened it. The body edits the SAME value as the field
 * underneath, so both stay in sync. Inline editors stay in place; only expanded editors open here.
 * D54: a component's properties panel opens INSIDE this modal; docked, it takes the right 340px and the reading column
@@ -61,7 +61,7 @@ function ExpandedEditorModal({ open, onOpenChange, crumbs, meta, layout = "readi
 		onOpenChange: change,
 		children: /* @__PURE__ */ jsxs(Dialog.Portal, { children: [/* @__PURE__ */ jsx(Dialog.Backdrop, {
 			...KIT_SCOPE,
-			className: "fixed inset-0 z-[70] bg-kit-overlay backdrop-blur-[2px] data-[open]:animate-kit-fade-in"
+			className: "fixed inset-0 z-[var(--kit-z-expanded,70)] bg-kit-overlay backdrop-blur-[2px] data-[open]:animate-kit-fade-in"
 		}), /* @__PURE__ */ jsxs(Dialog.Popup, {
 			...KIT_SCOPE,
 			[MODAL_LAYER]: "",
@@ -82,7 +82,7 @@ function ExpandedEditorModal({ open, onOpenChange, crumbs, meta, layout = "readi
 				if (e.key !== "Escape" && e.key !== "F6") e.stopPropagation();
 			},
 			"data-expanded-editor": "",
-			className: cn("fixed inset-4 z-[71] mx-auto flex max-w-[1100px] flex-col overflow-hidden rounded-kit-xl border text-kit-fg shadow-kit-xl outline-none sm:inset-8 lg:inset-x-12 lg:inset-y-10", FLOATING_LINE, SURFACE_RAISED, "data-[floating-dock=right]:[&>[data-expanded-body]]:pr-[340px]", "data-[open]:animate-kit-pop-in"),
+			className: cn("fixed inset-4 z-[calc(var(--kit-z-expanded,70)_+_1)] mx-auto flex max-w-[1100px] flex-col overflow-hidden rounded-kit-xl border border-kit-floating-line bg-kit-surface-raised text-kit-fg shadow-kit-xl outline-none sm:inset-8 lg:inset-x-12 lg:inset-y-10", "data-[floating-dock=right]:[&>[data-expanded-body]]:pr-[340px]", "data-[open]:animate-kit-pop-in"),
 			children: [/* @__PURE__ */ jsxs("header", {
 				className: "flex h-12 shrink-0 items-center gap-2 border-b border-kit-line pl-4 pr-3",
 				children: [

package/dist/ui/expanded-editor-modal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"expanded-editor-modal.js","names":[],"sources":["../../src/ui/expanded-editor-modal.tsx"],"sourcesContent":["/**\n * ExpandedEditorModal (CPO D49): the ONE surface for \"expand this editor\": rich-text fields (⤢ in the toolbar / label row)\n * and the table editor's Full screen. A focused dialog over a dimmed app: inset 32 to 48px from the viewport, at most 1100px\n * wide, header = breadcrumb (… › Field) + a quiet meta line (lines, rows) + Done. Esc closes (menus and popovers\n * inside close first), focus is trapped and returns to whatever opened it. The body edits the SAME value as the field\n * underneath, so both stay in sync. Inline editors stay in place; only expanded editors open here.\n * D54: a component's properties panel opens INSIDE this modal; docked, it takes the right 340px and the reading column\n * shifts left (`data-floating-dock`). Esc closes that panel before the modal.\n */\nimport * as React from \"react\";\nimport { Dialog as DialogPrimitive } from \"@base-ui/react/dialog\";\nimport { IconChevronRight } from \"@tabler/icons-react\";\nimport { cn } from \"../lib/cn\";\nimport { Button } from \"./button\";\nimport { FLOATING_LAYER, Tooltip } from \"./overlay\";\nimport { KIT_SCOPE } from \"./surfaces\";\nimport { MODAL_LAYER } from \"./tooltip-root\";\n\nexport interface ExpandedEditorModalProps {\n  open: boolean;\n  onOpenChange: (open: boolean) => void;\n  /** root → current, e.g. [\"Alternating feature rows\", \"Thin walls…\", \"Body\"]; the last one is the title */\n  crumbs: string[];\n  /** quiet right-side line in the header (\"12 lines\", \"6 rows · 4 columns\") */\n  meta?: React.ReactNode;\n  /** \"reading\" centres a ~720px column (rich text); \"wide\" uses the full dialog width (tables) */\n  layout?: \"reading\" | \"wide\";\n  /** where focus lands on open (defaults to the first editable surface) */\n  initialFocus?: () => HTMLElement | null | undefined;\n  /** where focus goes on close when the opener is gone or hidden (e.g. the field's own editor) */\n  returnFocus?: () => HTMLElement | null | undefined;\n  children: React.ReactNode;\n}\n\n/** Elements inside the editor that own Escape while open (a cell with a draft, a floating layer). Menus and listboxes\n *  count only while they are OPEN popups: a list the editor always renders (tags, a static picker) never blocks Escape. */\nconst OWNS_ESCAPE = `[data-cell-editing],${FLOATING_LAYER}`;\nconst LIST = \"[role=menu],[role=listbox]\";\n\n/** An open popup: Base UI marks it data-open, Radix data-state=open; otherwise its controller says aria-expanded. */\nfunction isOpenList(el: Element) {\n  if (el.matches(\"[data-open],[data-state=open]\")) return true;\n  return !!el.id && !!document.querySelector(`[aria-controls~=\"${CSS.escape(el.id)}\"][aria-expanded=true]`);\n}\nconst openListIn = (root: ParentNode | null | undefined) => !!root && Array.from(root.querySelectorAll(LIST)).some(isOpenList);\n\nexport function ExpandedEditorModal({ open, onOpenChange, crumbs, meta, layout = \"reading\", initialFocus, returnFocus, children }: ExpandedEditorModalProps) {\n  const title = crumbs[crumbs.length - 1] ?? \"Editor\";\n  const parents = crumbs.slice(0, -1);\n  const body = React.useRef<HTMLDivElement>(null);\n  const opener = React.useRef<HTMLElement | null>(null);\n  React.useLayoutEffect(() => {\n    if (open) opener.current = document.activeElement as HTMLElement | null;\n  }, [open]);\n\n  const change = (next: boolean, details: DialogPrimitive.Root.ChangeEventDetails) => {\n    if (!next && details.reason === \"outside-press\") {\n      // the editor's own floating layers (selection toolbar, slash menu) are portalled to <body>, outside this dialog:\n      // clicks there belong to the editor, so they never close the modal\n      const t = details.event.target;\n      if (t instanceof Element && t.closest(FLOATING_LAYER)) return details.cancel();\n    }\n    if (!next && details.reason === \"escape-key\") {\n      const e = details.event;\n      const t = e.target instanceof Element ? e.target : null;\n      // an open slash menu / block picker inside the editor, or a floating menu over it, closes first\n      const list = t?.closest(LIST);\n      const inner = openListIn(body.current) || Array.from(document.querySelectorAll(FLOATING_LAYER)).some(openListIn);\n      if (e.defaultPrevented || t?.closest(OWNS_ESCAPE) || (list && isOpenList(list)) || inner) return details.cancel();\n      // then a component's properties panel open in here (D54): it closes, the modal stays\n      const panel = body.current?.parentElement?.querySelector(\"[data-floating-panel]\");\n      if (panel) {\n        details.cancel();\n        (e as KeyboardEvent & { bcmsPanelHandled?: boolean }).bcmsPanelHandled = true;\n        panel.dispatchEvent(new CustomEvent(\"floatingpanel:escape\"));\n        return;\n      }\n    }\n    onOpenChange(next);\n  };\n\n  return (\n    <DialogPrimitive.Root open={open} onOpenChange={change}>\n      <DialogPrimitive.Portal>\n        <DialogPrimitive.Backdrop\n          {...KIT_SCOPE}\n          className=\"fixed inset-0 z-[var(--kit-z-expanded,70)] bg-kit-overlay backdrop-blur-[2px] data-[open]:animate-kit-fade-in\"\n        />\n        <DialogPrimitive.Popup\n          {...KIT_SCOPE}\n          {...{ [MODAL_LAYER]: \"\" }}\n          aria-describedby={undefined}\n          initialFocus={() => {\n            // focus lands INSIDE at once (so the trap has a home), then moves to the editor once it has mounted.\n            // Base UI focuses the returned element in a frame of its own, so the editor waits one frame longer.\n            requestAnimationFrame(() =>\n              requestAnimationFrame(() => {\n                const el = initialFocus?.() ?? body.current?.querySelector<HTMLElement>(\"[contenteditable=true], [data-cell], input, textarea\");\n                el?.focus({ preventScroll: true });\n              }),\n            );\n            return body.current;\n          }}\n          finalFocus={() => {\n            // back to whatever opened it, or, when that is gone or hidden, to the host's fallback (the field itself)\n            const o = opener.current;\n            const target = o && o.isConnected && o !== document.body && o.getClientRects().length ? o : (returnFocus?.() ?? o);\n            requestAnimationFrame(() => target?.focus({ preventScroll: true }));\n            return false;\n          }}\n          // keys typed in the editor never reach the app behind it (canvas shortcuts, form Esc); F6 still moves to a panel\n          onKeyDown={(e) => {\n            if (e.key !== \"Escape\" && e.key !== \"F6\") e.stopPropagation();\n          }}\n          data-expanded-editor=\"\"\n          className={cn(\n            \"fixed inset-4 z-[calc(var(--kit-z-expanded,70)_+_1)] mx-auto flex max-w-[1100px] flex-col overflow-hidden rounded-kit-xl border border-kit-floating-line bg-kit-surface-raised text-kit-fg shadow-kit-xl outline-none sm:inset-8 lg:inset-x-12 lg:inset-y-10\",\n            \"data-[floating-dock=right]:[&>[data-expanded-body]]:pr-[340px]\",\n            \"data-[open]:animate-kit-pop-in\",\n          )}\n        >\n          <header className=\"flex h-12 shrink-0 items-center gap-2 border-b border-kit-line pl-4 pr-3\">\n            <nav aria-label=\"Field path\" className=\"flex min-w-0 flex-1 items-center gap-1 text-kit-sm\">\n              {parents.map((c, i) => (\n                <React.Fragment key={`${c}-${i}`}>\n                  <Tooltip content={c} side=\"bottom\">\n                    <span className=\"max-w-[220px] truncate text-kit-fg-3\">{c}</span>\n                  </Tooltip>\n                  <IconChevronRight className=\"size-3 shrink-0 text-kit-fg-4\" stroke={1.5} aria-hidden />\n                </React.Fragment>\n              ))}\n              {/* the field title names the dialog (\"Body\"), not the nav's \"Field path\" */}\n              <DialogPrimitive.Title render={<span aria-current=\"location\" />} className=\"min-w-0 truncate font-medium text-kit-fg\">\n                {title}\n              </DialogPrimitive.Title>\n            </nav>\n            {meta ? <span className=\"hidden shrink-0 text-kit-xs tabular-nums text-kit-fg-3 sm:inline\">{meta}</span> : null}\n            <DialogPrimitive.Close render={<Button size=\"sm\" variant=\"primary\" />}>Done</DialogPrimitive.Close>\n          </header>\n          <div ref={body} tabIndex={-1} data-expanded-body=\"\" className=\"min-h-0 flex-1 overflow-y-auto overscroll-contain outline-none\">\n            {layout === \"reading\" ? (\n              <div className=\"mx-auto w-full max-w-[720px] px-6 py-8 sm:px-10\">{children}</div>\n            ) : (\n              <div className=\"flex h-full min-h-0 flex-col p-4\">{children}</div>\n            )}\n          </div>\n        </DialogPrimitive.Popup>\n      </DialogPrimitive.Portal>\n    </DialogPrimitive.Root>\n  );\n}\n"],"mappings":"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"}

package/{ui → dist/ui}/field-context.js

@@ -1,5 +1,5 @@
 import * as React from "react";
-//#region src/kit/ui/field-context.ts
+//#region src/ui/field-context.ts
 var FieldIdContext = React.createContext(void 0);
 function useFieldId() {
 	return React.useContext(FieldIdContext);

package/dist/ui/field-context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"field-context.js","names":[],"sources":["../../src/ui/field-context.ts"],"sourcesContent":["import * as React from \"react\";\n\n/* The Field wrapper (input.tsx) publishes its label wiring here, so controls in other files (Switch, Select) can read it\n   without importing input.tsx. V2 keeps these contexts inside ui/input.tsx; input.tsx should import them from this file. */\n\nexport const FieldIdContext = React.createContext<string | undefined>(undefined);\nexport function useFieldId() {\n  return React.useContext(FieldIdContext);\n}\n\nexport const FieldLabelledByContext = React.createContext<string | undefined>(undefined);\nexport function useFieldLabelledBy() {\n  return React.useContext(FieldLabelledByContext);\n}\n\nexport const FieldDescribedByContext = React.createContext<string | undefined>(undefined);\nexport function useFieldDescribedBy() {\n  return React.useContext(FieldDescribedByContext);\n}\n\n/* `<label for>` without a <label> element. V2 draws no label on an inline-list row, so the row publishes its sr-only\n   name here and the kit control whose id is `htmlFor` (Input, Textarea, Select, Switch, Checkbox) points its\n   aria-labelledby at `labelId`, unless the control carries its own aria-label / aria-labelledby. */\nexport const FieldLabelForContext = React.createContext<{ htmlFor: string; labelId: string } | undefined>(undefined);\nexport function useLabelFor(id: string | undefined) {\n  const ctx = React.useContext(FieldLabelForContext);\n  return ctx && id && ctx.htmlFor === id ? ctx.labelId : undefined;\n}\n"],"mappings":";;AAKA,IAAa,iBAAiB,MAAM,cAAkC,KAAA,CAAS;AAC/E,SAAgB,aAAa;CAC3B,OAAO,MAAM,WAAW,cAAc;AACxC;AAEA,IAAa,yBAAyB,MAAM,cAAkC,KAAA,CAAS;AACvF,SAAgB,qBAAqB;CACnC,OAAO,MAAM,WAAW,sBAAsB;AAChD;AAEA,IAAa,0BAA0B,MAAM,cAAkC,KAAA,CAAS;AACxF,SAAgB,sBAAsB;CACpC,OAAO,MAAM,WAAW,uBAAuB;AACjD;AAKA,IAAa,uBAAuB,MAAM,cAAgE,KAAA,CAAS;AACnH,SAAgB,YAAY,IAAwB;CAClD,MAAM,MAAM,MAAM,WAAW,oBAAoB;CACjD,OAAO,OAAO,MAAM,IAAI,YAAY,KAAK,IAAI,UAAU,KAAA;AACzD"}

package/{ui → dist/ui}/floating-panel.d.ts

@@ -24,7 +24,7 @@ import { type MotionValue } from "framer-motion";
 export declare const NAV = 56;
 export declare const SNAP = 16;
 export declare const EDGE = 16;
-export declare const Z_FLOAT = "z-[52]";
+export declare const Z_FLOAT = "z-[var(--kit-z-float,52)]";
 export declare const EASE: readonly [0.32, 0.72, 0, 1];
 export type Rect = {
     x: number;