@svadmin/lite 0.25.7 → 0.26.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/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;

package/dist/components/LiteCronExpressionBuilder.svelte

@@ -0,0 +1,78 @@
+<script lang="ts">
+  interface CronPreset {
+    label: string;
+    value: string;
+  }
+
+  interface Props {
+    value?: string;
+    name?: string;
+    label?: string;
+    description?: string;
+    presets?: CronPreset[];
+    formAction?: string;
+    disabled?: boolean;
+    class?: string;
+  }
+
+  let {
+    value = '',
+    name = 'cron',
+    label = 'Cron expression',
+    description = 'Use a preset value or edit the expression directly; the visual builder is a client enhancement.',
+    presets = [
+      { label: 'Every minute', value: '* * * * *' },
+      { label: 'Every hour', value: '0 * * * *' },
+      { label: 'Every day at midnight', value: '0 0 * * *' },
+      { label: 'Every Monday at 09:00', value: '0 9 * * 1' },
+    ],
+    formAction,
+    disabled = false,
+    class: className = '',
+  }: Props = $props();
+
+  let expression = $state(value);
+</script>
+
+<section class="lite-cron-builder lite-card {className}" aria-label={label}>
+  <header>
+    <h2>{label}</h2>
+    {#if description}<p>{description}</p>{/if}
+  </header>
+
+  <div class="lite-cron-preset">
+    <span class="lite-cron-preset-label">Presets</span>
+    <ul>
+      {#each presets as preset (preset.value)}
+        <li><strong>{preset.label}</strong> <code>{preset.value}</code></li>
+      {/each}
+    </ul>
+  </div>
+
+  {#if formAction}
+    <form method="POST" action={formAction}>
+      <label for="lite-cron-expression">Expression</label>
+      <input id="lite-cron-expression" {name} bind:value={expression} {disabled} autocomplete="off" spellcheck="false" />
+      <button type="submit" {disabled}>Save schedule</button>
+    </form>
+  {:else}
+    <label for="lite-cron-expression">Expression</label>
+    <input id="lite-cron-expression" {name} bind:value={expression} {disabled} autocomplete="off" spellcheck="false" />
+  {/if}
+
+  <code class="lite-cron-preview">{expression || '—'}</code>
+</section>
+
+<style>
+  .lite-cron-builder { padding: 16px; }
+  .lite-cron-builder header h2 { margin: 0; color: #1d2129; font-size: 16px; }
+  .lite-cron-builder header p { margin: 4px 0 12px; color: #4e5969; font-size: 12px; line-height: 1.5; }
+  .lite-cron-builder label { display: block; margin: 10px 0 4px; color: #4e5969; font-size: 12px; font-weight: 600; }
+  .lite-cron-preset-label { display: block; margin: 10px 0 4px; color: #4e5969; font-size: 12px; font-weight: 600; }
+  .lite-cron-preset ul { margin: 0; padding: 0; list-style: none; }
+  .lite-cron-preset li { padding: 5px 0; color: #4e5969; font-size: 12px; }
+  .lite-cron-preset li strong { margin-right: 6px; color: #1d2129; }
+  .lite-cron-builder input { width: 100%; box-sizing: border-box; padding: 7px 9px; border: 1px solid #e5e6eb; border-radius: 4px; background: #fff; color: #1d2129; font: inherit; font-size: 13px; }
+  .lite-cron-builder button { margin-top: 10px; padding: 7px 12px; border: 0; border-radius: 4px; background: #165dff; color: #fff; font-size: 12px; cursor: pointer; }
+  .lite-cron-preview { display: block; margin-top: 10px; padding: 8px 10px; border-radius: 4px; background: #f7f8fa; color: #1d2129; font-size: 12px; }
+</style>

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

@@ -0,0 +1,17 @@
+interface CronPreset {
+    label: string;
+    value: string;
+}
+interface Props {
+    value?: string;
+    name?: string;
+    label?: string;
+    description?: string;
+    presets?: CronPreset[];
+    formAction?: string;
+    disabled?: boolean;
+    class?: string;
+}
+declare const LiteCronExpressionBuilder: import("svelte").Component<Props, {}, "">;
+type LiteCronExpressionBuilder = ReturnType<typeof LiteCronExpressionBuilder>;
+export default LiteCronExpressionBuilder;

package/dist/components/LiteMetricGrid.svelte

@@ -0,0 +1,143 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import LiteStatsCard from './LiteStatsCard.svelte';
+
+  type MetricColumns = 1 | 2 | 3 | 4 | 5 | 6 | 'auto';
+  type MetricGap = 'sm' | 'md' | 'lg';
+
+  interface LiteMetricGridItem {
+    id?: string;
+    label: string;
+    value: string | number;
+    description?: string;
+    trend?: 'up' | 'down' | 'neutral';
+    trendValue?: string;
+    icon?: string;
+    href?: string;
+  }
+
+  interface Props {
+    items?: LiteMetricGridItem[];
+    cols?: MetricColumns;
+    gap?: MetricGap;
+    title?: string;
+    description?: string;
+    loading?: boolean;
+    skeletonCount?: number;
+    empty?: boolean;
+    emptyMessage?: string;
+    class?: string;
+    actions?: Snippet;
+    children?: Snippet;
+    emptyContent?: Snippet;
+  }
+
+  let {
+    items = [],
+    cols = 'auto',
+    gap = 'md',
+    title,
+    description,
+    loading = false,
+    skeletonCount = 4,
+    empty = false,
+    emptyMessage = 'No metrics available',
+    class: className = '',
+    actions,
+    children,
+    emptyContent,
+  }: Props = $props();
+
+  const skeletonItems = $derived(Array.from({ length: Math.max(1, skeletonCount) }, (_, index) => index));
+</script>
+
+<section
+  class="lite-metric-grid lite-metric-grid-{cols} lite-metric-grid-gap-{gap} {className}"
+  aria-label={title ?? 'Dashboard metrics'}
+  data-columns={cols}
+>
+  {#if title || description || actions}
+    <header class="lite-metric-grid-header">
+      <div>
+        {#if title}<h2>{title}</h2>{/if}
+        {#if description}<p>{description}</p>{/if}
+      </div>
+      {#if actions}<div class="lite-metric-grid-actions">{@render actions()}</div>{/if}
+    </header>
+  {/if}
+
+  {#if loading}
+    <div class="lite-metric-grid-items">
+      {#each skeletonItems as item (item)}
+        <div class="lite-metric-grid-cell">
+          <div class="lite-metric-grid-skeleton" aria-hidden="true">
+            <span></span><span></span><span></span>
+          </div>
+        </div>
+      {/each}
+    </div>
+  {:else if empty}
+    <div class="lite-metric-grid-empty" role="status">
+      {#if emptyContent}{@render emptyContent()}{:else}<p>{emptyMessage}</p>{/if}
+    </div>
+  {:else if children}
+    {@render children()}
+  {:else if items.length === 0}
+    <div class="lite-metric-grid-empty" role="status"><p>{emptyMessage}</p></div>
+  {:else}
+    <div class="lite-metric-grid-items">
+      {#each items as item (item.id ?? item.label)}
+        <div class="lite-metric-grid-cell">
+          <LiteStatsCard
+            label={item.label}
+            value={item.value}
+            description={item.description}
+            trend={item.trend}
+            trendValue={item.trendValue}
+            icon={item.icon}
+            href={item.href}
+          />
+        </div>
+      {/each}
+    </div>
+  {/if}
+</section>
+
+<style>
+  .lite-metric-grid { display: block; }
+  .lite-metric-grid-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 12px; }
+  .lite-metric-grid-header > div + div { margin-left: 12px; }
+  .lite-metric-grid-header h2 { margin: 0; color: #1d2129; font-size: 16px; }
+  .lite-metric-grid-header p { margin: 4px 0 0; color: #4e5969; font-size: 12px; }
+  .lite-metric-grid-actions { display: flex; }
+  .lite-metric-grid-actions > * + * { margin-left: 8px; }
+  .lite-metric-grid-items { display: flex; flex-wrap: wrap; margin: 0 -8px; }
+  .lite-metric-grid-cell { box-sizing: border-box; width: 100%; padding: 0 8px; margin-bottom: 16px; }
+  .lite-metric-grid-gap-sm .lite-metric-grid-items { margin: 0 -6px; }
+  .lite-metric-grid-gap-sm .lite-metric-grid-cell { padding: 0 6px; margin-bottom: 12px; }
+  .lite-metric-grid-gap-lg .lite-metric-grid-items { margin: 0 -12px; }
+  .lite-metric-grid-gap-lg .lite-metric-grid-cell { padding: 0 12px; margin-bottom: 24px; }
+  .lite-metric-grid-auto .lite-metric-grid-cell { width: 25%; }
+  .lite-metric-grid-1 .lite-metric-grid-cell { width: 100%; }
+  .lite-metric-grid-2 .lite-metric-grid-cell { width: 50%; }
+  .lite-metric-grid-3 .lite-metric-grid-cell { width: 33.3333%; }
+  .lite-metric-grid-4 .lite-metric-grid-cell { width: 25%; }
+  .lite-metric-grid-5 .lite-metric-grid-cell { width: 20%; }
+  .lite-metric-grid-6 .lite-metric-grid-cell { width: 16.6666%; }
+  .lite-metric-grid-skeleton { min-height: 96px; border: 1px solid #e5e6eb; border-radius: 6px; padding: 16px; background: #f7f8fa; }
+  .lite-metric-grid-skeleton span { display: block; height: 10px; margin-bottom: 10px; border-radius: 3px; background: #e5e6eb; }
+  .lite-metric-grid-skeleton span:first-child { width: 45%; }
+  .lite-metric-grid-skeleton span:nth-child(2) { width: 70%; height: 20px; }
+  .lite-metric-grid-skeleton span:last-child { width: 35%; margin-bottom: 0; }
+  .lite-metric-grid-empty { border: 1px dashed #e5e6eb; border-radius: 6px; padding: 24px; color: #86909c; text-align: center; background: #f7f8fa; }
+  @media (max-width: 900px) {
+    .lite-metric-grid-auto .lite-metric-grid-cell,
+    .lite-metric-grid-3 .lite-metric-grid-cell,
+    .lite-metric-grid-4 .lite-metric-grid-cell,
+    .lite-metric-grid-5 .lite-metric-grid-cell,
+    .lite-metric-grid-6 .lite-metric-grid-cell { width: 50%; }
+  }
+  @media (max-width: 560px) {
+    .lite-metric-grid-cell { width: 100% !important; }
+  }
+</style>