@agent-native/core 0.80.10 → 0.81.0

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,
@@ -51,7 +52,6 @@ import {
   IconLock,
   IconMaximize,
   IconMinus,
-  IconPalette,
   IconPhoto,
   IconPlus,
   IconShadow,
@@ -69,6 +69,7 @@ import {
   type ReactNode,
 } from "react";
 import { useParams } from "react-router";
+import { toast } from "sonner";
 
 import { Button } from "@/components/ui/button";
 import {
@@ -109,10 +110,6 @@ import {
 } from "@/components/ui/tooltip";
 import { cn } from "@/lib/utils";
 
-import {
-  DesignExtensionsPanel,
-  type DesignExtensionSlotContext,
-} from "./DesignExtensionsPanel";
 import {
   AutoLayoutMatrix,
   ConstraintsWidget,
@@ -141,18 +138,10 @@ import { ReviewPanel } from "./ReviewPanel";
 import type { ReviewPanelProps } from "./ReviewPanel";
 import { StatesPanel } from "./StatesPanel";
 import type { StatesPanelProps } from "./StatesPanel";
-import { TokensPanel } from "./TokensPanel";
 import { TweaksPanelContent } from "./TweaksPanel";
 import type { ElementInfo } from "./types";
 
-export type InspectorTab = "design" | "tweaks" | "extensions";
-
-/**
- * Sub-tab within the Tweaks area: "tokens" = TokensPanel face (CSS-var
- * editing through the Tweaks loop); "tweaks" = raw TweakDefinition controls.
- * Defaults to "tokens" when a designId is provided, otherwise "tweaks".
- */
-type TweaksSubTab = "tokens" | "tweaks";
+export type InspectorTab = "design" | "tweaks";
 
 interface EditPanelProps {
   selectedElement: ElementInfo | null;
@@ -164,7 +153,6 @@ interface EditPanelProps {
   onActiveTabChange?: (tab: InspectorTab) => void;
   tweaks?: TweakDefinition[];
   tweakValues?: Record<string, string | number | boolean>;
-  extensionContext?: DesignExtensionSlotContext;
   onTweakChange?: (id: string, value: string | number | boolean) => void;
   onRequestTweaks?: (anchor: HTMLElement) => void;
   onStyleChange: (property: string, value: string) => void;
@@ -180,12 +168,25 @@ interface EditPanelProps {
   fileId?: string;
   /** Active file name (e.g. "index.html") — forwarded to InspectorAiActions. */
   filename?: string;
+  /** Latest active file HTML, used to compose rapid sequential source edits. */
+  activeContent?: string;
+  /** Server revision for activeContent. */
+  activeFileUpdatedAt?: string | null;
   // -------------------------------------------------------------------------
   // Design Studio panels (§6.2, §6.4, §6.5)
   // Pass `designId` to unlock Tokens, States, and Review sections.
   // -------------------------------------------------------------------------
   /** 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,
+    updatedAt?: 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.
@@ -355,6 +356,9 @@ function ColorInput({
   value,
   onChange,
   backgroundImage,
+  backgroundSize,
+  backgroundRepeat,
+  backgroundPosition,
   onBackgroundImageChange,
   onImageFillChange,
   blendMode,
@@ -367,6 +371,9 @@ function ColorInput({
   value: string;
   onChange: (value: string) => void;
   backgroundImage?: string;
+  backgroundSize?: string;
+  backgroundRepeat?: string;
+  backgroundPosition?: string;
   onBackgroundImageChange?: (value: string) => void;
   onImageFillChange?: (value: ImageFillValue) => void;
   blendMode?: string;
@@ -385,6 +392,9 @@ function ColorInput({
   }, [value]);
 
   const backgroundLayers = splitCssLayers(backgroundImage || "");
+  const backgroundSizeLayers = splitCssLayers(backgroundSize || "");
+  const backgroundRepeatLayers = splitCssLayers(backgroundRepeat || "");
+  const backgroundPositionLayers = splitCssLayers(backgroundPosition || "");
   const selectedLayerIndex = fillLayerIndex(selectedFillId);
   const selectedGradient =
     selectedLayerIndex !== null
@@ -619,6 +629,8 @@ function ColorInput({
     selectedLayerIndex !== null
       ? (backgroundLayers[selectedLayerIndex] ?? draft ?? value ?? "#000000")
       : draft || "#000000";
+  const selectedBackgroundLayerValue = (layers: string[]): string | undefined =>
+    selectedLayerIndex !== null ? layers[selectedLayerIndex] : undefined;
   const handlePaintTypeChange = (type: DesignPaintType) => {
     const selectedLayer = fillLayerIndex(selectedFillId);
     if (type === "solid") {
@@ -679,6 +691,12 @@ function ColorInput({
         supportsLayeredFills ? handlePaintValueChange : undefined
       }
       onImageFillChange={onImageFillChange}
+      backgroundImage={selectedBackgroundLayerValue(backgroundLayers)}
+      backgroundSize={selectedBackgroundLayerValue(backgroundSizeLayers)}
+      backgroundRepeat={selectedBackgroundLayerValue(backgroundRepeatLayers)}
+      backgroundPosition={selectedBackgroundLayerValue(
+        backgroundPositionLayers,
+      )}
       blendMode={blendMode}
       onBlendModeChange={onBlendModeChange}
       showBlendMode={Boolean(onBlendModeChange)}
@@ -2149,6 +2167,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();
@@ -2370,12 +2674,6 @@ function InspectorTabsHeader({
           >
             {t("designEditor.tweaks")}
           </TabsTrigger>
-          <TabsTrigger
-            value="extensions"
-            className="h-6 rounded-md px-1.5 text-[11px] font-semibold text-muted-foreground shadow-none transition-colors hover:text-foreground data-[state=active]:bg-[var(--design-editor-panel-raised-bg)] data-[state=active]:text-foreground data-[state=active]:shadow-none"
-          >
-            {t("designEditor.extensions")}
-          </TabsTrigger>
         </TabsList>
       </Tabs>
       {trailing ? <div className="shrink-0">{trailing}</div> : null}
@@ -2387,15 +2685,19 @@ function SectionIconButton({
   label,
   onClick,
   children,
+  activateOnPointerDown = false,
   disabled = false,
   className,
 }: {
   label: string;
   onClick?: () => void;
   children: ReactNode;
+  activateOnPointerDown?: boolean;
   disabled?: boolean;
   className?: string;
 }) {
+  const pointerActivatedRef = useRef(false);
+
   return (
     <Tooltip>
       <TooltipTrigger asChild>
@@ -2408,7 +2710,22 @@ function SectionIconButton({
             className,
           )}
           disabled={disabled}
-          onClick={onClick}
+          onPointerDown={(event) => {
+            if (!activateOnPointerDown || disabled || event.button !== 0) {
+              return;
+            }
+            pointerActivatedRef.current = true;
+            event.preventDefault();
+            event.stopPropagation();
+            onClick?.();
+          }}
+          onClick={() => {
+            if (pointerActivatedRef.current) {
+              pointerActivatedRef.current = false;
+              return;
+            }
+            onClick?.();
+          }}
           aria-label={label}
         >
           {children}
@@ -3103,7 +3420,10 @@ function PageProperties({
           label={t("editPanel.labels.background")}
           value={styles.backgroundColor || ""}
           onChange={(v) => onStyleChange("backgroundColor", v)}
-          backgroundImage={styles.backgroundImage || ""}
+          backgroundImage={styles.backgroundImage}
+          backgroundSize={styles.backgroundSize}
+          backgroundRepeat={styles.backgroundRepeat}
+          backgroundPosition={styles.backgroundPosition}
           onBackgroundImageChange={(v) => onStyleChange("backgroundImage", v)}
           onImageFillChange={(value) =>
             commitStylePatch(
@@ -4240,6 +4560,15 @@ function FillProperties({
   const backgroundLayers = isTextElement
     ? []
     : splitCssLayers(styles.backgroundImage || "");
+  const backgroundSizeLayers = isTextElement
+    ? []
+    : splitCssLayers(styles.backgroundSize || "");
+  const backgroundRepeatLayers = isTextElement
+    ? []
+    : splitCssLayers(styles.backgroundRepeat || "");
+  const backgroundPositionLayers = isTextElement
+    ? []
+    : splitCssLayers(styles.backgroundPosition || "");
   const hasBackgroundLayer = !isTextElement && backgroundLayers.length > 0;
   const hasVisibleFill =
     isTextElement || colorHasVisibleAlpha(fillValue) || hasBackgroundLayer;
@@ -4378,6 +4707,7 @@ function FillProperties({
                     : t("editPanel.labels.hideLayer")
                 }
                 onClick={handleFillVisibilityToggle}
+                activateOnPointerDown
               >
                 {isHidden ? (
                   <IconEyeOff className="size-3.5" />
@@ -4492,6 +4822,10 @@ function FillProperties({
                             );
                           }}
                           paintType={gradient?.type ?? "image"}
+                          backgroundImage={layer}
+                          backgroundSize={backgroundSizeLayers[index]}
+                          backgroundRepeat={backgroundRepeatLayers[index]}
+                          backgroundPosition={backgroundPositionLayers[index]}
                           gradientType={gradient?.type}
                           onGradientTypeChange={(type) => {
                             if (!gradient) return;
@@ -5236,8 +5570,8 @@ function MakeItRealCard({
   // height so the inspector doesn't jump when the data arrives.
   if (isLoading || !data) {
     return (
-      <div className="rounded-md border border-dashed border-[var(--design-editor-accent-color)]/20 bg-[var(--design-editor-accent-color)]/3 px-2.5 py-2">
-        <div className="h-3 w-32 animate-pulse rounded bg-muted/40" />
+      <div className="flex h-7 items-center rounded-[5px] bg-[var(--design-editor-control-bg)] px-2">
+        <div className="h-3 w-28 animate-pulse rounded bg-muted/40" />
       </div>
     );
   }
@@ -5282,85 +5616,86 @@ function MakeItRealCard({
 
   if (migrateResult?.status === "processing" && migrateResult.url) {
     return (
-      <div className="rounded-md border border-[var(--design-editor-accent-color)]/30 bg-[var(--design-editor-accent-color)]/8 px-2.5 py-2 space-y-1.5">
-        <p className="text-[10px] font-semibold text-[var(--design-editor-accent-color)]">
-          {"Builder is working on it" /* i18n-ignore make-it-real card */}
-        </p>
-        <p className="text-[10px] leading-snug text-muted-foreground">
+      <div className="flex items-center gap-2 rounded-[5px] border border-[var(--design-editor-control-border)] bg-[var(--design-editor-control-bg)] px-2 py-1.5">
+        <IconLoader2 className="size-3.5 shrink-0 animate-spin text-[var(--design-editor-accent-color)]" />
+        <p className="min-w-0 flex-1 truncate text-[10px] text-muted-foreground">
           {migrateResult.message ??
-            `Branch "${migrateResult.branchName}" is being generated.`}
+            `Generating ${migrateResult.branchName ?? "React app"}.`}
         </p>
         <a
           href={migrateResult.url}
           target="_blank"
           rel="noopener noreferrer"
-          className="inline-flex items-center gap-1 text-[10px] font-medium text-[var(--design-editor-accent-color)] hover:underline"
+          className="inline-flex h-6 shrink-0 items-center gap-1 rounded-md px-1.5 text-[10px] font-semibold text-[var(--design-editor-accent-color)] hover:bg-[var(--design-editor-panel-raised-bg)]"
         >
-          {"Open in Builder" /* i18n-ignore make-it-real card */}
+          {"Open" /* i18n-ignore make-it-real card */}
           <IconExternalLink className="size-2.5" />
         </a>
       </div>
     );
   }
 
-  return (
-    <div className="rounded-md border border-dashed border-[var(--design-editor-accent-color)]/30 bg-[var(--design-editor-accent-color)]/5 px-2.5 py-2 space-y-1.5">
-      {/* Header */}
-      <p className="text-[10px] font-semibold text-foreground">
-        {"Make this a real app" /* i18n-ignore make-it-real card */}
-      </p>
-
-      {/* Body */}
-      <p className="text-[10px] leading-snug text-muted-foreground">
-        {cta.description}
-        {featureLabel ? (
-          <>
-            {" "}
-            <span className="italic">{featureLabel}</span>
-            {" requires a real-app source."}
-          </>
-        ) : null}
-      </p>
+  const summary =
+    cta.kind === "configure-project"
+      ? `Configure Builder to enable ${featureLabel}.`
+      : `Connect Builder to enable ${featureLabel}.`;
+  const primaryLabel =
+    cta.kind === "configure-project"
+      ? "Configure" /* i18n-ignore make-it-real card */
+      : "Connect"; /* i18n-ignore make-it-real card */
 
-      {/* Error */}
-      {migrateError ? (
-        <p className="text-[10px] text-destructive">
-          {migrateError instanceof Error
-            ? migrateError.message
-            : "Migration failed. Please try again."}
+  return (
+    <div className="space-y-1">
+      <div className="flex items-center gap-2 rounded-[5px] border border-dashed border-[var(--design-editor-control-border)] bg-[var(--design-editor-control-bg)]/70 px-2 py-1.5">
+        <span
+          className="size-1.5 shrink-0 rounded-full bg-[var(--design-editor-accent-color)]"
+          aria-hidden="true"
+        />
+        <p
+          className="min-w-0 flex-1 truncate text-[10px] text-muted-foreground"
+          title={summary}
+        >
+          {summary}
         </p>
-      ) : null}
-
-      {/* Actions */}
-      <div className="flex items-center gap-1.5 flex-wrap">
-        <button
+        <Button
           type="button"
+          size="sm"
           onClick={handlePrimary}
-          className="inline-flex items-center gap-1 rounded px-2 py-1 text-[10px] font-medium bg-[var(--design-editor-accent-color)] text-white hover:opacity-90 transition-opacity"
+          title={cta.primaryAction}
+          className="h-6 shrink-0 gap-1 rounded-md bg-[var(--design-editor-accent-color)] px-1.5 text-[10px] font-semibold text-white hover:bg-[var(--design-editor-accent-hover-color)]"
         >
-          {cta.primaryAction}
+          {primaryLabel}
           <IconArrowRight className="size-2.5" />
-        </button>
+        </Button>
 
         {/* When Builder is fully connected, also offer direct migration */}
         {data.connected && data.builderEnabled && (
-          <button
+          <Button
             type="button"
+            variant="ghost"
+            size="sm"
             onClick={handleMigrate}
             disabled={isPending}
-            className="inline-flex items-center gap-1 rounded border border-[var(--design-editor-control-border)] bg-[var(--design-editor-control-bg)] px-2 py-1 text-[10px] font-medium text-muted-foreground hover:text-foreground transition-colors disabled:cursor-wait disabled:opacity-60"
+            className="h-6 shrink-0 gap-1 rounded-md px-1.5 text-[10px] font-semibold text-muted-foreground hover:text-foreground disabled:cursor-wait disabled:opacity-60"
           >
             {isPending ? (
               <>
                 <IconLoader2 className="size-2.5 animate-spin" />
-                {"Migrating…" /* i18n-ignore make-it-real card */}
+                {"Generating" /* i18n-ignore make-it-real card */}
               </>
             ) : (
-              <>{"Generate React app" /* i18n-ignore make-it-real card */}</>
+              <>{"Generate" /* i18n-ignore make-it-real card */}</>
             )}
-          </button>
+          </Button>
         )}
       </div>
+      {migrateError ? (
+        <p className="px-2 text-[10px] text-destructive">
+          {migrateError instanceof Error
+            ? migrateError.message
+            : "Migration failed. Please try again."}
+        </p>
+      ) : null}
     </div>
   );
 }
@@ -5372,6 +5707,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 +5741,79 @@ interface ComponentDetailsResult {
  *
  * Matches the workbench artboard spec in DESIGN-STUDIO-PLAN.md §6.1.
  */
-function ComponentSection({
+export function ComponentSection({
   designId,
+  fileId,
+  activeContent,
+  activeFileUpdatedAt,
   nodeId,
+  onComponentPropApplied,
   sourceCapabilities = [],
 }: {
   designId: string;
+  fileId?: string;
+  activeContent?: string;
+  activeFileUpdatedAt?: string | null;
   nodeId: string;
+  onComponentPropApplied?: (
+    fileId: string,
+    content: string,
+    updatedAt?: string,
+  ) => void;
   /** Capability names advertised by the current source. */
   sourceCapabilities?: string[];
 }) {
   const queryClient = useQueryClient();
-  const detailsKey = ["action", "get-component-details", { designId, nodeId }];
+  const detailsParams = { designId, nodeId, ...(fileId ? { fileId } : {}) };
+  const detailsKey = ["action", "get-component-details", detailsParams];
+  const latestSourceRef = useRef<{
+    content: string;
+    revision?: string | null;
+  }>({
+    content: activeContent ?? "",
+    revision: activeFileUpdatedAt ?? null,
+  });
 
-  const { data, isLoading, error } = useActionQuery<ComponentDetailsResult>(
-    "get-component-details",
-    { designId, nodeId },
-  );
+  useEffect(() => {
+    latestSourceRef.current = {
+      content: activeContent ?? "",
+      revision: activeFileUpdatedAt ?? null,
+    };
+  }, [activeContent, activeFileUpdatedAt, fileId, nodeId]);
+
+  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 +5823,90 @@ function ComponentSection({
     queryClient.setQueryData<ComponentDetailsResult>(detailsKey, (prev) =>
       prev ? optimistic(prev) : prev,
     );
+    if (edit.kind === "attribute") {
+      postComponentPropPreview(edit.attribute, edit.value);
+    }
+    const latestSource = latestSourceRef.current;
     applyPropMutation.mutate(
-      { designId, nodeId, edit },
       {
+        designId,
+        nodeId,
+        ...(fileId ? { fileId } : {}),
+        edit,
+        ...(latestSource.content
+          ? {
+              source: {
+                currentContent: latestSource.content,
+                ...(latestSource.revision
+                  ? { revision: latestSource.revision }
+                  : {}),
+              },
+            }
+          : {}),
+      },
+      {
+        onSuccess: (result) => {
+          const response = result as {
+            content?: unknown;
+            fileId?: unknown;
+            updatedAt?: unknown;
+            conflict?: unknown;
+            error?: unknown;
+          };
+          if (response.conflict) {
+            toast.error(
+              typeof response.error === "string"
+                ? response.error
+                : "This file changed since this component prop edit was prepared. Refresh and try again.",
+            );
+            return;
+          }
+          if (
+            typeof response.fileId === "string" &&
+            typeof response.content === "string"
+          ) {
+            const updatedAt =
+              typeof response.updatedAt === "string"
+                ? response.updatedAt
+                : undefined;
+            latestSourceRef.current = {
+              content: response.content,
+              revision: updatedAt ?? latestSourceRef.current.revision,
+            };
+            onComponentPropApplied?.(
+              response.fileId,
+              response.content,
+              updatedAt,
+            );
+          }
+        },
         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 +5944,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 +6005,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 +6106,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 +6153,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 +6164,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 +6189,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 +6201,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") {
@@ -5752,7 +6239,6 @@ export function EditPanel({
   onActiveTabChange,
   tweaks = [],
   tweakValues = {},
-  extensionContext,
   onTweakChange,
   onRequestTweaks,
   onStyleChange,
@@ -5763,8 +6249,10 @@ export function EditPanel({
   readOnly = false,
   fileId,
   filename,
+  activeContent,
+  activeFileUpdatedAt,
   designId,
-  onTokensApplied,
+  onComponentPropApplied,
   statesPanelProps,
   reviewPanelProps,
   componentNodeId,
@@ -5779,12 +6267,6 @@ export function EditPanel({
     DEFAULT_EXPORT_SETTINGS,
   );
   const [showExportPreview, setShowExportPreview] = useState(false);
-  // Sub-tab within the Tweaks area: "tokens" (TokensPanel face) or "tweaks"
-  // (raw TweakDefinition controls). Always default to the existing "tweaks"
-  // controls so opening Tweaks lands on the user's TweakDefinition controls
-  // (and the + affordance) rather than auto-firing token indexing. "Tokens"
-  // remains available as a sub-tab the user can click when designId is set.
-  const [tweaksSubTab, setTweaksSubTab] = useState<TweaksSubTab>("tweaks");
 
   const selectedElementKey = selectedElement
     ? elementIdentityKey(selectedElement)
@@ -5802,12 +6284,8 @@ export function EditPanel({
     },
     [onTweakChange],
   );
-  // The "Add Tweaks" (+) flow lives only on the "tweaks" sub-tab. Switch to it
-  // before opening the prompt so the + button and the newly added control are
-  // visible (avoids leaving the user on the Tokens sub-tab where + isn't shown).
   const handleRequestTweaks = useCallback(
     (anchor: HTMLElement) => {
-      setTweaksSubTab("tweaks");
       onRequestTweaks?.(anchor);
     },
     [onRequestTweaks],
@@ -5825,6 +6303,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 +6383,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 +6405,7 @@ export function EditPanel({
               }
               scrollTimerRef.current = setTimeout(() => {
                 scrolledRecentlyRef.current = false;
+                userScrollIntentRef.current = false;
                 scrollTimerRef.current = null;
               }, 300);
             }}
@@ -5930,6 +6417,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 +6459,11 @@ export function EditPanel({
             {designId && componentNodeId && (
               <ComponentSection
                 designId={designId}
+                fileId={fileId}
+                activeContent={activeContent}
+                activeFileUpdatedAt={activeFileUpdatedAt}
                 nodeId={componentNodeId}
+                onComponentPropApplied={onComponentPropApplied}
                 sourceCapabilities={sourceCapabilities}
               />
             )}
@@ -6160,132 +6652,41 @@ export function EditPanel({
         </>
       ) : activeTab === "tweaks" ? (
         <div className="flex min-h-0 flex-1 flex-col overflow-hidden">
-          {/* Tweaks tab header: when designId is present show a Tokens | Tweaks
-              sub-tab switcher so the TokensPanel is the first-class face of
-              this area per §6.2. When there is no designId only the raw tweaks
-              title is shown (original behaviour). */}
-          {designId ? (
-            <div className="flex h-9 shrink-0 items-center gap-0.5 border-b border-border/90 px-2">
-              <Button
-                type="button"
-                variant="ghost"
-                size="sm"
-                className={cn(
-                  "h-6 rounded-md px-2 text-[11px] font-semibold text-muted-foreground transition-colors hover:text-foreground",
-                  tweaksSubTab === "tokens" &&
-                    "bg-[var(--design-editor-panel-raised-bg)] text-foreground",
-                )}
-                onClick={() => setTweaksSubTab("tokens")}
-              >
-                <IconPalette className="mr-1 size-3" />
-                {"Tokens" /* i18n-ignore design inspector sub-tab */}
-              </Button>
-              <Button
-                type="button"
-                variant="ghost"
-                size="sm"
-                className={cn(
-                  "h-6 rounded-md px-2 text-[11px] font-semibold text-muted-foreground transition-colors hover:text-foreground",
-                  tweaksSubTab === "tweaks" &&
-                    "bg-[var(--design-editor-panel-raised-bg)] text-foreground",
-                )}
-                onClick={() => setTweaksSubTab("tweaks")}
-              >
-                {t("designEditor.tweaks")}
-              </Button>
-            </div>
-          ) : (
-            <div className="flex h-10 shrink-0 items-center justify-between gap-2 border-b border-border/90 px-3">
-              <h3 className="min-w-0 flex-1 truncate text-[13px] font-semibold text-foreground">
-                {t("designEditor.tweaks")}
-              </h3>
-              {onRequestTweaks ? (
-                <Tooltip>
-                  <TooltipTrigger asChild>
-                    <Button
-                      type="button"
-                      variant="ghost"
-                      size="icon"
-                      className="size-7 rounded-sm text-muted-foreground hover:bg-accent hover:text-foreground"
-                      aria-label={t("designEditor.addTweaks")}
-                      onClick={(event) =>
-                        handleRequestTweaks(event.currentTarget)
-                      }
-                    >
-                      <IconPlus className="size-3.5" />
-                    </Button>
-                  </TooltipTrigger>
-                  <TooltipContent>{t("designEditor.addTweaks")}</TooltipContent>
-                </Tooltip>
-              ) : null}
-            </div>
-          )}
+          <div className="flex h-10 shrink-0 items-center justify-between gap-2 border-b border-border/90 px-3">
+            <h3 className="min-w-0 flex-1 truncate text-[13px] font-semibold text-foreground">
+              {t("designEditor.tweaks")}
+            </h3>
+            {onRequestTweaks ? (
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button
+                    type="button"
+                    variant="ghost"
+                    size="icon"
+                    className="size-7 rounded-sm text-muted-foreground hover:bg-accent hover:text-foreground"
+                    aria-label={t("designEditor.addTweaks")}
+                    onClick={(event) =>
+                      handleRequestTweaks(event.currentTarget)
+                    }
+                  >
+                    <IconPlus className="size-3.5" />
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent>{t("designEditor.addTweaks")}</TooltipContent>
+              </Tooltip>
+            ) : null}
+          </div>
 
           <div className="design-inspector-scroll min-h-0 flex-1 overflow-y-auto overscroll-contain">
-            {designId && tweaksSubTab === "tokens" ? (
-              /* §6.2 Tokens face — first-class view of the Tweaks area.
-                 TokensPanel calls apply-design-token-edit which routes through
-                 the Tweaks loop (designs.data.tweakSelections persist). */
-              <>
-                <TokensPanel
-                  designId={designId}
-                  onTokensApplied={onTokensApplied}
-                />
-                {/* §5 / §6.6 — token write-back to source is a real-app
-                    capability. On inline sources (sourceCapabilities lacks
-                    "writeFile") show a compact "Make it real" CTA after the
-                    token list so the user knows write-back is one step away. */}
-                {!sourceCapabilities.includes("writeFile") && (
-                  <div className="px-3 pb-3 pt-1">
-                    <MakeItRealCard
-                      designId={designId}
-                      featureLabel="token write-back to source files"
-                    />
-                  </div>
-                )}
-              </>
-            ) : (
-              /* Raw TweakDefinition controls — shown when no designId, or when
-                 the user switches to the Tweaks sub-tab. */
-              <>
-                {designId && onRequestTweaks ? (
-                  /* When in sub-tab mode, show the add-tweaks action in the
-                     scrollable content area above the raw controls. */
-                  <div className="flex items-center justify-end px-3 pt-2">
-                    <Tooltip>
-                      <TooltipTrigger asChild>
-                        <Button
-                          type="button"
-                          variant="ghost"
-                          size="icon"
-                          className="size-7 rounded-sm text-muted-foreground hover:bg-accent hover:text-foreground"
-                          aria-label={t("designEditor.addTweaks")}
-                          onClick={(event) =>
-                            handleRequestTweaks(event.currentTarget)
-                          }
-                        >
-                          <IconPlus className="size-3.5" />
-                        </Button>
-                      </TooltipTrigger>
-                      <TooltipContent>
-                        {t("designEditor.addTweaks")}
-                      </TooltipContent>
-                    </Tooltip>
-                  </div>
-                ) : null}
-                <TweaksPanelContent
-                  tweaks={tweaks}
-                  values={tweakValues}
-                  onChange={handleTweakChange}
-                  onRequestTweaks={!designId ? handleRequestTweaks : undefined}
-                  className="px-3 py-3"
-                />
-              </>
-            )}
+            <TweaksPanelContent
+              tweaks={tweaks}
+              values={tweakValues}
+              onChange={handleTweakChange}
+              onRequestTweaks={handleRequestTweaks}
+              className="px-3 py-3"
+            />
           </div>
         </div>
-      ) : extensionContext ? (
-        <DesignExtensionsPanel context={extensionContext} />
       ) : null}
     </div>
   );