@svgrid/enterprise 2.6.3 → 2.7.0

package/dist/pivot.js

@@ -233,7 +233,7 @@ parentId) {
     // regardless of `rowSubtotals` so the grouping hierarchy and the
     // expand/collapse parent chain stay intact; the flag only controls whether
     // the header carries its aggregate (subtotal) values or renders as a
-    // label-only row. This matches Excel / AG Grid, where hiding subtotals never
+    // label-only row. This matches Excel, where hiding subtotals never
     // removes a grouping level from the row axis.
     const isRealGroup = node.level > 0 && node.level < rowFields.length;
     let nextParentId = parentId;
@@ -259,6 +259,11 @@ parentId) {
     }
 }
 // ------------------------------------------------------------ public API
+/**
+ * Build a pivot table from flat rows: cross the row axis with the column axis,
+ * aggregate each intersection, and return rows plus generated columns ready to
+ * hand to `<SvGrid>`.
+ */
 export function createPivotModel(data, config) {
     if (config.values.length === 0) {
         throw new Error('pivot: at least one value config is required');

package/dist/selection-bar.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Register the Enterprise selection bar. Idempotent - safe to call from every
+ * component that uses `selectionBar`, or once at app start. Also invoked by
+ * {@link installEnterprise} so wiring the Pro API turns the bar on too.
+ */
+export declare function enableSelectionBar(): void;
+export { default as SvGridSelectionBar } from './SvGridSelectionBar.svelte';

package/dist/selection-bar.js

@@ -0,0 +1,42 @@
+/**
+ * selection bar - registers the Enterprise bulk-action bar with the grid, so
+ * `<SvGrid selectionBar={...}>` floats a bar over the rows while any are
+ * selected: the count, the actions that apply to the whole selection, an
+ * overflow menu once there are more than a handful, and a clear button.
+ *
+ * The grid ships the `selectionBar` prop and its config types for free; the
+ * *renderer* (SvGridSelectionBar) is Pro and plugs in through the grid's
+ * `registerSelectionBarView` seam. Without it the grid shows a short upsell
+ * note where the bar would be.
+ *
+ * Soft-gated like the rest of Enterprise: it works without a license key but
+ * the grid shows the "unlicensed" watermark + a one-time console nudge.
+ *
+ * ```ts
+ * import { setLicenseKey, enableSelectionBar } from '@svgrid/enterprise'
+ * setLicenseKey('YOUR-KEY')
+ * enableSelectionBar()
+ * // then:
+ * // <SvGrid {data} {columns} showRowSelection
+ * //   selectionBar={{ position: 'bottom', actions: [...] }} />
+ * ```
+ */
+import { registerSelectionBarView } from '@svgrid/grid';
+import { isLicenseKeySet } from './license';
+import { emitUnlicensedNudge } from './watermark';
+import SvGridSelectionBar from './SvGridSelectionBar.svelte';
+let enabled = false;
+/**
+ * Register the Enterprise selection bar. Idempotent - safe to call from every
+ * component that uses `selectionBar`, or once at app start. Also invoked by
+ * {@link installEnterprise} so wiring the Pro API turns the bar on too.
+ */
+export function enableSelectionBar() {
+    if (enabled)
+        return;
+    enabled = true;
+    registerSelectionBarView(SvGridSelectionBar);
+    if (!isLicenseKeySet())
+        emitUnlicensedNudge();
+}
+export { default as SvGridSelectionBar } from './SvGridSelectionBar.svelte';

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';
@@ -195,6 +195,12 @@ function blockMarkup(entity, schemaVar, typeName, block, resolve, ctx = { hasRec
                 return fire ? `(${param}) => { ${base}${fire} }` : `(${param}) => ${base}`;
             };
             const lines = [`data={${dataExpr}}`, `columns={${colVar}}`, `loading={${tree || grouped ? '!allRowsReady' : 'view.loading'}}`, `loadingOverlay`, `emptyMessage=${JSON.stringify(emptyMsg)}`, `fitColumns`];
+            // Emitted explicitly in BOTH directions on purpose. The grid now defaults
+            // this off and takes `summary` as a shortcut, but generated apps install
+            // the PUBLISHED @svgrid/grid, where the default is still on and `summary`
+            // does not exist yet. Switching to `summary` (or dropping the `false`)
+            // before that release would silently give every generated screen the
+            // wrong footer. Revisit once the grid carrying the flip is published.
             lines.push(`enableRowSummaries={${cfg.rowSummaries ? 'true' : 'false'}}`);
             if (cfg.striped)
                 lines.push(`zebraRows`);
@@ -3048,7 +3054,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 +4838,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 +5403,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 +5458,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 +5472,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>

package/dist/studio/themes.d.ts

@@ -9,7 +9,9 @@
  * 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`.
+ * 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.
  */
 import { type ThemeMode, type ThemePalette, type ThemePreset } from '@svgrid/grid/themes';
 import type { ProjectTheme } from './project.js';
@@ -30,5 +32,19 @@ export declare function resolveThemeTokens(theme?: ProjectTheme): Record<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>;
+/**
+ * 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.
+ */
+export declare function themeTokenCss(theme?: ProjectTheme, opts?: {
+    layer?: 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

@@ -9,7 +9,9 @@
  * 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`.
+ * 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.
  */
 import { themePresets, defaultThemePreset, getThemePreset, resolveThemeTokens as resolveTokens, } from '@svgrid/grid/themes';
 /** The built-in Studio themes, in gallery order (default first). */
@@ -33,6 +35,29 @@ export function resolveThemeTokensFor(theme, mode) {
     const preset = getStudioTheme(theme?.preset) ?? defaultStudioTheme;
     return resolveTokens(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.
+ */
+export 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. */
 export function themeStyleString(theme) {
     const tokens = resolveThemeTokens(theme);