@treenity/react 3.0.0

package/src/mods/treenity/seed.ts

@@ -0,0 +1,56 @@
+import { type NodeData, R, S } from '@treenity/core/core';
+import { registerPrefab } from '@treenity/core/mod';
+
+registerPrefab('core', 'seed', [
+  { $path: 'sys', $type: 'treenity.system' },
+  { $path: 'auth', $type: 'dir' },
+  { $path: 'auth/users', $type: 'mount-point',
+    connection: { $type: 'connection', db: 'treenity', collection: 'users' },
+    mount: { $type: 't.mount.mongo' },
+    $acl: [{ g: 'authenticated', p: R | S }, { g: 'public', p: 0 }],
+  },
+  { $path: 'sys/types', $type: 'mount-point',
+    mount: { $type: 't.mount.types' },
+    $acl: [{ g: 'public', p: R }],
+  },
+  { $path: 'sys/mods', $type: 'mount-point',
+    mount: { $type: 't.mount.mods' },
+    $acl: [{ g: 'public', p: R }],
+  },
+  { $path: 'auth/sessions', $type: 'mount-point',
+    connection: { $type: 'connection', db: 'treenity', collection: 'sessions' },
+    mount: { $type: 't.mount.mongo' },
+  },
+  { $path: 'mnt', $type: 'dir' },
+  { $path: 'mnt/orders', $type: 't.mount.mongo',
+    connection: { $type: 'connection', db: 'treenity', collection: 'orders' },
+  },
+  { $path: 'entities', $type: 'dir' },
+  { $path: 'demo', $type: 'dir',
+    metadata: { $type: 'metadata', title: 'Demo Node', description: 'Try calling actions' },
+    status: { $type: 'status', value: 'draft' },
+    counter: { $type: 'counter', count: 0 },
+  },
+  { $path: 'llm', $type: 't.llm' },
+  { $path: 'sys/mcp', $type: 'mcp.server', port: 0 },
+  { $path: 'demo/sensors', $type: 'examples.demo.sensor',
+    mount: { $type: 't.mount.memory' },
+  },
+  { $path: 'sys/claude-search', $type: 'claude-search' },
+  { $path: 'proc', $type: 'mount-point',
+    mount: { $type: 't.mount.memory' },
+    $acl: [{ g: 'public', p: R }],
+  },
+  { $path: 'sys/autostart', $type: 'autostart' },
+  { $path: '/sys/autostart/mcp', $type: 'ref', $ref: '/sys/mcp' },
+  { $path: '/sys/autostart/claude-search', $type: 'ref', $ref: '/sys/claude-search' },
+  { $path: '/sys/autostart/sensors', $type: 'ref', $ref: '/demo/sensors' },
+] as NodeData[], (nodes) => {
+  // MCP port from env
+  const mcpPort = Number(process.env.MCP_PORT) || 3212;
+  let result = nodes.map(n =>
+    n.$path === 'sys/mcp' ? { ...n, port: mcpPort } : n,
+  );
+
+  return result;
+}, { tier: 'core' });

package/src/mods/treenity/server.ts

@@ -0,0 +1 @@
+import './seed';

package/src/mods/treenity/type-view.tsx

@@ -0,0 +1,116 @@
+// Type node views — react + react:list + live preview
+
+import { getContextsForType, type NodeData, register } from '@treenity/core/core';
+import { TypePreview } from './preview';
+
+// ── Helpers ──
+
+function typeName(path: string) {
+  return path.replace(/^\/sys\/types\//, '').replace(/\//g, '.');
+}
+
+function SectionLabel({ children }: { children: React.ReactNode }) {
+  return <div className="text-[11px] font-semibold text-muted-foreground uppercase tracking-wider mb-2">{children}</div>;
+}
+
+// ── react (full view with live preview) ──
+
+function TypeNodeView({ value }: { value: NodeData }) {
+  const name = typeName(value.$path);
+  const schema = value.schema as Record<string, unknown> | undefined;
+  const title = schema?.title ? String(schema.title) : null;
+  const props = (schema?.properties ?? {}) as Record<string, Record<string, unknown>>;
+  const contexts = getContextsForType(name);
+  const components = Object.keys(value).filter(k => !k.startsWith('$') && k !== 'schema');
+
+  return (
+    <div className="max-w-xl space-y-4">
+      {title && <div className="text-lg font-semibold">{title}</div>}
+
+      {Object.keys(props).length > 0 && (
+        <div>
+          <SectionLabel>Properties</SectionLabel>
+          <div className="flex flex-col gap-1">
+            {Object.entries(props).map(([k, v]) => (
+              <div key={k} className="flex gap-2 text-sm px-2 py-1 bg-muted rounded">
+                <span className="font-mono text-primary">{k}</span>
+                <span className="text-muted-foreground">{String(v.type ?? 'string')}</span>
+                {typeof v.label === 'string' && <span className="text-muted-foreground ml-auto">{v.label}</span>}
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {components.length > 0 && (
+        <div>
+          <SectionLabel>Components</SectionLabel>
+          <div className="flex flex-wrap gap-1.5">
+            {components.map(c => (
+              <span key={c} className="px-2.5 py-0.5 rounded-full text-xs font-mono bg-muted border border-border text-muted-foreground">{c}</span>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {contexts.length > 0 && (
+        <div>
+          <SectionLabel>Contexts</SectionLabel>
+          <div className="flex flex-wrap gap-1.5">
+            {contexts.map(c => (
+              <span key={c} className="px-2.5 py-0.5 rounded-full text-xs font-mono bg-muted border border-border text-muted-foreground">{c}</span>
+            ))}
+          </div>
+        </div>
+      )}
+
+      <div>
+        <SectionLabel>Preview</SectionLabel>
+        <TypePreview key={name} typeName={name} properties={props} />
+      </div>
+    </div>
+  );
+}
+
+// ── react:list (compact) ──
+
+function TypeListItem({ value }: { value: NodeData }) {
+  const name = typeName(value.$path);
+  const schema = value.schema as Record<string, unknown> | undefined;
+  const title = schema?.title ? String(schema.title) : null;
+  const description = schema?.description ? String(schema.description) : null;
+  const props = Object.keys((schema?.properties ?? {}) as object);
+  const methods = Object.keys((schema?.methods ?? {}) as object);
+  const hasClass = !!value.class;
+
+  return (
+    <div className="flex-1 py-1">
+      <div className="flex items-center gap-2">
+        <span className="font-semibold text-sm">{name}</span>
+        {hasClass && (
+          <span className="text-[10px] px-1.5 py-px rounded bg-primary/10 text-primary">class</span>
+        )}
+      </div>
+      {(title || description) && (
+        <div className="text-xs text-muted-foreground mt-0.5">
+          {title}{title && description ? ' — ' : ''}{description}
+        </div>
+      )}
+      {(props.length > 0 || methods.length > 0) && (
+        <div className="flex gap-1 mt-1 flex-wrap">
+          {props.map(p => (
+            <span key={p} className="text-[11px] px-1.5 py-px rounded bg-muted text-muted-foreground font-mono">{p}</span>
+          ))}
+          {methods.map(m => (
+            <span key={m} className="text-[11px] px-1.5 py-px rounded bg-muted text-primary font-mono">{m}()</span>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ── Registration ──
+
+register('type', 'react', TypeNodeView as any);
+register('type', 'react:list', TypeListItem as any);

package/src/remote-tree.test.ts

@@ -0,0 +1,142 @@
+import type { NodeData } from '@treenity/core/core';
+import { withCache } from '@treenity/core/tree/cache';
+import assert from 'node:assert/strict';
+import { describe, it } from 'node:test';
+import { createRemoteTree } from './remote-tree';
+
+// ── Mock tRPC client ──
+
+function createMockTrpc(backing: Map<string, NodeData>) {
+  let getCalls = 0;
+
+  const mock = {
+    get getCalls() { return getCalls; },
+    resetCalls() { getCalls = 0; },
+
+    get: {
+      query: async ({ path }: { path: string }) => {
+        getCalls++;
+        return backing.get(path);
+      },
+    },
+    getChildren: {
+      query: async ({ path, limit, offset }: { path: string; limit?: number; offset?: number }) => {
+        getCalls++;
+        const prefix = path === '/' ? '/' : path + '/';
+        const items = [...backing.values()].filter(
+          n => n.$path.startsWith(prefix) && n.$path !== path
+            && n.$path.slice(prefix.length).indexOf('/') === -1,
+        );
+        const start = offset ?? 0;
+        const sliced = limit ? items.slice(start, start + limit) : items.slice(start);
+        return { items: sliced, total: items.length };
+      },
+    },
+    set: {
+      mutate: async ({ node }: { node: Record<string, unknown> }) => {
+        backing.set(node.$path as string, node as NodeData);
+      },
+    },
+    remove: {
+      mutate: async ({ path }: { path: string }) => {
+        backing.delete(path);
+      },
+    },
+  };
+
+  return mock;
+}
+
+// ── Tests ──
+
+describe('createRemoteTree — method mapping', () => {
+  it('get delegates to trpc.get.query', async () => {
+    const data = new Map<string, NodeData>();
+    data.set('/a', { $path: '/a', $type: 'test', v: 1 } as NodeData);
+    const mock = createMockTrpc(data);
+    const store = createRemoteTree(mock as any);
+
+    const node = await store.get('/a');
+    assert.equal(node?.$path, '/a');
+    assert.equal((node as any).v, 1);
+    assert.equal(mock.getCalls, 1);
+  });
+
+  it('get returns undefined for missing path', async () => {
+    const store = createRemoteTree(createMockTrpc(new Map()) as any);
+    const node = await store.get('/missing');
+    assert.equal(node, undefined);
+  });
+
+  it('getChildren delegates to trpc.getChildren.query', async () => {
+    const data = new Map<string, NodeData>();
+    data.set('/p', { $path: '/p', $type: 'dir' } as NodeData);
+    data.set('/p/a', { $path: '/p/a', $type: 'test' } as NodeData);
+    data.set('/p/b', { $path: '/p/b', $type: 'test' } as NodeData);
+    const store = createRemoteTree(createMockTrpc(data) as any);
+
+    const result = await store.getChildren('/p');
+    assert.equal(result.items.length, 2);
+    assert.equal(result.total, 2);
+  });
+
+  it('set delegates to trpc.set.mutate', async () => {
+    const data = new Map<string, NodeData>();
+    const store = createRemoteTree(createMockTrpc(data) as any);
+
+    await store.set({ $path: '/x', $type: 'test', v: 42 } as NodeData);
+    assert.ok(data.has('/x'));
+    assert.equal((data.get('/x') as any).v, 42);
+  });
+
+  it('remove delegates to trpc.remove.mutate', async () => {
+    const data = new Map<string, NodeData>();
+    data.set('/x', { $path: '/x', $type: 'test' } as NodeData);
+    const store = createRemoteTree(createMockTrpc(data) as any);
+
+    const result = await store.remove('/x');
+    assert.equal(result, true);
+    assert.ok(!data.has('/x'));
+  });
+});
+
+describe('withCache(remoteStore) — client pipeline', () => {
+  it('caches get results — second call skips tRPC', async () => {
+    const data = new Map<string, NodeData>();
+    data.set('/a', { $path: '/a', $type: 'test' } as NodeData);
+    const mock = createMockTrpc(data);
+    const store = withCache(createRemoteTree(mock as any));
+
+    await store.get('/a');
+    mock.resetCalls();
+    await store.get('/a'); // should hit cache
+    assert.equal(mock.getCalls, 0);
+  });
+
+  it('write-populate: set warms cache for next get', async () => {
+    const data = new Map<string, NodeData>();
+    const mock = createMockTrpc(data);
+    const store = withCache(createRemoteTree(mock as any));
+
+    await store.set({ $path: '/a', $type: 'test', v: 1 } as NodeData);
+    mock.resetCalls();
+
+    const node = await store.get('/a'); // should hit cache (write-populated)
+    assert.equal(mock.getCalls, 0);
+    assert.equal((node as any).v, 1);
+  });
+
+  it('inflight dedup: concurrent gets produce single tRPC call', async () => {
+    const data = new Map<string, NodeData>();
+    data.set('/a', { $path: '/a', $type: 'test', v: 99 } as NodeData);
+    const mock = createMockTrpc(data);
+    const store = withCache(createRemoteTree(mock as any));
+
+    const results = await Promise.all(
+      Array.from({ length: 5 }, () => store.get('/a')),
+    );
+
+    assert.equal(mock.getCalls, 1);
+    for (const r of results) assert.equal((r as any).v, 99);
+  });
+});

package/src/remote-tree.ts

@@ -0,0 +1,25 @@
+// Remote Tree — Tree adapter over tRPC client.
+// Maps the 4 Tree methods to tRPC query/mutation calls.
+// Enables client to use the same combinators as server:
+//   withSubscriptions(withCache(createRemoteTree(trpc)))
+
+import type { NodeData } from '@treenity/core/core';
+import type { Tree } from '@treenity/core/tree';
+import { defaultPatch } from '@treenity/core/tree/patch';
+import type { trpc } from './trpc';
+
+type TrpcClient = typeof trpc;
+
+export function createRemoteTree(client: TrpcClient): Tree {
+  const get = (path: string) => client.get.query({ path }) as Promise<NodeData | undefined>;
+  const set = (node: NodeData) => client.set.mutate({ node: node as Record<string, unknown> });
+
+  return {
+    get,
+    getChildren: (path, opts) => client.getChildren.query({ path, ...opts }),
+    set,
+    remove: (path) => client.remove.mutate({ path }).then(() => true),
+    // TODO: add tRPC patch endpoint for single-RPC atomic patch
+    patch: (path, ops) => defaultPatch(get, set, path, ops),
+  };
+}

package/src/schema-loader.ts

@@ -0,0 +1,84 @@
+// Lazy registry loader — fetches type nodes from /sys/types on demand
+import { type ContextHandlers, register, resolve } from '@treenity/core/core';
+import type { TypeSchema } from '@treenity/core/schema/types';
+import { useEffect, useState } from 'react';
+import { trpc } from './trpc';
+
+// ── Fetcher ──────────────────────────────────────────────────────────────────
+
+const fetched = new Set<string>();
+const inflight = new Map<string, Promise<void>>();
+
+/** Fetch /sys/types/{type} and register its contexts into the core registry. */
+export async function ensureType(type: string): Promise<void> {
+  if (fetched.has(type)) return;
+  if (inflight.has(type)) return inflight.get(type);
+
+  const promise = trpc.get
+    .query({ path: `/sys/types/${type.replace(/\./g, '/')}` })
+    .then((node: any) => {
+      const schema = node?.schema;
+      if (schema?.$id && !resolve(schema.$id, 'schema')) {
+        register(schema.$id, 'schema', () => schema);
+      }
+    })
+    .catch(() => {}) // type may have no schema — not an error
+    .finally(() => {
+      fetched.add(type);
+      inflight.delete(type);
+    });
+
+  inflight.set(type, promise);
+  return promise;
+}
+
+// ── Hook ─────────────────────────────────────────────────────────────────────
+
+/**
+ * Lazy registry hook — returns the handler itself, not its result.
+ * undefined = loading, null = not found, Handler = ready.
+ *
+ * Calling convention is context-specific:
+ *   'react'  — handler IS the component:   useReg(type, 'react') → FC
+ *   'schema' — handler is a thunk:          useReg(type, 'schema')?.() → TypeSchema
+ *
+ * Use useSchema() for the ergonomic schema shortcut.
+ */
+export function useReg<K extends keyof ContextHandlers>(
+  type: string | null | undefined,
+  context: K,
+): ContextHandlers[K] | null | undefined;
+export function useReg<T extends (...args: any[]) => any>(
+  type: string | null | undefined,
+  context: string,
+): T | null | undefined;
+export function useReg(type: string | null | undefined, context: string) {
+  const get = () => {
+    if (!type) return null;
+    return resolve(type, context) ?? undefined;
+  };
+
+  const [handler, setHandler] = useState(get);
+
+  useEffect(() => {
+    if (!type) { setHandler(null); return; }
+    const h = resolve(type, context);
+    if (h) { setHandler(() => h); return; }
+    setHandler(undefined);
+    ensureType(type).then(() => {
+      const h2 = resolve(type, context);
+      setHandler(h2 ? () => h2 : null);
+    });
+  }, [type, context]);
+
+  return handler;
+}
+
+// ── Schema convenience ────────────────────────────────────────────────────────
+
+/** undefined = loading, null = no schema, TypeSchema = ready */
+export function useSchema(type: string | null | undefined): TypeSchema | null | undefined {
+  const getter = useReg(type, 'schema');
+  if (getter === undefined) return undefined;
+  return (getter as (() => TypeSchema) | null)?.() ?? null;
+}