migrates the app's domain-specific UI components

.cursor/rules/component-migration.md

@@ -0,0 +1,32 @@
+---
+description: Component migration and primitive design guidelines for @trakli/ui-kit
+globs: components/**/*.vue, composables/**/*.ts, utils/**/*.ts
+---
+
+# Component Migration & UI Kit Quality Rules
+
+When migrating components from `webui` into `@trakli/ui-kit`:
+
+1. **No String Concatenation for Copy (i18n)**:
+   - Do NOT construct text via template literals (`You don't have any ${pageName.toLowerCase()}...`).
+   - Expose explicit `title`, `description`, `actionLabel` props and slots (`#title`, `#description`, `#actions`) so consumers provide translated strings.
+
+2. **Self-Contained Static Assets**:
+   - Do NOT reference external public URLs like `/logo.svg` or `/_nuxt/logo.svg`.
+   - Bundle SVGs/images directly into `assets/` and import them statically (`import logoUrl from '../assets/logo.svg'`).
+
+3. **Strict Primitive Composition**:
+   - Do NOT render raw HTML interactive/layout tags (`<input>`, `<button>`, `<div class="card">`, `<hr>`) when primitives exist.
+   - Always compose: `TInput`, `TButton`, `TCard`, `TDivider`, `TDropdown`, `TDropdownItem`.
+
+4. **Preserve Dynamic Polymorphism & Escape Hatches**:
+   - Never collapse dynamic descriptor branches into hardcoded constants.
+   - Always keep plugin component escape hatches (`resolveComponent(ui.component)`), slot variants, and fallbacks.
+
+5. **Extensible Menus & Navigation**:
+   - Do NOT hardcode domain-specific menus (e.g., Settings/Admin/Logout) into UI kit primitives.
+   - Provide an `items` array prop (`MenuItem[]`) and `#menu` / `#header` slots with sensible defaults.
+
+6. **Zero Migration Noise & Strict Types**:
+   - Never commit scaffolding/transitional comments (`Migrated from webui/...`, `Tier 0 primitive`, `mirrors ...`).
+   - Never use `@ts-nocheck` to silence TypeScript errors. Fix types properly.

.gitignore

@@ -8,3 +8,5 @@ cypress/videos
 cypress/downloads
 *.log
 .DS_Store
+
+.playwright-mcp/

.storybook/preview.js

@@ -1,12 +1,44 @@
 // Default token values so components are themed in isolation.
 import '../assets/css/tokens.css';
 
-// NuxtLink is provided by Nuxt at runtime. Outside Nuxt (Storybook), register a
-// minimal stand-in so components that render links still mount.
 import { setup } from '@storybook/vue3';
-import { h } from 'vue';
+import { h, ref } from 'vue';
+
+// Minimal en translations for storybook preview
+const messages = {
+  'Sign in with Google': 'Sign in with Google',
+  'Sign up with Google': 'Sign up with Google',
+  'Theme': 'Theme',
+  'Light': 'Light',
+  'Dark': 'Dark',
+  'System': 'System',
+  'Language': 'Language',
+  'Cancel': 'Cancel',
+  'Confirm': 'Confirm',
+  'carousel.ai.title': 'Just ask',
+  'carousel.ai.text': 'Log expenses, build reports and get answers by chatting with your assistant in plain language.',
+  'carousel.integrations.title': 'Connect your bank',
+  'carousel.integrations.text': 'Link accounts with Plaid and import statements, so your transactions flow in on their own.',
+  'carousel.import.title': 'Import anything',
+  'carousel.import.text': 'Drop in a statement in any format and the assistant reads it, structured or not, into clean transactions.',
+  'carousel.welcome.title': "Sit back, we've got this",
+  'carousel.welcome.text': "You handle life. Trakli wrangles the receipts, the math and the mess. Welcome aboard!"
+};
+
+const locale = ref('en');
+const t = (key) => messages[key] || key;
+const setLocale = (l) => { locale.value = l; };
+
+// Provide global nuxt helper stand-ins so components can render cleanly in Storybook
+window.useI18n = () => ({ t, locale, setLocale });
+window.useCookie = () => ref('mock-cookie');
+window.useApi = () => async () => ({ data: {} });
 
 setup((app) => {
+  app.config.globalProperties.t = t;
+  app.config.globalProperties.locale = locale;
+  app.config.globalProperties.setLocale = setLocale;
+
   app.component('NuxtLink', {
     props: { to: { type: [String, Object], default: '#' } },
     setup(props, { slots }) {