@svadmin/lite 0.25.6 → 0.26.0

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

@@ -0,0 +1,24 @@
+export type LiteTaskStatus = 'running' | 'pending' | 'completed' | 'failed' | 'cancelled';
+export interface LiteBackgroundTask {
+    id: string;
+    title: string;
+    status: LiteTaskStatus;
+    progress?: number;
+    processed?: number;
+    total?: number;
+    error?: string;
+    downloadHref?: string;
+    cancelAction?: string;
+    retryAction?: string;
+}
+interface Props {
+    tasks?: LiteBackgroundTask[];
+    title?: string;
+    emptyText?: string;
+    clearAction?: string;
+    clearLabel?: string;
+    class?: string;
+}
+declare const LiteTaskCenter: import("svelte").Component<Props, {}, "">;
+type LiteTaskCenter = ReturnType<typeof LiteTaskCenter>;
+export default LiteTaskCenter;

package/dist/components/LiteTour.svelte

@@ -3,6 +3,10 @@
     title: string;
     description?: string;
     href?: string;
+    /** SPA target selector; ignored by the server-rendered Lite fallback. */
+    target?: string;
+    /** SPA placement; ignored by the server-rendered Lite fallback. */
+    placement?: 'top' | 'bottom' | 'left' | 'right';
   }
 
   interface Props {

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

@@ -2,6 +2,10 @@ interface TourStep {
     title: string;
     description?: string;
     href?: string;
+    /** SPA target selector; ignored by the server-rendered Lite fallback. */
+    target?: string;
+    /** SPA placement; ignored by the server-rendered Lite fallback. */
+    placement?: 'top' | 'bottom' | 'left' | 'right';
 }
 interface Props {
     steps: TourStep[];

package/dist/components/LiteTrendIndicator.svelte

@@ -0,0 +1,119 @@
+<script lang="ts">
+  type TrendDirection = 'up' | 'down' | 'neutral';
+  type TrendVariant = 'text' | 'badge' | 'solid';
+  type TrendSize = 'sm' | 'md' | 'lg';
+
+  interface Props {
+    value?: number | string;
+    prevValue?: number;
+    direction?: TrendDirection;
+    prefix?: string;
+    suffix?: string;
+    precision?: number;
+    reverseColor?: boolean;
+    variant?: TrendVariant;
+    size?: TrendSize;
+    showIcon?: boolean;
+    class?: string;
+  }
+
+  let {
+    value,
+    prevValue,
+    direction,
+    prefix,
+    suffix = '%',
+    precision = 1,
+    reverseColor = false,
+    variant = 'text',
+    size = 'md',
+    showIcon = true,
+    class: className = '',
+  }: Props = $props();
+
+  const computed = $derived.by(() => {
+    if (typeof value === 'number' && typeof prevValue === 'number' && prevValue !== 0) {
+      const diff = value - prevValue;
+      return {
+        direction: direction ?? (diff > 0 ? 'up' : diff < 0 ? 'down' : 'neutral'),
+        text: `${Math.abs((diff / Math.abs(prevValue)) * 100).toFixed(precision)}${suffix}`,
+      } satisfies { direction: TrendDirection; text: string };
+    }
+    if (typeof value === 'number') {
+      return {
+        direction: direction ?? (value > 0 ? 'up' : value < 0 ? 'down' : 'neutral'),
+        text: `${Math.abs(value).toFixed(precision)}${suffix}`,
+      } satisfies { direction: TrendDirection; text: string };
+    }
+    if (typeof value === 'string') {
+      const text = value.trim();
+      const parsed = Number.parseFloat(text);
+      const resolved = direction ?? (text.startsWith('-') || parsed < 0
+        ? 'down'
+        : text.startsWith('+') || parsed > 0
+          ? 'up'
+          : 'neutral');
+      return { direction: resolved, text } satisfies { direction: TrendDirection; text: string };
+    }
+    return { direction: direction ?? 'neutral', text: '--' } satisfies {
+      direction: TrendDirection;
+      text: string;
+    };
+  });
+
+  const tone = $derived.by(() => {
+    if (computed.direction === 'neutral') return 'neutral';
+    const improving = reverseColor ? computed.direction === 'down' : computed.direction === 'up';
+    return improving ? 'positive' : 'negative';
+  });
+</script>
+
+<span
+  class="lite-trend lite-trend-{variant} lite-trend-{size} {className}"
+  data-tone={tone}
+  data-direction={computed.direction}
+>
+  {#if prefix}<span class="lite-trend-prefix">{prefix}</span>{/if}
+  {#if showIcon}<span class="lite-trend-icon" aria-hidden="true">{computed.direction === 'up' ? '↑' : computed.direction === 'down' ? '↓' : '→'}</span>{/if}
+  <span class="lite-trend-value">{computed.text}</span>
+  <span class="lite-sr-only">{tone === 'positive' ? 'Improving' : tone === 'negative' ? 'Declining' : 'Unchanged'}</span>
+</span>
+
+<style>
+  .lite-trend {
+    display: inline-flex;
+    align-items: center;
+    color: #4e5969;
+    font-size: 12px;
+    font-weight: 600;
+    line-height: 1.4;
+    white-space: nowrap;
+  }
+  .lite-trend-sm { font-size: 11px; }
+  .lite-trend-lg { font-size: 14px; }
+  .lite-trend-badge,
+  .lite-trend-solid {
+    padding: 2px 6px;
+    border-radius: 999px;
+    border: 1px solid #e5e6eb;
+    background: #f7f8fa;
+  }
+  .lite-trend-solid[data-tone='positive'] { color: #fff; background: #00b42a; border-color: #00b42a; }
+  .lite-trend-solid[data-tone='negative'] { color: #fff; background: #f53f3f; border-color: #f53f3f; }
+  .lite-trend[data-tone='positive'] { color: #00b42a; }
+  .lite-trend[data-tone='negative'] { color: #f53f3f; }
+  .lite-trend[data-tone='neutral'] { color: #86909c; }
+  .lite-trend-prefix, .lite-trend-icon { margin-right: 4px; }
+  .lite-trend-prefix { color: #86909c; font-weight: 500; }
+  .lite-sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
+</style>

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

@@ -0,0 +1,19 @@
+type TrendDirection = 'up' | 'down' | 'neutral';
+type TrendVariant = 'text' | 'badge' | 'solid';
+type TrendSize = 'sm' | 'md' | 'lg';
+interface Props {
+    value?: number | string;
+    prevValue?: number;
+    direction?: TrendDirection;
+    prefix?: string;
+    suffix?: string;
+    precision?: number;
+    reverseColor?: boolean;
+    variant?: TrendVariant;
+    size?: TrendSize;
+    showIcon?: boolean;
+    class?: string;
+}
+declare const LiteTrendIndicator: import("svelte").Component<Props, {}, "">;
+type LiteTrendIndicator = ReturnType<typeof LiteTrendIndicator>;
+export default LiteTrendIndicator;

package/dist/components/LiteVirtualTreeSelect.svelte

@@ -0,0 +1,92 @@
+<script lang="ts">
+  export interface LiteVirtualTreeNode {
+    value: string | number;
+    label: string;
+    children?: LiteVirtualTreeNode[];
+    disabled?: boolean;
+  }
+
+  interface Props {
+    nodes?: LiteVirtualTreeNode[];
+    value?: string | number | Array<string | number>;
+    name?: string;
+    label?: string;
+    placeholder?: string;
+    multiple?: boolean;
+    disabled?: boolean;
+    required?: boolean;
+    class?: string;
+  }
+
+  let {
+    nodes = [],
+    value = '',
+    name = 'value',
+    label = 'Tree selection',
+    placeholder = 'Select an option',
+    multiple = false,
+    disabled = false,
+    required = false,
+    class: className = '',
+  }: Props = $props();
+
+  interface FlatNode {
+    node: LiteVirtualTreeNode;
+    depth: number;
+  }
+
+  function flatten(items: LiteVirtualTreeNode[], depth = 0, out: FlatNode[] = []): FlatNode[] {
+    for (const node of items) {
+      out.push({ node, depth });
+      if (node.children?.length) flatten(node.children, depth + 1, out);
+    }
+    return out;
+  }
+
+  const options = $derived(flatten(nodes));
+  let current = $state(value);
+</script>
+
+{#snippet treeOptions()}
+  {#each options as option (option.node.value)}
+    <option value={option.node.value} disabled={option.node.disabled}>
+      {'\u00a0'.repeat(option.depth * 3)}{option.depth > 0 ? '└ ' : ''}{option.node.label}
+    </option>
+  {/each}
+{/snippet}
+
+<div class="lite-virtual-tree-select {className}">
+  <label for="lite-tree-select">{label}</label>
+  {#if multiple}
+    <select
+      id="lite-tree-select"
+      {name}
+      multiple
+      {disabled}
+      {required}
+      bind:value={current}
+      aria-label={label}
+    >
+      {@render treeOptions()}
+    </select>
+  {:else}
+    <select
+      id="lite-tree-select"
+      {name}
+      {disabled}
+      {required}
+      bind:value={current}
+      aria-label={label}
+    >
+      <option value="" disabled={required}>{placeholder}</option>
+      {@render treeOptions()}
+    </select>
+  {/if}
+  <p class="lite-virtual-tree-help">Large-tree search and virtual scrolling are client-side enhancements.</p>
+</div>
+
+<style>
+  .lite-virtual-tree-select label { display: block; margin-bottom: 4px; color: #4e5969; font-size: 12px; font-weight: 600; }
+  .lite-virtual-tree-select select { width: 100%; box-sizing: border-box; min-height: 34px; padding: 6px 8px; border: 1px solid #e5e6eb; border-radius: 4px; background: #fff; color: #1d2129; font: inherit; font-size: 13px; }
+  .lite-virtual-tree-help { margin: 4px 0 0; color: #86909c; font-size: 11px; }
+</style>

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

@@ -0,0 +1,20 @@
+export interface LiteVirtualTreeNode {
+    value: string | number;
+    label: string;
+    children?: LiteVirtualTreeNode[];
+    disabled?: boolean;
+}
+interface Props {
+    nodes?: LiteVirtualTreeNode[];
+    value?: string | number | Array<string | number>;
+    name?: string;
+    label?: string;
+    placeholder?: string;
+    multiple?: boolean;
+    disabled?: boolean;
+    required?: boolean;
+    class?: string;
+}
+declare const LiteVirtualTreeSelect: import("svelte").Component<Props, {}, "">;
+type LiteVirtualTreeSelect = ReturnType<typeof LiteVirtualTreeSelect>;
+export default LiteVirtualTreeSelect;

package/dist/components/widgets/LiteGaugeChart.svelte

@@ -2,19 +2,66 @@
   import LiteChartSvg from './LiteChartSvg.svelte';
   import LiteChartTable from './LiteChartTable.svelte';
 
+  interface GaugeThreshold {
+    value: number;
+    label?: string;
+  }
+
   interface Props {
     title?: string;
+    label?: string;
+    value?: number;
+    min?: number;
+    max?: number;
+    unit?: string;
+    target?: number;
+    targetLabel?: string;
+    thresholds?: GaugeThreshold[];
     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 ?? ''))));
+  let {
+    title,
+    label,
+    value,
+    min = 0,
+    max = 100,
+    unit = '',
+    target,
+    targetLabel = 'Target',
+    thresholds = [],
+    data = [],
+    rows,
+    columns,
+    emptyText,
+  }: Props = $props();
+
+  const heading = $derived(title ?? label ?? 'Gauge');
+
+  const normalized = $derived.by(() => {
+    if (rows) return rows;
+    if (data.length > 0) {
+      return data.map((item) => Object.values(item).map((entry) =>
+        typeof entry === 'number' ? entry : String(entry ?? '')
+      ));
+    }
+    if (typeof value !== 'number') return [];
+    const metricRows: Array<Array<string | number>> = [
+      ['Value', `${value}${unit}`],
+      ['Range', `${min} – ${max}${unit}`],
+    ];
+    if (typeof target === 'number') metricRows.push([targetLabel, `${target}${unit}`]);
+    for (const threshold of thresholds) {
+      metricRows.push([threshold.label ?? 'Threshold', `${threshold.value}${unit}`]);
+    }
+    return metricRows;
+  });
 </script>
 
 <div class="lite-chart-widget">
-  <LiteChartSvg kind="gauge" rows={normalized} {title} />
+  <LiteChartSvg kind="gauge" rows={normalized} title={heading} />
   <LiteChartTable {title} kind="gauge" columns={columns ?? ['Label', 'Value']} rows={normalized} {emptyText} />
 </div>

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

@@ -1,5 +1,17 @@
+interface GaugeThreshold {
+    value: number;
+    label?: string;
+}
 interface Props {
     title?: string;
+    label?: string;
+    value?: number;
+    min?: number;
+    max?: number;
+    unit?: string;
+    target?: number;
+    targetLabel?: string;
+    thresholds?: GaugeThreshold[];
     data?: Array<Record<string, unknown>>;
     rows?: Array<Array<string | number>>;
     columns?: string[];

package/dist/index.d.ts

@@ -111,6 +111,20 @@ export { default as LiteSkeleton } from './components/LiteSkeleton.svelte';
 export { default as LiteSpin } from './components/LiteSpin.svelte';
 export { default as LiteProgress } from './components/LiteProgress.svelte';
 export { default as LiteTree } from './components/LiteTree.svelte';
+export { default as LiteTrendIndicator } from './components/LiteTrendIndicator.svelte';
+export { default as LiteMetricGrid } from './components/LiteMetricGrid.svelte';
+export { default as LiteOrgChart } from './components/LiteOrgChart.svelte';
+export { default as LiteCronExpressionBuilder } from './components/LiteCronExpressionBuilder.svelte';
+export { default as LiteVirtualTreeSelect } from './components/LiteVirtualTreeSelect.svelte';
+export { default as LiteConcurrentConflictModal } from './components/LiteConcurrentConflictModal.svelte';
+export { default as LiteTaskCenter } from './components/LiteTaskCenter.svelte';
+export { default as LiteMicroAppFrame } from './components/LiteMicroAppFrame.svelte';
+export { default as LiteSafeDeleteConfirm } from './components/LiteSafeDeleteConfirm.svelte';
+export type { LiteOrgNode } from './components/LiteOrgChart.svelte';
+export type { LiteVirtualTreeNode } from './components/LiteVirtualTreeSelect.svelte';
+export type { LiteConflictField } from './components/LiteConcurrentConflictModal.svelte';
+export type { LiteTaskStatus, LiteBackgroundTask } from './components/LiteTaskCenter.svelte';
+export type { LiteDeleteImpact } from './components/LiteSafeDeleteConfirm.svelte';
 export { configureMarkdownRenderer, escapeHtml, renderInlineMarkdown, renderMarkdown, renderRichContent, sanitizeRichTextHtml, } from './rich-content';
 export type { MarkdownRenderOptions } from './rich-content';
 export * from './components/compatibility/index';

package/dist/index.js

@@ -115,6 +115,16 @@ export { default as LiteSkeleton } from './components/LiteSkeleton.svelte';
 export { default as LiteSpin } from './components/LiteSpin.svelte';
 export { default as LiteProgress } from './components/LiteProgress.svelte';
 export { default as LiteTree } from './components/LiteTree.svelte';
+// Recent enterprise UI parity fallbacks
+export { default as LiteTrendIndicator } from './components/LiteTrendIndicator.svelte';
+export { default as LiteMetricGrid } from './components/LiteMetricGrid.svelte';
+export { default as LiteOrgChart } from './components/LiteOrgChart.svelte';
+export { default as LiteCronExpressionBuilder } from './components/LiteCronExpressionBuilder.svelte';
+export { default as LiteVirtualTreeSelect } from './components/LiteVirtualTreeSelect.svelte';
+export { default as LiteConcurrentConflictModal } from './components/LiteConcurrentConflictModal.svelte';
+export { default as LiteTaskCenter } from './components/LiteTaskCenter.svelte';
+export { default as LiteMicroAppFrame } from './components/LiteMicroAppFrame.svelte';
+export { default as LiteSafeDeleteConfirm } from './components/LiteSafeDeleteConfirm.svelte';
 // Rich content rendering (SSR-safe Markdown + rich HTML allowlist)
 export { configureMarkdownRenderer, escapeHtml, renderInlineMarkdown, renderMarkdown, renderRichContent, sanitizeRichTextHtml, } from './rich-content';
 // Compatibility fallbacks for browser-only and third-party UI capabilities.

package/dist/rich-content.js

@@ -458,7 +458,7 @@ export function sanitizeRichTextHtml(value) {
         }
         const attributes = [];
         const isCheckbox = tag === 'input' && /type\s*=\s*["']?checkbox/iu.test(match[2] ?? '');
-        if ((tag === 'input' && !isCheckbox) || (tag === 'input' && closing))
+        if (tag === 'input' && !isCheckbox)
             continue;
         for (const attribute of (match[2] ?? '').matchAll(ATTRIBUTE)) {
             const name = (attribute[1] ?? '').toLowerCase();

package/dist/server-adapter.d.ts

@@ -126,10 +126,10 @@ export declare function createAuthActions(authProvider: AuthProvider): {
     }>;
     register: ({ request }: RequestEvent) => Promise<{
         success: boolean;
-        error: string;
+        error?: never;
     } | {
         success: boolean;
-        error?: never;
+        error: string;
     }>;
     forgot_password: ({ request }: RequestEvent) => Promise<{
         success: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@svadmin/lite",
-  "version": "0.25.6",
+  "version": "0.26.0",
   "description": "SSR-first lightweight admin UI for @svadmin with optional progressive enhancement",
   "type": "module",
   "sideEffects": [
@@ -56,23 +56,23 @@
   },
   "peerDependencies": {
     "svelte": "^5.57.1",
-    "@svadmin/core": ">=0.34.2 <0.80.0",
+    "@svadmin/core": ">=0.34.2 <0.81.0",
     "@sveltejs/kit": "^3.0.0",
     "qrcode": "^1.5.4"
   },
   "dependencies": {
-    "@lucide/svelte": "^1.35.0",
-    "typebox": "^1.3.34"
+    "@lucide/svelte": "^1.71.0",
+    "typebox": "^1.4.6"
   },
   "devDependencies": {
-    "@happy-dom/global-registrator": "^20.11.12",
-    "@sveltejs/vite-plugin-svelte": "^7.3.0",
-    "@testing-library/dom": "^10.4.1",
+    "@happy-dom/global-registrator": "^21.0.4",
+    "@sveltejs/vite-plugin-svelte": "^7.3.1",
+    "@testing-library/dom": "^10.4.2",
     "@testing-library/svelte": "^5.4.2",
     "@types/bun": "^1.4.4",
     "@types/qrcode": "^1.5.6",
     "happy-dom": "^21.0.4",
-    "vitest": "^4.1.11"
+    "vitest": "^5.1.0"
   },
   "scripts": {
     "build": "node ../../node_modules/@sveltejs/package/svelte-package.js -i src -o dist && bun ../../scripts/copy-package-assets.ts static/enhance.js dist/enhance.js",