@jini-ai/ui 0.3.14 → 0.4.0

package/dist/renderers/renderers/markdown.js

@@ -3,7 +3,7 @@
  * `apps/web/src/artifacts/markdown.ts` in the origin project — no
  * product-specific logic in the original, just table-pipe-escaping + a few HTML
  * post-processing passes (safe external links, table wrapper class,
- * alignment-attribute → CSS). See `source-map.md`.
+ * alignment-attribute → CSS). See `archived provenance ledger`.
  */
 import { micromark } from 'micromark';
 import { gfm, gfmHtml } from 'micromark-extension-gfm';
@@ -115,7 +115,7 @@ export const MarkdownRenderer = {
     supportsStreaming: true,
     renderPartial: renderMarkdownToSafeHtml,
     canRender: ({ file }) => {
-        const manifest = resolveArtifactManifest(file);
+        const manifest = resolveArtifactManifest({ file: file });
         if (!manifest)
             return false;
         if (manifest.renderer === 'markdown' || manifest.kind === 'markdown-document')

package/dist/renderers/renderers/react-component.js

@@ -10,7 +10,7 @@ export const ReactComponentRenderer = {
     id: 'react-component',
     supportsStreaming: false,
     canRender: ({ file }) => {
-        const manifest = resolveArtifactManifest(file);
+        const manifest = resolveArtifactManifest({ file: file });
         if (!manifest)
             return false;
         return manifest.kind === 'react-component' || manifest.renderer === 'react-component';

package/dist/renderers/renderers/svg.js

@@ -3,7 +3,7 @@ export const SvgRenderer = {
     id: 'svg',
     supportsStreaming: false,
     canRender: ({ file }) => {
-        const manifest = resolveArtifactManifest(file);
+        const manifest = resolveArtifactManifest({ file: file });
         if (!manifest)
             return false;
         if (manifest.renderer === 'svg' || manifest.kind === 'svg')

package/dist/renderers/shiki.js

@@ -5,7 +5,7 @@ const CACHE_MAX = 128;
 // 'toml', 'dockerfile' — this package's pinned `shiki` version's
 // `bundle/web` (a deliberately size-trimmed, browser-focused subset) does
 // not ship grammars for those, so they're dropped here rather than typed
-// around with a cast that would fail at runtime. See `source-map.md`.
+// around with a cast that would fail at runtime. See `archived provenance ledger`.
 function getHighlighter() {
     if (!highlighterPromise) {
         highlighterPromise = import('shiki/bundle/web').then(({ createHighlighter }) => createHighlighter({

package/dist/renderers/srcdoc/build.d.ts

@@ -9,7 +9,7 @@
  * CSS tweaks palette, manual-edit overlay, snapshot/export-capture) — those
  * are that product's own UI protocols. They become `SrcDocBridge` plugins a
  * host registers via `bridges` (see `bridge.ts`), not built-ins. See
- * `source-map.md` for the full file-by-file breakdown.
+ * `archived provenance ledger` for the full file-by-file breakdown.
  */
 import { type SrcDocBridge } from './bridge.js';
 export interface BuildSrcDocOptions {

package/dist/renderers/srcdoc/build.js

@@ -9,7 +9,7 @@
  * CSS tweaks palette, manual-edit overlay, snapshot/export-capture) — those
  * are that product's own UI protocols. They become `SrcDocBridge` plugins a
  * host registers via `bridges` (see `bridge.ts`), not built-ins. See
- * `source-map.md` for the full file-by-file breakdown.
+ * `archived provenance ledger` for the full file-by-file breakdown.
  */
 import { applySrcDocBridges } from './bridge.js';
 /**

package/dist/renderers/url-load-decision.d.ts

@@ -14,7 +14,7 @@
  * replaces that fixed list with `activeBridgeIds`, so any host-registered
  * `SrcDocBridge` (see `srcdoc/bridge.ts`) can force srcDoc mode by declaring
  * itself active, without this package knowing the bridge's name in advance.
- * See `source-map.md`.
+ * See `archived provenance ledger`.
  */
 export interface UrlLoadDecision {
     /** Whether the viewer is showing the rendered preview vs. the raw source. */

package/dist/renderers/url-load-decision.js

@@ -14,7 +14,7 @@
  * replaces that fixed list with `activeBridgeIds`, so any host-registered
  * `SrcDocBridge` (see `srcdoc/bridge.ts`) can force srcDoc mode by declaring
  * itself active, without this package knowing the bridge's name in advance.
- * See `source-map.md`.
+ * See `archived provenance ledger`.
  */
 /**
  * Returns true when an HTML file's preview iframe should load directly from

package/dist/styles/admin.css

@@ -0,0 +1,273 @@
+@import "./variables.css";
+
+/* Legacy admin spellings derive from the single contract. */
+:root, [data-admin-theme], [data-color-scheme] {
+  
+  --bg: var(--jini-bg);
+  --surface: var(--jini-bg-panel);
+  --surface-2: var(--jini-bg-subtle);
+  --surface-3: var(--jini-bg-elevated);
+
+  
+  --fg-1: var(--jini-text-strong);
+  --fg: var(--jini-text);
+  --fg-2: var(--jini-text-secondary);
+  --fg-3: var(--jini-text-muted);
+  --muted: var(--jini-text-muted);
+  --faint: var(--jini-text-faint);
+
+  
+  --border: var(--jini-border);
+  --border-strong: var(--jini-border-strong);
+
+  
+  --accent: var(--jini-neutral-accent);
+  --accent-ink: var(--jini-neutral-accent-ink);
+  --accent-text: var(--jini-neutral-accent-text);
+  --accent-dim: var(--jini-neutral-accent-soft);
+  --accent-ring: var(--jini-neutral-accent-ring);
+
+  
+  --primary: var(--jini-accent);
+  --primary-strong: var(--jini-accent-strong);
+  --primary-ink: var(--jini-accent-ink);
+  --primary-dim: var(--jini-accent-soft);
+  --primary-ring: var(--jini-accent-ring);
+
+  
+  --link: var(--jini-link);
+  --link-ink: var(--jini-link-ink);
+
+  
+  --ok: var(--jini-success);
+  --ok-bg: var(--jini-success-bg);
+  --ok-solid: var(--jini-success-solid);
+  --ok-solid-ink: var(--jini-success-solid-ink);
+  --danger: var(--jini-danger);
+  --danger-bg: var(--jini-danger-bg);
+  --warning: var(--jini-warning);
+  --warning-bg: var(--jini-warning-bg);
+
+  
+  --font-display: var(--jini-font-display);
+  --font-ui: var(--jini-font-ui);
+  --font-mono: var(--jini-font-mono);
+
+  --text-2xs: var(--jini-font-size-2xs);
+  --text-xs: var(--jini-font-size-xs);
+  --text-sm: var(--jini-font-size-sm);
+  --text-base: var(--jini-font-size-base);
+  --text-md: var(--jini-font-size-md);
+  --text-lg: var(--jini-font-size-lg);
+  --text-xl: var(--jini-font-size-xl);
+
+  
+  --r-sm: var(--jini-radius-sm);
+  --r-md: var(--jini-radius-md);
+  --r-lg: var(--jini-radius-lg);
+  --r-pill: var(--jini-radius-pill);
+  
+  --radius-md: var(--jini-radius-md);
+
+  
+  --space-1: var(--jini-space-1);
+  --space-2: var(--jini-space-2);
+  --space-3: var(--jini-space-3);
+  --space-4: var(--jini-space-4);
+  --space-5: var(--jini-space-5);
+  --space-6: var(--jini-space-6);
+  --space-7: var(--jini-space-7);
+  --space-8: var(--jini-space-8);
+
+  
+  --shadow-sm: var(--jini-shadow-sm);
+  --shadow-md: var(--jini-shadow-md);
+}
+
+
+.select-trigger {
+  width: 100%; box-sizing: border-box;
+  display: inline-flex; align-items: center; justify-content: space-between; gap: var(--jini-space-2);
+  background: var(--jini-bg-elevated); color: var(--jini-text);
+  
+  border: 1px solid color-mix(in oklab, var(--jini-accent) 45%, var(--jini-border-strong));
+  border-radius: var(--jini-radius-sm); padding: 0.55rem 0.7rem; min-height: 37px;
+  font-family: var(--jini-font-ui); font-size: var(--jini-font-size-sm); font-weight: 400; letter-spacing: normal;
+  cursor: pointer; text-align: left;
+  transition: border-color 0.14s, box-shadow 0.14s;
+}
+.select-trigger:hover { opacity: 1; }
+.select-trigger:focus-visible, .select-trigger[aria-expanded="true"] {
+  outline: none; border-color: var(--jini-accent); box-shadow: 0 0 0 3px var(--jini-accent-ring);
+}
+.select-trigger:disabled { cursor: default; border-color: var(--jini-border-strong); background: var(--jini-bg-subtle); color: var(--jini-text-disabled); }
+.select-trigger-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.select-trigger-label.is-placeholder { color: var(--jini-text-disabled); }
+
+.select-trigger-chevron {
+  width: 14px; height: 14px; flex-shrink: 0;
+  background: currentColor;
+  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3.5 5.5 7 9l3.5-3.5' fill='none' stroke='currentColor' stroke-width='1.5'/%3E%3C/svg%3E") center / 14px no-repeat;
+  background-repeat: no-repeat; background-position: center; background-size: 14px;
+}
+
+.select-panel {
+  position: fixed; z-index: 50;
+  display: flex; flex-direction: column;
+  background: var(--jini-bg-elevated); border: 1px solid var(--jini-border-strong); border-radius: var(--jini-radius);
+  box-shadow: var(--jini-shadow-md); overflow: hidden;
+}
+.select-panel:focus { outline: none; } 
+.select-search {
+  margin: var(--jini-space-2); width: auto; 
+}
+.select-list {
+  list-style: none; margin: 0; padding: var(--jini-space-1) 0;
+  flex: 1 1 auto; min-height: 0; overflow-y: auto;
+}
+.select-empty {
+  padding: var(--jini-space-3); font-size: var(--jini-font-size-sm); color: var(--jini-text-muted); text-align: center;
+}
+.select-option {
+  display: flex; align-items: center; justify-content: space-between; gap: var(--jini-space-2);
+  padding: 0.5rem 0.75rem; font-size: var(--jini-font-size-sm); color: var(--jini-text); cursor: pointer;
+}
+.select-option:hover, .select-option.is-highlighted { background: var(--jini-bg-subtle); }
+
+.select-option.is-selected {
+  background: color-mix(in oklab, var(--jini-accent) 14%, var(--jini-bg-elevated));
+  color: var(--jini-accent);
+  font-weight: 600;
+}
+.select-option.is-selected.is-highlighted {
+  background: color-mix(in oklab, var(--jini-accent) 22%, var(--jini-bg-elevated));
+}
+.select-option-check { flex-shrink: 0; width: 16px; height: 16px; color: var(--jini-accent); }
+
+.see-more {
+  display: block;
+}
+
+.see-more .see-more-text {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: var(--see-more-lines, 2);
+  overflow: hidden;
+  white-space: normal;
+  overflow-wrap: anywhere; 
+  text-overflow: clip;
+}
+
+.see-more .see-more-text.is-expanded {
+  display: block;
+  -webkit-line-clamp: unset;
+  overflow: visible;
+}
+
+.see-more .see-more-toggle {
+  display: inline-block;
+  margin-top: 0.15rem;
+  padding: 0;
+  background: none;
+  border: none;
+  border-radius: 0;
+  color: var(--jini-accent);
+  font-family: inherit;
+  font-size: var(--jini-font-size-sm);
+  font-weight: 500;
+  letter-spacing: normal;
+  text-align: left;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.see-more .see-more-toggle:hover {
+  opacity: 1;
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+.info-tip { position: relative; display: inline-flex; margin-left: 0.35rem; vertical-align: middle; }
+.info-tip-icon {
+  display: inline-flex; align-items: center; justify-content: center;
+  width: 1.1rem; height: 1.1rem; border-radius: 50%; color: var(--jini-text-disabled);
+  font-size: 0.95rem; line-height: 1; cursor: pointer;
+}
+.info-tip:hover .info-tip-icon, .info-tip:focus-within .info-tip-icon { color: var(--jini-accent); }
+.info-tip-icon:focus-visible { outline: 2px solid var(--jini-accent); outline-offset: 2px; border-radius: 50%; }
+.info-tip-bubble {
+  position: fixed; transform: translate(-50%, calc(-100% - 8px));
+  width: max-content; max-width: 18rem; padding: 0.55rem 0.75rem; border-radius: var(--jini-radius-sm);
+  background: var(--jini-bg-panel); color: var(--jini-text); font-size: 0.78rem; font-weight: 400;
+  line-height: 1.4; letter-spacing: normal; text-transform: none;
+  box-shadow: 0 4px 16px var(--jini-backdrop); border: 1px solid var(--jini-border);
+  pointer-events: none; z-index: 1000;
+}
+.info-tip-bubble::after {
+  content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
+  border: 5px solid transparent; border-top-color: var(--jini-bg-panel);
+}
+
+.info-tip-bubble-below { transform: translate(-50%, 8px); }
+.info-tip-bubble-below::after {
+  top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: var(--jini-bg-panel);
+}
+
+.tab-bar { display: flex; flex-wrap: wrap; gap: 0.3rem; border-bottom: 1px solid var(--jini-border); margin-bottom: 1.3rem; }
+
+.tab-bar-item {
+  display: inline-flex; align-items: center;
+  background: none; border: none; border-bottom: 2px solid transparent; border-radius: 0;
+  padding: 0.65rem 0.9rem; font-family: var(--jini-font-ui); font-size: var(--jini-font-size-sm); font-weight: 600;
+  color: var(--jini-text-muted); cursor: pointer; transition: color 0.14s, border-color 0.14s; flex-shrink: 0;
+}
+.tab-bar-item:hover { background: none; color: var(--jini-text); opacity: 1; }
+.tab-bar-item[aria-selected="true"] { color: var(--jini-accent); border-bottom-color: var(--jini-accent); }
+.tab-bar-count { margin-left: 0.4rem; font-size: var(--jini-font-size-2xs); color: var(--jini-text-disabled); font-variant-numeric: tabular-nums; }
+.tab-bar-item[aria-selected="true"] .tab-bar-count { color: var(--jini-accent); opacity: 0.75; }
+
+.tab-bar-tag {
+  margin-left: 0.4rem; font-size: 9px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
+  color: var(--jini-text-disabled); border: 1px solid var(--jini-border); padding: 1px 5px; border-radius: 5px;
+}
+.tab-bar-item[aria-selected="true"] .tab-bar-tag { color: var(--jini-accent); opacity: 0.75; }
+
+.tab-bar-dot { width: 0.4rem; height: 0.4rem; border-radius: 50%; background: var(--jini-success); margin-right: 0.4rem; flex-shrink: 0; }
+
+.tab-bar-icon { display: inline-flex; align-items: center; margin-right: 0.4rem; flex-shrink: 0; width: 1em; height: 1em; color: currentColor; }
+
+.tab-bar-item:disabled { color: var(--jini-text-disabled); background: none; cursor: not-allowed; }
+.tab-bar-item:disabled:hover { color: var(--jini-text-disabled); background: none; }
+.tab-bar-item:disabled .tab-bar-count { color: var(--jini-text-disabled); }
+
+.tab-bar .visually-hidden { position: absolute; top: 0; left: 0; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
+
+.coming-soon-panel .settings-ui-inert-note {
+  margin: 0 0 12px; padding: 10px 14px; font-size: 12px; line-height: 1.5;
+  color: var(--jini-text-muted); background: var(--jini-bg-subtle);
+  border: 1px dashed var(--jini-border); border-radius: var(--jini-radius-sm);
+}
+.coming-soon-panel .settings-ui-inert-control { opacity: 0.55; }
+
+.image-preview-modal {
+  border: none; padding: 0; background: transparent; max-width: 90vw; max-height: 90vh;
+}
+.image-preview-modal[open] { display: block; }
+.image-preview-modal::backdrop { background: var(--jini-backdrop); }
+.image-preview-modal img { display: block; max-width: 90vw; max-height: 90vh; width: auto; height: auto; border-radius: var(--jini-radius-lg); box-shadow: var(--jini-shadow-md); }
+.image-preview-modal-close {
+  position: absolute; top: 0.7rem; right: 0.7rem; width: 2.1rem; height: 2.1rem; border-radius: 50%;
+  display: flex; align-items: center; justify-content: center;
+  background: var(--jini-bg-panel); color: var(--jini-text); font-size: 1.3rem; line-height: 1;
+  
+  border: 1px solid var(--jini-border); box-shadow: var(--jini-shadow-md);
+}
+.image-preview-modal-close:hover { background: var(--jini-bg-subtle); opacity: 1; }
+.select-search { box-sizing: border-box; padding: .5rem .7rem; background: var(--jini-bg-elevated); color: var(--jini-text); border: 1px solid var(--jini-border); border-radius: var(--jini-radius-sm); font: inherit; }
+.tab-bar-item:focus-visible { outline: 2px solid var(--jini-accent); outline-offset: 2px; }
+.coming-soon-notice-kicker { color: var(--jini-text-muted); font-size: .75rem; }
+.coming-soon-notice h1 { margin: 0 0 .4rem; }
+.coming-soon-notice p { color: var(--jini-text-muted); }
+
+.admin-layout { background: var(--jini-bg); color: var(--jini-text); font-family: var(--jini-font-body); }
+.admin-layout :is(h1, h2, h3) { font-family: var(--jini-font-heading); }

package/dist/styles/variables.css

@@ -0,0 +1,117 @@
+/** The sole variable contract. Products override it through AdminTheme data. */
+:root, [data-admin-theme], [data-color-scheme="light"] {
+  color-scheme: light;
+  --jini-bg: var(--jini-theme-light-bg, #ffffff);
+  --jini-surface: var(--jini-theme-light-surface, #f5f5f5);
+  --jini-text: var(--jini-theme-light-text, #202020);
+  --jini-muted: var(--jini-theme-light-muted, #666666);
+  --jini-border: var(--jini-theme-light-border, #d9d9d9);
+  --jini-primary: var(--jini-theme-light-primary, #363636);
+  --jini-primary-ink: var(--jini-theme-light-primary-ink, #ffffff);
+  --jini-danger: var(--jini-theme-light-danger, #b42318);
+  --jini-success: var(--jini-theme-light-success, #18763b);
+  --jini-warning: var(--jini-theme-light-warning, #845800);
+}
+
+[data-color-scheme="dark"] {
+  color-scheme: dark;
+  --jini-bg: var(--jini-theme-dark-bg, #171717);
+  --jini-surface: var(--jini-theme-dark-surface, #242424);
+  --jini-text: var(--jini-theme-dark-text, #f0f0f0);
+  --jini-muted: var(--jini-theme-dark-muted, #b3b3b3);
+  --jini-border: var(--jini-theme-dark-border, #454545);
+  --jini-primary: var(--jini-theme-dark-primary, #e0e0e0);
+  --jini-primary-ink: var(--jini-theme-dark-primary-ink, #202020);
+  --jini-danger: var(--jini-theme-dark-danger, #ff8b80);
+  --jini-success: var(--jini-theme-dark-success, #79d69b);
+  --jini-warning: var(--jini-theme-dark-warning, #ebc36b);
+}
+
+:root {
+  --jini-font-body: system-ui, sans-serif;
+  --jini-font-heading: system-ui, sans-serif;
+  --jini-font-mono: ui-monospace, monospace;
+  --jini-radius: 8px;
+  --jini-density: 1;
+}
+
+:root, [data-admin-theme], [data-color-scheme] {
+  --jini-bg-panel: var(--jini-surface);
+  --jini-bg-subtle: color-mix(in srgb, var(--jini-surface) 75%, var(--jini-bg));
+  --jini-bg-elevated: var(--jini-surface);
+  --jini-border-soft: var(--jini-border);
+  --jini-border-strong: color-mix(in srgb, var(--jini-border) 75%, var(--jini-text));
+  --jini-backdrop: color-mix(in srgb, var(--jini-text) 42%, transparent);
+  --jini-text-strong: var(--jini-text);
+  --jini-text-secondary: color-mix(in srgb, var(--jini-text) 80%, var(--jini-bg));
+  --jini-text-muted: var(--jini-muted);
+  --jini-text-faint: color-mix(in srgb, var(--jini-muted) 75%, var(--jini-bg));
+  --jini-text-disabled: color-mix(in srgb, var(--jini-muted) 60%, var(--jini-bg));
+  --jini-accent: var(--jini-primary);
+  --jini-accent-hover: color-mix(in srgb, var(--jini-primary) 88%, var(--jini-text));
+  --jini-accent-strong: color-mix(in srgb, var(--jini-primary) 85%, var(--jini-bg));
+  --jini-accent-ink: var(--jini-primary-ink);
+  --jini-accent-soft: color-mix(in srgb, var(--jini-primary) 10%, transparent);
+  --jini-accent-ring: color-mix(in srgb, var(--jini-primary) 22%, transparent);
+  --jini-neutral-accent: var(--jini-text);
+  --jini-neutral-accent-hover: var(--jini-muted);
+  --jini-neutral-accent-ink: var(--jini-bg);
+  --jini-neutral-accent-text: var(--jini-text);
+  --jini-neutral-accent-soft: color-mix(in srgb, var(--jini-text) 7%, transparent);
+  --jini-neutral-accent-ring: color-mix(in srgb, var(--jini-text) 16%, transparent);
+  --jini-link: var(--jini-primary);
+  --jini-link-ink: var(--jini-primary-ink);
+  --jini-success-bg: color-mix(in srgb, var(--jini-success) 12%, var(--jini-bg));
+  --jini-success-solid: var(--jini-success);
+  --jini-success-solid-ink: var(--jini-bg);
+  --jini-danger-bg: color-mix(in srgb, var(--jini-danger) 12%, var(--jini-bg));
+  --jini-warning-bg: color-mix(in srgb, var(--jini-warning) 12%, var(--jini-bg));
+  --jini-font-ui: var(--jini-font-body);
+  --jini-font-display: var(--jini-font-heading);
+  --jini-shadow-xs: 0 1px 0 color-mix(in srgb, var(--jini-text) 4%, transparent);
+  --jini-shadow-sm: 0 1px 3px color-mix(in srgb, var(--jini-text) 10%, transparent);
+  --jini-shadow-md: 0 6px 24px color-mix(in srgb, var(--jini-text) 15%, transparent);
+  --jini-shadow-lg: 0 24px 60px color-mix(in srgb, var(--jini-text) 22%, transparent);
+  --jini-radius-xs: calc(var(--jini-radius) * 0.5);
+  --jini-radius-sm: calc(var(--jini-radius) * 0.75);
+  /* The middle radius keeps compact rows/popovers distinct from generic cards and modal chrome:
+     at the default 8px base it is 10px, between the 8px card and 12px modal steps. */
+  --jini-radius-md: calc(var(--jini-radius) * 1.25);
+  --jini-radius-lg: calc(var(--jini-radius) * 1.5);
+  --jini-radius-pill: 999px;
+  --jini-space-1: calc(0.25rem * var(--jini-density));
+  --jini-space-2: calc(0.5rem * var(--jini-density));
+  --jini-space-3: calc(0.75rem * var(--jini-density));
+  --jini-space-4: calc(1rem * var(--jini-density));
+  --jini-space-5: calc(1.25rem * var(--jini-density));
+  --jini-space-6: calc(1.5rem * var(--jini-density));
+  --jini-space-7: calc(2rem * var(--jini-density));
+  --jini-space-8: calc(2.5rem * var(--jini-density));
+  --jini-font-size-2xs: 0.6875rem;
+  --jini-font-size-xs: 0.75rem;
+  --jini-font-size-sm: 0.8125rem;
+  --jini-font-size-base: 0.875rem;
+  --jini-font-size-md: 0.95rem;
+  --jini-font-size-lg: 1.05rem;
+  --jini-font-size-xl: 1.65rem;
+  --jini-font-weight-normal: 400;
+  --jini-font-weight-medium: 500;
+  --jini-font-weight-semibold: 600;
+  --jini-font-weight-bold: 700;
+  --jini-line-tight: 1.25;
+  --jini-line-normal: 1.5;
+  --jini-line-relaxed: 1.7;
+  --jini-duration-fast: 120ms;
+  --jini-duration-base: 200ms;
+  --jini-duration-slow: 320ms;
+  --jini-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
+  --jini-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+  --jini-transition-base: var(--jini-duration-base) var(--jini-ease-out);
+  --jini-z-dropdown: 100;
+  --jini-z-sticky: 200;
+  --jini-z-overlay: 300;
+  --jini-z-modal: 400;
+  --jini-z-toast: 500;
+  --jini-modal-padding: 24px;
+  --jini-sidebar-width: 240px;
+}

package/dist/theme/apply.d.ts

@@ -0,0 +1,9 @@
+import type { AdminTheme, AdminThemeDocument, AdminThemeTarget } from './types.js';
+/** Install both palettes on the injected scope and load fonts. Cleanup restores the host. */
+export declare function applyAdminTheme({ theme }: {
+    readonly theme: AdminTheme;
+}, { target, document }: {
+    readonly target: AdminThemeTarget;
+    readonly document: AdminThemeDocument;
+}): () => void;
+//# sourceMappingURL=apply.d.ts.map

package/dist/theme/apply.js

@@ -0,0 +1,77 @@
+import { defaultAdminTheme } from './default.js';
+import { adminThemeColorKeys, validateAdminTheme } from './validation.js';
+const fontLeases = new WeakMap();
+function acquireFont(document, href) {
+    const leases = fontLeases.get(document) ?? new Map();
+    fontLeases.set(document, leases);
+    const absolute = new URL(href, document.baseURI).href;
+    let lease = leases.get(absolute);
+    if (!lease) {
+        const existing = Array.from(document.head.querySelectorAll('link[rel="stylesheet"]')).find((link) => link.href === absolute);
+        const link = existing ?? document.createElement('link');
+        if (!existing) {
+            link.rel = 'stylesheet';
+            link.href = absolute;
+            link.setAttribute('data-jini-theme-font', '');
+            document.head.appendChild(link);
+        }
+        lease = { link, owned: !existing, users: 0 };
+        leases.set(absolute, lease);
+    }
+    const held = lease;
+    held.users++;
+    return () => { if (--held.users === 0) {
+        if (held.owned)
+            held.link.remove();
+        leases.delete(absolute);
+    } };
+}
+/** Install both palettes on the injected scope and load fonts. Cleanup restores the host. */
+export function applyAdminTheme({ theme }, { target, document }) {
+    const checked = validateAdminTheme({ theme });
+    if (!checked.valid)
+        throw new TypeError(checked.errors.join('; '));
+    const values = {};
+    for (const scheme of ['light', 'dark'])
+        for (const key of adminThemeColorKeys) {
+            values[`--jini-theme-${scheme}-${key.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`)}`] = theme[scheme][key];
+        }
+    values['--jini-font-body'] = theme.fonts.body;
+    values['--jini-font-heading'] = theme.fonts.heading;
+    values['--jini-font-mono'] = theme.fonts.mono ?? defaultAdminTheme.fonts.mono;
+    values['--jini-radius'] = theme.radius ?? defaultAdminTheme.radius;
+    values['--jini-density'] = String(theme.density ?? defaultAdminTheme.density);
+    const before = Object.keys(values).map((key) => ({ key, value: target.style.getPropertyValue(key), priority: target.style.getPropertyPriority(key) }));
+    const previousName = target.getAttribute('data-admin-theme');
+    const releases = [];
+    const restore = () => {
+        for (const { key, value, priority } of before) {
+            if (value)
+                target.style.setProperty(key, value, priority);
+            else
+                target.style.removeProperty(key);
+        }
+        if (previousName === null)
+            target.removeAttribute('data-admin-theme');
+        else
+            target.setAttribute('data-admin-theme', previousName);
+        releases.forEach((release) => release());
+    };
+    try {
+        for (const [key, value] of Object.entries(values))
+            target.style.setProperty(key, value);
+        target.setAttribute('data-admin-theme', theme.name);
+        for (const href of new Set(theme.fonts.load ?? []))
+            releases.push(acquireFont(document, href));
+    }
+    catch (error) {
+        restore();
+        throw error;
+    }
+    let active = true;
+    return () => { if (active) {
+        active = false;
+        restore();
+    } };
+}
+//# sourceMappingURL=apply.js.map

package/dist/theme/color-scheme.d.ts

@@ -0,0 +1,8 @@
+import type { ColorScheme, ColorSchemePreference, MatchMediaPort } from './types.js';
+/** Explicit choices are deterministic; system resolution requires the host's media port. */
+export declare function resolveColorScheme({ preference }: {
+    readonly preference: ColorSchemePreference;
+}, { matchMedia }?: {
+    readonly matchMedia?: MatchMediaPort;
+}): ColorScheme;
+//# sourceMappingURL=color-scheme.d.ts.map

package/dist/theme/color-scheme.js

@@ -0,0 +1,9 @@
+/** Explicit choices are deterministic; system resolution requires the host's media port. */
+export function resolveColorScheme({ preference }, { matchMedia } = {}) {
+    if (preference === 'light' || preference === 'dark')
+        return preference;
+    if (preference !== 'system' || !matchMedia)
+        throw new TypeError('System color scheme requires matchMedia');
+    return matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+}
+//# sourceMappingURL=color-scheme.js.map

package/dist/theme/default.d.ts

@@ -0,0 +1,4 @@
+import type { AdminTheme } from './types.js';
+/** Neutral chrome. Products supply their own brand theme instead of forking CSS. */
+export declare const defaultAdminTheme: AdminTheme;
+//# sourceMappingURL=default.d.ts.map

package/dist/theme/default.js

@@ -0,0 +1,11 @@
+/** Neutral chrome. Products supply their own brand theme instead of forking CSS. */
+export const defaultAdminTheme = Object.freeze({
+    name: 'neutral',
+    fonts: Object.freeze({ body: 'system-ui, sans-serif', heading: 'system-ui, sans-serif', mono: 'ui-monospace, monospace' }),
+    light: Object.freeze({ primary: '#363636', primaryInk: '#ffffff', bg: '#ffffff', surface: '#f5f5f5',
+        text: '#202020', muted: '#666666', border: '#d9d9d9', danger: '#b42318', success: '#18763b', warning: '#845800' }),
+    dark: Object.freeze({ primary: '#e0e0e0', primaryInk: '#202020', bg: '#171717', surface: '#242424',
+        text: '#f0f0f0', muted: '#b3b3b3', border: '#454545', danger: '#ff8b80', success: '#79d69b', warning: '#ebc36b' }),
+    radius: '8px', density: 1,
+});
+//# sourceMappingURL=default.js.map

package/dist/theme/index.d.ts

@@ -0,0 +1,6 @@
+export type { AdminTheme, AdminThemeColors, AdminThemeTarget, AdminThemeDocument, ColorScheme, ColorSchemePreference, MatchMediaPort } from './types.js';
+export { defaultAdminTheme } from './default.js';
+export { validateAdminTheme } from './validation.js';
+export { applyAdminTheme } from './apply.js';
+export { resolveColorScheme } from './color-scheme.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/theme/index.js

@@ -0,0 +1,5 @@
+export { defaultAdminTheme } from './default.js';
+export { validateAdminTheme } from './validation.js';
+export { applyAdminTheme } from './apply.js';
+export { resolveColorScheme } from './color-scheme.js';
+//# sourceMappingURL=index.js.map

package/dist/theme/stylesheet.d.ts

@@ -0,0 +1,8 @@
+import type { AdminTheme, ColorScheme } from './types.js';
+/** Internal document adapter: isolated previews cannot inherit the admin's stylesheet. */
+export declare function renderAdminThemeVariables({ theme }: {
+    readonly theme: AdminTheme;
+}, { colorScheme }?: {
+    readonly colorScheme?: ColorScheme;
+}): string;
+//# sourceMappingURL=stylesheet.d.ts.map

package/dist/theme/stylesheet.js

@@ -0,0 +1,14 @@
+import { adminThemeColorKeys, validateAdminTheme } from './validation.js';
+import { defaultAdminTheme } from './default.js';
+/** Internal document adapter: isolated previews cannot inherit the admin's stylesheet. */
+export function renderAdminThemeVariables({ theme }, { colorScheme = 'light' } = {}) {
+    if (colorScheme !== 'light' && colorScheme !== 'dark')
+        throw new TypeError('Invalid resolved color scheme');
+    const checked = validateAdminTheme({ theme });
+    if (!checked.valid)
+        throw new TypeError(checked.errors.join('; '));
+    const values = adminThemeColorKeys.map((key) => `--jini-${key.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`)}:${theme[colorScheme][key]};`);
+    values.push(`--jini-font-body:${theme.fonts.body};`, `--jini-font-heading:${theme.fonts.heading};`, `--jini-font-mono:${theme.fonts.mono ?? defaultAdminTheme.fonts.mono};`, `--jini-radius:${theme.radius ?? defaultAdminTheme.radius};`);
+    return `:root{color-scheme:${colorScheme};${values.join('')}}`;
+}
+//# sourceMappingURL=stylesheet.js.map