feat: Extract UI components from trakli/webui with Nuxt playground explorer

[Lantum-Brendan]

Summary

Extracted the reusable UI components (buttons, cards, tables, charts, forms, modals, auth, and AI chat) out of trakli/webui into this UI-kit repo, and added a Nuxt playground so every component is live-previewable with realistic sample data.

What changed

• ~95 components added under components/, covering:
  • Buttons & actions, layout & containers (T* primitives)
  • Cards & summaries (wallets, budgets, parties, KPIs, onboarding, empty states)
  • Charts & data viz (cashflow, donut, Sankey, heatmap, sparklines, reports)
  • Tables & lists, forms & inputs, modals & dialogs
  • Auth (login, register, carousel) and AI chat (sidebar, composer, message list, result renderer)
  • Most ship with Storybook stories (.stories.js) and Cypress component tests (.cy.js)
• .playground/ Nuxt app — a Nuxt layer host (extends: ['..']) that pulls in the kit's components and design tokens.
  • app/pages/index.vue: sidebar dashboard listing every component grouped by category, with search and live rendering.
  • app/registry.ts: auto-discovers all components/*.vue, hand-tunes prop/slot demos with realistic sample data, and auto-buckets components into categories.
  • app/components/UsageLanding.vue: the / page documenting installation & usage.
• package.json: added dev (nuxi dev .playground) and build (nuxt build .playground) scripts.
• public/: static assets (logo, icons).

SYNC.md is intentionally left out of the commit (local sync notes).

How to review

npm install
npm run dev   # opens the playground at / — landing page explains usage, sidebar previews each component

Notes

• Components are adapted from trakli/webui; this commit seeds them here as a standalone kit.
• The playground maps the @trakli/ui-kit alias locally; the published layer relies on the real npm alias.
  @nfebe

[sourceant]

Code Review Summary

This PR successfully extracts nearly 100 components from the trakli/webui project into a standalone, reusable UI kit layer with a built-in documentation playground. The architectural move is solid, but some app-specific code remains within the library components.

🚀 Key Improvements

• Modularization of core UI logic into a Nuxt layer.
• Live component registry in the playground allows for rapid testing with realistic data.
• Strong use of CSS custom properties for theme-ability.

💡 Minor Suggestions

• Use useId() for unique element IDs to avoid SSR hydration mismatches.
• Move shared TypeScript interfaces to a centralized types/ directory.
• Extract repetitive date formatting logic into a shared utility.

🚨 Critical Issues

• Hardcoded application routes and specific business logic in TSidebar.vue and TNavbar.vue should be removed in favor of generic props.
• Search inputs across several form components lack debouncing, potentially causing performance issues.

[sourceant]

Review complete. No specific code suggestions were generated. See the overview comment for a summary.

[nfebe]

Looks good so far. Things to address before we can merge:

Finding	Where	Severity
The package doesn't carry its own assets. public/ isn't published, but Logo, EmptyState, TipsSection, AuthCarousel point at absolute paths like /logo.svg, so they 404 in a consumer; AuthCarousel points at /floating-docs-man.svg, which isn't in the repo at all. Logo should carry the mark: inline the Trakli SVG so it ships, add an icon-only variant and a default slot to swap it, and drive its fill from a token.	package.json files; Logo.vue:1-30, EmptyState.vue, TipsSection.vue, AuthCarousel.vue	Blocker
Overriding the brand colour doesn't fully re-skin. The focus ring is a literal green rgba and the table header repeats the primary hex, so a tier that overrides --color-primary keeps both. Use the token: rgba(var(--color-primary-rgb), .5) and var(--color-primary).	_vars.scss:40, tokens.css:37	Blocker for the rebrand
The playground chrome doesn't use the kit: the sidebar and landing are hand-built with 61 hex values, one token reference, and no kit components, so it can't re-skin. Rebuild it from TPageShell/TPanel/TCard/TButton/SearchInput reading var(--color-*).	index.vue, UsageLanding.vue	Should fix
New components list but don't preview. Discovery is automatic, but a usable preview needs a hand-written entry in the demo map (99 of 101 filled); without one the component renders propless and a data-driven one lands in the error box. Co-locate the sample data with each component, or reuse the Storybook stories.	registry.ts:10,825, DashboardMain.vue:20-23	Should fix
A few components write hex where the token exists (#dc2626 is --color-error; #b45309 isn't a token at all), so they don't re-skin or adapt to dark mode.	GroupForm.vue:232, TransactionFilters.vue:371, TTableComponent.vue:567, TTransactionsCardList.vue:293	Should fix
README is ahead of the code (TTopCard, ThemeToggleButton listed as not-yet-decoupled but both ship here), and there are em dashes in on-screen copy.	README.md; UsageLanding.vue:8,16,20,32,77,95,104	Minor

Land the first two before adoption; they carry the old brand into whatever consumes this. The playground chrome and the demo map are one rework. A CI check that fails on raw hex in components/*.vue (allowlisting brand-icon and chart-palette files) keeps the contract from drifting.

Caveat: I read the playground source but didn't run it, so the "can't re-skin" and "lands in the error box" notes are read off the code, not watched in a browser.

[nfebe]

There are still lots of issues that have transferred from the application itself but here is an opportunity to solve it.

Example there is GroupForm, BudgetForm, TransferForm all of those are the same elements. Should be TForm and TFormInput etc

Same with things like ReportTab we should need a tabbing system. So A LOT about the structure has not change to have real primitives that still rebuild the current UI correctly.

[Copilot]

Copilot wasn't able to review this pull request because it exceeds the maximum number of lines (20,000). Try reducing the number of changed lines and requesting a review from Copilot again.

[nfebe]

The primitives are here, but they were added beside the page components instead of underneath them. TForm* and TTab* exist and six forms use them, while TransactionForm and HoldingForm still build raw inputs and CategoriesTab, FlowTab and CalendarTab still roll their own tabs. The totals moved the wrong way: 173 components, 44,187 lines, 12 files over 600, and 98 components taking a labels object because they carry copy they should not own. That is the app's page tree copied across, with a primitive layer next to it rather than under it.

Three things I want before this merges:

1. TransactionForm and HoldingForm rebuilt on TForm/TFormField/TFormInput, the way GroupForm and WalletForm already are.
2. CategoriesTab, FlowTab and CalendarTab moved onto TTabList/TTabPanel.
3. ContentSection dropped, or reduced to a controlled component. It owns const items = ref([]) (ContentSection.vue:82) with no items prop, so a consuming app can never show its own data, and :128 invents receivedAmount with Math.random().

Bugs

• TFormField.vue:44: the nested BEM selectors have no &, so __label { } compiles to .t-form-field __label and matches nothing. Labels, required marks, hints and error text render unstyled on every form built with the new primitives.
• package.json:7: files ships components, assets and nuxt.config.ts. Components import ../utils/fill, ../composables/useLucideIcon and ../utils/markdown, so an install of the package cannot resolve them. Same blocker as public/, moved.
• DashboardKPIs.vue:31 and 13 other components: --surface-deep, --surface-ink, --surface-accent and --surface-bg are used 106 times with no fallback and are defined nowhere in this repo. Outside the app that defines them locally, those fills inherit black. --color-error-light (TForm.vue:133, TCardActionMenu.vue:180) has the same problem and silently uses its hardcoded fallback.
• ReminderForm.vue:202: editing writes a UTC wall clock into a datetime-local input, and :245 reads it back as local. In UTC+2, opening a 10:00 reminder and saving it untouched stores 08:00, then 06:00 on the next save. getDefaultDateTime at :235 is off by the same offset.
• TransactionForm.vue:324 and TransferForm.vue:164: formDate comes from toISOString() (UTC) and formTime from toTimeString() (local). Just after midnight in UTC+2 the form opens a day behind, and the value differs between server and client render. TransactionFilters.vue:194 already carries a comment about avoiding this.
• TTableComponent.vue:137: convertCurrency defaults to (amount) => amount, so a consumer that omits it gets EUR and GBP rows added into the USD total as if they were USD. :205 formats with a hardcoded en-US and there is no locale prop.
• SparkLine.vue:38 and SankeyFlow.vue:117: gradient and clip ids come from Math.random(), so server and client emit different ids and the reference breaks on hydration. useId() is not used anywhere in the repo.
• SankeyFlow.vue:127: node heights subtract the gaps, ribbon thickness at :183 does not, so ribbons are thicker than the nodes they leave and the error grows down the column. Past roughly 25 categories the available height goes negative, every node clamps to 8px and the column overflows the viewBox. :174 also keys its cursors by node name, so two categories called "Other" land on one node.

Already raised, still here:

• 16 components define their own fill helper in four variants that disagree on repeated placeholders and on unknown keys, while utils/fill.ts exists and five components import it.
• Seven components and useLucideIcon.ts do import * as LucideIcons from 'lucide-vue-next' and index it dynamically, so the whole icon set is unshakeable. Moving the star import into a composable kept the star.
• ContentSection.vue:105 and :147 scroll with document.querySelector('.form-section'), which finds the first instance on the page rather than its own.

TTab.vue:2 is worth fixing before the domain tabs adopt it: role="tab" with no id or aria-controls, TTabPanel with no aria-labelledby, no roving tabindex, and arrow keys that move selection without moving focus.

Earlier reviews

Fixed: the logo variants, the focus ring token, --color-table-header, and the playground rebuilt on TPanel/TButton. Still open:

Item	State
files does not ship what components import	Open, moved from public/ to utils/ and composables/
README calls TNavbar, TSidebar and TAvatar deferred	Open, all three ship in this PR
Playground demo coverage	Went backwards: 2 missing of 101, now 49 of 173

The 49 include TForm, TFormInput, TFormSelect, TFormTextarea, TNavbar, TSidebar, TAvatar, TPagination and all six Settings*. They list in the sidebar and render propless, so the data-driven ones drop into the error box. The PR body also says most components ship with stories and component tests; the branch has 29 stories and 20 tests for 173 components.

[nfebe]

Okay. Sorry but this keeps drifting away from the main goal and I am not sure you are taking time to check it so, I will close this and say you should migrate 10 primitives at a time.

So start with like the TButton, TCard etc... Just 10 components at a time. This should be closed by the way this is not reviewable anymore.