@svgrid/enterprise 3.0.0 → 3.0.2

package/dist/studio/emit-schema.js

@@ -236,14 +236,14 @@ function schemasModule(entries) {
     return {
         path: 'src/lib/schemas.ts',
         description: 'One EntitySchema per entity, generated from your schema. Add computed fields, hooks, or validators here.',
-        contents: `/**
- * Generated from your schema by \`npm create @svgrid/studio --from\`. Each
- * EntitySchema drives the grid columns, the edit form, and validation. Add a
- * field here (and to its type) and it shows up in the grid and the form.
- */
-import type { EntitySchema } from '@svgrid/enterprise'
-
-${body}
+        contents: `/**
+ * Generated from your schema by \`npm create @svgrid/studio --from\`. Each
+ * EntitySchema drives the grid columns, the edit form, and validation. Add a
+ * field here (and to its type) and it shows up in the grid and the form.
+ */
+import type { EntitySchema } from '@svgrid/enterprise'
+
+${body}
 `,
     };
 }
@@ -365,22 +365,22 @@ function sqlRouteFile(schema, table, dialect, feat = {}) {
     return {
         path: `src/routes/api/${n.route}/+server.ts`,
         description: `Connected API route for ${n.label} (SQL via DATABASE_URL). Runs server-side.`,
-        contents: `${driver.imports}
-import { env } from '$env/dynamic/private'
-import { createKitHandlers, createSqlDataSource } from '@svgrid/enterprise'
-import { ${n.schemaVar}, type ${n.type} } from '$lib/schemas'${accessImport}${auditImport}${tenantImport}
-
-${driver.setup}
-
-const source = createSqlDataSource<${n.type}>({
-  schema: ${n.schemaVar},
-  table: ${JSON.stringify(table)},${feat.dbSchema ? `\n  dbSchema: ${JSON.stringify(feat.dbSchema)},` : ''}${dialectLiteral ? `\n  dialect: ${dialectLiteral},` : ''}
-  execute: async (text, params) => {
-    ${driver.exec}
-  },
-})
-
-${handlers}
+        contents: `${driver.imports}
+import { env } from '$env/dynamic/private'
+import { createKitHandlers, createSqlDataSource } from '@svgrid/enterprise'
+import { ${n.schemaVar}, type ${n.type} } from '$lib/schemas'${accessImport}${auditImport}${tenantImport}
+
+${driver.setup}
+
+const source = createSqlDataSource<${n.type}>({
+  schema: ${n.schemaVar},
+  table: ${JSON.stringify(table)},${feat.dbSchema ? `\n  dbSchema: ${JSON.stringify(feat.dbSchema)},` : ''}${dialectLiteral ? `\n  dialect: ${dialectLiteral},` : ''}
+  execute: async (text, params) => {
+    ${driver.exec}
+  },
+})
+
+${handlers}
 `,
     };
 }
@@ -405,27 +405,27 @@ function pgliteBootstrap(tables, seed) {
         const rows = curated ?? seed.get(schema.name) ?? [];
         seeds.push(`  await _pgSeed(${JSON.stringify(table)}, ${JSON.stringify(rows)}, ${JSON.stringify(schema.fields.map((f) => f.field))})`);
     }
-    return `// Embedded Postgres (PGlite), persisted in the browser (IndexedDB) - a real,
-// persistent database with ZERO backend setup. To go to production, bind these
-// entities to a hosted SQL source (same schema) instead.
-const pg = new PGlite('idb://svgrid-studio')
-const pgReady = (async () => {
-  await pg.exec(\`
-    ${ddls.join('\n    ')}
-  \`)
-${seeds.join('\n')}
-})()
-async function _pgSeed(table: string, rows: Record<string, unknown>[], cols: string[]): Promise<void> {
-  if (!rows.length) return
-  const existing = await pg.query(\`select count(*)::int as n from "\${table}"\`)
-  if (((existing.rows[0] as { n?: number } | undefined)?.n ?? 0) > 0) return // already seeded
-  for (const row of rows) {
-    await pg.query(
-      \`insert into "\${table}" (\${cols.map((c) => '"' + c + '"').join(', ')}) values (\${cols.map((_, i) => '$' + (i + 1)).join(', ')})\`,
-      cols.map((c) => { const v = row[c]; return v != null && typeof v === 'object' ? JSON.stringify(v) : (v ?? null) }),
-    )
-  }
-}
+    return `// Embedded Postgres (PGlite), persisted in the browser (IndexedDB) - a real,
+// persistent database with ZERO backend setup. To go to production, bind these
+// entities to a hosted SQL source (same schema) instead.
+const pg = new PGlite('idb://svgrid-studio')
+const pgReady = (async () => {
+  await pg.exec(\`
+    ${ddls.join('\n    ')}
+  \`)
+${seeds.join('\n')}
+})()
+async function _pgSeed(table: string, rows: Record<string, unknown>[], cols: string[]): Promise<void> {
+  if (!rows.length) return
+  const existing = await pg.query(\`select count(*)::int as n from "\${table}"\`)
+  if (((existing.rows[0] as { n?: number } | undefined)?.n ?? 0) > 0) return // already seeded
+  for (const row of rows) {
+    await pg.query(
+      \`insert into "\${table}" (\${cols.map((c) => '"' + c + '"').join(', ')}) values (\${cols.map((_, i) => '$' + (i + 1)).join(', ')})\`,
+      cols.map((c) => { const v = row[c]; return v != null && typeof v === 'object' ? JSON.stringify(v) : (v ?? null) }),
+    )
+  }
+}
 `;
 }
 /** Normalize a source dialect to a DDL family (supabase = postgres, turso = sqlite). */
@@ -579,22 +579,22 @@ function dataModule(entries, seed, sources, supabaseConn) {
     const file = {
         path: 'src/lib/data.ts',
         description: 'Data sources per entity (in-memory / REST / SQL / Supabase / PGlite) + a searchable lookup per relation.',
-        contents: `/**
- * Data sources. Each entity binds to its own backend - in-memory (seeded), a
- * REST endpoint, a SQL table, Supabase, or embedded Postgres (PGlite). In-memory
- * + PGlite run with no setup; SQL / Supabase read their connection from \`./connections\`.
- */
-import { ${[...entImports].join(', ')} } from '@svgrid/enterprise'
-import { ${schemaImports}, ${typeImports} } from './schemas'${connImportLine}${pgliteImportLine}
-
-${pgliteBoot}${stores}
-${lookups.length ? `\n// Searchable pickers for relation (foreign-key) fields.\n${lookups.join('\n')}\n` : ''}
-// Grids show the related label (not the raw id) via withRelationLabels.
-${sourceLines}
-
-// New-row ids continue after the seeded rows.
-let seq = ${SEED_COUNT}
-export const nextId = (prefix: string) => \`\${prefix}\${++seq}\`
+        contents: `/**
+ * Data sources. Each entity binds to its own backend - in-memory (seeded), a
+ * REST endpoint, a SQL table, Supabase, or embedded Postgres (PGlite). In-memory
+ * + PGlite run with no setup; SQL / Supabase read their connection from \`./connections\`.
+ */
+import { ${[...entImports].join(', ')} } from '@svgrid/enterprise'
+import { ${schemaImports}, ${typeImports} } from './schemas'${connImportLine}${pgliteImportLine}
+
+${pgliteBoot}${stores}
+${lookups.length ? `\n// Searchable pickers for relation (foreign-key) fields.\n${lookups.join('\n')}\n` : ''}
+// Grids show the related label (not the raw id) via withRelationLabels.
+${sourceLines}
+
+// New-row ids continue after the seeded rows.
+let seq = ${SEED_COUNT}
+export const nextId = (prefix: string) => \`\${prefix}\${++seq}\`
 `,
     };
     return { file, needs };
@@ -610,18 +610,18 @@ function connectionsModule(needs) {
     return {
         path: 'src/lib/connections.ts',
         description: 'Supabase client for Supabase-bound entities (reads PUBLIC_SUPABASE_* env vars).',
-        contents: `import { createClient } from '@supabase/supabase-js'
-import { env } from '$env/dynamic/public'
-import type { SupabaseClientLike } from '@svgrid/enterprise'
-
-/**
- * Supabase client. The anon key is public (browser-safe) - access is protected by
- * your Row Level Security policies. Requires \`@supabase/supabase-js\`.
- */
-${hint}export const supabaseClient = createClient(
-  env.PUBLIC_SUPABASE_URL ?? '',
-  env.PUBLIC_SUPABASE_ANON_KEY ?? '',
-) as unknown as SupabaseClientLike
+        contents: `import { createClient } from '@supabase/supabase-js'
+import { env } from '$env/dynamic/public'
+import type { SupabaseClientLike } from '@svgrid/enterprise'
+
+/**
+ * Supabase client. The anon key is public (browser-safe) - access is protected by
+ * your Row Level Security policies. Requires \`@supabase/supabase-js\`.
+ */
+${hint}export const supabaseClient = createClient(
+  env.PUBLIC_SUPABASE_URL ?? '',
+  env.PUBLIC_SUPABASE_ANON_KEY ?? '',
+) as unknown as SupabaseClientLike
 `,
     };
 }
@@ -643,14 +643,14 @@ export function entityScreenPage(schema, route, title) {
     return {
         path: `src/routes/${r}/+page.svelte`,
         description: `CRUD screen for ${t}.`,
-        contents: `<script lang="ts">
-  import EntityScreen from '../lib/EntityScreen.svelte'
-  import { ${n.schemaVar} } from '$lib/schemas'
-  import { ${dataImports} } from '$lib/data'
-</script>
-
-<h1 class="st__title">${t}</h1>
-<EntityScreen schema={${n.schemaVar}} source={${n.sourceVar}}${lookupsProp} newId={() => nextId('${n.idPrefix}')} />
+        contents: `<script lang="ts">
+  import EntityScreen from '../lib/EntityScreen.svelte'
+  import { ${n.schemaVar} } from '$lib/schemas'
+  import { ${dataImports} } from '$lib/data'
+</script>
+
+<h1 class="st__title">${t}</h1>
+<EntityScreen schema={${n.schemaVar}} source={${n.sourceVar}}${lookupsProp} newId={() => nextId('${n.idPrefix}')} />
 `,
     };
 }
@@ -681,24 +681,24 @@ export function layoutFile(nav, opts = {}) {
         ? `{#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)}>
-        {#each locales as loc (loc)}<option value={loc} selected={loc === $currentLocale}>{loc}</option>{/each}
+        ? `\n      <select class="sv-app__locale" aria-label="Language" onchange={(e) => currentLocale.set(e.currentTarget.value as typeof $currentLocale)}>
+        {#each locales as loc (loc)}<option value={loc} selected={loc === $currentLocale}>{loc}</option>{/each}
       </select>`
         : '';
     const toolbarOn = shell.toolbar !== false && nav.length > 0;
     // Built-in light/dark switcher (a sun/moon button). Lives in the toolbar's tools
     // cluster when the toolbar is on, else trails the nav links. Only rendered when
     // both token sets are available (i.e. from the full Studio project emitter).
-    const themeToggleBtn = `<button type="button" class="sv-app__tool sv-app__theme" aria-label="Toggle color theme" title="Toggle light / dark" onclick={toggleTheme}>
-          {#if theme === 'dark'}<svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"/></svg>{:else}<svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z"/></svg>{/if}
+    const themeToggleBtn = `<button type="button" class="sv-app__tool sv-app__theme" aria-label="Toggle color theme" title="Toggle light / dark" onclick={toggleTheme}>
+          {#if theme === 'dark'}<svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"/></svg>{:else}<svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z"/></svg>{/if}
         </button>`;
     // When there's no toolbar, the toggle trails the nav in its own inline slot.
     const navToggleSlot = hasSwitch && !toolbarOn ? `\n      <div class="sv-app__navtools">${themeToggleBtn}</div>` : '';
     // Clicking any nav link closes the mobile drawer.
-    const linksMarkup = `<nav class="sv-app__links" onclick={() => (navOpen = false)}>
-      {#each nav as item (item.href)}
-        ${linkGate}
-      {/each}
+    const linksMarkup = `<nav class="sv-app__links" onclick={() => (navOpen = false)}>
+      {#each nav as item (item.href)}
+        ${linkGate}
+      {/each}
     </nav>${localeSwitcher}${navToggleSlot}`;
     const footMarkup = footer ? `\n      <span class="sv-app__foot">{footer}</span>` : '';
     const footConst = footer ? `\n  const footer = ${JSON.stringify(footer)}` : '';
@@ -706,19 +706,19 @@ export function layoutFile(nav, opts = {}) {
     // off-canvas drawer when collapsed or on tablet/phone (<= 1024px). The collapse
     // choice persists; tablet/phone start collapsed. top-nav and bottom-nav are
     // always-visible bars with no collapse/drawer state.
-    const sideState = style !== 'sidebar' ? '' : `
-  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(() => {
-    // Tablet / phone (<= 1024px) collapse to a drawer by default.
-    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)
+    const sideState = style !== 'sidebar' ? '' : `
+  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(() => {
+    // Tablet / phone (<= 1024px) collapse to a drawer by default.
+    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)
   })`;
     // Brand: a company logo image (data URL / URL) when set, else the app name.
     const logoConst = shell.logo ? `\n  const logo = ${JSON.stringify(shell.logo)}` : '';
@@ -729,15 +729,15 @@ export function layoutFile(nav, opts = {}) {
     // Collapsed bar (tablet / phone, or a collapsed desktop sidebar): a hamburger +
     // brand. The nav slides in as an off-canvas drawer. On desktop the "dock" button
     // pins the sidebar back open.
-    const mobileBar = `<header class="sv-app__mobilebar">
-    <button type="button" class="sv-app__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>
-    ${brandLink}
-    {#if !narrow}<button type="button" class="sv-app__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>
+    const mobileBar = `<header class="sv-app__mobilebar">
+    <button type="button" class="sv-app__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>
+    ${brandLink}
+    {#if !narrow}<button type="button" class="sv-app__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="sv-app__backdrop" aria-label="Close navigation" onclick={() => (navOpen = false)}></button>{/if}`;
     // App-chrome toolbar (docked at the top of the content area for both layouts):
     // a functional quick-search over the app's screens + an account cluster. Reads as
@@ -746,274 +746,274 @@ export function layoutFile(nav, opts = {}) {
     const brandSlug = brand.toLowerCase().replace(/[^a-z0-9]+/g, '') || 'app';
     const resultLabel = opts.i18n ? `{r.id ? $t('nav.' + r.id, r.label) : r.label}` : '{r.label}';
     const toolbarMarkup = toolbarOn
-        ? `<div class="sv-app__toolbar">
-      <div class="sv-app__search">
-        <svg class="sv-app__search-ic" viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.35-4.35"/></svg>
-        <input class="sv-app__search-in" type="search" placeholder="Search {brand}…" bind:value={q} bind:this={searchEl} aria-label="Search screens" />
-        <kbd class="sv-app__kbd" aria-hidden="true">⌘K</kbd>
-        {#if results.length}
-          <div class="sv-app__results">
-            {#each results as r (r.href)}
-              <a class="sv-app__result" href={r.href} onclick={() => (q = '')}>${resultLabel}</a>
-            {/each}
-          </div>
-        {/if}
-      </div>
-      <div class="sv-app__tools">
-        ${hasSwitch ? themeToggleBtn : ''}
-        <div class="sv-app__pop">
-          <button type="button" class="sv-app__tool" aria-label="Notifications" aria-expanded={bellOpen} onclick={() => { bellOpen = !bellOpen; menuOpen = false }}>
-            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M18 8a6 6 0 0 0-12 0c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.7 21a2 2 0 0 1-3.4 0"/></svg>
-            <span class="sv-app__dot"></span>
-          </button>
-          {#if bellOpen}
-            <div class="sv-app__menu sv-app__menu--notif" role="menu">
-              <div class="sv-app__menu-head">Notifications</div>
-              {#each notifications as n (n.title)}
-                <div class="sv-app__notif" role="menuitem"><span class="sv-app__notif-dot" style:background={n.color}></span><div class="sv-app__notif-body"><strong>{n.title}</strong><span>{n.time}</span></div></div>
-              {/each}
-              <button type="button" class="sv-app__menu-foot" onclick={() => (bellOpen = false)}>Mark all as read</button>
-            </div>
-          {/if}
-        </div>
-        <div class="sv-app__pop">
-          <button type="button" class="sv-app__avatar" title={brand} aria-label="Account" aria-expanded={menuOpen} onclick={() => { menuOpen = !menuOpen; bellOpen = false }}>{initials}</button>
-          {#if menuOpen}
-            <div class="sv-app__menu sv-app__menu--acct" role="menu">
-              <div class="sv-app__acct-head"><span class="sv-app__avatar sv-app__avatar--lg" aria-hidden="true">{initials}</span><div class="sv-app__acct-id"><strong>${opts.auth ? '{data?.user?.name ?? brand}' : '{brand}'}</strong><span>${opts.auth ? '{data?.user?.email ?? acctEmail}' : '{acctEmail}'}</span></div></div>
-              <a class="sv-app__menu-item" href="/" role="menuitem" onclick={() => (menuOpen = false)}>Dashboard</a>
+        ? `<div class="sv-app__toolbar">
+      <div class="sv-app__search">
+        <svg class="sv-app__search-ic" viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.35-4.35"/></svg>
+        <input class="sv-app__search-in" type="search" placeholder="Search {brand}…" bind:value={q} bind:this={searchEl} aria-label="Search screens" />
+        <kbd class="sv-app__kbd" aria-hidden="true">⌘K</kbd>
+        {#if results.length}
+          <div class="sv-app__results">
+            {#each results as r (r.href)}
+              <a class="sv-app__result" href={r.href} onclick={() => (q = '')}>${resultLabel}</a>
+            {/each}
+          </div>
+        {/if}
+      </div>
+      <div class="sv-app__tools">
+        ${hasSwitch ? themeToggleBtn : ''}
+        <div class="sv-app__pop">
+          <button type="button" class="sv-app__tool" aria-label="Notifications" aria-expanded={bellOpen} onclick={() => { bellOpen = !bellOpen; menuOpen = false }}>
+            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M18 8a6 6 0 0 0-12 0c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.7 21a2 2 0 0 1-3.4 0"/></svg>
+            <span class="sv-app__dot"></span>
+          </button>
+          {#if bellOpen}
+            <div class="sv-app__menu sv-app__menu--notif" role="menu">
+              <div class="sv-app__menu-head">Notifications</div>
+              {#each notifications as n (n.title)}
+                <div class="sv-app__notif" role="menuitem"><span class="sv-app__notif-dot" style:background={n.color}></span><div class="sv-app__notif-body"><strong>{n.title}</strong><span>{n.time}</span></div></div>
+              {/each}
+              <button type="button" class="sv-app__menu-foot" onclick={() => (bellOpen = false)}>Mark all as read</button>
+            </div>
+          {/if}
+        </div>
+        <div class="sv-app__pop">
+          <button type="button" class="sv-app__avatar" title={brand} aria-label="Account" aria-expanded={menuOpen} onclick={() => { menuOpen = !menuOpen; bellOpen = false }}>{initials}</button>
+          {#if menuOpen}
+            <div class="sv-app__menu sv-app__menu--acct" role="menu">
+              <div class="sv-app__acct-head"><span class="sv-app__avatar sv-app__avatar--lg" aria-hidden="true">{initials}</span><div class="sv-app__acct-id"><strong>${opts.auth ? '{data?.user?.name ?? brand}' : '{brand}'}</strong><span>${opts.auth ? '{data?.user?.email ?? acctEmail}' : '{acctEmail}'}</span></div></div>
+              <a class="sv-app__menu-item" href="/" role="menuitem" onclick={() => (menuOpen = false)}>Dashboard</a>
               ${opts.authAccount
             ? `<a class="sv-app__menu-item" href="/account" role="menuitem" onclick={() => (menuOpen = false)}>Account</a>`
-            : `<button type="button" class="sv-app__menu-item" role="menuitem" onclick={() => (menuOpen = false)}>Profile</button>
-              <button type="button" class="sv-app__menu-item" role="menuitem" onclick={() => (menuOpen = false)}>Settings</button>`}
+            : `<button type="button" class="sv-app__menu-item" role="menuitem" onclick={() => (menuOpen = false)}>Profile</button>
+              <button type="button" class="sv-app__menu-item" role="menuitem" onclick={() => (menuOpen = false)}>Settings</button>`}
               ${opts.auth
             ? `<form method="POST" action="/logout" class="sv-app__signout"><button type="submit" class="sv-app__menu-item sv-app__menu-item--danger" role="menuitem">Sign out</button></form>`
             : opts.supabaseAuth
                 ? '' // Supabase Auth: the real sign-out lives on SvAuthGate's own bar, so no placeholder here.
-                : `<button type="button" class="sv-app__menu-item sv-app__menu-item--danger" role="menuitem" onclick={() => (menuOpen = false)}>Sign out</button>`}
-            </div>
-          {/if}
-        </div>
-      </div>
-      {#if bellOpen || menuOpen}<button type="button" class="sv-app__scrim" tabindex="-1" aria-label="Close menus" onclick={() => { bellOpen = false; menuOpen = false }}></button>{/if}
+                : `<button type="button" class="sv-app__menu-item sv-app__menu-item--danger" role="menuitem" onclick={() => (menuOpen = false)}>Sign out</button>`}
+            </div>
+          {/if}
+        </div>
+      </div>
+      {#if bellOpen || menuOpen}<button type="button" class="sv-app__scrim" tabindex="-1" aria-label="Close menus" onclick={() => { bellOpen = false; menuOpen = false }}></button>{/if}
     </div>\n    `
         : '';
     // Supabase Auth: gate the whole app behind a client-side sign-in. SvAuthGate shows
     // the sign-in form when signed out, and the app + a "signed in as … / Sign out" bar
     // when signed in. Reads the shared client from $lib/connections.
     const content = opts.supabaseAuth
-        ? `<SvAuthGate client={supabaseClient as unknown as SupabaseAuthClientLike} title={\`Sign in to \${brand}\`}>
-        {@render children()}
+        ? `<SvAuthGate client={supabaseClient as unknown as SupabaseAuthClientLike} title={\`Sign in to \${brand}\`}>
+        {@render children()}
       </SvAuthGate>`
         : `{@render children()}`;
-    const mainMarkup = `<main class="sv-app__main">
-    ${toolbarMarkup}<div class="sv-app__content">
-      ${content}
-    </div>
+    const mainMarkup = `<main class="sv-app__main">
+    ${toolbarMarkup}<div class="sv-app__content">
+      ${content}
+    </div>
   </main>`;
     const body = style === 'top-nav'
-        ? `<div class="sv-app sv-app--top${appClsAttr}">
-  <header class="sv-app__bar">
-    ${brandLink}
-    ${linksMarkup}
-  </header>
-  ${mainMarkup}${footer ? `\n  <footer class="sv-app__footbar">{footer}</footer>` : ''}
+        ? `<div class="sv-app sv-app--top${appClsAttr}">
+  <header class="sv-app__bar">
+    ${brandLink}
+    ${linksMarkup}
+  </header>
+  ${mainMarkup}${footer ? `\n  <footer class="sv-app__footbar">{footer}</footer>` : ''}
 </div>`
         : style === 'bottom-nav'
-            ? `<div class="sv-app sv-app--bottom${appClsAttr}">
-  ${mainMarkup}
-  <footer class="sv-app__bar sv-app__bar--bottom">
-    ${brandLink}
-    ${linksMarkup}
-  </footer>
+            ? `<div class="sv-app sv-app--bottom${appClsAttr}">
+  ${mainMarkup}
+  <footer class="sv-app__bar sv-app__bar--bottom">
+    ${brandLink}
+    ${linksMarkup}
+  </footer>
 </div>`
-            : `<div class="sv-app sv-app--side${right ? ' sv-app--right' : ''}${appClsAttr}" class:is-drawer={drawer} class:is-navopen={navOpen}>
-  ${mobileBar}
-  <aside class="sv-app__side">
-    <div class="sv-app__sidehead">
-      ${brandLink}
-      <button type="button" class="sv-app__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>
-    ${linksMarkup}${footMarkup}
-  </aside>
-  ${mainMarkup}
+            : `<div class="sv-app sv-app--side${right ? ' sv-app--right' : ''}${appClsAttr}" class:is-drawer={drawer} class:is-navopen={navOpen}>
+  ${mobileBar}
+  <aside class="sv-app__side">
+    <div class="sv-app__sidehead">
+      ${brandLink}
+      <button type="button" class="sv-app__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>
+    ${linksMarkup}${footMarkup}
+  </aside>
+  ${mainMarkup}
 </div>`;
     const styles = style === 'top-nav'
-        ? `  .sv-app--top { display: flex; flex-direction: column; min-height: 100vh; }
-  .sv-app__bar { display: flex; align-items: center; gap: 20px; padding: 12px 22px; border-bottom: 1px solid color-mix(in srgb, var(--sg-fg, #0f172a) 16%, var(--sg-border, #e6e8ec)); background: var(--sg-header-bg, #f8fafc); }
-  .sv-app__links { display: flex; flex-direction: row; gap: 4px; flex-wrap: wrap; }
-  .sv-app__footbar { padding: 12px 22px; border-top: 1px solid var(--sg-border, #e6e8ec); color: var(--sg-muted, #94a3b8); font-size: 13px; }
-  /* Mobile: the bar stacks and its links scroll horizontally. */
-  @media (max-width: 640px) {
-    .sv-app__bar { flex-direction: column; align-items: stretch; gap: 10px; padding: 10px 14px; }
-    .sv-app__links { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; -webkit-overflow-scrolling: touch; }
-    .sv-app__link { white-space: nowrap; }
+        ? `  .sv-app--top { display: flex; flex-direction: column; min-height: 100vh; }
+  .sv-app__bar { display: flex; align-items: center; gap: 20px; padding: 12px 22px; border-bottom: 1px solid color-mix(in srgb, var(--sg-fg, #0f172a) 16%, var(--sg-border, #e6e8ec)); background: var(--sg-header-bg, #f8fafc); }
+  .sv-app__links { display: flex; flex-direction: row; gap: 4px; flex-wrap: wrap; }
+  .sv-app__footbar { padding: 12px 22px; border-top: 1px solid var(--sg-border, #e6e8ec); color: var(--sg-muted, #94a3b8); font-size: 13px; }
+  /* Mobile: the bar stacks and its links scroll horizontally. */
+  @media (max-width: 640px) {
+    .sv-app__bar { flex-direction: column; align-items: stretch; gap: 10px; padding: 10px 14px; }
+    .sv-app__links { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; -webkit-overflow-scrolling: touch; }
+    .sv-app__link { white-space: nowrap; }
   }`
         : style === 'bottom-nav'
-            ? `  .sv-app--bottom { display: flex; flex-direction: column; min-height: 100vh; }
-  .sv-app__bar--bottom {
-    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
-    display: flex; align-items: center; gap: 20px; padding: 12px 22px calc(12px + env(safe-area-inset-bottom, 0px));
-    border-top: 1px solid color-mix(in srgb, var(--sg-fg, #0f172a) 16%, var(--sg-border, #e6e8ec));
-    background: var(--sg-header-bg, #f8fafc);
-  }
-  .sv-app__bar--bottom .sv-app__links { display: flex; flex-direction: row; gap: 4px; flex-wrap: wrap; }
-  /* Clears the fixed bottom bar so page content never renders underneath it. */
-  .sv-app--bottom .sv-app__main { padding-bottom: 70px; }
-  /* Mobile: brand drops out so the tab strip stays roomy; ties overflow to a horizontal scroll if there are many screens. */
-  @media (max-width: 640px) {
-    .sv-app__bar--bottom { gap: 10px; padding: 6px 12px calc(6px + env(safe-area-inset-bottom, 0px)); }
-    .sv-app__bar--bottom .sv-app__brand { display: none; }
-    .sv-app__bar--bottom .sv-app__links { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; -webkit-overflow-scrolling: touch; }
-    .sv-app__bar--bottom .sv-app__link { white-space: nowrap; }
+            ? `  .sv-app--bottom { display: flex; flex-direction: column; min-height: 100vh; }
+  .sv-app__bar--bottom {
+    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
+    display: flex; align-items: center; gap: 20px; padding: 12px 22px calc(12px + env(safe-area-inset-bottom, 0px));
+    border-top: 1px solid color-mix(in srgb, var(--sg-fg, #0f172a) 16%, var(--sg-border, #e6e8ec));
+    background: var(--sg-header-bg, #f8fafc);
+  }
+  .sv-app__bar--bottom .sv-app__links { display: flex; flex-direction: row; gap: 4px; flex-wrap: wrap; }
+  /* Clears the fixed bottom bar so page content never renders underneath it. */
+  .sv-app--bottom .sv-app__main { padding-bottom: 70px; }
+  /* Mobile: brand drops out so the tab strip stays roomy; ties overflow to a horizontal scroll if there are many screens. */
+  @media (max-width: 640px) {
+    .sv-app__bar--bottom { gap: 10px; padding: 6px 12px calc(6px + env(safe-area-inset-bottom, 0px)); }
+    .sv-app__bar--bottom .sv-app__brand { display: none; }
+    .sv-app__bar--bottom .sv-app__links { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; -webkit-overflow-scrolling: touch; }
+    .sv-app__bar--bottom .sv-app__link { white-space: nowrap; }
   }`
-            : `  .sv-app--side { display: grid; grid-template-columns: 240px minmax(0, 1fr); min-height: 100vh; }
-  .sv-app--side.sv-app--right { grid-template-columns: minmax(0, 1fr) 240px; }
-  .sv-app--right .sv-app__side { order: 2; border-right: 0; border-left: 1px solid color-mix(in srgb, var(--sg-fg, #0f172a) 16%, var(--sg-border, #e6e8ec)); }
-  .sv-app__side { display: flex; flex-direction: column; gap: 4px; padding: 20px 14px; border-right: 1px solid color-mix(in srgb, var(--sg-fg, #0f172a) 16%, var(--sg-border, #e6e8ec)); background: var(--sg-header-bg, #f8fafc); }
-  .sv-app__sidehead { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
-  .sv-app__collapse, .sv-app__dock { display: inline-flex; padding: 5px; border: 0; border-radius: 8px; background: transparent; color: var(--sg-muted, #64748b); cursor: pointer; }
-  .sv-app__collapse:hover, .sv-app__dock:hover { background: color-mix(in srgb, var(--sg-fg, #0f172a) 8%, transparent); color: var(--sg-fg, #0f172a); }
-  .sv-app__mobilebar { display: none; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid color-mix(in srgb, var(--sg-fg, #0f172a) 16%, var(--sg-border, #e6e8ec)); background: var(--sg-header-bg, #f8fafc); }
-  .sv-app__mobilebar .sv-app__dock { margin-left: auto; }
-  .sv-app__burger { display: inline-flex; padding: 6px; border: 0; border-radius: 8px; background: transparent; color: var(--sg-fg, #0f172a); cursor: pointer; }
-  .sv-app__backdrop { position: fixed; inset: 0; z-index: 55; border: 0; background: rgba(15, 23, 42, 0.4); cursor: pointer; }
-  .sv-app__links { display: flex; flex-direction: column; gap: 2px; }
-  .sv-app__foot { margin-top: auto; padding-top: 14px; color: var(--sg-muted, #94a3b8); font-size: 12px; }
-  /* Drawer mode: tablet / phone (<= 1024px) or a user-collapsed desktop sidebar.
-     Driven by the .is-drawer class (JS matchMedia + the collapse toggle), so the
-     sidebar docks on wide screens and slides in as an off-canvas drawer otherwise. */
-  .sv-app--side.is-drawer, .sv-app--side.is-drawer.sv-app--right { display: block; }
-  .sv-app--side.is-drawer .sv-app__mobilebar { display: flex; }
-  .sv-app--side.is-drawer .sv-app__side {
-    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);
-  }
-  .sv-app--side.is-drawer.sv-app--right .sv-app__side { left: auto; right: 0; transform: translateX(100%); border-left: 0; }
-  .sv-app--side.is-drawer.is-navopen .sv-app__side { transform: translateX(0); }
-  .sv-app--side.is-drawer .sv-app__sidehead .sv-app__brand { display: none; } /* brand already in the top bar */
+            : `  .sv-app--side { display: grid; grid-template-columns: 240px minmax(0, 1fr); min-height: 100vh; }
+  .sv-app--side.sv-app--right { grid-template-columns: minmax(0, 1fr) 240px; }
+  .sv-app--right .sv-app__side { order: 2; border-right: 0; border-left: 1px solid color-mix(in srgb, var(--sg-fg, #0f172a) 16%, var(--sg-border, #e6e8ec)); }
+  .sv-app__side { display: flex; flex-direction: column; gap: 4px; padding: 20px 14px; border-right: 1px solid color-mix(in srgb, var(--sg-fg, #0f172a) 16%, var(--sg-border, #e6e8ec)); background: var(--sg-header-bg, #f8fafc); }
+  .sv-app__sidehead { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
+  .sv-app__collapse, .sv-app__dock { display: inline-flex; padding: 5px; border: 0; border-radius: 8px; background: transparent; color: var(--sg-muted, #64748b); cursor: pointer; }
+  .sv-app__collapse:hover, .sv-app__dock:hover { background: color-mix(in srgb, var(--sg-fg, #0f172a) 8%, transparent); color: var(--sg-fg, #0f172a); }
+  .sv-app__mobilebar { display: none; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid color-mix(in srgb, var(--sg-fg, #0f172a) 16%, var(--sg-border, #e6e8ec)); background: var(--sg-header-bg, #f8fafc); }
+  .sv-app__mobilebar .sv-app__dock { margin-left: auto; }
+  .sv-app__burger { display: inline-flex; padding: 6px; border: 0; border-radius: 8px; background: transparent; color: var(--sg-fg, #0f172a); cursor: pointer; }
+  .sv-app__backdrop { position: fixed; inset: 0; z-index: 55; border: 0; background: rgba(15, 23, 42, 0.4); cursor: pointer; }
+  .sv-app__links { display: flex; flex-direction: column; gap: 2px; }
+  .sv-app__foot { margin-top: auto; padding-top: 14px; color: var(--sg-muted, #94a3b8); font-size: 12px; }
+  /* Drawer mode: tablet / phone (<= 1024px) or a user-collapsed desktop sidebar.
+     Driven by the .is-drawer class (JS matchMedia + the collapse toggle), so the
+     sidebar docks on wide screens and slides in as an off-canvas drawer otherwise. */
+  .sv-app--side.is-drawer, .sv-app--side.is-drawer.sv-app--right { display: block; }
+  .sv-app--side.is-drawer .sv-app__mobilebar { display: flex; }
+  .sv-app--side.is-drawer .sv-app__side {
+    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);
+  }
+  .sv-app--side.is-drawer.sv-app--right .sv-app__side { left: auto; right: 0; transform: translateX(100%); border-left: 0; }
+  .sv-app--side.is-drawer.is-navopen .sv-app__side { transform: translateX(0); }
+  .sv-app--side.is-drawer .sv-app__sidehead .sv-app__brand { display: none; } /* brand already in the top bar */
   .sv-app--side.is-drawer .sv-app__collapse { display: none; } /* dock lives in the top bar when drawered */`;
     return {
         path: 'src/routes/+layout.svelte',
         description: `App shell (${style}): nav linking every screen.`,
-        contents: `<script lang="ts">
-  import '../app.css'
-  import '../custom.css'
-  import { page } from '$app/state'${opts.access ? `\n  import { currentRole, canScreen } from '../lib/access'` : ''}${opts.i18n ? `\n  import { t, currentLocale, locales } from '../lib/i18n'` : ''}${opts.auth ? `\n  import type { LayoutData } from './$types'` : ''}${opts.supabaseAuth ? `\n  import { SvAuthGate, type SupabaseAuthClientLike } from '@svgrid/enterprise'\n  import { supabaseClient } from '../lib/connections'` : ''}
-
-  let { children${opts.auth ? ', data' : ''} }${opts.auth ? ": { children: import('svelte').Snippet; data: LayoutData }" : ''} = $props()
-  const nav = ${JSON.stringify(links)}
-  const brand = ${JSON.stringify(brand)}${footConst}${logoConst}
-  let navOpen = $state(false)${opts.auth && opts.access ? `\n  // Seed the client role store from the signed-in session (server-resolved).\n  $effect(() => { if (data?.role) currentRole.set(data.role as never) })` : ''}
-  // Close the mobile drawer whenever the route changes.
-  $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 app.css), and persists per browser.
-  let theme = $state<'light' | 'dark'>('${defaultMode}')
-  function applyTheme(t: 'light' | 'dark') {
-    theme = t
-    try { document.documentElement.dataset.theme = t } catch (_) { /* no DOM */ }
-    try { localStorage.setItem('svapp:theme', t) } catch (_) { /* storage blocked */ }
-  }
-  function toggleTheme() { applyTheme(theme === 'dark' ? 'light' : 'dark') }
-  $effect(() => {
-    let t: 'light' | 'dark' = '${defaultMode}'
-    try { const s = localStorage.getItem('svapp:theme'); if (s === 'light' || s === 'dark') t = s } catch (_) { /* storage blocked */ }
-    applyTheme(t)
-  })` : ''}${sideState}${toolbarOn ? `
-  // App-chrome quick-search: filter the screens by label as you type.
-  const initials = ${JSON.stringify(initials)}
-  const acctEmail = ${JSON.stringify(`admin@${brandSlug}.com`)}
-  let q = $state('')
-  const results = $derived(q.trim() ? nav.filter((n) => n.label.toLowerCase().includes(q.trim().toLowerCase())).slice(0, 6) : [])
-  let bellOpen = $state(false)
-  let menuOpen = $state(false)
-  let searchEl: HTMLInputElement | null = $state(null)
-  const notifications = [
-    { title: 'Welcome to ' + brand, time: 'just now', color: 'var(--sg-accent, #6366f1)' },
-    { title: 'Your workspace is ready', time: '2m ago', color: '#10b981' },
-    { title: 'Sample data loaded', time: '5m ago', color: '#f59e0b' },
-  ]
-  // Cmd/Ctrl+K focuses search; Escape closes the menus.
-  $effect(() => {
-    function onKey(e: KeyboardEvent) {
-      if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 'k') { e.preventDefault(); searchEl?.focus() }
-      else if (e.key === 'Escape') { bellOpen = false; menuOpen = false }
-    }
-    window.addEventListener('keydown', onKey)
-    return () => window.removeEventListener('keydown', onKey)
-  })
-  // Close both menus on route change.
-  $effect(() => { void page.url.pathname; bellOpen = false; menuOpen = false })` : ''}
-</script>
-
-${opts.auth ? `{#if ${JSON.stringify(opts.authRoutes ?? ['/login'])}.includes(page.url.pathname)}
-{@render children()}
-{:else}
-${body}
-{/if}` : body}
-
-<style>
-${styles}
-  .sv-app__brand { display: inline-flex; align-items: center; font-weight: 700; font-size: 15px; color: var(--sg-fg, #0f172a); text-decoration: none; padding: 4px 8px; }
-  .sv-app__logo { max-height: 34px; max-width: 160px; width: auto; object-fit: contain; display: block; }
-  .sv-app__link { padding: 7px 10px; border-radius: 8px; color: var(--sg-fg, #334155); text-decoration: none; font-size: 14px; }
-  .sv-app__link:hover { background: color-mix(in srgb, var(--sg-fg, #0f172a) 6%, transparent); }
-  .sv-app__link.is-active { background: color-mix(in srgb, var(--sg-accent, #4f46e5) 14%, transparent); color: var(--sg-accent, #4f46e5); font-weight: 600; }
-  .sv-app__main { display: flex; flex-direction: column; min-width: 0; }
-  .sv-app__content { padding: 24px 28px; min-width: 0; }
-  /* App-chrome toolbar: a sticky product header with quick-search + account cluster. */
-  .sv-app__toolbar { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 16px; padding: 10px 28px; background: color-mix(in srgb, var(--sg-header-bg, #f8fafc) 86%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid color-mix(in srgb, var(--sg-fg, #0f172a) 10%, var(--sg-border, #e6e8ec)); }
-  .sv-app__search { position: relative; flex: 1; max-width: 440px; display: flex; align-items: center; }
-  .sv-app__search-ic { position: absolute; left: 11px; color: var(--sg-muted, #94a3b8); pointer-events: none; }
-  .sv-app__search-in { width: 100%; font: inherit; font-size: 13.5px; padding: 7px 46px 7px 34px; border: 1px solid var(--sg-border, #e6e8ec); border-radius: 9px; background: var(--sg-bg, #fff); color: var(--sg-fg, #0f172a); }
-  .sv-app__search-in::-webkit-search-cancel-button { -webkit-appearance: none; }
-  .sv-app__search-in:focus { outline: none; border-color: var(--sg-accent, #6366f1); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sg-accent, #6366f1) 18%, transparent); }
-  .sv-app__results { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 20; display: flex; flex-direction: column; padding: 5px; background: var(--sg-bg, #fff); border: 1px solid var(--sg-border, #e6e8ec); border-radius: 10px; box-shadow: 0 12px 32px -8px rgba(15, 23, 42, 0.25); }
-  .sv-app__result { padding: 7px 10px; border-radius: 7px; font-size: 13.5px; color: var(--sg-fg, #334155); text-decoration: none; }
-  .sv-app__result:hover { background: color-mix(in srgb, var(--sg-accent, #6366f1) 12%, transparent); color: var(--sg-accent, #6366f1); }
-  .sv-app__tools { margin-left: auto; display: flex; align-items: center; gap: 10px; }
-  .sv-app__tool { position: relative; display: inline-flex; padding: 7px; border: 1px solid var(--sg-border, #e6e8ec); border-radius: 9px; background: var(--sg-bg, #fff); color: var(--sg-muted, #64748b); cursor: pointer; }
-  .sv-app__tool:hover { color: var(--sg-fg, #0f172a); border-color: color-mix(in srgb, var(--sg-fg, #0f172a) 20%, var(--sg-border, #e6e8ec)); }
-  .sv-app__dot { position: absolute; top: 5px; right: 5px; width: 6px; height: 6px; border-radius: 50%; background: var(--sg-accent, #6366f1); box-shadow: 0 0 0 2px var(--sg-bg, #fff); }
-  .sv-app__avatar { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: none; border-radius: 50%; font: inherit; font-size: 12px; font-weight: 700; color: #fff; background: var(--sg-accent, #6366f1); letter-spacing: 0.02em; cursor: pointer; }
-  .sv-app__kbd { position: absolute; right: 8px; font-size: 10.5px; font-weight: 600; color: var(--sg-muted, #94a3b8); background: color-mix(in srgb, var(--sg-fg, #0f172a) 6%, transparent); border: 1px solid var(--sg-border, #e6e8ec); border-radius: 5px; padding: 1px 5px; pointer-events: none; }
-  .sv-app__pop { position: relative; }
-  .sv-app__scrim { position: fixed; inset: 0; z-index: 44; border: 0; padding: 0; background: transparent; cursor: default; }
-  .sv-app__menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 46; min-width: 232px; padding: 6px; background: var(--sg-bg, #fff); border: 1px solid var(--sg-border, #e6e8ec); border-radius: 11px; box-shadow: 0 16px 40px -10px rgba(15, 23, 42, 0.3); }
-  .sv-app__menu-head { padding: 6px 10px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--sg-muted, #94a3b8); }
-  .sv-app__notif { display: flex; gap: 9px; padding: 8px 10px; border-radius: 8px; }
-  .sv-app__notif:hover { background: color-mix(in srgb, var(--sg-fg, #0f172a) 5%, transparent); }
-  .sv-app__notif-dot { flex: none; width: 8px; height: 8px; margin-top: 5px; border-radius: 50%; }
-  .sv-app__notif-body { display: flex; flex-direction: column; min-width: 0; }
-  .sv-app__notif-body strong { font-size: 13px; font-weight: 600; color: var(--sg-fg, #0f172a); }
-  .sv-app__notif-body span { font-size: 11.5px; color: var(--sg-muted, #94a3b8); }
-  .sv-app__menu-foot { width: 100%; margin-top: 4px; padding: 8px; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--sg-accent, #6366f1); background: none; border: none; border-top: 1px solid var(--sg-border, #eef0f3); cursor: pointer; }
-  .sv-app__acct-head { display: flex; align-items: center; gap: 10px; padding: 8px 10px 10px; border-bottom: 1px solid var(--sg-border, #eef0f3); margin-bottom: 4px; }
-  .sv-app__avatar--lg { width: 38px; height: 38px; font-size: 14px; }
-  .sv-app__acct-id { display: flex; flex-direction: column; min-width: 0; }
-  .sv-app__acct-id strong { font-size: 13.5px; color: var(--sg-fg, #0f172a); }
-  .sv-app__acct-id span { font-size: 12px; color: var(--sg-muted, #94a3b8); overflow: hidden; text-overflow: ellipsis; }
-  .sv-app__menu-item { display: block; width: 100%; text-align: left; padding: 8px 10px; font: inherit; font-size: 13px; color: var(--sg-fg, #334155); background: none; border: none; border-radius: 8px; text-decoration: none; cursor: pointer; }
-  .sv-app__menu-item:hover { background: color-mix(in srgb, var(--sg-accent, #6366f1) 10%, transparent); color: var(--sg-accent, #6366f1); }
-  .sv-app__menu-item--danger:hover { background: color-mix(in srgb, #ef4444 12%, transparent); color: #ef4444; }
-  .sv-app__signout { margin: 0; display: block; }
-  .sv-app__signout .sv-app__menu-item { width: 100%; }
-  .sv-app__locale { margin-top: 10px; padding: 5px 8px; font: inherit; font-size: 12.5px; color: var(--sg-fg, #0f172a); background: var(--sg-bg, #fff); border: 1px solid var(--sg-border, #e6e8ec); border-radius: 8px; }
-  .sv-app__theme { align-items: center; justify-content: center; cursor: pointer; }
-  /* No-toolbar fallback slot: trails the nav, pushed to the far edge in row bars. */
-  .sv-app__navtools { display: flex; align-items: center; }
-  .sv-app--top .sv-app__navtools, .sv-app__bar--bottom .sv-app__navtools { margin-left: auto; }
-  /* Mobile bar + drawer chrome (hidden on desktop; media queries above switch it on) */
-  .sv-app__mobilebar { display: none; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--sg-border, #e6e8ec); background: var(--sg-header-bg, #f8fafc); position: sticky; top: 0; z-index: 50; }
-  .sv-app__burger { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--sg-border, #e6e8ec); border-radius: 9px; background: var(--sg-bg, #fff); color: var(--sg-fg, #0f172a); cursor: pointer; }
-  .sv-app__backdrop { position: fixed; inset: 0; z-index: 55; border: 0; padding: 0; background: rgba(15, 23, 42, 0.42); cursor: pointer; }
-  @media (max-width: 860px) { .sv-app__content { padding: 18px 16px; } .sv-app__toolbar { padding: 9px 16px; } }
-  @media (max-width: 640px) { .sv-app__content { padding: 14px 12px; } .sv-app__toolbar { padding: 8px 12px; gap: 10px; } .sv-app__tool { display: none; } }
-</style>
+        contents: `<script lang="ts">
+  import '../app.css'
+  import '../custom.css'
+  import { page } from '$app/state'${opts.access ? `\n  import { currentRole, canScreen } from '../lib/access'` : ''}${opts.i18n ? `\n  import { t, currentLocale, locales } from '../lib/i18n'` : ''}${opts.auth ? `\n  import type { LayoutData } from './$types'` : ''}${opts.supabaseAuth ? `\n  import { SvAuthGate, type SupabaseAuthClientLike } from '@svgrid/enterprise'\n  import { supabaseClient } from '../lib/connections'` : ''}
+
+  let { children${opts.auth ? ', data' : ''} }${opts.auth ? ": { children: import('svelte').Snippet; data: LayoutData }" : ''} = $props()
+  const nav = ${JSON.stringify(links)}
+  const brand = ${JSON.stringify(brand)}${footConst}${logoConst}
+  let navOpen = $state(false)${opts.auth && opts.access ? `\n  // Seed the client role store from the signed-in session (server-resolved).\n  $effect(() => { if (data?.role) currentRole.set(data.role as never) })` : ''}
+  // Close the mobile drawer whenever the route changes.
+  $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 app.css), and persists per browser.
+  let theme = $state<'light' | 'dark'>('${defaultMode}')
+  function applyTheme(t: 'light' | 'dark') {
+    theme = t
+    try { document.documentElement.dataset.theme = t } catch (_) { /* no DOM */ }
+    try { localStorage.setItem('svapp:theme', t) } catch (_) { /* storage blocked */ }
+  }
+  function toggleTheme() { applyTheme(theme === 'dark' ? 'light' : 'dark') }
+  $effect(() => {
+    let t: 'light' | 'dark' = '${defaultMode}'
+    try { const s = localStorage.getItem('svapp:theme'); if (s === 'light' || s === 'dark') t = s } catch (_) { /* storage blocked */ }
+    applyTheme(t)
+  })` : ''}${sideState}${toolbarOn ? `
+  // App-chrome quick-search: filter the screens by label as you type.
+  const initials = ${JSON.stringify(initials)}
+  const acctEmail = ${JSON.stringify(`admin@${brandSlug}.com`)}
+  let q = $state('')
+  const results = $derived(q.trim() ? nav.filter((n) => n.label.toLowerCase().includes(q.trim().toLowerCase())).slice(0, 6) : [])
+  let bellOpen = $state(false)
+  let menuOpen = $state(false)
+  let searchEl: HTMLInputElement | null = $state(null)
+  const notifications = [
+    { title: 'Welcome to ' + brand, time: 'just now', color: 'var(--sg-accent, #6366f1)' },
+    { title: 'Your workspace is ready', time: '2m ago', color: '#10b981' },
+    { title: 'Sample data loaded', time: '5m ago', color: '#f59e0b' },
+  ]
+  // Cmd/Ctrl+K focuses search; Escape closes the menus.
+  $effect(() => {
+    function onKey(e: KeyboardEvent) {
+      if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 'k') { e.preventDefault(); searchEl?.focus() }
+      else if (e.key === 'Escape') { bellOpen = false; menuOpen = false }
+    }
+    window.addEventListener('keydown', onKey)
+    return () => window.removeEventListener('keydown', onKey)
+  })
+  // Close both menus on route change.
+  $effect(() => { void page.url.pathname; bellOpen = false; menuOpen = false })` : ''}
+</script>
+
+${opts.auth ? `{#if ${JSON.stringify(opts.authRoutes ?? ['/login'])}.includes(page.url.pathname)}
+{@render children()}
+{:else}
+${body}
+{/if}` : body}
+
+<style>
+${styles}
+  .sv-app__brand { display: inline-flex; align-items: center; font-weight: 700; font-size: 15px; color: var(--sg-fg, #0f172a); text-decoration: none; padding: 4px 8px; }
+  .sv-app__logo { max-height: 34px; max-width: 160px; width: auto; object-fit: contain; display: block; }
+  .sv-app__link { padding: 7px 10px; border-radius: 8px; color: var(--sg-fg, #334155); text-decoration: none; font-size: 14px; }
+  .sv-app__link:hover { background: color-mix(in srgb, var(--sg-fg, #0f172a) 6%, transparent); }
+  .sv-app__link.is-active { background: color-mix(in srgb, var(--sg-accent, #4f46e5) 14%, transparent); color: var(--sg-accent, #4f46e5); font-weight: 600; }
+  .sv-app__main { display: flex; flex-direction: column; min-width: 0; }
+  .sv-app__content { padding: 24px 28px; min-width: 0; }
+  /* App-chrome toolbar: a sticky product header with quick-search + account cluster. */
+  .sv-app__toolbar { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 16px; padding: 10px 28px; background: color-mix(in srgb, var(--sg-header-bg, #f8fafc) 86%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid color-mix(in srgb, var(--sg-fg, #0f172a) 10%, var(--sg-border, #e6e8ec)); }
+  .sv-app__search { position: relative; flex: 1; max-width: 440px; display: flex; align-items: center; }
+  .sv-app__search-ic { position: absolute; left: 11px; color: var(--sg-muted, #94a3b8); pointer-events: none; }
+  .sv-app__search-in { width: 100%; font: inherit; font-size: 13.5px; padding: 7px 46px 7px 34px; border: 1px solid var(--sg-border, #e6e8ec); border-radius: 9px; background: var(--sg-bg, #fff); color: var(--sg-fg, #0f172a); }
+  .sv-app__search-in::-webkit-search-cancel-button { -webkit-appearance: none; }
+  .sv-app__search-in:focus { outline: none; border-color: var(--sg-accent, #6366f1); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sg-accent, #6366f1) 18%, transparent); }
+  .sv-app__results { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 20; display: flex; flex-direction: column; padding: 5px; background: var(--sg-bg, #fff); border: 1px solid var(--sg-border, #e6e8ec); border-radius: 10px; box-shadow: 0 12px 32px -8px rgba(15, 23, 42, 0.25); }
+  .sv-app__result { padding: 7px 10px; border-radius: 7px; font-size: 13.5px; color: var(--sg-fg, #334155); text-decoration: none; }
+  .sv-app__result:hover { background: color-mix(in srgb, var(--sg-accent, #6366f1) 12%, transparent); color: var(--sg-accent, #6366f1); }
+  .sv-app__tools { margin-left: auto; display: flex; align-items: center; gap: 10px; }
+  .sv-app__tool { position: relative; display: inline-flex; padding: 7px; border: 1px solid var(--sg-border, #e6e8ec); border-radius: 9px; background: var(--sg-bg, #fff); color: var(--sg-muted, #64748b); cursor: pointer; }
+  .sv-app__tool:hover { color: var(--sg-fg, #0f172a); border-color: color-mix(in srgb, var(--sg-fg, #0f172a) 20%, var(--sg-border, #e6e8ec)); }
+  .sv-app__dot { position: absolute; top: 5px; right: 5px; width: 6px; height: 6px; border-radius: 50%; background: var(--sg-accent, #6366f1); box-shadow: 0 0 0 2px var(--sg-bg, #fff); }
+  .sv-app__avatar { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: none; border-radius: 50%; font: inherit; font-size: 12px; font-weight: 700; color: #fff; background: var(--sg-accent, #6366f1); letter-spacing: 0.02em; cursor: pointer; }
+  .sv-app__kbd { position: absolute; right: 8px; font-size: 10.5px; font-weight: 600; color: var(--sg-muted, #94a3b8); background: color-mix(in srgb, var(--sg-fg, #0f172a) 6%, transparent); border: 1px solid var(--sg-border, #e6e8ec); border-radius: 5px; padding: 1px 5px; pointer-events: none; }
+  .sv-app__pop { position: relative; }
+  .sv-app__scrim { position: fixed; inset: 0; z-index: 44; border: 0; padding: 0; background: transparent; cursor: default; }
+  .sv-app__menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 46; min-width: 232px; padding: 6px; background: var(--sg-bg, #fff); border: 1px solid var(--sg-border, #e6e8ec); border-radius: 11px; box-shadow: 0 16px 40px -10px rgba(15, 23, 42, 0.3); }
+  .sv-app__menu-head { padding: 6px 10px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--sg-muted, #94a3b8); }
+  .sv-app__notif { display: flex; gap: 9px; padding: 8px 10px; border-radius: 8px; }
+  .sv-app__notif:hover { background: color-mix(in srgb, var(--sg-fg, #0f172a) 5%, transparent); }
+  .sv-app__notif-dot { flex: none; width: 8px; height: 8px; margin-top: 5px; border-radius: 50%; }
+  .sv-app__notif-body { display: flex; flex-direction: column; min-width: 0; }
+  .sv-app__notif-body strong { font-size: 13px; font-weight: 600; color: var(--sg-fg, #0f172a); }
+  .sv-app__notif-body span { font-size: 11.5px; color: var(--sg-muted, #94a3b8); }
+  .sv-app__menu-foot { width: 100%; margin-top: 4px; padding: 8px; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--sg-accent, #6366f1); background: none; border: none; border-top: 1px solid var(--sg-border, #eef0f3); cursor: pointer; }
+  .sv-app__acct-head { display: flex; align-items: center; gap: 10px; padding: 8px 10px 10px; border-bottom: 1px solid var(--sg-border, #eef0f3); margin-bottom: 4px; }
+  .sv-app__avatar--lg { width: 38px; height: 38px; font-size: 14px; }
+  .sv-app__acct-id { display: flex; flex-direction: column; min-width: 0; }
+  .sv-app__acct-id strong { font-size: 13.5px; color: var(--sg-fg, #0f172a); }
+  .sv-app__acct-id span { font-size: 12px; color: var(--sg-muted, #94a3b8); overflow: hidden; text-overflow: ellipsis; }
+  .sv-app__menu-item { display: block; width: 100%; text-align: left; padding: 8px 10px; font: inherit; font-size: 13px; color: var(--sg-fg, #334155); background: none; border: none; border-radius: 8px; text-decoration: none; cursor: pointer; }
+  .sv-app__menu-item:hover { background: color-mix(in srgb, var(--sg-accent, #6366f1) 10%, transparent); color: var(--sg-accent, #6366f1); }
+  .sv-app__menu-item--danger:hover { background: color-mix(in srgb, #ef4444 12%, transparent); color: #ef4444; }
+  .sv-app__signout { margin: 0; display: block; }
+  .sv-app__signout .sv-app__menu-item { width: 100%; }
+  .sv-app__locale { margin-top: 10px; padding: 5px 8px; font: inherit; font-size: 12.5px; color: var(--sg-fg, #0f172a); background: var(--sg-bg, #fff); border: 1px solid var(--sg-border, #e6e8ec); border-radius: 8px; }
+  .sv-app__theme { align-items: center; justify-content: center; cursor: pointer; }
+  /* No-toolbar fallback slot: trails the nav, pushed to the far edge in row bars. */
+  .sv-app__navtools { display: flex; align-items: center; }
+  .sv-app--top .sv-app__navtools, .sv-app__bar--bottom .sv-app__navtools { margin-left: auto; }
+  /* Mobile bar + drawer chrome (hidden on desktop; media queries above switch it on) */
+  .sv-app__mobilebar { display: none; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--sg-border, #e6e8ec); background: var(--sg-header-bg, #f8fafc); position: sticky; top: 0; z-index: 50; }
+  .sv-app__burger { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--sg-border, #e6e8ec); border-radius: 9px; background: var(--sg-bg, #fff); color: var(--sg-fg, #0f172a); cursor: pointer; }
+  .sv-app__backdrop { position: fixed; inset: 0; z-index: 55; border: 0; padding: 0; background: rgba(15, 23, 42, 0.42); cursor: pointer; }
+  @media (max-width: 860px) { .sv-app__content { padding: 18px 16px; } .sv-app__toolbar { padding: 9px 16px; } }
+  @media (max-width: 640px) { .sv-app__content { padding: 14px 12px; } .sv-app__toolbar { padding: 8px 12px; gap: 10px; } .sv-app__tool { display: none; } }
+</style>
 `,
     };
 }
@@ -1028,24 +1028,24 @@ export function homeFile(nav) {
     return {
         path: 'src/routes/+page.svelte',
         description: 'Home: redirects to the primary dashboard.',
-        contents: `<script lang="ts">
-  import { onMount } from 'svelte'
-  import { goto } from '$app/navigation'
-  const home = ${JSON.stringify(first)}
-  onMount(() => { goto(home, { replaceState: true }) })
-</script>
-
-<div class="st-home">
-  <div class="st-home__spinner" aria-hidden="true"></div>
-  <p>Opening your workspace… <a href={home}>Continue</a></p>
-</div>
-
-<style>
-  .st-home { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; min-height: 52vh; color: var(--sg-muted, #64748b); font-size: 14px; }
-  .st-home__spinner { width: 26px; height: 26px; border-radius: 50%; border: 3px solid var(--sg-border, #e6e8ec); border-top-color: var(--sg-accent, #6366f1); animation: st-home-spin 0.7s linear infinite; }
-  .st-home a { color: var(--sg-accent, #6366f1); font-weight: 600; }
-  @keyframes st-home-spin { to { transform: rotate(360deg); } }
-</style>
+        contents: `<script lang="ts">
+  import { onMount } from 'svelte'
+  import { goto } from '$app/navigation'
+  const home = ${JSON.stringify(first)}
+  onMount(() => { goto(home, { replaceState: true }) })
+</script>
+
+<div class="st-home">
+  <div class="st-home__spinner" aria-hidden="true"></div>
+  <p>Opening your workspace… <a href={home}>Continue</a></p>
+</div>
+
+<style>
+  .st-home { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; min-height: 52vh; color: var(--sg-muted, #64748b); font-size: 14px; }
+  .st-home__spinner { width: 26px; height: 26px; border-radius: 50%; border: 3px solid var(--sg-border, #e6e8ec); border-top-color: var(--sg-accent, #6366f1); animation: st-home-spin 0.7s linear infinite; }
+  .st-home a { color: var(--sg-accent, #6366f1); font-weight: 600; }
+  @keyframes st-home-spin { to { transform: rotate(360deg); } }
+</style>
 `,
     };
 }