@svgrid/enterprise 2.6.2 → 2.6.4

package/dist/designer/index.html

@@ -4,11 +4,13 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>SvGrid Studio - Designer</title>
-    <script type="module" crossorigin src="./assets/index-xjfKckuH.js"></script>
+    <script type="module" crossorigin src="./assets/index-DxBZuosR.js"></script>
     <link rel="modulepreload" crossorigin href="./assets/rolldown-runtime-Dd_uD5pT.js">
     <link rel="modulepreload" crossorigin href="./assets/disclose-version-CIm4S9xS.js">
     <link rel="modulepreload" crossorigin href="./assets/export-format-DwjuTfrQ.js">
-    <link rel="modulepreload" crossorigin href="./assets/js-scroller.svelte-CGkUUXwV.js">
+    <link rel="modulepreload" crossorigin href="./assets/js-scroller.svelte-03aI6ovu.js">
+    <link rel="modulepreload" crossorigin href="./assets/SvGrid.helpers-C6wxF55r.js">
+    <link rel="modulepreload" crossorigin href="./assets/editor-registry-BB1Qb5mp.js">
     <link rel="modulepreload" crossorigin href="./assets/dismissable-2EZKoens.js">
     <link rel="modulepreload" crossorigin href="./assets/popover-CUkLsvRX.js">
     <link rel="modulepreload" crossorigin href="./assets/SvDateTimePicker-DOBYyLeN.js">
@@ -16,13 +18,13 @@
     <link rel="modulepreload" crossorigin href="./assets/easing-zaypKrr0.js">
     <link rel="modulepreload" crossorigin href="./assets/chart-DHEgt4lN.js">
     <link rel="modulepreload" crossorigin href="./assets/SvGridChart-BEDNTdc5.js">
-    <link rel="modulepreload" crossorigin href="./assets/src-DDhAK0WP.js">
-    <link rel="modulepreload" crossorigin href="./assets/SvListBox-BB8rt4aP.js">
+    <link rel="modulepreload" crossorigin href="./assets/src-Dn1Axx6T.js">
+    <link rel="modulepreload" crossorigin href="./assets/SvListBox-D-_I_Aff.js">
     <link rel="stylesheet" crossorigin href="./assets/dismissable-BF-9TJSd.css">
     <link rel="stylesheet" crossorigin href="./assets/SvDateTimePicker-Cygij-dr.css">
     <link rel="stylesheet" crossorigin href="./assets/SvGridDropdown-Crwb2P3Q.css">
     <link rel="stylesheet" crossorigin href="./assets/SvGridChart-Vu4Nvjiv.css">
-    <link rel="stylesheet" crossorigin href="./assets/src-BT3LjWJL.css">
+    <link rel="stylesheet" crossorigin href="./assets/src-D8qr49rE.css">
     <link rel="stylesheet" crossorigin href="./assets/SvListBox-BMSfFJJT.css">
     <link rel="stylesheet" crossorigin href="./assets/index-BfzoL904.css">
   </head>

package/dist/license-core.d.ts

@@ -29,7 +29,7 @@ export type LicenseInfo = {
  * in that position) yields null, which reads as "no expiry encoded".
  *
  * Boundaries are UTC so a key does not lapse at a different instant per
- * timezone. Kept in sync with `tools/issue-license.mjs`.
+ * timezone. Kept in sync with the (maintainer-side) key issuer.
  */
 export declare function parseLicenseExpiry(key: string | null | undefined): Date | null;
 /** Classify a license key string. Pure and side-effect-free.

package/dist/license-core.js

@@ -23,7 +23,7 @@ export const VALID_PREFIX = 'SVENTERPRISE-';
  * in that position) yields null, which reads as "no expiry encoded".
  *
  * Boundaries are UTC so a key does not lapse at a different instant per
- * timezone. Kept in sync with `tools/issue-license.mjs`.
+ * timezone. Kept in sync with the (maintainer-side) key issuer.
  */
 export function parseLicenseExpiry(key) {
     if (!key)

package/dist/node/studio.js

@@ -1,5 +1,5 @@
-import { isRangeOperator, isSetOperator, isValuelessOperator } from "@svgrid/grid/filtering";
 import { defaultThemePreset, getThemePreset, resolveThemeTokens as resolveThemeTokens$1, themePresets } from "@svgrid/grid/themes";
+import { isRangeOperator, isSetOperator, isValuelessOperator } from "@svgrid/grid/filtering";
 //#region src/schema.ts
 /** `first_name` / `firstName` / `first-name` -> `First Name`. */
 function titleCase$2(field) {
@@ -1479,6 +1479,72 @@ function redactConnectionString(value) {
 	}
 }
 //#endregion
+//#region src/studio/themes.ts
+/**
+* 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 every emitted output - `app.css` for the full
+* app and the fragment, the `<svelte:head>` of the CLI `add` scaffolds - via
+* `themeTokenCss` below, the single place the token CSS is built.
+*/
+/** The built-in Studio themes, in gallery order (default first). */
+var studioThemes = themePresets;
+/** The default theme (used when a project has no `preset`). */
+var defaultStudioTheme = defaultThemePreset;
+/** Look up a theme by id. */
+var getStudioTheme = (id) => getThemePreset(id);
+/** True when the project's theme is rendering in dark mode. */
+var 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. */
+function resolveThemeTokens(theme) {
+	const preset = getStudioTheme(theme?.preset) ?? defaultStudioTheme;
+	const mode = theme?.mode === "dark" ? "dark" : "light";
+	return resolveThemeTokens$1(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). */
+function resolveThemeTokensFor(theme, mode) {
+	const preset = getStudioTheme(theme?.preset) ?? defaultStudioTheme;
+	return resolveThemeTokens$1(preset, mode, theme?.accent);
+}
+/**
+* The `--sg-*` token rules for a project theme, as CSS text. `:root` carries
+* the mode picked in Studio (what the server-rendered page shows before
+* hydration), and both palettes are scoped by `[data-theme]` on `<html>` for
+* the generated app's light/dark switcher. An explicit accent override is
+* applied to both. No theme -> the default preset, so every output is themed.
+*
+* `layer` wraps the rules in a cascade layer. Use it for drop-in outputs (the
+* fragment, `svgrid-studio add`): layered declarations lose to unlayered ones,
+* so a host app that already defines its own `--sg-*` tokens keeps winning.
+*/
+function themeTokenCss(theme, opts = {}) {
+	const decl = (m) => Object.entries(m).map(([k, v]) => `  ${k}: ${v};`).join("\n");
+	const mode = isDarkTheme(theme) ? "dark" : "light";
+	const light = resolveThemeTokensFor(theme, "light");
+	const dark = resolveThemeTokensFor(theme, "dark");
+	const rules = [
+		`:root {\n${decl(mode === "dark" ? dark : light)}\n  color-scheme: ${mode};\n}`,
+		`:root[data-theme="light"] {\n${decl(light)}\n  color-scheme: light;\n}`,
+		`:root[data-theme="dark"] {\n${decl(dark)}\n  color-scheme: dark;\n}`
+	].join("\n");
+	return opts.layer ? `@layer ${opts.layer} {\n${rules}\n}` : rules;
+}
+/** An inline `style` string (`--sg-x: y; ...; color-scheme; font-family`) for previews. */
+function themeStyleString(theme) {
+	const tokens = resolveThemeTokens(theme);
+	return `${Object.entries(tokens).map(([k, v]) => `${k}: ${v}`).join("; ")}; color-scheme: ${isDarkTheme(theme) ? "dark" : "light"}; font-family: ${tokens["--sg-font"]}`;
+}
+//#endregion
 //#region src/studio/scaffold.ts
 /**
 * scaffold - turn an `EntitySchema` into runnable SvelteKit files. The shared
@@ -1704,6 +1770,13 @@ ${managed$1(serverBody)}
 ${managed$1(pageBody)}
 <\/script>
 
+<svelte:head><style>
+${themeTokenCss({
+				preset: options.theme,
+				mode: options.dark ? "dark" : "light"
+			}, { layer: "svgrid-studio" })}
+</style></svelte:head>
+
 <div class="page">
   <header class="page__toolbar">
     <h2 class="page__title">${label}</h2>
@@ -1803,7 +1876,7 @@ function mergeManaged(existing, generated) {
 */
 var MANAGED_NOTE = "// Regenerated by SvGrid Studio. Edits inside these markers are overwritten.";
 var managed = (body) => `${MANAGED_START}\n${MANAGED_NOTE}\n${body}\n${MANAGED_END}`;
-function layoutFile$1(nav, appTitle) {
+function layoutFile$1(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.",
@@ -1830,6 +1903,10 @@ ${managed(`  let { children } = $props()
   })`)}
 <\/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)}>
@@ -1927,7 +2004,10 @@ function scaffoldApp(schemas, options = {}) {
 		href: `/${s.name}`,
 		label: s.label ?? titleCase$2(s.name)
 	}));
-	files.push(layoutFile$1(nav, appTitle), homeFile$1(nav, appTitle));
+	files.push(layoutFile$1(nav, appTitle, {
+		preset: options.theme,
+		mode: options.dark ? "dark" : "light"
+	}), homeFile$1(nav, appTitle));
 	return { files };
 }
 //#endregion
@@ -8594,7 +8674,7 @@ var GENERATED_UI_SURFACE = {
 				"key": "sortable",
 				"label": "Sortable",
 				"type": "boolean",
-				"description": "Convenience shortcuts to switch a whole capability on without wiring `features` or the finer-grained props by hand. Every capability is OFF by default - a bare grid is a plain read-only table - so set the shortcut `true` to opt in. (`false` / omitted both leave it off; the shortcut is mainly there to turn things ON.) `sortable` - column sorting (injects `rowSortingFeature`) `filterable` - column filtering (injects `columnFilteringFeature`) `editable` - inline cell editing (alias of `enableInlineEditing`) `groupable` - row grouping controls(alias of `showGroupingControls`, also injects `columnGroupingFeature`) `pageable` - pagination footer (alias of `showPagination`) Fine-grained props (`enableInlineEditing`, `showPagination`, ...) still work; the shortcut wins only when it is explicitly set.",
+				"description": "Convenience shortcuts to switch a whole capability on without wiring `features` or the finer-grained props by hand. Every capability is OFF by default - a bare grid is a plain read-only table - so set the shortcut `true` to opt in. (`false` / omitted both leave it off; the shortcut is mainly there to turn things ON.) `sortable` - column sorting (injects `rowSortingFeature`) `filterable` - column filtering (injects `columnFilteringFeature`) `editable` - inline cell editing (alias of `enableInlineEditing`) `selectable` - cell selection (alias of `enableCellSelection`) `groupable` - row grouping controls(alias of `showGroupingControls`, also injects `columnGroupingFeature`) `pageable` - pagination footer (alias of `showPagination`) Fine-grained props (`enableInlineEditing`, `showPagination`, ...) still work; the shortcut wins only when it is explicitly set.",
 				"group": "common"
 			},
 			{
@@ -8609,6 +8689,13 @@ var GENERATED_UI_SURFACE = {
 				"type": "boolean",
 				"group": "common"
 			},
+			{
+				"key": "selectable",
+				"label": "Selectable",
+				"type": "boolean",
+				"description": "Cell selection - click a cell to select it, drag or shift-click to extend the selection to a range. Alias of `enableCellSelection`, and the highest priority of the three inputs that decide it: `selectable` -> `enableCellSelection` -> `selectionMode`. NOTE the asymmetry with its siblings, which are all off until you opt in: this one is **ON by default**, because `selectionMode` defaults to `'both'`. It is named here so the capability is discoverable next to the other shortcuts, and so `selectable={false}` is a one-word way to turn cell selection off (the longhand being `selectionMode=\"none\"`, which also removes the row-selection surface). This is the CELL surface only. The selection **checkbox column** is the other half of `selectionMode`, controlled by `showRowSelection` - also on by default, and it needs no feature import (verified: the column renders and toggles rows with an empty `features` set). Use `selectionMode` when you want to move both surfaces at once.",
+				"group": "common"
+			},
 			{
 				"key": "treeData",
 				"label": "Tree Data",
@@ -15320,22 +15407,7 @@ function layoutFile(nav, opts = {}) {
 	const footer = shell.footer === void 0 ? "Built with SvGrid Studio" : shell.footer;
 	const right = style === "sidebar" && shell.navPosition === "right";
 	const defaultMode = opts.dark ? "dark" : "light";
-	const withAccent = (m) => {
-		const v = { ...m ?? {} };
-		if (opts.accent) v["--sg-accent"] = opts.accent;
-		return v;
-	};
-	const declLines = (m) => Object.entries(m).map(([k, v]) => `${k}: ${v};`).join(" ");
-	const hasSwitch = !!(opts.lightVars && opts.darkVars);
-	let themeHead = "";
-	if (hasSwitch) {
-		const lv = withAccent(opts.lightVars);
-		const dv = withAccent(opts.darkVars);
-		themeHead = `\n<svelte:head><style>:root { ${[declLines(defaultMode === "dark" ? dv : lv), `color-scheme: ${defaultMode};`].join(" ")} }\n:root[data-theme="light"] { ${[declLines(lv), "color-scheme: light;"].join(" ")} }\n:root[data-theme="dark"] { ${[declLines(dv), "color-scheme: dark;"].join(" ")} }</style></svelte:head>\n`;
-	} else {
-		const rootRule = [declLines(withAccent(opts.themeVars)), opts.dark ? "color-scheme: dark;" : ""].filter(Boolean).join(" ");
-		themeHead = rootRule ? `\n<svelte:head><style>:root { ${rootRule} }</style></svelte:head>\n` : "";
-	}
+	const hasSwitch = !!opts.themeSwitch;
 	const anchor = `<a class="sv-app__link" class:is-active={page.url.pathname === item.href} href={item.href}>${opts.i18n ? `{item.id ? $t('nav.' + item.id, item.label) : item.label}` : "{item.label}"}</a>`;
 	const linkGate = opts.access ? `{#if !item.id || canScreen($currentRole, item.id)}${anchor}{/if}` : anchor;
 	const localeSwitcher = opts.i18n ? `\n      <select class="sv-app__locale" aria-label="Language" onchange={(e) => currentLocale.set(e.currentTarget.value as typeof $currentLocale)}>
@@ -15524,7 +15596,7 @@ function layoutFile(nav, opts = {}) {
   $effect(() => { void page.url.pathname; navOpen = false })${hasSwitch ? `
   // Light/dark switcher: defaults to the mode picked in Studio, then honours the
   // visitor's saved choice. Applies via [data-theme] on <html> (see the token
-  // sets in <svelte:head>), and persists per browser.
+  // sets in app.css), and persists per browser.
   let theme = $state<'light' | 'dark'>('${defaultMode}')
   function applyTheme(t: 'light' | 'dark') {
     theme = t
@@ -15562,7 +15634,6 @@ function layoutFile(nav, opts = {}) {
   // Close both menus on route change.
   $effect(() => { void page.url.pathname; bellOpen = false; menuOpen = false })` : ""}
 <\/script>
-${themeHead}
 
 ${opts.auth ? `{#if ${JSON.stringify(opts.authRoutes ?? ["/login"])}.includes(page.url.pathname)}
 {@render children()}
@@ -15728,47 +15799,6 @@ function emitStudioApp(schemas) {
 	];
 }
 //#endregion
-//#region src/studio/themes.ts
-/**
-* 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`.
-*/
-/** The built-in Studio themes, in gallery order (default first). */
-var studioThemes = themePresets;
-/** The default theme (used when a project has no `preset`). */
-var defaultStudioTheme = defaultThemePreset;
-/** Look up a theme by id. */
-var getStudioTheme = (id) => getThemePreset(id);
-/** True when the project's theme is rendering in dark mode. */
-var 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. */
-function resolveThemeTokens(theme) {
-	const preset = getStudioTheme(theme?.preset) ?? defaultStudioTheme;
-	const mode = theme?.mode === "dark" ? "dark" : "light";
-	return resolveThemeTokens$1(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). */
-function resolveThemeTokensFor(theme, mode) {
-	const preset = getStudioTheme(theme?.preset) ?? defaultStudioTheme;
-	return resolveThemeTokens$1(preset, mode, theme?.accent);
-}
-/** An inline `style` string (`--sg-x: y; ...; color-scheme; font-family`) for previews. */
-function themeStyleString(theme) {
-	const tokens = resolveThemeTokens(theme);
-	return `${Object.entries(tokens).map(([k, v]) => `${k}: ${v}`).join("; ")}; color-scheme: ${isDarkTheme(theme) ? "dark" : "light"}; font-family: ${tokens["--sg-font"]}`;
-}
-//#endregion
 //#region src/edit-panel.ts
 /** True when any field's behaviour depends on the values (i.e. has a `when`). */
 function hasFieldConditions(schema) {
@@ -15788,7 +15818,7 @@ function hasFieldConditions(schema) {
 *
 * `version.test.ts` asserts this matches `package.json`, so the two cannot drift.
 */
-var SVGRID_VERSION = "2.6.2";
+var SVGRID_VERSION = "2.6.4";
 //#endregion
 //#region src/studio/emit-project.ts
 var has = (blocks, kind) => blocks.some((b) => b.config.kind === kind);
@@ -18310,12 +18340,9 @@ function emitStudioProject(project) {
 		...companions,
 		...handleFiles,
 		layoutFile(navExtras, {
-			accent: project.theme?.accent,
 			shell: project.theme?.shell,
 			title: project.title,
-			themeVars: resolveThemeTokens(project.theme),
-			lightVars: resolveThemeTokensFor(project.theme, "light"),
-			darkVars: resolveThemeTokensFor(project.theme, "dark"),
+			themeSwitch: true,
 			dark: isDarkTheme(project.theme),
 			access: accessEnabled,
 			auth: authEnabled && !supabaseAuth,
@@ -20268,8 +20295,15 @@ var SCAFFOLD_STATIC = [
 		contents: `node_modules\n.svelte-kit\n/build\n.env\n.env.*\n!.env.example\n.DS_Store\n`
 	}
 ];
-var APP_CSS = `:root { --sg-accent: #4f46e5; color-scheme: light dark; }
-* { box-sizing: border-box; }
+/** `src/app.css`: the project's theme tokens (see `themeTokenCss`) followed by the
+*  `.st-*` page styles every generated screen uses. This is the ONE place the tokens
+*  are emitted, so the fragment (which drops the layout) and the full app are
+*  themed alike. `layer` is for drop-in outputs - see `themeTokenCss`. */
+function appCss(project, opts = {}) {
+	return `${themeTokenCss(project.theme, opts)}
+${APP_CSS_BODY}`;
+}
+var APP_CSS_BODY = `* { box-sizing: border-box; }
 html, body { margin: 0; height: 100%; }
 body { font-family: var(--sg-font, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif); color: var(--sg-fg, #0f172a); background: var(--sg-bg, #fff); }
 .st__title { margin: 0; font-size: 22px; font-weight: 720; letter-spacing: -0.015em; }
@@ -20813,8 +20847,8 @@ function emitStudioAppBundle(project) {
 		}] : [],
 		{
 			path: "src/app.css",
-			description: "App theme + page styles.",
-			contents: APP_CSS
+			description: "App theme tokens + page styles.",
+			contents: appCss(project)
 		},
 		{
 			path: "src/custom.css",
@@ -20889,7 +20923,9 @@ ${depList}
 
 ## 3. Styles
 Import \`src/app.css\` once (e.g. in your root \`+layout.svelte\`) - it carries the
-\`.st-*\` page styles the screens use and the \`--sg-*\` design tokens.
+\`.st-*\` page styles the screens use and the \`--sg-*\` design tokens of the theme
+picked in Studio. The tokens sit in a cascade layer (\`@layer svgrid-studio\`), so if
+your app already defines its own \`--sg-*\` tokens, yours keep winning.
 
 ## 4. What your app must provide
 The full-app nav shell, home redirect, auth guard, RBAC bootstrap, i18n provider,
@@ -20903,8 +20939,8 @@ ${libFiles.join("\n")}
 		...content,
 		{
 			path: "src/app.css",
-			description: "Page styles (.st-*) + design tokens - import once in your layout.",
-			contents: APP_CSS
+			description: "Theme tokens (layered, so yours win) + page styles (.st-*) - import once in your layout.",
+			contents: appCss(project, { layer: "svgrid-studio" })
 		},
 		{
 			path: "FRAGMENT.md",
@@ -40918,14 +40954,14 @@ async function askScreens(schemas, flags, prompts) {
 async function askTheme(flags, prompts) {
 	let preset = flags.theme?.trim().toLowerCase();
 	if (preset && !getStudioTheme(preset)) {
-		prompts.say(`  ! Unknown theme "${preset}" - using tailwind.`);
+		prompts.say(`  ! Unknown theme "${preset}" - using ember.`);
 		preset = void 0;
 	}
 	if (!preset && !flags.yes) preset = studioThemes[await pick(prompts, "Theme:", studioThemes.map((t) => ({
 		label: t.name,
 		hint: t.id
 	})))]?.id;
-	preset ??= "tailwind";
+	preset ??= "ember";
 	const dark = flags.dark ?? (flags.yes ? false : isYes(await prompts.ask("Dark mode? (y/N)", "n"), false));
 	return {
 		preset,
@@ -41438,7 +41474,7 @@ var REVOKED_KEYS = /* @__PURE__ */ new Set([]);
 * in that position) yields null, which reads as "no expiry encoded".
 *
 * Boundaries are UTC so a key does not lapse at a different instant per
-* timezone. Kept in sync with `tools/issue-license.mjs`.
+* timezone. Kept in sync with the (maintainer-side) key issuer.
 */
 function parseLicenseExpiry(key) {
 	if (!key) return null;

package/dist/studio/emit-project.js

@@ -1,7 +1,7 @@
 import { tenantField, isTenantScoped } from './project.js';
 import { blockColumns, blockStyleCss, blockClassName, sanitizeClassName, componentHandleName, componentHasBindings, entityDataSource, flattenBlocks, serializeProject, seedUsers, compileHandlerSteps, rowSelectSlot, eventSlot, FORM_SUBMIT, GRID_EVENTS, screenLayoutOf, isPaneLayout, canvasRectOf, CANVAS_ROW_PX, CANVAS_GAP_PX, gridOpts, stackOpts, splitOpts, dockOpts, canvasOpts, stateInitExpr, stateTsType, reconcileDock, ON_LOAD, ON_DESTROY, isSsrScreen, ssrScreenShape } from './project.js';
 import { uiComponentSpec, gridApiSettableProps, STANDARD_UI_EVENTS } from './ui-components.js';
-import { resolveThemeTokens, resolveThemeTokensFor, isDarkTheme } from './themes.js';
+import { isDarkTheme, themeTokenCss } from './themes.js';
 import { hasFieldConditions } from '../edit-panel.js';
 import { SVGRID_VERSION } from '../version.js';
 import { emitEntityModules, homeFile, layoutFile, lookupVar, namesFor, prepareEntities, relationDisplayFields, sqlDdlFiles } from './emit-schema.js';
@@ -3048,7 +3048,7 @@ export function emitStudioProject(project) {
         navExtras = [...navExtras, { href: '/users', label: 'Users', id: '__users__' }];
     const i18nFiles = i18nEnabled ? [i18nModule(project)] : [];
     const handleFiles = project.screens.some(screenHasCode) ? [handlesModuleFile()] : [];
-    return [...files, ...accessFiles, ...authFileList, ...dataLayerList, ...ddlFiles, ...auditFiles, ...jobFileList, ...tenantFileList, ...i18nFiles, ...actionRouteFiles, ...ssrHelpers, ...pages, ...companions, ...handleFiles, layoutFile(navExtras, { accent: project.theme?.accent, shell: project.theme?.shell, title: project.title, themeVars: resolveThemeTokens(project.theme), lightVars: resolveThemeTokensFor(project.theme, 'light'), darkVars: resolveThemeTokensFor(project.theme, 'dark'), dark: isDarkTheme(project.theme), access: accessEnabled, auth: authEnabled && !supabaseAuth, supabaseAuth, authRoutes: publicAuthRoutes, authAccount: dbBackedAuth, i18n: i18nEnabled, appClass: project.theme?.appClass }), homeFile(navExtras)];
+    return [...files, ...accessFiles, ...authFileList, ...dataLayerList, ...ddlFiles, ...auditFiles, ...jobFileList, ...tenantFileList, ...i18nFiles, ...actionRouteFiles, ...ssrHelpers, ...pages, ...companions, ...handleFiles, layoutFile(navExtras, { shell: project.theme?.shell, title: project.title, themeSwitch: true, dark: isDarkTheme(project.theme), access: accessEnabled, auth: authEnabled && !supabaseAuth, supabaseAuth, authRoutes: publicAuthRoutes, authAccount: dbBackedAuth, i18n: i18nEnabled, appClass: project.theme?.appClass }), homeFile(navExtras)];
 }
 /** The default-locale (`en`) message catalog, keyed for nav, screen titles, the
  *  New button, and grid column headers - the strings the app renders. */
@@ -4832,8 +4832,15 @@ const SCAFFOLD_STATIC = [
     { path: '.npmrc', description: 'npm config.', contents: `engine-strict=false\n` },
     { path: '.gitignore', description: 'git ignore.', contents: `node_modules\n.svelte-kit\n/build\n.env\n.env.*\n!.env.example\n.DS_Store\n` },
 ];
-const APP_CSS = `:root { --sg-accent: #4f46e5; color-scheme: light dark; }
-* { box-sizing: border-box; }
+/** `src/app.css`: the project's theme tokens (see `themeTokenCss`) followed by the
+ *  `.st-*` page styles every generated screen uses. This is the ONE place the tokens
+ *  are emitted, so the fragment (which drops the layout) and the full app are
+ *  themed alike. `layer` is for drop-in outputs - see `themeTokenCss`. */
+function appCss(project, opts = {}) {
+    return `${themeTokenCss(project.theme, opts)}
+${APP_CSS_BODY}`;
+}
+const APP_CSS_BODY = `* { box-sizing: border-box; }
 html, body { margin: 0; height: 100%; }
 body { font-family: var(--sg-font, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif); color: var(--sg-fg, #0f172a); background: var(--sg-bg, #fff); }
 .st__title { margin: 0; font-size: 22px; font-weight: 720; letter-spacing: -0.015em; }
@@ -5390,7 +5397,7 @@ export function emitStudioAppBundle(project) {
         ...SCAFFOLD_STATIC,
         ...(envExample(allSource) ? [{ path: '.env.example', description: 'Environment variables the app reads (copy to .env and fill in).', contents: envExample(allSource) }] : []),
         ...(envDotFile(allSource) ? [{ path: '.env', description: 'Local env (git-ignored): a real random SESSION_SECRET is pre-filled so sessions are secure out of the box; fill in the rest.', contents: envDotFile(allSource) }] : []),
-        { path: 'src/app.css', description: 'App theme + page styles.', contents: APP_CSS },
+        { path: 'src/app.css', description: 'App theme tokens + page styles.', contents: appCss(project) },
         // Your styles: a dedicated CSS file the layout imports AFTER app.css, so its rules
         // win. Edited in the designer's Styles panel; regenerated from the model.
         { path: 'src/custom.css', description: 'Your custom styles (edited in the designer; imported after app.css so it overrides).', contents: `/* Your custom styles. Edit in the designer's Styles panel, or here after ejecting.\n   Imported after app.css, so these rules override the defaults. */\n${project.theme?.customCss ? `\n${project.theme.customCss}\n` : ''}` },
@@ -5445,7 +5452,9 @@ ${depList}
 
 ## 3. Styles
 Import \`src/app.css\` once (e.g. in your root \`+layout.svelte\`) - it carries the
-\`.st-*\` page styles the screens use and the \`--sg-*\` design tokens.
+\`.st-*\` page styles the screens use and the \`--sg-*\` design tokens of the theme
+picked in Studio. The tokens sit in a cascade layer (\`@layer svgrid-studio\`), so if
+your app already defines its own \`--sg-*\` tokens, yours keep winning.
 
 ## 4. What your app must provide
 The full-app nav shell, home redirect, auth guard, RBAC bootstrap, i18n provider,
@@ -5457,7 +5466,7 @@ ${libFiles.join('\n')}
 `;
     return [
         ...content,
-        { path: 'src/app.css', description: 'Page styles (.st-*) + design tokens - import once in your layout.', contents: APP_CSS },
+        { path: 'src/app.css', description: 'Theme tokens (layered, so yours win) + page styles (.st-*) - import once in your layout.', contents: appCss(project, { layer: 'svgrid-studio' }) },
         { path: 'FRAGMENT.md', description: 'How to drop this fragment into an existing SvelteKit app.', contents: fragmentMd },
     ];
 }

package/dist/studio/emit-schema.d.ts

@@ -58,12 +58,9 @@ export type NavItem = {
     id?: string;
 };
 export declare function layoutFile(nav: NavItem[], opts?: {
-    accent?: string;
     shell?: ShellConfig;
     title?: string;
-    themeVars?: Record<string, string>;
-    lightVars?: Record<string, string>;
-    darkVars?: Record<string, string>;
+    themeSwitch?: boolean;
     dark?: boolean;
     access?: boolean;
     auth?: boolean;

package/dist/studio/emit-schema.js

@@ -666,34 +666,13 @@ export function layoutFile(nav, opts = {}) {
     const brand = (shell.brand ?? '').trim() || opts.title || 'My Studio App';
     const footer = shell.footer === undefined ? 'Built with SvGrid Studio' : shell.footer;
     const right = style === 'sidebar' && shell.navPosition === 'right';
-    // Emit the full theme token bundle so the generated app matches the look chosen
-    // in the designer. When both light + dark token sets are supplied we ship a
-    // built-in light/dark switcher: both sets are scoped by [data-theme] on <html>,
-    // and the bare :root falls back to the mode picked in Studio (pre-hydration).
+    // The theme tokens themselves live in src/app.css (imported below) - see
+    // `themeTokenCss` - so the fragment, which drops this file, stays themed too.
+    // `themeSwitch` ships the built-in light/dark toggle: app.css scopes both
+    // palettes by [data-theme] on <html>, and the bare :root falls back to the mode
+    // picked in Studio (pre-hydration).
     const defaultMode = opts.dark ? 'dark' : 'light';
-    const withAccent = (m) => {
-        const v = { ...(m ?? {}) };
-        if (opts.accent)
-            v['--sg-accent'] = opts.accent;
-        return v;
-    };
-    const declLines = (m) => Object.entries(m).map(([k, v]) => `${k}: ${v};`).join(' ');
-    const hasSwitch = !!(opts.lightVars && opts.darkVars);
-    let themeHead = '';
-    if (hasSwitch) {
-        const lv = withAccent(opts.lightVars);
-        const dv = withAccent(opts.darkVars);
-        const defRule = [declLines(defaultMode === 'dark' ? dv : lv), `color-scheme: ${defaultMode};`].join(' ');
-        const lightRule = [declLines(lv), 'color-scheme: light;'].join(' ');
-        const darkRule = [declLines(dv), 'color-scheme: dark;'].join(' ');
-        themeHead = `\n<svelte:head><style>:root { ${defRule} }\n:root[data-theme="light"] { ${lightRule} }\n:root[data-theme="dark"] { ${darkRule} }</style></svelte:head>\n`;
-    }
-    else {
-        const vars = withAccent(opts.themeVars);
-        const varLines = declLines(vars);
-        const rootRule = [varLines, opts.dark ? 'color-scheme: dark;' : ''].filter(Boolean).join(' ');
-        themeHead = rootRule ? `\n<svelte:head><style>:root { ${rootRule} }</style></svelte:head>\n` : '';
-    }
+    const hasSwitch = !!opts.themeSwitch;
     // i18n: translate nav labels via `nav.<id>` keys (Home has no id -> literal).
     const navLabel = opts.i18n ? `{item.id ? $t('nav.' + item.id, item.label) : item.label}` : '{item.label}';
     const anchor = `<a class="sv-app__link" class:is-active={page.url.pathname === item.href} href={item.href}>${navLabel}</a>`;
@@ -932,7 +911,7 @@ export function layoutFile(nav, opts = {}) {
   $effect(() => { void page.url.pathname; navOpen = false })${hasSwitch ? `
   // Light/dark switcher: defaults to the mode picked in Studio, then honours the
   // visitor's saved choice. Applies via [data-theme] on <html> (see the token
-  // sets in <svelte:head>), and persists per browser.
+  // sets in app.css), and persists per browser.
   let theme = $state<'light' | 'dark'>('${defaultMode}')
   function applyTheme(t: 'light' | 'dark') {
     theme = t
@@ -970,7 +949,6 @@ export function layoutFile(nav, opts = {}) {
   // Close both menus on route change.
   $effect(() => { void page.url.pathname; bellOpen = false; menuOpen = false })` : ''}
 </script>
-${themeHead}
 
 ${opts.auth ? `{#if ${JSON.stringify(opts.authRoutes ?? ['/login'])}.includes(page.url.pathname)}
 {@render children()}

package/dist/studio/init-flow.js

@@ -335,14 +335,14 @@ async function askScreens(schemas, flags, prompts) {
 async function askTheme(flags, prompts) {
     let preset = flags.theme?.trim().toLowerCase();
     if (preset && !getStudioTheme(preset)) {
-        prompts.say(`  ! Unknown theme "${preset}" - using tailwind.`);
+        prompts.say(`  ! Unknown theme "${preset}" - using ember.`);
         preset = undefined;
     }
     if (!preset && !flags.yes) {
         const i = await pick(prompts, 'Theme:', studioThemes.map((t) => ({ label: t.name, hint: t.id })));
         preset = studioThemes[i]?.id;
     }
-    preset ?? (preset = 'tailwind');
+    preset ?? (preset = 'ember');
     const dark = flags.dark ?? (flags.yes ? false : isYes(await prompts.ask('Dark mode? (y/N)', 'n'), false));
     return { preset, mode: dark ? 'dark' : 'light' };
 }

package/dist/studio/scaffold-app.d.ts

@@ -16,6 +16,14 @@ export type ScaffoldAppOptions = {
     dataSource?: ScaffoldOptions['dataSource'];
     /** App title shown in the nav + home. Default `'Data App'`. */
     appTitle?: string;
+    /**
+     * Theme preset id (one of `@svgrid/grid/themes`; default: the house Ember
+     * preset) and starting mode. The tokens are emitted in the page's
+     * `<svelte:head>` inside `@layer svgrid-studio`, so an app that already
+     * defines its own `--sg-*` tokens keeps its look.
+     */
+    theme?: string;
+    dark?: boolean;
 };
 export declare function scaffoldApp(schemas: EntitySchema[], options?: ScaffoldAppOptions): {
     files: GeneratedFile[];

package/dist/studio/scaffold-app.js

@@ -11,9 +11,10 @@
  */
 import { linkRelationLabels, titleCase } from '../schema.js';
 import { scaffold, MANAGED_START, MANAGED_END } from './scaffold.js';
+import { themeTokenCss } from './themes.js';
 const MANAGED_NOTE = '// Regenerated by SvGrid Studio. Edits inside these markers are overwritten.';
 const managed = (body) => `${MANAGED_START}\n${MANAGED_NOTE}\n${body}\n${MANAGED_END}`;
-function layoutFile(nav, appTitle) {
+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.',
@@ -40,6 +41,10 @@ ${managed(`  let { children } = $props()
   })`)}
 </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)}>
@@ -138,6 +143,6 @@ export function scaffoldApp(schemas, options = {}) {
         files.push(...scaffold(schema, { dataSource: options.dataSource }).files);
     }
     const nav = linked.map((s) => ({ href: `/${s.name}`, label: s.label ?? titleCase(s.name) }));
-    files.push(layoutFile(nav, appTitle), homeFile(nav, appTitle));
+    files.push(layoutFile(nav, appTitle, { preset: options.theme, mode: options.dark ? 'dark' : 'light' }), homeFile(nav, appTitle));
     return { files };
 }

package/dist/studio/scaffold.d.ts

@@ -27,6 +27,14 @@ export type GeneratedFile = {
 export type ScaffoldOptions = {
     /** Route segment for the page, defaults to the schema name. e.g. `'customers'`. */
     route?: string;
+    /**
+     * Theme preset id (one of `@svgrid/grid/themes`; default: the house Ember
+     * preset) and starting mode. The tokens are emitted in the page's
+     * `<svelte:head>` inside `@layer svgrid-studio`, so an app that already
+     * defines its own `--sg-*` tokens keeps its look.
+     */
+    theme?: string;
+    dark?: boolean;
     /** API route the page talks to, defaults to `/api/{route}`. */
     apiRoute?: string;
     /** `$lib` path for the generated schema module, defaults to `$lib/{route}.schema`. */

package/dist/studio/scaffold.js

@@ -14,6 +14,7 @@
  * omitted from the emitted schema with a note to re-add them by hand.
  */
 import { resolveIdField } from '../schema.js';
+import { themeTokenCss } from './themes.js';
 const DRIVERS = {
     postgres: {
         imports: `import pg from 'pg'`,
@@ -257,6 +258,10 @@ ${managed(serverBody)}
 ${managed(pageBody)}
 </script>
 
+<svelte:head><style>
+${themeTokenCss({ preset: options.theme, mode: options.dark ? 'dark' : 'light' }, { layer: 'svgrid-studio' })}
+</style></svelte:head>
+
 <div class="page">
   <header class="page__toolbar">
     <h2 class="page__title">${label}</h2>