@svgrid/enterprise 2.5.2 → 2.6.0

package/dist/studio/screen-suites.js

@@ -0,0 +1,297 @@
+import { defaultBlockConfig, defaultEntitySource, entityOf, pickFacetFields, sanitizeProject, withSsrDefaults, } from './project.js';
+/** The default grid config with enterprise options merged on. */
+export function gridConfig(entity, opts) {
+    const base = defaultBlockConfig('grid', entity);
+    return {
+        ...base,
+        ...(opts.format ? { formatRules: opts.format } : {}),
+        ...(opts.rowActions ? { rowActions: opts.rowActions } : {}),
+        ...(opts.rowLink ? { rowLink: opts.rowLink } : {}),
+        ...(opts.summaries ? { rowSummaries: true } : {}),
+        ...(opts.density ? { density: opts.density } : {}),
+        ...(opts.pageSize ? { pageSize: opts.pageSize } : {}),
+        ...(opts.editing ? { editing: opts.editing } : {}),
+        ...(opts.formPresentation ? { formPresentation: opts.formPresentation } : {}),
+    };
+}
+/** One dashboard tile -> a Block. Recurses for `tabs` (whose children must be
+ *  display blocks: chart / kpi / gauge / pivot / tree). `nextId` yields ids unique
+ *  across the WHOLE screen (top-level tiles AND every nested tab child) - a per-level
+ *  index would collide (top-level `blk-1` vs each tab's first child `blk-1`), which
+ *  makes a keyed each throw `each_key_duplicate`. */
+function tileBlock(entity, t, nextId) {
+    const id = nextId();
+    if ('kpi' in t) {
+        const config = {
+            kind: 'kpi', label: t.kpi, ...(t.measure ? { measure: t.measure } : {}), reduce: t.reduce,
+            ...(t.format ? { format: t.format } : {}), ...(t.trendField ? { trendField: t.trendField } : {}),
+            ...(t.trendReduce ? { trendReduce: t.trendReduce } : {}), ...(t.target != null ? { target: t.target } : {}),
+        };
+        return { id, span: t.span ?? 1, config };
+    }
+    if ('chart' in t) {
+        return { id, span: t.span ?? 2, config: { kind: 'chart', dimension: t.chart, ...(t.measure ? { measure: t.measure } : {}), reduce: t.reduce ?? 'sum', type: t.type ?? 'bar' } };
+    }
+    if ('gauge' in t) {
+        return { id, span: t.span ?? 1, config: { kind: 'gauge', label: t.gauge, ...(t.measure ? { measure: t.measure } : {}), reduce: t.reduce, min: t.min ?? 0, max: t.max ?? 100, ...(t.unit ? { unit: t.unit } : {}) } };
+    }
+    if ('pivot' in t) {
+        return { id, span: t.span ?? 3, config: { kind: 'pivot', rows: t.pivot.rows, cols: t.pivot.cols, ...(t.pivot.measure ? { measure: t.pivot.measure } : {}), aggregate: t.pivot.aggregate ?? 'sum' } };
+    }
+    if ('tree' in t) {
+        return { id, span: t.span ?? 1, config: { kind: 'tree', labelField: t.tree.labelField, parentField: t.tree.parentField } };
+    }
+    if ('filter' in t) {
+        return { id, span: t.span ?? 3, config: { kind: 'filter', fields: t.filter } };
+    }
+    if ('tabs' in t) {
+        return { id, span: t.span ?? 3, config: { kind: 'tabs', tabs: t.tabs.map((tab) => ({ label: tab.label, blocks: tab.tiles.map((tt) => tileBlock(entity, tt, nextId)) })) } };
+    }
+    return { id, span: t.span ?? 3, config: gridConfig(entity, t) };
+}
+/** Compose a dashboard screen from explicit tiles (KPI cards + gauges + charts +
+ *  pivots + trees + a rich grid). */
+export function dashScreen(entity, meta, tiles) {
+    let n = 0;
+    const nextId = () => `blk-${++n}`;
+    const blocks = tiles.map((t) => tileBlock(entity, t, nextId));
+    return { id: meta.id, entity: entity.name, title: meta.title, route: meta.id, blocks, nav: { show: true, label: meta.title, order: meta.order } };
+}
+/** FormatRule[] that color-code an enum field's cells by its option colors -
+ *  turns a plain status column into enterprise status pills. */
+export function statusPills(entity, field) {
+    const f = entity.fields.find((x) => x.field === field);
+    if (!f?.options)
+        return [];
+    return f.options
+        .filter((o) => o.color)
+        .map((o) => ({ field, op: 'eq', value: o.value, background: `color-mix(in srgb, ${o.color} 18%, transparent)`, color: o.color, bold: true }));
+}
+/** A list screen: an optional faceted filter panel + a rich grid (status pills,
+ *  totals, row actions, drill-through). */
+export function listScreen(entity, meta, opts = {}) {
+    const blocks = [];
+    if (opts.filter?.length)
+        blocks.push({ id: 'filter-1', span: 3, config: { kind: 'filter', fields: opts.filter } });
+    blocks.push({ id: 'grid-1', span: 3, config: gridConfig(entity, opts.grid ?? {}) });
+    return { id: meta.id, entity: entity.name, title: meta.title, route: meta.id, blocks, nav: { show: true, label: meta.title, order: meta.order } };
+}
+/**
+ * A form-showcase screen: a grid to pick a row + an editable record panel that
+ * renders the full field form (phone / rating / tags / mask / slider editors)
+ * inline. Lets a user see and try the rich editors on load, not just on edit.
+ */
+export function formScreen(entity, meta, fields, grid, filter) {
+    const blocks = [];
+    if (filter?.length)
+        blocks.push({ id: 'filter-1', span: 3, config: { kind: 'filter', fields: filter } });
+    blocks.push({ id: 'grid-1', span: 3, config: gridConfig(entity, grid ?? {}) });
+    blocks.push({ id: 'record-1', span: 3, config: { kind: 'record', editable: true, ...(fields ? { fields } : {}) } });
+    return { id: meta.id, entity: entity.name, title: meta.title, route: meta.id, blocks, nav: { show: true, label: meta.title, order: meta.order } };
+}
+/** A record detail-page screen: a full record view (header + status pill + metric
+ *  tiles + tabbed Overview / related timelines) - the signature view for
+ *  relation-heavy records (a customer / deal / patient / trip page). */
+export function detailScreen(entity, meta, opts) {
+    const blocks = [{ id: 'detail-1', span: 3, config: {
+                kind: 'detail', titleField: opts.titleField,
+                ...(opts.subtitleField ? { subtitleField: opts.subtitleField } : {}),
+                ...(opts.statusField ? { statusField: opts.statusField } : {}),
+                ...(opts.metricFields?.length ? { metricFields: opts.metricFields } : {}),
+                ...(opts.sections?.length ? { sections: opts.sections } : {}),
+                ...(opts.related?.length ? { related: opts.related } : {}),
+            } }];
+    return { id: meta.id, entity: entity.name, title: meta.title, route: meta.id, blocks, nav: { show: true, label: meta.title, order: meta.order } };
+}
+/** `base`, or the first free `${base}-${n}`. Records the result in `taken`. */
+function claim(base, taken) {
+    if (!taken.has(base)) {
+        taken.add(base);
+        return base;
+    }
+    let n = 2;
+    while (taken.has(`${base}-${n}`))
+        n++;
+    const out = `${base}-${n}`;
+    taken.add(out);
+    return out;
+}
+const primaryKeyOf = (entity) => entity.idField ?? entity.fields.find((f) => f.primaryKey)?.field ?? entity.fields[0]?.field ?? 'id';
+const isNumeric = (f) => f.type === 'number' && !f.primaryKey;
+/** Every relation pointing AT `entity` - each becomes a related-children tab on
+ *  the detail page (including a self-referential FK, which reads as a hierarchy). */
+function relatedChildren(entity, entities) {
+    const out = [];
+    for (const other of entities) {
+        for (const f of other.fields) {
+            if (f.type !== 'relation' || f.relation?.entity !== entity.name)
+                continue;
+            const title = other.fields.find((x) => x.type === 'text' && !x.primaryKey)?.field;
+            const status = other.fields.find((x) => x.type === 'enum' && !x.primaryKey)?.field;
+            const date = other.fields.find((x) => (x.type === 'date' || x.type === 'datetime' || x.type === 'dateString') && !x.primaryKey)?.field;
+            out.push({
+                entity: other.name,
+                foreignKey: f.field,
+                label: other.label ?? other.name,
+                ...(title ? { titleField: title } : {}),
+                ...(status ? { statusField: status } : {}),
+                ...(date ? { dateField: date } : {}),
+            });
+        }
+    }
+    return out;
+}
+/**
+ * The screens for one entity: a list, an edit form, a record detail page, and/or
+ * an overview dashboard - already linked to each other. `entities` is the full
+ * schema set so relations resolve (drill-through targets + child collections).
+ */
+export function crudSuiteScreens(entity, entities, opts = {}) {
+    const label = entity.label ?? entity.name;
+    const pk = primaryKeyOf(entity);
+    const children = relatedChildren(entity, entities);
+    const kinds = opts.screens ?? (children.length ? ['list', 'form', 'detail'] : ['list', 'form']);
+    const wants = (k) => kinds.includes(k);
+    const editing = opts.editing ?? 'form';
+    const order = opts.navOrder ?? 0;
+    // Claim ids + routes up front so `rowLink` can point at the detail screen's
+    // FINAL id (deduping afterwards would leave the link dangling).
+    const ids = new Set(opts.taken?.ids ?? []);
+    const routes = new Set(opts.taken?.routes ?? []);
+    const idFor = (base) => claim(base, ids);
+    const routeFor = (base) => claim(base, routes);
+    const listId = wants('list') ? idFor(entity.name) : '';
+    const listRoute = wants('list') ? routeFor(entity.name) : '';
+    const formId = wants('form') ? idFor(`${entity.name}-manage`) : '';
+    const formRoute = wants('form') ? routeFor(`${entity.name}-manage`) : '';
+    const detailId = wants('detail') ? idFor(`${entity.name}-detail`) : '';
+    const detailRoute = wants('detail') ? routeFor(`${entity.name}-detail`) : '';
+    const dashId = wants('dashboard') ? idFor(`${entity.name}-overview`) : '';
+    const dashRoute = wants('dashboard') ? routeFor(`${entity.name}-overview`) : '';
+    const detailCfg = defaultBlockConfig('detail', entity);
+    const facets = opts.filter === false ? [] : pickFacetFields(entity);
+    const pills = detailCfg.statusField ? statusPills(entity, detailCfg.statusField) : [];
+    const hasNumeric = entity.fields.some(isNumeric);
+    // 'detail' editing = a read-only list whose rows drill into the detail page.
+    const drills = editing === 'detail' && !!detailId;
+    const grid = {
+        ...(pills.length ? { format: pills } : {}),
+        ...(hasNumeric ? { summaries: true } : {}),
+        editing: drills ? 'none' : editing === 'inline' ? 'inline' : 'form',
+        ...(drills ? { rowLink: { screen: detailId, targetField: pk } } : {}),
+    };
+    // Nav order is assigned once at the end, from the order the screens were
+    // built, so no branch has to know how many ran before it.
+    const screens = [];
+    if (wants('dashboard')) {
+        const measure = entity.fields.find(isNumeric)?.field;
+        const dimension = detailCfg.statusField ?? entity.fields.find((f) => f.type === 'enum' && !f.primaryKey)?.field;
+        const tiles = [{ kpi: `Total ${label}`, reduce: 'count' }];
+        if (measure)
+            tiles.push({ kpi: `Total ${measure}`, measure, reduce: 'sum' });
+        if (dimension)
+            tiles.push({ chart: dimension, ...(measure ? { measure } : {}), reduce: measure ? 'sum' : 'count', type: 'bar' });
+        tiles.push({ grid: true, ...(pills.length ? { format: pills } : {}) });
+        screens.push({ ...dashScreen(entity, { id: dashId, title: `${label} overview`, order: 0 }, tiles), route: dashRoute });
+    }
+    if (wants('list')) {
+        screens.push({
+            ...listScreen(entity, { id: listId, title: label, order: 0 }, { ...(facets.length ? { filter: facets } : {}), grid }),
+            route: listRoute,
+        });
+    }
+    if (wants('form')) {
+        screens.push({
+            ...formScreen(entity, { id: formId, title: `Manage ${label}`, order: 0 }, undefined, { editing: editing === 'inline' ? 'inline' : 'form' }),
+            route: formRoute,
+        });
+    }
+    if (wants('detail')) {
+        const base = detailScreen(entity, { id: detailId, title: `${label} detail`, order: 0 }, {
+            titleField: detailCfg.titleField,
+            ...(detailCfg.subtitleField ? { subtitleField: detailCfg.subtitleField } : {}),
+            ...(detailCfg.statusField ? { statusField: detailCfg.statusField } : {}),
+            ...(detailCfg.metricFields?.length ? { metricFields: detailCfg.metricFields } : {}),
+            ...(children.length ? { related: children } : {}),
+        });
+        // A drill-through target is reached by clicking a row, so it stays out of the
+        // nav; a detail page nobody links to keeps its nav entry.
+        screens.push({ ...base, route: detailRoute, nav: { ...base.nav, show: !drills } });
+    }
+    return screens.map((s, i) => ({ ...s, nav: { ...s.nav, order: order + i } }));
+}
+/** Append a full CRUD suite for an existing entity (immutable, like `addScreenFromTemplate`). */
+export function addCrudSuite(project, entityName, opts = {}) {
+    const entity = entityOf(project, entityName);
+    if (!entity)
+        return project;
+    const taken = {
+        ids: new Set(project.screens.map((s) => s.id)),
+        routes: new Set(project.screens.map((s) => s.route)),
+    };
+    const navOrder = opts.navOrder ?? project.screens.length;
+    const screens = crudSuiteScreens(entity, project.entities, { ...opts, navOrder, taken });
+    return { ...project, screens: [...project.screens, ...screens] };
+}
+/** The entity the most relations point at (an app's hub - customers, projects,
+ *  patients); falls back to the first schema. */
+function hubEntity(schemas) {
+    let best;
+    let bestScore = -1;
+    for (const e of schemas) {
+        const score = schemas.reduce((n, other) => n + other.fields.filter((f) => f.type === 'relation' && f.relation?.entity === e.name).length, 0);
+        if (score > bestScore) {
+            best = e;
+            bestScore = score;
+        }
+    }
+    return best;
+}
+/**
+ * A complete app from a set of schemas: an overview dashboard plus a CRUD suite
+ * per entity, bound to the given data sources. This is the guided-onboarding
+ * output - the designer wizard and `svgrid-studio init` both land here, so a
+ * database connected from either host scaffolds the same app.
+ */
+export function crudAppFromSchemas(schemas, opts = {}) {
+    const kind = opts.dataSource ?? 'memory';
+    const hub = hubEntity(schemas);
+    const ids = new Set();
+    const routes = new Set();
+    const screens = [];
+    if (opts.overviewDashboard !== false && hub) {
+        const [overview] = crudSuiteScreens(hub, schemas, {
+            screens: ['dashboard'],
+            navOrder: 0,
+            taken: { ids, routes },
+        });
+        // The app's front page: a plain "Overview" at the top of the nav.
+        if (overview)
+            screens.push({ ...overview, title: 'Overview', nav: { ...overview.nav, label: 'Overview', order: 0 } });
+    }
+    for (const schema of schemas) {
+        screens.push(...crudSuiteScreens(schema, schemas, {
+            ...opts.perEntity?.[schema.name],
+            navOrder: screens.length,
+            taken: { ids, routes },
+        }));
+    }
+    const dataSources = {};
+    for (const schema of schemas) {
+        const source = opts.sources?.[schema.name] ?? defaultEntitySource(kind, schema.name);
+        const seed = opts.seed?.[schema.name];
+        dataSources[schema.name] = seed?.length && (source.kind === 'memory' || source.kind === 'pglite')
+            ? { ...source, seed }
+            : source;
+    }
+    // Database-backed screens render on the server by default, so a generated app
+    // ships real SvelteKit (load + form actions) rather than a client SPA.
+    return withSsrDefaults(sanitizeProject({
+        title: opts.title ?? 'My Studio App',
+        entities: [...schemas],
+        screens,
+        dataSource: kind,
+        dataSources,
+        ...(opts.theme ? { theme: opts.theme } : {}),
+    }));
+}

package/dist/studio/themes.d.ts

@@ -0,0 +1,34 @@
+/**
+ * The Studio look-and-feel themes: a `ProjectTheme`-aware wrapper around
+ * `@svgrid/grid`'s built-in design-system presets (shadcn/ui, Tailwind,
+ * Material 3, Excel, Fluent 2, ...) - the single source of truth for these
+ * tokens, also used directly (as plain CSS) by app code that isn't going
+ * through Studio's project model.
+ *
+ * Picking a preset (and a light/dark mode) restyles the WHOLE generated app -
+ * shell, grids, charts, KPIs, forms - not just the accent.
+ *
+ * Pure + node-safe (studio subtree): plain data + helpers, so the same tokens
+ * drive the browser preview and the emitted `+layout.svelte` / `app.css`.
+ */
+import { type ThemeMode, type ThemePalette, type ThemePreset } from '@svgrid/grid/themes';
+import type { ProjectTheme } from './project.js';
+export type { ThemeMode, ThemePalette };
+/** @deprecated Use `ThemePreset` from `@svgrid/grid/themes` - kept as an alias for the pre-existing public name. */
+export type StudioTheme = ThemePreset;
+/** The built-in Studio themes, in gallery order (default first). */
+export declare const studioThemes: StudioTheme[];
+/** The default theme (used when a project has no `preset`). */
+export declare const defaultStudioTheme: StudioTheme;
+/** Look up a theme by id. */
+export declare const getStudioTheme: (id?: string) => StudioTheme | undefined;
+/** True when the project's theme is rendering in dark mode. */
+export declare const isDarkTheme: (theme?: ProjectTheme) => boolean;
+/** Resolve the effective `--sg-*` tokens for a project theme: the chosen preset
+ *  (default if none) in the chosen mode, with the accent override applied. */
+export declare function resolveThemeTokens(theme?: ProjectTheme): Record<string, string>;
+/** Resolve the `--sg-*` tokens for a project theme in an EXPLICIT mode (for the
+ *  generated app's light/dark switcher, which ships both token sets). */
+export declare function resolveThemeTokensFor(theme: ProjectTheme | undefined, mode: 'light' | 'dark'): Record<string, string>;
+/** An inline `style` string (`--sg-x: y; ...; color-scheme; font-family`) for previews. */
+export declare function themeStyleString(theme?: ProjectTheme): string;

package/dist/studio/themes.js

@@ -0,0 +1,41 @@
+/**
+ * The Studio look-and-feel themes: a `ProjectTheme`-aware wrapper around
+ * `@svgrid/grid`'s built-in design-system presets (shadcn/ui, Tailwind,
+ * Material 3, Excel, Fluent 2, ...) - the single source of truth for these
+ * tokens, also used directly (as plain CSS) by app code that isn't going
+ * through Studio's project model.
+ *
+ * Picking a preset (and a light/dark mode) restyles the WHOLE generated app -
+ * shell, grids, charts, KPIs, forms - not just the accent.
+ *
+ * Pure + node-safe (studio subtree): plain data + helpers, so the same tokens
+ * drive the browser preview and the emitted `+layout.svelte` / `app.css`.
+ */
+import { themePresets, defaultThemePreset, getThemePreset, resolveThemeTokens as resolveTokens, } from '@svgrid/grid/themes';
+/** The built-in Studio themes, in gallery order (default first). */
+export const studioThemes = themePresets;
+/** The default theme (used when a project has no `preset`). */
+export const defaultStudioTheme = defaultThemePreset;
+/** Look up a theme by id. */
+export const getStudioTheme = (id) => getThemePreset(id);
+/** True when the project's theme is rendering in dark mode. */
+export const isDarkTheme = (theme) => theme?.mode === 'dark';
+/** Resolve the effective `--sg-*` tokens for a project theme: the chosen preset
+ *  (default if none) in the chosen mode, with the accent override applied. */
+export function resolveThemeTokens(theme) {
+    const preset = getStudioTheme(theme?.preset) ?? defaultStudioTheme;
+    const mode = theme?.mode === 'dark' ? 'dark' : 'light';
+    return resolveTokens(preset, mode, theme?.accent);
+}
+/** Resolve the `--sg-*` tokens for a project theme in an EXPLICIT mode (for the
+ *  generated app's light/dark switcher, which ships both token sets). */
+export function resolveThemeTokensFor(theme, mode) {
+    const preset = getStudioTheme(theme?.preset) ?? defaultStudioTheme;
+    return resolveTokens(preset, mode, theme?.accent);
+}
+/** An inline `style` string (`--sg-x: y; ...; color-scheme; font-family`) for previews. */
+export function themeStyleString(theme) {
+    const tokens = resolveThemeTokens(theme);
+    const vars = Object.entries(tokens).map(([k, v]) => `${k}: ${v}`).join('; ');
+    return `${vars}; color-scheme: ${isDarkTheme(theme) ? 'dark' : 'light'}; font-family: ${tokens['--sg-font']}`;
+}

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

@@ -0,0 +1,89 @@
+/**
+ * A curated catalogue of SvGrid UI-kit components a Studio screen can host as a
+ * `'component'` block (see `ComponentConfig` in `project.ts`) - entity-agnostic,
+ * usable on any screen including a freestanding one. Pure metadata: no Svelte
+ * import here (this subtree stays Svelte-free), so the designer holds the live
+ * component references and this module only describes what to configure and how
+ * to generate.
+ *
+ * Only "chrome" props (scalar values a form can drive) are listed - every
+ * component's real content is typically a Svelte `Snippet`, which this registry
+ * can't represent. A component with `hasContent` gets one extra literal-text
+ * field in the property panel (stored under the reserved `_content` props key)
+ * that becomes its plain-text children in both the live preview and codegen.
+ */
+export type UiPropType = 'string' | 'number' | 'boolean' | 'select' | 'color' | 'json' | 'date';
+export type UiPropGroup = 'common' | 'appearance' | 'behavior' | 'advanced';
+export type UiComponentProp = {
+    key: string;
+    label: string;
+    type: UiPropType;
+    /** 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 declare const STANDARD_UI_EVENTS: ReadonlyArray<{
+    key: string;
+    label: string;
+    dom: string;
+    description: string;
+}>;
+export type UiComponentSpec = {
+    /** Registry key - stored as `ComponentConfig.component`. */
+    key: string;
+    label: string;
+    category: string;
+    /** Named export from `@svgrid/grid`. */
+    importName: string;
+    /** 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;
+    contentLabel?: string;
+    contentDefault?: string;
+    /** Array / object props a scalar form can't express (a Timeline's `items`, a
+     *  Sparkline's `data`). Each is emitted verbatim in codegen as `key={<expr>}`
+     *  with a baked demo dataset the user then edits in Code view, and its `preview`
+     *  value drives the live designer canvas. Not shown in the property panel. */
+    fixed?: Array<{
+        key: string;
+        expr: string;
+        preview: unknown;
+    }>;
+};
+export declare const UI_COMPONENT_REGISTRY: ReadonlyArray<UiComponentSpec>;
+export declare function uiComponentSpec(key: string): UiComponentSpec | undefined;
+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[];
+/** 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 declare function gridApiSettableProps(): UiComponentProp[];

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

@@ -0,0 +1,29 @@
+/**
+ * AUTO-GENERATED by scripts/extract-ui-props.mjs - DO NOT EDIT.
+ * Regenerate: npm run extract:ui-props (packages/enterprise).
+ *
+ * The full prop + event surface of every toolbox component, extracted from the
+ * components' own `Props` types in packages/grid/src. `description` is the
+ * prop's JSDoc comment - it renders as the property panel's guidance tooltip.
+ */
+export type GeneratedUiProp = {
+    key: string;
+    label: string;
+    type: 'string' | 'number' | 'boolean' | 'select' | 'color' | 'json' | 'date';
+    options?: string[];
+    default?: unknown;
+    description?: string;
+    group?: 'common' | 'appearance' | 'behavior' | 'advanced';
+    /** A function / code-only prop (e.g. loadChildren): listed read-only, set in code. */
+    code?: boolean;
+};
+export type GeneratedUiEvent = {
+    key: string;
+    label: string;
+    prop: string;
+    description?: string;
+};
+export declare const GENERATED_UI_SURFACE: Record<string, {
+    props: GeneratedUiProp[];
+    events: GeneratedUiEvent[];
+}>;