@svadmin/lite 0.25.7 → 0.27.0

package/README.md

@@ -262,7 +262,7 @@ it, so the rest of Lite has no extra runtime dependency. Install the peer with
 import LiteQRCode from '@svadmin/lite/components/LiteQRCode.svelte';
 ```
 
-`@svadmin/lite` provides **100% component parity** (179/179 components) corresponding to `@svadmin/ui`. See [PARITY.md](./PARITY.md) for the generated complete matrix and status details.
+`@svadmin/lite` provides **100% mapping coverage** (193/193 components) corresponding to `@svadmin/ui`: 134 exact 1:1 renderings, 54 semantic fallbacks, and 5 SPA-only components that intentionally have no server rendering. See [PARITY.md](./PARITY.md) for the generated complete matrix and status details.
 
 ### Core Pages & Layout
 
@@ -275,8 +275,11 @@ import LiteQRCode from '@svadmin/lite/components/LiteQRCode.svelte';
 | `LiteImage` / `LiteImagePreview` / `LiteVideoPlayer` / `LiteQRCode` | Media rendering with native controls, links and server-rendered QR |
 | `LiteCalendar` / `LiteCarousel` / `LiteTimeline` / `LiteStatistic` / `LiteCountdown` | Read-only dashboards and chronological displays |
 | `LiteCommentThread` / `LiteTour` / `LiteNotificationCenter` / `LiteDetailDrawer` / `LitePopconfirm` | Server-rendered collaboration and disclosure surfaces |
+| `LiteTaskCenter` / `LiteAuditLog` / `LiteAuditTimeline` | Server-rendered task queues, audit trails and field-level change diffs |
+| `LiteSafeDeleteConfirm` / `LiteConcurrentConflictModal` | Native POST confirmation and field-level conflict resolution forms |
+| `LiteMicroAppFrame` | Sandboxed iframe embedding with a direct fallback link |
 | `LiteSteps` / `LiteProgress` / `LiteSpin` / `LiteSkeleton` / `LiteResult` | Progress, loading and outcome surfaces |
-| `LiteTree` / `LiteItemList` / `LiteRowActions` / `LiteOtpInput` / `LiteTwoFactorStepper` | Hierarchical data, row actions and verification flows |
+| `LiteTree` / `LiteOrgChart` / `LiteItemList` / `LiteRowActions` / `LiteOtpInput` / `LiteTwoFactorStepper` | Hierarchical data, organization charts, row actions and verification flows |
 | `LiteAutoComplete` | Native `datalist` suggestions without async client popovers |
 | `LiteSidebar` / `LiteHeader` | Discrete layout primitives |
 | `LiteListPage` | Full-featured list view with search, table, bulk actions, and pagination |
@@ -302,7 +305,8 @@ import LiteQRCode from '@svadmin/lite/components/LiteQRCode.svelte';
 | Category | Components |
 |----------|------------|
 | **Text & Numeric** | `LiteTextField`, `LiteNumberField`, `LiteCurrencyField`, `LitePercentField`, `LitePhoneField`, `LiteEmailField`, `LiteUrlField`, `LiteRatingField`, `LiteCopyField` |
-| **Date & Choice** | `LiteDateField`, `LiteDateRangeField`, `LiteBooleanField`, `LiteSelectField`, `LiteMultiSelectField`, `LiteTreeSelect`, `LiteCascader`, `LiteTagField`, `LiteRelationField` |
+| **Date & Choice** | `LiteDateField`, `LiteDateRangeField`, `LiteBooleanField`, `LiteSelectField`, `LiteMultiSelectField`, `LiteTreeSelect`, `LiteVirtualTreeSelect`, `LiteCascader`, `LiteTagField`, `LiteRelationField` |
+| **Scheduling & Encoding** | `LiteCronExpressionBuilder` |
 | **Media & Rich & Array** | `LiteAvatarField`, `LiteImageField`, `LiteFileField`, `LiteCodeField`, `LiteMarkdownField`, `LiteRichTextField`, `LiteJsonField`, `LiteArrayField`, `LiteDynamicFormList`, `LiteTransfer`, `LiteImageCropper`, `LiteJsonSchemaForm`, `LiteMentionsInput`, `LiteSignaturePad` |
 
 ### Action Buttons (10 Buttons)
@@ -317,7 +321,8 @@ import LiteQRCode from '@svadmin/lite/components/LiteQRCode.svelte';
 
 | Component | Description |
 |-----------|-------------|
-| `LiteStatsCard`, `LiteMetricStrip`, `LiteInsightCard`, `LiteAnomalyBadge`, `LiteBadge` | Metric KPI cards/strips and semantic status badges |
+| `LiteStatsCard`, `LiteMetricStrip`, `LiteMetricGrid`, `LiteInsightCard`, `LiteAnomalyBadge`, `LiteBadge` | Metric KPI cards, metric collections and semantic status badges |
+| `LiteTrendIndicator` | Server-computed trend direction, rate and semantic color |
 | `LiteBarChart`, `LiteLineChart`, `LitePieChart` | Server-rendered SVG/HTML charts with fallback data tables |
 | `LiteAreaChart`, `LiteScatterChart`, `LiteRadarChart`, `LiteGaugeChart` | Bounded chart data tables where a client chart engine is unavailable |
 | `LiteFunnelChart`, `LiteHeatmapChart`, `LiteWaterfallChart`, `LiteRoseChart`, `LiteDonutChart` | Bounded chart data tables with the same fallback contract |
@@ -346,6 +351,7 @@ import LiteQRCode from '@svadmin/lite/components/LiteQRCode.svelte';
 | `LiteStepForm`, `LiteTableSummary`, `LiteVersionDiffViewer`, `LiteEditableTable`, `LiteDraggableRowTable` | Server-driven enterprise data interaction components |
 | `LiteMediaLibraryModal`, `LiteActivityFeed`, `LiteKanbanBoard`, `LitePivotTable` | Media, activity, workflow, and analysis views |
 | `LiteCanvasAnnotation`, `LiteSpreadsheetView`, `LiteDecisionTable` | SSR-compatible annotation, spreadsheet, and rules views |
+| `SliderCaptcha`, `OfflineGuard`, `useNetworkStatus` | SPA-only components: CAPTCHA interaction, live offline trapping and reactive network state require client JavaScript |
 | `DevTools` | SPA-only component with no Lite counterpart |
 
 ## Parity Tracking & Visualization
@@ -355,7 +361,7 @@ To monitor and maintain 100% component parity between `@svadmin/ui` and `@svadmi
 - **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 179 components and live metrics.
+- **Interactive Showroom**: Visit `/lite/parity` in the example app to interactively preview all 193 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/LiteAnnouncementBanner.svelte

@@ -0,0 +1,88 @@
+<script lang="ts">
+  type BannerTone = 'info' | 'warning' | 'error' | 'success';
+
+  interface Props {
+    message: string;
+    tone?: BannerTone;
+    countdownText?: string;
+    actionText?: string;
+    actionHref?: string;
+    class?: string;
+  }
+
+  let {
+    message,
+    tone = 'warning',
+    countdownText,
+    actionText,
+    actionHref,
+    class: className = '',
+  }: Props = $props();
+
+  const iconChar = $derived.by(() => {
+    switch (tone) {
+      case 'info':
+        return 'ℹ';
+      case 'success':
+        return '✓';
+      case 'error':
+        return '✕';
+      case 'warning':
+      default:
+        return '⚠';
+    }
+  });
+</script>
+
+<aside
+  class="lite-announcement-banner lite-banner-{tone} {className}"
+  data-svadmin-component="LiteAnnouncementBanner"
+  role="alert"
+>
+  <div class="lite-banner-body">
+    <span class="lite-banner-icon" aria-hidden="true">{iconChar}</span>
+    <span class="lite-banner-message">{message}</span>
+
+    {#if countdownText}
+      <span class="lite-banner-countdown">{countdownText}</span>
+    {/if}
+
+    {#if actionText}
+      {#if actionHref}
+        <a href={actionHref} class="lite-banner-action">{actionText}</a>
+      {:else}
+        <span class="lite-banner-action">{actionText}</span>
+      {/if}
+    {/if}
+  </div>
+</aside>
+
+<style>
+  .lite-announcement-banner {
+    padding: 8px 16px;
+    border-bottom: 1px solid transparent;
+    font-size: 13px;
+    box-sizing: border-box;
+  }
+  .lite-banner-info { background: #e8f3ff; color: #165dff; border-color: #bedaff; }
+  .lite-banner-warning { background: #fff7e8; color: #d46b08; border-color: #ffd591; }
+  .lite-banner-error { background: #fff1f0; color: #cf1322; border-color: #ffa39e; }
+  .lite-banner-success { background: #e8ffea; color: #00b42a; border-color: #aff0b5; }
+  .lite-banner-body { display: flex; align-items: center; flex-wrap: wrap; }
+  .lite-banner-body > * + * { margin-left: 8px; }
+  .lite-banner-icon { font-weight: 700; font-size: 14px; }
+  .lite-banner-message { font-weight: 500; flex: 1; min-width: 200px; }
+  .lite-banner-countdown {
+    font-family: monospace;
+    font-size: 11px;
+    padding: 2px 6px;
+    border-radius: 4px;
+    background: rgba(0, 0, 0, 0.05);
+    font-weight: 600;
+  }
+  .lite-banner-action {
+    text-decoration: underline;
+    font-weight: 600;
+    color: inherit;
+  }
+</style>

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

@@ -0,0 +1,12 @@
+type BannerTone = 'info' | 'warning' | 'error' | 'success';
+interface Props {
+    message: string;
+    tone?: BannerTone;
+    countdownText?: string;
+    actionText?: string;
+    actionHref?: string;
+    class?: string;
+}
+declare const LiteAnnouncementBanner: import("svelte").Component<Props, {}, "">;
+type LiteAnnouncementBanner = ReturnType<typeof LiteAnnouncementBanner>;
+export default LiteAnnouncementBanner;

package/dist/components/LiteAsyncExportModal.svelte

@@ -0,0 +1,113 @@
+<script lang="ts">
+  interface ExportCol {
+    key: string;
+    label: string;
+  }
+
+  interface Props {
+    open?: boolean;
+    action?: string;
+    resourceName?: string;
+    columns?: ExportCol[];
+    class?: string;
+  }
+
+  let {
+    open = true,
+    action = '/api/export',
+    resourceName = 'Records',
+    columns = [],
+    class: className = '',
+  }: Props = $props();
+</script>
+
+{#if open}
+  <section
+    class="lite-export-modal {className}"
+    data-svadmin-component="LiteAsyncExportModal"
+    aria-label="Export {resourceName}"
+  >
+    <header class="lite-export-header">
+      <h3 class="lite-export-title">Export {resourceName}</h3>
+    </header>
+
+    <form method="POST" action={action} class="lite-export-form">
+      <div class="lite-export-group">
+        <label for="lite-export-filename">File Name</label>
+        <input type="text" id="lite-export-filename" name="filename" value="{resourceName}-Export" />
+      </div>
+
+      <div class="lite-export-group">
+        <span class="lite-export-label">Format</span>
+        <div class="lite-export-radios">
+          <label><input type="radio" name="format" value="xlsx" checked /> Excel (.xlsx)</label>
+          <label><input type="radio" name="format" value="csv" /> CSV (.csv)</label>
+          <label><input type="radio" name="format" value="json" /> JSON (.json)</label>
+        </div>
+      </div>
+
+      {#if columns.length > 0}
+        <div class="lite-export-group">
+          <span class="lite-export-label">Columns</span>
+          <div class="lite-export-columns">
+            {#each columns as col (col.key)}
+              <label class="lite-export-col-item">
+                <input type="checkbox" name="columns" value={col.key} checked />
+                <span>{col.label}</span>
+              </label>
+            {/each}
+          </div>
+        </div>
+      {/if}
+
+      <div class="lite-export-actions">
+        <button type="submit" class="lite-export-submit">Start Export</button>
+      </div>
+    </form>
+  </section>
+{/if}
+
+<style>
+  .lite-export-modal {
+    border: 1px solid #e5e6eb;
+    border-radius: 8px;
+    padding: 16px;
+    background: #ffffff;
+    max-width: 480px;
+    box-sizing: border-box;
+  }
+  .lite-export-header { margin-bottom: 12px; }
+  .lite-export-title { margin: 0; font-size: 15px; color: #1d2129; font-weight: 600; }
+  .lite-export-group { margin-bottom: 12px; font-size: 13px; }
+  .lite-export-group label, .lite-export-label { display: block; margin-bottom: 4px; font-weight: 500; color: #4e5969; }
+  .lite-export-group input[type="text"] {
+    width: 100%;
+    box-sizing: border-box;
+    padding: 6px 10px;
+    border: 1px solid #e5e6eb;
+    border-radius: 4px;
+  }
+  .lite-export-radios { display: flex; margin-top: 4px; }
+  .lite-export-radios > * + * { margin-left: 12px; }
+  .lite-export-columns {
+    display: flex;
+    flex-wrap: wrap;
+    max-height: 140px;
+    overflow-y: auto;
+    padding: 6px;
+    background: #f7f8fa;
+    border-radius: 4px;
+  }
+  .lite-export-col-item { display: flex; align-items: center; width: 50%; font-size: 12px; }
+  .lite-export-col-item > * + * { margin-left: 6px; }
+  .lite-export-actions { margin-top: 16px; display: flex; justify-content: flex-end; }
+  .lite-export-submit {
+    padding: 7px 16px;
+    background: #165dff;
+    color: #ffffff;
+    border: 0;
+    border-radius: 4px;
+    cursor: pointer;
+    font-weight: 500;
+  }
+</style>

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

@@ -0,0 +1,14 @@
+interface ExportCol {
+    key: string;
+    label: string;
+}
+interface Props {
+    open?: boolean;
+    action?: string;
+    resourceName?: string;
+    columns?: ExportCol[];
+    class?: string;
+}
+declare const LiteAsyncExportModal: import("svelte").Component<Props, {}, "">;
+type LiteAsyncExportModal = ReturnType<typeof LiteAsyncExportModal>;
+export default LiteAsyncExportModal;

package/dist/components/LiteAuditLog.svelte

@@ -1,44 +1,98 @@
 <script lang="ts">
   /**
    * LiteAuditLog — SSR-compatible audit log viewer.
-   * Pure HTML table with pagination links. No client-side JS required.
+   * Accepts both the legacy AuthProvider AuditLog shape and the current
+   * core AuditEntry shape, including field-level diffs.
    */
-  import type { AuditLog } from '@svadmin/core';
+  import type { AuditLog, AuditEntry } from '@svadmin/core';
 
   interface Props {
-    logs: AuditLog[];
+    logs?: AuditLog[];
+    entries?: AuditEntry[];
     total?: number;
     page?: number;
     pageSize?: number;
     basePath?: string;
+    title?: string;
   }
 
   let {
-    logs,
+    logs = [],
+    entries = [],
     total = 0,
     page = 1,
     pageSize = 20,
     basePath = '?',
+    title = 'Audit Logs',
   }: Props = $props();
 
-  const totalPages = $derived(Math.ceil(total / pageSize) || 1);
+  interface DisplayEntry {
+    id: string;
+    timestamp: string | Date;
+    user: string;
+    action: string;
+    resource: string;
+    ip: string;
+    changes: Array<{ field: string; oldValue: unknown; newValue: unknown }>;
+  }
+
+  function fieldChanges(entry: AuditEntry): Array<{ field: string; oldValue: unknown; newValue: unknown }> {
+    const previous = entry.previousData ?? {};
+    const current = entry.data ?? {};
+    const keys = new Set([...Object.keys(previous), ...Object.keys(current)]);
+    return [...keys]
+      .filter((key) => key !== 'id' && key !== 'updatedAt' && key !== 'updated_at')
+      .filter((key) => JSON.stringify(previous[key]) !== JSON.stringify(current[key]))
+      .map((key) => ({ field: key, oldValue: previous[key], newValue: current[key] }));
+  }
+
+  function displayValue(value: unknown): string {
+    if (value === null || value === undefined) return '—';
+    if (typeof value === 'object') return JSON.stringify(value);
+    return String(value);
+  }
 
-  function formatDate(auditTimestamp: string | Date) {
-    return new Date(auditTimestamp).toLocaleString();
+  const rows = $derived<DisplayEntry[]>(
+    entries.length > 0
+      ? entries.map((entry, index) => ({
+          id: String(entry.id ?? index),
+          timestamp: entry.timestamp,
+          user: entry.userId ?? '—',
+          action: entry.action,
+          resource: `${entry.resource ?? '—'}${entry.recordId != null ? ` #${entry.recordId}` : ''}`,
+          ip: entry.ipAddress ?? String(entry.meta?.['ip'] ?? '—'),
+          changes: fieldChanges(entry),
+        }))
+      : logs.map((log) => ({
+          id: String(log.id),
+          timestamp: log.createdAt,
+          user: log.userName ?? String(log.userId ?? '—'),
+          action: log.action,
+          resource: log.resource ?? '—',
+          ip: log.ipAddress ?? '—',
+          changes: [],
+        })),
+  );
+
+  const effectiveTotal = $derived(total || rows.length);
+  const totalPages = $derived(Math.max(1, Math.ceil(effectiveTotal / Math.max(1, pageSize))));
+
+  function formatDate(value: string | Date) {
+    return new Date(value).toLocaleString();
   }
 
   function actionClass(action: string): string {
-    const normalizedAction = action.toLowerCase();
-    if (normalizedAction.includes('delete') || normalizedAction.includes('remove')) return 'lite-badge-danger';
-    if (normalizedAction.includes('create') || normalizedAction.includes('add')) return 'lite-badge-success';
-    if (normalizedAction.includes('update') || normalizedAction.includes('edit')) return 'lite-badge-warning';
+    const normalized = action.toLowerCase();
+    if (normalized.includes('delete') || normalized.includes('remove')) return 'lite-badge-danger';
+    if (normalized.includes('create') || normalized.includes('add')) return 'lite-badge-success';
+    if (normalized.includes('update') || normalized.includes('edit')) return 'lite-badge-warning';
     return 'lite-badge-default';
   }
 </script>
 
 <div class="lite-audit-log">
-  <h2 style="margin-bottom:16px;">Audit Logs</h2>
-  
+  <h2>{title}</h2>
+
   <table class="lite-table">
     <thead>
       <tr>
@@ -46,50 +100,62 @@
         <th>User</th>
         <th>Action</th>
         <th>Resource</th>
+        <th>Changes</th>
         <th style="width:120px;">IP Address</th>
       </tr>
     </thead>
     <tbody>
-      {#each logs as log, _i (_i)}
-        <tr>
-          <td style="font-family:monospace;font-size:12px;color:#4E5969;">{formatDate(log.createdAt)}</td>
-          <td>{log.userName ?? '—'}</td>
-          <td><span class="lite-badge {actionClass(log.action)}">{log.action}</span></td>
-          <td style="color:#4E5969;">{log.resource ?? '—'}</td>
-          <td style="font-family:monospace;font-size:12px;color:#4E5969;">{log.ipAddress ?? '—'}</td>
+      {#each rows as row (row.id)}
+        <tr data-audit-entry={row.id}>
+          <td style="font-family:monospace;font-size:12px;color:#4E5969;">{formatDate(row.timestamp)}</td>
+          <td>{row.user}</td>
+          <td><span class="lite-badge {actionClass(row.action)}">{row.action}</span></td>
+          <td style="color:#4E5969;">{row.resource}</td>
+          <td>
+            {#if row.changes.length > 0}
+              <ul class="lite-audit-diff">
+                {#each row.changes as change (change.field)}
+                  <li>
+                    <strong>{change.field}</strong>
+                    <span class="lite-audit-old">{displayValue(change.oldValue)}</span>
+                    <span aria-hidden="true">→</span>
+                    <span class="lite-audit-new">{displayValue(change.newValue)}</span>
+                  </li>
+                {/each}
+              </ul>
+            {:else}
+              <span style="color:#86909C;">—</span>
+            {/if}
+          </td>
+          <td style="font-family:monospace;font-size:12px;color:#4E5969;">{row.ip}</td>
         </tr>
       {:else}
         <tr>
-          <td colspan="5" style="text-align:center;padding:24px;color:#86909C;">No audit logs found.</td>
+          <td colspan="6" style="text-align:center;padding:24px;color:#86909C;">No audit logs found.</td>
         </tr>
       {/each}
     </tbody>
   </table>
 
-  <!-- Pagination -->
   {#if totalPages > 1}
     <div class="lite-pagination" style="margin-top:12px;">
       {#if page > 1}
-        <a href={`${basePath}page={page - 1}`} class="lite-btn lite-btn-sm">&laquo; Prev</a>
+        <a href={`${basePath}page=${page - 1}`} class="lite-btn lite-btn-sm">&laquo; Prev</a>
       {/if}
-      <span style="padding:0 12px;font-size:14px;color:#4E5969;">Page {page} / {totalPages} ({total} total)</span>
+      <span style="padding:0 12px;font-size:14px;color:#4E5969;">Page {page} / {totalPages} ({effectiveTotal} total)</span>
       {#if page < totalPages}
-        <a href={`${basePath}page={page + 1}`} class="lite-btn lite-btn-sm">Next &raquo;</a>
+        <a href={`${basePath}page=${page + 1}`} class="lite-btn lite-btn-sm">Next &raquo;</a>
       {/if}
     </div>
   {/if}
 </div>
 
 <style>
-  .lite-badge {
-    display: inline-block;
-    padding: 2px 8px;
-    border-radius: 4px;
-    font-size: 12px;
-    font-weight: 600;
-  }
-  .lite-badge-danger { background: #FFECE8; color: #dc2626; border: 1px solid #FDCDC5; }
-  .lite-badge-success { background: #f0fdf4; color: #009A29; border: 1px solid #bbf7d0; }
-  .lite-badge-warning { background: #FFF7E8; color: #D25F00; border: 1px solid #FFE4BA; }
-  .lite-badge-default { background: #F2F3F5; color: #4E5969; border: 1px solid #E5E6EB; }
+  .lite-audit-log h2 { margin: 0 0 16px; color: #1d2129; font-size: 16px; }
+  .lite-audit-diff { margin: 0; padding: 0; list-style: none; font-size: 11px; }
+  .lite-audit-diff li { display: flex; flex-wrap: wrap; align-items: baseline; }
+  .lite-audit-diff li + li { margin-top: 3px; }
+  .lite-audit-diff strong { margin-right: 4px; color: #1d2129; }
+  .lite-audit-old { margin-right: 4px; color: #f53f3f; text-decoration: line-through; }
+  .lite-audit-new { color: #00b42a; }
 </style>

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

@@ -1,14 +1,17 @@
 /**
    * LiteAuditLog — SSR-compatible audit log viewer.
-   * Pure HTML table with pagination links. No client-side JS required.
+   * Accepts both the legacy AuthProvider AuditLog shape and the current
+   * core AuditEntry shape, including field-level diffs.
    */
-import type { AuditLog } from '@svadmin/core';
+import type { AuditLog, AuditEntry } from '@svadmin/core';
 interface Props {
-    logs: AuditLog[];
+    logs?: AuditLog[];
+    entries?: AuditEntry[];
     total?: number;
     page?: number;
     pageSize?: number;
     basePath?: string;
+    title?: string;
 }
 declare const LiteAuditLog: import("svelte").Component<Props, {}, "">;
 type LiteAuditLog = ReturnType<typeof LiteAuditLog>;

package/dist/components/LiteConcurrentConflictModal.svelte

@@ -0,0 +1,110 @@
+<script lang="ts">
+  export interface LiteConflictField {
+    field: string;
+    label?: string;
+    localValue?: unknown;
+    remoteValue?: unknown;
+  }
+
+  interface Props {
+    open?: boolean;
+    title?: string;
+    description?: string;
+    fields?: LiteConflictField[];
+    formAction?: string;
+    namePrefix?: string;
+    modifiedBy?: string;
+    cancelHref?: string;
+    submitLabel?: string;
+    class?: string;
+  }
+
+  let {
+    open = true,
+    title = 'Resolve edit conflict',
+    description = 'The record changed while you were editing. Choose the value to keep for each field.',
+    fields = [],
+    formAction = '',
+    namePrefix = 'resolve',
+    modifiedBy,
+    cancelHref,
+    submitLabel = 'Save resolution',
+    class: className = '',
+  }: Props = $props();
+
+  function formatValue(value: unknown): string {
+    if (value === null || value === undefined) return '—';
+    if (typeof value === 'object') return JSON.stringify(value);
+    return String(value);
+  }
+</script>
+
+{#if open}
+  <div
+    class="lite-conflict-modal lite-card {className}"
+    role="dialog"
+    aria-modal="true"
+    tabindex="-1"
+    aria-labelledby="lite-conflict-title"
+  >
+    <header>
+      <h2 id="lite-conflict-title">{title}</h2>
+      {#if modifiedBy}<p class="lite-conflict-meta">Last modified by <strong>{modifiedBy}</strong></p>{/if}
+      <p>{description}</p>
+    </header>
+
+    {#if fields.length === 0}
+      <p class="lite-conflict-empty" role="status">No conflicting fields were provided.</p>
+    {:else}
+      <form method="POST" action={formAction}>
+        <table class="lite-table">
+          <thead>
+            <tr>
+              <th>Field</th>
+              <th>My value</th>
+              <th>Server value</th>
+              <th>Keep</th>
+            </tr>
+          </thead>
+          <tbody>
+            {#each fields as field (field.field)}
+              <tr data-conflict-field={field.field}>
+                <th scope="row">{field.label ?? field.field}</th>
+                <td><code>{formatValue(field.localValue)}</code></td>
+                <td><code>{formatValue(field.remoteValue)}</code></td>
+                <td>
+                  <label>
+                    <input type="radio" name={`${namePrefix}[${field.field}]`} value="local" checked />
+                    Mine
+                  </label>
+                  <label>
+                    <input type="radio" name={`${namePrefix}[${field.field}]`} value="remote" />
+                    Theirs
+                  </label>
+                </td>
+              </tr>
+            {/each}
+          </tbody>
+        </table>
+
+        <div class="lite-conflict-actions">
+          <button type="submit">{submitLabel}</button>
+          {#if cancelHref}<a href={cancelHref}>Discard and go back</a>{/if}
+        </div>
+      </form>
+    {/if}
+  </div>
+{/if}
+
+<style>
+  .lite-conflict-modal { padding: 16px; }
+  .lite-conflict-modal header h2 { margin: 0; color: #1d2129; font-size: 16px; }
+  .lite-conflict-modal header p { margin: 6px 0 12px; color: #4e5969; font-size: 12px; line-height: 1.5; }
+  .lite-conflict-meta { margin-bottom: 0 !important; }
+  .lite-conflict-empty { color: #86909c; }
+  .lite-conflict-modal code { display: inline-block; max-width: 220px; overflow-wrap: anywhere; padding: 2px 5px; border-radius: 3px; background: #f2f3f5; font-size: 11px; }
+  .lite-conflict-actions { display: flex; align-items: center; margin-top: 12px; }
+  .lite-conflict-actions > * + * { margin-left: 12px; }
+  .lite-conflict-actions button { padding: 7px 12px; border: 0; border-radius: 4px; background: #165dff; color: #fff; font-size: 12px; cursor: pointer; }
+  .lite-conflict-actions a { color: #4e5969; font-size: 12px; }
+</style>

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

@@ -0,0 +1,21 @@
+export interface LiteConflictField {
+    field: string;
+    label?: string;
+    localValue?: unknown;
+    remoteValue?: unknown;
+}
+interface Props {
+    open?: boolean;
+    title?: string;
+    description?: string;
+    fields?: LiteConflictField[];
+    formAction?: string;
+    namePrefix?: string;
+    modifiedBy?: string;
+    cancelHref?: string;
+    submitLabel?: string;
+    class?: string;
+}
+declare const LiteConcurrentConflictModal: import("svelte").Component<Props, {}, "">;
+type LiteConcurrentConflictModal = ReturnType<typeof LiteConcurrentConflictModal>;
+export default LiteConcurrentConflictModal;