@svadmin/lite 0.3.4 → 0.3.5

package/src/components/pages/LiteListPage.svelte

@@ -1,81 +0,0 @@
-<script lang="ts">
-  import type { ResourceDefinition } from '@svadmin/core';
-  import { t } from '@svadmin/core/i18n';
-  import LiteTable from '../LiteTable.svelte';
-  import LitePagination from '../LitePagination.svelte';
-  import LiteSearch from '../LiteSearch.svelte';
-  import LiteCreateButton from '../buttons/LiteCreateButton.svelte';
-  import LiteRefreshButton from '../buttons/LiteRefreshButton.svelte';
-
-  interface Props {
-    resource: ResourceDefinition;
-    records: Record<string, unknown>[];
-    total: number;
-    pagination: { page: number; perPage: number };
-    currentSort?: string;
-    currentOrder?: 'asc' | 'desc';
-    currentSearch?: string;
-    basePath?: string;
-    canCreate?: boolean;
-    canEdit?: boolean;
-    canDelete?: boolean;
-  }
-
-  let {
-    resource,
-    records,
-    total,
-    pagination,
-    currentSort,
-    currentOrder = 'asc',
-    currentSearch,
-    basePath = '/lite',
-    canCreate = true,
-    canEdit = true,
-    canDelete = true,
-  }: Props = $props();
-</script>
-
-<div class="lite-page">
-  <div class="lite-page-header">
-    <h1 class="lite-page-title">{resource.label || resource.name} {t('common.list') || 'List'}</h1>
-    <div class="lite-page-actions">
-      {#if canCreate}
-        <LiteCreateButton resource={resource.name} {basePath} />
-      {/if}
-      <LiteRefreshButton hideText />
-    </div>
-  </div>
-
-  <div class="lite-card" style="margin-bottom: 20px;">
-    <div style="padding: 16px; border-bottom: 1px solid #e2e8f0; display: flex; justify-content: space-between; align-items: center;">
-      <LiteSearch value={currentSearch} placeholder={t('common.search') || 'Search...'} />
-      <span style="font-size: 13px; color: #64748b;">
-        {t('common.total') || 'Total'}: {total}
-      </span>
-    </div>
-
-    <LiteTable
-      {records}
-      {resource}
-      {currentSort}
-      {currentOrder}
-      {currentSearch}
-      {basePath}
-      {canEdit}
-      {canDelete}
-    />
-    
-    {#if total > pagination.perPage}
-      <LitePagination
-        page={pagination.page}
-        totalPages={Math.ceil(total / pagination.perPage)}
-        preserveParams={{
-          ...(currentSort ? { sort: currentSort } : {}),
-          ...(currentOrder ? { order: currentOrder } : {}),
-          ...(currentSearch ? { q: currentSearch } : {})
-        }}
-      />
-    {/if}
-  </div>
-</div>

package/src/components/pages/LiteProfilePage.svelte

@@ -1,61 +0,0 @@
-<script lang="ts">
-  import { t } from '@svadmin/core/i18n';
-
-  interface Props {
-    user: { id?: string | number; name?: string; email?: string; [key: string]: unknown };
-    action?: string;
-    errors?: string[];
-    successMessage?: string;
-  }
-
-  let {
-    user,
-    action = '?/update_profile',
-    errors = [],
-    successMessage = '',
-  }: Props = $props();
-</script>
-
-<div class="lite-page">
-  <div class="lite-page-header">
-    <h1 class="lite-page-title">{t('common.profile') || 'User Profile'}</h1>
-  </div>
-
-  <div class="lite-card" style="max-width: 600px; margin: 0 auto; padding: 24px;">
-    <form method="POST" {action} style="display: flex; flex-direction: column; gap: 16px;">
-      <div class="lite-form-group">
-        <label for="name">Name</label>
-        <input type="text" id="name" name="name" class="lite-input" value={user?.name ?? ''} />
-      </div>
-
-      <div class="lite-form-group">
-        <label for="email">Email</label>
-        <input type="email" id="email" name="email" class="lite-input" value={user?.email ?? ''} required />
-      </div>
-      
-      <!-- Password update fields can be added here or handled in a separate form -->
-
-      {#if errors.length > 0}
-        <div style="padding: 12px; background: #fef2f2; border-radius: 6px; color: #ef4444; font-size: 13px;">
-          <ul style="margin: 0; padding-left: 20px;">
-            {#each errors as err}
-              <li>{err}</li>
-            {/each}
-          </ul>
-        </div>
-      {/if}
-
-      {#if successMessage}
-        <div style="padding: 12px; background: #ecfdf5; border-radius: 6px; color: #10b981; font-size: 13px;">
-          {successMessage}
-        </div>
-      {/if}
-
-      <div style="display: flex; justify-content: flex-end; margin-top: 8px;">
-        <button type="submit" class="lite-btn lite-btn-primary">
-          {t('common.save') || 'Save Profile'}
-        </button>
-      </div>
-    </form>
-  </div>
-</div>

package/src/components/pages/LiteRegisterPage.svelte

@@ -1,64 +0,0 @@
-<script lang="ts">
-  import { t } from '@svadmin/core/i18n';
-
-  interface Props {
-    title?: string;
-    description?: string;
-    action?: string;
-    loginUrl?: string;
-    errors?: string[];
-  }
-
-  let {
-    title = 'Register',
-    description = 'Create a new account',
-    action = '?/register',
-    loginUrl = '/lite/login',
-    errors = [],
-  }: Props = $props();
-</script>
-
-<div style="min-height: 100vh; display: flex; align-items: center; justify-content: center; background: #f8fafc; padding: 20px;">
-  <div class="lite-card" style="width: 100%; max-width: 400px; padding: 32px;">
-    <div style="text-align: center; margin-bottom: 24px;">
-      <h1 style="font-size: 24px; font-weight: 600; color: #0f172a; margin: 0 0 8px;">{title}</h1>
-      <p style="font-size: 14px; color: #64748b; margin: 0;">{description}</p>
-    </div>
-
-    <!-- We use native form action -->
-    <form method="POST" {action} style="display: flex; flex-direction: column; gap: 16px;">
-      <div class="lite-form-group">
-        <label for="email">Email</label>
-        <input type="email" id="email" name="email" class="lite-input" required />
-      </div>
-
-      <div class="lite-form-group">
-        <label for="password">Password</label>
-        <input type="password" id="password" name="password" class="lite-input" required minlength="6" />
-      </div>
-
-      <div class="lite-form-group">
-        <label for="confirmPassword">Confirm Password</label>
-        <input type="password" id="confirmPassword" name="confirmPassword" class="lite-input" required minlength="6" />
-      </div>
-
-      {#if errors.length > 0}
-        <div style="padding: 12px; background: #fef2f2; border-radius: 6px; color: #ef4444; font-size: 13px;">
-          <ul style="margin: 0; padding-left: 20px;">
-            {#each errors as err}
-              <li>{err}</li>
-            {/each}
-          </ul>
-        </div>
-      {/if}
-
-      <button type="submit" class="lite-btn lite-btn-primary" style="width: 100%; justify-content: center; padding: 10px;">
-        Register
-      </button>
-
-      <div style="text-align: center; font-size: 13px; color: #64748b; margin-top: 8px;">
-        Already have an account? <a href={loginUrl} style="color: #2563eb; text-decoration: none;">Login</a>
-      </div>
-    </form>
-  </div>
-</div>

package/src/components/pages/LiteShowPage.svelte

@@ -1,61 +0,0 @@
-<script lang="ts">
-  import type { ResourceDefinition } from '@svadmin/core';
-  import { t } from '@svadmin/core/i18n';
-  import LiteShowField from '../LiteShowField.svelte';
-  import LiteListButton from '../buttons/LiteListButton.svelte';
-  import LiteEditButton from '../buttons/LiteEditButton.svelte';
-  import LiteDeleteButton from '../buttons/LiteDeleteButton.svelte';
-
-  interface Props {
-    resource: ResourceDefinition;
-    record: Record<string, unknown>;
-    basePath?: string;
-    canEdit?: boolean;
-    canDelete?: boolean;
-  }
-
-  let {
-    resource,
-    record,
-    basePath = '/lite',
-    canEdit = true,
-    canDelete = true,
-  }: Props = $props();
-
-  let pk = $derived(resource.primaryKey ?? 'id');
-  let idStr = $derived(String(record[pk]));
-  
-  const showFields = $derived(
-    resource.fields.filter(f => f.showInShow !== false)
-  );
-</script>
-
-<div class="lite-page">
-  <div class="lite-page-header">
-    <h1 class="lite-page-title">{t('common.show') || 'Show'} {resource.label || resource.name} #{idStr}</h1>
-    <div class="lite-page-actions">
-      {#if canEdit}
-        <LiteEditButton resource={resource.name} recordItemId={idStr} {basePath} />
-      {/if}
-      <LiteListButton resource={resource.name} {basePath} />
-      {#if canDelete}
-        <LiteDeleteButton resource={resource.name} recordItemId={idStr} redirectUrl={`${basePath}/${resource.name}`} {basePath} />
-      {/if}
-    </div>
-  </div>
-
-  <div class="lite-card" style="padding: 24px;">
-    <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px;">
-      {#each showFields as field}
-        <div>
-          <div style="display: block; font-size: 13px; font-weight: 500; color: #64748b; margin-bottom: 8px;">
-            {field.label}
-          </div>
-          <div style="color: #0f172a; font-size: 14px;">
-            <LiteShowField {field} value={record[field.key]} />
-          </div>
-        </div>
-      {/each}
-    </div>
-  </div>
-</div>

package/src/components/pages/LiteUpdatePasswordPage.svelte

@@ -1,51 +0,0 @@
-<script lang="ts">
-  interface Props {
-    title?: string;
-    description?: string;
-    action?: string;
-    errors?: string[];
-  }
-
-  let {
-    title = 'Update Password',
-    description = 'Enter your new password below.',
-    action = '?/update_password',
-    errors = [],
-  }: Props = $props();
-</script>
-
-<div style="min-height: 100vh; display: flex; align-items: center; justify-content: center; background: #f8fafc; padding: 20px;">
-  <div class="lite-card" style="width: 100%; max-width: 400px; padding: 32px;">
-    <div style="text-align: center; margin-bottom: 24px;">
-      <h1 style="font-size: 24px; font-weight: 600; color: #0f172a; margin: 0 0 8px;">{title}</h1>
-      <p style="font-size: 14px; color: #64748b; margin: 0;">{description}</p>
-    </div>
-
-    <!-- Native form action -->
-    <form method="POST" {action} style="display: flex; flex-direction: column; gap: 16px;">
-      <div class="lite-form-group">
-        <label for="password">New Password</label>
-        <input type="password" id="password" name="password" class="lite-input" required minlength="6" />
-      </div>
-
-      <div class="lite-form-group">
-        <label for="confirmPassword">Confirm New Password</label>
-        <input type="password" id="confirmPassword" name="confirmPassword" class="lite-input" required minlength="6" />
-      </div>
-
-      {#if errors.length > 0}
-        <div style="padding: 12px; background: #fef2f2; border-radius: 6px; color: #ef4444; font-size: 13px;">
-          <ul style="margin: 0; padding-left: 20px;">
-            {#each errors as err}
-              <li>{err}</li>
-            {/each}
-          </ul>
-        </div>
-      {/if}
-
-      <button type="submit" class="lite-btn lite-btn-primary" style="width: 100%; justify-content: center; padding: 10px;">
-        Update Password
-      </button>
-    </form>
-  </div>
-</div>

package/src/components/widgets/LiteAnomalyBadge.svelte

@@ -1,40 +0,0 @@
-<script lang="ts">
-  /**
-   * SSR AnomalyBadge — Rendered as a static colored badge.
-   * The SPA version has tooltips (requires JS). In lite mode,
-   * we use a title attribute for the tooltip fallback.
-   */
-  interface Props {
-    value: number;
-    baseline: number;
-    threshold?: number;
-    formatter?: (val: number) => string;
-    lowerIsBetter?: boolean;
-  }
-
-  let {
-    value,
-    baseline,
-    threshold = 0.2,
-    formatter = (v: number) => v.toString(),
-    lowerIsBetter = false,
-  }: Props = $props();
-
-  const diff = $derived(baseline === 0 ? 0 : (value - baseline) / Math.abs(baseline));
-  const isAnomaly = $derived(Math.abs(diff) >= threshold);
-  const isGood = $derived(!isAnomaly ? null : (lowerIsBetter ? diff < 0 : diff > 0));
-  const percentLabel = $derived(`${Math.abs(diff * 100).toFixed(1)}%`);
-  const arrow = $derived(diff > 0 ? '↑' : '↓');
-</script>
-
-{#if !isAnomaly}
-  <span style="font-size: 14px; color: #64748b;">{formatter(value)}</span>
-{:else}
-  <span
-    title="Baseline: {formatter(baseline)} ({diff > 0 ? '+' : '-'}{percentLabel})"
-    class="lite-badge"
-    style="background: {isGood ? '#ecfdf5' : '#fef2f2'}; color: {isGood ? '#065f46' : '#991b1b'}; border: 1px solid {isGood ? '#a7f3d0' : '#fecaca'};"
-  >
-    {arrow} {formatter(value)}
-  </span>
-{/if}

package/src/components/widgets/LiteBarChart.svelte

@@ -1,45 +0,0 @@
-<script lang="ts">
-  /**
-   * SSR BarChart — Rendered as a pure CSS horizontal bar chart.
-   * No charting library needed. Data is rendered server-side as
-   * colored div bars with percentage widths.
-   */
-  interface DataPoint {
-    label: string;
-    value: number;
-    color?: string;
-  }
-
-  interface Props {
-    data: DataPoint[];
-    title?: string;
-  }
-
-  let { data, title }: Props = $props();
-
-  const maxValue = $derived(Math.max(...data.map(d => d.value), 1));
-</script>
-
-<div class="lite-card" style="margin-bottom: 16px;">
-  {#if title}
-    <div style="padding: 12px 16px; border-bottom: 1px solid #e2e8f0; font-weight: 600; font-size: 14px; color: #0f172a;">
-      {title}
-    </div>
-  {/if}
-  <div style="padding: 16px; display: flex; flex-direction: column; gap: 12px;">
-    {#each data as point}
-      <div>
-        <div style="display: flex; justify-content: space-between; margin-bottom: 4px; font-size: 13px;">
-          <span style="color: #334155;">{point.label}</span>
-          <span style="color: #64748b; font-weight: 500;">{point.value}</span>
-        </div>
-        <div style="height: 20px; background: #f1f5f9; border-radius: 4px; overflow: hidden;">
-          <div style="height: 100%; width: {(point.value / maxValue) * 100}%; background: {point.color ?? '#6366f1'}; border-radius: 4px; transition: width 0.3s;"></div>
-        </div>
-      </div>
-    {/each}
-    {#if data.length === 0}
-      <p style="color: #94a3b8; font-style: italic; text-align: center;">No data</p>
-    {/if}
-  </div>
-</div>

package/src/components/widgets/LiteInsightCard.svelte

@@ -1,28 +0,0 @@
-<script lang="ts">
-  /**
-   * SSR InsightCard — Degraded to static pre-rendered content.
-   * The SPA version streams AI-generated insights via ChatProvider.
-   * In lite mode, insights must be pre-computed on the server and
-   * passed as a static string. No AI streaming is available.
-   */
-  interface Props {
-    title?: string;
-    content?: string;
-  }
-
-  let { title = 'Insights', content = '' }: Props = $props();
-</script>
-
-<div class="lite-card" style="margin-bottom: 16px;">
-  <div style="padding: 12px 16px; border-bottom: 1px solid #e2e8f0; font-weight: 600; font-size: 14px; color: #0f172a; display: flex; align-items: center; gap: 8px;">
-    <span style="color: #f59e0b;">✦</span>
-    {title}
-  </div>
-  <div style="padding: 16px; font-size: 14px; color: #334155; line-height: 1.6;">
-    {#if content}
-      {@html content}
-    {:else}
-      <p style="color: #94a3b8; font-style: italic;">No insights available. AI analysis requires JavaScript.</p>
-    {/if}
-  </div>
-</div>

package/src/components/widgets/LiteLineChart.svelte

@@ -1,48 +0,0 @@
-<script lang="ts">
-  /**
-   * SSR LineChart — Degraded to an HTML data table.
-   * Drawing SVG/Canvas line charts inline is possible but complex.
-   * For maximum compatibility (IE11), we render data as a simple table.
-   */
-  interface DataPoint {
-    label: string;
-    value: number;
-  }
-
-  interface Props {
-    data: DataPoint[];
-    title?: string;
-    valueLabel?: string;
-  }
-
-  let { data, title, valueLabel = 'Value' }: Props = $props();
-</script>
-
-<div class="lite-card" style="margin-bottom: 16px;">
-  {#if title}
-    <div style="padding: 12px 16px; border-bottom: 1px solid #e2e8f0; font-weight: 600; font-size: 14px; color: #0f172a;">
-      {title}
-    </div>
-  {/if}
-  <table style="width: 100%; border-collapse: collapse;">
-    <thead>
-      <tr>
-        <th style="text-align: left; padding: 10px 16px; font-size: 12px; color: #64748b; border-bottom: 1px solid #e2e8f0;">Label</th>
-        <th style="text-align: right; padding: 10px 16px; font-size: 12px; color: #64748b; border-bottom: 1px solid #e2e8f0;">{valueLabel}</th>
-      </tr>
-    </thead>
-    <tbody>
-      {#each data as point, i}
-        <tr style="background: {i % 2 === 0 ? '#ffffff' : '#f8fafc'};">
-          <td style="padding: 8px 16px; font-size: 13px; color: #334155;">{point.label}</td>
-          <td style="padding: 8px 16px; font-size: 13px; color: #0f172a; text-align: right; font-weight: 500;">{point.value}</td>
-        </tr>
-      {/each}
-      {#if data.length === 0}
-        <tr>
-          <td colspan="2" style="padding: 16px; text-align: center; color: #94a3b8; font-style: italic;">No data</td>
-        </tr>
-      {/if}
-    </tbody>
-  </table>
-</div>

package/src/components/widgets/LitePieChart.svelte

@@ -1,44 +0,0 @@
-<script lang="ts">
-  /**
-   * SSR PieChart — Degraded to a list with colored dots.
-   * Drawing SVG pie charts inline is technically possible but IE11
-   * doesn't support CSS conic-gradient. We fall back to a plain list.
-   */
-  interface DataPoint {
-    label: string;
-    value: number;
-    color?: string;
-  }
-
-  interface Props {
-    data: DataPoint[];
-    title?: string;
-  }
-
-  let { data, title }: Props = $props();
-
-  const total = $derived(data.reduce((sum, d) => sum + d.value, 0));
-  const defaultColors = ['#6366f1', '#f59e0b', '#10b981', '#ef4444', '#8b5cf6', '#06b6d4', '#f97316', '#ec4899'];
-</script>
-
-<div class="lite-card" style="margin-bottom: 16px;">
-  {#if title}
-    <div style="padding: 12px 16px; border-bottom: 1px solid #e2e8f0; font-weight: 600; font-size: 14px; color: #0f172a;">
-      {title}
-    </div>
-  {/if}
-  <div style="padding: 16px; display: flex; flex-direction: column; gap: 10px;">
-    {#each data as point, i}
-      {@const pct = total > 0 ? ((point.value / total) * 100).toFixed(1) : '0.0'}
-      <div style="display: flex; align-items: center; gap: 10px; font-size: 13px;">
-        <span style="width: 12px; height: 12px; border-radius: 50%; background: {point.color ?? defaultColors[i % defaultColors.length]}; flex-shrink: 0;"></span>
-        <span style="flex: 1; color: #334155;">{point.label}</span>
-        <span style="color: #64748b; font-weight: 500;">{point.value}</span>
-        <span style="color: #94a3b8; font-size: 12px; min-width: 48px; text-align: right;">{pct}%</span>
-      </div>
-    {/each}
-    {#if data.length === 0}
-      <p style="color: #94a3b8; font-style: italic; text-align: center;">No data</p>
-    {/if}
-  </div>
-</div>