# Reusing kView UI In Another Laravel SaaS

kView INVESTOR now consumes three installable Composer path packages while preserving
its existing Blade component names.

## Packages

| Composer package | Responsibility |
| --- | --- |
| `kview/ui-core` | Tokens, icons, buttons, forms, controls, navigation, feedback, loading, and floating layers. |
| `kview/ui-data` | Column contracts, typed cells, filters, pagination, CRUD tables, row actions, and drawers. |
| `kview/visualization` | Display preferences, finance formatting, statuses, metric badges, and performance charts. |

The package name deliberately uses the standard English spelling
`visualization`.

## Consumer Setup

In a monorepo, add Composer `path` repositories. In a separate SaaS, replace
them with the private Composer registry:

```json
{
    "require": {
        "kview/ui-core": "^0.1",
        "kview/ui-data": "^0.1",
        "kview/visualization": "^0.1"
    }
}
```

Laravel auto-discovers each ServiceProvider. Existing tags such as
`<x-ui.icon>`, `<x-erp.crud-table>`, and
`<x-ui.fund-performance-chart>` work without a prefix migration.

Map Vite aliases to the installed Composer resources, then import the package
entry points from the host entry files, such as `resources/css/app.css` and
`resources/js/app.js`. Include package Blade and JavaScript paths in Tailwind
content scanning.

An Inertia/Vue host may additionally consume the optional source entry:

```ts
import {
    KviewAvatar,
    KviewButton,
    KviewDialog,
    KviewDropdown,
    KviewMoneyInput,
    KviewPopover,
    KviewTabs,
    KviewToastProvider,
    KviewUiProvider,
    useKviewToast,
} from '@kview/ui-core/vue';
```

This entry is compiled by the host Vite build. Blade-only consumers keep using
the CSS and JavaScript entries and do not load Vue. The Vue entry is an
additional adapter over the same tokens and semantic CSS, not a second design
system.

The package provides explicit English defaults. A localized host wraps its Vue
root in `KviewUiProvider` and supplies serialized `messages`, `resourceIcons`,
and a local link adapter. The link component is runtime state: it must not be
serialized by Laravel, and the package must not import Inertia directly.

Icons follow the same rule for every renderer. Names, aliases, fallback, and
SVG fragments live only in
`packages/kview-ui-core/resources/icons/kview-icons.json`; PHP and TypeScript
registries adapt that file for Blade, legacy JavaScript, and Vue.

An application with user-specific number, date, currency, and scaling settings
should bind:

```php
Kview\Visualization\Contracts\DisplayPreferences::class
```

to its own implementation. The package configuration provides usable defaults
when no adapter is supplied.

Each package also loads English and French translations. Publish them with the
package-specific `*-translations` tag when a host needs to override wording.
`kview/ui-data` additionally exposes export branding, sheet naming, pagination,
and local-storage prefixes through its published configuration.

## Extraction Roadmap

### Phase 1: completed

- Package manifests, ServiceProviders, configuration, Vite entry points, and
  architecture tests.
- Core tokens, icons, icon buttons, tooltips, and floating-layer runtime.
- Data registries, pagination options, ERP components/runtime, smart table, and
  pagination.
- Finance formatting, status semantics, display-preference contract, metric
  badges, and performance chart.
- Deprecated `App\Support` adapters for source compatibility.

### Phase 2: completed

- The complete ERP CSS selector family is in `kview/ui-data`.
- Core forms, dropdowns, date pickers, tabs, feedback, loading, confirmation,
  headers, and navigation own their CSS and JavaScript in `kview/ui-core`.
- Generic metric/info cards and date display are in `kview/visualization`.
- Blade and client-generated copy have translation/configuration seams.

### Package release readiness: prepared

- Once Bitbucket Pipelines is enabled, `bitbucket-pipelines.yml` is the active
  repository quality gate: it runs the package tests on PHP 8.4 and verifies
  clean archive consumers on Laravel 11, 12 and 13 at every Bitbucket push.
  `.github/workflows/ui-packages.yml` keeps the equivalent package-only
  workflow for a possible GitHub mirror.
- Every package has a changelog; `packages/release-manifest.json` and
  `packages/RELEASING.md` define version/tag and SemVer rules.
- `npm run test:ui-consumer` installs archives without path symlinks, renders
  Blade, compiles the optional Vue source entry, and compiles Vite and Tailwind
  for Laravel 11, 12 and 13.
- Uploading tagged archives is ready but requires the private registry endpoint
  and credentials outside this repository.

### Vue adapter foundation: phase 3 complete

- `kview/ui-core` exposes twenty-seven typed UI components plus
  `KviewUiProvider` and `useKviewToast` through `@kview/ui-core/vue`.
- One JSON icon catalog feeds the PHP and TypeScript registries, Blade, legacy
  JavaScript, and Vue, including aliases and the unknown-name fallback.
- The typed provider carries localized messages, resource icons, and an
  optional host link-component seam without an `App\...` or Inertia package
  dependency.
- kView INVESTOR compares real Blade and Vue renderers in the local Component Lab.
- The clean Laravel 11, 12, and 13 consumers compile the optional Vue source
  entry directly from installed package archives.
- Buttons, tooltips, popovers, dialogs, dropdowns, avatars, feedback, loading,
  headings, breadcrumbs, text, textarea, money/percent fields, form actions, tabs,
  segmented choices, switches, and grouped commands have focused Vue tests.
- Combobox, date picker, confirmations, visualization, and data-table adapters
  remain incremental follow-up work tied to real consumers.

`KviewDialog` and `KviewDropdown` use Reka UI only inside their package
implementation for modal/listbox mechanics. The optional Vue entry publishes
Vue and Reka as peer dependencies; the consuming host installs and resolves
them, including from a Vite source alias, but pages never import Reka. A
Blade-only consumer does not import the optional entry and needs neither peer
in its browser build. Their public API, classes, tokens, and rendering remain
kView-owned.

The Phase 5.4 clean archive check first exposed monorepo-only peer resolution.
After the peer declarations and host-resolution alias were added, the Laravel
11, 12, and 13 consumers are green for the new package revision.

kView INVESTOR's `AppLink`, UI dictionary adapter, application navigation, shell, and
search-result composition are host code. They demonstrate consumption but do
not belong in `kview/ui-core`.