@robosophy/ui-vue 1.2.0 → 1.2.1

package/icon-scanner.md

@@ -1,388 +1,388 @@
-# Icon Scanner — @robosophy/ui-vue
-
-## Overview
-
-`robosophyMaterialSymbols()` es un plugin de Vite que genera un sprite SVG con solo los
-iconos de **Material Symbols** que tu codigo realmente usa. Sin fuentes tipograficas,
-sin subset fonts, sin dependencias npm.
-
-**Pipeline:**
-
-```
-source code → scan (8 patterns) → merge with manifest → download SVGs → inline SVG sprite
-```
-
-El scanner opera en **build time** y en **dev mode** (con file watching). Escanea archivos
-`.vue`, `.ts`, `.tsx`, `.js`, `.jsx`, y `.mjs` del proyecto, extrae nombres de icono,
-familias y pesos, y descarga los SVGs correspondientes del repositorio oficial de Google.
-
-Los iconos que usan los componentes internos de la libreria (`RsSidebar`, `RsAccountSelector`,
-etc.) se precargan en `dist/icon-manifest.json` durante el build del paquete y se fusionan
-con los detectados en el proyecto consumidor.
-
----
-
-## Quick Reference
-
-| # | Pattern | Categoria | Detecta | Ejemplo |
-|---|---------|-----------|---------|---------|
-| 1 | `<RsIcon>` tag | Componente | `name` estatico + ternarias | `<RsIcon name="home" />` |
-| 2 | `rsPrimeIcon()` | Componente | String literal en helper | `rsPrimeIcon("home")` |
-| 3 | `icon:` property | Dato | Objeto con `icon:` key | `{ icon: "home" }` |
-| 5 | Icon arrays | Dato | Array en variable `*icon*` | `const iconNames = ["home"]` |
-| 5b | Icon objects | Dato | Objeto en variable `*icon*` | `const iconMap = { pc: "article" }` |
-| 6a | Component icon prop | Cross-file | `icon=` en tag PascalCase | `<CustomButton icon="home" />` |
-| 6b | Proxy components | Cross-file | Prop forwarding a `<RsIcon :name>` | `<ProxyIcon icon="home" />` |
-| 4 | Magic comments | Fallback | Declaracion explicita | `// @robosophy-icon: home` |
-
----
-
-## Automatic Detection
-
-Estos 7 patrones se activan solos. No requieren configuracion manual, solo codigo fuente
-donde los nombres de icono aparezcan como **string literals**.
-
-### Component Patterns
-
-#### Pattern 1: `<RsIcon>` tag
-
-**Regex:** `/ <RsIcon\b([\s\S]*?)>/g`
-
-Detecta usos directos del componente `<RsIcon>` con `name` estatico, ternarias en `:name`,
-template literals, y tags multi-linea. Soporta `family`, `:family`, `weight`, `:weight`.
-
-**Detectado:**
-```vue
-<RsIcon name="home" />
-<RsIcon name="home" family="rounded" />
-<RsIcon :name="cond ? 'home' : 'settings'" family="rounded" weight="200" />
-<RsIcon
-  name="home"
-  family="rounded"
-/>
-<RsIcon :name="`home`" />
-```
-
-**No detectado** (variables en `:name`):
-```vue
-<RsIcon :name="iconVar" />
-<RsIcon :name="item.icon" />
-<RsIcon v-for="name in list" :name="name" />
-```
-
-> 💡 Si el binding tiene ternarias con string literals, ambas ramas se extraen.
-> Si es solo una variable (`:name="iconProp"`), usa Pattern 3 en la fuente de datos
-> o Magic Comments como ultimo recurso.
-
----
-
-#### Pattern 2: `rsPrimeIcon()` helper
-
-**Regex:** `/\brsPrimeIcon\(\s*["'`]([a-z0-9_]+)["'`](?:\s*,\s*\{([^)]*)\})?/g`
-
-Detecta el helper que PrimeVue usa como string de clases para `Button.icon`,
-`MenuItem.icon`, etc. Soporta `family` opcional.
-
-**Detectado:**
-```ts
-rsPrimeIcon("home")
-rsPrimeIcon('settings', { family: 'rounded' })
-rsPrimeIcon(`home`)
-```
-
-**No detectado:**
-```ts
-rsPrimeIcon(variableName)
-```
-
----
-
-### Data Patterns
-
-#### Pattern 3: `icon:` property
-
-**Regex:** `/\bicon\s*:\s*["'`]([a-z0-9_]+)["'`]/g`
-
-Detecta objetos con una propiedad `icon:` y extrae `weight:` y `family:` del mismo objeto.
-Usa `findEnclosingObject` para encontrar los limites del objeto, ignorando comentarios,
-strings escapados y template literals.
-
-**Detectado:**
-```ts
-const items = [
-  { label: "Inbox", icon: "inbox" },
-  { label: "Settings", icon: "settings", family: "rounded", weight: 200 },
-  { icon: `home` },
-]
-```
-
-**No detectado:**
-```ts
-{ icon: dynamicVar }     // variable reference
-{ icon }                 // shorthand property
-{ ["icon"]: "home" }     // computed property key
-```
-
-> 💡 Pattern 3 es la forma mas comun de declarar iconos en datos de navegacion.
-> RsSidebar recibe `items` con `icon:` — se detecta automaticamente.
-
----
-
-#### Pattern 5: Icon arrays
-
-**Regex:** `/(?:const|let|var)\s+(\w*[Ii]con\w*)\s*=\s*\[/g`
-
-Detecta arrays asignados a variables cuyo nombre contiene "icon" (case-insensitive).
-Extrae strings del nivel superior del array, incluyendo arrays anidados y template literals.
-
-**Detectado:**
-```ts
-const iconNames = ["home", "settings", "info"]
-const sidebarIcons = ["home", "search"]
-const ICON_LIST = ["warning", "error"]
-```
-
-```ts
-// Arrays anidados
-const iconGroups = [
-  ["home", "settings"],   // ✅ detectados
-  "search"                // ✅ detectado
-]
-```
-
-**No detectado:**
-```ts
-const names = ["home", "settings"]   // sin "icon" en nombre
-const items = [{ icon: "home" }]     // Pattern 3 lo cubre
-```
-
----
-
-#### Pattern 5b: Icon objects
-
-**Regex:** `/(?:const|let|var)\s+(\w*[Ii]con\w*)[^=]*=\s*\{/g`
-
-Detecta objetos literales asignados a variables con "icon" en el nombre y extrae todos
-los string values que matchean el patron de nombre de icono. Soporta anotaciones de tipo
-TypeScript (`: Record<K, V>`) y TypeScript generics con `<>`.
-
-**Detectado:**
-```ts
-const variantIconMap: Record<string, string> = {
-  pc: "article",
-  alta: "account_circle",
-  cc: "account_balance_wallet",
-  cyo: "nest_eco_leaf",
-}
-```
-
-```ts
-const iconConfig = {
-  default: "home",
-  active: "settings",
-}
-```
-
-**No detectado:**
-```ts
-const names = { key: "article" }   // sin "icon" en nombre
-```
-
-> 💡 Pattern 5b fue creado especificamente para `variantIconMap` en RsSidebar,
-> donde las claves son nombres de variante y los valores son iconos.
-
----
-
-### Cross-file Patterns
-
-#### Pattern 6a: Component icon prop
-
-**Regex:** `/<([A-Z][a-zA-Z0-9_]*)\b([\s\S]*?)>/g`
-
-Detecta el atributo `icon`, `iconName` o `icon-name` en cualquier tag PascalCase
-(excepto `<RsIcon>` que usa `name`). Funciona sin analisis cross-file.
-
-**Detectado:**
-```vue
-<CustomButton icon="home" />
-<AnotherComponent iconName="settings" />
-<ThirdThing icon-name="search" />
-```
-
-**No detectado:**
-```vue
-<RsIcon icon="home" />           <!-- RsIcon usa name, no icon -->
-<CustomButton :icon="var" />     <!-- dynamic binding -->
-```
-
-> 💡 Este patron es util cuando un componente expone un prop `icon` y el valor
-> se pasa como string literal en el template del consumidor.
-
----
-
-#### Pattern 6b: Proxy components
-
-**Analisis en dos fases:**
-
-1. **Fase 1** — Encuentra componentes que hacen forwarding de un prop a `<RsIcon>`:
-   - Tienen `defineProps` con al menos un prop
-   - Tienen `<RsIcon :name="propName">` donde `propName` es un prop
-   - Tienen `defineOptions({ name: "ComponentName" })`
-2. **Fase 2** — Escanea los consumos de esos componentes y extrae valores del prop `icon`
-
-**Detectado:**
-
-Componente (`CustomIconButton.vue`):
-```vue
-<script setup lang="ts">
-defineOptions({ name: "CustomIconButton" })
-defineProps<{ icon: string }>()
-</script>
-<template>
-  <RsIcon :name="icon" />
-</template>
-```
-
-Consumo (`App.vue`):
-```vue
-<CustomIconButton icon="home" />       <!-- ✅ detectado -->
-<CustomIconButton icon="settings" />   <!-- ✅ detectado -->
-```
-
-**No detectado:**
-- Componentes sin `defineProps`
-- Componentes sin `defineOptions({ name: ... })`
-- Props que no se pasan a `<RsIcon :name="prop">`
-- Bindings dinamicos (`:icon="variable"`)
-
----
-
-## Manual Fallbacks
-
-Cuando ningun patron automatico detecta tu icono (ej: viene de una API, de un enum,
-o de una variable calculada), tenes dos opciones. **Usalas solo cuando los patrones
-automaticos no alcancen.**
-
-### Magic comments (Pattern 4)
-
-**Regex:** `/(?:\/\/|\/\*)\s*@robosophy-icon:\s*([a-z0-9_]+)/g`
-
-Declara el icono explicitamente en el mismo archivo donde se usa:
-
-```ts
-// @robosophy-icon: manage_accounts
-const item = { icon: props.iconName }
-```
-
-Soporta `family=` y `weight=` opcionales en la misma linea:
-
-```ts
-// @robosophy-icon: settings family=rounded weight=200
-```
-
-### `include` (plugin config)
-
-Para iconos usados en muchos lugares o controlados por configuracion remota:
-
-```ts
-robosophyMaterialSymbols({
-  include: [
-    "home",
-    { family: "rounded", name: "settings", weight: 200 },
-  ],
-})
-```
-
-Si se omite `weight`, se incluyen todos los pesos validos (100-700).
-
----
-
-## Plugin Options
-
-| Option | Type | Default | Description |
-|--------|------|---------|-------------|
-| `include` | `IconInput[]` | `[]` | Iconos forzados. String = nombre, objeto = `{ family?, name, weight? }` |
-| `scan` | `boolean` | `true` | `false` desactiva el escaneo. Todos los iconos deben ir en `include` |
-| `roots` | `string[]` | `["./src"]` | Directorios a escanear |
-| `outputDir` | `string` | `"assets"` | Directorio de salida del sprite SVG |
-| `fontDisplay` | `string` | — | CSS `font-display` |
-| `preload` | `boolean` | `false` | Precarga el sprite en el `<head>` |
-
----
-
-## `icon-manifest.json`
-
-Generado por `scripts/generate-icon-manifest.mjs` durante el build del paquete.
-Escanea `src/components/` y produce `dist/icon-manifest.json`.
-
-```json
-{
-  "outlined": ["home", "search", "settings"],
-  "rounded": ["settings"],
-  "sharp": []
-}
-```
-
-**Rol en el pipeline:**
-1. Build genera el manifiesto desde los componentes de la libreria
-2. Plugin de Vite carga el manifiesto como baseline
-3. Plugin escanea el proyecto consumidor para iconos adicionales
-4. Plugin descarga los SVGs del set combinado
-
-El manifiesto asegura que los iconos de `RsSidebar`, `RsAccountSelector`, etc. esten
-siempre disponibles, incluso si el proyecto consumidor no usa esos componentes.
-
----
-
-## Best Practices
-
-### Para escribir codigo que se detecta solo
-
-1. **Usa `<RsIcon name="home" />`** — siempre detectado por Pattern 1
-2. **Declara iconos en objetos con `icon:`** — Pattern 3 extrae automaticamente
-3. **Nombra variables con "icon"** cuando almacenes nombres de icono — Patterns 5 y 5b se activan
-4. **Pasa iconos como string literal** a componentes con prop `icon` — Pattern 6a lo detecta
-5. **Usa `rsPrimeIcon("home")`** para PrimeVue — Pattern 2 lo cubre
-
-### Para componentes que envuelven RsIcon
-
-Si creas un componente que recibe un icono por prop y lo pasa a `<RsIcon :name>`:
-
-- Usa `defineProps` con el nombre del prop tipado
-- Usa `defineOptions({ name: "ComponentName" })` para registrar el nombre
-- Pattern 6b lo detectara automaticamente
-
-Ejemplo:
-```vue
-<script setup lang="ts">
-defineOptions({ name: "MyIconButton" })
-defineProps<{ icon: string }>()
-</script>
-<template>
-  <button><RsIcon :name="icon" /></button>
-</template>
-```
-
-### Cuando nada funciona
-
-Usa magic comments o `include` — pero considera si podes reescribir el codigo para
-que el scanner lo detecte automaticamente. Es menos mantenimiento a futuro.
-
-### Testing de nombres
-
-```
-https://fonts.google.com/icons?icon.query=icon_name
-```
-
----
-
-## Changelog
-
-| Date | Change |
-|------|--------|
-| 2026-07-17 | Documentacion reestructurada: 8 patrones agrupados por categoria, automaticos primero |
-| 2026-07-17 | **Pattern 5b** (icon objects), **Pattern 6a** (component icon prop), **Pattern 6b** (proxy components) added |
-| 2026-07-13 | **Pattern 4** (magic comments) and **Pattern 5** (icon arrays) added |
-| 2026-07-13 | `findEnclosingObject`: ahora maneja comentarios, strings escapados y template literals |
-| 2026-07-13 | `resolveNames`: bindings `:name` dinamicos ya no tratan nombres de variable como iconos |
-| 2026-07-13 | Pattern 3: weight y family se extraen del objeto contenedor |
+# Icon Scanner — @robosophy/ui-vue
+
+## Overview
+
+`robosophyMaterialSymbols()` es un plugin de Vite que genera un sprite SVG con solo los
+iconos de **Material Symbols** que tu codigo realmente usa. Sin fuentes tipograficas,
+sin subset fonts, sin dependencias npm.
+
+**Pipeline:**
+
+```
+source code → scan (8 patterns) → merge with manifest → download SVGs → inline SVG sprite
+```
+
+El scanner opera en **build time** y en **dev mode** (con file watching). Escanea archivos
+`.vue`, `.ts`, `.tsx`, `.js`, `.jsx`, y `.mjs` del proyecto, extrae nombres de icono,
+familias y pesos, y descarga los SVGs correspondientes del repositorio oficial de Google.
+
+Los iconos que usan los componentes internos de la libreria (`RsSidebar`, `RsAccountSelector`,
+etc.) se precargan en `dist/icon-manifest.json` durante el build del paquete y se fusionan
+con los detectados en el proyecto consumidor.
+
+---
+
+## Quick Reference
+
+| # | Pattern | Categoria | Detecta | Ejemplo |
+|---|---------|-----------|---------|---------|
+| 1 | `<RsIcon>` tag | Componente | `name` estatico + ternarias | `<RsIcon name="home" />` |
+| 2 | `rsPrimeIcon()` | Componente | String literal en helper | `rsPrimeIcon("home")` |
+| 3 | `icon:` property | Dato | Objeto con `icon:` key | `{ icon: "home" }` |
+| 5 | Icon arrays | Dato | Array en variable `*icon*` | `const iconNames = ["home"]` |
+| 5b | Icon objects | Dato | Objeto en variable `*icon*` | `const iconMap = { pc: "article" }` |
+| 6a | Component icon prop | Cross-file | `icon=` en tag PascalCase | `<CustomButton icon="home" />` |
+| 6b | Proxy components | Cross-file | Prop forwarding a `<RsIcon :name>` | `<ProxyIcon icon="home" />` |
+| 4 | Magic comments | Fallback | Declaracion explicita | `// @robosophy-icon: home` |
+
+---
+
+## Automatic Detection
+
+Estos 7 patrones se activan solos. No requieren configuracion manual, solo codigo fuente
+donde los nombres de icono aparezcan como **string literals**.
+
+### Component Patterns
+
+#### Pattern 1: `<RsIcon>` tag
+
+**Regex:** `/ <RsIcon\b([\s\S]*?)>/g`
+
+Detecta usos directos del componente `<RsIcon>` con `name` estatico, ternarias en `:name`,
+template literals, y tags multi-linea. Soporta `family`, `:family`, `weight`, `:weight`.
+
+**Detectado:**
+```vue
+<RsIcon name="home" />
+<RsIcon name="home" family="rounded" />
+<RsIcon :name="cond ? 'home' : 'settings'" family="rounded" weight="200" />
+<RsIcon
+  name="home"
+  family="rounded"
+/>
+<RsIcon :name="`home`" />
+```
+
+**No detectado** (variables en `:name`):
+```vue
+<RsIcon :name="iconVar" />
+<RsIcon :name="item.icon" />
+<RsIcon v-for="name in list" :name="name" />
+```
+
+> 💡 Si el binding tiene ternarias con string literals, ambas ramas se extraen.
+> Si es solo una variable (`:name="iconProp"`), usa Pattern 3 en la fuente de datos
+> o Magic Comments como ultimo recurso.
+
+---
+
+#### Pattern 2: `rsPrimeIcon()` helper
+
+**Regex:** `/\brsPrimeIcon\(\s*["'`]([a-z0-9_]+)["'`](?:\s*,\s*\{([^)]*)\})?/g`
+
+Detecta el helper que PrimeVue usa como string de clases para `Button.icon`,
+`MenuItem.icon`, etc. Soporta `family` opcional.
+
+**Detectado:**
+```ts
+rsPrimeIcon("home")
+rsPrimeIcon('settings', { family: 'rounded' })
+rsPrimeIcon(`home`)
+```
+
+**No detectado:**
+```ts
+rsPrimeIcon(variableName)
+```
+
+---
+
+### Data Patterns
+
+#### Pattern 3: `icon:` property
+
+**Regex:** `/\bicon\s*:\s*["'`]([a-z0-9_]+)["'`]/g`
+
+Detecta objetos con una propiedad `icon:` y extrae `weight:` y `family:` del mismo objeto.
+Usa `findEnclosingObject` para encontrar los limites del objeto, ignorando comentarios,
+strings escapados y template literals.
+
+**Detectado:**
+```ts
+const items = [
+  { label: "Inbox", icon: "inbox" },
+  { label: "Settings", icon: "settings", family: "rounded", weight: 200 },
+  { icon: `home` },
+]
+```
+
+**No detectado:**
+```ts
+{ icon: dynamicVar }     // variable reference
+{ icon }                 // shorthand property
+{ ["icon"]: "home" }     // computed property key
+```
+
+> 💡 Pattern 3 es la forma mas comun de declarar iconos en datos de navegacion.
+> RsSidebar recibe `items` con `icon:` — se detecta automaticamente.
+
+---
+
+#### Pattern 5: Icon arrays
+
+**Regex:** `/(?:const|let|var)\s+(\w*[Ii]con\w*)\s*=\s*\[/g`
+
+Detecta arrays asignados a variables cuyo nombre contiene "icon" (case-insensitive).
+Extrae strings del nivel superior del array, incluyendo arrays anidados y template literals.
+
+**Detectado:**
+```ts
+const iconNames = ["home", "settings", "info"]
+const sidebarIcons = ["home", "search"]
+const ICON_LIST = ["warning", "error"]
+```
+
+```ts
+// Arrays anidados
+const iconGroups = [
+  ["home", "settings"],   // ✅ detectados
+  "search"                // ✅ detectado
+]
+```
+
+**No detectado:**
+```ts
+const names = ["home", "settings"]   // sin "icon" en nombre
+const items = [{ icon: "home" }]     // Pattern 3 lo cubre
+```
+
+---
+
+#### Pattern 5b: Icon objects
+
+**Regex:** `/(?:const|let|var)\s+(\w*[Ii]con\w*)[^=]*=\s*\{/g`
+
+Detecta objetos literales asignados a variables con "icon" en el nombre y extrae todos
+los string values que matchean el patron de nombre de icono. Soporta anotaciones de tipo
+TypeScript (`: Record<K, V>`) y TypeScript generics con `<>`.
+
+**Detectado:**
+```ts
+const variantIconMap: Record<string, string> = {
+  pc: "article",
+  alta: "account_circle",
+  cc: "account_balance_wallet",
+  cyo: "nest_eco_leaf",
+}
+```
+
+```ts
+const iconConfig = {
+  default: "home",
+  active: "settings",
+}
+```
+
+**No detectado:**
+```ts
+const names = { key: "article" }   // sin "icon" en nombre
+```
+
+> 💡 Pattern 5b fue creado especificamente para `variantIconMap` en RsSidebar,
+> donde las claves son nombres de variante y los valores son iconos.
+
+---
+
+### Cross-file Patterns
+
+#### Pattern 6a: Component icon prop
+
+**Regex:** `/<([A-Z][a-zA-Z0-9_]*)\b([\s\S]*?)>/g`
+
+Detecta el atributo `icon`, `iconName` o `icon-name` en cualquier tag PascalCase
+(excepto `<RsIcon>` que usa `name`). Funciona sin analisis cross-file.
+
+**Detectado:**
+```vue
+<CustomButton icon="home" />
+<AnotherComponent iconName="settings" />
+<ThirdThing icon-name="search" />
+```
+
+**No detectado:**
+```vue
+<RsIcon icon="home" />           <!-- RsIcon usa name, no icon -->
+<CustomButton :icon="var" />     <!-- dynamic binding -->
+```
+
+> 💡 Este patron es util cuando un componente expone un prop `icon` y el valor
+> se pasa como string literal en el template del consumidor.
+
+---
+
+#### Pattern 6b: Proxy components
+
+**Analisis en dos fases:**
+
+1. **Fase 1** — Encuentra componentes que hacen forwarding de un prop a `<RsIcon>`:
+   - Tienen `defineProps` con al menos un prop
+   - Tienen `<RsIcon :name="propName">` donde `propName` es un prop
+   - Tienen `defineOptions({ name: "ComponentName" })`
+2. **Fase 2** — Escanea los consumos de esos componentes y extrae valores del prop `icon`
+
+**Detectado:**
+
+Componente (`CustomIconButton.vue`):
+```vue
+<script setup lang="ts">
+defineOptions({ name: "CustomIconButton" })
+defineProps<{ icon: string }>()
+</script>
+<template>
+  <RsIcon :name="icon" />
+</template>
+```
+
+Consumo (`App.vue`):
+```vue
+<CustomIconButton icon="home" />       <!-- ✅ detectado -->
+<CustomIconButton icon="settings" />   <!-- ✅ detectado -->
+```
+
+**No detectado:**
+- Componentes sin `defineProps`
+- Componentes sin `defineOptions({ name: ... })`
+- Props que no se pasan a `<RsIcon :name="prop">`
+- Bindings dinamicos (`:icon="variable"`)
+
+---
+
+## Manual Fallbacks
+
+Cuando ningun patron automatico detecta tu icono (ej: viene de una API, de un enum,
+o de una variable calculada), tenes dos opciones. **Usalas solo cuando los patrones
+automaticos no alcancen.**
+
+### Magic comments (Pattern 4)
+
+**Regex:** `/(?:\/\/|\/\*)\s*@robosophy-icon:\s*([a-z0-9_]+)/g`
+
+Declara el icono explicitamente en el mismo archivo donde se usa:
+
+```ts
+// @robosophy-icon: manage_accounts
+const item = { icon: props.iconName }
+```
+
+Soporta `family=` y `weight=` opcionales en la misma linea:
+
+```ts
+// @robosophy-icon: settings family=rounded weight=200
+```
+
+### `include` (plugin config)
+
+Para iconos usados en muchos lugares o controlados por configuracion remota:
+
+```ts
+robosophyMaterialSymbols({
+  include: [
+    "home",
+    { family: "rounded", name: "settings", weight: 200 },
+  ],
+})
+```
+
+Si se omite `weight`, se incluyen todos los pesos validos (100-700).
+
+---
+
+## Plugin Options
+
+| Option | Type | Default | Description |
+|--------|------|---------|-------------|
+| `include` | `IconInput[]` | `[]` | Iconos forzados. String = nombre, objeto = `{ family?, name, weight? }` |
+| `scan` | `boolean` | `true` | `false` desactiva el escaneo. Todos los iconos deben ir en `include` |
+| `roots` | `string[]` | `["./src"]` | Directorios a escanear |
+| `outputDir` | `string` | `"assets"` | Directorio de salida del sprite SVG |
+| `fontDisplay` | `string` | — | CSS `font-display` |
+| `preload` | `boolean` | `false` | Precarga el sprite en el `<head>` |
+
+---
+
+## `icon-manifest.json`
+
+Generado por `scripts/generate-icon-manifest.mjs` durante el build del paquete.
+Escanea `src/components/` y produce `dist/icon-manifest.json`.
+
+```json
+{
+  "outlined": ["home", "search", "settings"],
+  "rounded": ["settings"],
+  "sharp": []
+}
+```
+
+**Rol en el pipeline:**
+1. Build genera el manifiesto desde los componentes de la libreria
+2. Plugin de Vite carga el manifiesto como baseline
+3. Plugin escanea el proyecto consumidor para iconos adicionales
+4. Plugin descarga los SVGs del set combinado
+
+El manifiesto asegura que los iconos de `RsSidebar`, `RsAccountSelector`, etc. esten
+siempre disponibles, incluso si el proyecto consumidor no usa esos componentes.
+
+---
+
+## Best Practices
+
+### Para escribir codigo que se detecta solo
+
+1. **Usa `<RsIcon name="home" />`** — siempre detectado por Pattern 1
+2. **Declara iconos en objetos con `icon:`** — Pattern 3 extrae automaticamente
+3. **Nombra variables con "icon"** cuando almacenes nombres de icono — Patterns 5 y 5b se activan
+4. **Pasa iconos como string literal** a componentes con prop `icon` — Pattern 6a lo detecta
+5. **Usa `rsPrimeIcon("home")`** para PrimeVue — Pattern 2 lo cubre
+
+### Para componentes que envuelven RsIcon
+
+Si creas un componente que recibe un icono por prop y lo pasa a `<RsIcon :name>`:
+
+- Usa `defineProps` con el nombre del prop tipado
+- Usa `defineOptions({ name: "ComponentName" })` para registrar el nombre
+- Pattern 6b lo detectara automaticamente
+
+Ejemplo:
+```vue
+<script setup lang="ts">
+defineOptions({ name: "MyIconButton" })
+defineProps<{ icon: string }>()
+</script>
+<template>
+  <button><RsIcon :name="icon" /></button>
+</template>
+```
+
+### Cuando nada funciona
+
+Usa magic comments o `include` — pero considera si podes reescribir el codigo para
+que el scanner lo detecte automaticamente. Es menos mantenimiento a futuro.
+
+### Testing de nombres
+
+```
+https://fonts.google.com/icons?icon.query=icon_name
+```
+
+---
+
+## Changelog
+
+| Date | Change |
+|------|--------|
+| 2026-07-17 | Documentacion reestructurada: 8 patrones agrupados por categoria, automaticos primero |
+| 2026-07-17 | **Pattern 5b** (icon objects), **Pattern 6a** (component icon prop), **Pattern 6b** (proxy components) added |
+| 2026-07-13 | **Pattern 4** (magic comments) and **Pattern 5** (icon arrays) added |
+| 2026-07-13 | `findEnclosingObject`: ahora maneja comentarios, strings escapados y template literals |
+| 2026-07-13 | `resolveNames`: bindings `:name` dinamicos ya no tratan nombres de variable como iconos |
+| 2026-07-13 | Pattern 3: weight y family se extraen del objeto contenedor |