@elytracms/studio 0.0.68 → 0.0.70

package/dist/components/builder/blocks-panel.js

@@ -4,32 +4,34 @@ import { useEffect, useMemo, useRef, useState } from 'react';
 import { buildFragmentFromRegistryFixture, buildFragmentFromSubtree, } from '@elytracms/core/clipboard';
 import { getStudioRegistry } from '@elytracms/studio/lib/registry';
 import { translate } from '@elytracms/studio/lib/i18n';
+import { resolveDeploymentGeneratedPreviews } from '@elytracms/studio/lib/workspace';
 import { useCollab } from '../collab/collab-context.js';
 import { useStudioClipboard } from './clipboard-actions.js';
 import { beginDrag, endDrag, onDragSessionEnd } from './drag-session.js';
-import { Code, Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, Input, Row, Text, } from '@elytracms/studio/ui';
+import { Code, Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, Input, Popover, PopoverContent, PopoverTrigger, Row, Text, } from '@elytracms/studio/ui';
 import { cn } from '@elytracms/studio/lib/utils';
 import { useBuilder } from './builder-store.js';
 import { blockGroups, presetTiles } from './blocks-model.js';
-import { PreviewImageThumbnail, ScaledFixtureThumbnail } from './fixture-thumbnail.js';
+import { PlaceholderThumbnail, PreviewImageThumbnail } from './fixture-thumbnail.js';
 /**
  * "Copy exact configuration" (EC-175, vision 3.3): the EC-174 fragment for a
- * blocks-panel tile. Tiles backed by a declared manifest fixture go through
- * `buildFragmentFromRegistryFixture` (the fixture's exact configuration);
- * preset/default tiles fragment the same subtree the tile inserts. Both paths
- * share `buildFragmentFromSubtree`, so the fragment shape — and the paste
- * path — is identical to copying a live canvas instance.
+ * blocks-panel variant. Variants backed by a declared manifest fixture go
+ * through `buildFragmentFromRegistryFixture` (the fixture's exact
+ * configuration); implicit-default and preset variants fragment the same
+ * subtree they insert. Both paths share `buildFragmentFromSubtree`, so the
+ * fragment shape — and the paste path — is identical to copying a live canvas
+ * instance.
  */
-export function tileFragment(studio, tile, projectId) {
+export function tileFragment(studio, tile, variant, projectId) {
     const manifest = studio.registry.getManifest(tile.componentId);
-    const fixture = manifest?.fixtures?.find((candidate) => candidate.name === tile.variant);
+    const fixture = manifest?.fixtures?.find((candidate) => candidate.name === variant.name);
     if (manifest && fixture) {
         const built = buildFragmentFromRegistryFixture(manifest, fixture, {
             source: { projectId },
         });
         return built.ok ? built.fragment : null;
     }
-    return buildFragmentFromSubtree(tile.build(), { source: { projectId } });
+    return buildFragmentFromSubtree(variant.build(), { source: { projectId } });
 }
 /**
  * The Insert dialog never dismisses on pointer interactions outside its
@@ -55,7 +57,10 @@ export function BlocksPanel({ context, open, onOpenChange, }) {
     }, [open]);
     const slotAllow = context?.slotAllow;
     const trimmed = query.trim();
-    const groups = useMemo(() => blockGroups(studio, { query: trimmed || undefined, slotAllow }), [studio, trimmed, slotAllow]);
+    // EC-439 AD-2: the generated-preview seam (EC-440) — a config-sourced pure
+    // lookup, `undefined` until a consumer wires `defineStudio({ previews })`.
+    const generatedPreview = resolveDeploymentGeneratedPreviews();
+    const groups = useMemo(() => blockGroups(studio, { query: trimmed || undefined, slotAllow }, generatedPreview), [studio, trimmed, slotAllow, generatedPreview]);
     // Layout helpers keep their dedicated group while browsing (hidden once a
     // query narrows the panel to registry matches), filtered by slot.allow.
     const presets = useMemo(() => (trimmed ? [] : presetTiles(slotAllow)), [trimmed, slotAllow]);
@@ -64,7 +69,7 @@ export function BlocksPanel({ context, open, onOpenChange, }) {
     // the way so the canvas and the page tree can receive the drop; the session
     // ending restores it — and a successful drop closes the panel. The drop
     // surfaces dispatch the single insert action; the panel only carries the
-    // payload (`tile.build`, the same fixture-subtree model click-insert uses).
+    // payload (`tile.build`, the same default-subtree model click-insert uses).
     const dragRestoreRef = useRef(null);
     useEffect(() => onDragSessionEnd((outcome, session) => {
         if (session.source !== 'blocks')
@@ -76,22 +81,23 @@ export function BlocksPanel({ context, open, onOpenChange, }) {
     }), [onOpenChange]);
     if (!context)
         return null;
-    function insertTile(tile) {
-        builder.dispatch({ type: 'insert', target: context.target, node: tile.build() });
+    function insertVariant(variant) {
+        builder.dispatch({ type: 'insert', target: context.target, node: variant.build() });
         onOpenChange(false);
     }
     // "Copy exact configuration" (EC-175): same fragment + paste path as
-    // copying a live canvas instance.
-    function copyTile(tile) {
-        const fragment = tileFragment(studio, tile, collab.projectId);
+    // copying a live canvas instance, per variant.
+    function copyVariant(tile, variant) {
+        const fragment = tileFragment(studio, tile, variant, collab.projectId);
         if (fragment)
-            clipboard.copyFragment(fragment, `${tile.title} — ${tile.variant}`);
+            clipboard.copyFragment(fragment, `${tile.title} — ${variant.name}`);
     }
     function handleTileDragStart(tile, e) {
         beginDrag({
             subject: { kind: 'component', componentId: tile.componentId },
             source: 'blocks',
-            label: `${tile.title} — ${tile.variant}`,
+            // AD-4: one tile per component — the drag labels the component title.
+            label: tile.title,
             buildNode: tile.build,
         }, e.dataTransfer);
         // Radix's modal layer locks pointer events on the body and the overlay
@@ -125,32 +131,80 @@ export function BlocksPanel({ context, open, onOpenChange, }) {
         endDrag('cancelled');
     }
     const empty = groups.length === 0 && presets.length === 0;
-    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { className: "max-w-3xl", onInteractOutside: preventOutsideDismiss, children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: translate('builder.blocksPanel.title') }), _jsxs(DialogDescription, { children: ["Adds into ", _jsx(Code, { tone: "muted", children: context.destinationLabel }), "."] })] }), _jsxs("div", { 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: translate('builder.blocksPanel.searchPlaceholder'), "aria-label": translate('builder.blocksPanel.searchAria'), className: "pl-8" })] }), _jsxs("div", { className: "max-h-[min(30rem,calc(100dvh-14rem))] overflow-auto pr-1", children: [presets.length > 0 ? (_jsx(TileGroup, { heading: translate('builder.blocksPanel.layoutHelpers'), tiles: presets, onInsert: insertTile, onCopy: copyTile, onTileDragStart: handleTileDragStart, onTileDragEnd: handleTileDragEnd })) : null, groups.map((group) => (_jsx(TileGroup, { heading: group.category, tiles: group.tiles, onInsert: insertTile, onCopy: copyTile, onTileDragStart: handleTileDragStart, onTileDragEnd: handleTileDragEnd }, group.category))), empty ? (_jsx(Text, { size: "sm", tone: "muted", className: "p-3", children: slotAllow
+    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { className: "max-w-3xl", onInteractOutside: preventOutsideDismiss, children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: translate('builder.blocksPanel.title') }), _jsxs(DialogDescription, { children: ["Adds into ", _jsx(Code, { tone: "muted", children: context.destinationLabel }), "."] })] }), _jsxs("div", { 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: translate('builder.blocksPanel.searchPlaceholder'), "aria-label": translate('builder.blocksPanel.searchAria'), className: "pl-8" })] }), _jsxs("div", { className: "max-h-[min(30rem,calc(100dvh-14rem))] overflow-auto pr-1", children: [presets.length > 0 ? (_jsx(TileGroup, { heading: translate('builder.blocksPanel.layoutHelpers'), tiles: presets, onInsert: insertVariant, onCopy: copyVariant, onTileDragStart: handleTileDragStart, onTileDragEnd: handleTileDragEnd })) : null, groups.map((group) => (_jsx(TileGroup, { heading: group.category, tiles: group.tiles, onInsert: insertVariant, onCopy: copyVariant, onTileDragStart: handleTileDragStart, onTileDragEnd: handleTileDragEnd }, group.category))), empty ? (_jsx(Text, { size: "sm", tone: "muted", className: "p-3", children: slotAllow
                                 ? translate('builder.blocksPanel.noAllowed')
                                 : translate('builder.blocksPanel.noMatch', { query }) })) : null] })] }) }));
 }
 function TileGroup({ heading, tiles, onInsert, onCopy, onTileDragStart, onTileDragEnd, }) {
-    return (_jsxs("section", { className: "mb-3", "aria-label": heading, children: [_jsxs(Row, { gap: "2", className: "px-1 py-1.5", children: [_jsx(Code, { tone: "muted", className: "capitalize", children: heading }), _jsx(Text, { size: "xs", tone: "muted", children: tiles.length })] }), _jsx("div", { className: "grid grid-cols-3 gap-2", children: tiles.map((tile) => (_jsx(BlockTileButton, { tile: tile, onClick: () => onInsert(tile), onCopy: () => onCopy(tile), onDragStart: (e) => onTileDragStart(tile, e), onDragEnd: onTileDragEnd }, tile.key))) })] }));
+    return (_jsxs("section", { className: "mb-3", "aria-label": heading, children: [_jsxs(Row, { gap: "2", className: "px-1 py-1.5", children: [_jsx(Code, { tone: "muted", className: "capitalize", children: heading }), _jsx(Text, { size: "xs", tone: "muted", children: tiles.length })] }), _jsx("div", { className: "grid grid-cols-3 gap-2", children: tiles.map((tile) => (_jsx(BlockTileButton, { tile: tile, onInsert: onInsert, onCopy: onCopy, onDragStart: (e) => onTileDragStart(tile, e), onDragEnd: onTileDragEnd }, tile.key))) })] }));
 }
-function BlockTileButton({ tile, onClick, onCopy, onDragStart, onDragEnd, }) {
+/**
+ * One component tile (exported for markup tests). Not a native `<button>`: the
+ * tile CONTAINS interactive controls (the copy-exact button and the variants
+ * chip), and nested `<button>`s are invalid HTML — so it stays a keyboard-
+ * operable `role="button"` element whose own key handler ignores events
+ * bubbling from those inner controls.
+ */
+export function BlockTileButton({ tile, onInsert, onCopy, onDragStart, onDragEnd, }) {
     const degraded = tile.issues.length > 0;
-    // Not a native <button>: live thumbnails are real renders and may contain
-    // interactive elements (e.g. the Button primitive), and a nested <button>
-    // is invalid HTML. The thumbnail itself is aria-hidden and pointer-inert.
-    return (_jsxs("div", { role: "button", tabIndex: 0, draggable: true, onDragStart: onDragStart, onDragEnd: onDragEnd, onClick: onClick, onKeyDown: (event) => {
+    const defaultVariant = tile.variants[0];
+    return (_jsxs("div", { role: "button", tabIndex: 0, draggable: true, onDragStart: onDragStart, onDragEnd: onDragEnd, onClick: () => onInsert(defaultVariant), onKeyDown: (event) => {
+            // Only the tile itself: Enter/Space on the inner copy button or the
+            // variants chip must operate THAT control, never also insert.
+            if (event.target !== event.currentTarget)
+                return;
             if (event.key === 'Enter' || event.key === ' ') {
                 event.preventDefault();
-                onClick();
+                onInsert(defaultVariant);
             }
-        }, "data-block-tile": tile.key, "data-block-degraded": degraded || undefined, "aria-label": translate('builder.blocksPanel.insertTileAria', {
-            title: tile.title,
-            variant: tile.variant,
-        }), title: tile.description, className: cn('group/tile relative flex cursor-pointer flex-col gap-1.5 rounded-lg border bg-card p-2 text-left outline-none transition-colors', 'hover:border-ring/60 hover:bg-muted/60 focus-visible:ring-2 focus-visible:ring-ring/60', degraded ? 'border-amber-500/50' : 'border-border'), children: [_jsx("button", { type: "button", "aria-label": translate('builder.blocksPanel.copyExactAria', {
+        }, "data-block-tile": tile.key, "data-block-degraded": degraded || undefined, "aria-label": translate('builder.blocksPanel.insertComponentAria', { title: tile.title }), title: tile.description, className: cn(
+        // AD-3: this outer border is the tile's ONE frame — the preview inset
+        // below is deliberately borderless.
+        'group/tile relative flex cursor-pointer flex-col gap-1.5 rounded-lg border bg-card p-2 text-left outline-none transition-colors', 'hover:border-ring/60 hover:bg-muted/60 focus-visible:ring-2 focus-visible:ring-ring/60', degraded ? 'border-amber-500/50' : 'border-border'), children: [_jsx("button", { type: "button", "aria-label": translate('builder.blocksPanel.copyExactAria', {
                     title: tile.title,
-                    variant: tile.variant,
+                    variant: defaultVariant.name,
                 }), title: translate('builder.blocksPanel.copyExactConfiguration'), "data-block-copy": tile.key, onClick: (event) => {
                     event.stopPropagation();
-                    onCopy();
-                }, className: cn('absolute right-1.5 top-1.5 z-10 rounded-md border border-border bg-popover/90 p-1 text-muted-foreground', 'opacity-0 transition-opacity hover:text-foreground focus-visible:opacity-100 group-hover/tile:opacity-100'), children: _jsx(ClipboardCopy, { className: "size-3.5", "aria-hidden": true }) }), tile.previewImage ? (_jsx(PreviewImageThumbnail, { src: tile.previewImage, alt: tile.title })) : (_jsx(ScaledFixtureThumbnail, { node: tile.previewNode })), _jsxs(Row, { gap: "1", className: "w-full min-w-0", children: [_jsx("span", { className: "truncate text-xs font-medium", children: tile.title }), _jsx("span", { className: "ml-auto shrink-0 text-[0.7rem] text-muted-foreground", children: tile.variant })] }), degraded ? (_jsxs(Row, { gap: "1", className: "w-full min-w-0 text-amber-700 dark:text-amber-400", children: [_jsx(AlertTriangle, { "aria-hidden": true, className: "size-3 shrink-0" }), _jsx("span", { className: "truncate text-[0.7rem]", title: tile.issues.join('\n'), children: tile.issues[0] })] })) : null] }));
+                    onCopy(tile, defaultVariant);
+                }, className: cn('absolute right-1.5 top-1.5 z-10 rounded-md border border-border bg-popover/90 p-1 text-muted-foreground', 'opacity-0 transition-opacity hover:text-foreground focus-visible:opacity-100 group-hover/tile:opacity-100'), children: _jsx(ClipboardCopy, { className: "size-3.5", "aria-hidden": true }) }), tile.previewUrl ? (_jsx(PreviewImageThumbnail, { src: tile.previewUrl, alt: tile.title })) : (_jsx(PlaceholderThumbnail, { title: tile.title })), _jsxs(Row, { gap: "1", className: "w-full min-w-0", children: [_jsx("span", { className: "truncate text-xs font-medium", children: tile.title }), tile.variants.length > 1 ? (_jsx(VariantsChip, { tile: tile, onInsert: onInsert, onCopy: onCopy })) : null] }), degraded ? (_jsxs(Row, { gap: "1", className: "w-full min-w-0 text-amber-700 dark:text-amber-400", children: [_jsx(AlertTriangle, { "aria-hidden": true, className: "size-3 shrink-0" }), _jsx("span", { className: "truncate text-[0.7rem]", title: tile.issues.join('\n'), children: tile.issues[0] })] })) : null] }));
+}
+/**
+ * The compact variant affordance (EC-439 AD-1): an "n variants" chip in the
+ * tile footer opening a flyout of per-fixture rows. When the active search
+ * query matched fixture names ({@link BlockTile.matchedVariants}) the chip is
+ * highlighted so "found by fixture name" is visible at the grid.
+ */
+function VariantsChip({ tile, onInsert, onCopy, }) {
+    const matched = (tile.matchedVariants?.length ?? 0) > 0;
+    // The tile already surfaces the DEFAULT variant's issues; the chip warns
+    // when a deeper variant is degraded so it is visible before the flyout opens.
+    const laterVariantDegraded = tile.variants.slice(1).some((variant) => variant.issues.length > 0);
+    return (_jsxs(Popover, { children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs("button", { type: "button", "data-block-variants": tile.key, "data-block-variants-match": matched || undefined, "aria-label": translate('builder.blocksPanel.variantsAria', {
+                        count: tile.variants.length,
+                        title: tile.title,
+                    }), title: laterVariantDegraded ? translate('builder.blocksPanel.variantIssuesHint') : undefined, 
+                    // The chip sits inside the role="button" tile: opening the flyout
+                    // must never ALSO insert the default.
+                    onClick: (event) => event.stopPropagation(), className: cn('ml-auto flex shrink-0 items-center gap-1 rounded-full px-1.5 py-0.5 text-[0.65rem] leading-none transition-colors', matched
+                        ? 'bg-primary/15 text-primary'
+                        : 'bg-muted text-muted-foreground hover:bg-muted/70 hover:text-foreground'), children: [laterVariantDegraded ? (_jsx(AlertTriangle, { "aria-hidden": true, className: "size-2.5 text-amber-600 dark:text-amber-400" })) : null, translate('builder.blocksPanel.variantCount', { count: tile.variants.length })] }) }), _jsxs(PopoverContent, { className: "w-64 p-1.5", onClick: (event) => event.stopPropagation(), children: [_jsx(Text, { size: "xs", tone: "muted", className: "px-1.5 pb-1 pt-0.5", children: translate('builder.blocksPanel.variantsHeading') }), _jsx(VariantRows, { tile: tile, onInsert: onInsert, onCopy: onCopy })] })] }));
+}
+/**
+ * The flyout's variant rows (exported for markup tests): one insert row +
+ * copy-exact button per fixture (EC-175 semantics per variant). Rows matched
+ * by the active fixture-name search are highlighted.
+ */
+export function VariantRows({ tile, onInsert, onCopy, }) {
+    return (_jsx("div", { className: "flex flex-col gap-0.5", children: tile.variants.map((variant) => {
+            const matched = tile.matchedVariants?.includes(variant.name) ?? false;
+            const variantDegraded = variant.issues.length > 0;
+            return (_jsxs(Row, { gap: "1", className: "w-full min-w-0", children: [_jsxs("button", { type: "button", "data-block-variant": `${tile.componentId}::${variant.name}`, "data-block-variant-match": matched || undefined, "data-block-variant-degraded": variantDegraded || undefined, "aria-label": translate('builder.blocksPanel.insertTileAria', {
+                            title: tile.title,
+                            variant: variant.name,
+                        }), title: variantDegraded ? variant.issues.join('\n') : undefined, onClick: () => onInsert(variant), className: cn('flex min-w-0 flex-1 items-center gap-2 rounded-md px-1.5 py-1 text-left text-xs transition-colors hover:bg-muted focus-visible:bg-muted focus-visible:outline-none', matched ? 'text-primary' : 'text-foreground'), children: [variant.previewUrl ? (_jsx("img", { src: variant.previewUrl, alt: "", draggable: false, className: "pointer-events-none h-7 w-11 shrink-0 select-none rounded bg-muted/40 object-cover" })) : null, _jsx("span", { className: "truncate", children: variant.name }), variantDegraded ? (_jsx(AlertTriangle, { "aria-hidden": true, className: "ml-auto size-3 shrink-0 text-amber-600 dark:text-amber-400" })) : null] }), _jsx("button", { type: "button", "data-block-variant-copy": `${tile.componentId}::${variant.name}`, "aria-label": translate('builder.blocksPanel.copyExactAria', {
+                            title: tile.title,
+                            variant: variant.name,
+                        }), title: translate('builder.blocksPanel.copyExactConfiguration'), onClick: () => onCopy(tile, variant), className: "shrink-0 rounded-md p-1 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:bg-muted focus-visible:outline-none", children: _jsx(ClipboardCopy, { className: "size-3.5", "aria-hidden": true }) })] }, variant.name));
+        }) }));
 }
 //# sourceMappingURL=blocks-panel.js.map

package/dist/components/builder/blocks-panel.js.map

@@ -1 +1 @@
-{"version":3,"file":"blocks-panel.js","sourceRoot":"","sources":["../../../src/components/builder/blocks-panel.tsx"],"names":[],"mappings":"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","sourcesContent":["import { AlertTriangle, ClipboardCopy, Search } from 'lucide-react'\nimport { useEffect, useMemo, useRef, useState } from 'react'\nimport type { InsertTarget } from '@elytracms/core/project-graph'\nimport {\n  buildFragmentFromRegistryFixture,\n  buildFragmentFromSubtree,\n} from '@elytracms/core/clipboard'\nimport type { ClipboardFragment } from '@elytracms/core/clipboard'\nimport { getStudioRegistry } from '@elytracms/studio/lib/registry'\nimport type { StudioRegistry } from '@elytracms/studio/lib/registry'\nimport { translate } from '@elytracms/studio/lib/i18n'\nimport { useCollab } from '../collab/collab-context'\nimport { useStudioClipboard } from './clipboard-actions'\nimport { beginDrag, endDrag, onDragSessionEnd } from './drag-session'\nimport {\n  Code,\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  Input,\n  Row,\n  Text,\n} from '@elytracms/studio/ui'\nimport { cn } from '@elytracms/studio/lib/utils'\nimport { useBuilder } from './builder-store'\nimport { blockGroups, presetTiles } from './blocks-model'\nimport type { BlockTile } from './blocks-model'\nimport { PreviewImageThumbnail, ScaledFixtureThumbnail } from './fixture-thumbnail'\n\n/**\n * Blocks panel (EC-164): the visual insert surface. Every registry component\n * and each of its fixture variations is a tile with a live, scaled render —\n * the component library *is* the insert surface. Clicking a tile inserts the\n * fixture's configured subtree through the builder's `insert` action (one\n * history entry, mirrored onto the `graph.insertNode` operation).\n */\n\nexport interface InsertContext {\n  target: InsertTarget\n  /** When set, only these component ids may be inserted into the slot (slot.allow). */\n  slotAllow?: string[]\n  /** Human label of where the insert lands. */\n  destinationLabel: string\n}\n\n/**\n * \"Copy exact configuration\" (EC-175, vision 3.3): the EC-174 fragment for a\n * blocks-panel tile. Tiles backed by a declared manifest fixture go through\n * `buildFragmentFromRegistryFixture` (the fixture's exact configuration);\n * preset/default tiles fragment the same subtree the tile inserts. Both paths\n * share `buildFragmentFromSubtree`, so the fragment shape — and the paste\n * path — is identical to copying a live canvas instance.\n */\nexport function tileFragment(\n  studio: StudioRegistry,\n  tile: BlockTile,\n  projectId: string,\n): ClipboardFragment | null {\n  const manifest = studio.registry.getManifest(tile.componentId)\n  const fixture = manifest?.fixtures?.find((candidate) => candidate.name === tile.variant)\n  if (manifest && fixture) {\n    const built = buildFragmentFromRegistryFixture(manifest, fixture, {\n      source: { projectId },\n    })\n    return built.ok ? built.fragment : null\n  }\n  return buildFragmentFromSubtree(tile.build(), { source: { projectId } })\n}\n\n/**\n * The Insert dialog never dismisses on pointer interactions outside its\n * content. Rows scrolled below the list's fold keep their layout position\n * directly above the modal overlay, so a coordinate-targeted click on a\n * clipped row (agents click what the accessibility tree lists; humans can hit\n * the boundary too) lands on the overlay — with default Radix behaviour that\n * pointerdown dismissed the dialog and silently dropped the insert. Cancel\n * stays explicit: Escape or the Close button.\n */\nexport function preventOutsideDismiss(event: { preventDefault: () => void }): void {\n  event.preventDefault()\n}\n\nexport function BlocksPanel({\n  context,\n  open,\n  onOpenChange,\n}: {\n  context: InsertContext | null\n  open: boolean\n  onOpenChange: (open: boolean) => void\n}) {\n  const builder = useBuilder()\n  const studio = getStudioRegistry()\n  const collab = useCollab()\n  const clipboard = useStudioClipboard()\n  const [query, setQuery] = useState('')\n\n  useEffect(() => {\n    if (open) setQuery('')\n  }, [open])\n\n  const slotAllow = context?.slotAllow\n  const trimmed = query.trim()\n  const groups = useMemo(\n    () => blockGroups(studio, { query: trimmed || undefined, slotAllow }),\n    [studio, trimmed, slotAllow],\n  )\n  // Layout helpers keep their dedicated group while browsing (hidden once a\n  // query narrows the panel to registry matches), filtered by slot.allow.\n  const presets = useMemo(\n    () => (trimmed ? [] : presetTiles(slotAllow)),\n    [trimmed, slotAllow],\n  )\n\n  // Drag-to-insert (EC-160): a tile is also a drag source. While the drag is\n  // live the modal (content + overlay + Radix body pointer lock) gets out of\n  // the way so the canvas and the page tree can receive the drop; the session\n  // ending restores it — and a successful drop closes the panel. The drop\n  // surfaces dispatch the single insert action; the panel only carries the\n  // payload (`tile.build`, the same fixture-subtree model click-insert uses).\n  const dragRestoreRef = useRef<(() => void) | null>(null)\n  useEffect(\n    () =>\n      onDragSessionEnd((outcome, session) => {\n        if (session.source !== 'blocks') return\n        dragRestoreRef.current?.()\n        dragRestoreRef.current = null\n        if (outcome === 'dropped') onOpenChange(false)\n      }),\n    [onOpenChange],\n  )\n\n  if (!context) return null\n\n  function insertTile(tile: BlockTile) {\n    builder.dispatch({ type: 'insert', target: context!.target, node: tile.build() })\n    onOpenChange(false)\n  }\n\n  // \"Copy exact configuration\" (EC-175): same fragment + paste path as\n  // copying a live canvas instance.\n  function copyTile(tile: BlockTile) {\n    const fragment = tileFragment(studio, tile, collab.projectId)\n    if (fragment) clipboard.copyFragment(fragment, `${tile.title} — ${tile.variant}`)\n  }\n\n  function handleTileDragStart(tile: BlockTile, e: React.DragEvent) {\n    beginDrag(\n      {\n        subject: { kind: 'component', componentId: tile.componentId },\n        source: 'blocks',\n        label: `${tile.title} — ${tile.variant}`,\n        buildNode: tile.build,\n      },\n      e.dataTransfer,\n    )\n    // Radix's modal layer locks pointer events on the body and the overlay\n    // sits above every drop surface. Lift both for the duration of the drag —\n    // after a tick, so the browser captures the tile as the drag image first.\n    const content = (e.currentTarget as HTMLElement).closest('[role=\"dialog\"]') as HTMLElement | null\n    const overlay = (content?.previousElementSibling ?? null) as HTMLElement | null\n    const previousBodyPointerEvents = document.body.style.pointerEvents\n    const hide = window.setTimeout(() => {\n      document.body.style.pointerEvents = 'auto'\n      for (const el of [content, overlay]) {\n        if (el) {\n          el.style.pointerEvents = 'none'\n          el.style.opacity = '0'\n        }\n      }\n    }, 0)\n    dragRestoreRef.current = () => {\n      window.clearTimeout(hide)\n      document.body.style.pointerEvents = previousBodyPointerEvents\n      for (const el of [content, overlay]) {\n        if (el) {\n          el.style.pointerEvents = ''\n          el.style.opacity = ''\n        }\n      }\n    }\n  }\n\n  function handleTileDragEnd() {\n    // Trailing dragend after a handled drop is a no-op (endDrag is idempotent).\n    endDrag('cancelled')\n  }\n\n  const empty = groups.length === 0 && presets.length === 0\n\n  return (\n    <Dialog open={open} onOpenChange={onOpenChange}>\n      <DialogContent className=\"max-w-3xl\" onInteractOutside={preventOutsideDismiss}>\n        <DialogHeader>\n          <DialogTitle>{translate('builder.blocksPanel.title')}</DialogTitle>\n          <DialogDescription>\n            Adds into <Code tone=\"muted\">{context.destinationLabel}</Code>.\n          </DialogDescription>\n        </DialogHeader>\n\n        <div 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={translate('builder.blocksPanel.searchPlaceholder')}\n            aria-label={translate('builder.blocksPanel.searchAria')}\n            className=\"pl-8\"\n          />\n        </div>\n\n        {/* Viewport-bounded so the dialog never extends past the fold on short windows\n            (a grid taller than the screen would put tiles outside the clickable area). */}\n        <div className=\"max-h-[min(30rem,calc(100dvh-14rem))] overflow-auto pr-1\">\n          {presets.length > 0 ? (\n            <TileGroup\n              heading={translate('builder.blocksPanel.layoutHelpers')}\n              tiles={presets}\n              onInsert={insertTile}\n              onCopy={copyTile}\n              onTileDragStart={handleTileDragStart}\n              onTileDragEnd={handleTileDragEnd}\n            />\n          ) : null}\n          {groups.map((group) => (\n            <TileGroup\n              key={group.category}\n              heading={group.category}\n              tiles={group.tiles}\n              onInsert={insertTile}\n              onCopy={copyTile}\n              onTileDragStart={handleTileDragStart}\n              onTileDragEnd={handleTileDragEnd}\n            />\n          ))}\n          {empty ? (\n            <Text size=\"sm\" tone=\"muted\" className=\"p-3\">\n              {slotAllow\n                ? translate('builder.blocksPanel.noAllowed')\n                : translate('builder.blocksPanel.noMatch', { query })}\n            </Text>\n          ) : null}\n        </div>\n      </DialogContent>\n    </Dialog>\n  )\n}\n\nfunction TileGroup({\n  heading,\n  tiles,\n  onInsert,\n  onCopy,\n  onTileDragStart,\n  onTileDragEnd,\n}: {\n  heading: string\n  tiles: BlockTile[]\n  onInsert: (tile: BlockTile) => void\n  onCopy: (tile: BlockTile) => void\n  onTileDragStart: (tile: BlockTile, e: React.DragEvent) => void\n  onTileDragEnd: () => void\n}) {\n  return (\n    <section className=\"mb-3\" aria-label={heading}>\n      <Row gap=\"2\" className=\"px-1 py-1.5\">\n        <Code tone=\"muted\" className=\"capitalize\">\n          {heading}\n        </Code>\n        <Text size=\"xs\" tone=\"muted\">\n          {tiles.length}\n        </Text>\n      </Row>\n      <div className=\"grid grid-cols-3 gap-2\">\n        {tiles.map((tile) => (\n          <BlockTileButton\n            key={tile.key}\n            tile={tile}\n            onClick={() => onInsert(tile)}\n            onCopy={() => onCopy(tile)}\n            onDragStart={(e) => onTileDragStart(tile, e)}\n            onDragEnd={onTileDragEnd}\n          />\n        ))}\n      </div>\n    </section>\n  )\n}\n\nfunction BlockTileButton({\n  tile,\n  onClick,\n  onCopy,\n  onDragStart,\n  onDragEnd,\n}: {\n  tile: BlockTile\n  onClick: () => void\n  onCopy: () => void\n  onDragStart: (e: React.DragEvent) => void\n  onDragEnd: () => void\n}) {\n  const degraded = tile.issues.length > 0\n  // Not a native <button>: live thumbnails are real renders and may contain\n  // interactive elements (e.g. the Button primitive), and a nested <button>\n  // is invalid HTML. The thumbnail itself is aria-hidden and pointer-inert.\n  return (\n    <div\n      role=\"button\"\n      tabIndex={0}\n      draggable\n      onDragStart={onDragStart}\n      onDragEnd={onDragEnd}\n      onClick={onClick}\n      onKeyDown={(event) => {\n        if (event.key === 'Enter' || event.key === ' ') {\n          event.preventDefault()\n          onClick()\n        }\n      }}\n      data-block-tile={tile.key}\n      data-block-degraded={degraded || undefined}\n      aria-label={translate('builder.blocksPanel.insertTileAria', {\n        title: tile.title,\n        variant: tile.variant,\n      })}\n      title={tile.description}\n      className={cn(\n        'group/tile relative flex cursor-pointer flex-col gap-1.5 rounded-lg border bg-card p-2 text-left outline-none transition-colors',\n        'hover:border-ring/60 hover:bg-muted/60 focus-visible:ring-2 focus-visible:ring-ring/60',\n        degraded ? 'border-amber-500/50' : 'border-border',\n      )}\n    >\n      {/* Copy exact configuration (EC-175/vision 3.3): the EC-174 fragment of\n          this tile, pasteable anywhere the canvas/tree paste path reaches. */}\n      <button\n        type=\"button\"\n        aria-label={translate('builder.blocksPanel.copyExactAria', {\n          title: tile.title,\n          variant: tile.variant,\n        })}\n        title={translate('builder.blocksPanel.copyExactConfiguration')}\n        data-block-copy={tile.key}\n        onClick={(event) => {\n          event.stopPropagation()\n          onCopy()\n        }}\n        className={cn(\n          'absolute right-1.5 top-1.5 z-10 rounded-md border border-border bg-popover/90 p-1 text-muted-foreground',\n          'opacity-0 transition-opacity hover:text-foreground focus-visible:opacity-100 group-hover/tile:opacity-100',\n        )}\n      >\n        <ClipboardCopy className=\"size-3.5\" aria-hidden />\n      </button>\n      {/* EC-409: a curated `manifest.previewImage` replaces the live fixture\n          render — the escape hatch for tiles that would preview as \"just\n          text\" (data-dependent renders). Everything else about the tile —\n          insert, drag, copy — is unchanged. */}\n      {tile.previewImage ? (\n        <PreviewImageThumbnail src={tile.previewImage} alt={tile.title} />\n      ) : (\n        <ScaledFixtureThumbnail node={tile.previewNode} />\n      )}\n      <Row gap=\"1\" className=\"w-full min-w-0\">\n        <span className=\"truncate text-xs font-medium\">{tile.title}</span>\n        <span className=\"ml-auto shrink-0 text-[0.7rem] text-muted-foreground\">{tile.variant}</span>\n      </Row>\n      {degraded ? (\n        <Row gap=\"1\" className=\"w-full min-w-0 text-amber-700 dark:text-amber-400\">\n          <AlertTriangle aria-hidden className=\"size-3 shrink-0\" />\n          <span className=\"truncate text-[0.7rem]\" title={tile.issues.join('\\n')}>\n            {tile.issues[0]}\n          </span>\n        </Row>\n      ) : null}\n    </div>\n  )\n}\n"]}
+{"version":3,"file":"blocks-panel.js","sourceRoot":"","sources":["../../../src/components/builder/blocks-panel.tsx"],"names":[],"mappings":"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","sourcesContent":["import { AlertTriangle, ClipboardCopy, Search } from 'lucide-react'\nimport { useEffect, useMemo, useRef, useState } from 'react'\nimport type { InsertTarget } from '@elytracms/core/project-graph'\nimport {\n  buildFragmentFromRegistryFixture,\n  buildFragmentFromSubtree,\n} from '@elytracms/core/clipboard'\nimport type { ClipboardFragment } from '@elytracms/core/clipboard'\nimport { getStudioRegistry } from '@elytracms/studio/lib/registry'\nimport type { StudioRegistry } from '@elytracms/studio/lib/registry'\nimport { translate } from '@elytracms/studio/lib/i18n'\nimport { resolveDeploymentGeneratedPreviews } from '@elytracms/studio/lib/workspace'\nimport { useCollab } from '../collab/collab-context'\nimport { useStudioClipboard } from './clipboard-actions'\nimport { beginDrag, endDrag, onDragSessionEnd } from './drag-session'\nimport {\n  Code,\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  Input,\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n  Row,\n  Text,\n} from '@elytracms/studio/ui'\nimport { cn } from '@elytracms/studio/lib/utils'\nimport { useBuilder } from './builder-store'\nimport { blockGroups, presetTiles } from './blocks-model'\nimport type { BlockTile, BlockVariant } from './blocks-model'\nimport { PlaceholderThumbnail, PreviewImageThumbnail } from './fixture-thumbnail'\n\n/**\n * Blocks panel (EC-164, redesigned by EC-439): the visual insert surface.\n * Every canvas-eligible registry component is ONE tile; a component with 2+\n * fixtures carries a compact \"n variants\" chip opening a flyout with one\n * insert/copy row per fixture. Clicking a tile (or dragging it) inserts the\n * DEFAULT — the first declared fixture's configured subtree, else the seeded\n * manifest default — through the builder's `insert` action (one history entry).\n * Previews are artifacts (curated `previewImage` → generated artifact →\n * icon+name placeholder), never in-document runtime renders.\n */\n\nexport interface InsertContext {\n  target: InsertTarget\n  /** When set, only these component ids may be inserted into the slot (slot.allow). */\n  slotAllow?: string[]\n  /** Human label of where the insert lands. */\n  destinationLabel: string\n}\n\n/**\n * \"Copy exact configuration\" (EC-175, vision 3.3): the EC-174 fragment for a\n * blocks-panel variant. Variants backed by a declared manifest fixture go\n * through `buildFragmentFromRegistryFixture` (the fixture's exact\n * configuration); implicit-default and preset variants fragment the same\n * subtree they insert. Both paths share `buildFragmentFromSubtree`, so the\n * fragment shape — and the paste path — is identical to copying a live canvas\n * instance.\n */\nexport function tileFragment(\n  studio: StudioRegistry,\n  tile: BlockTile,\n  variant: BlockVariant,\n  projectId: string,\n): ClipboardFragment | null {\n  const manifest = studio.registry.getManifest(tile.componentId)\n  const fixture = manifest?.fixtures?.find((candidate) => candidate.name === variant.name)\n  if (manifest && fixture) {\n    const built = buildFragmentFromRegistryFixture(manifest, fixture, {\n      source: { projectId },\n    })\n    return built.ok ? built.fragment : null\n  }\n  return buildFragmentFromSubtree(variant.build(), { source: { projectId } })\n}\n\n/**\n * The Insert dialog never dismisses on pointer interactions outside its\n * content. Rows scrolled below the list's fold keep their layout position\n * directly above the modal overlay, so a coordinate-targeted click on a\n * clipped row (agents click what the accessibility tree lists; humans can hit\n * the boundary too) lands on the overlay — with default Radix behaviour that\n * pointerdown dismissed the dialog and silently dropped the insert. Cancel\n * stays explicit: Escape or the Close button.\n */\nexport function preventOutsideDismiss(event: { preventDefault: () => void }): void {\n  event.preventDefault()\n}\n\nexport function BlocksPanel({\n  context,\n  open,\n  onOpenChange,\n}: {\n  context: InsertContext | null\n  open: boolean\n  onOpenChange: (open: boolean) => void\n}) {\n  const builder = useBuilder()\n  const studio = getStudioRegistry()\n  const collab = useCollab()\n  const clipboard = useStudioClipboard()\n  const [query, setQuery] = useState('')\n\n  useEffect(() => {\n    if (open) setQuery('')\n  }, [open])\n\n  const slotAllow = context?.slotAllow\n  const trimmed = query.trim()\n  // EC-439 AD-2: the generated-preview seam (EC-440) — a config-sourced pure\n  // lookup, `undefined` until a consumer wires `defineStudio({ previews })`.\n  const generatedPreview = resolveDeploymentGeneratedPreviews()\n  const groups = useMemo(\n    () => blockGroups(studio, { query: trimmed || undefined, slotAllow }, generatedPreview),\n    [studio, trimmed, slotAllow, generatedPreview],\n  )\n  // Layout helpers keep their dedicated group while browsing (hidden once a\n  // query narrows the panel to registry matches), filtered by slot.allow.\n  const presets = useMemo(\n    () => (trimmed ? [] : presetTiles(slotAllow)),\n    [trimmed, slotAllow],\n  )\n\n  // Drag-to-insert (EC-160): a tile is also a drag source. While the drag is\n  // live the modal (content + overlay + Radix body pointer lock) gets out of\n  // the way so the canvas and the page tree can receive the drop; the session\n  // ending restores it — and a successful drop closes the panel. The drop\n  // surfaces dispatch the single insert action; the panel only carries the\n  // payload (`tile.build`, the same default-subtree model click-insert uses).\n  const dragRestoreRef = useRef<(() => void) | null>(null)\n  useEffect(\n    () =>\n      onDragSessionEnd((outcome, session) => {\n        if (session.source !== 'blocks') return\n        dragRestoreRef.current?.()\n        dragRestoreRef.current = null\n        if (outcome === 'dropped') onOpenChange(false)\n      }),\n    [onOpenChange],\n  )\n\n  if (!context) return null\n\n  function insertVariant(variant: BlockVariant) {\n    builder.dispatch({ type: 'insert', target: context!.target, node: variant.build() })\n    onOpenChange(false)\n  }\n\n  // \"Copy exact configuration\" (EC-175): same fragment + paste path as\n  // copying a live canvas instance, per variant.\n  function copyVariant(tile: BlockTile, variant: BlockVariant) {\n    const fragment = tileFragment(studio, tile, variant, collab.projectId)\n    if (fragment) clipboard.copyFragment(fragment, `${tile.title} — ${variant.name}`)\n  }\n\n  function handleTileDragStart(tile: BlockTile, e: React.DragEvent) {\n    beginDrag(\n      {\n        subject: { kind: 'component', componentId: tile.componentId },\n        source: 'blocks',\n        // AD-4: one tile per component — the drag labels the component title.\n        label: tile.title,\n        buildNode: tile.build,\n      },\n      e.dataTransfer,\n    )\n    // Radix's modal layer locks pointer events on the body and the overlay\n    // sits above every drop surface. Lift both for the duration of the drag —\n    // after a tick, so the browser captures the tile as the drag image first.\n    const content = (e.currentTarget as HTMLElement).closest('[role=\"dialog\"]') as HTMLElement | null\n    const overlay = (content?.previousElementSibling ?? null) as HTMLElement | null\n    const previousBodyPointerEvents = document.body.style.pointerEvents\n    const hide = window.setTimeout(() => {\n      document.body.style.pointerEvents = 'auto'\n      for (const el of [content, overlay]) {\n        if (el) {\n          el.style.pointerEvents = 'none'\n          el.style.opacity = '0'\n        }\n      }\n    }, 0)\n    dragRestoreRef.current = () => {\n      window.clearTimeout(hide)\n      document.body.style.pointerEvents = previousBodyPointerEvents\n      for (const el of [content, overlay]) {\n        if (el) {\n          el.style.pointerEvents = ''\n          el.style.opacity = ''\n        }\n      }\n    }\n  }\n\n  function handleTileDragEnd() {\n    // Trailing dragend after a handled drop is a no-op (endDrag is idempotent).\n    endDrag('cancelled')\n  }\n\n  const empty = groups.length === 0 && presets.length === 0\n\n  return (\n    <Dialog open={open} onOpenChange={onOpenChange}>\n      <DialogContent className=\"max-w-3xl\" onInteractOutside={preventOutsideDismiss}>\n        <DialogHeader>\n          <DialogTitle>{translate('builder.blocksPanel.title')}</DialogTitle>\n          <DialogDescription>\n            Adds into <Code tone=\"muted\">{context.destinationLabel}</Code>.\n          </DialogDescription>\n        </DialogHeader>\n\n        <div 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={translate('builder.blocksPanel.searchPlaceholder')}\n            aria-label={translate('builder.blocksPanel.searchAria')}\n            className=\"pl-8\"\n          />\n        </div>\n\n        {/* Viewport-bounded so the dialog never extends past the fold on short windows\n            (a grid taller than the screen would put tiles outside the clickable area). */}\n        <div className=\"max-h-[min(30rem,calc(100dvh-14rem))] overflow-auto pr-1\">\n          {presets.length > 0 ? (\n            <TileGroup\n              heading={translate('builder.blocksPanel.layoutHelpers')}\n              tiles={presets}\n              onInsert={insertVariant}\n              onCopy={copyVariant}\n              onTileDragStart={handleTileDragStart}\n              onTileDragEnd={handleTileDragEnd}\n            />\n          ) : null}\n          {groups.map((group) => (\n            <TileGroup\n              key={group.category}\n              heading={group.category}\n              tiles={group.tiles}\n              onInsert={insertVariant}\n              onCopy={copyVariant}\n              onTileDragStart={handleTileDragStart}\n              onTileDragEnd={handleTileDragEnd}\n            />\n          ))}\n          {empty ? (\n            <Text size=\"sm\" tone=\"muted\" className=\"p-3\">\n              {slotAllow\n                ? translate('builder.blocksPanel.noAllowed')\n                : translate('builder.blocksPanel.noMatch', { query })}\n            </Text>\n          ) : null}\n        </div>\n      </DialogContent>\n    </Dialog>\n  )\n}\n\nfunction TileGroup({\n  heading,\n  tiles,\n  onInsert,\n  onCopy,\n  onTileDragStart,\n  onTileDragEnd,\n}: {\n  heading: string\n  tiles: BlockTile[]\n  onInsert: (variant: BlockVariant) => void\n  onCopy: (tile: BlockTile, variant: BlockVariant) => void\n  onTileDragStart: (tile: BlockTile, e: React.DragEvent) => void\n  onTileDragEnd: () => void\n}) {\n  return (\n    <section className=\"mb-3\" aria-label={heading}>\n      <Row gap=\"2\" className=\"px-1 py-1.5\">\n        <Code tone=\"muted\" className=\"capitalize\">\n          {heading}\n        </Code>\n        <Text size=\"xs\" tone=\"muted\">\n          {tiles.length}\n        </Text>\n      </Row>\n      <div className=\"grid grid-cols-3 gap-2\">\n        {tiles.map((tile) => (\n          <BlockTileButton\n            key={tile.key}\n            tile={tile}\n            onInsert={onInsert}\n            onCopy={onCopy}\n            onDragStart={(e) => onTileDragStart(tile, e)}\n            onDragEnd={onTileDragEnd}\n          />\n        ))}\n      </div>\n    </section>\n  )\n}\n\n/**\n * One component tile (exported for markup tests). Not a native `<button>`: the\n * tile CONTAINS interactive controls (the copy-exact button and the variants\n * chip), and nested `<button>`s are invalid HTML — so it stays a keyboard-\n * operable `role=\"button\"` element whose own key handler ignores events\n * bubbling from those inner controls.\n */\nexport function BlockTileButton({\n  tile,\n  onInsert,\n  onCopy,\n  onDragStart,\n  onDragEnd,\n}: {\n  tile: BlockTile\n  onInsert: (variant: BlockVariant) => void\n  onCopy: (tile: BlockTile, variant: BlockVariant) => void\n  onDragStart: (e: React.DragEvent) => void\n  onDragEnd: () => void\n}) {\n  const degraded = tile.issues.length > 0\n  const defaultVariant = tile.variants[0]!\n  return (\n    <div\n      role=\"button\"\n      tabIndex={0}\n      draggable\n      onDragStart={onDragStart}\n      onDragEnd={onDragEnd}\n      onClick={() => onInsert(defaultVariant)}\n      onKeyDown={(event) => {\n        // Only the tile itself: Enter/Space on the inner copy button or the\n        // variants chip must operate THAT control, never also insert.\n        if (event.target !== event.currentTarget) return\n        if (event.key === 'Enter' || event.key === ' ') {\n          event.preventDefault()\n          onInsert(defaultVariant)\n        }\n      }}\n      data-block-tile={tile.key}\n      data-block-degraded={degraded || undefined}\n      aria-label={translate('builder.blocksPanel.insertComponentAria', { title: tile.title })}\n      title={tile.description}\n      className={cn(\n        // AD-3: this outer border is the tile's ONE frame — the preview inset\n        // below is deliberately borderless.\n        'group/tile relative flex cursor-pointer flex-col gap-1.5 rounded-lg border bg-card p-2 text-left outline-none transition-colors',\n        'hover:border-ring/60 hover:bg-muted/60 focus-visible:ring-2 focus-visible:ring-ring/60',\n        degraded ? 'border-amber-500/50' : 'border-border',\n      )}\n    >\n      {/* Copy exact configuration (EC-175/vision 3.3): the EC-174 fragment of\n          the tile's DEFAULT variant; per-fixture copies live in the flyout. */}\n      <button\n        type=\"button\"\n        aria-label={translate('builder.blocksPanel.copyExactAria', {\n          title: tile.title,\n          variant: defaultVariant.name,\n        })}\n        title={translate('builder.blocksPanel.copyExactConfiguration')}\n        data-block-copy={tile.key}\n        onClick={(event) => {\n          event.stopPropagation()\n          onCopy(tile, defaultVariant)\n        }}\n        className={cn(\n          'absolute right-1.5 top-1.5 z-10 rounded-md border border-border bg-popover/90 p-1 text-muted-foreground',\n          'opacity-0 transition-opacity hover:text-foreground focus-visible:opacity-100 group-hover/tile:opacity-100',\n        )}\n      >\n        <ClipboardCopy className=\"size-3.5\" aria-hidden />\n      </button>\n      {/* AD-2 preview resolution: curated/generated artifact, else the\n          icon+name placeholder — never an in-document live render. */}\n      {tile.previewUrl ? (\n        <PreviewImageThumbnail src={tile.previewUrl} alt={tile.title} />\n      ) : (\n        <PlaceholderThumbnail title={tile.title} />\n      )}\n      <Row gap=\"1\" className=\"w-full min-w-0\">\n        <span className=\"truncate text-xs font-medium\">{tile.title}</span>\n        {tile.variants.length > 1 ? (\n          <VariantsChip tile={tile} onInsert={onInsert} onCopy={onCopy} />\n        ) : null}\n      </Row>\n      {degraded ? (\n        <Row gap=\"1\" className=\"w-full min-w-0 text-amber-700 dark:text-amber-400\">\n          <AlertTriangle aria-hidden className=\"size-3 shrink-0\" />\n          <span className=\"truncate text-[0.7rem]\" title={tile.issues.join('\\n')}>\n            {tile.issues[0]}\n          </span>\n        </Row>\n      ) : null}\n    </div>\n  )\n}\n\n/**\n * The compact variant affordance (EC-439 AD-1): an \"n variants\" chip in the\n * tile footer opening a flyout of per-fixture rows. When the active search\n * query matched fixture names ({@link BlockTile.matchedVariants}) the chip is\n * highlighted so \"found by fixture name\" is visible at the grid.\n */\nfunction VariantsChip({\n  tile,\n  onInsert,\n  onCopy,\n}: {\n  tile: BlockTile\n  onInsert: (variant: BlockVariant) => void\n  onCopy: (tile: BlockTile, variant: BlockVariant) => void\n}) {\n  const matched = (tile.matchedVariants?.length ?? 0) > 0\n  // The tile already surfaces the DEFAULT variant's issues; the chip warns\n  // when a deeper variant is degraded so it is visible before the flyout opens.\n  const laterVariantDegraded = tile.variants.slice(1).some((variant) => variant.issues.length > 0)\n  return (\n    <Popover>\n      <PopoverTrigger asChild>\n        <button\n          type=\"button\"\n          data-block-variants={tile.key}\n          data-block-variants-match={matched || undefined}\n          aria-label={translate('builder.blocksPanel.variantsAria', {\n            count: tile.variants.length,\n            title: tile.title,\n          })}\n          title={laterVariantDegraded ? translate('builder.blocksPanel.variantIssuesHint') : undefined}\n          // The chip sits inside the role=\"button\" tile: opening the flyout\n          // must never ALSO insert the default.\n          onClick={(event) => event.stopPropagation()}\n          className={cn(\n            'ml-auto flex shrink-0 items-center gap-1 rounded-full px-1.5 py-0.5 text-[0.65rem] leading-none transition-colors',\n            matched\n              ? 'bg-primary/15 text-primary'\n              : 'bg-muted text-muted-foreground hover:bg-muted/70 hover:text-foreground',\n          )}\n        >\n          {laterVariantDegraded ? (\n            <AlertTriangle aria-hidden className=\"size-2.5 text-amber-600 dark:text-amber-400\" />\n          ) : null}\n          {translate('builder.blocksPanel.variantCount', { count: tile.variants.length })}\n        </button>\n      </PopoverTrigger>\n      <PopoverContent className=\"w-64 p-1.5\" onClick={(event) => event.stopPropagation()}>\n        <Text size=\"xs\" tone=\"muted\" className=\"px-1.5 pb-1 pt-0.5\">\n          {translate('builder.blocksPanel.variantsHeading')}\n        </Text>\n        <VariantRows tile={tile} onInsert={onInsert} onCopy={onCopy} />\n      </PopoverContent>\n    </Popover>\n  )\n}\n\n/**\n * The flyout's variant rows (exported for markup tests): one insert row +\n * copy-exact button per fixture (EC-175 semantics per variant). Rows matched\n * by the active fixture-name search are highlighted.\n */\nexport function VariantRows({\n  tile,\n  onInsert,\n  onCopy,\n}: {\n  tile: BlockTile\n  onInsert: (variant: BlockVariant) => void\n  onCopy: (tile: BlockTile, variant: BlockVariant) => void\n}) {\n  return (\n    <div className=\"flex flex-col gap-0.5\">\n      {tile.variants.map((variant) => {\n        const matched = tile.matchedVariants?.includes(variant.name) ?? false\n        const variantDegraded = variant.issues.length > 0\n        return (\n          <Row key={variant.name} gap=\"1\" className=\"w-full min-w-0\">\n            <button\n              type=\"button\"\n              data-block-variant={`${tile.componentId}::${variant.name}`}\n              data-block-variant-match={matched || undefined}\n              data-block-variant-degraded={variantDegraded || undefined}\n              aria-label={translate('builder.blocksPanel.insertTileAria', {\n                title: tile.title,\n                variant: variant.name,\n              })}\n              title={variantDegraded ? variant.issues.join('\\n') : undefined}\n              onClick={() => onInsert(variant)}\n              className={cn(\n                'flex min-w-0 flex-1 items-center gap-2 rounded-md px-1.5 py-1 text-left text-xs transition-colors hover:bg-muted focus-visible:bg-muted focus-visible:outline-none',\n                matched ? 'text-primary' : 'text-foreground',\n              )}\n            >\n              {variant.previewUrl ? (\n                <img\n                  src={variant.previewUrl}\n                  alt=\"\"\n                  draggable={false}\n                  className=\"pointer-events-none h-7 w-11 shrink-0 select-none rounded bg-muted/40 object-cover\"\n                />\n              ) : null}\n              <span className=\"truncate\">{variant.name}</span>\n              {variantDegraded ? (\n                <AlertTriangle\n                  aria-hidden\n                  className=\"ml-auto size-3 shrink-0 text-amber-600 dark:text-amber-400\"\n                />\n              ) : null}\n            </button>\n            <button\n              type=\"button\"\n              data-block-variant-copy={`${tile.componentId}::${variant.name}`}\n              aria-label={translate('builder.blocksPanel.copyExactAria', {\n                title: tile.title,\n                variant: variant.name,\n              })}\n              title={translate('builder.blocksPanel.copyExactConfiguration')}\n              onClick={() => onCopy(tile, variant)}\n              className=\"shrink-0 rounded-md p-1 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:bg-muted focus-visible:outline-none\"\n            >\n              <ClipboardCopy className=\"size-3.5\" aria-hidden />\n            </button>\n          </Row>\n        )\n      })}\n    </div>\n  )\n}\n"]}

package/dist/components/builder/canvas-chrome-css.js

@@ -107,7 +107,12 @@ const CHROME_UI_CSS = `
     position: absolute !important; box-sizing: border-box !important;
     pointer-events: none !important; border-radius: 2px !important;
   }
-  .ec-overlay-frame[data-ec-hover] { z-index: 1 !important; border: 1px dashed rgba(130,150,190,0.85) !important; }
+  /* Hover frame (EC-435 AD-3): accent-leaning and heavier than the old 1px
+     grey-blue dash (easy to overlook over imagery; live-tuned on light AND
+     busy sections — 1.5px collapses to 1px at 1x DPR, so 2px is the smallest
+     deterministic bump). Still clearly secondary to the SELECTED frame: the
+     same weight but dashed and translucent vs. solid opaque. */
+  .ec-overlay-frame[data-ec-hover] { z-index: 1 !important; border: 2px dashed rgba(91,140,255,0.8) !important; }
   .ec-overlay-frame[data-ec-selected] { z-index: 2 !important; border: 2px solid #5b8cff !important; }
   /* ── Prop highlight (EC-408 reverse: field focus → sub-part) ─────────────
      A quiet FILLED tint (no hard border) on the focused prop's element,

package/dist/components/builder/canvas-chrome-css.js.map

@@ -1 +1 @@
-{"version":3,"file":"canvas-chrome-css.js","sourceRoot":"","sources":["../../../src/components/builder/canvas-chrome-css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAA;AAyC9D;;;;;;;;;;GAUG;AACH,MAAM,CAAC,MAAM,+BAA+B,GAAG,4BAA4B,CAAA;AAE3E;;;;;;;;GAQG;AACH,MAAM,sBAAsB,GAAG;;;;;CAK9B,CAAA;AAED;;;;;;;;GAQG;AACH,MAAM,mBAAmB,GAAG;;CAE3B,CAAA;AAED;;;;;GAKG;AACH,MAAM,aAAa,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wCAuIkB,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwDzD,CAAA;AAED;;;GAGG;AACH,MAAM,UAAU,eAAe,CAAC,KAAkB;IAChD,OAAO,CAAC,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,sBAAsB,CAAC,GAAG,aAAa,CAAA;AAC5F,CAAC","sourcesContent":["import { PRESERVE_NODE_ATTR } from '@elytracms/core/rich-text'\n\n/**\n * The canvas chrome STYLESHEET (EC-414 / AD-B) — the studio's complete in-frame\n * styling, hand-written. This is deliberately NOT a second Tailwind world: the\n * chrome inside the canvas iframe styles itself with `ec-*` classes, `data-ec-*`\n * attributes, and inline styles only, so the consumer's theme is the ONLY design\n * system in the canvas document and the canvas resolves exactly what delivery\n * resolves (AD-A).\n *\n * The chrome contract (binding on ALL in-frame studio UI — EC-404/405/408 build\n * on this):\n *\n *   1. Only `ec-*` class names / `data-ec-*` attributes / inline styles — never\n *      studio utility classes, never studio React UI primitives.\n *   2. Chrome roots carry the containment recipe (`.ec-chrome`): `all: initial`\n *      plus explicit font/color/line-height/color-scheme re-establishment, so\n *      consumer element rules and inherited typography cannot restyle chrome.\n *      NOTE (verified, MDN): `all: initial` does NOT stop custom-property\n *      inheritance — the real protection is that chrome never CONSUMES a var()\n *      name a consumer could define (this file uses no var() at all; the\n *      contract test enforces it).\n *   3. Where a consumer ELEMENT selector could still match chrome descendants\n *      (`div`, `span`, `button`, `input` rules in a site theme), chrome rules\n *      use `!important` deliberately — a small, documented surface: the\n *      selection/DnD indicators, the rich-text toolbar, and the locale chip.\n *      The `.ec-chrome` recipe itself stays normal-strength on purpose: inline\n *      styles are the top styling layer for chrome-owned looks (placeholders,\n *      spacing handles) and stylesheet-`!important` would beat them.\n *   4. Escape hatch (documented only, NOT built): if chrome ever outgrows\n *      hand-written CSS, the verified prefixed-bundle recipe is the upgrade\n *      path — granular Tailwind imports `theme.css layer(theme) prefix(ec)` +\n *      `utilities.css layer(utilities) prefix(ec) important source(none)`\n *      compiled into an engine-provided entry (compiles clean on 4.3.2).\n */\n\n/** The two canvas stylesheet worlds (AD-C): `legacy` = the pre-EC-414 merged\n *  canvas.css (studio design system + consumer theme in one build); `new` = the\n *  consumer's standalone full-Tailwind theme entry, studio-free. */\nexport type CanvasWorld = 'legacy' | 'new'\n\n/**\n * Injected FIRST into the canvas head (before the `ec-app-css` link): a bare\n * layer STATEMENT that pins `ec-canvas-backdrop` to the very bottom of the\n * document's layer order (layer order is first-occurrence order). The new-world\n * backdrop rules live in this layer, so they lose to EVERYTHING the consumer\n * ships — `@layer base` body rules, unlayered rules, later layers — and only\n * paint when the consumer paints nothing. (An unlayered backdrop would ALWAYS\n * beat the consumer's layered `@layer base body { background }` — the exact\n * NK-004 mechanism this task retires.) Inert in the legacy world: the legacy\n * chrome CSS puts nothing in the layer.\n */\nexport const CANVAS_BACKDROP_LAYER_STATEMENT = '@layer ec-canvas-backdrop;'\n\n/**\n * NEW-world backdrop (AD-B item 4): the studio-utility body-class default is\n * retired; these neutral hand-written rules give the canvas a light, site-like\n * page when the consumer theme paints nothing, in the weakest possible cascade\n * position (see {@link CANVAS_BACKDROP_LAYER_STATEMENT}). Background sits on\n * BODY (not html) so a consumer `body { background }` keeps its normal\n * canvas-propagation behavior — short pages paint edge-to-edge exactly as the\n * delivery build does.\n */\nconst NEW_WORLD_BACKDROP_CSS = `\n  @layer ec-canvas-backdrop {\n    html { color-scheme: light; }\n    body { background-color: #ffffff; }\n  }\n`\n\n/**\n * LEGACY-world backdrop — today's rule, verbatim and unlayered (EC-389-era\n * behavior applies EXACTLY in the legacy world, per AD-C): the canvas backdrop\n * is deliberately always light/site-like, so the native form-control/scrollbar\n * theme is forced to match and a page with real inputs never shows dark native\n * chrome floating on a light page. The light page itself comes from the studio\n * body-class default (`DEFAULT_CANVAS_BODY_CLASS`) resolving against the merged\n * stylesheet's studio tokens.\n */\nconst LEGACY_BACKDROP_CSS = `\n  html { color-scheme: light; }\n`\n\n/**\n * The chrome UI rules — identical in both worlds. Sections:\n * page frame, containment recipe, editable wrappers, selection/hover overlay\n * (EC-404), inline editing, rich-text toolbar, locale-fallback chips, drag &\n * drop indicators.\n */\nconst CHROME_UI_CSS = `\n  /* ── Page frame ─────────────────────────────────────────────────────────\n     The canvas gutter — unlayered on purpose (identical in both worlds, and\n     it must beat a consumer body margin: the 16px frame is editor ergonomics,\n     not page styling). */\n  body { margin: 0; padding: 16px; }\n\n  /* ── Containment recipe (chrome contract item 2) ────────────────────────\n     Every chrome ROOT (toolbar, spacing handles, in-canvas placeholders)\n     carries .ec-chrome: reset everything, then re-establish the chrome's own\n     typography and color-scheme explicitly. Inherited custom properties pierce\n     'all: initial' (and even shadow DOM) — that is why chrome never consumes\n     var() names (contract-tested), not something this recipe could fix.\n     The :where(div, span, p) guard re-links descendant text to the chrome\n     root's typography with class-level specificity, so a consumer's bare\n     'div, span { color: … }' element rules cannot restyle chrome text; chrome\n     elements styled inline stay inline-styled (inline always wins here). */\n  .ec-chrome {\n    all: initial;\n    display: block;\n    box-sizing: border-box;\n    font-family: ui-sans-serif, system-ui, sans-serif;\n    font-size: 13px;\n    line-height: 1.5;\n    color: rgb(30, 35, 45);\n    color-scheme: light;\n  }\n  .ec-chrome *,\n  .ec-chrome *::before,\n  .ec-chrome *::after { box-sizing: border-box; }\n  .ec-chrome :where(div, span, p) { color: inherit; font: inherit; }\n\n  /* ── Editable wrappers ──────────────────────────────────────────────────\n     Scoped to the per-node editable wrappers. The wrappers WRAP consumer\n     content, so they are deliberately NOT contained (no .ec-chrome — they must\n     stay layout-transparent). EC-404 RETIRED the in-document selection/hover\n     outlines (data-selected / data-hovered): an outline paints in the\n     element's own stacking order and any full-bleed background or higher\n     z-index sibling paints over it — a structural occlusion, not a z-index bug.\n     Selection + hover are now drawn by the topmost .ec-overlay layer below.\n     The outline-offset stays for the editing outline (and DnD 'into' overrides\n     it); its !important (contract item 3) keeps a site theme's element rules\n     from hiding those states. */\n  .ec-editable { outline-offset: -1px !important; cursor: default; }\n\n  /* ── Selection/hover overlay (EC-404) ───────────────────────────────────\n     The topmost editing layer, portaled into the iframe body as a sibling of\n     the page composition and pinned to the maximum stacking level, so NOTHING\n     the page paints can occlude the selection frame. The root carries the\n     .ec-chrome containment recipe; geometry (left/top/width/height) is inline,\n     everything visual lives here. Element-matching declarations carry\n     !important (contract item 3): the frame boxes are <div>s and the controls\n     are <button>s a site theme's element rules would otherwise restyle. Frames\n     are click-through (pointer-events:none); only the bar re-enables events. */\n  .ec-overlay {\n    position: absolute !important; top: 0 !important; left: 0 !important;\n    z-index: 2147483647 !important; pointer-events: none !important;\n    width: 0 !important; height: 0 !important;\n  }\n  .ec-overlay-frame {\n    position: absolute !important; box-sizing: border-box !important;\n    pointer-events: none !important; border-radius: 2px !important;\n  }\n  .ec-overlay-frame[data-ec-hover] { z-index: 1 !important; border: 1px dashed rgba(130,150,190,0.85) !important; }\n  .ec-overlay-frame[data-ec-selected] { z-index: 2 !important; border: 2px solid #5b8cff !important; }\n  /* ── Prop highlight (EC-408 reverse: field focus → sub-part) ─────────────\n     A quiet FILLED tint (no hard border) on the focused prop's element,\n     deliberately distinct from the selection frame (solid border) and the\n     hover frame (dashed border). Sits below both frames so their borders stay\n     crisp; click-through like the frames. */\n  .ec-overlay-prop {\n    position: absolute !important; z-index: 1 !important; box-sizing: border-box !important;\n    pointer-events: none !important; border-radius: 3px !important;\n    background: rgba(91,140,255,0.16) !important;\n    box-shadow: inset 0 0 0 1px rgba(91,140,255,0.45) !important;\n  }\n  .ec-overlay-bar {\n    position: absolute !important; z-index: 3 !important; pointer-events: auto !important;\n    display: flex !important; align-items: center !important; gap: 1px !important;\n    height: 22px !important; max-width: 320px !important; padding: 0 2px 0 6px !important;\n    border-radius: 6px !important; background: #5b8cff !important;\n    box-shadow: 0 2px 8px rgba(8,12,24,0.35) !important;\n    font: 600 11px/1 ui-sans-serif, system-ui, sans-serif !important;\n    color: #ffffff !important; white-space: nowrap !important;\n  }\n  .ec-overlay-label {\n    overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important;\n    max-width: 180px !important; padding-right: 2px !important;\n    font: inherit !important; color: #ffffff !important;\n  }\n  .ec-overlay-sep {\n    width: 1px !important; height: 12px !important; margin: 0 3px !important;\n    background: rgba(255,255,255,0.4) !important;\n  }\n  .ec-overlay-btn {\n    display: inline-flex !important; align-items: center !important; justify-content: center !important;\n    width: 20px !important; height: 18px !important; padding: 0 !important; margin: 0 !important;\n    border: 0 !important; border-radius: 4px !important; background: transparent !important;\n    color: #ffffff !important; cursor: pointer !important; -webkit-appearance: none !important; appearance: none !important;\n  }\n  .ec-overlay-btn:hover { background: rgba(255,255,255,0.22) !important; }\n  .ec-overlay-btn:disabled { opacity: 0.4 !important; cursor: default !important; }\n\n  /* ── Insertion affordances (EC-405) ─────────────────────────────────────\n     A \"+\" button centered ON a block boundary (before/after edge, or the center\n     of an empty container) — the geometry is inline (the anchor point), the\n     translate here centers the button on it. Appears only on hover/selection\n     (never during a drag or inline edit); pointer-events re-enabled so it is\n     clickable while the overlay root stays click-through. Element-matching\n     declarations !important (contract item 3): it is a <button> a site theme's\n     element rules would otherwise restyle. */\n  .ec-overlay-add {\n    position: absolute !important; z-index: 4 !important; pointer-events: auto !important;\n    transform: translate(-50%, -50%) !important;\n    display: inline-flex !important; align-items: center !important; justify-content: center !important;\n    width: 20px !important; height: 20px !important; padding: 0 !important; margin: 0 !important;\n    border: 1.5px solid #ffffff !important; border-radius: 999px !important;\n    background: #5b8cff !important; color: #ffffff !important; cursor: pointer !important;\n    box-shadow: 0 1px 5px rgba(8,12,24,0.4) !important;\n    -webkit-appearance: none !important; appearance: none !important;\n  }\n  .ec-overlay-add:hover { background: #3f74f5 !important; }\n\n  /* ── Inline editing (EC-158 text, EC-159 rich text) ─────────────────────\n     The rendered element itself becomes the editor — no overlay, no\n     replacement input — so typography, alignment, and layout are\n     pixel-identical between edit and render states. The wrapper keeps the\n     selection outline; the host only gets a caret. pre-wrap applies to PLAIN\n     text hosts only — rich-text markup must keep its rendered whitespace\n     handling (no layout shift). */\n  .ec-editable[data-ec-editing] { outline: 2px solid #5b8cff !important; }\n  .ec-editable [data-ec-edit] { outline: none; cursor: text; }\n  .ec-editable [data-ec-edit='text'] { white-space: pre-wrap; }\n  /* Preserved atoms during a rich-text session (custom blocks, unknown nodes,\n     images, embeds): visible and rendered, but not text-editable. */\n  .ec-editable [data-ec-edit='rich'] [${PRESERVE_NODE_ATTR}] { user-select: none; }\n\n  /* ── Floating mark toolbar (EC-159), portaled into the iframe ───────────\n     All visual declarations !important (contract item 3): the toolbar is\n     stylesheet-styled chrome whose button/input elements a site theme's\n     element rules would otherwise match. */\n  .ec-rt-toolbar { color-scheme: dark !important; }\n  .ec-rt-toolbar-row { display: flex !important; align-items: center !important; gap: 2px !important;\n    padding: 3px !important; margin: 0 !important;\n    border: 1px solid rgba(130,150,190,0.4) !important; border-radius: 8px !important;\n    background: rgb(24,26,32) !important; box-shadow: 0 4px 16px rgba(0,0,0,0.4) !important; }\n  .ec-rt-toolbar-btn { min-width: 26px !important; height: 24px !important; padding: 0 7px !important;\n    border: 0 !important; border-radius: 5px !important;\n    background: transparent !important; color: rgb(225,228,236) !important;\n    font: 600 12px/1 ui-sans-serif, system-ui, sans-serif !important;\n    cursor: pointer !important; }\n  .ec-rt-toolbar-btn:hover { background: rgba(130,150,190,0.25) !important; }\n  .ec-rt-toolbar-btn[data-active] { background: #5b8cff !important; color: white !important; }\n  .ec-rt-toolbar-input { width: 200px !important; height: 24px !important; padding: 0 7px !important;\n    border-radius: 5px !important;\n    border: 1px solid rgba(130,150,190,0.4) !important; background: rgb(16,18,22) !important;\n    color: rgb(225,228,236) !important;\n    font: 12px/1 ui-sans-serif, system-ui, sans-serif !important; outline: none !important; }\n\n  /* ── Locale-fallback chips (EC-176) ─────────────────────────────────────\n     A node whose bound content is currently served via locale fallback wears a\n     small corner chip naming the locale it actually came from — the canvas\n     never silently mixes locales. A pseudo-element cannot carry .ec-chrome, so\n     every declaration is !important (contract item 3). */\n  .ec-editable[data-ec-locale-fallback] { position: relative; }\n  .ec-editable[data-ec-locale-fallback]::after {\n    content: attr(data-ec-locale-fallback) !important;\n    position: absolute !important; top: 2px !important; right: 2px !important;\n    z-index: 5 !important; pointer-events: none !important;\n    padding: 0 4px !important; border-radius: 4px !important;\n    font: 600 9px/1.5 ui-sans-serif, system-ui, sans-serif !important;\n    letter-spacing: 0.05em !important; text-transform: uppercase !important;\n    color: #fbbf24 !important; background: rgba(180,83,9,0.25) !important;\n    border: 1px solid rgba(245,158,11,0.45) !important;\n  }\n\n  /* ── Drag & drop states (EC-160/EC-162) ─────────────────────────────────\n     Eligibility comes from the shared pure rules (lib/dnd/drop-rules); these\n     classes only *show* the resolution. Rejection is explicit and visible\n     during the drag — never a silent failed drop. Before/after bars follow the\n     parent's flow axis (data-ec-drop-axis); left/right are the\n     wrap-into-columns gesture (violet, paired highlight). Indicator\n     declarations !important (contract item 3). */\n  .ec-editable[data-ec-drop='into'] { outline: 2px solid #34d399 !important; outline-offset: -2px !important; background-color: rgba(52, 211, 153, 0.08) !important; }\n  .ec-editable[data-ec-drop='before'] { box-shadow: 0 -3px 0 0 #38bdf8 !important; }\n  .ec-editable[data-ec-drop='after'] { box-shadow: 0 3px 0 0 #38bdf8 !important; }\n  .ec-editable[data-ec-drop='before'][data-ec-drop-axis='x'] { box-shadow: -3px 0 0 0 #38bdf8 !important; }\n  .ec-editable[data-ec-drop='after'][data-ec-drop-axis='x'] { box-shadow: 3px 0 0 0 #38bdf8 !important; }\n  .ec-editable[data-ec-drop='left'] { box-shadow: -3px 0 0 0 #a78bfa !important; background-color: rgba(167, 139, 250, 0.1) !important; }\n  .ec-editable[data-ec-drop='right'] { box-shadow: 3px 0 0 0 #a78bfa !important; background-color: rgba(167, 139, 250, 0.1) !important; }\n  .ec-editable[data-ec-drop='blocked'] { outline: 2px solid #ef4444 !important; outline-offset: -2px !important; background-color: rgba(239, 68, 68, 0.08) !important; cursor: not-allowed !important; }\n`\n\n/**\n * The complete chrome stylesheet for a world — the `ec-outline-css` element's\n * content (id kept from EC-389; the cascade position is pinned by test).\n */\nexport function canvasChromeCss(world: CanvasWorld): string {\n  return (world === 'legacy' ? LEGACY_BACKDROP_CSS : NEW_WORLD_BACKDROP_CSS) + CHROME_UI_CSS\n}\n"]}
+{"version":3,"file":"canvas-chrome-css.js","sourceRoot":"","sources":["../../../src/components/builder/canvas-chrome-css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAA;AAyC9D;;;;;;;;;;GAUG;AACH,MAAM,CAAC,MAAM,+BAA+B,GAAG,4BAA4B,CAAA;AAE3E;;;;;;;;GAQG;AACH,MAAM,sBAAsB,GAAG;;;;;CAK9B,CAAA;AAED;;;;;;;;GAQG;AACH,MAAM,mBAAmB,GAAG;;CAE3B,CAAA;AAED;;;;;GAKG;AACH,MAAM,aAAa,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wCA4IkB,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwDzD,CAAA;AAED;;;GAGG;AACH,MAAM,UAAU,eAAe,CAAC,KAAkB;IAChD,OAAO,CAAC,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,sBAAsB,CAAC,GAAG,aAAa,CAAA;AAC5F,CAAC","sourcesContent":["import { PRESERVE_NODE_ATTR } from '@elytracms/core/rich-text'\n\n/**\n * The canvas chrome STYLESHEET (EC-414 / AD-B) — the studio's complete in-frame\n * styling, hand-written. This is deliberately NOT a second Tailwind world: the\n * chrome inside the canvas iframe styles itself with `ec-*` classes, `data-ec-*`\n * attributes, and inline styles only, so the consumer's theme is the ONLY design\n * system in the canvas document and the canvas resolves exactly what delivery\n * resolves (AD-A).\n *\n * The chrome contract (binding on ALL in-frame studio UI — EC-404/405/408 build\n * on this):\n *\n *   1. Only `ec-*` class names / `data-ec-*` attributes / inline styles — never\n *      studio utility classes, never studio React UI primitives.\n *   2. Chrome roots carry the containment recipe (`.ec-chrome`): `all: initial`\n *      plus explicit font/color/line-height/color-scheme re-establishment, so\n *      consumer element rules and inherited typography cannot restyle chrome.\n *      NOTE (verified, MDN): `all: initial` does NOT stop custom-property\n *      inheritance — the real protection is that chrome never CONSUMES a var()\n *      name a consumer could define (this file uses no var() at all; the\n *      contract test enforces it).\n *   3. Where a consumer ELEMENT selector could still match chrome descendants\n *      (`div`, `span`, `button`, `input` rules in a site theme), chrome rules\n *      use `!important` deliberately — a small, documented surface: the\n *      selection/DnD indicators, the rich-text toolbar, and the locale chip.\n *      The `.ec-chrome` recipe itself stays normal-strength on purpose: inline\n *      styles are the top styling layer for chrome-owned looks (placeholders,\n *      spacing handles) and stylesheet-`!important` would beat them.\n *   4. Escape hatch (documented only, NOT built): if chrome ever outgrows\n *      hand-written CSS, the verified prefixed-bundle recipe is the upgrade\n *      path — granular Tailwind imports `theme.css layer(theme) prefix(ec)` +\n *      `utilities.css layer(utilities) prefix(ec) important source(none)`\n *      compiled into an engine-provided entry (compiles clean on 4.3.2).\n */\n\n/** The two canvas stylesheet worlds (AD-C): `legacy` = the pre-EC-414 merged\n *  canvas.css (studio design system + consumer theme in one build); `new` = the\n *  consumer's standalone full-Tailwind theme entry, studio-free. */\nexport type CanvasWorld = 'legacy' | 'new'\n\n/**\n * Injected FIRST into the canvas head (before the `ec-app-css` link): a bare\n * layer STATEMENT that pins `ec-canvas-backdrop` to the very bottom of the\n * document's layer order (layer order is first-occurrence order). The new-world\n * backdrop rules live in this layer, so they lose to EVERYTHING the consumer\n * ships — `@layer base` body rules, unlayered rules, later layers — and only\n * paint when the consumer paints nothing. (An unlayered backdrop would ALWAYS\n * beat the consumer's layered `@layer base body { background }` — the exact\n * NK-004 mechanism this task retires.) Inert in the legacy world: the legacy\n * chrome CSS puts nothing in the layer.\n */\nexport const CANVAS_BACKDROP_LAYER_STATEMENT = '@layer ec-canvas-backdrop;'\n\n/**\n * NEW-world backdrop (AD-B item 4): the studio-utility body-class default is\n * retired; these neutral hand-written rules give the canvas a light, site-like\n * page when the consumer theme paints nothing, in the weakest possible cascade\n * position (see {@link CANVAS_BACKDROP_LAYER_STATEMENT}). Background sits on\n * BODY (not html) so a consumer `body { background }` keeps its normal\n * canvas-propagation behavior — short pages paint edge-to-edge exactly as the\n * delivery build does.\n */\nconst NEW_WORLD_BACKDROP_CSS = `\n  @layer ec-canvas-backdrop {\n    html { color-scheme: light; }\n    body { background-color: #ffffff; }\n  }\n`\n\n/**\n * LEGACY-world backdrop — today's rule, verbatim and unlayered (EC-389-era\n * behavior applies EXACTLY in the legacy world, per AD-C): the canvas backdrop\n * is deliberately always light/site-like, so the native form-control/scrollbar\n * theme is forced to match and a page with real inputs never shows dark native\n * chrome floating on a light page. The light page itself comes from the studio\n * body-class default (`DEFAULT_CANVAS_BODY_CLASS`) resolving against the merged\n * stylesheet's studio tokens.\n */\nconst LEGACY_BACKDROP_CSS = `\n  html { color-scheme: light; }\n`\n\n/**\n * The chrome UI rules — identical in both worlds. Sections:\n * page frame, containment recipe, editable wrappers, selection/hover overlay\n * (EC-404), inline editing, rich-text toolbar, locale-fallback chips, drag &\n * drop indicators.\n */\nconst CHROME_UI_CSS = `\n  /* ── Page frame ─────────────────────────────────────────────────────────\n     The canvas gutter — unlayered on purpose (identical in both worlds, and\n     it must beat a consumer body margin: the 16px frame is editor ergonomics,\n     not page styling). */\n  body { margin: 0; padding: 16px; }\n\n  /* ── Containment recipe (chrome contract item 2) ────────────────────────\n     Every chrome ROOT (toolbar, spacing handles, in-canvas placeholders)\n     carries .ec-chrome: reset everything, then re-establish the chrome's own\n     typography and color-scheme explicitly. Inherited custom properties pierce\n     'all: initial' (and even shadow DOM) — that is why chrome never consumes\n     var() names (contract-tested), not something this recipe could fix.\n     The :where(div, span, p) guard re-links descendant text to the chrome\n     root's typography with class-level specificity, so a consumer's bare\n     'div, span { color: … }' element rules cannot restyle chrome text; chrome\n     elements styled inline stay inline-styled (inline always wins here). */\n  .ec-chrome {\n    all: initial;\n    display: block;\n    box-sizing: border-box;\n    font-family: ui-sans-serif, system-ui, sans-serif;\n    font-size: 13px;\n    line-height: 1.5;\n    color: rgb(30, 35, 45);\n    color-scheme: light;\n  }\n  .ec-chrome *,\n  .ec-chrome *::before,\n  .ec-chrome *::after { box-sizing: border-box; }\n  .ec-chrome :where(div, span, p) { color: inherit; font: inherit; }\n\n  /* ── Editable wrappers ──────────────────────────────────────────────────\n     Scoped to the per-node editable wrappers. The wrappers WRAP consumer\n     content, so they are deliberately NOT contained (no .ec-chrome — they must\n     stay layout-transparent). EC-404 RETIRED the in-document selection/hover\n     outlines (data-selected / data-hovered): an outline paints in the\n     element's own stacking order and any full-bleed background or higher\n     z-index sibling paints over it — a structural occlusion, not a z-index bug.\n     Selection + hover are now drawn by the topmost .ec-overlay layer below.\n     The outline-offset stays for the editing outline (and DnD 'into' overrides\n     it); its !important (contract item 3) keeps a site theme's element rules\n     from hiding those states. */\n  .ec-editable { outline-offset: -1px !important; cursor: default; }\n\n  /* ── Selection/hover overlay (EC-404) ───────────────────────────────────\n     The topmost editing layer, portaled into the iframe body as a sibling of\n     the page composition and pinned to the maximum stacking level, so NOTHING\n     the page paints can occlude the selection frame. The root carries the\n     .ec-chrome containment recipe; geometry (left/top/width/height) is inline,\n     everything visual lives here. Element-matching declarations carry\n     !important (contract item 3): the frame boxes are <div>s and the controls\n     are <button>s a site theme's element rules would otherwise restyle. Frames\n     are click-through (pointer-events:none); only the bar re-enables events. */\n  .ec-overlay {\n    position: absolute !important; top: 0 !important; left: 0 !important;\n    z-index: 2147483647 !important; pointer-events: none !important;\n    width: 0 !important; height: 0 !important;\n  }\n  .ec-overlay-frame {\n    position: absolute !important; box-sizing: border-box !important;\n    pointer-events: none !important; border-radius: 2px !important;\n  }\n  /* Hover frame (EC-435 AD-3): accent-leaning and heavier than the old 1px\n     grey-blue dash (easy to overlook over imagery; live-tuned on light AND\n     busy sections — 1.5px collapses to 1px at 1x DPR, so 2px is the smallest\n     deterministic bump). Still clearly secondary to the SELECTED frame: the\n     same weight but dashed and translucent vs. solid opaque. */\n  .ec-overlay-frame[data-ec-hover] { z-index: 1 !important; border: 2px dashed rgba(91,140,255,0.8) !important; }\n  .ec-overlay-frame[data-ec-selected] { z-index: 2 !important; border: 2px solid #5b8cff !important; }\n  /* ── Prop highlight (EC-408 reverse: field focus → sub-part) ─────────────\n     A quiet FILLED tint (no hard border) on the focused prop's element,\n     deliberately distinct from the selection frame (solid border) and the\n     hover frame (dashed border). Sits below both frames so their borders stay\n     crisp; click-through like the frames. */\n  .ec-overlay-prop {\n    position: absolute !important; z-index: 1 !important; box-sizing: border-box !important;\n    pointer-events: none !important; border-radius: 3px !important;\n    background: rgba(91,140,255,0.16) !important;\n    box-shadow: inset 0 0 0 1px rgba(91,140,255,0.45) !important;\n  }\n  .ec-overlay-bar {\n    position: absolute !important; z-index: 3 !important; pointer-events: auto !important;\n    display: flex !important; align-items: center !important; gap: 1px !important;\n    height: 22px !important; max-width: 320px !important; padding: 0 2px 0 6px !important;\n    border-radius: 6px !important; background: #5b8cff !important;\n    box-shadow: 0 2px 8px rgba(8,12,24,0.35) !important;\n    font: 600 11px/1 ui-sans-serif, system-ui, sans-serif !important;\n    color: #ffffff !important; white-space: nowrap !important;\n  }\n  .ec-overlay-label {\n    overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important;\n    max-width: 180px !important; padding-right: 2px !important;\n    font: inherit !important; color: #ffffff !important;\n  }\n  .ec-overlay-sep {\n    width: 1px !important; height: 12px !important; margin: 0 3px !important;\n    background: rgba(255,255,255,0.4) !important;\n  }\n  .ec-overlay-btn {\n    display: inline-flex !important; align-items: center !important; justify-content: center !important;\n    width: 20px !important; height: 18px !important; padding: 0 !important; margin: 0 !important;\n    border: 0 !important; border-radius: 4px !important; background: transparent !important;\n    color: #ffffff !important; cursor: pointer !important; -webkit-appearance: none !important; appearance: none !important;\n  }\n  .ec-overlay-btn:hover { background: rgba(255,255,255,0.22) !important; }\n  .ec-overlay-btn:disabled { opacity: 0.4 !important; cursor: default !important; }\n\n  /* ── Insertion affordances (EC-405) ─────────────────────────────────────\n     A \"+\" button centered ON a block boundary (before/after edge, or the center\n     of an empty container) — the geometry is inline (the anchor point), the\n     translate here centers the button on it. Appears only on hover/selection\n     (never during a drag or inline edit); pointer-events re-enabled so it is\n     clickable while the overlay root stays click-through. Element-matching\n     declarations !important (contract item 3): it is a <button> a site theme's\n     element rules would otherwise restyle. */\n  .ec-overlay-add {\n    position: absolute !important; z-index: 4 !important; pointer-events: auto !important;\n    transform: translate(-50%, -50%) !important;\n    display: inline-flex !important; align-items: center !important; justify-content: center !important;\n    width: 20px !important; height: 20px !important; padding: 0 !important; margin: 0 !important;\n    border: 1.5px solid #ffffff !important; border-radius: 999px !important;\n    background: #5b8cff !important; color: #ffffff !important; cursor: pointer !important;\n    box-shadow: 0 1px 5px rgba(8,12,24,0.4) !important;\n    -webkit-appearance: none !important; appearance: none !important;\n  }\n  .ec-overlay-add:hover { background: #3f74f5 !important; }\n\n  /* ── Inline editing (EC-158 text, EC-159 rich text) ─────────────────────\n     The rendered element itself becomes the editor — no overlay, no\n     replacement input — so typography, alignment, and layout are\n     pixel-identical between edit and render states. The wrapper keeps the\n     selection outline; the host only gets a caret. pre-wrap applies to PLAIN\n     text hosts only — rich-text markup must keep its rendered whitespace\n     handling (no layout shift). */\n  .ec-editable[data-ec-editing] { outline: 2px solid #5b8cff !important; }\n  .ec-editable [data-ec-edit] { outline: none; cursor: text; }\n  .ec-editable [data-ec-edit='text'] { white-space: pre-wrap; }\n  /* Preserved atoms during a rich-text session (custom blocks, unknown nodes,\n     images, embeds): visible and rendered, but not text-editable. */\n  .ec-editable [data-ec-edit='rich'] [${PRESERVE_NODE_ATTR}] { user-select: none; }\n\n  /* ── Floating mark toolbar (EC-159), portaled into the iframe ───────────\n     All visual declarations !important (contract item 3): the toolbar is\n     stylesheet-styled chrome whose button/input elements a site theme's\n     element rules would otherwise match. */\n  .ec-rt-toolbar { color-scheme: dark !important; }\n  .ec-rt-toolbar-row { display: flex !important; align-items: center !important; gap: 2px !important;\n    padding: 3px !important; margin: 0 !important;\n    border: 1px solid rgba(130,150,190,0.4) !important; border-radius: 8px !important;\n    background: rgb(24,26,32) !important; box-shadow: 0 4px 16px rgba(0,0,0,0.4) !important; }\n  .ec-rt-toolbar-btn { min-width: 26px !important; height: 24px !important; padding: 0 7px !important;\n    border: 0 !important; border-radius: 5px !important;\n    background: transparent !important; color: rgb(225,228,236) !important;\n    font: 600 12px/1 ui-sans-serif, system-ui, sans-serif !important;\n    cursor: pointer !important; }\n  .ec-rt-toolbar-btn:hover { background: rgba(130,150,190,0.25) !important; }\n  .ec-rt-toolbar-btn[data-active] { background: #5b8cff !important; color: white !important; }\n  .ec-rt-toolbar-input { width: 200px !important; height: 24px !important; padding: 0 7px !important;\n    border-radius: 5px !important;\n    border: 1px solid rgba(130,150,190,0.4) !important; background: rgb(16,18,22) !important;\n    color: rgb(225,228,236) !important;\n    font: 12px/1 ui-sans-serif, system-ui, sans-serif !important; outline: none !important; }\n\n  /* ── Locale-fallback chips (EC-176) ─────────────────────────────────────\n     A node whose bound content is currently served via locale fallback wears a\n     small corner chip naming the locale it actually came from — the canvas\n     never silently mixes locales. A pseudo-element cannot carry .ec-chrome, so\n     every declaration is !important (contract item 3). */\n  .ec-editable[data-ec-locale-fallback] { position: relative; }\n  .ec-editable[data-ec-locale-fallback]::after {\n    content: attr(data-ec-locale-fallback) !important;\n    position: absolute !important; top: 2px !important; right: 2px !important;\n    z-index: 5 !important; pointer-events: none !important;\n    padding: 0 4px !important; border-radius: 4px !important;\n    font: 600 9px/1.5 ui-sans-serif, system-ui, sans-serif !important;\n    letter-spacing: 0.05em !important; text-transform: uppercase !important;\n    color: #fbbf24 !important; background: rgba(180,83,9,0.25) !important;\n    border: 1px solid rgba(245,158,11,0.45) !important;\n  }\n\n  /* ── Drag & drop states (EC-160/EC-162) ─────────────────────────────────\n     Eligibility comes from the shared pure rules (lib/dnd/drop-rules); these\n     classes only *show* the resolution. Rejection is explicit and visible\n     during the drag — never a silent failed drop. Before/after bars follow the\n     parent's flow axis (data-ec-drop-axis); left/right are the\n     wrap-into-columns gesture (violet, paired highlight). Indicator\n     declarations !important (contract item 3). */\n  .ec-editable[data-ec-drop='into'] { outline: 2px solid #34d399 !important; outline-offset: -2px !important; background-color: rgba(52, 211, 153, 0.08) !important; }\n  .ec-editable[data-ec-drop='before'] { box-shadow: 0 -3px 0 0 #38bdf8 !important; }\n  .ec-editable[data-ec-drop='after'] { box-shadow: 0 3px 0 0 #38bdf8 !important; }\n  .ec-editable[data-ec-drop='before'][data-ec-drop-axis='x'] { box-shadow: -3px 0 0 0 #38bdf8 !important; }\n  .ec-editable[data-ec-drop='after'][data-ec-drop-axis='x'] { box-shadow: 3px 0 0 0 #38bdf8 !important; }\n  .ec-editable[data-ec-drop='left'] { box-shadow: -3px 0 0 0 #a78bfa !important; background-color: rgba(167, 139, 250, 0.1) !important; }\n  .ec-editable[data-ec-drop='right'] { box-shadow: 3px 0 0 0 #a78bfa !important; background-color: rgba(167, 139, 250, 0.1) !important; }\n  .ec-editable[data-ec-drop='blocked'] { outline: 2px solid #ef4444 !important; outline-offset: -2px !important; background-color: rgba(239, 68, 68, 0.08) !important; cursor: not-allowed !important; }\n`\n\n/**\n * The complete chrome stylesheet for a world — the `ec-outline-css` element's\n * content (id kept from EC-389; the cascade position is pinned by test).\n */\nexport function canvasChromeCss(world: CanvasWorld): string {\n  return (world === 'legacy' ? LEGACY_BACKDROP_CSS : NEW_WORLD_BACKDROP_CSS) + CHROME_UI_CSS\n}\n"]}

package/dist/components/builder/fixture-thumbnail.d.ts

@@ -1,33 +1,23 @@
-import type { ComponentNode } from '@elytracms/core/project-graph';
-import type { StudioRegistry } from '@elytracms/studio/lib/registry';
 /**
- * Curated preview-image tile (EC-409): renders `manifest.previewImage` in the
- * SAME 16/10 tile frame as {@link ScaledFixtureThumbnail}, object-fit cover.
- * The escape hatch for components whose live render needs data/context the
- * tile can't have — fixtures stay the primary curation lever. `alt` is the
- * component title (already-localized manifest data); the image is never a
- * fetch the engine performs, just an `<img>` with the consumer's URL string.
+ * Preview-image tile (EC-409 curated / EC-440 generated): renders the resolved
+ * `previewUrl` in the shared 16/10 inset, object-fit cover. The image is never
+ * a fetch the engine performs, just an `<img>` with the consumer's URL string;
+ * `alt` is the component title (already-localized manifest data).
  */
 export declare function PreviewImageThumbnail({ src, alt, className, }: {
-    /** The manifest's `previewImage` URL string, passed through verbatim. */
+    /** The resolved preview URL (curated `manifest.previewImage` or a generated artifact), passed through verbatim. */
     src: string;
     /** The component title (localized manifest data — no new catalog string). */
     alt: string;
     className?: string;
 }): import("react").JSX.Element;
-export declare function ScaledFixtureThumbnail({ node, studio, designWidth, eager, className, }: {
-    /** The preview subtree to render live (deterministic ids). */
-    node: ComponentNode;
-    /**
-     * Registry the preview renders against. Defaults to the active project's live
-     * registry (`getStudioRegistry()`) — the blocks panel's tiles and their
-     * thumbnails share one registry. Pass an explicit registry to render against a
-     * specific component set (deterministic previews/tests).
-     */
-    studio?: StudioRegistry;
-    /** Layout width of the unscaled preview, in CSS pixels. */
-    designWidth?: number;
-    /** Mount the live render immediately instead of waiting for visibility. */
-    eager?: boolean;
+/**
+ * The icon+name placeholder (EC-439 AD-2, tier 3): a deliberate glyph
+ * treatment — a centered two-letter monogram derived from the component title
+ * in a muted disc — never an empty box and never a lying render. Decorative
+ * only (`aria-hidden`): the tile itself carries the accessible name.
+ */
+export declare function PlaceholderThumbnail({ title, className }: {
+    title: string;
     className?: string;
 }): import("react").JSX.Element;