{title}

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_864":865,"_866":867},"routes/_app.x.$handle.$name",{"_100":99,"_32":45,"_108":90,"_27":109,"_13":14,"_110":-5,"_11":111,"_112":113,"_114":115,"_116":117,"_118":119,"_20":-5,"_120":-5,"_121":-5,"_122":25,"_123":124,"_125":59,"_126":-5,"_127":-5,"_128":129},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_43":44,"_32":45,"_38":46,"_47":-5,"_48":25,"_49":50,"_51":50,"_52":53,"_54":-5,"_18":55,"_56":57,"_58":59,"_60":-5,"_61":-5,"_62":63,"_64":65,"_66":67,"_68":69,"_70":71,"_72":-5,"_73":74,"_75":74,"_76":77,"_78":77,"_79":77,"_80":74,"_81":74,"_82":83,"_84":85,"_86":87,"_88":25},"version",354,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":33,"_34":20,"_35":37,"_38":39,"_40":14,"_41":42,"_24":25},"previous",{"_30":31,"_32":33,"_34":20,"_35":36},"deleted",false,"deletedHere","path","docs/issues/valtown-native-ui/issues/04-scheme-aware-icon-pill-banner.md","latestPath","fileId","c751f1c2-8005-11f1-a4da-1607ee4eb77e","name","04-scheme-aware-icon-pill-banner.md","fileType","content","# 04 — Scheme-aware state icon, Status pill, and Banner\n\n**What to build:** bring the three scheme-blind colors under the token\nsystem, each becoming a scheme-aware token pair rendered through ticket 02's\nstylesheet mechanism:\n\n- The open/closed state icon's hardcoded green becomes the `state-open` token\n (`DESIGN.md` already defines both schemes: `#007a55` light at 5.36:1,\n `#00d492` dark at 10.83:1). This is the single most-scanned signal in the\n list and currently measures 1.74:1 on white — it disappears there today.\n- The Status pill's Tailwind named fill (`blue-600` for open) becomes a\n token pair, legible in both schemes.\n- The Banner's hardcoded dark-only tints (currently `#2a1a1e`/`#15261c` etc.)\n become token pairs, legible in both schemes.\n\nThis retires the palette module's old \"one-off tints stay inline\" rule, which\nwas sound under one scheme and breaks under two — the rule becomes: a color\nwith no scheme pair is a defect. This ticket only guarantees legibility in\nboth schemes; restructuring the Status pill into a low-chroma tinted pair is\ndeferred conformance work, out of scope here.\n\n**Blocked by:** 02\n\n**Status:** ready-for-agent\n\n- [ ] The state icon renders via a `state-open` token pair, legible against\n both white and black canvases\n- [ ] The Status pill renders via a token pair (not a Tailwind named color),\n legible in both schemes\n- [ ] The Banner renders via token pairs for both `ok` and `err` kinds,\n legible in both schemes — no more hardcoded dark-only tints\n- [ ] Every new token pair clears 4.5:1 in both schemes (Seam A assertion,\n extending ticket 01's contrast test to the new pairs)\n- [ ] State is conveyed by icon or text, not color alone\n- [ ] Existing suite continues to pass untouched\n","# 04 — Scheme-aware state icon, Status pill, and Banner\n\n**What to build:** bring the three scheme-blind colors under the token system,\neach becoming a scheme-aware token pair rendered through ticket 02's stylesheet\nmechanism:\n\n- The open/closed state icon's hardcoded green becomes the `state-open` token\n (`DESIGN.md` already defines both schemes: `#007a55` light at 5.36:1,\n `#00d492` dark at 10.83:1). This is the single most-scanned signal in the list\n and currently measures 1.74:1 on white — it disappears there today.\n- The Status pill's Tailwind named fill (`blue-600` for open) becomes a token\n pair, legible in both schemes.\n- The Banner's hardcoded dark-only tints (currently `#2a1a1e`/`#15261c` etc.)\n become token pairs, legible in both schemes.\n\nThis retires the palette module's old \"one-off tints stay inline\" rule, which\nwas sound under one scheme and breaks under two — the rule becomes: a color with\nno scheme pair is a defect. This ticket only guarantees legibility in both\nschemes; restructuring the Status pill into a low-chroma tinted pair is deferred\nconformance work, out of scope here.\n\n**Blocked by:** 02\n\n**Status:** ready-for-agent\n\n- [ ] The state icon renders via a `state-open` token pair, legible against both\n white and black canvases\n- [ ] The Status pill renders via a token pair (not a Tailwind named color),\n legible in both schemes\n- [ ] The Banner renders via token pairs for both `ok` and `err` kinds, legible\n in both schemes — no more hardcoded dark-only tints\n- [ ] Every new token pair clears 4.5:1 in both schemes (Seam A assertion,\n extending ticket 01's contrast test to the new pairs)\n- [ ] State is conveyed by icon or text, not color alone\n- [ ] Existing suite continues to pass untouched\n","createdAt",["D",1784091865127],"branchVersion","branchId","b6817ee5-03f4-41f2-901e-1bb2efa16e9e","id","abe99189-4851-4aab-ae08-280f66283cac","val-issue-tracker",["D",1783563523910],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Per-val issue tracker — import into any val for scoped issues","imageUrl","5d1042a9-7b0b-499d-8a72-3a8ac7a4e185","pinnedFileId","d1d90306-7b3c-11f1-b527-1607ee4eb77e","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","5f80108f-7ca4-4327-b77b-089dbe4b5a82","tursoName","abe9918948514aabae08280f66283cac","tursoHostname","abe9918948514aabae08280f66283cac-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789525245864],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_100":99,"_107":103},"org",{"_100":99,"_101":-5,"_102":103,"_18":55,"_104":105,"_106":25},"branch",{"_13":89,"_32":90,"_43":42,"_91":44,"_92":-5,"_93":-5,"_94":-5,"_95":-5,"_96":-5,"_97":45,"_98":99},"isOwned",369,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","nbbaier","handle","displayName","avatar","https://secure.gravatar.com/avatar/0129a541b7b3574e92c4afd06c5e32da&d=identicon","tier","pro","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_43":44,"_32":45,"_38":859,"_47":-5,"_48":25,"_49":50,"_51":50,"_52":53,"_54":-5,"_18":55,"_56":57,"_58":59,"_60":-5,"_61":-5,"_62":63,"_64":65,"_66":67,"_68":69,"_70":860,"_72":-5,"_73":74,"_75":74,"_76":77,"_78":77,"_79":77,"_80":74,"_81":74,"_82":861,"_84":862,"_86":863,"_88":25},"tree",[370,373,410,417,418,419,420,421,422,423,424,425,426,427,428,429,430,431,432,433,434,435,436,437,438,439,440],"files",[370,371,372,373,374,375,376,377,378,379,380,381,382,383,384,385,386,387,388,389,390,391,392,393,394,395,396,397,398,399,400,401,402,403,404,405,406,407,408,409,410,411,412,413,414,415,416,417,418,419,420,421,422,423,424,425,426,427,428,429,430,431,432,433,434,435,436,437,438,439,440],"counts",{"_360":63,"_361":174,"_362":63,"_363":364,"_365":366},"contents",[130,131,132,133,134,135,136,137,138,139,140,141,142,143,144,145,146,147,148,149,150,151,152,153,154,155,156],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_43":354,"_32":355,"_30":356,"_160":-5,"_41":42,"_40":357,"_162":59,"_38":358,"_13":63,"_34":346,"_35":-5,"_24":25,"_167":-5,"_27":359},{"_43":348,"_32":349,"_30":350,"_160":-5,"_41":42,"_40":351,"_162":59,"_38":352,"_13":63,"_34":346,"_35":-5,"_24":25,"_167":-5,"_27":353},{"_43":341,"_32":342,"_30":343,"_160":-5,"_41":42,"_40":344,"_162":59,"_38":345,"_13":63,"_34":346,"_35":-5,"_24":25,"_167":-5,"_27":347},{"_43":334,"_32":335,"_30":336,"_160":-5,"_41":42,"_40":337,"_162":59,"_38":338,"_13":63,"_34":20,"_35":339,"_24":25,"_167":-5,"_27":340},{"_43":328,"_32":329,"_30":330,"_160":-5,"_41":42,"_40":331,"_162":25,"_38":332,"_13":189,"_34":20,"_35":326,"_24":25,"_167":-5,"_27":333},{"_43":321,"_32":322,"_30":323,"_160":-5,"_41":42,"_40":324,"_162":25,"_38":325,"_13":189,"_34":20,"_35":326,"_24":25,"_167":-5,"_27":327},{"_43":313,"_32":314,"_30":315,"_160":-5,"_41":42,"_40":316,"_162":59,"_38":317,"_13":318,"_34":20,"_35":319,"_24":25,"_167":-5,"_27":320},{"_43":305,"_32":306,"_30":307,"_160":-5,"_41":42,"_40":308,"_162":59,"_38":309,"_13":310,"_34":20,"_35":311,"_24":25,"_167":-5,"_27":312},{"_43":298,"_32":299,"_30":300,"_160":-5,"_41":42,"_40":301,"_162":59,"_38":302,"_13":63,"_34":20,"_35":303,"_24":25,"_167":-5,"_27":304},{"_43":291,"_32":292,"_30":293,"_160":-5,"_41":42,"_40":294,"_162":59,"_38":295,"_13":274,"_34":20,"_35":296,"_24":25,"_167":-5,"_27":297},{"_43":284,"_32":285,"_30":286,"_160":-5,"_41":42,"_40":287,"_162":59,"_38":288,"_13":236,"_34":165,"_35":289,"_24":25,"_167":-5,"_27":290},{"_43":277,"_32":278,"_30":279,"_160":-5,"_41":42,"_40":280,"_162":59,"_38":281,"_13":236,"_34":165,"_35":282,"_24":25,"_167":-5,"_27":283},{"_43":269,"_32":270,"_30":271,"_160":-5,"_41":42,"_40":272,"_162":59,"_38":273,"_13":274,"_34":165,"_35":275,"_24":25,"_167":-5,"_27":276},{"_43":262,"_32":263,"_30":264,"_160":-5,"_41":42,"_40":265,"_162":59,"_38":266,"_13":197,"_34":165,"_35":267,"_24":25,"_167":-5,"_27":268},{"_43":254,"_32":255,"_30":256,"_160":-5,"_41":42,"_40":257,"_162":25,"_38":258,"_13":259,"_34":165,"_35":260,"_24":25,"_167":-5,"_27":261},{"_43":247,"_32":248,"_30":249,"_160":-5,"_41":42,"_40":250,"_162":59,"_38":251,"_13":63,"_34":165,"_35":252,"_24":25,"_167":-5,"_27":253},{"_43":239,"_32":240,"_30":241,"_160":-5,"_41":42,"_40":242,"_162":59,"_38":243,"_13":244,"_34":165,"_35":245,"_24":25,"_167":-5,"_27":246},{"_43":231,"_32":232,"_30":233,"_160":-5,"_41":42,"_40":234,"_162":59,"_38":235,"_13":236,"_34":165,"_35":237,"_24":25,"_167":-5,"_27":238},{"_43":223,"_32":224,"_30":225,"_160":-5,"_41":42,"_40":226,"_162":59,"_38":227,"_13":228,"_34":20,"_35":229,"_24":25,"_167":-5,"_27":230},{"_43":216,"_32":217,"_30":218,"_160":-5,"_41":42,"_40":219,"_162":59,"_38":220,"_13":63,"_34":165,"_35":221,"_24":25,"_167":-5,"_27":222},{"_43":208,"_32":209,"_30":210,"_160":-5,"_41":42,"_40":211,"_162":25,"_38":212,"_13":213,"_34":165,"_35":214,"_24":25,"_167":-5,"_27":215},{"_43":200,"_32":201,"_30":57,"_160":-5,"_41":42,"_40":202,"_162":59,"_38":203,"_13":204,"_34":205,"_35":206,"_24":25,"_167":-5,"_27":207},{"_43":192,"_32":193,"_30":194,"_160":-5,"_41":42,"_40":195,"_162":59,"_38":196,"_13":197,"_34":165,"_35":198,"_24":25,"_167":-5,"_27":199},{"_43":184,"_32":185,"_30":186,"_160":-5,"_41":42,"_40":187,"_162":59,"_38":188,"_13":189,"_34":165,"_35":190,"_24":25,"_167":-5,"_27":191},{"_43":177,"_32":178,"_30":179,"_160":-5,"_41":42,"_40":180,"_162":59,"_38":181,"_13":63,"_34":165,"_35":182,"_24":25,"_167":-5,"_27":183},{"_43":169,"_32":170,"_30":171,"_160":-5,"_41":42,"_40":172,"_162":25,"_38":173,"_13":174,"_34":165,"_35":175,"_24":25,"_167":-5,"_27":176},{"_43":157,"_32":158,"_30":159,"_160":-5,"_41":42,"_40":161,"_162":25,"_38":163,"_13":164,"_34":165,"_35":166,"_24":25,"_167":-5,"_27":168},"17b01c02-56f0-4c6f-b5f3-ab6f6a90c556","ui.tsx","fca19e20-7b48-11f1-8cf9-1607ee4eb77e","parentId",326,"latest",["D",1784086974618],35,"script","/** @jsxImportSource npm:hono@4.6.14/jsx */\nimport type { FC, PropsWithChildren } from \"npm:hono@4.6.14/jsx\";\nimport type { IssueStatus, Label, StateReason } from \"./db.ts\";\nimport { T } from \"./theme.ts\";\n\nexport const FIELD =\n `bg-[${T.surface}] border border-[${T.border}] rounded-md min-h-10 px-3.5 text-sm font-medium text-[${T.text}] focus:outline-none focus:border-[${T.link}]`;\nconst BUTTON =\n \"inline-flex items-center gap-1.5 rounded-md min-h-10 px-3.5 text-sm font-medium cursor-pointer no-underline\";\nconst VARIANTS = {\n solid:\n `bg-[${T.accent}] border border-[${T.accent}] text-[${T.accentInk}] hover:brightness-110`,\n ghost:\n `bg-transparent border border-[${T.accent}] text-[${T.text}] hover:brightness-110`,\n danger:\n `bg-transparent border border-[${T.danger}] text-[${T.danger}] hover:bg-[${T.danger}] hover:text-[${T.dangerInk}]`,\n} as const;\n\nexport const STATUS_LABELS: Record = {\n open: \"Open\",\n closed: \"Closed\",\n};\nexport const STATE_REASON_LABELS: Record, string> = {\n completed: \"Completed\",\n not_planned: \"Not planned\",\n duplicate: \"Duplicate\",\n reopened: \"Reopened\",\n};\n\nexport const Card: FC> = ({\n children,\n class: cls,\n}) => (\n \n {children}\n \n);\n\nexport const Button: FC<\n PropsWithChildren<{\n variant?: keyof typeof VARIANTS;\n href?: string;\n type?: \"button\" | \"submit\";\n class?: string;\n name?: string;\n value?: string;\n form?: string;\n }>\n> = ({\n variant = \"solid\",\n href,\n type = \"button\",\n class: cls,\n name,\n value,\n form,\n children,\n}) => {\n const classes = `${BUTTON} ${VARIANTS[variant]} ${cls ?? \"\"}`;\n return href\n ? (\n \n {children}\n \n )\n : (\n \n {children}\n \n );\n};\n\nexport const Select: FC<\n PropsWithChildren<{ name: string; id?: string; class?: string }>\n> = ({ name, id, class: cls, children }) => (\n \n);\n\nexport const Banner: FC<{ kind: \"ok\" | \"err\"; msg: string }> = ({\n kind,\n msg,\n}) => (\n \n {msg}\n \n);\n\nexport const StatusBadge: FC<{ status: IssueStatus; reason?: StateReason }> = ({\n status,\n reason,\n}) => (\n \n {STATUS_LABELS[status]}\n {reason ? ` · ${STATE_REASON_LABELS[reason]}` : \"\"}\n \n);\n\nexport const LabelTag: FC<{ label: Label }> = ({ label }) => (\n \n {label.name}\n \n);\n","label",[158],"cc0a8fbc-adc5-4cfe-82bf-e5bba13ddd0b","theme.ts","743531d4-7fba-11f1-b433-1607ee4eb77e",328,["D",1784086974722],1,"/**\n * Single source of truth for the recurring dark-palette hex values used\n * across layout.tsx, ui.tsx, and components.tsx. Presentation-only —\n * no local imports, so importing this file can never create a cycle.\n *\n * Only colors that genuinely recur 2+ times across those files live here.\n * One-off tints (banner ok/err colors, dynamic label colors, Tailwind\n * named colors like `blue-600`) stay inline where they're used.\n *\n * The `*Ink` tokens are the exception to the 2+ rule: ink is bound to the\n * fill it sits on, so it belongs next to that fill even at one use. Change\n * a fill here and its ink must be re-checked against the 4.5:1 floor.\n */\nexport const T = {\n /** Page background. */\n bg: \"#0f1115\",\n /** Header / card background. */\n panel: \"#181b22\",\n /** Inputs, table rows, nested surfaces. */\n surface: \"#1f232c\",\n /** Borders and dividers. */\n border: \"#2a2f3a\",\n /** Primary text. */\n text: \"#e6e9ef\",\n /** Secondary / muted text. */\n muted: \"#8b93a3\",\n /** Links and focus rings. */\n link: \"#6ea8fe\",\n /** Primary accent (solid buttons). */\n accent: \"#3d7bf0\",\n /** Text on an `accent` fill. Black, not white: white is 3.97:1. */\n accentInk: \"#000000\",\n /** Danger / destructive actions. */\n danger: \"#f06e7b\",\n /** Text on a `danger` fill. Black, not white: white is 2.91:1. */\n dangerInk: \"#000000\",\n} as const;\n",[170],"c3b6b759-a45b-43a6-b028-4ca444f74f46","test_twind.ts","a5f0602c-800a-11f1-83eb-1607ee4eb77e",348,["D",1784091864692],"import { stringify, twind, virtual } from \"https://esm.sh/@twind/core@1.1.3\";\nimport presetAutoprefix from \"https://esm.sh/@twind/preset-autoprefix@1.0.7\";\nimport presetTailwind from \"https://esm.sh/@twind/preset-tailwind@1.1.4\";\nimport { TWIND_CONFIG } from \"./theme.ts\";\n\n/**\n * Seam B: compiles harvested class names through the same Twind the\n * browser runs (via the CDN's own presets), so tests assert on the CSS\n * actually emitted rather than on a list of constants a test author\n * remembered to include. Reused across tickets 02/03/05.\n */\n\n/** Every distinct token from every `class=\"...\"` attribute in `html`. */\nexport function harvestClasses(html: string): string[] {\n const classes = new Set();\n for (const match of html.matchAll(/class=\"([^\"]*)\"/g)) {\n for (const token of match[1].split(/\\s+/)) {\n if (token) classes.add(token);\n }\n }\n return [...classes];\n}\n\n/** Compiles `classes` through Twind and returns the emitted stylesheet. */\nexport function compileTwind(classes: string[]): string {\n const sheet = virtual();\n const tw = twind(\n { presets: [presetAutoprefix(), presetTailwind()], ...TWIND_CONFIG },\n sheet,\n );\n for (const className of classes) tw(className);\n return stringify(sheet.target);\n}\n\n/** True if `css` (from `compileTwind`) contains a rule for `className`. */\nexport function emitsRule(css: string, className: string): boolean {\n const selector = `.${className.replace(/([^a-zA-Z0-9_-])/g, \"\\\\$1\")}`;\n let from = 0;\n for (let index = css.indexOf(selector, from); index !== -1;) {\n const nextChar = css[index + selector.length];\n if (nextChar === undefined || /[{:,.\\s]/.test(nextChar)) return true;\n from = index + 1;\n index = css.indexOf(selector, from);\n }\n return false;\n}\n",[178],"06a3a637-e081-4666-a2b1-479fa57ef458","test_sqlite.ts","2bb2ce86-7c0d-11f1-9a68-1607ee4eb77e",220,["D",1784052697980],3,"import { DatabaseSync } from \"node:sqlite\";\n\nexport interface TestResultSet {\n columns: string[];\n rows: Record[];\n rowsAffected: number;\n lastInsertRowid: bigint | undefined;\n}\n\nexport function createTestSqlite() {\n const database = new DatabaseSync(\":memory:\");\n database.exec(\"PRAGMA foreign_keys = ON\");\n\n const execute = (\n statement: string | { sql: string; args?: unknown[] },\n ): Promise => {\n try {\n const sql = typeof statement === \"string\" ? statement : statement.sql;\n const args = typeof statement === \"string\" ? [] : (statement.args ?? []);\n const prepared = database.prepare(sql);\n if (/^\\s*(SELECT|PRAGMA|WITH)\\b/i.test(sql)) {\n const rows = prepared.all(...(args as never[])) as Record<\n string,\n unknown\n >[];\n return Promise.resolve({\n columns: rows[0] ? Object.keys(rows[0]) : [],\n rows,\n rowsAffected: 0,\n lastInsertRowid: undefined,\n });\n }\n const result = prepared.run(...(args as never[]));\n return Promise.resolve({\n columns: [],\n rows: [],\n rowsAffected: Number(result.changes),\n lastInsertRowid: BigInt(result.lastInsertRowid),\n });\n } catch (error) {\n return Promise.reject(error);\n }\n };\n\n return {\n database,\n execute,\n /**\n * Mirror the libsql `transaction(\"write\")` contract on top of node:sqlite:\n * `BEGIN IMMEDIATE` opens an exclusive write transaction, statements run\n * sequentially on the single in-memory connection, and `commit`/`rollback`\n * close it. This is the same atomic-write contract `db.ts` drives in\n * production, so the store tests exercise the real transaction path.\n */\n transaction(_mode?: \"write\" | \"read\" | \"deferred\") {\n database.exec(\"BEGIN IMMEDIATE\");\n let settled = false;\n const finish = (verb: \"COMMIT\" | \"ROLLBACK\") => {\n if (settled) return Promise.resolve();\n settled = true;\n database.exec(verb);\n return Promise.resolve();\n };\n return Promise.resolve({\n execute,\n commit: () => finish(\"COMMIT\"),\n rollback: () => finish(\"ROLLBACK\"),\n });\n },\n };\n}\n",[185],"8d2480e3-0dfc-4ba9-ba40-4da9d6b62915","mod.ts","d1e3fc5c-7b3c-11f1-af1c-1607ee4eb77e",224,["D",1784052697990],13,"export { default, issueTracker, type IssueTrackerOptions } from \"./app.tsx\";\n",[193],"b7ee6e4d-e03e-49f9-b6a3-e9b3852a593e","main.ts",214,["D",1783790091112],11,"http","import { issueTracker } from \"./mod.ts\";\n\n/**\n * This val's own issue tracker — manages THIS val's scoped SQLite database.\n *\n * To add issues to a DIFFERENT val, import the tracker into that val:\n *\n * import { issueTracker } from \"https://esm.town/v/nbbaier/val-issue-tracker/mod.ts\";\n * export default issueTracker({ owner: [\"nbbaier\"] });\n *\n * Because scoped SQLite is bound to the running val, the imported tracker\n * reads/writes the host val's database automatically — no per-val config needed.\n */\nexport default issueTracker({});\n",[201],"a8da133e-f3ec-4798-9ac8-7e818889dd8b","layout.tsx","fd6015ee-7b48-11f1-bafe-1607ee4eb77e",265,["D",1784058461137],7,"/** @jsxImportSource npm:hono@4.6.14/jsx */\nimport type { FC, PropsWithChildren } from \"npm:hono@4.6.14/jsx\";\nimport { T } from \"./theme.ts\";\n\nconst TAB =\n `inline-flex items-center px-3 py-1.5 border-b-2 border-transparent text-sm no-underline`;\nconst TAB_ACTIVE = `text-[${T.text}] font-semibold border-[${T.accent}]`;\nconst TAB_IDLE = `text-[${T.muted}] hover:text-[${T.text}]`;\n\n/** Small avatar + handle chip for the top bar's right edge. */\nconst UserChip: FC<{ user: string }> = ({ user }) => (\n \n \n {user.charAt(0) || \"?\"}\n \n @{user || \"?\"}\n \n);\n\nexport const Layout: FC<\n PropsWithChildren<{\n title: string;\n user?: string | null;\n auth?: boolean;\n /** Login location supplied by the owning auth surface, when available. */\n login?: string | null;\n /** Mount prefix for internal links; \"\" standalone. /auth/* stays\n * origin-level in both modes, so those links never take it. */\n base?: string;\n /** Which top-bar tab is the current surface. */\n active?: \"issues\" | \"labels\";\n }>\n> = ({\n title,\n user,\n auth = true,\n login,\n base = \"\",\n active,\n children,\n}) => {\n const signedIn = user !== null && user !== undefined;\n const loginHref = login === undefined ? (auth ? \"/auth/login\" : null) : login;\n const chip = signedIn ? : null;\n const logoutForm = (\n

\n \n Log out\n \n \n );\n const loginLink = loginHref\n ? (\n \n Log in\n \n )\n : null;\n\n return (\n \n \n \n \n {title}\n \n \n\n",[],[342,547],"0624324c-15a1-4656-b4f5-0e2e312f15c2","flow.svg","b35d6c26-7fb7-11f1-851e-1607ee4eb77e",241,["D",1784056238995],"\n",[],[342,555],["D",1784056238376],[411,412,413,414,415,416],[342],"a7d6b8dd-1925-4e52-8b1a-7519e5abc73e","issue-tracker-valtown.md","4e874dca-7be4-11f1-973a-1607ee4eb77e",199,["D",1783711960586],"# Issue tracker: val-issue-tracker (JSON API)\n\nUse the tracker's JSON API for agent and script operations; do not scrape HTML.\n\n**Tracker URL**: `` (for example `https://username-myval.web.val.run`)\n\n**Auth**: reads are public. Writes require\n`Authorization: Bearer `. Each write may include `actor`,\na Val Town handle; omitted actors default to `agent`. Actor provenance is stored\nonly in the append-only events log.\n\n## Response shapes\n\nEvery response is JSON. Successful responses are either a single object, an\narray, or a small acknowledgement object (`{\"deleted\": id}` /\n`{\"updated\": id}`); error responses always have the shape:\n\n```json\n{ \"error\": \"human-readable message\" }\n```\n\n### Label\n\n```ts\n{\n id: number;\n name: string;\n color: string; // six lowercase hex characters, no leading \"#\"\n created_at: number; // ms since epoch\n updated_at: number;\n}\n```\n\n### IssueReference\n\nThe compact shape used inside `blockers` and `blocks`.\n\n```ts\n{\n id: number;\n title: string;\n status: \"open\" | \"closed\";\n state_reason: \"completed\" | \"not_planned\" | \"duplicate\" | \"reopened\" | null;\n}\n```\n\n### Issue\n\n```ts\n{\n id: number;\n title: string;\n body: string; // markdown, verbatim (not trimmed)\n status: \"open\" | \"closed\";\n state_reason: \"completed\" | \"not_planned\" | \"duplicate\" | \"reopened\" | null;\n created_at: number;\n updated_at: number; // last activity: own edits, comments, or association changes\n creator: string | null; // Val Town handle, derived from the issue's creation event\n labels: Label[];\n assignees: string[]; // Val Town handles, no \"@\" prefix\n blockers: IssueReference[];\n blocks: IssueReference[];\n blocked: boolean; // true iff at least one blocker is still \"open\"\n}\n```\n\n`GET /api/issues/:id` returns an `Issue` plus a `comments` field\n(`comments: Comment[]`); no other endpoint includes `comments`.\n\n### Comment\n\n```ts\n{\n id: number;\n issue_id: number;\n body: string; // markdown, verbatim\n created_at: number;\n updated_at: number;\n author: string | null; // Val Town handle, derived from the comment's creation event\n}\n```\n\n### Event\n\n```ts\n{\n id: number;\n event_type:\n | \"issue.created\" | \"issue.updated\" | \"issue.deleted\"\n | \"comment.created\" | \"comment.updated\" | \"comment.deleted\"\n | \"label.created\" | \"label.updated\" | \"label.deleted\";\n entity_id: number; // the issue/comment/label id the event is about\n actor: string;\n data: unknown; // grammar below\n event_timestamp: number;\n}\n```\n\n`GET /api/issues/:id/events` returns `Event[]` in append order.\n\n## Event data grammar\n\nEvents are the source of truth for provenance and history; live tables hold only\ncurrent state.\n\n- **Boundary events (`*.created`, `*.deleted`) snapshot full state.** The `data`\n field is the entity's complete state at that moment — a hard-deleted row\n leaves a full tombstone:\n - `issue.created` / `issue.deleted` data:\n `{id, title, body, status, state_reason, created_at, updated_at}`\n - `comment.created` / `comment.deleted` data:\n `{id, issue_id, body, created_at, updated_at}` (no `author` — that is always\n derived from the surrounding event, never stored in the payload)\n - `label.created` / `label.deleted` data:\n `{id, name, color, created_at, updated_at}`\n- **`*.updated` events carry a single field delta:**\n `{update_target, from, to}`.\n - For `issue.updated`, `update_target` is one of `title`, `body`, `status`,\n `state_reason`, `label`, `assignee`, `blocks`, `blocked_by`. Associations\n (`label`, `assignee`, `blocks`, `blocked_by`) use **`null ↔ value`**\n (`from: null` = added, `to: null` = removed). A block edge writes exactly\n one event, on the acting issue (the one named in the endpoint path).\n - For `comment.updated`, `update_target` is `\"body\"`.\n - For `label.updated`, `update_target` is `\"name\"` or `\"color\"`.\n - One event per changed field: closing an issue with a new reason emits two\n `issue.updated` events (`status` and `state_reason`), sharing one actor and\n timestamp.\n\n## Status codes\n\n| Status | Meaning |\n| ------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `200` | Read succeeded, or a mutation applied and the endpoint returns the resulting state. |\n| `201` | An issue, comment, or label was created. |\n| `400` | The request is malformed: invalid `:id`, invalid `status` filter, invalid close `reason`, invalid label `color`, a missing required scalar field (`title`; `name`/`color`; comment `body`), or a collection field (`label_ids`, `add`, `remove`, `assignees`) that isn't shaped as required — see below. |\n| `401` | A write was attempted with a missing or incorrect bearer token. |\n| `403` | A write was attempted but `ISSUE_TRACKER_API_KEY` isn't configured, so writes are disabled entirely. |\n| `404` | The issue, comment, or label named by `:id` — or referenced by an ID inside `label_ids`/`add`/`remove` — does not exist. |\n| `409` | The write conflicts with an existing invariant: a blocking edge would create a cycle (including a self-edge), or a label `name` collides with an existing label. |\n\n## Strict collection validation\n\n`label_ids`, and the `add`/`remove` fields on the labels and blocks/blocked-by\nendpoints, are validated as a whole, not filtered element by element:\n\n- **Absent** — treated as an empty operation (no IDs added or removed).\n- **Present** — must be an array where every element is a positive integer\n (`Number.isInteger(x) && x > 0`). Any other shape (not an array, a\n non-integer, zero, a negative number, a string, etc.) rejects the entire\n request with `400`; nothing is applied.\n- Each ID that passes shape validation must still reference an existing label or\n issue, or the request fails with `404`.\n\n`assignees`, and the `add`/`remove` fields on the assignees endpoint, follow the\nsame absent-is-empty / present-is-all-or-nothing rule, but for handles:\n\n- **Present** — must be an array of non-empty strings after trimming and\n stripping a leading `@`. Any other shape rejects the request with `400`.\n- Handles are not entities (no lookup table), so there is no `404` for an\n unrecognized assignee — any well-shaped handle is accepted.\n\n## Endpoints\n\n| Method and path | Body / query | Success |\n| --------------------------------- | -------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ |\n| `GET /api/issues` | `?status=open\\|closed&label=&assignee=&search=` | `200` `Issue[]`. `400` if `status` is present and not `open`/`closed`. |\n| `POST /api/issues` | `{title, body?, label_ids?: number[], assignees?: string[], actor?}` | `201` `Issue`. `400` missing `title` or malformed `label_ids`/`assignees`. `404` if a `label_ids` entry doesn't exist. |\n| `GET /api/issues/:id` | — | `200` `Issue & {comments: Comment[]}`. `400` invalid id. `404` missing issue. |\n| `PATCH /api/issues/:id` | `{title?, body?, actor?}` | `200` updated `Issue`. `400` invalid id. `404` missing issue. |\n| `DELETE /api/issues/:id` | `{actor?}` | `200` `{deleted: id}`. `400` invalid id. `404` missing issue. |\n| `POST /api/issues/:id/close` | `{reason?: \"completed\" \\| \"not_planned\" \\| \"duplicate\", comment?, actor?}` | `200` updated `Issue`; reason defaults to `completed`. `400` invalid id/reason. `404` missing issue. |\n| `POST /api/issues/:id/reopen` | `{actor?}` | `200` updated `Issue` with `state_reason: \"reopened\"`. `400` invalid id. `404` missing issue. |\n| `POST /api/issues/:id/labels` | `{add?: number[], remove?: number[], actor?}` | `200` updated `Issue`. `400` invalid id or malformed `add`/`remove`. `404` missing issue or a missing label id. |\n| `POST /api/issues/:id/assignees` | `{add?: string[], remove?: string[], actor?}` | `200` updated `Issue`. `400` invalid id or malformed `add`/`remove`. `404` missing issue. |\n| `POST /api/issues/:id/blocks` | `{add?: number[], remove?: number[], actor?}` | `200` updated `Issue`. `400` invalid id or malformed `add`/`remove`. `404` missing issue or referenced issue id. `409` cycle or self-edge. |\n| `POST /api/issues/:id/blocked-by` | `{add?: number[], remove?: number[], actor?}` | Same as `/blocks`, opposite edge direction. |\n| `POST /api/issues/:id/comments` | `{body, actor?}` | `201` `Comment`. `400` invalid id or missing `body`. `404` missing issue. |\n| `PATCH /api/comments/:id` | `{body, actor?}` | `200` `{updated: id}`. `400` invalid id or missing `body`. `404` missing comment. |\n| `DELETE /api/comments/:id` | `{actor?}` | `200` `{deleted: id}`. `400` invalid id. `404` missing comment. |\n| `GET /api/issues/:id/events` | — | `200` `Event[]` in append order. `400` invalid id. `404` missing issue. |\n| `GET /api/labels` | — | `200` `Label[]`. |\n| `POST /api/labels` | `{name, color, actor?}` | `201` `Label` (`color` is hex, with or without `#`). `400` missing `name`/`color` or invalid `color`. `409` `name` already in use. |\n| `PATCH /api/labels/:id` | `{name?, color?, actor?}` | `200` updated `Label`. `400` invalid id or `color`. `404` missing label. `409` renaming to an in-use `name`. |\n| `DELETE /api/labels/:id` | `{actor?}` | `200` `{deleted: id}`. `400` invalid id. `404` missing label. |\n\nAll write routes additionally return `401` for a missing/incorrect bearer token,\nand `403` if `ISSUE_TRACKER_API_KEY` is unset — checked before any body or id\nvalidation.\n\n## Triage labels\n\nLabels are curated entities, not free-text arrays. Before applying workflow\nlabels such as `needs-triage`, create each one once with `POST /api/labels`,\nretain its ID, then send that ID to the issue-label endpoint. The product's\nfresh-install defaults are `bug`, `enhancement`, `documentation`, `question`,\nand `duplicate`.\n\n## curl examples\n\n```bash\nTRACKER=https://your-handle-your-val.web.val.run\nKEY=...\n\n# Discover label IDs\ncurl -s \"$TRACKER/api/labels\"\n\n# Create with curated labels and multiple assignees\ncurl -s -X POST \"$TRACKER/api/issues\" \\\n -H \"Authorization: Bearer $KEY\" -H \"Content-Type: application/json\" \\\n -d '{\"title\":\"Fix flaky test\",\"body\":\"Observed in CI\",\"label_ids\":[1],\"assignees\":[\"alice\"],\"actor\":\"alice\"}'\n\n# Close as deliberately not planned\ncurl -s -X POST \"$TRACKER/api/issues/12/close\" \\\n -H \"Authorization: Bearer $KEY\" -H \"Content-Type: application/json\" \\\n -d '{\"reason\":\"not_planned\",\"comment\":\"Superseded by #15.\",\"actor\":\"alice\"}'\n\n# Reopen\ncurl -s -X POST \"$TRACKER/api/issues/12/reopen\" \\\n -H \"Authorization: Bearer $KEY\" -H \"Content-Type: application/json\" \\\n -d '{\"actor\":\"alice\"}'\n\n# Declare that #12 blocks #15\ncurl -s -X POST \"$TRACKER/api/issues/12/blocks\" \\\n -H \"Authorization: Bearer $KEY\" -H \"Content-Type: application/json\" \\\n -d '{\"add\":[15],\"actor\":\"alice\"}'\n```\n",[],[349,566],"bab12ed8-89bb-4383-b479-55282f37780e","backlog.md","eea1bf8a-7bf2-11f1-975e-1607ee4eb77e",349,["D",1784091864833],"# Backlog — deferred wants\n\nThings wanted eventually, not now. Not commitments; parking lot.\n\n- **Clickable user handles.** Wherever a user handle is displayed (creator,\n comment author, assignee), render it as a link to that user's Val Town\n profile. Purely a rendering concern — the data model just stores the handle.\n (See [[User]] in CONTEXT.md.)\n- **Markdown rendering.** Issue bodies and comment bodies are stored as\n markdown; rendering them to HTML is a later concern.\n- **`DESIGN.md` component conformance.** The follow-on to\n `docs/issues/valtown-native-ui/spec.md`, which specced the foundation\n (palette, fonts, dual-scheme — landed) and defers the component-level Named\n Rules to here: The Machine Facts Rule (mono for issue numbers, handles,\n timestamps), The Hairline Rule and The No-Card Rule (one panel of hairline\n rows), The One Bold Rule and issue-row anatomy, The Badge Containment Rule,\n the status pill as a tinted pair, a visible focus ring on every interactive\n element, and hover along the `sky` ramp. Each needs visual judgment rather\n than measurement, which is why it wasn't in the foundation spec. Unblocked now\n that the foundation spec has landed — the tokens are in place.\n",[],[349,574],"3a3e928d-1e27-45cf-832b-40731eacf89d","spec.md","911c9a22-8004-11f1-821c-1607ee4eb77e","9102e5be-8004-11f1-8a46-1607ee4eb77e",331,["D",1784089252790],"# PRD: Val Town-native UI foundation\n\nStatus: ready-for-agent\n\n`DESIGN.md` is the normative target for this work; its YAML frontmatter carries\nthe tokens. `PRODUCT.md` carries the strategy. This spec covers the\n**foundation** of that migration — the layer whose correctness is decidable by\nmeasurement. Purely aesthetic conformance to the component-level Named Rules is\nexplicitly deferred (see Out of Scope).\n\nThis supersedes the \"Migrate the UI to `DESIGN.md`\" entry in `docs/backlog.md`.\nThat entry estimated the work as \"mostly `theme.ts` and `layout.tsx`\". That\nestimate is wrong, and the reason is the core of this spec: flipping the canvas\nbreaks colors that no token controls.\n\n## Problem Statement\n\nThe tracker wears a generic dark-SaaS costume — blue-charcoal surfaces\n(`#0f1115`), a bare system font stack, and a saturated blue accent. `PRODUCT.md`\nnames this exact combination as an anti-reference and as \"the specific thing\nthat makes this UI 'not look good'\". It is also a dark-only surface, so a\ntracker mounted in a light Val Town host renders as a dark island in a light\npage — which contradicts the \"it embeds politely\" principle directly. A guest\nthat ignores its host's color scheme is a rude guest.\n\nUnderneath the cosmetic problem sit measurable defects the maintainer cannot see\nbut does feel:\n\n- Four of the five seeded Labels are **illegible on a light canvas**. The Label\n chip paints the stored color as text on a transparent fill, which works\n against black and fails against white. `enhancement` (`a2eeef`) measures\n 1.31:1 on white; `duplicate` (`cfd3d7`) 1.51:1; `question` (`d876e3`) 2.76:1.\n Separately, `documentation` (`0075ca`) already fails **today** at 4.40:1 on\n the current dark canvas.\n- The open/closed **state icon** — the single most-scanned signal in the list —\n is hardcoded to a color that measures 1.74:1 on white. It disappears.\n- The Banner hardcodes dark-only tints, so on a light canvas it renders as a\n near-black island.\n- Every button and input has **no height mechanism at all**. The code says\n `min-h-10`, intending 40px, but the project's Twind build predates Tailwind's\n numeric `min-h-*` scale and emits no rule for it. Controls are sized by\n line-height alone (~20–24px), far under the 44px touch-target floor. The 40px\n everyone believes is there has never existed.\n\nThe last four are not migration risks. They are live defects, and three of them\nare invisible until the canvas flips.\n\n## Solution\n\nMigrate the tracker's visual foundation to the Val Town-native system already\ndocumented in `DESIGN.md`: an achromatic canvas (true white / true black),\nstructure carried by slate hairlines, the stock `sky` ramp as the only accent,\nIBM Plex Sans for interface text with iA Writer Mono for machine facts, and\n**dual-scheme rendering driven by `prefers-color-scheme`** so the tracker\nfollows whatever its host val is showing.\n\nThe migration is made cheap by one discovery: because every palette token feeds\na color slot and none appear in a `style` attribute, the palette module's\n**values** can change from hex literals to typed CSS variable references while\nevery one of its ~107 call sites stays byte-identical. The scheme switch then\nlives in one generated stylesheet block rather than in a `dark:` variant at\nevery call site.\n\nColors that no token controls — the Banner tints, the state icon, the status\npill, and user-authored Label colors — are brought under the token system or\nmade scheme-aware at render time. Label color is handled without touching stored\ndata: the stored hex remains the source of truth, and legibility is achieved by\nadapting lightness per scheme at render.\n\nEverything stays server-rendered and works with zero client-side JavaScript.\n\n## User Stories\n\n1. As a maintainer triaging in a light Val Town host, I want the tracker to\n render light, so that it does not sit in my page as a dark island.\n2. As a maintainer triaging in a dark Val Town host, I want the tracker to\n render dark, so that it continues to match its surroundings as it does today.\n3. As a maintainer whose host follows the OS scheme, I want the tracker to\n follow it too, so that I never configure the tracker's appearance separately.\n4. As a Val Town developer mounting the tracker, I want it to look like it\n belongs to the platform, so that it reads as native chrome rather than a\n third-party widget competing with my val.\n5. As a Val Town developer, I want the tracker to inherit the platform's own\n typographic identity, so that it does not announce itself as foreign.\n6. As a maintainer scanning the list, I want the interface set in IBM Plex Sans\n rather than a system stack, so that the UI reads as precise rather than\n generic.\n7. As a maintainer, I want the fonts to load without a flash of unstyled or\n invisible text, so that scanning is not interrupted on every navigation.\n8. As a maintainer on a slow or offline connection, I want the interface to stay\n fully legible if the webfonts never arrive, so that the tracker degrades to a\n sane fallback rather than breaking.\n9. As a maintainer scanning the list, I want the open/closed state icon to be\n clearly visible in both schemes, so that I can tell an Issue's Status at a\n glance — the thing the list exists for.\n10. As a maintainer scanning the list, I want every Label chip legible in both\n schemes, so that I can spot triage signal without opening an Issue.\n11. As a user who authored a Label color, I want my color to remain recognizably\n my color in both schemes, so that the chip still reads as the one I chose.\n12. As a user who authored a Label color, I want my stored color left untouched,\n so that switching schemes never silently rewrites my data.\n13. As a maintainer, I want the `documentation` Label to be legible on the dark\n canvas, so that a defect that exists today is fixed rather than carried\n forward.\n14. As a maintainer, I want a Label whose color is near-white to stay visible on\n a white canvas, so that no Label can be rendered invisible by its own color.\n15. As a maintainer, I want a Label whose color is near-black to stay visible on\n a black canvas, so that the same guarantee holds symmetrically.\n16. As a maintainer receiving a success or error Banner, I want it legible and\n correctly tinted in both schemes, so that feedback never renders as a dark\n block on a light page.\n17. As a maintainer, I want the Status pill legible in both schemes, so that\n lifecycle state never rides on an off-brand saturated fill.\n18. As a maintainer, I want state to be conveyed by icon or text as well as\n color, so that Status never rides on color alone.\n19. As a maintainer clicking a primary action, I want its label readable against\n its fill, so that the button is not the least legible element on the page.\n20. As a maintainer hovering a destructive action, I want its label readable\n against the hover fill, so that the most dangerous control is not the least\n legible.\n21. As a maintainer on a touch device, I want buttons and inputs large enough to\n tap reliably, so that I am not fighting 20px targets.\n22. As a maintainer, I want controls to have a real, working height mechanism,\n so that the intended control height is what actually renders.\n23. As a keyboard user, I want a visible focus ring on every interactive element\n in both schemes, so that the zero-JS form-driven flow stays navigable.\n24. As a keyboard user, I want the focus ring to be visible against both the\n white and black canvas, so that focus is never lost against its background.\n25. As a maintainer reading body and meta text, I want it comfortably readable\n in both schemes, so that scanning density does not cost legibility.\n26. As a developer changing a palette value, I want to change it in exactly one\n place, so that the palette stays a single source of truth.\n27. As a developer changing a fill color, I want the obligation to re-check its\n ink contrast to be visible at the point of change, so that I cannot\n introduce an unreadable pairing without noticing.\n28. As a developer, I want a test to fail if a color utility silently compiles\n to the wrong CSS property, so that the class of bug that made `min-h-10`\n dead cannot recur silently.\n29. As a developer, I want a test to fail if any palette pair drops below its\n contrast floor, so that contrast is enforced rather than audited.\n30. As a developer, I want a test to fail if a scheme leaves any variable\n undefined, so that one scheme cannot silently render with missing colors.\n31. As a developer, I want the migration to leave every call site untouched, so\n that the diff is reviewable and the risk is concentrated in one module.\n32. As an agent working the tracker through the JSON API, I want no API or\n schema change, so that this migration is invisible to me.\n33. As a maintainer, I want the existing routes, role model, storage, and API\n untouched, so that a visual migration cannot break behavior.\n34. As a maintainer, I want the tracker to remain fully functional with zero\n client-side JavaScript, so that the PRD-level zero-JS contract survives.\n\n## Implementation Decisions\n\n### The palette module becomes typed CSS variable references\n\nThe palette module keeps its current key names and gains a second export. Its\n`T` values change from hex literals to **typed** CSS variable references; a new\nexport carries the per-scheme hex tables that the layout shell renders into a\nstylesheet block and that the contrast test asserts over.\n\nBecause every call site interpolates `T.x` inside a Twind arbitrary-value\nbracket (`text-[${T.text}]`), and no token appears in a `style` attribute, all\ncall sites remain byte-identical. Verified against the real class strings: the\nsix prefixes tokens feed are `bg`, `border`, `focus:border`, `hover:bg`,\n`hover:text`, and `text` — all color slots.\n\n### The `color:` type hint is mandatory and non-obvious\n\nThis came out of a prototype and encodes the decision more precisely than prose\ncan. Twind infers the CSS property from the _shape_ of an arbitrary value. A\nbare `var()` is untyped, so it guesses wrong — **silently**, with no error:\n\n```\ntext-[var(--ink)] -> font-size: var(--ink) WRONG\nbg-[var(--canvas)] -> background-image: var(--canvas) WRONG\nborder-[var(--rule)] -> border-width: var(--rule) WRONG\n\ntext-[color:var(--ink)] -> color: var(--ink) correct\nbg-[color:var(--canvas)] -> background-color: var(--canvas) correct\nborder-[color:var(--rule)] -> border-color: var(--rule) correct\n```\n\nSo token values must embed the hint (`text: \"color:var(--ink)\"`), not just the\n`var()`. Confirmed to hold through `hover:` and `focus:` variants and the ring\ncolor. Anyone attempting this without the hint will conclude CSS variables are\nincompatible with Twind and fall back to doubling every call site with `dark:`\nvariants — which is the expensive, wrong path.\n\n### Dual-scheme lives in one generated stylesheet block\n\nThe layout shell renders a `

Diff · v354