@agent-native/core 0.136.4 → 0.137.0

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

@@ -11,10 +11,9 @@ import {
   IconScale,
   IconScribble,
   IconSquare,
-  IconTypography,
   IconX,
 } from "@tabler/icons-react";
-import { useEffect, useMemo, useRef, useState } from "react";
+import { useEffect, useMemo, useRef, useState, type ReactNode } from "react";
 
 import { createCoreCommands } from "@/components/design/code-workbench/commands";
 import {
@@ -24,17 +23,34 @@ import {
   formatShortcutKeycaps,
 } from "@/components/design/keyboard-shortcuts";
 import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { isApplePlatform } from "@/hooks/useDesignHotkeys";
+import {
+  MAX_NUDGE_AMOUNT,
+  MIN_NUDGE_AMOUNT,
+  normalizeNudgeAmount,
+} from "@/pages/design-editor/editor-preferences";
+import {
+  DEFAULT_NUDGE_AMOUNTS,
+  type NudgeAmounts,
+} from "@/pages/design-editor/nudge-intent";
+
+import { IconText } from "./inspector/design-icons";
 
 interface KeyboardShortcutsPanelProps {
   onClose: () => void;
+  nudgeAmounts?: NudgeAmounts;
+  onNudgeAmountsChange?: (next: NudgeAmounts) => void;
 }
 
-const TOOL_ICON_BY_SHORTCUT: Record<string, typeof IconPointer> = {
+const TOOL_ICON_BY_SHORTCUT: Record<
+  string,
+  (props: { className?: string }) => ReactNode
+> = {
   "move-tool": IconPointer,
   "frame-tool": IconFrame,
-  "text-tool": IconTypography,
+  "text-tool": IconText,
   "pen-tool": IconPencil,
   "hand-tool": IconHandStop,
   "scale-tool": IconScale,
@@ -160,8 +176,60 @@ function ShortcutBindings({ bindings }: { bindings: readonly string[] }) {
   );
 }
 
+function NudgeAmountFields({
+  amounts,
+  onChange,
+}: {
+  amounts: NudgeAmounts;
+  onChange: (next: NudgeAmounts) => void;
+}) {
+  const t = useT();
+  const field = (key: keyof NudgeAmounts, labelKey: string) => (
+    <label className="flex items-center gap-2 text-[11px] text-neutral-200">
+      <span className="min-w-20">{t(labelKey)}</span>
+      <Input
+        data-nudge-amount={key}
+        type="number"
+        min={MIN_NUDGE_AMOUNT}
+        max={MAX_NUDGE_AMOUNT}
+        value={amounts[key]}
+        onChange={(event) =>
+          onChange({
+            ...amounts,
+            [key]: normalizeNudgeAmount(event.target.value, amounts[key]),
+          })
+        }
+        className="h-7 w-20 bg-neutral-800 text-[11px] text-neutral-100"
+      />
+      <span className="text-neutral-400">
+        {t("designEditor.keyboardShortcuts.nudgeAmount.unit")}
+      </span>
+    </label>
+  );
+
+  return (
+    <section
+      data-nudge-amount-settings
+      className="mb-3 border-b border-neutral-800 pb-3"
+    >
+      <h3 className="mb-2 text-[11px] font-semibold text-neutral-100">
+        {t("designEditor.keyboardShortcuts.nudgeAmount.title")}
+      </h3>
+      <div className="flex flex-col gap-2">
+        {field("small", "designEditor.keyboardShortcuts.nudgeAmount.small")}
+        {field("big", "designEditor.keyboardShortcuts.nudgeAmount.big")}
+      </div>
+      <p className="mt-2 text-[10px] leading-4 text-neutral-400">
+        {t("designEditor.keyboardShortcuts.nudgeAmount.description")}
+      </p>
+    </section>
+  );
+}
+
 export function KeyboardShortcutsPanel({
   onClose,
+  nudgeAmounts = DEFAULT_NUDGE_AMOUNTS,
+  onNudgeAmountsChange,
 }: KeyboardShortcutsPanelProps) {
   const t = useT();
   const [category, setCategory] = useState<DesignShortcutCategory>("essential");
@@ -313,6 +381,12 @@ export function KeyboardShortcutsPanel({
                   data-shortcuts-content-column
                   className="mx-auto max-w-[400px]"
                 >
+                  {categoryId === "cursor" && onNudgeAmountsChange ? (
+                    <NudgeAmountFields
+                      amounts={nudgeAmounts}
+                      onChange={onNudgeAmountsChange}
+                    />
+                  ) : null}
                   {designRows.map((item) => (
                     <div
                       data-shortcut-id={item.id}

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

@@ -181,6 +181,7 @@ const MAX_WHEEL_PAN_DELTA = 140;
  *  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,
   getBoardContentKey,
@@ -450,6 +451,7 @@ export const MultiScreenCanvas = memo(function MultiScreenCanvas({
   onPrimitiveReparent,
   onCreateScreenFrame,
   onDeleteSelection,
+  onNudgeSelection,
   onZoomChange,
   renderScreenContent,
   renderBreakpointContent,
@@ -527,6 +529,7 @@ export const MultiScreenCanvas = memo(function MultiScreenCanvas({
   } | null>(null);
   const onGeometryChangeRef = useRef(onGeometryChange);
   const onGeometryCommitRef = useRef(onGeometryCommit);
+  const onNudgeSelectionRef = useRef(onNudgeSelection);
   const screensRef = useRef(screens);
   const [draftPrimitives, setDraftPrimitives] = useState<DraftPrimitive[]>([]);
   const draftPrimitivesRef = useRef(draftPrimitives);
@@ -1080,6 +1083,10 @@ export const MultiScreenCanvas = memo(function MultiScreenCanvas({
     onGeometryCommitRef.current = onGeometryCommit;
   }, [onGeometryCommit]);
 
+  useEffect(() => {
+    onNudgeSelectionRef.current = onNudgeSelection;
+  }, [onNudgeSelection]);
+
   useEffect(() => {
     onPrimitiveReparentRef.current = onPrimitiveReparent;
   }, [onPrimitiveReparent]);
@@ -7084,6 +7091,7 @@ export const MultiScreenCanvas = memo(function MultiScreenCanvas({
         draftPrimitivesRef.current.some((draft) => draft.id === id),
       );
       if (targetIds.length === 0 && targetDraftIds.length === 0) return;
+      if (onNudgeSelectionRef.current?.(targetIds) === false) return;
 
       event.preventDefault();
       event.stopPropagation();

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

@@ -81,8 +81,11 @@ export function QuestionFlow({
       : Math.round((answeredCount / guidedQuestions.length) * 100);
 
   return (
-    <div className="flex h-full w-full justify-center overflow-y-auto bg-transparent px-5 py-8 text-[13px] text-foreground sm:px-8 lg:px-10">
-      <main className="w-full max-w-[820px] pb-8">
+    /* `items-start` is what makes the trailing space real: stretched, this
+       column overflows its own padding box, so its `pb` renders above the
+       overflow and the scroll container's `py` bottom is dropped. */
+    <div className="flex h-full w-full items-start justify-center overflow-y-auto bg-transparent px-5 py-8 text-[13px] text-foreground sm:px-8 lg:px-10">
+      <main className="w-full max-w-[820px] pb-16">
         <div className="mb-6 border-b border-[var(--design-editor-panel-divider-color)] pb-5">
           <h2 className="text-[22px] font-semibold leading-7 tracking-normal text-foreground sm:text-2xl sm:leading-8">
             {title ?? t("questionFlow.defaultTitle")}

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

@@ -3,6 +3,7 @@ import {
   rgbaToCss,
   withColorOpacity,
 } from "@shared/color-utils";
+import { IconChevronDown, IconChevronRight } from "@tabler/icons-react";
 import { useEffect, useRef, useState, type ReactNode } from "react";
 
 import { Input } from "@/components/ui/input";
@@ -652,14 +653,9 @@ export function PropSlider({
 }
 
 /**
- * design-editor inspector section. Matches the design editor "Design" panel chrome:
- *   - NO left collapse chevron (the design editor uses none).
- *   - A thin divider line above each section.
- *   - A bold left-aligned title.
- *   - Right-aligned action icons (add layer, toggles, styles, etc.).
- *
- * The title is still clickable to collapse the body (design sections collapse
- * on title click) but renders no chevron glyph, just the same way.
+ * 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.
  */
 export function PanelSection({
   title,
@@ -679,10 +675,15 @@ export function PanelSection({
       <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 bg-transparent text-left"
+          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>

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

@@ -28,6 +28,7 @@ import type {
 import {
   IconFlowGrid,
   IconFlowHorizontal,
+  IconFlowNormal,
   IconFlowVertical,
   IconGap,
   IconPaddingHorizontal,
@@ -431,7 +432,7 @@ export function AutoLayoutMatrix({
                   disabled={disabled}
                   onClick={() => selectFlow("normal")}
                 >
-                  <IconFlowNormal />
+                  <IconFlowNormal className="size-4" />
                 </FlowButton>
                 <FlowButton
                   label={copy.vertical}
@@ -439,7 +440,7 @@ export function AutoLayoutMatrix({
                   disabled={disabled}
                   onClick={() => selectFlow("vertical")}
                 >
-                  <IconFlowVertical className="size-3.5" />
+                  <IconFlowVertical className="size-4" />
                 </FlowButton>
                 <FlowButton
                   label={copy.horizontal}
@@ -447,7 +448,7 @@ export function AutoLayoutMatrix({
                   disabled={disabled}
                   onClick={() => selectFlow("horizontal")}
                 >
-                  <IconFlowHorizontal className="size-3.5" />
+                  <IconFlowHorizontal className="size-4" />
                 </FlowButton>
                 <FlowButton
                   label={"Grid" /* i18n-ignore design inspector label */}
@@ -455,7 +456,7 @@ export function AutoLayoutMatrix({
                   disabled={disabled}
                   onClick={() => selectFlow("grid")}
                 >
-                  <IconFlowGrid className="size-3.5" />
+                  <IconFlowGrid className="size-4" />
                 </FlowButton>
               </div>
               {/* Swap axis: flips between horizontal/vertical flex flow
@@ -1853,7 +1854,7 @@ function CheckMini() {
       <path
         d="M2.5 7.5 L5.5 10.5 L11.5 3.5"
         stroke="currentColor"
-        strokeWidth="1.6"
+        strokeWidth="1.5"
         strokeLinecap="round"
         strokeLinejoin="round"
       />
@@ -1879,7 +1880,7 @@ function ChevronDownMini() {
       <path
         d="M1.5 3 L4 5.5 L6.5 3"
         stroke="currentColor"
-        strokeWidth="1.2"
+        strokeWidth="1.5"
         strokeLinecap="round"
         strokeLinejoin="round"
       />
@@ -1887,23 +1888,6 @@ function ChevronDownMini() {
   );
 }
 
-/** Normal / free-flow layout glyph — loosely placed small rects. */
-function IconFlowNormal() {
-  return (
-    <svg
-      viewBox="0 0 24 24"
-      width={14}
-      height={14}
-      fill="currentColor"
-      aria-hidden="true"
-    >
-      <rect x="4" y="4" width="6" height="6" rx="1.5" />
-      <rect x="14" y="6" width="6" height="6" rx="1.5" />
-      <rect x="6" y="14" width="6" height="6" rx="1.5" />
-    </svg>
-  );
-}
-
 /** Resize-to-fit diagonal arrows. */
 function IconResizeToFitMini() {
   return (
@@ -1913,7 +1897,7 @@ function IconResizeToFitMini() {
       height={16}
       fill="none"
       stroke="currentColor"
-      strokeWidth="1.6"
+      strokeWidth="1.5"
       strokeLinecap="round"
       strokeLinejoin="round"
       aria-hidden="true"
@@ -1935,7 +1919,7 @@ function IconSlidersMini() {
       height={16}
       fill="none"
       stroke="currentColor"
-      strokeWidth="1.6"
+      strokeWidth="1.5"
       strokeLinecap="round"
       strokeLinejoin="round"
       aria-hidden="true"
@@ -1957,7 +1941,7 @@ function IconPaddingLinked() {
       height={16}
       fill="none"
       stroke="currentColor"
-      strokeWidth="1.6"
+      strokeWidth="1.5"
       strokeLinecap="round"
       strokeLinejoin="round"
       aria-hidden="true"
@@ -1977,7 +1961,7 @@ function IconPaddingUnlinked() {
       height={16}
       fill="none"
       stroke="currentColor"
-      strokeWidth="1.6"
+      strokeWidth="1.5"
       strokeLinecap="round"
       strokeLinejoin="round"
       aria-hidden="true"
@@ -2004,11 +1988,12 @@ function IconPaddingLeftMini({ className }: { className?: string }) {
 
 type PaddingSide = "top" | "right" | "bottom" | "left";
 
+/** Inset line for each side, matching IconPaddingHorizontal/Vertical. */
 const PADDING_EDGE: Record<PaddingSide, [number, number, number, number]> = {
-  top: [4, 4, 20, 4],
-  right: [20, 4, 20, 20],
-  bottom: [4, 20, 20, 20],
-  left: [4, 4, 4, 20],
+  top: [8, 7.5, 16, 7.5],
+  right: [16.5, 8, 16.5, 16],
+  bottom: [8, 16.5, 16, 16.5],
+  left: [7.5, 8, 7.5, 16],
 };
 
 function PaddingSideGlyph({
@@ -2030,72 +2015,49 @@ function PaddingSideGlyph({
       strokeLinejoin="round"
       aria-hidden="true"
     >
-      <rect x="4" y="4" width="16" height="16" rx="2" opacity="0.4" />
-      <line x1={x1} y1={y1} x2={x2} y2={y2} strokeWidth="3" />
+      <rect x="3.5" y="3.5" width="17" height="17" rx="1.5" />
+      <line x1={x1} y1={y1} x2={x2} y2={y2} />
     </svg>
   );
 }
 
-/** Distribute horizontal spacing (space-between on main/cross axis). */
+/** Distribute spacing (space-between) along each axis. */
 function IconDistributeH() {
   return (
     <svg
-      viewBox="0 0 14 14"
+      viewBox="0 0 24 24"
       width={14}
       height={14}
       fill="none"
       stroke="currentColor"
-      strokeWidth="1.2"
+      strokeWidth="1.5"
       strokeLinecap="round"
+      strokeLinejoin="round"
       aria-hidden="true"
     >
-      {/* left edge line */}
-      <line x1="1.5" y1="2" x2="1.5" y2="12" />
-      {/* right edge line */}
-      <line x1="12.5" y1="2" x2="12.5" y2="12" />
-      {/* center block */}
-      <rect
-        x="4.5"
-        y="4"
-        width="5"
-        height="6"
-        rx="1"
-        fill="currentColor"
-        stroke="none"
-        opacity="0.5"
-      />
+      <line x1="3" y1="4" x2="3" y2="20" />
+      <line x1="21" y1="4" x2="21" y2="20" />
+      <rect x="8" y="7" width="8" height="10" rx="1" />
     </svg>
   );
 }
 
-/** Distribute vertical spacing (space-between on cross/main axis). */
 function IconDistributeV() {
   return (
     <svg
-      viewBox="0 0 14 14"
+      viewBox="0 0 24 24"
       width={14}
       height={14}
       fill="none"
       stroke="currentColor"
-      strokeWidth="1.2"
+      strokeWidth="1.5"
       strokeLinecap="round"
+      strokeLinejoin="round"
       aria-hidden="true"
     >
-      {/* top edge line */}
-      <line x1="2" y1="1.5" x2="12" y2="1.5" />
-      {/* bottom edge line */}
-      <line x1="2" y1="12.5" x2="12" y2="12.5" />
-      {/* center block */}
-      <rect
-        x="4"
-        y="4.5"
-        width="6"
-        height="5"
-        rx="1"
-        fill="currentColor"
-        stroke="none"
-        opacity="0.5"
-      />
+      <line x1="4" y1="3" x2="20" y2="3" />
+      <line x1="4" y1="21" x2="20" y2="21" />
+      <rect x="7" y="8" width="10" height="8" rx="1" />
     </svg>
   );
 }