@human-synthesis/norns 0.2.0 → 0.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@human-synthesis/norns",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "Norns — SvelteKit with Civet, Pug, and the .n / .civet / .c file extensions",
   "license": "MIT",
   "author": "Daniel Teodoroiu (https://humansynthesis.ai)",

package/src/kernel/emit-units.js

@@ -68,6 +68,12 @@ function parseUnitExpr(exprSrc, states) {
 	return withStateLiterals(parseExpr(exprSrc), states ?? new Set());
 }
 
+/** `dealBoard` → `Deal Board`, `leads` → `Leads`. */
+export function humanizeName(name) {
+	const spaced = String(name).replaceAll('_', ' ').replaceAll('-', ' ').replace(/([a-z0-9])([A-Z])/g, '$1 $2');
+	return spaced.charAt(0).toUpperCase() + spaced.slice(1);
+}
+
 function whereCall(exprSrc, { entity, ownerField, states }) {
 	const ast = JSON.stringify(parseUnitExpr(exprSrc, states));
 	const owner = ownerField ? `, ownerField: ${JSON.stringify(ownerField)}` : '';
@@ -764,6 +770,8 @@ export function emitModulePages(moduleName, moduleSpec, specs) {
 			);
 		} else {
 			pug.push(`section.norns-page`);
+			const titleFrom = ['index', 'home', 'main', 'page'].includes(name) ? moduleName : name;
+			pug.push(`\th1.norns-page-title ${humanizeName(titleFrom)}`);
 			for (const c of components) {
 				pug.push(`\t${c.tag}(${c.props.join(' ')})`);
 			}

package/src/kernel/generate.js

@@ -25,6 +25,7 @@ import {
 	componentKey,
 	endpointsEmitter,
 	jobsEmitter,
+	humanizeName,
 	pagesEmitter,
 	policiesEmitter,
 	queriesEmitter,
@@ -686,24 +687,57 @@ export function liveRouteFile() {
  * then the generated token-override sheet (after, so `app.settings.tokens`
  * wins over library defaults pulled in via app.css).
  *
+ * When the specs declare statically-routed Pages, the layout is an admin
+ * shell: sidebar nav (one link per Page, active state via aria-current)
+ * around the content. Styled by the `.norns-*` atoms in norns-ui; override
+ * through `app.settings.tokens` or `src/app.css`.
+ *
+ * @param {{ app?: *, modules: Record<string, *> }} specs
  * @param {boolean} hasAppCss
  * @param {boolean} [hasTokens]
  * @returns {{ path: string, text: string }}
  */
-export function layoutFile(hasAppCss, hasTokens = false) {
+export function layoutFile(specs, hasAppCss, hasTokens = false) {
+	const nav = [];
+	for (const [moduleName, spec] of Object.entries(specs?.modules ?? {})) {
+		for (const [name, p] of Object.entries(spec?.pages ?? {})) {
+			const route = p?.route;
+			if (typeof route !== 'string' || route.includes('[') || route.includes(':')) continue;
+			// Generic page names label as their module: companies.Page.index → "Companies".
+			const label = ['index', 'home', 'main', 'page'].includes(name) ? moduleName : name;
+			nav.push({ href: route, label: humanizeName(label) });
+		}
+	}
+	nav.sort((a, b) => a.href.localeCompare(b.href));
+	const brand = humanizeName(specs?.app?.name ?? 'App');
+
+	const script = [
+		'<script>',
+		...(hasAppCss ? ["\timport '$custom/app.css';"] : []),
+		...(hasTokens ? ["\timport './tokens.css';"] : []),
+		...(nav.length ? ["\timport { page } from '$app/state';"] : []),
+		'\tlet { children } = $props();',
+		...(nav.length ? [`\tconst nav = ${JSON.stringify(nav)};`] : []),
+		'</script>'
+	];
+	const body = nav.length
+		? [
+				'<div class="norns-shell">',
+				'\t<aside class="norns-sidebar">',
+				`\t\t<div class="norns-brand">${brand}</div>`,
+				'\t\t<nav class="norns-nav">',
+				'\t\t\t{#each nav as item (item.href)}',
+				"\t\t\t\t<a href={item.href} aria-current={page.url.pathname === item.href ? 'page' : undefined}>{item.label}</a>",
+				'\t\t\t{/each}',
+				'\t\t</nav>',
+				'\t</aside>',
+				'\t<main class="norns-main">{@render children()}</main>',
+				'</div>'
+			]
+		: ['{@render children()}'];
 	return {
 		path: 'routes/+layout.svelte',
-		text: [
-			'<!-- GENERATED by `norns generate` — do not edit. -->',
-			'<script>',
-			...(hasAppCss ? ["\timport '$custom/app.css';"] : []),
-			...(hasTokens ? ["\timport './tokens.css';"] : []),
-			'\tlet { children } = $props();',
-			'</script>',
-			'',
-			'{@render children()}',
-			''
-		].join('\n')
+		text: ['<!-- GENERATED by `norns generate` — do not edit. -->', ...script, '', ...body, ''].join('\n')
 	};
 }
 
@@ -808,7 +842,7 @@ export function generateApp(dir, opts = {}) {
 
 	// App-level: a root layout so generated routes render inside a shell.
 	if (pending.length > 0 || !existsSync(join(outRoot, 'routes', '+layout.svelte'))) {
-		pending.push(layoutFile(existsSync(join(appRoot, 'src', 'app.css')), Boolean(overrides)));
+		pending.push(layoutFile(specs, existsSync(join(appRoot, 'src', 'app.css')), Boolean(overrides)));
 	}
 
 	const failures = selfCheck(pending);