@svgrid/grid 1.2.33 → 2.0.0

package/src/SvMaskedInput.svelte

@@ -7,20 +7,23 @@
    * The styled renderer over the headless `createMaskedInput` core; the mask
    * formatting + state live in the core, spread here via prop-getters.
    */
+  import type { Snippet } from 'svelte'
   import { unmask } from './datetime/mask'
+  import SvField from './SvField.svelte'
+  import { nextEditorId, type SvEditorProps } from './editor-contract'
   import { createMaskedInput } from './createMaskedInput.svelte'
 
-  type Props = {
+  type Props = SvEditorProps & {
     value?: string
     /** Called with (masked, raw, complete). */
     onChange?: (masked: string, raw: string, complete: boolean) => void
     mask?: string
     placeholder?: string
-    disabled?: boolean
-    readonly?: boolean
-    name?: string
-    size?: 'sm' | 'md' | 'lg'
-    ariaLabel?: string
+    /** Show a clear (x) button when there is a value. */
+    clearable?: boolean
+    /** Leading / trailing icon adornments. */
+    prefixIcon?: Snippet
+    suffixIcon?: Snippet
   }
 
   let {
@@ -33,8 +36,21 @@
     name,
     size = 'md',
     ariaLabel,
+    invalid = false,
+    required = false,
+    error,
+    label,
+    hint,
+    dir,
+    id,
+    clearable = false,
+    prefixIcon,
+    suffixIcon,
   }: Props = $props()
 
+  const autoId = nextEditorId('sv-mask')
+  const uid = $derived(id ?? autoId)
+
   const mi = createMaskedInput({
     value: () => value,
     onChange: (m, r, c) => onChange?.(m, r, c),
@@ -42,25 +58,49 @@
     placeholder: () => placeholder,
     disabled: () => disabled,
     readonly: () => readonly,
+    id: () => uid,
+    invalid: () => invalid,
+    required: () => required,
+    error: () => error,
+    hint: () => hint,
     ariaLabel: () => ariaLabel,
   })
 </script>
 
-<input class="sv-masked sv-masked--{size}" {...mi.inputProps()} />
-{#if name}<input type="hidden" {name} value={mask ? unmask(mi.masked, mask) : mi.masked} />{/if}
+<SvField id={uid} {label} {hint} {error} {required} {dir}>
+  <div class="sv-masked sv-masked--{size}" class:is-invalid={invalid} class:is-disabled={disabled}>
+    {#if prefixIcon}<span class="sv-masked__adorn">{@render prefixIcon()}</span>{/if}
+    <input class="sv-masked__input" {...mi.inputProps()} />
+    {#if clearable && mi.masked && !disabled && !readonly}
+      <button type="button" class="sv-masked__clear" aria-label="Clear" tabindex="-1" onclick={() => onChange?.('', '', false)}>
+        <svg viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><path d="M6 6l12 12M18 6L6 18" /></svg>
+      </button>
+    {/if}
+    {#if suffixIcon}<span class="sv-masked__adorn">{@render suffixIcon()}</span>{/if}
+    {#if name}<input type="hidden" {name} value={mask ? unmask(mi.masked, mask) : mi.masked} />{/if}
+  </div>
+</SvField>
 
 <style>
   .sv-masked {
     --_accent: var(--sg-accent, #2563eb);
-    box-sizing: border-box; width: 200px;
+    box-sizing: border-box; width: 200px; display: inline-flex; align-items: center; gap: 6px;
     background: var(--sg-input-bg, #fff); color: var(--sg-fg, #0f172a);
     border: 1px solid var(--sg-input-border, var(--sg-border, #cbd5e1)); border-radius: var(--sg-radius, 8px);
-    font: inherit; padding: 0 10px; outline: none;
-    font-variant-numeric: tabular-nums; letter-spacing: 0.02em;
+    font: inherit; padding: 0 8px 0 10px;
   }
   .sv-masked--sm { height: 28px; font-size: 12px; }
   .sv-masked--md { height: 34px; font-size: 13px; }
   .sv-masked--lg { height: 40px; font-size: 15px; }
-  .sv-masked:focus { border-color: var(--_accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--_accent) 22%, transparent); }
-  .sv-masked:disabled { opacity: 0.6; }
+  .sv-masked:focus-within { border-color: var(--_accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--_accent) 22%, transparent); }
+  .sv-masked.is-invalid { border-color: var(--sg-danger, #dc2626); }
+  .sv-masked.is-invalid:focus-within { box-shadow: 0 0 0 2px color-mix(in srgb, var(--sg-danger, #dc2626) 22%, transparent); }
+  .sv-masked.is-disabled { opacity: 0.6; }
+  .sv-masked__input {
+    flex: 1; min-width: 0; border: 0; background: none; outline: none; color: inherit; font: inherit;
+    font-variant-numeric: tabular-nums; letter-spacing: 0.02em;
+  }
+  .sv-masked__adorn { display: inline-flex; flex: none; color: var(--sg-muted, #64748b); }
+  .sv-masked__clear { display: grid; place-items: center; width: 20px; flex: none; background: none; border: 0; color: var(--sg-muted, #64748b); cursor: pointer; border-radius: 4px; }
+  .sv-masked__clear:hover { color: var(--sg-danger, #dc2626); }
 </style>

package/src/SvMenu.svelte

@@ -0,0 +1,101 @@
+<script lang="ts" module>
+  export type { MenuItem } from './SvMenuList.svelte'
+</script>
+
+<script lang="ts">
+  /**
+   * SvMenu - a dropdown / context menu: a trigger opens a portalled, animated
+   * menu surface with submenus, separators, icons, shortcuts and full keyboard
+   * (arrows, Enter, Escape, ArrowRight/Left for submenus). Portals to <body> so it
+   * escapes any clipping. Parity: Smart menu / context-menu.
+   *
+   * ```svelte
+   * <SvMenu items={items} onSelect={(i) => run(i)}>
+   *   {#snippet anchor()}<button>Actions</button>{/snippet}
+   * </SvMenu>
+   * ```
+   */
+  import type { Snippet } from 'svelte'
+  import { anchoredRect, portalToBody, popIn, type AnchoredRect } from './popover'
+  import { createDismissableLayer } from './a11y/dismissable'
+  import SvMenuList, { type MenuItem } from './SvMenuList.svelte'
+
+  let {
+    items,
+    open = $bindable(false),
+    onOpenChange,
+    onSelect,
+    ariaLabel,
+    anchor,
+  }: {
+    items: ReadonlyArray<MenuItem>
+    open?: boolean
+    onOpenChange?: (open: boolean) => void
+    onSelect?: (item: MenuItem) => void
+    ariaLabel?: string
+    anchor?: Snippet
+  } = $props()
+
+  let anchorEl = $state<HTMLSpanElement | null>(null)
+  let panelEl = $state<HTMLDivElement | null>(null)
+  let rect = $state<AnchoredRect>({ top: 0, left: 0, width: 0, openUpward: false })
+
+  function setOpen(v: boolean) { if (v !== open) { open = v; onOpenChange?.(v) } }
+  function toggle() { setOpen(!open) }
+  function updatePos() {
+    if (!anchorEl) return
+    rect = anchoredRect(anchorEl.getBoundingClientRect(), { estimatedHeight: Math.min(items.length, 10) * 34 + 8, minWidth: 180 })
+  }
+
+  $effect(() => {
+    if (!open) return
+    updatePos()
+    queueMicrotask(() => panelEl?.querySelector<HTMLElement>('[role="menuitem"]:not([disabled])')?.focus())
+    const rp = () => updatePos()
+    window.addEventListener('scroll', rp, true)
+    window.addEventListener('resize', rp)
+    // Outside-click dismissal via the shared layer stack (Escape stays owned by
+    // SvMenuList's keyboard handling, so closeOnEscape is off here).
+    const layer = createDismissableLayer({
+      element: () => [anchorEl, panelEl],
+      onDismiss: () => setOpen(false),
+      closeOnEscape: false,
+    })
+    layer.activate()
+    return () => {
+      window.removeEventListener('scroll', rp, true)
+      window.removeEventListener('resize', rp)
+      layer.release()
+    }
+  })
+</script>
+
+<!-- svelte-ignore a11y_no_static_element_interactions a11y_click_events_have_key_events -->
+<span bind:this={anchorEl} class="sv-menu__anchor" onclick={toggle}>
+  {@render anchor?.()}
+</span>
+
+{#if open}
+  <div
+    bind:this={panelEl}
+    class="sv-menu"
+    use:portalToBody
+    use:popIn={{ up: rect.openUpward }}
+    style:position="fixed"
+    style:top={`${rect.top}px`}
+    style:left={`${rect.left}px`}
+    aria-label={ariaLabel}
+  >
+    <SvMenuList {items} onclose={() => setOpen(false)} onselect={(i) => onSelect?.(i)} />
+  </div>
+{/if}
+
+<style>
+  .sv-menu__anchor { display: inline-flex; }
+  :global(.sv-menu) {
+    z-index: 2147483646; min-width: 180px;
+    background: var(--sg-bg, #fff); color: var(--sg-fg, #0f172a);
+    border: 1px solid var(--sg-border, #e2e8f0); border-radius: 10px;
+    box-shadow: 0 16px 48px -12px rgba(15, 23, 42, 0.35); font-size: 13px;
+  }
+</style>

package/src/SvMenu.test.ts

@@ -0,0 +1,73 @@
+/**
+ * Component tests for SvMenu: the trigger opens a portalled menu, items/separators
+ * render with menu semantics, choosing a leaf fires onSelect + closes, and a
+ * submenu opens on pointer-enter.
+ */
+import { describe, expect, it, afterEach } from 'vitest'
+import { mount, unmount, flushSync, createRawSnippet } from 'svelte'
+import SvMenu, { type MenuItem } from './SvMenu.svelte'
+
+const anchor = createRawSnippet(() => ({ render: () => `<button class="trigger">Actions</button>` }))
+
+function mountMenu(props: Record<string, unknown>) {
+  const target = document.createElement('div')
+  document.body.appendChild(target)
+  const app = mount(SvMenu, { target, props: { anchor, ...props } as any })
+  flushSync()
+  return { target, destroy: () => { unmount(app); target.remove() } }
+}
+const menu = () => document.querySelector<HTMLElement>('.sv-menu')
+afterEach(() => document.querySelectorAll('.sv-menu').forEach((n) => n.remove()))
+
+describe('SvMenu', () => {
+  const items: MenuItem[] = [
+    { label: 'Cut', shortcut: 'Ctrl+X', onSelect: () => {} },
+    { label: 'Copy', shortcut: 'Ctrl+C' },
+    { separator: true },
+    { label: 'Share', children: [{ label: 'Email' }, { label: 'Link' }] },
+    { label: 'Delete', disabled: true },
+  ]
+
+  it('opens on trigger click with menu/menuitem roles + a separator', () => {
+    const { target, destroy } = mountMenu({ items })
+    try {
+      expect(menu()).toBeNull()
+      target.querySelector<HTMLElement>('.trigger')!.click()
+      flushSync()
+      const m = menu()!
+      expect(m.querySelector('[role="menu"]')).not.toBeNull()
+      expect(m.querySelectorAll('[role="menuitem"]').length).toBe(4) // 4 items, separator excluded
+      expect(m.querySelector('[role="separator"]')).not.toBeNull()
+      expect(m.querySelector('[aria-disabled="true"]')).not.toBeNull()
+    } finally { destroy() }
+  })
+
+  it('choosing a leaf fires onSelect and closes', () => {
+    let chosen: MenuItem | undefined
+    const { target, destroy } = mountMenu({ items, onSelect: (i: MenuItem) => (chosen = i) })
+    try {
+      target.querySelector<HTMLElement>('.trigger')!.click()
+      flushSync()
+      const copy = [...menu()!.querySelectorAll<HTMLElement>('[role="menuitem"]')].find((b) => b.textContent?.includes('Copy'))!
+      copy.click()
+      flushSync()
+      expect(chosen?.label).toBe('Copy')
+      expect(menu()).toBeNull()
+    } finally { destroy() }
+  })
+
+  it('opens a submenu on pointer-enter of a parent item', () => {
+    const { target, destroy } = mountMenu({ items })
+    try {
+      target.querySelector<HTMLElement>('.trigger')!.click()
+      flushSync()
+      const share = [...menu()!.querySelectorAll<HTMLElement>('[role="menuitem"]')].find((b) => b.textContent?.includes('Share'))!
+      expect(share.getAttribute('aria-haspopup')).toBe('menu')
+      share.dispatchEvent(new PointerEvent('pointerenter', { bubbles: true }))
+      flushSync()
+      expect(menu()!.querySelector('.sv-menu__flyout')).not.toBeNull()
+      const sub = [...menu()!.querySelectorAll('[role="menuitem"]')].map((b) => b.textContent)
+      expect(sub.some((t) => t?.includes('Email'))).toBe(true)
+    } finally { destroy() }
+  })
+})

package/src/SvMenuList.svelte

@@ -0,0 +1,143 @@
+<script lang="ts" module>
+  import type { Snippet } from 'svelte'
+  export type MenuItem = {
+    /** Item text. Omit + set `separator` for a divider. */
+    label?: string
+    separator?: boolean
+    icon?: Snippet
+    /** Right-aligned hint, e.g. a keyboard shortcut. */
+    shortcut?: string
+    disabled?: boolean
+    /** Nested submenu items (renders a flyout). */
+    children?: MenuItem[]
+    onSelect?: () => void
+  }
+</script>
+
+<script lang="ts">
+  /**
+   * SvMenuList - the recursive menu surface behind SvMenu: a WAI-ARIA `menu` with
+   * roving focus, submenus (hover + ArrowRight), separators, icons and shortcuts.
+   * Rendered inside a portalled panel by SvMenu; it self-imports for submenus.
+   */
+  import Self from './SvMenuList.svelte'
+
+  let {
+    items,
+    onclose,
+    onselect,
+    submenu = false,
+  }: {
+    items: ReadonlyArray<MenuItem>
+    /** Close the WHOLE menu (a leaf was chosen or Escape at the root). */
+    onclose: () => void
+    /** Report the chosen leaf item. */
+    onselect: (item: MenuItem) => void
+    submenu?: boolean
+  } = $props()
+
+  // Indexes of real (non-separator) items, for roving focus.
+  const focusable = $derived(items.map((it, i) => (it.separator || it.disabled ? -1 : i)).filter((i) => i >= 0))
+  let active = $state(-1)
+  let openSub = $state(-1)
+  let listEl = $state<HTMLDivElement | null>(null)
+
+  function focusItem(i: number) {
+    active = i
+    queueMicrotask(() => listEl?.querySelector<HTMLElement>(`[data-mi="${i}"]`)?.focus())
+  }
+  function move(delta: number) {
+    if (!focusable.length) return
+    const pos = focusable.indexOf(active)
+    const next = focusable[(pos + delta + focusable.length) % focusable.length]
+    if (next != null) { openSub = -1; focusItem(next) }
+  }
+  function choose(item: MenuItem) {
+    if (item.disabled || item.separator) return
+    if (item.children?.length) { openSub = items.indexOf(item); return }
+    item.onSelect?.()
+    onselect(item)
+    onclose()
+  }
+  function onKeydown(e: KeyboardEvent, i: number) {
+    const item = items[i]
+    switch (e.key) {
+      case 'ArrowDown': e.preventDefault(); move(1); break
+      case 'ArrowUp': e.preventDefault(); move(-1); break
+      case 'Home': e.preventDefault(); focusItem(focusable[0] ?? 0); break
+      case 'End': e.preventDefault(); focusItem(focusable.at(-1) ?? 0); break
+      case 'ArrowRight':
+        if (item?.children?.length) { e.preventDefault(); openSub = i }
+        break
+      case 'ArrowLeft':
+        if (submenu) { e.preventDefault(); onclose() } // parent listens via its own onclose wiring
+        break
+      case 'Enter':
+      case ' ': e.preventDefault(); if (item) choose(item); break
+      case 'Escape': e.preventDefault(); onclose(); break
+    }
+  }
+</script>
+
+<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+<div bind:this={listEl} class="sv-menu__list" class:is-submenu={submenu} role="menu">
+  {#each items as item, i (i)}
+    {#if item.separator}
+      <div class="sv-menu__sep" role="separator"></div>
+    {:else}
+      <div class="sv-menu__itemwrap">
+        <button
+          type="button"
+          class="sv-menu__item"
+          class:is-active={active === i}
+          data-mi={i}
+          role="menuitem"
+          aria-haspopup={item.children?.length ? 'menu' : undefined}
+          aria-expanded={item.children?.length ? openSub === i : undefined}
+          aria-disabled={item.disabled || undefined}
+          disabled={item.disabled}
+          tabindex={active === i || (active === -1 && i === focusable[0]) ? 0 : -1}
+          onpointerenter={() => { if (!item.disabled) { active = i; openSub = item.children?.length ? i : -1 } }}
+          onkeydown={(e) => onKeydown(e, i)}
+          onclick={() => choose(item)}
+        >
+          <span class="sv-menu__icon">{#if item.icon}{@render item.icon()}{/if}</span>
+          <span class="sv-menu__label">{item.label}</span>
+          {#if item.shortcut}<span class="sv-menu__shortcut">{item.shortcut}</span>{/if}
+          {#if item.children?.length}<svg class="sv-menu__chev" viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6" /></svg>{/if}
+        </button>
+        {#if item.children?.length && openSub === i}
+          <div class="sv-menu__flyout">
+            <Self items={item.children} onclose={onclose} onselect={onselect} submenu />
+          </div>
+        {/if}
+      </div>
+    {/if}
+  {/each}
+</div>
+
+<style>
+  .sv-menu__list { display: flex; flex-direction: column; min-width: 180px; padding: 4px; }
+  .sv-menu__sep { height: 1px; background: var(--sg-border, #e2e8f0); margin: 4px 6px; }
+  .sv-menu__itemwrap { position: relative; }
+  .sv-menu__item {
+    display: flex; align-items: center; gap: 9px; width: 100%; box-sizing: border-box;
+    padding: 7px 10px; background: none; border: 0; border-radius: 6px; cursor: pointer;
+    font: inherit; font-size: 13px; color: var(--sg-fg, #0f172a); text-align: start;
+    transition: background 0.1s;
+  }
+  .sv-menu__item.is-active:not([disabled]), .sv-menu__item:hover:not([disabled]) { background: var(--sg-row-hover-bg, #f1f5f9); }
+  .sv-menu__item:focus-visible { outline: 2px solid var(--sg-focus-ring, var(--sg-accent, #2563eb)); outline-offset: -2px; }
+  .sv-menu__item[disabled] { opacity: 0.45; cursor: default; }
+  .sv-menu__icon { display: inline-flex; width: 16px; flex: none; color: var(--sg-muted, #64748b); }
+  .sv-menu__icon:empty { width: 0; }
+  .sv-menu__label { flex: 1; white-space: nowrap; }
+  .sv-menu__shortcut { color: var(--sg-muted, #94a3b8); font-size: 11.5px; margin-inline-start: 12px; }
+  .sv-menu__chev { color: var(--sg-muted, #94a3b8); flex: none; }
+  .sv-menu[dir='rtl'] .sv-menu__chev, .sv-menu__list.is-submenu .sv-menu__chev { }
+  .sv-menu__flyout {
+    position: absolute; top: -5px; inset-inline-start: 100%; z-index: 1;
+    background: var(--sg-bg, #fff); border: 1px solid var(--sg-border, #e2e8f0);
+    border-radius: 10px; box-shadow: 0 16px 40px -12px rgba(15,23,42,0.32); margin-inline-start: 2px;
+  }
+</style>

package/src/SvModal.svelte

@@ -0,0 +1,220 @@
+<script lang="ts">
+  /**
+   * SvModal - an accessible modal dialog: backdrop, focus trap, Escape / backdrop
+   * close, and a scale-in animation. Optionally draggable (by its header) and
+   * resizable (bottom-right handle). Parity: Smart `smart-window` (modal mode).
+   * Portalled to <body> so it overlays everything. Controlled via `open`.
+   *
+   * ```svelte
+   * <SvModal bind:open title="Edit row" draggable resizable>
+   *   <p>Body</p>
+   *   {#snippet footer()}<button onclick={() => open = false}>Close</button>{/snippet}
+   * </SvModal>
+   * ```
+   */
+  import type { Snippet } from 'svelte'
+  import { portalToBody } from './popover'
+  import { nextEditorId } from './editor-contract'
+  import { createFocusTrap } from './a11y/focus-trap'
+  import { lockScroll } from './a11y/scroll-lock'
+  import { createDismissableLayer } from './a11y/dismissable'
+
+  type Props = {
+    open?: boolean
+    onClose?: () => void
+    title?: string
+    size?: 'sm' | 'md' | 'lg'
+    draggable?: boolean
+    resizable?: boolean
+    closeOnBackdrop?: boolean
+    closeOnEsc?: boolean
+    /** Hide the header close (x) button. */
+    hideClose?: boolean
+    children?: Snippet
+    footer?: Snippet
+  }
+
+  let {
+    open = $bindable(false),
+    onClose,
+    title,
+    size = 'md',
+    draggable = false,
+    resizable = false,
+    closeOnBackdrop = true,
+    closeOnEsc = true,
+    hideClose = false,
+    children,
+    footer,
+  }: Props = $props()
+
+  const titleId = nextEditorId('sv-modal-title')
+  let dialogEl = $state<HTMLDivElement | null>(null)
+  let drag = $state({ x: 0, y: 0 })
+  let box = $state<{ w: number; h: number } | null>(null)
+
+  function close() { open = false; onClose?.() }
+
+  // Reset transient drag/resize each time it opens, then hand focus, scroll-lock
+  // and Escape/backdrop dismissal to the shared a11y primitives (one tested
+  // implementation, and nested overlays close top-first via the layer stack).
+  $effect(() => {
+    if (!open || !dialogEl) return
+    drag = { x: 0, y: 0 }
+    box = null
+    const trap = createFocusTrap(dialogEl)
+    trap.activate()
+    const unlockScroll = lockScroll()
+    const layer = createDismissableLayer({
+      element: () => dialogEl,
+      onDismiss: (reason) => {
+        if (reason === 'escape' ? closeOnEsc : closeOnBackdrop) close()
+      },
+    })
+    layer.activate()
+    return () => {
+      layer.release()
+      unlockScroll()
+      trap.release()
+    }
+  })
+
+  // --- Drag (header) ---------------------------------------------------------
+  let dragging = false
+  let dragStart = { x: 0, y: 0, ox: 0, oy: 0 }
+  function onHeaderDown(e: PointerEvent) {
+    if (!draggable || (e.target as HTMLElement).closest('.sv-modal__x')) return
+    dragging = true
+    dragStart = { x: e.clientX, y: e.clientY, ox: drag.x, oy: drag.y }
+    ;(e.currentTarget as HTMLElement).setPointerCapture(e.pointerId)
+  }
+  function onHeaderMove(e: PointerEvent) {
+    if (!dragging) return
+    drag = { x: dragStart.ox + (e.clientX - dragStart.x), y: dragStart.oy + (e.clientY - dragStart.y) }
+  }
+  function onHeaderUp(e: PointerEvent) {
+    if (!dragging) return
+    dragging = false
+    ;(e.currentTarget as HTMLElement).releasePointerCapture(e.pointerId)
+  }
+
+  // --- Resize (bottom-right handle) ------------------------------------------
+  let resizing = false
+  let resizeStart = { x: 0, y: 0, w: 0, h: 0 }
+  function onResizeDown(e: PointerEvent) {
+    if (!resizable || !dialogEl) return
+    e.stopPropagation()
+    resizing = true
+    const r = dialogEl.getBoundingClientRect()
+    resizeStart = { x: e.clientX, y: e.clientY, w: r.width, h: r.height }
+    box = { w: r.width, h: r.height }
+    ;(e.currentTarget as HTMLElement).setPointerCapture(e.pointerId)
+  }
+  function onResizeMove(e: PointerEvent) {
+    if (!resizing) return
+    box = {
+      w: Math.max(240, resizeStart.w + (e.clientX - resizeStart.x)),
+      h: Math.max(160, resizeStart.h + (e.clientY - resizeStart.y)),
+    }
+  }
+  function onResizeUp(e: PointerEvent) {
+    if (!resizing) return
+    resizing = false
+    ;(e.currentTarget as HTMLElement).releasePointerCapture(e.pointerId)
+  }
+</script>
+
+{#if open}
+  <div class="sv-modal__backdrop" use:portalToBody>
+    <div
+      bind:this={dialogEl}
+      class="sv-modal sv-modal--{size}"
+      class:is-resized={!!box}
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby={title ? titleId : undefined}
+      tabindex="-1"
+      style:transform={`translate(calc(-50% + ${drag.x}px), calc(-50% + ${drag.y}px))`}
+      style:width={box ? `${box.w}px` : undefined}
+      style:height={box ? `${box.h}px` : undefined}
+    >
+      {#if title || !hideClose}
+        <!-- svelte-ignore a11y_no_static_element_interactions -->
+        <div
+          class="sv-modal__header"
+          class:is-draggable={draggable}
+          onpointerdown={onHeaderDown}
+          onpointermove={onHeaderMove}
+          onpointerup={onHeaderUp}
+          onpointercancel={onHeaderUp}
+        >
+          <h2 class="sv-modal__title" id={titleId}>{title ?? ''}</h2>
+          {#if !hideClose}
+            <button type="button" class="sv-modal__x" aria-label="Close" onclick={close}>&times;</button>
+          {/if}
+        </div>
+      {/if}
+      <div class="sv-modal__body">{@render children?.()}</div>
+      {#if footer}<div class="sv-modal__footer">{@render footer()}</div>{/if}
+      {#if resizable}
+        <!-- svelte-ignore a11y_no_static_element_interactions -->
+        <div
+          class="sv-modal__resize"
+          aria-hidden="true"
+          onpointerdown={onResizeDown}
+          onpointermove={onResizeMove}
+          onpointerup={onResizeUp}
+          onpointercancel={onResizeUp}
+        ></div>
+      {/if}
+    </div>
+  </div>
+{/if}
+
+<style>
+  :global(.sv-modal__backdrop) {
+    position: fixed; inset: 0; z-index: 2147483000;
+    background: rgba(15, 23, 42, 0.45); backdrop-filter: blur(1.5px);
+    animation: sv-modal-fade 0.16s ease both;
+  }
+  @keyframes sv-modal-fade { from { opacity: 0 } to { opacity: 1 } }
+  @media (prefers-reduced-motion: reduce) { :global(.sv-modal__backdrop) { animation: none } }
+
+  :global(.sv-modal) {
+    position: fixed; top: 50%; left: 50%;
+    display: flex; flex-direction: column; max-width: 94vw; max-height: 88vh; min-width: 240px;
+    background: var(--sg-bg, #fff); color: var(--sg-fg, #0f172a);
+    border: 1px solid var(--sg-border, #e2e8f0); border-radius: 12px; overflow: hidden;
+    box-shadow: 0 24px 64px -16px rgba(15, 23, 42, 0.5);
+    animation: sv-modal-in 0.18s cubic-bezier(0.16, 1, 0.3, 1) both;
+  }
+  @keyframes sv-modal-in { from { opacity: 0; transform: translate(-50%, -50%) scale(0.94) } to { opacity: 1 } }
+  @media (prefers-reduced-motion: reduce) { :global(.sv-modal) { animation: none } }
+  :global(.sv-modal--sm) { width: 360px; }
+  :global(.sv-modal--md) { width: 520px; }
+  :global(.sv-modal--lg) { width: 720px; }
+  :global(.sv-modal.is-resized) { max-width: none; max-height: none; }
+
+  :global(.sv-modal__header) {
+    display: flex; align-items: center; gap: 12px; padding: 13px 16px;
+    border-bottom: 1px solid var(--sg-border, #e2e8f0);
+  }
+  :global(.sv-modal__header.is-draggable) { cursor: move; touch-action: none; user-select: none; }
+  :global(.sv-modal__title) { flex: 1; margin: 0; font-size: 15px; font-weight: 650; }
+  :global(.sv-modal__x) {
+    flex: none; width: 28px; height: 28px; display: grid; place-items: center;
+    background: none; border: 0; color: var(--sg-muted, #64748b); cursor: pointer; border-radius: 6px; font-size: 20px; line-height: 1;
+  }
+  :global(.sv-modal__x:hover) { background: var(--sg-row-hover-bg, #f1f5f9); color: var(--sg-fg, #0f172a); }
+  :global(.sv-modal__body) { padding: 16px; overflow: auto; flex: 1; font-size: 13.5px; line-height: 1.6; }
+  :global(.sv-modal__footer) {
+    display: flex; justify-content: flex-end; gap: 8px; padding: 12px 16px;
+    border-top: 1px solid var(--sg-border, #e2e8f0);
+  }
+  :global(.sv-modal__resize) {
+    position: absolute; inset-inline-end: 0; bottom: 0; width: 16px; height: 16px;
+    cursor: nwse-resize; touch-action: none;
+    background: linear-gradient(135deg, transparent 50%, var(--sg-muted, #94a3b8) 50%, var(--sg-muted, #94a3b8) 60%, transparent 60%, transparent 72%, var(--sg-muted, #94a3b8) 72%, var(--sg-muted, #94a3b8) 82%, transparent 82%);
+    opacity: 0.6;
+  }
+</style>