@agent-native/core 0.80.0 → 0.80.2

package/corpus/templates/design/shared/code-layer.ts

@@ -153,6 +153,8 @@ export interface LayoutContext {
   width?: string;
   height?: string;
   flexDirection?: string;
+  alignItems?: string;
+  justifyContent?: string;
   gap?: string;
   padding?: string;
   parentDisplay?: string;
@@ -243,6 +245,15 @@ export interface CodeLayerTreeNode {
   tag: string;
   selector: string;
   detail: string;
+  layout?: Pick<
+    LayoutContext,
+    | "display"
+    | "flexDirection"
+    | "alignItems"
+    | "justifyContent"
+    | "isFlexContainer"
+    | "isGridContainer"
+  >;
   badge?: string;
   renamable: boolean;
   children: CodeLayerTreeNode[];
@@ -544,6 +555,8 @@ const NON_VISUAL_TAGS = new Set([
   "noscript",
 ]);
 
+const RAW_TEXT_VISUAL_TAGS = new Set(["textarea"]);
+
 const DATA_SELECTOR_PRIORITY = [
   "data-agent-native-node-id",
   "data-code-layer-id",
@@ -967,6 +980,21 @@ function findHtmlTagEnd(html: string, start: number): number {
   return html.length;
 }
 
+function findClosingTag(
+  html: string,
+  tag: string,
+  from: number,
+): { closeStart: number; closeEnd: number } | null {
+  const closeRe = new RegExp(`<\\/\\s*${tag}\\s*>`, "gi");
+  closeRe.lastIndex = from;
+  const match = closeRe.exec(html);
+  if (!match) return null;
+  return {
+    closeStart: match.index,
+    closeEnd: match.index + match[0].length,
+  };
+}
+
 function parseHtmlElements(html: string): ParsedElement[] {
   const elements: ParsedElement[] = [];
   const stack: number[] = [];
@@ -1003,15 +1031,36 @@ function parseHtmlElements(html: string): ParsedElement[] {
     const nthOfType = (sameTypeCounts.get(parentKey) ?? 0) + 1;
     sameTypeCounts.set(parentKey, nthOfType);
     const selfClosing = raw.endsWith("/>") || VOID_TAGS.has(tag);
+
+    if (NON_VISUAL_TAGS.has(tag)) {
+      if (!selfClosing) {
+        const close = findClosingTag(html, tag, match.index + raw.length);
+        tagRe.lastIndex = close ? close.closeEnd : html.length;
+      }
+      continue;
+    }
+
     const index = elements.length;
+    const rawTextClose =
+      !selfClosing && RAW_TEXT_VISUAL_TAGS.has(tag)
+        ? findClosingTag(html, tag, match.index + raw.length)
+        : null;
     const element: ParsedElement = {
       index,
       tag,
       start: match.index,
       openEnd: match.index + raw.length,
-      end: selfClosing ? match.index + raw.length : html.length,
+      end: rawTextClose
+        ? rawTextClose.closeEnd
+        : selfClosing
+          ? match.index + raw.length
+          : html.length,
       contentStart: match.index + raw.length,
-      contentEnd: selfClosing ? match.index + raw.length : html.length,
+      contentEnd: rawTextClose
+        ? rawTextClose.closeStart
+        : selfClosing
+          ? match.index + raw.length
+          : html.length,
       selfClosing,
       attributes: parseAttributes(raw, match.index),
       parentIndex,
@@ -1026,6 +1075,12 @@ function parseHtmlElements(html: string): ParsedElement[] {
     if (parentIndex !== undefined) {
       elements[parentIndex]?.childIndexes.push(index);
     }
+    if (rawTextClose) {
+      element.closeStart = rawTextClose.closeStart;
+      element.closeEnd = rawTextClose.closeEnd;
+      tagRe.lastIndex = rawTextClose.closeEnd;
+      continue;
+    }
     if (!selfClosing) stack.push(index);
   }
 
@@ -1284,6 +1339,34 @@ function layoutFor(
       : classes.has("flex-row")
         ? "row"
         : undefined);
+  const alignItems =
+    style["align-items"] ??
+    (classes.has("items-start")
+      ? "flex-start"
+      : classes.has("items-center")
+        ? "center"
+        : classes.has("items-end")
+          ? "flex-end"
+          : classes.has("items-stretch")
+            ? "stretch"
+            : classes.has("items-baseline")
+              ? "baseline"
+              : undefined);
+  const justifyContent =
+    style["justify-content"] ??
+    (classes.has("justify-start")
+      ? "flex-start"
+      : classes.has("justify-center")
+        ? "center"
+        : classes.has("justify-end")
+          ? "flex-end"
+          : classes.has("justify-between")
+            ? "space-between"
+            : classes.has("justify-around")
+              ? "space-around"
+              : classes.has("justify-evenly")
+                ? "space-evenly"
+                : undefined);
   const parentFlexDirection =
     parentStyle?.["flex-direction"] ??
     (parentClasses?.has("flex-col")
@@ -1300,6 +1383,8 @@ function layoutFor(
     width: style.width,
     height: style.height,
     flexDirection,
+    alignItems,
+    justifyContent,
     gap: style.gap,
     padding: style.padding,
     parentDisplay,
@@ -1620,6 +1705,14 @@ export function buildCodeLayerTree(
       tag: node.tag,
       selector: node.selector,
       detail: `<${node.tag}>`,
+      layout: {
+        display: node.layout.display,
+        flexDirection: node.layout.flexDirection,
+        alignItems: node.layout.alignItems,
+        justifyContent: node.layout.justifyContent,
+        isFlexContainer: node.layout.isFlexContainer,
+        isGridContainer: node.layout.isGridContainer,
+      },
       badge:
         node.layerNameSource === "attribute" && node.layerNameAttribute
           ? node.layerNameAttribute
@@ -1719,6 +1812,87 @@ function simpleSelectorMatches(node: CodeLayerNode, selector: string): boolean {
   return node.tag === selector.toLowerCase();
 }
 
+function unescapeCssAttributeValue(value: string): string {
+  return value.replace(/\\"/g, '"').replace(/\\\\/g, "\\");
+}
+
+function simpleSelectorMatchesElement(
+  element: ParsedElement,
+  selector: string,
+): boolean {
+  let remaining = selector.trim();
+  if (!remaining) return false;
+
+  const nthMatch = remaining.match(/:nth-of-type\((\d+)\)$/);
+  if (nthMatch?.[1]) {
+    if (element.nthOfType !== Number(nthMatch[1])) return false;
+    remaining = remaining.slice(0, nthMatch.index).trim();
+  }
+
+  const tagMatch = remaining.match(/^([A-Za-z][A-Za-z0-9:-]*)/);
+  if (tagMatch?.[1] && element.tag !== tagMatch[1].toLowerCase()) {
+    return false;
+  }
+
+  const idMatch = remaining.match(/#([A-Za-z_][A-Za-z0-9_-]*)/);
+  if (idMatch?.[1] && attributeValue(element, "id") !== idMatch[1]) {
+    return false;
+  }
+
+  const attributes = Array.from(
+    remaining.matchAll(
+      /\[([A-Za-z_][A-Za-z0-9_:.-]*)=(?:"((?:\\"|[^"])*)"|'((?:\\'|[^'])*)')\]/g,
+    ),
+  );
+  for (const match of attributes) {
+    const name = match[1];
+    if (!name) return false;
+    const expected = unescapeCssAttributeValue(match[2] ?? match[3] ?? "");
+    if (attributeValue(element, name) !== expected) return false;
+  }
+
+  const classes = classList(element);
+  const requiredClasses = Array.from(
+    remaining.matchAll(/\.([A-Za-z_][A-Za-z0-9_-]*)/g),
+    (match) => match[1],
+  ).filter((value): value is string => Boolean(value));
+  if (requiredClasses.some((className) => !classes.includes(className))) {
+    return false;
+  }
+
+  return Boolean(
+    tagMatch ||
+    idMatch ||
+    attributes.length > 0 ||
+    requiredClasses.length > 0 ||
+    nthMatch,
+  );
+}
+
+function selectorPathMatchesElement(
+  element: ParsedElement | undefined,
+  selector: string,
+  elementByIndex: Map<number, ParsedElement>,
+): boolean {
+  const parts = normalizeSelectorForMatch(selector)
+    .split(" > ")
+    .map((part) => part.trim())
+    .filter(Boolean);
+  if (parts.length <= 1) return false;
+
+  let current: ParsedElement | undefined = element;
+  for (let index = parts.length - 1; index >= 0; index -= 1) {
+    const selectorPart = parts[index];
+    if (!current || !selectorPart) return false;
+    if (!simpleSelectorMatchesElement(current, selectorPart)) return false;
+    current =
+      current.parentIndex === undefined
+        ? undefined
+        : elementByIndex.get(current.parentIndex);
+  }
+  return true;
+}
+
 function nodeMatchesStableSourceId(
   node: CodeLayerNode,
   sourceId: string,
@@ -1731,7 +1905,12 @@ function nodeMatchesStableSourceId(
   return node.attributes.id === sourceId;
 }
 
-function selectorMatches(node: CodeLayerNode, selector: string): boolean {
+function selectorMatches(
+  node: CodeLayerNode,
+  selector: string,
+  element: ParsedElement | undefined,
+  elementByIndex: Map<number, ParsedElement>,
+): boolean {
   const normalizedSelector = normalizeSelectorForMatch(selector);
   const normalizedNodeSelectors = [
     node.selector,
@@ -1739,16 +1918,25 @@ function selectorMatches(node: CodeLayerNode, selector: string): boolean {
     ...node.selectors,
   ].map(normalizeSelectorForMatch);
   if (normalizedNodeSelectors.includes(normalizedSelector)) return true;
+  const selectorHasDirectPath = normalizedSelector.includes(" > ");
   if (
-    normalizedSelector.includes(" > ") &&
+    selectorHasDirectPath &&
     normalizedNodeSelectors.some(
       (candidate) =>
         candidate.endsWith(` > ${normalizedSelector}`) ||
-        normalizedSelector.endsWith(` > ${candidate}`),
+        (candidate.includes(" > ") &&
+          normalizedSelector.endsWith(` > ${candidate}`)),
     )
   ) {
     return true;
   }
+  if (
+    selectorHasDirectPath &&
+    selectorPathMatchesElement(element, normalizedSelector, elementByIndex)
+  ) {
+    return true;
+  }
+  if (selectorHasDirectPath) return false;
   if (simpleSelectorMatches(node, normalizedSelector)) return true;
   const lastPart = lastSelectorPart(normalizedSelector);
   return (
@@ -1757,9 +1945,16 @@ function selectorMatches(node: CodeLayerNode, selector: string): boolean {
 }
 
 function resolveTarget(
-  projection: CodeLayerProjection,
+  build: ProjectionBuild,
   target: EditIntentTarget,
 ): EditIntentResolution {
+  const { projection, elementByNodeId } = build;
+  const elementByIndex = new Map(
+    Array.from(elementByNodeId.values()).map((element) => [
+      element.index,
+      element,
+    ]),
+  );
   if (target.nodeId) {
     const matches = projection.nodes.filter((candidate) =>
       nodeMatchesStableSourceId(candidate, target.nodeId ?? ""),
@@ -1790,7 +1985,12 @@ function resolveTarget(
   }
 
   const matches = projection.nodes.filter((node) =>
-    selectorMatches(node, target.selector ?? ""),
+    selectorMatches(
+      node,
+      target.selector ?? "",
+      elementByNodeId.get(node.id),
+      elementByIndex,
+    ),
   );
   if (matches.length === 1 && matches[0]) {
     return { status: "resolved", node: matches[0] };
@@ -2086,7 +2286,7 @@ export function applyVisualEdit(
   }
 
   const initial = buildProjection(html, source);
-  const resolution = resolveTarget(initial.projection, intent.target);
+  const resolution = resolveTarget(initial, intent.target);
   if (resolution.status !== "resolved" || !resolution.node) {
     return {
       content: html,
@@ -2129,7 +2329,7 @@ export function applyVisualEdit(
   } else if (intent.kind === "textContent") {
     edit = applyTextEdit(html, element, intent);
   } else {
-    const anchorResolution = resolveTarget(initial.projection, intent.anchor);
+    const anchorResolution = resolveTarget(initial, intent.anchor);
     if (anchorResolution.status !== "resolved" || !anchorResolution.node) {
       return {
         content: html,

package/corpus/templates/design/shared/html-content.ts

@@ -0,0 +1,21 @@
+export function isProbablyHtmlDocumentContent(content: string): boolean {
+  const trimmed = content.trimStart();
+  if (!trimmed) return true;
+  if (trimmed.startsWith("<")) return true;
+  return false;
+}
+
+export function shouldUseLiveFileContent({
+  liveContent,
+  storedContent,
+  fileType,
+}: {
+  liveContent: string;
+  storedContent: string;
+  fileType: string;
+}): boolean {
+  if (liveContent === storedContent) return true;
+  if (fileType.toLowerCase() !== "html") return true;
+  if (!isProbablyHtmlDocumentContent(storedContent)) return true;
+  return isProbablyHtmlDocumentContent(liveContent);
+}

package/corpus/templates/design/shared/pen-path.ts

@@ -0,0 +1,207 @@
+export interface PenPoint {
+  x: number;
+  y: number;
+}
+
+export interface PenNode {
+  point: PenPoint;
+  handleIn?: PenPoint;
+  handleOut?: PenPoint;
+}
+
+export interface PenPath {
+  nodes: PenNode[];
+  closed: boolean;
+}
+
+export interface PenGeometry {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}
+
+const MIN_PATH_SIZE = 12;
+
+export function createCornerNode(point: PenPoint): PenNode {
+  return { point: { ...point } };
+}
+
+export function createSmoothNode(anchor: PenPoint, handleOut: PenPoint) {
+  return {
+    point: { ...anchor },
+    handleIn: mirrorPoint(anchor, handleOut),
+    handleOut: { ...handleOut },
+  };
+}
+
+export function appendPenNode(path: PenPath | null, node: PenNode): PenPath {
+  return {
+    nodes: [...(path?.nodes ?? []), clonePenNode(node)],
+    closed: false,
+  };
+}
+
+export function clonePenPath(path: PenPath): PenPath {
+  return {
+    nodes: path.nodes.map(clonePenNode),
+    closed: path.closed,
+  };
+}
+
+export function closePenPath(path: PenPath): PenPath {
+  return {
+    nodes: path.nodes.map(clonePenNode),
+    closed: path.nodes.length > 1,
+  };
+}
+
+export function constrainPointTo45Degrees(
+  origin: PenPoint,
+  point: PenPoint,
+): PenPoint {
+  const dx = point.x - origin.x;
+  const dy = point.y - origin.y;
+  const distance = Math.hypot(dx, dy);
+  if (distance === 0) return { ...point };
+
+  const angle = Math.atan2(dy, dx);
+  const snappedAngle = Math.round(angle / (Math.PI / 4)) * (Math.PI / 4);
+  return {
+    x: origin.x + Math.cos(snappedAngle) * distance,
+    y: origin.y + Math.sin(snappedAngle) * distance,
+  };
+}
+
+export function isPenCloseTarget(
+  path: PenPath | null,
+  point: PenPoint,
+  hitRadius: number,
+) {
+  const start = path?.nodes[0]?.point;
+  if (!start || (path?.nodes.length ?? 0) < 2) return false;
+  return Math.hypot(point.x - start.x, point.y - start.y) <= hitRadius;
+}
+
+export function getPenPathGeometry(path: PenPath): PenGeometry {
+  const points = path.nodes.flatMap((node) =>
+    [node.point, node.handleIn, node.handleOut].filter(isPenPoint),
+  );
+  if (points.length === 0) {
+    return { x: 0, y: 0, width: MIN_PATH_SIZE, height: MIN_PATH_SIZE };
+  }
+
+  const left = Math.min(...points.map((point) => point.x));
+  const top = Math.min(...points.map((point) => point.y));
+  const right = Math.max(...points.map((point) => point.x));
+  const bottom = Math.max(...points.map((point) => point.y));
+  return {
+    x: left,
+    y: top,
+    width: Math.max(MIN_PATH_SIZE, right - left),
+    height: Math.max(MIN_PATH_SIZE, bottom - top),
+  };
+}
+
+export function serializePenPath(path: PenPath): string {
+  const [first, ...rest] = path.nodes;
+  if (!first) return "";
+
+  const commands = [`M ${formatPoint(first.point)}`];
+  rest.forEach((node, index) => {
+    const previous = path.nodes[index];
+    commands.push(serializeSegment(previous, node));
+  });
+
+  if (path.closed && path.nodes.length > 1) {
+    commands.push(serializeSegment(path.nodes[path.nodes.length - 1], first));
+    commands.push("Z");
+  }
+
+  return commands.join(" ");
+}
+
+export function offsetPenPath(path: PenPath, offset: PenPoint): PenPath {
+  return transformPenPath(path, (point) => ({
+    x: point.x - offset.x,
+    y: point.y - offset.y,
+  }));
+}
+
+export function translatePenPath(
+  path: PenPath,
+  dx: number,
+  dy: number,
+): PenPath {
+  return transformPenPath(path, (point) => ({
+    x: point.x + dx,
+    y: point.y + dy,
+  }));
+}
+
+export function scalePenPathToGeometry(
+  path: PenPath,
+  origin: PenGeometry,
+  next: PenGeometry,
+): PenPath {
+  const scaleX = next.width / Math.max(1, origin.width);
+  const scaleY = next.height / Math.max(1, origin.height);
+  return transformPenPath(path, (point) => ({
+    x: next.x + (point.x - origin.x) * scaleX,
+    y: next.y + (point.y - origin.y) * scaleY,
+  }));
+}
+
+function serializeSegment(from: PenNode, to: PenNode) {
+  const c1 = from.handleOut ?? from.point;
+  const c2 = to.handleIn ?? to.point;
+  if (samePoint(c1, from.point) && samePoint(c2, to.point)) {
+    return `L ${formatPoint(to.point)}`;
+  }
+  return `C ${formatPoint(c1)} ${formatPoint(c2)} ${formatPoint(to.point)}`;
+}
+
+function transformPenPath(
+  path: PenPath,
+  transform: (point: PenPoint) => PenPoint,
+): PenPath {
+  return {
+    nodes: path.nodes.map((node) => ({
+      point: transform(node.point),
+      handleIn: node.handleIn ? transform(node.handleIn) : undefined,
+      handleOut: node.handleOut ? transform(node.handleOut) : undefined,
+    })),
+    closed: path.closed,
+  };
+}
+
+function clonePenNode(node: PenNode): PenNode {
+  return {
+    point: { ...node.point },
+    handleIn: node.handleIn ? { ...node.handleIn } : undefined,
+    handleOut: node.handleOut ? { ...node.handleOut } : undefined,
+  };
+}
+
+function mirrorPoint(anchor: PenPoint, point: PenPoint): PenPoint {
+  return {
+    x: anchor.x - (point.x - anchor.x),
+    y: anchor.y - (point.y - anchor.y),
+  };
+}
+
+function formatPoint(point: PenPoint) {
+  return `${roundCoord(point.x)} ${roundCoord(point.y)}`;
+}
+
+function roundCoord(value: number) {
+  return Math.round(value * 10) / 10;
+}
+
+function samePoint(a: PenPoint, b: PenPoint) {
+  return a.x === b.x && a.y === b.y;
+}
+
+function isPenPoint(point: PenPoint | undefined): point is PenPoint {
+  return !!point;
+}

package/corpus/templates/mail/app/lib/utils.ts

@@ -74,12 +74,12 @@ export function markdownToHtml(markdown: string): string {
         return `<h${level}>${renderInlineMarkdown(heading[2])}</h${level}>`;
       }
 
-      if (/^(\-|\*|\+)\s+/m.test(block)) {
+      if (/^(-|\*|\+)\s+/m.test(block)) {
         const items = block
           .split("\n")
           .map((line) => line.trim())
           .filter(Boolean)
-          .map((line) => line.replace(/^(\-|\*|\+)\s+/, ""))
+          .map((line) => line.replace(/^(-|\*|\+)\s+/, ""))
           .map((line) => `<li>${renderInlineMarkdown(line)}</li>`)
           .join("");
         return `<ul>${items}</ul>`;

package/corpus/templates/slides/.agents/skills/design-systems/SKILL.md

@@ -24,22 +24,21 @@ Design systems are stored in the `design_systems` SQL table. Each has a `data` c
 
 ### Source: Figma `.fig` file
 
-When the user uploads a raw Figma local copy (`.fig`), parse it in-process with
-`import-file` instead of treating it like a document:
+When the user uploads a raw Figma local copy (`.fig`), start Builder
+design-system indexing with `import-file` instead of treating it like a
+document:
 
 ```bash
 pnpm action import-file --filePath "data/uploads/brand.fig" --format fig
 ```
 
-The action returns `designSystem`, `customInstructions`, and `preview`. Review
-the result, then call `create-design-system` with:
+The action requires Builder to be connected and returns Builder `projectId`,
+`jobId`, `designSystemId`, and `builderUrl`. Builder is the source of truth for
+the indexed brand kit, generated docs, and usage guidance.
 
-- `title`: the returned title or a user-approved name
-- `data`: `JSON.stringify(designSystem)`
-- `customInstructions`: the returned `customInstructions`
-
-Do not call `import-document` for `.fig` files; it only handles metadata and
-will miss the real design tokens.
+Do not call `create-design-system` locally from `.fig` uploads. Do not call
+`import-document` for `.fig` files; it only handles metadata and will miss the
+Builder indexing flow.
 
 ## Applying to Slides
 

package/corpus/templates/slides/AGENTS.md

@@ -19,8 +19,9 @@ Detailed deck, slide-editing, image, design-system, and export workflows live in
 - Preserve deck structure and visual consistency. Prefer focused slide edits over
   regenerating whole decks unless requested.
 - Follow linked design-system tokens and custom instructions.
-- For raw Figma `.fig` uploads, call `import-file --format fig`, then create a
-  design system from the returned `designSystem` and `customInstructions`.
+- For raw Figma `.fig` uploads, call `import-file --format fig` to start
+  Builder design-system indexing. Do not create a local design system from raw
+  `.fig` output.
 - Treat import/export actions as shortcuts, not capability limits. When the
   exact Google Drive endpoint, file metadata field, export format, pagination
   mode, or API version matters, use `provider-api-catalog`,