@treenity/react 3.0.0 → 3.0.2

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,121 @@
+// 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;
+}
+
+// ── SSE connection events (consumed by App.tsx) ──
+
+export const SSE_CONNECTED = 'sse-connected';
+export const SSE_DISCONNECTED = 'sse-disconnected';
+
+let unsub: (() => void) | null = null;
+let reconnectTimer: ReturnType<typeof setTimeout> | null = null;
+let lastConfig: EventsConfig | null = null;
+
+export function startEvents(config: EventsConfig) {
+  stopEvents();
+  lastConfig = config;
+
+  const { loadChildren, getExpanded, getSelected } = config;
+
+  const sub = trpc.events.subscribe(undefined as void, {
+    onStarted() {
+      window.dispatchEvent(new Event(SSE_CONNECTED));
+    },
+    onConnectionStateChange(state: { state: string }) {
+      if (state.state === 'connecting') {
+        window.dispatchEvent(new Event(SSE_DISCONNECTED));
+      } else if (state.state === 'pending') {
+        // 'pending' = connected and waiting for data — SSE is alive
+        window.dispatchEvent(new Event(SSE_CONNECTED));
+      }
+    },
+    onError(err: unknown) {
+      console.error('[sse] subscription error (non-retryable):', err);
+      window.dispatchEvent(new Event(SSE_DISCONNECTED));
+      // tRPC exhausted retries — schedule a single delayed re-subscribe
+      scheduleResubscribe();
+    },
+    onStopped() {
+      // Server closed the stream — schedule re-subscribe
+      window.dispatchEvent(new Event(SSE_DISCONNECTED));
+      scheduleResubscribe();
+    },
+    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 {
+            const patched = structuredClone(existing);
+            applyPatch(patched, event.patches as Operation[]);
+            cache.put(patched);
+          } 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();
+}
+
+const RESUBSCRIBE_DELAY = 5_000;
+
+function scheduleResubscribe() {
+  if (reconnectTimer || !lastConfig) return;
+  console.log(`[sse] will re-subscribe in ${RESUBSCRIBE_DELAY}ms`);
+  reconnectTimer = setTimeout(() => {
+    reconnectTimer = null;
+    if (lastConfig) startEvents(lastConfig);
+  }, RESUBSCRIBE_DELAY);
+}
+
+export function stopEvents() {
+  if (reconnectTimer) { clearTimeout(reconnectTimer); reconnectTimer = null; }
+  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())