@svadmin/lite 0.17.0 → 0.22.1

package/dist/components/widgets/LiteChartSvg.svelte

@@ -0,0 +1,102 @@
+<script lang="ts">
+  import {
+    areaPath,
+    donutSlices,
+    funnelRects,
+    gaugeArc,
+    heatCells,
+    hasData,
+    labels,
+    pieSlices,
+    polyline,
+    radarPolygon,
+    roseSlices,
+    scatterPoints,
+    series,
+    waterfallBars,
+    type Basket,
+  } from './chart-geometry';
+
+  interface Props {
+    kind: string;
+    rows?: Array<Array<string | number>>;
+    title?: string;
+    /** Value axis hint used by pie and donut legends. */
+    summary?: string;
+  }
+
+  let { kind, rows = [], title, summary }: Props = $props();
+
+  const basket: Basket = { width: 320, height: 160, padding: 12 };
+  const palette = ['#165DFF', '#FF7D00', '#00B42A', '#F53F3F', '#8B5CF6', '#06B6D4', '#F97316', '#EC4899', '#0EA5E9', '#A855F7'];
+  const values = $derived(series(rows));
+  const names = $derived(labels(rows));
+  const label = $derived(`${title ?? kind} chart`);
+  const gauge = $derived(gaugeArc(values[0] ?? 0, 100, basket));
+</script>
+
+{#if hasData(rows)}
+  <figure class="lite-chart-svg">
+    <svg viewBox={`0 0 ${basket.width} ${basket.height}`} role="img" aria-label={label} preserveAspectRatio="xMidYMid meet">
+      <title>{label}{summary ? ` — ${summary}` : ''}</title>
+      {#if kind === 'area'}
+        <path d={areaPath(values, basket)} fill="#165DFF" fill-opacity="0.18" stroke="#165DFF" stroke-width="2" />
+      {:else if kind === 'scatter'}
+        <polyline points={polyline(values, basket)} fill="none" stroke="#C9CDD4" stroke-width="1" stroke-dasharray="3 3" />
+        {#each scatterPoints(values, basket) as point, index (index)}
+          <circle cx={point.x} cy={point.y} r="3.5" fill={palette[index % palette.length]} />
+        {/each}
+      {:else if kind === 'radar'}
+        {@const radar = radarPolygon(values, basket)}
+        {#each radar.axes as axis, index (index)}
+          <polyline points={axis} fill="none" stroke="#E5E6EB" stroke-width="1" />
+        {/each}
+        <polygon points={radar.polygon} fill="#165DFF" fill-opacity="0.2" stroke="#165DFF" stroke-width="2" />
+      {:else if kind === 'gauge'}
+        <path d={gauge.track} fill="none" stroke="#E5E6EB" stroke-width="12" stroke-linecap="round" />
+        <path d={gauge.value} fill="none" stroke="#165DFF" stroke-width="12" stroke-linecap="round" />
+        <text x={basket.width / 2} y={basket.height - 24} text-anchor="middle" font-size="18" fill="#1D2129">{gauge.percent}%</text>
+      {:else if kind === 'funnel'}
+        {#each funnelRects(values, basket) as rect, index (index)}
+          <rect x={rect.x} y={rect.y} width={rect.width} height={rect.height} fill={palette[index % palette.length]} fill-opacity="0.85" />
+        {/each}
+      {:else if kind === 'heatmap'}
+        {#each heatCells(values, basket) as cell, index (index)}
+          <rect x={cell.x} y={cell.y} width={cell.width} height={cell.height} rx="2" fill="#165DFF" fill-opacity={cell.opacity} />
+        {/each}
+      {:else if kind === 'waterfall'}
+        {#each waterfallBars(values, basket) as bar, index (index)}
+          <rect x={bar.x} y={bar.y} width={bar.width} height={bar.height} fill={bar.positive ? '#00B42A' : '#F53F3F'} fill-opacity="0.85" />
+        {/each}
+      {:else if kind === 'rose'}
+        {#each roseSlices(values, basket) as slice, index (index)}
+          <path d={slice.path} fill={palette[index % palette.length]} fill-opacity="0.85" />
+        {/each}
+      {:else if kind === 'donut'}
+        {#each donutSlices(values, basket) as slice, index (index)}
+          <path d={slice.path} fill={palette[index % palette.length]} fill-opacity="0.9" />
+        {/each}
+      {:else}
+        {#each pieSlices(values, basket) as slice, index (index)}
+          <path d={slice.path} fill={palette[index % palette.length]} fill-opacity="0.9" />
+        {/each}
+      {/if}
+    </svg>
+    <figcaption class="lite-chart-svg__legend">
+      {#each names as name, index (index)}
+        <span class="lite-chart-svg__legend-item">
+          <span class="lite-chart-svg__swatch" style={`background:${palette[index % palette.length]}`} aria-hidden="true"></span>
+          {name}
+        </span>
+      {/each}
+    </figcaption>
+  </figure>
+{/if}
+
+<style>
+  .lite-chart-svg { display: block; margin: 0; padding: 12px 16px; border-bottom: 1px solid #E5E6EB; }
+  .lite-chart-svg svg { display: block; width: 100%; height: auto; max-height: 220px; }
+  .lite-chart-svg__legend { display: flex; flex-wrap: wrap; padding-top: 8px; }
+  .lite-chart-svg__legend-item { display: inline-flex; align-items: center; margin: 0 12px 4px 0; color: #4E5969; font-size: 12px; }
+  .lite-chart-svg__swatch { width: 8px; height: 8px; margin-right: 6px; border-radius: 2px; }
+</style>

package/dist/components/widgets/LiteChartSvg.svelte.d.ts

@@ -0,0 +1,10 @@
+interface Props {
+    kind: string;
+    rows?: Array<Array<string | number>>;
+    title?: string;
+    /** Value axis hint used by pie and donut legends. */
+    summary?: string;
+}
+declare const LiteChartSvg: import("svelte").Component<Props, {}, "">;
+type LiteChartSvg = ReturnType<typeof LiteChartSvg>;
+export default LiteChartSvg;

package/dist/components/widgets/LiteChartTable.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+  interface Props {
+    title?: string;
+    kind?: string;
+    columns?: string[];
+    rows?: Array<Array<string | number>>;
+    emptyText?: string;
+  }
+
+  let {
+    title,
+    kind = 'chart',
+    columns = ['Label', 'Value'],
+    rows = [],
+    emptyText = 'No data',
+  }: Props = $props();
+</script>
+
+<section class="lite-chart-table lite-card" data-kind={kind} aria-label={title ?? `${kind} data`}>
+  {#if title}<h2>{title}</h2>{/if}
+  {#if rows.length === 0}
+    <p class="lite-muted">{emptyText}</p>
+  {:else}
+    <div class="lite-table-scroll">
+      <table class="lite-table">
+        <thead>
+          <tr>{#each columns as column (column)}<th scope="col">{column}</th>{/each}</tr>
+        </thead>
+        <tbody>
+          {#each rows as row, index (index)}
+            <tr>{#each row as cell, cellIndex (cellIndex)}<td>{cell}</td>{/each}</tr>
+          {/each}
+        </tbody>
+      </table>
+    </div>
+  {/if}
+</section>
+
+<style>
+  .lite-chart-table { padding: 0; overflow: hidden; }
+  .lite-chart-table h2 { margin: 0; padding: 12px 16px; border-bottom: 1px solid #E5E6EB; color: #1D2129; font-size: 14px; }
+  .lite-chart-table > p { margin: 0; padding: 16px; }
+  .lite-chart-table table { margin: 0; }
+</style>

package/dist/components/widgets/LiteChartTable.svelte.d.ts

@@ -0,0 +1,10 @@
+interface Props {
+    title?: string;
+    kind?: string;
+    columns?: string[];
+    rows?: Array<Array<string | number>>;
+    emptyText?: string;
+}
+declare const LiteChartTable: import("svelte").Component<Props, {}, "">;
+type LiteChartTable = ReturnType<typeof LiteChartTable>;
+export default LiteChartTable;

package/dist/components/widgets/LiteDonutChart.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+  import LiteChartSvg from './LiteChartSvg.svelte';
+  import LiteChartTable from './LiteChartTable.svelte';
+
+  interface Props {
+    title?: string;
+    data?: Array<Record<string, unknown>>;
+    rows?: Array<Array<string | number>>;
+    columns?: string[];
+    emptyText?: string;
+  }
+
+  let { title, data = [], rows, columns, emptyText }: Props = $props();
+  const normalized = $derived(rows ?? data.map((item) => Object.values(item).map((value) => typeof value === 'number' ? value : String(value ?? ''))));
+</script>
+
+<div class="lite-chart-widget">
+  <LiteChartSvg kind="donut" rows={normalized} {title} />
+  <LiteChartTable {title} kind="donut" columns={columns ?? ['Label', 'Value']} rows={normalized} {emptyText} />
+</div>

package/dist/components/widgets/LiteDonutChart.svelte.d.ts

@@ -0,0 +1,10 @@
+interface Props {
+    title?: string;
+    data?: Array<Record<string, unknown>>;
+    rows?: Array<Array<string | number>>;
+    columns?: string[];
+    emptyText?: string;
+}
+declare const LiteDonutChart: import("svelte").Component<Props, {}, "">;
+type LiteDonutChart = ReturnType<typeof LiteDonutChart>;
+export default LiteDonutChart;

package/dist/components/widgets/LiteFunnelChart.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+  import LiteChartSvg from './LiteChartSvg.svelte';
+  import LiteChartTable from './LiteChartTable.svelte';
+
+  interface Props {
+    title?: string;
+    data?: Array<Record<string, unknown>>;
+    rows?: Array<Array<string | number>>;
+    columns?: string[];
+    emptyText?: string;
+  }
+
+  let { title, data = [], rows, columns, emptyText }: Props = $props();
+  const normalized = $derived(rows ?? data.map((item) => Object.values(item).map((value) => typeof value === 'number' ? value : String(value ?? ''))));
+</script>
+
+<div class="lite-chart-widget">
+  <LiteChartSvg kind="funnel" rows={normalized} {title} />
+  <LiteChartTable {title} kind="funnel" columns={columns ?? ['Label', 'Value']} rows={normalized} {emptyText} />
+</div>

package/dist/components/widgets/LiteFunnelChart.svelte.d.ts

@@ -0,0 +1,10 @@
+interface Props {
+    title?: string;
+    data?: Array<Record<string, unknown>>;
+    rows?: Array<Array<string | number>>;
+    columns?: string[];
+    emptyText?: string;
+}
+declare const LiteFunnelChart: import("svelte").Component<Props, {}, "">;
+type LiteFunnelChart = ReturnType<typeof LiteFunnelChart>;
+export default LiteFunnelChart;

package/dist/components/widgets/LiteGaugeChart.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+  import LiteChartSvg from './LiteChartSvg.svelte';
+  import LiteChartTable from './LiteChartTable.svelte';
+
+  interface Props {
+    title?: string;
+    data?: Array<Record<string, unknown>>;
+    rows?: Array<Array<string | number>>;
+    columns?: string[];
+    emptyText?: string;
+  }
+
+  let { title, data = [], rows, columns, emptyText }: Props = $props();
+  const normalized = $derived(rows ?? data.map((item) => Object.values(item).map((value) => typeof value === 'number' ? value : String(value ?? ''))));
+</script>
+
+<div class="lite-chart-widget">
+  <LiteChartSvg kind="gauge" rows={normalized} {title} />
+  <LiteChartTable {title} kind="gauge" columns={columns ?? ['Label', 'Value']} rows={normalized} {emptyText} />
+</div>

package/dist/components/widgets/LiteGaugeChart.svelte.d.ts

@@ -0,0 +1,10 @@
+interface Props {
+    title?: string;
+    data?: Array<Record<string, unknown>>;
+    rows?: Array<Array<string | number>>;
+    columns?: string[];
+    emptyText?: string;
+}
+declare const LiteGaugeChart: import("svelte").Component<Props, {}, "">;
+type LiteGaugeChart = ReturnType<typeof LiteGaugeChart>;
+export default LiteGaugeChart;

package/dist/components/widgets/LiteHeatmapChart.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+  import LiteChartSvg from './LiteChartSvg.svelte';
+  import LiteChartTable from './LiteChartTable.svelte';
+
+  interface Props {
+    title?: string;
+    data?: Array<Record<string, unknown>>;
+    rows?: Array<Array<string | number>>;
+    columns?: string[];
+    emptyText?: string;
+  }
+
+  let { title, data = [], rows, columns, emptyText }: Props = $props();
+  const normalized = $derived(rows ?? data.map((item) => Object.values(item).map((value) => typeof value === 'number' ? value : String(value ?? ''))));
+</script>
+
+<div class="lite-chart-widget">
+  <LiteChartSvg kind="heatmap" rows={normalized} {title} />
+  <LiteChartTable {title} kind="heatmap" columns={columns ?? ['Label', 'Value']} rows={normalized} {emptyText} />
+</div>

package/dist/components/widgets/LiteHeatmapChart.svelte.d.ts

@@ -0,0 +1,10 @@
+interface Props {
+    title?: string;
+    data?: Array<Record<string, unknown>>;
+    rows?: Array<Array<string | number>>;
+    columns?: string[];
+    emptyText?: string;
+}
+declare const LiteHeatmapChart: import("svelte").Component<Props, {}, "">;
+type LiteHeatmapChart = ReturnType<typeof LiteHeatmapChart>;
+export default LiteHeatmapChart;

package/dist/components/widgets/LiteInsightCard.svelte

@@ -1,31 +1,53 @@
 <script lang="ts">
+  import { renderRichContent, type MarkdownRenderOptions } from '../../rich-content.js';
   import { toSafeText } from '../../security.js';
 
   /**
-   * 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.
+   * SSR InsightCard — static pre-rendered content.
+   * The SPA version streams AI-generated insights via ChatProvider; in Lite mode
+   * the insight must be computed on the server and passed as Markdown or
+   * allowlisted HTML, which is rendered here without hydration.
    */
   interface Props {
     title?: string;
     content?: string;
+    /** Per-card renderer options; app-wide defaults come from configureMarkdownRenderer. */
+    renderOptions?: MarkdownRenderOptions;
   }
 
-  let { title = 'Insights', content = '' }: Props = $props();
-  const displayContent = $derived(toSafeText(content));
+  let { title = 'Insights', content = '', renderOptions }: Props = $props();
+  const renderedContent = $derived(renderRichContent(toSafeText(content), renderOptions));
 </script>
 
-<div class="lite-card" style="margin-bottom: 16px;">
-  <div class="lite-inline-md" style="padding: 12px 16px; border-bottom: 1px solid #E5E6EB; font-weight: 600; font-size: 14px; color: #1D2129; align-items: center;">
+<div class="lite-card lite-insight-card" style="margin-bottom: 16px;">
+  <div class="lite-insight-card__header" style="padding: 12px 16px; border-bottom: 1px solid #E5E6EB; font-weight: 600; font-size: 14px; color: #1D2129;">
     <span style="color: #FF7D00;">✦</span>
     {title}
   </div>
-  <div style="padding: 16px; font-size: 14px; color: #1D2129; line-height: 1.6;">
-    {#if displayContent}
-      <p style="white-space: pre-wrap; margin: 0;">{displayContent}</p>
+  <div class="lite-insight-card__body" style="padding: 16px; font-size: 14px; color: #1D2129; line-height: 1.6;">
+    {#if renderedContent}
+      <!-- eslint-disable-next-line svelte/no-at-html-tags -- 内容由 renderRichContent 转义或白名单过滤，高亮回调仅允许可信服务端实现。 -->
+      <div class="lite-insight-content">{@html renderedContent}</div>
     {:else}
-      <p style="color: #86909C; font-style: italic;">No insights available. AI analysis requires JavaScript.</p>
+      <p style="color: #86909C; font-style: italic; margin: 0;">No insights available. AI analysis requires JavaScript.</p>
     {/if}
   </div>
 </div>
+
+<style>
+  .lite-insight-content :global(p) { margin: 0 0 8px; }
+  .lite-insight-content :global(p:last-child) { margin-bottom: 0; }
+  .lite-insight-content :global(ul),
+  .lite-insight-content :global(ol) { margin: 0 0 8px; padding-left: 20px; }
+  .lite-insight-content :global(h1),
+  .lite-insight-content :global(h2),
+  .lite-insight-content :global(h3) { margin: 10px 0 6px; font-size: 15px; }
+  .lite-insight-content :global(code) { padding: 1px 4px; border-radius: 3px; background: #F2F3F5; font-family: monospace; font-size: 12px; }
+  .lite-insight-content :global(pre) { margin: 0 0 8px; padding: 8px; overflow-x: auto; border-radius: 4px; background: #F2F3F5; }
+  .lite-insight-content :global(blockquote) { margin: 0 0 8px; padding-left: 10px; border-left: 3px solid #E5E6EB; color: #4E5969; }
+  .lite-insight-content :global(a) { color: #165DFF; }
+  .lite-insight-content :global(table) { width: 100%; margin: 0 0 8px; border-collapse: collapse; }
+  .lite-insight-content :global(th),
+  .lite-insight-content :global(td) { padding: 6px 8px; border: 1px solid #E5E6EB; text-align: left; }
+  .lite-insight-content :global(th) { background: #F2F3F5; font-weight: 600; }
+</style>

package/dist/components/widgets/LiteInsightCard.svelte.d.ts

@@ -1,12 +1,15 @@
+import { type MarkdownRenderOptions } from '../../rich-content.js';
 /**
- * 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.
+ * SSR InsightCard — static pre-rendered content.
+ * The SPA version streams AI-generated insights via ChatProvider; in Lite mode
+ * the insight must be computed on the server and passed as Markdown or
+ * allowlisted HTML, which is rendered here without hydration.
  */
 interface Props {
     title?: string;
     content?: string;
+    /** Per-card renderer options; app-wide defaults come from configureMarkdownRenderer. */
+    renderOptions?: MarkdownRenderOptions;
 }
 declare const LiteInsightCard: import("svelte").Component<Props, {}, "">;
 type LiteInsightCard = ReturnType<typeof LiteInsightCard>;

package/dist/components/widgets/LiteLineChart.svelte

@@ -1,9 +1,10 @@
 <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.
+   * SSR LineChart — renders an inline SVG polyline plus the same values as an
+   * accessible data table. No charting library and no client JavaScript.
    */
+  import LiteChartSvg from './LiteChartSvg.svelte';
+
   interface DataPoint {
     label: string;
     value: number;
@@ -16,6 +17,7 @@
   }
 
   let { data, title, valueLabel = 'Value' }: Props = $props();
+  const rows = $derived(data.map((point) => [point.label, point.value] as [string, number]));
 </script>
 
 <div class="lite-card" style="margin-bottom: 16px;">
@@ -24,6 +26,7 @@
       {title}
     </div>
   {/if}
+  <LiteChartSvg kind="line" {rows} {title} />
   <table style="width: 100%; border-collapse: collapse;">
     <thead>
       <tr>

package/dist/components/widgets/LiteLineChart.svelte.d.ts

@@ -1,8 +1,3 @@
-/**
- * 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;

package/dist/components/widgets/LitePieChart.svelte

@@ -1,9 +1,9 @@
 <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.
+   * SSR PieChart — renders SVG pie slices plus a list with the same shares.
    */
+  import LiteChartSvg from './LiteChartSvg.svelte';
+
   interface DataPoint {
     label: string;
     value: number;
@@ -17,6 +17,7 @@
 
   let { data, title }: Props = $props();
 
+  const rows = $derived(data.map((point) => [point.label, point.value] as [string, number]));
   const total = $derived(data.reduce((sum, d) => sum + d.value, 0));
   const defaultColors = ['#165DFF', '#FF7D00', '#00B42A', '#F53F3F', '#8b5cf6', '#06b6d4', '#f97316', '#ec4899'];
 </script>
@@ -27,6 +28,7 @@
       {title}
     </div>
   {/if}
+  <LiteChartSvg kind="pie" {rows} {title} />
   <div class="lite-stack-md" style="padding: 16px;">
     {#each data as point, i (i)}
       {@const pct = total > 0 ? ((point.value / total) * 100).toFixed(1) : '0.0'}

package/dist/components/widgets/LitePieChart.svelte.d.ts

@@ -1,8 +1,3 @@
-/**
- * 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;

package/dist/components/widgets/LiteRadarChart.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+  import LiteChartSvg from './LiteChartSvg.svelte';
+  import LiteChartTable from './LiteChartTable.svelte';
+
+  interface Props {
+    title?: string;
+    data?: Array<Record<string, unknown>>;
+    rows?: Array<Array<string | number>>;
+    columns?: string[];
+    emptyText?: string;
+  }
+
+  let { title, data = [], rows, columns, emptyText }: Props = $props();
+  const normalized = $derived(rows ?? data.map((item) => Object.values(item).map((value) => typeof value === 'number' ? value : String(value ?? ''))));
+</script>
+
+<div class="lite-chart-widget">
+  <LiteChartSvg kind="radar" rows={normalized} {title} />
+  <LiteChartTable {title} kind="radar" columns={columns ?? ['Label', 'Value']} rows={normalized} {emptyText} />
+</div>

package/dist/components/widgets/LiteRadarChart.svelte.d.ts

@@ -0,0 +1,10 @@
+interface Props {
+    title?: string;
+    data?: Array<Record<string, unknown>>;
+    rows?: Array<Array<string | number>>;
+    columns?: string[];
+    emptyText?: string;
+}
+declare const LiteRadarChart: import("svelte").Component<Props, {}, "">;
+type LiteRadarChart = ReturnType<typeof LiteRadarChart>;
+export default LiteRadarChart;

package/dist/components/widgets/LiteRoseChart.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+  import LiteChartSvg from './LiteChartSvg.svelte';
+  import LiteChartTable from './LiteChartTable.svelte';
+
+  interface Props {
+    title?: string;
+    data?: Array<Record<string, unknown>>;
+    rows?: Array<Array<string | number>>;
+    columns?: string[];
+    emptyText?: string;
+  }
+
+  let { title, data = [], rows, columns, emptyText }: Props = $props();
+  const normalized = $derived(rows ?? data.map((item) => Object.values(item).map((value) => typeof value === 'number' ? value : String(value ?? ''))));
+</script>
+
+<div class="lite-chart-widget">
+  <LiteChartSvg kind="rose" rows={normalized} {title} />
+  <LiteChartTable {title} kind="rose" columns={columns ?? ['Label', 'Value']} rows={normalized} {emptyText} />
+</div>

package/dist/components/widgets/LiteRoseChart.svelte.d.ts

@@ -0,0 +1,10 @@
+interface Props {
+    title?: string;
+    data?: Array<Record<string, unknown>>;
+    rows?: Array<Array<string | number>>;
+    columns?: string[];
+    emptyText?: string;
+}
+declare const LiteRoseChart: import("svelte").Component<Props, {}, "">;
+type LiteRoseChart = ReturnType<typeof LiteRoseChart>;
+export default LiteRoseChart;

package/dist/components/widgets/LiteScatterChart.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+  import LiteChartSvg from './LiteChartSvg.svelte';
+  import LiteChartTable from './LiteChartTable.svelte';
+
+  interface Props {
+    title?: string;
+    data?: Array<Record<string, unknown>>;
+    rows?: Array<Array<string | number>>;
+    columns?: string[];
+    emptyText?: string;
+  }
+
+  let { title, data = [], rows, columns, emptyText }: Props = $props();
+  const normalized = $derived(rows ?? data.map((item) => Object.values(item).map((value) => typeof value === 'number' ? value : String(value ?? ''))));
+</script>
+
+<div class="lite-chart-widget">
+  <LiteChartSvg kind="scatter" rows={normalized} {title} />
+  <LiteChartTable {title} kind="scatter" columns={columns ?? ['Label', 'Value']} rows={normalized} {emptyText} />
+</div>

package/dist/components/widgets/LiteScatterChart.svelte.d.ts

@@ -0,0 +1,10 @@
+interface Props {
+    title?: string;
+    data?: Array<Record<string, unknown>>;
+    rows?: Array<Array<string | number>>;
+    columns?: string[];
+    emptyText?: string;
+}
+declare const LiteScatterChart: import("svelte").Component<Props, {}, "">;
+type LiteScatterChart = ReturnType<typeof LiteScatterChart>;
+export default LiteScatterChart;

package/dist/components/widgets/LiteWaterfallChart.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+  import LiteChartSvg from './LiteChartSvg.svelte';
+  import LiteChartTable from './LiteChartTable.svelte';
+
+  interface Props {
+    title?: string;
+    data?: Array<Record<string, unknown>>;
+    rows?: Array<Array<string | number>>;
+    columns?: string[];
+    emptyText?: string;
+  }
+
+  let { title, data = [], rows, columns, emptyText }: Props = $props();
+  const normalized = $derived(rows ?? data.map((item) => Object.values(item).map((value) => typeof value === 'number' ? value : String(value ?? ''))));
+</script>
+
+<div class="lite-chart-widget">
+  <LiteChartSvg kind="waterfall" rows={normalized} {title} />
+  <LiteChartTable {title} kind="waterfall" columns={columns ?? ['Label', 'Value']} rows={normalized} {emptyText} />
+</div>

package/dist/components/widgets/LiteWaterfallChart.svelte.d.ts

@@ -0,0 +1,10 @@
+interface Props {
+    title?: string;
+    data?: Array<Record<string, unknown>>;
+    rows?: Array<Array<string | number>>;
+    columns?: string[];
+    emptyText?: string;
+}
+declare const LiteWaterfallChart: import("svelte").Component<Props, {}, "">;
+type LiteWaterfallChart = ReturnType<typeof LiteWaterfallChart>;
+export default LiteWaterfallChart;