@agent-native/core 0.80.9 → 0.80.10

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

@@ -0,0 +1,131 @@
+import { sendToAgentChat, useT } from "@agent-native/core/client";
+import { useCallback } from "react";
+import { toast } from "sonner";
+
+export interface AgentEditRequestArgs {
+  /** Freeform user message describing the edit to make. */
+  message: string;
+  /** CSS selector or data-agent-native-node-id identifying the target element. */
+  selector?: string;
+  /** Source id (data-code-layer-id) of the target element. */
+  sourceId?: string;
+  /** The design file id (screen / file row id) being edited. */
+  fileId?: string;
+  /** The design id (row id of the design). */
+  designId?: string;
+  /** For localhost-connected screens: the source file path to route edits through. */
+  routeSourceFile?: string;
+  /** Human-readable filename for context (e.g. "index.html"). */
+  filename?: string;
+}
+
+/**
+ * Builds the hidden agent context string for an edit request, following the
+ * same pattern used by the tweaks panel (DesignEditor.tsx ~5293) and the
+ * extensions panel context builder (DesignExtensionsPanel.tsx ~120-131).
+ */
+function buildEditContext(args: AgentEditRequestArgs): string {
+  const lines: string[] = [];
+
+  if (args.designId) {
+    lines.push(`Design id: "${args.designId}".`);
+  }
+  if (args.fileId) {
+    lines.push(
+      args.filename
+        ? `Active file: "${args.filename}" (file id: "${args.fileId}").`
+        : `Active file id: "${args.fileId}".`,
+    );
+  } else if (args.filename) {
+    lines.push(`Active file: "${args.filename}".`);
+  }
+  if (args.selector) {
+    lines.push(`Selected element CSS selector: "${args.selector}".`);
+  }
+  if (args.sourceId) {
+    lines.push(
+      `Selected element source id (data-code-layer-id): "${args.sourceId}".`,
+    );
+  }
+  if (args.routeSourceFile) {
+    lines.push(
+      `Localhost source file to route edits through: "${args.routeSourceFile}".`,
+    );
+  }
+
+  lines.push("");
+  lines.push("Agent instructions:");
+  lines.push(
+    "1. Call view-screen first to see the current state of the design.",
+  );
+  lines.push(
+    "2. For style, class, text, or positional changes on the selected element, prefer apply-visual-edit — it is deterministic and does not require a full regeneration.",
+  );
+  lines.push(
+    "3. For structural changes, new sections, or multi-element edits, use edit-design (search/replace) for small targeted changes or generate-design for full rewrites.",
+  );
+  lines.push(
+    "4. If a routeSourceFile is provided, the design screen is connected to localhost source code. Route edits through the agent code editing surface for that file rather than modifying the inline HTML prototype.",
+  );
+
+  return lines.join("\n");
+}
+
+/**
+ * Builds the full pasteable prompt string (visible message + context block)
+ * for use in the "Copy prompt" flow.
+ */
+function buildFullPrompt(args: AgentEditRequestArgs): string {
+  const context = buildEditContext(args);
+  return `${args.message}\n\n---\n${context}`;
+}
+
+export interface UseAgentEditRequestReturn {
+  /**
+   * Routes the edit request directly to the agent chat sidebar.
+   * The message is shown in the chat; the context is hidden.
+   */
+  sendEdit: (args: AgentEditRequestArgs) => Promise<void>;
+  /**
+   * Builds the same prompt+context as a single string and copies it to the
+   * clipboard. Toasts success or blocked per the pattern in DesignEditor.tsx ~7608.
+   */
+  copyPrompt: (args: AgentEditRequestArgs) => Promise<void>;
+}
+
+/**
+ * Shared hook for routing AI edit requests from the inspector and the
+ * local-source banner. Reuses sendToAgentChat from @agent-native/core/client
+ * and the clipboard+toast pattern established in DesignEditor.tsx.
+ */
+export function useAgentEditRequest(): UseAgentEditRequestReturn {
+  const t = useT();
+
+  const sendEdit = useCallback(
+    async (args: AgentEditRequestArgs): Promise<void> => {
+      const context = buildEditContext(args);
+      sendToAgentChat({
+        message: args.message,
+        context,
+        submit: true,
+        openSidebar: true,
+      });
+    },
+    [],
+  );
+
+  const copyPrompt = useCallback(
+    async (args: AgentEditRequestArgs): Promise<void> => {
+      const text = buildFullPrompt(args);
+      try {
+        await navigator.clipboard.writeText(text);
+        toast.success(t("designEditor.toasts.codingHandoffCopied"));
+      } catch {
+        toast.error(t("designEditor.toasts.clipboardBlocked"));
+      }
+    },
+    [t],
+  );
+
+  return { sendEdit, copyPrompt };
+}

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

@@ -307,7 +307,9 @@ function handleDesignHotkey(
   if (primary && key === "d") return run(props.onDuplicate);
   if (primary && key === "r") return run(props.onRename);
   if (primary && key === "g") {
-    return event.shiftKey ? run(props.onUngroup) : run(props.onGroup);
+    // Figma uses ⇧⌘G for ungroup; also support ⌥⌘G as an alias.
+    if (event.shiftKey || event.altKey) return run(props.onUngroup);
+    return run(props.onGroup);
   }
 
   if (primary && (key === "=" || key === "+")) return run(props.onZoomIn);

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

@@ -239,6 +239,18 @@ const messages = {
     },
   },
   designEditor: {
+    askAgent: "詢問代理",
+    tokens: {
+      title: "權杖",
+      newToken: "新增權杖",
+      cssVar: "CSS 變數",
+      value: "值",
+      add: "新增權杖",
+      refresh: "重新整理權杖",
+      empty: "尚無權杖",
+      emptyHint: "新增設計權杖以重複使用顏色、間距等。",
+      applying: "套用中…",
+    },
     generationMayHaveStopped:
       "生成可能在建立檔案前停止。請檢視代理訊息或重試。",
     generationMayHaveStoppedToast: "生成可能在建立檔案前停止。",
@@ -383,6 +395,8 @@ const messages = {
       "agent-structural-edit": "結構移動需要代理",
     },
     toasts: {
+      componentCreated: "元件已建立",
+      componentCreateFailed: "無法建立元件",
       codingHandoffError: "無法建立編碼交接",
       codingHandoffCopied: "編碼交接已複製",
       clipboardBlocked: "剪貼簿被阻止",
@@ -412,6 +426,23 @@ const messages = {
       duplicateElementFailed: "無法複製該元素",
       saveCopyError: "無法儲存這個設計的副本",
     },
+    localSourceEdit: {
+      bannerNotice: "對已連結本機程式碼的編輯由 AI 代理套用，不會直接寫入。",
+      askAiToEdit: "請 AI 編輯",
+      copyPrompt: "複製提示",
+      dialogTitle: "請 AI 編輯已連結的來源",
+      requestPlaceholder: "將按鈕顏色改成藍色、更新標題文字…",
+      askAi: "詢問 AI",
+      applyWithAi: "用 AI 套用",
+      copyPromptTooltip: "將提示複製到剪貼簿",
+      targeting: "目標：",
+      describeElementChange: "描述要對此元素進行的變更…",
+      describeChange: "描述您想要變更的內容…",
+      dialogDescription:
+        "描述您想要變更的內容。代理會先呼叫 view-screen，再透過程式碼編輯器套用編輯。",
+      dialogDescriptionFile:
+        "描述您想在「{{file}}」中變更的內容。代理會先呼叫 view-screen，再透過程式碼編輯器套用編輯。",
+    },
     inspectorLockedTitle: "產生中，檢查器已鎖定",
     inspectorLockedDescription: "第一個畫面準備好後即可使用控制項。",
   },

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

@@ -244,6 +244,18 @@ const enUS = {
     },
   },
   designEditor: {
+    askAgent: "Ask agent",
+    tokens: {
+      title: "Tokens",
+      newToken: "New token",
+      cssVar: "CSS variable",
+      value: "Value",
+      add: "Add token",
+      refresh: "Refresh tokens",
+      empty: "No tokens yet",
+      emptyHint: "Add design tokens to reuse colors, spacing, and more.",
+      applying: "Applying…",
+    },
     generationMayHaveStopped:
       "Generation may have stopped before creating files. Check the agent message or try again.",
     generationMayHaveStoppedToast:
@@ -426,6 +438,27 @@ const enUS = {
       layerMoveFailed: "Could not move that layer",
       duplicateElementFailed: "Could not duplicate that element",
       saveCopyError: "Could not save a copy of this design",
+      componentCreated: "Component created",
+      componentCreateFailed: "Could not create component",
+    },
+    localSourceEdit: {
+      bannerNotice:
+        "Edits to connected local code are applied by the AI agent, not written directly.",
+      askAiToEdit: "Ask AI to edit",
+      copyPrompt: "Copy prompt",
+      dialogTitle: "Ask AI to edit connected source",
+      requestPlaceholder:
+        "Change the button color to blue, update the heading text…",
+      askAi: "Ask AI",
+      applyWithAi: "Apply with AI",
+      copyPromptTooltip: "Copy prompt to clipboard",
+      targeting: "Targeting:",
+      describeElementChange: "Describe the change for this element…",
+      describeChange: "Describe what you want to change…",
+      dialogDescription:
+        "Describe what you want to change. The agent will call view-screen first, then apply edits through the code editor.",
+      dialogDescriptionFile:
+        'Describe what you want to change in "{{file}}". The agent will call view-screen first, then apply edits through the code editor.',
     },
   },
   layersPanel: {
@@ -9323,6 +9356,232 @@ const designVisualEditOverrides = {
   },
 } satisfies Record<Exclude<LocaleCode, "en-US">, PartialMessages>;
 
+const designLocalSourceEditOverrides = {
+  "zh-TW": {
+    designEditor: {
+      localSourceEdit: {
+        bannerNotice: "對已連結本機程式碼的編輯由 AI 代理套用，不會直接寫入。",
+        askAiToEdit: "請 AI 編輯",
+        copyPrompt: "複製提示",
+        dialogTitle: "請 AI 編輯已連結的來源",
+        requestPlaceholder: "將按鈕顏色改成藍色、更新標題文字…",
+        askAi: "詢問 AI",
+        applyWithAi: "用 AI 套用",
+        copyPromptTooltip: "將提示複製到剪貼簿",
+        targeting: "目標：",
+        describeElementChange: "描述要對此元素進行的更改…",
+        describeChange: "描述您想要更改的內容…",
+        dialogDescription:
+          "描述您想要更改的內容。代理會先呼叫 view-screen，再透過程式碼編輯器套用編輯。",
+        dialogDescriptionFile:
+          "描述您想在「{{file}}」中更改的內容。代理會先呼叫 view-screen，再透過程式碼編輯器套用編輯。",
+      },
+    },
+  },
+  "zh-CN": {
+    designEditor: {
+      localSourceEdit: {
+        bannerNotice: "对已连接本地代码的编辑由 AI 代理应用，不会直接写入。",
+        askAiToEdit: "请 AI 编辑",
+        copyPrompt: "复制提示",
+        dialogTitle: "请 AI 编辑已连接的源码",
+        requestPlaceholder: "将按钮颜色改成蓝色、更新标题文字…",
+        askAi: "询问 AI",
+        applyWithAi: "用 AI 应用",
+        copyPromptTooltip: "将提示复制到剪贴板",
+        targeting: "目标：",
+        describeElementChange: "描述要对此元素进行的更改…",
+        describeChange: "描述您想要更改的内容…",
+        dialogDescription:
+          "描述您想要更改的内容。代理会先调用 view-screen，再通过代码编辑器应用编辑。",
+        dialogDescriptionFile:
+          "描述您想在“{{file}}”中更改的内容。代理会先调用 view-screen，再通过代码编辑器应用编辑。",
+      },
+    },
+  },
+  "es-ES": {
+    designEditor: {
+      localSourceEdit: {
+        bannerNotice:
+          "Las ediciones del código local conectado las aplica el agente de IA, no se escriben directamente.",
+        askAiToEdit: "Pedir edición a la IA",
+        copyPrompt: "Copiar prompt",
+        dialogTitle: "Pedir a la IA que edite el código conectado",
+        requestPlaceholder:
+          "Cambia el color del botón a azul, actualiza el texto del título…",
+        askAi: "Preguntar a la IA",
+        applyWithAi: "Aplicar con IA",
+        copyPromptTooltip: "Copiar prompt al portapapeles",
+        targeting: "Objetivo:",
+        describeElementChange: "Describe el cambio para este elemento…",
+        describeChange: "Describe lo que quieres cambiar…",
+        dialogDescription:
+          "Describe lo que quieres cambiar. El agente llamará a view-screen primero y luego aplicará los cambios a través del editor de código.",
+        dialogDescriptionFile:
+          'Describe lo que quieres cambiar en "{{file}}". El agente llamará a view-screen primero y luego aplicará los cambios a través del editor de código.',
+      },
+    },
+  },
+  "fr-FR": {
+    designEditor: {
+      localSourceEdit: {
+        bannerNotice:
+          "Les modifications du code local connecté sont appliquées par l'agent IA, pas écrites directement.",
+        askAiToEdit: "Demander à l'IA de modifier",
+        copyPrompt: "Copier le prompt",
+        dialogTitle: "Demander à l'IA de modifier la source connectée",
+        requestPlaceholder:
+          "Change la couleur du bouton en bleu, mets à jour le titre…",
+        askAi: "Demander à l'IA",
+        applyWithAi: "Appliquer avec l'IA",
+        copyPromptTooltip: "Copier le prompt dans le presse-papiers",
+        targeting: "Cible :",
+        describeElementChange: "Décrivez la modification pour cet élément…",
+        describeChange: "Décrivez ce que vous voulez changer…",
+        dialogDescription:
+          "Décrivez ce que vous voulez changer. L'agent appellera d'abord view-screen, puis appliquera les modifications via l'éditeur de code.",
+        dialogDescriptionFile:
+          "Décrivez ce que vous voulez changer dans \"{{file}}\". L'agent appellera d'abord view-screen, puis appliquera les modifications via l'éditeur de code.",
+      },
+    },
+  },
+  "de-DE": {
+    designEditor: {
+      localSourceEdit: {
+        bannerNotice:
+          "Änderungen am verbundenen lokalen Code werden vom KI-Agenten angewendet, nicht direkt geschrieben.",
+        askAiToEdit: "KI um Änderung bitten",
+        copyPrompt: "Prompt kopieren",
+        dialogTitle: "KI um Bearbeitung der verbundenen Quelle bitten",
+        requestPlaceholder:
+          "Ändere die Button-Farbe in Blau, aktualisiere den Überschriftstext…",
+        askAi: "KI fragen",
+        applyWithAi: "Mit KI anwenden",
+        copyPromptTooltip: "Prompt in die Zwischenablage kopieren",
+        targeting: "Ziel:",
+        describeElementChange: "Beschreibe die Änderung für dieses Element…",
+        describeChange: "Beschreibe, was du ändern möchtest…",
+        dialogDescription:
+          "Beschreibe, was du ändern möchtest. Der Agent ruft zuerst view-screen auf und wendet die Änderungen dann über den Code-Editor an.",
+        dialogDescriptionFile:
+          'Beschreibe, was du in "{{file}}" ändern möchtest. Der Agent ruft zuerst view-screen auf und wendet die Änderungen dann über den Code-Editor an.',
+      },
+    },
+  },
+  "ja-JP": {
+    designEditor: {
+      localSourceEdit: {
+        bannerNotice:
+          "接続済みローカルコードの編集は AI エージェントが適用し、直接は書き込みません。",
+        askAiToEdit: "AI に編集を依頼",
+        copyPrompt: "プロンプトをコピー",
+        dialogTitle: "接続済みソースの編集を AI に依頼",
+        requestPlaceholder: "ボタンの色を青に変更、見出しテキストを更新…",
+        askAi: "AI に質問",
+        applyWithAi: "AI で適用",
+        copyPromptTooltip: "プロンプトをクリップボードにコピー",
+        targeting: "対象：",
+        describeElementChange: "この要素への変更を説明してください…",
+        describeChange: "変更したい内容を説明してください…",
+        dialogDescription:
+          "変更したい内容を説明してください。エージェントはまず view-screen を呼び出し、その後コードエディターで編集を適用します。",
+        dialogDescriptionFile:
+          "「{{file}}」で変更したい内容を説明してください。エージェントはまず view-screen を呼び出し、その後コードエディターで編集を適用します。",
+      },
+    },
+  },
+  "ko-KR": {
+    designEditor: {
+      localSourceEdit: {
+        bannerNotice:
+          "연결된 로컬 코드 편집은 AI 에이전트가 적용하며 직접 작성하지 않습니다.",
+        askAiToEdit: "AI에 편집 요청",
+        copyPrompt: "프롬프트 복사",
+        dialogTitle: "연결된 소스 편집을 AI에 요청",
+        requestPlaceholder:
+          "버튼 색상을 파란색으로 변경, 제목 텍스트 업데이트…",
+        askAi: "AI에 질문",
+        applyWithAi: "AI로 적용",
+        copyPromptTooltip: "프롬프트를 클립보드에 복사",
+        targeting: "대상:",
+        describeElementChange: "이 요소에 대한 변경 사항을 설명하세요…",
+        describeChange: "변경하려는 내용을 설명하세요…",
+        dialogDescription:
+          "변경하려는 내용을 설명하세요. 에이전트가 먼저 view-screen을 호출한 다음 코드 편집기로 편집을 적용합니다.",
+        dialogDescriptionFile:
+          "“{{file}}”에서 변경하려는 내용을 설명하세요. 에이전트가 먼저 view-screen을 호출한 다음 코드 편집기로 편집을 적용합니다.",
+      },
+    },
+  },
+  "pt-BR": {
+    designEditor: {
+      localSourceEdit: {
+        bannerNotice:
+          "As edições do código local conectado são aplicadas pelo agente de IA, não escritas diretamente.",
+        askAiToEdit: "Pedir edição à IA",
+        copyPrompt: "Copiar prompt",
+        dialogTitle: "Pedir à IA para editar a fonte conectada",
+        requestPlaceholder:
+          "Mude a cor do botão para azul, atualize o texto do título…",
+        askAi: "Perguntar à IA",
+        applyWithAi: "Aplicar com IA",
+        copyPromptTooltip: "Copiar prompt para a área de transferência",
+        targeting: "Alvo:",
+        describeElementChange: "Descreva a alteração para este elemento…",
+        describeChange: "Descreva o que você quer mudar…",
+        dialogDescription:
+          "Descreva o que você quer mudar. O agente chamará view-screen primeiro e depois aplicará as edições pelo editor de código.",
+        dialogDescriptionFile:
+          'Descreva o que você quer mudar em "{{file}}". O agente chamará view-screen primeiro e depois aplicará as edições pelo editor de código.',
+      },
+    },
+  },
+  "hi-IN": {
+    designEditor: {
+      localSourceEdit: {
+        bannerNotice:
+          "जुड़े हुए local code में बदलाव AI agent लागू करता है, सीधे नहीं लिखे जाते।",
+        askAiToEdit: "AI से edit करने को कहें",
+        copyPrompt: "Prompt कॉपी करें",
+        dialogTitle: "जुड़े हुए source को edit करने के लिए AI से कहें",
+        requestPlaceholder: "बटन का रंग नीला करें, heading text अपडेट करें…",
+        askAi: "AI से पूछें",
+        applyWithAi: "AI से लागू करें",
+        copyPromptTooltip: "Prompt को clipboard पर कॉपी करें",
+        targeting: "लक्ष्य:",
+        describeElementChange: "इस element के लिए बदलाव बताएं…",
+        describeChange: "आप क्या बदलना चाहते हैं, बताएं…",
+        dialogDescription:
+          "आप क्या बदलना चाहते हैं, बताएं। Agent पहले view-screen को call करेगा, फिर code editor से बदलाव लागू करेगा।",
+        dialogDescriptionFile:
+          '"{{file}}" में आप क्या बदलना चाहते हैं, बताएं। Agent पहले view-screen को call करेगा, फिर code editor से बदलाव लागू करेगा।',
+      },
+    },
+  },
+  "ar-SA": {
+    designEditor: {
+      localSourceEdit: {
+        bannerNotice:
+          "يطبّق وكيل الذكاء الاصطناعي التعديلات على الكود المحلي المتصل، ولا تُكتب مباشرة.",
+        askAiToEdit: "اطلب من الذكاء الاصطناعي التعديل",
+        copyPrompt: "نسخ الموجّه",
+        dialogTitle: "اطلب من الذكاء الاصطناعي تعديل المصدر المتصل",
+        requestPlaceholder: "غيّر لون الزر إلى الأزرق، وحدّث نص العنوان…",
+        askAi: "اسأل الذكاء الاصطناعي",
+        applyWithAi: "تطبيق بالذكاء الاصطناعي",
+        copyPromptTooltip: "نسخ الموجّه إلى الحافظة",
+        targeting: "الهدف:",
+        describeElementChange: "صف التغيير المطلوب على هذا العنصر…",
+        describeChange: "صف ما تريد تغييره…",
+        dialogDescription:
+          "صف ما تريد تغييره. سيستدعي الوكيل view-screen أولاً ثم يطبّق التعديلات عبر محرر الكود.",
+        dialogDescriptionFile:
+          'صف ما تريد تغييره في "{{file}}". سيستدعي الوكيل view-screen أولاً ثم يطبّق التعديلات عبر محرر الكود.',
+      },
+    },
+  },
+} satisfies Record<Exclude<LocaleCode, "en-US">, PartialMessages>;
+
 export const messagesByLocale = {
   "en-US": enUS,
   "zh-TW": mergeMessages(
@@ -9332,6 +9591,7 @@ export const messagesByLocale = {
       designShapeToolOverrides["zh-TW"],
       designPublicShareOverrides["zh-TW"],
       designVisualEditOverrides["zh-TW"],
+      designLocalSourceEditOverrides["zh-TW"],
     ),
   ),
   "zh-CN": mergeMessages(
@@ -9344,6 +9604,7 @@ export const messagesByLocale = {
       designShapeToolOverrides["zh-CN"],
       designPublicShareOverrides["zh-CN"],
       designVisualEditOverrides["zh-CN"],
+      designLocalSourceEditOverrides["zh-CN"],
       {
         root: {
           commandActions: "操作",
@@ -9395,6 +9656,7 @@ export const messagesByLocale = {
       designShapeToolOverrides["es-ES"],
       designPublicShareOverrides["es-ES"],
       designVisualEditOverrides["es-ES"],
+      designLocalSourceEditOverrides["es-ES"],
       {
         root: {
           commandActions: "Acciones",
@@ -9446,6 +9708,7 @@ export const messagesByLocale = {
       designShapeToolOverrides["fr-FR"],
       designPublicShareOverrides["fr-FR"],
       designVisualEditOverrides["fr-FR"],
+      designLocalSourceEditOverrides["fr-FR"],
       {
         root: {
           commandActions: "Actions",
@@ -9497,6 +9760,7 @@ export const messagesByLocale = {
       designShapeToolOverrides["de-DE"],
       designPublicShareOverrides["de-DE"],
       designVisualEditOverrides["de-DE"],
+      designLocalSourceEditOverrides["de-DE"],
       {
         root: {
           commandActions: "Aktionen",
@@ -9548,6 +9812,7 @@ export const messagesByLocale = {
       designShapeToolOverrides["ja-JP"],
       designPublicShareOverrides["ja-JP"],
       designVisualEditOverrides["ja-JP"],
+      designLocalSourceEditOverrides["ja-JP"],
       {
         root: {
           commandActions: "操作",
@@ -9600,6 +9865,7 @@ export const messagesByLocale = {
       designShapeToolOverrides["ko-KR"],
       designPublicShareOverrides["ko-KR"],
       designVisualEditOverrides["ko-KR"],
+      designLocalSourceEditOverrides["ko-KR"],
       {
         root: {
           commandActions: "작업",
@@ -9650,6 +9916,7 @@ export const messagesByLocale = {
       designShapeToolOverrides["pt-BR"],
       designPublicShareOverrides["pt-BR"],
       designVisualEditOverrides["pt-BR"],
+      designLocalSourceEditOverrides["pt-BR"],
       {
         root: {
           commandActions: "Ações",
@@ -9701,6 +9968,7 @@ export const messagesByLocale = {
       designShapeToolOverrides["hi-IN"],
       designPublicShareOverrides["hi-IN"],
       designVisualEditOverrides["hi-IN"],
+      designLocalSourceEditOverrides["hi-IN"],
       {
         root: {
           commandActions: "क्रियाएं",
@@ -9752,6 +10020,7 @@ export const messagesByLocale = {
       designShapeToolOverrides["ar-SA"],
       designPublicShareOverrides["ar-SA"],
       designVisualEditOverrides["ar-SA"],
+      designLocalSourceEditOverrides["ar-SA"],
       {
         root: {
           commandActions: "الإجراءات",