@agent-native/core 0.79.27 → 0.80.0

package/corpus/README.md

@@ -27,5 +27,5 @@ rg -n "defineAction|useActionQuery" node_modules/@agent-native/core/corpus
 
 ## Generated Counts
 
-- core files: 2038
-- template files: 4461
+- core files: 2043
+- template files: 4533

package/corpus/core/CHANGELOG.md

@@ -1,5 +1,31 @@
 # @agent-native/core
 
+## 0.80.0
+
+### Minor Changes
+
+- aa345cc: Add `agent-native design connect` foundations for localhost Design bridge manifests.
+
+### Patch Changes
+
+- aa345cc: App shells use an outline-style raised surface ring and Dispatch left navigation can collapse to an animated icon rail.
+- aa345cc: Live cursors now use Figma-style pointer markers with adjacent participant labels.
+- aa345cc: Surface missing LLM provider connections before agent chat starts a run, including Builder and AI SDK engines.
+- aa345cc: Fix Chrome visual glitchiness (blank/stale regions on scroll, pan, and zoom) in
+  plan documents and canvases by removing `backdrop-filter` (`backdrop-blur`) from
+  always-rendered per-block controls. A long plan rendered 40+ per-block edit
+  triggers, each forcing its own composited backdrop layer; Chrome re-samples every
+  backdrop snapshot on each scroll frame and its backdrop-filter invalidation drops
+  tiles, leaving regions blank until the next repaint. The tiny hover-trigger chips
+  now use an opaque background, which is visually identical but eliminates the
+  composited backdrop layers. Affects the block edit trigger, diagram/mermaid
+  expand/style triggers, and wireframe style trigger.
+- aa345cc: Allow embedded MCP App controls to target their own local agent sidebar instead of relaying every submitted prompt to the host chat.
+- aa345cc: Respect silent chat context staging across app/frame boundaries so selection context can update without opening the agent sidebar.
+- aa345cc: Polish the shared chat thinking status with capitalized text and a subtle shine animation.
+- aa345cc: Add the Design `/visual-edit` skill and route it through the built-in skill installers so agents can open localhost routes as URL-backed Design screens.
+- aa345cc: Improve voice transcription and cleanup with bounded voice context packs for active composer context, learned vocabulary, and transcript cleanup prompts.
+
 ## 0.79.27
 
 ### Patch Changes

package/corpus/core/docs/content/locales/ar-SA/template-design.mdx

@@ -350,6 +350,47 @@ pnpm dev
 
 نظرًا لأن التصميم هو مجرد ملفات HTML/JSX مستقلة، يقوم الوكيل بتحرير نفس المصدر الذي يعرضه iframe ويأتي منه كل تصدير - لا يوجد تنسيق "AI mockup" منفصل لترجمته. يوفر نظام التصميم المرتبط الرموز المميزة ويكرم الوكيل `custom_instructions` في كل تذكرة جيل. حدد نصًا أو منطقة في المعاينة واضغط على Cmd+I لتركيز الوكيل على هذا الجزء بالضبط.
 
+### نموذج المحرر
+
+يعتمد Design على النظرة العامة أولاً عند العمل على شاشات متعددة. بعد الإنشاء
+أو التحديثات الواسعة، يفتح المحرر النظرة العامة للشاشات: لوحة لا نهائية تكون
+فيها كل شاشة إطارًا ثابتًا يمكن تحديده أو نقله أو تغيير حجمه أو إسقاطه أو
+تكراره. انقر نقرًا مزدوجًا على إطار للتركيز على شاشة واحدة.
+
+وضع الشاشة الواحدة مخصص للتمرير، والتفاعل مع سلوك النموذج الأولي، وتحرير
+طبقات DOM/الكود داخل ملف واحد معروض. تعكس لوحة الطبقات هذا التقسيم: الشاشات
+إطارات من المستوى الأعلى، وتحت الشاشة النشطة تظهر طبقات DOM/الكود المتداخلة.
+
+لأسماء طبقات مستقرة، أضف `data-agent-native-layer-name` إلى العناصر المهمة.
+يستخدمه Design قبل البدائل الدلالية/النصية، ويمكنه حفظ إعادة تسمية الطبقات عبر
+تحرير هذا السمة. يدعم HTML المضمن تحرير طبقات الكود محليًا للنصوص والأصناف
+والأنماط والسمات وترتيب المصدر والتغييرات البنيوية الصغيرة؛ وتقتصر التعديلات
+المرئية لطبقات الكود حاليًا على HTML. يستطيع وضع مصدر localhost تسجيل لوحات
+عمل المسارات المحلية وحلها، لكن قراءة/كتابة الملفات المحلية تبقى عقد جسر إلى
+أن يتم تعزيز عناصر التحكم الصريحة في الأذونات.
+
+### ملحقات محرر Design
+
+يتضمن المحرر علامة تبويب المفتش **Extensions** بعد **Tweaks**. تعمل
+كمسار إضافات خاص بـ Design: يمكن للمستخدمين النقر على **+ Extension** ليطلبوا
+من الوكيل بناء ملحق، أو تثبيت ملحق يعلن فتحة `design.editor.inspector`.
+
+تُعرض ملحقات Design مضمّنة بجانب لوحة العمل عبر صندوق رمل الملحقات القياسي.
+يمرر المضيف تحديثات `window.slotContext` و`window.onSlotContext(...)` مع
+`designId` الحالي، والملف النشط، وقائمة الشاشات، ومعرفات الشاشات المحددة،
+وبيانات العنصر المحدد، ووضع العرض، والتكبير، والأداة النشطة، وقيم التعديلات.
+يسمح ذلك للملحق بعرض معلومات عن التحديد الحالي، أو تقديم عناصر تحكم في النمط،
+أو بناء تدفقات عمل صغيرة حول التصميم المفتوح.
+
+للعمل الحتمي، يمكن للملحقات استدعاء إجراءات التطبيق من خلال جسر الملحقات.
+وللتغييرات المدفوعة بالذكاء الاصطناعي، اجعل الملحق يستدعي
+`agentNative.chat.send(...)` مع محدد العنصر/معرف المصدر والتغيير المطلوب. يجب
+أن يستدعي الوكيل `view-screen` أولاً، ثم يستخدم `apply-visual-edit` لتغييرات
+نمط العنصر أو الصنف أو النص أو الحركة، أو يستخدم `update-design` /
+`generate-design` مع `canvasFrames` لتغييرات موضع لوحة العمل. راجع
+[Extensions](/docs/extensions#what-an-extension-can-do) لمعرفة صندوق الرمل
+والحالة المستمرة وواجهات جسر الملحقات.
+
 ### تخصيصه
 
 التصميم عبارة عن قالب كامل وقابل للاستنساخ. بعض الأفكار الإضافية العملية:

package/corpus/core/docs/content/locales/de-DE/template-design.mdx

@@ -348,6 +348,57 @@ Der Agent weiß immer, was Sie offen haben. Das aktuelle Design, die geöffnete
 
 Da es sich bei einem Design lediglich um eigenständige HTML/JSX-Dateien handelt, bearbeitet der Agent dieselbe Quelle, die der Iframe rendert, und jeder Export stammt aus – es gibt kein separates „AI-Mockup“-Format zum Übersetzen. Ein verknüpftes Designsystem liefert Token und `custom_instructions`, die der Agent bei jedem Generationsdurchlauf ehrt. Wählen Sie in der Vorschau Text oder einen Bereich aus und drücken Sie Befehl+I, um den Agenten genau auf diesen Teil zu konzentrieren.
 
+### Editor-Modell
+
+Design ist bei Arbeit mit mehreren Bildschirmen übersichtsorientiert. Nach der
+Generierung oder größeren Aktualisierungen öffnet der Editor die
+Bildschirmübersicht: eine unendliche Arbeitsfläche, auf der jeder Bildschirm ein
+statischer Rahmen ist, den Sie auswählen, verschieben, skalieren, ablegen oder
+duplizieren können. Verwenden Sie die Vollansicht-Schaltfläche des Rahmens, wenn ein Bildschirm
+fokussiertes Scrollen oder Prototypinteraktion benötigt.
+
+Der Einzelbildschirmmodus ist für Scrollen, Interaktion mit Prototypverhalten
+und Bearbeitung der DOM-/Code-Ebenen in einer gerenderten Datei gedacht. Das
+Ebenenfenster spiegelt diese Trennung wider: Bildschirme sind Rahmen der
+obersten Ebene, darunter liegen die DOM-/Code-Ebenen des aktiven Bildschirms.
+
+Für stabile Ebenennamen fügen Sie wichtigen Elementen
+`data-agent-native-layer-name` hinzu. Design verwendet dies vor
+semantischen/textbasierten Fallbacks und kann Umbenennungen durch Bearbeiten
+dieses Attributs speichern. Inline-HTML unterstützt lokale Code-Ebenen-Edits
+für Text, Klassen, Stile, Attribute, Quellreihenfolge und kleine strukturelle
+Änderungen; visuelle Code-Ebenen-Edits sind heute HTML-only. Der
+localhost-Quellmodus kann lokale Routen-Artboards registrieren und auflösen,
+aber lokale Datei-Lese-/Schreibvorgänge bleiben ein Bridge-Vertrag, bis
+explizite Berechtigungskontrollen gehärtet sind.
+
+### Erweiterungen im Design-Editor
+
+Der Editor enthält nach **Tweaks** eine **Extensions**-Inspektorregisterkarte.
+Sie funktioniert wie eine Design-spezifische Plugin-Spur: Benutzer können auf
+**+ Extension** klicken, um den Agenten eine Erweiterung erstellen zu lassen,
+oder eine Erweiterung installieren, die den Slot `design.editor.inspector`
+deklariert.
+
+Design-Erweiterungen werden über die Standard-Erweiterungssandbox inline neben
+der Arbeitsfläche gerendert. Der Host übergibt `window.slotContext` und
+`window.onSlotContext(...)`-Updates mit der aktuellen `designId`, der aktiven
+Datei, der Bildschirmliste, ausgewählten Bildschirm-IDs, Metadaten des
+ausgewählten Elements, Ansichtsmodus, Zoom, aktivem Werkzeug und Tweak-Werten.
+So kann eine Erweiterung Informationen zur aktuellen Auswahl anzeigen,
+Stilsteuerungen anbieten oder kompakte Workflows rund um das geöffnete Design
+erstellen.
+
+Für deterministische Arbeit können Erweiterungen App-Aktionen über die
+Erweiterungsbrücke aufrufen. Für KI-gesteuerte Änderungen sollte die Erweiterung
+`agentNative.chat.send(...)` mit dem Selektor/Quell-ID des ausgewählten Elements
+und der gewünschten Änderung aufrufen. Der Agent sollte zuerst `view-screen`
+aufrufen und dann `apply-visual-edit` für Stil-, Klassen-, Text- oder
+Verschiebungsänderungen an Elementen verwenden, oder `update-design` /
+`generate-design` mit `canvasFrames` für Änderungen an der Platzierung der
+Arbeitsfläche. Siehe [Extensions](/docs/extensions#what-an-extension-can-do)
+für Sandbox, persistente Daten und Bridge-APIs.
+
 ### Anpassen
 
 Design ist eine vollständige, klonbare Vorlage. Einige praktische Erweiterungsideen:

package/corpus/core/docs/content/locales/es-ES/template-design.mdx

@@ -348,6 +348,56 @@ El agente siempre sabe lo que tienes abierto. `view-screen` devuelve el diseño
 
 Debido a que un diseño son solo archivos HTML/JSX independientes, el agente edita la misma fuente que representa el iframe y de donde proviene cada exportación; no hay un formato de "maqueta de IA" independiente para traducir. Un sistema de diseño vinculado proporciona tokens y `custom_instructions` el agente honra en cada paso de generación. Seleccione texto o una región en la vista previa y presione Cmd+I para enfocar al agente exactamente en esa parte.
 
+### Modelo del editor
+
+Design prioriza la vista general para el trabajo con varias pantallas. Después
+de generar o aplicar actualizaciones amplias, el editor abre la vista general de
+pantallas: un lienzo infinito donde cada pantalla es un marco estático que se
+puede seleccionar, mover, redimensionar, soltar o duplicar. Usa el botón de vista completa del marco cuando una pantalla necesite
+desplazamiento enfocado o interacción de prototipo.
+
+El modo de una sola pantalla sirve para desplazarse, interactuar con el
+comportamiento del prototipo y editar las capas DOM/código dentro de un archivo
+renderizado. El panel de capas refleja esa división: las pantallas son marcos de
+nivel superior, con capas DOM/código anidadas para la pantalla activa.
+
+Para nombres de capa estables, agrega `data-agent-native-layer-name` a los
+elementos importantes. Design lo usa antes de los respaldos semánticos/de texto
+y puede persistir cambios de nombre editando ese atributo. HTML inline admite
+ediciones locales de capas de código para texto, clases, estilos, atributos,
+orden del código fuente y pequeños cambios estructurales; las ediciones visuales
+de capas de código solo admiten HTML por ahora. El modo de fuente localhost
+puede registrar y resolver artboards de rutas locales, pero las lecturas y
+escrituras de archivos locales siguen siendo un contrato de puente hasta que se
+endurezcan los controles explícitos de permisos.
+
+### Extensiones del editor de Design
+
+El editor incluye una pestaña de inspector **Extensions** después de
+**Tweaks**. Funciona como un carril de plugins específico de Design: los
+usuarios pueden hacer clic en **+ Extension** para pedirle al agente que cree
+una extensión, o instalar una extensión que declare el slot
+`design.editor.inspector`.
+
+Las extensiones de Design se renderizan en línea junto al artboard mediante el
+sandbox estándar de extensiones. El host pasa actualizaciones de
+`window.slotContext` y `window.onSlotContext(...)` con el `designId` actual, el
+archivo activo, la lista de pantallas, los ids de pantalla seleccionados, los
+metadatos del elemento seleccionado, el modo de vista, el zoom, la herramienta
+activa y los valores de tweaks. Eso permite que una extensión muestre
+información sobre la selección actual, ofrezca controles de estilo o construya
+flujos compactos alrededor del diseño abierto.
+
+Para trabajo determinista, las extensiones pueden llamar acciones de la app a
+través del puente de extensiones. Para cambios impulsados por IA, haz que la
+extensión llame `agentNative.chat.send(...)` con el selector/id de origen del
+elemento seleccionado y el cambio solicitado. El agente debe llamar primero
+`view-screen`, luego usar `apply-visual-edit` para cambios de estilo, clase,
+texto o movimiento de elementos, o `update-design` / `generate-design` con
+`canvasFrames` para cambios de colocación del artboard. Consulta
+[Extensions](/docs/extensions#what-an-extension-can-do) para el sandbox, el
+estado persistente y las APIs del puente.
+
 ### Personalizarlo
 
 El diseño es una plantilla completa y clonable. Algunas ideas prácticas de extensión:

package/corpus/core/docs/content/locales/fr-FR/template-design.mdx

@@ -348,6 +348,55 @@ L'agent sait toujours ce que vous avez ouvert. La conception actuelle, le fichie
 
 Étant donné qu'une conception n'est constituée que de fichiers HTML/JSX autonomes, l'agent édite la même source que celle du rendu iframe et celle d'où provient chaque exportation : il n'existe pas de format de « maquette IA » distinct à traduire. Un système de conception lié fournit des jetons et `custom_instructions` que l'agent honore à chaque passage de génération. Sélectionnez du texte ou une région dans l'aperçu et appuyez sur Cmd+I pour concentrer l'agent exactement sur cette partie.
 
+### Modèle d'éditeur
+
+Design privilégie la vue d'ensemble pour le travail multi-écran. Après une
+génération ou une mise à jour large, l'éditeur ouvre la vue d'ensemble des
+écrans : un canevas infini où chaque écran est un cadre statique que vous pouvez
+sélectionner, déplacer, redimensionner, déposer ou dupliquer. Utilisez le bouton de vue complète du cadre lorsqu’un écran nécessite un
+défilement ciblé ou une interaction de prototype.
+
+Le mode écran unique sert à faire défiler, interagir avec le comportement du
+prototype et modifier les couches DOM/code dans un fichier rendu. Le panneau des
+couches reflète cette séparation : les écrans sont des cadres de niveau
+supérieur, avec les couches DOM/code imbriquées pour l'écran actif.
+
+Pour des noms de couche stables, ajoutez `data-agent-native-layer-name` aux
+éléments importants. Design l'utilise avant les replis sémantiques/textuels et
+peut persister les renommages en modifiant cet attribut. Le HTML inline prend en
+charge les modifications locales de couches de code pour le texte, les classes,
+les styles, les attributs, l'ordre source et les petits changements structurels;
+les modifications visuelles de couches de code sont uniquement HTML aujourd'hui.
+Le mode source localhost peut enregistrer et résoudre des artboards de routes
+locales, mais les lectures/écritures de fichiers locaux restent un contrat de
+pont jusqu'au durcissement des contrôles d'autorisation explicites.
+
+### Extensions de l'éditeur Design
+
+L'éditeur inclut un onglet d'inspecteur **Extensions** après **Tweaks**. Il
+fonctionne comme une piste de plugins propre à Design : les utilisateurs peuvent
+cliquer sur **+ Extension** pour demander à l'agent de créer une extension, ou
+installer une extension qui déclare le slot `design.editor.inspector`.
+
+Les extensions Design s'affichent en ligne à côté de l'artboard via le bac à
+sable standard des extensions. L'hôte transmet les mises à jour
+`window.slotContext` et `window.onSlotContext(...)` avec le `designId` actuel,
+le fichier actif, la liste des écrans, les ids d'écran sélectionnés, les
+métadonnées de l'élément sélectionné, le mode d'affichage, le zoom, l'outil
+actif et les valeurs de tweaks. Cela permet à une extension d'afficher des
+informations sur la sélection actuelle, d'offrir des contrôles de style ou de
+créer des workflows compacts autour du design ouvert.
+
+Pour un travail déterministe, les extensions peuvent appeler les actions de
+l'app via le pont d'extension. Pour les changements pilotés par l'IA,
+l'extension doit appeler `agentNative.chat.send(...)` avec le sélecteur/id source
+de l'élément sélectionné et la modification demandée. L'agent doit d'abord
+appeler `view-screen`, puis utiliser `apply-visual-edit` pour les changements de
+style, classe, texte ou déplacement d'élément, ou `update-design` /
+`generate-design` avec `canvasFrames` pour les changements de placement de
+l'artboard. Consultez [Extensions](/docs/extensions#what-an-extension-can-do)
+pour le bac à sable, l'état persistant et les APIs du pont.
+
 ### Le personnaliser
 
 Design est un modèle complet et clonable. Quelques idées d'extension pratiques :

package/corpus/core/docs/content/locales/hi-IN/template-design.mdx

@@ -348,6 +348,50 @@ UI में रूट `templates/design/app/routes/` के अंतर्ग
 
 क्योंकि एक डिज़ाइन केवल स्टैंडअलोन HTML/JSX फ़ाइलें है, एजेंट उसी स्रोत को संपादित करता है जो iframe प्रस्तुत करता है और प्रत्येक निर्यात आता है - अनुवाद करने के लिए कोई अलग "AI मॉकअप" प्रारूप नहीं है। एक लिंक्ड डिज़ाइन सिस्टम टोकन की आपूर्ति करता है और एजेंट हर जेनरेशन पास पर `custom_instructions` का सम्मान करता है। पूर्वावलोकन में टेक्स्ट या एक क्षेत्र का चयन करें और एजेंट को ठीक उसी हिस्से पर केंद्रित करने के लिए Cmd+I दबाएं।
 
+### संपादक मॉडल
+
+कई स्क्रीन वाले काम के लिए Design पहले overview खोलता है। generation या बड़े
+updates के बाद editor screen overview खोलता है: एक infinite canvas जहां हर
+screen एक static frame है जिसे select, move, resize, drop या duplicate किया जा
+सकता है। जब किसी screen को focused scrolling या prototype interaction चाहिए, तो frame के full-view button का उपयोग करें।
+
+Single-screen mode scrolling, prototype behavior से interact करने, और एक
+rendered file के अंदर DOM/code layers edit करने के लिए है। Layers panel यही
+model दिखाता है: screens top-level frames हैं, और active screen के नीचे nested
+DOM/code layers होते हैं।
+
+Stable layer names के लिए meaningful elements पर
+`data-agent-native-layer-name` जोड़ें। Design semantic/text fallbacks से पहले
+इसे उपयोग करता है और इसी attribute को edit करके layer renames persist कर सकता
+है। Inline HTML text, classes, styles, attributes, source order, और छोटे
+structural changes के लिए local code-layer edits support करता है; visual
+code-layer edits आज केवल HTML files के लिए हैं। Localhost source mode local
+route artboards register और resolve कर सकता है, लेकिन local file reads/writes
+explicit permission controls harden होने तक bridge contract ही हैं।
+
+### Design संपादक एक्सटेंशन
+
+संपादक में **Tweaks** के बाद एक **Extensions** इंस्पेक्टर टैब शामिल है। यह
+Design-विशिष्ट plugin lane की तरह काम करता है: उपयोगकर्ता **+ Extension** पर
+क्लिक करके एजेंट से एक्सटेंशन बनवा सकते हैं, या ऐसा एक्सटेंशन इंस्टॉल कर सकते
+हैं जो `design.editor.inspector` slot घोषित करता है।
+
+Design एक्सटेंशन मानक extension sandbox के माध्यम से artboard के बगल में inline
+render होते हैं। host `window.slotContext` और `window.onSlotContext(...)`
+updates में वर्तमान `designId`, सक्रिय फ़ाइल, screen list, selected screen ids,
+selected element metadata, view mode, zoom, active tool, और tweak values भेजता
+है। इससे एक्सटेंशन वर्तमान selection की जानकारी दिखा सकता है, style controls
+दे सकता है, या खुले design के आसपास compact workflows बना सकता है।
+
+Deterministic काम के लिए, एक्सटेंशन extension bridge के माध्यम से app actions
+कॉल कर सकते हैं। AI-driven बदलावों के लिए, एक्सटेंशन से
+`agentNative.chat.send(...)` कॉल करवाएं जिसमें selected element selector/source
+id और मांगा गया बदलाव शामिल हो। एजेंट को पहले `view-screen` कॉल करना चाहिए,
+फिर element style, class, text, या move changes के लिए `apply-visual-edit`, या
+artboard placement changes के लिए `canvasFrames` के साथ `update-design` /
+`generate-design` का उपयोग करना चाहिए। sandbox, persistent state, और bridge
+APIs के लिए [Extensions](/docs/extensions#what-an-extension-can-do) देखें।
+
 ### इसे अनुकूलित करना
 
 डिज़ाइन एक पूर्ण, क्लोन करने योग्य टेम्पलेट है। कुछ व्यावहारिक विस्तार विचार:

package/corpus/core/docs/content/locales/ja-JP/template-design.mdx

@@ -350,6 +350,52 @@ UI のルートは `templates/design/app/routes/` の下にあります: `_index
 
 デザインは単なるスタンドアロンの HTML/JSX ファイルであるため、エージェントは iframe がレンダリングし、すべてのエクスポート元と同じソースを編集します。変換する個別の「AI モックアップ」形式はありません。リンクされた設計システムはトークンと `custom_instructions` を提供し、エージェントは世代パスごとにそれを尊重します。プレビューでテキストまたは領域を選択し、Cmd+I を押して、エージェントをその部分に正確に集中させます。
 
+### エディターモデル
+
+Design は複数画面の作業では概要を最初に使います。生成後または大きな更
+新後、エディターは画面概要を開きます。これは無限キャンバスで、各画面は
+選択、移動、リサイズ、ドロップ、複製できる静的フレームです。集中スクロールやプロトタイプ操作が必要な画面では、フレームのフルビューボタンを使用します。
+
+単一画面モードは、スクロール、プロトタイプ動作とのインタラクション、1
+つのレンダリング済みファイル内の DOM/コードレイヤー編集に使います。レ
+イヤーパネルもこの分離を反映します。画面は最上位フレームで、アクティブ
+画面の下に DOM/コードレイヤーがネストされます。
+
+安定したレイヤー名には、意味のある要素に
+`data-agent-native-layer-name` を追加します。Design はセマンティック/テ
+キストのフォールバックより先にこれを使い、この属性を編集してレイヤー名
+変更を永続化できます。Inline HTML は、テキスト、class、style、attribute、
+ソース順、小さな構造変更のローカルコードレイヤー編集をサポートします。
+ビジュアルコードレイヤー編集は現在 HTML のみです。Localhost source mode
+はローカル route artboard を登録・解決できますが、ローカルファイルの読
+み書きは明示的な権限制御が強化されるまで bridge contract のままです。
+
+### Design エディター拡張機能
+
+エディターには **Tweaks** の後に **Extensions** インスペクタータブがあり
+ます。これは Design 専用のプラグインレーンのように機能します。ユーザー
+は **+ Extension** をクリックしてエージェントに拡張機能を作成させるか、
+`design.editor.inspector` スロットを宣言する拡張機能をインストールできま
+す。
+
+Design 拡張機能は、標準の拡張機能サンドボックスを通じてアートボードの
+横にインライン表示されます。ホストは `window.slotContext` と
+`window.onSlotContext(...)` の更新として、現在の `designId`、アクティブ
+なファイル、画面一覧、選択中の画面 ID、選択中の要素メタデータ、表示モー
+ド、ズーム、アクティブツール、tweak 値を渡します。これにより、拡張機能
+は現在の選択に関する情報を表示したり、スタイル操作を提供したり、開いて
+いるデザインの周辺に小さなワークフローを構築したりできます。
+
+決定的な処理では、拡張機能は拡張機能ブリッジ経由で app actions を呼び
+出せます。AI 主導の変更では、選択中の要素 selector/source id と要求され
+た変更を含めて `agentNative.chat.send(...)` を呼び出すようにします。エー
+ジェントはまず `view-screen` を呼び出し、要素の style、class、text、move
+変更には `apply-visual-edit` を、アートボード配置の変更には `canvasFrames`
+付きの `update-design` / `generate-design` を使うべきです。サンドボックス、
+永続状態、ブリッジ API については
+[Extensions](/docs/extensions#what-an-extension-can-do) を参照してくださ
+い。
+
 ### カスタマイズ
 
 デザインは完全な複製可能なテンプレートです。いくつかの実践的な拡張アイデア:

package/corpus/core/docs/content/locales/ko-KR/template-design.mdx

@@ -348,6 +348,50 @@ UI의 경로는 `templates/design/app/routes/` 아래에 있습니다: `_index.t
 
 디자인은 독립형 HTML/JSX 파일이므로 에이전트는 iframe이 렌더링하고 모든 내보내기가 시작되는 동일한 소스를 편집합니다. 번역할 별도의 "AI 모형" 형식은 없습니다. 연결된 디자인 시스템은 에이전트가 모든 세대 패스에서 존중하는 토큰과 `custom_instructions`를 제공합니다. 미리보기에서 텍스트나 영역을 선택하고 Cmd+I를 눌러 상담사가 정확히 해당 부분에 집중하도록 합니다.
 
+### 편집기 모델
+
+Design은 여러 화면 작업에서 overview를 우선합니다. 생성 또는 넓은 업데이트
+후 편집기는 screen overview를 엽니다. 이곳은 각 화면이 선택, 이동, 크기 조정,
+드롭, 복제 가능한 정적 frame으로 배치되는 infinite canvas입니다. frame을 두
+번 클릭하면 단일 화면에 집중합니다.
+
+Single-screen mode는 스크롤, prototype behavior와의 상호작용, 하나의 렌더링된
+파일 안의 DOM/code layers 편집에 사용합니다. Layers panel도 같은 구조를
+반영합니다. screens는 top-level frames이고, active screen 아래에 nested
+DOM/code layers가 표시됩니다.
+
+안정적인 layer name을 위해 의미 있는 요소에 `data-agent-native-layer-name`을
+추가하세요. Design은 semantic/text fallback보다 이것을 먼저 사용하며, 해당
+attribute를 편집해 layer rename을 persist할 수 있습니다. Inline HTML은 text,
+classes, styles, attributes, source order, 작은 structural changes에 대한 local
+code-layer edits를 지원합니다. visual code-layer edits는 현재 HTML-only입니다.
+Localhost source mode는 local route artboards를 register/resolve할 수 있지만,
+local file reads/writes는 explicit permission controls가 harden될 때까지 bridge
+contract로 남아 있습니다.
+
+### Design 편집기 확장
+
+편집기에는 **Tweaks** 뒤에 **Extensions** 검사기 탭이 있습니다. Design 전용
+플러그인 레인처럼 작동합니다. 사용자는 **+ Extension**을 클릭해 에이전트에게
+확장을 만들게 하거나 `design.editor.inspector` 슬롯을 선언한 확장을 설치할
+수 있습니다.
+
+Design 확장은 표준 확장 sandbox를 통해 artboard 옆에 inline으로 렌더링됩니다.
+호스트는 현재 `designId`, 활성 파일, 화면 목록, 선택된 화면 id, 선택된 요소
+메타데이터, 보기 모드, zoom, 활성 도구, tweak 값을 `window.slotContext`와
+`window.onSlotContext(...)` 업데이트로 전달합니다. 이를 통해 확장은 현재
+selection 정보를 표시하고, 스타일 컨트롤을 제공하거나, 열린 디자인 주변의
+작은 워크플로를 만들 수 있습니다.
+
+결정적인 작업의 경우 확장은 extension bridge를 통해 app actions를 호출할 수
+있습니다. AI 기반 변경의 경우 선택된 요소 selector/source id와 요청한 변경을
+담아 `agentNative.chat.send(...)`를 호출하게 하세요. 에이전트는 먼저
+`view-screen`을 호출한 다음 요소 style, class, text, move 변경에는
+`apply-visual-edit`를, artboard placement 변경에는 `canvasFrames`와 함께
+`update-design` / `generate-design`를 사용해야 합니다. sandbox, persistent
+state, bridge APIs는 [Extensions](/docs/extensions#what-an-extension-can-do)를
+참조하세요.
+
 ### 맞춤 설정
 
 디자인은 완전하고 복제 가능한 템플릿입니다. 실용적인 확장 아이디어:

package/corpus/core/docs/content/locales/pt-BR/template-design.mdx

@@ -348,6 +348,54 @@ O agente sempre sabe o que você tem em aberto. O design atual, o arquivo aberto
 
 Como um design consiste apenas em arquivos HTML/JSX independentes, o agente edita a mesma fonte que o iframe renderiza e de onde vem cada exportação — não há um formato de "maquete de IA" separado para traduzir. Um sistema de design vinculado fornece tokens e `custom_instructions` que o agente homenageia em cada passagem de geração. Selecione o texto ou uma região na visualização e pressione Cmd+I para focar o agente exatamente nessa parte.
 
+### Modelo do editor
+
+Design prioriza a visão geral para trabalhos com várias telas. Depois da
+geração ou de atualizações amplas, o editor abre a visão geral de telas: uma
+tela infinita onde cada tela é um frame estático que pode ser selecionado,
+movido, redimensionado, solto ou duplicado. Use o botão de visualização completa
+do frame quando uma tela precisar de rolagem focada ou interação de protótipo.
+
+O modo de tela única serve para rolar, interagir com o comportamento do
+protótipo e editar as camadas DOM/código dentro de um arquivo renderizado. O
+painel de camadas reflete essa divisão: telas são frames de nível superior, com
+camadas DOM/código aninhadas para a tela ativa.
+
+Para nomes de camada estáveis, adicione `data-agent-native-layer-name` a
+elementos importantes. O Design usa isso antes de fallbacks semânticos/de texto
+e pode persistir renomeações editando esse atributo. HTML inline aceita edições
+locais de camadas de código para texto, classes, estilos, atributos, ordem do
+código-fonte e pequenas mudanças estruturais; edições visuais de camadas de
+código são somente HTML hoje. O modo de fonte localhost pode registrar e
+resolver artboards de rotas locais, mas leituras/escritas de arquivos locais
+continuam sendo um contrato de bridge até que controles explícitos de permissão
+sejam fortalecidos.
+
+### Extensões do editor de Design
+
+O editor inclui uma aba de inspetor **Extensions** depois de **Tweaks**. Ela
+funciona como uma faixa de plugins específica do Design: os usuários podem
+clicar em **+ Extension** para pedir ao agente que crie uma extensão, ou
+instalar uma extensão que declare o slot `design.editor.inspector`.
+
+As extensões do Design são renderizadas inline ao lado do artboard pelo sandbox
+padrão de extensões. O host passa atualizações de `window.slotContext` e
+`window.onSlotContext(...)` com o `designId` atual, arquivo ativo, lista de
+telas, ids de telas selecionadas, metadados do elemento selecionado, modo de
+visualização, zoom, ferramenta ativa e valores de tweaks. Isso permite que uma
+extensão mostre informações sobre a seleção atual, ofereça controles de estilo
+ou crie fluxos compactos ao redor do design aberto.
+
+Para trabalho determinístico, as extensões podem chamar ações do app pelo
+bridge de extensões. Para mudanças guiadas por IA, faça a extensão chamar
+`agentNative.chat.send(...)` com o seletor/id de origem do elemento selecionado
+e a mudança solicitada. O agente deve chamar `view-screen` primeiro e depois
+usar `apply-visual-edit` para mudanças de estilo, classe, texto ou movimento de
+elementos, ou `update-design` / `generate-design` com `canvasFrames` para
+mudanças de posicionamento do artboard. Veja
+[Extensions](/docs/extensions#what-an-extension-can-do) para o sandbox, estado
+persistente e APIs do bridge.
+
 ### Personalizando
 
 Design é um modelo completo e clonável. Algumas ideias práticas de extensão:

package/corpus/core/docs/content/locales/zh-CN/template-design.mdx

@@ -348,6 +348,42 @@ UI 中的路由位于 `templates/design/app/routes/` 下：`_index.tsx`（列表
 
 因为设计只是独立的 HTML/JSX 文件，所以代理编辑 iframe 渲染和每个导出来自的相同源 - 没有单独的“AI 模型”格式需要翻译。链接设计系统提供代币和代理在每一代通行证上兑现的 `custom_instructions`。在预览中选择文本或区域，然后按 Cmd+I 将代理集中在该部分上。
 
+### 编辑器模型
+
+Design 对多屏工作采用概览优先。生成或进行大范围更新后，编辑器会打开屏幕
+概览：一个无限画布，其中每个屏幕都是可选择、移动、调整大小、拖放或复制的
+静态框架。需要聚焦滚动或原型交互时，请使用框架的完整视图按钮。
+
+单屏模式用于滚动、与原型行为交互，以及编辑一个已渲染文件内的 DOM/代码
+层。图层面板也反映这种分工：屏幕是顶层框架，活动屏幕下嵌套 DOM/代码层。
+
+为了获得稳定的图层名称，请在有意义的元素上添加
+`data-agent-native-layer-name`。Design 会优先使用它，然后才使用语义/文本回
+退，并且可以通过编辑该属性来持久保存图层重命名。Inline HTML 支持本地代
+码层编辑，包括文本、class、style、attribute、源顺序和小型结构调整；可视
+代码层编辑目前仅支持 HTML。Localhost source mode 可以注册并解析本地路由
+artboard，但本地文件读写仍是桥接合同，直到显式权限控制完成加固。
+
+### Design 编辑器扩展
+
+编辑器在 **Tweaks** 之后包含一个 **Extensions** 检查器标签。它像 Design
+专属的插件通道：用户可以点击 **+ Extension** 让代理创建扩展，也可以安装声
+明 `design.editor.inspector` slot 的扩展。
+
+Design 扩展通过标准扩展 sandbox 内嵌渲染在 artboard 旁边。宿主会通过
+`window.slotContext` 和 `window.onSlotContext(...)` 更新传入当前
+`designId`、活动文件、屏幕列表、已选屏幕 id、已选元素元数据、视图模式、
+缩放、活动工具和 tweak 值。这样扩展就可以显示当前选择的信息、提供样式控
+件，或围绕打开的设计构建紧凑工作流。
+
+对于确定性的工作，扩展可以通过扩展桥调用 app actions。对于 AI 驱动的变
+更，让扩展调用 `agentNative.chat.send(...)`，并附带已选元素的 selector/source
+id 和请求的更改。代理应先调用 `view-screen`，然后用 `apply-visual-edit`
+处理元素 style、class、text 或 move 更改，或用带 `canvasFrames` 的
+`update-design` / `generate-design` 处理 artboard placement 更改。有关
+sandbox、持久状态和桥接 API，请参阅
+[Extensions](/docs/extensions#what-an-extension-can-do)。
+
 ### 自定义它
 
 设计是一个完整的、可克隆的模板。一些实用的扩展想法：

package/corpus/core/docs/content/locales/zh-TW/template-design.mdx

@@ -348,6 +348,44 @@ UI 中的路由位於 `templates/design/app/routes/` 下：`_index.tsx`（清單
 
 因為設計只是獨立的 HTML/JSX 檔案，所以代理編輯 iframe 渲染和每個匯出來自的相同來源 - 沒有單獨的“AI 模型”格式需要翻譯。連結設計系統提供代幣和代理在每一代通行證上兌現的 `custom_instructions`。在預覽中選取文字或區域，然後按 Cmd+I 將代理集中在該部分上。
 
+### 編輯器模型
+
+Design 對多畫面工作採用概覽優先。產生或進行大範圍更新後，編輯器會開啟
+畫面概覽：一個無限畫布，其中每個畫面都是可選取、移動、調整大小、拖放或
+複製的靜態框架。需要聚焦捲動或原型互動時，請使用框架的完整檢視按鈕。
+
+單畫面模式用於捲動、與原型行為互動，以及編輯一個已渲染檔案內的 DOM/程
+式碼圖層。圖層面板也反映這種分工：畫面是頂層框架，作用中畫面下嵌套
+DOM/程式碼圖層。
+
+若要取得穩定的圖層名稱，請在有意義的元素上加入
+`data-agent-native-layer-name`。Design 會優先使用它，然後才使用語意/文字
+後備，並且可以透過編輯該屬性來持久保存圖層重新命名。Inline HTML 支援本
+機程式碼圖層編輯，包括文字、class、style、attribute、來源順序和小型結構
+調整；視覺程式碼圖層編輯目前僅支援 HTML。Localhost source mode 可以註冊
+並解析本機路由 artboard，但本機檔案讀寫仍是橋接合約，直到明確權限控制
+完成加固。
+
+### Design 編輯器擴充功能
+
+編輯器在 **Tweaks** 之後包含一個 **Extensions** 檢查器標籤。它像 Design
+專屬的外掛通道：使用者可以點擊 **+ Extension** 讓代理建立擴充功能，也可
+以安裝宣告 `design.editor.inspector` slot 的擴充功能。
+
+Design 擴充功能會透過標準擴充 sandbox 內嵌渲染在 artboard 旁邊。host 會
+透過 `window.slotContext` 和 `window.onSlotContext(...)` 更新傳入目前的
+`designId`、作用中檔案、畫面清單、已選畫面 id、已選元素中繼資料、檢視模
+式、縮放、作用中工具和 tweak 值。這讓擴充功能可以顯示目前選取項目的資
+訊、提供樣式控制，或圍繞開啟的設計建立精簡工作流程。
+
+對於確定性的工作，擴充功能可以透過擴充橋接呼叫 app actions。對於 AI 驅
+動的變更，讓擴充功能呼叫 `agentNative.chat.send(...)`，並附上已選元素的
+selector/source id 和要求的變更。代理應先呼叫 `view-screen`，再用
+`apply-visual-edit` 處理元素 style、class、text 或 move 變更，或用帶有
+`canvasFrames` 的 `update-design` / `generate-design` 處理 artboard placement
+變更。關於 sandbox、持久狀態和橋接 API，請參閱
+[Extensions](/docs/extensions#what-an-extension-can-do)。
+
 ### 自訂它
 
 設計是一個完整的、可克隆的範本。一些實用的擴充功能想法：

package/corpus/core/docs/content/template-design.mdx

@@ -348,6 +348,51 @@ The agent always knows what you have open. The current design, the open file, th
 
 Because a design is just standalone HTML/JSX files, the agent edits the same source the iframe renders and every export comes from — there is no separate "AI mockup" format to translate. A linked design system supplies tokens and `custom_instructions` the agent honors on every generation pass. Select text or a region in the preview and hit Cmd+I to focus the agent on exactly that part.
 
+### Editor model
+
+Design is overview-first for multi-screen work. After generation or broad
+updates, the editor opens the screen overview: an infinite canvas where each
+screen is a static frame you can select, move, resize, drop, or duplicate.
+Use a frame's full-view button when one screen needs focused scrolling or
+prototype interaction.
+
+Single-screen mode is for scrolling, interacting with prototype behavior, and
+editing the DOM/code layers inside one rendered file. The layers panel reflects
+that split: screens are top-level frames, with nested DOM/code layers for the
+active screen.
+
+For stable layer names, add `data-agent-native-layer-name` to meaningful
+elements. Design uses it before semantic/text fallbacks and can persist layer
+renames by editing that attribute. Inline HTML supports local code-layer edits
+for text, classes, styles, attributes, source order, and small structural
+changes; visual code-layer edits are HTML-only today. Localhost source mode can
+register and resolve local route artboards, but local file reads/writes remain a
+bridge contract until explicit permission controls are hardened.
+
+### Design editor extensions
+
+The editor includes an **Extensions** inspector tab after **Tweaks**. It works
+like a Design-specific plugin lane: users can click **+ Extension** to ask the
+agent to build an extension, or install an extension that declares the
+`design.editor.inspector` slot.
+
+Design extensions render inline beside the artboard through the standard
+extension sandbox. The host passes `window.slotContext` and
+`window.onSlotContext(...)` updates with the current `designId`, active file,
+screen list, selected screen ids, selected element metadata, view mode, zoom,
+active tool, and tweak values. That lets an extension show information about
+the current selection, offer style controls, or build compact workflows around
+the open design.
+
+For deterministic work, extensions can call app actions through the extension
+bridge. For AI-driven changes, have the extension call
+`agentNative.chat.send(...)` with the selected element selector/source id and
+requested change. The agent should call `view-screen` first, then use
+`apply-visual-edit` for element style, class, text, or move changes, or
+`update-design` / `generate-design` with `canvasFrames` for artboard placement
+changes. See [Extensions](/docs/extensions#what-an-extension-can-do) for the
+sandbox, persistent state, and bridge APIs.
+
 ### Customizing it
 
 Design is a complete, cloneable template. Some practical extension ideas: