@jini-ai/ui 0.5.5 → 0.5.6

package/dist/renderers/preview-modal-shell/react/components/PreviewModalShell.js

@@ -17,41 +17,68 @@ export function PreviewModalShell({ title, subtitle, views, initialViewId, onVie
         sidebarContentKey: sidebar?.contentKey,
         designWidth,
     });
-    const showTabs = views.length > 1;
-    const status = deriveContentStatus(c.activeView);
     return (_jsx("div", { className: className, role: "dialog", "aria-modal": "true", "aria-label": t('{title} preview', { title }), style: { position: 'fixed', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center' }, "data-preview-modal-backdrop": "", onClick: (event) => {
             // Only the actual backdrop dismisses. Clicks from the modal surface or any descendant
             // bubble through this element with a different target and must leave the preview open.
             if (event.target === event.currentTarget)
                 onClose();
-        }, children: _jsxs("div", { style: { display: 'flex', flexDirection: 'column', width: '100%', height: '100%' }, "data-preview-modal": "", "data-preview-modal-fullscreen": c.fullscreen ? 'true' : 'false', children: [_jsxs("header", { style: { display: 'flex', alignItems: 'center', gap: 12 }, "data-preview-modal-header": "", children: [_jsxs("div", { "data-preview-modal-title-block": "", children: [_jsx("div", { "data-preview-modal-title": "", children: title }), subtitle ? _jsx("div", { "data-preview-modal-subtitle": "", children: subtitle }) : null] }), showTabs ? (_jsx("div", { role: "tablist", style: { display: 'flex', gap: 4 }, "data-preview-modal-tabs": "", children: views.map((v) => (_jsx("button", { type: "button", role: "tab", "aria-selected": c.activeId === v.id, "data-preview-modal-tab": c.activeId === v.id ? 'active' : '', onClick: () => c.setActiveId(v.id), children: v.label }, v.id))) })) : null, _jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 8, marginLeft: 'auto' }, "data-preview-modal-actions": "", children: [primaryAction ? _jsx(PrimaryAction, { action: primaryAction, controller: c, icons: icons }) : null, sidebar && !hideSidebarToggle ? (_jsx("button", { type: "button", "aria-pressed": c.sidebarOpen, title: sidebar.label, onClick: () => {
-                                        const next = !c.sidebarOpen;
-                                        onSidebarToggleClick?.(next);
-                                        c.setSidebarOpen(next);
-                                    }, children: sidebar.label })) : null, headerExtras] }), _jsx("button", { type: "button", onClick: onClose, title: t('Close preview'), "aria-label": t('Close'), "data-preview-modal-close": "", children: icons.close() })] }), _jsxs("div", { style: { display: 'flex', flex: 1, minHeight: 0 }, "data-preview-modal-stage": sidebar && c.sidebarOpen ? 'has-sidebar' : '', ref: c.stageRef, children: [_jsxs("div", { style: { position: 'relative', flex: 1, minWidth: 0 }, ref: c.stageFrameRef, "data-preview-modal-stage-frame": "", children: [status !== 'unavailable' && status !== 'error' ? (_jsx("button", { type: "button", onClick: () => {
-                                        onFullscreenClick?.();
-                                        if (c.fullscreen)
-                                            c.exitFullscreen();
-                                        else
-                                            c.enterFullscreen();
-                                    }, title: c.fullscreen ? t('Exit fullscreen') : t('Fullscreen'), "aria-label": c.fullscreen ? t('Exit fullscreen') : t('Fullscreen'), "data-preview-modal-stage-fullscreen": "", children: c.fullscreen ? icons['fullscreen-exit']() : icons.fullscreen() })) : null, _jsx(ContentStage, { status: status, view: c.activeView, title: title, scalerStyle: c.scalerStyle, onView: onView, srcDocOptions: srcDocOptions, t: t }), sidebar && !c.sidebarOpen ? (_jsx("button", { type: "button", onClick: () => {
-                                        onSidebarToggleClick?.(true);
-                                        c.setSidebarOpen(true);
-                                    }, title: t('Show {label}', { label: sidebar.label }), "aria-label": t('Show {label}', { label: sidebar.label }), "data-preview-modal-stage-handle": "expand", children: _jsx("span", { "aria-hidden": "true", children: "\u2039" }) })) : null] }), sidebar && c.sidebarOpen ? (_jsxs("aside", { "aria-label": sidebar.label, "data-preview-modal-sidebar": "", children: [_jsx("button", { type: "button", onClick: () => {
-                                        onSidebarToggleClick?.(false);
-                                        c.setSidebarOpen(false);
-                                    }, title: t('Hide {label}', { label: sidebar.label }), "aria-label": t('Hide {label}', { label: sidebar.label }), "data-preview-modal-stage-handle": "collapse", children: _jsx("span", { "aria-hidden": "true", children: "\u203A" }) }), sidebar.content] })) : null] })] }) }));
+        }, children: _jsxs("div", { style: { display: 'flex', flexDirection: 'column', width: '100%', height: '100%' }, "data-preview-modal": "", "data-preview-modal-fullscreen": c.fullscreen ? 'true' : 'false', children: [_jsx(ShellHeader, { title: title, subtitle: subtitle, views: views, controller: c, primaryAction: primaryAction, icons: icons, sidebar: hideSidebarToggle ? undefined : sidebar, headerExtras: headerExtras, onClose: onClose, onSidebarToggleClick: onSidebarToggleClick }), _jsx(ShellStage, { title: title, controller: c, icons: icons, sidebar: sidebar, onView: onView, srcDocOptions: srcDocOptions, onFullscreenClick: onFullscreenClick, onSidebarToggleClick: onSidebarToggleClick })] }) }));
+}
+/** Header chrome; `sidebar` is already `undefined` when the host hid the header toggle via `hideSidebarToggle`. */
+function ShellHeader({ title, subtitle, views, controller, primaryAction, icons, sidebar, headerExtras, onClose, onSidebarToggleClick, }) {
+    const t = useT();
+    return (_jsxs("header", { style: { display: 'flex', alignItems: 'center', gap: 12 }, "data-preview-modal-header": "", children: [_jsxs("div", { "data-preview-modal-title-block": "", children: [_jsx("div", { "data-preview-modal-title": "", children: title }), subtitle ? _jsx("div", { "data-preview-modal-subtitle": "", children: subtitle }) : null] }), views.length > 1 ? _jsx(TabBar, { views: views, controller: controller }) : null, _jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 8, marginLeft: 'auto' }, "data-preview-modal-actions": "", children: [primaryAction ? _jsx(PrimaryAction, { action: primaryAction, controller: controller, icons: icons }) : null, sidebar ? (_jsx(SidebarToggle, { sidebar: sidebar, controller: controller, onSidebarToggleClick: onSidebarToggleClick })) : null, headerExtras] }), _jsx("button", { type: "button", onClick: onClose, title: t('Close preview'), "aria-label": t('Close'), "data-preview-modal-close": "", children: icons.close() })] }));
+}
+function ShellStage({ title, controller, icons, sidebar, onView, srcDocOptions, onFullscreenClick, onSidebarToggleClick, }) {
+    const t = useT();
+    const status = deriveContentStatus(controller.activeView);
+    return (_jsxs("div", { style: { display: 'flex', flex: 1, minHeight: 0 }, "data-preview-modal-stage": sidebar && controller.sidebarOpen ? 'has-sidebar' : '', ref: controller.stageRef, children: [_jsxs("div", { style: { position: 'relative', flex: 1, minWidth: 0 }, ref: controller.stageFrameRef, "data-preview-modal-stage-frame": "", children: [status !== 'unavailable' && status !== 'error' ? (_jsx(FullscreenButton, { controller: controller, icons: icons, onFullscreenClick: onFullscreenClick })) : null, _jsx(ContentStage, { status: status, view: controller.activeView, title: title, scalerStyle: controller.scalerStyle, onView: onView, srcDocOptions: srcDocOptions, t: t }), sidebar && !controller.sidebarOpen ? (_jsx(SidebarHandle, { sidebar: sidebar, controller: controller, open: true, onSidebarToggleClick: onSidebarToggleClick })) : null] }), sidebar && controller.sidebarOpen ? (_jsxs("aside", { "aria-label": sidebar.label, "data-preview-modal-sidebar": "", children: [_jsx(SidebarHandle, { sidebar: sidebar, controller: controller, open: false, onSidebarToggleClick: onSidebarToggleClick }), sidebar.content] })) : null] }));
+}
+function TabBar({ views, controller }) {
+    return (_jsx("div", { role: "tablist", style: { display: 'flex', gap: 4 }, "data-preview-modal-tabs": "", children: views.map((v) => (_jsx("button", { type: "button", role: "tab", "aria-selected": controller.activeId === v.id, "data-preview-modal-tab": controller.activeId === v.id ? 'active' : '', onClick: () => controller.setActiveId(v.id), children: v.label }, v.id))) }));
+}
+function SidebarToggle({ sidebar, controller, onSidebarToggleClick, }) {
+    return (_jsx("button", { type: "button", "aria-pressed": controller.sidebarOpen, title: sidebar.label, onClick: () => {
+            const next = !controller.sidebarOpen;
+            onSidebarToggleClick?.(next);
+            controller.setSidebarOpen(next);
+        }, children: sidebar.label }));
+}
+function FullscreenButton({ controller, icons, onFullscreenClick, }) {
+    const t = useT();
+    const label = controller.fullscreen ? t('Exit fullscreen') : t('Fullscreen');
+    return (_jsx("button", { type: "button", onClick: () => {
+            onFullscreenClick?.();
+            if (controller.fullscreen)
+                controller.exitFullscreen();
+            else
+                controller.enterFullscreen();
+        }, title: label, "aria-label": label, "data-preview-modal-stage-fullscreen": "", children: controller.fullscreen ? icons['fullscreen-exit']() : icons.fullscreen() }));
+}
+/** Stage-edge handle: `open` renders the "Show" expand handle (‹), otherwise the "Hide" collapse handle (›) inside the sidebar. */
+function SidebarHandle({ sidebar, controller, open, onSidebarToggleClick, }) {
+    const t = useT();
+    const label = open ? t('Show {label}', { label: sidebar.label }) : t('Hide {label}', { label: sidebar.label });
+    return (_jsx("button", { type: "button", onClick: () => {
+            onSidebarToggleClick?.(open);
+            controller.setSidebarOpen(open);
+        }, title: label, "aria-label": label, "data-preview-modal-stage-handle": open ? 'expand' : 'collapse', children: _jsx("span", { "aria-hidden": "true", children: open ? '‹' : '›' }) }));
+}
+function PrimaryButton({ action }) {
+    return (_jsx("button", { type: "button", onClick: action.onClick, disabled: action.disabled || action.busy, "aria-busy": action.busy ? 'true' : undefined, ...(action.testId ? { 'data-testid': action.testId } : {}), "data-preview-modal-primary-action": "", children: action.busy ? action.busyLabel ?? action.label : action.label }));
 }
 function PrimaryAction({ action, controller, icons, }) {
     const t = useT();
-    const hasMenu = Boolean(action.menu && action.menu.length > 0);
-    if (!hasMenu) {
-        return (_jsx("button", { type: "button", onClick: action.onClick, disabled: action.disabled || action.busy, "aria-busy": action.busy ? 'true' : undefined, ...(action.testId ? { 'data-testid': action.testId } : {}), "data-preview-modal-primary-action": "", children: action.busy ? action.busyLabel ?? action.label : action.label }));
-    }
-    return (_jsxs("div", { ref: controller.primaryMenuRef, style: { position: 'relative', display: 'flex' }, "data-preview-modal-primary-action-group": "", children: [_jsx("button", { type: "button", onClick: action.onClick, disabled: action.disabled || action.busy, "aria-busy": action.busy ? 'true' : undefined, ...(action.testId ? { 'data-testid': action.testId } : {}), "data-preview-modal-primary-action": "", children: action.busy ? action.busyLabel ?? action.label : action.label }), _jsx("button", { type: "button", onClick: () => controller.setPrimaryMenuOpen((v) => !v), disabled: action.disabled || action.busy, "aria-haspopup": "menu", "aria-expanded": controller.primaryMenuOpen, "aria-label": t('More ways to {label}', { label: action.label }), ...(action.testId ? { 'data-testid': `${action.testId}-menu` } : {}), "data-preview-modal-primary-action-caret": "", children: icons['chevron-down']() }), controller.primaryMenuOpen ? (_jsx("div", { role: "menu", "data-preview-modal-primary-action-popover": "", children: action.menu.map((item, index) => (_jsxs("button", { type: "button", role: "menuitem", onMouseDown: (e) => e.preventDefault(), onClick: () => {
-                        controller.setPrimaryMenuOpen(false);
-                        item.onClick();
-                    }, ...(item.testId ? { 'data-testid': item.testId } : {}), "data-preview-modal-primary-action-option": "", children: [_jsx("span", { "data-preview-modal-primary-action-option-label": "", children: item.label }), item.description ? (_jsx("span", { "data-preview-modal-primary-action-option-desc": "", children: item.description })) : null] }, item.testId ?? `${item.label}-${index}`))) })) : null] }));
+    const menu = action.menu ?? [];
+    if (menu.length === 0)
+        return _jsx(PrimaryButton, { action: action });
+    return (_jsxs("div", { ref: controller.primaryMenuRef, style: { position: 'relative', display: 'flex' }, "data-preview-modal-primary-action-group": "", children: [_jsx(PrimaryButton, { action: action }), _jsx("button", { type: "button", onClick: () => controller.setPrimaryMenuOpen((v) => !v), disabled: action.disabled || action.busy, "aria-haspopup": "menu", "aria-expanded": controller.primaryMenuOpen, "aria-label": t('More ways to {label}', { label: action.label }), ...(action.testId ? { 'data-testid': `${action.testId}-menu` } : {}), "data-preview-modal-primary-action-caret": "", children: icons['chevron-down']() }), controller.primaryMenuOpen ? _jsx(PrimaryActionMenu, { menu: menu, controller: controller }) : null] }));
+}
+function PrimaryActionMenu({ menu, controller, }) {
+    return (_jsx("div", { role: "menu", "data-preview-modal-primary-action-popover": "", children: menu.map((item, index) => (_jsxs("button", { type: "button", role: "menuitem", onMouseDown: (e) => e.preventDefault(), onClick: () => {
+                controller.setPrimaryMenuOpen(false);
+                item.onClick();
+            }, ...(item.testId ? { 'data-testid': item.testId } : {}), "data-preview-modal-primary-action-option": "", children: [_jsx("span", { "data-preview-modal-primary-action-option-label": "", children: item.label }), item.description ? (_jsx("span", { "data-preview-modal-primary-action-option-desc": "", children: item.description })) : null] }, item.testId ?? `${item.label}-${index}`))) }));
 }
 function ContentStage({ status, view, title, scalerStyle, onView, srcDocOptions, t, }) {
     if (status === 'custom') {
@@ -60,9 +87,8 @@ function ContentStage({ status, view, title, scalerStyle, onView, srcDocOptions,
     if (status === 'unavailable') {
         return (_jsx("div", { "data-preview-modal-unavailable": "", children: view?.unavailable?.message }));
     }
-    if (status === 'error') {
-        return (_jsxs("div", { "data-preview-modal-error": "", children: [_jsx("div", { "data-preview-modal-error-title": "", children: t('Something went wrong.') }), _jsx("div", { "data-preview-modal-error-body": "", children: t('This preview could not be loaded.') }), onView && view ? (_jsx("button", { type: "button", onClick: () => onView(view.id), children: t('Retry') })) : null] }));
-    }
+    if (status === 'error')
+        return _jsx(ErrorStage, { view: view, onView: onView, t: t });
     if (status === 'loading') {
         return (_jsx("div", { "data-preview-modal-loading": "", children: t('Loading {label}…', { label: (view?.label ?? t('preview')).toLowerCase() }) }));
     }
@@ -71,4 +97,7 @@ function ContentStage({ status, view, title, scalerStyle, onView, srcDocOptions,
     // (no `??`) is safe by that invariant, not a runtime guess.
     return (_jsx("div", { style: scalerStyle, "data-preview-modal-stage-scaler": "", children: _jsx(SrcDocSandbox, { html: view.html, options: srcDocOptions, title: `${title} ${view.label}` }, view.id) }));
 }
+function ErrorStage({ view, onView, t, }) {
+    return (_jsxs("div", { "data-preview-modal-error": "", children: [_jsx("div", { "data-preview-modal-error-title": "", children: t('Something went wrong.') }), _jsx("div", { "data-preview-modal-error-body": "", children: t('This preview could not be loaded.') }), onView && view ? (_jsx("button", { type: "button", onClick: () => onView(view.id), children: t('Retry') })) : null] }));
+}
 //# sourceMappingURL=PreviewModalShell.js.map

package/dist/renderers/react/components/ArtifactView.js

@@ -15,19 +15,22 @@ export function ArtifactView({ file, registry, hints, srcDocOptions, slots, clas
     const slotRenderer = slots?.renderers?.[match.renderer.id];
     if (slotRenderer)
         return wrap(_jsx(_Fragment, { children: slotRenderer({ file, match }) }));
+    return wrap(renderBuiltIn({ file, match, t }, { className, srcDocOptions }));
+}
+/** Built-in rendering for the renderer ids this package ships; any other id gets the "supply a slot" fallback message. */
+function renderBuiltIn({ file, match, t }, { className, srcDocOptions }) {
+    const content = file.content ?? '';
     switch (match.renderer.id) {
         case 'html':
         case 'svg':
-            return wrap(_jsx(SrcDocSandbox, { className: className, html: file.content ?? '', options: srcDocOptions, title: match.manifest.title }));
+            return _jsx(SrcDocSandbox, { className: className, html: content, options: srcDocOptions, title: match.manifest.title });
         case 'markdown': {
-            const html = match.renderer.renderPartial
-                ? match.renderer.renderPartial(file.content ?? '')
-                : renderMarkdownToSafeHtml(file.content ?? '');
+            const html = match.renderer.renderPartial ? match.renderer.renderPartial(content) : renderMarkdownToSafeHtml(content);
             // eslint-disable-next-line react/no-danger -- html is produced by renderMarkdownToSafeHtml, which escapes/allow-lists links; see markdown.ts.
-            return wrap(_jsx("div", { className: className, dangerouslySetInnerHTML: { __html: html } }));
+            return _jsx("div", { className: className, dangerouslySetInnerHTML: { __html: html } });
         }
         default:
-            return wrap(_jsx("div", { className: className, role: "status", children: t('No renderer registered for "{rendererId}" — supply one via slots.renderers.', {
+            return (_jsx("div", { className: className, role: "status", children: t('No renderer registered for "{rendererId}" — supply one via slots.renderers.', {
                     rendererId: match.renderer.id,
                 }) }));
     }

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

@@ -62,7 +62,10 @@ export declare function sanitizePreviewTitle(text: string): string;
  * @example sanitizeTitleInDoc('<title>Q3: Report</title>') // '<title>Q3- Report</title>'
  */
 export declare function sanitizeTitleInDoc(html: string): string;
-/** Splice `payload` right after the opening `<head …>` tag, prepending it when no `<head>` exists. */
+/** Splice after the parsed head opener, or before content in an implicit head.
+ * Source offsets exclude comments, raw text and quoted attributes without rewriting the document.
+ * @complexity O(n) time and space for parsing n source characters.
+ */
 export declare function injectAfterHeadOpen(doc: string, payload: string): string;
 /**
  * Splice `payload` right before the real `</head>` (the last one before

package/dist/renderers/srcdoc/build.js

@@ -13,7 +13,7 @@
  */
 import { defaultTreeAdapter, parse } from 'parse5';
 import { escapeHtmlAttribute } from '../html-utils.js';
-import { injectBaseHref, wrapFragmentAsDocument } from '../sandboxed-document.js';
+import { wrapFragmentAsDocument } from '../sandboxed-document.js';
 import { buildFocusScript, buildStorageScript } from '../sandbox-scripts.js';
 import { applySrcDocBridges } from './bridge.js';
 /**
@@ -27,9 +27,24 @@ import { applySrcDocBridges } from './bridge.js';
  * host's storage/cookies/DOM regardless of CSP).
  */
 export const DEFAULT_SRC_DOC_CSP = "default-src 'none'; script-src 'unsafe-inline' 'unsafe-eval' blob: data:; style-src 'unsafe-inline'; img-src * data: blob:; font-src * data:; media-src * data: blob:; connect-src *; frame-src *; child-src *; object-src 'none'; base-uri 'none'; form-action 'none';";
-function injectContentSecurityPolicy(doc, csp) {
-    const tag = `<meta http-equiv="Content-Security-Policy" content="${escapeHtmlAttribute(csp)}">`;
-    return injectAfterHeadOpen(doc, tag);
+/** Resolve the existing default/disabled/custom policy contract without changing caller options.
+ * An empty custom string injects no policy, just like `false`.
+ */
+function resolveContentSecurityPolicy({ csp }) {
+    if (csp === false)
+        return null;
+    return csp === true || csp === undefined ? DEFAULT_SRC_DOC_CSP : csp;
+}
+/** The safety tags spliced once at the parsed head opener. Order is load-bearing: the host's
+ * own scripts precede the policy, the host `<base>` precedes it so the default `base-uri 'none'`
+ * cannot block it, and authored markup follows it. Separate regex splices could match `<head`
+ * inside a quoted attribute, and the next tag's quotes then pushed the policy into `<body>`. */
+function buildSafetyHead(options) {
+    const csp = resolveContentSecurityPolicy(options);
+    return (options.previewFocusGuard ? buildFocusScript({ format: 'srcdoc' }) : '')
+        + buildStorageScript({ format: 'srcdoc' })
+        + (options.baseHref ? `<base href="${escapeHtmlAttribute(options.baseHref)}">` : '')
+        + (csp ? `<meta http-equiv="Content-Security-Policy" content="${escapeHtmlAttribute(csp)}">` : '');
 }
 /**
  * Sanitize a title string so it is safe to use as a downloaded/printed
@@ -82,11 +97,23 @@ function serializeHtmlDocument(doc) {
     const doctype = doc.doctype ? '<!doctype html>\n' : '';
     return `${doctype}${doc.documentElement.outerHTML}`;
 }
-/** Splice `payload` right after the opening `<head …>` tag, prepending it when no `<head>` exists. */
+/** An implicit element has no authored opening tag to splice after. */
+function openingTagEnd({ node }) {
+    return node?.sourceCodeLocation?.startTag?.endOffset;
+}
+/** Splice after the parsed head opener, or before content in an implicit head.
+ * Source offsets exclude comments, raw text and quoted attributes without rewriting the document.
+ * @complexity O(n) time and space for parsing n source characters.
+ */
 export function injectAfterHeadOpen(doc, payload) {
-    if (/<head[^>]*>/i.test(doc))
-        return doc.replace(/<head[^>]*>/i, (m) => `${m}${payload}`);
-    return payload + doc;
+    const document = parse(doc, { sourceCodeLocationInfo: true });
+    const root = findElementChild({ parent: document, tagName: 'html' });
+    const head = findElementChild({ parent: root, tagName: 'head' });
+    const doctype = document.childNodes.find(defaultTreeAdapter.isDocumentTypeNode);
+    const offset = openingTagEnd({ node: head })
+        ?? openingTagEnd({ node: root })
+        ?? doctype?.sourceCodeLocation?.endOffset ?? 0;
+    return doc.slice(0, offset) + payload + doc.slice(offset);
 }
 /**
  * Splice `payload` right before the real `</head>` (the last one before
@@ -103,19 +130,8 @@ export function injectBeforeHeadEnd(doc, payload) {
     if (idx >= 0)
         return doc.slice(0, idx) + payload + doc.slice(idx);
     if (/<head[^>]*>/i.test(doc))
-        return doc.replace(/<head[^>]*>/i, (m) => `${m}${payload}`);
-    if (typeof DOMParser !== 'undefined') {
-        try {
-            const parsed = new DOMParser().parseFromString(doc, 'text/html');
-            if (parsed.head)
-                parsed.head.insertAdjacentHTML('beforeend', payload);
-            return serializeHtmlDocument(parsed);
-        }
-        catch {
-            /* fall through to prepend */
-        }
-    }
-    return payload + doc;
+        return injectAfterHeadOpen(doc, payload);
+    return injectViaDomParser({ doc, payload, section: 'head' }) ?? payload + doc;
 }
 /** Splice `payload` right before the real `</body>` (the last one before `</html>`). See {@link injectBeforeHeadEnd}. */
 export function injectBeforeBodyEnd(doc, payload) {
@@ -125,30 +141,31 @@ export function injectBeforeBodyEnd(doc, payload) {
     const idx = lower.lastIndexOf('</body>', limit - 1);
     if (idx >= 0)
         return doc.slice(0, idx) + payload + doc.slice(idx);
-    if (typeof DOMParser !== 'undefined') {
-        try {
-            const parsed = new DOMParser().parseFromString(doc, 'text/html');
-            if (parsed.body)
-                parsed.body.insertAdjacentHTML('beforeend', payload);
-            return serializeHtmlDocument(parsed);
-        }
-        catch {
-            /* fall through to append */
-        }
-    }
-    return doc + payload;
+    return injectViaDomParser({ doc, payload, section: 'body' }) ?? doc + payload;
 }
-/** Srcdoc keeps its head/body/prepend fallback instead of the generic builder's string-only head insertion. */
-function injectSandboxScript(doc, script) {
-    if (/<head[^>]*>/i.test(doc))
-        return doc.replace(/<head[^>]*>/i, (m) => `${m}${script}`);
-    if (/<body[^>]*>/i.test(doc))
-        return doc.replace(/<body[^>]*>/i, (m) => `${m}${script}`);
-    return script + doc;
+/**
+ * DOMParser fallback shared by the head/body splicers for fragments with no
+ * textual insertion point. Returns `null` when `DOMParser` is unavailable or
+ * throws, so the caller falls through to its own prepend/append.
+ */
+function injectViaDomParser({ doc, payload, section }, _options = {}) {
+    if (typeof DOMParser === 'undefined')
+        return null;
+    try {
+        const parsed = new DOMParser().parseFromString(doc, 'text/html');
+        parsed[section]?.insertAdjacentHTML('beforeend', payload);
+        return serializeHtmlDocument(parsed);
+    }
+    catch {
+        /* fall through to the caller's prepend/append */
+        return null;
+    }
 }
 function injectSrcdocTransportActivationBridge(doc) {
     const script = `<script data-jini-srcdoc-transport-activation>(function(){
   window.addEventListener('message', function(ev){
+    // Only the embedding host may replace this document; nested frames are untrusted.
+    if (ev.source !== window.parent) return;
     var data = ev && ev.data;
     if (!data || data.type !== 'jini:srcdoc-transport-activate' || typeof data.html !== 'string') return;
     document.open();
@@ -181,6 +198,8 @@ export function buildLazySrcDocTransport() {
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <script data-jini-lazy-srcdoc-transport>(function(){
       window.addEventListener('message', function(ev){
+        // Only the embedding host may replace this document; nested frames are untrusted.
+        if (ev.source !== window.parent) return;
         var data = ev && ev.data;
         if (!data || data.type !== 'jini:srcdoc-transport-activate' || typeof data.html !== 'string') return;
         document.open();
@@ -230,16 +249,11 @@ export function buildSrcDoc(html, options = {}) {
     if (options.lazyTransport)
         return buildLazySrcDocTransport();
     const wrapped = wrapFragmentAsDocument(html);
-    const withSafeTitle = sanitizeTitleInDoc(wrapped);
-    const cspValue = options.csp === false ? null : options.csp === true || options.csp === undefined ? DEFAULT_SRC_DOC_CSP : options.csp;
-    const withCsp = cspValue ? injectContentSecurityPolicy(withSafeTitle, cspValue) : withSafeTitle;
-    const withBase = options.baseHref ? injectBaseHref(withCsp, options.baseHref) : withCsp;
-    const withShim = injectSandboxScript(withBase, buildStorageScript({ format: 'srcdoc' }));
-    const withFocusGuard = options.previewFocusGuard ? injectSandboxScript(withShim, buildFocusScript({ format: 'srcdoc' })) : withShim;
+    const withSafety = injectAfterHeadOpen(sanitizeTitleInDoc(wrapped), buildSafetyHead(options));
     const ctx = { baseHref: options.baseHref, ...options.bridgeContext };
     const withBridges = options.bridges?.length
-        ? applySrcDocBridges(withFocusGuard, options.bridges, ctx)
-        : withFocusGuard;
+        ? applySrcDocBridges(withSafety, options.bridges, ctx)
+        : withSafety;
     return injectSrcdocTransportActivationBridge(withBridges);
 }
 //# sourceMappingURL=build.js.map

package/dist/styles/admin.css

@@ -214,11 +214,40 @@
   border: 5px solid transparent; border-top-color: var(--jini-bg-panel);
 }
 
+/* "• " lines (`infoTipLines`): each bullet's wrapped text hangs past its dot. */
+.info-tip-line { display: block; }
+.info-tip-bullet { display: flex; gap: 0.4em; }
+.info-tip-bullet + .info-tip-bullet { margin-top: 0.3em; }
+.info-tip-bullet > span:first-child { flex: none; }
+
 .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);
 }
 
+/* `MiddleTruncate`: the head ellipsizes, the tail (extension) never shrinks. */
+.jini-middle-truncate { display: inline-flex; max-width: 100%; min-width: 0; white-space: nowrap; }
+.jini-middle-truncate__head { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
+.jini-middle-truncate__tail { flex: none; }
+
+/* `ScrollJumpButtons`: absolutely placed in the host's positioned content column; hosts move it
+   clear of their own floating controls with the custom properties (a row lines the pair up beside
+   a FAB instead of stacking it above). The wrapper takes no taps, so the gap between the buttons
+   and a hidden slot never block the page under them. */
+.jini-scroll-jump {
+  position: absolute; right: var(--jini-scroll-jump-right, 16px); bottom: var(--jini-scroll-jump-bottom, 16px);
+  display: flex; flex-direction: var(--jini-scroll-jump-direction, column); gap: 6px; z-index: 20; pointer-events: none;
+}
+.jini-scroll-jump__btn {
+  pointer-events: auto; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0;
+  border-radius: 50%; border: 1px solid var(--jini-border); background: var(--jini-bg-elevated); color: var(--jini-text-muted);
+  box-shadow: var(--jini-shadow-md); cursor: pointer; opacity: 0.85; transition: opacity 0.12s, color 0.12s;
+}
+.jini-scroll-jump__btn[data-off] { visibility: hidden; }
+.jini-scroll-jump__btn:hover { opacity: 1; color: var(--jini-text); }
+.jini-scroll-jump__btn:focus-visible { opacity: 1; outline: 2px solid var(--jini-accent); outline-offset: 2px; }
+@media (prefers-reduced-motion: reduce) { .jini-scroll-jump__btn { transition: none; } }
+
 .tab-bar { display: flex; flex-wrap: wrap; gap: 0.3rem; border-bottom: 1px solid var(--jini-border); margin-bottom: 1.3rem; }
 
 .tab-bar-item {
@@ -255,20 +284,6 @@
 }
 .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; }

package/dist/styles/lightbox.css

@@ -0,0 +1,142 @@
+/* Shared media lightbox (`Lightbox` in admin-widgets). The dialog itself is the full-viewport dark
+   gray stage: header row (title, counter, close), the media, footer row (caller actions left,
+   previous/next together right). Rows rather than floating controls, so nothing ever overlaps the
+   media or the title. The stage stays dark in both admin themes: photos read best on a neutral dark
+   surround, and the white title then stays readable whatever the theme. */
+.jini-lightbox {
+  --jini-lightbox-edge: clamp(0.75rem, 2vw, 1.25rem);
+  --jini-lightbox-button: 2.25rem;
+  /* Header and footer rows: one button tall plus the edge margin above/below it. */
+  --jini-lightbox-bar: calc(var(--jini-lightbox-button) + var(--jini-lightbox-edge) * 2);
+  display: none;
+}
+/* `display` only on `[open]`: an author `display` outranks the UA `dialog:not([open])` rule. */
+.jini-lightbox[open] {
+  position: fixed;
+  inset: 0;
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  max-width: none;
+  max-height: none;
+  margin: 0;
+  padding: 0 calc(var(--jini-lightbox-edge) + env(safe-area-inset-right, 0px)) 0 calc(var(--jini-lightbox-edge) + env(safe-area-inset-left, 0px));
+  border: 0;
+  display: grid;
+  grid-template-rows: var(--jini-lightbox-bar) minmax(0, 1fr) var(--jini-lightbox-bar);
+  overscroll-behavior: contain;
+  color: var(--jini-lightbox-ink);
+  background: var(--jini-lightbox-bg);
+  font-family: var(--jini-font-sans, inherit);
+}
+.jini-lightbox::backdrop { background: transparent; }
+
+.jini-lightbox-header {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  min-width: 0;
+  padding-top: env(safe-area-inset-top, 0px);
+}
+.jini-lightbox-title {
+  margin: 0;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 0.9375rem;
+  font-weight: 600;
+  line-height: 1.3;
+  color: var(--jini-lightbox-ink);
+}
+.jini-lightbox-counter {
+  flex-shrink: 0;
+  font-size: 0.8125rem;
+  font-variant-numeric: tabular-nums;
+  color: var(--jini-lightbox-ink-muted);
+}
+.jini-lightbox-close { margin-left: auto; }
+
+/* The media cap is computed from the viewport, not from percentages of the stage, so it holds
+   however many wrappers a caller puts between the stage and its `img`/`video`. `max-*` with
+   `auto` size never upscales past the natural size; `contain` never crops. */
+.jini-lightbox-stage {
+  --jini-lightbox-media-max-w: calc(100vw - var(--jini-lightbox-edge) * 2);
+  --jini-lightbox-media-max-h: calc(100dvh - var(--jini-lightbox-bar) * 2);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+}
+.jini-lightbox-stage :is(img, video) {
+  display: block;
+  width: auto;
+  height: auto;
+  max-width: var(--jini-lightbox-media-max-w);
+  max-height: var(--jini-lightbox-media-max-h);
+  object-fit: contain;
+  border-radius: var(--jini-radius-sm, 6px);
+  background: var(--jini-lightbox-media-bg);
+}
+/* Documents (PDF, HTML) have no natural size: give them the whole stage. */
+.jini-lightbox-stage iframe {
+  width: var(--jini-lightbox-media-max-w);
+  height: var(--jini-lightbox-media-max-h);
+  border: 0;
+  border-radius: var(--jini-radius-sm, 6px);
+  background: var(--jini-lightbox-document-bg);
+}
+
+.jini-lightbox-footer {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  min-width: 0;
+  padding-bottom: env(safe-area-inset-bottom, 0px);
+}
+.jini-lightbox-actions {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  min-width: 0;
+  color: var(--jini-lightbox-ink-muted);
+  font-size: 0.8125rem;
+}
+.jini-lightbox-nav {
+  display: flex;
+  gap: 0.375rem;
+  margin-left: auto;
+}
+
+/* Small, round, quiet: a translucent chip with a hairline ring reads on a light or dark frame. */
+.jini-lightbox-button {
+  display: grid;
+  place-items: center;
+  flex-shrink: 0;
+  width: var(--jini-lightbox-button);
+  height: var(--jini-lightbox-button);
+  padding: 0;
+  border: 1px solid var(--jini-lightbox-button-border);
+  border-radius: 50%;
+  color: var(--jini-lightbox-ink);
+  background: var(--jini-lightbox-button-bg);
+  cursor: pointer;
+}
+.jini-lightbox-button:hover:not(:disabled) { background: var(--jini-lightbox-button-bg-hover); border-color: var(--jini-lightbox-button-border-hover); }
+.jini-lightbox-button:focus-visible { outline: 2px solid var(--jini-lightbox-ink); outline-offset: 2px; }
+/* Same chip, only fainter: a host `button:disabled` fill (the Tovu admin's light `--surface-3`) would
+   otherwise turn the end-of-set arrow into a bright pressed-looking disc. */
+.jini-lightbox-button:disabled {
+  opacity: 0.3;
+  cursor: default;
+  color: var(--jini-lightbox-ink);
+  background: var(--jini-lightbox-button-bg);
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .jini-lightbox[open] { animation: jini-lightbox-in 160ms ease-out; }
+  .jini-lightbox-button { transition: background-color 120ms ease, border-color 120ms ease; }
+}
+@keyframes jini-lightbox-in { from { opacity: 0; } }