@svgrid/enterprise 2.2.1 → 2.3.1

package/src/studio/ui-components.ts

@@ -13,7 +13,11 @@
  * that becomes its plain-text children in both the live preview and codegen.
  */
 
-export type UiPropType = 'string' | 'number' | 'boolean' | 'select' | 'color'
+import { GENERATED_UI_SURFACE } from './ui-components.generated.js'
+
+export type UiPropType = 'string' | 'number' | 'boolean' | 'select' | 'color' | 'json' | 'date'
+
+export type UiPropGroup = 'common' | 'appearance' | 'behavior' | 'advanced'
 
 export type UiComponentProp = {
   key: string
@@ -22,8 +26,36 @@ export type UiComponentProp = {
   /** Choices for `type: 'select'`. */
   options?: string[]
   default?: unknown
+  /** Guidance shown as the property panel tooltip - sourced from the component's
+   *  own JSDoc via the extractor, so it stays true to the source. */
+  description?: string
+  /** Property-panel grouping (defaults to 'common'). */
+  group?: UiPropGroup
+  /** A function / code-only prop (e.g. loadChildren) - listed read-only, set in code. */
+  code?: boolean
 }
 
+/** A wireable component event: `key` is the handle event name (`ctx.x.on<key>`),
+ *  `prop` the component callback prop that fires it (e.g. `onChange`). */
+export type UiComponentEvent = { key: string; label: string; prop?: string; description?: string }
+
+/** Standard DOM / interaction events EVERY component block can wire (VS-style full
+ *  event surface) - forwarded by the generated wrapper to the block's handle. `dom`
+ *  is the DOM event the wrapper listens for; `key` is the handle event name. */
+export const STANDARD_UI_EVENTS: ReadonlyArray<{ key: string; label: string; dom: string; description: string }> = [
+  { key: 'click', label: 'Click', dom: 'click', description: 'The component (or a child) was clicked.' },
+  { key: 'dblclick', label: 'Double click', dom: 'dblclick', description: 'The component was double-clicked.' },
+  { key: 'change', label: 'Change', dom: 'change', description: 'A committed value change (fires on blur for inputs).' },
+  { key: 'input', label: 'Input', dom: 'input', description: 'Fires on every keystroke / immediate value edit.' },
+  { key: 'focus', label: 'Focus', dom: 'focusin', description: 'The component (or a child) gained focus.' },
+  { key: 'blur', label: 'Blur', dom: 'focusout', description: 'The component (or a child) lost focus.' },
+  { key: 'keydown', label: 'Key down', dom: 'keydown', description: 'A key was pressed while focused.' },
+  { key: 'keyup', label: 'Key up', dom: 'keyup', description: 'A key was released while focused.' },
+  { key: 'contextmenu', label: 'Context menu', dom: 'contextmenu', description: 'Right-click / context-menu request.' },
+  { key: 'mouseenter', label: 'Mouse enter', dom: 'mouseenter', description: 'The pointer entered the component.' },
+  { key: 'mouseleave', label: 'Mouse leave', dom: 'mouseleave', description: 'The pointer left the component.' },
+]
+
 export type UiComponentSpec = {
   /** Registry key - stored as `ComponentConfig.component`. */
   key: string
@@ -31,8 +63,14 @@ export type UiComponentSpec = {
   category: string
   /** Named export from `@svgrid/grid`. */
   importName: string
-  /** Scalar "chrome" props only - see module doc. */
+  /** Hand-curated prop entries. In the EXPORTED registry these are merged with
+   *  the extracted full surface (ui-components.generated.ts): hand entries win
+   *  by key (label/options/default), extraction supplies the rest + tooltips. */
   props: UiComponentProp[]
+  /** Wireable events (merged with extracted function-prop events the same way). */
+  events?: UiComponentEvent[]
+  /** Extracted props to keep OUT of the property panel (edge cases). */
+  hiddenProps?: string[]
   /** True if the component's real content is a `children` snippet - adds one
    *  literal-text field to the property panel, stored under `props._content`. */
   hasContent?: boolean
@@ -45,7 +83,7 @@ export type UiComponentSpec = {
   fixed?: Array<{ key: string; expr: string; preview: unknown }>
 }
 
-export const UI_COMPONENT_REGISTRY: ReadonlyArray<UiComponentSpec> = [
+const BASE_REGISTRY: ReadonlyArray<UiComponentSpec> = [
   {
     key: 'button',
     label: 'Button',
@@ -465,8 +503,240 @@ export const UI_COMPONENT_REGISTRY: ReadonlyArray<UiComponentSpec> = [
       },
     ],
   },
+  // --- wave 1: full-kit registration (props/events come from the extractor) ---
+  { key: 'masked-input', label: 'Masked input', category: 'Inputs', importName: 'SvMaskedInput', props: [] },
+  { key: 'phone-input', label: 'Phone input', category: 'Inputs', importName: 'SvPhoneInput', props: [] },
+  {
+    key: 'tags-input', label: 'Tags input', category: 'Inputs', importName: 'SvTagsInput',
+    props: [{ key: 'value', label: 'Tags', type: 'json', default: ['svelte', 'grid'] }],
+  },
+  { key: 'duration-input', label: 'Duration input', category: 'Inputs', importName: 'SvDurationInput', props: [] },
+  {
+    key: 'radio-group', label: 'Radio group', category: 'Inputs', importName: 'SvRadioGroup',
+    props: [{ key: 'options', label: 'Options', type: 'json', default: [{ value: 'a', label: 'Option A' }, { value: 'b', label: 'Option B' }, { value: 'c', label: 'Option C' }] }],
+  },
+  {
+    key: 'button-group', label: 'Button group', category: 'Actions', importName: 'SvButtonGroup',
+    props: [{ key: 'items', label: 'Items', type: 'json', default: [{ value: 'day', label: 'Day' }, { value: 'week', label: 'Week' }, { value: 'month', label: 'Month' }] }],
+  },
+  {
+    key: 'list-box', label: 'List box', category: 'Inputs', importName: 'SvListBox',
+    props: [{ key: 'options', label: 'Options', type: 'json', default: [{ value: '1', label: 'First' }, { value: '2', label: 'Second' }, { value: '3', label: 'Third' }] }],
+  },
+  {
+    key: 'dropdown-list', label: 'Dropdown list', category: 'Inputs', importName: 'SvDropDownList',
+    props: [{ key: 'options', label: 'Options', type: 'json', default: [{ value: '1', label: 'First' }, { value: '2', label: 'Second' }, { value: '3', label: 'Third' }] }],
+  },
+  {
+    key: 'combo-box', label: 'Combo box', category: 'Inputs', importName: 'SvComboBox',
+    props: [{ key: 'options', label: 'Options', type: 'json', default: [{ value: '1', label: 'First' }, { value: '2', label: 'Second' }, { value: '3', label: 'Third' }] }],
+  },
+  {
+    key: 'auto-complete', label: 'Auto complete', category: 'Inputs', importName: 'SvAutoComplete',
+    props: [{ key: 'options', label: 'Options', type: 'json', default: [{ value: 'red', label: 'Red' }, { value: 'green', label: 'Green' }, { value: 'blue', label: 'Blue' }] }],
+  },
+  {
+    key: 'multi-select', label: 'Multi select', category: 'Inputs', importName: 'SvMultiSelect',
+    props: [{ key: 'options', label: 'Options', type: 'json', default: [{ value: '1', label: 'First' }, { value: '2', label: 'Second' }, { value: '3', label: 'Third' }] }],
+  },
+  { key: 'repeat-button', label: 'Repeat button', category: 'Actions', importName: 'SvRepeatButton', props: [], hasContent: true, contentLabel: 'Label', contentDefault: 'Hold me' },
+  { key: 'rich-text', label: 'Rich text editor', category: 'Inputs', importName: 'SvRichText', props: [] },
+  {
+    key: 'tree', label: 'Tree', category: 'Display', importName: 'SvTree',
+    props: [{ key: 'nodes', label: 'Nodes', type: 'json', default: [{ id: '1', label: 'Documents', children: [{ id: '1-1', label: 'Reports' }, { id: '1-2', label: 'Invoices' }] }, { id: '2', label: 'Pictures' }] }],
+  },
+  { key: 'country-input', label: 'Country input', category: 'Inputs', importName: 'SvCountryInput', props: [] },
+
+  // --- Typography / prose -------------------------------------------------
+  // The kit's text primitives. Cheap to expose and they are what a freestanding
+  // page (an "About", a help panel) is mostly made of - without them a designer
+  // user has no way to place a heading or a paragraph.
+  {
+    key: 'title', label: 'Heading', category: 'Display', importName: 'SvTitle',
+    props: [{ key: 'size', label: 'Level', type: 'select', options: ['1', '2', '3', '4', '5', '6'], default: '2' }],
+    hasContent: true, contentLabel: 'Text', contentDefault: 'Section heading',
+  },
+  {
+    key: 'text', label: 'Text', category: 'Display', importName: 'SvText',
+    props: [
+      { key: 'size', label: 'Size', type: 'select', options: ['xs', 'sm', 'md', 'lg', 'xl'], default: 'md' },
+      { key: 'weight', label: 'Weight', type: 'select', options: ['normal', 'medium', 'semibold', 'bold'], default: 'normal' },
+      { key: 'tone', label: 'Tone', type: 'select', options: ['default', 'muted', 'accent', 'success', 'warning', 'error'], default: 'default' },
+    ],
+    hasContent: true, contentLabel: 'Text', contentDefault: 'Body text.',
+  },
+  {
+    key: 'anchor', label: 'Link', category: 'Display', importName: 'SvAnchor',
+    props: [
+      { key: 'href', label: 'URL', type: 'string', default: '#' },
+      { key: 'tone', label: 'Tone', type: 'select', options: ['accent', 'default', 'muted'], default: 'accent' },
+      { key: 'size', label: 'Size', type: 'select', options: ['sm', 'md', 'lg'], default: 'md' },
+    ],
+    hasContent: true, contentLabel: 'Label', contentDefault: 'Read more',
+  },
+  {
+    key: 'blockquote', label: 'Quote', category: 'Display', importName: 'SvBlockquote',
+    props: [], hasContent: true, contentLabel: 'Quote', contentDefault: 'A quoted passage.',
+  },
+  {
+    key: 'code', label: 'Inline code', category: 'Display', importName: 'SvCode',
+    props: [], hasContent: true, contentLabel: 'Code', contentDefault: 'npm install',
+  },
+  {
+    key: 'kbd', label: 'Keyboard key', category: 'Display', importName: 'SvKbd',
+    props: [{ key: 'size', label: 'Size', type: 'select', options: ['sm', 'md'], default: 'md' }],
+    hasContent: true, contentLabel: 'Key', contentDefault: 'Ctrl',
+  },
+  {
+    key: 'mark', label: 'Highlight', category: 'Display', importName: 'SvMark',
+    props: [{ key: 'tone', label: 'Tone', type: 'select', options: ['yellow', 'accent', 'success', 'warning', 'error'], default: 'yellow' }],
+    hasContent: true, contentLabel: 'Text', contentDefault: 'highlighted',
+  },
+  {
+    key: 'list', label: 'List', category: 'Display', importName: 'SvList',
+    props: [],
+    fixed: [{ key: 'items', expr: "['First item', 'Second item', 'Third item']", preview: ['First item', 'Second item', 'Third item'] }],
+  },
+
+  // --- Feedback -----------------------------------------------------------
+  {
+    key: 'spinner', label: 'Spinner', category: 'Feedback', importName: 'SvSpinner',
+    props: [{ key: 'size', label: 'Size', type: 'select', options: ['sm', 'md', 'lg'], default: 'md' }],
+  },
+  {
+    key: 'loading-overlay', label: 'Loading overlay', category: 'Feedback', importName: 'SvLoadingOverlay',
+    props: [
+      { key: 'visible', label: 'Visible', type: 'boolean', default: true },
+      { key: 'label', label: 'Label', type: 'string', default: 'Loading...' },
+    ],
+  },
+  {
+    key: 'result', label: 'Result', category: 'Feedback', importName: 'SvResult',
+    props: [
+      { key: 'status', label: 'Status', type: 'select', options: ['success', 'error', 'warning', 'info'], default: 'success' },
+      { key: 'title', label: 'Title', type: 'string', default: 'All done' },
+    ],
+  },
+
+  // --- Structure ----------------------------------------------------------
+  {
+    key: 'collapsible', label: 'Collapsible', category: 'Layout', importName: 'SvCollapsible',
+    props: [
+      { key: 'title', label: 'Title', type: 'string', default: 'Details' },
+      { key: 'open', label: 'Open', type: 'boolean', default: false },
+    ],
+    hasContent: true, contentLabel: 'Content', contentDefault: 'Hidden until expanded.',
+  },
+  {
+    key: 'carousel', label: 'Carousel', category: 'Layout', importName: 'SvCarousel',
+    props: [],
+  },
+
+  // --- Date / time + richer pickers ---------------------------------------
+  // These are grid cell editors too; as standalone blocks they are what a
+  // filter bar or a booking form is built from.
+  { key: 'date-time-picker', label: 'Date & time picker', category: 'Inputs', importName: 'SvDateTimePicker', props: [] },
+  { key: 'time-picker', label: 'Time picker', category: 'Inputs', importName: 'SvTimePicker', props: [] },
+  { key: 'date-range-input', label: 'Date range', category: 'Inputs', importName: 'SvDateRangeInput', props: [] },
+  {
+    key: 'segmented', label: 'Segmented control', category: 'Inputs', importName: 'SvSegmented',
+    props: [{ key: 'options', label: 'Options', type: 'json', default: [{ value: 'day', label: 'Day' }, { value: 'week', label: 'Week' }, { value: 'month', label: 'Month' }] }],
+  },
+  {
+    key: 'tree-select', label: 'Tree select', category: 'Inputs', importName: 'SvTreeSelect',
+    props: [{ key: 'nodes', label: 'Nodes', type: 'json', default: [{ id: '1', label: 'Europe', children: [{ id: '1-1', label: 'France' }, { id: '1-2', label: 'Spain' }] }, { id: '2', label: 'Asia' }] }],
+  },
+  { key: 'file-upload', label: 'File upload', category: 'Inputs', importName: 'SvFileUpload', props: [] },
 ]
 
+// ---------------------------------------------------------------------------
+// Merge: the exported registry = hand-curated spec + the component's FULL
+// extracted surface (ui-components.generated.ts). Hand entries win by key;
+// extraction contributes every remaining prop with its JSDoc tooltip, plus
+// the event list. Consumers see one complete `props`/`events` per component.
+// ---------------------------------------------------------------------------
+
+const GROUP_ORDER: Record<UiPropGroup, number> = { common: 0, appearance: 1, behavior: 2, advanced: 3 }
+
+function mergeSpec(spec: UiComponentSpec): UiComponentSpec {
+  const generated = GENERATED_UI_SURFACE[spec.importName]
+  if (!generated) return spec
+  const skip = new Set<string>([...(spec.hiddenProps ?? []), ...(spec.fixed ?? []).map((f) => f.key), '_content'])
+  const genByKey = new Map(generated.props.map((p) => [p.key, p]))
+  // Hand-curated entries first (their order is intentional), enriched with the
+  // extracted description/group when the hand entry doesn't set them.
+  const curated = spec.props
+    .filter((p) => !skip.has(p.key))
+    .map((p) => {
+      const g = genByKey.get(p.key)
+      return g ? { ...g, ...p, description: p.description ?? g.description, group: p.group ?? g.group } : p
+    })
+  const curatedKeys = new Set(curated.map((p) => p.key))
+  const rest = generated.props
+    .filter((p) => !skip.has(p.key) && !curatedKeys.has(p.key))
+    .map((p) => ({ ...p }) as UiComponentProp)
+    .sort((a, b) => GROUP_ORDER[a.group ?? 'common'] - GROUP_ORDER[b.group ?? 'common'])
+  // Events: extracted list as the base, hand entries override by key.
+  const handEvents = new Map((spec.events ?? []).map((e) => [e.key, e]))
+  const events: UiComponentEvent[] = [
+    ...generated.events.map((e) => ({ ...e, ...(handEvents.get(e.key) ?? {}) })),
+    ...(spec.events ?? []).filter((e) => !generated.events.some((g) => g.key === e.key)),
+  ]
+  return { ...spec, props: [...curated, ...rest], events }
+}
+
+export const UI_COMPONENT_REGISTRY: ReadonlyArray<UiComponentSpec> = BASE_REGISTRY.map(mergeSpec)
+
 export function uiComponentSpec(key: string): UiComponentSpec | undefined {
   return UI_COMPONENT_REGISTRY.find((s) => s.key === key)
 }
+
+// --- Grid: the "All properties" surface ------------------------------------
+// The grid block has rich CURATED controls (column/form builders, grouping, paging,
+// ...). These are the SvGrid props those controls already drive - excluded from the
+// grid's "All properties" panel so nothing shows twice. Everything else in the
+// extracted SvGrid surface is offered as a raw, editable override (config.props).
+export const GRID_CURATED_PROPS: ReadonlySet<string> = new Set<string>([
+  'data', 'columns', 'board', 'scheduler', 'loading', 'loadingOverlay', 'emptyMessage',
+  'fitColumns', 'sortable', 'externalSort', 'filterable', 'externalFilter', 'filterMode',
+  'showGlobalFilter', 'showColumnFilters', 'showFilterRow', 'showFilterMenu', 'showGroupingControls',
+  'groupable', 'showRowSelection', 'selectionMode', 'enableCellSelection', 'enableRowSummaries',
+  'zebraRows', 'showPagination', 'pageable', 'externalPagination', 'rowCount', 'pageIndex',
+  'pageSize', 'pageSizeOptions', 'paginationPosition', 'rowHeight', 'containerHeight',
+  'columnVirtualization', 'initialColumnPinning', 'conditionalFormats', 'features', 'editable',
+  'enableInlineEditing',
+])
+
+/** 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 function gridPropSurface(): UiComponentProp[] {
+  const g = GENERATED_UI_SURFACE['SvGrid']
+  if (!g) return []
+  const order: Record<string, number> = { common: 0, appearance: 1, behavior: 2, advanced: 3 }
+  return g.props
+    .filter((p) => !GRID_CURATED_PROPS.has(p.key))
+    .map((p) => ({ ...p }) as UiComponentProp)
+    .sort((a, b) => (order[a.group ?? 'common']! - order[b.group ?? 'common']!) || a.label.localeCompare(b.label))
+}
+
+// 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).
+const GRID_API_UNSETTABLE: ReadonlySet<string> = new Set<string>([
+  'data', 'columns', 'features', 'loading', 'onApiReady',
+  'externalSort', 'externalFilter', 'externalPagination', 'rowCount', 'pageIndex',
+  'initialSorting', 'initialColumnPinning', 'initialHiddenColumns', 'columnOrder',
+])
+
+/** 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
+ *  view autocomplete. Sorted alphabetically. */
+export function gridApiSettableProps(): UiComponentProp[] {
+  const g = GENERATED_UI_SURFACE['SvGrid']
+  if (!g) return []
+  return g.props
+    .filter((p) => !GRID_API_UNSETTABLE.has(p.key) && !p.code && !/^on[A-Z]/.test(p.key))
+    .map((p) => ({ ...p }) as UiComponentProp)
+    .sort((a, b) => a.key.localeCompare(b.key))
+}

package/src/sveltekit/index.ts

@@ -11,6 +11,7 @@ export {
   createKitHandlers,
   type KitDataSourceOptions,
   type KitHandlerOptions,
+  type KitScope,
   type KitHandlers,
   type KitMessage,
 } from './transport'

package/src/sveltekit/sql-source.test.ts

@@ -63,6 +63,19 @@ describe('createSqlDataSource reads', () => {
     expect(calls[1]!.params).toEqual([20])
   })
 
+  it('schema-qualifies the table as "schema"."table" when dbSchema is set', async () => {
+    const { execute, calls } = recorder([[{ id: '1' }], [{ count: 1 }]])
+    const src = createSqlDataSource({ schema, table: 'customers', dbSchema: 'analytics', execute })
+    await src.getRows(req({}))
+    expect(calls[0]!.sql).toContain('FROM "analytics"."customers"')
+    expect(calls[1]!.sql).toContain('FROM "analytics"."customers"')
+    // Writes are qualified too.
+    const { execute: ex2, calls: c2 } = recorder([[{ id: '9' }]])
+    const src2 = createSqlDataSource({ schema, table: 'customers', dbSchema: 'analytics', execute: ex2 })
+    await src2.createRow({ name: 'Zed' } as never)
+    expect(c2[0]!.sql).toContain('INSERT INTO "analytics"."customers"')
+  })
+
   it('honors the Postgres dialect ($ placeholders)', async () => {
     const { execute, calls } = recorder([[], [{ count: 0 }]])
     const src = createSqlDataSource({

package/src/sveltekit/sql-source.ts

@@ -41,6 +41,9 @@ export type SqlDataSourceConfig<TData extends RowData> = {
   schema: EntitySchema<TData>
   /** Table (or view) name. Quoted per the dialect; not interpolated raw. */
   table: string
+  /** DB schema / namespace (e.g. Postgres `public`, SQL Server `dbo`). When set,
+   *  the table is addressed as `"schema"."table"`. Each part is quoted separately. */
+  dbSchema?: string
   execute: SqlExecutor
   dialect?: SqlDialect
   /**
@@ -71,11 +74,13 @@ export function createSqlDataSource<TData extends RowData>(
   config: SqlDataSourceConfig<TData>,
 ): WritableDataSource<TData> & AggregateSource {
   nudgeEnterprise('Studio') // soft-gate; never blocks, safe on the server
-  const { schema, table, execute } = config
+  const { schema, execute } = config
   const dialect = config.dialect ?? {}
   const returning = config.returning ?? true
   const id = quoter(dialect)
   const idField = resolveIdField(schema)
+  // Optionally schema-qualify the table: "schema"."table" (each part quoted separately).
+  const qtable = config.dbSchema ? `${id(config.dbSchema)}.${id(config.table)}` : id(config.table)
 
   // Column mapping: when a field has a `dbColumn` (e.g. Drizzle `created_at` vs
   // key `createdAt`), read/write the real column and alias it back to the field.
@@ -94,7 +99,7 @@ export function createSqlDataSource<TData extends RowData>(
     async getRows(request: ServerRequest): Promise<ServerResult<TData>> {
       const plan = planQuery(schema, request)
       const sql = planToSql(plan, planDialect)
-      const t = id(table)
+      const t = qtable
       const rowsSql = squish(
         `SELECT ${projection} FROM ${t} ${sql.whereText} ${sql.orderByText} LIMIT ${sql.limit} OFFSET ${sql.offset}`,
       )
@@ -112,7 +117,7 @@ export function createSqlDataSource<TData extends RowData>(
       const bind = binder(dialect, params)
       const values = cols.map((c) => bind((input as RowData)[c]))
       const sql = squish(
-        `INSERT INTO ${id(table)} (${cols.map(col).join(', ')}) VALUES (${values.join(', ')})${RET}`,
+        `INSERT INTO ${qtable} (${cols.map(col).join(', ')}) VALUES (${values.join(', ')})${RET}`,
       )
       const rows = await execute(sql, params)
       return (rows[0] ?? input) as TData
@@ -125,7 +130,7 @@ export function createSqlDataSource<TData extends RowData>(
       const bind = binder(dialect, params)
       const sets = cols.map((c) => `${col(c)} = ${bind((patch as RowData)[c])}`)
       const where = `${col(idField)} = ${bind(rowIdValue)}`
-      const sql = squish(`UPDATE ${id(table)} SET ${sets.join(', ')} WHERE ${where}${RET}`)
+      const sql = squish(`UPDATE ${qtable} SET ${sets.join(', ')} WHERE ${where}${RET}`)
       const rows = await execute(sql, params)
       return (rows[0] ?? { ...patch, [idField]: rowIdValue }) as TData
     },
@@ -133,7 +138,7 @@ export function createSqlDataSource<TData extends RowData>(
     async deleteRow(rowIdValue: string): Promise<void> {
       const params: unknown[] = []
       const bind = binder(dialect, params)
-      const sql = squish(`DELETE FROM ${id(table)} WHERE ${col(idField)} = ${bind(rowIdValue)}`)
+      const sql = squish(`DELETE FROM ${qtable} WHERE ${col(idField)} = ${bind(rowIdValue)}`)
       await execute(sql, params)
     },
 
@@ -151,13 +156,13 @@ export function createSqlDataSource<TData extends RowData>(
           : `${SQL_AGG[request.reduce]}(${col(request.measure)})`
       // No dimension -> a single grand total (a KPI), no GROUP BY.
       if (!request.dimension) {
-        const text = squish(`SELECT ${fn} AS value FROM ${id(table)} ${sql.whereText}`)
+        const text = squish(`SELECT ${fn} AS value FROM ${qtable} ${sql.whereText}`)
         const rows = await execute(text, sql.params)
         return [{ category: '', value: Number(rows[0]?.value ?? 0) }]
       }
       const dim = col(request.dimension)
       const text = squish(
-        `SELECT ${dim} AS category, ${fn} AS value FROM ${id(table)} ${sql.whereText} GROUP BY ${dim} ORDER BY value DESC`,
+        `SELECT ${dim} AS category, ${fn} AS value FROM ${qtable} ${sql.whereText} GROUP BY ${dim} ORDER BY value DESC`,
       )
       const rows = await execute(text, sql.params)
       return rows.map((r) => ({ category: String(r.category ?? ''), value: Number(r.value ?? 0) }))

package/src/sveltekit/transport-scope.test.ts

@@ -0,0 +1,125 @@
+/**
+ * Row scoping (`scope`) - the mechanism behind multi-tenancy.
+ *
+ * Scoping reads is the easy half and the useless half on its own: if create can
+ * plant a row in another tenant, or update/delete can reach one by guessing an
+ * id, the isolation is decorative. These tests cover all four paths plus the
+ * ways a client might try to talk its way out of the scope.
+ */
+import { describe, expect, it } from 'vitest'
+import type { ServerRequest } from '@svgrid/grid'
+import type { EntitySchema } from '../schema'
+import { createInMemoryDataSource } from './in-memory'
+import { createKitDataSource, createKitHandlers } from './transport'
+
+type Row = { id: string; name: string; tenantId: string }
+
+const schema: EntitySchema<Row> = {
+  name: 'notes',
+  fields: [
+    { field: 'id', type: 'text', primaryKey: true },
+    { field: 'name', type: 'text' },
+    { field: 'tenantId', type: 'text' },
+  ],
+}
+
+const seed: Row[] = [
+  { id: '1', name: 'Acme note', tenantId: 'acme' },
+  { id: '2', name: 'Acme second', tenantId: 'acme' },
+  { id: '3', name: 'Globex secret', tenantId: 'globex' },
+]
+
+/** Wire a client to handlers scoped to `tenant` (null = unscoped/super-admin). */
+function wire(tenant: string | null, opts: { throwOnResolve?: boolean } = {}) {
+  const backend = createInMemoryDataSource(seed.map((r) => ({ ...r })), schema)
+  const handlers = createKitHandlers({
+    schema,
+    source: backend,
+    scope: () => {
+      if (opts.throwOnResolve) throw new Error('no tenant on session')
+      return tenant ? { field: 'tenantId', value: tenant } : null
+    },
+  })
+  const fakeFetch = (url: string, init?: RequestInit) =>
+    handlers.handle(new Request(`http://localhost${url}`, init))
+  const client = createKitDataSource<Row>({ endpoint: '/api/notes', fetch: fakeFetch })
+  return { client, backend, handlers }
+}
+
+const req = (partial: Partial<ServerRequest> = {}): ServerRequest => ({
+  startRow: 0, endRow: 50, pageIndex: 0, pageSize: 50, sortModel: [], filterModel: {}, ...partial,
+})
+
+describe('row scoping: reads', () => {
+  it('returns only the caller tenant\'s rows', async () => {
+    const { client } = wire('acme')
+    const { rows } = await client.getRows(req())
+    expect(rows.map((r) => r.id)).toEqual(['1', '2'])
+  })
+
+  it('is unscoped when the resolver returns null', async () => {
+    const { client } = wire(null)
+    const { rows } = await client.getRows(req())
+    expect(rows).toHaveLength(3)
+  })
+
+  it('a client-supplied tenant filter cannot widen the scope', async () => {
+    const { client } = wire('acme')
+    // Ask for globex explicitly - the server's predicate is written last.
+    const { rows } = await client.getRows(
+      req({ filterModel: { columns: { tenantId: { operator: 'equals', value: 'globex' } } } }),
+    )
+    expect(rows.every((r) => r.tenantId === 'acme')).toBe(true)
+  })
+})
+
+describe('row scoping: writes', () => {
+  it('stamps the tenant on create, overriding what the client sent', async () => {
+    const { client, backend } = wire('acme')
+    const created = await client.createRow!({ id: '9', name: 'New', tenantId: 'globex' } as Partial<Row>)
+    expect(created.tenantId).toBe('acme')
+    const { rows } = await backend.getRows(req())
+    expect(rows.find((r) => r.id === '9')!.tenantId).toBe('acme')
+  })
+
+  it('rejects updating a row in another tenant', async () => {
+    const { client } = wire('acme')
+    await expect(client.updateRow!('3', { name: 'hacked' })).rejects.toThrow()
+  })
+
+  it('rejects deleting a row in another tenant', async () => {
+    const { client } = wire('acme')
+    await expect(client.deleteRow!('3')).rejects.toThrow()
+  })
+
+  it('leaves the other tenant\'s data untouched after a rejected write', async () => {
+    const { client, backend } = wire('acme')
+    await client.updateRow!('3', { name: 'hacked' }).catch(() => {})
+    await client.deleteRow!('3').catch(() => {})
+    const { rows } = await backend.getRows(req())
+    expect(rows.find((r) => r.id === '3')).toEqual({ id: '3', name: 'Globex secret', tenantId: 'globex' })
+  })
+
+  it('allows updating and deleting the caller\'s own rows', async () => {
+    const { client } = wire('acme')
+    const updated = await client.updateRow!('1', { name: 'Renamed' })
+    expect(updated.name).toBe('Renamed')
+    await expect(client.deleteRow!('2')).resolves.not.toThrow()
+  })
+
+  it('a patch cannot move a row into another tenant', async () => {
+    const { client, backend } = wire('acme')
+    await client.updateRow!('1', { tenantId: 'globex' } as Partial<Row>)
+    const { rows } = await backend.getRows(req())
+    expect(rows.find((r) => r.id === '1')!.tenantId).toBe('acme')
+  })
+})
+
+describe('row scoping: resolver failure', () => {
+  it('rejects rather than falling through to an unscoped query', async () => {
+    // The dangerous failure mode: "I cannot tell which tenant you are" must not
+    // mean "show everything".
+    const { client } = wire('acme', { throwOnResolve: true })
+    await expect(client.getRows(req())).rejects.toThrow()
+  })
+})