@agent-native/toolkit 0.11.2 → 0.12.0

package/README.md

@@ -39,6 +39,14 @@ import {
   StatsCard,
   buildDashboardPanelGroups,
 } from "@agent-native/toolkit/dashboard";
+import {
+  CanvasCommentPins,
+  DrawOverlay,
+} from "@agent-native/toolkit/canvas-annotations";
+import {
+  createCanvasGestureController,
+  createCanvasInteractionCore,
+} from "@agent-native/toolkit/canvas-interactions";
 import { VisualTweakControl } from "@agent-native/toolkit/design-tweaks";
 import { SharedRichEditor } from "@agent-native/toolkit/editor";
 import { VisibilityBadge } from "@agent-native/toolkit/sharing";
@@ -56,6 +64,17 @@ source scanning. If an app renders `SharedRichEditor`, also import
 `@agent-native/toolkit/editor.css`. If an app renders `ChatHistoryList` or
 `ChatHistoryRail`, also import `@agent-native/toolkit/chat-history.css`.
 
+`DrawOverlay` backs the Design and Slides drawing tools. `CanvasCommentPins`
+provides lightweight, transient pins that send canvas context to an agent.
+Translation, agent-chat routing, document context, and storage-backed review
+threads stay with the app.
+
+`createCanvasGestureController` provides a headless move and resize state
+machine with zoom conversion, modifier policies, previews, cancellation, and a
+single commit boundary. Apps provide adapters for selection, rendering, and
+persistence. `createCanvasInteractionCore` exposes the same shared geometry,
+text-activation, Escape, nudge, and shortcut policies without owning state.
+
 Use `ChatHistoryRail` for app sidebars. It shows five recent chats by default,
 progressively discloses up to fifteen, and keeps the app-provided New chat
 action in a footer row with the ellipsis disclosure on its right. The app

package/agent-native.eject.json

@@ -151,6 +151,41 @@
       ],
       "verification": ["pnpm typecheck"]
     },
+    {
+      "id": "toolkit/canvas-annotations",
+      "label": "Canvas drawing and pinned agent comments",
+      "catalog": "toolkit-ui",
+      "catalogItems": ["canvas-annotations"],
+      "entrypoints": ["./canvas-annotations", "./canvas-annotations/*"],
+      "strategy": "source-copy",
+      "sourceEntries": ["src/canvas-annotations"],
+      "targetRoot": "app/components/agent-native/toolkit",
+      "dependencies": [
+        "@radix-ui/react-slot",
+        "@radix-ui/react-tooltip",
+        "@tabler/icons-react",
+        "class-variance-authority",
+        "clsx",
+        "culori",
+        "react",
+        "react-dom",
+        "sonner",
+        "tailwind-merge"
+      ],
+      "verification": ["pnpm typecheck"]
+    },
+    {
+      "id": "toolkit/canvas-interactions",
+      "label": "Canvas gestures, geometry, and shortcuts",
+      "catalog": "toolkit-ui",
+      "catalogItems": ["canvas-interactions"],
+      "entrypoints": ["./canvas-interactions", "./canvas-interactions/*"],
+      "strategy": "source-copy",
+      "sourceEntries": ["src/canvas-interactions"],
+      "targetRoot": "app/components/agent-native/toolkit",
+      "dependencies": [],
+      "verification": ["pnpm typecheck"]
+    },
     {
       "id": "toolkit/composer",
       "label": "Agent composer",
@@ -229,8 +264,11 @@
       "sourceEntries": ["src/design-tweaks"],
       "targetRoot": "app/components/agent-native/toolkit",
       "dependencies": [
+        "@radix-ui/react-label",
         "@radix-ui/react-popover",
+        "@radix-ui/react-tooltip",
         "@tabler/icons-react",
+        "class-variance-authority",
         "clsx",
         "react",
         "tailwind-merge"

package/dist/canvas-annotations/CanvasCommentPins.d.ts

@@ -0,0 +1,68 @@
+import type { CanvasAnnotationTranslate, SendCanvasAnnotation } from "./types.js";
+export interface CanvasPin {
+    id: string;
+    /** Position as a percentage of the canvas (so it survives resize/zoom) */
+    xPct: number;
+    yPct: number;
+    /** Optional CSS selector of the element under the click, for context */
+    targetSelector?: string;
+    /** Best-effort stable canvas/code-layer id when the clicked layer exposes one. */
+    targetAnchorId?: string;
+    /** Optional snippet of text content the user clicked near */
+    targetText?: string;
+    /** Pending comment text the user is composing */
+    draft?: string;
+    /** Held locally until the user batch-applies queued comments. */
+    queued?: boolean;
+    /** Submitted state — the marker stays visible as confirmation. */
+    submitted?: boolean;
+}
+export interface CanvasCommentPinsProps {
+    translate: CanvasAnnotationTranslate;
+    sendToAgent: SendCanvasAnnotation;
+    onSendError?: () => void;
+    allowQueue?: boolean;
+    showAnchorDetails?: boolean;
+    showSubmitShortcut?: boolean;
+    /** Whether the pin tool is active. When true, clicks drop pins. */
+    active: boolean;
+    /** In queue mode, pin Send adds to the shared annotation batch. */
+    submitMode?: "direct" | "queue";
+    /** Disable / exit the pin mode (called on Escape, after submit, etc.) */
+    onClose: () => void;
+    /** Mirrors local pins to a parent that can submit them with other annotations. */
+    onPinsChange?: (pins: CanvasPin[]) => void;
+    /** Increment to mark queued pins as submitted by a parent action. */
+    submitQueuedSignal?: number;
+    /** Keep the click plane below a sibling draw toolbar in combined annotate mode. */
+    clickPlaneUnderToolbar?: boolean;
+    /**
+     * Selector for the canvas surface (e.g. `.slide-content`). Pins are anchored
+     * to this element's bounding rect; clicks outside are ignored.
+     */
+    canvasSelector: string;
+    /** Stable identifier for the current view (slide id / design id) — used in
+     * the agent prompt and as a pin namespace key. */
+    contextId: string;
+    /** Human-readable label for the context (slide title, slide index, design
+     * title) used in the agent prompt. */
+    contextLabel?: string;
+}
+/**
+ * Click-to-comment pins anchored to the canvas.
+ *
+ * Mirrors claude.ai/design's "inline comments" feature — the most-praised
+ * interaction pattern of that tool. A user clicks anywhere on the canvas to
+ * drop a pin, types a one-line instruction, and the pin's position + nearby
+ * element selector + instruction is sent to the agent. Submitted pins stay on
+ * the canvas as local confirmation; the agent's reply lands in the chat
+ * sidebar where it can make targeted edits.
+ *
+ * Why pins (vs text-anchored comments):
+ *   The existing slide_comments table anchors comments to text selections via
+ *   TipTap. That's good for prose review — but Rochkind also wants to point
+ *   to images, charts, and whitespace. Pins handle those cases without
+ *   requiring a text selection.
+ */
+export declare function CanvasCommentPins({ translate, sendToAgent, onSendError, allowQueue, showAnchorDetails, showSubmitShortcut, active, submitMode, onClose, onPinsChange, submitQueuedSignal, clickPlaneUnderToolbar, canvasSelector, contextId, contextLabel, }: CanvasCommentPinsProps): import("react").JSX.Element | null;
+//# sourceMappingURL=CanvasCommentPins.d.ts.map

package/dist/canvas-annotations/CanvasCommentPins.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CanvasCommentPins.d.ts","sourceRoot":"","sources":["../../src/canvas-annotations/CanvasCommentPins.tsx"],"names":[],"mappings":"AAoBA,OAAO,KAAK,EACV,yBAAyB,EACzB,oBAAoB,EACrB,MAAM,YAAY,CAAC;AAEpB,MAAM,WAAW,SAAS;IACxB,EAAE,EAAE,MAAM,CAAC;IACX,0EAA0E;IAC1E,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,wEAAwE;IACxE,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,kFAAkF;IAClF,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,6DAA6D;IAC7D,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,iDAAiD;IACjD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iEAAiE;IACjE,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,kEAAkE;IAClE,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,WAAW,sBAAsB;IACrC,SAAS,EAAE,yBAAyB,CAAC;IACrC,WAAW,EAAE,oBAAoB,CAAC;IAClC,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,mEAAmE;IACnE,MAAM,EAAE,OAAO,CAAC;IAChB,mEAAmE;IACnE,UAAU,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAChC,yEAAyE;IACzE,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,kFAAkF;IAClF,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,EAAE,KAAK,IAAI,CAAC;IAC3C,qEAAqE;IACrE,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,mFAAmF;IACnF,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC;;;OAGG;IACH,cAAc,EAAE,MAAM,CAAC;IACvB;sDACkD;IAClD,SAAS,EAAE,MAAM,CAAC;IAClB;0CACsC;IACtC,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAgID;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,SAAS,EACT,WAAW,EACX,WAAW,EACX,UAAiB,EACjB,iBAAwB,EACxB,kBAAyB,EACzB,MAAM,EACN,UAAqB,EACrB,OAAO,EACP,YAAY,EACZ,kBAAkB,EAClB,sBAA8B,EAC9B,cAAc,EACd,SAAS,EACT,YAAY,GACb,EAAE,sBAAsB,sCAknBxB"}