@jini-ai/ui 0.3.14 → 0.4.1

package/dist/features/tabbed-dialog/styles/tabbed-dialog.css

@@ -1,144 +1,11 @@
-/**
- * Default visual theme for `TabbedDialog` (the generic tabbed-dialog shell) and, by
- * extension, for `SettingsDialogShell` and any other host that composes it — the shell
- * component itself ships no CSS; it emits `jini-tabbed-dialog-*` class names and is
- * deliberately style-free so a host can dress it however it likes. This stylesheet is the
- * OPT-IN default look; import it to get a finished dialog, skip it to style from scratch.
- *
- * Split out of `../../settings/dialog/styles/settings-dialog.css` (2026-08-13) when the
- * shell itself was extracted into this product-neutral module: that file still carries the
- * `tabs/*` content styling (fields, cards, agent lists, byok forms, …) and `@import`s this
- * one so its four existing consumers keep receiving the complete rule set without adding a
- * second import. A new, non-Settings host of `TabbedDialog` can import just this file
- * (`@jini-ai/ui/tabbed-dialog.css`) for the chrome alone.
- *
- * Every value below resolves through a CSS custom property declared in the `:root` block.
- * That indirection IS the override mechanism: redefine any token downstream (in a later
- * stylesheet, or on a wrapper element) and the whole dialog re-skins without forking a
- * single rule. Nothing here uses a hard-coded color outside that block. The tokens live in
- * THIS file (rather than only in `settings-dialog.css`) because the chrome rules below
- * depend on them directly — a host importing only this stylesheet still needs a rendered
- * dialog, not just unstyled structure.
- *
- * Dark mode follows `prefers-color-scheme` and can be forced either way with
- * `data-theme="dark"` / `data-theme="light"` on any ancestor — which is what
- * `AppearanceTab`'s `applyAppearanceToDocument` already stamps onto
- * `document.documentElement`.
- */
-
-:root {
-  --jini-bg-panel: #fdfcfa;
-  --jini-bg-subtle: #f4f5f7;
-  --jini-bg-elevated: #fffefc;
-  --jini-border: #e1e5eb;
-  --jini-border-strong: #c9d0da;
-
-  --jini-text: #1a1916;
-  --jini-text-strong: #0d0c0a;
-  --jini-text-muted: #74716b;
-  --jini-text-disabled: #b3b0a8;
-
-  --jini-accent: #c96442;
-  --jini-accent-hover: #b45a3b;
-
-  --jini-success: #1f7a3a;
-  --jini-danger: #9c2a25;
-  --jini-warning: #b26200;
-
-  --jini-backdrop: rgba(28, 27, 26, 0.42);
-  --jini-shadow-xs: 0 1px 0 rgba(28, 27, 26, 0.04);
-  --jini-shadow-md: 0 6px 24px rgba(28, 27, 26, 0.07), 0 2px 6px rgba(28, 27, 26, 0.04);
-  --jini-shadow-lg: 0 24px 60px rgba(28, 27, 26, 0.16), 0 8px 16px rgba(28, 27, 26, 0.07);
-
-  --jini-radius-xs: 4px;
-  --jini-radius-sm: 6px;
-  --jini-radius: 8px;
-  /* Ported alongside OD's real Connectors/Skills CSS (2026-07-31) — OD's
-     `.skills-row`/`.ds-picker-popover` reach for a 10px radius distinct
-     from both `--radius` (8px, generic cards) and `--radius-lg` (12px,
-     modals/gate cards); rather than round that down to an existing step
-     and lose the distinction OD's own scale makes, this token was added. */
-  --jini-radius-md: 10px;
-  --jini-radius-lg: 12px;
-  --jini-radius-pill: 999px;
-
-  --jini-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
-  --jini-modal-padding: 24px;
-  --jini-sidebar-width: 240px;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --jini-bg-panel: #222120;
-    --jini-bg-subtle: #252321;
-    --jini-bg-elevated: #2a2825;
-    --jini-border: #333128;
-    --jini-border-strong: #46433c;
-
-    --jini-text: #e8e4dc;
-    --jini-text-strong: #f2ede4;
-    --jini-text-muted: #9a9690;
-    --jini-text-disabled: #4e4b46;
-
-    --jini-accent: #d97a56;
-    --jini-accent-hover: #e8896a;
-
-    --jini-success: #4caf72;
-    --jini-danger: #e06b65;
-    --jini-warning: #e09a40;
-
-    --jini-backdrop: rgba(0, 0, 0, 0.55);
-    --jini-shadow-xs: 0 1px 0 rgba(0, 0, 0, 0.2);
-    --jini-shadow-md: 0 6px 24px rgba(0, 0, 0, 0.4), 0 2px 6px rgba(0, 0, 0, 0.25);
-    --jini-shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.6), 0 8px 16px rgba(0, 0, 0, 0.3);
-  }
-}
-
-/* Explicit theme selection always wins over the media query, in both
-   directions — a host toggle must be able to force light inside a dark OS. */
-:root[data-theme='dark'],
-[data-theme='dark'] {
-  --jini-bg-panel: #222120;
-  --jini-bg-subtle: #252321;
-  --jini-bg-elevated: #2a2825;
-  --jini-border: #333128;
-  --jini-border-strong: #46433c;
-  --jini-text: #e8e4dc;
-  --jini-text-strong: #f2ede4;
-  --jini-text-muted: #9a9690;
-  --jini-text-disabled: #4e4b46;
-  --jini-accent: #d97a56;
-  --jini-accent-hover: #e8896a;
-  --jini-success: #4caf72;
-  --jini-danger: #e06b65;
-  --jini-warning: #e09a40;
-  --jini-backdrop: rgba(0, 0, 0, 0.55);
-  --jini-shadow-xs: 0 1px 0 rgba(0, 0, 0, 0.2);
-  --jini-shadow-md: 0 6px 24px rgba(0, 0, 0, 0.4), 0 2px 6px rgba(0, 0, 0, 0.25);
-  --jini-shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.6), 0 8px 16px rgba(0, 0, 0, 0.3);
-}
-
-:root[data-theme='light'],
-[data-theme='light'] {
-  --jini-bg-panel: #fdfcfa;
-  --jini-bg-subtle: #f4f5f7;
-  --jini-bg-elevated: #fffefc;
-  --jini-border: #e1e5eb;
-  --jini-border-strong: #c9d0da;
-  --jini-text: #1a1916;
-  --jini-text-strong: #0d0c0a;
-  --jini-text-muted: #74716b;
-  --jini-text-disabled: #b3b0a8;
-  --jini-accent: #c96442;
-  --jini-accent-hover: #b45a3b;
-  --jini-success: #1f7a3a;
-  --jini-danger: #9c2a25;
-  --jini-warning: #b26200;
-  --jini-backdrop: rgba(28, 27, 26, 0.42);
-  --jini-shadow-xs: 0 1px 0 rgba(28, 27, 26, 0.04);
-  --jini-shadow-md: 0 6px 24px rgba(28, 27, 26, 0.07), 0 2px 6px rgba(28, 27, 26, 0.04);
-  --jini-shadow-lg: 0 24px 60px rgba(28, 27, 26, 0.16), 0 8px 16px rgba(28, 27, 26, 0.07);
-}
+/* The shell emits jini-tabbed-dialog-* classes without importing CSS, so hosts can choose this
+   opt-in default chrome or supply their own styling. SettingsDialogShell imports this stylesheet
+   through settings-dialog.css; other hosts can import @jini-ai/ui/tabbed-dialog.css alone.
+
+   The shared variable import makes that standalone choice usable. Override its custom properties
+   downstream or on a wrapper to reskin the chrome without copying the rules; content-tab styles
+   remain separate from this shell. */
+@import "../../../styles/variables.css";
 
 /* ============================================================
    Dialog chrome

package/dist/features/tabbed-dialog/types.d.ts

@@ -8,7 +8,7 @@
  * chrome. `SettingsDialogShell` now composes this module and supplies its own
  * settings-flavoured label defaults (`t('Settings')`, `t('Settings sections')`, …) — see
  * that component's doc comment. Original provenance: `SettingsDialog.tsx` (8,538 lines) in
- * the vendored OD reference tree — see `packages/ui/source-map.md`.
+ * the vendored OD reference tree — see `packages/ui/archived provenance ledger`.
  *
  * Only the dialog SHELL (sidebar nav + active-panel switching + modal chrome) is modeled
  * here; a host supplies its own tabs as tab entries.

package/dist/features/tabbed-dialog/types.js

@@ -8,7 +8,7 @@
  * chrome. `SettingsDialogShell` now composes this module and supplies its own
  * settings-flavoured label defaults (`t('Settings')`, `t('Settings sections')`, …) — see
  * that component's doc comment. Original provenance: `SettingsDialog.tsx` (8,538 lines) in
- * the vendored OD reference tree — see `packages/ui/source-map.md`.
+ * the vendored OD reference tree — see `packages/ui/archived provenance ledger`.
  *
  * Only the dialog SHELL (sidebar nav + active-panel switching + modal chrome) is modeled
  * here; a host supplies its own tabs as tab entries.

package/dist/features/version-manager/ports.d.ts

@@ -25,7 +25,7 @@ export interface VersionManagerPort<TVersion extends VersionRecord = VersionReco
      * `fileVersionPreviewOptions` (deck-sniffing, base-href resolution) is
      * shared infrastructure the eventual `@jini-ai/renderers-react` sandbox
      * core should own, which does not exist yet (see
-     * `packages/ui/source-map.md`'s `html-viewer` section). A host with a
+     * `packages/ui/archived provenance ledger`'s `html-viewer` section). A host with a
      * real sandbox core implements this by delegating to it; a host without
      * one can just return `content` unchanged for a plain, unsandboxed
      * preview. Either way this feature stays decoupled from that

package/dist/features/version-manager/react/components/VersionPromptPopover.js

@@ -11,9 +11,11 @@ export function VersionPromptPopover({ prompt, disabled, copied, onCopy, onOpenC
     const [open, setOpen] = useState(false);
     const wrapRef = useRef(null);
     const popoverId = useId();
-    useDismissOnOutsideOrEscape(() => {
-        setOpen(false);
-        onOpenChange?.(false);
+    useDismissOnOutsideOrEscape({
+        onDismiss: () => {
+            setOpen(false);
+            onOpenChange?.(false);
+        },
     }, { enabled: open, containerRef: wrapRef });
     return (_jsxs("div", { className: "jini-version-prompt-popover-wrap", ref: wrapRef, children: [_jsx("button", { type: "button", className: `jini-version-prompt-toggle${open ? ' active' : ''}`, "aria-expanded": open, "aria-controls": open ? popoverId : undefined, disabled: disabled, onClick: () => {
                     const next = !open;

package/dist/features/version-manager/react/components/VersionRestoreControl.js

@@ -10,7 +10,7 @@ export function VersionRestoreControl({ disabled, restoring, onRestore }) {
     const [confirmOpen, setConfirmOpen] = useState(false);
     const wrapRef = useRef(null);
     const popoverId = useId();
-    useDismissOnOutsideOrEscape(() => setConfirmOpen(false), { enabled: confirmOpen, containerRef: wrapRef });
+    useDismissOnOutsideOrEscape({ onDismiss: () => setConfirmOpen(false) }, { enabled: confirmOpen, containerRef: wrapRef });
     return (_jsxs("div", { className: "jini-version-restore-wrap", ref: wrapRef, children: [_jsx("button", { type: "button", className: `jini-viewer-action primary jini-version-restore-action${confirmOpen ? ' active' : ''}`, disabled: disabled, "aria-haspopup": "dialog", "aria-expanded": confirmOpen, "aria-controls": confirmOpen ? popoverId : undefined, onClick: () => setConfirmOpen((value) => !value), children: restoring ? t('Restoring…') : t('Restore this version') }), confirmOpen ? (_jsxs("div", { className: "jini-version-restore-confirm", id: popoverId, role: "dialog", "aria-label": t('Restore this version?'), children: [_jsx("h3", { children: t('Restore this version?') }), _jsx("p", { children: t('The file’s current content will be replaced with this version.') }), _jsxs("div", { className: "jini-version-restore-confirm-actions", children: [_jsx("button", { type: "button", className: "jini-viewer-action", onClick: () => setConfirmOpen(false), children: t('Cancel') }), _jsx("button", { type: "button", className: "jini-viewer-action primary", disabled: disabled, onClick: () => {
                                     setConfirmOpen(false);
                                     onRestore();

package/dist/features/version-manager/types.d.ts

@@ -3,7 +3,7 @@
  * modal shell.
  *
  * Source: a vendored OD file-viewer god-component's version-history modal
- * (`FileVersionManagerModal`). See `packages/ui/source-map.md`'s
+ * (`FileVersionManagerModal`). See `packages/ui/archived provenance ledger`'s
  * `html-viewer` classification section for full provenance, the prior
  * (incorrect) "OD-specific, saturated with analytics/deploy" filing this
  * corrects, and what was deliberately left as a host-injected port.

package/dist/features/version-manager/types.js

@@ -3,7 +3,7 @@
  * modal shell.
  *
  * Source: a vendored OD file-viewer god-component's version-history modal
- * (`FileVersionManagerModal`). See `packages/ui/source-map.md`'s
+ * (`FileVersionManagerModal`). See `packages/ui/archived provenance ledger`'s
  * `html-viewer` classification section for full provenance, the prior
  * (incorrect) "OD-specific, saturated with analytics/deploy" filing this
  * corrects, and what was deliberately left as a host-injected port.

package/dist/features/viewer-shell/dependencies.js

@@ -5,7 +5,7 @@ import { copyToClipboard } from '../../utils/copy-to-clipboard.js';
  *  `features/connectors/`'s `createBrowserConnectorAuthPendingStorage`. */
 export function createBrowserViewerClipboard() {
     return {
-        copyText: (text) => copyToClipboard(text),
+        copyText: (text) => copyToClipboard({ text }),
     };
 }
 export function createDefaultViewerShellDependencies() {

package/dist/features/viewer-shell/ports.d.ts

@@ -1,6 +1,6 @@
 /**
  * This feature is almost entirely presentational + pure logic (no fetch, no
- * project/file transport — see `packages/ui/source-map.md` for why the
+ * project/file transport — see `packages/ui/archived provenance ledger` for why the
  * actual file-content loading, saving, and rendering pipelines were left
  * out of scope). The one thing every consumer still needs a real browser
  * API for is copy-to-clipboard, so that's the one injectable seam here,

package/dist/features/viewer-shell/react/components/ViewportSwitcher.js

@@ -25,7 +25,7 @@ export function ViewportSwitcher({ presets, viewport, onViewport, ariaLabel, tab
     const menuRef = useRef(null);
     const listboxId = useId();
     const activePreset = presets.find((preset) => preset.id === viewport) ?? presets[0];
-    useDismissOnOutsideOrEscape(() => setOpen(false), { enabled: open, containerRef: menuRef });
+    useDismissOnOutsideOrEscape({ onDismiss: () => setOpen(false) }, { enabled: open, containerRef: menuRef });
     if (!activePreset)
         return null;
     const activeLabel = activePreset.title ?? activePreset.label;

package/dist/features/viewer-shell/react/hooks/useMarkdownScrollSync.d.ts

@@ -26,7 +26,7 @@ export interface UseMarkdownScrollSyncResult {
  * measured). This is the generic mechanism behind the source component's
  * split-pane markdown viewer — ported without its artifact-status gate, its
  * autosave/upload pipeline, and its shiki-based syntax highlighting (all
- * genuinely OD/product-specific; see `packages/ui/source-map.md`).
+ * genuinely OD/product-specific; see `packages/ui/archived provenance ledger`).
  */
 export declare function useMarkdownScrollSync(options: UseMarkdownScrollSyncOptions): UseMarkdownScrollSyncResult;
 //# sourceMappingURL=useMarkdownScrollSync.d.ts.map

package/dist/features/viewer-shell/react/hooks/useMarkdownScrollSync.js

@@ -8,7 +8,7 @@ import { computeSplitPaneScrollTarget, measureEditorBlockOffsets, measurePreview
  * measured). This is the generic mechanism behind the source component's
  * split-pane markdown viewer — ported without its artifact-status gate, its
  * autosave/upload pipeline, and its shiki-based syntax highlighting (all
- * genuinely OD/product-specific; see `packages/ui/source-map.md`).
+ * genuinely OD/product-specific; see `packages/ui/archived provenance ledger`).
  */
 export function useMarkdownScrollSync(options) {
     const { mode, sourceText, editorRef, previewRef, previewSelector, resyncKey } = options;

package/dist/features/viewer-shell/types.d.ts

@@ -5,7 +5,7 @@
  * media-viewer shell (image/video/audio/svg/text/binary/document/sketch
  * viewers all wrap the same toolbar+body chrome around a
  * `{name,size,mtime}`-shaped file reference), plus its comment side-panel
- * and markdown split-pane. See `packages/ui/source-map.md`'s
+ * and markdown split-pane. See `packages/ui/archived provenance ledger`'s
  * `features/viewer-shell/` section for full provenance and what was
  * deliberately dropped.
  *

package/dist/features/viewer-shell/types.js

@@ -5,7 +5,7 @@
  * media-viewer shell (image/video/audio/svg/text/binary/document/sketch
  * viewers all wrap the same toolbar+body chrome around a
  * `{name,size,mtime}`-shaped file reference), plus its comment side-panel
- * and markdown split-pane. See `packages/ui/source-map.md`'s
+ * and markdown split-pane. See `packages/ui/archived provenance ledger`'s
  * `features/viewer-shell/` section for full provenance and what was
  * deliberately dropped.
  *