@svgrid/enterprise 3.0.1 → 3.0.3

package/dist/server/SvGroupCell.svelte

@@ -0,0 +1,213 @@
+<!--
+  Built-in group cell for the server-side group/tree model. Drop it into the
+  grouping column and it draws the expander + indentation for group rows (and an
+  indented leaf value) - no hand-written cell recipe. Pair with `serverGroupRows`
+  to feed `<SvGrid data>`, and wire `onToggle` to the controller's `toggleGroup`.
+
+      cell: (ctx) => renderComponent(SvGroupCell, {
+        row: ctx.row.original, onToggle: ctl.toggleGroup, leafField: 'name',
+      })
+-->
+<script lang="ts" generics="TData">
+  import type { GridIcons, ServerDisplayRow, ServerPlaceholderRow } from '@svgrid/grid'
+  import { fillMessage, resolveServerGroupMessages, type ServerGroupMessages } from './messages'
+
+  // Rows from either model: the display-row union, plus the block-cached
+  // model's shared placeholder (which the grid renders itself, so it never
+  // reaches this cell - but the type has to admit it).
+  type GroupGridRow = { __group?: ServerDisplayRow<TData> | ServerPlaceholderRow } & Record<string, unknown>
+  type Props = {
+    /** The grid row from `serverGroupRows` (carries the `__group` marker). */
+    row: GroupGridRow
+    /**
+     * Expand / collapse a group, or load more children. Receives the grid row;
+     * wire to `serverGroupNav(ctl).onToggle` (which drives clicks and keyboard).
+     */
+    onToggle: (row: GroupGridRow) => void
+    /**
+     * Field to show for leaf rows in the group column (blank if omitted).
+     * Under `treeData` every row is a node of the same shape, so it names
+     * the label of expandable nodes too; a group row's key is otherwise
+     * the text.
+     */
+    leafField?: string
+    /** Pixels of indentation per level. Default 18. */
+    indent?: number
+    /**
+     * Icon overrides, the same map `<SvGrid icons>` takes. Only
+     * `chevron-right` is drawn here. You mount this component yourself, so it
+     * cannot inherit the grid's icons - pass the same object to both to keep
+     * the expander consistent with the rest of the chrome.
+     */
+    icons?: GridIcons
+    /**
+     * Strings, for localization: the "load more" row, the footer and grand
+     * total labels. Partial; missing keys keep the English default. Pass the
+     * same map to `SvRowGroupPanel` and `serverGroupText`.
+     */
+    messages?: Partial<ServerGroupMessages>
+    /** Locale for the child count and the "load more" number. Default: the browser's. */
+    locale?: string | ReadonlyArray<string>
+  }
+
+  let { row, onToggle, leafField, indent = 18, icons, messages, locale }: Props = $props()
+  const chevron = $derived(icons?.['chevron-right'])
+  const meta = $derived(row.__group)
+  const m = $derived(resolveServerGroupMessages(messages))
+  const num = (n: number) => n.toLocaleString(locale as string | string[] | undefined)
+  // A tree node's key is its id (`field` is empty under treeData); the
+  // label is the leaf field then, the same as for its leaves.
+  const label = $derived(
+    meta?.kind === 'group' && meta.field === '' && leafField ? String(row[leafField] ?? '') : meta?.kind === 'group' ? meta.key : '',
+  )
+</script>
+
+{#if meta && meta.kind === 'group' && meta.expandable === false}
+  <!-- Nothing opens beneath it (the innermost level under a server pivot),
+       so no expander: the key and the count, indented like its siblings. -->
+  <span class="sv-group-cell sv-group-cell-leaf" style={`padding-inline-start: ${meta.level * indent}px`}>
+    <span class="sv-group-chev sv-group-chev-none" aria-hidden="true"></span>
+    <span class="sv-group-key">{label}</span>
+    {#if meta.childCount != null}<span class="sv-group-count">({num(meta.childCount)})</span>{/if}
+  </span>
+{:else if meta && meta.kind === 'group'}
+  <!-- The button's accessible name is the group itself ("Germany (1,234)");
+       expanded and busy are states, on aria-expanded / aria-busy, so a
+       screen reader hears what it is opening rather than "Expand group". -->
+  <button
+    type="button"
+    class="sv-group-cell"
+    style={`padding-inline-start: ${meta.level * indent}px`}
+    aria-expanded={meta.expanded}
+    aria-busy={meta.loading ? 'true' : undefined}
+    onclick={() => onToggle(row)}
+  >
+    {#if meta.loading}
+      <!-- The level's block is in flight: the expander's slot holds a
+           spinner until it lands, so the wait is visible on the row itself. -->
+      <span class="sv-group-chev sv-group-spinner" aria-hidden="true"></span>
+    {:else}
+      <!-- Same chevron the grid's own expanders and SvTree draw, so every
+           expander in the library looks identical. -->
+      <span class="sv-group-chev" class:open={meta.expanded} aria-hidden="true">
+        {#if chevron}
+          {@render chevron()}
+        {:else}
+          <svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor"
+            stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6" /></svg>
+        {/if}
+      </span>
+    {/if}
+    <span class="sv-group-key">{label}</span>
+    {#if meta.childCount != null}<span class="sv-group-count">({num(meta.childCount)})</span>{/if}
+  </button>
+{:else if meta && meta.kind === 'more'}
+  <!-- aria-disabled rather than disabled: a disabled button drops keyboard
+       focus the moment it is pressed, and this one is pressed to wait. -->
+  <button
+    type="button"
+    class="sv-group-more"
+    style={`padding-inline-start: ${meta.level * indent}px`}
+    aria-disabled={meta.loading ? 'true' : undefined}
+    aria-busy={meta.loading ? 'true' : undefined}
+    onclick={() => {
+      if (!meta.loading) onToggle(row)
+    }}
+  >
+    {meta.loading ? m.loading : fillMessage(m.loadMore, { count: num(meta.remaining) })}
+  </button>
+{:else if meta && meta.kind === 'footer'}
+  <span class="sv-group-footer" style={`padding-inline-start: ${meta.level * indent}px`}>{fillMessage(m.total, { label: meta.key })}</span>
+{:else if meta && meta.kind === 'skeleton'}
+  <span class="sv-group-skeleton" style={`margin-inline-start: ${meta.level * indent}px`} aria-hidden="true"></span>
+{:else if meta && meta.kind === 'grandTotal'}
+  <span class="sv-group-footer sv-group-grand-total">{m.grandTotal}</span>
+{:else if meta && meta.kind === 'placeholder'}
+  <!-- The grid draws placeholder rows itself; nothing to add here. -->
+{:else if meta}
+  <span class="sv-group-leaf" style={`padding-inline-start: ${(meta.level + 1) * indent}px`}>
+    {leafField ? (row[leafField] ?? '') : ''}
+  </span>
+{/if}
+
+<style>
+  .sv-group-cell {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    background: none;
+    border: 0;
+    padding: 0;
+    font: inherit;
+    color: inherit;
+    cursor: pointer;
+    border-radius: 3px;
+  }
+  .sv-group-cell-leaf { cursor: default; }
+  /* The same ring the grid's own tree toggle draws, so keyboard focus looks
+     alike whichever expander it lands on. */
+  .sv-group-cell:focus-visible,
+  .sv-group-more:focus-visible {
+    outline: 2px solid var(--sg-accent, #2563eb);
+    outline-offset: 2px;
+  }
+  .sv-group-chev {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 12px;
+    height: 12px;
+    transition: transform 0.15s;
+    color: var(--sg-muted, #64748b);
+  }
+  /* An `icons` override renders inside this wrapper, and this style block is
+     scoped, so its markup needs :global() to be reached. Sizing it here means
+     a custom chevron lands in the same box as the built-in and rotates with
+     the wrapper rather than needing to know the rule exists. */
+  .sv-group-chev :global(svg),
+  .sv-group-chev :global(img) {
+    width: 100%;
+    height: 100%;
+    display: block;
+  }
+  .sv-group-chev.open { transform: rotate(90deg); }
+  .sv-group-key { font-weight: 600; }
+  .sv-group-count { color: var(--sg-muted, #64748b); font-size: 12px; }
+  .sv-group-spinner {
+    box-sizing: border-box;
+    border-radius: 50%;
+    border: 2px solid color-mix(in srgb, var(--sg-muted, #64748b) 35%, transparent);
+    border-top-color: var(--sg-accent, #2563eb);
+    animation: sv-group-spin 0.8s linear infinite;
+  }
+  @keyframes sv-group-spin {
+    to { transform: rotate(360deg); }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .sv-group-spinner { animation: none; border-top-color: var(--sg-muted, #64748b); }
+  }
+  .sv-group-leaf { color: var(--sg-muted, #64748b); }
+  .sv-group-more {
+    background: none;
+    border: 0;
+    padding: 0;
+    font: inherit;
+    font-size: 13px;
+    color: var(--sg-accent, #2563eb);
+    cursor: pointer;
+    border-radius: 3px;
+  }
+  .sv-group-more[aria-disabled='true'] { color: var(--sg-muted, #64748b); cursor: default; }
+  .sv-group-footer { font-weight: 600; color: var(--sg-muted, #64748b); font-size: 12px; text-transform: uppercase; letter-spacing: 0.03em; }
+  .sv-group-skeleton {
+    display: inline-block;
+    width: 60%;
+    height: 10px;
+    border-radius: 5px;
+    background: linear-gradient(90deg, var(--sg-border, #e2e8f0) 25%, var(--sg-header-bg, #f1f5f9) 50%, var(--sg-border, #e2e8f0) 75%);
+    background-size: 200% 100%;
+    animation: sv-group-shimmer 1.2s infinite;
+  }
+  @keyframes sv-group-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
+  @media (prefers-reduced-motion: reduce) { .sv-group-skeleton { animation: none; } }
+</style>

package/dist/server/SvGroupCell.svelte.d.ts

@@ -0,0 +1,62 @@
+import type { GridIcons, ServerDisplayRow, ServerPlaceholderRow } from '@svgrid/grid';
+import { type ServerGroupMessages } from './messages.js';
+declare function $$render<TData>(): {
+    props: {
+        /** The grid row from `serverGroupRows` (carries the `__group` marker). */
+        row: {
+            __group?: ServerDisplayRow<TData> | ServerPlaceholderRow;
+        } & Record<string, unknown>;
+        /**
+         * Expand / collapse a group, or load more children. Receives the grid row;
+         * wire to `serverGroupNav(ctl).onToggle` (which drives clicks and keyboard).
+         */
+        onToggle: (row: {
+            __group?: ServerDisplayRow<TData> | ServerPlaceholderRow;
+        } & Record<string, unknown>) => void;
+        /**
+         * Field to show for leaf rows in the group column (blank if omitted).
+         * Under `treeData` every row is a node of the same shape, so it names
+         * the label of expandable nodes too; a group row's key is otherwise
+         * the text.
+         */
+        leafField?: string;
+        /** Pixels of indentation per level. Default 18. */
+        indent?: number;
+        /**
+         * Icon overrides, the same map `<SvGrid icons>` takes. Only
+         * `chevron-right` is drawn here. You mount this component yourself, so it
+         * cannot inherit the grid's icons - pass the same object to both to keep
+         * the expander consistent with the rest of the chrome.
+         */
+        icons?: GridIcons;
+        /**
+         * Strings, for localization: the "load more" row, the footer and grand
+         * total labels. Partial; missing keys keep the English default. Pass the
+         * same map to `SvRowGroupPanel` and `serverGroupText`.
+         */
+        messages?: Partial<ServerGroupMessages>;
+        /** Locale for the child count and the "load more" number. Default: the browser's. */
+        locale?: string | ReadonlyArray<string>;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<TData> {
+    props(): ReturnType<typeof $$render<TData>>['props'];
+    events(): ReturnType<typeof $$render<TData>>['events'];
+    slots(): ReturnType<typeof $$render<TData>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <TData>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TData>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TData>['props']>, ReturnType<__sveltets_Render<TData>['events']>, ReturnType<__sveltets_Render<TData>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<TData>['bindings']>;
+    } & ReturnType<__sveltets_Render<TData>['exports']>;
+    <TData>(internal: unknown, props: ReturnType<__sveltets_Render<TData>['props']> & {}): ReturnType<__sveltets_Render<TData>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const SvGroupCell: $$IsomorphicComponent;
+type SvGroupCell<TData> = InstanceType<typeof SvGroupCell<TData>>;
+export default SvGroupCell;

package/dist/server/SvRowGroupPanel.svelte

@@ -0,0 +1,322 @@
+<!--
+  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">
+  import { untrack } from 'svelte'
+  import { GRID_ICON_GLYPHS, type GridIconName, type GridIcons } from '@svgrid/grid'
+  import { fillMessage, resolveServerGroupMessages, type ServerGroupMessages } from './messages'
+
+  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. Default: `messages.dropHere`. */
+    placeholder?: string
+    /**
+     * Icon overrides, the same map `<SvGrid icons>` takes. This panel draws
+     * `drag-handle`, `remove` and `breadcrumb-separator`. You mount it
+     * yourself, so pass the same object you gave the grid to keep them
+     * consistent.
+     */
+    icons?: GridIcons
+    /**
+     * `'immediate'` (default) calls `onChange` on every edit. `'deferred'`
+     * collects edits in the panel and shows Apply / Cancel, so a server
+     * model reloads once per session of changes rather than once per chip.
+     */
+    applyMode?: 'immediate' | 'deferred'
+    /**
+     * Strings, for localization. Partial; missing keys keep the English
+     * default. Pass the same map to `SvGroupCell`.
+     */
+    messages?: Partial<ServerGroupMessages>
+  }
+  let {
+    columns,
+    groupBy,
+    onChange,
+    placeholder,
+    icons,
+    applyMode = 'immediate',
+    messages,
+  }: Props = $props()
+  const m = $derived(resolveServerGroupMessages(messages))
+
+  // Deferred mode edits a local copy; a `groupBy` that changes from outside
+  // wins over it (a change from elsewhere drops what was pending here). By
+  // value, not by identity: a server row model hands out a fresh array on
+  // every emit, and a block landing must not throw away un-applied chips.
+  let pending = $state<string[] | null>(null)
+  let seen = untrack(() => JSON.stringify(groupBy))
+  $effect(() => {
+    const now = JSON.stringify(groupBy)
+    if (now === seen) return
+    seen = now
+    pending = null
+  })
+  const shown = $derived(pending ?? groupBy)
+  const dirty = $derived(pending !== null && JSON.stringify(pending) !== JSON.stringify(groupBy))
+  function commit(next: string[]) {
+    if (applyMode === 'deferred') pending = next
+    else onChange(next)
+  }
+  function apply() {
+    if (!pending) return
+    const next = pending
+    pending = null
+    onChange(next)
+  }
+  function cancel() {
+    pending = null
+  }
+
+  const labelOf = (id: string) => columns.find((c) => c.id === id)?.label ?? id
+  const available = $derived(columns.filter((c) => !shown.includes(c.id)))
+
+  let dragIndex = $state<number | null>(null)
+  /** Where a dragged chip would land, for the insertion mark. */
+  let dropIndex = $state<number | null>(null)
+  /** What a keyboard reorder just did, for the live region. */
+  let announcement = $state('')
+
+  function remove(id: string) {
+    commit(shown.filter((g) => g !== id))
+  }
+  function add(id: string) {
+    if (id && !shown.includes(id)) commit([...shown, id])
+  }
+  function reorder(to: number) {
+    dropIndex = null
+    if (dragIndex === null || dragIndex === to) {
+      dragIndex = null
+      return
+    }
+    const next = [...shown]
+    const [moved] = next.splice(dragIndex, 1)
+    next.splice(to, 0, moved!)
+    dragIndex = null
+    commit(next)
+  }
+  function onPanelDrop(e: DragEvent) {
+    e.preventDefault()
+    const id = e.dataTransfer?.getData('text/sv-column')
+    if (id) add(id)
+  }
+  function onChipDragStart(e: DragEvent, i: number) {
+    dragIndex = i
+    // Firefox starts no drag without data on the transfer.
+    if (e.dataTransfer) {
+      e.dataTransfer.setData('text/plain', shown[i] ?? '')
+      e.dataTransfer.effectAllowed = 'move'
+    }
+  }
+  /** 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 >= shown.length) return
+    const id = shown[i]!
+    dragIndex = i
+    reorder(to)
+    announcement = fillMessage(m.movedTo, { label: labelOf(id), index: to + 1, total: shown.length })
+  }
+  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>
+
+<!-- Same override-or-default resolution SvGrid uses, kept local because this
+     component is mounted by the consumer and never sees the grid's snippet. -->
+{#snippet ic(name: GridIconName)}
+  {@const override = icons?.[name]}
+  {#if override}{@render override()}{:else}{GRID_ICON_GLYPHS[name]}{/if}
+{/snippet}
+
+<div
+  class="sv-rowgroup-panel"
+  role="group"
+  aria-label={m.rowGroups}
+  ondragover={(e) => e.preventDefault()}
+  ondrop={onPanelDrop}
+>
+  <span class="sv-rgp-label" aria-hidden="true">{m.groupBy}</span>
+  {#if shown.length === 0}
+    <span class="sv-rgp-empty">{placeholder ?? m.dropHere}</span>
+  {:else}
+    {#each shown as id, i (id)}
+      {#if i > 0}<span class="sv-rgp-sep" aria-hidden="true">{@render ic('breadcrumb-separator')}</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}
+        class:sv-rgp-chip-drop={dropIndex === i && dragIndex !== i}
+        role="group"
+        tabindex="0"
+        aria-label={fillMessage(m.groupedBy, { label: labelOf(id), index: i + 1, total: shown.length })}
+        draggable="true"
+        ondragstart={(e) => onChipDragStart(e, i)}
+        ondragend={() => {
+          dragIndex = null
+          dropIndex = null
+        }}
+        ondragover={(e) => {
+          e.preventDefault()
+          if (dragIndex !== null) dropIndex = i
+        }}
+        ondragleave={() => {
+          if (dropIndex === i) dropIndex = null
+        }}
+        ondrop={(e) => {
+          // Handled here: without preventDefault Firefox opens the dropped
+          // text as a URL.
+          e.preventDefault()
+          e.stopPropagation()
+          reorder(i)
+        }}
+        onkeydown={(e) => onChipKeydown(e, i)}
+      >
+        <span class="sv-rgp-grip" aria-hidden="true">{@render ic('drag-handle')}</span>
+        {labelOf(id)}
+        <button type="button" class="sv-rgp-x" onclick={() => remove(id)} aria-label={fillMessage(m.stopGroupingBy, { label: labelOf(id) })}>{@render ic('remove')}</button>
+      </span>
+    {/each}
+  {/if}
+  {#if available.length}
+    <select
+      class="sv-rgp-add"
+      aria-label={m.addGroupLabel}
+      onchange={(e) => { add(e.currentTarget.value); e.currentTarget.value = '' }}
+    >
+      <option value="">{m.addGroup}</option>
+      {#each available as c (c.id)}<option value={c.id}>{c.label}</option>{/each}
+    </select>
+  {/if}
+  {#if applyMode === 'deferred'}
+    <span class="sv-rgp-apply" role="group" aria-label={m.applyGrouping}>
+      <button type="button" class="sv-rgp-btn sv-rgp-btn-primary" disabled={!dirty} onclick={apply}>{m.apply}</button>
+      <button type="button" class="sv-rgp-btn" disabled={!dirty} onclick={cancel}>{m.cancel}</button>
+    </span>
+  {/if}
+  <span class="sv-rgp-live" aria-live="polite">{announcement}</span>
+</div>
+
+<style>
+  .sv-rowgroup-panel {
+    position: relative;
+    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; }
+  /* Where the dragged chip will land: an accent edge on the chip it displaces. */
+  .sv-rgp-chip-drop { box-shadow: -3px 0 0 0 var(--sg-accent, #2563eb); }
+  .sv-rgp-grip { color: var(--sg-muted, #94a3b8); cursor: grab; }
+  .sv-rgp-x {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 24px;
+    margin: -4px -4px -4px 0;
+    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;
+  }
+  .sv-rgp-apply { display: inline-flex; gap: 6px; margin-left: auto; }
+  .sv-rgp-btn {
+    font: inherit;
+    font-size: 13px;
+    padding: 4px 10px;
+    border-radius: 8px;
+    border: 1px solid var(--sg-border, #e2e8f0);
+    background: var(--sg-bg, #fff);
+    color: var(--sg-fg, #0f172a);
+    cursor: pointer;
+  }
+  .sv-rgp-btn-primary {
+    background: var(--sg-accent, #2563eb);
+    border-color: var(--sg-accent, #2563eb);
+    color: var(--sg-on-accent, #fff);
+  }
+  .sv-rgp-btn:disabled { opacity: 0.5; cursor: default; }
+  /* Apply with nothing to apply reads as off, not as a paler Apply. */
+  .sv-rgp-btn-primary:disabled {
+    opacity: 1;
+    background: var(--sg-header-bg, #f1f5f9);
+    border-color: var(--sg-border, #e2e8f0);
+    color: var(--sg-muted, #64748b);
+  }
+  .sv-rgp-chip:focus-visible,
+  .sv-rgp-x:focus-visible,
+  .sv-rgp-add:focus-visible,
+  .sv-rgp-btn:focus-visible {
+    outline: 2px solid var(--sg-accent, #2563eb);
+    outline-offset: 2px;
+  }
+  /* The live region reads to a screen reader and takes no space. */
+  .sv-rgp-live {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    clip: rect(0 0 0 0);
+    white-space: nowrap;
+  }
+</style>

package/dist/server/SvRowGroupPanel.svelte.d.ts

@@ -0,0 +1,37 @@
+import { type GridIcons } from '@svgrid/grid';
+import { type ServerGroupMessages } from './messages.js';
+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. Default: `messages.dropHere`. */
+    placeholder?: string;
+    /**
+     * Icon overrides, the same map `<SvGrid icons>` takes. This panel draws
+     * `drag-handle`, `remove` and `breadcrumb-separator`. You mount it
+     * yourself, so pass the same object you gave the grid to keep them
+     * consistent.
+     */
+    icons?: GridIcons;
+    /**
+     * `'immediate'` (default) calls `onChange` on every edit. `'deferred'`
+     * collects edits in the panel and shows Apply / Cancel, so a server
+     * model reloads once per session of changes rather than once per chip.
+     */
+    applyMode?: 'immediate' | 'deferred';
+    /**
+     * Strings, for localization. Partial; missing keys keep the English
+     * default. Pass the same map to `SvGroupCell`.
+     */
+    messages?: Partial<ServerGroupMessages>;
+};
+declare const SvRowGroupPanel: import("svelte").Component<Props, {}, "">;
+type SvRowGroupPanel = ReturnType<typeof SvRowGroupPanel>;
+export default SvRowGroupPanel;

package/dist/server/enable.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Turn on the Enterprise server-side row model. Idempotent. Also invoked by
+ * {@link installEnterprise}, so wiring the Pro API covers it.
+ *
+ * Calling it is optional: the model factories nudge on their own first call
+ * (see {@link nudgeServerRowModel}), so an app that only imports
+ * `createServerRowModel` is still gated.
+ */
+export declare function enableServerRowModel(): void;
+/**
+ * Raise the unlicensed nudge from a model factory. Shares the `enabled` latch with
+ * {@link enableServerRowModel} so an app that calls both (or constructs many
+ * models) still gets exactly one nudge.
+ *
+ * @internal
+ */
+export declare function nudgeServerRowModel(): void;