@agent-native/core 0.128.4 → 0.129.1

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

@@ -0,0 +1,314 @@
+import { useT } from "@agent-native/core/client/i18n";
+import {
+  IconAspectRatio,
+  IconChevronDown,
+  IconDeviceLaptop,
+  IconDeviceMobile,
+  IconDeviceTablet,
+  IconX,
+} from "@tabler/icons-react";
+import { useState } from "react";
+
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Separator } from "@/components/ui/separator";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { cn } from "@/lib/utils";
+import {
+  clampZoom,
+  getNextZoomStepDown,
+  getNextZoomStepUp,
+} from "@/pages/design-editor/overview-camera";
+import {
+  INTERACT_DEVICE_PRESETS,
+  type InteractDeviceCategory,
+} from "@/pages/design-editor/responsive-interact";
+
+/** Reference-bar zoom range (matches builder-internal's ResponsiveEditingMode
+ * clamp(zoom, 10, 200)) — deliberately narrower than the general canvas zoom
+ * range, since this scales a literal device box rather than a free canvas. */
+const INTERACT_ZOOM_MIN = 10;
+const INTERACT_ZOOM_MAX = 200;
+const ZOOM_PRESET_BUTTONS = [50, 75, 100] as const;
+
+function DeviceCategoryIcon({
+  category,
+  className,
+}: {
+  category: InteractDeviceCategory;
+  className?: string;
+}) {
+  switch (category) {
+    case "phone":
+      return <IconDeviceMobile className={className} />;
+    case "tablet":
+      return <IconDeviceTablet className={className} />;
+    case "desktop":
+      return <IconDeviceLaptop className={className} />;
+    case "custom":
+      return <IconAspectRatio className={className} />;
+  }
+}
+
+function DimensionInput({
+  value,
+  onChange,
+  label,
+  ariaLabel,
+}: {
+  value: number;
+  onChange: (value: number) => void;
+  label: string;
+  ariaLabel: string;
+}) {
+  return (
+    <div className="relative flex items-center">
+      <span className="pointer-events-none absolute left-2 !text-[11px] text-muted-foreground">
+        {label}
+      </span>
+      <Input
+        type="number"
+        min={1}
+        value={value}
+        onChange={(event) => {
+          const next = Number.parseInt(event.target.value, 10);
+          if (Number.isFinite(next) && next > 0) onChange(next);
+        }}
+        aria-label={ariaLabel}
+        className="h-7 w-[74px] rounded-md !pl-6 !text-[12px] tabular-nums"
+      />
+    </div>
+  );
+}
+
+export interface ResponsiveInteractBarProps {
+  deviceName: string;
+  width: number;
+  height: number;
+  zoom: number;
+  onDeviceChange: (name: string) => void;
+  onWidthChange: (width: number) => void;
+  onHeightChange: (height: number) => void;
+  onZoomChange: (zoom: number) => void;
+  onClose: () => void;
+  className?: string;
+}
+
+/**
+ * Full-screen Interact mode's top chrome bar: device preset + editable W/H
+ * (typing switches the preset to "Custom", same as builder-internal's
+ * ResponsiveEditingMode) and a zoom popover. Ported to this app's shadcn
+ * primitives — see templates/design's frontend rules for why this isn't MUI.
+ */
+export function ResponsiveInteractBar({
+  deviceName,
+  width,
+  height,
+  zoom,
+  onDeviceChange,
+  onWidthChange,
+  onHeightChange,
+  onZoomChange,
+  onClose,
+  className,
+}: ResponsiveInteractBarProps) {
+  const t = useT();
+  const [zoomOpen, setZoomOpen] = useState(false);
+  const [zoomDraft, setZoomDraft] = useState(String(zoom));
+
+  const commitZoomDraft = () => {
+    const parsed = Number.parseFloat(zoomDraft);
+    if (Number.isFinite(parsed)) {
+      onZoomChange(clampZoom(parsed, INTERACT_ZOOM_MIN, INTERACT_ZOOM_MAX));
+    } else {
+      setZoomDraft(String(zoom));
+    }
+  };
+
+  return (
+    <div
+      className={cn(
+        "flex h-12 shrink-0 items-center justify-between gap-2 border-b border-border bg-[var(--design-editor-panel-bg)] px-3",
+        className,
+      )}
+    >
+      <div className="flex min-w-0 flex-1 items-center gap-2">
+        <Select value={deviceName} onValueChange={onDeviceChange}>
+          <SelectTrigger
+            className="h-8 w-44 gap-1.5 rounded-md !text-[12px]"
+            aria-label={t("designEditor.responsiveInteract.device")}
+          >
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent className="z-[100030]">
+            {INTERACT_DEVICE_PRESETS.map((preset) => (
+              <SelectItem
+                key={preset.name}
+                value={preset.name}
+                className="!text-[12px]"
+              >
+                <span className="flex w-full items-center gap-2">
+                  <DeviceCategoryIcon
+                    category={preset.category}
+                    className="size-3.5 shrink-0 text-muted-foreground"
+                  />
+                  <span className="flex-1 truncate">{preset.name}</span>
+                  {preset.category !== "custom" ? (
+                    <span className="shrink-0 tabular-nums text-muted-foreground/60">
+                      {preset.width}×{preset.height}
+                    </span>
+                  ) : null}
+                </span>
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      </div>
+
+      <div className="flex shrink-0 items-center gap-1.5">
+        <DimensionInput
+          value={width}
+          onChange={onWidthChange}
+          label={t("designEditor.responsiveInteract.widthAbbreviation")}
+          ariaLabel={t("designEditor.responsiveInteract.width")}
+        />
+        <DimensionInput
+          value={height}
+          onChange={onHeightChange}
+          label={t("designEditor.responsiveInteract.heightAbbreviation")}
+          ariaLabel={t("designEditor.responsiveInteract.height")}
+        />
+      </div>
+
+      <div className="flex min-w-0 flex-1 items-center justify-end gap-1">
+        <Popover
+          open={zoomOpen}
+          onOpenChange={(open) => {
+            setZoomOpen(open);
+            if (open) setZoomDraft(String(zoom));
+          }}
+        >
+          <PopoverTrigger asChild>
+            <Button
+              variant="ghost"
+              size="sm"
+              className="h-7 cursor-pointer gap-0.5 rounded-md px-2 !text-[12px] tabular-nums text-muted-foreground hover:text-foreground"
+            >
+              {zoom}%
+              <IconChevronDown className="size-3 opacity-60" />
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent
+            align="end"
+            className="z-[100030] w-44 space-y-1.5 p-2"
+          >
+            <Input
+              autoFocus
+              type="number"
+              value={zoomDraft}
+              onChange={(event) => setZoomDraft(event.target.value)}
+              onFocus={(event) => event.currentTarget.select()}
+              onKeyDown={(event) => {
+                if (event.key === "Enter") {
+                  event.preventDefault();
+                  commitZoomDraft();
+                } else if (event.key === "Escape") {
+                  event.preventDefault();
+                  setZoomDraft(String(zoom));
+                }
+              }}
+              onBlur={commitZoomDraft}
+              aria-label={t("designEditor.responsiveInteract.zoom")}
+              className="h-7 !text-[12px] tabular-nums"
+            />
+            <Separator />
+            <Button
+              variant="ghost"
+              size="sm"
+              disabled={zoom >= INTERACT_ZOOM_MAX}
+              onClick={() => {
+                onZoomChange(
+                  getNextZoomStepUp(zoom, {
+                    min: INTERACT_ZOOM_MIN,
+                    max: INTERACT_ZOOM_MAX,
+                  }),
+                );
+                setZoomOpen(false);
+              }}
+              className="h-7 w-full cursor-pointer justify-start rounded-md px-2 !text-[12px]"
+            >
+              {t("designEditor.responsiveInteract.zoomIn")}
+            </Button>
+            <Button
+              variant="ghost"
+              size="sm"
+              disabled={zoom <= INTERACT_ZOOM_MIN}
+              onClick={() => {
+                onZoomChange(
+                  getNextZoomStepDown(zoom, {
+                    min: INTERACT_ZOOM_MIN,
+                    max: INTERACT_ZOOM_MAX,
+                  }),
+                );
+                setZoomOpen(false);
+              }}
+              className="h-7 w-full cursor-pointer justify-start rounded-md px-2 !text-[12px]"
+            >
+              {t("designEditor.responsiveInteract.zoomOut")}
+            </Button>
+            <Separator />
+            {ZOOM_PRESET_BUTTONS.map((preset) => (
+              <Button
+                key={preset}
+                variant="ghost"
+                size="sm"
+                onClick={() => {
+                  onZoomChange(preset);
+                  setZoomOpen(false);
+                }}
+                className="h-7 w-full cursor-pointer justify-start rounded-md px-2 !text-[12px]"
+              >
+                {t("designEditor.responsiveInteract.zoomToPreset", {
+                  percent: preset,
+                })}
+              </Button>
+            ))}
+          </PopoverContent>
+        </Popover>
+
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button
+              variant="ghost"
+              size="icon"
+              onClick={onClose}
+              aria-label={t("designEditor.responsiveInteract.exit")}
+              className="size-7 cursor-pointer rounded-md text-muted-foreground hover:text-foreground"
+            >
+              <IconX className="size-4" />
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent side="bottom">
+            {t("designEditor.responsiveInteract.exit")}
+          </TooltipContent>
+        </Tooltip>
+      </div>
+    </div>
+  );
+}

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

@@ -4646,6 +4646,11 @@ declare var __SELECTED_LAYER_DRAG_PRIORITY__: boolean;
       return true;
     }
     if (/^Arrow/.test(key || "")) return !e.altKey;
+    // Figma's Shift+\ "Minimize UI" chord. Use the physical code because
+    // Shift+\ produces "|" on US keyboard layouts.
+    if (!primary && !e.altKey && e.shiftKey && e.code === "Backslash") {
+      return true;
+    }
     if (primary) {
       return (
         [
@@ -4686,9 +4691,6 @@ declare var __SELECTED_LAYER_DRAG_PRIORITY__: boolean;
         // shortcuts the host has no bare-primary binding for — are left
         // alone (see useDesignHotkeys.ts: both require event.shiftKey).
         (e.shiftKey && (normalized === "h" || normalized === "l")) ||
-        // Cmd/Ctrl+Shift+\ — minimize UI (onToggleUi). Keep the Shift gate
-        // here so the iframe never intercepts a desktop host's bare Cmd/Ctrl+\.
-        (e.shiftKey && normalized === "\\") ||
         // Cmd/Ctrl+Alt+B detach instance / Cmd/Ctrl+Alt+K create component
         // (onDetachInstance / onCreateComponent). Gated on altKey so bare
         // Cmd+B is left alone — the host has no bare-primary binding for it.
@@ -12157,6 +12159,89 @@ declare var __SELECTED_LAYER_DRAG_PRIORITY__: boolean;
   // bounding the per-frame cost regardless of the incoming event rate.
   window.addEventListener("scroll", scheduleRefreshOverlays, true);
   window.addEventListener("resize", scheduleRefreshOverlays);
+
+  // Document-level native-interaction net for the z-index race: the shield
+  // (z-index 99990) only wins pointer dispatch when nothing in the previewed
+  // app paints above it, and real running apps routinely do — portalled
+  // modals/toasts/menus at 99999+/2147483647, or any node appended to <body>
+  // after the shield at an equal z-index. When that happens the app element
+  // is the real e.target, not the shield, so none of the shield-bound
+  // listeners above ever see the event. `document` is still an ancestor of
+  // that element regardless of paint order, so a capture listener here still
+  // sees every such event. Registered LAST among this file's own
+  // document-level listeners (all of which sit above this line) so this net
+  // can never preempt them via stopImmediatePropagation — e.g. the
+  // click-away-commits-text-edit pointerdown listener above must still run
+  // first. `activeDragCancel` is truthy for the file's mouse-event-driven
+  // drags (move/resize/rotate/spacing/reorder), whose own document-level
+  // mousemove/mouseup listeners are attached later still (on the mousedown
+  // that starts the drag) and would otherwise be the same kind of race
+  // victim; deferring to them while a drag owns input avoids that.
+  function isNativeInteractionNetExempt(target: Element | null): boolean {
+    return (
+      isOverlayElement(target) ||
+      isEditorTypingTarget(target) ||
+      !!activeDragCancel
+    );
+  }
+
+  function interceptNativeInteractionNet(e: Event): void {
+    if (readOnly) return;
+    var target =
+      e.target && (e.target as Element).nodeType === 1
+        ? (e.target as Element)
+        : null;
+    if (isNativeInteractionNetExempt(target)) return;
+    stopNativeInteraction(e);
+  }
+
+  [
+    "click",
+    "auxclick",
+    "dblclick",
+    "mousedown",
+    "mouseup",
+    "pointerdown",
+    "pointerup",
+    "submit",
+  ].forEach(function (type) {
+    document.addEventListener(type, interceptNativeInteractionNet, true);
+  });
+
+  // Enter/Space activate a focused native control (link, button, or a
+  // role="button"/"link") through the keydown event's default action, which
+  // is dispatched straight to the focused element regardless of z-index —
+  // neither the shield nor the net above (both pointer-target-based) can see
+  // it. Scoped to just these two keys and only when the target is itself
+  // such a control: the file already has many other keydown handlers (move/
+  // resize/rotate/reorder/escape, the plain-paste hotkey) that a blanket
+  // keydown block would break.
+  function isFocusedActivationTarget(target: Element | null): boolean {
+    return !!(
+      target &&
+      target.closest &&
+      target.closest(
+        'a[href], button, summary, input[type="submit"], input[type="button"], input[type="reset"], input[type="image"], [role="button"], [role="link"]',
+      )
+    );
+  }
+
+  document.addEventListener(
+    "keydown",
+    function (e: KeyboardEvent) {
+      if (readOnly) return;
+      if (e.key !== "Enter" && !(e.key === " " && e.code === "Space")) return;
+      var target =
+        e.target && (e.target as Element).nodeType === 1
+          ? (e.target as Element)
+          : null;
+      if (isNativeInteractionNetExempt(target)) return;
+      if (!isFocusedActivationTarget(target)) return;
+      stopNativeInteraction(e);
+    },
+    true,
+  );
+
   applyEditorChromeScale();
 
   if (

package/corpus/templates/design/app/components/design/keyboard-shortcuts.ts

@@ -142,7 +142,7 @@ export const DESIGN_SHORTCUTS: readonly DesignShortcutDefinition[] = [
   shortcut({
     id: "toggle-ui",
     category: "view",
-    bindings: ["$mod+shift+\\"],
+    bindings: ["shift+\\"],
     labelKey: "designEditor.keyboardShortcuts.commands.toggleUi",
     handler: "onToggleUi",
   }),

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

@@ -203,8 +203,8 @@ export interface UseDesignHotkeysProps {
    * modifiers held) or SHIFT_TOOL_SHORTCUTS (which has no "a" entry).
    */
   onAddAutoLayout?: DesignHotkeyHandler;
-  /** Figma's Cmd/Ctrl+Shift+\ "Minimize UI" shortcut, applied here to the
-   *  full Design chrome (left rail, right panel, and bottom toolbar). */
+  /** Figma's Shift+\ "Minimize UI" shortcut, applied here to the full Design
+   *  chrome (left rail, right panel, and bottom toolbar). */
   onToggleUi?: DesignHotkeyHandler;
   /** Figma's Shift+C — toggle Show/Hide comments (comment pins). */
   onToggleComments?: DesignHotkeyHandler;
@@ -725,13 +725,14 @@ export function handleDesignHotkey(
     return run(props.onAddAutoLayout);
   }
 
-  // Figma's "Minimize UI" chord avoids the bare Cmd+\ shortcut that desktop
-  // coding hosts can reserve for closing their focused pane.
+  // Figma's Shift+\ "Minimize UI" chord avoids the bare Cmd+\ shortcut that
+  // desktop coding hosts can reserve for closing their focused pane. Use the
+  // physical key code because Shift+\ produces "|" on US keyboard layouts.
   if (
-    isPlatformPrimaryModifier(event) &&
+    !primary &&
     !event.altKey &&
     event.shiftKey &&
-    key === "\\"
+    event.code === "Backslash"
   ) {
     return run(props.onToggleUi);
   }