getfilepress 0.1.11 → 0.1.13

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "getfilepress",
-	"version": "0.1.11",
+	"version": "0.1.13",
 	"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

@@ -5,6 +5,9 @@
 		createdAt: string;
 		starred?: boolean;
 		parentId?: string | null;
+		prompt?: string;
+		did?: string;
+		tokens?: { accent?: string; bg?: string; ink?: string };
 	};
 
 	type Health = {
@@ -68,6 +71,8 @@
 	let cfgLogo = $state('');
 	let renamingId = $state<string | null>(null);
 	let renameDraft = $state('');
+	let copiedId = $state<string | null>(null);
+	let copyTimer: ReturnType<typeof setTimeout> | null = null;
 	let jobNote = $state('');
 	let jobSecs = $state(0);
 	let jobTimer: ReturnType<typeof setInterval> | null = null;
@@ -156,6 +161,29 @@
 		}
 	}
 
+	async function copyPrompt(v: VersionRow) {
+		const text = v.prompt?.trim();
+		if (!text) return;
+		try {
+			await navigator.clipboard.writeText(text);
+		} catch {
+			const ta = document.createElement('textarea');
+			ta.value = text;
+			ta.setAttribute('readonly', '');
+			ta.style.position = 'fixed';
+			ta.style.left = '-9999px';
+			document.body.appendChild(ta);
+			ta.select();
+			document.execCommand('copy');
+			ta.remove();
+		}
+		copiedId = v.id;
+		if (copyTimer) clearTimeout(copyTimer);
+		copyTimer = setTimeout(() => {
+			copiedId = null;
+		}, 1600);
+	}
+
 	function versionWhen(v: VersionRow) {
 		if (v.id === 'baseline') return 'pre-Genie snapshot';
 		const d = new Date(v.createdAt);
@@ -740,6 +768,7 @@
 							<h3>Versions</h3>
 							<p class="genie-howto">
 								Every Genie action saves a snapshot under <code>.filepress-genie/</code> (gitignored).
+								Each row shows what that pass applied. Click the prompt to copy it.
 								Star keepers, rename, duplicate, then activate to bake into the working tree.
 								<code>baseline</code> is the pre-Genie look and cannot be deleted.
 							</p>
@@ -784,6 +813,39 @@
 												<span class="genie-ver-badge">Active</span>
 											{/if}
 										</div>
+										{#if v.did}
+											<p class="genie-ver-did">
+												{#if v.tokens?.bg || v.tokens?.accent || v.tokens?.ink}
+													<span class="genie-swatches" aria-hidden="true">
+														{#if v.tokens.bg}
+															<span class="genie-swatch" style:background={v.tokens.bg}></span>
+														{/if}
+														{#if v.tokens.ink}
+															<span class="genie-swatch" style:background={v.tokens.ink}></span>
+														{/if}
+														{#if v.tokens.accent}
+															<span class="genie-swatch" style:background={v.tokens.accent}></span>
+														{/if}
+													</span>
+												{/if}
+												{v.did}
+											</p>
+										{/if}
+										{#if v.prompt}
+											<button
+												type="button"
+												class="genie-ver-prompt"
+												class:copied={copiedId === v.id}
+												disabled={loading}
+												title="Copy prompt"
+												onclick={() => copyPrompt(v)}
+											>
+												<span class="genie-ver-prompt-kicker">
+													{copiedId === v.id ? 'Copied' : 'Prompt — click to copy'}
+												</span>
+												<span class="genie-ver-prompt-text">{v.prompt}</span>
+											</button>
+										{/if}
 										<p class="genie-ver-when">{versionWhen(v)}</p>
 										<div class="genie-ver-actions">
 											{#if renamingId === v.id}
@@ -1165,6 +1227,61 @@
 		font-size: 0.82rem;
 	}
 
+	.genie-ver-did {
+		margin: 0;
+		font-size: 0.78rem;
+		line-height: 1.4;
+		color: var(--ink, #eee);
+	}
+
+	.genie-swatches {
+		display: inline-flex;
+		gap: 0.2rem;
+		margin-right: 0.35rem;
+		vertical-align: middle;
+	}
+
+	.genie-swatch {
+		display: inline-block;
+		width: 0.7rem;
+		height: 0.7rem;
+		border-radius: 2px;
+		border: 1px solid var(--rule, #444);
+		vertical-align: -0.05em;
+	}
+
+	.genie-versions button.genie-ver-prompt {
+		display: grid;
+		gap: 0.15rem;
+		width: 100%;
+		text-align: left;
+		padding: 0.4rem 0.45rem;
+		border: 1px dashed var(--rule, #444);
+		border-radius: 6px;
+		background: color-mix(in srgb, var(--surface, #1c1c22) 70%, transparent);
+		color: inherit;
+		cursor: pointer;
+	}
+
+	.genie-versions button.genie-ver-prompt:hover,
+	.genie-versions button.genie-ver-prompt.copied {
+		border-color: var(--accent, #f0c040);
+	}
+
+	.genie-ver-prompt-kicker {
+		font-size: 0.68rem;
+		letter-spacing: 0.02em;
+		text-transform: uppercase;
+		color: var(--ink-soft, #999);
+	}
+
+	.genie-ver-prompt-text {
+		font-size: 0.78rem;
+		line-height: 1.4;
+		white-space: pre-wrap;
+		overflow-wrap: anywhere;
+	}
+
 	.genie-ver-when {
 		margin: 0;
 		font-size: 0.72rem;

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

@@ -27,7 +27,7 @@ import {
 	ensureBaseline,
 	genieRoot,
 	getActive,
-	listVersions,
+	listVersionRows,
 	readVersionBrief,
 	writeSnapshot
 } from './store.ts';
@@ -133,13 +133,7 @@ export async function health(siteRoot: string) {
 				: ollamaSetupHint(host)
 		},
 		active: getActive(siteRoot),
-		versions: listVersions(siteRoot).map((v) => ({
-			id: v.id,
-			label: v.label,
-			createdAt: v.createdAt,
-			starred: v.starred,
-			parentId: v.parentId
-		})),
+		versions: listVersionRows(siteRoot),
 		brief: loadWorkingBrief(siteRoot)
 	};
 }

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

@@ -10,8 +10,9 @@ import {
 } from 'node:fs';
 import { join } from 'node:path';
 import { randomBytes } from 'node:crypto';
-import type { DesignBrief, GenieActive, GenieVersionMeta } from './types.ts';
+import type { DesignBrief, GenieActive, GenieVersionMeta, GenieVersionRow } from './types.ts';
 import { applyConfigPatch, readConfigPatchFile, type GenieConfigPatch } from './config-patch.ts';
+import { summarizeVersionDid, versionPrompt } from './version-summary.ts';
 
 const GENIE_DIR = '.filepress-genie';
 
@@ -69,6 +70,27 @@ export function listVersions(siteRoot: string): GenieVersionMeta[] {
 	});
 }
 
+export function toVersionRow(siteRoot: string, meta: GenieVersionMeta): GenieVersionRow {
+	const brief = readVersionBrief(siteRoot, meta.id);
+	return {
+		...meta,
+		prompt: versionPrompt(meta),
+		did: summarizeVersionDid(brief),
+		tokens: {
+			accent: brief?.tokens.accent,
+			bg: brief?.tokens.bg,
+			ink: brief?.tokens.ink
+		},
+		paletteMode: brief?.paletteMode,
+		hero: brief?.hero,
+		atmosphere: brief?.atmosphere
+	};
+}
+
+export function listVersionRows(siteRoot: string): GenieVersionRow[] {
+	return listVersions(siteRoot).map((v) => toVersionRow(siteRoot, v));
+}
+
 export function readVersionBrief(siteRoot: string, id: string): DesignBrief | null {
 	return readJson<DesignBrief | null>(join(versionPath(siteRoot, id), 'design-brief.json'), null);
 }

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

@@ -48,6 +48,14 @@ export type GenieVersionMeta = {
 	llm: { used: boolean; model: string | null; host: string | null };
 };
 
+export type GenieVersionRow = GenieVersionMeta & {
+	did: string;
+	tokens: { accent?: string; bg?: string; ink?: string };
+	paletteMode?: string;
+	hero?: string;
+	atmosphere?: string;
+};
+
 export type GenieActive = {
 	versionId: string;
 	activatedAt: string;

package/packages/app/src/lib/genie/version-summary.ts

@@ -0,0 +1,31 @@
+import type { DesignBrief, GenieVersionMeta } from './types.ts';
+
+/** Original author prompt, including older snapshots that only stored it on the steer. */
+export function versionPrompt(meta: Pick<GenieVersionMeta, 'prompt' | 'steers'>): string {
+	const direct = meta.prompt?.trim();
+	if (direct) return direct;
+	for (const steer of meta.steers || []) {
+		if (typeof steer.prompt === 'string' && steer.prompt.trim()) return steer.prompt.trim();
+	}
+	return '';
+}
+
+/** One line: mood, palette, colors, structure — what the snapshot actually applied. */
+export function summarizeVersionDid(brief: DesignBrief | null | undefined): string {
+	if (!brief) return '';
+	const parts: string[] = [];
+	const mood = brief.mood?.trim();
+	if (mood) parts.push(mood);
+	if (brief.paletteMode) parts.push(brief.paletteMode);
+	const bg = brief.tokens?.bg?.trim();
+	const accent = brief.tokens?.accent?.trim();
+	if (bg) parts.push(bg);
+	if (accent) parts.push(accent);
+	if (brief.hero) parts.push(brief.hero);
+	if (brief.atmosphere && brief.atmosphere !== 'none') parts.push(brief.atmosphere);
+	if (brief.density) parts.push(brief.density);
+	const serif = brief.fonts?.serif?.trim();
+	const sans = brief.fonts?.sans?.trim();
+	if (serif && sans) parts.push(`${serif} / ${sans}`);
+	return parts.join(' · ');
+}

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/app/vite-plugin-genie.ts

@@ -11,7 +11,7 @@ import {
 	runInspire,
 	scanOllamaHosts
 } from './src/lib/genie/ops.ts';
-import { deleteVersion, duplicateVersion, listVersions, updateVersionMeta } from './src/lib/genie/store.ts';
+import { deleteVersion, duplicateVersion, listVersionRows, updateVersionMeta } from './src/lib/genie/store.ts';
 
 function readBody(req: IncomingMessage): Promise<string> {
 	return new Promise((resolve, reject) => {
@@ -54,7 +54,7 @@ export function geniePlugin(siteRoot: string): Plugin {
 						const h = await health(siteRoot);
 						return sendJson(res, 200, {
 							active: h.active,
-							versions: listVersions(siteRoot),
+							versions: listVersionRows(siteRoot),
 							brief: h.brief
 						});
 					}