@aglyn/besigner-ui 1.0.0-beta.143

package/src/lib/components/element-preview.component.js

@@ -0,0 +1,346 @@
+/**
+ * @license
+ * Copyright 2026 Aglyn LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */ import { _ as _extends } from "@swc/helpers/_/_extends";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { aglyn, CanvasManager, NODE_ROOT_ID, ScreenLinkContext, SiteContext } from "@aglyn/aglyn";
+// Deep import, NOT the barrel (AGL-2486) — see `plugin-styles-ui.tsx`.
+import { PluginStyles } from "@aglyn/aglyn/plugin-manager/plugin-styles-ui";
+import { AglynNodeRenderer, useAglynSiteTheme } from "@aglyn/aglyn-node-renderer";
+import { MuiShadowDom, useMuiShadowDomContext } from "@aglyn/shared-ui-jsx";
+import { ThemeProvider } from "@aglyn/shared-ui-theme";
+import { Box, GlobalStyles, Typography } from "@mui/material";
+import { observer } from "mobx-react-lite";
+import { useResolvedHostThemeDocument } from "../utils/active-host-theme.js";
+import { useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+/**
+ * The width the preview composes at, before it is scaled down to fit.
+ *
+ * Elements are authored for a page, not for a thumbnail: a Hero centres a
+ * headline across a viewport and a Footer lays out four columns. Composing at
+ * a phone width and calling it a preview would show neither. So it renders at
+ * a desktop width and the whole stage is scaled — the proportions the element
+ * was designed for survive, just smaller.
+ */ const STAGE_WIDTH = 1280;
+/** Never blow a small element up past life size; only ever scale down. */ const MAX_SCALE = 1;
+/** Below this a preview is a smudge; better to show a short empty band. */ const MIN_HEIGHT = 40;
+/** Enough for the note to read as a sentence rather than a clipped line. */ const NOTE_HEIGHT = 76;
+/**
+ * Renders the preset's own nodes into an isolated stage, so a picker shows
+ * what an element LOOKS like and not only what it is called (AGL-2486).
+ *
+ * Three things this must never do, each of which is a real hazard rather than
+ * a hypothetical one:
+ *
+ * 1. **Touch `Aglyn.canvas`.** That singleton holds the document being
+ *    edited; the console's Preview route calls `setNodes` on it, and doing
+ *    the same here would blow away the user's screen to draw a thumbnail.
+ *    Every preview gets its own `CanvasManager`, backed by the real app so
+ *    component schemas still resolve — the pattern `useLayoutChromeCanvas`
+ *    already uses for locked layout chrome.
+ * 2. **Mutate anything from inside.** The stage is inert: pointer events are
+ *    off, the subtree is marked `inert` so nothing in it is focusable or
+ *    clickable, links are told not to navigate, and `SiteContext.preview`
+ *    turns every write into a synthetic 423.
+ * 3. **Escape its box.** The stage is scaled to fit and clipped, so a Footer
+ *    cannot push Confirm off the dialog or stretch the docked column.
+ *
+ * Elements that cannot render standalone — a Cart, a Product grid, anything
+ * reading site data — are NOT special-cased here. Deliberately: they already
+ * render their own dashed "Cart — lines render here" placeholder when there
+ * is no `hostId`, and this preview does not supply one. That placeholder is
+ * the honest answer to "what will I get", and it means the picker needs no
+ * second list of which elements are self-contained: each element already
+ * says so itself.
+ */ export const ElementPreview = observer((props)=>{
+    const { node, height = 160, requiredParents } = props;
+    // Context where it exists, register where the surface sits outside the
+    // page — see `active-host-theme.ts`. The preview must carry the SITE's
+    // brand wherever it is mounted.
+    const hostThemeDoc = useResolvedHostThemeDocument();
+    // A throwaway store per preset. Never the global canvas.
+    const canvas = useMemo(()=>{
+        const data = node == null ? void 0 : node.data;
+        if (!data) return undefined;
+        try {
+            const store = new CanvasManager(aglyn);
+            // Seed an empty root, then insert through the SAME path the drawer
+            // uses. Handing `preset.data` straight to `processNodesToDenormalized`
+            // looks equivalent and is not: it keys nodes by `$id` and maps each
+            // child to `i.$id`, and a preset's nodes carry `$id: null` until they
+            // are minted — so every child was filtered out and the preview drew an
+            // empty root. `addNodeFromPreset` runs `createDuplicateNode` first,
+            // which is what assigns them.
+            store.setNodes(store.processNodesToDenormalized([
+                {
+                    $id: NODE_ROOT_ID,
+                    componentId: 'div',
+                    nodes: []
+                }
+            ]));
+            const rootNode = store.getNode(NODE_ROOT_ID);
+            store.addNodeFromPreset(node, rootNode);
+            return store;
+        } catch (error) {
+            // A preset the renderer cannot compose must cost the picker nothing.
+            console.error('Element preview failed to compose', error);
+            return undefined;
+        }
+    }, [
+        node
+    ]);
+    const root = canvas == null ? void 0 : canvas.getNode(NODE_ROOT_ID);
+    // Hoisted above the early return — every hook this component calls has to
+    // run on every render, including the one where there is nothing to draw.
+    const siteValue = useMemo(()=>({
+            preview: true
+        }), []);
+    const linkValue = useMemo(()=>({
+            suppressNavigation: true
+        }), []);
+    const boxRef = useRef(null);
+    const contentRef = useRef(null);
+    const hostRef = useRef(null);
+    // Whether the composed tree drew anything a person can see.
+    const [hasInk, setHasInk] = useState(true);
+    const [scale, setScale] = useState(0);
+    // The box shrinks to the SCALED CONTENT rather than standing at its cap.
+    // Most elements are wide and short — a Nav Bar is 1280x70 — so scaling to
+    // the column width leaves a ~12px strip, and a fixed-height box renders it
+    // as a sliver marooned at the top of a white rectangle. Measured, not
+    // assumed: the content decides, the cap only stops a Footer running away.
+    const [contentHeight, setContentHeight] = useState(0);
+    useLayoutEffect(()=>{
+        const box = boxRef.current;
+        if (!box) return;
+        const fit = ()=>{
+            var _contentRef_current;
+            const width = box.clientWidth;
+            if (width) setScale(Math.min(MAX_SCALE, width / STAGE_WIDTH));
+            const natural = (_contentRef_current = contentRef.current) == null ? void 0 : _contentRef_current.scrollHeight;
+            if (natural) setContentHeight(natural);
+        };
+        fit();
+        if (typeof ResizeObserver === 'undefined') return;
+        const observer = new ResizeObserver(fit);
+        observer.observe(box);
+        if (contentRef.current) observer.observe(contentRef.current);
+        return ()=>observer.disconnect();
+    }, [
+        root
+    ]);
+    // The shadow root is attached by the ShadowRoot component's OWN effect,
+    // which runs after this component's — and the portal that fills it renders
+    // a tick later still. Checking for ink once, on layout, therefore read an
+    // empty (or absent) root every time and concluded "inked" by default.
+    // Re-checked on a deferred pass and then on mutation.
+    useEffect(()=>{
+        const host = hostRef.current;
+        if (!host) return;
+        let cancelled = false;
+        const check = ()=>{
+            if (!cancelled) setHasInk(subtreeHasInk(host));
+        };
+        const timers = [
+            setTimeout(check, 0),
+            setTimeout(check, 120)
+        ];
+        let observer;
+        if (host.shadowRoot && typeof MutationObserver !== 'undefined') {
+            observer = new MutationObserver(check);
+            observer.observe(host.shadowRoot, {
+                childList: true,
+                subtree: true,
+                characterData: true
+            });
+        }
+        return ()=>{
+            cancelled = true;
+            timers.forEach(clearTimeout);
+            observer == null ? void 0 : observer.disconnect();
+        };
+    }, [
+        root
+    ]);
+    if (!root) return null;
+    // Below MIN_HEIGHT there is nothing to look at; above `height` a tall
+    // element is clipped rather than allowed to grow the surface.
+    const scaledHeight = !hasInk ? NOTE_HEIGHT : contentHeight ? Math.max(MIN_HEIGHT, Math.min(height, Math.ceil(contentHeight * scale))) : height;
+    return /*#__PURE__*/ _jsxs(Box, {
+        ref: boxRef,
+        "data-testid": "element-preview",
+        "aria-hidden": true,
+        sx: {
+            position: 'relative',
+            width: 1,
+            height: scaledHeight,
+            overflow: 'hidden',
+            borderRadius: 1,
+            border: 1,
+            borderColor: 'divider',
+            backgroundColor: 'background.paper',
+            // Belt to the `inert` brace below: nothing in a picker preview is
+            // clickable, draggable or selectable.
+            pointerEvents: 'none',
+            userSelect: 'none'
+        },
+        children: [
+            !hasInk ? /*#__PURE__*/ _jsx(Box, {
+                "data-testid": "element-preview-empty",
+                sx: {
+                    position: 'absolute',
+                    inset: 0,
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    textAlign: 'center',
+                    p: 1.5,
+                    zIndex: 1,
+                    backgroundColor: 'background.paper'
+                },
+                children: /*#__PURE__*/ _jsx(Typography, {
+                    variant: "caption",
+                    color: "textSecondary",
+                    children: (requiredParents == null ? void 0 : requiredParents.length) ? `Renders inside ${requiredParents.join(' or ')} — nothing to show on its own.` : 'Nothing to show on its own.'
+                })
+            }) : null,
+            /*#__PURE__*/ _jsx(InertStage, {
+                children: /*#__PURE__*/ _jsx(Box, {
+                    ref: contentRef,
+                    sx: {
+                        width: STAGE_WIDTH,
+                        transform: `scale(${scale})`,
+                        transformOrigin: 'top left'
+                    },
+                    children: /*#__PURE__*/ _jsxs(PreviewShadowDom, {
+                        mode: "open",
+                        "data-preview-root": true,
+                        ref: hostRef,
+                        style: {
+                            display: 'block',
+                            width: '100%'
+                        },
+                        children: [
+                            /*#__PURE__*/ _jsx(PluginStyles, {
+                                scope: "shadow"
+                            }),
+                            /*#__PURE__*/ _jsx(SiteContext.Provider, {
+                                // No `hostId`: data-backed elements take their own placeholder
+                                // branch rather than fetching a site's real content into a
+                                // thumbnail. `preview` additionally 423s any write.
+                                value: siteValue,
+                                children: /*#__PURE__*/ _jsx(ScreenLinkContext.Provider, {
+                                    value: linkValue,
+                                    children: /*#__PURE__*/ _jsx(PreviewThemed, {
+                                        hostThemeDoc: hostThemeDoc,
+                                        children: /*#__PURE__*/ _jsx(AglynNodeRenderer, {
+                                            node: root
+                                        })
+                                    })
+                                })
+                            })
+                        ]
+                    })
+                })
+            })
+        ]
+    });
+});
+ElementPreview.displayName = 'ElementPreview';
+/**
+ * Whether the rendered preview drew anything a person can actually see.
+ *
+ * Text, or a media element. A preset with no child nodes composes a real but
+ * EMPTY element — `Toolbar Content` is a 64px transparent flex row — which
+ * renders correctly and looks identical to the bug where nothing rendered at
+ * all. Since one of those has already shipped here, the frame says which it
+ * is rather than leaving a blank box to be read as broken.
+ *
+ * Deliberately conservative and slightly imprecise: a lone Divider draws a
+ * 1px rule and is reported as nothing to show. At preview scale that is very
+ * nearly true, and the alternative — probing computed backgrounds and
+ * borders — guesses far more than it settles.
+ */ export function subtreeHasInk(host) {
+    const root = host == null ? void 0 : host.shadowRoot;
+    if (!root) return true;
+    if (root.querySelector('img, svg, video, canvas, picture')) return true;
+    // Text, but NOT the emotion `<style>` blocks the shadow cache injects
+    // alongside the render. `root.textContent` includes their CSS, so the
+    // first version of this check found `@media (min-width:600px)` in an
+    // empty Toolbar and reported it as content — the note never appeared for
+    // the one element that most needed it.
+    const walker = root.ownerDocument.createTreeWalker(root, NodeFilter.SHOW_TEXT);
+    let node = walker.nextNode();
+    while(node){
+        var _node_parentElement;
+        const tag = (_node_parentElement = node.parentElement) == null ? void 0 : _node_parentElement.tagName;
+        if (tag !== 'STYLE' && tag !== 'SCRIPT' && (node.nodeValue || '').trim()) {
+            return true;
+        }
+        node = walker.nextNode();
+    }
+    return false;
+}
+/**
+ * Marks the subtree `inert` through the DOM property rather than the JSX
+ * attribute, which React has spelled differently across versions. Nothing
+ * inside can take focus, be clicked, or be found by a page search.
+ */ function InertStage({ children }) {
+    const ref = useRef(null);
+    useEffect(()=>{
+        if (ref.current) ref.current.inert = true;
+    }, []);
+    return /*#__PURE__*/ _jsx("div", {
+        ref: ref,
+        children: children
+    });
+}
+// `MuiShadowDom` is a proxy whose members type loosely; the canvas viewport
+// reaches the same shape through `styled()`.
+const PreviewShadowDom = MuiShadowDom.div;
+/**
+ * The site theme, scoped to the shadow root so MUI's own styles — and any
+ * portal the element opens — stay inside the preview.
+ */ function PreviewThemed({ hostThemeDoc, children }) {
+    const shadowDom = useMuiShadowDomContext();
+    const theme = useAglynSiteTheme({
+        container: shadowDom,
+        theme: hostThemeDoc,
+        scheme: 'light'
+    });
+    return /*#__PURE__*/ _jsxs(ThemeProvider, {
+        theme: theme,
+        children: [
+            /*#__PURE__*/ _jsx(GlobalStyles, {
+                styles: {
+                    ':host': {
+                        all: 'initial'
+                    }
+                }
+            }),
+            /*#__PURE__*/ _jsx(Box, {
+                sx: _extends({}, theme.typography.body1, {
+                    color: 'text.primary',
+                    backgroundColor: 'background.default',
+                    width: 1
+                }),
+                children: children
+            })
+        ]
+    });
+}
+export default ElementPreview;
+
+//# sourceMappingURL=element-preview.component.js.map

package/src/lib/components/element-preview.component.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../libs/besigner/feature/designer/src/lib/components/element-preview.component.tsx"],"sourcesContent":["/**\n * @license\n * Copyright 2026 Aglyn LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *   http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport type * as Aglyn from '@aglyn/aglyn'\nimport {\n  aglyn,\n  CanvasManager,\n  NODE_ROOT_ID,\n  ScreenLinkContext,\n  SiteContext,\n} from '@aglyn/aglyn'\n// Deep import, NOT the barrel (AGL-2486) — see `plugin-styles-ui.tsx`.\nimport { PluginStyles } from '@aglyn/aglyn/plugin-manager/plugin-styles-ui'\nimport { AglynNodeRenderer, useAglynSiteTheme } from '@aglyn/aglyn-node-renderer'\nimport {\n  MuiShadowDom,\n  type MuiShadowRootProps,\n  useMuiShadowDomContext,\n} from '@aglyn/shared-ui-jsx'\nimport { ThemeProvider } from '@aglyn/shared-ui-theme'\nimport { Box, GlobalStyles, Typography } from '@mui/material'\nimport { observer } from 'mobx-react-lite'\nimport { useResolvedHostThemeDocument } from '../utils/active-host-theme'\nimport {\n  type HTMLAttributes,\n  type ReactNode,\n  useEffect,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\n\n/**\n * The width the preview composes at, before it is scaled down to fit.\n *\n * Elements are authored for a page, not for a thumbnail: a Hero centres a\n * headline across a viewport and a Footer lays out four columns. Composing at\n * a phone width and calling it a preview would show neither. So it renders at\n * a desktop width and the whole stage is scaled — the proportions the element\n * was designed for survive, just smaller.\n */\nconst STAGE_WIDTH = 1280\n\n/** Never blow a small element up past life size; only ever scale down. */\nconst MAX_SCALE = 1\n\n/** Below this a preview is a smudge; better to show a short empty band. */\nconst MIN_HEIGHT = 40\n\n/** Enough for the note to read as a sentence rather than a clipped line. */\nconst NOTE_HEIGHT = 76\n\nexport interface ElementPreviewProps {\n  /** The picker item — a preset in both drawers. */\n  node: any\n  /** Bounded height of the preview box in CSS pixels. */\n  height?: number\n  /**\n   * Parents this element must sit inside, from the schema. An element that\n   * only renders in context frequently draws nothing on its own, and the\n   * note says which parent it is waiting for.\n   */\n  requiredParents?: string[]\n}\n\n/**\n * Renders the preset's own nodes into an isolated stage, so a picker shows\n * what an element LOOKS like and not only what it is called (AGL-2486).\n *\n * Three things this must never do, each of which is a real hazard rather than\n * a hypothetical one:\n *\n * 1. **Touch `Aglyn.canvas`.** That singleton holds the document being\n *    edited; the console's Preview route calls `setNodes` on it, and doing\n *    the same here would blow away the user's screen to draw a thumbnail.\n *    Every preview gets its own `CanvasManager`, backed by the real app so\n *    component schemas still resolve — the pattern `useLayoutChromeCanvas`\n *    already uses for locked layout chrome.\n * 2. **Mutate anything from inside.** The stage is inert: pointer events are\n *    off, the subtree is marked `inert` so nothing in it is focusable or\n *    clickable, links are told not to navigate, and `SiteContext.preview`\n *    turns every write into a synthetic 423.\n * 3. **Escape its box.** The stage is scaled to fit and clipped, so a Footer\n *    cannot push Confirm off the dialog or stretch the docked column.\n *\n * Elements that cannot render standalone — a Cart, a Product grid, anything\n * reading site data — are NOT special-cased here. Deliberately: they already\n * render their own dashed \"Cart — lines render here\" placeholder when there\n * is no `hostId`, and this preview does not supply one. That placeholder is\n * the honest answer to \"what will I get\", and it means the picker needs no\n * second list of which elements are self-contained: each element already\n * says so itself.\n */\nexport const ElementPreview = observer((props: ElementPreviewProps) => {\n  const { node, height = 160, requiredParents } = props\n  // Context where it exists, register where the surface sits outside the\n  // page — see `active-host-theme.ts`. The preview must carry the SITE's\n  // brand wherever it is mounted.\n  const hostThemeDoc = useResolvedHostThemeDocument()\n\n  // A throwaway store per preset. Never the global canvas.\n  const canvas = useMemo(() => {\n    const data = node?.data\n    if (!data) return undefined\n    try {\n      const store = new CanvasManager(aglyn)\n      // Seed an empty root, then insert through the SAME path the drawer\n      // uses. Handing `preset.data` straight to `processNodesToDenormalized`\n      // looks equivalent and is not: it keys nodes by `$id` and maps each\n      // child to `i.$id`, and a preset's nodes carry `$id: null` until they\n      // are minted — so every child was filtered out and the preview drew an\n      // empty root. `addNodeFromPreset` runs `createDuplicateNode` first,\n      // which is what assigns them.\n      store.setNodes(\n        store.processNodesToDenormalized([\n          { $id: NODE_ROOT_ID, componentId: 'div', nodes: [] } as any,\n        ]),\n      )\n      const rootNode = store.getNode(NODE_ROOT_ID)\n      store.addNodeFromPreset(node, rootNode)\n      return store\n    } catch (error) {\n      // A preset the renderer cannot compose must cost the picker nothing.\n      console.error('Element preview failed to compose', error)\n      return undefined\n    }\n  }, [node])\n\n  const root = canvas?.getNode(NODE_ROOT_ID)\n\n  // Hoisted above the early return — every hook this component calls has to\n  // run on every render, including the one where there is nothing to draw.\n  const siteValue = useMemo(() => ({ preview: true }), [])\n  const linkValue = useMemo(() => ({ suppressNavigation: true }), [])\n\n  const boxRef = useRef<HTMLDivElement>(null)\n  const contentRef = useRef<HTMLDivElement>(null)\n  const hostRef = useRef<HTMLDivElement>(null)\n  // Whether the composed tree drew anything a person can see.\n  const [hasInk, setHasInk] = useState(true)\n  const [scale, setScale] = useState(0)\n  // The box shrinks to the SCALED CONTENT rather than standing at its cap.\n  // Most elements are wide and short — a Nav Bar is 1280x70 — so scaling to\n  // the column width leaves a ~12px strip, and a fixed-height box renders it\n  // as a sliver marooned at the top of a white rectangle. Measured, not\n  // assumed: the content decides, the cap only stops a Footer running away.\n  const [contentHeight, setContentHeight] = useState(0)\n\n  useLayoutEffect(() => {\n    const box = boxRef.current\n    if (!box) return\n    const fit = () => {\n      const width = box.clientWidth\n      if (width) setScale(Math.min(MAX_SCALE, width / STAGE_WIDTH))\n      const natural = contentRef.current?.scrollHeight\n      if (natural) setContentHeight(natural)\n    }\n    fit()\n    if (typeof ResizeObserver === 'undefined') return\n    const observer = new ResizeObserver(fit)\n    observer.observe(box)\n    if (contentRef.current) observer.observe(contentRef.current)\n    return () => observer.disconnect()\n  }, [root])\n\n  // The shadow root is attached by the ShadowRoot component's OWN effect,\n  // which runs after this component's — and the portal that fills it renders\n  // a tick later still. Checking for ink once, on layout, therefore read an\n  // empty (or absent) root every time and concluded \"inked\" by default.\n  // Re-checked on a deferred pass and then on mutation.\n  useEffect(() => {\n    const host = hostRef.current\n    if (!host) return\n    let cancelled = false\n    const check = () => {\n      if (!cancelled) setHasInk(subtreeHasInk(host))\n    }\n    const timers = [setTimeout(check, 0), setTimeout(check, 120)]\n    let observer: MutationObserver | undefined\n    if (host.shadowRoot && typeof MutationObserver !== 'undefined') {\n      observer = new MutationObserver(check)\n      observer.observe(host.shadowRoot, {\n        childList: true,\n        subtree: true,\n        characterData: true,\n      })\n    }\n    return () => {\n      cancelled = true\n      timers.forEach(clearTimeout)\n      observer?.disconnect()\n    }\n  }, [root])\n\n  if (!root) return null\n\n  // Below MIN_HEIGHT there is nothing to look at; above `height` a tall\n  // element is clipped rather than allowed to grow the surface.\n  const scaledHeight = !hasInk\n    ? NOTE_HEIGHT\n    : contentHeight\n      ? Math.max(MIN_HEIGHT, Math.min(height, Math.ceil(contentHeight * scale)))\n      : height\n\n  return (\n    <Box\n      ref={boxRef}\n      data-testid=\"element-preview\"\n      aria-hidden\n      sx={{\n        position: 'relative',\n        width: 1,\n        height: scaledHeight,\n        overflow: 'hidden',\n        borderRadius: 1,\n        border: 1,\n        borderColor: 'divider',\n        backgroundColor: 'background.paper',\n        // Belt to the `inert` brace below: nothing in a picker preview is\n        // clickable, draggable or selectable.\n        pointerEvents: 'none',\n        userSelect: 'none',\n      }}\n    >\n      {!hasInk ? (\n        <Box\n          data-testid=\"element-preview-empty\"\n          sx={{\n            position: 'absolute',\n            inset: 0,\n            display: 'flex',\n            alignItems: 'center',\n            justifyContent: 'center',\n            textAlign: 'center',\n            p: 1.5,\n            zIndex: 1,\n            backgroundColor: 'background.paper',\n          }}\n        >\n          <Typography variant=\"caption\" color=\"textSecondary\">\n            {requiredParents?.length\n              ? `Renders inside ${requiredParents.join(' or ')} — nothing to show on its own.`\n              : 'Nothing to show on its own.'}\n          </Typography>\n        </Box>\n      ) : null}\n      <InertStage>\n        <Box\n          ref={contentRef}\n          sx={{\n            width: STAGE_WIDTH,\n            transform: `scale(${scale})`,\n            transformOrigin: 'top left',\n          }}\n        >\n          {/* The host needs its own box. `:host { all: initial }` inside the\n              shadow root resets the host's display to `inline`, and an inline\n              box with no intrinsic size collapses the whole preview to\n              nothing — the canvas viewport never hits this because its host\n              is a styled component carrying width and min-height. Outer\n              styles beat `:host`, so setting it here is what wins. */}\n          {/* Open, unlike the canvas viewport's closed root: the canvas\n              closes it to keep the editor's own tooling from reaching in and\n              treating site DOM as editable, and none of that applies to an\n              inert thumbnail. Open is inspectable and testable. */}\n          <PreviewShadowDom\n            mode=\"open\"\n            data-preview-root\n            ref={hostRef}\n            style={{ display: 'block', width: '100%' }}\n          >\n            {/* Plugin stylesheets (AGL-2486). The same shadow-root miss as the\n                canvas viewport, and for the same reason — a thumbnail of a\n                plugin element that ignores the plugin's own CSS is a thumbnail\n                of something the site will never render. */}\n            <PluginStyles scope=\"shadow\" />\n            <SiteContext.Provider\n              // No `hostId`: data-backed elements take their own placeholder\n              // branch rather than fetching a site's real content into a\n              // thumbnail. `preview` additionally 423s any write.\n              value={siteValue}\n            >\n              <ScreenLinkContext.Provider\n                value={linkValue}\n              >\n                <PreviewThemed hostThemeDoc={hostThemeDoc}>\n                  <AglynNodeRenderer node={root} />\n                </PreviewThemed>\n              </ScreenLinkContext.Provider>\n            </SiteContext.Provider>\n          </PreviewShadowDom>\n        </Box>\n      </InertStage>\n    </Box>\n  )\n})\nElementPreview.displayName = 'ElementPreview'\n\n/**\n * Whether the rendered preview drew anything a person can actually see.\n *\n * Text, or a media element. A preset with no child nodes composes a real but\n * EMPTY element — `Toolbar Content` is a 64px transparent flex row — which\n * renders correctly and looks identical to the bug where nothing rendered at\n * all. Since one of those has already shipped here, the frame says which it\n * is rather than leaving a blank box to be read as broken.\n *\n * Deliberately conservative and slightly imprecise: a lone Divider draws a\n * 1px rule and is reported as nothing to show. At preview scale that is very\n * nearly true, and the alternative — probing computed backgrounds and\n * borders — guesses far more than it settles.\n */\nexport function subtreeHasInk(host: HTMLElement | null): boolean {\n  const root = host?.shadowRoot\n  if (!root) return true\n  if (root.querySelector('img, svg, video, canvas, picture')) return true\n  // Text, but NOT the emotion `<style>` blocks the shadow cache injects\n  // alongside the render. `root.textContent` includes their CSS, so the\n  // first version of this check found `@media (min-width:600px)` in an\n  // empty Toolbar and reported it as content — the note never appeared for\n  // the one element that most needed it.\n  const walker = root.ownerDocument.createTreeWalker(root, NodeFilter.SHOW_TEXT)\n  let node = walker.nextNode()\n  while (node) {\n    const tag = node.parentElement?.tagName\n    if (tag !== 'STYLE' && tag !== 'SCRIPT' && (node.nodeValue || '').trim()) {\n      return true\n    }\n    node = walker.nextNode()\n  }\n  return false\n}\n\n/**\n * Marks the subtree `inert` through the DOM property rather than the JSX\n * attribute, which React has spelled differently across versions. Nothing\n * inside can take focus, be clicked, or be found by a page search.\n */\nfunction InertStage({ children }: { children: ReactNode }) {\n  const ref = useRef<HTMLDivElement>(null)\n  useEffect(() => {\n    if (ref.current) (ref.current as any).inert = true\n  }, [])\n  return <div ref={ref}>{children}</div>\n}\n\n// `MuiShadowDom` is a proxy whose members type loosely; the canvas viewport\n// reaches the same shape through `styled()`.\nconst PreviewShadowDom = MuiShadowDom.div as unknown as React.FC<\n  HTMLAttributes<HTMLDivElement> &\n    MuiShadowRootProps & { ref?: React.Ref<HTMLDivElement> }\n>\n\n/**\n * The site theme, scoped to the shadow root so MUI's own styles — and any\n * portal the element opens — stay inside the preview.\n */\nfunction PreviewThemed({ hostThemeDoc, children }: any) {\n  const shadowDom = useMuiShadowDomContext()\n  const theme = useAglynSiteTheme({\n    container: shadowDom,\n    theme: hostThemeDoc,\n    scheme: 'light',\n  })\n  return (\n    <ThemeProvider theme={theme}>\n      {/* `:host { all: initial }` cuts the console's inherited styles, which\n          means the body-level baseline never arrives either — so the stage\n          carries it, exactly as the canvas viewport does. */}\n      <GlobalStyles styles={{ ':host': { all: 'initial' } }} />\n      <Box\n        sx={{\n          ...(theme.typography as any).body1,\n          color: 'text.primary',\n          backgroundColor: 'background.default',\n          width: 1,\n        }}\n      >\n        {children}\n      </Box>\n    </ThemeProvider>\n  )\n}\n\nexport default ElementPreview\n"],"names":["aglyn","CanvasManager","NODE_ROOT_ID","ScreenLinkContext","SiteContext","PluginStyles","AglynNodeRenderer","useAglynSiteTheme","MuiShadowDom","useMuiShadowDomContext","ThemeProvider","Box","GlobalStyles","Typography","observer","useResolvedHostThemeDocument","useEffect","useLayoutEffect","useMemo","useRef","useState","STAGE_WIDTH","MAX_SCALE","MIN_HEIGHT","NOTE_HEIGHT","ElementPreview","props","node","height","requiredParents","hostThemeDoc","canvas","data","undefined","store","setNodes","processNodesToDenormalized","$id","componentId","nodes","rootNode","getNode","addNodeFromPreset","error","console","root","siteValue","preview","linkValue","suppressNavigation","boxRef","contentRef","hostRef","hasInk","setHasInk","scale","setScale","contentHeight","setContentHeight","box","current","fit","width","clientWidth","Math","min","natural","scrollHeight","ResizeObserver","observe","disconnect","host","cancelled","check","subtreeHasInk","timers","setTimeout","shadowRoot","MutationObserver","childList","subtree","characterData","forEach","clearTimeout","scaledHeight","max","ceil","ref","data-testid","aria-hidden","sx","position","overflow","borderRadius","border","borderColor","backgroundColor","pointerEvents","userSelect","inset","display","alignItems","justifyContent","textAlign","p","zIndex","variant","color","length","join","InertStage","transform","transformOrigin","PreviewShadowDom","mode","data-preview-root","style","scope","Provider","value","PreviewThemed","displayName","querySelector","walker","ownerDocument","createTreeWalker","NodeFilter","SHOW_TEXT","nextNode","tag","parentElement","tagName","nodeValue","trim","children","inert","div","shadowDom","theme","container","scheme","styles","all","typography","body1"],"mappings":"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"}