@treenity/react 3.0.0

package/src/components/ui/sonner.tsx

@@ -0,0 +1,32 @@
+import { CircleCheckIcon, InfoIcon, Loader2Icon, OctagonXIcon, TriangleAlertIcon } from 'lucide-react';
+import { useTheme } from 'next-themes';
+import { Toaster as Sonner, type ToasterProps } from 'sonner';
+
+const Toaster = ({ ...props }: ToasterProps) => {
+  const { theme = "system" } = useTheme()
+
+  return (
+    <Sonner
+      theme={theme as ToasterProps["theme"]}
+      className="toaster group"
+      icons={{
+        success: <CircleCheckIcon className="size-4" />,
+        info: <InfoIcon className="size-4" />,
+        warning: <TriangleAlertIcon className="size-4" />,
+        error: <OctagonXIcon className="size-4" />,
+        loading: <Loader2Icon className="size-4 animate-spin" />,
+      }}
+      style={
+        {
+          "--normal-bg": "var(--popover)",
+          "--normal-text": "var(--popover-foreground)",
+          "--normal-border": "var(--border)",
+          "--border-radius": "var(--radius)",
+        } as React.CSSProperties
+      }
+      {...props}
+    />
+  )
+}
+
+export { Toaster }

package/src/components/ui/switch.tsx

@@ -0,0 +1,34 @@
+'use client';
+
+import { cn } from '#lib/utils';
+import { Switch as SwitchPrimitive } from 'radix-ui';
+import * as React from 'react';
+
+function Switch({
+  className,
+  size = "default",
+  ...props
+}: React.ComponentProps<typeof SwitchPrimitive.Root> & {
+  size?: "sm" | "default"
+}) {
+  return (
+    <SwitchPrimitive.Root
+      data-slot="switch"
+      data-size={size}
+      className={cn(
+        "peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 group/switch inline-flex shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-[1.15rem] data-[size=default]:w-8 data-[size=sm]:h-3.5 data-[size=sm]:w-6",
+        className
+      )}
+      {...props}
+    >
+      <SwitchPrimitive.Thumb
+        data-slot="switch-thumb"
+        className={cn(
+          "bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block rounded-full ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0"
+        )}
+      />
+    </SwitchPrimitive.Root>
+  )
+}
+
+export { Switch }

package/src/components/ui/textarea.tsx

@@ -0,0 +1,17 @@
+import { cn } from '#lib/utils';
+import * as React from 'react';
+
+function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
+  return (
+    <textarea
+      data-slot="textarea"
+      className={cn(
+        "border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Textarea }

package/src/components/ui/tooltip.tsx

@@ -0,0 +1,56 @@
+'use client';
+
+import { cn } from '#lib/utils';
+import { Tooltip as TooltipPrimitive } from 'radix-ui';
+import * as React from 'react';
+
+function TooltipProvider({
+  delayDuration = 0,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
+  return (
+    <TooltipPrimitive.Provider
+      data-slot="tooltip-provider"
+      delayDuration={delayDuration}
+      {...props}
+    />
+  )
+}
+
+function Tooltip({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
+  return <TooltipPrimitive.Root data-slot="tooltip" {...props} />
+}
+
+function TooltipTrigger({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
+}
+
+function TooltipContent({
+  className,
+  sideOffset = 0,
+  children,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Content
+        data-slot="tooltip-content"
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <TooltipPrimitive.Arrow className="bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
+      </TooltipPrimitive.Content>
+    </TooltipPrimitive.Portal>
+  )
+}
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }

package/src/context/index.tsx

@@ -0,0 +1,131 @@
+// Treenity React Binding — Layer 2
+// <Render> + <RenderContext> + <NodeProvider>
+// Depends on: core (resolve), React
+
+import {
+  type ComponentData,
+  hasMissResolver,
+  type NodeData,
+  resolve,
+  resolveExact,
+  subscribeRegistry,
+} from '@treenity/core/core';
+import { createContext, createElement, type FC, type ReactNode, useContext, useEffect, useState } from 'react';
+
+// ── Tree context (rendering context string) ──
+
+const TreeContext = createContext<string>('react');
+
+export function useTreeContext(): string {
+  return useContext(TreeContext);
+}
+
+export function RenderContext({ name, children }: { name: string; children: ReactNode }) {
+  return <TreeContext.Provider value={name}>{children}</TreeContext.Provider>;
+}
+
+// ── Node context — gives any renderer access to the current node ──
+
+const NodeCtx = createContext<NodeData | null>(null);
+
+export function NodeProvider({ value, children }: { value: NodeData | null; children: ReactNode }) {
+  if (!value?.$path) return null;
+  return <NodeCtx.Provider value={value}>{children}</NodeCtx.Provider>;
+}
+
+export function useCurrentNode(): NodeData {
+  const n = useContext(NodeCtx);
+  if (!n) throw new Error('useCurrentNode: no node in context');
+  return n;
+}
+
+// ── Handler type for React context ──
+// value is ComponentData (base type). NodeData IS ComponentData.
+// Renderers that need $path use usePath().
+
+export type RenderProps = {
+  value: ComponentData;
+  onChange?: (next: ComponentData) => void;
+};
+
+export type ReactHandler = FC<RenderProps>;
+
+declare module '@treenity/core/core/context' {
+  interface ContextHandlers {
+    react: ReactHandler;
+  }
+}
+
+// ── SystemFallbackView — registered by UIX when a type has no custom view ──
+// Renders default@context without going through type-specific resolve (avoids infinite loop).
+export const SystemFallbackView: FC<RenderProps> = ({ value, onChange }) => {
+  const context = useTreeContext();
+  const def = resolve('default', context, false) as FC<RenderProps> | null;
+  if (!def) return null;
+  const el = createElement(def, { value, onChange });
+  if ('$path' in value) return <NodeProvider value={value as NodeData}>{el}</NodeProvider>;
+  return el;
+};
+
+// ── <Render> — component/node-level rendering ──
+
+export function Render({ value, onChange }: RenderProps) {
+  const context = useTreeContext();
+  const type = value.$type;
+
+  // Tree actual handler in state so React Compiler can't optimize away the update
+  // (a dummy tick counter gets eliminated because its value is never read in render output)
+  const [Handler, setHandler] = useState<ReactHandler | null>(
+    () => resolveExact(type, context) as ReactHandler | null,
+  );
+
+  // Subscribe to registry bumps. When handler is registered async (UIX lazy load),
+  // the callback fires and stores the resolved handler → triggers re-render.
+  useEffect(() => {
+    const found = resolveExact(type, context) as ReactHandler | null;
+    if (found) { setHandler(() => found); return; }
+    setHandler(null); // Clear stale handler when type/context changes
+    if (hasMissResolver(context)) resolve(type, context);
+    const unsub = subscribeRegistry(() => {
+      const h = resolveExact(type, context) as ReactHandler | null;
+      if (h) setHandler(() => h);
+    });
+    return unsub;
+  }, [type, context]);
+
+  // Fallback: if no exact handler, try default/parent context resolution
+  let Final = Handler;
+  if (!Final) {
+    if (hasMissResolver(context)) {
+      resolve(type, context);
+      return null;
+    }
+    Final = resolve(type, context, false) as ReactHandler | null;
+  }
+
+  if (!Final) return null;
+  const el = createElement(Final, { value, onChange });
+  if ('$path' in value) return <NodeProvider value={value as NodeData}>{el}</NodeProvider>;
+  return el;
+}
+
+// ── <RenderField> — field-level rendering by type name ──
+// Bridge between block renderers (primitive values) and form-field handlers ({ $type, value }).
+// Wraps primitive → component shape on the way in, extracts .value on the way out.
+
+export function RenderField({ type = 'string', value, onChange, ...rest }: { type?: string; value?: unknown; onChange?: (v: unknown) => void; [k: string]: unknown }) {
+  const ctx = useTreeContext();
+  const handler = resolve(type, ctx);
+  if (!handler) return value != null ? <span>{String(value)}</span> : null;
+
+  // Already component-shaped? pass through. Otherwise wrap primitive.
+  const wrapped = value && typeof value === 'object' && '$type' in (value as object)
+    ? value
+    : { $type: type, value, ...rest };
+
+  const handleChange = onChange
+    ? (next: unknown) => onChange(next && typeof next === 'object' && 'value' in (next as object) ? (next as any).value : next)
+    : undefined;
+
+  return createElement(handler as FC<Record<string, unknown>>, { value: wrapped, onChange: handleChange });
+}

package/src/context.ts

@@ -0,0 +1 @@
+export * from './context/index.tsx';

package/src/hooks.ts

@@ -0,0 +1,208 @@
+// Treenity Hooks — reactive node access
+// usePath:     universal reactive read (URI or typed proxy)
+// useChildren: reactive children list
+// set:         persist node (optimistic + server)
+// execute:     action caller
+// watch:       universal async generator
+
+import { type Class, getComp, type TypeProxy } from '@treenity/core/comp';
+import { getComponent, type NodeData, normalizeType } from '@treenity/core/core';
+import { deriveURI, parseURI } from '@treenity/core/uri';
+import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useSyncExternalStore } from 'react';
+import * as cache from './cache';
+import { tree } from './client';
+import { trpc } from './trpc';
+
+// ── Navigation context — shell provides, views consume ──
+
+export type NavigateFn = (path: string) => void;
+const NavigateCtx = createContext<NavigateFn | null>(null);
+export const NavigateProvider = NavigateCtx.Provider;
+
+export function useNavigate(): NavigateFn {
+  const nav = useContext(NavigateCtx);
+  if (!nav) throw new Error('useNavigate: no NavigateProvider');
+  return nav;
+}
+
+// ── usePath: universal reactive hook ──
+// URI mode:   usePath('/path#comp.field')      → derived value
+// Typed mode: usePath('/path', MyClass)        → TypeProxy<T>
+// Options:    usePath('/path', { once: true })  → no server watch
+
+type PathOpts = { once?: boolean };
+
+export function usePath<T = NodeData>(uri: string | null, opts?: PathOpts): T | undefined;
+export function usePath<T extends object>(path: string, cls: Class<T>, key?: string): TypeProxy<T>;
+export function usePath<T extends object>(
+  pathOrUri: string | null,
+  clsOrOpts?: Class<T> | PathOpts,
+  key?: string,
+) {
+  const isTyped = typeof clsOrOpts === 'function';
+  const cls = isTyped ? clsOrOpts as Class<T> : undefined;
+  const opts = isTyped ? undefined : clsOrOpts as PathOpts | undefined;
+
+  const parsed = useMemo(
+    () => pathOrUri && !isTyped ? parseURI(pathOrUri) : null,
+    [pathOrUri, isTyped],
+  );
+  const path = isTyped ? pathOrUri : (parsed?.path ?? null);
+
+  const node = useSyncExternalStore(
+    useCallback((cb: () => void) => (path ? cache.subscribePath(path, cb) : () => {}), [path]),
+    useCallback(() => (path ? cache.get(path) : undefined), [path]),
+  );
+
+  useEffect(() => {
+    if (!path) return;
+    trpc.get.query({ path, watch: !opts?.once }).then((n: unknown) => {
+      if (n) cache.put(n as NodeData);
+    });
+  }, [path, opts?.once]);
+
+  return useMemo(() => {
+    if (cls && path) return makeProxy(path, cls, node, key);
+    return parsed ? deriveURI<T>(node, parsed) : node;
+  }, [node, cls, key, path, parsed?.key, parsed?.field]);
+}
+
+// ── useChildren: reactive children list ──
+
+type WatchOpts = { watch?: boolean; watchNew?: boolean; limit?: number };
+
+export function useChildren(parentPath: string, opts?: WatchOpts) {
+  const loaded = useRef<string | null>(null);
+  const gen = useSyncExternalStore(cache.subscribeSSEGen, cache.getSSEGen);
+  const prevGen = useRef(gen);
+
+  useEffect(() => {
+    const reconnected = prevGen.current !== gen;
+    if (loaded.current === parentPath && !reconnected) return;
+    loaded.current = parentPath;
+    prevGen.current = gen;
+
+    if (!cache.has(parentPath) && parentPath !== '/') {
+      trpc.get.query({ path: parentPath }).then(n => {
+        if (n) cache.put(n as NodeData);
+      });
+    }
+
+    trpc.getChildren
+      .query({ path: parentPath, limit: opts?.limit, watch: opts?.watch, watchNew: opts?.watchNew })
+      .then((result: any) => cache.putMany(result.items as NodeData[], parentPath));
+  }, [parentPath, gen, opts?.limit, opts?.watch, opts?.watchNew]);
+
+  return useSyncExternalStore(
+    useCallback((cb: () => void) => cache.subscribeChildren(parentPath, cb), [parentPath]),
+    useCallback(() => cache.getChildren(parentPath), [parentPath]),
+  );
+}
+
+// ── set: optimistic update + server persist ──
+
+export async function set(next: NodeData) {
+  cache.put(next);
+  await tree.set(next);
+  const fresh = await tree.get(next.$path);
+  if (fresh) cache.put(fresh);
+}
+
+// ── execute: action caller ──
+
+export const execute = (
+  path: string, action: string, data?: unknown, type?: string, key?: string,
+) => trpc.execute.mutate({ path, type, key, action, data });
+
+// ── Internals ──
+
+const AsyncGenFn = Object.getPrototypeOf(async function* () {}).constructor;
+
+function streamToAsyncIterable<T>(
+  input: { path: string; type?: string; key?: string; action: string; data?: unknown },
+): AsyncIterable<T> {
+  return {
+    [Symbol.asyncIterator](): AsyncIterator<T> {
+      const queue: T[] = [];
+      let notify: (() => void) | null = null;
+      let done = false;
+      let error: unknown = null;
+
+      const sub = trpc.streamAction.subscribe(input, {
+        onData(item) { queue.push(item as T); notify?.(); notify = null; },
+        onComplete() { done = true; notify?.(); notify = null; },
+        onError(err) { error = err; done = true; notify?.(); notify = null; },
+      });
+
+      return {
+        async next(): Promise<IteratorResult<T>> {
+          while (!queue.length && !done)
+            await new Promise<void>(r => { notify = r; });
+          if (error) throw error;
+          if (queue.length) return { value: queue.shift()!, done: false };
+          return { value: undefined as any, done: true };
+        },
+        async return(): Promise<IteratorResult<T>> {
+          sub.unsubscribe();
+          done = true; notify?.(); notify = null;
+          return { value: undefined as any, done: true };
+        },
+      };
+    },
+  };
+}
+
+function makeProxy<T extends object>(
+  path: string, cls: Class<T>, node: NodeData | undefined, key?: string,
+): TypeProxy<T> {
+  const type = normalizeType(cls);
+  const comp = node
+    ? (key ? getComponent(node, key) : getComp(node, cls))
+    : undefined;
+
+  return new Proxy(comp ?? {}, {
+    get: (_target, prop: string) => {
+      const fn = (cls.prototype as any)[prop];
+      if (typeof fn === 'function') {
+        if (fn instanceof AsyncGenFn)
+          return (data?: unknown) => streamToAsyncIterable({ path, type, key, action: prop, data });
+        return (data?: unknown) => trpc.execute.mutate({ path, type, key, action: prop, data });
+      }
+      return (comp as any)?.[prop];
+    },
+  }) as TypeProxy<T>;
+}
+
+// ── watch: universal async generator ──
+
+export async function* watch<T = unknown>(uri: string): AsyncGenerator<T> {
+  const parsed = parseURI(uri);
+
+  if (parsed.action) {
+    yield* streamToAsyncIterable<T>({
+      path: parsed.path,
+      key: parsed.key,
+      action: parsed.action,
+      data: parsed.data,
+    });
+    return;
+  }
+
+  const { path } = parsed;
+  const initial = await trpc.get.query({ path, watch: true });
+  if (initial) cache.put(initial as NodeData);
+
+  let resolve: (() => void) | null = null;
+  const unsub = cache.subscribePath(path, () => { resolve?.(); resolve = null; });
+
+  try {
+    yield deriveURI<T>(cache.get(path), parsed) as T;
+
+    while (true) {
+      await new Promise<void>(r => { resolve = r; });
+      yield deriveURI<T>(cache.get(path), parsed) as T;
+    }
+  } finally {
+    unsub();
+  }
+}

package/src/idb.ts

@@ -0,0 +1,80 @@
+// Treenity IDB — thin IndexedDB wrapper for client node cache
+// Raw IDB API, no dependencies. Fire-and-forget friendly.
+// Degrades silently if IDB unavailable (private browsing, SSR).
+
+import type { NodeData } from '@treenity/core/core';
+
+const DB_NAME = 'treenity';
+const DB_VERSION = 1;
+const STORE = 'nodes';
+
+export type IDBEntry = {
+  path: string;
+  data: NodeData;
+  lastUpdated: number;
+  virtualParent?: string; // only when differs from parentOf(path)
+};
+
+let dbPromise: Promise<IDBDatabase> | null = null;
+
+function getDb(): Promise<IDBDatabase> {
+  if (!dbPromise) dbPromise = new Promise((resolve, reject) => {
+    const req = indexedDB.open(DB_NAME, DB_VERSION);
+    req.onupgradeneeded = () => req.result.createObjectStore(STORE, { keyPath: 'path' });
+    req.onsuccess = () => resolve(req.result);
+    req.onerror = () => reject(req.error);
+  });
+  return dbPromise;
+}
+
+// Load all entries sorted by lastUpdated desc — most recently viewed first
+export async function loadAll(): Promise<IDBEntry[]> {
+  const d = await getDb();
+  return new Promise((resolve, reject) => {
+    const req = d.transaction(STORE, 'readonly').objectStore(STORE).getAll();
+    req.onsuccess = () => {
+      (req.result as IDBEntry[]).sort((a, b) => b.lastUpdated - a.lastUpdated);
+      resolve(req.result as IDBEntry[]);
+    };
+    req.onerror = () => reject(req.error);
+  });
+}
+
+export async function save(entry: IDBEntry): Promise<void> {
+  const d = await getDb();
+  return new Promise((resolve, reject) => {
+    const req = d.transaction(STORE, 'readwrite').objectStore(STORE).put(entry);
+    req.onsuccess = () => resolve();
+    req.onerror = () => reject(req.error);
+  });
+}
+
+export async function saveMany(entries: IDBEntry[]): Promise<void> {
+  if (!entries.length) return;
+  const d = await getDb();
+  return new Promise((resolve, reject) => {
+    const tx = d.transaction(STORE, 'readwrite');
+    const store = tx.objectStore(STORE);
+    for (const e of entries) store.put(e);
+    tx.oncomplete = () => resolve();
+    tx.onerror = () => reject(tx.error);
+  });
+}
+
+export async function del(path: string): Promise<void> {
+  const d = await getDb();
+  return new Promise((resolve, reject) => {
+    const req = d.transaction(STORE, 'readwrite').objectStore(STORE).delete(path);
+    req.onsuccess = () => resolve();
+    req.onerror = () => reject(req.error);
+  });
+}
+
+export async function clearAll(): Promise<void> {
+  const d = await getDb();
+  return new Promise((resolve, reject) => {
+    const req = d.transaction(STORE, 'readwrite').objectStore(STORE).clear();
+    req.onsuccess = () => resolve();
+    req.onerror = () => reject(req.error);
+  });
+}

package/src/index.html

@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Treenity</title>
+    <link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Manrope:wght@400;500;600;700;800&display=swap" rel="stylesheet">
+    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="main.tsx"></script>
+  </body>
+</html>

package/src/lib/minimd.css

@@ -0,0 +1,28 @@
+/* minimd — lightweight markdown rendering */
+.minimd *:first-child { margin-top: 0; }
+.minimd h1, .minimd h2, .minimd h3 { font-weight: 600; margin: 14px 0 6px; color: var(--text); }
+.minimd h1 { font-size: 1.3em; border-bottom: 1px solid var(--border); padding-bottom: 4px; }
+.minimd h2 { font-size: 1.15em; }
+.minimd h3 { font-size: 1.05em; color: var(--text-2); }
+.minimd p { margin: 4px 0; }
+.minimd ul, .minimd ol { padding-left: 20px; margin: 4px 0; }
+.minimd li { margin: 2px 0; }
+.minimd li::marker { color: var(--text-3); }
+.minimd code {
+  font-family: var(--mono); font-size: 0.88em;
+  background: var(--surface-3); padding: 1px 5px; border-radius: 4px; color: #f0abfc;
+}
+.minimd pre {
+  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
+  padding: 10px 12px; margin: 8px 0; overflow-x: auto; font-size: 12px; line-height: 1.5;
+}
+.minimd pre code { background: none; padding: 0; color: var(--text); font-size: inherit; }
+.minimd strong { font-weight: 600; }
+.minimd em { color: var(--text-2); }
+.minimd a { color: #58a6ff; text-decoration: none; }
+.minimd a:hover { text-decoration: underline; }
+.minimd blockquote { border-left: 3px solid var(--border); padding-left: 12px; color: var(--text-2); margin: 6px 0; }
+.minimd hr { border: none; border-top: 1px solid var(--border); margin: 10px 0; }
+.minimd table { border-collapse: collapse; margin: 8px 0; font-size: 12px; width: 100%; }
+.minimd th, .minimd td { border: 1px solid var(--border); padding: 6px 12px; }
+.minimd th { background: var(--surface-3); font-weight: 600; color: var(--text); text-align: left; }