@robosophy/ui-vue 1.2.1 → 1.2.3

package/AGENTS.md

@@ -17,20 +17,38 @@ Use `@robosophy/ui-vue` before creating project-local UI components from scratch
 
 ## CSS Imports
 
-PrimeVue apps:
+PrimeVue apps: the consuming app owns the CSS layer order. Put this in an app stylesheet and import it before mounting the app:
+
+```css
+/* src/layers.css */
+@layer primevue, prime-base, prime-design;
+@import "@robosophy/prime-theme/prime.css";
+```
+
+Register the Robosophy preset and PrimeVue runtime layer in the consuming app:
 
 ```ts
 import PrimeVue from "primevue/config";
 import RobosophyPreset from "@robosophy/prime-theme";
-import "@robosophy/prime-theme/prime.css";
+import "./layers.css";
 
 app.use(PrimeVue, {
   theme: {
     preset: RobosophyPreset,
+    options: {
+      cssLayer: {
+        name: "primevue",
+        order: "primevue, prime-base, prime-design",
+      },
+    },
   },
 });
 ```
 
+La app define el orden: runtime de PrimeVue en `primevue`, tema base opcional en `prime-base`, overrides de Robosophy en `prime-design` y estilos propios sin layer para que puedan sobrescribirlos.
+
+Si la app usa Tailwind CSS v4, incluye sus layers `theme`, `base`, `components` y `utilities` en el orden global. Coloca `primevue`/`prime-design` después de `base` y antes de `components`/`utilities`, y usa ese mismo orden en `theme.options.cssLayer.order`; consulta `README.md` para el ejemplo.
+
 Non-PrimeVue apps:
 
 ```ts

package/README.md

@@ -26,21 +26,61 @@ 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:
+Si la app usa PrimeVue sin Tailwind, registra el preset de Robosophy. La app consumidora define las layers y carga los overrides una vez. En el CSS de la app:
+
+```css
+/* src/layers.css */
+@layer primevue, prime-base, prime-design;
+@import "@robosophy/prime-theme/prime.css";
+```
+
+En el entrypoint de la app:
 
 ```ts
 import PrimeVue from "primevue/config";
 import RobosophyPreset from "@robosophy/prime-theme";
-import "@robosophy/prime-theme/prime.css";
+import "./layers.css";
 
 app.use(PrimeVue, {
   theme: {
     preset: RobosophyPreset,
+    options: {
+      cssLayer: {
+        name: "primevue",
+        order: "primevue, prime-base, prime-design",
+      },
+    },
   },
 });
 ```
 
-`prime.css` ya importa `@robosophy/tokens/tokens.css`, asi que no dupliques ese import.
+La app controla el orden: estilos runtime de PrimeVue en `primevue`, tema base opcional en `prime-base`, overrides de Robosophy en `prime-design` y estilos propios sin layer para que puedan sobrescribirlos. `prime.css` ya importa `@robosophy/tokens/tokens.css`, asi que no dupliques ese import.
+
+### PrimeVue con Tailwind CSS v4
+
+Tailwind v4 añade las layers `theme`, `base`, `components` y `utilities`. Su reset en `base` puede prevalecer sobre los estilos de PrimeVue si esas layers quedan después de `prime-design`. Declara el orden completo antes de importar ambos CSS:
+
+```css
+/* src/layers.css */
+@layer theme, base, primevue, prime-base, prime-design, components, utilities;
+@import "tailwindcss";
+@import "@robosophy/prime-theme/prime.css";
+```
+
+Configura el runtime de PrimeVue con el mismo orden:
+
+```ts
+options: {
+  cssLayer: {
+    name: "primevue",
+    order: "theme, base, primevue, prime-base, prime-design, components, utilities",
+  },
+},
+```
+
+Así `primevue` y `prime-design` prevalecen sobre el reset de Tailwind, y las utilidades de Tailwind mantienen prioridad para ajustes locales. Si la app no usa Tailwind, conserva el orden corto `primevue, prime-base, prime-design` del ejemplo anterior.
+
+El Storybook interno también usa Tailwind v4 y configura este orden extendido en `packages/ui-vue/.storybook/preview.ts`.
 
 Si la app no usa PrimeVue, importa tokens una vez:
 
@@ -131,12 +171,18 @@ 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";
+import "./layers.css"; // Declara el orden de layers e importa prime.css.
 
 createApp(App)
   .use(PrimeVue, {
     theme: {
       preset: RobosophyPreset,
+      options: {
+        cssLayer: {
+          name: "primevue",
+          order: "primevue, prime-base, prime-design", // Con Tailwind v4, usa el orden extendido de arriba.
+        },
+      },
     },
   })
   .use(RobosophyUiVue)

package/ai-context.md

@@ -15,7 +15,7 @@ Use this package for shared Vue 3 UI components.
 - 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 PrimeVue apps, the consuming app owns the layer order: declare `@layer primevue, prime-base, prime-design;` before importing `@robosophy/prime-theme/prime.css`, and enable `theme.options.cssLayer` with name `primevue` and the same order. `prime.css` includes tokens and places Robosophy overrides in `prime-design`; app styles without a layer can override them. With Tailwind CSS v4, include `theme, base, primevue, prime-base, prime-design, components, utilities` in both the global layer declaration and `cssLayer.order` so Tailwind's base reset does not override PrimeVue.
 - In non-PrimeVue apps, import `@robosophy/tokens/tokens.css`.
 
 ## Component Rules
@@ -25,7 +25,7 @@ Use this package for shared Vue 3 UI components.
 - 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.
+- `RsSidebar` and `RsAccountSelector` use native PrimeVue controls for interactive UI; PrimeVue apps should register the Robosophy preset and configure the app-owned CSS layer order 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 8 patterns. Read `icon-scanner.md` for the full reference. Key rules for agent work:
   - `<RsIcon name="..." />` — always detected (Pattern 1)

package/components.md

@@ -26,21 +26,37 @@ import {
 } from "@robosophy/ui-vue";
 ```
 
-PrimeVue apps should register the Robosophy preset and import the theme CSS:
+PrimeVue apps should register the Robosophy preset. The consuming app owns the layer order; define it in an app stylesheet before importing the Prime Theme CSS:
+
+```css
+/* src/layers.css */
+@layer primevue, prime-base, prime-design;
+@import "@robosophy/prime-theme/prime.css";
+```
+
+Then configure the PrimeVue runtime layer in the app:
 
 ```ts
 import PrimeVue from "primevue/config";
 import RobosophyPreset from "@robosophy/prime-theme";
-import "@robosophy/prime-theme/prime.css";
+import "./layers.css";
 
 app.use(PrimeVue, {
   theme: {
     preset: RobosophyPreset,
+    options: {
+      cssLayer: {
+        name: "primevue",
+        order: "primevue, prime-base, prime-design",
+      },
+    },
   },
 });
 ```
 
-`RsSidebar` and `RsAccountSelector` render their interactive controls with PrimeVue components, so PrimeVue apps should use the setup above to apply PrimeVue defaults plus Robosophy Button/Menu styling.
+The app order is PrimeVue runtime styles in `primevue`, optional base theme styles in `prime-base`, then Robosophy overrides in `prime-design`. App styles without a layer can override all of them. `RsSidebar` and `RsAccountSelector` render their interactive controls with PrimeVue components, so PrimeVue apps should use the setup above to apply PrimeVue defaults plus Robosophy Button/Menu styling.
+
+If the app also uses Tailwind CSS v4, include its `theme`, `base`, `components`, and `utilities` layers in the global order. Put `primevue` and `prime-design` after Tailwind's `base` reset, and keep `components`/`utilities` after `prime-design`. Use the same full order in `theme.options.cssLayer.order`; see the Tailwind example in `README.md`.
 
 Apps without PrimeVue should import:
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@robosophy/ui-vue",
-  "version": "1.2.1",
+  "version": "1.2.3",
   "private": false,
   "license": "UNLICENSED",
   "homepage": "https://robosophy.gitlab.io/robosophy-basf/robosophy-library/",
@@ -48,24 +48,25 @@
     "test": "vitest run"
   },
   "peerDependencies": {
-    "@robosophy/tokens": "^1.0.4",
+    "@robosophy/tokens": "^1.1.0",
     "primevue": ">=4",
     "vue": ">=3.4"
   },
   "devDependencies": {
-    "@robosophy/prime-theme": "^1.0.3",
-    "@robosophy/tokens": "^1.0.4",
+    "@robosophy/prime-theme": "^3.0.0",
+    "@robosophy/tokens": "^1.1.0",
     "@storybook/addon-docs": "^9.1.0",
     "@storybook/vue3-vite": "^9.1.0",
+    "@tailwindcss/vite": "^4.3.3",
     "@vitejs/plugin-vue": "^6.0.0",
     "@vue/test-utils": "^2.4.6",
     "happy-dom": "^20.0.0",
     "primevue": "^4.5.5",
+    "tailwindcss": "^4.3.3",
     "typescript": "^5.9.3",
     "vite": "^7.2.0",
     "vitest": "^4.0.0",
     "vue": "^3.5.0",
     "vue-tsc": "^3.1.0"
-  },
-  "dependencies": {}
+  }
 }