@svgrid/enterprise 2.6.0 → 2.6.1

package/dist/studio/emit-project.js

@@ -159,15 +159,15 @@ function blockMarkup(entity, schemaVar, typeName, block, resolve, ctx = { hasRec
             if (cfg.scheduler) {
                 const schDisp = relationDisplayFields(ctx.rawEntity ?? entity, resolve);
                 const schAsText = (f) => schDisp.get(f) ?? f;
-                return `    <div ${span}${cls}>
-      <SvGrid
-        data={allRows}
-        columns={${colVar}}
-        getRowId={(r) => String((r as Record<string, unknown>)[idField])}
-        loading={!allRowsReady}
-        scheduler={${schedulerConfigExpr(cfg.scheduler, typeName, schAsText)}}
-        containerHeight=${ctx.pane ? '"100%"' : `{${block.height ?? 640}}`}
-      />
+                return `    <div ${span}${cls}>
+      <SvGrid
+        data={allRows}
+        columns={${colVar}}
+        getRowId={(r) => String((r as Record<string, unknown>)[idField])}
+        loading={!allRowsReady}
+        scheduler={${schedulerConfigExpr(cfg.scheduler, typeName, schAsText)}}
+        containerHeight=${ctx.pane ? '"100%"' : `{${block.height ?? 640}}`}
+      />
     </div>`;
             }
             // Grouped + tree grids both load the full dataset and render client-side (a grouped
@@ -311,22 +311,22 @@ function blockMarkup(entity, schemaVar, typeName, block, resolve, ctx = { hasRec
             }
             // No-code export toolbar - buttons wired to the grid's own export API.
             const exportBar = gridHasExport(cfg) && ctx.captureApi ? exportToolbarMarkup(cfg.export, ctx.captureApi, entity.name) : '';
-            return `    <div ${span}${cls}>
-${exportBar}      <SvGrid
-        ${lines.join('\n        ')}
-      />
+            return `    <div ${span}${cls}>
+${exportBar}      <SvGrid
+        ${lines.join('\n        ')}
+      />
     </div>`;
         }
         case 'chart': {
             const drillRoute = cfg.drillScreen && ctx.routeById?.get(cfg.drillScreen);
             const onDrill = drillRoute ? ` onDrill={(cat) => goto('/${drillRoute}?${cfg.dimension}=' + encodeURIComponent(String(cat)))}` : '';
-            return `    <div ${span}${cls}>
-      <SvSchemaChart schema={${schemaVar}} rows={${rowsExpr}} dimension="${cfg.dimension}"${cfg.measure ? ` measure="${cfg.measure}"` : ''} reduce="${cfg.reduce}" type="${cfg.type}"${block.height ? ` height={${block.height}}` : ''} controls={false} accent="${chartColorExpr(cfg.color)}"${cfg.dataLabels === false ? ' dataLabels={false}' : ''}${onDrill} />
+            return `    <div ${span}${cls}>
+      <SvSchemaChart schema={${schemaVar}} rows={${rowsExpr}} dimension="${cfg.dimension}"${cfg.measure ? ` measure="${cfg.measure}"` : ''} reduce="${cfg.reduce}" type="${cfg.type}"${block.height ? ` height={${block.height}}` : ''} controls={false} accent="${chartColorExpr(cfg.color)}"${cfg.dataLabels === false ? ' dataLabels={false}' : ''}${onDrill} />
     </div>`;
         }
         case 'dashboard':
-            return `    <div ${span}${cls}>
-      <SvSchemaDashboard schema={${schemaVar}} rows={${rowsExpr}} />
+            return `    <div ${span}${cls}>
+      <SvSchemaDashboard schema={${schemaVar}} rows={${rowsExpr}} />
     </div>`;
         case 'kpi': {
             const measurePart = cfg.measure ? `measure: '${cfg.measure}', ` : '';
@@ -354,9 +354,9 @@ ${exportBar}      <SvGrid
                 const deltaChip = cfg.target == null
                     ? `\n        {@const _d = seriesDelta(_s)}\n        {#if _d != null}<span class="kpi__delta" class:is-up={_d >= 0} class:is-down={_d < 0}>{_d >= 0 ? '▲' : '▼'} {Math.abs(_d).toFixed(0)}%</span>{/if}`
                     : '';
-                rows.push(`      {#if ${seriesExpr}.length > 1}
-        {@const _s = ${seriesExpr}}${deltaChip}
-        <svg class="kpi__spark" viewBox="0 0 120 30" preserveAspectRatio="none" aria-hidden="true"><polyline points={sparklinePoints(_s)} fill="none" stroke="currentColor" stroke-width="1.5" vector-effect="non-scaling-stroke" /></svg>
+                rows.push(`      {#if ${seriesExpr}.length > 1}
+        {@const _s = ${seriesExpr}}${deltaChip}
+        <svg class="kpi__spark" viewBox="0 0 120 30" preserveAspectRatio="none" aria-hidden="true"><polyline points={sparklinePoints(_s)} fill="none" stroke="currentColor" stroke-width="1.5" vector-effect="non-scaling-stroke" /></svg>
       {/if}`);
             }
             return `    <div ${span}${wrapperClass(block, 'kpi')}>\n${rows.join('\n')}\n    </div>`;
@@ -364,9 +364,9 @@ ${exportBar}      <SvGrid
         case 'gauge': {
             const gexpr = `reduceValue(${rowsExpr}, { ${cfg.measure ? `measure: '${cfg.measure}', ` : ''}reduce: '${cfg.reduce}' })`;
             const unit = cfg.unit ? ` unit=${JSON.stringify(cfg.unit)}` : '';
-            return `    <div ${span}${wrapperClass(block, 'gaugecard')}>
-      <span class="kpi__label">${tLabel(cfg.label, block.id)}</span>
-      <SvGauge value={${gexpr}} min={${cfg.min}} max={${cfg.max}}${unit} size={172} />
+            return `    <div ${span}${wrapperClass(block, 'gaugecard')}>
+      <span class="kpi__label">${tLabel(cfg.label, block.id)}</span>
+      <SvGauge value={${gexpr}} min={${cfg.min}} max={${cfg.max}}${unit} size={172} />
     </div>`;
         }
         case 'tree': {
@@ -374,8 +374,8 @@ ${exportBar}      <SvGrid
                 return `    <div ${span}${cls}><!-- tree: set a label field + a self-referential parent field in the inspector --></div>`;
             }
             const idExpr = `${schemaVar}.idField ?? 'id'`;
-            return `    <div ${span}${wrapperClass(block, 'treecard')}>
-      <SvTree nodes={toTreeNodes(${rowsExpr} as Record<string, unknown>[], ${idExpr}, ${JSON.stringify(cfg.labelField)}, ${JSON.stringify(cfg.parentField)})} />
+            return `    <div ${span}${wrapperClass(block, 'treecard')}>
+      <SvTree nodes={toTreeNodes(${rowsExpr} as Record<string, unknown>[], ${idExpr}, ${JSON.stringify(cfg.labelField)}, ${JSON.stringify(cfg.parentField)})} />
     </div>`;
         }
         case 'tabs': {
@@ -388,19 +388,19 @@ ${exportBar}      <SvGrid
             const panels = cfg.tabs
                 .map((t, i) => {
                 const children = t.blocks.map((cb) => blockMarkup(entity, schemaVar, typeName, cb, resolve, ctx)).filter(Boolean).join('\n');
-                return `          {#if id === '${tabId(block.id, i)}'}
-            <div class="st-screen">
-${children || '            <p style="color: var(--sg-muted, #94a3b8); font-size: 13px; padding: 10px;">This tab is empty.</p>'}
-            </div>
+                return `          {#if id === '${tabId(block.id, i)}'}
+            <div class="st-screen">
+${children || '            <p style="color: var(--sg-muted, #94a3b8); font-size: 13px; padding: 10px;">This tab is empty.</p>'}
+            </div>
           {/if}`;
             })
                 .join('\n');
-            return `    <div ${span}${cls}>
-      <SvTabs tabs={${items}} value={${tabsVar}} onChange={(id) => (${tabsVar} = id)}>
-        {#snippet panel(id)}
-${panels}
-        {/snippet}
-      </SvTabs>
+            return `    <div ${span}${cls}>
+      <SvTabs tabs={${items}} value={${tabsVar}} onChange={(id) => (${tabsVar} = id)}>
+        {#snippet panel(id)}
+${panels}
+        {/snippet}
+      </SvTabs>
     </div>`;
         }
         case 'accordion': {
@@ -411,19 +411,19 @@ ${panels}
             const panels = cfg.sections
                 .map((s, i) => {
                 const children = s.blocks.map((cb) => blockMarkup(entity, schemaVar, typeName, cb, resolve, ctx)).filter(Boolean).join('\n');
-                return `          {#if item.id === '${accSectionId(block.id, i)}'}
-            <div class="st-screen">
-${children || '            <p style="color: var(--sg-muted, #94a3b8); font-size: 13px; padding: 10px;">This section is empty.</p>'}
-            </div>
+                return `          {#if item.id === '${accSectionId(block.id, i)}'}
+            <div class="st-screen">
+${children || '            <p style="color: var(--sg-muted, #94a3b8); font-size: 13px; padding: 10px;">This section is empty.</p>'}
+            </div>
           {/if}`;
             })
                 .join('\n');
-            return `    <div ${span}${cls}>
-      <SvAccordion items={${items}} expandMode="${cfg.multiple ? 'multiple' : 'single'}" expanded={${accVar}} onChange={(ids) => (${accVar} = ids)}>
-        {#snippet panel(item)}
-${panels}
-        {/snippet}
-      </SvAccordion>
+            return `    <div ${span}${cls}>
+      <SvAccordion items={${items}} expandMode="${cfg.multiple ? 'multiple' : 'single'}" expanded={${accVar}} onChange={(ids) => (${accVar} = ids)}>
+        {#snippet panel(item)}
+${panels}
+        {/snippet}
+      </SvAccordion>
     </div>`;
         }
         case 'master-detail': {
@@ -437,14 +437,14 @@ ${panels}
             // of expanding inline - the detail page shows the same children as a timeline.
             const mdRoute = cfg.linkScreen ? ctx.routeById?.get(cfg.linkScreen) : undefined;
             const onParent = mdRoute ? ` onParentClick={(id) => goto('/${mdRoute}?id=' + encodeURIComponent(id))}` : '';
-            return `    <div ${span}${cls}>
-      <SvGridMasterDetail schema={${schemaVar}} data={allRows} detailSchema={${cn.schemaVar}} getChildren={(p) => ${childRows}.filter((c) => String((c as Record<string, unknown>)['${cfg.foreignKey}']) === String((p as Record<string, unknown>)[${schemaVar}.idField ?? 'id']))} rowHeight={30}${onParent}${block.height ? ` containerHeight={${block.height}}` : ''} />
+            return `    <div ${span}${cls}>
+      <SvGridMasterDetail schema={${schemaVar}} data={allRows} detailSchema={${cn.schemaVar}} getChildren={(p) => ${childRows}.filter((c) => String((c as Record<string, unknown>)['${cfg.foreignKey}']) === String((p as Record<string, unknown>)[${schemaVar}.idField ?? 'id']))} rowHeight={30}${onParent}${block.height ? ` containerHeight={${block.height}}` : ''} />
     </div>`;
         }
         case 'pivot': {
             const h = block.height ?? 460;
-            return `    <div ${wrapperStyle(block, `height: ${h}px`)}${cls}>
-      <SvPivotDesigner data={${rowsExpr}} fields={${pivotFieldsExpr(entity)}} layout={${pivotLayoutExpr(cfg)}} />
+            return `    <div ${wrapperStyle(block, `height: ${h}px`)}${cls}>
+      <SvPivotDesigner data={${rowsExpr}} fields={${pivotFieldsExpr(entity)}} layout={${pivotLayoutExpr(cfg)}} />
     </div>`;
         }
         case 'filter':
@@ -466,8 +466,8 @@ ${panels}
             const openRoute = cfg.openScreen ? ctx.routeById?.get(cfg.openScreen) : undefined;
             const onOpen = openRoute ? ` onOpen={(id) => goto('/${openRoute}?id=' + encodeURIComponent(id))}` : '';
             // Dragging a card updates its groupBy value in the local row state (optimistic).
-            return `    <div ${wrapperStyle(block)}${cls}>
-      <SvBoard schema={${schemaVar}} rows={allRows} loading={!allRowsReady} groupBy=${JSON.stringify(cfg.groupBy)} titleField=${JSON.stringify(asText(cfg.titleField))}${badge}${sub}${onOpen} height={${h}} onMove={(id, value) => { allRows = allRows.map((r) => String((r as Record<string, unknown>)[idField]) === String(id) ? ({ ...r, ['${cfg.groupBy}']: value }) : r) }} />
+            return `    <div ${wrapperStyle(block)}${cls}>
+      <SvBoard schema={${schemaVar}} rows={allRows} loading={!allRowsReady} groupBy=${JSON.stringify(cfg.groupBy)} titleField=${JSON.stringify(asText(cfg.titleField))}${badge}${sub}${onOpen} height={${h}} onMove={(id, value) => { allRows = allRows.map((r) => String((r as Record<string, unknown>)[idField]) === String(id) ? ({ ...r, ['${cfg.groupBy}']: value }) : r) }} />
     </div>`;
         }
         case 'calendar': {
@@ -481,8 +481,8 @@ ${panels}
             // + recurrence): a richer view of the grid's rows with a detail drawer. `openScreen`
             // navigation is superseded by the in-place drawer.
             const sc = { startField: cfg.dateField, titleField: cfg.titleField, colorField: cfg.colorField, drawer: true };
-            return `    <div ${wrapperStyle(block)}${cls}>
-      <SvGrid data={allRows} columns={schemaToColumns(${schemaVar})} getRowId={(r) => String((r as Record<string, unknown>)[${schemaVar}.idField ?? 'id'])} loading={!allRowsReady} scheduler={${schedulerConfigExpr(sc, typeName, asText)}} containerHeight={${h}} />
+            return `    <div ${wrapperStyle(block)}${cls}>
+      <SvGrid data={allRows} columns={schemaToColumns(${schemaVar})} getRowId={(r) => String((r as Record<string, unknown>)[${schemaVar}.idField ?? 'id'])} loading={!allRowsReady} scheduler={${schedulerConfigExpr(sc, typeName, asText)}} containerHeight={${h}} />
     </div>`;
         }
         case 'detail': {
@@ -530,8 +530,8 @@ ${panels}
             props.push(`selectedId={page.url.searchParams.get('id') ?? undefined}`);
             if (h)
                 props.push(`height={${h}}`);
-            return `    <div ${wrapperStyle(block)}${cls}>
-      <SvRecordDetail ${props.join(' ')} />
+            return `    <div ${wrapperStyle(block)}${cls}>
+      <SvRecordDetail ${props.join(' ')} />
     </div>`;
         }
         case 'lookup':
@@ -539,10 +539,40 @@ ${panels}
         case 'component':
             return componentBlockMarkup(block, cfg, ctx.handleNames?.get(block.id), rowsExpr);
         case 'form':
+            return createFormMarkup(entity, schemaVar, block, cfg);
         default:
-            return ''; // the form is the edit modal, rendered after the screen grid
+            return '';
     }
 }
+/**
+ * A standalone create form: blank, always on the page, submits a new row.
+ *
+ * Keyed on `formSaves` so a successful create remounts the panel with empty
+ * values - the panel seeds itself from `row` once, so without the key the
+ * previous entry would still be sitting in the fields.
+ */
+function createFormMarkup(entity, schemaVar, block, cfg) {
+    const span = wrapperStyle(block);
+    const cls = wrapperClass(block);
+    const attrs = [`schema={${schemaVar}}`, 'row={null}', 'presentation="inline"'];
+    attrs.push(`title={${jsStr(cfg.title ?? `New ${entity.label ?? entity.name}`)}}`);
+    if (cfg.submitLabel)
+        attrs.push(`submitLabel={${jsStr(cfg.submitLabel)}}`);
+    // Inline fills its block unless told otherwise, so only a real choice is emitted.
+    if (cfg.width && cfg.width !== 'md')
+        attrs.push(`formSize=${jsStr(cfg.width)}`);
+    // A confirmation only makes sense when the page stays put; navigating away
+    // makes the new screen the confirmation.
+    const done = cfg.afterSave === 'navigate'
+        ? ''
+        : `
+      {#if formSaves}<p class="st-form__done" role="status">Saved. Add another below.</p>{/if}`;
+    return `    <div ${span}${cls}>${done}
+      {#key formSaves}
+        <SvGridEditPanel ${attrs.join(' ')} onSubmit={createRecord} />
+      {/key}
+    </div>`;
+}
 /** Emits a UI-kit component block (see `UI_COMPONENT_REGISTRY`): a literal
  *  `<SvXxx .../>` tag carrying its configured "chrome" props + optional text
  *  content. Entity-agnostic - used both from `blockMarkup` (mixed onto an
@@ -584,9 +614,9 @@ function componentBlockMarkup(block, cfg, handleName, rowsExpr) {
         const wrapper = STANDARD_UI_EVENTS.filter((se) => !propWired.some((e) => e.key === se.key))
             .map((se) => ` on${se.dom}={(e) => ${handleName}.fire('${se.key}', e)}`)
             .join('');
-        return `    <!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions -->
-    <div id="${block.id}"${wrapper} ${span}${cls}>
-      <${spec.importName} {...${handleName}.props}${eventAttrs}${inner}
+        return `    <!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions -->
+    <div id="${block.id}"${wrapper} ${span}${cls}>
+      <${spec.importName} {...${handleName}.props}${eventAttrs}${inner}
     </div>`;
     }
     // Data bindings: a bound prop's value is a reactive expression over the screen's
@@ -622,8 +652,8 @@ function componentBlockMarkup(block, cfg, handleName, rowsExpr) {
         : contentB
             ? `>{${bindingExpr(contentB, rowsExpr, false)}}</${spec.importName}>`
             : `>{${jsStr(String(cfg.props._content ?? spec.contentDefault ?? ''))}}</${spec.importName}>`;
-    return `    <div id="${block.id}" ${span}${cls}>
-      ${openTag}${inner}
+    return `    <div id="${block.id}" ${span}${cls}>
+      ${openTag}${inner}
     </div>`;
 }
 /** A JS expression for a component prop's configured value, by panel type. */
@@ -758,12 +788,12 @@ function filterPanelState(entity, block, cfg) {
             return `    if (v[${key}]) c[${key}] = { operator: 'equals', value: v[${key}] }`;
         return `    if (v[${key}]) c[${key}] = { operator: 'contains', value: v[${key}] }`;
     }).join('\n');
-    return `let ${state} = $state<Record<string, string>>({})
-  function ${apply}() {
-    const v = ${state}
-    const c: Record<string, { operator: 'equals' | 'contains'; value: string }> = {}
-${assigns}
-    controller.setFilter({ columns: c })
+    return `let ${state} = $state<Record<string, string>>({})
+  function ${apply}() {
+    const v = ${state}
+    const c: Record<string, { operator: 'equals' | 'contains'; value: string }> = {}
+${assigns}
+    controller.setFilter({ columns: c })
   }`;
 }
 /** The faceted filter sidebar markup, wired to its facet state. */
@@ -773,22 +803,22 @@ function filterPanelMarkup(entity, block, cfg) {
         const set = `${state}[${jsStr(f.field)}] = e.currentTarget.value; ${apply}()`;
         if (f.type === 'enum') {
             const opts = enumOpts(f).map((o) => `<option value="${o.value}">${o.label}</option>`).join('');
-            return `      <label class="st-filter__row"><span>${fieldLabel(f)}</span>
-        <select onchange={(e) => { ${set} }}><option value="">Any</option>${opts}</select>
+            return `      <label class="st-filter__row"><span>${fieldLabel(f)}</span>
+        <select onchange={(e) => { ${set} }}><option value="">Any</option>${opts}</select>
       </label>`;
         }
         if (f.type === 'boolean') {
-            return `      <label class="st-filter__row"><span>${fieldLabel(f)}</span>
-        <select onchange={(e) => { ${set} }}><option value="">Any</option><option value="true">Yes</option><option value="false">No</option></select>
+            return `      <label class="st-filter__row"><span>${fieldLabel(f)}</span>
+        <select onchange={(e) => { ${set} }}><option value="">Any</option><option value="true">Yes</option><option value="false">No</option></select>
       </label>`;
         }
-        return `      <label class="st-filter__row"><span>${fieldLabel(f)}</span>
-        <input type="search" placeholder="Search…" oninput={(e) => { ${set} }} />
+        return `      <label class="st-filter__row"><span>${fieldLabel(f)}</span>
+        <input type="search" placeholder="Search…" oninput={(e) => { ${set} }} />
       </label>`;
     }).join('\n');
-    return `    <aside ${wrapperStyle(block)}${wrapperClass(block, 'st-filter')}>
-      <div class="st-filter__title">${cfg.title ?? 'Filters'}</div>
-${controls}
+    return `    <aside ${wrapperStyle(block)}${wrapperClass(block, 'st-filter')}>
+      <div class="st-filter__title">${cfg.title ?? 'Filters'}</div>
+${controls}
     </aside>`;
 }
 /** A `{#snippet}` rendering a grid row's action buttons (edit / delete / navigate).
@@ -821,10 +851,10 @@ function rowActionsSnippet(idSafe, typeName, entity, actions, routeById, gate, s
         const target = a.targetField ?? idField;
         return `<button type="button" class="st-rowaction" onclick={(e) => { e.stopPropagation(); goto('/${route}?${target}=' + encodeURIComponent(String((row as Record<string, unknown>)[${jsStr(src)}] ?? ''))) }}>${a.label ?? 'Open'}</button>`;
     }).filter(Boolean).join('\n    ');
-    return `{#snippet rowActions_${idSafe}({ row }: { row: ${typeName} })}
-  <div class="st-rowactions">
-    ${buttons}
-  </div>
+    return `{#snippet rowActions_${idSafe}({ row }: { row: ${typeName} })}
+  <div class="st-rowactions">
+    ${buttons}
+  </div>
 {/snippet}`;
 }
 /** Sanitize a user action id into a valid JS identifier suffix. */
@@ -900,38 +930,38 @@ function filterSurfaceProps(cfg) {
 function treeGridScript(idSafe, typeName, cfg) {
     const parent = jsStr(cfg.treeData.parentField);
     const rec = `(r as Record<string, unknown>)`;
-    return `let treeExpanded_${idSafe} = $state<Record<string, boolean>>({})
-  function toggleTree_${idSafe}(id: string) { treeExpanded_${idSafe} = { ...treeExpanded_${idSafe}, [id]: !(treeExpanded_${idSafe}[id] ?? true) } }
-  function treeBuild_${idSafe}() {
-    const rows = allRows
-    const idOf = (r: ${typeName}) => String(${rec}[idField] ?? '')
-    const parentOf = (r: ${typeName}) => { const v = ${rec}[${parent}]; return v == null || v === '' ? null : String(v) }
-    const present = new Set(rows.map(idOf))
-    const children = new Map<string | null, ${typeName}[]>()
-    for (const r of rows) { const p = parentOf(r); const key = p != null && present.has(p) ? p : null; const list = children.get(key) ?? []; list.push(r); children.set(key, list) }
-    const info = new Map<string, { depth: number; hasChildren: boolean; expanded: boolean }>()
-    const visible: ${typeName}[] = []
-    const walk = (parentId: string | null, depth: number) => {
-      for (const r of children.get(parentId) ?? []) {
-        const id = idOf(r); const hasChildren = (children.get(id)?.length ?? 0) > 0; const expanded = treeExpanded_${idSafe}[id] ?? true
-        info.set(id, { depth, hasChildren, expanded }); visible.push(r)
-        if (hasChildren && expanded) walk(id, depth + 1)
-      }
-    }
-    walk(null, 0)
-    return { info, visible }
-  }
+    return `let treeExpanded_${idSafe} = $state<Record<string, boolean>>({})
+  function toggleTree_${idSafe}(id: string) { treeExpanded_${idSafe} = { ...treeExpanded_${idSafe}, [id]: !(treeExpanded_${idSafe}[id] ?? true) } }
+  function treeBuild_${idSafe}() {
+    const rows = allRows
+    const idOf = (r: ${typeName}) => String(${rec}[idField] ?? '')
+    const parentOf = (r: ${typeName}) => { const v = ${rec}[${parent}]; return v == null || v === '' ? null : String(v) }
+    const present = new Set(rows.map(idOf))
+    const children = new Map<string | null, ${typeName}[]>()
+    for (const r of rows) { const p = parentOf(r); const key = p != null && present.has(p) ? p : null; const list = children.get(key) ?? []; list.push(r); children.set(key, list) }
+    const info = new Map<string, { depth: number; hasChildren: boolean; expanded: boolean }>()
+    const visible: ${typeName}[] = []
+    const walk = (parentId: string | null, depth: number) => {
+      for (const r of children.get(parentId) ?? []) {
+        const id = idOf(r); const hasChildren = (children.get(id)?.length ?? 0) > 0; const expanded = treeExpanded_${idSafe}[id] ?? true
+        info.set(id, { depth, hasChildren, expanded }); visible.push(r)
+        if (hasChildren && expanded) walk(id, depth + 1)
+      }
+    }
+    walk(null, 0)
+    return { info, visible }
+  }
   const tree_${idSafe} = $derived(treeBuild_${idSafe}())`;
 }
 /** The `{#snippet}` for a tree grid's label column: indent by depth + an expand toggle. */
 function treeCellSnippet(idSafe, typeName) {
     const idExpr = `String((row as Record<string, unknown>)[idField] ?? '')`;
-    return `{#snippet treeCell_${idSafe}({ value, row }: { value: unknown; row: ${typeName} })}
-  {@const info = tree_${idSafe}.info.get(${idExpr})}
-  <span class="st-treecell" style="padding-left: {(info?.depth ?? 0) * 18}px;">
-    {#if info?.hasChildren}<button type="button" class="st-tree-toggle" aria-label="Toggle" aria-expanded={info.expanded} onclick={() => toggleTree_${idSafe}(${idExpr})}>{info.expanded ? '▾' : '▸'}</button>{:else}<span class="st-tree-spacer"></span>{/if}
-    <span>{String(value ?? '')}</span>
-  </span>
+    return `{#snippet treeCell_${idSafe}({ value, row }: { value: unknown; row: ${typeName} })}
+  {@const info = tree_${idSafe}.info.get(${idExpr})}
+  <span class="st-treecell" style="padding-left: {(info?.depth ?? 0) * 18}px;">
+    {#if info?.hasChildren}<button type="button" class="st-tree-toggle" aria-label="Toggle" aria-expanded={info.expanded} onclick={() => toggleTree_${idSafe}(${idExpr})}>{info.expanded ? '▾' : '▸'}</button>{:else}<span class="st-tree-spacer"></span>{/if}
+    <span>{String(value ?? '')}</span>
+  </span>
 {/snippet}`;
 }
 /** The export toolbar markup for a grid: buttons wired to the captured grid API var. */
@@ -957,36 +987,36 @@ function exportToolbarMarkup(e, apiVar, entityName) {
 }
 /** Shared helper: map a status-ish value to a badge intent by common vocabulary.
  *  Emitted once per page when any column uses the `badge` cell renderer. */
-const BADGE_VARIANT_HELPER = `  function stBadgeVariant(value: unknown): 'neutral' | 'success' | 'warning' | 'danger' | 'info' {
-    const v = String(value ?? '').toLowerCase().trim()
-    if (['active', 'open', 'success', 'done', 'paid', 'approved', 'complete', 'completed', 'won', 'shipped', 'yes', 'true'].includes(v)) return 'success'
-    if (['pending', 'warning', 'in progress', 'processing', 'trial', 'review', 'on hold', 'medium'].includes(v)) return 'warning'
-    if (['closed', 'error', 'failed', 'cancelled', 'canceled', 'overdue', 'rejected', 'lost', 'blocked', 'inactive', 'no', 'false', 'high', 'urgent'].includes(v)) return 'danger'
-    if (['new', 'info', 'draft', 'low'].includes(v)) return 'info'
-    return 'neutral'
+const BADGE_VARIANT_HELPER = `  function stBadgeVariant(value: unknown): 'neutral' | 'success' | 'warning' | 'danger' | 'info' {
+    const v = String(value ?? '').toLowerCase().trim()
+    if (['active', 'open', 'success', 'done', 'paid', 'approved', 'complete', 'completed', 'won', 'shipped', 'yes', 'true'].includes(v)) return 'success'
+    if (['pending', 'warning', 'in progress', 'processing', 'trial', 'review', 'on hold', 'medium'].includes(v)) return 'warning'
+    if (['closed', 'error', 'failed', 'cancelled', 'canceled', 'overdue', 'rejected', 'lost', 'blocked', 'inactive', 'no', 'false', 'high', 'urgent'].includes(v)) return 'danger'
+    if (['new', 'info', 'draft', 'low'].includes(v)) return 'info'
+    return 'neutral'
   }`;
 /** Shared helper: run an `@svgrid/enterprise` export off a captured grid API.
  *  Emitted once per page when any grid has an xlsx / pdf button. Surfaces the
  *  failure instead of swallowing it - a missing optional peer dep (jszip for
  *  xlsx, pdfmake for pdf) is the usual cause and is worth seeing. */
-const EXPORT_HELPER = `  async function stExport(api: SvGridApi<never, never> | undefined, format: 'xlsx' | 'pdf', filename: string) {
-    if (!api) return
-    try {
-      await exportGrid(api, { format, filename })
-    } catch (err) {
-      console.error('Export failed:', err)
-      alert('Export failed: ' + (err instanceof Error ? err.message : String(err)))
-    }
+const EXPORT_HELPER = `  async function stExport(api: SvGridApi<never, never> | undefined, format: 'xlsx' | 'pdf', filename: string) {
+    if (!api) return
+    try {
+      await exportGrid(api, { format, filename })
+    } catch (err) {
+      console.error('Export failed:', err)
+      alert('Export failed: ' + (err instanceof Error ? err.message : String(err)))
+    }
   }`;
 /** Shared helper: paginated print off a captured grid API. */
-const PRINT_HELPER = `  async function stPrint(api: SvGridApi<never, never> | undefined, title: string) {
-    if (!api) return
-    try {
-      await printGrid(api, { title })
-    } catch (err) {
-      console.error('Print failed:', err)
-      alert('Print failed: ' + (err instanceof Error ? err.message : String(err)))
-    }
+const PRINT_HELPER = `  async function stPrint(api: SvGridApi<never, never> | undefined, title: string) {
+    if (!api) return
+    try {
+      await printGrid(api, { title })
+    } catch (err) {
+      console.error('Print failed:', err)
+      alert('Print failed: ' + (err instanceof Error ? err.message : String(err)))
+    }
   }`;
 /** The `{#snippet}` body for one rich cell renderer (badge / progress / link). */
 function cellRendererSnippet(idSafe, field, cellType) {
@@ -1009,17 +1039,17 @@ function cellRendererSnippet(idSafe, field, cellType) {
  *  assumed - swap for the app's own if it has one). */
 function actionHandlerScript(a) {
     const safe = actionIdSafe(a.id);
-    return `let actionBusy_${safe} = $state(false)
-  async function runAction_${safe}(payload?: Record<string, unknown>) {
-    actionBusy_${safe} = true
-    try {
-      const res = await fetch('/api/actions/${a.id}', { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify(payload ?? {}) })
-      if (!res.ok) throw new Error(((await res.json().catch(() => ({}))) as { error?: string }).error ?? 'Action failed')
-    } catch (err) {
-      alert(err instanceof Error ? err.message : 'Action failed')
-    } finally {
-      actionBusy_${safe} = false
-    }
+    return `let actionBusy_${safe} = $state(false)
+  async function runAction_${safe}(payload?: Record<string, unknown>) {
+    actionBusy_${safe} = true
+    try {
+      const res = await fetch('/api/actions/${a.id}', { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify(payload ?? {}) })
+      if (!res.ok) throw new Error(((await res.json().catch(() => ({}))) as { error?: string }).error ?? 'Action failed')
+    } catch (err) {
+      alert(err instanceof Error ? err.message : 'Action failed')
+    } finally {
+      actionBusy_${safe} = false
+    }
   }`;
 }
 /** A toolbar action button - RBAC-gated by screen access (not a CRUD `can()`
@@ -1041,15 +1071,15 @@ function actionRouteFile(a, screenId, accessEnabled) {
     return {
         path: `src/routes/api/actions/${a.id}/+server.ts`,
         description: `Stub route for the "${a.label}" action - fill in the actual logic.`,
-        contents: `${accessImport}
-export async function POST(event: { request: Request; locals?: Record<string, unknown> }) {${guard}
-  const body = await event.request.json().catch(() => ({})) as Record<string, unknown>
-  void body // the row id (row actions) or {} (toolbar actions) - use it to look up what to act on
-
-  // TODO: your business logic here.
-
-  return new Response(JSON.stringify({ ok: true }))
-}
+        contents: `${accessImport}
+export async function POST(event: { request: Request; locals?: Record<string, unknown> }) {${guard}
+  const body = await event.request.json().catch(() => ({})) as Record<string, unknown>
+  void body // the row id (row actions) or {} (toolbar actions) - use it to look up what to act on
+
+  // TODO: your business logic here.
+
+  return new Response(JSON.stringify({ ok: true }))
+}
 `,
     };
 }
@@ -1082,14 +1112,14 @@ function recordPanelMarkup(entity, schemaVar, block, cfg) {
         // Modal / drawer float over the page (shown only while a row is selected);
         // inline lives in the block, with a prompt when nothing is selected.
         inner = pres === 'inline'
-            ? `      {#if selectedRecord}
-        <SvGridEditPanel schema={${schemaVar}} row={selectedRecord} presentation="inline" onSubmit={saveRecord} onCancel={() => (selectedRecord = null)} />
-      {:else}
-        <p class="st-hint">Select a row to see its details.</p>
+            ? `      {#if selectedRecord}
+        <SvGridEditPanel schema={${schemaVar}} row={selectedRecord} presentation="inline" onSubmit={saveRecord} onCancel={() => (selectedRecord = null)} />
+      {:else}
+        <p class="st-hint">Select a row to see its details.</p>
       {/if}`
-            : `      <p class="st-hint">Select a row to open its ${pres === 'drawer' ? 'editor drawer' : 'edit dialog'}.</p>
-      {#if selectedRecord}
-        <SvGridEditPanel schema={${schemaVar}} row={selectedRecord} presentation="${pres}" onSubmit={saveRecord} onCancel={() => (selectedRecord = null)} />
+            : `      <p class="st-hint">Select a row to open its ${pres === 'drawer' ? 'editor drawer' : 'edit dialog'}.</p>
+      {#if selectedRecord}
+        <SvGridEditPanel schema={${schemaVar}} row={selectedRecord} presentation="${pres}" onSubmit={saveRecord} onCancel={() => (selectedRecord = null)} />
       {/if}`;
     }
     else {
@@ -1098,16 +1128,16 @@ function recordPanelMarkup(entity, schemaVar, block, cfg) {
             ? entity.fields.filter((f) => cfg.fields.includes(f.field))
             : entity.fields.filter((f) => f.field !== pk);
         const rows = chosen.map((f) => `          <div class="st-record__row"><dt>${fieldLabel(f)}</dt><dd>{String((selectedRecord as Record<string, unknown>)[${jsStr(f.field)}] ?? '')}</dd></div>`).join('\n');
-        inner = `      {#if selectedRecord}
-        <dl class="st-record">
-${rows}
-        </dl>
-      {:else}
-        <p class="st-hint">Select a row to see its details.</p>
+        inner = `      {#if selectedRecord}
+        <dl class="st-record">
+${rows}
+        </dl>
+      {:else}
+        <p class="st-hint">Select a row to see its details.</p>
       {/if}`;
     }
-    return `    <div ${span}${wrapperClass(block, 'st-record-card')}>
-${inner}
+    return `    <div ${span}${wrapperClass(block, 'st-record-card')}>
+${inner}
     </div>`;
 }
 /** A freestanding page - no bound entity, so no entity-bound `Block`; it can
@@ -1274,56 +1304,56 @@ export function ctxCompletions(screen) {
  *  (so calls never false-error) while keeping useful returns (Promise<string>,
  *  boolean, ...). Self-contained: the only external reference is the `Row` param.
  *  Powers the in-editor TypeScript service's hover / signature / diagnostics. */
-const GRID_API_SIGNATURES = `  getCellValue(rowIndex: number, columnId: string): unknown
-  setCellValue(rowIndex: number, columnId: string, value: unknown): void
-  startEditing(rowIndex: number, columnId: string): boolean
-  stopEditing(cancel?: boolean): boolean
-  selectCells(ranges: ReadonlyArray<readonly [number, number, number, number]>): void
-  getSelected(): Array<[number, number, number, number]>
-  openChart(): void
-  closeChart(): void
-  getChartSpec(): unknown
-  chartRange(ranges?: ReadonlyArray<readonly [number, number, number, number]>): void
-  configureChart(config: { open?: boolean; type?: string; dimension?: string | null; series?: string | null; measure?: string | null; reduce?: 'sum' | 'avg' | 'count'; stacked?: boolean; dataLabels?: boolean; logScale?: boolean; timeAxis?: boolean; valueFormat?: 'number' | 'currency' | 'percent' | 'compact' }): void
-  setChartAiHandler(handler: ((prompt: string) => Promise<Record<string, unknown> | null>) | null): void
-  addRow(row: Row, position?: 'top' | 'bottom' | number): void
-  addRows(rows: ReadonlyArray<Row>, position?: 'top' | 'bottom' | number): void
-  removeRow(rowIndex: number): void
-  removeRows(rowIndices: ReadonlyArray<number>): void
-  applyTransaction(tx: { add?: Row[]; update?: Row[]; remove?: Array<string | Row> }): { added: number; updated: number; removed: number }
-  addColumn(column: any, position?: 'left' | 'right' | number): void
-  addColumns(columns: ReadonlyArray<any>, position?: 'left' | 'right' | number): void
-  removeColumn(columnId: string): void
-  setColumnVisible(columnId: string, visible: boolean): void
-  isColumnVisible(columnId: string): boolean
-  setSort(columnId: string, direction: 'asc' | 'desc' | null): void
-  clearSort(): void
-  setGroupBy(columnIds: ReadonlyArray<string>): void
-  setFilter(columnId: string, filter: any | null): void
-  setFacetFilter(columnId: string, values: ReadonlyArray<string> | null): void
-  clearFilter(columnId: string): void
-  clearAllFilters(): void
-  getFilters(): Record<string, { operator: string; value: string; valueTo?: string }>
-  getDisplayedRows(): ReadonlyArray<Row>
-  getData(): ReadonlyArray<Row>
-  getColumns(): ReadonlyArray<{ id: string; header: string; visible: boolean }>
-  exportCsv(options?: any): Promise<string>
-  exportTsv(options?: any): Promise<string>
-  exportJson(options?: any): Promise<string>
-  copyToClipboard(options?: any): Promise<string>
-  clearRowSelection(): void
-  setColumnWidth(columnId: string, width: number): void
-  getColumnWidths(): Record<string, number>
-  autosizeColumn(columnId: string): void
-  autosizeAllColumns(): void
-  setColumnPinning(pinning: { left?: string[]; right?: string[] }): void
-  getColumnPinning(): { left: string[]; right: string[] }
-  setColumnOrder(order: ReadonlyArray<string>): void
-  getColumnOrder(): string[]
-  setRowExpanded(id: string, expanded: boolean): void
-  expandAllGroups(): void
-  collapseAllGroups(): void
-  undo(): boolean
+const GRID_API_SIGNATURES = `  getCellValue(rowIndex: number, columnId: string): unknown
+  setCellValue(rowIndex: number, columnId: string, value: unknown): void
+  startEditing(rowIndex: number, columnId: string): boolean
+  stopEditing(cancel?: boolean): boolean
+  selectCells(ranges: ReadonlyArray<readonly [number, number, number, number]>): void
+  getSelected(): Array<[number, number, number, number]>
+  openChart(): void
+  closeChart(): void
+  getChartSpec(): unknown
+  chartRange(ranges?: ReadonlyArray<readonly [number, number, number, number]>): void
+  configureChart(config: { open?: boolean; type?: string; dimension?: string | null; series?: string | null; measure?: string | null; reduce?: 'sum' | 'avg' | 'count'; stacked?: boolean; dataLabels?: boolean; logScale?: boolean; timeAxis?: boolean; valueFormat?: 'number' | 'currency' | 'percent' | 'compact' }): void
+  setChartAiHandler(handler: ((prompt: string) => Promise<Record<string, unknown> | null>) | null): void
+  addRow(row: Row, position?: 'top' | 'bottom' | number): void
+  addRows(rows: ReadonlyArray<Row>, position?: 'top' | 'bottom' | number): void
+  removeRow(rowIndex: number): void
+  removeRows(rowIndices: ReadonlyArray<number>): void
+  applyTransaction(tx: { add?: Row[]; update?: Row[]; remove?: Array<string | Row> }): { added: number; updated: number; removed: number }
+  addColumn(column: any, position?: 'left' | 'right' | number): void
+  addColumns(columns: ReadonlyArray<any>, position?: 'left' | 'right' | number): void
+  removeColumn(columnId: string): void
+  setColumnVisible(columnId: string, visible: boolean): void
+  isColumnVisible(columnId: string): boolean
+  setSort(columnId: string, direction: 'asc' | 'desc' | null): void
+  clearSort(): void
+  setGroupBy(columnIds: ReadonlyArray<string>): void
+  setFilter(columnId: string, filter: any | null): void
+  setFacetFilter(columnId: string, values: ReadonlyArray<string> | null): void
+  clearFilter(columnId: string): void
+  clearAllFilters(): void
+  getFilters(): Record<string, { operator: string; value: string; valueTo?: string }>
+  getDisplayedRows(): ReadonlyArray<Row>
+  getData(): ReadonlyArray<Row>
+  getColumns(): ReadonlyArray<{ id: string; header: string; visible: boolean }>
+  exportCsv(options?: any): Promise<string>
+  exportTsv(options?: any): Promise<string>
+  exportJson(options?: any): Promise<string>
+  copyToClipboard(options?: any): Promise<string>
+  clearRowSelection(): void
+  setColumnWidth(columnId: string, width: number): void
+  getColumnWidths(): Record<string, number>
+  autosizeColumn(columnId: string): void
+  autosizeAllColumns(): void
+  setColumnPinning(pinning: { left?: string[]; right?: string[] }): void
+  getColumnPinning(): { left: string[]; right: string[] }
+  setColumnOrder(order: ReadonlyArray<string>): void
+  getColumnOrder(): string[]
+  setRowExpanded(id: string, expanded: boolean): void
+  expandAllGroups(): void
+  collapseAllGroups(): void
+  undo(): boolean
   redo(): boolean`;
 /** Map an entity field to a TS type for the generated Row interface (mirrors scaffold.ts). */
 function fieldTsType(f) {
@@ -1360,35 +1390,35 @@ export function ctxAmbientDts(screen, entity) {
         members.push(`  data: { rows: ${rowName}[]; reload(): void }`);
     members.push('  goto(path: string): void');
     members.push('  params: Record<string, string>');
-    return `// Ambient types for the "${screen.title}" screen's code-behind. Regenerated - editor use only.
-${rowDecl}
-
-interface SvGridApi<Row> {
-${GRID_API_SIGNATURES}
-}
-
-interface DataHandle<T> {
-  /** Feed this block its own rows (overrides the screen dataset until cleared). */
-  setData(rows: T[]): void
-  /** The rows the block renders: the override if set, else the screen dataset. */
-  readonly rows: T[]
-  /** Drop the override; the block follows the screen dataset again. */
-  clear(): void
-}
-
-interface Handle {
-  setText(value: string): void
-  setLabel(value: string): void
-  set(name: string, value: unknown): void
-  get(name: string): unknown
-  onClick(fn: (e: Event) => void): void
-  onclick: (e: Event) => void
-  [key: string]: any
-}
-${componentTypeDecls ? '\n' + componentTypeDecls + '\n' : ''}
-interface PageContext {
-${members.join('\n')}
-}
+    return `// Ambient types for the "${screen.title}" screen's code-behind. Regenerated - editor use only.
+${rowDecl}
+
+interface SvGridApi<Row> {
+${GRID_API_SIGNATURES}
+}
+
+interface DataHandle<T> {
+  /** Feed this block its own rows (overrides the screen dataset until cleared). */
+  setData(rows: T[]): void
+  /** The rows the block renders: the override if set, else the screen dataset. */
+  readonly rows: T[]
+  /** Drop the override; the block follows the screen dataset again. */
+  clear(): void
+}
+
+interface Handle {
+  setText(value: string): void
+  setLabel(value: string): void
+  set(name: string, value: unknown): void
+  get(name: string): unknown
+  onClick(fn: (e: Event) => void): void
+  onclick: (e: Event) => void
+  [key: string]: any
+}
+${componentTypeDecls ? '\n' + componentTypeDecls + '\n' : ''}
+interface PageContext {
+${members.join('\n')}
+}
 `;
 }
 /** A comment manifest of what `ctx` gives onLoad/onDestroy - each handle plus the
@@ -1421,103 +1451,103 @@ function handlesModuleFile() {
     return {
         path: 'src/lib/handles.svelte.ts',
         description: 'Reactive imperative handles for UI components (btn.setLabel, btn.onclick = ...).',
-        contents: `// Regenerated by SvGrid Studio.
-/** An imperative, reactive handle over a UI component. In page code you get one
- *  per component (e.g. \`button1\`); mutate it and the component updates. */
-export class ComponentHandle {
-  props = $state<Record<string, unknown>>({})
-  text = $state('')
-  on = $state<Record<string, (e: Event) => void>>({})
-  constructor(init: { props?: Record<string, unknown>; text?: string }) {
-    this.props = { ...(init.props ?? {}) }
-    this.text = init.text ?? ''
-  }
-  set(name: string, value: unknown): this { this.props = { ...this.props, [name]: value }; return this }
-  get(name: string): unknown { return this.props[name] }
-  setText(value: string): this { this.text = value; return this }
-  setLabel(value: string): this { this.text = value; return this }
-  onEvent(name: string, fn: (e: Event) => void): this { this.on = { ...this.on, [name.toLowerCase()]: fn }; return this }
-  onClick(fn: (e: Event) => void): this { return this.onEvent('click', fn) }
-  fire(name: string, e: Event): void { this.on[name.toLowerCase()]?.(e) }
-}
-
-/** An imperative, reactive handle over a data-bound block (chart, KPI, gauge,
- *  pivot, ...). By default it mirrors the screen's dataset; \`setData(rows)\` pins
- *  an override so page code can feed the block its own rows (a filtered slice, a
- *  fetch result), and \`clear()\` returns it to the screen dataset. */
-export class DataHandle<T = Record<string, unknown>> {
-  #override = $state<T[] | null>(null)
-  #fallback: () => T[]
-  constructor(fallback: () => T[]) { this.#fallback = fallback }
-  /** The rows the block renders: the override if set, else the screen dataset. */
-  get rows(): T[] { return this.#override ?? this.#fallback() }
-  /** Feed this block its own rows (overrides the screen dataset until cleared). */
-  setData(rows: T[]): void { this.#override = rows }
-  /** Drop the override; the block follows the screen dataset again. */
-  clear(): void { this.#override = null }
-}
-
-/** A DataHandle whose fallback is the screen dataset getter. */
-export function dataHandle<T>(fallback: () => T[]): DataHandle<T> { return new DataHandle<T>(fallback) }
-
-/** Event subscriptions for the Grid (\`ctx.grid.onCellClick = (e) => {}\`). The keys
- *  are lowercased on both store + dispatch so any on<Event> casing round-trips. */
-class GridEvents {
-  on: Record<string, (...args: unknown[]) => void> = {}
-  fire(name: string, ...args: unknown[]): void { this.on[name.toLowerCase()]?.(...args) }
-}
-/** Wrap the Grid's real SvGridApi so page code gets BOTH its methods
- *  (\`ctx.grid.exportCsv()\`) and event subscription (\`ctx.grid.onRowClick = fn\`).
- *  The api arrives asynchronously (onApiReady), so it is read lazily via \`getApi\`. */
-export function gridHandle<A extends object>(getApi: () => A | null): A & GridEvents {
-  const ev = new GridEvents()
-  return new Proxy(ev, {
-    get(t, k) {
-      if (k in t) { const v = (t as Record<string | symbol, unknown>)[k]; return typeof v === 'function' ? (v as (...a: unknown[]) => unknown).bind(t) : v }
-      const api = getApi() as Record<string | symbol, unknown> | null
-      if (!api) return undefined
-      const v = api[k]
-      if (typeof v === 'function') return (v as (...a: unknown[]) => unknown).bind(api)
-      // A grid PROP read (ctx.grid.sortable) -> its effective value via getOption.
-      if (v === undefined && typeof k === 'string' && !/^on[A-Z]/.test(k) && typeof api.getOption === 'function') return (api.getOption as (key: unknown) => unknown)(k)
-      return v
-    },
-    set(t, k, val) {
-      // onRowClick = fn / oncellclick = fn -> subscribe (any casing; keys lowercase).
-      if (typeof k === 'string' && /^on[A-Za-z]/.test(k)) { t.on = { ...t.on, [k.slice(2).toLowerCase()]: val as (...a: unknown[]) => void }; return true }
-      const api = getApi() as Record<string | symbol, unknown> | null
-      // ctx.grid.sortable = true -> the grid's reactive option channel (setOption writes
-      // a $state override the grid merges over its props). Falls back to a direct set for
-      // an older grid build without setOption.
-      if (api && typeof api.setOption === 'function') { (api.setOption as (key: unknown, value: unknown) => void)(k, val); return true }
-      if (api) api[k] = val
-      return true
-    },
-  }) as A & GridEvents
-}
-
-/** A handle plus dynamic setX / onX helpers and \`el.onclick = fn\` assignment. */
-export type Handle = ComponentHandle & Record<string, any>
-
-export function handle(init: { props?: Record<string, unknown>; text?: string }): Handle {
-  const h = new ComponentHandle(init)
-  return new Proxy(h, {
-    get(t, k) {
-      if (Reflect.has(t, k)) { const v = (t as unknown as Record<string, unknown>)[k as string]; return typeof v === 'function' ? v.bind(t) : v }
-      if (typeof k === 'string' && /^set[A-Z]/.test(k)) { const p = k[3]!.toLowerCase() + k.slice(4); return (v: unknown) => t.set(p, v) }
-      // onEvent(fn) call form. onEvent lowercases, so onKeyDown maps to the 'keydown' the wrapper fires.
-      if (typeof k === 'string' && /^on[A-Z]/.test(k)) { const e = k.slice(2); return (fn: (ev: Event) => void) => t.onEvent(e, fn) }
-      return typeof k === 'string' ? t.props[k] : undefined
-    },
-    set(t, k, v) {
-      // el.onKeyDown = fn / el.onclick = fn -> subscribe (onEvent lowercases the key).
-      if (typeof k === 'string' && /^on[A-Za-z]/.test(k)) { t.onEvent(k.slice(2), v as (e: Event) => void); return true }
-      if (k === 'text') { t.text = v as string; return true }              // content, not a prop
-      if (typeof k === 'string') t.set(k, v)                                 // checkbox1.checked = true
-      return true
-    },
-  }) as Handle
-}
+        contents: `// Regenerated by SvGrid Studio.
+/** An imperative, reactive handle over a UI component. In page code you get one
+ *  per component (e.g. \`button1\`); mutate it and the component updates. */
+export class ComponentHandle {
+  props = $state<Record<string, unknown>>({})
+  text = $state('')
+  on = $state<Record<string, (e: Event) => void>>({})
+  constructor(init: { props?: Record<string, unknown>; text?: string }) {
+    this.props = { ...(init.props ?? {}) }
+    this.text = init.text ?? ''
+  }
+  set(name: string, value: unknown): this { this.props = { ...this.props, [name]: value }; return this }
+  get(name: string): unknown { return this.props[name] }
+  setText(value: string): this { this.text = value; return this }
+  setLabel(value: string): this { this.text = value; return this }
+  onEvent(name: string, fn: (e: Event) => void): this { this.on = { ...this.on, [name.toLowerCase()]: fn }; return this }
+  onClick(fn: (e: Event) => void): this { return this.onEvent('click', fn) }
+  fire(name: string, e: Event): void { this.on[name.toLowerCase()]?.(e) }
+}
+
+/** An imperative, reactive handle over a data-bound block (chart, KPI, gauge,
+ *  pivot, ...). By default it mirrors the screen's dataset; \`setData(rows)\` pins
+ *  an override so page code can feed the block its own rows (a filtered slice, a
+ *  fetch result), and \`clear()\` returns it to the screen dataset. */
+export class DataHandle<T = Record<string, unknown>> {
+  #override = $state<T[] | null>(null)
+  #fallback: () => T[]
+  constructor(fallback: () => T[]) { this.#fallback = fallback }
+  /** The rows the block renders: the override if set, else the screen dataset. */
+  get rows(): T[] { return this.#override ?? this.#fallback() }
+  /** Feed this block its own rows (overrides the screen dataset until cleared). */
+  setData(rows: T[]): void { this.#override = rows }
+  /** Drop the override; the block follows the screen dataset again. */
+  clear(): void { this.#override = null }
+}
+
+/** A DataHandle whose fallback is the screen dataset getter. */
+export function dataHandle<T>(fallback: () => T[]): DataHandle<T> { return new DataHandle<T>(fallback) }
+
+/** Event subscriptions for the Grid (\`ctx.grid.onCellClick = (e) => {}\`). The keys
+ *  are lowercased on both store + dispatch so any on<Event> casing round-trips. */
+class GridEvents {
+  on: Record<string, (...args: unknown[]) => void> = {}
+  fire(name: string, ...args: unknown[]): void { this.on[name.toLowerCase()]?.(...args) }
+}
+/** Wrap the Grid's real SvGridApi so page code gets BOTH its methods
+ *  (\`ctx.grid.exportCsv()\`) and event subscription (\`ctx.grid.onRowClick = fn\`).
+ *  The api arrives asynchronously (onApiReady), so it is read lazily via \`getApi\`. */
+export function gridHandle<A extends object>(getApi: () => A | null): A & GridEvents {
+  const ev = new GridEvents()
+  return new Proxy(ev, {
+    get(t, k) {
+      if (k in t) { const v = (t as Record<string | symbol, unknown>)[k]; return typeof v === 'function' ? (v as (...a: unknown[]) => unknown).bind(t) : v }
+      const api = getApi() as Record<string | symbol, unknown> | null
+      if (!api) return undefined
+      const v = api[k]
+      if (typeof v === 'function') return (v as (...a: unknown[]) => unknown).bind(api)
+      // A grid PROP read (ctx.grid.sortable) -> its effective value via getOption.
+      if (v === undefined && typeof k === 'string' && !/^on[A-Z]/.test(k) && typeof api.getOption === 'function') return (api.getOption as (key: unknown) => unknown)(k)
+      return v
+    },
+    set(t, k, val) {
+      // onRowClick = fn / oncellclick = fn -> subscribe (any casing; keys lowercase).
+      if (typeof k === 'string' && /^on[A-Za-z]/.test(k)) { t.on = { ...t.on, [k.slice(2).toLowerCase()]: val as (...a: unknown[]) => void }; return true }
+      const api = getApi() as Record<string | symbol, unknown> | null
+      // ctx.grid.sortable = true -> the grid's reactive option channel (setOption writes
+      // a $state override the grid merges over its props). Falls back to a direct set for
+      // an older grid build without setOption.
+      if (api && typeof api.setOption === 'function') { (api.setOption as (key: unknown, value: unknown) => void)(k, val); return true }
+      if (api) api[k] = val
+      return true
+    },
+  }) as A & GridEvents
+}
+
+/** A handle plus dynamic setX / onX helpers and \`el.onclick = fn\` assignment. */
+export type Handle = ComponentHandle & Record<string, any>
+
+export function handle(init: { props?: Record<string, unknown>; text?: string }): Handle {
+  const h = new ComponentHandle(init)
+  return new Proxy(h, {
+    get(t, k) {
+      if (Reflect.has(t, k)) { const v = (t as unknown as Record<string, unknown>)[k as string]; return typeof v === 'function' ? v.bind(t) : v }
+      if (typeof k === 'string' && /^set[A-Z]/.test(k)) { const p = k[3]!.toLowerCase() + k.slice(4); return (v: unknown) => t.set(p, v) }
+      // onEvent(fn) call form. onEvent lowercases, so onKeyDown maps to the 'keydown' the wrapper fires.
+      if (typeof k === 'string' && /^on[A-Z]/.test(k)) { const e = k.slice(2); return (fn: (ev: Event) => void) => t.onEvent(e, fn) }
+      return typeof k === 'string' ? t.props[k] : undefined
+    },
+    set(t, k, v) {
+      // el.onKeyDown = fn / el.onclick = fn -> subscribe (onEvent lowercases the key).
+      if (typeof k === 'string' && /^on[A-Za-z]/.test(k)) { t.onEvent(k.slice(2), v as (e: Event) => void); return true }
+      if (k === 'text') { t.text = v as string; return true }              // content, not a prop
+      if (typeof k === 'string') t.set(k, v)                                 // checkbox1.checked = true
+      return true
+    },
+  }) as Handle
+}
 `,
     };
 }
@@ -1648,12 +1678,12 @@ function screenContextFile(screen, rowType) {
     return {
         path: `src/routes/${screen.route}/page-context.ts`,
         description: `Typed page context for "${screen.title}" (regenerated).`,
-        contents: `// Regenerated by SvGrid Studio. Edits here are overwritten - write code in handlers.ts.
-${imports}${imports ? '\n\n' : ''}${typeDecls ? typeDecls + '\n\n' : ''}/** What onLoad(ctx) / onDestroy(ctx) give you: the Grid's real API, each block as a
- *  handle, the screen dataset, and goto / params. */
-export type PageContext = {
-${members.join('\n')}
-}
+        contents: `// Regenerated by SvGrid Studio. Edits here are overwritten - write code in handlers.ts.
+${imports}${imports ? '\n\n' : ''}${typeDecls ? typeDecls + '\n\n' : ''}/** What onLoad(ctx) / onDestroy(ctx) give you: the Grid's real API, each block as a
+ *  handle, the screen dataset, and goto / params. */
+export type PageContext = {
+${members.join('\n')}
+}
 `,
     };
 }
@@ -1696,9 +1726,9 @@ function compiledMethodBodies(screen) {
  *  behavior here. Scaffolded once (userOwned) and never regenerated - the page
  *  imports it, never rewrites it. See HANDLERS-DESIGN.md. */
 function screenHandlersFile(screen) {
-    const header = `// Your code for the "${screen.title}" screen.
-// SvGrid Studio scaffolds this file once and never overwrites it - it's yours.
-// Design the screen visually in Studio; write its behavior here.
+    const header = `// Your code for the "${screen.title}" screen.
+// SvGrid Studio scaffolds this file once and never overwrites it - it's yours.
+// Design the screen visually in Studio; write its behavior here.
 ${screenElementsManifest(screen)}`;
     let body;
     if (screen.handlersSource) {
@@ -1717,18 +1747,18 @@ ${screenElementsManifest(screen)}`;
         const loadInner = loadRaw ? indentBody(loadRaw) : '  // Runs when the page mounts. Reach blocks via ctx.<name>, feed data via ctx.data / ctx.<chart>.setData(rows).';
         const destroyRaw = compiled.onDestroy ?? screen.handlerBodies?.[ON_DESTROY]?.trim();
         const destroyInner = destroyRaw ? indentBody(destroyRaw) : '  // Runs when the page unmounts. Clean up timers, subscriptions, aborts.';
-        body = `import type { PageContext } from './page-context'
-
-/** Runs when the page mounts. Reach blocks (ctx.grid.exportCsv(), ctx.chart1.setData(rows),
- *  ctx.button1.onclick = () => {}), fetch data, navigate with ctx.goto. */
-export async function ${ON_LOAD}(ctx: PageContext): Promise<void> {
-${loadInner}
-}
-
-/** Runs when the page unmounts. Clean up anything onLoad started. */
-export function ${ON_DESTROY}(ctx: PageContext): void {
-${destroyInner}
-}
+        body = `import type { PageContext } from './page-context'
+
+/** Runs when the page mounts. Reach blocks (ctx.grid.exportCsv(), ctx.chart1.setData(rows),
+ *  ctx.button1.onclick = () => {}), fetch data, navigate with ctx.goto. */
+export async function ${ON_LOAD}(ctx: PageContext): Promise<void> {
+${loadInner}
+}
+
+/** Runs when the page unmounts. Clean up anything onLoad started. */
+export function ${ON_DESTROY}(ctx: PageContext): void {
+${destroyInner}
+}
 `;
     }
     return {
@@ -1775,13 +1805,13 @@ function freestandingScreenPage(screen, accessEnabled, i18nEnabled) {
         ? `\n  let rows = $state<RowData[]>([])\n  let gridApi = $state<SvGridApi<any, any> | null>(null)\n  const features = tableFeatures({ rowSortingFeature, columnFilteringFeature, rowSelectionFeature })\n  const columns = $derived(rows.length ? Object.keys(rows[0]).map((field) => ({ field, header: field })) : [])`
         : '';
     const codeScript = hasCode
-        ? `\n  ${gridScript ? gridScript.trimStart() + '\n  ' : ''}${handleDecls ? handleDecls + '\n  ' : ''}onMount(() => {
-    // ctx is internal plumbing wired from this screen's blocks; the typed surface your
-    // code uses lives in handlers.ts (PageContext). Component handles are runtime proxies,
-    // so the cast bridges their dynamic shape to the typed context.
-    const ctx = ${wiring.ctxLiteral} as unknown as PageContext
-    handlers.${ON_LOAD}(ctx)
-    return () => handlers.${ON_DESTROY}(ctx)
+        ? `\n  ${gridScript ? gridScript.trimStart() + '\n  ' : ''}${handleDecls ? handleDecls + '\n  ' : ''}onMount(() => {
+    // ctx is internal plumbing wired from this screen's blocks; the typed surface your
+    // code uses lives in handlers.ts (PageContext). Component handles are runtime proxies,
+    // so the cast bridges their dynamic shape to the typed context.
+    const ctx = ${wiring.ctxLiteral} as unknown as PageContext
+    handlers.${ON_LOAD}(ctx)
+    return () => handlers.${ON_DESTROY}(ctx)
   })`
         : '';
     // Grid events fire into ctx.grid so freestanding page code can subscribe too.
@@ -1795,14 +1825,14 @@ function freestandingScreenPage(screen, accessEnabled, i18nEnabled) {
     return {
         path: `src/routes/${screen.route}/+page.svelte`,
         description: `${screen.title} screen (freestanding, no bound entity).`,
-        contents: `<script lang="ts">
-  ${gridImport}${typeImport}${handleImport}${codeImport}${gotoImport}${pageStateImport}${accessImport}${i18nImport}${parts.join('\n\n  ')}${codeScript}
-</script>
-
-<h1 class="st__title">${title}</h1>
-${toolbar}<div class="st-screen${screenClassSuffix(screen)}">
-${content}
-</div>
+        contents: `<script lang="ts">
+  ${gridImport}${typeImport}${handleImport}${codeImport}${gotoImport}${pageStateImport}${accessImport}${i18nImport}${parts.join('\n\n  ')}${codeScript}
+</script>
+
+<h1 class="st__title">${title}</h1>
+${toolbar}<div class="st-screen${screenClassSuffix(screen)}">
+${content}
+</div>
 `,
     };
 }
@@ -1852,7 +1882,10 @@ function screenPage(schema, rawSchema, screen, resolve, rawResolve, accessEnable
     // literal shared with the PageContext type. Data handles read the entity row type.
     const handleNames = handleNameMap(screen);
     const codeWire = codeEnabled ? codeWiring(screen, n.type, undefined) : null;
-    const hasForm = has(blocks, 'form'); // legacy standalone form block
+    // A standalone Form block creates a record. It does NOT want the grid's edit
+    // modal (that edits an existing row), so it is deliberately kept out of
+    // `wantsForm` - it emits its own always-visible panel and its own handler.
+    const createForm = blocks.map((b) => b.config).find((c) => c.kind === 'form');
     // Editing is a Grid property: a grid with editing 'form' opens the edit panel.
     const gridConfigs = blocks.map((b) => b.config).filter((c) => c.kind === 'grid');
     const formGrid = gridConfigs.find((c) => c.editing === 'form');
@@ -1862,7 +1895,7 @@ function screenPage(schema, rawSchema, screen, resolve, rawResolve, accessEnable
     // Rich cell renderers (badge / progress / link) each emit a `cell` snippet.
     const cellRenderKinds = new Set(gridConfigs.flatMap((c) => c.columns.filter((col) => col.show && col.cellType).map((col) => col.cellType.kind)));
     const hasCellRenderers = cellRenderKinds.size > 0;
-    const wantsForm = !!formGrid || hasForm || hasEditAction;
+    const wantsForm = !!formGrid || hasEditAction;
     // An unpaginated grid loads everything (one big page); else its configured size.
     const gridPageSize = gridConfigs[0] ? (gridConfigs[0].paginated !== false ? (gridConfigs[0].pageSize ?? 10) : 1000) : 10;
     const formPres = formGrid?.formPresentation ?? 'modal';
@@ -1875,7 +1908,7 @@ function screenPage(schema, rawSchema, screen, resolve, rawResolve, accessEnable
     const recordEditable = blocks.some((b) => b.config.kind === 'record' && b.config.editable);
     // Filter panels drive the grid's controller; record panels read the grid's
     // selection - both need the controller even if the grid isn't editable.
-    const needsController = hasGrid || wantsForm || hasFilter || hasRecord;
+    const needsController = hasGrid || wantsForm || hasFilter || hasRecord || !!createForm;
     // Supabase Realtime: when the screen's entity is Supabase-backed and opts into
     // live updates, subscribe to Postgres change streams and refresh() the paged
     // grid on any INSERT / UPDATE / DELETE (respects the active sort/filter/page).
@@ -2000,7 +2033,8 @@ function screenPage(schema, rawSchema, screen, resolve, rawResolve, accessEnable
         (b.config.kind === 'grid' && b.config.rowActions?.some((a) => a.kind === 'navigate' && a.screen && routeById.has(a.screen))) ||
         (b.config.kind === 'chart' && b.config.drillScreen && routeById.has(b.config.drillScreen)) ||
         ((b.config.kind === 'board' || b.config.kind === 'calendar') && b.config.openScreen != null && routeById.has(b.config.openScreen)) ||
-        (b.config.kind === 'master-detail' && b.config.linkScreen != null && routeById.has(b.config.linkScreen)));
+        (b.config.kind === 'master-detail' && b.config.linkScreen != null && routeById.has(b.config.linkScreen)) ||
+        (b.config.kind === 'form' && b.config.afterSave === 'navigate' && b.config.navigateTo != null && routeById.has(b.config.navigateTo)));
     const applyUrlFilters = drillEnabled && needsController;
     const filterableFieldNames = schema.fields.filter((f) => !f.primaryKey).map((f) => f.field);
     // RBAC gates the UI only where there's a create/update affordance to gate.
@@ -2020,9 +2054,9 @@ function screenPage(schema, rawSchema, screen, resolve, rawResolve, accessEnable
         parts.push(actionHandlerScript(a));
     if (needsController) {
         const urlFilter = applyUrlFilters
-            ? `\n    const sp = page.url.searchParams
-    const _cols: Record<string, { operator: 'equals'; value: string }> = {}
-    for (const _f of [${filterableFieldNames.map(jsStr).join(', ')}]) { const _v = sp.get(_f); if (_v != null) _cols[_f] = { operator: 'equals', value: _v } }
+            ? `\n    const sp = page.url.searchParams
+    const _cols: Record<string, { operator: 'equals'; value: string }> = {}
+    for (const _f of [${filterableFieldNames.map(jsStr).join(', ')}]) { const _v = sp.get(_f); if (_v != null) _cols[_f] = { operator: 'equals', value: _v } }
     if (Object.keys(_cols).length) controller.setFilter({ columns: _cols })`
             : '';
         const ctlBase = `createServerDataSource<${n.type}>(${n.sourceVar}, { pageSize: ${gridPageSize}, optimistic: true, getRowId: (r) => String((r as Record<string, unknown>)[idField]), onChange: (s) => (view = s) })`;
@@ -2032,12 +2066,12 @@ function screenPage(schema, rawSchema, screen, resolve, rawResolve, accessEnable
             ? `const __ctl = ${ctlBase}\n  const controller = { ...__ctl, createRow: async (i: Partial<${n.type}>) => { const r = await __ctl.createRow(i); gridCtx.fire('rowAdded', r); return r }, updateRow: async (id: string, p: Partial<${n.type}>) => { const r = await __ctl.updateRow(id, p); gridCtx.fire('rowUpdated', r); return r }, deleteRow: async (id: string) => { await __ctl.deleteRow(id); gridCtx.fire('rowDeleted', id) } }`
             : `const controller = ${ctlBase}`;
         const rtWiring = rtSupabase
-            ? `\n    const __rt = createSupabaseRealtime({ client: supabaseClient as unknown as SupabaseRealtimeClientLike, table: ${jsStr(rtTable)}, debounceMs: 250, onChange: () => controller.refresh() })
+            ? `\n    const __rt = createSupabaseRealtime({ client: supabaseClient as unknown as SupabaseRealtimeClientLike, table: ${jsStr(rtTable)}, debounceMs: 250, onChange: () => controller.refresh() })
     return () => { __rt.unsubscribe(); controller.dispose() } })`
             : `\n    controller.refresh(); return () => controller.dispose() })`;
-        parts.push(`const idField = ${n.schemaVar}.idField ?? 'id'
-  let view = $state<ServerState<${n.type}>>({ rows: [], total: 0, loading: false, saving: false, error: null, pageIndex: 0, pageSize: ${gridPageSize}, pageCount: 1, sortModel: [], filterModel: {} })
-  ${ctlDecl}
+        parts.push(`const idField = ${n.schemaVar}.idField ?? 'id'
+  let view = $state<ServerState<${n.type}>>({ rows: [], total: 0, loading: false, saving: false, error: null, pageIndex: 0, pageSize: ${gridPageSize}, pageCount: 1, sortModel: [], filterModel: {} })
+  ${ctlDecl}
   $effect(() => {${urlFilter}${rtSupabase ? '\n    controller.refresh()' : ''}${rtWiring}`);
     }
     const actionSnippets = [];
@@ -2085,11 +2119,11 @@ function screenPage(schema, rawSchema, screen, resolve, rawResolve, accessEnable
         // SSR read screens get their rows from the server load (real SSR HTML);
         // the SPA path fetches client-side after mount.
         parts.push(ssrData
-            ? `const allRows = $derived(data.rows as ${n.type}[])
+            ? `const allRows = $derived(data.rows as ${n.type}[])
   const allRowsReady = true`
-            : `let allRows = $state<${n.type}[]>([])
-  let allRowsReady = $state(false)
-  async function loadAll() { allRows = [...(await ${n.sourceVar}.getRows({ startRow: 0, endRow: 1000, pageIndex: 0, pageSize: 1000, sortModel: [], filterModel: {} })).rows]; allRowsReady = true }
+            : `let allRows = $state<${n.type}[]>([])
+  let allRowsReady = $state(false)
+  async function loadAll() { allRows = [...(await ${n.sourceVar}.getRows({ startRow: 0, endRow: 1000, pageIndex: 0, pageSize: 1000, sortModel: [], filterModel: {} })).rows]; allRowsReady = true }
   loadAll()`);
     }
     // Tree-grid state/derivations - emitted after `allRows` so it's in scope.
@@ -2103,13 +2137,13 @@ function screenPage(schema, rawSchema, screen, resolve, rawResolve, accessEnable
         // Persist the arrangement to localStorage (restored after mount so SSR stays
         // stable), unless the screen opts out - then the seeded layout is fixed.
         const persistParts = panePersist
-            ? `
-  function loadDock(): DockManagerState | null { try { const r = localStorage.getItem(${dockKey}); return r ? (JSON.parse(r) as DockManagerState) : null } catch { return null } }
-  function saveDock(ws: DockManagerState) { try { localStorage.setItem(${dockKey}, JSON.stringify(ws)) } catch { /* storage unavailable */ } }
+            ? `
+  function loadDock(): DockManagerState | null { try { const r = localStorage.getItem(${dockKey}); return r ? (JSON.parse(r) as DockManagerState) : null } catch { return null } }
+  function saveDock(ws: DockManagerState) { try { localStorage.setItem(${dockKey}, JSON.stringify(ws)) } catch { /* storage unavailable */ } }
   $effect(() => { const saved = loadDock(); if (saved) dockWorkspace = saved })`
             : '';
-        parts.push(`let dockWorkspace = $state<DockManagerState>(${JSON.stringify(dockState ?? { main: null, floating: [], autoHide: [] })})
-  let dockNarrow = $state(false)${persistParts}
+        parts.push(`let dockWorkspace = $state<DockManagerState>(${JSON.stringify(dockState ?? { main: null, floating: [], autoHide: [] })})
+  let dockNarrow = $state(false)${persistParts}
   $effect(() => { const mq = window.matchMedia('(max-width: 720px)'); const sync = () => (dockNarrow = mq.matches); sync(); mq.addEventListener('change', sync); return () => mq.removeEventListener('change', sync) })`);
     }
     for (const c of childList) {
@@ -2119,8 +2153,8 @@ function screenPage(schema, rawSchema, screen, resolve, rawResolve, accessEnable
             parts.push(`const ${v} = $derived(data.${v} as ${cn.type}[])`);
             continue;
         }
-        parts.push(`let ${v} = $state<${cn.type}[]>([])
-  async function load_${v}() { ${v} = [...(await ${cn.sourceVar}.getRows({ startRow: 0, endRow: 1000, pageIndex: 0, pageSize: 1000, sortModel: [], filterModel: {} })).rows] }
+        parts.push(`let ${v} = $state<${cn.type}[]>([])
+  async function load_${v}() { ${v} = [...(await ${cn.sourceVar}.getRows({ startRow: 0, endRow: 1000, pageIndex: 0, pageSize: 1000, sortModel: [], filterModel: {} })).rows] }
   load_${v}()`);
     }
     // "On record saved" (formSubmit) steps run at the end of a save, with the
@@ -2133,19 +2167,34 @@ function screenPage(schema, rawSchema, screen, resolve, rawResolve, accessEnable
         const lookupsProp = relationFields.length
             ? `\n  const lookups = { ${relationFields.map((f, i) => `${f.field}: ${lookupVars[i]}`).join(', ')} }`
             : '';
-        parts.push(`let editing = $state<${n.type} | null | undefined>(undefined)${lookupsProp}
-  async function save({ mode, id, values }: { mode: 'create' | 'edit'; id: string | null; values: Partial<${n.type}> }) {
-    if (mode === 'create') { await controller.createRow({ [idField]: nextId('${n.idPrefix}'), ...values } as Partial<${n.type}>); controller.setPage(view.pageCount - 1) }
-    else if (id) { await controller.updateRow(id, values) }${submitBody}
-    editing = undefined${needsAllRows ? '\n    await loadAll()' : ''}
+        parts.push(`let editing = $state<${n.type} | null | undefined>(undefined)${lookupsProp}
+  async function save({ mode, id, values }: { mode: 'create' | 'edit'; id: string | null; values: Partial<${n.type}> }) {
+    if (mode === 'create') { await controller.createRow({ [idField]: nextId('${n.idPrefix}'), ...values } as Partial<${n.type}>); controller.setPage(view.pageCount - 1) }
+    else if (id) { await controller.updateRow(id, values) }${submitBody}
+    editing = undefined${needsAllRows ? '\n    await loadAll()' : ''}
+  }`);
+    }
+    // Standalone create form: a counter that both blanks the panel (it is the
+    // {#key}) and drives the "Saved" confirmation.
+    if (createForm) {
+        const nav = createForm.afterSave === 'navigate' && createForm.navigateTo
+            ? routeById.get(createForm.navigateTo)
+            : undefined;
+        const after = nav
+            ? `\n    await goto('/${nav}')`
+            : '';
+        parts.push(`let formSaves = $state(0)
+  async function createRecord({ values }: { mode: 'create' | 'edit'; id: string | null; values: Partial<${n.type}> }) {
+    await controller.createRow({ [idField]: nextId('${n.idPrefix}'), ...values } as Partial<${n.type}>)${submitBody}
+    formSaves += 1${after}
   }`);
     }
     // Record panel: the row selected in the grid, plus (when editable) a save hook.
     if (hasRecord) {
-        parts.push(`let selectedRecord = $state<${n.type} | null>(null)${recordEditable ? `
-  async function saveRecord({ id, values }: { mode: 'create' | 'edit'; id: string | null; values: Partial<${n.type}> }) {
-    if (id) { await controller.updateRow(id, values) }${submitBody}
-    selectedRecord = null${needsAllRows ? '\n    await loadAll()' : ''}
+        parts.push(`let selectedRecord = $state<${n.type} | null>(null)${recordEditable ? `
+  async function saveRecord({ id, values }: { mode: 'create' | 'edit'; id: string | null; values: Partial<${n.type}> }) {
+    if (id) { await controller.updateRow(id, values) }${submitBody}
+    selectedRecord = null${needsAllRows ? '\n    await loadAll()' : ''}
   }` : ''}`);
     }
     // Filter panel(s): one facet-state object + an apply() that rebuilds the whole
@@ -2169,17 +2218,17 @@ function screenPage(schema, rawSchema, screen, resolve, rawResolve, accessEnable
     }
     // Tree block: fold the flat rows into SvTree nodes by a self-referential parent.
     if (has(allBlocks, 'tree')) {
-        parts.push(`type TreeNode = { id: string; label: string; children: TreeNode[] }
-  function toTreeNodes(rows: Record<string, unknown>[], idField: string, labelField: string, parentField: string): TreeNode[] {
-    const byId = new Map<string, TreeNode>(rows.map((r) => [String(r[idField]), { id: String(r[idField]), label: String(r[labelField] ?? r[idField]), children: [] }]))
-    const roots: TreeNode[] = []
-    for (const r of rows) {
-      const node = byId.get(String(r[idField]))!
-      const pid = r[parentField] != null && r[parentField] !== '' ? String(r[parentField]) : null
-      if (pid && pid !== node.id && byId.has(pid)) byId.get(pid)!.children.push(node)
-      else roots.push(node)
-    }
-    return roots
+        parts.push(`type TreeNode = { id: string; label: string; children: TreeNode[] }
+  function toTreeNodes(rows: Record<string, unknown>[], idField: string, labelField: string, parentField: string): TreeNode[] {
+    const byId = new Map<string, TreeNode>(rows.map((r) => [String(r[idField]), { id: String(r[idField]), label: String(r[labelField] ?? r[idField]), children: [] }]))
+    const roots: TreeNode[] = []
+    for (const r of rows) {
+      const node = byId.get(String(r[idField]))!
+      const pid = r[parentField] != null && r[parentField] !== '' ? String(r[parentField]) : null
+      if (pid && pid !== node.id && byId.has(pid)) byId.get(pid)!.children.push(node)
+      else roots.push(node)
+    }
+    return roots
   }`);
     }
     // Code-behind: declare the block handles, then run onLoad on mount + onDestroy on
@@ -2188,10 +2237,10 @@ function screenPage(schema, rawSchema, screen, resolve, rawResolve, accessEnable
     if (codeWire) {
         if (codeWire.decls.length)
             parts.push(codeWire.decls.join('\n  '));
-        parts.push(`onMount(() => {
-    const ctx = ${codeWire.ctxLiteral} as unknown as PageContext
-    handlers.${ON_LOAD}(ctx)
-    return () => handlers.${ON_DESTROY}(ctx)
+        parts.push(`onMount(() => {
+    const ctx = ${codeWire.ctxLiteral} as unknown as PageContext
+    handlers.${ON_LOAD}(ctx)
+    return () => handlers.${ON_DESTROY}(ctx)
   })`);
     }
     // --- markup ---
@@ -2222,25 +2271,25 @@ function screenPage(schema, rawSchema, screen, resolve, rawResolve, accessEnable
         }).filter(Boolean).join('\n')
         : '';
     const screenBody = isDock
-        ? `{#if dockNarrow}
-<div class="st-screen${screenClassSuffix(screen)}">
-${body}
-</div>
-{:else}
-<div class="st-dock">
-  <SvDockManager bind:workspace={dockWorkspace}${panePersist ? ' onChange={(w) => saveDock(w)}' : ''}${paneAttrStr}>
-    {#snippet pane(p)}
-${dockPanes}
-    {/snippet}
-  </SvDockManager>
-</div>
+        ? `{#if dockNarrow}
+<div class="st-screen${screenClassSuffix(screen)}">
+${body}
+</div>
+{:else}
+<div class="st-dock">
+  <SvDockManager bind:workspace={dockWorkspace}${panePersist ? ' onChange={(w) => saveDock(w)}' : ''}${paneAttrStr}>
+    {#snippet pane(p)}
+${dockPanes}
+    {/snippet}
+  </SvDockManager>
+</div>
 {/if}`
         : isCanvas
-            ? `<div class="st-canvas${screenClassSuffix(screen)}">
-${canvasBody}
+            ? `<div class="st-canvas${screenClassSuffix(screen)}">
+${canvasBody}
 </div>`
-            : `<div class="${screenLayoutOf(screen) === 'stack' ? 'st-stack' : 'st-screen'}${screenClassSuffix(screen)}">
-${body}
+            : `<div class="${screenLayoutOf(screen) === 'stack' ? 'st-stack' : 'st-screen'}${screenClassSuffix(screen)}">
+${body}
 </div>`;
     const modal = wantsForm
         ? `\n\n{#if editing !== undefined}\n  <SvGridEditPanel schema={${n.schemaVar}} row={editing}${relationFields.length ? ' {lookups}' : ''} presentation="${formPres}"${formLayoutProps} persistKey="${screen.route}" onSubmit={save} onCancel={() => (editing = undefined)} />\n{/if}`
@@ -2261,37 +2310,37 @@ ${body}
     const title = i18nEnabled ? `{$t('screen.${screen.id}', ${JSON.stringify(screen.title)})}` : screen.title;
     // Surface a failed data load (silent empty grid otherwise) with a retry.
     const errorBanner = needsController
-        ? `\n{#if view.error}
-  <div class="st-error" role="alert">
-    <span>Couldn't load data. {view.error instanceof Error ? view.error.message : String(view.error)}</span>
-    <button type="button" class="st-btn" onclick={() => controller.refresh()}>Retry</button>
-  </div>
+        ? `\n{#if view.error}
+  <div class="st-error" role="alert">
+    <span>Couldn't load data. {view.error instanceof Error ? view.error.message : String(view.error)}</span>
+    <button type="button" class="st-btn" onclick={() => controller.refresh()}>Retry</button>
+  </div>
 {/if}\n`
         : '';
     return {
         path: `src/routes/${screen.route}/+page.svelte`,
         description: `${screen.title} screen (${blocks.map((b) => b.config.kind).join(', ') || 'empty'}).`,
-        contents: `<script lang="ts">
-  ${gridImports}${entImport}${connImport}${handleImport}${accessImport}${i18nImport}${gotoImport}${codeImport}${pageImport}${ssrData ? "import type { PageProps } from './$types'\n  " : ''}import { ${schemaVarImports.join(', ')}, ${typeImports.map((t) => `type ${t}`).join(', ')} } from '$lib/schemas'
-${dataImports.length ? `  import { ${dataImports.join(', ')} } from '$lib/data'\n` : ''}
-  ${ssrData ? 'let { data }: PageProps = $props()\n\n  ' : ''}${parts.join('\n\n  ')}
-</script>
-
-<h1 class="st__title">${title}</h1>
-${errorBanner}
-${toolbar}${screenBody}${modal}${actionSnippets.length ? '\n\n' + actionSnippets.join('\n\n') : ''}
+        contents: `<script lang="ts">
+  ${gridImports}${entImport}${connImport}${handleImport}${accessImport}${i18nImport}${gotoImport}${codeImport}${pageImport}${ssrData ? "import type { PageProps } from './$types'\n  " : ''}import { ${schemaVarImports.join(', ')}, ${typeImports.map((t) => `type ${t}`).join(', ')} } from '$lib/schemas'
+${dataImports.length ? `  import { ${dataImports.join(', ')} } from '$lib/data'\n` : ''}
+  ${ssrData ? 'let { data }: PageProps = $props()\n\n  ' : ''}${parts.join('\n\n  ')}
+</script>
+
+<h1 class="st__title">${title}</h1>
+${errorBanner}
+${toolbar}${screenBody}${modal}${actionSnippets.length ? '\n\n' + actionSnippets.join('\n\n') : ''}
 ${(() => {
-            const kpiCss = has(blocks, 'kpi') || has(blocks, 'gauge') || has(blocks, 'tree') ? `  .kpi { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; background: var(--sg-bg, #fff); border: 1px solid var(--sg-border, #e6e8ec); border-radius: 12px; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04); overflow: hidden; }
-  .kpi__head { display: flex; align-items: center; justify-content: space-between; }
-  .kpi__label { font-size: 12.5px; font-weight: 600; color: var(--sg-muted, #64748b); text-transform: uppercase; letter-spacing: 0.03em; }
-  .kpi__value { font-size: 28px; font-weight: 750; line-height: 1.1; color: var(--sg-fg, #0f172a); }
-  .kpi__delta { align-self: flex-start; display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 700; background: color-mix(in srgb, var(--sg-muted, #64748b) 14%, transparent); color: var(--sg-muted, #64748b); }
-  .kpi__delta.is-up { background: color-mix(in srgb, #16a34a 15%, transparent); color: #16a34a; }
-  .kpi__delta.is-down { background: color-mix(in srgb, #dc2626 15%, transparent); color: #dc2626; }
-  .kpi__spark { width: 100%; height: 30px; margin-top: 2px; color: var(--sg-accent, #4f46e5); opacity: 0.85; }
-  .gaugecard { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px; border: 1px solid var(--sg-border, #e6e8ec); border-radius: 12px; }
-  .gaugecard .kpi__label { align-self: flex-start; }
-  .treecard { padding: 12px; border: 1px solid var(--sg-border, #e6e8ec); border-radius: 12px; }
+            const kpiCss = has(blocks, 'kpi') || has(blocks, 'gauge') || has(blocks, 'tree') ? `  .kpi { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; background: var(--sg-bg, #fff); border: 1px solid var(--sg-border, #e6e8ec); border-radius: 12px; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04); overflow: hidden; }
+  .kpi__head { display: flex; align-items: center; justify-content: space-between; }
+  .kpi__label { font-size: 12.5px; font-weight: 600; color: var(--sg-muted, #64748b); text-transform: uppercase; letter-spacing: 0.03em; }
+  .kpi__value { font-size: 28px; font-weight: 750; line-height: 1.1; color: var(--sg-fg, #0f172a); }
+  .kpi__delta { align-self: flex-start; display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 700; background: color-mix(in srgb, var(--sg-muted, #64748b) 14%, transparent); color: var(--sg-muted, #64748b); }
+  .kpi__delta.is-up { background: color-mix(in srgb, #16a34a 15%, transparent); color: #16a34a; }
+  .kpi__delta.is-down { background: color-mix(in srgb, #dc2626 15%, transparent); color: #dc2626; }
+  .kpi__spark { width: 100%; height: 30px; margin-top: 2px; color: var(--sg-accent, #4f46e5); opacity: 0.85; }
+  .gaugecard { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px; border: 1px solid var(--sg-border, #e6e8ec); border-radius: 12px; }
+  .gaugecard .kpi__label { align-self: flex-start; }
+  .treecard { padding: 12px; border: 1px solid var(--sg-border, #e6e8ec); border-radius: 12px; }
 ` : '';
             const css = kpiCss + screenLayoutStyle(screen);
             return css ? `\n<style>\n${css}</style>\n` : '';
@@ -2332,19 +2381,19 @@ function ssrReadServerFile(schema, screen, sourceKind, accessEnabled, screenIds,
     return {
         path: `src/routes/${screen.route}/+page.server.ts`,
         description: `${screen.title} - SSR load (full dataset${children.length ? ' + child collections' : ''}).`,
-        contents: `import type { PageServerLoad } from './$types'
-import type { ServerRequest } from '@svgrid/grid'
-${isSql ? "import { createKitDataSource } from '@svgrid/enterprise'\n" : ''}${rbac ? "import { error } from '@sveltejs/kit'\nimport { authorizeAction, getServerRole } from '$lib/access'\n" : ''}${memImports.length ? `import { ${memImports.join(', ')} } from '$lib/data'\n` : ''}
-// This screen renders on the server: real SSR HTML, not just a server-side
-// load. Stated explicitly so it holds whichever way the root layout is set.
-export const ssr = true
-${rbac ? `\nconst SCREEN_IDS = ${JSON.stringify(screenIds)}\n` : ''}
-const PAGE: ServerRequest = { startRow: 0, endRow: 1000, pageIndex: 0, pageSize: 1000, sortModel: [], filterModel: {} }
-
-export const load: PageServerLoad = async (${isSql || rbac ? `{ ${[isSql ? 'fetch' : '', rbac ? 'locals' : ''].filter(Boolean).join(', ')} }` : ''}) => {
-${rbac ? `  if (!authorizeAction(getServerRole({ locals }), 'read', SCREEN_IDS)) throw error(403, 'Not allowed')\n` : ''}  const rows = (await ${srcExpr(schema)}.getRows(PAGE)).rows
-${childLoads ? childLoads + '\n' : ''}  return { rows${children.map((c) => `, ${mdChildVar(c.name)}`).join('')} }
-}
+        contents: `import type { PageServerLoad } from './$types'
+import type { ServerRequest } from '@svgrid/grid'
+${isSql ? "import { createKitDataSource } from '@svgrid/enterprise'\n" : ''}${rbac ? "import { error } from '@sveltejs/kit'\nimport { authorizeAction, getServerRole } from '$lib/access'\n" : ''}${memImports.length ? `import { ${memImports.join(', ')} } from '$lib/data'\n` : ''}
+// This screen renders on the server: real SSR HTML, not just a server-side
+// load. Stated explicitly so it holds whichever way the root layout is set.
+export const ssr = true
+${rbac ? `\nconst SCREEN_IDS = ${JSON.stringify(screenIds)}\n` : ''}
+const PAGE: ServerRequest = { startRow: 0, endRow: 1000, pageIndex: 0, pageSize: 1000, sortModel: [], filterModel: {} }
+
+export const load: PageServerLoad = async (${isSql || rbac ? `{ ${[isSql ? 'fetch' : '', rbac ? 'locals' : ''].filter(Boolean).join(', ')} }` : ''}) => {
+${rbac ? `  if (!authorizeAction(getServerRole({ locals }), 'read', SCREEN_IDS)) throw error(403, 'Not allowed')\n` : ''}  const rows = (await ${srcExpr(schema)}.getRows(PAGE)).rows
+${childLoads ? childLoads + '\n' : ''}  return { rows${children.map((c) => `, ${mdChildVar(c.name)}`).join('')} }
+}
 `,
     };
 }
@@ -2359,34 +2408,34 @@ ${childLoads ? childLoads + '\n' : ''}  return { rows${children.map((c) => `, ${
 // sort/pagination back into the URL. Server-side validation runs in the actions.
 // ---------------------------------------------------------------------------
 /** URL search params -> a data-source request. Shared by every SSR route's load. */
-const SSR_QUERY_HELPER = `// Turn a page URL's search params into a data-source request (sort / filter /
-// page / size). The grid drives these params via goto(), so the server re-runs
-// load() - which makes every list view bookmarkable and functional with no JS.
-import type { ServerRequest } from '@svgrid/grid'
-
-export function planFromSearchParams(url: URL, defaultPageSize = 25): ServerRequest {
-  const sp = url.searchParams
-  const pageIndex = Math.max(0, Number.parseInt(sp.get('page') ?? '', 10) || 0)
-  const pageSize = Math.min(200, Math.max(1, Number.parseInt(sp.get('size') ?? '', 10) || defaultPageSize))
-  const sortModel = (sp.get('sort') ?? '')
-    .split(',')
-    .filter(Boolean)
-    .map((token) => {
-      const [id, dir] = token.split(':')
-      return { id: id!, desc: dir === 'desc' }
-    })
-  const columns: Record<string, { operator: 'contains'; value: string }> = {}
-  for (const [k, v] of sp) if (k.startsWith('f_') && v) columns[k.slice(2)] = { operator: 'contains', value: v }
-  const global = sp.get('q') ?? ''
-  return {
-    startRow: pageIndex * pageSize,
-    endRow: pageIndex * pageSize + pageSize,
-    pageIndex,
-    pageSize,
-    sortModel,
-    filterModel: { ...(global ? { global } : {}), columns },
-  }
-}
+const SSR_QUERY_HELPER = `// Turn a page URL's search params into a data-source request (sort / filter /
+// page / size). The grid drives these params via goto(), so the server re-runs
+// load() - which makes every list view bookmarkable and functional with no JS.
+import type { ServerRequest } from '@svgrid/grid'
+
+export function planFromSearchParams(url: URL, defaultPageSize = 25): ServerRequest {
+  const sp = url.searchParams
+  const pageIndex = Math.max(0, Number.parseInt(sp.get('page') ?? '', 10) || 0)
+  const pageSize = Math.min(200, Math.max(1, Number.parseInt(sp.get('size') ?? '', 10) || defaultPageSize))
+  const sortModel = (sp.get('sort') ?? '')
+    .split(',')
+    .filter(Boolean)
+    .map((token) => {
+      const [id, dir] = token.split(':')
+      return { id: id!, desc: dir === 'desc' }
+    })
+  const columns: Record<string, { operator: 'contains'; value: string }> = {}
+  for (const [k, v] of sp) if (k.startsWith('f_') && v) columns[k.slice(2)] = { operator: 'contains', value: v }
+  const global = sp.get('q') ?? ''
+  return {
+    startRow: pageIndex * pageSize,
+    endRow: pageIndex * pageSize + pageSize,
+    pageIndex,
+    pageSize,
+    sortModel,
+    filterModel: { ...(global ? { global } : {}), columns },
+  }
+}
 `;
 function ssrQueryHelperFile() {
     return { path: 'src/lib/server/query.ts', description: 'SSR: URL search params -> data-source request (sort/filter/page).', contents: SSR_QUERY_HELPER };
@@ -2502,60 +2551,60 @@ function emitSsrGridScreen(schema, screen, sourceKind, accessEnabled, screenIds,
     const localsArg = rbac ? ', locals' : '';
     const readGuard = rbac ? `    if (!authorizeAction(getServerRole({ locals }), 'read', SCREEN_IDS)) throw error(403, 'Not allowed')\n` : '';
     const writeGuard = (action) => (rbac ? `    if (!authorizeAction(getServerRole({ locals }), '${action}', SCREEN_IDS)) return fail(403, { error: 'Not allowed' })\n` : '');
-    const server = `import type { Actions, PageServerLoad } from './$types'
-import { fail${rbac ? ', error' : ''} } from '@sveltejs/kit'
-import { ${enterpriseImports} } from '@svgrid/enterprise'
-${rbac ? "import { authorizeAction, getServerRole } from '../lib/access'\n" : ''}${sourceImport}${schemaImport}
-import { planFromSearchParams } from '../lib/server/query'
-
-// This screen renders on the server: real SSR HTML, not just a server-side
-// load. Stated explicitly so it holds whichever way the root layout is set.
-export const ssr = true
-${idConst}${rbac ? `\nconst SCREEN_IDS = ${JSON.stringify(screenIds)}` : ''}
-const FIELD_TYPES: Record<string, 'text' | 'number' | 'boolean'> = ${fieldTypesLit}
-${srcHelper}
-/** Read a submitted form into a typed partial row. Booleans come from checkbox
- *  presence; numbers are coerced; empty values are dropped so they don't clobber. */
-function formToValues(fd: FormData): Record<string, unknown> {
-  const values: Record<string, unknown> = {}
-  for (const [field, type] of Object.entries(FIELD_TYPES)) {
-    if (type === 'boolean') { values[field] = fd.get(field) != null; continue }
-    const raw = fd.get(field)
-    if (raw == null || raw === '') continue
-    values[field] = type === 'number' ? Number(raw) : String(raw)
-  }
-  return values
-}
-
-export const load: PageServerLoad = async ({ url${fetchArg}${localsArg} }) => {
-${readGuard}  const plan = planFromSearchParams(url, ${pageSize})
-  const { rows, rowCount } = await ${src}.getRows(plan)
-${relPrefetch ? relPrefetch + '\n' : ''}  return { rows, total: rowCount, page: plan.pageIndex, size: plan.pageSize, sort: plan.sortModel${relReturn} }
-}
-
-export const actions: Actions = {
-  create: async ({ request${fetchArg}${localsArg} }) => {
-${writeGuard('create')}    const values = ${readValues('await request.formData()')}
-    const errors = await validateAll(${n.schemaVar}, values)
-    if (Object.keys(errors).length) return fail(422, { errors, values })
-    ${createCall}
-    return { ok: true }
-  },
-  update: async ({ request${fetchArg}${localsArg} }) => {
-    const fd = await request.formData()
-${writeGuard('update')}    const id = String(fd.get('__id') ?? '')
-    const values = ${readValues('fd')}
-    const errors = await validateAll(${n.schemaVar}, values)
-    if (Object.keys(errors).length) return fail(422, { errors, values })
-    await ${src}.updateRow(id, values)
-    return { ok: true }
-  },
-  delete: async ({ request${fetchArg}${localsArg} }) => {
-${writeGuard('delete')}    const fd = await request.formData()
-    await ${src}.deleteRow(String(fd.get('__id') ?? ''))
-    return { ok: true }
-  },
-}
+    const server = `import type { Actions, PageServerLoad } from './$types'
+import { fail${rbac ? ', error' : ''} } from '@sveltejs/kit'
+import { ${enterpriseImports} } from '@svgrid/enterprise'
+${rbac ? "import { authorizeAction, getServerRole } from '../lib/access'\n" : ''}${sourceImport}${schemaImport}
+import { planFromSearchParams } from '../lib/server/query'
+
+// This screen renders on the server: real SSR HTML, not just a server-side
+// load. Stated explicitly so it holds whichever way the root layout is set.
+export const ssr = true
+${idConst}${rbac ? `\nconst SCREEN_IDS = ${JSON.stringify(screenIds)}` : ''}
+const FIELD_TYPES: Record<string, 'text' | 'number' | 'boolean'> = ${fieldTypesLit}
+${srcHelper}
+/** Read a submitted form into a typed partial row. Booleans come from checkbox
+ *  presence; numbers are coerced; empty values are dropped so they don't clobber. */
+function formToValues(fd: FormData): Record<string, unknown> {
+  const values: Record<string, unknown> = {}
+  for (const [field, type] of Object.entries(FIELD_TYPES)) {
+    if (type === 'boolean') { values[field] = fd.get(field) != null; continue }
+    const raw = fd.get(field)
+    if (raw == null || raw === '') continue
+    values[field] = type === 'number' ? Number(raw) : String(raw)
+  }
+  return values
+}
+
+export const load: PageServerLoad = async ({ url${fetchArg}${localsArg} }) => {
+${readGuard}  const plan = planFromSearchParams(url, ${pageSize})
+  const { rows, rowCount } = await ${src}.getRows(plan)
+${relPrefetch ? relPrefetch + '\n' : ''}  return { rows, total: rowCount, page: plan.pageIndex, size: plan.pageSize, sort: plan.sortModel${relReturn} }
+}
+
+export const actions: Actions = {
+  create: async ({ request${fetchArg}${localsArg} }) => {
+${writeGuard('create')}    const values = ${readValues('await request.formData()')}
+    const errors = await validateAll(${n.schemaVar}, values)
+    if (Object.keys(errors).length) return fail(422, { errors, values })
+    ${createCall}
+    return { ok: true }
+  },
+  update: async ({ request${fetchArg}${localsArg} }) => {
+    const fd = await request.formData()
+${writeGuard('update')}    const id = String(fd.get('__id') ?? '')
+    const values = ${readValues('fd')}
+    const errors = await validateAll(${n.schemaVar}, values)
+    if (Object.keys(errors).length) return fail(422, { errors, values })
+    await ${src}.updateRow(id, values)
+    return { ok: true }
+  },
+  delete: async ({ request${fetchArg}${localsArg} }) => {
+${writeGuard('delete')}    const fd = await request.formData()
+    await ${src}.deleteRow(String(fd.get('__id') ?? ''))
+    return { ok: true }
+  },
+}
 `;
     // The facet panel becomes a plain GET form: each control is named for the
     // param `planFromSearchParams` reads, so submitting navigates to a filtered
@@ -2603,15 +2652,15 @@ ${writeGuard('delete')}    const fd = await request.formData()
             return `      <label class="sk-facet">\n        <span>${htmlEsc(f.label ?? f.field)}</span>\n        ${control}\n      </label>`;
         })
             .join('\n');
-        return `
-  <form method="GET" class="sk-facets">
-    <input type="hidden" name="sort" value={page.url.searchParams.get('sort') ?? ''} />
-${controls}
-    <div class="sk-facet-actions">
-      <button type="submit">Filter</button>
-      <a href={page.url.pathname}>Clear</a>
-    </div>
-  </form>
+        return `
+  <form method="GET" class="sk-facets">
+    <input type="hidden" name="sort" value={page.url.searchParams.get('sort') ?? ''} />
+${controls}
+    <div class="sk-facet-actions">
+      <button type="submit">Filter</button>
+      <a href={page.url.pathname}>Clear</a>
+    </div>
+  </form>
 `;
     })();
     const facetCss = !facetForm
@@ -2664,10 +2713,10 @@ ${controls}
             input = `<input type="${t}" name=${key} value={isCreate ? '' : (${row}[${key}] ?? '')}${req}${attrs(f)} />`;
         }
         const hint = f.input?.help;
-        return `        <label class="sk-field${f.input?.span === 2 ? ' sk-field--wide' : ''}">
-          <span>${htmlEsc(f.label ?? f.field)}${f.required ? ' *' : ''}</span>
-          ${input}
-${hint ? `          {#if !form?.errors?.[${key}]}<small class="sk-hint">${htmlEsc(hint)}</small>{/if}\n` : ''}          {#if form?.errors?.[${key}]}<em class="sk-err">{form.errors[${key}]}</em>{/if}
+        return `        <label class="sk-field${f.input?.span === 2 ? ' sk-field--wide' : ''}">
+          <span>${htmlEsc(f.label ?? f.field)}${f.required ? ' *' : ''}</span>
+          ${input}
+${hint ? `          {#if !form?.errors?.[${key}]}<small class="sk-hint">${htmlEsc(hint)}</small>{/if}\n` : ''}          {#if form?.errors?.[${key}]}<em class="sk-err">{form.errors[${key}]}</em>{/if}
         </label>`;
     });
     // Group the inputs the way the schema's form layout says, so the server-
@@ -2685,142 +2734,167 @@ ${hint ? `          {#if !form?.errors?.[${key}]}<small class="sk-hint">${htmlEs
         ? (() => {
             const assigned = new Set();
             const groups = layout.sections.map((s) => {
-                const items = s.fields.map((name) => { assigned.add(name); return blockFor(name); }).filter(Boolean);
-                return { title: s.title, description: s.description, columns: s.columns, items };
+                const names = [];
+                const items = s.fields.map((name) => { assigned.add(name); names.push(name); return blockFor(name); }).filter(Boolean);
+                return { title: s.title, description: s.description, columns: s.columns, collapsible: s.collapsible, collapsed: s.collapsed, names, items };
             }).filter((g) => g.items.length);
             const rest = formFields.filter((f) => !assigned.has(f.field)).map((f) => blockFor(f.field)).filter(Boolean);
-            return rest.length ? [...groups, { title: undefined, description: undefined, columns: undefined, items: rest }] : groups;
+            return rest.length ? [...groups, { title: undefined, description: undefined, columns: undefined, collapsible: false, collapsed: false, names: [], items: rest }] : groups;
         })()
         : null;
     const formCols = layout?.columns ?? 1;
     const fieldsMarkup = ssrSections
         ? ssrSections
-            .map((g) => `        <fieldset class="sk-group" style="--sk-cols: ${g.columns ?? formCols}">
-${g.title ? `          <legend>${htmlEsc(g.title)}</legend>\n` : ''}${g.description ? `          <p class="sk-group__desc">${htmlEsc(g.description)}</p>\n` : ''}${g.items.join('\n')}
-        </fieldset>`)
+            .map((g) => {
+            const inner = `${g.description ? `          <p class="sk-group__desc">${htmlEsc(g.description)}</p>\n` : ''}${g.items.join('\n')}`;
+            // A collapsible group is a native <details>, so it folds with no JS at
+            // all - which is the point on a server-rendered page. A group that
+            // starts folded is forced open when the server sent back an error for
+            // one of its fields, so a rejected submit is never pointing at
+            // something the user cannot see.
+            if (g.collapsible && g.title) {
+                const open = g.collapsed
+                    ? `{${JSON.stringify(g.names)}.some((f) => form?.errors?.[f])}`
+                    : '{true}';
+                return `        <details class="sk-group sk-group--fold" style="--sk-cols: ${g.columns ?? formCols}" open=${open}>
+          <summary>${htmlEsc(g.title)}</summary>
+${inner}
+        </details>`;
+            }
+            return `        <fieldset class="sk-group" style="--sk-cols: ${g.columns ?? formCols}">
+${g.title ? `          <legend>${htmlEsc(g.title)}</legend>\n` : ''}${inner}
+        </fieldset>`;
+        })
             .join('\n')
         : `        <div class="sk-group" style="--sk-cols: ${formCols}">\n${fieldBlocks.join('\n')}\n        </div>`;
-    const page = `<script lang="ts">
-  import { SvGrid, renderSnippet, type ColumnDef, type CellContext } from '@svgrid/grid'
-  import { schemaToColumns } from '@svgrid/enterprise'
-  import { goto } from '$app/navigation'
-  import { page } from '$app/state'
-  import { enhance } from '$app/forms'
-  import type { SubmitFunction } from '@sveltejs/kit'
-  import { ${n.schemaVar}, type ${n.type} } from '$lib/schemas'
-  import type { PageProps } from './$types'
-
-  let { data, form }: PageProps = $props()
-
-  const ID_FIELD = ${jsStr(idField)}
-  const TITLE = ${jsStr(screen.title)}
-  const NEW_LABEL = ${jsStr('New ' + n.label)}
-
-  // Grid columns from the schema + a row-actions column (Edit / Delete).
-  const columns: ColumnDef<Record<string, never>, ${n.type}>[] = [
-    ...(schemaToColumns(${n.schemaVar}) as ColumnDef<Record<string, never>, ${n.type}>[]),
-    { id: '__actions', header: '', sortable: false, cell: (ctx: CellContext<${n.type}>) => renderSnippet(rowActions, { row: ctx.row.original }) },
-  ]
-
-  // null = no editor; 'create' = new row; a row = editing that row.
-  let editing = $state<'create' | ${n.type} | null>(null)
-  const isCreate = $derived(editing === 'create')
-
-  // Sort / paginate by writing to the URL - load() re-runs on the server.
-  function setParams(patch: Record<string, string | null>) {
-    const sp = new URLSearchParams(page.url.searchParams)
-    for (const [k, v] of Object.entries(patch)) { if (v == null) sp.delete(k); else sp.set(k, v) }
-    const q = sp.toString()
-    void goto(q ? \`?\${q}\` : page.url.pathname, { keepFocus: true, noScroll: true })
-  }
-${wantsFilter ? `
-  // Filter via the URL (q = global search, f_<col> = per-column). The server's
-  // planFromSearchParams reads these, so load() re-filters; reset to the first page.
-  function applyFilters(f: { global: string; columns: Array<{ id: string; value: string }> }) {
-    const sp = new URLSearchParams(page.url.searchParams)
-    for (const k of [...sp.keys()]) if (k === 'q' || k.startsWith('f_')) sp.delete(k)
-    if (f.global) sp.set('q', f.global)
-    for (const c of f.columns) if (c.value) sp.set('f_' + c.id, c.value)
-    sp.delete('page')
-    const q = sp.toString()
-    void goto(q ? \`?\${q}\` : page.url.pathname, { keepFocus: true, noScroll: true })
-  }
-` : ''}
-  // Progressive enhancement: post to the action, keep typed values on error,
-  // close the editor on success (load re-runs automatically, refreshing the grid).
-  const onSubmit: SubmitFunction = () => async ({ result, update }) => {
-    await update({ reset: false })
-    if (result.type === 'success') editing = null
-  }
-</script>
-
-{#snippet rowActions({ row }: { row: ${n.type} })}
-  <div class="sk-rowact">
-    <button type="button" class="sk-link" onclick={() => (editing = row)}>Edit</button>
-    <form method="POST" action="?/delete" use:enhance={onSubmit} style="display:contents">
-      <input type="hidden" name="__id" value={(row as Record<string, unknown>)[ID_FIELD] as string} />
-      <button type="submit" class="sk-link sk-danger">Delete</button>
-    </form>
-  </div>
-{/snippet}
-
-<header class="sk-head">
-  <h1>{TITLE}</h1>
-  <button type="button" class="sk-btn sk-btn--primary" onclick={() => (editing = 'create')}>{NEW_LABEL}</button>
-</header>
-${facetForm}
-<SvGrid
-  data={data.rows}
-  {columns}
-  externalSort
-  initialSorting={data.sort}
-  externalPagination${wantsFilter ? '\n  filterable\n  externalFilter\n  onFiltersChange={applyFilters}' : ''}
-  rowCount={data.total}
-  pageIndex={data.page}
-  pageSize={data.size}
-  onSortingChange={(s) => setParams({ sort: s.map((x) => \`\${x.id}:\${x.desc ? 'desc' : 'asc'}\`).join(',') || null, page: null })}
-  onPaginationChange={(p) => setParams({ page: String(p.pageIndex), size: String(p.pageSize) })}
-/>
-
-{#if editing}
-  <div class="sk-overlay">
-    <form method="POST" action={isCreate ? '?/create' : '?/update'} class="sk-form" use:enhance={onSubmit}>
-      <h2>{isCreate ? NEW_LABEL : 'Edit ${htmlEsc(n.label)}'}</h2>
-      {#if !isCreate}<input type="hidden" name="__id" value={${row}[ID_FIELD] as string} />{/if}
-${fieldsMarkup}
-      <div class="sk-form__actions">
-        <button type="button" class="sk-btn" onclick={() => (editing = null)}>Cancel</button>
-        <button type="submit" class="sk-btn sk-btn--primary">Save</button>
-      </div>
-    </form>
-  </div>
-{/if}
-
-<style>
-  .sk-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
-  .sk-head h1 { margin: 0; font-size: 20px; }
-  .sk-btn { font: inherit; padding: 7px 14px; border-radius: 8px; border: 1px solid var(--sg-border, #cbd5e1); background: var(--sg-bg, #fff); color: var(--sg-fg, #0f172a); cursor: pointer; }
-  .sk-btn--primary { background: var(--sg-accent, #4f46e5); border-color: var(--sg-accent, #4f46e5); color: #fff; }
-${facetCss}  .sk-rowact { display: flex; gap: 10px; }
-  .sk-link { background: none; border: none; padding: 0; font: inherit; color: var(--sg-accent, #4f46e5); cursor: pointer; }
-  .sk-danger { color: #dc2626; }
-  .sk-overlay { position: fixed; inset: 0; background: rgba(15, 23, 42, 0.4); display: grid; place-items: center; z-index: 50; }
-  .sk-form { width: min(480px, 92vw); max-height: 90vh; overflow: auto; background: var(--sg-bg, #fff); color: var(--sg-fg, #0f172a); border-radius: 12px; padding: 22px; display: flex; flex-direction: column; gap: 12px; box-shadow: 0 24px 60px -20px rgba(15, 23, 42, 0.5); }
-  .sk-form h2 { margin: 0 0 4px; font-size: 16px; }
-  .sk-group { display: grid; grid-template-columns: repeat(var(--sk-cols, 1), minmax(0, 1fr)); gap: 12px; border: 0; padding: 0; margin: 0; min-width: 0; }
-  .sk-group + .sk-group { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--sg-border, #e2e8f0); }
-  .sk-group legend { grid-column: 1 / -1; padding: 0; font-size: 12px; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; color: var(--sg-muted, #64748b); }
-  .sk-group__desc { grid-column: 1 / -1; margin: 0; font-size: 12px; color: var(--sg-muted, #64748b); }
-  .sk-field--wide { grid-column: 1 / -1; }
-  .sk-hint { color: var(--sg-muted, #64748b); font-size: 11.5px; }
-  @media (max-width: 560px) { .sk-group { grid-template-columns: 1fr; } }
-  .sk-field { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
-  .sk-field span { color: var(--sg-muted, #64748b); }
-  .sk-field input, .sk-field select { font: inherit; padding: 7px 9px; border-radius: 8px; border: 1px solid var(--sg-border, #cbd5e1); background: var(--sg-input-bg, #fff); color: var(--sg-fg, #0f172a); }
-  .sk-field input[type='checkbox'] { align-self: flex-start; width: auto; }
-  .sk-err { color: #dc2626; font-size: 12px; font-style: normal; }
-  .sk-form__actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; }
-</style>
+    const page = `<script lang="ts">
+  import { SvGrid, renderSnippet, type ColumnDef, type CellContext } from '@svgrid/grid'
+  import { schemaToColumns } from '@svgrid/enterprise'
+  import { goto } from '$app/navigation'
+  import { page } from '$app/state'
+  import { enhance } from '$app/forms'
+  import type { SubmitFunction } from '@sveltejs/kit'
+  import { ${n.schemaVar}, type ${n.type} } from '$lib/schemas'
+  import type { PageProps } from './$types'
+
+  let { data, form }: PageProps = $props()
+
+  const ID_FIELD = ${jsStr(idField)}
+  const TITLE = ${jsStr(screen.title)}
+  const NEW_LABEL = ${jsStr('New ' + n.label)}
+
+  // Grid columns from the schema + a row-actions column (Edit / Delete).
+  const columns: ColumnDef<Record<string, never>, ${n.type}>[] = [
+    ...(schemaToColumns(${n.schemaVar}) as ColumnDef<Record<string, never>, ${n.type}>[]),
+    { id: '__actions', header: '', sortable: false, cell: (ctx: CellContext<${n.type}>) => renderSnippet(rowActions, { row: ctx.row.original }) },
+  ]
+
+  // null = no editor; 'create' = new row; a row = editing that row.
+  let editing = $state<'create' | ${n.type} | null>(null)
+  const isCreate = $derived(editing === 'create')
+
+  // Sort / paginate by writing to the URL - load() re-runs on the server.
+  function setParams(patch: Record<string, string | null>) {
+    const sp = new URLSearchParams(page.url.searchParams)
+    for (const [k, v] of Object.entries(patch)) { if (v == null) sp.delete(k); else sp.set(k, v) }
+    const q = sp.toString()
+    void goto(q ? \`?\${q}\` : page.url.pathname, { keepFocus: true, noScroll: true })
+  }
+${wantsFilter ? `
+  // Filter via the URL (q = global search, f_<col> = per-column). The server's
+  // planFromSearchParams reads these, so load() re-filters; reset to the first page.
+  function applyFilters(f: { global: string; columns: Array<{ id: string; value: string }> }) {
+    const sp = new URLSearchParams(page.url.searchParams)
+    for (const k of [...sp.keys()]) if (k === 'q' || k.startsWith('f_')) sp.delete(k)
+    if (f.global) sp.set('q', f.global)
+    for (const c of f.columns) if (c.value) sp.set('f_' + c.id, c.value)
+    sp.delete('page')
+    const q = sp.toString()
+    void goto(q ? \`?\${q}\` : page.url.pathname, { keepFocus: true, noScroll: true })
+  }
+` : ''}
+  // Progressive enhancement: post to the action, keep typed values on error,
+  // close the editor on success (load re-runs automatically, refreshing the grid).
+  const onSubmit: SubmitFunction = () => async ({ result, update }) => {
+    await update({ reset: false })
+    if (result.type === 'success') editing = null
+  }
+</script>
+
+{#snippet rowActions({ row }: { row: ${n.type} })}
+  <div class="sk-rowact">
+    <button type="button" class="sk-link" onclick={() => (editing = row)}>Edit</button>
+    <form method="POST" action="?/delete" use:enhance={onSubmit} style="display:contents">
+      <input type="hidden" name="__id" value={(row as Record<string, unknown>)[ID_FIELD] as string} />
+      <button type="submit" class="sk-link sk-danger">Delete</button>
+    </form>
+  </div>
+{/snippet}
+
+<header class="sk-head">
+  <h1>{TITLE}</h1>
+  <button type="button" class="sk-btn sk-btn--primary" onclick={() => (editing = 'create')}>{NEW_LABEL}</button>
+</header>
+${facetForm}
+<SvGrid
+  data={data.rows}
+  {columns}
+  externalSort
+  initialSorting={data.sort}
+  externalPagination${wantsFilter ? '\n  filterable\n  externalFilter\n  onFiltersChange={applyFilters}' : ''}
+  rowCount={data.total}
+  pageIndex={data.page}
+  pageSize={data.size}
+  onSortingChange={(s) => setParams({ sort: s.map((x) => \`\${x.id}:\${x.desc ? 'desc' : 'asc'}\`).join(',') || null, page: null })}
+  onPaginationChange={(p) => setParams({ page: String(p.pageIndex), size: String(p.pageSize) })}
+/>
+
+{#if editing}
+  <div class="sk-overlay">
+    <form method="POST" action={isCreate ? '?/create' : '?/update'} class="sk-form" use:enhance={onSubmit}>
+      <h2>{isCreate ? NEW_LABEL : 'Edit ${htmlEsc(n.label)}'}</h2>
+      {#if !isCreate}<input type="hidden" name="__id" value={${row}[ID_FIELD] as string} />{/if}
+${fieldsMarkup}
+      <div class="sk-form__actions">
+        <button type="button" class="sk-btn" onclick={() => (editing = null)}>Cancel</button>
+        <button type="submit" class="sk-btn sk-btn--primary">Save</button>
+      </div>
+    </form>
+  </div>
+{/if}
+
+<style>
+  .sk-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
+  .sk-head h1 { margin: 0; font-size: 20px; }
+  .sk-btn { font: inherit; padding: 7px 14px; border-radius: 8px; border: 1px solid var(--sg-border, #cbd5e1); background: var(--sg-bg, #fff); color: var(--sg-fg, #0f172a); cursor: pointer; }
+  .sk-btn--primary { background: var(--sg-accent, #4f46e5); border-color: var(--sg-accent, #4f46e5); color: #fff; }
+${facetCss}  .sk-rowact { display: flex; gap: 10px; }
+  .sk-link { background: none; border: none; padding: 0; font: inherit; color: var(--sg-accent, #4f46e5); cursor: pointer; }
+  .sk-danger { color: #dc2626; }
+  .sk-overlay { position: fixed; inset: 0; background: rgba(15, 23, 42, 0.4); display: grid; place-items: center; z-index: 50; }
+  .sk-form { width: min(480px, 92vw); max-height: 90vh; overflow: auto; background: var(--sg-bg, #fff); color: var(--sg-fg, #0f172a); border-radius: 12px; padding: 22px; display: flex; flex-direction: column; gap: 12px; box-shadow: 0 24px 60px -20px rgba(15, 23, 42, 0.5); }
+  .sk-form h2 { margin: 0 0 4px; font-size: 16px; }
+  .sk-group { display: grid; grid-template-columns: repeat(var(--sk-cols, 1), minmax(0, 1fr)); gap: 12px; border: 0; padding: 0; margin: 0; min-width: 0; }
+  .sk-group + .sk-group { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--sg-border, #e2e8f0); }
+  .sk-group legend { grid-column: 1 / -1; padding: 0; font-size: 12px; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; color: var(--sg-muted, #64748b); }
+  .sk-group__desc { grid-column: 1 / -1; margin: 0; font-size: 12px; color: var(--sg-muted, #64748b); }
+  /* A foldable group is a native <details>, so it works with JavaScript off.
+     display:grid on the element itself would lay the <summary> out as a grid
+     item and break the disclosure, so the grid moves to [open] children. */
+  .sk-group--fold { display: block; }
+  .sk-group--fold > summary { grid-column: 1 / -1; margin-bottom: 12px; font-size: 13.5px; font-weight: 650; color: var(--sg-fg, #0f172a); cursor: pointer; list-style-position: inside; }
+  .sk-group--fold[open] { display: grid; }
+  .sk-group--fold[open] > summary { margin-bottom: 0; }
+  .sk-field--wide { grid-column: 1 / -1; }
+  .sk-hint { color: var(--sg-muted, #64748b); font-size: 11.5px; }
+  @media (max-width: 560px) { .sk-group { grid-template-columns: 1fr; } }
+  .sk-field { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
+  .sk-field span { color: var(--sg-muted, #64748b); }
+  .sk-field input, .sk-field select { font: inherit; padding: 7px 9px; border-radius: 8px; border: 1px solid var(--sg-border, #cbd5e1); background: var(--sg-input-bg, #fff); color: var(--sg-fg, #0f172a); }
+  .sk-field input[type='checkbox'] { align-self: flex-start; width: auto; }
+  .sk-err { color: #dc2626; font-size: 12px; font-style: normal; }
+  .sk-form__actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; }
+</style>
 `;
     return [
         { path: `src/routes/${screen.route}/+page.server.ts`, description: `SSR load + CRUD form actions for ${n.label}.`, contents: server },
@@ -3015,29 +3089,29 @@ function i18nModule(project) {
     return {
         path: 'src/lib/i18n.ts',
         description: 'Localization: locales, the current-locale store, the message catalog, and t() / localizeCols helpers.',
-        contents: `import { writable, derived } from 'svelte/store'
-
-export type Locale = ${localeUnion}
-export const locales: Locale[] = ${JSON.stringify(locales)} as Locale[]
-export const currentLocale = writable<Locale>(${JSON.stringify(def)})
-
-// Seeded from your schema + screen labels. Every locale starts with the same
-// keys and the default-locale text, so translating is editing values in place -
-// no key hunting. Anything you delete falls back to the default locale.
-const messages: Record<Locale, Record<string, string>> = {
-${messagesEntries}
-}
-
-/** Reactive translator: \`$t('key', 'fallback')\`. Falls back to the default locale, then the fallback, then the key. */
-export const t = derived(currentLocale, ($l) => (key: string, fallback?: string): string =>
-  messages[$l]?.[key] ?? messages[${JSON.stringify(def)}]?.[key] ?? fallback ?? key)
-
-/** Localize a column list's headers via \`col.<entity>.<field>\` keys. */
-export function localizeCols<T extends { field?: string | number; header?: string }>(
-  cols: T[], entity: string, translate: (k: string, fb?: string) => string,
-): T[] {
-  return cols.map((c) => ({ ...c, header: translate('col.' + entity + '.' + String(c.field), c.header ?? String(c.field ?? '')) }))
-}
+        contents: `import { writable, derived } from 'svelte/store'
+
+export type Locale = ${localeUnion}
+export const locales: Locale[] = ${JSON.stringify(locales)} as Locale[]
+export const currentLocale = writable<Locale>(${JSON.stringify(def)})
+
+// Seeded from your schema + screen labels. Every locale starts with the same
+// keys and the default-locale text, so translating is editing values in place -
+// no key hunting. Anything you delete falls back to the default locale.
+const messages: Record<Locale, Record<string, string>> = {
+${messagesEntries}
+}
+
+/** Reactive translator: \`$t('key', 'fallback')\`. Falls back to the default locale, then the fallback, then the key. */
+export const t = derived(currentLocale, ($l) => (key: string, fallback?: string): string =>
+  messages[$l]?.[key] ?? messages[${JSON.stringify(def)}]?.[key] ?? fallback ?? key)
+
+/** Localize a column list's headers via \`col.<entity>.<field>\` keys. */
+export function localizeCols<T extends { field?: string | number; header?: string }>(
+  cols: T[], entity: string, translate: (k: string, fb?: string) => string,
+): T[] {
+  return cols.map((c) => ({ ...c, header: translate('col.' + entity + '.' + String(c.field), c.header ?? String(c.field ?? '')) }))
+}
 `,
     };
 }
@@ -3054,60 +3128,60 @@ function auditModule(persisted = false) {
     return {
         path: 'src/lib/audit.ts',
         description: 'Audit trail store: the AuditEntry schema, an in-memory source, and recordAudit(). NOT persisted - enable the typed data layer to write to a real table.',
-        contents: `import { createInMemoryDataSource } from '@svgrid/enterprise'
-import type { EntitySchema } from '@svgrid/enterprise'
-
-export type AuditEntry = {
-  id: string
-  at: string
-  actor: string
-  entity: string
-  action: 'create' | 'update' | 'delete'
-  recordId: string
-  summary: string
-}
-
-export const auditSchema: EntitySchema<AuditEntry> = {
-  name: 'audit',
-  idField: 'id',
-  fields: [
-    { field: 'id', type: 'text', primaryKey: true, readonly: true },
-    { field: 'at', type: 'datetime', label: 'When' },
-    { field: 'actor', type: 'text', label: 'Actor' },
-    { field: 'entity', type: 'text', label: 'Entity' },
-    { field: 'action', type: 'enum', label: 'Action', options: [{ value: 'create', label: 'Create' }, { value: 'update', label: 'Update' }, { value: 'delete', label: 'Delete' }] },
-    { field: 'recordId', type: 'text', label: 'Record' },
-    { field: 'summary', type: 'text', label: 'Summary' },
-  ],
-}
-
-// In-memory, server-side singleton. Replace with a SQL / Supabase source to
-// persist the trail across restarts (recordAudit + the /audit viewer keep working).
-export const auditSource = createInMemoryDataSource<AuditEntry>([], auditSchema)
-let seq = 0
-
-/** Append one change record. Called by the API routes' \`audit\` hook. */
-export async function recordAudit(input: {
-  entity: string
-  action: 'create' | 'update' | 'delete'
-  recordId: string | null
-  values?: Record<string, unknown>
-  actor?: string
-}): Promise<void> {
-  const summary =
-    input.action === 'delete'
-      ? \`Deleted \${input.entity} \${input.recordId ?? ''}\`.trim()
-      : \`\${input.action === 'create' ? 'Created' : 'Updated'} \${input.entity}\${input.values ? ' (' + Object.keys(input.values).join(', ') + ')' : ''}\`
-  await auditSource.createRow?.({
-    id: String(++seq),
-    at: new Date().toISOString(),
-    actor: input.actor ?? 'system',
-    entity: input.entity,
-    action: input.action,
-    recordId: input.recordId ?? '',
-    summary,
-  })
-}
+        contents: `import { createInMemoryDataSource } from '@svgrid/enterprise'
+import type { EntitySchema } from '@svgrid/enterprise'
+
+export type AuditEntry = {
+  id: string
+  at: string
+  actor: string
+  entity: string
+  action: 'create' | 'update' | 'delete'
+  recordId: string
+  summary: string
+}
+
+export const auditSchema: EntitySchema<AuditEntry> = {
+  name: 'audit',
+  idField: 'id',
+  fields: [
+    { field: 'id', type: 'text', primaryKey: true, readonly: true },
+    { field: 'at', type: 'datetime', label: 'When' },
+    { field: 'actor', type: 'text', label: 'Actor' },
+    { field: 'entity', type: 'text', label: 'Entity' },
+    { field: 'action', type: 'enum', label: 'Action', options: [{ value: 'create', label: 'Create' }, { value: 'update', label: 'Update' }, { value: 'delete', label: 'Delete' }] },
+    { field: 'recordId', type: 'text', label: 'Record' },
+    { field: 'summary', type: 'text', label: 'Summary' },
+  ],
+}
+
+// In-memory, server-side singleton. Replace with a SQL / Supabase source to
+// persist the trail across restarts (recordAudit + the /audit viewer keep working).
+export const auditSource = createInMemoryDataSource<AuditEntry>([], auditSchema)
+let seq = 0
+
+/** Append one change record. Called by the API routes' \`audit\` hook. */
+export async function recordAudit(input: {
+  entity: string
+  action: 'create' | 'update' | 'delete'
+  recordId: string | null
+  values?: Record<string, unknown>
+  actor?: string
+}): Promise<void> {
+  const summary =
+    input.action === 'delete'
+      ? \`Deleted \${input.entity} \${input.recordId ?? ''}\`.trim()
+      : \`\${input.action === 'create' ? 'Created' : 'Updated'} \${input.entity}\${input.values ? ' (' + Object.keys(input.values).join(', ') + ')' : ''}\`
+  await auditSource.createRow?.({
+    id: String(++seq),
+    at: new Date().toISOString(),
+    actor: input.actor ?? 'system',
+    entity: input.entity,
+    action: input.action,
+    recordId: input.recordId ?? '',
+    summary,
+  })
+}
 `,
     };
 }
@@ -3118,92 +3192,92 @@ function auditModulePersisted() {
     return {
         path: 'src/lib/audit.ts',
         description: 'Audit trail: the AuditEntry schema, a Drizzle-backed source over audit_log, and recordAudit() with before/after snapshots.',
-        contents: `import { count, desc } from 'drizzle-orm'
-import type { EntitySchema } from '@svgrid/enterprise'
-import { db } from '../lib/server/db'
-import { auditLog } from '../lib/server/db/schema'
-
-export type AuditEntry = {
-  id: string
-  at: string
-  actor: string
-  entity: string
-  action: 'create' | 'update' | 'delete'
-  recordId: string
-  summary: string
-  /** JSON snapshot of the row before the change (update / delete). */
-  before?: string | null
-  /** JSON snapshot of the row after it (create / update). */
-  after?: string | null
-}
-
-export const auditSchema: EntitySchema<AuditEntry> = {
-  name: 'audit',
-  idField: 'id',
-  fields: [
-    { field: 'id', type: 'text', primaryKey: true, readonly: true },
-    { field: 'at', type: 'datetime', label: 'When' },
-    { field: 'actor', type: 'text', label: 'Actor' },
-    { field: 'entity', type: 'text', label: 'Entity' },
-    { field: 'action', type: 'enum', label: 'Action', options: [{ value: 'create', label: 'Create' }, { value: 'update', label: 'Update' }, { value: 'delete', label: 'Delete' }] },
-    { field: 'recordId', type: 'text', label: 'Record' },
-    { field: 'summary', type: 'text', label: 'Summary' },
-    { field: 'before', type: 'json', label: 'Before', readonly: true },
-    { field: 'after', type: 'json', label: 'After', readonly: true },
-  ],
-}
-
-const toEntry = (r: typeof auditLog.$inferSelect): AuditEntry => ({
-  id: String(r.id),
-  at: typeof r.at === 'string' ? r.at : new Date(r.at as unknown as Date).toISOString(),
-  actor: r.actor,
-  entity: r.entity,
-  action: r.action as AuditEntry['action'],
-  recordId: r.recordId,
-  summary: r.summary,
-  before: r.before ?? null,
-  after: r.after ?? null,
-})
-
-/** Read-only \\\`ServerDataSource\\\` for the /audit viewer. Newest first, paged in
- *  the database so a long trail doesn't load in one go. No write methods: the
- *  trail is append-only through \\\`recordAudit\\\`. */
-export const auditSource = {
-  async getRows(request: { startRow?: number; endRow?: number }) {
-    const start = request.startRow ?? 0
-    const limit = Math.max(1, (request.endRow ?? start + 25) - start)
-    const [rows, counted] = await Promise.all([
-      db.select().from(auditLog).orderBy(desc(auditLog.at)).limit(limit).offset(start),
-      db.select({ n: count() }).from(auditLog),
-    ])
-    return { rows: rows.map(toEntry), rowCount: Number(counted.at(0)?.n ?? 0) }
-  },
-}
-
-/** Append one change record. Called by the API routes' \\\`audit\\\` hook. */
-export async function recordAudit(input: {
-  entity: string
-  action: 'create' | 'update' | 'delete'
-  recordId: string | null
-  values?: Record<string, unknown>
-  before?: Record<string, unknown> | null
-  actor?: string
-}): Promise<void> {
-  const summary =
-    input.action === 'delete'
-      ? \`Deleted \${input.entity} \${input.recordId ?? ''}\`.trim()
-      : \`\${input.action === 'create' ? 'Created' : 'Updated'} \${input.entity}\${input.values ? ' (' + Object.keys(input.values).join(', ') + ')' : ''}\`
-  await db.insert(auditLog).values({
-    at: new Date().toISOString(),
-    actor: input.actor ?? 'system',
-    entity: input.entity,
-    action: input.action,
-    recordId: input.recordId ?? '',
-    summary,
-    before: input.before ? JSON.stringify(input.before) : null,
-    after: input.values ? JSON.stringify(input.values) : null,
-  } as typeof auditLog.$inferInsert)
-}
+        contents: `import { count, desc } from 'drizzle-orm'
+import type { EntitySchema } from '@svgrid/enterprise'
+import { db } from '../lib/server/db'
+import { auditLog } from '../lib/server/db/schema'
+
+export type AuditEntry = {
+  id: string
+  at: string
+  actor: string
+  entity: string
+  action: 'create' | 'update' | 'delete'
+  recordId: string
+  summary: string
+  /** JSON snapshot of the row before the change (update / delete). */
+  before?: string | null
+  /** JSON snapshot of the row after it (create / update). */
+  after?: string | null
+}
+
+export const auditSchema: EntitySchema<AuditEntry> = {
+  name: 'audit',
+  idField: 'id',
+  fields: [
+    { field: 'id', type: 'text', primaryKey: true, readonly: true },
+    { field: 'at', type: 'datetime', label: 'When' },
+    { field: 'actor', type: 'text', label: 'Actor' },
+    { field: 'entity', type: 'text', label: 'Entity' },
+    { field: 'action', type: 'enum', label: 'Action', options: [{ value: 'create', label: 'Create' }, { value: 'update', label: 'Update' }, { value: 'delete', label: 'Delete' }] },
+    { field: 'recordId', type: 'text', label: 'Record' },
+    { field: 'summary', type: 'text', label: 'Summary' },
+    { field: 'before', type: 'json', label: 'Before', readonly: true },
+    { field: 'after', type: 'json', label: 'After', readonly: true },
+  ],
+}
+
+const toEntry = (r: typeof auditLog.$inferSelect): AuditEntry => ({
+  id: String(r.id),
+  at: typeof r.at === 'string' ? r.at : new Date(r.at as unknown as Date).toISOString(),
+  actor: r.actor,
+  entity: r.entity,
+  action: r.action as AuditEntry['action'],
+  recordId: r.recordId,
+  summary: r.summary,
+  before: r.before ?? null,
+  after: r.after ?? null,
+})
+
+/** Read-only \\\`ServerDataSource\\\` for the /audit viewer. Newest first, paged in
+ *  the database so a long trail doesn't load in one go. No write methods: the
+ *  trail is append-only through \\\`recordAudit\\\`. */
+export const auditSource = {
+  async getRows(request: { startRow?: number; endRow?: number }) {
+    const start = request.startRow ?? 0
+    const limit = Math.max(1, (request.endRow ?? start + 25) - start)
+    const [rows, counted] = await Promise.all([
+      db.select().from(auditLog).orderBy(desc(auditLog.at)).limit(limit).offset(start),
+      db.select({ n: count() }).from(auditLog),
+    ])
+    return { rows: rows.map(toEntry), rowCount: Number(counted.at(0)?.n ?? 0) }
+  },
+}
+
+/** Append one change record. Called by the API routes' \\\`audit\\\` hook. */
+export async function recordAudit(input: {
+  entity: string
+  action: 'create' | 'update' | 'delete'
+  recordId: string | null
+  values?: Record<string, unknown>
+  before?: Record<string, unknown> | null
+  actor?: string
+}): Promise<void> {
+  const summary =
+    input.action === 'delete'
+      ? \`Deleted \${input.entity} \${input.recordId ?? ''}\`.trim()
+      : \`\${input.action === 'create' ? 'Created' : 'Updated'} \${input.entity}\${input.values ? ' (' + Object.keys(input.values).join(', ') + ')' : ''}\`
+  await db.insert(auditLog).values({
+    at: new Date().toISOString(),
+    actor: input.actor ?? 'system',
+    entity: input.entity,
+    action: input.action,
+    recordId: input.recordId ?? '',
+    summary,
+    before: input.before ? JSON.stringify(input.before) : null,
+    after: input.values ? JSON.stringify(input.values) : null,
+  } as typeof auditLog.$inferInsert)
+}
 `,
     };
 }
@@ -3218,31 +3292,31 @@ function tenantModule(field) {
     return {
         path: 'src/lib/server/tenant.ts',
         description: 'Resolve the caller\'s tenant from the session; used to scope every API route.',
-        contents: `// Regenerated by SvGrid Studio. Multi-tenancy: which tenant is calling?
-//
-// The tenant is carried on the session (see hooks.server.ts / auth.ts) and
-// stamped onto \`event.locals\`. Every scoped API route calls requireTenant().
-
-export type TenantEvent = { locals?: Record<string, unknown> }
-
-/** The caller's tenant id, or null when there is none. */
-export function getTenant(event: TenantEvent): string | null {
-  const t = event.locals?.${field}
-  return t == null || t === '' ? null : String(t)
-}
-
-/**
- * The caller's tenant id, or THROW.
- *
- * Throwing is the point: the route's \`scope\` turns it into a 403. Returning
- * null here would let the query run unscoped, which is the one failure mode
- * multi-tenancy cannot have.
- */
-export function requireTenant(event: TenantEvent): string {
-  const t = getTenant(event)
-  if (!t) throw new Error('No tenant on the session - sign in again.')
-  return t
-}
+        contents: `// Regenerated by SvGrid Studio. Multi-tenancy: which tenant is calling?
+//
+// The tenant is carried on the session (see hooks.server.ts / auth.ts) and
+// stamped onto \`event.locals\`. Every scoped API route calls requireTenant().
+
+export type TenantEvent = { locals?: Record<string, unknown> }
+
+/** The caller's tenant id, or null when there is none. */
+export function getTenant(event: TenantEvent): string | null {
+  const t = event.locals?.${field}
+  return t == null || t === '' ? null : String(t)
+}
+
+/**
+ * The caller's tenant id, or THROW.
+ *
+ * Throwing is the point: the route's \`scope\` turns it into a 403. Returning
+ * null here would let the query run unscoped, which is the one failure mode
+ * multi-tenancy cannot have.
+ */
+export function requireTenant(event: TenantEvent): string {
+  const t = getTenant(event)
+  if (!t) throw new Error('No tenant on the session - sign in again.')
+  return t
+}
 `,
     };
 }
@@ -3267,10 +3341,10 @@ function jobsFiles(project, jobs, emailAvailable) {
                 return `  ${JSON.stringify(j.id)}: async () => {\n    // ${label}: cannot send - ${why}.\n    console.warn('cron ${j.id}: skipped (${why})')\n  },`;
             }
             const n = namesFor(ent);
-            return `  ${JSON.stringify(j.id)}: async () => {
-    const { rows, rowCount } = await ${n.sourceVar}.getRows({ startRow: 0, endRow: 10, sortModel: [], filterModel: {} })
-    const items = rows.map((r) => '<li>' + Object.values(r).slice(0, 3).map(String).join(' &middot; ') + '</li>').join('')
-    await sendEmail(${to}, ${subject}, '<p>' + rowCount + ' ${ent.name} total. Most recent:</p><ul>' + items + '</ul>')
+            return `  ${JSON.stringify(j.id)}: async () => {
+    const { rows, rowCount } = await ${n.sourceVar}.getRows({ startRow: 0, endRow: 10, sortModel: [], filterModel: {} })
+    const items = rows.map((r) => '<li>' + Object.values(r).slice(0, 3).map(String).join(' &middot; ') + '</li>').join('')
+    await sendEmail(${to}, ${subject}, '<p>' + rowCount + ' ${ent.name} total. Most recent:</p><ul>' + items + '</ul>')
   },`;
         }
         const body = (j.code ?? '').trim() || `console.log('cron ${j.id}: no body yet')`;
@@ -3289,59 +3363,59 @@ function jobsFiles(project, jobs, emailAvailable) {
         ...(jobs.some((j) => j.kind === 'email') && emailAvailable ? [`import { sendEmail } from '../lib/server/email'`] : []),
     ];
     const table = jobs.map((j) => ` *   ${j.id.padEnd(20)} ${j.cron.padEnd(16)} ${j.name}`).join('\n');
-    const jobsTs = `// Regenerated by SvGrid Studio. Scheduled job handlers.
-//
-// Schedule (UTC):
-${table}
-//
-// Runs on the server, triggered by /api/cron - NOT in the browser. Edit a
-// handler body freely; the registry keys are what /api/cron dispatches on.
-${imports.join('\n')}
-
-export const jobs: Record<string, () => Promise<void>> = {
-${jobs.map(handler).join('\n')}
-}
-
-/** Job ids that are switched on. /api/cron without ?job= runs exactly these. */
-export const enabledJobs: string[] = ${JSON.stringify(jobs.filter((j) => j.enabled !== false).map((j) => j.id))}
+    const jobsTs = `// Regenerated by SvGrid Studio. Scheduled job handlers.
+//
+// Schedule (UTC):
+${table}
+//
+// Runs on the server, triggered by /api/cron - NOT in the browser. Edit a
+// handler body freely; the registry keys are what /api/cron dispatches on.
+${imports.join('\n')}
+
+export const jobs: Record<string, () => Promise<void>> = {
+${jobs.map(handler).join('\n')}
+}
+
+/** Job ids that are switched on. /api/cron without ?job= runs exactly these. */
+export const enabledJobs: string[] = ${JSON.stringify(jobs.filter((j) => j.enabled !== false).map((j) => j.id))}
 `;
-    const routeTs = `import { json, error } from '@sveltejs/kit'
-import { env } from '$env/dynamic/private'
-import type { RequestHandler } from './$types'
-import { jobs, enabledJobs } from '../lib/server/jobs'
-
-/**
- * Scheduled-job endpoint. Your platform's scheduler calls this (Vercel Cron, a
- * GitHub Actions schedule, or a crontab running \`curl\`). See DEPLOY.md.
- *
- * Guarded by CRON_SECRET: send it as \`Authorization: Bearer <secret>\` or
- * \`?secret=<secret>\`. With no CRON_SECRET set the route refuses to run rather
- * than leaving a public "do work" URL open.
- */
-const authorized = (request: Request, url: URL): boolean => {
-  const secret = env.CRON_SECRET
-  if (!secret) return false
-  const header = request.headers.get('authorization')
-  return header === 'Bearer ' + secret || url.searchParams.get('secret') === secret
-}
-
-const run: RequestHandler = async ({ request, url }) => {
-  if (!authorized(request, url)) throw error(401, 'cron: missing or invalid CRON_SECRET')
-  const only = url.searchParams.get('job')
-  const ids = only ? [only] : enabledJobs
-  const results: Array<{ job: string; ok: boolean; error?: string }> = []
-  for (const id of ids) {
-    const fn = jobs[id]
-    if (!fn) { results.push({ job: id, ok: false, error: 'unknown job' }); continue }
-    // One failing job must not stop the rest of the run.
-    try { await fn(); results.push({ job: id, ok: true }) }
-    catch (err) { results.push({ job: id, ok: false, error: err instanceof Error ? err.message : String(err) }) }
-  }
-  return json({ ran: results.length, results })
-}
-
-export const GET = run
-export const POST = run
+    const routeTs = `import { json, error } from '@sveltejs/kit'
+import { env } from '$env/dynamic/private'
+import type { RequestHandler } from './$types'
+import { jobs, enabledJobs } from '../lib/server/jobs'
+
+/**
+ * Scheduled-job endpoint. Your platform's scheduler calls this (Vercel Cron, a
+ * GitHub Actions schedule, or a crontab running \`curl\`). See DEPLOY.md.
+ *
+ * Guarded by CRON_SECRET: send it as \`Authorization: Bearer <secret>\` or
+ * \`?secret=<secret>\`. With no CRON_SECRET set the route refuses to run rather
+ * than leaving a public "do work" URL open.
+ */
+const authorized = (request: Request, url: URL): boolean => {
+  const secret = env.CRON_SECRET
+  if (!secret) return false
+  const header = request.headers.get('authorization')
+  return header === 'Bearer ' + secret || url.searchParams.get('secret') === secret
+}
+
+const run: RequestHandler = async ({ request, url }) => {
+  if (!authorized(request, url)) throw error(401, 'cron: missing or invalid CRON_SECRET')
+  const only = url.searchParams.get('job')
+  const ids = only ? [only] : enabledJobs
+  const results: Array<{ job: string; ok: boolean; error?: string }> = []
+  for (const id of ids) {
+    const fn = jobs[id]
+    if (!fn) { results.push({ job: id, ok: false, error: 'unknown job' }); continue }
+    // One failing job must not stop the rest of the run.
+    try { await fn(); results.push({ job: id, ok: true }) }
+    catch (err) { results.push({ job: id, ok: false, error: err instanceof Error ? err.message : String(err) }) }
+  }
+  return json({ ran: results.length, results })
+}
+
+export const GET = run
+export const POST = run
 `;
     return [
         { path: 'src/lib/server/jobs.ts', description: 'Scheduled job handlers, keyed by job id.', contents: jobsTs },
@@ -3353,10 +3427,10 @@ function auditRouteFile() {
     return {
         path: 'src/routes/api/audit/+server.ts',
         description: 'API route for the audit trail (read-only viewer feed).',
-        contents: `import { createKitHandlers } from '@svgrid/enterprise'
-import { auditSchema, auditSource } from '../lib/audit'
-
-export const { POST } = createKitHandlers({ schema: auditSchema, source: auditSource })
+        contents: `import { createKitHandlers } from '@svgrid/enterprise'
+import { auditSchema, auditSource } from '../lib/audit'
+
+export const { POST } = createKitHandlers({ schema: auditSchema, source: auditSource })
 `,
     };
 }
@@ -3365,40 +3439,40 @@ function auditViewerPage() {
     return {
         path: 'src/routes/audit/+page.svelte',
         description: 'Audit log viewer (read-only grid of change records).',
-        contents: `<script lang="ts">
-  import { SvGrid, createServerDataSource, type ServerState } from '@svgrid/grid'
-  import { schemaToColumns, createKitDataSource } from '@svgrid/enterprise'
-  import { auditSchema, type AuditEntry } from '../lib/audit'
-
-  const source = createKitDataSource<AuditEntry>({ endpoint: '/api/audit' })
-  let view = $state<ServerState<AuditEntry>>({ rows: [], total: 0, loading: false, saving: false, error: null, pageIndex: 0, pageSize: 25, pageCount: 1, sortModel: [], filterModel: {} })
-  const controller = createServerDataSource<AuditEntry>(source, { pageSize: 25, onChange: (s) => (view = s) })
-  $effect(() => { controller.refresh(); return () => controller.dispose() })
-  const columns = schemaToColumns(auditSchema)
-</script>
-
-<h1 class="st__title">Audit log</h1>
-<p class="st__sub">Every create, update, and delete recorded server-side.</p>
-
-<div class="screen" style="margin-top: 16px">
-  <SvGrid
-    data={view.rows}
-    columns={columns}
-    loading={view.loading}
-    loadingOverlay
-    fitColumns
-    sortable
-    externalSort
-    onSortingChange={(s) => controller.setSort(s)}
-    showPagination
-    externalPagination
-    rowCount={view.total}
-    pageIndex={view.pageIndex}
-    pageSize={view.pageSize}
-    onPaginationChange={({ pageIndex, pageSize }) => (pageSize !== view.pageSize ? controller.setPageSize(pageSize) : controller.setPage(pageIndex))}
-    containerHeight={520}
-  />
-</div>
+        contents: `<script lang="ts">
+  import { SvGrid, createServerDataSource, type ServerState } from '@svgrid/grid'
+  import { schemaToColumns, createKitDataSource } from '@svgrid/enterprise'
+  import { auditSchema, type AuditEntry } from '../lib/audit'
+
+  const source = createKitDataSource<AuditEntry>({ endpoint: '/api/audit' })
+  let view = $state<ServerState<AuditEntry>>({ rows: [], total: 0, loading: false, saving: false, error: null, pageIndex: 0, pageSize: 25, pageCount: 1, sortModel: [], filterModel: {} })
+  const controller = createServerDataSource<AuditEntry>(source, { pageSize: 25, onChange: (s) => (view = s) })
+  $effect(() => { controller.refresh(); return () => controller.dispose() })
+  const columns = schemaToColumns(auditSchema)
+</script>
+
+<h1 class="st__title">Audit log</h1>
+<p class="st__sub">Every create, update, and delete recorded server-side.</p>
+
+<div class="screen" style="margin-top: 16px">
+  <SvGrid
+    data={view.rows}
+    columns={columns}
+    loading={view.loading}
+    loadingOverlay
+    fitColumns
+    sortable
+    externalSort
+    onSortingChange={(s) => controller.setSort(s)}
+    showPagination
+    externalPagination
+    rowCount={view.total}
+    pageIndex={view.pageIndex}
+    pageSize={view.pageSize}
+    onPaginationChange={({ pageIndex, pageSize }) => (pageSize !== view.pageSize ? controller.setPageSize(pageSize) : controller.setPage(pageIndex))}
+    containerHeight={520}
+  />
+</div>
 `,
     };
 }
@@ -3414,51 +3488,51 @@ function accessModule(project) {
     return {
         path: 'src/lib/access.ts',
         description: 'RBAC policy: roles, screen + action permissions, the current-role store, and server helpers. Shared by the UI and the API routes.',
-        contents: `import { writable } from 'svelte/store'
-
-export type AppRole = ${roleUnion}
-export type WriteAction = 'create' | 'update' | 'delete'
-export const ROLES: AppRole[] = ${JSON.stringify(roleNames)} as AppRole[]
-
-const SCREENS: Record<AppRole, '*' | string[]> = {
-${screensEntries}
-}
-const ACTIONS: Record<AppRole, '*' | WriteAction[]> = {
-${actionsEntries}
-}
-
-/** The signed-in user's role. Set it after login (e.g. from the session);
- *  defaults to the project's default role. Read it in components as \`$currentRole\`. */
-export const currentRole = writable<AppRole>(${JSON.stringify(defaultRole)})
-
-/** May this role open the given screen id? */
-export function canScreen(role: AppRole, screenId: string): boolean {
-  const s = SCREENS[role]
-  return s === '*' || (Array.isArray(s) && s.includes(screenId))
-}
-/** May this role perform a write action? (Reads are implied by screen access.) */
-export function can(role: AppRole, action: WriteAction): boolean {
-  const a = ACTIONS[role]
-  return a === '*' || (Array.isArray(a) && a.includes(action))
-}
-
-// ---- server side ----------------------------------------------------------
-/** Resolve the caller's role on the server. Wire this to YOUR auth: by default it
- *  reads \`event.locals.role\` - set it in \`hooks.server.ts\` from the session. */
-export function getServerRole(event: { locals?: { role?: unknown } }): AppRole {
-  const r = event?.locals?.role
-  return (typeof r === 'string' && (ROLES as string[]).includes(r) ? r : ${JSON.stringify(defaultRole)}) as AppRole
-}
-/** Authorize a CRUD action for a role - used by the API routes' \`authorize\` hook.
- *  \`screenIds\` are the screen(s) bound to this route's entity: a read is allowed
- *  only if the role can open at least one of them (an entity with no screen of its
- *  own - e.g. a relation lookup target - has nothing to gate reads by, so it stays
- *  open). Writes are still governed purely by \`can()\`. */
-export function authorizeAction(role: AppRole, action: 'read' | WriteAction, screenIds: string[] = []): boolean {
-  if (action !== 'read') return can(role, action)
-  if (screenIds.length === 0) return true
-  return screenIds.some((id) => canScreen(role, id))
-}
+        contents: `import { writable } from 'svelte/store'
+
+export type AppRole = ${roleUnion}
+export type WriteAction = 'create' | 'update' | 'delete'
+export const ROLES: AppRole[] = ${JSON.stringify(roleNames)} as AppRole[]
+
+const SCREENS: Record<AppRole, '*' | string[]> = {
+${screensEntries}
+}
+const ACTIONS: Record<AppRole, '*' | WriteAction[]> = {
+${actionsEntries}
+}
+
+/** The signed-in user's role. Set it after login (e.g. from the session);
+ *  defaults to the project's default role. Read it in components as \`$currentRole\`. */
+export const currentRole = writable<AppRole>(${JSON.stringify(defaultRole)})
+
+/** May this role open the given screen id? */
+export function canScreen(role: AppRole, screenId: string): boolean {
+  const s = SCREENS[role]
+  return s === '*' || (Array.isArray(s) && s.includes(screenId))
+}
+/** May this role perform a write action? (Reads are implied by screen access.) */
+export function can(role: AppRole, action: WriteAction): boolean {
+  const a = ACTIONS[role]
+  return a === '*' || (Array.isArray(a) && a.includes(action))
+}
+
+// ---- server side ----------------------------------------------------------
+/** Resolve the caller's role on the server. Wire this to YOUR auth: by default it
+ *  reads \`event.locals.role\` - set it in \`hooks.server.ts\` from the session. */
+export function getServerRole(event: { locals?: { role?: unknown } }): AppRole {
+  const r = event?.locals?.role
+  return (typeof r === 'string' && (ROLES as string[]).includes(r) ? r : ${JSON.stringify(defaultRole)}) as AppRole
+}
+/** Authorize a CRUD action for a role - used by the API routes' \`authorize\` hook.
+ *  \`screenIds\` are the screen(s) bound to this route's entity: a read is allowed
+ *  only if the role can open at least one of them (an entity with no screen of its
+ *  own - e.g. a relation lookup target - has nothing to gate reads by, so it stays
+ *  open). Writes are still governed purely by \`can()\`. */
+export function authorizeAction(role: AppRole, action: 'read' | WriteAction, screenIds: string[] = []): boolean {
+  if (action !== 'read') return can(role, action)
+  if (screenIds.length === 0) return true
+  return screenIds.some((id) => canScreen(role, id))
+}
 `,
     };
 }
@@ -3489,862 +3563,862 @@ function authFiles(project, dbBacked = false, accessEnabled = false, tenantColum
     const seedLiteral = users
         .map((u) => `  { email: ${JSON.stringify(u.email)}, name: ${JSON.stringify(u.name)}, role: ${JSON.stringify(u.role)}, password: ${JSON.stringify(u.password)} }`)
         .join(',\n');
-    const authTs = `// Regenerated by SvGrid Studio. Dependency-free auth: PBKDF2 password hashing +
-// stateless HMAC-signed session cookies (Web Crypto - runs on Node and edge runtimes).
-import { env } from '$env/dynamic/private'
-
-export const SESSION_COOKIE = 'sv_session'
-export const SESSION_MAX_AGE = 60 * 60 * 24 * 7 // 7 days (seconds)
-
-export type SessionUser = { email: string; name: string; role: string }
-
-const enc = new TextEncoder()
-// Signing secret. Set SESSION_SECRET in the environment for production (see .env.example).
-const secret = () => env.SESSION_SECRET || 'dev-insecure-secret-change-me'
-
-function b64url(bytes: ArrayBuffer | Uint8Array): string {
-  const b = bytes instanceof Uint8Array ? bytes : new Uint8Array(bytes)
-  let s = ''
-  for (const byte of b) s += String.fromCharCode(byte)
-  return btoa(s).replace(/\\+/g, '-').replace(/\\//g, '_').replace(/=+$/, '')
-}
-function fromB64url(s: string): Uint8Array {
-  const p = s.replace(/-/g, '+').replace(/_/g, '/')
-  const bin = atob(p + '==='.slice((p.length + 3) % 4))
-  const out = new Uint8Array(bin.length)
-  for (let i = 0; i < bin.length; i++) out[i] = bin.charCodeAt(i)
-  return out
-}
-function timingSafeEqual(a: string, b: string): boolean {
-  if (a.length !== b.length) return false
-  let out = 0
-  for (let i = 0; i < a.length; i++) out |= a.charCodeAt(i) ^ b.charCodeAt(i)
-  return out === 0
-}
-async function hmac(data: string): Promise<string> {
-  const key = await crypto.subtle.importKey('raw', enc.encode(secret()), { name: 'HMAC', hash: 'SHA-256' }, false, ['sign'])
-  return b64url(await crypto.subtle.sign('HMAC', key, enc.encode(data)))
-}
-
-/** Sign a stateless session token: base64url(payload).hmac(payload). */
-export async function signSession(user: SessionUser): Promise<string> {
-  const payload = { ...user, exp: Math.floor(Date.now() / 1000) + SESSION_MAX_AGE }
-  const body = b64url(enc.encode(JSON.stringify(payload)))
-  return body + '.' + (await hmac(body))
-}
-/** Verify a token; returns the user, or null if missing / tampered / expired. */
-export async function readSession(token: string | undefined): Promise<SessionUser | null> {
-  if (!token) return null
-  const dot = token.lastIndexOf('.')
-  if (dot < 0) return null
-  const body = token.slice(0, dot)
-  const sig = token.slice(dot + 1)
-  if (!timingSafeEqual(sig, await hmac(body))) return null
-  try {
-    const p = JSON.parse(new TextDecoder().decode(fromB64url(body))) as SessionUser & { exp: number }
-    if (typeof p.exp !== 'number' || p.exp * 1000 < Date.now()) return null
-    return { email: p.email, name: p.name, role: p.role }
-  } catch {
-    return null
-  }
-}
-
-// ---- password hashing (PBKDF2) --------------------------------------------
-// Use these to store hashed passwords in a real user store: keep hashPassword()'s
-// output as \`passwordHash\`, then check with verifyPassword(input, passwordHash).
-export async function hashPassword(password: string, salt?: string): Promise<string> {
-  const s = salt ?? b64url(crypto.getRandomValues(new Uint8Array(16)))
-  const key = await crypto.subtle.importKey('raw', enc.encode(password), 'PBKDF2', false, ['deriveBits'])
-  const bits = await crypto.subtle.deriveBits({ name: 'PBKDF2', salt: enc.encode(s), iterations: 100000, hash: 'SHA-256' }, key, 256)
-  return s + ':' + b64url(bits)
-}
-export async function verifyPassword(password: string, stored: string): Promise<boolean> {
-  const salt = stored.split(':')[0]
-  if (!salt) return false
-  return timingSafeEqual(await hashPassword(password, salt), stored)
-}
-
-// ---- password reset (stateless, signed link) ------------------------------
-const RESET_MAX_AGE = 60 * 30 // 30 minutes
-/** A short-lived, signed password-reset token for an email (no DB row needed). */
-export async function signReset(email: string): Promise<string> {
-  const body = b64url(enc.encode(JSON.stringify({ email, exp: Math.floor(Date.now() / 1000) + RESET_MAX_AGE, k: 'reset' })))
-  return body + '.' + (await hmac(body))
-}
-/** Verify a reset token; returns the email, or null if invalid / expired. */
-export async function readReset(token: string | undefined): Promise<string | null> {
-  if (!token) return null
-  const dot = token.lastIndexOf('.')
-  if (dot < 0) return null
-  const body = token.slice(0, dot)
-  if (!timingSafeEqual(token.slice(dot + 1), await hmac(body))) return null
-  try {
-    const p = JSON.parse(new TextDecoder().decode(fromB64url(body))) as { email: string; exp: number; k: string }
-    if (p.k !== 'reset' || typeof p.exp !== 'number' || p.exp * 1000 < Date.now()) return null
-    return p.email
-  } catch {
-    return null
-  }
-}
-
-/** Deliver a password-reset link. STUB: logs it in dev - wire your email provider
- *  (Resend / SendGrid / Postmark / SMTP) here for production. */
-export async function sendResetEmail(email: string, link: string): Promise<void> {
-  console.log('[auth] password reset for ' + email + ' -> ' + link)
-}
-${twoFactor ? `
-// ---- email two-factor challenge (stateless, signed) -----------------------
-export const TFA_COOKIE = 'sv_2fa'
-const TFA_MAX_AGE = 60 * 10 // 10 minutes
-/** A random 6-digit one-time code. */
-export function otpCode(): string {
-  return String(crypto.getRandomValues(new Uint32Array(1))[0]! % 1000000).padStart(6, '0')
-}
-async function codeHash(email: string, code: string): Promise<string> {
-  const d = await crypto.subtle.digest('SHA-256', enc.encode(email + ':' + code))
-  return b64url(d)
-}
-/** A signed pending-2FA token binding an email to a hashed code (the code itself is emailed). */
-export async function signChallenge(email: string, code: string): Promise<string> {
-  const body = b64url(enc.encode(JSON.stringify({ email, ch: await codeHash(email, code), exp: Math.floor(Date.now() / 1000) + TFA_MAX_AGE, k: '2fa' })))
-  return body + '.' + (await hmac(body))
-}
-/** Verify a submitted code against the pending token; returns the email or null. */
-export async function readChallenge(token: string | undefined, code: string): Promise<string | null> {
-  if (!token) return null
-  const dot = token.lastIndexOf('.')
-  if (dot < 0) return null
-  const body = token.slice(0, dot)
-  if (!timingSafeEqual(token.slice(dot + 1), await hmac(body))) return null
-  try {
-    const p = JSON.parse(new TextDecoder().decode(fromB64url(body))) as { email: string; ch: string; exp: number; k: string }
-    if (p.k !== '2fa' || typeof p.exp !== 'number' || p.exp * 1000 < Date.now()) return null
-    if (!timingSafeEqual(p.ch, await codeHash(p.email, code))) return null
-    return p.email
-  } catch {
-    return null
-  }
-}
+    const authTs = `// Regenerated by SvGrid Studio. Dependency-free auth: PBKDF2 password hashing +
+// stateless HMAC-signed session cookies (Web Crypto - runs on Node and edge runtimes).
+import { env } from '$env/dynamic/private'
+
+export const SESSION_COOKIE = 'sv_session'
+export const SESSION_MAX_AGE = 60 * 60 * 24 * 7 // 7 days (seconds)
+
+export type SessionUser = { email: string; name: string; role: string }
+
+const enc = new TextEncoder()
+// Signing secret. Set SESSION_SECRET in the environment for production (see .env.example).
+const secret = () => env.SESSION_SECRET || 'dev-insecure-secret-change-me'
+
+function b64url(bytes: ArrayBuffer | Uint8Array): string {
+  const b = bytes instanceof Uint8Array ? bytes : new Uint8Array(bytes)
+  let s = ''
+  for (const byte of b) s += String.fromCharCode(byte)
+  return btoa(s).replace(/\\+/g, '-').replace(/\\//g, '_').replace(/=+$/, '')
+}
+function fromB64url(s: string): Uint8Array {
+  const p = s.replace(/-/g, '+').replace(/_/g, '/')
+  const bin = atob(p + '==='.slice((p.length + 3) % 4))
+  const out = new Uint8Array(bin.length)
+  for (let i = 0; i < bin.length; i++) out[i] = bin.charCodeAt(i)
+  return out
+}
+function timingSafeEqual(a: string, b: string): boolean {
+  if (a.length !== b.length) return false
+  let out = 0
+  for (let i = 0; i < a.length; i++) out |= a.charCodeAt(i) ^ b.charCodeAt(i)
+  return out === 0
+}
+async function hmac(data: string): Promise<string> {
+  const key = await crypto.subtle.importKey('raw', enc.encode(secret()), { name: 'HMAC', hash: 'SHA-256' }, false, ['sign'])
+  return b64url(await crypto.subtle.sign('HMAC', key, enc.encode(data)))
+}
+
+/** Sign a stateless session token: base64url(payload).hmac(payload). */
+export async function signSession(user: SessionUser): Promise<string> {
+  const payload = { ...user, exp: Math.floor(Date.now() / 1000) + SESSION_MAX_AGE }
+  const body = b64url(enc.encode(JSON.stringify(payload)))
+  return body + '.' + (await hmac(body))
+}
+/** Verify a token; returns the user, or null if missing / tampered / expired. */
+export async function readSession(token: string | undefined): Promise<SessionUser | null> {
+  if (!token) return null
+  const dot = token.lastIndexOf('.')
+  if (dot < 0) return null
+  const body = token.slice(0, dot)
+  const sig = token.slice(dot + 1)
+  if (!timingSafeEqual(sig, await hmac(body))) return null
+  try {
+    const p = JSON.parse(new TextDecoder().decode(fromB64url(body))) as SessionUser & { exp: number }
+    if (typeof p.exp !== 'number' || p.exp * 1000 < Date.now()) return null
+    return { email: p.email, name: p.name, role: p.role }
+  } catch {
+    return null
+  }
+}
+
+// ---- password hashing (PBKDF2) --------------------------------------------
+// Use these to store hashed passwords in a real user store: keep hashPassword()'s
+// output as \`passwordHash\`, then check with verifyPassword(input, passwordHash).
+export async function hashPassword(password: string, salt?: string): Promise<string> {
+  const s = salt ?? b64url(crypto.getRandomValues(new Uint8Array(16)))
+  const key = await crypto.subtle.importKey('raw', enc.encode(password), 'PBKDF2', false, ['deriveBits'])
+  const bits = await crypto.subtle.deriveBits({ name: 'PBKDF2', salt: enc.encode(s), iterations: 100000, hash: 'SHA-256' }, key, 256)
+  return s + ':' + b64url(bits)
+}
+export async function verifyPassword(password: string, stored: string): Promise<boolean> {
+  const salt = stored.split(':')[0]
+  if (!salt) return false
+  return timingSafeEqual(await hashPassword(password, salt), stored)
+}
+
+// ---- password reset (stateless, signed link) ------------------------------
+const RESET_MAX_AGE = 60 * 30 // 30 minutes
+/** A short-lived, signed password-reset token for an email (no DB row needed). */
+export async function signReset(email: string): Promise<string> {
+  const body = b64url(enc.encode(JSON.stringify({ email, exp: Math.floor(Date.now() / 1000) + RESET_MAX_AGE, k: 'reset' })))
+  return body + '.' + (await hmac(body))
+}
+/** Verify a reset token; returns the email, or null if invalid / expired. */
+export async function readReset(token: string | undefined): Promise<string | null> {
+  if (!token) return null
+  const dot = token.lastIndexOf('.')
+  if (dot < 0) return null
+  const body = token.slice(0, dot)
+  if (!timingSafeEqual(token.slice(dot + 1), await hmac(body))) return null
+  try {
+    const p = JSON.parse(new TextDecoder().decode(fromB64url(body))) as { email: string; exp: number; k: string }
+    if (p.k !== 'reset' || typeof p.exp !== 'number' || p.exp * 1000 < Date.now()) return null
+    return p.email
+  } catch {
+    return null
+  }
+}
+
+/** Deliver a password-reset link. STUB: logs it in dev - wire your email provider
+ *  (Resend / SendGrid / Postmark / SMTP) here for production. */
+export async function sendResetEmail(email: string, link: string): Promise<void> {
+  console.log('[auth] password reset for ' + email + ' -> ' + link)
+}
+${twoFactor ? `
+// ---- email two-factor challenge (stateless, signed) -----------------------
+export const TFA_COOKIE = 'sv_2fa'
+const TFA_MAX_AGE = 60 * 10 // 10 minutes
+/** A random 6-digit one-time code. */
+export function otpCode(): string {
+  return String(crypto.getRandomValues(new Uint32Array(1))[0]! % 1000000).padStart(6, '0')
+}
+async function codeHash(email: string, code: string): Promise<string> {
+  const d = await crypto.subtle.digest('SHA-256', enc.encode(email + ':' + code))
+  return b64url(d)
+}
+/** A signed pending-2FA token binding an email to a hashed code (the code itself is emailed). */
+export async function signChallenge(email: string, code: string): Promise<string> {
+  const body = b64url(enc.encode(JSON.stringify({ email, ch: await codeHash(email, code), exp: Math.floor(Date.now() / 1000) + TFA_MAX_AGE, k: '2fa' })))
+  return body + '.' + (await hmac(body))
+}
+/** Verify a submitted code against the pending token; returns the email or null. */
+export async function readChallenge(token: string | undefined, code: string): Promise<string | null> {
+  if (!token) return null
+  const dot = token.lastIndexOf('.')
+  if (dot < 0) return null
+  const body = token.slice(0, dot)
+  if (!timingSafeEqual(token.slice(dot + 1), await hmac(body))) return null
+  try {
+    const p = JSON.parse(new TextDecoder().decode(fromB64url(body))) as { email: string; ch: string; exp: number; k: string }
+    if (p.k !== '2fa' || typeof p.exp !== 'number' || p.exp * 1000 < Date.now()) return null
+    if (!timingSafeEqual(p.ch, await codeHash(p.email, code))) return null
+    return p.email
+  } catch {
+    return null
+  }
+}
 ` : ''}`;
     const usersTs = dbBacked
-        ? `// Regenerated by SvGrid Studio. DB-backed user store: reads the \`auth_users\` table
-// (Drizzle) with hashed passwords. The demo users below are seeded ONCE, on the first
-// login, if the table is empty - delete the seed for production, or manage users in the DB.
-import { eq } from 'drizzle-orm'
-import { db } from './db/index'
-import { authUsers, type AuthUserRow } from './db/schema'
-import { hashPassword } from './auth'
-
-export type AppUser = AuthUserRow
-
-const SEED: Array<{ email: string; name: string; role: string; password: string }> = [
-${seedLiteral},
-]
-
-// Seed the demo users once (idempotent + concurrency-safe: the unique email index
-// rejects a racing duplicate, which we swallow). Cached per process after the first run.
-let seeding: Promise<void> | null = null
-function ensureSeeded(): Promise<void> {
-  if (!seeding) seeding = (async () => {
-    const existing = await db.select({ email: authUsers.email }).from(authUsers).limit(1)
-    if (existing.length) return
-    for (const u of SEED) {
-      try {
-        await db.insert(authUsers).values({ email: u.email, name: u.name, role: u.role, passwordHash: await hashPassword(u.password) })
-      } catch { /* unique-email race: another request seeded it first */ }
-    }
-  })()
-  return seeding
-}
-
-export async function findUser(email: string): Promise<AppUser | undefined> {
-  await ensureSeeded()
-  const e = email.trim().toLowerCase()
-  return (await db.select().from(authUsers).where(eq(authUsers.email, e))).at(0)
-}
-
-/** Public view of a user (no password hash) - for the admin list. */
-export type PublicUser = { email: string; name: string; role: string }
-export async function listUsers(): Promise<PublicUser[]> {
-  await ensureSeeded()
-  return db.select({ email: authUsers.email, name: authUsers.name, role: authUsers.role }).from(authUsers)
-}
-
-/** Create a user (hashed password). Returns undefined if the email already exists. */
-export async function createUser(input: { email: string; name: string; password: string; role: string }): Promise<AppUser | undefined> {
-  const email = input.email.trim().toLowerCase()
-  if (await findUser(email)) return undefined
-  const passwordHash = await hashPassword(input.password)
-  try {
-    await db.insert(authUsers).values({ email, name: input.name, role: input.role, passwordHash })
-  } catch {
-    return undefined // unique-email race
-  }
-  return findUser(email)
-}
-
-export async function updatePassword(email: string, newPassword: string): Promise<void> {
-  await db.update(authUsers).set({ passwordHash: await hashPassword(newPassword) }).where(eq(authUsers.email, email.trim().toLowerCase()))
-}
-export async function setUserRole(email: string, role: string): Promise<void> {
-  await db.update(authUsers).set({ role }).where(eq(authUsers.email, email.trim().toLowerCase()))
-}
-export async function deleteUser(email: string): Promise<void> {
-  await db.delete(authUsers).where(eq(authUsers.email, email.trim().toLowerCase()))
-}${twoFactor ? `
-export async function setTwoFactor(email: string, on: boolean): Promise<void> {
-  await db.update(authUsers).set({ twoFactor: on }).where(eq(authUsers.email, email.trim().toLowerCase()))
-}` : ''}
+        ? `// Regenerated by SvGrid Studio. DB-backed user store: reads the \`auth_users\` table
+// (Drizzle) with hashed passwords. The demo users below are seeded ONCE, on the first
+// login, if the table is empty - delete the seed for production, or manage users in the DB.
+import { eq } from 'drizzle-orm'
+import { db } from './db/index'
+import { authUsers, type AuthUserRow } from './db/schema'
+import { hashPassword } from './auth'
+
+export type AppUser = AuthUserRow
+
+const SEED: Array<{ email: string; name: string; role: string; password: string }> = [
+${seedLiteral},
+]
+
+// Seed the demo users once (idempotent + concurrency-safe: the unique email index
+// rejects a racing duplicate, which we swallow). Cached per process after the first run.
+let seeding: Promise<void> | null = null
+function ensureSeeded(): Promise<void> {
+  if (!seeding) seeding = (async () => {
+    const existing = await db.select({ email: authUsers.email }).from(authUsers).limit(1)
+    if (existing.length) return
+    for (const u of SEED) {
+      try {
+        await db.insert(authUsers).values({ email: u.email, name: u.name, role: u.role, passwordHash: await hashPassword(u.password) })
+      } catch { /* unique-email race: another request seeded it first */ }
+    }
+  })()
+  return seeding
+}
+
+export async function findUser(email: string): Promise<AppUser | undefined> {
+  await ensureSeeded()
+  const e = email.trim().toLowerCase()
+  return (await db.select().from(authUsers).where(eq(authUsers.email, e))).at(0)
+}
+
+/** Public view of a user (no password hash) - for the admin list. */
+export type PublicUser = { email: string; name: string; role: string }
+export async function listUsers(): Promise<PublicUser[]> {
+  await ensureSeeded()
+  return db.select({ email: authUsers.email, name: authUsers.name, role: authUsers.role }).from(authUsers)
+}
+
+/** Create a user (hashed password). Returns undefined if the email already exists. */
+export async function createUser(input: { email: string; name: string; password: string; role: string }): Promise<AppUser | undefined> {
+  const email = input.email.trim().toLowerCase()
+  if (await findUser(email)) return undefined
+  const passwordHash = await hashPassword(input.password)
+  try {
+    await db.insert(authUsers).values({ email, name: input.name, role: input.role, passwordHash })
+  } catch {
+    return undefined // unique-email race
+  }
+  return findUser(email)
+}
+
+export async function updatePassword(email: string, newPassword: string): Promise<void> {
+  await db.update(authUsers).set({ passwordHash: await hashPassword(newPassword) }).where(eq(authUsers.email, email.trim().toLowerCase()))
+}
+export async function setUserRole(email: string, role: string): Promise<void> {
+  await db.update(authUsers).set({ role }).where(eq(authUsers.email, email.trim().toLowerCase()))
+}
+export async function deleteUser(email: string): Promise<void> {
+  await db.delete(authUsers).where(eq(authUsers.email, email.trim().toLowerCase()))
+}${twoFactor ? `
+export async function setTwoFactor(email: string, on: boolean): Promise<void> {
+  await db.update(authUsers).set({ twoFactor: on }).where(eq(authUsers.email, email.trim().toLowerCase()))
+}` : ''}
 `
-        : `// Regenerated by SvGrid Studio. DEMO user store - replace with your own (a DB table,
-// an external identity provider, ...). The seed passwords below are demo defaults
-// (printed on the login page); they are HASHED (PBKDF2) at startup and never compared
-// in plaintext. Change them for anything real. Tip: turn on the Drizzle data layer and
-// this becomes a real \`auth_users\` DB table.
-import { hashPassword } from './auth'
-
-export type AppUser = { email: string; name: string; role: string; passwordHash: string }
-
-const SEED: Array<{ email: string; name: string; role: string; password: string }> = [
-${usersLiteral},
-]
-
-// Hash the seed passwords once at module load (top-level await) so the store holds
-// only PBKDF2 hashes - login verifies with verifyPassword(), never a plaintext compare.
-export const USERS: AppUser[] = await Promise.all(
-  SEED.map(async (u) => ({ email: u.email, name: u.name, role: u.role, passwordHash: await hashPassword(u.password) })),
-)
-
-export function findUser(email: string): AppUser | undefined {
-  const e = email.trim().toLowerCase()
-  return USERS.find((u) => u.email.toLowerCase() === e)
-}
+        : `// Regenerated by SvGrid Studio. DEMO user store - replace with your own (a DB table,
+// an external identity provider, ...). The seed passwords below are demo defaults
+// (printed on the login page); they are HASHED (PBKDF2) at startup and never compared
+// in plaintext. Change them for anything real. Tip: turn on the Drizzle data layer and
+// this becomes a real \`auth_users\` DB table.
+import { hashPassword } from './auth'
+
+export type AppUser = { email: string; name: string; role: string; passwordHash: string }
+
+const SEED: Array<{ email: string; name: string; role: string; password: string }> = [
+${usersLiteral},
+]
+
+// Hash the seed passwords once at module load (top-level await) so the store holds
+// only PBKDF2 hashes - login verifies with verifyPassword(), never a plaintext compare.
+export const USERS: AppUser[] = await Promise.all(
+  SEED.map(async (u) => ({ email: u.email, name: u.name, role: u.role, passwordHash: await hashPassword(u.password) })),
+)
+
+export function findUser(email: string): AppUser | undefined {
+  const e = email.trim().toLowerCase()
+  return USERS.find((u) => u.email.toLowerCase() === e)
+}
 `;
-    const hooksTs = `import type { Handle } from '@sveltejs/kit'
-import { SESSION_COOKIE, readSession } from '../lib/server/auth'
-
-// Resolve the signed session on every request into event.locals - the RBAC layer
-// (getServerRole / authorize) and the app shell read event.locals.role from here.
-export const handle: Handle = async ({ event, resolve }) => {
-  const user = await readSession(event.cookies.get(SESSION_COOKIE))
-  event.locals.user = user ?? undefined
-  event.locals.role = user?.role${tenantColumn ? `
-  // Multi-tenancy: the tenant travels on the session, so every scoped API route
-  // reads it from here rather than trusting anything the client sends.
-  event.locals.${tenantColumn} = (user as { ${tenantColumn}?: string } | null | undefined)?.${tenantColumn}` : ''}
-  return resolve(event)
-}
+    const hooksTs = `import type { Handle } from '@sveltejs/kit'
+import { SESSION_COOKIE, readSession } from '../lib/server/auth'
+
+// Resolve the signed session on every request into event.locals - the RBAC layer
+// (getServerRole / authorize) and the app shell read event.locals.role from here.
+export const handle: Handle = async ({ event, resolve }) => {
+  const user = await readSession(event.cookies.get(SESSION_COOKIE))
+  event.locals.user = user ?? undefined
+  event.locals.role = user?.role${tenantColumn ? `
+  // Multi-tenancy: the tenant travels on the session, so every scoped API route
+  // reads it from here rather than trusting anything the client sends.
+  event.locals.${tenantColumn} = (user as { ${tenantColumn}?: string } | null | undefined)?.${tenantColumn}` : ''}
+  return resolve(event)
+}
 `;
-    const localsDts = `import type { SessionUser } from '../lib/server/auth'
-
-declare global {
-  namespace App {
-    interface Locals {
-      user?: SessionUser
-      role?: string
-    }
-  }
-}
-
-export {}
+    const localsDts = `import type { SessionUser } from '../lib/server/auth'
+
+declare global {
+  namespace App {
+    interface Locals {
+      user?: SessionUser
+      role?: string
+    }
+  }
+}
+
+export {}
 `;
     // Routes that render bare (no app shell) and don't require a session.
     const publicRoutes = ['/login', ...(twoFactor ? ['/login/verify'] : []), ...(register ? ['/register', '/forgot-password', '/reset-password'] : [])];
-    const layoutServerTs = `import type { LayoutServerLoad } from './$types'
-${protect ? `import { redirect } from '@sveltejs/kit'\n\nconst PUBLIC = new Set(${JSON.stringify(publicRoutes)})\n` : ''}
-// Expose the signed-in user + role to every page (read as \`data.user\` / \`data.role\`,
-// or \`page.data\`).${protect ? ' Unauthenticated visitors are sent to /login.' : ''}
-export const load: LayoutServerLoad = async ({ locals${protect ? ', url' : ''} }) => {
-${protect ? "  if (!locals.user && !PUBLIC.has(url.pathname)) throw redirect(302, '/login?redirectTo=' + encodeURIComponent(url.pathname))\n" : ''}  return { user: locals.user ?? null, role: locals.role ?? null }
-}
+    const layoutServerTs = `import type { LayoutServerLoad } from './$types'
+${protect ? `import { redirect } from '@sveltejs/kit'\n\nconst PUBLIC = new Set(${JSON.stringify(publicRoutes)})\n` : ''}
+// Expose the signed-in user + role to every page (read as \`data.user\` / \`data.role\`,
+// or \`page.data\`).${protect ? ' Unauthenticated visitors are sent to /login.' : ''}
+export const load: LayoutServerLoad = async ({ locals${protect ? ', url' : ''} }) => {
+${protect ? "  if (!locals.user && !PUBLIC.has(url.pathname)) throw redirect(302, '/login?redirectTo=' + encodeURIComponent(url.pathname))\n" : ''}  return { user: locals.user ?? null, role: locals.role ?? null }
+}
 `;
     const loginCheck = dbBacked
-        ? `const user = await findUser(email)
-    // DB-backed store: verify against the stored PBKDF2 hash.
+        ? `const user = await findUser(email)
+    // DB-backed store: verify against the stored PBKDF2 hash.
     if (!user || !(await verifyPassword(password, user.passwordHash))) return fail(401, { email, error: 'Invalid email or password.' })`
-        : `const user = findUser(email)
-    // Verify against the PBKDF2 hash of the seed (users store hashes it at startup).
+        : `const user = findUser(email)
+    // Verify against the PBKDF2 hash of the seed (users store hashes it at startup).
     if (!user || !(await verifyPassword(password, user.passwordHash))) return fail(401, { email, error: 'Invalid email or password.' })`;
     // 2FA (email code): after the password check, email a code + park a pending token,
     // then send the user to /login/verify instead of issuing the session immediately.
-    const twoFactorBranch = twoFactor ? `
-    if (user.twoFactor) {
-      const code = otpCode()
-      await sendEmail(user.email, 'Your verification code', '<p>Your sign-in code is <strong>' + code + '</strong>. It expires in 10 minutes.</p>')
-      cookies.set(TFA_COOKIE, await signChallenge(user.email, code), { path: '/', httpOnly: true, sameSite: 'lax', secure: url.hostname !== 'localhost' && url.hostname !== '127.0.0.1', maxAge: 600 })
-      const rt = url.searchParams.get('redirectTo')
-      throw redirect(302, '/login/verify' + (rt ? '?redirectTo=' + encodeURIComponent(rt) : ''))
+    const twoFactorBranch = twoFactor ? `
+    if (user.twoFactor) {
+      const code = otpCode()
+      await sendEmail(user.email, 'Your verification code', '<p>Your sign-in code is <strong>' + code + '</strong>. It expires in 10 minutes.</p>')
+      cookies.set(TFA_COOKIE, await signChallenge(user.email, code), { path: '/', httpOnly: true, sameSite: 'lax', secure: url.hostname !== 'localhost' && url.hostname !== '127.0.0.1', maxAge: 600 })
+      const rt = url.searchParams.get('redirectTo')
+      throw redirect(302, '/login/verify' + (rt ? '?redirectTo=' + encodeURIComponent(rt) : ''))
     }` : '';
     const loginImports = twoFactor
         ? "import { SESSION_COOKIE, SESSION_MAX_AGE, TFA_COOKIE, signSession, verifyPassword, otpCode, signChallenge } from '../lib/server/auth'\nimport { findUser } from '$lib/server/users'\nimport { sendEmail } from '$lib/server/email'"
         : `import { SESSION_COOKIE, SESSION_MAX_AGE, signSession, verifyPassword } from '../lib/server/auth'\nimport { findUser } from '$lib/server/users'`;
-    const loginServerTs = `import { fail, redirect } from '@sveltejs/kit'
-import type { Actions, PageServerLoad } from './$types'
-${loginImports}
-
-export const load: PageServerLoad = async ({ locals }) => {
-  if (locals.user) throw redirect(302, '/')
-  return {}
-}
-
-export const actions: Actions = {
-  default: async ({ request, cookies, url }) => {
-    const form = await request.formData()
-    const email = String(form.get('email') ?? '')
-    const password = String(form.get('password') ?? '')
-    ${loginCheck}${twoFactorBranch}
-    const token = await signSession({ email: user.email, name: user.name, role: user.role })
-    cookies.set(SESSION_COOKIE, token, {
-      path: '/', httpOnly: true, sameSite: 'lax',
-      secure: url.hostname !== 'localhost' && url.hostname !== '127.0.0.1',
-      maxAge: SESSION_MAX_AGE,
-    })
-    throw redirect(302, url.searchParams.get('redirectTo') || '/')
-  },
-}
+    const loginServerTs = `import { fail, redirect } from '@sveltejs/kit'
+import type { Actions, PageServerLoad } from './$types'
+${loginImports}
+
+export const load: PageServerLoad = async ({ locals }) => {
+  if (locals.user) throw redirect(302, '/')
+  return {}
+}
+
+export const actions: Actions = {
+  default: async ({ request, cookies, url }) => {
+    const form = await request.formData()
+    const email = String(form.get('email') ?? '')
+    const password = String(form.get('password') ?? '')
+    ${loginCheck}${twoFactorBranch}
+    const token = await signSession({ email: user.email, name: user.name, role: user.role })
+    cookies.set(SESSION_COOKIE, token, {
+      path: '/', httpOnly: true, sameSite: 'lax',
+      secure: url.hostname !== 'localhost' && url.hostname !== '127.0.0.1',
+      maxAge: SESSION_MAX_AGE,
+    })
+    throw redirect(302, url.searchParams.get('redirectTo') || '/')
+  },
+}
 `;
     // Shared full-screen auth-page styles (login / register / forgot / reset).
-    const authStyle = `<style>
-  .auth { display: grid; place-items: center; min-height: 100vh; padding: 24px; background: var(--sg-bg-subtle, #f8fafc); }
-  .auth__card { width: 100%; max-width: 360px; display: flex; flex-direction: column; gap: 12px; padding: 28px; background: var(--sg-bg, #fff); border: 1px solid var(--sg-border, #e6e8ec); border-radius: 16px; box-shadow: 0 12px 40px -12px rgba(15, 23, 42, 0.18); }
-  .auth__title { margin: 0; font-size: 22px; font-weight: 720; letter-spacing: -0.02em; }
-  .auth__sub { margin: -6px 0 6px; font-size: 13.5px; color: var(--sg-muted, #64748b); }
-  .auth__field { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; font-weight: 600; color: var(--sg-muted, #64748b); }
-  .auth__field input { padding: 9px 11px; font: inherit; font-size: 14px; font-weight: 400; color: var(--sg-fg, #0f172a); background: var(--sg-input-bg, #fff); border: 1px solid var(--sg-input-border, #e6e8ec); border-radius: 9px; }
-  .auth__field input: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); }
-  .auth__btn { margin-top: 4px; padding: 10px; font: inherit; font-size: 14px; font-weight: 640; color: var(--sg-on-accent, #fff); background: var(--sg-accent, #6366f1); border: none; border-radius: 9px; cursor: pointer; }
-  .auth__btn:hover { filter: brightness(1.06); }
-  .auth__err { margin: 0; padding: 8px 11px; font-size: 13px; color: var(--sg-danger, #b3261e); background: color-mix(in srgb, var(--sg-danger, #dc2626) 9%, var(--sg-bg, #fff)); border: 1px solid color-mix(in srgb, var(--sg-danger, #dc2626) 35%, var(--sg-border, #e6e8ec)); border-radius: 9px; }
-  .auth__ok { margin: 0; padding: 8px 11px; font-size: 13px; color: #166534; background: color-mix(in srgb, #16a34a 9%, var(--sg-bg, #fff)); border: 1px solid color-mix(in srgb, #16a34a 35%, var(--sg-border, #e6e8ec)); border-radius: 9px; }
-  .auth__hint { margin: 6px 0 0; font-size: 12px; color: var(--sg-muted, #94a3b8); text-align: center; }
-  .auth__hint code { background: color-mix(in srgb, var(--sg-fg, #0f172a) 6%, transparent); padding: 1px 5px; border-radius: 5px; }
-  .auth__links { margin: 2px 0 0; display: flex; justify-content: space-between; font-size: 12.5px; }
-  .auth__links a { color: var(--sg-accent, #6366f1); text-decoration: none; font-weight: 600; }
-  .auth__or { display: flex; align-items: center; gap: 10px; margin: 2px 0; color: var(--sg-muted, #94a3b8); font-size: 12px; }
-  .auth__or::before, .auth__or::after { content: ''; flex: 1; height: 1px; background: var(--sg-border, #e6e8ec); }
-  .auth__oauth { display: flex; flex-direction: column; gap: 8px; }
-  .auth__oauth-btn { display: block; text-align: center; padding: 9px; font-size: 13.5px; font-weight: 600; color: var(--sg-fg, #0f172a); background: var(--sg-bg, #fff); border: 1px solid var(--sg-border, #e6e8ec); border-radius: 9px; text-decoration: none; }
-  .auth__oauth-btn:hover { background: color-mix(in srgb, var(--sg-fg, #0f172a) 4%, var(--sg-bg, #fff)); }
+    const authStyle = `<style>
+  .auth { display: grid; place-items: center; min-height: 100vh; padding: 24px; background: var(--sg-bg-subtle, #f8fafc); }
+  .auth__card { width: 100%; max-width: 360px; display: flex; flex-direction: column; gap: 12px; padding: 28px; background: var(--sg-bg, #fff); border: 1px solid var(--sg-border, #e6e8ec); border-radius: 16px; box-shadow: 0 12px 40px -12px rgba(15, 23, 42, 0.18); }
+  .auth__title { margin: 0; font-size: 22px; font-weight: 720; letter-spacing: -0.02em; }
+  .auth__sub { margin: -6px 0 6px; font-size: 13.5px; color: var(--sg-muted, #64748b); }
+  .auth__field { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; font-weight: 600; color: var(--sg-muted, #64748b); }
+  .auth__field input { padding: 9px 11px; font: inherit; font-size: 14px; font-weight: 400; color: var(--sg-fg, #0f172a); background: var(--sg-input-bg, #fff); border: 1px solid var(--sg-input-border, #e6e8ec); border-radius: 9px; }
+  .auth__field input: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); }
+  .auth__btn { margin-top: 4px; padding: 10px; font: inherit; font-size: 14px; font-weight: 640; color: var(--sg-on-accent, #fff); background: var(--sg-accent, #6366f1); border: none; border-radius: 9px; cursor: pointer; }
+  .auth__btn:hover { filter: brightness(1.06); }
+  .auth__err { margin: 0; padding: 8px 11px; font-size: 13px; color: var(--sg-danger, #b3261e); background: color-mix(in srgb, var(--sg-danger, #dc2626) 9%, var(--sg-bg, #fff)); border: 1px solid color-mix(in srgb, var(--sg-danger, #dc2626) 35%, var(--sg-border, #e6e8ec)); border-radius: 9px; }
+  .auth__ok { margin: 0; padding: 8px 11px; font-size: 13px; color: #166534; background: color-mix(in srgb, #16a34a 9%, var(--sg-bg, #fff)); border: 1px solid color-mix(in srgb, #16a34a 35%, var(--sg-border, #e6e8ec)); border-radius: 9px; }
+  .auth__hint { margin: 6px 0 0; font-size: 12px; color: var(--sg-muted, #94a3b8); text-align: center; }
+  .auth__hint code { background: color-mix(in srgb, var(--sg-fg, #0f172a) 6%, transparent); padding: 1px 5px; border-radius: 5px; }
+  .auth__links { margin: 2px 0 0; display: flex; justify-content: space-between; font-size: 12.5px; }
+  .auth__links a { color: var(--sg-accent, #6366f1); text-decoration: none; font-weight: 600; }
+  .auth__or { display: flex; align-items: center; gap: 10px; margin: 2px 0; color: var(--sg-muted, #94a3b8); font-size: 12px; }
+  .auth__or::before, .auth__or::after { content: ''; flex: 1; height: 1px; background: var(--sg-border, #e6e8ec); }
+  .auth__oauth { display: flex; flex-direction: column; gap: 8px; }
+  .auth__oauth-btn { display: block; text-align: center; padding: 9px; font-size: 13.5px; font-weight: 600; color: var(--sg-fg, #0f172a); background: var(--sg-bg, #fff); border: 1px solid var(--sg-border, #e6e8ec); border-radius: 9px; text-decoration: none; }
+  .auth__oauth-btn:hover { background: color-mix(in srgb, var(--sg-fg, #0f172a) 4%, var(--sg-bg, #fff)); }
 </style>`;
-    const loginPage = `<script lang="ts">
-  import { enhance } from '$app/forms'
-  let { form } = $props()
-</script>
-
-<div class="auth">
-  <form method="POST" use:enhance class="auth__card">
-    <h1 class="auth__title">Sign in</h1>
-    <p class="auth__sub">${jsStrHtml(project.title || 'Welcome back')}</p>
-    {#if form?.error}<p class="auth__err" role="alert">{form.error}</p>{/if}
-    <label class="auth__field"><span>Email</span>
-      <input name="email" type="email" autocomplete="username" value={form?.email ?? ''} required />
-    </label>
-    <label class="auth__field"><span>Password</span>
-      <input name="password" type="password" autocomplete="current-password" required />
-    </label>
-    <button class="auth__btn" type="submit">Sign in</button>${oauthProviders.length ? `
-    <div class="auth__or"><span>or</span></div>
-    <div class="auth__oauth">
-      ${oauthProviders.map((p) => `<a class="auth__oauth-btn" href="/auth/${p}">Continue with ${{ github: 'GitHub', google: 'Google', oidc: 'SSO' }[p]}</a>`).join('\n      ')}
-    </div>` : ''}
-    <p class="auth__hint">Demo account: <code>${demo.email}</code> / <code>${demo.password}</code></p>${register ? `
-    <p class="auth__links"><a href="/forgot-password">Forgot password?</a><a href="/register">Create account</a></p>` : ''}
-  </form>
-</div>
-
-${authStyle}
+    const loginPage = `<script lang="ts">
+  import { enhance } from '$app/forms'
+  let { form } = $props()
+</script>
+
+<div class="auth">
+  <form method="POST" use:enhance class="auth__card">
+    <h1 class="auth__title">Sign in</h1>
+    <p class="auth__sub">${jsStrHtml(project.title || 'Welcome back')}</p>
+    {#if form?.error}<p class="auth__err" role="alert">{form.error}</p>{/if}
+    <label class="auth__field"><span>Email</span>
+      <input name="email" type="email" autocomplete="username" value={form?.email ?? ''} required />
+    </label>
+    <label class="auth__field"><span>Password</span>
+      <input name="password" type="password" autocomplete="current-password" required />
+    </label>
+    <button class="auth__btn" type="submit">Sign in</button>${oauthProviders.length ? `
+    <div class="auth__or"><span>or</span></div>
+    <div class="auth__oauth">
+      ${oauthProviders.map((p) => `<a class="auth__oauth-btn" href="/auth/${p}">Continue with ${{ github: 'GitHub', google: 'Google', oidc: 'SSO' }[p]}</a>`).join('\n      ')}
+    </div>` : ''}
+    <p class="auth__hint">Demo account: <code>${demo.email}</code> / <code>${demo.password}</code></p>${register ? `
+    <p class="auth__links"><a href="/forgot-password">Forgot password?</a><a href="/register">Create account</a></p>` : ''}
+  </form>
+</div>
+
+${authStyle}
 `;
-    const logoutServerTs = `import { redirect } from '@sveltejs/kit'
-import type { Actions } from './$types'
-import { SESSION_COOKIE } from '../lib/server/auth'
-
-export const actions: Actions = {
-  default: async ({ cookies }) => {
-    cookies.delete(SESSION_COOKIE, { path: '/' })
-    throw redirect(302, '/login')
-  },
-}
+    const logoutServerTs = `import { redirect } from '@sveltejs/kit'
+import type { Actions } from './$types'
+import { SESSION_COOKIE } from '../lib/server/auth'
+
+export const actions: Actions = {
+  default: async ({ cookies }) => {
+    cookies.delete(SESSION_COOKIE, { path: '/' })
+    throw redirect(302, '/login')
+  },
+}
 `;
     // --- change password (any signed-in user; DB-backed only) ---
-    const accountServerTs = `import { fail, redirect } from '@sveltejs/kit'
-import type { Actions, PageServerLoad } from './$types'
-import { findUser, updatePassword${twoFactor ? ', setTwoFactor' : ''} } from '$lib/server/users'
-import { verifyPassword } from '../lib/server/auth'
-
-export const load: PageServerLoad = async ({ locals }) => {
-  if (!locals.user) throw redirect(302, '/login')
-${twoFactor ? `  const me = await findUser(locals.user.email)
-  return { user: locals.user, twoFactor: me?.twoFactor ?? false }` : '  return { user: locals.user }'}
-}
-
-export const actions: Actions = {
-  default: async ({ request, locals }) => {
-    if (!locals.user) throw redirect(302, '/login')
-    const form = await request.formData()
-    const current = String(form.get('current') ?? '')
-    const next = String(form.get('next') ?? '')
-    if (next.length < 8) return fail(400, { error: 'New password must be at least 8 characters.' })
-    const user = await findUser(locals.user.email)
-    if (!user || !(await verifyPassword(current, user.passwordHash))) return fail(401, { error: 'Current password is incorrect.' })
-    await updatePassword(user.email, next)
-    return { ok: true }
-  },${twoFactor ? `
-  tfa: async ({ request, locals }) => {
-    if (!locals.user) throw redirect(302, '/login')
-    const on = String((await request.formData()).get('on') ?? '') === 'true'
-    await setTwoFactor(locals.user.email, on)
-    return { tfa: on }
-  },` : ''}
-}
+    const accountServerTs = `import { fail, redirect } from '@sveltejs/kit'
+import type { Actions, PageServerLoad } from './$types'
+import { findUser, updatePassword${twoFactor ? ', setTwoFactor' : ''} } from '$lib/server/users'
+import { verifyPassword } from '../lib/server/auth'
+
+export const load: PageServerLoad = async ({ locals }) => {
+  if (!locals.user) throw redirect(302, '/login')
+${twoFactor ? `  const me = await findUser(locals.user.email)
+  return { user: locals.user, twoFactor: me?.twoFactor ?? false }` : '  return { user: locals.user }'}
+}
+
+export const actions: Actions = {
+  default: async ({ request, locals }) => {
+    if (!locals.user) throw redirect(302, '/login')
+    const form = await request.formData()
+    const current = String(form.get('current') ?? '')
+    const next = String(form.get('next') ?? '')
+    if (next.length < 8) return fail(400, { error: 'New password must be at least 8 characters.' })
+    const user = await findUser(locals.user.email)
+    if (!user || !(await verifyPassword(current, user.passwordHash))) return fail(401, { error: 'Current password is incorrect.' })
+    await updatePassword(user.email, next)
+    return { ok: true }
+  },${twoFactor ? `
+  tfa: async ({ request, locals }) => {
+    if (!locals.user) throw redirect(302, '/login')
+    const on = String((await request.formData()).get('on') ?? '') === 'true'
+    await setTwoFactor(locals.user.email, on)
+    return { tfa: on }
+  },` : ''}
+}
 `;
-    const accountPage = `<script lang="ts">
-  import { enhance } from '$app/forms'
-  let { data, form } = $props()
-</script>
-
-<h1 class="st__title">Account</h1>
-<div class="acct">
-  <p class="st__sub">Signed in as <strong>{data.user.name}</strong> ({data.user.email}).</p>
-  <form method="POST" use:enhance class="acct__form">
-    <h2 class="acct__h">Change password</h2>
-    {#if form?.ok}<p class="acct__ok">Password updated.</p>{/if}
-    {#if form?.error}<p class="acct__err" role="alert">{form.error}</p>{/if}
-    <label class="acct__field"><span>Current password</span><input name="current" type="password" autocomplete="current-password" required /></label>
-    <label class="acct__field"><span>New password</span><input name="next" type="password" autocomplete="new-password" minlength="8" required /></label>
-    <button class="acct__btn" type="submit">Update password</button>
-  </form>${twoFactor ? `
-  <form method="POST" action="?/tfa" use:enhance class="acct__form">
-    <h2 class="acct__h">Two-factor authentication</h2>
-    <p class="st-hint">{data.twoFactor ? 'Enabled - a code is emailed to you at sign-in.' : 'Add an emailed one-time code at sign-in.'}</p>
-    <input type="hidden" name="on" value={data.twoFactor ? 'false' : 'true'} />
-    <button class="acct__btn" type="submit">{data.twoFactor ? 'Disable' : 'Enable'} two-factor</button>
-  </form>` : ''}
-</div>
-
-<style>
-  .acct { max-width: 420px; margin-top: 12px; }
-  .acct__form { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; padding: 18px; border: 1px solid var(--sg-border, #e6e8ec); border-radius: 12px; background: var(--sg-bg, #fff); }
-  .acct__h { margin: 0; font-size: 15px; }
-  .acct__field { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; font-weight: 600; color: var(--sg-muted, #64748b); }
-  .acct__field input { padding: 8px 10px; font: inherit; font-size: 14px; font-weight: 400; border: 1px solid var(--sg-input-border, #e6e8ec); border-radius: 8px; background: var(--sg-input-bg, #fff); color: var(--sg-fg, #0f172a); }
-  .acct__btn { align-self: start; margin-top: 4px; padding: 8px 16px; font: inherit; font-size: 13.5px; font-weight: 620; color: var(--sg-on-accent, #fff); background: var(--sg-accent, #6366f1); border: none; border-radius: 8px; cursor: pointer; }
-  .acct__ok { margin: 0; color: #166534; font-size: 13px; }
-  .acct__err { margin: 0; color: var(--sg-danger, #b3261e); font-size: 13px; }
-</style>
+    const accountPage = `<script lang="ts">
+  import { enhance } from '$app/forms'
+  let { data, form } = $props()
+</script>
+
+<h1 class="st__title">Account</h1>
+<div class="acct">
+  <p class="st__sub">Signed in as <strong>{data.user.name}</strong> ({data.user.email}).</p>
+  <form method="POST" use:enhance class="acct__form">
+    <h2 class="acct__h">Change password</h2>
+    {#if form?.ok}<p class="acct__ok">Password updated.</p>{/if}
+    {#if form?.error}<p class="acct__err" role="alert">{form.error}</p>{/if}
+    <label class="acct__field"><span>Current password</span><input name="current" type="password" autocomplete="current-password" required /></label>
+    <label class="acct__field"><span>New password</span><input name="next" type="password" autocomplete="new-password" minlength="8" required /></label>
+    <button class="acct__btn" type="submit">Update password</button>
+  </form>${twoFactor ? `
+  <form method="POST" action="?/tfa" use:enhance class="acct__form">
+    <h2 class="acct__h">Two-factor authentication</h2>
+    <p class="st-hint">{data.twoFactor ? 'Enabled - a code is emailed to you at sign-in.' : 'Add an emailed one-time code at sign-in.'}</p>
+    <input type="hidden" name="on" value={data.twoFactor ? 'false' : 'true'} />
+    <button class="acct__btn" type="submit">{data.twoFactor ? 'Disable' : 'Enable'} two-factor</button>
+  </form>` : ''}
+</div>
+
+<style>
+  .acct { max-width: 420px; margin-top: 12px; }
+  .acct__form { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; padding: 18px; border: 1px solid var(--sg-border, #e6e8ec); border-radius: 12px; background: var(--sg-bg, #fff); }
+  .acct__h { margin: 0; font-size: 15px; }
+  .acct__field { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; font-weight: 600; color: var(--sg-muted, #64748b); }
+  .acct__field input { padding: 8px 10px; font: inherit; font-size: 14px; font-weight: 400; border: 1px solid var(--sg-input-border, #e6e8ec); border-radius: 8px; background: var(--sg-input-bg, #fff); color: var(--sg-fg, #0f172a); }
+  .acct__btn { align-self: start; margin-top: 4px; padding: 8px 16px; font: inherit; font-size: 13.5px; font-weight: 620; color: var(--sg-on-accent, #fff); background: var(--sg-accent, #6366f1); border: none; border-radius: 8px; cursor: pointer; }
+  .acct__ok { margin: 0; color: #166534; font-size: 13px; }
+  .acct__err { margin: 0; color: var(--sg-danger, #b3261e); font-size: 13px; }
+</style>
 `;
     // --- self-service register + password recovery (register flag) ---
-    const registerServerTs = `import { fail, redirect } from '@sveltejs/kit'
-import type { Actions, PageServerLoad } from './$types'
-import { createUser } from '../lib/server/users'
-import { SESSION_COOKIE, SESSION_MAX_AGE, signSession } from '../lib/server/auth'
-
-export const load: PageServerLoad = async ({ locals }) => {
-  if (locals.user) throw redirect(302, '/')
-  return {}
-}
-
-export const actions: Actions = {
-  default: async ({ request, cookies, url }) => {
-    const form = await request.formData()
-    const email = String(form.get('email') ?? '')
-    const name = String(form.get('name') ?? '')
-    const password = String(form.get('password') ?? '')
-    if (!email.trim() || !name.trim() || password.length < 8) return fail(400, { email, name, error: 'Enter a name, email, and a password of at least 8 characters.' })
-    const user = await createUser({ email, name, password, role: ${JSON.stringify(registerRole)} })
-    if (!user) return fail(409, { email, name, error: 'That email is already registered.' })
-    const token = await signSession({ email: user.email, name: user.name, role: user.role })
-    cookies.set(SESSION_COOKIE, token, { path: '/', httpOnly: true, sameSite: 'lax', secure: url.hostname !== 'localhost' && url.hostname !== '127.0.0.1', maxAge: SESSION_MAX_AGE })
-    throw redirect(302, '/')
-  },
-}
+    const registerServerTs = `import { fail, redirect } from '@sveltejs/kit'
+import type { Actions, PageServerLoad } from './$types'
+import { createUser } from '../lib/server/users'
+import { SESSION_COOKIE, SESSION_MAX_AGE, signSession } from '../lib/server/auth'
+
+export const load: PageServerLoad = async ({ locals }) => {
+  if (locals.user) throw redirect(302, '/')
+  return {}
+}
+
+export const actions: Actions = {
+  default: async ({ request, cookies, url }) => {
+    const form = await request.formData()
+    const email = String(form.get('email') ?? '')
+    const name = String(form.get('name') ?? '')
+    const password = String(form.get('password') ?? '')
+    if (!email.trim() || !name.trim() || password.length < 8) return fail(400, { email, name, error: 'Enter a name, email, and a password of at least 8 characters.' })
+    const user = await createUser({ email, name, password, role: ${JSON.stringify(registerRole)} })
+    if (!user) return fail(409, { email, name, error: 'That email is already registered.' })
+    const token = await signSession({ email: user.email, name: user.name, role: user.role })
+    cookies.set(SESSION_COOKIE, token, { path: '/', httpOnly: true, sameSite: 'lax', secure: url.hostname !== 'localhost' && url.hostname !== '127.0.0.1', maxAge: SESSION_MAX_AGE })
+    throw redirect(302, '/')
+  },
+}
 `;
-    const registerPage = `<script lang="ts">
-  import { enhance } from '$app/forms'
-  let { form } = $props()
-</script>
-
-<div class="auth">
-  <form method="POST" use:enhance class="auth__card">
-    <h1 class="auth__title">Create account</h1>
-    <p class="auth__sub">${jsStrHtml(project.title || '')}</p>
-    {#if form?.error}<p class="auth__err" role="alert">{form.error}</p>{/if}
-    <label class="auth__field"><span>Name</span><input name="name" autocomplete="name" value={form?.name ?? ''} required /></label>
-    <label class="auth__field"><span>Email</span><input name="email" type="email" autocomplete="username" value={form?.email ?? ''} required /></label>
-    <label class="auth__field"><span>Password</span><input name="password" type="password" autocomplete="new-password" minlength="8" required /></label>
-    <button class="auth__btn" type="submit">Create account</button>
-    <p class="auth__links"><a href="/login">Have an account? Sign in</a></p>
-  </form>
-</div>
-
-${authStyle}
+    const registerPage = `<script lang="ts">
+  import { enhance } from '$app/forms'
+  let { form } = $props()
+</script>
+
+<div class="auth">
+  <form method="POST" use:enhance class="auth__card">
+    <h1 class="auth__title">Create account</h1>
+    <p class="auth__sub">${jsStrHtml(project.title || '')}</p>
+    {#if form?.error}<p class="auth__err" role="alert">{form.error}</p>{/if}
+    <label class="auth__field"><span>Name</span><input name="name" autocomplete="name" value={form?.name ?? ''} required /></label>
+    <label class="auth__field"><span>Email</span><input name="email" type="email" autocomplete="username" value={form?.email ?? ''} required /></label>
+    <label class="auth__field"><span>Password</span><input name="password" type="password" autocomplete="new-password" minlength="8" required /></label>
+    <button class="auth__btn" type="submit">Create account</button>
+    <p class="auth__links"><a href="/login">Have an account? Sign in</a></p>
+  </form>
+</div>
+
+${authStyle}
 `;
     const forgotSend = emailReal
-        ? `if (user) {
-      const link = url.origin + '/reset-password?token=' + encodeURIComponent(await signReset(user.email))
-      await sendEmail(user.email, 'Reset your password', '<p>Reset your password with the link below (expires in 30 minutes):</p><p><a href="' + link + '">' + link + '</a></p>')
+        ? `if (user) {
+      const link = url.origin + '/reset-password?token=' + encodeURIComponent(await signReset(user.email))
+      await sendEmail(user.email, 'Reset your password', '<p>Reset your password with the link below (expires in 30 minutes):</p><p><a href="' + link + '">' + link + '</a></p>')
     }`
         : `if (user) await sendResetEmail(user.email, url.origin + '/reset-password?token=' + encodeURIComponent(await signReset(user.email)))`;
-    const forgotServerTs = `import type { Actions } from './$types'
-import { findUser } from '../lib/server/users'
-import { signReset${emailReal ? '' : ', sendResetEmail'} } from '$lib/server/auth'${emailReal ? "\nimport { sendEmail } from '$lib/server/email'" : ''}
-
-export const actions: Actions = {
-  default: async ({ request, url }) => {
-    const email = String((await request.formData()).get('email') ?? '').trim().toLowerCase()
-    const user = await findUser(email)
-    // Respond identically whether or not the account exists (no account enumeration).
-    ${forgotSend}
-    return { sent: true }
-  },
-}
+    const forgotServerTs = `import type { Actions } from './$types'
+import { findUser } from '../lib/server/users'
+import { signReset${emailReal ? '' : ', sendResetEmail'} } from '$lib/server/auth'${emailReal ? "\nimport { sendEmail } from '$lib/server/email'" : ''}
+
+export const actions: Actions = {
+  default: async ({ request, url }) => {
+    const email = String((await request.formData()).get('email') ?? '').trim().toLowerCase()
+    const user = await findUser(email)
+    // Respond identically whether or not the account exists (no account enumeration).
+    ${forgotSend}
+    return { sent: true }
+  },
+}
 `;
-    const forgotPage = `<script lang="ts">
-  import { enhance } from '$app/forms'
-  let { form } = $props()
-</script>
-
-<div class="auth">
-  <form method="POST" use:enhance class="auth__card">
-    <h1 class="auth__title">Reset password</h1>
-    <p class="auth__sub">We'll email you a reset link.</p>
-    {#if form?.sent}<p class="auth__ok">If that account exists, a reset link is on its way. (Dev: the link is logged to the server console.)</p>{/if}
-    <label class="auth__field"><span>Email</span><input name="email" type="email" autocomplete="username" required /></label>
-    <button class="auth__btn" type="submit">Send reset link</button>
-    <p class="auth__links"><a href="/login">Back to sign in</a></p>
-  </form>
-</div>
-
-${authStyle}
+    const forgotPage = `<script lang="ts">
+  import { enhance } from '$app/forms'
+  let { form } = $props()
+</script>
+
+<div class="auth">
+  <form method="POST" use:enhance class="auth__card">
+    <h1 class="auth__title">Reset password</h1>
+    <p class="auth__sub">We'll email you a reset link.</p>
+    {#if form?.sent}<p class="auth__ok">If that account exists, a reset link is on its way. (Dev: the link is logged to the server console.)</p>{/if}
+    <label class="auth__field"><span>Email</span><input name="email" type="email" autocomplete="username" required /></label>
+    <button class="auth__btn" type="submit">Send reset link</button>
+    <p class="auth__links"><a href="/login">Back to sign in</a></p>
+  </form>
+</div>
+
+${authStyle}
 `;
-    const resetServerTs = `import { fail, redirect } from '@sveltejs/kit'
-import type { Actions, PageServerLoad } from './$types'
-import { readReset } from '../lib/server/auth'
-import { updatePassword } from '../lib/server/users'
-
-export const load: PageServerLoad = async ({ url }) => {
-  return { valid: !!(await readReset(url.searchParams.get('token') ?? undefined)) }
-}
-
-export const actions: Actions = {
-  default: async ({ request, url }) => {
-    const email = await readReset(url.searchParams.get('token') ?? undefined)
-    if (!email) return fail(400, { error: 'This reset link is invalid or has expired.' })
-    const next = String((await request.formData()).get('password') ?? '')
-    if (next.length < 8) return fail(400, { error: 'Password must be at least 8 characters.' })
-    await updatePassword(email, next)
-    throw redirect(302, '/login')
-  },
-}
+    const resetServerTs = `import { fail, redirect } from '@sveltejs/kit'
+import type { Actions, PageServerLoad } from './$types'
+import { readReset } from '../lib/server/auth'
+import { updatePassword } from '../lib/server/users'
+
+export const load: PageServerLoad = async ({ url }) => {
+  return { valid: !!(await readReset(url.searchParams.get('token') ?? undefined)) }
+}
+
+export const actions: Actions = {
+  default: async ({ request, url }) => {
+    const email = await readReset(url.searchParams.get('token') ?? undefined)
+    if (!email) return fail(400, { error: 'This reset link is invalid or has expired.' })
+    const next = String((await request.formData()).get('password') ?? '')
+    if (next.length < 8) return fail(400, { error: 'Password must be at least 8 characters.' })
+    await updatePassword(email, next)
+    throw redirect(302, '/login')
+  },
+}
 `;
-    const resetPage = `<script lang="ts">
-  import { enhance } from '$app/forms'
-  let { data, form } = $props()
-</script>
-
-<div class="auth">
-  <form method="POST" use:enhance class="auth__card">
-    <h1 class="auth__title">Set a new password</h1>
-    {#if !data.valid}
-      <p class="auth__err">This reset link is invalid or has expired. <a href="/forgot-password">Request a new one</a>.</p>
-    {:else}
-      {#if form?.error}<p class="auth__err" role="alert">{form.error}</p>{/if}
-      <label class="auth__field"><span>New password</span><input name="password" type="password" autocomplete="new-password" minlength="8" required /></label>
-      <button class="auth__btn" type="submit">Update password</button>
-    {/if}
-    <p class="auth__links"><a href="/login">Back to sign in</a></p>
-  </form>
-</div>
-
-${authStyle}
+    const resetPage = `<script lang="ts">
+  import { enhance } from '$app/forms'
+  let { data, form } = $props()
+</script>
+
+<div class="auth">
+  <form method="POST" use:enhance class="auth__card">
+    <h1 class="auth__title">Set a new password</h1>
+    {#if !data.valid}
+      <p class="auth__err">This reset link is invalid or has expired. <a href="/forgot-password">Request a new one</a>.</p>
+    {:else}
+      {#if form?.error}<p class="auth__err" role="alert">{form.error}</p>{/if}
+      <label class="auth__field"><span>New password</span><input name="password" type="password" autocomplete="new-password" minlength="8" required /></label>
+      <button class="auth__btn" type="submit">Update password</button>
+    {/if}
+    <p class="auth__links"><a href="/login">Back to sign in</a></p>
+  </form>
+</div>
+
+${authStyle}
 `;
     // --- admin user management (userAdmin flag: DB-backed + RBAC) ---
-    const usersServerTs = `import { fail, redirect } from '@sveltejs/kit'
-import type { Actions, PageServerLoad, RequestEvent } from './$types'
-import { getServerRole, canScreen, ROLES } from '../lib/access'
-import { listUsers, createUser, setUserRole, deleteUser } from '../lib/server/users'
-
-// Only a full-access role (screens: '*') may manage users.
-function guard(event: RequestEvent): void {
-  if (!canScreen(getServerRole(event), '__users__')) throw redirect(302, '/')
-}
-
-export const load: PageServerLoad = async (event) => {
-  guard(event)
-  return { users: await listUsers(), roles: ROLES }
-}
-
-export const actions: Actions = {
-  create: async (event) => {
-    guard(event)
-    const form = await event.request.formData()
-    const email = String(form.get('email') ?? '')
-    const name = String(form.get('name') ?? '')
-    const password = String(form.get('password') ?? '')
-    const role = String(form.get('role') ?? ROLES[0])
-    if (!email.trim() || !name.trim() || password.length < 8) return fail(400, { error: 'Name, email, and an 8+ character password are required.' })
-    if (!(await createUser({ email, name, password, role }))) return fail(409, { error: 'That email already exists.' })
-    return { ok: 'created' }
-  },
-  role: async (event) => {
-    guard(event)
-    const form = await event.request.formData()
-    await setUserRole(String(form.get('email') ?? ''), String(form.get('role') ?? ''))
-    return { ok: 'updated' }
-  },
-  remove: async (event) => {
-    guard(event)
-    await deleteUser(String((await event.request.formData()).get('email') ?? ''))
-    return { ok: 'removed' }
-  },
-}
+    const usersServerTs = `import { fail, redirect } from '@sveltejs/kit'
+import type { Actions, PageServerLoad, RequestEvent } from './$types'
+import { getServerRole, canScreen, ROLES } from '../lib/access'
+import { listUsers, createUser, setUserRole, deleteUser } from '../lib/server/users'
+
+// Only a full-access role (screens: '*') may manage users.
+function guard(event: RequestEvent): void {
+  if (!canScreen(getServerRole(event), '__users__')) throw redirect(302, '/')
+}
+
+export const load: PageServerLoad = async (event) => {
+  guard(event)
+  return { users: await listUsers(), roles: ROLES }
+}
+
+export const actions: Actions = {
+  create: async (event) => {
+    guard(event)
+    const form = await event.request.formData()
+    const email = String(form.get('email') ?? '')
+    const name = String(form.get('name') ?? '')
+    const password = String(form.get('password') ?? '')
+    const role = String(form.get('role') ?? ROLES[0])
+    if (!email.trim() || !name.trim() || password.length < 8) return fail(400, { error: 'Name, email, and an 8+ character password are required.' })
+    if (!(await createUser({ email, name, password, role }))) return fail(409, { error: 'That email already exists.' })
+    return { ok: 'created' }
+  },
+  role: async (event) => {
+    guard(event)
+    const form = await event.request.formData()
+    await setUserRole(String(form.get('email') ?? ''), String(form.get('role') ?? ''))
+    return { ok: 'updated' }
+  },
+  remove: async (event) => {
+    guard(event)
+    await deleteUser(String((await event.request.formData()).get('email') ?? ''))
+    return { ok: 'removed' }
+  },
+}
 `;
-    const usersPage = `<script lang="ts">
-  import { enhance } from '$app/forms'
-  let { data, form } = $props()
-</script>
-
-<h1 class="st__title">Users</h1>
-{#if form?.error}<p class="usr__msg usr__msg--err" role="alert">{form.error}</p>{/if}
-<div class="usr">
-  <table class="usr__table">
-    <thead><tr><th>Name</th><th>Email</th><th>Role</th><th></th></tr></thead>
-    <tbody>
-      {#each data.users as u (u.email)}
-        <tr>
-          <td>{u.name}</td>
-          <td>{u.email}</td>
-          <td>
-            <form method="POST" action="?/role" use:enhance>
-              <input type="hidden" name="email" value={u.email} />
-              <select name="role" onchange={(e) => e.currentTarget.form?.requestSubmit()}>
-                {#each data.roles as r (r)}<option value={r} selected={r === u.role}>{r}</option>{/each}
-              </select>
-            </form>
-          </td>
-          <td>
-            <form method="POST" action="?/remove" use:enhance>
-              <input type="hidden" name="email" value={u.email} />
-              <button class="usr__del" type="submit">Remove</button>
-            </form>
-          </td>
-        </tr>
-      {/each}
-    </tbody>
-  </table>
-
-  <form method="POST" action="?/create" use:enhance class="usr__add">
-    <h2 class="usr__h">Add user</h2>
-    <input name="name" placeholder="Name" required />
-    <input name="email" type="email" placeholder="Email" required />
-    <input name="password" type="password" placeholder="Password (8+)" minlength="8" required />
-    <select name="role">{#each data.roles as r (r)}<option value={r}>{r}</option>{/each}</select>
-    <button class="usr__btn" type="submit">Add user</button>
-  </form>
-</div>
-
-<style>
-  .usr { display: flex; flex-direction: column; gap: 18px; margin-top: 14px; }
-  .usr__table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
-  .usr__table th { text-align: left; padding: 8px 10px; color: var(--sg-muted, #64748b); font-weight: 600; border-bottom: 1px solid var(--sg-border, #e6e8ec); }
-  .usr__table td { padding: 7px 10px; border-bottom: 1px solid var(--sg-border, #f1f5f9); }
-  .usr__table select { padding: 5px 8px; font: inherit; font-size: 13px; border: 1px solid var(--sg-input-border, #e6e8ec); border-radius: 7px; background: var(--sg-input-bg, #fff); color: var(--sg-fg, #0f172a); }
-  .usr__del { padding: 4px 10px; font: inherit; font-size: 12.5px; color: #dc2626; background: none; border: 1px solid color-mix(in srgb, #dc2626 40%, var(--sg-border, #e6e8ec)); border-radius: 7px; cursor: pointer; }
-  .usr__add { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 16px; border: 1px solid var(--sg-border, #e6e8ec); border-radius: 12px; background: var(--sg-bg, #fff); }
-  .usr__h { width: 100%; margin: 0 0 4px; font-size: 15px; }
-  .usr__add input, .usr__add select { padding: 8px 10px; font: inherit; font-size: 13.5px; border: 1px solid var(--sg-input-border, #e6e8ec); border-radius: 8px; background: var(--sg-input-bg, #fff); color: var(--sg-fg, #0f172a); }
-  .usr__btn { padding: 8px 16px; font: inherit; font-size: 13.5px; font-weight: 620; color: var(--sg-on-accent, #fff); background: var(--sg-accent, #6366f1); border: none; border-radius: 8px; cursor: pointer; }
-  .usr__msg { margin: 0 0 10px; padding: 8px 11px; border-radius: 9px; font-size: 13px; }
-  .usr__msg--err { color: var(--sg-danger, #b3261e); background: color-mix(in srgb, var(--sg-danger, #dc2626) 9%, var(--sg-bg, #fff)); border: 1px solid color-mix(in srgb, var(--sg-danger, #dc2626) 35%, var(--sg-border, #e6e8ec)); }
-</style>
+    const usersPage = `<script lang="ts">
+  import { enhance } from '$app/forms'
+  let { data, form } = $props()
+</script>
+
+<h1 class="st__title">Users</h1>
+{#if form?.error}<p class="usr__msg usr__msg--err" role="alert">{form.error}</p>{/if}
+<div class="usr">
+  <table class="usr__table">
+    <thead><tr><th>Name</th><th>Email</th><th>Role</th><th></th></tr></thead>
+    <tbody>
+      {#each data.users as u (u.email)}
+        <tr>
+          <td>{u.name}</td>
+          <td>{u.email}</td>
+          <td>
+            <form method="POST" action="?/role" use:enhance>
+              <input type="hidden" name="email" value={u.email} />
+              <select name="role" onchange={(e) => e.currentTarget.form?.requestSubmit()}>
+                {#each data.roles as r (r)}<option value={r} selected={r === u.role}>{r}</option>{/each}
+              </select>
+            </form>
+          </td>
+          <td>
+            <form method="POST" action="?/remove" use:enhance>
+              <input type="hidden" name="email" value={u.email} />
+              <button class="usr__del" type="submit">Remove</button>
+            </form>
+          </td>
+        </tr>
+      {/each}
+    </tbody>
+  </table>
+
+  <form method="POST" action="?/create" use:enhance class="usr__add">
+    <h2 class="usr__h">Add user</h2>
+    <input name="name" placeholder="Name" required />
+    <input name="email" type="email" placeholder="Email" required />
+    <input name="password" type="password" placeholder="Password (8+)" minlength="8" required />
+    <select name="role">{#each data.roles as r (r)}<option value={r}>{r}</option>{/each}</select>
+    <button class="usr__btn" type="submit">Add user</button>
+  </form>
+</div>
+
+<style>
+  .usr { display: flex; flex-direction: column; gap: 18px; margin-top: 14px; }
+  .usr__table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
+  .usr__table th { text-align: left; padding: 8px 10px; color: var(--sg-muted, #64748b); font-weight: 600; border-bottom: 1px solid var(--sg-border, #e6e8ec); }
+  .usr__table td { padding: 7px 10px; border-bottom: 1px solid var(--sg-border, #f1f5f9); }
+  .usr__table select { padding: 5px 8px; font: inherit; font-size: 13px; border: 1px solid var(--sg-input-border, #e6e8ec); border-radius: 7px; background: var(--sg-input-bg, #fff); color: var(--sg-fg, #0f172a); }
+  .usr__del { padding: 4px 10px; font: inherit; font-size: 12.5px; color: #dc2626; background: none; border: 1px solid color-mix(in srgb, #dc2626 40%, var(--sg-border, #e6e8ec)); border-radius: 7px; cursor: pointer; }
+  .usr__add { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 16px; border: 1px solid var(--sg-border, #e6e8ec); border-radius: 12px; background: var(--sg-bg, #fff); }
+  .usr__h { width: 100%; margin: 0 0 4px; font-size: 15px; }
+  .usr__add input, .usr__add select { padding: 8px 10px; font: inherit; font-size: 13.5px; border: 1px solid var(--sg-input-border, #e6e8ec); border-radius: 8px; background: var(--sg-input-bg, #fff); color: var(--sg-fg, #0f172a); }
+  .usr__btn { padding: 8px 16px; font: inherit; font-size: 13.5px; font-weight: 620; color: var(--sg-on-accent, #fff); background: var(--sg-accent, #6366f1); border: none; border-radius: 8px; cursor: pointer; }
+  .usr__msg { margin: 0 0 10px; padding: 8px 11px; border-radius: 9px; font-size: 13px; }
+  .usr__msg--err { color: var(--sg-danger, #b3261e); background: color-mix(in srgb, var(--sg-danger, #dc2626) 9%, var(--sg-bg, #fff)); border: 1px solid color-mix(in srgb, var(--sg-danger, #dc2626) 35%, var(--sg-border, #e6e8ec)); }
+</style>
 `;
     // --- real email (Resend HTTP / SMTP nodemailer / dev console) ---
-    const emailTs = `// Regenerated by SvGrid Studio. Email delivery: Resend (HTTP API, works on edge) or
-// SMTP (nodemailer, Node runtimes). Logs to the console in dev when neither is set.
-import { env } from '$env/dynamic/private'
-
-export async function sendEmail(to: string, subject: string, html: string): Promise<void> {
-  const from = env.EMAIL_FROM || 'onboarding@resend.dev'
-  if (env.RESEND_API_KEY) {
-    const res = await fetch('https://api.resend.com/emails', {
-      method: 'POST',
-      headers: { authorization: 'Bearer ' + env.RESEND_API_KEY, 'content-type': 'application/json' },
-      body: JSON.stringify({ from, to, subject, html }),
-    })
-    if (!res.ok) throw new Error('Resend send failed: ' + res.status + ' ' + (await res.text()))
-    return
-  }
-  if (env.SMTP_HOST) {
-    // Dynamic import so edge builds (Resend, or no email) never bundle nodemailer.
-    const nodemailer = (await import('nodemailer')).default
-    const transport = nodemailer.createTransport({
-      host: env.SMTP_HOST,
-      port: Number(env.SMTP_PORT ?? 587),
-      secure: env.SMTP_SECURE === 'true',
-      auth: env.SMTP_USER ? { user: env.SMTP_USER, pass: env.SMTP_PASS } : undefined,
-    })
-    await transport.sendMail({ from, to, subject, html })
-    return
-  }
-  console.log('[email] (dev - set RESEND_API_KEY or SMTP_* to send) To: ' + to + ' | ' + subject + '\\n' + html)
-}
+    const emailTs = `// Regenerated by SvGrid Studio. Email delivery: Resend (HTTP API, works on edge) or
+// SMTP (nodemailer, Node runtimes). Logs to the console in dev when neither is set.
+import { env } from '$env/dynamic/private'
+
+export async function sendEmail(to: string, subject: string, html: string): Promise<void> {
+  const from = env.EMAIL_FROM || 'onboarding@resend.dev'
+  if (env.RESEND_API_KEY) {
+    const res = await fetch('https://api.resend.com/emails', {
+      method: 'POST',
+      headers: { authorization: 'Bearer ' + env.RESEND_API_KEY, 'content-type': 'application/json' },
+      body: JSON.stringify({ from, to, subject, html }),
+    })
+    if (!res.ok) throw new Error('Resend send failed: ' + res.status + ' ' + (await res.text()))
+    return
+  }
+  if (env.SMTP_HOST) {
+    // Dynamic import so edge builds (Resend, or no email) never bundle nodemailer.
+    const nodemailer = (await import('nodemailer')).default
+    const transport = nodemailer.createTransport({
+      host: env.SMTP_HOST,
+      port: Number(env.SMTP_PORT ?? 587),
+      secure: env.SMTP_SECURE === 'true',
+      auth: env.SMTP_USER ? { user: env.SMTP_USER, pass: env.SMTP_PASS } : undefined,
+    })
+    await transport.sendMail({ from, to, subject, html })
+    return
+  }
+  console.log('[email] (dev - set RESEND_API_KEY or SMTP_* to send) To: ' + to + ' | ' + subject + '\\n' + html)
+}
 `;
     // --- email 2FA verify step ---
-    const verifyServerTs = `import { fail, redirect } from '@sveltejs/kit'
-import type { Actions, PageServerLoad } from './$types'
-import { SESSION_COOKIE, SESSION_MAX_AGE, TFA_COOKIE, readChallenge, signSession } from '../lib/server/auth'
-import { findUser } from '../lib/server/users'
-
-export const load: PageServerLoad = async ({ cookies }) => {
-  if (!cookies.get(TFA_COOKIE)) throw redirect(302, '/login')
-  return {}
-}
-
-export const actions: Actions = {
-  default: async ({ request, cookies, url }) => {
-    const code = String((await request.formData()).get('code') ?? '')
-    const email = await readChallenge(cookies.get(TFA_COOKIE), code)
-    if (!email) return fail(401, { error: 'That code is invalid or has expired.' })
-    const user = await findUser(email)
-    if (!user) return fail(401, { error: 'Account not found.' })
-    cookies.delete(TFA_COOKIE, { path: '/' })
-    cookies.set(SESSION_COOKIE, await signSession({ email: user.email, name: user.name, role: user.role }), {
-      path: '/', httpOnly: true, sameSite: 'lax', secure: url.hostname !== 'localhost' && url.hostname !== '127.0.0.1', maxAge: SESSION_MAX_AGE,
-    })
-    throw redirect(302, url.searchParams.get('redirectTo') || '/')
-  },
-}
+    const verifyServerTs = `import { fail, redirect } from '@sveltejs/kit'
+import type { Actions, PageServerLoad } from './$types'
+import { SESSION_COOKIE, SESSION_MAX_AGE, TFA_COOKIE, readChallenge, signSession } from '../lib/server/auth'
+import { findUser } from '../lib/server/users'
+
+export const load: PageServerLoad = async ({ cookies }) => {
+  if (!cookies.get(TFA_COOKIE)) throw redirect(302, '/login')
+  return {}
+}
+
+export const actions: Actions = {
+  default: async ({ request, cookies, url }) => {
+    const code = String((await request.formData()).get('code') ?? '')
+    const email = await readChallenge(cookies.get(TFA_COOKIE), code)
+    if (!email) return fail(401, { error: 'That code is invalid or has expired.' })
+    const user = await findUser(email)
+    if (!user) return fail(401, { error: 'Account not found.' })
+    cookies.delete(TFA_COOKIE, { path: '/' })
+    cookies.set(SESSION_COOKIE, await signSession({ email: user.email, name: user.name, role: user.role }), {
+      path: '/', httpOnly: true, sameSite: 'lax', secure: url.hostname !== 'localhost' && url.hostname !== '127.0.0.1', maxAge: SESSION_MAX_AGE,
+    })
+    throw redirect(302, url.searchParams.get('redirectTo') || '/')
+  },
+}
 `;
-    const verifyPage = `<script lang="ts">
-  import { enhance } from '$app/forms'
-  let { form } = $props()
-</script>
-
-<div class="auth">
-  <form method="POST" use:enhance class="auth__card">
-    <h1 class="auth__title">Enter your code</h1>
-    <p class="auth__sub">We emailed you a 6-digit verification code.</p>
-    {#if form?.error}<p class="auth__err" role="alert">{form.error}</p>{/if}
-    <label class="auth__field"><span>Code</span><input name="code" inputmode="numeric" autocomplete="one-time-code" required /></label>
-    <button class="auth__btn" type="submit">Verify</button>
-    <p class="auth__links"><a href="/login">Back to sign in</a></p>
-  </form>
-</div>
-
-${authStyle}
+    const verifyPage = `<script lang="ts">
+  import { enhance } from '$app/forms'
+  let { form } = $props()
+</script>
+
+<div class="auth">
+  <form method="POST" use:enhance class="auth__card">
+    <h1 class="auth__title">Enter your code</h1>
+    <p class="auth__sub">We emailed you a 6-digit verification code.</p>
+    {#if form?.error}<p class="auth__err" role="alert">{form.error}</p>{/if}
+    <label class="auth__field"><span>Code</span><input name="code" inputmode="numeric" autocomplete="one-time-code" required /></label>
+    <button class="auth__btn" type="submit">Verify</button>
+    <p class="auth__links"><a href="/login">Back to sign in</a></p>
+  </form>
+</div>
+
+${authStyle}
 `;
     // --- OAuth / OIDC (dependency-free authorization-code + PKCE) ---
     const providerSet = `new Set<Provider>([${oauthProviders.map((p) => JSON.stringify(p)).join(', ')}])`;
-    const oauthTs = `// Regenerated by SvGrid Studio. Dependency-free OAuth 2.0 / OpenID Connect sign-in
-// (authorization-code + PKCE). Set each provider's client id/secret in the environment;
-// register the redirect URI <origin>/auth/<provider>/callback with the provider.
-import { env } from '$env/dynamic/private'
-
-export type Provider = 'github' | 'google' | 'oidc'
-type Endpoints = { authorize: string; token: string; userinfo: string }
-export type ProviderConfig = { clientId: string; clientSecret: string; scope: string; pkce: boolean; endpoints: Endpoints }
-
-function b64url(bytes: ArrayBuffer): string {
-  const b = new Uint8Array(bytes)
-  let s = ''
-  for (const byte of b) s += String.fromCharCode(byte)
-  return btoa(s).replace(/\\+/g, '-').replace(/\\//g, '_').replace(/=+$/, '')
-}
-export function randomToken(): string { return b64url(crypto.getRandomValues(new Uint8Array(32)).buffer) }
-export async function pkceChallenge(verifier: string): Promise<string> {
-  return b64url(await crypto.subtle.digest('SHA-256', new TextEncoder().encode(verifier)))
-}
-
-async function endpointsFor(provider: Provider): Promise<Endpoints> {
-  if (provider === 'github') return { authorize: 'https://github.com/login/oauth/authorize', token: 'https://github.com/login/oauth/access_token', userinfo: 'https://api.github.com/user' }
-  if (provider === 'google') return { authorize: 'https://accounts.google.com/o/oauth2/v2/auth', token: 'https://oauth2.googleapis.com/token', userinfo: 'https://openidconnect.googleapis.com/v1/userinfo' }
-  // Generic OIDC (Azure AD / Entra, Okta, Auth0, Keycloak): discover from OIDC_ISSUER.
-  const issuer = (env.OIDC_ISSUER ?? '').replace(/\\/$/, '')
-  const disc = (await (await fetch(issuer + '/.well-known/openid-configuration')).json()) as { authorization_endpoint: string; token_endpoint: string; userinfo_endpoint: string }
-  return { authorize: disc.authorization_endpoint, token: disc.token_endpoint, userinfo: disc.userinfo_endpoint }
-}
-
-export async function providerConfig(provider: Provider): Promise<ProviderConfig> {
-  const prefix = provider.toUpperCase()
-  return {
-    clientId: env[prefix + '_CLIENT_ID'] ?? '',
-    clientSecret: env[prefix + '_CLIENT_SECRET'] ?? '',
-    scope: provider === 'github' ? 'read:user user:email' : 'openid email profile',
-    pkce: provider !== 'github',
-    endpoints: await endpointsFor(provider),
-  }
-}
-
-export type OAuthProfile = { email: string; name: string }
-export async function fetchProfile(provider: Provider, accessToken: string, userinfo: string): Promise<OAuthProfile | null> {
-  const headers = { authorization: 'Bearer ' + accessToken, accept: 'application/json', 'user-agent': 'svgrid-app' }
-  const data = (await (await fetch(userinfo, { headers })).json()) as Record<string, unknown>
-  let email = typeof data.email === 'string' ? data.email : ''
-  const name = typeof data.name === 'string' ? data.name : (typeof data.login === 'string' ? data.login : email)
-  if (provider === 'github' && !email) {
-    const emails = (await (await fetch('https://api.github.com/user/emails', { headers })).json()) as Array<{ email: string; primary: boolean; verified: boolean }>
-    email = (emails.find((e) => e.primary && e.verified) ?? emails.find((e) => e.verified))?.email ?? ''
-  }
-  return email ? { email: email.toLowerCase(), name: name || email } : null
-}
+    const oauthTs = `// Regenerated by SvGrid Studio. Dependency-free OAuth 2.0 / OpenID Connect sign-in
+// (authorization-code + PKCE). Set each provider's client id/secret in the environment;
+// register the redirect URI <origin>/auth/<provider>/callback with the provider.
+import { env } from '$env/dynamic/private'
+
+export type Provider = 'github' | 'google' | 'oidc'
+type Endpoints = { authorize: string; token: string; userinfo: string }
+export type ProviderConfig = { clientId: string; clientSecret: string; scope: string; pkce: boolean; endpoints: Endpoints }
+
+function b64url(bytes: ArrayBuffer): string {
+  const b = new Uint8Array(bytes)
+  let s = ''
+  for (const byte of b) s += String.fromCharCode(byte)
+  return btoa(s).replace(/\\+/g, '-').replace(/\\//g, '_').replace(/=+$/, '')
+}
+export function randomToken(): string { return b64url(crypto.getRandomValues(new Uint8Array(32)).buffer) }
+export async function pkceChallenge(verifier: string): Promise<string> {
+  return b64url(await crypto.subtle.digest('SHA-256', new TextEncoder().encode(verifier)))
+}
+
+async function endpointsFor(provider: Provider): Promise<Endpoints> {
+  if (provider === 'github') return { authorize: 'https://github.com/login/oauth/authorize', token: 'https://github.com/login/oauth/access_token', userinfo: 'https://api.github.com/user' }
+  if (provider === 'google') return { authorize: 'https://accounts.google.com/o/oauth2/v2/auth', token: 'https://oauth2.googleapis.com/token', userinfo: 'https://openidconnect.googleapis.com/v1/userinfo' }
+  // Generic OIDC (Azure AD / Entra, Okta, Auth0, Keycloak): discover from OIDC_ISSUER.
+  const issuer = (env.OIDC_ISSUER ?? '').replace(/\\/$/, '')
+  const disc = (await (await fetch(issuer + '/.well-known/openid-configuration')).json()) as { authorization_endpoint: string; token_endpoint: string; userinfo_endpoint: string }
+  return { authorize: disc.authorization_endpoint, token: disc.token_endpoint, userinfo: disc.userinfo_endpoint }
+}
+
+export async function providerConfig(provider: Provider): Promise<ProviderConfig> {
+  const prefix = provider.toUpperCase()
+  return {
+    clientId: env[prefix + '_CLIENT_ID'] ?? '',
+    clientSecret: env[prefix + '_CLIENT_SECRET'] ?? '',
+    scope: provider === 'github' ? 'read:user user:email' : 'openid email profile',
+    pkce: provider !== 'github',
+    endpoints: await endpointsFor(provider),
+  }
+}
+
+export type OAuthProfile = { email: string; name: string }
+export async function fetchProfile(provider: Provider, accessToken: string, userinfo: string): Promise<OAuthProfile | null> {
+  const headers = { authorization: 'Bearer ' + accessToken, accept: 'application/json', 'user-agent': 'svgrid-app' }
+  const data = (await (await fetch(userinfo, { headers })).json()) as Record<string, unknown>
+  let email = typeof data.email === 'string' ? data.email : ''
+  const name = typeof data.name === 'string' ? data.name : (typeof data.login === 'string' ? data.login : email)
+  if (provider === 'github' && !email) {
+    const emails = (await (await fetch('https://api.github.com/user/emails', { headers })).json()) as Array<{ email: string; primary: boolean; verified: boolean }>
+    email = (emails.find((e) => e.primary && e.verified) ?? emails.find((e) => e.verified))?.email ?? ''
+  }
+  return email ? { email: email.toLowerCase(), name: name || email } : null
+}
 `;
-    const oauthLoginServerTs = `import { error, redirect } from '@sveltejs/kit'
-import type { RequestHandler } from './$types'
-import { providerConfig, randomToken, pkceChallenge, type Provider } from '../lib/server/oauth'
-
-const PROVIDERS = ${providerSet}
-
-export const GET: RequestHandler = async ({ params, url, cookies }) => {
-  const provider = params.provider as Provider
-  if (!PROVIDERS.has(provider)) throw error(404)
-  const cfg = await providerConfig(provider)
-  if (!cfg.clientId) throw error(500, provider + ' sign-in is not configured (set ' + provider.toUpperCase() + '_CLIENT_ID).')
-  const secure = url.protocol === 'https:'
-  const state = randomToken()
-  cookies.set('oauth_state', state, { path: '/', httpOnly: true, sameSite: 'lax', maxAge: 600, secure })
-  const q = new URLSearchParams({ client_id: cfg.clientId, redirect_uri: url.origin + '/auth/' + provider + '/callback', response_type: 'code', scope: cfg.scope, state })
-  if (cfg.pkce) {
-    const verifier = randomToken()
-    cookies.set('oauth_verifier', verifier, { path: '/', httpOnly: true, sameSite: 'lax', maxAge: 600, secure })
-    q.set('code_challenge', await pkceChallenge(verifier))
-    q.set('code_challenge_method', 'S256')
-  }
-  throw redirect(302, cfg.endpoints.authorize + '?' + q.toString())
-}
+    const oauthLoginServerTs = `import { error, redirect } from '@sveltejs/kit'
+import type { RequestHandler } from './$types'
+import { providerConfig, randomToken, pkceChallenge, type Provider } from '../lib/server/oauth'
+
+const PROVIDERS = ${providerSet}
+
+export const GET: RequestHandler = async ({ params, url, cookies }) => {
+  const provider = params.provider as Provider
+  if (!PROVIDERS.has(provider)) throw error(404)
+  const cfg = await providerConfig(provider)
+  if (!cfg.clientId) throw error(500, provider + ' sign-in is not configured (set ' + provider.toUpperCase() + '_CLIENT_ID).')
+  const secure = url.protocol === 'https:'
+  const state = randomToken()
+  cookies.set('oauth_state', state, { path: '/', httpOnly: true, sameSite: 'lax', maxAge: 600, secure })
+  const q = new URLSearchParams({ client_id: cfg.clientId, redirect_uri: url.origin + '/auth/' + provider + '/callback', response_type: 'code', scope: cfg.scope, state })
+  if (cfg.pkce) {
+    const verifier = randomToken()
+    cookies.set('oauth_verifier', verifier, { path: '/', httpOnly: true, sameSite: 'lax', maxAge: 600, secure })
+    q.set('code_challenge', await pkceChallenge(verifier))
+    q.set('code_challenge_method', 'S256')
+  }
+  throw redirect(302, cfg.endpoints.authorize + '?' + q.toString())
+}
 `;
-    const oauthCallbackServerTs = `import { error, redirect } from '@sveltejs/kit'
-import type { RequestHandler } from './$types'
-import { providerConfig, fetchProfile, type Provider } from '../lib/server/oauth'
-import { findUser, createUser } from '../lib/server/users'
-import { SESSION_COOKIE, SESSION_MAX_AGE, signSession } from '../lib/server/auth'
-
-const PROVIDERS = ${providerSet}
-
-export const GET: RequestHandler = async ({ params, url, cookies }) => {
-  const provider = params.provider as Provider
-  if (!PROVIDERS.has(provider)) throw error(404)
-  const code = url.searchParams.get('code')
-  const state = url.searchParams.get('state')
-  if (!code || !state || state !== cookies.get('oauth_state')) throw error(400, 'Invalid OAuth state.')
-  const cfg = await providerConfig(provider)
-  const body = new URLSearchParams({ client_id: cfg.clientId, client_secret: cfg.clientSecret, code, redirect_uri: url.origin + '/auth/' + provider + '/callback', grant_type: 'authorization_code' })
-  const verifier = cookies.get('oauth_verifier')
-  if (cfg.pkce && verifier) body.set('code_verifier', verifier)
-  const tokenRes = await fetch(cfg.endpoints.token, { method: 'POST', headers: { accept: 'application/json', 'content-type': 'application/x-www-form-urlencoded' }, body })
-  if (!tokenRes.ok) throw error(502, 'OAuth token exchange failed.')
-  const token = (await tokenRes.json()) as { access_token?: string }
-  if (!token.access_token) throw error(502, 'No access token returned.')
-  const profile = await fetchProfile(provider, token.access_token, cfg.endpoints.userinfo)
-  if (!profile) throw error(502, 'Could not read a verified email from the provider.')
-  cookies.delete('oauth_state', { path: '/' })
-  cookies.delete('oauth_verifier', { path: '/' })
-  let user = await findUser(profile.email)
-  if (!user) user = await createUser({ email: profile.email, name: profile.name, password: crypto.randomUUID() + crypto.randomUUID(), role: ${JSON.stringify(registerRole)} })
-  if (!user) throw error(500, 'Could not create your account.')
-  cookies.set(SESSION_COOKIE, await signSession({ email: user.email, name: user.name, role: user.role }), {
-    path: '/', httpOnly: true, sameSite: 'lax', secure: url.protocol === 'https:', maxAge: SESSION_MAX_AGE,
-  })
-  throw redirect(302, '/')
-}
+    const oauthCallbackServerTs = `import { error, redirect } from '@sveltejs/kit'
+import type { RequestHandler } from './$types'
+import { providerConfig, fetchProfile, type Provider } from '../lib/server/oauth'
+import { findUser, createUser } from '../lib/server/users'
+import { SESSION_COOKIE, SESSION_MAX_AGE, signSession } from '../lib/server/auth'
+
+const PROVIDERS = ${providerSet}
+
+export const GET: RequestHandler = async ({ params, url, cookies }) => {
+  const provider = params.provider as Provider
+  if (!PROVIDERS.has(provider)) throw error(404)
+  const code = url.searchParams.get('code')
+  const state = url.searchParams.get('state')
+  if (!code || !state || state !== cookies.get('oauth_state')) throw error(400, 'Invalid OAuth state.')
+  const cfg = await providerConfig(provider)
+  const body = new URLSearchParams({ client_id: cfg.clientId, client_secret: cfg.clientSecret, code, redirect_uri: url.origin + '/auth/' + provider + '/callback', grant_type: 'authorization_code' })
+  const verifier = cookies.get('oauth_verifier')
+  if (cfg.pkce && verifier) body.set('code_verifier', verifier)
+  const tokenRes = await fetch(cfg.endpoints.token, { method: 'POST', headers: { accept: 'application/json', 'content-type': 'application/x-www-form-urlencoded' }, body })
+  if (!tokenRes.ok) throw error(502, 'OAuth token exchange failed.')
+  const token = (await tokenRes.json()) as { access_token?: string }
+  if (!token.access_token) throw error(502, 'No access token returned.')
+  const profile = await fetchProfile(provider, token.access_token, cfg.endpoints.userinfo)
+  if (!profile) throw error(502, 'Could not read a verified email from the provider.')
+  cookies.delete('oauth_state', { path: '/' })
+  cookies.delete('oauth_verifier', { path: '/' })
+  let user = await findUser(profile.email)
+  if (!user) user = await createUser({ email: profile.email, name: profile.name, password: crypto.randomUUID() + crypto.randomUUID(), role: ${JSON.stringify(registerRole)} })
+  if (!user) throw error(500, 'Could not create your account.')
+  cookies.set(SESSION_COOKIE, await signSession({ email: user.email, name: user.name, role: user.role }), {
+    path: '/', httpOnly: true, sameSite: 'lax', secure: url.protocol === 'https:', maxAge: SESSION_MAX_AGE,
+  })
+  throw redirect(302, '/')
+}
 `;
     // NOTE: SESSION_SECRET is added to the shared .env.example by envExample() (which
     // scans the generated source), so it merges with DATABASE_URL etc. - no duplicate file.
@@ -4586,79 +4660,79 @@ function dataLayerFiles(project, sqlEntities, sources, includeUsers = false, use
         a.imports.forEach((i) => colImports.add(i));
         tableBlocks.push(a.block);
     }
-    const schemaTs = `// Regenerated by SvGrid Studio. Typed database schema (Drizzle ORM) - the source of
-// truth for migrations: edit here, then run \`npm run db:generate\` && \`npm run db:migrate\`.
-import { ${[...colImports].sort().join(', ')} } from '${cfg.core}'
-
-${tableBlocks.join('\n\n')}
+    const schemaTs = `// Regenerated by SvGrid Studio. Typed database schema (Drizzle ORM) - the source of
+// truth for migrations: edit here, then run \`npm run db:generate\` && \`npm run db:migrate\`.
+import { ${[...colImports].sort().join(', ')} } from '${cfg.core}'
+
+${tableBlocks.join('\n\n')}
 `;
-    const indexTs = `// Regenerated by SvGrid Studio. The Drizzle client (reads DATABASE_URL).
-${cfg.client}
-import { env } from '$env/dynamic/private'
-import * as schema from './schema'
-
-${cfg.setup}
-export { schema }
+    const indexTs = `// Regenerated by SvGrid Studio. The Drizzle client (reads DATABASE_URL).
+${cfg.client}
+import { env } from '$env/dynamic/private'
+import * as schema from './schema'
+
+${cfg.setup}
+export { schema }
 `;
     const repoFiles = meta.map(({ e, tableVar, pkKey, pkNumber }) => {
         const type = namesFor(e).type;
         const idT = pkNumber ? 'number' : 'string';
         // MySQL has no RETURNING, so create/update re-select the row after writing.
         const crud = cfg.returning
-            ? `export const ${tableVar}Repo = {
-  list: (): Promise<${type}Row[]> => db.select().from(${tableVar}),
-  get: async (id: ${idT}): Promise<${type}Row | undefined> =>
-    (await db.select().from(${tableVar}).where(eq(${tableVar}.${pkKey}, id))).at(0),
-  create: async (values: ${type}New): Promise<${type}Row> =>
-    (await db.insert(${tableVar}).values(values).returning()).at(0)!,
-  update: async (id: ${idT}, values: Partial<${type}New>): Promise<${type}Row | undefined> =>
-    (await db.update(${tableVar}).set(values).where(eq(${tableVar}.${pkKey}, id)).returning()).at(0),
-  remove: async (id: ${idT}): Promise<void> => {
-    await db.delete(${tableVar}).where(eq(${tableVar}.${pkKey}, id))
-  },
+            ? `export const ${tableVar}Repo = {
+  list: (): Promise<${type}Row[]> => db.select().from(${tableVar}),
+  get: async (id: ${idT}): Promise<${type}Row | undefined> =>
+    (await db.select().from(${tableVar}).where(eq(${tableVar}.${pkKey}, id))).at(0),
+  create: async (values: ${type}New): Promise<${type}Row> =>
+    (await db.insert(${tableVar}).values(values).returning()).at(0)!,
+  update: async (id: ${idT}, values: Partial<${type}New>): Promise<${type}Row | undefined> =>
+    (await db.update(${tableVar}).set(values).where(eq(${tableVar}.${pkKey}, id)).returning()).at(0),
+  remove: async (id: ${idT}): Promise<void> => {
+    await db.delete(${tableVar}).where(eq(${tableVar}.${pkKey}, id))
+  },
 }`
-            : `async function getById(id: ${idT}): Promise<${type}Row | undefined> {
-  return (await db.select().from(${tableVar}).where(eq(${tableVar}.${pkKey}, id))).at(0)
-}
-
-export const ${tableVar}Repo = {
-  list: (): Promise<${type}Row[]> => db.select().from(${tableVar}),
-  get: getById,
-  // MySQL: no RETURNING - re-select by the new/insertId after the write.
-  create: async (values: ${type}New): Promise<${type}Row> => {
-    const res = await db.insert(${tableVar}).values(values)
-    const id = ((values as Record<string, unknown>).${pkKey} ?? (res as unknown as Array<{ insertId: number }>)[0]?.insertId) as ${idT}
-    return (await getById(id))!
-  },
-  update: async (id: ${idT}, values: Partial<${type}New>): Promise<${type}Row | undefined> => {
-    await db.update(${tableVar}).set(values).where(eq(${tableVar}.${pkKey}, id))
-    return getById(id)
-  },
-  remove: async (id: ${idT}): Promise<void> => {
-    await db.delete(${tableVar}).where(eq(${tableVar}.${pkKey}, id))
-  },
+            : `async function getById(id: ${idT}): Promise<${type}Row | undefined> {
+  return (await db.select().from(${tableVar}).where(eq(${tableVar}.${pkKey}, id))).at(0)
+}
+
+export const ${tableVar}Repo = {
+  list: (): Promise<${type}Row[]> => db.select().from(${tableVar}),
+  get: getById,
+  // MySQL: no RETURNING - re-select by the new/insertId after the write.
+  create: async (values: ${type}New): Promise<${type}Row> => {
+    const res = await db.insert(${tableVar}).values(values)
+    const id = ((values as Record<string, unknown>).${pkKey} ?? (res as unknown as Array<{ insertId: number }>)[0]?.insertId) as ${idT}
+    return (await getById(id))!
+  },
+  update: async (id: ${idT}, values: Partial<${type}New>): Promise<${type}Row | undefined> => {
+    await db.update(${tableVar}).set(values).where(eq(${tableVar}.${pkKey}, id))
+    return getById(id)
+  },
+  remove: async (id: ${idT}): Promise<void> => {
+    await db.delete(${tableVar}).where(eq(${tableVar}.${pkKey}, id))
+  },
 }`;
         return {
             path: `src/lib/server/db/${namesFor(e).route}.ts`,
             description: `Typed repository for ${namesFor(e).label} (Drizzle).`,
-            contents: `// Regenerated by SvGrid Studio. Typed CRUD over the ${tableVar} table - call from
-// server code, form actions, or your own API routes.
-import { eq } from 'drizzle-orm'
-import { db } from './index'
-import { ${tableVar}, type ${type}Row, type ${type}New } from './schema'
-
-${crud}
+            contents: `// Regenerated by SvGrid Studio. Typed CRUD over the ${tableVar} table - call from
+// server code, form actions, or your own API routes.
+import { eq } from 'drizzle-orm'
+import { db } from './index'
+import { ${tableVar}, type ${type}Row, type ${type}New } from './schema'
+
+${crud}
 `,
         };
     });
-    const configTs = `import { defineConfig } from 'drizzle-kit'
-
-export default defineConfig({
-  schema: './src/lib/server/db/schema.ts',
-  out: './drizzle',
-  dialect: '${cfg.kit}',
-  ${cfg.creds},
-})
+    const configTs = `import { defineConfig } from 'drizzle-kit'
+
+export default defineConfig({
+  schema: './src/lib/server/db/schema.ts',
+  out: './drizzle',
+  dialect: '${cfg.kit}',
+  ${cfg.creds},
+})
 `;
     // db/seed.ts - inserts the sample rows into EMPTY tables after `db:migrate`, so a
     // freshly-migrated production database doesn't open onto blank grids. Lives outside
@@ -4690,28 +4764,28 @@ export default defineConfig({
         });
         if (!rows.length)
             return null;
-        return `  {
-    const existing = await db.select().from(schema.${tableVar}).limit(1)
-    if (existing.length === 0) {
-      await db.insert(schema.${tableVar}).values(${JSON.stringify(rows)} as (typeof schema.${tableVar}.$inferInsert)[])
-      console.log('seeded ${e.name} (${rows.length} rows)')
-    } else console.log('${e.name} already has rows - skipped')
+        return `  {
+    const existing = await db.select().from(schema.${tableVar}).limit(1)
+    if (existing.length === 0) {
+      await db.insert(schema.${tableVar}).values(${JSON.stringify(rows)} as (typeof schema.${tableVar}.$inferInsert)[])
+      console.log('seeded ${e.name} (${rows.length} rows)')
+    } else console.log('${e.name} already has rows - skipped')
   }`;
     })
         .filter((b) => b !== null);
-    const seedTs = `// Regenerated by SvGrid Studio. studio:db-seed
-// Inserts sample rows into EMPTY tables - a table that already has rows is skipped,
-// so this is safe to run repeatedly. Run AFTER migrations: npm run db:seed
-${cfg.client}
-import * as schema from '../src/lib/server/db/schema'
-
-${cfg.setup.replaceAll('env.', 'process.env.').replace('export const db', 'const db')}
-
-async function main() {
-${seedBlocks.join('\n')}
-}
-
-main().then(() => process.exit(0)).catch((err) => { console.error(err); process.exit(1) })
+    const seedTs = `// Regenerated by SvGrid Studio. studio:db-seed
+// Inserts sample rows into EMPTY tables - a table that already has rows is skipped,
+// so this is safe to run repeatedly. Run AFTER migrations: npm run db:seed
+${cfg.client}
+import * as schema from '../src/lib/server/db/schema'
+
+${cfg.setup.replaceAll('env.', 'process.env.').replace('export const db', 'const db')}
+
+async function main() {
+${seedBlocks.join('\n')}
+}
+
+main().then(() => process.exit(0)).catch((err) => { console.error(err); process.exit(1) })
 `;
     return [
         { path: 'src/lib/server/db/schema.ts', description: 'Drizzle schema (migration source of truth).', contents: schemaTs },
@@ -4758,106 +4832,106 @@ 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; }
-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; }
-.st__sub { margin: 0; font-size: 14px; line-height: 1.6; color: var(--sg-muted, #64748b); max-width: 74ch; }
-.st__sub code { background: var(--sg-header-bg, #f1f5f9); padding: 1px 6px; border-radius: 5px; font-size: 0.9em; }
-.st__toolbar { display: flex; align-items: center; gap: 10px; }
-.st-hint { font-size: 12.5px; color: var(--sg-muted, #94a3b8); }
-.st-error { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0 0 16px; padding: 11px 14px; border: 1px solid color-mix(in srgb, var(--sg-danger, #dc2626) 40%, var(--sg-border, #e6e8ec)); border-radius: 10px; background: color-mix(in srgb, var(--sg-danger, #dc2626) 8%, var(--sg-bg, #fff)); color: var(--sg-danger, #b3261e); font-size: 13.5px; }
-.st-btn { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; font: inherit; font-size: 13.5px; font-weight: 560; line-height: 1; border: 1px solid var(--sg-border, #e6e8ec); border-radius: 10px; background: var(--sg-bg, #fff); color: var(--sg-fg, inherit); cursor: pointer; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05); }
-.st-btn:hover { background: color-mix(in srgb, var(--sg-fg, #0f172a) 5%, var(--sg-bg, #fff)); }
-.st-btn:disabled { opacity: 0.5; cursor: default; box-shadow: none; }
-.st-btn--primary { border-color: transparent; color: #fff; background: linear-gradient(180deg, color-mix(in srgb, var(--sg-accent) 88%, #fff), var(--sg-accent)); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.14), 0 8px 18px -9px color-mix(in srgb, var(--sg-accent) 65%, transparent); }
-.st-btn--primary:hover { filter: brightness(1.06); }
-.home { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; margin-top: 6px; }
-.home__card { display: flex; flex-direction: column; gap: 6px; padding: 18px; border: 1px solid var(--sg-border, #e6e8ec); border-radius: 14px; text-decoration: none; color: inherit; background: var(--sg-bg, #fff); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05); }
-.home__card:hover { border-color: color-mix(in srgb, var(--sg-accent) 45%, var(--sg-border, #e6e8ec)); }
-.home__card strong { font-size: 15px; }
-.home__card span { font-size: 13px; color: var(--sg-muted, #64748b); line-height: 1.5; }
-.st-filter { display: flex; flex-direction: column; gap: 10px; padding: 14px; border: 1px solid var(--sg-border, #e6e8ec); border-radius: 12px; background: var(--sg-bg, #fff); align-self: start; }
-.st-filter__title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--sg-muted, #64748b); }
-.st-filter__row { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; font-weight: 600; color: var(--sg-muted, #64748b); }
-.st-filter__row select, .st-filter__row input { padding: 7px 9px; font: inherit; font-size: 13px; font-weight: 400; color: var(--sg-fg, inherit); background: var(--sg-input-bg, var(--sg-bg, #fff)); border: 1px solid var(--sg-input-border, var(--sg-border, #e6e8ec)); border-radius: 8px; }
-.st-record-card { border: 1px solid var(--sg-border, #e6e8ec); border-radius: 12px; background: var(--sg-bg, #fff); padding: 14px; align-self: start; }
-.st-record { margin: 0; display: flex; flex-direction: column; gap: 8px; }
-.st-record__row { display: grid; grid-template-columns: 40% 1fr; gap: 10px; align-items: baseline; border-bottom: 1px solid var(--sg-border, #f1f5f9); padding-bottom: 6px; }
-.st-record__row dt { margin: 0; font-size: 12px; font-weight: 600; color: var(--sg-muted, #64748b); }
-.st-record__row dd { margin: 0; font-size: 13.5px; color: var(--sg-fg, inherit); overflow-wrap: anywhere; }
-.st-screen { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; align-items: start; }
-/* Mobile: blocks stack full-width (a span-N block clamps to the single column). */
-@media (max-width: 720px) { .st-screen { grid-template-columns: 1fr; gap: 12px; } }
-/* Stack layout: every block full-width in a single flowing column (mobile-first). */
-.st-stack { display: flex; flex-direction: column; gap: 16px; align-items: stretch; }
-.st-stack > * { min-width: 0; width: 100%; }
-@media (max-width: 720px) { .st-stack { gap: 12px; } }
-/* Free-form canvas: blocks placed on a 12-column x fixed-row grid by cell coords. */
-.st-canvas { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: ${CANVAS_ROW_PX}px; gap: ${CANVAS_GAP_PX}px; align-items: stretch; }
-.st-canvas__cell { min-width: 0; min-height: 0; display: flex; flex-direction: column; }
-.st-canvas__cell > * { flex: 1; min-height: 0; }
-/* Narrow: an absolute canvas can't reflow, so fall back to a single stacked column. */
-@media (max-width: 720px) {
-  .st-canvas { display: flex; flex-direction: column; gap: 12px; }
-  .st-canvas__cell { grid-column: auto !important; grid-row: auto !important; min-height: ${CANVAS_ROW_PX * 4}px; }
-}
-/* Docking workspace: the SvDockManager fills a sized region (it owns its own scrolling). */
-.st-dock { height: min(74vh, 900px); min-height: 420px; }
-@media (max-width: 640px) { .st__title { font-size: 19px; } }
-.st-rowactions { display: inline-flex; gap: 6px; }
-.st-rowaction { padding: 3px 9px; font: inherit; font-size: 12px; font-weight: 550; line-height: 1.4; border: 1px solid var(--sg-border, #e6e8ec); border-radius: 7px; background: var(--sg-bg, #fff); color: var(--sg-fg, inherit); cursor: pointer; }
-.st-rowaction:hover { background: color-mix(in srgb, var(--sg-fg, #0f172a) 5%, var(--sg-bg, #fff)); }
-.st-rowaction--danger { color: #dc2626; border-color: color-mix(in srgb, #dc2626 40%, var(--sg-border, #e6e8ec)); }
-.st-rowaction--danger:hover { background: color-mix(in srgb, #dc2626 8%, var(--sg-bg, #fff)); }
-.st-cell-link { color: var(--sg-accent, #4f46e5); text-decoration: none; }
-.st-cell-link:hover { text-decoration: underline; }
-.st-cell-progress { display: flex; align-items: center; min-width: 80px; width: 100%; }
-.st-grid-toolbar { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; margin-bottom: 8px; }
-.st-treecell { display: inline-flex; align-items: center; gap: 4px; }
-.st-tree-toggle { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; padding: 0; border: none; background: none; color: var(--sg-muted, #94a3b8); font-size: 11px; cursor: pointer; border-radius: 4px; }
-.st-tree-toggle:hover { background: color-mix(in srgb, var(--sg-fg, #0f172a) 8%, transparent); color: var(--sg-fg, inherit); }
-.st-tree-spacer { display: inline-block; width: 18px; }
+const APP_CSS = `:root { --sg-accent: #4f46e5; color-scheme: light dark; }
+* { 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; }
+.st__sub { margin: 0; font-size: 14px; line-height: 1.6; color: var(--sg-muted, #64748b); max-width: 74ch; }
+.st__sub code { background: var(--sg-header-bg, #f1f5f9); padding: 1px 6px; border-radius: 5px; font-size: 0.9em; }
+.st__toolbar { display: flex; align-items: center; gap: 10px; }
+.st-hint { font-size: 12.5px; color: var(--sg-muted, #94a3b8); }
+.st-error { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0 0 16px; padding: 11px 14px; border: 1px solid color-mix(in srgb, var(--sg-danger, #dc2626) 40%, var(--sg-border, #e6e8ec)); border-radius: 10px; background: color-mix(in srgb, var(--sg-danger, #dc2626) 8%, var(--sg-bg, #fff)); color: var(--sg-danger, #b3261e); font-size: 13.5px; }
+.st-btn { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; font: inherit; font-size: 13.5px; font-weight: 560; line-height: 1; border: 1px solid var(--sg-border, #e6e8ec); border-radius: 10px; background: var(--sg-bg, #fff); color: var(--sg-fg, inherit); cursor: pointer; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05); }
+.st-btn:hover { background: color-mix(in srgb, var(--sg-fg, #0f172a) 5%, var(--sg-bg, #fff)); }
+.st-btn:disabled { opacity: 0.5; cursor: default; box-shadow: none; }
+.st-btn--primary { border-color: transparent; color: #fff; background: linear-gradient(180deg, color-mix(in srgb, var(--sg-accent) 88%, #fff), var(--sg-accent)); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.14), 0 8px 18px -9px color-mix(in srgb, var(--sg-accent) 65%, transparent); }
+.st-btn--primary:hover { filter: brightness(1.06); }
+.home { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; margin-top: 6px; }
+.home__card { display: flex; flex-direction: column; gap: 6px; padding: 18px; border: 1px solid var(--sg-border, #e6e8ec); border-radius: 14px; text-decoration: none; color: inherit; background: var(--sg-bg, #fff); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05); }
+.home__card:hover { border-color: color-mix(in srgb, var(--sg-accent) 45%, var(--sg-border, #e6e8ec)); }
+.home__card strong { font-size: 15px; }
+.home__card span { font-size: 13px; color: var(--sg-muted, #64748b); line-height: 1.5; }
+.st-filter { display: flex; flex-direction: column; gap: 10px; padding: 14px; border: 1px solid var(--sg-border, #e6e8ec); border-radius: 12px; background: var(--sg-bg, #fff); align-self: start; }
+.st-filter__title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--sg-muted, #64748b); }
+.st-filter__row { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; font-weight: 600; color: var(--sg-muted, #64748b); }
+.st-filter__row select, .st-filter__row input { padding: 7px 9px; font: inherit; font-size: 13px; font-weight: 400; color: var(--sg-fg, inherit); background: var(--sg-input-bg, var(--sg-bg, #fff)); border: 1px solid var(--sg-input-border, var(--sg-border, #e6e8ec)); border-radius: 8px; }
+.st-record-card { border: 1px solid var(--sg-border, #e6e8ec); border-radius: 12px; background: var(--sg-bg, #fff); padding: 14px; align-self: start; }
+.st-record { margin: 0; display: flex; flex-direction: column; gap: 8px; }
+.st-record__row { display: grid; grid-template-columns: 40% 1fr; gap: 10px; align-items: baseline; border-bottom: 1px solid var(--sg-border, #f1f5f9); padding-bottom: 6px; }
+.st-record__row dt { margin: 0; font-size: 12px; font-weight: 600; color: var(--sg-muted, #64748b); }
+.st-record__row dd { margin: 0; font-size: 13.5px; color: var(--sg-fg, inherit); overflow-wrap: anywhere; }
+.st-screen { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; align-items: start; }
+/* Mobile: blocks stack full-width (a span-N block clamps to the single column). */
+@media (max-width: 720px) { .st-screen { grid-template-columns: 1fr; gap: 12px; } }
+/* Stack layout: every block full-width in a single flowing column (mobile-first). */
+.st-stack { display: flex; flex-direction: column; gap: 16px; align-items: stretch; }
+.st-stack > * { min-width: 0; width: 100%; }
+@media (max-width: 720px) { .st-stack { gap: 12px; } }
+/* Free-form canvas: blocks placed on a 12-column x fixed-row grid by cell coords. */
+.st-canvas { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: ${CANVAS_ROW_PX}px; gap: ${CANVAS_GAP_PX}px; align-items: stretch; }
+.st-canvas__cell { min-width: 0; min-height: 0; display: flex; flex-direction: column; }
+.st-canvas__cell > * { flex: 1; min-height: 0; }
+/* Narrow: an absolute canvas can't reflow, so fall back to a single stacked column. */
+@media (max-width: 720px) {
+  .st-canvas { display: flex; flex-direction: column; gap: 12px; }
+  .st-canvas__cell { grid-column: auto !important; grid-row: auto !important; min-height: ${CANVAS_ROW_PX * 4}px; }
+}
+/* Docking workspace: the SvDockManager fills a sized region (it owns its own scrolling). */
+.st-dock { height: min(74vh, 900px); min-height: 420px; }
+@media (max-width: 640px) { .st__title { font-size: 19px; } }
+.st-rowactions { display: inline-flex; gap: 6px; }
+.st-rowaction { padding: 3px 9px; font: inherit; font-size: 12px; font-weight: 550; line-height: 1.4; border: 1px solid var(--sg-border, #e6e8ec); border-radius: 7px; background: var(--sg-bg, #fff); color: var(--sg-fg, inherit); cursor: pointer; }
+.st-rowaction:hover { background: color-mix(in srgb, var(--sg-fg, #0f172a) 5%, var(--sg-bg, #fff)); }
+.st-rowaction--danger { color: #dc2626; border-color: color-mix(in srgb, #dc2626 40%, var(--sg-border, #e6e8ec)); }
+.st-rowaction--danger:hover { background: color-mix(in srgb, #dc2626 8%, var(--sg-bg, #fff)); }
+.st-cell-link { color: var(--sg-accent, #4f46e5); text-decoration: none; }
+.st-cell-link:hover { text-decoration: underline; }
+.st-cell-progress { display: flex; align-items: center; min-width: 80px; width: 100%; }
+.st-grid-toolbar { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; margin-bottom: 8px; }
+.st-treecell { display: inline-flex; align-items: center; gap: 4px; }
+.st-tree-toggle { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; padding: 0; border: none; background: none; color: var(--sg-muted, #94a3b8); font-size: 11px; cursor: pointer; border-radius: 4px; }
+.st-tree-toggle:hover { background: color-mix(in srgb, var(--sg-fg, #0f172a) 8%, transparent); color: var(--sg-fg, inherit); }
+.st-tree-spacer { display: inline-block; width: 18px; }
 `;
 // NOTE: the generated app ships without a package-lock.json, so the workflows use
 // `npm install` (not `npm ci`) and omit setup-node's lockfile-dependent `cache: npm`
 // - both hard-fail when no lockfile is present. Commit a lockfile later to speed CI up.
 /** Universal CI: install + build + smoke tests on every push / PR. */
-const CI_WORKFLOW = `name: CI
-on:
-  push:
-    branches: [main]
-  pull_request:
-    branches: [main]
-jobs:
-  build:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v4
-      - uses: actions/setup-node@v4
-        with:
-          node-version: 20
-      - run: npm install
-      - run: npm run build
-      - run: npm test
+const CI_WORKFLOW = `name: CI
+on:
+  push:
+    branches: [main]
+  pull_request:
+    branches: [main]
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+      - run: npm install
+      - run: npm run build
+      - run: npm test
 `;
 /** Wrap deploy steps in the standard checkout + node + install prelude. */
 function deployWorkflow(steps) {
-    return `name: Deploy
-on:
-  push:
-    branches: [main]
-  workflow_dispatch:
-jobs:
-  deploy:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v4
-      - uses: actions/setup-node@v4
-        with:
-          node-version: 20
-      - run: npm install
+    return `name: Deploy
+on:
+  push:
+    branches: [main]
+  workflow_dispatch:
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+      - run: npm install
 ${steps}`;
 }
 function deployPlan(project) {
@@ -4874,17 +4948,17 @@ function deployPlan(project) {
                 dashboard: 'https://vercel.com/new',
                 label: 'Vercel',
                 secrets: ['VERCEL_TOKEN', 'VERCEL_ORG_ID', 'VERCEL_PROJECT_ID'],
-                deployWorkflow: deployWorkflow(`      - name: Deploy to Vercel
-        if: \${{ secrets.VERCEL_TOKEN != '' }}
-        env:
-          VERCEL_TOKEN: \${{ secrets.VERCEL_TOKEN }}
-          VERCEL_ORG_ID: \${{ secrets.VERCEL_ORG_ID }}
-          VERCEL_PROJECT_ID: \${{ secrets.VERCEL_PROJECT_ID }}
-        run: |
-          npm i -g vercel
-          vercel pull --yes --environment=production --token="$VERCEL_TOKEN"
-          vercel build --prod --token="$VERCEL_TOKEN"
-          vercel deploy --prebuilt --prod --token="$VERCEL_TOKEN"
+                deployWorkflow: deployWorkflow(`      - name: Deploy to Vercel
+        if: \${{ secrets.VERCEL_TOKEN != '' }}
+        env:
+          VERCEL_TOKEN: \${{ secrets.VERCEL_TOKEN }}
+          VERCEL_ORG_ID: \${{ secrets.VERCEL_ORG_ID }}
+          VERCEL_PROJECT_ID: \${{ secrets.VERCEL_PROJECT_ID }}
+        run: |
+          npm i -g vercel
+          vercel pull --yes --environment=production --token="$VERCEL_TOKEN"
+          vercel build --prod --token="$VERCEL_TOKEN"
+          vercel deploy --prebuilt --prod --token="$VERCEL_TOKEN"
 `),
             };
         case 'netlify':
@@ -4897,12 +4971,12 @@ function deployPlan(project) {
                 dashboard: 'https://app.netlify.com/start',
                 label: 'Netlify',
                 secrets: ['NETLIFY_AUTH_TOKEN', 'NETLIFY_SITE_ID'],
-                deployWorkflow: deployWorkflow(`      - name: Deploy to Netlify
-        if: \${{ secrets.NETLIFY_AUTH_TOKEN != '' }}
-        env:
-          NETLIFY_AUTH_TOKEN: \${{ secrets.NETLIFY_AUTH_TOKEN }}
-          NETLIFY_SITE_ID: \${{ secrets.NETLIFY_SITE_ID }}
-        run: npx netlify deploy --build --prod
+                deployWorkflow: deployWorkflow(`      - name: Deploy to Netlify
+        if: \${{ secrets.NETLIFY_AUTH_TOKEN != '' }}
+        env:
+          NETLIFY_AUTH_TOKEN: \${{ secrets.NETLIFY_AUTH_TOKEN }}
+          NETLIFY_SITE_ID: \${{ secrets.NETLIFY_SITE_ID }}
+        run: npx netlify deploy --build --prod
 `),
             };
         case 'cloudflare':
@@ -4915,13 +4989,13 @@ function deployPlan(project) {
                 dashboard: 'https://dash.cloudflare.com/?to=/:account/pages/new',
                 label: 'Cloudflare Pages',
                 secrets: ['CLOUDFLARE_API_TOKEN', 'CLOUDFLARE_ACCOUNT_ID'],
-                deployWorkflow: deployWorkflow(`      - run: npm run build
-      - name: Deploy to Cloudflare Pages
-        if: \${{ secrets.CLOUDFLARE_API_TOKEN != '' }}
-        env:
-          CLOUDFLARE_API_TOKEN: \${{ secrets.CLOUDFLARE_API_TOKEN }}
-          CLOUDFLARE_ACCOUNT_ID: \${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
-        run: npx wrangler pages deploy .svelte-kit/cloudflare --project-name=${slug}
+                deployWorkflow: deployWorkflow(`      - run: npm run build
+      - name: Deploy to Cloudflare Pages
+        if: \${{ secrets.CLOUDFLARE_API_TOKEN != '' }}
+        env:
+          CLOUDFLARE_API_TOKEN: \${{ secrets.CLOUDFLARE_API_TOKEN }}
+          CLOUDFLARE_ACCOUNT_ID: \${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
+        run: npx wrangler pages deploy .svelte-kit/cloudflare --project-name=${slug}
 `),
             };
         case 'node':
@@ -5199,40 +5273,40 @@ function smokeTestFile(project) {
     });
     const blocks = project.entities.map((e) => {
         const n = namesFor(e);
-        return `describe(${JSON.stringify(n.label)}, () => {
-  it('exposes grid columns and form fields', () => {
-    expect(schemaToColumns(${n.schemaVar}).length).toBeGreaterThan(0)
-    expect(schemaToFormFields(${n.schemaVar}).length).toBeGreaterThan(0)
-  })
-
-  it('round-trips create -> read -> delete through an in-memory source', async () => {
-    const idField = ${n.schemaVar}.idField ?? ${n.schemaVar}.fields.find((f) => f.primaryKey)?.field ?? 'id'
-    const source = createInMemoryDataSource<${n.type}>([], ${n.schemaVar})
-    await source.createRow({ [idField]: 'smoke-1' } as unknown as Partial<${n.type}>)
-    expect((await source.getRows({ startRow: 0, endRow: 100, pageIndex: 0, pageSize: 100, sortModel: [], filterModel: {} })).rowCount).toBe(1)
-    await source.deleteRow('smoke-1')
-    expect((await source.getRows({ startRow: 0, endRow: 100, pageIndex: 0, pageSize: 100, sortModel: [], filterModel: {} })).rowCount).toBe(0)
-  })
+        return `describe(${JSON.stringify(n.label)}, () => {
+  it('exposes grid columns and form fields', () => {
+    expect(schemaToColumns(${n.schemaVar}).length).toBeGreaterThan(0)
+    expect(schemaToFormFields(${n.schemaVar}).length).toBeGreaterThan(0)
+  })
+
+  it('round-trips create -> read -> delete through an in-memory source', async () => {
+    const idField = ${n.schemaVar}.idField ?? ${n.schemaVar}.fields.find((f) => f.primaryKey)?.field ?? 'id'
+    const source = createInMemoryDataSource<${n.type}>([], ${n.schemaVar})
+    await source.createRow({ [idField]: 'smoke-1' } as unknown as Partial<${n.type}>)
+    expect((await source.getRows({ startRow: 0, endRow: 100, pageIndex: 0, pageSize: 100, sortModel: [], filterModel: {} })).rowCount).toBe(1)
+    await source.deleteRow('smoke-1')
+    expect((await source.getRows({ startRow: 0, endRow: 100, pageIndex: 0, pageSize: 100, sortModel: [], filterModel: {} })).rowCount).toBe(0)
+  })
 })`;
     });
-    return `// Smoke tests generated by SvGrid Studio. Run with \`npm test\`.
-// They prove every entity's schema still renders (grid columns + form fields)
-// and round-trips through the data-source layer, so a schema edit that would
-// break a screen fails here first. Regenerating the app refreshes this file.
-import { describe, it, expect } from 'vitest'
-import { schemaToColumns, schemaToFormFields, createInMemoryDataSource } from '@svgrid/enterprise'
-import { ${imports.join(', ')} } from './schemas'
-
-${blocks.join('\n\n')}
+    return `// Smoke tests generated by SvGrid Studio. Run with \`npm test\`.
+// They prove every entity's schema still renders (grid columns + form fields)
+// and round-trips through the data-source layer, so a schema edit that would
+// break a screen fails here first. Regenerating the app refreshes this file.
+import { describe, it, expect } from 'vitest'
+import { schemaToColumns, schemaToFormFields, createInMemoryDataSource } from '@svgrid/enterprise'
+import { ${imports.join(', ')} } from './schemas'
+
+${blocks.join('\n\n')}
 `;
 }
-const VITEST_CONFIG = `import { defineConfig } from 'vitest/config'
-
-// Node-only test runner for the generated smoke tests (no Svelte/DOM needed).
-// Kept separate from vite.config so the SvelteKit plugin doesn't load here.
-export default defineConfig({
-  test: { environment: 'node', include: ['src/**/*.test.ts'] },
-})
+const VITEST_CONFIG = `import { defineConfig } from 'vitest/config'
+
+// Node-only test runner for the generated smoke tests (no Svelte/DOM needed).
+// Kept separate from vite.config so the SvelteKit plugin doesn't load here.
+export default defineConfig({
+  test: { environment: 'node', include: ['src/**/*.test.ts'] },
+})
 `;
 /**
  * Emit the COMPLETE runnable SvelteKit + Vite app: the generated screens/data
@@ -5262,38 +5336,38 @@ function cronScheduleFiles(project, plan) {
                 contents: JSON.stringify({ crons }, null, 2) + '\n',
             }];
     }
-    const steps = jobs.map((j) => `      - name: ${j.name} (${j.cron})
-        if: \${{ github.event_name == 'workflow_dispatch' || github.event.schedule == '${j.cron}' }}
-        run: |
-          curl -fsS -X POST "$CRON_URL?job=${encodeURIComponent(j.id)}" \\
-            -H "authorization: Bearer $CRON_SECRET"
+    const steps = jobs.map((j) => `      - name: ${j.name} (${j.cron})
+        if: \${{ github.event_name == 'workflow_dispatch' || github.event.schedule == '${j.cron}' }}
+        run: |
+          curl -fsS -X POST "$CRON_URL?job=${encodeURIComponent(j.id)}" \\
+            -H "authorization: Bearer $CRON_SECRET"
 `).join('');
     const schedules = [...new Set(jobs.map((j) => j.cron))].map((c) => `    - cron: '${c}'`).join('\n');
     return [{
             path: '.github/workflows/cron.yml',
             description: 'Scheduled job runner: calls /api/cron on the deployed app.',
-            contents: `# Scheduled jobs for the generated app. GitHub runs this on the schedules
-# below and it calls the app's /api/cron endpoint.
-#
-# Set two repository secrets before it does anything:
-#   CRON_URL     https://<your-app>/api/cron
-#   CRON_SECRET  the same value as the app's CRON_SECRET env var
-# Until then the job short-circuits, so CI stays green.
-name: Scheduled jobs
-
-on:
-  schedule:
-${schedules}
-  workflow_dispatch:
-
-jobs:
-  cron:
-    runs-on: ubuntu-latest
-    if: \${{ secrets.CRON_URL != '' && secrets.CRON_SECRET != '' }}
-    env:
-      CRON_URL: \${{ secrets.CRON_URL }}
-      CRON_SECRET: \${{ secrets.CRON_SECRET }}
-    steps:
+            contents: `# Scheduled jobs for the generated app. GitHub runs this on the schedules
+# below and it calls the app's /api/cron endpoint.
+#
+# Set two repository secrets before it does anything:
+#   CRON_URL     https://<your-app>/api/cron
+#   CRON_SECRET  the same value as the app's CRON_SECRET env var
+# Until then the job short-circuits, so CI stays green.
+name: Scheduled jobs
+
+on:
+  schedule:
+${schedules}
+  workflow_dispatch:
+
+jobs:
+  cron:
+    runs-on: ubuntu-latest
+    if: \${{ secrets.CRON_URL != '' && secrets.CRON_SECRET != '' }}
+    env:
+      CRON_URL: \${{ secrets.CRON_URL }}
+      CRON_SECRET: \${{ secrets.CRON_SECRET }}
+    steps:
 ${steps}`,
         }];
 }
@@ -5349,37 +5423,37 @@ export function emitStudioFragment(project) {
     const depList = Object.entries(deps).map(([name, v]) => `  ${name}@${v}`).join('\n');
     const envKeys = envKeysUsed(allSource);
     const libFiles = content.filter((f) => f.path.startsWith('src/lib/')).map((f) => `- \`${f.path}\``);
-    const fragmentMd = `# Studio fragment - drop into your SvelteKit app
-
-This folder holds ONLY app content - routes under \`src/routes\` and modules under
-\`src/lib\` (plus \`db/\` if present). It has no package.json, config, or app shell,
-so it drops into your existing SvelteKit app.
-
-## 1. Copy the files
-Merge \`src/routes/*\` and \`src/lib/*\` into your app's \`src/\`. \`$lib\` is a stock
-SvelteKit alias, so imports resolve with no config. Watch for filename collisions
-with your own \`src/lib\` (e.g. \`schemas.ts\`, \`data.ts\`) - rename if needed.
-
-## 2. Install dependencies
-\`\`\`bash
-npm install ${Object.keys(deps).filter((d) => d !== '@svgrid/grid' && d !== '@svgrid/enterprise').join(' ') || '@svgrid/grid @svgrid/enterprise'}
-\`\`\`
-Full list this fragment imports:
-\`\`\`
-${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.
-
-## 4. What your app must provide
-The full-app nav shell, home redirect, auth guard, RBAC bootstrap, i18n provider,
-and theme toggle live in the bundle's \`+layout.svelte\` - NOT here. Wire nav to the
-generated routes from your own layout.${envKeys.length ? `\n\n## Environment\nSet these where your app reads env:\n${envKeys.map((k) => `- \`${k}\``).join('\n')}` : ''}
-
-## Files included
-${libFiles.join('\n')}
+    const fragmentMd = `# Studio fragment - drop into your SvelteKit app
+
+This folder holds ONLY app content - routes under \`src/routes\` and modules under
+\`src/lib\` (plus \`db/\` if present). It has no package.json, config, or app shell,
+so it drops into your existing SvelteKit app.
+
+## 1. Copy the files
+Merge \`src/routes/*\` and \`src/lib/*\` into your app's \`src/\`. \`$lib\` is a stock
+SvelteKit alias, so imports resolve with no config. Watch for filename collisions
+with your own \`src/lib\` (e.g. \`schemas.ts\`, \`data.ts\`) - rename if needed.
+
+## 2. Install dependencies
+\`\`\`bash
+npm install ${Object.keys(deps).filter((d) => d !== '@svgrid/grid' && d !== '@svgrid/enterprise').join(' ') || '@svgrid/grid @svgrid/enterprise'}
+\`\`\`
+Full list this fragment imports:
+\`\`\`
+${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.
+
+## 4. What your app must provide
+The full-app nav shell, home redirect, auth guard, RBAC bootstrap, i18n provider,
+and theme toggle live in the bundle's \`+layout.svelte\` - NOT here. Wire nav to the
+generated routes from your own layout.${envKeys.length ? `\n\n## Environment\nSet these where your app reads env:\n${envKeys.map((k) => `- \`${k}\``).join('\n')}` : ''}
+
+## Files included
+${libFiles.join('\n')}
 `;
     return [
         ...content,