@bettercms-ai/kit 1.0.0 → 2.0.0

package/dist/theme.css

@@ -0,0 +1,345 @@
+/* @bettercms-ai/kit utility names for a Tailwind v4 app: `@import "@bettercms-ai/kit/theme.css"` after tailwindcss.
+   "inline reference" registers bg-kit-surface, text-kit-fg, rounded-kit-md… without emitting variables: the values live in tokens.css. */
+@theme inline reference {
+  --color-kit-app: var(--kit-app);
+  --color-kit-surface: var(--kit-surface);
+  /* V2 styles/index.css:635 --color-surface-raised: the kit's bg-kit-surface-raised (floating block toolbars) */
+  --color-kit-surface-raised: var(--kit-surface-raised);
+  --color-kit-subtle: var(--kit-subtle);
+  --color-kit-subtle-2: var(--kit-subtle-2);
+  --color-kit-shimmer-highlight: var(--kit-shimmer-highlight);
+  --color-kit-site-paper: var(--kit-site-paper);
+  --color-kit-well: var(--kit-well);
+  --color-kit-muted: var(--kit-muted);
+  --color-kit-hover: var(--kit-hover);
+  --color-kit-selected: var(--kit-selected);
+  --color-kit-inverse: var(--kit-inverse);
+  --color-kit-inverse-hover: var(--kit-inverse-hover);
+  --color-kit-overlay: var(--kit-overlay);
+  --color-kit-media-handle: var(--kit-media-handle);
+  --color-kit-media-handle-ring: var(--kit-media-handle-ring);
+  --color-kit-media-scrim: var(--kit-media-scrim);
+  --color-kit-rail: var(--kit-rail);
+  --color-kit-control-checked: var(--kit-control-checked);
+  --color-kit-on-scrim: var(--kit-on-scrim);
+  --color-kit-on-scrim-2: var(--kit-on-scrim-2);
+  --color-kit-on-scrim-hover: var(--kit-on-scrim-hover);
+  --color-kit-on-scrim-active: var(--kit-on-scrim-active);
+  --color-kit-scrim-strong: var(--kit-scrim-strong);
+  /* S2k (V2 styles/index.css, cited per role in :root below) */
+  --color-kit-scrim: var(--kit-scrim);
+  --color-kit-floating-line: var(--kit-floating-line);
+  --color-kit-editor-tray-line: var(--editor-tray-line);
+  --color-kit-tray-line: var(--kit-tray-line);
+  --color-kit-ink-bg: var(--kit-ink-bg);
+  --color-kit-ink-fg: var(--kit-ink-fg);
+  --color-kit-ink-fg-2: var(--kit-ink-fg-2);
+  --color-kit-ink-fg-3: var(--kit-ink-fg-3);
+  --color-kit-ink-hover: var(--kit-ink-hover);
+  --color-kit-ink-active: var(--kit-ink-active);
+  --color-kit-ink-line: var(--kit-ink-line);
+  --color-kit-ink-button: var(--kit-ink-button);
+  --color-kit-ink-button-fg: var(--kit-ink-button-fg);
+  --color-kit-ink-danger-fg: var(--kit-ink-danger-fg);
+  --color-kit-ink-danger-fg-hover: var(--kit-ink-danger-fg-hover);
+  --color-kit-avatar-on: var(--kit-avatar-on);
+  --color-kit-code-fg: var(--kit-code-fg);
+  --color-kit-preview-paper: var(--kit-preview-paper);
+  --color-kit-preview-ink: var(--kit-preview-ink);
+  --color-kit-preview-primary: var(--kit-preview-primary);
+  --color-kit-preview-primary-on: var(--kit-preview-primary-on);
+  --color-kit-preview-contrast: var(--kit-preview-contrast);
+  --color-kit-preview-contrast-on: var(--kit-preview-contrast-on);
+  --color-kit-preview-outline: var(--kit-preview-outline);
+  --shadow-kit-button-primary: var(--kit-shadow-button-primary);
+  --shadow-kit-sheet-b: var(--kit-shadow-sheet-b);
+  --color-kit-segment-thumb: var(--kit-segment-thumb);
+  --color-kit-progress-fill: var(--kit-progress-fill);
+  --color-kit-paper: var(--kit-paper);
+  --color-kit-paper-ink: var(--kit-paper-ink);
+  --color-kit-site-paper-line: var(--kit-site-paper-line);
+  --color-kit-media-well: var(--kit-media-well);
+  --color-kit-media-backdrop: var(--kit-media-backdrop);
+  --color-kit-media-control: var(--kit-media-control);
+  --color-kit-media-control-fg: var(--kit-media-control-fg);
+  --color-kit-disabled-bg: var(--kit-disabled-bg);
+  --color-kit-disabled-fg: var(--kit-disabled-fg);
+  --color-kit-constraint-bg: var(--kit-constraint-bg);
+  --color-kit-constraint-fg: var(--kit-constraint-fg);
+  --shadow-kit-sheet-r: var(--kit-shadow-sheet-r);
+  --color-kit-checker-a: var(--kit-checker-a);
+  --color-kit-checker-b: var(--kit-checker-b);
+  --color-kit-fg: var(--kit-fg);
+  --color-kit-fg-2: var(--kit-fg-2);
+  --color-kit-fg-3: var(--kit-fg-3);
+  --color-kit-fg-4: var(--kit-fg-4);
+  --color-kit-fg-inverse: var(--kit-fg-inverse);
+  --color-kit-line: var(--kit-line);
+  --color-kit-line-strong: var(--kit-line-strong);
+  --color-kit-line-subtle: var(--kit-line-subtle);
+  --color-kit-field-border: var(--kit-field-border);
+  --color-kit-focus-ring: var(--kit-focus-ring);
+  --color-kit-accent: var(--kit-accent);
+  --color-kit-accent-hover: var(--kit-accent-hover);
+  --color-kit-accent-soft: var(--kit-accent-soft);
+  --color-kit-accent-soft-2: var(--kit-accent-soft-2);
+  --color-kit-accent-softer: var(--kit-accent-softer);
+  --color-kit-accent-line: var(--kit-accent-line);
+  --color-kit-accent-fg: var(--kit-accent-fg);
+  --color-kit-accent-on: var(--kit-accent-on);
+  --color-kit-success: var(--kit-success);
+  --color-kit-success-soft: var(--kit-success-soft);
+  --color-kit-success-softer: var(--kit-success-softer);
+  --color-kit-success-line: var(--kit-success-line);
+  --color-kit-success-fg: var(--kit-success-fg);
+  --color-kit-success-on: var(--kit-success-on);
+  --color-kit-warning: var(--kit-warning);
+  --color-kit-warning-soft: var(--kit-warning-soft);
+  --color-kit-warning-softer: var(--kit-warning-softer);
+  --color-kit-warning-line: var(--kit-warning-line);
+  --color-kit-warning-fg: var(--kit-warning-fg);
+  --color-kit-warning-on: var(--kit-warning-on);
+  --color-kit-danger: var(--kit-danger);
+  --color-kit-danger-soft: var(--kit-danger-soft);
+  --color-kit-danger-softer: var(--kit-danger-softer);
+  --color-kit-danger-line: var(--kit-danger-line);
+  --color-kit-danger-fg: var(--kit-danger-fg);
+  --color-kit-danger-on: var(--kit-danger-on);
+  --color-kit-info: var(--kit-info);
+  --color-kit-info-soft: var(--kit-info-soft);
+  --color-kit-info-softer: var(--kit-info-softer);
+  --color-kit-info-line: var(--kit-info-line);
+  --color-kit-info-fg: var(--kit-info-fg);
+  --color-kit-info-on: var(--kit-info-on);
+  --color-kit-canvas: var(--kit-canvas);
+  --color-kit-code: var(--kit-code);
+  --color-kit-control-bg: var(--kit-control-bg);
+  --color-kit-field-bg: var(--kit-field-bg);
+  --color-kit-field-border-hover: var(--kit-field-border-hover);
+  --color-kit-field-border-focus: var(--kit-field-border-focus);
+  --color-kit-switch-off: var(--kit-switch-off);
+  --color-kit-control-thumb: var(--kit-control-thumb);
+  --color-kit-swatch-ring: var(--kit-swatch-ring);
+  --color-kit-on-inverse-2: var(--kit-on-inverse-2);
+  --color-kit-canvas-select: var(--kit-canvas-select);
+  --color-kit-canvas-select-on: var(--kit-canvas-select-on);
+  --color-kit-canvas-select-soft: var(--kit-canvas-select-soft);
+  --color-kit-canvas-accent-soft: var(--kit-canvas-accent-soft);
+  --color-kit-canvas-frame-ring: var(--kit-canvas-frame-ring);
+  --color-kit-syntax-keyword: var(--kit-syntax-keyword);
+  --color-kit-syntax-string: var(--kit-syntax-string);
+  --color-kit-syntax-number: var(--kit-syntax-number);
+  --color-kit-syntax-property: var(--kit-syntax-property);
+  --color-kit-syntax-comment: var(--kit-syntax-comment);
+  --color-kit-syntax-punct: var(--kit-syntax-punct);
+  --color-kit-tag-sky-bg: var(--kit-tag-sky-bg);
+  --color-kit-tag-sky-hover: var(--kit-tag-sky-hover);
+  --color-kit-tag-sky-fg: var(--kit-tag-sky-fg);
+  --color-kit-tag-sky-line: var(--kit-tag-sky-line);
+  --color-kit-tag-lavender-bg: var(--kit-tag-lavender-bg);
+  --color-kit-tag-lavender-hover: var(--kit-tag-lavender-hover);
+  --color-kit-tag-lavender-fg: var(--kit-tag-lavender-fg);
+  --color-kit-tag-lavender-line: var(--kit-tag-lavender-line);
+  --color-kit-tag-mint-bg: var(--kit-tag-mint-bg);
+  --color-kit-tag-mint-hover: var(--kit-tag-mint-hover);
+  --color-kit-tag-mint-fg: var(--kit-tag-mint-fg);
+  --color-kit-tag-mint-line: var(--kit-tag-mint-line);
+  --color-kit-tag-sand-bg: var(--kit-tag-sand-bg);
+  --color-kit-tag-sand-hover: var(--kit-tag-sand-hover);
+  --color-kit-tag-sand-fg: var(--kit-tag-sand-fg);
+  --color-kit-tag-sand-line: var(--kit-tag-sand-line);
+  --color-kit-tag-butter-bg: var(--kit-tag-butter-bg);
+  --color-kit-tag-butter-hover: var(--kit-tag-butter-hover);
+  --color-kit-tag-butter-fg: var(--kit-tag-butter-fg);
+  --color-kit-tag-butter-line: var(--kit-tag-butter-line);
+  --color-kit-tag-coral-bg: var(--kit-tag-coral-bg);
+  --color-kit-tag-coral-hover: var(--kit-tag-coral-hover);
+  --color-kit-tag-coral-fg: var(--kit-tag-coral-fg);
+  --color-kit-tag-coral-line: var(--kit-tag-coral-line);
+  --color-kit-tag-slate-bg: var(--kit-tag-slate-bg);
+  --color-kit-tag-slate-hover: var(--kit-tag-slate-hover);
+  --color-kit-tag-slate-fg: var(--kit-tag-slate-fg);
+  --color-kit-tag-slate-line: var(--kit-tag-slate-line);
+  --color-kit-tag-teal-bg: var(--kit-tag-teal-bg);
+  --color-kit-tag-teal-hover: var(--kit-tag-teal-hover);
+  --color-kit-tag-teal-fg: var(--kit-tag-teal-fg);
+  --color-kit-tag-teal-line: var(--kit-tag-teal-line);
+  --color-kit-tag-rose-bg: var(--kit-tag-rose-bg);
+  --color-kit-tag-rose-hover: var(--kit-tag-rose-hover);
+  --color-kit-tag-rose-fg: var(--kit-tag-rose-fg);
+  --color-kit-tag-rose-line: var(--kit-tag-rose-line);
+  --color-kit-type-text-bg: var(--kit-type-text-bg);
+  --color-kit-type-text-fg: var(--kit-type-text-fg);
+  --color-kit-type-text-line: var(--kit-type-text-line);
+  --color-kit-type-number-bg: var(--kit-type-number-bg);
+  --color-kit-type-number-fg: var(--kit-type-number-fg);
+  --color-kit-type-number-line: var(--kit-type-number-line);
+  --color-kit-type-choice-bg: var(--kit-type-choice-bg);
+  --color-kit-type-choice-fg: var(--kit-type-choice-fg);
+  --color-kit-type-choice-line: var(--kit-type-choice-line);
+  --color-kit-type-date-bg: var(--kit-type-date-bg);
+  --color-kit-type-date-fg: var(--kit-type-date-fg);
+  --color-kit-type-date-line: var(--kit-type-date-line);
+  --color-kit-type-media-bg: var(--kit-type-media-bg);
+  --color-kit-type-media-fg: var(--kit-type-media-fg);
+  --color-kit-type-media-line: var(--kit-type-media-line);
+  --color-kit-type-reference-bg: var(--kit-type-reference-bg);
+  --color-kit-type-reference-fg: var(--kit-type-reference-fg);
+  --color-kit-type-reference-line: var(--kit-type-reference-line);
+  --color-kit-type-structure-bg: var(--kit-type-structure-bg);
+  --color-kit-type-structure-fg: var(--kit-type-structure-fg);
+  --color-kit-type-structure-line: var(--kit-type-structure-line);
+  --color-kit-type-advanced-bg: var(--kit-type-advanced-bg);
+  --color-kit-type-advanced-fg: var(--kit-type-advanced-fg);
+  --color-kit-type-advanced-line: var(--kit-type-advanced-line);
+  --color-kit-type-off-bg: var(--kit-type-off-bg);
+  --color-kit-type-off-fg: var(--kit-type-off-fg);
+  --color-kit-type-off-line: var(--kit-type-off-line);
+  --color-kit-desk: var(--kit-desk);
+  --color-kit-desk-card: var(--kit-desk-card);
+  --color-kit-row-selected-ring: var(--kit-row-selected-ring);
+  --color-kit-row-selected-edge: var(--kit-row-selected-edge);
+  --color-kit-row-selected-hover: var(--kit-row-selected-hover);
+  --color-kit-drop-zone-line: var(--kit-drop-zone-line);
+  --color-kit-drop-target-line: var(--kit-drop-target-line);
+  --color-kit-health-good: var(--kit-health-good);
+  --color-kit-health-tidy: var(--kit-health-tidy);
+  --color-kit-health-bad: var(--kit-health-bad);
+  --color-kit-review-safe-bg: var(--kit-review-safe-bg);
+  --color-kit-review-safe-fg: var(--kit-review-safe-fg);
+  --color-kit-review-check-bg: var(--kit-review-check-bg);
+  --color-kit-review-check-fg: var(--kit-review-check-fg);
+  --color-kit-review-breaking-bg: var(--kit-review-breaking-bg);
+  --color-kit-review-breaking-fg: var(--kit-review-breaking-fg);
+
+  --radius-kit-xs: var(--kit-radius-xs);
+  --radius-kit-sm: var(--kit-radius-sm);
+  --radius-kit-md: var(--kit-radius-md);
+  --radius-kit-lg: var(--kit-radius-lg);
+  --radius-kit-xl: var(--kit-radius-xl);
+  --radius-kit-2xl: var(--kit-radius-2xl);
+
+  --shadow-kit-xs: var(--kit-shadow-xs);
+  --shadow-kit-sm: var(--kit-shadow-sm);
+  --shadow-kit-md: var(--kit-shadow-md);
+  --shadow-kit-lg: var(--kit-shadow-lg);
+  --shadow-kit-xl: var(--kit-shadow-xl);
+  --shadow-kit-canvas-frame: var(--kit-shadow-canvas-frame);
+  --shadow-kit-device: var(--kit-shadow-device);
+  --shadow-kit-field: var(--kit-shadow-field);
+  --shadow-kit-ring-field: var(--kit-ring-field);
+
+  --text-kit-2xs: var(--kit-text-2xs);
+  --text-kit-2xs--line-height: var(--kit-text-2xs--line-height);
+  --text-kit-xs: var(--kit-text-xs);
+  --text-kit-xs--line-height: var(--kit-text-xs--line-height);
+  --text-kit-sm: var(--kit-text-sm);
+  --text-kit-sm--line-height: var(--kit-text-sm--line-height);
+  --text-kit-base: var(--kit-text-base);
+  --text-kit-base--line-height: var(--kit-text-base--line-height);
+  --text-kit-md: var(--kit-text-md);
+  --text-kit-md--line-height: var(--kit-text-md--line-height);
+  --text-kit-lg: var(--kit-text-lg);
+  --text-kit-lg--line-height: var(--kit-text-lg--line-height);
+  --text-kit-xl: var(--kit-text-xl);
+  --text-kit-xl--line-height: var(--kit-text-xl--line-height);
+  --text-kit-2xl: var(--kit-text-2xl);
+  --text-kit-2xl--line-height: var(--kit-text-2xl--line-height);
+  --text-kit-3xl: var(--kit-text-3xl);
+  --text-kit-3xl--line-height: var(--kit-text-3xl--line-height);
+
+  --font-kit-sans: var(--kit-font-sans);
+  --font-kit-mono: var(--kit-font-mono);
+
+  --ease-kit-out-soft: var(--kit-ease-out-soft);
+  --ease-kit-spring: var(--kit-ease-spring);
+  --animate-kit-fade-in: kit-fade-in 160ms var(--kit-ease-out-soft);
+  --animate-kit-pop-in: kit-pop-in 180ms var(--kit-ease-out-soft);
+  --animate-kit-slide-up: kit-slide-up 220ms var(--kit-ease-out-soft);
+  /* The floating inspector's exit (V2 x 16 + fade). Its hide timer is FLOATING_INSPECTOR_EXIT_MS (= --motion-duration-fast). */
+  --animate-kit-sheet-out-r: kit-sheet-out-r var(--motion-duration-fast) var(--kit-ease-out-soft) forwards;
+  --animate-kit-pulse-dot: kit-pulse-dot 1.8s ease-in-out infinite; /* V2 index.css:931 */
+}
+
+/* Kit surface and interaction utilities (moved from the dashboard sheet with the tokens; the kit's ui/ files use them). */
+/* V2 floating surfaces (demo index.css:979-993) as utilities, for canvas chrome drawn over the site.
+   .glass: the block toolbar, its menus and field popovers (add `border` for the hairline).
+   .glass-ink: ink bars and chips, dark in both themes; --shadow-ink lifts it off the page in dark.
+   .kit-ink-pill: the small ink chip ("Drop to swap", drag readouts): .glass-ink + 6px radius, 12/16 medium. */
+@utility glass {
+  background-color: var(--kit-surface);
+  border-color: var(--kit-line);
+  box-shadow: 0 1px 2px rgb(16 16 16 / 0.04), 0 8px 24px -6px rgb(16 16 16 / 0.12);
+  &:is(.dark *) {
+    background-color: var(--kit-surface-raised);
+    border-color: var(--kit-line-strong);
+    box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.04), 0 12px 32px -8px oklch(0.12 0.01 286 / 0.5);
+  }
+}
+@utility glass-ink {
+  background-color: var(--ink-bg);
+  color: var(--ink-fg);
+  box-shadow: var(--shadow-ink);
+}
+/* V2 .glass-strong (index.css:988-996): the selection bubble, slash panel and image toolbar */
+@utility glass-strong {
+  background-color: var(--kit-surface);
+  border-color: var(--kit-line);
+  box-shadow: 0 1px 2px rgb(16 16 16 / 0.05), 0 16px 40px -8px rgb(16 16 16 / 0.18);
+  &:is(.dark *) {
+    background-color: var(--kit-surface-raised);
+    border-color: var(--kit-line-strong);
+    box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.05), 0 16px 40px -8px oklch(0.12 0.01 286 / 0.58);
+  }
+}
+/* V2 .bg-tray (index.css:1019): action tray, solid surface + gradient, no blur (D21) */
+@utility bg-tray {
+  background-color: var(--kit-surface);
+  background-image: var(--kit-tray-gradient);
+}
+/* V2 .btn-solid (index.css:1017): solid disabled buttons take the solid disabled pair in dark */
+@utility btn-solid {
+  &:is(.dark *):disabled {
+    background-color: var(--kit-disabled-bg);
+    color: var(--kit-disabled-fg);
+    opacity: 1;
+    box-shadow: none;
+  }
+}
+/* V2 .skeleton (index.css:1024) */
+/* A small control's hit area grown to the floor without moving anything: 40px with a mouse,
+   44px on touch (ui-polish #8). The inset follows the control's own size, `--hit-size` (24px when
+   unset): `hit-area [--hit-size:16px]` on a 16px icon. Never on two neighbours whose grown areas
+   would overlap; a control already at the floor gets no inset (the min(0px, …) clamp). */
+@utility hit-area {
+  position: relative;
+  &::before {
+    content: "";
+    position: absolute;
+    inset: min(0px, calc((var(--hit-size, 24px) - 40px) / 2));
+  }
+  @media (pointer: coarse) {
+    &::before { inset: min(0px, calc((var(--hit-size, 24px) - 44px) / 2)); }
+  }
+}
+
+@utility skeleton {
+  background: linear-gradient(90deg, var(--kit-skeleton) 0, var(--kit-skeleton-shine) 40%, var(--kit-skeleton) 80%);
+  background-size: 800px 100%;
+  animation: kit-shimmer 1.6s linear infinite;
+}
+@utility kit-ink-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  border-radius: var(--kit-radius-md);
+  padding: 0.25rem 0.625rem;
+  font-size: var(--kit-text-xs);
+  line-height: var(--kit-text-xs--line-height);
+  font-weight: 500;
+  white-space: nowrap;
+  background-color: var(--ink-bg);
+  color: var(--ink-fg);
+  box-shadow: var(--shadow-ink);
+}
+

package/dist/theme.d.ts

@@ -0,0 +1,22 @@
+/**
+ * `@bettercms-ai/kit/theme`: the light/dark scheme for a kit surface outside the dashboard (a custom dock input's
+ * iframe, a standalone page). Dark is `.dark` on an ancestor (tokens.css `.dark`), kit islands are `data-kit-scope`.
+ *
+ * The scheme belongs to the document: portalled layers (popovers, tooltips, toasts) mount on <body>, so a dark island
+ * inside a light document would render its layers light. A scheme is therefore applied to the document element, never
+ * to the island. The mismatch warning and the rest of the KitRoot contract are spec'd in kit-ports-spec.md §5.
+ */
+import { type ReactNode } from "react";
+export type KitScheme = "light" | "dark";
+/** Puts `scheme` on `root`: `.dark` on or off, and the native color-scheme. */
+export declare function applyScheme(root: HTMLElement, scheme: KitScheme): void;
+export interface KitRootProps {
+    children?: ReactNode;
+    /** "inherit" (default) keeps the document's scheme; light / dark applies it to the document element */
+    scheme?: KitScheme | "inherit";
+    /** "surface" paints bg-kit-surface (the default); "transparent" lets a host-provided surface show through */
+    surface?: "surface" | "transparent";
+    className?: string;
+}
+/** A kit island: `data-kit-scope` (the kit's base element defaults) on the kit surface, in the document's scheme. */
+export declare function KitRoot({ children, scheme, surface, className }: KitRootProps): import("react/jsx-runtime").JSX.Element;

package/dist/theme.js

@@ -0,0 +1,43 @@
+import { KIT_SCOPE } from "./ui/surfaces.js";
+import { useLayoutEffect } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/theme.tsx
+/**
+* `@bettercms-ai/kit/theme`: the light/dark scheme for a kit surface outside the dashboard (a custom dock input's
+* iframe, a standalone page). Dark is `.dark` on an ancestor (tokens.css `.dark`), kit islands are `data-kit-scope`.
+*
+* The scheme belongs to the document: portalled layers (popovers, tooltips, toasts) mount on <body>, so a dark island
+* inside a light document would render its layers light. A scheme is therefore applied to the document element, never
+* to the island. The mismatch warning and the rest of the KitRoot contract are spec'd in kit-ports-spec.md §5.
+*/
+/** Puts `scheme` on `root`: `.dark` on or off, and the native color-scheme. */
+function applyScheme(root, scheme) {
+	root.classList.toggle("dark", scheme === "dark");
+	root.style.colorScheme = scheme;
+}
+/** The scheme the document already declares (`.dark`, or an inline color-scheme from applyScheme); null = none yet. */
+function declaredScheme(root) {
+	if (root.classList.contains("dark")) return "dark";
+	return root.style.colorScheme === "light" || root.style.colorScheme === "dark" ? root.style.colorScheme : null;
+}
+var isProduction = () => globalThis.process?.env?.NODE_ENV === "production";
+/** A kit island: `data-kit-scope` (the kit's base element defaults) on the kit surface, in the document's scheme. */
+function KitRoot({ children, scheme = "inherit", surface = "surface", className }) {
+	useLayoutEffect(() => {
+		if (scheme === "inherit") return;
+		const root = document.documentElement;
+		const current = declaredScheme(root);
+		if (current && current !== scheme && !isProduction()) console.warn(`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.`);
+		applyScheme(root, scheme);
+	}, [scheme]);
+	const cls = [surface === "surface" ? "bg-kit-surface text-kit-fg" : null, className].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsx("div", {
+		...KIT_SCOPE,
+		className: cls || void 0,
+		children
+	});
+}
+//#endregion
+export { KitRoot, applyScheme };
+
+//# sourceMappingURL=theme.js.map

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"}