@aglyn/besigner-ui 1.0.0-beta.143

package/src/lib/components/viewport-frame.component.js

@@ -0,0 +1,332 @@
+import { _ as _extends } from "@swc/helpers/_/_extends";
+import { _ as _object_without_properties_loose } from "@swc/helpers/_/_object_without_properties_loose";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * @license
+ * Copyright 2024 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 { canvas, LAYOUT_SLOT_COMPONENT_ID, NODE_ROOT_ID } 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, Leaf, LeafSxTransformContext } from "@aglyn/aglyn-node-renderer";
+import * as Besigner from "@aglyn/besigner";
+import { useAglynSiteTheme } from "@aglyn/aglyn-node-renderer";
+import { MuiShadowDom, useMuiShadowDomContext } from "@aglyn/shared-ui-jsx";
+import { styled, ThemeProvider, useHostThemeDocument } from "@aglyn/shared-ui-theme";
+import { Box, CssBaseline, GlobalStyles } from "@mui/material";
+import { observer } from "mobx-react-lite";
+// import {MuiShadowDom} from '@aglyn/shared-ui-jsx'
+import { forwardRef, useCallback, useMemo } from "react";
+import { CanvasHostTokensProvider } from "../contexts/canvas-host-tokens-context.js";
+import CanvasRevealContext, { CanvasMutedClassesContext } from "../contexts/canvas-reveal-context.js";
+import { useLayoutChromeContext } from "../contexts/layout-chrome-context.js";
+import useAglynBesignerFlag from "../hooks/use-aglyn-besigner-flag.js";
+import { createDevicePinnedTheme, devicePreviewWidth, resolveSxForDeviceWidth } from "../utils/device-preview-styles.js";
+import { applyMutedStyles } from "../utils/muted-styles.js";
+import { hoistStateSx } from "../utils/state-sx.js";
+import CanvasDropIndicator from "./dnd/canvas-drop-indicator.js";
+import InlineMarkdownEditorComponent from "./inline-markdown-editor.component.js";
+import InlineTextEditorComponent from "./inline-text-editor.component.js";
+import NodeLeaf, { MediaFactsLeaf } from "./node-leaf.js";
+import NodeOverlay from "./node-overlay.js";
+const ViewportFrame = styled('div', {
+    name: 'AglynViewportFrame'
+})(({ theme })=>{
+    // In CSS vars mode, theme.palette.* is pinned to the static light-mode values.
+    // Use (theme.vars || theme) so these resolve to CSS custom-property references
+    // that update automatically when setMode() applies the .dark class.
+    const t = theme;
+    const tv = t.vars || theme;
+    return {
+        flexGrow: 1,
+        minHeight: '100%',
+        width: '100%',
+        background: tv.palette.background.paper,
+        borderColor: tv.palette.divider,
+        borderWidth: `0.3em`,
+        borderStyle: 'solid',
+        display: 'flex'
+    };
+});
+ViewportFrame.displayName = 'ViewportFrame';
+const SiteShadowDom = styled(MuiShadowDom.div, {
+    name: 'AglynViewportShadowDom'
+})(({ theme })=>({
+        minHeight: '100%',
+        width: '100%',
+        /**
+   * Positioning hack
+   * @see https://stackoverflow.com/a/70422489/16134372
+   */ transform: 'scale(1)'
+    }));
+SiteShadowDom.displayName = 'SiteShadowDom';
+const FramePaper = styled('div', {
+    name: 'AglynFramePaper'
+})(({ theme })=>{
+    const tv = theme.vars || theme;
+    return _extends({}, theme.typography.body1, {
+        color: tv.palette.text.primary,
+        backgroundColor: tv.palette.background.default,
+        colorScheme: theme.palette.mode,
+        WebkitFontSmoothing: 'antialiased',
+        MozOsxFontSmoothing: 'grayscale',
+        height: '100%',
+        width: '100%',
+        [`> [data-aglyn="leaf\\:_@_"]`]: {
+            minHeight: '100%',
+            width: '100%'
+        }
+    });
+});
+FramePaper.displayName = 'FramePaper';
+/**
+ * What `CssBaseline` gives a published page and a closed shadow root never
+ * inherits (AGL-3146).
+ *
+ * `:host { all: initial }` cuts inheritance at the artboard, so the canvas
+ * carries the document baseline itself — `FramePaper` takes the body's
+ * typography, color and background, and the structural half belongs here,
+ * because `box-sizing` is inherited from the root element rather than set on
+ * each one. Without it every element on the canvas is `content-box` while the
+ * same element on the site is `border-box`, so a band that sets a height AND
+ * padding measures the padding twice in the editor and once on the page.
+ *
+ * The same pair CssBaseline emits, for the same reason: declared on the host
+ * and inherited by everything under it, so an author's own `box-sizing` still
+ * wins wherever they set one.
+ */ export const VIEWPORT_BASELINE_STYLES = {
+    ':host': {
+        all: 'initial',
+        boxSizing: 'border-box'
+    },
+    '*, *::before, *::after': {
+        boxSizing: 'inherit'
+    }
+};
+const ViewportGlobalStyles = /*#__PURE__*/ _jsx(GlobalStyles, {
+    styles: _extends({}, VIEWPORT_BASELINE_STYLES, {
+        // Canvas-sense for aglyn-hidden elements (AGL-592): start closed
+        // like the live site, and stay closed unless the leaf itself is
+        // flagged as revealed. `node-leaf` decides that from the reveal
+        // toggle and the selection and stamps the flag on the hidden
+        // element — the same element this rule hides — so no wrapper a
+        // component renders around its children can separate the two.
+        // Expressed as a :not() guard (not hide-then-revert) so a revealed
+        // panel keeps its natural display. Injected into the closed shadow
+        // root via the shadow-scoped emotion cache — the live tenant is
+        // untouched.
+        '.aglyn-hidden:not([data-aglyn-revealed])': {
+            display: 'none !important'
+        }
+    })
+});
+const ThemedElementContainer = ({ children })=>{
+    var _hostTheme_breakpoints;
+    const shadowDom = useMuiShadowDomContext();
+    const hostThemeDoc = useHostThemeDocument();
+    const [canvasScheme] = useAglynBesignerFlag('canvasScheme');
+    const hostTheme = useAglynSiteTheme({
+        container: shadowDom,
+        theme: hostThemeDoc,
+        scheme: canvasScheme
+    });
+    // Artboard device preview (AGL-581): media queries evaluate against
+    // the browser viewport, never the artboard, so a selected device pins
+    // the canvas subtree instead — a theme whose breakpoint helpers are
+    // forced for the device width (responsive sx values, Stack/Grid
+    // props, component styles), plus a per-Leaf sx transform that
+    // resolves width media keys (visibility bands, custom CSS) at that
+    // width. Fluid Responsive leaves both untouched, and the published
+    // tenant never mounts any of this.
+    const [devicePreview] = useAglynBesignerFlag('devicePreview');
+    const deviceWidth = devicePreviewWidth(devicePreview, (_hostTheme_breakpoints = hostTheme.breakpoints) == null ? void 0 : _hostTheme_breakpoints.values);
+    const canvasTheme = useMemo(()=>deviceWidth == null ? hostTheme : createDevicePinnedTheme(hostTheme, deviceWidth), [
+        hostTheme,
+        deviceWidth
+    ]);
+    // Interaction-state hold (AGL-2486): while the Styles panel is editing a
+    // state slice, the SELECTED element renders as if it were in that state —
+    // you cannot hover an element from a side panel, so a state you cannot see
+    // is a state you cannot design. Composed into the SAME canvas-only
+    // transform the device-width pin uses, so there is still exactly one
+    // substitution path and the tenant (which never mounts this provider) is
+    // untouched. The hoist runs FIRST so a media key inside the slice reaches
+    // the width transform at the top level.
+    const [heldState] = useAglynBesignerFlag('heldState');
+    const [heldStateNodeId] = useAglynBesignerFlag('heldStateNodeId');
+    // Declarations switched off for comparison (AGL-2486). Third rider on the
+    // same canvas-only transform, and it runs FIRST: a muted base declaration
+    // has to be gone before a held state's slice is folded over it, and a muted
+    // slice declaration has to leave the slice so the base shows through.
+    const [mutedStyles] = useAglynBesignerFlag('mutedStyles');
+    const sxTransform = useMemo(()=>{
+        const held = heldState && heldStateNodeId ? heldState : null;
+        const muted = (mutedStyles == null ? void 0 : mutedStyles.length) ? mutedStyles : null;
+        if (deviceWidth == null && !held && !muted) return undefined;
+        return (sx, nodeId)=>{
+            const unmuted = muted ? applyMutedStyles(sx, nodeId, muted) : sx;
+            const scoped = held && nodeId === heldStateNodeId ? hoistStateSx(unmuted, held) : unmuted;
+            return deviceWidth == null ? scoped : resolveSxForDeviceWidth(scoped, deviceWidth);
+        };
+    }, [
+        deviceWidth,
+        heldState,
+        heldStateNodeId,
+        mutedStyles
+    ]);
+    // Elements the author opened up for designing (AGL-592). Subscribed once
+    // here, exactly like the held state above, and handed down by context so a
+    // canvas of several hundred leaves carries one subscription rather than one
+    // per element.
+    const [revealedNodeIds] = useAglynBesignerFlag('revealedNodeIds');
+    // Classes switched off for comparison (AGL-2486), subscribed the same way.
+    const [mutedClasses] = useAglynBesignerFlag('mutedClasses');
+    return /*#__PURE__*/ _jsxs(ThemeProvider, {
+        theme: canvasTheme,
+        children: [
+            /*#__PURE__*/ _jsx(CssBaseline, {}),
+            /*#__PURE__*/ _jsx(CanvasRevealContext.Provider, {
+                value: revealedNodeIds,
+                children: /*#__PURE__*/ _jsx(CanvasMutedClassesContext.Provider, {
+                    value: mutedClasses,
+                    children: /*#__PURE__*/ _jsx(LeafSxTransformContext.Provider, {
+                        value: sxTransform,
+                        children: /*#__PURE__*/ _jsx(CanvasHostTokensProvider, {
+                            children: children
+                        })
+                    })
+                })
+            })
+        ]
+    });
+};
+const EditableScreenRenderer = observer(()=>/*#__PURE__*/ _jsx(AglynNodeRenderer, {
+        node: canvas.getNode(NODE_ROOT_ID),
+        LeafComponent: NodeLeaf
+    }));
+EditableScreenRenderer.displayName = 'EditableScreenRenderer';
+/**
+ * Leaf for the read-only layout chrome tree: the LayoutSlot renders the
+ * editable screen canvas after any chrome the designer left inside the slot
+ * (matching composition semantics); everything else renders with the
+ * production Leaf, which carries none of the designer's selection/dnd
+ * behavior — the chrome is locked by construction.
+ */ const LayoutChromeLeaf = /*#__PURE__*/ forwardRef((props, ref)=>{
+    const { node, children } = props, rest = _object_without_properties_loose(props, [
+        "node",
+        "children"
+    ]);
+    if ((node == null ? void 0 : node.componentId) === LAYOUT_SLOT_COMPONENT_ID) {
+        return /*#__PURE__*/ _jsxs(Leaf, _extends({
+            ref: ref,
+            node: node
+        }, rest, {
+            children: [
+                children,
+                /*#__PURE__*/ _jsx(EditableScreenRenderer, {})
+            ]
+        }));
+    }
+    // An image or film in the chrome shows its DAM asset's current facts, as the
+    // published page composes it (AGL-2838, AGL-2856).
+    return /*#__PURE__*/ _jsx(MediaFactsLeaf, _extends({
+        ref: ref,
+        node: node
+    }, rest, {
+        children: children
+    }));
+});
+LayoutChromeLeaf.displayName = 'LayoutChromeLeaf';
+const SiteContainer = observer(/*#__PURE__*/ forwardRef((props, ref)=>{
+    const {} = props, rest = _extends({}, props);
+    const { chromeCanvas } = useLayoutChromeContext();
+    const chromeRoot = chromeCanvas == null ? void 0 : chromeCanvas.getNode(NODE_ROOT_ID);
+    return /*#__PURE__*/ _jsx(SiteShadowDom, _extends({
+        ref: ref,
+        "data-aglyn": 'viewport:dom',
+        mode: "closed"
+    }, rest, {
+        children: /*#__PURE__*/ _jsxs(_Fragment, {
+            children: [
+                ViewportGlobalStyles,
+                /*#__PURE__*/ _jsx(PluginStyles, {
+                    scope: "shadow"
+                }),
+                /*#__PURE__*/ _jsx(ThemedElementContainer, {
+                    children: /*#__PURE__*/ _jsx(FramePaper, {
+                        children: chromeRoot ? /*#__PURE__*/ _jsx(AglynNodeRenderer, {
+                            node: chromeRoot,
+                            LeafComponent: LayoutChromeLeaf
+                        }) : /*#__PURE__*/ _jsx(EditableScreenRenderer, {})
+                    })
+                })
+            ]
+        })
+    }));
+}));
+const Overlays = /*#__PURE__*/ forwardRef((props, ref)=>{
+    const {} = props, rest = _extends({}, props);
+    return /*#__PURE__*/ _jsxs(Box, _extends({
+        ref: ref,
+        "data-aglyn": "viewport:popover",
+        sx: {
+            // position: 'relative',
+            // Above the canvas content, below the designer chrome (app bars and
+            // breadcrumbs sit at zIndex.appBar) within the workspace context.
+            zIndex: 10
+        }
+    }, rest, {
+        children: [
+            /*#__PURE__*/ _jsx(NodeOverlay, {
+                "data-aglyn": "overlay:hovered",
+                variant: "hovered"
+            }),
+            /*#__PURE__*/ _jsx(NodeOverlay, {
+                "data-aglyn": "overlay:selected",
+                variant: "selected"
+            }),
+            /*#__PURE__*/ _jsx(CanvasDropIndicator, {}),
+            /*#__PURE__*/ _jsx(InlineTextEditorComponent, {}),
+            /*#__PURE__*/ _jsx(InlineMarkdownEditorComponent, {})
+        ]
+    }));
+});
+export const ViewportFrameComponent = /*#__PURE__*/ forwardRef((props, ref)=>{
+    const { onMouseLeave } = props, rest = _object_without_properties_loose(props, [
+        "onMouseLeave"
+    ]);
+    const handlePointerLeave = useCallback((e)=>{
+        // e.stopPropagation()
+        Besigner.focus.clearHover();
+        onMouseLeave && onMouseLeave(e);
+    }, [
+        onMouseLeave
+    ]);
+    return /*#__PURE__*/ _jsxs(ViewportFrame, _extends({
+        ref: ref,
+        "data-aglyn": "viewport:frame",
+        onMouseLeave: handlePointerLeave,
+        onPointerLeave: handlePointerLeave
+    }, rest, {
+        children: [
+            /*#__PURE__*/ _jsx(SiteContainer, {}),
+            /*#__PURE__*/ _jsx(Overlays, {})
+        ]
+    }));
+});
+ViewportFrameComponent.displayName = 'ViewportFrameComponent';
+ViewportFrameComponent.aglyn = true;
+export default ViewportFrameComponent;
+
+//# sourceMappingURL=viewport-frame.component.js.map

package/src/lib/components/viewport-frame.component.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../libs/besigner/feature/designer/src/lib/components/viewport-frame.component.tsx"],"sourcesContent":["/**\n * @license\n * Copyright 2024 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 { canvas, LAYOUT_SLOT_COMPONENT_ID, NODE_ROOT_ID } 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 {\n  AglynNodeRenderer,\n  Leaf,\n  LeafSxTransformContext,\n} from '@aglyn/aglyn-node-renderer'\nimport * as Besigner from '@aglyn/besigner'\nimport { useAglynSiteTheme } from '@aglyn/aglyn-node-renderer'\nimport {\n  MuiShadowDom,\n  type MuiShadowRootProps,\n  useMuiShadowDomContext,\n} from '@aglyn/shared-ui-jsx'\nimport {\n  styled,\n  ThemeProvider,\n  useHostThemeDocument,\n} from '@aglyn/shared-ui-theme'\nimport { Box, type BoxProps, CssBaseline, GlobalStyles } from '@mui/material'\nimport { observer } from 'mobx-react-lite'\n// import {MuiShadowDom} from '@aglyn/shared-ui-jsx'\nimport {\n  type ComponentProps,\n  forwardRef,\n  HTMLAttributes,\n  useCallback,\n  useMemo,\n} from 'react'\nimport { CanvasHostTokensProvider } from '../contexts/canvas-host-tokens-context'\nimport CanvasRevealContext, {\n  CanvasMutedClassesContext,\n} from '../contexts/canvas-reveal-context'\nimport { useLayoutChromeContext } from '../contexts/layout-chrome-context'\nimport useAglynBesignerFlag from '../hooks/use-aglyn-besigner-flag'\nimport {\n  createDevicePinnedTheme,\n  devicePreviewWidth,\n  resolveSxForDeviceWidth,\n} from '../utils/device-preview-styles'\nimport { applyMutedStyles } from '../utils/muted-styles'\nimport { hoistStateSx } from '../utils/state-sx'\nimport CanvasDropIndicator from './dnd/canvas-drop-indicator'\nimport InlineMarkdownEditorComponent from './inline-markdown-editor.component'\nimport InlineTextEditorComponent from './inline-text-editor.component'\nimport NodeLeaf, { MediaFactsLeaf } from './node-leaf'\nimport NodeOverlay from './node-overlay'\n\nconst ViewportFrame = styled('div', {\n  name: 'AglynViewportFrame',\n})(({ theme }) => {\n  // In CSS vars mode, theme.palette.* is pinned to the static light-mode values.\n  // Use (theme.vars || theme) so these resolve to CSS custom-property references\n  // that update automatically when setMode() applies the .dark class.\n  const t = theme as any\n  const tv = t.vars || theme\n  return {\n    flexGrow: 1,\n    minHeight: '100%',\n    width: '100%',\n    background: tv.palette.background.paper,\n    borderColor: tv.palette.divider,\n    borderWidth: `0.3em`,\n    borderStyle: 'solid',\n    display: 'flex',\n    // position: 'relative',\n  }\n})\nViewportFrame.displayName = 'ViewportFrame'\n\ntype SiteShadowDomProps = HTMLAttributes<HTMLDivElement> & MuiShadowRootProps\nconst SiteShadowDom = styled(MuiShadowDom.div, {\n  name: 'AglynViewportShadowDom',\n})<SiteShadowDomProps>(({ theme }) => ({\n  minHeight: '100%',\n  width: '100%',\n  /**\n   * Positioning hack\n   * @see https://stackoverflow.com/a/70422489/16134372\n   */\n  transform: 'scale(1)',\n}))\nSiteShadowDom.displayName = 'SiteShadowDom'\nconst FramePaper = styled('div', {\n  name: 'AglynFramePaper',\n})<SiteShadowDomProps>(({ theme }) => {\n  const tv = (theme as any).vars || theme\n  return {\n    // CssBaseline styles the document body, which a closed shadow root never\n    // sees (and `:host { all: initial }` resets inheritance), so this surface\n    // carries the body-level baseline itself.\n    ...theme.typography.body1,\n    color: tv.palette.text.primary,\n    backgroundColor: tv.palette.background.default,\n    colorScheme: theme.palette.mode,\n    WebkitFontSmoothing: 'antialiased',\n    MozOsxFontSmoothing: 'grayscale',\n    height: '100%',\n    width: '100%',\n    [`> [data-aglyn=\"leaf\\\\:_@_\"]`]: {\n      minHeight: '100%',\n      width: '100%',\n    },\n  }\n})\nFramePaper.displayName = 'FramePaper'\n\n/**\n * What `CssBaseline` gives a published page and a closed shadow root never\n * inherits (AGL-3146).\n *\n * `:host { all: initial }` cuts inheritance at the artboard, so the canvas\n * carries the document baseline itself — `FramePaper` takes the body's\n * typography, color and background, and the structural half belongs here,\n * because `box-sizing` is inherited from the root element rather than set on\n * each one. Without it every element on the canvas is `content-box` while the\n * same element on the site is `border-box`, so a band that sets a height AND\n * padding measures the padding twice in the editor and once on the page.\n *\n * The same pair CssBaseline emits, for the same reason: declared on the host\n * and inherited by everything under it, so an author's own `box-sizing` still\n * wins wherever they set one.\n */\nexport const VIEWPORT_BASELINE_STYLES = {\n  ':host': {\n    all: 'initial',\n    boxSizing: 'border-box',\n  },\n  '*, *::before, *::after': {\n    boxSizing: 'inherit',\n  },\n} as const\n\nconst ViewportGlobalStyles = (\n  <GlobalStyles\n    styles={{\n      ...VIEWPORT_BASELINE_STYLES,\n      // Canvas-sense for aglyn-hidden elements (AGL-592): start closed\n      // like the live site, and stay closed unless the leaf itself is\n      // flagged as revealed. `node-leaf` decides that from the reveal\n      // toggle and the selection and stamps the flag on the hidden\n      // element — the same element this rule hides — so no wrapper a\n      // component renders around its children can separate the two.\n      // Expressed as a :not() guard (not hide-then-revert) so a revealed\n      // panel keeps its natural display. Injected into the closed shadow\n      // root via the shadow-scoped emotion cache — the live tenant is\n      // untouched.\n      '.aglyn-hidden:not([data-aglyn-revealed])': {\n        display: 'none !important',\n      },\n    }}\n  />\n)\nconst ThemedElementContainer = ({ children }) => {\n  const shadowDom = useMuiShadowDomContext()\n  const hostThemeDoc = useHostThemeDocument()\n  const [canvasScheme] = useAglynBesignerFlag('canvasScheme')\n  const hostTheme = useAglynSiteTheme({\n    container: shadowDom,\n    theme: hostThemeDoc,\n    scheme: canvasScheme,\n  })\n  // Artboard device preview (AGL-581): media queries evaluate against\n  // the browser viewport, never the artboard, so a selected device pins\n  // the canvas subtree instead — a theme whose breakpoint helpers are\n  // forced for the device width (responsive sx values, Stack/Grid\n  // props, component styles), plus a per-Leaf sx transform that\n  // resolves width media keys (visibility bands, custom CSS) at that\n  // width. Fluid Responsive leaves both untouched, and the published\n  // tenant never mounts any of this.\n  const [devicePreview] = useAglynBesignerFlag('devicePreview')\n  const deviceWidth = devicePreviewWidth(\n    devicePreview,\n    hostTheme.breakpoints?.values,\n  )\n  const canvasTheme = useMemo(\n    () =>\n      deviceWidth == null\n        ? hostTheme\n        : createDevicePinnedTheme(hostTheme, deviceWidth),\n    [hostTheme, deviceWidth],\n  )\n  // Interaction-state hold (AGL-2486): while the Styles panel is editing a\n  // state slice, the SELECTED element renders as if it were in that state —\n  // you cannot hover an element from a side panel, so a state you cannot see\n  // is a state you cannot design. Composed into the SAME canvas-only\n  // transform the device-width pin uses, so there is still exactly one\n  // substitution path and the tenant (which never mounts this provider) is\n  // untouched. The hoist runs FIRST so a media key inside the slice reaches\n  // the width transform at the top level.\n  const [heldState] = useAglynBesignerFlag('heldState')\n  const [heldStateNodeId] = useAglynBesignerFlag('heldStateNodeId')\n  // Declarations switched off for comparison (AGL-2486). Third rider on the\n  // same canvas-only transform, and it runs FIRST: a muted base declaration\n  // has to be gone before a held state's slice is folded over it, and a muted\n  // slice declaration has to leave the slice so the base shows through.\n  const [mutedStyles] = useAglynBesignerFlag('mutedStyles')\n  const sxTransform = useMemo(() => {\n    const held = heldState && heldStateNodeId ? heldState : null\n    const muted = mutedStyles?.length ? mutedStyles : null\n    if (deviceWidth == null && !held && !muted) return undefined\n    return (sx: unknown, nodeId?: string) => {\n      const unmuted = muted ? applyMutedStyles(sx, nodeId, muted) : sx\n      const scoped =\n        held && nodeId === heldStateNodeId\n          ? hoistStateSx(unmuted, held)\n          : unmuted\n      return deviceWidth == null\n        ? scoped\n        : resolveSxForDeviceWidth(scoped, deviceWidth)\n    }\n  }, [deviceWidth, heldState, heldStateNodeId, mutedStyles])\n  // Elements the author opened up for designing (AGL-592). Subscribed once\n  // here, exactly like the held state above, and handed down by context so a\n  // canvas of several hundred leaves carries one subscription rather than one\n  // per element.\n  const [revealedNodeIds] = useAglynBesignerFlag('revealedNodeIds')\n  // Classes switched off for comparison (AGL-2486), subscribed the same way.\n  const [mutedClasses] = useAglynBesignerFlag('mutedClasses')\n  return (\n    <ThemeProvider theme={canvasTheme}>\n      <CssBaseline />\n      <CanvasRevealContext.Provider value={revealedNodeIds}>\n        <CanvasMutedClassesContext.Provider value={mutedClasses}>\n          <LeafSxTransformContext.Provider value={sxTransform}>\n            {/* The site whose host variables every leaf fills in (AGL-2881),\n                decided once for the editable document and its chrome alike. */}\n            <CanvasHostTokensProvider>{children}</CanvasHostTokensProvider>\n          </LeafSxTransformContext.Provider>\n        </CanvasMutedClassesContext.Provider>\n      </CanvasRevealContext.Provider>\n    </ThemeProvider>\n  )\n}\n\nconst EditableScreenRenderer = observer(() => (\n  <AglynNodeRenderer\n    node={canvas.getNode(NODE_ROOT_ID)!}\n    LeafComponent={NodeLeaf}\n  />\n))\nEditableScreenRenderer.displayName = 'EditableScreenRenderer'\n\n/**\n * Leaf for the read-only layout chrome tree: the LayoutSlot renders the\n * editable screen canvas after any chrome the designer left inside the slot\n * (matching composition semantics); everything else renders with the\n * production Leaf, which carries none of the designer's selection/dnd\n * behavior — the chrome is locked by construction.\n */\nconst LayoutChromeLeaf = forwardRef<any, any>((props, ref) => {\n  const { node, children, ...rest } = props\n  if (node?.componentId === LAYOUT_SLOT_COMPONENT_ID) {\n    return (\n      <Leaf ref={ref} node={node} {...rest}>\n        {children}\n        <EditableScreenRenderer />\n      </Leaf>\n    )\n  }\n  // An image or film in the chrome shows its DAM asset's current facts, as the\n  // published page composes it (AGL-2838, AGL-2856).\n  return (\n    <MediaFactsLeaf ref={ref} node={node} {...rest}>\n      {children}\n    </MediaFactsLeaf>\n  )\n})\nLayoutChromeLeaf.displayName = 'LayoutChromeLeaf'\n\nconst SiteContainer = observer(\n  forwardRef<any, SiteShadowDomProps>((props, ref) => {\n    const { ...rest } = props\n    const { chromeCanvas } = useLayoutChromeContext()\n    const chromeRoot = chromeCanvas?.getNode(NODE_ROOT_ID)\n    return (\n      <SiteShadowDom\n        ref={ref}\n        data-aglyn={'viewport:dom'}\n        mode=\"closed\"\n        {...rest}\n      >\n        <>\n          {ViewportGlobalStyles}\n          {/* Plugin stylesheets (AGL-2486). THIS is the gap `8dc718ed4` named\n              and left open: a plugin's raw CSS goes into `document.head`,\n              which a `mode: 'closed'` shadow root with `:host { all: initial }`\n              and no `adoptedStyleSheets` never sees. Measured — the identical\n              rule that beats every `@layer mui` declaration on the published\n              page had literally NO effect on this canvas. Rendered here as a\n              plain `<style>` child, so it lands in the shadow root in the same\n              unlayered slot it occupies on the published document; `shadow`\n              scope is what pulls in the MIRRORED sheets a bundle injected into\n              the console's own head, which is the copy that never crossed. */}\n          <PluginStyles scope=\"shadow\" />\n          <ThemedElementContainer>\n            <FramePaper>\n              {chromeRoot ? (\n                <AglynNodeRenderer\n                  node={chromeRoot}\n                  LeafComponent={LayoutChromeLeaf}\n                />\n              ) : (\n                <EditableScreenRenderer />\n              )}\n            </FramePaper>\n          </ThemedElementContainer>\n        </>\n      </SiteShadowDom>\n    )\n  }),\n)\n\nconst Overlays = forwardRef<any, Partial<BoxProps>>((props, ref) => {\n  const { ...rest } = props\n\n  return (\n    <Box\n      ref={ref}\n      data-aglyn=\"viewport:popover\"\n      sx={{\n        // position: 'relative',\n        // Above the canvas content, below the designer chrome (app bars and\n        // breadcrumbs sit at zIndex.appBar) within the workspace context.\n        zIndex: 10,\n      }}\n      {...rest}\n    >\n      {/* Document order is the only thing separating these two. Each\n          overlay root is a fixed-position popper and therefore its own\n          stacking context, so a z-index declared inside one cannot lift it\n          past the other — the roots paint in the order they are rendered.\n          The overlay carrying the action strip goes LAST so its buttons stay\n          above the other overlay's outline, which draws the SELECTED\n          treatment whenever the pointer is resting on the selected node,\n          i.e. whenever someone is reaching for those buttons. The canvas\n          chrome rendered after them keeps painting above both. */}\n      <NodeOverlay data-aglyn=\"overlay:hovered\" variant=\"hovered\" />\n      <NodeOverlay data-aglyn=\"overlay:selected\" variant=\"selected\" />\n      <CanvasDropIndicator />\n      <InlineTextEditorComponent />\n      <InlineMarkdownEditorComponent />\n    </Box>\n  )\n})\n\nexport interface ViewportFrameComponentProps extends ComponentProps<\n  typeof ViewportFrame\n> {}\n\nexport const ViewportFrameComponent = forwardRef<\n  any,\n  ViewportFrameComponentProps\n>((props, ref) => {\n  const { onMouseLeave, ...rest } = props\n\n  const handlePointerLeave = useCallback(\n    (e) => {\n      // e.stopPropagation()\n      Besigner.focus.clearHover()\n      onMouseLeave && onMouseLeave(e)\n    },\n    [onMouseLeave],\n  )\n\n  return (\n    <ViewportFrame\n      ref={ref}\n      data-aglyn=\"viewport:frame\"\n      onMouseLeave={handlePointerLeave}\n      onPointerLeave={handlePointerLeave}\n      {...rest}\n    >\n      <SiteContainer />\n      <Overlays />\n    </ViewportFrame>\n  )\n})\n\nViewportFrameComponent.displayName = 'ViewportFrameComponent'\nViewportFrameComponent.aglyn = true\n\nexport default ViewportFrameComponent\n"],"names":["canvas","LAYOUT_SLOT_COMPONENT_ID","NODE_ROOT_ID","PluginStyles","AglynNodeRenderer","Leaf","LeafSxTransformContext","Besigner","useAglynSiteTheme","MuiShadowDom","useMuiShadowDomContext","styled","ThemeProvider","useHostThemeDocument","Box","CssBaseline","GlobalStyles","observer","forwardRef","useCallback","useMemo","CanvasHostTokensProvider","CanvasRevealContext","CanvasMutedClassesContext","useLayoutChromeContext","useAglynBesignerFlag","createDevicePinnedTheme","devicePreviewWidth","resolveSxForDeviceWidth","applyMutedStyles","hoistStateSx","CanvasDropIndicator","InlineMarkdownEditorComponent","InlineTextEditorComponent","NodeLeaf","MediaFactsLeaf","NodeOverlay","ViewportFrame","name","theme","t","tv","vars","flexGrow","minHeight","width","background","palette","paper","borderColor","divider","borderWidth","borderStyle","display","displayName","SiteShadowDom","div","transform","FramePaper","typography","body1","color","text","primary","backgroundColor","default","colorScheme","mode","WebkitFontSmoothing","MozOsxFontSmoothing","height","VIEWPORT_BASELINE_STYLES","all","boxSizing","ViewportGlobalStyles","styles","ThemedElementContainer","children","hostTheme","shadowDom","hostThemeDoc","canvasScheme","container","scheme","devicePreview","deviceWidth","breakpoints","values","canvasTheme","heldState","heldStateNodeId","mutedStyles","sxTransform","held","muted","length","undefined","sx","nodeId","unmuted","scoped","revealedNodeIds","mutedClasses","Provider","value","EditableScreenRenderer","node","getNode","LeafComponent","LayoutChromeLeaf","props","ref","rest","componentId","SiteContainer","chromeCanvas","chromeRoot","data-aglyn","scope","Overlays","zIndex","variant","ViewportFrameComponent","onMouseLeave","handlePointerLeave","e","focus","clearHover","onPointerLeave","aglyn"],"mappings":"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"}

package/src/lib/components/viewport-root.component.d.ts

@@ -0,0 +1,22 @@
+/**
+ * @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 type { ComponentProps } from 'react';
+declare const AglynViewport: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, keyof import("react").HTMLAttributes<HTMLElement> | keyof import("react").ClassAttributes<HTMLElement>>, {}>;
+export interface ViewportRootComponentProps extends ComponentProps<typeof AglynViewport> {
+}
+export declare const ViewportRootComponent: import("react").ForwardRefExoticComponent<Omit<ViewportRootComponentProps, "ref"> & import("react").RefAttributes<any>>;
+export default ViewportRootComponent;

package/src/lib/components/viewport-root.component.js

@@ -0,0 +1,112 @@
+import { _ as _extends } from "@swc/helpers/_/_extends";
+import { _ as _object_without_properties_loose } from "@swc/helpers/_/_object_without_properties_loose";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @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 { styled } from "@aglyn/shared-ui-theme";
+import { forwardRef } from "react";
+const AglynViewport = styled('main', {
+    name: 'AglynViewport'
+})(({ theme })=>{
+    // const o = 'transparent'
+    const t = theme;
+    // In CSS vars mode `theme.palette.*` is always the static light value; resolve
+    // through `theme.vars.palette.*` so this becomes a live CSS custom-property ref.
+    const bg = (t.vars || theme).palette.background.default;
+    // const base = theme.palette.divider
+    // const sq = alpha(base, 0.02)
+    // const outline = alpha(base, 0.0312)
+    // const corner = alpha(base, 0.016)
+    // const gradient = 'linear-gradient'
+    // const s = {
+    //   sq: '4px',
+    //   grid: '97px',
+    //   line: '1px',
+    //   rot: '-90deg',
+    // }
+    // theme.vars is available from MuiCssVarsProvider; use channel variables so the
+    // colours update when the mode switches without calling alpha() on a CSS-variable string.
+    const divider = `rgba(${t.vars.palette.dividerChannel} / 0.0312)`;
+    const dot = `rgba(${t.vars.palette.dividerChannel} / 0.0486)`;
+    const minor = theme.spacing(1);
+    const major = theme.spacing(12);
+    return {
+        flexGrow: 1,
+        overflow: 'hidden',
+        flexDirection: 'column',
+        alignItems: 'center',
+        display: 'flex',
+        // position: 'relative',
+        // minHeight: '100%',
+        boxShadow: theme.shadowsInset[3],
+        backgroundColor: bg,
+        // backgroundImage: `radial-gradient(circle, #000000 1px, rgba(0, 0, 0, 0) 1px)`,
+        backgroundImage: [
+            // `${gradient}(${s.rot}, ${sq} ${s.line}, ${o} ${s.line})`,
+            // `${gradient}(${sq} ${s.line}, ${o} ${s.line})`,
+            // `${gradient}(${s.rot}, ${outline} ${s.line}, ${o} ${s.line})`,
+            // `${gradient}(${outline} ${s.line}, ${o} ${s.line})`,
+            // `${gradient}(${o} ${s.sq}, ${bg} ${s.sq}, ${bg} ${s.grid}, ${o} ${s.grid})`,
+            // `${gradient}(${s.rot}, ${corner} ${s.line}, ${o} ${s.line})`,
+            // `${gradient}(${s.rot}, ${o} ${s.sq}, ${bg} ${s.sq}, ${bg} ${s.grid}, ${o} ${s.grid})`,
+            // `${gradient}(${corner} ${s.line}, ${o} ${s.line})`,
+            `linear-gradient(to right, ${divider} 1px, transparent 1px)`,
+            `linear-gradient(to bottom, ${divider} 1px, transparent 1px)`,
+            `linear-gradient(to right, ${divider} 1px, transparent 1px)`,
+            `linear-gradient(to bottom, ${divider} 1px, transparent 1px)`,
+            `radial-gradient(circle at 0% 0%, ${dot} 2px, transparent 2px)`,
+            `radial-gradient(circle at 100% 0%, ${dot} 2px, transparent 2px)`,
+            `radial-gradient(circle at 100% 100%, ${dot} 2px, transparent 2px)`,
+            `radial-gradient(circle at 0% 100%, ${dot} 2px, transparent 2px)`
+        ].join(', '),
+        backgroundSize: [
+            // '40px 40px',
+            // '40px 40px',
+            // '40px 40px',
+            // '10px 10px',
+            // '100px 100px',
+            // '100px 100px',
+            // '100px 100px',
+            // '100px 100px',
+            // '100px 100px',
+            `${minor} ${minor}`,
+            `${minor} ${minor}`,
+            `${major} ${major}`,
+            `${major} ${major}`,
+            `${major} ${major}`,
+            `${major} ${major}`,
+            `${major} ${major}`,
+            `${major} ${major}`
+        ].join(', ')
+    };
+});
+export const ViewportRootComponent = /*#__PURE__*/ forwardRef((props, ref)=>{
+    const { children } = props, rest = _object_without_properties_loose(props, [
+        "children"
+    ]);
+    return /*#__PURE__*/ _jsx(AglynViewport, _extends({
+        ref: ref,
+        id: "aglyn:viewport-root",
+        "aria-label": "besigner viewport root"
+    }, rest, {
+        children: children
+    }));
+});
+ViewportRootComponent.displayName = 'ViewportRootComponent';
+ViewportRootComponent.aglyn = true;
+export default ViewportRootComponent;
+
+//# sourceMappingURL=viewport-root.component.js.map

package/src/lib/components/viewport-root.component.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../libs/besigner/feature/designer/src/lib/components/viewport-root.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 { styled } from '@aglyn/shared-ui-theme'\nimport type { ComponentProps } from 'react'\nimport { forwardRef } from 'react'\n\nconst AglynViewport = styled('main', {\n  name: 'AglynViewport',\n})(({ theme }) => {\n  // const o = 'transparent'\n  const t = theme as any\n  // In CSS vars mode `theme.palette.*` is always the static light value; resolve\n  // through `theme.vars.palette.*` so this becomes a live CSS custom-property ref.\n  const bg = (t.vars || theme).palette.background.default\n  // const base = theme.palette.divider\n  // const sq = alpha(base, 0.02)\n  // const outline = alpha(base, 0.0312)\n  // const corner = alpha(base, 0.016)\n  // const gradient = 'linear-gradient'\n  // const s = {\n  //   sq: '4px',\n  //   grid: '97px',\n  //   line: '1px',\n  //   rot: '-90deg',\n  // }\n\n  // theme.vars is available from MuiCssVarsProvider; use channel variables so the\n  // colours update when the mode switches without calling alpha() on a CSS-variable string.\n  const divider = `rgba(${t.vars.palette.dividerChannel} / 0.0312)`\n  const dot = `rgba(${t.vars.palette.dividerChannel} / 0.0486)`\n  const minor = theme.spacing(1)\n  const major = theme.spacing(12)\n\n  return {\n    flexGrow: 1,\n    overflow: 'hidden',\n    flexDirection: 'column',\n    alignItems: 'center',\n    display: 'flex',\n    // position: 'relative',\n    // minHeight: '100%',\n    boxShadow: theme.shadowsInset[3],\n    backgroundColor: bg,\n    // backgroundImage: `radial-gradient(circle, #000000 1px, rgba(0, 0, 0, 0) 1px)`,\n    backgroundImage: [\n      // `${gradient}(${s.rot}, ${sq} ${s.line}, ${o} ${s.line})`,\n      // `${gradient}(${sq} ${s.line}, ${o} ${s.line})`,\n      // `${gradient}(${s.rot}, ${outline} ${s.line}, ${o} ${s.line})`,\n      // `${gradient}(${outline} ${s.line}, ${o} ${s.line})`,\n      // `${gradient}(${o} ${s.sq}, ${bg} ${s.sq}, ${bg} ${s.grid}, ${o} ${s.grid})`,\n      // `${gradient}(${s.rot}, ${corner} ${s.line}, ${o} ${s.line})`,\n      // `${gradient}(${s.rot}, ${o} ${s.sq}, ${bg} ${s.sq}, ${bg} ${s.grid}, ${o} ${s.grid})`,\n      // `${gradient}(${corner} ${s.line}, ${o} ${s.line})`,\n      `linear-gradient(to right, ${divider} 1px, transparent 1px)`,\n      `linear-gradient(to bottom, ${divider} 1px, transparent 1px)`,\n      `linear-gradient(to right, ${divider} 1px, transparent 1px)`,\n      `linear-gradient(to bottom, ${divider} 1px, transparent 1px)`,\n      `radial-gradient(circle at 0% 0%, ${dot} 2px, transparent 2px)`,\n      `radial-gradient(circle at 100% 0%, ${dot} 2px, transparent 2px)`,\n      `radial-gradient(circle at 100% 100%, ${dot} 2px, transparent 2px)`,\n      `radial-gradient(circle at 0% 100%, ${dot} 2px, transparent 2px)`,\n    ].join(', '),\n    backgroundSize: [\n      // '40px 40px',\n      // '40px 40px',\n      // '40px 40px',\n      // '10px 10px',\n      // '100px 100px',\n      // '100px 100px',\n      // '100px 100px',\n      // '100px 100px',\n      // '100px 100px',\n      `${minor} ${minor}`,\n      `${minor} ${minor}`,\n      `${major} ${major}`,\n      `${major} ${major}`,\n      `${major} ${major}`,\n      `${major} ${major}`,\n      `${major} ${major}`,\n      `${major} ${major}`,\n    ].join(', '),\n  }\n})\n\nexport interface ViewportRootComponentProps\n  extends ComponentProps<typeof AglynViewport> {}\n\nexport const ViewportRootComponent = forwardRef<\n  any,\n  ViewportRootComponentProps\n>((props, ref) => {\n  const { children, ...rest } = props\n\n  return (\n    <AglynViewport\n      ref={ref}\n      id=\"aglyn:viewport-root\"\n      aria-label=\"besigner viewport root\"\n      {...rest}\n    >\n      {children}\n    </AglynViewport>\n  )\n})\n\nViewportRootComponent.displayName = 'ViewportRootComponent'\nViewportRootComponent.aglyn = true\n\nexport default ViewportRootComponent\n"],"names":["styled","forwardRef","AglynViewport","name","theme","t","bg","vars","palette","background","default","divider","dividerChannel","dot","minor","spacing","major","flexGrow","overflow","flexDirection","alignItems","display","boxShadow","shadowsInset","backgroundColor","backgroundImage","join","backgroundSize","ViewportRootComponent","props","ref","children","rest","id","aria-label","displayName","aglyn"],"mappings":";;;AAAA;;;;;;;;;;;;;;;CAeC,GAED,SAASA,MAAM,QAAQ,yBAAwB;AAE/C,SAASC,UAAU,QAAQ,QAAO;AAElC,MAAMC,gBAAgBF,OAAO,QAAQ;IACnCG,MAAM;AACR,GAAG,CAAC,EAAEC,KAAK,EAAE;IACX,0BAA0B;IAC1B,MAAMC,IAAID;IACV,+EAA+E;IAC/E,iFAAiF;IACjF,MAAME,KAAK,AAACD,CAAAA,EAAEE,IAAI,IAAIH,KAAI,EAAGI,OAAO,CAACC,UAAU,CAACC,OAAO;IACvD,qCAAqC;IACrC,+BAA+B;IAC/B,sCAAsC;IACtC,oCAAoC;IACpC,qCAAqC;IACrC,cAAc;IACd,eAAe;IACf,kBAAkB;IAClB,iBAAiB;IACjB,mBAAmB;IACnB,IAAI;IAEJ,gFAAgF;IAChF,0FAA0F;IAC1F,MAAMC,UAAU,CAAC,KAAK,EAAEN,EAAEE,IAAI,CAACC,OAAO,CAACI,cAAc,CAAC,UAAU,CAAC;IACjE,MAAMC,MAAM,CAAC,KAAK,EAAER,EAAEE,IAAI,CAACC,OAAO,CAACI,cAAc,CAAC,UAAU,CAAC;IAC7D,MAAME,QAAQV,MAAMW,OAAO,CAAC;IAC5B,MAAMC,QAAQZ,MAAMW,OAAO,CAAC;IAE5B,OAAO;QACLE,UAAU;QACVC,UAAU;QACVC,eAAe;QACfC,YAAY;QACZC,SAAS;QACT,wBAAwB;QACxB,qBAAqB;QACrBC,WAAWlB,MAAMmB,YAAY,CAAC,EAAE;QAChCC,iBAAiBlB;QACjB,iFAAiF;QACjFmB,iBAAiB;YACf,4DAA4D;YAC5D,kDAAkD;YAClD,iEAAiE;YACjE,uDAAuD;YACvD,+EAA+E;YAC/E,gEAAgE;YAChE,yFAAyF;YACzF,sDAAsD;YACtD,CAAC,0BAA0B,EAAEd,QAAQ,sBAAsB,CAAC;YAC5D,CAAC,2BAA2B,EAAEA,QAAQ,sBAAsB,CAAC;YAC7D,CAAC,0BAA0B,EAAEA,QAAQ,sBAAsB,CAAC;YAC5D,CAAC,2BAA2B,EAAEA,QAAQ,sBAAsB,CAAC;YAC7D,CAAC,iCAAiC,EAAEE,IAAI,sBAAsB,CAAC;YAC/D,CAAC,mCAAmC,EAAEA,IAAI,sBAAsB,CAAC;YACjE,CAAC,qCAAqC,EAAEA,IAAI,sBAAsB,CAAC;YACnE,CAAC,mCAAmC,EAAEA,IAAI,sBAAsB,CAAC;SAClE,CAACa,IAAI,CAAC;QACPC,gBAAgB;YACd,eAAe;YACf,eAAe;YACf,eAAe;YACf,eAAe;YACf,iBAAiB;YACjB,iBAAiB;YACjB,iBAAiB;YACjB,iBAAiB;YACjB,iBAAiB;YACjB,GAAGb,MAAM,CAAC,EAAEA,OAAO;YACnB,GAAGA,MAAM,CAAC,EAAEA,OAAO;YACnB,GAAGE,MAAM,CAAC,EAAEA,OAAO;YACnB,GAAGA,MAAM,CAAC,EAAEA,OAAO;YACnB,GAAGA,MAAM,CAAC,EAAEA,OAAO;YACnB,GAAGA,MAAM,CAAC,EAAEA,OAAO;YACnB,GAAGA,MAAM,CAAC,EAAEA,OAAO;YACnB,GAAGA,MAAM,CAAC,EAAEA,OAAO;SACpB,CAACU,IAAI,CAAC;IACT;AACF;AAKA,OAAO,MAAME,sCAAwB3B,WAGnC,CAAC4B,OAAOC;IACR,MAAM,EAAEC,QAAQ,EAAW,GAAGF,OAATG,wCAASH;;;IAE9B,qBACE,KAAC3B;QACC4B,KAAKA;QACLG,IAAG;QACHC,cAAW;OACPF;kBAEHD;;AAGP,GAAE;AAEFH,sBAAsBO,WAAW,GAAG;AACpCP,sBAAsBQ,KAAK,GAAG;AAE9B,eAAeR,sBAAqB"}

package/src/lib/components/viewport-zoom-controls.d.ts

@@ -0,0 +1,29 @@
+/**
+ * @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 type { ComponentProps } from 'react';
+import { type EventHandler } from 'react';
+declare const ZoomControlsWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("react").ClassAttributes<HTMLDivElement> | keyof import("react").HTMLAttributes<HTMLDivElement>>, {}>;
+export interface ViewportZoomControlsComponentProps extends ComponentProps<typeof ZoomControlsWrapper> {
+    disableZoomReset?: boolean;
+    disableZoomDecrease?: boolean;
+    disableZoomIncrease?: boolean;
+    onZoomReset?: EventHandler<any>;
+    onZoomDecrease?: EventHandler<any>;
+    onZoomIncrease?: EventHandler<any>;
+}
+export declare const ViewportZoomControls: import("react").ForwardRefExoticComponent<Omit<ViewportZoomControlsComponentProps, "ref"> & import("react").RefAttributes<any>>;
+export default ViewportZoomControls;