@tasker-systems/temper-design 0.0.0-stage → 0.6.3

package/dist/ways-in.d.ts

@@ -0,0 +1,36 @@
+/**
+ * The standing ways into the work: the lists both surfaces offer a reader on arrival, declared
+ * once so each is offered under the same name, answering the same question, bounded the same way
+ * (`the-same-ways-in-on-both-surfaces`). The set is the one ruled for both — active goals,
+ * in-progress tasks and sessions — with the latest handoff beside them (`./handoff`).
+ *
+ * The desktop contributes these through its `temper-workflows` plugin manifest; the web has no
+ * plugin model and serves them as its own defaults. Each surface maps `filter` onto its own read.
+ * Every list is read newest update first, and says so (`WAY_IN_ORDER`): a list that does not
+ * state its order leaves the reader to guess what "first" means.
+ */
+/**
+ * What a way in reads: the reader's own work of one doc type, narrowed by its workflow state where
+ * one applies. `owner: '@me'` is ownership, which is the nearest read that exists of "yours": work
+ * the reader does on what someone else owns is not in it, and the scope words say "of yours" rather
+ * than claiming more. When a read of what the reader changed exists, this is where it moves.
+ */
+export type WayInFilter = {
+    docType: string;
+    owner: '@me';
+    status?: string;
+    stage?: string;
+};
+export type WayIn = {
+    id: string;
+    /** The name both surfaces show. */
+    label: string;
+    /** What the list holds, as its omission sentence names it. */
+    scope: string;
+    filter: WayInFilter;
+};
+/** How many rows a way in shows before the reader asks for more. */
+export declare const WAY_IN_BOUND = 8;
+/** The order every way in is read in, in the words both surfaces state it. */
+export declare const WAY_IN_ORDER = "most recently updated first";
+export declare const WAYS_IN: readonly WayIn[];

package/dist/ways-in.js

@@ -0,0 +1,35 @@
+/**
+ * The standing ways into the work: the lists both surfaces offer a reader on arrival, declared
+ * once so each is offered under the same name, answering the same question, bounded the same way
+ * (`the-same-ways-in-on-both-surfaces`). The set is the one ruled for both — active goals,
+ * in-progress tasks and sessions — with the latest handoff beside them (`./handoff`).
+ *
+ * The desktop contributes these through its `temper-workflows` plugin manifest; the web has no
+ * plugin model and serves them as its own defaults. Each surface maps `filter` onto its own read.
+ * Every list is read newest update first, and says so (`WAY_IN_ORDER`): a list that does not
+ * state its order leaves the reader to guess what "first" means.
+ */
+/** How many rows a way in shows before the reader asks for more. */
+export const WAY_IN_BOUND = 8;
+/** The order every way in is read in, in the words both surfaces state it. */
+export const WAY_IN_ORDER = 'most recently updated first';
+export const WAYS_IN = [
+    {
+        id: 'goals',
+        label: 'goals',
+        scope: 'active goals of yours',
+        filter: { docType: 'goal', owner: '@me', status: 'active' },
+    },
+    {
+        id: 'tasks',
+        label: 'in progress',
+        scope: 'tasks in progress of yours',
+        filter: { docType: 'task', owner: '@me', stage: 'in-progress' },
+    },
+    {
+        id: 'sessions',
+        label: 'sessions',
+        scope: 'sessions of yours',
+        filter: { docType: 'session', owner: '@me' },
+    },
+];

package/guard/colours.mjs

@@ -0,0 +1,347 @@
+#!/usr/bin/env node
+// `web-paints-only-roles` / `no-private-colour-names`: a component paints colour from the
+// contract's roles (`var(--tp-*)`, `tp-` utilities) and nothing else, so every theme restyles
+// everything. Within the paths a surface lists, this refuses:
+//
+//   (a) a literal colour: hex, a colour function, or a named colour;
+//   (b) a Tailwind colour utility naming the stock palette, white or black, or a colour name the
+//       surface declares for itself (`--color-<name>` in the theme files it lists);
+//   (c) an opacity modifier on a role utility: a role at 15% is a value no theme chose;
+//   (d) a colour declaration, SVG attribute, style directive or arbitrary colour utility reading
+//       a variable that is not a role or a declared carrier (below);
+//   (e) a role mixed down: a `color-mix()` reading a role, or a bridged name (below), is (c)
+//       spelled in CSS;
+//   (f) a custom property declared from a variable that is not a role: `--wx-color-font:
+//       var(--color-quiet-fg)` launders a private name past (d), which reads only colour
+//       properties by name. A custom property may read roles (fonts included), a pending hole,
+//       or a bridged name: one declared within the guarded paths whose every declaration there
+//       reads a variable and resolves to roles (`--color-background: var(--background)`, where
+//       `--background: var(--tp-ground)`). A declaration outside the paths — a vendor stylesheet,
+//       a selector scope the name is not bridged in — is not seen.
+//
+// Every rule reads one line at a time: a declaration whose value wraps onto the next line is not
+// seen. A colour set from script (`el.style.setProperty`, a JS style object) is out of reach.
+// (f) cannot tell what a custom property holds, so it over-reaches: a spacing or tracking alias
+// (`--gap: var(--space-column)`) is refused as though it were a colour. Read the variable in the
+// property that uses it instead (`gap: var(--space-column)`), which no rule refuses.
+//
+// A surface commits a config naming what it guards, relative to the config's own directory:
+//
+//   { "paths": ["src/lib/components/Sidebar.svelte", "src/routes/(app)"],
+//     "themes": ["src/app.css"],
+//     "carriers": ["--hue"],
+//     "pending": [{ "var": "--tint", "until": "T12", "why": "plugin tint, not yet bound" }] }
+//
+// A carrier is a name the surface vouches for as carrying a role to its marks: `--hue` set on a
+// view's root as `style="--hue: var(--tp-{tint})"`, read as `color: var(--hue)`. (d) admits a
+// carrier only; a bridge alone is not enough to paint with, because it proves only the
+// declarations inside the paths, and a vendor stylesheet outside them may set the same name to a
+// literal. Every declaration of a carrier must write one role out — `var(--tp-cat-2)`, or with
+// its suffix interpolated, `var(--tp-{tint})` — with no fallback and no other expression; it must
+// resolve to roles; and something must read it. Declarations inside a `<script>` block declare
+// nothing.
+//
+// A `pending` entry is a declared hole: a variable that is not a role yet, the task that makes it
+// one, and why it waits. Its reads — and any `color-mix()` reading it — are counted and reported
+// on every run rather than refused, so the hole stays stated. A literal beside it is still (a).
+//
+// A listed directory is walked for .svelte and .css files; a listed file is read whatever its
+// extension. A surface still moving off the stock palette lists the areas it has moved, and
+// each area that moves adds its paths. Comments are ignored.
+//
+//   node guard/colours.mjs <colour-guard.json>
+import { existsSync, readdirSync, readFileSync, statSync } from 'node:fs';
+import { dirname, isAbsolute, join, relative, resolve } from 'node:path';
+
+const USAGE = 'usage: colours.mjs <colour-guard.json>';
+
+function fail(message) {
+	console.error(`colours: ${message}`);
+	process.exit(2);
+}
+
+const args = process.argv.slice(2);
+if (args.length !== 1) fail(USAGE);
+const configPath = resolve(args[0]);
+if (!existsSync(configPath)) fail(`no config at ${configPath}`);
+let config;
+try {
+	config = JSON.parse(readFileSync(configPath, 'utf8'));
+} catch (e) {
+	fail(`${configPath} is not JSON: ${e.message}`);
+}
+const base = dirname(configPath);
+const at = (p) => (isAbsolute(p) ? p : join(base, p));
+const paths = config.paths ?? [];
+const themes = config.themes ?? [];
+if (!Array.isArray(paths) || paths.length === 0)
+	fail('"paths" is empty: an empty scope guards nothing');
+if (!Array.isArray(themes)) fail('"themes" must be a list');
+const pendingEntries = config.pending ?? [];
+if (!Array.isArray(pendingEntries)) fail('"pending" must be a list');
+const pending = new Map();
+for (const entry of pendingEntries) {
+	const { var: name, until, why } = entry ?? {};
+	if (![name, until, why].every((v) => typeof v === 'string' && v.trim()))
+		fail(`pending entry ${JSON.stringify(entry)} needs "var", "until" and "why": a hole is named`);
+	if (!/^--[a-zA-Z0-9-]+$/.test(name)) fail(`pending "var" ${name} is not a custom property`);
+	if (name.startsWith('--tp-')) fail(`pending "var" ${name} is a role: a role needs no excuse`);
+	pending.set(name, { until, reads: 0 });
+}
+const carrierNames = config.carriers ?? [];
+if (!Array.isArray(carrierNames)) fail('"carriers" must be a list');
+const carriers = new Map();
+for (const name of carrierNames) {
+	if (typeof name !== 'string' || !/^--[a-zA-Z0-9-]+$/.test(name))
+		fail(`carrier ${JSON.stringify(name)} is not a custom property`);
+	if (name.startsWith('--tp-')) fail(`carrier ${name} is a role: a role needs no carrier`);
+	if (pending.has(name)) fail(`carrier ${name} is also pending: a name is a hole or a carrier`);
+	carriers.set(name, { reads: 0 });
+}
+// A carrier's declaration names one role, written out: `var(--tp-cat-2)`, or with its suffix
+// interpolated, `var(--tp-{tint})`. No fallback, no other expression.
+// The value a declaration rule captures stops at `}`, so an interpolated suffix is matched
+// against the line it sits on.
+const STRICT_CARRIER = /^\s*var\(--tp-[a-z0-9-]+\)\s*$/;
+const strictCarrier = (name, value, line) =>
+	STRICT_CARRIER.test(value) ||
+	new RegExp(
+		`(?<![\\w-])${name}\\s*:\\s*var\\(--tp-[a-z0-9-]*\\{[\\w.]+\\}[a-z0-9-]*\\)\\s*(?:[;"'}]|$)`,
+	).test(line);
+
+// The desktop's literal rule: hex, the colour functions, and named colours where a value ends.
+// An id or anchor like `#r0` is not a colour; only hex-shaped runs of 3/4/6/8 count. Nor is an
+// HTML numeric entity (`&#8984;`, the ⌘ glyph), which the desktop's rule would misread.
+const LITERAL =
+	/(?<!&)#[0-9a-fA-F]{3,8}\b|\b(?:rgba?|hsla?|oklch|oklab|lab|lch|hwb)\(|\b(?:white|black|red|green|blue|gray|grey|orange|yellow|purple|pink)\b(?=\s*[;})'"])/g;
+
+const PREFIX =
+	'(?:bg|text-shadow|text|border-[xytrbl]|border-[se]|border|ring-offset|ring|inset-ring|inset-shadow|divide|outline|placeholder|from|via|to|fill|stroke|drop-shadow|shadow|decoration|accent|caret)';
+const VARIANTS = '(?:[a-z0-9-]+:)*';
+// A colour utility with a plain value: `hover:bg-zinc-800/50`, `class:border-zinc-700`.
+const UTILITY = new RegExp(
+	`(?<![\\w-])${VARIANTS}${PREFIX}-([a-z0-9-]+)(/(?:\\d+|\\[[^\\]\\s]+\\]))?(?![\\w-])`,
+	'g',
+);
+// A colour utility with an arbitrary value: `bg-[var(--obsidian)]`, `text-(--chalk)`,
+// `bg-[color-mix(in_srgb,var(--hue)_15%,var(--obsidian))]`. Every variable in its body outside
+// the contract is refused, not only the first.
+const ARBITRARY = new RegExp(
+	`(?<![\\w-])${VARIANTS}${PREFIX}-(?:\\[([^\\]\\s]+)\\]|\\(([^\\)\\s]+)\\))`,
+	'g',
+);
+const NON_ROLE_NAME = /--(?!tp-)[a-zA-Z0-9-]+/g;
+const STOCK =
+	/^(?:(?:slate|gray|zinc|neutral|stone|mauve|olive|mist|taupe|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-\d{2,3}|white|black)$/;
+// A declaration that paints a colour, and the value it paints.
+const DECLARATION =
+	/(?<![\w-])(color|background(?:-color)?|border(?:-(?:top|right|bottom|left|inline|block)(?:-(?:start|end))?)?(?:-color)?|outline(?:-color)?|fill|stroke|box-shadow|text-decoration(?:-color)?|caret-color|accent-color|stop-color|column-rule(?:-color)?)\s*:\s*([^;}"'\n]*)/g;
+// The same, painted through markup: an SVG presentation attribute (`fill="var(--x)"`) or a
+// Svelte style directive (`style:color="var(--x)"`).
+const ATTRIBUTE =
+	/(?<![\w-])(?:style:)?(fill|stroke|stop-color|flood-color|lighting-color|color|background(?:-color)?|border(?:-[a-z]+)*-color|outline-color|caret-color|accent-color|text-decoration-color)\s*=\s*["'{]([^"'}\n]*)/g;
+// A custom property's declaration and its value: `--wx-color-font: var(--x)`, or Svelte's
+// directive for one, `style:--wx-color-font="var(--x)"` / `style:--wx-color-font={'var(--x)'}`.
+const CUSTOM_PROPERTY = /(?<![\w-])(--[a-zA-Z0-9-]+)\s*:\s*([^;}"'\n]*)/g;
+const CUSTOM_DIRECTIVE =
+	/(?<![\w-])style:(--[a-zA-Z0-9-]+)\s*=\s*(?:"([^"\n]*)"|'([^'\n]*)'|\{([^}\n]*)\})/g;
+// Each custom-property declaration in `text`, as [name, value].
+function* customProperties(text) {
+	for (const m of text.matchAll(CUSTOM_PROPERTY)) yield [m[1], m[2]];
+	for (const m of text.matchAll(CUSTOM_DIRECTIVE)) yield [m[1], m[2] ?? m[3] ?? m[4]];
+}
+const PRIVATE_VAR = /var\(\s*(--(?!tp-)[a-zA-Z0-9-]+)/g;
+const ROLE_VAR = /var\(\s*--tp-/;
+const PENDING_VAR = /var\(\s*(--[a-zA-Z0-9-]+)/g;
+
+// Each outermost `color-mix(…)` on a line, with its balanced argument list. Like every rule here
+// it reads one line at a time: a mix whose role sits on a later line is not seen. Tailwind's arbitrary values
+// spell spaces as `_`, which changes nothing here.
+function* mixes(line) {
+	for (let at = line.indexOf('color-mix('); at >= 0; ) {
+		let depth = 0;
+		let end = at + 'color-mix'.length;
+		for (; end < line.length; end++) {
+			if (line[end] === '(') depth++;
+			else if (line[end] === ')' && --depth === 0) break;
+		}
+		yield line.slice(at, end + 1);
+		// A mix nested inside this one is part of it, not a second refusal.
+		at = line.indexOf('color-mix(', end + 1);
+	}
+}
+
+// Blank out every `open … close` span, keeping its newlines so reported line numbers stay true.
+// A scan rather than a regex replace: an unterminated comment blanks the rest of the file instead
+// of leaving a fragment behind.
+function blank(text, open, close) {
+	let out = '';
+	let i = 0;
+	for (;;) {
+		const start = text.indexOf(open, i);
+		if (start < 0) return out + text.slice(i);
+		out += text.slice(i, start);
+		const end = text.indexOf(close, start + open.length);
+		const stop = end < 0 ? text.length : end + close.length;
+		out += text.slice(start, stop).replace(/[^\n]/g, '');
+		if (end < 0) return out;
+		i = stop;
+	}
+}
+
+const stripComments = (text) =>
+	blank(blank(text, '/*', '*/'), '<!--', '-->').replace(/^[ \t]*\/\/.*$/gm, '');
+
+// The colour names a surface declares for itself: every `--color-<name>` in its theme files that
+// is not a role. These are what `no-private-colour-names` refuses.
+const privateNames = new Set();
+for (const theme of themes) {
+	const path = at(theme);
+	if (!existsSync(path)) fail(`listed theme ${theme} does not exist`);
+	const text = stripComments(readFileSync(path, 'utf8'));
+	for (const m of text.matchAll(/--color-([a-z0-9-]+)\s*:/g)) {
+		if (!m[1].startsWith('tp-')) privateNames.add(m[1]);
+	}
+}
+
+function* walk(dir) {
+	for (const name of readdirSync(dir)) {
+		const path = join(dir, name);
+		if (statSync(path).isDirectory()) yield* walk(path);
+		else if (/\.(svelte|css)$/.test(name)) yield path;
+	}
+}
+
+const files = [];
+for (const listed of paths) {
+	const path = at(listed);
+	if (!existsSync(path))
+		fail(`listed path ${listed} does not exist: a scope that names nothing guards nothing`);
+	if (statSync(path).isDirectory()) {
+		const found = [...walk(path)];
+		if (found.length === 0) fail(`listed directory ${listed} holds no .svelte or .css file`);
+		files.push(...found);
+	} else files.push(path);
+}
+
+// Bridged names: custom properties declared within the paths whose every declaration reads only
+// roles or other bridged names, to a fixed point. A name with any other read is not bridged, and
+// nor is one with a declaration reading no variable at all: `style="--hue: {hue}"` is a colour
+// supplied from script, which no theme chose, not a value that resolves to roles.
+const UNRESOLVED = '(no variable)';
+const declared = new Map();
+for (const path of files) {
+	const markup = blank(stripComments(readFileSync(path, 'utf8')), '<script', '</script>');
+	for (const [name, value] of customProperties(markup)) {
+		const reads = [...value.matchAll(PRIVATE_VAR)].map((v) => v[1]);
+		if (!/var\(/.test(value)) reads.push(UNRESOLVED);
+		declared.set(name, [...(declared.get(name) ?? []), ...reads]);
+	}
+}
+const bridged = new Set();
+for (let grew = true; grew; ) {
+	grew = false;
+	for (const [name, reads] of declared) {
+		if (!bridged.has(name) && reads.every((r) => bridged.has(r))) {
+			bridged.add(name);
+			grew = true;
+		}
+	}
+}
+
+// A carrier may be painted with only while every declaration of it the guard sees is a role.
+const carries = (name) => carriers.has(name) && bridged.has(name);
+const readsPending = (text) => [...text.matchAll(PENDING_VAR)].some((m) => pending.has(m[1]));
+// A bridged name resolves to roles, so mixing it is mixing a role one hop removed.
+const readsRole = (text) =>
+	ROLE_VAR.test(text) || [...text.matchAll(PENDING_VAR)].some((m) => bridged.has(m[1]));
+
+function refusals(line) {
+	const out = [];
+	for (const mix of mixes(line)) {
+		if (readsRole(mix) && !readsPending(mix))
+			out.push(
+				`${mix} mixes a role to a strength no theme chose — use a role (*-wash, accent-hover, …)`,
+			);
+	}
+	for (const m of line.matchAll(PENDING_VAR)) {
+		if (pending.has(m[1])) pending.get(m[1]).reads++;
+		if (carriers.has(m[1])) carriers.get(m[1]).reads++;
+	}
+	for (const m of line.matchAll(LITERAL)) {
+		if (m[0].startsWith('#') && ![4, 5, 7, 9].includes(m[0].length)) continue;
+		out.push(`literal colour ${m[0]} — use a theme role`);
+	}
+	for (const m of line.matchAll(UTILITY)) {
+		const [utility, value, modifier] = m;
+		if (value.startsWith('tp-')) {
+			if (modifier) out.push(`${utility} sets a role's strength — use its -wash or -hover role`);
+		} else if (STOCK.test(value)) {
+			out.push(`${utility} paints from Tailwind's palette — use a tp- role`);
+		} else if (privateNames.has(value)) {
+			out.push(`${utility} paints a colour name the contract lacks — use a tp- role`);
+		}
+	}
+	for (const m of line.matchAll(ARBITRARY)) {
+		for (const [name] of (m[1] ?? m[2]).matchAll(NON_ROLE_NAME)) {
+			if (!pending.has(name) && !carries(name))
+				out.push(`${m[0]} reads ${name}, which is not a role`);
+		}
+	}
+	for (const m of [...line.matchAll(DECLARATION), ...line.matchAll(ATTRIBUTE)]) {
+		for (const v of m[2].matchAll(PRIVATE_VAR)) {
+			if (pending.has(v[1]) || carries(v[1])) continue;
+			out.push(`${m[1]} reads var(${v[1]}), which is not a role`);
+		}
+	}
+	for (const [name, value] of customProperties(line)) {
+		if (carriers.has(name) && !strictCarrier(name, value, line))
+			out.push(
+				`carrier ${name} is declared from ${value.trim()} — write the role out: var(--tp-…)`,
+			);
+		for (const v of value.matchAll(PRIVATE_VAR)) {
+			if (pending.has(v[1]) || bridged.has(v[1])) continue;
+			out.push(`${name} is declared from var(${v[1]}), which is not a role`);
+		}
+	}
+	return out;
+}
+
+let failures = 0;
+for (const path of files) {
+	const lines = stripComments(readFileSync(path, 'utf8')).split('\n');
+	lines.forEach((line, i) => {
+		for (const why of refusals(line)) {
+			console.error(`${relative(base, path)}:${i + 1}: ${why}`);
+			failures++;
+		}
+	});
+}
+for (const [name, { reads }] of carriers) {
+	if (!bridged.has(name)) {
+		console.error(
+			`carrier ${name} does not resolve to roles within the paths — declare it from a role`,
+		);
+		failures++;
+	} else if (reads === 0) {
+		console.error(`carrier: nothing reads ${name} — remove the entry`);
+		failures++;
+	} else console.log(`carrier: ${name} read ${reads} time(s)`);
+}
+let pendingReads = 0;
+for (const [name, { until, reads }] of pending) {
+	pendingReads += reads;
+	if (reads === 0) {
+		console.error(`pending: nothing reads ${name} any more — remove the entry (${until})`);
+		failures++;
+	} else console.log(`pending: ${name} read ${reads} time(s) until ${until} — not a role yet`);
+}
+if (failures) {
+	console.error(
+		`\n${failures} colour(s) outside the contract. Components paint --tp-* roles only (@tasker-systems/temper-design).`,
+	);
+	process.exit(1);
+}
+console.log(
+	`ok: ${files.length} file(s) paint only contract roles${pendingReads ? ', apart from the pending reads above' : ''}`,
+);

package/package.json

@@ -1,6 +1,99 @@
 {
   "name": "@tasker-systems/temper-design",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.6.3",
+  "description": "temper's theme contract, themes and shared rendering modules: the one source every temper surface paints from",
+  "license": "MIT",
+  "type": "module",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/tasker-systems/temper.git",
+    "directory": "packages/temper-design"
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org"
+  },
+  "files": [
+    "contract/*.css",
+    "contract/theme.schema.json",
+    "*/theme.css",
+    "*/theme.json",
+    "themes.json",
+    "brand/*.svg",
+    "guard/colours.mjs",
+    "toolchain/check.mjs",
+    "toolchain/majors.json",
+    "dist/*.js",
+    "dist/*.d.ts"
+  ],
+  "exports": {
+    "./markdown": {
+      "types": "./dist/markdown.d.ts",
+      "default": "./dist/markdown.js"
+    },
+    "./sanitize": {
+      "types": "./dist/sanitize.d.ts",
+      "default": "./dist/sanitize.js"
+    },
+    "./highlight": {
+      "types": "./dist/highlight.d.ts",
+      "default": "./dist/highlight.js"
+    },
+    "./handoff": {
+      "types": "./dist/handoff.d.ts",
+      "default": "./dist/handoff.js"
+    },
+    "./ways-in": {
+      "types": "./dist/ways-in.d.ts",
+      "default": "./dist/ways-in.js"
+    },
+    "./links": {
+      "types": "./dist/links.d.ts",
+      "default": "./dist/links.js"
+    },
+    "./region": {
+      "types": "./dist/region.d.ts",
+      "default": "./dist/region.js"
+    },
+    "./omission": {
+      "types": "./dist/omission.d.ts",
+      "default": "./dist/omission.js"
+    },
+    "./theme": {
+      "types": "./dist/theme.d.ts",
+      "default": "./dist/theme.js"
+    },
+    "./vocabulary": {
+      "types": "./dist/vocabulary.d.ts",
+      "default": "./dist/vocabulary.js"
+    },
+    "./graph": {
+      "types": "./dist/graph.d.ts",
+      "default": "./dist/graph.js"
+    },
+    "./themes.json": "./themes.json",
+    "./contract/*": "./contract/*",
+    "./brand/*": "./brand/*",
+    "./*/theme.css": "./*/theme.css",
+    "./*/theme.json": "./*/theme.json"
+  },
+  "scripts": {
+    "build": "tsc",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run",
+    "lint": "biome check"
+  },
+  "dependencies": {
+    "d3-force": "^3.0.0",
+    "dompurify": "^3.4.17",
+    "highlight.js": "^11.12.0",
+    "marked": "^18.1.1",
+    "marked-highlight": "^2.2.4"
+  },
+  "devDependencies": {
+    "@biomejs/biome": "^2.5.15",
+    "@types/d3-force": "^3.0.10",
+    "jsdom": "^30",
+    "typescript": "^6.0.3",
+    "vitest": "^5.0.3"
+  }
+}

package/quiet-instrument/theme.css

@@ -0,0 +1,66 @@
+/* Generated from quiet-instrument/theme.json by themes/scripts/themes.sh build. Do not edit. */
+[data-theme="quiet-instrument"] {
+  color-scheme: dark;
+  --tp-ground: #0a0a0f;
+  --tp-surface: #0c0c11;
+  --tp-surface-raised: #12121a;
+  --tp-overlay: rgba(10, 10, 15, 0.72);
+  --tp-text: #e8e4df;
+  --tp-text-muted: rgba(255, 255, 255, 0.65);
+  --tp-text-subtle: rgba(255, 255, 255, 0.45);
+  --tp-text-faint: rgba(255, 255, 255, 0.30);
+  --tp-rule: rgba(255, 255, 255, 0.06);
+  --tp-rule-strong: rgba(255, 255, 255, 0.10);
+  --tp-accent: #7eb8da;
+  --tp-accent-muted: rgba(126, 184, 218, 0.40);
+  --tp-accent-line: rgba(126, 184, 218, 0.50);
+  --tp-accent-line-soft: rgba(126, 184, 218, 0.25);
+  --tp-accent-wash: rgba(126, 184, 218, 0.08);
+  --tp-accent-hover: rgba(126, 184, 218, 0.12);
+  --tp-on-accent: #0a0a0f;
+  --tp-focus: #8ecbff;
+  --tp-notice: #fcd34d;
+  --tp-notice-wash: rgba(245, 158, 11, 0.05);
+  --tp-success: #a7f3d0;
+  --tp-success-wash: rgba(110, 231, 183, 0.05);
+  --tp-danger: #e0755f;
+  --tp-danger-wash: rgba(224, 117, 95, 0.08);
+  --tp-pending: #a9d2ea;
+  --tp-pending-wash: rgba(126, 184, 218, 0.06);
+  --tp-region-arriving: #8fb6e8;
+  --tp-region-arriving-wash: rgba(143, 182, 232, 0.05);
+  --tp-region-empty: #79828f;
+  --tp-region-empty-wash: rgba(255, 255, 255, 0.02);
+  --tp-region-gave-up: #b9a6de;
+  --tp-region-gave-up-wash: rgba(143, 124, 192, 0.07);
+  --tp-region-failed: #e0a377;
+  --tp-region-failed-wash: rgba(192, 122, 74, 0.08);
+  --tp-author-human: #e8e4df;
+  --tp-author-agent: #8e9fc7;
+  --tp-cat-1: #de8fa5;
+  --tp-cat-2: #67d9a4;
+  --tp-cat-3: #4fc9c9;
+  --tp-cat-4: #e08ad2;
+  --tp-cat-5: #5f87e8;
+  --tp-cat-6: #d9a83f;
+  --tp-cat-7: #8f74d9;
+  --tp-cat-8: #a8c95c;
+  --tp-cat-neutral: #a89e93;
+  --tp-code-key: #8fd8a8;
+  --tp-code-string: #fcd34d;
+  --tp-code-number: #93c5fd;
+  --tp-code-comment: rgba(255, 255, 255, 0.45);
+  --tp-font-reading: "Source Serif 4 Variable", "Source Serif 4", Georgia, "Times New Roman", serif;
+  --tp-font-doing: "JetBrains Mono Variable", "JetBrains Mono", "Fira Code", ui-monospace, monospace;
+  --tp-font-ui: "Inter Variable", Inter, system-ui, -apple-system, sans-serif;
+  --tp-radius-chip: 3px;
+  --tp-radius-panel: 0;
+  --tp-motion-quick: 150ms;
+  --tp-motion-settle: 240ms;
+  --tp-motion-easing: ease;
+  --tp-tracking-label: 0.20em;
+  --tp-tracking-strip: 0.22em;
+  --tp-tracking-eyebrow: 0.28em;
+  --tp-tracking-ui: 0.05em;
+  --tp-tracking-mark: 0.15em;
+}

package/quiet-instrument/theme.json

@@ -0,0 +1,85 @@
+{
+  "$schema": "../contract/theme.schema.json",
+  "kind": "theme",
+  "name": "quiet-instrument",
+  "title": "Quiet Instrument",
+  "version": "0.1.0",
+  "description": "Obsidian ground, parchment text, one steel-blue accent. Reading in serif, doing in mono. Semantic colour is a whisper.",
+  "appearance": "dark",
+  "counterpart": "quiet-instrument-paper",
+  "provenance": "Ported from temper's design-system/ and packages/temper-ui/src/app.css (Quiet Instrument), including the region vocabulary from RegionState.svelte and the hljs palette.",
+  "tokens": {
+    "color": {
+      "ground": "#0a0a0f",
+      "surface": "#0c0c11",
+      "surface-raised": "#12121a",
+      "overlay": "rgba(10, 10, 15, 0.72)",
+      "text": "#e8e4df",
+      "text-muted": "rgba(255, 255, 255, 0.65)",
+      "text-subtle": "rgba(255, 255, 255, 0.45)",
+      "text-faint": "rgba(255, 255, 255, 0.30)",
+      "rule": "rgba(255, 255, 255, 0.06)",
+      "rule-strong": "rgba(255, 255, 255, 0.10)",
+      "accent": "#7eb8da",
+      "accent-muted": "rgba(126, 184, 218, 0.40)",
+      "accent-line": "rgba(126, 184, 218, 0.50)",
+      "accent-line-soft": "rgba(126, 184, 218, 0.25)",
+      "accent-wash": "rgba(126, 184, 218, 0.08)",
+      "accent-hover": "rgba(126, 184, 218, 0.12)",
+      "on-accent": "#0a0a0f",
+      "focus": "#8ecbff",
+      "notice": "#fcd34d",
+      "notice-wash": "rgba(245, 158, 11, 0.05)",
+      "success": "#a7f3d0",
+      "success-wash": "rgba(110, 231, 183, 0.05)",
+      "danger": "#e0755f",
+      "danger-wash": "rgba(224, 117, 95, 0.08)",
+      "pending": "#a9d2ea",
+      "pending-wash": "rgba(126, 184, 218, 0.06)",
+      "region-arriving": "#8fb6e8",
+      "region-arriving-wash": "rgba(143, 182, 232, 0.05)",
+      "region-empty": "#79828f",
+      "region-empty-wash": "rgba(255, 255, 255, 0.02)",
+      "region-gave-up": "#b9a6de",
+      "region-gave-up-wash": "rgba(143, 124, 192, 0.07)",
+      "region-failed": "#e0a377",
+      "region-failed-wash": "rgba(192, 122, 74, 0.08)",
+      "author-human": "#e8e4df",
+      "author-agent": "#8e9fc7",
+      "cat-1": "#de8fa5",
+      "cat-2": "#67d9a4",
+      "cat-3": "#4fc9c9",
+      "cat-4": "#e08ad2",
+      "cat-5": "#5f87e8",
+      "cat-6": "#d9a83f",
+      "cat-7": "#8f74d9",
+      "cat-8": "#a8c95c",
+      "cat-neutral": "#a89e93",
+      "code-key": "#8fd8a8",
+      "code-string": "#fcd34d",
+      "code-number": "#93c5fd",
+      "code-comment": "rgba(255, 255, 255, 0.45)"
+    },
+    "font": {
+      "reading": "\"Source Serif 4 Variable\", \"Source Serif 4\", Georgia, \"Times New Roman\", serif",
+      "doing": "\"JetBrains Mono Variable\", \"JetBrains Mono\", \"Fira Code\", ui-monospace, monospace",
+      "ui": "\"Inter Variable\", Inter, system-ui, -apple-system, sans-serif"
+    },
+    "radius": {
+      "chip": "3px",
+      "panel": "0"
+    },
+    "motion": {
+      "quick": "150ms",
+      "settle": "240ms",
+      "easing": "ease"
+    },
+    "tracking": {
+      "label": "0.20em",
+      "strip": "0.22em",
+      "eyebrow": "0.28em",
+      "ui": "0.05em",
+      "mark": "0.15em"
+    }
+  }
+}