@jini-ai/ui 0.5.4 → 0.5.6

package/dist/features/file-dropzone/react/components/FileDropzone.js

@@ -1,6 +1,5 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useState } from 'react';
-import { Icon } from '../../../../react/components/Icon.js';
 import { useGlobalKeydown } from '../../../../browser/useGlobalKeydown.js';
 import { useT } from '../../../i18n/index.js';
 import { useFileDropzone } from '../hooks/useFileDropzone.js';
@@ -8,6 +7,7 @@ import { useFileDropzonePreviews } from '../hooks/useFileDropzonePreviews.js';
 import { FileDropzoneThumbnailGrid } from './FileDropzoneThumbnailGrid.js';
 import { FileDropzoneLightbox } from './FileDropzoneLightbox.js';
 import { FileDropzoneNameList } from './FileDropzoneNameList.js';
+import { FileDropzoneZone } from './FileDropzoneZone.js';
 // Stable identity for the "no files" case — `files ?? []` would otherwise
 // allocate a fresh array every render, and `useFileDropzonePreviews` keys its
 // effects on `files` by reference: a fresh array every render re-triggers
@@ -25,7 +25,7 @@ const NO_FILES = [];
  * drag/drop + click-to-browse resolving to a flat `File[]` — configured
  * differently; see `packages/ui/source-map.md` for the full writeup.
  */
-export function FileDropzone({ label, prompt, helper, accept, directory = false, enablePaste = false, files, onRemove, names, onRemoveName, onFiles, onZoneClick, onError, onProcessingStart, onBrowseFolder, secondaryAction, useFileDropzone: useFileDropzoneHook = useFileDropzone, useFileDropzonePreviews: useFileDropzonePreviewsHook = useFileDropzonePreviews, }) {
+export function FileDropzone({ label, prompt, helper, accept, directory, enablePaste = false, files, onRemove, names, onRemoveName, onFiles, onZoneClick, onError, onProcessingStart, onBrowseFolder, secondaryAction, useFileDropzone: useFileDropzoneHook = useFileDropzone, useFileDropzonePreviews: useFileDropzonePreviewsHook = useFileDropzonePreviews, }) {
     const t = useT();
     const [lightboxFile, setLightboxFile] = useState(null);
     const dropzone = useFileDropzoneHook({ onFiles, onZoneClick, onError, onProcessingStart, enablePaste });
@@ -36,28 +36,27 @@ export function FileDropzone({ label, prompt, helper, accept, directory = false,
                 setLightboxFile(null);
         },
     }, { enabled: lightboxFile !== null });
-    function onZoneKeyDown(event) {
-        if (event.key === 'Enter' || event.key === ' ') {
-            event.preventDefault();
-            dropzone.openPicker();
-        }
-    }
-    const defaultPrompt = enablePaste ? t('Drag & drop, paste, or browse') : t('Drag & drop or browse');
-    const promptText = prompt ? t(prompt) : defaultPrompt;
     const isSimpleVariant = names !== undefined;
-    const showNamesInZone = !!names && names.length > 0 && !onRemoveName;
-    const zoneText = showNamesInZone ? names.join(', ') : promptText;
-    const directoryInputProps = directory ? { webkitdirectory: '', directory: '' } : {};
-    return (_jsxs("div", { className: "jini-file-dropzone", children: [label ? _jsx("strong", { className: "jini-file-dropzone__label", children: t(label) }) : null, _jsxs("div", { className: "jini-file-dropzone__wrap", children: [_jsxs("div", { className: `jini-file-dropzone__zone${dropzone.dragOver ? ' is-drag-over' : ''}`, role: "button", tabIndex: 0, "aria-label": t('Add files — drag and drop{paste}, or click to browse', {
-                            paste: enablePaste ? t(', paste') : '',
-                        }), "data-testid": "file-dropzone-zone", onClick: dropzone.openPicker, onKeyDown: onZoneKeyDown, onDragEnter: dropzone.onZoneDragEnter, onDragOver: dropzone.onZoneDragOver, onDragLeave: dropzone.onZoneDragLeave, onDrop: dropzone.onZoneDrop, children: [_jsx("input", { ref: dropzone.inputRef, type: "file", multiple: true, accept: accept, className: "jini-file-dropzone__input", onClick: (event) => {
-                                    // The input is nested inside the zone div so a real user
-                                    // click on it (e.g. via `openPicker`'s own `input.click()`
-                                    // call) would otherwise bubble straight back into the zone's
-                                    // own `onClick={dropzone.openPicker}`, re-triggering it and
-                                    // opening the file dialog a second time.
-                                    event.stopPropagation();
-                                    dropzone.onInputClick();
-                                }, onChange: dropzone.onInputChange, ...directoryInputProps }), _jsx("span", { className: "jini-file-dropzone__icon", children: _jsx(Icon, { name: "upload", size: 19 }) }), _jsx("span", { className: "jini-file-dropzone__prompt", children: zoneText }), !isSimpleVariant && helper ? _jsx("span", { className: "jini-file-dropzone__hint", children: t(helper) }) : null] }), onBrowseFolder ? (_jsx("button", { type: "button", className: "jini-file-dropzone__browse-folder", onClick: onBrowseFolder, children: t('Browse folder') })) : null] }), secondaryAction ? (_jsx("div", { className: "jini-file-dropzone__secondary", children: _jsx("button", { type: "button", className: "jini-file-dropzone__secondary-action", onClick: secondaryAction.onClick, children: t(secondaryAction.label) }) })) : null, names && names.length > 0 && onRemoveName ? (_jsx(FileDropzoneNameList, { names: names, onRemoveName: onRemoveName, ariaLabel: label ? t('{label} selections', { label: t(label) }) : t('Selections') })) : null, files && files.length > 0 ? (_jsx(FileDropzoneThumbnailGrid, { files: files, previews: previews, onSelect: setLightboxFile, onRemove: onRemove })) : null, isSimpleVariant && helper ? _jsx("p", { className: "jini-file-dropzone__helper", children: t(helper) }) : null, lightboxFile ? (_jsx(FileDropzoneLightbox, { file: lightboxFile, previews: previews, onClose: () => setLightboxFile(null) })) : null] }));
+    // The helper renders inside the zone for the thumbnail-grid variant, and as a
+    // paragraph under the staged names for the simple (`names`) variant.
+    const helperText = helper ? t(helper) : undefined;
+    return (_jsxs("div", { className: "jini-file-dropzone", children: [label ? _jsx("strong", { className: "jini-file-dropzone__label", children: t(label) }) : null, _jsxs("div", { className: "jini-file-dropzone__wrap", children: [_jsx(FileDropzoneZone, { dropzone: dropzone, zoneText: resolveZoneText({ t, enablePaste, names }, { prompt, onRemoveName }), accept: accept, directory: directory, enablePaste: enablePaste, hint: isSimpleVariant ? undefined : helperText }), onBrowseFolder ? (_jsx("button", { type: "button", className: "jini-file-dropzone__browse-folder", onClick: onBrowseFolder, children: t('Browse folder') })) : null] }), _jsx(FileDropzoneStaged, { previews: previews, lightboxFile: lightboxFile, setLightboxFile: setLightboxFile, secondaryAction: secondaryAction, label: label, names: names, onRemoveName: onRemoveName, files: files, onRemove: onRemove, simpleHelper: isSimpleVariant ? helperText : undefined })] }));
+}
+/**
+ * The zone's inner text: the staged names themselves for the simple variant
+ * when they can't be removed individually (no `onRemoveName` → no chip list),
+ * otherwise the host prompt or a default drag/drop(/paste)/browse prompt.
+ */
+function resolveZoneText({ t, enablePaste, names }, { prompt, onRemoveName }) {
+    if (names && names.length > 0 && !onRemoveName)
+        return names.join(', ');
+    if (prompt)
+        return t(prompt);
+    return enablePaste ? t('Drag & drop, paste, or browse') : t('Drag & drop or browse');
+}
+/** Everything below the zone: the secondary action, the staged names/thumbnails, the simple-variant helper, and the lightbox. Empty `names`/`files` render nothing — `FileDropzoneNameList` and `FileDropzoneThumbnailGrid` both return `null` for an empty list. */
+function FileDropzoneStaged({ previews, lightboxFile, setLightboxFile, secondaryAction, label, names, onRemoveName, files, onRemove, simpleHelper, }) {
+    const t = useT();
+    return (_jsxs(_Fragment, { children: [secondaryAction ? (_jsx("div", { className: "jini-file-dropzone__secondary", children: _jsx("button", { type: "button", className: "jini-file-dropzone__secondary-action", onClick: secondaryAction.onClick, children: t(secondaryAction.label) }) })) : null, names && onRemoveName ? (_jsx(FileDropzoneNameList, { names: names, onRemoveName: onRemoveName, ariaLabel: label ? t('{label} selections', { label: t(label) }) : t('Selections') })) : null, files ? (_jsx(FileDropzoneThumbnailGrid, { files: files, previews: previews, onSelect: setLightboxFile, onRemove: onRemove })) : null, simpleHelper ? _jsx("p", { className: "jini-file-dropzone__helper", children: simpleHelper }) : null, lightboxFile ? (_jsx(FileDropzoneLightbox, { file: lightboxFile, previews: previews, onClose: () => setLightboxFile(null) })) : null] }));
 }
 //# sourceMappingURL=FileDropzone.js.map

package/dist/features/file-dropzone/react/components/FileDropzoneLightbox.d.ts

@@ -4,6 +4,6 @@ export interface FileDropzoneLightboxProps {
     previews: FileDropzonePreviewState;
     onClose: () => void;
 }
-/** Click-to-enlarge, kind-aware preview for one staged file — image, PDF embed, HTML mini-render, video/audio player, font specimen, or a text snippet, with a name/size fallback card for everything else. Portaled to `document.body`. Ported from `DesignSystemAssetDropzone.tsx`'s lightbox. */
-export declare function FileDropzoneLightbox({ file, previews, onClose }: FileDropzoneLightboxProps): import("react").ReactPortal;
+/** Click-to-enlarge, kind-aware preview for one staged file — image, PDF embed, HTML mini-render, video/audio player, font specimen, or a text snippet, with a name/size fallback card for everything else. Rendered in the shared `Lightbox` (a top-layer native dialog, so no portal is needed). Ported from `DesignSystemAssetDropzone.tsx`'s lightbox. */
+export declare function FileDropzoneLightbox({ file, previews, onClose }: FileDropzoneLightboxProps): import("react").JSX.Element;
 //# sourceMappingURL=FileDropzoneLightbox.d.ts.map

package/dist/features/file-dropzone/react/components/FileDropzoneLightbox.js

@@ -1,44 +1,49 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { createPortal } from 'react-dom';
 import { Icon } from '../../../../react/components/Icon.js';
+import { Lightbox } from '../../../admin-widgets/components/Lightbox/Lightbox.js';
 import { useT } from '../../../i18n/index.js';
 import { FILE_DROPZONE_FONT_PANGRAM, FILE_DROPZONE_FONT_SPECIMEN, FILE_DROPZONE_GLYPH_ICON } from '../../constants.js';
 import { fileDropzoneExtensionLabel, fileDropzoneKind, fileDropzoneSizeLabel } from '../../rules.js';
-function renderStage(t, file, kind, previews) {
-    const url = previews.previewUrls.get(file);
-    if (kind === 'image' && url) {
-        return _jsx("img", { src: url, alt: file.name, className: "jini-file-dropzone__lightbox-img" });
-    }
-    if (kind === 'video' && url) {
-        return _jsx("video", { src: url, className: "jini-file-dropzone__lightbox-video", controls: true, autoPlay: true, playsInline: true });
-    }
-    if (kind === 'audio' && url) {
-        return (_jsxs("div", { className: "jini-file-dropzone__lightbox-audio", children: [_jsx("span", { className: "jini-file-dropzone__lightbox-audio-icon", children: _jsx(Icon, { name: "volume", size: 34 }) }), _jsx("audio", { src: url, controls: true, className: "jini-file-dropzone__lightbox-audio-player" })] }));
-    }
-    if (kind === 'pdf' && url) {
-        return _jsx("iframe", { src: url, className: "jini-file-dropzone__lightbox-frame", title: file.name });
-    }
-    if (kind === 'html' && url) {
-        return (_jsx("iframe", { src: url, className: "jini-file-dropzone__lightbox-frame", title: file.name, sandbox: "allow-scripts allow-popups" }));
-    }
-    if (kind === 'font') {
+/** Renders `render(url)` once the file's object URL has resolved, `null` (→ fallback card) until then. */
+function withUrl(render) {
+    return ({ file, previews }) => {
+        const url = previews.previewUrls.get(file);
+        return url ? render(url, file) : null;
+    };
+}
+/**
+ * Per-kind stage renderers. Each returns `null` while its preview source is
+ * not available yet (no object URL, no loaded font family, no text snippet),
+ * so `renderStage` shows the name/size fallback card. Kinds with no entry
+ * (slides/other) always render the fallback card.
+ */
+const STAGE_RENDERERS = {
+    image: withUrl((url, file) => _jsx("img", { src: url, alt: file.name, className: "jini-file-dropzone__lightbox-img" })),
+    video: withUrl((url) => _jsx("video", { src: url, className: "jini-file-dropzone__lightbox-video", controls: true, autoPlay: true, playsInline: true })),
+    audio: withUrl((url) => (_jsxs("div", { className: "jini-file-dropzone__lightbox-audio", children: [_jsx("span", { className: "jini-file-dropzone__lightbox-audio-icon", children: _jsx(Icon, { name: "volume", size: 34 }) }), _jsx("audio", { src: url, controls: true, className: "jini-file-dropzone__lightbox-audio-player" })] }))),
+    pdf: withUrl((url, file) => _jsx("iframe", { src: url, className: "jini-file-dropzone__lightbox-frame", title: file.name })),
+    html: withUrl((url, file) => (_jsx("iframe", { src: url, className: "jini-file-dropzone__lightbox-frame", title: file.name, sandbox: "allow-scripts allow-popups" }))),
+    font: ({ file, previews }) => {
         const family = previews.fontFamilies.get(file);
-        if (family) {
-            return (_jsxs("div", { className: "jini-file-dropzone__lightbox-font", style: { fontFamily: `'${family}'` }, children: [_jsxs("div", { className: "jini-file-dropzone__lightbox-font-hero", children: [FILE_DROPZONE_FONT_SPECIMEN, "Bb Cc"] }), _jsx("div", { className: "jini-file-dropzone__lightbox-font-pangram", children: FILE_DROPZONE_FONT_PANGRAM }), _jsxs("div", { className: "jini-file-dropzone__lightbox-font-scale", children: [_jsx("span", { style: { fontSize: 13 }, children: FILE_DROPZONE_FONT_PANGRAM }), _jsx("span", { style: { fontSize: 18 }, children: FILE_DROPZONE_FONT_PANGRAM }), _jsx("span", { style: { fontSize: 26 }, children: FILE_DROPZONE_FONT_PANGRAM })] })] }));
-        }
-    }
-    if (kind === 'text') {
+        if (!family)
+            return null;
+        return (_jsxs("div", { className: "jini-file-dropzone__lightbox-font", style: { fontFamily: `'${family}'` }, children: [_jsxs("div", { className: "jini-file-dropzone__lightbox-font-hero", children: [FILE_DROPZONE_FONT_SPECIMEN, "Bb Cc"] }), _jsx("div", { className: "jini-file-dropzone__lightbox-font-pangram", children: FILE_DROPZONE_FONT_PANGRAM }), _jsxs("div", { className: "jini-file-dropzone__lightbox-font-scale", children: [_jsx("span", { style: { fontSize: 13 }, children: FILE_DROPZONE_FONT_PANGRAM }), _jsx("span", { style: { fontSize: 18 }, children: FILE_DROPZONE_FONT_PANGRAM }), _jsx("span", { style: { fontSize: 26 }, children: FILE_DROPZONE_FONT_PANGRAM })] })] }));
+    },
+    text: ({ t, file, previews }) => {
         const snippet = previews.textSnippets.get(file);
-        if (snippet != null) {
-            return _jsx("pre", { className: "jini-file-dropzone__lightbox-text", children: snippet || t('(empty file)') });
-        }
-    }
+        return snippet != null ? _jsx("pre", { className: "jini-file-dropzone__lightbox-text", children: snippet || t('(empty file)') }) : null;
+    },
+};
+function renderFallback({ t, file, kind }) {
     return (_jsxs("div", { className: "jini-file-dropzone__lightbox-fallback", children: [_jsx("span", { className: "jini-file-dropzone__lightbox-fallback-glyph", "data-kind": kind, children: _jsx(Icon, { name: FILE_DROPZONE_GLYPH_ICON[kind], size: 40 }) }), _jsx("p", { className: "jini-file-dropzone__lightbox-fallback-name", children: file.name }), _jsxs("p", { className: "jini-file-dropzone__lightbox-fallback-meta", children: [fileDropzoneExtensionLabel(file), " \u00B7 ", fileDropzoneSizeLabel(file.size) || '—'] }), _jsx("p", { className: "jini-file-dropzone__lightbox-fallback-hint", children: t('No inline preview for this file type.') })] }));
 }
-/** Click-to-enlarge, kind-aware preview for one staged file — image, PDF embed, HTML mini-render, video/audio player, font specimen, or a text snippet, with a name/size fallback card for everything else. Portaled to `document.body`. Ported from `DesignSystemAssetDropzone.tsx`'s lightbox. */
+function renderStage({ t, file, kind, previews }) {
+    return STAGE_RENDERERS[kind]?.({ t, file, previews }) ?? renderFallback({ t, file, kind });
+}
+/** Click-to-enlarge, kind-aware preview for one staged file — image, PDF embed, HTML mini-render, video/audio player, font specimen, or a text snippet, with a name/size fallback card for everything else. Rendered in the shared `Lightbox` (a top-layer native dialog, so no portal is needed). Ported from `DesignSystemAssetDropzone.tsx`'s lightbox. */
 export function FileDropzoneLightbox({ file, previews, onClose }) {
     const t = useT();
     const kind = fileDropzoneKind(file);
-    return createPortal(_jsx("div", { className: "jini-file-dropzone__lightbox", onClick: onClose, role: "presentation", children: _jsxs("div", { className: "jini-file-dropzone__lightbox-inner", onClick: (event) => event.stopPropagation(), role: "dialog", "aria-modal": "true", "aria-label": file.name, children: [_jsx("div", { className: "jini-file-dropzone__lightbox-stage", "data-kind": kind, children: renderStage(t, file, kind, previews) }), _jsxs("div", { className: "jini-file-dropzone__lightbox-bar", children: [_jsx("span", { className: "jini-file-dropzone__lightbox-name", title: file.name, children: file.name }), _jsx("span", { className: "jini-file-dropzone__lightbox-meta", children: fileDropzoneSizeLabel(file.size) }), _jsx("button", { type: "button", className: "jini-file-dropzone__lightbox-close", onClick: onClose, "aria-label": t('Close preview'), children: _jsx(Icon, { name: "close", size: 18 }) })] })] }) }), document.body);
+    return (_jsx(Lightbox, { open: true, title: file.name, onClose: onClose, className: "jini-file-dropzone__lightbox", labels: { close: t('Close preview') }, actions: _jsx("span", { className: "jini-file-dropzone__lightbox-meta", children: fileDropzoneSizeLabel(file.size) }), children: _jsx("div", { className: "jini-file-dropzone__lightbox-stage", "data-kind": kind, children: renderStage({ t, file, kind, previews }) }) }));
 }
 //# sourceMappingURL=FileDropzoneLightbox.js.map

package/dist/features/file-dropzone/react/components/FileDropzoneThumbnailGrid.js

@@ -3,33 +3,39 @@ import { Icon } from '../../../../react/components/Icon.js';
 import { useT } from '../../../i18n/index.js';
 import { FILE_DROPZONE_FONT_SPECIMEN, FILE_DROPZONE_GLYPH_ICON, FILE_DROPZONE_TEXT_THUMB_CHARS } from '../../constants.js';
 import { fileDropzoneExtensionLabel, fileDropzoneKind, fileDropzoneStagingKey } from '../../rules.js';
-function renderGlyph(file, kind) {
+function renderGlyph({ file, kind }) {
     return (_jsxs("span", { className: "jini-file-dropzone__glyph", "data-kind": kind, children: [_jsx(Icon, { name: FILE_DROPZONE_GLYPH_ICON[kind], size: 20 }), _jsx("span", { className: "jini-file-dropzone__glyph-ext", children: fileDropzoneExtensionLabel(file) })] }));
 }
-function renderThumb(file, kind, previews) {
-    const url = previews.previewUrls.get(file);
-    if (kind === 'image' && url) {
-        return _jsx("img", { src: url, alt: "", className: "jini-file-dropzone__thumb", loading: "lazy" });
-    }
-    if (kind === 'video' && url) {
-        return (_jsx("video", { className: "jini-file-dropzone__thumb", src: url, muted: true, playsInline: true, preload: "metadata", tabIndex: -1 }));
-    }
-    if (kind === 'font') {
+/**
+ * Per-kind thumbnail renderers. Each returns `null` while its preview source
+ * (object URL, loaded font family, non-blank text snippet) is not available
+ * yet, so `renderThumb` falls back to the extension glyph. Kinds with no entry
+ * (pdf/audio/slides/other) always render the glyph.
+ */
+const THUMB_RENDERERS = {
+    image: ({ file, previews }) => {
+        const url = previews.previewUrls.get(file);
+        return url ? _jsx("img", { src: url, alt: "", className: "jini-file-dropzone__thumb", loading: "lazy" }) : null;
+    },
+    video: ({ file, previews }) => {
+        const url = previews.previewUrls.get(file);
+        return url ? (_jsx("video", { className: "jini-file-dropzone__thumb", src: url, muted: true, playsInline: true, preload: "metadata", tabIndex: -1 })) : null;
+    },
+    font: ({ file, previews }) => {
         const family = previews.fontFamilies.get(file);
-        if (family) {
-            return (_jsx("span", { className: "jini-file-dropzone__font-thumb", style: { fontFamily: `'${family}'` }, "aria-hidden": true, children: FILE_DROPZONE_FONT_SPECIMEN }));
-        }
-    }
-    if (kind === 'html' && url) {
-        return (_jsx("span", { className: "jini-file-dropzone__frame-thumb", "aria-hidden": true, children: _jsx("iframe", { className: "jini-file-dropzone__html-thumb", src: url, title: "", sandbox: "", tabIndex: -1 }) }));
-    }
-    if (kind === 'text') {
+        return family ? (_jsx("span", { className: "jini-file-dropzone__font-thumb", style: { fontFamily: `'${family}'` }, "aria-hidden": true, children: FILE_DROPZONE_FONT_SPECIMEN })) : null;
+    },
+    html: ({ file, previews }) => {
+        const url = previews.previewUrls.get(file);
+        return url ? (_jsx("span", { className: "jini-file-dropzone__frame-thumb", "aria-hidden": true, children: _jsx("iframe", { className: "jini-file-dropzone__html-thumb", src: url, title: "", sandbox: "", tabIndex: -1 }) })) : null;
+    },
+    text: ({ file, previews }) => {
         const snippet = previews.textSnippets.get(file);
-        if (snippet && snippet.trim()) {
-            return (_jsx("span", { className: "jini-file-dropzone__text-thumb", "aria-hidden": true, children: snippet.slice(0, FILE_DROPZONE_TEXT_THUMB_CHARS) }));
-        }
-    }
-    return renderGlyph(file, kind);
+        return snippet?.trim() ? (_jsx("span", { className: "jini-file-dropzone__text-thumb", "aria-hidden": true, children: snippet.slice(0, FILE_DROPZONE_TEXT_THUMB_CHARS) })) : null;
+    },
+};
+function renderThumb({ file, kind, previews }) {
+    return THUMB_RENDERERS[kind]?.({ file, previews }) ?? renderGlyph({ file, kind });
 }
 /** Kind-aware thumbnail grid over staged files, with remove tiles and click-to-select (the host renders the lightbox — see `FileDropzoneLightbox`). Ported from `DesignSystemAssetDropzone.tsx`'s staged-asset grid. */
 export function FileDropzoneThumbnailGrid({ files, previews, onSelect, onRemove }) {
@@ -38,7 +44,7 @@ export function FileDropzoneThumbnailGrid({ files, previews, onSelect, onRemove
         return null;
     return (_jsx("ul", { className: "jini-file-dropzone__grid", "aria-label": t('Staged files'), children: files.map((file) => {
             const kind = fileDropzoneKind(file);
-            return (_jsxs("li", { className: "jini-file-dropzone__tile", children: [_jsx("button", { type: "button", className: "jini-file-dropzone__tile-main", onClick: () => onSelect(file), title: file.name, children: renderThumb(file, kind, previews) }), onRemove ? (_jsx("button", { type: "button", className: "jini-file-dropzone__remove", "aria-label": t('Remove {name}', { name: file.name }), onClick: () => onRemove(file), children: _jsx(Icon, { name: "close", size: 12 }) })) : null, _jsx("span", { className: "jini-file-dropzone__caption", title: file.name, children: file.name })] }, fileDropzoneStagingKey(file)));
+            return (_jsxs("li", { className: "jini-file-dropzone__tile", children: [_jsx("button", { type: "button", className: "jini-file-dropzone__tile-main", onClick: () => onSelect(file), title: file.name, children: renderThumb({ file, kind, previews }) }), onRemove ? (_jsx("button", { type: "button", className: "jini-file-dropzone__remove", "aria-label": t('Remove {name}', { name: file.name }), onClick: () => onRemove(file), children: _jsx(Icon, { name: "close", size: 12 }) })) : null, _jsx("span", { className: "jini-file-dropzone__caption", title: file.name, children: file.name })] }, fileDropzoneStagingKey(file)));
         }) }));
 }
 //# sourceMappingURL=FileDropzoneThumbnailGrid.js.map

package/dist/features/file-dropzone/react/components/FileDropzoneZone.d.ts

@@ -0,0 +1,14 @@
+import type { UseFileDropzoneResult } from '../hooks/useFileDropzone.js';
+export interface FileDropzoneZoneProps {
+    dropzone: UseFileDropzoneResult;
+    /** Text shown inside the zone (the prompt, or the staged names for the simple variant without remove chips). */
+    zoneText: string;
+    accept?: string | undefined;
+    directory?: boolean | undefined;
+    enablePaste?: boolean | undefined;
+    /** Already-translated hint shown inside the zone under the prompt. */
+    hint?: string | undefined;
+}
+/** The keyboard-activatable drag/drop/click zone of `FileDropzone`, with its nested native file input. Internal to the file-dropzone feature. */
+export declare function FileDropzoneZone({ dropzone, zoneText, accept, directory, enablePaste, hint }: FileDropzoneZoneProps): import("react").JSX.Element;
+//# sourceMappingURL=FileDropzoneZone.d.ts.map

package/dist/features/file-dropzone/react/components/FileDropzoneZone.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Icon } from '../../../../react/components/Icon.js';
+import { useT } from '../../../i18n/index.js';
+/** The keyboard-activatable drag/drop/click zone of `FileDropzone`, with its nested native file input. Internal to the file-dropzone feature. */
+export function FileDropzoneZone({ dropzone, zoneText, accept, directory, enablePaste, hint }) {
+    const t = useT();
+    function onZoneKeyDown(event) {
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            dropzone.openPicker();
+        }
+    }
+    const directoryInputProps = directory ? { webkitdirectory: '', directory: '' } : {};
+    return (_jsxs("div", { className: `jini-file-dropzone__zone${dropzone.dragOver ? ' is-drag-over' : ''}`, role: "button", tabIndex: 0, "aria-label": t('Add files — drag and drop{paste}, or click to browse', {
+            paste: enablePaste ? t(', paste') : '',
+        }), "data-testid": "file-dropzone-zone", onClick: dropzone.openPicker, onKeyDown: onZoneKeyDown, onDragEnter: dropzone.onZoneDragEnter, onDragOver: dropzone.onZoneDragOver, onDragLeave: dropzone.onZoneDragLeave, onDrop: dropzone.onZoneDrop, children: [_jsx("input", { ref: dropzone.inputRef, type: "file", multiple: true, accept: accept, className: "jini-file-dropzone__input", onClick: (event) => {
+                    // The input is nested inside the zone div so a real user
+                    // click on it (e.g. via `openPicker`'s own `input.click()`
+                    // call) would otherwise bubble straight back into the zone's
+                    // own `onClick={dropzone.openPicker}`, re-triggering it and
+                    // opening the file dialog a second time.
+                    event.stopPropagation();
+                    dropzone.onInputClick();
+                }, onChange: dropzone.onInputChange, ...directoryInputProps }), _jsx("span", { className: "jini-file-dropzone__icon", children: _jsx(Icon, { name: "upload", size: 19 }) }), _jsx("span", { className: "jini-file-dropzone__prompt", children: zoneText }), hint ? _jsx("span", { className: "jini-file-dropzone__hint", children: hint }) : null] }));
+}
+//# sourceMappingURL=FileDropzoneZone.js.map

package/dist/features/html-editor/canvas-content-wrapper.js

@@ -54,26 +54,26 @@ function buildWrapperElement(doc, node) {
  *   (each moved once, no copying).
  */
 export function applyCanvasContentWrapper(body, chain) {
-    if (!chain || chain.length === 0)
+    if (!chain)
+        return;
+    // `[]` is the same no-op as `undefined`; reading the innermost node here doubles as that length check.
+    const innermostNode = chain[chain.length - 1];
+    if (!innermostNode)
         return;
     // Re-entrancy guard — see WRAPPER_ROOT_MARKER's own doc.
     if (body.querySelector(`[${WRAPPER_ROOT_MARKER}]`))
         return;
     const doc = body.ownerDocument;
-    // Built innermost-first via `reduceRight` (each level's element wraps the previous result), which
-    // also hands back a reference to the innermost level in the same pass — avoids indexing into a
-    // built array by position, which `chain`'s `readonly T[]` (not a fixed-length tuple) type cannot
-    // statically prove is in bounds even though the length guard above makes it always true here.
-    let innermost;
-    const outermost = chain.reduceRight((child, node) => {
+    // Built innermost-first via `reduceRight` over the remaining ancestors (each level's element wraps
+    // the previous result), seeded with the innermost level itself — so both ends of the chain are
+    // plain `HTMLElement`s with no "maybe undefined" result to guard. (The old seed was `undefined`,
+    // which forced an `if (!outermost || !innermost) return` the length guard above made unreachable.)
+    const innermost = buildWrapperElement(doc, innermostNode);
+    const outermost = chain.slice(0, -1).reduceRight((child, node) => {
         const el = buildWrapperElement(doc, node);
-        if (child)
-            el.appendChild(child);
-        innermost ??= el;
+        el.appendChild(child);
         return el;
-    }, undefined);
-    if (!outermost || !innermost)
-        return; // Unreachable given the `chain.length === 0` guard above.
+    }, innermost);
     outermost.setAttribute(WRAPPER_ROOT_MARKER, '');
     // Move body's existing children into the innermost wrapper level, preserving order. Snapshotted
     // into an array first — `body.childNodes` is a LIVE collection that would shrink out from under a

package/dist/features/html-editor/canvas-embed-placeholders.js

@@ -224,39 +224,60 @@ export function applyCanvasEmbedPlaceholders(body, describe) {
         // Skip existing embed cards and all chrome before calling the host. Runtime cards still
         // re-describe their direct marker so theme changes can refresh its bounded footprint.
         const existingCard = el.closest(`[${CARD_ROOT_MARKER}]`);
-        if (existingCard && (!existingCard.hasAttribute(CARD_RUNTIME_MARKER)
-            || el.parentElement !== existingCard || el.hasAttribute(CARD_CHROME_MARKER)))
+        if (existingCard && !canRefreshRuntimeCard({ el, card: existingCard }, {}))
             continue;
         const descriptor = describe(el);
         if (!descriptor)
             continue;
-        if (existingCard) {
-            if (descriptor.presentation === 'runtime')
-                applyRuntimeFootprint(el, existingCard, descriptor);
-            continue;
-        }
-        const parent = el.parentNode;
-        if (!parent)
-            continue; // Unreachable for a live `body` descendant; defensive only.
-        const card = buildPlaceholderCard(doc, descriptor);
-        // Respect the author's own box (e.g. `style="max-width:600px"` on the marker) by carrying its
-        // inline style onto the card BEFORE the card's own chrome declarations, so same-named properties
-        // in `CARD_STYLE` win on the cascade's normal "last declaration wins" rule while anything the
-        // author set that `CARD_STYLE` doesn't touch (like `max-width`) still applies unopposed. Guarded
-        // on presence so a marker with no `style` attribute at all is a no-op, not a leading `;`.
-        const authoredStyle = el.getAttribute('style');
-        if (authoredStyle && descriptor.presentation !== 'runtime')
-            card.setAttribute('style', `${authoredStyle};${card.getAttribute('style')}`);
-        applyResolvedMaxWidth(el, card);
+        updatePlaceholder({ el, doc, descriptor, existingCard }, {});
+    }
+}
+function canRefreshRuntimeCard({ el, card }, _options = {}) {
+    return card.hasAttribute(CARD_RUNTIME_MARKER) && el.parentElement === card && !el.hasAttribute(CARD_CHROME_MARKER);
+}
+function updatePlaceholder({ el, doc, descriptor, existingCard }, _options = {}) {
+    if (existingCard) {
         if (descriptor.presentation === 'runtime')
-            applyRuntimeFootprint(el, card, descriptor);
-        parent.insertBefore(card, el);
-        card.appendChild(el); // Moves the SAME node (auto-detaches from `parent`) — never cloned.
-        ensureOverlayRule(doc);
+            applyRuntimeFootprint(el, existingCard, descriptor);
+        return;
     }
+    const parent = el.parentNode;
+    if (!parent)
+        return; // Unreachable for a live `body` descendant; defensive only.
+    const card = buildPlaceholderCard(doc, descriptor);
+    // Respect the author's own box (e.g. `style="max-width:600px"` on the marker) by carrying its
+    // inline style onto the card BEFORE the card's own chrome declarations, so same-named properties
+    // in `CARD_STYLE` win on the cascade's normal "last declaration wins" rule while anything the
+    // author set that `CARD_STYLE` doesn't touch (like `max-width`) still applies unopposed. Guarded
+    // on presence so a marker with no `style` attribute at all is a no-op, not a leading `;`.
+    const authoredStyle = el.getAttribute('style');
+    if (authoredStyle && descriptor.presentation !== 'runtime')
+        card.setAttribute('style', `${authoredStyle};${card.getAttribute('style')}`);
+    applyResolvedMaxWidth(el, card);
+    if (descriptor.presentation === 'runtime')
+        applyRuntimeFootprint(el, card, descriptor);
+    parent.insertBefore(card, el);
+    card.appendChild(el); // Moves the SAME node (auto-detaches from `parent`) — never cloned.
+    ensureOverlayRule(doc);
 }
 /** Geometry belongs to canvas DOM only; arbitrary transforms/min-height cannot defeat the clamp. */
 function applyRuntimeFootprint(el, card, descriptor) {
+    const resolved = measureAuthoredHeight({ el }, {});
+    const native = el.getAttribute('height');
+    const declared = descriptor.declaredHeight ?? (resolved?.endsWith('px') ? Number.parseFloat(resolved) : undefined);
+    card.style.height = `${editorBlockHeight({ declaredHeight: declared, nativeHeight: native ? Number(native) : undefined, inline: descriptor.inline }, {})}px`;
+    card.style.minHeight = '0';
+    card.style.maxHeight = descriptor.inline ? '160px' : '960px';
+    card.style.overflow = 'hidden';
+    if (descriptor.inline) {
+        card.style.display = 'inline-flex';
+        card.style.verticalAlign = 'middle';
+    }
+    // The marker is the selectable hit surface, never an authored layout/transform or media view.
+    el.style.setProperty('transform', 'none', 'important');
+    el.style.setProperty('overflow', 'hidden', 'important');
+}
+function measureAuthoredHeight({ el }, _options = {}) {
     // Re-measure the authored shell after theme links settle, without our selection overlay's
     // !important auto-height masking its declarations. No component/model styles are changed.
     const overlay = el.ownerDocument.head.querySelector(`style[${OVERLAY_STYLE_MARKER}]`);
@@ -272,18 +293,6 @@ function applyRuntimeFootprint(el, card, descriptor) {
         if (sheet)
             sheet.disabled = wasDisabled ?? false;
     }
-    const native = el.getAttribute('height');
-    const declared = descriptor.declaredHeight ?? (resolved?.endsWith('px') ? Number.parseFloat(resolved) : undefined);
-    card.style.height = `${editorBlockHeight({ declaredHeight: declared, nativeHeight: native ? Number(native) : undefined, inline: descriptor.inline }, {})}px`;
-    card.style.minHeight = '0';
-    card.style.maxHeight = descriptor.inline ? '160px' : '960px';
-    card.style.overflow = 'hidden';
-    if (descriptor.inline) {
-        card.style.display = 'inline-flex';
-        card.style.verticalAlign = 'middle';
-    }
-    // The marker is the selectable hit surface, never an authored layout/transform or media view.
-    el.style.setProperty('transform', 'none', 'important');
-    el.style.setProperty('overflow', 'hidden', 'important');
+    return resolved;
 }
 //# sourceMappingURL=canvas-embed-placeholders.js.map