@svgrid/enterprise 3.0.0 → 3.0.2

package/dist/studio/scaffold.js

@@ -123,13 +123,13 @@ export function scaffold(schema, options = {}) {
     const schemaFile = {
         path: `src/lib/${route}.schema.ts`,
         description: 'Entity schema + row type. Re-add any Standard Schema `validate` functions here by hand.',
-        contents: `import type { EntitySchema } from '@svgrid/enterprise'
-
-${managed(`export type ${rowType} = {
-${rowFields}
-}
-
-${schemaLiteral(schema, constName, rowType)}`)}
+        contents: `import type { EntitySchema } from '@svgrid/enterprise'
+
+${managed(`export type ${rowType} = {
+${rowFields}
+}
+
+${schemaLiteral(schema, constName, rowType)}`)}
 `,
     };
     // 2. The API route: SvelteKit +server.ts using the transport handlers.
@@ -140,53 +140,53 @@ ${schemaLiteral(schema, constName, rowType)}`)}
     let serverDescription;
     if (driver) {
         // Fully-connected route: driver + DATABASE_URL, no manual editing needed.
-        serverImport = `${driver.imports}
+        serverImport = `${driver.imports}
 import { createKitHandlers, createSqlDataSource } from '@svgrid/enterprise'`;
-        serverBody = `${driver.setup}
-
-const source = createSqlDataSource<${rowType}>({
-  schema: ${constName},
-  table: ${JSON.stringify(schema.name)},${driver.dialectArg}
-  execute: async (text, params) => {
-    ${driver.execBody}
-  },
-})
-
+        serverBody = `${driver.setup}
+
+const source = createSqlDataSource<${rowType}>({
+  schema: ${constName},
+  table: ${JSON.stringify(schema.name)},${driver.dialectArg}
+  execute: async (text, params) => {
+    ${driver.execBody}
+  },
+})
+
 export const { POST } = createKitHandlers({ schema: ${constName}, source })`;
         serverDescription = `API route connected to your ${dataSource} database via process.env.DATABASE_URL.`;
     }
     else if (dataSource === 'sql') {
         serverImport = `import { createKitHandlers, createSqlDataSource } from '@svgrid/enterprise'`;
-        serverBody = `// Wire execute() to your SQL client: run \`text\` with \`params\`, return the rows.
-// Works with Drizzle (db.execute), postgres.js, better-sqlite3, mysql2, ...
-const source = createSqlDataSource<${rowType}>({
-  schema: ${constName},
-  table: ${JSON.stringify(schema.name)},
-  dialect: { placeholders: '$', ilike: true },
-  execute: async (text, params) => {
-    throw new Error('TODO: run the query with your database client and return the rows.')
-  },
-})
-
+        serverBody = `// Wire execute() to your SQL client: run \`text\` with \`params\`, return the rows.
+// Works with Drizzle (db.execute), postgres.js, better-sqlite3, mysql2, ...
+const source = createSqlDataSource<${rowType}>({
+  schema: ${constName},
+  table: ${JSON.stringify(schema.name)},
+  dialect: { placeholders: '$', ilike: true },
+  execute: async (text, params) => {
+    throw new Error('TODO: run the query with your database client and return the rows.')
+  },
+})
+
 export const { POST } = createKitHandlers({ schema: ${constName}, source })`;
         serverDescription = 'API route. Fill in execute() with your SQL client (Drizzle / postgres.js / ...).';
     }
     else {
         serverImport = `import { createInMemoryDataSource, createKitHandlers } from '@svgrid/enterprise'`;
-        serverBody = `// Starts empty and in-memory so the screen runs immediately. Swap this for
-// a database-backed source (scaffold with dataSource:"sql" or a dialect) when ready.
-const source = createInMemoryDataSource<${rowType}>([], ${constName})
-
+        serverBody = `// Starts empty and in-memory so the screen runs immediately. Swap this for
+// a database-backed source (scaffold with dataSource:"sql" or a dialect) when ready.
+const source = createInMemoryDataSource<${rowType}>([], ${constName})
+
 export const { POST } = createKitHandlers({ schema: ${constName}, source })`;
         serverDescription = 'API route using an in-memory source. Scaffold with a dialect for a real database.';
     }
     const serverFile = {
         path: `src/routes${apiRoute}/+server.ts`,
         description: serverDescription,
-        contents: `${serverImport}
-import { ${constName}, type ${rowType} } from '${schemaImport}'
-
-${managed(serverBody)}
+        contents: `${serverImport}
+import { ${constName}, type ${rowType} } from '${schemaImport}'
+
+${managed(serverBody)}
 `,
     };
     // Relation (foreign-key) fields become searchable lookups in the edit form.
@@ -198,9 +198,9 @@ ${managed(serverBody)}
         .map((f) => {
         const name = `${camel(f.field)}Lookup`;
         const endpoint = JSON.stringify(`/api/${f.relation.entity}`);
-        return `  const ${name} = createRelationLookup<Record<string, unknown>>({
-    source: createKitDataSource({ endpoint: ${endpoint} }),
-    labelField: ${JSON.stringify(f.relation.labelField)},
+        return `  const ${name} = createRelationLookup<Record<string, unknown>>({
+    source: createKitDataSource({ endpoint: ${endpoint} }),
+    labelField: ${JSON.stringify(f.relation.labelField)},
   })`;
     })
         .join('\n');
@@ -210,121 +210,121 @@ ${managed(serverBody)}
     const lookupsSection = hasLookups ? `\n\n${lookupDecls}\n${lookupsMap}` : '';
     // 3. The page: a full data screen - search, server sort + paging,
     //    multi-select delete (optimistic), create/edit, loading/error/empty.
-    const pageBody = `  const source = createKitDataSource<${rowType}>({ endpoint: '${apiRoute}' })
-  const columns = schemaToColumns(${constName})${lookupsSection}
-
-  let state = $state<ServerState<${rowType}>>({
-    rows: [], total: 0, loading: false, saving: false, error: null,
-    pageIndex: 0, pageSize: 25, pageCount: 1, sortModel: [], filterModel: {},
-  })
-  const controller = createServerDataSource<${rowType}>(source, {
-    pageSize: 25,
-    optimistic: true,
-    getRowId: (r) => String(r.${idField}),
-    onChange: (s) => (state = s),
-  })
-  controller.refresh()
-
-  let selected = $state<${rowType}[]>([])
-  let editing = $state<${rowType} | null | undefined>(undefined) // undefined = closed, null = create
-
-  async function save({ mode, id, values }: { mode: 'create' | 'edit'; id: string | null; values: Partial<${rowType}> }) {
-    if (mode === 'create') {
-      await controller.createRow(values)
-      controller.setPage(state.pageCount - 1) // jump to the new row (appended at the end)
-    } else if (id) {
-      await controller.updateRow(id, values)
-    }
-    editing = undefined
-  }
-
-  async function removeSelected() {
-    for (const row of selected) await controller.deleteRow(String(row.${idField}))
-    selected = []
+    const pageBody = `  const source = createKitDataSource<${rowType}>({ endpoint: '${apiRoute}' })
+  const columns = schemaToColumns(${constName})${lookupsSection}
+
+  let state = $state<ServerState<${rowType}>>({
+    rows: [], total: 0, loading: false, saving: false, error: null,
+    pageIndex: 0, pageSize: 25, pageCount: 1, sortModel: [], filterModel: {},
+  })
+  const controller = createServerDataSource<${rowType}>(source, {
+    pageSize: 25,
+    optimistic: true,
+    getRowId: (r) => String(r.${idField}),
+    onChange: (s) => (state = s),
+  })
+  controller.refresh()
+
+  let selected = $state<${rowType}[]>([])
+  let editing = $state<${rowType} | null | undefined>(undefined) // undefined = closed, null = create
+
+  async function save({ mode, id, values }: { mode: 'create' | 'edit'; id: string | null; values: Partial<${rowType}> }) {
+    if (mode === 'create') {
+      await controller.createRow(values)
+      controller.setPage(state.pageCount - 1) // jump to the new row (appended at the end)
+    } else if (id) {
+      await controller.updateRow(id, values)
+    }
+    editing = undefined
+  }
+
+  async function removeSelected() {
+    for (const row of selected) await controller.deleteRow(String(row.${idField}))
+    selected = []
   }`;
     const pageFile = {
         path: `src/routes/${route}/+page.svelte`,
         description: 'The data screen: sort, filter, search, paging, multi-select delete, and create/edit - wired to the API route.',
-        contents: `<script lang="ts">
-  import { SvGrid, createServerDataSource } from '@svgrid/grid'
-  import {
-    SvGridEditPanel,
-    createKitDataSource,${hasLookups ? '\n    createRelationLookup,' : ''}
-    schemaToColumns,
-    type ServerState,
-  } from '@svgrid/enterprise'
-  import { ${constName}, type ${rowType} } from '${schemaImport}'
-
-${managed(pageBody)}
-</script>
-
-<svelte:head><style>
-${themeTokenCss({ preset: options.theme, mode: options.dark ? 'dark' : 'light' }, { layer: 'svgrid-studio' })}
-</style></svelte:head>
-
-<div class="page">
-  <header class="page__toolbar">
-    <h2 class="page__title">${label}</h2>
-    <div class="page__actions">
-      <button onclick={() => (editing = null)}>New</button>
-      <button disabled={selected.length === 0} onclick={removeSelected}>
-        Delete {selected.length > 0 ? '(' + selected.length + ')' : ''}
-      </button>
-    </div>
-  </header>
-
-  {#if state.error}<p class="page__error" role="alert">{state.error}</p>{/if}
-
-  <SvGrid
-    data={state.rows}
-    {columns}
-    loading={state.loading}
-    loadingOverlay
-    fitColumns
-    enableRowSummaries={false}
-    showRowSelection
-    enableCellSelection
-    sortable
-    externalSort
-    onSortingChange={(s) => controller.setSort(s)}
-    filterable
-    showGlobalFilter
-    externalFilter
-    onFiltersChange={(f) =>
-      controller.setFilter({
-        global: f.global || undefined,
-        columns: Object.fromEntries(
-          f.columns.map((c) => [c.id, { operator: c.operator, value: c.value, valueTo: c.valueTo, selectedValues: c.selectedValues }]),
-        ),
-      })}
-    onRowClick={(e) => (editing = e.row)}
-    onRowSelectionChange={(_sel, rows) => (selected = rows)}
-    showPagination
-    externalPagination
-    rowCount={state.total}
-    pageIndex={state.pageIndex}
-    pageSize={state.pageSize}
-    onPaginationChange={({ pageIndex, pageSize }) => {
-      if (pageSize !== state.pageSize) controller.setPageSize(pageSize)
-      else controller.setPage(pageIndex)
-    }}
-    emptyMessage="No ${label} yet"
-    containerHeight={480}
-  />
-
-  {#if editing !== undefined}
-    <SvGridEditPanel schema={${constName}} row={editing} ${hasLookups ? 'lookups={lookups} ' : ''}onSubmit={save} onCancel={() => (editing = undefined)} />
-  {/if}
-</div>
-
-<style>
-  .page { display: flex; flex-direction: column; gap: 12px; }
-  .page__toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
-  .page__title { margin: 0; font-size: 18px; font-weight: 600; }
-  .page__actions { display: flex; gap: 8px; }
-  .page__actions button { padding: 7px 12px; border: 1px solid #ccc; border-radius: 6px; background: #fff; cursor: pointer; }
-  .page__error { margin: 0; padding: 8px 12px; color: #b3261e; background: #fdecea; border-radius: 6px; }
-</style>
+        contents: `<script lang="ts">
+  import { SvGrid, createServerDataSource } from '@svgrid/grid'
+  import {
+    SvGridEditPanel,
+    createKitDataSource,${hasLookups ? '\n    createRelationLookup,' : ''}
+    schemaToColumns,
+    type ServerState,
+  } from '@svgrid/enterprise'
+  import { ${constName}, type ${rowType} } from '${schemaImport}'
+
+${managed(pageBody)}
+</script>
+
+<svelte:head><style>
+${themeTokenCss({ preset: options.theme, mode: options.dark ? 'dark' : 'light' }, { layer: 'svgrid-studio' })}
+</style></svelte:head>
+
+<div class="page">
+  <header class="page__toolbar">
+    <h2 class="page__title">${label}</h2>
+    <div class="page__actions">
+      <button onclick={() => (editing = null)}>New</button>
+      <button disabled={selected.length === 0} onclick={removeSelected}>
+        Delete {selected.length > 0 ? '(' + selected.length + ')' : ''}
+      </button>
+    </div>
+  </header>
+
+  {#if state.error}<p class="page__error" role="alert">{state.error}</p>{/if}
+
+  <SvGrid
+    data={state.rows}
+    {columns}
+    loading={state.loading}
+    loadingOverlay
+    fitColumns
+    enableRowSummaries={false}
+    showRowSelection
+    enableCellSelection
+    sortable
+    externalSort
+    onSortingChange={(s) => controller.setSort(s)}
+    filterable
+    showGlobalFilter
+    externalFilter
+    onFiltersChange={(f) =>
+      controller.setFilter({
+        global: f.global || undefined,
+        columns: Object.fromEntries(
+          f.columns.map((c) => [c.id, { operator: c.operator, value: c.value, valueTo: c.valueTo, selectedValues: c.selectedValues }]),
+        ),
+      })}
+    onRowClick={(e) => (editing = e.row)}
+    onRowSelectionChange={(_sel, rows) => (selected = rows)}
+    showPagination
+    externalPagination
+    rowCount={state.total}
+    pageIndex={state.pageIndex}
+    pageSize={state.pageSize}
+    onPaginationChange={({ pageIndex, pageSize }) => {
+      if (pageSize !== state.pageSize) controller.setPageSize(pageSize)
+      else controller.setPage(pageIndex)
+    }}
+    emptyMessage="No ${label} yet"
+    containerHeight={480}
+  />
+
+  {#if editing !== undefined}
+    <SvGridEditPanel schema={${constName}} row={editing} ${hasLookups ? 'lookups={lookups} ' : ''}onSubmit={save} onCancel={() => (editing = undefined)} />
+  {/if}
+</div>
+
+<style>
+  .page { display: flex; flex-direction: column; gap: 12px; }
+  .page__toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
+  .page__title { margin: 0; font-size: 18px; font-weight: 600; }
+  .page__actions { display: flex; gap: 8px; }
+  .page__actions button { padding: 7px 12px; border: 1px solid #ccc; border-radius: 6px; background: #fff; cursor: pointer; }
+  .page__error { margin: 0; padding: 8px 12px; color: #b3261e; background: #fdecea; border-radius: 6px; }
+</style>
 `,
     };
     return { files: [schemaFile, serverFile, pageFile] };

package/dist/studio/ui-components.d.ts

@@ -82,6 +82,13 @@ export declare const GRID_CURATED_PROPS: ReadonlySet<string>;
 /** The Grid's raw prop surface for the "All properties" panel: every extracted SvGrid
  *  prop the curated controls do NOT already manage. Sorted by group then label. */
 export declare function gridPropSurface(): UiComponentProp[];
+/** Split the grid's icon catalogue into the picker's display groups, in order,
+ *  dropping any that came out empty. Takes the names rather than importing them so
+ *  the studio metadata module stays free of a runtime dependency on the grid. */
+export declare function gridIconGroups<T extends string>(names: readonly T[]): Array<{
+    label: string;
+    names: T[];
+}>;
 /** The Grid props settable at runtime through `ctx.grid.<prop> = value` (backed by
  *  `api.setOption`): the full extracted SvGrid surface minus controller-owned /
  *  seed-once props and function/snippet props. Drives the `ctx.grid` type + the code

package/dist/studio/ui-components.generated.js

@@ -7021,11 +7021,34 @@ export const GENERATED_UI_SURFACE = {
                 "description": "Prepend a header row (the column labels) to copied cell ranges, so pasting into Excel / Sheets includes the headers. Applies per copied range.",
                 "group": "common"
             },
+            {
+                "key": "processCellForFill",
+                "label": "Process Cell For Fill",
+                "type": "json",
+                "description": "Decide what the fill handle writes into one cell, ahead of the grid's own pattern rules (series, weekdays, \"Item 1\"). Receives the source cell's value and how far the target sits from it; return the value to write, or `undefined` to let the pattern decide. A spreadsheet uses it to move a formula's references by the distance filled, which the pattern rules would otherwise mangle (\"=A1+B1\" reads as \"Item 1\").",
+                "code": true,
+                "group": "advanced"
+            },
             {
                 "key": "processCellForClipboard",
                 "label": "Process Cell For Clipboard",
                 "type": "json",
-                "description": "Transform each cell value on its way to the clipboard - e.g. strip currency symbols, expand codes to labels, or redact. Receives the display value plus the row/column context; return the string (or value) to copy.",
+                "code": true,
+                "group": "advanced"
+            },
+            {
+                "key": "clipboardHtml",
+                "label": "Clipboard Html",
+                "type": "json",
+                "description": "An HTML rendering of what Ctrl+C copies, written to the clipboard as `text/html` beside the TSV. Excel and Google Sheets read the HTML first, so a table with inline styles pastes into them with its formats, and the same markup can carry what the text cannot (a formula in a `data-` attribute) for a round trip back into a grid that reads it. Called after every cell has been through `processCellForClipboard`, with the rectangles copied and the text about to be written. Return nothing to write text alone. Runs synchronously inside the key press, which is what the clipboard needs.",
+                "code": true,
+                "group": "advanced"
+            },
+            {
+                "key": "processCellFromClipboard",
+                "label": "Process Cell From Clipboard",
+                "type": "json",
+                "description": "Transform each cell on its way IN from the clipboard, before the grid coerces it for the column's editor. Symmetric with `processCellForClipboard`: the pair is what lets a round trip survive. Receives the raw clipboard text for the cell plus where it is landing. Return the value to write, or `undefined` to leave the cell untouched. This is also the seam a feature pack uses to take over a paste entirely: `@svgrid/enterprise`'s paste-special reads the clipboard's `text/html` for formats and formulas and writes through here.",
                 "code": true,
                 "group": "advanced"
             },
@@ -7036,6 +7059,13 @@ export const GENERATED_UI_SURFACE = {
                 "description": "Inline cell editing: F2 or double-click opens an editor in the active cell, Enter commits, Esc cancels. Off by default. A column still needs an `editorType` to pick its editor (text, number, date, checkbox, list, ...); without one it gets a plain text editor. `editable` is the shortcut alias and wins over this.",
                 "group": "common"
             },
+            {
+                "key": "editOnSecondClick",
+                "label": "Edit On Second Click",
+                "type": "boolean",
+                "description": "A click on the cell that is already active opens its editor, the way a second click on a selected file name starts renaming it. On by default. A spreadsheet turns it off: Excel edits on double-click or F2 only, and a user clicking the cell they are on to get back to it after a dialog would otherwise find the next shortcut typed into an editor.",
+                "group": "common"
+            },
             {
                 "key": "fullRowEditing",
                 "label": "Full Row Editing",
@@ -7244,6 +7274,20 @@ export const GENERATED_UI_SURFACE = {
                 "description": "Rows to pin to the TOP of the grid - rendered above the regular rows and sticky-positioned so they stay visible while the user scrolls. Typical use: a \"totals\" or \"headline\" row that should always be in view. Rows are read-only (no inline editing, no row-selection checkbox). They share the column schema with the main grid; field/format/cell/cellClass all apply.",
                 "group": "common"
             },
+            {
+                "key": "frozenRows",
+                "label": "Frozen Rows",
+                "type": "number",
+                "description": "Freeze the first N rows: they stay under the header while the body scrolls, and unlike `pinnedTopRows` they are the grid's own rows, still editable, selectable and numbered as rows 1..N. Excel's Freeze Panes, for the row half; the column half is `columnPinning`. Under `virtualization` the frozen rows are always rendered and the window skips them.",
+                "group": "common"
+            },
+            {
+                "key": "mergedCells",
+                "label": "Merged Cells",
+                "type": "json",
+                "description": "Merged cells: rectangles drawn as one cell, a spreadsheet's Merge & Center. Each entry is the top-left cell (display indices) and how many rows and columns it covers. The origin's td takes the span and shows the origin's value; the covered cells are not drawn, a selection grows to whole merges, the active cell inside a merge is its origin, and the arrow keys step over a merge as one cell. A merge that crosses the frozen boundary or the rendered window is drawn in parts, one per band. The grid does not write into covered cells on its own; a consumer that merges cells keeps them empty or marks them read-only through the column's `editable`.",
+                "group": "common"
+            },
             {
                 "key": "pinnedBottomRows",
                 "label": "Pinned Bottom Rows",
@@ -7320,6 +7364,24 @@ export const GENERATED_UI_SURFACE = {
                 "prop": "onPaginationChange",
                 "description": "Fires when the user changes page or page size while `externalPagination` is on. Fetch that page and update `data` / `rowCount` / `pageIndex`."
             },
+            {
+                "key": "columnResize",
+                "label": "Column Resize",
+                "prop": "onColumnResize",
+                "description": "The user dragged a column's edge (or double-clicked it to autosize). Programmatic `api.setColumnWidth` does not fire it."
+            },
+            {
+                "key": "rowResize",
+                "label": "Row Resize",
+                "prop": "onRowResize",
+                "description": "The user dragged a row's edge, or double-clicked it: `height` is then `null`, the row back at its declared height. Programmatic `api.setRowHeight` does not fire it."
+            },
+            {
+                "key": "pasteClipboard",
+                "label": "Paste Clipboard",
+                "prop": "onPasteClipboard",
+                "description": "Take over a paste. Receives the clipboard's `text/plain` and, when the source put one there, its `text/html` (Excel's carries formats and formulas; a grid's own `clipboardHtml` carries whatever it chose to). Return `true` to say the paste was applied; anything else lets the grid paste the text as it always has. Runs inside one history group, so every `setCellValue` and `recordUndo` the handler makes is one Ctrl+Z. With this set, Ctrl+V lets the browser's own `paste` event through (that is where the unsanitised HTML is), and the async Clipboard API is the fallback for a browser that does not deliver it. `source` says which path the payload came by."
+            },
             {
                 "key": "apiReady",
                 "label": "Api Ready",

package/dist/studio/ui-components.js

@@ -637,6 +637,11 @@ export const GRID_CURATED_PROPS = new Set([
     'pageSize', 'pageSizeOptions', 'paginationPosition', 'rowHeight', 'containerHeight',
     'columnVirtualization', 'initialColumnPinning', 'conditionalFormats', 'features', 'editable',
     'enableInlineEditing',
+    // The icon picker owns this. The extractor already skips it (a map of snippets is
+    // content, not a property), so this is belt and braces - but if snippet handling
+    // there ever changes, `icons` must not reappear as a JSON box: the value it would
+    // produce is emitted with JSON.stringify and would throw at `{@render}`.
+    'icons',
 ]);
 /** The Grid's raw prop surface for the "All properties" panel: every extracted SvGrid
  *  prop the curated controls do NOT already manage. Sorted by group then label. */
@@ -650,6 +655,36 @@ export function gridPropSurface() {
         .map((p) => ({ ...p }))
         .sort((a, b) => (order[a.group ?? 'common'] - order[b.group ?? 'common']) || a.label.localeCompare(b.label));
 }
+// --- Grid icons: how the picker groups the catalogue ------------------------
+// SvGrid names ~50 chrome glyphs and `icons` replaces any subset, which is far too
+// long a list to show flat. Array order is BOTH the matching order (each name takes
+// the first rule that accepts it) and the order the picker shows the groups in, so
+// the header icons people actually reach for - sort, filter, the column menu - come
+// first rather than falling out of a catch-all at the bottom.
+//
+// 'Other' is the catch-all and is expected to stay empty: a glyph added to the
+// catalogue still shows up there rather than vanishing from the picker, but the
+// guardrail test fails so someone gives it a real home.
+const GRID_ICON_GROUP_RULES = [
+    { label: 'Header + column menu', match: (n) => ['sort', 'sort-asc', 'sort-desc', 'filter', 'menu', 'chevron-down', 'chevron-right', 'autosize', 'columns', 'reset'].includes(n) },
+    { label: 'Filter operators', match: (n) => n.startsWith('op-') },
+    { label: 'Pinning', match: (n) => n === 'pin-left' || n === 'pin-right' || n === 'unpin' },
+    { label: 'Rows + grouping', match: (n) => ['group', 'group-add', 'row-number', 'pinned-row-top', 'pinned-row-bottom', 'drag-handle', 'breadcrumb-separator'].includes(n) },
+    { label: 'Toolbar + overlays', match: (n) => ['search', 'tool-panel', 'chart', 'advanced-filter', 'column-group-caret'].includes(n) },
+    { label: 'Pager', match: (n) => n.startsWith('page-') },
+    { label: 'Find + move', match: (n) => n.startsWith('find-') || n.startsWith('move-') },
+    { label: 'Close + clear', match: (n) => ['x', 'close', 'clear', 'remove'].includes(n) },
+    { label: 'Other', match: () => true },
+];
+/** Split the grid's icon catalogue into the picker's display groups, in order,
+ *  dropping any that came out empty. Takes the names rather than importing them so
+ *  the studio metadata module stays free of a runtime dependency on the grid. */
+export function gridIconGroups(names) {
+    return GRID_ICON_GROUP_RULES.map((rule, i) => ({
+        label: rule.label,
+        names: names.filter((n) => GRID_ICON_GROUP_RULES.findIndex((c) => c.match(n)) === i),
+    })).filter((g) => g.names.length);
+}
 // Props NOT offered on `ctx.grid` as runtime-settable options: structural data,
 // controller-owned plumbing, and seed-once `initial*` props (the grid reads those at
 // mount, so `setOption` on them is a no-op - excluding them keeps intellisense honest).

package/dist/sveltekit/in-memory.d.ts

@@ -6,9 +6,9 @@
  * and prototyping a schema before a database exists behind it.
  */
 import type { RowData } from '@svgrid/grid';
-import { type EntitySchema } from '../schema';
-import type { WritableDataSource } from './types';
-import { type AggregateSource } from '../sources/aggregate';
+import { type EntitySchema } from '../schema.js';
+import type { WritableDataSource } from './types.js';
+import { type AggregateSource } from '../sources/aggregate.js';
 export declare function createInMemoryDataSource<TData extends RowData>(initial: ReadonlyArray<TData>, schema: EntitySchema<TData>): WritableDataSource<TData> & AggregateSource & {
     rows(): ReadonlyArray<TData>;
 };

package/dist/sveltekit/in-memory.js

@@ -1,7 +1,7 @@
-import { resolveIdField } from '../schema';
-import { planQuery } from './query-plan';
-import { compilePredicate } from '../expressions/compile';
-import { aggregateRows } from '../sources/aggregate';
+import { resolveIdField } from '../schema.js';
+import { planQuery } from './query-plan.js';
+import { compilePredicate } from '../expressions/compile.js';
+import { aggregateRows } from '../sources/aggregate.js';
 function asString(v) {
     return v == null ? '' : String(v);
 }

package/dist/sveltekit/index.d.ts

@@ -1,6 +1,6 @@
-export { planQuery, coerce, type QueryPlan, type PlanPredicate, type PlanOp, } from './query-plan';
-export { createInMemoryDataSource } from './in-memory';
-export { createKitDataSource, createKitHandlers, type KitDataSourceOptions, type KitHandlerOptions, type KitScope, type KitHandlers, type KitMessage, } from './transport';
-export { planToSql, type SqlDialect, type SqlPlan } from './sql';
-export { createSqlDataSource, type SqlExecutor, type SqlDataSourceConfig, } from './sql-source';
-export type { WritableDataSource } from './types';
+export { planQuery, coerce, type QueryPlan, type PlanPredicate, type PlanOp, } from './query-plan.js';
+export { createInMemoryDataSource } from './in-memory.js';
+export { createKitDataSource, createKitHandlers, type KitDataSourceOptions, type KitHandlerOptions, type KitScope, type KitHandlers, type KitMessage, } from './transport.js';
+export { planToSql, type SqlDialect, type SqlPlan } from './sql.js';
+export { createSqlDataSource, type SqlExecutor, type SqlDataSourceConfig, } from './sql-source.js';
+export type { WritableDataSource } from './types.js';

package/dist/sveltekit/index.js

@@ -1,5 +1,5 @@
-export { planQuery, coerce, } from './query-plan';
-export { createInMemoryDataSource } from './in-memory';
-export { createKitDataSource, createKitHandlers, } from './transport';
-export { planToSql } from './sql';
-export { createSqlDataSource, } from './sql-source';
+export { planQuery, coerce, } from './query-plan.js';
+export { createInMemoryDataSource } from './in-memory.js';
+export { createKitDataSource, createKitHandlers, } from './transport.js';
+export { planToSql } from './sql.js';
+export { createSqlDataSource, } from './sql-source.js';

package/dist/sveltekit/query-plan.d.ts

@@ -11,7 +11,7 @@
  * arbitrary identifiers through to SQL.
  */
 import type { GridPredicateExpr, RowData, ServerRequest } from '@svgrid/grid';
-import type { EntityFieldType, EntitySchema } from '../schema';
+import type { EntityFieldType, EntitySchema } from '../schema.js';
 /** Normalized predicate operators (a stable superset of the grid's filter operators). */
 export type PlanOp = 'eq' | 'contains' | 'startsWith' | 'gt' | 'lt' | 'between' | 'isBlank' | 'in';
 export type PlanPredicate = {

package/dist/sveltekit/sql-source.d.ts

@@ -22,10 +22,10 @@
  *     })
  */
 import type { RowData } from '@svgrid/grid';
-import { type EntitySchema } from '../schema';
-import { type SqlDialect } from './sql';
-import type { WritableDataSource } from './types';
-import type { AggregateSource } from '../sources/aggregate';
+import { type EntitySchema } from '../schema.js';
+import { type SqlDialect } from './sql.js';
+import type { WritableDataSource } from './types.js';
+import type { AggregateSource } from '../sources/aggregate.js';
 /** Run a parameterized query, resolving to the result rows. */
 export type SqlExecutor = (sql: string, params: unknown[]) => Promise<ReadonlyArray<Record<string, unknown>>>;
 export type SqlDataSourceConfig<TData extends RowData> = {

package/dist/sveltekit/sql-source.js

@@ -1,7 +1,7 @@
-import { resolveIdField } from '../schema';
-import { nudgeEnterprise } from '../license';
-import { planQuery } from './query-plan';
-import { planToSql } from './sql';
+import { resolveIdField } from '../schema.js';
+import { nudgeEnterprise } from '../license.js';
+import { planQuery } from './query-plan.js';
+import { planToSql } from './sql.js';
 const SQL_AGG = { sum: 'SUM', avg: 'AVG', min: 'MIN', max: 'MAX' };
 function quoter(dialect) {
     const q = dialect.quote ?? '"';

package/dist/sveltekit/sql.d.ts

@@ -21,7 +21,7 @@
  * (Or map `plan.where` to Drizzle operators directly - the plan is the seam
  * either way.)
  */
-import type { QueryPlan } from './query-plan';
+import type { QueryPlan } from './query-plan.js';
 export type SqlDialect = {
     /** Identifier quote char. Default `"` (ANSI / Postgres / SQLite). MySQL: `` ` ``. */
     quote?: string;

package/dist/sveltekit/transport.d.ts

@@ -24,8 +24,8 @@
  *     const controller = createServerDataSource(source, { onChange: ... })
  */
 import type { RowData, ServerDataSource, ServerRequest } from '@svgrid/grid';
-import type { EntitySchema } from '../schema';
-import type { WritableDataSource } from './types';
+import type { EntitySchema } from '../schema.js';
+import type { WritableDataSource } from './types.js';
 /** Wire protocol: the single JSON body shape the client POSTs and the server dispatches on. */
 export type KitMessage<TData> = {
     kind: 'query';

package/dist/sveltekit/transport.js

@@ -1,4 +1,4 @@
-import { validateAll } from '../edit-panel';
+import { validateAll } from '../edit-panel.js';
 function jsonResponse(data, status = 200) {
     return new Response(JSON.stringify(data), {
         status,