getfilepress 0.1.10 → 0.1.12

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "getfilepress",
-	"version": "0.1.10",
+	"version": "0.1.12",
 	"private": false,
 	"type": "module",
 	"description": "FilePress — file-based Markdown blog engine. Link this package from a content-only site (config + posts), then run `filepress build`.",

package/packages/app/src/lib/genie/GeniePanel.svelte

@@ -554,6 +554,10 @@
 								{loading ? `Asking Ollama… ${formatWait(jobSecs)}` : 'Refine & activate'}
 							</button>
 							<p class="genie-muted">
+								The raw Ollama JSON is printed in the <code>filepress dev</code> terminal and saved to
+								<code>.filepress-genie/last-ollama.json</code>. “Icy / Antarctica / bright” means a
+								light page — activate <strong>baseline</strong> in History first if a prior dark look
+								is still the seed.
 								<code>gemma4:12b</code> often spends the first few minutes loading into VRAM — that is
 								normal. Progress prints in the filepress terminal every 15s. Raise the budget with
 								<code>FILEPRESS_OLLAMA_TIMEOUT_MS</code> (default 10 minutes). Tip: set

package/packages/app/src/lib/genie/ops.ts

@@ -25,6 +25,7 @@ import type { DesignBrief, SiteIR } from '../../../../import/src/ir.ts';
 import {
 	activateVersion,
 	ensureBaseline,
+	genieRoot,
 	getActive,
 	listVersions,
 	readVersionBrief,
@@ -416,7 +417,10 @@ export async function refineWithOllama(
 		inspireSignals: [],
 		seed,
 		strictParse: true,
-		logLabel
+		logLabel,
+		intent: 'steer',
+		steer: prompt,
+		dumpPath: join(genieRoot(siteRoot), 'last-ollama.json')
 	});
 	const themeCss = themeCssFromBrief(brief);
 	const meta = writeSnapshot(siteRoot, {

package/packages/app/src/lib/theme-entry.ts

@@ -1,8 +1,9 @@
 /**
- * Essay chrome + fonts, then a named preset, then the site theme.
- * Site rules use higher-specificity selectors (`:root:root`, `header.site-header …`)
- * so they win even if Vite emits Essay CSS after the site sheet.
+ * Layer order is declared first. Essay chrome, then preset, then site theme.
+ * Site rules live in `@layer site` so they win even if Vite injects Essay CSS
+ * after the site sheet (dev) or splits the CSS (build).
  */
+import './theme-layers.css';
 import '@filepress/core/theme';
 import '$site-preset';
 import '$site-theme';

package/packages/app/src/lib/theme-layers.css

@@ -0,0 +1,3 @@
+/* Essay first, site last. Declared before either sheet so order does not
+ * depend on Vite inject timing. */
+@layer filepress, site;

package/packages/app/vite-plugin-critical-theme.ts

@@ -2,28 +2,42 @@ import { existsSync, readFileSync, writeFileSync } from 'node:fs';
 import type { Plugin } from 'vite';
 
 /**
- * Extract early paint tokens from the site theme: `:root` blocks (including
- * those nested in `prefers-color-scheme` media) and top-level `body { ... }`.
+ * @import cannot live inside @layer. Pull them out, wrap the rest.
+ * Quoted URLs may contain `;` (Google Fonts `wght@400;700`).
  */
-export function extractCriticalTheme(css: string): string {
-	const chunks: string[] = [];
+const IMPORT_RE = /@import\s+(?:url\(\s*)?(["'])(?:\\.|(?!\1).)*\1\s*\)?\s*;/g;
 
-	// Prefer `:root:root` (higher specificity site tokens) when present.
-	for (const m of css.matchAll(/:root(?::root)?\s*\{[^}]*\}/g)) {
-		chunks.push(m[0]);
-	}
+export function takeImports(css: string): { imports: string[]; rest: string } {
+	const imports: string[] = [];
+	const rest = css.replace(IMPORT_RE, (m) => {
+		imports.push(m.trim());
+		return '';
+	});
+	return { imports, rest };
+}
 
-	for (const m of css.matchAll(
-		/@media\s*\([^)]*prefers-color-scheme[^)]*\)\s*\{\s*:root(?::root)?\s*\{[^}]*\}\s*\}/g
-	)) {
-		chunks.push(m[0]);
-	}
+export function hoistImportsAndLayer(css: string, layer: string): string {
+	const { imports, rest } = takeImports(css);
+	const body = rest.trim();
+	const hoisted = imports.length ? `${imports.join('\n')}\n` : '';
+	if (!body) return hoisted;
+	return `${hoisted}@layer ${layer} {\n${body}\n}\n`;
+}
 
-	for (const m of css.matchAll(/(?:^|\n)(?:html\s+)?body\s*\{[^}]*\}/g)) {
-		chunks.push(m[0].trim());
-	}
+/** Site tokens must beat later Essay `:root` (same specificity, later source). */
+export function boostRoot(css: string): string {
+	return css.replace(/:root(?::root)?/g, ':root:root');
+}
 
-	return chunks.join('\n');
+/**
+ * Inline the site theme for first paint (minus remote @import).
+ * Cascade layer `site` wins over Essay even after Vite injects core CSS.
+ */
+export function extractCriticalTheme(css: string): string {
+	const withoutImport = takeImports(css).rest;
+	const meaningful = withoutImport.replace(/\/\*[\s\S]*?\*\//g, '').trim();
+	if (!meaningful) return '';
+	return `@layer filepress, site;\n${hoistImportsAndLayer(boostRoot(withoutImport), 'site')}`;
 }
 
 export function writeCriticalThemeModule(siteThemePath: string, outPath: string): string {
@@ -41,16 +55,32 @@ export function writeCriticalThemeModule(siteThemePath: string, outPath: string)
 	return critical;
 }
 
+function fileId(id: string): string {
+	return id.replace(/\\/g, '/').split('?')[0] ?? id;
+}
+
 /**
- * Keep `$lib/critical-theme.generated.ts` in sync with the site theme so
- * layout can inline tokens without a Vite virtual module (SSR-safe).
+ * Keep `$critical-theme` in sync, and put Essay vs site CSS in cascade
+ * layers so Vite's inject order cannot flash the default look.
  */
 export function criticalThemePlugin(siteThemePath: string, outPath: string): Plugin {
+	const siteNorm = siteThemePath.replace(/\\/g, '/');
+
 	return {
 		name: 'filepress-critical-theme',
 		buildStart() {
 			writeCriticalThemeModule(siteThemePath, outPath);
 		},
+		transform(code, id) {
+			const path = fileId(id);
+			if (path === siteNorm) {
+				return hoistImportsAndLayer(boostRoot(code), 'site');
+			}
+			if (path.endsWith('/lib/styles/theme.css') || path.includes('/lib/styles/presets/')) {
+				return hoistImportsAndLayer(code, 'filepress');
+			}
+			return null;
+		},
 		configureServer(server) {
 			writeCriticalThemeModule(siteThemePath, outPath);
 			server.watcher.add(siteThemePath);

package/packages/import/src/ollama.ts

@@ -1,7 +1,170 @@
+import { mkdirSync, writeFileSync } from 'node:fs';
+import { dirname } from 'node:path';
 import type { DesignBrief, SiteIR } from './ir.ts';
 import type { InspirationSignals } from './inspire.ts';
 import { DEFAULT_BRIEF, parseBriefJson } from './theme.ts';
 
+export type BriefIntent = 'import' | 'steer';
+
+const BRIEF_SHAPE = `{
+  "mood": "short phrase",
+  "do": ["..."],
+  "dont": ["..."],
+  "tokens": {
+    "accent": "#rrggbb",
+    "accentStrong": "#rrggbb",
+    "bg": "#rrggbb",
+    "ink": "#rrggbb",
+    "inkSoft": "#rrggbb",
+    "surface": "#rrggbb",
+    "rule": "#rrggbb",
+    "ruleStrong": "#rrggbb"
+  },
+  "density": "sparse" | "balanced" | "dense",
+  "paletteMode": "dark" | "light",
+  "fonts": {
+    "serif": "Font Name",
+    "sans": "Font Name",
+    "mono": "Font Name",
+    "googleHref": "https://fonts.googleapis.com/css2?..." or null
+  },
+  "hero": "bold" | "editorial",
+  "atmosphere": "noise" | "none",
+  "navStyle": "uppercase-tracked" | "soft",
+  "elevatedCards": true | false,
+  "cssNotes": ["..."]
+}`;
+
+/** Paper / ice defaults when the author asked for light and the model still returns a cave. */
+export const LIGHT_FLOOR = {
+	bg: '#f3f7fb',
+	surface: '#ffffff',
+	ink: '#16324a',
+	inkSoft: '#3d5a70',
+	rule: '#c5d6e4',
+	ruleStrong: '#8eafc8',
+	accent: '#1a6fa8',
+	accentStrong: '#0e4d7a'
+};
+
+export function paletteHintFromSteer(text: string): 'light' | 'dark' | null {
+	const t = text.toLowerCase();
+	const wantsLight =
+		/\b(light|bright|white|snow|ice|icy|antarctica|antarctic|arctic|glacier|frost|daylight|crisp|parchment|paper)\b/.test(
+			t
+		);
+	const wantsDark = /\b(dark|night|black|midnight|noir|charcoal|obsidian)\b/.test(t);
+	if (wantsLight && !wantsDark) return 'light';
+	if (wantsDark && !wantsLight) return 'dark';
+	if (wantsLight) return 'light';
+	if (wantsDark) return 'dark';
+	return null;
+}
+
+export function hexRelativeLuminance(hex: string | undefined): number | null {
+	if (!hex) return null;
+	const m = hex.trim().match(/^#([0-9a-f]{3}|[0-9a-f]{6})$/i);
+	if (!m) return null;
+	let h = m[1];
+	if (h.length === 3) h = [...h].map((c) => `${c}${c}`).join('');
+	const n = parseInt(h, 16);
+	const r = (n >> 16) & 255;
+	const g = (n >> 8) & 255;
+	const b = n & 255;
+	return (0.2126 * r + 0.7152 * g + 0.0722 * b) / 255;
+}
+
+export function applyPaletteHint(brief: DesignBrief, hint: 'light' | 'dark' | null): DesignBrief {
+	if (!hint) return brief;
+	const tokens = { ...brief.tokens };
+	if (hint === 'light') {
+		const bgLum = hexRelativeLuminance(tokens.bg);
+		const inkLum = hexRelativeLuminance(tokens.ink);
+		if (bgLum === null || bgLum < 0.75) {
+			tokens.bg = LIGHT_FLOOR.bg;
+			tokens.surface = LIGHT_FLOOR.surface;
+			tokens.rule = tokens.rule && (hexRelativeLuminance(tokens.rule) ?? 0) > 0.55 ? tokens.rule : LIGHT_FLOOR.rule;
+			tokens.ruleStrong =
+				tokens.ruleStrong && (hexRelativeLuminance(tokens.ruleStrong) ?? 0) > 0.4
+					? tokens.ruleStrong
+					: LIGHT_FLOOR.ruleStrong;
+		}
+		if (inkLum === null || inkLum > 0.45) {
+			tokens.ink = LIGHT_FLOOR.ink;
+			tokens.inkSoft = LIGHT_FLOOR.inkSoft;
+		}
+		return { ...brief, paletteMode: 'light', tokens };
+	}
+	return { ...brief, paletteMode: 'dark' };
+}
+
+export function buildDesignBriefPrompt(opts: {
+	intent: BriefIntent;
+	seed: DesignBrief;
+	ir: SiteIR;
+	inspireSummaries: string[];
+	inspireSignals: InspirationSignals[];
+	steer?: string;
+}): { system: string; user: string } {
+	const notes = opts.inspireSignals.flatMap((s) => s.notes).join('; ') || '(none)';
+	const snippets =
+		opts.inspireSummaries.map((s, i) => `(${i + 1}) ${s}`).join('\n') || '(none)';
+	if (opts.intent === 'steer') {
+		return {
+			system:
+				'You output only valid JSON. Honor the author\'s written palette. Light, ice, snow, or Antarctica means a bright page — never a black one unless they also say dark or night.',
+			user: `You are restyling a filepress Essay site from the author's written direction.
+The seed is only a starting point. When the direction conflicts with the seed, the direction wins.
+Return ONLY JSON (no fences) with this shape:
+${BRIEF_SHAPE}
+
+Hard rules:
+- Follow the author's palette. Light / bright / white / snow / ice / Antarctica / daylight → paletteMode "light", background #e8 or lighter (paper, snow, ice), dark readable ink. Do not use near-black backgrounds.
+- "Cold" or "icy" is color temperature (blue, white, crisp) — not a night scene unless they also say dark/night/black.
+- Dark/night/black only when the author asks for that.
+- Do not invent marketing section layouts.
+- Avoid purple-on-white clichés.
+
+Author direction:
+${opts.steer?.trim() || '(none)'}
+
+Seed brief (override freely when the direction conflicts):
+${JSON.stringify(opts.seed, null, 2)}
+
+Site identity (content only — do not force its old palette):
+${JSON.stringify(opts.ir.identity, null, 2)}
+`
+		};
+	}
+	return {
+		system:
+			'You output only valid JSON. Preserve dark inspiration palettes; do not flatten them into cream editorial.',
+		user: `You are a design director restyling a personal Markdown blog (filepress Essay chrome).
+The seed brief below was extracted from inspiration site CSS/fonts. Refine it — keep the punch.
+Return ONLY JSON (no fences) with this shape:
+${BRIEF_SHAPE}
+
+Hard rules:
+- If inspiration is dark/modern, paletteMode MUST stay "dark" with bold hero + noise + tracked nav.
+- Personal essay site: do NOT invent marketing section layouts.
+- Prefer inspiration fonts/colors over the source site's cream-editorial look.
+- Avoid purple-on-white clichés.
+
+Seed brief (from inspiration extraction):
+${JSON.stringify(opts.seed, null, 2)}
+
+Site identity (content only — do not force its old palette):
+${JSON.stringify(opts.ir.identity, null, 2)}
+
+Inspiration notes:
+${notes}
+
+Inspiration text snippets:
+${snippets}
+`
+	};
+}
+
 /** Strip trailing slashes; used to compare Genie picker values with env. */
 export function normalizeOllamaHost(host: string): string {
 	return host.trim().replace(/\/+$/, '');
@@ -147,62 +310,28 @@ export async function generateDesignBrief(opts: {
 	/** When true, unparseable model JSON fails instead of silently using the seed. */
 	strictParse?: boolean;
 	logLabel?: string;
+	/** `steer` uses the author-direction prompt; default is the import/inspire prompt. */
+	intent?: BriefIntent;
+	steer?: string;
+	/** Write raw + applied brief JSON here (Genie: `.filepress-genie/last-ollama.json`). */
+	dumpPath?: string;
 }): Promise<DesignBrief> {
 	const host = opts.host.replace(/\/+$/, '');
 	const timeoutMs = ollamaChatTimeoutMs();
 	const started = Date.now();
 	const logLabel = opts.logLabel ?? `filepress: Ollama ${opts.model} @ ${host}`;
-	console.log(`${logLabel}: starting chat (up to ${Math.round(timeoutMs / 1000)}s)`);
-	const prompt = `You are a design director restyling a personal Markdown blog (filepress Essay chrome).
-The seed brief below was extracted from inspiration site CSS/fonts. Refine it — keep the punch.
-Return ONLY JSON (no fences) with this shape:
-{
-  "mood": "short phrase",
-  "do": ["..."],
-  "dont": ["..."],
-  "tokens": {
-    "accent": "#rrggbb",
-    "accentStrong": "#rrggbb",
-    "bg": "#rrggbb",
-    "ink": "#rrggbb",
-    "inkSoft": "#rrggbb",
-    "surface": "#rrggbb",
-    "rule": "#rrggbb",
-    "ruleStrong": "#rrggbb"
-  },
-  "density": "sparse" | "balanced" | "dense",
-  "paletteMode": "dark" | "light",
-  "fonts": {
-    "serif": "Font Name",
-    "sans": "Font Name",
-    "mono": "Font Name",
-    "googleHref": "https://fonts.googleapis.com/css2?..." or null
-  },
-  "hero": "bold" | "editorial",
-  "atmosphere": "noise" | "none",
-  "navStyle": "uppercase-tracked" | "soft",
-  "elevatedCards": true | false,
-  "cssNotes": ["..."]
-}
-
-Hard rules:
-- If inspiration is dark/modern, paletteMode MUST stay "dark" with bold hero + noise + tracked nav.
-- Personal essay site: do NOT invent marketing section layouts.
-- Prefer inspiration fonts/colors over the source site's cream-editorial look.
-- Avoid purple-on-white clichés.
-
-Seed brief (from inspiration extraction):
-${JSON.stringify(opts.seed, null, 2)}
-
-Site identity (content only — do not force its old palette):
-${JSON.stringify(opts.ir.identity, null, 2)}
-
-Inspiration notes:
-${opts.inspireSignals.flatMap((s) => s.notes).join('; ') || '(none)'}
-
-Inspiration text snippets:
-${opts.inspireSummaries.map((s, i) => `(${i + 1}) ${s}`).join('\n') || '(none)'}
-`;
+	const intent = opts.intent ?? 'import';
+	const hint = intent === 'steer' ? paletteHintFromSteer(opts.steer ?? '') : null;
+	const messages = buildDesignBriefPrompt({
+		intent,
+		seed: opts.seed,
+		ir: opts.ir,
+		inspireSummaries: opts.inspireSummaries,
+		inspireSignals: opts.inspireSignals,
+		steer: opts.steer
+	});
+	console.log(`${logLabel}: starting chat (up to ${Math.round(timeoutMs / 1000)}s) intent=${intent}`);
+	if (hint) console.log(`${logLabel}: author palette hint = ${hint}`);
 
 	let content = '';
 	try {
@@ -215,12 +344,8 @@ ${opts.inspireSummaries.map((s, i) => `(${i + 1}) ${s}`).join('\n') || '(none)'}
 				format: 'json',
 				options: { temperature: 0.35 },
 				messages: [
-					{
-						role: 'system',
-						content:
-							'You output only valid JSON. Preserve dark inspiration palettes; do not flatten them into cream editorial.'
-					},
-					{ role: 'user', content: prompt }
+					{ role: 'system', content: messages.system },
+					{ role: 'user', content: messages.user }
 				]
 			}),
 			signal: AbortSignal.timeout(timeoutMs)
@@ -233,6 +358,7 @@ ${opts.inspireSummaries.map((s, i) => `(${i + 1}) ${s}`).join('\n') || '(none)'}
 
 		content = await readOllamaChatStream(res, logLabel, started);
 		console.log(`${logLabel}: done in ${Math.round((Date.now() - started) / 1000)}s (${content.length} chars)`);
+		console.log(`${logLabel}: raw JSON\n${content}`);
 	} catch (e) {
 		if (isAbortLike(e)) {
 			throw new Error(ollamaTimeoutMessage({ host, model: opts.model, timeoutMs }));
@@ -242,19 +368,56 @@ ${opts.inspireSummaries.map((s, i) => `(${i + 1}) ${s}`).join('\n') || '(none)'}
 	try {
 		const refined = parseBriefJson(content);
 		// Never let the model drop fonts/googleHref from a rich seed
-		return {
+		let brief: DesignBrief = {
 			...opts.seed,
 			...refined,
 			tokens: { ...opts.seed.tokens, ...refined.tokens },
 			fonts: refined.fonts || opts.seed.fonts,
-			paletteMode: refined.paletteMode || opts.seed.paletteMode,
+			paletteMode: refined.paletteMode || (intent === 'steer' ? undefined : opts.seed.paletteMode),
 			hero: refined.hero || opts.seed.hero,
 			atmosphere: refined.atmosphere || opts.seed.atmosphere,
 			navStyle: refined.navStyle || opts.seed.navStyle,
 			elevatedCards: refined.elevatedCards ?? opts.seed.elevatedCards
 		};
+		brief = applyPaletteHint(brief, hint);
+		console.log(
+			`${logLabel}: applied paletteMode=${brief.paletteMode ?? '(unset)'} bg=${brief.tokens.bg ?? '(unset)'} ink=${brief.tokens.ink ?? '(unset)'} accent=${brief.tokens.accent}`
+		);
+		if (opts.dumpPath) {
+			mkdirSync(dirname(opts.dumpPath), { recursive: true });
+			writeFileSync(
+				opts.dumpPath,
+				`${JSON.stringify(
+					{
+						intent,
+						steer: opts.steer ?? null,
+						hint,
+						model: opts.model,
+						host,
+						raw: content,
+						applied: {
+							paletteMode: brief.paletteMode,
+							tokens: brief.tokens,
+							mood: brief.mood
+						}
+					},
+					null,
+					2
+				)}\n`
+			);
+			console.log(`${logLabel}: dumped ${opts.dumpPath}`);
+		}
+		return brief;
 	} catch (e) {
 		const detail = e instanceof Error ? e.message : String(e);
+		if (opts.dumpPath && content) {
+			mkdirSync(dirname(opts.dumpPath), { recursive: true });
+			writeFileSync(
+				opts.dumpPath,
+				`${JSON.stringify({ intent, steer: opts.steer ?? null, parseError: detail, raw: content }, null, 2)}\n`
+			);
+			console.log(`${logLabel}: dumped unparsed response to ${opts.dumpPath}`);
+		}
 		if (opts.strictParse) {
 			throw new Error(
 				`Ollama returned a brief we could not parse (${detail}). First 200 chars: ${content.slice(0, 200)}`