@svadmin/lite 0.12.0 → 0.14.0

package/dist/components/LiteJsonSchemaForm.svelte

@@ -1,8 +1,10 @@
 <script lang="ts">
-  import { definedOptions } from '@svadmin/core/options';
+  import { assertSchemaFormSchema, isSchemaFormNodeVisible, type SchemaFormSchema as JsonSchema } from '@svadmin/core/schema-form';
+  import { useTranslation } from '@svadmin/core/i18n';
+  import { encodeSchemaFormArrayAction, schemaFormActionName, schemaFormFieldName } from '../schema-form-data';
 
   interface Props {
-    schema: Record<string, unknown>;
+    schema: JsonSchema;
     value?: Record<string, unknown>;
     action?: string;
     method?: 'get' | 'post' | 'dialog' | 'GET' | 'POST' | 'DIALOG' | null;
@@ -11,94 +13,202 @@
 
   let {
     schema,
-    value = {},
+    value = $bindable(undefined),
     action = '',
     method = 'POST',
     submitText = 'Submit Form',
   }: Props = $props();
+  const instanceId = $props.id();
+  const i18n = useTranslation();
 
-  interface FieldMeta {
-    key: string;
-    title: string;
-    type: string;
-    enum?: Array<string | number>;
-    required?: boolean;
+  function cloneDefault(node: JsonSchema): unknown {
+    if (node.default !== undefined) return structuredClone($state.snapshot(node.default));
+    if (node.type === 'null') return null;
+    if (node.type === 'object' || node.properties) {
+      return Object.fromEntries(
+        Object.entries(node.properties ?? {})
+          .map(([key, child]) => [key, cloneDefault(child)])
+          .filter(([, child]) => child !== undefined),
+      );
+    }
+    if (node.type === 'array') return [];
+    return undefined;
   }
 
-  const properties = $derived.by<FieldMeta[]>(() => {
-    const propsObj = (schema['properties'] ?? {}) as Record<string, Record<string, unknown>>;
-    const requiredKeys = Array.isArray(schema['required']) ? (schema['required'] as string[]) : [];
-
-    return Object.entries(propsObj).map(([key, propDef]) => (definedOptions({
-      key,
-      title: String(propDef['title'] ?? key),
-      type: String(propDef['type'] ?? 'string'),
-      enum: Array.isArray(propDef['enum']) ? (propDef['enum'] as Array<string | number>) : undefined,
-      required: requiredKeys.includes(key),
-    })));
+  function mergeDefaults(node: JsonSchema, current: unknown, present: boolean, budget = { nodes: 0 }): unknown {
+    if (++budget.nodes > 1000) throw new Error('Schema form data limit exceeded.');
+    const candidate = present ? current : cloneDefault(node);
+    if (candidate === null || (present && candidate === undefined)) return candidate;
+    if (node.type === 'array') {
+      if (Array.isArray(candidate) && candidate.length > 1000 - budget.nodes) throw new Error('Schema form data limit exceeded.');
+      return Array.isArray(candidate)
+        ? candidate.map(item => mergeDefaults(node.items ?? { type: 'string' }, item, true, budget))
+        : candidate;
+    }
+    if (node.type !== 'object' && !node.properties) return candidate;
+    if (candidate !== undefined && (typeof candidate !== 'object' || Array.isArray(candidate))) return candidate;
+    const source = (candidate ?? {}) as Record<string, unknown>;
+    const result: Record<string, unknown> = { ...source };
+    for (const [key, child] of Object.entries(node.properties ?? {})) {
+      const own = Object.hasOwn(source, key);
+      const next = mergeDefaults(child, own ? source[key] : undefined, own, budget);
+      if (next !== undefined || own) Object.defineProperty(result, key, { value: next, enumerable: true, configurable: true, writable: true });
+    }
+    return result;
+  }
+
+  const resolved = $derived.by(() => {
+    try {
+      assertSchemaFormSchema(schema);
+      const next = mergeDefaults(schema, value, value !== undefined);
+      return { invalid: false, data: next && typeof next === 'object' && !Array.isArray(next) ? next as Record<string, unknown> : {} };
+    } catch {
+      return { invalid: true, data: {} as Record<string, unknown> };
+    }
   });
+  const resolvedValue = $derived(resolved.data);
+
+  function readPath(path: string[]): unknown {
+    return path.reduce<unknown>((current, key) => (
+      current && typeof current === 'object' && Object.hasOwn(current, key) ? (current as Record<string, unknown>)[key] : undefined
+    ), resolvedValue);
+  }
+
+  function writePath(path: string[], nextValue: unknown): void {
+    const next = structuredClone($state.snapshot(resolvedValue));
+    let target: Record<string, unknown> = next;
+    for (const key of path.slice(0, -1)) {
+      const child = Object.hasOwn(target, key) ? target[key] : undefined;
+      const container = child && typeof child === 'object' ? child : {};
+      Object.defineProperty(target, key, { value: container, enumerable: true, configurable: true, writable: true });
+      target = container as Record<string, unknown>;
+    }
+    const lastKey = path[path.length - 1];
+    if (lastKey !== undefined) Object.defineProperty(target, lastKey, { value: nextValue, enumerable: true, configurable: true, writable: true });
+    value = next;
+  }
+
+  function fieldName(path: string[]): string {
+    return schemaFormFieldName(path);
+  }
+
+  function enumToken(index: number): string {
+    return `__json_enum_${index}`;
+  }
+
+  function enumIndex(current: unknown, options: JsonSchema['enum']): number {
+    return options?.findIndex(option => Object.is(option, current)) ?? -1;
+  }
+
+  function enumValue(raw: string, options: JsonSchema['enum']): unknown {
+    if (!/^__json_enum_(0|[1-9]\d*)$/.test(raw)) return undefined;
+    const index = Number(raw.slice('__json_enum_'.length));
+    return Number.isSafeInteger(index) ? options?.[index] : undefined;
+  }
+
+  function addArrayItem(path: string[], itemSchema: JsonSchema): void {
+    const current = readPath(path);
+    const items = Array.isArray(current) ? current : [];
+    const item = cloneDefault(itemSchema);
+    writePath(path, [...items, item === undefined ? (itemSchema.type === 'object' ? {} : '') : item]);
+  }
+
+  function removeArrayItem(path: string[], index: number): void {
+    const current = readPath(path);
+    if (Array.isArray(current)) writePath(path, current.filter((_, itemIndex) => itemIndex !== index));
+  }
 </script>
 
 <div class="lite-schema-form-card">
-  {#if schema['title']}
-    <div class="lite-schema-form-header">
-      <strong>{schema['title']}</strong>
-    </div>
-  {/if}
+  {#if schema.title}<div class="lite-schema-form-header"><strong>{schema.title}</strong></div>{/if}
+  {#if schema.description}<p class="lite-schema-description">{schema.description}</p>{/if}
 
   <form {action} {method} class="lite-schema-form">
-    {#each properties as field (field.key)}
-      <div class="lite-schema-field">
-        <label for="lite_json_{field.key}" class="lite-label">
-          {field.title} {#if field.required}<span style="color: #ef4444;">*</span>{/if}
-        </label>
-        {#if field.enum}
-          <select id="lite_json_{field.key}" name={field.key} class="lite-select" required={field.required}>
-            {#each field.enum as option (option)}
-              <option value={String(option)} selected={String(value[field.key]) === String(option)}>
-                {option}
-              </option>
-            {/each}
-          </select>
-        {:else if field.type === 'boolean'}
-          <input id="lite_json_{field.key}" type="checkbox" name={field.key} checked={Boolean(value[field.key])} />
-        {:else if field.type === 'number' || field.type === 'integer'}
-          <input id="lite_json_{field.key}" type="number" name={field.key} value={Number(value[field.key] ?? 0)} class="lite-input" required={field.required} />
-        {:else}
-          <input id="lite_json_{field.key}" type="text" name={field.key} value={String(value[field.key] ?? '')} class="lite-input" required={field.required} />
-        {/if}
-      </div>
-    {/each}
+    {#if resolved.invalid}<p role="alert">{i18n.t('common.operationFailed')}</p>{/if}
+    {#snippet renderField(node: JsonSchema, path: string[], title: string, required = false)}
+      {@const current = readPath(path)}
+      {@const id = `${instanceId}-${encodeURIComponent(JSON.stringify(path))}`}
+      {#if !isSchemaFormNodeVisible(node, resolvedValue)}
+        <!-- 隐藏字段不进入原生表单传输。 -->
+      {:else if node.type === 'object' || node.properties}
+        <fieldset class="lite-schema-fieldset">
+          <legend>{title}</legend>
+          {#if node.description}<p class="lite-schema-description">{node.description}</p>{/if}
+          {#each Object.entries(node.properties ?? {}) as [key, child] (key)}
+            {@render renderField(child, [...path, key], child.title ?? key, node.required?.includes(key) ?? false)}
+          {/each}
+        </fieldset>
+      {:else if node.type === 'array'}
+        {@const items = Array.isArray(current) ? current : []}
+        <fieldset class="lite-schema-fieldset">
+          <input type="hidden" name={`length:${JSON.stringify(path)}`} value={items.length} />
+          <legend>{title}</legend>
+          {#if node.description}<p class="lite-schema-description">{node.description}</p>{/if}
+          {#each items as _, index (index)}
+            {@render renderField(node.items ?? { type: 'string' }, [...path, String(index)], `${title} ${index + 1}`)}
+            <button
+              type={action ? 'submit' : 'button'}
+              formnovalidate
+              name={action ? schemaFormActionName : undefined}
+              value={action ? encodeSchemaFormArrayAction({ type: 'remove', path, index }) : undefined}
+              class="lite-btn lite-btn-sm"
+              disabled={node.minItems !== undefined && items.length <= node.minItems}
+              onclick={action ? (event) => { event.preventDefault(); removeArrayItem(path, index); } : () => removeArrayItem(path, index)}
+            >Remove</button>
+          {:else}
+            <span class="lite-hint">No items</span>
+          {/each}
+          <button
+            type={action ? 'submit' : 'button'}
+            formnovalidate
+            name={action ? schemaFormActionName : undefined}
+            value={action ? encodeSchemaFormArrayAction({ type: 'add', path }) : undefined}
+            class="lite-btn lite-btn-sm"
+            disabled={node.maxItems !== undefined && items.length >= node.maxItems}
+            onclick={action ? (event) => { event.preventDefault(); addArrayItem(path, node.items ?? { type: 'string' }); } : () => addArrayItem(path, node.items ?? { type: 'string' })}
+          >Add item</button>
+        </fieldset>
+      {:else}
+        <div class="lite-schema-field">
+          <label for={id} class="lite-label">{title}{#if required}<span aria-hidden="true">*</span>{/if}</label>
+          {#if node.description}<p class="lite-schema-description">{node.description}</p>{/if}
+          {#if node.enum}
+            <select id={id} name={fieldName(path)} required={required} value={enumIndex(current, node.enum) < 0 ? '' : enumToken(enumIndex(current, node.enum))} onchange={(event) => writePath(path, enumValue(event.currentTarget.value, node.enum))} class="lite-select">
+              <option value="">Select an option</option>
+              {#each node.enum as option, index (index)}<option value={enumToken(index)}>{String(option)}</option>{/each}
+            </select>
+          {:else if node.type === 'null'}
+            <input id={id} name={fieldName(path)} value="null" readonly />
+          {:else if node.type === 'boolean'}
+            <input type="hidden" name={fieldName(path)} value="false" />
+            <input id={id} type="checkbox" name={fieldName(path)} value="true" checked={Boolean(current)} onchange={(event) => writePath(path, event.currentTarget.checked)} />
+          {:else if node.type === 'number' || node.type === 'integer'}
+            <input id={id} name={fieldName(path)} type="number" step={node.type === 'integer' ? 1 : 'any'} min={node.minimum} max={node.maximum} required={required} value={current == null ? '' : String(current)} oninput={(event) => writePath(path, event.currentTarget.value === '' ? undefined : Number(event.currentTarget.value))} class="lite-input" />
+          {:else}
+            <input id={id} name={fieldName(path)} type="text" minlength={node.minLength} maxlength={node.maxLength} pattern={node.pattern} required={required} value={String(current ?? '')} oninput={(event) => writePath(path, event.currentTarget.value)} class="lite-input" />
+          {/if}
+        </div>
+      {/if}
+    {/snippet}
 
+    {#each Object.entries(resolved.invalid ? {} : schema.properties ?? {}) as [key, node] (key)}
+      {@render renderField(node, [key], node.title ?? key, schema.required?.includes(key) ?? false)}
+    {/each}
     <div class="lite-schema-footer">
-      <button type="submit" class="lite-btn lite-btn-primary lite-btn-sm">
-        {submitText}
-      </button>
+      <button type="submit" disabled={resolved.invalid} class="lite-btn lite-btn-primary lite-btn-sm">{submitText}</button>
     </div>
   </form>
 </div>
 
 <style>
-  .lite-schema-form-card {
-    background: #ffffff;
-    border: 1px solid #cbd5e1;
-    border-radius: 6px;
-    padding: 16px;
-    margin-bottom: 16px;
-  }
-  .lite-schema-form-header {
-    padding-bottom: 8px;
-    border-bottom: 1px solid #e2e8f0;
-    margin-bottom: 12px;
-    font-size: 14px;
-  }
-  .lite-schema-field {
-    margin-bottom: 12px;
-  }
-  .lite-schema-footer {
-    display: flex;
-    justify-content: flex-end;
-    padding-top: 12px;
-    border-top: 1px solid #e2e8f0;
-  }
+  .lite-schema-form-card { background: #fff; border: 1px solid #cbd5e1; border-radius: 6px; padding: 16px; margin-bottom: 16px; }
+  .lite-schema-form-header { padding-bottom: 8px; border-bottom: 1px solid #e2e8f0; margin-bottom: 12px; font-size: 14px; }
+  .lite-schema-fieldset { border: 1px solid #e2e8f0; border-radius: 4px; padding: 12px; margin: 0 0 12px; }
+  .lite-schema-field { margin-bottom: 12px; }
+  .lite-schema-fieldset > .lite-schema-field:last-child { margin-bottom: 0; }
+  .lite-schema-footer { display: flex; justify-content: flex-end; padding-top: 12px; border-top: 1px solid #e2e8f0; }
+  .lite-label { display: block; font-size: 12px; color: #475569; margin-bottom: 4px; }
+  .lite-schema-description, .lite-hint { font-size: 12px; color: #64748b; }
+  .lite-input, .lite-select { width: 100%; }
+  .lite-btn { margin-right: 6px; }
 </style>

package/dist/components/LiteJsonSchemaForm.svelte.d.ts

@@ -1,10 +1,11 @@
+import { type SchemaFormSchema as JsonSchema } from '@svadmin/core/schema-form';
 interface Props {
-    schema: Record<string, unknown>;
+    schema: JsonSchema;
     value?: Record<string, unknown>;
     action?: string;
     method?: 'get' | 'post' | 'dialog' | 'GET' | 'POST' | 'DIALOG' | null;
     submitText?: string;
 }
-declare const LiteJsonSchemaForm: import("svelte").Component<Props, {}, "">;
+declare const LiteJsonSchemaForm: import("svelte").Component<Props, {}, "value">;
 type LiteJsonSchemaForm = ReturnType<typeof LiteJsonSchemaForm>;
 export default LiteJsonSchemaForm;

package/dist/components/LiteKanbanBoard.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { useTranslation } from '@svadmin/core/i18n';
   export interface KanbanCard {
     id: string;
     title: string;
@@ -17,6 +18,10 @@
     columns: KanbanColumn[];
     cards?: KanbanCard[];
     formAction?: string;
+    loading?: boolean;
+    error?: string | undefined;
+    retryHref?: string;
+    ariaLabel?: string;
     class?: string;
   }
 
@@ -24,14 +29,54 @@
     columns = [],
     cards = [],
     formAction = '',
+    loading = false,
+    error,
+    retryHref,
+    ariaLabel,
     class: className = '',
   }: Props = $props();
+  const i18n = useTranslation();
+  function text(value: unknown): value is string {
+    return typeof value === 'string' && value.trim().length > 0 && value.length <= 1000;
+  }
+  const validationError = $derived.by(() => {
+    if (!Array.isArray(columns) || !Array.isArray(cards)) return 'kanban.invalidData';
+    if (columns.length > 200 || cards.length > 1000) return 'kanban.limit';
+    if (columns.some(column => !column || !text(column.id) || !text(column.title))) return 'kanban.invalidData';
+    const ids = new Set(columns.map(column => column.id));
+    if (ids.size !== columns.length) return 'kanban.invalidData';
+    const cardIds = new Set<string>();
+    for (const card of cards) {
+      if (!card || !text(card.id) || !text(card.title) || !ids.has(card.columnId) || cardIds.has(card.id)
+        || (card.description !== undefined && (typeof card.description !== 'string' || card.description.length > 10_000))
+        || (card.tags !== undefined && (!Array.isArray(card.tags) || card.tags.length > 100 || !card.tags.every(text)))
+        || (card.priority !== undefined && !['low', 'medium', 'high', 'urgent'].includes(card.priority))) return 'kanban.invalidData';
+      cardIds.add(card.id);
+    }
+    return '';
+  });
+  const displayError = $derived(error || (validationError ? i18n.t(validationError) : ''));
+  function localPath(value: string | undefined): string | undefined {
+    return value && (value.startsWith('/') || value.startsWith('?'))
+      && !/^\/[\\/]/.test(value) && !value.includes('\\')
+      && ![...value].some(char => char.charCodeAt(0) <= 32 || char.charCodeAt(0) === 127) ? value : undefined;
+  }
+  const safeAction = $derived(localPath(formAction));
+  const safeRetry = $derived(localPath(retryHref));
 </script>
 
-<div class="sv-lite-kanban-board {className}">
+<div class="sv-lite-kanban-board {className}" role="region" aria-label={ariaLabel ?? i18n.t('kanban.label')} aria-busy={loading}>
+  {#if loading}
+    <div role="status">{i18n.t('common.loading')}</div>
+  {:else if displayError}
+    <div role="alert">{displayError}</div>
+    {#if error && safeRetry}<a href={safeRetry}>{i18n.t('common.retry')}</a>{/if}
+  {:else if columns.length === 0}
+    <div role="status">{i18n.t('common.noData')}</div>
+  {:else}
   {#each columns as col (col.id)}
     {@const colCards = cards.filter((c) => c.columnId === col.id)}
-    <div class="sv-lite-kanban-column">
+    <div class="sv-lite-kanban-column" role="region" aria-label={col.title}>
       <div class="sv-lite-column-header">
         <span class="sv-lite-column-title">{col.title}</span>
         <span class="sv-lite-column-count">({colCards.length})</span>
@@ -39,7 +84,7 @@
 
       <div class="sv-lite-column-cards">
         {#each colCards as card (card.id)}
-          <div class="sv-lite-kanban-card">
+          <div class="sv-lite-kanban-card" role="group" aria-label={card.title}>
             <div class="sv-lite-card-title">{card.title}</div>
             {#if card.description}
               <div class="sv-lite-card-desc">{card.description}</div>
@@ -48,23 +93,26 @@
               {#if card.priority}
                 <span class="sv-lite-priority-badge sv-lite-{card.priority}">{card.priority}</span>
               {/if}
-              {#each card.tags ?? [] as tag (tag)}
+              {#each card.tags ?? [] as tag, index (index)}
                 <span class="sv-lite-tag-badge">#{tag}</span>
               {/each}
             </div>
           </div>
+        {:else}
+          <div role="status">{i18n.t('common.noData')}</div>
         {/each}
       </div>
 
-      {#if formAction}
-        <form method="POST" action={formAction} class="sv-lite-card-form">
+      {#if safeAction && cards.length < 1000}
+        <form method="POST" action={safeAction} class="sv-lite-card-form" aria-label={i18n.t('kanban.addTo', { column: col.title })}>
           <input type="hidden" name="columnId" value={col.id} />
-          <input type="text" name="title" placeholder="+ Add card..." class="sv-lite-card-input" />
-          <button type="submit" class="sv-lite-card-btn">Add</button>
+          <input type="text" name="title" aria-label={i18n.t('kanban.cardTitle')} placeholder={i18n.t('kanban.cardTitle')} required maxlength={1000} class="sv-lite-card-input" />
+          <button type="submit" class="sv-lite-card-btn">{i18n.t('common.add')}</button>
         </form>
       {/if}
     </div>
   {/each}
+  {/if}
 </div>
 
 <style>

package/dist/components/LiteKanbanBoard.svelte.d.ts

@@ -14,6 +14,10 @@ interface Props {
     columns: KanbanColumn[];
     cards?: KanbanCard[];
     formAction?: string;
+    loading?: boolean;
+    error?: string | undefined;
+    retryHref?: string;
+    ariaLabel?: string;
     class?: string;
 }
 declare const LiteKanbanBoard: import("svelte").Component<Props, {}, "">;

package/dist/components/LitePivotTable.svelte

@@ -1,8 +1,11 @@
 <script lang="ts">
-  export type AggregationFn = 'sum' | 'count' | 'avg' | 'min' | 'max';
+  import { useTranslation } from '@svadmin/core/i18n';
+  import { buildPivot, buildPivotDrilldown, decodePivotResult, formatPivotValue } from '@svadmin/core/pivot';
+  export type AggregationFn = import('@svadmin/core/pivot').PivotAggregation;
 
   interface Props {
     data?: Record<string, unknown>[];
+    aggregateData?: unknown;
     rowField: string;
     rowLabel?: string;
     columnField: string;
@@ -10,11 +13,23 @@
     valueField: string;
     valueLabel?: string;
     aggregator?: AggregationFn;
+    formatValue?: (value: number) => string;
+    loading?: boolean;
+    error?: string | undefined;
+    retryHref?: string;
+    exportHref?: string;
+    drilldownHref?: (input: import('@svadmin/core/pivot').PivotDrilldown) => string | undefined;
+    resource?: string;
+    scopeKey?: string;
+    filters?: import('@svadmin/core').Filter[];
+    meta?: Record<string, unknown>;
+    ariaLabel?: string;
     class?: string;
   }
 
   let {
     data = [],
+    aggregateData,
     rowField,
     rowLabel = rowField,
     columnField,
@@ -22,91 +37,106 @@
     valueField,
     valueLabel = valueField,
     aggregator = 'sum',
+    formatValue,
+    loading = false,
+    error,
+    retryHref,
+    exportHref,
+    drilldownHref,
+    resource,
+    scopeKey,
+    filters,
+    meta,
+    ariaLabel,
     class: className = '',
   }: Props = $props();
 
-  const distinctRowValues = $derived(
-    Array.from(new Set(data.map((d) => String(d[rowField] ?? '—')))).sort()
-  );
-
-  const distinctColValues = $derived(
-    Array.from(new Set(data.map((d) => String(d[columnField] ?? '—')))).sort()
-  );
-
-  function computeAgg(vals: number[]): number {
-    if (vals.length === 0) return 0;
-    if (aggregator === 'count') return vals.length;
-    if (aggregator === 'sum') return vals.reduce((a, b) => a + b, 0);
-    if (aggregator === 'avg') return vals.reduce((a, b) => a + b, 0) / vals.length;
-    if (aggregator === 'min') return Math.min(...vals);
-    if (aggregator === 'max') return Math.max(...vals);
-    return 0;
+  const i18n = useTranslation();
+  const pivot = $derived(aggregateData !== undefined ? decodePivotResult(aggregateData)
+    : buildPivot(loading || error ? [] : data, { rowField, columnField, valueField, aggregator }));
+  const displayError = $derived(error || (pivot.error ? i18n.t(`pivot.${pivot.error}`) : ''));
+  // 重试仅接受站内绝对路径，避免在服务端页面输出可执行协议。
+  const safeRetryHref = $derived(safeHref(retryHref));
+  const safeExportHref = $derived(safeHref(exportHref));
+  function safeHref(value: string | undefined): string | undefined {
+    return value?.startsWith('/') && !/^\/[\\/]/.test(value)
+      && !value.includes('\\')
+      && ![...value].some(char => char.charCodeAt(0) <= 32 || char.charCodeAt(0) === 127) ? value : undefined;
   }
-
-  function getCellValue(r: string, c: string): number {
-    const vals = data
-      .filter((d) => String(d[rowField] ?? '—') === r && String(d[columnField] ?? '—') === c)
-      .map((d) => Number(d[valueField]) || 0);
-    return computeAgg(vals);
+  function cellHref(rowKey: string, columnKey: string): string | undefined {
+    if (!drilldownHref || !pivot.cells.get(rowKey)?.has(columnKey)) return;
+    const row = pivot.rows.find(item => item.key === rowKey);
+    const column = pivot.columns.find(item => item.key === columnKey);
+    const query = { resource, rowField, columnField, valueField, aggregator,
+      ...(filters === undefined ? {} : { filters }), ...(meta === undefined ? {} : { meta }) };
+    const input = buildPivotDrilldown(query, scopeKey, row, column);
+    try {
+      return safeHref(input ? drilldownHref(input) : undefined);
+    } catch {
+      return;
+    }
   }
-
-  function getRowTotal(r: string): number {
-    const vals = data
-      .filter((d) => String(d[rowField] ?? '—') === r)
-      .map((d) => Number(d[valueField]) || 0);
-    return computeAgg(vals);
+  function display(value: number | null | undefined): string {
+    return formatPivotValue(value, formatValue ?? (v => v.toLocaleString(i18n.locale, { maximumFractionDigits: 2 })));
   }
-
-  function getColTotal(c: string): number {
-    const vals = data
-      .filter((d) => String(d[columnField] ?? '—') === c)
-      .map((d) => Number(d[valueField]) || 0);
-    return computeAgg(vals);
-  }
-
-  const grandTotal = $derived(
-    computeAgg(data.map((d) => Number(d[valueField]) || 0))
-  );
 </script>
 
-<div class="sv-lite-pivot-container {className}">
+<div class="sv-lite-pivot-container {className}" aria-busy={loading}>
   <div class="sv-lite-pivot-header">
-    <strong>Pivot Analysis</strong> ({rowLabel} × {columnLabel})
-    <span class="sv-lite-pivot-sub">Aggregator: {aggregator.toUpperCase()} ({valueLabel})</span>
+    <strong>{i18n.t('pivot.title')}</strong> ({rowLabel} × {columnLabel})
+    <span class="sv-lite-pivot-sub">{i18n.t(`pivot.${aggregator}`)} ({valueLabel})</span>
+    {#if safeExportHref}<a href={safeExportHref}>{i18n.t('common.export')}</a>{/if}
   </div>
 
-  <table class="sv-lite-pivot-table">
+  {#if loading}
+    <div role="status">{i18n.t('common.loading')}</div>
+  {:else if displayError}
+    <div role="alert">{displayError}</div>
+    {#if error && safeRetryHref}<a href={safeRetryHref}>{i18n.t('common.retry')}</a>{/if}
+  {:else if pivot.rows.length === 0}
+    <div role="status">{i18n.t('common.noData')}</div>
+  {:else}
+  <table class="sv-lite-pivot-table" aria-label={ariaLabel ?? `${i18n.t('pivot.title')}: ${rowLabel} / ${columnLabel} / ${valueLabel}`}>
     <thead>
       <tr>
-        <th class="sv-lite-th-dim">{rowLabel} \ {columnLabel}</th>
-        {#each distinctColValues as col (col)}
-          <th>{col}</th>
+        <th scope="col" class="sv-lite-th-dim">{rowLabel} \ {columnLabel}</th>
+        {#each pivot.columns as col (col.key)}
+          <th scope="col">{col.label}</th>
         {/each}
-        <th class="sv-lite-th-total">Total</th>
+        <th scope="col" class="sv-lite-th-total">{i18n.t('pivot.total')}</th>
       </tr>
     </thead>
     <tbody>
-      {#each distinctRowValues as row (row)}
+      {#each pivot.rows as row (row.key)}
         <tr>
-          <td class="sv-lite-td-dim">{row}</td>
-          {#each distinctColValues as col (col)}
-            {@const val = getCellValue(row, col)}
-            <td class="sv-lite-td-val">{val.toLocaleString(undefined, { maximumFractionDigits: 2 })}</td>
+          <th scope="row" class="sv-lite-td-dim">{row.label}</th>
+          {#each pivot.columns as col (col.key)}
+            {@const href = cellHref(row.key, col.key)}
+            <td class="sv-lite-td-val">
+              {#if href}
+                <a href={href} aria-label={`${i18n.t('pivot.drilldown')}: ${row.label} / ${col.label}`}>
+                  {display(pivot.cells.get(row.key)?.get(col.key))}
+                </a>
+              {:else}
+                {display(pivot.cells.get(row.key)?.get(col.key))}
+              {/if}
+            </td>
           {/each}
-          <td class="sv-lite-td-rowtotal">{getRowTotal(row).toLocaleString(undefined, { maximumFractionDigits: 2 })}</td>
+          <td class="sv-lite-td-rowtotal">{display(pivot.rowTotals.get(row.key))}</td>
         </tr>
       {/each}
     </tbody>
     <tfoot>
       <tr>
-        <td class="sv-lite-td-dim">Grand Total</td>
-        {#each distinctColValues as col (col)}
-          <td class="sv-lite-td-val">{getColTotal(col).toLocaleString(undefined, { maximumFractionDigits: 2 })}</td>
+        <th scope="row" class="sv-lite-td-dim">{i18n.t('pivot.grandTotal')}</th>
+        {#each pivot.columns as col (col.key)}
+          <td class="sv-lite-td-val">{display(pivot.columnTotals.get(col.key))}</td>
         {/each}
-        <td class="sv-lite-td-grandtotal">{grandTotal.toLocaleString(undefined, { maximumFractionDigits: 2 })}</td>
+        <td class="sv-lite-td-grandtotal">{display(pivot.grandTotal)}</td>
       </tr>
     </tfoot>
   </table>
+  {/if}
 </div>
 
 <style>