@bettercms-ai/kit 1.0.0 → 2.0.0

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/{ui → dist/ui}/action-tray.d.ts

@@ -12,7 +12,7 @@
  */
 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: string;
+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;

package/{ui → dist/ui}/action-tray.js

@@ -1,12 +1,11 @@
 import { cn } from "../lib/cn.js";
-import { TRAY } from "./surfaces.js";
 import { HintTooltip, IconButton } from "./button.js";
 import { Menu, MenuContent, MenuTrigger } from "./overlay.js";
 import { Avatar, AvatarStack } from "./display.js";
 import * as React from "react";
-import { IconDots } from "@tabler/icons-react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-//#region src/kit/ui/action-tray.tsx
+import { IconDots } from "@tabler/icons-react";
+//#region src/ui/action-tray.tsx
 /**
 * 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 +
@@ -48,7 +47,7 @@ function useToastClearance(ref, on) {
 	}, [ref, on]);
 }
 /** Class string for footers that can't take the component (e.g. a shared footer primitive). */
-var actionTrayClass = cn("shrink-0 border-t", TRAY);
+var actionTrayClass = "shrink-0 border-t border-kit-editor-tray-line bg-tray";
 function ActionTray({ meta, children, className, as: Tag = "div", clearToasts = false, ...props }) {
 	const ref = React.useRef(null);
 	useToastClearance(ref, clearToasts);
@@ -117,21 +116,23 @@ function TrayMeta({ name, avatarName, src, people, at, verb = "Edited", note, on
 		className: "hidden min-w-0 truncate text-kit-sm text-kit-fg-3 @[34rem]/tray:inline",
 		children: when
 	})] });
+	const tip = at ? `${name} · ${verb} ${fullStamp(at)}${onClick ? ` · ${actionHint}` : ""}` : onClick ? `${name} · ${when} · ${actionHint}` : `${name} · ${when}`;
+	const body = onClick ? /* @__PURE__ */ jsx("button", {
+		type: "button",
+		onClick,
+		"aria-label": `${name}, ${when}. ${actionHint}`,
+		className: "-mx-1 flex min-w-0 items-center gap-2 rounded-kit-md px-1 py-0.5 transition-colors hover:bg-kit-hover",
+		children: inner
+	}) : /* @__PURE__ */ jsxs("span", {
+		className: "flex min-w-0 items-center gap-2",
+		children: [inner, /* @__PURE__ */ jsx("span", {
+			className: "sr-only @[34rem]/tray:hidden",
+			children: `${name}, ${when}`
+		})]
+	});
 	return /* @__PURE__ */ jsx(HintTooltip, {
-		content: at ? `${name} · ${verb} ${fullStamp(at)}${onClick ? ` · ${actionHint}` : ""}` : onClick ? `${name} · ${when} · ${actionHint}` : `${name} · ${when}`,
-		children: onClick ? /* @__PURE__ */ jsx("button", {
-			type: "button",
-			onClick,
-			"aria-label": `${name}, ${when}. ${actionHint}`,
-			className: "-mx-1 flex min-w-0 items-center gap-2 rounded-kit-md px-1 py-0.5 transition-colors hover:bg-kit-hover",
-			children: inner
-		}) : /* @__PURE__ */ jsxs("span", {
-			className: "flex min-w-0 items-center gap-2",
-			children: [inner, /* @__PURE__ */ jsx("span", {
-				className: "sr-only @[34rem]/tray:hidden",
-				children: `${name}, ${when}`
-			})]
-		})
+		content: tip,
+		children: body
 	});
 }
 /** The tray's "⋯" (32×32 ghost, Figma "Button - Modal actions") opening a menu above the bar. Children are menu items. */
@@ -143,7 +144,7 @@ function TrayMore({ label = "More options", children, menuClassName }) {
 	}) }), /* @__PURE__ */ jsx(MenuContent, {
 		side: "top",
 		align: "end",
-		className: cn("w-60 font-kit-sans", menuClassName),
+		className: cn("w-60", menuClassName),
 		children
 	})] });
 }

package/dist/ui/action-tray.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"action-tray.js","names":[],"sources":["../../src/ui/action-tray.tsx"],"sourcesContent":["/**\n * ACTION TRAY: Figma 61014:66265 \"Bottom\". The soft, slightly raised bar at the bottom of editors, inspectors,\n * sheets and dialogs: surface → light grey gradient, 1px top hairline, 12px side padding, 6px vertical, 44px tall +\n * hairline (a 32px button fits exactly). No blur (D21).\n *\n *   <ActionTray meta={<TrayMeta name=\"Priya Nair\" at={iso} onClick={openHistory} />}>\n *     <Button variant=\"primary\" leftIcon={<IconUpload />}>Publish</Button>\n *     <TrayMore>…menu items…</TrayMore>\n *   </ActionTray>\n *\n * Use for sticky bottom ACTION bars only, never on cards or content areas.\n */\nimport * as React from \"react\";\nimport { IconDots } from \"@tabler/icons-react\";\nimport { cn } from \"../lib/cn\";\nimport { HintTooltip, IconButton } from \"./button\";\nimport { Avatar, AvatarStack } from \"./display\";\nimport { Menu, MenuContent, MenuTrigger } from \"./overlay\";\n\n/* ── Toasts clear the tray (S1: a toast covered the schema draft bar's Apply) ─────────────────────────────────────────\n   A tray with `clearToasts` lifts the app's bottom toasts above itself while it is mounted: it writes\n   `--toast-offset-bottom` on the root (the host's Toaster reads it as its bottom offset), the highest tray winning. */\nconst clearing = new Set<HTMLElement>();\nfunction syncToastOffset() {\n  if (typeof document === \"undefined\") return;\n  let lift = 0;\n  for (const el of clearing) {\n    const r = el.getBoundingClientRect();\n    if (r.height) lift = Math.max(lift, window.innerHeight - r.top + 12);\n  }\n  if (lift > 0) document.documentElement.style.setProperty(\"--toast-offset-bottom\", `${Math.round(lift)}px`);\n  else document.documentElement.style.removeProperty(\"--toast-offset-bottom\");\n}\nfunction useToastClearance(ref: React.RefObject<HTMLElement | null>, on: boolean) {\n  React.useLayoutEffect(() => {\n    const el = ref.current;\n    if (!on || !el) return;\n    clearing.add(el);\n    syncToastOffset();\n    const ro = typeof ResizeObserver !== \"undefined\" ? new ResizeObserver(syncToastOffset) : null;\n    ro?.observe(el);\n    window.addEventListener(\"resize\", syncToastOffset);\n    return () => {\n      clearing.delete(el);\n      ro?.disconnect();\n      window.removeEventListener(\"resize\", syncToastOffset);\n      syncToastOffset();\n    };\n  }, [ref, on]);\n}\n\n/** Class string for footers that can't take the component (e.g. a shared footer primitive). */\nexport const actionTrayClass = \"shrink-0 border-t border-kit-editor-tray-line bg-tray\";\n\nexport function ActionTray({\n  meta,\n  children,\n  className,\n  as: Tag = \"div\",\n  clearToasts = false,\n  ...props\n}: Omit<React.HTMLAttributes<HTMLElement>, \"children\"> & {\n  /** Left slot, usually <TrayMeta>. */\n  meta?: React.ReactNode;\n  /** Right slot: actions (primary last-but-one, ⋯ last). */\n  children?: React.ReactNode;\n  as?: \"div\" | \"footer\";\n  /** a page-level bar at the bottom of the window: bottom toasts sit above it, never over its buttons */\n  clearToasts?: boolean;\n}) {\n  const ref = React.useRef<HTMLElement>(null);\n  useToastClearance(ref, clearToasts);\n  return (\n    <Tag\n      ref={ref as React.Ref<HTMLDivElement>}\n      data-action-tray=\"\"\n      className={cn(actionTrayClass, \"@container/tray flex min-h-[45px] items-center justify-between gap-2 px-3 py-1.5\", className)}\n      {...props}\n    >\n      <div className=\"flex min-w-0 flex-1 items-center gap-2\">{meta}</div>\n      {children ? <div className=\"flex shrink-0 items-center gap-[5px]\">{children}</div> : null}\n    </Tag>\n  );\n}\n\n/** V2 relTime: \"just now\", \"5m ago\", \"3h ago\", \"2d ago\", \"1w ago\", then a date. */\nexport function relTime(at: string | number | Date, now = Date.now()) {\n  const s = Math.round((now - new Date(at).getTime()) / 1000);\n  if (s < 45) return \"just now\";\n  const m = Math.round(s / 60);\n  if (m < 60) return `${m}m ago`;\n  const h = Math.round(m / 60);\n  if (h < 24) return `${h}h ago`;\n  const days = Math.round(h / 24);\n  if (days < 7) return `${days}d ago`;\n  const w = Math.round(days / 7);\n  if (w < 5) return `${w}w ago`;\n  return new Date(at).toLocaleDateString(\"en-US\", { month: \"short\", day: \"numeric\", year: \"numeric\" });\n}\n\nconst fullStamp = (at: string | number | Date) =>\n  new Date(at).toLocaleString(\"en-US\", { weekday: \"short\", month: \"short\", day: \"numeric\", year: \"numeric\", hour: \"numeric\", minute: \"2-digit\" });\n\n/**\n * Left meta: avatar 20 · name 13/500 · \"Edited 3h ago\" 13 muted (Figma). The tooltip carries the full timestamp;\n * when `onClick` is set the whole line is a button (opens History).\n */\nexport function TrayMeta({\n  name,\n  avatarName,\n  src,\n  people,\n  at,\n  verb = \"Edited\",\n  note,\n  onClick,\n  actionHint = \"Open history\",\n}: {\n  name: string;\n  /** Full name for the avatar when `name` is shortened (\"You\", first names). */\n  avatarName?: string;\n  src?: string;\n  /** Several editors → avatar stack (first is the last editor). */\n  people?: { name: string; src?: string }[];\n  /** When it was edited; omit for \"just now\" states you phrase yourself via `note`. */\n  at?: string | number | Date;\n  verb?: string;\n  /** Overrides the relative-time text, e.g. \"Edited just now\". */\n  note?: string;\n  onClick?: () => void;\n  actionHint?: string;\n}) {\n  const when = note ?? (at ? `${verb} ${relTime(at).replace(\"just now\", \"a moment ago\")}` : verb);\n  const inner = (\n    <>\n      <span className=\"flex shrink-0 items-center gap-1\">\n        {people && people.length > 1 ? (\n          <AvatarStack people={people} size={20} max={3} />\n        ) : (\n          <Avatar name={avatarName ?? name} src={src} size={20} decorative />\n        )}\n        {/* narrow trays (the grid drawer): just the avatar, the words move into the tooltip; never a clipped \"Edit…\" */}\n        <span className=\"hidden whitespace-nowrap text-kit-sm font-medium text-kit-fg @[34rem]/tray:inline\">{name}</span>\n      </span>\n      <span className=\"hidden min-w-0 truncate text-kit-sm text-kit-fg-3 @[34rem]/tray:inline\">{when}</span>\n    </>\n  );\n  const tip = at\n    ? `${name} · ${verb} ${fullStamp(at)}${onClick ? ` · ${actionHint}` : \"\"}`\n    : onClick\n      ? `${name} · ${when} · ${actionHint}`\n      : `${name} · ${when}`;\n  const body = onClick ? (\n    <button\n      type=\"button\"\n      onClick={onClick}\n      aria-label={`${name}, ${when}. ${actionHint}`}\n      className=\"-mx-1 flex min-w-0 items-center gap-2 rounded-kit-md px-1 py-0.5 transition-colors hover:bg-kit-hover\"\n    >\n      {inner}\n    </button>\n  ) : (\n    <span className=\"flex min-w-0 items-center gap-2\">\n      {inner}\n      {/* the words hide in narrow trays; screen readers always get them */}\n      <span className=\"sr-only @[34rem]/tray:hidden\">{`${name}, ${when}`}</span>\n    </span>\n  );\n  return <HintTooltip content={tip}>{body}</HintTooltip>;\n}\n\n/** The tray's \"⋯\" (32×32 ghost, Figma \"Button - Modal actions\") opening a menu above the bar. Children are menu items. */\nexport function TrayMore({\n  label = \"More options\",\n  children,\n  menuClassName,\n}: {\n  label?: string;\n  children: React.ReactNode;\n  menuClassName?: string;\n}) {\n  return (\n    // the kit Menu: §12 dismiss guards, the modal-layer marker (an open tooltip closes) and V2's non-looping arrows\n    <Menu>\n      <MenuTrigger\n        render={\n          <IconButton label={label} size=\"md\">\n            <IconDots aria-hidden />\n          </IconButton>\n        }\n      />\n      <MenuContent side=\"top\" align=\"end\" className={cn(\"w-60\", menuClassName)}>\n        {children}\n      </MenuContent>\n    </Menu>\n  );\n}\n"],"mappings":"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"}