@elytracms/studio 0.0.21 → 0.0.23

package/dist/components/cms/asset-picker.js

@@ -1,18 +1,21 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { AlertTriangle, Check, ImageIcon, Search } from 'lucide-react';
-import { useState } from 'react';
-import { Button, Code, Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, Input, Row, Spacer, Text, } from '@elytracms/studio/ui';
+import { AlertTriangle, Check, ImageIcon, Maximize2, Minimize2, Search, Upload } from 'lucide-react';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { Button, Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, Input, Row, Spacer, Stack, Text, } from '@elytracms/studio/ui';
 import { cn } from '@elytracms/studio/lib/utils';
 import { filterAssets } from '../assets/asset-search';
 import { AssetsProvider, useAssets, useOptionalAssets } from '../assets/assets-store';
+import { newlyAddedAssetIds } from '../assets/focal-point';
 import { useCms } from './cms-store';
 /**
  * Pick an asset for a CMS `asset` field (brief §8.4, §8.6, EC-075 → EC-152).
  * Backed by the *real* asset library (the assets store over the operations
  * client) — the same records the Assets section lists — not by fixture
- * documents. Selecting stores the asset id on the document field.
+ * documents. Selecting stores the asset id on the document field. The dialog
+ * is form-width with a maximize toggle and supports drag/click upload that
+ * auto-selects the new asset (EC-301).
  */
-export function AssetPicker({ value, open, onOpenChange, onChange, }) {
+export function AssetPicker({ value, open, onOpenChange, onChange, accept, }) {
     const cms = useCms();
     const ambient = useOptionalAssets();
     // Mount nothing while closed: the self-provided assets store would
@@ -20,32 +23,87 @@ export function AssetPicker({ value, open, onOpenChange, onChange, }) {
     if (!open)
         return null;
     if (ambient) {
-        return _jsx(AssetPickerDialog, { value: value, onOpenChange: onOpenChange, onChange: onChange });
+        return (_jsx(AssetPickerDialog, { value: value, onOpenChange: onOpenChange, onChange: onChange, accept: accept }));
     }
     if (cms.projectId === undefined) {
         // No project scope (fixture-only CMS session): the library is
         // unreachable — say so instead of silently showing nothing.
         return (_jsx(Dialog, { open: true, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { className: "max-w-md", children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: "Pick an asset" }), _jsx(DialogDescription, { children: "Select from the project's asset library." })] }), _jsxs(Row, { gap: "2", "data-testid": "asset-picker-no-project", children: [_jsx(AlertTriangle, { className: "size-4 text-warning" }), _jsx(Text, { size: "sm", tone: "muted", children: "The asset library needs a project \u2014 this CMS session has none." })] })] }) }));
     }
-    return (_jsx(AssetsProvider, { projectId: cms.projectId, children: _jsx(AssetPickerDialog, { value: value, onOpenChange: onOpenChange, onChange: onChange }) }));
+    return (_jsx(AssetsProvider, { projectId: cms.projectId, children: _jsx(AssetPickerDialog, { value: value, onOpenChange: onOpenChange, onChange: onChange, accept: accept }) }));
 }
 /** The open dialog over a mounted assets store. */
-function AssetPickerDialog({ value, onOpenChange, onChange, }) {
+function AssetPickerDialog({ value, onOpenChange, onChange, accept, }) {
     const store = useAssets();
     // Fresh per open: the picker unmounts entirely while closed.
     const [query, setQuery] = useState('');
+    const [maximized, setMaximized] = useState(false);
+    const [dragging, setDragging] = useState(false);
+    const fileInputRef = useRef(null);
+    // Library ids when an upload started; the effect below diffs against it to
+    // learn the new asset and select it (the `upload()` API returns nothing).
+    const pendingRef = useRef(null);
+    // Drag depth (EC-301): keeps the drop overlay steady as the pointer crosses
+    // child boundaries — the same per-element dragenter/dragleave flicker the field
+    // fixes. Only hide when the count returns to zero.
+    const dragDepth = useRef(0);
     const assets = filterAssets(store.assets, query);
-    return (_jsx(Dialog, { open: true, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { className: "max-w-md", children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: "Pick an asset" }), _jsx(DialogDescription, { children: "Select from the project's asset library." })] }), _jsxs("span", { className: "relative", children: [_jsx(Search, { className: "pointer-events-none absolute left-2.5 top-1/2 size-3.5 -translate-y-1/2 text-muted-foreground" }), _jsx(Input, { autoFocus: true, value: query, onChange: (e) => setQuery(e.target.value), placeholder: "Search assets\u2026", className: "pl-8", "data-testid": "asset-picker-search" })] }), _jsx("div", { className: "grid max-h-72 grid-cols-2 gap-2 overflow-auto", "data-testid": "asset-picker-grid", children: store.status === 'loading' ? (_jsx(Text, { size: "sm", tone: "muted", className: "col-span-2 p-3", children: "Loading assets\u2026" })) : store.status === 'error' ? (_jsxs(Row, { gap: "2", className: "col-span-2 p-3", "data-testid": "asset-picker-error", children: [_jsx(AlertTriangle, { className: "size-4 text-destructive" }), _jsx(Text, { size: "sm", tone: "muted", children: store.errorMessage ?? 'Assets failed to load.' })] })) : assets.length === 0 ? (_jsx(Text, { size: "sm", tone: "muted", className: "col-span-2 p-3", children: query.trim() ? 'No assets match your search.' : 'No assets uploaded yet.' })) : (assets.map((asset) => (_jsx(AssetPickerCard, { asset: asset, selected: asset.id === value, onPick: () => {
+    const libraryIds = useMemo(() => store.assets.map((a) => a.id), [store.assets]);
+    // Auto-select an asset uploaded from within the picker, then close.
+    useEffect(() => {
+        if (!pendingRef.current)
+            return;
+        const added = newlyAddedAssetIds(pendingRef.current, libraryIds);
+        if (added.length === 0)
+            return;
+        pendingRef.current = null;
+        onChange(added[0]);
+        onOpenChange(false);
+    }, [libraryIds, onChange, onOpenChange]);
+    function handleUpload(files) {
+        if (files.length === 0)
+            return;
+        pendingRef.current = new Set(libraryIds);
+        store.upload(files);
+    }
+    function onDragEnter(e) {
+        e.preventDefault();
+        dragDepth.current += 1;
+        if (!dragging)
+            setDragging(true);
+    }
+    function onDragLeave() {
+        dragDepth.current -= 1;
+        if (dragDepth.current <= 0) {
+            dragDepth.current = 0;
+            setDragging(false);
+        }
+    }
+    function onDrop(e) {
+        e.preventDefault();
+        dragDepth.current = 0;
+        setDragging(false);
+        handleUpload(Array.from(e.dataTransfer.files));
+    }
+    return (_jsx(Dialog, { open: true, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { className: cn(maximized ? 'max-w-[95vw]' : 'max-w-2xl'), onDragEnter: onDragEnter, onDragOver: (e) => e.preventDefault(), onDragLeave: onDragLeave, onDrop: onDrop, children: [_jsx(DialogHeader, { children: _jsxs(Row, { gap: "2", align: "center", children: [_jsxs(Stack, { gap: "1", className: "min-w-0 flex-1", children: [_jsx(DialogTitle, { children: "Pick an asset" }), _jsx(DialogDescription, { children: "Select from the project's asset library." })] }), _jsx(Button, { variant: "ghost", size: "icon", "aria-label": maximized ? 'Restore dialog size' : 'Maximize dialog', onClick: () => setMaximized((v) => !v), className: "mr-7", children: maximized ? _jsx(Minimize2, { className: "size-4" }) : _jsx(Maximize2, { className: "size-4" }) })] }) }), _jsxs(Row, { gap: "2", align: "center", children: [_jsxs("span", { className: "relative flex-1", children: [_jsx(Search, { className: "pointer-events-none absolute left-2.5 top-1/2 size-3.5 -translate-y-1/2 text-muted-foreground" }), _jsx(Input, { autoFocus: true, value: query, onChange: (e) => setQuery(e.target.value), placeholder: "Search assets\u2026", className: "pl-8", "data-testid": "asset-picker-search" })] }), _jsxs(Button, { variant: "outline", size: "sm", onClick: () => fileInputRef.current?.click(), children: [_jsx(Upload, {}), " Upload"] }), _jsx("input", { ref: fileInputRef, type: "file", multiple: true, accept: accept ?? 'image/*', className: "hidden", onChange: (e) => {
+                                handleUpload(Array.from(e.target.files ?? []));
+                                e.target.value = '';
+                            } })] }), _jsx("div", { className: cn('grid gap-2 overflow-auto', maximized
+                        ? 'max-h-[78vh] grid-cols-4 lg:grid-cols-6'
+                        : 'max-h-[60vh] grid-cols-3 sm:grid-cols-4'), "data-testid": "asset-picker-grid", children: store.status === 'loading' ? (_jsx(Text, { size: "sm", tone: "muted", className: "col-span-full p-3", children: "Loading assets\u2026" })) : store.status === 'error' ? (_jsxs(Row, { gap: "2", className: "col-span-full p-3", "data-testid": "asset-picker-error", children: [_jsx(AlertTriangle, { className: "size-4 text-destructive" }), _jsx(Text, { size: "sm", tone: "muted", children: store.errorMessage ?? 'Assets failed to load.' })] })) : assets.length === 0 ? (_jsx(Text, { size: "sm", tone: "muted", className: "col-span-full p-3", children: query.trim()
+                            ? 'No assets match your search.'
+                            : 'No assets yet — drop files here or use Upload.' })) : (assets.map((asset) => (_jsx(AssetPickerCard, { asset: asset, selected: asset.id === value, onPick: () => {
                             onChange(asset.id);
                             onOpenChange(false);
                         } }, asset.id)))) }), _jsxs(Row, { gap: "2", children: [_jsx(Spacer, {}), value ? (_jsx(Button, { variant: "ghost", size: "sm", onClick: () => {
                                 onChange(null);
                                 onOpenChange(false);
-                            }, children: "Clear" })) : null] })] }) }));
+                            }, children: "Clear" })) : null] }), dragging ? (_jsx("div", { className: "pointer-events-none absolute inset-0 z-10 grid place-items-center rounded-xl border-2 border-dashed border-primary bg-background/85", children: _jsxs(Row, { gap: "2", align: "center", children: [_jsx(Upload, { className: "size-5 text-primary" }), _jsx(Text, { className: "font-medium", children: "Drop to upload" })] }) })) : null] }) }));
 }
-/** One selectable asset: thumbnail, title/filename, alt text (EC-152). */
+/** One selectable asset: thumbnail + title/filename + alt text. The internal
+ *  asset id is intentionally not shown — it's noise to editors (EC-301). */
 function AssetPickerCard({ asset, selected, onPick, }) {
-    return (_jsxs("button", { type: "button", onClick: onPick, className: cn('flex flex-col gap-1.5 rounded-lg border p-2 text-left transition-colors', selected ? 'border-primary bg-primary/5' : 'border-border hover:bg-muted'), "data-testid": "asset-picker-card", children: [_jsx(PickerThumbnail, { asset: asset }), _jsxs(Row, { gap: "1", children: [_jsx(Text, { size: "xs", className: "min-w-0 flex-1 truncate font-medium", children: asset.title ?? asset.filename }), selected ? _jsx(Check, { className: "size-3.5 text-primary" }) : null] }), _jsx(Text, { size: "xs", tone: asset.alt ? 'muted' : 'subtle', className: "truncate", children: asset.alt ?? 'No alt text' }), _jsx(Code, { tone: "muted", children: asset.id })] }));
+    return (_jsxs("button", { type: "button", onClick: onPick, className: cn('flex flex-col gap-1.5 rounded-lg border p-2 text-left transition-colors', selected ? 'border-primary bg-primary/5' : 'border-border hover:bg-muted'), "data-testid": "asset-picker-card", children: [_jsx(PickerThumbnail, { asset: asset }), _jsxs(Row, { gap: "1", children: [_jsx(Text, { size: "xs", className: "min-w-0 flex-1 truncate font-medium", children: asset.title ?? asset.filename }), selected ? _jsx(Check, { className: "size-3.5 text-primary" }) : null] }), _jsx(Text, { size: "xs", tone: asset.alt ? 'muted' : 'subtle', className: "truncate", children: asset.alt ?? 'No alt text' })] }));
 }
 /** Image preview from the stored serve URL; icon fallback for other types. */
 function PickerThumbnail({ asset }) {

package/dist/components/cms/asset-picker.js.map

@@ -1 +1 @@
-{"version":3,"file":"asset-picker.js","sourceRoot":"","sources":["../../../src/components/cms/asset-picker.tsx"],"names":[],"mappings":"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","sourcesContent":["import { AlertTriangle, Check, ImageIcon, Search } from 'lucide-react'\nimport { useState } from 'react'\nimport type { AssetRecord } from '@elytracms/core/persistence'\nimport {\n  Button,\n  Code,\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  Input,\n  Row,\n  Spacer,\n  Text,\n} from '@elytracms/studio/ui'\nimport { cn } from '@elytracms/studio/lib/utils'\nimport { filterAssets } from '../assets/asset-search'\nimport { AssetsProvider, useAssets, useOptionalAssets } from '../assets/assets-store'\nimport { useCms } from './cms-store'\n\n/**\n * Pick an asset for a CMS `asset` field (brief §8.4, §8.6, EC-075 → EC-152).\n * Backed by the *real* asset library (the assets store over the operations\n * client) — the same records the Assets section lists — not by fixture\n * documents. Selecting stores the asset id on the document field.\n */\nexport function AssetPicker({\n  value,\n  open,\n  onOpenChange,\n  onChange,\n}: {\n  value: string | null\n  open: boolean\n  onOpenChange: (open: boolean) => void\n  onChange: (assetId: string | null) => void\n}) {\n  const cms = useCms()\n  const ambient = useOptionalAssets()\n  // Mount nothing while closed: the self-provided assets store would\n  // otherwise load the library eagerly for every asset field on the form.\n  if (!open) return null\n  if (ambient) {\n    return <AssetPickerDialog value={value} onOpenChange={onOpenChange} onChange={onChange} />\n  }\n  if (cms.projectId === undefined) {\n    // No project scope (fixture-only CMS session): the library is\n    // unreachable — say so instead of silently showing nothing.\n    return (\n      <Dialog open onOpenChange={onOpenChange}>\n        <DialogContent className=\"max-w-md\">\n          <DialogHeader>\n            <DialogTitle>Pick an asset</DialogTitle>\n            <DialogDescription>Select from the project's asset library.</DialogDescription>\n          </DialogHeader>\n          <Row gap=\"2\" data-testid=\"asset-picker-no-project\">\n            <AlertTriangle className=\"size-4 text-warning\" />\n            <Text size=\"sm\" tone=\"muted\">\n              The asset library needs a project — this CMS session has none.\n            </Text>\n          </Row>\n        </DialogContent>\n      </Dialog>\n    )\n  }\n  return (\n    <AssetsProvider projectId={cms.projectId}>\n      <AssetPickerDialog value={value} onOpenChange={onOpenChange} onChange={onChange} />\n    </AssetsProvider>\n  )\n}\n\n/** The open dialog over a mounted assets store. */\nfunction AssetPickerDialog({\n  value,\n  onOpenChange,\n  onChange,\n}: {\n  value: string | null\n  onOpenChange: (open: boolean) => void\n  onChange: (assetId: string | null) => void\n}) {\n  const store = useAssets()\n  // Fresh per open: the picker unmounts entirely while closed.\n  const [query, setQuery] = useState('')\n  const assets = filterAssets(store.assets, query)\n\n  return (\n    <Dialog open onOpenChange={onOpenChange}>\n      <DialogContent className=\"max-w-md\">\n        <DialogHeader>\n          <DialogTitle>Pick an asset</DialogTitle>\n          <DialogDescription>Select from the project's asset library.</DialogDescription>\n        </DialogHeader>\n\n        <span className=\"relative\">\n          <Search className=\"pointer-events-none absolute left-2.5 top-1/2 size-3.5 -translate-y-1/2 text-muted-foreground\" />\n          <Input\n            autoFocus\n            value={query}\n            onChange={(e) => setQuery(e.target.value)}\n            placeholder=\"Search assets…\"\n            className=\"pl-8\"\n            data-testid=\"asset-picker-search\"\n          />\n        </span>\n\n        <div\n          className=\"grid max-h-72 grid-cols-2 gap-2 overflow-auto\"\n          data-testid=\"asset-picker-grid\"\n        >\n          {store.status === 'loading' ? (\n            <Text size=\"sm\" tone=\"muted\" className=\"col-span-2 p-3\">\n              Loading assets…\n            </Text>\n          ) : store.status === 'error' ? (\n            <Row gap=\"2\" className=\"col-span-2 p-3\" data-testid=\"asset-picker-error\">\n              <AlertTriangle className=\"size-4 text-destructive\" />\n              <Text size=\"sm\" tone=\"muted\">\n                {store.errorMessage ?? 'Assets failed to load.'}\n              </Text>\n            </Row>\n          ) : assets.length === 0 ? (\n            <Text size=\"sm\" tone=\"muted\" className=\"col-span-2 p-3\">\n              {query.trim() ? 'No assets match your search.' : 'No assets uploaded yet.'}\n            </Text>\n          ) : (\n            assets.map((asset) => (\n              <AssetPickerCard\n                key={asset.id}\n                asset={asset}\n                selected={asset.id === value}\n                onPick={() => {\n                  onChange(asset.id)\n                  onOpenChange(false)\n                }}\n              />\n            ))\n          )}\n        </div>\n\n        <Row gap=\"2\">\n          <Spacer />\n          {value ? (\n            <Button\n              variant=\"ghost\"\n              size=\"sm\"\n              onClick={() => {\n                onChange(null)\n                onOpenChange(false)\n              }}\n            >\n              Clear\n            </Button>\n          ) : null}\n        </Row>\n      </DialogContent>\n    </Dialog>\n  )\n}\n\n/** One selectable asset: thumbnail, title/filename, alt text (EC-152). */\nfunction AssetPickerCard({\n  asset,\n  selected,\n  onPick,\n}: {\n  asset: AssetRecord\n  selected: boolean\n  onPick: () => void\n}) {\n  return (\n    <button\n      type=\"button\"\n      onClick={onPick}\n      className={cn(\n        'flex flex-col gap-1.5 rounded-lg border p-2 text-left transition-colors',\n        selected ? 'border-primary bg-primary/5' : 'border-border hover:bg-muted',\n      )}\n      data-testid=\"asset-picker-card\"\n    >\n      <PickerThumbnail asset={asset} />\n      <Row gap=\"1\">\n        <Text size=\"xs\" className=\"min-w-0 flex-1 truncate font-medium\">\n          {asset.title ?? asset.filename}\n        </Text>\n        {selected ? <Check className=\"size-3.5 text-primary\" /> : null}\n      </Row>\n      <Text size=\"xs\" tone={asset.alt ? 'muted' : 'subtle'} className=\"truncate\">\n        {asset.alt ?? 'No alt text'}\n      </Text>\n      <Code tone=\"muted\">{asset.id}</Code>\n    </button>\n  )\n}\n\n/** Image preview from the stored serve URL; icon fallback for other types. */\nfunction PickerThumbnail({ asset }: { asset: AssetRecord }) {\n  const isImage = asset.contentType.startsWith('image/')\n  // In-memory/opaque locators (memory://, convex://) are not fetchable by <img>.\n  const resolvable = asset.url?.startsWith('http') ?? false\n  if (isImage && asset.url && resolvable) {\n    return (\n      <img\n        src={asset.url}\n        alt={asset.alt ?? asset.filename}\n        className=\"aspect-video w-full rounded-md bg-muted object-cover\"\n      />\n    )\n  }\n  return (\n    <span className=\"grid aspect-video w-full place-items-center rounded-md bg-muted text-muted-foreground\">\n      <ImageIcon className=\"size-6\" />\n    </span>\n  )\n}\n"]}
+{"version":3,"file":"asset-picker.js","sourceRoot":"","sources":["../../../src/components/cms/asset-picker.tsx"],"names":[],"mappings":"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","sourcesContent":["import { AlertTriangle, Check, ImageIcon, Maximize2, Minimize2, Search, Upload } from 'lucide-react'\nimport { useEffect, useMemo, useRef, useState } from 'react'\nimport type { AssetRecord } from '@elytracms/core/persistence'\nimport {\n  Button,\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  Input,\n  Row,\n  Spacer,\n  Stack,\n  Text,\n} from '@elytracms/studio/ui'\nimport { cn } from '@elytracms/studio/lib/utils'\nimport { filterAssets } from '../assets/asset-search'\nimport { AssetsProvider, useAssets, useOptionalAssets } from '../assets/assets-store'\nimport { newlyAddedAssetIds } from '../assets/focal-point'\nimport { useCms } from './cms-store'\n\n/**\n * Pick an asset for a CMS `asset` field (brief §8.4, §8.6, EC-075 → EC-152).\n * Backed by the *real* asset library (the assets store over the operations\n * client) — the same records the Assets section lists — not by fixture\n * documents. Selecting stores the asset id on the document field. The dialog\n * is form-width with a maximize toggle and supports drag/click upload that\n * auto-selects the new asset (EC-301).\n */\nexport function AssetPicker({\n  value,\n  open,\n  onOpenChange,\n  onChange,\n  accept,\n}: {\n  value: string | null\n  open: boolean\n  onOpenChange: (open: boolean) => void\n  onChange: (assetId: string | null) => void\n  /** The file input's `accept` attribute for in-picker upload (field-derived). */\n  accept?: string\n}) {\n  const cms = useCms()\n  const ambient = useOptionalAssets()\n  // Mount nothing while closed: the self-provided assets store would\n  // otherwise load the library eagerly for every asset field on the form.\n  if (!open) return null\n  if (ambient) {\n    return (\n      <AssetPickerDialog value={value} onOpenChange={onOpenChange} onChange={onChange} accept={accept} />\n    )\n  }\n  if (cms.projectId === undefined) {\n    // No project scope (fixture-only CMS session): the library is\n    // unreachable — say so instead of silently showing nothing.\n    return (\n      <Dialog open onOpenChange={onOpenChange}>\n        <DialogContent className=\"max-w-md\">\n          <DialogHeader>\n            <DialogTitle>Pick an asset</DialogTitle>\n            <DialogDescription>Select from the project's asset library.</DialogDescription>\n          </DialogHeader>\n          <Row gap=\"2\" data-testid=\"asset-picker-no-project\">\n            <AlertTriangle className=\"size-4 text-warning\" />\n            <Text size=\"sm\" tone=\"muted\">\n              The asset library needs a project — this CMS session has none.\n            </Text>\n          </Row>\n        </DialogContent>\n      </Dialog>\n    )\n  }\n  return (\n    <AssetsProvider projectId={cms.projectId}>\n      <AssetPickerDialog value={value} onOpenChange={onOpenChange} onChange={onChange} accept={accept} />\n    </AssetsProvider>\n  )\n}\n\n/** The open dialog over a mounted assets store. */\nfunction AssetPickerDialog({\n  value,\n  onOpenChange,\n  onChange,\n  accept,\n}: {\n  value: string | null\n  onOpenChange: (open: boolean) => void\n  onChange: (assetId: string | null) => void\n  accept?: string\n}) {\n  const store = useAssets()\n  // Fresh per open: the picker unmounts entirely while closed.\n  const [query, setQuery] = useState('')\n  const [maximized, setMaximized] = useState(false)\n  const [dragging, setDragging] = useState(false)\n  const fileInputRef = useRef<HTMLInputElement>(null)\n  // Library ids when an upload started; the effect below diffs against it to\n  // learn the new asset and select it (the `upload()` API returns nothing).\n  const pendingRef = useRef<ReadonlySet<string> | null>(null)\n  // Drag depth (EC-301): keeps the drop overlay steady as the pointer crosses\n  // child boundaries — the same per-element dragenter/dragleave flicker the field\n  // fixes. Only hide when the count returns to zero.\n  const dragDepth = useRef(0)\n  const assets = filterAssets(store.assets, query)\n  const libraryIds = useMemo(() => store.assets.map((a) => a.id), [store.assets])\n\n  // Auto-select an asset uploaded from within the picker, then close.\n  useEffect(() => {\n    if (!pendingRef.current) return\n    const added = newlyAddedAssetIds(pendingRef.current, libraryIds)\n    if (added.length === 0) return\n    pendingRef.current = null\n    onChange(added[0]!)\n    onOpenChange(false)\n  }, [libraryIds, onChange, onOpenChange])\n\n  function handleUpload(files: File[]) {\n    if (files.length === 0) return\n    pendingRef.current = new Set(libraryIds)\n    store.upload(files)\n  }\n  function onDragEnter(e: React.DragEvent) {\n    e.preventDefault()\n    dragDepth.current += 1\n    if (!dragging) setDragging(true)\n  }\n  function onDragLeave() {\n    dragDepth.current -= 1\n    if (dragDepth.current <= 0) {\n      dragDepth.current = 0\n      setDragging(false)\n    }\n  }\n  function onDrop(e: React.DragEvent) {\n    e.preventDefault()\n    dragDepth.current = 0\n    setDragging(false)\n    handleUpload(Array.from(e.dataTransfer.files))\n  }\n\n  return (\n    <Dialog open onOpenChange={onOpenChange}>\n      <DialogContent\n        className={cn(maximized ? 'max-w-[95vw]' : 'max-w-2xl')}\n        onDragEnter={onDragEnter}\n        onDragOver={(e) => e.preventDefault()}\n        onDragLeave={onDragLeave}\n        onDrop={onDrop}\n      >\n        <DialogHeader>\n          <Row gap=\"2\" align=\"center\">\n            <Stack gap=\"1\" className=\"min-w-0 flex-1\">\n              <DialogTitle>Pick an asset</DialogTitle>\n              <DialogDescription>Select from the project's asset library.</DialogDescription>\n            </Stack>\n            <Button\n              variant=\"ghost\"\n              size=\"icon\"\n              aria-label={maximized ? 'Restore dialog size' : 'Maximize dialog'}\n              onClick={() => setMaximized((v) => !v)}\n              className=\"mr-7\"\n            >\n              {maximized ? <Minimize2 className=\"size-4\" /> : <Maximize2 className=\"size-4\" />}\n            </Button>\n          </Row>\n        </DialogHeader>\n\n        <Row gap=\"2\" align=\"center\">\n          <span className=\"relative flex-1\">\n            <Search className=\"pointer-events-none absolute left-2.5 top-1/2 size-3.5 -translate-y-1/2 text-muted-foreground\" />\n            <Input\n              autoFocus\n              value={query}\n              onChange={(e) => setQuery(e.target.value)}\n              placeholder=\"Search assets…\"\n              className=\"pl-8\"\n              data-testid=\"asset-picker-search\"\n            />\n          </span>\n          <Button variant=\"outline\" size=\"sm\" onClick={() => fileInputRef.current?.click()}>\n            <Upload /> Upload\n          </Button>\n          <input\n            ref={fileInputRef}\n            type=\"file\"\n            multiple\n            accept={accept ?? 'image/*'}\n            className=\"hidden\"\n            onChange={(e) => {\n              handleUpload(Array.from(e.target.files ?? []))\n              e.target.value = ''\n            }}\n          />\n        </Row>\n\n        <div\n          className={cn(\n            'grid gap-2 overflow-auto',\n            maximized\n              ? 'max-h-[78vh] grid-cols-4 lg:grid-cols-6'\n              : 'max-h-[60vh] grid-cols-3 sm:grid-cols-4',\n          )}\n          data-testid=\"asset-picker-grid\"\n        >\n          {store.status === 'loading' ? (\n            <Text size=\"sm\" tone=\"muted\" className=\"col-span-full p-3\">\n              Loading assets…\n            </Text>\n          ) : store.status === 'error' ? (\n            <Row gap=\"2\" className=\"col-span-full p-3\" data-testid=\"asset-picker-error\">\n              <AlertTriangle className=\"size-4 text-destructive\" />\n              <Text size=\"sm\" tone=\"muted\">\n                {store.errorMessage ?? 'Assets failed to load.'}\n              </Text>\n            </Row>\n          ) : assets.length === 0 ? (\n            <Text size=\"sm\" tone=\"muted\" className=\"col-span-full p-3\">\n              {query.trim()\n                ? 'No assets match your search.'\n                : 'No assets yet — drop files here or use Upload.'}\n            </Text>\n          ) : (\n            assets.map((asset) => (\n              <AssetPickerCard\n                key={asset.id}\n                asset={asset}\n                selected={asset.id === value}\n                onPick={() => {\n                  onChange(asset.id)\n                  onOpenChange(false)\n                }}\n              />\n            ))\n          )}\n        </div>\n\n        <Row gap=\"2\">\n          <Spacer />\n          {value ? (\n            <Button\n              variant=\"ghost\"\n              size=\"sm\"\n              onClick={() => {\n                onChange(null)\n                onOpenChange(false)\n              }}\n            >\n              Clear\n            </Button>\n          ) : null}\n        </Row>\n\n        {dragging ? (\n          <div className=\"pointer-events-none absolute inset-0 z-10 grid place-items-center rounded-xl border-2 border-dashed border-primary bg-background/85\">\n            <Row gap=\"2\" align=\"center\">\n              <Upload className=\"size-5 text-primary\" />\n              <Text className=\"font-medium\">Drop to upload</Text>\n            </Row>\n          </div>\n        ) : null}\n      </DialogContent>\n    </Dialog>\n  )\n}\n\n/** One selectable asset: thumbnail + title/filename + alt text. The internal\n *  asset id is intentionally not shown — it's noise to editors (EC-301). */\nfunction AssetPickerCard({\n  asset,\n  selected,\n  onPick,\n}: {\n  asset: AssetRecord\n  selected: boolean\n  onPick: () => void\n}) {\n  return (\n    <button\n      type=\"button\"\n      onClick={onPick}\n      className={cn(\n        'flex flex-col gap-1.5 rounded-lg border p-2 text-left transition-colors',\n        selected ? 'border-primary bg-primary/5' : 'border-border hover:bg-muted',\n      )}\n      data-testid=\"asset-picker-card\"\n    >\n      <PickerThumbnail asset={asset} />\n      <Row gap=\"1\">\n        <Text size=\"xs\" className=\"min-w-0 flex-1 truncate font-medium\">\n          {asset.title ?? asset.filename}\n        </Text>\n        {selected ? <Check className=\"size-3.5 text-primary\" /> : null}\n      </Row>\n      <Text size=\"xs\" tone={asset.alt ? 'muted' : 'subtle'} className=\"truncate\">\n        {asset.alt ?? 'No alt text'}\n      </Text>\n    </button>\n  )\n}\n\n/** Image preview from the stored serve URL; icon fallback for other types. */\nfunction PickerThumbnail({ asset }: { asset: AssetRecord }) {\n  const isImage = asset.contentType.startsWith('image/')\n  // In-memory/opaque locators (memory://, convex://) are not fetchable by <img>.\n  const resolvable = asset.url?.startsWith('http') ?? false\n  if (isImage && asset.url && resolvable) {\n    return (\n      <img\n        src={asset.url}\n        alt={asset.alt ?? asset.filename}\n        className=\"aspect-video w-full rounded-md bg-muted object-cover\"\n      />\n    )\n  }\n  return (\n    <span className=\"grid aspect-video w-full place-items-center rounded-md bg-muted text-muted-foreground\">\n      <ImageIcon className=\"size-6\" />\n    </span>\n  )\n}\n"]}

package/dist/components/cms/detail-editor.js

@@ -475,7 +475,7 @@ function EditorBody({ projectId, collection, doc, focusPath, }) {
                         if (!open)
                             setConfirmAction(null);
                     }, onConfirm: handleConfirmedAction })) : null, _jsx(Dialog, { open: publishConfirm, onOpenChange: (open) => { if (!open)
-                        setPublishConfirm(false); }, children: _jsxs(DialogContent, { children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: "Publish with unpublished references?" }), _jsx(DialogDescription, { children: "This page embeds reusable elements that aren\u2019t published yet. They will be empty on the live site until you publish them too." })] }), _jsx(Stack, { gap: "1", children: referenceIssues.map((issue, i) => (_jsxs(Text, { size: "xs", tone: "muted", children: ["\u2022 ", issue.message] }, `${issue.meta?.id ?? i}`))) }), _jsxs(DialogFooter, { className: "mt-4", children: [_jsx(Button, { variant: "ghost", size: "sm", onClick: () => setPublishConfirm(false), children: "Cancel" }), _jsx(Button, { size: "sm", "data-testid": "publish-anyway", onClick: () => {
+                        setPublishConfirm(false); }, children: _jsxs(DialogContent, { children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: "Publish with unpublished references?" }), _jsx(DialogDescription, { children: "This page references content that isn\u2019t published yet \u2014 those sections will be empty on the live site until you publish it too." })] }), _jsxs(Stack, { gap: "1", children: [referenceIssues.map((issue, i) => (_jsxs(Text, { size: "xs", tone: "muted", children: ["\u2022 ", issue.message] }, `${issue.meta?.id ?? i}`))), schemaIssues.length > 0 ? (_jsxs(Text, { size: "xs", tone: "muted", className: "mt-1", children: ["This page also has ", schemaIssues.length, " other unresolved", ' ', schemaIssues.length === 1 ? 'issue' : 'issues', " \u2014 see the Issues tab."] })) : null] }), _jsxs(DialogFooter, { className: "mt-4", children: [_jsx(Button, { variant: "ghost", size: "sm", onClick: () => setPublishConfirm(false), children: "Cancel" }), _jsx(Button, { size: "sm", "data-testid": "publish-anyway", onClick: () => {
                                             setPublishConfirm(false);
                                             void doPublish();
                                         }, children: "Publish anyway" })] })] }) })] }) }));