@bettercms-ai/kit 0.1.1 → 2.0.0

package/dist/theme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.js","names":[],"sources":["../src/theme.tsx"],"sourcesContent":["/**\n * `@bettercms-ai/kit/theme`: the light/dark scheme for a kit surface outside the dashboard (a custom dock input's\n * iframe, a standalone page). Dark is `.dark` on an ancestor (tokens.css `.dark`), kit islands are `data-kit-scope`.\n *\n * The scheme belongs to the document: portalled layers (popovers, tooltips, toasts) mount on <body>, so a dark island\n * inside a light document would render its layers light. A scheme is therefore applied to the document element, never\n * to the island. The mismatch warning and the rest of the KitRoot contract are spec'd in kit-ports-spec.md §5.\n */\nimport { useLayoutEffect, type ReactNode } from \"react\";\nimport { KIT_SCOPE } from \"./ui/surfaces\";\n\nexport type KitScheme = \"light\" | \"dark\";\n\n/** Puts `scheme` on `root`: `.dark` on or off, and the native color-scheme. */\nexport function applyScheme(root: HTMLElement, scheme: KitScheme): void {\n  root.classList.toggle(\"dark\", scheme === \"dark\");\n  root.style.colorScheme = scheme;\n}\n\nexport interface KitRootProps {\n  children?: ReactNode;\n  /** \"inherit\" (default) keeps the document's scheme; light / dark applies it to the document element */\n  scheme?: KitScheme | \"inherit\";\n  /** \"surface\" paints bg-kit-surface (the default); \"transparent\" lets a host-provided surface show through */\n  surface?: \"surface\" | \"transparent\";\n  className?: string;\n}\n\n/** The scheme the document already declares (`.dark`, or an inline color-scheme from applyScheme); null = none yet. */\nfunction declaredScheme(root: HTMLElement): KitScheme | null {\n  if (root.classList.contains(\"dark\")) return \"dark\";\n  return root.style.colorScheme === \"light\" || root.style.colorScheme === \"dark\" ? root.style.colorScheme : null;\n}\n\n// The kit ships unbundled; a consumer's bundler replaces process.env.NODE_ENV, a no-bundler page has no `process`.\nconst isProduction = () => (globalThis as { process?: { env?: { NODE_ENV?: string } } }).process?.env?.NODE_ENV === \"production\";\n\n/** A kit island: `data-kit-scope` (the kit's base element defaults) on the kit surface, in the document's scheme. */\nexport function KitRoot({ children, scheme = \"inherit\", surface = \"surface\", className }: KitRootProps) {\n  useLayoutEffect(() => {\n    if (scheme === \"inherit\") return;\n    const root = document.documentElement;\n    const current = declaredScheme(root);\n    // kit-ports-spec.md §5: a scoped scheme that differs from the document's is forbidden (portalled layers follow the\n    // document). Say so in development; the document still takes `scheme`, as before.\n    if (current && current !== scheme && !isProduction()) {\n      console.warn(\n        `KitRoot scheme=\"${scheme}\" differs from the document (${current}). Portalled menus, tooltips and toasts follow the document, not KitRoot. Call applyScheme(document.documentElement, \"${scheme}\") from the host instead.`,\n      );\n    }\n    applyScheme(root, scheme);\n  }, [scheme]);\n  const cls = [surface === \"surface\" ? \"bg-kit-surface text-kit-fg\" : null, className].filter(Boolean).join(\" \");\n  return (\n    <div {...KIT_SCOPE} className={cls || undefined}>\n      {children}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;AAcA,SAAgB,YAAY,MAAmB,QAAyB;CACtE,KAAK,UAAU,OAAO,QAAQ,WAAW,MAAM;CAC/C,KAAK,MAAM,cAAc;AAC3B;;AAYA,SAAS,eAAe,MAAqC;CAC3D,IAAI,KAAK,UAAU,SAAS,MAAM,GAAG,OAAO;CAC5C,OAAO,KAAK,MAAM,gBAAgB,WAAW,KAAK,MAAM,gBAAgB,SAAS,KAAK,MAAM,cAAc;AAC5G;AAGA,IAAM,qBAAsB,WAA6D,SAAS,KAAK,aAAa;;AAGpH,SAAgB,QAAQ,EAAE,UAAU,SAAS,WAAW,UAAU,WAAW,aAA2B;CACtG,sBAAsB;EACpB,IAAI,WAAW,WAAW;EAC1B,MAAM,OAAO,SAAS;EACtB,MAAM,UAAU,eAAe,IAAI;EAGnC,IAAI,WAAW,YAAY,UAAU,CAAC,aAAa,GACjD,QAAQ,KACN,mBAAmB,OAAO,+BAA+B,QAAQ,wHAAwH,OAAO,0BAClM;EAEF,YAAY,MAAM,MAAM;CAC1B,GAAG,CAAC,MAAM,CAAC;CACX,MAAM,MAAM,CAAC,YAAY,YAAY,+BAA+B,MAAM,SAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;CAC7G,OACE,oBAAC,OAAD;EAAK,GAAI;EAAW,WAAW,OAAO,KAAA;EACnC;CACE,CAAA;AAET"}

package/dist/tokens.css

@@ -0,0 +1,542 @@
+/* @bettercms-ai/kit design tokens: the V2 roles, light (:root) and dark (.dark).
+   Moved verbatim from bettercms-dashboard src/index.css (main 37f589151) in the 2.0 relocation; this file is now their one home.
+   A Tailwind v4 app imports it with theme.css; a page without Tailwind uses dist/styles.css. */
+:root {
+  /* Non-kit roles the theme.css utilities read */
+  --motion-duration-fast: 140ms;
+  --editor-tray-line:  #EDEDED;
+  /* Ink: the dark-in-both-themes surface (tooltips, chips), read by the glass-ink / kit-ink-pill utilities in theme.css */
+  --ink-bg:         #1C1C1E;
+  --ink-fg:         #F5F5F5;
+  --ink-hover:      rgb(255 255 255 / 0.1);
+  --ink-active:     rgb(255 255 255 / 0.15);
+  --ink-line:       rgb(255 255 255 / 0.16);
+  --ink-danger-fg:  #FF8A8A;
+  --ink-danger-fg-hover: #FFA3A3;
+  --ink-button:     #FFFFFF;
+  --ink-button-fg:  #141414;
+  --ink-button-kbd: rgb(20 20 20 / 0.1);
+  --shadow-ink:     0 10px 28px -8px rgb(0 0 0 / 0.35);
+  /* V2 --tray-line and the --ink-* set as kit roles (demo styles/index.css :79, :204-214); the toast edge reads tray-line */
+  --kit-tray-line: #ededed;
+  --kit-ink-bg: #1c1c1e;
+  --kit-ink-fg: #f5f5f5;
+  --kit-ink-fg-2: rgb(255 255 255 / 0.8);
+  --kit-ink-fg-3: rgb(255 255 255 / 0.62);
+  --kit-ink-hover: rgb(255 255 255 / 0.1);
+  --kit-ink-active: rgb(255 255 255 / 0.15);
+  --kit-ink-line: rgb(255 255 255 / 0.16);
+  --kit-ink-button: #ffffff;
+  --kit-ink-button-fg: #141414;
+  --kit-ink-danger-fg: #ff8a8a;
+  --kit-ink-danger-fg-hover: #ffa3a3;
+  /* ─── V2 roles: THE token home (demo bettercms-v2-demo-himanshu @ c896beb, src/styles/index.css :root) ───
+     Every --kit-* value lives here and in .dark below, nowhere else (src/kit/kit.css holds only keyframes).
+     The dashboard's legacy role names further down are var() aliases of these, so one value drives both
+     the kit and the legacy primitives. Values are the demo's, copied as they are; the only deviation is
+     --kit-font-sans, which leads with the variable build of the same Inter face the app ships. */
+  --kit-app: #fafafa;
+  --kit-surface: #ffffff;
+  --kit-surface-raised: #ffffff;
+  --kit-subtle: #f7f7f7;
+  /* a site preview's paper (a live component in a rich-text card): light in both themes, as V2's site-paper */
+  --kit-site-paper: #ffffff;
+  --kit-well: #f7f7f7;
+  --kit-muted: #f1f1f2;
+  --kit-hover: #f0f0f0;
+  --kit-selected: #ebebeb;
+  --kit-selected-hover: #e2e2e2;
+  --kit-inverse: #1c1c1c;
+  --kit-inverse-hover: #000000;
+  --kit-overlay: rgb(10 10 10 / 0.32);
+  /* V2 media handles (crop box, focal ring) and the dim outside a crop: pinned white-on-photo in both themes. */
+  --kit-media-handle: #ffffff;
+  --kit-media-handle-ring: rgb(0 0 0 / 0.35);
+  --kit-media-scrim: rgb(0 0 0 / 0.55);
+  /* V2 transparency checkerboard behind media tiles: white in light, dimmed in dark (never a white slab). */
+  --kit-checker-a: #ffffff;
+  --kit-checker-b: #f0f0f1;
+  /* V2 Content roles (S1a). Values are V2's literals (src/styles/index.css @ d78733d). */
+  --kit-rail: #fafafa;            /* nav rail and panes; = app in light */
+  --kit-control-checked: #171717; /* checked radio / checkbox fill and border */
+  --kit-on-scrim: #ffffff;
+  --kit-on-scrim-2: rgb(255 255 255 / 0.7);
+  --kit-on-scrim-hover: rgb(255 255 255 / 0.1);
+  --kit-on-scrim-active: rgb(255 255 255 / 0.2);
+  --kit-scrim-strong: rgb(0 0 0 / 0.8);
+  --kit-scrim: rgb(0 0 0 / 0.55); /* V2 index.css:221 (light only) */
+  /* Kit overlay layers. The kit reads only these roles, falling back to V2's own numbers (float 52, sheet 55, modal 60,
+     expanded editor 70, menu 80, editor popover 84, tooltip 90; each popup sits at role + 1). The dashboard maps them onto
+     its --z-* ladder so a kit layer opened over a dashboard dialog or drawer stacks above it, in V2's order. */
+  --kit-z-float: 52;
+  --kit-z-sheet: var(--z-drawer);
+  --kit-z-modal: var(--z-modal);
+  --kit-z-expanded: calc(var(--z-modal) + 10);
+  --kit-z-menu: var(--z-dropdown);
+  --kit-z-popover: calc(var(--z-dropdown) + 5);
+  --kit-z-tooltip: var(--z-tooltip);
+  --kit-floating-line: #e5e5e5; /* V2 :151 modals, sheets, floating panels, expanded editors */
+  --kit-code-fg: #171717; /* V2 :259 */
+  --kit-shadow-sheet-b: 0 -16px 40px -12px rgb(0 0 0 / 0.2); /* V2 :253 bottom sheet */
+  --kit-ring-focus: 0 0 0 2px var(--kit-surface), 0 0 0 4px var(--kit-focus-ring); /* V2 :74; ring value = dash focus ring (TK-2) */
+  --kit-tray-gradient: linear-gradient(180deg, rgb(216 216 216 / 0) 16.105%, rgb(216 216 216 / 0.6) 123.57%); /* V2 :78 */
+  /* V2 :165-168, :240-243 generic site-preview palette (button style swatches, block thumbnails); a host that knows the site overrides it */
+  --kit-preview-paper: #f6f1ea;
+  --kit-preview-ink: #1e1b18;
+  --kit-preview-primary: #e0663b;
+  --kit-preview-primary-on: #1e1b18;
+  --kit-preview-contrast: #1e1b18;
+  --kit-preview-contrast-on: #f6f1ea;
+  --kit-preview-outline: rgb(30 27 24 / 0.25);
+  --kit-segment-thumb: #ffffff;   /* the active pill in a segmented control */
+  --kit-progress-fill: #171717;
+  --kit-paper: #ffffff;           /* document paper previews (PDF, DOCX) */
+  --kit-paper-ink: #1d1a17;
+  --kit-paper-filter: none;       /* filter: var(--kit-paper-filter) dims a whole paper preview in dark */
+  --kit-site-paper-line: transparent; /* hairline edge of a site-paper preview (shows in dark) */
+  --kit-media-well: #111111;      /* video tile and player backdrop */
+  --kit-media-backdrop: rgb(0 0 0 / 0.8);
+  --kit-media-control: rgb(255 255 255 / 0.9);
+  --kit-media-control-fg: #000000;
+  --kit-disabled-bg: #f1f1f2;
+  --kit-disabled-fg: #85858b;
+  --kit-constraint-bg: var(--kit-muted); /* Required, Max 60… chips */
+  --kit-constraint-fg: var(--kit-fg-2);
+  --kit-shadow-sheet-r: -12px 0 32px -16px rgb(0 0 0 / 0.18); /* sheet docked right */
+  --kit-fg: #171717;
+  --kit-fg-2: #525252;
+  --kit-fg-3: #606065;
+  --kit-fg-4: #707074;
+  --kit-fg-inverse: #ffffff;
+  --kit-line: #e5e5e5;
+  --kit-line-strong: #dcdcdf;
+  --kit-line-subtle: #f0f0f1;
+  --kit-field-border: #cfcfd4;
+  --kit-focus-ring: #838383; /* V2 demo is #a3a3a3 — 2.1–2.5:1 on V2 surfaces fails WCAG 1.4.11; same neutral, darker */
+  --kit-accent: #a354e9;
+  --kit-accent-hover: #9140dc;
+  --kit-accent-soft: #f5eefe;
+  --kit-accent-soft-2: #ead9fc;
+  --kit-accent-softer: #faf7ff;
+  --kit-accent-line: #e3ccf8;
+  --kit-accent-fg: #6c3b97;
+  --kit-accent-on: #ffffff;
+  --kit-success: #3cba71;
+  --kit-success-soft: #dcfce7;
+  --kit-success-softer: #eefef3;
+  --kit-success-line: #c5ead4;
+  --kit-success-fg: #166534;
+  --kit-success-on: #0f1f14;
+  --kit-warning: #f59e0b;
+  --kit-warning-soft: #fdf2dc;
+  --kit-warning-softer: #fef9ee;
+  --kit-warning-line: #fce2b6;
+  --kit-warning-fg: #9a5b06;
+  --kit-warning-on: #171717;
+  --kit-danger: #c7353e;
+  --kit-danger-soft: #fde8e8;
+  --kit-danger-softer: #fef4f4;
+  --kit-danger-line: #eec2c5;
+  --kit-danger-fg: #b42c35;
+  --kit-danger-on: #ffffff;
+  --kit-info: #3b82f6;
+  --kit-info-soft: #e6effd;
+  --kit-info-softer: #f3f7fe;
+  --kit-info-line: #c4dafc;
+  --kit-info-fg: #1f5fc9;
+  --kit-info-on: #111b28;
+  --kit-canvas: #f7f7f7;
+  --kit-scrollbar: #dcdcdf;
+  --kit-code: #f7f7f7;
+  --kit-control-bg: #ffffff;
+  --kit-field-bg: #ffffff;
+  --kit-field-border-hover: #85858b;
+  --kit-field-border-focus: #6a6a6f;
+  --kit-switch-off: #dcdcdf;
+  --kit-control-thumb: #ffffff;
+  --kit-swatch-ring: rgb(0 0 0 / 0.1);
+  --kit-on-inverse-2: rgb(255 255 255 / 0.7);
+  --kit-selection: #ead9fc;
+  --kit-canvas-select: #9746db;
+  --kit-canvas-select-on: #ffffff;
+  /* V2 --canvas-select-soft: the swap-target wash on the site (fixed in both themes, like --canvas-select) */
+  --kit-canvas-select-soft: rgb(151 70 219 / 0.1);
+  --kit-canvas-frame-ring: rgb(0 0 0 / 0.05);
+  --kit-syntax-keyword: #7945ab;
+  --kit-syntax-string: #1a763f;
+  --kit-syntax-number: #a35303;
+  --kit-syntax-property: #2266a4;
+  --kit-syntax-comment: #6a6a6f;
+  --kit-syntax-punct: #525252;
+  /* Schema V2 (D68): V2 index.css :277-313. Tags, field type families, the desk planes, row and drop states, health and review. */
+  --kit-tag-sky-bg: #eaf4fd; --kit-tag-sky-hover: #dcecfb; --kit-tag-sky-fg: #1b5a88; --kit-tag-sky-line: #cfe3f5;
+  --kit-tag-lavender-bg: #f0eefc; --kit-tag-lavender-hover: #e5e1fa; --kit-tag-lavender-fg: #4c429c; --kit-tag-lavender-line: #dcd7f5;
+  --kit-tag-mint-bg: #e7f6ee; --kit-tag-mint-hover: #d8f0e3; --kit-tag-mint-fg: #1b6644; --kit-tag-mint-line: #cbebd9;
+  --kit-tag-sand-bg: #f7f0e6; --kit-tag-sand-hover: #f0e5d4; --kit-tag-sand-fg: #74501c; --kit-tag-sand-line: #eadcc5;
+  --kit-tag-butter-bg: #fbf6dc; --kit-tag-butter-hover: #f6eec4; --kit-tag-butter-fg: #69560c; --kit-tag-butter-line: #efe4ad;
+  --kit-tag-coral-bg: #fdeeee; --kit-tag-coral-hover: #fbe2e2; --kit-tag-coral-fg: #9a3434; --kit-tag-coral-line: #f6d2d2;
+  --kit-tag-slate-bg: #eef0f3; --kit-tag-slate-hover: #e3e6eb; --kit-tag-slate-fg: #3f4856; --kit-tag-slate-line: #d9dde3;
+  --kit-tag-teal-bg: #e3f7f6; --kit-tag-teal-hover: #cff0f0; --kit-tag-teal-fg: #006767; --kit-tag-teal-line: #bfe9e9;
+  --kit-tag-rose-bg: #feedf4; --kit-tag-rose-hover: #fce0ec; --kit-tag-rose-fg: #7e3c5e; --kit-tag-rose-line: #f8d4e4;
+  --kit-type-text-bg: var(--kit-tag-slate-bg); --kit-type-text-fg: var(--kit-tag-slate-fg); --kit-type-text-line: var(--kit-tag-slate-line);
+  --kit-type-number-bg: var(--kit-tag-teal-bg); --kit-type-number-fg: var(--kit-tag-teal-fg); --kit-type-number-line: var(--kit-tag-teal-line);
+  --kit-type-choice-bg: var(--kit-tag-lavender-bg); --kit-type-choice-fg: var(--kit-tag-lavender-fg); --kit-type-choice-line: var(--kit-tag-lavender-line);
+  --kit-type-date-bg: var(--kit-tag-butter-bg); --kit-type-date-fg: var(--kit-tag-butter-fg); --kit-type-date-line: var(--kit-tag-butter-line);
+  --kit-type-media-bg: var(--kit-tag-mint-bg); --kit-type-media-fg: var(--kit-tag-mint-fg); --kit-type-media-line: var(--kit-tag-mint-line);
+  --kit-type-reference-bg: var(--kit-tag-sky-bg); --kit-type-reference-fg: var(--kit-tag-sky-fg); --kit-type-reference-line: var(--kit-tag-sky-line);
+  --kit-type-structure-bg: var(--kit-tag-sand-bg); --kit-type-structure-fg: var(--kit-tag-sand-fg); --kit-type-structure-line: var(--kit-tag-sand-line);
+  --kit-type-advanced-bg: var(--kit-tag-rose-bg); --kit-type-advanced-fg: var(--kit-tag-rose-fg); --kit-type-advanced-line: var(--kit-tag-rose-line);
+  --kit-type-off-bg: var(--kit-muted); --kit-type-off-fg: var(--kit-fg-4); --kit-type-off-line: var(--kit-line); /* archived, disabled */
+  --kit-desk: #f4f4f5;                          /* the builder's work plane */
+  --kit-desk-card: var(--kit-surface);          /* the section cards on the desk */
+  --kit-row-selected-ring: var(--kit-accent-line);
+  --kit-row-selected-edge: var(--kit-accent);
+  --kit-row-selected-hover: var(--kit-accent-softer);
+  --kit-drop-zone-line: var(--kit-line-strong);
+  --kit-drop-target-line: var(--kit-accent-line);
+  --kit-health-good: var(--kit-success); --kit-health-tidy: var(--kit-warning); --kit-health-bad: var(--kit-danger);
+  --kit-review-safe-bg: var(--kit-success-soft); --kit-review-safe-fg: var(--kit-success-fg);
+  --kit-review-check-bg: var(--kit-warning-soft); --kit-review-check-fg: var(--kit-warning-fg);
+  --kit-review-breaking-bg: var(--kit-danger-soft); --kit-review-breaking-fg: var(--kit-danger-fg);
+  /* Chips, avatars, key caps, fields, tracks, skeletons, brand and presence (V2 :root, same order of roles). */
+  --kit-chip-ink-bg: #1c1c1c;
+  --kit-chip-ink-fg: #ffffff;
+  --kit-avatar-1: #c2410c;
+  --kit-avatar-2: #be185d;
+  --kit-avatar-3: #7e22ce;
+  --kit-avatar-4: #4338ca;
+  --kit-avatar-5: #1d4ed8;
+  --kit-avatar-6: #047857;
+  --kit-avatar-7: #b45309;
+  --kit-avatar-8: #0369a1;
+  --kit-avatar-9: #a21caf;
+  --kit-avatar-10: #6d28d9;
+  --kit-avatar-on: #ffffff;
+  --kit-kbd: #f7f7f7;
+  --kit-kbd-line: #e5e5e5;
+  --kit-field-invalid: #dd868b;
+  --kit-emphasis-line: #6a6a6f;
+  --kit-track: #ededed;
+  --kit-track-line: #e2e2e2;
+  --kit-bar-fill: #1c1c1c;
+  --kit-subtle-2: #fbfbfb;
+  --kit-shimmer-highlight: rgb(255 255 255 / 0.4); /* V2: moving sweep over a fill */
+  --kit-skeleton: #f1f1f2;
+  --kit-skeleton-shine: #f0f0f0;
+  --kit-brand: #a878d2;
+  --kit-presence-1: #ce3f69;
+  --kit-presence-2: #00863d;
+  --kit-presence-3: #0073db;
+  --kit-presence-4: #765ee8;
+  --kit-presence-5: #bb5900;
+  --kit-presence-6: #0079bd;
+  --kit-presence-7: #c53b9c;
+  --kit-presence-8: #5867e7;
+  --kit-presence-on: #ffffff;
+  --kit-shadow-button-primary: inset 0 1px 0 rgb(255 255 255 / 0.12), 0 1px 2px rgb(0 0 0 / 0.12);
+  --kit-shadow-xs: 0 1px 2px rgb(16 16 16 / 0.05);
+  --kit-shadow-sm: 0 1px 2px rgb(16 16 16 / 0.06), 0 1px 3px rgb(16 16 16 / 0.05);
+  --kit-shadow-md: 0 4px 12px -2px rgb(16 16 16 / 0.08), 0 2px 4px -2px rgb(16 16 16 / 0.05);
+  --kit-shadow-lg: 0 12px 32px -8px rgb(16 16 16 / 0.16), 0 4px 8px -4px rgb(16 16 16 / 0.06);
+  --kit-shadow-xl: 0 24px 64px -16px rgb(16 16 16 / 0.24), 0 8px 16px -8px rgb(16 16 16 / 0.08);
+  --kit-shadow-canvas-frame: 0 1px 2px rgb(0 0 0 / 0.06), 0 12px 40px -12px rgb(0 0 0 / 0.18);
+  --kit-shadow-device: 0 24px 60px -20px rgb(0 0 0 / 0.35);
+  --kit-shadow-field: inset 0 1px 1px rgb(0 0 0 / 0.04);
+  --kit-ring-field: 0 0 0 3px rgb(0 0 0 / 0.045);
+  /* V2's type scale (12 / 13 / 14 / 16 / 18 / 20 / 24 / 32), each size with its own line height. */
+  --kit-text-2xs: 11px;
+  --kit-text-2xs--line-height: 14px;
+  --kit-text-xs: 12px;
+  --kit-text-xs--line-height: 16px;
+  --kit-text-sm: 13px;
+  --kit-text-sm--line-height: 18px;
+  --kit-text-base: 14px;
+  --kit-text-base--line-height: 20px;
+  --kit-text-md: 16px;
+  --kit-text-md--line-height: 24px;
+  --kit-text-lg: 18px;
+  --kit-text-lg--line-height: 26px;
+  --kit-text-xl: 20px;
+  --kit-text-xl--line-height: 28px;
+  --kit-text-2xl: 24px;
+  --kit-text-2xl--line-height: 32px;
+  --kit-text-3xl: 32px;
+  --kit-text-3xl--line-height: 40px;
+  /* V2 loads static Inter; production ships the variable build of the same face (approved deviation). */
+  --kit-font-sans: "Inter Variable", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
+  --kit-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
+  --kit-radius-xs: 3px;
+  --kit-radius-sm: 4px;
+  --kit-radius-md: 6px;
+  --kit-radius-lg: 8px;
+  --kit-radius-xl: 12px;
+  --kit-radius-2xl: 16px;
+  --kit-ease-out-soft: cubic-bezier(0.22, 1, 0.36, 1);
+  --kit-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
+  /* V2 roles the scoped kit sheet did not carry yet (demo HEAD c896beb :root). */
+  --kit-presence-agent: #6b6585;
+  --kit-wordmark: #291018;
+  --kit-rating: #d29a1c;
+  --kit-avatar-ring: #ffffff;
+  --kit-canvas-dot: #dcdcdf;
+  --kit-canvas-accent-fg: #7a2fc7;
+  --kit-canvas-accent-soft: #f5eefe;
+  --kit-brand-violet: #a878d2;
+  --kit-brand-coral: #ed6262;
+  --kit-brand-rose: #d13a3a;
+  --kit-brand-coral-bright: #f24259;
+  --kit-brand-coral-light: #ff6767;
+  --kit-brand-on: #1f1627;
+  --kit-brand-soft: #eee4f6;
+  --kit-brand-wash: #fdf4ee;
+  --kit-brand-gradient: linear-gradient(90deg, #a878d2 0%, #ed6262 48%, #d13a3a 100%);
+  --kit-ai-gradient: linear-gradient(135deg, #a878d2 8%, #ed6262 48%, #d13a3a 100%);
+  /* Fixed z-index scale — never z-9999 */
+  --z-floating-launcher: 25;
+  /* Overlay order (bcms-demo ladder): sheet < dialog < menus/popovers < tooltip < toast.
+     Menus sit above dialogs because selects and menus open inside dialogs. */
+  --z-sticky: 100;
+  --z-drawer: 300;
+  --z-modal: 400;
+  --z-dropdown: 450;
+  --z-tooltip: 460;
+  --z-toast: 500;
+}
+
+.dark {
+  --editor-tray-line:  #3A3A3D;
+  --ink-bg:         #3D3D40;
+  --ink-fg:         #ECECEF;
+  --ink-hover:      rgb(255 255 255 / 0.08);
+  --ink-active:     rgb(255 255 255 / 0.13);
+  --ink-line:       rgb(255 255 255 / 0.12);
+  --ink-danger-fg:  #FF8A8A;
+  --ink-danger-fg-hover: #FFA3A3;
+  --ink-button:     #E7E7EA;
+  --ink-button-fg:  #1B1B1E;
+  --ink-button-kbd: rgb(27 27 30 / 0.1);
+  --shadow-ink:     inset 0 1px 0 rgb(255 255 255 / 0.06), 0 0 0 1px rgb(255 255 255 / 0.12), 0 14px 36px -8px rgb(5 5 9 / 0.55);
+  /* demo .dark :435, :510-520 (fg-2, fg-3 and the danger pair repeat the light value, as the demo does) */
+  --kit-tray-line: #3a3a3d;
+  --kit-ink-bg: #3d3d40;
+  --kit-ink-fg: #ececef;
+  --kit-ink-fg-2: rgb(255 255 255 / 0.8);
+  --kit-ink-fg-3: rgb(255 255 255 / 0.62);
+  --kit-ink-hover: rgb(255 255 255 / 0.08);
+  --kit-ink-active: rgb(255 255 255 / 0.13);
+  --kit-ink-line: rgb(255 255 255 / 0.12);
+  --kit-ink-button: #e7e7ea;
+  --kit-ink-button-fg: #1b1b1e;
+  --kit-ink-danger-fg: #ff8a8a;
+  --kit-ink-danger-fg-hover: #ffa3a3;
+  /* ─── V2 roles, dark (demo .dark "Graphite v2"). Only the roles whose dark value differs are listed;
+     the rest inherit from the light block. Colour functions are written in sRGB (the demo's oklch()
+     converted, same colour), as the editor desk tokens are. ─── */
+  --kit-app: #1b1b1e;
+  --kit-surface: #202023;
+  --kit-surface-raised: #252528;
+  --kit-subtle: #252528;
+  --kit-site-paper: #ffffff;
+  --kit-well: #18181a;
+  --kit-muted: rgb(255 255 255 / 0.045);
+  --kit-hover: #2f2f31;
+  --kit-selected: #343437;
+  --kit-selected-hover: #39393c;
+  --kit-inverse: #e1e1e4;
+  --kit-inverse-hover: #f1f1f5;
+  --kit-overlay: rgb(9 9 11 / 0.56);
+  --kit-fg: #e1e1e4;
+  --kit-fg-2: #c4c4c7;
+  --kit-fg-3: #b1b1b4;
+  --kit-fg-4: #9e9ea1;
+  --kit-fg-inverse: #1b1b1e;
+  --kit-line: #3a3a3d;
+  --kit-line-strong: #454548;
+  --kit-line-subtle: #353538;
+  --kit-field-border: #747477;
+  --kit-focus-ring: #929295;
+  --kit-accent: #b88fe6;
+  --kit-accent-hover: #c4a2ed;
+  --kit-accent-soft: rgb(182 102 255 / 0.1);
+  --kit-accent-soft-2: #423254;
+  --kit-accent-softer: #27232d;
+  --kit-accent-line: #5d4676;
+  --kit-accent-fg: #d1b6f3;
+  --kit-accent-on: #1e1628;
+  --kit-success: #58b575;
+  --kit-success-soft: rgb(12 192 35 / 0.1);
+  --kit-success-softer: #1e2820;
+  --kit-success-line: #2c5f3c;
+  --kit-success-fg: #8cd19e;
+  --kit-warning: #e8aa4e;
+  --kit-warning-soft: rgb(242 152 25 / 0.1);
+  --kit-warning-softer: #2b241b;
+  --kit-warning-line: #594329;
+  --kit-warning-fg: #f5c076;
+  --kit-warning-on: #23190a;
+  --kit-danger: #c74a49;
+  --kit-danger-soft: rgb(240 63 35 / 0.13);
+  --kit-danger-softer: #2e2121;
+  --kit-danger-line: #793f3e;
+  --kit-danger-fg: #f8a4a1;
+  --kit-info: #64a1ee;
+  --kit-info-soft: rgb(24 132 252 / 0.12);
+  --kit-info-softer: #1f262f;
+  --kit-info-line: #33547e;
+  --kit-info-fg: #92c1fd;
+  --kit-canvas: #1b1b1e;
+  --kit-scrollbar: #47474a;
+  --kit-code: #252528;
+  --kit-control-bg: rgb(255 255 255 / 0.06);
+  --kit-field-bg: rgb(255 255 255 / 0.025);
+  --kit-field-border-hover: #8c8c8f;
+  --kit-field-border-focus: #aaaaae;
+  --kit-switch-off: #747477;
+  --kit-control-thumb: #f1f1f4;
+  --kit-swatch-ring: rgb(255 255 255 / 0.4);
+  --kit-on-inverse-2: rgb(27 27 30 / 0.7);
+  --kit-selection: #503d66;
+  --kit-canvas-frame-ring: rgb(255 255 255 / 0.1);
+  --kit-syntax-keyword: #cdaef2;
+  --kit-syntax-string: #8cd19e;
+  --kit-syntax-number: #f4b581;
+  --kit-syntax-property: #87c6f2;
+  --kit-syntax-comment: #9e9ea1;
+  --kit-syntax-punct: #b1b1b4;
+  /* Schema V2 (D68): V2 index.css :550-562. The type, row, drop, health and review aliases follow from :root. */
+  --kit-tag-sky-bg: #1b2b36; --kit-tag-sky-hover: #1f3340; --kit-tag-sky-fg: #8dccf9; --kit-tag-sky-line: #264052;
+  --kit-tag-lavender-bg: #272737; --kit-tag-lavender-hover: #2e2e42; --kit-tag-lavender-fg: #bdbcfd; --kit-tag-lavender-line: #3a3a54;
+  --kit-tag-mint-bg: #1b2e24; --kit-tag-mint-hover: #20362a; --kit-tag-mint-fg: #8fd7b0; --kit-tag-mint-line: #274435;
+  --kit-tag-sand-bg: #322618; --kit-tag-sand-hover: #3c2d1c; --kit-tag-sand-fg: #eaba83; --kit-tag-sand-line: #4c3922;
+  --kit-tag-butter-bg: #2d2917; --kit-tag-butter-hover: #36301b; --kit-tag-butter-fg: #d6c480; --kit-tag-butter-line: #443d21;
+  --kit-tag-coral-bg: #362322; --kit-tag-coral-hover: #402928; --kit-tag-coral-fg: #f9adaa; --kit-tag-coral-line: #523432;
+  --kit-tag-slate-bg: #242930; --kit-tag-slate-hover: #2b3138; --kit-tag-slate-fg: #b3c6df; --kit-tag-slate-line: #363e48;
+  --kit-tag-teal-bg: #162e2d; --kit-tag-teal-hover: #193636; --kit-tag-teal-fg: #78d7d6; --kit-tag-teal-line: #1c4544;
+  --kit-tag-rose-bg: #34232b; --kit-tag-rose-hover: #3e2933; --kit-tag-rose-fg: #f1accc; --kit-tag-rose-line: #4f3340;
+  --kit-desk: var(--kit-app);
+  --kit-desk-card: var(--kit-surface-raised);
+  --kit-chip-ink-bg: #343437;
+  --kit-chip-ink-fg: #e1e1e4;
+  --kit-avatar-1: #e2957c;
+  --kit-avatar-2: #e090a3;
+  --kit-avatar-3: #b69ce0;
+  --kit-avatar-4: #9ba5ea;
+  --kit-avatar-5: #8baaeb;
+  --kit-avatar-6: #68bf9c;
+  --kit-avatar-7: #de9872;
+  --kit-avatar-8: #70b2e5;
+  --kit-avatar-9: #ca95cf;
+  --kit-avatar-10: #ac9fe5;
+  --kit-avatar-on: #1b1b1e;
+  --kit-kbd: #2a2a2c;
+  --kit-kbd-line: #454548;
+  --kit-field-invalid: #d46565;
+  --kit-emphasis-line: #929295;
+  --kit-track: #2f2f31;
+  --kit-track-line: #454548;
+  --kit-bar-fill: #b1b1b4;
+  --kit-subtle-2: #222225;
+  --kit-shimmer-highlight: oklch(1 0 0 / 0.08);
+  --kit-skeleton: #2a2a2c;
+  --kit-skeleton-shine: #343437;
+  --kit-brand: #b792db;
+  --kit-presence-1: #f290a3;
+  --kit-presence-2: #6dc88f;
+  --kit-presence-3: #7ab5fc;
+  --kit-presence-4: #aba5fa;
+  --kit-presence-5: #e79f5c;
+  --kit-presence-6: #60bbf4;
+  --kit-presence-7: #e592c6;
+  --kit-presence-8: #99abfd;
+  --kit-presence-on: #1b1b1e;
+  --kit-shadow-button-primary: none;
+  --kit-shadow-canvas-frame: 0 1px 2px oklch(0.12 0.01 286 / 0.4), 0 12px 40px -12px oklch(0.12 0.01 286 / 0.55);
+  --kit-shadow-device: 0 24px 60px -20px oklch(0.12 0.01 286 / 0.6), 0 0 0 1px oklch(1 0 0 / 0.08);
+  --kit-shadow-field: none;
+  --kit-ring-field: 0 0 0 3px oklch(1 0 0 / 0.06);
+  --kit-shadow-xs: 0 1px 2px oklch(0.12 0.01 286 / 0.3);
+  --kit-shadow-sm: 0 1px 2px oklch(0.12 0.01 286 / 0.32), 0 1px 3px oklch(0.12 0.01 286 / 0.2);
+  --kit-shadow-md: 0 4px 12px -2px oklch(0.12 0.01 286 / 0.38), 0 2px 4px -2px oklch(0.12 0.01 286 / 0.24);
+  --kit-shadow-lg: 0 12px 32px -8px oklch(0.12 0.01 286 / 0.48), 0 4px 8px -4px oklch(0.12 0.01 286 / 0.28), 0 0 0 1px oklch(1 0 0 / 0.04);
+  --kit-shadow-xl: 0 24px 64px -16px oklch(0.12 0.01 286 / 0.58), 0 8px 16px -8px oklch(0.12 0.01 286 / 0.32), 0 0 0 1px oklch(1 0 0 / 0.05);
+  /* V2 roles the scoped kit sheet did not carry yet (demo HEAD c896beb .dark). */
+  --kit-checker-a: #d7d7d9;
+  --kit-checker-b: #cacacc;
+  /* V2 Content roles (S1a), dark. V2's literals; the roles not listed keep their light value. */
+  --kit-rail: #202023;            /* = surface: no dark channel */
+  --kit-control-checked: #e1e1e4; /* = fg; the check mark uses the inverse fg */
+  --kit-segment-thumb: #3b3b3e;   /* the active pill lifts off the track */
+  --kit-progress-fill: #b1b1b4;   /* = bar fill: no near-white glare */
+  --kit-paper: #e3e1de;           /* dimmed sheet: no glare slab */
+  --kit-paper-ink: #1d1a17;
+  --kit-paper-filter: brightness(0.9);
+  --kit-site-paper-line: oklch(1 0 0 / 0.12);
+  --kit-media-well: #18181a;      /* = well, not a black hole */
+  --kit-disabled-bg: #2a2a2d;
+  --kit-disabled-fg: #9e9ea1;
+  --kit-shadow-sheet-r: -12px 0 32px -16px oklch(0.12 0.01 286 / 0.5);
+  --kit-floating-line: #454548; /* V2 :414 */
+  --kit-code-fg: #e1e1e4; /* V2 :532 */
+  --kit-shadow-sheet-b: 0 -16px 40px -12px oklch(0.12 0.01 286 / 0.5); /* V2 :572 */
+  --kit-ring-focus: 0 0 0 2px var(--kit-surface), 0 0 0 4px var(--kit-focus-ring); /* V2 :575 */
+  --kit-tray-gradient: linear-gradient(180deg, oklch(0.32 0.005 286 / 0) 16.105%, oklch(0.32 0.005 286 / 0.6) 123.57%); /* V2 :577 */
+  --kit-preview-contrast: #f6f1ea; /* V2 :426-428 */
+  --kit-preview-contrast-on: #1e1b18;
+  --kit-preview-outline: #929295;
+  --kit-presence-agent: #b2adc6;
+  --kit-wordmark: #e1e1e4;
+  --kit-avatar-ring: #202023;
+  --kit-canvas-dot: #454548;
+  --kit-brand-soft: #362a42;
+  --kit-brand-wash: #2f231e;
+  --kit-brand-gradient: linear-gradient(90deg, #b792db 0%, #f47a77 48%, #e45d58 100%);
+  --kit-ai-gradient: linear-gradient(135deg, #b792db 8%, #f47a77 48%, #e45d58 100%);
+}
+
+@layer base {
+
+  :is(main, h1, h2, h3, [tabindex="-1"]) {
+    scroll-margin-top: 5rem;
+  }
+
+  /* Kit islands ([data-kit-scope], moved here from src/kit/kit.css). The marker carries no token: every
+     --kit-* value is global above. It keeps V2's base element defaults where this sheet's legacy base
+     layer still differs, so a kit island inside a legacy 13px container renders as the demo does: V2 body
+     text, --kit-line borders, currentcolor outline, thin scrollbars, unsized headings (they inherit), a
+     default label cursor, the kit mono on code, and .sr-only left in the flow. Base layer, so every
+     utility still wins. These go when the legacy base rules they correct go. */
+  [data-kit-scope] {
+    font-family: var(--kit-font-sans);
+    font-size: 14px;
+    line-height: 20px;
+    font-feature-settings: "cv11", "ss01", "ss03";
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    text-rendering: optimizeLegibility;
+  }
+  [data-kit-scope],
+  [data-kit-scope] * {
+    border-color: var(--kit-line);
+    scrollbar-width: thin;
+    scrollbar-color: var(--kit-scrollbar) transparent;
+  }
+  [data-kit-scope] :is(h1, h2, h3, h4, h5, h6) {
+    --tw-leading: initial;
+    --tw-tracking: initial;
+    font-size: inherit;
+    font-weight: inherit;
+    line-height: inherit;
+    letter-spacing: inherit;
+    color: inherit;
+  }
+  [data-kit-scope] label {
+    cursor: default;
+  }
+  [data-kit-scope] :is(code, kbd, samp, pre) {
+    font-family: var(--kit-font-mono);
+  }
+  [data-kit-scope] .sr-only {
+    top: auto;
+    left: auto;
+  }
+}

package/dist/types.d.ts

@@ -0,0 +1,17 @@
+import type { FieldPath, FieldSchema } from "./schema/types";
+/** Props every field control receives. Controls are pure: value in, onChange out; chrome lives in <FieldShell>. */
+export interface ControlProps<T = unknown> {
+    field: FieldSchema;
+    value: T;
+    onChange: (v: T) => void;
+    /** DOM id for the primary input (the label points at it). */
+    id: string;
+    invalid?: boolean;
+    readOnly?: boolean;
+    /** absolute path of this field (drill-in targets, comments, rich-text identity) */
+    path: FieldPath;
+    /** sibling values (slug ← title, conditional UI) */
+    parent?: Record<string, unknown>;
+    /** mark the field touched (validation shows on blur) */
+    onBlur?: () => void;
+}

package/dist/ui/action-tray.d.ts

@@ -0,0 +1,54 @@
+/**
+ * ACTION TRAY: Figma 61014:66265 "Bottom". The soft, slightly raised bar at the bottom of editors, inspectors,
+ * sheets and dialogs: surface → light grey gradient, 1px top hairline, 12px side padding, 6px vertical, 44px tall +
+ * hairline (a 32px button fits exactly). No blur (D21).
+ *
+ *   <ActionTray meta={<TrayMeta name="Priya Nair" at={iso} onClick={openHistory} />}>
+ *     <Button variant="primary" leftIcon={<IconUpload />}>Publish</Button>
+ *     <TrayMore>…menu items…</TrayMore>
+ *   </ActionTray>
+ *
+ * Use for sticky bottom ACTION bars only, never on cards or content areas.
+ */
+import * as React from "react";
+/** Class string for footers that can't take the component (e.g. a shared footer primitive). */
+export declare const actionTrayClass = "shrink-0 border-t border-kit-editor-tray-line bg-tray";
+export declare function ActionTray({ meta, children, className, as: Tag, clearToasts, ...props }: Omit<React.HTMLAttributes<HTMLElement>, "children"> & {
+    /** Left slot, usually <TrayMeta>. */
+    meta?: React.ReactNode;
+    /** Right slot: actions (primary last-but-one, ⋯ last). */
+    children?: React.ReactNode;
+    as?: "div" | "footer";
+    /** a page-level bar at the bottom of the window: bottom toasts sit above it, never over its buttons */
+    clearToasts?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+/** V2 relTime: "just now", "5m ago", "3h ago", "2d ago", "1w ago", then a date. */
+export declare function relTime(at: string | number | Date, now?: number): string;
+/**
+ * Left meta: avatar 20 · name 13/500 · "Edited 3h ago" 13 muted (Figma). The tooltip carries the full timestamp;
+ * when `onClick` is set the whole line is a button (opens History).
+ */
+export declare function TrayMeta({ name, avatarName, src, people, at, verb, note, onClick, actionHint, }: {
+    name: string;
+    /** Full name for the avatar when `name` is shortened ("You", first names). */
+    avatarName?: string;
+    src?: string;
+    /** Several editors → avatar stack (first is the last editor). */
+    people?: {
+        name: string;
+        src?: string;
+    }[];
+    /** When it was edited; omit for "just now" states you phrase yourself via `note`. */
+    at?: string | number | Date;
+    verb?: string;
+    /** Overrides the relative-time text, e.g. "Edited just now". */
+    note?: string;
+    onClick?: () => void;
+    actionHint?: string;
+}): import("react/jsx-runtime").JSX.Element;
+/** The tray's "⋯" (32×32 ghost, Figma "Button - Modal actions") opening a menu above the bar. Children are menu items. */
+export declare function TrayMore({ label, children, menuClassName, }: {
+    label?: string;
+    children: React.ReactNode;
+    menuClassName?: string;
+}): import("react/jsx-runtime").JSX.Element;