@jini-ai/ui 0.5.4 → 0.5.6

package/dist/styles/variables.css

@@ -145,3 +145,131 @@
   --jini-modal-padding: 24px;
   --jini-sidebar-width: 240px;
 }
+
+/* Material/role contract (ADR-069). Theme inputs are owned by admin's default theme or
+   a host theme. Structural consumers opt into these roles at their existing paint owners.
+   Existing palette fallbacks above remain for hosts that have not imported a theme yet. */
+:root, [data-admin-theme], [data-color-scheme] {
+  --jini-app-bg: var(--jini-theme-app-bg, var(--jini-default-app-bg)); /* Application canvas background. */
+  --jini-shell-bg: var(--jini-theme-shell-bg, var(--jini-bg)); /* Shell over the application canvas. */
+  --jini-panel-bg: var(--jini-theme-panel-bg, var(--jini-default-panel-bg)); /* Card/panel fill. */
+  --jini-panel-border: var(--jini-theme-panel-border, var(--jini-default-panel-border)); /* Card/panel border color. */
+  --jini-panel-shadow: var(--jini-theme-panel-shadow, var(--jini-default-panel-shadow)); /* Card/panel elevation. */
+  --jini-panel-backdrop: var(--jini-theme-panel-backdrop); /* Panel backdrop-filter. */
+  --jini-panel-texture: var(--jini-theme-panel-texture); /* Panel background-image layer. */
+  --jini-rail-bg: var(--jini-theme-rail-bg, var(--jini-panel-bg)); /* Navigation rail fill. */
+  --jini-rail-border: var(--jini-theme-rail-border, var(--jini-panel-border)); /* Navigation rail edge. */
+  --jini-rail-shadow: var(--jini-theme-rail-shadow, none); /* Navigation rail elevation. */
+  --jini-rail-backdrop: var(--jini-theme-rail-backdrop, var(--jini-panel-backdrop, none)); /* Rail frost layer. */
+  --jini-overlay-bg: var(--jini-theme-overlay-bg, var(--jini-default-overlay-bg)); /* Modal scrim background. */
+  --jini-overlay-backdrop: var(--jini-theme-overlay-backdrop); /* Modal scrim backdrop-filter. */
+  --jini-overlay-shadow: var(--jini-theme-overlay-shadow, var(--jini-default-overlay-shadow)); /* Floating dialog elevation. */
+  --jini-control-preview-backdrop: var(--jini-theme-control-preview-backdrop, blur(6px)); /* Preview action filter. */
+  --jini-control-bg: var(--jini-theme-control-bg, var(--jini-default-control-bg)); /* Neutral input/control fill. */
+  --jini-control-border: var(--jini-theme-control-border, var(--jini-default-control-border)); /* Neutral input/control border color. */
+  --jini-control-shadow: var(--jini-theme-control-shadow); /* Resting control shadow. */
+  --jini-control-shadow-hover: var(--jini-theme-control-shadow-hover); /* Hovered control shadow. */
+  --jini-control-shadow-pressed: var(--jini-theme-control-shadow-pressed); /* Pressed control shadow. */
+  --jini-control-shadow-inset: var(--jini-theme-control-shadow-inset); /* Inset control shadow. */
+  --jini-border-width: var(--jini-theme-border-width); /* Standard primitive border width. */
+}
+
+/* Additive paint/elevation roles (ADR-069 step 2). New roles have exact compatibility
+   fallbacks here; existing material defaults remain admin-owned and unchanged. Theme inputs
+   win over fallbacks, including when inherited. Keep complete shadows and SVG images intact:
+   custom properties cannot interpolate into a data-URL SVG's stroke attribute. */
+:root, [data-admin-theme], [data-color-scheme] {
+  --jini-control-chevron-image: var(--jini-theme-control-chevron-image, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M3.5 5.5 7 9l3.5-3.5' stroke='%23666C75' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"));
+  --jini-overlay-tooltip-bg: var(--jini-theme-overlay-tooltip-bg, #fff);
+  --jini-overlay-tooltip-text: var(--jini-theme-overlay-tooltip-text, #111);
+  --jini-overlay-tooltip-border: var(--jini-theme-overlay-tooltip-border, rgba(0, 0, 0, 0.1));
+  --jini-overlay-bg-preview: var(--jini-theme-overlay-bg-preview, oklch(0% 0 0 / 0.55));
+  --jini-overlay-bg-navigation: var(--jini-theme-overlay-bg-navigation, oklch(0% 0 0 / 0.4));
+  --jini-code-string: var(--jini-theme-code-string, #4caf7a);
+  --jini-code-number: var(--jini-theme-code-number, #d1975a);
+  --jini-control-thumb-bg: var(--jini-theme-control-thumb-bg, #fff);
+  --jini-control-solid-ink: var(--jini-theme-control-solid-ink, #fff);
+  --jini-overlay-bg-lightbox: var(--jini-theme-overlay-bg-lightbox, oklch(0% 0 0 / 0.6));
+  --jini-lightbox-bg: var(--jini-theme-lightbox-bg, oklch(23% 0.005 256));
+  --jini-lightbox-ink: var(--jini-theme-lightbox-ink, oklch(97% 0 0));
+  --jini-lightbox-ink-muted: var(--jini-theme-lightbox-ink-muted, oklch(97% 0 0 / 0.58));
+  --jini-lightbox-media-bg: var(--jini-theme-lightbox-media-bg, oklch(0% 0 0 / 0.25));
+  --jini-lightbox-document-bg: var(--jini-theme-lightbox-document-bg, #fff);
+  --jini-lightbox-button-border: var(--jini-theme-lightbox-button-border, oklch(100% 0 0 / 0.16));
+  --jini-lightbox-button-bg: var(--jini-theme-lightbox-button-bg, oklch(100% 0 0 / 0.07));
+  --jini-lightbox-button-bg-hover: var(--jini-theme-lightbox-button-bg-hover, oklch(100% 0 0 / 0.15));
+  --jini-lightbox-button-border-hover: var(--jini-theme-lightbox-button-border-hover, oklch(100% 0 0 / 0.28));
+  --jini-control-media-bg: var(--jini-theme-control-media-bg, oklch(0% 0 0 / 0.55));
+  --jini-control-media-ink: var(--jini-theme-control-media-ink, oklch(100% 0 0));
+  --jini-control-media-border: var(--jini-theme-control-media-border, oklch(100% 0 0 / 0.35));
+  --jini-control-media-bg-hover: var(--jini-theme-control-media-bg-hover, oklch(0% 0 0 / 0.72));
+  --jini-overlay-bg-source: var(--jini-theme-overlay-bg-source, oklch(0% 0 0 / 0.48));
+  --jini-file-icon-folder: var(--jini-theme-file-icon-folder, oklch(72% 0.12 75));
+  --jini-file-icon-json: var(--jini-theme-file-icon-json, oklch(72% 0.13 90));
+  --jini-file-icon-markdown: var(--jini-theme-file-icon-markdown, oklch(62% 0.12 245));
+  --jini-file-icon-javascript: var(--jini-theme-file-icon-javascript, oklch(76% 0.15 95));
+  --jini-file-icon-typescript: var(--jini-theme-file-icon-typescript, oklch(60% 0.13 250));
+  --jini-file-icon-config: var(--jini-theme-file-icon-config, oklch(62% 0.14 20));
+  --jini-file-icon-html: var(--jini-theme-file-icon-html, oklch(64% 0.17 40));
+  --jini-file-icon-css: var(--jini-theme-file-icon-css, oklch(62% 0.13 280));
+  --jini-file-icon-image: var(--jini-theme-file-icon-image, oklch(64% 0.12 160));
+  --jini-file-icon-shell: var(--jini-theme-file-icon-shell, oklch(64% 0.12 145));
+  --jini-status-complete-ink-fallback: var(--jini-theme-status-complete-ink-fallback, oklch(99% 0 none));
+  --jini-control-preview-ink: var(--jini-theme-control-preview-ink, #fff);
+  --jini-control-preview-bg: var(--jini-theme-control-preview-bg, rgba(17, 17, 17, 0.42));
+  --jini-control-preview-bg-hover: var(--jini-theme-control-preview-bg-hover, rgba(17, 17, 17, 0.72));
+  --jini-control-preview-tip-bg: var(--jini-theme-control-preview-tip-bg, rgba(17, 17, 17, 0.88));
+  --jini-panel-border-muted: var(--jini-theme-panel-border-muted, #d9d9d9);
+  --jini-control-composer-border-focus: var(--jini-theme-control-composer-border-focus, oklch(70% 0.012 255));
+  --jini-overlay-bg-chat: var(--jini-theme-overlay-bg-chat, rgb(0 0 0 / 45%));
+  --jini-control-hover-neutral-bg: var(--jini-theme-control-hover-neutral-bg, rgba(127, 127, 127, 0.15));
+  --jini-control-recording-bg: var(--jini-theme-control-recording-bg, #dc2626);
+  --jini-control-recording-ink: var(--jini-theme-control-recording-ink, #ffffff);
+  --jini-control-recording-bg-hover: var(--jini-theme-control-recording-bg-hover, #b91c1c);
+  --jini-control-shadow-focus: var(--jini-theme-control-shadow-focus, 0 0 0 3px var(--jini-accent-ring));
+  --jini-overlay-tooltip-shadow: var(--jini-theme-overlay-tooltip-shadow, 0 4px 16px rgba(0, 0, 0, 0.25));
+  --jini-control-shadow-focus-subtle: var(--jini-theme-control-shadow-focus-subtle, 0 0 0 2px var(--jini-neutral-accent-soft));
+  --jini-overlay-toast-shadow: var(--jini-theme-overlay-toast-shadow, 0 8px 24px rgb(0 0 0 / 22%));
+  --jini-status-danger-shadow: var(--jini-theme-status-danger-shadow, inset 3px 0 0 var(--jini-danger));
+  --jini-control-thumb-shadow-strong: var(--jini-theme-control-thumb-shadow-strong, 0 1px 2px rgba(28, 27, 26, 0.28));
+  --jini-panel-shadow-divider: var(--jini-theme-panel-shadow-divider, inset 0 -1px 0 var(--jini-border));
+  --jini-control-shadow-focus-accent: var(--jini-theme-control-shadow-focus-accent, 0 0 0 3px color-mix(in srgb, var(--jini-accent) 18%, transparent));
+  --jini-overlay-menu-shadow-above: var(--jini-theme-overlay-menu-shadow-above, 0 -4px 14px rgba(20,28,45,0.09), 0 -1px 4px rgba(20,28,45,0.06));
+  --jini-control-shadow-selected: var(--jini-theme-control-shadow-selected, 0 0 0 1px var(--jini-accent));
+  --jini-control-shadow-swatch-selected: var(--jini-theme-control-shadow-swatch-selected, 0 0 0 2px var(--jini-bg-panel), 0 0 0 4px var(--jini-accent));
+  --jini-control-shadow-segment: var(--jini-theme-control-shadow-segment, 0 1px 2px rgb(0 0 0 / 8%));
+  --jini-panel-shadow-sticky: var(--jini-theme-panel-shadow-sticky, 0 6px 8px -6px rgb(0 0 0 / 0.14));
+  --jini-overlay-menu-shadow: var(--jini-theme-overlay-menu-shadow, 0 12px 32px rgb(0 0 0 / 12%));
+  --jini-control-shadow-segment-raised: var(--jini-theme-control-shadow-segment-raised, 0 1px 2px rgb(0 0 0 / 12%));
+  --jini-control-thumb-shadow: var(--jini-theme-control-thumb-shadow, 0 1px 2px rgb(0 0 0 / 25%));
+  --jini-panel-shadow-banner: var(--jini-theme-panel-shadow-banner, 0 2px 8px rgb(0 0 0 / 0.12));
+  --jini-status-warning-shadow: var(--jini-theme-status-warning-shadow, inset 2px 0 0 var(--jini-warning));
+  --jini-panel-shadow-flat: var(--jini-theme-panel-shadow-flat, none);
+}
+
+/* Chat uses its own stylesheet so hosts can load it independently of the admin palette.
+   Aliases live on :root only so nested theme/scheme scopes inherit ChatPane's component-local
+   values. Moving that component wiring is a later step. Classic retains its existing scoped
+   host bridge in Tovu. */
+:root {
+  --jini-chat-font-body: var(--jini-theme-chat-font-body, -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei UI", "Noto Sans", Roboto, "Helvetica Neue", Arial, sans-serif);
+  --jini-chat-font-mono: var(--jini-theme-chat-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
+  --jini-chat-popover-shadow: var(--jini-theme-chat-popover-shadow, 0 18px 46px rgba(13, 12, 10, .15), 0 2px 8px rgba(13, 12, 10, .06));
+  --jini-chat-bg: var(--jini-theme-chat-bg);
+  --jini-chat-panel: var(--jini-theme-chat-panel);
+  --jini-chat-text: var(--jini-theme-chat-text);
+  --jini-chat-text-strong: var(--jini-theme-chat-text-strong);
+  --jini-chat-muted: var(--jini-theme-chat-muted);
+  --jini-chat-faint: var(--jini-theme-chat-faint);
+  --jini-chat-border: var(--jini-theme-chat-border);
+  --jini-chat-border-strong: var(--jini-theme-chat-border-strong);
+  --jini-chat-border-soft: var(--jini-theme-chat-border-soft);
+  --jini-chat-subtle: var(--jini-theme-chat-subtle);
+  --jini-chat-accent: var(--jini-theme-chat-accent);
+  --jini-chat-accent-soft: var(--jini-theme-chat-accent-soft);
+  --jini-chat-danger: var(--jini-theme-chat-danger);
+  --jini-chat-radius: var(--jini-theme-chat-radius);
+  --jini-chat-radius-lg: var(--jini-theme-chat-radius-lg);
+  --jini-chat-user-bubble: var(--jini-theme-chat-user-bubble);
+  --jini-chat-user-bubble-ink: var(--jini-theme-chat-user-bubble-ink);
+}

package/dist/theme/apply.js

@@ -26,11 +26,7 @@ function acquireFont(document, href) {
         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('; '));
+function themeValues({ theme }, _options = {}) {
     const values = {};
     for (const scheme of ['light', 'dark'])
         for (const key of adminThemeColorKeys) {
@@ -41,6 +37,14 @@ export function applyAdminTheme({ theme }, { target, document }) {
     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);
+    return values;
+}
+/** 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 = themeValues({ theme });
     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 = [];

package/dist/utils/auto-open-file.d.ts

@@ -7,10 +7,11 @@ interface CandidateFile {
 interface AutoOpenOptions {
     readonly moduleFileNames?: ReadonlySet<string>;
 }
-export declare function decideAutoOpenAfterWrite(filePath: string, nextFiles: ReadonlyArray<CandidateFile>, options?: AutoOpenOptions): {
+type AutoOpenDecision = {
     shouldOpen: boolean;
     fileName: string | null;
 };
+export declare function decideAutoOpenAfterWrite(filePath: string, nextFiles: ReadonlyArray<CandidateFile>, options?: AutoOpenOptions): AutoOpenDecision;
 export interface SelectAutoOpenOptions {
     readonly preferSiteEntry?: boolean;
 }

package/dist/utils/auto-open-file.js

@@ -24,59 +24,51 @@ function basenameOf(p) {
     // rather than tested around.
     return p.split('/').pop();
 }
+function decline() {
+    return { shouldOpen: false, fileName: null };
+}
+function relPathOf(file) {
+    return file.path ?? file.name;
+}
+// Does the agent's `filePath` positively identify the project file at `rel`?
+function isPathSuffixMatch({ filePath, rel }) {
+    if (!rel)
+        return false;
+    // Require segment alignment: filePath ends with "/${rel}" so that
+    // "subdir/App.jsx" matches ".../subdir/App.jsx" but not
+    // ".../notsubdir/App.jsx".
+    return filePath === rel || filePath.endsWith('/' + rel);
+}
+// Resolve a positive identification into an open decision, declining files
+// that are modules of a multi-file HTML entry rather than standalone pages.
+// More than one match means multiple project files plausibly correspond to
+// this path — refuse rather than open the wrong one.
+function resolveUniqueMatch({ matches, moduleFileNames }) {
+    if (matches.length !== 1)
+        return decline();
+    const fileName = matches[0].name;
+    return moduleFileNames.has(fileName) ? decline() : { shouldOpen: true, fileName };
+}
 export function decideAutoOpenAfterWrite(filePath, nextFiles, options = {}) {
     const moduleFileNames = options.moduleFileNames ?? NO_MODULES;
-    // Resolve a positive identification into an open decision, declining files
-    // that are modules of a multi-file HTML entry rather than standalone pages.
-    const resolve = (fileName) => moduleFileNames.has(fileName)
-        ? { shouldOpen: false, fileName: null }
-        : { shouldOpen: true, fileName };
     if (!filePath)
-        return { shouldOpen: false, fileName: null };
+        return decline();
     // 1) Path-suffix match against full project-relative paths.
-    const suffixMatches = [];
-    for (const f of nextFiles) {
-        const rel = f.path ?? f.name;
-        if (!rel)
-            continue;
-        if (filePath === rel) {
-            suffixMatches.push(f);
-            continue;
-        }
-        // Require segment alignment: filePath ends with "/${rel}" so that
-        // "subdir/App.jsx" matches ".../subdir/App.jsx" but not
-        // ".../notsubdir/App.jsx".
-        if (filePath.length > rel.length && filePath.endsWith('/' + rel)) {
-            suffixMatches.push(f);
-        }
-    }
-    if (suffixMatches.length === 1) {
-        return resolve(suffixMatches[0].name);
-    }
-    if (suffixMatches.length > 1) {
-        // Multiple project files plausibly correspond to this path — refuse
-        // rather than open the wrong one.
-        return { shouldOpen: false, fileName: null };
-    }
+    const suffixMatches = nextFiles.filter((f) => isPathSuffixMatch({ filePath, rel: relPathOf(f) }));
+    if (suffixMatches.length > 0)
+        return resolveUniqueMatch({ matches: suffixMatches, moduleFileNames });
     // 2) Basename fallback only when filePath itself is just a basename.
     // If filePath contains a slash but didn't path-suffix-match anything,
     // it's an external edit that happens to share a basename — declining
     // is the whole point of the guard.
-    if (filePath.includes('/')) {
-        return { shouldOpen: false, fileName: null };
-    }
-    const basenameMatches = nextFiles.filter((f) => {
-        const rel = f.path ?? f.name;
-        return rel ? basenameOf(rel) === filePath : false;
-    });
-    if (basenameMatches.length === 1) {
-        return resolve(basenameMatches[0].name);
-    }
-    return { shouldOpen: false, fileName: null };
+    if (filePath.includes('/'))
+        return decline();
+    // A blank rel's basename is '' and can never equal the non-empty filePath.
+    const basenameMatches = nextFiles.filter((f) => basenameOf(relPathOf(f)) === filePath);
+    return resolveUniqueMatch({ matches: basenameMatches, moduleFileNames });
 }
 function isHtmlPreviewFile(file) {
-    const path = file.path ?? file.name;
-    return file.kind === 'html' || /\.html?$/i.test(path);
+    return file.kind === 'html' || /\.html?$/i.test(relPathOf(file));
 }
 // Markdown documents (plan.md, report.md, DESIGN.md, …) often render inline
 // in a viewer, so a turn that produces one should surface it just like an
@@ -84,8 +76,7 @@ function isHtmlPreviewFile(file) {
 // whose backend maps both `.md` and `.txt` to the same generic text kind
 // still opens markdown while deliberately leaving plain `.txt` alone.
 function isMarkdownPreviewFile(file) {
-    const path = file.path ?? file.name;
-    return /\.(md|markdown)$/i.test(path);
+    return /\.(md|markdown)$/i.test(relPathOf(file));
 }
 // Auto-open priority for a turn's produced files. Higher wins. HTML is the
 // primary visual deliverable, so when a turn writes both an HTML page and a
@@ -104,58 +95,51 @@ function autoOpenPreviewRank(file) {
 // files. Depth orders competing entries so the site root wins over a locale
 // or section subtree's own index.
 function siteEntryDepth(file) {
-    const path = file.path ?? file.name;
+    const path = relPathOf(file);
     if (!/(^|\/)index\.html?$/i.test(path))
         return null;
     return path.split('/').length;
 }
+// Missing or non-finite mtimes count as 0 for the newest-wins tie-break.
+function finiteMtime(file) {
+    return typeof file.mtime === 'number' && Number.isFinite(file.mtime) ? file.mtime : 0;
+}
+// The file with the highest `score` (null = not a candidate); equal scores
+// break to the newest mtime, and an mtime tie goes to the later file.
+function pickHighestScoring({ files, score }) {
+    let best = null;
+    for (const file of files) {
+        const fileScore = score(file);
+        if (fileScore === null)
+            continue;
+        const beatsBest = best === null ||
+            fileScore > best.score ||
+            (fileScore === best.score && finiteMtime(file) >= finiteMtime(best.file));
+        if (beatsBest)
+            best = { file, score: fileScore };
+    }
+    return best?.file ?? null;
+}
+// Every site entry is an `index.html`/`.htm`, so it is always an HTML preview
+// file too; the shallower entry scores higher.
+function siteEntryScore(file) {
+    const depth = siteEntryDepth(file);
+    return depth === null ? null : -depth;
+}
+function previewRankScore(file) {
+    const rank = autoOpenPreviewRank(file);
+    return rank === 0 ? null : rank;
+}
 // Pick which of a turn's produced files to auto-open in the viewer. Among
 // previewable files, a higher-priority kind always beats a lower one; ties
 // break to the most recently written file (newest mtime). Returns null when
 // the turn produced nothing previewable.
 export function selectAutoOpenProducedArtifact(producedFiles, options = {}) {
     if (options.preferSiteEntry) {
-        let entry = null;
-        let entryDepth = Number.POSITIVE_INFINITY;
-        for (const file of producedFiles) {
-            if (!isHtmlPreviewFile(file))
-                continue;
-            const depth = siteEntryDepth(file);
-            if (depth === null)
-                continue;
-            if (depth < entryDepth) {
-                entry = file;
-                entryDepth = depth;
-                continue;
-            }
-            if (depth > entryDepth || !entry)
-                continue;
-            const nextMtime = typeof file.mtime === 'number' && Number.isFinite(file.mtime) ? file.mtime : 0;
-            const entryMtime = typeof entry.mtime === 'number' && Number.isFinite(entry.mtime) ? entry.mtime : 0;
-            if (nextMtime >= entryMtime)
-                entry = file;
-        }
+        const entry = pickHighestScoring({ files: producedFiles, score: siteEntryScore });
         if (entry)
             return entry.name;
     }
-    let selected = null;
-    let selectedRank = 0;
-    for (const file of producedFiles) {
-        const rank = autoOpenPreviewRank(file);
-        if (rank === 0)
-            continue;
-        if (!selected || rank > selectedRank) {
-            selected = file;
-            selectedRank = rank;
-            continue;
-        }
-        if (rank < selectedRank)
-            continue;
-        const nextMtime = typeof file.mtime === 'number' && Number.isFinite(file.mtime) ? file.mtime : 0;
-        const selectedMtime = typeof selected.mtime === 'number' && Number.isFinite(selected.mtime) ? selected.mtime : 0;
-        if (nextMtime >= selectedMtime)
-            selected = file;
-    }
-    return selected?.name ?? null;
+    return pickHighestScoring({ files: producedFiles, score: previewRankScore })?.name ?? null;
 }
 //# sourceMappingURL=auto-open-file.js.map

package/dist/utils/markdown-scroll-sync.js

@@ -56,72 +56,50 @@ function hasVerticalProgression(offsets) {
     const first = offsets[0];
     return offsets.some((offset, index) => index > 0 && offset > first + 0.5);
 }
-/**
- * 1-based source start line of every top-level markdown block, in document
- * order. Nested blocks (list items, blockquote contents) collapse into their
- * top-level container so the result lines up 1:1 with the preview article's
- * direct element children.
- */
-export function extractMarkdownBlockLines(markdown) {
-    if (!markdown)
-        return [];
-    let events;
+function parseMarkdownEvents({ markdown }) {
     try {
-        events = postprocess(parse({ extensions: [gfm()] })
+        return postprocess(parse({ extensions: [gfm()] })
             .document()
             .write(preprocess()(markdown, undefined, true)));
     }
     catch {
-        return [];
+        return null;
     }
+}
+// Nesting depth after a container token's enter/exit event.
+function nextContainerDepth({ phase, depth }) {
+    return phase === 'enter' ? depth + 1 : Math.max(0, depth - 1);
+}
+function collectTopLevelBlockLines({ events }) {
     const lines = [];
     let depth = 0;
-    for (const event of events) {
-        const phase = event[0];
-        const token = event[1];
-        const type = token.type;
-        if (CONTAINER_TOKENS.has(type)) {
-            if (phase === 'enter') {
-                if (depth === 0)
-                    lines.push(token.start.line);
-                depth += 1;
-            }
-            else {
-                depth = Math.max(0, depth - 1);
-            }
-            continue;
-        }
-        if (phase === 'enter' && depth === 0 && FLOW_BLOCK_TOKENS.has(type)) {
+    for (const [phase, token] of events) {
+        const isContainer = CONTAINER_TOKENS.has(token.type);
+        const isTopLevelStart = phase === 'enter' && depth === 0;
+        if (isTopLevelStart && (isContainer || FLOW_BLOCK_TOKENS.has(token.type)))
             lines.push(token.start.line);
-        }
+        if (isContainer)
+            depth = nextContainerDepth({ phase, depth });
     }
     return lines;
 }
+/**
+ * 1-based source start line of every top-level markdown block, in document
+ * order. Nested blocks (list items, blockquote contents) collapse into their
+ * top-level container so the result lines up 1:1 with the preview article's
+ * direct element children.
+ */
+export function extractMarkdownBlockLines(markdown) {
+    if (!markdown)
+        return [];
+    const events = parseMarkdownEvents({ markdown });
+    return events ? collectTopLevelBlockLines({ events }) : [];
+}
 function escapeMirrorText(value) {
     return value.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
 }
-/**
- * Pixel offset (within the textarea's scrollable content) of each block's
- * start line, accounting for soft-wrapping. Measured with a hidden mirror that
- * mimics the textarea's wrapping so the offsets stay accurate even when long
- * lines wrap. Returns `null` when measurement is not possible.
- */
-export function measureEditorBlockOffsets(textarea, blockLines, text) {
-    // The `typeof document === 'undefined'` half of this guard is real,
-    // intentional SSR-safety API contract (documented in this function's own
-    // JSDoc), but is empirically unreachable through this repo's actual call
-    // graph today: its only caller (`useMarkdownScrollSync`) only ever
-    // invokes it with an already browser-mounted `HTMLTextAreaElement` ref,
-    // which cannot exist without `document` already existing. A real test
-    // would require either reintroducing this package's own documented
-    // `@vitest/coverage-v8` jsdom/node branch-merge bug (see
-    // `features/html-viewer/dependencies`'s precedent in
-    // packages/ui/archived provenance ledger) or hand-faking this function's full
-    // `innerHTML`/`querySelectorAll`/`getComputedStyle` surface under plain
-    // Node — disproportionate to a defensive guard with no reachable path.
-    // See packages/ui/archived provenance ledger's 2026-07-22 dated entry.
-    if (blockLines.length === 0 || typeof document === 'undefined')
-        return null;
+// A hidden off-screen div styled to wrap text exactly like `textarea`.
+function createMirror({ textarea }) {
     const computed = window.getComputedStyle(textarea);
     const mirror = document.createElement('div');
     const style = mirror.style;
@@ -142,23 +120,30 @@ export function measureEditorBlockOffsets(textarea, blockLines, text) {
     style.width = `${textarea.clientWidth}px`;
     if (style.whiteSpace === 'normal' || !style.whiteSpace)
         style.whiteSpace = 'pre-wrap';
-    const lines = text.split('\n');
+    return mirror;
+}
+// Block indices grouped by the (clamped, 0-based) source line they start on.
+function groupBlocksByLine({ blockLines, lineCount }) {
     const markersByLine = new Map();
     blockLines.forEach((line, blockIndex) => {
-        const lineIndex = Math.max(0, Math.min(lines.length - 1, line - 1));
+        const lineIndex = Math.max(0, Math.min(lineCount - 1, line - 1));
         const existing = markersByLine.get(lineIndex);
         if (existing)
             existing.push(blockIndex);
         else
             markersByLine.set(lineIndex, [blockIndex]);
     });
+    return markersByLine;
+}
+// The escaped `text` with an empty `data-md-block` marker span in front of
+// every block's start line.
+function buildMirrorMarkup({ blockLines, text }) {
+    const lines = text.split('\n');
+    const markersByLine = groupBlocksByLine({ blockLines, lineCount: lines.length });
     let buffer = '';
     for (let i = 0; i < lines.length; i += 1) {
-        const markers = markersByLine.get(i);
-        if (markers) {
-            for (const blockIndex of markers)
-                buffer += `<span data-md-block="${blockIndex}"></span>`;
-        }
+        for (const blockIndex of markersByLine.get(i) ?? [])
+            buffer += `<span data-md-block="${blockIndex}"></span>`;
         // `text.split('\n')` always yields a dense array (never a hole), so
         // `lines[i]` for `i` in `[0, lines.length)` is always a defined string
         // (possibly `''`) — the `?? ''` fallback this used to have was dead
@@ -168,25 +153,51 @@ export function measureEditorBlockOffsets(textarea, blockLines, text) {
         if (i < lines.length - 1)
             buffer += '\n';
     }
-    mirror.innerHTML = buffer;
+    return buffer;
+}
+// Lay the mirror out in the document just long enough to read each marker's
+// offsetTop. Every marker span comes from `buildMirrorMarkup` (the text itself
+// is escaped, so it cannot inject one), so each index is a valid block index.
+function readMarkerOffsets({ mirror, blockCount }) {
     document.body.appendChild(mirror);
-    const offsets = new Array(blockLines.length).fill(0);
+    const offsets = new Array(blockCount).fill(0);
     try {
-        const markers = mirror.querySelectorAll('span[data-md-block]');
-        for (const marker of Array.from(markers)) {
-            const blockIndex = Number(marker.getAttribute('data-md-block'));
-            if (Number.isInteger(blockIndex) && blockIndex >= 0 && blockIndex < offsets.length) {
-                offsets[blockIndex] = marker.offsetTop;
-            }
+        for (const marker of Array.from(mirror.querySelectorAll('span[data-md-block]'))) {
+            offsets[Number(marker.getAttribute('data-md-block'))] = marker.offsetTop;
         }
     }
     finally {
         document.body.removeChild(mirror);
     }
-    if (!hasVerticalProgression(offsets))
-        return null;
     return offsets;
 }
+/**
+ * Pixel offset (within the textarea's scrollable content) of each block's
+ * start line, accounting for soft-wrapping. Measured with a hidden mirror that
+ * mimics the textarea's wrapping so the offsets stay accurate even when long
+ * lines wrap. Returns `null` when measurement is not possible.
+ */
+export function measureEditorBlockOffsets(textarea, blockLines, text) {
+    // The `typeof document === 'undefined'` half of this guard is real,
+    // intentional SSR-safety API contract (documented in this function's own
+    // JSDoc), but is empirically unreachable through this repo's actual call
+    // graph today: its only caller (`useMarkdownScrollSync`) only ever
+    // invokes it with an already browser-mounted `HTMLTextAreaElement` ref,
+    // which cannot exist without `document` already existing. A real test
+    // would require either reintroducing this package's own documented
+    // `@vitest/coverage-v8` jsdom/node branch-merge bug (see
+    // `features/html-viewer/dependencies`'s precedent in
+    // packages/ui/archived provenance ledger) or hand-faking this function's full
+    // `innerHTML`/`querySelectorAll`/`getComputedStyle` surface under plain
+    // Node — disproportionate to a defensive guard with no reachable path.
+    // See packages/ui/archived provenance ledger's 2026-07-22 dated entry.
+    if (blockLines.length === 0 || typeof document === 'undefined')
+        return null;
+    const mirror = createMirror({ textarea });
+    mirror.innerHTML = buildMirrorMarkup({ blockLines, text });
+    const offsets = readMarkerOffsets({ mirror, blockCount: blockLines.length });
+    return hasVerticalProgression(offsets) ? offsets : null;
+}
 /**
  * Pixel offset (within the preview pane's scrollable content) of each rendered
  * top-level block element. Returns `null` when the rendered article's direct
@@ -231,6 +242,25 @@ export function buildScrollAnchors(blockOffsets, scrollHeight) {
     }
     return anchors;
 }
+// Anchor value at `index`, reading an array hole as 0.
+function anchorAt({ anchors, index }) {
+    return anchors[index] ?? 0;
+}
+// Binary-search the lower index of the segment bracketing `value`, given
+// `source[0] <= value < source[count - 1]`; the segment's upper index is
+// always this plus one.
+function findBracketLow({ value, source, count }) {
+    let low = 0;
+    let high = count - 1;
+    while (high - low > 1) {
+        const mid = (low + high) >> 1;
+        if (anchorAt({ anchors: source, index: mid }) <= value)
+            low = mid;
+        else
+            high = mid;
+    }
+    return low;
+}
 /**
  * Map a scroll position from the source pane to the target pane using paired
  * anchor arrays (same length, both monotonic). Linear interpolation within the
@@ -240,25 +270,16 @@ export function mapScrollPosition(value, source, target) {
     const count = Math.min(source.length, target.length);
     if (count === 0)
         return value;
-    if (count === 1)
-        return target[0] ?? 0;
-    if (value <= (source[0] ?? 0))
-        return target[0] ?? 0;
-    if (value >= (source[count - 1] ?? 0))
-        return target[count - 1] ?? 0;
-    let low = 0;
-    let high = count - 1;
-    while (high - low > 1) {
-        const mid = (low + high) >> 1;
-        if ((source[mid] ?? 0) <= value)
-            low = mid;
-        else
-            high = mid;
-    }
-    const sourceLow = source[low] ?? 0;
-    const sourceHigh = source[high] ?? 0;
-    const targetLow = target[low] ?? 0;
-    const targetHigh = target[high] ?? 0;
+    const last = count - 1;
+    if (count === 1 || value <= anchorAt({ anchors: source, index: 0 }))
+        return anchorAt({ anchors: target, index: 0 });
+    if (value >= anchorAt({ anchors: source, index: last }))
+        return anchorAt({ anchors: target, index: last });
+    const low = findBracketLow({ value, source, count });
+    const sourceLow = anchorAt({ anchors: source, index: low });
+    const sourceHigh = anchorAt({ anchors: source, index: low + 1 });
+    const targetLow = anchorAt({ anchors: target, index: low });
+    const targetHigh = anchorAt({ anchors: target, index: low + 1 });
     // `span` is provably > 0 here, for *any* input array (not just a
     // monotonic one): the early clamp checks above guarantee
     // `source[0] <= value < source[count - 1]` before the search loop ever