@agent-native/core 0.169.1 → 0.171.0

package/corpus/templates/design/app/components/design/editor/DesignBottomToolbar.tsx

@@ -42,6 +42,7 @@ export function DesignBottomToolbar({
   pinMode,
   drawMode,
   activeTool,
+  shapeTool,
   isOverview,
   hasActiveFile,
   onMove,
@@ -62,6 +63,9 @@ export function DesignBottomToolbar({
   pinMode: boolean;
   drawMode: boolean;
   activeTool: DesignTool;
+  /** The shape the group button draws when pressed directly: the last one
+   *  picked, since activeTool has already fallen back to move after a draw. */
+  shapeTool: ShapeTool;
   isOverview: boolean;
   hasActiveFile: boolean;
   onMove: () => void;
@@ -89,7 +93,7 @@ export function DesignBottomToolbar({
   ]);
   const activeShape = shapeTools.has(activeTool)
     ? (activeTool as ShapeTool)
-    : "rect";
+    : shapeTool;
   const shapeIcon = (tool: ShapeTool, className: string) => {
     switch (tool) {
       case "line":
@@ -298,7 +302,7 @@ export function DesignBottomToolbar({
           key: "draw",
           label: t("designEditor.modes.draw"),
           icon: <IconBrush className="size-4" />,
-          shortcut: "Y",
+          shortcut: "⇧Y",
           active: activeTool === "draw" && mode === "annotate" && drawMode,
           disabled: !hasActiveFile,
           onSelect: onDraw,

package/corpus/templates/design/app/components/design/editor/DesignWorkspaceRail.tsx

@@ -39,14 +39,14 @@ export function DesignWorkspaceRail({
   onMotionToggle,
   onPanelChange,
 }: {
-  activePanel: DesignLeftPanel;
+  activePanel: DesignLeftPanel | null;
   disabledPanels?: ReadonlySet<DesignLeftPanel>;
   hiddenPanels?: ReadonlySet<DesignLeftPanel>;
   motionOpen?: boolean;
   motionDisabled?: boolean;
   projectMenu: ReactNode;
   onMotionToggle?: () => void;
-  onPanelChange: (panel: DesignLeftPanel) => void;
+  onPanelChange: (panel: DesignLeftPanel | null) => void;
 }) {
   const t = useT();
   const items: Array<{
@@ -137,7 +137,7 @@ export function DesignWorkspaceRail({
                         event.preventDefault();
                         return;
                       }
-                      onPanelChange(item.panel);
+                      onPanelChange(active ? null : item.panel);
                     }}
                     onPointerEnter={() => {
                       if (item.panel === "code") preloadCodeWorkbench();
@@ -175,7 +175,7 @@ export function DesignWorkspaceRail({
           );
         })}
       </div>
-      {onMotionToggle ? (
+      {onMotionToggle && SHOW_DESIGN_SECONDARY_LEFT_PANELS ? (
         <div className="mt-4 flex w-full flex-col items-center border-t border-border/70 pt-3">
           <Tooltip>
             <TooltipTrigger asChild>

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

@@ -125,7 +125,7 @@ export const DESIGN_SHORTCUTS: readonly DesignShortcutDefinition[] = [
   shortcut({
     id: "draw-tool",
     category: "tools",
-    bindings: ["y"],
+    bindings: ["shift+y"],
     labelKey: "designEditor.keyboardShortcuts.commands.drawTool",
     handler: "onDrawTool",
   }),
@@ -415,6 +415,15 @@ export const DESIGN_SHORTCUTS: readonly DesignShortcutDefinition[] = [
     labelKey: "designEditor.keyboardShortcuts.commands.swapFillStroke",
     handler: "onSwapFillStroke",
   }),
+  shortcut({
+    id: "eyedropper",
+    category: "edit",
+    // Apple platforms also accept literal ctrl+c; only the cross-platform
+    // binding is advertised so the row reads the same everywhere.
+    bindings: ["i"],
+    labelKey: "designEditor.keyboardShortcuts.commands.eyedropper",
+    handler: "onEyedropper",
+  }),
 
   shortcut({
     id: "bring-forward",

package/corpus/templates/design/app/components/design/multi-screen/alt-hover-measurement.ts

@@ -2,6 +2,7 @@ import type {
   DistanceGuideBand,
   EqualGapGuide,
   FrameBounds,
+  ProximityMeasurement,
 } from "@shared/canvas-math";
 
 import type {
@@ -54,8 +55,10 @@ export function equalGapGuidesEqual(a: EqualGapGuide[], b: EqualGapGuide[]) {
     if (
       x.orientation !== y.orientation ||
       x.gap !== y.gap ||
-      !distanceGuideBandEqual(x.bands[0], y.bands[0]) ||
-      !distanceGuideBandEqual(x.bands[1], y.bands[1])
+      x.bands.length !== y.bands.length ||
+      x.bands.some(
+        (band, index) => !distanceGuideBandEqual(band, y.bands[index]),
+      )
     ) {
       return false;
     }
@@ -63,6 +66,20 @@ export function equalGapGuidesEqual(a: EqualGapGuide[], b: EqualGapGuide[]) {
   return true;
 }
 
+export function proximityMeasurementsEqual(
+  a: ProximityMeasurement[],
+  b: ProximityMeasurement[],
+) {
+  if (a === b) return true;
+  if (a.length !== b.length) return false;
+  return a.every(
+    (measurement, index) =>
+      measurement.orientation === b[index].orientation &&
+      measurement.gap === b[index].gap &&
+      distanceGuideBandEqual(measurement.band, b[index].band),
+  );
+}
+
 export function altHoverMeasurementLineEqual(
   a: AltHoverMeasurementLine | null,
   b: AltHoverMeasurementLine | null,

package/corpus/templates/design/app/components/design/multi-screen/types.ts

@@ -3,7 +3,7 @@ import type {
   EqualGapGuide,
   FrameBounds,
 } from "@shared/canvas-math";
-import type { PenPath } from "@shared/pen-path";
+import type { PenCuspLatch, PenPath } from "@shared/pen-path";
 import type { ReactNode } from "react";
 
 import type {
@@ -344,7 +344,10 @@ export interface MultiScreenCanvasProps {
    *
    * Replaces the legacy onCreateBoardObject.
    */
-  onBoardDrawPrimitive?: (primitive: CanvasPrimitiveInsert) => boolean | string;
+  onBoardDrawPrimitive?: (
+    primitive: CanvasPrimitiveInsert,
+    options?: { nextTool?: "move" | "pen" },
+  ) => boolean | string;
   // ── Board edit callbacks (active-target model) ───────────────────────────
   /**
    * When true the board <DesignCanvas> is in edit mode.
@@ -799,6 +802,7 @@ export interface PenNodeDragState {
    * being an instant, undraggable straight-line close.
    */
   closing?: boolean;
+  cuspLatch: PenCuspLatch;
 }
 
 /** Dragging an anchor square of a `vectorEdit` overlay path (P-VE1). Anchor
@@ -825,6 +829,9 @@ export interface VectorEditHandleDragState {
   which: "in" | "out";
   pathBefore: PenPath;
   hasMoved: boolean;
+  /** Alt is a one-way latch for the drag: releasing it must not re-mirror the
+   *  pair the user just broke. */
+  symmetryBroken: boolean;
 }
 
 export interface DraftCreationPreview {

package/corpus/templates/design/app/components/layout/Header.tsx

@@ -94,3 +94,18 @@ export function Header() {
     </header>
   );
 }
+
+/**
+ * Mobile counterpart of the header actions slot: <Header> is `md:flex`, so
+ * without this every control a page publishes through `useSetHeaderActions`
+ * is unmounted below the `md` breakpoint.
+ */
+export function MobileHeaderActions() {
+  const actions = useHeaderActions();
+  if (!actions) return null;
+  return (
+    <div className="flex h-12 shrink-0 items-center gap-2 overflow-x-auto border-b border-border bg-background px-4 md:hidden">
+      {actions}
+    </div>
+  );
+}

package/corpus/templates/design/app/components/layout/Layout.tsx

@@ -31,7 +31,7 @@ import {
   FigmaLinkComposerBubble,
   useDetectedFigmaComposerLink,
 } from "../editor/FigmaLinkComposerBubble";
-import { Header } from "./Header";
+import { Header, MobileHeaderActions } from "./Header";
 import { Sidebar } from "./Sidebar";
 
 interface LayoutProps {
@@ -236,7 +236,12 @@ export function Layout({ children }: LayoutProps) {
                   </span>
                 </div>
               )}
-              {!hideHeader && <Header />}
+              {!hideHeader && (
+                <>
+                  <MobileHeaderActions />
+                  <Header />
+                </>
+              )}
               <main
                 className={cn(
                   "agent-native-app-main flex-1",

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

@@ -179,9 +179,9 @@ export interface UseDesignHotkeysProps {
    *  internal canvas clipboard's contents. */
   onPasteToReplace?: DesignHotkeyHandler;
   /**
-   * Figma's Control+C on Apple platforms — eyedropper: sample a color from
-   * anywhere on screen and apply it to the current selection. A one-shot
-   * action, not a persistent tool.
+   * Figma's I (and literal Control+C on Apple platforms) — eyedropper: sample
+   * a color from anywhere on screen and apply it to the current selection. A
+   * one-shot action, not a persistent tool.
    */
   onEyedropper?: DesignHotkeyHandler;
   /**
@@ -228,7 +228,6 @@ const TOOL_SHORTCUTS: Record<
   h: { tool: "hand", handler: "onHandTool" },
   k: { tool: "scale", handler: "onScaleTool" },
   c: { tool: "comment", handler: "onCommentTool" },
-  y: { tool: "draw", handler: "onDrawTool" },
 };
 
 // H1: shift+key variants of a base tool shortcut (Figma muscle-memory), e.g.
@@ -240,6 +239,9 @@ const SHIFT_TOOL_SHORTCUTS: Record<
   { tool: DesignHotkeyTool; handler: keyof UseDesignHotkeysProps }
 > = {
   l: { tool: "arrow", handler: "onArrowTool" },
+  // Draw switches the whole editor into annotate mode, so it takes a
+  // modifier: a bare letter flips modes by accident.
+  y: { tool: "draw", handler: "onDrawTool" },
 };
 
 export function isDesignHotkeyEditableTarget(target: EventTarget | null) {
@@ -554,6 +556,11 @@ export function handleDesignHotkey(
     if (key === "v") return runDistribute("vertical");
   }
 
+  // Figma's I — the Control+C binding below is macOS-only.
+  if (!primary && !event.altKey && !event.shiftKey && key === "i") {
+    return run(props.onEyedropper);
+  }
+
   // On macOS Figma reserves literal Control+C for Pick color while Cmd+C
   // remains Copy. Keep Ctrl+C as Copy on non-Apple platforms, where Ctrl is
   // the platform's primary modifier and Figma presents platform-specific

package/corpus/templates/design/app/i18n-data.ts

@@ -809,6 +809,7 @@ const enUS = {
         penTool: "Pen tool",
         handTool: "Hand tool",
         scaleTool: "Scale tool",
+        eyedropper: "Eyedropper", // i18n-copy-ignore every keyboardShortcuts.commands.* translation lives in i18n-keyboard-shortcuts.ts
         commentTool: "Comment tool",
         drawTool: "Draw tool",
         showLayers: "Show layers",

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

@@ -3,6 +3,7 @@ import { type LocaleCode } from "@agent-native/core/client/i18n";
 interface KeyboardShortcutLabels {
   title: string;
   essential: string;
+  eyedropper: string;
   shape: string;
   selection: string;
   cursor: string;
@@ -44,6 +45,7 @@ interface KeyboardKeyLabels {
 export const keyboardShortcutLabels = {
   "zh-TW": {
     title: "鍵盤快速鍵",
+    eyedropper: "取色器",
     essential: "基本",
     shape: "形狀",
     selection: "選取",
@@ -62,6 +64,7 @@ export const keyboardShortcutLabels = {
   },
   "zh-CN": {
     title: "键盘快捷键",
+    eyedropper: "取色器",
     essential: "基本",
     shape: "形状",
     selection: "选择",
@@ -80,6 +83,7 @@ export const keyboardShortcutLabels = {
   },
   "es-ES": {
     title: "Atajos de teclado",
+    eyedropper: "Cuentagotas",
     essential: "Esenciales",
     shape: "Formas",
     selection: "Selección",
@@ -99,6 +103,7 @@ export const keyboardShortcutLabels = {
   },
   "fr-FR": {
     title: "Raccourcis clavier",
+    eyedropper: "Pipette",
     essential: "Essentiels",
     shape: "Formes",
     selection: "Sélection",
@@ -119,6 +124,7 @@ export const keyboardShortcutLabels = {
   },
   "de-DE": {
     title: "Tastenkürzel",
+    eyedropper: "Pipette",
     essential: "Grundlagen",
     shape: "Formen",
     selection: "Auswahl",
@@ -139,6 +145,7 @@ export const keyboardShortcutLabels = {
   },
   "ja-JP": {
     title: "キーボードショートカット",
+    eyedropper: "スポイトツール",
     essential: "基本",
     shape: "シェイプ",
     selection: "選択",
@@ -157,6 +164,7 @@ export const keyboardShortcutLabels = {
   },
   "ko-KR": {
     title: "키보드 단축키",
+    eyedropper: "스포이드",
     essential: "필수",
     shape: "도형",
     selection: "선택",
@@ -175,6 +183,7 @@ export const keyboardShortcutLabels = {
   },
   "pt-BR": {
     title: "Atalhos de teclado",
+    eyedropper: "Conta-gotas",
     essential: "Essenciais",
     shape: "Formas",
     selection: "Seleção",
@@ -195,6 +204,7 @@ export const keyboardShortcutLabels = {
   },
   "hi-IN": {
     title: "कीबोर्ड शॉर्टकट",
+    eyedropper: "आई-ड्रॉपर",
     essential: "आवश्यक",
     shape: "आकृति",
     selection: "चयन",
@@ -213,6 +223,7 @@ export const keyboardShortcutLabels = {
   },
   "ar-SA": {
     title: "اختصارات لوحة المفاتيح",
+    eyedropper: "أداة القطارة",
     essential: "أساسي",
     shape: "الأشكال",
     selection: "التحديد",
@@ -575,6 +586,7 @@ export function attachLocalizedKeyboardShortcuts<
           penTool: d.tools.pen,
           handTool: d.tools.hand,
           scaleTool: d.tools.scale,
+          eyedropper: labels.eyedropper,
           commentTool: d.pinComment,
           drawTool: d.modes.draw,
           showLayers: layers.title,

package/corpus/templates/design/app/lib/design-system-data.ts

@@ -0,0 +1,68 @@
+export interface DesignSystemData {
+  source?: string;
+  builderJobId?: string;
+  builderStatus?: string;
+  builderSyncedAt?: string;
+  colors?: {
+    primary?: unknown;
+    secondary?: unknown;
+    accent?: unknown;
+    background?: unknown;
+    surface?: unknown;
+    text?: unknown;
+    textMuted?: unknown;
+  };
+  typography?: {
+    headingFont?: unknown;
+    bodyFont?: unknown;
+    headingWeight?: unknown;
+    bodyWeight?: unknown;
+  };
+  spacing?: Record<string, unknown>;
+  borders?: Record<string, unknown>;
+  logos?: Array<{ url?: string; name?: string; variant?: string }>;
+  defaults?: Record<string, unknown>;
+  notes?: unknown;
+  /** The source system's own named vocabulary; absent on kits predating it. */
+  tokens?: unknown;
+}
+
+export function parseDesignSystemData(
+  dataStr: string,
+): DesignSystemData | null {
+  try {
+    const parsed = JSON.parse(dataStr);
+    if (!parsed || typeof parsed !== "object" || Array.isArray(parsed)) {
+      return null;
+    }
+    return parsed as DesignSystemData;
+  } catch (error) {
+    if (error instanceof SyntaxError) return null;
+    throw error;
+  }
+}
+
+export function shouldRefreshBuilderDesignSystem(
+  system: Pick<{ accessRole?: string; data: string }, "accessRole" | "data">,
+): boolean {
+  const parsed = parseDesignSystemData(system.data);
+  return (
+    (system.accessRole === "owner" ||
+      system.accessRole === "admin" ||
+      system.accessRole === "editor") &&
+    parsed?.source === "builder" &&
+    (parsed.builderStatus === "in-progress" ||
+      ((parsed.builderStatus === "ready" ||
+        parsed.builderStatus === "complete" ||
+        parsed.builderStatus === "completed") &&
+        typeof parsed.builderSyncedAt !== "string"))
+  );
+}
+
+export function builderRefreshKey(system: {
+  id: string;
+  data: string;
+}): string {
+  const parsed = parseDesignSystemData(system.data);
+  return `${system.id}:${parsed?.builderJobId ?? "unknown"}`;
+}