@agent-native/core 0.80.10 → 0.80.11

package/corpus/templates/design/app/components/design/EditPanel.tsx

@@ -11,6 +11,7 @@ import {
   rgbaToHex,
   withColorOpacity,
 } from "@shared/color-utils";
+import { propNameToDataAttribute } from "@shared/component-model";
 import {
   IconAlignCenter,
   IconAlignJustified,
@@ -69,6 +70,7 @@ import {
   type ReactNode,
 } from "react";
 import { useParams } from "react-router";
+import { toast } from "sonner";
 
 import { Button } from "@/components/ui/button";
 import {
@@ -186,6 +188,11 @@ interface EditPanelProps {
   // -------------------------------------------------------------------------
   /** The active design's id — required to mount Tokens / States / Review. */
   designId?: string;
+  /**
+   * Called after a component prop edit returns the patched source so the parent
+   * editor can sync local/Yjs content instead of waiting for query invalidation.
+   */
+  onComponentPropApplied?: (fileId: string, content: string) => void;
   /**
    * Called after a token edit is applied so the parent can push the resolved
    * CSS-var map into the iframe via the tweak-values postMessage.
@@ -2149,6 +2156,292 @@ export function serializeAlpineDataObject(obj: Record<string, string>): string {
   return parts.length ? `{ ${parts.join(", ")} }` : "{}";
 }
 
+/**
+ * Format a single editable prop value as an `x-data` literal: bare for
+ * boolean / number values, single-quoted (with escaping) for strings.
+ *
+ * Pure — exported for tests.
+ */
+export function alpineDataValueLiteral(value: string): string {
+  const isBoolean = value === "true" || value === "false";
+  const isNumber = /^-?\d+(\.\d+)?$/.test(value);
+  return isBoolean || isNumber ? value : `'${value.replace(/'/g, "\\'")}'`;
+}
+
+/**
+ * Surgically replace a single top-level key's value inside an Alpine `x-data`
+ * object literal, preserving everything else byte-for-byte — methods
+ * (`toggle() { … }`), nested objects, escaped strings, quoted keys, comments,
+ * and whitespace are all left untouched.
+ *
+ * Unlike a `parseAlpineDataObject` → mutate → `serializeAlpineDataObject`
+ * round-trip (which only understands a flat object of simple literals and so
+ * *drops* anything it can't model), this walks the original string, finds the
+ * `key:` token at the top level (depth 0, not inside a string/comment), and
+ * rewrites only the value literal that immediately follows it.
+ *
+ * Returns `null` when the key cannot be located surgically (e.g. the value is
+ * an expression/function/object rather than a simple string/boolean/number, or
+ * the literal isn't a `{ … }` object) so the caller can fail safe instead of
+ * persisting a lossy rewrite.
+ *
+ * Pure — exported for tests.
+ */
+export function replaceAlpineDataKeyValue(
+  xData: string | null | undefined,
+  key: string,
+  nextValue: string,
+): string | null {
+  if (!xData) return null;
+  const trimmed = xData.trim();
+  if (!trimmed.startsWith("{") || !trimmed.endsWith("}")) return null;
+
+  const s = xData;
+  const n = s.length;
+  // Walk the whole string tracking nesting depth and skipping over strings,
+  // template literals, regex-ish slashes are not handled (Alpine x-data does
+  // not use them at the object-key level), and line / block comments. Only at
+  // object depth 1 (directly inside the outermost `{ … }`) do we look for the
+  // target `key :` token.
+  let depth = 0;
+  let i = 0;
+
+  /** Advance `i` past a quoted string starting at `i` (handles escapes). */
+  const skipString = (quote: string): void => {
+    i += 1; // opening quote
+    while (i < n) {
+      const c = s[i];
+      if (c === "\\") {
+        i += 2;
+        continue;
+      }
+      if (c === quote) {
+        i += 1;
+        return;
+      }
+      i += 1;
+    }
+  };
+
+  const escapedKey = key.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+  // Bare identifier key at a token boundary: `key` then optional ws then `:`.
+  const bareRe = new RegExp(`^(${escapedKey})(\\s*:\\s*)`);
+  // Quoted key: `'key'` or `"key"` then optional ws then `:`.
+  const quotedRe = new RegExp(`^(['"]${escapedKey}['"])(\\s*:\\s*)`);
+
+  while (i < n) {
+    const c = s[i];
+
+    // At the top level, a `{` / `,` (or the string start) opens a fresh value
+    // slot. Try to match the target key here *before* treating a quote as an
+    // opaque string — this is how quoted keys (`'size': …`) are recognised.
+    if (depth === 1) {
+      const prev = lastNonSpaceBefore(s, i);
+      if (prev === "{" || prev === ",") {
+        const rest = s.slice(i);
+        const m = bareRe.exec(rest) ?? quotedRe.exec(rest);
+        if (m) {
+          const valueStart = i + m[1].length + m[2].length;
+          const valueEnd = simpleValueEnd(s, valueStart);
+          if (valueEnd === null) return null; // value is not a simple literal
+          return (
+            s.slice(0, valueStart) +
+            alpineDataValueLiteral(nextValue) +
+            s.slice(valueEnd)
+          );
+        }
+      }
+    }
+
+    // Skip strings / template literals wholesale.
+    if (c === '"' || c === "'" || c === "`") {
+      skipString(c);
+      continue;
+    }
+    // Skip comments.
+    if (c === "/" && s[i + 1] === "/") {
+      i += 2;
+      while (i < n && s[i] !== "\n") i += 1;
+      continue;
+    }
+    if (c === "/" && s[i + 1] === "*") {
+      i += 2;
+      while (i < n && !(s[i] === "*" && s[i + 1] === "/")) i += 1;
+      i += 2;
+      continue;
+    }
+
+    if (c === "{" || c === "[" || c === "(") {
+      depth += 1;
+      i += 1;
+      continue;
+    }
+    if (c === "}" || c === "]" || c === ")") {
+      depth -= 1;
+      i += 1;
+      continue;
+    }
+
+    i += 1;
+  }
+
+  return null;
+}
+
+/** Last non-whitespace char strictly before index `i` (or `""`). */
+function lastNonSpaceBefore(s: string, i: number): string {
+  let j = i - 1;
+  while (j >= 0 && /\s/.test(s[j]!)) j -= 1;
+  return j >= 0 ? s[j]! : "";
+}
+
+/**
+ * Given the start index of a value in an `x-data` literal, return the index
+ * just past a *simple* literal value (single/double-quoted string with
+ * escapes, boolean, or number). Returns `null` when the value is anything else
+ * (an expression, function, object, array, template literal, etc.) so the
+ * caller can fail safe rather than mangle it.
+ */
+function simpleValueEnd(s: string, start: number): number | null {
+  const c = s[start];
+  if (c === "'" || c === '"') {
+    let i = start + 1;
+    while (i < s.length) {
+      if (s[i] === "\\") {
+        i += 2;
+        continue;
+      }
+      if (s[i] === c) return i + 1;
+      i += 1;
+    }
+    return null; // unterminated string
+  }
+  // Boolean / number: read the bare token, then confirm it is exactly one.
+  const m = /^[A-Za-z0-9_.+-]+/.exec(s.slice(start));
+  if (!m) return null;
+  const token = m[0];
+  const isBoolean = token === "true" || token === "false";
+  const isNumber = /^-?\d+(\.\d+)?$/.test(token);
+  if (!isBoolean && !isNumber) return null;
+  return start + token.length;
+}
+
+/**
+ * True when an `x-data` literal can be rebuilt from its flat parsed map with
+ * no loss — i.e. there is nothing richer than the simple `key: literal` pairs
+ * that `serializeAlpineDataObject` already round-trips. Used as the gate for
+ * falling back to a full rebuild when a surgical single-key replace is not
+ * possible (e.g. when adding a brand-new key).
+ *
+ * Returns `true` for an empty / absent literal (nothing to lose) and for a
+ * flat object whose `parse → serialize` round-trip is semantically stable.
+ * Returns `false` when the original holds methods, nested objects, comments,
+ * or expressions that a rebuild would silently drop.
+ *
+ * Pure — exported for tests.
+ */
+export function canRebuildAlpineDataLosslessly(
+  xData: string | null | undefined,
+): boolean {
+  const trimmed = (xData ?? "").trim();
+  // No object literal at all → there is nothing richer to preserve.
+  if (!trimmed || trimmed === "{}" || trimmed === "{ }") return true;
+  if (!trimmed.startsWith("{") || !trimmed.endsWith("}")) return false;
+
+  const parsed = parseAlpineDataObject(trimmed);
+  if (!parsed) return false;
+
+  // Re-serialize and re-parse; if the round-trip is stable AND the parsed map
+  // accounts for every top-level key actually present in the original, a
+  // rebuild loses nothing.
+  const reserialized = serializeAlpineDataObject(parsed);
+  const reparsed = parseAlpineDataObject(reserialized);
+  if (!reparsed) return false;
+  const keysA = Object.keys(parsed).sort().join(",");
+  const keysB = Object.keys(reparsed).sort().join(",");
+  if (keysA !== keysB) return false;
+
+  // Guard against dropped content the flat parser ignores (e.g. a trailing
+  // method): the number of top-level `key:` tokens in the original must match
+  // the number of parsed keys. Count top-level `:` separators conservatively.
+  return countTopLevelKeys(trimmed) === Object.keys(parsed).length;
+}
+
+/**
+ * Count top-level `key:` entries in an `x-data` object literal, skipping
+ * strings, comments, and nested braces/brackets/parens. A method like
+ * `toggle() { … }` is counted as a key too (its `:`-less form still occupies a
+ * top-level slot), so a mismatch against the flat parser's key count reveals
+ * dropped content.
+ */
+function countTopLevelKeys(xData: string): number {
+  const s = xData;
+  const n = s.length;
+  let depth = 0;
+  let i = 0;
+  let count = 0;
+  let sawTokenInSlot = false;
+
+  const skipString = (quote: string): void => {
+    i += 1;
+    while (i < n) {
+      if (s[i] === "\\") {
+        i += 2;
+        continue;
+      }
+      if (s[i] === quote) {
+        i += 1;
+        return;
+      }
+      i += 1;
+    }
+  };
+
+  while (i < n) {
+    const c = s[i]!;
+    if (c === '"' || c === "'" || c === "`") {
+      if (depth === 1) sawTokenInSlot = true;
+      skipString(c);
+      continue;
+    }
+    if (c === "/" && s[i + 1] === "/") {
+      i += 2;
+      while (i < n && s[i] !== "\n") i += 1;
+      continue;
+    }
+    if (c === "/" && s[i + 1] === "*") {
+      i += 2;
+      while (i < n && !(s[i] === "*" && s[i + 1] === "/")) i += 1;
+      i += 2;
+      continue;
+    }
+    if (c === "{" || c === "[" || c === "(") {
+      depth += 1;
+      i += 1;
+      continue;
+    }
+    if (c === "}" || c === "]" || c === ")") {
+      if (depth === 1 && c === "}" && sawTokenInSlot) {
+        count += 1;
+        sawTokenInSlot = false;
+      }
+      depth -= 1;
+      i += 1;
+      continue;
+    }
+    if (depth === 1) {
+      if (c === ",") {
+        if (sawTokenInSlot) count += 1;
+        sawTokenInSlot = false;
+      } else if (!/\s/.test(c)) {
+        sawTokenInSlot = true;
+      }
+    }
+    i += 1;
+  }
+  return count;
+}
+
 /** A boolean-ish prop value (`"true"` / `"false"`), case-insensitive. */
 export function isBooleanPropValue(value: string): boolean {
   const v = value.trim().toLowerCase();
@@ -5372,6 +5665,7 @@ function MakeItRealCard({
  * typed here; the action may return additional fields.
  */
 interface ComponentDetailsResult {
+  nodeId: string;
   name: string;
   sourceType: string;
   observedProps: Array<{ name: string; value: string }>;
@@ -5405,32 +5699,57 @@ interface ComponentDetailsResult {
  *
  * Matches the workbench artboard spec in DESIGN-STUDIO-PLAN.md §6.1.
  */
-function ComponentSection({
+export function ComponentSection({
   designId,
+  fileId,
   nodeId,
+  onComponentPropApplied,
   sourceCapabilities = [],
 }: {
   designId: string;
+  fileId?: string;
   nodeId: string;
+  onComponentPropApplied?: (fileId: string, content: string) => void;
   /** Capability names advertised by the current source. */
   sourceCapabilities?: string[];
 }) {
   const queryClient = useQueryClient();
-  const detailsKey = ["action", "get-component-details", { designId, nodeId }];
-
-  const { data, isLoading, error } = useActionQuery<ComponentDetailsResult>(
-    "get-component-details",
-    { designId, nodeId },
-  );
+  const detailsParams = { designId, nodeId, ...(fileId ? { fileId } : {}) };
+  const detailsKey = ["action", "get-component-details", detailsParams];
+
+  const { data, isLoading, error, refetch } =
+    useActionQuery<ComponentDetailsResult>(
+      "get-component-details",
+      detailsParams,
+      { refetchOnMount: "always" },
+    );
 
   const openSourceMutation = useActionMutation("open-component-source");
   const applyPropMutation = useActionMutation("apply-component-prop-edit");
 
-  // Persist a single prop change through apply-component-prop-edit. The canvas
-  // re-renders from the freshly written design content (get-design refetch),
-  // so no postMessage into the iframe is needed. The get-component-details
-  // cache is optimistically patched so the control reflects the new value
-  // immediately, then reconciled with the server on settle.
+  const postComponentPropPreview = useCallback(
+    (attribute: string, value: string) => {
+      if (typeof document === "undefined") return;
+
+      const iframe = document.querySelector<HTMLIFrameElement>(
+        "iframe[data-design-preview-iframe]",
+      );
+      iframe?.contentWindow?.postMessage(
+        {
+          type: "style-change",
+          selector: data?.instance?.selector ?? "",
+          nodeId: data?.instance?.nodeId ?? nodeId,
+          attributeOverrides: { [attribute]: value },
+        },
+        "*",
+      );
+    },
+    [data?.instance?.nodeId, data?.instance?.selector, nodeId],
+  );
+
+  // Persist a single prop change through apply-component-prop-edit. Attribute
+  // props also preview immediately in the iframe so the selected component
+  // changes without waiting for the write/refetch round-trip.
   const persistPropEdit = (
     edit:
       | { kind: "alpineData"; value: string }
@@ -5440,20 +5759,51 @@ function ComponentSection({
     queryClient.setQueryData<ComponentDetailsResult>(detailsKey, (prev) =>
       prev ? optimistic(prev) : prev,
     );
+    if (edit.kind === "attribute") {
+      postComponentPropPreview(edit.attribute, edit.value);
+    }
     applyPropMutation.mutate(
-      { designId, nodeId, edit },
+      { designId, nodeId, ...(fileId ? { fileId } : {}), edit },
       {
+        onSuccess: (result) => {
+          const response = result as {
+            content?: unknown;
+            fileId?: unknown;
+          };
+          if (
+            typeof response.fileId === "string" &&
+            typeof response.content === "string"
+          ) {
+            onComponentPropApplied?.(response.fileId, response.content);
+          }
+        },
         onSettled: () => {
-          // Re-render the canvas from the new content and re-read the props.
           void queryClient.invalidateQueries({
             queryKey: ["action", "get-design"],
           });
           void queryClient.invalidateQueries({ queryKey: detailsKey });
+          void refetch();
         },
       },
     );
   };
 
+  useEffect(() => {
+    if (typeof document === "undefined") return;
+
+    const handleMessage = (event: MessageEvent) => {
+      if (
+        (event.data as { type?: unknown } | null)?.type === "element-select"
+      ) {
+        void refetch();
+      }
+    };
+    window.addEventListener("message", handleMessage);
+    return () => {
+      window.removeEventListener("message", handleMessage);
+    };
+  }, [refetch]);
+
   // While loading, show a compact skeleton that matches the section width.
   if (isLoading) {
     return (
@@ -5491,7 +5841,7 @@ function ComponentSection({
   // Real-app sources keep the deeper source-prop controls gated as-is, so for
   // non-inline sources the controls are read-only here.
   const isInline = sourceType === "inline";
-  const editingEnabled = isInline; // gated; real-app stays read-only for now
+  const editingEnabled = isInline && capabilities.canEditProps; // gated; real-app stays read-only for now
   const alpineData = parseAlpineDataObject(instance?.alpineData);
 
   // Each editable row: name + current value + how it persists + its options.
@@ -5552,22 +5902,51 @@ function ComponentSection({
     if (!editingEnabled || nextValue === row.value) return;
 
     if (row.surface === "alpineData") {
-      const nextData = { ...(alpineData ?? {}), [row.name]: nextValue };
-      const serialized = serializeAlpineDataObject(nextData);
-      persistPropEdit({ kind: "alpineData", value: serialized }, (prev) => ({
-        ...prev,
-        instance: { ...(prev.instance ?? {}), alpineData: serialized },
-        observedProps: prev.observedProps.map((p) =>
-          p.name === row.name ? { ...p, value: nextValue } : p,
-        ),
-      }));
+      // Surgically replace only the edited key's value inside the original
+      // x-data string so methods, nested objects, escaped strings, quoted
+      // keys, and whitespace survive byte-for-byte. A full
+      // parse→mutate→serialize round-trip would drop anything
+      // parseAlpineDataObject can't model (e.g. `toggle() { … }`).
+      const original = instance?.alpineData ?? "";
+      const surgical = replaceAlpineDataKeyValue(original, row.name, nextValue);
+
+      let serialized: string;
+      if (surgical != null) {
+        serialized = surgical;
+      } else if (canRebuildAlpineDataLosslessly(original)) {
+        // The key isn't present yet (or there is no original literal). Rebuild
+        // from the flat map — safe here precisely because the original holds
+        // nothing richer than the flat literals serialize already preserves.
+        const nextData = { ...(alpineData ?? {}), [row.name]: nextValue };
+        serialized = serializeAlpineDataObject(nextData);
+      } else {
+        // The original carries content (methods / nested / expressions) we
+        // can't rewrite for this key without dropping it. Fail safe: skip the
+        // edit rather than persist a lossy rewrite, and tell the user why so
+        // the change doesn't silently vanish.
+        toast.error(
+          // i18n-ignore
+          "Can’t safely edit this prop inline — this component’s Alpine state is too complex. Edit the source instead.",
+        );
+        return;
+      }
+
+      const nextSerialized = serialized;
+      persistPropEdit(
+        { kind: "alpineData", value: nextSerialized },
+        (prev) => ({
+          ...prev,
+          instance: { ...(prev.instance ?? {}), alpineData: nextSerialized },
+          observedProps: prev.observedProps.map((p) =>
+            p.name === row.name ? { ...p, value: nextValue } : p,
+          ),
+        }),
+      );
     } else {
-      // camelCase prop name → data-agent-native-prop-<kebab>
-      const kebab = row.name.replace(/[A-Z]/g, (c) => `-${c.toLowerCase()}`);
       persistPropEdit(
         {
           kind: "attribute",
-          attribute: `data-agent-native-prop-${kebab}`,
+          attribute: propNameToDataAttribute(row.name),
           value: nextValue,
         },
         (prev) => {
@@ -5624,7 +6003,11 @@ function ComponentSection({
                 "Edit component source" /* i18n-ignore design inspector action */
               }
               onClick={() => {
-                openSourceMutation.mutate({ designId, nodeId });
+                openSourceMutation.mutate({
+                  designId,
+                  nodeId,
+                  ...(fileId ? { fileId } : {}),
+                });
               }}
             >
               <IconExternalLink className="size-3.5" />
@@ -5667,6 +6050,7 @@ function ComponentSection({
             {rows.map((row) => {
               const hasOptions = (row.options?.length ?? 0) > 0;
               const isBoolean = !hasOptions && isBooleanPropValue(row.value);
+              const disabled = !editingEnabled || applyPropMutation.isPending;
               return (
                 <div key={row.name} className="flex items-center gap-1.5">
                   <Label className="w-[64px] shrink-0 truncate text-[11px] font-medium capitalize text-muted-foreground">
@@ -5677,7 +6061,7 @@ function ComponentSection({
                     <Select
                       value={row.value || row.options![0] || ""}
                       onValueChange={(v) => commitProp(row, v)}
-                      disabled={!editingEnabled}
+                      disabled={disabled}
                     >
                       <SelectTrigger className="h-6 min-w-0 flex-1 rounded-md border-[var(--design-editor-control-border)] bg-[var(--design-editor-control-bg)] px-1.5 text-[11px] shadow-none focus:ring-1 focus:ring-[var(--design-editor-accent-color)]">
                         <SelectValue />
@@ -5702,7 +6086,7 @@ function ComponentSection({
                         onCheckedChange={(checked) =>
                           commitProp(row, checked ? "true" : "false")
                         }
-                        disabled={!editingEnabled}
+                        disabled={disabled}
                         className="h-4 w-7 [&>span]:size-3 [&>span]:data-[state=checked]:translate-x-3"
                         aria-label={
                           row.name /* i18n-ignore dynamic prop name */
@@ -5714,7 +6098,7 @@ function ComponentSection({
                     <Input
                       defaultValue={row.value}
                       key={`${row.name}:${row.value}`}
-                      disabled={!editingEnabled}
+                      disabled={disabled}
                       onBlur={(e) => commitProp(row, e.target.value)}
                       onKeyDown={(e) => {
                         if (e.key === "Enter") {
@@ -5764,6 +6148,7 @@ export function EditPanel({
   fileId,
   filename,
   designId,
+  onComponentPropApplied,
   onTokensApplied,
   statesPanelProps,
   reviewPanelProps,
@@ -5825,6 +6210,7 @@ export function EditPanel({
   // over-scroll bounce, could briefly un-shield the canvas and allow a stray
   // pointer event to deselect the selected canvas element (R3 regression).
   const scrolledRecentlyRef = useRef(false);
+  const userScrollIntentRef = useRef(false);
   const scrollTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
   if (readOnly) {
@@ -5904,7 +6290,14 @@ export function EditPanel({
 
           <div
             className="design-inspector-scroll min-h-0 flex-1 overflow-y-auto overscroll-contain"
+            onWheelCapture={() => {
+              userScrollIntentRef.current = true;
+            }}
+            onTouchMoveCapture={() => {
+              userScrollIntentRef.current = true;
+            }}
             onScroll={() => {
+              if (!userScrollIntentRef.current) return;
               // Mark that a scroll just happened so the click that some
               // browsers fire at the end of a scroll gesture (or after an
               // overscroll/rubber-band bounce) is suppressed. Crucially this
@@ -5919,6 +6312,7 @@ export function EditPanel({
               }
               scrollTimerRef.current = setTimeout(() => {
                 scrolledRecentlyRef.current = false;
+                userScrollIntentRef.current = false;
                 scrollTimerRef.current = null;
               }, 300);
             }}
@@ -5930,6 +6324,7 @@ export function EditPanel({
               // browsers generate after a touch-scroll ends.
               if (!scrolledRecentlyRef.current) return;
               scrolledRecentlyRef.current = false;
+              userScrollIntentRef.current = false;
               if (scrollTimerRef.current !== null) {
                 clearTimeout(scrollTimerRef.current);
                 scrollTimerRef.current = null;
@@ -5971,7 +6366,9 @@ export function EditPanel({
             {designId && componentNodeId && (
               <ComponentSection
                 designId={designId}
+                fileId={fileId}
                 nodeId={componentNodeId}
+                onComponentPropApplied={onComponentPropApplied}
                 sourceCapabilities={sourceCapabilities}
               />
             )}