@treenity/react 3.0.0

package/src/cache.test.ts

@@ -0,0 +1,139 @@
+// Cache contract tests — plain Map implementation
+
+import assert from 'node:assert';
+import { beforeEach, describe, it } from 'node:test';
+import * as cache from './cache';
+
+describe('cache', () => {
+  beforeEach(() => {
+    cache.clear();
+  });
+
+  it('put() creates entry, get() returns node', () => {
+    cache.put({ $path: '/a', $type: 'x', v: 1 } as any);
+    const n = cache.get('/a');
+    assert.ok(n);
+    assert.strictEqual(n!.v, 1);
+  });
+
+  it('second put() updates value', () => {
+    cache.put({ $path: '/a', $type: 'x', v: 1 } as any);
+    cache.put({ $path: '/a', $type: 'x', v: 2 } as any);
+    const n = cache.get('/a');
+    assert.strictEqual(n!.v, 2);
+  });
+
+  it('put() with fewer keys replaces node', () => {
+    cache.put({ $path: '/a', $type: 'x', old: 1, keep: 2 } as any);
+    cache.put({ $path: '/a', $type: 'x', keep: 3 } as any);
+    const n = cache.get('/a') as any;
+    assert.strictEqual(n.keep, 3);
+    assert.strictEqual('old' in n, false);
+  });
+
+  it('subscribePath fires on put()', () => {
+    let called = 0;
+    cache.subscribePath('/a', () => called++);
+    cache.put({ $path: '/a', $type: 'x' } as any);
+    assert.strictEqual(called, 1);
+  });
+
+  it('subscribeChildren fires on child put()', () => {
+    let called = 0;
+    cache.subscribeChildren('/', () => called++);
+    cache.put({ $path: '/child', $type: 'x' } as any);
+    assert.ok(called >= 1);
+  });
+
+  it('getSnapshot() returns plain cloneable object', () => {
+    cache.put({ $path: '/a', $type: 'x', v: 42 } as any);
+    const s = cache.getSnapshot('/a');
+    assert.ok(s);
+    assert.strictEqual(s!.v, 42);
+    const cloned = structuredClone(s);
+    assert.strictEqual(cloned.v, 42);
+  });
+
+  it('getSnapshot() returns a copy, not the same reference', () => {
+    cache.put({ $path: '/a', $type: 'x', v: 42 } as any);
+    const s = cache.getSnapshot('/a');
+    assert.notStrictEqual(s, cache.get('/a'));
+  });
+
+  it('notifyPath fires path subs', () => {
+    cache.put({ $path: '/a', $type: 'x' } as any);
+    let called = 0;
+    cache.subscribePath('/a', () => called++);
+    cache.notifyPath('/a');
+    assert.strictEqual(called, 1);
+  });
+
+  it('getChildren returns sorted children', () => {
+    cache.put({ $path: '/b', $type: 'x' } as any);
+    cache.put({ $path: '/a', $type: 'x' } as any);
+    const kids = cache.getChildren('/');
+    assert.strictEqual(kids.length, 2);
+    assert.strictEqual(kids[0].$path, '/a');
+    assert.strictEqual(kids[1].$path, '/b');
+  });
+
+  it('remove() deletes node and fires subs', () => {
+    cache.put({ $path: '/a', $type: 'x' } as any);
+    let called = 0;
+    cache.subscribePath('/a', () => called++);
+    cache.remove('/a');
+    assert.strictEqual(cache.get('/a'), undefined);
+    assert.strictEqual(called, 1);
+  });
+
+  it('putMany() stores all nodes, fires subs', () => {
+    let parentFired = 0;
+    cache.subscribeChildren('/p', () => parentFired++);
+    cache.putMany([
+      { $path: '/p/a', $type: 'x' } as any,
+      { $path: '/p/b', $type: 'x' } as any,
+    ], '/p');
+    assert.ok(cache.get('/p/a'));
+    assert.ok(cache.get('/p/b'));
+    assert.ok(parentFired >= 1);
+  });
+
+  it('direct mutation of get() result changes cached value', () => {
+    cache.put({ $path: '/a', $type: 'x', v: 1 } as any);
+    const n = cache.get('/a') as any;
+    n.v = 99;
+    assert.strictEqual(cache.get('/a')!.v, 99);
+  });
+
+  it('onNodePut callback fires on every put()', () => {
+    const paths: string[] = [];
+    cache.onNodePut((p) => paths.push(p));
+    cache.put({ $path: '/a', $type: 'x' } as any);
+    cache.put({ $path: '/b', $type: 'x' } as any);
+    assert.deepStrictEqual(paths, ['/a', '/b']);
+  });
+
+  it('nested component update works', () => {
+    cache.put({ $path: '/a', $type: 'x', comp: { $type: 'y', count: 0, label: 'hi' } } as any);
+    cache.put({ $path: '/a', $type: 'x', comp: { $type: 'y', count: 5, label: 'hi' } } as any);
+    assert.strictEqual((cache.get('/a') as any).comp.count, 5);
+  });
+
+  it('adding a new nested component', () => {
+    cache.put({ $path: '/a', $type: 'x' } as any);
+    cache.put({ $path: '/a', $type: 'x', comp: { $type: 'y', v: 1 } } as any);
+    assert.strictEqual((cache.get('/a') as any).comp.v, 1);
+  });
+
+  it('removing a nested component', () => {
+    cache.put({ $path: '/a', $type: 'x', comp: { $type: 'y', v: 1 } } as any);
+    cache.put({ $path: '/a', $type: 'x' } as any);
+    assert.strictEqual('comp' in (cache.get('/a') as any), false);
+  });
+
+  it('array replaced wholesale', () => {
+    cache.put({ $path: '/a', $type: 'x', items: [1, 2, 3] } as any);
+    cache.put({ $path: '/a', $type: 'x', items: [4, 5] } as any);
+    assert.deepStrictEqual([...(cache.get('/a') as any).items], [4, 5]);
+  });
+});

package/src/cache.ts

@@ -0,0 +1,244 @@
+// Treenity Client Cache — reactive node store
+// useSyncExternalStore-friendly: stable snapshots, targeted notifications
+// IDB persistence: fire-and-forget writes, hydrate() on startup.
+
+import type { NodeData } from '@treenity/core/core';
+import * as idb from './idb';
+
+type Sub = () => void;
+
+const nodes = new Map<string, NodeData>();
+// Explicit parent -> children index. This allows nodes to have their real $path
+// while still appearing as children of virtual folders like query mounts.
+const parentIndex = new Map<string, Set<string>>();
+const pathSubs = new Map<string, Set<Sub>>();
+const childSubs = new Map<string, Set<Sub>>();
+const globalSubs = new Set<Sub>();
+const childSnap = new Map<string, NodeData[]>();
+let version = 0;
+
+// lastUpdated: timestamp of last put() per path.
+// Used for reconnect refresh ordering (most recently viewed first).
+const lastUpdated = new Map<string, number>();
+export const getLastUpdated = (path: string) => lastUpdated.get(path) ?? 0;
+
+function addSub(map: Map<string, Set<Sub>>, key: string, cb: Sub): () => void {
+  if (!map.has(key)) map.set(key, new Set());
+  map.get(key)!.add(cb);
+  return () => {
+    const s = map.get(key);
+    if (s) {
+      s.delete(cb);
+      if (!s.size) map.delete(key);
+    }
+  };
+}
+
+function fire(map: Map<string, Set<Sub>>, key: string) {
+  const s = map.get(key);
+  if (s) for (const cb of s) cb();
+}
+
+function bump() {
+  version++;
+  for (const cb of globalSubs) cb();
+}
+
+function parentOf(p: string): string | null {
+  if (p === '/') return null;
+  const i = p.lastIndexOf('/');
+  return i <= 0 ? '/' : p.slice(0, i);
+}
+
+// ── Reads ──
+
+export const get = (path: string) => nodes.get(path);
+export const has = (path: string) => nodes.has(path);
+export const size = () => nodes.size;
+export const getVersion = () => version;
+
+export function getChildren(parent: string): NodeData[] {
+  let snap = childSnap.get(parent);
+  if (snap) return snap;
+  
+  const out: NodeData[] = [];
+  const children = parentIndex.get(parent);
+  
+  if (children) {
+    for (const p of children) {
+      const n = nodes.get(p);
+      if (n) out.push(n);
+    }
+  } else {
+    // Fallback: If not indexed explicitly, find children by string prefix 
+    const prefix = parent === '/' ? '/' : parent + '/';
+    for (const [p, n] of nodes) {
+      if (p === parent || !p.startsWith(prefix)) continue;
+      const rest = parent === '/' ? p.slice(1) : p.slice(prefix.length);
+      if (rest && !rest.includes('/')) out.push(n);
+    }
+  }
+  
+  out.sort((a, b) => a.$path.localeCompare(b.$path));
+  childSnap.set(parent, out);
+  return out;
+}
+
+// ── Parent Index Management ──
+
+export function addToParent(path: string, parent: string) {
+  if (!parentIndex.has(parent)) parentIndex.set(parent, new Set());
+  if (!parentIndex.get(parent)!.has(path)) {
+    parentIndex.get(parent)!.add(path);
+    childSnap.delete(parent);
+    fire(childSubs, parent);
+    bump();
+  }
+}
+
+export function removeFromParent(path: string, parent: string) {
+  const children = parentIndex.get(parent);
+  if (children && children.has(path)) {
+    children.delete(path);
+    childSnap.delete(parent);
+    fire(childSubs, parent);
+    bump();
+  }
+}
+
+// ── Writes ──
+
+export function put(node: NodeData, virtualParent?: string) {
+  nodes.set(node.$path, node);
+  const p = virtualParent ?? parentOf(node.$path);
+  if (p !== null) {
+    if (!parentIndex.has(p)) parentIndex.set(p, new Set());
+    parentIndex.get(p)!.add(node.$path);
+    childSnap.delete(p);
+  }
+  fire(pathSubs, node.$path);
+  if (p !== null) fire(childSubs, p);
+  bump();
+  for (const h of putHooks) h(node.$path);
+
+  const ts = Date.now();
+  lastUpdated.set(node.$path, ts);
+  idb.save({ path: node.$path, data: node, lastUpdated: ts, virtualParent }).catch(() => {});
+}
+
+export function putMany(items: NodeData[], virtualParent?: string) {
+  const dirty = new Set<string>();
+  if (virtualParent) {
+    if (!parentIndex.has(virtualParent)) parentIndex.set(virtualParent, new Set());
+    dirty.add(virtualParent);
+  }
+  const ts = Date.now();
+  const idbEntries: idb.IDBEntry[] = [];
+  for (const n of items) {
+    nodes.set(n.$path, n);
+    lastUpdated.set(n.$path, ts);
+    fire(pathSubs, n.$path);
+    const p = virtualParent ?? parentOf(n.$path);
+    if (p !== null) {
+      if (!parentIndex.has(p)) parentIndex.set(p, new Set());
+      parentIndex.get(p)!.add(n.$path);
+      dirty.add(p);
+      childSnap.delete(p);
+    }
+    idbEntries.push({ path: n.$path, data: n, lastUpdated: ts, virtualParent });
+  }
+  for (const p of dirty) {
+    childSnap.delete(p);
+    fire(childSubs, p);
+  }
+  if (items.length || dirty.size) bump();
+  idb.saveMany(idbEntries).catch(() => {});
+}
+
+export function remove(path: string, virtualParent?: string) {
+  nodes.delete(path);
+  lastUpdated.delete(path);
+  const p = virtualParent ?? parentOf(path);
+  if (p !== null) {
+    parentIndex.get(p)?.delete(path);
+    childSnap.delete(p);
+  }
+  fire(pathSubs, path);
+  if (p !== null) fire(childSubs, p);
+  bump();
+  idb.del(path).catch(() => {});
+}
+
+// ── Subscriptions ──
+
+export const subscribePath = (path: string, cb: Sub) => addSub(pathSubs, path, cb);
+export const subscribeChildren = (parent: string, cb: Sub) => addSub(childSubs, parent, cb);
+export const subscribeGlobal = (cb: Sub): (() => void) => {
+  globalSubs.add(cb);
+  return () => globalSubs.delete(cb);
+};
+
+// ── Per-put hook (used by bind engine) ──
+const putHooks = new Set<(path: string) => void>();
+export function onNodePut(cb: (path: string) => void): () => void {
+  putHooks.add(cb);
+  return () => putHooks.delete(cb);
+}
+
+// ── Extra accessors ──
+export function notifyPath(path: string) { fire(pathSubs, path); }
+export function getSnapshot(path: string): NodeData | undefined {
+  const node = nodes.get(path);
+  if (!node) return undefined;
+  return structuredClone(node);
+}
+
+// ── SSE Reconnect ──
+// Generation counter — bumped when SSE reconnects with preserved=false.
+// useChildren depends on this to re-fetch and re-register watches.
+let sseGen = 0;
+const genSubs = new Set<Sub>();
+export const getSSEGen = () => sseGen;
+export function subscribeSSEGen(cb: Sub) {
+  genSubs.add(cb);
+  return () => genSubs.delete(cb);
+}
+export function signalReconnect() {
+  sseGen++;
+  for (const cb of genSubs) cb();
+}
+
+// ── Bulk ──
+
+export function clear() {
+  nodes.clear();
+  parentIndex.clear();
+  childSnap.clear();
+  lastUpdated.clear();
+  bump();
+  idb.clearAll().catch(() => {});
+}
+
+// Populate cache from IDB on startup — no IDB writes triggered.
+// Call before first render for instant stale paint.
+export async function hydrate(): Promise<void> {
+  try {
+    const entries = await idb.loadAll();
+    for (const { data, lastUpdated: ts, virtualParent } of entries) {
+      nodes.set(data.$path, data);
+      lastUpdated.set(data.$path, ts);
+      const p = virtualParent ?? parentOf(data.$path);
+      if (p !== null) {
+        if (!parentIndex.has(p)) parentIndex.set(p, new Set());
+        parentIndex.get(p)!.add(data.$path);
+        childSnap.delete(p);
+      }
+    }
+    if (entries.length) bump();
+  } catch {
+    // IDB unavailable (private browsing, etc.) — continue without persistence
+  }
+}
+
+// Expose raw Map for Tree component (read-only contract)
+export const raw = () => nodes;

package/src/client-tree.test.ts

@@ -0,0 +1,116 @@
+import type { NodeData } from '@treenity/core/core';
+import assert from 'node:assert/strict';
+import { describe, it } from 'node:test';
+import { createClientTree } from './client-tree';
+
+// ── Mock tRPC client ──
+
+function createMockTrpc(backing: Map<string, NodeData>) {
+  let calls = 0;
+
+  const mock = {
+    get calls() { return calls; },
+    resetCalls() { calls = 0; },
+
+    get: {
+      query: async ({ path }: { path: string }) => {
+        calls++;
+        return backing.get(path);
+      },
+    },
+    getChildren: {
+      query: async ({ path }: { path: string; limit?: number; offset?: number }) => {
+        calls++;
+        const prefix = path === '/' ? '/' : path + '/';
+        const items = [...backing.values()].filter(
+          n => n.$path.startsWith(prefix) && n.$path !== path
+            && n.$path.slice(prefix.length).indexOf('/') === -1,
+        );
+        return { items, total: items.length };
+      },
+    },
+    set: {
+      mutate: async ({ node }: { node: Record<string, unknown> }) => {
+        calls++;
+        backing.set(node.$path as string, node as NodeData);
+      },
+    },
+    remove: {
+      mutate: async ({ path }: { path: string }) => {
+        calls++;
+        backing.delete(path);
+      },
+    },
+  };
+
+  return mock;
+}
+
+// ── Tests ──
+
+describe('createClientTree — unified client tree', () => {
+  it('/local/* paths stay in memory, never hit tRPC', async () => {
+    const mock = createMockTrpc(new Map());
+    const { tree: store } = createClientTree(mock as any);
+
+    await store.set({ $path: '/local/ui/theme', $type: 'theme', dark: true } as NodeData);
+    mock.resetCalls();
+
+    const node = await store.get('/local/ui/theme');
+    assert.equal(mock.calls, 0, 'tRPC should not be called for /local paths');
+    assert.equal(node?.$type, 'theme');
+    assert.equal((node as any).dark, true);
+  });
+
+  it('non-local paths route through tRPC', async () => {
+    const backing = new Map<string, NodeData>();
+    backing.set('/orders/1', { $path: '/orders/1', $type: 'order', total: 42 } as NodeData);
+    const mock = createMockTrpc(backing);
+    const { tree: store } = createClientTree(mock as any);
+
+    const node = await store.get('/orders/1');
+    assert.ok(mock.calls > 0, 'tRPC should be called for remote paths');
+    assert.equal((node as any).total, 42);
+  });
+
+  it('getChildren merges local and remote children', async () => {
+    const backing = new Map<string, NodeData>();
+    backing.set('/cloud', { $path: '/cloud', $type: 'dir' } as NodeData);
+    const mock = createMockTrpc(backing);
+    const { tree: store } = createClientTree(mock as any);
+
+    // Write a local node
+    await store.set({ $path: '/local', $type: 'dir' } as NodeData);
+
+    // getChildren('/') should return both
+    const { items } = await store.getChildren('/');
+    const paths = items.map((n: { $path: string }) => n.$path).sort();
+    assert.ok(paths.includes('/local'), 'should include local children');
+    assert.ok(paths.includes('/cloud'), 'should include remote children');
+  });
+
+  it('remove /local/* does not call tRPC', async () => {
+    const mock = createMockTrpc(new Map());
+    const { tree: store } = createClientTree(mock as any);
+
+    await store.set({ $path: '/local/temp', $type: 'tmp' } as NodeData);
+    mock.resetCalls();
+
+    await store.remove('/local/temp');
+    // filterStore tries both, but remote remove is harmless no-op
+    const node = await store.get('/local/temp');
+    assert.equal(node, undefined, '/local/temp should be gone');
+  });
+
+  it('cached remote: second get skips tRPC', async () => {
+    const backing = new Map<string, NodeData>();
+    backing.set('/x', { $path: '/x', $type: 'test' } as NodeData);
+    const mock = createMockTrpc(backing);
+    const { tree: store } = createClientTree(mock as any);
+
+    await store.get('/x'); // populates cache
+    mock.resetCalls();
+    await store.get('/x'); // should hit cache
+    assert.equal(mock.calls, 0, 'second get should come from cache');
+  });
+});

package/src/client-tree.ts

@@ -0,0 +1,24 @@
+// Unified Client Tree — the browser as a peer node.
+// /local/* paths live in browser memory only (never hit the network).
+// Everything else routes through tRPC to the server.
+// Same Tree interface everywhere — components don't know where data lives.
+
+import { createFilterTree, createMemoryTree } from '@treenity/core/tree';
+import { withCache } from '@treenity/core/tree/cache';
+import { createRemoteTree } from './remote-tree';
+import type { trpc } from './trpc';
+
+type TrpcClient = typeof trpc;
+
+export function createClientTree(client: TrpcClient) {
+  const local = createMemoryTree();
+  const remote = withCache(createRemoteTree(client));
+
+  const tree = createFilterTree(
+    local,
+    remote,
+    (node) => node.$path.startsWith('/local'),
+  );
+
+  return { tree, local, remote };
+}

package/src/client.ts

@@ -0,0 +1,11 @@
+/// <reference types="vite/client" />
+// The browser peer node — singleton client tree.
+// /local/* in memory, everything else via tRPC.
+
+import { createClientTree } from './client-tree';
+import { trpc } from './trpc';
+
+export const { tree, local, remote } = createClientTree(trpc);
+
+// Dev: expose tree for console debugging (e.g. __tree.get('/local/ui/theme'))
+if (import.meta.env?.DEV) (globalThis as any).__tree = tree;

package/src/components/ui/accordion.tsx

@@ -0,0 +1,63 @@
+import { cn } from '#lib/utils';
+import { ChevronDownIcon } from 'lucide-react';
+import { Accordion as AccordionPrimitive } from 'radix-ui';
+import * as React from 'react';
+
+function Accordion({
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Root>) {
+  return <AccordionPrimitive.Root data-slot="accordion" {...props} />
+}
+
+function AccordionItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Item>) {
+  return (
+    <AccordionPrimitive.Item
+      data-slot="accordion-item"
+      className={cn("border-b last:border-b-0", 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(
+          "focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <ChevronDownIcon className="text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" />
+      </AccordionPrimitive.Trigger>
+    </AccordionPrimitive.Header>
+  )
+}
+
+function AccordionContent({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Content>) {
+  return (
+    <AccordionPrimitive.Content
+      data-slot="accordion-content"
+      className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"
+      {...props}
+    >
+      <div className={cn("pt-0 pb-4", className)}>{children}</div>
+    </AccordionPrimitive.Content>
+  )
+}
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }

package/src/components/ui/badge.tsx

@@ -0,0 +1,27 @@
+import { cn } from '#lib/utils';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { type HTMLAttributes } from 'react';
+
+const badgeVariants = cva(
+  'inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
+  {
+    variants: {
+      variant: {
+        default: 'border-transparent bg-primary text-primary-foreground shadow',
+        secondary: 'border-transparent bg-secondary text-secondary-foreground',
+        destructive: 'border-transparent bg-destructive text-destructive-foreground shadow',
+        outline: 'text-foreground',
+      },
+    },
+    defaultVariants: { variant: 'default' },
+  },
+);
+
+export interface BadgeProps
+  extends HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return <div className={cn(badgeVariants({ variant }), className)} {...props} />;
+}
+
+export { Badge, badgeVariants };

package/src/components/ui/button.tsx

@@ -0,0 +1,44 @@
+import { cn } from '#lib/utils';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { type ButtonHTMLAttributes, forwardRef } from 'react';
+
+const buttonVariants = cva(
+  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+  {
+    variants: {
+      variant: {
+        default: 'bg-primary text-primary-foreground shadow hover:bg-primary/90',
+        destructive: 'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
+        outline:
+          'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground',
+        outlined:
+          'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground',
+        secondary: 'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',
+        ghost: 'hover:bg-accent hover:text-accent-foreground',
+        link: 'text-primary underline-offset-4 hover:underline',
+        primary: 'bg-primary text-primary-foreground shadow hover:bg-primary/90',
+        transparent: 'bg-transparent hover:bg-accent hover:text-accent-foreground',
+      },
+      size: {
+        default: 'h-9 px-4 py-2',
+        sm: 'h-8 rounded-md px-3 text-xs',
+        lg: 'h-10 rounded-md px-8',
+        icon: 'h-9 w-9',
+        'icon-sm': 'h-8 w-8',
+      },
+    },
+    defaultVariants: { variant: 'default', size: 'default' },
+  },
+);
+
+export interface ButtonProps
+  extends ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {}
+
+const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, ...props }, ref) => (
+    <button className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props} />
+  ),
+);
+Button.displayName = 'Button';
+
+export { Button, buttonVariants };

package/src/components/ui/checkbox.tsx

@@ -0,0 +1,19 @@
+import { cn } from '#lib/utils';
+import { forwardRef, type InputHTMLAttributes } from 'react';
+
+const Checkbox = forwardRef<HTMLInputElement, InputHTMLAttributes<HTMLInputElement>>(
+  ({ className, ...props }, ref) => (
+    <input
+      type="checkbox"
+      className={cn(
+        'h-4 w-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 accent-primary',
+        className,
+      )}
+      ref={ref}
+      {...props}
+    />
+  ),
+);
+Checkbox.displayName = 'Checkbox';
+
+export { Checkbox };