@treenity/react 3.0.0 → 3.0.1

package/src/components/ui/toggle-group.tsx

@@ -0,0 +1,82 @@
+'use client';
+
+import { cn } from '#components/lib/utils';
+import { toggleVariants } from '#components/ui/toggle';
+import { type VariantProps } from 'class-variance-authority';
+import { ToggleGroup as ToggleGroupPrimitive } from 'radix-ui';
+import * as React from 'react';
+
+const ToggleGroupContext = React.createContext<
+  VariantProps<typeof toggleVariants> & {
+    spacing?: number
+  }
+>({
+  size: "default",
+  variant: "default",
+  spacing: 0,
+})
+
+function ToggleGroup({
+  className,
+  variant,
+  size,
+  spacing = 0,
+  children,
+  ...props
+}: React.ComponentProps<typeof ToggleGroupPrimitive.Root> &
+  VariantProps<typeof toggleVariants> & {
+    spacing?: number
+  }) {
+  return (
+    <ToggleGroupPrimitive.Root
+      data-slot="toggle-group"
+      data-variant={variant}
+      data-size={size}
+      data-spacing={spacing}
+      style={{ "--gap": spacing } as React.CSSProperties}
+      className={cn(
+        "group/toggle-group flex w-fit items-center gap-[--spacing(var(--gap))] rounded-md data-[spacing=default]:data-[variant=outline]:shadow-xs",
+        className
+      )}
+      {...props}
+    >
+      <ToggleGroupContext.Provider value={{ variant, size, spacing }}>
+        {children}
+      </ToggleGroupContext.Provider>
+    </ToggleGroupPrimitive.Root>
+  )
+}
+
+function ToggleGroupItem({
+  className,
+  children,
+  variant,
+  size,
+  ...props
+}: React.ComponentProps<typeof ToggleGroupPrimitive.Item> &
+  VariantProps<typeof toggleVariants>) {
+  const context = React.useContext(ToggleGroupContext)
+
+  return (
+    <ToggleGroupPrimitive.Item
+      data-slot="toggle-group-item"
+      data-variant={context.variant || variant}
+      data-size={context.size || size}
+      data-spacing={context.spacing}
+      className={cn(
+        toggleVariants({
+          variant: context.variant || variant,
+          size: context.size || size,
+        }),
+        "w-auto min-w-0 shrink-0 px-3 focus:z-10 focus-visible:z-10",
+        "data-[spacing=0]:rounded-none data-[spacing=0]:shadow-none data-[spacing=0]:first:rounded-l-md data-[spacing=0]:last:rounded-r-md data-[spacing=0]:data-[variant=outline]:border-l-0 data-[spacing=0]:data-[variant=outline]:first:border-l",
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </ToggleGroupPrimitive.Item>
+  )
+}
+
+export { ToggleGroup, ToggleGroupItem }

package/src/components/ui/toggle.tsx

@@ -0,0 +1,46 @@
+'use client';
+
+import { cn } from '#components/lib/utils';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { Toggle as TogglePrimitive } from 'radix-ui';
+import * as React from 'react';
+
+const toggleVariants = cva(
+  "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-[color,box-shadow] outline-none hover:bg-muted hover:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        outline:
+          "border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground",
+      },
+      size: {
+        default: "h-9 min-w-9 px-2",
+        sm: "h-8 min-w-8 px-1.5",
+        lg: "h-10 min-w-10 px-2.5",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Toggle({
+  className,
+  variant,
+  size,
+  ...props
+}: React.ComponentProps<typeof TogglePrimitive.Root> &
+  VariantProps<typeof toggleVariants>) {
+  return (
+    <TogglePrimitive.Root
+      data-slot="toggle"
+      className={cn(toggleVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Toggle, toggleVariants }

package/src/components/ui/tooltip.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { cn } from '#lib/utils';
+import { cn } from '#components/lib/utils';
 import { Tooltip as TooltipPrimitive } from 'radix-ui';
 import * as React from 'react';
 

package/src/context/index.tsx

@@ -2,6 +2,8 @@
 // <Render> + <RenderContext> + <NodeProvider>
 // Depends on: core (resolve), React
 
+import { execute } from '#hooks';
+import { $key, $node } from '#symbols';
 import {
   type ComponentData,
   hasMissResolver,
@@ -9,8 +11,8 @@ import {
   resolve,
   resolveExact,
   subscribeRegistry,
-} from '@treenity/core/core';
-import { createContext, createElement, type FC, type ReactNode, useContext, useEffect, useState } from 'react';
+} from '@treenity/core';
+import { createContext, createElement, type FC, type ReactNode, useContext, useEffect, useMemo, useState } from 'react';
 
 // ── Tree context (rendering context string) ──
 
@@ -28,7 +30,7 @@ export function RenderContext({ name, children }: { name: string; children: Reac
 
 const NodeCtx = createContext<NodeData | null>(null);
 
-export function NodeProvider({ value, children }: { value: NodeData | null; children: ReactNode }) {
+export function NodeProvider({ value, children }: { value: NodeData | null; children?: ReactNode }) {
   if (!value?.$path) return null;
   return <NodeCtx.Provider value={value}>{children}</NodeCtx.Provider>;
 }
@@ -39,32 +41,67 @@ export function useCurrentNode(): NodeData {
   return n;
 }
 
+// ── viewCtx — derive location context from value's symbol metadata ──
+
+export type ViewCtx = {
+  node: NodeData;
+  path: string;
+  execute(action: string, data?: unknown): Promise<unknown>;
+};
+
+export function viewCtx(value: ComponentData): ViewCtx | null {
+  const node: NodeData | undefined = (value as any)[$node];
+  if (!node) return null;
+  const key: string = (value as any)[$key] ?? '';
+  const path = key ? `${node.$path}#${key}` : node.$path;
+  return { node, path, execute: (action, data?) => execute(path, action, data) };
+}
+
 // ── 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 RenderProps<T = ComponentData> = {
+  value: T;
+  onChange?: (next: T) => void;
+  ctx?: ViewCtx | null;
+};
+
+export type ReactHandler = FC<RenderProps<any>>;
+
+/** Typed view component. Use: `const MyView: View<MyType> = ({ value, ctx }) => ...` */
+export type View<T> = FC<RenderProps<T>>;
+
+// ── useActions — proxy that turns value's symbol metadata into action calls ──
+
+type Actions<T> = {
+  [K in keyof T as T[K] extends (...args: any[]) => any ? K : never]:
+    T[K] extends (data: infer D) => any
+      ? (data: D) => Promise<unknown>
+      : () => Promise<unknown>;
 };
 
-export type ReactHandler = FC<RenderProps>;
+export function useActions<T extends ComponentData>(value: T): Actions<T> {
+  const ctx = viewCtx(value);
+  if (!ctx) throw new Error('useActions: value has no node context (missing $node symbol)');
+
+  return useMemo(() => new Proxy({} as Actions<T>, {
+    get: (_target, prop: string) => (data?: unknown) => ctx.execute(prop, data),
+  }), [ctx.path]);
+}
 
 declare module '@treenity/core/core/context' {
-  interface ContextHandlers {
-    react: ReactHandler;
+  interface ContextHandlers<T> {
+    react: FC<RenderProps<T>>;
   }
 }
 
-// ── SystemFallbackView — registered by UIX when a type has no custom view ──
+// ── UixNoView — registered by UIX when a type has no custom view yet ──
 // Renders default@context without going through type-specific resolve (avoids infinite loop).
-export const SystemFallbackView: FC<RenderProps> = ({ value, onChange }) => {
+export const UixNoView: 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;
+  return createElement(def, { value, onChange });
 };
 
 // ── <Render> — component/node-level rendering ──
@@ -73,40 +110,36 @@ 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,
-  );
+  const ctx_ = context as 'react';
+  const sync = useMemo(() => resolveExact(type, ctx_), [type, ctx_]);
+  const [async_, setAsync] = useState<ReactHandler | null>(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);
+    if (sync) return;
+    setAsync(null);
+    if (hasMissResolver(ctx_)) resolve(type, ctx_);
+
+    return subscribeRegistry(() => {
+      const h = resolveExact(type, ctx_);
+      if (h) setAsync(() => 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);
+  }, [type, ctx_, sync]);
+
+  let Handler = sync ?? async_;
+
+  if (!Handler) {
+    if (hasMissResolver(ctx_)) {
+      resolve(type, ctx_);
       return null;
     }
-    Final = resolve(type, context, false) as ReactHandler | null;
+    Handler = resolve(type, ctx_, false);
   }
 
-  if (!Final) return null;
-  const el = createElement(Final, { value, onChange });
-  if ('$path' in value) return <NodeProvider value={value as NodeData}>{el}</NodeProvider>;
-  return el;
+  if (!Handler) return null;
+
+  const ctx = viewCtx(value);
+  const el = createElement(Handler, { value, onChange, ctx });
+  return ctx?.node ? createElement(NodeProvider, { value: ctx.node }, el) : el;
 }
 
 // ── <RenderField> — field-level rendering by type name ──

package/src/events.ts

@@ -0,0 +1,81 @@
+// Server event subscription — module-level, not tied to any React component.
+// Listens to trpc.events SSE and updates the cache.
+
+import type { NodeData } from '@treenity/core';
+import { applyPatch, type Operation } from 'fast-json-patch';
+import * as cache from './cache';
+import { trpc } from './trpc';
+
+type LoadChildren = (path: string) => Promise<void>;
+
+interface EventsConfig {
+  loadChildren: LoadChildren;
+  getExpanded: () => Set<string>;
+  getSelected: () => string | null;
+}
+
+let unsub: (() => void) | null = null;
+
+export function startEvents(config: EventsConfig) {
+  stopEvents();
+
+  const { loadChildren, getExpanded, getSelected } = config;
+
+  const sub = trpc.events.subscribe(undefined as void, {
+    onData(event) {
+      if (event.type === 'reconnect') {
+        if (!event.preserved) {
+          cache.signalReconnect();
+          for (const path of getExpanded()) loadChildren(path);
+          const sel = getSelected();
+          if (sel) {
+            trpc.get.query({ path: sel, watch: true }).then(n => {
+              if (n) cache.put(n as NodeData);
+            });
+          }
+        }
+        return;
+      }
+
+      if (event.type === 'set') {
+        cache.put({ $path: event.path, ...event.node } as NodeData);
+        if (event.addVps) event.addVps.forEach((vp: string) => cache.addToParent(event.path, vp));
+        if (event.rmVps) event.rmVps.forEach((vp: string) => cache.removeFromParent(event.path, vp));
+      } else if (event.type === 'patch') {
+        const existing = cache.get(event.path);
+        if (existing && event.patches) {
+          try {
+            applyPatch(existing, event.patches as Operation[]);
+            cache.put(existing);
+          } catch (e) {
+            console.error('Failed to apply patches, fetching full node:', e);
+            trpc.get.query({ path: event.path }).then((n) => {
+              if (n) cache.put(n as NodeData);
+            });
+          }
+        } else {
+          trpc.get.query({ path: event.path }).then((n) => {
+            if (n) cache.put(n as NodeData);
+          });
+        }
+        if (event.addVps) event.addVps.forEach((vp: string) => cache.addToParent(event.path, vp));
+        if (event.rmVps) event.rmVps.forEach((vp: string) => cache.removeFromParent(event.path, vp));
+      } else if (event.type === 'remove') {
+        if (event.rmVps && event.rmVps.length > 0) {
+          event.rmVps.forEach((vp: string) => cache.removeFromParent(event.path, vp));
+        } else {
+          cache.remove(event.path);
+        }
+      }
+    },
+  });
+
+  unsub = () => sub.unsubscribe();
+}
+
+export function stopEvents() {
+  if (unsub) {
+    unsub();
+    unsub = null;
+  }
+}

package/src/fiber-tree.ts

@@ -0,0 +1,112 @@
+// Virtual read-only Tree over React Fiber.
+// Walks the live Fiber tree on each query — no state, no tracking.
+// Registered as t.mount.react — isomorphic mount, same as server-side mounts.
+
+import type { NodeData } from '@treenity/core'
+import { register } from '@treenity/core'
+import type { Tree } from '@treenity/core/tree'
+
+const PREFIX = '/local/react'
+
+interface FiberNode {
+  $path: string
+  $type: string
+  sourcePath?: string
+  children?: FiberNode[]
+}
+
+// Detect <Render> by name + props shape (resilient to HMR wrappers)
+function isRenderFiber(f: any): boolean {
+  if (!f.memoizedProps?.value?.$type) return false
+  const name = f.type?.name || f.type?.displayName || ''
+  return name === 'Render'
+}
+
+function getRootFiber() {
+  const el = document.getElementById('root')
+  if (!el) return null
+
+  // React 19 createRoot: __reactContainer$ on the container element
+  const containerKey = Object.keys(el).find(k => k.startsWith('__reactContainer$'))
+  if (containerKey) return (el as any)[containerKey]
+
+  // React 18 fallback: __reactFiber$ on first child
+  const fiberKey = Object.keys(el).find(k => k.startsWith('__reactFiber$'))
+  return fiberKey ? (el as any)[fiberKey] : null
+}
+
+function walk(fiber: any, parentPath: string, maxDepth: number, depth = 0): FiberNode[] {
+  if (depth >= maxDepth) return []
+
+  const result: FiberNode[] = []
+  let f = fiber?.child
+  let i = 0
+
+  while (f) {
+    if (isRenderFiber(f)) {
+      const v = f.memoizedProps.value
+      const path = `${parentPath}/${i}`
+      result.push({
+        $path: path,
+        $type: v.$type,
+        sourcePath: v.$path,
+        children: depth + 1 < maxDepth ? walk(f, path, maxDepth, depth + 1) : undefined,
+      })
+      i++
+    } else {
+      result.push(...walk(f, parentPath, maxDepth, depth))
+    }
+    f = f.sibling
+  }
+
+  return result
+}
+
+function scan(depth = 1): FiberNode[] {
+  const root = getRootFiber()
+  return root ? walk(root, PREFIX, depth) : []
+}
+
+function findByPath(nodes: FiberNode[], path: string): FiberNode | undefined {
+  for (const n of nodes) {
+    if (n.$path === path) return n
+    if (n.children) {
+      const found = findByPath(n.children, path)
+      if (found) return found
+    }
+  }
+}
+
+function toNode(n: FiberNode): NodeData {
+  return { $path: n.$path, $type: n.$type, sourcePath: n.sourcePath } as NodeData
+}
+
+export function createFiberTree(): Tree {
+  return {
+    async get(path) {
+      if (path === PREFIX) return { $path: PREFIX, $type: 'dir' } as NodeData
+      const node = findByPath(scan(100), path)
+      return node ? toNode(node) : undefined
+    },
+
+    async getChildren(path, opts?) {
+      const depth = opts?.depth ?? 1
+
+      if (path === PREFIX) {
+        const nodes = scan(depth)
+        return { items: nodes.map(toNode), total: nodes.length }
+      }
+
+      const parent = findByPath(scan(100), path)
+      const children = parent?.children ?? []
+      return { items: children.map(toNode), total: children.length }
+    },
+
+    async set() { throw new Error('fiber tree is read-only') },
+    async remove() { throw new Error('fiber tree is read-only') },
+    async patch() { throw new Error('fiber tree is read-only') },
+  }
+}
+
+// Mount adapter — same pattern as t.mount.fs, t.mount.mongo
+register('t.mount.react', 'mount', () => createFiberTree())

package/src/hooks.ts

@@ -5,10 +5,19 @@
 // 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 { getComponent, type NodeData, normalizeType, resolve } from '@treenity/core';
+import { type Class, type TypeProxy } from '@treenity/core/comp';
 import { deriveURI, parseURI } from '@treenity/core/uri';
-import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useSyncExternalStore } from 'react';
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  useSyncExternalStore,
+} from 'react';
 import * as cache from './cache';
 import { tree } from './client';
 import { trpc } from './trpc';
@@ -50,7 +59,7 @@ export function usePath<T extends object>(
   const path = isTyped ? pathOrUri : (parsed?.path ?? null);
 
   const node = useSyncExternalStore(
-    useCallback((cb: () => void) => (path ? cache.subscribePath(path, cb) : () => {}), [path]),
+    useCallback((cb: () => void) => (path ? cache.subscribePath(path, cb) : () => { }), [path]),
     useCallback(() => (path ? cache.get(path) : undefined), [path]),
   );
 
@@ -111,12 +120,78 @@ export async function set(next: NodeData) {
 // ── execute: action caller ──
 
 export const execute = (
-  path: string, action: string, data?: unknown, type?: string, key?: string,
-) => trpc.execute.mutate({ path, type, key, action, data });
+  pathOrUri: string, action: string, data?: unknown, type?: string, key?: string,
+) => {
+  let path = pathOrUri;
+  if (!key && pathOrUri.includes('#')) {
+    const parsed = parseURI(pathOrUri);
+    path = parsed.path;
+    key = parsed.key;
+  }
+
+  // Optimistic: resolve class from cache + registry, predict locally
+  const cached = cache.get(path);
+  if (cached) {
+    const compType = type ?? cached.$type;
+    const cls = resolve(compType, 'class');
+    if (cls) {
+      const fn = cls.prototype?.[action];
+      if (fn) predictOptimistic(path, cls, key, fn, data);
+    }
+  }
+
+  return trpc.execute.mutate({ path, type, key, action, data });
+};
+
+// ── useCanWrite: ACL-based write permission check ──
+
+const W = 2;
+const permCache = new Map<string, { perm: number; ts: number }>();
+const PERM_TTL = 30_000; // 30s cache
+
+export function useCanWrite(path: string | null): boolean {
+  const [perm, setPerm] = useState<number>(0);
+
+  useEffect(() => {
+    if (!path) return;
+    const cached = permCache.get(path);
+    if (cached && Date.now() - cached.ts < PERM_TTL) {
+      setPerm(cached.perm);
+      return;
+    }
+    trpc.getPerm.query({ path }).then((p) => {
+      permCache.set(path, { perm: p, ts: Date.now() });
+      setPerm(p);
+    }).catch(() => setPerm(0));
+  }, [path]);
+
+  return (perm & W) !== 0;
+}
 
 // ── Internals ──
 
-const AsyncGenFn = Object.getPrototypeOf(async function* () {}).constructor;
+const AsyncGenFn = Object.getPrototypeOf(async function* () { }).constructor;
+const AsyncFn = Object.getPrototypeOf(async function () { }).constructor;
+
+/** Optimistic prediction: run a sync method locally on a cloned cached node */
+export function predictOptimistic<T extends object>(
+  path: string, cls: Class<T>, key: string | undefined,
+  fn: Function, data: unknown,
+): void {
+  if (fn instanceof AsyncFn) return;
+
+  const cached = cache.get(path);
+  if (!cached) return;
+
+  try {
+    const draft = structuredClone(cached);
+    const target = getComponent(draft, cls, key);
+    if (!target) return;
+
+    fn.call(target, data);
+    cache.put(draft);
+  } catch { /* prediction failed — server-only */ }
+}
 
 function streamToAsyncIterable<T>(
   input: { path: string; type?: string; key?: string; action: string; data?: unknown },
@@ -157,7 +232,7 @@ function makeProxy<T extends object>(
 ): TypeProxy<T> {
   const type = normalizeType(cls);
   const comp = node
-    ? (key ? getComponent(node, key) : getComp(node, cls))
+    ? (key ? getComponent(node, key) : getComponent(node, cls))
     : undefined;
 
   return new Proxy(comp ?? {}, {
@@ -166,7 +241,11 @@ function makeProxy<T extends object>(
       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 (data?: unknown) => {
+          predictOptimistic(path, cls, key, fn, data);
+          return trpc.execute.mutate({ path, type, key, action: prop, data });
+        };
       }
       return (comp as any)?.[prop];
     },

package/src/idb.ts

@@ -2,7 +2,7 @@
 // Raw IDB API, no dependencies. Fire-and-forget friendly.
 // Degrades silently if IDB unavailable (private browsing, SSR).
 
-import type { NodeData } from '@treenity/core/core';
+import type { NodeData } from '@treenity/core';
 
 const DB_NAME = 'treenity';
 const DB_VERSION = 1;

package/src/lib/to-plain.ts

@@ -0,0 +1,21 @@
+// Deep-clone any value into a plain JSON-safe object.
+// Strips valtio proxies, preserves Dates, drops functions/symbols.
+
+export function toPlain<T>(value: T): T {
+  if (value === null || value === undefined) return value;
+
+  if (value instanceof Date) return new Date(value.getTime()) as T;
+
+  if (Array.isArray(value)) return value.map(toPlain) as T;
+
+  if (typeof value === 'object') {
+    const out: Record<string, unknown> = {};
+    for (const [k, v] of Object.entries(value)) {
+      if (typeof v === 'function' || typeof v === 'symbol') continue;
+      out[k] = toPlain(v);
+    }
+    return out as T;
+  }
+
+  return value;
+}

package/src/main.tsx

@@ -5,7 +5,8 @@ import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
 import { App } from './App';
 import './load-client';
-import './style.css';
+import { Toaster } from './components/ui/sonner';
+import './root.css';
 
 enablePatches();
 
@@ -17,6 +18,7 @@ createRoot(root).render(
   <StrictMode>
     <QueryClientProvider client={queryClient}>
       <App />
+      <Toaster />
     </QueryClientProvider>
   </StrictMode>,
 );