@svadmin/lite 0.8.2 → 0.9.0

package/README.md

@@ -263,7 +263,7 @@ IE11 before the decision is made.
 | `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 |
+| `LiteTable` | HTML table with sort links, selectable rows, delete confirmation, and optional sticky edge/action columns |
 | `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 |
@@ -272,14 +272,13 @@ IE11 before the decision is made.
 | `LiteCanAccess` / `LiteErrorBoundary` | Server-side access gate and constrained-environment error boundary |
 | `LiteSplitPaneLayout` / `LiteMultiTabKeepAlive` | Dense two-pane layouts and multi-workspace navigation |
 
-### Field Components (33 Fields)
+### Field Components (32 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`, `LiteImageCropper`, `LiteJsonSchemaForm`, `LiteMentionsInput`, `LiteSignaturePad` |
-| **SPA-only** | `VoiceInput` (Web Speech API; no SSR counterpart) |
 
 ### Action Buttons (10 Buttons)
 
@@ -293,7 +292,7 @@ IE11 before the decision is made.
 
 | Component | Description |
 |-----------|-------------|
-| `LiteStatsCard`, `LiteInsightCard`, `LiteAnomalyBadge` | Metric KPI cards and status badges |
+| `LiteStatsCard`, `LiteMetricStrip`, `LiteInsightCard`, `LiteAnomalyBadge`, `LiteBadge` | Metric KPI cards/strips and semantic status badges |
 | `LiteBarChart`, `LiteLineChart`, `LitePieChart` | Server-rendered SVG/HTML charts with fallback data tables |
 | `LitePresenceAvatarGroup`, `LiteGanttChart`, `LiteOfflineSyncBanner` | Presence, schedule, and offline mutation status rendered without client hydration |
 
@@ -320,7 +319,7 @@ IE11 before the decision is made.
 | `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 |
-| `DevTools`, `CopilotPanel` | SPA-only components with no Lite counterpart |
+| `DevTools` | SPA-only component with no Lite counterpart |
 
 ## Parity Tracking & Visualization
 

package/dist/components/LiteBadge.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+  import type { HTMLAnchorAttributes } from 'svelte/elements';
+
+  export type LiteBadgeVariant =
+    | 'default'
+    | 'secondary'
+    | 'destructive'
+    | 'subtle'
+    | 'subtle-success'
+    | 'subtle-warning'
+    | 'subtle-destructive'
+    | 'subtle-pill'
+    | 'outline'
+    | 'ghost'
+    | 'link'
+    | 'info'
+    | 'success'
+    | 'warning';
+
+  interface Props {
+    variant?: LiteBadgeVariant;
+    href?: string;
+    class?: string;
+    children?: import('svelte').Snippet;
+  }
+
+  let {
+    variant = 'default',
+    href,
+    class: className = '',
+    children,
+    ...restProps
+  }: Props & HTMLAnchorAttributes = $props();
+</script>
+
+<svelte:element
+  this={href ? 'a' : 'span'}
+  {href}
+  class={'lite-badge lite-badge-' + variant + (className ? ' ' + className : '')}
+  {...restProps}
+>
+  {@render children?.()}
+</svelte:element>

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

@@ -0,0 +1,12 @@
+import type { HTMLAnchorAttributes } from 'svelte/elements';
+export type LiteBadgeVariant = 'default' | 'secondary' | 'destructive' | 'subtle' | 'subtle-success' | 'subtle-warning' | 'subtle-destructive' | 'subtle-pill' | 'outline' | 'ghost' | 'link' | 'info' | 'success' | 'warning';
+interface Props {
+    variant?: LiteBadgeVariant;
+    href?: string;
+    class?: string;
+    children?: import('svelte').Snippet;
+}
+type $$ComponentProps = Props & HTMLAnchorAttributes;
+declare const LiteBadge: import("svelte").Component<$$ComponentProps, {}, "">;
+type LiteBadge = ReturnType<typeof LiteBadge>;
+export default LiteBadge;

package/dist/components/LiteChatDialog.svelte

@@ -32,6 +32,13 @@
     return new Date(ts).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
   }
 
+  function messageText(message: ChatMessage): string {
+    return message.parts
+      .filter((part): part is Extract<ChatMessage['parts'][number], { type: 'text' }> => part.type === 'text')
+      .map((part) => part.text)
+      .join('');
+  }
+
   // Auto-scroll anchor logic: pure HTML way to scroll to bottom after page load
   // User should include "#latest-msg" in the form action if possible
 </script>
@@ -66,10 +73,10 @@
               ? 'background:#4f46e5;color:#fff;border-bottom-right-radius:2px;'
               : 'background:#e2e8f0;color:#0f172a;border-bottom-left-radius:2px;'}"
           >
-            <div style="white-space:pre-wrap;word-break:break-word;">{msg.content}</div>
+            <div style="white-space:pre-wrap;word-break:break-word;">{messageText(msg)}</div>
           </div>
           <div style="font-size:11px;color:#94a3b8;margin-top:4px;">
-            {msg.role === 'user' ? 'You' : 'Assistant'} • {formatDate(msg.timestamp)}
+            {msg.role === 'user' ? 'You' : 'Assistant'} · {formatDate(msg.createdAt)}
           </div>
         </div>
       {/if}

package/dist/components/LiteMetricStrip.svelte

@@ -0,0 +1,96 @@
+<script lang="ts">
+  import type { Component, Snippet } from 'svelte';
+  import LiteBadge from './LiteBadge.svelte';
+
+  export type LiteMetricTone = 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'info';
+  export type LiteMetricBadgeTone = 'default' | 'success' | 'warning' | 'danger' | 'info';
+
+  export interface LiteMetricStripItem {
+    id?: string;
+    label: string;
+    value: string | number;
+    tone?: LiteMetricTone;
+    badge?: { text: string; tone?: LiteMetricBadgeTone };
+    icon?: Component<{ class?: string }>;
+    href?: string;
+    trend?: { value: number; label?: string };
+    loading?: boolean;
+    class?: string;
+  }
+
+  interface Props {
+    items?: LiteMetricStripItem[];
+    columns?: 2 | 3 | 4 | 5 | 6 | 'auto';
+    ariaLabel?: string;
+    class?: string;
+    children?: Snippet;
+  }
+
+  let {
+    items = [],
+    columns = 'auto',
+    ariaLabel = 'Metrics overview',
+    class: className = '',
+    children,
+  }: Props = $props();
+
+  const toneClass: Record<LiteMetricTone, string> = {
+    default: '',
+    primary: 'lite-metric-value-primary',
+    success: 'lite-metric-value-success',
+    warning: 'lite-metric-value-warning',
+    danger: 'lite-metric-value-danger',
+    info: 'lite-metric-value-info',
+  };
+
+  const badgeVariant: Record<LiteMetricBadgeTone, 'default' | 'subtle-success' | 'subtle-warning' | 'subtle-destructive' | 'info'> = {
+    default: 'default',
+    success: 'subtle-success',
+    warning: 'subtle-warning',
+    danger: 'subtle-destructive',
+    info: 'info',
+  };
+</script>
+
+<div
+  role="region"
+  aria-label={ariaLabel}
+  class={'lite-metric-strip lite-metric-strip-' + columns + (className ? ' ' + className : '')}
+>
+  {#if children}
+    {@render children()}
+  {:else}
+  {#each items as item, index (item.id || index)}
+    {@const interactive = Boolean(item.href)}
+    <svelte:element
+      this={interactive ? 'a' : 'div'}
+      href={item.href}
+      class={'lite-metric-item' + (interactive ? ' lite-metric-item-link' : '') + (item.class ? ' ' + item.class : '')}
+    >
+      <div class="lite-metric-label">
+        <span>{item.label}</span>
+        {#if item.icon}<span class="lite-metric-icon" aria-hidden="true"><item.icon class="lite-metric-icon-svg" /></span>{/if}
+      </div>
+      {#if item.loading}
+        <span class="lite-metric-loading" aria-label="Loading">&nbsp;</span>
+      {:else}
+        <div class="lite-metric-value-row">
+          <strong class={'lite-metric-value ' + (toneClass[item.tone || 'default'] || '')}>{item.value}</strong>
+          {#if item.badge}
+            <LiteBadge variant={badgeVariant[item.badge.tone || 'default']}>{item.badge.text}</LiteBadge>
+          {:else if item.trend}
+            <span
+              class={'lite-metric-trend ' + (item.trend.value >= 0 ? 'lite-metric-trend-up' : 'lite-metric-trend-down')}
+              aria-label={(item.trend.value >= 0 ? 'Up ' : 'Down ') + Math.abs(item.trend.value) + ' percent'}
+            >
+              <span aria-hidden="true">{item.trend.value >= 0 ? '↑' : '↓'}</span>
+              {Math.abs(item.trend.value)}%
+              {#if item.trend.label}<span class="lite-metric-trend-label">{item.trend.label}</span>{/if}
+            </span>
+          {/if}
+        </div>
+      {/if}
+    </svelte:element>
+  {/each}
+  {/if}
+</div>

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

@@ -0,0 +1,33 @@
+import type { Component, Snippet } from 'svelte';
+export type LiteMetricTone = 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'info';
+export type LiteMetricBadgeTone = 'default' | 'success' | 'warning' | 'danger' | 'info';
+export interface LiteMetricStripItem {
+    id?: string;
+    label: string;
+    value: string | number;
+    tone?: LiteMetricTone;
+    badge?: {
+        text: string;
+        tone?: LiteMetricBadgeTone;
+    };
+    icon?: Component<{
+        class?: string;
+    }>;
+    href?: string;
+    trend?: {
+        value: number;
+        label?: string;
+    };
+    loading?: boolean;
+    class?: string;
+}
+interface Props {
+    items?: LiteMetricStripItem[];
+    columns?: 2 | 3 | 4 | 5 | 6 | 'auto';
+    ariaLabel?: string;
+    class?: string;
+    children?: Snippet;
+}
+declare const LiteMetricStrip: Component<Props, {}, "">;
+type LiteMetricStrip = ReturnType<typeof LiteMetricStrip>;
+export default LiteMetricStrip;

package/dist/components/LiteTable.svelte

@@ -20,6 +20,10 @@
     canEdit?: boolean;
     canDelete?: boolean;
     enableBatch?: boolean;
+    /** One field key per edge; left is ignored while batch selection is active. */
+    stickyColumns?: { left?: string; right?: string };
+    /** Pin actions on the right; this takes precedence over stickyColumns.right. */
+    stickyActions?: boolean;
   }
 
   let {
@@ -33,6 +37,8 @@
     canEdit,
     canDelete,
     enableBatch = false,
+    stickyColumns = {},
+    stickyActions = false,
   }: Props = $props();
 
   const tableId = $props.id();
@@ -45,6 +51,8 @@
   const listFields = $derived(
     resource.fields.filter(f => f.showInList !== false)
   );
+  const stickyLeft = $derived(showBatch ? undefined : stickyColumns.left);
+  const stickyRight = $derived(stickyActions ? undefined : stickyColumns.right);
 
   function sortUrl(field: FieldDefinition): string {
     const newOrder = currentSort === field.key && currentOrder === "asc" ? "desc" : "asc";
@@ -103,7 +111,7 @@
         </th>
       {/if}
       {#each listFields as field, _i (_i)}
-        <th>
+        <th class={stickyLeft === field.key ? 'lite-table-sticky-left' : stickyRight === field.key ? 'lite-table-sticky-right' : undefined} data-sticky={stickyLeft === field.key ? 'left' : stickyRight === field.key ? 'right' : undefined}>
           {#if field.sortable !== false}
             <a href={sortUrl(field)}>
               {field.label}
@@ -115,7 +123,7 @@
         </th>
       {/each}
       {#if showView || showEdit || showDelete}
-        <th style="text-align:right;">{t("common.actions") || "Actions"}</th>
+        <th class={stickyActions ? 'lite-table-sticky-right' : undefined} data-sticky={stickyActions ? 'right' : undefined} style="text-align:right;">{t("common.actions") || "Actions"}</th>
       {/if}
     </tr>
   </thead>
@@ -129,7 +137,7 @@
           </td>
         {/if}
         {#each listFields as field, _i (_i)}
-          <td>
+          <td class={stickyLeft === field.key ? 'lite-table-sticky-left' : stickyRight === field.key ? 'lite-table-sticky-right' : undefined} data-sticky={stickyLeft === field.key ? 'left' : stickyRight === field.key ? 'right' : undefined}>
             {#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])}
@@ -148,7 +156,7 @@
           </td>
         {/each}
         {#if showView || showEdit || showDelete}
-          <td class="actions">
+          <td class={'actions' + (stickyActions ? ' lite-table-sticky-right' : '')} data-sticky={stickyActions ? 'right' : undefined}>
             {#if showView}
               <a href={basePath + "/" + resource.name + "/show/" + id} class="lite-btn lite-btn-sm">{t("common.show") || "Show"}</a>
             {/if}

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

@@ -15,6 +15,13 @@ interface Props {
     canEdit?: boolean;
     canDelete?: boolean;
     enableBatch?: boolean;
+    /** One field key per edge; left is ignored while batch selection is active. */
+    stickyColumns?: {
+        left?: string;
+        right?: string;
+    };
+    /** Pin actions on the right; this takes precedence over stickyColumns.right. */
+    stickyActions?: boolean;
 }
 declare const LiteTable: import("svelte").Component<Props, {}, "">;
 type LiteTable = ReturnType<typeof LiteTable>;

package/dist/index.d.ts

@@ -22,6 +22,10 @@ export { default as LiteFilterBuilder } from './components/LiteFilterBuilder.sve
 export type { FilterRuleItem } from './components/LiteFilterBuilder.svelte';
 export { default as LiteBreadcrumbs } from './components/LiteBreadcrumbs.svelte';
 export { default as LiteStatsCard } from './components/LiteStatsCard.svelte';
+export { default as LiteMetricStrip } from './components/LiteMetricStrip.svelte';
+export type { LiteMetricStripItem, LiteMetricTone, LiteMetricBadgeTone, } from './components/LiteMetricStrip.svelte';
+export { default as LiteBadge } from './components/LiteBadge.svelte';
+export type { LiteBadgeVariant } from './components/LiteBadge.svelte';
 export { default as LiteConfirmDialog } from './components/LiteConfirmDialog.svelte';
 export { default as LiteEmptyState } from './components/LiteEmptyState.svelte';
 export { default as LiteTabs } from './components/LiteTabs.svelte';

package/dist/index.js

@@ -24,6 +24,8 @@ export { default as LiteTransfer } from './components/LiteTransfer.svelte';
 export { default as LiteFilterBuilder } from './components/LiteFilterBuilder.svelte';
 export { default as LiteBreadcrumbs } from './components/LiteBreadcrumbs.svelte';
 export { default as LiteStatsCard } from './components/LiteStatsCard.svelte';
+export { default as LiteMetricStrip } from './components/LiteMetricStrip.svelte';
+export { default as LiteBadge } from './components/LiteBadge.svelte';
 export { default as LiteConfirmDialog } from './components/LiteConfirmDialog.svelte';
 export { default as LiteEmptyState } from './components/LiteEmptyState.svelte';
 export { default as LiteTabs } from './components/LiteTabs.svelte';

package/dist/lite.css

@@ -862,6 +862,22 @@ textarea.lite-input {
   overflow-x: auto;
 }
 
+.lite-table .lite-table-sticky-left,
+.lite-table .lite-table-sticky-right {
+  position: sticky;
+  z-index: 2;
+  background: #fff;
+}
+.lite-table th.lite-table-sticky-left,
+.lite-table th.lite-table-sticky-right {
+  z-index: 3;
+  background: #f8fafc;
+}
+.lite-table .lite-table-sticky-left { left: 0; box-shadow: 1px 0 0 #e2e8f0; }
+.lite-table .lite-table-sticky-right { right: 0; box-shadow: -1px 0 0 #e2e8f0; }
+.lite-table tr:hover .lite-table-sticky-left,
+.lite-table tr:hover .lite-table-sticky-right { background: #f8f7fd; }
+
 .lite-muted {
   color: #64748b;
   font-size: 12px;
@@ -1044,6 +1060,70 @@ textarea.lite-input {
   border-color: #fde68a;
 }
 
+.lite-badge-subtle {
+  background: #eef2ff;
+  color: #4338ca;
+  border-color: #c7d2fe;
+}
+.lite-badge-default { background: #4f46e5; color: #fff; border-color: #4f46e5; }
+.lite-badge-secondary { background: #f1f5f9; color: #334155; border-color: #e2e8f0; }
+.lite-badge-destructive,
+.lite-badge-subtle-destructive { background: #fef2f2; color: #dc2626; border-color: #fecaca; }
+.lite-badge-subtle-success { background: #f0fdf4; color: #166534; border-color: #bbf7d0; }
+.lite-badge-subtle-warning { background: #fffbeb; color: #92400e; border-color: #fde68a; }
+.lite-badge-subtle-pill {
+  border-radius: 999px;
+  background: #f8fafc;
+  color: #475569;
+  font-weight: 500;
+}
+.lite-badge-outline { background: transparent; color: #0f172a; }
+.lite-badge-ghost { background: transparent; border-color: transparent; color: #475569; }
+.lite-badge-link { padding-left: 0; padding-right: 0; background: transparent; border-color: transparent; color: #4f46e5; text-decoration: underline; }
+
+/* ─── Metric strip ────────────────────────────────────────── */
+.lite-metric-strip {
+  display: flex;
+  flex-wrap: wrap;
+  overflow: hidden;
+  border: 1px solid #e2e8f0;
+  border-radius: 8px;
+  background: #e2e8f0;
+}
+.lite-metric-item {
+  flex: 1 1 160px;
+  min-width: 0;
+  padding: 14px 16px;
+  background: #fff;
+  color: #0f172a;
+  text-decoration: none;
+  border-right: 1px solid #e2e8f0;
+  border-bottom: 1px solid #e2e8f0;
+}
+.lite-metric-item-link:hover { background: #f8fafc; text-decoration: none; }
+.lite-metric-label,
+.lite-metric-value-row { display: flex; align-items: center; justify-content: space-between; }
+.lite-metric-label { color: #64748b; font-size: 12px; font-weight: 600; }
+.lite-metric-icon { margin-left: 8px; color: #94a3b8; }
+.lite-metric-icon-svg { width: 14px; height: 14px; }
+.lite-metric-value { margin-top: 4px; font-size: 23px; line-height: 1.2; color: #0f172a; }
+.lite-metric-value-primary { color: #4f46e5; }
+.lite-metric-value-success { color: #16a34a; }
+.lite-metric-value-warning { color: #d97706; }
+.lite-metric-value-danger { color: #dc2626; }
+.lite-metric-value-info { color: #2563eb; }
+.lite-metric-loading { display: block; width: 64px; height: 24px; margin-top: 6px; background: #e2e8f0; border-radius: 4px; }
+.lite-metric-trend { margin-left: 8px; font-size: 12px; font-weight: 600; white-space: nowrap; }
+.lite-metric-trend-up { color: #16a34a; }
+.lite-metric-trend-down { color: #dc2626; }
+.lite-metric-trend-label { margin-left: 4px; color: #64748b; font-weight: 400; }
+.lite-metric-strip-2 .lite-metric-item { flex-basis: 45%; }
+.lite-metric-strip-3 .lite-metric-item { flex-basis: 30%; }
+.lite-metric-strip-4 .lite-metric-item { flex-basis: 22%; }
+.lite-metric-strip-5 .lite-metric-item { flex-basis: 18%; }
+.lite-metric-strip-6 .lite-metric-item,
+.lite-metric-strip-auto .lite-metric-item { flex-basis: 15%; }
+
 /* ─── Boolean indicator ────────────────────────────────────── */
 .lite-bool {
   display: inline-block;
@@ -1317,6 +1397,17 @@ textarea.lite-input {
   .lite-realtime-status > .lite-btn {
     margin-top: 10px;
   }
+  .lite-metric-strip-3 .lite-metric-item,
+  .lite-metric-strip-4 .lite-metric-item,
+  .lite-metric-strip-5 .lite-metric-item,
+  .lite-metric-strip-6 .lite-metric-item,
+  .lite-metric-strip-auto .lite-metric-item {
+    flex-basis: 45%;
+  }
+}
+
+@media (max-width: 420px) {
+  .lite-metric-strip .lite-metric-item { flex-basis: 100%; }
 }
 
 /* ─── Print ────────────────────────────────────────────────── */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@svadmin/lite",
-  "version": "0.8.2",
+  "version": "0.9.0",
   "description": "SSR-first lightweight admin UI for @svadmin with optional progressive enhancement",
   "type": "module",
   "sideEffects": [
@@ -49,7 +49,7 @@
   },
   "peerDependencies": {
     "svelte": "^5.56.10",
-    "@svadmin/core": ">=0.34.2 <0.48.0",
+    "@svadmin/core": ">=0.34.2 <0.49.0",
     "@sveltejs/kit": "^2.70.3"
   },
   "dependencies": {