@svgrid/grid 2.1.22 → 2.1.23

package/src/SvCarousel.test.ts

@@ -0,0 +1,68 @@
+/**
+ * Component tests for SvCarousel, exercising the shared createCarousel core:
+ * slide/dot rendering, arrow navigation with looping, autoplay advance, and the
+ * persistent play/pause stop toggle.
+ */
+import { describe, expect, it, beforeEach, afterEach, vi } from 'vitest'
+import { mount, unmount, flushSync, createRawSnippet } from 'svelte'
+import SvCarousel from './SvCarousel.svelte'
+
+const slide = createRawSnippet(() => ({ render: () => `<div class="slide"></div>` }))
+
+function mountCarousel(props: Record<string, unknown>) {
+  const target = document.createElement('div')
+  document.body.appendChild(target)
+  const app = mount(SvCarousel, { target, props: { slide, ...props } as any })
+  flushSync()
+  return { target, destroy: () => { unmount(app); target.remove() } }
+}
+const activeDot = (target: HTMLElement) =>
+  [...target.querySelectorAll('.sv-carousel__dot')].findIndex((d) => d.classList.contains('is-active'))
+const click = (el: Element | null | undefined) => { el?.dispatchEvent(new MouseEvent('click', { bubbles: true })); flushSync() }
+
+describe('SvCarousel', () => {
+  beforeEach(() => vi.useFakeTimers())
+  afterEach(() => vi.useRealTimers())
+
+  it('renders one slide + dot per item, first active', () => {
+    const { target, destroy } = mountCarousel({ count: 3 })
+    try {
+      expect(target.querySelectorAll('.sv-carousel__slide').length).toBe(3)
+      expect(target.querySelectorAll('.sv-carousel__dot').length).toBe(3)
+      expect(activeDot(target)).toBe(0)
+    } finally { destroy() }
+  })
+
+  it('the next arrow advances and loops back to the first', () => {
+    const { target, destroy } = mountCarousel({ count: 2, loop: true })
+    try {
+      click(target.querySelector('.sv-carousel__arrow.is-next'))
+      expect(activeDot(target)).toBe(1)
+      click(target.querySelector('.sv-carousel__arrow.is-next'))
+      expect(activeDot(target)).toBe(0) // wrapped
+    } finally { destroy() }
+  })
+
+  it('a dot jumps directly to its slide', () => {
+    const { target, destroy } = mountCarousel({ count: 4 })
+    try {
+      click(target.querySelectorAll('.sv-carousel__dot')[2])
+      expect(activeDot(target)).toBe(2)
+    } finally { destroy() }
+  })
+
+  it('autoplay advances on the interval and the toggle stops it', () => {
+    const { target, destroy } = mountCarousel({ count: 3, autoplay: 1000 })
+    try {
+      expect(activeDot(target)).toBe(0)
+      vi.advanceTimersByTime(1000)
+      flushSync()
+      expect(activeDot(target)).toBe(1)
+      // Stop toggle: autoplay no longer advances.
+      click(target.querySelector('.sv-carousel__playpause'))
+      vi.advanceTimersByTime(3000)
+      flushSync()
+      expect(activeDot(target)).toBe(1)
+    } finally { destroy() }
+  })
+})

package/src/SvColorInput.svelte

@@ -29,7 +29,7 @@
   }
 
   let {
-    value = '#3b82f6',
+    value = $bindable('#3b82f6'),
     onChange,
     disabled = false,
     readonly = false,
@@ -54,7 +54,8 @@
 
   const col = createColorInput({
     value: () => value,
-    onChange: (hex) => onChange?.(hex),
+    // Write `value` (so `bind:value` works) AND fire `onChange` (callback users).
+    onChange: (hex) => { value = hex; onChange?.(hex) },
     disabled: () => disabled,
     readonly: () => readonly,
     palette: () => palette as string[],
@@ -68,7 +69,7 @@
 
   let triggerEl = $state<HTMLButtonElement | null>(null)
   let panelEl = $state<HTMLDivElement | null>(null)
-  let panelRect = $state<AnchoredRect>({ top: 0, left: 0, width: 0, openUpward: false })
+  let panelRect = $state<AnchoredRect>({ top: 0, left: 0, width: 0, openUpward: false, maxHeight: 0, availHeight: 0 })
 
   function updatePos() {
     if (!triggerEl) return

package/src/SvComboBox.svelte

@@ -65,7 +65,7 @@
   let inputEl = $state<HTMLInputElement | null>(null)
   let fieldEl = $state<HTMLDivElement | null>(null)
   let panelEl = $state<HTMLDivElement | null>(null)
-  let rect = $state<AnchoredRect>({ top: 0, left: 0, width: 0, openUpward: false })
+  let rect = $state<AnchoredRect>({ top: 0, left: 0, width: 0, openUpward: false, maxHeight: 0, availHeight: 0 })
 
   // Remote data source: fetch options as the query changes (debounced).
   let remoteOptions = $state<ListOption[]>([])
@@ -111,7 +111,11 @@
 
   function updatePos() {
     if (!fieldEl) return
-    rect = anchoredRect(fieldEl.getBoundingClientRect(), { estimatedHeight: Math.min(combo.filtered.length, 8) * 34 + 8 })
+    // estimatedHeight only picks the flip direction (up vs down); the panel's
+    // real max-height comes from availHeight below, so it takes its natural
+    // content height (options + group labels) and scrolls only when it truly
+    // overflows the room - never from an estimate that under-counts a row.
+    rect = anchoredRect(fieldEl.getBoundingClientRect(), { estimatedHeight: Math.min(combo.filtered.length, 8) * 34 + 12 })
   }
 
   // Position + reposition + outside-click close are render concerns (need the DOM).
@@ -150,7 +154,7 @@
 </SvField>
 
 {#if combo.open}
-  <div bind:this={panelEl} class="sv-ddl__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`} {...combo.listboxProps()}>
+  <div bind:this={panelEl} class="sv-ddl__panel" use:portalToBody use:popIn={{ up: rect.openUpward }} style:position="fixed" style:top={rect.openUpward ? undefined : `${rect.top}px`} style:bottom={rect.openUpward ? `${rect.bottom}px` : undefined} style:left={`${rect.left}px`} style:min-width={`${rect.width}px`} style:max-height={`${Math.min(rect.availHeight, 288)}px`} {...combo.listboxProps()}>
     {#if loading}
       <div class="sv-ddl__empty sv-ddl__loading"><svg class="sv-ddl__spin" viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><path d="M21 12a9 9 0 1 1-6.2-8.6" /></svg>{M.loading}</div>
     {:else if loadOptions && !searched && combo.query.trim().length < minLength}

package/src/SvCommand.svelte

@@ -16,10 +16,8 @@
    */
   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'
+  import { createOverlay } from './createOverlay.svelte'
+  import { createCommand } from './createCommand.svelte'
 
   type Props = {
     open?: boolean
@@ -42,72 +40,29 @@
     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() }
+  // Fuzzy filter + roving + run + hotkey live in the command core; the overlay
+  // lifecycle (focus-trap into the input, scroll-lock, Escape/outside dismissal)
+  // is the shared dialog core.
+  const cmd = createCommand({
+    commands: () => commands,
+    open: () => open,
+    onRun,
+    onClose: close,
+    onToggleOpen: () => (open = !open),
+    hotkey: () => hotkey,
+    scrollActiveIntoView: (i) =>
+      queueMicrotask(() => panelEl?.querySelector(`[data-idx="${i}"]`)?.scrollIntoView({ block: 'nearest' })),
   })
-
-  // 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)
+  const overlay = createOverlay({
+    open: () => open,
+    getDialog: () => panelEl,
+    onClose: close,
+    initialFocus: () => inputEl,
   })
 </script>
 
@@ -117,11 +72,8 @@
       bind:this={panelEl}
       class="sv-cmd"
       use:popIn={{}}
-      role="dialog"
-      aria-modal="true"
-      aria-label="Command palette"
-      tabindex="-1"
-      onkeydown={onKeydown}
+      {...overlay.dialogProps({ label: 'Command palette' })}
+      onkeydown={cmd.onKeydown}
     >
       <div class="sv-cmd__search">
         <span class="sv-cmd__searchicon" aria-hidden="true">⌕</span>
@@ -129,29 +81,20 @@
           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}
+          aria-label="Command palette search"
           {placeholder}
-          value={query}
-          oninput={(e) => (query = e.currentTarget.value)}
+          {...cmd.inputProps()}
         />
       </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}
+      <ul class="sv-cmd__list" aria-label="Commands" {...cmd.listProps()}>
+        {#each cmd.results as c, i (c.id)}
+          {#if !cmd.query.trim() && c.group && c.group !== cmd.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)}
+            class:is-active={cmd.isActive(i)}
+            {...cmd.optionProps(i)}
           >
             {#if c.icon}<span class="sv-cmd__icon" aria-hidden="true">{c.icon}</span>{/if}
             <span class="sv-cmd__label">{c.label}</span>

package/src/SvCommand.test.ts

@@ -0,0 +1,78 @@
+/**
+ * Component tests for SvCommand, exercising the shared createCommand core: the
+ * global hotkey toggles it open, typing fuzzy-filters the list, arrow+Enter runs
+ * the active command, and clicking a command runs it and closes the palette.
+ */
+import { describe, expect, it, vi, afterEach } from 'vitest'
+import { mount, unmount, flushSync } from 'svelte'
+import SvCommand, { type CommandItem } from './SvCommand.svelte'
+
+function mountCmd(props: Record<string, unknown>) {
+  const target = document.createElement('div')
+  document.body.appendChild(target)
+  const app = mount(SvCommand, { target, props: props as any })
+  flushSync()
+  return { destroy: () => { unmount(app); target.remove() } }
+}
+const palette = () => document.querySelector<HTMLElement>('.sv-cmd')
+const options = () => [...document.querySelectorAll<HTMLElement>('.sv-cmd__opt')]
+const input = () => document.querySelector<HTMLInputElement>('.sv-cmd__input')
+afterEach(() => document.querySelectorAll('.sv-cmd__backdrop').forEach((n) => n.remove()))
+
+const commands: CommandItem[] = [
+  { id: 'a', label: 'New File' },
+  { id: 'b', label: 'Open Folder' },
+  { id: 'c', label: 'Save All' },
+]
+
+describe('SvCommand', () => {
+  it('opens on the Cmd/Ctrl+K hotkey', () => {
+    const { destroy } = mountCmd({ open: false, commands })
+    try {
+      expect(palette()).toBeNull()
+      window.dispatchEvent(new KeyboardEvent('keydown', { key: 'k', ctrlKey: true, bubbles: true }))
+      flushSync()
+      expect(palette()).not.toBeNull()
+      expect(options().length).toBe(3)
+    } finally { destroy() }
+  })
+
+  it('fuzzy-filters as you type', () => {
+    const { destroy } = mountCmd({ open: true, commands })
+    try {
+      const el = input()!
+      el.value = 'save'
+      el.dispatchEvent(new Event('input', { bubbles: true }))
+      flushSync()
+      const labels = options().map((o) => o.textContent)
+      expect(labels.length).toBe(1)
+      expect(labels[0]).toContain('Save All')
+    } finally { destroy() }
+  })
+
+  it('runs the active command on Enter and closes', () => {
+    const onRun = vi.fn()
+    const { destroy } = mountCmd({ open: true, commands, onRun })
+    try {
+      const el = input()!
+      el.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true }))
+      flushSync()
+      el.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }))
+      flushSync()
+      expect(onRun).toHaveBeenCalledTimes(1)
+      expect(onRun.mock.calls[0]![0].id).toBe('b') // ArrowDown moved 0 -> 1
+      expect(palette()).toBeNull()
+    } finally { destroy() }
+  })
+
+  it('runs a command on click and closes', () => {
+    const onRun = vi.fn()
+    const { destroy } = mountCmd({ open: true, commands, onRun })
+    try {
+      options()[2]!.dispatchEvent(new MouseEvent('click', { bubbles: true }))
+      flushSync()
+      expect(onRun.mock.calls[0]![0].id).toBe('c')
+      expect(palette()).toBeNull()
+    } finally { destroy() }
+  })
+})

package/src/SvCountryInput.svelte

@@ -54,7 +54,7 @@
   let triggerEl = $state<HTMLButtonElement | null>(null)
   let searchEl = $state<HTMLInputElement | null>(null)
   let panelEl = $state<HTMLDivElement | null>(null)
-  let rect = $state<AnchoredRect>({ top: 0, left: 0, width: 0, openUpward: false })
+  let rect = $state<AnchoredRect>({ top: 0, left: 0, width: 0, openUpward: false, maxHeight: 0, availHeight: 0 })
 
   const ci = createCountryInput({
     value: () => value,

package/src/SvDateRangeInput.svelte

@@ -118,7 +118,7 @@
   // --- 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 })
+  let panelRect = $state<AnchoredRect>({ top: 0, left: 0, width: 0, openUpward: false, maxHeight: 0, availHeight: 0 })
 
   function updatePos() {
     if (!triggerEl) return

package/src/SvDateTimePicker.svelte

@@ -54,6 +54,9 @@
     stepMinutes?: number
     /** Open the dropdown as soon as the field is focused (grid in-cell editing). */
     autoOpen?: boolean
+    /** Stretch the field to fill its container (100% width) instead of the fixed
+     *  default width - used when mounted as a grid cell editor. */
+    block?: boolean
     /** Animate the calendar's month/drill navigation (honors reduced-motion). */
     animate?: boolean | 'slide' | 'fade'
     /** Override the built-in strings (tabs, dialog, clear/open aria-labels). */
@@ -82,6 +85,7 @@
     spinButtons = false,
     stepMinutes = 1,
     autoOpen = false,
+    block = false,
     animate = false,
     ariaLabel,
     invalid = false,
@@ -130,7 +134,7 @@
   // --- Portalled dropdown 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 })
+  let panelRect = $state<AnchoredRect>({ top: 0, left: 0, width: 0, openUpward: false, maxHeight: 0, availHeight: 0 })
 
   function updatePos() {
     if (!triggerEl) return
@@ -171,8 +175,8 @@
   }
 </script>
 
-<SvField id={uid} {label} {hint} {error} {required} {dir}>
-<div class="sv-dtp" class:sv-dtp--disabled={disabled} dir={resolvedDir} onfocusout={onRootFocusOut}>
+<SvField id={uid} {label} {hint} {error} {required} {dir} {block}>
+<div class="sv-dtp" class:sv-dtp--disabled={disabled} class:sv-dtp--block={block} dir={resolvedDir} onfocusout={onRootFocusOut}>
   <div class="sv-dtp__field" class:is-invalid={invalid} bind:this={triggerEl}>
     {#if spinButtons}
       <div class="sv-dtp__spin">
@@ -256,6 +260,8 @@
     --_radius: var(--sg-radius, 8px);
     display: inline-block; position: relative; width: 240px; color: var(--_fg);
   }
+  /* Fill the container (grid cell editor) instead of the fixed default width. */
+  .sv-dtp--block { display: block; width: 100%; }
   .sv-dtp--disabled { opacity: 0.6; }
   .sv-dtp__field {
     display: flex; align-items: center; gap: 2px;

package/src/SvDockLayout.svelte

@@ -0,0 +1,244 @@
+<script lang="ts">
+  /**
+   * SvDockLayout - a basic docking layout: nested resizable split groups and
+   * tabbed leaves, with drag-to-dock. Drag a pane's tab onto another pane and
+   * drop it on an edge (split) or the centre (add as a tab); drag the splitters
+   * to resize; close panes. The whole layout is a plain `DockNode` tree you pass
+   * in and bind - every gesture is a pure transform from `dock-model`, so state
+   * is serializable and testable. Inspired by Smart's `smart-layout`.
+   *
+   * Usage: build a tree with `dockGroup` / `dockTabs` / `dockPane`, bind it, and
+   * provide a `pane` snippet that renders each pane's content by id:
+   *
+   *   let layout = $state(dockGroup('row', [
+   *     dockTabs([dockPane('files', 'Files')]),
+   *     dockTabs([dockPane('editor', 'Editor')]),
+   *   ]))
+   *
+   *   <SvDockLayout bind:layout>
+   *     {#snippet pane(p)} ...render by p.id... {/snippet}
+   *   </SvDockLayout>
+   */
+  import { setContext, type Snippet } from 'svelte'
+  import { DOCK_CONTEXT, type DockContext } from './dock-context'
+  import DockNodeView from './DockNodeView.svelte'
+  import {
+    setActive,
+    setSizes,
+    removePane,
+    movePane,
+    type DockNode,
+    type DockPane,
+    type DockZone,
+  } from './dock-model'
+
+  type Props = {
+    /** The layout tree. Bindable - every dock/resize/close writes a new tree. */
+    layout: DockNode
+    /** Renders each pane's content, keyed off the `DockPane`. */
+    pane: Snippet<[DockPane]>
+    /** Notified after any structural change (dock / resize / close). */
+    onLayoutChange?: (layout: DockNode) => void
+    /** Minimum pane size in px along the split axis. Default 80. */
+    minSize?: number
+    /** Surface id stamped on the root (`data-dock-surface`) - used by
+     *  SvDockManager to hit-test which layout a drag is over. Default 'main'. */
+    surface?: string
+    /**
+     * Manager mode: when provided, SvDockLayout hands OFF tab-drag to the parent
+     * (SvDockManager) instead of running its own drag-to-dock, so a drag can flow
+     * across the main area, floating windows and edge strips. Return value is
+     * ignored; the manager owns the gesture from here.
+     */
+    onBeginDrag?: (event: PointerEvent, paneId: string, tabsId: string) => void
+    /** Manager mode: the externally-computed dock guide/highlight to paint. */
+    externalDrop?: { tabsId: string; zone: DockZone | null; centerOnly?: boolean } | null
+    /** Manager mode: the externally-computed tab-reorder insertion indicator. */
+    externalReorder?: { tabsId: string; index: number } | null
+    /** Stack-header controls for a leaf (maximize / float / pop-out), rendered
+     *  by the manager once per leaf at the right of its tab strip. */
+    leafActions?: Snippet<[import('./dock-model').DockTabs]>
+    /** Manager mode: route tab activation to the parent (controlled). */
+    onActivate?: (tabsId: string, index: number) => void
+    /** Manager mode: route pane close to the parent (controlled). */
+    onClose?: (paneId: string) => void
+    /** Manager mode: route splitter resize to the parent (controlled). */
+    onResize?: (groupId: string, sizes: number[]) => void
+    /** Which side of each leaf the tab strip sits on. Default `'top'`. */
+    headerPosition?: 'top' | 'bottom' | 'left' | 'right'
+    /** Manager mode: id of the focused leaf, for the active-panel highlight. */
+    focusedLeaf?: string | null
+    /** Keep inactive tabs mounted (hidden) so their content state persists. */
+    keepAlive?: boolean
+    /** In a single-pane leaf, hide the redundant tab button (auto-hide fly-out). */
+    hideSingleTab?: boolean
+    /** Locked / split mode: tabs cannot be dragged (no reorder / dock / float) and
+     *  panel action buttons are hidden - only splitter resize + tab switching remain.
+     *  Turns the layout into a fixed set of resizable panes. */
+    locked?: boolean
+  }
+
+  let {
+    layout = $bindable(),
+    pane,
+    onLayoutChange,
+    minSize = 80,
+    surface = 'main',
+    onBeginDrag,
+    externalDrop = null,
+    externalReorder = null,
+    leafActions,
+    onActivate,
+    onClose,
+    onResize,
+    headerPosition = 'top',
+    focusedLeaf = null,
+    keepAlive = false,
+    hideSingleTab = false,
+    locked = false,
+  }: Props = $props()
+
+  const managed = $derived(!!onBeginDrag)
+
+  // Ids for nodes created by docking. The per-instance base (from a module
+  // counter) keeps them unique across instances and clear of caller ids.
+  let nextId = instanceBase()
+  const genId = () => `dk-${nextId++}`
+
+  function commit(next: DockNode) {
+    layout = next
+    onLayoutChange?.(next)
+  }
+
+  const activate = (tabsId: string, index: number) =>
+    onActivate ? onActivate(tabsId, index) : commit(setActive(layout, tabsId, index))
+  const resize = (groupId: string, sizes: number[]) =>
+    onResize ? onResize(groupId, sizes) : commit(setSizes(layout, groupId, sizes))
+  const close = (paneId: string) => {
+    if (onClose) { onClose(paneId); return }
+    const { root } = removePane(layout, paneId)
+    if (root) commit(root)
+  }
+
+  // ---- drag-to-dock ------------------------------------------------------
+  type Drag = { paneId: string; sourceTabsId: string; title: string; x: number; y: number }
+  let drag = $state<Drag | null>(null)
+  let dropTarget = $state<{ tabsId: string; zone: DockZone } | null>(null)
+  let candidate: { paneId: string; sourceTabsId: string; title: string; sx: number; sy: number } | null = null
+
+  function paneTitle(paneId: string): string {
+    const walk = (n: DockNode): string | null => {
+      if (n.type === 'tabs') return n.panes.find((p) => p.id === paneId)?.title ?? null
+      for (const c of n.children) { const t = walk(c); if (t) return t }
+      return null
+    }
+    return walk(layout) ?? ''
+  }
+
+  function beginDrag(e: PointerEvent, paneId: string, tabsId: string) {
+    if (e.button !== 0) return
+    // Locked / split mode: tabs are fixed - a pointerdown still activates the tab
+    // (handled separately), but starts no drag.
+    if (locked) return
+    // Manager mode: delegate the whole gesture to the parent.
+    if (onBeginDrag) { onBeginDrag(e, paneId, tabsId); return }
+    candidate = { paneId, sourceTabsId: tabsId, title: paneTitle(paneId), sx: e.clientX, sy: e.clientY }
+    window.addEventListener('pointermove', onPointerMove)
+    window.addEventListener('pointerup', onPointerUp)
+  }
+
+  /** Which leaf is under the pointer, and which of its 5 zones. */
+  function hitTest(x: number, y: number): { tabsId: string; zone: DockZone } | null {
+    const el = document.elementFromPoint(x, y)?.closest('[data-dock-tabs]') as HTMLElement | null
+    if (!el) return null
+    const tabsId = el.dataset.dockTabs!
+    const r = el.getBoundingClientRect()
+    if (r.width <= 0 || r.height <= 0) return null
+    const rx = (x - r.left) / r.width
+    const ry = (y - r.top) / r.height
+    const edge = 0.25
+    const m = Math.min(rx, 1 - rx, ry, 1 - ry)
+    let zone: DockZone = 'center'
+    if (m <= edge) {
+      const nearest = Math.min(rx, 1 - rx, ry, 1 - ry)
+      zone = nearest === rx ? 'left' : nearest === 1 - rx ? 'right' : nearest === ry ? 'top' : 'bottom'
+    }
+    return { tabsId, zone }
+  }
+
+  function onPointerMove(e: PointerEvent) {
+    if (!candidate) return
+    if (!drag) {
+      // Small threshold so a click-to-activate does not start a drag.
+      if (Math.hypot(e.clientX - candidate.sx, e.clientY - candidate.sy) < 5) return
+      drag = { paneId: candidate.paneId, sourceTabsId: candidate.sourceTabsId, title: candidate.title, x: e.clientX, y: e.clientY }
+      document.body.style.userSelect = 'none'
+      document.body.style.cursor = 'grabbing'
+    }
+    drag = { ...drag, x: e.clientX, y: e.clientY }
+    dropTarget = hitTest(e.clientX, e.clientY)
+  }
+
+  function onPointerUp() {
+    window.removeEventListener('pointermove', onPointerMove)
+    window.removeEventListener('pointerup', onPointerUp)
+    if (drag && dropTarget) {
+      commit(movePane(layout, drag.paneId, dropTarget.tabsId, dropTarget.zone, genId))
+    }
+    drag = null
+    dropTarget = null
+    candidate = null
+    document.body.style.userSelect = ''
+    document.body.style.cursor = ''
+  }
+
+  setContext<DockContext>(DOCK_CONTEXT, {
+    get pane() { return pane },
+    get leafActions() { return locked ? undefined : leafActions },
+    activate,
+    close,
+    beginDrag,
+    resize,
+    minSize: () => minSize,
+    // In manager mode the highlight is driven from outside.
+    dropTarget: () => (managed ? externalDrop : dropTarget),
+    reorderTarget: () => (managed ? externalReorder : null),
+    headerPosition: () => headerPosition,
+    focusedLeaf: () => focusedLeaf,
+    keepAlive: () => keepAlive,
+    hideSingleTab: () => hideSingleTab,
+  })
+</script>
+
+<div class="sv-dock" class:is-dragging={!!drag} data-dock-surface={surface}>
+  <DockNodeView node={layout} />
+</div>
+
+{#if drag}
+  <div class="sv-dock__ghost" style:left={`${drag.x + 12}px`} style:top={`${drag.y + 12}px`}>
+    {drag.title}
+  </div>
+{/if}
+
+<script lang="ts" module>
+  // Per-instance id base so concurrent layouts never mint the same node id.
+  let SEQ = 0
+  function instanceBase(): number {
+    SEQ += 1
+    return SEQ * 1_000_000
+  }
+</script>
+
+<style>
+  .sv-dock { width: 100%; height: 100%; min-width: 0; min-height: 0; display: flex; }
+  .sv-dock > :global(*) { flex: 1; min-width: 0; min-height: 0; }
+  .sv-dock.is-dragging { cursor: grabbing; }
+  .sv-dock.is-dragging :global(.sv-dock__content) { pointer-events: none; }
+
+  .sv-dock__ghost {
+    position: fixed; z-index: 2147483646; pointer-events: none;
+    padding: 5px 10px; font-size: 12.5px; font-weight: 600;
+    color: var(--sg-on-accent, #fff); background: var(--sg-accent, #2563eb);
+    border-radius: 6px; box-shadow: 0 8px 24px -6px rgba(15,23,42,0.5); opacity: 0.95;
+  }
+</style>