From 6f474d34a8b0c175d676cd54a06385a47cdcc1ad Mon Sep 17 00:00:00 2001 From: Rohit Singh Date: Sun, 18 Oct 2026 11:45:49 +0530 Subject: [PATCH 1/6] Install the house design system and alias the old color names onto it. Vendors @house/tokens and @house/react as tarballs and imports theme.css and styles.css ahead of globals.css. --panel, --line, --muted, --ok, --warn, and --bad now point at package roles, so every screen picks up the shared dark palette and indigo accent unchanged. The app was dark-only, so pins data-theme="dark". The serif stack stays as a --font-sans override. Co-authored-by: Cursor --- .gitignore | 1 + app/globals.css | 21 ++++++++++----------- app/layout.tsx | 4 +++- package-lock.json | 21 +++++++++++++++++++++ package.json | 2 ++ vendor/house-react-0.1.0.tgz | Bin 0 -> 4733 bytes vendor/house-tokens-0.1.1.tgz | Bin 0 -> 7073 bytes 7 files changed, 37 insertions(+), 12 deletions(-) create mode 100644 vendor/house-react-0.1.0.tgz create mode 100644 vendor/house-tokens-0.1.1.tgz diff --git a/.gitignore b/.gitignore index 0a1de36..cdf0a71 100644 --- a/.gitignore +++ b/.gitignore @@ -15,3 +15,4 @@ prisma/*.db-journal # Keep generated SFX (small, needed to mix) # data/voices.json is committed as the default character map .vercel +*.tsbuildinfo diff --git a/app/globals.css b/app/globals.css index 70ad70f..c17102b 100644 --- a/app/globals.css +++ b/app/globals.css @@ -1,22 +1,21 @@ @import "tailwindcss"; +/* Old names, aliased onto @house/tokens roles until each screen moves to the package names. */ :root { - --bg: #0f1115; - --panel: #171a21; - --line: #2a2f3a; - --text: #ece8df; - --muted: #9a9386; - --ok: #7dcea0; - --warn: #e6b566; - --bad: #e07a6b; - --accent: #d4a574; + --panel: var(--surface); + --line: var(--border); + --muted: var(--text-muted); + --ok: var(--success); + --warn: var(--warning); + --bad: var(--danger); + --font-sans: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif; } html, body { background: var(--bg); color: var(--text); - font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif; + font-family: var(--font-sans); } body { @@ -29,5 +28,5 @@ button { code, .mono { - font-family: ui-monospace, SFMono-Regular, Menlo, monospace; + font-family: var(--font-mono); } diff --git a/app/layout.tsx b/app/layout.tsx index b4c8bb0..4ee0ab2 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -1,6 +1,8 @@ import type { Metadata } from "next"; import { OnboardingShell } from "./onboarding/shell"; import { WebVitals } from "./web-vitals"; +import "@house/tokens/theme.css"; +import "@house/react/styles.css"; import "./globals.css"; export const metadata: Metadata = { @@ -10,7 +12,7 @@ export const metadata: Metadata = { export default function RootLayout({ children }: { children: React.ReactNode }) { return ( - + {children} diff --git a/package-lock.json b/package-lock.json index 7c8fa43..a24906c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,8 @@ "name": "audioforge", "version": "0.1.0", "dependencies": { + "@house/react": "file:vendor/house-react-0.1.0.tgz", + "@house/tokens": "file:vendor/house-tokens-0.1.1.tgz", "@prisma/client": "^6.16.1", "ffmpeg-static": "^5.2.0", "ffprobe-static": "^3.1.0", @@ -677,6 +679,25 @@ "node": "^18.18.0 || ^20.9.0 || >=21.1.0" } }, + "node_modules/@house/react": { + "version": "0.1.0", + "resolved": "file:vendor/house-react-0.1.0.tgz", + "integrity": "sha512-eB/iSysnZDv1RFdj5HkPC/KypGqYkBRi8sI9AmjaZnvGFI8y8Q03P3MPKuL+KLFJlFIgNj8wFHJTbnyYEQ1qPQ==", + "license": "MIT", + "peerDependencies": { + "@house/tokens": "*", + "react": ">=18" + } + }, + "node_modules/@house/tokens": { + "version": "0.1.1", + "resolved": "file:vendor/house-tokens-0.1.1.tgz", + "integrity": "sha512-O9wmpr2MFKxSL3hxyP/wseKpF3ROcbD65UhmFBpvf+T+s45wADTfqDZep0RN1v27ElK9cCy0livwdjwyuUdT9g==", + "license": "MIT", + "bin": { + "house-check-raw-color": "bin/check-raw-color.mjs" + } + }, "node_modules/@humanfs/core": { "version": "0.19.2", "resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.2.tgz", diff --git a/package.json b/package.json index f934e6b..4514660 100644 --- a/package.json +++ b/package.json @@ -24,6 +24,8 @@ "db:generate": "prisma generate" }, "dependencies": { + "@house/react": "file:vendor/house-react-0.1.0.tgz", + "@house/tokens": "file:vendor/house-tokens-0.1.1.tgz", "@prisma/client": "^6.16.1", "ffmpeg-static": "^5.2.0", "ffprobe-static": "^3.1.0", diff --git a/vendor/house-react-0.1.0.tgz b/vendor/house-react-0.1.0.tgz new file mode 100644 index 0000000000000000000000000000000000000000..261c3b89be2327fc22378fc0ed7e9709ce1b27c1 GIT binary patch literal 4733 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 LaFXbO08#(|sqRIN literal 0 HcmV?d00001 diff --git a/vendor/house-tokens-0.1.1.tgz b/vendor/house-tokens-0.1.1.tgz new file mode 100644 index 0000000000000000000000000000000000000000..df46879b12cd292a44baf756c124a3ba7bad6036 GIT binary patch literal 7073 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 Date: Sun, 18 Oct 2026 11:49:49 +0530 Subject: [PATCH 2/6] Restyle every screen on house primitives and package color names. Accent actions are Button variant=primary, small bordered actions are Button size=sm, the title is a Field, the parse panel, mix player, popup, menu, and coachmark are Surfaces, and errors use Text status=danger so they carry a glyph and an 'Error:' prefix. The old color aliases are gone, text-black and the raw rgba scrim are replaced by --accent-contrast and a color-mix scrim on --bg. Tailwind stays for layout. First-load JS grows about 1 kB, inside the budget. Co-authored-by: Cursor --- app/create-form.tsx | 76 +++++++++++++------------- app/demo-player.tsx | 2 +- app/globals.css | 9 +-- app/onboarding/badge.tsx | 2 +- app/onboarding/banner.tsx | 23 +++----- app/onboarding/coachmark.tsx | 28 ++++------ app/onboarding/menu.tsx | 24 ++++---- app/onboarding/popup.tsx | 25 ++++----- app/onboarding/shell.tsx | 2 +- app/page.tsx | 18 +++--- app/review/[episodeId]/review-desk.tsx | 68 ++++++++++++----------- 11 files changed, 131 insertions(+), 146 deletions(-) diff --git a/app/create-form.tsx b/app/create-form.tsx index 3a31622..fea35c1 100644 --- a/app/create-form.tsx +++ b/app/create-form.tsx @@ -1,7 +1,8 @@ "use client"; -import { useMemo, useState } from "react"; +import { useId, useMemo, useState } from "react"; import { useRouter } from "next/navigation"; +import { Button, Field, Stack, Surface, Text } from "@house/react"; import { USE_CASES, type UseCaseId } from "@/lib/use-cases"; import { parseCanonicalScript } from "@/server/pipeline/parse"; import { useOptionalOnboarding } from "./onboarding/provider"; @@ -23,6 +24,7 @@ export function CreateEpisodeForm() { const [script, setScript] = useState(selected.script); const [busy, setBusy] = useState(false); const [error, setError] = useState(null); + const scriptId = useId(); const parsed = useMemo(() => tryParse(script), [script]); @@ -58,7 +60,7 @@ export function CreateEpisodeForm() { return (
-

Use case

+

Use case

{USE_CASES.map((useCase) => { const on = useCase.id === active; @@ -69,13 +71,16 @@ export function CreateEpisodeForm() { onClick={() => pick(useCase.id)} className={`rounded-lg border px-3 py-3 text-left ${ on - ? "border-[var(--accent)] bg-[var(--panel)]" - : "border-[var(--line)] bg-transparent hover:border-[var(--accent)]" + ? "border-[var(--accent)] bg-[var(--accent-subtle)]" + : "border-[var(--border)] bg-transparent hover:border-[var(--accent)]" }`} + aria-pressed={on} >

{useCase.title}

-

{useCase.who}

-

{useCase.blurb}

+

{useCase.who}

+

+ {useCase.blurb} +

); })} @@ -83,65 +88,62 @@ export function CreateEpisodeForm() {
-
- -