@carlesandres/house 0.4.13 → 0.5.0

package/src/layout/resolve.ts

@@ -1,52 +0,0 @@
-/**
- * Layout primitives for the two-pane shape (sidebar + reader).
- *
- * Visibility and width are decoupled (see DESIGN.md §7.1):
- *   visible = shown || focus === "sidebar"
- * Width is a pure function of viewport, independent of visibility:
- *   resolveSidebarWidth(viewport, preferred)
- *
- * Both render code and key handlers consume these primitives — there is no
- * parallel implementation living in JSX.
- */
-
-/** Minimum useful sidebar width; below this, file rows truncate too aggressively. */
-export const SIDEBAR_MIN_WIDTH = 28
-/** Maximum sidebar width; beyond this, wasted whitespace on wide terminals. */
-export const SIDEBAR_MAX_WIDTH = 60
-/** Reader pane minimum; below this, prose wraps unpleasantly. */
-export const READER_MIN_WIDTH = 40
-/** Column gap painted between the two panes when both are inline. */
-export const DIVIDER_WIDTH = 1
-
-/**
- * Continuous clamp. `preferred` is the user's desired width (until #13 lands,
- * derived from viewport). The reader-min ceiling means the sidebar yields
- * space rather than squeezing the reader below readability.
- *
- * Result is not clamped *up* to SIDEBAR_MIN when the viewport itself is too
- * narrow to hold both panes — the caller decides whether to render at all
- * (e.g. single-pane stack instead of inline). See `canFitInline`.
- */
-export const resolveSidebarWidth = (viewport: number, preferred: number): number => {
-	const ceiling = viewport - DIVIDER_WIDTH - READER_MIN_WIDTH
-	const lower = Math.min(SIDEBAR_MIN_WIDTH, Math.max(0, ceiling))
-	const upper = Math.max(lower, ceiling)
-	return Math.max(lower, Math.min(upper, preferred))
-}
-
-/**
- * Default preferred sidebar width, derived from viewport until persistent
- * config (#13) provides a user-set value. Matches the previous inline math.
- */
-export const defaultPreferredWidth = (viewport: number): number =>
-	Math.max(SIDEBAR_MIN_WIDTH, Math.min(SIDEBAR_MAX_WIDTH, Math.floor(viewport * 0.25)))
-
-/**
- * True when an inline (side-by-side) layout still gives the reader at least
- * READER_MIN_WIDTH. When false, the viewport is "narrow" and the UI runs in
- * single-pane stack mode — sidebar OR reader fills the pane area, never both.
- * See DESIGN.md §7.1.
- */
-export const canFitInline = (viewport: number): boolean =>
-	viewport >= SIDEBAR_MIN_WIDTH + DIVIDER_WIDTH + READER_MIN_WIDTH

package/src/layout/sidebarEmptyState.ts

@@ -1,7 +0,0 @@
-const HEAD_ELISION_PREFIX = "…"
-
-export const fitSidebarEmptyValue = (value: string, width: number): string => {
-	if (value.length <= width) return value
-	if (width <= 1) return value.slice(value.length - 1)
-	return HEAD_ELISION_PREFIX + value.slice(value.length - width + 1)
-}

package/src/layout/sidebarRow.ts

@@ -1,69 +0,0 @@
-/**
- * Sidebar row layout — basename-first with a dim parent suffix sized to the
- * available width.
- *
- * Pure per-row formatting: a row's rendered shape depends only on its own
- * path and the column budget — never on neighboring rows. That keeps the
- * sidebar stable as filters change and the file set grows, and keeps the
- * function trivially predictable. Disambiguation against same-basename
- * siblings is the header's job (it shows the full relative path of the
- * selected row); a future auto-scroll on the selected sidebar row can carry
- * the same information without altering layout for the rest.
- *
- * Truncation policy: the basename stays whole when possible; the parent path
- * middle-truncates into `a/…/z`-style output once it exceeds the remaining
- * width. This preserves both the start and the end of the path, which is
- * usually what users need to disambiguate nested docs.
- */
-
-import { middleTruncate } from "../ui/middleTruncate.ts"
-
-export const SIDEBAR_ROW_SEPARATOR = " "
-const MIN_PARENT_BUDGET = 3
-
-export interface SidebarRowParts {
-	readonly basename: string
-	readonly separator: string
-	readonly parent: string
-}
-
-export const formatSidebarRow = (relativePath: string, totalWidth: number): SidebarRowParts => {
-	const slash = relativePath.lastIndexOf("/")
-	if (slash < 0) {
-		return { basename: fitTail(relativePath, totalWidth), separator: "", parent: "" }
-	}
-
-	const basename = relativePath.slice(slash + 1)
-	const parentFull = relativePath.slice(0, slash)
-
-	if (basename.length >= totalWidth) {
-		return { basename: fitTail(basename, totalWidth), separator: "", parent: "" }
-	}
-
-	const remaining = totalWidth - basename.length - SIDEBAR_ROW_SEPARATOR.length
-	if (remaining < MIN_PARENT_BUDGET || parentFull.length === 0) {
-		return { basename, separator: "", parent: "" }
-	}
-
-	if (parentFull.length <= remaining) {
-		return row(basename, parentFull)
-	}
-
-	return row(basename, middleTruncate(parentFull, remaining))
-}
-
-const row = (basename: string, parent: string): SidebarRowParts => ({
-	basename,
-	separator: SIDEBAR_ROW_SEPARATOR,
-	parent,
-})
-
-const fitTail = (s: string, width: number): string => {
-	if (s.length <= width) return s
-	// At width ≤ 1 there's no room for both a character and the ellipsis; emit
-	// a single char so the result respects the budget. Callers currently clamp
-	// width to ≥ 4, but the helper carries its own floor so a tighter future
-	// caller can't silently overflow the column.
-	if (width <= 1) return s.slice(0, 1)
-	return s.slice(0, width - 1) + "…"
-}

package/src/markdown/frontmatter.ts

@@ -1,62 +0,0 @@
-export interface FrontmatterField {
-	readonly key: string
-	readonly value: string
-}
-
-export interface FrontmatterRenderModel {
-	readonly body: string
-	readonly fields: readonly FrontmatterField[]
-}
-
-const FRONTMATTER_OPEN = "---"
-const FRONTMATTER_CLOSE = "---"
-
-const normalizeValue = (raw: string): string => {
-	const value = raw.trim()
-	if (
-		(value.startsWith('"') && value.endsWith('"')) ||
-		(value.startsWith("'") && value.endsWith("'"))
-	) {
-		return value.slice(1, -1)
-	}
-	return value
-}
-
-const formatKey = (key: string): string => key.replace(/[-_]+/g, " ")
-
-const toDisplayField = (key: string, value: string): FrontmatterField => ({
-	key: formatKey(key),
-	value: normalizeValue(value),
-})
-
-export const parseFrontmatter = (content: string): FrontmatterRenderModel => {
-	if (
-		!content.startsWith(`${FRONTMATTER_OPEN}\n`) &&
-		!content.startsWith(`${FRONTMATTER_OPEN}\r\n`)
-	) {
-		return { body: content, fields: [] }
-	}
-
-	const lines = content.split(/\r?\n/)
-	if (lines[0] !== FRONTMATTER_OPEN) return { body: content, fields: [] }
-
-	const closeIndex = lines.indexOf(FRONTMATTER_CLOSE, 1)
-	if (closeIndex <= 0) return { body: content, fields: [] }
-
-	const fields: FrontmatterField[] = []
-	for (const line of lines.slice(1, closeIndex)) {
-		if (line.trim().length === 0) continue
-		const colon = line.indexOf(":")
-		if (colon <= 0) return { body: content, fields: [] }
-		const key = line.slice(0, colon).trim()
-		const value = line.slice(colon + 1)
-		if (key.length === 0) return { body: content, fields: [] }
-		fields.push(toDisplayField(key, value))
-	}
-
-	const body = lines
-		.slice(closeIndex + 1)
-		.join("\n")
-		.replace(/^\n+/, "")
-	return { body, fields }
-}

package/src/serve/css.ts

@@ -1,120 +0,0 @@
-/**
- * Neutral GitHub-ish CSS for the serve action.
- *
- * Embedded inline by render.ts so each served page is self-contained — no
- * second request, "Save Page As" gives a working file, future --export
- * reuses the same renderer.
- */
-export const css = `
-:root {
-	color-scheme: light dark;
-	--bg: #ffffff;
-	--fg: #1f2328;
-	--muted: #59636e;
-	--border: #d1d9e0;
-	--code-bg: #f6f8fa;
-	--accent: #0969da;
-	--blockquote: #59636e;
-	--blockquote-border: #d1d9e0;
-}
-@media (prefers-color-scheme: dark) {
-	:root {
-		--bg: #0d1117;
-		--fg: #e6edf3;
-		--muted: #9198a1;
-		--border: #30363d;
-		--code-bg: #151b23;
-		--accent: #4493f8;
-		--blockquote: #9198a1;
-		--blockquote-border: #30363d;
-	}
-}
-* { box-sizing: border-box; }
-html, body {
-	margin: 0;
-	padding: 0;
-	background: var(--bg);
-	color: var(--fg);
-}
-body {
-	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans",
-		Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
-	font-size: 16px;
-	line-height: 1.6;
-}
-main {
-	max-width: 860px;
-	margin: 0 auto;
-	padding: 2.5rem 1.5rem 6rem;
-}
-h1, h2, h3, h4, h5, h6 {
-	margin-top: 1.75em;
-	margin-bottom: 0.6em;
-	font-weight: 600;
-	line-height: 1.25;
-}
-h1 { font-size: 2em; padding-bottom: .3em; border-bottom: 1px solid var(--border); }
-h2 { font-size: 1.5em; padding-bottom: .3em; border-bottom: 1px solid var(--border); }
-h3 { font-size: 1.25em; }
-h4 { font-size: 1em; }
-h5 { font-size: .9em; }
-h6 { font-size: .85em; color: var(--muted); }
-p, ul, ol, blockquote, pre, table { margin: 0 0 1em; }
-a { color: var(--accent); text-decoration: none; }
-a:hover { text-decoration: underline; }
-ul, ol { padding-left: 2em; }
-li + li { margin-top: .25em; }
-blockquote {
-	margin: 0 0 1em;
-	padding: 0 1em;
-	color: var(--blockquote);
-	border-left: .25em solid var(--blockquote-border);
-}
-code {
-	font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
-		"Liberation Mono", monospace;
-	font-size: 85%;
-	padding: .2em .4em;
-	background: var(--code-bg);
-	border-radius: 6px;
-}
-pre {
-	background: var(--code-bg);
-	border: 1px solid var(--border);
-	padding: 1em;
-	border-radius: 6px;
-	overflow: auto;
-	font-size: 85%;
-	line-height: 1.45;
-}
-pre code {
-	padding: 0;
-	background: transparent;
-	border-radius: 0;
-	font-size: 100%;
-}
-table {
-	border-collapse: collapse;
-	display: block;
-	overflow: auto;
-	width: max-content;
-	max-width: 100%;
-}
-th, td { padding: .4em .8em; border: 1px solid var(--border); }
-th { background: var(--code-bg); font-weight: 600; }
-hr { height: 1px; border: 0; background: var(--border); margin: 1.5em 0; }
-img { max-width: 100%; }
-kbd {
-	display: inline-block;
-	padding: 3px 5px;
-	font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
-	font-size: 11px;
-	line-height: 10px;
-	color: var(--fg);
-	vertical-align: middle;
-	background: var(--code-bg);
-	border: 1px solid var(--border);
-	border-radius: 6px;
-	box-shadow: inset 0 -1px 0 var(--border);
-}
-`.trim()

package/src/serve/openBrowser.ts

@@ -1,19 +0,0 @@
-/**
- * Best-effort "open URL in default browser". Fire and forget — failures are
- * silent because the URL has already been printed; user can click it.
- */
-
-import { spawn } from "node:child_process"
-
-export const openInBrowser = (url: string): void => {
-	const cmd =
-		process.platform === "darwin" ? "open" : process.platform === "win32" ? "cmd" : "xdg-open"
-	const args = process.platform === "win32" ? ["/c", "start", "", url] : [url]
-	try {
-		const child = spawn(cmd, args, { stdio: "ignore", detached: true })
-		child.on("error", () => {})
-		child.unref()
-	} catch {
-		// platform without a launcher; URL was printed already.
-	}
-}

package/src/serve/render.ts

@@ -1,56 +0,0 @@
-/**
- * renderHtml — wraps marked-rendered markdown in a self-contained HTML page.
- *
- * Embeds the CSS and a tiny SSE reload script so each response is one round
- * trip. The reload script reconnects on drop; the server's `/__reload`
- * endpoint pushes a `reload` event whenever the served file changes.
- */
-
-import { marked } from "marked"
-import { css } from "./css.ts"
-
-const escapeHtml = (s: string): string =>
-	s.replace(/[&<>"']/g, (c) => {
-		switch (c) {
-			case "&":
-				return "&amp;"
-			case "<":
-				return "&lt;"
-			case ">":
-				return "&gt;"
-			case '"':
-				return "&quot;"
-			default:
-				return "&#39;"
-		}
-	})
-
-const reloadScript = `
-<script>
-(function () {
-	function connect() {
-		var es = new EventSource("/__reload");
-		es.addEventListener("reload", function () { location.reload(); });
-		es.onerror = function () { es.close(); setTimeout(connect, 500); };
-	}
-	connect();
-})();
-</script>
-`.trim()
-
-export const renderHtml = (markdown: string, title: string): string => {
-	const body = marked.parse(markdown, { async: false }) as string
-	return `<!DOCTYPE html>
-<html lang="en">
-<head>
-<meta charset="utf-8">
-<meta name="viewport" content="width=device-width, initial-scale=1">
-<title>${escapeHtml(title)}</title>
-<style>${css}</style>
-</head>
-<body>
-<main>${body}</main>
-${reloadScript}
-</body>
-</html>`
-}

package/src/serve/server.ts

@@ -1,166 +0,0 @@
-/**
- * Local HTML preview server for a single markdown file.
- *
- * One long-lived `Bun.serve` instance. The served file path is swappable
- * via `setTarget(path)` — used by the TUI's `O` binding so pressing it on a
- * new file retargets the existing server (live-reload fires) instead of
- * spawning a second one.
- *
- * Live reload: an SSE endpoint at `/__reload` holds connections open and
- * pushes a `reload` event whenever the watched file changes. A new watcher
- * is created per `setTarget` call; the previous one is closed.
- */
-
-import { basename } from "node:path"
-import { watch, type FSWatcher } from "node:fs"
-import { readFile } from "node:fs/promises"
-import { renderHtml } from "./render.ts"
-
-export interface ServerHandle {
-	/** Base URL, e.g. http://localhost:51234 */
-	readonly url: string
-	/** Swap which file is served. Pushes a reload to connected clients. */
-	setTarget(path: string): void
-	/** Path currently being served. */
-	currentTarget(): string
-	stop(): Promise<void>
-}
-
-export interface StartOptions {
-	readonly path: string
-	/** 0 = OS-assigned. */
-	readonly port?: number
-}
-
-type ReloadController = ReadableStreamDefaultController<Uint8Array>
-
-const encoder = new TextEncoder()
-const sseEvent = (event: string, data = ""): Uint8Array =>
-	encoder.encode(`event: ${event}\ndata: ${data}\n\n`)
-
-export const startServer = ({ path, port = 0 }: StartOptions): ServerHandle => {
-	let target = path
-	let watcher: FSWatcher | null = null
-	const clients = new Set<ReloadController>()
-
-	const broadcastReload = () => {
-		for (const c of clients) {
-			try {
-				c.enqueue(sseEvent("reload"))
-			} catch {
-				clients.delete(c)
-			}
-		}
-	}
-
-	// `fs.watch` watches an inode, not a path. Editors that save via
-	// write-tmp + rename (vim default, VS Code, JetBrains, …) replace the
-	// inode, after which our watcher fires nothing. So we re-watch on every
-	// event, and debounce because a single save often emits 2–3 events.
-	const startWatching = (p: string) => {
-		watcher?.close()
-		watcher = null
-		let timer: ReturnType<typeof setTimeout> | null = null
-		try {
-			watcher = watch(p, () => {
-				if (timer) clearTimeout(timer)
-				timer = setTimeout(() => {
-					broadcastReload()
-					startWatching(p)
-				}, 30)
-			})
-			watcher.on("error", () => {
-				// Stale handle after rename; the change event already scheduled
-				// a re-watch. Swallow so it doesn't crash the process.
-			})
-		} catch {
-			// Path went away between presses. Server still serves the last
-			// good read; live reload stays off until the path returns.
-		}
-	}
-	startWatching(target)
-
-	const server = Bun.serve({
-		port,
-		// Bind to loopback. Default is 0.0.0.0 (LAN-exposed); we render the
-		// user's local files, so leaking them to the network would be a
-		// surprise. URL strings are localhost-only by construction below.
-		hostname: "127.0.0.1",
-		async fetch(req, server) {
-			const url = new URL(req.url)
-			if (url.pathname === "/__reload") {
-				// SSE stream is silent between file changes; without this Bun
-				// closes the request at the default 10s idleTimeout and warns.
-				server.timeout(req, 0)
-				// `cancel` receives a reason, not the controller — capture
-				// the controller in `start` so we can remove it from the set
-				// on disconnect. Without this, dead clients accumulate.
-				let ctrl: ReloadController | null = null
-				const stream = new ReadableStream<Uint8Array>({
-					start(controller) {
-						ctrl = controller
-						clients.add(controller)
-						// Initial comment keeps some proxies from buffering.
-						controller.enqueue(encoder.encode(": connected\n\n"))
-					},
-					cancel() {
-						if (ctrl) clients.delete(ctrl)
-					},
-				})
-				return new Response(stream, {
-					headers: {
-						"content-type": "text/event-stream",
-						"cache-control": "no-cache",
-						connection: "keep-alive",
-					},
-				})
-			}
-			if (url.pathname !== "/") {
-				return new Response("not found", { status: 404 })
-			}
-			try {
-				const md = await readFile(target, "utf8")
-				const html = renderHtml(md, basename(target))
-				return new Response(html, {
-					headers: {
-						"content-type": "text/html; charset=utf-8",
-						"cache-control": "no-store",
-					},
-				})
-			} catch (err) {
-				return new Response(`cannot read ${target}: ${String(err)}`, {
-					status: 500,
-					headers: { "content-type": "text/plain; charset=utf-8" },
-				})
-			}
-		},
-	})
-
-	const url = `http://localhost:${server.port}`
-
-	return {
-		url,
-		currentTarget: () => target,
-		setTarget: (next) => {
-			if (next === target) {
-				broadcastReload()
-				return
-			}
-			target = next
-			startWatching(next)
-			broadcastReload()
-		},
-		stop: async () => {
-			watcher?.close()
-			for (const c of clients) {
-				try {
-					c.close()
-				} catch {
-					// already closed
-				}
-			}
-			clients.clear()
-			await server.stop(true)
-		},
-	}
-}

package/src/theme/atom.ts

@@ -1,23 +0,0 @@
-/**
- * themeAtom — signals the active theme identity to React.
- *
- * Components read this atom only to subscribe to re-renders; they pull the
- * actual token values from the `colors` singleton (mutated by
- * `setActiveTheme` before the re-render fires).
- *
- * Shape: `{ id, tone }` so that a future theme picker can write both fields
- * atomically and the component sees a single re-render.
- */
-
-import * as Atom from "effect/unstable/reactivity/Atom"
-import type { Tone } from "./types.ts"
-
-export interface ThemeState {
-	readonly id: string
-	readonly tone: Tone
-}
-
-export const themeAtom: Atom.Writable<ThemeState, ThemeState> = Atom.make<ThemeState>({
-	id: "opencode",
-	tone: "dark",
-})

package/src/theme/colors.ts

@@ -1,86 +0,0 @@
-import type { StyleDefinitionInput } from "@opentui/core"
-import { resolveTheme } from "./resolve.ts"
-import type { ColorPalette, ResolvedTheme, ThemeDefinition, Tone } from "./types.ts"
-
-/**
- * Adapt a resolved theme (opencode-shaped flat tokens) to the
- * {@link ColorPalette} shape consumed by Browser / HelpOverlay / index.
- *
- * - UI tokens map name-for-name with OpenCode's TUI theme semantics.
- * - `syntax` is a fully populated opentui tree-sitter scope map built from
- *   `markdown*` and `syntax*` tokens.
- */
-const buildPalette = (r: ResolvedTheme): ColorPalette => {
-	return {
-		background: r.background,
-		backgroundPanel: r.backgroundPanel,
-		backgroundElement: r.backgroundElement,
-		text: r.text,
-		textMuted: r.textMuted,
-		border: r.border,
-		borderActive: r.borderActive,
-		borderSubtle: r.borderSubtle,
-		selectedListItemText: r.selectedListItemText,
-		primary: r.primary,
-		secondary: r.secondary,
-		accent: r.accent,
-		error: r.error,
-		warning: r.warning,
-		success: r.success,
-		info: r.info,
-		syntax: buildSyntaxMap(r),
-	}
-}
-
-const buildSyntaxMap = (r: ResolvedTheme): Record<string, StyleDefinitionInput> => {
-	const codeBg = r.backgroundPanel
-	return {
-		keyword: { fg: r.syntaxKeyword, bold: true },
-		string: { fg: r.syntaxString },
-		comment: { fg: r.syntaxComment, italic: true },
-		number: { fg: r.syntaxNumber },
-		function: { fg: r.syntaxFunction },
-		type: { fg: r.syntaxType },
-		operator: { fg: r.syntaxOperator },
-		variable: { fg: r.syntaxVariable },
-		property: { fg: r.syntaxFunction },
-		"punctuation.bracket": { fg: r.syntaxPunctuation },
-		"punctuation.delimiter": { fg: r.syntaxPunctuation },
-		"punctuation.special": { fg: r.syntaxPunctuation },
-		"markup.heading": { fg: r.markdownHeading, bold: true },
-		"markup.heading.1": { fg: r.markdownHeading, bold: true, underline: true },
-		"markup.heading.2": { fg: r.markdownHeading, bold: true },
-		"markup.heading.3": { fg: r.markdownHeading },
-		"markup.bold": { fg: r.markdownStrong, bold: true },
-		"markup.strong": { fg: r.markdownStrong, bold: true },
-		"markup.italic": { fg: r.markdownEmph, italic: true },
-		// opentui's SyntaxStyle has no strikethrough attribute — best-effort:
-		// dim + muted color so `~~strike~~` is at least visually distinguishable.
-		"markup.strikethrough": { fg: r.textMuted, dim: true },
-		"markup.list": { fg: r.markdownListItem },
-		"markup.quote": { fg: r.markdownBlockQuote, italic: true },
-		"markup.raw": { fg: r.markdownCode, bg: codeBg },
-		"markup.raw.block": { fg: r.markdownCodeBlock, bg: codeBg },
-		"markup.raw.inline": { fg: r.markdownCode, bg: codeBg },
-		"markup.link": { fg: r.markdownLink, underline: true },
-		"markup.link.label": { fg: r.markdownLinkText, underline: true },
-		"markup.link.url": { fg: r.markdownLink, underline: true },
-		label: { fg: r.markdownListItem },
-		conceal: { fg: r.borderSubtle },
-		default: { fg: r.markdownText },
-	}
-}
-
-/**
- * Active flat palette. Components import `colors` and read tokens
- * directly. `setActiveTheme` mutates this in place so the reference stays
- * stable (no Provider/context).
- *
- * Initial value uses the all-fallback resolution; `setActiveTheme` is
- * called at boot from `index.tsx` before the React tree mounts.
- */
-export const colors: ColorPalette = buildPalette(resolveTheme({ theme: {} }, "dark"))
-
-export const setActiveTheme = (definition: ThemeDefinition, tone: Tone): void => {
-	Object.assign(colors, buildPalette(resolveTheme(definition.source, tone)))
-}