@agent-native/core 0.131.3 → 0.131.5

package/corpus/templates/design/app/components/design/MultiScreenCanvas.tsx

@@ -174,9 +174,11 @@ const EMPTY_SCREEN_IDS: readonly string[] = [];
 // redeclared locally and drifting from the shared constant.
 const MIN_ZOOM = DEFAULT_CANVAS_MIN_ZOOM;
 const MAX_ZOOM = DEFAULT_CANVAS_MAX_ZOOM;
-const ZOOM_SENSITIVITY = 0.01;
-const MAX_WHEEL_ZOOM_DELTA = 120;
 const MAX_WHEEL_PAN_DELTA = 140;
+/** Live counter-scale for constant-size frame chrome, written on the world
+ *  element every gesture frame by applyViewToDom. React supplies the same
+ *  number as the var's fallback, so first paint and SSR are unaffected. */
+const CHROME_SCALE_CSS_VAR = "--an-chrome-scale";
 const PIXEL_GRID_ZOOM = 800;
 import {
   BOARD_SURFACE_BACKGROUND,
@@ -301,8 +303,13 @@ import {
   previewDraftPrimitive,
   shapeClosingHandles,
 } from "./multi-screen/draft-primitives";
+import {
+  drillInCandidateKey,
+  resolveDrillInTarget,
+} from "./multi-screen/drill-in";
 import {
   angleBetween,
+  BREAKPOINT_FRAME_GAP,
   cloneFrameGeometryById,
   deviceViewportFloorForWidth,
   findTopFrameEntryAtPoint,
@@ -340,6 +347,11 @@ import {
 } from "./multi-screen/primitive-drop-target";
 import type { AlignmentGuide, CanvasFrameEntry } from "./multi-screen/types";
 import { vectorEditCanvasToLocalPoint } from "./multi-screen/vector-edit-geometry";
+import {
+  isPinchZoomDelta,
+  resolveExternalZoomAnchor,
+  resolveZoomFactor,
+} from "./multi-screen/zoom-gesture";
 
 /**
  * Imperatively writes a draft primitive's full visual state onto its cached
@@ -909,6 +921,17 @@ export const MultiScreenCanvas = memo(function MultiScreenCanvas({
   // externally-driven (toolbar/keyboard) zoom change without a TDZ error.
   const recomputePenPointerForViewChangeRef = useRef<() => void>(() => {});
   const suppressNextPick = useRef(false);
+  /** Where the last frame-body double-click landed, so consecutive
+   *  double-clicks descend one level further instead of re-selecting the same
+   *  layer. Reset whenever the pointer moves to a different screen. */
+  const drillInTargetRef = useRef<{ screenId: string; key: string } | null>(
+    null,
+  );
+  /** Generation counter for drill-in requests. Collecting candidates is an
+   *  async iframe round-trip, so ANY newer selection — another double-click, a
+   *  plain click, a marquee — must invalidate an in-flight one, or its late
+   *  reply overwrites the selection the user actually made. */
+  const drillInRequestRef = useRef(0);
   const feedbackTimerRef = useRef<number | null>(null);
   const pendingWheelGestureRef = useRef<PendingWheelGesture | null>(null);
   const wheelGestureFrameRef = useRef<number | null>(null);
@@ -1319,7 +1342,10 @@ export const MultiScreenCanvas = memo(function MultiScreenCanvas({
         : referenceId
           ? frameGeometryRef.current[referenceId]
           : undefined;
-    const cursor = activeGeometry
+    // A screen's frame is routinely much taller than the viewport, so its centre
+    // is often far off-screen; anchoring there holds a point the user cannot see
+    // and pushes the visible content out of frame entirely.
+    const frameCenter = activeGeometry
       ? canvasToScreenPoint(
           {
             x: activeGeometry.x + activeGeometry.width / 2,
@@ -1329,9 +1355,11 @@ export const MultiScreenCanvas = memo(function MultiScreenCanvas({
           { x: 0, y: 0 },
           SURFACE_PADDING,
         )
-      : rect
-        ? { x: rect.width / 2, y: rect.height / 2 }
-        : { x: 0, y: 0 };
+      : null;
+    const cursor = resolveExternalZoomAnchor({
+      frameCenter,
+      surfaceSize: { width: rect?.width ?? 0, height: rect?.height ?? 0 },
+    });
     const nextPan = getPanForZoomToCursor({
       pan: panRef.current,
       cursor,
@@ -3364,6 +3392,9 @@ export const MultiScreenCanvas = memo(function MultiScreenCanvas({
     (e: React.MouseEvent) => {
       e.preventDefault();
       e.stopPropagation();
+      // Supersede any in-flight drill-in: its reply must not overwrite this
+      // gesture's selection (see drillInRequestRef).
+      drillInRequestRef.current += 1;
       const originCanvas = getCanvasPoint(e.clientX, e.clientY);
       let latestRect = normalizeRectFromPoints(originCanvas, originCanvas);
       let layerCandidates: CanvasLayerMarqueeCandidate[] = [];
@@ -6082,6 +6113,8 @@ export const MultiScreenCanvas = memo(function MultiScreenCanvas({
         suppressNextPick.current = false;
         return;
       }
+      // Supersede any in-flight drill-in: its reply must not overwrite this pick.
+      drillInRequestRef.current += 1;
 
       if (e.shiftKey) {
         updateSelectedDraftIds(() => []);
@@ -6115,7 +6148,7 @@ export const MultiScreenCanvas = memo(function MultiScreenCanvas({
     ],
   );
 
-  const handleFrameDoubleClick = useCallback(
+  const handleFrameInteract = useCallback(
     (id: string, e: React.MouseEvent<HTMLElement>) => {
       e.preventDefault();
       e.stopPropagation();
@@ -6137,6 +6170,65 @@ export const MultiScreenCanvas = memo(function MultiScreenCanvas({
     ],
   );
 
+  /**
+   * Figma parity: double-clicking a frame's body descends into its layers so
+   * the inspector shows the thing under the pointer. It deliberately does NOT
+   * enter Interact — that is the frame label's own button (onEdit). Locked
+   * screens have no selectable children to descend into, so they keep the
+   * Interact behavior.
+   */
+  const handleFrameEnter = useCallback(
+    (id: string, e: React.MouseEvent<HTMLElement>) => {
+      e.preventDefault();
+      e.stopPropagation();
+      if (lockedScreenIdSet.has(id)) {
+        onEdit?.(id);
+        return;
+      }
+      const point = getCanvasPoint(e.clientX, e.clientY);
+      const previousKey =
+        drillInTargetRef.current?.screenId === id
+          ? drillInTargetRef.current.key
+          : null;
+      const requestId = drillInRequestRef.current + 1;
+      drillInRequestRef.current = requestId;
+      void collectLayerMarqueeCandidates(new Set([id])).then((candidates) => {
+        if (drillInRequestRef.current !== requestId) return;
+        const target = resolveDrillInTarget({
+          candidates,
+          screenId: id,
+          point,
+          previousKey,
+        });
+        if (!target) {
+          // Nothing selectable under the pointer (e.g. an empty frame). Leave
+          // the frame itself selected rather than falling back to Interact.
+          drillInTargetRef.current = null;
+          return;
+        }
+        drillInTargetRef.current = {
+          screenId: id,
+          key: drillInCandidateKey(target),
+        };
+        updateSelectedDraftIds(() => []);
+        updateSelectedIds(() => []);
+        onLayerMarqueeSelectionChange?.(
+          [{ screenId: target.screenId, info: target.info }],
+          { source: "pointer" },
+        );
+      });
+    },
+    [
+      collectLayerMarqueeCandidates,
+      getCanvasPoint,
+      lockedScreenIdSet,
+      onEdit,
+      onLayerMarqueeSelectionChange,
+      updateSelectedDraftIds,
+      updateSelectedIds,
+    ],
+  );
+
   const beginDuplicateGesture = useCallback(
     (screen: ScreenFile, display: string, e: React.MouseEvent<HTMLElement>) => {
       if (readOnly) return;
@@ -6558,6 +6650,16 @@ export const MultiScreenCanvas = memo(function MultiScreenCanvas({
       // 2D translate (not translate3d) so the layer is not GPU-pinned to a
       // stale low-res raster — keeps zoomed-in content crisp.
       world.style.transform = `translate(${p.x}px, ${p.y}px) scale(${nextScale})`;
+      // Counter-scale for constant-size chrome (frame labels, the Interact
+      // button). This has to be written on the SAME imperative tick as the
+      // world transform: the React `chromeScale` it falls back to is only
+      // reconciled by the debounced commitView, so during a gesture the labels
+      // rode the world scale and then eased back — the "text/labels jump in
+      // sizing" the canvas zoom was reported for.
+      world.style.setProperty(
+        CHROME_SCALE_CSS_VAR,
+        String(nextScale > 0 ? 1 / nextScale : 1),
+      );
     }
     const grid = pixelGridRef.current;
     if (grid) {
@@ -6764,13 +6866,8 @@ export const MultiScreenCanvas = memo(function MultiScreenCanvas({
 
     if (gesture.mode === "zoom") {
       const currentZoom = zoomRef.current;
-      const zoomDeltaY = clamp(
-        gesture.deltaY,
-        -MAX_WHEEL_ZOOM_DELTA,
-        MAX_WHEEL_ZOOM_DELTA,
-      );
       const nextZoom = clamp(
-        currentZoom * Math.exp(-zoomDeltaY * ZOOM_SENSITIVITY),
+        currentZoom * resolveZoomFactor(gesture.deltaY, gesture.pinch),
         MIN_ZOOM,
         MAX_ZOOM,
       );
@@ -6803,10 +6900,18 @@ export const MultiScreenCanvas = memo(function MultiScreenCanvas({
   const enqueueWheelGesture = useCallback(
     (gesture: PendingWheelGesture) => {
       const pending = pendingWheelGestureRef.current;
-      if (pending?.mode === "zoom" && gesture.mode === "zoom") {
+      // Only accumulate like with like: a pinch delta and a wheel notch map to
+      // zoom through different curves, so summing them would apply one curve to
+      // the other's units.
+      if (
+        pending?.mode === "zoom" &&
+        gesture.mode === "zoom" &&
+        pending.pinch === gesture.pinch
+      ) {
         pendingWheelGestureRef.current = {
           mode: "zoom",
           deltaY: pending.deltaY + gesture.deltaY,
+          pinch: gesture.pinch,
           cursor: gesture.cursor,
           clientX: gesture.clientX,
           clientY: gesture.clientY,
@@ -6852,14 +6957,13 @@ export const MultiScreenCanvas = memo(function MultiScreenCanvas({
         // no forced style/layout read on the hot pan path.
         const rect = surfaceRef.current?.getBoundingClientRect();
         if (!rect) return;
-        const zoomDeltaY = clamp(
-          delta.y,
-          -MAX_WHEEL_ZOOM_DELTA,
-          MAX_WHEEL_ZOOM_DELTA,
-        );
+        // Raw delta: the per-frame clamp lives on the zoom FACTOR now (see
+        // resolveZoomFactor), so accumulation stays frame-rate independent.
+        // Line/page delta modes are always discrete wheels, never a pinch.
         enqueueWheelGesture({
           mode: "zoom",
-          deltaY: zoomDeltaY,
+          deltaY: delta.y,
+          pinch: args.deltaMode === 0 && isPinchZoomDelta(args.deltaY),
           cursor: {
             x: args.clientX - rect.left,
             y: args.clientY - rect.top,
@@ -7935,7 +8039,8 @@ export const MultiScreenCanvas = memo(function MultiScreenCanvas({
               chromeScale={chromeScale}
               chromeSettling={chromeSettling}
               onPick={handleFrameClick}
-              onEdit={handleFrameDoubleClick}
+              onEdit={handleFrameInteract}
+              onEnterFrame={handleFrameEnter}
               onStartFrameDrag={beginFrameDrag}
               onStartResize={beginResize}
               onStartRotate={beginRotate}
@@ -9248,7 +9353,12 @@ interface ScreenProps {
    *  descriptor is retained for an evicted screen's revisit. */
   cullTier: ScreenCullTier;
   onPick: (id: string, e: React.MouseEvent<HTMLElement>) => void;
+  /** Explicit Interact entry — the frame label's own button and the frame-label
+   *  row. Deliberately NOT the frame body's double-click: see onEnterFrame. */
   onEdit: (id: string, e: React.MouseEvent<HTMLElement>) => void;
+  /** Double-click on the frame body. Descends into the frame's layers instead
+   *  of entering Interact, matching Figma. */
+  onEnterFrame: (id: string, e: React.MouseEvent<HTMLElement>) => void;
   onStartFrameDrag: (id: string, e: React.MouseEvent) => void;
   onStartResize: (
     id: string,
@@ -9262,12 +9372,13 @@ interface ScreenProps {
     e: React.MouseEvent<HTMLElement>,
   ) => void;
   // Id-first (screenId, widthPx) shape, same as MultiScreenCanvas's own
-  // onAddBreakpoint/onActiveBreakpointChange props (PF18): Screen binds
-  // screen.id itself when calling these, so the parent can pass the same
-  // stable function reference for every screen instead of allocating a new
-  // per-screen `(widthPx) => onAddBreakpoint(screen.id, widthPx)` closure on
-  // every render, which defeated memo(Screen) for every screen every time.
-  onAddBreakpoint?: (screenId: string, widthPx: number) => void;
+  // onActiveBreakpointChange prop (PF18): Screen binds screen.id itself when
+  // calling these, so the parent can pass the same stable function reference
+  // for every screen instead of allocating a new per-screen closure on every
+  // render, which defeated memo(Screen) for every screen every time.
+  // onAddBreakpoint is design-scoped and takes no screen id at all — see its
+  // doc on MultiScreenCanvasProps.
+  onAddBreakpoint?: (widthPx: number) => void;
   onActiveBreakpointChange?: (
     screenId: string,
     widthPx: number | undefined,
@@ -9309,6 +9420,7 @@ const Screen = memo(function Screen({
   chromeSettling,
   onPick,
   onEdit,
+  onEnterFrame,
   onStartFrameDrag,
   onStartResize,
   onStartRotate,
@@ -9483,9 +9595,9 @@ const Screen = memo(function Screen({
           style={{
             width: labelInfoMaxWidth,
             maxWidth: labelInfoMaxWidth,
-            transform: `translateY(-50%) scale(${chromeScale})`,
+            transform: `translateY(-50%) scale(var(${CHROME_SCALE_CSS_VAR}, ${chromeScale}))`,
             transformOrigin: "left center",
-            transition: getChromeLabelTransition(chromeSettling),
+            transition: getChromeLabelTransition(),
           }}
         >
           {/* B5-3: the leading dot/bullet before the screen label was pure
@@ -9555,9 +9667,9 @@ const Screen = memo(function Screen({
           )}
           style={{
             maxWidth: fullViewMaxWidth,
-            transform: `translateY(-50%) scale(${chromeScale})`,
+            transform: `translateY(-50%) scale(var(${CHROME_SCALE_CSS_VAR}, ${chromeScale}))`,
             transformOrigin: "right center",
-            transition: getChromeLabelTransition(chromeSettling),
+            transition: getChromeLabelTransition(),
           }}
           aria-label={frameActionLabel}
           title={frameActionLabel}
@@ -9599,7 +9711,7 @@ const Screen = memo(function Screen({
           }
           e.preventDefault();
           e.stopPropagation();
-          onEdit(screen.id, e);
+          onEnterFrame(screen.id, e);
         }}
         onMouseDown={(e) => {
           if (isInteractiveScreenContentTarget(e.target)) {
@@ -9818,11 +9930,7 @@ const Screen = memo(function Screen({
               ? (widthPx) => onActiveBreakpointChange(screen.id, widthPx)
               : undefined
           }
-          onAddBreakpoint={
-            onAddBreakpoint
-              ? (widthPx) => onAddBreakpoint(screen.id, widthPx)
-              : undefined
-          }
+          onAddBreakpoint={onAddBreakpoint}
           onRemoveBreakpoint={
             onRemoveBreakpoint
               ? (widthPx) => onRemoveBreakpoint(screen.id, widthPx)
@@ -9893,6 +10001,7 @@ function areScreenPropsEqual(prev: ScreenProps, next: ScreenProps) {
     prev.chromeSettling === next.chromeSettling &&
     prev.onPick === next.onPick &&
     prev.onEdit === next.onEdit &&
+    prev.onEnterFrame === next.onEnterFrame &&
     prev.onStartFrameDrag === next.onStartFrameDrag &&
     prev.onStartResize === next.onStartResize &&
     prev.onStartRotate === next.onStartRotate &&
@@ -9911,8 +10020,6 @@ function areScreenPropsEqual(prev: ScreenProps, next: ScreenProps) {
 
 // ── Breakpoint preview row (§6.4) ────────────────────────────────────────────
 
-/** Gap between adjacent breakpoint frames in canvas pixels. */
-const BREAKPOINT_FRAME_GAP = 24;
 const BREAKPOINT_LABEL_WITH_WIDTH_MIN_FRAME_WIDTH = 128;
 
 /**
@@ -10156,9 +10263,9 @@ function BreakpointPreviewRow({
                 data-frame-label
                 className="absolute left-1 top-1/2 flex min-w-0 max-w-[calc(100%-28px)] items-center gap-1.5"
                 style={{
-                  transform: `translateY(-50%) scale(${chromeScale})`,
+                  transform: `translateY(-50%) scale(var(${CHROME_SCALE_CSS_VAR}, ${chromeScale}))`,
                   transformOrigin: "left center",
-                  transition: getChromeLabelTransition(chromeSettling),
+                  transition: getChromeLabelTransition(),
                 }}
               >
                 <span
@@ -10200,7 +10307,7 @@ function BreakpointPreviewRow({
                 <div
                   className="absolute right-1 top-1/2 z-30"
                   style={{
-                    transform: `translateY(-50%) scale(${chromeScale})`,
+                    transform: `translateY(-50%) scale(var(${CHROME_SCALE_CSS_VAR}, ${chromeScale}))`,
                     transformOrigin: "right center",
                   }}
                 >
@@ -10302,7 +10409,7 @@ function BreakpointPreviewRow({
               }}
               onDoubleClick={(e) => {
                 // Item 8b — full view for THIS breakpoint: same double-click
-                // gesture as a regular screen's card (handleFrameDoubleClick),
+                // gesture as a regular screen's card (handleFrameInteract),
                 // but targeting the breakpoint's own width so the editor
                 // opens single-screen mode scoped to it instead of Base.
                 e.preventDefault();
@@ -10336,7 +10443,7 @@ function BreakpointPreviewRow({
                   data-frame-full-view
                   className="absolute right-1 top-1 z-30 flex h-5 w-5 shrink-0 items-center justify-center rounded-md border border-border bg-background/95 text-muted-foreground opacity-0 shadow-sm transition-opacity hover:bg-accent hover:text-accent-foreground focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring group-hover/artboard:opacity-100"
                   style={{
-                    transform: `scale(${chromeScale})`,
+                    transform: `scale(var(${CHROME_SCALE_CSS_VAR}, ${chromeScale}))`,
                     transformOrigin: "right center",
                   }}
                   aria-label={frameActionLabel}
@@ -10472,10 +10579,17 @@ function BreakpointPreviewRow({
               "hover:border-[var(--design-editor-accent-color)] hover:text-[var(--design-editor-accent-color)]",
             )}
             style={{
-              transform: `scale(${chromeScale})`,
+              transform: `scale(var(${CHROME_SCALE_CSS_VAR}, ${chromeScale}))`,
               transformOrigin: "center",
             }}
-            title={`Add ${breakpointLabel(nextWidth)} breakpoint (${nextWidth}px)`}
+            // Says "to all screens" because that is what it does: a design has
+            // one breakpoint set, so this is not scoped to the frame it renders
+            // beside. The old per-frame wording made every frame suddenly
+            // sprouting the new width look like a bug.
+            title={t("multiScreenCanvas.addBreakpointToAllScreens", {
+              label: breakpointLabel(nextWidth),
+              width: nextWidth,
+            })}
             onClick={(e) => {
               e.stopPropagation();
               onAddBreakpoint(nextWidth);

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

@@ -12177,7 +12177,11 @@ declare var __SELECTED_LAYER_DRAG_PRIORITY__: boolean;
         typeof e.data.correlationId === "string" ? e.data.correlationId : "";
       var textEditStatusNodeId: string =
         typeof e.data.nodeId === "string" ? e.data.nodeId : "";
-      var textEditStatus: "active" | "done" | false = false;
+      // "missing" (this document has no such node) stays distinct from a bare
+      // `false` (node is here, just not being edited). The host's retry ladder
+      // needs the difference: the first is a still-propagating insert or the
+      // wrong iframe, the second means the user has not typed yet.
+      var textEditStatus: "active" | "done" | "missing" | false = "missing";
       if (textEditStatusNodeId) {
         var escapedTextEditStatusNodeId = textEditStatusNodeId
           .replace(/\\/g, "\\\\")
@@ -12201,6 +12205,8 @@ declare var __SELECTED_LAYER_DRAG_PRIORITY__: boolean;
           (textEditStatusNode.textContent ?? "").trim().length > 0
         ) {
           textEditStatus = "done";
+        } else if (textEditStatusNode) {
+          textEditStatus = false;
         }
       }
       (window.parent as Window).postMessage(

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

@@ -28,6 +28,11 @@ import {
   PopoverContent,
   PopoverTrigger,
 } from "@/components/ui/popover";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
 import { cn } from "@/lib/utils";
 
 import { ScrubInput } from "../inspector";
@@ -37,6 +42,7 @@ import {
   type GlslShaderPanelContext,
 } from "../inspector/GlslShaderPanel";
 import type { ElementInfo } from "../types";
+import { isTextElement } from "./element-classification";
 import { elementStableKey } from "./element-identity";
 import { FieldTrailer } from "./field-primitives";
 import { splitCssLayers } from "./fill-gradient-helpers";
@@ -155,6 +161,26 @@ export function serializeShadowLayers(layers: ShadowLayer[]) {
     .join(", ");
 }
 
+/**
+ * `text-shadow` form of the same layers: offsets, blur, colour. CSS text-shadow
+ * has no spread and no inset, so emitting the box-shadow string would produce a
+ * declaration the browser drops entirely.
+ */
+export function serializeTextShadowLayers(layers: ShadowLayer[]) {
+  const visible = layers.filter((layer) => !layer.inset);
+  if (!visible.length) return "none";
+  return visible
+    .map((layer) =>
+      [
+        `${roundToOneDecimal(layer.x)}px`,
+        `${roundToOneDecimal(layer.y)}px`,
+        `${Math.max(0, roundToOneDecimal(layer.blur))}px`,
+        layer.color,
+      ].join(" "),
+    )
+    .join(", ");
+}
+
 export function readBlurFilter(value: string | undefined): number {
   const match = value?.match(/blur\((-?(?:\d+(?:\.\d+)?|\.\d+))px\)/);
   return match ? Math.max(0, Number(match[1])) : 0;
@@ -479,13 +505,27 @@ export function EffectsProperties({
   const effectStashKey = elementStableKey(element);
   const layerBlurStashKey = `${effectStashKey}:filter:blur`;
   const backdropBlurStashKey = `${effectStashKey}:backdrop-filter:blur`;
+  const shadowTargetsText = isTextElement(element);
+  // Read from the same property the writer targets, or the rows would show a
+  // box-shadow that is no longer what this element uses.
   const shadowLayers = effectsAreMixed
     ? []
-    : parseShadowLayers(styles.boxShadow);
+    : parseShadowLayers(
+        shadowTargetsText ? styles.textShadow : styles.boxShadow,
+      );
   const setShadowLayers = (layers: ShadowLayer[], meta?: StyleChangeMeta) => {
     setHiddenEffectStash((stash) =>
       remapIndexedShadowStash(stash, effectStashKey, layers),
     );
+    // A shadow on text belongs on the glyphs. box-shadow paints the element's
+    // BOX, which on a text node reads as a rectangle floating behind the words
+    // instead of a shadow on the letters.
+    if (shadowTargetsText) {
+      const textShadow = serializeTextShadowLayers(layers);
+      if (onStylesChange) onStylesChange({ textShadow }, meta);
+      else onStyleChange("textShadow", textShadow, meta);
+      return;
+    }
     const boxShadow = serializeShadowLayers(layers);
     if (onStylesChange) onStylesChange({ boxShadow }, meta);
     else onStyleChange("boxShadow", boxShadow, meta);
@@ -551,17 +591,24 @@ export function EffectsProperties({
       title={t("editPanel.sections.effects")}
       actions={
         <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <Button
-              type="button"
-              variant="ghost"
-              size="icon"
-              className="size-6 cursor-pointer rounded-md text-muted-foreground hover:text-foreground"
-              aria-label={t("editPanel.labels.addLayer")}
-            >
-              <IconPlus className="size-3.5" />
-            </Button>
-          </DropdownMenuTrigger>
+          {/* Tooltip as well as aria-label: this was the one section-header +
+              that explained itself to screen readers only. */}
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <DropdownMenuTrigger asChild>
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="icon"
+                  className="size-6 cursor-pointer rounded-md text-muted-foreground hover:text-foreground"
+                  aria-label={t("editPanel.labels.addEffect")}
+                >
+                  <IconPlus className="size-3.5" />
+                </Button>
+              </DropdownMenuTrigger>
+            </TooltipTrigger>
+            <TooltipContent>{t("editPanel.labels.addEffect")}</TooltipContent>
+          </Tooltip>
           <DropdownMenuContent align="end" className="min-w-44">
             <DropdownMenuItem
               className="gap-2 !text-[11px]"

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

@@ -279,7 +279,7 @@ export function FillProperties({
             <IconLayoutGrid className="size-3.5" />
           </SectionIconButton>
           <SectionIconButton
-            label={t("editPanel.labels.addLayer")}
+            label={t("editPanel.labels.addFill")}
             onClick={() => {
               if (fillIsMixed) {
                 commitStylePatch(

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

@@ -28,36 +28,41 @@ export function SectionIconButton({
 
   return (
     <Tooltip>
+      {/* The span carries the hover, not the Button: a disabled Button stops
+          pointer events, so a disabled control would silently lose the very
+          tooltip that explains why it is disabled. */}
       <TooltipTrigger asChild>
-        <Button
-          type="button"
-          variant="ghost"
-          size="icon"
-          className={cn(
-            "size-6 shrink-0 cursor-pointer rounded-md text-muted-foreground hover:text-foreground disabled:cursor-not-allowed",
-            className,
-          )}
-          disabled={disabled}
-          onPointerDown={(event) => {
-            if (!activateOnPointerDown || disabled || event.button !== 0) {
-              return;
-            }
-            pointerActivatedRef.current = true;
-            event.preventDefault();
-            event.stopPropagation();
-            onClick?.();
-          }}
-          onClick={() => {
-            if (pointerActivatedRef.current) {
-              pointerActivatedRef.current = false;
-              return;
-            }
-            onClick?.();
-          }}
-          aria-label={label}
-        >
-          {children}
-        </Button>
+        <span className="flex shrink-0">
+          <Button
+            type="button"
+            variant="ghost"
+            size="icon"
+            className={cn(
+              "size-6 shrink-0 cursor-pointer rounded-md text-muted-foreground hover:text-foreground disabled:cursor-not-allowed",
+              className,
+            )}
+            disabled={disabled}
+            onPointerDown={(event) => {
+              if (!activateOnPointerDown || disabled || event.button !== 0) {
+                return;
+              }
+              pointerActivatedRef.current = true;
+              event.preventDefault();
+              event.stopPropagation();
+              onClick?.();
+            }}
+            onClick={() => {
+              if (pointerActivatedRef.current) {
+                pointerActivatedRef.current = false;
+                return;
+              }
+              onClick?.();
+            }}
+            aria-label={label}
+          >
+            {children}
+          </Button>
+        </span>
       </TooltipTrigger>
       <TooltipContent>{label}</TooltipContent>
     </Tooltip>

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

@@ -352,7 +352,7 @@ export function StrokeProperties({
       title={t("editPanel.sections.stroke")}
       actions={
         <SectionIconButton
-          label={t("editPanel.labels.addLayer")}
+          label={t("editPanel.labels.addStroke")}
           onClick={() => {
             if (strokeIsMixed) {
               commitStylePatch(
@@ -537,7 +537,7 @@ function TextStrokeProperties({
       title={t("editPanel.sections.stroke")}
       actions={
         <SectionIconButton
-          label={t("editPanel.labels.addLayer")}
+          label={t("editPanel.labels.addStroke")}
           onClick={() => {
             // Kebab-case keys required: camelCase webkit props get mangled by
             // normalizeStyleProperty (camel→kebab drops the leading dash) and