add component library

CLAUDE.md

@@ -4,6 +4,9 @@ Auto-generated from all feature plans. Last updated: 2026-03-06
 
 ## Active Technologies
 
+- TypeScript 5.7, targeting ES2022+ (ESM) + @base-ui-components/react, tailwind-merge, clsx, Tailwind CSS v4, React 19 (004-component-library)
+- N/A (no persistent storage) (004-component-library)
+
 - TypeScript 5.x (frontend), Rust 2021 edition (backend) + Tauri v2, React 19, Vite 6, TanStack Router, Tailwind CSS v4, Zustand, tauri-plugin-{shell,dialog,fs,process} (002-tauri-app-setup)
 - N/A (no persistent storage in initial setup) (002-tauri-app-setup)
 - TypeScript 5.x (frontend), Rust 2021 edition (backend), YAML (CI workflows) + lefthook (git hooks), @commitlint/cli + @commitlint/config-conventional (commit validation), git-cliff (changelog generation via GitHub Action), Tauri v2 (build/release) (003-commitlint-release-workflow)
@@ -28,10 +31,10 @@ TypeScript 5.x, targeting ES2022+: Follow standard conventions
 
 ## Recent Changes
 
+- 004-component-library: Added TypeScript 5.7, targeting ES2022+ (ESM) + @base-ui-components/react, tailwind-merge, clsx, Tailwind CSS v4, React 19
+
 - 003-commitlint-release-workflow: Added TypeScript 5.x (frontend), Rust 2021 edition (backend), YAML (CI workflows) + lefthook (git hooks), @commitlint/cli + @commitlint/config-conventional (commit validation), git-cliff (changelog generation via GitHub Action), Tauri v2 (build/release)
 - 002-tauri-app-setup: Added TypeScript 5.x (frontend), Rust 2021 edition (backend) + Tauri v2, React 19, Vite 6, TanStack Router, Tailwind CSS v4, Zustand, tauri-plugin-{shell,dialog,fs,process}
 
-- 001-frontend-monorepo: Added TypeScript 5.x, targeting ES2022+ + pnpm (workspace management), Turborepo (build orchestration), Three.js + @react-three/fiber (3D rendering), Vitest (testing), tsup (library bundling), ESLint + Prettier (linting/formatting)
-
 <!-- MANUAL ADDITIONS START -->
 <!-- MANUAL ADDITIONS END -->

apps/forge/package.json

@@ -23,7 +23,9 @@
     "@ltk-forge/math": "workspace:*",
     "@ltk-forge/mapgeo-types": "workspace:*",
     "@ltk-forge/mapgeo-utils": "workspace:*",
-    "@ltk-forge/map-renderer": "workspace:*"
+    "@ltk-forge/map-renderer": "workspace:*",
+    "@ltk-forge/theme": "workspace:*",
+    "@ltk-forge/ui": "workspace:*"
   },
   "devDependencies": {
     "@types/react": "^19.0.0",

apps/forge/src/routes/__root.tsx

@@ -1,94 +1,56 @@
 import { createRootRoute, Outlet } from "@tanstack/react-router";
 import { getCurrentWindow } from "@tauri-apps/api/window";
+import { Button } from "@ltk-forge/ui";
+
+const titlebarButtonClass =
+  "w-[46px] h-full rounded-none text-[var(--color-text-secondary)]";
 
 function TitleBar() {
   const appWindow = getCurrentWindow();
 
   return (
     <div
       data-tauri-drag-region
-      style={{
-        height: "var(--titlebar-height)",
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "space-between",
-        backgroundColor: "var(--color-bg-secondary)",
-        paddingLeft: "12px",
-        userSelect: "none",
-        WebkitUserSelect: "none",
-      }}
+      className="flex items-center justify-between select-none h-[var(--titlebar-height)] bg-[var(--color-bg-secondary)] pl-3"
     >
-      <span style={{ fontSize: "12px", fontWeight: 600, color: "var(--color-text-secondary)" }}>
+      <span className="text-xs font-semibold text-[var(--color-text-secondary)]">
         LTK Forge
       </span>
-      <div style={{ display: "flex", height: "100%" }}>
-        <button
+      <div className="flex h-full">
+        <Button.Root
+          variant="ghost"
+          intent="primary"
+          className={`${titlebarButtonClass} text-sm hover:bg-[var(--color-bg-tertiary)]`}
           onClick={() => appWindow.minimize()}
-          style={{
-            width: "46px",
-            height: "100%",
-            border: "none",
-            background: "transparent",
-            color: "var(--color-text-secondary)",
-            cursor: "pointer",
-            fontSize: "14px",
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
-          }}
-          onMouseEnter={(e) => (e.currentTarget.style.backgroundColor = "var(--color-bg-tertiary)")}
-          onMouseLeave={(e) => (e.currentTarget.style.backgroundColor = "transparent")}
         >
           &#x2013;
-        </button>
-        <button
+        </Button.Root>
+        <Button.Root
+          variant="ghost"
+          intent="primary"
+          className={`${titlebarButtonClass} text-xs hover:bg-[var(--color-bg-tertiary)]`}
           onClick={() => appWindow.toggleMaximize()}
-          style={{
-            width: "46px",
-            height: "100%",
-            border: "none",
-            background: "transparent",
-            color: "var(--color-text-secondary)",
-            cursor: "pointer",
-            fontSize: "12px",
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
-          }}
-          onMouseEnter={(e) => (e.currentTarget.style.backgroundColor = "var(--color-bg-tertiary)")}
-          onMouseLeave={(e) => (e.currentTarget.style.backgroundColor = "transparent")}
         >
           &#x25A1;
-        </button>
-        <button
+        </Button.Root>
+        <Button.Root
+          variant="ghost"
+          intent="danger"
+          className={`${titlebarButtonClass} text-sm hover:bg-[#c42b1c] hover:text-white`}
           onClick={() => appWindow.close()}
-          style={{
-            width: "46px",
-            height: "100%",
-            border: "none",
-            background: "transparent",
-            color: "var(--color-text-secondary)",
-            cursor: "pointer",
-            fontSize: "14px",
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
-          }}
-          onMouseEnter={(e) => (e.currentTarget.style.backgroundColor = "#c42b1c")}
-          onMouseLeave={(e) => (e.currentTarget.style.backgroundColor = "transparent")}
         >
           &#x2715;
-        </button>
+        </Button.Root>
       </div>
     </div>
   );
 }
 
 function RootLayout() {
   return (
-    <div style={{ display: "flex", flexDirection: "column", height: "100%" }}>
+    <div className="flex flex-col h-full">
       <TitleBar />
-      <main style={{ flex: 1, overflow: "auto" }}>
+      <main className="flex-1 overflow-auto">
         <Outlet />
       </main>
     </div>

apps/forge/src/styles/app.css

@@ -1,13 +1,7 @@
 @import "tailwindcss";
+@import "@ltk-forge/theme/tokens.css";
 
 :root {
-  --color-bg-primary: #0a0a0f;
-  --color-bg-secondary: #12121a;
-  --color-bg-tertiary: #1a1a25;
-  --color-text-primary: #e4e4e7;
-  --color-text-secondary: #a1a1aa;
-  --color-accent: #6366f1;
-  --color-accent-hover: #818cf8;
   --titlebar-height: 32px;
 }
 
@@ -20,10 +14,5 @@ body,
   overflow: hidden;
   background-color: var(--color-bg-primary);
   color: var(--color-text-primary);
-  font-family:
-    system-ui,
-    -apple-system,
-    "Segoe UI",
-    Roboto,
-    sans-serif;
+  font-family: var(--font-family-sans);
 }

eslint.config.js

@@ -0,0 +1,8 @@
+import baseConfig from "@ltk-forge/eslint-config";
+
+export default [
+  ...baseConfig,
+  {
+    ignores: ["**/dist/", "**/node_modules/", "src-tauri/"],
+  },
+];

packages/theme/eslint.config.js

@@ -0,0 +1,3 @@
+import baseConfig from "@ltk-forge/eslint-config";
+
+export default [...baseConfig];

packages/theme/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "@ltk-forge/theme",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./src/index.ts",
+      "import": "./src/index.ts"
+    },
+    "./tokens.css": "./src/tokens.css"
+  },
+  "main": "./src/index.ts",
+  "types": "./src/index.ts",
+  "scripts": {
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint src/",
+    "clean": "rm -rf dist"
+  },
+  "devDependencies": {
+    "@ltk-forge/tsconfig": "workspace:*",
+    "@ltk-forge/eslint-config": "workspace:*",
+    "eslint": "^9.0.0",
+    "typescript": "^5.7.0"
+  }
+}

packages/theme/src/index.ts

@@ -0,0 +1,3 @@
+// @ltk-forge/theme
+// Design tokens are consumed via CSS import: @import "@ltk-forge/theme/tokens.css"
+// This module exists for package resolution and potential future JS token utilities.

packages/theme/src/tokens.css

@@ -0,0 +1,122 @@
+:root {
+  /* ── Background Colors ── */
+  --color-bg-primary: #0a0a0f;
+  --color-bg-secondary: #12121a;
+  --color-bg-tertiary: #1a1a25;
+  --color-bg-input: #16161f;
+  --color-bg-overlay: rgb(0 0 0 / 0.6);
+
+  /* ── Foreground (Text) Colors ── */
+  --color-text-primary: #e4e4e7;
+  --color-text-secondary: #a1a1aa;
+  --color-text-tertiary: #71717a;
+  --color-text-inverse: #09090b;
+
+  /* ── Border Colors ── */
+  --color-border-default: #27272a;
+  --color-border-muted: #1e1e24;
+  --color-border-focus: #6366f1;
+
+  /* ── Primary Intent (Indigo) ── */
+  --color-primary-50: #eef2ff;
+  --color-primary-100: #e0e7ff;
+  --color-primary-200: #c7d2fe;
+  --color-primary-300: #a5b4fc;
+  --color-primary-400: #818cf8;
+  --color-primary-500: #6366f1;
+  --color-primary-600: #4f46e5;
+  --color-primary-700: #4338ca;
+  --color-primary-800: #3730a3;
+  --color-primary-900: #312e81;
+  --color-primary-950: #1e1b4b;
+
+  /* ── Info Intent (Sky) ── */
+  --color-info-50: #f0f9ff;
+  --color-info-100: #e0f2fe;
+  --color-info-200: #bae6fd;
+  --color-info-300: #7dd3fc;
+  --color-info-400: #38bdf8;
+  --color-info-500: #0ea5e9;
+  --color-info-600: #0284c7;
+  --color-info-700: #0369a1;
+  --color-info-800: #075985;
+  --color-info-900: #0c4a6e;
+  --color-info-950: #082f49;
+
+  /* ── Success Intent (Emerald) ── */
+  --color-success-50: #ecfdf5;
+  --color-success-100: #d1fae5;
+  --color-success-200: #a7f3d0;
+  --color-success-300: #6ee7b7;
+  --color-success-400: #34d399;
+  --color-success-500: #10b981;
+  --color-success-600: #059669;
+  --color-success-700: #047857;
+  --color-success-800: #065f46;
+  --color-success-900: #064e3b;
+  --color-success-950: #022c22;
+
+  /* ── Danger Intent (Rose) ── */
+  --color-danger-50: #fff1f2;
+  --color-danger-100: #ffe4e6;
+  --color-danger-200: #fecdd3;
+  --color-danger-300: #fda4af;
+  --color-danger-400: #fb7185;
+  --color-danger-500: #f43f5e;
+  --color-danger-600: #e11d48;
+  --color-danger-700: #be123c;
+  --color-danger-800: #9f1239;
+  --color-danger-900: #881337;
+  --color-danger-950: #4c0519;
+
+  /* ── Spacing ── */
+  --spacing-0: 0;
+  --spacing-0\.5: 0.125rem;
+  --spacing-1: 0.25rem;
+  --spacing-1\.5: 0.375rem;
+  --spacing-2: 0.5rem;
+  --spacing-3: 0.75rem;
+  --spacing-4: 1rem;
+  --spacing-5: 1.25rem;
+  --spacing-6: 1.5rem;
+  --spacing-8: 2rem;
+  --spacing-10: 2.5rem;
+  --spacing-12: 3rem;
+
+  /* ── Font Family ── */
+  --font-family-sans:
+    Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+  --font-family-mono:
+    "JetBrains Mono", ui-monospace, "Cascadia Code", monospace;
+
+  /* ── Font Size ── */
+  --font-size-xs: 0.75rem;
+  --font-size-sm: 0.875rem;
+  --font-size-base: 1rem;
+  --font-size-lg: 1.125rem;
+  --font-size-xl: 1.25rem;
+  --font-size-2xl: 1.5rem;
+
+  /* ── Font Weight ── */
+  --font-weight-normal: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+
+  /* ── Radius ── */
+  --radius-sm: 0.25rem;
+  --radius-md: 0.375rem;
+  --radius-lg: 0.5rem;
+  --radius-xl: 0.75rem;
+  --radius-full: 9999px;
+
+  /* ── Shadow ── */
+  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
+  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.4);
+  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.5);
+
+  /* ── Transition Duration ── */
+  --transition-fast: 100ms;
+  --transition-normal: 150ms;
+  --transition-slow: 250ms;
+}

packages/theme/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": "@ltk-forge/tsconfig/library.json",
+  "compilerOptions": {
+    "outDir": "./dist",
+    "rootDir": "./src"
+  },
+  "include": ["src"]
+}

packages/ui/eslint.config.js

@@ -0,0 +1,3 @@
+import baseConfig from "@ltk-forge/eslint-config";
+
+export default [...baseConfig];