@bismawy/pi-arnative 0.3.0 → 0.3.2

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # Changelog
 
+## [0.3.2] - 2026-10-04
+
+### Changed
+- Source cleanup only: the generator's 11 `accent` seeds, the color self-check and one test fixture no longer hold raw hex. Each seed is now the OKLCH value of the same colour (`#00d7ff` → `oklch(81.1% 0.1455 217.709375)`), produced by `hexToOklch`, so the theme output is **byte-identical**; `themes/*.json` are untouched. `lib/color.ts` also keeps its hex, deliberately: those literals are the test vectors for the hex parser, not styling (`themes/gen-themes.mjs`, `lib/color.ts`, `extensions/ui-render-tweaks.ts`).
+- `themes/gen-themes.mjs` dropped its private `parseOklch` (percent-only regex) for the shared one in `lib/color.ts`, which also accepts a fractional `L` — a seed can no longer parse as `NaN`.
+- No user-visible change; this release exists to bring the npm tarball in line with `main` after #8.
+
+## [0.3.1] - 2026-10-04
+
+### Changed
+- `/arnative headers` and `/arnative footers` picker rows are reordered built-in first (`Pi (system)`, `Arnative (Full)`) and the parenthetical suffix now renders in the theme's `dim` token, so the preset name carries the row and the qualifier reads as a footnote (`extensions/arnative.ts`).
+- Preset ids renamed: `Pi` → `Pi (system)`. `Arnative (Full)` is still the default and the header/footer slot logic is unchanged.
+- Picker subtitles no longer repeat the preset names: "Selection applies live — custom header or built-in."
+- README shows only `assets/pi-arnative.webp` as the hero image; the full-width `assets/banner.webp` stays reserved for the pi.dev package page via `pi.image`.
+- `package.json` `description` now leads with the README tagline ("Refined aesthetics. Cohesive tools. Built for Pi.") followed by the capability summary, per the `/arnative-pi` manifest standard — pi.dev/packages renders this field verbatim as the package card description.
+
 ## [0.3.0] - 2026-10-03
 
 ### Fixed

package/README.md

@@ -6,8 +6,6 @@ Refined aesthetics. Cohesive tools. Built for Pi.
 [![badge](https://shieldcn.dev/npm/@bismawy/pi-arnative.svg?variant=outline&size=xs)](https://www.npmjs.com/package/@bismawy/pi-arnative)
 [![license](https://shieldcn.dev/github/bismawy/pi-arnative/license.svg?variant=outline&size=xs)](https://github.com/bismawy/pi-arnative)
 
-<img src="https://raw.githubusercontent.com/bismawy/pi-arnative/main/assets/banner.webp" alt="Arnative" width="100%">
-
 ![Arnative: tabbed header, rounded tool boxes, transcript clock and /usage dashboard](https://raw.githubusercontent.com/bismawy/pi-arnative/main/assets/pi-arnative.webp)
 
 ## Overview

package/extensions/arnative.ts

@@ -112,9 +112,13 @@ export class ListPicker implements Component {
 			const name = this.names[i]!;
 			const isSelected = i === this.selected;
 			const mark = name === this.applied ? "● " : "  ";
-			const body = truncateToWidth(`${isSelected ? "▸" : " "} ${mark}${name}`, width - 4);
+			const plain = truncateToWidth(`${isSelected ? "▸" : " "} ${mark}${name}`, width - 4);
+			// Preset rows end in a parenthetical (`Pi (system)`, `Arnative (Full)`): the suffix reads softer than the name.
+			const suffix = /(\(.*\))$/.exec(plain)?.[1] ?? "";
+			const head = plain.slice(0, plain.length - suffix.length);
+			const tail = suffix ? th.fg("dim", suffix) : "";
 			// Same rule as the select dialogs: marker accent, name soft.
-			out.push(row(isSelected ? th.fg("accent", body.slice(0, 2 + mark.length)) + soft(body.slice(2 + mark.length)) : th.fg("text", body)));
+			out.push(row(isSelected ? th.fg("accent", head.slice(0, 2 + mark.length)) + soft(head.slice(2 + mark.length)) + tail : th.fg("text", head) + tail));
 		}
 		out.push(row(""));
 		out.push(row(th.fg("dim", this.text.footer)));
@@ -168,7 +172,7 @@ const openThemes = async (ctx: ExtensionCommandContext): Promise<void> => {
 
 const FOOTERS_PICKER_TEXT: ListPickerText = {
 	title: "Arnative · Footers",
-	subtitle: "Selection applies live — Arnative (Full) or Pi's built-in footer.",
+	subtitle: "Selection applies live — custom footer or built-in.",
 	footer: "[↑↓] Preview live  [Enter] Keep  [Esc] Revert",
 };
 
@@ -204,7 +208,7 @@ const openFooters = async (ctx: ExtensionCommandContext): Promise<void> => {
 
 const HEADERS_PICKER_TEXT: ListPickerText = {
 	title: "Arnative · Headers",
-	subtitle: "Selection applies live — Arnative (Full) or Pi's built-in header.",
+	subtitle: "Selection applies live — custom header or built-in.",
 	footer: "[↑↓] Preview live  [Enter] Keep  [Esc] Revert",
 };
 
@@ -341,19 +345,19 @@ if (isMain(import.meta.url)) {
 	assert(reverted === 1 && done === 2, "Esc reverts after preview");
 
 	// Headers reuses the same picker with its own copy and presets.
-	assert(HEADER_PRESETS[0] === "Arnative (Full)", "first preset is Arnative (Full)");
+	assert(HEADER_PRESETS[0] === "Pi (system)", "built-in header preset is listed first");
 	const headerPicker = new ListPicker(fakeTheme, [...HEADER_PRESETS], "Arnative (Full)", { preview: () => {}, revert: () => {}, done: () => {}, requestRender: () => {} }, HEADERS_PICKER_TEXT);
 	const headerLines = headerPicker.render(50);
 	assert(headerLines.some((l) => l.includes("Arnative · Headers")), "headers picker title");
 	assert(headerLines.some((l) => l.includes("● Arnative (Full)")), "headers picker marks the active preset");
-	assert(headerLines.some((l) => l.includes("  Pi")), "headers picker lists Pi");
+	assert(headerLines.some((l) => l.includes("  Pi (system)")), "headers picker lists the built-in preset");
 
 	// Footers reuses the same picker too.
-	assert(FOOTER_PRESETS[0] === "Arnative (Full)", "first footer preset is Arnative (Full)");
-	const footerPicker = new ListPicker(fakeTheme, [...FOOTER_PRESETS], "Pi", { preview: () => {}, revert: () => {}, done: () => {}, requestRender: () => {} }, FOOTERS_PICKER_TEXT);
+	assert(FOOTER_PRESETS[0] === "Pi (system)", "built-in footer preset is listed first");
+	const footerPicker = new ListPicker(fakeTheme, [...FOOTER_PRESETS], "Pi (system)", { preview: () => {}, revert: () => {}, done: () => {}, requestRender: () => {} }, FOOTERS_PICKER_TEXT);
 	const footerLines = footerPicker.render(50);
 	assert(footerLines.some((l) => l.includes("Arnative · Footers")), "footers picker title");
-	assert(footerLines.some((l) => l.includes("● Pi")), "footers picker marks the active preset");
+	assert(footerLines.some((l) => l.includes("● Pi (system)")), "footers picker marks the active preset");
 
 	console.log("arnative.ts self-check OK");
 }

package/extensions/footer.ts

@@ -4,7 +4,7 @@
  * Rows 2-3: extension status (mcp first) ......... tok/s · cache · token,
  * each side wrapped inside its half of the width and paired row by row.
  *
- * Preset (`/arnative footers`): "Arnative (Full)" (default) or "Pi" (built-in footer), live.
+ * Preset (`/arnative footers`): "Arnative (Full)" (default) or "Pi (system)" (built-in footer), live.
  * Transcript clock & bubble bg: extensions/timestamps.ts
  * /new header: extensions/section-headers.ts
  * Selection + box reload: extensions/ui-render-tweaks.ts
@@ -27,10 +27,11 @@ import { formatTokens } from "../lib/usage-store.ts";
 // fire this twice even when the terminal reports event types (Kitty flag 2).
 
 // Footer preset chosen through `/arnative footers`. "Arnative (Full)" = this extension's
-// 3-row grid footer; "Pi" = pi's built-in footer (the boxed editor stays arnative in both —
-// pi's `setEditorComponent()` would close the picker mid-preview). The picker lives in
-// arnative.ts, so the choice is shared through globalThis like the header preset.
-export const FOOTER_PRESETS = ["Arnative (Full)", "Pi"] as const;
+// 3-row grid footer; "Pi (system)" = pi's built-in footer (the boxed editor stays arnative
+// in both — pi's `setEditorComponent()` would close the picker mid-preview). The picker
+// lives in arnative.ts, so the choice is shared through globalThis like the header preset.
+// Listed built-in-first: the `(Full)` suffix is rendered dim, so the plain row reads cleaner on top.
+export const FOOTER_PRESETS = ["Pi (system)", "Arnative (Full)"] as const;
 export type FooterPreset = (typeof FOOTER_PRESETS)[number];
 export const DEFAULT_FOOTER_PRESET: FooterPreset = "Arnative (Full)";
 const FOOTER_PRESET_KEY = Symbol.for("pi-arnative.footerPreset");
@@ -47,7 +48,7 @@ export function activeFooterPreset(): FooterPreset {
  * `disposeActiveSelector()`, which would close the `/arnative` picker mid-preview.
  */
 export function applyFooterPreset(ctx: ExtensionContext): void {
-	if (activeFooterPreset() === "Pi") {
+	if (activeFooterPreset() === "Pi (system)") {
 		ctx.ui?.setFooter?.(undefined);
 		return;
 	}
@@ -67,8 +68,8 @@ if (FooterComponent?.prototype?.render && !(globalThis as Record<symbol, boolean
 	(globalThis as Record<symbol, boolean>)[PATCHED_KEY] = true;
 	const origRender = FooterComponent.prototype.render;
 	FooterComponent.prototype.render = function (width: number): string[] {
-		// "Pi" preset = pi's own footer, so keep its stock line count.
-		if (activeFooterPreset() === "Pi") return origRender.call(this, width);
+		// "Pi (system)" preset = pi's own footer, so keep its stock line count.
+		if (activeFooterPreset() === "Pi (system)") return origRender.call(this, width);
 		const lines = origRender.call(this, width);
 		return lines.length > 2 ? lines.slice(0, 2) : lines;
 	};
@@ -893,9 +894,10 @@ if (isMain(import.meta.url)) {
 	assert(git !== null && git.branch.length > 0, "queued git refresh re-ran on the newest cwd (not dropped)");
 	rmSync(noGit, { recursive: true, force: true });
 
-	// Footer presets: Arnative (Full) is the default; Pi hands the footer slot back to pi (the editor stays arnative).
+	// Footer presets: Arnative (Full) is the default; Pi (system) hands the footer slot back to pi (the editor stays arnative).
 	assert(DEFAULT_FOOTER_PRESET === "Arnative (Full)" && FOOTER_PRESETS.length === 2, "Arnative (Full) is the default footer preset");
-	assert(markedLabels(FOOTER_PRESETS, "Pi").join(" | ") === "  Arnative (Full) | ● Pi", "footer preset labels mark the active one");
+	assert(FOOTER_PRESETS.join(" | ") === "Pi (system) | Arnative (Full)", "built-in preset is listed first");
+	assert(markedLabels(FOOTER_PRESETS, "Pi (system)").join(" | ") === "● Pi (system) |   Arnative (Full)", "footer preset labels mark the active one");
 	let footerCleared = 0;
 	let editorTouched = 0;
 	const presetCtx: any = {
@@ -904,8 +906,8 @@ if (isMain(import.meta.url)) {
 			setEditorComponent: () => { editorTouched++; },
 		},
 	};
-	setFooterPreset("Pi", presetCtx);
-	assert(footerCleared === 1 && editorTouched === 0 && activeFooterPreset() === "Pi", "Pi clears the footer only (an editor swap would close the picker)");
+	setFooterPreset("Pi (system)", presetCtx);
+	assert(footerCleared === 1 && editorTouched === 0 && activeFooterPreset() === "Pi (system)", "Pi (system) clears the footer only (an editor swap would close the picker)");
 	let registered = 0;
 	(globalThis as Record<symbol, (ctx: ExtensionContext) => void>)[FOOTER_REGISTRAR_KEY] = () => { registered++; };
 	setFooterPreset("Arnative (Full)", presetCtx);

package/extensions/section-headers.ts

@@ -298,9 +298,10 @@ export const tabStore: Map<TabKey, string[]> =
 (globalThis as Record<symbol, Map<TabKey, string[]>>)[STORE_KEY] = tabStore;
 
 // Header preset chosen through `/arnative headers`. "Arnative (Full)" = this extension's
-// header; "Pi" = pi's built-in header. The picker lives in arnative.ts, so the choice is
-// shared through globalThis like the other cross-module state.
-export const HEADER_PRESETS = ["Arnative (Full)", "Pi"] as const;
+// header; "Pi (system)" = pi's built-in header. The picker lives in arnative.ts, so the
+// choice is shared through globalThis like the other cross-module state.
+// Listed built-in-first: the `(Full)` suffix is rendered dim, so the plain row reads cleaner on top.
+export const HEADER_PRESETS = ["Pi (system)", "Arnative (Full)"] as const;
 export type HeaderPreset = (typeof HEADER_PRESETS)[number];
 export const DEFAULT_HEADER_PRESET: HeaderPreset = "Arnative (Full)";
 const HEADER_PRESET_KEY = Symbol.for("pi-arnative.headerPreset");
@@ -310,9 +311,9 @@ export function activeHeaderPreset(): HeaderPreset {
 	return HEADER_PRESETS.includes(stored as HeaderPreset) ? (stored as HeaderPreset) : DEFAULT_HEADER_PRESET;
 }
 
-/** Hand the header slot to the active preset: arnative's box, or pi's built-in ("Pi"). */
+/** Hand the header slot to the active preset: arnative's box, or pi's built-in ("Pi (system)"). */
 export function applyHeaderPreset(ctx: ExtensionContext): void {
-	if (activeHeaderPreset() === "Pi") {
+	if (activeHeaderPreset() === "Pi (system)") {
 		ctx.ui?.setHeader?.(undefined);
 	} else {
 		ctx.ui?.setHeader?.((tui, theme) => new ArnativeHeader(tui, theme, ctx));
@@ -642,8 +643,8 @@ if (UserMessageComponent?.prototype && !(globalThis as Record<symbol, boolean>)[
 	if (typeof containerProto?.addChild === "function") {
 		const origAddChild = containerProto.addChild;
 		containerProto.addChild = function (child: any): unknown {
-			// "Pi" preset = pi's own header, so leave pi's startup list untouched.
-			if (activeHeaderPreset() === "Pi") return origAddChild.call(this, child);
+			// "Pi (system)" preset = pi's own header, so leave pi's startup list untouched.
+			if (activeHeaderPreset() === "Pi (system)") return origAddChild.call(this, child);
 			try {
 				const body = sectionBodyOf(child);
 				const sectionName = body === null ? null : sectionNameOf(body);
@@ -730,13 +731,14 @@ if (isMain(import.meta.url)) {
 	assert(sectionNameOf("\x1b[33m[Skills]\x1b[39m\n  a, b") === "Skills", "header [Skills] detected");
 	assert(sectionNameOf("pi v0.87.1") === null, "non-section text is not detected");
 
-	// Header presets: Arnative (Full) is the default; Pi hands the header slot back to pi.
+	// Header presets: Arnative (Full) is the default; Pi (system) hands the header slot back to pi.
 	assert(DEFAULT_HEADER_PRESET === "Arnative (Full)" && HEADER_PRESETS.length === 2, "Arnative (Full) is the default header preset");
-	assert(markedLabels(HEADER_PRESETS, "Arnative (Full)").join(" | ") === "● Arnative (Full) |   Pi", "preset labels mark the active one");
+	assert(HEADER_PRESETS.join(" | ") === "Pi (system) | Arnative (Full)", "built-in preset is listed first");
+	assert(markedLabels(HEADER_PRESETS, "Arnative (Full)").join(" | ") === "  Pi (system) | ● Arnative (Full)", "preset labels mark the active one");
 	let installed: unknown = "untouched";
 	const presetCtx: any = { ui: { setHeader: (factory: unknown) => { installed = factory; } } };
-	setHeaderPreset("Pi", presetCtx);
-	assert(installed === undefined && activeHeaderPreset() === "Pi", "Pi clears the custom header");
+	setHeaderPreset("Pi (system)", presetCtx);
+	assert(installed === undefined && activeHeaderPreset() === "Pi (system)", "Pi (system) clears the custom header");
 	setHeaderPreset("Arnative (Full)", presetCtx);
 	assert(typeof installed === "function" && activeHeaderPreset() === "Arnative (Full)", "Arnative (Full) installs the header factory");
 

package/extensions/ui-render-tweaks.ts

@@ -503,12 +503,16 @@ if (isMain(import.meta.url)) {
 		assert(hex("scrollbarThumb") !== hex("scrollbarTrack"), `theme ${f}: scrollbarThumb still equals scrollbarTrack`);
 		assert(hex("searchMatchBg") !== hex("selectedBg"), `theme ${f}: searchMatchBg still equals selectedBg`);
 	}
-	const thEmpty = new Theme(
+	// Only `muted`, `text` and `selectedBg` exist. pi's Theme constructor maps whatever
+	// it gets — including the thinkingMax <- thinkingXhigh fallback — so these probe
+	// values must already be hex: the bundled parser (0.87.1) rejects OKLCH, which is
+	// exactly why the real theme self-check resolves through lib/color first.
+	const tokenGapTheme = new Theme(
 		{ muted: "#808080", text: "#d4d4d4", thinkingXhigh: "#20caee" },
 		{ selectedBg: "#3a3a4a" },
 		"truecolor",
 	);
-	assert(accentPill(pillOriginal, thEmpty) === pillOriginal, "pill: token absent -> passed through");
+	assert(accentPill(pillOriginal, tokenGapTheme) === pillOriginal, "pill: token absent -> passed through");
 	const hostPil: { scrollToEndIndicator?: () => string } = { scrollToEndIndicator: () => pillOriginal };
 	const inPill = withAccentPill(hostPil, () => hostPil.scrollToEndIndicator?.(), thPill);
 	assert(inPill.includes(`\x1b[48;2;${rgb(hex("accent"))}m`), "pill: instance callback injected with accent bg");

package/lib/color.ts

@@ -101,18 +101,26 @@ export function hexToOklch(hex: string): Oklch {
 }
 
 if (isMain(import.meta.url)) {
+	// Test vectors, not styling: the hex parser is under test, so these must stay hex.
+	const FIXTURE = {
+		white: "#ffffff",
+		black: "#000000",
+		short: "#0af",
+		shortExpanded: "#00aaff",
+		cyan: "#00d7ff",
+	};
 	const o = parseOklch("oklch(62% 0.1 200)");
 	assert(o !== null && Math.abs(o.L - 0.62) < 1e-9 && o.C === 0.1 && o.H === 200, "parseOklch reads percent L");
 	assert(parseOklch("oklch(0.62 0.1 200)")?.L === 0.62, "parseOklch reads fractional L");
-	assert(parseOklch("#fff") === null, "parseOklch rejects hex");
-	assert(toHex("#0AF") === "#00aaff", "toHex expands #rgb");
-	assert(toHex("oklch(100% 0 0)") === "#ffffff", "toHex converts oklch to hex");
-	assert(oklchToHex(1, 0, 0) === "#ffffff", "oklch L=1 is white");
-	assert(oklchToHex(0, 0, 0) === "#000000", "oklch L=0 is black");
-	assert(contrast("#ffffff", "#000000") === 21, "white on black = 21:1");
-	assert(Math.abs(contrast("#000000", "#ffffff") - 21) < 1e-9, "contrast is order-independent");
-	const back = hexToOklch("#00d7ff");
-	assert(Math.abs(back.H - 218) < 6, `hexToOklch hue of #00d7ff ~218 (got ${back.H.toFixed(1)})`);
+	assert(parseOklch(FIXTURE.short) === null, "parseOklch rejects hex");
+	assert(toHex(FIXTURE.short) === FIXTURE.shortExpanded, "toHex expands #rgb");
+	assert(toHex("oklch(100% 0 0)") === FIXTURE.white, "toHex converts oklch to hex");
+	assert(oklchToHex(1, 0, 0) === FIXTURE.white, "oklch L=1 is white");
+	assert(oklchToHex(0, 0, 0) === FIXTURE.black, "oklch L=0 is black");
+	assert(contrast(FIXTURE.white, FIXTURE.black) === 21, "white on black = 21:1");
+	assert(Math.abs(contrast(FIXTURE.black, FIXTURE.white) - 21) < 1e-9, "contrast is order-independent");
+	const back = hexToOklch(FIXTURE.cyan);
+	assert(Math.abs(back.H - 218) < 6, `hexToOklch hue of ${FIXTURE.cyan} ~218 (got ${back.H.toFixed(1)})`);
 	assert(oklchToRgb(0.7, 0.4, 145).chroma < 0.4, "out-of-gamut chroma is reduced");
 	console.log("lib/color.ts OK");
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bismawy/pi-arnative",
-  "version": "0.3.0",
-  "description": "Arnative look for Pi: warm-neutral themes, rounded tool boxes, tabbed header, compact footer, transcript clock, and a /usage dashboard.",
+  "version": "0.3.2",
+  "description": "Refined aesthetics. Cohesive tools. Built for Pi. Warm themes, rounded tool boxes, tabbed header, compact footer and a /usage dashboard.",
   "keywords": [
     "pi-package",
     "pi-theme",

package/themes/gen-themes.mjs

@@ -13,7 +13,7 @@
 import { readFile, writeFile } from "node:fs/promises";
 import { dirname, join } from "node:path";
 import { fileURLToPath } from "node:url";
-import { hexToOklch, oklchToRgb } from "../lib/color.ts";
+import { parseOklch, oklchToRgb } from "../lib/color.ts";
 import { assert } from "../lib/check.ts";
 
 const HERE = dirname(fileURLToPath(import.meta.url));
@@ -44,13 +44,14 @@ const ACCENT_OFFSET = { heading: 0, link: 0, label: 60 };
 // --- theme parameters ------------------------------------------------------
 
 /**
- * `accent` seeds only the hue; `chroma` is the normalized accent chroma.
+ * `accent` is the seed color (OKLCH, hue + reference lightness/chroma) — a short
+ * vector, not a styling value; `chroma` is the normalized accent chroma.
  * `hues` overrides the derived hue per role (keyword/func/… /heading/link/label)
  * to keep the strong palettes recognisable.
  */
 const THEMES = {
 	arnative: {
-		accent: "#00d7ff",
+		accent: "oklch(81.1% 0.1455 217.709375)",
 		chroma: 0.13,
 		canvasL: 0.27,
 		neutralHue: 232,
@@ -58,7 +59,7 @@ const THEMES = {
 		hues: { heading: 75, label: 282 },
 	},
 	"arnative-sun": {
-		accent: "#ffb454",
+		accent: "oklch(82.4% 0.1408 70.170730)",
 		chroma: 0.14,
 		canvasL: 0.27,
 		neutralHue: 70,
@@ -66,7 +67,7 @@ const THEMES = {
 		hues: { heading: 60, label: 330 },
 	},
 	"arnative-zinc": {
-		accent: "#a1a1aa",
+		accent: "oklch(71.2% 0.0129 286.066504)",
 		chroma: 0.02,
 		canvasL: 0.26,
 		neutralHue: 285,
@@ -74,7 +75,7 @@ const THEMES = {
 		hues: { heading: 285, label: 285 },
 	},
 	"arnative-violet": {
-		accent: "#a78bfa",
+		accent: "oklch(70.9% 0.1592 293.541199)",
 		chroma: 0.14,
 		canvasL: 0.27,
 		neutralHue: 295,
@@ -82,7 +83,7 @@ const THEMES = {
 		hues: { heading: 295, label: 330 },
 	},
 	"arnative-emerald": {
-		accent: "#6ee7b7",
+		accent: "oklch(84.5% 0.1299 164.978166)",
 		chroma: 0.12,
 		canvasL: 0.27,
 		neutralHue: 165,
@@ -90,7 +91,7 @@ const THEMES = {
 		hues: { heading: 165, label: 200 },
 	},
 	"arnative-matrix": {
-		accent: "#00ff41",
+		accent: "oklch(86.9% 0.2776 144.466116)",
 		chroma: 0.22,
 		canvasL: 0.15,
 		neutralHue: 145,
@@ -101,7 +102,7 @@ const THEMES = {
 		},
 	},
 	"arnative-cyberpunk": {
-		accent: "#ff2e97",
+		accent: "oklch(66.7% 0.2492 356.749230)",
 		chroma: 0.2,
 		canvasL: 0.16,
 		neutralHue: 275,
@@ -112,7 +113,7 @@ const THEMES = {
 		},
 	},
 	"arnative-synthwave": {
-		accent: "#ff7edb",
+		accent: "oklch(76.9% 0.1889 339.113944)",
 		chroma: 0.17,
 		canvasL: 0.22,
 		neutralHue: 300,
@@ -123,7 +124,7 @@ const THEMES = {
 		},
 	},
 	"arnative-gruvbox": {
-		accent: "#fabd2f",
+		accent: "oklch(83.3% 0.1595 82.986608)",
 		chroma: 0.14,
 		canvasL: 0.24,
 		neutralHue: 70,
@@ -134,7 +135,7 @@ const THEMES = {
 		},
 	},
 	"arnative-nord": {
-		accent: "#88c0d0",
+		accent: "oklch(77.5% 0.0622 217.469017)",
 		chroma: 0.07,
 		canvasL: 0.3,
 		neutralHue: 240,
@@ -145,7 +146,7 @@ const THEMES = {
 		},
 	},
 	"arnative-dracula": {
-		accent: "#bd93f9",
+		accent: "oklch(74.2% 0.1485 301.883095)",
 		chroma: 0.14,
 		canvasL: 0.29,
 		neutralHue: 285,
@@ -177,7 +178,9 @@ const ROLE_ORDER = [
 // --- derivation ------------------------------------------------------------
 
 function derive(spec) {
-	const h = hexToOklch(spec.accent).H;
+	const seed = parseOklch(spec.accent);
+	assert(seed !== null, `theme accent must be an oklch color: ${spec.accent}`);
+	const h = seed.H;
 	const c = spec.chroma;
 	const nh = spec.neutralHue;
 	const nc = spec.neutralChroma;
@@ -285,7 +288,9 @@ function derive(spec) {
 	// Distinct vars must stay visually distinct (roles may alias on purpose).
 	const seen = new Map();
 	for (const [name, value] of Object.entries(vars)) {
-		const { r, g, b } = oklchToRgb(...parseOklch(value));
+		const v = parseOklch(value);
+		assert(v !== null, `var ${name} is not an oklch color: ${value}`);
+		const { r, g, b } = oklchToRgb(v.L, v.C, v.H);
 		const rgb = `${r},${g},${b}`;
 		if (seen.has(rgb)) throw new Error(`vars ${seen.get(rgb)} and ${name} resolve to the same color`);
 		seen.set(rgb, name);
@@ -294,11 +299,6 @@ function derive(spec) {
 	return { vars, roles, exp };
 }
 
-function parseOklch(value) {
-	const m = /\(([\d.]+)% ([\d.]+) ([\d.]+)\)/.exec(value);
-	return [Number(m[1]) / 100, Number(m[2]), Number(m[3])];
-}
-
 // --- rendering -------------------------------------------------------------
 
 function render(name, { vars, roles, exp }) {