@agent-native/core 0.128.0 → 0.128.2

package/corpus/templates/slides/app/components/design-system/builder-design-system-upload.ts

@@ -0,0 +1,271 @@
+import { appApiPath } from "@agent-native/core/client/api-path";
+
+import {
+  type BuilderIndexResult,
+  readBuilderIndexResponse,
+} from "./builder-index-response";
+
+// GCS resumable uploads require every chunk except the last to be a multiple
+// of 256 KiB. 16 MiB is the recommended default and keeps very large `.fig`
+// files off a single request body (the serverless host caps bodies well below
+// Figma export sizes).
+const GCS_CHUNK_SIZE = 16 * 1024 * 1024;
+const MAX_CHUNK_RETRIES = 5;
+
+interface UploadSlot {
+  idx: number;
+  uploadUrl: string;
+  uploadToken: string;
+}
+
+async function readJson(res: Response): Promise<any> {
+  try {
+    return await res.json();
+  } catch {
+    return null;
+  }
+}
+
+async function requestUploadSlots(files: File[]): Promise<UploadSlot[]> {
+  const res = await fetch(appApiPath("/api/design-system-upload-start"), {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({
+      attachments: files.map((file) => ({
+        name: file.name,
+        mimetype: file.type || "application/octet-stream",
+        declaredSize: file.size,
+      })),
+    }),
+  });
+  const json = await readJson(res);
+  if (!res.ok || json?.error) {
+    throw new Error(json?.error || `Failed to start upload (${res.status})`);
+  }
+  const slots = Array.isArray(json?.uploads)
+    ? ([...json.uploads] as UploadSlot[]).sort((a, b) => a.idx - b.idx)
+    : [];
+  if (slots.length !== files.length) {
+    throw new Error("Upload could not be started for all files.");
+  }
+  return slots;
+}
+
+async function initiateResumableSession(
+  uploadUrl: string,
+  mimetype: string,
+  fileSize: number,
+): Promise<string> {
+  const response = await fetch(uploadUrl, {
+    method: "POST",
+    headers: {
+      "x-goog-resumable": "start",
+      // The signed URL commits to the exact declared size; echo it back
+      // byte-for-byte or GCS rejects the session.
+      "x-goog-content-length-range": `0,${fileSize}`,
+      "Content-Type": mimetype,
+    },
+  });
+  if (!response.ok) {
+    throw new Error(`Failed to initiate upload session (${response.status})`);
+  }
+  const sessionUri = response.headers.get("Location");
+  if (!sessionUri) {
+    throw new Error("Upload session URI missing from storage response");
+  }
+  return sessionUri;
+}
+
+// GCS reports the highest committed byte in a `Range: bytes=0-<end>` header.
+function committedOffsetFromRange(response: Response): number | null {
+  const match = response.headers.get("Range")?.match(/bytes=0-(\d+)/);
+  return match ? parseInt(match[1], 10) + 1 : null;
+}
+
+async function queryCommittedOffset(
+  sessionUri: string,
+  total: number,
+): Promise<number> {
+  const response = await fetch(sessionUri, {
+    method: "PUT",
+    headers: { "Content-Range": `bytes */${total}` },
+  });
+  if (response.status === 200 || response.status === 201) return total;
+  if (response.status === 308) return committedOffsetFromRange(response) ?? 0;
+  throw new Error(`Failed to query upload status (${response.status})`);
+}
+
+function delay(ms: number, signal?: AbortSignal): Promise<void> {
+  return new Promise((resolve, reject) => {
+    if (signal?.aborted) {
+      return reject(new DOMException("Aborted", "AbortError"));
+    }
+    const timer = setTimeout(resolve, ms);
+    signal?.addEventListener(
+      "abort",
+      () => {
+        clearTimeout(timer);
+        reject(new DOMException("Aborted", "AbortError"));
+      },
+      { once: true },
+    );
+  });
+}
+
+async function streamFileToStorage(
+  slot: UploadSlot,
+  file: File,
+  onProgress: (uploadedBytes: number) => void,
+): Promise<void> {
+  const mimetype = file.type || "application/octet-stream";
+  const sessionUri = await initiateResumableSession(
+    slot.uploadUrl,
+    mimetype,
+    file.size,
+  );
+  const total = file.size;
+
+  if (total === 0) {
+    const response = await fetch(sessionUri, {
+      method: "PUT",
+      headers: { "Content-Range": "bytes */0" },
+      body: new Uint8Array(0),
+    });
+    if (response.status !== 200 && response.status !== 201) {
+      throw new Error(
+        `Failed to finalize zero-byte upload (${response.status})`,
+      );
+    }
+    onProgress(0);
+    return;
+  }
+
+  let offset = 0;
+  let retries = 0;
+  while (offset < total) {
+    const end = Math.min(offset + GCS_CHUNK_SIZE, total);
+    const isLast = end === total;
+    try {
+      const response = await fetch(sessionUri, {
+        method: "PUT",
+        headers: { "Content-Range": `bytes ${offset}-${end - 1}/${total}` },
+        body: file.slice(offset, end),
+      });
+      if (response.status === 200 || response.status === 201) {
+        offset = total;
+      } else if (!isLast && response.status === 308) {
+        const nextOffset = committedOffsetFromRange(response) ?? offset;
+        if (nextOffset <= offset) {
+          throw new Error(`Upload stalled at byte ${offset}`);
+        }
+        offset = nextOffset;
+      } else {
+        throw new Error(`Unexpected upload status ${response.status}`);
+      }
+      retries = 0;
+      onProgress(offset);
+    } catch (err) {
+      if (++retries > MAX_CHUNK_RETRIES) throw err;
+      await delay(500 * retries);
+      try {
+        offset = await queryCommittedOffset(sessionUri, total);
+      } catch {
+        // If the offset query also fails, retry from the last local offset —
+        // GCS's resumable PUT safely re-acknowledges bytes it already has.
+      }
+      onProgress(offset);
+    }
+  }
+}
+
+export interface UploadAndIndexOptions {
+  projectName?: string;
+  onProgress?: (fraction: number) => void;
+}
+
+/**
+ * Streams `.fig`/design files straight to storage in resumable chunks, then
+ * finalizes Builder DSI indexing with the resulting upload tokens. No file
+ * bytes pass through the app server, so arbitrarily large Figma files work.
+ */
+export async function uploadAndIndexFigmaFiles(
+  files: File[],
+  options: UploadAndIndexOptions = {},
+): Promise<BuilderIndexResult> {
+  if (files.length === 0) throw new Error("No files to upload.");
+
+  const slots = await requestUploadSlots(files);
+
+  const totalBytes = files.reduce((sum, file) => sum + file.size, 0) || 1;
+  const uploadedPerFile = new Array<number>(files.length).fill(0);
+  for (let i = 0; i < files.length; i++) {
+    await streamFileToStorage(slots[i], files[i], (uploaded) => {
+      uploadedPerFile[i] = uploaded;
+      const done = uploadedPerFile.reduce((sum, n) => sum + n, 0);
+      options.onProgress?.(Math.min(done / totalBytes, 1));
+    });
+  }
+
+  const res = await fetch(appApiPath("/api/index-design-system-sources"), {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({
+      projectName: options.projectName,
+      uploadTokens: slots.map((slot) => slot.uploadToken),
+    }),
+  });
+  return readBuilderIndexResponse(res);
+}
+
+export interface DecodeJobStatus {
+  status: "pending" | "processing" | "complete" | "error";
+  branchUrl: string | null;
+  error: string | null;
+  framesProcessed: number;
+  totalFrames: number;
+}
+
+const DECODE_JOB_POLL_INTERVAL_MS = 5_000;
+const DECODE_JOB_MAX_POLLS = 120; // ~10 min at 5s, so a stuck job can't loop forever
+
+export interface PollDecodeJobOptions {
+  signal?: AbortSignal;
+  onUpdate?: (status: DecodeJobStatus) => void;
+}
+
+/**
+ * After indexing returns a jobId, the `.fig` decode job is still `pending` with
+ * no branchUrl. Poll until the branch appears or the job reaches a terminal
+ * state. A job that reports `status: "error"` resolves so the caller can read
+ * `status.error`; network failures, timeouts, and aborts reject.
+ */
+export async function pollDecodeJobStatus(
+  jobId: string,
+  options: PollDecodeJobOptions = {},
+): Promise<DecodeJobStatus> {
+  const { signal, onUpdate } = options;
+  const path = appApiPath(
+    `/api/design-system-decode-job-status?jobId=${encodeURIComponent(jobId)}`,
+  );
+  for (let i = 0; i < DECODE_JOB_MAX_POLLS; i++) {
+    if (signal?.aborted) throw new DOMException("Aborted", "AbortError");
+    const res = await fetch(path, { signal });
+    const json = await readJson(res);
+    if (!res.ok || json?.error) {
+      throw new Error(json?.error || `Status check failed (${res.status})`);
+    }
+    const status = json as DecodeJobStatus;
+    onUpdate?.(status);
+    if (
+      status.branchUrl ||
+      status.status === "complete" ||
+      status.status === "error"
+    ) {
+      return status;
+    }
+    await delay(DECODE_JOB_POLL_INTERVAL_MS, signal);
+  }
+  throw new Error(
+    "Timed out waiting for the design system to finish decoding.",
+  );
+}

package/corpus/templates/slides/app/components/design-system/builder-index-response.ts

@@ -13,7 +13,7 @@ export interface BuilderIndexResult {
   builderConnectUrl?: string;
 }
 
-export const MAX_BUILDER_INDEX_UPLOAD_BYTES = 200 * 1024 * 1024;
+export const MAX_BUILDER_INDEX_UPLOAD_BYTES = 512 * 1024 * 1024;
 
 export function formatFileSize(bytes: number): string {
   return `${Math.round(bytes / 1024 / 1024)} MB`;

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

@@ -537,6 +537,7 @@ const messages = {
     builderDesignSystemId: "Design system",
     builderJobId: "Job",
     openInBuilder: "Open in Builder",
+    decodeFailed: "Decoding failed: {{error}}",
     websiteUrl: "Website URL",
     websitePlaceholder: "example.com or Nike",
     add: "Add",

package/corpus/templates/slides/server/handlers/design-system-decode-job-status.ts

@@ -0,0 +1,49 @@
+import {
+  FeatureNotConfiguredError,
+  fetchBuilderDesignSystemDecodeJobStatus,
+  getSession,
+} from "@agent-native/core/server";
+import { defineEventHandler, getQuery, setResponseStatus } from "h3";
+
+import { withSlidesRequestContext } from "./request-auth-context.js";
+
+/**
+ * Reads a Builder design-system decode job's status. The UI polls this after
+ * `/api/index-design-system-sources` returns a jobId, until the `.fig` decode
+ * job leaves `pending` and exposes a `branchUrl` (or reports an `error`).
+ */
+export const designSystemDecodeJobStatus = defineEventHandler(async (event) => {
+  const session = await getSession(event).catch(() => null);
+  if (!session?.email) {
+    setResponseStatus(event, 401);
+    return { error: "Unauthorized" };
+  }
+
+  const jobId = getQuery(event).jobId;
+  if (typeof jobId !== "string" || !jobId.trim()) {
+    setResponseStatus(event, 400);
+    return { error: "jobId is required." };
+  }
+
+  try {
+    return await withSlidesRequestContext(event, () =>
+      fetchBuilderDesignSystemDecodeJobStatus(jobId.trim()),
+    );
+  } catch (err) {
+    if (err instanceof FeatureNotConfiguredError) {
+      setResponseStatus(event, 412);
+      return {
+        error: err.message,
+        builderConnectUrl:
+          err.builderConnectUrl ?? "/_agent-native/builder/connect",
+      };
+    }
+    setResponseStatus(event, 502);
+    return {
+      error:
+        err instanceof Error
+          ? err.message
+          : "Failed to read decode job status.",
+    };
+  }
+});

package/corpus/templates/slides/server/handlers/design-system-upload-start.ts

@@ -0,0 +1,87 @@
+import {
+  FeatureNotConfiguredError,
+  getSession,
+  startBuilderDesignSystemUpload,
+} from "@agent-native/core/server";
+import { defineEventHandler, readBody, setResponseStatus } from "h3";
+
+import { withSlidesRequestContext } from "./request-auth-context.js";
+
+const MAX_FIG_BYTES = 512 * 1024 * 1024;
+
+interface AttachmentInput {
+  name?: unknown;
+  mimetype?: unknown;
+  declaredSize?: unknown;
+}
+
+/**
+ * Opens signed resumable-upload slots so the browser can stream large `.fig`
+ * bytes straight to storage. Only small JSON metadata rides through the app
+ * server; the file bytes never do.
+ */
+export const designSystemUploadStart = defineEventHandler(async (event) => {
+  const session = await getSession(event).catch(() => null);
+  if (!session?.email) {
+    setResponseStatus(event, 401);
+    return { error: "Unauthorized" };
+  }
+
+  const body = (await readBody(event).catch(() => null)) as {
+    attachments?: AttachmentInput[];
+  } | null;
+  const rawList = Array.isArray(body?.attachments) ? body.attachments : [];
+  if (rawList.length === 0) {
+    setResponseStatus(event, 400);
+    return { error: "No attachments provided." };
+  }
+
+  const attachments: {
+    name: string;
+    mimetype: string;
+    declaredSize: number;
+  }[] = [];
+  for (const raw of rawList) {
+    const name = typeof raw?.name === "string" ? raw.name.trim() : "";
+    const mimetype =
+      typeof raw?.mimetype === "string" && raw.mimetype.trim()
+        ? raw.mimetype.trim()
+        : "application/octet-stream";
+    const declaredSize = Number(raw?.declaredSize);
+    if (!name) {
+      setResponseStatus(event, 400);
+      return { error: "Attachment name is required." };
+    }
+    if (!Number.isSafeInteger(declaredSize) || declaredSize <= 0) {
+      setResponseStatus(event, 400);
+      return { error: "Attachment declaredSize must be a positive integer." };
+    }
+    if (declaredSize > MAX_FIG_BYTES) {
+      setResponseStatus(event, 413);
+      return {
+        error: `File too large (max ${Math.round(MAX_FIG_BYTES / 1024 / 1024)} MB).`,
+      };
+    }
+    attachments.push({ name, mimetype, declaredSize });
+  }
+
+  try {
+    const uploads = await withSlidesRequestContext(event, () =>
+      startBuilderDesignSystemUpload(attachments),
+    );
+    return { uploads };
+  } catch (err) {
+    if (err instanceof FeatureNotConfiguredError) {
+      setResponseStatus(event, 412);
+      return {
+        error: err.message,
+        builderConnectUrl:
+          err.builderConnectUrl ?? "/_agent-native/builder/connect",
+      };
+    }
+    setResponseStatus(event, 502);
+    return {
+      error: err instanceof Error ? err.message : "Failed to start upload.",
+    };
+  }
+});

package/corpus/templates/slides/server/handlers/index-design-system-sources.ts

@@ -0,0 +1,79 @@
+import {
+  FeatureNotConfiguredError,
+  getSession,
+  indexBuilderDesignSystem,
+} from "@agent-native/core/server";
+import { defineEventHandler, readBody, setResponseStatus } from "h3";
+
+import { upsertBuilderProxyDesignSystem } from "../lib/builder-design-system-proxy.js";
+import { withSlidesRequestContext } from "./request-auth-context.js";
+
+/**
+ * Finalizes Builder DSI indexing from upload tokens produced by the
+ * browser-streamed resumable upload. The file bytes were streamed straight to
+ * storage; this endpoint only forwards the opaque tokens.
+ */
+export const indexDesignSystemSources = defineEventHandler(async (event) => {
+  const session = await getSession(event).catch(() => null);
+  if (!session?.email) {
+    setResponseStatus(event, 401);
+    return { error: "Unauthorized" };
+  }
+
+  const body = (await readBody(event).catch(() => null)) as {
+    projectName?: unknown;
+    uploadTokens?: unknown;
+  } | null;
+  const uploadTokens = Array.isArray(body?.uploadTokens)
+    ? body.uploadTokens.filter(
+        (token): token is string =>
+          typeof token === "string" && token.length > 0,
+      )
+    : [];
+  if (uploadTokens.length === 0) {
+    setResponseStatus(event, 400);
+    return { error: "No uploaded files to index." };
+  }
+  const projectName =
+    typeof body?.projectName === "string"
+      ? body.projectName.trim() || undefined
+      : undefined;
+
+  const sources = uploadTokens.map((uploadToken) => ({
+    kind: "file" as const,
+    uploadToken,
+  }));
+
+  try {
+    return await withSlidesRequestContext(event, async ({ email, orgId }) => {
+      const result = await indexBuilderDesignSystem({ sources, projectName });
+      const proxy = await upsertBuilderProxyDesignSystem({
+        result,
+        ownerEmail: email ?? session.email,
+        orgId: orgId ?? null,
+        projectName,
+      });
+      return {
+        ...result,
+        ...proxy,
+        uploadedFileCount: uploadTokens.length,
+      };
+    });
+  } catch (err) {
+    if (err instanceof FeatureNotConfiguredError) {
+      setResponseStatus(event, 412);
+      return {
+        error: err.message,
+        builderConnectUrl:
+          err.builderConnectUrl ?? "/_agent-native/builder/connect",
+      };
+    }
+    setResponseStatus(event, 502);
+    return {
+      error:
+        err instanceof Error
+          ? err.message
+          : "Builder design-system indexing failed.",
+    };
+  }
+});

package/corpus/templates/slides/server/routes/api/design-system-decode-job-status.get.ts

@@ -0,0 +1 @@
+export { designSystemDecodeJobStatus as default } from "../../handlers/design-system-decode-job-status";

package/corpus/templates/slides/server/routes/api/design-system-upload-start.post.ts

@@ -0,0 +1 @@
+export { designSystemUploadStart as default } from "../../handlers/design-system-upload-start";

package/corpus/templates/slides/server/routes/api/index-design-system-sources.post.ts

@@ -0,0 +1 @@
+export { indexDesignSystemSources as default } from "../../handlers/index-design-system-sources";

package/corpus/templates/tasks/_gitignore

@@ -8,8 +8,10 @@ npm-debug.log*
 pnpm-debug.log*
 
 node_modules
+build/
 dist
 dist-ssr
+.output/
 *.local
 
 # Editor directories and files

package/corpus/toolkit/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @agent-native/toolkit
 
+## 0.10.10
+
+### Patch Changes
+
+- 16a9d1a: Keep editor block drag previews aligned with the point where the block was grabbed, then clear incidental selection and focus after a successful drop.
+
 ## 0.10.9
 
 ### Patch Changes

package/corpus/toolkit/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agent-native/toolkit",
-  "version": "0.10.9",
+  "version": "0.10.10",
   "description": "Reusable app-building UI and helpers for Agent-Native apps.",
   "homepage": "https://github.com/BuilderIO/agent-native#readme",
   "bugs": {

package/corpus/toolkit/src/editor/DragHandle.ts

@@ -148,6 +148,8 @@ type DragSession = {
   sourceNodeSize: number;
   startX: number;
   startY: number;
+  pointerOffsetX: number;
+  pointerOffsetY: number;
   dragging: boolean;
   preview: HTMLElement | null;
   dropLine: HTMLElement | null;
@@ -194,6 +196,47 @@ let activeHoverRegistration: DragHandleRegistration | null = null;
 const clamp = (value: number, min: number, max: number) =>
   Math.min(Math.max(value, min), max);
 
+export const dragPreviewTransform = ({
+  clientX,
+  clientY,
+  pointerOffsetX,
+  pointerOffsetY,
+}: {
+  clientX: number;
+  clientY: number;
+  pointerOffsetX: number;
+  pointerOffsetY: number;
+}) =>
+  `translate3d(${clientX - pointerOffsetX}px, ${clientY - pointerOffsetY}px, 0)`;
+
+const collapseAndBlurEditorAfterDrop = (
+  view: EditorView,
+  preferredPos: number,
+) => {
+  const pos = clamp(preferredPos, 0, view.state.doc.content.size);
+  const selection = TextSelection.near(view.state.doc.resolve(pos), 1);
+  if (!view.state.selection.eq(selection)) {
+    view.dispatch(view.state.tr.setSelection(selection));
+  }
+
+  const nativeSelection = window.getSelection();
+  const selectionBelongsToEditor = [
+    nativeSelection?.anchorNode,
+    nativeSelection?.focusNode,
+  ].some((node) => node && (node === view.dom || view.dom.contains(node)));
+  if (selectionBelongsToEditor) {
+    nativeSelection?.removeAllRanges();
+  }
+  const activeElement = document.activeElement;
+  if (
+    activeElement instanceof HTMLElement &&
+    (activeElement === view.dom || view.dom.contains(activeElement))
+  ) {
+    activeElement.blur();
+  }
+  view.dom.blur();
+};
+
 const editorArea = (registration: DragHandleRegistration) => {
   const rect = registration.view.dom.getBoundingClientRect();
   return rect.width * rect.height;
@@ -977,7 +1020,12 @@ export const DragHandle = Extension.create<DragHandleOptions>({
     ) => {
       if (!session.preview) return;
 
-      session.preview.style.transform = `translate3d(${clientX + 12}px, ${clientY + 10}px, 0)`;
+      session.preview.style.transform = dragPreviewTransform({
+        clientX,
+        clientY,
+        pointerOffsetX: session.pointerOffsetX,
+        pointerOffsetY: session.pointerOffsetY,
+      });
     };
 
     const updateDropLine = (
@@ -1174,6 +1222,7 @@ export const DragHandle = Extension.create<DragHandleOptions>({
         ) {
           const sourceNode = session.view.state.doc.nodeAt(sourceStart);
           if (sourceNode) {
+            let dropCommitted = false;
             const sourceRegistration = registrationForView(session.view);
             const transferData = sourceRegistration?.getDragTransferData?.({
               view: session.view,
@@ -1198,7 +1247,7 @@ export const DragHandle = Extension.create<DragHandleOptions>({
                 false);
 
             if (handled) {
-              target.view.focus();
+              dropCommitted = true;
             } else if (target.view === session.view) {
               const insertPos =
                 dropPos > sourceStart ? dropPos - sourceNode.nodeSize : dropPos;
@@ -1206,10 +1255,8 @@ export const DragHandle = Extension.create<DragHandleOptions>({
                 .delete(sourceStart, sourceEnd)
                 .insert(insertPos, sourceNode);
 
-              tr.setSelection(NodeSelection.create(tr.doc, insertPos));
-
               session.view.dispatch(tr.scrollIntoView());
-              session.view.focus();
+              dropCommitted = true;
             } else {
               try {
                 const targetNode = target.view.state.schema.nodeFromJSON(
@@ -1225,9 +1272,6 @@ export const DragHandle = Extension.create<DragHandleOptions>({
                   dropPos,
                   targetNode,
                 );
-                insertTr.setSelection(
-                  NodeSelection.create(insertTr.doc, dropPos),
-                );
                 target.view.dispatch(insertTr.scrollIntoView());
 
                 const deleteTr = session.view.state.tr.delete(
@@ -1235,12 +1279,19 @@ export const DragHandle = Extension.create<DragHandleOptions>({
                   sourceEnd,
                 );
                 session.view.dispatch(deleteTr);
-                target.view.focus();
+                dropCommitted = true;
               } catch {
                 // If the target schema cannot accept this node, leave the
                 // source document untouched.
               }
             }
+
+            if (dropCommitted) {
+              collapseAndBlurEditorAfterDrop(target.view, dropPos);
+              if (target.view !== session.view) {
+                collapseAndBlurEditorAfterDrop(session.view, sourceStart);
+              }
+            }
           }
         }
       } else if (commit && !session.dragging && event) {
@@ -1356,6 +1407,7 @@ export const DragHandle = Extension.create<DragHandleOptions>({
             if (!sourceNode) return;
 
             e.preventDefault();
+            const sourceRect = currentBlock.getBoundingClientRect();
             dragSession = {
               view: editorView,
               sourceBlock: currentBlock,
@@ -1363,6 +1415,8 @@ export const DragHandle = Extension.create<DragHandleOptions>({
               sourceNodeSize: sourceNode.nodeSize,
               startX: e.clientX,
               startY: e.clientY,
+              pointerOffsetX: e.clientX - sourceRect.left,
+              pointerOffsetY: e.clientY - sourceRect.top,
               dragging: false,
               preview: null,
               dropLine: null,