@agent-native/core 0.80.7 → 0.80.9

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

@@ -8,33 +8,33 @@
 
 :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;
-  --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%;
   --design-editor-accent-color: hsl(213 91% 67%);
   --design-editor-accent-hover-color: hsl(213 72% 56%);
   --design-editor-selection-color: color-mix(
@@ -44,12 +44,12 @@
   );
   --design-editor-active-row-color: color-mix(
     in srgb,
-    hsl(220 10% 15%) 8%,
+    hsl(0 0% 15%) 8%,
     transparent
   );
   --design-editor-layer-hover-color: color-mix(
     in srgb,
-    hsl(220 10% 15%) 6%,
+    hsl(0 0% 15%) 6%,
     transparent
   );
   --design-editor-selected-subtree-color: color-mix(
@@ -69,37 +69,38 @@
   --design-editor-panel-raised-bg: hsl(var(--secondary));
   --design-editor-control-bg: hsl(var(--muted));
   --design-editor-control-border: hsl(var(--border));
-  --design-editor-canvas-bg: hsl(220 10% 92%);
+  --design-editor-canvas-bg: hsl(0 0% 92%);
+  --design-editor-skeleton-canvas-bg: hsl(0 0% 92%);
 }
 
 .dark {
-  --background: 220 6% 6%;
+  --background: 0 0% 13%;
   --foreground: 0 0% 90%;
-  --card: 220 5% 13%;
+  --card: 0 0% 15%;
   --card-foreground: 0 0% 90%;
-  --popover: 220 6% 9%;
+  --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 5% 20%;
+  --muted: 0 0% 16%;
+  --muted-foreground: 0 0% 60%;
+  --accent: 0 0% 18%;
   --accent-foreground: 0 0% 96%;
   --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;
-  --sidebar-background: 220 5% 13%;
-  --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%;
   --design-editor-accent-color: hsl(213 91% 67%);
   --design-editor-accent-hover-color: hsl(213 72% 56%);
@@ -108,7 +109,7 @@
     hsl(213 91% 67%) 24%,
     transparent
   );
-  --design-editor-active-row-color: hsl(220 4% 20%);
+  --design-editor-active-row-color: hsl(0 0% 20%);
   --design-editor-layer-hover-color: color-mix(
     in srgb,
     hsl(0 0% 100%) 8%,
@@ -119,15 +120,16 @@
     hsl(213 91% 67%) 18%,
     transparent
   );
-  --design-editor-panel-divider-color: hsl(220 4% 22%);
+  --design-editor-panel-divider-color: hsl(0 0% 22%);
   --design-editor-accent-strong-color: var(--design-editor-accent-color);
   --design-editor-accent-contrast-color: #ffffff;
   --design-editor-measure-color: hsl(344 100% 63%);
-  --design-editor-panel-bg: hsl(220 5% 13%);
-  --design-editor-panel-raised-bg: hsl(220 4% 18%);
-  --design-editor-control-bg: hsl(220 4% 18%);
-  --design-editor-control-border: hsl(220 4% 24%);
-  --design-editor-canvas-bg: hsl(220 6% 6%);
+  --design-editor-panel-bg: hsl(0 0% 13%);
+  --design-editor-panel-raised-bg: hsl(0 0% 18%);
+  --design-editor-control-bg: hsl(0 0% 18%);
+  --design-editor-control-border: hsl(0 0% 24%);
+  --design-editor-canvas-bg: hsl(0 0% 10%);
+  --design-editor-skeleton-canvas-bg: hsl(0 0% 11%);
 }
 
 @layer base {
@@ -176,12 +178,38 @@
   background: hsl(var(--muted-foreground) / 0.4);
 }
 
+.design-editor-not-found-grid {
+  background-image:
+    linear-gradient(
+      var(--design-editor-panel-divider-color) 1px,
+      transparent 1px
+    ),
+    linear-gradient(
+      90deg,
+      var(--design-editor-panel-divider-color) 1px,
+      transparent 1px
+    );
+  background-size: 36px 36px;
+  -webkit-mask-image: radial-gradient(
+    circle at center,
+    black 0,
+    black 34%,
+    transparent 72%
+  );
+  mask-image: radial-gradient(
+    circle at center,
+    black 0,
+    black 34%,
+    transparent 72%
+  );
+}
+
 /* Design has a dense editor surface, so its side chrome needs more contrast
    than the shared shell defaults and a real divider in addition to shadow. */
 .agent-layout-shell,
 .agent-sidebar-shell {
-  --design-shell-chrome-bg: hsl(220 9% 93%);
-  --design-shell-divider: hsl(220 9% 79%);
+  --design-shell-chrome-bg: hsl(0 0% 93%);
+  --design-shell-divider: hsl(0 0% 79%);
   --agent-native-lower-surface: var(--design-shell-chrome-bg);
   --agent-native-raised-border: var(--design-shell-divider);
   --agent-native-raised-shadow-left: -1px 0 0 var(--design-shell-divider);
@@ -196,8 +224,8 @@
 .dark .agent-sidebar-shell,
 .dark.agent-layout-shell,
 .dark.agent-sidebar-shell {
-  --design-shell-chrome-bg: hsl(220 5% 9%);
-  --design-shell-divider: hsl(220 4% 20%);
+  --design-shell-chrome-bg: hsl(0 0% 10%);
+  --design-shell-divider: hsl(0 0% 22%);
   --agent-native-lower-surface: var(--design-shell-chrome-bg);
   --agent-native-raised-border: var(--design-shell-divider);
 }

package/corpus/templates/design/app/hooks/use-question-flow.ts

@@ -40,7 +40,7 @@ export function useQuestionFlow(
         formattedAnswers,
         "",
         designId
-          ? "Now continue the design. Honor any answer about variations: if the user asked to explore options, call present-design-variants with 2-5 complete HTML directions and wait for their pick; otherwise call generate-design with one complete, renderable index.html first. Do not ask another question unless a required decision is still genuinely missing."
+          ? "Now continue the design. Honor any answer about variations: if the user asked to explore options, call present-design-variants with 2-5 complete HTML directions, wait for their chat pick, delete the unchosen variant screens, then continue from the kept screen; otherwise call generate-design with one complete, renderable index.html first. Do not ask another question unless a required decision is still genuinely missing."
           : "Now continue the design. Honor any answer about variations: use variants only if requested; otherwise generate one polished direction.",
       ]
         .filter(Boolean)
@@ -78,7 +78,7 @@ export function useQuestionFlow(
         formattedAnswers,
         "",
         designId
-          ? "Now continue the design. Honor any answer about variations: if the user asked to explore options, call present-design-variants with 2-5 complete HTML directions and wait for their pick; otherwise call generate-design with one complete, renderable index.html first. Do not ask another question unless a required decision is still genuinely missing."
+          ? "Now continue the design. Honor any answer about variations: if the user asked to explore options, call present-design-variants with 2-5 complete HTML directions, wait for their chat pick, delete the unchosen variant screens, then continue from the kept screen; otherwise call generate-design with one complete, renderable index.html first. Do not ask another question unless a required decision is still genuinely missing."
           : "Now continue the design. Honor any answer about variations: use variants only if requested; otherwise generate one polished direction.",
       ]
         .filter(Boolean)

package/corpus/templates/design/app/hooks/useDesignHotkeys.ts

@@ -271,7 +271,14 @@ function handleDesignHotkey(
   if (
     event.key === "Tab" &&
     props.onTab &&
-    !isFocusableChromeTarget(event.target)
+    // Ignore synthetic (non-trusted) Tab events dispatched by handleIframeHotkey
+    // unless they carry the iframe-hotkey marker. This keeps inspector field
+    // tabbing native while allowing real iframe canvas Tab presses to cycle files.
+    (event.isTrusted !== false ||
+      (event as KeyboardEvent & { __agentNativeIframeHotkey?: boolean })
+        .__agentNativeIframeHotkey === true) &&
+    !isFocusableChromeTarget(event.target) &&
+    !isDesignHotkeyEditableTarget(document.activeElement)
   ) {
     prevent();
     props.onTab({ ...details, backwards: event.shiftKey });

package/corpus/templates/design/app/i18n/zh-TW.ts

@@ -409,12 +409,16 @@ const messages = {
       propsPasted: "屬性已貼上",
       primitiveInsertFailed: "無法將該圖層新增到畫面",
       layerMoveFailed: "無法移動該圖層",
+      duplicateElementFailed: "無法複製該元素",
       saveCopyError: "無法儲存這個設計的副本",
     },
+    inspectorLockedTitle: "產生中，檢查器已鎖定",
+    inspectorLockedDescription: "第一個畫面準備好後即可使用控制項。",
   },
   layersPanel: {
     title: "圖層",
     screens: "畫面",
+    allScreens: "所有畫面",
     thumbnail: "縮圖",
     addScreen: "新增畫面",
     searchPlaceholder: "搜尋圖層...",

package/corpus/templates/design/app/i18n-data.ts

@@ -319,7 +319,7 @@ const enUS = {
     downloadZip: "Download ZIP",
     exportHtml: "Export HTML",
     exportPdf: "Export PDF",
-    copyCodingHandoff: "Copy coding handoff",
+    copyCodingHandoff: "Copy agent prompt",
     designTools: "Design tools",
     drawOnCanvas: "Draw on canvas",
     dropCommentPin: "Drop comment pin",
@@ -330,6 +330,9 @@ const enUS = {
     variations: "{{count}} variations",
     close: "Close",
     generating: "Generating design...",
+    inspectorLockedTitle: "Inspector locked while generating",
+    inspectorLockedDescription:
+      "Controls unlock when the first screen is ready.",
     noFiles: "No files yet. Ask the agent to generate a design.",
     tryAgain: "Try again",
     newPrompt: "New prompt",
@@ -395,8 +398,8 @@ const enUS = {
       "agent-structural-edit": "Agent needed for structural move",
     },
     toasts: {
-      codingHandoffError: "Could not create coding handoff",
-      codingHandoffCopied: "Coding handoff copied",
+      codingHandoffError: "Could not create agent handoff",
+      codingHandoffCopied: "Agent prompt copied",
       clipboardBlocked: "Clipboard blocked",
       htmlCreateError: "Could not create HTML download",
       htmlDownloaded: "HTML downloaded",
@@ -421,12 +424,14 @@ const enUS = {
       propsPasted: "Properties pasted",
       primitiveInsertFailed: "Could not add that layer to the screen",
       layerMoveFailed: "Could not move that layer",
+      duplicateElementFailed: "Could not duplicate that element",
       saveCopyError: "Could not save a copy of this design",
     },
   },
   layersPanel: {
     title: "Layers",
     screens: "Screens",
+    allScreens: "All screens",
     thumbnail: "Thumbnail",
     addScreen: "Add screen",
     searchPlaceholder: "Search layers...",
@@ -8071,6 +8076,8 @@ const designModeFeatureOverrides = {
 const designCanvasFeatureOverrides = {
   "zh-TW": {
     designEditor: {
+      inspectorLockedTitle: "產生中，檢查器已鎖定",
+      inspectorLockedDescription: "第一個畫面準備好後即可使用控制項。",
       toasts: {
         propsCopied: "屬性已複製",
         propsPasted: "屬性已貼上",
@@ -8079,6 +8086,7 @@ const designCanvasFeatureOverrides = {
     layersPanel: {
       title: "圖層",
       screens: "畫面",
+      allScreens: "所有畫面",
       thumbnail: "縮圖",
       addScreen: "新增畫面",
       searchPlaceholder: "搜尋圖層...",
@@ -8099,11 +8107,14 @@ const designCanvasFeatureOverrides = {
   },
   "zh-CN": {
     designEditor: {
+      inspectorLockedTitle: "生成期间检查器已锁定",
+      inspectorLockedDescription: "第一个屏幕准备好后即可使用控件。",
       toasts: {
         propsCopied: "属性已复制",
         propsPasted: "属性已粘贴",
         primitiveInsertFailed: "无法将该图层添加到画面",
         layerMoveFailed: "无法移动该图层",
+        duplicateElementFailed: "无法复制该元素",
       },
     },
     editPanel: {
@@ -8137,6 +8148,7 @@ const designCanvasFeatureOverrides = {
     layersPanel: {
       title: "图层",
       screens: "屏幕",
+      allScreens: "所有屏幕",
       thumbnail: "缩略图",
       addScreen: "添加屏幕",
       searchPlaceholder: "搜索图层...",
@@ -8157,11 +8169,15 @@ const designCanvasFeatureOverrides = {
   },
   "es-ES": {
     designEditor: {
+      inspectorLockedTitle: "Inspector bloqueado durante la generación",
+      inspectorLockedDescription:
+        "Los controles se desbloquean cuando la primera pantalla esté lista.",
       toasts: {
         propsCopied: "Propiedades copiadas",
         propsPasted: "Propiedades pegadas",
         primitiveInsertFailed: "No se pudo añadir esa capa a la pantalla",
         layerMoveFailed: "No se pudo mover esa capa",
+        duplicateElementFailed: "No se pudo duplicar ese elemento",
       },
     },
     editPanel: {
@@ -8195,6 +8211,7 @@ const designCanvasFeatureOverrides = {
     layersPanel: {
       title: "Capas",
       screens: "Pantallas",
+      allScreens: "Todas las pantallas",
       thumbnail: "Miniatura",
       addScreen: "Añadir pantalla",
       searchPlaceholder: "Buscar capas...",
@@ -8215,11 +8232,15 @@ const designCanvasFeatureOverrides = {
   },
   "fr-FR": {
     designEditor: {
+      inspectorLockedTitle: "Inspecteur verrouillé pendant la génération",
+      inspectorLockedDescription:
+        "Les contrôles se déverrouillent lorsque le premier écran est prêt.",
       toasts: {
         propsCopied: "Propriétés copiées",
         propsPasted: "Propriétés collées",
         primitiveInsertFailed: "Impossible d’ajouter ce calque à l’écran",
         layerMoveFailed: "Impossible de déplacer ce calque",
+        duplicateElementFailed: "Impossible de dupliquer cet élément",
       },
     },
     editPanel: {
@@ -8253,6 +8274,7 @@ const designCanvasFeatureOverrides = {
     layersPanel: {
       title: "Calques",
       screens: "Écrans",
+      allScreens: "Tous les écrans",
       thumbnail: "Miniature",
       addScreen: "Ajouter un écran",
       searchPlaceholder: "Rechercher des calques...",
@@ -8273,12 +8295,16 @@ const designCanvasFeatureOverrides = {
   },
   "de-DE": {
     designEditor: {
+      inspectorLockedTitle: "Inspektor während der Generierung gesperrt",
+      inspectorLockedDescription:
+        "Die Steuerelemente werden freigeschaltet, sobald der erste Screen bereit ist.",
       toasts: {
         propsCopied: "Eigenschaften kopiert",
         propsPasted: "Eigenschaften eingefügt",
         primitiveInsertFailed:
           "Diese Ebene konnte nicht zur Ansicht hinzugefügt werden",
         layerMoveFailed: "Diese Ebene konnte nicht verschoben werden",
+        duplicateElementFailed: "Dieses Element konnte nicht dupliziert werden",
       },
     },
     editPanel: {
@@ -8312,6 +8338,7 @@ const designCanvasFeatureOverrides = {
     layersPanel: {
       title: "Ebenen",
       screens: "Screens",
+      allScreens: "Alle Screens",
       thumbnail: "Miniaturansicht",
       addScreen: "Screen hinzufügen",
       searchPlaceholder: "Ebenen suchen...",
@@ -8332,11 +8359,15 @@ const designCanvasFeatureOverrides = {
   },
   "ja-JP": {
     designEditor: {
+      inspectorLockedTitle: "生成中はインスペクターがロックされています",
+      inspectorLockedDescription:
+        "最初の画面の準備ができるとコントロールが使えます。",
       toasts: {
         propsCopied: "プロパティをコピーしました",
         propsPasted: "プロパティを貼り付けました",
         primitiveInsertFailed: "そのレイヤーを画面に追加できませんでした",
         layerMoveFailed: "そのレイヤーを移動できませんでした",
+        duplicateElementFailed: "その要素を複製できませんでした",
       },
     },
     editPanel: {
@@ -8370,6 +8401,7 @@ const designCanvasFeatureOverrides = {
     layersPanel: {
       title: "レイヤー",
       screens: "画面",
+      allScreens: "すべての画面",
       thumbnail: "サムネイル",
       addScreen: "画面を追加",
       searchPlaceholder: "レイヤーを検索...",
@@ -8390,11 +8422,15 @@ const designCanvasFeatureOverrides = {
   },
   "ko-KR": {
     designEditor: {
+      inspectorLockedTitle: "생성 중에는 인스펙터가 잠겨 있습니다",
+      inspectorLockedDescription:
+        "첫 화면이 준비되면 컨트롤이 잠금 해제됩니다.",
       toasts: {
         propsCopied: "속성이 복사됨",
         propsPasted: "속성이 붙여넣어짐",
         primitiveInsertFailed: "해당 레이어를 화면에 추가할 수 없습니다",
         layerMoveFailed: "해당 레이어를 이동할 수 없습니다",
+        duplicateElementFailed: "해당 요소를 복제할 수 없습니다",
       },
     },
     editPanel: {
@@ -8428,6 +8464,7 @@ const designCanvasFeatureOverrides = {
     layersPanel: {
       title: "레이어",
       screens: "화면",
+      allScreens: "모든 화면",
       thumbnail: "썸네일",
       addScreen: "화면 추가",
       searchPlaceholder: "레이어 검색...",
@@ -8448,11 +8485,15 @@ const designCanvasFeatureOverrides = {
   },
   "pt-BR": {
     designEditor: {
+      inspectorLockedTitle: "Inspetor bloqueado durante a geração",
+      inspectorLockedDescription:
+        "Os controles são desbloqueados quando a primeira tela estiver pronta.",
       toasts: {
         propsCopied: "Propriedades copiadas",
         propsPasted: "Propriedades coladas",
         primitiveInsertFailed: "Não foi possível adicionar essa camada à tela",
         layerMoveFailed: "Não foi possível mover essa camada",
+        duplicateElementFailed: "Não foi possível duplicar esse elemento",
       },
     },
     editPanel: {
@@ -8486,6 +8527,7 @@ const designCanvasFeatureOverrides = {
     layersPanel: {
       title: "Camadas",
       screens: "Telas",
+      allScreens: "Todas as telas",
       thumbnail: "Miniatura",
       addScreen: "Adicionar tela",
       searchPlaceholder: "Buscar camadas...",
@@ -8506,11 +8548,15 @@ const designCanvasFeatureOverrides = {
   },
   "hi-IN": {
     designEditor: {
+      inspectorLockedTitle: "जनरेट करते समय इंस्पेक्टर लॉक है",
+      inspectorLockedDescription:
+        "पहली स्क्रीन तैयार होने पर नियंत्रण अनलॉक हो जाएंगे.",
       toasts: {
         propsCopied: "गुण कॉपी किए गए",
         propsPasted: "गुण चिपकाए गए",
         primitiveInsertFailed: "उस परत को स्क्रीन में नहीं जोड़ा जा सका",
         layerMoveFailed: "उस परत को स्थानांतरित नहीं किया जा सका",
+        duplicateElementFailed: "उस तत्व की प्रतिलिपि नहीं बनाई जा सकी",
       },
     },
     editPanel: {
@@ -8544,6 +8590,7 @@ const designCanvasFeatureOverrides = {
     layersPanel: {
       title: "परतें",
       screens: "स्क्रीन",
+      allScreens: "सभी स्क्रीन",
       thumbnail: "थंबनेल",
       addScreen: "स्क्रीन जोड़ें",
       searchPlaceholder: "परतें खोजें...",
@@ -8564,11 +8611,15 @@ const designCanvasFeatureOverrides = {
   },
   "ar-SA": {
     designEditor: {
+      inspectorLockedTitle: "المفتش مقفل أثناء الإنشاء",
+      inspectorLockedDescription:
+        "تُفتح عناصر التحكم عندما تكون الشاشة الأولى جاهزة.",
       toasts: {
         propsCopied: "تم نسخ الخصائص",
         propsPasted: "تم لصق الخصائص",
         primitiveInsertFailed: "تعذرت إضافة تلك الطبقة إلى الشاشة",
         layerMoveFailed: "تعذر نقل تلك الطبقة",
+        duplicateElementFailed: "تعذّر تكرار هذا العنصر",
       },
     },
     editPanel: {
@@ -8602,6 +8653,7 @@ const designCanvasFeatureOverrides = {
     layersPanel: {
       title: "الطبقات",
       screens: "الشاشات",
+      allScreens: "كل الشاشات",
       thumbnail: "الصورة المصغرة",
       addScreen: "إضافة شاشة",
       searchPlaceholder: "البحث في الطبقات...",