@carlesandres/house 0.3.0

package/src/theme/atom.ts

@@ -0,0 +1,23 @@
+/**
+ * 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

@@ -0,0 +1,79 @@
+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 where they overlap.
+ * - `surface` ← `backgroundPanel`, `selectedBg` ← `backgroundElement`,
+ *   `selectedBgInactive` ← `borderSubtle`.
+ * - `textStrong` borrows `markdownStrong` (the brightest/most-emphasized
+ *   text token in opencode's palette).
+ * - `syntax` is a fully populated opentui tree-sitter scope map built from
+ *   `markdown*` and `syntax*` tokens.
+ */
+const buildPalette = (r: ResolvedTheme): ColorPalette => ({
+	background: r.background,
+	surface: r.backgroundPanel,
+	text: r.text,
+	textStrong: r.markdownStrong,
+	textMuted: r.textMuted,
+	border: r.border,
+	borderActive: r.borderActive,
+	selectedBg: r.backgroundElement,
+	selectedBgInactive: r.borderSubtle,
+	error: r.error,
+	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 },
+		"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)))
+}

package/src/theme/loader.ts

@@ -0,0 +1,110 @@
+// THIS FILE IS AUTO-GENERATED by dev/build-themes.ts — do not edit by hand.
+// Run `bun run build:themes` to regenerate after adding or updating themes.
+import auraJson from "./themes/aura.json" with { type: "json" }
+import ayuJson from "./themes/ayu.json" with { type: "json" }
+import carbonfoxJson from "./themes/carbonfox.json" with { type: "json" }
+import catppuccinJson from "./themes/catppuccin.json" with { type: "json" }
+import catppuccinFrappeJson from "./themes/catppuccin-frappe.json" with { type: "json" }
+import catppuccinMacchiatoJson from "./themes/catppuccin-macchiato.json" with { type: "json" }
+import cobalt2Json from "./themes/cobalt2.json" with { type: "json" }
+import cursorJson from "./themes/cursor.json" with { type: "json" }
+import draculaJson from "./themes/dracula.json" with { type: "json" }
+import everforestJson from "./themes/everforest.json" with { type: "json" }
+import flexokiJson from "./themes/flexoki.json" with { type: "json" }
+import githubJson from "./themes/github.json" with { type: "json" }
+import gruvboxJson from "./themes/gruvbox.json" with { type: "json" }
+import kanagawaJson from "./themes/kanagawa.json" with { type: "json" }
+import lucentOrngJson from "./themes/lucent-orng.json" with { type: "json" }
+import materialJson from "./themes/material.json" with { type: "json" }
+import matrixJson from "./themes/matrix.json" with { type: "json" }
+import mercuryJson from "./themes/mercury.json" with { type: "json" }
+import monokaiJson from "./themes/monokai.json" with { type: "json" }
+import nightowlJson from "./themes/nightowl.json" with { type: "json" }
+import nordJson from "./themes/nord.json" with { type: "json" }
+import oneDarkJson from "./themes/one-dark.json" with { type: "json" }
+import opencodeJson from "./themes/opencode.json" with { type: "json" }
+import orngJson from "./themes/orng.json" with { type: "json" }
+import osakaJadeJson from "./themes/osaka-jade.json" with { type: "json" }
+import palenightJson from "./themes/palenight.json" with { type: "json" }
+import rosepineJson from "./themes/rosepine.json" with { type: "json" }
+import solarizedJson from "./themes/solarized.json" with { type: "json" }
+import synthwave84Json from "./themes/synthwave84.json" with { type: "json" }
+import tokyonightJson from "./themes/tokyonight.json" with { type: "json" }
+import vercelJson from "./themes/vercel.json" with { type: "json" }
+import vesperJson from "./themes/vesper.json" with { type: "json" }
+import zenburnJson from "./themes/zenburn.json" with { type: "json" }
+import { isThemeJson } from "./resolve.ts"
+import type { ThemeDefinition, ThemeJson } from "./types.ts"
+
+interface BundledEntry {
+	readonly id: string
+	readonly json: unknown
+}
+
+const bundled: readonly BundledEntry[] = [
+	{ id: "aura", json: auraJson },
+	{ id: "ayu", json: ayuJson },
+	{ id: "carbonfox", json: carbonfoxJson },
+	{ id: "catppuccin", json: catppuccinJson },
+	{ id: "catppuccin-frappe", json: catppuccinFrappeJson },
+	{ id: "catppuccin-macchiato", json: catppuccinMacchiatoJson },
+	{ id: "cobalt2", json: cobalt2Json },
+	{ id: "cursor", json: cursorJson },
+	{ id: "dracula", json: draculaJson },
+	{ id: "everforest", json: everforestJson },
+	{ id: "flexoki", json: flexokiJson },
+	{ id: "github", json: githubJson },
+	{ id: "gruvbox", json: gruvboxJson },
+	{ id: "kanagawa", json: kanagawaJson },
+	{ id: "lucent-orng", json: lucentOrngJson },
+	{ id: "material", json: materialJson },
+	{ id: "matrix", json: matrixJson },
+	{ id: "mercury", json: mercuryJson },
+	{ id: "monokai", json: monokaiJson },
+	{ id: "nightowl", json: nightowlJson },
+	{ id: "nord", json: nordJson },
+	{ id: "one-dark", json: oneDarkJson },
+	{ id: "opencode", json: opencodeJson },
+	{ id: "orng", json: orngJson },
+	{ id: "osaka-jade", json: osakaJadeJson },
+	{ id: "palenight", json: palenightJson },
+	{ id: "rosepine", json: rosepineJson },
+	{ id: "solarized", json: solarizedJson },
+	{ id: "synthwave84", json: synthwave84Json },
+	{ id: "tokyonight", json: tokyonightJson },
+	{ id: "vercel", json: vercelJson },
+	{ id: "vesper", json: vesperJson },
+	{ id: "zenburn", json: zenburnJson },
+]
+
+const toDefinition = (id: string, raw: unknown): ThemeDefinition | null => {
+	if (!isThemeJson(raw)) return null
+	const json = raw as ThemeJson
+	return { id, name: json.name ?? id, source: json }
+}
+
+/** Load all bundled themes, indexed by id. Invalid entries are dropped. */
+export const loadBundledThemes = (): Map<string, ThemeDefinition> => {
+	const map = new Map<string, ThemeDefinition>()
+	for (const { id, json } of bundled) {
+		const def = toDefinition(id, json)
+		if (def) map.set(id, def)
+	}
+	return map
+}
+
+/**
+ * Stub for user-supplied themes. A future release will load these from the
+ * XDG config dir and from project-local `.house/themes/`. Until then,
+ * returns an empty map.
+ */
+export const loadUserThemes = async (): Promise<Map<string, ThemeDefinition>> => {
+	return new Map()
+}
+
+/** Bundled + user themes merged. User themes override built-ins by id. */
+export const loadAllThemes = async (): Promise<Map<string, ThemeDefinition>> => {
+	const all = loadBundledThemes()
+	for (const [id, def] of await loadUserThemes()) all.set(id, def)
+	return all
+}

package/src/theme/registry.ts

@@ -0,0 +1,12 @@
+import { loadBundledThemes } from "./loader.ts"
+import type { ThemeDefinition } from "./types.ts"
+
+const map: Map<string, ThemeDefinition> = loadBundledThemes()
+
+/** All known themes. Order is the bundled-themes order in `loader.ts`. */
+export const themeDefinitions: readonly ThemeDefinition[] = [...map.values()]
+
+export const getThemeDefinition = (id: string): ThemeDefinition | undefined => map.get(id)
+
+export const isThemeId = (value: unknown): value is string =>
+	typeof value === "string" && map.has(value)

package/src/theme/resolve.ts

@@ -0,0 +1,168 @@
+import type {
+	ColorValue,
+	HexColor,
+	ResolvedTheme,
+	ThemeJson,
+	ThemeTokens,
+	TokenName,
+	Tone,
+} from "./types.ts"
+
+/**
+ * Hard-coded safe defaults for every UI / markdown / syntax token. Used when
+ * a theme JSON omits a token entirely (validation is permissive — opencode
+ * does the same). Fallback values are reasonable greys so the app stays
+ * legible even with a near-empty theme.
+ */
+const HARD_FALLBACK_RAW: Readonly<Record<TokenName, HexColor>> = {
+	primary: "#7AA2F7",
+	secondary: "#9ECE6A",
+	accent: "#BB9AF7",
+	error: "#F7768E",
+	warning: "#E0AF68",
+	success: "#9ECE6A",
+	info: "#7DCFFF",
+	text: "#D8DEE9",
+	textMuted: "#7B8794",
+	selectedListItemText: "#FFFFFF",
+	background: "#1A1B26",
+	backgroundPanel: "#24283B",
+	backgroundElement: "#414868",
+	border: "#3B4261",
+	borderActive: "#7AA2F7",
+	borderSubtle: "#292E42",
+	markdownText: "#D8DEE9",
+	markdownHeading: "#7AA2F7",
+	markdownLink: "#7DCFFF",
+	markdownLinkText: "#7AA2F7",
+	markdownCode: "#9ECE6A",
+	markdownBlockQuote: "#7B8794",
+	markdownEmph: "#E0AF68",
+	markdownStrong: "#FFFFFF",
+	markdownHorizontalRule: "#7B8794",
+	markdownListItem: "#7AA2F7",
+	markdownListEnumeration: "#BB9AF7",
+	markdownImage: "#7DCFFF",
+	markdownImageText: "#BB9AF7",
+	markdownCodeBlock: "#D8DEE9",
+	syntaxComment: "#7B8794",
+	syntaxKeyword: "#7AA2F7",
+	syntaxFunction: "#7DCFFF",
+	syntaxVariable: "#D8DEE9",
+	syntaxString: "#9ECE6A",
+	syntaxNumber: "#BB9AF7",
+	syntaxType: "#E0AF68",
+	syntaxOperator: "#7AA2F7",
+	syntaxPunctuation: "#D8DEE9",
+}
+
+const HEX_RE_INIT = /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{4}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})$/
+const lowerHex = (hex: HexColor): HexColor => {
+	const v = hex.replace("#", "")
+	const expanded =
+		v.length === 3 || v.length === 4
+			? v
+					.split("")
+					.map((c) => c + c)
+					.join("")
+			: v
+	const rgb = expanded.length === 8 ? expanded.slice(0, 6) : expanded
+	return `#${rgb.toLowerCase()}` as HexColor
+}
+// Sanity: ensure HARD_FALLBACK_RAW matches the hex regex (catch a typo at load).
+for (const v of Object.values(HARD_FALLBACK_RAW)) {
+	if (!HEX_RE_INIT.test(v)) throw new Error(`bad fallback hex: ${v}`)
+}
+const HARD_FALLBACK: Readonly<Record<TokenName, HexColor>> = Object.fromEntries(
+	Object.entries(HARD_FALLBACK_RAW).map(([k, v]) => [k, lowerHex(v)]),
+) as Readonly<Record<TokenName, HexColor>>
+
+/**
+ * Tokens that fall back to another token (rather than `HARD_FALLBACK`) when
+ * the theme omits them. Mirrors opencode's resolve behavior.
+ */
+const TOKEN_FALLBACK: Partial<Record<TokenName, TokenName>> = {
+	selectedListItemText: "background",
+	markdownText: "text",
+	markdownCodeBlock: "text",
+	borderSubtle: "border",
+}
+
+const HEX_RE = /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{4}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})$/
+
+const isHex = (value: string): value is HexColor => HEX_RE.test(value)
+
+/** Normalize a hex value to `#rrggbb` (lowercase, 6-digit). */
+const normalizeHex = (value: HexColor): HexColor => {
+	const v = value.replace("#", "")
+	const expanded =
+		v.length === 3 || v.length === 4
+			? v
+					.split("")
+					.map((c) => c + c)
+					.join("")
+			: v
+	const rgb = expanded.length === 8 ? expanded.slice(0, 6) : expanded
+	return `#${rgb.toLowerCase()}` as HexColor
+}
+
+/**
+ * Resolve a single side of a {dark,light} variant — i.e. a string that's
+ * either a hex literal or a name in the theme's `defs` map. Returns `null`
+ * if the input doesn't resolve (caller falls back).
+ */
+const resolveSide = (value: string, defs: Record<string, string>): HexColor | null => {
+	if (isHex(value)) return normalizeHex(value)
+	const looked = defs[value]
+	if (looked && isHex(looked)) return normalizeHex(looked)
+	return null
+}
+
+/** Resolve a single ColorValue (variant, hex, or defs ref) for a tone. */
+export const resolveColorValue = (
+	value: ColorValue | undefined,
+	tone: Tone,
+	defs: Record<string, string> = {},
+): HexColor | null => {
+	if (value === undefined) return null
+	if (typeof value === "string") return resolveSide(value, defs)
+	const side = value[tone]
+	return resolveSide(side, defs)
+}
+
+/**
+ * Resolve a theme JSON to a flat record of `{ token → #rrggbb }` for the
+ * given tone. Missing tokens fall back via `TOKEN_FALLBACK` (chained) and
+ * ultimately `HARD_FALLBACK`.
+ */
+export const resolveTheme = (theme: ThemeJson, tone: Tone): ResolvedTheme => {
+	const defs = theme.defs ?? {}
+	const out: Partial<Record<TokenName, HexColor>> = {}
+
+	const tokenNames = Object.keys(HARD_FALLBACK) as readonly TokenName[]
+	const seen = new Set<TokenName>()
+	const resolveOne = (name: TokenName): HexColor => {
+		if (seen.has(name)) return HARD_FALLBACK[name]
+		seen.add(name)
+		const direct = resolveColorValue(theme.theme[name], tone, defs)
+		if (direct) return direct
+		const fallback = TOKEN_FALLBACK[name]
+		if (fallback) return resolveOne(fallback)
+		return HARD_FALLBACK[name]
+	}
+
+	for (const name of tokenNames) {
+		seen.clear()
+		out[name] = resolveOne(name)
+	}
+	return out as ResolvedTheme
+}
+
+/** Permissive runtime validation: any object with a `theme` object passes. */
+export const isThemeJson = (value: unknown): value is ThemeJson => {
+	if (typeof value !== "object" || value === null) return false
+	const v = value as Record<string, unknown>
+	return typeof v["theme"] === "object" && v["theme"] !== null
+}
+
+export type { ThemeTokens }

package/src/theme/themes/aura.json

@@ -0,0 +1,58 @@
+{
+	"defs": {
+		"darkBg": "#0f0f0f",
+		"darkBgPanel": "#15141b",
+		"darkBorder": "#2d2d2d",
+		"darkFgMuted": "#6d6d6d",
+		"darkFg": "#edecee",
+		"purple": "#a277ff",
+		"pink": "#f694ff",
+		"blue": "#82e2ff",
+		"red": "#ff6767",
+		"orange": "#ffca85",
+		"cyan": "#61ffca",
+		"green": "#9dff65"
+	},
+	"theme": {
+		"primary": "purple",
+		"secondary": "pink",
+		"accent": "purple",
+		"error": "red",
+		"warning": "orange",
+		"success": "cyan",
+		"info": "purple",
+		"text": "darkFg",
+		"textMuted": "darkFgMuted",
+		"background": "darkBg",
+		"backgroundPanel": "darkBgPanel",
+		"backgroundElement": "darkBgPanel",
+		"border": "darkBorder",
+		"borderActive": "darkFgMuted",
+		"borderSubtle": "darkBorder",
+		"markdownText": "darkFg",
+		"markdownHeading": "purple",
+		"markdownLink": "pink",
+		"markdownLinkText": "purple",
+		"markdownCode": "cyan",
+		"markdownBlockQuote": "darkFgMuted",
+		"markdownEmph": "orange",
+		"markdownStrong": "purple",
+		"markdownHorizontalRule": "darkFgMuted",
+		"markdownListItem": "purple",
+		"markdownListEnumeration": "purple",
+		"markdownImage": "pink",
+		"markdownImageText": "purple",
+		"markdownCodeBlock": "darkFg",
+		"syntaxComment": "darkFgMuted",
+		"syntaxKeyword": "pink",
+		"syntaxFunction": "purple",
+		"syntaxVariable": "purple",
+		"syntaxString": "cyan",
+		"syntaxNumber": "green",
+		"syntaxType": "purple",
+		"syntaxOperator": "pink",
+		"syntaxPunctuation": "darkFg"
+	},
+	"name": "Aura",
+	"$schema": "../../../schema/house-theme.schema.json"
+}

package/src/theme/themes/ayu.json

@@ -0,0 +1,69 @@
+{
+	"defs": {
+		"darkBg": "#0B0E14",
+		"darkBgAlt": "#0D1017",
+		"darkLine": "#11151C",
+		"darkPanel": "#0F131A",
+		"darkFg": "#BFBDB6",
+		"darkFgMuted": "#565B66",
+		"darkGutter": "#6C7380",
+		"darkTag": "#39BAE6",
+		"darkFunc": "#FFB454",
+		"darkEntity": "#59C2FF",
+		"darkString": "#AAD94C",
+		"darkRegexp": "#95E6CB",
+		"darkMarkup": "#F07178",
+		"darkKeyword": "#FF8F40",
+		"darkSpecial": "#E6B673",
+		"darkComment": "#ACB6BF",
+		"darkConstant": "#D2A6FF",
+		"darkOperator": "#F29668",
+		"darkAdded": "#7FD962",
+		"darkRemoved": "#F26D78",
+		"darkAccent": "#E6B450",
+		"darkError": "#D95757",
+		"darkIndentActive": "#6C7380"
+	},
+	"theme": {
+		"primary": "darkEntity",
+		"secondary": "darkConstant",
+		"accent": "darkAccent",
+		"error": "darkError",
+		"warning": "darkSpecial",
+		"success": "darkAdded",
+		"info": "darkTag",
+		"text": "darkFg",
+		"textMuted": "darkFgMuted",
+		"background": "darkBg",
+		"backgroundPanel": "darkPanel",
+		"backgroundElement": "darkBgAlt",
+		"border": "darkGutter",
+		"borderActive": "darkIndentActive",
+		"borderSubtle": "darkLine",
+		"markdownText": "darkFg",
+		"markdownHeading": "darkConstant",
+		"markdownLink": "darkEntity",
+		"markdownLinkText": "darkTag",
+		"markdownCode": "darkString",
+		"markdownBlockQuote": "darkSpecial",
+		"markdownEmph": "darkSpecial",
+		"markdownStrong": "darkFunc",
+		"markdownHorizontalRule": "darkFgMuted",
+		"markdownListItem": "darkEntity",
+		"markdownListEnumeration": "darkTag",
+		"markdownImage": "darkEntity",
+		"markdownImageText": "darkTag",
+		"markdownCodeBlock": "darkFg",
+		"syntaxComment": "darkComment",
+		"syntaxKeyword": "darkKeyword",
+		"syntaxFunction": "darkFunc",
+		"syntaxVariable": "darkEntity",
+		"syntaxString": "darkString",
+		"syntaxNumber": "darkConstant",
+		"syntaxType": "darkSpecial",
+		"syntaxOperator": "darkOperator",
+		"syntaxPunctuation": "darkFg"
+	},
+	"name": "Ayu",
+	"$schema": "../../../schema/house-theme.schema.json"
+}