@aglyn/besigner-ui 1.0.0-beta.143

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

@@ -0,0 +1,21 @@
+import type * as Aglyn from '@aglyn/aglyn';
+export interface ElementInteractionsFormProps {
+    node: Aglyn.NodeSchema<any>;
+}
+/**
+ * Interactions on the selected element, as its own panel tab.
+ *
+ * They used to sit at the bottom of Attributes, under every field the
+ * component declares — so on anything with more than a handful of attributes
+ * they were below the fold, and an author had no reason to believe the
+ * element had any. An interaction is not an attribute: it is a behaviour, it
+ * is authored in a dialog rather than a field, and it now lives with the
+ * canvas states and styles as a peer.
+ *
+ * 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 default ElementInteractionsForm;

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

@@ -0,0 +1,199 @@
+/**
+ * @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.
+ */ 'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { HelpTip } from "@aglyn/shared-ui-jsx";
+import { Button, FormControl, IconButton, MenuItem as MuiMenuItem, Stack, Switch, TextField, Typography } from "@mui/material";
+import { observer } from "mobx-react-lite";
+import { useContext } from "react";
+import { InteractionsContext, nodeElementSelector } from "../contexts/interactions-context.js";
+import { besignerDocsUrl } from "../utils/docs-help.js";
+/**
+ * Interactions on the selected element, as its own panel tab.
+ *
+ * They used to sit at the bottom of Attributes, under every field the
+ * component declares — so on anything with more than a handful of attributes
+ * they were below the fold, and an author had no reason to believe the
+ * element had any. An interaction is not an attribute: it is a behaviour, it
+ * is authored in a dialog rather than a field, and it now lives with the
+ * canvas states and styles as a peer.
+ *
+ * The list, the trigger picker and the section experiment move verbatim; what
+ * changes is where they are.
+ */ export const ElementInteractionsForm = observer((props)=>{
+    var _interactions_automations, _interactions_sectionExperiments, _nodeExperiment_name, _nodeExperiment_status;
+    const { node } = props;
+    const interactions = useContext(InteractionsContext);
+    const nodeSelector = (node == null ? void 0 : node.$id) ? nodeElementSelector(node.$id) : '';
+    const nodeAutomations = ((_interactions_automations = interactions.automations) != null ? _interactions_automations : []).filter((automation)=>automation.selector === nodeSelector);
+    const nodeExperiment = ((_interactions_sectionExperiments = interactions.sectionExperiments) != null ? _interactions_sectionExperiments : []).find((experiment)=>experiment.nodeId === (node == null ? void 0 : node.$id));
+    if (!interactions.onCreateInteraction || !(node == null ? void 0 : node.$id)) {
+        return /*#__PURE__*/ _jsx(Typography, {
+            variant: "body2",
+            color: "text.secondary",
+            sx: {
+                p: 2
+            },
+            children: 'Interactions are not available on this kind of document.'
+        });
+    }
+    return /*#__PURE__*/ _jsx(Stack, {
+        sx: {
+            p: 2
+        },
+        children: /*#__PURE__*/ _jsxs(FormControl, {
+            margin: "none",
+            fullWidth: true,
+            children: [
+                /*#__PURE__*/ _jsxs(Typography, {
+                    variant: "overline",
+                    color: "text.secondary",
+                    sx: {
+                        mt: 2
+                    },
+                    children: [
+                        'Interactions',
+                        /*#__PURE__*/ _jsx(HelpTip, {
+                            title: "Interactions",
+                            excerpt: "Run an action when this element is clicked, hovered, or scrolled into view. Targets are picked by clicking them on the canvas.",
+                            href: besignerDocsUrl('interactions', '#fluent-interactions'),
+                            sx: {
+                                ml: 0.25,
+                                fontSize: '0.9em'
+                            }
+                        })
+                    ]
+                }),
+                nodeAutomations.map((automation)=>{
+                    var _automation_name;
+                    return /*#__PURE__*/ _jsxs(Stack, {
+                        direction: "row",
+                        spacing: 1,
+                        sx: {
+                            alignItems: 'center',
+                            mb: 0.5
+                        },
+                        children: [
+                            /*#__PURE__*/ _jsx(Typography, {
+                                variant: "body2",
+                                noWrap: true,
+                                sx: {
+                                    flex: 1
+                                },
+                                children: (_automation_name = automation.name) != null ? _automation_name : automation.id
+                            }),
+                            /*#__PURE__*/ _jsx(Typography, {
+                                variant: "caption",
+                                color: "text.secondary",
+                                children: automation.event
+                            }),
+                            interactions.onToggleInteraction ? /*#__PURE__*/ _jsx(Switch, {
+                                size: "small",
+                                checked: automation.enabled !== false,
+                                onChange: (event)=>interactions.onToggleInteraction == null ? void 0 : interactions.onToggleInteraction.call(interactions, {
+                                        id: automation.id,
+                                        enabled: event.target.checked
+                                    }),
+                                slotProps: {
+                                    input: {
+                                        'aria-label': 'Interaction enabled'
+                                    }
+                                }
+                            }) : automation.enabled === false ? /*#__PURE__*/ _jsx(Typography, {
+                                variant: "caption",
+                                color: "text.secondary",
+                                children: 'off'
+                            }) : null,
+                            interactions.onEditInteraction && (node == null ? void 0 : node.$id) ? /*#__PURE__*/ _jsx(IconButton, {
+                                size: "small",
+                                "aria-label": "Edit interaction",
+                                onClick: ()=>interactions.onEditInteraction == null ? void 0 : interactions.onEditInteraction.call(interactions, {
+                                        id: automation.id,
+                                        nodeId: node.$id
+                                    }),
+                                children: '✎'
+                            }) : null,
+                            interactions.onDeleteInteraction ? /*#__PURE__*/ _jsx(IconButton, {
+                                size: "small",
+                                "aria-label": "Remove interaction",
+                                onClick: ()=>interactions.onDeleteInteraction == null ? void 0 : interactions.onDeleteInteraction.call(interactions, {
+                                        id: automation.id
+                                    }),
+                                children: '✕'
+                            }) : null
+                        ]
+                    }, automation.id);
+                }),
+                /*#__PURE__*/ _jsxs(TextField, {
+                    select: true,
+                    size: "small",
+                    label: "Add interaction",
+                    value: "",
+                    onChange: (event)=>{
+                        const trigger = event.target.value;
+                        if (trigger && (node == null ? void 0 : node.$id)) {
+                            interactions.onCreateInteraction == null ? void 0 : interactions.onCreateInteraction.call(interactions, {
+                                nodeId: node.$id,
+                                event: trigger
+                            });
+                        }
+                    },
+                    children: [
+                        /*#__PURE__*/ _jsx(MuiMenuItem, {
+                            value: "elementClick",
+                            children: 'When clicked…'
+                        }),
+                        /*#__PURE__*/ _jsx(MuiMenuItem, {
+                            value: "elementHoverEnter",
+                            children: 'When hovered…'
+                        }),
+                        /*#__PURE__*/ _jsx(MuiMenuItem, {
+                            value: "elementHoverLeave",
+                            children: 'When hover ends…'
+                        }),
+                        /*#__PURE__*/ _jsx(MuiMenuItem, {
+                            value: "elementVisible",
+                            children: 'When scrolled into view…'
+                        })
+                    ]
+                }),
+                interactions.onCreateSectionExperiment ? nodeExperiment ? /*#__PURE__*/ _jsx(Typography, {
+                    variant: "caption",
+                    color: "primary",
+                    sx: {
+                        mt: 1
+                    },
+                    children: `A/B test: ${(_nodeExperiment_name = nodeExperiment.name) != null ? _nodeExperiment_name : nodeExperiment.id}` + ` (${(_nodeExperiment_status = nodeExperiment.status) != null ? _nodeExperiment_status : 'draft'})`
+                }) : /*#__PURE__*/ _jsx(Button, {
+                    color: "primary",
+                    size: "small",
+                    sx: {
+                        mt: 1,
+                        alignSelf: 'flex-start'
+                    },
+                    onClick: ()=>(node == null ? void 0 : node.$id) && (interactions.onCreateSectionExperiment == null ? void 0 : interactions.onCreateSectionExperiment.call(interactions, {
+                            nodeId: node.$id
+                        })),
+                    children: 'A/B test this section'
+                }) : null
+            ]
+        })
+    });
+});
+ElementInteractionsForm.displayName = 'ElementInteractionsForm';
+export default ElementInteractionsForm;
+
+//# sourceMappingURL=element-interactions-form.component.js.map

package/src/lib/components/element-interactions-form.component.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../libs/besigner/feature/designer/src/lib/components/element-interactions-form.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'use client'\n\nimport type * as Aglyn from '@aglyn/aglyn'\nimport { HelpTip } from '@aglyn/shared-ui-jsx'\nimport {\n  Button,\n  FormControl,\n  IconButton,\n  MenuItem as MuiMenuItem,\n  Stack,\n  Switch,\n  TextField,\n  Typography,\n} from '@mui/material'\nimport { observer } from 'mobx-react-lite'\nimport { useContext } from 'react'\nimport {\n  InteractionsContext,\n  nodeElementSelector,\n  type InteractionTriggerEvent,\n} from '../contexts/interactions-context'\nimport { besignerDocsUrl } from '../utils/docs-help'\n\nexport interface ElementInteractionsFormProps {\n  node: Aglyn.NodeSchema<any>\n}\n\n/**\n * Interactions on the selected element, as its own panel tab.\n *\n * They used to sit at the bottom of Attributes, under every field the\n * component declares — so on anything with more than a handful of attributes\n * they were below the fold, and an author had no reason to believe the\n * element had any. An interaction is not an attribute: it is a behaviour, it\n * is authored in a dialog rather than a field, and it now lives with the\n * canvas states and styles as a peer.\n *\n * The list, the trigger picker and the section experiment move verbatim; what\n * changes is where they are.\n */\nexport const ElementInteractionsForm = observer(\n  (props: ElementInteractionsFormProps) => {\n    const { node } = props\n    const interactions = useContext(InteractionsContext)\n    const nodeSelector = node?.$id ? nodeElementSelector(node.$id) : ''\n    const nodeAutomations = (interactions.automations ?? []).filter(\n      (automation) => automation.selector === nodeSelector,\n    )\n    const nodeExperiment = (interactions.sectionExperiments ?? []).find(\n      (experiment) => experiment.nodeId === node?.$id,\n    )\n    if (!interactions.onCreateInteraction || !node?.$id) {\n      return (\n        <Typography variant=\"body2\" color=\"text.secondary\" sx={{ p: 2 }}>\n          {'Interactions are not available on this kind of document.'}\n        </Typography>\n      )\n    }\n    return (\n      <Stack sx={{ p: 2 }}>\n        <FormControl margin=\"none\" fullWidth>\n          {/* Interactions (AGL-258): automations bound to this\n              element's stable data-aglyn selector. */}\n          <Typography\n            variant=\"overline\"\n            color=\"text.secondary\"\n            sx={{ mt: 2 }}\n          >\n            {'Interactions'}\n            {/* AGL-2167 — the trigger list says when, and\n                nothing here says what an interaction can then\n                do, or that the target is picked by clicking. */}\n            <HelpTip\n              title=\"Interactions\"\n              excerpt=\"Run an action when this element is clicked, hovered, or scrolled into view. Targets are picked by clicking them on the canvas.\"\n              href={besignerDocsUrl('interactions', '#fluent-interactions')}\n              sx={{ ml: 0.25, fontSize: '0.9em' }}\n            />\n          </Typography>\n          {nodeAutomations.map((automation) => (\n            <Stack\n              key={automation.id}\n              direction=\"row\"\n              spacing={1}\n              sx={{ alignItems: 'center', mb: 0.5 }}\n            >\n              <Typography variant=\"body2\" noWrap sx={{ flex: 1 }}>\n                {automation.name ?? automation.id}\n              </Typography>\n              <Typography variant=\"caption\" color=\"text.secondary\">\n                {automation.event}\n              </Typography>\n              {/* Manage in place (wave v7): toggle + remove\n                  without leaving the canvas. */}\n              {interactions.onToggleInteraction ? (\n                <Switch\n                  size=\"small\"\n                  checked={automation.enabled !== false}\n                  onChange={(event) =>\n                    interactions.onToggleInteraction?.({\n                      id: automation.id,\n                      enabled: event.target.checked,\n                    })\n                  }\n                  slotProps={{\n                    input: { 'aria-label': 'Interaction enabled' },\n                  }}\n                />\n              ) : automation.enabled === false ? (\n                <Typography\n                  variant=\"caption\"\n                  color=\"text.secondary\"\n                >\n                  {'off'}\n                </Typography>\n              ) : null}\n              {/* Fluent builder (AGL-319): edit reopens the\n                  inline dialog — no Automation detour. */}\n              {interactions.onEditInteraction && node?.$id ? (\n                <IconButton\n                  size=\"small\"\n                  aria-label=\"Edit interaction\"\n                  onClick={() =>\n                    interactions.onEditInteraction?.({\n                      id: automation.id,\n                      nodeId: node.$id as string,\n                    })\n                  }\n                >\n                  {'✎'}\n                </IconButton>\n              ) : null}\n              {interactions.onDeleteInteraction ? (\n                <IconButton\n                  size=\"small\"\n                  aria-label=\"Remove interaction\"\n                  onClick={() =>\n                    interactions.onDeleteInteraction?.({\n                      id: automation.id,\n                    })\n                  }\n                >\n                  {'✕'}\n                </IconButton>\n              ) : null}\n            </Stack>\n          ))}\n          <TextField\n            select\n            size=\"small\"\n            label=\"Add interaction\"\n            value=\"\"\n            onChange={(event) => {\n              const trigger = event.target\n                .value as InteractionTriggerEvent\n              if (trigger && node?.$id) {\n                interactions.onCreateInteraction?.({\n                  nodeId: node.$id,\n                  event: trigger,\n                })\n              }\n            }}\n          >\n            <MuiMenuItem value=\"elementClick\">\n              {'When clicked…'}\n            </MuiMenuItem>\n            {/* Hover choreography (AGL-562). */}\n            <MuiMenuItem value=\"elementHoverEnter\">\n              {'When hovered…'}\n            </MuiMenuItem>\n            <MuiMenuItem value=\"elementHoverLeave\">\n              {'When hover ends…'}\n            </MuiMenuItem>\n            <MuiMenuItem value=\"elementVisible\">\n              {'When scrolled into view…'}\n            </MuiMenuItem>\n          </TextField>\n          {interactions.onCreateSectionExperiment ? (\n            nodeExperiment ? (\n              <Typography\n                variant=\"caption\"\n                color=\"primary\"\n                sx={{ mt: 1 }}\n              >\n                {`A/B test: ${nodeExperiment.name ?? nodeExperiment.id}` +\n                  ` (${nodeExperiment.status ?? 'draft'})`}\n              </Typography>\n            ) : (\n              <Button\n                color=\"primary\"\n                size=\"small\"\n                sx={{ mt: 1, alignSelf: 'flex-start' }}\n                onClick={() =>\n                  node?.$id &&\n                  interactions.onCreateSectionExperiment?.({\n                    nodeId: node.$id,\n                  })\n                }\n              >\n                {'A/B test this section'}\n              </Button>\n            )\n          ) : null}\n        </FormControl>\n      </Stack>\n    )\n  },\n)\nElementInteractionsForm.displayName = 'ElementInteractionsForm'\n\nexport default ElementInteractionsForm\n"],"names":["HelpTip","Button","FormControl","IconButton","MenuItem","MuiMenuItem","Stack","Switch","TextField","Typography","observer","useContext","InteractionsContext","nodeElementSelector","besignerDocsUrl","ElementInteractionsForm","props","interactions","nodeExperiment","node","nodeSelector","$id","nodeAutomations","automations","filter","automation","selector","sectionExperiments","find","experiment","nodeId","onCreateInteraction","variant","color","sx","p","margin","fullWidth","mt","title","excerpt","href","ml","fontSize","map","direction","spacing","alignItems","mb","noWrap","flex","name","id","event","onToggleInteraction","size","checked","enabled","onChange","target","slotProps","input","onEditInteraction","aria-label","onClick","onDeleteInteraction","select","label","value","trigger","onCreateSectionExperiment","status","alignSelf","displayName"],"mappings":"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"}

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

@@ -0,0 +1,75 @@
+/**
+ * @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 ElementPreviewProps {
+    /** The picker item — a preset in both drawers. */
+    node: any;
+    /** Bounded height of the preview box in CSS pixels. */
+    height?: number;
+    /**
+     * Parents this element must sit inside, from the schema. An element that
+     * only renders in context frequently draws nothing on its own, and the
+     * note says which parent it is waiting for.
+     */
+    requiredParents?: string[];
+}
+/**
+ * Renders the preset's own nodes into an isolated stage, so a picker shows
+ * what an element LOOKS like and not only what it is called (AGL-2486).
+ *
+ * Three things this must never do, each of which is a real hazard rather than
+ * a hypothetical one:
+ *
+ * 1. **Touch `Aglyn.canvas`.** That singleton holds the document being
+ *    edited; the console's Preview route calls `setNodes` on it, and doing
+ *    the same here would blow away the user's screen to draw a thumbnail.
+ *    Every preview gets its own `CanvasManager`, backed by the real app so
+ *    component schemas still resolve — the pattern `useLayoutChromeCanvas`
+ *    already uses for locked layout chrome.
+ * 2. **Mutate anything from inside.** The stage is inert: pointer events are
+ *    off, the subtree is marked `inert` so nothing in it is focusable or
+ *    clickable, links are told not to navigate, and `SiteContext.preview`
+ *    turns every write into a synthetic 423.
+ * 3. **Escape its box.** The stage is scaled to fit and clipped, so a Footer
+ *    cannot push Confirm off the dialog or stretch the docked column.
+ *
+ * Elements that cannot render standalone — a Cart, a Product grid, anything
+ * reading site data — are NOT special-cased here. Deliberately: they already
+ * render their own dashed "Cart — lines render here" placeholder when there
+ * is no `hostId`, and this preview does not supply one. That placeholder is
+ * the honest answer to "what will I get", and it means the picker needs no
+ * 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;
+};
+/**
+ * Whether the rendered preview drew anything a person can actually see.
+ *
+ * Text, or a media element. A preset with no child nodes composes a real but
+ * EMPTY element — `Toolbar Content` is a 64px transparent flex row — which
+ * renders correctly and looks identical to the bug where nothing rendered at
+ * all. Since one of those has already shipped here, the frame says which it
+ * is rather than leaving a blank box to be read as broken.
+ *
+ * Deliberately conservative and slightly imprecise: a lone Divider draws a
+ * 1px rule and is reported as nothing to show. At preview scale that is very
+ * nearly true, and the alternative — probing computed backgrounds and
+ * borders — guesses far more than it settles.
+ */
+export declare function subtreeHasInk(host: HTMLElement | null): boolean;
+export default ElementPreview;