@aglyn/besigner-ui 1.0.0-beta.143

package/src/lib/components/dnd/drop-indicator.js

@@ -0,0 +1,139 @@
+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 * as Besigner from "@aglyn/besigner";
+import { generateComponentClassKeys } from "@aglyn/shared-ui-theme";
+import { _isEqualitySameType } from "@aglyn/shared-util-tools";
+import { Portal, styled } from "@mui/material";
+import clsx from "clsx";
+import { motion } from "framer-motion";
+import { forwardRef } from "react";
+const classes = generateComponentClassKeys('DropIndicator', [
+    'root',
+    'line',
+    'handle'
+]);
+const lineW = 6;
+const handleW = lineW + lineW * 1.27;
+const handleHalf = handleW / 2;
+const Indicator = styled(motion.div, {
+    name: 'DropIndicator',
+    shouldForwardProp: (propName)=>!_isEqualitySameType(propName, null, 'variant', 'visible')
+})(({ theme, variant })=>{
+    const vertical = variant === 'vertical';
+    // 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 {
+        position: 'absolute',
+        display: 'flex',
+        flexDirection: vertical ? 'column' : 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        zIndex: theme.zIndex.modal,
+        [`& .${classes.line}`]: {
+            // Slate, not the accent (AGL-1194): the indicator is drawn over the
+            // user's design and must not read as part of it.
+            border: `${lineW / 2}px solid ${tv.palette.tertiary.main}`,
+            flexGrow: 1,
+            width: !vertical ? undefined : lineW,
+            height: !vertical ? lineW : undefined,
+            display: 'block',
+            content: '""'
+        },
+        [`& .${classes.handle}`]: {
+            backgroundColor: tv.palette.surface.main,
+            borderRadius: handleW,
+            border: `1px solid ${tv.palette.tertiary.dark}`,
+            width: handleW,
+            height: handleW,
+            display: 'block',
+            content: '""'
+        }
+    };
+});
+export const DropIndicator = /*#__PURE__*/ forwardRef((props, ref)=>{
+    const { visible, region, rect, className } = props, rest = _object_without_properties_loose(props, [
+        "visible",
+        "region",
+        "rect",
+        "className"
+    ]);
+    const styles = {
+        [Besigner.DropRegion.LEFT]: {
+            left: rect.left - handleHalf,
+            top: rect.top - handleHalf,
+            height: rect.height + handleW,
+            width: undefined
+        },
+        [Besigner.DropRegion.TOP]: {
+            left: rect.left - handleHalf,
+            top: rect.top - handleHalf,
+            width: rect.width + handleW,
+            height: undefined
+        },
+        [Besigner.DropRegion.RIGHT]: {
+            left: rect.left + rect.width - handleHalf,
+            top: rect.top - handleHalf,
+            height: rect.height + handleW,
+            width: undefined
+        },
+        [Besigner.DropRegion.BOTTOM]: {
+            left: rect.left - handleHalf,
+            top: rect.top + rect.height - handleHalf,
+            width: rect.width + handleW,
+            height: undefined
+        },
+        [Besigner.DropRegion.CHILDREN]: {
+            left: rect.left + handleHalf,
+            top: rect.top + rect.height / 2 - handleHalf,
+            width: rect.width - handleW,
+            height: undefined
+        }
+    };
+    const vertical = region === Besigner.DropRegion.LEFT || region === Besigner.DropRegion.RIGHT;
+    return /*#__PURE__*/ _jsx(Portal, {
+        children: /*#__PURE__*/ _jsxs(Indicator, _extends({
+            ref: ref,
+            className: clsx(classes.root, className),
+            variant: vertical ? 'vertical' : 'horizontal',
+            animate: _extends({}, styles[region], {
+                visibility: visible ? 'visible' : 'hidden'
+            }),
+            transition: {
+                type: 'keyframes'
+            }
+        }, rest, {
+            children: [
+                /*#__PURE__*/ _jsx("div", {
+                    className: classes.handle
+                }),
+                /*#__PURE__*/ _jsx("div", {
+                    className: classes.line
+                }),
+                /*#__PURE__*/ _jsx("div", {
+                    className: classes.handle
+                })
+            ]
+        }))
+    });
+});
+DropIndicator.displayName = 'DropIndicator';
+export default DropIndicator;
+
+//# sourceMappingURL=drop-indicator.js.map

package/src/lib/components/dnd/drop-indicator.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../../libs/besigner/feature/designer/src/lib/components/dnd/drop-indicator.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 { generateComponentClassKeys } from '@aglyn/shared-ui-theme'\nimport { _isEqualitySameType } from '@aglyn/shared-util-tools'\nimport { type ClientRect } from '@dnd-kit/core'\nimport { Portal, styled } from '@mui/material'\nimport clsx from 'clsx'\nimport { motion } from 'framer-motion'\nimport type { ComponentProps } from 'react'\nimport { forwardRef } from 'react'\n\nconst classes = generateComponentClassKeys('DropIndicator', [\n  'root',\n  'line',\n  'handle',\n])\n\ntype IndicatorProps = ComponentProps<typeof motion.div> & {\n  variant?: 'vertical' | 'horizontal'\n  // framer-motion's HTML prop types omit className; MUI styled() accepts it.\n  className?: string\n}\n\nconst lineW = 6\nconst handleW = lineW + lineW * 1.27\nconst handleHalf = handleW / 2\n\nconst Indicator = styled(motion.div, {\n  name: 'DropIndicator',\n  shouldForwardProp: (propName) =>\n    !_isEqualitySameType(propName, null, 'variant', 'visible'),\n})<IndicatorProps>(({ theme, variant }) => {\n  const vertical = variant === 'vertical'\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\n  return {\n    position: 'absolute',\n    display: 'flex',\n    flexDirection: vertical ? 'column' : 'row',\n    alignItems: 'center',\n    justifyContent: 'center',\n    zIndex: theme.zIndex.modal,\n\n    [`& .${classes.line}`]: {\n      // Slate, not the accent (AGL-1194): the indicator is drawn over the\n      // user's design and must not read as part of it.\n      border: `${lineW / 2}px solid ${tv.palette.tertiary.main}`,\n      flexGrow: 1,\n      width: !vertical ? undefined : lineW,\n      height: !vertical ? lineW : undefined,\n      display: 'block',\n      content: '\"\"',\n    },\n    [`& .${classes.handle}`]: {\n      backgroundColor: tv.palette.surface.main,\n      borderRadius: handleW,\n      border: `1px solid ${tv.palette.tertiary.dark}`,\n      width: handleW,\n      height: handleW,\n      display: 'block',\n      content: '\"\"',\n    },\n  }\n})\n\nexport interface DropIndicatorProps extends ComponentProps<typeof Indicator> {\n  visible?: boolean\n  rect: ClientRect\n  region: Besigner.DropRegion\n  // framer-motion's HTML prop types omit className; MUI styled() accepts it.\n  className?: string\n}\n\nexport const DropIndicator = forwardRef<HTMLDivElement, DropIndicatorProps>(\n  (props, ref) => {\n    const { visible, region, rect, className, ...rest } = props\n\n    const styles = {\n      [Besigner.DropRegion.LEFT]: {\n        left: rect.left - handleHalf,\n        top: rect.top - handleHalf,\n        height: rect.height + handleW,\n        width: undefined,\n      },\n      [Besigner.DropRegion.TOP]: {\n        left: rect.left - handleHalf,\n        top: rect.top - handleHalf,\n        width: rect.width + handleW,\n        height: undefined,\n      },\n      [Besigner.DropRegion.RIGHT]: {\n        left: rect.left + rect.width - handleHalf,\n        top: rect.top - handleHalf,\n        height: rect.height + handleW,\n        width: undefined,\n      },\n      [Besigner.DropRegion.BOTTOM]: {\n        left: rect.left - handleHalf,\n        top: rect.top + rect.height - handleHalf,\n        width: rect.width + handleW,\n        height: undefined,\n      },\n      [Besigner.DropRegion.CHILDREN]: {\n        left: rect.left + handleHalf,\n        top: rect.top + rect.height / 2 - handleHalf,\n        width: rect.width - handleW,\n        height: undefined,\n      },\n    }\n\n    const vertical =\n      region === Besigner.DropRegion.LEFT ||\n      region === Besigner.DropRegion.RIGHT\n\n    return (\n      <Portal>\n        <Indicator\n          ref={ref}\n          className={clsx(classes.root, className)}\n          variant={vertical ? 'vertical' : 'horizontal'}\n          animate={{\n            ...styles[region],\n            visibility: visible ? 'visible' : 'hidden',\n          }}\n          transition={{ type: 'keyframes' }}\n          {...rest}\n        >\n          <div className={classes.handle} />\n          <div className={classes.line} />\n          <div className={classes.handle} />\n        </Indicator>\n      </Portal>\n    )\n  },\n)\nDropIndicator.displayName = 'DropIndicator'\n\nexport default DropIndicator\n"],"names":["Besigner","generateComponentClassKeys","_isEqualitySameType","Portal","styled","clsx","motion","forwardRef","classes","lineW","handleW","handleHalf","Indicator","div","name","shouldForwardProp","propName","theme","variant","vertical","tv","vars","position","display","flexDirection","alignItems","justifyContent","zIndex","modal","line","border","palette","tertiary","main","flexGrow","width","undefined","height","content","handle","backgroundColor","surface","borderRadius","dark","DropIndicator","props","ref","visible","region","rect","className","rest","styles","DropRegion","LEFT","left","top","TOP","RIGHT","BOTTOM","CHILDREN","root","animate","visibility","transition","type","displayName"],"mappings":"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"}

package/src/lib/components/dnd/droppable.d.ts

@@ -0,0 +1,43 @@
+/**
+ * @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 Besigner from '@aglyn/besigner';
+import { useDroppable } from '@dnd-kit/core';
+import { CSSProperties, MutableRefObject } from 'react';
+export interface DroppableChildProps<T extends {
+    $id: string;
+}> extends Omit<DroppableProps<T>, 'children'> {
+    droppable: ReturnType<typeof useDroppable>;
+    style: CSSProperties;
+    forwardRef: MutableRefObject<any>;
+}
+export type DroppableChild<T extends {
+    $id: string;
+}> = (props: DroppableChildProps<T>) => JSX.Element;
+export interface DroppableProps<T extends {
+    $id: string;
+}> {
+    children: JSX.Element | DroppableChild<T>;
+    node: T;
+    type: Besigner.DragType;
+    accept: Besigner.DragType[];
+    disabled?: boolean;
+    idSuffix?: string;
+}
+export declare const Droppable: import("react").FunctionComponent<DroppableProps<{
+    $id: string;
+}> & import("react").RefAttributes<unknown>>;
+export default Droppable;

package/src/lib/components/dnd/droppable.js

@@ -0,0 +1,63 @@
+/**
+ * @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 { mergeRefs, useId } from "@aglyn/shared-ui-jsx";
+import { useDroppable } from "@dnd-kit/core";
+import { mergeProps } from "@react-aria/utils";
+import { observer } from "mobx-react-lite";
+import { Children, cloneElement, forwardRef } from "react";
+export const Droppable = observer(/*#__PURE__*/ forwardRef((props, ref)=>{
+    const { children } = props, rest = _object_without_properties_loose(props, [
+        "children"
+    ]);
+    const { node, type, disabled, accept, idSuffix } = rest;
+    const id = useId(node == null ? void 0 : node.$id);
+    const droppable = useDroppable({
+        id: `${id}:${type}${idSuffix || ''}`,
+        data: {
+            type,
+            node,
+            accept
+        },
+        disabled
+    });
+    const style = _extends({
+        outlineWidth: '2',
+        outlineOffset: '-1',
+        outlineColor: 'grey',
+        outlineStyle: 'dotted'
+    }, droppable.isOver ? {
+        outlineColor: 'lime',
+        outlineStyle: 'solid',
+        outlineOffset: '3'
+    } : {});
+    if (typeof children === 'function') {
+        return children(_extends({}, rest, {
+            style,
+            droppable,
+            forwardRef: ref
+        }));
+    }
+    const child = Children.only(children);
+    return /*#__PURE__*/ cloneElement(child, mergeProps(child.props, {
+        ref: mergeRefs(ref, child.props.ref, droppable.setNodeRef)
+    }));
+}));
+Droppable.displayName = 'Droppable';
+export default Droppable;
+
+//# sourceMappingURL=droppable.js.map

package/src/lib/components/dnd/droppable.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../../libs/besigner/feature/designer/src/lib/components/dnd/droppable.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 * as Besigner from '@aglyn/besigner'\nimport { mergeRefs, useId } from '@aglyn/shared-ui-jsx'\nimport { useDroppable } from '@dnd-kit/core'\nimport { mergeProps } from '@react-aria/utils'\nimport { observer } from 'mobx-react-lite'\nimport {\n  Children,\n  cloneElement,\n  CSSProperties,\n  forwardRef,\n  MutableRefObject,\n} from 'react'\n\nexport interface DroppableChildProps<T extends { $id: string }>\n  extends Omit<DroppableProps<T>, 'children'> {\n  droppable: ReturnType<typeof useDroppable>\n  style: CSSProperties\n  forwardRef: MutableRefObject<any>\n}\nexport type DroppableChild<T extends { $id: string }> = (\n  props: DroppableChildProps<T>,\n) => JSX.Element\n\nexport interface DroppableProps<T extends { $id: string }> {\n  children: JSX.Element | DroppableChild<T>\n  node: T\n  type: Besigner.DragType\n  accept: Besigner.DragType[]\n  disabled?: boolean\n  idSuffix?: string\n}\n\nexport const Droppable = observer(\n  forwardRef(<T extends { $id: string }>(props: DroppableProps<T>, ref) => {\n    const { children, ...rest } = props\n    const { node, type, disabled, accept, idSuffix } = rest\n    const id = useId(node?.$id)\n\n    const droppable = useDroppable({\n      id: `${id}:${type}${idSuffix || ''}`,\n      data: { type, node, accept },\n      disabled,\n    })\n\n    const style: CSSProperties = {\n      outlineWidth: '2',\n      outlineOffset: '-1',\n      outlineColor: 'grey',\n      outlineStyle: 'dotted',\n      ...(droppable.isOver\n        ? {\n            outlineColor: 'lime',\n            outlineStyle: 'solid',\n            outlineOffset: '3',\n          }\n        : {}),\n    }\n\n    if (typeof children === 'function') {\n      return children({\n        ...rest,\n        style,\n        droppable,\n        forwardRef: ref,\n      })\n    }\n\n    const child = Children.only(children)\n    return cloneElement(\n      child,\n      mergeProps(child.props, {\n        ref: mergeRefs(ref, child.props.ref, droppable.setNodeRef),\n      }),\n    )\n  }),\n)\n\nDroppable.displayName = 'Droppable'\n\nexport default Droppable\n"],"names":["mergeRefs","useId","useDroppable","mergeProps","observer","Children","cloneElement","forwardRef","Droppable","props","ref","children","rest","node","type","disabled","accept","idSuffix","id","$id","droppable","data","style","outlineWidth","outlineOffset","outlineColor","outlineStyle","isOver","child","only","setNodeRef","displayName"],"mappings":"AAAA;;;;;;;;;;;;;;;CAeC;;AAGD,SAASA,SAAS,EAAEC,KAAK,QAAQ,uBAAsB;AACvD,SAASC,YAAY,QAAQ,gBAAe;AAC5C,SAASC,UAAU,QAAQ,oBAAmB;AAC9C,SAASC,QAAQ,QAAQ,kBAAiB;AAC1C,SACEC,QAAQ,EACRC,YAAY,EAEZC,UAAU,QAEL,QAAO;AAqBd,OAAO,MAAMC,YAAYJ,uBACvBG,WAAW,CAA4BE,OAA0BC;IAC/D,MAAM,EAAEC,QAAQ,EAAW,GAAGF,OAATG,wCAASH;;;IAC9B,MAAM,EAAEI,IAAI,EAAEC,IAAI,EAAEC,QAAQ,EAAEC,MAAM,EAAEC,QAAQ,EAAE,GAAGL;IACnD,MAAMM,KAAKjB,MAAMY,wBAAAA,KAAMM,GAAG;IAE1B,MAAMC,YAAYlB,aAAa;QAC7BgB,IAAI,GAAGA,GAAG,CAAC,EAAEJ,OAAOG,YAAY,IAAI;QACpCI,MAAM;YAAEP;YAAMD;YAAMG;QAAO;QAC3BD;IACF;IAEA,MAAMO,QAAuB;QAC3BC,cAAc;QACdC,eAAe;QACfC,cAAc;QACdC,cAAc;OACVN,UAAUO,MAAM,GAChB;QACEF,cAAc;QACdC,cAAc;QACdF,eAAe;IACjB,IACA,CAAC;IAGP,IAAI,OAAOb,aAAa,YAAY;QAClC,OAAOA,SAAS,aACXC;YACHU;YACAF;YACAb,YAAYG;;IAEhB;IAEA,MAAMkB,QAAQvB,SAASwB,IAAI,CAAClB;IAC5B,qBAAOL,aACLsB,OACAzB,WAAWyB,MAAMnB,KAAK,EAAE;QACtBC,KAAKV,UAAUU,KAAKkB,MAAMnB,KAAK,CAACC,GAAG,EAAEU,UAAUU,UAAU;IAC3D;AAEJ,IACD;AAEDtB,UAAUuB,WAAW,GAAG;AAExB,eAAevB,UAAS"}

package/src/lib/components/element-card.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 CardListItemProps } from '@aglyn/shared-ui-jsx';
+import { type MdiIconProps } from '@aglyn/shared-ui-jsx';
+export interface ElementCardProps extends CardListItemProps {
+    icon?: MdiIconProps;
+}
+export declare const ElementCardComponent: import("react").ForwardRefExoticComponent<Omit<ElementCardProps, "ref"> & import("react").RefAttributes<any>>;
+export default ElementCardComponent;

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

@@ -0,0 +1,49 @@
+import { _ as _extends } from "@swc/helpers/_/_extends";
+import { _ as _object_without_properties_loose } from "@swc/helpers/_/_object_without_properties_loose";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @license
+ * Copyright 2026 Aglyn LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */ import { ICON_VARIANT_ELEMENT } from "@aglyn/shared-data-enums";
+import { CardListItem } from "@aglyn/shared-ui-jsx";
+import { MdiIcon } from "@aglyn/shared-ui-jsx";
+import { styled } from "@aglyn/shared-ui-theme";
+import { forwardRef } from "react";
+const Icon = styled(MdiIcon)(({ theme })=>({
+        fontSize: theme.typography.pxToRem(48),
+        padding: '0.15ch',
+        color: 'inherit',
+        overflow: 'visible',
+        opacity: 0.7
+    }));
+export const ElementCardComponent = /*#__PURE__*/ forwardRef((props, ref)=>{
+    const { icon } = props, rest = _object_without_properties_loose(props, [
+        "icon"
+    ]);
+    return /*#__PURE__*/ _jsx(CardListItem, _extends({
+        ref: ref
+    }, rest, {
+        children: ({ item })=>/*#__PURE__*/ _jsx("div", {
+                children: !(icon == null ? void 0 : icon.path) && icon ? icon : /*#__PURE__*/ _jsx(Icon, _extends({}, icon, {
+                    path: (icon == null ? void 0 : icon.path) || ICON_VARIANT_ELEMENT.path
+                }))
+            })
+    }));
+});
+ElementCardComponent.displayName = 'ElementCardComponent';
+ElementCardComponent.aglyn = true;
+export default ElementCardComponent;
+
+//# sourceMappingURL=element-card.component.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../libs/besigner/feature/designer/src/lib/components/element-card.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_ELEMENT } from '@aglyn/shared-data-enums'\nimport { CardListItem, type CardListItemProps } from '@aglyn/shared-ui-jsx'\nimport { MdiIcon, type MdiIconProps } from '@aglyn/shared-ui-jsx'\nimport { styled } from '@aglyn/shared-ui-theme'\nimport { forwardRef } from 'react'\n\nconst Icon = styled(MdiIcon)(({ theme }) => ({\n  fontSize: theme.typography.pxToRem(48),\n  padding: '0.15ch',\n  color: 'inherit',\n  overflow: 'visible',\n  opacity: 0.7,\n}))\n\nexport interface ElementCardProps extends CardListItemProps {\n  icon?: MdiIconProps\n}\n\nexport const ElementCardComponent = forwardRef<any, ElementCardProps>(\n  (props, ref) => {\n    const { icon, ...rest } = props\n\n    return (\n      <CardListItem ref={ref} {...rest}>\n        {({ item }) => (\n          <div>\n            {!icon?.path && icon ? (\n              (icon as any)\n            ) : (\n              <Icon {...icon} path={icon?.path || ICON_VARIANT_ELEMENT.path} />\n            )}\n          </div>\n        )}\n      </CardListItem>\n    )\n  },\n)\nElementCardComponent.displayName = 'ElementCardComponent'\nElementCardComponent.aglyn = true\n\nexport default ElementCardComponent\n"],"names":["ICON_VARIANT_ELEMENT","CardListItem","MdiIcon","styled","forwardRef","Icon","theme","fontSize","typography","pxToRem","padding","color","overflow","opacity","ElementCardComponent","props","ref","icon","rest","item","div","path","displayName","aglyn"],"mappings":";;;AAAA;;;;;;;;;;;;;;;CAeC,GAED,SAASA,oBAAoB,QAAQ,2BAA0B;AAC/D,SAASC,YAAY,QAAgC,uBAAsB;AAC3E,SAASC,OAAO,QAA2B,uBAAsB;AACjE,SAASC,MAAM,QAAQ,yBAAwB;AAC/C,SAASC,UAAU,QAAQ,QAAO;AAElC,MAAMC,OAAOF,OAAOD,SAAS,CAAC,EAAEI,KAAK,EAAE,GAAM,CAAA;QAC3CC,UAAUD,MAAME,UAAU,CAACC,OAAO,CAAC;QACnCC,SAAS;QACTC,OAAO;QACPC,UAAU;QACVC,SAAS;IACX,CAAA;AAMA,OAAO,MAAMC,qCAAuBV,WAClC,CAACW,OAAOC;IACN,MAAM,EAAEC,IAAI,EAAW,GAAGF,OAATG,wCAASH;;;IAE1B,qBACE,KAACd;QAAae,KAAKA;OAASE;kBACzB,CAAC,EAAEC,IAAI,EAAE,iBACR,KAACC;0BACE,EAACH,wBAAAA,KAAMI,IAAI,KAAIJ,OACbA,qBAED,KAACZ,mBAASY;oBAAMI,MAAMJ,CAAAA,wBAAAA,KAAMI,IAAI,KAAIrB,qBAAqBqB,IAAI;;;;AAMzE,GACD;AACDP,qBAAqBQ,WAAW,GAAG;AACnCR,qBAAqBS,KAAK,GAAG;AAE7B,eAAeT,qBAAoB"}

package/src/lib/components/element-classes-field.component.d.ts

@@ -0,0 +1,41 @@
+/**
+ * @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 * as Aglyn from '@aglyn/aglyn';
+export declare const isValidClassName: (name: string) => boolean;
+export interface ElementClassesFieldProps {
+    node?: Aglyn.NodeSchema;
+}
+/**
+ * Custom CSS classes on the selected element (AGL-335): chips persisted
+ * into `node.props.className` (space-separated), merged into the
+ * rendered className by the node renderer. Pairs with theme stylesheet
+ * classes and the interaction builder's class actions.
+ *
+ * Each chip carries an eye as well as its ✕ (AGL-2486). The eye stops the
+ * class applying ON THE CANVAS and keeps it on the element; the ✕ is still
+ * the one control that takes a class off. Nothing about the eye is written
+ * down, so the chips are always the class list that ships.
+ *
+ * The hidden class is the exception, and deliberately so: switching it off
+ * on the canvas is the same act as the hierarchy's visibility eye (AGL-592),
+ * so its chip drives THAT state rather than a second one that could
+ * disagree with it.
+ */
+export declare const ElementClassesField: ((props: ElementClassesFieldProps) => import("react").JSX.Element) & {
+    displayName: string;
+};
+export default ElementClassesField;

package/src/lib/components/element-classes-field.component.js

@@ -0,0 +1,140 @@
+/**
+ * @license
+ * Copyright 2026 Aglyn LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */ import { _ as _extends } from "@swc/helpers/_/_extends";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createElement as _createElement } from "react";
+import { FieldMuteButton } from "@aglyn/shared-ui-jsx-forms";
+import { Autocomplete, Chip, TextField } from "@mui/material";
+import { action } from "mobx";
+import { observer } from "mobx-react-lite";
+import { useCallback, useMemo } from "react";
+import useAglynBesignerFlag from "../hooks/use-aglyn-besigner-flag.js";
+import { toggleRevealedNodeId } from "../utils/canvas-reveal.js";
+import { isClassMuted, isClassSwitchable, toggleMutedClass } from "../utils/muted-classes.js";
+/** Valid CSS class identifier (letters, digits, hyphen, underscore). */ const CLASS_NAME_PATTERN = /^-?[_a-zA-Z][_a-zA-Z0-9-]*$/;
+export const isValidClassName = (name)=>CLASS_NAME_PATTERN.test(name);
+/**
+ * Custom CSS classes on the selected element (AGL-335): chips persisted
+ * into `node.props.className` (space-separated), merged into the
+ * rendered className by the node renderer. Pairs with theme stylesheet
+ * classes and the interaction builder's class actions.
+ *
+ * Each chip carries an eye as well as its ✕ (AGL-2486). The eye stops the
+ * class applying ON THE CANVAS and keeps it on the element; the ✕ is still
+ * the one control that takes a class off. Nothing about the eye is written
+ * down, so the chips are always the class list that ships.
+ *
+ * The hidden class is the exception, and deliberately so: switching it off
+ * on the canvas is the same act as the hierarchy's visibility eye (AGL-592),
+ * so its chip drives THAT state rather than a second one that could
+ * disagree with it.
+ */ export const ElementClassesField = observer((props)=>{
+    var _node_props;
+    const { node } = props;
+    const classes = useMemo(()=>{
+        var _ref;
+        var _node_props;
+        return String((_ref = node == null ? void 0 : (_node_props = node.props) == null ? void 0 : _node_props.className) != null ? _ref : '').split(/\s+/).filter(Boolean);
+    }, [
+        node == null ? void 0 : (_node_props = node.props) == null ? void 0 : _node_props.className
+    ]);
+    const [mutedClasses, setMutedClasses] = useAglynBesignerFlag('mutedClasses');
+    const [revealedNodeIds, setRevealedNodeIds] = useAglynBesignerFlag('revealedNodeIds');
+    const nodeId = node == null ? void 0 : node.$id;
+    /** Whether the canvas is currently rendering without this class. */ const isSwitchedOff = useCallback((className)=>{
+        if (!nodeId) return false;
+        return isClassSwitchable(className) ? isClassMuted(mutedClasses, {
+            nodeId,
+            className
+        }) : Boolean(revealedNodeIds == null ? void 0 : revealedNodeIds.some((id)=>id === nodeId));
+    }, [
+        nodeId,
+        mutedClasses,
+        revealedNodeIds
+    ]);
+    const toggleClass = useCallback((className)=>{
+        if (!nodeId) return;
+        if (isClassSwitchable(className)) {
+            setMutedClasses((current)=>toggleMutedClass(current, {
+                    nodeId,
+                    className
+                }));
+            return;
+        }
+        // One switch, two places to reach it.
+        setRevealedNodeIds((current)=>toggleRevealedNodeId(current, nodeId));
+    }, [
+        nodeId,
+        setMutedClasses,
+        setRevealedNodeIds
+    ]);
+    const handleChange = useCallback((event, value)=>{
+        if (!node) return;
+        const cleaned = value.map((name)=>name.trim()).filter((name)=>isValidClassName(name));
+        action(()=>{
+            const nextProps = _extends({}, node.props);
+            if (cleaned.length) nextProps['className'] = cleaned.join(' ');
+            else delete nextProps['className'];
+            node.props = nextProps;
+        })();
+    }, [
+        node
+    ]);
+    return /*#__PURE__*/ _jsx(Autocomplete, {
+        multiple: true,
+        freeSolo: true,
+        size: "small",
+        options: [],
+        value: classes,
+        onChange: handleChange,
+        renderValue: (value, getItemProps)=>value.map((option, index)=>{
+                const off = isSwitchedOff(option);
+                const switchable = isClassSwitchable(option);
+                return /*#__PURE__*/ _createElement(Chip, _extends({
+                    label: option,
+                    size: "small"
+                }, getItemProps({
+                    index
+                }), {
+                    key: option,
+                    variant: off ? 'outlined' : 'filled',
+                    sx: off ? {
+                        textDecoration: 'line-through',
+                        opacity: 0.6
+                    } : undefined,
+                    icon: /*#__PURE__*/ _jsx(FieldMuteButton, {
+                        mute: {
+                            muted: off,
+                            label: switchable ? off ? `Apply ${option} again` : `Stop applying ${option} while designing` : off ? `Stop showing this element on the canvas` : `Show this element on the canvas`,
+                            onToggle: ()=>toggleClass(option)
+                        },
+                        sx: {
+                            ml: 0.5
+                        }
+                    })
+                }));
+            }),
+        renderInput: (params)=>/*#__PURE__*/ _jsx(TextField, _extends({}, params, {
+                label: "Classes",
+                placeholder: "Add class…",
+                helperText: "Custom CSS classes — targetable from theme styles and interactions"
+            }))
+    });
+});
+ElementClassesField.displayName = 'ElementClassesField';
+export default ElementClassesField;
+
+//# sourceMappingURL=element-classes-field.component.js.map

package/src/lib/components/element-classes-field.component.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../libs/besigner/feature/designer/src/lib/components/element-classes-field.component.tsx"],"sourcesContent":["/**\n * @license\n * Copyright 2026 Aglyn LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *   http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport type * as Aglyn from '@aglyn/aglyn'\nimport { FieldMuteButton } from '@aglyn/shared-ui-jsx-forms'\nimport { Autocomplete, Chip, TextField } from '@mui/material'\nimport { action } from 'mobx'\nimport { observer } from 'mobx-react-lite'\nimport { useCallback, useMemo } from 'react'\n\nimport useAglynBesignerFlag from '../hooks/use-aglyn-besigner-flag'\nimport { toggleRevealedNodeId } from '../utils/canvas-reveal'\nimport {\n  isClassMuted,\n  isClassSwitchable,\n  toggleMutedClass,\n} from '../utils/muted-classes'\n\n/** Valid CSS class identifier (letters, digits, hyphen, underscore). */\nconst CLASS_NAME_PATTERN = /^-?[_a-zA-Z][_a-zA-Z0-9-]*$/\n\nexport const isValidClassName = (name: string): boolean =>\n  CLASS_NAME_PATTERN.test(name)\n\nexport interface ElementClassesFieldProps {\n  node?: Aglyn.NodeSchema\n}\n\n/**\n * Custom CSS classes on the selected element (AGL-335): chips persisted\n * into `node.props.className` (space-separated), merged into the\n * rendered className by the node renderer. Pairs with theme stylesheet\n * classes and the interaction builder's class actions.\n *\n * Each chip carries an eye as well as its ✕ (AGL-2486). The eye stops the\n * class applying ON THE CANVAS and keeps it on the element; the ✕ is still\n * the one control that takes a class off. Nothing about the eye is written\n * down, so the chips are always the class list that ships.\n *\n * The hidden class is the exception, and deliberately so: switching it off\n * on the canvas is the same act as the hierarchy's visibility eye (AGL-592),\n * so its chip drives THAT state rather than a second one that could\n * disagree with it.\n */\nexport const ElementClassesField = observer(\n  (props: ElementClassesFieldProps) => {\n    const { node } = props\n    const classes = useMemo(\n      () =>\n        String((node?.props as any)?.className ?? '')\n          .split(/\\s+/)\n          .filter(Boolean),\n      [(node?.props as any)?.className],\n    )\n\n    const [mutedClasses, setMutedClasses] = useAglynBesignerFlag('mutedClasses')\n    const [revealedNodeIds, setRevealedNodeIds] =\n      useAglynBesignerFlag('revealedNodeIds')\n\n    const nodeId = node?.$id\n\n    /** Whether the canvas is currently rendering without this class. */\n    const isSwitchedOff = useCallback(\n      (className: string) => {\n        if (!nodeId) return false\n        return isClassSwitchable(className)\n          ? isClassMuted(mutedClasses, { nodeId, className })\n          : Boolean(revealedNodeIds?.some((id) => id === nodeId))\n      },\n      [nodeId, mutedClasses, revealedNodeIds],\n    )\n\n    const toggleClass = useCallback(\n      (className: string) => {\n        if (!nodeId) return\n        if (isClassSwitchable(className)) {\n          setMutedClasses((current) =>\n            toggleMutedClass(current, { nodeId, className }),\n          )\n          return\n        }\n        // One switch, two places to reach it.\n        setRevealedNodeIds((current) => toggleRevealedNodeId(current, nodeId))\n      },\n      [nodeId, setMutedClasses, setRevealedNodeIds],\n    )\n\n    const handleChange = useCallback(\n      (event: unknown, value: string[]) => {\n        if (!node) return\n        const cleaned = value\n          .map((name) => name.trim())\n          .filter((name) => isValidClassName(name))\n        action(() => {\n          const nextProps: Record<string, unknown> = { ...(node.props as any) }\n          if (cleaned.length) nextProps['className'] = cleaned.join(' ')\n          else delete nextProps['className']\n          node.props = nextProps as any\n        })()\n      },\n      [node],\n    )\n\n    return (\n      <Autocomplete\n        multiple\n        freeSolo\n        size=\"small\"\n        options={[] as string[]}\n        value={classes}\n        onChange={handleChange}\n        renderValue={(value, getItemProps) =>\n          value.map((option, index) => {\n            const off = isSwitchedOff(option)\n            const switchable = isClassSwitchable(option)\n            return (\n              <Chip\n                label={option}\n                size=\"small\"\n                {...getItemProps({ index })}\n                key={option}\n                variant={off ? 'outlined' : 'filled'}\n                sx={\n                  off\n                    ? { textDecoration: 'line-through', opacity: 0.6 }\n                    : undefined\n                }\n                icon={\n                  <FieldMuteButton\n                    mute={{\n                      muted: off,\n                      label: switchable\n                        ? off\n                          ? `Apply ${option} again`\n                          : `Stop applying ${option} while designing`\n                        : off\n                          ? `Stop showing this element on the canvas`\n                          : `Show this element on the canvas`,\n                      onToggle: () => toggleClass(option),\n                    }}\n                    sx={{ ml: 0.5 }}\n                  />\n                }\n              />\n            )\n          })\n        }\n        renderInput={(params) => (\n          <TextField\n            {...params}\n            label=\"Classes\"\n            placeholder=\"Add class…\"\n            helperText=\"Custom CSS classes — targetable from theme styles and interactions\"\n          />\n        )}\n      />\n    )\n  },\n)\nElementClassesField.displayName = 'ElementClassesField'\n\nexport default ElementClassesField\n"],"names":["FieldMuteButton","Autocomplete","Chip","TextField","action","observer","useCallback","useMemo","useAglynBesignerFlag","toggleRevealedNodeId","isClassMuted","isClassSwitchable","toggleMutedClass","CLASS_NAME_PATTERN","isValidClassName","name","test","ElementClassesField","props","node","classes","String","className","split","filter","Boolean","mutedClasses","setMutedClasses","revealedNodeIds","setRevealedNodeIds","nodeId","$id","isSwitchedOff","some","id","toggleClass","current","handleChange","event","value","cleaned","map","trim","nextProps","length","join","multiple","freeSolo","size","options","onChange","renderValue","getItemProps","option","index","off","switchable","label","key","variant","sx","textDecoration","opacity","undefined","icon","mute","muted","onToggle","ml","renderInput","params","placeholder","helperText","displayName"],"mappings":"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"}

package/src/lib/components/element-detail-overlay.component.d.ts

@@ -0,0 +1,55 @@
+/**
+ * @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.
+ */
+export interface ElementDetailOverlayProps {
+    /** The picker item to describe, or null when nothing is active. */
+    item: any;
+    /** The card the panel points at. */
+    anchor: HTMLElement | null;
+    /** Held open by a click rather than by the pointer. */
+    pinned?: boolean;
+    onPointerEnter?: () => void;
+    onPointerLeave?: () => void;
+    onDismiss?: () => void;
+}
+/**
+ * The Elements panel's detail, floated out over the canvas (AGL-2486).
+ *
+ * It started as a band docked under the grid, which was the safe answer to
+ * "a tooltip must not cover what it describes" and a bad answer to
+ * everything else: a ~300px column cannot hold a preview, a description,
+ * derived facts, an attribute list and a link, so the preview came out a
+ * sliver and the prose wrapped to nothing.
+ *
+ * Floating gives it real width. What floating costs — and what makes most
+ * of these unusable — is that the content follows the pointer, so moving
+ * toward a link inside it changes what it says. That is solved in
+ * `useDetailHoverIntent`, not here: a click PINS, and a pin outranks the
+ * pointer, so everything in this panel is reachable. This component only has
+ * to not undo that, which means keeping its own pointer events live and
+ * feeding enter/leave back to the same intent state.
+ *
+ * Anchored `right-start` so it opens INTO the canvas and never covers the
+ * card being pointed at — the failure the box-styler tooltips had. Portalled,
+ * so the panel's own `overflow: auto` cannot clip it, and out of flow, so it
+ * cannot push the grid and slide the card out from under the cursor the way
+ * the docked band did.
+ */
+export declare function ElementDetailOverlay(props: ElementDetailOverlayProps): import("react").JSX.Element;
+export declare namespace ElementDetailOverlay {
+    var displayName: string;
+}
+export default ElementDetailOverlay;