@aglyn/besigner-ui 1.0.0-beta.143

package/src/lib/components/app-bar-breadcrumbs.component.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../libs/besigner/feature/designer/src/lib/components/app-bar-breadcrumbs.component.tsx"],"sourcesContent":["/**\n * @license\n * Copyright 2023 Aglyn LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *   http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport type * as Aglyn from '@aglyn/aglyn'\nimport { canvas } from '@aglyn/aglyn'\nimport * as Besigner from '@aglyn/besigner'\nimport {\n  generateComponentClassKeys,\n  mergeSxProps,\n  styled,\n} from '@aglyn/shared-ui-theme'\nimport {\n  alpha,\n  AppBar as MuiAppBar,\n  type AppBarProps as MuiAppBarProps,\n  Breadcrumbs as MuiBreadcrumbs,\n  breadcrumbsClasses,\n  type BreadcrumbsProps as MuiBreadcrumbsProps,\n  ButtonBase as MuiButtonBase,\n  type ButtonBaseProps as ButtonBaseProps,\n  Chip,\n  Stack,\n  Toolbar as MuiToolbar,\n} from '@mui/material'\nimport clsx from 'clsx'\nimport { observer } from 'mobx-react-lite'\nimport { forwardRef, useCallback, useEffect, useRef } from 'react'\nimport useLeafDrop from '../hooks/use-leaf-drop'\n\nconst breadcrumbItemClassKey = generateComponentClassKeys('BreadcrumbItem', [\n  'root',\n  'lastItem',\n  'hovered',\n])\n\nconst StyledBreadcrumbs = styled(MuiBreadcrumbs)(({ theme }) => {\n  const tv = (theme as any).vars || theme\n  return {\n    lineHeight: 1,\n    fontSize: 11,\n    overflowX: 'auto',\n\n    [`.${breadcrumbsClasses.ol}`]: {\n      flexWrap: 'nowrap',\n      whiteSpace: 'nowrap',\n    },\n    [`.${breadcrumbsClasses.separator}`]: {\n      margin: 0,\n      padding: 0,\n    },\n    [`.${breadcrumbsClasses.li}`]: {\n      marginLeft: theme.spacing(-0.5),\n      [`.${breadcrumbItemClassKey.root}`]: {\n        fontSize: 'inherit',\n        padding: theme.spacing(0.75),\n        paddingLeft: theme.spacing(1.75),\n        paddingRight: theme.spacing(1.75),\n        marginLeft: theme.spacing(-0.5),\n        clipPath: `polygon(calc(100% - ${theme.spacing(\n          1,\n        )}) 0px, 100% 50%, calc(100% - ${theme.spacing(\n          1,\n        )}) 100%, 0% 100%, ${theme.spacing(1)} 50%, 0% 0%)`,\n\n        color: tv.palette.text.primary,\n        background: `rgba(${tv.palette.primary.lightChannel} / ${theme.palette.action.hoverOpacity})`,\n        [`:hover, .${breadcrumbItemClassKey.hovered}`]: {\n          background: `rgba(${tv.palette.primary.lightChannel} / ${theme.palette.action.activatedOpacity})`,\n        },\n        [`:focus`]: {\n          background: `rgba(${tv.palette.primary.lightChannel} / ${theme.palette.action.focusOpacity})`,\n        },\n        [`:active`]: {\n          background: `rgba(${tv.palette.primary.lightChannel} / ${theme.palette.action.activatedOpacity})`,\n        },\n      },\n\n      [':before']: {\n        content: '\"\"',\n        position: 'absolute',\n        top: 0,\n        height: '100%',\n        width: `calc(${theme.spacing(1)} + 1px)`,\n        backgroundColor: tv.palette.divider,\n        marginLeft: theme.spacing(-0.5),\n        clipPath: `polygon(calc(100% - ${theme.spacing(\n          1,\n        )}) 0px, 100% 50%, calc(100% - ${theme.spacing(\n          1,\n        )}) 100%, 0% 100%, ${theme.spacing(1)} 50%, 0% 0%)`,\n      },\n\n      [`:first-of-type .${breadcrumbItemClassKey.root}`]: {\n        clipPath: `polygon(calc(100% - ${theme.spacing(\n          1,\n        )}) 0px, 100% 50%, calc(100% - ${theme.spacing(\n          1,\n        )}) 100%, 0% 100%, 0% 0%, 0% 0%)`,\n      },\n\n      [[\n        `:last-of-type .${breadcrumbItemClassKey.root}`,\n        `.${breadcrumbItemClassKey.root} .${breadcrumbItemClassKey.lastItem}`,\n      ].join()]: {\n        color: tv.palette.text.primary,\n        background: `rgba(${tv.palette.secondary.lightChannel} / ${theme.palette.action.selectedOpacity})`,\n        [`:hover, ${breadcrumbItemClassKey.hovered}`]: {\n          background: `rgba(${tv.palette.secondary.lightChannel} / ${theme.palette.action.activatedOpacity})`,\n        },\n        [`:focus, .Mui-focusVisible`]: {\n          background: `rgba(${tv.palette.secondary.lightChannel} / ${theme.palette.action.focusOpacity})`,\n        },\n        [`:active`]: {\n          background: `rgba(${tv.palette.secondary.lightChannel} / ${theme.palette.action.hoverOpacity})`,\n        },\n      },\n    },\n  }\n})\n\nexport interface BreadcrumbItemProps\n  extends Partial<\n    Omit<\n      ButtonBaseProps<'button'>,\n      'onClick' | 'onMouseEnter' | 'onFocusVisible'\n    >\n  > {\n  $id: Aglyn.NodeId\n  lastItem?: boolean\n  onClick?: (e, node: Aglyn.NodeSchema<any>) => void\n  onMouseEnter?: (e, node: Aglyn.NodeSchema<any>) => void\n  onFocusVisible?: (e, node: Aglyn.NodeSchema<any>) => void\n}\n\nconst BreadcrumbItem = observer((props: BreadcrumbItemProps) => {\n  const {\n    children,\n    $id,\n    lastItem,\n    onClick,\n    onMouseEnter,\n    onFocusVisible,\n    ...rest\n  } = props\n  const node = canvas.getNode($id)\n  const isHovered = Besigner.focus.isNodeHovered(node)\n  const { setNodeRef: setDroppableNodeRef } = useLeafDrop(\n    node,\n    undefined,\n    'breadcrumbs',\n  )\n\n  const handleClick = useCallback(\n    (e) => {\n      onClick && onClick(e, node)\n    },\n    [onClick, node],\n  )\n\n  const handleMouseEnter = useCallback(\n    (e) => {\n      onMouseEnter && onMouseEnter(e, node)\n    },\n    [onMouseEnter, node],\n  )\n\n  const handleFocusVisible = useCallback(\n    (e) => {\n      onFocusVisible && onFocusVisible(e, node)\n    },\n    [onFocusVisible, node],\n  )\n\n  return (\n    <MuiButtonBase\n      ref={setDroppableNodeRef}\n      onClick={handleClick}\n      onMouseEnter={handleMouseEnter}\n      onFocusVisible={handleFocusVisible}\n      className={clsx(breadcrumbItemClassKey.root, {\n        [breadcrumbItemClassKey.lastItem]: lastItem,\n        [breadcrumbItemClassKey.hovered]: isHovered,\n      })}\n      {...rest}\n    >\n      <>\n        {node?.labelShort}\n        {children}\n      </>\n    </MuiButtonBase>\n  )\n})\n\ninterface BreadcrumbsProps extends Partial<MuiBreadcrumbsProps> {}\n\nconst Breadcrumbs = observer((props: BreadcrumbsProps) => {\n  const { children, sx, ...rest } = props\n  const lastSelected = Besigner.focus.getLastSelected()\n  const selectionCount = Besigner.focus.selectionCount()\n\n  const handleClick = useCallback((e, node: Aglyn.NodeSchema<any>) => {\n    Besigner.focus.setSelectedNode(node)\n  }, [])\n\n  const handleMouseEnter = useCallback((e, node: Aglyn.NodeSchema<any>) => {\n    Besigner.focus.setHoveredNode(node)\n  }, [])\n\n  const handleFocusVisible = useCallback((e, node: Aglyn.NodeSchema<any>) => {\n    Besigner.focus.setHoveredNode(node)\n  }, [])\n\n  return (\n    <StyledBreadcrumbs\n      separator={null}\n      aria-label=\"breadcrumb\"\n      sx={sx}\n      {...rest}\n    >\n      {lastSelected?.breadcrumbPath.map(($id) => {\n        return (\n          <BreadcrumbItem\n            key={$id}\n            $id={$id}\n            onClick={handleClick}\n            onMouseEnter={handleMouseEnter}\n            onFocusVisible={handleFocusVisible}\n            lastItem={lastSelected?.$id === $id}\n          />\n        )\n      })}\n      {selectionCount > 1 ? (\n        <Chip\n          label={`+${selectionCount - 1} selected`}\n          size=\"small\"\n          variant=\"outlined\"\n          color=\"primary\"\n          sx={{ ml: 0.5, height: 18, fontSize: '0.65rem' }}\n        />\n      ) : null}\n    </StyledBreadcrumbs>\n  )\n})\n\nexport interface AppBarBreadcrumbsComponentProps\n  extends Partial<MuiAppBarProps> {}\n\nexport const AppBarBreadcrumbsComponent = forwardRef<\n  any,\n  AppBarBreadcrumbsComponentProps\n>((props, ref) => {\n  const { children, sx, ...rest } = props\n\n  // This strip is the canvas column's bottom chrome, so it is what a\n  // viewport-fixed affordance in that corner would clip (AGL-2486). It\n  // publishes its own height as the stand-off the Assist launcher reads;\n  // measured rather than assumed, because \"24px dense toolbar plus a\n  // border\" is exactly the kind of constant that stops being true the\n  // first time a chip wraps.\n  const stripRef = useRef<HTMLElement | null>(null)\n  const setRefs = useCallback(\n    (node: HTMLElement | null) => {\n      stripRef.current = node\n      if (typeof ref === 'function') ref(node)\n      else if (ref) (ref as { current: unknown }).current = node\n    },\n    [ref],\n  )\n  useEffect(() => {\n    const node = stripRef.current\n    if (!node) return undefined\n    const root = document.documentElement\n    const property = '--aglyn-assist-inset-bottom'\n    const publish = () => {\n      const { height } = node.getBoundingClientRect()\n      root.style.setProperty(property, `${Math.round(height) + 20}px`)\n    }\n    publish()\n    // Guarded: jsdom has no ResizeObserver, and the initial publish above\n    // is the part that matters — the observer only keeps it honest.\n    const observer =\n      typeof ResizeObserver === 'undefined' ? null : new ResizeObserver(publish)\n    observer?.observe(node)\n    return () => {\n      observer?.disconnect()\n      root.style.removeProperty(property)\n    }\n  }, [])\n\n  return (\n    <MuiAppBar\n      ref={setRefs}\n      id=\"aglyn:besigner-appbar-secondary\"\n      aria-label=\"secondary app toolbar\"\n      position=\"static\"\n      color=\"surface\"\n      component=\"header\"\n      elevation={0}\n      sx={mergeSxProps(\n        {\n          top: 0,\n          // Stack above the canvas selection overlays (portaled, low z).\n          position: 'relative',\n          zIndex: 'appBar',\n          borderBottomWidth: '1px',\n          borderBottomStyle: 'solid',\n          borderBottomColor: 'divider',\n          [`& .MuiToolbar-root`]: { minHeight: 24 },\n        },\n        sx,\n      )}\n      {...rest}\n    >\n      <MuiToolbar variant=\"dense\" sx={{ px: { xs: 0, sm: 0 } }}>\n        <Stack\n          direction=\"row\"\n          spacing={1}\n          sx={{\n            alignItems: \"center\",\n            justifyContent: \"space-between\",\n            width: 1\n          }}>\n          <Breadcrumbs />\n          {children}\n        </Stack>\n      </MuiToolbar>\n    </MuiAppBar>\n  );\n})\n\nAppBarBreadcrumbsComponent.displayName = 'AppBarBreadcrumbsComponent'\nAppBarBreadcrumbsComponent.aglyn = true\n\nexport default AppBarBreadcrumbsComponent\n"],"names":["canvas","Besigner","generateComponentClassKeys","mergeSxProps","styled","AppBar","MuiAppBar","Breadcrumbs","MuiBreadcrumbs","breadcrumbsClasses","ButtonBase","MuiButtonBase","Chip","Stack","Toolbar","MuiToolbar","clsx","observer","forwardRef","useCallback","useEffect","useRef","useLeafDrop","breadcrumbItemClassKey","StyledBreadcrumbs","theme","tv","vars","lineHeight","fontSize","overflowX","ol","flexWrap","whiteSpace","separator","margin","padding","li","marginLeft","spacing","root","paddingLeft","paddingRight","clipPath","color","palette","text","primary","background","lightChannel","action","hoverOpacity","hovered","activatedOpacity","focusOpacity","content","position","top","height","width","backgroundColor","divider","lastItem","join","secondary","selectedOpacity","BreadcrumbItem","props","children","$id","onClick","onMouseEnter","onFocusVisible","rest","node","getNode","isHovered","focus","isNodeHovered","setNodeRef","setDroppableNodeRef","undefined","handleClick","e","handleMouseEnter","handleFocusVisible","ref","className","labelShort","sx","lastSelected","getLastSelected","selectionCount","setSelectedNode","setHoveredNode","aria-label","breadcrumbPath","map","label","size","variant","ml","AppBarBreadcrumbsComponent","stripRef","setRefs","current","document","documentElement","property","publish","getBoundingClientRect","style","setProperty","Math","round","ResizeObserver","observe","disconnect","removeProperty","id","component","elevation","zIndex","borderBottomWidth","borderBottomStyle","borderBottomColor","minHeight","px","xs","sm","direction","alignItems","justifyContent","displayName","aglyn"],"mappings":"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"}

package/src/lib/components/app-bar-primary.component.d.ts

@@ -0,0 +1,21 @@
+/**
+ * @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 AppBarProps } from '@mui/material/AppBar';
+export interface AppBarPrimaryComponentProps extends Partial<AppBarProps> {
+}
+export declare const AppBarPrimaryComponent: import("react").ForwardRefExoticComponent<Omit<AppBarPrimaryComponentProps, "ref"> & import("react").RefAttributes<any>>;
+export default AppBarPrimaryComponent;

package/src/lib/components/app-bar-primary.component.js

@@ -0,0 +1,108 @@
+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 { ICON_VARIANT_THEME_DARK, ICON_VARIANT_THEME_LIGHT, ICON_VARIANT_THEME_SYSTEM } from "@aglyn/shared-data-enums";
+import { AglynSvgIcon, BesignerSvgLogo, HelpTip } from "@aglyn/shared-ui-jsx";
+import { MdiIcon } from "@aglyn/shared-ui-jsx";
+import { getThemeModeDisplayName, styled } from "@aglyn/shared-ui-theme";
+import AppBar from "@mui/material/AppBar";
+import Box from "@mui/material/Box";
+import MuiIconButton from "@mui/material/IconButton";
+import { useColorScheme } from "@mui/material/styles";
+import Toolbar from "@mui/material/Toolbar";
+import MuiTooltip from "@mui/material/Tooltip";
+import { forwardRef } from "react";
+import { besignerDocsUrl } from "../utils/docs-help.js";
+const AppBarPrimary = styled(AppBar, {
+    name: 'AglynAppBarPrimary'
+})(({ theme })=>{
+    const tv = theme.vars || theme;
+    return {
+        top: 0,
+        // backgroundColor: theme.palette.background.paper,
+        borderBottom: `1px solid ${tv.palette.divider}`
+    };
+});
+export const AppBarPrimaryComponent = /*#__PURE__*/ forwardRef((props, ref)=>{
+    const { children } = props, rest = _object_without_properties_loose(props, [
+        "children"
+    ]);
+    const { mode, setMode } = useColorScheme();
+    const themeModeDisplayName = getThemeModeDisplayName(mode);
+    return /*#__PURE__*/ _jsx(AppBarPrimary, _extends({
+        ref: ref,
+        id: "aglyn:besigner-appbar-primary",
+        "aria-label": "primary app toolbar",
+        position: "static",
+        color: "surface",
+        elevation: 0
+    }, rest, {
+        children: /*#__PURE__*/ _jsxs(Toolbar, {
+            children: [
+                /*#__PURE__*/ _jsx(AglynSvgIcon, {
+                    sx: {
+                        fontSize: `1.75em`,
+                        borderRadius: (theme)=>theme.shape.appIconBorderRadius,
+                        // boxShadow: theme.shadows[1],
+                        ml: -1.5,
+                        mr: 0.75
+                    }
+                }),
+                /*#__PURE__*/ _jsx(BesignerSvgLogo, {
+                    sx: {
+                        width: 'auto'
+                    },
+                    fontSize: "medium",
+                    color: "inherit"
+                }),
+                /*#__PURE__*/ _jsx(HelpTip, {
+                    title: "The Besigner",
+                    excerpt: "The visual editor: drag elements onto the canvas, edit text inline, style per breakpoint, and publish a version.",
+                    href: besignerDocsUrl('besigner', '#what-you-can-do'),
+                    sx: {
+                        ml: 0.5,
+                        fontSize: '0.9em'
+                    }
+                }),
+                /*#__PURE__*/ _jsx(Box, {
+                    sx: {
+                        flexGrow: 1
+                    }
+                }),
+                /*#__PURE__*/ _jsx(MuiTooltip, {
+                    "aria-label": "switch theme mode",
+                    title: `${themeModeDisplayName} theme`,
+                    children: /*#__PURE__*/ _jsx(MuiIconButton, {
+                        onClick: ()=>{
+                            setMode(mode === 'dark' ? 'system' : mode === 'light' ? 'dark' : mode === 'system' || mode === undefined ? 'light' : 'system');
+                        },
+                        children: /*#__PURE__*/ _jsx(MdiIcon, {
+                            path: mode === 'dark' ? ICON_VARIANT_THEME_DARK.path : mode === 'light' ? ICON_VARIANT_THEME_LIGHT.path : ICON_VARIANT_THEME_SYSTEM.path
+                        })
+                    })
+                }),
+                children
+            ]
+        })
+    }));
+});
+AppBarPrimaryComponent.displayName = 'AppBarPrimaryComponent';
+AppBarPrimaryComponent.aglyn = true;
+export default AppBarPrimaryComponent;
+
+//# sourceMappingURL=app-bar-primary.component.js.map

package/src/lib/components/app-bar-primary.component.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../libs/besigner/feature/designer/src/lib/components/app-bar-primary.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 {\n  ICON_VARIANT_THEME_DARK,\n  ICON_VARIANT_THEME_LIGHT,\n  ICON_VARIANT_THEME_SYSTEM,\n} from '@aglyn/shared-data-enums'\nimport { AglynSvgIcon, BesignerSvgLogo, HelpTip } from '@aglyn/shared-ui-jsx'\nimport { MdiIcon } from '@aglyn/shared-ui-jsx'\nimport { getThemeModeDisplayName, styled } from '@aglyn/shared-ui-theme'\nimport AppBar, { type AppBarProps } from '@mui/material/AppBar'\nimport Box from '@mui/material/Box'\nimport MuiIconButton from '@mui/material/IconButton'\nimport { useColorScheme } from '@mui/material/styles'\nimport Toolbar from '@mui/material/Toolbar'\nimport MuiTooltip from '@mui/material/Tooltip'\nimport { forwardRef } from 'react'\nimport { besignerDocsUrl } from '../utils/docs-help'\n\nconst AppBarPrimary = styled(AppBar, {\n  name: 'AglynAppBarPrimary',\n})(({ theme }) => {\n  const tv = (theme as any).vars || theme\n  return {\n    top: 0,\n    // backgroundColor: theme.palette.background.paper,\n    borderBottom: `1px solid ${tv.palette.divider}`,\n  }\n})\n\nexport interface AppBarPrimaryComponentProps extends Partial<AppBarProps> {}\n\nexport const AppBarPrimaryComponent = forwardRef<\n  any,\n  AppBarPrimaryComponentProps\n>((props, ref) => {\n  const { children, ...rest } = props\n  const { mode, setMode } = useColorScheme()\n  const themeModeDisplayName = getThemeModeDisplayName(mode)\n\n  return (\n    <AppBarPrimary\n      ref={ref}\n      id=\"aglyn:besigner-appbar-primary\"\n      aria-label=\"primary app toolbar\"\n      position=\"static\"\n      color=\"surface\"\n      elevation={0}\n      {...rest}\n    >\n      <Toolbar>\n        <AglynSvgIcon\n          sx={{\n            fontSize: `1.75em`,\n            borderRadius: (theme) => theme.shape.appIconBorderRadius,\n            // boxShadow: theme.shadows[1],\n            ml: -1.5,\n            mr: 0.75,\n          }}\n        />\n        <BesignerSvgLogo\n          sx={{ width: 'auto' }}\n          fontSize=\"medium\"\n          color=\"inherit\"\n        />\n        {/* The editor's one \"what is all this\" link (AGL-2167). It sits on\n            the product mark rather than in a panel because it is the only\n            help here that is about the whole canvas — every other tip in\n            the besigner explains the control it stands next to. */}\n        <HelpTip\n          title=\"The Besigner\"\n          excerpt=\"The visual editor: drag elements onto the canvas, edit text inline, style per breakpoint, and publish a version.\"\n          href={besignerDocsUrl('besigner', '#what-you-can-do')}\n          sx={{ ml: 0.5, fontSize: '0.9em' }}\n        />\n        <Box sx={{ flexGrow: 1 }} />\n        <MuiTooltip\n          aria-label=\"switch theme mode\"\n          title={`${themeModeDisplayName} theme`}\n        >\n          <MuiIconButton\n            onClick={() => {\n              setMode(\n                mode === 'dark'\n                  ? 'system'\n                  : mode === 'light'\n                  ? 'dark'\n                  : mode === 'system' || mode === undefined\n                  ? 'light'\n                  : 'system',\n              )\n            }}\n          >\n            <MdiIcon\n              path={\n                mode === 'dark'\n                  ? ICON_VARIANT_THEME_DARK.path\n                  : mode === 'light'\n                  ? ICON_VARIANT_THEME_LIGHT.path\n                  : ICON_VARIANT_THEME_SYSTEM.path\n              }\n            />\n          </MuiIconButton>\n        </MuiTooltip>\n        {children}\n      </Toolbar>\n    </AppBarPrimary>\n  )\n})\n\nAppBarPrimaryComponent.displayName = 'AppBarPrimaryComponent'\nAppBarPrimaryComponent.aglyn = true\n\nexport default AppBarPrimaryComponent\n"],"names":["ICON_VARIANT_THEME_DARK","ICON_VARIANT_THEME_LIGHT","ICON_VARIANT_THEME_SYSTEM","AglynSvgIcon","BesignerSvgLogo","HelpTip","MdiIcon","getThemeModeDisplayName","styled","AppBar","Box","MuiIconButton","useColorScheme","Toolbar","MuiTooltip","forwardRef","besignerDocsUrl","AppBarPrimary","name","theme","tv","vars","top","borderBottom","palette","divider","AppBarPrimaryComponent","props","ref","children","rest","mode","setMode","themeModeDisplayName","id","aria-label","position","color","elevation","sx","fontSize","borderRadius","shape","appIconBorderRadius","ml","mr","width","title","excerpt","href","flexGrow","onClick","undefined","path","displayName","aglyn"],"mappings":";;;AAAA;;;;;;;;;;;;;;;CAeC,GAED,SACEA,uBAAuB,EACvBC,wBAAwB,EACxBC,yBAAyB,QACpB,2BAA0B;AACjC,SAASC,YAAY,EAAEC,eAAe,EAAEC,OAAO,QAAQ,uBAAsB;AAC7E,SAASC,OAAO,QAAQ,uBAAsB;AAC9C,SAASC,uBAAuB,EAAEC,MAAM,QAAQ,yBAAwB;AACxE,OAAOC,YAAkC,uBAAsB;AAC/D,OAAOC,SAAS,oBAAmB;AACnC,OAAOC,mBAAmB,2BAA0B;AACpD,SAASC,cAAc,QAAQ,uBAAsB;AACrD,OAAOC,aAAa,wBAAuB;AAC3C,OAAOC,gBAAgB,wBAAuB;AAC9C,SAASC,UAAU,QAAQ,QAAO;AAClC,SAASC,eAAe,QAAQ,wBAAoB;AAEpD,MAAMC,gBAAgBT,OAAOC,QAAQ;IACnCS,MAAM;AACR,GAAG,CAAC,EAAEC,KAAK,EAAE;IACX,MAAMC,KAAK,AAACD,MAAcE,IAAI,IAAIF;IAClC,OAAO;QACLG,KAAK;QACL,mDAAmD;QACnDC,cAAc,CAAC,UAAU,EAAEH,GAAGI,OAAO,CAACC,OAAO,EAAE;IACjD;AACF;AAIA,OAAO,MAAMC,uCAAyBX,WAGpC,CAACY,OAAOC;IACR,MAAM,EAAEC,QAAQ,EAAW,GAAGF,OAATG,wCAASH;;;IAC9B,MAAM,EAAEI,IAAI,EAAEC,OAAO,EAAE,GAAGpB;IAC1B,MAAMqB,uBAAuB1B,wBAAwBwB;IAErD,qBACE,KAACd;QACCW,KAAKA;QACLM,IAAG;QACHC,cAAW;QACXC,UAAS;QACTC,OAAM;QACNC,WAAW;OACPR;kBAEJ,cAAA,MAACjB;;8BACC,KAACV;oBACCoC,IAAI;wBACFC,UAAU,CAAC,MAAM,CAAC;wBAClBC,cAAc,CAACtB,QAAUA,MAAMuB,KAAK,CAACC,mBAAmB;wBACxD,+BAA+B;wBAC/BC,IAAI,CAAC;wBACLC,IAAI;oBACN;;8BAEF,KAACzC;oBACCmC,IAAI;wBAAEO,OAAO;oBAAO;oBACpBN,UAAS;oBACTH,OAAM;;8BAMR,KAAChC;oBACC0C,OAAM;oBACNC,SAAQ;oBACRC,MAAMjC,gBAAgB,YAAY;oBAClCuB,IAAI;wBAAEK,IAAI;wBAAKJ,UAAU;oBAAQ;;8BAEnC,KAAC9B;oBAAI6B,IAAI;wBAAEW,UAAU;oBAAE;;8BACvB,KAACpC;oBACCqB,cAAW;oBACXY,OAAO,GAAGd,qBAAqB,MAAM,CAAC;8BAEtC,cAAA,KAACtB;wBACCwC,SAAS;4BACPnB,QACED,SAAS,SACL,WACAA,SAAS,UACT,SACAA,SAAS,YAAYA,SAASqB,YAC9B,UACA;wBAER;kCAEA,cAAA,KAAC9C;4BACC+C,MACEtB,SAAS,SACL/B,wBAAwBqD,IAAI,GAC5BtB,SAAS,UACT9B,yBAAyBoD,IAAI,GAC7BnD,0BAA0BmD,IAAI;;;;gBAKzCxB;;;;AAIT,GAAE;AAEFH,uBAAuB4B,WAAW,GAAG;AACrC5B,uBAAuB6B,KAAK,GAAG;AAE/B,eAAe7B,uBAAsB"}

package/src/lib/components/app-bar-secondary.component.d.ts

@@ -0,0 +1,21 @@
+/**
+ * @license
+ * Copyright 2023 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 AppBarProps as MuiAppBarProps } from '@mui/material';
+export interface AppBarSecondaryComponentProps extends Partial<MuiAppBarProps> {
+}
+export declare const AppBarSecondaryComponent: import("react").ForwardRefExoticComponent<Omit<AppBarSecondaryComponentProps, "ref"> & import("react").RefAttributes<any>>;
+export default AppBarSecondaryComponent;

package/src/lib/components/app-bar-secondary.component.js

@@ -0,0 +1,94 @@
+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 2023 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 { mergeSxProps } from "@aglyn/shared-ui-theme";
+import { AppBar as MuiAppBar, Stack, Toolbar as MuiToolbar } from "@mui/material";
+import { forwardRef } from "react";
+import AddControlsComponent from "./add-controls.component.js";
+import DevicePreviewControlsComponent from "./device-preview-controls.component.js";
+import HistoryControlsComponent from "./history-controls.component.js";
+import PanelControlsComponent from "./panel-controls.component.js";
+import { useBesignerToolbarExtras } from "../contexts/toolbar-extras-context.js";
+import BindingPreviewControlsComponent from "./binding-preview-controls.component.js";
+import SchemePreviewControlsComponent from "./scheme-preview-controls.component.js";
+export const AppBarSecondaryComponent = /*#__PURE__*/ forwardRef((props, ref)=>{
+    const { children, sx } = props, rest = _object_without_properties_loose(props, [
+        "children",
+        "sx"
+    ]);
+    const toolbarExtras = useBesignerToolbarExtras();
+    return /*#__PURE__*/ _jsx(MuiAppBar, _extends({
+        ref: ref,
+        id: "aglyn:besigner-appbar-secondary",
+        "aria-label": "secondary app toolbar",
+        position: "static",
+        color: "surface",
+        component: "header",
+        elevation: 0,
+        sx: mergeSxProps({
+            top: 0,
+            // Stack above the canvas selection overlays (portaled, low z).
+            position: 'relative',
+            zIndex: 'appBar',
+            borderBottomWidth: '1px',
+            borderBottomStyle: 'solid',
+            borderBottomColor: 'divider',
+            [`& .MuiToolbar-root`]: {
+                minHeight: 40
+            }
+        }, sx)
+    }, rest, {
+        children: /*#__PURE__*/ _jsx(MuiToolbar, {
+            variant: "dense",
+            sx: {
+                pr: {
+                    xs: 2,
+                    sm: 2
+                }
+            },
+            children: /*#__PURE__*/ _jsxs(Stack, {
+                direction: "row",
+                spacing: 1,
+                sx: {
+                    alignItems: "center",
+                    justifyContent: "space-between",
+                    width: 1
+                },
+                children: [
+                    /*#__PURE__*/ _jsx(AddControlsComponent, {}),
+                    /*#__PURE__*/ _jsx(HistoryControlsComponent, {
+                        sx: {
+                            flexGrow: 1
+                        }
+                    }),
+                    toolbarExtras,
+                    /*#__PURE__*/ _jsx(BindingPreviewControlsComponent, {}),
+                    /*#__PURE__*/ _jsx(SchemePreviewControlsComponent, {}),
+                    /*#__PURE__*/ _jsx(DevicePreviewControlsComponent, {}),
+                    /*#__PURE__*/ _jsx(PanelControlsComponent, {}),
+                    children
+                ]
+            })
+        })
+    }));
+});
+AppBarSecondaryComponent.displayName = 'AppBarSecondaryComponent';
+AppBarSecondaryComponent.aglyn = true;
+export default AppBarSecondaryComponent;
+
+//# sourceMappingURL=app-bar-secondary.component.js.map

package/src/lib/components/app-bar-secondary.component.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../libs/besigner/feature/designer/src/lib/components/app-bar-secondary.component.tsx"],"sourcesContent":["/**\n * @license\n * Copyright 2023 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 { mergeSxProps } from '@aglyn/shared-ui-theme'\nimport {\n  AppBar as MuiAppBar,\n  type AppBarProps as MuiAppBarProps,\n  Stack,\n  Toolbar as MuiToolbar,\n} from '@mui/material'\nimport { forwardRef } from 'react'\nimport AddControlsComponent from './add-controls.component'\nimport DevicePreviewControlsComponent from './device-preview-controls.component'\nimport HistoryControlsComponent from './history-controls.component'\nimport PanelControlsComponent from './panel-controls.component'\nimport { useBesignerToolbarExtras } from '../contexts/toolbar-extras-context'\nimport BindingPreviewControlsComponent from './binding-preview-controls.component'\nimport SchemePreviewControlsComponent from './scheme-preview-controls.component'\n\nexport interface AppBarSecondaryComponentProps\n  extends Partial<MuiAppBarProps> {}\n\nexport const AppBarSecondaryComponent = forwardRef<\n  any,\n  AppBarSecondaryComponentProps\n>((props, ref) => {\n  const { children, sx, ...rest } = props\n  const toolbarExtras = useBesignerToolbarExtras()\n\n  return (\n    <MuiAppBar\n      ref={ref}\n      id=\"aglyn:besigner-appbar-secondary\"\n      aria-label=\"secondary app toolbar\"\n      position=\"static\"\n      color=\"surface\"\n      component=\"header\"\n      elevation={0}\n      sx={mergeSxProps(\n        {\n          top: 0,\n          // Stack above the canvas selection overlays (portaled, low z).\n          position: 'relative',\n          zIndex: 'appBar',\n          borderBottomWidth: '1px',\n          borderBottomStyle: 'solid',\n          borderBottomColor: 'divider',\n          [`& .MuiToolbar-root`]: { minHeight: 40 },\n        },\n        sx,\n      )}\n      {...rest}\n    >\n      <MuiToolbar variant=\"dense\" sx={{ pr: { xs: 2, sm: 2 } }}>\n        <Stack\n          direction=\"row\"\n          spacing={1}\n          sx={{\n            alignItems: \"center\",\n            justifyContent: \"space-between\",\n            width: 1\n          }}>\n          <AddControlsComponent />\n          <HistoryControlsComponent sx={{ flexGrow: 1 }} />\n          {toolbarExtras}\n          <BindingPreviewControlsComponent />\n          <SchemePreviewControlsComponent />\n          <DevicePreviewControlsComponent />\n          {/*<InteractControlsComponent />*/}\n          <PanelControlsComponent />\n          {children}\n        </Stack>\n      </MuiToolbar>\n    </MuiAppBar>\n  );\n})\n\nAppBarSecondaryComponent.displayName = 'AppBarSecondaryComponent'\nAppBarSecondaryComponent.aglyn = true\n\nexport default AppBarSecondaryComponent\n"],"names":["mergeSxProps","AppBar","MuiAppBar","Stack","Toolbar","MuiToolbar","forwardRef","AddControlsComponent","DevicePreviewControlsComponent","HistoryControlsComponent","PanelControlsComponent","useBesignerToolbarExtras","BindingPreviewControlsComponent","SchemePreviewControlsComponent","AppBarSecondaryComponent","props","ref","children","sx","rest","toolbarExtras","id","aria-label","position","color","component","elevation","top","zIndex","borderBottomWidth","borderBottomStyle","borderBottomColor","minHeight","variant","pr","xs","sm","direction","spacing","alignItems","justifyContent","width","flexGrow","displayName","aglyn"],"mappings":";;;AAAA;;;;;;;;;;;;;;;CAeC,GAED,SAASA,YAAY,QAAQ,yBAAwB;AACrD,SACEC,UAAUC,SAAS,EAEnBC,KAAK,EACLC,WAAWC,UAAU,QAChB,gBAAe;AACtB,SAASC,UAAU,QAAQ,QAAO;AAClC,OAAOC,0BAA0B,8BAA0B;AAC3D,OAAOC,oCAAoC,yCAAqC;AAChF,OAAOC,8BAA8B,kCAA8B;AACnE,OAAOC,4BAA4B,gCAA4B;AAC/D,SAASC,wBAAwB,QAAQ,wCAAoC;AAC7E,OAAOC,qCAAqC,0CAAsC;AAClF,OAAOC,oCAAoC,yCAAqC;AAKhF,OAAO,MAAMC,yCAA2BR,WAGtC,CAACS,OAAOC;IACR,MAAM,EAAEC,QAAQ,EAAEC,EAAE,EAAW,GAAGH,OAATI,wCAASJ;;;;IAClC,MAAMK,gBAAgBT;IAEtB,qBACE,KAACT;QACCc,KAAKA;QACLK,IAAG;QACHC,cAAW;QACXC,UAAS;QACTC,OAAM;QACNC,WAAU;QACVC,WAAW;QACXR,IAAIlB,aACF;YACE2B,KAAK;YACL,+DAA+D;YAC/DJ,UAAU;YACVK,QAAQ;YACRC,mBAAmB;YACnBC,mBAAmB;YACnBC,mBAAmB;YACnB,CAAC,CAAC,kBAAkB,CAAC,CAAC,EAAE;gBAAEC,WAAW;YAAG;QAC1C,GACAd;OAEEC;kBAEJ,cAAA,KAACd;YAAW4B,SAAQ;YAAQf,IAAI;gBAAEgB,IAAI;oBAAEC,IAAI;oBAAGC,IAAI;gBAAE;YAAE;sBACrD,cAAA,MAACjC;gBACCkC,WAAU;gBACVC,SAAS;gBACTpB,IAAI;oBACFqB,YAAY;oBACZC,gBAAgB;oBAChBC,OAAO;gBACT;;kCACA,KAAClC;kCACD,KAACE;wBAAyBS,IAAI;4BAAEwB,UAAU;wBAAE;;oBAC3CtB;kCACD,KAACR;kCACD,KAACC;kCACD,KAACL;kCAED,KAACE;oBACAO;;;;;AAKX,GAAE;AAEFH,yBAAyB6B,WAAW,GAAG;AACvC7B,yBAAyB8B,KAAK,GAAG;AAEjC,eAAe9B,yBAAwB"}

package/src/lib/components/aside-panel.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 BesignerPanelKey } from '@aglyn/besigner';
+import { type WorkspacePanelComponentProps } from './workspace-panel.component';
+export interface AsidePanelComponentProps extends WorkspacePanelComponentProps {
+    panel: BesignerPanelKey;
+}
+export declare const AsidePanelComponent: import("react").ForwardRefExoticComponent<Omit<AsidePanelComponentProps, "ref"> & import("react").RefAttributes<any>>;
+export default AsidePanelComponent;