@agent-native/core 0.122.3 → 0.123.0

package/corpus/templates/design/actions/open-visual-edit.ts

@@ -50,6 +50,83 @@ const capabilitySchema = z.object({
   reason: z.string().optional(),
 });
 
+const VIEWPORT_PRESETS = {
+  // `desktop` deliberately matches add-localhost-screens' 1280x900 fallback so
+  // asking for it never resizes frames placed by an earlier default call.
+  desktop: { label: "Desktop", width: 1280, height: 900 },
+  laptop: { label: "Laptop", width: 1440, height: 900 },
+  tablet: { label: "Tablet", width: 834, height: 1112 },
+  mobile: { label: "Mobile", width: 390, height: 844 },
+} as const;
+
+const viewportSchema = z.union([
+  z.enum(["desktop", "laptop", "tablet", "mobile"]),
+  z.object({
+    label: z.string().optional(),
+    width: z.number().positive(),
+    height: z.number().positive(),
+  }),
+]);
+
+type ViewportInput = z.infer<typeof viewportSchema>;
+interface ResolvedViewport {
+  label: string;
+  width: number;
+  height: number;
+}
+
+function resolveViewports(
+  inputs: ViewportInput[] | undefined,
+): ResolvedViewport[] | undefined {
+  if (!inputs?.length) return undefined;
+  return inputs.map((input) =>
+    typeof input === "string"
+      ? { ...VIEWPORT_PRESETS[input] }
+      : {
+          label: input.label ?? `${Math.round(input.width)}w`,
+          width: input.width,
+          height: input.height,
+        },
+  );
+}
+
+/**
+ * Expand one screen request per (route x viewport) and lay them out as a grid:
+ * one row per route, one column per viewport. Explicit x/y/width/height are
+ * what make add-localhost-screens treat each pair as its own frame instead of
+ * refreshing a single shared one, so they are always set here.
+ */
+function expandRoutesAcrossViewports(args: {
+  routes: Array<z.infer<typeof screenRouteSchema>>;
+  viewports: ResolvedViewport[];
+  startX: number;
+  startY: number;
+  gap: number;
+}): Array<z.infer<typeof screenRouteSchema>> {
+  const labelViewports = args.viewports.length > 1;
+  const expanded: Array<z.infer<typeof screenRouteSchema>> = [];
+  let rowY = args.startY;
+  for (const route of args.routes) {
+    let columnX = args.startX;
+    for (const viewport of args.viewports) {
+      expanded.push({
+        ...route,
+        title: labelViewports
+          ? `${route.title ?? titleFromRoutePath(route.path ?? "/")} — ${viewport.label}`
+          : route.title,
+        width: viewport.width,
+        height: viewport.height,
+        x: columnX,
+        y: rowY,
+      });
+      columnX += viewport.width + args.gap;
+    }
+    rowY +=
+      Math.max(...args.viewports.map((viewport) => viewport.height)) + args.gap;
+  }
+  return expanded;
+}
+
 const routeManifestSchema = z.object({
   version: z.literal(1).optional().default(1),
   sourceType: z.literal("localhost").optional().default("localhost"),
@@ -191,6 +268,11 @@ export default defineAction({
     paths: jsonArray(z.array(z.string()))
       .optional()
       .describe("Shortcut for routes when only paths/URLs are needed."),
+    viewports: jsonArray(z.array(viewportSchema))
+      .optional()
+      .describe(
+        'Place every requested route once per viewport, laid out one row per route and one column per viewport. Use preset names ("desktop", "laptop", "tablet", "mobile") or explicit {label?, width, height}. Example for responsive editing: ["desktop", "mobile"]. Overrides defaultWidth/defaultHeight.',
+      ),
     defaultWidth: z
       .number()
       .positive()
@@ -286,11 +368,38 @@ export default defineAction({
       }
     }
 
+    const viewports = resolveViewports(args.viewports);
+    const requestedRoutes = args.routes?.length
+      ? args.routes
+      : args.paths?.length
+        ? args.paths.map((path) => ({ path }))
+        : viewports
+          ? routeManifest.routes.map((route) => ({
+              routeId: route.id,
+              path: route.path,
+              title: route.title,
+            }))
+          : undefined;
+    if (viewports && !requestedRoutes?.length) {
+      throw new Error(
+        "viewports needs at least one route: pass routes/paths, or connect a bridge whose manifest lists routes.",
+      );
+    }
+
     const screens = await addLocalhostScreensAction.run({
       designId,
       connectionId: connection.id,
-      routes: args.routes,
-      paths: args.paths,
+      routes:
+        viewports && requestedRoutes
+          ? expandRoutesAcrossViewports({
+              routes: requestedRoutes,
+              viewports,
+              startX: args.startX ?? 0,
+              startY: args.startY ?? 0,
+              gap: args.gap ?? 160,
+            })
+          : args.routes,
+      paths: viewports ? undefined : args.paths,
       defaultWidth: args.defaultWidth,
       defaultHeight: args.defaultHeight,
       startX: args.startX,

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

@@ -0,0 +1,236 @@
+import {
+  useActionMutation,
+  useActionQuery,
+} from "@agent-native/core/client/hooks";
+import { useT } from "@agent-native/core/client/i18n";
+import {
+  IconDeviceDesktop,
+  IconDeviceMobile,
+  IconPlus,
+} from "@tabler/icons-react";
+import { useQueryClient } from "@tanstack/react-query";
+import { useMemo, useState } from "react";
+import { toast } from "sonner";
+
+import { Button } from "@/components/ui/button";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/components/ui/command";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { cn } from "@/lib/utils";
+
+type ViewportChoice = "desktop" | "mobile";
+
+const VIEWPORT_SIZES: Record<
+  ViewportChoice,
+  { width: number; height: number }
+> = {
+  desktop: { width: 1280, height: 900 },
+  mobile: { width: 390, height: 844 },
+};
+
+interface LocalhostRouteOption {
+  path: string;
+  title?: string;
+}
+
+function normalizeCustomPath(value: string): string {
+  if (!value || /^https?:\/\//i.test(value)) return value;
+  return value.startsWith("/") ? value : `/${value}`;
+}
+
+export interface AddLocalhostScreenDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  designId: string;
+  connectionId?: string;
+  /** Used only when the connection's route manifest has no routes. */
+  fallbackPaths?: string[];
+  /** Canvas placement for the new frame; defaults to (0, 0). */
+  position?: { x: number; y: number };
+}
+
+export function AddLocalhostScreenDialog({
+  open,
+  onOpenChange,
+  designId,
+  connectionId,
+  fallbackPaths,
+  position,
+}: AddLocalhostScreenDialogProps) {
+  const t = useT();
+  const queryClient = useQueryClient();
+  const [search, setSearch] = useState("");
+  const [viewport, setViewport] = useState<ViewportChoice>("desktop");
+
+  const { data: connectionResult } = useActionQuery<{
+    connections?: Array<{
+      id: string;
+      routes?: Array<{ path: string; title?: string }>;
+    }>;
+  }>("list-localhost-connections", connectionId ? { id: connectionId } : {}, {
+    enabled: open && Boolean(connectionId),
+  });
+
+  const routes = useMemo<LocalhostRouteOption[]>(() => {
+    const manifestRoutes = connectionResult?.connections?.find(
+      (connection) => connection.id === connectionId,
+    )?.routes;
+    if (manifestRoutes && manifestRoutes.length > 0) {
+      return manifestRoutes.map((route) => ({
+        path: route.path,
+        title: route.title,
+      }));
+    }
+    return (fallbackPaths ?? []).map((path) => ({ path }));
+  }, [connectionId, connectionResult, fallbackPaths]);
+
+  const filteredRoutes = useMemo(() => {
+    const query = search.trim().toLowerCase();
+    if (!query) return routes;
+    return routes.filter(
+      (route) =>
+        route.path.toLowerCase().includes(query) ||
+        route.title?.toLowerCase().includes(query),
+    );
+  }, [routes, search]);
+
+  const customPath = normalizeCustomPath(search.trim());
+  const showCustomPathOption =
+    customPath.length > 0 && !routes.some((route) => route.path === customPath);
+
+  const addScreensMutation = useActionMutation("add-localhost-screens");
+
+  const handleAdd = (path: string) => {
+    if (addScreensMutation.isPending) return;
+    const { width, height } = VIEWPORT_SIZES[viewport];
+    addScreensMutation.mutate(
+      {
+        designId,
+        connectionId,
+        routes: [
+          { path, width, height, x: position?.x ?? 0, y: position?.y ?? 0 },
+        ],
+      },
+      {
+        onSuccess: () => {
+          queryClient.invalidateQueries({
+            queryKey: ["action", "get-design"],
+          });
+          toast.success(t("designEditor.addLocalhostScreen.added"));
+          setSearch("");
+          onOpenChange(false);
+        },
+        onError: (error) => {
+          toast.error(
+            error instanceof Error
+              ? error.message
+              : t("designEditor.addLocalhostScreen.addFailed"),
+          );
+        },
+      },
+    );
+  };
+
+  return (
+    <Dialog
+      open={open}
+      onOpenChange={(next) => {
+        if (!next) setSearch("");
+        onOpenChange(next);
+      }}
+    >
+      <DialogContent className="max-w-md p-0">
+        <DialogHeader className="px-4 pt-4">
+          <DialogTitle>
+            {t("designEditor.addLocalhostScreen.title")}
+          </DialogTitle>
+          <DialogDescription>
+            {t("designEditor.addLocalhostScreen.description")}
+          </DialogDescription>
+        </DialogHeader>
+        <div className="flex items-center gap-1 px-4">
+          <Button
+            type="button"
+            size="sm"
+            variant={viewport === "desktop" ? "secondary" : "ghost"}
+            className="cursor-pointer gap-1.5"
+            onClick={() => setViewport("desktop")}
+          >
+            <IconDeviceDesktop className="size-4" />
+            {t("designEditor.addLocalhostScreen.viewportDesktop")}
+          </Button>
+          <Button
+            type="button"
+            size="sm"
+            variant={viewport === "mobile" ? "secondary" : "ghost"}
+            className="cursor-pointer gap-1.5"
+            onClick={() => setViewport("mobile")}
+          >
+            <IconDeviceMobile className="size-4" />
+            {t("designEditor.addLocalhostScreen.viewportMobile")}
+          </Button>
+        </div>
+        <Command shouldFilter={false} className="mt-2 rounded-none border-t">
+          <CommandInput
+            value={search}
+            onValueChange={setSearch}
+            placeholder={t("designEditor.addLocalhostScreen.searchPlaceholder")}
+          />
+          <CommandList>
+            {filteredRoutes.length === 0 && !showCustomPathOption ? (
+              <CommandEmpty>
+                {t("designEditor.addLocalhostScreen.noRoutes")}
+              </CommandEmpty>
+            ) : null}
+            <CommandGroup>
+              {filteredRoutes.map((route) => (
+                <CommandItem
+                  key={route.path}
+                  value={route.path}
+                  className="cursor-pointer"
+                  onSelect={() => handleAdd(route.path)}
+                >
+                  <span className="flex min-w-0 flex-1 flex-col">
+                    <span className="truncate font-medium">{route.path}</span>
+                    {route.title ? (
+                      <span className="truncate text-xs text-muted-foreground">
+                        {route.title}
+                      </span>
+                    ) : null}
+                  </span>
+                </CommandItem>
+              ))}
+              {showCustomPathOption ? (
+                <CommandItem
+                  value={customPath}
+                  className={cn(
+                    "cursor-pointer",
+                    filteredRoutes.length > 0 && "mt-1 border-t pt-2",
+                  )}
+                  onSelect={() => handleAdd(customPath)}
+                >
+                  <IconPlus className="size-4" />
+                  {t("designEditor.addLocalhostScreen.useCustomPath", {
+                    path: customPath,
+                  })}
+                </CommandItem>
+              ) : null}
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </DialogContent>
+    </Dialog>
+  );
+}

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

@@ -4108,7 +4108,7 @@ export function DesignCanvas({
       data-node-rewrite-canvas-target={
         nodeRewriteCanvasTarget ? "true" : undefined
       }
-      className="design-canvas-iframe-wrapper relative inline-block ring-1 ring-border/60 shadow-[0_0_0_1px_rgba(0,0,0,0.04),0_8px_24px_-12px_rgba(0,0,0,0.45)]"
+      className="design-canvas-iframe-wrapper relative inline-block ring-1 ring-border/60"
       onDragEnter={handleWrapperDragEnter}
       onDragOver={handleWrapperDragOver}
       onDragLeave={handleWrapperDragLeave}

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

@@ -9450,7 +9450,7 @@ const Screen = memo(function Screen({
           data-file-drag-over={isFileDragOver || undefined}
           data-cull-tier={cullTier}
           className={cn(
-            "relative block h-full w-full overflow-hidden rounded-[inherit] bg-white shadow-2xl ring-1 ring-inset ring-border transition-colors",
+            "relative block h-full w-full overflow-hidden rounded-[inherit] bg-white ring-1 ring-inset ring-border transition-colors",
             isFileDragOver &&
               "ring-2 ring-[var(--design-editor-accent-color)] ring-inset",
           )}
@@ -10125,7 +10125,7 @@ function BreakpointPreviewRow({
               <span
                 data-screen-content
                 data-cull-tier={cullTier}
-                className="relative block h-full w-full overflow-hidden rounded-[inherit] bg-white shadow-2xl ring-1 ring-inset ring-border"
+                className="relative block h-full w-full overflow-hidden rounded-[inherit] bg-white ring-1 ring-inset ring-border"
                 style={{
                   visibility: isCulled ? "hidden" : undefined,
                   contentVisibility: isCulled ? "hidden" : undefined,

package/corpus/templates/design/app/entry.client.tsx

@@ -1,8 +1,11 @@
 import { captureException } from "@agent-native/core/client/analytics";
 import { appBasePath } from "@agent-native/core/client/api-path";
+import { installRouteChunkRecovery } from "@agent-native/core/client/route-chunk-recovery";
 import { hydrateRoot } from "react-dom/client";
 import { HydratedRouter } from "react-router/dom";
 
+installRouteChunkRecovery();
+
 const basePath = appBasePath();
 const pathname = window.location.pathname;
 const routerBasePath =

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

@@ -969,6 +969,17 @@ const enUS = {
       stay: "Stay here",
       leave: "Leave without applying",
     },
+    addLocalhostScreen: {
+      title: "Add a screen from your app",
+      description: "Pick a route to add as a new frame, or type a path.",
+      searchPlaceholder: "Search routes…",
+      noRoutes: "No matching routes",
+      useCustomPath: 'Add "{{path}}"',
+      viewportDesktop: "Desktop",
+      viewportMobile: "Mobile",
+      added: "Screen added",
+      addFailed: "Could not add screen",
+    },
     nodeRewrite: {
       composerTitle: "Ask or change selection",
       send: "Send",
@@ -11431,6 +11442,165 @@ const designPendingVisualStyleOverrides = {
   },
 } satisfies Record<Exclude<LocaleCode, "en-US">, PartialMessages>;
 
+const designAddLocalhostScreenOverrides = {
+  "zh-TW": {
+    designEditor: {
+      addLocalhostScreen: {
+        title: "從您的應用程式新增畫面",
+        description: "選擇一個路由做為新畫面，或輸入路徑。",
+        searchPlaceholder: "搜尋路由…",
+        noRoutes: "找不到符合的路由",
+        useCustomPath: "新增「{{path}}」",
+        viewportDesktop: "桌面版",
+        viewportMobile: "行動版",
+        added: "已新增畫面",
+        addFailed: "無法新增畫面",
+      },
+    },
+  },
+  "zh-CN": {
+    designEditor: {
+      addLocalhostScreen: {
+        title: "从您的应用添加屏幕",
+        description: "选择一个路由作为新屏幕，或输入路径。",
+        searchPlaceholder: "搜索路由…",
+        noRoutes: "未找到匹配的路由",
+        useCustomPath: "添加“{{path}}”",
+        viewportDesktop: "桌面版",
+        viewportMobile: "移动版",
+        added: "已添加屏幕",
+        addFailed: "无法添加屏幕",
+      },
+    },
+  },
+  "es-ES": {
+    designEditor: {
+      addLocalhostScreen: {
+        title: "Añadir una pantalla desde tu app",
+        description:
+          "Elige una ruta para añadirla como nuevo marco, o escribe una ruta.",
+        searchPlaceholder: "Buscar rutas…",
+        noRoutes: "No hay rutas que coincidan",
+        useCustomPath: 'Añadir "{{path}}"',
+        viewportDesktop: "Escritorio",
+        viewportMobile: "Móvil",
+        added: "Pantalla añadida",
+        addFailed: "No se pudo añadir la pantalla",
+      },
+    },
+  },
+  "fr-FR": {
+    designEditor: {
+      addLocalhostScreen: {
+        title: "Ajouter un écran depuis votre application",
+        description:
+          "Choisissez une route à ajouter comme nouveau cadre, ou saisissez un chemin.",
+        searchPlaceholder: "Rechercher des routes…",
+        noRoutes: "Aucune route correspondante",
+        useCustomPath: "Ajouter « {{path}} »",
+        viewportDesktop: "Bureau",
+        viewportMobile: "Mobile",
+        added: "Écran ajouté",
+        addFailed: "Impossible d’ajouter l’écran",
+      },
+    },
+  },
+  "de-DE": {
+    designEditor: {
+      addLocalhostScreen: {
+        title: "Einen Screen aus deiner App hinzufügen",
+        description:
+          "Wähle eine Route als neuen Rahmen aus oder gib einen Pfad ein.",
+        searchPlaceholder: "Routen durchsuchen…",
+        noRoutes: "Keine passenden Routen",
+        useCustomPath: "„{{path}}“ hinzufügen",
+        viewportDesktop: "Desktop",
+        viewportMobile: "Mobil",
+        added: "Screen hinzugefügt",
+        addFailed: "Screen konnte nicht hinzugefügt werden",
+      },
+    },
+  },
+  "ja-JP": {
+    designEditor: {
+      addLocalhostScreen: {
+        title: "アプリから画面を追加",
+        description:
+          "新しいフレームとして追加するルートを選ぶか、パスを入力してください。",
+        searchPlaceholder: "ルートを検索…",
+        noRoutes: "一致するルートがありません",
+        useCustomPath: "「{{path}}」を追加",
+        viewportDesktop: "デスクトップ",
+        viewportMobile: "モバイル",
+        added: "画面を追加しました",
+        addFailed: "画面を追加できませんでした",
+      },
+    },
+  },
+  "ko-KR": {
+    designEditor: {
+      addLocalhostScreen: {
+        title: "앱에서 화면 추가",
+        description:
+          "새 프레임으로 추가할 경로를 선택하거나 경로를 입력하세요.",
+        searchPlaceholder: "경로 검색…",
+        noRoutes: "일치하는 경로가 없습니다",
+        useCustomPath: '"{{path}}" 추가',
+        viewportDesktop: "데스크톱",
+        viewportMobile: "모바일",
+        added: "화면이 추가되었습니다",
+        addFailed: "화면을 추가할 수 없습니다",
+      },
+    },
+  },
+  "pt-BR": {
+    designEditor: {
+      addLocalhostScreen: {
+        title: "Adicionar uma tela do seu app",
+        description:
+          "Escolha uma rota para adicionar como novo quadro, ou digite um caminho.",
+        searchPlaceholder: "Buscar rotas…",
+        noRoutes: "Nenhuma rota encontrada",
+        useCustomPath: 'Adicionar "{{path}}"',
+        viewportDesktop: "Desktop",
+        viewportMobile: "Celular",
+        added: "Tela adicionada",
+        addFailed: "Não foi possível adicionar a tela",
+      },
+    },
+  },
+  "hi-IN": {
+    designEditor: {
+      addLocalhostScreen: {
+        title: "अपनी app से screen जोड़ें",
+        description: "नए frame के रूप में जोड़ने के लिए एक route चुनें, या path टाइप करें।",
+        searchPlaceholder: "Routes खोजें…",
+        noRoutes: "कोई मेल खाता route नहीं मिला",
+        useCustomPath: '"{{path}}" जोड़ें',
+        viewportDesktop: "Desktop",
+        viewportMobile: "Mobile",
+        added: "Screen जोड़ी गई",
+        addFailed: "Screen नहीं जोड़ी जा सकी",
+      },
+    },
+  },
+  "ar-SA": {
+    designEditor: {
+      addLocalhostScreen: {
+        title: "إضافة شاشة من تطبيقك",
+        description: "اختر مسارًا لإضافته كإطار جديد، أو أدخل مسارًا.",
+        searchPlaceholder: "البحث في المسارات…",
+        noRoutes: "لا توجد مسارات مطابقة",
+        useCustomPath: 'إضافة "{{path}}"',
+        viewportDesktop: "سطح المكتب",
+        viewportMobile: "الجوال",
+        added: "تمت إضافة الشاشة",
+        addFailed: "تعذرت إضافة الشاشة",
+      },
+    },
+  },
+} satisfies Record<Exclude<LocaleCode, "en-US">, PartialMessages>;
+
 const designLeftRailOverrides = {
   "zh-TW": {
     designEditor: {
@@ -14881,6 +15051,7 @@ export const messagesByLocale = {
       designVisualEditOverrides["zh-TW"],
       designTemplateFeatureOverrides["zh-TW"],
       designPendingVisualStyleOverrides["zh-TW"],
+      designAddLocalhostScreenOverrides["zh-TW"],
       designFillStylesComingSoonOverrides["zh-TW"],
       breakpointBarOverrides["zh-TW"],
       motionDockOverrides["zh-TW"],
@@ -14903,6 +15074,7 @@ export const messagesByLocale = {
       designVisualEditOverrides["zh-CN"],
       designTemplateFeatureOverrides["zh-CN"],
       designPendingVisualStyleOverrides["zh-CN"],
+      designAddLocalhostScreenOverrides["zh-CN"],
       designFillStylesComingSoonOverrides["zh-CN"],
       designFramePresetsOverrides["zh-CN"],
       designAlignmentOverrides["zh-CN"],
@@ -14980,6 +15152,7 @@ export const messagesByLocale = {
       designVisualEditOverrides["es-ES"],
       designTemplateFeatureOverrides["es-ES"],
       designPendingVisualStyleOverrides["es-ES"],
+      designAddLocalhostScreenOverrides["es-ES"],
       designFillStylesComingSoonOverrides["es-ES"],
       designFramePresetsOverrides["es-ES"],
       designAlignmentOverrides["es-ES"],
@@ -15059,6 +15232,7 @@ export const messagesByLocale = {
       designVisualEditOverrides["fr-FR"],
       designTemplateFeatureOverrides["fr-FR"],
       designPendingVisualStyleOverrides["fr-FR"],
+      designAddLocalhostScreenOverrides["fr-FR"],
       designFillStylesComingSoonOverrides["fr-FR"],
       designFramePresetsOverrides["fr-FR"],
       designAlignmentOverrides["fr-FR"],
@@ -15138,6 +15312,7 @@ export const messagesByLocale = {
       designVisualEditOverrides["de-DE"],
       designTemplateFeatureOverrides["de-DE"],
       designPendingVisualStyleOverrides["de-DE"],
+      designAddLocalhostScreenOverrides["de-DE"],
       designFillStylesComingSoonOverrides["de-DE"],
       designFramePresetsOverrides["de-DE"],
       designAlignmentOverrides["de-DE"],
@@ -15217,6 +15392,7 @@ export const messagesByLocale = {
       designVisualEditOverrides["ja-JP"],
       designTemplateFeatureOverrides["ja-JP"],
       designPendingVisualStyleOverrides["ja-JP"],
+      designAddLocalhostScreenOverrides["ja-JP"],
       designFillStylesComingSoonOverrides["ja-JP"],
       designFramePresetsOverrides["ja-JP"],
       designAlignmentOverrides["ja-JP"],
@@ -15297,6 +15473,7 @@ export const messagesByLocale = {
       designVisualEditOverrides["ko-KR"],
       designTemplateFeatureOverrides["ko-KR"],
       designPendingVisualStyleOverrides["ko-KR"],
+      designAddLocalhostScreenOverrides["ko-KR"],
       designFillStylesComingSoonOverrides["ko-KR"],
       designFramePresetsOverrides["ko-KR"],
       designAlignmentOverrides["ko-KR"],
@@ -15375,6 +15552,7 @@ export const messagesByLocale = {
       designVisualEditOverrides["pt-BR"],
       designTemplateFeatureOverrides["pt-BR"],
       designPendingVisualStyleOverrides["pt-BR"],
+      designAddLocalhostScreenOverrides["pt-BR"],
       designFillStylesComingSoonOverrides["pt-BR"],
       designFramePresetsOverrides["pt-BR"],
       designAlignmentOverrides["pt-BR"],
@@ -15454,6 +15632,7 @@ export const messagesByLocale = {
       designVisualEditOverrides["hi-IN"],
       designTemplateFeatureOverrides["hi-IN"],
       designPendingVisualStyleOverrides["hi-IN"],
+      designAddLocalhostScreenOverrides["hi-IN"],
       designFillStylesComingSoonOverrides["hi-IN"],
       designFramePresetsOverrides["hi-IN"],
       designAlignmentOverrides["hi-IN"],
@@ -15533,6 +15712,7 @@ export const messagesByLocale = {
       designVisualEditOverrides["ar-SA"],
       designTemplateFeatureOverrides["ar-SA"],
       designPendingVisualStyleOverrides["ar-SA"],
+      designAddLocalhostScreenOverrides["ar-SA"],
       designFillStylesComingSoonOverrides["ar-SA"],
       designFramePresetsOverrides["ar-SA"],
       designAlignmentOverrides["ar-SA"],