@aglyn/besigner-ui 1.0.0-beta.143

package/src/lib/components/site-theme-color-tokens-provider.component.js

@@ -0,0 +1,53 @@
+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 { useAglynSiteTheme } from "@aglyn/aglyn-node-renderer";
+import { buildColorTokenOptions, ColorPickerTokensContext } from "@aglyn/shared-ui-jsx-forms";
+import { useHostThemeDocument } from "@aglyn/shared-ui-theme";
+import { useMemo } from "react";
+/**
+ * Feeds the two-stage color picker (AGL-588) with the SITE theme's
+ * palette token references, resolved through BOTH schemes of the host's
+ * persisted theme document so every swatch previews its light and dark
+ * colors. Mounted around the designer's aside panels, it reaches every
+ * COLOR_PICKER field — styles panel, attribute forms, and email block
+ * attributes — through the shared field component, with no per-form
+ * wiring.
+ */ export const SiteThemeColorTokensProvider = (props)=>{
+    const { children } = props;
+    const hostThemeDoc = useHostThemeDocument();
+    const lightTheme = useAglynSiteTheme({
+        theme: hostThemeDoc,
+        scheme: 'light'
+    });
+    const darkTheme = useAglynSiteTheme({
+        theme: hostThemeDoc,
+        scheme: 'dark'
+    });
+    const options = useMemo(()=>buildColorTokenOptions(lightTheme.palette, darkTheme.palette), [
+        lightTheme,
+        darkTheme
+    ]);
+    return /*#__PURE__*/ _jsx(ColorPickerTokensContext.Provider, {
+        value: options,
+        children: children
+    });
+};
+SiteThemeColorTokensProvider.displayName = 'SiteThemeColorTokensProvider';
+SiteThemeColorTokensProvider.aglyn = true;
+export default SiteThemeColorTokensProvider;
+
+//# sourceMappingURL=site-theme-color-tokens-provider.component.js.map

package/src/lib/components/site-theme-color-tokens-provider.component.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../libs/besigner/feature/designer/src/lib/components/site-theme-color-tokens-provider.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 { useAglynSiteTheme } from '@aglyn/aglyn-node-renderer'\nimport {\n  buildColorTokenOptions,\n  ColorPickerTokensContext,\n} from '@aglyn/shared-ui-jsx-forms'\nimport { useHostThemeDocument } from '@aglyn/shared-ui-theme'\nimport { useMemo } from 'react'\n\n/**\n * Feeds the two-stage color picker (AGL-588) with the SITE theme's\n * palette token references, resolved through BOTH schemes of the host's\n * persisted theme document so every swatch previews its light and dark\n * colors. Mounted around the designer's aside panels, it reaches every\n * COLOR_PICKER field — styles panel, attribute forms, and email block\n * attributes — through the shared field component, with no per-form\n * wiring.\n */\nexport const SiteThemeColorTokensProvider = (props: {\n  children?: JSX.Children\n}) => {\n  const { children } = props\n  const hostThemeDoc = useHostThemeDocument()\n  const lightTheme = useAglynSiteTheme({ theme: hostThemeDoc, scheme: 'light' })\n  const darkTheme = useAglynSiteTheme({ theme: hostThemeDoc, scheme: 'dark' })\n  const options = useMemo(\n    () =>\n      buildColorTokenOptions(\n        lightTheme.palette as unknown as Record<string, unknown>,\n        darkTheme.palette as unknown as Record<string, unknown>,\n      ),\n    [lightTheme, darkTheme],\n  )\n  return (\n    <ColorPickerTokensContext.Provider value={options}>\n      {children}\n    </ColorPickerTokensContext.Provider>\n  )\n}\nSiteThemeColorTokensProvider.displayName = 'SiteThemeColorTokensProvider'\nSiteThemeColorTokensProvider.aglyn = true\n\nexport default SiteThemeColorTokensProvider\n"],"names":["useAglynSiteTheme","buildColorTokenOptions","ColorPickerTokensContext","useHostThemeDocument","useMemo","SiteThemeColorTokensProvider","props","children","hostThemeDoc","lightTheme","theme","scheme","darkTheme","options","palette","Provider","value","displayName","aglyn"],"mappings":";AAAA;;;;;;;;;;;;;;;CAeC,GAED,SAASA,iBAAiB,QAAQ,6BAA4B;AAC9D,SACEC,sBAAsB,EACtBC,wBAAwB,QACnB,6BAA4B;AACnC,SAASC,oBAAoB,QAAQ,yBAAwB;AAC7D,SAASC,OAAO,QAAQ,QAAO;AAE/B;;;;;;;;CAQC,GACD,OAAO,MAAMC,+BAA+B,CAACC;IAG3C,MAAM,EAAEC,QAAQ,EAAE,GAAGD;IACrB,MAAME,eAAeL;IACrB,MAAMM,aAAaT,kBAAkB;QAAEU,OAAOF;QAAcG,QAAQ;IAAQ;IAC5E,MAAMC,YAAYZ,kBAAkB;QAAEU,OAAOF;QAAcG,QAAQ;IAAO;IAC1E,MAAME,UAAUT,QACd,IACEH,uBACEQ,WAAWK,OAAO,EAClBF,UAAUE,OAAO,GAErB;QAACL;QAAYG;KAAU;IAEzB,qBACE,KAACV,yBAAyBa,QAAQ;QAACC,OAAOH;kBACvCN;;AAGP,EAAC;AACDF,6BAA6BY,WAAW,GAAG;AAC3CZ,6BAA6Ba,KAAK,GAAG;AAErC,eAAeb,6BAA4B"}

package/src/lib/components/subtree-json-dialog.component.d.ts

@@ -0,0 +1,46 @@
+/**
+ * @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 interface SubtreeJsonDialogProps {
+    node?: Aglyn.NodeSchema<any> | null;
+    open: boolean;
+    onClose: () => void;
+}
+type NestedNode = {
+    $id?: string;
+    componentId?: string;
+    nodes?: NestedNode[];
+    [key: string]: unknown;
+};
+/**
+ * Validates a nested subtree before it replaces canvas content
+ * (AGL-338): every node needs a resolvable componentId and ids must be
+ * unique within the subtree (missing ids get minted).
+ */
+export declare function validateSubtree(root: NestedNode): string | null;
+/**
+ * Edit the JSON of a single element and its children (AGL-338), instead
+ * of the whole screen document — through the SAME editor as the Edit
+ * menu's raw JSON dialog (AGL-457). Save validates, keeps the node's
+ * identity (so the parent's child list stays intact), and replaces the
+ * subtree in one undoable step.
+ */
+export declare function SubtreeJsonDialog(props: SubtreeJsonDialogProps): import("react").JSX.Element;
+export declare namespace SubtreeJsonDialog {
+    var displayName: string;
+}
+export default SubtreeJsonDialog;

package/src/lib/components/subtree-json-dialog.component.js

@@ -0,0 +1,125 @@
+/**
+ * @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 { canvas, components } from "@aglyn/aglyn";
+import { JsonEditor } from "@aglyn/shared-ui-json-editor";
+import { toJS } from "mobx";
+import { useCallback, useMemo } from "react";
+/**
+ * Validates a nested subtree before it replaces canvas content
+ * (AGL-338): every node needs a resolvable componentId and ids must be
+ * unique within the subtree (missing ids get minted).
+ */ export function validateSubtree(root) {
+    const seen = new Set();
+    const walk = (item, path)=>{
+        if (typeof item !== 'object' || item === null || Array.isArray(item)) {
+            return `${path}: each node must be a JSON object`;
+        }
+        if (!item.componentId || typeof item.componentId !== 'string') {
+            return `${path}: missing componentId`;
+        }
+        if (!components.getFactory(item.componentId)) {
+            return `${path}: unknown component "${item.componentId}"`;
+        }
+        if (item.$id) {
+            if (seen.has(item.$id)) return `${path}: duplicate node id "${item.$id}"`;
+            seen.add(item.$id);
+        }
+        const children = Array.isArray(item.nodes) ? item.nodes : [];
+        for(let i = 0; i < children.length; i += 1){
+            const problem = walk(children[i], `${path}.nodes[${i}]`);
+            if (problem) return problem;
+        }
+        return null;
+    };
+    return walk(root, '$');
+}
+const mintMissingIds = (item)=>{
+    if (!item.$id) item.$id = canvas.createNodeId();
+    for (const child of Array.isArray(item.nodes) ? item.nodes : []){
+        mintMissingIds(child);
+    }
+};
+/** Node ids of the subtree rooted at `nodeId` in a flat NodesMap. */ const collectSubtreeIds = (map, nodeId, out = [])=>{
+    var _ref;
+    var _map_nodeId;
+    out.push(nodeId);
+    const children = (_ref = (_map_nodeId = map[nodeId]) == null ? void 0 : _map_nodeId.nodes) != null ? _ref : [];
+    for (const childId of children){
+        if (typeof childId === 'string' && map[childId]) {
+            collectSubtreeIds(map, childId, out);
+        }
+    }
+    return out;
+};
+/** The parsed draft with the root's identity pinned back on (AGL-338). */ const withRootIdentity = (value, node)=>{
+    const parsed = structuredClone(value);
+    // The root keeps its identity — the parent's child list references it.
+    parsed.$id = node.$id;
+    parsed['parentId'] = node.parentId;
+    return parsed;
+};
+/**
+ * Edit the JSON of a single element and its children (AGL-338), instead
+ * of the whole screen document — through the SAME editor as the Edit
+ * menu's raw JSON dialog (AGL-457). Save validates, keeps the node's
+ * identity (so the parent's child list stays intact), and replaces the
+ * subtree in one undoable step.
+ */ export function SubtreeJsonDialog(props) {
+    const { node, open, onClose } = props;
+    const nested = useMemo(()=>open && node ? canvas.makeNested(node) : undefined, [
+        open,
+        node
+    ]);
+    const handleValidate = useCallback((value)=>{
+        if (!node) return 'No element selected';
+        return validateSubtree(withRootIdentity(value, node));
+    }, [
+        node
+    ]);
+    const handleSave = useCallback((_event, value)=>{
+        if (!node) return;
+        const parsed = withRootIdentity(value, node);
+        mintMissingIds(parsed);
+        // Full-map rebuild: drop the old subtree's descendants, splice in the
+        // new flat nodes, and apply as one undoable replacement.
+        const map = _extends({}, toJS(canvas.toJSON().nodes));
+        for (const staleId of collectSubtreeIds(map, node.$id)){
+            delete map[staleId];
+        }
+        const flat = canvas.constructor.denormalizeNodes([
+            parsed
+        ], node.parentId, {});
+        Object.assign(map, flat);
+        canvas.applyNodes(map);
+    }, [
+        node
+    ]);
+    return /*#__PURE__*/ _jsx(JsonEditor, {
+        open: open,
+        title: "Edit element JSON",
+        description: 'This element and its children only — the rest of the screen is ' + 'untouched. Save replaces the subtree (undo restores it).',
+        defaultValue: nested,
+        validate: handleValidate,
+        onSave: handleSave,
+        onClose: onClose
+    });
+}
+SubtreeJsonDialog.displayName = 'SubtreeJsonDialog';
+export default SubtreeJsonDialog;
+
+//# sourceMappingURL=subtree-json-dialog.component.js.map

package/src/lib/components/subtree-json-dialog.component.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../libs/besigner/feature/designer/src/lib/components/subtree-json-dialog.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 { canvas, components } from '@aglyn/aglyn'\nimport { JsonEditor } from '@aglyn/shared-ui-json-editor'\nimport { toJS } from 'mobx'\nimport { useCallback, useMemo } from 'react'\n\nexport interface SubtreeJsonDialogProps {\n  node?: Aglyn.NodeSchema<any> | null\n  open: boolean\n  onClose: () => void\n}\n\ntype NestedNode = {\n  $id?: string\n  componentId?: string\n  nodes?: NestedNode[]\n  [key: string]: unknown\n}\n\n/**\n * Validates a nested subtree before it replaces canvas content\n * (AGL-338): every node needs a resolvable componentId and ids must be\n * unique within the subtree (missing ids get minted).\n */\nexport function validateSubtree(root: NestedNode): string | null {\n  const seen = new Set<string>()\n  const walk = (item: NestedNode, path: string): string | null => {\n    if (typeof item !== 'object' || item === null || Array.isArray(item)) {\n      return `${path}: each node must be a JSON object`\n    }\n    if (!item.componentId || typeof item.componentId !== 'string') {\n      return `${path}: missing componentId`\n    }\n    if (!components.getFactory(item.componentId as any)) {\n      return `${path}: unknown component \"${item.componentId}\"`\n    }\n    if (item.$id) {\n      if (seen.has(item.$id)) return `${path}: duplicate node id \"${item.$id}\"`\n      seen.add(item.$id)\n    }\n    const children = Array.isArray(item.nodes) ? item.nodes : []\n    for (let i = 0; i < children.length; i += 1) {\n      const problem = walk(children[i] as NestedNode, `${path}.nodes[${i}]`)\n      if (problem) return problem\n    }\n    return null\n  }\n  return walk(root, '$')\n}\n\nconst mintMissingIds = (item: NestedNode): void => {\n  if (!item.$id) item.$id = canvas.createNodeId()\n  for (const child of Array.isArray(item.nodes) ? item.nodes : []) {\n    mintMissingIds(child as NestedNode)\n  }\n}\n\n/** Node ids of the subtree rooted at `nodeId` in a flat NodesMap. */\nconst collectSubtreeIds = (\n  map: Record<string, Aglyn.NodeSchema<any>>,\n  nodeId: string,\n  out: string[] = [],\n): string[] => {\n  out.push(nodeId)\n  const children = (map[nodeId]?.nodes ?? []) as string[]\n  for (const childId of children) {\n    if (typeof childId === 'string' && map[childId]) {\n      collectSubtreeIds(map, childId, out)\n    }\n  }\n  return out\n}\n\n/** The parsed draft with the root's identity pinned back on (AGL-338). */\nconst withRootIdentity = (\n  value: unknown,\n  node: Aglyn.NodeSchema<any>,\n): NestedNode => {\n  const parsed = structuredClone(value) as NestedNode\n  // The root keeps its identity — the parent's child list references it.\n  parsed.$id = node.$id\n  parsed['parentId'] = node.parentId\n  return parsed\n}\n\n/**\n * Edit the JSON of a single element and its children (AGL-338), instead\n * of the whole screen document — through the SAME editor as the Edit\n * menu's raw JSON dialog (AGL-457). Save validates, keeps the node's\n * identity (so the parent's child list stays intact), and replaces the\n * subtree in one undoable step.\n */\nexport function SubtreeJsonDialog(props: SubtreeJsonDialogProps) {\n  const { node, open, onClose } = props\n\n  const nested = useMemo(\n    () => (open && node ? canvas.makeNested(node as any) : undefined),\n    [open, node],\n  )\n\n  const handleValidate = useCallback(\n    (value: unknown) => {\n      if (!node) return 'No element selected'\n      return validateSubtree(withRootIdentity(value, node))\n    },\n    [node],\n  )\n\n  const handleSave = useCallback(\n    (_event: unknown, value: unknown) => {\n      if (!node) return\n      const parsed = withRootIdentity(value, node)\n      mintMissingIds(parsed)\n\n      // Full-map rebuild: drop the old subtree's descendants, splice in the\n      // new flat nodes, and apply as one undoable replacement.\n      const map = {\n        ...(toJS(canvas.toJSON().nodes) as Record<\n          string,\n          Aglyn.NodeSchema<any>\n        >),\n      }\n      for (const staleId of collectSubtreeIds(map, node.$id)) {\n        delete map[staleId]\n      }\n      const flat = (canvas.constructor as any).denormalizeNodes(\n        [parsed],\n        node.parentId!,\n        {},\n      )\n      Object.assign(map, flat)\n      canvas.applyNodes(map as any)\n    },\n    [node],\n  )\n\n  return (\n    <JsonEditor\n      open={open}\n      title=\"Edit element JSON\"\n      description={\n        'This element and its children only — the rest of the screen is ' +\n        'untouched. Save replaces the subtree (undo restores it).'\n      }\n      defaultValue={nested as any}\n      validate={handleValidate}\n      onSave={handleSave}\n      onClose={onClose}\n    />\n  )\n}\nSubtreeJsonDialog.displayName = 'SubtreeJsonDialog'\n\nexport default SubtreeJsonDialog\n"],"names":["canvas","components","JsonEditor","toJS","useCallback","useMemo","validateSubtree","root","seen","Set","walk","item","path","Array","isArray","componentId","getFactory","$id","has","add","children","nodes","i","length","problem","mintMissingIds","createNodeId","child","collectSubtreeIds","map","nodeId","out","push","childId","withRootIdentity","value","node","parsed","structuredClone","parentId","SubtreeJsonDialog","props","open","onClose","nested","makeNested","undefined","handleValidate","handleSave","_event","toJSON","staleId","flat","denormalizeNodes","Object","assign","applyNodes","title","description","defaultValue","validate","onSave","displayName"],"mappings":"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"}

package/src/lib/components/token-pill.component.d.ts

@@ -0,0 +1,51 @@
+/**
+ * @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 { Theme } from '@mui/material/styles';
+import type { SystemStyleObject } from '@mui/system';
+import type { ResolvedTokenLabel } from '../utils/token-segments';
+export declare const tokenPillContainerSx: SystemStyleObject<Theme>;
+export interface TokenPillProps {
+    /** Raw stored token, e.g. `{{var:AbC123}}`. */
+    token: string;
+    resolved: ResolvedTokenLabel;
+}
+/**
+ * One atomic pill inside a React-rendered editable surface. Clicks are
+ * handled by the surface via delegation on the `data-token` attribute
+ * (matching the inline editor's direct-DOM pills), so the pill itself
+ * stays a dumb, re-render-safe span.
+ */
+export declare function TokenPill(props: TokenPillProps): import("react").JSX.Element;
+export declare namespace TokenPill {
+    var displayName: string;
+}
+export interface TokenPillPopoverProps {
+    anchorEl: HTMLElement | null;
+    /** Raw token of the clicked pill (shown so editors can see the id form). */
+    token: string;
+    onClose: () => void;
+    /** Opens the insert picker to swap this token in place. */
+    onReplace: () => void;
+    /** Deletes this token from the value. */
+    onRemove: () => void;
+}
+/** The click affordance on a pill: replace it (via the picker) or remove it. */
+export declare function TokenPillPopover(props: TokenPillPopoverProps): import("react").JSX.Element;
+export declare namespace TokenPillPopover {
+    var displayName: string;
+}
+export default TokenPill;

package/src/lib/components/token-pill.component.js

@@ -0,0 +1,164 @@
+import { _ as _extends } from "@swc/helpers/_/_extends";
+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 { Button, Popover, Stack, Typography } from "@mui/material";
+import { TOKEN_PILL_ATTR, TOKEN_PILL_GROUP_ATTR } from "../utils/token-editable-dom.js";
+/**
+ * Token pills (AGL-586): the colored badges that render `{{...}}` bindings
+ * as their CURRENT display names inside editable text surfaces. The
+ * serialized value keeps the raw id-based token; the pill is presentation
+ * only. Pills are atomic (`contenteditable="false"`) and clickable — the
+ * host surface opens {@link TokenPillPopover} to replace or remove one.
+ *
+ * Styling lives on the CONTAINER (keyed off the data attributes) so React
+ * pills and the inline editor's direct-DOM pills look identical.
+ */ /** Pill colors by token family — stable theme-palette assignments. */ const PILL_GROUP_STYLES = {
+    // Slate, not the accent (AGL-1194): a pill is editor chrome rendered
+    // inside the user's own text, so it must not read as content styling.
+    // The other families keep their semantic hues — they encode WHAT the
+    // token is, which is information, not decoration.
+    variable: {
+        bgcolor: 'tertiary.main',
+        color: 'tertiary.contrastText'
+    },
+    function: {
+        bgcolor: 'tertiary.main',
+        color: 'tertiary.contrastText'
+    },
+    entry: {
+        bgcolor: 'info.main',
+        color: 'info.contrastText'
+    },
+    collection: {
+        bgcolor: 'success.main',
+        color: 'success.contrastText'
+    },
+    dataset: {
+        bgcolor: 'grey.700',
+        color: 'common.white'
+    },
+    // A value each page supplies, like a variable is one the site supplies.
+    property: {
+        bgcolor: 'tertiary.main',
+        color: 'tertiary.contrastText'
+    },
+    // A value the site supplies from its own settings (AGL-2881).
+    host: {
+        bgcolor: 'tertiary.main',
+        color: 'tertiary.contrastText'
+    },
+    // Unresolvable referent (deleted variable, unknown grammar): warning.
+    unknown: {
+        bgcolor: 'warning.main',
+        color: 'warning.contrastText'
+    }
+};
+/**
+ * Container styles for any surface that hosts pills. Spread into the
+ * editable element's `sx` — pills themselves carry only data attributes.
+ * Built as a plain record and cast once: MUI's sx union chokes (TS2590)
+ * on computed spreads inside the literal.
+ */ const containerStyles = {
+    [`& [${TOKEN_PILL_ATTR}]`]: _extends({
+        display: 'inline-block',
+        borderRadius: 1,
+        px: 0.75,
+        mx: '1px',
+        fontSize: '0.8em',
+        lineHeight: 1.7,
+        fontWeight: 600,
+        whiteSpace: 'nowrap',
+        verticalAlign: 'baseline',
+        cursor: 'pointer',
+        userSelect: 'none'
+    }, PILL_GROUP_STYLES['unknown'])
+};
+for (const [group, style] of Object.entries(PILL_GROUP_STYLES)){
+    containerStyles[`& [${TOKEN_PILL_ATTR}][${TOKEN_PILL_GROUP_ATTR}="${group}"]`] = style;
+}
+export const tokenPillContainerSx = containerStyles;
+/**
+ * One atomic pill inside a React-rendered editable surface. Clicks are
+ * handled by the surface via delegation on the `data-token` attribute
+ * (matching the inline editor's direct-DOM pills), so the pill itself
+ * stays a dumb, re-render-safe span.
+ */ export function TokenPill(props) {
+    const { token, resolved } = props;
+    const attributes = {
+        [TOKEN_PILL_ATTR]: token,
+        [TOKEN_PILL_GROUP_ATTR]: resolved.known ? resolved.group : 'unknown'
+    };
+    return /*#__PURE__*/ _jsx("span", _extends({}, attributes, {
+        contentEditable: false,
+        role: "button",
+        // The raw token stays inspectable (names shown, ids stored).
+        title: token,
+        children: resolved.label
+    }));
+}
+TokenPill.displayName = 'TokenPill';
+/** The click affordance on a pill: replace it (via the picker) or remove it. */ export function TokenPillPopover(props) {
+    const { anchorEl, token, onClose, onReplace, onRemove } = props;
+    return /*#__PURE__*/ _jsx(Popover, {
+        open: Boolean(anchorEl),
+        anchorEl: anchorEl,
+        onClose: onClose,
+        anchorOrigin: {
+            vertical: 'bottom',
+            horizontal: 'left'
+        },
+        // The editable surface keeps its DOM selection while the popover is up.
+        disableRestoreFocus: true,
+        children: /*#__PURE__*/ _jsxs(Stack, {
+            direction: "row",
+            spacing: 1,
+            sx: {
+                px: 1.5,
+                py: 1,
+                alignItems: 'center',
+                maxWidth: 420
+            },
+            children: [
+                /*#__PURE__*/ _jsx(Typography, {
+                    variant: "caption",
+                    color: "text.secondary",
+                    noWrap: true,
+                    sx: {
+                        maxWidth: 200,
+                        fontFamily: 'monospace'
+                    },
+                    children: token
+                }),
+                /*#__PURE__*/ _jsx(Button, {
+                    size: "small",
+                    onClick: onReplace,
+                    children: 'Replace'
+                }),
+                /*#__PURE__*/ _jsx(Button, {
+                    size: "small",
+                    color: "error",
+                    onClick: onRemove,
+                    children: 'Remove'
+                })
+            ]
+        })
+    });
+}
+TokenPillPopover.displayName = 'TokenPillPopover';
+export default TokenPill;
+
+//# sourceMappingURL=token-pill.component.js.map

package/src/lib/components/token-pill.component.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../libs/besigner/feature/designer/src/lib/components/token-pill.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 { Button, Popover, Stack, Typography } from '@mui/material'\nimport type { Theme } from '@mui/material/styles'\nimport type { SystemStyleObject } from '@mui/system'\n\nimport {\n  TOKEN_PILL_ATTR,\n  TOKEN_PILL_GROUP_ATTR,\n} from '../utils/token-editable-dom'\nimport type { ResolvedTokenLabel } from '../utils/token-segments'\n\n/**\n * Token pills (AGL-586): the colored badges that render `{{...}}` bindings\n * as their CURRENT display names inside editable text surfaces. The\n * serialized value keeps the raw id-based token; the pill is presentation\n * only. Pills are atomic (`contenteditable=\"false\"`) and clickable — the\n * host surface opens {@link TokenPillPopover} to replace or remove one.\n *\n * Styling lives on the CONTAINER (keyed off the data attributes) so React\n * pills and the inline editor's direct-DOM pills look identical.\n */\n\n/** Pill colors by token family — stable theme-palette assignments. */\nconst PILL_GROUP_STYLES: Record<string, { bgcolor: string; color: string }> = {\n  // Slate, not the accent (AGL-1194): a pill is editor chrome rendered\n  // inside the user's own text, so it must not read as content styling.\n  // The other families keep their semantic hues — they encode WHAT the\n  // token is, which is information, not decoration.\n  variable: { bgcolor: 'tertiary.main', color: 'tertiary.contrastText' },\n  function: { bgcolor: 'tertiary.main', color: 'tertiary.contrastText' },\n  entry: { bgcolor: 'info.main', color: 'info.contrastText' },\n  collection: { bgcolor: 'success.main', color: 'success.contrastText' },\n  dataset: { bgcolor: 'grey.700', color: 'common.white' },\n  // A value each page supplies, like a variable is one the site supplies.\n  property: { bgcolor: 'tertiary.main', color: 'tertiary.contrastText' },\n  // A value the site supplies from its own settings (AGL-2881).\n  host: { bgcolor: 'tertiary.main', color: 'tertiary.contrastText' },\n  // Unresolvable referent (deleted variable, unknown grammar): warning.\n  unknown: { bgcolor: 'warning.main', color: 'warning.contrastText' },\n}\n\n/**\n * Container styles for any surface that hosts pills. Spread into the\n * editable element's `sx` — pills themselves carry only data attributes.\n * Built as a plain record and cast once: MUI's sx union chokes (TS2590)\n * on computed spreads inside the literal.\n */\nconst containerStyles: Record<string, unknown> = {\n  [`& [${TOKEN_PILL_ATTR}]`]: {\n    display: 'inline-block',\n    borderRadius: 1,\n    px: 0.75,\n    mx: '1px',\n    fontSize: '0.8em',\n    lineHeight: 1.7,\n    fontWeight: 600,\n    whiteSpace: 'nowrap',\n    verticalAlign: 'baseline',\n    cursor: 'pointer',\n    userSelect: 'none',\n    ...PILL_GROUP_STYLES['unknown'],\n  },\n}\nfor (const [group, style] of Object.entries(PILL_GROUP_STYLES)) {\n  containerStyles[\n    `& [${TOKEN_PILL_ATTR}][${TOKEN_PILL_GROUP_ATTR}=\"${group}\"]`\n  ] = style\n}\nexport const tokenPillContainerSx =\n  containerStyles as SystemStyleObject<Theme>\n\nexport interface TokenPillProps {\n  /** Raw stored token, e.g. `{{var:AbC123}}`. */\n  token: string\n  resolved: ResolvedTokenLabel\n}\n\n/**\n * One atomic pill inside a React-rendered editable surface. Clicks are\n * handled by the surface via delegation on the `data-token` attribute\n * (matching the inline editor's direct-DOM pills), so the pill itself\n * stays a dumb, re-render-safe span.\n */\nexport function TokenPill(props: TokenPillProps) {\n  const { token, resolved } = props\n  const attributes = {\n    [TOKEN_PILL_ATTR]: token,\n    [TOKEN_PILL_GROUP_ATTR]: resolved.known ? resolved.group : 'unknown',\n  }\n  return (\n    <span\n      {...attributes}\n      contentEditable={false}\n      role=\"button\"\n      // The raw token stays inspectable (names shown, ids stored).\n      title={token}\n    >\n      {resolved.label}\n    </span>\n  )\n}\nTokenPill.displayName = 'TokenPill'\n\nexport interface TokenPillPopoverProps {\n  anchorEl: HTMLElement | null\n  /** Raw token of the clicked pill (shown so editors can see the id form). */\n  token: string\n  onClose: () => void\n  /** Opens the insert picker to swap this token in place. */\n  onReplace: () => void\n  /** Deletes this token from the value. */\n  onRemove: () => void\n}\n\n/** The click affordance on a pill: replace it (via the picker) or remove it. */\nexport function TokenPillPopover(props: TokenPillPopoverProps) {\n  const { anchorEl, token, onClose, onReplace, onRemove } = props\n  return (\n    <Popover\n      open={Boolean(anchorEl)}\n      anchorEl={anchorEl}\n      onClose={onClose}\n      anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}\n      // The editable surface keeps its DOM selection while the popover is up.\n      disableRestoreFocus\n    >\n      <Stack\n        direction=\"row\"\n        spacing={1}\n        sx={{ px: 1.5, py: 1, alignItems: 'center', maxWidth: 420 }}\n      >\n        <Typography\n          variant=\"caption\"\n          color=\"text.secondary\"\n          noWrap\n          sx={{ maxWidth: 200, fontFamily: 'monospace' }}\n        >\n          {token}\n        </Typography>\n        <Button size=\"small\" onClick={onReplace}>\n          {'Replace'}\n        </Button>\n        <Button size=\"small\" color=\"error\" onClick={onRemove}>\n          {'Remove'}\n        </Button>\n      </Stack>\n    </Popover>\n  )\n}\nTokenPillPopover.displayName = 'TokenPillPopover'\n\nexport default TokenPill\n"],"names":["Button","Popover","Stack","Typography","TOKEN_PILL_ATTR","TOKEN_PILL_GROUP_ATTR","PILL_GROUP_STYLES","variable","bgcolor","color","function","entry","collection","dataset","property","host","unknown","containerStyles","display","borderRadius","px","mx","fontSize","lineHeight","fontWeight","whiteSpace","verticalAlign","cursor","userSelect","group","style","Object","entries","tokenPillContainerSx","TokenPill","props","token","resolved","attributes","known","span","contentEditable","role","title","label","displayName","TokenPillPopover","anchorEl","onClose","onReplace","onRemove","open","Boolean","anchorOrigin","vertical","horizontal","disableRestoreFocus","direction","spacing","sx","py","alignItems","maxWidth","variant","noWrap","fontFamily","size","onClick"],"mappings":";;AAAA;;;;;;;;;;;;;;;CAeC,GAED,SAASA,MAAM,EAAEC,OAAO,EAAEC,KAAK,EAAEC,UAAU,QAAQ,gBAAe;AAIlE,SACEC,eAAe,EACfC,qBAAqB,QAChB,iCAA6B;AAGpC;;;;;;;;;CASC,GAED,oEAAoE,GACpE,MAAMC,oBAAwE;IAC5E,qEAAqE;IACrE,sEAAsE;IACtE,qEAAqE;IACrE,kDAAkD;IAClDC,UAAU;QAAEC,SAAS;QAAiBC,OAAO;IAAwB;IACrEC,UAAU;QAAEF,SAAS;QAAiBC,OAAO;IAAwB;IACrEE,OAAO;QAAEH,SAAS;QAAaC,OAAO;IAAoB;IAC1DG,YAAY;QAAEJ,SAAS;QAAgBC,OAAO;IAAuB;IACrEI,SAAS;QAAEL,SAAS;QAAYC,OAAO;IAAe;IACtD,wEAAwE;IACxEK,UAAU;QAAEN,SAAS;QAAiBC,OAAO;IAAwB;IACrE,8DAA8D;IAC9DM,MAAM;QAAEP,SAAS;QAAiBC,OAAO;IAAwB;IACjE,sEAAsE;IACtEO,SAAS;QAAER,SAAS;QAAgBC,OAAO;IAAuB;AACpE;AAEA;;;;;CAKC,GACD,MAAMQ,kBAA2C;IAC/C,CAAC,CAAC,GAAG,EAAEb,gBAAgB,CAAC,CAAC,CAAC,EAAE;QAC1Bc,SAAS;QACTC,cAAc;QACdC,IAAI;QACJC,IAAI;QACJC,UAAU;QACVC,YAAY;QACZC,YAAY;QACZC,YAAY;QACZC,eAAe;QACfC,QAAQ;QACRC,YAAY;OACTtB,iBAAiB,CAAC,UAAU;AAEnC;AACA,KAAK,MAAM,CAACuB,OAAOC,MAAM,IAAIC,OAAOC,OAAO,CAAC1B,mBAAoB;IAC9DW,eAAe,CACb,CAAC,GAAG,EAAEb,gBAAgB,EAAE,EAAEC,sBAAsB,EAAE,EAAEwB,MAAM,EAAE,CAAC,CAC9D,GAAGC;AACN;AACA,OAAO,MAAMG,uBACXhB,gBAA2C;AAQ7C;;;;;CAKC,GACD,OAAO,SAASiB,UAAUC,KAAqB;IAC7C,MAAM,EAAEC,KAAK,EAAEC,QAAQ,EAAE,GAAGF;IAC5B,MAAMG,aAAa;QACjB,CAAClC,gBAAgB,EAAEgC;QACnB,CAAC/B,sBAAsB,EAAEgC,SAASE,KAAK,GAAGF,SAASR,KAAK,GAAG;IAC7D;IACA,qBACE,KAACW,qBACKF;QACJG,iBAAiB;QACjBC,MAAK;QACL,6DAA6D;QAC7DC,OAAOP;kBAENC,SAASO,KAAK;;AAGrB;AACAV,UAAUW,WAAW,GAAG;AAaxB,8EAA8E,GAC9E,OAAO,SAASC,iBAAiBX,KAA4B;IAC3D,MAAM,EAAEY,QAAQ,EAAEX,KAAK,EAAEY,OAAO,EAAEC,SAAS,EAAEC,QAAQ,EAAE,GAAGf;IAC1D,qBACE,KAAClC;QACCkD,MAAMC,QAAQL;QACdA,UAAUA;QACVC,SAASA;QACTK,cAAc;YAAEC,UAAU;YAAUC,YAAY;QAAO;QACvD,wEAAwE;QACxEC,mBAAmB;kBAEnB,cAAA,MAACtD;YACCuD,WAAU;YACVC,SAAS;YACTC,IAAI;gBAAEvC,IAAI;gBAAKwC,IAAI;gBAAGC,YAAY;gBAAUC,UAAU;YAAI;;8BAE1D,KAAC3D;oBACC4D,SAAQ;oBACRtD,OAAM;oBACNuD,MAAM;oBACNL,IAAI;wBAAEG,UAAU;wBAAKG,YAAY;oBAAY;8BAE5C7B;;8BAEH,KAACpC;oBAAOkE,MAAK;oBAAQC,SAASlB;8BAC3B;;8BAEH,KAACjD;oBAAOkE,MAAK;oBAAQzD,OAAM;oBAAQ0D,SAASjB;8BACzC;;;;;AAKX;AACAJ,iBAAiBD,WAAW,GAAG;AAE/B,eAAeX,UAAS"}

package/src/lib/components/token-text-field.component.d.ts

@@ -0,0 +1,146 @@
+/**
+ * @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 FormFieldGridProps } from '@aglyn/shared-ui-jsx-forms';
+import { type FocusEvent, type MutableRefObject } from 'react';
+import type { BindingOption } from '../contexts/binding-picker-context';
+import { type TokenLabelContext } from '../utils/token-segments';
+/**
+ * TokenTextField (AGL-586): the attributes-panel editor for token-capable
+ * free-text attributes. A contentEditable surface styled as a MUI
+ * TextField renders the value as plain text plus atomic {@link TokenPill}
+ * badges — users see resolved NAMES while the serialized value (what
+ * react-final-form holds and the node stores) keeps the raw id-based
+ * `{{...}}` grammar. Typing edits text natively; pills are clickable to
+ * replace or remove; the {x} adornment inserts at the caret (AGL-583).
+ *
+ * Model/DOM contract (mirrors the AGL-582 markdown editor): the segment
+ * model is source of truth ONLY at version bumps. Between bumps the
+ * browser owns the DOM — every `input` event silently syncs the model and
+ * emits through `input.onChange`, so the AGL-567 debounced commit treats
+ * pill edits exactly like keystrokes. Structural edits (insert/replace/
+ * remove pill, paste, Enter-newline) re-render from the model and restore
+ * the selection from unit offsets (text char = 1 unit, pill = 1 unit).
+ *
+ * Raw `{{...}}` typed by hand materializes into a pill on BLUR, not per
+ * keystroke: materializing mid-typing would re-render under the caret and
+ * fight the IME/undo stack, while on blur there is no caret to disturb.
+ *
+ * Undo: native browser undo survives for plain typing runs (no re-render
+ * happens between keystrokes), but any pill materialization/insert/remove
+ * re-renders the surface and truncates the native undo stack — the same
+ * trade the markdown editor makes, without its custom history (the canvas
+ * model keeps its own undo at commit granularity, AGL-567).
+ */
+/** Mapper key for the attributes form (editor-internal, never persisted). */
+export declare const TOKEN_TEXT_FIELD_COMPONENT = "aglyn-token-text-field";
+/** Imperative surface ops the field chrome (menus) drives. */
+export interface TokenEditableHandle {
+    /** Current selection in unit offsets, or null when unfocused/outside. */
+    captureSelection(): {
+        start: number;
+        end: number;
+    } | null;
+    /** Splices a token at the captured units (null capture appends). */
+    insertToken(token: string, capture: {
+        start: number;
+        end: number;
+    } | null): void;
+    /** Swaps the nth token segment for a new token, in place. */
+    replaceTokenAt(tokenIndex: number, token: string): void;
+    /** Deletes the nth token segment from the value. */
+    removeTokenAt(tokenIndex: number): void;
+}
+interface TokenEditableInputProps {
+    /** Serialized field value (raw token grammar). */
+    /** Typed loosely on purpose: a schema `initialValue` can be a number. */
+    tokenValue: string | number | null;
+    onTokenValueChange: (next: string) => void;
+    multiline?: boolean;
+    labelContextRef: MutableRefObject<TokenLabelContext>;
+    handleRef: MutableRefObject<TokenEditableHandle | null>;
+    onPillClick: (anchor: HTMLElement, tokenIndex: number, token: string) => void;
+    className?: string;
+    disabled?: boolean;
+    placeholder?: string;
+    onFocus?: (event: FocusEvent<HTMLDivElement>) => void;
+    onBlur?: (event: FocusEvent<HTMLDivElement>) => void;
+    'aria-invalid'?: boolean;
+    'aria-describedby'?: string;
+}
+/**
+ * The contentEditable input rendered INSIDE MUI's InputBase (via
+ * `inputComponent`), so the border, label notch, focus ring and disabled
+ * styling all come from the real TextField machinery.
+ */
+/**
+ * Exported for the AGL-2486 regression test only — a numeric model value must
+ * not spin this into "Maximum update depth exceeded". `TokenTextField` needs a
+ * `<Form>` context (`useFieldApi`), so the loop cannot be reached through it
+ * without standing up react-form-renderer around a bug that lives entirely in
+ * this inner component.
+ */
+export declare const TokenEditableInput: import("react").NamedExoticComponent<TokenEditableInputProps & import("react").RefAttributes<unknown>>;
+export interface TokenTextFieldProps {
+    [key: string]: unknown;
+    placeholder?: string;
+    multiline?: boolean;
+    tokenOptions?: BindingOption[];
+    tokenLabelContext?: TokenLabelContext;
+    FormFieldGridProps?: FormFieldGridProps;
+    /**
+     * Opens the host app's media browser for THIS field (AGL-2236). Supplied
+     * by the attributes panel for media-bearing attributes only, so a field
+     * that cannot hold an asset never grows a control that would write one.
+     */
+    onBrowseMedia?: () => void;
+}
+/**
+ * The "Browse media" end adornment (AGL-2236).
+ *
+ * The control every `src` field's helper text has named since AGL-1215 —
+ * "Pick from your media library with 'Browse media'" — and which, until now,
+ * lived at the BOTTOM of the Attributes panel, below the Save Element
+ * button, separated from the field it fills by every other attribute the
+ * element declares. On the Image element that is six fields and a submit
+ * button of scroll, and with a single media attribute the button read only
+ * "Browse media", naming no field. Authors reported it as missing, which for
+ * a no-code product it effectively was: the documented way to change an
+ * image was to hand-type a `media:org:…/…` reference.
+ *
+ * Mousedown is prevented so the field keeps focus while the dialog opens —
+ * the same reason {@link InsertTokenAdornment} does it. Losing focus here
+ * would flush the AGL-567 debounce and commit a half-typed value on the way
+ * to picking a different one.
+ */
+export declare function BrowseMediaAdornment(props: {
+    onBrowse: () => void;
+}): import("react").JSX.Element;
+export declare namespace BrowseMediaAdornment {
+    var displayName: string;
+}
+/**
+ * The data-driven-forms field (registered as
+ * {@link TOKEN_TEXT_FIELD_COMPONENT} in the attributes mapper). The
+ * serialized string flows through react-final-form exactly like the plain
+ * TextField it replaces — the AGL-567 debounced autosave sees ordinary
+ * value changes and commits through the existing path.
+ */
+export declare const TokenTextField: {
+    (props: TokenTextFieldProps): import("react").JSX.Element;
+    displayName: string;
+};
+export default TokenTextField;