npm - anentrypoint-design - Versions diffs - 0.0.385 → 0.0.387 - Mend

anentrypoint-design 0.0.385 → 0.0.387

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (71) hide show

package/dist/247420.css +33 -0
package/dist/247420.js +53 -51
package/package.json +1 -1
package/src/components/agent-chat/controls.js +143 -0
package/src/components/agent-chat/empty-state.js +63 -0
package/src/components/agent-chat/message-rows.js +141 -0
package/src/components/agent-chat/surface.js +206 -0
package/src/components/agent-chat/thread-behaviour.js +50 -0
package/src/components/agent-chat.js +6 -546
package/src/components/chat/composer-affordances.js +109 -0
package/src/components/chat/composer.js +256 -0
package/src/components/chat/threads.js +105 -0
package/src/components/chat-message-parts/agent-nodes.js +103 -0
package/src/components/chat-message-parts/inline.js +106 -0
package/src/components/chat-message-parts/prose-nodes.js +133 -0
package/src/components/chat-message-parts/renderers.js +89 -0
package/src/components/chat-message-parts.js +12 -408
package/src/components/chat-minimap/minimap.js +167 -0
package/src/components/chat-minimap/paint.js +73 -0
package/src/components/chat-minimap/preview.js +41 -0
package/src/components/chat-minimap.js +7 -263
package/src/components/chat.js +20 -628
package/src/components/community/chrome.js +63 -0
package/src/components/community/navigation.js +167 -0
package/src/components/community/presence.js +106 -0
package/src/components/community/shell.js +17 -0
package/src/components/community/views.js +131 -0
package/src/components/community.js +18 -447
package/src/components/files/chrome.js +140 -0
package/src/components/files/entries.js +156 -0
package/src/components/files/grid-controls.js +63 -0
package/src/components/files/grid.js +177 -0
package/src/components/files/types.js +69 -0
package/src/components/files-modals/dialogs.js +118 -0
package/src/components/files-modals/modal-shell.js +153 -0
package/src/components/files-modals/preview-bodies.js +129 -0
package/src/components/files-modals/preview-containers.js +96 -0
package/src/components/files-modals.js +14 -475
package/src/components/files.js +15 -564
package/src/components/freddie/pages-config.js +3 -94
package/src/components/freddie/pages-models.js +97 -0
package/src/components/freddie.js +2 -1
package/src/components/interaction-primitives/mobile.js +25 -0
package/src/components/interaction-primitives/pointer.js +214 -0
package/src/components/interaction-primitives/reorderable.js +47 -0
package/src/components/interaction-primitives/shortcuts.js +119 -0
package/src/components/interaction-primitives.js +16 -388
package/src/components/sessions/conversation-list.js +230 -0
package/src/components/sessions/dashboard.js +202 -0
package/src/components/sessions/detail-bits.js +49 -0
package/src/components/sessions/format.js +42 -0
package/src/components/sessions/session-card.js +92 -0
package/src/components/sessions.js +16 -579
package/src/components/voice/audio-cue.js +39 -0
package/src/components/voice/capture.js +90 -0
package/src/components/voice/playback.js +75 -0
package/src/components/voice/settings-modal.js +104 -0
package/src/components/voice.js +16 -293
package/src/css/app-shell/base.css +23 -0
package/src/css/app-shell/states-interactions.css +10 -0
package/src/kits/os/freddie/chat-protocol.js +32 -0
package/src/kits/os/freddie/chat-transport.js +178 -0
package/src/kits/os/freddie/pages-chat.js +10 -180
package/src/kits/os/shell-chrome.js +163 -0
package/src/kits/os/shell-geometry.js +59 -0
package/src/kits/os/shell.js +178 -335
package/src/page-html/client-script.js +151 -0
package/src/page-html/head-tags.js +59 -0
package/src/page-html/markdown.js +68 -0
package/src/page-html/page-styles.js +44 -0
package/src/page-html.js +14 -291

package/src/components/files-modals/modal-shell.js ADDED Viewed

@@ -0,0 +1,153 @@
+// The shared modal shell every file dialog funnels through: Backdrop (focus
+// trap, document-level Escape, invoker focus restore, backdrop dismiss),
+// Modal (head/body/actions slots + a stable aria-labelledby id), and the
+// in-body error line.
+import * as webjsx from '../../../vendor/webjsx/index.js';
+import { shortUid } from '../../uid.js';
+const h = webjsx.createElement;
+// Full focusable set for the modal Tab trap — omitting textarea/select/a[href]
+// lets Tab escape behind the fixed backdrop (fully obscured at mobile sizes).
+const FOCUSABLE_SEL = 'a[href],button:not([disabled]),textarea:not([disabled]),input:not([disabled]),select:not([disabled]),[tabindex]:not([tabindex="-1"])';
+function Backdrop({ onClose, children, kind = '', labelledBy, busy = false } = {}) {
+    // webjsx invokes a ref callback with the element on mount and with null on
+    // unmount. We stash the per-element keydown teardown on the node itself so
+    // the null branch can run it — otherwise the document/element listener leaks
+    // once the modal is removed.
+    const backdropRef = (el) => {
+        if (!el) return;            // unmount (ref(null)) handled by wrapper below
+        const modal = el.querySelector('.ds-modal');
+        if (!modal) return;
+        const handleKeydown = (e) => {
+            // Escape closes the modal — unless a mutation is in flight (the live
+            // busy state is read off the data-busy attribute, which re-renders;
+            // this handler's closure is bound once at mount).
+            if (e.key === 'Escape') {
+                e.preventDefault();
+                if (el.dataset.busy === '1') return;
+                if (onClose) onClose();
+                return;
+            }
+            // Focus trap: re-query focusables on each Tab press so that buttons
+            // disabled mid-flight (busy state) are excluded from the cycle and
+            // do not break tab navigation.
+            if (e.key === 'Tab') {
+                const focusables = modal.querySelectorAll(FOCUSABLE_SEL);
+                if (focusables.length === 0) {
+                    e.preventDefault();
+                    return;
+                }
+                const firstFocusable = focusables[0];
+                const lastFocusable = focusables[focusables.length - 1];
+                if (e.shiftKey) {
+                    if (document.activeElement === firstFocusable) {
+                        e.preventDefault();
+                        lastFocusable.focus();
+                    }
+                } else {
+                    if (document.activeElement === lastFocusable) {
+                        e.preventDefault();
+                        firstFocusable.focus();
+                    }
+                }
+            }
+        };
+        // Escape must close the modal no matter where focus sits (re-renders
+        // can bounce focus out of the dialog), so listen at document level
+        // for the modal's lifetime.
+        document.addEventListener('keydown', handleKeydown, true);
+        // Record the invoker BEFORE the modal steals focus, so close (confirm,
+        // cancel, Escape, backdrop click) restores keyboard/AT focus to where
+        // the user was (e.g. the FileGrid row button) instead of <body>.
+        // Re-mounts mid-lifetime (every app render re-runs this ref) keep the
+        // ORIGINAL invoker and never re-steal focus from the user.
+        const invoker = el.contains(document.activeElement) ? (Backdrop._invoker || document.activeElement) : document.activeElement;
+        if (!Backdrop._invoker) Backdrop._invoker = invoker;
+        el._dsModalTeardown = (removed) => {
+            document.removeEventListener('keydown', handleKeydown, true);
+            // Only restore focus when the modal is genuinely going away (not a
+            // re-render remount) and focus is not already somewhere useful.
+            if (removed && Backdrop._invoker && Backdrop._invoker.focus && Backdrop._invoker.isConnected) {
+                try { Backdrop._invoker.focus(); } catch { /* swallow: restoring focus on close is best-effort, teardown still completes */ }
+            }
+            if (removed) Backdrop._invoker = null;
+        };
+        // Auto-focus on open - only when focus is not already inside the modal
+        // (re-renders must not yank the caret around).
+        if (!el.contains(document.activeElement)) {
+            const preferred = modal.querySelector('[autofocus]') || modal.querySelector(FOCUSABLE_SEL);
+            if (preferred) preferred.focus();
+        }
+    };
+    return h('div', {
+        class: 'ds-modal-backdrop',
+        // Live busy flag read by the mount-bound Escape handler + backdrop click.
+        'data-busy': busy ? '1' : '0',
+        ref: (el) => {
+            if (el) {
+                // A remount in the same tick (render churn) is not a close:
+                // cancel the pending removal teardown before re-binding.
+                Backdrop._pendingRemoval = false;
+                backdropRef(el);
+                Backdrop._last = el;
+            } else if (Backdrop._last && Backdrop._last._dsModalTeardown) {
+                const t = Backdrop._last._dsModalTeardown;
+                Backdrop._last = null;
+                Backdrop._pendingRemoval = true;
+                t(false); // always unhook the document listener now
+                queueMicrotask(() => {
+                    // Still gone next microtask -> genuine close: restore focus.
+                    if (Backdrop._pendingRemoval) { t(true); Backdrop._pendingRemoval = false; }
+                });
+            }
+        },
+        onclick: (e) => {
+            if (e.target !== e.currentTarget) return;
+            if (e.currentTarget.dataset.busy === '1') return; // no mid-flight close
+            if (onClose) onClose();
+        }
+    },
+        h('div', {
+            class: 'ds-modal' + (kind ? ' ds-modal-' + kind : ''),
+            role: 'dialog', 'aria-modal': 'true',
+            ...(labelledBy ? { 'aria-labelledby': labelledBy } : {})
+        }, ...(Array.isArray(children) ? children : [children]))
+    );
+}
+// Shared modal shell: head + body + actions row. ConfirmDialog/PromptDialog/
+// FileViewer all funnel through this so the ds-modal markup is authored once.
+// `actions` is an array of vnodes (already using the Btn primitive). Any of the
+// slots may be omitted.
+export function Modal({ onClose, kind = '', head, headClass = '', headAttrs = {}, body, bodyClass = 'ds-modal-body', bodyAttrs = {}, actions, busy = false } = {}) {
+    // Give the head a stable id so the dialog can point aria-labelledby at it,
+    // exposing the title as the dialog's accessible name to screen readers.
+    // The id is minted once per Modal() call with a short random suffix so it
+    // stays constant across re-renders of the same dialog instance — an
+    // incrementing counter advances on every render, leaving the previous
+    // aria-labelledby reference pointing at a now-absent element.
+    const headId = head != null ? ('ds-modal-head-' + shortUid(6)) : null;
+    return Backdrop({
+        onClose,
+        kind,
+        busy,
+        labelledBy: headId,
+        children: [
+            head != null ? h('div', { id: headId, class: ('ds-modal-head' + (headClass ? ' ' + headClass : '')), ...headAttrs }, ...(Array.isArray(head) ? head : [head])) : null,
+            body != null ? h('div', { class: bodyClass, ...bodyAttrs }, ...(Array.isArray(body) ? body : [body])) : null,
+            actions != null ? h('div', { class: 'ds-modal-actions' }, ...(Array.isArray(actions) ? actions : [actions])) : null,
+        ].filter(Boolean)
+    });
+}
+// A role=alert error line rendered INSIDE the modal body (so a 409/403 from a
+// mutation is visible at the point of action, inside the focus trap — not a
+// sibling stuck in page flow behind the fixed backdrop).
+export function modalError(error) {
+    return error ? h('p', { class: 'ds-modal-error', role: 'alert' }, String(error)) : null;
+}

package/src/components/files-modals/preview-bodies.js ADDED Viewed

@@ -0,0 +1,129 @@
+// The three preview body renderers a host drops into FileViewer /
+// FilePreviewPane: media (image with fit/actual toggle, video, audio, or a
+// typed fallback), code (gutter + Prism highlight, optional wrap toggle and
+// source/preview mode switch), and plain text.
+import * as webjsx from '../../../vendor/webjsx/index.js';
+import { Icon } from '../shell.js';
+import { fileGlyph } from '../files.js';
+import { highlightAllUnder } from '../../highlight.js';
+const h = webjsx.createElement;
+export function FilePreviewMedia({ src, type = 'other', name } = {}) {
+    if (type === 'image') {
+        // Fit-to-pane (default) vs actual-size (1:1) toggle + a checkerboard so
+        // transparency reads. The toggle flips a class on the img in-place and
+        // reports the natural pixel dimensions into its own caption on load.
+        const onToggle = (e) => {
+            const wrap = e.currentTarget.closest('.ds-preview-media-wrap');
+            const img = wrap && wrap.querySelector('.ds-preview-media');
+            if (!img) return;
+            const actual = img.classList.toggle('is-actual');
+            e.currentTarget.textContent = actual ? 'fit to pane' : 'actual size';
+        };
+        const onLoad = (e) => {
+            const img = e.currentTarget;
+            const cap = img.closest('.ds-preview-media-wrap');
+            const dim = cap && cap.querySelector('.ds-preview-media-dim');
+            if (dim && img.naturalWidth) dim.textContent = img.naturalWidth + ' x ' + img.naturalHeight + ' px';
+        };
+        return h('div', { class: 'ds-preview-media-wrap' },
+            h('img', { class: 'ds-preview-media ds-preview-media-alpha', src, alt: name || '', onload: onLoad }),
+            h('div', { class: 'ds-preview-media-controls' },
+                h('span', { class: 'ds-preview-media-dim', 'aria-live': 'polite' }, ''),
+                h('button', { type: 'button', class: 'chat-code-copy', onclick: onToggle }, 'actual size')));
+    }
+    if (type === 'video') return h('video', { class: 'ds-preview-media', src, controls: true });
+    if (type === 'audio') return h('audio', { class: 'ds-preview-audio', src, controls: true });
+    return h('div', { class: 'ds-preview-fallback' },
+        h('span', { class: 'ds-preview-glyph', 'aria-hidden': 'true' }, Icon(fileGlyph(type))),
+        h('span', {}, 'no inline preview for ' + (type || 'this file'))
+    );
+}
+// FilePreviewCode — the code/source pane. Two additive, opt-in affordances
+// ported from pi-web's FileViewer (behavior only, not its React/SSE plumbing):
+//   wrap        : host-controlled wrap-lines toggle. Pass `wrap` (current
+//                 state) + `onWrapToggle` to show the control; omitted host
+//                 keeps the old always-'pre' behavior (no regression).
+//   previewHtml : when the host has already rendered markdown/HTML to a safe
+//                 HTML string (e.g. via markdown-cache.js's
+//                 renderMarkdownCached, or a sanitized srcDoc for raw HTML
+//                 files) it passes it here + `previewLabel` (defaults
+//                 'preview') to get a source/preview mode switcher, mirroring
+//                 pi-web's DisplayMode tabs. This component never renders
+//                 unsanitized markdown itself — that stays the host's job
+//                 (chat.js already owns the sanitize+render pipeline).
+export function FilePreviewCode({ content = '', lang, filename, wrap, onWrapToggle, previewHtml, previewLabel = 'preview', mode, onModeChange } = {}) {
+    // A filename/lang header matching the chat CodeNode's .chat-code-head, plus
+    // the same copy control (chat A1/A2 ship this run, so preview matches for
+    // full cross-surface consistency).
+    const onCopy = (e) => {
+        const btn = e.currentTarget;
+        const done = () => { btn.textContent = 'copied'; btn.classList.add('is-copied'); setTimeout(() => { btn.textContent = 'copy'; btn.classList.remove('is-copied'); }, 1600); };
+        if (navigator.clipboard && navigator.clipboard.writeText) navigator.clipboard.writeText(content).then(done).catch(() => {});
+        else { try { const t = document.createElement('textarea'); t.value = content; document.body.appendChild(t); t.select(); document.execCommand('copy'); document.body.removeChild(t); done(); } catch { /* swallow: legacy execCommand copy fallback unsupported, nothing more to try */ } }
+    };
+    const hasPreview = previewHtml != null && onModeChange;
+    const activeMode = hasPreview ? (mode || 'source') : 'source';
+    const modeSwitch = hasPreview ? h('div', { class: 'ds-preview-mode-switch', role: 'group', 'aria-label': 'file view mode' },
+        h('button', { type: 'button', class: 'ds-preview-mode-btn' + (activeMode === 'source' ? ' active' : ''),
+            'aria-pressed': activeMode === 'source' ? 'true' : 'false', onclick: () => onModeChange('source') }, 'source'),
+        h('button', { type: 'button', class: 'ds-preview-mode-btn' + (activeMode === 'preview' ? ' active' : ''),
+            'aria-pressed': activeMode === 'preview' ? 'true' : 'false', onclick: () => onModeChange('preview') }, previewLabel)
+    ) : null;
+    const wrapCtl = (onWrapToggle && activeMode === 'source') ? h('button', {
+        type: 'button', class: 'chat-code-copy ds-preview-wrap-toggle' + (wrap ? ' active' : ''),
+        title: wrap ? 'disable word wrap' : 'enable word wrap',
+        'aria-label': wrap ? 'disable word wrap' : 'enable word wrap',
+        'aria-pressed': wrap ? 'true' : 'false',
+        onclick: () => onWrapToggle(!wrap),
+    }, 'wrap') : null;
+    return h('div', { class: 'ds-preview-code-wrap' },
+        h('div', { class: 'chat-code-head ds-preview-code-head' },
+            h('span', { class: 'lang' }, lang || 'text'),
+            filename ? h('span', { class: 'name' }, filename) : null,
+            h('span', { class: 'spread' }),
+            modeSwitch,
+            wrapCtl,
+            h('button', { type: 'button', class: 'chat-code-copy chat-code-copy-head', 'aria-label': 'copy code', onclick: onCopy }, 'copy')),
+        activeMode === 'preview'
+            // webjsx has no innerHTML prop — set it imperatively via ref, same
+            // pattern as chat-message-parts.js/community.js. `previewHtml` is
+            // the HOST's already-sanitized HTML (e.g. via markdown-cache.js's
+            // renderMarkdownCached, which owns its own sanitize step); this
+            // component never sanitizes or fetches on its own.
+            ? h('div', { class: 'ds-preview-html', ref: (el) => { if (el) el.innerHTML = previewHtml; } })
+            : codeBody({ content, lang, wrap })
+    );
+}
+// The code body: a non-selectable line-number gutter + the highlighted code.
+// A ref triggers Prism over the <code> after mount (the bundle only auto-runs
+// Prism in the chat path), so the file preview is token-colored like Claude
+// Code's file pane. lineNumbers defaults on for code, off for plaintext.
+function codeBody({ content = '', lang, wrap = false } = {}) {
+    const wantGutter = !!lang;
+    const lineCount = content ? content.split('\n').length : 1;
+    const gutter = wantGutter
+        ? h('div', { class: 'ds-preview-gutter', 'aria-hidden': 'true' },
+            Array.from({ length: lineCount }, (_, i) => String(i + 1)).join('\n'))
+        : null;
+    const highlightRef = (el) => {
+        if (!el) return;
+        try { highlightAllUnder(el); } catch { /* swallow: syntax highlighting is a progressive enhancement, plain code still renders */ }
+    };
+    // wrap: ported from pi-web's wrapLines toggle — pre-wrap + anywhere-break
+    // instead of the default horizontal-scroll 'pre', for long unbroken lines
+    // (minified JS, long log lines) that are easier to read wrapped.
+    return h('pre', { class: 'ds-preview-code' + (lang ? ' lang-' + lang : '') + (wantGutter ? ' has-gutter' : '') + (wrap ? ' is-wrapped' : ''), ref: highlightRef },
+        gutter,
+        h('code', { class: lang ? 'language-' + lang : '' }, content));
+}
+export function FilePreviewText({ content = '', truncated } = {}) {
+    return h('pre', { class: 'ds-preview-text' },
+        h('code', {}, content),
+        truncated ? h('div', { class: 'ds-preview-truncated' }, '… (truncated)') : null
+    );
+}

package/src/components/files-modals/preview-containers.js ADDED Viewed

@@ -0,0 +1,96 @@
+// The two preview containers around a body renderer: FileViewer (the modal
+// overlay, focus-trapped, kept as the narrow-viewport fallback) and
+// FilePreviewPane (the persistent non-modal side pane for a WorkspaceShell
+// pane slot). Both share the head, the ArrowLeft/Right stepper, and the
+// swipe-to-step gesture.
+import * as webjsx from '../../../vendor/webjsx/index.js';
+import { Icon } from '../shell.js';
+import { fmtFileSize } from '../files.js';
+import { Modal } from './modal-shell.js';
+const h = webjsx.createElement;
+// Shared preview-head children for both the modal FileViewer and the inline
+// FilePreviewPane: name + meta + prev/next stepper + download + close. ASCII
+// prev/next words (no glyph arrows). onPrev/onNext are omitted when there is no
+// previewable neighbour in that direction.
+function previewHead({ file, onClose, onAction, onPrev, onNext } = {}) {
+    const meta = [file.type, file.size != null ? fmtFileSize(file.size) : null, file.modified || null]
+        .filter(Boolean).join(' · ');
+    return [
+        h('span', { class: 'ds-preview-name', title: file.path || file.name || '' }, file.name || ''),
+        h('span', { class: 'ds-preview-meta' }, meta),
+        h('span', { class: 'ds-preview-actions' },
+            (onPrev || onNext) ? h('span', { class: 'ds-preview-step', role: 'group', 'aria-label': 'step files' },
+                h('button', { class: 'ds-file-act', title: 'previous file', 'aria-label': 'previous file', disabled: onPrev ? null : true, onclick: () => onPrev && onPrev() }, 'prev'),
+                h('button', { class: 'ds-file-act', title: 'next file', 'aria-label': 'next file', disabled: onNext ? null : true, onclick: () => onNext && onNext() }, 'next')) : null,
+            onAction ? h('button', { class: 'ds-file-act', title: 'download', 'aria-label': 'download', onclick: () => onAction('download') }, Icon('arrow-down')) : null,
+            onClose ? h('button', { class: 'ds-file-act', title: 'close', 'aria-label': 'close', onclick: onClose }, Icon('x')) : null
+        )
+    ];
+}
+// ArrowLeft/Right step the preview when focus is inside it (both pane + modal).
+function previewKeyNav(onPrev, onNext) {
+    return (e) => {
+        if (e.key === 'ArrowLeft' && onPrev) { e.preventDefault(); onPrev(); }
+        else if (e.key === 'ArrowRight' && onNext) { e.preventDefault(); onNext(); }
+    };
+}
+// Touch stepping: horizontal swipe on the preview body steps prev/next. Skips
+// when the gesture starts inside a horizontally-scrollable child (code <pre>)
+// so panning wide code never flips files.
+function previewSwipe(onPrev, onNext) {
+    if (!onPrev && !onNext) return {};
+    let sx = null, sy = null;
+    return {
+        onpointerdown: (e) => {
+            const scroller = e.target.closest && e.target.closest('pre');
+            if (scroller && scroller.scrollWidth > scroller.clientWidth) { sx = null; return; }
+            sx = e.clientX; sy = e.clientY;
+        },
+        onpointerup: (e) => {
+            if (sx == null) return;
+            const dx = e.clientX - sx, dy = e.clientY - sy;
+            sx = null;
+            if (Math.abs(dx) < 48 || Math.abs(dy) > Math.abs(dx)) return;
+            if (dx < 0 && onNext) onNext();
+            else if (dx > 0 && onPrev) onPrev();
+        },
+        onpointercancel: () => { sx = null; },
+    };
+}
+export function FileViewer({ file, body, onClose, onAction, onPrev, onNext } = {}) {
+    if (!file) return null;
+    const keyNav = previewKeyNav(onPrev, onNext);
+    return Modal({
+        onClose,
+        kind: 'preview',
+        headClass: 'ds-preview-head',
+        headAttrs: { 'data-file-type': file.type || 'other', onkeydown: keyNav },
+        head: previewHead({ file, onClose, onAction, onPrev, onNext }),
+        bodyClass: 'ds-preview-body',
+        bodyAttrs: { 'data-file-type': file.type || 'other', onkeydown: keyNav, ...previewSwipe(onPrev, onNext) },
+        body: Array.isArray(body) ? body : [body],
+    });
+}
+// FilePreviewPane — the SAME preview, but as a persistent, non-modal side pane
+// for the WorkspaceShell's pane slot (the split-view, claude-Desktop file-pane
+// feel). Distinct from the overlay FileViewer (kept as the <900px fallback).
+// Not focus-trapped (it is not modal); ArrowLeft/Right step files when focused.
+export function FilePreviewPane({ file, body, onClose, onAction, onPrev, onNext } = {}) {
+    if (!file) {
+        return h('div', { class: 'ds-preview-pane ds-preview-pane-empty', role: 'status' },
+            h('span', {}, 'Select a file to preview'));
+    }
+    return h('div', { class: 'ds-preview-pane', role: 'region', 'aria-label': 'file preview: ' + (file.name || ''),
+                      tabindex: '0', onkeydown: previewKeyNav(onPrev, onNext) },
+        h('div', { class: 'ds-preview-head', 'data-file-type': file.type || 'other' },
+            ...previewHead({ file, onClose, onAction, onPrev, onNext })),
+        h('div', { class: 'ds-preview-body', 'data-file-type': file.type || 'other' },
+            ...(Array.isArray(body) ? body : [body]))
+    );
+}