@agent-native/core 0.94.3 → 0.95.1

package/corpus/templates/design/app/components/design/MultiScreenCanvas.tsx

@@ -42,6 +42,7 @@ import {
   type PenPath,
 } from "@shared/pen-path";
 import {
+  IconArrowsMaximize,
   IconCopy,
   IconDots,
   IconHandClick,
@@ -393,6 +394,7 @@ export const MultiScreenCanvas = memo(function MultiScreenCanvas({
   hiddenScreenIds = EMPTY_SCREEN_IDS,
   lockedScreenIds = EMPTY_SCREEN_IDS,
   fullViewScreenIds,
+  interactMode = false,
   activeScreenHasHoveredChild = false,
   hoveredChildScreenId,
   directlyHoveredScreenId,
@@ -7531,8 +7533,8 @@ export const MultiScreenCanvas = memo(function MultiScreenCanvas({
                   }}
                   editorChromeScaleX={canvasZoom / 100}
                   editorChromeScaleY={canvasZoom / 100}
-                  editMode={boardEditMode}
-                  interactMode={false}
+                  editMode={boardEditMode && !interactMode}
+                  interactMode={interactMode}
                   scaleMode={boardIsActive && effectiveTool === "scale"}
                   clearSelectionRequest={boardClearSelectionRequest}
                   selectedSelector={
@@ -7602,6 +7604,7 @@ export const MultiScreenCanvas = memo(function MultiScreenCanvas({
                 !isBreakpointSelectionTarget(screen)
               }
               showFullView={fullViewIdSet.has(screen.id)}
+              interactMode={interactMode}
               isDirectlyHovered={screen.id === directlyHoveredScreenId}
               isFileDragOver={
                 fileDragOverFrameId !== null &&
@@ -8859,6 +8862,7 @@ interface ScreenProps {
   isSelected: boolean;
   isTopScreen: boolean;
   showFullView: boolean;
+  interactMode: boolean;
   isDirectlyHovered: boolean;
   /** True while a native OS file drag is hovering this frame (Figma parity §1). */
   isFileDragOver: boolean;
@@ -8926,6 +8930,7 @@ const Screen = memo(function Screen({
   isSelected,
   isTopScreen,
   showFullView,
+  interactMode,
   isDirectlyHovered,
   isFileDragOver,
   hasHoveredChild,
@@ -9022,9 +9027,12 @@ const Screen = memo(function Screen({
   const frameLabelHeight = FRAME_LABEL_HEIGHT * chromeScale;
   const frameScreenWidth = geometry.width / Math.max(chromeScale, 0.001);
   // Keep frame actions inside their own frame so closely spaced screens cannot
-  // cover one another. Narrow frames collapse Interact to its familiar icon;
+  // cover one another. Narrow frames collapse the action to its familiar icon;
   // the accessible name and native tooltip preserve the action's meaning.
   const compactFullView = frameScreenWidth < FRAME_HEADER_BUTTON_COMPACT_WIDTH;
+  const frameActionLabel = interactMode
+    ? t("multiScreenCanvas.fullView")
+    : t("designEditor.modes.interact");
   const labelInfoMaxWidth = Math.max(
     64,
     frameScreenWidth -
@@ -9157,8 +9165,8 @@ const Screen = memo(function Screen({
             transformOrigin: "right center",
             transition: getChromeLabelTransition(chromeSettling),
           }}
-          aria-label={t("designEditor.modes.interact")}
-          title={t("designEditor.modes.interact")}
+          aria-label={frameActionLabel}
+          title={frameActionLabel}
           onClick={(event) => onEdit(screen.id, event)}
           onMouseDown={(event) => {
             event.preventDefault();
@@ -9167,9 +9175,13 @@ const Screen = memo(function Screen({
           onMouseEnter={() => updateDirectHover(true)}
           onMouseLeave={() => updateDirectHover(false)}
         >
-          <IconHandClick className="size-3 shrink-0" />
+          {interactMode ? (
+            <IconArrowsMaximize className="size-3 shrink-0" />
+          ) : (
+            <IconHandClick className="size-3 shrink-0" />
+          )}
           <span className={cn("truncate", compactFullView && "sr-only")}>
-            {t("designEditor.modes.interact")}
+            {frameActionLabel}
           </span>
         </button>
       </div>
@@ -9394,6 +9406,7 @@ const Screen = memo(function Screen({
           renderBreakpointContent={renderBreakpointContent}
           activeBreakpointWidth={screen.activeBreakpointWidth}
           isScreenSelected={isSelected}
+          interactMode={interactMode}
           penActive={penActive}
           creationToolActive={creationToolActive}
           cullTier={cullTier}
@@ -9518,6 +9531,7 @@ function BreakpointPreviewRow({
   renderBreakpointContent,
   activeBreakpointWidth,
   isScreenSelected,
+  interactMode,
   penActive,
   creationToolActive,
   cullTier,
@@ -9559,6 +9573,7 @@ function BreakpointPreviewRow({
    *  mirrors `Screen`'s own `isSelected`, used so a breakpoint frame's chrome
    *  reads as "part of a selected group" the same way the base frame does. */
   isScreenSelected: boolean;
+  interactMode: boolean;
   penActive: boolean;
   creationToolActive: boolean;
   /** Uses the owning screen's exact culling lifecycle: never-seen/evicted
@@ -9595,6 +9610,9 @@ function BreakpointPreviewRow({
   canEdit?: boolean;
 }) {
   const t = useT();
+  const frameActionLabel = interactMode
+    ? t("multiScreenCanvas.fullView")
+    : t("designEditor.modes.interact");
   const breakpointWidths = screen.breakpointWidths ?? [];
   // Place additional frames to the right of the primary, starting after the gap
   let offsetX = primaryGeometry.width + BREAKPOINT_FRAME_GAP;
@@ -9884,8 +9902,8 @@ function BreakpointPreviewRow({
                     transform: `scale(${chromeScale})`,
                     transformOrigin: "right center",
                   }}
-                  aria-label={t("designEditor.modes.interact")}
-                  title={t("designEditor.modes.interact")}
+                  aria-label={frameActionLabel}
+                  title={frameActionLabel}
                   onClick={(e) => {
                     e.stopPropagation();
                     activateThisFrame(e);
@@ -9896,7 +9914,11 @@ function BreakpointPreviewRow({
                     e.stopPropagation();
                   }}
                 >
-                  <IconHandClick className="size-3" />
+                  {interactMode ? (
+                    <IconArrowsMaximize className="size-3" />
+                  ) : (
+                    <IconHandClick className="size-3" />
+                  )}
                 </button>
               ) : null}
               <span

package/corpus/templates/design/app/components/design/QuestionFlow.tsx

@@ -340,7 +340,7 @@ function OptionButton({
         compact ? "px-2.5 py-1.5" : "px-3 py-2",
         selected
           ? "border-[var(--design-editor-accent-color)] bg-[var(--design-editor-selection-color)] text-foreground"
-          : "border-[var(--design-editor-control-border)] bg-[var(--design-editor-control-bg)] text-foreground hover:bg-[var(--design-editor-panel-raised-bg)]",
+          : "border-[var(--design-editor-control-border)] bg-[var(--design-editor-question-option-bg)] text-foreground hover:bg-[var(--design-editor-control-bg)]",
       )}
     >
       <span
@@ -418,7 +418,7 @@ function ColorOptions({
               "group inline-flex min-h-8 min-w-0 max-w-full cursor-pointer items-center gap-2 rounded-md border px-2.5 py-1.5 text-start transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-[var(--design-editor-accent-color)] focus-visible:ring-offset-0",
               selected
                 ? "border-[var(--design-editor-accent-color)] bg-[var(--design-editor-selection-color)] text-foreground"
-                : "border-[var(--design-editor-control-border)] bg-[var(--design-editor-control-bg)] text-foreground hover:bg-[var(--design-editor-panel-raised-bg)]",
+                : "border-[var(--design-editor-control-border)] bg-[var(--design-editor-question-option-bg)] text-foreground hover:bg-[var(--design-editor-control-bg)]",
             )}
           >
             <span

package/corpus/templates/design/app/components/design/TweaksPanel.tsx

@@ -77,7 +77,15 @@ export function TweaksPanelContent({
         data-tweaks-help
         className="mt-2 border-t border-border/60 pt-2 !text-[10px] leading-relaxed text-muted-foreground/70"
       >
-        {t("designEditor.tweaksHelp")}
+        {t("designEditor.tweaksHelp")}{" "}
+        <a
+          href="/docs/template-design#tweaks"
+          target="_blank"
+          rel="noreferrer"
+          className="font-medium text-foreground/80 underline-offset-2 hover:text-foreground hover:underline"
+        >
+          {t("designEditor.tweaksDocs")}
+        </a>
       </p>
     </div>
   );

package/corpus/templates/design/app/components/design/bridge/editor-chrome.bridge.ts

@@ -910,10 +910,12 @@ declare var __RUNTIME_LAYER_SNAPSHOT_ENABLED__: boolean;
 
   function selectionTargetForHit(hit: Element | null): Element | null {
     if (!hit || isDocumentRootElement(hit)) return hit;
-    if (selectedEl && hit !== selectedEl && selectedEl.contains(hit))
-      return hit;
-    if (hasStableOwnSource(hit)) return hit;
-    return closestStableSourceElement(hit) || hit;
+    // Select the deepest element under the pointer on the first click. The
+    // bridge can mint a pending node id and build a source-equivalent selector
+    // for id-less descendants, so climbing to the nearest tagged ancestor is
+    // no longer necessary and makes ordinary list labels select their parent
+    // container instead.
+    return hit;
   }
 
   function freshRuntimeNodeId(prefix: string): string {
@@ -1929,7 +1931,7 @@ declare var __RUNTIME_LAYER_SNAPSHOT_ENABLED__: boolean;
   var transformBadge = document.createElement("div");
   transformBadge.setAttribute("data-agent-native-transform-badge", "");
   transformBadge.style.cssText =
-    "position:fixed;z-index:100000;display:none;pointer-events:none;border:1px solid hsl(var(--border));border-radius:4px;background:hsl(var(--background) / 0.96);color:hsl(var(--foreground));font:11px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;padding:3px 5px;box-shadow:0 8px 20px color-mix(in srgb, hsl(var(--foreground)) 16%, transparent);";
+    "position:fixed;z-index:100000;display:none;pointer-events:none;border:1px solid rgba(255,255,255,0.16);border-radius:4px;background:rgba(24,24,27,0.96);color:rgba(255,255,255,0.96);font:11px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;padding:3px 5px;box-shadow:0 8px 20px rgba(0,0,0,0.28);";
   document.body.appendChild(transformBadge);
 
   var spacingBadge = document.createElement("div");

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

@@ -130,6 +130,9 @@ export interface MultiScreenCanvasProps {
    * transformed directly from the overview canvas. */
   lockedScreenIds?: ReadonlySet<string> | readonly string[];
   fullViewScreenIds?: string[];
+  /** Lets every live frame receive native pointer interaction while the
+   * overview camera and frame chrome remain available. */
+  interactMode?: boolean;
   activeScreenHasHoveredChild?: boolean;
   hoveredChildScreenId?: string | null;
   directlyHoveredScreenId?: string | null;

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

@@ -84,6 +84,11 @@
   --design-editor-panel-raised-bg: hsl(var(--secondary));
   --design-editor-control-bg: hsl(var(--muted));
   --design-editor-control-border: hsl(var(--border));
+  --design-editor-question-option-bg: color-mix(
+    in srgb,
+    var(--design-editor-control-bg) 58%,
+    transparent
+  );
   --design-editor-canvas-bg: hsl(0 0% 92%);
   --design-editor-skeleton-canvas-bg: hsl(0 0% 92%);
   --design-editor-skeleton-panel-ghost-bg: color-mix(
@@ -162,6 +167,11 @@
   --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-question-option-bg: color-mix(
+    in srgb,
+    var(--design-editor-control-bg) 58%,
+    transparent
+  );
   --design-editor-canvas-bg: hsl(0 0% 10%);
   --design-editor-skeleton-canvas-bg: hsl(0 0% 11%);
 }

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

@@ -16,6 +16,9 @@ function designQuestionsStateKey(designId: string | undefined): string {
   return designId ? `show-questions:${designId}` : "show-questions";
 }
 
+const RESPONSIVE_GENERATION_REQUIREMENTS =
+  'Responsive behavior is mandatory for every web design. Read the form-factor answer above: for Desktop or Both/responsive, call generate-design with `primaryViewport: "desktop"` and a 1440x1024 canvas frame; use `primaryViewport: "mobile"` only for an explicitly mobile-primary choice. Use mobile-first responsive CSS, then take desktop and mobile screenshots and fix any overflow before reporting the design complete.';
+
 /**
  * Polls design-scoped question state. When the agent writes structured
  * questions, the editor surfaces a full-canvas overlay for only this design.
@@ -40,6 +43,8 @@ export function useQuestionFlow(
         "Answers:",
         formattedAnswers,
         "",
+        RESPONSIVE_GENERATION_REQUIREMENTS,
+        "",
         designId
           ? 'Now continue the design. Honor any answer about variations: if the user asked to explore options, call present-design-variants with 2-5 concise directions using label, description, accentColor, and feature bullets; omit large content HTML when needed because the action can render compact representative screens - wait for their chat pick, delete each unchosen variant screen at most once, call get-design-snapshot exactly once with fileId for the kept screen, then call edit-design exactly once on that same fileId in a bounded pass. Use mode "replace-file" when expanding the representative placeholder into a complete but compact product UI in the chosen direction. Prioritize the primary workflow and render secondary details as visible controls, states, or affordances if the feature list is too large for one reliable edit. Do not repeat delete/snapshot cycles. Do not call generate-design after a variant pick. Stop after the first successful edit-design save. 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.",
@@ -89,6 +94,8 @@ export function useQuestionFlow(
         "Answers:",
         formattedAnswers,
         "",
+        RESPONSIVE_GENERATION_REQUIREMENTS,
+        "",
         designId
           ? 'Now continue the design. Honor any answer about variations: if the user asked to explore options, call present-design-variants with 2-5 concise directions using label, description, accentColor, and feature bullets; omit large content HTML when needed because the action can render compact representative screens - wait for their chat pick, delete each unchosen variant screen at most once, call get-design-snapshot exactly once with fileId for the kept screen, then call edit-design exactly once on that same fileId in a bounded pass. Use mode "replace-file" when expanding the representative placeholder into a complete but compact product UI in the chosen direction. Prioritize the primary workflow and render secondary details as visible controls, states, or affordances if the feature list is too large for one reliable edit. Do not repeat delete/snapshot cycles. Do not call generate-design after a variant pick. Stop after the first successful edit-design save. 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.",
@@ -105,8 +112,8 @@ export function useQuestionFlow(
     sendContinuation(
       "Skip the questions — decide for me.",
       designId
-        ? `The user skipped the pre-generation questions for design ${designId}. Proceed with reasonable defaults. Generate one polished first direction unless the original prompt explicitly requested options.`
-        : "The user skipped the pre-generation questions. Proceed with reasonable defaults. Generate one polished first direction unless the original prompt explicitly requested options.",
+        ? `The user skipped the pre-generation questions for design ${designId}. Proceed with reasonable defaults. ${RESPONSIVE_GENERATION_REQUIREMENTS} Generate one polished first direction unless the original prompt explicitly requested options.`
+        : `The user skipped the pre-generation questions. Proceed with reasonable defaults. ${RESPONSIVE_GENERATION_REQUIREMENTS} Generate one polished first direction unless the original prompt explicitly requested options.`,
     );
   }, [designId, sendContinuation]);
 

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

@@ -699,6 +699,7 @@ const messages = {
     closeTweaks: "關閉調整",
     tweaksHelp:
       "調整項是疊加在基礎設計上的中斷點與狀態專屬視覺覆寫。重設控制項可回到繼承值。",
+    tweaksDocs: "深入瞭解。",
     noTweakControls: "還沒有調整控制項。",
     extensions: "擴充功能",
     addExtension: "擴充功能",

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

@@ -846,6 +846,7 @@ const enUS = {
     closeTweaks: "Close tweaks",
     tweaksHelp:
       "Tweaks are breakpoint- and state-specific visual overrides layered on the base design. Reset a control to return to the inherited value.",
+    tweaksDocs: "Learn more.",
     noTweakControls: "No tweak controls yet.",
     extensions: "Extensions",
     addExtension: "Extension",
@@ -1041,7 +1042,7 @@ const enUS = {
   multiScreenCanvas: {
     duplicate: "Duplicate",
     fork: "Fork",
-    fullView: "Interact",
+    fullView: "Full view",
     preview: "Preview",
     openAndDuplicate: "Select {{display}}. Use Interact for focused scrolling.",
     openAndPreview: "Select {{display}}. Use Interact for focused scrolling.",
@@ -5339,6 +5340,7 @@ const designRawLiteralOverrides = {
       addTweaks: "添加调整",
       addTweakControls: "添加调整控件",
       closeTweaks: "关闭调整",
+      tweaksDocs: "了解详情。",
       noTweakControls: "还没有调整控件。",
       extensions: "扩展",
       addExtension: "扩展",
@@ -5494,6 +5496,7 @@ const designRawLiteralOverrides = {
       addTweaks: "Agregar ajustes",
       addTweakControls: "Agregar controles de ajuste",
       closeTweaks: "Cerrar ajustes",
+      tweaksDocs: "Más información.",
       noTweakControls: "Aún no hay controles de ajuste.",
       extensions: "Extensiones",
       addExtension: "Extensión",
@@ -5654,6 +5657,7 @@ const designRawLiteralOverrides = {
       addTweaks: "Ajouter des ajustements",
       addTweakControls: "Ajouter des contrôles de réglage",
       closeTweaks: "Fermer les réglages",
+      tweaksDocs: "En savoir plus.",
       noTweakControls: "Pas encore de contrôles de réglage.",
       extensions: "Extensions",
       addExtension: "Extension",
@@ -5814,6 +5818,7 @@ const designRawLiteralOverrides = {
       addTweaks: "Fügen Sie Optimierungen hinzu",
       addTweakControls: "Fügen Sie Optimierungssteuerelemente hinzu",
       closeTweaks: "Enge Optimierungen",
+      tweaksDocs: "Mehr erfahren.",
       noTweakControls: "Noch keine Optimierungssteuerung.",
       extensions: "Erweiterungen",
       addExtension: "Erweiterung",
@@ -5975,6 +5980,7 @@ const designRawLiteralOverrides = {
       addTweaks: "微調整を追加する",
       addTweakControls: "微調整コントロールを追加する",
       closeTweaks: "微調整を閉じる",
+      tweaksDocs: "詳細を見る。",
       noTweakControls: "まだ調整コントロールはありません。",
       extensions: "拡張機能",
       addExtension: "拡張機能",
@@ -6131,6 +6137,7 @@ const designRawLiteralOverrides = {
       addTweaks: "조정 추가",
       addTweakControls: "조정 컨트롤 추가",
       closeTweaks: "조정 닫기",
+      tweaksDocs: "자세히 알아보기.",
       noTweakControls: "아직 조정 컨트롤이 없습니다.",
       extensions: "확장",
       addExtension: "확장",
@@ -6286,6 +6293,7 @@ const designRawLiteralOverrides = {
       addTweaks: "Adicionar ajustes",
       addTweakControls: "Adicionar controles de ajuste",
       closeTweaks: "Fechar ajustes",
+      tweaksDocs: "Saiba mais.",
       noTweakControls: "Nenhum controle de ajuste ainda.",
       extensions: "Extensões",
       addExtension: "Extensão",
@@ -6446,6 +6454,7 @@ const designRawLiteralOverrides = {
       addTweaks: "बदलाव जोड़ें",
       addTweakControls: "ट्विक नियंत्रण जोड़ें",
       closeTweaks: "बदलाव बंद करें",
+      tweaksDocs: "और जानें।",
       noTweakControls: "अभी तक कोई ट्विक नियंत्रण नहीं है.",
       extensions: "एक्सटेंशन",
       addExtension: "एक्सटेंशन",
@@ -6601,6 +6610,7 @@ const designRawLiteralOverrides = {
       addTweaks: "أضف تعديلات",
       addTweakControls: "إضافة الضوابط القرص",
       closeTweaks: "إغلاق القرص",
+      tweaksDocs: "معرفة المزيد.",
       noTweakControls: "لا توجد ضوابط قرص حتى الآن.",
       extensions: "الإضافات",
       addExtension: "إضافة",
@@ -7709,7 +7719,7 @@ const designModeFeatureOverrides = {
     multiScreenCanvas: {
       duplicate: "複製",
       fork: "分支",
-      fullView: "互動",
+      fullView: "完整檢視",
       preview: "預覽",
       openAndDuplicate: "選取 {{display}}。使用互動模式進行聚焦捲動。",
       openAndPreview: "選取 {{display}}。使用互動模式進行聚焦捲動。",
@@ -7873,7 +7883,7 @@ const designModeFeatureOverrides = {
     multiScreenCanvas: {
       duplicate: "复制",
       fork: "分支",
-      fullView: "互动",
+      fullView: "完整视图",
       preview: "预览",
       openAndDuplicate: "选择 {{display}}。使用互动模式进行聚焦滚动。",
       openAndPreview: "选择 {{display}}。使用互动模式进行聚焦滚动。",
@@ -8038,7 +8048,7 @@ const designModeFeatureOverrides = {
     multiScreenCanvas: {
       duplicate: "Duplicar",
       fork: "Bifurcar",
-      fullView: "Interactuar",
+      fullView: "Vista completa",
       preview: "Vista previa",
       openAndDuplicate:
         "Selecciona {{display}}. Usa Interactuar para desplazamiento enfocado.",
@@ -8224,7 +8234,7 @@ const designModeFeatureOverrides = {
     multiScreenCanvas: {
       duplicate: "Dupliquer",
       fork: "Créer une branche",
-      fullView: "Interagir",
+      fullView: "Vue complète",
       preview: "Aperçu",
       openAndDuplicate:
         "Sélectionner {{display}}. Utilisez Interagir pour le défilement ciblé.",
@@ -8407,7 +8417,7 @@ const designModeFeatureOverrides = {
     multiScreenCanvas: {
       duplicate: "Duplizieren",
       fork: "Abzweigen",
-      fullView: "Interagieren",
+      fullView: "Vollansicht",
       preview: "Vorschau",
       openAndDuplicate:
         "{{display}} auswählen. Verwenden Sie Interagieren zum fokussierten Scrollen.",
@@ -8595,7 +8605,7 @@ const designModeFeatureOverrides = {
     multiScreenCanvas: {
       duplicate: "複製",
       fork: "分岐",
-      fullView: "操作",
+      fullView: "全体表示",
       preview: "プレビュー",
       openAndDuplicate:
         "{{display}} を選択します。集中してスクロールするには操作モードを使用。",
@@ -8778,7 +8788,7 @@ const designModeFeatureOverrides = {
     multiScreenCanvas: {
       duplicate: "복제",
       fork: "분기",
-      fullView: "상호작용",
+      fullView: "전체 보기",
       preview: "미리보기",
       openAndDuplicate:
         "{{display}} 선택. 집중 스크롤에는 상호작용 모드를 사용하세요.",
@@ -8958,7 +8968,7 @@ const designModeFeatureOverrides = {
     multiScreenCanvas: {
       duplicate: "Duplicar",
       fork: "Ramificar",
-      fullView: "Interagir",
+      fullView: "Vista completa",
       preview: "Prévia",
       openAndDuplicate:
         "Selecione {{display}}. Use Interagir para rolagem focada.",
@@ -9138,7 +9148,7 @@ const designModeFeatureOverrides = {
     multiScreenCanvas: {
       duplicate: "डुप्लिकेट",
       fork: "फोर्क",
-      fullView: "इंटरैक्ट करें",
+      fullView: "पूर्ण दृश्य",
       preview: "पूर्वावलोकन",
       openAndDuplicate:
         "{{display}} चुनें। केंद्रित स्क्रॉलिंग के लिए इंटरैक्ट मोड का उपयोग करें।",
@@ -9318,7 +9328,7 @@ const designModeFeatureOverrides = {
     multiScreenCanvas: {
       duplicate: "تكرار",
       fork: "تفريع",
-      fullView: "تفاعل",
+      fullView: "عرض كامل",
       preview: "معاينة",
       openAndDuplicate: "حدد {{display}}. استخدم وضع التفاعل للتمرير المركّز.",
       openAndPreview: "حدد {{display}}. استخدم وضع التفاعل للتمرير المركّز.",

package/corpus/templates/design/changelog/2026-07-10-editor-panels-are-easier-to-distinguish-and-design-intake-qu.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-07-10
+---
+
+Editor panels are easier to distinguish, and design-intake questions stay visible while choosing options.

package/corpus/templates/design/changelog/2026-07-10-interact-mode-now-stays-on-the-full-canvas-matches-edit-visu.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-07-10
+---
+
+Interact mode now stays on the full canvas, matches Edit visuals, and selects nested elements directly.

package/corpus/templates/design/changelog/2026-07-10-new-web-designs-open-at-desktop-size-and-adapt-across-mobile.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-07-10
+---
+
+New web designs open at desktop size and adapt across mobile and tablet breakpoints.

package/corpus/templates/design/changelog/2026-07-10-tweaks-now-link-to-full-documentation.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-07-10
+---
+
+Tweaks now explain how responsive and state overrides work and link to full documentation.

package/corpus/templates/design/server/plugins/agent-chat.ts

@@ -54,6 +54,8 @@ export default createAgentChatPlugin({
 
 When the user asks for a new design and the current navigation view is list, settings, design-systems, or otherwise has no designId, create a new design first. Do not reuse, delete screens from, or edit a previous design unless the user explicitly names that design or the current navigation state is an editor/present view with that designId.
 
+Every web design must be responsive. Use mobile-first CSS, a viewport meta tag, and responsive layout changes for narrow widths; never ship a fixed-width desktop shell. Desktop is the default primary artboard: use a 1440×1024 canvas frame (or primaryViewport "desktop") unless the user explicitly asks for a mobile- or tablet-primary design. After generation, inspect desktop and mobile screenshots and correct overflow or broken reflow before reporting completion.
+
 When the user asks to start from a template, call list-design-templates and then create-design-from-template. The copied files and canvas dimensions are already the starting point. If the user also supplied a prompt, call get-design-snapshot once and refine unlocked content with edit-design; do not call generate-design or replace the template with a fresh screen. Layers marked data-agent-native-locked="true" and their descendants must remain byte-for-byte unchanged. Ask the user to unlock one explicitly if they want it changed.
 
 When the user asks you to refine an existing design, call view-screen if the open design is unclear, then read the live current file with get-design-snapshot before editing. For small localized changes, call edit-design with exact search/replace edits. For broad copy-only changes such as translating all visible text, call edit-design in replace-file mode with the complete updated file content from the snapshot so the HTML structure, scripts, styles, and tweaks are preserved without dozens of fragile search blocks. Do not claim the design is updated until the mutating action succeeds.

package/corpus/templates/mail/app/i18n/ar-SA.ts

@@ -515,10 +515,10 @@ const messages = {
     slackUpdateFailed: "فشل تحديث استقبال Slack",
     slackConfigured: "تم تكوين بيانات اعتماد Slack.",
     slackNeedsCredentials:
-      "أضف SLACK_BOT_TOKEN و SLACK_SIGNING_SECRET لتفعيل استقبال Slack.",
-    slackIntake: "استقبال Slack",
+      "يتطلب الاستقبال المخصص القديم SLACK_BOT_TOKEN وSLACK_SIGNING_SECRET. لأتمتة مراسلة Slack الجديدة، اربط مساحة عمل في الإعدادات > المراسلة.",
+    slackIntake: "استقبال Slack (قديم)",
     slackDescription:
-      "اسمح لأعضاء المؤسسة بوضع مسودات البريد في قائمة الانتظار من Slack.",
+      "تكامل مخصص قديم يتيح لأعضاء المؤسسة وضع مسودات البريد في قائمة الانتظار من Slack.",
     enabled: "ممكّن",
     disable: "تعطيل",
     enable: "تمكين",

package/corpus/templates/mail/app/i18n/de-DE.ts

@@ -523,10 +523,10 @@ const messages = {
     slackUpdateFailed: "Slack-Eingang konnte nicht aktualisiert werden",
     slackConfigured: "Slack-Anmeldedaten sind konfiguriert.",
     slackNeedsCredentials:
-      "Füge SLACK_BOT_TOKEN und SLACK_SIGNING_SECRET hinzu, um Slack-Eingang zu aktivieren.",
-    slackIntake: "Slack-Eingang",
+      "Der alte benutzerdefinierte Eingang benötigt SLACK_BOT_TOKEN und SLACK_SIGNING_SECRET. Verbinde für neue Slack-Nachrichtenautomatisierungen einen Workspace unter Einstellungen > Messaging.",
+    slackIntake: "Slack-Eingang (veraltet)",
     slackDescription:
-      "Ermöglicht Organisationsmitgliedern, E-Mail-Entwürfe aus Slack einzureihen.",
+      "Veraltete benutzerdefinierte Integration, mit der Organisationsmitglieder E-Mail-Entwürfe aus Slack einreihen können.",
     enabled: "Aktiviert",
     disable: "Deaktivieren",
     enable: "Aktivieren",

package/corpus/templates/mail/app/i18n/en-US.ts

@@ -513,9 +513,10 @@ const messages = {
     slackUpdateFailed: "Failed to update Slack intake",
     slackConfigured: "Slack credentials are configured.",
     slackNeedsCredentials:
-      "Add SLACK_BOT_TOKEN and SLACK_SIGNING_SECRET to enable Slack intake.",
-    slackIntake: "Slack Intake",
-    slackDescription: "Let organization members queue email drafts from Slack.",
+      "Legacy custom intake requires SLACK_BOT_TOKEN and SLACK_SIGNING_SECRET. For new Slack messaging automations, connect a workspace in Settings > Messaging.",
+    slackIntake: "Slack Intake (legacy)",
+    slackDescription:
+      "Legacy custom integration that lets organization members queue email drafts from Slack.",
     enabled: "Enabled",
     disable: "Disable",
     enable: "Enable",

package/corpus/templates/mail/app/i18n/es-ES.ts

@@ -522,10 +522,10 @@ const messages = {
     slackUpdateFailed: "No se pudo actualizar la entrada de Slack",
     slackConfigured: "Las credenciales de Slack están configuradas.",
     slackNeedsCredentials:
-      "Añade SLACK_BOT_TOKEN y SLACK_SIGNING_SECRET para habilitar la entrada de Slack.",
-    slackIntake: "Entrada de Slack",
+      "La entrada personalizada antigua requiere SLACK_BOT_TOKEN y SLACK_SIGNING_SECRET. Para nuevas automatizaciones de mensajería de Slack, conecta un espacio de trabajo en Configuración > Mensajería.",
+    slackIntake: "Entrada de Slack (antigua)",
     slackDescription:
-      "Permite que miembros de la organización pongan borradores de correo en cola desde Slack.",
+      "Integración personalizada antigua que permite poner borradores de correo en cola desde Slack.",
     enabled: "Activado",
     disable: "Desactivar",
     enable: "Activar",

package/corpus/templates/mail/app/i18n/fr-FR.ts

@@ -523,10 +523,10 @@ const messages = {
     slackUpdateFailed: "Échec de la mise à jour de l’entrée Slack",
     slackConfigured: "Les identifiants Slack sont configurés.",
     slackNeedsCredentials:
-      "Ajoutez SLACK_BOT_TOKEN et SLACK_SIGNING_SECRET pour activer l’entrée Slack.",
-    slackIntake: "Entrée Slack",
+      "L’entrée personnalisée héritée nécessite SLACK_BOT_TOKEN et SLACK_SIGNING_SECRET. Pour les nouvelles automatisations de messagerie Slack, connectez un espace de travail dans Paramètres > Messagerie.",
+    slackIntake: "Entrée Slack (héritée)",
     slackDescription:
-      "Permet aux membres de l’organisation de mettre en file des brouillons depuis Slack.",
+      "Intégration personnalisée héritée permettant de mettre en file des brouillons depuis Slack.",
     enabled: "Activé",
     disable: "Désactiver",
     enable: "Activer",

package/corpus/templates/mail/app/i18n/hi-IN.ts

@@ -516,10 +516,10 @@ const messages = {
     slackUpdateFailed: "Slack intake update करने में विफल",
     slackConfigured: "Slack credentials configured हैं।",
     slackNeedsCredentials:
-      "Slack intake सक्षम करने के लिए SLACK_BOT_TOKEN और SLACK_SIGNING_SECRET जोड़ें।",
-    slackIntake: "Slack intake",
+      "Legacy custom intake के लिए SLACK_BOT_TOKEN और SLACK_SIGNING_SECRET आवश्यक हैं। नए Slack messaging automations के लिए Settings > Messaging में workspace connect करें।",
+    slackIntake: "Slack intake (legacy)",
     slackDescription:
-      "Organization members को Slack से email drafts queue करने दें।",
+      "Legacy custom integration जो organization members को Slack से email drafts queue करने देता है।",
     enabled: "सक्षम",
     disable: "अक्षम करें",
     enable: "सक्षम करें",

package/corpus/templates/mail/app/i18n/ja-JP.ts

@@ -516,10 +516,10 @@ const messages = {
     slackUpdateFailed: "Slack 取り込みを更新できませんでした",
     slackConfigured: "Slack 認証情報は設定済みです。",
     slackNeedsCredentials:
-      "Slack 取り込みを有効にするには SLACK_BOT_TOKEN と SLACK_SIGNING_SECRET を追加してください。",
-    slackIntake: "Slack 取り込み",
+      "従来のカスタム取り込みには SLACK_BOT_TOKEN と SLACK_SIGNING_SECRET が必要です。新しい Slack メッセージ自動化では、設定 > メッセージングでワークスペースを接続してください。",
+    slackIntake: "Slack 取り込み（レガシー）",
     slackDescription:
-      "組織メンバーが Slack からメール下書きをキューに入れられます。",
+      "組織メンバーが Slack からメール下書きをキューに入れられる従来のカスタム連携です。",
     enabled: "有効",
     disable: "無効化",
     enable: "有効化",

package/corpus/templates/mail/app/i18n/ko-KR.ts

@@ -517,10 +517,10 @@ const messages = {
     slackUpdateFailed: "Slack 수신 설정을 업데이트하지 못했습니다",
     slackConfigured: "Slack 자격 증명이 구성되었습니다.",
     slackNeedsCredentials:
-      "Slack 수신을 활성화하려면 SLACK_BOT_TOKEN 및 SLACK_SIGNING_SECRET을 추가하세요.",
-    slackIntake: "Slack 수신",
+      "레거시 사용자 지정 수신에는 SLACK_BOT_TOKEN 및 SLACK_SIGNING_SECRET이 필요합니다. 새 Slack 메시징 자동화는 설정 > 메시징에서 워크스페이스를 연결하세요.",
+    slackIntake: "Slack 수신(레거시)",
     slackDescription:
-      "조직 구성원이 Slack에서 이메일 초안을 대기열에 추가할 수 있습니다.",
+      "조직 구성원이 Slack에서 이메일 초안을 대기열에 추가할 수 있는 레거시 사용자 지정 통합입니다.",
     enabled: "활성화됨",
     disable: "비활성화",
     enable: "활성화",