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

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

@@ -1,9 +1,8 @@
-import { appPath } from "@agent-native/core/client/api-path";
 import { DevDatabaseLink } from "@agent-native/core/client/db-admin";
 import { useT } from "@agent-native/core/client/i18n";
 import { openCommandMenu } from "@agent-native/core/client/navigation";
 import { OrgSwitcher } from "@agent-native/core/client/org";
-import { FeedbackButton } from "@agent-native/core/client/ui";
+import { AgentNativeIcon, FeedbackButton } from "@agent-native/core/client/ui";
 import { SidebarFooterActions } from "@agent-native/toolkit/app-shell";
 import {
   IconPencil,
@@ -25,7 +24,7 @@ import {
 import { cn } from "@/lib/utils";
 
 const navItems = [
-  { icon: IconPencil, labelKey: "navigation.designs", href: "/" },
+  { icon: IconPencil, labelKey: "navigation.designs", href: "/home" },
   { icon: IconTemplate, labelKey: "navigation.templates", href: "/templates" },
   {
     icon: IconComponents,
@@ -138,21 +137,9 @@ export function Sidebar() {
           )}
           data-sidebar-brand-toggle
         >
-          <img
-            src={appPath("/agent-native-icon-light.svg")}
-            alt=""
+          <AgentNativeIcon
             aria-hidden="true"
-            width={28}
-            height={16}
-            className="block h-4 w-7 shrink-0 object-contain object-center dark:hidden"
-          />
-          <img
-            src={appPath("/agent-native-icon-dark.svg")}
-            alt=""
-            aria-hidden="true"
-            width={28}
-            height={16}
-            className="hidden h-4 w-7 shrink-0 object-contain object-center dark:block"
+            className="h-3.5 w-6 shrink-0 text-sidebar-foreground"
           />
           {!collapsed && (
             <span className="text-sm font-semibold tracking-tight">
@@ -167,8 +154,8 @@ export function Sidebar() {
           {navItems.map((item) => {
             const Icon = item.icon;
             const isActive =
-              item.href === "/"
-                ? location.pathname === "/" ||
+              item.href === "/home"
+                ? location.pathname === "/home" ||
                   location.pathname.startsWith("/design/")
                 : location.pathname.startsWith(item.href);
             const link = (
@@ -242,10 +229,10 @@ export function Sidebar() {
 
           {!collapsed && (
             <div className="mt-auto shrink-0">
-              <div className="px-3 py-2">
+              <div className="px-3 py-2 empty:hidden">
                 <OrgSwitcher reserveSpace />
               </div>
-              <div className="px-3 py-2">
+              <div className="px-3 py-2 empty:hidden">
                 <DevDatabaseLink />
               </div>
             </div>

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

@@ -86,6 +86,10 @@
   --design-editor-accent-strong-color: var(--design-editor-accent-color);
   --design-editor-accent-contrast-color: #ffffff;
   --design-editor-measure-color: hsl(24 95% 53%);
+  /* Sampled from Figma: #F2F2F2 on white. Identical in both themes and NOT
+     derived from --foreground: this paints over the user's content, so an
+     editor-theme-light line would vanish on a white design. */
+  --design-editor-layout-grid-color: rgb(0 0 0 / 5%);
   --design-editor-panel-bg: hsl(var(--background));
   --design-editor-panel-raised-bg: hsl(var(--secondary));
   --design-editor-control-bg: hsl(var(--muted));
@@ -103,6 +107,12 @@
   --design-inspector-grid-unit: var(--design-baseline-unit);
   --design-inspector-grid-row: var(--design-control-height);
   --design-inspector-grid-gap: var(--design-baseline-unit);
+  --design-inspector-section-padding-inline: var(--design-baseline-unit);
+  --design-inspector-section-padding-block: var(--design-baseline-unit);
+  --design-inspector-control-gap: var(--design-baseline-half);
+  --design-inspector-popover-label-width: calc(var(--design-baseline-unit) * 9);
+  --design-inspector-popover-icon-width: calc(var(--design-baseline-unit) * 4);
+  --design-inspector-popover-value-width: calc(var(--design-baseline-unit) * 7);
   --design-sidebar-font-control: 11px;
   --design-sidebar-line-control: 16px;
   --design-sidebar-font-label: 10px;
@@ -190,6 +200,10 @@
   --design-editor-accent-strong-color: var(--design-editor-accent-color);
   --design-editor-accent-contrast-color: #ffffff;
   --design-editor-measure-color: hsl(24 95% 53%);
+  /* Sampled from Figma: #F2F2F2 on white. Identical in both themes and NOT
+     derived from --foreground: this paints over the user's content, so an
+     editor-theme-light line would vanish on a white design. */
+  --design-editor-layout-grid-color: rgb(0 0 0 / 5%);
   --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%);
@@ -300,6 +314,28 @@
   gap: 4px;
 }
 
+.design-sidebar-section-content {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  gap: var(--design-inspector-grid-gap);
+  padding-inline: var(--design-inspector-section-padding-inline);
+  padding-block-end: var(--design-inspector-section-padding-block);
+}
+
+.design-sidebar-control-stack {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  gap: var(--design-inspector-control-gap);
+}
+
+.design-inspector-popover-stack {
+  display: grid;
+  min-width: 0;
+  gap: var(--design-inspector-grid-gap);
+}
+
 .design-inspector-grid.design-sidebar-property-grid {
   grid-auto-rows: auto;
   row-gap: var(--design-baseline-half);
@@ -321,6 +357,14 @@
   line-height: var(--design-sidebar-line-label);
 }
 
+.design-sidebar-comments [data-slot="tabs-list"] {
+  min-height: var(--design-control-height);
+}
+
+.design-sidebar-comments [data-slot="tabs-trigger"] {
+  min-height: var(--design-control-height);
+}
+
 /* Keep workspace-rail typography explicit. Tailwind cannot infer whether an
    untyped `text-[var(...)]` token is a font size or a color, which previously
    left these labels at the inherited 16px size and forced them to truncate. */
@@ -404,7 +448,14 @@
       var(--design-inspector-debug-column-fill) 50%,
       transparent 50%
     );
-  background-position: left top;
+  /* Section separators are 1px, so the content baseline begins one pixel
+     below the outer inspector origin. Keep the debug coordinates honest. */
+  background-position:
+    left 1px,
+    left 1px,
+    left 1px,
+    left 1px,
+    left 1px;
   background-size:
     calc(100% / var(--design-inspector-grid-columns)) 100%,
     calc(100% / var(--design-inspector-grid-columns)) 100%,
@@ -597,6 +648,26 @@
     repeat(2, var(--design-action-slot-width));
 }
 
+.design-inspector-popover-field {
+  grid-template-columns: var(--design-inspector-popover-label-width) minmax(
+      0,
+      1fr
+    );
+}
+
+.design-inspector-popover-number {
+  grid-template-columns: var(--design-inspector-popover-icon-width) minmax(
+      0,
+      1fr
+    );
+}
+
+.design-inspector-popover-slider {
+  grid-template-columns: minmax(0, 1fr) var(
+      --design-inspector-popover-value-width
+    );
+}
+
 .design-inspector-grid[data-inspector-layout="stroke-details"]
   > [data-inspector-grid-cell]:nth-child(1) {
   grid-column: 1 !important;

package/corpus/templates/design/app/hooks/use-navigation-state.ts

@@ -307,7 +307,7 @@ export function useNavigationState(enabled = true) {
       if (cmd.view === "present" && cmd.designId)
         return `/present/${cmd.designId}`;
       if (cmd.view === "settings") return "/settings";
-      return "/";
+      return "/home";
     },
     onNavigate: (cmd, path) => {
       const command = editorCommandFromNavigate(cmd, path);

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

@@ -214,6 +214,7 @@ export interface UseDesignHotkeysProps {
    */
   canClaimBoundChords?: boolean;
   onToggleUi?: DesignHotkeyHandler;
+  onToggleLayoutGrids?: DesignHotkeyHandler;
   /** Figma's Shift+C — toggle Show/Hide comments (comment pins). */
   onToggleComments?: DesignHotkeyHandler;
   /** Figma's Ctrl+Shift+? — open the keyboard-shortcuts reference panel. */
@@ -285,6 +286,20 @@ export function isDesignHotkeyEditableTarget(target: EventTarget | null) {
   return tagName === "input" || tagName === "textarea" || tagName === "select";
 }
 
+export function isDesignHistoryHotkeyTarget(target: EventTarget | null) {
+  if (!target || typeof Element === "undefined") return false;
+  if (!(target instanceof Element)) return false;
+  return Boolean(target.closest("[data-design-history-hotkeys]"));
+}
+
+function isDesignHistoryHotkey(event: KeyboardEvent) {
+  return (
+    (event.metaKey || event.ctrlKey) &&
+    !event.altKey &&
+    (event.key.toLowerCase() === "z" || event.key.toLowerCase() === "y")
+  );
+}
+
 /** Chat bodies and panel labels are selectable but not editable targets, so the
  * editable guard never sees them. Canvas layers live in the preview iframe and
  * produce no parent-document range, so this cannot mask a real layer copy. */
@@ -362,7 +377,11 @@ export function useDesignHotkeys(props: UseDesignHotkeysProps) {
       if (
         current.ignoreEditableTargets !== false &&
         isDesignHotkeyEditableTarget(event.target) &&
-        !isShowKeyboardShortcutsHotkey(event)
+        !isShowKeyboardShortcutsHotkey(event) &&
+        !(
+          isDesignHistoryHotkey(event) &&
+          isDesignHistoryHotkeyTarget(event.target)
+        )
       ) {
         return;
       }
@@ -783,6 +802,18 @@ export function handleDesignHotkey(
     return run(props.onToggleComments);
   }
 
+  // Figma's Mac and Windows forms differ outright here: Control G vs Ctrl
+  // Shift 4. Literal Control on both, never the remapped `primary` flag, and
+  // Digit4 by physical code because Shift+4 is "$" on US layouts.
+  if (event.ctrlKey && !event.metaKey && !event.altKey) {
+    if (!event.shiftKey && key === "g") {
+      return run(props.onToggleLayoutGrids);
+    }
+    if (event.shiftKey && event.code === "Digit4") {
+      return run(props.onToggleLayoutGrids);
+    }
+  }
+
   return false;
 }
 

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

@@ -95,6 +95,7 @@ const enUS = {
       typography: "Typography",
       autoLayout: "Auto layout",
       positionLayout: "Position",
+      layoutGrid: "Layout grid",
       flexLayout: "Flex Layout",
       layout: "Layout",
       spacing: "Spacing",
@@ -152,6 +153,10 @@ const enUS = {
       removeLayer: "Remove layer",
       showLayer: "Show layer",
       hideLayer: "Hide layer",
+      addGrid: "Add grid",
+      removeGrid: "Remove grid",
+      showGrid: "Show grid",
+      hideGrid: "Hide grid",
       reorderLayer: "Reorder layer",
       stylesComingSoon: "Styles — Coming soon",
       linkSides: "Link sides",
@@ -837,8 +842,12 @@ const enUS = {
         previousSibling: "Previous sibling",
         nextScreen: "Next screen",
         previousScreen: "Previous screen",
+        toggleLayoutGrids: "Show/hide layout grids",
         nudge: "Nudge",
-        nudgeLarge: "Nudge by 10",
+        // i18n-copy-ignore: dropped the hardcoded "10" — every locale's value
+        // for this row is built from the already-translated nudgeAmountBig
+        // label in i18n-keyboard-shortcuts.ts, changed in this same diff.
+        nudgeLarge: "Big nudge",
         copy: "Copy",
         copyPng: "Copy as PNG",
         cut: "Cut",
@@ -1084,7 +1093,7 @@ const enUS = {
       pngClipboardBlocked: "Allow clipboard access to copy this PNG",
       pngClipboardWriteError: "Could not copy PNG to the clipboard",
       pngLivePreviewUnavailable:
-        "PNG capture isn't available for URL-backed screens yet",
+        "PNG export is only available in the desktop app right now.",
       pngReadOnlyUnavailable:
         "PNG capture isn't available in read-only previews",
       pngSaveError: "Could not save PNG",
@@ -1676,6 +1685,11 @@ const enUS = {
       saving: "Saving...",
       saveChanges: "Save changes",
     },
+    preview: {
+      title: "Preview",
+      description:
+        "This design system is managed by Builder Design System Intelligence. Open the linked project to see the full design system, including all tokens, components, and usage guidance.",
+    },
     tokenPreview: {
       title: "Token preview",
       description:
@@ -2162,6 +2176,11 @@ const designLocaleOverrides = {
         saving: "保存...",
         saveChanges: "保存更改",
       },
+      preview: {
+        title: "预览",
+        description:
+          "此设计系统由 Builder 设计系统智能管理。打开关联的项目即可查看完整的设计系统，包括所有令牌、组件和使用指南。",
+      },
       tokenPreview: {
         title: "代币预览",
         description: "当前存储的颜色、类型、间距和资源的快照。",
@@ -2609,6 +2628,11 @@ const designLocaleOverrides = {
         saving: "Ahorro...",
         saveChanges: "Guardar cambios",
       },
+      preview: {
+        title: "Vista previa",
+        description:
+          "Este sistema de diseño se gestiona con Builder Design System Intelligence. Abre el proyecto vinculado para ver el sistema de diseño completo, incluidos todos los tokens, componentes y guías de uso.",
+      },
       tokenPreview: {
         title: "Vista previa del token",
         description:
@@ -3063,6 +3087,11 @@ const designLocaleOverrides = {
         saving: "Économie...",
         saveChanges: "Enregistrer les modifications",
       },
+      preview: {
+        title: "Aperçu",
+        description:
+          "Ce système de conception est géré par Builder Design System Intelligence. Ouvrez le projet associé pour voir le système de conception complet, y compris tous les jetons, composants et conseils d’utilisation.",
+      },
       tokenPreview: {
         title: "Aperçu du jeton",
         description:
@@ -3517,6 +3546,11 @@ const designLocaleOverrides = {
         saving: "Sparen...",
         saveChanges: "Änderungen speichern",
       },
+      preview: {
+        title: "Vorschau",
+        description:
+          "Dieses Designsystem wird von Builder Design System Intelligence verwaltet. Öffnen Sie das verknüpfte Projekt, um das vollständige Designsystem einzusehen, einschließlich aller Tokens, Komponenten und Nutzungshinweise.",
+      },
       tokenPreview: {
         title: "Token-Vorschau",
         description:
@@ -3966,6 +4000,11 @@ const designLocaleOverrides = {
         saving: "保存中...",
         saveChanges: "変更を保存する",
       },
+      preview: {
+        title: "プレビュー",
+        description:
+          "このデザインシステムは Builder Design System Intelligence によって管理されています。リンクされたプロジェクトを開くと、すべてのトークン、コンポーネント、使用ガイダンスを含む完全なデザインシステムを確認できます。",
+      },
       tokenPreview: {
         title: "トークンのプレビュー",
         description:
@@ -4408,6 +4447,11 @@ const designLocaleOverrides = {
         saving: "절약...",
         saveChanges: "변경사항 저장",
       },
+      preview: {
+        title: "미리보기",
+        description:
+          "이 디자인 시스템은 Builder Design System Intelligence에서 관리합니다. 연결된 프로젝트를 열어 모든 토큰, 구성 요소 및 사용 가이드를 포함한 전체 디자인 시스템을 확인하세요.",
+      },
       tokenPreview: {
         title: "토큰 미리보기",
         description: "현재 저장된 색상, 유형, 간격 및 자산의 스냅샷입니다.",
@@ -4856,6 +4900,11 @@ const designLocaleOverrides = {
         saving: "Salvando...",
         saveChanges: "Salvar alterações",
       },
+      preview: {
+        title: "Visualização",
+        description:
+          "Este sistema de design é gerenciado pelo Builder Design System Intelligence. Abra o projeto vinculado para ver o sistema de design completo, incluindo todos os tokens, componentes e diretrizes de uso.",
+      },
       tokenPreview: {
         title: "Visualização do token",
         description:
@@ -5293,6 +5342,11 @@ const designLocaleOverrides = {
         saving: "सहेजा जा रहा है...",
         saveChanges: "परिवर्तनों को सुरक्षित करें",
       },
+      preview: {
+        title: "पूर्वावलोकन",
+        description:
+          "इस डिज़ाइन सिस्टम को Builder डिज़ाइन सिस्टम इंटेलिजेंस द्वारा प्रबंधित किया जाता है। सभी टोकन, घटकों और उपयोग मार्गदर्शन सहित पूरा डिज़ाइन सिस्टम देखने के लिए लिंक की गई परियोजना खोलें।",
+      },
       tokenPreview: {
         title: "टोकन पूर्वावलोकन",
         description:
@@ -5730,6 +5784,11 @@ const designLocaleOverrides = {
         saving: "توفير...",
         saveChanges: "حفظ التغييرات",
       },
+      preview: {
+        title: "معاينة",
+        description:
+          "يتم إدارة نظام التصميم هذا بواسطة Builder Design System Intelligence. افتح المشروع المرتبط لعرض نظام التصميم الكامل، بما في ذلك جميع الرموز والمكونات وإرشادات الاستخدام.",
+      },
       tokenPreview: {
         title: "معاينة الرمز المميز",
         description: "لقطة للألوان والنوع والتباعد والأصول المخزنة حاليًا.",
@@ -7299,7 +7358,7 @@ const designExactEnglishOverrides = {
         pngClipboardUnsupported: "此浏览器无法将 PNG 图像复制到剪贴板",
         pngClipboardBlocked: "请允许访问剪贴板以复制此 PNG",
         pngClipboardWriteError: "无法将 PNG 复制到剪贴板",
-        pngLivePreviewUnavailable: "URL 支持的屏幕暂不支持 PNG 捕获",
+        pngLivePreviewUnavailable: "PNG 导出目前仅在桌面应用中可用。",
         pngReadOnlyUnavailable: "只读预览不支持 PNG 捕获",
         pngExportError: "无法导出 PNG",
         pngSaveError: "无法保存 PNG",
@@ -7392,7 +7451,7 @@ const designExactEnglishOverrides = {
           "Permite el acceso al portapapeles para copiar este PNG",
         pngClipboardWriteError: "No se pudo copiar el PNG al portapapeles",
         pngLivePreviewUnavailable:
-          "La captura PNG aún no está disponible para pantallas basadas en URL",
+          "La exportación PNG solo está disponible en la aplicación de escritorio por ahora.",
         pngReadOnlyUnavailable:
           "La captura PNG no está disponible en vistas previas de solo lectura",
         pngExportError: "No se pudo exportar PNG",
@@ -7490,7 +7549,7 @@ const designExactEnglishOverrides = {
         pngClipboardWriteError:
           "Impossible de copier le PNG dans le presse-papiers",
         pngLivePreviewUnavailable:
-          "La capture PNG n’est pas encore disponible pour les écrans basés sur une URL",
+          "L’exportation PNG est actuellement disponible uniquement dans l’application de bureau.",
         pngReadOnlyUnavailable:
           "La capture PNG n’est pas disponible dans les aperçus en lecture seule",
         pngExportError: "Impossible d’exporter PNG",
@@ -7589,7 +7648,7 @@ const designExactEnglishOverrides = {
         pngClipboardWriteError:
           "PNG konnte nicht in die Zwischenablage kopiert werden",
         pngLivePreviewUnavailable:
-          "PNG-Aufnahmen sind für URL-basierte Bildschirme noch nicht verfügbar",
+          "Der PNG-Export ist derzeit nur in der Desktop-App verfügbar.",
         pngReadOnlyUnavailable:
           "PNG-Aufnahmen sind in schreibgeschützten Vorschauen nicht verfügbar",
         pngExportError: "PNG konnte nicht exportiert werden",
@@ -7687,7 +7746,7 @@ const designExactEnglishOverrides = {
           "この PNG をコピーするにはクリップボードへのアクセスを許可してください",
         pngClipboardWriteError: "PNG をクリップボードにコピーできませんでした",
         pngLivePreviewUnavailable:
-          "URL ベースの画面では PNG キャプチャをまだ利用できません",
+          "PNG のエクスポートは現在デスクトップアプリでのみ利用できます。",
         pngReadOnlyUnavailable:
           "読み取り専用プレビューでは PNG キャプチャを利用できません",
         pngExportError: "PNG をエクスポートできませんでした",
@@ -7782,7 +7841,7 @@ const designExactEnglishOverrides = {
         pngClipboardBlocked: "이 PNG를 복사하려면 클립보드 접근을 허용하세요",
         pngClipboardWriteError: "PNG를 클립보드에 복사할 수 없음",
         pngLivePreviewUnavailable:
-          "URL 기반 화면에서는 아직 PNG 캡처를 사용할 수 없음",
+          "PNG 내보내기는 현재 데스크톱 앱에서만 사용할 수 있습니다.",
         pngReadOnlyUnavailable:
           "읽기 전용 미리보기에서는 PNG 캡처를 사용할 수 없음",
         pngExportError: "PNG를 내보낼 수 없음",
@@ -7878,7 +7937,7 @@ const designExactEnglishOverrides = {
         pngClipboardWriteError:
           "Não foi possível copiar o PNG para a área de transferência",
         pngLivePreviewUnavailable:
-          "A captura PNG ainda não está disponível para telas baseadas em URL",
+          "A exportação de PNG está disponível apenas no aplicativo para computador no momento.",
         pngReadOnlyUnavailable:
           "A captura PNG não está disponível em visualizações somente leitura",
         pngExportError: "Não foi possível exportar PNG",
@@ -7973,8 +8032,7 @@ const designExactEnglishOverrides = {
         pngClipboardBlocked:
           "इस PNG को कॉपी करने के लिए क्लिपबोर्ड एक्सेस की अनुमति दें",
         pngClipboardWriteError: "PNG को क्लिपबोर्ड पर कॉपी नहीं किया जा सका",
-        pngLivePreviewUnavailable:
-          "URL-आधारित स्क्रीन के लिए PNG कैप्चर अभी उपलब्ध नहीं है",
+        pngLivePreviewUnavailable: "PNG निर्यात अभी केवल डेस्कटॉप ऐप में उपलब्ध है।",
         pngReadOnlyUnavailable: "केवल-पढ़ने वाले पूर्वावलोकन में PNG कैप्चर उपलब्ध नहीं है",
         pngExportError: "PNG निर्यात नहीं किया जा सका",
         pngSaveError: "PNG सहेजा नहीं जा सका",
@@ -8065,7 +8123,7 @@ const designExactEnglishOverrides = {
         pngClipboardBlocked: "اسمح بالوصول إلى الحافظة لنسخ ملف PNG هذا",
         pngClipboardWriteError: "تعذر نسخ PNG إلى الحافظة",
         pngLivePreviewUnavailable:
-          "التقاط PNG غير متاح بعد للشاشات المستندة إلى عنوان URL",
+          "يتوفر تصدير PNG حاليًا في تطبيق سطح المكتب فقط.",
         pngReadOnlyUnavailable:
           "التقاط PNG غير متاح في المعاينات المخصصة للقراءة فقط",
         pngExportError: "تعذر تصدير PNG",
@@ -8098,6 +8156,7 @@ const designModeFeatureOverrides = {
       sections: {
         autoLayout: "自動布局",
         positionLayout: "位置",
+        layoutGrid: "版面格線",
         stroke: "描邊",
         effects: "效果",
         codeConfidence: "程式碼",
@@ -8271,6 +8330,7 @@ const designModeFeatureOverrides = {
       sections: {
         autoLayout: "自动布局",
         positionLayout: "位置",
+        layoutGrid: "布局网格",
         stroke: "描边",
         effects: "效果",
         codeConfidence: "代码",
@@ -8443,6 +8503,7 @@ const designModeFeatureOverrides = {
       sections: {
         autoLayout: "Diseño automático",
         positionLayout: "Posición",
+        layoutGrid: "Cuadrícula de diseño",
         stroke: "Trazo",
         effects: "Efectos",
         codeConfidence: "Código",
@@ -8639,6 +8700,7 @@ const designModeFeatureOverrides = {
       sections: {
         autoLayout: "Mise en page auto",
         positionLayout: "Position",
+        layoutGrid: "Grille de mise en page",
         stroke: "Contour",
         effects: "Effets",
         codeConfidence: "Code",
@@ -8830,6 +8892,7 @@ const designModeFeatureOverrides = {
       sections: {
         autoLayout: "Auto-Layout",
         positionLayout: "Position",
+        layoutGrid: "Layoutraster",
         stroke: "Kontur",
         effects: "Effekte",
         codeConfidence: "Code",
@@ -9028,6 +9091,7 @@ const designModeFeatureOverrides = {
       sections: {
         autoLayout: "オートレイアウト",
         positionLayout: "位置",
+        layoutGrid: "レイアウトグリッド",
         stroke: "線",
         effects: "効果",
         codeConfidence: "コード",
@@ -9220,6 +9284,7 @@ const designModeFeatureOverrides = {
       sections: {
         autoLayout: "자동 레이아웃",
         positionLayout: "위치",
+        layoutGrid: "레이아웃 그리드",
         stroke: "획",
         effects: "효과",
         codeConfidence: "코드",
@@ -9409,6 +9474,7 @@ const designModeFeatureOverrides = {
       sections: {
         autoLayout: "Layout automático",
         positionLayout: "Posição",
+        layoutGrid: "Grade de layout",
         stroke: "Traço",
         effects: "Efeitos",
         codeConfidence: "Código",
@@ -9598,6 +9664,7 @@ const designModeFeatureOverrides = {
       sections: {
         autoLayout: "ऑटो लेआउट",
         positionLayout: "स्थिति",
+        layoutGrid: "लेआउट ग्रिड",
         stroke: "स्ट्रोक",
         effects: "प्रभाव",
         codeConfidence: "कोड",
@@ -9787,6 +9854,7 @@ const designModeFeatureOverrides = {
       sections: {
         autoLayout: "تخطيط تلقائي",
         positionLayout: "الموضع",
+        layoutGrid: "شبكة التخطيط",
         stroke: "الحد",
         effects: "التأثيرات",
         codeConfidence: "الكود",
@@ -10048,6 +10116,10 @@ const designCanvasFeatureOverrides = {
         removeLayer: "移除图层",
         showLayer: "显示图层",
         hideLayer: "隐藏图层",
+        addGrid: "添加网格",
+        removeGrid: "移除网格",
+        showGrid: "显示网格",
+        hideGrid: "隐藏网格",
         reorderLayer: "重新排序图层",
         linkSides: "链接四边",
         unlinkSides: "取消链接四边",
@@ -10151,6 +10223,10 @@ const designCanvasFeatureOverrides = {
         removeLayer: "Eliminar capa",
         showLayer: "Mostrar capa",
         hideLayer: "Ocultar capa",
+        addGrid: "Añadir cuadrícula",
+        removeGrid: "Eliminar cuadrícula",
+        showGrid: "Mostrar cuadrícula",
+        hideGrid: "Ocultar cuadrícula",
         reorderLayer: "Reordenar capa",
         linkSides: "Vincular lados",
         unlinkSides: "Desvincular lados",
@@ -10256,6 +10332,10 @@ const designCanvasFeatureOverrides = {
         removeLayer: "Supprimer le calque",
         showLayer: "Afficher le calque",
         hideLayer: "Masquer le calque",
+        addGrid: "Ajouter une grille",
+        removeGrid: "Supprimer la grille",
+        showGrid: "Afficher la grille",
+        hideGrid: "Masquer la grille",
         reorderLayer: "Réorganiser le calque",
         linkSides: "Lier les côtés",
         unlinkSides: "Délier les côtés",
@@ -10361,6 +10441,10 @@ const designCanvasFeatureOverrides = {
         removeLayer: "Ebene entfernen",
         showLayer: "Ebene anzeigen",
         hideLayer: "Ebene ausblenden",
+        addGrid: "Raster hinzufügen",
+        removeGrid: "Raster entfernen",
+        showGrid: "Raster anzeigen",
+        hideGrid: "Raster ausblenden",
         reorderLayer: "Ebene neu anordnen",
         linkSides: "Seiten verknüpfen",
         unlinkSides: "Seiten lösen",
@@ -10462,6 +10546,10 @@ const designCanvasFeatureOverrides = {
         removeLayer: "レイヤーを削除",
         showLayer: "レイヤーを表示",
         hideLayer: "レイヤーを非表示",
+        addGrid: "グリッドを追加",
+        removeGrid: "グリッドを削除",
+        showGrid: "グリッドを表示",
+        hideGrid: "グリッドを非表示",
         reorderLayer: "レイヤーを並べ替え",
         linkSides: "辺をリンク",
         unlinkSides: "辺のリンクを解除",
@@ -10563,6 +10651,10 @@ const designCanvasFeatureOverrides = {
         removeLayer: "레이어 제거",
         showLayer: "레이어 표시",
         hideLayer: "레이어 숨기기",
+        addGrid: "그리드 추가",
+        removeGrid: "그리드 제거",
+        showGrid: "그리드 표시",
+        hideGrid: "그리드 숨기기",
         reorderLayer: "레이어 순서 변경",
         linkSides: "면 연결",
         unlinkSides: "면 연결 해제",
@@ -10666,6 +10758,10 @@ const designCanvasFeatureOverrides = {
         removeLayer: "Remover camada",
         showLayer: "Mostrar camada",
         hideLayer: "Ocultar camada",
+        addGrid: "Adicionar grade",
+        removeGrid: "Remover grade",
+        showGrid: "Mostrar grade",
+        hideGrid: "Ocultar grade",
         reorderLayer: "Reordenar camada",
         linkSides: "Vincular lados",
         unlinkSides: "Desvincular lados",
@@ -10767,6 +10863,10 @@ const designCanvasFeatureOverrides = {
         removeLayer: "परत हटाएं",
         showLayer: "परत दिखाएं",
         hideLayer: "परत छिपाएं",
+        addGrid: "ग्रिड जोड़ें",
+        removeGrid: "ग्रिड हटाएं",
+        showGrid: "ग्रिड दिखाएं",
+        hideGrid: "ग्रिड छिपाएं",
         reorderLayer: "परत पुनः क्रमित करें",
         linkSides: "किनारे लिंक करें",
         unlinkSides: "किनारे अनलिंक करें",
@@ -10868,6 +10968,10 @@ const designCanvasFeatureOverrides = {
         removeLayer: "إزالة طبقة",
         showLayer: "إظهار الطبقة",
         hideLayer: "إخفاء الطبقة",
+        addGrid: "إضافة شبكة",
+        removeGrid: "إزالة الشبكة",
+        showGrid: "إظهار الشبكة",
+        hideGrid: "إخفاء الشبكة",
         reorderLayer: "إعادة ترتيب الطبقة",
         linkSides: "ربط الجوانب",
         unlinkSides: "إلغاء ربط الجوانب",