@svadmin/lite 0.17.0 → 0.22.0

package/dist/components/fields/LiteNumberField.svelte

@@ -6,16 +6,18 @@
     value?: unknown;
     error?: string[];
     mode?: 'show' | 'edit' | 'create';
+    /** Caller class merged with the built-in class list. */
+    class?: string;
   }
 
-  let { field, value, error = [], mode = 'show' }: Props = $props();
+  let { field, value, error = [], mode = 'show', class: className = '' }: Props = $props();
   let hasError = $derived(error.length > 0);
 </script>
 
 {#if mode === 'show'}
-  <span>{value == null ? '—' : Number(value).toLocaleString()}</span>
+  <span class="lite-field-value {className}">{value == null ? '—' : Number(value).toLocaleString()}</span>
 {:else}
-  <div>
+  <div class="lite-field-edit {className}">
     <input
       type="number"
       name={field.key}

package/dist/components/fields/LiteNumberField.svelte.d.ts

@@ -4,6 +4,8 @@ interface Props {
     value?: unknown;
     error?: string[];
     mode?: 'show' | 'edit' | 'create';
+    /** Caller class merged with the built-in class list. */
+    class?: string;
 }
 declare const LiteNumberField: import("svelte").Component<Props, {}, "">;
 type LiteNumberField = ReturnType<typeof LiteNumberField>;

package/dist/components/fields/LiteRichTextField.svelte

@@ -1,28 +1,33 @@
 <script lang="ts">
   import type { FieldDefinition } from '@svadmin/core';
   import { toSafeText } from '../../security.js';
+  import { renderRichContent, type MarkdownRenderOptions } from '../../rich-content.js';
 
   interface Props {
     field: FieldDefinition;
     value?: unknown;
     error?: string[];
     mode?: 'show' | 'edit' | 'create';
+    /** Per-field renderer options; app-wide defaults come from configureMarkdownRenderer. */
+    renderOptions?: MarkdownRenderOptions;
   }
 
-  let { field, value, error = [], mode = 'show' }: Props = $props();
+  let { field, value, error = [], mode = 'show', renderOptions }: Props = $props();
   let hasError = $derived(error.length > 0);
-  const displayValue = $derived(toSafeText(value, '—'));
+  const preview = $derived(renderRichContent(value, renderOptions));
 </script>
 
 {#if mode === 'show'}
-  <!-- Lite mode intentionally renders rich content as text to keep SSR output safe without a sanitizer dependency. -->
-  <div style="padding: 16px; border: 1px solid #E5E6EB; border-radius: 6px; max-height: 500px; overflow-y: auto; background: #fff; white-space: pre-wrap;" class="prose">
-    {displayValue}
-  </div>
+  {#if preview}
+    <!-- eslint-disable-next-line svelte/no-at-html-tags -- 内容由 renderRichContent 转义或白名单过滤，高亮回调仅允许可信服务端实现。 -->
+    <div class="lite-rich-preview">{@html preview}</div>
+  {:else}
+    <span>—</span>
+  {/if}
 {:else}
   <div class="lite-markdown-editor">
     <div class="lite-inline-lg lite-flex-wrap" style="padding: 8px 12px; border: 1px solid #E5E6EB; border-bottom: none; border-radius: 6px 6px 0 0; background: #F7F8FA; color: #4E5969; font-size: 12px; font-weight: 500;">
-      <span>Markdown is supported</span>
+      <span>HTML or Markdown source</span>
       <span style="color: #86909C;">**bold**</span>
       <span style="color: #86909C; font-style: italic;">*italic*</span>
       <span style="color: #86909C;"># heading</span>
@@ -32,7 +37,7 @@
       id={field.key}
       class="lite-input {hasError ? 'lite-input-error' : ''}"
       style="min-height: 280px; font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace; font-size: 13px; line-height: 1.6; padding: 16px; border-radius: 0 0 6px 6px; resize: vertical;"
-      placeholder="Wait... Rich Text Editor is disabled in lite mode.&#10;&#10;You can write standard HTML or use Markdown syntax here. Content will be safely rendered on the server."
+      placeholder="Rich text editing is disabled in lite mode. Write standard HTML or Markdown; the server renders it through a safe allowlist."
       {...field.required ? { required: true } : {}}
     >{toSafeText(value)}</textarea>
     {#if hasError}
@@ -40,5 +45,37 @@
         <div class="lite-error-text">{err}</div>
       {/each}
     {/if}
+    <div class="lite-rich-preview-block">
+      <span class="lite-rich-preview-block__label">Preview</span>
+      {#if preview}
+        <!-- eslint-disable-next-line svelte/no-at-html-tags -- 内容由 renderRichContent 转义或白名单过滤，高亮回调仅允许可信服务端实现。 -->
+        <div class="lite-rich-preview">{@html preview}</div>
+      {:else}
+        <p class="lite-rich-preview-block__empty">Nothing to preview yet.</p>
+      {/if}
+    </div>
   </div>
 {/if}
+
+<style>
+  .lite-rich-preview { padding: 16px; border: 1px solid #E5E6EB; border-radius: 6px; max-height: 500px; overflow-y: auto; background: #fff; color: #1D2129; font-size: 13px; line-height: 1.7; overflow-wrap: anywhere; }
+  .lite-rich-preview :global(p) { margin: 0 0 8px; }
+  .lite-rich-preview :global(h1),
+  .lite-rich-preview :global(h2),
+  .lite-rich-preview :global(h3) { margin: 12px 0 6px; font-size: 16px; }
+  .lite-rich-preview :global(ul),
+  .lite-rich-preview :global(ol) { margin: 0 0 8px; padding-left: 20px; }
+  .lite-rich-preview :global(code) { font-family: monospace; font-size: 12px; }
+  .lite-rich-preview :global(blockquote) { margin: 0 0 8px; padding-left: 10px; border-left: 3px solid #E5E6EB; color: #4E5969; }
+  .lite-rich-preview :global(a) { color: #165DFF; }
+  .lite-rich-preview :global(img) { max-width: 100%; height: auto; }
+  .lite-rich-preview :global(table) { width: 100%; margin: 0 0 8px; border-collapse: collapse; }
+  .lite-rich-preview :global(th),
+  .lite-rich-preview :global(td) { padding: 6px 8px; border: 1px solid #E5E6EB; text-align: left; }
+  .lite-rich-preview :global(th) { background: #F2F3F5; font-weight: 600; }
+  .lite-rich-preview :global(ul.lite-task-list) { padding-left: 2px; list-style: none; }
+  .lite-rich-preview :global(.lite-task-item input) { margin-right: 6px; }
+  .lite-rich-preview-block { margin-top: 8px; }
+  .lite-rich-preview-block__label { display: block; margin-bottom: 4px; color: #86909C; font-size: 11px; font-weight: 600; }
+  .lite-rich-preview-block__empty { margin: 0; padding: 8px 12px; border: 1px dashed #E5E6EB; border-radius: 4px; color: #86909C; font-size: 12px; }
+</style>

package/dist/components/fields/LiteRichTextField.svelte.d.ts

@@ -1,9 +1,12 @@
 import type { FieldDefinition } from '@svadmin/core';
+import { type MarkdownRenderOptions } from '../../rich-content.js';
 interface Props {
     field: FieldDefinition;
     value?: unknown;
     error?: string[];
     mode?: 'show' | 'edit' | 'create';
+    /** Per-field renderer options; app-wide defaults come from configureMarkdownRenderer. */
+    renderOptions?: MarkdownRenderOptions;
 }
 declare const LiteRichTextField: import("svelte").Component<Props, {}, "">;
 type LiteRichTextField = ReturnType<typeof LiteRichTextField>;

package/dist/components/fields/LiteSelectField.svelte

@@ -7,9 +7,11 @@
     value?: unknown;
     error?: string[];
     mode?: 'show' | 'edit' | 'create';
+    /** Caller class merged with the built-in class list. */
+    class?: string;
   }
 
-  let { field, value, error = [], mode = 'show' }: Props = $props();
+  let { field, value, error = [], mode = 'show', class: className = '' }: Props = $props();
   let hasError = $derived(error.length > 0);
 
   function displaySelect(v: unknown): string {
@@ -20,9 +22,9 @@
 </script>
 
 {#if mode === 'show'}
-  <span class="lite-badge">{displaySelect(value)}</span>
+  <span class="lite-badge {className}">{displaySelect(value)}</span>
 {:else}
-  <div>
+  <div class="lite-field-edit {className}">
     <select
       name={field.key}
       id={field.key}

package/dist/components/fields/LiteSelectField.svelte.d.ts

@@ -4,6 +4,8 @@ interface Props {
     value?: unknown;
     error?: string[];
     mode?: 'show' | 'edit' | 'create';
+    /** Caller class merged with the built-in class list. */
+    class?: string;
 }
 declare const LiteSelectField: import("svelte").Component<Props, {}, "">;
 type LiteSelectField = ReturnType<typeof LiteSelectField>;

package/dist/components/fields/LiteTagField.svelte

@@ -6,15 +6,17 @@
     value?: unknown;
     error?: string[];
     mode?: 'show' | 'edit' | 'create';
+    /** Caller class merged with the built-in class list. */
+    class?: string;
   }
 
-  let { field, value, error = [], mode = 'show' }: Props = $props();
+  let { field, value, error = [], mode = 'show', class: className = '' }: Props = $props();
   let hasError = $derived(error.length > 0);
   const tags = $derived(Array.isArray(value) ? value.map(String) : []);
 </script>
 
 {#if mode === 'show'}
-  <div class="lite-inline-xs lite-flex-wrap">
+  <div class="lite-inline-xs lite-flex-wrap {className}">
     {#each tags as tag, _i (_i)}
       <span class="lite-badge">{tag}</span>
     {:else}
@@ -22,19 +24,33 @@
     {/each}
   </div>
 {:else}
-  <div>
-    <!-- For SSR without JS, we just accept a comma-separated string -->
-    <input
-      type="text"
-      name={field.key}
-      id={field.key}
-      value={tags.join(', ')}
-      class="lite-input {hasError ? 'lite-input-error' : ''}"
-      placeholder="Comma separated tags (e.g. admin, user, internal)"
-    />
-    <span style="font-size: 11px; color: #6b7280; display: block; margin-top: 4px;">
-      Separate tags with commas.
-    </span>
+  <div class="lite-tags-input {className}">
+    <!-- SSR 无脚本：每个标签一个同名字段，服务端按 getAll 解析为数组。 -->
+    {#each tags as tag, index (index)}
+      <label class="lite-tags-input__row">
+        <span class="lite-visually-hidden">{field.label ?? 'Tag'} {index + 1}</span>
+        <input
+          type="text"
+          name={field.key}
+          value={tag}
+          class="lite-input{hasError ? ' lite-input-error' : ''}"
+          aria-label={`${field.label ?? 'Tag'} ${index + 1}`}
+          placeholder="Remove this tag by clearing the field"
+        />
+      </label>
+    {/each}
+    <label class="lite-tags-input__row">
+      <span class="lite-visually-hidden">{field.label ?? 'Tag'} (new)</span>
+      <input
+        type="text"
+        name={field.key}
+        value=""
+        class="lite-input{hasError ? ' lite-input-error' : ''}"
+        aria-label={`${field.label ?? 'Tag'} (new)`}
+        placeholder="Add a tag"
+      />
+    </label>
+    <span class="lite-tags-input__hint">One tag per field. Leave a field blank to drop it.</span>
     {#if hasError}
       {#each error as err, _i (_i)}
         <div class="lite-error-text">{err}</div>
@@ -42,3 +58,10 @@
     {/if}
   </div>
 {/if}
+
+<style>
+  .lite-tags-input { display: block; }
+  .lite-tags-input__row { display: block; margin-bottom: 6px; }
+  .lite-tags-input__hint { display: block; margin-top: 4px; color: #6B7280; font-size: 11px; }
+  .lite-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
+</style>

package/dist/components/fields/LiteTagField.svelte.d.ts

@@ -4,6 +4,8 @@ interface Props {
     value?: unknown;
     error?: string[];
     mode?: 'show' | 'edit' | 'create';
+    /** Caller class merged with the built-in class list. */
+    class?: string;
 }
 declare const LiteTagField: import("svelte").Component<Props, {}, "">;
 type LiteTagField = ReturnType<typeof LiteTagField>;

package/dist/components/fields/LiteTextField.svelte

@@ -6,21 +6,42 @@
     value?: unknown;
     error?: string[];
     mode?: 'show' | 'edit' | 'create';
+    /** Caller class merged with the built-in class list. */
+    class?: string;
   }
 
-  let { field, value, error = [], mode = 'show' }: Props = $props();
+  let { field, value, error = [], mode = 'show', class: className = '' }: Props = $props();
   let hasError = $derived(error.length > 0);
+
+  /**
+   * Native input type per value domain. Time, datetime, color, email, url and
+   * phone fields must not degrade to a free-text box.
+   */
+  const nativeType: Record<string, string> = {
+    time: 'time',
+    datetime: 'datetime-local',
+    color: 'color',
+    email: 'email',
+    url: 'url',
+    phone: 'tel',
+  };
+  const hexColour = $derived(typeof value === 'string' && /^#[0-9a-f]{6}$/iu.test(value) ? value : '#000000');
+  const colorNeedsTextFallback = $derived(field.type === 'color' && value != null && String(value) !== '' && !/^#[0-9a-f]{6}$/iu.test(String(value)));
+  const inputType = $derived(
+    field.type === 'color' && colorNeedsTextFallback ? 'text' : nativeType[field.type] ?? 'text',
+  );
+  const inputValue = $derived(inputType === 'color' ? hexColour : String(value ?? ''));
 </script>
 
 {#if mode === 'show'}
-  <span>{value == null ? '—' : String(value)}</span>
+  <span class="lite-field-value {className}">{value == null ? '—' : String(value)}</span>
 {:else}
-  <div>
+  <div class="lite-field-edit {className}">
     <input
-      type="text"
+      type={inputType}
       name={field.key}
       id={field.key}
-      value={String(value ?? '')}
+      value={inputValue}
       class="lite-input {hasError ? 'lite-input-error' : ''}"
       placeholder={field.label}
       {...field.required ? { required: true } : {}}

package/dist/components/fields/LiteTextField.svelte.d.ts

@@ -4,6 +4,8 @@ interface Props {
     value?: unknown;
     error?: string[];
     mode?: 'show' | 'edit' | 'create';
+    /** Caller class merged with the built-in class list. */
+    class?: string;
 }
 declare const LiteTextField: import("svelte").Component<Props, {}, "">;
 type LiteTextField = ReturnType<typeof LiteTextField>;

package/dist/components/fields/LiteTreeSelect.svelte

@@ -23,6 +23,8 @@
     required?: boolean;
     error?: string[];
     mode?: 'show' | 'edit' | 'create';
+    /** Caller class merged with the built-in class list. */
+    class?: string;
   }
 
   let {
@@ -37,6 +39,7 @@
     required = field?.required ?? false,
     error = [],
     mode = 'show',
+    class: className = ''
   }: Props = $props();
 
   const hasError = $derived(error.length > 0);
@@ -87,9 +90,9 @@
 </script>
 
 {#if mode === 'show'}
-  <span class="lite-badge">{formatDisplay(value)}</span>
+  <span class="lite-badge {className}">{formatDisplay(value)}</span>
 {:else}
-  <div class="lite-form-group">
+  <div class="lite-form-group {className}">
     {#if label}
       <label class="lite-label" for={name}>
         {label}

package/dist/components/fields/LiteTreeSelect.svelte.d.ts

@@ -17,6 +17,8 @@ interface Props {
     required?: boolean;
     error?: string[];
     mode?: 'show' | 'edit' | 'create';
+    /** Caller class merged with the built-in class list. */
+    class?: string;
 }
 declare const LiteTreeSelect: import("svelte").Component<Props, {}, "">;
 type LiteTreeSelect = ReturnType<typeof LiteTreeSelect>;

package/dist/components/fields/LiteUrlField.svelte

@@ -7,9 +7,11 @@
     value?: unknown;
     error?: string[];
     mode?: 'show' | 'edit' | 'create';
+    /** Caller class merged with the built-in class list. */
+    class?: string;
   }
 
-  let { field, value, error = [], mode = 'show' }: Props = $props();
+  let { field, value, error = [], mode = 'show', class: className = '' }: Props = $props();
   let hasError = $derived(error.length > 0);
   let displayValue = $derived(toSafeText(value));
   let safeHref = $derived(toSafeHref(value));
@@ -17,7 +19,7 @@
 </script>
 
 {#if mode === 'show'}
-  <span>
+  <span class="lite-field-value {className}">
     {#if displayValue}
       {#if safeHref}
         <a href={safeHref} target="_blank" rel="noopener noreferrer">{displayValue}</a>
@@ -29,7 +31,7 @@
     {/if}
   </span>
 {:else}
-  <div>
+  <div class="lite-field-edit {className}">
     <input
       type="url"
       name={field.key}

package/dist/components/fields/LiteUrlField.svelte.d.ts

@@ -4,6 +4,8 @@ interface Props {
     value?: unknown;
     error?: string[];
     mode?: 'show' | 'edit' | 'create';
+    /** Caller class merged with the built-in class list. */
+    class?: string;
 }
 declare const LiteUrlField: import("svelte").Component<Props, {}, "">;
 type LiteUrlField = ReturnType<typeof LiteUrlField>;

package/dist/components/layout/LiteSidebar.svelte

@@ -11,6 +11,8 @@
     basePath?: string;
     menu?: MenuItem[];
     canAccess?: (resource: string, action: string) => boolean;
+    /** Caller class merged with the built-in class list. */
+    class?: string;
   }
 
   let {
@@ -21,6 +23,7 @@
     basePath = '/lite',
     menu,
     canAccess,
+    class: className = ''
   }: Props = $props();
 
   const menuResources = $derived(filterVisibleResources(resources, canAccess));
@@ -29,7 +32,7 @@
   const visibleMenu = $derived(menu ? filterVisibleMenu(menu, canAccess) : []);
 </script>
 
-<nav class="lite-sidebar">
+<nav class={`lite-sidebar ${className}`.trim()}>
   <div class="lite-sidebar-brand">{brandName}</div>
   {#if hasCustomMenu}
     <LiteMenuList items={visibleMenu} {basePath} {currentResource} />

package/dist/components/layout/LiteSidebar.svelte.d.ts

@@ -7,6 +7,8 @@ interface Props {
     basePath?: string;
     menu?: MenuItem[];
     canAccess?: (resource: string, action: string) => boolean;
+    /** Caller class merged with the built-in class list. */
+    class?: string;
 }
 declare const LiteSidebar: import("svelte").Component<Props, {}, "">;
 type LiteSidebar = ReturnType<typeof LiteSidebar>;

package/dist/components/pages/LiteCreatePage.svelte

@@ -10,6 +10,8 @@
     errors?: Record<string, string[]>;
     values?: Record<string, unknown>;
     basePath?: string;
+    /** Caller class merged with the built-in class list. */
+    class?: string;
   }
 
   let {
@@ -17,10 +19,11 @@
     errors = {},
     values = {},
     basePath = "/lite",
+    class: className = '',
   }: Props = $props();
 </script>
 
-<div class="lite-page">
+<div class="lite-page {className}">
   <LiteBreadcrumbs
     items={[
       { label: t("common.dashboard") || "Dashboard", href: basePath },

package/dist/components/pages/LiteCreatePage.svelte.d.ts

@@ -4,6 +4,8 @@ interface Props {
     errors?: Record<string, string[]>;
     values?: Record<string, unknown>;
     basePath?: string;
+    /** Caller class merged with the built-in class list. */
+    class?: string;
 }
 declare const LiteCreatePage: import("svelte").Component<Props, {}, "">;
 type LiteCreatePage = ReturnType<typeof LiteCreatePage>;

package/dist/components/pages/LiteEditPage.svelte

@@ -14,6 +14,8 @@
     basePath?: string;
     canDelete?: boolean;
     canShow?: boolean;
+    /** Caller class merged with the built-in class list. */
+    class?: string;
   }
 
   let {
@@ -23,6 +25,7 @@
     basePath = "/lite",
     canDelete,
     canShow,
+    class: className = '',
   }: Props = $props();
 
   let pk = $derived(resource.primaryKey ?? "id");
@@ -31,7 +34,7 @@
   const showView = $derived(canShow ?? resource.canShow !== false);
 </script>
 
-<div class="lite-page">
+<div class="lite-page {className}">
   <LiteBreadcrumbs
     items={[
       { label: t("common.dashboard") || "Dashboard", href: basePath },

package/dist/components/pages/LiteEditPage.svelte.d.ts

@@ -6,6 +6,8 @@ interface Props {
     basePath?: string;
     canDelete?: boolean;
     canShow?: boolean;
+    /** Caller class merged with the built-in class list. */
+    class?: string;
 }
 declare const LiteEditPage: import("svelte").Component<Props, {}, "">;
 type LiteEditPage = ReturnType<typeof LiteEditPage>;

package/dist/components/pages/LiteListPage.svelte

@@ -24,6 +24,8 @@
     canEdit?: boolean;
     canDelete?: boolean;
     enableBatch?: boolean;
+    /** Caller class merged with the built-in class list. */
+    class?: string;
   }
 
   let {
@@ -41,6 +43,7 @@
     canEdit,
     canDelete,
     enableBatch = true,
+    class: className = '',
   }: Props = $props();
 
   const showCreate = $derived(canCreate ?? resource.canCreate !== false);
@@ -59,7 +62,7 @@
   );
 </script>
 
-<div class="lite-page">
+<div class="lite-page {className}">
   <LiteBreadcrumbs
     items={[
       { label: t("common.dashboard") || "Dashboard", href: basePath },

package/dist/components/pages/LiteListPage.svelte.d.ts

@@ -17,6 +17,8 @@ interface Props {
     canEdit?: boolean;
     canDelete?: boolean;
     enableBatch?: boolean;
+    /** Caller class merged with the built-in class list. */
+    class?: string;
 }
 declare const LiteListPage: import("svelte").Component<Props, {}, "">;
 type LiteListPage = ReturnType<typeof LiteListPage>;

package/dist/components/pages/LiteShowPage.svelte

@@ -13,6 +13,8 @@
     basePath?: string;
     canEdit?: boolean;
     canDelete?: boolean;
+    /** Caller class merged with the built-in class list. */
+    class?: string;
   }
 
   let {
@@ -21,6 +23,7 @@
     basePath = "/lite",
     canEdit,
     canDelete,
+    class: className = '',
   }: Props = $props();
 
   let pk = $derived(resource.primaryKey ?? "id");
@@ -33,7 +36,7 @@
   );
 </script>
 
-<div class="lite-page">
+<div class="lite-page {className}">
   <LiteBreadcrumbs
     items={[
       { label: t("common.dashboard") || "Dashboard", href: basePath },

package/dist/components/pages/LiteShowPage.svelte.d.ts

@@ -5,6 +5,8 @@ interface Props {
     basePath?: string;
     canEdit?: boolean;
     canDelete?: boolean;
+    /** Caller class merged with the built-in class list. */
+    class?: string;
 }
 declare const LiteShowPage: import("svelte").Component<Props, {}, "">;
 type LiteShowPage = ReturnType<typeof LiteShowPage>;

package/dist/components/widgets/LiteAnomalyBadge.svelte

@@ -10,6 +10,8 @@
     threshold?: number;
     formatter?: (val: number) => string;
     lowerIsBetter?: boolean;
+    /** Caller class merged with the built-in class list. */
+    class?: string;
   }
 
   let {
@@ -18,6 +20,7 @@
     threshold = 0.2,
     formatter = (v: number) => v.toString(),
     lowerIsBetter = false,
+    class: className = '',
   }: Props = $props();
 
   const diff = $derived(
@@ -32,11 +35,11 @@
 </script>
 
 {#if !isAnomaly}
-  <span style="font-size: 14px; color: #4E5969;">{formatter(value)}</span>
+  <span class="lite-anomaly-value {className}" style="font-size: 14px; color: #4E5969;">{formatter(value)}</span>
 {:else}
   <span
     title="Baseline: {formatter(baseline)} ({diff > 0 ? '+' : '-'}{percentLabel})"
-    class="lite-badge"
+    class="lite-badge {className}"
     style="background: {isGood ? '#E8FFEA' : '#FFECE8'}; color: {isGood ? '#009A29' : '#CB272D'}; border: 1px solid {isGood ? '#E8FFEA' : '#FDCDC5'};"
   >
     {arrow} {formatter(value)}

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

@@ -9,6 +9,8 @@ interface Props {
     threshold?: number;
     formatter?: (val: number) => string;
     lowerIsBetter?: boolean;
+    /** Caller class merged with the built-in class list. */
+    class?: string;
 }
 declare const LiteAnomalyBadge: import("svelte").Component<Props, {}, "">;
 type LiteAnomalyBadge = ReturnType<typeof LiteAnomalyBadge>;

package/dist/components/widgets/LiteAreaChart.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="area" rows={normalized} {title} />
+  <LiteChartTable {title} kind="area" columns={columns ?? ['Label', 'Value']} rows={normalized} {emptyText} />
+</div>

package/dist/components/widgets/LiteAreaChart.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 LiteAreaChart: import("svelte").Component<Props, {}, "">;
+type LiteAreaChart = ReturnType<typeof LiteAreaChart>;
+export default LiteAreaChart;