@aglyn/besigner-ui 1.0.0-beta.143

package/src/lib/components/viewport-zoom-controls.js

@@ -0,0 +1,147 @@
+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 } 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 { mdiFitToPage, MdiIcon, mdiMagnifyMinus, mdiMagnifyPlus, SrOnly } from "@aglyn/shared-ui-jsx";
+import { styled } from "@aglyn/shared-ui-theme";
+import { _isFnT } from "@aglyn/shared-util-tools";
+import Button from "@mui/material/Button";
+import ButtonGroup from "@mui/material/ButtonGroup";
+import Tooltip from "@mui/material/Tooltip";
+import { forwardRef, useCallback } from "react";
+const ZoomControlsWrapper = styled('div', {
+    name: 'AglynViewportZoomControls'
+})(({ theme })=>({
+        display: 'none',
+        position: 'absolute',
+        bottom: theme.spacing(1),
+        zIndex: theme.zIndex.tooltip,
+        opacity: 0.32,
+        transition: theme.transitions.create([
+            'opacity',
+            'filter'
+        ], {
+            easing: theme.transitions.easing.sharp,
+            duration: theme.transitions.duration.leavingScreen
+        }),
+        ['&:hover']: {
+            opacity: 1,
+            transition: theme.transitions.create([
+                'opacity',
+                'filter'
+            ], {
+                easing: theme.transitions.easing.easeOut,
+                duration: theme.transitions.duration.enteringScreen
+            })
+        }
+    }));
+export const ViewportZoomControls = /*#__PURE__*/ forwardRef((props, ref)=>{
+    const { disableZoomReset, disableZoomDecrease, disableZoomIncrease, onZoomReset, onZoomDecrease, onZoomIncrease } = props, rest = _object_without_properties_loose(props, [
+        "disableZoomReset",
+        "disableZoomDecrease",
+        "disableZoomIncrease",
+        "onZoomReset",
+        "onZoomDecrease",
+        "onZoomIncrease"
+    ]);
+    const handleReset = useCallback((e)=>{
+        if (_isFnT(onZoomReset)) {
+            onZoomReset(e);
+        }
+    }, [
+        onZoomReset
+    ]);
+    const handleDecrease = useCallback((e)=>{
+        if (_isFnT(onZoomDecrease)) {
+            onZoomDecrease(e);
+        }
+    }, [
+        onZoomDecrease
+    ]);
+    const handleIncrease = useCallback((e)=>{
+        if (_isFnT(onZoomIncrease)) {
+            onZoomIncrease(e);
+        }
+    }, [
+        onZoomIncrease
+    ]);
+    return /*#__PURE__*/ _jsx(ZoomControlsWrapper, _extends({
+        ref: ref,
+        id: "aglyn:viewport-zoom-controls"
+    }, rest, {
+        children: /*#__PURE__*/ _jsxs(ButtonGroup, {
+            variant: "contained",
+            color: "primary",
+            "aria-label": "zoom controls",
+            size: "small",
+            children: [
+                /*#__PURE__*/ _jsx(Tooltip, {
+                    title: "Reset zoom",
+                    children: /*#__PURE__*/ _jsxs(Button, {
+                        disabled: disableZoomReset,
+                        onClick: handleReset,
+                        children: [
+                            /*#__PURE__*/ _jsx(MdiIcon, {
+                                fontSize: "inherit",
+                                path: mdiFitToPage.path
+                            }),
+                            /*#__PURE__*/ _jsx(SrOnly, {
+                                children: 'Reset zoom'
+                            })
+                        ]
+                    })
+                }),
+                /*#__PURE__*/ _jsx(Tooltip, {
+                    title: "Decrease zoom (⌘-)",
+                    children: /*#__PURE__*/ _jsxs(Button, {
+                        disabled: disableZoomDecrease,
+                        onClick: handleDecrease,
+                        children: [
+                            /*#__PURE__*/ _jsx(MdiIcon, {
+                                fontSize: "inherit",
+                                path: mdiMagnifyMinus.path
+                            }),
+                            /*#__PURE__*/ _jsx(SrOnly, {
+                                children: 'Decrease zoom (⌘-)'
+                            })
+                        ]
+                    })
+                }),
+                /*#__PURE__*/ _jsx(Tooltip, {
+                    title: "Increase zoom (⌘+)",
+                    children: /*#__PURE__*/ _jsxs(Button, {
+                        disabled: disableZoomIncrease,
+                        onClick: handleIncrease,
+                        children: [
+                            /*#__PURE__*/ _jsx(MdiIcon, {
+                                fontSize: "inherit",
+                                path: mdiMagnifyPlus.path
+                            }),
+                            /*#__PURE__*/ _jsx(SrOnly, {
+                                children: 'Increase zoom (⌘+)'
+                            })
+                        ]
+                    })
+                })
+            ]
+        })
+    }));
+});
+ViewportZoomControls.displayName = 'ViewportZoomControls';
+export default ViewportZoomControls;
+
+//# sourceMappingURL=viewport-zoom-controls.js.map

package/src/lib/components/viewport-zoom-controls.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../libs/besigner/feature/designer/src/lib/components/viewport-zoom-controls.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 {\n  mdiFitToPage,\n  MdiIcon,\n  mdiMagnifyMinus,\n  mdiMagnifyPlus,\n  SrOnly,\n} from '@aglyn/shared-ui-jsx'\nimport { styled } from '@aglyn/shared-ui-theme'\nimport { _isFnT } from '@aglyn/shared-util-tools'\nimport Button from '@mui/material/Button'\nimport ButtonGroup from '@mui/material/ButtonGroup'\nimport Tooltip from '@mui/material/Tooltip'\nimport type { ComponentProps } from 'react'\nimport {\n  type ChangeEvent,\n  type EventHandler,\n  forwardRef,\n  useCallback,\n} from 'react'\n\nconst ZoomControlsWrapper = styled('div', {\n  name: 'AglynViewportZoomControls',\n})(({ theme }) => ({\n  display: 'none',\n  position: 'absolute',\n  bottom: theme.spacing(1),\n  zIndex: theme.zIndex.tooltip,\n  opacity: 0.32,\n  transition: theme.transitions.create(['opacity', 'filter'], {\n    easing: theme.transitions.easing.sharp,\n    duration: theme.transitions.duration.leavingScreen,\n  }),\n  ['&:hover']: {\n    opacity: 1,\n    transition: theme.transitions.create(['opacity', 'filter'], {\n      easing: theme.transitions.easing.easeOut,\n      duration: theme.transitions.duration.enteringScreen,\n    }),\n  },\n}))\n\nexport interface ViewportZoomControlsComponentProps\n  extends ComponentProps<typeof ZoomControlsWrapper> {\n  disableZoomReset?: boolean\n  disableZoomDecrease?: boolean\n  disableZoomIncrease?: boolean\n  onZoomReset?: EventHandler<any>\n  onZoomDecrease?: EventHandler<any>\n  onZoomIncrease?: EventHandler<any>\n}\n\nexport const ViewportZoomControls = forwardRef<\n  any,\n  ViewportZoomControlsComponentProps\n>((props, ref) => {\n  const {\n    disableZoomReset,\n    disableZoomDecrease,\n    disableZoomIncrease,\n    onZoomReset,\n    onZoomDecrease,\n    onZoomIncrease,\n    ...rest\n  } = props\n\n  const handleReset = useCallback(\n    (e: ChangeEvent<unknown>) => {\n      if (_isFnT(onZoomReset)) {\n        onZoomReset(e)\n      }\n    },\n    [onZoomReset],\n  )\n\n  const handleDecrease = useCallback(\n    (e: ChangeEvent<unknown>) => {\n      if (_isFnT(onZoomDecrease)) {\n        onZoomDecrease(e)\n      }\n    },\n    [onZoomDecrease],\n  )\n\n  const handleIncrease = useCallback(\n    (e: ChangeEvent<unknown>) => {\n      if (_isFnT(onZoomIncrease)) {\n        onZoomIncrease(e)\n      }\n    },\n    [onZoomIncrease],\n  )\n\n  return (\n    <ZoomControlsWrapper ref={ref} id=\"aglyn:viewport-zoom-controls\" {...rest}>\n      <ButtonGroup\n        variant=\"contained\"\n        color=\"primary\"\n        aria-label=\"zoom controls\"\n        size=\"small\"\n      >\n        <Tooltip title=\"Reset zoom\">\n          <Button disabled={disableZoomReset} onClick={handleReset}>\n            <MdiIcon fontSize=\"inherit\" path={mdiFitToPage.path} />\n            <SrOnly>{'Reset zoom'}</SrOnly>\n          </Button>\n        </Tooltip>\n        <Tooltip title=\"Decrease zoom (⌘-)\">\n          <Button disabled={disableZoomDecrease} onClick={handleDecrease}>\n            <MdiIcon fontSize=\"inherit\" path={mdiMagnifyMinus.path} />\n            <SrOnly>{'Decrease zoom (⌘-)'}</SrOnly>\n          </Button>\n        </Tooltip>\n        <Tooltip title=\"Increase zoom (⌘+)\">\n          <Button disabled={disableZoomIncrease} onClick={handleIncrease}>\n            <MdiIcon fontSize=\"inherit\" path={mdiMagnifyPlus.path} />\n            <SrOnly>{'Increase zoom (⌘+)'}</SrOnly>\n          </Button>\n        </Tooltip>\n      </ButtonGroup>\n    </ZoomControlsWrapper>\n  )\n})\n\nViewportZoomControls.displayName = 'ViewportZoomControls'\n\nexport default ViewportZoomControls\n"],"names":["mdiFitToPage","MdiIcon","mdiMagnifyMinus","mdiMagnifyPlus","SrOnly","styled","_isFnT","Button","ButtonGroup","Tooltip","forwardRef","useCallback","ZoomControlsWrapper","name","theme","display","position","bottom","spacing","zIndex","tooltip","opacity","transition","transitions","create","easing","sharp","duration","leavingScreen","easeOut","enteringScreen","ViewportZoomControls","props","ref","disableZoomReset","disableZoomDecrease","disableZoomIncrease","onZoomReset","onZoomDecrease","onZoomIncrease","rest","handleReset","e","handleDecrease","handleIncrease","id","variant","color","aria-label","size","title","disabled","onClick","fontSize","path","displayName"],"mappings":";;;AAAA;;;;;;;;;;;;;;;CAeC,GAED,SACEA,YAAY,EACZC,OAAO,EACPC,eAAe,EACfC,cAAc,EACdC,MAAM,QACD,uBAAsB;AAC7B,SAASC,MAAM,QAAQ,yBAAwB;AAC/C,SAASC,MAAM,QAAQ,2BAA0B;AACjD,OAAOC,YAAY,uBAAsB;AACzC,OAAOC,iBAAiB,4BAA2B;AACnD,OAAOC,aAAa,wBAAuB;AAE3C,SAGEC,UAAU,EACVC,WAAW,QACN,QAAO;AAEd,MAAMC,sBAAsBP,OAAO,OAAO;IACxCQ,MAAM;AACR,GAAG,CAAC,EAAEC,KAAK,EAAE,GAAM,CAAA;QACjBC,SAAS;QACTC,UAAU;QACVC,QAAQH,MAAMI,OAAO,CAAC;QACtBC,QAAQL,MAAMK,MAAM,CAACC,OAAO;QAC5BC,SAAS;QACTC,YAAYR,MAAMS,WAAW,CAACC,MAAM,CAAC;YAAC;YAAW;SAAS,EAAE;YAC1DC,QAAQX,MAAMS,WAAW,CAACE,MAAM,CAACC,KAAK;YACtCC,UAAUb,MAAMS,WAAW,CAACI,QAAQ,CAACC,aAAa;QACpD;QACA,CAAC,UAAU,EAAE;YACXP,SAAS;YACTC,YAAYR,MAAMS,WAAW,CAACC,MAAM,CAAC;gBAAC;gBAAW;aAAS,EAAE;gBAC1DC,QAAQX,MAAMS,WAAW,CAACE,MAAM,CAACI,OAAO;gBACxCF,UAAUb,MAAMS,WAAW,CAACI,QAAQ,CAACG,cAAc;YACrD;QACF;IACF,CAAA;AAYA,OAAO,MAAMC,qCAAuBrB,WAGlC,CAACsB,OAAOC;IACR,MAAM,EACJC,gBAAgB,EAChBC,mBAAmB,EACnBC,mBAAmB,EACnBC,WAAW,EACXC,cAAc,EACdC,cAAc,EAEf,GAAGP,OADCQ,wCACDR;;;;;;;;IAEJ,MAAMS,cAAc9B,YAClB,CAAC+B;QACC,IAAIpC,OAAO+B,cAAc;YACvBA,YAAYK;QACd;IACF,GACA;QAACL;KAAY;IAGf,MAAMM,iBAAiBhC,YACrB,CAAC+B;QACC,IAAIpC,OAAOgC,iBAAiB;YAC1BA,eAAeI;QACjB;IACF,GACA;QAACJ;KAAe;IAGlB,MAAMM,iBAAiBjC,YACrB,CAAC+B;QACC,IAAIpC,OAAOiC,iBAAiB;YAC1BA,eAAeG;QACjB;IACF,GACA;QAACH;KAAe;IAGlB,qBACE,KAAC3B;QAAoBqB,KAAKA;QAAKY,IAAG;OAAmCL;kBACnE,cAAA,MAAChC;YACCsC,SAAQ;YACRC,OAAM;YACNC,cAAW;YACXC,MAAK;;8BAEL,KAACxC;oBAAQyC,OAAM;8BACb,cAAA,MAAC3C;wBAAO4C,UAAUjB;wBAAkBkB,SAASX;;0CAC3C,KAACxC;gCAAQoD,UAAS;gCAAUC,MAAMtD,aAAasD,IAAI;;0CACnD,KAAClD;0CAAQ;;;;;8BAGb,KAACK;oBAAQyC,OAAM;8BACb,cAAA,MAAC3C;wBAAO4C,UAAUhB;wBAAqBiB,SAAST;;0CAC9C,KAAC1C;gCAAQoD,UAAS;gCAAUC,MAAMpD,gBAAgBoD,IAAI;;0CACtD,KAAClD;0CAAQ;;;;;8BAGb,KAACK;oBAAQyC,OAAM;8BACb,cAAA,MAAC3C;wBAAO4C,UAAUf;wBAAqBgB,SAASR;;0CAC9C,KAAC3C;gCAAQoD,UAAS;gCAAUC,MAAMnD,eAAemD,IAAI;;0CACrD,KAAClD;0CAAQ;;;;;;;;AAMrB,GAAE;AAEF2B,qBAAqBwB,WAAW,GAAG;AAEnC,eAAexB,qBAAoB"}

package/src/lib/components/workspace-editor.component.d.ts

@@ -0,0 +1,23 @@
+/**
+ * @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 WorkspaceEditor: 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 WorkspaceEditorComponentProps extends ComponentProps<typeof WorkspaceEditor> {
+}
+declare const WorkspaceEditorComponent: import("react").ForwardRefExoticComponent<Omit<WorkspaceEditorComponentProps, "ref"> & import("react").RefAttributes<any>>;
+export { WorkspaceEditorComponent };
+export default WorkspaceEditorComponent;

package/src/lib/components/workspace-editor.component.js

@@ -0,0 +1,191 @@
+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 } 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 { canvas } from "@aglyn/aglyn";
+import * as Besigner from "@aglyn/besigner";
+import { useSnackbar } from "@aglyn/shared-ui-snackstack";
+import { useMergeRefs } from "@aglyn/shared-ui-jsx";
+import { LOADING_OVERLAY_ELEMENT } from "@aglyn/shared-ui-jsx/const/prebuilt-components";
+import { generateComponentClassKeys, styled } from "@aglyn/shared-ui-theme";
+import { _isFnT } from "@aglyn/shared-util-tools";
+import { useDndMonitor } from "@dnd-kit/core";
+import { Stack } from "@mui/material";
+import clsx from "clsx";
+import dynamic from "next/dynamic";
+import { forwardRef, useCallback, useRef } from "react";
+import { useMouse } from "react-use";
+import useAglynBesignerPanelValue from "../hooks/use-aglyn-besigner-panel-value.js";
+import AppBarBreadcrumbsComponent from "./app-bar-breadcrumbs.component.js";
+import ViewportZoomControls from "./viewport-zoom-controls.js";
+const classKeys = generateComponentClassKeys('AglynViewport', [
+    'panelLeftOpen',
+    'panelBottomOpen',
+    'panelRightOpen'
+]);
+const PanelLeftComponent = dynamic(()=>import("./aside-panel.component.js").then((mod)=>mod.AsidePanelComponent), {
+    ssr: false,
+    loading: ()=>LOADING_OVERLAY_ELEMENT
+});
+const WorkspaceEditor = styled('div', {
+    name: 'AglynWorkspaceEditor'
+})({
+    // position: 'absolute',
+    left: 0,
+    right: 0,
+    top: 0,
+    bottom: 0,
+    height: '100%',
+    width: '100%',
+    overflow: 'hidden',
+    display: 'flex',
+    flexDirection: 'column',
+    alignContent: 'stretch',
+    alignItems: 'stretch',
+    [`&.${classKeys.panelLeftOpen}`]: {},
+    [`&.${classKeys.panelBottomOpen}`]: {},
+    [`&.${classKeys.panelRightOpen}`]: {}
+});
+const WorkspaceEditorComponent = /*#__PURE__*/ forwardRef((props, ref)=>{
+    var _useSnackbar;
+    const { children, className } = props, rest = _object_without_properties_loose(props, [
+        "children",
+        "className"
+    ]);
+    const [leftToggled] = useAglynBesignerPanelValue('panelLeft', 'toggled');
+    const [rightToggled] = useAglynBesignerPanelValue('panelRight', 'toggled');
+    const [bottomToggled] = useAglynBesignerPanelValue('panelBottom', 'toggled');
+    const elemClassName = clsx({
+        [classKeys.panelLeftOpen]: Boolean(leftToggled),
+        [classKeys.panelRightOpen]: Boolean(rightToggled),
+        [classKeys.panelBottomOpen]: Boolean(bottomToggled)
+    }, className);
+    const pannerRef = useRef(null);
+    const handleZoomReset = useCallback((e)=>{
+        var _pannerRef_current;
+        if (_isFnT((_pannerRef_current = pannerRef.current) == null ? void 0 : _pannerRef_current.reset)) {
+            pannerRef.current.reset();
+        }
+    }, []);
+    const handleZoomDecrease = useCallback((e)=>{
+        var _pannerRef_current;
+        if (_isFnT((_pannerRef_current = pannerRef.current) == null ? void 0 : _pannerRef_current.zoomOut)) {
+            pannerRef.current.zoomOut();
+        }
+    }, []);
+    const handleZoomIncrease = useCallback((e)=>{
+        var _pannerRef_current;
+        if (_isFnT((_pannerRef_current = pannerRef.current) == null ? void 0 : _pannerRef_current.zoomIn)) {
+            pannerRef.current.zoomIn();
+        }
+    }, []);
+    const localRef = useRef(null);
+    const mouse = useMouse(localRef);
+    // Null-safe: surfaces render without a snackbar provider in tests.
+    const { enqueueSnackbar } = (_useSnackbar = useSnackbar()) != null ? _useSnackbar : {};
+    useDndMonitor({
+        onDragMove (event) {
+            var _event_over;
+            let region = null;
+            if (event.over) {
+                var _event_over_data_current;
+                // dnd-kit rects are viewport-relative; useMouse coords are
+                // document-relative — subtract the page scroll so region hit
+                // tests keep working when the page is scrolled.
+                const overNode = (_event_over_data_current = event.over.data.current) == null ? void 0 : _event_over_data_current.node;
+                region = Besigner.determineDropRegion(event.over.rect, mouse.docX - window.scrollX, mouse.docY - window.scrollY, // Leaves (self-closing / text-editable) never offer a CHILDREN
+                // region — the center reads as a sibling insert, matching where
+                // the drop actually lands (see dnd-manager onDragEnd).
+                overNode ? canvas.nodeAcceptsChildren(overNode) : true);
+                event.over.data.current.region = region;
+            }
+            Besigner.dnd.setDropRegion(region);
+            Besigner.dnd.setDropNode((_event_over = event.over) == null ? void 0 : _event_over.data.current.node);
+            event.activatorEvent.stopPropagation();
+        },
+        onDragStart ({ active }) {
+            const node = active == null ? void 0 : active.data.current.node;
+            Besigner.dnd.setDragNode(node);
+        },
+        onDragEnd (e) {
+            e.activatorEvent.stopPropagation();
+            // Compute before completing the drag — onDragEnd clears dnd state.
+            const rejection = Besigner.dnd.describeDropRejection();
+            Besigner.dnd.onDragEnd();
+            if (rejection) {
+                enqueueSnackbar == null ? void 0 : enqueueSnackbar(rejection, {
+                    variant: 'warning',
+                    persist: false
+                });
+            }
+        }
+    });
+    return /*#__PURE__*/ _jsx(WorkspaceEditor, _extends({
+        ref: useMergeRefs(ref, localRef),
+        id: "aglyn:besigner-workspace",
+        className: elemClassName
+    }, rest, {
+        children: /*#__PURE__*/ _jsxs(Stack, {
+            direction: "row",
+            id: "aglyn:besigner-main",
+            component: "main",
+            spacing: 0,
+            sx: {
+                alignItems: "stretch",
+                justifyContent: "space-between",
+                flexGrow: 1,
+                overflow: 'hidden',
+                zIndex: 0
+            },
+            children: [
+                /*#__PURE__*/ _jsx(PanelLeftComponent, {
+                    panel: 'panelLeft'
+                }),
+                /*#__PURE__*/ _jsxs(Stack, {
+                    direction: "column",
+                    id: "aglyn:besigner-viewport",
+                    component: "main",
+                    spacing: 0,
+                    sx: {
+                        alignItems: "stretch",
+                        justifyContent: "space-between",
+                        flexGrow: 1,
+                        overflow: 'hidden',
+                        zIndex: 0
+                    },
+                    children: [
+                        children,
+                        /*#__PURE__*/ _jsx(ViewportZoomControls, {
+                            onZoomReset: handleZoomReset,
+                            onZoomDecrease: handleZoomDecrease,
+                            onZoomIncrease: handleZoomIncrease
+                        }),
+                        /*#__PURE__*/ _jsx(AppBarBreadcrumbsComponent, {})
+                    ]
+                }),
+                /*#__PURE__*/ _jsx(PanelLeftComponent, {
+                    panel: 'panelRight'
+                })
+            ]
+        })
+    }));
+});
+WorkspaceEditorComponent.displayName = 'WorkspaceEditorComponent';
+export { WorkspaceEditorComponent };
+export default WorkspaceEditorComponent;
+
+//# sourceMappingURL=workspace-editor.component.js.map

package/src/lib/components/workspace-editor.component.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../libs/besigner/feature/designer/src/lib/components/workspace-editor.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 { canvas } from '@aglyn/aglyn'\nimport * as Besigner from '@aglyn/besigner'\nimport { useSnackbar } from '@aglyn/shared-ui-snackstack'\nimport { useMergeRefs } from '@aglyn/shared-ui-jsx'\nimport { LOADING_OVERLAY_ELEMENT } from '@aglyn/shared-ui-jsx/const/prebuilt-components'\nimport { generateComponentClassKeys, styled } from '@aglyn/shared-ui-theme'\nimport { _isFnT } from '@aglyn/shared-util-tools'\nimport {\n  DragEndEvent,\n  DragMoveEvent,\n  DragStartEvent,\n  useDndMonitor,\n} from '@dnd-kit/core'\nimport { Stack } from '@mui/material'\nimport clsx from 'clsx'\nimport dynamic from 'next/dynamic'\nimport type { ComponentProps } from 'react'\nimport { ChangeEvent, forwardRef, useCallback, useRef } from 'react'\nimport { useMouse } from 'react-use'\nimport useAglynBesignerPanelValue from '../hooks/use-aglyn-besigner-panel-value'\nimport AppBarBreadcrumbsComponent from './app-bar-breadcrumbs.component'\nimport type { AsidePanelComponentProps } from './aside-panel.component'\nimport ViewportZoomControls from './viewport-zoom-controls'\n\nconst classKeys = generateComponentClassKeys('AglynViewport', [\n  'panelLeftOpen',\n  'panelBottomOpen',\n  'panelRightOpen',\n])\nconst PanelLeftComponent = dynamic<AsidePanelComponentProps>(\n  () =>\n    import('./aside-panel.component').then((mod) => mod.AsidePanelComponent),\n  { ssr: false, loading: () => LOADING_OVERLAY_ELEMENT },\n)\n\nconst WorkspaceEditor = styled('div', {\n  name: 'AglynWorkspaceEditor',\n})({\n  // position: 'absolute',\n  left: 0,\n  right: 0,\n  top: 0,\n  bottom: 0,\n  height: '100%',\n  width: '100%',\n  overflow: 'hidden',\n  display: 'flex',\n  flexDirection: 'column',\n  alignContent: 'stretch',\n  alignItems: 'stretch',\n  [`&.${classKeys.panelLeftOpen}`]: {},\n  [`&.${classKeys.panelBottomOpen}`]: {},\n  [`&.${classKeys.panelRightOpen}`]: {},\n})\n\nexport interface WorkspaceEditorComponentProps\n  extends ComponentProps<typeof WorkspaceEditor> {}\n\nconst WorkspaceEditorComponent = forwardRef<any, WorkspaceEditorComponentProps>(\n  (props, ref) => {\n    const { children, className, ...rest } = props\n\n    const [leftToggled] = useAglynBesignerPanelValue('panelLeft', 'toggled')\n    const [rightToggled] = useAglynBesignerPanelValue('panelRight', 'toggled')\n    const [bottomToggled] = useAglynBesignerPanelValue('panelBottom', 'toggled')\n\n    const elemClassName = clsx(\n      {\n        [classKeys.panelLeftOpen]: Boolean(leftToggled),\n        [classKeys.panelRightOpen]: Boolean(rightToggled),\n        [classKeys.panelBottomOpen]: Boolean(bottomToggled),\n      },\n      className,\n    )\n\n    const pannerRef = useRef<any>(null)\n\n    const handleZoomReset = useCallback((e: ChangeEvent<unknown>) => {\n      if (_isFnT(pannerRef.current?.reset)) {\n        pannerRef.current.reset()\n      }\n    }, [])\n\n    const handleZoomDecrease = useCallback((e: ChangeEvent<unknown>) => {\n      if (_isFnT(pannerRef.current?.zoomOut)) {\n        pannerRef.current.zoomOut()\n      }\n    }, [])\n\n    const handleZoomIncrease = useCallback((e: ChangeEvent<unknown>) => {\n      if (_isFnT(pannerRef.current?.zoomIn)) {\n        pannerRef.current.zoomIn()\n      }\n    }, [])\n\n    const localRef = useRef(null)\n    const mouse = useMouse(localRef)\n    // Null-safe: surfaces render without a snackbar provider in tests.\n    const { enqueueSnackbar } = useSnackbar() ?? {}\n\n    useDndMonitor({\n      onDragMove(event: DragMoveEvent): void {\n        let region: Besigner.DropRegion = null\n        if (event.over) {\n          // dnd-kit rects are viewport-relative; useMouse coords are\n          // document-relative — subtract the page scroll so region hit\n          // tests keep working when the page is scrolled.\n          const overNode = event.over.data.current?.node\n          region = Besigner.determineDropRegion(\n            event.over.rect,\n            mouse.docX - window.scrollX,\n            mouse.docY - window.scrollY,\n            // Leaves (self-closing / text-editable) never offer a CHILDREN\n            // region — the center reads as a sibling insert, matching where\n            // the drop actually lands (see dnd-manager onDragEnd).\n            overNode ? canvas.nodeAcceptsChildren(overNode) : true,\n          )\n          event.over.data.current.region = region\n        }\n        Besigner.dnd.setDropRegion(region)\n        Besigner.dnd.setDropNode(event.over?.data.current.node)\n\n        event.activatorEvent.stopPropagation()\n      },\n      onDragStart({ active }: DragStartEvent) {\n        const node = active?.data.current.node\n        Besigner.dnd.setDragNode(node)\n      },\n      onDragEnd(e: DragEndEvent) {\n        e.activatorEvent.stopPropagation()\n        // Compute before completing the drag — onDragEnd clears dnd state.\n        const rejection = Besigner.dnd.describeDropRejection()\n        Besigner.dnd.onDragEnd()\n        if (rejection) {\n          enqueueSnackbar?.(rejection, { variant: 'warning', persist: false })\n        }\n      },\n    })\n\n    return (\n      <WorkspaceEditor\n        ref={useMergeRefs(ref, localRef)}\n        id=\"aglyn:besigner-workspace\"\n        className={elemClassName}\n        {...rest}\n      >\n        <Stack\n          direction=\"row\"\n          id=\"aglyn:besigner-main\"\n          component=\"main\"\n          spacing={0}\n          sx={{\n            alignItems: \"stretch\",\n            justifyContent: \"space-between\",\n            flexGrow: 1,\n            overflow: 'hidden',\n            zIndex: 0\n          }}>\n          <PanelLeftComponent panel={'panelLeft'} />\n          <Stack\n            direction=\"column\"\n            id=\"aglyn:besigner-viewport\"\n            component=\"main\"\n            spacing={0}\n            sx={{\n              alignItems: \"stretch\",\n              justifyContent: \"space-between\",\n              flexGrow: 1,\n              overflow: 'hidden',\n              zIndex: 0\n            }}>\n            {children}\n            <ViewportZoomControls\n              onZoomReset={handleZoomReset}\n              onZoomDecrease={handleZoomDecrease}\n              onZoomIncrease={handleZoomIncrease}\n            />\n            <AppBarBreadcrumbsComponent />\n          </Stack>\n          <PanelLeftComponent panel={'panelRight'} />\n        </Stack>\n      </WorkspaceEditor>\n    );\n  },\n)\n\nWorkspaceEditorComponent.displayName = 'WorkspaceEditorComponent'\n\nexport { WorkspaceEditorComponent }\nexport default WorkspaceEditorComponent\n"],"names":["canvas","Besigner","useSnackbar","useMergeRefs","LOADING_OVERLAY_ELEMENT","generateComponentClassKeys","styled","_isFnT","useDndMonitor","Stack","clsx","dynamic","forwardRef","useCallback","useRef","useMouse","useAglynBesignerPanelValue","AppBarBreadcrumbsComponent","ViewportZoomControls","classKeys","PanelLeftComponent","then","mod","AsidePanelComponent","ssr","loading","WorkspaceEditor","name","left","right","top","bottom","height","width","overflow","display","flexDirection","alignContent","alignItems","panelLeftOpen","panelBottomOpen","panelRightOpen","WorkspaceEditorComponent","props","ref","children","className","rest","leftToggled","rightToggled","bottomToggled","elemClassName","Boolean","pannerRef","handleZoomReset","e","current","reset","handleZoomDecrease","zoomOut","handleZoomIncrease","zoomIn","localRef","mouse","enqueueSnackbar","onDragMove","event","region","over","overNode","data","node","determineDropRegion","rect","docX","window","scrollX","docY","scrollY","nodeAcceptsChildren","dnd","setDropRegion","setDropNode","activatorEvent","stopPropagation","onDragStart","active","setDragNode","onDragEnd","rejection","describeDropRejection","variant","persist","id","direction","component","spacing","sx","justifyContent","flexGrow","zIndex","panel","onZoomReset","onZoomDecrease","onZoomIncrease","displayName"],"mappings":"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"}

package/src/lib/components/workspace-panel.component.d.ts

@@ -0,0 +1,28 @@
+/**
+ * @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 { type BoxProps as MuiBoxProps } from '@mui/material/Box';
+import { type DrawerProps as MuiDrawerProps } from '@mui/material/Drawer';
+interface WorkspacePanelProps extends MuiBoxProps {
+    size?: string | number;
+}
+export interface WorkspacePanelComponentProps extends WorkspacePanelProps {
+    DrawerProps?: MuiDrawerProps;
+    open?: boolean;
+    anchor?: MuiDrawerProps['anchor'];
+}
+export declare const WorkspacePanelComponent: import("react").ForwardRefExoticComponent<Omit<WorkspacePanelComponentProps, "ref"> & import("react").RefAttributes<any>>;
+export default WorkspacePanelComponent;

package/src/lib/components/workspace-panel.component.js

@@ -0,0 +1,147 @@
+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 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 { generateComponentClassKeys, styled } from "@aglyn/shared-ui-theme";
+import { _isEqualitySameType } from "@aglyn/shared-util-tools";
+import MuiDrawer from "@mui/material/Drawer";
+import clsx from "clsx";
+import { forwardRef } from "react";
+import { DEFAULT_LEFT_DRAWER_WIDTH } from "../constants/shared.js";
+const classKeys = generateComponentClassKeys('AglynWorkspacePanel', [
+    'drawer',
+    'open',
+    'anchorLeft',
+    'anchorRight',
+    'anchorTop',
+    'anchorBottom'
+]);
+const WorkspacePanel = styled('div', {
+    name: 'AglynWorkspacePanel',
+    shouldForwardProp (propName) {
+        return !_isEqualitySameType(propName, null, 'size');
+    }
+})(({ theme, size })=>{
+    const calcSize = size || DEFAULT_LEFT_DRAWER_WIDTH;
+    return {
+        zIndex: theme.zIndex.appBar,
+        transition: theme.transitions.create('margin', {
+            easing: theme.transitions.easing.sharp,
+            duration: theme.transitions.duration.leavingScreen
+        }),
+        [`&.${classKeys.open}`]: {
+            transition: theme.transitions.create('margin', {
+                easing: theme.transitions.easing.easeOut,
+                duration: theme.transitions.duration.enteringScreen
+            })
+        },
+        [`&.${classKeys.anchorLeft}`]: {
+            marginLeft: -calcSize,
+            [`&.${classKeys.open}`]: {
+                marginLeft: 0
+            }
+        },
+        [`&.${classKeys.anchorRight}`]: {
+            marginRight: -calcSize,
+            [`&.${classKeys.open}`]: {
+                marginRight: 0
+            }
+        },
+        [`&.${classKeys.anchorTop}`]: {
+            marginTop: -calcSize,
+            [`&.${classKeys.open}`]: {
+                marginTop: 0
+            }
+        },
+        [`&.${classKeys.anchorBottom}`]: {
+            marginBottom: -calcSize,
+            [`&.${classKeys.open}`]: {
+                marginBottom: 0
+            }
+        },
+        [`&.${classKeys.anchorTop}, &.${classKeys.anchorBottom}`]: {
+            [`& .${classKeys.drawer}`]: {
+                height: calcSize,
+                width: '100%',
+                [`& .MuiDrawer-paper`]: {
+                    height: calcSize,
+                    width: '100%'
+                }
+            }
+        },
+        [`&.${classKeys.anchorLeft}, &.${classKeys.anchorRight}`]: {
+            [`& .${classKeys.drawer}`]: {
+                width: calcSize,
+                height: '100%',
+                [`& .MuiDrawer-paper`]: {
+                    width: calcSize,
+                    height: '100%'
+                }
+            }
+        },
+        [`& .${classKeys.drawer}`]: {
+            flexShrink: 0,
+            [`& .MuiDrawer-paper`]: {
+                boxSizing: 'border-box',
+                position: 'unset'
+            }
+        }
+    };
+});
+export const WorkspacePanelComponent = /*#__PURE__*/ forwardRef((props, ref)=>{
+    const { children, className: classNameProp, DrawerProps, size, open: openProp, anchor = 'left', id } = props, rest = _object_without_properties_loose(props, [
+        "children",
+        "className",
+        "DrawerProps",
+        "size",
+        "open",
+        "anchor",
+        "id"
+    ]);
+    const open = Boolean(openProp);
+    const _extends1 = _extends({}, DrawerProps), { className: drawerClassName, open: _ } = _extends1, drawerProps = _object_without_properties_loose(_extends1, [
+        "className",
+        "open"
+    ]);
+    const className = clsx({
+        [classKeys.open]: open,
+        [classKeys.anchorLeft]: anchor === 'left',
+        [classKeys.anchorRight]: anchor === 'right',
+        [classKeys.anchorTop]: anchor === 'top',
+        [classKeys.anchorBottom]: anchor === 'bottom'
+    }, classNameProp);
+    return /*#__PURE__*/ _jsx(WorkspacePanel, _extends({
+        ref: ref,
+        id: id,
+        size: size,
+        className: className
+    }, rest, {
+        children: /*#__PURE__*/ _jsx(MuiDrawer, _extends({
+            variant: "persistent",
+            open: open,
+            anchor: anchor,
+            className: clsx(classKeys.drawer, drawerClassName)
+        }, drawerProps, {
+            children: children
+        }))
+    }));
+});
+WorkspacePanelComponent.displayName = 'WorkspacePanelComponent';
+WorkspacePanelComponent.aglyn = true;
+export default WorkspacePanelComponent;
+
+//# sourceMappingURL=workspace-panel.component.js.map

package/src/lib/components/workspace-panel.component.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../libs/besigner/feature/designer/src/lib/components/workspace-panel.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 { generateComponentClassKeys, styled } from '@aglyn/shared-ui-theme'\nimport { _isEqualitySameType } from '@aglyn/shared-util-tools'\nimport { type BoxProps as MuiBoxProps } from '@mui/material/Box'\nimport MuiDrawer, {\n  type DrawerProps as MuiDrawerProps,\n} from '@mui/material/Drawer'\nimport clsx from 'clsx'\nimport { forwardRef } from 'react'\nimport { DEFAULT_LEFT_DRAWER_WIDTH } from '../constants/shared'\n\nconst classKeys = generateComponentClassKeys('AglynWorkspacePanel', [\n  'drawer',\n  'open',\n  'anchorLeft',\n  'anchorRight',\n  'anchorTop',\n  'anchorBottom',\n])\n\ninterface WorkspacePanelProps extends MuiBoxProps {\n  size?: string | number\n}\n\nconst WorkspacePanel = styled('div', {\n  name: 'AglynWorkspacePanel',\n  shouldForwardProp(propName: any) {\n    return !_isEqualitySameType(propName, null, 'size')\n  },\n})<WorkspacePanelProps>(({ theme, size }) => {\n  const calcSize = size || DEFAULT_LEFT_DRAWER_WIDTH\n\n  return {\n    zIndex: theme.zIndex.appBar,\n    transition: theme.transitions.create('margin', {\n      easing: theme.transitions.easing.sharp,\n      duration: theme.transitions.duration.leavingScreen,\n    }),\n    [`&.${classKeys.open}`]: {\n      transition: theme.transitions.create('margin', {\n        easing: theme.transitions.easing.easeOut,\n        duration: theme.transitions.duration.enteringScreen,\n      }),\n    },\n\n    [`&.${classKeys.anchorLeft}`]: {\n      marginLeft: -calcSize,\n      [`&.${classKeys.open}`]: {\n        marginLeft: 0,\n      },\n    },\n    [`&.${classKeys.anchorRight}`]: {\n      marginRight: -calcSize,\n      [`&.${classKeys.open}`]: {\n        marginRight: 0,\n      },\n    },\n    [`&.${classKeys.anchorTop}`]: {\n      marginTop: -calcSize,\n      [`&.${classKeys.open}`]: {\n        marginTop: 0,\n      },\n    },\n    [`&.${classKeys.anchorBottom}`]: {\n      marginBottom: -calcSize,\n      [`&.${classKeys.open}`]: {\n        marginBottom: 0,\n      },\n    },\n\n    [`&.${classKeys.anchorTop}, &.${classKeys.anchorBottom}`]: {\n      [`& .${classKeys.drawer}`]: {\n        height: calcSize,\n        width: '100%',\n        [`& .MuiDrawer-paper`]: {\n          height: calcSize,\n          width: '100%',\n        },\n      },\n    },\n    [`&.${classKeys.anchorLeft}, &.${classKeys.anchorRight}`]: {\n      [`& .${classKeys.drawer}`]: {\n        width: calcSize,\n        height: '100%',\n        [`& .MuiDrawer-paper`]: {\n          width: calcSize,\n          height: '100%',\n        },\n      },\n    },\n    [`& .${classKeys.drawer}`]: {\n      flexShrink: 0,\n      [`& .MuiDrawer-paper`]: {\n        boxSizing: 'border-box',\n        position: 'unset',\n      },\n    },\n  }\n})\n\nexport interface WorkspacePanelComponentProps extends WorkspacePanelProps {\n  DrawerProps?: MuiDrawerProps\n  open?: boolean\n  anchor?: MuiDrawerProps['anchor']\n}\n\nexport const WorkspacePanelComponent = forwardRef<\n  any,\n  WorkspacePanelComponentProps\n>((props, ref) => {\n  const {\n    children,\n    className: classNameProp,\n    DrawerProps,\n    size,\n    open: openProp,\n    anchor = 'left',\n    id,\n    ...rest\n  } = props\n  const open = Boolean(openProp)\n  const {\n    className: drawerClassName,\n    open: _,\n    ...drawerProps\n  } = { ...DrawerProps }\n  const className = clsx(\n    {\n      [classKeys.open]: open,\n      [classKeys.anchorLeft]: anchor === 'left',\n      [classKeys.anchorRight]: anchor === 'right',\n      [classKeys.anchorTop]: anchor === 'top',\n      [classKeys.anchorBottom]: anchor === 'bottom',\n    },\n    classNameProp,\n  )\n\n  return (\n    <WorkspacePanel\n      ref={ref}\n      id={id}\n      size={size}\n      className={className}\n      {...rest}\n    >\n      <MuiDrawer\n        variant=\"persistent\"\n        open={open}\n        anchor={anchor}\n        className={clsx(classKeys.drawer, drawerClassName)}\n        {...drawerProps}\n      >\n        {children}\n      </MuiDrawer>\n    </WorkspacePanel>\n  )\n})\n\nWorkspacePanelComponent.displayName = 'WorkspacePanelComponent'\nWorkspacePanelComponent.aglyn = true\n\nexport default WorkspacePanelComponent\n"],"names":["generateComponentClassKeys","styled","_isEqualitySameType","MuiDrawer","clsx","forwardRef","DEFAULT_LEFT_DRAWER_WIDTH","classKeys","WorkspacePanel","name","shouldForwardProp","propName","theme","size","calcSize","zIndex","appBar","transition","transitions","create","easing","sharp","duration","leavingScreen","open","easeOut","enteringScreen","anchorLeft","marginLeft","anchorRight","marginRight","anchorTop","marginTop","anchorBottom","marginBottom","drawer","height","width","flexShrink","boxSizing","position","WorkspacePanelComponent","props","ref","children","className","classNameProp","DrawerProps","openProp","anchor","id","rest","Boolean","drawerClassName","_","drawerProps","variant","displayName","aglyn"],"mappings":"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"}

package/src/lib/constants/sample-data.d.ts

@@ -0,0 +1,18 @@
+/**
+ * @license
+ * Copyright 2022 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 { AglynNodesList } from '@aglyn/aglyn';
+export declare const samplePageData: AglynNodesList;