@svgrid/grid 1.2.33 → 2.0.0

package/dist/SvProgress.svelte.d.ts

@@ -0,0 +1,32 @@
+/**
+ * SvProgress - a linear progress bar (WAI-ARIA `progressbar`). Determinate
+ * (value/max) or `indeterminate` (animated), with color intents, sizes, an
+ * optional label and an optional secondary `buffer` track. Theme-driven via
+ * `--sg-*`; respects prefers-reduced-motion. Parity: Smart progress bar.
+ *
+ * ```svelte
+ * <SvProgress value={64} showLabel />
+ * <SvProgress indeterminate color="success" />
+ * ```
+ */
+type Props = {
+    /** Current value (0..max). Ignored when `indeterminate`. */
+    value?: number;
+    max?: number;
+    /** Unknown-duration animated bar. */
+    indeterminate?: boolean;
+    /** Buffered/secondary value (e.g. streamed-ahead), 0..max. */
+    buffer?: number;
+    color?: 'accent' | 'success' | 'warning' | 'danger';
+    size?: 'sm' | 'md' | 'lg';
+    /** Show a percentage label at the end of the bar. */
+    showLabel?: boolean;
+    /** Format the label (default: rounded percent). */
+    formatLabel?: (value: number, max: number) => string;
+    /** Diagonal candy-stripe overlay on the fill. */
+    striped?: boolean;
+    ariaLabel?: string;
+};
+declare const SvProgress: import("svelte").Component<Props, {}, "">;
+type SvProgress = ReturnType<typeof SvProgress>;
+export default SvProgress;

package/dist/SvRadioGroup.svelte

@@ -8,17 +8,15 @@
    * roving tabindex + arrow-key navigation. Parity: Smart `smart-radio-button`
    * (as a managed group). Controlled via `value` + `onChange`.
    */
+  import SvField from './SvField.svelte'
+  import { nextEditorId, type SvEditorProps } from './editor-contract'
   import { createRadioGroup, type RadioOption } from './createRadioGroup.svelte'
 
-  type Props = {
+  type Props = SvEditorProps & {
     options: ReadonlyArray<RadioOption>
     value?: string | number | null
     onChange?: (value: string | number) => void
-    name?: string
-    disabled?: boolean
     orientation?: 'vertical' | 'horizontal'
-    size?: 'sm' | 'md' | 'lg'
-    ariaLabel?: string
   }
 
   let {
@@ -30,34 +28,53 @@
     orientation = 'vertical',
     size = 'md',
     ariaLabel,
+    invalid = false,
+    required = false,
+    error,
+    label,
+    hint,
+    dir,
+    id,
   }: Props = $props()
 
+  const autoId = nextEditorId('sv-radio')
+  const uid = $derived(id ?? autoId)
+
   // The styled radio group is just a renderer over the headless core.
   const rg = createRadioGroup({
     options: () => options,
     value: () => value,
     onChange: (v) => onChange?.(v),
     disabled: () => disabled,
-    ariaLabel: () => ariaLabel,
+    // A visible field `label` also names the group for assistive tech.
+    ariaLabel: () => ariaLabel ?? label,
+    id: () => uid,
+    invalid: () => invalid,
+    required: () => required,
+    error: () => error,
+    hint: () => hint,
   })
 </script>
 
-<div
-  class="sv-radiogroup sv-radiogroup--{orientation} sv-radiogroup--{size}"
-  {...rg.groupProps()}
->
-  {#each options as opt (opt.value)}
-    <button
-      class="sv-radio"
-      class:is-checked={opt.value === value}
-      {...rg.radioProps(opt)}
-    >
-      <span class="sv-radio__dot"></span>
-      <span class="sv-radio__label">{opt.label}</span>
-    </button>
-  {/each}
-  {#if name}<input type="hidden" {name} value={value ?? ''} />{/if}
-</div>
+<SvField id={uid} {label} {hint} {error} {required} {dir}>
+  <div
+    class="sv-radiogroup sv-radiogroup--{orientation} sv-radiogroup--{size}"
+    class:is-invalid={invalid}
+    {...rg.groupProps()}
+  >
+    {#each options as opt (opt.value)}
+      <button
+        class="sv-radio"
+        class:is-checked={opt.value === value}
+        {...rg.radioProps(opt)}
+      >
+        <span class="sv-radio__dot"></span>
+        <span class="sv-radio__label">{opt.label}</span>
+      </button>
+    {/each}
+    {#if name}<input type="hidden" {name} value={value ?? ''} />{/if}
+  </div>
+</SvField>
 
 <style>
   .sv-radiogroup { --_accent: var(--sg-accent, #2563eb); display: flex; gap: 10px; }
@@ -76,6 +93,7 @@
     border: 1.5px solid var(--sg-border, #cbd5e1); background: var(--sg-input-bg, #fff);
     display: grid; place-items: center; transition: border-color 0.12s;
   }
+  .sv-radiogroup.is-invalid .sv-radio__dot { border-color: var(--sg-danger, #dc2626); }
   .sv-radio.is-checked .sv-radio__dot { border-color: var(--_accent); }
   .sv-radio.is-checked .sv-radio__dot::after {
     content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--_accent);

package/dist/SvRadioGroup.svelte.d.ts

@@ -1,19 +1,11 @@
 export type { RadioOption } from './createRadioGroup.svelte';
-/**
-   * SvRadioGroup - an accessible radio group (WAI-ARIA radiogroup pattern) with
-   * roving tabindex + arrow-key navigation. Parity: Smart `smart-radio-button`
-   * (as a managed group). Controlled via `value` + `onChange`.
-   */
+import { type SvEditorProps } from './editor-contract';
 import { type RadioOption } from './createRadioGroup.svelte';
-type Props = {
+type Props = SvEditorProps & {
     options: ReadonlyArray<RadioOption>;
     value?: string | number | null;
     onChange?: (value: string | number) => void;
-    name?: string;
-    disabled?: boolean;
     orientation?: 'vertical' | 'horizontal';
-    size?: 'sm' | 'md' | 'lg';
-    ariaLabel?: string;
 };
 declare const SvRadioGroup: import("svelte").Component<Props, {}, "">;
 type SvRadioGroup = ReturnType<typeof SvRadioGroup>;

package/dist/SvRating.svelte

@@ -4,22 +4,24 @@
    * `smart-rating`. Hover preview, keyboard, optional half steps, readOnly.
    * Uses the grid's `--sg-rating-*` tokens so it matches the in-grid editor.
    */
+  import SvField from './SvField.svelte'
+  import { nextEditorId, resolveMessages, type SvEditorProps } from './editor-contract'
   import { createRating } from './createRating.svelte'
 
-  type Props = {
+  /** User-facing strings (localizable via `messages`). */
+  type RatingMessages = { label: string; star: string; stars: string }
+  const DEFAULT_MESSAGES: RatingMessages = { label: 'Rating', star: 'star', stars: 'stars' }
+
+  type Props = SvEditorProps & {
     value?: number
     onChange?: (value: number) => void
     max?: number
     /** Allow half-star precision. */
     allowHalf?: boolean
-    /** Read-only: shown but not editable (the kit-standard name). */
-    readonly?: boolean
     /** @deprecated use `readonly` - kept for back-compat. */
     readOnly?: boolean
-    disabled?: boolean
-    size?: 'sm' | 'md' | 'lg'
-    name?: string
-    ariaLabel?: string
+    /** Override the built-in strings (group + per-star aria-labels). */
+    messages?: Partial<RatingMessages>
   }
 
   let {
@@ -33,9 +35,20 @@
     size = 'md',
     name,
     ariaLabel,
+    invalid = false,
+    required = false,
+    error,
+    label,
+    hint,
+    dir,
+    id,
+    messages,
   }: Props = $props()
 
   const ro = $derived(readonly || readOnly)
+  const autoId = nextEditorId('sv-rating')
+  const uid = $derived(id ?? autoId)
+  const M = $derived(resolveMessages(DEFAULT_MESSAGES, messages))
 
   // The styled rating is just a renderer over the headless core.
   const r = createRating({
@@ -45,32 +58,40 @@
     allowHalf: () => allowHalf,
     readonly: () => ro,
     disabled: () => disabled,
-    ariaLabel: () => ariaLabel,
+    ariaLabel: () => ariaLabel ?? label ?? M.label,
+    starLabel: (n) => `${n} ${n === 1 ? M.star : M.stars}`,
+    id: () => uid,
+    invalid: () => invalid,
+    required: () => required,
+    error: () => error,
+    hint: () => hint,
   })
 </script>
 
-<div
-  class="sv-rating sv-rating--{size}"
-  class:is-readonly={ro}
-  class:is-disabled={disabled}
-  {...r.rootProps()}
->
-  {#each Array(max) as _, i (i)}
-    <button
-      class="sv-rating__star is-{r.fillOf(i)}"
-      {...r.starProps(i)}
-    >
-      <svg viewBox="0 0 24 24" aria-hidden="true">
-        <defs>
-          <linearGradient id="half-{i}"><stop offset="50%" stop-color="var(--_on)" /><stop offset="50%" stop-color="var(--_off)" /></linearGradient>
-        </defs>
-        <path d="M12 2.5l2.9 6.1 6.6.9-4.8 4.6 1.2 6.6L12 18.6 6.1 21.7l1.2-6.6L2.5 9.5l6.6-.9z"
-          fill={r.fillOf(i) === 'full' ? 'var(--_on)' : r.fillOf(i) === 'half' ? `url(#half-${i})` : 'var(--_off)'} />
-      </svg>
-    </button>
-  {/each}
-  {#if name}<input type="hidden" {name} value={value} />{/if}
-</div>
+<SvField id={uid} {label} {hint} {error} {required} {dir}>
+  <div
+    class="sv-rating sv-rating--{size}"
+    class:is-readonly={ro}
+    class:is-disabled={disabled}
+    {...r.rootProps()}
+  >
+    {#each Array(max) as _, i (i)}
+      <button
+        class="sv-rating__star is-{r.fillOf(i)}"
+        {...r.starProps(i)}
+      >
+        <svg viewBox="0 0 24 24" aria-hidden="true">
+          <defs>
+            <linearGradient id="half-{uid}-{i}"><stop offset="50%" stop-color="var(--_on)" /><stop offset="50%" stop-color="var(--_off)" /></linearGradient>
+          </defs>
+          <path d="M12 2.5l2.9 6.1 6.6.9-4.8 4.6 1.2 6.6L12 18.6 6.1 21.7l1.2-6.6L2.5 9.5l6.6-.9z"
+            fill={r.fillOf(i) === 'full' ? 'var(--_on)' : r.fillOf(i) === 'half' ? `url(#half-${uid}-${i})` : 'var(--_off)'} />
+        </svg>
+      </button>
+    {/each}
+    {#if name}<input type="hidden" {name} value={value} />{/if}
+  </div>
+</SvField>
 
 <style>
   .sv-rating {

package/dist/SvRating.svelte.d.ts

@@ -1,17 +1,20 @@
-type Props = {
+import { type SvEditorProps } from './editor-contract';
+/** User-facing strings (localizable via `messages`). */
+type RatingMessages = {
+    label: string;
+    star: string;
+    stars: string;
+};
+type Props = SvEditorProps & {
     value?: number;
     onChange?: (value: number) => void;
     max?: number;
     /** Allow half-star precision. */
     allowHalf?: boolean;
-    /** Read-only: shown but not editable (the kit-standard name). */
-    readonly?: boolean;
     /** @deprecated use `readonly` - kept for back-compat. */
     readOnly?: boolean;
-    disabled?: boolean;
-    size?: 'sm' | 'md' | 'lg';
-    name?: string;
-    ariaLabel?: string;
+    /** Override the built-in strings (group + per-star aria-labels). */
+    messages?: Partial<RatingMessages>;
 };
 declare const SvRating: import("svelte").Component<Props, {}, "">;
 type SvRating = ReturnType<typeof SvRating>;

package/dist/SvRichText.svelte

@@ -0,0 +1,192 @@
+<script lang="ts" module>
+  export type RichTextTool =
+    | 'bold' | 'italic' | 'underline' | 'strike'
+    | 'h1' | 'h2' | 'h3' | 'p'
+    | 'ul' | 'ol' | 'quote' | 'code'
+    | 'alignLeft' | 'alignCenter' | 'alignRight'
+    | 'link' | 'clear' | 'undo' | 'redo'
+    | '|'
+</script>
+
+<script lang="ts">
+  /**
+   * SvRichText - a lightweight WYSIWYG editor: a formatting toolbar over a
+   * `contentEditable` region, emitting HTML. Parity: Smart `smart-editor` (the
+   * common commands). Uses `document.execCommand` - the pragmatic, widely-working
+   * approach for a component-kit editor. Bindable `value` (HTML string).
+   *
+   * ```svelte
+   * <SvRichText bind:value={html} placeholder="Write something…" />
+   * ```
+   */
+  import { nextEditorId } from './editor-contract'
+
+  const DEFAULT_TOOLS: RichTextTool[] = [
+    'bold', 'italic', 'underline', 'strike', '|',
+    'h1', 'h2', 'h3', 'p', '|',
+    'ul', 'ol', 'quote', 'code', '|',
+    'alignLeft', 'alignCenter', 'alignRight', '|',
+    'link', 'clear', '|', 'undo', 'redo',
+  ]
+
+  const META: Record<Exclude<RichTextTool, '|'>, { label: string; glyph: string }> = {
+    bold: { label: 'Bold', glyph: 'B' }, italic: { label: 'Italic', glyph: 'I' },
+    underline: { label: 'Underline', glyph: 'U' }, strike: { label: 'Strikethrough', glyph: 'S' },
+    h1: { label: 'Heading 1', glyph: 'H1' }, h2: { label: 'Heading 2', glyph: 'H2' },
+    h3: { label: 'Heading 3', glyph: 'H3' }, p: { label: 'Paragraph', glyph: '¶' },
+    ul: { label: 'Bullet list', glyph: '•' }, ol: { label: 'Numbered list', glyph: '1.' },
+    quote: { label: 'Quote', glyph: '❝' }, code: { label: 'Code block', glyph: '</>' },
+    alignLeft: { label: 'Align left', glyph: '≡' }, alignCenter: { label: 'Align center', glyph: '≣' },
+    alignRight: { label: 'Align right', glyph: '≡' }, link: { label: 'Link', glyph: '🔗' },
+    clear: { label: 'Clear formatting', glyph: '⌫' }, undo: { label: 'Undo', glyph: '↶' }, redo: { label: 'Redo', glyph: '↷' },
+  }
+
+  type Props = {
+    /** HTML string (bindable). */
+    value?: string
+    onChange?: (html: string) => void
+    placeholder?: string
+    disabled?: boolean
+    readonly?: boolean
+    minHeight?: string
+    /** Toolbar tools + order; use '|' for a separator. */
+    tools?: RichTextTool[]
+    ariaLabel?: string
+  }
+
+  let {
+    value = $bindable(''),
+    onChange,
+    placeholder = '',
+    disabled = false,
+    readonly = false,
+    minHeight = '160px',
+    tools = DEFAULT_TOOLS,
+    ariaLabel = 'Rich text editor',
+  }: Props = $props()
+
+  const uid = nextEditorId('sv-rt')
+  let editorEl = $state<HTMLDivElement | null>(null)
+  let focused = $state(false)
+  let empty = $state(true)
+  let activeState = $state<Record<string, boolean>>({})
+
+  // Push external value into the DOM only when it differs and we're not typing
+  // (writing innerHTML while focused would collapse the caret).
+  $effect(() => {
+    const v = value ?? ''
+    if (editorEl && !focused && editorEl.innerHTML !== v) editorEl.innerHTML = v
+    if (editorEl) empty = editorEl.textContent!.trim().length === 0
+  })
+
+  function sync() {
+    if (!editorEl) return
+    const html = editorEl.innerHTML
+    empty = editorEl.textContent!.trim().length === 0
+    value = html
+    onChange?.(html)
+  }
+  function q(cmd: string): boolean {
+    try { return document.queryCommandState(cmd) } catch { return false }
+  }
+  function refreshState() {
+    activeState = {
+      bold: q('bold'), italic: q('italic'), underline: q('underline'), strike: q('strikeThrough'),
+      ul: q('insertUnorderedList'), ol: q('insertOrderedList'),
+    }
+  }
+  function exec(cmd: string, arg?: string) {
+    if (disabled || readonly) return
+    editorEl?.focus()
+    try { document.execCommand(cmd, false, arg) } catch { /* jsdom / unsupported */ }
+    sync()
+    refreshState()
+  }
+
+  const run: Record<Exclude<RichTextTool, '|'>, () => void> = {
+    bold: () => exec('bold'), italic: () => exec('italic'), underline: () => exec('underline'), strike: () => exec('strikeThrough'),
+    h1: () => exec('formatBlock', 'H1'), h2: () => exec('formatBlock', 'H2'), h3: () => exec('formatBlock', 'H3'), p: () => exec('formatBlock', 'P'),
+    ul: () => exec('insertUnorderedList'), ol: () => exec('insertOrderedList'),
+    quote: () => exec('formatBlock', 'BLOCKQUOTE'), code: () => exec('formatBlock', 'PRE'),
+    alignLeft: () => exec('justifyLeft'), alignCenter: () => exec('justifyCenter'), alignRight: () => exec('justifyRight'),
+    link: () => { const url = typeof prompt === 'function' ? prompt('Link URL', 'https://') : null; if (url) exec('createLink', url) },
+    clear: () => exec('removeFormat'), undo: () => exec('undo'), redo: () => exec('redo'),
+  }
+</script>
+
+<div class="sv-rt" class:is-disabled={disabled} class:is-readonly={readonly}>
+  {#if !readonly}
+    <div class="sv-rt__toolbar" role="toolbar" aria-label="Formatting" aria-controls={uid}>
+      {#each tools as t, i (i)}
+        {#if t === '|'}
+          <span class="sv-rt__sep" aria-hidden="true"></span>
+        {:else}
+          <button
+            type="button"
+            class="sv-rt__btn"
+            class:is-on={activeState[t]}
+            data-tool={t}
+            title={META[t].label}
+            aria-label={META[t].label}
+            aria-pressed={activeState[t] ? true : undefined}
+            {disabled}
+            onmousedown={(e) => e.preventDefault()}
+            onclick={run[t]}
+          >{META[t].glyph}</button>
+        {/if}
+      {/each}
+    </div>
+  {/if}
+  <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+  <div
+    bind:this={editorEl}
+    id={uid}
+    class="sv-rt__body"
+    class:is-empty={empty}
+    style:min-height={minHeight}
+    contenteditable={!disabled && !readonly}
+    role="textbox"
+    aria-multiline="true"
+    aria-label={ariaLabel}
+    data-placeholder={placeholder}
+    tabindex={disabled ? -1 : 0}
+    oninput={sync}
+    onfocus={() => (focused = true)}
+    onblur={() => { focused = false; sync() }}
+    onkeyup={refreshState}
+    onmouseup={refreshState}
+  ></div>
+</div>
+
+<style>
+  .sv-rt {
+    --_accent: var(--sg-accent, #2563eb);
+    border: 1px solid var(--sg-input-border, var(--sg-border, #cbd5e1)); border-radius: var(--sg-radius, 8px);
+    background: var(--sg-input-bg, #fff); color: var(--sg-fg, #0f172a); overflow: hidden;
+    display: flex; flex-direction: column;
+  }
+  .sv-rt:focus-within { border-color: var(--_accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--_accent) 20%, transparent); }
+  .sv-rt.is-disabled { opacity: 0.6; }
+  .sv-rt__toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 1px; padding: 5px 6px; border-bottom: 1px solid var(--sg-border, #e2e8f0); background: var(--sg-header-bg, #f8fafc); }
+  .sv-rt__btn {
+    min-width: 28px; height: 28px; padding: 0 6px; display: grid; place-items: center;
+    background: none; border: 0; border-radius: 6px; color: var(--sg-fg, #334155); cursor: pointer;
+    font-size: 12.5px; font-weight: 600;
+  }
+  .sv-rt__btn:hover:not(:disabled) { background: var(--sg-row-hover-bg, #eef2f7); }
+  .sv-rt__btn.is-on { background: color-mix(in srgb, var(--_accent) 16%, transparent); color: var(--_accent); }
+  .sv-rt__btn[data-tool='italic'] { font-style: italic; }
+  .sv-rt__btn[data-tool='underline'] { text-decoration: underline; }
+  .sv-rt__btn[data-tool='strike'] { text-decoration: line-through; }
+  .sv-rt__btn[data-tool='alignRight'] { transform: scaleX(-1); }
+  .sv-rt__sep { width: 1px; height: 18px; background: var(--sg-border, #e2e8f0); margin: 0 4px; }
+  .sv-rt__body { padding: 10px 12px; outline: none; overflow: auto; font-size: 14px; line-height: 1.6; }
+  .sv-rt__body.is-empty::before { content: attr(data-placeholder); color: var(--sg-muted, #94a3b8); pointer-events: none; }
+  .sv-rt__body :global(h1) { font-size: 1.5em; font-weight: 700; margin: 0.4em 0; }
+  .sv-rt__body :global(h2) { font-size: 1.25em; font-weight: 700; margin: 0.4em 0; }
+  .sv-rt__body :global(h3) { font-size: 1.1em; font-weight: 650; margin: 0.4em 0; }
+  .sv-rt__body :global(blockquote) { margin: 0.4em 0; padding-inline-start: 12px; border-inline-start: 3px solid var(--sg-border, #cbd5e1); color: var(--sg-muted, #64748b); }
+  .sv-rt__body :global(pre) { margin: 0.4em 0; padding: 10px 12px; border-radius: 8px; background: var(--sg-row-hover-bg, #f1f5f9); font: 12.5px/1.6 ui-monospace, monospace; overflow-x: auto; }
+  .sv-rt__body :global(a) { color: var(--_accent); }
+  .sv-rt__body :global(ul), .sv-rt__body :global(ol) { margin: 0.4em 0; padding-inline-start: 24px; }
+</style>

package/dist/SvRichText.svelte.d.ts

@@ -0,0 +1,16 @@
+export type RichTextTool = 'bold' | 'italic' | 'underline' | 'strike' | 'h1' | 'h2' | 'h3' | 'p' | 'ul' | 'ol' | 'quote' | 'code' | 'alignLeft' | 'alignCenter' | 'alignRight' | 'link' | 'clear' | 'undo' | 'redo' | '|';
+type Props = {
+    /** HTML string (bindable). */
+    value?: string;
+    onChange?: (html: string) => void;
+    placeholder?: string;
+    disabled?: boolean;
+    readonly?: boolean;
+    minHeight?: string;
+    /** Toolbar tools + order; use '|' for a separator. */
+    tools?: RichTextTool[];
+    ariaLabel?: string;
+};
+declare const SvRichText: import("svelte").Component<Props, {}, "value">;
+type SvRichText = ReturnType<typeof SvRichText>;
+export default SvRichText;

package/dist/SvRowGroupPanel.svelte

@@ -0,0 +1,147 @@
+<!--
+  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)
+  }
+</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}
+      <span
+        class="sv-rgp-chip"
+        class:sv-rgp-chip-drag={dragIndex === i}
+        draggable="true"
+        ondragstart={() => (dragIndex = i)}
+        ondragend={() => (dragIndex = null)}
+        ondragover={(e) => e.preventDefault()}
+        ondrop={() => reorder(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>

package/dist/SvRowGroupPanel.svelte.d.ts

@@ -0,0 +1,17 @@
+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;
+};
+declare const SvRowGroupPanel: import("svelte").Component<Props, {}, "">;
+type SvRowGroupPanel = ReturnType<typeof SvRowGroupPanel>;
+export default SvRowGroupPanel;