@aglyn/besigner-ui 1.0.0-beta.217 → 1.0.0-beta.219

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

@@ -20,12 +20,69 @@ 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 { memo, 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);
+/** Free-text only: there is no list of classes to choose from. */ const NO_OPTIONS = [];
+/**
+ * The class chips themselves, MEMOIZED on props that hold still while the
+ * classes and their switches do (AGL-3423).
+ *
+ * A multiple Autocomplete hands its input a new chip array as
+ * `startAdornment` on every render, and MUI's `InputBase` copies that into
+ * its `FormControl` from a passive effect: a state update left pending after
+ * every commit the field takes part in. React 19 counts each such commit as
+ * a nested update, and keystrokes delivered back to back elsewhere in the
+ * panel commit one after another with nothing to clear the count, so the
+ * fifty-first throws "Maximum update depth exceeded" (#185). The field above
+ * is an `observer` of `node.props`, which every attribute commit replaces;
+ * kept out of those renders, the chips commit only when they change.
+ */ const ElementClassesChips = /*#__PURE__*/ memo(function ElementClassesChips(props) {
+    const { classes, isSwitchedOff, onToggle, onChange } = props;
+    return /*#__PURE__*/ _jsx(Autocomplete, {
+        multiple: true,
+        freeSolo: true,
+        size: "small",
+        options: NO_OPTIONS,
+        value: classes,
+        onChange: onChange,
+        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: ()=>onToggle(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"
+            }))
+    });
+});
 /**
  * Custom CSS classes on the selected element (AGL-335): chips persisted
  * into `node.props.className` (space-separated), merged into the
@@ -93,45 +150,11 @@ export const isValidClassName = (name)=>CLASS_NAME_PATTERN.test(name);
     }, [
         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"
-            }))
+    return /*#__PURE__*/ _jsx(ElementClassesChips, {
+        classes: classes,
+        isSwitchedOff: isSwitchedOff,
+        onToggle: toggleClass,
+        onChange: handleChange
     });
 });
 ElementClassesField.displayName = 'ElementClassesField';

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

@@ -1 +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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"}
+{"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 { memo, 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\n/** Free-text only: there is no list of classes to choose from. */\nconst NO_OPTIONS: string[] = []\n\ninterface ElementClassesChipsProps {\n  classes: readonly string[]\n  isSwitchedOff(className: string): boolean\n  onToggle(className: string): void\n  onChange(event: unknown, value: string[]): void\n}\n\n/**\n * The class chips themselves, MEMOIZED on props that hold still while the\n * classes and their switches do (AGL-3423).\n *\n * A multiple Autocomplete hands its input a new chip array as\n * `startAdornment` on every render, and MUI's `InputBase` copies that into\n * its `FormControl` from a passive effect: a state update left pending after\n * every commit the field takes part in. React 19 counts each such commit as\n * a nested update, and keystrokes delivered back to back elsewhere in the\n * panel commit one after another with nothing to clear the count, so the\n * fifty-first throws \"Maximum update depth exceeded\" (#185). The field above\n * is an `observer` of `node.props`, which every attribute commit replaces;\n * kept out of those renders, the chips commit only when they change.\n */\nconst ElementClassesChips = memo(function ElementClassesChips(\n  props: ElementClassesChipsProps,\n) {\n  const { classes, isSwitchedOff, onToggle, onChange } = props\n  return (\n    <Autocomplete\n      multiple\n      freeSolo\n      size=\"small\"\n      options={NO_OPTIONS}\n      value={classes as string[]}\n      onChange={onChange}\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: () => onToggle(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\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      <ElementClassesChips\n        classes={classes}\n        isSwitchedOff={isSwitchedOff}\n        onToggle={toggleClass}\n        onChange={handleChange}\n      />\n    )\n  },\n)\nElementClassesField.displayName = 'ElementClassesField'\n\nexport default ElementClassesField\n"],"names":["FieldMuteButton","Autocomplete","Chip","TextField","action","observer","memo","useCallback","useMemo","useAglynBesignerFlag","toggleRevealedNodeId","isClassMuted","isClassSwitchable","toggleMutedClass","CLASS_NAME_PATTERN","isValidClassName","name","test","NO_OPTIONS","ElementClassesChips","props","classes","isSwitchedOff","onToggle","onChange","multiple","freeSolo","size","options","value","renderValue","getItemProps","map","option","index","off","switchable","label","key","variant","sx","textDecoration","opacity","undefined","icon","mute","muted","ml","renderInput","params","placeholder","helperText","ElementClassesField","node","String","className","split","filter","Boolean","mutedClasses","setMutedClasses","revealedNodeIds","setRevealedNodeIds","nodeId","$id","some","id","toggleClass","current","handleChange","event","cleaned","trim","nextProps","length","join","displayName"],"mappings":"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"}

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

@@ -15,6 +15,18 @@
  * limitations under the License.
  */
 import type { ElementDetail } from '../utils/describe-element';
+import { type BesignerDocsAnchor } from '../utils/docs-help';
+/**
+ * Element category → its section of the element catalog page.
+ *
+ * The catalog's H2s ARE the drawer's categories, so the deep link is derived
+ * from the page's own headings rather than mapped by hand per category — a
+ * category is its heading's slug (`Data Display` → `#data-display`). A
+ * category the page has no section for — a plugin-registered label, "Your
+ * components" — lands on the page itself, which is correct rather than
+ * broken.
+ */
+export declare function elementCatalogAnchor(category: string | undefined): BesignerDocsAnchor<'elementCatalog'> | undefined;
 export interface ElementDetailViewProps {
     detail: ElementDetail | null;
     /**

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

@@ -16,27 +16,21 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * limitations under the License.
  */ import { Box, Chip, Link, Stack, Typography } from "@mui/material";
 import ElementPreview from "./element-preview.component.js";
-import { besignerDocsUrl } from "../utils/docs-help.js";
+import { BESIGNER_DOCS_ANCHORS, besignerDocsUrl } from "../utils/docs-help.js";
 /**
  * Element category → its section of the element catalog page.
  *
  * The catalog's H2s ARE the drawer's categories, so the deep link is derived
- * rather than mapped by hand per element — 45+ hand-written anchors would be
- * 45+ things to get wrong. A category with no section (plugin-registered
- * labels, "Your components") lands on the page itself, which is correct
- * rather than broken.
- */ const CATALOG_ANCHORS = {
-    Layout: '#layout',
-    Surface: '#surface',
-    Navigation: '#navigation',
-    Text: '#text',
-    'Data Display': '#data-display',
-    Media: '#media',
-    Forms: '#forms-input-commerce-members',
-    Input: '#forms-input-commerce-members',
-    Commerce: '#forms-input-commerce-members',
-    Members: '#forms-input-commerce-members'
-};
+ * from the page's own headings rather than mapped by hand per category — a
+ * category is its heading's slug (`Data Display` → `#data-display`). A
+ * category the page has no section for — a plugin-registered label, "Your
+ * components" — lands on the page itself, which is correct rather than
+ * broken.
+ */ export function elementCatalogAnchor(category) {
+    const slug = (category != null ? category : '').toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-+|-+$/g, '');
+    if (!slug) return undefined;
+    return BESIGNER_DOCS_ANCHORS.elementCatalog.find((anchor)=>anchor === `#${slug}`);
+}
 /**
  * What a selected element actually is, shown before you commit to it
  * (AGL-2486).
@@ -50,7 +44,6 @@ import { besignerDocsUrl } from "../utils/docs-help.js";
  * Everything under the description is DERIVED from the schema, so it cannot
  * go stale and third-party elements get it for free.
  */ export function ElementDetailView(props) {
-    var _detail_category;
     const { detail, dense, node, previewHeight } = props;
     if (!detail) return null;
     return /*#__PURE__*/ _jsxs(Stack, {
@@ -153,7 +146,7 @@ import { besignerDocsUrl } from "../utils/docs-help.js";
                 ]
             }) : null,
             /*#__PURE__*/ _jsx(Link, {
-                href: besignerDocsUrl('elementCatalog', CATALOG_ANCHORS[(_detail_category = detail.category) != null ? _detail_category : '']),
+                href: besignerDocsUrl('elementCatalog', elementCatalogAnchor(detail.category)),
                 target: "_blank",
                 rel: "noopener noreferrer",
                 variant: "caption",

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../../libs/besigner/feature/designer/src/lib/components/element-detail.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 { Box, Chip, Link, Stack, Typography } from '@mui/material'\nimport type { ElementDetail } from '../utils/describe-element'\nimport ElementPreview from './element-preview.component'\nimport { besignerDocsUrl, type BesignerDocsAnchor } from '../utils/docs-help'\n\n/**\n * Element category → its section of the element catalog page.\n *\n * The catalog's H2s ARE the drawer's categories, so the deep link is derived\n * rather than mapped by hand per element — 45+ hand-written anchors would be\n * 45+ things to get wrong. A category with no section (plugin-registered\n * labels, \"Your components\") lands on the page itself, which is correct\n * rather than broken.\n */\nconst CATALOG_ANCHORS: Record<string, BesignerDocsAnchor<'elementCatalog'>> = {\n  Layout: '#layout',\n  Surface: '#surface',\n  Navigation: '#navigation',\n  Text: '#text',\n  'Data Display': '#data-display',\n  Media: '#media',\n  Forms: '#forms-input-commerce-members',\n  Input: '#forms-input-commerce-members',\n  Commerce: '#forms-input-commerce-members',\n  Members: '#forms-input-commerce-members',\n}\n\nexport interface ElementDetailViewProps {\n  detail: ElementDetail | null\n  /**\n   * Narrow presentation for the docked Elements column. Same CONTENT either\n   * way — the content is designed once and the two surfaces present it\n   * differently, rather than there being two detail views to keep in step.\n   */\n  dense?: boolean\n  /**\n   * Height the preview may take. Both surfaces now float or pane the detail,\n   * so the preview is no longer squeezed into whatever the text leaves — it\n   * gets the room, because it is the part that needs it.\n   */\n  previewHeight?: number\n  /**\n   * The picker item itself, when the surface wants a rendered preview above\n   * the text. Only ever the one selected or hovered element — the detail\n   * region is single-tenant by construction, so the preview is too.\n   */\n  node?: any\n}\n\n/**\n * What a selected element actually is, shown before you commit to it\n * (AGL-2486).\n *\n * Deliberately a DOCKED REGION rather than a hover popup. A popup over the\n * grid would have to solve three problems this does not have: it can swallow\n * the click meant for the card beneath it, it can cover the very item you\n * are pointing at, and several can open at once. A region that lives outside\n * the grid cannot do any of those by construction.\n *\n * Everything under the description is DERIVED from the schema, so it cannot\n * go stale and third-party elements get it for free.\n */\nexport function ElementDetailView(props: ElementDetailViewProps) {\n  const { detail, dense, node, previewHeight } = props\n  if (!detail) return null\n\n  return (\n    <Stack\n      spacing={dense ? 0.5 : 0.75}\n      sx={{ minWidth: 0, width: 1 }}\n      aria-live=\"polite\"\n      data-testid=\"element-detail\"\n    >\n      {node ? (\n        <ElementPreview\n          node={node}\n          height={previewHeight ?? (dense ? 116 : 168)}\n          requiredParents={detail.requiredParents}\n        />\n      ) : null}\n\n      <Stack\n        direction=\"row\"\n        spacing={1}\n        sx={{ alignItems: 'center', minWidth: 0 }}\n      >\n        <Typography\n          variant={dense ? 'subtitle2' : 'subtitle1'}\n          noWrap\n          sx={{ textOverflow: 'ellipsis', fontWeight: 'fontWeightMedium' }}\n        >\n          {detail.name}\n        </Typography>\n        {detail.category ? (\n          <Chip\n            size=\"small\"\n            variant=\"outlined\"\n            label={detail.category}\n            sx={{ textTransform: 'capitalize', flex: '0 0 auto' }}\n          />\n        ) : null}\n      </Stack>\n\n      {detail.description ? (\n        <Typography variant=\"caption\" color=\"textSecondary\">\n          {detail.description}\n        </Typography>\n      ) : null}\n\n      {/* Derived facts. No heading — in a narrow column a heading costs a\n          line and explains nothing the list does not. */}\n      <Box component=\"ul\" sx={{ m: 0, pl: 0, listStyle: 'none' }}>\n        {detail.facts.map((fact) => (\n          <Stack\n            key={fact.id}\n            component=\"li\"\n            direction=\"row\"\n            spacing={0.5}\n            sx={{ alignItems: 'flex-start' }}\n          >\n            <Box\n              aria-hidden\n              sx={{\n                flex: '0 0 auto',\n                width: 4,\n                height: 4,\n                mt: '0.45em',\n                borderRadius: '50%',\n                backgroundColor: 'text.disabled',\n              }}\n            />\n            <Typography variant=\"caption\" color=\"textSecondary\">\n              {fact.label}\n            </Typography>\n          </Stack>\n        ))}\n      </Box>\n\n      {detail.attributes.length ? (\n        <Typography variant=\"caption\" color=\"textSecondary\" sx={{ mt: 0.25 }}>\n          <Box component=\"span\" sx={{ fontWeight: 'fontWeightMedium' }}>\n            {'Attributes: '}\n          </Box>\n          {detail.attributes.slice(0, dense ? 4 : 8).join(', ')}\n          {detail.attributes.length > (dense ? 4 : 8) ? '…' : ''}\n        </Typography>\n      ) : null}\n\n      {/* Links to the catalog rather than restating it. Duplicated\n          documentation drifts, and the docs page is the thing that is\n          actually maintained. */}\n      <Link\n        href={besignerDocsUrl(\n          'elementCatalog',\n          CATALOG_ANCHORS[detail.category ?? ''],\n        )}\n        target=\"_blank\"\n        rel=\"noopener noreferrer\"\n        variant=\"caption\"\n        sx={{ fontWeight: 600 }}\n      >\n        {'Learn more'}\n      </Link>\n    </Stack>\n  )\n}\nElementDetailView.displayName = 'ElementDetailView'\n\nexport default ElementDetailView\n"],"names":["Box","Chip","Link","Stack","Typography","ElementPreview","besignerDocsUrl","CATALOG_ANCHORS","Layout","Surface","Navigation","Text","Media","Forms","Input","Commerce","Members","ElementDetailView","props","detail","dense","node","previewHeight","spacing","sx","minWidth","width","aria-live","data-testid","height","requiredParents","direction","alignItems","variant","noWrap","textOverflow","fontWeight","name","category","size","label","textTransform","flex","description","color","component","m","pl","listStyle","facts","map","fact","aria-hidden","mt","borderRadius","backgroundColor","id","attributes","length","slice","join","href","target","rel","displayName"],"mappings":"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"}
+{"version":3,"sources":["../../../../../../../../libs/besigner/feature/designer/src/lib/components/element-detail.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 { Box, Chip, Link, Stack, Typography } from '@mui/material'\nimport type { ElementDetail } from '../utils/describe-element'\nimport ElementPreview from './element-preview.component'\nimport {\n  BESIGNER_DOCS_ANCHORS,\n  besignerDocsUrl,\n  type BesignerDocsAnchor,\n} from '../utils/docs-help'\n\n/**\n * Element category → its section of the element catalog page.\n *\n * The catalog's H2s ARE the drawer's categories, so the deep link is derived\n * from the page's own headings rather than mapped by hand per category — a\n * category is its heading's slug (`Data Display` → `#data-display`). A\n * category the page has no section for — a plugin-registered label, \"Your\n * components\" — lands on the page itself, which is correct rather than\n * broken.\n */\nexport function elementCatalogAnchor(\n  category: string | undefined,\n): BesignerDocsAnchor<'elementCatalog'> | undefined {\n  const slug = (category ?? '')\n    .toLowerCase()\n    .replace(/[^a-z0-9]+/g, '-')\n    .replace(/^-+|-+$/g, '')\n  if (!slug) return undefined\n  return BESIGNER_DOCS_ANCHORS.elementCatalog.find(\n    (anchor) => anchor === `#${slug}`,\n  )\n}\n\nexport interface ElementDetailViewProps {\n  detail: ElementDetail | null\n  /**\n   * Narrow presentation for the docked Elements column. Same CONTENT either\n   * way — the content is designed once and the two surfaces present it\n   * differently, rather than there being two detail views to keep in step.\n   */\n  dense?: boolean\n  /**\n   * Height the preview may take. Both surfaces now float or pane the detail,\n   * so the preview is no longer squeezed into whatever the text leaves — it\n   * gets the room, because it is the part that needs it.\n   */\n  previewHeight?: number\n  /**\n   * The picker item itself, when the surface wants a rendered preview above\n   * the text. Only ever the one selected or hovered element — the detail\n   * region is single-tenant by construction, so the preview is too.\n   */\n  node?: any\n}\n\n/**\n * What a selected element actually is, shown before you commit to it\n * (AGL-2486).\n *\n * Deliberately a DOCKED REGION rather than a hover popup. A popup over the\n * grid would have to solve three problems this does not have: it can swallow\n * the click meant for the card beneath it, it can cover the very item you\n * are pointing at, and several can open at once. A region that lives outside\n * the grid cannot do any of those by construction.\n *\n * Everything under the description is DERIVED from the schema, so it cannot\n * go stale and third-party elements get it for free.\n */\nexport function ElementDetailView(props: ElementDetailViewProps) {\n  const { detail, dense, node, previewHeight } = props\n  if (!detail) return null\n\n  return (\n    <Stack\n      spacing={dense ? 0.5 : 0.75}\n      sx={{ minWidth: 0, width: 1 }}\n      aria-live=\"polite\"\n      data-testid=\"element-detail\"\n    >\n      {node ? (\n        <ElementPreview\n          node={node}\n          height={previewHeight ?? (dense ? 116 : 168)}\n          requiredParents={detail.requiredParents}\n        />\n      ) : null}\n\n      <Stack\n        direction=\"row\"\n        spacing={1}\n        sx={{ alignItems: 'center', minWidth: 0 }}\n      >\n        <Typography\n          variant={dense ? 'subtitle2' : 'subtitle1'}\n          noWrap\n          sx={{ textOverflow: 'ellipsis', fontWeight: 'fontWeightMedium' }}\n        >\n          {detail.name}\n        </Typography>\n        {detail.category ? (\n          <Chip\n            size=\"small\"\n            variant=\"outlined\"\n            label={detail.category}\n            sx={{ textTransform: 'capitalize', flex: '0 0 auto' }}\n          />\n        ) : null}\n      </Stack>\n\n      {detail.description ? (\n        <Typography variant=\"caption\" color=\"textSecondary\">\n          {detail.description}\n        </Typography>\n      ) : null}\n\n      {/* Derived facts. No heading — in a narrow column a heading costs a\n          line and explains nothing the list does not. */}\n      <Box component=\"ul\" sx={{ m: 0, pl: 0, listStyle: 'none' }}>\n        {detail.facts.map((fact) => (\n          <Stack\n            key={fact.id}\n            component=\"li\"\n            direction=\"row\"\n            spacing={0.5}\n            sx={{ alignItems: 'flex-start' }}\n          >\n            <Box\n              aria-hidden\n              sx={{\n                flex: '0 0 auto',\n                width: 4,\n                height: 4,\n                mt: '0.45em',\n                borderRadius: '50%',\n                backgroundColor: 'text.disabled',\n              }}\n            />\n            <Typography variant=\"caption\" color=\"textSecondary\">\n              {fact.label}\n            </Typography>\n          </Stack>\n        ))}\n      </Box>\n\n      {detail.attributes.length ? (\n        <Typography variant=\"caption\" color=\"textSecondary\" sx={{ mt: 0.25 }}>\n          <Box component=\"span\" sx={{ fontWeight: 'fontWeightMedium' }}>\n            {'Attributes: '}\n          </Box>\n          {detail.attributes.slice(0, dense ? 4 : 8).join(', ')}\n          {detail.attributes.length > (dense ? 4 : 8) ? '…' : ''}\n        </Typography>\n      ) : null}\n\n      {/* Links to the catalog rather than restating it. Duplicated\n          documentation drifts, and the docs page is the thing that is\n          actually maintained. */}\n      <Link\n        href={besignerDocsUrl(\n          'elementCatalog',\n          elementCatalogAnchor(detail.category),\n        )}\n        target=\"_blank\"\n        rel=\"noopener noreferrer\"\n        variant=\"caption\"\n        sx={{ fontWeight: 600 }}\n      >\n        {'Learn more'}\n      </Link>\n    </Stack>\n  )\n}\nElementDetailView.displayName = 'ElementDetailView'\n\nexport default ElementDetailView\n"],"names":["Box","Chip","Link","Stack","Typography","ElementPreview","BESIGNER_DOCS_ANCHORS","besignerDocsUrl","elementCatalogAnchor","category","slug","toLowerCase","replace","undefined","elementCatalog","find","anchor","ElementDetailView","props","detail","dense","node","previewHeight","spacing","sx","minWidth","width","aria-live","data-testid","height","requiredParents","direction","alignItems","variant","noWrap","textOverflow","fontWeight","name","size","label","textTransform","flex","description","color","component","m","pl","listStyle","facts","map","fact","aria-hidden","mt","borderRadius","backgroundColor","id","attributes","length","slice","join","href","target","rel","displayName"],"mappings":"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"}

package/src/lib/components/element-interactions-form.component.d.ts

@@ -15,7 +15,7 @@ export interface ElementInteractionsFormProps {
  * The list, the trigger picker and the section experiment move verbatim; what
  * changes is where they are.
  */
-export declare const ElementInteractionsForm: ((props: ElementInteractionsFormProps) => import("react").JSX.Element) & {
-    displayName: string;
+export declare const ElementInteractionsForm: ((props: ElementInteractionsFormProps) => import("react").JSX.Element) & import("react").NamedExoticComponent<ElementInteractionsFormProps> & {
+    readonly type: (props: ElementInteractionsFormProps) => import("react").JSX.Element;
 };
 export default ElementInteractionsForm;

package/src/lib/components/element-preview.component.d.ts

@@ -54,8 +54,8 @@ export interface ElementPreviewProps {
  * second list of which elements are self-contained: each element already
  * says so itself.
  */
-export declare const ElementPreview: ((props: ElementPreviewProps) => import("react").JSX.Element) & {
-    displayName: string;
+export declare const ElementPreview: ((props: ElementPreviewProps) => import("react").JSX.Element) & import("react").NamedExoticComponent<ElementPreviewProps> & {
+    readonly type: (props: ElementPreviewProps) => import("react").JSX.Element;
 };
 /**
  * Whether the rendered preview drew anything a person can actually see.

package/src/lib/components/element-props-form.component.d.ts

@@ -571,5 +571,7 @@ export declare function buildEntityPickerField<T extends Aglyn.AglynAttributeSch
  * which looks exactly like a site with no products.
  */
 export declare function entityKindsForAttributes(attributes: readonly Aglyn.AglynAttributeSchema[] | undefined): Aglyn.EntityPickerKind[];
-export declare const ElementPropsForm: import("react").FunctionComponent<ElementPropsFormProps & import("react").RefAttributes<any>>;
+export declare const ElementPropsForm: import("react").ForwardRefExoticComponent<ElementPropsFormProps & import("react").RefAttributes<any>> & import("react").NamedExoticComponent<ElementPropsFormProps & import("react").RefAttributes<any>> & {
+    readonly type: import("react").ForwardRefExoticComponent<ElementPropsFormProps & import("react").RefAttributes<any>>;
+};
 export default ElementPropsForm;

package/src/lib/components/element-props-form.component.js

@@ -798,12 +798,12 @@ export const elementPropsComponentMapper = _extends({}, simpleComponentMapper, {
     }
     if (field.component === FieldComponentType.DATASET_FIELD_SELECT) {
         var _ref;
-        var _entityOptions_datasetFields;
-        // Model order, never alphabetized — it mirrors the schema dialog. A
+        var _entityOptions_entityFields_datasets, _entityOptions_entityFields;
+        // Declared order, never alphabetized — it mirrors the schema dialog. A
         // field naming its own dataset (a Dataset field property) reads that
         // one; every other reads the nearest ancestor's.
-        const datasetId = typeof field['datasetId'] === 'string' && field['datasetId'] ? field['datasetId'] : ancestorDatasetId;
-        const modelFields = datasetId ? (_ref = (_entityOptions_datasetFields = entityOptions.datasetFields) == null ? void 0 : _entityOptions_datasetFields[datasetId]) != null ? _ref : [] : [];
+        const boundId = typeof field['datasetId'] === 'string' && field['datasetId'] ? field['datasetId'] : ancestorDatasetId;
+        const modelFields = boundId ? (_ref = (_entityOptions_entityFields = entityOptions.entityFields) == null ? void 0 : (_entityOptions_entityFields_datasets = _entityOptions_entityFields.datasets) == null ? void 0 : _entityOptions_entityFields_datasets[boundId]) != null ? _ref : [] : [];
         return _extends({}, field, {
             component: FieldComponentType.SELECT,
             options: [