@agent-native/core 0.176.1 → 0.176.2-nightly-20260831184159

package/corpus/templates/design/app/components/design/edit-panel/typography-properties.tsx

@@ -1,7 +1,7 @@
 import { useT } from "@agent-native/core/client/i18n";
+import { VisualFontFamilyPicker } from "@agent-native/toolkit/design-tweaks";
 import {
   IconAlignCenter,
-  IconAlignJustified,
   IconAlignLeft,
   IconAlignRight,
   IconArrowAutofitHeight,
@@ -521,44 +521,22 @@ export function TypographyProperties({
           overlap the weight/size row below (bug: trigger extended ~12 px into
           the next row, causing clicks meant for the size input to open this
           dropdown instead). */}
-      <InspectorGrid>
+      <InspectorGrid layout="field-action">
         <InspectorGridCell span={28} className="h-6 overflow-hidden">
-          <Select
+          <VisualFontFamilyPicker
+            label={t("editPanel.labels.font")}
             value={fontFamily}
-            onValueChange={(v) => onStyleChange("fontFamily", v)}
-          >
-            <SelectTrigger
-              aria-label={t("editPanel.labels.font")}
-              className="h-6 w-full 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 />
-            </SelectTrigger>
-            <SelectContent>
-              {fontFamilyIsMixed ? (
-                <SelectItem
-                  value={MIXED_VALUE}
-                  disabled
-                  className="!text-[11px] text-muted-foreground"
-                >
-                  {MIXED_VALUE}
-                </SelectItem>
-              ) : null}
-              {fontFamilyOptions.map((opt) => (
-                <SelectItem
-                  key={opt.value}
-                  value={opt.value}
-                  className="!text-[11px]"
-                >
-                  {opt.label}
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
+            options={fontFamilyOptions}
+            mixed={fontFamilyIsMixed}
+            mixedLabel={MIXED_VALUE}
+            className="h-6 w-full 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)]"
+            onChange={(value) => onStyleChange("fontFamily", value)}
+          />
         </InspectorGridCell>
       </InspectorGrid>
 
       {/* Row 2: weight + size side by side */}
-      <InspectorGrid className="items-center" layout="pair">
+      <InspectorGrid className="items-center" layout="action-pair">
         <InspectorGridCell span={INSPECTOR_GRID_PAIR_SPAN}>
           <Select
             value={fontWeightIsMixed ? MIXED_VALUE : currentFontWeight}
@@ -620,56 +598,70 @@ export function TypographyProperties({
         </InspectorGridCell>
       </InspectorGrid>
 
-      {/* Row 3: line-height + letter-spacing with design-editor leading icons */}
-      <InspectorGrid className="items-center" layout="pair">
+      {/* Row 3: labelled line-height + letter-spacing fields */}
+      <InspectorGrid className="items-center" layout="action-pair">
         <InspectorGridCell span={INSPECTOR_GRID_PAIR_SPAN}>
-          <ScrubInput
-            label={t("editPanel.labels.lineHeight")}
-            ariaLabel={t("editPanel.labels.lineHeight")}
-            icon={IconLineHeight}
-            value={
-              lineHeightIsMixed
-                ? 0
-                : resolveLineHeight(styles.lineHeight, styles.fontSize)
-            }
-            mixed={lineHeightIsMixed}
-            onChange={(value, meta) =>
-              onStyleChange("lineHeight", String(Math.max(0.1, value)), meta)
-            }
-            min={0.1}
-            step={0.1}
-            precision={2}
-            className="w-full gap-0"
-            labelClassName="h-6 w-6 justify-center gap-0 rounded-l-md rounded-r-none border border-r-0 border-[var(--design-editor-control-border)] bg-[var(--design-editor-control-bg)] !text-[11px] [&>span]:hidden"
-            inputClassName="h-6 rounded-l-none rounded-r-md border-[var(--design-editor-control-border)] bg-[var(--design-editor-control-bg)] shadow-none focus-visible:ring-1 focus-visible:ring-[var(--design-editor-accent-color)]"
-          />
+          <div className="flex flex-col gap-2">
+            <p className="design-sidebar-field-label text-muted-foreground">
+              {t("editPanel.labels.lineHeight")}
+            </p>
+            <ScrubInput
+              label={t("editPanel.labels.lineHeight")}
+              ariaLabel={t("editPanel.labels.lineHeight")}
+              icon={IconLineHeight}
+              value={
+                lineHeightIsMixed
+                  ? 0
+                  : resolveLineHeight(styles.lineHeight, styles.fontSize)
+              }
+              mixed={lineHeightIsMixed}
+              onChange={(value, meta) =>
+                onStyleChange("lineHeight", String(Math.max(0.1, value)), meta)
+              }
+              min={0.1}
+              step={0.1}
+              precision={2}
+              className="w-full gap-0"
+              labelClassName="h-6 w-6 justify-center gap-0 rounded-l-md rounded-r-none border border-r-0 border-[var(--design-editor-control-border)] bg-[var(--design-editor-control-bg)] !text-[11px] [&>span]:hidden"
+              inputClassName="h-6 rounded-l-none rounded-r-md border-[var(--design-editor-control-border)] bg-[var(--design-editor-control-bg)] shadow-none focus-visible:ring-1 focus-visible:ring-[var(--design-editor-accent-color)]"
+            />
+          </div>
         </InspectorGridCell>
         <InspectorGridCell span={INSPECTOR_GRID_PAIR_GUTTER_SPAN} ariaHidden />
         <InspectorGridCell span={INSPECTOR_GRID_PAIR_SPAN}>
-          <ScrubInput
-            label={t("editPanel.labels.tracking")}
-            ariaLabel={t("editPanel.labels.tracking")}
-            icon={IconLetterSpacing}
-            value={
-              letterSpacingIsMixed
-                ? 0
-                : styles.letterSpacing
-                  ? parseNumericValue(styles.letterSpacing)
-                  : 0
-            }
-            mixed={letterSpacingIsMixed}
-            onChange={(value, meta) =>
-              onStyleChange("letterSpacing", `${value}px`, meta)
-            }
-            unit="px"
-            precision={1}
-            className="w-full gap-0"
-            labelClassName="h-6 w-6 justify-center gap-0 rounded-l-md rounded-r-none border border-r-0 border-[var(--design-editor-control-border)] bg-[var(--design-editor-control-bg)] !text-[11px] [&>span]:hidden"
-            inputClassName="h-6 rounded-l-none rounded-r-md border-[var(--design-editor-control-border)] bg-[var(--design-editor-control-bg)] shadow-none focus-visible:ring-1 focus-visible:ring-[var(--design-editor-accent-color)]"
-          />
+          <div className="flex flex-col gap-2">
+            <p className="design-sidebar-field-label text-muted-foreground">
+              {t("editPanel.labels.tracking")}
+            </p>
+            <ScrubInput
+              label={t("editPanel.labels.tracking")}
+              ariaLabel={t("editPanel.labels.tracking")}
+              icon={IconLetterSpacing}
+              value={
+                letterSpacingIsMixed
+                  ? 0
+                  : styles.letterSpacing
+                    ? parseNumericValue(styles.letterSpacing)
+                    : 0
+              }
+              mixed={letterSpacingIsMixed}
+              onChange={(value, meta) =>
+                onStyleChange("letterSpacing", `${value}px`, meta)
+              }
+              unit="px"
+              precision={1}
+              className="w-full gap-0"
+              labelClassName="h-6 w-6 justify-center gap-0 rounded-l-md rounded-r-none border border-r-0 border-[var(--design-editor-control-border)] bg-[var(--design-editor-control-bg)] !text-[11px] [&>span]:hidden"
+              inputClassName="h-6 rounded-l-none rounded-r-md border-[var(--design-editor-control-border)] bg-[var(--design-editor-control-bg)] shadow-none focus-visible:ring-1 focus-visible:ring-[var(--design-editor-accent-color)]"
+            />
+          </div>
         </InspectorGridCell>
       </InspectorGrid>
 
+      <div className="design-sidebar-field-label text-muted-foreground">
+        {t("editPanel.labels.align")}
+      </div>
+
       {/* Row 4: horizontal + vertical text alignment */}
       <InspectorGrid className="items-center">
         <InspectorGridCell span={13}>
@@ -695,13 +687,6 @@ export function TypographyProperties({
             >
               <IconAlignRight className="size-3.5" />
             </InspectorIconButton>
-            <InspectorIconButton
-              label={t("editPanel.textAligns.justify")}
-              active={textAlign === "justify"}
-              onClick={() => onStyleChange("textAlign", "justify")}
-            >
-              <IconAlignJustified className="size-3.5" />
-            </InspectorIconButton>
           </InspectorSegment>
         </InspectorGridCell>
         <InspectorGridCell span={1} ariaHidden />

package/corpus/templates/design/app/components/design/editor/MakeRealDialog.tsx

@@ -1,3 +1,7 @@
+import {
+  BuilderConnectPopover,
+  useBuilderConnectFlow,
+} from "@agent-native/core/client/settings";
 import { withBuilderUtmTrackingParams } from "@agent-native/core/shared";
 import {
   IconCircleCheck,
@@ -46,6 +50,18 @@ export function MakeRealDialog({
   pending: boolean;
   onConfirm: () => void;
 }) {
+  const builderConnect = useBuilderConnectFlow({
+    enabled: open,
+    popupUrl:
+      result?.status === "not-configured" &&
+      result.cta?.kind === "connect-builder"
+        ? result.cta.connectUrl
+        : undefined,
+    provisionAccount: true,
+    trackingSource: "design_make_real_dialog",
+    trackingFlow: "design_migration",
+  });
+
   return (
     <Dialog
       open={open}
@@ -75,16 +91,25 @@ export function MakeRealDialog({
                 Cancel
               </Button>
               {result.cta.connectUrl ? (
-                <Button asChild className="cursor-pointer">
-                  <a
-                    href={result.cta.connectUrl}
-                    target="_blank"
-                    rel="noopener noreferrer"
-                  >
-                    {result.cta.primaryAction}
-                    <IconExternalLink className="ml-1.5 size-3.5" />
-                  </a>
-                </Button>
+                result.cta.kind === "connect-builder" ? (
+                  <BuilderConnectPopover flow={builderConnect}>
+                    <Button className="cursor-pointer">
+                      {result.cta.primaryAction}
+                      <IconExternalLink className="ml-1.5 size-3.5" />
+                    </Button>
+                  </BuilderConnectPopover>
+                ) : (
+                  <Button asChild className="cursor-pointer">
+                    <a
+                      href={result.cta.connectUrl}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                    >
+                      {result.cta.primaryAction}
+                      <IconExternalLink className="ml-1.5 size-3.5" />
+                    </a>
+                  </Button>
+                )
               ) : null}
             </DialogFooter>
           </>

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

@@ -401,6 +401,9 @@ export function AutoLayoutMatrix({
 
   const activeFlow = getFlowOption(value);
   const isBlock = activeFlow === "normal";
+  const canResizeToFit =
+    (availableChildSizing?.horizontal ?? SIZING_OPTIONS).includes("hug") &&
+    (availableChildSizing?.vertical ?? SIZING_OPTIONS).includes("hug");
 
   /** Apply a flow choice, coordinating display + direction + wrap. */
   const selectFlow = (flow: AutoLayoutFlow) => {
@@ -585,30 +588,32 @@ export function AutoLayoutMatrix({
           </InspectorGridCell>
           <InspectorGridCell span={1} ariaHidden />
           <InspectorGridCell span={4} className="flex justify-center">
-            {/* Resize-to-fit icon button */}
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <Button
-                  type="button"
-                  variant="ghost"
-                  size="icon"
-                  disabled={disabled}
-                  aria-label={
-                    "Resize to fit" /* i18n-ignore inspector tooltip */
-                  }
-                  onClick={() => {
-                    onChildSizingChange("horizontal", "hug");
-                    onChildSizingChange("vertical", "hug");
-                  }}
-                  className="size-6 rounded-md text-muted-foreground hover:bg-[var(--design-editor-control-bg)] hover:text-foreground"
-                >
-                  <IconArrowsDiagonalMinimize2 className="size-4" />
-                </Button>
-              </TooltipTrigger>
-              <TooltipContent>
-                {"Resize to fit" /* i18n-ignore inspector tooltip */}
-              </TooltipContent>
-            </Tooltip>
+            {canResizeToFit ? (
+              /* Resize-to-fit only applies when both axes have measurable content. */
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button
+                    type="button"
+                    variant="ghost"
+                    size="icon"
+                    disabled={disabled}
+                    aria-label={
+                      "Resize to fit" /* i18n-ignore inspector tooltip */
+                    }
+                    onClick={() => {
+                      onChildSizingChange("horizontal", "hug");
+                      onChildSizingChange("vertical", "hug");
+                    }}
+                    className="size-6 rounded-md text-muted-foreground hover:bg-[var(--design-editor-control-bg)] hover:text-foreground"
+                  >
+                    <IconArrowsDiagonalMinimize2 className="size-4" />
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent>
+                  {"Resize to fit" /* i18n-ignore inspector tooltip */}
+                </TooltipContent>
+              </Tooltip>
+            ) : null}
           </InspectorGridCell>
         </InspectorGrid>
 

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

@@ -231,6 +231,8 @@ export interface DesignColorPickerProps {
   /** Notified when a shader fill is applied/tuned (descriptor + CSS fallback). */
   onShaderChange?: (descriptor: ShaderDescriptor, css: string) => void;
   labels?: Partial<DesignColorPickerLabels>;
+  /** Allow Design history chords while the picker owns focus in its portal. */
+  allowDesignHistoryHotkeys?: boolean;
   disabled?: boolean;
   className?: string;
 }
@@ -558,6 +560,7 @@ export function DesignColorPicker({
   glslShaderContext,
   onShaderChange,
   labels,
+  allowDesignHistoryHotkeys = false,
   disabled = false,
   className,
 }: DesignColorPickerProps) {
@@ -1201,6 +1204,9 @@ export function DesignColorPicker({
           align="start"
           sideOffset={8}
           className="z-[10000] w-[252px] p-0 shadow-xl"
+          data-design-history-hotkeys={
+            allowDesignHistoryHotkeys ? "true" : undefined
+          }
           // Keep the picker open when the style change triggered by a paint-type
           // switch causes the canvas to re-project the element. Without this,
           // Radix treats the resulting focus shift as an "interact outside" event

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

@@ -480,7 +480,9 @@ export function GlslShaderKnobs({
   };
   const roomy = presentation === "popover";
   return (
-    <div className={cn("grid", roomy ? "gap-2.5" : "gap-1")}>
+    <div
+      className={cn(roomy ? "design-inspector-popover-stack" : "grid gap-1")}
+    >
       {entries.map(([name, u]) => {
         const label = u.label ?? name.replace(/^u_/, "").replace(/_/g, " ");
         const current = values[name] ?? u.value;
@@ -586,7 +588,7 @@ export function GlslShaderKnobs({
           const step = u.step ?? 0.01;
           return (
             <InspectorControlField key={name} label={label}>
-              <div className="grid h-6 min-w-0 grid-cols-[minmax(0,1fr)_56px] overflow-hidden rounded-md bg-[var(--design-editor-control-bg)]">
+              <div className="design-inspector-popover-slider grid h-6 min-w-0 overflow-hidden rounded-md bg-[var(--design-editor-control-bg)]">
                 <div className="flex min-w-0 items-center px-2">
                   <Slider
                     value={[numericValue]}
@@ -842,88 +844,87 @@ export function GlslShaderPanel({
   if (activeDef) {
     return (
       <div className="flex flex-col">
-        <div
-          className={cn(
-            "flex items-center",
-            roomy ? "h-12 gap-2 px-4" : "h-6 gap-1.5 px-3",
-          )}
-        >
-          <button
-            type="button"
-            aria-label={t("editPanel.shaders.backToBrowser")}
-            onClick={() => {
-              setBrowsing(true);
-              setJustAppliedId(null);
-              setDraftValues(null);
-            }}
-            className={cn(
-              "flex items-center justify-center rounded text-muted-foreground hover:bg-[var(--design-editor-control-bg)] hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-              roomy ? "size-7" : "size-5",
-            )}
-          >
-            <IconArrowLeft className="size-3.5" />
-          </button>
-          <span
-            className={cn(
-              "flex-1 truncate font-semibold text-foreground",
-              roomy ? "text-sm" : "!text-[11px]",
-            )}
-          >
-            {activeDef.name}
-          </span>
-          {context.onEditCode ? (
+        {!roomy ? (
+          <div className="flex h-6 items-center gap-1.5 px-3">
+            <button
+              type="button"
+              aria-label={t("editPanel.shaders.backToBrowser")}
+              onClick={() => {
+                setBrowsing(true);
+                setJustAppliedId(null);
+                setDraftValues(null);
+              }}
+              className={cn(
+                "flex items-center justify-center rounded text-muted-foreground hover:bg-[var(--design-editor-control-bg)] hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                roomy ? "size-7" : "size-5",
+              )}
+            >
+              <IconArrowLeft className="size-3.5" />
+            </button>
+            <span
+              className={cn(
+                "flex-1 truncate font-semibold text-foreground",
+                roomy ? "text-sm" : "!text-[11px]",
+              )}
+            >
+              {activeDef.name}
+            </span>
+            {context.onEditCode ? (
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <button
+                    type="button"
+                    aria-label={t("editPanel.shaders.editCode")}
+                    onClick={() => context.onEditCode?.(activeDef.id)}
+                    className={cn(
+                      "flex items-center justify-center rounded text-muted-foreground hover:bg-[var(--design-editor-control-bg)] hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                      roomy ? "size-7" : "size-5",
+                    )}
+                  >
+                    <IconCode className="size-3.5" />
+                  </button>
+                </TooltipTrigger>
+                <TooltipContent>
+                  {t("editPanel.shaders.editCode")}
+                </TooltipContent>
+              </Tooltip>
+            ) : null}
             <Tooltip>
               <TooltipTrigger asChild>
                 <button
                   type="button"
-                  aria-label={t("editPanel.shaders.editCode")}
-                  onClick={() => context.onEditCode?.(activeDef.id)}
+                  aria-label={t("editPanel.shaders.removeShader")}
+                  disabled={disabled || busy || !nodeMount}
+                  onClick={() => void removeFromNode()}
                   className={cn(
-                    "flex items-center justify-center rounded text-muted-foreground hover:bg-[var(--design-editor-control-bg)] hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                    "flex items-center justify-center rounded text-muted-foreground hover:bg-[var(--design-editor-control-bg)] hover:text-destructive focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-40",
                     roomy ? "size-7" : "size-5",
                   )}
                 >
-                  <IconCode className="size-3.5" />
+                  <IconTrash className="size-3" />
                 </button>
               </TooltipTrigger>
-              <TooltipContent>{t("editPanel.shaders.editCode")}</TooltipContent>
+              <TooltipContent>
+                {t("editPanel.shaders.removeShader")}
+              </TooltipContent>
             </Tooltip>
-          ) : null}
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <button
-                type="button"
-                aria-label={t("editPanel.shaders.removeShader")}
-                disabled={disabled || busy || !nodeMount}
-                onClick={() => void removeFromNode()}
-                className={cn(
-                  "flex items-center justify-center rounded text-muted-foreground hover:bg-[var(--design-editor-control-bg)] hover:text-destructive focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-40",
-                  roomy ? "size-7" : "size-5",
-                )}
-              >
-                <IconTrash className="size-3" />
-              </button>
-            </TooltipTrigger>
-            <TooltipContent>
-              {t("editPanel.shaders.removeShader")}
-            </TooltipContent>
-          </Tooltip>
-          <button
-            type="button"
-            aria-label={t("editPanel.shaders.closePanel")}
-            onClick={() => onBack(Boolean(nodeMount))}
-            className={cn(
-              "flex items-center justify-center rounded text-muted-foreground hover:bg-[var(--design-editor-control-bg)] hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-              roomy ? "size-7" : "size-5",
-            )}
-          >
-            <IconX className="size-3" />
-          </button>
-        </div>
+            <button
+              type="button"
+              aria-label={t("editPanel.shaders.closePanel")}
+              onClick={() => onBack(Boolean(nodeMount))}
+              className={cn(
+                "flex items-center justify-center rounded text-muted-foreground hover:bg-[var(--design-editor-control-bg)] hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                roomy ? "size-7" : "size-5",
+              )}
+            >
+              <IconX className="size-3" />
+            </button>
+          </div>
+        ) : null}
         <div
           className={cn(
-            "grid border-t border-border/70",
-            roomy ? "gap-3 p-4" : "gap-2 p-2",
+            "grid",
+            roomy ? "gap-2" : "gap-2 border-t border-border/70 p-2",
           )}
         >
           <GlslShaderKnobs

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

@@ -95,7 +95,7 @@ export function InspectorControlField({
   return (
     <div
       className={cn(
-        "grid min-h-6 grid-cols-[72px_minmax(0,1fr)] items-center gap-2",
+        "design-inspector-popover-field grid min-h-6 items-center gap-2",
         className,
       )}
     >

package/corpus/templates/design/app/components/design/keyboard-shortcuts.ts

@@ -163,6 +163,15 @@ export const DESIGN_SHORTCUTS: readonly DesignShortcutDefinition[] = [
     labelKey: "designEditor.keyboardShortcuts.commands.toggleComments",
     handler: "onToggleComments",
   }),
+  shortcut({
+    id: "toggle-layout-grids",
+    category: "view",
+    // Literal ctrl, not $mod: Figma uses Control G on Mac and Ctrl Shift 4 on
+    // Windows for this one, so Cmd must not trigger it.
+    bindings: ["ctrl+g", "ctrl+shift+4"],
+    labelKey: "designEditor.keyboardShortcuts.commands.toggleLayoutGrids",
+    handler: "onToggleLayoutGrids",
+  }),
 
   shortcut({
     id: "zoom-in",

package/corpus/templates/design/app/components/design/multi-screen/types.ts

@@ -3,6 +3,7 @@ import type {
   EqualGapGuide,
   FrameBounds,
 } from "@shared/canvas-math";
+import type { LayoutGridById } from "@shared/layout-grid";
 import type { PenCuspLatch, PenPath } from "@shared/pen-path";
 import type { ReactNode } from "react";
 
@@ -205,6 +206,13 @@ export interface MultiScreenCanvasProps {
    * element inside a screen, and this canvas still lists that screen in
    * `selectedIds`. Same veto `onDeleteSelection` uses. */
   onNudgeSelection?: (ids: string[]) => boolean | void;
+  /** The editor's configured small/big arrow-key steps. Board frames and
+   *  in-screen elements must nudge by the same amounts, so this comes from the
+   *  one preference rather than a second default living out here. */
+  nudgeAmounts?: { small: number; big: number };
+  /** Per-frame layout grids, keyed by frame id. A frame with no entry keeps the
+   *  whole-pixel floor. Absent entirely means the host has not loaded them. */
+  layoutGrids?: LayoutGridById;
   onZoomChange?: (zoom: number) => void;
   renderScreenContent?: (
     screen: ScreenFile,

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

@@ -1,6 +1,9 @@
 import {
   AgentSidebar,
+  isAssistantChatHistoryVersion,
   useGuidedQuestionFlow,
+  type AssistantChatHistoryConfig,
+  type AssistantChatHistoryVersion,
 } from "@agent-native/core/client/agent-chat";
 import { getBrowserTabId, useSession } from "@agent-native/core/client/hooks";
 import { isEmbedAuthActive } from "@agent-native/core/client/host";
@@ -108,6 +111,34 @@ export function Layout({ children }: LayoutProps) {
     if (!designId) return null;
     return { type: "design" as const, id: designId };
   }, [location.pathname]);
+  const designChatHistory = useMemo<
+    AssistantChatHistoryConfig | undefined
+  >(() => {
+    if (!designScope) return undefined;
+    const designId = designScope.id;
+    return {
+      list: {
+        action: "list-design-versions",
+        args: { designId, limit: 100 },
+        getVersions: (result: unknown) => {
+          const versions =
+            result && typeof result === "object"
+              ? (result as { versions?: unknown }).versions
+              : undefined;
+          return Array.isArray(versions)
+            ? versions.filter(isAssistantChatHistoryVersion)
+            : [];
+        },
+      },
+      restore: {
+        action: "restore-design-version",
+        args: (version: AssistantChatHistoryVersion) => ({
+          designId,
+          versionId: version.id,
+        }),
+      },
+    };
+  }, [designScope]);
   const designQuestionStateKey = designScope
     ? `show-questions:${designScope.id}`
     : "show-questions";
@@ -188,6 +219,7 @@ export function Layout({ children }: LayoutProps) {
             t("chat.suggestionMobile"),
           ]}
           scope={designScope}
+          chatHistory={designChatHistory}
           showScopeBadge={false}
           browserTabId={browserTabId}
           threadFooterSlot={designQuestionsWaitingSlot}