@svadmin/lite 0.7.0 → 0.8.0

package/dist/components/LiteModalForm.svelte

@@ -0,0 +1,84 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    title: string;
+    description?: string;
+    action?: string;
+    method?: "get" | "post" | "dialog" | "GET" | "POST" | "DIALOG" | null;
+    submitText?: string;
+    cancelText?: string;
+    children?: Snippet;
+  }
+
+  let {
+    title,
+    description,
+    action = '',
+    method = 'POST',
+    submitText = 'Confirm',
+    cancelText = 'Cancel',
+    children,
+  }: Props = $props();
+</script>
+
+<div class="lite-modal-card">
+  <div class="lite-modal-header">
+    <h3 class="lite-modal-title">{title}</h3>
+    {#if description}
+      <p class="lite-modal-desc">{description}</p>
+    {/if}
+  </div>
+
+  <form {action} {method} class="lite-modal-form">
+    <div class="lite-modal-body">
+      {#if children}
+        {@render children()}
+      {/if}
+    </div>
+
+    <div class="lite-modal-footer">
+      <button type="button" class="lite-btn lite-btn-outline lite-btn-sm" onclick={() => history.back()}>
+        {cancelText}
+      </button>
+      <button type="submit" class="lite-btn lite-btn-primary lite-btn-sm" style="margin-left: 8px;">
+        {submitText}
+      </button>
+    </div>
+  </form>
+</div>
+
+<style>
+  .lite-modal-card {
+    padding: 16px;
+    background: #ffffff;
+    border: 1px solid #cbd5e1;
+    border-radius: 6px;
+    margin-bottom: 16px;
+  }
+  .lite-modal-header {
+    padding-bottom: 10px;
+    border-bottom: 1px solid #e2e8f0;
+    margin-bottom: 12px;
+  }
+  .lite-modal-title {
+    margin: 0;
+    font-size: 14px;
+    color: #1e293b;
+  }
+  .lite-modal-desc {
+    margin: 4px 0 0 0;
+    font-size: 12px;
+    color: #64748b;
+  }
+  .lite-modal-body {
+    margin-bottom: 16px;
+    font-size: 13px;
+  }
+  .lite-modal-footer {
+    display: flex;
+    justify-content: flex-end;
+    padding-top: 12px;
+    border-top: 1px solid #e2e8f0;
+  }
+</style>

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

@@ -0,0 +1,13 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    title: string;
+    description?: string;
+    action?: string;
+    method?: "get" | "post" | "dialog" | "GET" | "POST" | "DIALOG" | null;
+    submitText?: string;
+    cancelText?: string;
+    children?: Snippet;
+}
+declare const LiteModalForm: import("svelte").Component<Props, {}, "">;
+type LiteModalForm = ReturnType<typeof LiteModalForm>;
+export default LiteModalForm;

package/dist/components/LiteMultiTabKeepAlive.svelte

@@ -0,0 +1,79 @@
+<script lang="ts">
+  export interface WorkspaceTab {
+    id: string;
+    title: string;
+    path: string;
+    closable?: boolean;
+    pinned?: boolean;
+  }
+
+  interface Props {
+    tabs?: WorkspaceTab[];
+    activeTabId?: string;
+    class?: string;
+  }
+
+  let {
+    tabs = [],
+    activeTabId = '',
+    class: className = '',
+  }: Props = $props();
+</script>
+
+<div class="sv-lite-tab-bar {className}">
+  <div class="sv-lite-tab-list">
+    {#each tabs as tab (tab.id)}
+      {@const isActive = tab.id === activeTabId}
+      <a
+        href={tab.path}
+        class="sv-lite-tab {isActive ? 'sv-lite-tab-active' : ''}"
+      >
+        {#if tab.pinned}
+          <span class="sv-lite-pin-icon">📌</span>
+        {/if}
+        <span class="sv-lite-tab-title">{tab.title}</span>
+      </a>
+    {/each}
+  </div>
+</div>
+
+<style>
+  .sv-lite-tab-bar {
+    display: block;
+    background-color: #f1f5f9;
+    border-bottom: 1px solid #cbd5e1;
+    padding: 4px 8px 0 8px;
+    font-size: 12px;
+  }
+  .sv-lite-tab-list {
+    white-space: nowrap;
+    overflow-x: auto;
+  }
+  .sv-lite-tab {
+    display: inline-block;
+    padding: 6px 12px;
+    margin-right: 4px;
+    background-color: #e2e8f0;
+    color: #475569;
+    text-decoration: none;
+    border-top-left-radius: 4px;
+    border-top-right-radius: 4px;
+    border: 1px solid #cbd5e1;
+    border-bottom: none;
+    font-weight: 500;
+  }
+  .sv-lite-tab-active {
+    background-color: #ffffff;
+    color: #0f172a;
+    font-weight: 600;
+    border-bottom: 1px solid #ffffff;
+    margin-bottom: -1px;
+  }
+  .sv-lite-pin-icon {
+    font-size: 10px;
+    margin-right: 4px;
+  }
+  .sv-lite-tab-title {
+    vertical-align: middle;
+  }
+</style>

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

@@ -0,0 +1,15 @@
+export interface WorkspaceTab {
+    id: string;
+    title: string;
+    path: string;
+    closable?: boolean;
+    pinned?: boolean;
+}
+interface Props {
+    tabs?: WorkspaceTab[];
+    activeTabId?: string;
+    class?: string;
+}
+declare const LiteMultiTabKeepAlive: import("svelte").Component<Props, {}, "">;
+type LiteMultiTabKeepAlive = ReturnType<typeof LiteMultiTabKeepAlive>;
+export default LiteMultiTabKeepAlive;

package/dist/components/LiteOfflineSyncBanner.svelte

@@ -0,0 +1,75 @@
+<script lang="ts">
+  export interface PendingMutation {
+    id: string;
+    action: string;
+    resource: string;
+    timestamp: string;
+  }
+
+  interface Props {
+    isOnline?: boolean;
+    pendingMutations?: PendingMutation[];
+    formAction?: string;
+    class?: string;
+  }
+
+  let {
+    isOnline = true,
+    pendingMutations = [],
+    formAction = '',
+    class: className = '',
+  }: Props = $props();
+</script>
+
+{#if !isOnline || pendingMutations.length > 0}
+  <div class="sv-lite-sync-banner {isOnline ? 'sv-lite-sync-online' : 'sv-lite-sync-offline'} {className}">
+    <div class="sv-lite-sync-title">
+      {#if !isOnline}
+        <strong>Offline Connection:</strong> Changes are buffered locally.
+      {:else}
+        <strong>Online Connection:</strong> {pendingMutations.length} pending local mutations.
+      {/if}
+    </div>
+
+    {#if pendingMutations.length > 0 && formAction}
+      <form method="POST" action={formAction} class="sv-lite-sync-form">
+        <button type="submit" class="sv-lite-sync-btn">Force Sync All ({pendingMutations.length})</button>
+      </form>
+    {/if}
+  </div>
+{/if}
+
+<style>
+  .sv-lite-sync-banner {
+    display: block;
+    padding: 8px 12px;
+    border-radius: 4px;
+    font-size: 12px;
+    margin-bottom: 10px;
+  }
+  .sv-lite-sync-offline {
+    background-color: #fef3c7;
+    border: 1px solid #fde68a;
+    color: #92400e;
+  }
+  .sv-lite-sync-online {
+    background-color: #f1f5f9;
+    border: 1px solid #cbd5e1;
+    color: #334155;
+  }
+  .sv-lite-sync-title {
+    display: inline-block;
+  }
+  .sv-lite-sync-form {
+    float: right;
+  }
+  .sv-lite-sync-btn {
+    padding: 3px 8px;
+    font-size: 11px;
+    background-color: #4f46e5;
+    color: #ffffff;
+    border: none;
+    border-radius: 3px;
+    cursor: pointer;
+  }
+</style>

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

@@ -0,0 +1,15 @@
+export interface PendingMutation {
+    id: string;
+    action: string;
+    resource: string;
+    timestamp: string;
+}
+interface Props {
+    isOnline?: boolean;
+    pendingMutations?: PendingMutation[];
+    formAction?: string;
+    class?: string;
+}
+declare const LiteOfflineSyncBanner: import("svelte").Component<Props, {}, "">;
+type LiteOfflineSyncBanner = ReturnType<typeof LiteOfflineSyncBanner>;
+export default LiteOfflineSyncBanner;

package/dist/components/LitePdfDocumentViewer.svelte

@@ -0,0 +1,138 @@
+<script lang="ts">
+  export interface DocumentStamp {
+    id: string;
+    text: string;
+    page: number;
+    status?: string;
+  }
+
+  interface Props {
+    fileUrl?: string;
+    fileName?: string;
+    totalPages?: number;
+    currentPage?: number;
+    stamps?: DocumentStamp[];
+    class?: string;
+  }
+
+  let {
+    fileUrl = '',
+    fileName = 'Document.pdf',
+    totalPages = 1,
+    currentPage = 1,
+    stamps = [],
+    class: className = '',
+  }: Props = $props();
+</script>
+
+<div class="sv-lite-pdf-viewer {className}">
+  <div class="sv-lite-pdf-header">
+    <strong>{fileName}</strong>
+    <span class="sv-lite-pdf-page">Page {currentPage} of {totalPages}</span>
+    {#if fileUrl}
+      <a href={fileUrl} download={fileName} class="sv-lite-pdf-dl">Download PDF</a>
+    {/if}
+  </div>
+
+  {#if fileUrl}
+    <div class="sv-lite-pdf-embed-wrapper">
+      <object data={fileUrl} type="application/pdf" title={fileName} class="sv-lite-pdf-object">
+        <p class="sv-lite-pdf-fallback">
+          Your browser does not support inline PDF viewing.
+          <a href={fileUrl} target="_blank" rel="noreferrer">Click here to open the PDF directly.</a>
+        </p>
+      </object>
+    </div>
+  {:else}
+    <div class="sv-lite-pdf-placeholder">
+      <div class="sv-lite-pdf-sheet">
+        <h3>{fileName}</h3>
+        <p>Document preview placeholder (SSR Lite mode). Provide a valid PDF URL to stream directly.</p>
+        {#if stamps.length > 0}
+          <div class="sv-lite-stamps">
+            <strong>Approved Stamps:</strong>
+            {#each stamps as s (s.id)}
+              <span class="sv-lite-stamp-badge">{s.text} (P.{s.page})</span>
+            {/each}
+          </div>
+        {/if}
+      </div>
+    </div>
+  {/if}
+</div>
+
+<style>
+  .sv-lite-pdf-viewer {
+    display: block;
+    border: 1px solid #e2e8f0;
+    border-radius: 6px;
+    padding: 12px;
+    background-color: #ffffff;
+    font-size: 12px;
+  }
+  .sv-lite-pdf-header {
+    margin-bottom: 10px;
+    font-size: 13px;
+    color: #0f172a;
+    padding-bottom: 8px;
+    border-bottom: 1px solid #cbd5e1;
+  }
+  .sv-lite-pdf-page {
+    color: #64748b;
+    font-size: 11px;
+    margin-left: 8px;
+  }
+  .sv-lite-pdf-dl {
+    float: right;
+    color: #4338ca;
+    text-decoration: none;
+    font-weight: 600;
+  }
+  .sv-lite-pdf-embed-wrapper {
+    width: 100%;
+    height: 600px;
+    background-color: #f8fafc;
+    border: 1px solid #cbd5e1;
+    border-radius: 4px;
+  }
+  .sv-lite-pdf-object {
+    width: 100%;
+    height: 100%;
+  }
+  .sv-lite-pdf-fallback {
+    padding: 20px;
+    text-align: center;
+    color: #64748b;
+  }
+  .sv-lite-pdf-placeholder {
+    padding: 20px;
+    background-color: #f8fafc;
+    border: 1px solid #cbd5e1;
+    border-radius: 4px;
+    text-align: center;
+  }
+  .sv-lite-pdf-sheet {
+    display: inline-block;
+    width: 400px;
+    background: #ffffff;
+    border: 1px solid #cbd5e1;
+    padding: 20px;
+    text-align: left;
+    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
+  }
+  .sv-lite-stamps {
+    margin-top: 15px;
+    padding-top: 10px;
+    border-top: 1px solid #e2e8f0;
+  }
+  .sv-lite-stamp-badge {
+    display: inline-block;
+    padding: 2px 6px;
+    background-color: #dcfce7;
+    color: #166534;
+    border-radius: 3px;
+    font-size: 10px;
+    margin-left: 6px;
+    font-weight: bold;
+  }
+</style>

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

@@ -0,0 +1,17 @@
+export interface DocumentStamp {
+    id: string;
+    text: string;
+    page: number;
+    status?: string;
+}
+interface Props {
+    fileUrl?: string;
+    fileName?: string;
+    totalPages?: number;
+    currentPage?: number;
+    stamps?: DocumentStamp[];
+    class?: string;
+}
+declare const LitePdfDocumentViewer: import("svelte").Component<Props, {}, "">;
+type LitePdfDocumentViewer = ReturnType<typeof LitePdfDocumentViewer>;
+export default LitePdfDocumentViewer;

package/dist/components/LitePivotTable.svelte

@@ -0,0 +1,163 @@
+<script lang="ts">
+  export type AggregationFn = 'sum' | 'count' | 'avg' | 'min' | 'max';
+
+  interface Props {
+    data?: Record<string, unknown>[];
+    rowField: string;
+    rowLabel?: string;
+    columnField: string;
+    columnLabel?: string;
+    valueField: string;
+    valueLabel?: string;
+    aggregator?: AggregationFn;
+    class?: string;
+  }
+
+  let {
+    data = [],
+    rowField,
+    rowLabel = rowField,
+    columnField,
+    columnLabel = columnField,
+    valueField,
+    valueLabel = valueField,
+    aggregator = 'sum',
+    class: className = '',
+  }: Props = $props();
+
+  const distinctRowValues = $derived(
+    Array.from(new Set(data.map((d) => String(d[rowField] ?? '—')))).sort()
+  );
+
+  const distinctColValues = $derived(
+    Array.from(new Set(data.map((d) => String(d[columnField] ?? '—')))).sort()
+  );
+
+  function computeAgg(vals: number[]): number {
+    if (vals.length === 0) return 0;
+    if (aggregator === 'count') return vals.length;
+    if (aggregator === 'sum') return vals.reduce((a, b) => a + b, 0);
+    if (aggregator === 'avg') return vals.reduce((a, b) => a + b, 0) / vals.length;
+    if (aggregator === 'min') return Math.min(...vals);
+    if (aggregator === 'max') return Math.max(...vals);
+    return 0;
+  }
+
+  function getCellValue(r: string, c: string): number {
+    const vals = data
+      .filter((d) => String(d[rowField] ?? '—') === r && String(d[columnField] ?? '—') === c)
+      .map((d) => Number(d[valueField]) || 0);
+    return computeAgg(vals);
+  }
+
+  function getRowTotal(r: string): number {
+    const vals = data
+      .filter((d) => String(d[rowField] ?? '—') === r)
+      .map((d) => Number(d[valueField]) || 0);
+    return computeAgg(vals);
+  }
+
+  function getColTotal(c: string): number {
+    const vals = data
+      .filter((d) => String(d[columnField] ?? '—') === c)
+      .map((d) => Number(d[valueField]) || 0);
+    return computeAgg(vals);
+  }
+
+  const grandTotal = $derived(
+    computeAgg(data.map((d) => Number(d[valueField]) || 0))
+  );
+</script>
+
+<div class="sv-lite-pivot-container {className}">
+  <div class="sv-lite-pivot-header">
+    <strong>Pivot Analysis</strong> ({rowLabel} × {columnLabel})
+    <span class="sv-lite-pivot-sub">Aggregator: {aggregator.toUpperCase()} ({valueLabel})</span>
+  </div>
+
+  <table class="sv-lite-pivot-table">
+    <thead>
+      <tr>
+        <th class="sv-lite-th-dim">{rowLabel} \ {columnLabel}</th>
+        {#each distinctColValues as col (col)}
+          <th>{col}</th>
+        {/each}
+        <th class="sv-lite-th-total">Total</th>
+      </tr>
+    </thead>
+    <tbody>
+      {#each distinctRowValues as row (row)}
+        <tr>
+          <td class="sv-lite-td-dim">{row}</td>
+          {#each distinctColValues as col (col)}
+            {@const val = getCellValue(row, col)}
+            <td class="sv-lite-td-val">{val.toLocaleString(undefined, { maximumFractionDigits: 2 })}</td>
+          {/each}
+          <td class="sv-lite-td-rowtotal">{getRowTotal(row).toLocaleString(undefined, { maximumFractionDigits: 2 })}</td>
+        </tr>
+      {/each}
+    </tbody>
+    <tfoot>
+      <tr>
+        <td class="sv-lite-td-dim">Grand Total</td>
+        {#each distinctColValues as col (col)}
+          <td class="sv-lite-td-val">{getColTotal(col).toLocaleString(undefined, { maximumFractionDigits: 2 })}</td>
+        {/each}
+        <td class="sv-lite-td-grandtotal">{grandTotal.toLocaleString(undefined, { maximumFractionDigits: 2 })}</td>
+      </tr>
+    </tfoot>
+  </table>
+</div>
+
+<style>
+  .sv-lite-pivot-container {
+    display: block;
+    border: 1px solid #e2e8f0;
+    border-radius: 6px;
+    padding: 12px;
+    background-color: #ffffff;
+    font-size: 12px;
+    overflow-x: auto;
+  }
+  .sv-lite-pivot-header {
+    margin-bottom: 10px;
+    font-size: 13px;
+    color: #0f172a;
+  }
+  .sv-lite-pivot-sub {
+    color: #64748b;
+    font-size: 11px;
+    margin-left: 8px;
+  }
+  .sv-lite-pivot-table {
+    width: 100%;
+    border-collapse: collapse;
+    text-align: right;
+  }
+  .sv-lite-pivot-table th, .sv-lite-pivot-table td {
+    border: 1px solid #e2e8f0;
+    padding: 6px 10px;
+  }
+  .sv-lite-pivot-table thead {
+    background-color: #f8fafc;
+    color: #475569;
+  }
+  .sv-lite-th-dim, .sv-lite-td-dim {
+    text-align: left;
+    background-color: #f8fafc;
+    font-weight: 600;
+  }
+  .sv-lite-th-total, .sv-lite-td-rowtotal {
+    background-color: #f1f5f9;
+    font-weight: 600;
+  }
+  .sv-lite-pivot-table tfoot {
+    background-color: #f1f5f9;
+    font-weight: bold;
+    border-top: 2px solid #cbd5e1;
+  }
+  .sv-lite-td-grandtotal {
+    color: #4338ca;
+    font-weight: bold;
+  }
+</style>

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

@@ -0,0 +1,15 @@
+export type AggregationFn = 'sum' | 'count' | 'avg' | 'min' | 'max';
+interface Props {
+    data?: Record<string, unknown>[];
+    rowField: string;
+    rowLabel?: string;
+    columnField: string;
+    columnLabel?: string;
+    valueField: string;
+    valueLabel?: string;
+    aggregator?: AggregationFn;
+    class?: string;
+}
+declare const LitePivotTable: import("svelte").Component<Props, {}, "">;
+type LitePivotTable = ReturnType<typeof LitePivotTable>;
+export default LitePivotTable;

package/dist/components/LitePresenceAvatarGroup.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">
+  interface LitePresenceUser {
+    id: string;
+    name: string;
+    status?: 'online' | 'idle' | 'editing';
+  }
+
+  interface Props {
+    users?: LitePresenceUser[];
+    label?: string;
+  }
+
+  let {
+    users = [],
+    label = 'Viewing now',
+  }: Props = $props();
+</script>
+
+<div class="lite-presence-container">
+  <span class="lite-presence-label">{label}:</span>
+  {#each users as user (user.id)}
+    <span class="lite-presence-badge" title="{user.name} ({user.status ?? 'online'})">
+      👤 {user.name}
+    </span>
+  {/each}
+  {#if users.length === 0}
+    <span style="color: #94a3b8; font-size: 11px;">No active viewers</span>
+  {/if}
+</div>
+
+<style>
+  .lite-presence-container {
+    display: inline-flex;
+    align-items: center;
+    font-size: 12px;
+    margin-bottom: 8px;
+  }
+  .lite-presence-label {
+    color: #64748b;
+    margin-right: 6px;
+    font-weight: 500;
+  }
+  .lite-presence-badge {
+    display: inline-block;
+    padding: 2px 6px;
+    background: #f1f5f9;
+    border: 1px solid #cbd5e1;
+    border-radius: 4px;
+    margin-right: 4px;
+    font-size: 11px;
+  }
+</style>

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

@@ -0,0 +1,12 @@
+interface LitePresenceUser {
+    id: string;
+    name: string;
+    status?: 'online' | 'idle' | 'editing';
+}
+interface Props {
+    users?: LitePresenceUser[];
+    label?: string;
+}
+declare const LitePresenceAvatarGroup: import("svelte").Component<Props, {}, "">;
+type LitePresenceAvatarGroup = ReturnType<typeof LitePresenceAvatarGroup>;
+export default LitePresenceAvatarGroup;