@svadmin/ui 0.63.0 → 0.65.0

package/dist/components/MultiTabKeepAlive.svelte

@@ -0,0 +1,143 @@
+<script lang="ts">
+  import { X, Pin, RefreshCw, XCircle } from '@lucide/svelte';
+  import { Button } from './ui/button/index.js';
+  import { cn } from '../utils.js';
+
+  export interface WorkspaceTab {
+    id: string;
+    title: string;
+    path: string;
+    closable?: boolean;
+    pinned?: boolean;
+    icon?: string;
+  }
+
+  interface Props {
+    tabs?: WorkspaceTab[];
+    activeTabId?: string;
+    onselect?: (tab: WorkspaceTab) => void;
+    onclose?: (tabId: string) => void;
+    oncloseothers?: (tabId: string) => void;
+    oncloseall?: () => void;
+    onrefresh?: (tab: WorkspaceTab) => void;
+    class?: string;
+  }
+
+  let {
+    tabs = $bindable([]),
+    activeTabId = $bindable(''),
+    onselect,
+    onclose,
+    oncloseothers,
+    oncloseall,
+    onrefresh,
+    class: className = '',
+  }: Props = $props();
+
+  function handleSelect(tab: WorkspaceTab) {
+    activeTabId = tab.id;
+    onselect?.(tab);
+  }
+
+  function handleClose(e: MouseEvent, tabId: string) {
+    e.stopPropagation();
+    const idx = tabs.findIndex((t) => t.id === tabId);
+    if (idx === -1) return;
+    const isCurrentActive = activeTabId === tabId;
+    tabs = tabs.filter((t) => t.id !== tabId);
+    onclose?.(tabId);
+
+    if (isCurrentActive && tabs.length > 0) {
+      const nextTab = tabs[Math.min(idx, tabs.length - 1)];
+      if (nextTab) {
+        activeTabId = nextTab.id;
+        onselect?.(nextTab);
+      }
+    }
+  }
+
+  function handleCloseAll() {
+    const pinned = tabs.filter((t) => t.pinned);
+    tabs = pinned;
+    if (pinned.length > 0 && pinned[0]) {
+      activeTabId = pinned[0].id;
+      onselect?.(pinned[0]);
+    }
+    oncloseall?.();
+  }
+
+  function handleContextMenu(e: MouseEvent, tabId: string) {
+    e.preventDefault();
+    if (oncloseothers) {
+      tabs = tabs.filter((t) => t.pinned || t.id === tabId);
+      activeTabId = tabId;
+      oncloseothers(tabId);
+    }
+  }
+</script>
+
+<div class={cn('flex items-center justify-between border-b border-border/80 bg-muted/30 px-2 text-xs select-none', className)}>
+  <!-- Tabs list -->
+  <div class="flex items-center gap-1 overflow-x-auto py-1 scrollbar-none">
+    {#each tabs as tab (tab.id)}
+      {@const isActive = tab.id === activeTabId}
+      <div
+        role="button"
+        tabindex="0"
+        class={cn(
+          'group relative flex items-center gap-1.5 px-3 py-1.5 rounded-md text-xs font-medium transition-all cursor-pointer border',
+          isActive
+            ? 'bg-card text-foreground border-border shadow-xs'
+            : 'bg-transparent text-muted-foreground border-transparent hover:bg-muted/60 hover:text-foreground'
+        )}
+        onclick={() => handleSelect(tab)}
+        onkeydown={(e) => { if (e.key === 'Enter') handleSelect(tab); }}
+        oncontextmenu={(e) => handleContextMenu(e, tab.id)}
+      >
+        {#if tab.pinned}
+          <Pin class="h-3 w-3 text-primary shrink-0 rotate-45" />
+        {/if}
+
+        <span class="truncate max-w-32">{tab.title}</span>
+
+        {#if tab.closable !== false && !tab.pinned}
+          <button
+            type="button"
+            class="flex h-3.5 w-3.5 items-center justify-center rounded-full text-muted-foreground/60 hover:bg-destructive/10 hover:text-destructive transition-colors p-0 border-0 cursor-pointer"
+            onclick={(e) => handleClose(e, tab.id)}
+          >
+            <X class="h-2.5 w-2.5" />
+          </button>
+        {/if}
+      </div>
+    {/each}
+  </div>
+
+  <!-- Actions (Close All / Refresh) -->
+  <div class="flex items-center gap-1 pl-2 shrink-0">
+    {#if onrefresh}
+      {@const curTab = tabs.find((t) => t.id === activeTabId)}
+      {#if curTab}
+        <Button
+          variant="ghost"
+          size="sm"
+          class="h-7 w-7 p-0 text-muted-foreground hover:text-foreground"
+          onclick={() => onrefresh(curTab)}
+        >
+          <RefreshCw class="h-3 w-3" />
+        </Button>
+      {/if}
+    {/if}
+
+    {#if tabs.some((t) => !t.pinned && t.closable !== false)}
+      <Button
+        variant="ghost"
+        size="sm"
+        class="h-7 w-7 p-0 text-muted-foreground hover:text-destructive"
+        onclick={handleCloseAll}
+      >
+        <XCircle class="h-3.5 w-3.5" />
+      </Button>
+    {/if}
+  </div>
+</div>

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

@@ -0,0 +1,21 @@
+export interface WorkspaceTab {
+    id: string;
+    title: string;
+    path: string;
+    closable?: boolean;
+    pinned?: boolean;
+    icon?: string;
+}
+interface Props {
+    tabs?: WorkspaceTab[];
+    activeTabId?: string;
+    onselect?: (tab: WorkspaceTab) => void;
+    onclose?: (tabId: string) => void;
+    oncloseothers?: (tabId: string) => void;
+    oncloseall?: () => void;
+    onrefresh?: (tab: WorkspaceTab) => void;
+    class?: string;
+}
+declare const MultiTabKeepAlive: import("svelte").Component<Props, {}, "tabs" | "activeTabId">;
+type MultiTabKeepAlive = ReturnType<typeof MultiTabKeepAlive>;
+export default MultiTabKeepAlive;

package/dist/components/OfflineSyncBanner.svelte

@@ -0,0 +1,172 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import { Button } from './ui/button/index.js';
+  import { Badge } from './ui/badge/index.js';
+  import {
+    Wifi,
+    WifiOff,
+    RefreshCw,
+    CheckCircle2,
+    Clock,
+    AlertCircle,
+  } from '@lucide/svelte';
+  import { cn } from '../utils.js';
+
+  export interface PendingMutation {
+    id: string;
+    action: string; // e.g. "update", "create", "delete"
+    resource: string;
+    timestamp: string;
+    status?: 'pending' | 'syncing' | 'failed' | 'synced';
+    error?: string;
+  }
+
+  interface Props {
+    isOnline?: boolean;
+    pendingMutations?: PendingMutation[];
+    autoSync?: boolean;
+    onsync?: (mutations: PendingMutation[]) => void | Promise<void>;
+    onretry?: (mutationId: string) => void;
+    class?: string;
+  }
+
+  let {
+    isOnline = $bindable(true),
+    pendingMutations = $bindable([]),
+    autoSync = true,
+    onsync,
+    onretry,
+    class: className = '',
+  }: Props = $props();
+
+  let isSyncing = $state(false);
+  let expanded = $state(false);
+
+  async function triggerSync() {
+    if (isSyncing || pendingMutations.length === 0) return;
+    isSyncing = true;
+    try {
+      await onsync?.(pendingMutations);
+    } finally {
+      isSyncing = false;
+    }
+  }
+
+  onMount(() => {
+    if (typeof window !== 'undefined') {
+      const handleOnline = () => {
+        isOnline = true;
+        if (autoSync && pendingMutations.length > 0) {
+          triggerSync();
+        }
+      };
+      const handleOffline = () => {
+        isOnline = false;
+      };
+
+      window.addEventListener('online', handleOnline);
+      window.addEventListener('offline', handleOffline);
+
+      return () => {
+        window.removeEventListener('online', handleOnline);
+        window.removeEventListener('offline', handleOffline);
+      };
+    }
+  });
+</script>
+
+{#if !isOnline || pendingMutations.length > 0}
+  <div
+    class={cn(
+      'rounded-xl border shadow-xs text-xs p-3 transition-all',
+      !isOnline
+        ? 'bg-warning/15 border-warning/30 text-warning-foreground'
+        : 'bg-muted/40 border-border/80 text-foreground',
+      className
+    )}
+  >
+    <div class="flex flex-wrap items-center justify-between gap-2">
+      <!-- Status Indicator -->
+      <div class="flex items-center gap-2">
+        {#if !isOnline}
+          <div class="flex h-6 w-6 items-center justify-center rounded-full bg-warning/20 text-warning">
+            <WifiOff class="h-3.5 w-3.5" />
+          </div>
+          <div>
+            <div class="font-semibold text-foreground">Offline Mode</div>
+            <div class="text-[11px] text-muted-foreground">Changes are saved locally to IndexedDB queue.</div>
+          </div>
+        {:else}
+          <div class="flex h-6 w-6 items-center justify-center rounded-full bg-success/20 text-success">
+            <Wifi class="h-3.5 w-3.5" />
+          </div>
+          <div>
+            <div class="font-semibold text-foreground">Online • Synced Connection</div>
+            <div class="text-[11px] text-muted-foreground">
+              {pendingMutations.length} pending mutation(s) in queue
+            </div>
+          </div>
+        {/if}
+      </div>
+
+      <!-- Actions -->
+      <div class="flex items-center gap-2">
+        {#if pendingMutations.length > 0}
+          <button
+            type="button"
+            class="text-[11px] text-muted-foreground hover:text-foreground underline cursor-pointer bg-transparent border-0"
+            onclick={() => { expanded = !expanded; }}
+          >
+            {expanded ? 'Hide Details' : `View Queue (${pendingMutations.length})`}
+          </button>
+
+          <Button
+            size="sm"
+            class="h-7 text-xs gap-1"
+            disabled={!isOnline || isSyncing}
+            onclick={triggerSync}
+          >
+            <RefreshCw class={cn('h-3 w-3', isSyncing ? 'animate-spin' : '')} />
+            {isSyncing ? 'Syncing...' : 'Sync Now'}
+          </Button>
+        {/if}
+      </div>
+    </div>
+
+    <!-- Queue List Drawer -->
+    {#if expanded && pendingMutations.length > 0}
+      <div class="mt-3 pt-3 border-t border-border/40 space-y-1.5 max-h-48 overflow-y-auto">
+        {#each pendingMutations as mut (mut.id)}
+          <div class="flex items-center justify-between p-2 rounded-md bg-card border border-border/60 text-[11px]">
+            <div class="flex items-center gap-2 truncate">
+              {#if mut.status === 'failed'}
+                <AlertCircle class="h-3.5 w-3.5 text-destructive shrink-0" />
+              {:else if mut.status === 'syncing'}
+                <RefreshCw class="h-3.5 w-3.5 text-primary animate-spin shrink-0" />
+              {:else if mut.status === 'synced'}
+                <CheckCircle2 class="h-3.5 w-3.5 text-success shrink-0" />
+              {:else}
+                <Clock class="h-3.5 w-3.5 text-muted-foreground shrink-0" />
+              {/if}
+
+              <Badge variant="outline" class="font-mono text-[9px] uppercase px-1 py-0">{mut.action}</Badge>
+              <span class="font-medium text-foreground truncate">{mut.resource}</span>
+              <span class="text-muted-foreground font-mono text-[10px]">{mut.timestamp}</span>
+            </div>
+
+            {#if mut.status === 'failed' && onretry}
+              <Button
+                variant="ghost"
+                size="sm"
+                class="h-6 text-[10px] px-2 text-destructive hover:bg-destructive/10"
+                onclick={() => onretry?.(mut.id)}
+              >
+                Retry
+              </Button>
+            {/if}
+          </div>
+        {/each}
+      </div>
+    {/if}
+  </div>
+{/if}

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

@@ -0,0 +1,19 @@
+export interface PendingMutation {
+    id: string;
+    action: string;
+    resource: string;
+    timestamp: string;
+    status?: 'pending' | 'syncing' | 'failed' | 'synced';
+    error?: string;
+}
+interface Props {
+    isOnline?: boolean;
+    pendingMutations?: PendingMutation[];
+    autoSync?: boolean;
+    onsync?: (mutations: PendingMutation[]) => void | Promise<void>;
+    onretry?: (mutationId: string) => void;
+    class?: string;
+}
+declare const OfflineSyncBanner: import("svelte").Component<Props, {}, "isOnline" | "pendingMutations">;
+type OfflineSyncBanner = ReturnType<typeof OfflineSyncBanner>;
+export default OfflineSyncBanner;

package/dist/components/PdfDocumentViewer.svelte

@@ -0,0 +1,255 @@
+<script lang="ts">
+  import { Button } from './ui/button/index.js';
+  import { Badge } from './ui/badge/index.js';
+  import {
+    ChevronLeft,
+    ChevronRight,
+    ZoomIn,
+    ZoomOut,
+    RotateCw,
+    Download,
+    Printer,
+    FileText,
+    Maximize2,
+  } from '@lucide/svelte';
+  import { cn } from '../utils.js';
+
+  export interface DocumentStamp {
+    id: string;
+    text: string;
+    page: number;
+    x: number; // percentage (0-100)
+    y: number; // percentage (0-100)
+    status?: 'approved' | 'rejected' | 'confidential' | 'reviewed';
+  }
+
+  interface Props {
+    fileUrl?: string;
+    fileName?: string;
+    totalPages?: number;
+    currentPage?: number;
+    stamps?: DocumentStamp[];
+    onpagechange?: (page: number) => void;
+    ondownload?: () => void;
+    onprint?: () => void;
+    class?: string;
+  }
+
+  let {
+    fileUrl = '',
+    fileName = 'Contract_Document.pdf',
+    totalPages = 1,
+    currentPage = $bindable(1),
+    stamps = [],
+    onpagechange,
+    ondownload,
+    onprint,
+    class: className = '',
+  }: Props = $props();
+
+  let zoomLevel = $state(100);
+  let rotation = $state(0);
+  let isFullscreen = $state(false);
+
+  function prevPage() {
+    if (currentPage > 1) {
+      currentPage -= 1;
+      onpagechange?.(currentPage);
+    }
+  }
+
+  function nextPage() {
+    if (currentPage < totalPages) {
+      currentPage += 1;
+      onpagechange?.(currentPage);
+    }
+  }
+
+  function zoomIn() {
+    zoomLevel = Math.min(zoomLevel + 25, 250);
+  }
+
+  function zoomOut() {
+    zoomLevel = Math.max(zoomLevel - 25, 50);
+  }
+
+  function rotate() {
+    rotation = (rotation + 90) % 360;
+  }
+
+  function handleDownload() {
+    if (ondownload) {
+      ondownload();
+      return;
+    }
+    if (fileUrl) {
+      const a = document.createElement('a');
+      a.href = fileUrl;
+      a.download = fileName;
+      a.click();
+    }
+  }
+
+  function handlePrint() {
+    if (onprint) {
+      onprint();
+    } else {
+      window.print();
+    }
+  }
+
+  const pageStamps = $derived(
+    stamps.filter((s) => s.page === currentPage)
+  );
+
+  function getStampVariant(status?: string) {
+    switch (status) {
+      case 'approved':
+        return 'bg-success/15 text-success border-success/30';
+      case 'rejected':
+        return 'bg-destructive/15 text-destructive border-destructive/30';
+      case 'confidential':
+        return 'bg-warning/15 text-warning border-warning/30';
+      default:
+        return 'bg-primary/15 text-primary border-primary/30';
+    }
+  }
+</script>
+
+<div
+  class={cn(
+    'flex flex-col rounded-xl border border-border bg-card shadow-xs text-xs overflow-hidden transition-all',
+    isFullscreen ? 'fixed inset-4 z-50 shadow-2xl' : 'min-h-[500px]',
+    className
+  )}
+>
+  <!-- Toolbar Header -->
+  <div class="flex flex-wrap items-center justify-between gap-2 p-3 bg-muted/30 border-b border-border/60">
+    <!-- File Title -->
+    <div class="flex items-center gap-2 font-medium text-foreground truncate max-w-64">
+      <FileText class="h-4 w-4 text-primary shrink-0" />
+      <span class="truncate">{fileName}</span>
+    </div>
+
+    <!-- Paging Controls -->
+    <div class="flex items-center gap-1.5">
+      <Button
+        variant="ghost"
+        size="sm"
+        class="h-7 w-7 p-0"
+        disabled={currentPage <= 1}
+        onclick={prevPage}
+        title="Previous Page"
+      >
+        <ChevronLeft class="h-4 w-4" />
+      </Button>
+
+      <div class="flex items-center gap-1 font-mono text-[11px] text-muted-foreground px-1">
+        <span class="font-semibold text-foreground">{currentPage}</span>
+        <span>/</span>
+        <span>{totalPages}</span>
+      </div>
+
+      <Button
+        variant="ghost"
+        size="sm"
+        class="h-7 w-7 p-0"
+        disabled={currentPage >= totalPages}
+        onclick={nextPage}
+        title="Next Page"
+      >
+        <ChevronRight class="h-4 w-4" />
+      </Button>
+    </div>
+
+    <!-- Zoom & Rotate Actions -->
+    <div class="flex items-center gap-1">
+      <Button variant="ghost" size="sm" class="h-7 w-7 p-0" onclick={zoomOut} title="Zoom Out">
+        <ZoomOut class="h-3.5 w-3.5" />
+      </Button>
+
+      <span class="font-mono text-[11px] text-muted-foreground w-12 text-center">{zoomLevel}%</span>
+
+      <Button variant="ghost" size="sm" class="h-7 w-7 p-0" onclick={zoomIn} title="Zoom In">
+        <ZoomIn class="h-3.5 w-3.5" />
+      </Button>
+
+      <Button variant="ghost" size="sm" class="h-7 w-7 p-0" onclick={rotate} title="Rotate 90°">
+        <RotateCw class="h-3.5 w-3.5" />
+      </Button>
+
+      <Button
+        variant="ghost"
+        size="sm"
+        class="h-7 w-7 p-0"
+        onclick={() => { isFullscreen = !isFullscreen; }}
+        title={isFullscreen ? 'Exit Fullscreen' : 'Fullscreen'}
+      >
+        <Maximize2 class="h-3.5 w-3.5" />
+      </Button>
+    </div>
+
+    <!-- Export & Print -->
+    <div class="flex items-center gap-1.5">
+      <Button variant="outline" size="sm" class="h-7 text-xs gap-1" onclick={handlePrint}>
+        <Printer class="h-3.5 w-3.5" />
+        Print
+      </Button>
+
+      <Button size="sm" class="h-7 text-xs gap-1" onclick={handleDownload}>
+        <Download class="h-3.5 w-3.5" />
+        Download
+      </Button>
+    </div>
+  </div>
+
+  <!-- Document Viewport -->
+  <div class="flex-1 overflow-auto bg-muted/40 p-6 flex items-center justify-center min-h-[400px]">
+    <div
+      class="relative bg-card rounded-lg shadow-md border border-border/80 transition-transform duration-200 overflow-hidden"
+      style={`transform: scale(${zoomLevel / 100}) rotate(${rotation}deg); transform-origin: center center; width: 595px; min-height: 842px;`}
+    >
+      {#if fileUrl}
+        <iframe
+          src={fileUrl}
+          title={fileName}
+          class="w-full h-[842px] border-0"
+        ></iframe>
+      {:else}
+        <!-- Simulated Document Paper -->
+        <div class="p-12 space-y-6 text-foreground">
+          <div class="border-b border-border/60 pb-4 flex justify-between items-start">
+            <div>
+              <h2 class="text-base font-bold tracking-tight">{fileName.replace(/\.[^/.]+$/, '')}</h2>
+              <p class="text-[11px] text-muted-foreground">Document Sheet Reference • Page {currentPage}</p>
+            </div>
+            <Badge variant="outline" class="font-mono text-[10px]">P.{currentPage}</Badge>
+          </div>
+
+          <div class="space-y-3 text-muted-foreground leading-relaxed text-xs">
+            <p>This is a rendered document preview surface. In production, provide a valid PDF / image URL via the <code>fileUrl</code> prop to stream direct binary pages.</p>
+            <p>The document supports electronic stamps, digital approval watermarks, interactive zooming, rotation and multi-page flipping.</p>
+          </div>
+
+          <div class="my-8 p-4 rounded-lg bg-muted/30 border border-border/60 space-y-2">
+            <div class="font-semibold text-foreground">Terms & Conditions of Execution</div>
+            <div class="text-[11px] text-muted-foreground">All parties acknowledge the contractual stipulations herein outlined and agreed upon via authenticated electronic signatures.</div>
+          </div>
+        </div>
+      {/if}
+
+      <!-- Electronic Stamp Overlays -->
+      {#each pageStamps as stamp (stamp.id)}
+        <div
+          class={cn(
+            'absolute z-20 px-3 py-1.5 rounded-md border-2 font-bold text-xs uppercase tracking-wider shadow-sm rotate-[-12deg] pointer-events-none select-none',
+            getStampVariant(stamp.status)
+          )}
+          style={`left: ${stamp.x}%; top: ${stamp.y}%;`}
+        >
+          {stamp.text}
+        </div>
+      {/each}
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,22 @@
+export interface DocumentStamp {
+    id: string;
+    text: string;
+    page: number;
+    x: number;
+    y: number;
+    status?: 'approved' | 'rejected' | 'confidential' | 'reviewed';
+}
+interface Props {
+    fileUrl?: string;
+    fileName?: string;
+    totalPages?: number;
+    currentPage?: number;
+    stamps?: DocumentStamp[];
+    onpagechange?: (page: number) => void;
+    ondownload?: () => void;
+    onprint?: () => void;
+    class?: string;
+}
+declare const PdfDocumentViewer: import("svelte").Component<Props, {}, "currentPage">;
+type PdfDocumentViewer = ReturnType<typeof PdfDocumentViewer>;
+export default PdfDocumentViewer;