@autono/open-pages 0.5.0 → 0.6.0

package/dist/{build-L50pau9v.js → build-6hM9Ga2d.js}

@@ -1,7 +1,7 @@
 import "./design-C13iz9_4.js";
 import { findPages, loadUserConfig } from "./open-pages-plugin-C0poXLsx.js";
-import { createViteConfig } from "./config-CDUdFE8N.js";
-import "./update-package-Cxt57pz7.js";
+import { createViteConfig } from "./config-CBbwLHOo.js";
+import "./update-package-D9zws9nc.js";
 import { readCoreVersion } from "./version-B6AiiGvT.js";
 import { buildPage } from "./export-DbVwSmKW.js";
 import path from "node:path";

package/dist/cli/bin.js

@@ -47,6 +47,10 @@ async function runSkillsDriftCheck(skillsDir) {
 		rl.close();
 	}
 }
+function resolveWorkspaceSetDir() {
+	const here = path.dirname(fileURLToPath(import.meta.url));
+	return path.resolve(here, "..", "..", "workspace");
+}
 function resolveBuiltinSkillsDir() {
 	const here = path.dirname(fileURLToPath(import.meta.url));
 	return path.resolve(here, "..", "..", "skills");
@@ -57,15 +61,15 @@ async function run(argv) {
 	program.name("open-pages").description("Author web pages — we handle the Vite/React stack.").version(version, "-v, --version", "print version").helpOption("-h, --help", "show help").showHelpAfterError(chalk.dim("(run `open-pages --help` for usage)"));
 	program.command("dev").description("Start the dev server").addOption(new Option("-p, --port <port>", "port to listen on").argParser(parsePort)).addOption(new Option("--host [host]", "expose on the network (optional host)")).option("--open", "open the browser on start").option("--no-skills-check", "skip the built-in skills drift check").action(async (flags) => {
 		if (flags.skillsCheck !== false) await runSkillsDriftCheck(resolveBuiltinSkillsDir());
-		const { dev } = await import("../dev-CzJYXFOO.js");
+		const { dev } = await import("../dev-BO0cHiYy.js");
 		await dev(flags);
 	});
 	program.command("build").description("Build the workspace as a static site").option("--out-dir <dir>", "output directory (defaults to `dist`)").action(async (flags) => {
-		const { build } = await import("../build-L50pau9v.js");
+		const { build } = await import("../build-6hM9Ga2d.js");
 		await build(flags);
 	});
 	program.command("preview").description("Preview the production build").addOption(new Option("-p, --port <port>", "port to listen on").argParser(parsePort)).addOption(new Option("--host [host]", "expose on the network (optional host)")).option("--open", "open the browser on start").action(async (flags) => {
-		const { preview } = await import("../preview-CPufRmuj.js");
+		const { preview } = await import("../preview-sOKhzyWB.js");
 		await preview(flags);
 	});
 	program.command("export").description("Build pages into self-contained static folders (one per page)").argument("[pages...]", "page ids to export (default: all)").option("--out-dir <dir>", "output directory (defaults to `export`)").action(async (pages, flags) => {
@@ -79,8 +83,13 @@ async function run(argv) {
 		const { syncSkills: syncSkills$1 } = await import("../sync-lKEXyPOh.js");
 		await syncSkills$1(resolveBuiltinSkillsDir(), flags);
 	});
-	program.command("update").description("Update @autono/open-pages to the latest version and sync skills").option("--force", "reinstall even if already on the latest version").option("--no-skills", "skip the skills sync after updating").action(async (flags) => {
-		const { update } = await import("../update-CV62NhBT.js");
+	program.command("sync:ui").description("Sync ui/, lib/, and hooks/ from @autono/open-pages — files you edited are kept").option("--dry-run", "show what would change without writing").option("--force", "overwrite files even where you have edited them").action(async (flags) => {
+		const { printUiSummary, syncUi } = await import("../sync-ui-CDydLpY4.js");
+		const result = await syncUi(process.cwd(), resolveWorkspaceSetDir(), flags);
+		printUiSummary(result, flags.dryRun ?? false);
+	});
+	program.command("update").description("Update @autono/open-pages to the latest version and sync skills").option("--force", "reinstall even if already on the latest version").option("--no-skills", "skip the skills sync after updating").option("--no-ui", "skip the ui set sync after updating").action(async (flags) => {
+		const { update } = await import("../update-D1U8TVwd.js");
 		await update({
 			current: version,
 			...flags

package/dist/{config-C9or4m4J.d.ts → config-C-sasGou.d.ts}

@@ -1,4 +1,4 @@
-import { Locale } from "./types-C5NCdDT-.js";
+import { Locale } from "./types-BzxkFHhd.js";
 
 //#region src/config.d.ts
 type OpenPagesBuildConfig = {

package/dist/{config-CDUdFE8N.js → config-CBbwLHOo.js}

@@ -1,6 +1,6 @@
 import { defaultDesign } from "./design-C13iz9_4.js";
 import { PAGE_ID_RE, duplicatePageDir, invalidatePagesModule, loadUserConfig, openPagesPlugin, resolvePageEntry, rmPageDir, updateMetaTitleInSource, validatePageName } from "./open-pages-plugin-C0poXLsx.js";
-import { detectPackageManager, fetchLatest, formatCommand, invalidateLatestCache, isOutdated, localOpenPagesCommand, runCommand, updateCommandFor } from "./update-package-Cxt57pz7.js";
+import { detectPackageManager, fetchLatest, formatCommand, invalidateLatestCache, isOutdated, localOpenPagesCommand, runCommand, updateCommandFor } from "./update-package-D9zws9nc.js";
 import { APP_ROOT, PKG_ROOT, readCoreVersion } from "./version-B6AiiGvT.js";
 import fs from "node:fs/promises";
 import path from "node:path";

package/dist/{dev-CzJYXFOO.js → dev-BO0cHiYy.js}

@@ -1,7 +1,7 @@
 import "./design-C13iz9_4.js";
 import "./open-pages-plugin-C0poXLsx.js";
-import { DEV_SUPERVISED_ENV, RESTART_EXIT_CODE, createViteConfig } from "./config-CDUdFE8N.js";
-import "./update-package-Cxt57pz7.js";
+import { DEV_SUPERVISED_ENV, RESTART_EXIT_CODE, createViteConfig } from "./config-CBbwLHOo.js";
+import "./update-package-D9zws9nc.js";
 import "./version-B6AiiGvT.js";
 import chalk from "chalk";
 import path from "node:path";

package/dist/index.d.ts

@@ -1,5 +1,5 @@
-import { Locale, Plural } from "./types-C5NCdDT-.js";
-import { OpenPagesConfig } from "./config-C9or4m4J.js";
+import { Locale, Plural } from "./types-BzxkFHhd.js";
+import { OpenPagesConfig } from "./config-C-sasGou.js";
 import { ComponentType } from "react";
 
 //#region src/app/lib/design.d.ts

package/dist/locale/index.d.ts

@@ -1,4 +1,4 @@
-import { Locale, Plural } from "../types-C5NCdDT-.js";
+import { Locale, Plural } from "../types-BzxkFHhd.js";
 
 //#region src/locale/en.d.ts
 declare const en: Locale;

package/dist/{preview-CPufRmuj.js → preview-sOKhzyWB.js}

@@ -1,7 +1,7 @@
 import "./design-C13iz9_4.js";
 import "./open-pages-plugin-C0poXLsx.js";
-import { createViteConfig } from "./config-CDUdFE8N.js";
-import "./update-package-Cxt57pz7.js";
+import { createViteConfig } from "./config-CBbwLHOo.js";
+import "./update-package-D9zws9nc.js";
 import "./version-B6AiiGvT.js";
 import { mergeConfig, preview as preview$1 } from "vite";
 

package/dist/sync-ui-CDydLpY4.js

@@ -0,0 +1,134 @@
+import chalk from "chalk";
+import { mkdir, readFile, readdir, writeFile } from "node:fs/promises";
+import path from "node:path";
+import { createHash } from "node:crypto";
+import { existsSync } from "node:fs";
+
+//#region src/cli/sync-ui.ts
+const UI_MANIFEST = path.join("ui", ".sync-manifest.json");
+const ENTRIES = [
+	"ui",
+	"lib",
+	"hooks"
+];
+function hashOf(data) {
+	return createHash("sha256").update(data).digest("hex");
+}
+async function collectFiles(dir, prefix = "") {
+	const out = [];
+	for (const entry of await readdir(dir, { withFileTypes: true })) {
+		const rel = prefix ? path.join(prefix, entry.name) : entry.name;
+		if (entry.isDirectory()) out.push(...await collectFiles(path.join(dir, entry.name), rel));
+		else if (entry.isFile()) out.push(rel);
+	}
+	return out;
+}
+async function readManifest(file) {
+	try {
+		const parsed = JSON.parse(await readFile(file, "utf8"));
+		if (parsed && typeof parsed === "object" && !Array.isArray(parsed)) return parsed;
+	} catch {}
+	return null;
+}
+/** Hashes of the canonical set, keyed by workspace-relative path. */
+async function canonicalHashes(canonicalDir) {
+	const hashes = {};
+	for (const entry of ENTRIES) {
+		const root = path.join(canonicalDir, entry);
+		if (!existsSync(root)) continue;
+		for (const rel of await collectFiles(root)) {
+			const wsRel = path.join(entry, rel).split(path.sep).join("/");
+			hashes[wsRel] = hashOf(await readFile(path.join(root, rel)));
+		}
+	}
+	return hashes;
+}
+async function syncUi(workspaceDir, canonicalDir, opts = {}) {
+	const { dryRun = false, force = false } = opts;
+	const result = {
+		added: [],
+		updated: [],
+		unchanged: [],
+		skipped: [],
+		forced: [],
+		removedUpstream: [],
+		addedDeps: []
+	};
+	const manifestPath = path.join(workspaceDir, UI_MANIFEST);
+	const manifest = await readManifest(manifestPath) ?? {};
+	const next = {};
+	const canonical = await canonicalHashes(canonicalDir);
+	for (const [rel, canonicalHash] of Object.entries(canonical)) {
+		const dst = path.join(workspaceDir, rel);
+		const src = path.join(canonicalDir, rel);
+		const write = async () => {
+			if (dryRun) return;
+			await mkdir(path.dirname(dst), { recursive: true });
+			await writeFile(dst, await readFile(src));
+		};
+		if (!existsSync(dst)) {
+			await write();
+			next[rel] = canonicalHash;
+			result.added.push(rel);
+			continue;
+		}
+		const currentHash = hashOf(await readFile(dst));
+		if (currentHash === canonicalHash) {
+			next[rel] = canonicalHash;
+			result.unchanged.push(rel);
+			continue;
+		}
+		const pristine = manifest[rel] !== void 0 && manifest[rel] === currentHash;
+		if (pristine || force) {
+			await write();
+			next[rel] = canonicalHash;
+			(pristine ? result.updated : result.forced).push(rel);
+			continue;
+		}
+		if (manifest[rel] !== void 0) next[rel] = manifest[rel];
+		result.skipped.push(rel);
+	}
+	for (const rel of Object.keys(manifest)) if (!(rel in canonical) && existsSync(path.join(workspaceDir, rel))) {
+		next[rel] ??= manifest[rel];
+		result.removedUpstream.push(rel);
+	}
+	result.addedDeps = await ensureDeps(workspaceDir, canonicalDir, dryRun);
+	if (!dryRun) {
+		const sorted = Object.fromEntries(Object.entries(next).sort(([a], [b]) => a.localeCompare(b)));
+		await mkdir(path.dirname(manifestPath), { recursive: true });
+		await writeFile(manifestPath, `${JSON.stringify(sorted, null, 2)}\n`, "utf8");
+	}
+	return result;
+}
+async function ensureDeps(workspaceDir, canonicalDir, dryRun) {
+	const depsFile = path.join(canonicalDir, "deps.json");
+	const pkgFile = path.join(workspaceDir, "package.json");
+	if (!existsSync(depsFile) || !existsSync(pkgFile)) return [];
+	const wanted = JSON.parse(await readFile(depsFile, "utf8"));
+	const pkg = JSON.parse(await readFile(pkgFile, "utf8"));
+	const missing = Object.entries(wanted).filter(([name]) => !pkg.dependencies?.[name] && !pkg.devDependencies?.[name]);
+	if (missing.length === 0) return [];
+	if (!dryRun) {
+		pkg.dependencies ??= {};
+		for (const [name, range] of missing) pkg.dependencies[name] = range;
+		pkg.dependencies = Object.fromEntries(Object.entries(pkg.dependencies).sort(([a], [b]) => a.localeCompare(b)));
+		await writeFile(pkgFile, `${JSON.stringify(pkg, null, 2)}\n`, "utf8");
+	}
+	return missing.map(([name]) => name);
+}
+function printUiSummary(result, dryRun) {
+	const header = dryRun ? chalk.bold("Dry run — no files written:") : chalk.bold("Synced the workspace ui set:");
+	process.stdout.write(`${header}\n`);
+	const row = (symbol, rel, label) => process.stdout.write(`  ${symbol} ${rel} ${chalk.dim(`(${label})`)}\n`);
+	for (const rel of result.added) row(chalk.green("+"), rel, "added");
+	for (const rel of result.updated) row(chalk.yellow("~"), rel, "updated");
+	for (const rel of result.forced) row(chalk.red("!"), rel, "overwrote your edits (--force)");
+	for (const rel of result.skipped) row(chalk.dim("#"), rel, "edited by you — skipped");
+	for (const rel of result.removedUpstream) row(chalk.dim("-"), rel, "no longer shipped — yours to keep or delete");
+	process.stdout.write(chalk.dim(`\n${result.added.length} added, ${result.updated.length + result.forced.length} updated, ${result.unchanged.length} unchanged, ${result.skipped.length} skipped.\n`));
+	if (result.skipped.length > 0 && result.forced.length === 0) process.stdout.write(chalk.dim("Skipped files differ from what was scaffolded. Re-run with --force to overwrite them.\n"));
+	if (result.addedDeps.length > 0) process.stdout.write(`${chalk.yellow("!")} Added ${result.addedDeps.map((d) => chalk.bold(d)).join(", ")} to package.json — run your package manager's install.\n`);
+}
+
+//#endregion
+export { printUiSummary, syncUi };

package/dist/{update-CV62NhBT.js → update-D1U8TVwd.js}

@@ -1,4 +1,4 @@
-import { PKG, detectPackageManager, fetchLatest, formatCommand, isOutdated, localOpenPagesCommand, runCommand, updateCommandFor } from "./update-package-Cxt57pz7.js";
+import { PKG, detectPackageManager, fetchLatest, formatCommand, installCommandFor, isOutdated, localOpenPagesCommand, runCommand, updateCommandFor } from "./update-package-D9zws9nc.js";
 import chalk from "chalk";
 import { readFile } from "node:fs/promises";
 import path from "node:path";
@@ -30,6 +30,18 @@ async function update(opts) {
 		process.stdout.write(chalk.dim("$ open-pages sync:skills\n"));
 		await runCommand(localOpenPagesCommand(cwd, ["sync:skills"]), cwd, { stdio: "inherit" });
 	}
+	if (opts.ui !== false) {
+		process.stdout.write(chalk.dim("$ open-pages sync:ui\n"));
+		const pkgFile = path.join(cwd, "package.json");
+		const before = await readFile(pkgFile, "utf8").catch(() => "");
+		await runCommand(localOpenPagesCommand(cwd, ["sync:ui"]), cwd, { stdio: "inherit" });
+		const after = await readFile(pkgFile, "utf8").catch(() => "");
+		if (after !== before) {
+			const reinstall = installCommandFor(packageManager);
+			process.stdout.write(chalk.dim(`$ ${formatCommand(reinstall)}\n`));
+			await runCommand(reinstall, cwd, { stdio: "inherit" });
+		}
+	}
 	process.stdout.write(`${chalk.green("✓")} Updated ${PKG} to ${target}. Restart \`open-pages dev\` to use it.\n`);
 }
 

package/dist/{update-package-Cxt57pz7.js → update-package-D9zws9nc.js}

@@ -100,6 +100,12 @@ async function updateCommandFor(packageManager, cwd) {
 * The freshly installed package's own CLI, so skills come from the new
 * version rather than whatever process is driving the update.
 */
+function installCommandFor(packageManager) {
+	return {
+		cmd: packageManager,
+		args: ["install"]
+	};
+}
 function localOpenPagesCommand(cwd, args) {
 	const bin = path.join(cwd, "node_modules", ...PKG.split("/"), "bin.js");
 	return {
@@ -149,4 +155,4 @@ async function runCommand(spec, cwd, opts = {}) {
 }
 
 //#endregion
-export { PKG, detectPackageManager, fetchLatest, formatCommand, invalidateLatestCache, isOutdated, localOpenPagesCommand, runCommand, updateCommandFor };
+export { PKG, detectPackageManager, fetchLatest, formatCommand, installCommandFor, invalidateLatestCache, isOutdated, localOpenPagesCommand, runCommand, updateCommandFor };

package/dist/vite/index.d.ts

@@ -1,5 +1,5 @@
-import "../types-C5NCdDT-.js";
-import { OpenPagesConfig } from "../config-C9or4m4J.js";
+import "../types-BzxkFHhd.js";
+import { OpenPagesConfig } from "../config-C-sasGou.js";
 import { InlineConfig } from "vite";
 
 //#region src/vite/config.d.ts

package/dist/vite/index.js

@@ -1,7 +1,7 @@
 import "../design-C13iz9_4.js";
 import "../open-pages-plugin-C0poXLsx.js";
-import { createViteConfig } from "../config-CDUdFE8N.js";
-import "../update-package-Cxt57pz7.js";
+import { createViteConfig } from "../config-CBbwLHOo.js";
+import "../update-package-D9zws9nc.js";
 import "../version-B6AiiGvT.js";
 
 export { createViteConfig };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@autono/open-pages",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "description": "Runtime and CLI for open-pages — live preview of React and HTML pages, click-to-comment inspector, and static export.",
   "type": "module",
   "exports": {
@@ -30,7 +30,8 @@
     "src/app",
     "src/locale",
     "skills",
-    "README.md"
+    "README.md",
+    "workspace"
   ],
   "scripts": {
     "build": "tsdown",

package/workspace/components.json

@@ -0,0 +1,25 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "radix-nova",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "styles/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "iconLibrary": "lucide",
+  "rtl": false,
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "menuColor": "default",
+  "menuAccent": "subtle",
+  "registries": {}
+}

package/workspace/deps.json

@@ -0,0 +1,24 @@
+{
+  "react": "^19.2.0",
+  "react-dom": "^19.2.0",
+  "@base-ui/react": "^1.7.0",
+  "@fontsource-variable/geist": "^5.3.0",
+  "@shadcn/react": "^0.3.0",
+  "class-variance-authority": "^0.7.1",
+  "clsx": "^2.1.1",
+  "cmdk": "^1.1.1",
+  "date-fns": "^4.4.0",
+  "embla-carousel-react": "^8.6.0",
+  "input-otp": "^1.5.0",
+  "lucide-react": "^1.37.0",
+  "next-themes": "^0.4.6",
+  "radix-ui": "^1.6.7",
+  "react-day-picker": "^10.0.1",
+  "react-resizable-panels": "^4.12.3",
+  "recharts": "^3.8.0",
+  "shadcn": "^4.19.0",
+  "sonner": "^2.0.8",
+  "tailwind-merge": "^3.6.0",
+  "tw-animate-css": "^1.4.0",
+  "vaul": "^1.1.2"
+}

package/workspace/hooks/use-mobile.ts

@@ -0,0 +1,19 @@
+import * as React from "react"
+
+const MOBILE_BREAKPOINT = 768
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
+
+  React.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    }
+    mql.addEventListener("change", onChange)
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    return () => mql.removeEventListener("change", onChange)
+  }, [])
+
+  return !!isMobile
+}

package/workspace/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

package/workspace/styles/globals.css

@@ -0,0 +1,135 @@
+@import "tailwindcss" source(none);
+@import "tw-animate-css";
+@import "shadcn/tailwind.css";
+@import "@fontsource-variable/geist";
+@source "../pages";
+@source "../ui";
+@source "../lib";
+@source "../hooks";
+@source "../themes";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+    --font-heading: var(--font-sans);
+    --font-sans: 'Geist Variable', sans-serif;
+    --color-sidebar-ring: var(--sidebar-ring);
+    --color-sidebar-border: var(--sidebar-border);
+    --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+    --color-sidebar-accent: var(--sidebar-accent);
+    --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+    --color-sidebar-primary: var(--sidebar-primary);
+    --color-sidebar-foreground: var(--sidebar-foreground);
+    --color-sidebar: var(--sidebar);
+    --color-chart-5: var(--chart-5);
+    --color-chart-4: var(--chart-4);
+    --color-chart-3: var(--chart-3);
+    --color-chart-2: var(--chart-2);
+    --color-chart-1: var(--chart-1);
+    --color-ring: var(--ring);
+    --color-input: var(--input);
+    --color-border: var(--border);
+    --color-destructive: var(--destructive);
+    --color-accent-foreground: var(--accent-foreground);
+    --color-accent: var(--accent);
+    --color-muted-foreground: var(--muted-foreground);
+    --color-muted: var(--muted);
+    --color-secondary-foreground: var(--secondary-foreground);
+    --color-secondary: var(--secondary);
+    --color-primary-foreground: var(--primary-foreground);
+    --color-primary: var(--primary);
+    --color-popover-foreground: var(--popover-foreground);
+    --color-popover: var(--popover);
+    --color-card-foreground: var(--card-foreground);
+    --color-card: var(--card);
+    --color-foreground: var(--foreground);
+    --color-background: var(--background);
+    --radius-sm: calc(var(--radius) * 0.6);
+    --radius-md: calc(var(--radius) * 0.8);
+    --radius-lg: var(--radius);
+    --radius-xl: calc(var(--radius) * 1.4);
+    --radius-2xl: calc(var(--radius) * 1.8);
+    --radius-3xl: calc(var(--radius) * 2.2);
+    --radius-4xl: calc(var(--radius) * 2.6);
+}
+
+:root {
+    --background: oklch(1 0 0);
+    --foreground: oklch(0.145 0 0);
+    --card: oklch(1 0 0);
+    --card-foreground: oklch(0.145 0 0);
+    --popover: oklch(1 0 0);
+    --popover-foreground: oklch(0.145 0 0);
+    --primary: oklch(0.205 0 0);
+    --primary-foreground: oklch(0.985 0 0);
+    --secondary: oklch(0.97 0 0);
+    --secondary-foreground: oklch(0.205 0 0);
+    --muted: oklch(0.97 0 0);
+    --muted-foreground: oklch(0.556 0 0);
+    --accent: oklch(0.97 0 0);
+    --accent-foreground: oklch(0.205 0 0);
+    --destructive: oklch(0.577 0.245 27.325);
+    --border: oklch(0.922 0 0);
+    --input: oklch(0.922 0 0);
+    --ring: oklch(0.708 0 0);
+    --chart-1: oklch(0.87 0 0);
+    --chart-2: oklch(0.556 0 0);
+    --chart-3: oklch(0.439 0 0);
+    --chart-4: oklch(0.371 0 0);
+    --chart-5: oklch(0.269 0 0);
+    --radius: 0.625rem;
+    --sidebar: oklch(0.985 0 0);
+    --sidebar-foreground: oklch(0.145 0 0);
+    --sidebar-primary: oklch(0.205 0 0);
+    --sidebar-primary-foreground: oklch(0.985 0 0);
+    --sidebar-accent: oklch(0.97 0 0);
+    --sidebar-accent-foreground: oklch(0.205 0 0);
+    --sidebar-border: oklch(0.922 0 0);
+    --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+    --background: oklch(0.145 0 0);
+    --foreground: oklch(0.985 0 0);
+    --card: oklch(0.205 0 0);
+    --card-foreground: oklch(0.985 0 0);
+    --popover: oklch(0.205 0 0);
+    --popover-foreground: oklch(0.985 0 0);
+    --primary: oklch(0.922 0 0);
+    --primary-foreground: oklch(0.205 0 0);
+    --secondary: oklch(0.269 0 0);
+    --secondary-foreground: oklch(0.985 0 0);
+    --muted: oklch(0.269 0 0);
+    --muted-foreground: oklch(0.708 0 0);
+    --accent: oklch(0.269 0 0);
+    --accent-foreground: oklch(0.985 0 0);
+    --destructive: oklch(0.704 0.191 22.216);
+    --border: oklch(1 0 0 / 10%);
+    --input: oklch(1 0 0 / 15%);
+    --ring: oklch(0.556 0 0);
+    --chart-1: oklch(0.87 0 0);
+    --chart-2: oklch(0.556 0 0);
+    --chart-3: oklch(0.439 0 0);
+    --chart-4: oklch(0.371 0 0);
+    --chart-5: oklch(0.269 0 0);
+    --sidebar: oklch(0.205 0 0);
+    --sidebar-foreground: oklch(0.985 0 0);
+    --sidebar-primary: oklch(0.488 0.243 264.376);
+    --sidebar-primary-foreground: oklch(0.985 0 0);
+    --sidebar-accent: oklch(0.269 0 0);
+    --sidebar-accent-foreground: oklch(0.985 0 0);
+    --sidebar-border: oklch(1 0 0 / 10%);
+    --sidebar-ring: oklch(0.556 0 0);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+    }
+  body {
+    @apply bg-background text-foreground;
+    }
+  html {
+    @apply font-sans;
+    }
+}

package/workspace/ui/accordion.tsx

@@ -0,0 +1,79 @@
+import * as React from "react"
+import { Accordion as AccordionPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+import { ChevronDownIcon, ChevronUpIcon } from "lucide-react"
+
+function Accordion({
+  className,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Root>) {
+  return (
+    <AccordionPrimitive.Root
+      data-slot="accordion"
+      className={cn("flex w-full flex-col", className)}
+      {...props}
+    />
+  )
+}
+
+function AccordionItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Item>) {
+  return (
+    <AccordionPrimitive.Item
+      data-slot="accordion-item"
+      className={cn("not-last:border-b", className)}
+      {...props}
+    />
+  )
+}
+
+function AccordionTrigger({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {
+  return (
+    <AccordionPrimitive.Header className="flex">
+      <AccordionPrimitive.Trigger
+        data-slot="accordion-trigger"
+        className={cn(
+          "group/accordion-trigger relative flex flex-1 items-start justify-between rounded-lg border border-transparent py-2.5 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:after:border-ring disabled:pointer-events-none disabled:opacity-50 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 **:data-[slot=accordion-trigger-icon]:text-muted-foreground",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <ChevronDownIcon data-slot="accordion-trigger-icon" className="pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden" />
+        <ChevronUpIcon data-slot="accordion-trigger-icon" className="pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline" />
+      </AccordionPrimitive.Trigger>
+    </AccordionPrimitive.Header>
+  )
+}
+
+function AccordionContent({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Content>) {
+  return (
+    <AccordionPrimitive.Content
+      data-slot="accordion-content"
+      className="overflow-hidden text-sm data-open:animate-accordion-down data-closed:animate-accordion-up"
+      {...props}
+    >
+      <div
+        className={cn(
+          "h-(--radix-accordion-content-height) pt-0 pb-2.5 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4",
+          className
+        )}
+      >
+        {children}
+      </div>
+    </AccordionPrimitive.Content>
+  )
+}
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }