@agent-native/core 0.92.10 → 0.92.12

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

@@ -12,6 +12,7 @@ import {
   IconMinus,
   IconPlus,
 } from "@tabler/icons-react";
+import { useState } from "react";
 
 import {
   Popover,
@@ -24,16 +25,19 @@ import type { GlslShaderPanelContext } from "../inspector/GlslShaderPanel";
 import type { ElementInfo } from "../types";
 import { selectionColorValues } from "./document-colors";
 import { isTextElement } from "./element-classification";
+import { elementStableKey } from "./element-identity";
 import { commitStylePatch, FieldTrailer } from "./field-primitives";
 import {
+  addFillLayerPatch,
   averageGradientOpacity,
   buildGradientLayer,
-  defaultGradientLayer,
   gradientLabel,
   isLayerHiddenBySize,
   joinCssLayers,
   parseGradientLayer,
+  removeBaseFillPatch,
   removeFillLayerAtIndex,
+  setImageFillLayerPatch,
   splitCssLayers,
   withLayerSizeMarker,
 } from "./fill-gradient-helpers";
@@ -45,7 +49,6 @@ import {
 import { ColorInput, PanelSection } from "./panel-primitives";
 import {
   colorHasVisibleAlpha,
-  compactCssValue,
   cssColorOrFallback,
   swatchStyle,
 } from "./position-helpers";
@@ -57,6 +60,50 @@ import type {
   StylesChangeHandler,
 } from "./style-change-types";
 
+/**
+ * The four `backgroundImage`/`backgroundSize`/`backgroundRepeat`/
+ * `backgroundPosition` prop values fed to the base fill row's `<ColorInput>`.
+ * Text fills ("color") can't hold a layered paint at all, so every value
+ * collapses to "" for them.
+ *
+ * Factored out (rather than inlined ternaries in the JSX below) as a
+ * regression guard: `ColorInput.onImageFillLayerChange` builds its commit
+ * patch from whatever it computes internally from these four props (see
+ * `imageFillChangePatch` in fill-gradient-helpers.ts). Previously only
+ * `backgroundImage` was passed here, so ColorInput treated every sibling
+ * layer as having no size/repeat/position of its own — switching this base
+ * swatch to Image then rebuilt backgroundSize/backgroundRepeat/
+ * backgroundPosition as a single-entry list against the real N+1-layer
+ * backgroundImage stack, corrupting every existing layer's size/repeat/
+ * position via CSS background-layer-list cycling (e.g. an existing "cover"
+ * silently became "auto"). All four must always be sourced together, exactly
+ * like PageProperties' background row in EditPanel.tsx.
+ */
+export function baseFillLayerSourceProps(
+  styles: Record<string, string>,
+  isTextFillElement: boolean,
+): {
+  backgroundImage: string;
+  backgroundSize: string;
+  backgroundRepeat: string;
+  backgroundPosition: string;
+} {
+  if (isTextFillElement) {
+    return {
+      backgroundImage: "",
+      backgroundSize: "",
+      backgroundRepeat: "",
+      backgroundPosition: "",
+    };
+  }
+  return {
+    backgroundImage: styles.backgroundImage || "",
+    backgroundSize: styles.backgroundSize || "",
+    backgroundRepeat: styles.backgroundRepeat || "",
+    backgroundPosition: styles.backgroundPosition || "",
+  };
+}
+
 export function FillProperties({
   element,
   onStyleChange,
@@ -87,6 +134,16 @@ export function FillProperties({
   const styles = element.computedStyles;
   const isTextFillElement = isTextElement(element);
   const fillProperty = isTextFillElement ? "color" : "backgroundColor";
+  // Stash for a hidden layer's real pre-hide backgroundSize (e.g. a custom
+  // cover/contain/percentage) so re-showing it restores that value instead
+  // of permanently discarding it for "auto" — the same React-state stash
+  // pattern effects-properties.tsx uses for hidden shadow/blur effects (see
+  // `hiddenEffectStash` there), keyed by element + layer index so unrelated
+  // elements/layers never collide.
+  const [hiddenFillSizeStash, setHiddenFillSizeStash] = useState<
+    Record<string, string>
+  >({});
+  const fillStashKey = elementStableKey(element);
   const fillValue = isTextFillElement
     ? styles.color || ""
     : styles.backgroundColor || "";
@@ -102,6 +159,10 @@ export function FillProperties({
   const backgroundPositionLayers = isTextFillElement
     ? []
     : splitCssLayers(styles.backgroundPosition || "");
+  const baseFillLayerProps = baseFillLayerSourceProps(
+    styles,
+    isTextFillElement,
+  );
   const fillIsMixed =
     isMixedValue(fillValue) ||
     isMixedValue(styles.backgroundImage) ||
@@ -239,50 +300,16 @@ export function FillProperties({
                 );
                 return;
               }
-              if (!colorHasVisibleAlpha(styles.backgroundColor)) {
-                onStyleChange(
-                  "backgroundColor",
-                  cssColorOrFallback(styles.backgroundColor, "#ffffff"),
-                );
-                return;
-              }
-              const current = compactCssValue(styles.backgroundImage, "");
-              const nextLayer = defaultGradientLayer(
-                "linear",
-                styles.backgroundColor || "#ffffff",
-              );
-              if (!current) {
-                onStyleChange("backgroundImage", nextLayer);
-                return;
-              }
-              // 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
-              // as the removeLayer fix above). Commit a default entry for
-              // the new layer in all four arrays together, in one patch.
-              const patch = {
-                backgroundImage: `${nextLayer}, ${current}`,
-                backgroundSize: joinCssLayers([
-                  "auto",
-                  ...backgroundSizeLayers,
-                ]),
-                backgroundRepeat: joinCssLayers([
-                  "no-repeat",
-                  ...backgroundRepeatLayers,
-                ]),
-                backgroundPosition: joinCssLayers([
-                  "0% 0%",
-                  ...backgroundPositionLayers,
-                ]),
-              };
-              if (onStylesChange) {
-                onStylesChange(patch);
-                return;
-              }
-              Object.entries(patch).forEach(([property, value]) =>
-                onStyleChange(property, value),
+              commitStylePatch(
+                addFillLayerPatch({
+                  backgroundColor: styles.backgroundColor,
+                  backgroundLayers,
+                  backgroundSizeLayers,
+                  backgroundRepeatLayers,
+                  backgroundPositionLayers,
+                }),
+                onStyleChange,
+                onStylesChange,
               );
             }}
           >
@@ -312,10 +339,11 @@ export function FillProperties({
                   // layer on top of any existing backgroundImage layers
                   // (rendered as their own rows below) instead of clobbering
                   // them — ColorInput derives its add/replace-layer logic
-                  // from this prop.
-                  backgroundImage={
-                    isTextFillElement ? "" : styles.backgroundImage
-                  }
+                  // from this prop. The size/repeat/position siblings must
+                  // come along too (same as PageProperties' background row in
+                  // EditPanel.tsx) — see `baseFillLayerSourceProps` above for
+                  // why all four are sourced together.
+                  {...baseFillLayerProps}
                   blendMode={
                     isTextFillElement
                       ? undefined
@@ -342,15 +370,19 @@ export function FillProperties({
                       ? undefined
                       : (v) => onStyleChange("backgroundImage", v)
                   }
-                  onImageFillChange={
+                  // Layer-index-aware: ColorInput merges the edited image
+                  // into the correct backgroundImage/backgroundSize/
+                  // backgroundRepeat/backgroundPosition index and hands back
+                  // the full four-property patch here, already preserving
+                  // every other stacked gradient/image layer (see
+                  // `imageFillChangePatch`) — commit it as-is instead of
+                  // rebuilding a single-layer patch that would silently wipe
+                  // those siblings.
+                  onImageFillLayerChange={
                     isTextFillElement
                       ? undefined
-                      : (value) =>
-                          commitStylePatch(
-                            imageFillToBackgroundStyles(value),
-                            onStyleChange,
-                            onStylesChange,
-                          )
+                      : (patch) =>
+                          commitStylePatch(patch, onStyleChange, onStylesChange)
                   }
                   documentColors={documentColors}
                   pickerKey={[
@@ -384,20 +416,13 @@ export function FillProperties({
               </SectionIconButton>
               <SectionIconButton
                 label={t("editPanel.labels.removeLayer")}
-                onClick={() => {
-                  if (isTextFillElement) {
-                    onStyleChange(fillProperty, "transparent");
-                    return;
-                  }
-                  if (onStylesChange) {
-                    onStylesChange({
-                      backgroundColor: "transparent",
-                      backgroundImage: "none",
-                    });
-                  } else {
-                    onStyleChange(fillProperty, "transparent");
-                  }
-                }}
+                onClick={() =>
+                  commitStylePatch(
+                    removeBaseFillPatch(fillProperty),
+                    onStyleChange,
+                    onStylesChange,
+                  )
+                }
               >
                 <IconMinus className="size-3.5" />
               </SectionIconButton>
@@ -415,12 +440,18 @@ export function FillProperties({
           {!isTextFillElement
             ? backgroundLayers.map((layer, index) => {
                 const gradient = parseGradientLayer(layer);
-                // Hidden state lives in the real, persisted backgroundSize
-                // marker (see withLayerSizeMarker) rather than React state,
-                // so it survives deselect/reselect. Opacity still reflects
-                // the gradient's own stop opacities for display, but no
-                // longer drives hide/show — a layer can be a fully-opaque
-                // gradient and still be hidden via zero-size.
+                // Hidden state itself lives in the real, persisted
+                // backgroundSize marker (see withLayerSizeMarker) rather than
+                // React state, so it survives deselect/reselect. Opacity
+                // still reflects the gradient's own stop opacities for
+                // display, but no longer drives hide/show — a layer can be a
+                // fully-opaque gradient and still be hidden via zero-size.
+                // The layer's *original* size (a custom cover/contain/
+                // percentage) can't be recovered from the marker itself once
+                // overwritten, so it's separately stashed in component state
+                // for the round trip (see hiddenFillSizeStash below) —
+                // same pattern as effects-properties.tsx's hiddenEffectStash
+                // for hidden shadow/blur effects.
                 const hidden = isLayerHiddenBySize(backgroundSizeLayers[index]);
                 const opacity = gradient
                   ? averageGradientOpacity(gradient.stops)
@@ -463,14 +494,47 @@ export function FillProperties({
                     onStyleChange(property, value),
                   );
                 };
+                const sizeStashKey = `${fillStashKey}:fill-size:${index}`;
                 const setLayerHidden = (nextHidden: boolean) => {
+                  if (nextHidden) {
+                    // Stash the real pre-hide size (a custom cover/contain/
+                    // percentage — see withLayerSizeMarker) so re-showing
+                    // can restore it instead of permanently discarding it
+                    // for "auto". Skip stashing if the layer is somehow
+                    // already hidden (nothing real to preserve).
+                    const current = backgroundSizeLayers[index];
+                    if (current && !isLayerHiddenBySize(current)) {
+                      setHiddenFillSizeStash((prev) => ({
+                        ...prev,
+                        [sizeStashKey]: current,
+                      }));
+                    }
+                    onStyleChange(
+                      "backgroundSize",
+                      withLayerSizeMarker(
+                        backgroundSizeLayers,
+                        backgroundLayers.length,
+                        index,
+                        true,
+                      ),
+                    );
+                    return;
+                  }
+
+                  const restored = hiddenFillSizeStash[sizeStashKey];
+                  setHiddenFillSizeStash((prev) => {
+                    const next = { ...prev };
+                    delete next[sizeStashKey];
+                    return next;
+                  });
                   onStyleChange(
                     "backgroundSize",
                     withLayerSizeMarker(
                       backgroundSizeLayers,
                       backgroundLayers.length,
                       index,
-                      nextHidden,
+                      false,
+                      restored,
                     ),
                   );
                 };
@@ -536,6 +600,35 @@ export function FillProperties({
                               ),
                             );
                           }}
+                          // Editing an existing image layer's URL/fit
+                          // through its own row popover previously had no
+                          // `onImageFillChange` wired at all, so it fell
+                          // through to `emitPaintValue(imageFillToCss(...))`
+                          // — a single-property `background` SHORTHAND
+                          // string (e.g. `url(...) center / cover no-repeat`)
+                          // written into `backgroundImage` alone, which is
+                          // invalid CSS for that longhand and left
+                          // backgroundSize/backgroundRepeat/backgroundPosition
+                          // untouched. Merge into this layer's own index
+                          // across all four parallel arrays instead (same
+                          // helper the base-row fix uses — see
+                          // `imageFillChangePatch` in panel-primitives.tsx).
+                          onImageFillChange={(value) =>
+                            commitStylePatch(
+                              setImageFillLayerPatch(
+                                {
+                                  backgroundImage: backgroundLayers,
+                                  backgroundSize: backgroundSizeLayers,
+                                  backgroundRepeat: backgroundRepeatLayers,
+                                  backgroundPosition: backgroundPositionLayers,
+                                },
+                                index,
+                                imageFillToBackgroundStyles(value),
+                              ),
+                              onStyleChange,
+                              onStylesChange,
+                            )
+                          }
                           paintType={gradient?.type ?? "image"}
                           backgroundImage={layer}
                           backgroundSize={backgroundSizeLayers[index]}

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

@@ -103,6 +103,46 @@ export function SectionIconToggle({
   );
 }
 
+/**
+ * Compute the next `overIndex` for a dragover event on `hoverIndex`, given the
+ * index of the row currently being dragged. Hovering back over the dragged
+ * row itself has no meaningful drop position (dropping there is always a
+ * no-op — see `resolveRowDrop`), so this returns `null` to clear the
+ * indicator rather than echoing back `hoverIndex`, which would otherwise
+ * render a stray "before" drop-indicator line on the dragged row itself.
+ *
+ * Pure — exported for tests.
+ */
+export function nextRowDragOverIndex(
+  hoverIndex: number,
+  dragIndex: number,
+): number | null {
+  return hoverIndex === dragIndex ? null : hoverIndex;
+}
+
+/**
+ * Resolve a drop into a `{ from, to }` pair, or `null` for a no-op drop.
+ *
+ * Both `from` (the row that started the drag) and `to` (the row dropped on)
+ * are re-validated against `count` — the CURRENT live row count at drop time
+ * — rather than trusted from the drag-start snapshot. The underlying array
+ * can shrink mid-drag (e.g. an external update removes rows while the
+ * pointer is still down); re-checking only `to` and not `from` would let a
+ * stale drag-start index (captured before the shrink) reach the caller's
+ * `onReorder` out of bounds.
+ *
+ * Pure — exported for tests.
+ */
+export function resolveRowDrop(
+  from: number | null,
+  to: number,
+  count: number,
+): { from: number; to: number } | null {
+  if (from == null || from === to) return null;
+  if (from < 0 || from >= count || to < 0 || to >= count) return null;
+  return { from, to };
+}
+
 /**
  * Minimal pointer-based reorder for a flat row list (fill layers, shadow
  * layers). Deliberately not shared with LayersPanel.tsx's tree-drag logic —
@@ -127,17 +167,17 @@ export function useRowDragReorder(
       if (dragIndex == null) return;
       event.preventDefault();
       event.dataTransfer.dropEffect = "move";
-      if (index !== overIndex) setOverIndex(index);
+      const next = nextRowDragOverIndex(index, dragIndex);
+      if (next !== overIndex) setOverIndex(next);
     },
     onDrop: (event: DragEvent<HTMLDivElement>) => {
       event.preventDefault();
       const from = dragIndex;
       setDragIndex(null);
       setOverIndex(null);
-      if (from == null || from === index) return;
-      const { count: liveCount, onReorder: liveOnReorder } = liveRef.current;
-      if (index < 0 || index >= liveCount) return;
-      liveOnReorder(from, index);
+      const resolved = resolveRowDrop(from, index, liveRef.current.count);
+      if (!resolved) return;
+      liveRef.current.onReorder(resolved.from, resolved.to);
     },
   });