# kView Component Lab The Component Lab is a Laravel-native Storybook-style catalogue for the three reusable UI packages: - `kview/ui-core` - `kview/visualization` - `kview/ui-data` It renders the real public Blade components and, in an isolated Inertia frame, the real Vue adapters. It does not maintain parallel React wrappers or copied HTML examples. ## Run Start Laravel and Vite: ```bash php artisan serve npm run dev ``` Open: ```text http://127.0.0.1:8000/__kview ``` The route is registered only in `local` and `testing` environments. It is not available in production. The Introduction navigation also links to the technical Inertia foundation at `/__kview/inertia`. That second local-only surface proves the Vue/TypeScript runtime and its strict asset boundary. The public `@kview/ui-core/vue` entry (`packages/kview-ui-core/resources/vue/index.ts`) is the source of truth for how many components it exports — do not hardcode that count here, it has already drifted stale once; check the file or the catalogue's own "Inventaire" page instead. The `Parité Blade / Vue` section compares the Blade tag and its Vue adapter side by side for the established primitive set in an isolated Inertia iframe — this is a permanent contract-parity check, not a migration-progress tracker: kView INVESTOR's own pages are 100% Vue (the Blade → Inertia/Vue migration closed in phase 9, 22 July 2026), and the Blade side of this comparison exists only to prove the kView packages' public Blade API still works, for external/Blade-only consumers of the packages (see `dev_guide/kview-ui-packages.md`). Three direct Vue surfaces complement the catalogue: ```text /__kview/inertia/components /__kview/inertia/application-shell /__kview/inertia/application-shell/secondary ``` The two application-shell routes are authenticated. They validate the persistent `AuthenticatedLayout`, the global-search owner, global toasts, Excel Login and the complete account popover, and the Settings dialog, alongside the navigation dictionary, native/Inertia link adapter, responsive shell, form primitives, and `SearchResultGroup` — the exact same contract every real kView INVESTOR page uses. Their transition preserves the exact same shell DOM instance and sidebar state. They remain local/testing-only specimens, kept separate from real product routes so this catalogue can be exercised without authenticated kView INVESTOR data. `/login` reaches the shell through a native anchor so an unauthenticated visitor gets a real document navigation rather than an in-shell partial visit. Every authenticated kView INVESTOR route (not just `/search`) reuses this same `AuthenticatedLayout`/`ApplicationShell` contract through the standard Inertia root — there is no other layout left in the app. The sidebar invariant is open at `240px` or hidden at `0`, never a compact icon rail. The Component Lab remains a specimen; it is not a second shell implementation. ## Ownership - Route and specimen data: `app/Http/Controllers/Dev/UiStorybookController.php` - Catalogue composition: `resources/views/dev/ui-storybook.blade.php` - Section stories: `resources/views/dev/storybook/partials/` - Isolated visual shell: `resources/css/ui-storybook.css` - Blade/Vue parity composition: `resources/views/dev/storybook/partials/vue-parity.blade.php` - Vue parity page and specimens: `resources/js/Pages/Foundation/Components.vue` and `resources/js/components/foundation/KviewPrimitiveShowcase.vue`, including the focused `KviewToastSpecimen.vue` consumer - Persistent Vue shell proof: `resources/js/layouts/AuthenticatedLayout.vue`, `resources/js/Pages/Foundation/ApplicationShell.vue`, `resources/js/Pages/Foundation/ApplicationShellSecondary.vue` and `resources/js/components/application/ApplicationShell.vue` - Technical global-search parity: `resources/js/components/application/ApplicationGlobalSearch.vue` and `app/Support/GlobalSearchConfiguration.php` - Technical global-feedback and account parity: `resources/js/components/application/ApplicationUserMenu.vue`, `resources/js/composables/useApplicationExcelLogin.ts`, `KviewToastProvider`, `KviewPopover`, and `KviewAvatar` - Technical Settings parity: `resources/js/components/application/ApplicationSettingsDialog.vue`, `App\Support\ApplicationSettings`, `KviewDialog`, `KviewDropdown`. There is no Blade Settings view left to compare against — `/preferences?tab=...` now redirects into the persistent shell, which reopens this same dialog client-side. - Shared result specimen: `resources/js/components/search/SearchResultGroup.vue` - Search, navigation, mobile shell, and local demo actions: `resources/js/ui-storybook.js` The bundle (`resources/css/ui-storybook.css` / `resources/js/ui-storybook.js`) imports only the three package CSS and JavaScript entry points plus the catalogue shell. `resources/css/app.css` and `resources/js/app.js` — kView INVESTOR's former Blade-shell bundle — no longer exist (deleted in phase 9); kView INVESTOR's actual application entry today is `resources/css/inertia.css` / `resources/js/inertia.ts`, which this catalogue does not import either. ## Add Or Update A Story 1. Use the real public Blade tag. 2. Put realistic private-markets sample data in `UiStorybookController`. 3. Keep page-specific catalogue styling in `resources/css/ui-storybook.css`; do not override a package component contract to make a story look different. 4. Add searchable terms to the story's `data-story-title`. 5. Exercise the interaction in a browser at desktop and mobile sizes. 6. Update the component inventory when a new public component is added. When a public component API, accessibility contract, package boundary, token, or visual rule changes, update its story in the same patch. The catalogue alone does not prove a real page works end to end — verify a changed component in its actual kView INVESTOR consumer(s) too, not only here. This document intentionally does not narrate the migration history that brought kView INVESTOR from a Blade shell to today's all-Vue architecture (closed in phase 9, 22 July 2026) — `dev_guide/frontend-stack-migration-roadmap.md` is the authoritative, dated record of that, phase by phase. What matters for using the Component Lab today: it is a permanent tool, not a migration artifact, and it will keep being useful after the migration for the same reason it always was — verifying the kView packages' public contracts (Blade and Vue) in isolation from any one kView INVESTOR page.