@svgrid/grid 1.2.34 → 2.0.1

package/src/SvCommand.svelte

@@ -0,0 +1,197 @@
+<script lang="ts" module>
+  export type { CommandItem } from './ui-app.types'
+</script>
+
+<script lang="ts">
+  /**
+   * SvCommand - a ⌘K command palette: a fuzzy-searchable list of actions in a
+   * centered, focus-trapped dialog. Built on the shared primitives (portal +
+   * focus trap + scroll lock + dismissable layer) and the pure `fuzzyScore`
+   * matcher. Optionally binds a global hotkey to toggle itself. Emits WAI-ARIA
+   * combobox markup (activedescendant).
+   *
+   * ```svelte
+   * <SvCommand commands={cmds} onRun={(c) => run(c)} />  // Cmd/Ctrl+K opens it
+   * ```
+   */
+  import type { CommandItem } from './ui-app.types'
+  import { portalToBody, popIn } from './popover'
+  import { createFocusTrap } from './a11y/focus-trap'
+  import { lockScroll } from './a11y/scroll-lock'
+  import { createDismissableLayer } from './a11y/dismissable'
+  import { fuzzyScore } from './fuzzy'
+
+  type Props = {
+    open?: boolean
+    onClose?: () => void
+    commands: ReadonlyArray<CommandItem>
+    onRun?: (cmd: CommandItem) => void
+    placeholder?: string
+    emptyText?: string
+    /** Global toggle hotkey (Cmd/Ctrl + key). `false` disables it. Default 'mod+k'. */
+    hotkey?: 'mod+k' | 'mod+p' | false
+  }
+
+  let {
+    open = $bindable(false),
+    onClose,
+    commands,
+    onRun,
+    placeholder = 'Type a command or search…',
+    emptyText = 'No results',
+    hotkey = 'mod+k',
+  }: Props = $props()
+
+  let query = $state('')
+  let active = $state(0)
+  let panelEl = $state<HTMLDivElement | null>(null)
+  let inputEl = $state<HTMLInputElement | null>(null)
+
+  const results = $derived.by(() => {
+    const q = query.trim()
+    const list = commands.filter((c) => !c.disabled)
+    if (!q) return list
+    return list
+      .map((c) => ({ c, s: fuzzyScore(`${c.label} ${c.keywords ?? ''} ${c.group ?? ''}`, q) }))
+      .filter((x) => x.s !== null)
+      .sort((a, b) => (b.s as number) - (a.s as number))
+      .map((x) => x.c)
+  })
+
+  function close() { open = false; onClose?.() }
+  function run(cmd: CommandItem | undefined) {
+    if (!cmd || cmd.disabled) return
+    close()
+    onRun?.(cmd)
+    cmd.onRun?.()
+  }
+  function move(delta: number) {
+    const n = results.length
+    if (!n) return
+    active = (active + delta + n) % n
+    queueMicrotask(() =>
+      panelEl?.querySelector(`[data-idx="${active}"]`)?.scrollIntoView({ block: 'nearest' }),
+    )
+  }
+  function onKeydown(e: KeyboardEvent) {
+    if (e.key === 'ArrowDown') { e.preventDefault(); move(1) }
+    else if (e.key === 'ArrowUp') { e.preventDefault(); move(-1) }
+    else if (e.key === 'Enter') { e.preventDefault(); run(results[active]) }
+    // Escape + outside-click are owned by the dismissable layer.
+  }
+
+  // Reset active whenever the query changes.
+  $effect(() => { void query; active = 0 })
+
+  // Focus + scroll lock + Escape/outside dismissal while open.
+  $effect(() => {
+    if (!open || !panelEl) return
+    query = ''
+    active = 0
+    const trap = createFocusTrap(panelEl, { initialFocus: () => inputEl })
+    trap.activate()
+    const unlock = lockScroll()
+    const layer = createDismissableLayer({ element: () => panelEl, onDismiss: () => close() })
+    layer.activate()
+    return () => { layer.release(); unlock(); trap.release() }
+  })
+
+  // Global toggle hotkey.
+  $effect(() => {
+    if (!hotkey) return
+    const key = hotkey === 'mod+p' ? 'p' : 'k'
+    const onKey = (e: KeyboardEvent) => {
+      if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === key) {
+        e.preventDefault()
+        open = !open
+      }
+    }
+    window.addEventListener('keydown', onKey)
+    return () => window.removeEventListener('keydown', onKey)
+  })
+</script>
+
+{#if open}
+  <div class="sv-cmd__backdrop" use:portalToBody>
+    <div
+      bind:this={panelEl}
+      class="sv-cmd"
+      use:popIn={{}}
+      role="dialog"
+      aria-modal="true"
+      aria-label="Command palette"
+      tabindex="-1"
+      onkeydown={onKeydown}
+    >
+      <div class="sv-cmd__search">
+        <span class="sv-cmd__searchicon" aria-hidden="true">⌕</span>
+        <input
+          bind:this={inputEl}
+          class="sv-cmd__input"
+          type="text"
+          role="combobox"
+          aria-expanded="true"
+          aria-controls="sv-cmd-list"
+          aria-activedescendant={results[active] ? `sv-cmd-opt-${active}` : undefined}
+          {placeholder}
+          value={query}
+          oninput={(e) => (query = e.currentTarget.value)}
+        />
+      </div>
+      <ul class="sv-cmd__list" id="sv-cmd-list" role="listbox" aria-label="Commands">
+        {#each results as c, i (c.id)}
+          {#if !query.trim() && c.group && c.group !== results[i - 1]?.group}
+            <li class="sv-cmd__group" role="presentation">{c.group}</li>
+          {/if}
+          <li
+            id={`sv-cmd-opt-${i}`}
+            data-idx={i}
+            class="sv-cmd__opt"
+            class:is-active={i === active}
+            role="option"
+            aria-selected={i === active}
+            onpointermove={() => (active = i)}
+            onclick={() => run(c)}
+          >
+            {#if c.icon}<span class="sv-cmd__icon" aria-hidden="true">{c.icon}</span>{/if}
+            <span class="sv-cmd__label">{c.label}</span>
+            {#if c.hint}<span class="sv-cmd__hint">{c.hint}</span>{/if}
+            {#if c.shortcut}<span class="sv-cmd__kbd">{c.shortcut}</span>{/if}
+          </li>
+        {:else}
+          <li class="sv-cmd__empty" aria-disabled="true">{emptyText}</li>
+        {/each}
+      </ul>
+    </div>
+  </div>
+{/if}
+
+<style>
+  :global(.sv-cmd__backdrop) {
+    position: fixed; inset: 0; z-index: 2147483000; display: flex; justify-content: center;
+    align-items: flex-start; padding: 12vh 16px 16px;
+    background: rgba(15, 23, 42, 0.42); backdrop-filter: blur(2px);
+    animation: sv-cmd-fade 0.14s ease both;
+  }
+  @keyframes sv-cmd-fade { from { opacity: 0 } to { opacity: 1 } }
+  :global(.sv-cmd) {
+    width: min(560px, 100%); max-height: 62vh; display: flex; flex-direction: column; overflow: hidden;
+    background: var(--sg-bg, #fff); color: var(--sg-fg, #0f172a);
+    border: 1px solid var(--sg-border, #e2e8f0); border-radius: 14px;
+    box-shadow: 0 24px 64px -16px rgba(15, 23, 42, 0.5);
+  }
+  :global(.sv-cmd__search) { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--sg-border, #e2e8f0); }
+  :global(.sv-cmd__searchicon) { color: var(--sg-muted, #64748b); font-size: 18px; }
+  :global(.sv-cmd__input) { flex: 1; min-width: 0; border: 0; background: none; outline: none; font: inherit; font-size: 15px; color: var(--sg-fg, #0f172a); }
+  :global(.sv-cmd__list) { list-style: none; margin: 0; padding: 6px; overflow: auto; }
+  :global(.sv-cmd__group) { padding: 8px 10px 4px; font-size: 11px; font-weight: 650; text-transform: uppercase; letter-spacing: 0.03em; color: var(--sg-muted, #94a3b8); }
+  :global(.sv-cmd__opt) { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px; cursor: pointer; font-size: 13.5px; }
+  :global(.sv-cmd__opt.is-active) { background: var(--sg-accent, #2563eb); color: var(--sg-on-accent, #fff); }
+  :global(.sv-cmd__icon) { flex: none; width: 20px; text-align: center; }
+  :global(.sv-cmd__label) { flex: none; }
+  :global(.sv-cmd__hint) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--sg-muted, #94a3b8); font-size: 12.5px; }
+  :global(.sv-cmd__opt.is-active .sv-cmd__hint) { color: color-mix(in srgb, var(--sg-on-accent, #fff) 80%, transparent); }
+  :global(.sv-cmd__kbd) { flex: none; margin-inline-start: auto; font-size: 11px; padding: 1px 6px; border-radius: 5px; background: color-mix(in srgb, var(--sg-fg, #0f172a) 8%, transparent); color: var(--sg-muted, #64748b); }
+  :global(.sv-cmd__opt.is-active .sv-cmd__kbd) { background: color-mix(in srgb, var(--sg-on-accent, #fff) 22%, transparent); color: var(--sg-on-accent, #fff); }
+  :global(.sv-cmd__empty) { padding: 22px; text-align: center; color: var(--sg-muted, #94a3b8); font-size: 13px; }
+</style>

package/src/SvContextMenu.svelte

@@ -0,0 +1,96 @@
+<script lang="ts" module>
+  export type { MenuItem } from './SvMenuList.svelte'
+</script>
+
+<script lang="ts">
+  /**
+   * SvContextMenu - wraps a region and opens a menu at the pointer on right-click
+   * (or long-press). Reuses SvMenuList (submenus, keyboard, icons, shortcuts),
+   * portals to <body>, and closes via the shared dismissable layer stack.
+   * Parity: Smart context-menu.
+   *
+   * ```svelte
+   * <SvContextMenu items={items} onSelect={(i) => run(i)}>
+   *   <div class="drop-zone">Right-click me</div>
+   * </SvContextMenu>
+   * ```
+   */
+  import type { Snippet } from 'svelte'
+  import { portalToBody, popIn } from './popover'
+  import { createDismissableLayer } from './a11y/dismissable'
+  import SvMenuList, { type MenuItem } from './SvMenuList.svelte'
+
+  type Props = {
+    items: ReadonlyArray<MenuItem>
+    onSelect?: (item: MenuItem) => void
+    disabled?: boolean
+    ariaLabel?: string
+    children?: Snippet
+  }
+
+  let { items, onSelect, disabled = false, ariaLabel, children }: Props = $props()
+
+  let open = $state(false)
+  let pos = $state({ x: 0, y: 0 })
+  let panelEl = $state<HTMLDivElement | null>(null)
+
+  const MENU_W = 200
+  function openAt(clientX: number, clientY: number) {
+    // Clamp so the menu stays on-screen (estimate height from item count).
+    const estH = Math.min(items.length, 12) * 34 + 8
+    const x = Math.min(clientX, window.innerWidth - MENU_W - 6)
+    const y = Math.min(clientY, window.innerHeight - estH - 6)
+    pos = { x: Math.max(6, x), y: Math.max(6, y) }
+    open = true
+  }
+
+  function onContextMenu(e: MouseEvent) {
+    if (disabled) return
+    e.preventDefault()
+    openAt(e.clientX, e.clientY)
+  }
+
+  $effect(() => {
+    if (!open) return
+    queueMicrotask(() => panelEl?.querySelector<HTMLElement>('[role="menuitem"]:not([disabled])')?.focus())
+    const layer = createDismissableLayer({
+      element: () => panelEl,
+      onDismiss: () => (open = false),
+    })
+    layer.activate()
+    // Reposition-close on scroll (a moved anchor would leave the menu stranded).
+    const onScroll = () => (open = false)
+    window.addEventListener('scroll', onScroll, true)
+    return () => { layer.release(); window.removeEventListener('scroll', onScroll, true) }
+  })
+</script>
+
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div class="sv-ctx__zone" oncontextmenu={onContextMenu}>
+  {@render children?.()}
+</div>
+
+{#if open}
+  <div
+    bind:this={panelEl}
+    class="sv-ctx"
+    use:portalToBody
+    use:popIn={{}}
+    style:position="fixed"
+    style:top={`${pos.y}px`}
+    style:left={`${pos.x}px`}
+    aria-label={ariaLabel}
+  >
+    <SvMenuList {items} onclose={() => (open = false)} onselect={(i) => onSelect?.(i)} />
+  </div>
+{/if}
+
+<style>
+  .sv-ctx__zone { display: contents; }
+  :global(.sv-ctx) {
+    z-index: 2147483646; min-width: 200px;
+    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/SvCountryInput.svelte

@@ -8,23 +8,48 @@
    * roving active index + keyboard); only portal/measure/focus render concerns
    * live here.
    */
-  import { anchoredRect, portalToBody, type AnchoredRect } from './popover'
+  import { anchoredRect, portalToBody, popIn, type AnchoredRect } from './popover'
   import { flagEmoji } from './countries'
+  import SvField from './SvField.svelte'
+  import { nextEditorId, resolveMessages, type SvEditorProps } from './editor-contract'
   import { createCountryInput } from './createCountryInput.svelte'
 
-  type Props = {
+  /** User-facing strings (localizable via `messages`). */
+  type CountryMessages = { search: string; noResults: string }
+  const DEFAULT_MESSAGES: CountryMessages = { search: 'Search countries', noResults: 'No matches' }
+
+  type Props = SvEditorProps & {
     value?: string | null
     onChange?: (code: string) => void
     /** Show the dial code beside each country. */
     showDial?: boolean
     placeholder?: string
-    disabled?: boolean
-    name?: string
-    size?: 'sm' | 'md' | 'lg'
-    ariaLabel?: string
+    /** Override the built-in strings (search + empty-state). */
+    messages?: Partial<CountryMessages>
   }
 
-  let { value = null, onChange, showDial = false, placeholder = 'Select country…', disabled = false, name, size = 'md', ariaLabel }: Props = $props()
+  let {
+    value = null,
+    onChange,
+    showDial = false,
+    placeholder = 'Select country…',
+    disabled = false,
+    name,
+    size = 'md',
+    ariaLabel,
+    invalid = false,
+    required = false,
+    error,
+    label,
+    hint,
+    dir,
+    id,
+    messages,
+  }: Props = $props()
+
+  const autoId = nextEditorId('sv-country')
+  const uid = $derived(id ?? autoId)
+  const M = $derived(resolveMessages(DEFAULT_MESSAGES, messages))
 
   let triggerEl = $state<HTMLButtonElement | null>(null)
   let searchEl = $state<HTMLInputElement | null>(null)
@@ -36,7 +61,13 @@
     onChange: (c) => onChange?.(c),
     disabled: () => disabled,
     ariaLabel: () => ariaLabel,
+    searchLabel: () => M.search,
     focusTrigger: () => triggerEl?.focus(),
+    id: () => uid,
+    invalid: () => invalid,
+    required: () => required,
+    error: () => error,
+    hint: () => hint,
   })
 
   const selected = $derived(ci.selected)
@@ -61,20 +92,22 @@
   })
 </script>
 
-<button bind:this={triggerEl} class="sv-country sv-country--{size}" class:is-open={ci.open} class:is-disabled={disabled} {...ci.triggerProps()}>
-  {#if selected}
-    <span class="sv-country__flag" aria-hidden="true">{flagEmoji(selected.code)}</span>
-    <span class="sv-country__name">{selected.name}</span>
-    {#if showDial}<span class="sv-country__dial">{selected.dial}</span>{/if}
-  {:else}
-    <span class="sv-country__ph">{placeholder}</span>
-  {/if}
-  <svg class="sv-country__chev" viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6" /></svg>
-</button>
+<SvField id={uid} {label} {hint} {error} {required} {dir}>
+  <button bind:this={triggerEl} class="sv-country sv-country--{size}" class:is-open={ci.open} class:is-disabled={disabled} class:is-invalid={invalid} {...ci.triggerProps()}>
+    {#if selected}
+      <span class="sv-country__flag" aria-hidden="true">{flagEmoji(selected.code)}</span>
+      <span class="sv-country__name">{selected.name}</span>
+      {#if showDial}<span class="sv-country__dial">{selected.dial}</span>{/if}
+    {:else}
+      <span class="sv-country__ph">{placeholder}</span>
+    {/if}
+    <svg class="sv-country__chev" viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6" /></svg>
+  </button>
+</SvField>
 
 {#if ci.open}
-  <div bind:this={panelEl} class="sv-country__panel" use:portalToBody style:position="fixed" style:top={`${rect.top}px`} style:left={`${rect.left}px`} style:min-width={`${rect.width}px`} role="dialog">
-    <input bind:this={searchEl} class="sv-country__search" placeholder="Search countries…" {...ci.searchProps()} />
+  <div bind:this={panelEl} class="sv-country__panel" use:portalToBody use:popIn={{ up: rect.openUpward }} style:position="fixed" style:top={`${rect.top}px`} style:left={`${rect.left}px`} style:min-width={`${rect.width}px`} role="dialog">
+    <input bind:this={searchEl} class="sv-country__search" placeholder={`${M.search}…`} {...ci.searchProps()} />
     <div class="sv-country__list" {...ci.listboxProps()}>
       {#each ci.filtered as c, i (c.code)}
         <!-- svelte-ignore a11y_click_events_have_key_events a11y_interactive_supports_focus -->
@@ -84,7 +117,7 @@
           <span class="sv-country__dial">{c.dial}</span>
         </div>
       {:else}
-        <div class="sv-ddl__empty">No matches</div>
+        <div class="sv-ddl__empty">{M.noResults}</div>
       {/each}
     </div>
   </div>
@@ -95,13 +128,15 @@
   .sv-country {
     --_accent: var(--sg-accent, #2563eb);
     display: inline-flex; align-items: center; gap: 8px; width: 220px;
-    background: var(--sg-input-bg, #fff); color: var(--sg-fg, #0f172a); font: inherit; text-align: left;
+    background: var(--sg-input-bg, #fff); color: var(--sg-fg, #0f172a); font: inherit; text-align: start;
     border: 1px solid var(--sg-input-border, var(--sg-border, #cbd5e1)); border-radius: var(--sg-radius, 8px); padding: 0 10px; cursor: pointer;
   }
   .sv-country--sm { height: 28px; font-size: 12px; }
   .sv-country--md { height: 34px; font-size: 13px; }
   .sv-country--lg { height: 40px; font-size: 15px; }
   .sv-country.is-open, .sv-country:focus-visible { border-color: var(--_accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--_accent) 22%, transparent); outline: none; }
+  .sv-country.is-invalid { border-color: var(--sg-danger, #dc2626); }
+  .sv-country.is-invalid.is-open, .sv-country.is-invalid:focus-visible { box-shadow: 0 0 0 2px color-mix(in srgb, var(--sg-danger, #dc2626) 22%, transparent); }
   .sv-country.is-disabled { opacity: 0.6; cursor: not-allowed; }
   .sv-country__flag { font-size: 16px; }
   .sv-country__name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

package/src/SvDateRangeInput.svelte

@@ -0,0 +1,256 @@
+<script lang="ts" module>
+  export type DateRangeValue = [Date, Date] | null
+</script>
+
+<script lang="ts">
+  /**
+   * SvDateRangeInput - a start/end date-range field with a portalled two-month
+   * range calendar and one-click presets (Today, Last 7 days, This month, ...).
+   * Parity target: Smart date-range pickers. Emits `[start, end]` (inclusive) or
+   * null. It composes the existing headless range engine: the popover is just a
+   * `<SvCalendar selectionMode="range">`, so hover-preview, min/max, restricted /
+   * important dates and keyboard all come for free.
+   *
+   * Part of the SvGrid editor kit: carries the shared editor contract (label,
+   * hint, error/validation a11y, size, `dir`/RTL and localizable `messages`) via
+   * `<SvField>`, exactly like the other field editors.
+   */
+  import SvCalendar from './SvCalendar.svelte'
+  import SvField from './SvField.svelte'
+  import { anchoredRect, portalToBody, popIn, type AnchoredRect } from './popover'
+  import { editorAria, nextEditorId, resolveMessages, type SvEditorProps } from './editor-contract'
+  import { formatDate } from './datetime/date-format'
+  import { toDate, startOfDay, type DateLike } from './datetime/date-core'
+  import { rangeDays } from './datetime/date-selection'
+  import type { CalendarPreset } from './createCalendar.svelte'
+
+  /** User-facing strings (localizable via `messages`). */
+  type RangeMessages = { dialog: string; clear: string; open: string; to: string }
+  const DEFAULT_MESSAGES: RangeMessages = {
+    dialog: 'Choose a date range', clear: 'Clear', open: 'Open calendar', to: 'to',
+  }
+
+  type Props = SvEditorProps & {
+    /** Inclusive [start, end] range, or null. */
+    value?: DateRangeValue
+    onChange?: (value: DateRangeValue) => void
+    /** Display format for each end (token engine, e.g. 'yyyy-MM-dd'). */
+    formatString?: string
+    min?: DateLike | null
+    max?: DateLike | null
+    /** Number of month panels shown side by side. Default 2. */
+    months?: number
+    firstDayOfWeek?: number
+    weekNumbers?: boolean
+    locale?: string
+    placeholder?: string
+    /** Quick shortcuts shown in the calendar's side rail. */
+    presets?: ReadonlyArray<CalendarPreset>
+    /** Animate the calendar's month navigation. */
+    animate?: boolean | 'slide' | 'fade'
+    /** Open the popover as soon as the field is focused. */
+    autoOpen?: boolean
+    /** Override the built-in strings. */
+    messages?: Partial<RangeMessages>
+  }
+
+  let {
+    value = null,
+    onChange,
+    formatString = 'yyyy-MM-dd',
+    min = null,
+    max = null,
+    months = 2,
+    firstDayOfWeek = 0,
+    weekNumbers = false,
+    locale = typeof navigator !== 'undefined' ? navigator.language : 'en-US',
+    placeholder = 'Select date range',
+    presets,
+    animate = false,
+    autoOpen = false,
+    disabled = false,
+    readonly = false,
+    name,
+    size = 'md',
+    ariaLabel,
+    invalid = false,
+    required = false,
+    error,
+    label,
+    hint,
+    dir,
+    id,
+    messages,
+  }: Props = $props()
+
+  const autoId = nextEditorId('sv-daterange')
+  const uid = $derived(id ?? autoId)
+  const M = $derived(resolveMessages(DEFAULT_MESSAGES, messages))
+  const resolvedDir = $derived(dir === 'ltr' || dir === 'rtl' ? dir : undefined)
+  const isInteractive = $derived(!disabled && !readonly)
+
+  const fmt = (d: Date) => formatDate(d, formatString, locale)
+  // The label shown in the field: "start to end", one end, or the placeholder.
+  const display = $derived.by(() => {
+    if (!value) return ''
+    const [a, b] = value
+    return a && b ? `${fmt(a)} ${M.to} ${fmt(b)}` : a ? fmt(a) : ''
+  })
+  // The calendar wants the FULL inclusive span as its value (every day renders
+  // selected); we only keep the two endpoints.
+  const calValue = $derived(value ? rangeDays(value[0], value[1]) : null)
+
+  let open = $state(false)
+  function openPanel() { if (isInteractive && !open) open = true }
+  function closePanel() { open = false }
+  function toggle() { open ? closePanel() : openPanel() }
+  function clear() { onChange?.(null) }
+
+  function onCalendarChange(dates: Date[]) {
+    if (!dates.length) return
+    const start = dates[0]!
+    const end = dates[dates.length - 1]!
+    onChange?.([startOfDay(start), startOfDay(end)])
+    // A completed range (2+ distinct days, or a single-day range) closes the panel.
+    if (dates.length >= 1 && start !== end) closePanel()
+  }
+
+  // --- Portalled popover positioning (DOM-bound; stays in the component) -------
+  let triggerEl = $state<HTMLDivElement | null>(null)
+  let panelEl = $state<HTMLDivElement | null>(null)
+  let panelRect = $state<AnchoredRect>({ top: 0, left: 0, width: 0, openUpward: false })
+
+  function updatePos() {
+    if (!triggerEl) return
+    panelRect = anchoredRect(triggerEl.getBoundingClientRect(), { estimatedHeight: 360, minWidth: 300 })
+  }
+
+  $effect(() => {
+    if (!open) return
+    updatePos()
+    const reposition = () => updatePos()
+    window.addEventListener('scroll', reposition, true)
+    window.addEventListener('resize', reposition)
+    const onDown = (e: PointerEvent) => {
+      const t = e.target as Node | null
+      if (!t) return
+      if (triggerEl?.contains(t) || panelEl?.contains(t)) return
+      closePanel()
+    }
+    document.addEventListener('pointerdown', onDown, true)
+    return () => {
+      window.removeEventListener('scroll', reposition, true)
+      window.removeEventListener('resize', reposition)
+      document.removeEventListener('pointerdown', onDown, true)
+    }
+  })
+
+  function onFieldKeydown(e: KeyboardEvent) {
+    if (e.key === 'Escape') { closePanel() }
+    else if (e.key === 'ArrowDown' && (e.altKey || !value)) { e.preventDefault(); openPanel() }
+  }
+  function focusOpen(node: HTMLInputElement) {
+    if (!autoOpen) return
+    node.focus()
+    openPanel()
+  }
+</script>
+
+<SvField id={uid} {label} {hint} {error} {required} {dir}>
+<div class="sv-dri" class:sv-dri--disabled={disabled}>
+  <div class="sv-dri__field sv-dri__field--{size}" class:is-invalid={invalid} bind:this={triggerEl} dir={resolvedDir}>
+    <svg class="sv-dri__icon" viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="18" rx="2" /><path d="M16 2v4M8 2v4M3 10h18" /></svg>
+    <input
+      id={uid}
+      class="sv-dri__input"
+      type="text"
+      readonly
+      {placeholder}
+      value={display}
+      {disabled}
+      {...editorAria({ id: uid, invalid, required, error, hint, ariaLabel })}
+      aria-haspopup="dialog"
+      aria-expanded={open}
+      onclick={() => isInteractive && toggle()}
+      onkeydown={onFieldKeydown}
+      use:focusOpen
+    />
+    {#if value && isInteractive}
+      <button type="button" class="sv-dri__clear" aria-label={M.clear} onclick={(e) => { e.stopPropagation(); clear() }}>&times;</button>
+    {/if}
+  </div>
+
+  {#if open}
+    <div
+      class="sv-dri__panel"
+      bind:this={panelEl}
+      use:portalToBody
+      use:popIn={{ up: panelRect.openUpward }}
+      style:position="fixed"
+      style:top={`${panelRect.top}px`}
+      style:left={`${panelRect.left}px`}
+      role="dialog"
+      aria-label={M.dialog}
+      dir={resolvedDir}
+    >
+      <SvCalendar
+        value={calValue}
+        selectionMode="range"
+        {min}
+        {max}
+        {months}
+        {firstDayOfWeek}
+        {weekNumbers}
+        {locale}
+        {presets}
+        {animate}
+        dir={resolvedDir}
+        onChange={onCalendarChange}
+      />
+    </div>
+  {/if}
+
+  {#if name}
+    <input type="hidden" name={`${name}_start`} value={value?.[0] ? value[0].toISOString() : ''} />
+    <input type="hidden" name={`${name}_end`} value={value?.[1] ? value[1].toISOString() : ''} />
+  {/if}
+</div>
+</SvField>
+
+<style>
+  .sv-dri {
+    --_accent: var(--sg-accent, #2563eb);
+    --_border: var(--sg-input-border, var(--sg-border, #cbd5e1));
+    --_radius: var(--sg-radius, 8px);
+    display: inline-block; position: relative; color: var(--sg-fg, #0f172a);
+  }
+  .sv-dri--disabled { opacity: 0.6; }
+  .sv-dri__field {
+    display: flex; align-items: center; gap: 6px; width: 260px;
+    background: var(--sg-input-bg, #fff); border: 1px solid var(--_border); border-radius: var(--_radius);
+    padding-inline: 10px 4px;
+  }
+  .sv-dri__field:focus-within { border-color: var(--_accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--_accent) 22%, transparent); }
+  .sv-dri__field.is-invalid { border-color: var(--sg-danger, #dc2626); }
+  .sv-dri__field.is-invalid:focus-within { box-shadow: 0 0 0 2px color-mix(in srgb, var(--sg-danger, #dc2626) 22%, transparent); }
+  .sv-dri__field--sm { height: 28px; font-size: 12px; }
+  .sv-dri__field--md { height: 34px; font-size: 13px; }
+  .sv-dri__field--lg { height: 40px; font-size: 15px; }
+  .sv-dri__icon { color: var(--sg-muted, #64748b); flex: none; }
+  .sv-dri__input {
+    flex: 1; min-width: 0; border: 0; background: none; outline: none; color: inherit; font: inherit;
+    cursor: pointer; text-overflow: ellipsis;
+  }
+  .sv-dri__input::placeholder { color: var(--sg-muted, #94a3b8); }
+  .sv-dri__clear {
+    display: grid; place-items: center; width: 24px; height: 24px; flex: none;
+    background: none; border: 0; color: var(--sg-muted, #64748b); cursor: pointer; border-radius: 6px; font-size: 17px; line-height: 1;
+  }
+  .sv-dri__clear:hover { color: var(--_accent); background: color-mix(in srgb, var(--_accent) 10%, transparent); }
+
+  :global(.sv-dri__panel) {
+    z-index: 2147483647;
+    background: var(--sg-bg, #fff); border: 1px solid var(--sg-border, #e2e8f0);
+    border-radius: 12px; box-shadow: 0 16px 48px -12px rgba(15, 23, 42, 0.35);
+  }
+</style>