npm - @agent-native/core - Versions diffs - 0.90.1 → 0.90.2 - Mend

@agent-native/core 0.90.1 → 0.90.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (295) hide show

package/corpus/templates/design/app/components/design/multi-screen/vector-edit-geometry.ts ADDED Viewed

@@ -0,0 +1,21 @@
+import type { Point } from "./types";
+/** Path-local point -> canvas-space point, given the path's canvas origin. */
+export function vectorEditLocalToCanvasPoint(
+  local: Point,
+  originCanvas: Point,
+): Point {
+  return { x: originCanvas.x + local.x, y: originCanvas.y + local.y };
+}
+/** Canvas-space point -> path-local point, given the path's canvas origin.
+ *  Inverse of `vectorEditLocalToCanvasPoint`. */
+export function vectorEditCanvasToLocalPoint(
+  canvasPoint: Point,
+  originCanvas: Point,
+): Point {
+  return {
+    x: canvasPoint.x - originCanvas.x,
+    y: canvasPoint.y - originCanvas.y,
+  };
+}

package/corpus/templates/design/app/components/design/types.ts CHANGED Viewed

@@ -15,6 +15,21 @@ export interface ElementInfo {
   componentName?: string;
   id?: string;
   sourceId?: string;
+  /**
+   * Node-id integrity (id-on-demand): a durable candidate id the bridge minted
+   * for this element because it has no stable `data-agent-native-node-id`
+   * (or other stable source id) at all — common on AI-generated screens,
+   * where every id-keyed host operation (move/reorder, style commits that
+   * resolve a targetNode, motion tracks, scrub) otherwise silently no-ops or
+   * throws `Node with data-agent-native-node-id="" not found in sourceHtml`.
+   * Only present when `sourceId` is absent/empty. The host should persist
+   * this value into the source as the element's real
+   * `data-agent-native-node-id` the moment it sees one (see
+   * DesignEditor.tsx's selection handlers), through the same guarded write
+   * path every other edit uses — after that every subsequent id-keyed op
+   * against this element resolves normally via `sourceId`.
+   */
+  pendingNodeId?: string;
   selector?: string;
   classes: string[];
   computedStyles: Record<string, string>;

package/corpus/templates/design/app/components/editor/PromptDialog.tsx CHANGED Viewed

@@ -339,6 +339,33 @@ function isNestedPromptPopoverTarget(target: EventTarget | null) {
   );
 }
+// While a nested Radix Select/Popover/Dropdown is open, Radix locks
+// `pointer-events` on everything outside its own portalled content so only
+// that content (and its trigger) remain interactive. That lockout is what
+// lets the interaction happen at all, but it also means the pointer/focus
+// event that reaches our `onInteractOutside` handler resolves its `target`
+// to `<html>`/`document` instead of the element the user actually clicked —
+// the real target sits under a `pointer-events: none` ancestor, so the
+// browser reports the outermost still-hit-testable node. That target fails
+// any `closest()` containment check, so the click looks "outside" the
+// dialog and dismisses it even though the user never left the popover.
+//
+// Rather than pattern-match on the resolved (and unreliable) target, check
+// whether any of our nested portalled surfaces are currently open in the
+// DOM — they're stamped with the same data attributes whether or not the
+// interact-outside target correctly resolved into them. If one is open,
+// this is never a genuine outside click.
+function hasOpenNestedPromptPopoverSurface() {
+  if (typeof document === "undefined") return false;
+  return Boolean(
+    document.querySelector(
+      '[data-agent-native-composer-popover][data-state="open"],' +
+        "[data-assets-picker-dialog]," +
+        '[data-agent-native-prompt-select][data-state="open"]',
+    ),
+  );
+}
 export default function PromptPopover({
   open,
   onOpenChange,
@@ -363,6 +390,38 @@ export default function PromptPopover({
   const [pickedAssets, setPickedAssets] = useState<UploadedFile[]>([]);
   const [selectedUploadFiles, setSelectedUploadFiles] = useState<File[]>([]);
   const [assetsPickerOpen, setAssetsPickerOpen] = useState(false);
+  // While the nested design-system Select is open, Radix disables pointer
+  // events on everything else and the click that closes the Select also
+  // moves focus back to its trigger. That focus-return is itself reported to
+  // the popover's dismissable layer as a "focus outside" interaction — and it
+  // fires *after* the Select has already unmounted its portalled content, so
+  // by then there is nothing left in the DOM for `onInteractOutside` to
+  // recognize as "still nested and open". Latch a short-lived flag the
+  // instant the Select reports closing, and have the popover's
+  // interact-outside guard also honor that flag so the popover survives the
+  // Select's own close-triggered focus shuffle. See PromptDialog R87/R91.
+  const justClosedNestedSelectRef = useRef(false);
+  const clearJustClosedNestedSelectTimeoutRef = useRef<ReturnType<
+    typeof setTimeout
+  > | null>(null);
+  const markNestedSelectJustClosed = useCallback(() => {
+    justClosedNestedSelectRef.current = true;
+    if (clearJustClosedNestedSelectTimeoutRef.current != null) {
+      clearTimeout(clearJustClosedNestedSelectTimeoutRef.current);
+    }
+    clearJustClosedNestedSelectTimeoutRef.current = setTimeout(() => {
+      justClosedNestedSelectRef.current = false;
+      clearJustClosedNestedSelectTimeoutRef.current = null;
+    }, 300);
+  }, []);
+  useEffect(
+    () => () => {
+      if (clearJustClosedNestedSelectTimeoutRef.current != null) {
+        clearTimeout(clearJustClosedNestedSelectTimeoutRef.current);
+      }
+    },
+    [],
+  );
   useEffect(() => {
     if (open) return;
@@ -502,10 +561,48 @@ export default function PromptPopover({
     [assetsPickerOpen, onOpenChange],
   );
-  const hasVirtualAnchor = !centered && Boolean(anchorRef?.current);
-  const virtualAnchorRef = anchorRef as React.RefObject<{
-    getBoundingClientRect: () => DOMRect;
-  }>;
+  const hasLiveVirtualAnchor = !centered && Boolean(anchorRef?.current);
+  // Radix keeps the closed popover mounted while the exit animation plays, but
+  // callers may clear `anchorRef` as soon as they close it. Latch the anchor
+  // mode from the last open render so the closing popover never swaps over to
+  // the static fallback anchor mid-exit (which re-anchored the fading popover
+  // to the top-left corner of the screen).
+  const anchorModeWhileOpenRef = useRef(hasLiveVirtualAnchor);
+  if (open) {
+    anchorModeWhileOpenRef.current = hasLiveVirtualAnchor;
+  }
+  const hasVirtualAnchor = open
+    ? hasLiveVirtualAnchor
+    : anchorModeWhileOpenRef.current;
+  // Stable virtual anchor that measures the live anchor element while it is
+  // attached and falls back to the last good rect afterwards. The anchor
+  // element can unmount on unrelated sidebar re-renders, and the ref can be
+  // cleared during the exit animation; measuring a detached element returns a
+  // zero rect, which used to reposition the popover to the viewport origin.
+  const latestAnchorRef = useRef(anchorRef);
+  latestAnchorRef.current = anchorRef;
+  const lastAnchorRectRef = useRef<DOMRect | null>(null);
+  const [virtualAnchorRef] = useState<
+    React.RefObject<{ getBoundingClientRect: () => DOMRect }>
+  >(() => ({
+    current: {
+      getBoundingClientRect: () => {
+        const el = latestAnchorRef.current?.current;
+        if (el?.isConnected) {
+          const rect = el.getBoundingClientRect();
+          if (rect.width > 0 || rect.height > 0) {
+            lastAnchorRectRef.current = rect;
+            return rect;
+          }
+        }
+        return (
+          lastAnchorRectRef.current ??
+          new DOMRect(window.innerWidth / 2, window.innerHeight / 2, 0, 0)
+        );
+      },
+    },
+  }));
   return (
     <Popover open={open} onOpenChange={handlePopoverOpenChange}>
@@ -539,7 +636,11 @@ export default function PromptPopover({
           if (assetsPickerOpen) event.preventDefault();
         }}
         onInteractOutside={(event) => {
-          if (isNestedPromptPopoverTarget(event.target)) {
+          if (
+            isNestedPromptPopoverTarget(event.target) ||
+            hasOpenNestedPromptPopoverSurface() ||
+            justClosedNestedSelectRef.current
+          ) {
             event.preventDefault();
           }
         }}
@@ -588,6 +689,9 @@ export default function PromptPopover({
                   onValueChange={(value) =>
                     onDesignSystemChange?.(value === "none" ? null : value)
                   }
+                  onOpenChange={(nextOpen) => {
+                    if (!nextOpen) markNestedSelectJustClosed();
+                  }}
                   disabled={designSystemsLoading}
                 >
                   <SelectTrigger className="h-8 min-w-0 flex-1 text-xs">

package/corpus/templates/design/app/global.css CHANGED Viewed

@@ -36,11 +36,11 @@
   --sidebar-accent-foreground: 0 0% 15%;
   --sidebar-border: 0 0% 90%;
   --sidebar-ring: 0 0% 40%;
-  --design-editor-accent-color: hsl(213 91% 67%);
-  --design-editor-accent-hover-color: hsl(213 72% 56%);
+  --design-editor-accent-color: hsl(205 100% 53%);
+  --design-editor-accent-hover-color: hsl(205 81% 42%);
   --design-editor-selection-color: color-mix(
     in srgb,
-    hsl(213 91% 67%) 14%,
+    hsl(205 100% 53%) 14%,
     transparent
   );
   --design-editor-component-color: hsl(263 84% 64%);
@@ -69,7 +69,7 @@
   );
   --design-editor-selected-subtree-color: color-mix(
     in srgb,
-    hsl(213 91% 67%) 9%,
+    hsl(205 100% 53%) 9%,
     transparent
   );
   --design-editor-panel-divider-color: color-mix(
@@ -122,11 +122,11 @@
   --sidebar-accent-foreground: 0 0% 90%;
   --sidebar-border: 0 0% 20%;
   --sidebar-ring: 0 0% 60%;
-  --design-editor-accent-color: hsl(213 91% 67%);
-  --design-editor-accent-hover-color: hsl(213 72% 56%);
+  --design-editor-accent-color: hsl(205 100% 53%);
+  --design-editor-accent-hover-color: hsl(205 81% 42%);
   --design-editor-selection-color: color-mix(
     in srgb,
-    hsl(213 91% 67%) 24%,
+    hsl(205 100% 53%) 24%,
     transparent
   );
   --design-editor-component-color: hsl(263 88% 74%);
@@ -151,7 +151,7 @@
   );
   --design-editor-selected-subtree-color: color-mix(
     in srgb,
-    hsl(213 91% 67%) 18%,
+    hsl(205 100% 53%) 18%,
     transparent
   );
   --design-editor-panel-divider-color: hsl(0 0% 22%);

package/corpus/templates/design/app/hooks/useDesignHotkeys.ts CHANGED Viewed

@@ -41,6 +41,24 @@ export interface DesignHotkeyOpacityDetails extends DesignHotkeyDetails {
   opacity: number;
 }
+export type DesignHotkeyAlignEdge =
+  | "left"
+  | "center-h"
+  | "right"
+  | "top"
+  | "center-v"
+  | "bottom";
+export interface DesignHotkeyAlignDetails extends DesignHotkeyDetails {
+  edge: DesignHotkeyAlignEdge;
+}
+export type DesignHotkeyDistributeAxis = "horizontal" | "vertical";
+export interface DesignHotkeyDistributeDetails extends DesignHotkeyDetails {
+  axis: DesignHotkeyDistributeAxis;
+}
 export type DesignHotkeyTarget = Window | Document | HTMLElement;
 export type DesignHotkeyHandler = (details: DesignHotkeyDetails) => void;
 export type DesignHotkeyToolHandler = (
@@ -54,6 +72,12 @@ export type DesignHotkeyTabHandler = (details: DesignHotkeyTabDetails) => void;
 export type DesignHotkeyOpacityHandler = (
   details: DesignHotkeyOpacityDetails,
 ) => void;
+export type DesignHotkeyAlignHandler = (
+  details: DesignHotkeyAlignDetails,
+) => void;
+export type DesignHotkeyDistributeHandler = (
+  details: DesignHotkeyDistributeDetails,
+) => void;
 export interface UseDesignHotkeysProps {
   enabled?: boolean;
@@ -87,6 +111,9 @@ export interface UseDesignHotkeysProps {
   onSelectAll?: DesignHotkeyHandler;
   onGroup?: DesignHotkeyHandler;
   onUngroup?: DesignHotkeyHandler;
+  /** Figma's Cmd+Alt+G — "Frame selection": wrap the selection in a frame
+   *  container (distinct from onGroup's plain-group wrapper). */
+  onFrameSelection?: DesignHotkeyHandler;
   onUndo?: DesignHotkeyHandler;
   onRedo?: DesignHotkeyHandler;
   onBringForward?: DesignHotkeyHandler;
@@ -113,6 +140,52 @@ export interface UseDesignHotkeysProps {
    * editable-target keystroke (already filtered by ignoreEditableTargets).
    */
   onOpacityChange?: DesignHotkeyOpacityHandler;
+  /** Figma's Cmd+Shift+H — toggle hide/show for the current selection (all
+   *  selected layers/screens). */
+  onToggleHidden?: DesignHotkeyHandler;
+  /** Figma's Cmd+Shift+L — toggle lock/unlock for the current selection. */
+  onToggleLocked?: DesignHotkeyHandler;
+  /** Figma's Shift+H — flip the current selection horizontally. */
+  onFlipHorizontal?: DesignHotkeyHandler;
+  /** Figma's Shift+V — flip the current selection vertically. */
+  onFlipVertical?: DesignHotkeyHandler;
+  /** Figma's Shift+X — swap the current selection's fill and stroke. */
+  onSwapFillStroke?: DesignHotkeyHandler;
+  /** Figma's Shift+Cmd+R — paste to replace the current selection with the
+   *  internal canvas clipboard's contents. */
+  onPasteToReplace?: DesignHotkeyHandler;
+  /**
+   * Figma's "I" — eyedropper: sample a color from anywhere on screen and
+   * apply it to the current selection. A one-shot action, not a tool (so it
+   * is intentionally NOT in TOOL_SHORTCUTS/onToolChange).
+   */
+  onEyedropper?: DesignHotkeyHandler;
+  /**
+   * Figma's Alt+A/D/W/S/H/V — align the current selection to left/right/top/
+   * bottom/center-h/center-v. Alt-only (no cmd/shift); moves the selection
+   * itself, matching the EditPanel Alignment row's `onAlignSelection`
+   * contract (see PositionLayoutProperties in EditPanel.tsx).
+   */
+  onAlignSelection?: DesignHotkeyAlignHandler;
+  /**
+   * Figma's Alt+Shift+H / Alt+Shift+V — distribute the selection evenly
+   * along the horizontal/vertical axis (3+ objects; first/last stay put).
+   */
+  onDistributeSelection?: DesignHotkeyDistributeHandler;
+  /** Figma's Ctrl+Alt+T (literal Control on every platform, not Cmd) — Tidy
+   *  up: arrange the selection into a compact grid with uniform gaps. */
+  onTidyUp?: DesignHotkeyHandler;
+  /**
+   * Figma's Shift+A — Add auto layout. Shift-only so it never shadows the
+   * plain "a" frame-tool shortcut (TOOL_SHORTCUTS only fires with no
+   * modifiers held) or SHIFT_TOOL_SHORTCUTS (which has no "a" entry).
+   */
+  onAddAutoLayout?: DesignHotkeyHandler;
+  /** Figma's Cmd+\ — toggle Show/Hide UI (left rail, right panel, bottom
+   *  toolbar chrome). */
+  onToggleUi?: DesignHotkeyHandler;
+  /** Figma's Shift+C — toggle Show/Hide comments (comment pins). */
+  onToggleComments?: DesignHotkeyHandler;
 }
 const TOOL_SHORTCUTS: Record<
@@ -121,6 +194,10 @@ const TOOL_SHORTCUTS: Record<
 > = {
   v: { tool: "move", handler: "onMoveTool" },
   f: { tool: "frame", handler: "onFrameTool" },
+  // Figma binds BOTH F and A to the frame tool; A is the muscle-memory
+  // favorite. Cmd+A (select all) is unaffected — tool shortcuts only fire
+  // with no modifiers held.
+  a: { tool: "frame", handler: "onFrameTool" },
   r: { tool: "rectangle", handler: "onRectangleTool" },
   o: { tool: "ellipse", handler: "onEllipseTool" },
   l: { tool: "line", handler: "onLineTool" },
@@ -299,6 +376,20 @@ function handleDesignHotkey(
     return true;
   };
+  const runAlign = (edge: DesignHotkeyAlignEdge) => {
+    if (!props.onAlignSelection) return false;
+    prevent();
+    props.onAlignSelection({ ...details, edge });
+    return true;
+  };
+  const runDistribute = (axis: DesignHotkeyDistributeAxis) => {
+    if (!props.onDistributeSelection) return false;
+    prevent();
+    props.onDistributeSelection({ ...details, axis });
+    return true;
+  };
   if (!primary && !event.altKey && event.shiftKey) {
     // H1: shift+key variant (e.g. Shift+L → arrow tool) takes priority over
     // the base binding for the same key while shift is held.
@@ -319,6 +410,12 @@ function handleDesignHotkey(
         props[toolShortcut.handler] as DesignHotkeyHandler | undefined,
       );
     }
+    // Figma's "I" — eyedropper. Deliberately NOT in TOOL_SHORTCUTS: it's a
+    // one-shot sample-and-apply action, not a persistent armed tool (no
+    // onToolChange call, no cursor mode to stay in).
+    if (key === "i") {
+      return run(props.onEyedropper);
+    }
   }
   if (event.key in ARROW_DIRECTIONS && !primary && !event.altKey) {
@@ -364,10 +461,28 @@ function handleDesignHotkey(
     return run(props.onPaste);
   }
   if (primary && key === "d") return run(props.onDuplicate);
+  // Figma's Shift+Cmd+R — "Paste to replace" — must be checked BEFORE plain
+  // Cmd+R (rename) so shift wins; onPasteToReplace absent falls through to
+  // rename so existing behavior is unaffected until the handler is wired.
+  if (primary && event.shiftKey && key === "r") {
+    return run(props.onPasteToReplace);
+  }
   if (primary && key === "r") return run(props.onRename);
+  // Cmd+Shift+H/L (hide/lock the current selection) must take precedence
+  // over any other h/l handling (e.g. the plain "h" hand-tool shortcut only
+  // fires with no modifiers held, so there's no real conflict, but this is
+  // checked first defensively to guarantee primary+shift+h/l always wins).
+  if (primary && event.shiftKey && key === "h") {
+    return run(props.onToggleHidden);
+  }
+  if (primary && event.shiftKey && key === "l") {
+    return run(props.onToggleLocked);
+  }
   if (primary && key === "g") {
-    // Figma uses ⇧⌘G for ungroup; also support ⌥⌘G as an alias.
-    if (event.shiftKey || event.altKey) return run(props.onUngroup);
+    // Figma: ⇧⌘G is ungroup. ⌥⌘G is a DIFFERENT command — "Frame selection"
+    // (wrap the selection in a frame) — not an ungroup alias.
+    if (event.shiftKey) return run(props.onUngroup);
+    if (event.altKey) return run(props.onFrameSelection);
     return run(props.onGroup);
   }
@@ -375,6 +490,25 @@ function handleDesignHotkey(
   if (primary && key === "-") return run(props.onZoomOut);
   if (primary && key === "0") return run(props.onZoomReset);
+  // Figma: plain +/= and - (no modifiers) also zoom in/out.
+  if (!primary && !event.altKey && !event.shiftKey) {
+    if (key === "=" || key === "+") return run(props.onZoomIn);
+    if (key === "-") return run(props.onZoomOut);
+  }
+  // Figma: Shift+= ("+" on a US keyboard, since "+" is the shifted "=") also
+  // zooms in. Checked separately from the plain-modifier branch above (which
+  // requires !shiftKey) so this doesn't need to disturb that branch's other
+  // no-modifier-only guarantees; key === "+" already implies shift produced
+  // it on layouts where "+" isn't its own physical key, but this also covers
+  // event.code === "Equal" with shiftKey true for layouts that report key as
+  // "=" while shifted.
+  if (!primary && !event.altKey && event.shiftKey) {
+    if (key === "+" || (key === "=" && event.code === "Equal")) {
+      return run(props.onZoomIn);
+    }
+  }
   // H2: Cmd+Alt+K — create component from the current selection.
   if (primary && event.altKey && key === "k") {
     return run(props.onCreateComponent);
@@ -410,18 +544,141 @@ function handleDesignHotkey(
     return true;
   }
+  // Ground-truth Figma: plain ]/[ (no modifiers) are Bring to front / Send
+  // to back — the "big jump" commands. Cmd+]/Cmd+[ are Bring forward / Send
+  // backward (single-step reorder). Alt+Cmd+]/Alt+Cmd+[ are silent aliases
+  // of the plain front/back commands (kept for muscle memory / older
+  // bindings), NOT of forward/backward.
   if (primary && key === "]") {
     return event.altKey ? run(props.onBringToFront) : run(props.onBringForward);
   }
   if (primary && key === "[") {
     return event.altKey ? run(props.onSendToBack) : run(props.onSendBackward);
   }
+  if (!primary && !event.altKey && !event.shiftKey && key === "]") {
+    return run(props.onBringToFront);
+  }
+  if (!primary && !event.altKey && !event.shiftKey && key === "[") {
+    return run(props.onSendToBack);
+  }
+  // H3: Shift+H / Shift+V — flip selection horizontal/vertical. Checked
+  // after the primary+shift h/l (hide/lock) branch above so Cmd+Shift+H
+  // still wins; h/v aren't in SHIFT_TOOL_SHORTCUTS so there's no real
+  // shortcut collision here either.
+  if (!primary && !event.altKey && event.shiftKey && key === "h") {
+    return run(props.onFlipHorizontal);
+  }
+  if (!primary && !event.altKey && event.shiftKey && key === "v") {
+    return run(props.onFlipVertical);
+  }
+  // Figma: Shift+X — swap fill and stroke. Cmd+X (cut) is unaffected since
+  // this only fires when shift is held and no primary modifier is present.
+  if (!primary && !event.altKey && event.shiftKey && key === "x") {
+    return run(props.onSwapFillStroke);
+  }
+  // Figma: Alt+Shift+H / Alt+Shift+V — distribute the selection evenly along
+  // the horizontal/vertical axis. Checked BEFORE the plain Alt+H/Alt+V align
+  // bindings below so the shift-held distribute variant always wins over the
+  // no-shift align variant for the same letter.
+  if (!primary && event.altKey && event.shiftKey) {
+    if (key === "h") return runDistribute("horizontal");
+    if (key === "v") return runDistribute("vertical");
+  }
+  // Figma: Alt+A/D/W/S/H/V — align the selection to left/right/top/bottom/
+  // center-h/center-v. Alt-only (no cmd, no shift — shift+h/v are the
+  // distribute bindings just above, shift+a is Add auto layout below).
+  if (!primary && event.altKey && !event.shiftKey) {
+    if (key === "a") return runAlign("left");
+    if (key === "d") return runAlign("right");
+    if (key === "w") return runAlign("top");
+    if (key === "s") return runAlign("bottom");
+    if (key === "h") return runAlign("center-h");
+    if (key === "v") return runAlign("center-v");
+  }
+  // Figma: Ctrl+Alt+T — Tidy up. A rare Figma shortcut that stays literal
+  // Control on every platform (never remapped to Cmd on Mac), so this checks
+  // event.ctrlKey directly instead of the combined `primary` flag.
+  if (event.ctrlKey && event.altKey && !event.metaKey && key === "t") {
+    return run(props.onTidyUp);
+  }
+  // Figma: Shift+A — Add auto layout. Shift-only: plain "a" is the frame-tool
+  // shortcut (TOOL_SHORTCUTS, no-modifier only) and SHIFT_TOOL_SHORTCUTS has
+  // no "a" entry, so this can't shadow either.
+  if (!primary && !event.altKey && event.shiftKey && key === "a") {
+    return run(props.onAddAutoLayout);
+  }
+  // Figma: Cmd+\ — Show/Hide UI (empty-canvas context-menu item).
+  if (primary && key === "\\") {
+    return run(props.onToggleUi);
+  }
+  // Figma: Shift+C — Show/Hide comments. Plain "c" (no modifiers) is the
+  // comment-pin TOOL_SHORTCUTS entry, so shift+c can't shadow it.
+  if (!primary && !event.altKey && event.shiftKey && key === "c") {
+    return run(props.onToggleComments);
+  }
   return false;
 }
+// Physical-position (event.code) letter/punctuation lookup used ONLY when
+// event.altKey is true. On real macOS keyboards, Option+letter produces a
+// composed/dead-key character in event.key (Option+A -> "å", Option+H ->
+// "˙", Option+] tends to be unaffected but other punctuation isn't), so
+// every alt-held combo must match on the physical key position instead of
+// the printed character. This mirrors Figma's own behavior: its alt-letter
+// shortcuts (align, distribute, frame-selection, create-component, z-order
+// aliases, tidy up) fire from the QWERTY physical position regardless of
+// what character Option composes on the active input layout.
+const ALT_CODE_KEYS: Record<string, string> = {
+  KeyA: "a",
+  KeyB: "b",
+  KeyC: "c",
+  KeyD: "d",
+  KeyE: "e",
+  KeyF: "f",
+  KeyG: "g",
+  KeyH: "h",
+  KeyI: "i",
+  KeyJ: "j",
+  KeyK: "k",
+  KeyL: "l",
+  KeyM: "m",
+  KeyN: "n",
+  KeyO: "o",
+  KeyP: "p",
+  KeyQ: "q",
+  KeyR: "r",
+  KeyS: "s",
+  KeyT: "t",
+  KeyU: "u",
+  KeyV: "v",
+  KeyW: "w",
+  KeyX: "x",
+  KeyY: "y",
+  KeyZ: "z",
+  BracketRight: "]",
+  BracketLeft: "[",
+};
 function normalizedKey(event: KeyboardEvent) {
   if (event.key === " ") return "space";
+  // Alt-held combos: derive the letter/punctuation from the physical key
+  // position (event.code) instead of the composed character (event.key).
+  // See ALT_CODE_KEYS above for why. Falls back to the plain event.key
+  // handling below for codes we don't map (e.g. Escape, Tab, arrows), so
+  // non-letter alt combos are unaffected.
+  if (event.altKey) {
+    const fromCode = ALT_CODE_KEYS[event.code];
+    if (fromCode) return fromCode;
+  }
   return event.key.length === 1 ? event.key.toLowerCase() : event.key;
 }