@robosophy/ui-vue 1.1.11 → 1.1.12

package/AGENTS.md

@@ -1,40 +1,40 @@
-# Robosophy UI Vue Agent Notes
-
-Use `@robosophy/ui-vue` before creating project-local UI components from scratch.
-
-## Consumer Rules
-
-- Import shared components from `@robosophy/ui-vue`.
-- Read `components.md` for available components, API shape, and composition examples.
-- Read `dist/index.d.ts` when exact prop, emit, or type names are needed.
-- Keep app-specific behavior in the consuming project: router pushes, stores, API calls, permissions, logout, redirects, and module switching.
-- Prefer props and event handlers over hardcoded actions inside components.
-- Use slots for project-specific content when the component exposes one.
-- Use PrimeVue `Button` for actions in PrimeVue apps.
-- Use `RsSidebar` for module navigation and `RsAccountSelector` for user/account switching.
-- Use `@robosophy/tokens` CSS variables (`--rs-*`) for new styles.
-- Do not duplicate `@robosophy/tokens/tokens.css` when the app already imports `@robosophy/prime-theme/prime.css`.
-
-## CSS Imports
-
-PrimeVue apps:
-
-```ts
-import PrimeVue from "primevue/config";
-import RobosophyPreset from "@robosophy/prime-theme";
-import "@robosophy/prime-theme/prime.css";
-
-app.use(PrimeVue, {
-  theme: {
-    preset: RobosophyPreset,
-  },
-});
-```
-
-Non-PrimeVue apps:
-
-```ts
-import "@robosophy/tokens/tokens.css";
-```
-
-Component styles are carried by the component entrypoints. This package does not expose a global `styles.css`.
+# Robosophy UI Vue Agent Notes
+
+Use `@robosophy/ui-vue` before creating project-local UI components from scratch.
+
+## Consumer Rules
+
+- Import shared components from `@robosophy/ui-vue`.
+- Read `components.md` for available components, API shape, and composition examples.
+- Read `dist/index.d.ts` when exact prop, emit, or type names are needed.
+- Keep app-specific behavior in the consuming project: router pushes, stores, API calls, permissions, logout, redirects, and module switching.
+- Prefer props and event handlers over hardcoded actions inside components.
+- Use slots for project-specific content when the component exposes one.
+- Use PrimeVue `Button` for actions in PrimeVue apps.
+- Use `RsSidebar` for module navigation and `RsAccountSelector` for user/account switching.
+- Use `@robosophy/tokens` CSS variables (`--rs-*`) for new styles.
+- Do not duplicate `@robosophy/tokens/tokens.css` when the app already imports `@robosophy/prime-theme/prime.css`.
+
+## CSS Imports
+
+PrimeVue apps:
+
+```ts
+import PrimeVue from "primevue/config";
+import RobosophyPreset from "@robosophy/prime-theme";
+import "@robosophy/prime-theme/prime.css";
+
+app.use(PrimeVue, {
+  theme: {
+    preset: RobosophyPreset,
+  },
+});
+```
+
+Non-PrimeVue apps:
+
+```ts
+import "@robosophy/tokens/tokens.css";
+```
+
+Component styles are carried by the component entrypoints. This package does not expose a global `styles.css`.

package/README.md

@@ -1,235 +1,235 @@
-# @robosophy/ui-vue
-
-Vue 3 component library for shared Robosophy UI.
-
-## Documentation
-
-Interactive component documentation, examples, props, and usage notes are published with Storybook:
-
-https://robosophy.gitlab.io/robosophy-basf/robosophy-library/
-
-The npmjs page shows this README as the package overview. Use the Storybook docs for the full component library reference.
-
-## Install
-
-Con PrimeVue:
-
-```sh
-npm install @robosophy/ui-vue @robosophy/prime-theme vue primevue
-```
-
-Sin PrimeVue:
-
-```sh
-npm install @robosophy/ui-vue @robosophy/tokens vue
-```
-
-## PrimeVue theme
-
-Si la app usa PrimeVue, registra el preset de Robosophy y carga sus tokens/overrides una vez:
-
-```ts
-import PrimeVue from "primevue/config";
-import RobosophyPreset from "@robosophy/prime-theme";
-import "@robosophy/prime-theme/prime.css";
-
-app.use(PrimeVue, {
-  theme: {
-    preset: RobosophyPreset,
-  },
-});
-```
-
-`prime.css` ya importa `@robosophy/tokens/tokens.css`, asi que no dupliques ese import.
-
-Si la app no usa PrimeVue, importa tokens una vez:
-
-```ts
-import "@robosophy/tokens/tokens.css";
-```
-
-Components carry their own local styles through their component entrypoint. This package does not expose a global `styles.css`.
-
-## AI agent context
-
-For agents working inside a consuming project, read these package files first:
-
-- `node_modules/@robosophy/ui-vue/AGENTS.md`: short rules for prioritizing Robosophy components.
-- `node_modules/@robosophy/ui-vue/components.md`: component inventory, APIs, and examples.
-- `node_modules/@robosophy/ui-vue/dist/index.d.ts`: exact exported types and component contracts.
-
-Use `@robosophy/ui-vue` components before creating local equivalents. Keep router, stores, fetches, permissions, and logout in the consuming app.
-
-## Usage
-
-```vue
-<script setup lang="ts">
-import { RsAccountSelector, RsCard, RsIcon, RsSidebar, rsPrimeIcon } from "@robosophy/ui-vue";
-
-const user = {
-  email: "usuario@robosophy.com",
-  initials: "UR",
-  name: "Usuario Robosophy",
-};
-
-const accounts = [
-  { id: "1000", label: "Cuenta Activa SA", initials: "CA", active: true },
-  { id: "2000", label: "Cuenta Inactiva SRL", initials: "CI" },
-];
-
-const actions = [
-  { id: "profile", label: "Ver mi perfil", icon: "manage_accounts" },
-];
-
-const footerActions = [
-  { id: "logout", label: "Cerrar sesion", icon: "logout", variant: "danger" },
-];
-
-const sidebarItems = [
-  { id: "dashboard", label: "Dashboard", icon: "dashboard", active: true },
-  { id: "settings", label: "Configuracion", icon: "settings" },
-];
-
-const sidebarModules = [
-  { text: "Mi Alta", link: "/alta" },
-  { text: "Mi Cuenta y Orden", link: "/cyo", active: true },
-  { text: "Mi Cuenta Corriente", link: "/cc" },
-];
-</script>
-
-<template>
-  <RsSidebar
-    :items="sidebarItems"
-    :modules="sidebarModules"
-    :navigate-on-module-select="false"
-    @item-click="navigateToSection"
-    @module-select="trackModuleSelection"
-  />
-
-  <RsAccountSelector
-    :user="user"
-    :accounts="accounts"
-    :actions="actions"
-    :footer-actions="footerActions"
-    @select-account="switchAccount"
-    @action="handleAction"
-    @footer-action="handleFooterAction"
-  />
-
-  <RsCard title="Reusable card" subtitle="Shared layout">
-    Content from the consuming project.
-  </RsCard>
-
-  <RsIcon name="home" />
-</template>
-```
-
-Optional plugin registration:
-
-```ts
-import { createApp } from "vue";
-import PrimeVue from "primevue/config";
-import RobosophyPreset from "@robosophy/prime-theme";
-import RobosophyUiVue from "@robosophy/ui-vue";
-import "@robosophy/prime-theme/prime.css";
-
-createApp(App)
-  .use(PrimeVue, {
-    theme: {
-      preset: RobosophyPreset,
-    },
-  })
-  .use(RobosophyUiVue)
-  .mount("#app");
-```
-
-## Material Symbols
-
-`RsIcon` renderiza iconos SVG inline. Combinalo con el plugin de Vite que descarga solo los SVGs
-necesarios desde el repositorio oficial de Google y genera un sprite inyectado en el HTML:
-
-```ts
-// vite.config.ts
-import { defineConfig } from "vite";
-import vue from "@vitejs/plugin-vue";
-import { robosophyMaterialSymbols } from "@robosophy/ui-vue/vite";
-
-export default defineConfig({
-  plugins: [
-    vue(),
-    robosophyMaterialSymbols(),
-  ],
-});
-```
-
-El plugin escanea automaticamente usos de `<RsIcon name="..." />`, `rsPrimeIcon("...")` y
-objetos con `icon: "..."` en el codigo fuente. No hace falta declarar iconos a mano.
-En build descarga los SVGs del CDN de GitHub, los cachea localmente y genera un sprite SVG
-inline. No se cargan fuentes tipograficas.
-
-El sprite incluye variantes para fill (outlined/filled) y grade (-25, 0, 200).
-
-### Iconos dinamicos (opcional)
-
-Si un icono se calcula en runtime (API, permisos, configuracion remota, etc.), declaralo
-en `include` para que el scanner lo incluya:
-
-```ts
-robosophyMaterialSymbols({
-  include: [
-    "home",
-    { family: "rounded", name: "settings" },
-  ],
-});
-```
-
-### PrimeVue
-
-Para APIs de PrimeVue que reciben `icon` como string, usa el helper:
-
-```vue
-<Button label="Inicio" :icon="rsPrimeIcon('home')" />
-<Button label="Configurar" :icon="rsPrimeIcon('settings', { family: 'rounded' })" />
-```
-
-Para control total sobre props (fill, grade, etc.), usa el slot `#icon`:
-
-```vue
-<Button label="Favorito">
-  <template #icon>
-    <RsIcon name="favorite" fill color="danger" />
-  </template>
-</Button>
-```
-
-## Component Structure
-
-Every public component must be self-contained:
-
-```txt
-src/components/RsCard/
-  RsCard.vue
-  RsCard.css
-  RsCard.types.ts
-  RsCard.test.ts
-  RsCard.stories.ts
-  index.ts
-```
-
-Rules:
-
-- use `@robosophy/tokens` variables for visual decisions;
-- keep styles local to the component folder;
-- add tests and Storybook stories with every exported component;
-- use props for stable API and slots for flexible project content;
-- use PrimeVue only when it provides behavior that belongs inside the component.
-- use PrimeVue `Button` for actions in PrimeVue apps.
-- use `RsSidebar` for reusable module navigation instead of project-local navbars.
-
-## Scripts
-
-```sh
-npm run build -w @robosophy/ui-vue
-npm run test -w @robosophy/ui-vue
-npm run build:storybook -w @robosophy/ui-vue
-```
+# @robosophy/ui-vue
+
+Vue 3 component library for shared Robosophy UI.
+
+## Documentation
+
+Interactive component documentation, examples, props, and usage notes are published with Storybook:
+
+https://robosophy.gitlab.io/robosophy-basf/robosophy-library/
+
+The npmjs page shows this README as the package overview. Use the Storybook docs for the full component library reference.
+
+## Install
+
+Con PrimeVue:
+
+```sh
+npm install @robosophy/ui-vue @robosophy/prime-theme vue primevue
+```
+
+Sin PrimeVue:
+
+```sh
+npm install @robosophy/ui-vue @robosophy/tokens vue
+```
+
+## PrimeVue theme
+
+Si la app usa PrimeVue, registra el preset de Robosophy y carga sus tokens/overrides una vez:
+
+```ts
+import PrimeVue from "primevue/config";
+import RobosophyPreset from "@robosophy/prime-theme";
+import "@robosophy/prime-theme/prime.css";
+
+app.use(PrimeVue, {
+  theme: {
+    preset: RobosophyPreset,
+  },
+});
+```
+
+`prime.css` ya importa `@robosophy/tokens/tokens.css`, asi que no dupliques ese import.
+
+Si la app no usa PrimeVue, importa tokens una vez:
+
+```ts
+import "@robosophy/tokens/tokens.css";
+```
+
+Components carry their own local styles through their component entrypoint. This package does not expose a global `styles.css`.
+
+## AI agent context
+
+For agents working inside a consuming project, read these package files first:
+
+- `node_modules/@robosophy/ui-vue/AGENTS.md`: short rules for prioritizing Robosophy components.
+- `node_modules/@robosophy/ui-vue/components.md`: component inventory, APIs, and examples.
+- `node_modules/@robosophy/ui-vue/dist/index.d.ts`: exact exported types and component contracts.
+
+Use `@robosophy/ui-vue` components before creating local equivalents. Keep router, stores, fetches, permissions, and logout in the consuming app.
+
+## Usage
+
+```vue
+<script setup lang="ts">
+import { RsAccountSelector, RsCard, RsIcon, RsSidebar, rsPrimeIcon } from "@robosophy/ui-vue";
+
+const user = {
+  email: "usuario@robosophy.com",
+  initials: "UR",
+  name: "Usuario Robosophy",
+};
+
+const accounts = [
+  { id: "1000", label: "Cuenta Activa SA", initials: "CA", active: true },
+  { id: "2000", label: "Cuenta Inactiva SRL", initials: "CI" },
+];
+
+const actions = [
+  { id: "profile", label: "Ver mi perfil", icon: "manage_accounts" },
+];
+
+const footerActions = [
+  { id: "logout", label: "Cerrar sesion", icon: "logout", variant: "danger" },
+];
+
+const sidebarItems = [
+  { id: "dashboard", label: "Dashboard", icon: "dashboard", active: true },
+  { id: "settings", label: "Configuracion", icon: "settings" },
+];
+
+const sidebarModules = [
+  { text: "Mi Alta", link: "/alta" },
+  { text: "Mi Cuenta y Orden", link: "/cyo", active: true },
+  { text: "Mi Cuenta Corriente", link: "/cc" },
+];
+</script>
+
+<template>
+  <RsSidebar
+    :items="sidebarItems"
+    :modules="sidebarModules"
+    :navigate-on-module-select="false"
+    @item-click="navigateToSection"
+    @module-select="trackModuleSelection"
+  />
+
+  <RsAccountSelector
+    :user="user"
+    :accounts="accounts"
+    :actions="actions"
+    :footer-actions="footerActions"
+    @select-account="switchAccount"
+    @action="handleAction"
+    @footer-action="handleFooterAction"
+  />
+
+  <RsCard title="Reusable card" subtitle="Shared layout">
+    Content from the consuming project.
+  </RsCard>
+
+  <RsIcon name="home" />
+</template>
+```
+
+Optional plugin registration:
+
+```ts
+import { createApp } from "vue";
+import PrimeVue from "primevue/config";
+import RobosophyPreset from "@robosophy/prime-theme";
+import RobosophyUiVue from "@robosophy/ui-vue";
+import "@robosophy/prime-theme/prime.css";
+
+createApp(App)
+  .use(PrimeVue, {
+    theme: {
+      preset: RobosophyPreset,
+    },
+  })
+  .use(RobosophyUiVue)
+  .mount("#app");
+```
+
+## Material Symbols
+
+`RsIcon` renderiza iconos SVG inline. Combinalo con el plugin de Vite que descarga solo los SVGs
+necesarios desde el repositorio oficial de Google y genera un sprite inyectado en el HTML:
+
+```ts
+// vite.config.ts
+import { defineConfig } from "vite";
+import vue from "@vitejs/plugin-vue";
+import { robosophyMaterialSymbols } from "@robosophy/ui-vue/vite";
+
+export default defineConfig({
+  plugins: [
+    vue(),
+    robosophyMaterialSymbols(),
+  ],
+});
+```
+
+El plugin escanea automaticamente usos de `<RsIcon name="..." />`, `rsPrimeIcon("...")` y
+objetos con `icon: "..."` en el codigo fuente. No hace falta declarar iconos a mano.
+En build descarga los SVGs del CDN de GitHub, los cachea localmente y genera un sprite SVG
+inline. No se cargan fuentes tipograficas.
+
+El sprite incluye variantes para fill (outlined/filled) y grade (-25, 0, 200).
+
+### Iconos dinamicos (opcional)
+
+Si un icono se calcula en runtime (API, permisos, configuracion remota, etc.), declaralo
+en `include` para que el scanner lo incluya:
+
+```ts
+robosophyMaterialSymbols({
+  include: [
+    "home",
+    { family: "rounded", name: "settings" },
+  ],
+});
+```
+
+### PrimeVue
+
+Para APIs de PrimeVue que reciben `icon` como string, usa el helper:
+
+```vue
+<Button label="Inicio" :icon="rsPrimeIcon('home')" />
+<Button label="Configurar" :icon="rsPrimeIcon('settings', { family: 'rounded' })" />
+```
+
+Para control total sobre props (fill, grade, etc.), usa el slot `#icon`:
+
+```vue
+<Button label="Favorito">
+  <template #icon>
+    <RsIcon name="favorite" fill color="danger" />
+  </template>
+</Button>
+```
+
+## Component Structure
+
+Every public component must be self-contained:
+
+```txt
+src/components/RsCard/
+  RsCard.vue
+  RsCard.css
+  RsCard.types.ts
+  RsCard.test.ts
+  RsCard.stories.ts
+  index.ts
+```
+
+Rules:
+
+- use `@robosophy/tokens` variables for visual decisions;
+- keep styles local to the component folder;
+- add tests and Storybook stories with every exported component;
+- use props for stable API and slots for flexible project content;
+- use PrimeVue only when it provides behavior that belongs inside the component.
+- use PrimeVue `Button` for actions in PrimeVue apps.
+- use `RsSidebar` for reusable module navigation instead of project-local navbars.
+
+## Scripts
+
+```sh
+npm run build -w @robosophy/ui-vue
+npm run test -w @robosophy/ui-vue
+npm run build:storybook -w @robosophy/ui-vue
+```

package/ai-context.md

@@ -1,53 +1,53 @@
-# @robosophy/ui-vue AI Context
-
-Use this package for shared Vue 3 UI components.
-
-## For Consuming Projects
-
-- Prefer existing `@robosophy/ui-vue` components before creating local UI components.
-- Read `AGENTS.md` for short agent rules.
-- Read `components.md` for component inventory, APIs, and examples.
-- Read `dist/index.d.ts` for exact exported types.
-- Keep app-specific behavior in the consuming project: router, stores, fetches, permissions, and logout.
-- Use `RsSidebar` for module navigation.
-- Use `RsAccountSelector` for user/account selection.
-- Use `RsIcon` for Material Symbols icons.
-- Use PrimeVue `Button` for actions in PrimeVue apps.
-- Use `RsAvatar` for user/account identity.
-- Use `RsCard` for content sections and state containers.
-- In PrimeVue apps, register `RobosophyPreset` from `@robosophy/prime-theme` in `app.use(PrimeVue, { theme: { preset: RobosophyPreset } })` and import `@robosophy/prime-theme/prime.css`; that CSS already includes tokens.
-- In non-PrimeVue apps, import `@robosophy/tokens/tokens.css`.
-
-## Component Rules
-
-- Every exported component lives in `src/components/<ComponentName>/`.
-- Every component folder must include the Vue component, local CSS, public types, tests, Storybook stories, and an `index.ts`.
-- Import component CSS from the component `index.ts`; do not add a global package stylesheet export.
-- Use `@robosophy/tokens` CSS variables for colors, typography, strokes, and component surfaces.
-- Use PrimeVue only when it provides real behavior for that component; actions should use PrimeVue `Button` in PrimeVue apps.
-- `RsSidebar` and `RsAccountSelector` use native PrimeVue controls for interactive UI; PrimeVue apps should register the Robosophy PrimeVue preset and load `@robosophy/prime-theme/prime.css` so Button/Menu states receive Robosophy styling.
-- `RsIcon` needs `robosophyMaterialSymbols()` from `@robosophy/ui-vue/vite` in consuming Vite apps so builds generate an SVG sprite with only the needed icons. The plugin auto-detects icon usage from source — no manual declaration needed for static patterns. Use `rsPrimeIcon()` for PrimeVue APIs that accept icon class strings. Add dynamic icons via `include`. For full control over icon props, use the `#icon` slot instead of `rsPrimeIcon()`.
-- **Icon detection rules:** the scanner detects 5 patterns. Read `icon-scanner.md` for the full reference. Key rules for agent work:
-  - `<RsIcon name="..." />` — always detected (Pattern 1)
-  - `rsPrimeIcon("...")` — detected (Pattern 2)
-  - `{ icon: "..." }` in objects — detected with weight/family extraction (Pattern 3)
-  - `// @robosophy-icon: name` magic comments — detected (Pattern 4, use for props/variables)
-  - Arrays like `const iconNames = ["home", ...]` — detected if variable name contains "icon" (Pattern 5)
-  - `<RsIcon :name="variable" />` — NOT detected; add magic comment or `include`
-  - `<RsIcon :name="item.icon" />` — NOT detected from template, but the `icon: "..."` in the data source IS detected by Pattern 3
-- Use `RsSidebar` for reusable module navigation. `item-click` stays in the consuming app; the optional `modules` dropdown can redirect with the provided `link` when `navigateOnModuleSelect` is `true`.
-- Keep props focused on stable component API. Use slots for flexible content.
-- Export every public component and public type from `src/index.ts`.
-
-## Required Files
-
-- `<ComponentName>.vue`
-- `<ComponentName>.css`
-- `<ComponentName>.types.ts`
-- `<ComponentName>.test.ts`
-- `<ComponentName>.stories.ts`
-- `index.ts`
-
-## Validation
-
-Run the package build, component tests, and Storybook build before publishing component changes.
+# @robosophy/ui-vue AI Context
+
+Use this package for shared Vue 3 UI components.
+
+## For Consuming Projects
+
+- Prefer existing `@robosophy/ui-vue` components before creating local UI components.
+- Read `AGENTS.md` for short agent rules.
+- Read `components.md` for component inventory, APIs, and examples.
+- Read `dist/index.d.ts` for exact exported types.
+- Keep app-specific behavior in the consuming project: router, stores, fetches, permissions, and logout.
+- Use `RsSidebar` for module navigation.
+- Use `RsAccountSelector` for user/account selection.
+- Use `RsIcon` for Material Symbols icons.
+- Use PrimeVue `Button` for actions in PrimeVue apps.
+- Use `RsAvatar` for user/account identity.
+- Use `RsCard` for content sections and state containers.
+- In PrimeVue apps, register `RobosophyPreset` from `@robosophy/prime-theme` in `app.use(PrimeVue, { theme: { preset: RobosophyPreset } })` and import `@robosophy/prime-theme/prime.css`; that CSS already includes tokens.
+- In non-PrimeVue apps, import `@robosophy/tokens/tokens.css`.
+
+## Component Rules
+
+- Every exported component lives in `src/components/<ComponentName>/`.
+- Every component folder must include the Vue component, local CSS, public types, tests, Storybook stories, and an `index.ts`.
+- Import component CSS from the component `index.ts`; do not add a global package stylesheet export.
+- Use `@robosophy/tokens` CSS variables for colors, typography, strokes, and component surfaces.
+- Use PrimeVue only when it provides real behavior for that component; actions should use PrimeVue `Button` in PrimeVue apps.
+- `RsSidebar` and `RsAccountSelector` use native PrimeVue controls for interactive UI; PrimeVue apps should register the Robosophy PrimeVue preset and load `@robosophy/prime-theme/prime.css` so Button/Menu states receive Robosophy styling.
+- `RsIcon` needs `robosophyMaterialSymbols()` from `@robosophy/ui-vue/vite` in consuming Vite apps so builds generate an SVG sprite with only the needed icons. The plugin auto-detects icon usage from source — no manual declaration needed for static patterns. Use `rsPrimeIcon()` for PrimeVue APIs that accept icon class strings. Add dynamic icons via `include`. For full control over icon props, use the `#icon` slot instead of `rsPrimeIcon()`.
+- **Icon detection rules:** the scanner detects 5 patterns. Read `icon-scanner.md` for the full reference. Key rules for agent work:
+  - `<RsIcon name="..." />` — always detected (Pattern 1)
+  - `rsPrimeIcon("...")` — detected (Pattern 2)
+  - `{ icon: "..." }` in objects — detected with weight/family extraction (Pattern 3)
+  - `// @robosophy-icon: name` magic comments — detected (Pattern 4, use for props/variables)
+  - Arrays like `const iconNames = ["home", ...]` — detected if variable name contains "icon" (Pattern 5)
+  - `<RsIcon :name="variable" />` — NOT detected; add magic comment or `include`
+  - `<RsIcon :name="item.icon" />` — NOT detected from template, but the `icon: "..."` in the data source IS detected by Pattern 3
+- Use `RsSidebar` for reusable module navigation. `item-click` stays in the consuming app; the optional `modules` dropdown can redirect with the provided `link` when `navigateOnModuleSelect` is `true`.
+- Keep props focused on stable component API. Use slots for flexible content.
+- Export every public component and public type from `src/index.ts`.
+
+## Required Files
+
+- `<ComponentName>.vue`
+- `<ComponentName>.css`
+- `<ComponentName>.types.ts`
+- `<ComponentName>.test.ts`
+- `<ComponentName>.stories.ts`
+- `index.ts`
+
+## Validation
+
+Run the package build, component tests, and Storybook build before publishing component changes.