@agent-native/core 0.136.5 → 0.137.1

package/corpus/templates/plan/app/components/plan/CanvasArea.tsx

@@ -77,6 +77,18 @@ type WorldPoint = {
   y: number;
 };
 
+type ClientPoint = {
+  x: number;
+  y: number;
+};
+
+type PinchGesture = {
+  pointerIds: [number, number];
+  startDistance: number;
+  startMidpoint: ClientPoint;
+  startView: CanvasView;
+};
+
 type PendingMarkup = {
   mode: "text" | "callout";
   origin: WorldPoint;
@@ -140,6 +152,10 @@ export function CanvasArea({
     [canvas.viewport?.pan?.x, canvas.viewport?.pan?.y, canvas.viewport?.zoom],
   );
   const [view, setView] = useState<CanvasView>(initialView);
+  const viewRef = useRef(view);
+  viewRef.current = view;
+  const activePointersRef = useRef(new Map<number, ClientPoint>());
+  const pinchGestureRef = useRef<PinchGesture | null>(null);
   const [drag, setDrag] = useState<{
     pointerId: number;
     startX: number;
@@ -581,8 +597,48 @@ export function CanvasArea({
   const onPointerDown = (event: ReactPointerEvent<HTMLDivElement>) => {
     if (event.button !== 0 && event.button !== 1) return;
     const target = event.target as HTMLElement;
+    const activePointers = activePointersRef.current;
     // Don't start a pan when grabbing interactive chrome (zoom controls etc.).
-    if (event.button === 0 && target.closest("[data-plan-interactive]")) return;
+    if (
+      event.button === 0 &&
+      target.closest("[data-plan-interactive]") &&
+      activePointers.size === 0
+    ) {
+      return;
+    }
+    activePointers.set(event.pointerId, {
+      x: event.clientX,
+      y: event.clientY,
+    });
+    if (activePointers.size >= 2) {
+      const pointerIds = Array.from(activePointers.keys()).slice(0, 2) as [
+        number,
+        number,
+      ];
+      const first = activePointers.get(pointerIds[0]);
+      const second = activePointers.get(pointerIds[1]);
+      if (!first || !second) return;
+      const rect = viewportRef.current?.getBoundingClientRect();
+      const startMidpoint = getMidpoint(first, second);
+      pinchGestureRef.current = {
+        pointerIds,
+        startDistance: getDistance(first, second),
+        startMidpoint: rect
+          ? {
+              x: startMidpoint.x - rect.left,
+              y: startMidpoint.y - rect.top,
+            }
+          : startMidpoint,
+        startView: viewRef.current,
+      };
+      setDrag(null);
+      setDraftCallout(null);
+      setPendingMarkup(null);
+      event.preventDefault();
+      event.stopPropagation();
+      event.currentTarget.setPointerCapture(event.pointerId);
+      return;
+    }
     if (!isEditableShortcutTarget(target)) {
       event.currentTarget.focus({ preventScroll: true });
     }
@@ -674,6 +730,37 @@ export function CanvasArea({
         onPointerDown={onPointerDown}
         onKeyDown={onViewportKeyDown}
         onPointerMove={(event) => {
+          const activePointer = activePointersRef.current.get(event.pointerId);
+          if (activePointer) {
+            activePointer.x = event.clientX;
+            activePointer.y = event.clientY;
+          }
+          const pinchGesture = pinchGestureRef.current;
+          if (pinchGesture) {
+            const first = activePointersRef.current.get(
+              pinchGesture.pointerIds[0],
+            );
+            const second = activePointersRef.current.get(
+              pinchGesture.pointerIds[1],
+            );
+            const rect = viewportRef.current?.getBoundingClientRect();
+            if (!first || !second || !rect) return;
+            const midpoint = getMidpoint(first, second);
+            const currentMidpoint = {
+              x: midpoint.x - rect.left,
+              y: midpoint.y - rect.top,
+            };
+            updateView(() =>
+              viewForPinchGesture({
+                gesture: pinchGesture,
+                currentDistance: getDistance(first, second),
+                currentMidpoint,
+              }),
+            );
+            event.preventDefault();
+            event.stopPropagation();
+            return;
+          }
           if (draftCallout?.pointerId === event.pointerId) {
             const point = clientPointToWorld(event);
             if (!point) return;
@@ -697,6 +784,28 @@ export function CanvasArea({
           }));
         }}
         onPointerUp={(event) => {
+          activePointersRef.current.delete(event.pointerId);
+          if (pinchGestureRef.current) {
+            event.preventDefault();
+            event.stopPropagation();
+            if (event.currentTarget.hasPointerCapture(event.pointerId)) {
+              event.currentTarget.releasePointerCapture(event.pointerId);
+            }
+            const remaining = Array.from(
+              activePointersRef.current.entries(),
+            )[0];
+            pinchGestureRef.current = null;
+            if (remaining) {
+              setDrag({
+                pointerId: remaining[0],
+                startX: remaining[1].x,
+                startY: remaining[1].y,
+                panX: viewRef.current.pan.x,
+                panY: viewRef.current.pan.y,
+              });
+            }
+            return;
+          }
           if (draftCallout?.pointerId === event.pointerId) {
             const point = clientPointToWorld(event) ?? draftCallout.current;
             event.preventDefault();
@@ -722,7 +831,9 @@ export function CanvasArea({
             setDrag(null);
           }
         }}
-        onPointerCancel={() => {
+        onPointerCancel={(event) => {
+          activePointersRef.current.delete(event.pointerId);
+          pinchGestureRef.current = null;
           setDraftCallout(null);
           setDrag(null);
         }}
@@ -838,6 +949,7 @@ export function CanvasArea({
       <div
         className="plan-canvas-zoom absolute bottom-3 left-3 z-10 flex items-center gap-0.5 rounded-lg border border-plan-line bg-plan-chrome p-0.5 shadow-md backdrop-blur"
         data-plan-interactive
+        title={t("raw.canvas.zoomHint")}
       >
         <Button
           type="button"
@@ -912,6 +1024,18 @@ function surfaceOf(frame: PlanArtboard): PlanWireframeSurface {
   return frame.surface ?? frame.wireframe?.surface ?? "desktop";
 }
 
+/**
+ * Keep the surface width stable while allowing long screens to reserve a
+ * taller, non-scrolling artboard in canvas mode.
+ */
+export function canvasFrameSize(frame: PlanArtboard) {
+  const preset = SURFACE_SIZE[surfaceOf(frame)];
+  return {
+    width: preset.width,
+    height: Math.max(preset.height, frame.height ?? preset.height),
+  };
+}
+
 function sameCanvasView(a: CanvasView, b: CanvasView) {
   return (
     Math.abs(a.zoom - b.zoom) < 0.0001 &&
@@ -980,11 +1104,9 @@ function layoutArtboards(frames: PlanArtboard[]): PlanArtboard[] {
 
   return frames.map((frame) => {
     const surface = surfaceOf(frame);
-    const preset = SURFACE_SIZE[surface];
-    // SURFACE owns the footprint/aspect — ignore any model-supplied width/height
-    // so a popover is always ~square and can never render "too wide".
-    const width = preset.width;
-    const height = preset.height;
+    // Surface owns the width/aspect. A larger explicit height is the
+    // non-scrolling escape hatch for long HTML screens on the canvas.
+    const { width, height } = canvasFrameSize(frame);
 
     if (frame.x !== undefined || frame.y !== undefined) {
       return {
@@ -1038,10 +1160,7 @@ function CanvasArtboard({
   onDesignElementSelect?: (selection: DesignElementSelection) => void;
 }) {
   const surface = surfaceOf(frame);
-  const preset = SURFACE_SIZE[surface];
-  // SURFACE-locked footprint (see layoutArtboards) — model width/height ignored.
-  const width = preset.width;
-  const height = preset.height;
+  const { width, height } = canvasFrameSize(frame);
   const label = frame.label ?? block?.title;
   // Report the frame's real rendered height so board connectors can anchor to
   // the content box (frames are capped at `height` but usually shorter).
@@ -2280,6 +2399,43 @@ function connectorRoute(
   };
 }
 
+export function viewForPinchGesture(input: {
+  gesture: PinchGesture;
+  currentDistance: number;
+  currentMidpoint: ClientPoint;
+}): CanvasView {
+  const { gesture, currentDistance, currentMidpoint } = input;
+  const nextZoom = clamp(
+    gesture.startView.zoom * (currentDistance / gesture.startDistance),
+    MIN_ZOOM,
+    MAX_ZOOM,
+  );
+  const worldX =
+    (gesture.startMidpoint.x - gesture.startView.pan.x) /
+    gesture.startView.zoom;
+  const worldY =
+    (gesture.startMidpoint.y - gesture.startView.pan.y) /
+    gesture.startView.zoom;
+  return {
+    zoom: nextZoom,
+    pan: {
+      x: currentMidpoint.x - worldX * nextZoom,
+      y: currentMidpoint.y - worldY * nextZoom,
+    },
+  };
+}
+
+function getMidpoint(first: ClientPoint, second: ClientPoint): ClientPoint {
+  return {
+    x: (first.x + second.x) / 2,
+    y: (first.y + second.y) / 2,
+  };
+}
+
+function getDistance(first: ClientPoint, second: ClientPoint) {
+  return Math.max(Math.hypot(first.x - second.x, first.y - second.y), 1);
+}
+
 function distance(a: WorldPoint, b: WorldPoint) {
   return Math.hypot(a.x - b.x, a.y - b.y);
 }

package/corpus/templates/plan/app/i18n/en-US.ts

@@ -157,6 +157,7 @@ const messages = {
       artboardCanvas: "Plan artboard canvas",
       zoomIn: "Zoom in",
       zoomOut: "Zoom out",
+      zoomHint: "Hold ⌘/Ctrl and scroll to zoom",
       markupSaveFailed: "Couldn't save markup. Try again.",
     },
     document: {

package/corpus/templates/plan/changelog/2026-08-04-canvas-zoom-controls-now-explain-the-command-ctrl-plus-scrol.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-08-04
+---
+
+Canvas zoom controls now explain the Command/Ctrl plus scroll shortcut

package/corpus/templates/plan/changelog/2026-08-04-pinch-to-zoom-is-now-supported-on-touchscreens-in-visual-pla.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-08-04
+---
+
+Pinch to zoom is now supported on touchscreens in visual plan canvases

package/corpus/templates/plan/shared/plan-content.ts

@@ -1495,12 +1495,27 @@ export const questionFormDataSchema: z.ZodType<PlanQuestionFormBlock["data"]> =
     submitLabel: z.string().trim().max(400).optional(),
   });
 
+/**
+ * Rich-text stores Markdown as runtime text. A fully escaped one-line payload
+ * ("### Heading\\n\\nBody") renders as one giant heading, so reject that shape at
+ * the shared schema instead of persisting a document that only looks valid.
+ * Escapes are still fine when they occur alongside real line breaks, such as
+ * an intentional `\\n` inside a code example.
+ */
+const planMarkdownSchema = z
+  .string()
+  .max(100_000)
+  .refine(
+    (value) => value.includes("\n") || !value.includes("\\n"),
+    "Rich-text Markdown must use actual line breaks, not a fully escaped `\\n` string.",
+  );
+
 export const planBlockSchema: z.ZodType<PlanBlock> = z.lazy(() =>
   z.discriminatedUnion("type", [
     baseBlockSchema.extend({
       type: z.literal("rich-text"),
       data: z.object({
-        markdown: z.string().max(100_000),
+        markdown: planMarkdownSchema,
       }),
     }),
     baseBlockSchema.extend({
@@ -2758,7 +2773,7 @@ const planContentPatchUnion = z.discriminatedUnion("op", [
     op: z.literal("update-rich-text"),
     blockId: idSchema,
     title: z.string().trim().min(1).max(180).optional(),
-    markdown: z.string().max(100_000).optional(),
+    markdown: planMarkdownSchema.optional(),
   }),
   z.object({
     op: z.literal("update-custom-html"),

package/corpus/templates/slides/app/components/editor/NewDeckReferenceStep.tsx

@@ -0,0 +1,321 @@
+import {
+  IconArrowRight,
+  IconPalette,
+  IconPresentation,
+  IconUpload,
+} from "@tabler/icons-react";
+import type { ChangeEvent, ReactNode } from "react";
+
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import type { Deck } from "@/context/DeckContext";
+import type { RecentReference } from "@/lib/recent-references";
+import { cn } from "@/lib/utils";
+
+export interface NewDeckReferenceSelection {
+  designSystemId?: string | null;
+  referenceDeckId?: string | null;
+}
+
+interface DesignSystemOption {
+  id: string;
+  title: string;
+  isDefault?: boolean;
+}
+
+interface NewDeckReferenceStepProps {
+  open: boolean;
+  designSystems: DesignSystemOption[];
+  decks: Deck[];
+  defaultDesignSystemId: string | null;
+  defaultReferenceDeckId: string | null;
+  recentReferences: RecentReference[];
+  onSelect: (selection: NewDeckReferenceSelection) => void;
+  onImport: (files: File[]) => Promise<void>;
+  onSkip: () => void;
+  onOpenChange: (open: boolean) => void;
+  importing?: boolean;
+  title: string;
+  designSystemLabel: string;
+  referenceDeckLabel: string;
+  chooseDeckLabel: string;
+  importFileLabel: string;
+  importingLabel: string;
+  skipLabel: string;
+  defaultSuffix: string;
+  starredLabel: string;
+  otherDecksLabel: string;
+  description: string;
+  promptNote?: string;
+}
+
+export function NewDeckReferenceStep({
+  open,
+  designSystems,
+  decks,
+  defaultDesignSystemId,
+  defaultReferenceDeckId,
+  recentReferences,
+  onSelect,
+  onImport,
+  onSkip,
+  onOpenChange,
+  importing = false,
+  title,
+  designSystemLabel,
+  referenceDeckLabel,
+  chooseDeckLabel,
+  importFileLabel,
+  importingLabel,
+  skipLabel,
+  defaultSuffix,
+  starredLabel,
+  otherDecksLabel,
+  description,
+  promptNote,
+}: NewDeckReferenceStepProps) {
+  const designSystemById = new Map(
+    designSystems.map((designSystem) => [designSystem.id, designSystem]),
+  );
+  const deckById = new Map(decks.map((deck) => [deck.id, deck]));
+  const recentOptions = recentReferences
+    .map((reference) => {
+      const item =
+        reference.kind === "design-system"
+          ? designSystemById.get(reference.id)
+          : deckById.get(reference.id);
+      return item ? { reference, item } : null;
+    })
+    .filter(
+      (
+        value,
+      ): value is {
+        reference: RecentReference;
+        item: DesignSystemOption | Deck;
+      } => value !== null,
+    );
+  const defaultReferenceKeys = new Set(
+    [
+      defaultDesignSystemId ? `design-system:${defaultDesignSystemId}` : null,
+      defaultReferenceDeckId ? `deck:${defaultReferenceDeckId}` : null,
+    ].filter((value): value is string => value !== null),
+  );
+  const visibleRecentOptions = recentOptions.filter(
+    ({ reference }) =>
+      !defaultReferenceKeys.has(`${reference.kind}:${reference.id}`),
+  );
+  const starredDecks = decks.filter((deck) => deck.starred);
+  const otherDecks = decks.filter((deck) => !deck.starred);
+
+  const handleImport = async (event: ChangeEvent<HTMLInputElement>) => {
+    const files = Array.from(event.target.files ?? []);
+    event.target.value = "";
+    if (files.length === 0) return;
+    await onImport(files);
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-h-[min(720px,calc(100vh-32px))] overflow-y-auto sm:max-w-2xl">
+        <DialogHeader>
+          <DialogTitle>{title}</DialogTitle>
+          <DialogDescription>{description}</DialogDescription>
+        </DialogHeader>
+
+        <div className="grid gap-4">
+          {(defaultDesignSystemId || defaultReferenceDeckId) && (
+            <div className="grid gap-2 sm:grid-cols-2">
+              {defaultDesignSystemId &&
+                designSystemById.has(defaultDesignSystemId) && (
+                  <ReferenceCard
+                    icon={<IconPalette className="size-4" />}
+                    label={
+                      designSystemById.get(defaultDesignSystemId)?.title ??
+                      designSystemLabel
+                    }
+                    meta={`${designSystemLabel}${defaultSuffix}`}
+                    onClick={() =>
+                      onSelect({
+                        designSystemId: defaultDesignSystemId,
+                        referenceDeckId: null,
+                      })
+                    }
+                  />
+                )}
+              {defaultReferenceDeckId &&
+                deckById.has(defaultReferenceDeckId) && (
+                  <ReferenceCard
+                    icon={<IconPresentation className="size-4" />}
+                    label={deckById.get(defaultReferenceDeckId)?.title ?? ""}
+                    meta={`${referenceDeckLabel}${defaultSuffix}`}
+                    onClick={() =>
+                      onSelect({
+                        designSystemId: null,
+                        referenceDeckId: defaultReferenceDeckId,
+                      })
+                    }
+                  />
+                )}
+            </div>
+          )}
+
+          {visibleRecentOptions.length > 0 && (
+            <div className="grid gap-2">
+              <div className="grid gap-2 sm:grid-cols-2">
+                {visibleRecentOptions.map(({ reference, item }) => (
+                  <ReferenceCard
+                    key={`${reference.kind}:${reference.id}`}
+                    icon={
+                      reference.kind === "design-system" ? (
+                        <IconPalette className="size-4" />
+                      ) : (
+                        <IconPresentation className="size-4" />
+                      )
+                    }
+                    label={item.title}
+                    meta={
+                      reference.kind === "design-system"
+                        ? designSystemLabel
+                        : referenceDeckLabel
+                    }
+                    onClick={() =>
+                      onSelect(
+                        reference.kind === "design-system"
+                          ? {
+                              designSystemId: reference.id,
+                              referenceDeckId: null,
+                            }
+                          : {
+                              designSystemId: null,
+                              referenceDeckId: reference.id,
+                            },
+                      )
+                    }
+                  />
+                ))}
+              </div>
+            </div>
+          )}
+
+          {decks.length > 0 && (
+            <div className="grid gap-2">
+              <span className="text-xs font-medium text-muted-foreground">
+                {referenceDeckLabel}
+              </span>
+              <Select
+                onValueChange={(value) =>
+                  onSelect({ designSystemId: null, referenceDeckId: value })
+                }
+              >
+                <SelectTrigger className="w-full">
+                  <SelectValue placeholder={chooseDeckLabel} />
+                </SelectTrigger>
+                <SelectContent>
+                  {starredDecks.length > 0 && (
+                    <SelectGroup>
+                      <SelectLabel>{starredLabel}</SelectLabel>
+                      {starredDecks.map((deck) => (
+                        <SelectItem key={deck.id} value={deck.id}>
+                          {deck.title}
+                        </SelectItem>
+                      ))}
+                    </SelectGroup>
+                  )}
+                  {otherDecks.length > 0 && (
+                    <SelectGroup>
+                      <SelectLabel>{otherDecksLabel}</SelectLabel>
+                      {otherDecks.map((deck) => (
+                        <SelectItem key={deck.id} value={deck.id}>
+                          {deck.title}
+                        </SelectItem>
+                      ))}
+                    </SelectGroup>
+                  )}
+                </SelectContent>
+              </Select>
+            </div>
+          )}
+
+          <div className="flex flex-wrap items-center gap-2 border-t border-border pt-3">
+            <label
+              className={cn(
+                "inline-flex cursor-pointer items-center gap-2 rounded-md border border-border px-3 py-2 text-sm font-medium transition-colors hover:bg-accent",
+                importing && "pointer-events-none opacity-60",
+              )}
+            >
+              <IconUpload className="size-4" />
+              {importing ? importingLabel : importFileLabel}
+              <input
+                type="file"
+                className="sr-only"
+                accept=".pptx,.pdf,.docx"
+                multiple
+                disabled={importing}
+                onChange={(event) => void handleImport(event)}
+              />
+            </label>
+          </div>
+        </div>
+
+        {promptNote && (
+          <p className="truncate border-t border-border pt-3 text-xs text-muted-foreground">
+            {promptNote}
+          </p>
+        )}
+
+        <div className="flex items-center justify-between border-t border-border pt-3">
+          <Button type="button" variant="ghost" onClick={onSkip}>
+            {skipLabel}
+          </Button>
+          <IconArrowRight className="size-4 text-muted-foreground" />
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+function ReferenceCard({
+  icon,
+  label,
+  meta,
+  onClick,
+}: {
+  icon: ReactNode;
+  label: string;
+  meta: string;
+  onClick: () => void;
+}) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className="flex min-w-0 items-center gap-3 rounded-lg border border-border bg-card px-3 py-3 text-start transition-colors hover:border-foreground/30 hover:bg-accent/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+    >
+      <span className="flex size-8 shrink-0 items-center justify-center rounded-md bg-accent text-muted-foreground">
+        {icon}
+      </span>
+      <span className="min-w-0">
+        <span className="block truncate text-sm font-medium">{label}</span>
+        <span className="block truncate text-xs text-muted-foreground">
+          {meta}
+        </span>
+      </span>
+      <IconArrowRight className="ms-auto size-4 shrink-0 text-muted-foreground" />
+    </button>
+  );
+}

package/corpus/templates/slides/app/components/editor/PromptDialog.tsx

@@ -16,6 +16,37 @@ export interface UploadedFile {
   size: number;
 }
 
+export async function uploadPromptFiles(
+  files: File[],
+): Promise<UploadedFile[]> {
+  if (files.length === 0) return [];
+  const formData = new FormData();
+  files.forEach((file) => formData.append("files", file));
+  const response = await fetch(`${appBasePath()}/api/uploads`, {
+    method: "POST",
+    body: formData,
+  });
+  if (!response.ok) {
+    let message = "Upload failed";
+    try {
+      const data: unknown = await response.json();
+      if (
+        data &&
+        typeof data === "object" &&
+        "error" in data &&
+        typeof data.error === "string" &&
+        data.error.trim()
+      ) {
+        message = data.error;
+      }
+    } catch (error) {
+      throw new Error(`Upload failed (${response.status})`, { cause: error });
+    }
+    throw new Error(message);
+  }
+  return (await response.json()) as UploadedFile[];
+}
+
 /**
  * Radix popovers portal to `document.body`, so a mousedown inside the model
  * picker or attachment menu reads as "outside" any panel that hosts a composer.
@@ -137,17 +168,7 @@ export default function PromptPopover({
       if (files.length === 0) return [];
       setUploading(true);
       try {
-        const formData = new FormData();
-        files.forEach((f) => formData.append("files", f));
-        const res = await fetch(`${appBasePath()}/api/uploads`, {
-          method: "POST",
-          body: formData,
-        });
-        if (!res.ok) {
-          const data = await res.json().catch(() => null);
-          throw new Error(data?.error || "Upload failed");
-        }
-        return (await res.json()) as UploadedFile[];
+        return await uploadPromptFiles(files);
       } finally {
         setUploading(false);
       }