@agent-native/core 0.92.6 → 0.92.8

package/corpus/templates/design/app/pages/design-editor/selection-state.ts

@@ -0,0 +1,337 @@
+import type { CanvasFrameGeometryById } from "@shared/canvas-frames";
+import type { CodeLayerProjection } from "@shared/code-layer";
+import type { DesignSourceType } from "@shared/source-mode";
+
+import type { ScreenGeometrySelection } from "@/components/design/EditPanel";
+import { getInitialFrameGeometry } from "@/components/design/multi-screen/frame-geometry";
+import type { ElementInfo } from "@/components/design/types";
+import { prettyScreenName } from "@/lib/screen-names";
+
+import type { DesignTool, EditorMode } from "./types";
+
+// PF11: cache the FNV hash by content-string value. Two calls with an equal
+// (===, i.e. SameValueZero) content string always hash to the same
+// signature, so a plain value-keyed Map is a correct cache — no need for
+// reference-identity tricks. Bounded LRU-ish eviction (drop oldest entry)
+// keeps this from growing unboundedly across a long editing session with
+// many distinct HTML revisions.
+const CONTENT_SIGNATURE_CACHE_MAX = 200;
+const contentSignatureCache = new Map<string, string>();
+export function getContentSignature(content: string): string {
+  const cached = contentSignatureCache.get(content);
+  if (cached !== undefined) return cached;
+  let hash = 2166136261;
+  for (let index = 0; index < content.length; index += 1) {
+    hash ^= content.charCodeAt(index);
+    hash = Math.imul(hash, 16777619) >>> 0;
+  }
+  const signature = `${content.length}:${hash.toString(36)}`;
+  if (contentSignatureCache.size >= CONTENT_SIGNATURE_CACHE_MAX) {
+    const oldestKey = contentSignatureCache.keys().next().value;
+    if (oldestKey !== undefined) contentSignatureCache.delete(oldestKey);
+  }
+  contentSignatureCache.set(content, signature);
+  return signature;
+}
+
+export function getOverviewScreenRuntimeReplacementKey({
+  screenId,
+  updatedAt,
+  content,
+}: {
+  screenId: string;
+  updatedAt?: string | null;
+  content: string;
+}) {
+  return [screenId, updatedAt ?? "", getContentSignature(content)].join(":");
+}
+
+export function shouldUseOverviewRuntimeReplacement({
+  sourceType,
+  externalSnapshotHtml,
+}: {
+  sourceType?: DesignSourceType | null;
+  externalSnapshotHtml?: string | null;
+}) {
+  return sourceType === "inline" && !externalSnapshotHtml;
+}
+
+/**
+ * Only inline HTML screens may contribute a fresh client snapshot to the
+ * atomic screen-rename action. Localhost/fusion design_files rows intentionally
+ * store a route URL marker rather than the rendered preview HTML; sending that
+ * live snapshot as an override would silently convert the screen to inline
+ * source and break /visual-edit.
+ */
+export function shouldIncludeScreenRenameContentOverride(args: {
+  fileType: string;
+  sourceType: DesignSourceType;
+  persistedContent: string;
+  freshContent: string;
+}): boolean {
+  return (
+    args.fileType.toLowerCase() === "html" &&
+    args.sourceType === "inline" &&
+    args.freshContent !== args.persistedContent
+  );
+}
+
+export function dedupeStringIds(ids: string[]): string[] {
+  return Array.from(new Set(ids.filter(Boolean)));
+}
+
+export function sameStringIds(a: string[], b: string[]) {
+  return a.length === b.length && a.every((value, index) => value === b[index]);
+}
+
+export function isScreenRootElementInfo(info: ElementInfo | null | undefined) {
+  const tagName = info?.tagName?.toUpperCase();
+  return tagName === "BODY" || tagName === "HTML";
+}
+
+export function shouldMirrorSelectedElementToAgentChat(
+  info: ElementInfo | null | undefined,
+): info is ElementInfo {
+  if (!info || isScreenRootElementInfo(info)) return false;
+  const text = info.textContent?.replace(/\s+/g, " ").trim();
+  if (!text) return true;
+  const labelText = text.replace(/^[^A-Za-z0-9]+/, "").toLowerCase();
+  return !labelText.startsWith("nothing here yet");
+}
+
+export function shouldIgnoreOverviewLayerCreationEcho(args: {
+  pendingLayerId: string | null | undefined;
+  pendingScreenId: string | null | undefined;
+  screenId: string;
+  info?: ElementInfo | null;
+  event: "select" | "clear";
+}) {
+  if (!args.pendingLayerId) return false;
+  if (args.pendingScreenId && args.pendingScreenId !== args.screenId) {
+    return false;
+  }
+  return args.event === "clear" || isScreenRootElementInfo(args.info);
+}
+
+export function getSelectedScreenIdsForEditorState(args: {
+  activeFileId: string | null | undefined;
+  overviewSelectedScreenIds: string[];
+  viewMode: "single" | "overview";
+}) {
+  const { activeFileId, overviewSelectedScreenIds, viewMode } = args;
+  if (viewMode === "overview") {
+    return overviewSelectedScreenIds.length
+      ? overviewSelectedScreenIds
+      : activeFileId
+        ? [activeFileId]
+        : [];
+  }
+  return activeFileId ? [activeFileId] : [];
+}
+
+export function resolveAvailableActiveFileId(args: {
+  activeFileId: string | null | undefined;
+  availableFileIds: Iterable<string>;
+  defaultFileId: string | null | undefined;
+}): string | null {
+  const availableFileIds = new Set(args.availableFileIds);
+  if (args.activeFileId && availableFileIds.has(args.activeFileId)) {
+    return args.activeFileId;
+  }
+  return args.defaultFileId && availableFileIds.has(args.defaultFileId)
+    ? args.defaultFileId
+    : null;
+}
+
+export function getSelectedScreenGeometryForInspector(args: {
+  selectedInspectorElementCount: number;
+  selectedScreenIds: string[];
+  overviewScreens: Array<{
+    id: string;
+    filename: string;
+    title?: string;
+    width?: number;
+    height?: number;
+  }>;
+  canvasFrameGeometryById: CanvasFrameGeometryById;
+}): ScreenGeometrySelection | null {
+  if (args.selectedInspectorElementCount > 0) return null;
+  if (args.selectedScreenIds.length !== 1) return null;
+  const screenId = args.selectedScreenIds[0];
+  if (!screenId) return null;
+  const screenIndex = args.overviewScreens.findIndex(
+    (screen) => screen.id === screenId,
+  );
+  if (screenIndex < 0) return null;
+  const screen = args.overviewScreens[screenIndex];
+  if (!screen) return null;
+  const fallbackGeometry = getInitialFrameGeometry(screenIndex, {
+    width: screen.width ?? 1280,
+    height: screen.height ?? 2560,
+  });
+  const persistedGeometry = args.canvasFrameGeometryById[screenId] ?? {};
+  const geometry = {
+    ...fallbackGeometry,
+    ...persistedGeometry,
+  };
+  return {
+    id: screen.id,
+    title: screen.title ?? prettyScreenName(screen.filename),
+    x: geometry.x,
+    y: geometry.y,
+    width: geometry.width,
+    height: geometry.height,
+  };
+}
+
+function fileIdFromLayerSelectionId(
+  layerId: string,
+  fileIds: Set<string>,
+): string | null {
+  const normalized = layerId.startsWith("code:")
+    ? layerId.slice("code:".length)
+    : layerId;
+  return fileIds.has(normalized) ? normalized : null;
+}
+
+export function getOverviewScreenIdsFromLayerSelection(args: {
+  fileIds: string[];
+  layerIds: string[];
+}) {
+  const fileIds = new Set(args.fileIds);
+  const seen = new Set<string>();
+  const selectedScreenIds: string[] = [];
+  args.layerIds.forEach((layerId) => {
+    const fileId = fileIdFromLayerSelectionId(layerId, fileIds);
+    if (!fileId || seen.has(fileId)) return;
+    seen.add(fileId);
+    selectedScreenIds.push(fileId);
+  });
+  return selectedScreenIds;
+}
+
+export function getOverviewEnterTarget(args: {
+  activeFileId: string | null | undefined;
+  overviewSelectedScreenIds: string[];
+}) {
+  const { activeFileId, overviewSelectedScreenIds } = args;
+  if (overviewSelectedScreenIds.length === 0) {
+    return activeFileId ?? null;
+  }
+  if (activeFileId && overviewSelectedScreenIds.includes(activeFileId)) {
+    return activeFileId;
+  }
+  return (
+    overviewSelectedScreenIds[overviewSelectedScreenIds.length - 1] ?? null
+  );
+}
+
+export function getSidebarCodeLayerSelectionState(args: {
+  currentViewMode: "single" | "overview";
+  ownerFileId?: string | null;
+  overviewSelectedScreenIds: string[];
+  screenFileIds?: string[];
+}) {
+  const {
+    currentViewMode,
+    ownerFileId,
+    overviewSelectedScreenIds,
+    screenFileIds,
+  } = args;
+  const ownerScreenId =
+    ownerFileId && (!screenFileIds || screenFileIds.includes(ownerFileId))
+      ? ownerFileId
+      : null;
+  return {
+    viewMode: currentViewMode,
+    overviewSelectedScreenIds:
+      currentViewMode === "overview" && ownerScreenId
+        ? [ownerScreenId]
+        : currentViewMode === "overview" && ownerFileId
+          ? []
+          : overviewSelectedScreenIds,
+  };
+}
+
+export function shouldLimitEditorChromeUntilContentReady(args: {
+  fileCount: number;
+  hasActiveCanvasContent: boolean;
+  generating: boolean;
+  pendingGenerationActive: boolean;
+}) {
+  const {
+    fileCount,
+    generating,
+    hasActiveCanvasContent,
+    pendingGenerationActive,
+  } = args;
+  return (
+    (fileCount === 0 || !hasActiveCanvasContent) &&
+    (generating || pendingGenerationActive)
+  );
+}
+
+export function shouldEscapeToOverview(args: {
+  activeTool: DesignTool;
+  drawMode: boolean;
+  mode: EditorMode;
+  pinMode: boolean;
+  selectedElement: ElementInfo | null;
+  viewMode: "single" | "overview";
+}) {
+  const { activeTool, drawMode, mode, pinMode, selectedElement, viewMode } =
+    args;
+  return (
+    viewMode === "single" &&
+    !selectedElement &&
+    !drawMode &&
+    !pinMode &&
+    mode === "edit" &&
+    activeTool === "move"
+  );
+}
+
+/**
+ * B5-1: an empty-canvas click (a marquee/hit-test that resolved to zero
+ * elements) must deselect ANY current selection kind — a selected
+ * overview screen frame AND a selected element inside a screen (set via the
+ * iframe bridge). `handleLayerMarqueeSelectionChange` already clears the
+ * host-side `selectedElement` state when nothing was hit and the gesture
+ * isn't additive; this helper decides whether it must ALSO signal the
+ * iframe/bridge overlays to clear their own selection highlight
+ * (`overviewClearSelectionRequest`) — otherwise a previously-selected
+ * in-screen element keeps showing its selection chrome inside the iframe
+ * even though the host's `selectedElement` is already null. True whenever
+ * the resolved hit-set is empty and the gesture isn't additive (an additive
+ * click/shift-click on empty space is a no-op, matching Escape and the
+ * MultiScreenCanvas-level `shouldClearSelectionOnEmptyCanvasClick`).
+ *
+ * Exported for unit testing.
+ */
+export function shouldClearBridgeSelectionOnEmptyMarquee(args: {
+  resolvedCount: number;
+  additive: boolean | undefined;
+}): boolean {
+  return args.resolvedCount === 0 && !args.additive;
+}
+
+/**
+ * Build the set of all node ids (both projection ids and data-agent-native-node-id
+ * attribute values) that exist in the given projection. Used by handleGroupSelection
+ * and handleUngroupSelection to filter selectedLayerIdsState to the active file's
+ * nodes before passing them to wrapNodes / unwrap, preventing cross-file stale ids
+ * from causing spurious "conflict" errors.
+ *
+ * Exported for unit testing.
+ */
+export function buildActiveFileNodeIdSet(
+  projection: CodeLayerProjection,
+): Set<string> {
+  const ids = new Set<string>();
+  for (const n of projection.nodes) {
+    ids.add(n.id);
+    const attrId = n.dataAttributes["data-agent-native-node-id"];
+    if (attrId) ids.add(attrId);
+  }
+  return ids;
+}

package/corpus/templates/design/app/pages/design-editor/style-utils.ts

@@ -0,0 +1,5 @@
+export function camelStyleProperty(property: string): string {
+  return property.replace(/-([a-z])/g, (_, letter: string) =>
+    letter.toUpperCase(),
+  );
+}

package/corpus/templates/design/app/pages/design-editor/tool-state.ts

@@ -0,0 +1,92 @@
+import type { CreationTool } from "@/components/design/design-canvas/creation";
+
+import type { DesignTool, EditorMode } from "./types";
+
+export const MOVE_GROUP_TOOL_PRESENTATIONS = {
+  move: {
+    labelKey: "designEditor.tools.move",
+    shortcut: "V",
+  },
+  hand: {
+    labelKey: "designEditor.tools.hand",
+    shortcut: "H",
+  },
+  scale: {
+    labelKey: "designEditor.tools.scale",
+    shortcut: "K",
+  },
+} as const;
+
+export type MoveGroupTool = keyof typeof MOVE_GROUP_TOOL_PRESENTATIONS;
+
+export function getMoveGroupToolPresentation(activeTool: DesignTool) {
+  const moveGroupTool: MoveGroupTool =
+    activeTool === "hand" || activeTool === "scale" ? activeTool : "move";
+  return {
+    tool: moveGroupTool,
+    ...MOVE_GROUP_TOOL_PRESENTATIONS[moveGroupTool],
+  };
+}
+
+const DESIGN_EDITOR_TOOLS = new Set<DesignTool>([
+  "move",
+  "frame",
+  "rect",
+  "line",
+  "arrow",
+  "ellipse",
+  "polygon",
+  "star",
+  "text",
+  "pen",
+  "hand",
+  "comment",
+  "draw",
+  "scale",
+]);
+
+export function normalizeDesignTool(value: unknown): DesignTool | null {
+  return typeof value === "string" &&
+    DESIGN_EDITOR_TOOLS.has(value as DesignTool)
+    ? (value as DesignTool)
+    : null;
+}
+
+export function isSingleScreenAnnotationTool(tool: DesignTool): boolean {
+  return tool === "draw" || tool === "comment";
+}
+
+export function getDesignToolActivationState(tool: DesignTool): {
+  mode: EditorMode;
+  drawMode: boolean;
+  pinMode: boolean;
+} {
+  if (tool === "draw") {
+    return { mode: "annotate", drawMode: true, pinMode: false };
+  }
+  if (tool === "comment") {
+    return { mode: "annotate", drawMode: false, pinMode: true };
+  }
+  return { mode: "edit", drawMode: false, pinMode: false };
+}
+
+export function getSingleScreenCreationTool(args: {
+  activeTool: DesignTool;
+  viewMode: "single" | "overview";
+  hasActiveFile: boolean;
+}): CreationTool | null {
+  if (args.viewMode !== "single" || !args.hasActiveFile) return null;
+  switch (args.activeTool) {
+    case "rect":
+      return "rectangle";
+    case "ellipse":
+    case "line":
+    case "arrow":
+    case "text":
+    case "pen":
+    case "frame":
+      return args.activeTool;
+    default:
+      return null;
+  }
+}

package/corpus/templates/design/app/pages/design-editor/tweak-save.ts

@@ -0,0 +1,87 @@
+import type { TweakSelections } from "@shared/resolve-tweaks";
+
+export interface PendingTweakSave {
+  selections: TweakSelections;
+  revision: number;
+  expectedSelectionsHash: string;
+}
+
+export function createQueuedTweakSave(
+  selections: TweakSelections,
+  revision: number,
+  confirmedSelectionsHash: string,
+  existingDebouncedSave: PendingTweakSave | null,
+): PendingTweakSave {
+  return {
+    selections,
+    revision,
+    // Multiple knob ticks inside one debounce window are one full-snapshot
+    // edit and must retain the base observed by the first tick.
+    expectedSelectionsHash:
+      existingDebouncedSave?.expectedSelectionsHash ?? confirmedSelectionsHash,
+  };
+}
+
+export function rebaseTweakSaveForSend(
+  pending: PendingTweakSave,
+  confirmedSelectionsHash: string,
+): PendingTweakSave {
+  return {
+    ...pending,
+    // Saves are serialized. Resolve the base only when this request reaches
+    // the front of the chain so it follows a verified predecessor success,
+    // but not a predecessor that failed.
+    expectedSelectionsHash: confirmedSelectionsHash,
+  };
+}
+
+export function retainLatestFailedTweakSave(
+  queued: PendingTweakSave | null,
+  failed: PendingTweakSave,
+): PendingTweakSave {
+  return queued && queued.revision > failed.revision ? queued : failed;
+}
+
+export function clearCompletedTweakSave(
+  queued: PendingTweakSave | null,
+  completedRevision: number,
+): PendingTweakSave | null {
+  return queued?.revision === completedRevision ? null : queued;
+}
+
+type TweakSaveKeepaliveAttempt =
+  | { accepted: true; completion: Promise<unknown> }
+  | { accepted: false; completion: null };
+
+export async function sendJournaledTweakSaveKeepalive(options: {
+  journal: () => Promise<boolean>;
+  send: () => TweakSaveKeepaliveAttempt;
+  acknowledge: () => Promise<unknown>;
+}): Promise<boolean> {
+  // Pagehide may freeze the document at any await boundary. Establish the
+  // durable retry entry first so either the keepalive finishes or a later
+  // editor session can replay the exact same operation.
+  if (!(await options.journal())) return false;
+  const attempt = options.send();
+  if (!attempt.accepted) return false;
+  await attempt.completion;
+  await options.acknowledge();
+  return true;
+}
+
+export type TweakSaveFailureKind =
+  | "conflict"
+  | "durable-retry"
+  | "tab-memory-only";
+
+export function classifyTweakSaveFailure(
+  error: unknown,
+  journaled: boolean,
+): TweakSaveFailureKind {
+  const status =
+    error && typeof error === "object" && "status" in error
+      ? (error as { status?: unknown }).status
+      : undefined;
+  if (status === 409) return "conflict";
+  return journaled ? "durable-retry" : "tab-memory-only";
+}

package/corpus/templates/design/app/pages/design-editor/types.ts

@@ -0,0 +1,36 @@
+export type EditorMode = "annotate" | "edit" | "interact";
+
+export type DesignTool =
+  | "move"
+  | "frame"
+  | "rect"
+  | "line"
+  | "arrow"
+  | "ellipse"
+  | "polygon"
+  | "star"
+  | "text"
+  | "pen"
+  | "hand"
+  | "comment"
+  | "draw"
+  | "scale";
+
+export type ShapeTool =
+  | "rect"
+  | "line"
+  | "arrow"
+  | "ellipse"
+  | "polygon"
+  | "star";
+
+export type DesignLeftPanel =
+  | "file"
+  | "agent"
+  | "assets"
+  | "tools"
+  | "tokens"
+  | "import"
+  | "code";
+
+export const SHOW_DESIGN_CODE_LEFT_PANEL = true;

package/corpus/templates/design/app/routes/design.$id.tsx

@@ -1,6 +1,16 @@
-export { default } from "../pages/DesignEditor";
 import { messagesByLocale } from "@/i18n-data";
 
+import DesignEditorRoute from "../pages/DesignEditor";
+
+/**
+ * Keep the route module itself as a React Fast Refresh boundary. A bare
+ * re-export does not register a local component, so an invalidated editor
+ * dependency can otherwise propagate into a full-page reload.
+ */
+export default function DesignRoute() {
+  return <DesignEditorRoute />;
+}
+
 export function meta() {
   return [{ title: messagesByLocale["en-US"].routeTitles.designEditor }];
 }

package/corpus/templates/design/changelog/2026-07-09-design-edits-canvas-positions-tools-and-tab-context-now-pers.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-07-09
+---
+
+Design edits, canvas positions, tools, and tab context now persist reliably across navigation and reloads.

package/corpus/templates/design/changelog/2026-07-09-figma-style-shortcuts-drawing-annotations-and-cross-screen-d.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-07-09
+---
+
+Figma-style shortcuts, drawing annotations, and cross-screen drag interactions are now faster and more reliable.

package/corpus/templates/design/changelog/2026-07-09-hand-and-scale-tools-now-keep-their-active-toolbar-identity-.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-07-09
+---
+
+Hand and Scale tools now keep their active toolbar identity and show their keyboard shortcuts.

package/corpus/templates/design/changelog/2026-07-09-large-multi-screen-designs-now-stay-responsive-during-long-c.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-07-09
+---
+
+Large multi-screen designs now stay responsive during long canvas sessions without accumulating hidden previews.

package/corpus/templates/design/changelog/2026-07-09-layer-drags-now-land-exactly-where-the-insertion-indicator-s.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-07-09
+---
+
+Layer drags now land exactly where the insertion indicator shows, including multi-selection reorders.

package/corpus/templates/design/server/db/index.ts

@@ -5,61 +5,12 @@ import {
   DESIGN_AGENT_CONTEXT_ENDPOINT,
   DESIGN_AGENT_RESOURCE_KIND,
 } from "../../shared/agent-readable.js";
+import { publicDesignAccessRole } from "../lib/design-data-access.js";
 import * as schema from "./schema.js";
 
 export const getDb = createGetDb(schema);
 export { schema };
 
-function isLocalDevRuntime(): boolean {
-  return (
-    process.env.NODE_ENV !== "production" &&
-    !process.env.NETLIFY &&
-    !process.env.VERCEL &&
-    !process.env.AWS_LAMBDA_FUNCTION_NAME &&
-    !process.env.CF_PAGES
-  );
-}
-
-function isLoopbackHttpUrl(value: unknown): boolean {
-  if (typeof value !== "string" || !value.trim()) return false;
-  try {
-    const url = new URL(value);
-    if (url.protocol !== "http:" && url.protocol !== "https:") return false;
-    const host = url.hostname.toLowerCase();
-    return (
-      host === "localhost" ||
-      host === "::1" ||
-      host === "[::1]" ||
-      /^127(?:\.\d{1,3}){3}$/.test(host)
-    );
-  } catch {
-    return false;
-  }
-}
-
-function isLoopbackLocalhostDesign(design: any): boolean {
-  if (!isLocalDevRuntime()) return false;
-  let data: any;
-  try {
-    data = typeof design?.data === "string" ? JSON.parse(design.data) : null;
-  } catch {
-    return false;
-  }
-  if (!data || data.sourceMode !== "localhost") return false;
-
-  const metadataEntries = Object.values(
-    data.localhostScreens ?? data.screenMetadata ?? {},
-  ) as any[];
-  if (metadataEntries.length === 0) return false;
-
-  return metadataEntries.every((entry) => {
-    if (!entry || entry.sourceType !== "localhost") return false;
-    const previewUrl = entry.previewUrl ?? entry.url;
-    if (!isLoopbackHttpUrl(previewUrl)) return false;
-    return !entry.bridgeUrl || isLoopbackHttpUrl(entry.bridgeUrl);
-  });
-}
-
 registerShareableResource({
   type: "design",
   resourceTable: schema.designs,
@@ -72,8 +23,7 @@ registerShareableResource({
     getContextPath: () => DESIGN_AGENT_CONTEXT_ENDPOINT,
   },
   getDb,
-  publicAccessRole: (design) =>
-    isLoopbackLocalhostDesign(design) ? "editor" : "viewer",
+  publicAccessRole: publicDesignAccessRole,
 });
 
 registerShareableResource({