@aglyn/besigner-ui 1.0.0-beta.143

package/src/lib/utils/inline-text-edit.store.d.ts

@@ -0,0 +1,85 @@
+/**
+ * @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 InlineTextEditRect {
+    left: number;
+    top: number;
+    width: number;
+    height: number;
+}
+/**
+ * Prop-override edit target (AGL-1304): the editor is anchored on a grafted
+ * text leaf INSIDE a component instance, and the commit writes the
+ * instance's `propValues[propName]` instead of the node's `children`. The
+ * `node` held by the store stays the INSTANCE — the grafted leaf is not a
+ * canvas node, only the anchor rect came from it.
+ */
+export interface InlinePropEditTarget {
+    /** Declared prop name the edit commits to. */
+    propName: string;
+    /**
+     * The text the leaf currently renders (override unless unset, else the
+     * declared default — `getInstanceEffectivePropText`). Captured at open
+     * because the editor cannot re-derive it without the definition.
+     */
+    initialText: string;
+}
+/**
+ * State for the inline canvas text editor: which node is being edited and
+ * where its element sits in viewport coordinates (the editor renders as a
+ * fixed overlay OUTSIDE the closed canvas shadow root, so screen coordinates
+ * are the only shared frame of reference).
+ *
+ * `anchor` is the element the rect was measured from, kept so the editor can
+ * re-measure rather than drift when the canvas scrolls (AGL-1644). It is the
+ * anchor RATHER than the node's `Besigner.refs` entry because a prop-override
+ * edit measures a grafted preview leaf, which is not a canvas node and has no
+ * ref — the case a ref lookup would have missed silently.
+ *
+ * An `observable.ref`: a DOM node is a foreign object graph, and mobx has no
+ * business walking into it.
+ */
+declare class InlineTextEditStore {
+    node?: Aglyn.NodeSchema<any>;
+    rect?: InlineTextEditRect;
+    anchor?: Element;
+    propTarget?: InlinePropEditTarget;
+    constructor();
+    open(node: Aglyn.NodeSchema<any>, rect: InlineTextEditRect, propTarget?: InlinePropEditTarget, anchor?: Element): void;
+    close(): void;
+}
+export declare const inlineTextEdit: InlineTextEditStore;
+/**
+ * Whether an inline text edit is open ON or INSIDE `element` (AGL-2486).
+ *
+ * The one place the "stand down, someone is typing in here" rule is
+ * expressed. Every canvas leaf registers its own pointer handlers, and those
+ * handlers begin by preventing the default — which is the default the
+ * browser uses to place a caret. Asking only "is this leaf the node being
+ * edited?" is not enough, and worse than not enough: a nested run stands its
+ * own leaf down, the event then BUBBLES to the ancestor leaf, and the
+ * ancestor prevents the default instead. The author sees an editor that is
+ * open, styled and completely uninteractive — no caret, no drag-select, no
+ * double-click-to-select-a-word.
+ *
+ * Containment, not identity, and by DOM rather than by node tree: the anchor
+ * is the element that was measured, which is the one thing that is true for
+ * a grafted instance leaf as well as a canvas node, and `contains` answers
+ * for any nesting depth including the element itself.
+ */
+export declare function isInlineEditWithin(element: Element | null | undefined): boolean;
+export default inlineTextEdit;

package/src/lib/utils/inline-text-edit.store.js

@@ -0,0 +1,78 @@
+/**
+ * @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 { makeAutoObservable, observable } from "mobx";
+/**
+ * State for the inline canvas text editor: which node is being edited and
+ * where its element sits in viewport coordinates (the editor renders as a
+ * fixed overlay OUTSIDE the closed canvas shadow root, so screen coordinates
+ * are the only shared frame of reference).
+ *
+ * `anchor` is the element the rect was measured from, kept so the editor can
+ * re-measure rather than drift when the canvas scrolls (AGL-1644). It is the
+ * anchor RATHER than the node's `Besigner.refs` entry because a prop-override
+ * edit measures a grafted preview leaf, which is not a canvas node and has no
+ * ref — the case a ref lookup would have missed silently.
+ *
+ * An `observable.ref`: a DOM node is a foreign object graph, and mobx has no
+ * business walking into it.
+ */ let InlineTextEditStore = class InlineTextEditStore {
+    open(node, rect, propTarget, anchor) {
+        this.node = node;
+        this.rect = rect;
+        this.propTarget = propTarget;
+        this.anchor = anchor;
+    }
+    close() {
+        this.node = undefined;
+        this.rect = undefined;
+        this.anchor = undefined;
+        this.propTarget = undefined;
+    }
+    constructor(){
+        this.node = undefined;
+        this.rect = undefined;
+        this.anchor = undefined;
+        this.propTarget = undefined;
+        makeAutoObservable(this, {
+            anchor: observable.ref
+        });
+    }
+};
+export const inlineTextEdit = new InlineTextEditStore();
+/**
+ * Whether an inline text edit is open ON or INSIDE `element` (AGL-2486).
+ *
+ * The one place the "stand down, someone is typing in here" rule is
+ * expressed. Every canvas leaf registers its own pointer handlers, and those
+ * handlers begin by preventing the default — which is the default the
+ * browser uses to place a caret. Asking only "is this leaf the node being
+ * edited?" is not enough, and worse than not enough: a nested run stands its
+ * own leaf down, the event then BUBBLES to the ancestor leaf, and the
+ * ancestor prevents the default instead. The author sees an editor that is
+ * open, styled and completely uninteractive — no caret, no drag-select, no
+ * double-click-to-select-a-word.
+ *
+ * Containment, not identity, and by DOM rather than by node tree: the anchor
+ * is the element that was measured, which is the one thing that is true for
+ * a grafted instance leaf as well as a canvas node, and `contains` answers
+ * for any nesting depth including the element itself.
+ */ export function isInlineEditWithin(element) {
+    const anchor = inlineTextEdit.anchor;
+    return Boolean(anchor && element && element.contains(anchor));
+}
+export default inlineTextEdit;
+
+//# sourceMappingURL=inline-text-edit.store.js.map

package/src/lib/utils/inline-text-edit.store.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../libs/besigner/feature/designer/src/lib/utils/inline-text-edit.store.ts"],"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 { makeAutoObservable, observable } from 'mobx'\n\nexport interface InlineTextEditRect {\n  left: number\n  top: number\n  width: number\n  height: number\n}\n\n/**\n * Prop-override edit target (AGL-1304): the editor is anchored on a grafted\n * text leaf INSIDE a component instance, and the commit writes the\n * instance's `propValues[propName]` instead of the node's `children`. The\n * `node` held by the store stays the INSTANCE — the grafted leaf is not a\n * canvas node, only the anchor rect came from it.\n */\nexport interface InlinePropEditTarget {\n  /** Declared prop name the edit commits to. */\n  propName: string\n  /**\n   * The text the leaf currently renders (override unless unset, else the\n   * declared default — `getInstanceEffectivePropText`). Captured at open\n   * because the editor cannot re-derive it without the definition.\n   */\n  initialText: string\n}\n\n/**\n * State for the inline canvas text editor: which node is being edited and\n * where its element sits in viewport coordinates (the editor renders as a\n * fixed overlay OUTSIDE the closed canvas shadow root, so screen coordinates\n * are the only shared frame of reference).\n *\n * `anchor` is the element the rect was measured from, kept so the editor can\n * re-measure rather than drift when the canvas scrolls (AGL-1644). It is the\n * anchor RATHER than the node's `Besigner.refs` entry because a prop-override\n * edit measures a grafted preview leaf, which is not a canvas node and has no\n * ref — the case a ref lookup would have missed silently.\n *\n * An `observable.ref`: a DOM node is a foreign object graph, and mobx has no\n * business walking into it.\n */\nclass InlineTextEditStore {\n  node?: Aglyn.NodeSchema<any> = undefined\n  rect?: InlineTextEditRect = undefined\n  anchor?: Element = undefined\n  propTarget?: InlinePropEditTarget = undefined\n\n  constructor() {\n    makeAutoObservable(this, { anchor: observable.ref })\n  }\n\n  open(\n    node: Aglyn.NodeSchema<any>,\n    rect: InlineTextEditRect,\n    propTarget?: InlinePropEditTarget,\n    anchor?: Element,\n  ) {\n    this.node = node\n    this.rect = rect\n    this.propTarget = propTarget\n    this.anchor = anchor\n  }\n\n  close() {\n    this.node = undefined\n    this.rect = undefined\n    this.anchor = undefined\n    this.propTarget = undefined\n  }\n}\n\nexport const inlineTextEdit = new InlineTextEditStore()\n\n/**\n * Whether an inline text edit is open ON or INSIDE `element` (AGL-2486).\n *\n * The one place the \"stand down, someone is typing in here\" rule is\n * expressed. Every canvas leaf registers its own pointer handlers, and those\n * handlers begin by preventing the default — which is the default the\n * browser uses to place a caret. Asking only \"is this leaf the node being\n * edited?\" is not enough, and worse than not enough: a nested run stands its\n * own leaf down, the event then BUBBLES to the ancestor leaf, and the\n * ancestor prevents the default instead. The author sees an editor that is\n * open, styled and completely uninteractive — no caret, no drag-select, no\n * double-click-to-select-a-word.\n *\n * Containment, not identity, and by DOM rather than by node tree: the anchor\n * is the element that was measured, which is the one thing that is true for\n * a grafted instance leaf as well as a canvas node, and `contains` answers\n * for any nesting depth including the element itself.\n */\nexport function isInlineEditWithin(\n  element: Element | null | undefined,\n): boolean {\n  const anchor = inlineTextEdit.anchor\n  return Boolean(anchor && element && element.contains(anchor))\n}\n\nexport default inlineTextEdit\n"],"names":["makeAutoObservable","observable","InlineTextEditStore","open","node","rect","propTarget","anchor","close","undefined","ref","inlineTextEdit","isInlineEditWithin","element","Boolean","contains"],"mappings":"AAAA;;;;;;;;;;;;;;;CAeC,GAGD,SAASA,kBAAkB,EAAEC,UAAU,QAAQ,OAAM;AA2BrD;;;;;;;;;;;;;;CAcC,GACD,IAAA,AAAMC,sBAAN,MAAMA;IAUJC,KACEC,IAA2B,EAC3BC,IAAwB,EACxBC,UAAiC,EACjCC,MAAgB,EAChB;QACA,IAAI,CAACH,IAAI,GAAGA;QACZ,IAAI,CAACC,IAAI,GAAGA;QACZ,IAAI,CAACC,UAAU,GAAGA;QAClB,IAAI,CAACC,MAAM,GAAGA;IAChB;IAEAC,QAAQ;QACN,IAAI,CAACJ,IAAI,GAAGK;QACZ,IAAI,CAACJ,IAAI,GAAGI;QACZ,IAAI,CAACF,MAAM,GAAGE;QACd,IAAI,CAACH,UAAU,GAAGG;IACpB;IArBA,aAAc;aALdL,OAA+BK;aAC/BJ,OAA4BI;aAC5BF,SAAmBE;aACnBH,aAAoCG;QAGlCT,mBAAmB,IAAI,EAAE;YAAEO,QAAQN,WAAWS,GAAG;QAAC;IACpD;AAoBF;AAEA,OAAO,MAAMC,iBAAiB,IAAIT,sBAAqB;AAEvD;;;;;;;;;;;;;;;;;CAiBC,GACD,OAAO,SAASU,mBACdC,OAAmC;IAEnC,MAAMN,SAASI,eAAeJ,MAAM;IACpC,OAAOO,QAAQP,UAAUM,WAAWA,QAAQE,QAAQ,CAACR;AACvD;AAEA,eAAeI,eAAc"}

package/src/lib/utils/instance-leaf-hit.d.ts

@@ -0,0 +1,39 @@
+/**
+ * @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.
+ */
+/** A grafted preview leaf under the double-clicked point (AGL-1304). */
+export interface InstanceLeafElementHit {
+    /** Grafted node id (`cmp__{instanceId}__{defId}`) parsed off the stamp. */
+    graftedId: string;
+    /** The rendered element, for anchoring the inline editor's overlay. */
+    element: Element;
+}
+/**
+ * Geometric hit-test into an instance's rendered component preview
+ * (AGL-1304): the deepest grafted leaf whose bounding rect contains the
+ * viewport point `(x, y)`, or `null` when the point misses the preview.
+ *
+ * Geometry, not `elementFromPoint`, out of necessity: `NodeLeaf` renders
+ * the preview under `pointer-events: none` so every click selects the
+ * instance, and hit-testing APIs skip such elements entirely — the
+ * double-click's coordinates are all that ever reaches us.
+ *
+ * "Deepest" among overlapping candidates: a descendant beats its ancestors,
+ * and between unrelated overlapping leaves the later one in document order
+ * wins (paint order, near enough for a double-click).
+ */
+export declare function findInstanceLeafAtPoint(container: Element, x: number, y: number): InstanceLeafElementHit | null;
+export default findInstanceLeafAtPoint;

package/src/lib/utils/instance-leaf-hit.js

@@ -0,0 +1,56 @@
+/**
+ * @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.
+ */ /**
+ * The `data-aglyn="leaf:<nodeId>"` stamp the node renderer's `Leaf` puts on
+ * every element it renders — the only identity the INERT instance preview
+ * carries, since its nodes are never in the canvas (AGL-1251).
+ */ const LEAF_STAMP_PREFIX = 'leaf:';
+/**
+ * Geometric hit-test into an instance's rendered component preview
+ * (AGL-1304): the deepest grafted leaf whose bounding rect contains the
+ * viewport point `(x, y)`, or `null` when the point misses the preview.
+ *
+ * Geometry, not `elementFromPoint`, out of necessity: `NodeLeaf` renders
+ * the preview under `pointer-events: none` so every click selects the
+ * instance, and hit-testing APIs skip such elements entirely — the
+ * double-click's coordinates are all that ever reaches us.
+ *
+ * "Deepest" among overlapping candidates: a descendant beats its ancestors,
+ * and between unrelated overlapping leaves the later one in document order
+ * wins (paint order, near enough for a double-click).
+ */ export function findInstanceLeafAtPoint(container, x, y) {
+    var _best_getAttribute;
+    const candidates = container.querySelectorAll(`[data-aglyn-component-preview] [data-aglyn^="${LEAF_STAMP_PREFIX}"]`);
+    let best = null;
+    for (const candidate of Array.from(candidates)){
+        const rect = candidate.getBoundingClientRect();
+        const contains = rect.width > 0 && rect.height > 0 && x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom;
+        if (!contains) continue;
+        // Keep the candidate unless it is an ANCESTOR of the current best —
+        // descendants refine the hit, later unrelated leaves paint on top.
+        if (!best || !candidate.contains(best)) best = candidate;
+    }
+    if (!best) return null;
+    const stamp = (_best_getAttribute = best.getAttribute('data-aglyn')) != null ? _best_getAttribute : '';
+    const graftedId = stamp.slice(LEAF_STAMP_PREFIX.length);
+    return graftedId ? {
+        graftedId,
+        element: best
+    } : null;
+}
+export default findInstanceLeafAtPoint;
+
+//# sourceMappingURL=instance-leaf-hit.js.map

package/src/lib/utils/instance-leaf-hit.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../libs/besigner/feature/designer/src/lib/utils/instance-leaf-hit.ts"],"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\n/**\n * The `data-aglyn=\"leaf:<nodeId>\"` stamp the node renderer's `Leaf` puts on\n * every element it renders — the only identity the INERT instance preview\n * carries, since its nodes are never in the canvas (AGL-1251).\n */\nconst LEAF_STAMP_PREFIX = 'leaf:'\n\n/** A grafted preview leaf under the double-clicked point (AGL-1304). */\nexport interface InstanceLeafElementHit {\n  /** Grafted node id (`cmp__{instanceId}__{defId}`) parsed off the stamp. */\n  graftedId: string\n  /** The rendered element, for anchoring the inline editor's overlay. */\n  element: Element\n}\n\n/**\n * Geometric hit-test into an instance's rendered component preview\n * (AGL-1304): the deepest grafted leaf whose bounding rect contains the\n * viewport point `(x, y)`, or `null` when the point misses the preview.\n *\n * Geometry, not `elementFromPoint`, out of necessity: `NodeLeaf` renders\n * the preview under `pointer-events: none` so every click selects the\n * instance, and hit-testing APIs skip such elements entirely — the\n * double-click's coordinates are all that ever reaches us.\n *\n * \"Deepest\" among overlapping candidates: a descendant beats its ancestors,\n * and between unrelated overlapping leaves the later one in document order\n * wins (paint order, near enough for a double-click).\n */\nexport function findInstanceLeafAtPoint(\n  container: Element,\n  x: number,\n  y: number,\n): InstanceLeafElementHit | null {\n  const candidates = container.querySelectorAll(\n    `[data-aglyn-component-preview] [data-aglyn^=\"${LEAF_STAMP_PREFIX}\"]`,\n  )\n  let best: Element | null = null\n  for (const candidate of Array.from(candidates)) {\n    const rect = candidate.getBoundingClientRect()\n    const contains =\n      rect.width > 0 &&\n      rect.height > 0 &&\n      x >= rect.left &&\n      x <= rect.right &&\n      y >= rect.top &&\n      y <= rect.bottom\n    if (!contains) continue\n    // Keep the candidate unless it is an ANCESTOR of the current best —\n    // descendants refine the hit, later unrelated leaves paint on top.\n    if (!best || !candidate.contains(best)) best = candidate\n  }\n  if (!best) return null\n  const stamp = best.getAttribute('data-aglyn') ?? ''\n  const graftedId = stamp.slice(LEAF_STAMP_PREFIX.length)\n  return graftedId ? { graftedId, element: best } : null\n}\n\nexport default findInstanceLeafAtPoint\n"],"names":["LEAF_STAMP_PREFIX","findInstanceLeafAtPoint","container","x","y","best","candidates","querySelectorAll","candidate","Array","from","rect","getBoundingClientRect","contains","width","height","left","right","top","bottom","stamp","getAttribute","graftedId","slice","length","element"],"mappings":"AAAA;;;;;;;;;;;;;;;CAeC,GAED;;;;CAIC,GACD,MAAMA,oBAAoB;AAU1B;;;;;;;;;;;;;CAaC,GACD,OAAO,SAASC,wBACdC,SAAkB,EAClBC,CAAS,EACTC,CAAS;QAqBKC;IAnBd,MAAMC,aAAaJ,UAAUK,gBAAgB,CAC3C,CAAC,6CAA6C,EAAEP,kBAAkB,EAAE,CAAC;IAEvE,IAAIK,OAAuB;IAC3B,KAAK,MAAMG,aAAaC,MAAMC,IAAI,CAACJ,YAAa;QAC9C,MAAMK,OAAOH,UAAUI,qBAAqB;QAC5C,MAAMC,WACJF,KAAKG,KAAK,GAAG,KACbH,KAAKI,MAAM,GAAG,KACdZ,KAAKQ,KAAKK,IAAI,IACdb,KAAKQ,KAAKM,KAAK,IACfb,KAAKO,KAAKO,GAAG,IACbd,KAAKO,KAAKQ,MAAM;QAClB,IAAI,CAACN,UAAU;QACf,oEAAoE;QACpE,mEAAmE;QACnE,IAAI,CAACR,QAAQ,CAACG,UAAUK,QAAQ,CAACR,OAAOA,OAAOG;IACjD;IACA,IAAI,CAACH,MAAM,OAAO;IAClB,MAAMe,SAAQf,qBAAAA,KAAKgB,YAAY,CAAC,yBAAlBhB,qBAAmC;IACjD,MAAMiB,YAAYF,MAAMG,KAAK,CAACvB,kBAAkBwB,MAAM;IACtD,OAAOF,YAAY;QAAEA;QAAWG,SAASpB;IAAK,IAAI;AACpD;AAEA,eAAeJ,wBAAuB"}

package/src/lib/utils/muted-classes.d.ts

@@ -0,0 +1,76 @@
+/**
+ * @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.
+ */
+/**
+ * Switching a CLASS off while designing (AGL-2486).
+ *
+ * ## What the chip's eye means, and what it does not
+ *
+ * The Classes field's chips could only be removed. Seeing an element without
+ * one of its classes meant deleting the chip and typing the name back, which
+ * is the same destructive round trip the style fields had. The eye stops the
+ * class applying ON THE CANVAS and keeps it on the element.
+ *
+ * It is CANVAS ONLY, exactly like the style mutes it sits beside: the class
+ * list in the document is untouched, so what the chips show is what ships,
+ * and a switched-off class cannot reach a published page as an enabled one
+ * because it was never disabled anywhere a publish can see. The chip's ✕
+ * remains the one control that changes what the element carries.
+ *
+ * ## The one class that is not switched here
+ *
+ * {@link Aglyn.ELEMENT_HIDDEN_CLASS} is what the hierarchy's visibility eye
+ * already keys on (AGL-592), and "stop applying the hidden class on the
+ * canvas" and "show this element while I design it" are the same act. Two
+ * controls carrying one meaning can disagree, so they do not: this module
+ * refuses that class ({@link isClassSwitchable}) and the chip is wired to the
+ * visibility state instead. One switch, reachable from the hierarchy row and
+ * from the chip.
+ */
+/** One muted class on one element. */
+export interface MutedClassTarget {
+    nodeId: string;
+    className: string;
+}
+/**
+ * Whether a class carries its own canvas switch. The hidden class does not —
+ * the element's own visibility toggle owns that decision.
+ */
+export declare function isClassSwitchable(className: string): boolean;
+/** The flag entry for a target. */
+export declare function mutedClassKey(target: MutedClassTarget): string;
+/** The target a flag entry stands for, or null when it is not one of ours. */
+export declare function parseMutedClassKey(key: string): MutedClassTarget | null;
+/** Whether this class is switched off on this element. */
+export declare function isClassMuted(mutedClasses: readonly string[] | undefined, target: MutedClassTarget): boolean;
+/**
+ * The mute list with one class flipped. Returns a new array so the flag's
+ * subscribers see a changed value, and never mutates the input.
+ */
+export declare function toggleMutedClass(mutedClasses: readonly string[] | undefined, target: MutedClassTarget): string[];
+/** The classes switched off on one element. */
+export declare function mutedClassesForNode(mutedClasses: readonly string[] | undefined, nodeId: string | undefined): string[];
+/**
+ * CANVAS ONLY: the node as the canvas should render it, with its
+ * switched-off classes taken out of the class list.
+ *
+ * Applied to the RENDER copy the canvas leaf already builds for resolved
+ * bindings, never to the canvas node itself — selection, the hierarchy and
+ * every save keep reading the element's real class list. Returns the node BY
+ * IDENTITY when it carries no muted class, which is every element until
+ * somebody opens the comparison.
+ */
+export declare function stripMutedClasses<T extends Record<string, any>>(node: T | undefined, nodeId: string | undefined, mutedClasses: readonly string[] | undefined): T | undefined;

package/src/lib/utils/muted-classes.js

@@ -0,0 +1,108 @@
+/**
+ * @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 { ELEMENT_HIDDEN_CLASS } from "@aglyn/aglyn";
+/**
+ * Whether a class carries its own canvas switch. The hidden class does not —
+ * the element's own visibility toggle owns that decision.
+ */ export function isClassSwitchable(className) {
+    return className !== ELEMENT_HIDDEN_CLASS;
+}
+/** The flag entry for a target. */ export function mutedClassKey(target) {
+    return `${target.nodeId}|${target.className}`;
+}
+/** The target a flag entry stands for, or null when it is not one of ours. */ export function parseMutedClassKey(key) {
+    const separator = key.indexOf('|');
+    if (separator <= 0 || separator === key.length - 1) return null;
+    return {
+        nodeId: key.slice(0, separator),
+        className: key.slice(separator + 1)
+    };
+}
+/** Whether this class is switched off on this element. */ export function isClassMuted(mutedClasses, target) {
+    const key = mutedClassKey(target);
+    return !!(mutedClasses == null ? void 0 : mutedClasses.some((entry)=>entry === key));
+}
+/**
+ * The mute list with one class flipped. Returns a new array so the flag's
+ * subscribers see a changed value, and never mutates the input.
+ */ export function toggleMutedClass(mutedClasses, target) {
+    const key = mutedClassKey(target);
+    const current = mutedClasses != null ? mutedClasses : [];
+    return current.some((entry)=>entry === key) ? current.filter((entry)=>entry !== key) : [
+        ...current,
+        key
+    ];
+}
+/** The classes switched off on one element. */ export function mutedClassesForNode(mutedClasses, nodeId) {
+    if (!nodeId || !(mutedClasses == null ? void 0 : mutedClasses.length)) return [];
+    const names = [];
+    for (const entry of mutedClasses){
+        const target = parseMutedClassKey(entry);
+        if (target && target.nodeId === nodeId) names.push(target.className);
+    }
+    return names;
+}
+/** A class list with the switched-off names taken out. */ function withoutClasses(value, removed) {
+    if (typeof value !== 'string') return value;
+    const kept = value.split(/\s+/).filter((name)=>name && !removed.includes(name));
+    return kept.length ? kept.join(' ') : undefined;
+}
+/**
+ * CANVAS ONLY: the node as the canvas should render it, with its
+ * switched-off classes taken out of the class list.
+ *
+ * Applied to the RENDER copy the canvas leaf already builds for resolved
+ * bindings, never to the canvas node itself — selection, the hierarchy and
+ * every save keep reading the element's real class list. Returns the node BY
+ * IDENTITY when it carries no muted class, which is every element until
+ * somebody opens the comparison.
+ */ export function stripMutedClasses(node, nodeId, mutedClasses) {
+    if (!node) return node;
+    const removed = mutedClassesForNode(mutedClasses, nodeId);
+    if (!removed.length) return node;
+    const props = node['props'];
+    const propsClassName = props == null ? void 0 : props['className'];
+    const nextPropsClassName = withoutClasses(propsClassName, removed);
+    const nextClassName = withoutClasses(node['className'], removed);
+    const propsChanged = typeof propsClassName === 'string' && nextPropsClassName !== propsClassName;
+    const nodeChanged = typeof node['className'] === 'string' && nextClassName !== node['className'];
+    if (!propsChanged && !nodeChanged) return node;
+    const next = _extends({}, node);
+    if (propsChanged) {
+        const nextProps = _extends({}, props != null ? props : {});
+        if (nextPropsClassName === undefined) delete nextProps['className'];
+        else nextProps['className'] = nextPropsClassName;
+        next['props'] = nextProps;
+        // `Leaf` prefers `resolvedProps` when a component declares a resolver, so
+        // the copy has to agree with itself or the class comes back through the
+        // other reading.
+        if (node['resolvedProps']) {
+            const resolved = _extends({}, node['resolvedProps']);
+            const nextResolved = withoutClasses(resolved['className'], removed);
+            if (nextResolved === undefined) delete resolved['className'];
+            else resolved['className'] = nextResolved;
+            next['resolvedProps'] = resolved;
+        }
+    }
+    if (nodeChanged) {
+        if (nextClassName === undefined) delete next['className'];
+        else next['className'] = nextClassName;
+    }
+    return next;
+}
+
+//# sourceMappingURL=muted-classes.js.map

package/src/lib/utils/muted-classes.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../libs/besigner/feature/designer/src/lib/utils/muted-classes.ts"],"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 { ELEMENT_HIDDEN_CLASS } from '@aglyn/aglyn'\n\n/**\n * Switching a CLASS off while designing (AGL-2486).\n *\n * ## What the chip's eye means, and what it does not\n *\n * The Classes field's chips could only be removed. Seeing an element without\n * one of its classes meant deleting the chip and typing the name back, which\n * is the same destructive round trip the style fields had. The eye stops the\n * class applying ON THE CANVAS and keeps it on the element.\n *\n * It is CANVAS ONLY, exactly like the style mutes it sits beside: the class\n * list in the document is untouched, so what the chips show is what ships,\n * and a switched-off class cannot reach a published page as an enabled one\n * because it was never disabled anywhere a publish can see. The chip's ✕\n * remains the one control that changes what the element carries.\n *\n * ## The one class that is not switched here\n *\n * {@link Aglyn.ELEMENT_HIDDEN_CLASS} is what the hierarchy's visibility eye\n * already keys on (AGL-592), and \"stop applying the hidden class on the\n * canvas\" and \"show this element while I design it\" are the same act. Two\n * controls carrying one meaning can disagree, so they do not: this module\n * refuses that class ({@link isClassSwitchable}) and the chip is wired to the\n * visibility state instead. One switch, reachable from the hierarchy row and\n * from the chip.\n */\n\n/** One muted class on one element. */\nexport interface MutedClassTarget {\n  nodeId: string\n  className: string\n}\n\n/**\n * Whether a class carries its own canvas switch. The hidden class does not —\n * the element's own visibility toggle owns that decision.\n */\nexport function isClassSwitchable(className: string): boolean {\n  return className !== ELEMENT_HIDDEN_CLASS\n}\n\n/** The flag entry for a target. */\nexport function mutedClassKey(target: MutedClassTarget): string {\n  return `${target.nodeId}|${target.className}`\n}\n\n/** The target a flag entry stands for, or null when it is not one of ours. */\nexport function parseMutedClassKey(key: string): MutedClassTarget | null {\n  const separator = key.indexOf('|')\n  if (separator <= 0 || separator === key.length - 1) return null\n  return {\n    nodeId: key.slice(0, separator),\n    className: key.slice(separator + 1),\n  }\n}\n\n/** Whether this class is switched off on this element. */\nexport function isClassMuted(\n  mutedClasses: readonly string[] | undefined,\n  target: MutedClassTarget,\n): boolean {\n  const key = mutedClassKey(target)\n  return !!mutedClasses?.some((entry) => entry === key)\n}\n\n/**\n * The mute list with one class flipped. Returns a new array so the flag's\n * subscribers see a changed value, and never mutates the input.\n */\nexport function toggleMutedClass(\n  mutedClasses: readonly string[] | undefined,\n  target: MutedClassTarget,\n): string[] {\n  const key = mutedClassKey(target)\n  const current = mutedClasses ?? []\n  return current.some((entry) => entry === key)\n    ? current.filter((entry) => entry !== key)\n    : [...current, key]\n}\n\n/** The classes switched off on one element. */\nexport function mutedClassesForNode(\n  mutedClasses: readonly string[] | undefined,\n  nodeId: string | undefined,\n): string[] {\n  if (!nodeId || !mutedClasses?.length) return []\n  const names: string[] = []\n  for (const entry of mutedClasses) {\n    const target = parseMutedClassKey(entry)\n    if (target && target.nodeId === nodeId) names.push(target.className)\n  }\n  return names\n}\n\n/** A class list with the switched-off names taken out. */\nfunction withoutClasses(\n  value: unknown,\n  removed: readonly string[],\n): string | undefined {\n  if (typeof value !== 'string') return value as undefined\n  const kept = value\n    .split(/\\s+/)\n    .filter((name) => name && !removed.includes(name))\n  return kept.length ? kept.join(' ') : undefined\n}\n\n/**\n * CANVAS ONLY: the node as the canvas should render it, with its\n * switched-off classes taken out of the class list.\n *\n * Applied to the RENDER copy the canvas leaf already builds for resolved\n * bindings, never to the canvas node itself — selection, the hierarchy and\n * every save keep reading the element's real class list. Returns the node BY\n * IDENTITY when it carries no muted class, which is every element until\n * somebody opens the comparison.\n */\nexport function stripMutedClasses<T extends Record<string, any>>(\n  node: T | undefined,\n  nodeId: string | undefined,\n  mutedClasses: readonly string[] | undefined,\n): T | undefined {\n  if (!node) return node\n  const removed = mutedClassesForNode(mutedClasses, nodeId)\n  if (!removed.length) return node\n  const props = node['props'] as Record<string, unknown> | undefined\n  const propsClassName = props?.['className']\n  const nextPropsClassName = withoutClasses(propsClassName, removed)\n  const nextClassName = withoutClasses(node['className'], removed)\n  const propsChanged =\n    typeof propsClassName === 'string' && nextPropsClassName !== propsClassName\n  const nodeChanged =\n    typeof node['className'] === 'string' && nextClassName !== node['className']\n  if (!propsChanged && !nodeChanged) return node\n  const next: Record<string, any> = { ...node }\n  if (propsChanged) {\n    const nextProps = { ...(props ?? {}) }\n    if (nextPropsClassName === undefined) delete nextProps['className']\n    else nextProps['className'] = nextPropsClassName\n    next['props'] = nextProps\n    // `Leaf` prefers `resolvedProps` when a component declares a resolver, so\n    // the copy has to agree with itself or the class comes back through the\n    // other reading.\n    if (node['resolvedProps']) {\n      const resolved = { ...(node['resolvedProps'] as Record<string, unknown>) }\n      const nextResolved = withoutClasses(resolved['className'], removed)\n      if (nextResolved === undefined) delete resolved['className']\n      else resolved['className'] = nextResolved\n      next['resolvedProps'] = resolved\n    }\n  }\n  if (nodeChanged) {\n    if (nextClassName === undefined) delete next['className']\n    else next['className'] = nextClassName\n  }\n  return next as T\n}\n"],"names":["ELEMENT_HIDDEN_CLASS","isClassSwitchable","className","mutedClassKey","target","nodeId","parseMutedClassKey","key","separator","indexOf","length","slice","isClassMuted","mutedClasses","some","entry","toggleMutedClass","current","filter","mutedClassesForNode","names","push","withoutClasses","value","removed","kept","split","name","includes","join","undefined","stripMutedClasses","node","props","propsClassName","nextPropsClassName","nextClassName","propsChanged","nodeChanged","next","nextProps","resolved","nextResolved"],"mappings":"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"}

package/src/lib/utils/muted-styles.d.ts

@@ -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 type { FieldMuteAction } from '@aglyn/shared-ui-jsx-forms';
+import { type SxBreakpoint } from './responsive-sx';
+import { type SxState } from './state-sx';
+/**
+ * Muting one style declaration while designing (AGL-2486).
+ *
+ * ## What this is
+ *
+ * Every field in the Styles panel could set a value and take one off, and
+ * nothing in between. Seeing a layout without its `maxWidth` meant deleting
+ * the value and typing it back afterwards — which loses the very thing being
+ * compared against. This is the browser-devtools checkbox: the declaration
+ * stops applying, its value stays where it is, and one click puts it back.
+ *
+ * ## Canvas only, and the value is never moved
+ *
+ * A mute is held in the `mutedStyles` canvas flag, alongside `heldState`. The
+ * document is not touched at all — the declaration stays in `node.sx` exactly
+ * where the author left it, and the canvas renders a COPY with it removed,
+ * through the same `LeafSxTransformContext` seam the artboard device pin and
+ * the interaction-state hold already use.
+ *
+ * That is what makes the two requirements of a comparison tool hold at once.
+ * The value is not parked somewhere and restored later, so turning a mute back
+ * off cannot fail or lose anything; and nothing disabled can reach a published
+ * page, because there is nothing in the document to reach it — no reserved sx
+ * key for a renderer to recognise, no substitution pass on the tenant's render
+ * path, and nothing for a publish to serialize. The cost is that a mute is a
+ * session's worth of comparison rather than a saved state: reload, and every
+ * declaration is applying again.
+ *
+ * ## Scope
+ *
+ * A mute belongs to the scope the panel was in when it was made — the
+ * interaction state and the breakpoint the chips name. Muting `color` in the
+ * hover slice leaves the default one applying, and a mute made while styling
+ * SM is not in force at "all screen sizes".
+ */
+/** One muted declaration, in the scope it was muted in. */
+export interface MutedStyleTarget {
+    nodeId: string;
+    /** sx property key, in the panel's spelling (`backgroundColor`, not `bgcolor`). */
+    property: string;
+    /** Interaction-state slice, or null for the element's default styles. */
+    state?: SxState | null;
+    /** Breakpoint scope, or null for "all screen sizes". */
+    breakpoint?: SxBreakpoint | null;
+}
+/**
+ * The flag entry for a target. Encoded rather than stored as an object
+ * because the flag is a plain value compared by identity: a string list is
+ * cheap to test membership in and cheap to rewrite immutably.
+ */
+export declare function mutedStyleKey(target: MutedStyleTarget): string;
+/** The target a flag entry stands for, or null when it is not one of ours. */
+export declare function parseMutedStyleKey(key: string): MutedStyleTarget | null;
+/** Whether this declaration is muted in this scope. */
+export declare function isStyleMuted(mutedStyles: readonly string[] | undefined, target: MutedStyleTarget): boolean;
+/**
+ * The mute list with one declaration flipped. Returns a new array so the
+ * flag's subscribers see a changed value, and never mutates the input.
+ */
+export declare function toggleMutedStyle(mutedStyles: readonly string[] | undefined, target: MutedStyleTarget): string[];
+/** Every mute recorded against one element. */
+export declare function mutedStylesForNode(mutedStyles: readonly string[] | undefined, nodeId: string | undefined): MutedStyleTarget[];
+/**
+ * CANVAS ONLY: the element's sx with its muted declarations removed.
+ *
+ * Runs on the fully merged sx at the one point in `Leaf` where it reaches the
+ * element, and BEFORE the interaction-state hoist: a muted base declaration
+ * has to be gone before a hover slice is folded over it, and a muted hover
+ * declaration has to leave its slice so the base shows through.
+ *
+ * Handles the array form of sx for the same reason `hoistStateSx` does — a
+ * component may compose its own sx with the author's. Returns the input BY
+ * IDENTITY when nothing is muted, which is every element in every session
+ * where nobody has opened the comparison.
+ */
+export declare function applyMutedStyles<T>(sx: T, nodeId: string | undefined, mutedStyles: readonly string[] | undefined): T;
+/** What the panel needs to know to offer a row's mute control. */
+export interface StyleMuteScope {
+    nodeId?: string;
+    state?: SxState | null;
+    breakpoint?: SxBreakpoint | null;
+    /**
+     * What the ACTIVE SCOPE declares, keyed by field name — not what the panel
+     * displays. The two differ in a state scope, where a field the author has
+     * not overridden for hover still shows the base value it inherits: there is
+     * no hover declaration to switch off, so that row gets no control.
+     */
+    scopeValues: Record<string, unknown>;
+    mutedStyles?: readonly string[];
+    onToggle: (target: MutedStyleTarget) => void;
+}
+/** The mute control for one field, or nothing when there is none to offer. */
+export declare function buildStyleMute(name: string, label: unknown, scope: StyleMuteScope): FieldMuteAction | undefined;
+/**
+ * A group's field declarations carrying their per-row mute control.
+ *
+ * Supplied through `FormFieldGridProps`, which every editor in the shared
+ * mapper spreads onto its wrapper, so the affordance arrives on every field
+ * without each editor knowing anything about it. Fields with nothing to mute
+ * come back BY IDENTITY, so a panel where nothing is set re-renders exactly
+ * as it did before.
+ */
+export declare function withStyleMuteControls<T extends {
+    name?: string;
+    label?: unknown;
+}>(fields: readonly T[], scope: StyleMuteScope): T[];