@svadmin/lite 0.5.0 → 0.7.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
@@ -25,8 +31,11 @@ The main `@svadmin/ui` package delivers a premium SPA experience using Svelte 5,
 | **Authentication pages** | Login/logout plus optional provider-delegating account actions |
 | **Auth Guard** | Server hook redirects unauthenticated users |
 | **UA Detection** | Optional legacy-browser detection hook redirects users to `/lite/` routes |
+| **SPA + IE11 split** | Modern browsers keep the existing SPA; IE11 is redirected before the SPA route is rendered |
+| **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
@@ -42,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';
@@ -195,18 +218,106 @@ export const handle = createLegacyRedirectHook('/lite');
 </head>
 ```
 
-## Components
+### 5. Keep the SPA untouched while routing IE11 to Lite
+
+The redirect belongs to the server hook or reverse proxy. It does not add a
+compatibility branch, polyfill, or user-agent check to the SPA bundle:
+
+```typescript
+// src/hooks.server.ts
+import { createLegacyRedirectHook } from '@svadmin/lite';
+
+export const handle = createLegacyRedirectHook({
+  litePrefix: '/lite',
+  spaPrefix: '/admin',
+  // Static assets, health checks, and API routes stay outside document routing.
+  exclude: ['/api', '/_app', '/health'],
+});
+```
+
+For a request such as `/admin/orders/show/7`, an IE11 user receives a 302 to
+`/lite/orders/show/7`. Modern browsers continue to the existing SPA route.
+The Lite subtree must remain `ssr = true` and `csr = false`; the browser never
+executes Svelte 5 there.
+
+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 & 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` | 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 |
+| `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 |
+|-----------|-------------|
+| `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 |
+| `LiteRealtimeStatus` | Snapshot timestamp and native refresh/meta-refresh fallback for live data |
+| `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
 
@@ -243,6 +354,68 @@ Copy the exported `@svadmin/lite/enhance.js` asset to your application's static
 
 The asset is optional for core server-rendered navigation and form submission; the conveniences listed above require it.
 
+## Capability compatibility
+
+The compatibility catalog is exported as `LITE_COMPATIBILITY_CATALOG`, with
+`detectLiteCapabilities()` and `resolveLiteCompatibility()` for explicit client
+enhancement entries. The detector accepts an injected environment, so SSR tests
+do not need browser globals:
+
+```typescript
+import {
+  detectLiteCapabilities,
+  resolveLiteCompatibility,
+} from '@svadmin/lite';
+
+const support = detectLiteCapabilities(globalThis);
+const realtime = resolveLiteCompatibility('websocket', support);
+```
+
+Do not import this detector into the modern SPA just to make IE11 work. The SPA
+stays modern. Use it only in an optional Lite enhancement entry or a modern-only
+Lite page. The normal Lite route requires no detector and no hydration.
+
+Recommended fallback contract:
+
+| Modern capability | Required Lite fallback |
+|---|---|
+| Canvas/WebGL/flow/map/chart | Static image or SVG plus a structured data table and download |
+| WASM/Worker | Server action or background job with status and downloadable result |
+| WebSocket/SSE | Snapshot timestamp, refresh link, optional polling or meta refresh |
+| Directory/File System Access | Multiple files, relative paths where available, or ZIP upload |
+| Virtual scrolling/IntersectionObserver | Server pagination or eager server rendering |
+| Drag and drop | Ordered list with up/down POST actions |
+| Clipboard API | Selectable text area and normal browser copy command |
+| IndexedDB/localStorage | Server persistence for authoritative data; local cache only for preferences |
+| Notifications/Media Capture/WebRTC | In-page status, file upload, or server-managed workflow |
+
+These fallbacks preserve the business operation, submitted data, read access,
+download, and auditability. They do not attempt to reproduce every modern
+interaction pixel-for-pixel.
+
+### Third-party library boundaries
+
+Do not patch these libraries into the IE11 document. Keep them in the modern SPA
+and render the matching Lite fallback from shared records or server projections:
+
+| Modern library family | Examples | Lite boundary |
+|---|---|---|
+| Flow/canvas/3D | `@xyflow/svelte`, Three.js, Fabric.js | `LiteVisualFallback` with nodes, edges, properties, snapshot, and export |
+| Charts | ECharts, Chart.js, Vega | Lite chart components or `LiteVisualFallback` with a data table |
+| Maps | MapLibre, Leaflet | Address/coordinate table, static map image, and external navigation link |
+| Editors | Monaco, CodeMirror, TipTap | `textarea`, Markdown, source download, and server validation |
+| Realtime clients | native WebSocket/EventSource, Socket.IO | `LiteRealtimeStatus`, refresh, polling endpoint, or server status page |
+| File-system helpers | `browser-fs-access` | `LiteDirectoryUpload` and normal download links |
+| Browser storage | `idb`, `idb-keyval`, localForage | Server persistence; browser cache only for drafts and preferences |
+| Virtual table/drag libraries | TanStack Virtual, SortableJS | Server pagination and `LiteOrderedList` actions |
+| PDF/media terminals | PDF.js, MediaRecorder, WebRTC, xterm.js | Download/upload, transcript/log view, and server workflow |
+
+Dependency patch systems such as Bun `patchedDependencies` or `patch-package`
+should only repair a reproducible package defect, such as an eager `window`
+reference or incorrect package export. They must not be used to pretend that an
+unavailable browser capability exists. Every retained patch needs an exact
+package version, a regression test, and a documented removal condition.
+
 ## Compatibility notes
 
 - Registration, recovery, password, and profile actions delegate the submitted form
@@ -261,6 +434,14 @@ The asset is optional for core server-rendered navigation and form submission; t
   native links/forms and the IE11-safe Lite CSS contract. Keep the entire Lite route
   subtree on `ssr = true` and `csr = false`; Svelte 5 hydration/runtime execution in
   IE11 is not supported or promised by this package.
+- The SPA is not an IE11 target. The supported architecture is `modern SPA +
+  server-routed Lite`, where server middleware decides which document bundle is
+  returned before the browser executes application JavaScript.
+- Third-party polyfills are optional host concerns. `@vitejs/plugin-legacy`,
+  `core-js`, Fetch/EventSource polyfills, and `browser-fs-access` can improve a
+  modern-only enhancement entry, but they are not Lite core dependencies and do
+  not replace a server fallback for Canvas, WebSocket protocol support, WASM, or
+  File System Access.
 
 ## License
 

package/dist/compatibility.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Browser capability metadata for optional Lite enhancements.
+ *
+ * The SSR baseline never reads browser globals. Consumers may call
+ * `detectLiteCapabilities(globalThis)` from an explicitly client-only entry.
+ */
+export type LiteCapability = 'canvas-2d' | 'webgl' | 'wasm' | 'wasm-streaming' | 'websocket' | 'event-source' | 'worker' | 'directory-upload' | 'file-system-access' | 'clipboard' | 'broadcast-channel' | 'intersection-observer' | 'resize-observer' | 'service-worker' | 'indexed-db' | 'notifications' | 'media-capture' | 'web-rtc' | 'geolocation' | 'web-streams';
+export type LiteFallbackKind = 'structured-data' | 'static-snapshot' | 'server-action' | 'server-refresh' | 'server-pagination' | 'standard-upload' | 'manual-copy' | 'server-storage' | 'in-page-status' | 'download';
+export interface LiteCompatibilityDescriptor {
+    capability: LiteCapability;
+    fallbackKind: LiteFallbackKind;
+    fallback: string;
+    enhancement: string;
+}
+export type LiteCapabilitySupport = Record<LiteCapability, boolean>;
+export interface LiteCompatibilityResolution extends LiteCompatibilityDescriptor {
+    supported: boolean;
+    mode: 'enhanced' | 'fallback';
+}
+export declare const LITE_COMPATIBILITY_CATALOG: readonly LiteCompatibilityDescriptor[];
+/** Detect optional browser APIs without accessing globals during SSR. */
+export declare function detectLiteCapabilities(environment?: unknown): LiteCapabilitySupport;
+export declare function resolveLiteCompatibility(capability: LiteCapability, support?: LiteCapabilitySupport): LiteCompatibilityResolution;

package/dist/compatibility.js

@@ -0,0 +1,95 @@
+/**
+ * Browser capability metadata for optional Lite enhancements.
+ *
+ * The SSR baseline never reads browser globals. Consumers may call
+ * `detectLiteCapabilities(globalThis)` from an explicitly client-only entry.
+ */
+function asRecord(value) {
+    return value !== null && (typeof value === 'object' || typeof value === 'function')
+        ? value
+        : undefined;
+}
+function hasFunction(record, key) {
+    return typeof record?.[key] === 'function';
+}
+function supportsCanvas(documentValue, context) {
+    const documentRecord = asRecord(documentValue);
+    if (!documentRecord || typeof documentRecord.createElement !== 'function')
+        return false;
+    const canvas = documentRecord.createElement('canvas');
+    const canvasRecord = asRecord(canvas);
+    if (!canvasRecord || typeof canvasRecord.getContext !== 'function')
+        return false;
+    return Boolean(canvasRecord.getContext(context));
+}
+function supportsDirectoryUpload(environment) {
+    const inputConstructor = asRecord(environment.HTMLInputElement);
+    const prototype = asRecord(inputConstructor?.prototype);
+    return prototype !== undefined && ('webkitdirectory' in prototype || 'directory' in prototype);
+}
+export const LITE_COMPATIBILITY_CATALOG = [
+    { capability: 'canvas-2d', fallbackKind: 'structured-data', fallback: 'Render a data table or static image.', enhancement: 'Load the Canvas UI in a modern client.' },
+    { capability: 'webgl', fallbackKind: 'static-snapshot', fallback: 'Render a server-generated image and structured values.', enhancement: 'Load the WebGL view in a modern client.' },
+    { capability: 'wasm', fallbackKind: 'server-action', fallback: 'Submit the task to a server action or background job.', enhancement: 'Run the WebAssembly module in a modern client.' },
+    { capability: 'wasm-streaming', fallbackKind: 'server-action', fallback: 'Use a server computation or downloadable result.', enhancement: 'Instantiate WebAssembly from a streamed response.' },
+    { capability: 'websocket', fallbackKind: 'server-refresh', fallback: 'Show the last snapshot with a native refresh link.', enhancement: 'Subscribe through WebSocket.' },
+    { capability: 'event-source', fallbackKind: 'server-refresh', fallback: 'Use refresh, polling, or a server status page.', enhancement: 'Subscribe through server-sent events.' },
+    { capability: 'worker', fallbackKind: 'server-action', fallback: 'Run work synchronously or as a server job.', enhancement: 'Move client computation into a Worker.' },
+    { capability: 'directory-upload', fallbackKind: 'standard-upload', fallback: 'Upload multiple files or a ZIP archive.', enhancement: 'Select a directory and preserve relative paths.' },
+    { capability: 'file-system-access', fallbackKind: 'standard-upload', fallback: 'Use standard file inputs and download links.', enhancement: 'Use the File System Access API.' },
+    { capability: 'clipboard', fallbackKind: 'manual-copy', fallback: 'Expose selectable text for manual copy and paste.', enhancement: 'Use the Clipboard API.' },
+    { capability: 'broadcast-channel', fallbackKind: 'server-refresh', fallback: 'Reload server-owned session state.', enhancement: 'Synchronize non-authoritative UI state between tabs.' },
+    { capability: 'intersection-observer', fallbackKind: 'server-pagination', fallback: 'Render eagerly or use server pagination.', enhancement: 'Lazy-load or virtualize visible content.' },
+    { capability: 'resize-observer', fallbackKind: 'structured-data', fallback: 'Use stable responsive dimensions and normal document flow.', enhancement: 'React to element-size changes.' },
+    { capability: 'service-worker', fallbackKind: 'download', fallback: 'Offer static snapshots and downloadable exports.', enhancement: 'Cache explicitly selected offline assets.' },
+    { capability: 'indexed-db', fallbackKind: 'server-storage', fallback: 'Persist authoritative state on the server.', enhancement: 'Cache drafts and non-authoritative preferences locally.' },
+    { capability: 'notifications', fallbackKind: 'in-page-status', fallback: 'Render an in-page alert and audit log.', enhancement: 'Show a browser notification after permission is granted.' },
+    { capability: 'media-capture', fallbackKind: 'standard-upload', fallback: 'Upload an existing image, audio, or video file.', enhancement: 'Capture media from the browser.' },
+    { capability: 'web-rtc', fallbackKind: 'standard-upload', fallback: 'Upload a recording or use a server-managed workflow.', enhancement: 'Enable a real-time peer media session.' },
+    { capability: 'geolocation', fallbackKind: 'structured-data', fallback: 'Enter an address or coordinates manually.', enhancement: 'Read the current location with user permission.' },
+    { capability: 'web-streams', fallbackKind: 'download', fallback: 'Use a normal request, response, upload, or download.', enhancement: 'Process streamed data in the modern client.' },
+];
+const descriptorByCapability = new Map(LITE_COMPATIBILITY_CATALOG.map((descriptor) => [descriptor.capability, descriptor]));
+/** Detect optional browser APIs without accessing globals during SSR. */
+export function detectLiteCapabilities(environment) {
+    const explicitEnvironment = arguments.length > 0;
+    const env = asRecord(explicitEnvironment
+        ? environment
+        : typeof globalThis === 'undefined' ? undefined : globalThis) ?? {};
+    const navigator = asRecord(env.navigator);
+    const clipboard = asRecord(navigator?.clipboard);
+    const webAssembly = asRecord(env.WebAssembly);
+    const readableStream = asRecord(env.ReadableStream);
+    return {
+        'canvas-2d': supportsCanvas(env.document, '2d'),
+        webgl: supportsCanvas(env.document, 'webgl'),
+        wasm: hasFunction(webAssembly, 'instantiate'),
+        'wasm-streaming': hasFunction(webAssembly, 'instantiateStreaming'),
+        websocket: typeof env.WebSocket === 'function',
+        'event-source': typeof env.EventSource === 'function',
+        worker: typeof env.Worker === 'function',
+        'directory-upload': supportsDirectoryUpload(env),
+        'file-system-access': typeof env.showOpenFilePicker === 'function'
+            || typeof env.showDirectoryPicker === 'function',
+        clipboard: hasFunction(clipboard, 'writeText'),
+        'broadcast-channel': typeof env.BroadcastChannel === 'function',
+        'intersection-observer': typeof env.IntersectionObserver === 'function',
+        'resize-observer': typeof env.ResizeObserver === 'function',
+        'service-worker': asRecord(navigator?.serviceWorker) !== undefined,
+        'indexed-db': asRecord(env.indexedDB) !== undefined,
+        notifications: typeof env.Notification === 'function',
+        'media-capture': hasFunction(asRecord(navigator?.mediaDevices), 'getUserMedia')
+            || typeof env.MediaRecorder === 'function',
+        'web-rtc': typeof env.RTCPeerConnection === 'function',
+        geolocation: asRecord(navigator?.geolocation) !== undefined,
+        'web-streams': asRecord(env.ReadableStream) !== undefined
+            && (hasFunction(readableStream, 'from') || typeof env.WritableStream === 'function'),
+    };
+}
+export function resolveLiteCompatibility(capability, support = detectLiteCapabilities()) {
+    const descriptor = descriptorByCapability.get(capability);
+    if (!descriptor)
+        throw new Error(`Unknown Lite capability: ${capability}`);
+    const supported = support[capability];
+    return { ...descriptor, supported, mode: supported ? 'enhanced' : 'fallback' };
+}

package/dist/components/LiteDynamicFormList.svelte

@@ -0,0 +1,169 @@
+<script lang="ts" generics="T = Record<string, unknown>">
+  import type { Snippet } from 'svelte';
+  import { t } from '@svadmin/core/i18n';
+
+  interface Props {
+    items?: T[];
+    name?: string;
+    label?: string;
+    description?: string;
+    addButtonLabel?: string;
+    minItems?: number;
+    maxItems?: number;
+    defaultItem?: T | (() => T);
+    disabled?: boolean;
+    emptyText?: string;
+    children?: Snippet<[{
+      item: T;
+      index: number;
+      isFirst: boolean;
+      isLast: boolean;
+    }]>;
+    headerExtra?: Snippet<[{ count: number }]>;
+  }
+
+  let {
+    items = [],
+    name = 'items',
+    label,
+    description,
+    addButtonLabel = '+ Add Item',
+    minItems = 0,
+    maxItems = Infinity,
+    disabled = false,
+    emptyText = 'No items yet',
+    children,
+    headerExtra,
+  }: Props = $props();
+
+  const renderedItems = $derived(items.length > 0 ? items : (minItems > 0 ? Array(minItems).fill({}) as T[] : []));
+</script>
+
+<div class="lite-dynamic-form-list lite-form-group">
+  <div class="lite-dynamic-header">
+    <div>
+      {#if label}
+        <span class="lite-label">{label}</span>
+      {/if}
+      {#if description}
+        <p class="lite-help-text">{description}</p>
+      {/if}
+    </div>
+    <div class="lite-dynamic-actions">
+      {#if headerExtra}
+        {@render headerExtra({ count: renderedItems.length })}
+      {/if}
+      <span class="lite-badge">{renderedItems.length} {t('common.items') || 'items'}</span>
+    </div>
+  </div>
+
+  {#if renderedItems.length === 0}
+    <div class="lite-empty-box">
+      <p>{emptyText}</p>
+    </div>
+  {:else}
+    <div class="lite-dynamic-items">
+      {#each renderedItems as item, idx (idx)}
+        <div class="lite-dynamic-item-card">
+          <div class="lite-dynamic-item-header">
+            <span class="lite-badge lite-badge-indigo">#{idx + 1}</span>
+            <div class="lite-dynamic-item-tools">
+              {#if idx > 0}
+                <button type="submit" name="_action" value="move_up_{name}_{idx}" class="lite-btn lite-btn-sm" {disabled} title="Move Up">↑</button>
+              {/if}
+              {#if idx < renderedItems.length - 1}
+                <button type="submit" name="_action" value="move_down_{name}_{idx}" class="lite-btn lite-btn-sm" {disabled} title="Move Down">↓</button>
+              {/if}
+              {#if renderedItems.length > minItems}
+                <button type="submit" name="_action" value="remove_{name}_{idx}" class="lite-btn lite-btn-sm lite-btn-danger" {disabled} title="Remove">✕</button>
+              {/if}
+            </div>
+          </div>
+          <div class="lite-dynamic-item-body">
+            {#if children}
+              {@render children({
+                item,
+                index: idx,
+                isFirst: idx === 0,
+                isLast: idx === renderedItems.length - 1,
+              })}
+            {:else}
+              <div class="lite-form-row">
+                {#each Object.entries((item as Record<string, unknown>) ?? {}) as [k, v] (k)}
+                  <div class="lite-form-group" style="flex: 1; min-width: 140px;">
+                    <label class="lite-label" for="{name}_{idx}_{k}">{k}</label>
+                    <input
+                      type="text"
+                      id="{name}_{idx}_{k}"
+                      name="{name}[{idx}][{k}]"
+                      value={String(v ?? '')}
+                      class="lite-input"
+                      {disabled}
+                    />
+                  </div>
+                {/each}
+              </div>
+            {/if}
+          </div>
+        </div>
+      {/each}
+    </div>
+  {/if}
+
+  {#if renderedItems.length < maxItems && !disabled}
+    <div style="margin-top: 10px;">
+      <button type="submit" name="_action" value="add_{name}" class="lite-btn">
+        {addButtonLabel}
+      </button>
+    </div>
+  {/if}
+</div>
+
+<style>
+  .lite-dynamic-form-list {
+    border: 1px solid #e2e8f0;
+    border-radius: 6px;
+    padding: 14px;
+    background-color: #fafafa;
+    margin-bottom: 16px;
+  }
+  .lite-dynamic-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 12px;
+  }
+  .lite-dynamic-items {
+    display: flex;
+    flex-direction: column;
+  }
+  .lite-dynamic-item-card {
+    background: #ffffff;
+    border: 1px solid #e2e8f0;
+    border-radius: 4px;
+    padding: 12px;
+    margin-bottom: 10px;
+  }
+  .lite-dynamic-item-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 8px;
+    border-bottom: 1px dashed #e2e8f0;
+    padding-bottom: 6px;
+  }
+  .lite-dynamic-item-tools {
+    display: flex;
+  }
+  .lite-dynamic-item-tools button {
+    margin-left: 4px;
+  }
+  .lite-empty-box {
+    text-align: center;
+    padding: 24px 12px;
+    color: #64748b;
+    background: #ffffff;
+    border: 1px dashed #cbd5e1;
+    border-radius: 4px;
+  }
+</style>

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

@@ -0,0 +1,45 @@
+import type { Snippet } from 'svelte';
+declare function $$render<T = Record<string, unknown>>(): {
+    props: {
+        items?: T[];
+        name?: string;
+        label?: string;
+        description?: string;
+        addButtonLabel?: string;
+        minItems?: number;
+        maxItems?: number;
+        defaultItem?: T | (() => T);
+        disabled?: boolean;
+        emptyText?: string;
+        children?: Snippet<[{
+            item: T;
+            index: number;
+            isFirst: boolean;
+            isLast: boolean;
+        }]>;
+        headerExtra?: Snippet<[{
+            count: number;
+        }]>;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T = Record<string, unknown>> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T = Record<string, unknown>>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T = Record<string, unknown>>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const LiteDynamicFormList: $$IsomorphicComponent;
+type LiteDynamicFormList<T = Record<string, unknown>> = InstanceType<typeof LiteDynamicFormList<T>>;
+export default LiteDynamicFormList;