@aglyn/besigner-ui 1.0.0-beta.143

package/src/lib/components/accordion-list.component.js

@@ -0,0 +1,228 @@
+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 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_COLLAPSIBLE_OPEN } from "@aglyn/shared-data-enums";
+import { HelpTip, MdiIcon } from "@aglyn/shared-ui-jsx";
+import { styled } from "@aglyn/shared-ui-theme";
+import { Accordion as MuiAccordion, AccordionDetails as MuiAccordionDetails, AccordionSummary as MuiAccordionSummary } from "@mui/material";
+import { observer } from "mobx-react-lite";
+import { forwardRef, useCallback, useState } from "react";
+const StyledAccordion = styled(MuiAccordion)(({ theme })=>{
+    var _ref, _ref1;
+    var _tv_palette_surface, _tv_palette_background;
+    // In CSS vars mode, theme.palette.* is always the static light values.
+    // Use (theme.vars || theme) so these become live CSS custom-property refs.
+    const tv = theme.vars || theme;
+    return {
+        border: `1px solid ${tv.palette.divider}`,
+        borderLeft: 0,
+        borderRight: 0,
+        // Collapse the shared edge between stacked accordions. Keyed off the
+        // preceding sibling rather than `:not(:last-of-type)`, which compares
+        // against every sibling *div* — so a run followed by any other element
+        // (the styles panel ends with a Container) matched no accordion at all
+        // and the stack lost its closing border. For a contiguous run the two
+        // are equivalent: n top edges + 1 bottom, vs 1 top + n bottom edges.
+        '& + &': {
+            borderTop: 0
+        },
+        '&:before': {
+            display: 'none'
+        },
+        '& .MuiAccordionSummary-root': {
+            textTransform: 'uppercase',
+            /*
+     * `surface` is an AGLYN palette extension, not a MUI one, so it is absent
+     * from any theme that did not come from `console.theme.ts` — a
+     * self-hosted deployment with its own palette, and every test that mounts
+     * a component containing this one under a bare `createTheme()`. Reading
+     * it unguarded did not degrade there, it THREW, which turns "this
+     * accordion is the wrong grey" into "the panel does not render".
+     */ backgroundColor: (_ref = (_ref1 = (_tv_palette_surface = tv.palette.surface) == null ? void 0 : _tv_palette_surface.main) != null ? _ref1 : (_tv_palette_background = tv.palette.background) == null ? void 0 : _tv_palette_background.paper) != null ? _ref : undefined,
+            flexDirection: 'row-reverse',
+            minHeight: 38,
+            fontSize: theme.typography.pxToRem(14),
+            '& .MuiAccordionSummary-expandIconWrapper.Mui-expanded': {
+                transform: 'rotate(90deg)'
+            },
+            '& .MuiAccordionSummary-content': {
+                marginLeft: theme.spacing(1),
+                marginBottom: theme.spacing(1),
+                marginTop: theme.spacing(1)
+            },
+            '&': {}
+        },
+        '& .MuiAccordionDetails-root': {
+            padding: theme.spacing(2),
+            borderTop: `1px solid ${tv.palette.divider}`
+        }
+    };
+});
+export const Accordion = /*#__PURE__*/ forwardRef((props, ref)=>{
+    const { expanded: expandedProp, onChange, AccordionSummaryProps, AccordionDetailsProps, summary, help, children } = props, rest = _object_without_properties_loose(props, [
+        "expanded",
+        "onChange",
+        "AccordionSummaryProps",
+        "AccordionDetailsProps",
+        "summary",
+        "help",
+        "children"
+    ]);
+    // Always a boolean so MUI sees a controlled Accordion from the first
+    // render — seeding with an omitted (undefined) prop rendered it
+    // uncontrolled until the first toggle flipped it controlled (AGL-590).
+    const [expanded, setExpanded] = useState(Boolean(expandedProp));
+    // ...and it has to keep FOLLOWING the prop, not just start from it
+    // (AGL-2486). Seeding once made this a write-only prop: a parent that
+    // opened a group after mount changed `expandedProp` and nothing moved,
+    // which is how a search whose results group is created asynchronously
+    // rendered shut and showed an empty panel. Adjusted during render rather
+    // than in an effect so the open state never commits a frame behind the
+    // prop — an effect would paint the group shut first and animate it open.
+    const [lastExpandedProp, setLastExpandedProp] = useState(expandedProp);
+    if (expandedProp !== lastExpandedProp) {
+        setLastExpandedProp(expandedProp);
+        setExpanded(Boolean(expandedProp));
+    }
+    const handleToggle = useCallback((e, expanded)=>{
+        setExpanded(Boolean(expanded));
+        onChange == null ? void 0 : onChange(e, expanded);
+    }, [
+        onChange
+    ]);
+    return /*#__PURE__*/ _jsxs(StyledAccordion, _extends({
+        ref: ref,
+        onChange: handleToggle,
+        elevation: 0,
+        expanded: expanded,
+        disableGutters: true,
+        square: true
+    }, rest, {
+        children: [
+            /*#__PURE__*/ _jsxs(MuiAccordionSummary, _extends({
+                sx: {
+                    position: 'sticky',
+                    top: 0,
+                    zIndex: 5
+                },
+                expandIcon: /*#__PURE__*/ _jsx(MdiIcon, {
+                    path: ICON_VARIANT_COLLAPSIBLE_OPEN.path,
+                    sx: {
+                        fontSize: '0.9rem'
+                    }
+                })
+            }, AccordionSummaryProps, {
+                children: [
+                    summary,
+                    help && /*#__PURE__*/ _jsx(HelpTip, _extends({}, help, {
+                        sx: {
+                            fontSize: '0.8em',
+                            ml: 0.5,
+                            my: -0.5
+                        },
+                        onClick: (event)=>event.stopPropagation()
+                    }))
+                ]
+            })),
+            /*#__PURE__*/ _jsx(MuiAccordionDetails, _extends({
+                sx: {
+                    zIndex: 1
+                }
+            }, AccordionDetailsProps, {
+                children: children
+            }))
+        ]
+    }));
+});
+export const AccordionListComponent = observer((props)=>{
+    const { items, defaultExpanded, onRenderSummary, onRenderDetail, AccordionProps, AccordionSummaryProps, AccordionDetailsProps, unique, getItemId, getItemHelp } = props;
+    const [expanded, setExpanded] = useState(()=>[
+            ...defaultExpanded || []
+        ]);
+    /**
+     * A group that appears AFTER mount opens (AGL-2486).
+     *
+     * `defaultExpanded` used to be read once, in the initialiser, so a list
+     * whose groups arrive later got none of them — the element pickers build
+     * their "Best matches" group after an await (fuse.js loads dynamically),
+     * so it was always a late arrival and always rendered shut. The callers
+     * papered over it with a `key` that remounted the whole list, which
+     * cannot work: the remount happens when the QUERY changes, one render
+     * before the results group exists.
+     *
+     * Seeded ids are remembered so this only ever opens a group the first
+     * time it is seen. Re-deriving from `defaultExpanded` every render would
+     * instead re-open every group the user deliberately closed, on the next
+     * unrelated render.
+     */ const [seeded, setSeeded] = useState(()=>[
+            ...defaultExpanded || []
+        ]);
+    const arrived = (defaultExpanded || []).filter((id)=>!seeded.some((seen)=>seen === id));
+    if (arrived.length) {
+        setSeeded((prev)=>[
+                ...prev,
+                ...arrived
+            ]);
+        setExpanded((prev)=>[
+                ...prev,
+                ...arrived
+            ]);
+    }
+    const handleToggle = useCallback((id)=>(e, expanded)=>{
+            setExpanded((prev)=>{
+                if (unique && expanded) return [
+                    id
+                ];
+                if (unique && !expanded) return [];
+                const data = [
+                    ...prev
+                ].filter((i)=>i !== id);
+                if (expanded) data.push(id);
+                return data;
+            });
+        }, [
+        unique
+    ]);
+    return /*#__PURE__*/ _jsx(_Fragment, {
+        children: items.map((item)=>{
+            const id = getItemId(item);
+            const isExpanded = expanded.some((i)=>i === id);
+            return /*#__PURE__*/ _jsx(Accordion, _extends({
+                expanded: isExpanded,
+                onChange: handleToggle(id),
+                elevation: 0,
+                disableGutters: true,
+                square: true,
+                summary: onRenderSummary({
+                    item
+                }),
+                help: getItemHelp == null ? void 0 : getItemHelp(item),
+                AccordionSummaryProps: AccordionSummaryProps,
+                AccordionDetailsProps: AccordionDetailsProps
+            }, AccordionProps, {
+                children: onRenderDetail({
+                    item
+                })
+            }), id);
+        })
+    });
+});
+AccordionListComponent.displayName = 'AccordionListComponent';
+export default AccordionListComponent;
+
+//# sourceMappingURL=accordion-list.component.js.map

package/src/lib/components/accordion-list.component.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../libs/besigner/feature/designer/src/lib/components/accordion-list.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 { ICON_VARIANT_COLLAPSIBLE_OPEN } from '@aglyn/shared-data-enums'\nimport { HelpTip, type HelpTipContent, MdiIcon } from '@aglyn/shared-ui-jsx'\nimport { styled } from '@aglyn/shared-ui-theme'\nimport {\n  Accordion as MuiAccordion,\n  AccordionDetails as MuiAccordionDetails,\n  type AccordionDetailsProps as MuiAccordionDetailsProps,\n  AccordionProps as MuiAccordionProps,\n  AccordionSummary as MuiAccordionSummary,\n  type AccordionSummaryProps as MuiAccordionSummaryProps,\n} from '@mui/material'\nimport { observer } from 'mobx-react-lite'\nimport { forwardRef, useCallback, useState } from 'react'\n\nconst StyledAccordion = styled(MuiAccordion)(({ theme }) => {\n  // In CSS vars mode, theme.palette.* is always the static light values.\n  // Use (theme.vars || theme) so these become live CSS custom-property refs.\n  const tv = (theme as any).vars || theme\n  return {\n  border: `1px solid ${tv.palette.divider}`,\n  borderLeft: 0,\n  borderRight: 0,\n  // Collapse the shared edge between stacked accordions. Keyed off the\n  // preceding sibling rather than `:not(:last-of-type)`, which compares\n  // against every sibling *div* — so a run followed by any other element\n  // (the styles panel ends with a Container) matched no accordion at all\n  // and the stack lost its closing border. For a contiguous run the two\n  // are equivalent: n top edges + 1 bottom, vs 1 top + n bottom edges.\n  '& + &': {\n    borderTop: 0,\n  },\n  '&:before': {\n    display: 'none',\n  },\n\n  '& .MuiAccordionSummary-root': {\n    textTransform: 'uppercase',\n    /*\n     * `surface` is an AGLYN palette extension, not a MUI one, so it is absent\n     * from any theme that did not come from `console.theme.ts` — a\n     * self-hosted deployment with its own palette, and every test that mounts\n     * a component containing this one under a bare `createTheme()`. Reading\n     * it unguarded did not degrade there, it THREW, which turns \"this\n     * accordion is the wrong grey\" into \"the panel does not render\".\n     */\n    backgroundColor:\n      tv.palette.surface?.main ?? tv.palette.background?.paper ?? undefined,\n    flexDirection: 'row-reverse',\n    minHeight: 38,\n    fontSize: theme.typography.pxToRem(14),\n\n    '& .MuiAccordionSummary-expandIconWrapper.Mui-expanded': {\n      transform: 'rotate(90deg)',\n    },\n    '& .MuiAccordionSummary-content': {\n      marginLeft: theme.spacing(1),\n      marginBottom: theme.spacing(1),\n      marginTop: theme.spacing(1),\n    },\n    '&': {},\n  },\n  '& .MuiAccordionDetails-root': {\n    padding: theme.spacing(2),\n    borderTop: `1px solid ${tv.palette.divider}`,\n  },\n}}) as typeof MuiAccordion\n\nexport interface AccordionProps extends MuiAccordionProps {\n  AccordionSummaryProps?: MuiAccordionSummaryProps\n  AccordionDetailsProps?: MuiAccordionDetailsProps\n  summary?: JSX.Children\n  /** Contextual help affordance rendered after the summary label (AGL-600). */\n  help?: HelpTipContent\n}\n\nexport const Accordion = forwardRef<any, AccordionProps>((props, ref) => {\n  const {\n    expanded: expandedProp,\n    onChange,\n    AccordionSummaryProps,\n    AccordionDetailsProps,\n    summary,\n    help,\n    children,\n    ...rest\n  } = props\n  // Always a boolean so MUI sees a controlled Accordion from the first\n  // render — seeding with an omitted (undefined) prop rendered it\n  // uncontrolled until the first toggle flipped it controlled (AGL-590).\n  const [expanded, setExpanded] = useState(Boolean(expandedProp))\n\n  // ...and it has to keep FOLLOWING the prop, not just start from it\n  // (AGL-2486). Seeding once made this a write-only prop: a parent that\n  // opened a group after mount changed `expandedProp` and nothing moved,\n  // which is how a search whose results group is created asynchronously\n  // rendered shut and showed an empty panel. Adjusted during render rather\n  // than in an effect so the open state never commits a frame behind the\n  // prop — an effect would paint the group shut first and animate it open.\n  const [lastExpandedProp, setLastExpandedProp] = useState(expandedProp)\n  if (expandedProp !== lastExpandedProp) {\n    setLastExpandedProp(expandedProp)\n    setExpanded(Boolean(expandedProp))\n  }\n\n  const handleToggle = useCallback(\n    (e, expanded: boolean) => {\n      setExpanded(Boolean(expanded))\n      onChange?.(e, expanded)\n    },\n    [onChange],\n  )\n\n  return (\n    <StyledAccordion\n      ref={ref}\n      onChange={handleToggle}\n      elevation={0}\n      expanded={expanded}\n      disableGutters\n      square\n      {...rest}\n    >\n      <MuiAccordionSummary\n        sx={{ position: 'sticky', top: 0, zIndex: 5 }}\n        expandIcon={\n          <MdiIcon\n            path={ICON_VARIANT_COLLAPSIBLE_OPEN.path}\n            sx={{ fontSize: '0.9rem' }}\n          />\n        }\n        {...AccordionSummaryProps}\n      >\n        {summary}\n        {help && (\n          <HelpTip\n            {...help}\n            sx={{ fontSize: '0.8em', ml: 0.5, my: -0.5 }}\n            onClick={(event) => event.stopPropagation()}\n          />\n        )}\n      </MuiAccordionSummary>\n      <MuiAccordionDetails sx={{ zIndex: 1 }} {...AccordionDetailsProps}>\n        {children}\n      </MuiAccordionDetails>\n    </StyledAccordion>\n  )\n})\n\nexport interface AccordionListProps<T = any> {\n  items: T[]\n  unique?: boolean\n  defaultExpanded?: JSX.Key[]\n  AccordionProps?: MuiAccordionProps\n  AccordionSummaryProps?: MuiAccordionSummaryProps\n  AccordionDetailsProps?: MuiAccordionDetailsProps\n  onRenderSummary: (props: { item: T }) => JSX.Children\n  onRenderDetail: (props: { item: T }) => JSX.Children\n  getItemId: (item: T) => string | number\n  /** Per-item help affordance on the accordion summary (AGL-2167). Returns\n   * undefined for the groups that need no explanation, so a list can help\n   * one group without captioning every one of them — which `AccordionProps`\n   * cannot do, since it applies to all of them alike. */\n  getItemHelp?: (item: T) => HelpTipContent | undefined\n}\n\nexport const AccordionListComponent = observer(\n  <T,>(props: AccordionListProps<T>) => {\n    const {\n      items,\n      defaultExpanded,\n      onRenderSummary,\n      onRenderDetail,\n      AccordionProps,\n      AccordionSummaryProps,\n      AccordionDetailsProps,\n      unique,\n      getItemId,\n      getItemHelp,\n    } = props\n\n    const [expanded, setExpanded] = useState<JSX.Key[]>(() => [\n      ...(defaultExpanded || []),\n    ])\n\n    /**\n     * A group that appears AFTER mount opens (AGL-2486).\n     *\n     * `defaultExpanded` used to be read once, in the initialiser, so a list\n     * whose groups arrive later got none of them — the element pickers build\n     * their \"Best matches\" group after an await (fuse.js loads dynamically),\n     * so it was always a late arrival and always rendered shut. The callers\n     * papered over it with a `key` that remounted the whole list, which\n     * cannot work: the remount happens when the QUERY changes, one render\n     * before the results group exists.\n     *\n     * Seeded ids are remembered so this only ever opens a group the first\n     * time it is seen. Re-deriving from `defaultExpanded` every render would\n     * instead re-open every group the user deliberately closed, on the next\n     * unrelated render.\n     */\n    const [seeded, setSeeded] = useState<JSX.Key[]>(() => [\n      ...(defaultExpanded || []),\n    ])\n    const arrived = (defaultExpanded || []).filter(\n      (id) => !seeded.some((seen) => seen === id),\n    )\n    if (arrived.length) {\n      setSeeded((prev) => [...prev, ...arrived])\n      setExpanded((prev) => [...prev, ...arrived])\n    }\n\n    const handleToggle = useCallback(\n      (id: JSX.Key) => (e, expanded: boolean) => {\n        setExpanded((prev) => {\n          if (unique && expanded) return [id]\n          if (unique && !expanded) return []\n          const data = [...prev].filter((i) => i !== id)\n          if (expanded) data.push(id)\n          return data\n        })\n      },\n      [unique],\n    )\n\n    return (\n      <>\n        {items.map((item) => {\n          const id = getItemId(item)\n          const isExpanded = expanded.some((i) => i === id)\n          return (\n            <Accordion\n              key={id}\n              expanded={isExpanded}\n              onChange={handleToggle(id)}\n              elevation={0}\n              disableGutters\n              square\n              summary={onRenderSummary({ item })}\n              help={getItemHelp?.(item)}\n              AccordionSummaryProps={AccordionSummaryProps}\n              AccordionDetailsProps={AccordionDetailsProps}\n              {...AccordionProps}\n            >\n              {onRenderDetail({ item })}\n            </Accordion>\n          )\n        })}\n      </>\n    )\n  },\n)\nAccordionListComponent.displayName = 'AccordionListComponent'\n\nexport default AccordionListComponent\n"],"names":["ICON_VARIANT_COLLAPSIBLE_OPEN","HelpTip","MdiIcon","styled","Accordion","MuiAccordion","AccordionDetails","MuiAccordionDetails","AccordionSummary","MuiAccordionSummary","observer","forwardRef","useCallback","useState","StyledAccordion","theme","tv","vars","border","palette","divider","borderLeft","borderRight","borderTop","display","textTransform","backgroundColor","surface","main","background","paper","undefined","flexDirection","minHeight","fontSize","typography","pxToRem","transform","marginLeft","spacing","marginBottom","marginTop","padding","props","ref","expanded","expandedProp","onChange","AccordionSummaryProps","AccordionDetailsProps","summary","help","children","rest","setExpanded","Boolean","lastExpandedProp","setLastExpandedProp","handleToggle","e","elevation","disableGutters","square","sx","position","top","zIndex","expandIcon","path","ml","my","onClick","event","stopPropagation","AccordionListComponent","items","defaultExpanded","onRenderSummary","onRenderDetail","AccordionProps","unique","getItemId","getItemHelp","seeded","setSeeded","arrived","filter","id","some","seen","length","prev","data","i","push","map","item","isExpanded","displayName"],"mappings":"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"}

package/src/lib/components/add-controls.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 StackProps } from '@mui/material';
+export interface AddControlsProps extends StackProps {
+}
+declare const AddControlsComponent: import("react").ForwardRefExoticComponent<Omit<AddControlsProps, "ref"> & import("react").RefAttributes<any>>;
+export { AddControlsComponent };
+export default AddControlsComponent;

package/src/lib/components/add-controls.component.js

@@ -0,0 +1,50 @@
+import { _ as _extends } from "@swc/helpers/_/_extends";
+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 * as Besigner from "@aglyn/besigner";
+import { ICON_VARIANT_MODIFY_ADD } from "@aglyn/shared-data-enums";
+import { MdiIcon } from "@aglyn/shared-ui-jsx";
+import { IconButton as MuiIconButton, Stack as MuiStack, Tooltip as MuiTooltip } from "@mui/material";
+import { forwardRef } from "react";
+import useAddElementDrawerCallback from "../hooks/use-add-element-drawer-callback.js";
+const AddControlsComponent = /*#__PURE__*/ forwardRef((props, ref)=>{
+    const handleAddElementClick = useAddElementDrawerCallback();
+    return /*#__PURE__*/ _jsx(MuiStack, _extends({
+        ref: ref,
+        direction: "row",
+        spacing: 1
+    }, props, {
+        children: /*#__PURE__*/ _jsx(MuiTooltip, {
+            title: 'Add element',
+            children: /*#__PURE__*/ _jsx(MuiIconButton, {
+                "aria-haspopup": "menu",
+                "aria-label": "add-element",
+                onClick: ()=>handleAddElementClick(Besigner.focus.getLastSelected()),
+                children: /*#__PURE__*/ _jsx(MdiIcon, {
+                    fontSize: "small",
+                    path: ICON_VARIANT_MODIFY_ADD.path
+                })
+            })
+        })
+    }));
+});
+AddControlsComponent.displayName = 'AddControlsComponent';
+AddControlsComponent.aglyn = true;
+export { AddControlsComponent };
+export default AddControlsComponent;
+
+//# sourceMappingURL=add-controls.component.js.map

package/src/lib/components/add-controls.component.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../libs/besigner/feature/designer/src/lib/components/add-controls.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 * as Besigner from '@aglyn/besigner'\nimport { ICON_VARIANT_MODIFY_ADD } from '@aglyn/shared-data-enums'\nimport { MdiIcon } from '@aglyn/shared-ui-jsx'\nimport {\n  IconButton as MuiIconButton,\n  Stack as MuiStack,\n  type StackProps,\n  Tooltip as MuiTooltip,\n} from '@mui/material'\nimport { forwardRef } from 'react'\nimport useAddElementDrawerCallback from '../hooks/use-add-element-drawer-callback'\n\nexport interface AddControlsProps extends StackProps {}\n\nconst AddControlsComponent = forwardRef<any, AddControlsProps>((props, ref) => {\n  const handleAddElementClick = useAddElementDrawerCallback()\n\n  return (\n    <MuiStack ref={ref} direction=\"row\" spacing={1} {...props}>\n      <MuiTooltip title={'Add element'}>\n        <MuiIconButton\n          aria-haspopup=\"menu\"\n          aria-label=\"add-element\"\n          onClick={() =>\n            handleAddElementClick(Besigner.focus.getLastSelected())\n          }\n        >\n          <MdiIcon fontSize=\"small\" path={ICON_VARIANT_MODIFY_ADD.path} />\n        </MuiIconButton>\n      </MuiTooltip>\n    </MuiStack>\n  )\n})\nAddControlsComponent.displayName = 'AddControlsComponent'\nAddControlsComponent.aglyn = true\n\nexport { AddControlsComponent }\nexport default AddControlsComponent\n"],"names":["Besigner","ICON_VARIANT_MODIFY_ADD","MdiIcon","IconButton","MuiIconButton","Stack","MuiStack","Tooltip","MuiTooltip","forwardRef","useAddElementDrawerCallback","AddControlsComponent","props","ref","handleAddElementClick","direction","spacing","title","aria-haspopup","aria-label","onClick","focus","getLastSelected","fontSize","path","displayName","aglyn"],"mappings":";;AAAA;;;;;;;;;;;;;;;CAeC,GAED,YAAYA,cAAc,kBAAiB;AAC3C,SAASC,uBAAuB,QAAQ,2BAA0B;AAClE,SAASC,OAAO,QAAQ,uBAAsB;AAC9C,SACEC,cAAcC,aAAa,EAC3BC,SAASC,QAAQ,EAEjBC,WAAWC,UAAU,QAChB,gBAAe;AACtB,SAASC,UAAU,QAAQ,QAAO;AAClC,OAAOC,iCAAiC,8CAA0C;AAIlF,MAAMC,qCAAuBF,WAAkC,CAACG,OAAOC;IACrE,MAAMC,wBAAwBJ;IAE9B,qBACE,KAACJ;QAASO,KAAKA;QAAKE,WAAU;QAAMC,SAAS;OAAOJ;kBAClD,cAAA,KAACJ;YAAWS,OAAO;sBACjB,cAAA,KAACb;gBACCc,iBAAc;gBACdC,cAAW;gBACXC,SAAS,IACPN,sBAAsBd,SAASqB,KAAK,CAACC,eAAe;0BAGtD,cAAA,KAACpB;oBAAQqB,UAAS;oBAAQC,MAAMvB,wBAAwBuB,IAAI;;;;;AAKtE;AACAb,qBAAqBc,WAAW,GAAG;AACnCd,qBAAqBe,KAAK,GAAG;AAE7B,SAASf,oBAAoB,GAAE;AAC/B,eAAeA,qBAAoB"}

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

@@ -0,0 +1,29 @@
+/**
+ * @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 * as Aglyn from '@aglyn/aglyn';
+import { type AppBarProps as MuiAppBarProps, type ButtonBaseProps as ButtonBaseProps } from '@mui/material';
+export interface BreadcrumbItemProps extends Partial<Omit<ButtonBaseProps<'button'>, 'onClick' | 'onMouseEnter' | 'onFocusVisible'>> {
+    $id: Aglyn.NodeId;
+    lastItem?: boolean;
+    onClick?: (e: any, node: Aglyn.NodeSchema<any>) => void;
+    onMouseEnter?: (e: any, node: Aglyn.NodeSchema<any>) => void;
+    onFocusVisible?: (e: any, node: Aglyn.NodeSchema<any>) => void;
+}
+export interface AppBarBreadcrumbsComponentProps extends Partial<MuiAppBarProps> {
+}
+export declare const AppBarBreadcrumbsComponent: import("react").ForwardRefExoticComponent<Omit<AppBarBreadcrumbsComponentProps, "ref"> & import("react").RefAttributes<any>>;
+export default AppBarBreadcrumbsComponent;

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

@@ -0,0 +1,279 @@
+/**
+ * @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 { _ 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";
+import { canvas } from "@aglyn/aglyn";
+import * as Besigner from "@aglyn/besigner";
+import { generateComponentClassKeys, mergeSxProps, styled } from "@aglyn/shared-ui-theme";
+import { AppBar as MuiAppBar, Breadcrumbs as MuiBreadcrumbs, breadcrumbsClasses, ButtonBase as MuiButtonBase, Chip, Stack, Toolbar as MuiToolbar } from "@mui/material";
+import clsx from "clsx";
+import { observer } from "mobx-react-lite";
+import { forwardRef, useCallback, useEffect, useRef } from "react";
+import useLeafDrop from "../hooks/use-leaf-drop.js";
+const breadcrumbItemClassKey = generateComponentClassKeys('BreadcrumbItem', [
+    'root',
+    'lastItem',
+    'hovered'
+]);
+const StyledBreadcrumbs = styled(MuiBreadcrumbs)(({ theme })=>{
+    const tv = theme.vars || theme;
+    return {
+        lineHeight: 1,
+        fontSize: 11,
+        overflowX: 'auto',
+        [`.${breadcrumbsClasses.ol}`]: {
+            flexWrap: 'nowrap',
+            whiteSpace: 'nowrap'
+        },
+        [`.${breadcrumbsClasses.separator}`]: {
+            margin: 0,
+            padding: 0
+        },
+        [`.${breadcrumbsClasses.li}`]: {
+            marginLeft: theme.spacing(-0.5),
+            [`.${breadcrumbItemClassKey.root}`]: {
+                fontSize: 'inherit',
+                padding: theme.spacing(0.75),
+                paddingLeft: theme.spacing(1.75),
+                paddingRight: theme.spacing(1.75),
+                marginLeft: theme.spacing(-0.5),
+                clipPath: `polygon(calc(100% - ${theme.spacing(1)}) 0px, 100% 50%, calc(100% - ${theme.spacing(1)}) 100%, 0% 100%, ${theme.spacing(1)} 50%, 0% 0%)`,
+                color: tv.palette.text.primary,
+                background: `rgba(${tv.palette.primary.lightChannel} / ${theme.palette.action.hoverOpacity})`,
+                [`:hover, .${breadcrumbItemClassKey.hovered}`]: {
+                    background: `rgba(${tv.palette.primary.lightChannel} / ${theme.palette.action.activatedOpacity})`
+                },
+                [`:focus`]: {
+                    background: `rgba(${tv.palette.primary.lightChannel} / ${theme.palette.action.focusOpacity})`
+                },
+                [`:active`]: {
+                    background: `rgba(${tv.palette.primary.lightChannel} / ${theme.palette.action.activatedOpacity})`
+                }
+            },
+            [':before']: {
+                content: '""',
+                position: 'absolute',
+                top: 0,
+                height: '100%',
+                width: `calc(${theme.spacing(1)} + 1px)`,
+                backgroundColor: tv.palette.divider,
+                marginLeft: theme.spacing(-0.5),
+                clipPath: `polygon(calc(100% - ${theme.spacing(1)}) 0px, 100% 50%, calc(100% - ${theme.spacing(1)}) 100%, 0% 100%, ${theme.spacing(1)} 50%, 0% 0%)`
+            },
+            [`:first-of-type .${breadcrumbItemClassKey.root}`]: {
+                clipPath: `polygon(calc(100% - ${theme.spacing(1)}) 0px, 100% 50%, calc(100% - ${theme.spacing(1)}) 100%, 0% 100%, 0% 0%, 0% 0%)`
+            },
+            [[
+                `:last-of-type .${breadcrumbItemClassKey.root}`,
+                `.${breadcrumbItemClassKey.root} .${breadcrumbItemClassKey.lastItem}`
+            ].join()]: {
+                color: tv.palette.text.primary,
+                background: `rgba(${tv.palette.secondary.lightChannel} / ${theme.palette.action.selectedOpacity})`,
+                [`:hover, ${breadcrumbItemClassKey.hovered}`]: {
+                    background: `rgba(${tv.palette.secondary.lightChannel} / ${theme.palette.action.activatedOpacity})`
+                },
+                [`:focus, .Mui-focusVisible`]: {
+                    background: `rgba(${tv.palette.secondary.lightChannel} / ${theme.palette.action.focusOpacity})`
+                },
+                [`:active`]: {
+                    background: `rgba(${tv.palette.secondary.lightChannel} / ${theme.palette.action.hoverOpacity})`
+                }
+            }
+        }
+    };
+});
+const BreadcrumbItem = observer((props)=>{
+    const { children, $id, lastItem, onClick, onMouseEnter, onFocusVisible } = props, rest = _object_without_properties_loose(props, [
+        "children",
+        "$id",
+        "lastItem",
+        "onClick",
+        "onMouseEnter",
+        "onFocusVisible"
+    ]);
+    const node = canvas.getNode($id);
+    const isHovered = Besigner.focus.isNodeHovered(node);
+    const { setNodeRef: setDroppableNodeRef } = useLeafDrop(node, undefined, 'breadcrumbs');
+    const handleClick = useCallback((e)=>{
+        onClick && onClick(e, node);
+    }, [
+        onClick,
+        node
+    ]);
+    const handleMouseEnter = useCallback((e)=>{
+        onMouseEnter && onMouseEnter(e, node);
+    }, [
+        onMouseEnter,
+        node
+    ]);
+    const handleFocusVisible = useCallback((e)=>{
+        onFocusVisible && onFocusVisible(e, node);
+    }, [
+        onFocusVisible,
+        node
+    ]);
+    return /*#__PURE__*/ _jsx(MuiButtonBase, _extends({
+        ref: setDroppableNodeRef,
+        onClick: handleClick,
+        onMouseEnter: handleMouseEnter,
+        onFocusVisible: handleFocusVisible,
+        className: clsx(breadcrumbItemClassKey.root, {
+            [breadcrumbItemClassKey.lastItem]: lastItem,
+            [breadcrumbItemClassKey.hovered]: isHovered
+        })
+    }, rest, {
+        children: /*#__PURE__*/ _jsxs(_Fragment, {
+            children: [
+                node == null ? void 0 : node.labelShort,
+                children
+            ]
+        })
+    }));
+});
+const Breadcrumbs = observer((props)=>{
+    const { children, sx } = props, rest = _object_without_properties_loose(props, [
+        "children",
+        "sx"
+    ]);
+    const lastSelected = Besigner.focus.getLastSelected();
+    const selectionCount = Besigner.focus.selectionCount();
+    const handleClick = useCallback((e, node)=>{
+        Besigner.focus.setSelectedNode(node);
+    }, []);
+    const handleMouseEnter = useCallback((e, node)=>{
+        Besigner.focus.setHoveredNode(node);
+    }, []);
+    const handleFocusVisible = useCallback((e, node)=>{
+        Besigner.focus.setHoveredNode(node);
+    }, []);
+    return /*#__PURE__*/ _jsxs(StyledBreadcrumbs, _extends({
+        separator: null,
+        "aria-label": "breadcrumb",
+        sx: sx
+    }, rest, {
+        children: [
+            lastSelected == null ? void 0 : lastSelected.breadcrumbPath.map(($id)=>{
+                return /*#__PURE__*/ _jsx(BreadcrumbItem, {
+                    $id: $id,
+                    onClick: handleClick,
+                    onMouseEnter: handleMouseEnter,
+                    onFocusVisible: handleFocusVisible,
+                    lastItem: (lastSelected == null ? void 0 : lastSelected.$id) === $id
+                }, $id);
+            }),
+            selectionCount > 1 ? /*#__PURE__*/ _jsx(Chip, {
+                label: `+${selectionCount - 1} selected`,
+                size: "small",
+                variant: "outlined",
+                color: "primary",
+                sx: {
+                    ml: 0.5,
+                    height: 18,
+                    fontSize: '0.65rem'
+                }
+            }) : null
+        ]
+    }));
+});
+export const AppBarBreadcrumbsComponent = /*#__PURE__*/ forwardRef((props, ref)=>{
+    const { children, sx } = props, rest = _object_without_properties_loose(props, [
+        "children",
+        "sx"
+    ]);
+    // This strip is the canvas column's bottom chrome, so it is what a
+    // viewport-fixed affordance in that corner would clip (AGL-2486). It
+    // publishes its own height as the stand-off the Assist launcher reads;
+    // measured rather than assumed, because "24px dense toolbar plus a
+    // border" is exactly the kind of constant that stops being true the
+    // first time a chip wraps.
+    const stripRef = useRef(null);
+    const setRefs = useCallback((node)=>{
+        stripRef.current = node;
+        if (typeof ref === 'function') ref(node);
+        else if (ref) ref.current = node;
+    }, [
+        ref
+    ]);
+    useEffect(()=>{
+        const node = stripRef.current;
+        if (!node) return undefined;
+        const root = document.documentElement;
+        const property = '--aglyn-assist-inset-bottom';
+        const publish = ()=>{
+            const { height } = node.getBoundingClientRect();
+            root.style.setProperty(property, `${Math.round(height) + 20}px`);
+        };
+        publish();
+        // Guarded: jsdom has no ResizeObserver, and the initial publish above
+        // is the part that matters — the observer only keeps it honest.
+        const observer = typeof ResizeObserver === 'undefined' ? null : new ResizeObserver(publish);
+        observer == null ? void 0 : observer.observe(node);
+        return ()=>{
+            observer == null ? void 0 : observer.disconnect();
+            root.style.removeProperty(property);
+        };
+    }, []);
+    return /*#__PURE__*/ _jsx(MuiAppBar, _extends({
+        ref: setRefs,
+        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: 24
+            }
+        }, sx)
+    }, rest, {
+        children: /*#__PURE__*/ _jsx(MuiToolbar, {
+            variant: "dense",
+            sx: {
+                px: {
+                    xs: 0,
+                    sm: 0
+                }
+            },
+            children: /*#__PURE__*/ _jsxs(Stack, {
+                direction: "row",
+                spacing: 1,
+                sx: {
+                    alignItems: "center",
+                    justifyContent: "space-between",
+                    width: 1
+                },
+                children: [
+                    /*#__PURE__*/ _jsx(Breadcrumbs, {}),
+                    children
+                ]
+            })
+        })
+    }));
+});
+AppBarBreadcrumbsComponent.displayName = 'AppBarBreadcrumbsComponent';
+AppBarBreadcrumbsComponent.aglyn = true;
+export default AppBarBreadcrumbsComponent;
+
+//# sourceMappingURL=app-bar-breadcrumbs.component.js.map