@svadmin/lite 0.7.0 → 0.8.1

package/dist/components/LiteMediaLibraryModal.svelte

@@ -0,0 +1,110 @@
+<script lang="ts">
+  interface LiteMediaItem {
+    id: string;
+    name: string;
+    url: string;
+    size?: string;
+    category?: string;
+  }
+
+  interface Props {
+    title?: string;
+    multiple?: boolean;
+    mediaItems?: LiteMediaItem[];
+    action?: string;
+    method?: 'get' | 'post' | 'dialog' | 'GET' | 'POST' | 'DIALOG' | null;
+  }
+
+  let {
+    title = 'Media Library',
+    multiple = false,
+    mediaItems = [],
+    action = '',
+    method = 'POST',
+  }: Props = $props();
+</script>
+
+<div class="lite-media-library-card">
+  <div class="lite-media-header">
+    <strong>{title}</strong>
+  </div>
+
+  <form {action} {method} enctype="multipart/form-data">
+    <!-- Upload Section -->
+    <div class="lite-media-upload-row">
+      <label for="media_upload_input" class="lite-label">Upload New Media:</label>
+      <input id="media_upload_input" type="file" name="files" multiple={multiple} class="lite-file-input" />
+      <button type="submit" name="_media_action" value="upload" class="lite-btn lite-btn-sm lite-btn-outline" style="margin-left: 8px;">
+        Upload File
+      </button>
+    </div>
+
+    <!-- Media Table List -->
+    <table class="lite-table">
+      <thead>
+        <tr>
+          <th style="width: 40px;">Select</th>
+          <th>File Name</th>
+          <th>Category</th>
+          <th>Size</th>
+          <th>Preview</th>
+        </tr>
+      </thead>
+      <tbody>
+        {#each mediaItems as item (item.id)}
+          <tr>
+            <td style="text-align: center;">
+              {#if multiple}
+                <input type="checkbox" name="selectedUrls" value={item.url} />
+              {:else}
+                <input type="radio" name="selectedUrls" value={item.url} />
+              {/if}
+            </td>
+            <td><strong>{item.name}</strong></td>
+            <td>{item.category ?? 'General'}</td>
+            <td>{item.size ?? '—'}</td>
+            <td><a href={item.url} target="_blank" rel="noreferrer" class="lite-link">View</a></td>
+          </tr>
+        {/each}
+        {#if mediaItems.length === 0}
+          <tr>
+            <td colspan="5" style="text-align: center; color: #94a3b8; padding: 24px;">No media files available</td>
+          </tr>
+        {/if}
+      </tbody>
+    </table>
+
+    <div class="lite-media-footer">
+      <button type="submit" name="_media_action" value="select" class="lite-btn lite-btn-primary lite-btn-sm">
+        Confirm Selection
+      </button>
+    </div>
+  </form>
+</div>
+
+<style>
+  .lite-media-library-card {
+    background: #ffffff;
+    border: 1px solid #cbd5e1;
+    border-radius: 6px;
+    padding: 16px;
+    margin-bottom: 16px;
+  }
+  .lite-media-header {
+    padding-bottom: 10px;
+    border-bottom: 1px solid #e2e8f0;
+    margin-bottom: 12px;
+    font-size: 14px;
+  }
+  .lite-media-upload-row {
+    margin-bottom: 12px;
+    padding: 8px;
+    background: #f8fafc;
+    border-radius: 4px;
+  }
+  .lite-media-footer {
+    margin-top: 12px;
+    display: flex;
+    justify-content: flex-end;
+  }
+</style>

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

@@ -0,0 +1,17 @@
+interface LiteMediaItem {
+    id: string;
+    name: string;
+    url: string;
+    size?: string;
+    category?: string;
+}
+interface Props {
+    title?: string;
+    multiple?: boolean;
+    mediaItems?: LiteMediaItem[];
+    action?: string;
+    method?: 'get' | 'post' | 'dialog' | 'GET' | 'POST' | 'DIALOG' | null;
+}
+declare const LiteMediaLibraryModal: import("svelte").Component<Props, {}, "">;
+type LiteMediaLibraryModal = ReturnType<typeof LiteMediaLibraryModal>;
+export default LiteMediaLibraryModal;

package/dist/components/LiteMentionsInput.svelte

@@ -0,0 +1,98 @@
+<script lang="ts">
+  export interface MentionOption {
+    id: string;
+    label: string;
+    type?: 'user' | 'tag' | 'entity';
+    subtitle?: string;
+  }
+
+  interface Props {
+    name?: string;
+    value?: string;
+    placeholder?: string;
+    users?: MentionOption[];
+    tags?: MentionOption[];
+    rows?: number;
+    disabled?: boolean;
+    class?: string;
+  }
+
+  let {
+    name = 'content',
+    value = '',
+    placeholder = 'Type @ or # to mention...',
+    users = [],
+    tags = [],
+    rows = 3,
+    disabled = false,
+    class: className = '',
+  }: Props = $props();
+</script>
+
+<div class="sv-lite-mentions {className}">
+  <textarea
+    {name}
+    {value}
+    {placeholder}
+    {rows}
+    {disabled}
+    class="sv-lite-textarea"
+  ></textarea>
+
+  {#if users.length > 0 || tags.length > 0}
+    <div class="sv-lite-mentions-hints">
+      <span class="sv-lite-hints-title">Quick Mentions:</span>
+      {#each users as u (u.id)}
+        <span class="sv-lite-mention-badge">@{u.label}</span>
+      {/each}
+      {#each tags as t (t.id)}
+        <span class="sv-lite-mention-badge sv-lite-tag">#{t.label}</span>
+      {/each}
+    </div>
+  {/if}
+</div>
+
+<style>
+  .sv-lite-mentions {
+    display: block;
+    width: 100%;
+    font-size: 12px;
+  }
+  .sv-lite-textarea {
+    width: 100%;
+    padding: 8px;
+    border: 1px solid #cbd5e1;
+    border-radius: 4px;
+    font-size: 12px;
+    font-family: inherit;
+    box-sizing: border-box;
+    background-color: #ffffff;
+    color: #0f172a;
+  }
+  .sv-lite-mentions-hints {
+    margin-top: 6px;
+    padding: 4px 6px;
+    background-color: #f8fafc;
+    border: 1px solid #e2e8f0;
+    border-radius: 4px;
+  }
+  .sv-lite-hints-title {
+    font-weight: 600;
+    color: #64748b;
+    margin-right: 6px;
+  }
+  .sv-lite-mention-badge {
+    display: inline-block;
+    padding: 2px 6px;
+    margin-right: 4px;
+    margin-bottom: 2px;
+    background-color: #e0e7ff;
+    color: #4338ca;
+    border-radius: 3px;
+    font-size: 11px;
+  }
+  .sv-lite-tag {
+    background-color: #f1f5f9;
+    color: #475569;
+  }
+</style>

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

@@ -0,0 +1,19 @@
+export interface MentionOption {
+    id: string;
+    label: string;
+    type?: 'user' | 'tag' | 'entity';
+    subtitle?: string;
+}
+interface Props {
+    name?: string;
+    value?: string;
+    placeholder?: string;
+    users?: MentionOption[];
+    tags?: MentionOption[];
+    rows?: number;
+    disabled?: boolean;
+    class?: string;
+}
+declare const LiteMentionsInput: import("svelte").Component<Props, {}, "">;
+type LiteMentionsInput = ReturnType<typeof LiteMentionsInput>;
+export default LiteMentionsInput;

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;