@agent-native/core 0.79.27 → 0.80.1

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: 2044
+- template files: 4557

package/corpus/core/CHANGELOG.md

@@ -1,5 +1,39 @@
 # @agent-native/core
 
+## 0.80.1
+
+### Patch Changes
+
+- 1d77419: Route design-system indexing through Builder-managed design-system APIs while preserving the public Figma parser export.
+- 1d77419: Fix avatar lookup routes so profile photos load for users signed in through legacy Google OAuth sessions.
+- 1d77419: Keep shared app shell outlines visible around the top corners when app content fills the main surface.
+
+## 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/skills-guide.mdx

@@ -118,6 +118,10 @@ Skills موجود في `.agents/skills/<name>/SKILL.md` ويحتوي على إر
 
 ## skills المدعوم بالتطبيق {#app-backed-skills}
 
+تشمل skills المدعومة بالتطبيق حاليا `visual-plan` و`visual-recap` من Plan،
+و`visual-edit` من Design، و`assets` من Assets، و`content` لتحرير docs/blog/MDX
+من المستودع.
+
 تحزم skills المدعومة بالتطبيق تطبيقًا أصليًا للوكيل باعتباره قطعة أثرية في سوق المهارات. يمكن أن تتضمن الحزمة تعليمات الوكيل، وبيانات تعريف موصل skills المصدرة، وتعليمات التشغيل المستضافة/المحلية، وأسطح UI مثل تطبيقات MCP.
 
 > **التفاصيل الكاملة أدناه:** يتم تغطية آليات skills المدعومة بالتطبيق (تنسيق البيان، وأوامر CLI، ومحولات السوق، وتجزئة التحديث التلقائي) في [App-backed skills — full details](#app-backed-skills-full).
@@ -328,6 +332,7 @@ scope: dev
 ```bash
 # المسار السعيد: التعليمات المصدرة بالإضافة إلى موصل MCP المستضاف.
 npx @agent-native/core@latest skills add visual-plan
+npx @agent-native/core@latest skills add visual-edit
 npx @agent-native/core@latest skills add assets
 
 # تحرير Content docs/blog/MDX مع اعتبار الريبو مصدر الحقيقة.

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

@@ -340,7 +340,7 @@ pnpm dev
 - **التصميمات** — `create-design` (صدفة فارغة)، `generate-design` (كتابة محتوى HTML/JSX)، `update-design`، `get-design`، `list-designs`، `duplicate-design`، `delete-design`، و`apply-tweaks` لاستمرار مقبض القرص المباشر القيم (لون التمييز، والكثافة، وما إلى ذلك).
 - **الملفات** — `create-file`، `update-file`، `list-files`، `delete-file` للملفات الموجودة داخل مشروع التصميم.
 - **أنظمة التصميم** — `create-design-system`، و`update-design-system`، و`get-design-system`، و`list-design-systems`، و`delete-design-system`، و`set-default-design-system`، و`analyze-brand-assets` لجمع بيانات العلامة التجارية قبل التحليل.
-- **استيراد** — `import-code`، و`import-figma`، و`import-github`، و`import-from-url`، و`import-document` (DOCX/PPTX/PDF/XLSX)، و`import-design-project` لرفع نظام التصميم من مشروع حالي.
+- **استيراد** — `index-design-system-with-builder` for Builder-backed code/GitHub design-system indexing, plus `import-figma`, `import-from-url`, `import-document` (DOCX/PPTX/PDF/XLSX), and `import-design-project` for other sources.
 - **التصدير والتسليم** — `export-html`، و`export-pdf`، و`export-svg`، و`export-zip`، و`export-coding-handoff` لتحويل التصميم إلى تسليم لأداة البرمجة.
 - **السياق والتنقل** — `view-screen` (التصميم الحالي، ملف مفتوح، عرض، سؤال معلق أو شبكة متغيرة)، `get-design-snapshot` (الحالة الحالية للوكيل الخارجي للمتابعة منها)، و`navigate`.
 
@@ -350,6 +350,60 @@ pnpm dev
 
 نظرًا لأن التصميم هو مجرد ملفات HTML/JSX مستقلة، يقوم الوكيل بتحرير نفس المصدر الذي يعرضه iframe ويأتي منه كل تصدير - لا يوجد تنسيق "AI mockup" منفصل لترجمته. يوفر نظام التصميم المرتبط الرموز المميزة ويكرم الوكيل `custom_instructions` في كل تذكرة جيل. حدد نصًا أو منطقة في المعاينة واضغط على Cmd+I لتركيز الوكيل على هذا الجزء بالضبط.
 
+### نموذج المحرر
+
+يعتمد Design على النظرة العامة أولاً عند العمل على شاشات متعددة. بعد الإنشاء
+أو التحديثات الواسعة، يفتح المحرر النظرة العامة للشاشات: لوحة لا نهائية تكون
+فيها كل شاشة إطارًا ثابتًا يمكن تحديده أو نقله أو تغيير حجمه أو إسقاطه أو
+تكراره. انقر نقرًا مزدوجًا على إطار للتركيز على شاشة واحدة.
+
+وضع الشاشة الواحدة مخصص للتمرير، والتفاعل مع سلوك النموذج الأولي، وتحرير
+طبقات DOM/الكود داخل ملف واحد معروض. تعكس لوحة الطبقات هذا التقسيم: الشاشات
+إطارات من المستوى الأعلى، وتحت الشاشة النشطة تظهر طبقات DOM/الكود المتداخلة.
+
+ثبّت `/visual-edit` عندما يحتاج وكيل البرمجة إلى فتح تطبيق محلي يعمل في
+Design بدل إنشاء HTML نموذج أولي مستقل:
+
+```bash
+npx @agent-native/core@latest skills add visual-edit
+```
+
+بعد تشغيل خادم التطوير للتطبيق الهدف، يستخدم `/visual-edit`
+`npx @agent-native/core@latest design connect` مع `add-localhost-screens` لوضع
+كل مسار أو URL مطلوب كشاشة iframe منفصلة مدعومة بعنوان URL. تبقى التدفقات
+المرقمة مثل `localhost:1234/onboarding/1` و`/onboarding/2` و`/onboarding/3`
+كشاشات منفصلة ومرتبة في وضع النظرة العامة.
+
+لأسماء طبقات مستقرة، أضف `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/skills-guide.mdx

@@ -118,6 +118,10 @@ Domäne skills folgt demselben Format wie das Framework skills. Sie kodieren Mus
 
 ## App-gestütztes skills {#app-backed-skills}
 
+Aktuelle appgestützte Skills sind `visual-plan` und `visual-recap` aus Plan,
+`visual-edit` aus Design, `assets` aus Assets und `content` für repo-basiertes
+Bearbeiten von docs/blog/MDX.
+
 App-gestütztes skills-Paket einer agentennativen App als Skill-Marktplatz-Artefakt. Das Paket kann Agentenanweisungen, exportierte skills-, MCP-Connector-Metadaten, gehostete/lokale Startanweisungen und UI-Oberflächen wie MCP-Apps enthalten.
 
 > **Vollständige Details unten:** Die Mechanismen des App-gestützten skills (Manifestformat, CLI-Befehle, Marktplatzadapter, automatisches Update-Hashing) werden in [App-backed skills — full details](#app-backed-skills-full) behandelt.
@@ -328,6 +332,7 @@ Offline-Arbeit oder datenschutzrelevante Nutzung.
 ```bash
 # Glücklicher Weg: exportierte Anweisungen plus gehosteter MCP-Connector.
 npx @agent-native/core@latest skills add visual-plan
+npx @agent-native/core@latest skills add visual-edit
 npx @agent-native/core@latest skills add assets
 
 # Repo-first Content docs/blog/MDX Bearbeitung.

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

@@ -338,7 +338,7 @@ Jeder vom Agenten aufrufbare Vorgang ist eine TypeScript-Datei in `templates/des
 - **Designs** – `create-design` (leere Shell), `generate-design` (generierten HTML/JSX-Inhalt schreiben), `update-design`, `get-design`, `list-designs`, `duplicate-design`, `delete-design` und `apply-tweaks` zum Beibehalten von Live-Tweak-Knopf-Werten (Akzentfarbe, Dichte, usw.).
 - **Dateien** – `create-file`, `update-file`, `list-files`, `delete-file` für die Dateien in einem Designprojekt.
 - **Designsysteme** – `create-design-system`, `update-design-system`, `get-design-system`, `list-design-systems`, `delete-design-system`, `set-default-design-system` und `analyze-brand-assets` zum Sammeln von Markendaten vor der Analyse.
-- **Importieren** – `import-code`, `import-figma`, `import-github`, `import-from-url`, `import-document` (DOCX/PPTX/PDF/XLSX) und `import-design-project`, um ein Designsystem aus einem vorhandenen Projekt zu entfernen.
+- **Importieren** — `index-design-system-with-builder` for Builder-backed code/GitHub design-system indexing, plus `import-figma`, `import-from-url`, `import-document` (DOCX/PPTX/PDF/XLSX), and `import-design-project` for other sources.
 - **Export & Übergabe** – `export-html`, `export-pdf`, `export-svg`, `export-zip` und `export-coding-handoff`, um ein Design in eine Codierungstool-Übergabe umzuwandeln.
 - **Kontext und Navigation** – `view-screen` (aktuelles Design, offene Datei, Ansicht, ausstehende Frage oder Variantenraster), `get-design-snapshot` (aktueller Status, von dem aus ein externer Agent fortfahren kann) und `navigate`.
 
@@ -348,6 +348,71 @@ 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.
+
+Installiere `/visual-edit`, wenn ein Coding Agent eine laufende lokale App in
+Design öffnen soll, statt eigenständiges Prototype-HTML zu generieren:
+
+```bash
+npx @agent-native/core@latest skills add visual-edit
+```
+
+Sobald der Dev-Server der Ziel-App läuft, nutzt `/visual-edit`
+`npx @agent-native/core@latest design connect` plus `add-localhost-screens`, um
+jeden angeforderten Pfad oder jede URL als eigenen URL-gestützten iframe-Screen
+zu platzieren. Nummerierte Flows wie `localhost:1234/onboarding/1`,
+`/onboarding/2` und `/onboarding/3` bleiben als getrennte, geordnete Screens im
+Overview-Modus erhalten.
+
+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/skills-guide.mdx

@@ -118,6 +118,10 @@ El dominio skills sigue el mismo formato que el marco skills. Codifican patrones
 
 ## skills respaldado por aplicación {#app-backed-skills}
 
+Las skills respaldadas por apps actuales incluyen `visual-plan` y `visual-recap`
+de Plan, `visual-edit` de Design, `assets` de Assets y `content` para editar
+docs/blog/MDX desde el repositorio.
+
 skills, respaldado por una aplicación, empaqueta una aplicación nativa del agente como un artefacto del mercado de habilidades. El paquete puede incluir instrucciones del agente, skills exportado, metadatos del conector MCP, instrucciones de inicio alojadas/locales y superficies UI como aplicaciones MCP.
 
 > **Detalles completos a continuación:** la mecánica de skills respaldado por aplicaciones (formato de manifiesto, comandos CLI, adaptadores de mercado, hash de actualización automática) se tratan en [App-backed skills — full details](#app-backed-skills-full).
@@ -328,6 +332,7 @@ trabajo sin conexión o uso sensible a la privacidad.
 ```bash
 # Camino feliz: instrucciones exportadas más conector MCP alojado.
 npx @agent-native/core@latest skills add visual-plan
+npx @agent-native/core@latest skills add visual-edit
 npx @agent-native/core@latest skills add assets
 
 # Edición de docs/blog/MDX con Content primero en el repositorio.

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

@@ -338,7 +338,7 @@ Cada operación invocable por el agente es un archivo TypeScript en `templates/d
 - **Diseños**: `create-design` (cáscara vacía), `generate-design` (contenido de HTML/JSX generado por escritura), `update-design`, `get-design`, `list-designs`, `duplicate-design`, `delete-design` y `apply-tweaks` para conservar los valores de las perillas de ajuste en vivo (color de acento, densidad, etc.).
 - **Archivos**: `create-file`, `update-file`, `list-files`, `delete-file` para los archivos dentro de un proyecto de diseño.
 - **Sistemas de diseño**: `create-design-system`, `update-design-system`, `get-design-system`, `list-design-systems`, `delete-design-system`, `set-default-design-system` y `analyze-brand-assets` para recopilar datos de marca antes del análisis.
-- **Importar**: `import-code`, `import-figma`, `import-github`, `import-from-url`, `import-document` (DOCX/PPTX/PDF/XLSX) y `import-design-project` para sacar un sistema de diseño de un proyecto existente.
+- **Importar** — `index-design-system-with-builder` for Builder-backed code/GitHub design-system indexing, plus `import-figma`, `import-from-url`, `import-document` (DOCX/PPTX/PDF/XLSX), and `import-design-project` for other sources.
 - **Exportación y transferencia**: `export-html`, `export-pdf`, `export-svg`, `export-zip` y `export-coding-handoff` para convertir un diseño en una transferencia de herramienta de codificación.
 - **Contexto y navegación**: `view-screen` (diseño actual, archivo abierto, vista, pregunta pendiente o cuadrícula de variantes), `get-design-snapshot` (estado actual desde el cual un agente externo puede continuar) y `navigate`.
 
@@ -348,6 +348,70 @@ 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.
+
+Instala `/visual-edit` cuando un agente de código deba abrir una app local en
+ejecución dentro de Design en lugar de generar HTML de prototipo independiente:
+
+```bash
+npx @agent-native/core@latest skills add visual-edit
+```
+
+Después de que el servidor dev de la app objetivo esté corriendo, `/visual-edit`
+usa `npx @agent-native/core@latest design connect` más `add-localhost-screens`
+para colocar cada ruta o URL solicitada como su propia pantalla iframe respaldada
+por URL. Los flujos numerados como `localhost:1234/onboarding/1`,
+`/onboarding/2` y `/onboarding/3` se mantienen como pantallas separadas y
+ordenadas en modo de vista general.
+
+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/skills-guide.mdx

@@ -118,6 +118,10 @@ Le domaine skills suit le même format que le framework skills. Ils codent des m
 
 ## skills soutenu par une application {#app-backed-skills}
 
+Les skills basées sur des apps incluent aujourd'hui `visual-plan` et
+`visual-recap` depuis Plan, `visual-edit` depuis Design, `assets` depuis Assets
+et `content` pour l'édition docs/blog/MDX depuis le dépôt.
+
 skills basé sur une application regroupe une application native d'agent en tant qu'artefact de marché de compétences. L'ensemble peut inclure des instructions d'agent, des métadonnées de connecteur skills exportées et MCP, des instructions de lancement hébergées/locales et des surfaces UI telles que les applications MCP.
 
 > **Tous les détails ci-dessous :** les mécanismes du skills basé sur l'application (format du manifeste, commandes CLI, adaptateurs de marché, hachage de mise à jour automatique) sont couverts dans [App-backed skills — full details](#app-backed-skills-full).
@@ -328,6 +332,7 @@ travail hors ligne ou utilisation sensible à la confidentialité.
 ```bash
 # Chemin heureux : instructions exportées et connecteur MCP hébergé.
 npx @agent-native/core@latest skills add visual-plan
+npx @agent-native/core@latest skills add visual-edit
 npx @agent-native/core@latest skills add assets
 
 # Édition docs/blog/MDX avec Content, d'abord dans le dépôt.

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

@@ -338,7 +338,7 @@ Chaque opération appelable par un agent est un fichier TypeScript dans `templat
 - **Designs** — `create-design` (coque vide), `generate-design` (contenu HTML/JSX généré par écriture), `update-design`, `get-design`, `list-designs`, `duplicate-design`, `delete-design` et `apply-tweaks` pour conserver les valeurs du bouton de réglage en direct (couleur d'accent, densité, etc.).
 - **Fichiers** — `create-file`, `update-file`, `list-files`, `delete-file` pour les fichiers contenus dans un projet de conception.
 - **Systèmes de conception** : `create-design-system`, `update-design-system`, `get-design-system`, `list-design-systems`, `delete-design-system`, `set-default-design-system` et `analyze-brand-assets` pour collecter des données de marque avant l'analyse.
-- **Importer** — `import-code`, `import-figma`, `import-github`, `import-from-url`, `import-document` (DOCX/PPTX/PDF/XLSX) et `import-design-project` pour extraire un système de conception d'un projet existant.
+- **Importer** — `index-design-system-with-builder` for Builder-backed code/GitHub design-system indexing, plus `import-figma`, `import-from-url`, `import-document` (DOCX/PPTX/PDF/XLSX), and `import-design-project` for other sources.
 - **Exportation et transfert** : `export-html`, `export-pdf`, `export-svg`, `export-zip` et `export-coding-handoff` pour transformer une conception en transfert d'outil de codage.
 - **Contexte et navigation** – `view-screen` (conception actuelle, fichier ouvert, vue, question en attente ou grille de variantes), `get-design-snapshot` (état actuel à partir duquel un agent externe peut continuer) et `navigate`.
 
@@ -348,6 +348,69 @@ 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.
+
+Installez `/visual-edit` lorsqu'un agent de code doit ouvrir une app locale en
+cours d'exécution dans Design au lieu de générer du HTML de prototype autonome :
+
+```bash
+npx @agent-native/core@latest skills add visual-edit
+```
+
+Une fois le serveur dev de l'app cible lancé, `/visual-edit` utilise
+`npx @agent-native/core@latest design connect` avec `add-localhost-screens` pour
+placer chaque chemin ou URL demandé comme son propre écran iframe adossé à une
+URL. Les flows numérotés comme `localhost:1234/onboarding/1`,
+`/onboarding/2` et `/onboarding/3` restent des écrans séparés et ordonnés en
+mode overview.
+
+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/skills-guide.mdx

@@ -118,6 +118,10 @@ Skills, `.agents/skills/<name>/SKILL.md` पर लाइव है और इ
 
 ## ऐप-समर्थित skills {#app-backed-skills}
 
+मौजूदा app-backed skills में Plan के `visual-plan` और `visual-recap`, Design का
+`visual-edit`, Assets का `assets`, और repo-backed docs/blog/MDX editing के लिए
+`content` शामिल हैं.
+
 ऐप-समर्थित skills एक कौशल बाज़ार आर्टिफैक्ट के रूप में एक एजेंट-मूल ऐप को पैकेज करता है। बंडल में एजेंट निर्देश, निर्यातित skills, MCP कनेक्टर मेटाडेटा, होस्टेड/स्थानीय लॉन्च निर्देश और UI सतह जैसे MCP ऐप्स शामिल हो सकते हैं।
 
 > **पूर्ण विवरण नीचे:** ऐप-समर्थित skills (प्रकट प्रारूप, CLI कमांड, मार्केटप्लेस एडाप्टर, ऑटो-अपडेट हैशिंग) के यांत्रिकी [App-backed skills — full details](#app-backed-skills-full) में शामिल हैं।
@@ -328,6 +332,7 @@ scope: dev
 ```bash
 # शुभ पथ: निर्यात किए गए निर्देश और होस्ट किए गए MCP कनेक्टर।
 npx @agent-native/core@latest skills add visual-plan
+npx @agent-native/core@latest skills add visual-edit
 npx @agent-native/core@latest skills add assets
 
 # रेपो-प्रथम Content docs/blog/MDX संपादन।

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

@@ -338,7 +338,7 @@ UI में रूट `templates/design/app/routes/` के अंतर्ग
 - **डिज़ाइन** - `create-design` (खाली शेल), `generate-design` (लाइव बनाए रखने के लिए HTML/JSX सामग्री लिखें), `update-design`, `get-design`, `list-designs`, `duplicate-design`, `delete-design`, और `apply-tweaks` ट्विक-नॉब मान (उच्चारण रंग, घनत्व, आदि)।
 - **फ़ाइलें** - एक डिज़ाइन प्रोजेक्ट के अंदर फ़ाइलों के लिए `create-file`, `update-file`, `list-files`, `delete-file`।
 - **डिज़ाइन सिस्टम** - विश्लेषण से पहले ब्रांड डेटा इकट्ठा करने के लिए `create-design-system`, `update-design-system`, `get-design-system`, `list-design-systems`, `delete-design-system`, `set-default-design-system`, और `analyze-brand-assets`।
-- **आयात** - `import-code`, `import-figma`, `import-github`, `import-from-url`, `import-document` (DOCX/PPTX/PDF/XLSX), और `import-design-project` किसी मौजूदा प्रोजेक्ट से डिज़ाइन सिस्टम को हटाने के लिए।
+- **आयात** — `index-design-system-with-builder` for Builder-backed code/GitHub design-system indexing, plus `import-figma`, `import-from-url`, `import-document` (DOCX/PPTX/PDF/XLSX), and `import-design-project` for other sources.
 - **निर्यात और हैंडऑफ़** - किसी डिज़ाइन को कोडिंग-टूल हैंडऑफ़ में बदलने के लिए `export-html`, `export-pdf`, `export-svg`, `export-zip`, और `export-coding-handoff`।
 - **संदर्भ और नेविगेशन** - `view-screen` (वर्तमान डिज़ाइन, खुली फ़ाइल, दृश्य, लंबित प्रश्न या भिन्न ग्रिड), `get-design-snapshot` (बाहरी एजेंट के लिए वर्तमान स्थिति जारी रखने के लिए), और `navigate`।
 
@@ -348,6 +348,64 @@ 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 होते हैं।
+
+जब coding agent को standalone prototype HTML बनाने के बजाय running local app को
+Design में खोलना हो, तब `/visual-edit` install करें:
+
+```bash
+npx @agent-native/core@latest skills add visual-edit
+```
+
+Target app dev server चलने के बाद, `/visual-edit`
+`npx @agent-native/core@latest design connect` और `add-localhost-screens` का
+उपयोग करके हर requested path या URL को अपने URL-backed iframe screen के रूप में
+place करता है। `localhost:1234/onboarding/1`, `/onboarding/2`, और
+`/onboarding/3` जैसे numbered flows overview mode में separate ordered screens
+रहते हैं।
+
+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/skills-guide.mdx

@@ -118,6 +118,10 @@ Skills は `.agents/skills/<name>/SKILL.md` にあり、エージェント向け
 
 ## アプリベースの skills {#app-backed-skills}
 
+現在の app-backed skills には、Plan の `visual-plan` と `visual-recap`、
+Design の `visual-edit`、Assets の `assets`、repo-backed docs/blog/MDX
+編集用の `content` があります。
+
 アプリベースの skills は、エージェント ネイティブ アプリをスキル マーケットプレイス アーティファクトとしてパッケージ化します。バンドルには、エージェントの指示、エクスポートされた skills、MCP コネクタ メタデータ、ホスト/ローカルの起動指示、MCP アプリなどの UI サーフェスを含めることができます。
 
 > **詳細は以下の通り:** アプリベースの skills の仕組み (マニフェスト形式、CLI コマンド、マーケットプレイス アダプター、自動更新ハッシュ) は、[App-backed skills — full details](#app-backed-skills-full) で説明されています。
@@ -328,6 +332,7 @@ Hosted はデフォルトのインストール パスです。ローカル起動
 ```bash
 # ハッピー パス: エクスポートされた命令とホストされた MCP コネクタ。
 npx @agent-native/core@latest skills add visual-plan
+npx @agent-native/core@latest skills add visual-edit
 npx @agent-native/core@latest skills add assets
 
 # リポジトリ優先コンテンツ docs/blog/MDX 編集。