npm - @svgrid/grid - Versions diffs - 2.2.0 → 2.2.1 - Mend

@svgrid/grid 2.2.0 → 2.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (114) hide show

package/dist/FlexRender.svelte +96 -96
package/dist/GridFooter.svelte +178 -178
package/dist/SvCarousel.svelte +141 -141
package/dist/SvColorInput.svelte +187 -187
package/dist/SvContextMenu.svelte +116 -116
package/dist/SvDrawer.svelte +250 -250
package/dist/SvGrid.svelte +3131 -3131
package/dist/SvGridBoard.svelte +2339 -2339
package/dist/SvGridChart.svelte +1724 -1724
package/dist/SvGridChartPanel.svelte +485 -485
package/dist/SvGridDropdown.svelte +689 -689
package/dist/SvGroupCell.svelte +109 -109
package/dist/SvMenu.svelte +124 -124
package/dist/SvMenuList.svelte +117 -117
package/dist/SvNumberInput.svelte +131 -131
package/dist/SvOtpInput.svelte +158 -158
package/dist/SvPopover.svelte +139 -139
package/dist/SvRowGroupPanel.svelte +170 -170
package/dist/SvScrollArea.svelte +61 -61
package/dist/SvTooltip.svelte +127 -127
package/dist/SvTour.svelte +204 -204
package/dist/SvTree.svelte +377 -377
package/dist/SvTreeSelect.svelte +230 -230
package/dist/cdn/svgrid.js +8 -8
package/dist/cdn/svgrid.svelte-external.js +8 -8
package/dist/chart-export.js +8 -8
package/package.json +10 -10
package/src/FlexRender.svelte +96 -96
package/src/GridFooter.svelte +178 -178
package/src/SvCarousel.svelte +141 -141
package/src/SvColorInput.svelte +187 -187
package/src/SvContextMenu.svelte +116 -116
package/src/SvDrawer.svelte +250 -250
package/src/SvGrid.controller.svelte.ts +3158 -3158
package/src/SvGrid.svelte +3131 -3131
package/src/SvGrid.types.ts +1489 -1489
package/src/SvGridBoard.svelte +2339 -2339
package/src/SvGridChart.svelte +1724 -1724
package/src/SvGridChartPanel.svelte +485 -485
package/src/SvGridDropdown.svelte +689 -689
package/src/SvGroupCell.svelte +109 -109
package/src/SvMenu.svelte +124 -124
package/src/SvMenu.test.ts +97 -97
package/src/SvMenuList.svelte +117 -117
package/src/SvNumberInput.svelte +131 -131
package/src/SvOtpInput.svelte +158 -158
package/src/SvPopover.svelte +139 -139
package/src/SvRowGroupPanel.svelte +170 -170
package/src/SvScrollArea.svelte +61 -61
package/src/SvTooltip.svelte +127 -127
package/src/SvTour.svelte +204 -204
package/src/SvTree.svelte +377 -377
package/src/SvTreeSelect.svelte +230 -230
package/src/a11y.contract.test.ts +49 -49
package/src/a11y.test.ts +59 -59
package/src/a11y.ts +61 -61
package/src/build-api.ts +870 -870
package/src/cell-formatting.ts +169 -169
package/src/cell-render.ts +469 -469
package/src/chart-export.ts +201 -201
package/src/chart.ts +2296 -2296
package/src/collaboration.test.ts +104 -104
package/src/collaboration.ts +167 -167
package/src/core.performance.test.ts +30 -30
package/src/core.ts +1111 -1111
package/src/createAutocomplete.svelte.ts +132 -132
package/src/createCombobox.svelte.ts +179 -179
package/src/createCountryInput.svelte.ts +157 -157
package/src/createDropdownList.svelte.ts +162 -162
package/src/createGrid.svelte.ts +42 -42
package/src/createGrid.test.ts +10 -10
package/src/createGridState.svelte.ts +17 -17
package/src/createMenu.svelte.ts +202 -202
package/src/createPopoverSelect.svelte.ts +206 -206
package/src/createTree.svelte.ts +319 -319
package/src/editing.test.ts +859 -859
package/src/editing.ts +675 -675
package/src/export-data-api.test.ts +126 -126
package/src/export-format.test.ts +107 -107
package/src/export-format.ts +598 -598
package/src/flex-render.ts +3 -3
package/src/index.ts +623 -623
package/src/keyboard.test.ts +59 -59
package/src/keyboard.ts +97 -97
package/src/list-nav.test.ts +49 -49
package/src/list-nav.ts +29 -29
package/src/menus.ts +639 -639
package/src/merge-objects.ts +48 -48
package/src/overlays.test.ts +90 -90
package/src/render-component.ts +28 -28
package/src/selection.test.ts +754 -754
package/src/selection.ts +600 -600
package/src/server-data-source.test.ts +289 -289
package/src/server-data-source.ts +413 -413
package/src/sparkline.test.ts +68 -68
package/src/sparkline.ts +169 -169
package/src/spreadsheet.test.ts +489 -489
package/src/spreadsheet.ts +312 -312
package/src/static-functions.ts +11 -11
package/src/subscribe.ts +38 -38
package/src/svgrid-wrapper.types.ts +501 -501
package/src/svgrid.behavior.test.ts +706 -706
package/src/svgrid.charting.test.ts +527 -527
package/src/svgrid.features.test.ts +157 -157
package/src/svgrid.new-features.wrapper.test.ts +251 -251
package/src/svgrid.wrapper.test.ts +40 -40
package/src/test-setup.ts +62 -62
package/src/themes/index.ts +159 -159
package/src/virtualization/column-virtualizer.test.ts +27 -27
package/src/virtualization/column-virtualizer.ts +30 -30
package/src/virtualization/svelte-virtualizer.svelte.ts +26 -26
package/src/virtualization/types.ts +30 -30
package/src/virtualization/virtualizer.test.ts +47 -47
package/src/virtualization/virtualizer.ts +296 -296

package/src/SvPopover.svelte CHANGED Viewed

@@ -1,139 +1,139 @@
-<script lang="ts">
-  /**
-   * SvPopover - a floating panel anchored to a trigger, portalled to <body> so it
-   * escapes any `overflow:hidden` ancestor. Open on click (default), hover, or
-   * manually via `open`. Flips above the trigger when there's no room below,
-   * closes on outside-click / Escape, and animates in. Parity: Smart popover.
-   *
-   * ```svelte
-   * <SvPopover>
-   *   {#snippet anchor()}<button>Open</button>{/snippet}
-   *   <p>Panel content</p>
-   * </SvPopover>
-   * ```
-   */
-  import type { Snippet } from 'svelte'
-  import { anchoredRect, portalToBody, popIn, type AnchoredRect } from './popover'
-  import { createDismissableLayer } from './a11y/dismissable'
-  type Props = {
-    /** Controlled open state (bindable). */
-    open?: boolean
-    onOpenChange?: (open: boolean) => void
-    /** How the anchor opens the panel. `manual` = only `open` drives it. */
-    trigger?: 'click' | 'hover' | 'manual'
-    /** Estimated panel height for flip decisions. */
-    estimatedHeight?: number
-    /** Force a minimum panel width (else it hugs its content). */
-    minWidth?: number
-    /** Close when clicking outside. Default true. */
-    closeOnOutsideClick?: boolean
-    ariaLabel?: string
-    /** The anchor element(s) that open the panel. */
-    anchor?: Snippet
-    /** Panel content. */
-    children?: Snippet
-  }
-  let {
-    open = $bindable(false),
-    onOpenChange,
-    trigger = 'click',
-    estimatedHeight = 220,
-    minWidth,
-    closeOnOutsideClick = true,
-    ariaLabel,
-    anchor,
-    children,
-  }: Props = $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, maxHeight: 0, availHeight: 0 })
-  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, minWidth })
-  }
-  $effect(() => {
-    if (!open) return
-    updatePos()
-    const rp = () => updatePos()
-    window.addEventListener('scroll', rp, true)
-    window.addEventListener('resize', rp)
-    // Escape + outside-click dismissal via the shared layer stack (so a popover
-    // nested in a dialog closes top-first). The trigger is passed alongside the
-    // panel so clicking it toggles rather than dismiss-then-reopen.
-    const layer = createDismissableLayer({
-      element: () => [anchorEl, panelEl],
-      onDismiss: () => setOpen(false),
-      closeOnOutside: closeOnOutsideClick,
-    })
-    layer.activate()
-    return () => {
-      window.removeEventListener('scroll', rp, true)
-      window.removeEventListener('resize', rp)
-      layer.release()
-    }
-  })
-  let hoverTimer: ReturnType<typeof setTimeout> | undefined
-  function onEnter() { if (trigger === 'hover') { clearTimeout(hoverTimer); setOpen(true) } }
-  function onLeave() { if (trigger === 'hover') { hoverTimer = setTimeout(() => setOpen(false), 120) } }
-  /** Fallback accessible name for the panel when `ariaLabel` isn't given: the
-   * anchor's own aria-label, else its trimmed text content. */
-  function anchorFallbackLabel(): string | undefined {
-    const label = anchorEl?.getAttribute('aria-label')
-    if (label) return label
-    return anchorEl?.textContent?.trim() || undefined
-  }
-</script>
-<!-- svelte-ignore a11y_no_static_element_interactions -->
-<span
-  bind:this={anchorEl}
-  class="sv-pop__anchor"
-  onclick={() => trigger === 'click' && toggle()}
-  onpointerenter={onEnter}
-  onpointerleave={onLeave}
-  onfocusin={onEnter}
-  onfocusout={onLeave}
->
-  {@render anchor?.()}
-</span>
-{#if open}
-  <div
-    bind:this={panelEl}
-    class="sv-pop__panel"
-    use:portalToBody
-    use:popIn={{ up: rect.openUpward }}
-    style:position="fixed"
-    style:top={`${rect.top}px`}
-    style:left={`${rect.left}px`}
-    style:min-width={minWidth ? `${rect.width}px` : undefined}
-    role="dialog"
-    aria-label={ariaLabel ?? anchorFallbackLabel()}
-    onpointerenter={onEnter}
-    onpointerleave={onLeave}
-    onfocusin={onEnter}
-    onfocusout={onLeave}
-  >
-    {@render children?.()}
-  </div>
-{/if}
-<style>
-  .sv-pop__anchor { display: inline-flex; }
-  :global(.sv-pop__panel) {
-    z-index: 2147483646; max-width: min(92vw, 360px); padding: 12px 14px;
-    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; line-height: 1.55;
-  }
-</style>
+<script lang="ts">
+  /**
+   * SvPopover - a floating panel anchored to a trigger, portalled to <body> so it
+   * escapes any `overflow:hidden` ancestor. Open on click (default), hover, or
+   * manually via `open`. Flips above the trigger when there's no room below,
+   * closes on outside-click / Escape, and animates in. Parity: Smart popover.
+   *
+   * ```svelte
+   * <SvPopover>
+   *   {#snippet anchor()}<button>Open</button>{/snippet}
+   *   <p>Panel content</p>
+   * </SvPopover>
+   * ```
+   */
+  import type { Snippet } from 'svelte'
+  import { anchoredRect, portalToBody, popIn, type AnchoredRect } from './popover'
+  import { createDismissableLayer } from './a11y/dismissable'
+  type Props = {
+    /** Controlled open state (bindable). */
+    open?: boolean
+    onOpenChange?: (open: boolean) => void
+    /** How the anchor opens the panel. `manual` = only `open` drives it. */
+    trigger?: 'click' | 'hover' | 'manual'
+    /** Estimated panel height for flip decisions. */
+    estimatedHeight?: number
+    /** Force a minimum panel width (else it hugs its content). */
+    minWidth?: number
+    /** Close when clicking outside. Default true. */
+    closeOnOutsideClick?: boolean
+    ariaLabel?: string
+    /** The anchor element(s) that open the panel. */
+    anchor?: Snippet
+    /** Panel content. */
+    children?: Snippet
+  }
+  let {
+    open = $bindable(false),
+    onOpenChange,
+    trigger = 'click',
+    estimatedHeight = 220,
+    minWidth,
+    closeOnOutsideClick = true,
+    ariaLabel,
+    anchor,
+    children,
+  }: Props = $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, maxHeight: 0, availHeight: 0 })
+  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, minWidth })
+  }
+  $effect(() => {
+    if (!open) return
+    updatePos()
+    const rp = () => updatePos()
+    window.addEventListener('scroll', rp, true)
+    window.addEventListener('resize', rp)
+    // Escape + outside-click dismissal via the shared layer stack (so a popover
+    // nested in a dialog closes top-first). The trigger is passed alongside the
+    // panel so clicking it toggles rather than dismiss-then-reopen.
+    const layer = createDismissableLayer({
+      element: () => [anchorEl, panelEl],
+      onDismiss: () => setOpen(false),
+      closeOnOutside: closeOnOutsideClick,
+    })
+    layer.activate()
+    return () => {
+      window.removeEventListener('scroll', rp, true)
+      window.removeEventListener('resize', rp)
+      layer.release()
+    }
+  })
+  let hoverTimer: ReturnType<typeof setTimeout> | undefined
+  function onEnter() { if (trigger === 'hover') { clearTimeout(hoverTimer); setOpen(true) } }
+  function onLeave() { if (trigger === 'hover') { hoverTimer = setTimeout(() => setOpen(false), 120) } }
+  /** Fallback accessible name for the panel when `ariaLabel` isn't given: the
+   * anchor's own aria-label, else its trimmed text content. */
+  function anchorFallbackLabel(): string | undefined {
+    const label = anchorEl?.getAttribute('aria-label')
+    if (label) return label
+    return anchorEl?.textContent?.trim() || undefined
+  }
+</script>
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<span
+  bind:this={anchorEl}
+  class="sv-pop__anchor"
+  onclick={() => trigger === 'click' && toggle()}
+  onpointerenter={onEnter}
+  onpointerleave={onLeave}
+  onfocusin={onEnter}
+  onfocusout={onLeave}
+>
+  {@render anchor?.()}
+</span>
+{#if open}
+  <div
+    bind:this={panelEl}
+    class="sv-pop__panel"
+    use:portalToBody
+    use:popIn={{ up: rect.openUpward }}
+    style:position="fixed"
+    style:top={`${rect.top}px`}
+    style:left={`${rect.left}px`}
+    style:min-width={minWidth ? `${rect.width}px` : undefined}
+    role="dialog"
+    aria-label={ariaLabel ?? anchorFallbackLabel()}
+    onpointerenter={onEnter}
+    onpointerleave={onLeave}
+    onfocusin={onEnter}
+    onfocusout={onLeave}
+  >
+    {@render children?.()}
+  </div>
+{/if}
+<style>
+  .sv-pop__anchor { display: inline-flex; }
+  :global(.sv-pop__panel) {
+    z-index: 2147483646; max-width: min(92vw, 360px); padding: 12px 14px;
+    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; line-height: 1.55;
+  }
+</style>

package/src/SvRowGroupPanel.svelte CHANGED Viewed

@@ -1,170 +1,170 @@
-<!--
-  A row-group panel (like the "drag columns to group" bar in enterprise grids).
-  Shows the current group-by columns as chips you can remove or drag to reorder,
-  plus a "+ Group by" menu to add one. It is also a drop target: a column drag
-  that carries `text/sv-column` (its column id) adds that column. Wire `onChange`
-  to a server group model's `setGroupBy`, or to client grouping.
-      <SvRowGroupPanel
-        columns={[{ id: 'region', label: 'Region' }, { id: 'country', label: 'Country' }]}
-        groupBy={view.groupBy}
-        onChange={(g) => ctl.setGroupBy(g)}
-      />
--->
-<script lang="ts">
-  type Col = { id: string; label: string }
-  type Props = {
-    /** Columns that can be grouped on. */
-    columns: Col[]
-    /** Current group-by column ids, outer to inner. */
-    groupBy: string[]
-    /** Called with the new group-by order. */
-    onChange: (groupBy: string[]) => void
-    /** Text shown when nothing is grouped. */
-    placeholder?: string
-  }
-  let { columns, groupBy, onChange, placeholder = 'Drag a column here to group by it' }: Props = $props()
-  const labelOf = (id: string) => columns.find((c) => c.id === id)?.label ?? id
-  const available = $derived(columns.filter((c) => !groupBy.includes(c.id)))
-  let dragIndex = $state<number | null>(null)
-  function remove(id: string) {
-    onChange(groupBy.filter((g) => g !== id))
-  }
-  function add(id: string) {
-    if (id && !groupBy.includes(id)) onChange([...groupBy, id])
-  }
-  function reorder(to: number) {
-    if (dragIndex === null || dragIndex === to) return
-    const next = [...groupBy]
-    const [moved] = next.splice(dragIndex, 1)
-    next.splice(to, 0, moved!)
-    dragIndex = null
-    onChange(next)
-  }
-  function onPanelDrop(e: DragEvent) {
-    const id = e.dataTransfer?.getData('text/sv-column')
-    if (id) add(id)
-  }
-  /** Keyboard equivalent of dragging a chip: moves the chip at `i` one slot earlier/later,
-   *  reusing `reorder()` (via `dragIndex`) so there is a single source of truth for the move. */
-  function moveByKeyboard(i: number, delta: number) {
-    const to = i + delta
-    if (to < 0 || to >= groupBy.length) return
-    dragIndex = i
-    reorder(to)
-  }
-  function onChipKeydown(e: KeyboardEvent, i: number) {
-    if (!e.altKey) return
-    if (e.key === 'ArrowLeft') {
-      e.preventDefault()
-      moveByKeyboard(i, -1)
-    } else if (e.key === 'ArrowRight') {
-      e.preventDefault()
-      moveByKeyboard(i, 1)
-    }
-  }
-</script>
-<div
-  class="sv-rowgroup-panel"
-  role="group"
-  aria-label="Row groups"
-  ondragover={(e) => e.preventDefault()}
-  ondrop={onPanelDrop}
->
-  <span class="sv-rgp-label" aria-hidden="true">Group by:</span>
-  {#if groupBy.length === 0}
-    <span class="sv-rgp-empty">{placeholder}</span>
-  {:else}
-    {#each groupBy as id, i (id)}
-      {#if i > 0}<span class="sv-rgp-sep" aria-hidden="true">›</span>{/if}
-      <!-- svelte-ignore a11y_no_noninteractive_tabindex, a11y_no_noninteractive_element_interactions -->
-      <span
-        class="sv-rgp-chip"
-        class:sv-rgp-chip-drag={dragIndex === i}
-        role="group"
-        tabindex="0"
-        aria-label={`Grouped by ${labelOf(id)}, position ${i + 1} of ${groupBy.length}. Press Alt+Arrow keys to reorder.`}
-        draggable="true"
-        ondragstart={() => (dragIndex = i)}
-        ondragend={() => (dragIndex = null)}
-        ondragover={(e) => e.preventDefault()}
-        ondrop={() => reorder(i)}
-        onkeydown={(e) => onChipKeydown(e, i)}
-      >
-        <span class="sv-rgp-grip" aria-hidden="true">⠿</span>
-        {labelOf(id)}
-        <button type="button" class="sv-rgp-x" onclick={() => remove(id)} aria-label={`Stop grouping by ${labelOf(id)}`}>×</button>
-      </span>
-    {/each}
-  {/if}
-  {#if available.length}
-    <select
-      class="sv-rgp-add"
-      aria-label="Add a group column"
-      onchange={(e) => { add(e.currentTarget.value); e.currentTarget.value = '' }}
-    >
-      <option value="">+ Group by</option>
-      {#each available as c (c.id)}<option value={c.id}>{c.label}</option>{/each}
-    </select>
-  {/if}
-</div>
-<style>
-  .sv-rowgroup-panel {
-    display: flex;
-    align-items: center;
-    flex-wrap: wrap;
-    gap: 6px;
-    padding: 8px 10px;
-    border: 1px dashed var(--sg-border, #cbd5e1);
-    border-radius: 10px;
-    background: var(--sg-header-bg, #f8fafc);
-    font-size: 13px;
-  }
-  .sv-rgp-label { color: var(--sg-muted, #64748b); font-weight: 600; }
-  .sv-rgp-empty { color: var(--sg-muted, #94a3b8); font-style: italic; }
-  .sv-rgp-sep { color: var(--sg-muted, #94a3b8); }
-  .sv-rgp-chip {
-    display: inline-flex;
-    align-items: center;
-    gap: 6px;
-    padding: 3px 6px 3px 8px;
-    border-radius: 999px;
-    background: var(--sg-bg, #fff);
-    border: 1px solid var(--sg-border, #e2e8f0);
-    cursor: grab;
-    user-select: none;
-    font-weight: 600;
-  }
-  .sv-rgp-chip-drag { opacity: 0.5; }
-  .sv-rgp-grip { color: var(--sg-muted, #94a3b8); cursor: grab; }
-  .sv-rgp-x {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: 16px;
-    height: 16px;
-    border: 0;
-    border-radius: 50%;
-    background: none;
-    color: var(--sg-muted, #64748b);
-    cursor: pointer;
-    font-size: 14px;
-    line-height: 1;
-  }
-  .sv-rgp-x:hover { background: var(--sg-header-bg, #f1f5f9); color: var(--sg-fg, #0f172a); }
-  .sv-rgp-add {
-    font: inherit;
-    font-size: 13px;
-    padding: 4px 8px;
-    border-radius: 8px;
-    border: 1px solid var(--sg-border, #e2e8f0);
-    background: var(--sg-bg, #fff);
-    color: var(--sg-accent, #2563eb);
-    cursor: pointer;
-  }
-</style>
+<!--
+  A row-group panel (like the "drag columns to group" bar in enterprise grids).
+  Shows the current group-by columns as chips you can remove or drag to reorder,
+  plus a "+ Group by" menu to add one. It is also a drop target: a column drag
+  that carries `text/sv-column` (its column id) adds that column. Wire `onChange`
+  to a server group model's `setGroupBy`, or to client grouping.
+      <SvRowGroupPanel
+        columns={[{ id: 'region', label: 'Region' }, { id: 'country', label: 'Country' }]}
+        groupBy={view.groupBy}
+        onChange={(g) => ctl.setGroupBy(g)}
+      />
+-->
+<script lang="ts">
+  type Col = { id: string; label: string }
+  type Props = {
+    /** Columns that can be grouped on. */
+    columns: Col[]
+    /** Current group-by column ids, outer to inner. */
+    groupBy: string[]
+    /** Called with the new group-by order. */
+    onChange: (groupBy: string[]) => void
+    /** Text shown when nothing is grouped. */
+    placeholder?: string
+  }
+  let { columns, groupBy, onChange, placeholder = 'Drag a column here to group by it' }: Props = $props()
+  const labelOf = (id: string) => columns.find((c) => c.id === id)?.label ?? id
+  const available = $derived(columns.filter((c) => !groupBy.includes(c.id)))
+  let dragIndex = $state<number | null>(null)
+  function remove(id: string) {
+    onChange(groupBy.filter((g) => g !== id))
+  }
+  function add(id: string) {
+    if (id && !groupBy.includes(id)) onChange([...groupBy, id])
+  }
+  function reorder(to: number) {
+    if (dragIndex === null || dragIndex === to) return
+    const next = [...groupBy]
+    const [moved] = next.splice(dragIndex, 1)
+    next.splice(to, 0, moved!)
+    dragIndex = null
+    onChange(next)
+  }
+  function onPanelDrop(e: DragEvent) {
+    const id = e.dataTransfer?.getData('text/sv-column')
+    if (id) add(id)
+  }
+  /** Keyboard equivalent of dragging a chip: moves the chip at `i` one slot earlier/later,
+   *  reusing `reorder()` (via `dragIndex`) so there is a single source of truth for the move. */
+  function moveByKeyboard(i: number, delta: number) {
+    const to = i + delta
+    if (to < 0 || to >= groupBy.length) return
+    dragIndex = i
+    reorder(to)
+  }
+  function onChipKeydown(e: KeyboardEvent, i: number) {
+    if (!e.altKey) return
+    if (e.key === 'ArrowLeft') {
+      e.preventDefault()
+      moveByKeyboard(i, -1)
+    } else if (e.key === 'ArrowRight') {
+      e.preventDefault()
+      moveByKeyboard(i, 1)
+    }
+  }
+</script>
+<div
+  class="sv-rowgroup-panel"
+  role="group"
+  aria-label="Row groups"
+  ondragover={(e) => e.preventDefault()}
+  ondrop={onPanelDrop}
+>
+  <span class="sv-rgp-label" aria-hidden="true">Group by:</span>
+  {#if groupBy.length === 0}
+    <span class="sv-rgp-empty">{placeholder}</span>
+  {:else}
+    {#each groupBy as id, i (id)}
+      {#if i > 0}<span class="sv-rgp-sep" aria-hidden="true">›</span>{/if}
+      <!-- svelte-ignore a11y_no_noninteractive_tabindex, a11y_no_noninteractive_element_interactions -->
+      <span
+        class="sv-rgp-chip"
+        class:sv-rgp-chip-drag={dragIndex === i}
+        role="group"
+        tabindex="0"
+        aria-label={`Grouped by ${labelOf(id)}, position ${i + 1} of ${groupBy.length}. Press Alt+Arrow keys to reorder.`}
+        draggable="true"
+        ondragstart={() => (dragIndex = i)}
+        ondragend={() => (dragIndex = null)}
+        ondragover={(e) => e.preventDefault()}
+        ondrop={() => reorder(i)}
+        onkeydown={(e) => onChipKeydown(e, i)}
+      >
+        <span class="sv-rgp-grip" aria-hidden="true">⠿</span>
+        {labelOf(id)}
+        <button type="button" class="sv-rgp-x" onclick={() => remove(id)} aria-label={`Stop grouping by ${labelOf(id)}`}>×</button>
+      </span>
+    {/each}
+  {/if}
+  {#if available.length}
+    <select
+      class="sv-rgp-add"
+      aria-label="Add a group column"
+      onchange={(e) => { add(e.currentTarget.value); e.currentTarget.value = '' }}
+    >
+      <option value="">+ Group by</option>
+      {#each available as c (c.id)}<option value={c.id}>{c.label}</option>{/each}
+    </select>
+  {/if}
+</div>
+<style>
+  .sv-rowgroup-panel {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 6px;
+    padding: 8px 10px;
+    border: 1px dashed var(--sg-border, #cbd5e1);
+    border-radius: 10px;
+    background: var(--sg-header-bg, #f8fafc);
+    font-size: 13px;
+  }
+  .sv-rgp-label { color: var(--sg-muted, #64748b); font-weight: 600; }
+  .sv-rgp-empty { color: var(--sg-muted, #94a3b8); font-style: italic; }
+  .sv-rgp-sep { color: var(--sg-muted, #94a3b8); }
+  .sv-rgp-chip {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    padding: 3px 6px 3px 8px;
+    border-radius: 999px;
+    background: var(--sg-bg, #fff);
+    border: 1px solid var(--sg-border, #e2e8f0);
+    cursor: grab;
+    user-select: none;
+    font-weight: 600;
+  }
+  .sv-rgp-chip-drag { opacity: 0.5; }
+  .sv-rgp-grip { color: var(--sg-muted, #94a3b8); cursor: grab; }
+  .sv-rgp-x {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 16px;
+    height: 16px;
+    border: 0;
+    border-radius: 50%;
+    background: none;
+    color: var(--sg-muted, #64748b);
+    cursor: pointer;
+    font-size: 14px;
+    line-height: 1;
+  }
+  .sv-rgp-x:hover { background: var(--sg-header-bg, #f1f5f9); color: var(--sg-fg, #0f172a); }
+  .sv-rgp-add {
+    font: inherit;
+    font-size: 13px;
+    padding: 4px 8px;
+    border-radius: 8px;
+    border: 1px solid var(--sg-border, #e2e8f0);
+    background: var(--sg-bg, #fff);
+    color: var(--sg-accent, #2563eb);
+    cursor: pointer;
+  }
+</style>