@neeter/react 0.6.0

package/dist/widgets/GrepWidget.js

@@ -0,0 +1,36 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { registerWidget } from "../registry.js";
+function GrepInputRenderer({ input }) {
+    const pattern = typeof input.pattern === "string" ? input.pattern : null;
+    const path = typeof input.path === "string" ? input.path : null;
+    const glob = typeof input.glob === "string" ? input.glob : null;
+    const outputMode = typeof input.output_mode === "string" ? input.output_mode : null;
+    if (!pattern)
+        return null;
+    return (_jsx("div", { className: "mt-1.5 space-y-1", children: _jsx("pre", { className: "text-[11px] leading-snug text-muted-foreground bg-accent rounded px-2 py-1 overflow-x-auto whitespace-pre-wrap break-all", children: _jsxs("code", { children: ["/", pattern, "/", path ? ` in ${path}` : "", glob ? ` --glob ${glob}` : "", outputMode && outputMode !== "files_with_matches" ? ` (${outputMode})` : ""] }) }) }));
+}
+function GrepWidget({ result, input, phase }) {
+    const pattern = typeof input.pattern === "string" ? input.pattern : null;
+    if (phase === "running" || phase === "pending") {
+        return (_jsx("div", { className: "flex items-center gap-2 text-xs text-muted-foreground py-1", children: _jsxs("span", { className: "animate-pulse", children: ["Searching ", pattern ? `/${pattern}/` : "", "\u2026"] }) }));
+    }
+    if (typeof result !== "string" || !result)
+        return null;
+    return (_jsx("div", { className: "py-1 text-xs", children: _jsx("pre", { className: "leading-snug text-foreground bg-accent rounded px-2 py-1.5 overflow-x-auto whitespace-pre-wrap break-all max-h-[300px] overflow-y-auto", children: _jsx("code", { children: result }) }) }));
+}
+registerWidget({
+    toolName: "Grep",
+    label: "Grep",
+    richLabel: (_r, input) => {
+        const pattern = typeof input.pattern === "string" ? input.pattern : null;
+        if (!pattern)
+            return null;
+        const type = typeof input.type === "string" ? input.type : null;
+        const glob = typeof input.glob === "string" ? input.glob : null;
+        const scope = type ? ` in ${type} files` : glob ? ` in ${glob}` : "";
+        const pat = pattern.length > 40 ? `${pattern.slice(0, 37)}…` : pattern;
+        return `${pat}${scope}`;
+    },
+    inputRenderer: GrepInputRenderer,
+    component: GrepWidget,
+});

package/dist/widgets/NotebookEditWidget.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/widgets/NotebookEditWidget.js

@@ -0,0 +1,47 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { registerWidget } from "../registry.js";
+function basename(filePath) {
+    return filePath.split("/").pop() ?? filePath;
+}
+const modeLabel = {
+    replace: "Replace cell",
+    insert: "Insert cell",
+    delete: "Delete cell",
+};
+function NotebookEditInputRenderer({ input }) {
+    const notebookPath = typeof input.notebook_path === "string" ? input.notebook_path : null;
+    const editMode = typeof input.edit_mode === "string" ? input.edit_mode : "replace";
+    const cellType = typeof input.cell_type === "string" ? input.cell_type : null;
+    const cellId = typeof input.cell_id === "string" ? input.cell_id : null;
+    const cellNumber = typeof input.cell_number === "number" ? input.cell_number : null;
+    const newSource = typeof input.new_source === "string" ? input.new_source : null;
+    if (!notebookPath)
+        return null;
+    const cellRef = cellId ?? (cellNumber != null ? `cell ${cellNumber}` : null);
+    const cellLabel = cellRef && editMode === "insert" ? `after ${cellRef}` : cellRef;
+    return (_jsxs("div", { className: "mt-1.5 space-y-1", children: [_jsxs("div", { className: "text-xs text-muted-foreground", children: [modeLabel[editMode] ?? editMode, cellType && _jsxs("span", { className: "ml-1 opacity-70", children: ["[", cellType, "]"] }), cellLabel && _jsx("span", { className: "ml-1 font-mono opacity-70", children: cellLabel }), _jsx("span", { className: "ml-1.5 font-mono opacity-70", children: basename(notebookPath) })] }), newSource && editMode !== "delete" && (_jsx("pre", { className: "text-[11px] leading-snug text-muted-foreground bg-accent rounded px-2 py-1 overflow-x-auto whitespace-pre-wrap break-all max-h-[120px] overflow-y-auto", children: _jsx("code", { children: newSource }) }))] }));
+}
+function NotebookEditWidget({ input, phase }) {
+    const notebookPath = typeof input.notebook_path === "string" ? input.notebook_path : null;
+    const editMode = typeof input.edit_mode === "string" ? input.edit_mode : "replace";
+    const cellType = typeof input.cell_type === "string" ? input.cell_type : null;
+    const newSource = typeof input.new_source === "string" ? input.new_source : null;
+    if (phase === "running" || phase === "pending") {
+        return (_jsx("div", { className: "flex items-center gap-2 text-xs text-muted-foreground py-1", children: _jsxs("span", { className: "animate-pulse", children: ["Editing ", notebookPath ? basename(notebookPath) : "notebook", "\u2026"] }) }));
+    }
+    return (_jsxs("div", { className: "py-1 space-y-1.5", children: [_jsxs("div", { className: "text-xs text-muted-foreground", children: [editMode === "insert" ? "Inserted" : editMode === "delete" ? "Deleted" : "Replaced", " cell", cellType && _jsxs("span", { className: "ml-1 opacity-70", children: ["[", cellType, "]"] })] }), newSource && editMode !== "delete" && (_jsx("pre", { className: "text-[11px] leading-snug text-foreground bg-accent rounded px-2 py-1.5 overflow-x-auto whitespace-pre-wrap break-all max-h-[200px] overflow-y-auto", children: _jsx("code", { children: newSource }) }))] }));
+}
+registerWidget({
+    toolName: "NotebookEdit",
+    label: "Notebook Edit",
+    richLabel: (_r, input) => {
+        const notebookPath = typeof input.notebook_path === "string" ? input.notebook_path : null;
+        const editMode = typeof input.edit_mode === "string" ? input.edit_mode : null;
+        const name = notebookPath ? basename(notebookPath) : null;
+        if (!name)
+            return null;
+        return editMode && editMode !== "replace" ? `${editMode} ${name}` : name;
+    },
+    inputRenderer: NotebookEditInputRenderer,
+    component: NotebookEditWidget,
+});

package/dist/widgets/ReadWidget.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/widgets/ReadWidget.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { registerWidget } from "../registry.js";
+/** Show path relative to likely project root, falling back to last 3 segments. */
+function shortPath(filePath) {
+    const parts = filePath.split("/");
+    // Heuristic: strip up to the first segment after common prefixes
+    // e.g. /Users/dan/Documents/my-project/src/server/index.ts → src/server/index.ts
+    // Look for common root markers and take everything after
+    const markers = ["Documents", "Projects", "repos", "src", "home"];
+    for (let i = 0; i < parts.length - 1; i++) {
+        if (markers.includes(parts[i])) {
+            // Take from the segment AFTER the marker's child (the project dir)
+            const projectStart = i + 2; // marker + project-name
+            if (projectStart < parts.length) {
+                return parts.slice(projectStart).join("/");
+            }
+        }
+    }
+    // Fallback: last 3 segments
+    return parts.slice(-3).join("/");
+}
+function ReadInputRenderer({ input }) {
+    const filePath = typeof input.file_path === "string" ? input.file_path : null;
+    if (!filePath)
+        return null;
+    return _jsx("div", { className: "mt-1.5 text-xs text-muted-foreground font-mono truncate", children: filePath });
+}
+function ReadWidget({ result, input, phase }) {
+    const filePath = typeof input.file_path === "string" ? input.file_path : null;
+    if (phase === "running" || phase === "pending") {
+        return (_jsx("div", { className: "flex items-center gap-2 text-xs text-muted-foreground py-1", children: _jsxs("span", { className: "animate-pulse", children: ["Reading ", filePath ? shortPath(filePath) : "file", "\u2026"] }) }));
+    }
+    if (typeof result !== "string" || !result)
+        return null;
+    return (_jsx("div", { className: "py-1 text-xs", children: _jsx("pre", { className: "leading-snug text-foreground bg-accent rounded px-2 py-1.5 overflow-x-auto whitespace-pre-wrap break-all max-h-[300px] overflow-y-auto", children: _jsx("code", { children: result }) }) }));
+}
+registerWidget({
+    toolName: "Read",
+    label: "Read",
+    richLabel: (_r, input) => {
+        const filePath = typeof input.file_path === "string" ? input.file_path : null;
+        return filePath ? shortPath(filePath) : null;
+    },
+    inputRenderer: ReadInputRenderer,
+    component: ReadWidget,
+});

package/dist/widgets/TodoWriteWidget.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/widgets/TodoWriteWidget.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { registerWidget } from "../registry.js";
+function parseTodos(input) {
+    if (!Array.isArray(input.todos))
+        return [];
+    return input.todos.filter((t) => t != null &&
+        typeof t === "object" &&
+        typeof t.content === "string" &&
+        typeof t.status === "string");
+}
+function TodoList({ todos }) {
+    return (_jsx("div", { className: "space-y-0.5 text-xs", children: todos.map((todo, i) => (
+        // biome-ignore lint/suspicious/noArrayIndexKey: todo items lack stable IDs
+        _jsxs("div", { className: "flex items-start gap-2", children: [_jsx("span", { className: "shrink-0 w-4 text-center", children: todo.status === "completed" ? (_jsx("span", { className: "text-green-600 dark:text-green-400", children: "\u2713" })) : todo.status === "in_progress" ? (_jsx("span", { className: "text-blue-600 dark:text-blue-400", children: "\u25CB" })) : (_jsx("span", { className: "text-muted-foreground", children: "\u25CB" })) }), _jsx("span", { className: todo.status === "completed"
+                        ? "text-muted-foreground line-through"
+                        : todo.status === "in_progress"
+                            ? "text-foreground font-medium"
+                            : "text-muted-foreground", children: todo.content })] }, i))) }));
+}
+function TodoWriteWidget({ input, phase }) {
+    const todos = parseTodos(input);
+    if (phase === "running" || phase === "pending") {
+        return (_jsx("div", { className: "flex items-center gap-2 text-xs text-muted-foreground py-1", children: _jsx("span", { className: "animate-pulse", children: "Updating tasks\u2026" }) }));
+    }
+    if (!todos.length)
+        return null;
+    return (_jsx("div", { className: "py-1", children: _jsx(TodoList, { todos: todos }) }));
+}
+registerWidget({
+    toolName: "TodoWrite",
+    label: "Todo",
+    richLabel: (_r, input) => {
+        const todos = parseTodos(input);
+        if (!todos.length)
+            return null;
+        const done = todos.filter((t) => t.status === "completed").length;
+        return `${done}/${todos.length} done`;
+    },
+    component: TodoWriteWidget,
+});

package/dist/widgets/WebFetchWidget.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/widgets/WebFetchWidget.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Markdown from "react-markdown";
+import { markdownComponents } from "../markdown-overrides.js";
+import { registerWidget } from "../registry.js";
+function domain(url) {
+    try {
+        return new URL(url).hostname.replace(/^www\./, "");
+    }
+    catch {
+        return url;
+    }
+}
+function faviconUrl(url) {
+    try {
+        const host = new URL(url).hostname;
+        return `https://www.google.com/s2/favicons?sz=32&domain=${host}`;
+    }
+    catch {
+        return undefined;
+    }
+}
+function WebFetchInputRenderer({ input }) {
+    const url = typeof input.url === "string" ? input.url : null;
+    const prompt = typeof input.prompt === "string" ? input.prompt : null;
+    if (!url)
+        return null;
+    return (_jsxs("div", { className: "mt-1.5 space-y-1", children: [_jsxs("a", { href: url, target: "_blank", rel: "noopener noreferrer", className: "inline-flex items-center gap-1.5 rounded-full bg-accent px-2.5 py-1 text-[11px] leading-none whitespace-nowrap max-w-[280px] text-muted-foreground no-underline hover:bg-accent/80 hover:text-primary transition-colors", children: [_jsx("img", { src: faviconUrl(url), alt: "", width: 14, height: 14, className: "rounded-full shrink-0" }), _jsx("span", { className: "truncate", children: domain(url) })] }), prompt && _jsxs("div", { className: "text-xs italic text-muted-foreground", children: ["\u201C", prompt, "\u201D"] })] }));
+}
+function WebFetchWidget({ result, input, phase }) {
+    if (phase === "running" || phase === "pending") {
+        const url = typeof input.url === "string" ? input.url : null;
+        return (_jsx("div", { className: "flex items-center gap-2 text-xs text-muted-foreground py-1", children: _jsxs("span", { className: "animate-pulse", children: ["Fetching ", url ? domain(url) : "page", "\u2026"] }) }));
+    }
+    if (typeof result !== "string" || !result)
+        return null;
+    const url = typeof input.url === "string" ? input.url : null;
+    return (_jsxs("div", { className: "py-1 space-y-1.5 text-xs", children: [url && (_jsxs("a", { href: url, target: "_blank", rel: "noopener noreferrer", className: "inline-flex items-center gap-1.5 rounded-full bg-accent px-2.5 py-1 text-[11px] leading-none whitespace-nowrap max-w-[280px] text-muted-foreground no-underline hover:bg-accent/80 hover:text-primary transition-colors", children: [_jsx("img", { src: faviconUrl(url), alt: "", width: 14, height: 14, className: "rounded-full shrink-0" }), _jsx("span", { className: "truncate", children: domain(url) })] })), _jsx("div", { className: "text-foreground leading-relaxed [&>*:first-child]:mt-0 [&>*:last-child]:mb-0", children: _jsx(Markdown, { components: markdownComponents, children: result }) })] }));
+}
+registerWidget({
+    toolName: "WebFetch",
+    label: "Web Fetch",
+    richLabel: (_r, input) => {
+        const url = typeof input.url === "string" ? input.url : null;
+        return url ? domain(url) : null;
+    },
+    inputRenderer: WebFetchInputRenderer,
+    component: WebFetchWidget,
+});

package/dist/widgets/WebSearchWidget.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/widgets/WebSearchWidget.js

@@ -0,0 +1,85 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import { registerWidget } from "../registry.js";
+function extractJsonArray(str, start) {
+    if (str[start] !== "[")
+        return null;
+    let depth = 0;
+    for (let i = start; i < str.length; i++) {
+        if (str[i] === "[")
+            depth++;
+        else if (str[i] === "]") {
+            depth--;
+            if (depth === 0)
+                return str.slice(start, i + 1);
+        }
+    }
+    return null;
+}
+function parseSearchResult(raw) {
+    if (typeof raw !== "string")
+        return null;
+    const queryMatch = raw.match(/^Web search results for query: "(.+?)"\n/);
+    if (!queryMatch)
+        return null;
+    const linksIdx = raw.indexOf("Links: [");
+    if (linksIdx === -1)
+        return null;
+    const jsonStr = extractJsonArray(raw, linksIdx + 7);
+    if (!jsonStr)
+        return null;
+    try {
+        const links = JSON.parse(jsonStr);
+        return { query: queryMatch[1], links };
+    }
+    catch {
+        return null;
+    }
+}
+function faviconUrl(url) {
+    try {
+        const host = new URL(url).hostname;
+        return `https://www.google.com/s2/favicons?sz=32&domain=${host}`;
+    }
+    catch {
+        return undefined;
+    }
+}
+function domain(url) {
+    try {
+        return new URL(url).hostname.replace(/^www\./, "");
+    }
+    catch {
+        return url;
+    }
+}
+function WebSearchInputRenderer({ input }) {
+    const query = typeof input.query === "string" ? input.query : null;
+    if (!query)
+        return null;
+    return _jsxs("div", { className: "mt-1.5 text-xs italic text-muted-foreground", children: ["\u201C", query, "\u201D"] });
+}
+function WebSearchWidget({ result, phase }) {
+    const [expanded, setExpanded] = useState(false);
+    if (phase === "running" || phase === "pending") {
+        return (_jsx("div", { className: "flex items-center gap-2 text-xs text-muted-foreground py-1", children: _jsx("span", { className: "animate-pulse", children: "Searching the web\u2026" }) }));
+    }
+    const parsed = parseSearchResult(result);
+    if (!parsed)
+        return null;
+    const pills = parsed.links.map((link) => (_jsxs("a", { href: link.url, target: "_blank", rel: "noopener noreferrer", title: link.title, className: "inline-flex items-center gap-1.5 rounded-full bg-accent px-2.5 py-1 text-[11px] leading-none whitespace-nowrap max-w-[180px] text-muted-foreground no-underline hover:bg-accent/80 hover:text-primary transition-colors shrink-0", children: [_jsx("img", { src: faviconUrl(link.url), alt: "", width: 14, height: 14, className: "rounded-full shrink-0" }), _jsx("span", { className: "truncate", children: domain(link.url) })] }, link.url)));
+    if (expanded) {
+        return (_jsxs("div", { className: "py-1 space-y-1.5", children: [_jsx("div", { className: "flex flex-wrap gap-1.5", children: pills }), _jsx("button", { type: "button", onClick: () => setExpanded(false), className: "text-[10px] text-muted-foreground/60 hover:text-muted-foreground transition-colors", children: "Show less" })] }));
+    }
+    return (_jsxs("div", { className: "py-1 space-y-0.5", children: [_jsxs("div", { className: "relative", children: [_jsx("div", { className: "flex flex-nowrap gap-1.5 overflow-hidden max-h-[22px]", children: pills }), _jsx("div", { className: "pointer-events-none absolute inset-y-0 right-0 w-12 bg-gradient-to-l from-accent/50 to-transparent" })] }), _jsxs("button", { type: "button", onClick: () => setExpanded(true), className: "text-[10px] text-muted-foreground/60 hover:text-muted-foreground transition-colors pt-0.5", children: ["Show all ", parsed.links.length, " sources"] })] }));
+}
+registerWidget({
+    toolName: "WebSearch",
+    label: "Web Search",
+    richLabel: (r) => {
+        const p = parseSearchResult(r);
+        return p ? `"${p.query}" · ${p.links.length} sources` : null;
+    },
+    inputRenderer: WebSearchInputRenderer,
+    component: WebSearchWidget,
+});

package/dist/widgets/WriteWidget.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/widgets/WriteWidget.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { registerWidget } from "../registry.js";
+function basename(filePath) {
+    return filePath.split("/").pop() ?? filePath;
+}
+function WriteInputRenderer({ input }) {
+    const filePath = typeof input.file_path === "string" ? input.file_path : null;
+    const content = typeof input.content === "string" ? input.content : null;
+    if (!filePath)
+        return null;
+    return (_jsxs("div", { className: "mt-1.5 space-y-1", children: [_jsx("div", { className: "text-xs text-muted-foreground font-mono truncate", children: filePath }), content && (_jsx("pre", { className: "text-[11px] leading-snug text-muted-foreground bg-accent rounded px-2 py-1 overflow-x-auto whitespace-pre-wrap break-all max-h-[120px] overflow-y-auto", children: _jsx("code", { children: content }) }))] }));
+}
+function WriteWidget({ input, phase }) {
+    const filePath = typeof input.file_path === "string" ? input.file_path : null;
+    if (phase === "running" || phase === "pending") {
+        return (_jsx("div", { className: "flex items-center gap-2 text-xs text-muted-foreground py-1", children: _jsxs("span", { className: "animate-pulse", children: ["Writing ", filePath ? basename(filePath) : "file", "\u2026"] }) }));
+    }
+    const content = typeof input.content === "string" ? input.content : null;
+    return (_jsx("div", { className: "py-1 space-y-1.5", children: content && (_jsx("pre", { className: "text-[11px] leading-snug text-foreground bg-accent rounded px-2 py-1.5 overflow-x-auto whitespace-pre-wrap break-all max-h-[200px] overflow-y-auto", children: _jsx("code", { children: content }) })) }));
+}
+registerWidget({
+    toolName: "Write",
+    label: "Write",
+    richLabel: (_r, input) => {
+        const filePath = typeof input.file_path === "string" ? input.file_path : null;
+        return filePath ? basename(filePath) : null;
+    },
+    inputRenderer: WriteInputRenderer,
+    component: WriteWidget,
+});

package/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "@neeter/react",
+  "version": "0.6.0",
+  "description": "React components and hooks for building chat UIs on top of the Claude Agent SDK",
+  "license": "MIT",
+  "author": "Dan Leeper",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/quantumleeps/neeter.git",
+    "directory": "packages/react"
+  },
+  "type": "module",
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./theme.css": "./src/theme.css"
+  },
+  "files": [
+    "dist",
+    "src/theme.css"
+  ],
+  "dependencies": {
+    "clsx": "^2.1.1",
+    "tailwind-merge": "^3.4.0",
+    "@neeter/types": "0.6.0"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-markdown": ">=10.0.0",
+    "zustand": ">=5.0.0",
+    "immer": ">=10.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.7",
+    "immer": "^11.1.4",
+    "react": "^19.2.0",
+    "zustand": "^5.0.11"
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.json"
+  }
+}

package/src/theme.css

@@ -0,0 +1,170 @@
+/*
+ * neeter/theme.css — default theme for neeter components.
+ *
+ * Provides the CSS variable bridge (via @theme inline) and a neutral color
+ * palette so neeter components render correctly out of the box.
+ *
+ * If your app already uses shadcn/ui you don't need this file — neeter
+ * components use only standard shadcn variables plus Tailwind's built-in
+ * color palette (amber, emerald, blue) for status indicators.
+ *
+ * Usage (non-shadcn apps):
+ *   @import "@neeter/react/theme.css";
+ */
+
+/* -- Source scanning ------------------------------------------------------- */
+/* Tells Tailwind to scan neeter's component source for utility classes. */
+
+@source ".";
+
+/* -- Tailwind v4 variable bridge ------------------------------------------ */
+/* Maps CSS custom properties to Tailwind utility classes.                     */
+/* Same mappings as shadcn/tailwind.css — if you have that, skip this file.   */
+
+@theme inline {
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-warning: var(--warning);
+  --color-success: var(--success);
+  --color-info: var(--info);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+}
+
+/* -- Light mode (default) ------------------------------------------------- */
+
+:root {
+  --radius: 0.625rem;
+  --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);
+  --warning: oklch(0.795 0.184 86.047);
+  --success: oklch(0.723 0.219 149.579);
+  --info: oklch(0.623 0.214 259.815);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+}
+
+/* -- Dark mode (class-based) ---------------------------------------------- */
+
+.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);
+  --warning: oklch(0.852 0.199 91.936);
+  --success: oklch(0.792 0.209 151.711);
+  --info: oklch(0.707 0.165 254.624);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+}
+
+/* -- Dark mode (system preference) ---------------------------------------- */
+/* Activates automatically unless .light is set on :root.                     */
+
+@media (prefers-color-scheme: dark) {
+  :root:not(.light) {
+    --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);
+    --warning: oklch(0.852 0.199 91.936);
+    --success: oklch(0.792 0.209 151.711);
+    --info: oklch(0.707 0.165 254.624);
+    --border: oklch(1 0 0 / 10%);
+    --input: oklch(1 0 0 / 15%);
+    --ring: oklch(0.556 0 0);
+  }
+}
+
+/* -- Base resets ---------------------------------------------------------- */
+
+*,
+*::before,
+*::after {
+  border-color: var(--border);
+}
+
+body {
+  background-color: var(--background);
+  color: var(--foreground);
+}
+
+/* -- Scrollbar styling --------------------------------------------------- */
+
+* {
+  scrollbar-color: var(--muted-foreground) transparent;
+  scrollbar-width: thin;
+}
+
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--muted-foreground);
+  border-radius: 3px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: var(--foreground);
+}