@agent-native/core 0.80.10 → 0.81.0

package/corpus/templates/design/shared/board-objects.ts

@@ -0,0 +1,288 @@
+/**
+ * Board object types shared between the frontend, actions, and agent skills.
+ *
+ * Board objects are persisted canvas primitives stored inside designs.data under
+ * the "boardObjects" key. Unlike code-layer nodes (which live inside screen HTML
+ * files), board objects float on the infinite canvas surface and are not bound
+ * to any screen iframe.
+ *
+ * The kind set mirrors DraftPrimitiveKind in MultiScreenCanvas.tsx exactly so
+ * the same shape-rendering logic (DraftPrimitiveContent / canvasPrimitiveReactStyle)
+ * can be reused for the visual output in BoardObjectLayer.
+ */
+
+export type CanvasPrimitiveKindLike =
+  | "frame"
+  | "rectangle"
+  | "ellipse"
+  | "polygon"
+  | "star"
+  | "line"
+  | "arrow"
+  | "text"
+  | "path";
+
+export interface BoardObjectEntry {
+  id: string;
+  kind: CanvasPrimitiveKindLike;
+  /**
+   * Bounding-box geometry in canvas units (same coordinate space as
+   * FrameGeometry — offset from the canvas origin before SURFACE_PADDING is
+   * applied).  z is the stacking order; rotation is in degrees (clockwise).
+   */
+  geometry: {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    rotation?: number;
+    z?: number;
+  };
+  /** CSS fill colour (background). Defaults to theme primary tint when absent. */
+  fill?: string;
+  /** CSS stroke colour (border). Defaults to theme primary stroke when absent. */
+  stroke?: string;
+  /** Stroke width in pixels. */
+  strokeWidth?: number;
+  /** Text content — only meaningful when kind === "text". */
+  text?: string;
+  /**
+   * SVG path data string — only meaningful when kind is "path", "line", or "arrow".
+   * Falls back to a pointsToPath conversion when absent and `points` is set.
+   */
+  pathData?: string;
+  /**
+   * Raw point list for polyline/polygon kinds without explicit pathData.
+   * Each entry is a canvas-space {x, y} point.
+   */
+  points?: Array<{ x: number; y: number }>;
+  /**
+   * When true the text box grows horizontally to fit its content
+   * (single-line auto-size mode).
+   */
+  autoSize?: boolean;
+  /** Human-readable label shown in the layers panel. */
+  name?: string;
+  /** ISO 8601 creation timestamp. */
+  createdAt: string;
+}
+
+// ---------------------------------------------------------------------------
+// Valid kind set for runtime validation
+// ---------------------------------------------------------------------------
+
+const VALID_KINDS = new Set<string>([
+  "frame",
+  "rectangle",
+  "ellipse",
+  "polygon",
+  "star",
+  "line",
+  "arrow",
+  "text",
+  "path",
+]);
+
+// ---------------------------------------------------------------------------
+// parseBoardObjects
+// ---------------------------------------------------------------------------
+
+/**
+ * Parse the boardObjects map from an unknown value (e.g. from designs.data JSON).
+ *
+ * Accepts:
+ *   - A Record<string, BoardObjectEntry> already deserialized from JSON.
+ *   - A JSON string that encodes such a record.
+ *   - null / undefined / any other value → returns an empty record.
+ *
+ * Individual entries that are missing the required `id`, `kind`, or `geometry`
+ * fields are silently dropped so a partially-corrupt payload never prevents
+ * the canvas from rendering.
+ */
+export function parseBoardObjects(
+  value: unknown,
+): Record<string, BoardObjectEntry> {
+  let raw: unknown = value;
+
+  // Attempt to parse JSON strings.
+  if (typeof raw === "string") {
+    try {
+      raw = JSON.parse(raw);
+    } catch {
+      return {};
+    }
+  }
+
+  if (raw == null || typeof raw !== "object" || Array.isArray(raw)) {
+    return {};
+  }
+
+  const result: Record<string, BoardObjectEntry> = {};
+  for (const [key, entry] of Object.entries(raw as Record<string, unknown>)) {
+    if (!isValidEntry(entry)) continue;
+    result[key] = entry as BoardObjectEntry;
+  }
+  return result;
+}
+
+// ---------------------------------------------------------------------------
+// draftToBoardObjectEntry
+// ---------------------------------------------------------------------------
+
+/**
+ * Minimal structural type matching DraftPrimitive in MultiScreenCanvas.tsx.
+ * Defined here so shared/board-objects.ts stays free of React/frontend imports.
+ */
+export interface DraftPrimitiveLike {
+  id: string;
+  kind: CanvasPrimitiveKindLike;
+  geometry: {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    rotation?: number;
+    z?: number;
+  };
+  points?: Array<{ x: number; y: number }>;
+  pathData?: string;
+  text?: string;
+  fill?: string;
+  stroke?: string;
+  strokeWidth?: number;
+  autoSize?: boolean;
+}
+
+/**
+ * Convert a DraftPrimitive (in-progress canvas shape) to a BoardObjectEntry
+ * ready for persistence.
+ *
+ * Called by MultiScreenCanvas when a drawn primitive is outside all frames
+ * (single-screen designs always absorb into the frame instead).
+ */
+export function draftToBoardObjectEntry(
+  draft: DraftPrimitiveLike,
+): BoardObjectEntry {
+  const entry: BoardObjectEntry = {
+    id: draft.id,
+    kind: draft.kind,
+    geometry: { ...draft.geometry },
+    createdAt: new Date().toISOString(),
+  };
+  if (draft.fill !== undefined) entry.fill = draft.fill;
+  if (draft.stroke !== undefined) entry.stroke = draft.stroke;
+  if (draft.strokeWidth !== undefined) entry.strokeWidth = draft.strokeWidth;
+  if (draft.text !== undefined) entry.text = draft.text;
+  if (draft.pathData !== undefined) entry.pathData = draft.pathData;
+  if (draft.points !== undefined) entry.points = draft.points;
+  if (draft.autoSize !== undefined) entry.autoSize = draft.autoSize;
+  return entry;
+}
+
+// ---------------------------------------------------------------------------
+// Board-object resize helpers
+// ---------------------------------------------------------------------------
+
+/** Geometry shape for resize calculations (same as BoardObjectEntry.geometry). */
+export interface BoardObjectGeometry {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  rotation?: number;
+  z?: number;
+}
+
+/**
+ * Apply a resize delta to a board object's geometry given the resize handle
+ * (one of "nw", "ne", "se", "sw") and the mouse delta (dx, dy) in canvas units.
+ *
+ * - "nw": move top-left corner → adjusts x, y, width, height.
+ * - "ne": move top-right corner → adjusts y, width, height.
+ * - "se": move bottom-right corner → adjusts width, height.
+ * - "sw": move bottom-left corner → adjusts x, width, height.
+ *
+ * Width and height are clamped to a minimum of 4 pixels.
+ */
+export function applyBoardObjectResize(
+  origin: BoardObjectGeometry,
+  handle: string,
+  dx: number,
+  dy: number,
+): BoardObjectGeometry {
+  const MIN_SIZE = 4;
+  let { x, y, width, height } = origin;
+
+  switch (handle) {
+    case "nw":
+      x = origin.x + dx;
+      y = origin.y + dy;
+      width = Math.max(MIN_SIZE, origin.width - dx);
+      height = Math.max(MIN_SIZE, origin.height - dy);
+      // Keep anchor at bottom-right
+      if (origin.width - dx < MIN_SIZE) x = origin.x + origin.width - MIN_SIZE;
+      if (origin.height - dy < MIN_SIZE)
+        y = origin.y + origin.height - MIN_SIZE;
+      break;
+    case "ne":
+      y = origin.y + dy;
+      width = Math.max(MIN_SIZE, origin.width + dx);
+      height = Math.max(MIN_SIZE, origin.height - dy);
+      if (origin.height - dy < MIN_SIZE)
+        y = origin.y + origin.height - MIN_SIZE;
+      break;
+    case "se":
+      width = Math.max(MIN_SIZE, origin.width + dx);
+      height = Math.max(MIN_SIZE, origin.height + dy);
+      break;
+    case "sw":
+      x = origin.x + dx;
+      width = Math.max(MIN_SIZE, origin.width - dx);
+      height = Math.max(MIN_SIZE, origin.height + dy);
+      if (origin.width - dx < MIN_SIZE) x = origin.x + origin.width - MIN_SIZE;
+      break;
+    default:
+      break;
+  }
+
+  return { ...origin, x, y, width, height };
+}
+
+/**
+ * Map a resize handle string to the CSS cursor value shown while dragging.
+ */
+export function getBoardObjectResizeCursor(handle: string): string {
+  switch (handle) {
+    case "nw":
+    case "se":
+      return "nwse-resize";
+    case "ne":
+    case "sw":
+      return "nesw-resize";
+    default:
+      return "se-resize";
+  }
+}
+
+function isValidEntry(entry: unknown): entry is BoardObjectEntry {
+  if (entry == null || typeof entry !== "object" || Array.isArray(entry)) {
+    return false;
+  }
+  const e = entry as Record<string, unknown>;
+  if (typeof e["id"] !== "string" || !e["id"]) return false;
+  if (typeof e["kind"] !== "string" || !VALID_KINDS.has(e["kind"])) {
+    return false;
+  }
+  if (typeof e["createdAt"] !== "string") return false;
+  const geo = e["geometry"];
+  if (geo == null || typeof geo !== "object" || Array.isArray(geo)) {
+    return false;
+  }
+  const g = geo as Record<string, unknown>;
+  return (
+    typeof g["x"] === "number" &&
+    typeof g["y"] === "number" &&
+    typeof g["width"] === "number" &&
+    typeof g["height"] === "number"
+  );
+}

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

@@ -1659,6 +1659,17 @@ function layerNameFor(
 }
 
 function treeTypeForNode(node: CodeLayerNode): CodeLayerTreeNodeType {
+  // Canvas primitives (drawn shapes / board objects) carry their kind via
+  // data-an-primitive so the layers panel shows a true shape/text/frame icon
+  // instead of the generic code glyph. The marker wins over tag heuristics:
+  // these primitives are <div>s, which would otherwise classify as "element".
+  const primitiveKind = node.dataAttributes["data-an-primitive"];
+  if (primitiveKind) {
+    if (primitiveKind === "text") return "text";
+    if (primitiveKind === "frame") return "frame";
+    if (primitiveKind === "image") return "image";
+    return "shape";
+  }
   if (TEXT_LAYER_TAGS.has(node.tag)) return "text";
   if (IMAGE_LAYER_TAGS.has(node.tag)) return "image";
   if (SHAPE_LAYER_TAGS.has(node.tag)) return "shape";
@@ -3371,6 +3382,47 @@ export function applyVisualEdit(
   };
 }
 
+/**
+ * Attributes injected by the editor at runtime that must NOT appear in
+ * on-disk source files. These are stripped before any write-back so that
+ * the saved file stays clean and matches what a developer would author.
+ *
+ * - `data-agent-native-node-id` — stable selection id stamped by the editor.
+ * - `data-agent-native-layer-name` is intentionally kept: it is a
+ *   developer-authored attribute (the canonical layer-name hint) and is
+ *   useful in committed source.  Only ephemeral runtime stamps are removed.
+ */
+const EDITOR_ONLY_ATTRIBUTES: readonly string[] = ["data-agent-native-node-id"];
+
+/**
+ * Strip editor-only runtime attributes from an HTML string, returning clean
+ * source suitable for writing back to disk.
+ *
+ * Currently removes `data-agent-native-node-id` (and any future attributes
+ * listed in EDITOR_ONLY_ATTRIBUTES). The function operates on the raw HTML
+ * string with a regex that handles both quoted forms and unquoted values, and
+ * is safe to apply to already-clean source (idempotent).
+ *
+ * @param html  The raw HTML string, potentially containing editor stamps.
+ * @returns     A new string with all editor-only attributes removed.
+ */
+export function stripEditorOnlyAttributes(html: string): string {
+  if (!html || typeof html !== "string") return html ?? "";
+  let result = html;
+  for (const attr of EDITOR_ONLY_ATTRIBUTES) {
+    // Match the attribute with optional surrounding whitespace. The value may
+    // be double-quoted, single-quoted, or unquoted (no spaces / > chars).
+    // A leading \s+ is required so we only strip the attribute name+value pair
+    // and leave surrounding markup intact.
+    const re = new RegExp(
+      `\\s+${attr.replace(/-/g, "\\-")}\\s*=\\s*(?:"[^"]*"|'[^']*'|[^\\s"'=><\`]+)`,
+      "gi",
+    );
+    result = result.replace(re, "");
+  }
+  return result;
+}
+
 export interface MoveNodeBetweenDocumentsOptions {
   nodeId: string;
   anchorNodeId?: string;

package/corpus/templates/design/shared/component-model.ts

@@ -40,6 +40,22 @@ export interface ComponentPropValue {
   value: string;
 }
 
+/**
+ * Convert a JavaScript/React prop name to the `data-agent-native-prop-*`
+ * attribute name used in rendered HTML.
+ *
+ * HTML attribute names are lower-cased by parsers, so camelCase must be written
+ * as kebab-case to round-trip through {@link extractProps}.
+ */
+export function propNameToDataAttribute(propName: string): string {
+  const suffix = propName
+    .trim()
+    .replace(/([a-z0-9])([A-Z])/g, "$1-$2")
+    .replace(/[\s_]+/g, "-")
+    .toLowerCase();
+  return `${COMPONENT_PROP_PREFIX}${suffix}`;
+}
+
 // ─── Component instance ───────────────────────────────────────────────────────
 
 /**
@@ -118,6 +134,25 @@ export function componentNameFor(node: CodeLayerNode): string | null {
   return raw.trim();
 }
 
+/**
+ * Match a selected component handle against both generated code-layer ids and
+ * durable runtime/source ids stamped into the rendered DOM.
+ */
+export function componentNodeIdMatches(
+  node: CodeLayerNode,
+  nodeId: string,
+): boolean {
+  return (
+    node.id === nodeId ||
+    node.dataAttributes["data-agent-native-node-id"] === nodeId ||
+    node.dataAttributes["data-code-layer-id"] === nodeId ||
+    node.dataAttributes["data-layer-id"] === nodeId ||
+    node.dataAttributes["data-builder-id"] === nodeId ||
+    node.dataAttributes["data-loc"] === nodeId ||
+    node.attributes.id === nodeId
+  );
+}
+
 /**
  * Extract simple prop values from `data-agent-native-prop-*` attributes on a
  * code-layer node.

package/corpus/templates/design/shared/motion-compiler.ts

@@ -47,6 +47,7 @@ export interface CompileResult {
  */
 export function compile(timeline: MotionTimeline): CompileResult {
   const { tracks, durationMs, defaultEase } = timeline;
+  assertSafeMotionCssToken(defaultEase, "defaultEase");
 
   if (!tracks || tracks.length === 0) {
     const css = reducedMotionBlock([]);
@@ -55,7 +56,15 @@ export function compile(timeline: MotionTimeline): CompileResult {
 
   const animNames: string[] = [];
   const kfBlocks: string[] = [];
-  const ruleBlocks: string[] = [];
+  const rulesByTarget = new Map<
+    string,
+    {
+      names: string[];
+      durations: string[];
+      timings: string[];
+      fillModes: string[];
+    }
+  >();
 
   // Sort tracks for determinism: targetNodeId ASC, property ASC.
   const sorted = [...tracks].sort((a, b) => {
@@ -66,6 +75,7 @@ export function compile(timeline: MotionTimeline): CompileResult {
   for (const track of sorted) {
     const { targetNodeId, property, keyframes } = track;
     if (!keyframes || keyframes.length === 0) continue;
+    assertSafeMotionCssProperty(property, "track.property");
 
     const name = animationName(targetNodeId, property);
     animNames.push(name);
@@ -73,15 +83,31 @@ export function compile(timeline: MotionTimeline): CompileResult {
 
     const dur = formatDuration(durationMs);
     const ease = keyframes[0]?.ease ?? defaultEase;
-    ruleBlocks.push(
-      `[data-agent-native-node-id="${escAttr(targetNodeId)}"] {\n` +
-        `  animation-name: ${name};\n` +
-        `  animation-duration: ${dur};\n` +
-        `  animation-timing-function: ${ease};\n` +
-        `  animation-fill-mode: both;\n` +
+    assertSafeMotionCssToken(ease, "track ease");
+    const targetRule = rulesByTarget.get(targetNodeId) ?? {
+      names: [],
+      durations: [],
+      timings: [],
+      fillModes: [],
+    };
+    targetRule.names.push(name);
+    targetRule.durations.push(dur);
+    targetRule.timings.push(ease);
+    targetRule.fillModes.push("both");
+    rulesByTarget.set(targetNodeId, targetRule);
+  }
+
+  const ruleBlocks = [...rulesByTarget.entries()]
+    .sort(([a], [b]) => a.localeCompare(b))
+    .map(
+      ([targetNodeId, rule]) =>
+        `[data-agent-native-node-id="${escAttr(targetNodeId)}"] {\n` +
+        `  animation-name: ${rule.names.join(", ")};\n` +
+        `  animation-duration: ${rule.durations.join(", ")};\n` +
+        `  animation-timing-function: ${rule.timings.join(", ")};\n` +
+        `  animation-fill-mode: ${rule.fillModes.join(", ")};\n` +
         `}`,
     );
-  }
 
   const css = [...kfBlocks, ...ruleBlocks, reducedMotionBlock(animNames)].join(
     "\n\n",
@@ -99,6 +125,7 @@ export function compile(timeline: MotionTimeline): CompileResult {
  */
 export function parse(css: string): MotionTrack[] {
   const tracks: MotionTrack[] = [];
+  const targetByAnimationName = parseAnimationTargets(css);
   const kfRe = /@keyframes\s+(an-motion-[^\s{]+)\s*\{/g;
   let m: RegExpExecArray | null;
 
@@ -112,15 +139,33 @@ export function parse(css: string): MotionTrack[] {
     if (body === null) continue;
 
     tracks.push({
-      targetNodeId: decoded.targetNodeId,
+      targetNodeId: targetByAnimationName.get(fullName) ?? decoded.targetNodeId,
       property: decoded.property,
-      keyframes: parseKeyframeBody(body),
+      keyframes: parseKeyframeBody(body, decoded.property),
     });
   }
 
   return tracks;
 }
 
+/**
+ * Extract the CSS body from a managed `<style data-agent-native-motion>` block
+ * inside an HTML document. Returns `null` when the document has no managed block
+ * or the block is malformed.
+ */
+export function extractManagedMotionCss(html: string): string | null {
+  const openRe = /<style\b(?=[^>]*\bdata-agent-native-motion\b)[^>]*>/i;
+  const openMatch = openRe.exec(html);
+  if (!openMatch) return null;
+
+  const bodyStart = openMatch.index + openMatch[0].length;
+  const afterOpen = html.slice(bodyStart);
+  const closeMatch = /<\s*\/\s*style\b[^>]*>/i.exec(afterOpen);
+  if (!closeMatch) return null;
+
+  return afterOpen.slice(0, closeMatch.index).trim();
+}
+
 /**
  * Return the djb2 hash of a CSS string — useful for verifying stored
  * `compiled_hash` values without re-compiling a full timeline.
@@ -129,8 +174,51 @@ export function hashCss(css: string): string {
   return djb2(css);
 }
 
+/**
+ * Reject caller-supplied CSS declaration values before interpolation into the
+ * managed motion stylesheet. Motion values still allow useful CSS functions
+ * such as `translateY(...)`, `calc(...)`, `cubic-bezier(...)`, and `var(...)`,
+ * but block declaration/rule/style breakouts and remote-resource hooks.
+ */
+export function assertSafeMotionCssToken(value: string, field: string): string {
+  if (typeof value !== "string") {
+    throw new Error(`Invalid ${field}: expected a CSS string value.`);
+  }
+  if (value.trim().length === 0) {
+    throw new Error(`Invalid ${field}: motion CSS values cannot be empty.`);
+  }
+  if (CSS_TOKEN_CONTROL_RE.test(value) || CSS_TOKEN_BREAKOUT_RE.test(value)) {
+    throw new Error(
+      `Invalid ${field}: semicolons, braces, comments, angle brackets, control characters, and url(...) are not allowed in motion CSS values.`,
+    );
+  }
+  return value;
+}
+
+/**
+ * Validate that a CSS property name is a safe CSS identifier.
+ *
+ * Accepts standard and vendor-prefixed property names (e.g. "opacity",
+ * "transform", "-webkit-transform") and nothing else.
+ */
+export function assertSafeMotionCssProperty(
+  property: string,
+  field: string,
+): string {
+  if (!/^-?[a-zA-Z][a-zA-Z0-9-]*$/.test(property)) {
+    throw new Error(
+      `Invalid ${field}: "${property}" is not a valid CSS property identifier. ` +
+        "Only ASCII letters, digits, hyphens, and an optional leading hyphen are allowed.",
+    );
+  }
+  return property;
+}
+
 // ─── Internal helpers ─────────────────────────────────────────────────────────
 
+const CSS_TOKEN_BREAKOUT_RE = /[;{}<>]|\/\*|\*\/|\burl\s*\(/i;
+const CSS_TOKEN_CONTROL_RE = /[\u0000-\u001f\u007f]/;
+
 /**
  * Build a deterministic CSS animation name from a node id and CSS property.
  * Non-ident characters are replaced with `_`.
@@ -169,6 +257,8 @@ function keyframesBlock(
   const stops = sorted.map((kf) => {
     const pct = formatPercent(kf.t);
     const ease = kf.ease ?? defaultEase;
+    assertSafeMotionCssToken(kf.value, "keyframe value");
+    assertSafeMotionCssToken(ease, "keyframe ease");
     return (
       `  ${pct} {\n` +
       `    ${property}: ${kf.value};\n` +
@@ -221,6 +311,30 @@ function escAttr(value: string): string {
   return value.replace(/\\/g, "\\\\").replace(/"/g, '\\"');
 }
 
+function unescAttr(value: string): string {
+  return value.replace(/\\"/g, '"').replace(/\\\\/g, "\\");
+}
+
+function parseAnimationTargets(css: string): Map<string, string> {
+  const targets = new Map<string, string>();
+  const ruleRe =
+    /\[data-agent-native-node-id="((?:\\.|[^"\\])*)"\]\s*\{([^}]*)\}/g;
+  let m: RegExpExecArray | null;
+
+  while ((m = ruleRe.exec(css)) !== null) {
+    const targetNodeId = unescAttr(m[1]);
+    const body = m[2];
+    const nameMatch = body.match(/animation-name\s*:\s*([^;]+)/);
+    if (!nameMatch) continue;
+    for (const name of nameMatch[1].split(",")) {
+      const trimmed = name.trim();
+      if (trimmed) targets.set(trimmed, targetNodeId);
+    }
+  }
+
+  return targets;
+}
+
 /**
  * Find the content of the CSS block that starts just after position `start`
  * (i.e., just after the opening `{`). Returns `null` on unbalanced braces.
@@ -238,10 +352,14 @@ function extractBlock(css: string, start: number): string | null {
 }
 
 /** Parse the interior of a `@keyframes` block into `MotionKeyframe[]`. */
-function parseKeyframeBody(body: string): MotionKeyframe[] {
+function parseKeyframeBody(body: string, property: string): MotionKeyframe[] {
   const frames: MotionKeyframe[] = [];
   const stopRe = /([\d.]+%|from|to)\s*\{([^}]*)\}/g;
   let m: RegExpExecArray | null;
+  const propRe = new RegExp(
+    `^\\s*${escapeRegExp(property)}\\s*:\\s*([^;]+)`,
+    "m",
+  );
 
   while ((m = stopRe.exec(body)) !== null) {
     const pctStr = m[1];
@@ -252,10 +370,10 @@ function parseKeyframeBody(body: string): MotionKeyframe[] {
     const easeMatch = content.match(/animation-timing-function\s*:\s*([^;]+)/);
     const ease = easeMatch ? (easeMatch[1].trim() as MotionEase) : undefined;
 
-    // Extract the first non-timing property as the animated value.
-    const propMatch = content.match(
-      /^(?!.*animation-timing-function)[a-zA-Z-]+\s*:\s*([^;]+)/m,
-    );
+    // Extract the animated property's value. The compiler emits the same
+    // property for every stop, so parsing by the decoded property avoids
+    // confusing `animation-timing-function` with the animated value.
+    const propMatch = content.match(propRe);
     const value = propMatch ? propMatch[1].trim() : "";
 
     frames.push({ t, value, ...(ease !== undefined ? { ease } : {}) });
@@ -264,6 +382,10 @@ function parseKeyframeBody(body: string): MotionKeyframe[] {
   return frames;
 }
 
+function escapeRegExp(value: string): string {
+  return value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
+
 /**
  * djb2 string hash — deterministic, no crypto dependency.
  * Returns a 32-bit unsigned integer as a decimal string.

package/corpus/templates/design/shared/motion-timeline.ts

@@ -138,8 +138,8 @@ export const MOTION_PROPERTY_PRESETS: MotionPropertyPreset[] = [
 /**
  * Build a brand-new {@link MotionTrack} for a target node + property, seeded
  * with two keyframes (start/end) so it is immediately valid for both the live
- * preview bridge and the `apply-motion-edit` "Write to CSS" commit. Used by the
- * MotionDock "create first track" path.
+ * preview bridge and the `apply-motion-edit` managed CSS persist path. Used by
+ * the MotionDock "create first track" path.
  *
  * When `preset` is omitted, a neutral 0 → 1 opacity-style pair is used so the
  * track still compiles; callers normally pass a {@link MotionPropertyPreset}.