@svadmin/lite 0.1.0 → 0.2.1

package/src/components/LitePermissionMatrix.svelte

@@ -0,0 +1,147 @@
+<script lang="ts">
+  /**
+   * LitePermissionMatrix — SSR-compatible permission matrix.
+   * Pure HTML table with checkbox inputs. No client-side JS required.
+   * Works with form POST actions for state changes.
+   */
+
+  interface LiteRole {
+    code: string;
+    name: string;
+  }
+
+  interface LiteResource {
+    code: string;
+    name: string;
+    section?: string;
+  }
+
+  interface LiteAction {
+    code: string;
+    name: string;
+  }
+
+  interface Props {
+    roles: LiteRole[];
+    resources: LiteResource[];
+    actions: LiteAction[];
+    /** Current permissions map: { "resource:action": true } */
+    permissions: Record<string, boolean>;
+    selectedRole?: string;
+    /** Form POST action URL */
+    actionUrl?: string;
+    disabled?: boolean;
+  }
+
+  let {
+    roles,
+    resources,
+    actions,
+    permissions,
+    selectedRole = roles[0]?.code || '',
+    actionUrl = '?/updatePermissions',
+    disabled = false,
+  }: Props = $props();
+
+  function isGranted(resource: string, action: string): boolean {
+    return permissions[`${resource}:${action}`] === true;
+  }
+</script>
+
+<div class="lite-permission-matrix">
+  <!-- Role Tabs -->
+  <div class="lite-role-tabs">
+    {#each roles as role}
+      <a
+        href="?role={role.code}"
+        class="lite-role-tab {selectedRole === role.code ? 'active' : ''}"
+      >
+        {role.name}
+      </a>
+    {/each}
+  </div>
+
+  <!-- Matrix Table -->
+  <form method="POST" action={actionUrl}>
+    <input type="hidden" name="role" value={selectedRole} />
+
+    <table class="lite-table" style="margin-top:0;">
+      <thead>
+        <tr>
+          <th style="width:200px;">Resource</th>
+          {#each actions as action}
+            <th style="text-align:center;">{action.name}</th>
+          {/each}
+        </tr>
+      </thead>
+      <tbody>
+        {#each resources as resource, i}
+          {#if resource.section && (i === 0 || resource.section !== resources[i-1].section)}
+            <tr>
+              <td colspan={actions.length + 1} style="background:#f1f5f9;font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:0.05em;color:#475569;">
+                {resource.section}
+              </td>
+            </tr>
+          {/if}
+          <tr>
+            <td><strong>{resource.name}</strong><br/><small style="color:#94a3b8;">{resource.code}</small></td>
+            {#each actions as action}
+              <td style="text-align:center;">
+                <input
+                  type="checkbox"
+                  name="perm_{resource.code}_{action.code}"
+                  checked={isGranted(resource.code, action.code)}
+                  {disabled}
+                  style="width:18px;height:18px;cursor:{disabled ? 'not-allowed' : 'pointer'};"
+                />
+              </td>
+            {/each}
+          </tr>
+        {/each}
+        {#if resources.length === 0}
+          <tr>
+            <td colspan={actions.length + 1} style="text-align:center;padding:24px;color:#94a3b8;">
+              No resources configured.
+            </td>
+          </tr>
+        {/if}
+      </tbody>
+    </table>
+
+    {#if !disabled}
+      <div style="margin-top:12px;text-align:right;">
+        <button type="submit" class="lite-btn lite-btn-primary">Save Permissions</button>
+      </div>
+    {/if}
+  </form>
+</div>
+
+<style>
+  .lite-role-tabs {
+    display: flex;
+    flex-wrap: wrap;
+    margin-bottom: 16px;
+    border-bottom: 2px solid #e2e8f0;
+    padding-bottom: 0;
+  }
+  .lite-role-tab {
+    padding: 8px 16px;
+    margin-right: 4px;
+    text-decoration: none;
+    color: #64748b;
+    font-size: 14px;
+    font-weight: 500;
+    border-bottom: 2px solid transparent;
+    margin-bottom: -2px;
+    transition: color 0.15s ease, border-color 0.15s ease;
+  }
+  .lite-role-tab:hover {
+    color: #0f172a;
+    text-decoration: none;
+  }
+  .lite-role-tab.active {
+    color: #4f46e5;
+    border-bottom-color: #4f46e5;
+    font-weight: 600;
+  }
+</style>

package/src/components/LiteShow.svelte

@@ -3,8 +3,9 @@
    * LiteShow — Detail/view page for a single record.
    * Renders field labels and values in a key-value layout.
    */
-  import type { ResourceDefinition, FieldDefinition } from '@svadmin/core';
+  import type { ResourceDefinition } from '@svadmin/core';
   import { t } from '@svadmin/core/i18n';
+  import LiteShowField from './LiteShowField.svelte';
 
   interface Props {
     record: Record<string, unknown>;
@@ -25,25 +26,6 @@
   const showFields = $derived(
     resource.fields.filter(f => f.showInShow !== false && f.showInList !== false)
   );
-
-  function formatValue(value: unknown, field: FieldDefinition): string {
-    if (value == null) return '—';
-    if (field.type === 'boolean') return value ? '✓' : '✗';
-    if (field.type === 'date') {
-      try { return new Date(value as string).toLocaleString(); } catch { return String(value); }
-    }
-    if (field.type === 'select' && field.options) {
-      const opt = field.options.find(o => o.value === value);
-      return opt?.label ?? String(value);
-    }
-    if (field.type === 'url') return String(value);
-    if (field.type === 'email') return String(value);
-    if (Array.isArray(value)) return value.join(', ');
-    if (typeof value === 'object') {
-      try { return JSON.stringify(value, null, 2); } catch { return String(value); }
-    }
-    return String(value);
-  }
 </script>
 
 <div class="lite-card">
@@ -70,24 +52,7 @@
             {field.label}
           </td>
           <td>
-            {#if field.type === 'boolean'}
-              <span class="lite-bool {value ? 'lite-bool-true' : ''}"></span>
-              {value ? '✓ Yes' : '✗ No'}
-            {:else if field.type === 'url' && value}
-              <a href={String(value)} target="_blank" rel="noopener">{value}</a>
-            {:else if field.type === 'email' && value}
-              <a href="mailto:{value}">{value}</a>
-            {:else if field.type === 'image' && value}
-              <img src={String(value)} alt={field.label} style="max-width:300px;max-height:200px;border-radius:4px;" />
-            {:else if field.type === 'tags' && Array.isArray(value)}
-              {#each value as tag}
-                <span class="lite-badge">{tag}</span>
-              {/each}
-            {:else if field.type === 'json' && value}
-              <pre style="margin:0;font-size:12px;background:#f8fafc;padding:8px;border-radius:4px;overflow-x:auto;">{typeof value === 'string' ? value : JSON.stringify(value, null, 2)}</pre>
-            {:else}
-              {formatValue(value, field)}
-            {/if}
+            <LiteShowField {field} {value} />
           </td>
         </tr>
       {/each}

package/src/components/LiteShowField.svelte

@@ -0,0 +1,51 @@
+<script lang="ts">
+  /**
+   * LiteShowField — SSR-compatible field renderer for detail views.
+   * Renders a single field value based on its type definition.
+   */
+  import type { FieldDefinition } from '@svadmin/core';
+
+  interface Props {
+    field: FieldDefinition;
+    value: unknown;
+  }
+
+  let { field, value }: Props = $props();
+
+  function formatValue(v: unknown, f: FieldDefinition): string {
+    if (v == null) return '—';
+    if (f.type === 'date') {
+      try { return new Date(v as string).toLocaleString(); } catch { return String(v); }
+    }
+    if (f.type === 'select' && f.options) {
+      const opt = f.options.find(o => o.value === v);
+      return opt?.label ?? String(v);
+    }
+    if (f.type === 'url') return String(v);
+    if (f.type === 'email') return String(v);
+    if (Array.isArray(v)) return v.join(', ');
+    if (typeof v === 'object') {
+      try { return JSON.stringify(v, null, 2); } catch { return String(v); }
+    }
+    return String(v);
+  }
+</script>
+
+{#if field.type === 'boolean'}
+  <span class="lite-bool {value ? 'lite-bool-true' : ''}"></span>
+  {value ? '✓ Yes' : '✗ No'}
+{:else if field.type === 'url' && value}
+  <a href={String(value)} target="_blank" rel="noopener">{value}</a>
+{:else if field.type === 'email' && value}
+  <a href="mailto:{value}">{value}</a>
+{:else if field.type === 'image' && value}
+  <img src={String(value)} alt={field.label} style="max-width:300px;max-height:200px;border-radius:6px;border:1px solid #e2e8f0;" />
+{:else if field.type === 'tags' && Array.isArray(value)}
+  {#each value as tag}
+    <span class="lite-badge">{tag}</span>
+  {/each}
+{:else if field.type === 'json' && value}
+  <pre style="margin:0;font-size:12px;background:#f8fafc;padding:12px;border-radius:6px;border:1px solid #e2e8f0;overflow-x:auto;">{typeof value === 'string' ? value : JSON.stringify(value, null, 2)}</pre>
+{:else}
+  {formatValue(value, field)}
+{/if}

package/src/components/LiteStatsCard.svelte

@@ -0,0 +1,70 @@
+<script lang="ts">
+  /**
+   * LiteStatsCard — SSR-compatible KPI statistics card.
+   * Pure HTML card with number, label, and optional trend indicator.
+   * No client-side JS required.
+   */
+
+  interface Props {
+    /** The main number/value to display */
+    value: string | number;
+    /** Label/title for the stat */
+    label: string;
+    /** Optional description text below the label */
+    description?: string;
+    /** Trend direction: 'up' shows green arrow, 'down' shows red arrow */
+    trend?: 'up' | 'down' | 'neutral';
+    /** Trend value text (e.g. "+12%", "-3%") */
+    trendValue?: string;
+    /** Optional icon character or HTML entity to display */
+    icon?: string;
+    /** Link to detail page */
+    href?: string;
+  }
+
+  let {
+    value,
+    label,
+    description,
+    trend,
+    trendValue,
+    icon,
+    href,
+  }: Props = $props();
+</script>
+
+{#if href}
+  <a href={href} class="lite-stats-card lite-card" style="text-decoration:none;display:block;">
+    {#if icon}
+      <div class="lite-stats-icon">{icon}</div>
+    {/if}
+    <div class="lite-stats-value">{value}</div>
+    <div class="lite-stats-label">{label}</div>
+    {#if trendValue}
+      <div class="lite-stats-trend lite-stats-trend-{trend || 'neutral'}">
+        {#if trend === 'up'}&#9650;{:else if trend === 'down'}&#9660;{:else}&#9644;{/if}
+        {trendValue}
+      </div>
+    {/if}
+    {#if description}
+      <div class="lite-stats-desc">{description}</div>
+    {/if}
+  </a>
+{:else}
+  <div class="lite-stats-card lite-card">
+    {#if icon}
+      <div class="lite-stats-icon">{icon}</div>
+    {/if}
+    <div class="lite-stats-value">{value}</div>
+    <div class="lite-stats-label">{label}</div>
+    {#if trendValue}
+      <div class="lite-stats-trend lite-stats-trend-{trend || 'neutral'}">
+        {#if trend === 'up'}&#9650;{:else if trend === 'down'}&#9660;{:else}&#9644;{/if}
+        {trendValue}
+      </div>
+    {/if}
+    {#if description}
+      <div class="lite-stats-desc">{description}</div>
+    {/if}
+  </div>
+{/if}

package/src/components/LiteTabs.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+  /**
+   * LiteTabs — SSR-compatible tab navigation.
+   * Uses simple <a> tags and flexbox. No JS required.
+   */
+
+  interface TabItem {
+    label: string;
+    value: string;
+    href: string;
+  }
+
+  interface Props {
+    items: TabItem[];
+    activeValue: string;
+  }
+
+  let { items, activeValue }: Props = $props();
+</script>
+
+<div class="lite-tabs">
+  {#each items as item}
+    <a href={item.href} class="lite-tab {activeValue === item.value ? 'active' : ''}">
+      {item.label}
+    </a>
+  {/each}
+</div>
+
+<style>
+  .lite-tabs {
+    display: flex;
+    flex-wrap: wrap;
+    border-bottom: 2px solid #e2e8f0;
+    margin-bottom: 24px;
+    padding-bottom: 0;
+  }
+  .lite-tab {
+    padding: 8px 16px;
+    margin-right: 4px;
+    font-size: 14px;
+    font-weight: 500;
+    color: #64748b;
+    border-bottom: 2px solid transparent;
+    margin-bottom: -2px;
+    text-decoration: none;
+    transition: color 0.15s ease, border-color 0.15s ease;
+  }
+  .lite-tab:hover {
+    color: #0f172a;
+    text-decoration: none;
+  }
+  .lite-tab.active {
+    color: #4f46e5;
+    border-bottom-color: #4f46e5;
+    font-weight: 600;
+  }
+</style>

package/src/components/advanced/LiteAutoSaveIndicator.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+  /**
+   * SSR AutoSaveIndicator — Degraded to a static status label.
+   * Without JS, there is no auto-save. This component simply renders
+   * the last known save status passed from the server.
+   */
+  interface Props {
+    status?: 'idle' | 'saved' | 'error';
+    message?: string;
+  }
+
+  let { status = 'idle', message }: Props = $props();
+
+  const statusConfig: Record<string, { icon: string; color: string; text: string }> = {
+    idle: { icon: '☁', color: '#64748b', text: 'All changes saved' },
+    saved: { icon: '✓', color: '#10b981', text: 'Saved' },
+    error: { icon: '✕', color: '#ef4444', text: 'Save failed' },
+  };
+
+  const cfg = $derived(statusConfig[status] ?? statusConfig.idle);
+</script>
+
+<span style="display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: {cfg.color};">
+  <span>{cfg.icon}</span>
+  <span>{message ?? cfg.text}</span>
+</span>

package/src/components/advanced/LiteDraggableHeader.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+  /**
+   * SSR DraggableHeader — Degraded to a static table header.
+   * Column dragging/resizing requires JS mouse/touch events.
+   * In lite mode, columns are rendered at natural widths.
+   * Sort is achieved via URL query parameters as in LiteTable.
+   */
+  import type { FieldDefinition } from '@svadmin/core';
+
+  interface Props {
+    fields: FieldDefinition[];
+    currentSort?: string;
+    currentOrder?: 'asc' | 'desc';
+  }
+
+  let { fields, currentSort, currentOrder = 'asc' }: Props = $props();
+</script>
+
+<tr>
+  {#each fields as field}
+    <th style="padding: 10px 12px; text-align: left; font-weight: 600; font-size: 13px; color: #475569; white-space: nowrap;">
+      {#if currentSort === field.key}
+        <a href="?sort={field.key}&order={currentOrder === 'asc' ? 'desc' : 'asc'}" style="color: #0f172a; text-decoration: none;">
+          {field.label} {currentOrder === 'asc' ? '↑' : '↓'}
+        </a>
+      {:else}
+        <a href="?sort={field.key}&order=asc" style="color: inherit; text-decoration: none;">
+          {field.label}
+        </a>
+      {/if}
+    </th>
+  {/each}
+</tr>

package/src/components/advanced/LiteDrawerForm.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+  /**
+   * SSR DrawerForm — Degraded to a dedicated page redirect.
+   * Side drawers require JS for sliding panel rendering. In lite mode,
+   * this component works identically to LiteModalForm: a plain link.
+   */
+  import type { ResourceDefinition } from '@svadmin/core';
+  import { t } from '@svadmin/core/i18n';
+
+  interface Props {
+    resource: ResourceDefinition;
+    mode?: 'create' | 'edit';
+    recordId?: string | number;
+    basePath?: string;
+    label?: string;
+  }
+
+  let {
+    resource,
+    mode = 'create',
+    recordId,
+    basePath = '/lite',
+    label,
+  }: Props = $props();
+
+  const href = $derived(
+    mode === 'create'
+      ? `${basePath}/${resource.name}/create`
+      : `${basePath}/${resource.name}/${recordId}/edit`
+  );
+
+  const buttonLabel = $derived(
+    label ??
+    (mode === 'create'
+      ? `${t('common.create') || 'Create'} ${resource.label || resource.name}`
+      : `${t('common.edit') || 'Edit'} ${resource.label || resource.name}`)
+  );
+</script>
+
+<a href={href} class="lite-btn lite-btn-outline">
+  {buttonLabel}
+</a>

package/src/components/advanced/LiteInlineEdit.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+  /**
+   * SSR InlineEdit — Degraded to a show-value + edit-link pattern.
+   * True inline editing requires JS for focus management, key events,
+   * and async save. In lite mode, we display the value as static text
+   * and provide a small "edit" link that navigates to the edit page.
+   */
+  import type { FieldDefinition } from '@svadmin/core';
+
+  interface Props {
+    field: FieldDefinition;
+    value: unknown;
+    editUrl?: string;
+  }
+
+  let { field, value, editUrl }: Props = $props();
+
+  const displayValue = $derived(
+    value == null ? '—' : String(value)
+  );
+</script>
+
+<span style="display: inline-flex; align-items: center; gap: 6px;">
+  <span>{displayValue}</span>
+  {#if editUrl}
+    <a
+      href={editUrl}
+      style="font-size: 11px; color: #6366f1; text-decoration: none;"
+      title="Edit {field.label}"
+    >✎</a>
+  {/if}
+</span>

package/src/components/advanced/LiteModalForm.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+  /**
+   * SSR ModalForm — Degraded to a dedicated page redirect.
+   * True modals require JS for overlay rendering. In lite mode,
+   * this component simply renders a link that navigates to the
+   * create/edit page for the resource (a full page load).
+   */
+  import type { ResourceDefinition } from '@svadmin/core';
+  import { t } from '@svadmin/core/i18n';
+
+  interface Props {
+    resource: ResourceDefinition;
+    mode?: 'create' | 'edit';
+    recordId?: string | number;
+    basePath?: string;
+    label?: string;
+  }
+
+  let {
+    resource,
+    mode = 'create',
+    recordId,
+    basePath = '/lite',
+    label,
+  }: Props = $props();
+
+  const href = $derived(
+    mode === 'create'
+      ? `${basePath}/${resource.name}/create`
+      : `${basePath}/${resource.name}/${recordId}/edit`
+  );
+
+  const buttonLabel = $derived(
+    label ??
+    (mode === 'create'
+      ? `${t('common.create') || 'Create'} ${resource.label || resource.name}`
+      : `${t('common.edit') || 'Edit'} ${resource.label || resource.name}`)
+  );
+</script>
+
+<!-- In lite mode, modals degrade to a full-page navigation -->
+<a href={href} class="lite-btn lite-btn-primary">
+  {buttonLabel}
+</a>

package/src/components/advanced/LiteToast.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+  /**
+   * SSR Toast — Degraded to a static alert banner.
+   * In SSR-only mode, toast notifications are rendered as inline banners
+   * by the server and included in the page HTML. They persist until the
+   * next full-page navigation (no auto-dismiss without JS).
+   */
+  interface Props {
+    message: string;
+    type?: 'success' | 'error' | 'warning' | 'info';
+    dismissUrl?: string;
+  }
+
+  let { message, type = 'info', dismissUrl }: Props = $props();
+
+  const colors: Record<string, { bg: string; border: string; text: string }> = {
+    success: { bg: '#ecfdf5', border: '#a7f3d0', text: '#065f46' },
+    error: { bg: '#fef2f2', border: '#fecaca', text: '#991b1b' },
+    warning: { bg: '#fffbeb', border: '#fed7aa', text: '#92400e' },
+    info: { bg: '#eff6ff', border: '#bfdbfe', text: '#1e40af' },
+  };
+
+  const style = $derived(colors[type] ?? colors.info);
+</script>
+
+<div
+  role="alert"
+  style="padding: 12px 16px; background: {style.bg}; border: 1px solid {style.border}; color: {style.text}; border-radius: 6px; margin-bottom: 16px; display: flex; justify-content: space-between; align-items: center; font-size: 14px;"
+>
+  <span>{message}</span>
+  {#if dismissUrl}
+    <a href={dismissUrl} style="color: {style.text}; text-decoration: none; font-weight: 600; margin-left: 12px;">✕</a>
+  {/if}
+</div>

package/src/components/advanced/LiteUndoableNotification.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+  /**
+   * SSR UndoableNotification — Degraded to a static banner with an undo link.
+   * Without JS there's no countdown timer. Instead, the server provides an
+   * undo URL that performs the reversal action. If the user navigates away,
+   * the action is considered confirmed.
+   */
+  interface Props {
+    message: string;
+    undoUrl: string;
+  }
+
+  let { message, undoUrl }: Props = $props();
+</script>
+
+<div
+  role="alert"
+  style="padding: 12px 16px; background: #fefce8; border: 1px solid #fde68a; color: #713f12; border-radius: 6px; margin-bottom: 16px; display: flex; justify-content: space-between; align-items: center; font-size: 14px;"
+>
+  <span>{message}</span>
+  <a
+    href={undoUrl}
+    style="color: #b45309; font-weight: 600; text-decoration: underline; margin-left: 16px; white-space: nowrap;"
+  >Undo</a>
+</div>

package/src/components/advanced/LiteVirtualTable.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+  /**
+   * SSR VirtualTable — Identical to LiteTable.
+   * Virtual scrolling (rendering only visible rows) requires JS.
+   * In lite mode, all rows are rendered server-side. For large datasets,
+   * rely on server-side pagination instead.
+   */
+  import type { ResourceDefinition } from '@svadmin/core';
+  import LiteTable from '../LiteTable.svelte';
+
+  interface Props {
+    records: Record<string, unknown>[];
+    resource: ResourceDefinition;
+    currentSort?: string;
+    currentOrder?: 'asc' | 'desc';
+    currentSearch?: string;
+    basePath?: string;
+    canEdit?: boolean;
+    canDelete?: boolean;
+  }
+
+  let {
+    records,
+    resource,
+    currentSort,
+    currentOrder = 'asc',
+    currentSearch,
+    basePath = '/lite',
+    canEdit = true,
+    canDelete = true,
+  }: Props = $props();
+</script>
+
+<!-- Virtual scrolling is not available without JS. All rows are rendered. -->
+<LiteTable
+  {records}
+  {resource}
+  {currentSort}
+  {currentOrder}
+  {currentSearch}
+  {basePath}
+  {canEdit}
+  {canDelete}
+/>

package/src/components/advanced/index.ts

@@ -0,0 +1,8 @@
+export { default as LiteToast } from './LiteToast.svelte';
+export { default as LiteUndoableNotification } from './LiteUndoableNotification.svelte';
+export { default as LiteModalForm } from './LiteModalForm.svelte';
+export { default as LiteDrawerForm } from './LiteDrawerForm.svelte';
+export { default as LiteInlineEdit } from './LiteInlineEdit.svelte';
+export { default as LiteAutoSaveIndicator } from './LiteAutoSaveIndicator.svelte';
+export { default as LiteVirtualTable } from './LiteVirtualTable.svelte';
+export { default as LiteDraggableHeader } from './LiteDraggableHeader.svelte';