@agent-native/core 0.80.8 → 0.80.9

package/corpus/templates/design/app/components/design/inspector/ExportSettingsPanel.tsx

@@ -57,6 +57,9 @@ const DEFAULT_LABELS: ExportSettingsPanelLabels = {
 
 const DEFAULT_FORMATS: ExportFormat[] = ["png", "jpg", "svg", "pdf", "webp"];
 
+const controlChromeClass =
+  "border-[var(--design-editor-control-border)] bg-[var(--design-editor-control-bg)] text-foreground shadow-none hover:bg-[var(--design-editor-panel-raised-bg)] hover:text-foreground focus:ring-1 focus:ring-[var(--design-editor-accent-color)] focus:ring-offset-0 focus-visible:ring-1 focus-visible:ring-[var(--design-editor-accent-color)] focus-visible:ring-offset-0";
+
 // Export scale bounds — must match the clamp in DesignEditor's PNG/SVG export
 // handlers so the panel never promises a range the exporter won't render.
 const MIN_EXPORT_SCALE = 0.1;
@@ -135,7 +138,12 @@ function ScaleSelect({
         }
       }}
     >
-      <SelectTrigger className="h-6 w-14 shrink-0 px-1.5 text-[11px]">
+      <SelectTrigger
+        className={cn(
+          "h-6 w-14 shrink-0 px-1.5 text-[11px]",
+          controlChromeClass,
+        )}
+      >
         <SelectValue />
       </SelectTrigger>
       <SelectContent>
@@ -267,7 +275,7 @@ export function ExportSettingsPanel({
         variant="outline"
         disabled={isDisabled}
         onClick={handleExport}
-        className="h-6 w-full px-2 text-[11px]"
+        className={cn("h-6 w-full px-2 text-[11px]", controlChromeClass)}
       >
         <IconDownload className="size-3.5" />
         {copy.export}
@@ -324,7 +332,10 @@ function ExportRow({
               onPatchRow(row.id, { customScale: false });
             }
           }}
-          className="h-6 w-14 shrink-0 px-1.5 text-[11px] tabular-nums"
+          className={cn(
+            "h-6 w-14 shrink-0 px-1.5 text-[11px] tabular-nums",
+            controlChromeClass,
+          )}
           aria-label="Scale"
           // eslint-disable-next-line jsx-a11y/no-autofocus
           autoFocus
@@ -352,7 +363,12 @@ function ExportRow({
           onPatchRow(row.id, { format: format as ExportFormat })
         }
       >
-        <SelectTrigger className="h-6 min-w-0 flex-1 px-1.5 text-[11px]">
+        <SelectTrigger
+          className={cn(
+            "h-6 min-w-0 flex-1 px-1.5 text-[11px]",
+            controlChromeClass,
+          )}
+        >
           <SelectValue />
         </SelectTrigger>
         <SelectContent>
@@ -376,7 +392,10 @@ function ExportRow({
         disabled={isDisabled}
         onChange={(e) => onPatchRow(row.id, { suffix: e.target.value })}
         placeholder={labels.suffix}
-        className="h-6 min-w-0 flex-1 px-1.5 text-[11px]"
+        className={cn(
+          "h-6 min-w-0 flex-1 px-1.5 text-[11px]",
+          controlChromeClass,
+        )}
         aria-label={labels.suffix}
       />
 

package/corpus/templates/design/app/components/design/inspector/ImageFillControls.tsx

@@ -80,6 +80,59 @@ export function imageFillToCss(value: ImageFillValue): string {
   }
 }
 
+export function imageFillToBackgroundStyles(
+  value: ImageFillValue,
+): Record<
+  | "backgroundImage"
+  | "backgroundSize"
+  | "backgroundRepeat"
+  | "backgroundPosition",
+  string
+> {
+  const url = value.url.trim();
+  if (!url) {
+    return {
+      backgroundImage: "none",
+      backgroundSize: "auto",
+      backgroundRepeat: "no-repeat",
+      backgroundPosition: "center",
+    };
+  }
+  const safeUrl = url.replace(/["')]/g, encodeURIComponent);
+  const backgroundImage = `url("${safeUrl}")`;
+  switch (value.fit) {
+    case "fit":
+      return {
+        backgroundImage,
+        backgroundSize: "contain",
+        backgroundRepeat: "no-repeat",
+        backgroundPosition: "center",
+      };
+    case "tile":
+      return {
+        backgroundImage,
+        backgroundSize: "auto",
+        backgroundRepeat: "repeat",
+        backgroundPosition: "top left",
+      };
+    case "crop":
+      return {
+        backgroundImage,
+        backgroundSize: "cover",
+        backgroundRepeat: "no-repeat",
+        backgroundPosition: "center",
+      };
+    case "fill":
+    default:
+      return {
+        backgroundImage,
+        backgroundSize: "cover",
+        backgroundRepeat: "no-repeat",
+        backgroundPosition: "center",
+      };
+  }
+}
+
 // Matches url() in three forms:
 //   group 1 — double-quoted:  url("...anything...")
 //   group 2 — single-quoted:  url('...anything...')
@@ -249,7 +302,10 @@ export function ImageFillControls({
         onValueChange={(v) => onChange({ ...value, fit: v as ImageFitMode })}
         disabled={disabled}
       >
-        <SelectTrigger className="h-6 w-full rounded-md border border-[var(--design-editor-control-border)] bg-[var(--design-editor-control-bg)] px-2 text-[11px] shadow-none focus:ring-0 focus:ring-offset-0 focus-visible:ring-2 focus-visible:ring-ring [&>svg]:size-3 [&>svg]:shrink-0">
+        <SelectTrigger
+          aria-label={"Fill" /* i18n-ignore image fit selector */}
+          className="h-6 w-full rounded-md border border-[var(--design-editor-control-border)] bg-[var(--design-editor-control-bg)] px-2 text-[11px] shadow-none focus:ring-0 focus:ring-offset-0 focus-visible:ring-2 focus-visible:ring-ring [&>svg]:size-3 [&>svg]:shrink-0"
+        >
           <SelectValue />
         </SelectTrigger>
         <SelectContent className="text-[11px]">

package/corpus/templates/design/app/components/design/inspector/ScrubInput.tsx

@@ -4,9 +4,9 @@ import {
   useId,
   useRef,
   useState,
-  type ComponentType,
   type KeyboardEvent,
   type PointerEvent,
+  type ReactNode,
 } from "react";
 
 import { Input } from "@/components/ui/input";
@@ -26,7 +26,7 @@ import {
   type ScrubExpressionOptions,
 } from "./scrub-input-utils";
 
-type ScrubInputIcon = ComponentType<{ className?: string }>;
+type ScrubInputIcon = (props: { className?: string }) => ReactNode;
 
 export interface ScrubInputChangeMeta {
   source: "commit" | "keyboard" | "scrub";
@@ -39,13 +39,14 @@ export interface ScrubInputProps extends ScrubExpressionOptions {
   onChange: (value: number, meta: ScrubInputChangeMeta) => void;
   id?: string;
   step?: number;
-  icon?: ScrubInputIcon;
+  icon?: ScrubInputIcon | null;
   disabled?: boolean;
   placeholder?: string;
   className?: string;
   inputClassName?: string;
   labelClassName?: string;
   ariaLabel?: string;
+  tooltipLabel?: string;
 }
 
 export function ScrubInput({
@@ -65,12 +66,17 @@ export function ScrubInput({
   inputClassName,
   labelClassName,
   ariaLabel,
+  tooltipLabel,
 }: ScrubInputProps) {
   const generatedId = useId();
   const inputId = id ?? generatedId;
   const [draft, setDraft] = useState(() =>
     formatScrubValue(value, { unit, precision }),
   );
+  // Track the latest draft in a ref so commitDraft always reads the most
+  // up-to-date value even if the blur event fires before the React state
+  // update has been committed to the render tree (concurrent mode / batching).
+  const draftRef = useRef(draft);
   const [focused, setFocused] = useState(false);
   const [dragging, setDragging] = useState(false);
   const inputRef = useRef<HTMLInputElement>(null);
@@ -83,27 +89,41 @@ export function ScrubInput({
   });
 
   useEffect(() => {
-    if (!focused) setDraft(formatScrubValue(value, { unit, precision }));
+    if (!focused) {
+      const formatted = formatScrubValue(value, { unit, precision });
+      draftRef.current = formatted;
+      setDraft(formatted);
+    }
   }, [focused, precision, unit, value]);
 
   const options = { unit, min, max, precision };
+  const resolvedTooltipLabel = tooltipLabel ?? ariaLabel ?? label;
 
   const setNextValue = (nextValue: number, meta: ScrubInputChangeMeta) => {
     const normalized = normalizeScrubNumber(nextValue, options);
     onChange(normalized, meta);
-    setDraft(formatScrubValue(normalized, options));
+    const formatted = formatScrubValue(normalized, options);
+    draftRef.current = formatted;
+    setDraft(formatted);
   };
 
   const commitDraft = () => {
-    const parsed = parseScrubExpression(draft, value, options);
+    // Always read from the ref so we use the latest typed value even if the
+    // React render with the updated draft state hasn't committed yet (e.g.
+    // when blur fires in the same synchronous batch as the last onChange).
+    const currentDraft = draftRef.current;
+    const parsed = parseScrubExpression(currentDraft, value, options);
     if (!parsed) {
-      setDraft(formatScrubValue(value, options));
+      const reverted = formatScrubValue(value, options);
+      draftRef.current = reverted;
+      setDraft(reverted);
       return;
     }
 
+    draftRef.current = parsed.normalized;
     setDraft(parsed.normalized);
     if (parsed.value !== value) {
-      onChange(parsed.value, { source: "commit", expression: draft });
+      onChange(parsed.value, { source: "commit", expression: currentDraft });
     }
   };
 
@@ -131,7 +151,9 @@ export function ScrubInput({
 
     if (event.key === "Escape") {
       event.preventDefault();
-      setDraft(formatScrubValue(value, options));
+      const reverted = formatScrubValue(value, options);
+      draftRef.current = reverted;
+      setDraft(reverted);
       skipNextBlurCommitRef.current = true;
       event.currentTarget.blur();
     }
@@ -202,11 +224,11 @@ export function ScrubInput({
               labelClassName,
             )}
           >
-            <Icon className="size-3 shrink-0" />
+            {Icon ? <Icon className="size-3 shrink-0" /> : null}
             <span className="truncate">{label}</span>
           </Label>
         </TooltipTrigger>
-        <TooltipContent>{`${label} — drag to scrub · ↑↓ step · Shift ×10 · ⌥ fine`}</TooltipContent>
+        <TooltipContent>{resolvedTooltipLabel}</TooltipContent>
       </Tooltip>
       <Input
         ref={inputRef}
@@ -228,7 +250,10 @@ export function ScrubInput({
           }
           commitDraft();
         }}
-        onChange={(event) => setDraft(event.target.value)}
+        onChange={(event) => {
+          draftRef.current = event.target.value;
+          setDraft(event.target.value);
+        }}
         onKeyDown={handleKeyDown}
         className={cn(
           // Compact design-editor: h-6, 11px tabular text, ring-1 with no offset.

package/corpus/templates/design/app/components/design/inspector/index.ts

@@ -60,6 +60,7 @@ export {
 } from "./GradientEditor";
 export {
   ImageFillControls,
+  imageFillToBackgroundStyles,
   imageFillToCss,
   parseImageFillCss,
   type ImageFillControlsProps,

package/corpus/templates/design/app/components/design/inspector/scrub-input-utils.ts

@@ -60,11 +60,18 @@ export function formatScrubValue(
   const normalized = normalizeScrubNumber(value, options);
   let numeric: string;
   if (Number.isFinite(options.precision) && options.precision! >= 0) {
-    const fixed = normalized.toFixed(options.precision);
-    // Only strip trailing zeros when there's a fractional part. Stripping a bare
-    // integer (precision 0, e.g. "100") would mangle it to "1" because the regex
-    // eats the integer's own trailing zeros.
-    numeric = fixed.includes(".") ? fixed.replace(/\.?0+$/, "") : fixed;
+    const fixed = normalized.toFixed(options.precision!);
+    if (options.unit) {
+      // For fields with units (px, %, °, etc.) collapse all trailing zeros
+      // including the decimal point: "12.30px" → "12.3px", "10.00px" → "10px".
+      // Leave integer strings alone; otherwise precision 0 turns "100" into "1".
+      numeric = fixed.includes(".") ? fixed.replace(/\.?0+$/, "") : fixed;
+    } else {
+      // For unitless fields (e.g. line-height), preserve at least one decimal
+      // digit so values like "2.0" stay "2.0" rather than collapsing to "2".
+      // Only strip redundant trailing zeros beyond the first decimal digit.
+      numeric = fixed.includes(".") ? fixed.replace(/(?<=\.\d)0+$/, "") : fixed;
+    }
   } else {
     numeric = String(normalized);
   }

package/corpus/templates/design/app/components/design/types.ts

@@ -36,6 +36,15 @@ export interface ElementInfo {
 
 export type DeviceFrameType = "none" | "desktop" | "tablet" | "mobile";
 
+export const DEVICE_FRAME_VIEWPORTS = {
+  desktop: { width: 1280, height: 800 },
+  tablet: { width: 768, height: 1024 },
+  mobile: { width: 390, height: 844 },
+} as const satisfies Record<
+  Exclude<DeviceFrameType, "none">,
+  { width: number; height: number }
+>;
+
 export interface ViewportTab {
   id: string;
   filename: string;

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

@@ -2,6 +2,7 @@ import {
   AgentSidebar,
   isEmbedAuthActive,
   getBrowserTabId,
+  useGuidedQuestionFlow,
   useSession,
   useT,
 } from "@agent-native/core/client";
@@ -49,9 +50,13 @@ export function Layout({ children }: LayoutProps) {
   const t = useT();
   const { session } = useSession();
   const hasSession = Boolean(session?.email);
+  const embedded = isEmbedAuthActive();
   useNavigationState(hasSession);
   const [mobileSidebarOpen, setMobileSidebarOpen] = useState(false);
   const openMobileSidebar = useCallback(() => setMobileSidebarOpen(true), []);
+  const isDesignEditor = location.pathname.startsWith("/design/");
+  const showMobileTopBar = !isDesignEditor;
+  const browserTabId = getBrowserTabId();
 
   // Bind chat to the currently-open design. Same pattern as slides — the
   // route is `/design/:id` for the editor and `/present/:id` for preview
@@ -64,6 +69,21 @@ export function Layout({ children }: LayoutProps) {
     if (!designId) return null;
     return { type: "design" as const, id: designId };
   }, [location.pathname]);
+  const designQuestionStateKey = designScope
+    ? `show-questions:${designScope.id}`
+    : "show-questions";
+  const { questions: pendingDesignQuestions } = useGuidedQuestionFlow({
+    stateKey: designQuestionStateKey,
+    queryKey: [designQuestionStateKey],
+    browserTabId,
+    refetchInterval: embedded || !isDesignEditor || !hasSession ? false : 2000,
+  });
+  const designQuestionsWaitingSlot =
+    isDesignEditor && pendingDesignQuestions?.length ? (
+      <div className="px-4 pb-2 pt-1 text-xs text-muted-foreground">
+        {"Waiting for your answers in the canvas." /* i18n-ignore */}
+      </div>
+    ) : null;
 
   useEffect(() => {
     setMobileSidebarOpen(false);
@@ -77,9 +97,6 @@ export function Layout({ children }: LayoutProps) {
   const hideHeader = EDITOR_PREFIXES.some((p) =>
     location.pathname.startsWith(p),
   );
-  const isDesignEditor = location.pathname.startsWith("/design/");
-  const showMobileTopBar = !isDesignEditor;
-  const embedded = isEmbedAuthActive();
 
   if (embedded || (isDesignEditor && !hasSession)) {
     return (
@@ -114,7 +131,8 @@ export function Layout({ children }: LayoutProps) {
             t("chat.suggestionMobile"),
           ]}
           scope={designScope}
-          browserTabId={getBrowserTabId()}
+          browserTabId={browserTabId}
+          threadFooterSlot={designQuestionsWaitingSlot}
         >
           <div className="agent-layout-shell flex h-screen w-full overflow-hidden bg-background text-foreground">
             {!isDesignEditor && mobileSidebarOpen && (
@@ -154,7 +172,7 @@ export function Layout({ children }: LayoutProps) {
               {!hideHeader && <Header />}
               <main
                 className={cn(
-                  "flex-1",
+                  "agent-native-app-main flex-1",
                   isDesignEditor ? "overflow-hidden" : "overflow-y-auto",
                 )}
               >

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

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