@svadmin/lite 0.6.0 → 0.8.0

package/README.md

@@ -10,6 +10,12 @@ The bundled CSS follows an IE11-oriented baseline, but Svelte 5, SvelteKit, Tail
 
 The main `@svadmin/ui` package delivers a premium SPA experience using Svelte 5, Tailwind CSS v4, and TanStack. Those tools target modern browsers. Some enterprise/government environments instead prefer server-driven navigation, native forms, and a smaller client-side runtime.
 
+**What Lite is:**
+- A **Zero-JS SSR-first admin component suite** designed with an IE11-safe CSS baseline.
+- 100% interoperable with `@svadmin/core` — sharing the same `DataProvider`, `AuthProvider`, `Resource`, and `FieldDefinition` contracts.
+- An architectural companion to `@svadmin/ui` achieving **100% component parity (72/72 components)** through 1:1 server-rendered matches or deliberate semantic fallbacks.
+- **Not** a generic Tailwind-to-IE11 compiler or a full client-side port of shadcn-svelte (which depends on modern browser JS runtimes and CSS custom properties).
+
 `@svadmin/lite` provides a server-rendered fallback that **shares the same DataProvider, AuthProvider, and Resource definitions** — only the rendering layer is different.
 
 ## Features
@@ -29,6 +35,7 @@ The main `@svadmin/ui` package delivers a premium SPA experience using Svelte 5,
 | **Capability fallbacks** | Canvas, WASM, realtime, directory upload, observers, storage, media, and other browser-only features have server-safe alternatives |
 | **i18n** | Uses `@svadmin/core` `t()` translations |
 | **Multi-level Menu** | Always-expanded, config-driven nested links via `MenuItem[]` |
+| **Parity Tracking** | Built-in CLI matrix, CI parity verification gate, and live interactive visual showroom |
 | **Print** | `@media print` optimized styles |
 
 ## Quick Start
@@ -44,6 +51,20 @@ are required peers rather than optional dependencies.
 
 ### 2. Create a list page
 
+For an existing SvelteKit project, the route tree can be generated once instead
+of being handwritten for every resource:
+
+```bash
+bunx @svadmin/create lite init .
+bunx @svadmin/create lite init . --write
+```
+
+The generator adds a shared `$lib/svadmin-lite.ts` adapter and dynamic
+`[resource]` list/create/show/edit routes. `$lib/admin` only needs to export
+`resources` and `dataProvider`; the existing SPA files are not changed. The
+generated Lite subtree is `ssr = true` and `csr = false`, and existing files are
+preserved on repeat runs.
+
 ```typescript
 // src/routes/lite/posts/+page.server.ts
 import { createListLoader, createCrudActions } from '@svadmin/lite';
@@ -223,18 +244,56 @@ If the application is behind a reverse proxy, the same rule can be implemented
 there instead. The important property is that the SPA JavaScript is not sent to
 IE11 before the decision is made.
 
-## Components
+## Components & Parity (100% Coverage)
+
+`@svadmin/lite` provides **100% component parity** (72/72 components) corresponding to `@svadmin/ui`. See [PARITY.md](./PARITY.md) for the complete matrix.
+
+### Core Pages & Layout
+
+| Component | Description |
+|-----------|-------------|
+| `LiteLayout` | Responsive sidebar + header + main shell (supports nested `menu` links) |
+| `LiteSidebar` / `LiteHeader` | Discrete layout primitives |
+| `LiteListPage` | Full-featured list view with search, table, bulk actions, and pagination |
+| `LiteCreatePage` / `LiteEditPage` | Auto-generated CRUD form pages |
+| `LiteShowPage` | Key-value record view with typed field renderers |
+| `LiteProfilePage` | User profile management page with avatar and info |
+| `LiteRegisterPage` | User registration page with server-side validation |
+| `LiteForgotPasswordPage` / `LiteUpdatePasswordPage` | Password recovery and credential rotation flows |
+| `LiteTable` | HTML table with sort links, selectable rows, and delete confirmation |
+| `LiteForm` | Schema-driven form renderer supporting all field definitions |
+| `LiteShow` | Detailed field-by-field record viewer |
+| `LitePagination` / `LiteSearch` | URL-driven pagination and GET search controls |
+| `LiteAlert` | Inline notification banner for success/error/warning states |
+| `LiteBreadcrumbs` / `LiteTabs` / `LiteEmptyState` | Semantic navigation and placeholder primitives |
+
+### Field Components (23 Fields)
+
+| Category | Components |
+|----------|------------|
+| **Text & Numeric** | `LiteTextField`, `LiteNumberField`, `LiteCurrencyField`, `LitePercentField`, `LitePhoneField`, `LiteEmailField`, `LiteUrlField`, `LiteRatingField`, `LiteCopyField` |
+| **Date & Choice** | `LiteDateField`, `LiteDateRangeField`, `LiteBooleanField`, `LiteSelectField`, `LiteMultiSelectField`, `LiteTreeSelect`, `LiteCascader`, `LiteTagField`, `LiteRelationField` |
+| **Media & Rich & Array** | `LiteAvatarField`, `LiteImageField`, `LiteFileField`, `LiteCodeField`, `LiteMarkdownField`, `LiteRichTextField`, `LiteJsonField`, `LiteArrayField`, `LiteDynamicFormList`, `LiteTransfer` |
+
+### Action Buttons (10 Buttons)
+
+| Component | Description |
+|-----------|-------------|
+| `LiteListButton`, `LiteCreateButton`, `LiteEditButton`, `LiteShowButton`, `LiteCloneButton` | Server-rendered `<a>` navigation buttons |
+| `LiteDeleteButton` | Fragment-target modal confirmation with native POST form action |
+| `LiteSaveButton`, `LiteRefreshButton`, `LiteExportButton`, `LiteImportButton` | Form submission, page refresh, and file action buttons |
+
+### Widgets & Charts (SSR-Safe)
+
+| Component | Description |
+|-----------|-------------|
+| `LiteStatsCard`, `LiteInsightCard`, `LiteAnomalyBadge` | Metric KPI cards and status badges |
+| `LiteBarChart`, `LiteLineChart`, `LitePieChart` | Server-rendered SVG/HTML charts with fallback data tables |
+
+### Compatibility & Degradation Primitives
 
 | Component | Description |
 |-----------|-------------|
-| `LiteLayout` | Sidebar + main area layout (supports `menu` prop for multi-level menus) |
-| `LiteTable` | HTML table with sort links and delete confirmation |
-| `LiteSearch` | GET-based search form |
-| `LitePagination` | Page number links |
-| `LiteForm` | Auto-generated form from `FieldDefinition[]` |
-| `LiteShow` | Record detail/view page |
-| `LiteLogin` | Login form |
-| `LiteAlert` | Success/error notification banner |
 | `LiteCapabilityBoundary` | Documents and selects a server-safe fallback for an optional browser capability |
 | `LiteVisualFallback` | Snapshot plus accessible table for Canvas, WebGL, map, chart, and flow UIs |
 | `LiteDirectoryUpload` | Directory enhancement with multiple-file and ZIP upload fallbacks |
@@ -242,6 +301,23 @@ IE11 before the decision is made.
 | `LiteComputeFallback` | Native POST action for WASM, Worker, and long-running compute fallback |
 | `LiteOrderedList` | Up/down POST actions for drag-and-drop ordering fallback |
 | `LiteClipboardFallback` | Selectable textarea when Clipboard API is unavailable |
+| `LiteAutoSaveIndicator` | Server persistence timestamp indicator |
+| `LiteInlineEdit` | Non-JS inline edit modal fallback |
+| `LiteModalForm` / `LiteDrawerForm` | Fragment-target `#modal` forms for zero-JS popups |
+| `LiteVirtualTable` | Graceful fallback to server-paginated table |
+| `LiteDraggableHeader` | Static column header with URL sorter links |
+| `LiteToast` / `LiteUndoableNotification` | Server-driven flash messages and undo actions |
+| `LiteFilterBuilder` | Native multi-rule CRUD filter builder with AND/OR logical operators |
+
+## Parity Tracking & Visualization
+
+To monitor and maintain 100% component parity between `@svadmin/ui` and `@svadmin/lite`:
+
+- **CLI Dashboard**: Run `bun run check:parity` to inspect the live coverage matrix in terminal.
+- **Parity Matrix Document**: [PARITY.md](./PARITY.md) is auto-generated with exhaustive module-by-module tables.
+- **Machine-Readable JSON**: `packages/lite/parity.json` provides structured data for automation.
+- **Interactive Showroom**: Visit `/lite/parity` in the example app to interactively preview all 72 components and live metrics.
+- **CI Contract Test**: `scripts/parity-contract.test.ts` runs in CI to prevent regression and ensure every new UI component has a documented Lite counterpart.
 
 ## Server Utilities
 

package/dist/components/LiteActivityFeed.svelte

@@ -0,0 +1,98 @@
+<script lang="ts">
+  interface LiteActivityItem {
+    id: string;
+    user?: { name: string };
+    action: string;
+    target?: string;
+    timestamp: string;
+    comment?: string;
+    status?: 'info' | 'success' | 'warning' | 'destructive';
+  }
+
+  interface Props {
+    activities?: LiteActivityItem[];
+    action?: string;
+    method?: 'get' | 'post' | 'dialog' | 'GET' | 'POST' | 'DIALOG' | null;
+  }
+
+  let {
+    activities = [],
+    action = '',
+    method = 'POST',
+  }: Props = $props();
+</script>
+
+<div class="lite-activity-card">
+  <div class="lite-activity-header">
+    <strong>Activity & Timeline Stream</strong>
+  </div>
+
+  <ul class="lite-activity-list">
+    {#each activities as act (act.id)}
+      <li class="lite-activity-item">
+        <div class="lite-activity-title">
+          <strong>{act.user?.name ?? 'System'}</strong> {act.action}
+          {#if act.target}<strong>{act.target}</strong>{/if}
+          <span class="lite-activity-time">{act.timestamp}</span>
+        </div>
+        {#if act.comment}
+          <div class="lite-activity-comment">
+            {act.comment}
+          </div>
+        {/if}
+      </li>
+    {/each}
+  </ul>
+
+  <!-- Comment Form -->
+  <form {action} {method} class="lite-activity-form">
+    <div style="margin-bottom: 8px;">
+      <label for="lite_act_comment" class="lite-label">Add Note / Comment:</label>
+      <textarea id="lite_act_comment" name="comment" class="lite-textarea" style="height: 50px;" placeholder="Write a comment..."></textarea>
+    </div>
+    <div style="text-align: right;">
+      <button type="submit" class="lite-btn lite-btn-primary lite-btn-sm">
+        Post Comment
+      </button>
+    </div>
+  </form>
+</div>
+
+<style>
+  .lite-activity-card {
+    background: #ffffff;
+    border: 1px solid #cbd5e1;
+    border-radius: 6px;
+    padding: 16px;
+    margin-bottom: 16px;
+  }
+  .lite-activity-header {
+    padding-bottom: 8px;
+    border-bottom: 1px solid #e2e8f0;
+    margin-bottom: 12px;
+    font-size: 13px;
+  }
+  .lite-activity-list {
+    list-style: none;
+    padding: 0;
+    margin: 0 0 16px 0;
+  }
+  .lite-activity-item {
+    padding: 8px 0;
+    border-bottom: 1px solid #f1f5f9;
+    font-size: 12px;
+  }
+  .lite-activity-time {
+    color: #94a3b8;
+    margin-left: 8px;
+    font-size: 11px;
+  }
+  .lite-activity-comment {
+    background: #f8fafc;
+    border: 1px solid #e2e8f0;
+    padding: 6px 10px;
+    border-radius: 4px;
+    margin-top: 4px;
+    color: #475569;
+  }
+</style>

package/dist/components/LiteActivityFeed.svelte.d.ts

@@ -0,0 +1,19 @@
+interface LiteActivityItem {
+    id: string;
+    user?: {
+        name: string;
+    };
+    action: string;
+    target?: string;
+    timestamp: string;
+    comment?: string;
+    status?: 'info' | 'success' | 'warning' | 'destructive';
+}
+interface Props {
+    activities?: LiteActivityItem[];
+    action?: string;
+    method?: 'get' | 'post' | 'dialog' | 'GET' | 'POST' | 'DIALOG' | null;
+}
+declare const LiteActivityFeed: import("svelte").Component<Props, {}, "">;
+type LiteActivityFeed = ReturnType<typeof LiteActivityFeed>;
+export default LiteActivityFeed;

package/dist/components/LiteApprovalActionCard.svelte

@@ -0,0 +1,75 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    title?: string;
+    status?: 'pending' | 'approved' | 'rejected' | 'recalled';
+    action?: string;
+    children?: Snippet;
+  }
+
+  let {
+    title = 'Approval Request',
+    status = 'pending',
+    action = '',
+    children,
+  }: Props = $props();
+</script>
+
+<div class="lite-approval-card lite-form-group">
+  <div class="lite-approval-header">
+    <strong>{title}</strong>
+    <span class="lite-badge lite-badge-{status}">{status.toUpperCase()}</span>
+  </div>
+
+  {#if children}
+    <div class="lite-approval-body">
+      {@render children()}
+    </div>
+  {/if}
+
+  {#if status === 'pending'}
+    <form {action} method="POST" class="lite-approval-form">
+      <div class="lite-approval-field">
+        <label for="approval_comment" class="lite-label">Approval / Rejection Comment:</label>
+        <textarea id="approval_comment" name="comment" class="lite-textarea" style="height: 60px;" placeholder="Optional comment or rejection reason..."></textarea>
+      </div>
+      <div class="lite-approval-actions">
+        <button type="submit" name="_action" value="approve" class="lite-btn lite-btn-sm lite-btn-success">
+          ✔ Approve
+        </button>
+        <button type="submit" name="_action" value="reject" class="lite-btn lite-btn-sm lite-btn-danger" style="margin-left: 8px;">
+          ✕ Reject
+        </button>
+      </div>
+    </form>
+  {/if}
+</div>
+
+<style>
+  .lite-approval-card {
+    padding: 12px;
+    background: #f8fafc;
+    border: 1px solid #cbd5e1;
+    border-radius: 6px;
+    margin-bottom: 16px;
+  }
+  .lite-approval-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 8px;
+    font-size: 13px;
+  }
+  .lite-approval-body {
+    font-size: 12px;
+    color: #475569;
+    margin-bottom: 12px;
+  }
+  .lite-approval-field {
+    margin-bottom: 8px;
+  }
+  .lite-approval-actions {
+    display: flex;
+  }
+</style>

package/dist/components/LiteApprovalActionCard.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    title?: string;
+    status?: 'pending' | 'approved' | 'rejected' | 'recalled';
+    action?: string;
+    children?: Snippet;
+}
+declare const LiteApprovalActionCard: import("svelte").Component<Props, {}, "">;
+type LiteApprovalActionCard = ReturnType<typeof LiteApprovalActionCard>;
+export default LiteApprovalActionCard;

package/dist/components/LiteCanvasAnnotation.svelte

@@ -0,0 +1,136 @@
+<script lang="ts">
+  export interface AnnotationItem {
+    id: string;
+    type: string;
+    text?: string;
+    color?: string;
+  }
+
+  interface Props {
+    imageUrl?: string;
+    annotations?: AnnotationItem[];
+    title?: string;
+    formAction?: string;
+    class?: string;
+  }
+
+  let {
+    imageUrl = '',
+    annotations = [],
+    title = 'Image Annotation & Markings',
+    formAction = '',
+    class: className = '',
+  }: Props = $props();
+</script>
+
+<div class="sv-lite-annotation-box {className}">
+  <div class="sv-lite-anno-header">
+    <strong>{title}</strong>
+    <span class="sv-lite-anno-count">({annotations.length} markers)</span>
+  </div>
+
+  {#if imageUrl}
+    <div class="sv-lite-anno-preview">
+      <img src={imageUrl} alt="Annotation Target" class="sv-lite-anno-img" />
+    </div>
+  {/if}
+
+  {#if annotations.length > 0}
+    <div class="sv-lite-anno-list">
+      <div class="sv-lite-list-title">Annotations:</div>
+      {#each annotations as anno (anno.id)}
+        <div class="sv-lite-anno-item">
+          <span class="sv-lite-anno-badge">{anno.type}</span>
+          <span class="sv-lite-anno-text">{anno.text ?? 'Defect / Mark'}</span>
+        </div>
+      {/each}
+    </div>
+  {/if}
+
+  {#if formAction}
+    <div class="sv-lite-anno-upload">
+      <form method="POST" action={formAction} enctype="multipart/form-data">
+        <input type="file" name="annotatedImage" accept="image/*" class="sv-lite-file-input" />
+        <button type="submit" class="sv-lite-upload-btn">Upload Markup</button>
+      </form>
+    </div>
+  {/if}
+</div>
+
+<style>
+  .sv-lite-annotation-box {
+    display: block;
+    border: 1px solid #e2e8f0;
+    border-radius: 6px;
+    padding: 12px;
+    background-color: #ffffff;
+    font-size: 12px;
+  }
+  .sv-lite-anno-header {
+    margin-bottom: 10px;
+    font-size: 13px;
+    color: #0f172a;
+  }
+  .sv-lite-anno-count {
+    color: #64748b;
+    font-size: 11px;
+    margin-left: 6px;
+  }
+  .sv-lite-anno-preview {
+    text-align: center;
+    background-color: #f8fafc;
+    border: 1px solid #cbd5e1;
+    border-radius: 4px;
+    padding: 8px;
+    margin-bottom: 10px;
+  }
+  .sv-lite-anno-img {
+    max-width: 100%;
+    max-height: 240px;
+    vertical-align: middle;
+  }
+  .sv-lite-anno-list {
+    margin-bottom: 10px;
+    padding: 8px;
+    background-color: #f8fafc;
+    border-radius: 4px;
+  }
+  .sv-lite-list-title {
+    font-weight: 600;
+    color: #475569;
+    margin-bottom: 6px;
+  }
+  .sv-lite-anno-item {
+    margin-bottom: 4px;
+  }
+  .sv-lite-anno-badge {
+    display: inline-block;
+    padding: 1px 5px;
+    background-color: #fee2e2;
+    color: #991b1b;
+    border-radius: 3px;
+    font-size: 10px;
+    text-transform: uppercase;
+    margin-right: 6px;
+  }
+  .sv-lite-anno-text {
+    color: #334155;
+  }
+  .sv-lite-anno-upload {
+    padding-top: 8px;
+    border-top: 1px solid #e2e8f0;
+  }
+  .sv-lite-file-input {
+    font-size: 11px;
+    margin-right: 8px;
+  }
+  .sv-lite-upload-btn {
+    padding: 4px 10px;
+    font-size: 11px;
+    background-color: #4f46e5;
+    color: #ffffff;
+    border: none;
+    border-radius: 3px;
+    cursor: pointer;
+  }
+</style>

package/dist/components/LiteCanvasAnnotation.svelte.d.ts

@@ -0,0 +1,16 @@
+export interface AnnotationItem {
+    id: string;
+    type: string;
+    text?: string;
+    color?: string;
+}
+interface Props {
+    imageUrl?: string;
+    annotations?: AnnotationItem[];
+    title?: string;
+    formAction?: string;
+    class?: string;
+}
+declare const LiteCanvasAnnotation: import("svelte").Component<Props, {}, "">;
+type LiteCanvasAnnotation = ReturnType<typeof LiteCanvasAnnotation>;
+export default LiteCanvasAnnotation;

package/dist/components/LiteColumnHeaderFilter.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+  import type { FieldDefinition } from '@svadmin/core';
+
+  interface Props {
+    field: FieldDefinition;
+    action?: string;
+  }
+
+  let {
+    field,
+    action = '',
+  }: Props = $props();
+</script>
+
+<span class="lite-column-header-filter">
+  <a
+    href="{action}?filter_field={field.key}"
+    class="lite-filter-icon"
+    title="Filter by {field.label}"
+  >
+    🔍
+  </a>
+</span>
+
+<style>
+  .lite-column-header-filter {
+    display: inline-block;
+    margin-left: 4px;
+  }
+  .lite-filter-icon {
+    font-size: 11px;
+    text-decoration: none;
+    opacity: 0.6;
+  }
+  .lite-filter-icon:hover {
+    opacity: 1;
+  }
+</style>

package/dist/components/LiteColumnHeaderFilter.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { FieldDefinition } from '@svadmin/core';
+interface Props {
+    field: FieldDefinition;
+    action?: string;
+}
+declare const LiteColumnHeaderFilter: import("svelte").Component<Props, {}, "">;
+type LiteColumnHeaderFilter = ReturnType<typeof LiteColumnHeaderFilter>;
+export default LiteColumnHeaderFilter;

package/dist/components/LiteColumnSettings.svelte

@@ -0,0 +1,82 @@
+<script lang="ts">
+  export interface LiteColumnOption {
+    key: string;
+    label: string;
+    visible: boolean;
+  }
+
+  interface Props {
+    columns: LiteColumnOption[];
+    action?: string;
+    method?: 'GET' | 'POST' | 'get' | 'post';
+    title?: string;
+    submitText?: string;
+  }
+
+  let {
+    columns = [],
+    action = '',
+    method = 'GET',
+    title = 'Column Visibility',
+    submitText = 'Apply',
+  }: Props = $props();
+</script>
+
+<div class="lite-column-settings lite-form-group">
+  <div class="lite-column-settings-title">
+    <strong>⚙ {title}</strong>
+  </div>
+  <form {action} {method} class="lite-column-settings-form">
+    <div class="lite-column-options">
+      {#each columns as col (col.key)}
+        <label class="lite-column-option">
+          <input
+            type="checkbox"
+            name="columns"
+            value={col.key}
+            checked={col.visible}
+          />
+          <span>{col.label}</span>
+        </label>
+      {/each}
+    </div>
+    <div class="lite-column-actions">
+      <button type="submit" class="lite-btn lite-btn-sm lite-btn-primary">
+        {submitText}
+      </button>
+    </div>
+  </form>
+</div>
+
+<style>
+  .lite-column-settings {
+    margin-bottom: 12px;
+    padding: 8px 12px;
+    background: #f8fafc;
+    border: 1px solid #cbd5e1;
+    border-radius: 4px;
+  }
+  .lite-column-settings-title {
+    font-size: 12px;
+    color: #475569;
+    margin-bottom: 6px;
+  }
+  .lite-column-options {
+    display: flex;
+    flex-wrap: wrap;
+  }
+  .lite-column-option {
+    display: inline-flex;
+    align-items: center;
+    margin-right: 12px;
+    margin-bottom: 4px;
+    font-size: 12px;
+    cursor: pointer;
+  }
+  .lite-column-option input {
+    margin-right: 4px;
+  }
+  .lite-column-actions {
+    margin-top: 6px;
+  }
+</style>

package/dist/components/LiteColumnSettings.svelte.d.ts

@@ -0,0 +1,15 @@
+export interface LiteColumnOption {
+    key: string;
+    label: string;
+    visible: boolean;
+}
+interface Props {
+    columns: LiteColumnOption[];
+    action?: string;
+    method?: 'GET' | 'POST' | 'get' | 'post';
+    title?: string;
+    submitText?: string;
+}
+declare const LiteColumnSettings: import("svelte").Component<Props, {}, "">;
+type LiteColumnSettings = ReturnType<typeof LiteColumnSettings>;
+export default LiteColumnSettings;