@svadmin/lite 0.5.0 → 0.6.0

package/README.md

@@ -25,6 +25,8 @@ 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[]` |
 | **Print** | `@media print` optimized styles |
@@ -195,6 +197,32 @@ export const handle = createLegacyRedirectHook('/lite');
 </head>
 ```
 
+### 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
 
 | Component | Description |
@@ -207,6 +235,13 @@ export const handle = createLegacyRedirectHook('/lite');
 | `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 |
+| `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 |
 
 ## Server Utilities
 
@@ -243,6 +278,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 +358,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/LiteShowField.svelte

@@ -2,66 +2,74 @@
   /**
    * LiteShowField — SSR-compatible field renderer for detail views.
    * Renders a single field value based on its type definition.
-  */
-  import type { FieldDefinition } from '@svadmin/core';
-  import { toSafeHref, toSafeText } from '../security';
-  import { isExplicitBooleanTrue, getStatusBadgeClass } from '../value-normalization';
-  import LiteMediaThumbnail from './LiteMediaThumbnail.svelte';
+   */
+  import type { FieldDefinition } from "@svadmin/core";
+  import { toSafeHref, toSafeText } from "../security";
+  import { isExplicitBooleanTrue, getStatusBadgeClass } from "../value-normalization";
+  import LiteMediaThumbnail from "./LiteMediaThumbnail.svelte";
 
   interface Props {
     field: FieldDefinition;
     value: unknown;
+    basePath?: string;
   }
 
-  let { field, value }: Props = $props();
+  let { field, value, basePath = "/lite" }: Props = $props();
 
   function formatValue(v: unknown, f: FieldDefinition): string {
-    if (v == null) return '—';
-    if (f.type === 'date') {
+    if (v == null) return "—";
+    if (f.type === "date") {
       try { return new Date(v as string).toLocaleString(); } catch { return String(v); }
     }
-    if (f.type === 'select' && f.options) {
+    if (f.type === "select" && f.options) {
       const opt = f.options.find(o => String(o.value) === String(v));
       return opt?.label ?? String(v);
     }
-    if (f.type === 'url') return String(v);
-    if (f.type === 'email') return String(v);
-    if (Array.isArray(v)) return v.join(', ');
-    if (typeof v === 'object') {
+    if (f.type === "relation" && typeof v === "object" && v !== null) {
+      return String((v as Record<string, unknown>)[f.optionLabel ?? "name"] ?? (v as Record<string, unknown>)[f.optionValue ?? "id"] ?? v);
+    }
+    if (f.type === "url") return String(v);
+    if (f.type === "email") return String(v);
+    if (Array.isArray(v)) return v.join(", ");
+    if (typeof v === "object") {
       try { return JSON.stringify(v, null, 2); } catch { return String(v); }
     }
     return String(v);
   }
 </script>
 
-{#if field.type === 'boolean'}
+{#if field.type === "boolean"}
   {@const checked = isExplicitBooleanTrue(value)}
-  <span class="lite-bool {checked ? 'lite-bool-true' : ''}"></span>
-  {checked ? '✓ Yes' : '✗ No'}
-{:else if field.type === 'url' && value}
+  <span class="lite-bool {checked ? "lite-bool-true" : ""}"></span>
+  {checked ? "✓ Yes" : "✗ No"}
+{:else if field.type === "url" && value}
   {@const href = toSafeHref(value)}
   {#if href}
     <a {href} target="_blank" rel="noopener noreferrer">{toSafeText(value)}</a>
   {:else}
     {toSafeText(value)}
   {/if}
-{:else if field.type === 'email' && value}
+{:else if field.type === "email" && value}
   {@const href = toSafeHref(`mailto:${toSafeText(value)}`)}
   {#if href}
     <a {href}>{toSafeText(value)}</a>
   {:else}
     {toSafeText(value)}
   {/if}
-{:else if field.type === 'image' && value}
+{:else if field.type === "image" && value}
   <LiteMediaThumbnail src={String(value)} alt={field.label} height={200} />
-{:else if field.type === 'tags' && Array.isArray(value)}
+{:else if field.type === "tags" && Array.isArray(value)}
   {#each value as tag, _i (_i)}
     <span class="lite-badge">{tag}</span>
   {/each}
-{:else if field.type === 'json' && value}
-  <pre style="margin:0;font-size:12px;background:#f8fafc;padding:12px;border-radius:6px;border:1px solid #e2e8f0;overflow-x:auto;">{typeof value === 'string' ? value : JSON.stringify(value, null, 2)}</pre>
+{:else if field.type === "json" && value}
+  <pre style="margin:0;font-size:12px;background:#f8fafc;padding:12px;border-radius:6px;border:1px solid #e2e8f0;overflow-x:auto;">{typeof value === "string" ? value : JSON.stringify(value, null, 2)}</pre>
 {:else if field.type === "select" && field.options}
   <span class={getStatusBadgeClass(value)}>{formatValue(value, field)}</span>
+{:else if field.type === "relation" && field.resource && value != null}
+  <a href={`${basePath}/${field.resource}/show/${value}`} class="lite-badge lite-badge-info">
+    {formatValue(value, field)} &rarr;
+  </a>
 {:else}
   {formatValue(value, field)}
 {/if}

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

@@ -1,11 +1,12 @@
 /**
    * LiteShowField — SSR-compatible field renderer for detail views.
    * Renders a single field value based on its type definition.
-  */
-import type { FieldDefinition } from '@svadmin/core';
+   */
+import type { FieldDefinition } from "@svadmin/core";
 interface Props {
     field: FieldDefinition;
     value: unknown;
+    basePath?: string;
 }
 declare const LiteShowField: import("svelte").Component<Props, {}, "">;
 type LiteShowField = ReturnType<typeof LiteShowField>;

package/dist/components/LiteTable.svelte

@@ -3,77 +3,105 @@
    * LiteTable — Pure HTML table with <a> sort links.
    * No JavaScript required — sorting and pagination are URL-driven.
    */
-  import type { ResourceDefinition, FieldDefinition } from '@svadmin/core';
-  import { t } from '@svadmin/core/i18n';
-  import { isExplicitBooleanTrue, getStatusBadgeClass } from '../value-normalization';
-  import { liteFragmentId } from '../fragment-id';
+  import type { ResourceDefinition, FieldDefinition } from "@svadmin/core";
+  import { t } from "@svadmin/core/i18n";
+  import { isExplicitBooleanTrue, getStatusBadgeClass } from "../value-normalization";
+  import { liteFragmentId } from "../fragment-id";
 
   interface Props {
     records: Record<string, unknown>[];
     resource: ResourceDefinition;
     currentSort?: string;
-    currentOrder?: 'asc' | 'desc';
+    currentOrder?: "asc" | "desc";
     currentSearch?: string;
     basePath?: string;
     /** Show edit/delete action buttons */
     canShow?: boolean;
     canEdit?: boolean;
     canDelete?: boolean;
+    enableBatch?: boolean;
   }
 
   let {
     records,
     resource,
     currentSort,
-    currentOrder = 'asc',
+    currentOrder = "asc",
     currentSearch,
-    basePath = '/lite',
+    basePath = "/lite",
     canShow,
     canEdit,
     canDelete,
+    enableBatch = false,
   }: Props = $props();
 
   const tableId = $props.id();
 
-  let pk = $derived(resource.primaryKey ?? 'id');
+  let pk = $derived(resource.primaryKey ?? "id");
   const showView = $derived(canShow ?? resource.canShow !== false);
   const showEdit = $derived(canEdit ?? resource.canEdit !== false);
   const showDelete = $derived(canDelete ?? resource.canDelete !== false);
+  const showBatch = $derived(enableBatch && showDelete);
   const listFields = $derived(
     resource.fields.filter(f => f.showInList !== false)
   );
 
   function sortUrl(field: FieldDefinition): string {
-    const newOrder = currentSort === field.key && currentOrder === 'asc' ? 'desc' : 'asc';
+    const newOrder = currentSort === field.key && currentOrder === "asc" ? "desc" : "asc";
     const params = new URLSearchParams({ sort: field.key, order: newOrder });
-    if (currentSearch) params.set('q', currentSearch);
-    return `?${params.toString()}`;
+    if (currentSearch) params.set("q", currentSearch);
+    return "?" + params.toString();
   }
 
   function sortIndicator(field: FieldDefinition): string {
-    if (currentSort !== field.key) return '⇅';
-    return currentOrder === 'asc' ? '↑' : '↓';
+    if (currentSort !== field.key) return "⇅";
+    return currentOrder === "asc" ? "↑" : "↓";
+  }
+
+  function toggleAll(e: Event) {
+    const target = e.target as HTMLInputElement | null;
+    if (typeof document !== "undefined" && target) {
+      const checkboxes = document.querySelectorAll("input[name=ids]");
+      checkboxes.forEach((cb) => {
+        (cb as HTMLInputElement).checked = target.checked;
+      });
+    }
   }
 
   function formatValue(value: unknown, field: FieldDefinition): string {
-    if (value == null) return '—';
-    if (field.type === 'boolean') return '';  // handled in template
-    if (field.type === 'date') {
+    if (value == null) return "—";
+    if (field.type === "boolean") return "";
+    if (field.type === "date") {
       try { return new Date(value as string).toLocaleDateString(); } catch { return String(value); }
     }
-    if (field.type === 'select' && field.options) {
+    if (field.type === "select" && field.options) {
       const opt = field.options.find(o => String(o.value) === String(value));
       return opt?.label ?? String(value);
     }
-    if (Array.isArray(value)) return value.join(', ');
+    if (field.type === "relation" && typeof value === "object" && value !== null) {
+      return String((value as Record<string, unknown>)[field.optionLabel ?? "name"] ?? (value as Record<string, unknown>)[field.optionValue ?? "id"] ?? value);
+    }
+    if (Array.isArray(value)) return value.join(", ");
     return String(value);
   }
-
 </script>
 
+{#if showBatch}
+  <form id={"batch-delete-" + tableId} method="POST" action="?/batchDelete" style="display:none;"></form>
+{/if}
+
 <table class="lite-table">
   <thead>
     <tr>
+      {#if showBatch}
+        <th style="width: 36px; text-align: center;">
+          <input
+            type="checkbox"
+            title="Select all"
+            onchange={toggleAll}
+          />
+        </th>
+      {/if}
       {#each listFields as field, _i (_i)}
         <th>
           {#if field.sortable !== false}
@@ -87,7 +115,7 @@
         </th>
       {/each}
       {#if showView || showEdit || showDelete}
-        <th style="text-align:right;">{t('common.actions') || 'Actions'}</th>
+        <th style="text-align:right;">{t("common.actions") || "Actions"}</th>
       {/if}
     </tr>
   </thead>
@@ -95,16 +123,25 @@
     {#each records as record, _i (_i)}
       {@const id = record[pk]}
       <tr>
+        {#if showBatch}
+          <td style="text-align: center;">
+            <input type="checkbox" name="ids" value={String(id)} form={"batch-delete-" + tableId} />
+          </td>
+        {/if}
         {#each listFields as field, _i (_i)}
           <td>
-            {#if field.type === 'boolean'}
-              <span class="lite-bool {isExplicitBooleanTrue(record[field.key]) ? 'lite-bool-true' : ''}"></span>
-            {:else if field.type === 'tags' && Array.isArray(record[field.key])}
+            {#if field.type === "boolean"}
+              <span class="lite-bool {isExplicitBooleanTrue(record[field.key]) ? "lite-bool-true" : ""}"></span>
+            {:else if field.type === "tags" && Array.isArray(record[field.key])}
               {#each (record[field.key] as string[]).slice(0, 3) as tag, _i (_i)}
                 <span class="lite-badge">{tag}</span>
               {/each}
-            {:else if field.type === 'select' && field.options}
+            {:else if field.type === "select" && field.options}
               <span class={getStatusBadgeClass(record[field.key])}>{formatValue(record[field.key], field)}</span>
+            {:else if field.type === "relation" && field.resource && record[field.key] != null}
+              <a href={basePath + "/" + field.resource + "/show/" + record[field.key]} class="lite-badge lite-badge-info">
+                {formatValue(record[field.key], field)}
+              </a>
             {:else}
               {formatValue(record[field.key], field)}
             {/if}
@@ -113,28 +150,28 @@
         {#if showView || showEdit || showDelete}
           <td class="actions">
             {#if showView}
-              <a href={`${basePath}/${resource.name}/show/${id}`} class="lite-btn lite-btn-sm">{t('common.show') || 'Show'}</a>
+              <a href={basePath + "/" + resource.name + "/show/" + id} class="lite-btn lite-btn-sm">{t("common.show") || "Show"}</a>
             {/if}
             {#if showEdit}
-              <a href={`${basePath}/${resource.name}/edit/${id}`} class="lite-btn lite-btn-sm">{t('common.edit') || 'Edit'}</a>
+              <a href={basePath + "/" + resource.name + "/edit/" + id} class="lite-btn lite-btn-sm">{t("common.edit") || "Edit"}</a>
             {/if}
             {#if showDelete}
-              {@const confirmationId = liteFragmentId('delete', tableId, resource.name, String(id))}
-              {@const confirmationTitleId = `${confirmationId}-title`}
+              {@const confirmationId = liteFragmentId("delete", tableId, resource.name, String(id))}
+              {@const confirmationTitleId = confirmationId + "-title"}
               <div class="lite-confirm">
-                <span id={`${confirmationId}-closed`} class="lite-confirm-cancel-target" aria-hidden="true"></span>
+                <span id={confirmationId + "-closed"} class="lite-confirm-cancel-target" aria-hidden="true"></span>
                 <a
-                  href={`#${confirmationId}`}
+                  href={"#" + confirmationId}
                   class="lite-btn lite-btn-sm lite-btn-danger"
                   aria-controls={confirmationId}
                   aria-haspopup="dialog"
-                >{t('common.delete') || 'Delete'}</a>
+                >{t("common.delete") || "Delete"}</a>
                 <div id={confirmationId} class="lite-confirm-panel lite-confirm-target" role="dialog" aria-labelledby={confirmationTitleId} tabindex="-1">
-                  <p id={confirmationTitleId} style="margin:0 0 8px;font-size:13px;">{t('common.areYouSure') || 'Are you sure?'}</p>
+                  <p id={confirmationTitleId} style="margin:0 0 8px;font-size:13px;">{t("common.areYouSure") || "Are you sure?"}</p>
                   <form method="POST" action="?/delete" class="lite-inline-actions">
                     <input type="hidden" name="id" value={String(id)} />
-                    <a href={`#${confirmationId}-closed`} class="lite-btn lite-btn-sm">{t('common.cancel') || 'Cancel'}</a>
-                    <button type="submit" class="lite-btn lite-btn-sm lite-btn-danger">{t('common.confirm') || 'Confirm'}</button>
+                    <a href={"#" + confirmationId + "-closed"} class="lite-btn lite-btn-sm">{t("common.cancel") || "Cancel"}</a>
+                    <button type="submit" class="lite-btn lite-btn-sm lite-btn-danger">{t("common.confirm") || "Confirm"}</button>
                   </form>
                 </div>
               </div>
@@ -144,10 +181,26 @@
       </tr>
     {:else}
       <tr>
-        <td colspan={listFields.length + (showView || showEdit || showDelete ? 1 : 0)} style="text-align:center;padding:40px;color:#9ca3af;">
-          {t('common.noData') || 'No records found.'}
+        <td colspan={listFields.length + (showView || showEdit || showDelete ? 1 : 0) + (showBatch ? 1 : 0)} style="text-align:center;padding:40px;color:#9ca3af;">
+          {t("common.noData") || "No records found."}
         </td>
       </tr>
     {/each}
   </tbody>
 </table>
+
+{#if showBatch && records.length > 0}
+  <div class="lite-batch-bar">
+    <span style="font-size: 13px; color: #64748b;">
+      Select items above to perform batch actions
+    </span>
+    <button
+      type="submit"
+      form={"batch-delete-" + tableId}
+      class="lite-btn lite-btn-sm lite-btn-danger"
+
+    >
+      {t("common.delete") || "Delete Selected"}
+    </button>
+  </div>
+{/if}

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

@@ -2,18 +2,19 @@
    * LiteTable — Pure HTML table with <a> sort links.
    * No JavaScript required — sorting and pagination are URL-driven.
    */
-import type { ResourceDefinition } from '@svadmin/core';
+import type { ResourceDefinition } from "@svadmin/core";
 interface Props {
     records: Record<string, unknown>[];
     resource: ResourceDefinition;
     currentSort?: string;
-    currentOrder?: 'asc' | 'desc';
+    currentOrder?: "asc" | "desc";
     currentSearch?: string;
     basePath?: string;
     /** Show edit/delete action buttons */
     canShow?: boolean;
     canEdit?: boolean;
     canDelete?: boolean;
+    enableBatch?: boolean;
 }
 declare const LiteTable: import("svelte").Component<Props, {}, "">;
 type LiteTable = ReturnType<typeof LiteTable>;