@svadmin/lite 0.1.0 → 0.2.1

package/src/components/widgets/LiteInsightCard.svelte

@@ -0,0 +1,28 @@
+<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

@@ -0,0 +1,48 @@
+<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

@@ -0,0 +1,44 @@
+<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>

package/src/components/widgets/index.ts

@@ -0,0 +1,5 @@
+export { default as LiteInsightCard } from './LiteInsightCard.svelte';
+export { default as LiteAnomalyBadge } from './LiteAnomalyBadge.svelte';
+export { default as LiteBarChart } from './LiteBarChart.svelte';
+export { default as LiteLineChart } from './LiteLineChart.svelte';
+export { default as LitePieChart } from './LitePieChart.svelte';

package/src/index.ts

@@ -30,3 +30,31 @@ export { default as LiteLogin } from './components/LiteLogin.svelte';
 export { default as LiteShow } from './components/LiteShow.svelte';
 export { default as LiteSearch } from './components/LiteSearch.svelte';
 export { default as LiteAlert } from './components/LiteAlert.svelte';
+export { default as LitePermissionMatrix } from './components/LitePermissionMatrix.svelte';
+export { default as LiteAuditLog } from './components/LiteAuditLog.svelte';
+export { default as LiteArrayField } from './components/LiteArrayField.svelte';
+export { default as LiteBreadcrumbs } from './components/LiteBreadcrumbs.svelte';
+export { default as LiteStatsCard } from './components/LiteStatsCard.svelte';
+export { default as LiteConfirmDialog } from './components/LiteConfirmDialog.svelte';
+export { default as LiteEmptyState } from './components/LiteEmptyState.svelte';
+export { default as LiteTabs } from './components/LiteTabs.svelte';
+export { default as LiteShowField } from './components/LiteShowField.svelte';
+export { default as LiteChatDialog } from './components/LiteChatDialog.svelte';
+
+// Action Buttons
+export * from './components/buttons/index';
+
+// Fields
+export * from './components/fields/index';
+
+// Pages
+export * from './components/pages/index';
+
+// Layout & Navigation
+export * from './components/layout/index';
+
+// Advanced UX (gracefully degraded)
+export * from './components/advanced/index';
+
+// Widgets & Charts (SSR static alternatives)
+export * from './components/widgets/index';