@svadmin/lite 0.5.0 → 0.7.0

package/dist/components/LiteTransfer.svelte

@@ -0,0 +1,185 @@
+<script lang="ts">
+  import { t } from '@svadmin/core/i18n';
+
+  export interface TransferItem {
+    key: string | number;
+    title: string;
+    description?: string;
+    disabled?: boolean;
+  }
+
+  interface Props {
+    dataSource?: TransferItem[];
+    targetKeys?: (string | number)[];
+    titles?: [string, string];
+    name?: string;
+    disabled?: boolean;
+    label?: string;
+    description?: string;
+  }
+
+  let {
+    dataSource = [],
+    targetKeys = [],
+    titles = ['Available', 'Selected'],
+    name = 'targetKeys',
+    disabled = false,
+    label,
+    description,
+  }: Props = $props();
+
+  const targetKeySet = $derived(new Set(targetKeys.map(String)));
+  const sourceItems = $derived(dataSource.filter((item) => !targetKeySet.has(String(item.key))));
+  const targetItems = $derived(dataSource.filter((item) => targetKeySet.has(String(item.key))));
+</script>
+
+<div class="lite-transfer-container lite-form-group">
+  {#if label}
+    <span class="lite-label">{label}</span>
+  {/if}
+  {#if description}
+    <p class="lite-help-text">{description}</p>
+  {/if}
+
+  <div class="lite-transfer-boxes">
+    <!-- Source Box -->
+    <div class="lite-transfer-panel">
+      <div class="lite-transfer-header">
+        <strong>{titles[0]}</strong>
+        <span class="lite-badge">{sourceItems.length}</span>
+      </div>
+      <div class="lite-transfer-body">
+        {#if sourceItems.length === 0}
+          <div class="lite-transfer-empty">{t('common.empty') || 'No items'}</div>
+        {:else}
+          {#each sourceItems as item (item.key)}
+            <label class="lite-transfer-item">
+              <input
+                type="checkbox"
+                name="_transfer_source_keys"
+                value={String(item.key)}
+                disabled={disabled || item.disabled}
+              />
+              <span class="lite-transfer-item-title">{item.title}</span>
+            </label>
+          {/each}
+        {/if}
+      </div>
+    </div>
+
+    <!-- Move Actions -->
+    <div class="lite-transfer-operations">
+      <button
+        type="submit"
+        name="_action"
+        value="transfer_to_target"
+        class="lite-btn lite-btn-sm lite-btn-primary"
+        {disabled}
+        title="Move selected right"
+      >
+        →
+      </button>
+      <button
+        type="submit"
+        name="_action"
+        value="transfer_to_source"
+        class="lite-btn lite-btn-sm"
+        {disabled}
+        title="Move selected left"
+      >
+        ←
+      </button>
+    </div>
+
+    <!-- Target Box -->
+    <div class="lite-transfer-panel">
+      <div class="lite-transfer-header">
+        <strong>{titles[1]}</strong>
+        <span class="lite-badge lite-badge-indigo">{targetItems.length}</span>
+      </div>
+      <div class="lite-transfer-body">
+        {#if targetItems.length === 0}
+          <div class="lite-transfer-empty">{t('common.empty') || 'No items selected'}</div>
+        {:else}
+          {#each targetItems as item (item.key)}
+            <label class="lite-transfer-item">
+              <input
+                type="checkbox"
+                name="_transfer_target_keys"
+                value={String(item.key)}
+                disabled={disabled || item.disabled}
+              />
+              <input type="hidden" {name} value={String(item.key)} />
+              <span class="lite-transfer-item-title">{item.title}</span>
+            </label>
+          {/each}
+        {/if}
+      </div>
+    </div>
+  </div>
+</div>
+
+<style>
+  .lite-transfer-container {
+    margin-bottom: 16px;
+  }
+  .lite-transfer-boxes {
+    display: flex;
+    align-items: center;
+  }
+  .lite-transfer-panel {
+    flex: 1;
+    border: 1px solid #cbd5e1;
+    border-radius: 6px;
+    background: #ffffff;
+    min-height: 180px;
+    max-height: 280px;
+    display: flex;
+    flex-direction: column;
+  }
+  .lite-transfer-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 8px 12px;
+    background: #f8fafc;
+    border-bottom: 1px solid #e2e8f0;
+    font-size: 13px;
+  }
+  .lite-transfer-body {
+    flex: 1;
+    overflow-y: auto;
+    padding: 6px;
+  }
+  .lite-transfer-item {
+    display: flex;
+    align-items: center;
+    padding: 6px 8px;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 13px;
+  }
+  .lite-transfer-item:hover {
+    background: #f1f5f9;
+  }
+  .lite-transfer-item input {
+    margin-right: 8px;
+  }
+  .lite-transfer-operations {
+    display: flex;
+    flex-direction: column;
+    margin: 0 12px;
+  }
+  .lite-transfer-operations .lite-btn:first-child {
+    margin-bottom: 6px;
+  }
+  .lite-transfer-boxes > .lite-transfer-panel:first-child {
+    margin-right: 0;
+  }
+  .lite-transfer-empty {
+    text-align: center;
+    padding: 30px 10px;
+    color: #94a3b8;
+    font-size: 12px;
+  }
+</style>

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

@@ -0,0 +1,18 @@
+export interface TransferItem {
+    key: string | number;
+    title: string;
+    description?: string;
+    disabled?: boolean;
+}
+interface Props {
+    dataSource?: TransferItem[];
+    targetKeys?: (string | number)[];
+    titles?: [string, string];
+    name?: string;
+    disabled?: boolean;
+    label?: string;
+    description?: string;
+}
+declare const LiteTransfer: import("svelte").Component<Props, {}, "">;
+type LiteTransfer = ReturnType<typeof LiteTransfer>;
+export default LiteTransfer;

package/dist/components/compatibility/LiteCapabilityBoundary.svelte

@@ -0,0 +1,51 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import type { LiteCapability, LiteFallbackKind } from '../../compatibility';
+  import { detectLiteCapabilities, resolveLiteCompatibility } from '../../compatibility';
+
+  interface Props {
+    capability: LiteCapability;
+    title?: string;
+    description?: string;
+    fallback?: Snippet;
+    children?: Snippet;
+    enhanced?: boolean;
+  }
+
+  let { capability, title, description, fallback, children, enhanced = false }: Props = $props();
+  const resolution = $derived(resolveLiteCompatibility(capability, {
+    ...detectLiteCapabilities(null),
+    [capability]: enhanced,
+  }));
+  const kindLabel: Record<LiteFallbackKind, string> = {
+    'structured-data': 'Structured view',
+    'static-snapshot': 'Static snapshot',
+    'server-action': 'Server action',
+    'server-refresh': 'Server refresh',
+    'server-pagination': 'Server pagination',
+    'standard-upload': 'Standard upload',
+    'manual-copy': 'Manual copy',
+    'server-storage': 'Server storage',
+    'in-page-status': 'In-page status',
+    download: 'Download',
+  };
+</script>
+
+<section class="lite-compatibility" data-lite-capability={capability} data-lite-mode={resolution.mode}>
+  <div class="lite-compatibility-header">
+    <div>
+      <h2>{title ?? capability}</h2>
+      {#if description}<p>{description}</p>{/if}
+    </div>
+    <span class="lite-badge lite-badge-info">{kindLabel[resolution.fallbackKind]}</span>
+  </div>
+  <div class="lite-compatibility-body">
+    {#if resolution.mode === 'enhanced' && children}
+      {@render children()}
+    {:else if fallback}
+      {@render fallback()}
+    {:else}
+      <p>{resolution.fallback}</p>
+    {/if}
+  </div>
+</section>

package/dist/components/compatibility/LiteCapabilityBoundary.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { Snippet } from 'svelte';
+import type { LiteCapability } from '../../compatibility';
+interface Props {
+    capability: LiteCapability;
+    title?: string;
+    description?: string;
+    fallback?: Snippet;
+    children?: Snippet;
+    enhanced?: boolean;
+}
+declare const LiteCapabilityBoundary: import("svelte").Component<Props, {}, "">;
+type LiteCapabilityBoundary = ReturnType<typeof LiteCapabilityBoundary>;
+export default LiteCapabilityBoundary;

package/dist/components/compatibility/LiteClipboardFallback.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  interface Props {
+    value: string;
+    label?: string;
+    rows?: number;
+  }
+
+  let { value, label = 'Copy value', rows = 4 }: Props = $props();
+  const controlId = $props.id();
+</script>
+
+<div class="lite-form-group lite-clipboard-fallback">
+  <label for={controlId}>{label}</label>
+  <textarea id={controlId} class="lite-input" readonly {rows}>{value}</textarea>
+  <p class="lite-muted">Select the text and use the browser command for manual copy.</p>
+</div>

package/dist/components/compatibility/LiteClipboardFallback.svelte.d.ts

@@ -0,0 +1,8 @@
+interface Props {
+    value: string;
+    label?: string;
+    rows?: number;
+}
+declare const LiteClipboardFallback: import("svelte").Component<Props, {}, "">;
+type LiteClipboardFallback = ReturnType<typeof LiteClipboardFallback>;
+export default LiteClipboardFallback;

package/dist/components/compatibility/LiteComputeFallback.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">
+  import { toSafeHref } from '../../security';
+
+  interface Props {
+    title?: string;
+    description?: string;
+    action: string;
+    actionLabel?: string;
+    status?: string;
+    engine?: string;
+    values?: Record<string, string | number | boolean>;
+    downloadHref?: string;
+    downloadLabel?: string;
+  }
+
+  let {
+    title = 'Server computation',
+    description = 'This task runs through a normal server request when browser compute is unavailable.',
+    action,
+    actionLabel = 'Run task',
+    status = 'Ready',
+    engine = 'Server',
+    values = {},
+    downloadHref,
+    downloadLabel = 'Download result',
+  }: Props = $props();
+
+  const safeAction = $derived(toSafeHref(action));
+  const safeDownloadHref = $derived(toSafeHref(downloadHref));
+</script>
+
+<section class="lite-card lite-compute-fallback">
+  <div class="lite-section-header">
+    <div><h2>{title}</h2><p>{description}</p></div>
+    <span class="lite-badge">{engine}: {status}</span>
+  </div>
+  <div class="lite-inline-actions">
+    {#if safeAction}
+      <form method="POST" action={safeAction}>
+        {#each Object.entries(values) as [name, value] (name)}
+          <input type="hidden" {name} value={String(value)} />
+        {/each}
+        <button class="lite-btn lite-btn-primary" type="submit">{actionLabel}</button>
+      </form>
+    {:else}
+      <button class="lite-btn lite-btn-primary" type="button" disabled>{actionLabel}</button>
+    {/if}
+    {#if safeDownloadHref}<a class="lite-btn" href={safeDownloadHref}>{downloadLabel}</a>{/if}
+  </div>
+</section>

package/dist/components/compatibility/LiteComputeFallback.svelte.d.ts

@@ -0,0 +1,14 @@
+interface Props {
+    title?: string;
+    description?: string;
+    action: string;
+    actionLabel?: string;
+    status?: string;
+    engine?: string;
+    values?: Record<string, string | number | boolean>;
+    downloadHref?: string;
+    downloadLabel?: string;
+}
+declare const LiteComputeFallback: import("svelte").Component<Props, {}, "">;
+type LiteComputeFallback = ReturnType<typeof LiteComputeFallback>;
+export default LiteComputeFallback;

package/dist/components/compatibility/LiteDirectoryUpload.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+  interface Props {
+    name?: string;
+    label?: string;
+    accept?: string;
+    disabled?: boolean;
+    zipName?: string;
+    helpText?: string;
+  }
+
+  let {
+    name = 'files',
+    label = 'Files or folder',
+    accept,
+    disabled = false,
+    zipName = 'archive',
+    helpText = 'Select a folder where supported, choose multiple files, or upload a ZIP archive.',
+  }: Props = $props();
+
+  const controlId = $props.id();
+  const directoryAttributes = { webkitdirectory: true, directory: true };
+</script>
+
+<fieldset class="lite-directory-upload">
+  <legend>{label}</legend>
+  <p class="lite-muted">{helpText}</p>
+  <div class="lite-form-group">
+    <label for={controlId}>{label}</label>
+    <input
+      id={controlId}
+      class="lite-input"
+      type="file"
+      {name}
+      {accept}
+      {disabled}
+      multiple
+      {...directoryAttributes}
+    />
+  </div>
+  <div class="lite-form-group">
+    <label for={`${controlId}-zip`}>ZIP archive fallback</label>
+    <input id={`${controlId}-zip`} class="lite-input" type="file" name={zipName} accept=".zip,application/zip" {disabled} />
+  </div>
+</fieldset>

package/dist/components/compatibility/LiteDirectoryUpload.svelte.d.ts

@@ -0,0 +1,11 @@
+interface Props {
+    name?: string;
+    label?: string;
+    accept?: string;
+    disabled?: boolean;
+    zipName?: string;
+    helpText?: string;
+}
+declare const LiteDirectoryUpload: import("svelte").Component<Props, {}, "">;
+type LiteDirectoryUpload = ReturnType<typeof LiteDirectoryUpload>;
+export default LiteDirectoryUpload;

package/dist/components/compatibility/LiteOrderedList.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+  import { toSafeHref } from '../../security';
+
+  interface Item {
+    id: string | number;
+    label: string;
+    description?: string;
+  }
+
+  interface Props {
+    items: Item[];
+    action: string;
+    title?: string;
+    itemName?: string;
+  }
+
+  let { items, action, title = 'Ordered items', itemName = 'itemId' }: Props = $props();
+  const safeAction = $derived(toSafeHref(action));
+</script>
+
+<section class="lite-card lite-ordered-list">
+  <h2>{title}</h2>
+  <ol>
+    {#each items as item, index (item.id)}
+      <li>
+        <div><strong>{item.label}</strong>{#if item.description}<span>{item.description}</span>{/if}</div>
+        <div class="lite-inline-actions">
+          {#if safeAction}
+            <form method="POST" action={safeAction}>
+              <input type="hidden" name={itemName} value={String(item.id)} />
+              <input type="hidden" name="direction" value="up" />
+              <button class="lite-btn lite-btn-sm" type="submit" disabled={index === 0}>Move up</button>
+            </form>
+            <form method="POST" action={safeAction}>
+              <input type="hidden" name={itemName} value={String(item.id)} />
+              <input type="hidden" name="direction" value="down" />
+              <button class="lite-btn lite-btn-sm" type="submit" disabled={index === items.length - 1}>Move down</button>
+            </form>
+          {:else}
+            <button class="lite-btn lite-btn-sm" type="button" disabled>Move up</button>
+            <button class="lite-btn lite-btn-sm" type="button" disabled>Move down</button>
+          {/if}
+        </div>
+      </li>
+    {/each}
+  </ol>
+</section>

package/dist/components/compatibility/LiteOrderedList.svelte.d.ts

@@ -0,0 +1,14 @@
+interface Item {
+    id: string | number;
+    label: string;
+    description?: string;
+}
+interface Props {
+    items: Item[];
+    action: string;
+    title?: string;
+    itemName?: string;
+}
+declare const LiteOrderedList: import("svelte").Component<Props, {}, "">;
+type LiteOrderedList = ReturnType<typeof LiteOrderedList>;
+export default LiteOrderedList;

package/dist/components/compatibility/LiteRealtimeStatus.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+  import { toSafeHref } from '../../security';
+
+  interface Props {
+    title?: string;
+    status?: string;
+    lastUpdated?: string;
+    refreshHref?: string;
+    refreshLabel?: string;
+    refreshSeconds?: number;
+  }
+
+  let {
+    title = 'Live status',
+    status = 'Snapshot',
+    lastUpdated,
+    refreshHref = '',
+    refreshLabel = 'Refresh status',
+    refreshSeconds = 0,
+  }: Props = $props();
+
+  const safeRefreshSeconds = $derived(
+    Number.isFinite(refreshSeconds) && refreshSeconds >= 5
+      ? Math.floor(refreshSeconds)
+      : 0,
+  );
+  const safeRefreshHref = $derived(toSafeHref(refreshHref));
+</script>
+
+<svelte:head>
+  {#if safeRefreshSeconds > 0 && safeRefreshHref}
+    <meta http-equiv="refresh" content={`${safeRefreshSeconds}; url=${safeRefreshHref}`} />
+  {/if}
+</svelte:head>
+
+<section class="lite-realtime-status" aria-live="polite">
+  <div>
+    <strong>{title}</strong>
+    <span class="lite-badge lite-badge-info">{status}</span>
+    {#if lastUpdated}<span class="lite-muted">Updated {lastUpdated}</span>{/if}
+  </div>
+  {#if safeRefreshHref}<a href={safeRefreshHref} class="lite-btn lite-btn-sm">{refreshLabel}</a>{/if}
+</section>

package/dist/components/compatibility/LiteRealtimeStatus.svelte.d.ts

@@ -0,0 +1,11 @@
+interface Props {
+    title?: string;
+    status?: string;
+    lastUpdated?: string;
+    refreshHref?: string;
+    refreshLabel?: string;
+    refreshSeconds?: number;
+}
+declare const LiteRealtimeStatus: import("svelte").Component<Props, {}, "">;
+type LiteRealtimeStatus = ReturnType<typeof LiteRealtimeStatus>;
+export default LiteRealtimeStatus;

package/dist/components/compatibility/LiteVisualFallback.svelte

@@ -0,0 +1,80 @@
+<script lang="ts">
+  import { toSafeHref } from '../../security';
+
+  interface Column {
+    key: string;
+    label: string;
+  }
+
+  interface Props {
+    title: string;
+    description?: string;
+    snapshotSrc?: string;
+    snapshotAlt?: string;
+    columns?: Column[];
+    rows?: Record<string, unknown>[];
+    downloadHref?: string;
+    downloadLabel?: string;
+    emptyLabel?: string;
+  }
+
+  let {
+    title,
+    description,
+    snapshotSrc,
+    snapshotAlt = '',
+    columns = [],
+    rows = [],
+    downloadHref,
+    downloadLabel = 'Download source data',
+    emptyLabel = 'No structured data is available.',
+  }: Props = $props();
+
+  function displayValue(value: unknown): string {
+    if (value == null) return '-';
+    if (Array.isArray(value)) return value.map(String).join(', ');
+    if (typeof value === 'object') {
+      try {
+        return JSON.stringify(value);
+      } catch (error) {
+        if (error instanceof TypeError) return String(value);
+        throw error;
+      }
+    }
+    return String(value);
+  }
+
+  const safeSnapshotSrc = $derived(toSafeHref(snapshotSrc));
+  const safeDownloadHref = $derived(toSafeHref(downloadHref));
+</script>
+
+<section class="lite-card lite-visual-fallback">
+  <div class="lite-section-header">
+    <div>
+      <h2>{title}</h2>
+      {#if description}<p>{description}</p>{/if}
+    </div>
+    {#if safeDownloadHref}<a class="lite-btn lite-btn-sm" href={safeDownloadHref}>{downloadLabel}</a>{/if}
+  </div>
+
+  {#if safeSnapshotSrc}
+    <div class="lite-visual-snapshot">
+      <img src={safeSnapshotSrc} alt={snapshotAlt} />
+    </div>
+  {/if}
+
+  {#if columns.length > 0 && rows.length > 0}
+    <div class="lite-table-scroll">
+      <table class="lite-table">
+        <thead><tr>{#each columns as column (column.key)}<th>{column.label}</th>{/each}</tr></thead>
+        <tbody>
+          {#each rows as row, rowIndex (rowIndex)}
+            <tr>{#each columns as column (column.key)}<td>{displayValue(row[column.key])}</td>{/each}</tr>
+          {/each}
+        </tbody>
+      </table>
+    </div>
+  {:else if !safeSnapshotSrc}
+    <p class="lite-muted">{emptyLabel}</p>
+  {/if}
+</section>

package/dist/components/compatibility/LiteVisualFallback.svelte.d.ts

@@ -0,0 +1,18 @@
+interface Column {
+    key: string;
+    label: string;
+}
+interface Props {
+    title: string;
+    description?: string;
+    snapshotSrc?: string;
+    snapshotAlt?: string;
+    columns?: Column[];
+    rows?: Record<string, unknown>[];
+    downloadHref?: string;
+    downloadLabel?: string;
+    emptyLabel?: string;
+}
+declare const LiteVisualFallback: import("svelte").Component<Props, {}, "">;
+type LiteVisualFallback = ReturnType<typeof LiteVisualFallback>;
+export default LiteVisualFallback;

package/dist/components/compatibility/index.d.ts

@@ -0,0 +1,7 @@
+export { default as LiteCapabilityBoundary } from './LiteCapabilityBoundary.svelte';
+export { default as LiteClipboardFallback } from './LiteClipboardFallback.svelte';
+export { default as LiteComputeFallback } from './LiteComputeFallback.svelte';
+export { default as LiteDirectoryUpload } from './LiteDirectoryUpload.svelte';
+export { default as LiteOrderedList } from './LiteOrderedList.svelte';
+export { default as LiteRealtimeStatus } from './LiteRealtimeStatus.svelte';
+export { default as LiteVisualFallback } from './LiteVisualFallback.svelte';

package/dist/components/compatibility/index.js

@@ -0,0 +1,7 @@
+export { default as LiteCapabilityBoundary } from './LiteCapabilityBoundary.svelte';
+export { default as LiteClipboardFallback } from './LiteClipboardFallback.svelte';
+export { default as LiteComputeFallback } from './LiteComputeFallback.svelte';
+export { default as LiteDirectoryUpload } from './LiteDirectoryUpload.svelte';
+export { default as LiteOrderedList } from './LiteOrderedList.svelte';
+export { default as LiteRealtimeStatus } from './LiteRealtimeStatus.svelte';
+export { default as LiteVisualFallback } from './LiteVisualFallback.svelte';