@agent-native/core 0.80.8 → 0.80.10

package/corpus/templates/plan/app/components/layout/Layout.tsx

@@ -150,7 +150,9 @@ export function Layout({ children }: LayoutProps) {
       ) : (
         <Header onOpenMobileSidebar={() => setMobileSidebarOpen(true)} />
       )}
-      <main className="flex-1 overflow-y-auto">{children}</main>
+      <main className="agent-native-app-main flex-1 overflow-y-auto">
+        {children}
+      </main>
     </div>
   );
 

package/corpus/templates/plan/app/components/plan/CanvasArea.tsx

@@ -14,6 +14,7 @@ import { IconMinus, IconPlus } from "@tabler/icons-react";
 import {
   useCallback,
   useEffect,
+  useLayoutEffect,
   useMemo,
   useRef,
   useState,
@@ -29,6 +30,9 @@ import { Textarea } from "@/components/ui/textarea";
 
 import { Wireframe, type DesignElementSelection } from "./wireframe/Wireframe";
 
+const useIsomorphicLayoutEffect =
+  typeof window === "undefined" ? useEffect : useLayoutEffect;
+
 /* -------------------------------------------------------------------------- */
 /* Pan / zoom feel — recovered from the on-main hardcoded renderer            */
 /* (server/ui-plan-html.ts UI_PLAN_JS) + claude.ai/designs design-canvas.jsx. */
@@ -313,7 +317,7 @@ export function CanvasArea({
     canvas.viewport?.pan?.x ?? ""
   }:${canvas.viewport?.pan?.y ?? ""}`;
   const lastAppliedSavedViewportKeyRef = useRef<string | null>(null);
-  useEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     if (!hasSavedViewport) return;
     if (lastAppliedSavedViewportKeyRef.current === savedViewportKey) return;
     lastAppliedSavedViewportKeyRef.current = savedViewportKey;
@@ -344,7 +348,7 @@ export function CanvasArea({
   boardRef.current = board;
 
   const lastAutoFitKeyRef = useRef<string | null>(null);
-  useEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     if (hasSavedViewport) return;
     if (lastAutoFitKeyRef.current === frameLayoutKey) return;
     const element = viewportRef.current;

package/corpus/templates/plan/app/components/plan/DocumentArea.tsx

@@ -532,8 +532,8 @@ function CodeTabsBlock({
   return (
     <section className="plan-block" data-block-id={block.id}>
       {block.title && <div className="plan-block-label">{block.title}</div>}
-      <div className="grid overflow-hidden border-y border-plan-line md:grid-cols-[300px_minmax(0,1fr)]">
-        <div className="border-plan-line md:border-r">
+      <div className="plan-code-tabs-layout grid overflow-hidden border-y border-plan-line">
+        <div className="plan-code-tabs-nav border-plan-line">
           {block.data.tabs.map((tab) => (
             <button
               key={tab.id}
@@ -609,8 +609,8 @@ function ImplementationMapBlock({
   return (
     <section className="plan-block" data-block-id={block.id}>
       {block.title && <div className="plan-block-label">{block.title}</div>}
-      <div className="grid overflow-hidden lg:grid-cols-[360px_minmax(0,1fr)]">
-        <div className="border-plan-line lg:border-r">
+      <div className="plan-implementation-map-layout grid overflow-hidden">
+        <div className="plan-implementation-map-nav border-plan-line">
           {block.data.files.map((file, index) => (
             <button
               key={index}
@@ -698,14 +698,13 @@ function TabsBlock({
       {block.title && <div className="plan-block-label">{block.title}</div>}
       <div
         className={cn(
-          vertical &&
-            "grid min-w-0 gap-5 md:grid-cols-[minmax(10rem,14rem)_minmax(0,1fr)] md:items-start",
+          vertical && "plan-vertical-tabs-layout grid min-w-0 gap-5",
         )}
       >
         <div
           className={cn(
             vertical
-              ? "mb-5 flex w-full min-w-0 max-w-full flex-nowrap gap-1 overflow-x-auto md:mb-0 md:max-h-[62vh] md:flex-col md:overflow-x-hidden md:overflow-y-auto md:pr-2"
+              ? "plan-vertical-tabs-list mb-5 flex w-full min-w-0 max-w-full flex-nowrap gap-1 overflow-x-auto"
               : "mb-8 inline-flex max-w-full gap-1 overflow-x-auto",
           )}
           role="tablist"

package/corpus/templates/plan/app/global.css

@@ -28,24 +28,24 @@
 
 :root {
   --background: 0 0% 100%;
-  --foreground: 220 10% 10%;
+  --foreground: 0 0% 10%;
   --card: 0 0% 100%;
-  --card-foreground: 220 10% 10%;
+  --card-foreground: 0 0% 10%;
   --popover: 0 0% 100%;
-  --popover-foreground: 220 10% 10%;
-  --primary: 220 10% 15%;
+  --popover-foreground: 0 0% 10%;
+  --primary: 0 0% 15%;
   --primary-foreground: 0 0% 100%;
-  --secondary: 220 10% 95%;
-  --secondary-foreground: 220 10% 15%;
-  --muted: 220 10% 95%;
-  --muted-foreground: 220 5% 45%;
-  --accent: 220 10% 95%;
-  --accent-foreground: 220 10% 15%;
+  --secondary: 0 0% 95%;
+  --secondary-foreground: 0 0% 15%;
+  --muted: 0 0% 95%;
+  --muted-foreground: 0 0% 45%;
+  --accent: 0 0% 95%;
+  --accent-foreground: 0 0% 15%;
   --destructive: 0 84% 60%;
   --destructive-foreground: 0 0% 98%;
-  --border: 220 10% 90%;
-  --input: 220 10% 90%;
-  --ring: 220 10% 40%;
+  --border: 0 0% 90%;
+  --input: 0 0% 90%;
+  --ring: 0 0% 40%;
   --radius: 0.5rem;
   /* Callout tone accents — info/decision/risk/warning/success. */
   --plan-tone-info: 218 85% 57%;
@@ -53,14 +53,14 @@
   --plan-tone-risk: 0 84% 60%;
   --plan-tone-warning: 25 95% 48%;
   --plan-tone-success: 142 71% 38%;
-  --sidebar-background: 220 10% 97%;
-  --sidebar-foreground: 220 5% 45%;
-  --sidebar-primary: 220 10% 15%;
+  --sidebar-background: 0 0% 97%;
+  --sidebar-foreground: 0 0% 45%;
+  --sidebar-primary: 0 0% 15%;
   --sidebar-primary-foreground: 0 0% 100%;
-  --sidebar-accent: 220 10% 95%;
-  --sidebar-accent-foreground: 220 10% 15%;
-  --sidebar-border: 220 10% 90%;
-  --sidebar-ring: 220 10% 40%;
+  --sidebar-accent: 0 0% 95%;
+  --sidebar-accent-foreground: 0 0% 15%;
+  --sidebar-border: 0 0% 90%;
+  --sidebar-ring: 0 0% 40%;
   /* ── Plan document font sizes — edit here to resize globally ──────────────
      --plan-code-size  : general monospace code surfaces and editors
      --plan-doc-code-size: dense read-only code surfaces such as diffs,
@@ -72,24 +72,24 @@
 }
 
 .dark {
-  --background: 220 6% 6%;
+  --background: 0 0% 13%;
   --foreground: 0 0% 90%;
-  --card: 220 5% 6%;
+  --card: 0 0% 15%;
   --card-foreground: 0 0% 90%;
-  --popover: 220 5% 6%;
+  --popover: 0 0% 15%;
   --popover-foreground: 0 0% 90%;
   --primary: 0 0% 75%;
-  --primary-foreground: 220 6% 6%;
-  --secondary: 220 4% 12%;
+  --primary-foreground: 0 0% 10%;
+  --secondary: 0 0% 18%;
   --secondary-foreground: 0 0% 90%;
-  --muted: 220 4% 10%;
-  --muted-foreground: 220 4% 60%;
-  --accent: 220 4% 13%;
+  --muted: 0 0% 16%;
+  --muted-foreground: 0 0% 60%;
+  --accent: 0 0% 18%;
   --accent-foreground: 0 0% 90%;
   --destructive: 0 63% 51%;
   --destructive-foreground: 0 0% 98%;
-  --border: 220 4% 14%;
-  --input: 220 4% 14%;
+  --border: 0 0% 24%;
+  --input: 0 0% 24%;
   --ring: 0 0% 60%;
   --radius: 0.5rem;
   /* Callout tone accents — brighter so they read on the dark surface. */
@@ -98,13 +98,13 @@
   --plan-tone-risk: 0 84% 67%;
   --plan-tone-warning: 28 96% 60%;
   --plan-tone-success: 142 60% 52%;
-  --sidebar-background: 220 6% 4%;
-  --sidebar-foreground: 220 4% 60%;
+  --sidebar-background: 0 0% 10%;
+  --sidebar-foreground: 0 0% 60%;
   --sidebar-primary: 0 0% 75%;
-  --sidebar-primary-foreground: 220 6% 6%;
-  --sidebar-accent: 220 4% 10%;
+  --sidebar-primary-foreground: 0 0% 10%;
+  --sidebar-accent: 0 0% 16%;
   --sidebar-accent-foreground: 0 0% 90%;
-  --sidebar-border: 220 4% 10%;
+  --sidebar-border: 0 0% 20%;
   --sidebar-ring: 0 0% 60%;
 }
 
@@ -130,14 +130,14 @@
 @layer utilities {
   .plan-content-surface {
     --plan-document: hsl(var(--background));
-    --plan-canvas: color-mix(in srgb, var(--plan-document) 96%, black);
+    --plan-canvas: color-mix(in srgb, var(--plan-document) 72%, black);
     --plan-block: hsl(var(--secondary));
     --plan-chrome: hsl(var(--background) / 0.92);
     --plan-line: hsl(var(--border));
-    --plan-grid-line: hsl(var(--foreground) / 0.08);
+    --plan-grid-line: hsl(var(--foreground) / 0.018);
     --plan-text: hsl(var(--foreground));
     --plan-muted: hsl(var(--muted-foreground));
-    --plan-wireframe: hsl(var(--card));
+    --plan-wireframe: hsl(0 0% 6%);
     --plan-sketch-line: hsl(var(--foreground) / 0.86);
     --plan-muted-line: hsl(var(--border));
     --plan-placeholder-line: hsl(var(--muted-foreground) / 0.42);
@@ -362,6 +362,40 @@
   container: plan-doc / inline-size;
 }
 
+@container plan-doc (min-width: 44rem) {
+  .plan-code-tabs-layout {
+    grid-template-columns: 300px minmax(0, 1fr);
+  }
+
+  .plan-code-tabs-nav {
+    border-inline-end-width: 1px;
+  }
+
+  .plan-vertical-tabs-layout {
+    grid-template-columns: minmax(10rem, 14rem) minmax(0, 1fr);
+    align-items: start;
+  }
+
+  .plan-vertical-tabs-list {
+    max-height: 62vh;
+    flex-direction: column;
+    overflow-x: hidden;
+    overflow-y: auto;
+    margin-bottom: 0;
+    padding-inline-end: 0.5rem;
+  }
+}
+
+@container plan-doc (min-width: 56rem) {
+  .plan-implementation-map-layout {
+    grid-template-columns: 360px minmax(0, 1fr);
+  }
+
+  .plan-implementation-map-nav {
+    border-inline-end-width: 1px;
+  }
+}
+
 /* Header + flow + contents rail. Wide: a balanced 3-col grid via the container
  * queries below; narrow: a single column. */
 .plan-document-body {
@@ -2099,10 +2133,8 @@
   box-shadow: 0 0 0 4px hsl(var(--muted) / 0.35);
 }
 .plan-header-editable:focus {
-  background: hsl(var(--background) / 0.6);
-  box-shadow:
-    0 0 0 2px hsl(var(--background)),
-    0 0 0 4px hsl(var(--ring) / 0.4);
+  background: transparent;
+  box-shadow: none;
 }
 .plan-header-editable:empty::before {
   content: attr(data-placeholder);

package/corpus/templates/plan/changelog/2026-06-29-plan-canvases-open-without-an-initial-pan-and-zoom-flicker.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-06-29
+---
+
+Plan canvases open without an initial pan-and-zoom flicker while the first view settles.

package/corpus/templates/plan/changelog/2026-06-29-plan-document-blocks-adapt-to-the-available-document-width.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-06-29
+---
+
+Plan document blocks now adapt to the available document width when sidebars are open.

package/corpus/templates/plan/changelog/2026-06-29-plan-titles-and-summaries-can-be-edited-inline-without-focus.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-06-29
+---
+
+Plan titles and summaries can be edited inline without focus outlines.

package/corpus/templates/slides/app/components/layout/Layout.tsx

@@ -121,7 +121,9 @@ export function Layout({ children }: LayoutProps) {
             )}
             {!ownToolbar && <Header />}
             <InvitationBanner />
-            {children}
+            <main className="agent-native-app-main min-h-0 flex-1 overflow-y-auto">
+              {children}
+            </main>
           </div>
           <AgentWorkIndicator />
         </div>

package/corpus/templates/slides/app/global.css

@@ -20,71 +20,87 @@ button[title="Open agent sidebar"] {
 }
 
 :root {
-  --background: 240 6% 4%;
-  --foreground: 240 6% 93%;
+  --background: 0 0% 13%;
+  --foreground: 0 0% 93%;
 
-  --card: 240 5% 8%;
-  --card-foreground: 240 6% 93%;
+  --card: 0 0% 15%;
+  --card-foreground: 0 0% 93%;
 
-  --popover: 240 5% 10%;
-  --popover-foreground: 240 6% 93%;
+  --popover: 0 0% 15%;
+  --popover-foreground: 0 0% 93%;
 
   --primary: 0 0% 75%;
-  --primary-foreground: 240 6% 4%;
+  --primary-foreground: 0 0% 10%;
 
-  --secondary: 240 4% 14%;
-  --secondary-foreground: 240 6% 93%;
+  --secondary: 0 0% 18%;
+  --secondary-foreground: 0 0% 93%;
 
-  --muted: 240 4% 14%;
-  --muted-foreground: 240 4% 55%;
+  --muted: 0 0% 16%;
+  --muted-foreground: 0 0% 55%;
 
-  --accent: 240 4% 14%;
-  --accent-foreground: 240 6% 93%;
+  --accent: 0 0% 18%;
+  --accent-foreground: 0 0% 93%;
 
   --destructive: 0 72% 51%;
   --destructive-foreground: 0 0% 100%;
 
-  --border: 240 4% 16%;
-  --input: 240 4% 16%;
+  --border: 0 0% 24%;
+  --input: 0 0% 24%;
   --ring: 0 0% 50%;
 
   --radius: 0.5rem;
 
-  --surface: 240 5% 10%;
-  --surface-hover: 240 5% 13%;
+  --surface: 0 0% 10%;
+  --surface-hover: 0 0% 15%;
+  --sidebar-background: 0 0% 10%;
+  --sidebar-foreground: 0 0% 55%;
+  --sidebar-primary: 0 0% 75%;
+  --sidebar-primary-foreground: 0 0% 10%;
+  --sidebar-accent: 0 0% 16%;
+  --sidebar-accent-foreground: 0 0% 93%;
+  --sidebar-border: 0 0% 20%;
+  --sidebar-ring: 0 0% 50%;
 }
 
 .light {
   --background: 0 0% 100%;
-  --foreground: 240 6% 10%;
+  --foreground: 0 0% 10%;
 
   --card: 0 0% 100%;
-  --card-foreground: 240 6% 10%;
+  --card-foreground: 0 0% 10%;
 
   --popover: 0 0% 100%;
-  --popover-foreground: 240 6% 10%;
+  --popover-foreground: 0 0% 10%;
 
-  --primary: 240 6% 10%;
+  --primary: 0 0% 10%;
   --primary-foreground: 0 0% 100%;
 
-  --secondary: 240 5% 96%;
-  --secondary-foreground: 240 6% 10%;
+  --secondary: 0 0% 96%;
+  --secondary-foreground: 0 0% 10%;
 
-  --muted: 240 5% 96%;
-  --muted-foreground: 240 4% 46%;
+  --muted: 0 0% 96%;
+  --muted-foreground: 0 0% 46%;
 
-  --accent: 240 5% 96%;
-  --accent-foreground: 240 6% 10%;
+  --accent: 0 0% 96%;
+  --accent-foreground: 0 0% 10%;
 
   --destructive: 0 84% 60%;
   --destructive-foreground: 0 0% 98%;
 
-  --border: 240 6% 90%;
-  --input: 240 6% 90%;
-  --ring: 240 5% 65%;
-
-  --surface: 240 5% 96%;
-  --surface-hover: 240 5% 92%;
+  --border: 0 0% 90%;
+  --input: 0 0% 90%;
+  --ring: 0 0% 65%;
+
+  --surface: 0 0% 96%;
+  --surface-hover: 0 0% 92%;
+  --sidebar-background: 0 0% 97%;
+  --sidebar-foreground: 0 0% 46%;
+  --sidebar-primary: 0 0% 10%;
+  --sidebar-primary-foreground: 0 0% 100%;
+  --sidebar-accent: 0 0% 96%;
+  --sidebar-accent-foreground: 0 0% 10%;
+  --sidebar-border: 0 0% 90%;
+  --sidebar-ring: 0 0% 65%;
 }
 
 @layer base {

package/corpus/templates/slides/changelog/2026-06-29-slide-layouts-adapt-when-the-agent-sidebar-is-open.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-06-29
+---
+
+Slide layouts adapt when the agent sidebar is open.

package/corpus/templates/videos/app/components/layout/Layout.tsx

@@ -121,7 +121,9 @@ export function Layout({ children }: LayoutProps) {
               <Header onOpenMobileSidebar={() => setMobileSidebarOpen(true)} />
             )}
             <InvitationBanner />
-            <main className="flex-1 overflow-y-auto">{children}</main>
+            <main className="agent-native-app-main flex-1 overflow-y-auto">
+              {children}
+            </main>
           </div>
         </AgentSidebar>
       </div>

package/corpus/templates/videos/app/global.css

@@ -13,83 +13,83 @@
   */
 :root {
   --background: 0 0% 100%;
-  --foreground: 240 6% 10%;
+  --foreground: 0 0% 10%;
 
   --card: 0 0% 100%;
-  --card-foreground: 240 6% 10%;
+  --card-foreground: 0 0% 10%;
 
   --popover: 0 0% 100%;
-  --popover-foreground: 240 6% 10%;
+  --popover-foreground: 0 0% 10%;
 
-  --primary: 240 6% 10%;
+  --primary: 0 0% 10%;
   --primary-foreground: 0 0% 100%;
 
-  --secondary: 240 5% 96%;
-  --secondary-foreground: 240 6% 10%;
+  --secondary: 0 0% 96%;
+  --secondary-foreground: 0 0% 10%;
 
-  --muted: 240 5% 96%;
-  --muted-foreground: 240 4% 46%;
+  --muted: 0 0% 96%;
+  --muted-foreground: 0 0% 46%;
 
-  --accent: 240 5% 96%;
-  --accent-foreground: 240 6% 10%;
+  --accent: 0 0% 96%;
+  --accent-foreground: 0 0% 10%;
 
   --destructive: 0 84% 60%;
   --destructive-foreground: 0 0% 98%;
 
-  --border: 240 6% 90%;
-  --input: 240 6% 90%;
-  --ring: 240 5% 65%;
+  --border: 0 0% 90%;
+  --input: 0 0% 90%;
+  --ring: 0 0% 65%;
 
   --radius: 0.625rem;
 
-  --sidebar-background: 240 5% 97%;
-  --sidebar-foreground: 240 4% 46%;
-  --sidebar-primary: 240 6% 10%;
+  --sidebar-background: 0 0% 97%;
+  --sidebar-foreground: 0 0% 46%;
+  --sidebar-primary: 0 0% 10%;
   --sidebar-primary-foreground: 0 0% 100%;
-  --sidebar-accent: 240 5% 96%;
-  --sidebar-accent-foreground: 240 6% 10%;
-  --sidebar-border: 240 6% 90%;
-  --sidebar-ring: 240 5% 65%;
+  --sidebar-accent: 0 0% 96%;
+  --sidebar-accent-foreground: 0 0% 10%;
+  --sidebar-border: 0 0% 90%;
+  --sidebar-ring: 0 0% 65%;
 }
 
 .dark {
-  --background: 240 6% 6%;
+  --background: 0 0% 13%;
   --foreground: 0 0% 95%;
 
-  --card: 240 5% 8%;
+  --card: 0 0% 15%;
   --card-foreground: 0 0% 95%;
 
-  --popover: 240 5% 8%;
+  --popover: 0 0% 15%;
   --popover-foreground: 0 0% 95%;
 
   --primary: 0 0% 75%;
-  --primary-foreground: 240 6% 6%;
+  --primary-foreground: 0 0% 10%;
 
-  --secondary: 240 4% 13%;
+  --secondary: 0 0% 18%;
   --secondary-foreground: 0 0% 90%;
 
-  --muted: 240 4% 13%;
-  --muted-foreground: 240 3% 50%;
+  --muted: 0 0% 16%;
+  --muted-foreground: 0 0% 50%;
 
-  --accent: 240 4% 14%;
+  --accent: 0 0% 18%;
   --accent-foreground: 0 0% 90%;
 
   --destructive: 0 84% 60%;
   --destructive-foreground: 0 0% 100%;
 
-  --border: 240 4% 14%;
-  --input: 240 4% 14%;
+  --border: 0 0% 24%;
+  --input: 0 0% 24%;
   --ring: 0 0% 50%;
 
   --radius: 0.625rem;
 
-  --sidebar-background: 240 6% 7%;
-  --sidebar-foreground: 240 3% 55%;
+  --sidebar-background: 0 0% 10%;
+  --sidebar-foreground: 0 0% 55%;
   --sidebar-primary: 0 0% 75%;
-  --sidebar-primary-foreground: 240 6% 6%;
-  --sidebar-accent: 240 4% 12%;
+  --sidebar-primary-foreground: 0 0% 10%;
+  --sidebar-accent: 0 0% 16%;
   --sidebar-accent-foreground: 0 0% 80%;
-  --sidebar-border: 240 4% 12%;
+  --sidebar-border: 0 0% 20%;
   --sidebar-ring: 0 0% 50%;
 }
 

package/corpus/templates/videos/changelog/2026-06-29-video-layouts-adapt-when-the-agent-sidebar-is-open.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-06-29
+---
+
+Video layouts adapt when the agent sidebar is open.

package/dist/cli/design-connect.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"design-connect.d.ts","sourceRoot":"","sources":["../../src/cli/design-connect.ts"],"names":[],"mappings":"AAEA,OAAa,EAEX,KAAK,MAAM,EAEZ,MAAM,WAAW,CAAC;AAcnB,QAAA,MAAM,iBAAiB,YACrB,QAAQ,EACR,mBAAmB,EACnB,UAAU,EACV,WAAW,EACX,WAAW,EACX,iBAAiB,EACjB,cAAc,CACN,CAAC;AAEX,KAAK,eAAe,GAAG,CAAC,OAAO,iBAAiB,CAAC,CAAC,MAAM,CAAC,CAAC;AAE1D,MAAM,WAAW,iBAAiB;IAChC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,IAAI,EAAE,OAAO,CAAC;IACd,IAAI,EAAE,OAAO,CAAC;IACd,MAAM,EAAE,OAAO,CAAC;IAChB,IAAI,EAAE,OAAO,CAAC;CACf;AAED,MAAM,WAAW,kBAAkB;IACjC,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,cAAc,GAAG,MAAM,GAAG,QAAQ,CAAC;CAChD;AAED,MAAM,WAAW,qBAAqB;IACpC,OAAO,EAAE,CAAC,CAAC;IACX,MAAM,EAAE,6BAA6B,CAAC;IACtC,UAAU,EAAE,WAAW,CAAC;IACxB,SAAS,EAAE,IAAI,CAAC;IAChB,YAAY,EAAE,MAAM,CAAC;IACrB,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,MAAM,CAAC;IACjB,iBAAiB,EAAE,MAAM,CAAC;IAC1B,oBAAoB,EAAE,OAAO,CAAC;IAC9B,MAAM,EAAE,kBAAkB,EAAE,CAAC;IAC7B,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,KAAK,CAAC;QAClB,SAAS,EAAE,eAAe,CAAC;QAC3B,MAAM,EAAE,WAAW,GAAG,SAAS,GAAG,UAAU,CAAC;QAC7C,MAAM,CAAC,EAAE,MAAM,CAAC;KACjB,CAAC,CAAC;CACJ;AAED,MAAM,WAAW,mBAAmB;IAClC,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,qBAAqB,CAAC;CACjC;AAyBD,wBAAgB,sBAAsB,CAAC,IAAI,EAAE,MAAM,EAAE,GAAG,iBAAiB,CAwDxE;AAiED,wBAAgB,oBAAoB,CAAC,IAAI,EAAE,MAAM,GAAG,kBAAkB,EAAE,CA+CvE;AA6DD,wBAAsB,4BAA4B,CAChD,OAAO,GAAE,OAAO,CAAC,iBAAiB,CAAC,GAAG;IAAE,IAAI,CAAC,EAAE,MAAM,CAAA;CAAO,GAC3D,OAAO,CAAC,qBAAqB,CAAC,CA0ChC;AAiBD,wBAAsB,wBAAwB,CAC5C,QAAQ,EAAE,qBAAqB,GAC9B,OAAO,CAAC,mBAAmB,CAAC,CAwC9B;AAgBD,wBAAsB,SAAS,CAAC,IAAI,EAAE,MAAM,EAAE,mBA0C7C"}
+{"version":3,"file":"design-connect.d.ts","sourceRoot":"","sources":["../../src/cli/design-connect.ts"],"names":[],"mappings":"AAEA,OAAa,EAEX,KAAK,MAAM,EAEZ,MAAM,WAAW,CAAC;AAcnB,QAAA,MAAM,iBAAiB,YACrB,QAAQ,EACR,mBAAmB,EACnB,UAAU,EACV,WAAW,EACX,WAAW,EACX,iBAAiB,EACjB,cAAc,CACN,CAAC;AAEX,KAAK,eAAe,GAAG,CAAC,OAAO,iBAAiB,CAAC,CAAC,MAAM,CAAC,CAAC;AAE1D,MAAM,WAAW,iBAAiB;IAChC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,IAAI,EAAE,OAAO,CAAC;IACd,IAAI,EAAE,OAAO,CAAC;IACd,MAAM,EAAE,OAAO,CAAC;IAChB,IAAI,EAAE,OAAO,CAAC;CACf;AAED,MAAM,WAAW,kBAAkB;IACjC,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,cAAc,GAAG,MAAM,GAAG,QAAQ,CAAC;CAChD;AAED,MAAM,WAAW,qBAAqB;IACpC,OAAO,EAAE,CAAC,CAAC;IACX,MAAM,EAAE,6BAA6B,CAAC;IACtC,UAAU,EAAE,WAAW,CAAC;IACxB,SAAS,EAAE,IAAI,CAAC;IAChB,YAAY,EAAE,MAAM,CAAC;IACrB,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,MAAM,CAAC;IACjB,iBAAiB,EAAE,MAAM,CAAC;IAC1B,oBAAoB,EAAE,OAAO,CAAC;IAC9B,MAAM,EAAE,kBAAkB,EAAE,CAAC;IAC7B,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,KAAK,CAAC;QAClB,SAAS,EAAE,eAAe,CAAC;QAC3B,MAAM,EAAE,WAAW,GAAG,SAAS,GAAG,UAAU,CAAC;QAC7C,MAAM,CAAC,EAAE,MAAM,CAAC;KACjB,CAAC,CAAC;CACJ;AAED,MAAM,WAAW,mBAAmB;IAClC,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,qBAAqB,CAAC;CACjC;AAyBD,wBAAgB,sBAAsB,CAAC,IAAI,EAAE,MAAM,EAAE,GAAG,iBAAiB,CAwDxE;AAiED,wBAAgB,oBAAoB,CAAC,IAAI,EAAE,MAAM,GAAG,kBAAkB,EAAE,CA+CvE;AA6DD,wBAAsB,4BAA4B,CAChD,OAAO,GAAE,OAAO,CAAC,iBAAiB,CAAC,GAAG;IAAE,IAAI,CAAC,EAAE,MAAM,CAAA;CAAO,GAC3D,OAAO,CAAC,qBAAqB,CAAC,CAiDhC;AAiBD,wBAAsB,wBAAwB,CAC5C,QAAQ,EAAE,qBAAqB,GAC9B,OAAO,CAAC,mBAAmB,CAAC,CAwC9B;AAmCD,wBAAsB,SAAS,CAAC,IAAI,EAAE,MAAM,EAAE,mBA0C7C"}

package/dist/cli/design-connect.js

@@ -305,7 +305,14 @@ export async function prepareDesignConnectManifest(options = {}) {
                 : "available",
             reason: operation === "writeFile"
                 ? "The bridge advertises the contract before enabling local file writes."
-                : undefined,
+                : operation === "resolveNodeToFile"
+                    ? // resolveNodeToFile maps a runtime DOM node id (from the editor's
+                        // 'select' payload) to { file, line, component } provenance.  The
+                        // bridge endpoint exists; per-element provenance data must be
+                        // emitted by the connected app at build time — see the provenance
+                        // note in the help text below.
+                        "Requires the connected app to emit data-source-file / data-source-line / data-component-name attributes (e.g. via @vitejs/plugin-react jsxDEV or a Babel source plugin)."
+                    : undefined,
         })),
     };
 }
@@ -367,7 +374,26 @@ Options:
   --route-manifest <path> Non-destructive route manifest output path
   --json                  Print the manifest JSON and exit
   --once                  Prepare/scaffold the manifest and exit
-  --dry-run               Print what would be exposed without writing files`);
+  --dry-run               Print what would be exposed without writing files
+
+Element provenance (resolveNodeToFile):
+  The design editor can map a selected DOM element back to its source file,
+  line, and React component name when the connected app emits provenance
+  attributes at build time.  Add one of the following to your app's build:
+
+  • @vitejs/plugin-react with jsxDEV enabled (development mode default):
+      Sets data-source-file and data-source-line on each JSX element
+      automatically when using the Babel transform.
+
+  • A Babel source plugin (e.g. babel-plugin-react-source or a custom plugin):
+      Emits data-source-file="src/Button.tsx" data-source-line="12"
+      data-source-column="4" data-component-name="Button" on each element.
+
+  • data-loc="src/Button.tsx:12:4" shorthand attribute (Babel source convention):
+      The bridge parses this as { sourceFile, line, column } automatically.
+
+  Without these attributes the editor still works; provenance is simply absent.
+  Cross-origin localhost iframes cannot be read regardless of attributes (CSP).`);
 }
 export async function runDesign(argv) {
     const subcommand = argv[0];