@svadmin/ui 0.74.0 → 0.76.0

package/dist/components/TopProgressBar.svelte

@@ -0,0 +1,90 @@
+<script lang="ts">
+  import { cn } from '../utils.js';
+
+  interface Props {
+    /** 0–100 progress. Leave undefined for an idle/hidden bar. */
+    value?: number | null;
+    /** Renders an animated unknown-progress bar regardless of `value`. */
+    indeterminate?: boolean;
+    /** Bar thickness in pixels. */
+    height?: number;
+    /** Pins the bar to the top edge of the viewport. */
+    fixed?: boolean;
+    ariaLabel?: string;
+    class?: string;
+  }
+
+  let {
+    value,
+    indeterminate = false,
+    height = 3,
+    fixed = true,
+    ariaLabel = 'Loading',
+    class: className = '',
+  }: Props = $props();
+
+  const visible = $derived(indeterminate || (value !== null && value !== undefined));
+  const clamped = $derived(Math.max(0, Math.min(100, value ?? 0)));
+</script>
+
+{#if visible}
+  <div
+    class={cn('svadmin-top-progress', className)}
+    data-slot="top-progress"
+    data-fixed={fixed ? 'true' : 'false'}
+    style={`--svadmin-top-progress-height: ${height}px;`}
+    role="progressbar"
+    aria-label={ariaLabel}
+    aria-valuemin="0"
+    aria-valuemax="100"
+    aria-valuenow={indeterminate ? undefined : clamped}
+  >
+    <span
+      class="svadmin-top-progress__bar"
+      data-indeterminate={indeterminate ? 'true' : 'false'}
+      style={indeterminate ? undefined : `transform: scaleX(${clamped / 100});`}
+    ></span>
+  </div>
+{/if}
+
+<style>
+  .svadmin-top-progress {
+    position: relative;
+    width: 100%;
+    height: var(--svadmin-top-progress-height, 3px);
+    overflow: hidden;
+    background: var(--muted, color-mix(in oklch, var(--foreground, currentColor) 12%, transparent));
+  }
+
+  .svadmin-top-progress[data-fixed='true'] {
+    position: fixed;
+    inset-block-start: 0;
+    inset-inline: 0;
+    z-index: 9999;
+  }
+
+  .svadmin-top-progress__bar {
+    display: block;
+    width: 100%;
+    height: 100%;
+    transform-origin: left center;
+    background: var(--primary, currentColor);
+    transition: transform 240ms ease-out;
+  }
+
+  .svadmin-top-progress__bar[data-indeterminate='true'] {
+    width: 40%;
+    transform: translateX(-100%);
+    animation: svadmin-top-progress-indeterminate 1.1s ease-in-out infinite;
+  }
+
+  @keyframes svadmin-top-progress-indeterminate {
+    0% { transform: translateX(-100%); }
+    100% { transform: translateX(350%); }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .svadmin-top-progress__bar { transition: none; }
+    .svadmin-top-progress__bar[data-indeterminate='true'] { animation-duration: 2.2s; }
+  }
+</style>

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

@@ -0,0 +1,15 @@
+interface Props {
+    /** 0–100 progress. Leave undefined for an idle/hidden bar. */
+    value?: number | null;
+    /** Renders an animated unknown-progress bar regardless of `value`. */
+    indeterminate?: boolean;
+    /** Bar thickness in pixels. */
+    height?: number;
+    /** Pins the bar to the top edge of the viewport. */
+    fixed?: boolean;
+    ariaLabel?: string;
+    class?: string;
+}
+declare const TopProgressBar: import("svelte").Component<Props, {}, "">;
+type TopProgressBar = ReturnType<typeof TopProgressBar>;
+export default TopProgressBar;

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

@@ -0,0 +1,65 @@
+/**
+ * Svelte-native browser hooks. Every hook must be called during component
+ * initialisation because each one registers a scoped effect; SSR renders the
+ * documented fallback and hydration corrects the value.
+ */
+export interface ClipboardState {
+    /** True for `timeout` ms after a successful copy. */
+    readonly copied: boolean;
+    /** Resolves to `true` when the text reached the clipboard. */
+    copy(text: string): Promise<boolean>;
+}
+export interface ClipboardOptions {
+    /** Feedback reset delay in ms. Defaults to 1600. */
+    timeout?: number;
+}
+export declare function useClipboard(options?: ClipboardOptions): ClipboardState;
+export interface LocalStorageState<T> {
+    readonly value: T;
+    set(next: T): void;
+    remove(): void;
+}
+/**
+ * Reactive `localStorage` value with cross-tab synchronization. Serialization
+ * failures fall back to the initial value instead of throwing.
+ */
+export declare function useLocalStorage<T>(key: string, initial: T): LocalStorageState<T>;
+export interface DebouncedValue<T> {
+    readonly value: T;
+}
+/** Trailing-edge debounce over a reactive getter. */
+export declare function useDebouncedValue<T>(source: () => T, delay?: number): DebouncedValue<T>;
+/**
+ * Runs `callback` on an interval. Return `null` (or a non-positive number) from
+ * `delay` to pause without unmounting the component.
+ */
+export declare function useInterval(callback: () => void, delay: () => number | null): void;
+type EventTargetLike = EventTarget | (() => EventTarget | null) | null;
+/** Adds a listener for the component lifetime, re-binding when `target` changes. */
+export declare function useEventListener<E extends Event = Event>(target: EventTargetLike, type: string, handler: (event: E) => void, options?: AddEventListenerOptions | boolean): void;
+/**
+ * Fires when a pointer press happens outside `target`. Uses `composedPath()` so
+ * shadow DOM boundaries behave the same as the plain `contains` fallback.
+ */
+export declare function useOnClickOutside(target: () => HTMLElement | null, handler: (event: Event) => void, enabled?: () => boolean): void;
+export interface SwipeHandlers {
+    onSwipeLeft?: () => void;
+    onSwipeRight?: () => void;
+    onSwipeUp?: () => void;
+    onSwipeDown?: () => void;
+    /** Minimum travel in px before a swipe is recognised. Defaults to 30. */
+    threshold?: number;
+}
+/**
+ * Recognises single-finger/mouse swipes on a target using pointer events.
+ * For pinching, rotation, or multi-touch gestures, use the Svelte ecosystem
+ * `svelte-gestures` package instead.
+ */
+export declare function useSwipe(target: () => HTMLElement | null, handlers: SwipeHandlers): void;
+export interface WindowSize {
+    readonly width: number;
+    readonly height: number;
+}
+/** Reactive viewport size; reports 0 on the server. */
+export declare function useWindowSize(): WindowSize;
+export {};

package/dist/components/browser.svelte.js

@@ -0,0 +1,228 @@
+import { untrack } from 'svelte';
+export function useClipboard(options = {}) {
+    const timeout = options.timeout ?? 1600;
+    let copied = $state(false);
+    let timer = null;
+    $effect(() => () => {
+        if (timer)
+            clearTimeout(timer);
+    });
+    async function copy(text) {
+        const clipboard = typeof navigator === 'undefined' ? undefined : navigator.clipboard;
+        if (!clipboard?.writeText)
+            return false;
+        try {
+            await clipboard.writeText(text);
+        }
+        catch {
+            return false;
+        }
+        copied = true;
+        if (timer)
+            clearTimeout(timer);
+        timer = setTimeout(() => {
+            copied = false;
+        }, timeout);
+        return true;
+    }
+    return {
+        get copied() {
+            return copied;
+        },
+        copy,
+    };
+}
+function readStorage(key, fallback) {
+    if (typeof localStorage === 'undefined')
+        return fallback;
+    try {
+        const raw = localStorage.getItem(key);
+        if (raw === null)
+            return fallback;
+        return JSON.parse(raw);
+    }
+    catch {
+        return fallback;
+    }
+}
+/**
+ * Reactive `localStorage` value with cross-tab synchronization. Serialization
+ * failures fall back to the initial value instead of throwing.
+ */
+export function useLocalStorage(key, initial) {
+    let value = $state(untrack(() => readStorage(key, initial)));
+    let skipNextPersist = false;
+    $effect(() => {
+        const serialized = JSON.stringify(value);
+        if (skipNextPersist) {
+            skipNextPersist = false;
+            return;
+        }
+        if (typeof localStorage === 'undefined')
+            return;
+        try {
+            localStorage.setItem(key, serialized);
+        }
+        catch {
+            // Storage may be full or blocked; keep the in-memory value.
+        }
+    });
+    useEventListener(typeof window === 'undefined' ? null : window, 'storage', (event) => {
+        if (event.key !== key || event.newValue === null)
+            return;
+        try {
+            value = JSON.parse(event.newValue);
+        }
+        catch {
+            // Ignore malformed external writes.
+        }
+    });
+    return {
+        get value() {
+            return value;
+        },
+        set(next) {
+            value = next;
+        },
+        remove() {
+            if (typeof localStorage !== 'undefined') {
+                try {
+                    localStorage.removeItem(key);
+                }
+                catch {
+                    // Ignore storage access failures.
+                }
+            }
+            if (value === initial)
+                return;
+            skipNextPersist = true;
+            value = initial;
+        },
+    };
+}
+/** Trailing-edge debounce over a reactive getter. */
+export function useDebouncedValue(source, delay = 200) {
+    let debounced = $state(untrack(source));
+    $effect(() => {
+        const next = source();
+        const timer = setTimeout(() => {
+            debounced = next;
+        }, Math.max(0, delay));
+        return () => clearTimeout(timer);
+    });
+    return {
+        get value() {
+            return debounced;
+        },
+    };
+}
+/**
+ * Runs `callback` on an interval. Return `null` (or a non-positive number) from
+ * `delay` to pause without unmounting the component.
+ */
+export function useInterval(callback, delay) {
+    $effect(() => {
+        const ms = delay();
+        if (ms === null || !Number.isFinite(ms) || ms <= 0 || typeof window === 'undefined')
+            return;
+        const id = setInterval(callback, ms);
+        return () => clearInterval(id);
+    });
+}
+/** Adds a listener for the component lifetime, re-binding when `target` changes. */
+export function useEventListener(target, type, handler, options) {
+    $effect(() => {
+        const resolved = typeof target === 'function' ? target() : target;
+        if (!resolved)
+            return;
+        const listener = handler;
+        resolved.addEventListener(type, listener, options);
+        return () => resolved.removeEventListener(type, listener, options);
+    });
+}
+/**
+ * Fires when a pointer press happens outside `target`. Uses `composedPath()` so
+ * shadow DOM boundaries behave the same as the plain `contains` fallback.
+ */
+export function useOnClickOutside(target, handler, enabled = () => true) {
+    useEventListener(() => (typeof document === 'undefined' ? null : document), 'pointerdown', (event) => {
+        if (!enabled())
+            return;
+        const node = target();
+        if (!node)
+            return;
+        const targetNode = event.target;
+        const path = typeof event.composedPath === 'function' ? event.composedPath() : [];
+        if (path.includes(node))
+            return;
+        if (targetNode instanceof Node && node.contains(targetNode))
+            return;
+        handler(event);
+    });
+}
+/**
+ * Recognises single-finger/mouse swipes on a target using pointer events.
+ * For pinching, rotation, or multi-touch gestures, use the Svelte ecosystem
+ * `svelte-gestures` package instead.
+ */
+export function useSwipe(target, handlers) {
+    const threshold = handlers.threshold ?? 30;
+    $effect(() => {
+        const node = target();
+        if (!node)
+            return;
+        let start = null;
+        const onDown = (event) => {
+            start = { x: event.clientX, y: event.clientY };
+        };
+        const onUp = (event) => {
+            if (!start)
+                return;
+            const dx = event.clientX - start.x;
+            const dy = event.clientY - start.y;
+            start = null;
+            if (Math.abs(dx) < threshold && Math.abs(dy) < threshold)
+                return;
+            if (Math.abs(dx) >= Math.abs(dy)) {
+                if (dx > 0)
+                    handlers.onSwipeRight?.();
+                else
+                    handlers.onSwipeLeft?.();
+            }
+            else if (dy > 0) {
+                handlers.onSwipeDown?.();
+            }
+            else {
+                handlers.onSwipeUp?.();
+            }
+        };
+        const onCancel = () => {
+            start = null;
+        };
+        node.addEventListener('pointerdown', onDown);
+        node.addEventListener('pointerup', onUp);
+        node.addEventListener('pointercancel', onCancel);
+        return () => {
+            node.removeEventListener('pointerdown', onDown);
+            node.removeEventListener('pointerup', onUp);
+            node.removeEventListener('pointercancel', onCancel);
+        };
+    });
+}
+/** Reactive viewport size; reports 0 on the server. */
+export function useWindowSize() {
+    let width = $state(typeof window === 'undefined' ? 0 : window.innerWidth);
+    let height = $state(typeof window === 'undefined' ? 0 : window.innerHeight);
+    useEventListener(() => (typeof window === 'undefined' ? null : window), 'resize', () => {
+        width = window.innerWidth;
+        height = window.innerHeight;
+    });
+    return {
+        get width() {
+            return width;
+        },
+        get height() {
+            return height;
+        },
+    };
+}

package/dist/components/charts/AreaChart.svelte

@@ -0,0 +1,78 @@
+<script lang="ts">
+  import { cn } from '../../utils.js';
+
+  interface AreaPoint {
+    label: string;
+    value: number;
+    color?: string;
+  }
+
+  interface Props {
+    data: AreaPoint[];
+    height?: number;
+    /** Stroke width of the value line. */
+    strokeWidth?: number;
+    /** Fills the area under the line. Defaults to `true`. */
+    fill?: boolean;
+    class?: string;
+  }
+
+  let {
+    data,
+    height = 200,
+    strokeWidth = 2,
+    fill = true,
+    class: className = '',
+  }: Props = $props();
+
+  const width = 480;
+  const padding = { top: 16, right: 16, bottom: 28, left: 36 };
+
+  const maxValue = $derived(Math.max(...data.map((point) => point.value), 1));
+  const innerWidth = $derived(width - padding.left - padding.right);
+  const innerHeight = $derived(height - padding.top - padding.bottom);
+
+  const coords = $derived.by(() =>
+    data.map((point, index) => {
+      const x = padding.left + (data.length <= 1 ? innerWidth / 2 : (index / (data.length - 1)) * innerWidth);
+      const y = padding.top + innerHeight - (point.value / maxValue) * innerHeight;
+      return { ...point, x, y };
+    }),
+  );
+
+  const linePath = $derived(coords.map((point) => `${point.x},${point.y}`).join(' '));
+  const areaPath = $derived(
+    coords.length
+      ? `M ${coords[0]?.x ?? 0} ${padding.top + innerHeight} L ${linePath.replace(/ /gu, ' L ')} L ${coords.at(-1)?.x ?? 0} ${padding.top + innerHeight} Z`
+      : '',
+  );
+  const gridLines = $derived([0, 0.25, 0.5, 0.75, 1]);
+</script>
+
+<div class={cn('svadmin-area-chart', className)} data-slot="area-chart">
+  <svg viewBox={`0 0 ${width} ${height}`} role="img" aria-label="Area chart" preserveAspectRatio="none">
+    {#each gridLines as ratio (ratio)}
+      {@const y = padding.top + innerHeight * ratio}
+      <line x1={padding.left} y1={y} x2={width - padding.right} y2={y} stroke="var(--border, currentColor)" stroke-width="1" opacity="0.6" />
+      <text x={padding.left - 6} y={y + 3} text-anchor="end" fill="var(--muted-foreground, currentColor)" font-size="10">{Math.round(maxValue * (1 - ratio))}</text>
+    {/each}
+
+    {#if fill && areaPath}
+      <path d={areaPath} fill="var(--primary, currentColor)" opacity="0.16" />
+    {/if}
+
+    {#if linePath}
+      <polyline points={linePath} fill="none" stroke="var(--primary, currentColor)" stroke-width={strokeWidth} stroke-linejoin="round" stroke-linecap="round" />
+    {/if}
+
+    {#each coords as point, index (index)}
+      <circle cx={point.x} cy={point.y} r="3" fill={point.color ?? 'var(--primary, currentColor)'} />
+      <text x={point.x} y={height - 8} text-anchor="middle" fill="var(--muted-foreground, currentColor)" font-size="10">{point.label}</text>
+    {/each}
+  </svg>
+</div>
+
+<style>
+  .svadmin-area-chart { width: 100%; color: var(--foreground, currentColor); }
+  .svadmin-area-chart svg { display: block; width: 100%; height: auto; }
+</style>

package/dist/components/charts/AreaChart.svelte.d.ts

@@ -0,0 +1,17 @@
+interface AreaPoint {
+    label: string;
+    value: number;
+    color?: string;
+}
+interface Props {
+    data: AreaPoint[];
+    height?: number;
+    /** Stroke width of the value line. */
+    strokeWidth?: number;
+    /** Fills the area under the line. Defaults to `true`. */
+    fill?: boolean;
+    class?: string;
+}
+declare const AreaChart: import("svelte").Component<Props, {}, "">;
+type AreaChart = ReturnType<typeof AreaChart>;
+export default AreaChart;

package/dist/components/charts/ScatterChart.svelte

@@ -0,0 +1,82 @@
+<script lang="ts">
+  import { cn } from '../../utils.js';
+
+  interface ScatterPoint {
+    x: number;
+    y: number;
+    label?: string;
+    color?: string;
+  }
+
+  interface Props {
+    data: ScatterPoint[];
+    height?: number;
+    pointRadius?: number;
+    xLabel?: string;
+    yLabel?: string;
+    class?: string;
+  }
+
+  let {
+    data,
+    height = 220,
+    pointRadius = 4,
+    xLabel,
+    yLabel,
+    class: className = '',
+  }: Props = $props();
+
+  const width = 480;
+  const padding = { top: 16, right: 16, bottom: 32, left: 40 };
+  const innerWidth = $derived(width - padding.left - padding.right);
+  const innerHeight = $derived(height - padding.top - padding.bottom);
+
+  const bounds = $derived.by(() => {
+    const xs = data.map((point) => point.x);
+    const ys = data.map((point) => point.y);
+    const minX = Math.min(...xs, 0);
+    const maxX = Math.max(...xs, 1);
+    const minY = Math.min(...ys, 0);
+    const maxY = Math.max(...ys, 1);
+    return {
+      minX,
+      maxX: maxX === minX ? minX + 1 : maxX,
+      minY,
+      maxY: maxY === minY ? minY + 1 : maxY,
+    };
+  });
+
+  function scaleX(value: number): number {
+    return padding.left + ((value - bounds.minX) / (bounds.maxX - bounds.minX)) * innerWidth;
+  }
+
+  function scaleY(value: number): number {
+    return padding.top + innerHeight - ((value - bounds.minY) / (bounds.maxY - bounds.minY)) * innerHeight;
+  }
+</script>
+
+<div class={cn('svadmin-scatter-chart', className)} data-slot="scatter-chart">
+  <svg
+    viewBox={`0 0 ${width} ${height}`}
+    role="img"
+    aria-label={[yLabel ?? 'Y', xLabel ?? 'X'].join(' by ')}
+    preserveAspectRatio="none"
+  >
+    <line x1={padding.left} y1={padding.top + innerHeight} x2={width - padding.right} y2={padding.top + innerHeight} stroke="var(--border, currentColor)" />
+    <line x1={padding.left} y1={padding.top} x2={padding.left} y2={padding.top + innerHeight} stroke="var(--border, currentColor)" />
+
+    {#if xLabel}<text x={width - padding.right} y={height - 6} text-anchor="end" fill="var(--muted-foreground, currentColor)" font-size="10">{xLabel}</text>{/if}
+    {#if yLabel}<text x={padding.left - 6} y={padding.top + 8} text-anchor="end" fill="var(--muted-foreground, currentColor)" font-size="10">{yLabel}</text>{/if}
+
+    {#each data as point, index (index)}
+      <circle cx={scaleX(point.x)} cy={scaleY(point.y)} r={pointRadius} fill={point.color ?? 'var(--primary, currentColor)'} opacity="0.85">
+        <title>{point.label ?? `${point.x}, ${point.y}`}</title>
+      </circle>
+    {/each}
+  </svg>
+</div>
+
+<style>
+  .svadmin-scatter-chart { width: 100%; color: var(--foreground, currentColor); }
+  .svadmin-scatter-chart svg { display: block; width: 100%; height: auto; }
+</style>

package/dist/components/charts/ScatterChart.svelte.d.ts

@@ -0,0 +1,17 @@
+interface ScatterPoint {
+    x: number;
+    y: number;
+    label?: string;
+    color?: string;
+}
+interface Props {
+    data: ScatterPoint[];
+    height?: number;
+    pointRadius?: number;
+    xLabel?: string;
+    yLabel?: string;
+    class?: string;
+}
+declare const ScatterChart: import("svelte").Component<Props, {}, "">;
+type ScatterChart = ReturnType<typeof ScatterChart>;
+export default ScatterChart;

package/dist/components/charts/index.d.ts

@@ -1,3 +1,5 @@
+export { default as AreaChart } from './AreaChart.svelte';
 export { default as BarChart } from './BarChart.svelte';
 export { default as LineChart } from './LineChart.svelte';
 export { default as PieChart } from './PieChart.svelte';
+export { default as ScatterChart } from './ScatterChart.svelte';

package/dist/components/charts/index.js

@@ -1,3 +1,5 @@
+export { default as AreaChart } from './AreaChart.svelte';
 export { default as BarChart } from './BarChart.svelte';
 export { default as LineChart } from './LineChart.svelte';
 export { default as PieChart } from './PieChart.svelte';
+export { default as ScatterChart } from './ScatterChart.svelte';

package/dist/components/code-editor-presets.d.ts

@@ -0,0 +1,14 @@
+/**
+ * CodeMirror language presets for `@svadmin/ui/code-editor`.
+ *
+ * Each language is an optional peer dependency. Import this module only if you
+ * need the presets, and install the languages you actually use:
+ *
+ * ```bash
+ * bun add @codemirror/lang-json
+ * ```
+ */
+export { json } from '@codemirror/lang-json';
+export { javascript, javascriptLanguage, typescriptLanguage, jsxLanguage, tsxLanguage, } from '@codemirror/lang-javascript';
+export { sql } from '@codemirror/lang-sql';
+export { markdown } from '@codemirror/lang-markdown';

package/dist/components/code-editor-presets.js

@@ -0,0 +1,14 @@
+/**
+ * CodeMirror language presets for `@svadmin/ui/code-editor`.
+ *
+ * Each language is an optional peer dependency. Import this module only if you
+ * need the presets, and install the languages you actually use:
+ *
+ * ```bash
+ * bun add @codemirror/lang-json
+ * ```
+ */
+export { json } from '@codemirror/lang-json';
+export { javascript, javascriptLanguage, typescriptLanguage, jsxLanguage, tsxLanguage, } from '@codemirror/lang-javascript';
+export { sql } from '@codemirror/lang-sql';
+export { markdown } from '@codemirror/lang-markdown';

package/dist/components/fields/MarkdownField.svelte

@@ -12,6 +12,15 @@
   interface DomPurifyLike {
     sanitize(source: string | Node, config?: Record<string, unknown>): string;
   }
+  interface DomPurifyModule {
+    default?: DomPurifyLike;
+    sanitize?: DomPurifyLike["sanitize"];
+  }
+
+  function isDomPurifyModule(value: unknown): value is DomPurifyModule {
+    return typeof value === 'object' && value !== null;
+  }
+
   let DOMPurify: DomPurifyLike | null = $state(null);
 
   onMount(() => {
@@ -19,12 +28,12 @@
     import("isomorphic-dompurify")
       .then((pkg) => {
         if (!cancelled) {
-          const mod = pkg as unknown as { default?: DomPurifyLike; sanitize?: DomPurifyLike["sanitize"] };
+          if (!isDomPurifyModule(pkg)) return;
           const loaded: DomPurifyLike | undefined =
-            mod.default && typeof mod.default.sanitize === "function"
-              ? mod.default
-              : typeof mod.sanitize === "function"
-                ? (mod as DomPurifyLike)
+            pkg.default && typeof pkg.default.sanitize === "function"
+              ? pkg.default
+              : typeof pkg.sanitize === "function"
+                ? { sanitize: pkg.sanitize }
                 : undefined;
           if (loaded) {
             DOMPurify = loaded;