From 0272961a95f37b7c6a63191b7b8c4091af3136db Mon Sep 17 00:00:00 2001
From: "bert.hausmans" <bert@hausmans.nl>
Date: Mon, 11 May 2026 01:00:01 +0200
Subject: [PATCH] feat(primevue): add PrimeVue plugin with Aura preset and
 Crewli teal tokens
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Scaffolds apps/app/src/plugins/primevue/ as three files mirroring the
Vuetify plugin structure at apps/app/src/plugins/vuetify/:

- theme.ts — CrewliPreset extends Aura via definePreset(). Primary
  palette (50–950) is the exact token plan from RFC Appendix B,
  centered on Crewli teal #0D9394 (light primary, primary.500) and
  #0B7F80 (dark primary, primary.600). Surface tokens use Aura
  defaults. colorScheme.light/dark map primary.color, hover, active,
  and contrastColor per Appendix B.

- defaults.ts — empty pt (PassThrough) defaults object. F3 ships this
  scaffold; F4 sub-packages populate component-level defaults as each
  Vuetify surface migrates.

- index.ts — installPrimeVue(app) registers PrimeVue with the preset,
  Dutch locale (primelocale/nl.json → nl.nl), darkModeSelector: '.dark'
  (matches Vuexy convention per AD-2), and the three services Toast,
  Confirmation, Dialog.

Theme imports use @primeuix/themes (the maintained successor PrimeVue's
official docs prescribe), not RFC v1.0's @primevue/themes. See B1 commit
for substitution rationale. RFC will be aligned in B9.

The plugin is not yet registered in main.ts — that lands in B4 after
Tailwind v4 wiring (B3).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 apps/app/src/plugins/primevue/defaults.ts | 12 +++++
 apps/app/src/plugins/primevue/index.ts    | 36 +++++++++++++++
 apps/app/src/plugins/primevue/theme.ts    | 55 +++++++++++++++++++++++
 3 files changed, 103 insertions(+)
 create mode 100644 apps/app/src/plugins/primevue/defaults.ts
 create mode 100644 apps/app/src/plugins/primevue/index.ts
 create mode 100644 apps/app/src/plugins/primevue/theme.ts

diff --git a/apps/app/src/plugins/primevue/defaults.ts b/apps/app/src/plugins/primevue/defaults.ts
new file mode 100644
index 00000000..786c0c62
--- /dev/null
+++ b/apps/app/src/plugins/primevue/defaults.ts
@@ -0,0 +1,12 @@
+// Global PrimeVue PassThrough (pt) defaults. F3 ships this scaffold
+// empty — F4 sub-packages will populate component-level defaults as
+// each Vuetify surface migrates and we discover which props need
+// consistent overrides (analogous to Vuetify's defaults registry at
+// apps/app/src/plugins/vuetify/defaults.ts).
+//
+// Per RFC §6 + AD-1, this object is consumed by the PrimeVue install
+// call in ./index.ts via the `pt` config option.
+
+export const ptDefaults = {} as const
+
+export default ptDefaults
diff --git a/apps/app/src/plugins/primevue/index.ts b/apps/app/src/plugins/primevue/index.ts
new file mode 100644
index 00000000..83f00a39
--- /dev/null
+++ b/apps/app/src/plugins/primevue/index.ts
@@ -0,0 +1,36 @@
+// PrimeVue plugin installer. Registers PrimeVue with the Crewli Aura
+// preset (theme.ts), the Dutch locale (primelocale/nl), and the three
+// service modules (Toast, Confirmation, Dialog) the SPA mounts at
+// App.vue top level.
+//
+// Per RFC-WS-FRONTEND-PRIMEVUE AD-2: darkModeSelector matches Vuexy's
+// `.dark` class convention so existing skin-toggle plumbing continues
+// to work during the F3–F6 parallel-mode window.
+
+import type { App } from 'vue'
+import PrimeVue from 'primevue/config'
+import ConfirmationService from 'primevue/confirmationservice'
+import DialogService from 'primevue/dialogservice'
+import ToastService from 'primevue/toastservice'
+import nl from 'primelocale/nl.json'
+
+import { CrewliPreset } from './theme'
+import { ptDefaults } from './defaults'
+
+export default function installPrimeVue(app: App) {
+  app.use(PrimeVue, {
+    theme: {
+      preset: CrewliPreset,
+      options: {
+        darkModeSelector: '.dark',
+        cssLayer: false,
+      },
+    },
+    locale: nl.nl,
+    pt: ptDefaults,
+  })
+
+  app.use(ToastService)
+  app.use(ConfirmationService)
+  app.use(DialogService)
+}
diff --git a/apps/app/src/plugins/primevue/theme.ts b/apps/app/src/plugins/primevue/theme.ts
new file mode 100644
index 00000000..c5116271
--- /dev/null
+++ b/apps/app/src/plugins/primevue/theme.ts
@@ -0,0 +1,55 @@
+// Crewli Aura preset. Token values per RFC-WS-FRONTEND-PRIMEVUE Appendix B.
+//
+// Primary palette derives from Crewli teal #0D9394 (light primary) and
+// #0B7F80 (dark primary) — the same values the Vuetify side uses at
+// apps/app/src/plugins/vuetify/theme.ts. The two themes are intentionally
+// kept in lockstep during the F3–F6 parallel-mode window so that pages
+// in either framework render with identical brand color.
+//
+// Imports use @primeuix/themes (PrimeVue 4's officially documented theme
+// package, per primevue.org/vite/), substituting RFC v1.0's reference to
+// the deprecated @primevue/themes. See B1 commit for rationale.
+
+import { definePreset } from '@primeuix/themes'
+import Aura from '@primeuix/themes/aura'
+
+export const staticPrimaryColor = '#0D9394'
+export const staticPrimaryDarkenColor = '#0B7F80'
+
+export const CrewliPreset = definePreset(Aura, {
+  semantic: {
+    primary: {
+      50: '#E6F4F4',
+      100: '#CCE9EA',
+      200: '#99D3D4',
+      300: '#66BDBE',
+      400: '#33A7A8',
+      500: '#0D9394',
+      600: '#0B7F80',
+      700: '#086B6C',
+      800: '#055758',
+      900: '#034344',
+      950: '#012F30',
+    },
+    colorScheme: {
+      light: {
+        primary: {
+          color: '{primary.500}',
+          contrastColor: '#ffffff',
+          hoverColor: '{primary.600}',
+          activeColor: '{primary.700}',
+        },
+      },
+      dark: {
+        primary: {
+          color: '{primary.400}',
+          contrastColor: '{surface.900}',
+          hoverColor: '{primary.300}',
+          activeColor: '{primary.200}',
+        },
+      },
+    },
+  },
+})
+
+export default CrewliPreset