@svadmin/ui 0.74.0 → 0.76.0

package/dist/components/PhoneInput.svelte

@@ -0,0 +1,157 @@
+<script lang="ts">
+  import { cn } from '../utils.js';
+  import {
+    findDialCodeByCountry,
+    PHONE_DIAL_CODES,
+    toE164,
+    type PhoneDialCode,
+  } from './phone-dial-codes.js';
+
+  interface Props {
+    /** ISO 3166-1 alpha-2 country code. */
+    country?: string;
+    /** National number without the dialling prefix. */
+    nationalNumber?: string;
+    countries?: readonly PhoneDialCode[];
+    id?: string;
+    name?: string;
+    placeholder?: string;
+    disabled?: boolean;
+    readonly?: boolean;
+    required?: boolean;
+    invalid?: boolean;
+    describedby?: string;
+    ariaLabel?: string;
+    class?: string;
+    onchange?: (payload: { country: string; nationalNumber: string; e164: string }) => void;
+  }
+
+  let {
+    country = $bindable('CN'),
+    nationalNumber = $bindable(''),
+    countries = PHONE_DIAL_CODES,
+    id,
+    name,
+    placeholder = 'Phone number',
+    disabled = false,
+    readonly = false,
+    required = false,
+    invalid = false,
+    describedby,
+    ariaLabel = 'Phone number',
+    class: className = '',
+    onchange,
+  }: Props = $props();
+
+  const entry = $derived(findDialCodeByCountry(country, countries));
+  const dial = $derived(entry?.dial ?? '');
+
+  function emit(): void {
+    onchange?.({
+      country,
+      nationalNumber,
+      e164: toE164(country, nationalNumber, countries),
+    });
+  }
+</script>
+
+<div
+  class={cn('svadmin-phone-input', className)}
+  data-slot="phone-input"
+  data-invalid={invalid ? 'true' : undefined}
+  data-disabled={disabled ? 'true' : undefined}
+>
+  <select
+    class="svadmin-phone-input__country"
+    bind:value={country}
+    {disabled}
+    aria-label={`${ariaLabel}: country code`}
+    onchange={emit}
+  >
+    {#each countries as option (option.country)}
+      <option value={option.country}>{option.name} (+{option.dial})</option>
+    {/each}
+  </select>
+
+  <div class="svadmin-phone-input__control">
+    {#if dial}<span class="svadmin-phone-input__dial" aria-hidden="true">+{dial}</span>{/if}
+    <input
+      class="svadmin-phone-input__field"
+      type="tel"
+      inputmode="tel"
+      autocomplete="tel-national"
+      {id}
+      {name}
+      bind:value={nationalNumber}
+      {placeholder}
+      {disabled}
+      {readonly}
+      {required}
+      aria-label={ariaLabel}
+      aria-invalid={invalid ? 'true' : undefined}
+      aria-describedby={describedby}
+      oninput={emit}
+    />
+  </div>
+</div>
+
+<style>
+  .svadmin-phone-input {
+    display: flex;
+    align-items: stretch;
+    border: 1px solid var(--border, currentColor);
+    border-radius: min(var(--radius, 0.5rem), 0.5rem);
+    background: var(--background, transparent);
+    color: var(--foreground, currentColor);
+  }
+
+  .svadmin-phone-input:focus-within { outline: 2px solid var(--ring, currentColor); outline-offset: 1px; }
+  .svadmin-phone-input[data-invalid='true'] { border-color: var(--destructive, currentColor); }
+  .svadmin-phone-input[data-disabled='true'] { cursor: not-allowed; opacity: 0.6; }
+
+  .svadmin-phone-input__country {
+    flex: none;
+    max-width: 11rem;
+    border: 0;
+    border-inline-end: 1px solid var(--border, currentColor);
+    border-start-start-radius: inherit;
+    border-end-start-radius: inherit;
+    padding: 0.5rem 0.625rem;
+    background: var(--muted, transparent);
+    color: inherit;
+    font: inherit;
+    font-size: 0.8125rem;
+    cursor: pointer;
+  }
+
+  .svadmin-phone-input__country:focus-visible { outline: none; }
+
+  .svadmin-phone-input__control {
+    display: flex;
+    min-width: 0;
+    flex: 1;
+    align-items: center;
+    gap: 0.375rem;
+    padding-inline: 0.625rem;
+  }
+
+  .svadmin-phone-input__dial {
+    flex: none;
+    color: var(--muted-foreground, currentColor);
+    font-size: 0.8125rem;
+    font-variant-numeric: tabular-nums;
+  }
+
+  .svadmin-phone-input__field {
+    width: 100%;
+    min-width: 0;
+    border: 0;
+    padding-block: 0.5rem;
+    background: transparent;
+    color: inherit;
+    font: inherit;
+    font-size: 0.875rem;
+  }
+
+  .svadmin-phone-input__field:focus { outline: none; }
+</style>

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

@@ -0,0 +1,26 @@
+import { type PhoneDialCode } from './phone-dial-codes.js';
+interface Props {
+    /** ISO 3166-1 alpha-2 country code. */
+    country?: string;
+    /** National number without the dialling prefix. */
+    nationalNumber?: string;
+    countries?: readonly PhoneDialCode[];
+    id?: string;
+    name?: string;
+    placeholder?: string;
+    disabled?: boolean;
+    readonly?: boolean;
+    required?: boolean;
+    invalid?: boolean;
+    describedby?: string;
+    ariaLabel?: string;
+    class?: string;
+    onchange?: (payload: {
+        country: string;
+        nationalNumber: string;
+        e164: string;
+    }) => void;
+}
+declare const PhoneInput: import("svelte").Component<Props, {}, "country" | "nationalNumber">;
+type PhoneInput = ReturnType<typeof PhoneInput>;
+export default PhoneInput;

package/dist/components/QRCode.svelte

@@ -0,0 +1,88 @@
+<script lang="ts">
+  import QRCodeLib from 'qrcode';
+  import { cn } from '../utils.js';
+
+  /**
+   * Renders a QR code from the Svelte ecosystem `qrcode` package as a crisp
+   * SVG. No canvas is required, so it is safe under SSR and test DOMs.
+   */
+  interface Props {
+    /** Content to encode. Empty content renders a neutral placeholder. */
+    value: string;
+    /** Rendered size in pixels. */
+    size?: number;
+    /** Quiet-zone width in modules. Keep at least 4 for reliable scanning. */
+    margin?: number;
+    errorCorrectionLevel?: 'L' | 'M' | 'Q' | 'H';
+    /** Module color; defaults to the semantic foreground token. */
+    color?: string;
+    /** Background color; defaults to the semantic background token. */
+    background?: string;
+    ariaLabel?: string;
+    class?: string;
+  }
+
+  let {
+    value,
+    size = 160,
+    margin = 4,
+    errorCorrectionLevel = 'M',
+    color = 'var(--foreground, black)',
+    background = 'var(--background, white)',
+    ariaLabel = 'QR code',
+    class: className = '',
+  }: Props = $props();
+
+  const matrix = $derived.by(() => {
+    if (!value) return null;
+    try {
+      const qr = QRCodeLib.create(value, { errorCorrectionLevel });
+      const moduleCount = qr.modules.size;
+      const data = qr.modules.data;
+      const total = moduleCount + margin * 2;
+      let path = '';
+      for (let y = 0; y < moduleCount; y += 1) {
+        for (let x = 0; x < moduleCount; x += 1) {
+          if (data[y * moduleCount + x]) path += `M${x + margin} ${y + margin}h1v1h-1z`;
+        }
+      }
+      return { total, path };
+    } catch {
+      return null;
+    }
+  });
+</script>
+
+<figure class={cn('svadmin-qr-code', className)} data-slot="qr-code">
+  {#if matrix}
+    <svg
+      class="svadmin-qr-code__svg"
+      width={size}
+      height={size}
+      viewBox={`0 0 ${matrix.total} ${matrix.total}`}
+      role="img"
+      aria-label={ariaLabel}
+      shape-rendering="crispEdges"
+    >
+      <rect width={matrix.total} height={matrix.total} fill={background} />
+      <path d={matrix.path} fill={color} />
+    </svg>
+  {:else}
+    <p class="svadmin-qr-code__empty" role="status">No QR content.</p>
+  {/if}
+</figure>
+
+<style>
+  .svadmin-qr-code {
+    display: inline-flex;
+    margin: 0;
+    border: 1px solid var(--border, currentColor);
+    border-radius: min(var(--radius, 0.5rem), 0.75rem);
+    padding: 0.5rem;
+    background: var(--card, var(--background, transparent));
+    color: var(--card-foreground, var(--foreground, currentColor));
+  }
+
+  .svadmin-qr-code__svg { display: block; border-radius: calc(min(var(--radius, 0.5rem), 0.75rem) - 0.25rem); }
+  .svadmin-qr-code__empty { margin: 0; padding: 1rem; color: var(--muted-foreground, currentColor); font-size: 0.8125rem; }
+</style>

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

@@ -0,0 +1,22 @@
+/**
+ * Renders a QR code from the Svelte ecosystem `qrcode` package as a crisp
+ * SVG. No canvas is required, so it is safe under SSR and test DOMs.
+ */
+interface Props {
+    /** Content to encode. Empty content renders a neutral placeholder. */
+    value: string;
+    /** Rendered size in pixels. */
+    size?: number;
+    /** Quiet-zone width in modules. Keep at least 4 for reliable scanning. */
+    margin?: number;
+    errorCorrectionLevel?: 'L' | 'M' | 'Q' | 'H';
+    /** Module color; defaults to the semantic foreground token. */
+    color?: string;
+    /** Background color; defaults to the semantic background token. */
+    background?: string;
+    ariaLabel?: string;
+    class?: string;
+}
+declare const QRCode: import("svelte").Component<Props, {}, "">;
+type QRCode = ReturnType<typeof QRCode>;
+export default QRCode;

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/ResourceOperationsPage.svelte

@@ -78,8 +78,12 @@
     emptyLanesText = 'No grouped records yet.',
     highlightsLabel = 'Focus queue',
     workspaceStyle = 'operations',
-    tableProps = {},
+    tableProps: rawTableProps = {},
   }: Props = $props();
+  const tableProps = $derived({
+    ...rawTableProps,
+    ...(rendering === undefined ? {} : { rendering }),
+  });
   const navigation = useNavigation();
   const context = captureAdminContext();
   const resource = $derived(context.getResource(resourceName));

package/dist/components/TimePicker.svelte

@@ -4,7 +4,7 @@
 
   export type TimePickerProps = Omit<ComponentProps<typeof DateTimeInput>, 'mode'>;
 
-  let props: TimePickerProps = $props();
+  let { value = $bindable(null), ...props }: TimePickerProps = $props();
 </script>
 
-<DateTimeInput {...props} mode="time" />
+<DateTimeInput {...props} bind:value mode="time" />

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

@@ -1,6 +1,6 @@
 import type { ComponentProps } from 'svelte';
 import DateTimeInput from './DateTimeInput.svelte';
 export type TimePickerProps = Omit<ComponentProps<typeof DateTimeInput>, 'mode'>;
-declare const TimePicker: import("svelte").Component<TimePickerProps, {}, "">;
+declare const TimePicker: import("svelte").Component<TimePickerProps, {}, "value">;
 type TimePicker = ReturnType<typeof TimePicker>;
 export default TimePicker;

package/dist/components/TooltipButton.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-/* eslint-disable @typescript-eslint/no-explicit-any */
   import * as Tooltip from './ui/tooltip/index.js';
   import { Button } from './ui/button/index.js';
   import type { Snippet } from 'svelte';
@@ -43,8 +42,8 @@
     onclick?.(event);
   }
 
-  function mergeButtonProps(primitiveProps: Record<string, any>) {
-    const merged: Record<string, any> = { ...primitiveProps, ...restProps };
+  function mergeButtonProps(primitiveProps: Record<string, unknown>) {
+    const merged: Record<string, unknown> = { ...primitiveProps, ...restProps };
     for (const [key, userHandler] of Object.entries(restProps)) {
       const primitiveHandler = primitiveProps[key];
       if (!key.startsWith('on') || typeof userHandler !== 'function' || typeof primitiveHandler !== 'function') continue;
@@ -61,7 +60,7 @@
   <Tooltip.Trigger aria-describedby={restProps['aria-describedby']}>
     {#snippet child({ props })}
       {@const primitiveOnclick = props['onclick'] as ((event: MouseEvent) => void) | undefined}
-      {@const buttonProps = { ...mergeButtonProps(props), href, target, rel, variant, size, type, class: className, 'aria-label': restProps['aria-label'] ?? tooltip, 'aria-describedby': props['aria-describedby'], onclick: (event: MouseEvent) => handleClick(event, primitiveOnclick), disabled, tabindex } as any}
+      {@const buttonProps = { ...mergeButtonProps(props), href, target, rel, variant, size, type, class: className, 'aria-label': typeof restProps['aria-label'] === 'string' ? restProps['aria-label'] : tooltip, 'aria-describedby': typeof props['aria-describedby'] === 'string' ? props['aria-describedby'] : undefined, onclick: (event: MouseEvent) => handleClick(event, primitiveOnclick), disabled, tabindex }}
       <Button {...buttonProps}>
         {@render children()}
       </Button>