@agent-native/core 0.92.10 → 0.92.11

package/corpus/templates/design/app/components/design/edit-panel/element-classification.ts

@@ -152,6 +152,27 @@ const LEAF_TAGS = new Set([
   "iframe",
 ]);
 
+/**
+ * Explicit, unambiguous signals that an element IS a text object: a real
+ * text tag, an authoritative `primitiveKind === "text"` marker, or a
+ * `draft-text-*` tool-drawn id. Deliberately excludes `isTextElement()`'s
+ * last-resort fallback for payloads with no primitive marker at all (a
+ * childless div with its own text content) — that heuristic exists to catch
+ * genuine T-tool text primitives whose payload happens to be missing
+ * `primitiveKind`, but it also matches ordinary content divs with no
+ * relation to the T-tool at all (Tailwind pill/badge/button-label markup is
+ * routinely a childless `<div>` with its own text). Used by
+ * `isContainerElement()` below, which must not misclassify those ordinary
+ * divs as text just because they're childless and have text content.
+ */
+function hasExplicitTextIdentity(element: ElementInfo): boolean {
+  const tag = (element.tagName || "").toLowerCase();
+  if (TEXT_TAGS.has(tag)) return true;
+  if (element.primitiveKind) return element.primitiveKind === "text";
+  const nodeId = element.sourceId || element.pendingNodeId || "";
+  return nodeId.startsWith("draft-text-");
+}
+
 /**
  * Whether the element should expose the Auto layout section. True for anything
  * already laid out with flexbox, or any block-level container tag that isn't a
@@ -159,6 +180,26 @@ const LEAF_TAGS = new Set([
  * children show the full Auto layout section the same way does.
  */
 export function isContainerElement(element: ElementInfo): boolean {
+  // T-tool text primitives are divs and use `display:flex` for vertical text
+  // alignment, but they are still leaf text layers rather than auto-layout
+  // containers, so check text identity before the flex/container shortcuts
+  // (fixing empty frame controls must not expose Flow/Padding on text
+  // layers). This short-circuit must only fire on an EXPLICIT text signal
+  // (see `hasExplicitTextIdentity`) rather than `isTextElement()`'s generic
+  // childless-div-with-text fallback: that fallback alone would also match
+  // ordinary text-only divs with no primitive/tag/id marker at all —
+  // ubiquitous in generated markup (Tailwind pills/badges/button-label
+  // divs) — stripping the Flow/Padding/Auto-layout sections from every one
+  // of them even though they're legitimate flex/block containers.
+  if (hasExplicitTextIdentity(element)) return false;
+  // Canvas primitive markers are authoritative. This code-backed editor lets
+  // rectangles act as lightweight containers (nest-on-drop promotes them to
+  // auto layout), and frames are containers by definition. Other drawn
+  // shapes remain leaves even though several are represented by a plain div.
+  const primitiveKind = element.primitiveKind?.trim().toLowerCase();
+  if (primitiveKind) {
+    return ["frame", "rectangle", "rect"].includes(primitiveKind);
+  }
   if (element.isFlexContainer || element.isGridContainer) return true;
   const tag = (element.tagName || "").toLowerCase();
   if (TEXT_TAGS.has(tag) || LEAF_TAGS.has(tag)) return false;
@@ -176,13 +217,6 @@ export function isParentGrid(element: ElementInfo): boolean {
   return Boolean(element.parentDisplay?.toLowerCase().includes("grid"));
 }
 
-export function elementHasLayoutChildren(element: ElementInfo): boolean {
-  if (typeof element.childElementCount === "number") {
-    return element.childElementCount > 0;
-  }
-  return Boolean(element.htmlContent?.match(/<\s*[a-zA-Z][^>]*>/));
-}
-
 export function parentFlexDirection(
   element: ElementInfo,
 ): AutoLayoutSizingAxis {

package/corpus/templates/design/app/components/design/edit-panel/element-identity.ts

@@ -5,7 +5,7 @@ import { roundToOneDecimal } from "./position-helpers";
 
 export function elementIdentityKey(element: ElementInfo): string {
   return [
-    element.sourceId ?? element.id ?? element.selector ?? element.tagName,
+    elementStableKey(element),
     Math.round(element.boundingRect.x),
     Math.round(element.boundingRect.y),
     Math.round(element.boundingRect.width),
@@ -18,9 +18,22 @@ export function elementIdentityKey(element: ElementInfo): string {
  * resizing (unlike elementIdentityKey, which folds in the bounding rect and
  * therefore changes on every resize — exactly what an aspect-ratio lock needs
  * to persist across). Falls back through the same id chain.
+ *
+ * Uses `||`, not `??`, between the fallback candidates: the bridge
+ * (editor-chrome.bridge.ts getElementInfo) reports `sourceId` as the empty
+ * string `""` — not `undefined` — for any element that isn't source-backed
+ * (e.g. a runtime-only DOM node in a connected localhost/fusion screen). `??`
+ * only skips a nullish left-hand side, so an empty-string `sourceId` short-
+ * circuited the whole chain and every non-source-backed element collapsed to
+ * the SAME key ("" here, and just the rounded bounding rect in
+ * elementIdentityKey). For this hook that meant locking the aspect ratio on
+ * one such element silently applied its captured ratio to every other
+ * non-source-backed element too. `||` falls through empty strings the same
+ * way the bridge itself already does (`getSourceId(el) || getSelector(el)`),
+ * reaching the real per-element `selector` instead. Exported for tests.
  */
-function elementStableKey(element: ElementInfo): string {
-  return element.sourceId ?? element.id ?? element.selector ?? element.tagName;
+export function elementStableKey(element: ElementInfo): string {
+  return element.sourceId || element.id || element.selector || element.tagName;
 }
 
 /**

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

@@ -20,16 +20,29 @@ import {
   type ScrubInputChangeMeta,
 } from "../inspector";
 import type { ElementInfo } from "../types";
+import { roundToOneDecimal } from "./position-helpers";
 import { isMixedValue } from "./selection-helpers";
 import {
   resolveBreakpointOverride,
   type BreakpointOverrideFieldContext,
   type MotionKeyframeFieldContext,
+  type StyleChangeMeta,
   type StyleChangeHandler,
   type StylesChangeHandler,
 } from "./style-change-types";
 import { parseNumericValue, sidesAreLinked } from "./style-options";
 
+/**
+ * The CSS length DesignSpacingControl commits for one side's scrub/typed
+ * value. Rounds to one decimal place (not a whole pixel) to match the
+ * `precision={1}` the four per-side ScrubInput fields below advertise — see
+ * `roundToOneDecimal`'s docstring on why 0.5-unit values must survive the
+ * round trip. Exported so the precision contract is unit-testable directly.
+ */
+export function resolveSpacingSideValue(value: number): string {
+  return `${roundToOneDecimal(value)}px`;
+}
+
 export function DesignSpacingControl({
   label,
   values,
@@ -47,14 +60,19 @@ export function DesignSpacingControl({
     bottom: parseNumericValue(values.bottom || "0"),
     left: parseNumericValue(values.left || "0"),
   };
-  const linkedValue = Math.round(
+  const linkedValue = roundToOneDecimal(
     (numeric.top + numeric.right + numeric.bottom + numeric.left) / 4,
   );
   const setSide = (
     side: "Top" | "Right" | "Bottom" | "Left",
     value: number,
   ) => {
-    onChange(side, `${Math.round(value)}px`);
+    // Was `Math.round(value)`, which silently floored every typed/scrubbed
+    // 0.5px value to a whole pixel — contradicting the `precision={1}` these
+    // fields advertise (below) and diverging from every other ScrubInput
+    // commit site in this panel (position X/Y, stroke weight, font size all
+    // use roundToOneDecimal).
+    onChange(side, resolveSpacingSideValue(value));
   };
   const setAll = (value: number) => {
     (["Top", "Right", "Bottom", "Left"] as const).forEach((side) =>
@@ -98,6 +116,7 @@ export function DesignSpacingControl({
           onChange={setAll}
           unit="px"
           min={0}
+          precision={1}
           labelClassName="w-16"
           inputClassName="h-6"
         />
@@ -304,12 +323,13 @@ export function commitStylePatch(
   styles: Record<string, string>,
   onStyleChange: StyleChangeHandler,
   onStylesChange?: StylesChangeHandler,
+  meta?: StyleChangeMeta,
 ) {
   if (onStylesChange) {
-    onStylesChange(styles);
+    onStylesChange(styles, meta);
     return;
   }
   Object.entries(styles).forEach(([property, value]) => {
-    onStyleChange(property, value);
+    onStyleChange(property, value, meta);
   });
 }

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

@@ -11,7 +11,7 @@ import {
   type DesignGradientType,
   type ExportSettingsValue,
 } from "../inspector";
-import { cssColorOrFallback } from "./position-helpers";
+import { colorHasVisibleAlpha, cssColorOrFallback } from "./position-helpers";
 
 export const SOLID_FILL_ID = "solid";
 export const FILL_LAYER_PREFIX = "layer:";
@@ -113,24 +113,45 @@ export function isLayerHiddenBySize(sizeEntry: string | undefined): boolean {
  * Rewrites the background-size list so `index` is hidden/shown via the
  * zero-size marker, padding shorter lists with "auto" (the CSS default) so
  * every other layer keeps rendering at its current/default size.
+ *
+ * `restoreValue` is the size to bring back when un-hiding (`hidden: false`).
+ * Without it, re-showing always reset the layer to "auto", permanently
+ * discarding whatever custom cover/contain/percentage size the layer had
+ * before it was hidden — callers should capture the layer's own size entry
+ * before hiding it (it's about to be overwritten with the marker) and pass
+ * it back in here on the show path. Defaults to "auto" so existing callers
+ * that don't have a stashed value keep today's behavior.
  */
 export function withLayerSizeMarker(
   sizeLayers: string[],
   layerCount: number,
   index: number,
   hidden: boolean,
+  restoreValue?: string,
 ): string {
   const next = Array.from(
     { length: layerCount },
     (_, i) => sizeLayers[i] || "auto",
   );
-  next[index] = hidden ? HIDDEN_LAYER_SIZE_MARKER : "auto";
+  next[index] = hidden ? HIDDEN_LAYER_SIZE_MARKER : restoreValue || "auto";
   return joinCssLayers(next);
 }
 
 export function splitCssLayers(value: string): string[] {
   const trimmed = value.trim();
-  if (!trimmed || trimmed === "none") return [];
+  // CSS-wide keywords represent the property's default/inherited value as a
+  // whole; they are not real comma-stack layers and cannot legally be
+  // preserved beside a new gradient/image (`url(...), initial` invalidates
+  // the entire declaration). Shorthand-authored page backgrounds commonly
+  // surface as `initial` through CSSStyleDeclaration, so normalize these to
+  // an empty editable layer stack before adding a real fill.
+  if (
+    !trimmed ||
+    trimmed === "none" ||
+    /^(?:initial|inherit|unset|revert|revert-layer)$/i.test(trimmed)
+  ) {
+    return [];
+  }
   const layers: string[] = [];
   let depth = 0;
   let start = 0;
@@ -197,6 +218,189 @@ export function removeFillLayerAtIndex(
   };
 }
 
+/** One image-fill layer's four index-aligned CSS values. */
+export interface ImageFillLayerStyles {
+  backgroundImage: string;
+  backgroundSize: string;
+  backgroundRepeat: string;
+  backgroundPosition: string;
+}
+
+/**
+ * Sets one image-fill layer's four index-aligned CSS values at `index`,
+ * preserving every sibling layer's own image/size/repeat/position — the
+ * image-fill analog of `removeFillLayerAtIndex`/`reorderFillLayers`. `index`
+ * may be one past the current layer count to append a new layer. Shorter
+ * parallel arrays are padded with each property's CSS default (mirrors
+ * `addFillLayerPatch`'s defaults) so sibling layers keep rendering unchanged.
+ */
+export function setImageFillLayerPatch(
+  layers: FillLayerArrays,
+  index: number,
+  imageStyles: ImageFillLayerStyles,
+): Record<
+  | "backgroundImage"
+  | "backgroundSize"
+  | "backgroundRepeat"
+  | "backgroundPosition",
+  string
+> {
+  const layerCount = Math.max(layers.backgroundImage.length, index + 1);
+  const buildLayer = (existing: string[], fallback: string, override: string) =>
+    joinCssLayers(
+      Array.from({ length: layerCount }, (_, i) =>
+        i === index ? override : existing[i] || fallback,
+      ),
+    );
+  return {
+    backgroundImage: buildLayer(
+      layers.backgroundImage,
+      "none",
+      imageStyles.backgroundImage,
+    ),
+    backgroundSize: buildLayer(
+      layers.backgroundSize,
+      "auto",
+      imageStyles.backgroundSize,
+    ),
+    backgroundRepeat: buildLayer(
+      layers.backgroundRepeat,
+      "no-repeat",
+      imageStyles.backgroundRepeat,
+    ),
+    backgroundPosition: buildLayer(
+      layers.backgroundPosition,
+      "0% 0%",
+      imageStyles.backgroundPosition,
+    ),
+  };
+}
+
+/**
+ * Full patch-building logic behind `ColorInput`'s image-fill handler.
+ *
+ * Previously, editing the base fill row's image (via `ImageFillControls` ->
+ * `DesignColorPicker.onImageFillChange`) always replaced the *whole*
+ * `backgroundImage`/`backgroundSize`/`backgroundRepeat`/`backgroundPosition`
+ * properties with a single-layer patch (see `imageFillToBackgroundStyles`),
+ * silently discarding any other gradient/image layers already stacked below
+ * it — there was no layer-index-aware merge at all.
+ *
+ * When `layerIndex` is a real index (editing an existing layer's own image),
+ * only that layer's four values are overwritten, preserving every sibling —
+ * see `setImageFillLayerPatch`. When `layerIndex` is `null` (the base
+ * solid/text row switching its paint type to Image, with no layer selected
+ * yet), the image becomes a new layer PREPENDED above the existing layer
+ * stack — mirroring `solidToGradientPatch`'s solid -> gradient conversion —
+ * instead of clobbering the whole background stack.
+ */
+export function imageFillChangePatch(
+  layers: FillLayerArrays,
+  layerIndex: number | null,
+  imageStyles: ImageFillLayerStyles,
+): Record<
+  | "backgroundImage"
+  | "backgroundSize"
+  | "backgroundRepeat"
+  | "backgroundPosition",
+  string
+> {
+  if (layerIndex !== null) {
+    return setImageFillLayerPatch(layers, layerIndex, imageStyles);
+  }
+  return {
+    backgroundImage: joinCssLayers([
+      imageStyles.backgroundImage,
+      ...layers.backgroundImage,
+    ]),
+    backgroundSize: joinCssLayers([
+      imageStyles.backgroundSize,
+      ...layers.backgroundSize,
+    ]),
+    backgroundRepeat: joinCssLayers([
+      imageStyles.backgroundRepeat,
+      ...layers.backgroundRepeat,
+    ]),
+    backgroundPosition: joinCssLayers([
+      imageStyles.backgroundPosition,
+      ...layers.backgroundPosition,
+    ]),
+  };
+}
+
+/**
+ * Patch for the Fill panel's "+" (add fill) action.
+ *
+ * Figma parity: clicking "+" always adds a new fill on top of whatever is
+ * already there. The only exception is a genuinely empty fill state (no
+ * visible base solid AND no existing background layers) — there "+" just
+ * reveals the hidden base solid instead of stacking an empty default
+ * gradient on top of nothing.
+ *
+ * Previously the caller only checked whether the base solid had visible
+ * alpha, so an element with an existing gradient/image layer stack but a
+ * *hidden* base solid (e.g. right after `solidToGradientPatch` converts
+ * solid -> gradient and clears backgroundColor to "transparent") had "+"
+ * silently un-hide the base solid instead of adding a new layer — the
+ * opposite of what "+" is supposed to do, and it reintroduced the exact
+ * phantom-second-fill problem `solidToGradientPatch` exists to avoid.
+ */
+export function addFillLayerPatch(params: {
+  backgroundColor: string | undefined;
+  backgroundLayers: string[];
+  backgroundSizeLayers: string[];
+  backgroundRepeatLayers: string[];
+  backgroundPositionLayers: string[];
+}): Record<string, string> {
+  const {
+    backgroundColor,
+    backgroundLayers,
+    backgroundSizeLayers,
+    backgroundRepeatLayers,
+    backgroundPositionLayers,
+  } = params;
+
+  if (!colorHasVisibleAlpha(backgroundColor) && backgroundLayers.length === 0) {
+    return { backgroundColor: cssColorOrFallback(backgroundColor, "#ffffff") };
+  }
+
+  const nextLayer = defaultGradientLayer(
+    "linear",
+    backgroundColor || "#ffffff",
+  );
+  if (backgroundLayers.length === 0) {
+    return { backgroundImage: nextLayer };
+  }
+
+  // Prepending a layer without also prepending matching entries to the
+  // other three index-aligned parallel arrays (size/repeat/position) would
+  // shift every existing layer's index by one, silently re-pairing each of
+  // them with the *previous* layer's size/repeat/position (same class of
+  // bug `removeFillLayerAtIndex` above fixes for removal).
+  return {
+    backgroundImage: joinCssLayers([nextLayer, ...backgroundLayers]),
+    backgroundSize: joinCssLayers(["auto", ...backgroundSizeLayers]),
+    backgroundRepeat: joinCssLayers(["no-repeat", ...backgroundRepeatLayers]),
+    backgroundPosition: joinCssLayers(["0% 0%", ...backgroundPositionLayers]),
+  };
+}
+
+/**
+ * Patch for removing just the base solid/text fill row — the row shown when
+ * the base color has visible alpha, or always for a text fill. Must only
+ * clear that one property, never `backgroundImage`, so any other stacked
+ * gradient/image layers (each rendered as its own row with its own
+ * independent remove button — see `removeFillLayerAtIndex`) are left
+ * untouched. This used to also zero `backgroundImage` whenever the caller
+ * had `onStylesChange` available, silently deleting every other fill layer
+ * any time the base row's own remove button was clicked.
+ */
+export function removeBaseFillPatch(
+  fillProperty: "color" | "backgroundColor",
+): Record<string, string> {
+  return { [fillProperty]: "transparent" };
+}
+
 export function parseGradientLayer(layer: string): ParsedGradientLayer | null {
   const match = layer.trim().match(/^(linear|radial|conic)-gradient\((.*)\)$/i);
   if (!match) return null;
@@ -247,7 +451,21 @@ function readLeadingColor(part: string): { raw: string; value: string } | null {
     return { raw: transparent[0], value: "rgba(0, 0, 0, 0)" };
   }
   const functionName = trimmed.match(/^[a-z][a-z0-9-]*\(/i);
-  if (!functionName) return null;
+  if (!functionName) {
+    // Bare CSS color keyword — e.g. `linear-gradient(red, blue)` — not just
+    // hex/rgb/hsl/function colors. Gradients written by hand or generated
+    // from named-color CSS are common, and without this branch the leading
+    // stop was silently misread as a gradient *prefix* (the first stop's
+    // color was dropped, corrupting an otherwise-valid 2-stop gradient into
+    // a broken 1-stop one with a garbage prefix). Require the matched word to
+    // actually parse as a color so direction/shape prefix keywords ("to",
+    // "circle", "closest-side", "from", "at", …) are never misclassified.
+    const word = trimmed.match(/^[a-z]+\b/i);
+    if (word && parseCssColor(word[0])) {
+      return { raw: word[0], value: word[0] };
+    }
+    return null;
+  }
   let depth = 0;
   for (let index = 0; index < trimmed.length; index += 1) {
     const char = trimmed[index];