@agent-native/core 0.165.3 → 0.167.0

package/corpus/templates/design/app/components/design/bridge/editor-chrome.bridge.ts

@@ -2937,7 +2937,6 @@ declare var __SELECTED_LAYER_DRAG_PRIORITY__: boolean;
   } | null = null;
   var suppressNextShieldClick = false;
   var suppressNextShieldClickTimer: ReturnType<typeof setTimeout> | null = null;
-  var selectedSpacingHovered = false;
   var hoveredSpacingHandleKey = "";
   var spacingHoverClearTimer: ReturnType<typeof setTimeout> | null = null;
   var lastSpacingPointerPoint: { x: number; y: number } | null = null;
@@ -2971,7 +2970,6 @@ declare var __SELECTED_LAYER_DRAG_PRIORITY__: boolean;
     clearHoverGate();
     setPassiveSelectionElements([]);
     clearSpacingHoverTimer();
-    selectedSpacingHovered = false;
     hoveredSpacingHandleKey = "";
     lastSpacingPointerPoint = null;
     spacingDrag = null;
@@ -3291,7 +3289,13 @@ declare var __SELECTED_LAYER_DRAG_PRIORITY__: boolean;
       lastSourceHeadHtml = nextHeadHtml;
     }
     var currentHeadHtml = lastSourceHeadHtml;
-    if (nextHeadHtml === currentHeadHtml && activeCandidates.length > 0) {
+    // The subtree path rewrites one selector's match. A forced replacement can
+    // have changed any number of nodes, so taking it leaves the rest stale.
+    if (
+      !forceFullDocument &&
+      nextHeadHtml === currentHeadHtml &&
+      activeCandidates.length > 0
+    ) {
       var currentMatch = null;
       var nextMatch = null;
       var matchedSelector = "";
@@ -4244,7 +4248,6 @@ declare var __SELECTED_LAYER_DRAG_PRIORITY__: boolean;
   function activateSpacingHandle(spacingKey: string): void {
     if (!spacingKey) return;
     clearSpacingHoverTimer();
-    selectedSpacingHovered = true;
     setHoverToSelectedElementFromSpacingSurface();
     if (
       hoveredSpacingHandleKey !== spacingKey ||
@@ -4336,7 +4339,6 @@ declare var __SELECTED_LAYER_DRAG_PRIORITY__: boolean;
       hit &&
       (hit === selectedEl || (selectedEl.contains && selectedEl.contains(hit)))
     ) {
-      selectedSpacingHovered = true;
       return true;
     }
     return false;
@@ -4355,7 +4357,6 @@ declare var __SELECTED_LAYER_DRAG_PRIORITY__: boolean;
         updateSpacingOverlay(selectedEl);
         return;
       }
-      selectedSpacingHovered = false;
       hoveredSpacingHandleKey = "";
       updateSpacingOverlay(selectedEl);
     }, 80);
@@ -5532,7 +5533,6 @@ declare var __SELECTED_LAYER_DRAG_PRIORITY__: boolean;
       (window.parent as Window).postMessage({ type: "clear-selection" }, "*");
       return;
     }
-    selectedSpacingHovered = false;
     hoveredSpacingHandleKey = "";
     var previousSelectedEl = selectedEl;
     selectedEl = selectionTargetForHit(target);
@@ -5844,7 +5844,6 @@ declare var __SELECTED_LAYER_DRAG_PRIORITY__: boolean;
     var target = candidateElements[0] || null;
     var info = null;
     if (target) {
-      selectedSpacingHovered = false;
       hoveredSpacingHandleKey = "";
       selectedEl = selectionTargetForHit(target);
       if (selectedEl && !isLayerInteractionBlocked(selectedEl)) {
@@ -6825,7 +6824,6 @@ declare var __SELECTED_LAYER_DRAG_PRIORITY__: boolean;
     var startY = e.clientY;
     lastSpacingPointerPoint = { x: startX, y: startY };
     hoveredSpacingHandleKey = key;
-    selectedSpacingHovered = true;
     spacingDrag = {
       handle: handle,
       currentValue: originValue,
@@ -9292,10 +9290,6 @@ declare var __SELECTED_LAYER_DRAG_PRIORITY__: boolean;
         ctrl: Boolean(e.ctrlKey),
         target: dndTarget(currentTarget),
       });
-      // Cross-screen drag state: true when the pointer is outside this iframe's
-      // viewport bounds.  The host frame renders the ghost + highlight and owns
-      // the drop when this is true; the bridge suppresses its in-iframe reorder.
-      var pointerOutsideIframe = false;
       var reorderSelector = getSelector(reorderEl);
       var reorderSourceId = getSourceId(reorderEl);
       var reorderStyleSnapshot = collectPortableStyleSnapshot(reorderEl);
@@ -9655,7 +9649,6 @@ declare var __SELECTED_LAYER_DRAG_PRIORITY__: boolean;
         var dx = cx - reorderPointerStart.clientX;
         var dy = cy - reorderPointerStart.clientY;
         var outside = cx < 0 || cy < 0 || cx > vw || cy > vh;
-        pointerOutsideIframe = outside;
         // Always notify the host frame so it can track the cursor position,
         // render the ghost, and highlight the target screen. Group drags stay
         // in-iframe (the host's cross-screen drop moves a single element and
@@ -9806,8 +9799,8 @@ declare var __SELECTED_LAYER_DRAG_PRIORITY__: boolean;
         // avoid a ghost element left in screen A's DOM. For group drags an
         // outside release is simply a no-op (nothing moved during a flow
         // reorder drag, so there is nothing to restore).
-        // Use outsideOnDrop only — pointerOutsideIframe is stale when the user
-        // briefly exits the iframe and re-enters before releasing.  The host
+        // Use outsideOnDrop only — a live pointer-outside flag is stale when the
+        // user briefly exits the iframe and re-enters before releasing.  The host
         // already clears cross-screen state on re-entry so checking the
         // momentary excursion flag here would wrongly drop the element nowhere.
         if (outsideOnDrop) return;
@@ -9959,7 +9952,7 @@ declare var __SELECTED_LAYER_DRAG_PRIORITY__: boolean;
     });
     var gestureState =
       memberStates[groupEls.indexOf(gestureEl)] || memberStates[0];
-    var originalInlineOpacity = gestureState.originalOpacity;
+
     var originLeft = gestureState.originLeft;
     var originTop = gestureState.originTop;
     function setMembersOpacity(value: string | null): void {
@@ -12023,7 +12016,6 @@ declare var __SELECTED_LAYER_DRAG_PRIORITY__: boolean;
         );
         if (hoveringSelectedSpacingSurface) {
           clearSpacingHoverTimer();
-          selectedSpacingHovered = true;
           lastSpacingPointerPoint = { x: e.clientX, y: e.clientY };
           updateSpacingOverlay(selectedEl);
           // Reliable padding/gap hover: hit-test the handle geometry
@@ -12580,7 +12572,6 @@ declare var __SELECTED_LAYER_DRAG_PRIORITY__: boolean;
       // replay must be a no-op for hover state.
       var selectionChangedByHost = target !== selectedEl;
       if (selectionChangedByHost) {
-        selectedSpacingHovered = false;
         hoveredSpacingHandleKey = "";
       }
       selectedEl = target;

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

@@ -12,7 +12,7 @@ import {
   IconRadiusTopLeft,
   IconRadiusTopRight,
 } from "@tabler/icons-react";
-import { useEffect, useState, type ReactNode } from "react";
+import { useState, type ReactNode } from "react";
 
 import { Button } from "@/components/ui/button";
 import {

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

@@ -17,7 +17,6 @@ import { cn } from "@/lib/utils";
 
 import {
   AutoLayoutMatrix,
-  ScrubInput,
   SizingField,
   type AutoLayoutFlow,
   type AutoLayoutGridTrackSizing,
@@ -45,7 +44,7 @@ import {
   elementStableKey,
   useAspectRatioLock,
 } from "./element-identity";
-import { FieldTrailer, ScrubStyleInput } from "./field-primitives";
+import { FieldTrailer } from "./field-primitives";
 import { joinCssLayers, splitCssLayers } from "./fill-gradient-helpers";
 import { SectionIconButton } from "./inspector-controls";
 import {
@@ -213,12 +212,13 @@ function FlexContainerControls({
   element,
   onStyleChange,
   onStylesChange,
+  onDisableAutoLayout,
 }: {
   element: ElementInfo;
   onStyleChange: StyleChangeHandler;
   onStylesChange?: StylesChangeHandler;
+  onDisableAutoLayout?: (nodeId: string) => void;
 }) {
-  const t = useT();
   const styles = element.computedStyles;
   // The element's CURRENT layout flow as authored in code, read from its own
   // computed `display`: block/flow-root/grid/etc. = "normal flow",
@@ -372,6 +372,13 @@ function FlexContainerControls({
       <AutoLayoutMatrix
         value={autoLayoutValue}
         onFlowChange={(flow) => {
+          const nodeId = element.sourceId ?? element.pendingNodeId;
+          // A raw display:block leaves the children in flow, so they re-stack
+          // and stop being draggable. The command measures and pins them.
+          if (flow === "normal" && onDisableAutoLayout && nodeId) {
+            onDisableAutoLayout(nodeId);
+            return;
+          }
           const patch = autoLayoutStylesForFlow(flow, {
             ...styles,
             ...element.inlineStyles,
@@ -641,12 +648,14 @@ export function LayoutContextProperties({
   element,
   onStyleChange,
   onStylesChange,
+  onDisableAutoLayout,
   motionKeyframeContext,
   breakpointOverrideContext,
 }: {
   element: ElementInfo;
   onStyleChange: StyleChangeHandler;
   onStylesChange?: StylesChangeHandler;
+  onDisableAutoLayout?: (nodeId: string) => void;
   motionKeyframeContext?: MotionKeyframeFieldContext;
   breakpointOverrideContext?: BreakpointOverrideFieldContext;
 }) {
@@ -875,6 +884,7 @@ export function LayoutContextProperties({
         element={element}
         onStyleChange={onStyleChange}
         onStylesChange={onStylesChange}
+        onDisableAutoLayout={onDisableAutoLayout}
       />
       {childControls}
     </PanelSection>

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

@@ -1,10 +1,6 @@
-import {
-  parseCssColor,
-  rgbaToCss,
-  withColorOpacity,
-} from "@shared/color-utils";
+import { parseCssColor } from "@shared/color-utils";
 import { IconChevronDown, IconChevronRight } from "@tabler/icons-react";
-import { useEffect, useRef, useState, type ReactNode } from "react";
+import { Children, useEffect, useRef, useState, type ReactNode } from "react";
 
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
@@ -28,7 +24,6 @@ import type { DesignPaintType } from "../inspector/DesignColorPicker";
 import type { GlslShaderPanelContext } from "../inspector/GlslShaderPanel";
 import {
   buildGradientLayer,
-  defaultGradientLayer,
   defaultGradientStops,
   fillLayerId,
   fillLayerIndex,
@@ -654,8 +649,9 @@ export function PropSlider({
 
 /**
  * design-editor inspector section: divider above, title left, actions right.
- * Without the leading chevron a collapsed section is indistinguishable from a
- * section with nothing to show, so the panel reads as fixed, not expandable.
+ * The chevron appears only when there is content, so a collapsed section is
+ * never mistaken for an empty one — and an empty section offers no control
+ * that does nothing.
  */
 export function PanelSection({
   title,
@@ -669,41 +665,51 @@ export function PanelSection({
   defaultCollapsed?: boolean;
 }) {
   const [collapsed, setCollapsed] = useState(defaultCollapsed);
+  const hasContent = Children.toArray(children).length > 0;
+  const heading = (
+    <h3 className="min-w-0 flex-1 truncate !text-[11px] font-semibold text-foreground">
+      {title}
+    </h3>
+  );
 
   return (
     <section className="shrink-0 border-t border-[var(--design-editor-control-border)] first:border-t-0">
       <div className="flex min-h-9 items-center gap-2 px-3">
-        <button
-          type="button"
-          className="flex min-w-0 flex-1 cursor-pointer items-center gap-1 bg-transparent text-left"
-          onClick={() => setCollapsed((c) => !c)}
-          aria-expanded={!collapsed}
-        >
-          {collapsed ? (
-            <IconChevronRight className="size-3 shrink-0 text-muted-foreground/50 rtl:-scale-x-100" />
-          ) : (
-            <IconChevronDown className="size-3 shrink-0 text-muted-foreground/50" />
-          )}
-          <h3 className="min-w-0 flex-1 truncate !text-[11px] font-semibold text-foreground">
-            {title}
-          </h3>
-        </button>
+        {hasContent ? (
+          <button
+            type="button"
+            className="flex min-w-0 flex-1 cursor-pointer items-center gap-1 bg-transparent text-left"
+            onClick={() => setCollapsed((c) => !c)}
+            aria-expanded={!collapsed}
+          >
+            {collapsed ? (
+              <IconChevronRight className="size-3 shrink-0 text-muted-foreground/50 rtl:-scale-x-100" />
+            ) : (
+              <IconChevronDown className="size-3 shrink-0 text-muted-foreground/50" />
+            )}
+            {heading}
+          </button>
+        ) : (
+          <div className="flex min-w-0 flex-1 items-center gap-1 pl-4">
+            {heading}
+          </div>
+        )}
         {actions ? (
           <div className="flex shrink-0 items-center gap-0.5">{actions}</div>
         ) : null}
       </div>
-      <div
-        className="grid transition-[grid-template-rows] duration-200 ease-[cubic-bezier(0.2,0,0,1)] motion-reduce:transition-none"
-        style={{ gridTemplateRows: collapsed ? "0fr" : "1fr" }}
-      >
-        <div className="overflow-hidden">
-          {children ? (
+      {hasContent ? (
+        <div
+          className="grid transition-[grid-template-rows] duration-200 ease-[cubic-bezier(0.2,0,0,1)] motion-reduce:transition-none"
+          style={{ gridTemplateRows: collapsed ? "0fr" : "1fr" }}
+        >
+          <div className="overflow-hidden">
             <div className="space-y-1.5 px-3 pb-3 pt-0.5 !text-[11px]">
               {children}
             </div>
-          ) : null}
+          </div>
         </div>
-      </div>
+      ) : null}
     </section>
   );
 }

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

@@ -39,10 +39,7 @@ import {
   type ScrubInputChangeMeta,
 } from "../inspector";
 import type { ElementInfo } from "../types";
-import {
-  AppearanceScrubField,
-  CornerRadiusControl,
-} from "./appearance-properties";
+import { AppearanceScrubField } from "./appearance-properties";
 import {
   commitStylePatch,
   FieldTrailer,

package/corpus/templates/design/app/components/design/inspector/AlignmentMatrix.tsx

@@ -1,5 +1,3 @@
-import type { ComponentType } from "react";
-
 import {
   Tooltip,
   TooltipContent,
@@ -41,8 +39,6 @@ export interface AlignmentMatrixProps {
   direction?: FlowDirection;
 }
 
-type MatrixIcon = ComponentType<{ className?: string }>;
-
 const DEFAULT_LABELS: AlignmentMatrixLabels = {
   title: "Align", // i18n-ignore fallback component label
   alignTopLeft: "Align top left", // i18n-ignore fallback component label

package/corpus/templates/design/app/components/design/inspector/AutoLayoutMatrix.tsx

@@ -1,5 +1,5 @@
 import { IconArrowBackUp } from "@tabler/icons-react";
-import { type ReactNode, useState } from "react";
+import { type ReactNode } from "react";
 
 import { Button } from "@/components/ui/button";
 import { Checkbox } from "@/components/ui/checkbox";
@@ -379,6 +379,13 @@ export function AutoLayoutMatrix({
   );
 
   const activeFlow = getFlowOption(value);
+  const activeFlowLabel = {
+    normal: "Normal flow" /* i18n-ignore design inspector label */,
+    vertical: copy.vertical,
+    horizontal: copy.horizontal,
+    grid: "Grid" /* i18n-ignore design inspector label */,
+    mixed: "Mixed" /* i18n-ignore design mixed value */,
+  }[activeFlow];
   const isBlock = activeFlow === "normal";
 
   /** Apply a flow choice, coordinating display + direction + wrap. */
@@ -414,11 +421,13 @@ export function AutoLayoutMatrix({
               <ControlLabel>
                 {"Flow" /* i18n-ignore design inspector label */}
               </ControlLabel>
-              {value.flowMixed ? (
-                <span className="!text-[11px] text-muted-foreground">
-                  {"Mixed" /* i18n-ignore design mixed value */}
-                </span>
-              ) : null}
+              {/* The icon highlight alone does not say which flow is active,
+                  so a Tailwind-named layer reads as "flex" and nothing else. */}
+              <span className="!text-[11px] text-muted-foreground">
+                {value.flowMixed
+                  ? "Mixed" /* i18n-ignore design mixed value */
+                  : activeFlowLabel}
+              </span>
             </div>
             <div className="flex items-center gap-1.5">
               {/* 4-segment flow bar: normal / vertical / horizontal / grid */}

package/corpus/templates/design/app/components/design/inspector/DesignColorPicker.tsx

@@ -61,7 +61,7 @@ import {
   parseImageFillCss,
   type ImageFillValue,
 } from "./ImageFillControls";
-import { ShaderFillsPanel, shaderDescriptorToCss } from "./ShaderFillsPanel";
+import { ShaderFillsPanel } from "./ShaderFillsPanel";
 
 // ─── Public types ──────────────────────────────────────────────────────────────
 
@@ -716,7 +716,7 @@ export function DesignColorPicker({
   const copy = { ...DEFAULT_LABELS, ...labels };
   const color = parseCssColorExtended(value) ?? FALLBACK_COLOR;
   const hsv = rgbaToHsv(color);
-  const hsl = rgbaToHsl(color);
+
   const effectiveOpacity = opacity ?? alphaToOpacity(color.a);
   const blendModeValue = BLEND_MODE_OPTIONS.some(
     (option) => option.value === blendMode,

package/corpus/templates/design/app/components/visual-editor/NodeRewriteProposal.tsx

@@ -21,7 +21,6 @@ import {
   useCallback,
   useEffect,
   useLayoutEffect,
-  useMemo,
   useRef,
   useState,
 } from "react";

package/corpus/templates/design/app/components/visual-editor/ReviewCanvasPins.tsx

@@ -1,4 +1,4 @@
-import { callAction, setClientAppState } from "@agent-native/core/client/hooks";
+import { callAction } from "@agent-native/core/client/hooks";
 import { useT } from "@agent-native/core/client/i18n";
 import {
   buildReviewThreads,