@svgrid/enterprise 3.0.0 → 3.0.1

package/dist/studio/index.d.ts

@@ -27,7 +27,7 @@ export { generateValue, generateRows } from './sample-data.js';
 export { studioThemes, defaultStudioTheme, getStudioTheme, resolveThemeTokens, resolveThemeTokensFor, isDarkTheme, themeStyleString, type StudioTheme } from './themes.js';
 export { createProject, defaultScreenFor, defaultBlockConfig, gridColumns, entityOf, blockPalette, addBlock, addBlockAt, addComponentBlock, removeBlock, duplicateBlock, moveBlock, reorderBlock, updateBlock, addEntity, removeEntity, updateEntity, formPlan, setEntityForm, setFormColumns, addFormSection, updateFormSection, removeFormSection, moveFormSection, moveFormField, moveFormFields, setFieldConditions, updateEntityField, setFieldInput, setFieldHidden, formControlsFor, formControlSettings, suggestFormSections, addScreen, addFreestandingScreen, addScreenAction, removeScreenAction, enableScreenCode, disableScreenCode, setScreenRenderGrid, screenLayoutOf, buildDockLayout, reconcileDock, syncDockPanes, setScreenLayout, isPaneLayout, PANE_LAYOUTS, buildCanvasLayout, canvasRectOf, setCanvasRect, CANVAS_COLS, CANVAS_ROW_PX, CANVAS_GAP_PX, type CanvasRect, applyGridPreset, gridPresetLabel, GRID_PRESETS, setScreenDock, reseedScreenDock, setDockPaneTitle, dockPaneTitleOf, dockPaneIds, setLayoutOpts, gridOpts, stackOpts, splitOpts, dockOpts, canvasOpts, type ScreenLayout, type GridPreset, type LayoutOpts, type GridLayoutOpts, type StackLayoutOpts, type SplitLayoutOpts, type DockLayoutOpts, type CanvasLayoutOpts, setHandlerBody, setScreenHandlersSource, setHandlerSteps, addHandlerStep, updateHandlerStep, moveHandlerStep, stepsToCode, compileStep, compileHandlerSteps, compileValue, compileCondition, compileTriggerStep, compileTriggerSteps, triggersOf, setTrigger, TRIGGER_EVENTS, type TriggerStep, type TriggerEvent, type EntityTriggers, setJob, type ScheduledJob, type ScheduledJobKind, setTenancy, tenantField, isTenantScoped, type TenancyConfig, clickSlot, ssrScreenShape, ssrEligible, withSsrDefaults, setScreenRenderMode, eventSlot, rowSelectSlot, changeSlot, FORM_SUBMIT, GRID_EVENTS, type GridEventDef, addStateVar, updateStateVar, removeStateVar, stateInitExpr, stateTsType, type ActionStep, type ActionStepType, type StateVar, type StateVarType, type LogicValue, type LogicOp, type Condition, type FieldValue, setComponentName, setComponentBinding, componentHasBindings, componentHandleName, ON_LOAD, removeScreen, updateScreen, duplicateScreen, reorderScreen, insertBlock, setDataSource, setDeployTarget, setAuth, setDataLayer, seedUsers, defaultEntitySource, flattenBlocks, TAB_CHILD_KINDS, CONTAINER_CHILD_KINDS, CONTAINER_DISPLAY_KINDS, addTab, removeTab, renameTab, addTabBlock, addTabComponent, removeTabBlock, addAccordionSection, removeAccordionSection, renameAccordionSection, setAccordionMultiple, addAccordionBlock, addAccordionComponent, removeAccordionBlock, setEntityDataSource, entityDataSource, setTheme, setThemePreset, setShell, sanitizeProject, screenFromTemplate, addScreenFromTemplate, serializeProject, parseProject, validateProject, isProjectValid, blockColumns, blockStyleCss, blockClassName, sanitizeClassName, mergeBlockStyle, type BlockStyle, roleCanScreen, roleCanAction, CRUD_ACTIONS, type CrudAction, type RoleAccess, type AccessControl, type AuthConfig, type OAuthProvider, type SeedUser, type I18nConfig, type DeployTarget, type StudioProject, type Screen, type ScreenNav, type Block, type BlockKind, type BlockConfig, type GridConfig, type GridColumnConfig, type ColumnFormat, type ColumnCellType, type GridExportConfig, type GridFilterUi, type TreeDataConfig, type SchedulerViewConfig, type SchedulerViewMode, type RowLink, type RowAction, type RowActionKind, type ActionConfig, type ComponentConfig, type ComponentBinding, type FormatOp, type FormatRule, type GridEditing, type GridDensity, type GridAlign, type PagerPosition, type FormConfig, type ChartConfig, type KpiConfig, type KpiFormat, type GaugeConfig, type TreeConfig, type TabsConfig, type StudioTab, type AccordionConfig, type AccordionSection, type DashboardConfig, type MasterDetailConfig, type LookupConfig, type PivotConfig, type FilterPanelConfig, type RecordConfig, type BoardConfig, type CalendarConfig, type DetailConfig, type DetailRelated, type Reduce, type DataSourceKind, type EntityDataSource, type MemorySource, type RestSource, type RestAdapterConfig, type SqlSource, type SupabaseSource, type PgliteSource, type RestMethod, type ParamLocation, type ParamType, type RequestParam, type SqlDialectKind, type ProjectTheme, type ShellConfig, type ShellStyle, type ScreenTemplate, type PaletteItem, type ProjectIssue, } from './project.js';
 export { verifyScaffold, summarizeVerify, type VerifyResult, type VerifyIssue, type VerifySeverity, } from './verify.js';
-export { UI_COMPONENT_REGISTRY, uiComponentSpec, gridPropSurface, gridApiSettableProps, GRID_CURATED_PROPS, STANDARD_UI_EVENTS, type UiPropType, type UiPropGroup, type UiComponentEvent, type UiComponentProp, type UiComponentSpec, } from './ui-components.js';
+export { UI_COMPONENT_REGISTRY, uiComponentSpec, gridPropSurface, gridApiSettableProps, gridIconGroups, GRID_CURATED_PROPS, STANDARD_UI_EVENTS, type UiPropType, type UiPropGroup, type UiComponentEvent, type UiComponentProp, type UiComponentSpec, } from './ui-components.js';
 export { buildCopilotMessages, projectFromModelText, type CopilotMessages } from './copilot-core.js';
 export { resolveDeployTarget, deployCommands, missingEnvKeys, type DeployProvider, type DeployResolution, type DeployPlanCommands, } from './deploy-cli.js';
 export { runStudioAdd, runStudioAddApp, resolveSchema, resolveSchemas, type StudioIO, type AddOptions, type AddResult, type AddAppResult, } from './cli.js';

package/dist/studio/index.js

@@ -30,7 +30,7 @@ export { createProject, defaultScreenFor, defaultBlockConfig, gridColumns, entit
 // `form` so a built form travels with the entity rather than with one block.
 formPlan, setEntityForm, setFormColumns, addFormSection, updateFormSection, removeFormSection, moveFormSection, moveFormField, moveFormFields, setFieldConditions, updateEntityField, setFieldInput, setFieldHidden, formControlsFor, formControlSettings, suggestFormSections, addScreen, addFreestandingScreen, addScreenAction, removeScreenAction, enableScreenCode, disableScreenCode, setScreenRenderGrid, screenLayoutOf, buildDockLayout, reconcileDock, syncDockPanes, setScreenLayout, isPaneLayout, PANE_LAYOUTS, buildCanvasLayout, canvasRectOf, setCanvasRect, CANVAS_COLS, CANVAS_ROW_PX, CANVAS_GAP_PX, applyGridPreset, gridPresetLabel, GRID_PRESETS, setScreenDock, reseedScreenDock, setDockPaneTitle, dockPaneTitleOf, dockPaneIds, setLayoutOpts, gridOpts, stackOpts, splitOpts, dockOpts, canvasOpts, setHandlerBody, setScreenHandlersSource, setHandlerSteps, addHandlerStep, updateHandlerStep, moveHandlerStep, stepsToCode, compileStep, compileHandlerSteps, compileValue, compileCondition, compileTriggerStep, compileTriggerSteps, triggersOf, setTrigger, TRIGGER_EVENTS, setJob, setTenancy, tenantField, isTenantScoped, clickSlot, ssrScreenShape, ssrEligible, withSsrDefaults, setScreenRenderMode, eventSlot, rowSelectSlot, changeSlot, FORM_SUBMIT, GRID_EVENTS, addStateVar, updateStateVar, removeStateVar, stateInitExpr, stateTsType, setComponentName, setComponentBinding, componentHasBindings, componentHandleName, ON_LOAD, removeScreen, updateScreen, duplicateScreen, reorderScreen, insertBlock, setDataSource, setDeployTarget, setAuth, setDataLayer, seedUsers, defaultEntitySource, flattenBlocks, TAB_CHILD_KINDS, CONTAINER_CHILD_KINDS, CONTAINER_DISPLAY_KINDS, addTab, removeTab, renameTab, addTabBlock, addTabComponent, removeTabBlock, addAccordionSection, removeAccordionSection, renameAccordionSection, setAccordionMultiple, addAccordionBlock, addAccordionComponent, removeAccordionBlock, setEntityDataSource, entityDataSource, setTheme, setThemePreset, setShell, sanitizeProject, screenFromTemplate, addScreenFromTemplate, serializeProject, parseProject, validateProject, isProjectValid, blockColumns, blockStyleCss, blockClassName, sanitizeClassName, mergeBlockStyle, roleCanScreen, roleCanAction, CRUD_ACTIONS, } from './project.js';
 export { verifyScaffold, summarizeVerify, } from './verify.js';
-export { UI_COMPONENT_REGISTRY, uiComponentSpec, gridPropSurface, gridApiSettableProps, GRID_CURATED_PROPS, STANDARD_UI_EVENTS, } from './ui-components.js';
+export { UI_COMPONENT_REGISTRY, uiComponentSpec, gridPropSurface, gridApiSettableProps, gridIconGroups, GRID_CURATED_PROPS, STANDARD_UI_EVENTS, } from './ui-components.js';
 export { buildCopilotMessages, projectFromModelText } from './copilot-core.js';
 export { resolveDeployTarget, deployCommands, missingEnvKeys, } from './deploy-cli.js';
 export { runStudioAdd, runStudioAddApp, resolveSchema, resolveSchemas, } from './cli.js';

package/dist/studio/introspect-db.js

@@ -59,34 +59,34 @@ function sqliteFks(rows) {
 }
 const POSTGRES = {
     columns: (table) => ({
-        sql: `SELECT c.column_name AS name, c.data_type AS type,
-       CASE WHEN c.is_nullable = 'YES' THEN 1 ELSE 0 END AS nullable,
-       CASE WHEN pk.column_name IS NOT NULL THEN 1 ELSE 0 END AS pk
-FROM information_schema.columns c
-LEFT JOIN (
-  SELECT kcu.column_name
-  FROM information_schema.table_constraints tc
-  JOIN information_schema.key_column_usage kcu
-    ON kcu.constraint_name = tc.constraint_name AND kcu.table_name = tc.table_name
-  WHERE tc.constraint_type = 'PRIMARY KEY' AND tc.table_name = $1
-) pk ON pk.column_name = c.column_name
-WHERE c.table_name = $1
+        sql: `SELECT c.column_name AS name, c.data_type AS type,
+       CASE WHEN c.is_nullable = 'YES' THEN 1 ELSE 0 END AS nullable,
+       CASE WHEN pk.column_name IS NOT NULL THEN 1 ELSE 0 END AS pk
+FROM information_schema.columns c
+LEFT JOIN (
+  SELECT kcu.column_name
+  FROM information_schema.table_constraints tc
+  JOIN information_schema.key_column_usage kcu
+    ON kcu.constraint_name = tc.constraint_name AND kcu.table_name = tc.table_name
+  WHERE tc.constraint_type = 'PRIMARY KEY' AND tc.table_name = $1
+) pk ON pk.column_name = c.column_name
+WHERE c.table_name = $1
 ORDER BY c.ordinal_position`,
         params: [table],
     }),
     toFields: infoSchemaFields,
     tables: {
-        sql: `SELECT table_name AS name FROM information_schema.tables
+        sql: `SELECT table_name AS name FROM information_schema.tables
 WHERE table_schema = 'public' AND table_type = 'BASE TABLE' ORDER BY table_name`,
         params: [],
     },
     foreignKeys: (table) => ({
-        sql: `SELECT kcu.column_name AS "column", ccu.table_name AS ref_table, ccu.column_name AS ref_column
-FROM information_schema.table_constraints tc
-JOIN information_schema.key_column_usage kcu
-  ON kcu.constraint_name = tc.constraint_name AND kcu.table_name = tc.table_name
-JOIN information_schema.constraint_column_usage ccu
-  ON ccu.constraint_name = tc.constraint_name
+        sql: `SELECT kcu.column_name AS "column", ccu.table_name AS ref_table, ccu.column_name AS ref_column
+FROM information_schema.table_constraints tc
+JOIN information_schema.key_column_usage kcu
+  ON kcu.constraint_name = tc.constraint_name AND kcu.table_name = tc.table_name
+JOIN information_schema.constraint_column_usage ccu
+  ON ccu.constraint_name = tc.constraint_name
 WHERE tc.constraint_type = 'FOREIGN KEY' AND tc.table_name = $1`,
         params: [table],
     }),
@@ -94,23 +94,23 @@ WHERE tc.constraint_type = 'FOREIGN KEY' AND tc.table_name = $1`,
 };
 const MYSQL = {
     columns: (table) => ({
-        sql: `SELECT COLUMN_NAME AS name, DATA_TYPE AS type,
-       CASE WHEN IS_NULLABLE = 'YES' THEN 1 ELSE 0 END AS nullable,
-       CASE WHEN COLUMN_KEY = 'PRI' THEN 1 ELSE 0 END AS pk
-FROM information_schema.columns
-WHERE TABLE_NAME = ? AND TABLE_SCHEMA = DATABASE()
+        sql: `SELECT COLUMN_NAME AS name, DATA_TYPE AS type,
+       CASE WHEN IS_NULLABLE = 'YES' THEN 1 ELSE 0 END AS nullable,
+       CASE WHEN COLUMN_KEY = 'PRI' THEN 1 ELSE 0 END AS pk
+FROM information_schema.columns
+WHERE TABLE_NAME = ? AND TABLE_SCHEMA = DATABASE()
 ORDER BY ORDINAL_POSITION`,
         params: [table],
     }),
     toFields: infoSchemaFields,
     tables: {
-        sql: `SELECT TABLE_NAME AS name FROM information_schema.tables
+        sql: `SELECT TABLE_NAME AS name FROM information_schema.tables
 WHERE TABLE_SCHEMA = DATABASE() AND TABLE_TYPE = 'BASE TABLE' ORDER BY TABLE_NAME`,
         params: [],
     },
     foreignKeys: (table) => ({
-        sql: `SELECT COLUMN_NAME AS \`column\`, REFERENCED_TABLE_NAME AS ref_table, REFERENCED_COLUMN_NAME AS ref_column
-FROM information_schema.KEY_COLUMN_USAGE
+        sql: `SELECT COLUMN_NAME AS \`column\`, REFERENCED_TABLE_NAME AS ref_table, REFERENCED_COLUMN_NAME AS ref_column
+FROM information_schema.KEY_COLUMN_USAGE
 WHERE TABLE_SCHEMA = DATABASE() AND TABLE_NAME = ? AND REFERENCED_TABLE_NAME IS NOT NULL`,
         params: [table],
     }),
@@ -118,33 +118,33 @@ WHERE TABLE_SCHEMA = DATABASE() AND TABLE_NAME = ? AND REFERENCED_TABLE_NAME IS
 };
 const MSSQL = {
     columns: (table) => ({
-        sql: `SELECT c.COLUMN_NAME AS name, c.DATA_TYPE AS type,
-       CASE WHEN c.IS_NULLABLE = 'YES' THEN 1 ELSE 0 END AS nullable,
-       CASE WHEN pk.COLUMN_NAME IS NOT NULL THEN 1 ELSE 0 END AS pk
-FROM INFORMATION_SCHEMA.COLUMNS c
-LEFT JOIN (
-  SELECT ku.COLUMN_NAME
-  FROM INFORMATION_SCHEMA.TABLE_CONSTRAINTS tc
-  JOIN INFORMATION_SCHEMA.KEY_COLUMN_USAGE ku ON tc.CONSTRAINT_NAME = ku.CONSTRAINT_NAME
-  WHERE tc.CONSTRAINT_TYPE = 'PRIMARY KEY' AND tc.TABLE_NAME = @p1
-) pk ON pk.COLUMN_NAME = c.COLUMN_NAME
-WHERE c.TABLE_NAME = @p1
+        sql: `SELECT c.COLUMN_NAME AS name, c.DATA_TYPE AS type,
+       CASE WHEN c.IS_NULLABLE = 'YES' THEN 1 ELSE 0 END AS nullable,
+       CASE WHEN pk.COLUMN_NAME IS NOT NULL THEN 1 ELSE 0 END AS pk
+FROM INFORMATION_SCHEMA.COLUMNS c
+LEFT JOIN (
+  SELECT ku.COLUMN_NAME
+  FROM INFORMATION_SCHEMA.TABLE_CONSTRAINTS tc
+  JOIN INFORMATION_SCHEMA.KEY_COLUMN_USAGE ku ON tc.CONSTRAINT_NAME = ku.CONSTRAINT_NAME
+  WHERE tc.CONSTRAINT_TYPE = 'PRIMARY KEY' AND tc.TABLE_NAME = @p1
+) pk ON pk.COLUMN_NAME = c.COLUMN_NAME
+WHERE c.TABLE_NAME = @p1
 ORDER BY c.ORDINAL_POSITION`,
         params: [table],
     }),
     toFields: infoSchemaFields,
     tables: {
-        sql: `SELECT TABLE_NAME AS name FROM INFORMATION_SCHEMA.TABLES
+        sql: `SELECT TABLE_NAME AS name FROM INFORMATION_SCHEMA.TABLES
 WHERE TABLE_TYPE = 'BASE TABLE' ORDER BY TABLE_NAME`,
         params: [],
     },
     foreignKeys: (table) => ({
-        sql: `SELECT cu.COLUMN_NAME AS [column], pk.TABLE_NAME AS ref_table, pt.COLUMN_NAME AS ref_column
-FROM INFORMATION_SCHEMA.REFERENTIAL_CONSTRAINTS rc
-JOIN INFORMATION_SCHEMA.KEY_COLUMN_USAGE cu ON cu.CONSTRAINT_NAME = rc.CONSTRAINT_NAME
-JOIN INFORMATION_SCHEMA.TABLE_CONSTRAINTS pk ON pk.CONSTRAINT_NAME = rc.UNIQUE_CONSTRAINT_NAME
-JOIN INFORMATION_SCHEMA.KEY_COLUMN_USAGE pt
-  ON pt.CONSTRAINT_NAME = pk.CONSTRAINT_NAME AND pt.ORDINAL_POSITION = cu.ORDINAL_POSITION
+        sql: `SELECT cu.COLUMN_NAME AS [column], pk.TABLE_NAME AS ref_table, pt.COLUMN_NAME AS ref_column
+FROM INFORMATION_SCHEMA.REFERENTIAL_CONSTRAINTS rc
+JOIN INFORMATION_SCHEMA.KEY_COLUMN_USAGE cu ON cu.CONSTRAINT_NAME = rc.CONSTRAINT_NAME
+JOIN INFORMATION_SCHEMA.TABLE_CONSTRAINTS pk ON pk.CONSTRAINT_NAME = rc.UNIQUE_CONSTRAINT_NAME
+JOIN INFORMATION_SCHEMA.KEY_COLUMN_USAGE pt
+  ON pt.CONSTRAINT_NAME = pk.CONSTRAINT_NAME AND pt.ORDINAL_POSITION = cu.ORDINAL_POSITION
 WHERE cu.TABLE_NAME = @p1`,
         params: [table],
     }),

package/dist/studio/project.d.ts

@@ -209,6 +209,16 @@ export type GridConfig = {
      *  prop the curated controls don't manage. Passed straight through to `<SvGrid>`
      *  (deduped against the curated props at codegen time). */
     props?: Record<string, unknown>;
+    /** No-code icon overrides: a `GridIconName` from the grid's catalogue -> the glyph
+     *  that replaces the built-in one. Names left out keep their default, so a partial
+     *  map is all this ever needs to hold.
+     *
+     *  Deliberately NOT part of `props` above. SvGrid's `icons` prop takes a map of
+     *  SNIPPETS, and `props` is emitted with `JSON.stringify`, so an entry there would
+     *  generate `icons={{"sort-asc":"..."}}` and throw the moment the grid tried to
+     *  render it. This compiles to one real snippet per entry instead - which is also
+     *  why the extractor keeps `icons` out of the "All properties" panel. */
+    icons?: Record<string, string>;
 };
 /** Which calendar view the scheduler opens on / offers. */
 export type SchedulerViewMode = 'month' | 'week' | 'day' | 'agenda' | 'timelineDay' | 'timelineWeek' | 'timelineMonth' | 'timelineYear';

package/dist/studio/samples/crm.js

@@ -1,12 +1,12 @@
 import { screen, formScreen, boardScreen, schedulerScreen, workspaceScreen, detailScreen, project, dashScreen, statusPills, pad, ids, whenIs } from './shared.js';
 // Salesforce Lightning-style chrome: a gradient blue brand rail, white rounded-pill
 // nav with a solid-white active state, and a Lightning-blue rule under the toolbar.
-const LIGHTNING_CSS = `.sv-app.theme-lightning .sv-app__side { background: linear-gradient(180deg, #032d60, #0176d3); border-right: 0; }
-.sv-app.theme-lightning .sv-app__brandtext { color: #fff; font-weight: 800; letter-spacing: -0.01em; }
-.sv-app.theme-lightning .sv-app__link { color: #d9edff; font-weight: 600; border-radius: 9999px; padding: 8px 14px; }
-.sv-app.theme-lightning .sv-app__link:hover { background: rgba(255, 255, 255, 0.14); color: #fff; }
-.sv-app.theme-lightning .sv-app__link.is-active { background: #fff; color: #032d60; }
-.sv-app.theme-lightning .sv-app__collapse, .sv-app.theme-lightning .sv-app__foot { color: rgba(255, 255, 255, 0.72); }
+const LIGHTNING_CSS = `.sv-app.theme-lightning .sv-app__side { background: linear-gradient(180deg, #032d60, #0176d3); border-right: 0; }
+.sv-app.theme-lightning .sv-app__brandtext { color: #fff; font-weight: 800; letter-spacing: -0.01em; }
+.sv-app.theme-lightning .sv-app__link { color: #d9edff; font-weight: 600; border-radius: 9999px; padding: 8px 14px; }
+.sv-app.theme-lightning .sv-app__link:hover { background: rgba(255, 255, 255, 0.14); color: #fff; }
+.sv-app.theme-lightning .sv-app__link.is-active { background: #fff; color: #032d60; }
+.sv-app.theme-lightning .sv-app__collapse, .sv-app.theme-lightning .sv-app__foot { color: rgba(255, 255, 255, 0.72); }
 .sv-app.theme-lightning .sv-app__toolbar { border-bottom: 2px solid #0176d3; }`;
 // A fixed sales-rep pool, shared by deals + activities so leaderboards, pivots
 // and owner pills stay clean (padded rows cycle these instead of random names).

package/dist/studio/samples/fleet.js

@@ -2,13 +2,13 @@ import { screen, formScreen, schedulerScreen, detailScreen, project, dashScreen,
 // Industrial control-console chrome (the look of a LabVIEW / SystemLink operations
 // dashboard): a near-black rail, uppercase monospace nav labels, a cyan LED-style
 // active indicator, and a faint measurement grid over the content.
-const CONTROL_CSS = `.sv-app.theme-control .sv-app__side { background: #0a0e14; border-right: 1px solid #1b2430; }
-.sv-app.theme-control .sv-app__brandtext { color: #e6f6ff; font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; text-transform: uppercase; letter-spacing: 0.08em; font-size: 14px; }
-.sv-app.theme-control .sv-app__link { color: #9fb3c8; font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; border-radius: 4px; padding: 7px 12px; }
-.sv-app.theme-control .sv-app__link:hover { background: rgba(34, 211, 238, 0.08); color: #e6f6ff; }
-.sv-app.theme-control .sv-app__link.is-active { background: rgba(34, 211, 238, 0.14); color: #67e8f9; box-shadow: inset 3px 0 0 #22d3ee; }
-.sv-app.theme-control .sv-app__collapse, .sv-app.theme-control .sv-app__foot { color: #64798f; }
-.sv-app.theme-control .sv-app__toolbar { border-bottom: 1px solid #1b2430; }
+const CONTROL_CSS = `.sv-app.theme-control .sv-app__side { background: #0a0e14; border-right: 1px solid #1b2430; }
+.sv-app.theme-control .sv-app__brandtext { color: #e6f6ff; font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; text-transform: uppercase; letter-spacing: 0.08em; font-size: 14px; }
+.sv-app.theme-control .sv-app__link { color: #9fb3c8; font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; border-radius: 4px; padding: 7px 12px; }
+.sv-app.theme-control .sv-app__link:hover { background: rgba(34, 211, 238, 0.08); color: #e6f6ff; }
+.sv-app.theme-control .sv-app__link.is-active { background: rgba(34, 211, 238, 0.14); color: #67e8f9; box-shadow: inset 3px 0 0 #22d3ee; }
+.sv-app.theme-control .sv-app__collapse, .sv-app.theme-control .sv-app__foot { color: #64798f; }
+.sv-app.theme-control .sv-app__toolbar { border-bottom: 1px solid #1b2430; }
 .sv-app.theme-control .sv-app__content { background-image: linear-gradient(rgba(34, 211, 238, 0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(34, 211, 238, 0.045) 1px, transparent 1px); background-size: 28px 28px; }`;
 const drivers = {
     name: 'drivers',

package/dist/studio/samples/insurance.js

@@ -1,15 +1,15 @@
 import { screen, formScreen, boardScreen, calendarScreen, detailScreen, project, dashScreen, statusPills, pad, ids, whenIs } from './shared.js';
 // SAP Fiori-style chrome: a dark shell bar across the top (the toolbar), a white
 // launchpad-style rail, and a blue left-bar on the active item (square corners).
-const FIORI_CSS = `.sv-app.theme-fiori .sv-app__toolbar { background: #354a5f; border-bottom: 0; }
-.sv-app.theme-fiori .sv-app__search { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.24); }
-.sv-app.theme-fiori .sv-app__search-in { color: #fff; }
-.sv-app.theme-fiori .sv-app__search-in::placeholder { color: rgba(255, 255, 255, 0.72); }
-.sv-app.theme-fiori .sv-app__search-ic, .sv-app.theme-fiori .sv-app__kbd { color: #fff; }
-.sv-app.theme-fiori .sv-app__side { background: #fff; border-right: 1px solid #e5e5e5; }
-.sv-app.theme-fiori .sv-app__brandtext { color: #0a6ed1; font-weight: 700; }
-.sv-app.theme-fiori .sv-app__link { border-radius: 0; padding: 9px 12px; border-left: 3px solid transparent; color: #32363a; }
-.sv-app.theme-fiori .sv-app__link:hover { background: #f5f6f7; }
+const FIORI_CSS = `.sv-app.theme-fiori .sv-app__toolbar { background: #354a5f; border-bottom: 0; }
+.sv-app.theme-fiori .sv-app__search { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.24); }
+.sv-app.theme-fiori .sv-app__search-in { color: #fff; }
+.sv-app.theme-fiori .sv-app__search-in::placeholder { color: rgba(255, 255, 255, 0.72); }
+.sv-app.theme-fiori .sv-app__search-ic, .sv-app.theme-fiori .sv-app__kbd { color: #fff; }
+.sv-app.theme-fiori .sv-app__side { background: #fff; border-right: 1px solid #e5e5e5; }
+.sv-app.theme-fiori .sv-app__brandtext { color: #0a6ed1; font-weight: 700; }
+.sv-app.theme-fiori .sv-app__link { border-radius: 0; padding: 9px 12px; border-left: 3px solid transparent; color: #32363a; }
+.sv-app.theme-fiori .sv-app__link:hover { background: #f5f6f7; }
 .sv-app.theme-fiori .sv-app__link.is-active { background: #ebf5ff; color: #0a6ed1; border-left-color: #0a6ed1; font-weight: 600; }`;
 const policies = {
     name: 'policies',

package/dist/studio/samples/inventory.js

@@ -2,18 +2,18 @@ import { screen, formScreen, boardScreen, detailScreen, project, dashScreen, sta
 // Excel-style chrome: a green header band over the brand, a green command bar
 // (the toolbar), square-cornered nav rows with a green left-marker on the active
 // sheet. Pairs with the square-cornered `excel` preset.
-const EXCEL_CSS = `.sv-app.theme-excel .sv-app__side { background: #f3f2f1; border-right: 1px solid #d0cfce; padding: 0 0 12px; }
-.sv-app.theme-excel .sv-app__sidehead { background: #107c41; margin: 0 0 6px; padding: 13px 14px; }
-.sv-app.theme-excel .sv-app__brandtext { color: #fff; font-weight: 700; }
-.sv-app.theme-excel .sv-app__collapse { color: rgba(255, 255, 255, 0.85); }
-.sv-app.theme-excel .sv-app__links { padding: 0 8px; }
-.sv-app.theme-excel .sv-app__link { border-radius: 0; padding: 7px 12px; border-left: 3px solid transparent; }
-.sv-app.theme-excel .sv-app__link.is-active { background: #e7f2ec; color: #0b5c31; border-left-color: #107c41; font-weight: 600; }
-.sv-app.theme-excel .sv-app__foot { padding-left: 12px; }
-.sv-app.theme-excel .sv-app__toolbar { background: #107c41; border-bottom: 1px solid #0b5c31; }
-.sv-app.theme-excel .sv-app__search { background: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.3); }
-.sv-app.theme-excel .sv-app__search-in { color: #fff; }
-.sv-app.theme-excel .sv-app__search-in::placeholder { color: rgba(255, 255, 255, 0.78); }
+const EXCEL_CSS = `.sv-app.theme-excel .sv-app__side { background: #f3f2f1; border-right: 1px solid #d0cfce; padding: 0 0 12px; }
+.sv-app.theme-excel .sv-app__sidehead { background: #107c41; margin: 0 0 6px; padding: 13px 14px; }
+.sv-app.theme-excel .sv-app__brandtext { color: #fff; font-weight: 700; }
+.sv-app.theme-excel .sv-app__collapse { color: rgba(255, 255, 255, 0.85); }
+.sv-app.theme-excel .sv-app__links { padding: 0 8px; }
+.sv-app.theme-excel .sv-app__link { border-radius: 0; padding: 7px 12px; border-left: 3px solid transparent; }
+.sv-app.theme-excel .sv-app__link.is-active { background: #e7f2ec; color: #0b5c31; border-left-color: #107c41; font-weight: 600; }
+.sv-app.theme-excel .sv-app__foot { padding-left: 12px; }
+.sv-app.theme-excel .sv-app__toolbar { background: #107c41; border-bottom: 1px solid #0b5c31; }
+.sv-app.theme-excel .sv-app__search { background: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.3); }
+.sv-app.theme-excel .sv-app__search-in { color: #fff; }
+.sv-app.theme-excel .sv-app__search-in::placeholder { color: rgba(255, 255, 255, 0.78); }
 .sv-app.theme-excel .sv-app__search-ic, .sv-app.theme-excel .sv-app__kbd { color: #fff; }`;
 const suppliers = {
     name: 'suppliers',

package/dist/studio/samples/projects.js

@@ -1,11 +1,11 @@
 import { screen, formScreen, boardScreen, schedulerScreen, detailScreen, project, dashScreen, statusPills, pad, ids } from './shared.js';
 // Jira-style chrome: a dark navy issue-tracker sidebar with muted labels and a
 // blue active row (accent bar + tinted fill), the board front and centre.
-const JIRA_CSS = `.sv-app.theme-jira .sv-app__side { background: #1d2125; border-right: 1px solid #2c333a; }
-.sv-app.theme-jira .sv-app__brandtext { color: #fff; font-weight: 700; }
-.sv-app.theme-jira .sv-app__link { color: #c7d1db; border-radius: 4px; padding: 7px 12px; }
-.sv-app.theme-jira .sv-app__link:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
-.sv-app.theme-jira .sv-app__link.is-active { background: color-mix(in srgb, #0c66e4 30%, #1d2125); color: #fff; box-shadow: inset 3px 0 0 #4c9aff; }
+const JIRA_CSS = `.sv-app.theme-jira .sv-app__side { background: #1d2125; border-right: 1px solid #2c333a; }
+.sv-app.theme-jira .sv-app__brandtext { color: #fff; font-weight: 700; }
+.sv-app.theme-jira .sv-app__link { color: #c7d1db; border-radius: 4px; padding: 7px 12px; }
+.sv-app.theme-jira .sv-app__link:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
+.sv-app.theme-jira .sv-app__link.is-active { background: color-mix(in srgb, #0c66e4 30%, #1d2125); color: #fff; box-shadow: inset 3px 0 0 #4c9aff; }
 .sv-app.theme-jira .sv-app__collapse, .sv-app.theme-jira .sv-app__foot { color: #8c9bab; }`;
 const projectsEntity = {
     name: 'projects',

package/dist/studio/samples/support.js

@@ -1,14 +1,14 @@
 import { screen, formScreen, boardScreen, workspaceScreen, detailScreen, project, dashScreen, statusPills, pad, ids, whenIsAny } from './shared.js';
 // Outlook-style chrome: a solid blue command ribbon (the toolbar), a light "folder"
 // rail with compact rows, and an accented left bar on the active folder.
-const OUTLOOK_CSS = `.sv-app.theme-outlook .sv-app__toolbar { background: #0f6cbd; border-bottom: 0; }
-.sv-app.theme-outlook .sv-app__toolbar, .sv-app.theme-outlook .sv-app__search-ic, .sv-app.theme-outlook .sv-app__kbd { color: #fff; }
-.sv-app.theme-outlook .sv-app__search { background: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.28); }
-.sv-app.theme-outlook .sv-app__search-in { color: #fff; }
-.sv-app.theme-outlook .sv-app__search-in::placeholder { color: rgba(255, 255, 255, 0.75); }
-.sv-app.theme-outlook .sv-app__side { background: #faf9f8; padding: 12px 8px; }
-.sv-app.theme-outlook .sv-app__brandtext { color: #0f6cbd; font-weight: 700; }
-.sv-app.theme-outlook .sv-app__link { border-radius: 4px; padding: 6px 12px; font-size: 13.5px; }
+const OUTLOOK_CSS = `.sv-app.theme-outlook .sv-app__toolbar { background: #0f6cbd; border-bottom: 0; }
+.sv-app.theme-outlook .sv-app__toolbar, .sv-app.theme-outlook .sv-app__search-ic, .sv-app.theme-outlook .sv-app__kbd { color: #fff; }
+.sv-app.theme-outlook .sv-app__search { background: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.28); }
+.sv-app.theme-outlook .sv-app__search-in { color: #fff; }
+.sv-app.theme-outlook .sv-app__search-in::placeholder { color: rgba(255, 255, 255, 0.75); }
+.sv-app.theme-outlook .sv-app__side { background: #faf9f8; padding: 12px 8px; }
+.sv-app.theme-outlook .sv-app__brandtext { color: #0f6cbd; font-weight: 700; }
+.sv-app.theme-outlook .sv-app__link { border-radius: 4px; padding: 6px 12px; font-size: 13.5px; }
 .sv-app.theme-outlook .sv-app__link.is-active { background: color-mix(in srgb, #0f6cbd 12%, #fff); color: #0f6cbd; box-shadow: inset 3px 0 0 #0f6cbd; }`;
 const customers = {
     name: 'customers',

package/dist/studio/scaffold-app.js

@@ -18,90 +18,90 @@ function layoutFile(nav, appTitle, theme) {
     return {
         path: 'src/routes/+layout.svelte',
         description: 'App shell: a collapsible nav sidebar linking every entity screen (an off-canvas drawer on tablet/phone), with the routed page in the main area.',
-        contents: `<script lang="ts">
-${managed(`  let { children } = $props()
-  const appTitle = ${JSON.stringify(appTitle)}
-  const nav = ${JSON.stringify(nav)}
-
-  // The sidebar collapses to an off-canvas drawer either on user request or on
-  // tablet / phone (<= 1024px), where it also starts collapsed. The desktop
-  // collapse choice persists across visits.
-  let navOpen = $state(false)
-  let collapsed = $state(false)
-  let narrow = $state(false)
-  const drawer = $derived(collapsed || narrow)
-  function toggleNav() { collapsed = !collapsed; try { localStorage.setItem('svapp:nav', collapsed ? 'c' : 'e') } catch (_) { /* storage blocked */ } }
-  $effect(() => {
-    const mq = window.matchMedia('(max-width: 1024px)')
-    const sync = () => (narrow = mq.matches)
-    sync()
-    try { const s = localStorage.getItem('svapp:nav'); if (s) collapsed = s === 'c' } catch (_) { /* storage blocked */ }
-    mq.addEventListener('change', sync)
-    return () => mq.removeEventListener('change', sync)
-  })`)}
-</script>
-
-<svelte:head><style>
-${themeTokenCss(theme, { layer: 'svgrid-studio' })}
-</style></svelte:head>
-
-<div class="app-shell" class:is-drawer={drawer} class:is-navopen={navOpen}>
-  <header class="app-shell__mobilebar">
-    <button type="button" class="app-shell__burger" aria-label="Toggle navigation" aria-expanded={navOpen} onclick={() => (navOpen = !navOpen)}>
-      <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M3 6h18M3 12h18M3 18h18"/></svg>
-    </button>
-    <a class="app-shell__brand" href="/">{appTitle}</a>
-    {#if !narrow}<button type="button" class="app-shell__dock" aria-label="Dock sidebar" title="Dock sidebar" onclick={toggleNav}>
-      <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 6l6 6-6 6"/></svg>
-    </button>{/if}
-  </header>
-  {#if navOpen}<button type="button" class="app-shell__backdrop" aria-label="Close navigation" onclick={() => (navOpen = false)}></button>{/if}
-  <aside class="app-shell__nav">
-    <div class="app-shell__navhead">
-      <a class="app-shell__brand" href="/">{appTitle}</a>
-      <button type="button" class="app-shell__collapse" aria-label="Collapse sidebar" title="Collapse sidebar" onclick={toggleNav}>
-        <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 6l-6 6 6 6"/></svg>
-      </button>
-    </div>
-    <nav onclick={() => (navOpen = false)}>
-      {#each nav as item (item.href)}
-        <a class="app-shell__link" href={item.href}>{item.label}</a>
-      {/each}
-    </nav>
-  </aside>
-  <main class="app-shell__main">
-    {@render children?.()}
-  </main>
-</div>
-
-<style>
-  .app-shell { display: grid; grid-template-columns: 220px 1fr; min-height: 100vh; }
-  .app-shell__nav { display: flex; flex-direction: column; gap: 4px; padding: 16px 12px; border-right: 1px solid #e5e7eb; background: #f8fafc; }
-  .app-shell__navhead { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
-  .app-shell__brand { font-weight: 700; font-size: 16px; padding: 6px 10px 12px; color: inherit; text-decoration: none; }
-  .app-shell__navhead .app-shell__brand { padding-bottom: 6px; }
-  .app-shell__collapse, .app-shell__dock, .app-shell__burger { display: inline-flex; align-items: center; justify-content: center; padding: 6px; border: 0; border-radius: 8px; background: transparent; color: #64748b; cursor: pointer; }
-  .app-shell__collapse:hover, .app-shell__dock:hover, .app-shell__burger:hover { background: #e2e8f0; color: #0f172a; }
-  .app-shell__link { padding: 8px 10px; border-radius: 6px; color: #334155; text-decoration: none; }
-  .app-shell__link:hover { background: #e2e8f0; }
-  .app-shell nav { display: flex; flex-direction: column; gap: 4px; }
-  .app-shell__main { padding: 20px 24px; min-width: 0; }
-  .app-shell__mobilebar { display: none; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid #e5e7eb; background: #f8fafc; position: sticky; top: 0; z-index: 50; }
-  .app-shell__mobilebar .app-shell__dock { margin-left: auto; }
-  .app-shell__backdrop { display: none; position: fixed; inset: 0; z-index: 55; border: 0; padding: 0; background: rgba(15, 23, 42, 0.42); cursor: pointer; }
-  /* Drawer mode: tablet / phone (<= 1024px) or a user-collapsed desktop sidebar.
-     The sidebar becomes a fixed off-canvas panel that slides in when opened. */
-  .app-shell.is-drawer { display: block; }
-  .app-shell.is-drawer .app-shell__mobilebar { display: flex; }
-  .app-shell.is-drawer .app-shell__backdrop { display: block; }
-  .app-shell.is-drawer .app-shell__nav {
-    position: fixed; top: 0; bottom: 0; left: 0; z-index: 60; width: 264px; max-width: 82vw;
-    transform: translateX(-100%); transition: transform 0.24s ease; box-shadow: 0 0 40px rgba(15, 23, 42, 0.28);
-  }
-  .app-shell.is-drawer.is-navopen .app-shell__nav { transform: translateX(0); }
-  .app-shell.is-drawer .app-shell__navhead .app-shell__brand { display: none; } /* brand already in the top bar */
-  .app-shell.is-drawer .app-shell__collapse { display: none; } /* dock lives in the top bar when drawered */
-</style>
+        contents: `<script lang="ts">
+${managed(`  let { children } = $props()
+  const appTitle = ${JSON.stringify(appTitle)}
+  const nav = ${JSON.stringify(nav)}
+
+  // The sidebar collapses to an off-canvas drawer either on user request or on
+  // tablet / phone (<= 1024px), where it also starts collapsed. The desktop
+  // collapse choice persists across visits.
+  let navOpen = $state(false)
+  let collapsed = $state(false)
+  let narrow = $state(false)
+  const drawer = $derived(collapsed || narrow)
+  function toggleNav() { collapsed = !collapsed; try { localStorage.setItem('svapp:nav', collapsed ? 'c' : 'e') } catch (_) { /* storage blocked */ } }
+  $effect(() => {
+    const mq = window.matchMedia('(max-width: 1024px)')
+    const sync = () => (narrow = mq.matches)
+    sync()
+    try { const s = localStorage.getItem('svapp:nav'); if (s) collapsed = s === 'c' } catch (_) { /* storage blocked */ }
+    mq.addEventListener('change', sync)
+    return () => mq.removeEventListener('change', sync)
+  })`)}
+</script>
+
+<svelte:head><style>
+${themeTokenCss(theme, { layer: 'svgrid-studio' })}
+</style></svelte:head>
+
+<div class="app-shell" class:is-drawer={drawer} class:is-navopen={navOpen}>
+  <header class="app-shell__mobilebar">
+    <button type="button" class="app-shell__burger" aria-label="Toggle navigation" aria-expanded={navOpen} onclick={() => (navOpen = !navOpen)}>
+      <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M3 6h18M3 12h18M3 18h18"/></svg>
+    </button>
+    <a class="app-shell__brand" href="/">{appTitle}</a>
+    {#if !narrow}<button type="button" class="app-shell__dock" aria-label="Dock sidebar" title="Dock sidebar" onclick={toggleNav}>
+      <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 6l6 6-6 6"/></svg>
+    </button>{/if}
+  </header>
+  {#if navOpen}<button type="button" class="app-shell__backdrop" aria-label="Close navigation" onclick={() => (navOpen = false)}></button>{/if}
+  <aside class="app-shell__nav">
+    <div class="app-shell__navhead">
+      <a class="app-shell__brand" href="/">{appTitle}</a>
+      <button type="button" class="app-shell__collapse" aria-label="Collapse sidebar" title="Collapse sidebar" onclick={toggleNav}>
+        <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 6l-6 6 6 6"/></svg>
+      </button>
+    </div>
+    <nav onclick={() => (navOpen = false)}>
+      {#each nav as item (item.href)}
+        <a class="app-shell__link" href={item.href}>{item.label}</a>
+      {/each}
+    </nav>
+  </aside>
+  <main class="app-shell__main">
+    {@render children?.()}
+  </main>
+</div>
+
+<style>
+  .app-shell { display: grid; grid-template-columns: 220px 1fr; min-height: 100vh; }
+  .app-shell__nav { display: flex; flex-direction: column; gap: 4px; padding: 16px 12px; border-right: 1px solid #e5e7eb; background: #f8fafc; }
+  .app-shell__navhead { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
+  .app-shell__brand { font-weight: 700; font-size: 16px; padding: 6px 10px 12px; color: inherit; text-decoration: none; }
+  .app-shell__navhead .app-shell__brand { padding-bottom: 6px; }
+  .app-shell__collapse, .app-shell__dock, .app-shell__burger { display: inline-flex; align-items: center; justify-content: center; padding: 6px; border: 0; border-radius: 8px; background: transparent; color: #64748b; cursor: pointer; }
+  .app-shell__collapse:hover, .app-shell__dock:hover, .app-shell__burger:hover { background: #e2e8f0; color: #0f172a; }
+  .app-shell__link { padding: 8px 10px; border-radius: 6px; color: #334155; text-decoration: none; }
+  .app-shell__link:hover { background: #e2e8f0; }
+  .app-shell nav { display: flex; flex-direction: column; gap: 4px; }
+  .app-shell__main { padding: 20px 24px; min-width: 0; }
+  .app-shell__mobilebar { display: none; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid #e5e7eb; background: #f8fafc; position: sticky; top: 0; z-index: 50; }
+  .app-shell__mobilebar .app-shell__dock { margin-left: auto; }
+  .app-shell__backdrop { display: none; position: fixed; inset: 0; z-index: 55; border: 0; padding: 0; background: rgba(15, 23, 42, 0.42); cursor: pointer; }
+  /* Drawer mode: tablet / phone (<= 1024px) or a user-collapsed desktop sidebar.
+     The sidebar becomes a fixed off-canvas panel that slides in when opened. */
+  .app-shell.is-drawer { display: block; }
+  .app-shell.is-drawer .app-shell__mobilebar { display: flex; }
+  .app-shell.is-drawer .app-shell__backdrop { display: block; }
+  .app-shell.is-drawer .app-shell__nav {
+    position: fixed; top: 0; bottom: 0; left: 0; z-index: 60; width: 264px; max-width: 82vw;
+    transform: translateX(-100%); transition: transform 0.24s ease; box-shadow: 0 0 40px rgba(15, 23, 42, 0.28);
+  }
+  .app-shell.is-drawer.is-navopen .app-shell__nav { transform: translateX(0); }
+  .app-shell.is-drawer .app-shell__navhead .app-shell__brand { display: none; } /* brand already in the top bar */
+  .app-shell.is-drawer .app-shell__collapse { display: none; } /* dock lives in the top bar when drawered */
+</style>
 `,
     };
 }
@@ -109,26 +109,26 @@ function homeFile(nav, appTitle) {
     return {
         path: 'src/routes/+page.svelte',
         description: 'Home page: cards linking to each entity screen.',
-        contents: `<script lang="ts">
-${managed(`  const appTitle = ${JSON.stringify(appTitle)}
-  const entities = ${JSON.stringify(nav)}`)}
-</script>
-
-<section class="home">
-  <h2 class="home__title">{appTitle}</h2>
-  <div class="home__grid">
-    {#each entities as item (item.href)}
-      <a class="home__card" href={item.href}>{item.label}</a>
-    {/each}
-  </div>
-</section>
-
-<style>
-  .home__title { margin: 0 0 16px; font-size: 20px; font-weight: 600; }
-  .home__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
-  .home__card { display: block; padding: 18px 16px; border: 1px solid #e5e7eb; border-radius: 10px; color: inherit; text-decoration: none; font-weight: 600; }
-  .home__card:hover { border-color: #94a3b8; background: #f8fafc; }
-</style>
+        contents: `<script lang="ts">
+${managed(`  const appTitle = ${JSON.stringify(appTitle)}
+  const entities = ${JSON.stringify(nav)}`)}
+</script>
+
+<section class="home">
+  <h2 class="home__title">{appTitle}</h2>
+  <div class="home__grid">
+    {#each entities as item (item.href)}
+      <a class="home__card" href={item.href}>{item.label}</a>
+    {/each}
+  </div>
+</section>
+
+<style>
+  .home__title { margin: 0 0 16px; font-size: 20px; font-weight: 600; }
+  .home__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
+  .home__card { display: block; padding: 18px 16px; border: 1px solid #e5e7eb; border-radius: 10px; color: inherit; text-decoration: none; font-weight: 600; }
+  .home__card:hover { border-color: #94a3b8; background: #f8fafc; }
+</style>
 `,
     };
 }