@agent-native/core 0.90.4 → 0.90.7

package/corpus/templates/design/app/components/design/bridge/hit-test.bridge.ts

@@ -11,14 +11,44 @@
  *
  * Reply (iframe → window.parent):
  *   { type: 'agent-native:hit-test-result', correlationId: string,
- *     anchorNodeId: string, placement: 'before'|'after'|'inside',
- *     axis: 'x'|'y',
+ *     anchorNodeId: string, pendingNodeId: string | undefined,
+ *     anchorSelector: string | undefined,
+ *     placement: 'before'|'after'|'inside', axis: 'x'|'y',
  *     anchorRect: { left: number, top: number, width: number, height: number } }
  *
- * Reads DOM only — no mutations, no event interception. The container-drop and
- * placement logic is intentionally kept in sync with the corresponding helpers
- * inside editor-chrome.bridge.ts (search for "// keep in sync with
- * hit-test.bridge.ts" comments there).
+ * `anchorSelector` accompanies `pendingNodeId`: a body-rooted structural
+ * `tag:nth-of-type(n) > …` path whose nth indexes are SOURCE-EQUIVALENT —
+ * computed against the live DOM but skipping Alpine-generated siblings
+ * (x-for clones and x-if instantiations, identified via the sibling
+ * templates' own `_x_lookup` / `_x_currentIfEl` bookkeeping) and
+ * editor-injected overlay elements, so the path resolves to the SAME element
+ * in the persisted source HTML (where none of those runtime nodes exist).
+ * The host uses it to persist `pendingNodeId` as the anchor's real
+ * `data-agent-native-node-id` in the stored document (two-step handshake,
+ * mirroring editor-chrome's getElementInfo selection contract) before
+ * resolving the drop against it. Omitted when the anchor itself is an
+ * Alpine-generated instance (no per-instance source node exists — the host
+ * keeps its absolute-placement fallback for that case).
+ *
+ * Reads DOM only, no event interception — with one narrow, intentional
+ * exception mirroring editor-chrome.bridge.ts's getElementInfo: when the
+ * resolved anchor has no stable id anywhere in its own ancestry (common on
+ * AI-generated screens, which frequently ship with zero
+ * data-agent-native-node-id attributes), getNodeId mints and stamps a
+ * `data-an-pending-node-id` marker on it and returns that id as
+ * `pendingNodeId` alongside an empty `anchorNodeId` — the same
+ * mint-then-let-the-host-persist contract getElementInfo already uses for
+ * in-screen selection (see the "Id-on-demand" comment there). Without this,
+ * every cross-screen/canvas-to-screen flow-insert into an id-less screen
+ * silently degrades to absolute placement, because the host has no anchor id
+ * to resolve against even when the hit-test correctly found a valid
+ * before/after/inside slot. The stamp itself is inert (an extra data-*
+ * attribute, not read by getNodeId's own stable-id list) until a host caller
+ * persists it into the document's real data-agent-native-node-id — same
+ * two-step handshake as the in-screen path. The container-drop and placement
+ * logic is intentionally kept in sync with the corresponding helpers inside
+ * editor-chrome.bridge.ts (search for "// keep in sync with hit-test.bridge.ts"
+ * comments there).
  *
  * Rules:
  *   • No import/require of any module (DOM globals only).
@@ -98,6 +128,8 @@
     "label",
     "li",
   ];
+  // keep in sync with editor-chrome.bridge.ts BRIDGE_INTERACTIVE_LEAF_TAGS
+  var BRIDGE_INTERACTIVE_LEAF_TAGS = ["button", "summary"];
 
   function isOverlayElement(el: Element | null): boolean {
     return Boolean(
@@ -117,6 +149,25 @@
     return false;
   }
 
+  // keep in sync with editor-chrome.bridge.ts hasOnlyLeafContent
+  function hasOnlyLeafContent(el: Element): boolean {
+    var children = el.children;
+    if (!children.length) return true;
+    for (var i = 0; i < children.length; i += 1) {
+      var child = children[i] as Element;
+      var childTag = (child.tagName || "").toLowerCase();
+      if (
+        BRIDGE_LEAF_TAGS.indexOf(childTag) === -1 &&
+        BRIDGE_TEXT_TAGS.indexOf(childTag) === -1 &&
+        BRIDGE_INTERACTIVE_LEAF_TAGS.indexOf(childTag) === -1
+      ) {
+        return false;
+      }
+      if (child.children.length && !hasOnlyLeafContent(child)) return false;
+    }
+    return true;
+  }
+
   // keep in sync with editor-chrome.bridge.ts isContainerDropTarget
   function isContainerDropTarget(el: Element | null): boolean {
     if (!el || el === document.documentElement) return false;
@@ -128,6 +179,12 @@
       BRIDGE_TEXT_TAGS.indexOf(tag) !== -1
     )
       return false;
+    if (
+      BRIDGE_INTERACTIVE_LEAF_TAGS.indexOf(tag) !== -1 &&
+      hasOnlyLeafContent(el)
+    ) {
+      return false;
+    }
     var cs = window.getComputedStyle(el);
     if (
       cs.display === "flex" ||
@@ -252,6 +309,69 @@
     return null;
   }
 
+  function getNodeId(el: Element | null): string {
+    if (!el) return "";
+    return (
+      el.getAttribute("data-agent-native-node-id") ||
+      el.getAttribute("data-code-layer-id") ||
+      el.getAttribute("data-layer-id") ||
+      el.getAttribute("data-builder-id") ||
+      el.id ||
+      ""
+    );
+  }
+
+  // Detects an Alpine `<template x-for>` runtime clone: Alpine keeps the
+  // `<template>` element itself in the live DOM (as a hidden, zero-size
+  // marker) and inserts every rendered instance as a DIRECT SIBLING of that
+  // template, all still children of the same parent — so `ul > template,
+  // li, li, li` is the live shape for `<ul><template x-for>...</template>
+  // rendering 3 items</ul>`. The static SOURCE HTML the host resolves moves
+  // against only ever contains the single template child, never the N
+  // runtime clones, so a hit-test anchor resolved onto a clone — or onto a
+  // container whose only children are clones, if the caller doesn't skip
+  // them — can never resolve on the host and always comes back
+  // `applied:false`. Detected once per hit-test via an ancestor walk (not
+  // just the immediate parent) so nested x-for clones (e.g. a subtask `<li>`
+  // inside a per-task `<ul>` that is itself x-for'd) are also caught,
+  // stopping at the first stable-id ancestor (anything inside a stamped
+  // subtree has a real anchor and is fine).
+  //
+  // keep in sync with editor-chrome.bridge.ts isTemplateCloneElement
+  function isTemplateCloneElement(el: Element | null): boolean {
+    var node: Element | null = el;
+    while (node && node !== document.documentElement) {
+      if (getNodeId(node)) return false;
+      var parent = node.parentElement;
+      if (!parent) return false;
+      var siblings = parent.children;
+      for (var i = 0; i < siblings.length; i += 1) {
+        var sib = siblings[i];
+        if (
+          sib !== node &&
+          sib.tagName &&
+          sib.tagName.toLowerCase() === "template" &&
+          sib.hasAttribute("x-for")
+        ) {
+          return true;
+        }
+      }
+      node = parent;
+    }
+    return false;
+  }
+
+  // Anchor-candidate gate (companion to isTemplateCloneElement above): a
+  // template clone can never be used as an insertion ANCHOR — it has no
+  // counterpart in the static source HTML, so before/after placement
+  // against it can never resolve on the host. Filtering clones out of the
+  // candidate list here is what fixes drops into a container whose ONLY
+  // children are x-for clones: without this, nearestChildInsertionTarget's
+  // "nearest child" search would happily pick a clone as the anchor, and
+  // the resulting move would silently fail on the host (layerMoveFailed
+  // toast) even though the drop gesture itself was completely valid.
+  //
+  // keep in sync with editor-chrome.bridge.ts draggableElementChildren
   function draggableElementChildren(parent: Element): Element[] {
     return Array.prototype.slice.call(parent.children).filter(function (
       child: Element,
@@ -259,23 +379,204 @@
       return (
         child.nodeType === 1 &&
         !isOverlayElement(child) &&
-        !isLayerInteractionBlocked(child)
+        !isLayerInteractionBlocked(child) &&
+        !isTemplateCloneElement(child)
       );
     });
   }
 
-  function getNodeId(el: Element | null): string {
-    if (!el) return "";
-    return (
-      el.getAttribute("data-agent-native-node-id") ||
-      el.getAttribute("data-code-layer-id") ||
-      el.getAttribute("data-layer-id") ||
-      el.getAttribute("data-builder-id") ||
-      el.id ||
-      ""
+  // keep in sync with editor-chrome.bridge.ts freshRuntimeNodeId
+  function freshRuntimeNodeId(prefix: string): string {
+    var random = "";
+    try {
+      if (window.crypto && window.crypto.getRandomValues) {
+        var bytes = new Uint32Array(2);
+        window.crypto.getRandomValues(bytes);
+        random = Array.prototype.map
+          .call(bytes, function (part: number) {
+            return part.toString(36);
+          })
+          .join("");
+      }
+    } catch (_err) {}
+    if (!random)
+      random = Date.now().toString(36) + Math.random().toString(36).slice(2, 8);
+    return "an-" + String(prefix || "pending") + "-" + random;
+  }
+
+  // Id-on-demand fallback (see the file header comment): when the resolved
+  // anchor has no stable id, mint one and stamp it as
+  // data-an-pending-node-id — same marker/contract as editor-chrome.bridge.ts's
+  // getElementInfo — and return it so the caller can expose it as
+  // `pendingNodeId` for a host caller to persist. Deliberately NOT read by
+  // getNodeId itself (a pending id is not a stable id until persisted).
+  function getOrMintPendingNodeId(el: Element | null): string {
+    if (!el || !el.getAttribute || !el.setAttribute) return "";
+    // Defensive guard: resolveHitTarget's anchor-candidate gates (see
+    // isTemplateCloneElement call sites there) already keep template clones
+    // out of `result.anchor`, so this should never fire in practice — but a
+    // pending id stamped on a clone would be dead weight: the clone itself
+    // has no counterpart in source HTML, so no host persist call could ever
+    // write data-agent-native-node-id anywhere durable for it, and Alpine
+    // re-renders the clone from scratch on next data change anyway (the
+    // stamped attribute would vanish). Fail closed instead of minting.
+    if (isTemplateCloneElement(el)) return "";
+    var existing = el.getAttribute("data-an-pending-node-id");
+    if (existing) return existing;
+    var minted = freshRuntimeNodeId("pending");
+    try {
+      el.setAttribute("data-an-pending-node-id", minted);
+    } catch (_err) {}
+    return minted;
+  }
+
+  // ── Source-equivalent structural selector (anchorSelector) ────────────────
+  //
+  // The persisted source HTML never contains Alpine-generated runtime nodes
+  // (x-for clones, x-if instantiations) or editor-injected overlays, so a
+  // naive live-DOM nth-of-type path would mis-resolve on the host whenever
+  // any of those precede the anchor among same-tag siblings. These helpers
+  // compute nth indexes that count only source-present siblings, so the
+  // emitted path resolves to the SAME element in the host's DOMParser/
+  // projection view of the stored document.
+
+  // Elements generated by an Alpine template sibling: x-for clones are the
+  // values of the template's `_x_lookup` map; the x-if instantiation is the
+  // template's `_x_currentIfEl`. Both live as DIRECT SIBLINGS of their
+  // template in the live DOM while the source only contains the template.
+  //
+  // COUPLING WARNING: `_x_lookup` / `_x_currentIfEl` are Alpine.js PRIVATE
+  // internals (verified against the Alpine 3.x line served by the prototype
+  // CDN pin). If a future Alpine major renames them, the try/catch below
+  // swallows the breakage silently and generated clones would be counted as
+  // source siblings — buildSourceEquivalentSelector could then resolve a
+  // pending node id onto the WRONG source element. When bumping Alpine,
+  // re-verify these fields and the clone-vs-source guard tests in
+  // bridge.guard.spec.ts.
+  function alpineGeneratedChildrenOf(parent: Element): Element[] {
+    var generated: Element[] = [];
+    var children = parent.children;
+    for (var i = 0; i < children.length; i += 1) {
+      var child = children[i] as Element & {
+        _x_lookup?: Record<string, Element>;
+        _x_currentIfEl?: Element;
+      };
+      if (!child.tagName || child.tagName.toLowerCase() !== "template") {
+        continue;
+      }
+      try {
+        if (child._x_currentIfEl) generated.push(child._x_currentIfEl);
+        var lookup = child._x_lookup;
+        if (lookup) {
+          for (var key in lookup) {
+            if (Object.prototype.hasOwnProperty.call(lookup, key)) {
+              var item = lookup[key];
+              if (item) generated.push(item);
+            }
+          }
+        }
+      } catch (_err) {}
+    }
+    return generated;
+  }
+
+  function isEditorInjectedElement(el: Element): boolean {
+    return !!(
+      el.getAttribute &&
+      (el.getAttribute("data-agent-native-edit-overlay") !== null ||
+        el.getAttribute("data-agent-native-hit-test-preview") !== null)
     );
   }
 
+  // Body-rooted `tag:nth-of-type(n) > …` path with source-equivalent nth
+  // indexes, or "" when the anchor (or any ancestor on the way up) is itself
+  // an Alpine-generated instance — such elements have no per-instance source
+  // node, so no selector can honestly identify them in the stored document.
+  function buildSourceEquivalentSelector(el: Element | null): string {
+    if (!el || el === document.documentElement || el === document.body) {
+      return "";
+    }
+    var parts: string[] = [];
+    var node: Element | null = el;
+    while (node && node !== document.body) {
+      var parent: Element | null = node.parentElement;
+      if (!parent) return "";
+      var generated = alpineGeneratedChildrenOf(parent);
+      if (generated.indexOf(node) !== -1) return "";
+      if (isEditorInjectedElement(node)) return "";
+      var tag = node.tagName ? node.tagName.toLowerCase() : "";
+      if (!tag || tag === "template") return "";
+      var nth = 0;
+      var siblings = parent.children;
+      for (var i = 0; i < siblings.length; i += 1) {
+        var sib = siblings[i];
+        if (!sib.tagName || sib.tagName.toLowerCase() !== tag) continue;
+        if (generated.indexOf(sib) !== -1) continue;
+        if (isEditorInjectedElement(sib)) continue;
+        nth += 1;
+        if (sib === node) break;
+      }
+      if (nth === 0) return "";
+      parts.unshift(tag + ":nth-of-type(" + nth + ")");
+      node = parent;
+    }
+    if (!node) return "";
+    parts.unshift("body");
+    return parts.join(" > ");
+  }
+
+  // Resolves a between-children insertion inside `container` from the
+  // pointer position: the nearest visible child (by flow-axis center)
+  // becomes the anchor with before/after placement, which renders as the
+  // Figma-style insertion LINE between children. Returns null when the
+  // container has no eligible children (caller falls back to "inside").
+  //
+  // This is the finding-6 fix, ported from editor-chrome.bridge.ts's own
+  // B5-4 fix (nearestChildInsertionTarget there): hovering the container's
+  // own background — its padding, or the gaps BETWEEN children, which is
+  // where the pointer naturally sits when dropping "between two cards" —
+  // used to resolve to placement "inside" (append at end) instead of
+  // inserting at the hovered slot. hit-test.bridge.ts never has a dragged
+  // element of its own (it only resolves anchors for a cross-screen/
+  // canvas-to-screen drag whose source lives in a different iframe), so
+  // this version omits the editor-chrome original's `excludeEls` parameter.
+  //
+  // keep in sync with editor-chrome.bridge.ts nearestChildInsertionTarget
+  function nearestChildInsertionTarget(
+    container: Element,
+    clientX: number,
+    clientY: number,
+  ) {
+    var children = draggableElementChildren(container);
+    if (!children.length) return null;
+    var axis = parentFlowAxis(container);
+    var best: Element | null = null;
+    var bestDistance = Infinity;
+    var placement = "after";
+    for (var j = 0; j < children.length; j += 1) {
+      var rect = children[j].getBoundingClientRect();
+      // Skip zero-size children (e.g. Alpine <template> nodes, hidden
+      // elements) — they are not visible slots.
+      if (rect.width <= 0 || rect.height <= 0) continue;
+      var center =
+        axis === "x" ? rect.left + rect.width / 2 : rect.top + rect.height / 2;
+      var pointer = axis === "x" ? clientX : clientY;
+      var distance = Math.abs(pointer - center);
+      if (distance < bestDistance) {
+        bestDistance = distance;
+        best = children[j];
+        placement = pointer < center ? "before" : "after";
+      }
+    }
+    if (!best) return null;
+    return {
+      anchor: best,
+      placement: placement,
+      axis: axis,
+      dropMode: "flow-insert",
+    };
+  }
+
   /**
    * Resolve the deepest container element under (x, y) and a placement hint,
    * mirroring reorderTargetForPoint from editor-chrome.bridge.ts but
@@ -300,6 +601,29 @@
       if (isLayerInteractionBlocked(cursor)) return null;
       var parent: Element | null = cursor.parentElement;
       if (parent && isAutoLayoutElement(parent)) {
+        // Anchor-candidate gate: cursor is a plain flex/grid item being used
+        // as a before/after anchor — but if it's a template clone (no
+        // counterpart in source HTML), fall back to the nearest non-clone
+        // sibling via nearestChildInsertionTarget, else the container itself
+        // with "inside" placement. Mirrors editor-chrome.bridge.ts's
+        // reorderTargetForPoint / autoLayoutInsertionTargetForPoint clone
+        // fallback — this is the primary path a cursor hits when hovering
+        // directly over a rendered x-for clone item inside a flex/grid
+        // container (e.g. a filter card whose only children are clones).
+        if (isTemplateCloneElement(cursor)) {
+          var cloneFallback = nearestChildInsertionTarget(
+            parent,
+            clientX,
+            clientY,
+          );
+          if (cloneFallback) return cloneFallback;
+          return {
+            anchor: parent,
+            placement: "inside",
+            axis: parentFlowAxis(parent),
+            dropMode: "flow-insert",
+          };
+        }
         var parentAxis = parentFlowAxis(parent);
         var childRect = cursor.getBoundingClientRect();
         var childCenter =
@@ -331,6 +655,17 @@
             dropMode: "flow-insert",
           };
         }
+        // finding 6: the pointer is over the container's inner area — its
+        // padding or the gap BETWEEN children (a direct child under the
+        // pointer would have been the hit instead). Resolve to the nearest
+        // child slot so the drop lands between children with the insertion
+        // LINE, instead of placement:"inside" append-after-last.
+        var betweenChildren = nearestChildInsertionTarget(
+          cursor,
+          clientX,
+          clientY,
+        );
+        if (betweenChildren) return betweenChildren;
         return {
           anchor: cursor,
           placement: "inside",
@@ -408,6 +743,21 @@
     var result = resolveHitTarget(x, y);
     if (e.data.preview) showInsertionGuideFor(result);
     var anchorNodeId: string = result ? getNodeId(result.anchor) : "";
+    // Id-on-demand fallback (see file header): only mint when there is a
+    // real resolved anchor with no stable id — never for a null/no-target
+    // result. getOrMintPendingNodeId is idempotent per-element (reuses the
+    // existing data-an-pending-node-id if already stamped), so repeated
+    // hover-phase hit-tests over the same anchor do not re-mint or spam
+    // attribute writes; a HOST caller decides whether/when to persist it.
+    var pendingNodeId: string =
+      result && !anchorNodeId ? getOrMintPendingNodeId(result.anchor) : "";
+    // Only computed alongside a minted pendingNodeId — it exists so a host
+    // can persist that pending id into the stored document (see the file
+    // header's anchorSelector contract). "" (omitted) when the anchor is an
+    // Alpine-generated instance with no source node.
+    var anchorSelector: string = pendingNodeId
+      ? buildSourceEquivalentSelector(result ? result.anchor : null)
+      : "";
     var placement: string = result ? result.placement : "inside";
     var axis: string = result ? result.axis : "y";
     var dropMode: string = result ? result.dropMode : "flow-insert";
@@ -418,6 +768,8 @@
           type: "agent-native:hit-test-result",
           correlationId: correlationId,
           anchorNodeId: anchorNodeId,
+          pendingNodeId: pendingNodeId || undefined,
+          anchorSelector: anchorSelector || undefined,
           placement: placement,
           axis: axis,
           dropMode: dropMode,

package/corpus/templates/design/app/components/design/edit-panel/fill-gradient-helpers.ts

@@ -342,3 +342,27 @@ export function defaultGradientLayer(
 ) {
   return buildGradientLayer(type, defaultGradientStops(colorValue));
 }
+
+/**
+ * Atomic patch for switching a solid fill to a gradient paint type: prepends
+ * a default gradient layer built from the current solid color AND clears the
+ * solid backgroundColor underneath it.
+ */
+export function solidToGradientPatch(
+  colorValue: string,
+  backgroundLayers: string[],
+  type: DesignGradientType,
+): { backgroundImage: string; backgroundColor: string } {
+  return {
+    backgroundImage: joinCssLayers([
+      defaultGradientLayer(type, cssColorOrFallback(colorValue, "#000000")),
+      ...backgroundLayers,
+    ]),
+    // Convert the solid fill into the gradient instead of stacking the
+    // gradient on top of it — leaving backgroundColor set kept a second
+    // real fill alive (the default gradient fades to alpha-0, so the old
+    // solid showed through) and the Fill panel correctly-but-confusingly
+    // listed two rows for what the user meant as one type switch.
+    backgroundColor: "transparent",
+  };
+}

package/corpus/templates/design/app/components/design/edit-panel/panel-primitives.tsx

@@ -37,6 +37,7 @@ import {
   joinCssLayers,
   parseGradientLayer,
   SOLID_FILL_ID,
+  solidToGradientPatch,
   splitCssLayers,
 } from "./fill-gradient-helpers";
 import { colorHasVisibleAlpha, cssColorOrFallback } from "./position-helpers";
@@ -478,9 +479,23 @@ export function ColorInput({
   const handlePaintTypeChange = (type: DesignPaintType) => {
     const selectedLayer = fillLayerIndex(selectedFillId);
     if (type === "solid") {
+      // Prefer the removed gradient's first stop color. Switching solid ->
+      // gradient converts the fill (backgroundColor becomes "transparent",
+      // see solidToGradientPatch below), so on the way back draft/value
+      // would be "transparent" and cssColorOrFallback would land on black;
+      // the first stop still holds the color the gradient was built from.
+      const removedGradient =
+        selectedLayer !== null
+          ? parseGradientLayer(backgroundLayers[selectedLayer] || "")
+          : null;
       if (selectedLayer !== null) removeBackgroundLayer(selectedLayer);
       setSelectedFillId(SOLID_FILL_ID);
-      setNext(cssColorOrFallback(draft || value, "#000000"));
+      setNext(
+        cssColorOrFallback(
+          removedGradient?.stops[0]?.color || draft || value,
+          "#000000",
+        ),
+      );
       return;
     }
     if (type === "none") {
@@ -515,12 +530,18 @@ export function ColorInput({
       return;
     }
 
-    onBackgroundImageChange(
-      joinCssLayers([
-        defaultGradientLayer(nextType, draft || value || "#000000"),
-        ...backgroundLayers,
-      ]),
+    const patch = solidToGradientPatch(
+      draft || value || "#000000",
+      backgroundLayers,
+      nextType,
     );
+    onBackgroundImageChange(patch.backgroundImage);
+    // Clear the solid base fill in the same switch — this is a convert
+    // (the mirror of the gradient -> solid branch above), not a stack.
+    // Leaving backgroundColor set kept a second real fill alive under the
+    // alpha-0 tail of the default gradient, so the panel listed a phantom
+    // extra row for what the user meant as one paint-type change.
+    setNext(patch.backgroundColor);
     setSelectedFillId(fillLayerId(0));
     setSelectedStopId("stop-0");
   };

package/corpus/templates/design/app/components/design/edit-panel/position-helpers.ts

@@ -73,6 +73,24 @@ export function resolveTextStrokeColor(
   return cssColorOrFallback(strokeColor, "#000000");
 }
 
+/**
+ * The style patch the Stroke section's "Add layer" button commits for text
+ * elements: seed a 1px glyph outline in the resolved stroke color.
+ *
+ * Keys MUST stay kebab-case: camelCase webkit props (webkitTextStrokeWidth)
+ * get mangled by code-layer.ts normalizeStyleProperty — its camel→kebab pass
+ * yields `webkit-text-stroke-width` WITHOUT the required leading dash, which
+ * fails the style allow-list and silently persists nothing.
+ */
+export function textStrokeAddPatch(
+  strokeColor: string | undefined,
+): Record<string, string> {
+  return {
+    "-webkit-text-stroke-width": "1px",
+    "-webkit-text-stroke-color": resolveTextStrokeColor(strokeColor),
+  };
+}
+
 /**
  * R94 fix — reads a text stroke's width/color out of `element.computedStyles`
  * regardless of which of two shapes that map is in:

package/corpus/templates/design/app/components/design/edit-panel/stroke-properties.tsx

@@ -37,6 +37,7 @@ import {
   roundToOneDecimal,
   strokeHiddenByColor,
   strokeIsVisible,
+  textStrokeAddPatch,
   textStrokeIsVisible,
 } from "./position-helpers";
 import { isMixedValue } from "./selection-helpers";
@@ -533,11 +534,11 @@ function TextStrokeProperties({
         <SectionIconButton
           label={t("editPanel.labels.addLayer")}
           onClick={() => {
+            // Kebab-case keys required: camelCase webkit props get mangled by
+            // normalizeStyleProperty (camel→kebab drops the leading dash) and
+            // silently fail the persist allow-list — see textStrokeAddPatch.
             commitStylePatch(
-              {
-                webkitTextStrokeWidth: "1px",
-                webkitTextStrokeColor: resolveTextStrokeColor(color),
-              },
+              textStrokeAddPatch(color),
               onStyleChange,
               onStylesChange,
             );