@svadmin/ui 0.75.0 → 0.77.0

package/dist/components/ResizableGrid.svelte

@@ -0,0 +1,252 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { cn } from '../utils.js';
+
+  export interface GridItem {
+    id: string;
+    /** Column index (0-based). */
+    x: number;
+    /** Row index (0-based). */
+    y: number;
+    /** Width in columns. */
+    w: number;
+    /** Height in rows. */
+    h: number;
+  }
+
+  interface Props {
+    items: GridItem[];
+    /** Number of columns in the grid. */
+    cols?: number;
+    /** Height of a single row in pixels. */
+    rowHeight?: number;
+    /** Gap between cells in pixels. */
+    gap?: number;
+    minW?: number;
+    minH?: number;
+    /** Enables move/resize handles. */
+    editable?: boolean;
+    ariaLabel?: string;
+    class?: string;
+    /** Renders each cell's content. Falls back to `children`. */
+    item?: Snippet<[GridItem]>;
+    children?: Snippet;
+    onchange?: (items: GridItem[]) => void;
+  }
+
+  let {
+    items = $bindable([]),
+    cols = 12,
+    rowHeight = 80,
+    gap = 12,
+    minW = 1,
+    minH = 1,
+    editable = true,
+    ariaLabel = 'Grid layout',
+    class: className = '',
+    item: itemSnippet,
+    children,
+    onchange,
+  }: Props = $props();
+
+  let container = $state<HTMLElement | null>(null);
+
+  const rows = $derived(Math.max(...items.map((entry) => entry.y + entry.h), 1));
+  const height = $derived(`calc(${rows} * (var(--svadmin-grid-row) + ${gap}px) - ${gap}px)`);
+
+  const clamp = (value: number, min: number, max: number): number =>
+    Math.min(Math.max(value, min), Math.max(min, max));
+
+  function commit(next: GridItem[]): void {
+    items = next;
+    onchange?.(next);
+  }
+
+  function move(item: GridItem, dxUnits: number, dyUnits: number): void {
+    commit(items.map((entry) => entry.id === item.id
+      ? {
+          ...entry,
+          x: clamp(item.x + dxUnits, 0, cols - item.w),
+          y: Math.max(0, item.y + dyUnits),
+        }
+      : entry));
+  }
+
+  function resize(item: GridItem, dw: number, dh: number): void {
+    commit(items.map((entry) => entry.id === item.id
+      ? {
+          ...entry,
+          w: clamp(item.w + dw, minW, cols - item.x),
+          h: Math.max(minH, item.h + dh),
+        }
+      : entry));
+  }
+
+  function startMove(event: PointerEvent, item: GridItem): void {
+    if (!editable || event.button !== 0) return;
+    event.preventDefault();
+
+    const handle = event.currentTarget as HTMLElement;
+    const rect = container?.getBoundingClientRect();
+    const stepX = rect && rect.width > 0 ? (rect.width + gap) / cols : 80;
+    const stepY = rowHeight + gap;
+    const startX = event.clientX;
+    const startY = event.clientY;
+    const origin = { x: item.x, y: item.y };
+
+    const onMove = (moveEvent: PointerEvent): void => {
+      move(
+        { ...item, x: origin.x, y: origin.y },
+        Math.round((moveEvent.clientX - startX) / stepX),
+        Math.round((moveEvent.clientY - startY) / stepY),
+      );
+    };
+    onPointerGesture(handle, event.pointerId, onMove);
+  }
+
+  function startResize(event: PointerEvent, item: GridItem): void {
+    if (!editable || event.button !== 0) return;
+    event.preventDefault();
+
+    const handle = event.currentTarget as HTMLElement;
+    const rect = container?.getBoundingClientRect();
+    const stepX = rect && rect.width > 0 ? (rect.width + gap) / cols : 80;
+    const stepY = rowHeight + gap;
+    const startX = event.clientX;
+    const startY = event.clientY;
+    const origin = { w: item.w, h: item.h };
+
+    const onMove = (moveEvent: PointerEvent): void => {
+      resize(
+        { ...item, w: origin.w, h: origin.h },
+        Math.round((moveEvent.clientX - startX) / stepX),
+        Math.round((moveEvent.clientY - startY) / stepY),
+      );
+    };
+    onPointerGesture(handle, event.pointerId, onMove);
+  }
+
+  function onPointerGesture(
+    handle: HTMLElement,
+    pointerId: number,
+    onMove: (event: PointerEvent) => void,
+  ): void {
+    const onUp = (): void => {
+      window.removeEventListener('pointermove', onMove);
+      window.removeEventListener('pointerup', onUp);
+      try {
+        handle.releasePointerCapture?.(pointerId);
+      } catch {
+        // Pointer capture may be unavailable or already released.
+      }
+    };
+    try {
+      handle.setPointerCapture?.(pointerId);
+    } catch {
+      // Pointer capture is optional; window listeners still track the gesture.
+    }
+    window.addEventListener('pointermove', onMove);
+    window.addEventListener('pointerup', onUp);
+  }
+
+  function handleKeydown(event: KeyboardEvent, item: GridItem, mode: 'move' | 'resize'): void {
+    if (!editable) return;
+    let dx = 0;
+    let dy = 0;
+    if (event.key === 'ArrowRight') dx = 1;
+    else if (event.key === 'ArrowLeft') dx = -1;
+    else if (event.key === 'ArrowDown') dy = 1;
+    else if (event.key === 'ArrowUp') dy = -1;
+    else return;
+    event.preventDefault();
+    if (mode === 'move') move(item, dx, dy);
+    else resize(item, dx, dy);
+  }
+</script>
+
+<div
+  bind:this={container}
+  class={cn('svadmin-resizable-grid', className)}
+  data-slot="resizable-grid"
+  data-editable={editable ? 'true' : 'false'}
+  style={`--svadmin-grid-row: ${rowHeight}px; height: ${height};`}
+  role="group"
+  aria-label={ariaLabel}
+>
+  {#each items as entry (entry.id)}
+    <div
+      class="svadmin-resizable-grid__item"
+      data-grid-id={entry.id}
+      style={`left: calc(${entry.x} * (100% + ${gap}px) / ${cols}); width: calc(${entry.w} * (100% + ${gap}px) / ${cols} - ${gap}px); top: calc(${entry.y} * (var(--svadmin-grid-row) + ${gap}px)); height: calc(${entry.h} * var(--svadmin-grid-row) + ${Math.max(entry.h - 1, 0) * gap}px);`}
+    >
+      <div class="svadmin-resizable-grid__content">
+        {#if itemSnippet}{@render itemSnippet(entry)}{:else if children}{@render children()}{/if}
+      </div>
+      {#if editable}
+        <button
+          type="button"
+          class="svadmin-resizable-grid__handle svadmin-resizable-grid__handle--move"
+          aria-label={`Move ${entry.id}`}
+          onpointerdown={(event) => startMove(event, entry)}
+          onkeydown={(event) => handleKeydown(event, entry, 'move')}
+        >⠿</button>
+        <button
+          type="button"
+          class="svadmin-resizable-grid__handle svadmin-resizable-grid__handle--resize"
+          aria-label={`Resize ${entry.id}`}
+          onpointerdown={(event) => startResize(event, entry)}
+          onkeydown={(event) => handleKeydown(event, entry, 'resize')}
+        ></button>
+      {/if}
+    </div>
+  {/each}
+</div>
+
+<style>
+  .svadmin-resizable-grid {
+    position: relative;
+    width: 100%;
+  }
+
+  .svadmin-resizable-grid__item {
+    position: absolute;
+    display: flex;
+    overflow: hidden;
+    border: 1px solid var(--border, currentColor);
+    border-radius: min(var(--radius, 0.5rem), 0.75rem);
+    background: var(--card, var(--background, transparent));
+    color: var(--card-foreground, var(--foreground, currentColor));
+  }
+
+  .svadmin-resizable-grid__content { min-width: 0; flex: 1; padding: 0.75rem; }
+
+  .svadmin-resizable-grid__handle {
+    position: absolute;
+    border: 0;
+    padding: 0;
+    background: transparent;
+    color: var(--muted-foreground, currentColor);
+    cursor: pointer;
+  }
+  .svadmin-resizable-grid__handle:focus-visible { outline: 2px solid var(--ring, currentColor); outline-offset: -2px; }
+
+  .svadmin-resizable-grid__handle--move {
+    top: 0;
+    right: 1.25rem;
+    width: 1.25rem;
+    height: 1.25rem;
+    font-size: 0.75rem;
+    line-height: 1;
+    cursor: grab;
+  }
+  .svadmin-resizable-grid__handle--move:active { cursor: grabbing; }
+
+  .svadmin-resizable-grid__handle--resize {
+    right: 0;
+    bottom: 0;
+    width: 1rem;
+    height: 1rem;
+    background: linear-gradient(135deg, transparent 45%, var(--border, currentColor) 45%, var(--border, currentColor) 55%, transparent 55%, transparent 70%, var(--border, currentColor) 70%, var(--border, currentColor) 80%, transparent 80%);
+    cursor: nwse-resize;
+  }
+</style>

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

@@ -0,0 +1,34 @@
+import type { Snippet } from 'svelte';
+export interface GridItem {
+    id: string;
+    /** Column index (0-based). */
+    x: number;
+    /** Row index (0-based). */
+    y: number;
+    /** Width in columns. */
+    w: number;
+    /** Height in rows. */
+    h: number;
+}
+interface Props {
+    items: GridItem[];
+    /** Number of columns in the grid. */
+    cols?: number;
+    /** Height of a single row in pixels. */
+    rowHeight?: number;
+    /** Gap between cells in pixels. */
+    gap?: number;
+    minW?: number;
+    minH?: number;
+    /** Enables move/resize handles. */
+    editable?: boolean;
+    ariaLabel?: string;
+    class?: string;
+    /** Renders each cell's content. Falls back to `children`. */
+    item?: Snippet<[GridItem]>;
+    children?: Snippet;
+    onchange?: (items: GridItem[]) => void;
+}
+declare const ResizableGrid: import("svelte").Component<Props, {}, "items">;
+type ResizableGrid = ReturnType<typeof ResizableGrid>;
+export default ResizableGrid;

package/dist/components/Sidebar.svelte

@@ -427,7 +427,7 @@
             <span class="svadmin-u-36e579c0b41c svadmin-u-2eba0d65d059">{i18n.t('common.toggleTheme')}</span>
             <span
               class="svadmin-u-6a60c09e6aaa svadmin-u-9cea05671a29 svadmin-u-ac204c108886 svadmin-u-3daca9af0861 svadmin-u-823f000e740a svadmin-u-6f8ab8abb126"
-              style="background-color: {getColorThemes().find(c => c.id === getColorTheme())?.color ?? '#6366f1'}; --tw-ring-color: {getColorThemes().find(c => c.id === getColorTheme())?.color ?? '#6366f1'}"
+              style="background-color: {getColorThemes().find(c => c.id === getColorTheme())?.color ?? '#635bff'}; --tw-ring-color: {getColorThemes().find(c => c.id === getColorTheme())?.color ?? '#635bff'}"
             ></span>
             <!-- The dot previews the user-selected runtime theme swatch; the hex
                  fallback only covers the case where no registered theme matches. -->

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;
+        },
+    };
+}