@treenity/react 3.0.0

package/src/Tree.tsx

@@ -0,0 +1,237 @@
+import { useCallback, useEffect, useRef, useState, useSyncExternalStore } from 'react';
+import * as cache from './cache';
+
+type TreeProps = {
+  roots: string[];
+  expanded: Set<string>;
+  loaded: Set<string>;
+  selected: string | null;
+  filter: string;
+  showHidden: boolean;
+  onSelect: (path: string) => void;
+  onExpand: (path: string) => void;
+  onCreateChild: (parentPath: string) => void;
+  onDelete?: (path: string) => void;
+  onMove?: (fromPath: string, toPath: string) => void;
+};
+
+function nodeName(p: string) {
+  return p.slice(p.lastIndexOf('/') + 1) || '/';
+}
+
+function matchesFilter(name: string, type: string, filter: string): boolean {
+  if (!filter) return true;
+  const lf = filter.toLowerCase();
+  return name.toLowerCase().includes(lf) || type.toLowerCase().includes(lf);
+}
+
+function hasMatchingDescendant(path: string, filter: string): boolean {
+  const nodes = cache.raw();
+  const prefix = path === '/' ? '/' : path + '/';
+  for (const [k, v] of nodes) {
+    if (k.startsWith(prefix) && matchesFilter(nodeName(k), v.$type, filter)) return true;
+  }
+  return false;
+}
+
+function BadgeMenu({
+  path,
+  typeLabel,
+  fullType,
+  onCreateChild,
+  onDelete,
+}: {
+  path: string;
+  typeLabel: string;
+  fullType: string;
+  onCreateChild: (path: string) => void;
+  onDelete?: (path: string) => void;
+}) {
+  const [open, setOpen] = useState(false);
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!open) return;
+    const close = (e: MouseEvent) => {
+      if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false);
+    };
+    document.addEventListener('mousedown', close);
+    return () => document.removeEventListener('mousedown', close);
+  }, [open]);
+
+  return (
+    <div ref={ref} className="tree-badge-wrap">
+      <span
+        className="tree-badge"
+        title={fullType}
+        onClick={(e) => {
+          e.stopPropagation();
+          setOpen(!open);
+        }}
+      >
+        {typeLabel}
+      </span>
+      {open && (
+        <div className="tree-menu">
+          <button
+            className="tree-menu-item"
+            onClick={(e) => {
+              e.stopPropagation();
+              setOpen(false);
+              onCreateChild(path);
+            }}
+          >
+            + Add child
+          </button>
+          {onDelete && (
+            <button
+              className="tree-menu-item danger"
+              onClick={(e) => {
+                e.stopPropagation();
+                setOpen(false);
+                if (confirm(`Delete ${path}?`)) onDelete(path);
+              }}
+            >
+              × Delete
+            </button>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
+function TreeNode({
+  path,
+  expanded,
+  loaded = new Set<string>(),
+  selected,
+  filter,
+  showHidden,
+  depth,
+  onSelect,
+  onExpand,
+  onCreateChild,
+  onDelete,
+  onMove,
+}: Omit<TreeProps, 'roots'> & { path: string; depth: number }) {
+  // Granular subscriptions — only re-render when THIS node or ITS children change
+  const node = useSyncExternalStore(
+    useCallback((cb: () => void) => cache.subscribePath(path, cb), [path]),
+    useCallback(() => cache.get(path), [path]),
+  );
+  const childrenNodes = useSyncExternalStore(
+    useCallback((cb: () => void) => cache.subscribeChildren(path, cb), [path]),
+    useCallback(() => cache.getChildren(path), [path]),
+  );
+
+  const rowRef = useRef<HTMLDivElement>(null);
+  const [dragOver, setDragOver] = useState<'above' | 'below' | null>(null);
+
+  if (!node) return null;
+
+  const name = nodeName(path);
+  const isExp = expanded.has(path);
+  const allChildren = childrenNodes.map(n => n.$path).filter(p => p !== path);
+  const knownChildren = showHidden
+    ? allChildren
+    : allChildren.filter(p => !nodeName(p).startsWith('_'));
+  const showChildren = filter ? knownChildren : isExp ? knownChildren : [];
+  const filteredChildren = filter
+    ? showChildren.filter((c) => {
+        const cn = cache.get(c);
+        if (!cn) return false;
+        return matchesFilter(nodeName(c), cn.$type, filter) || hasMatchingDescendant(c, filter);
+      })
+    : showChildren;
+
+  if (filter && !matchesFilter(name, node.$type, filter) && filteredChildren.length === 0) {
+    return null;
+  }
+
+  const indent = depth * 12 + 4;
+  const typeLabel = node.$type.includes('.') ? node.$type.slice(node.$type.lastIndexOf('.') + 1) : node.$type;
+
+  return (
+    <div className="tree-node">
+      <div
+        ref={rowRef}
+        className={`tree-row${selected === path ? ' selected' : ''}${dragOver === 'above' ? ' tree-drop-above' : ''}${dragOver === 'below' ? ' tree-drop-below' : ''}`}
+        style={{ paddingLeft: indent }}
+        onClick={() => onSelect(path)}
+        draggable
+        onDragStart={(e) => {
+          e.dataTransfer.setData('text/plain', path);
+          e.dataTransfer.setData('application/treenity-path', path);
+          e.dataTransfer.effectAllowed = 'all';
+        }}
+        onDragOver={(e) => {
+          e.preventDefault();
+          const rect = rowRef.current!.getBoundingClientRect();
+          const y = e.clientY - rect.top;
+          setDragOver(y < rect.height / 2 ? 'above' : 'below');
+        }}
+        onDragLeave={() => setDragOver(null)}
+        onDrop={(e) => {
+          e.preventDefault();
+          setDragOver(null);
+          const from = e.dataTransfer.getData('text/plain');
+          if (from && from !== path && onMove) onMove(from, path);
+        }}
+      >
+        {knownChildren.length > 0 || !loaded.has(path) ? (
+          <span
+            className="tree-toggle"
+            onClick={(e) => {
+              e.stopPropagation();
+              onExpand(path);
+            }}
+          >
+            {isExp ? '\u25BE' : '\u25B8'}
+          </span>
+        ) : (
+          <span className="tree-toggle" />
+        )}
+        <span className="tree-label">{name}</span>
+        <BadgeMenu
+          path={path}
+          typeLabel={typeLabel}
+          fullType={node.$type}
+          onCreateChild={onCreateChild}
+          onDelete={onDelete}
+        />
+      </div>
+      {(isExp || filter) && filteredChildren.length > 0 && (
+        <div className="tree-children">
+          {filteredChildren.map((c) => (
+            <TreeNode
+              key={c}
+              path={c}
+              depth={depth + 1}
+              expanded={expanded}
+              loaded={loaded}
+              selected={selected}
+              filter={filter}
+              showHidden={showHidden}
+              onSelect={onSelect}
+              onExpand={onExpand}
+              onCreateChild={onCreateChild}
+              onDelete={onDelete}
+              onMove={onMove}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export function Tree(props: TreeProps) {
+  return (
+    <div>
+      {props.roots.map((r) => (
+        <TreeNode key={r} path={r} depth={0} {...props} />
+      ))}
+    </div>
+  );
+}

package/src/ViewPage.tsx

@@ -0,0 +1,45 @@
+// ViewPage — standalone read-only node view at /{path}
+
+import { Render, RenderContext } from '#context';
+import { usePath } from './hooks';
+
+export function ViewPage({ path, editorLink }: { path: string; editorLink?: boolean }) {
+  const node = usePath(path);
+
+  const name = path === '/' ? '/' : path.slice(path.lastIndexOf('/') + 1);
+
+  if (!node) {
+    return (
+      <div className="flex flex-col items-center justify-center h-screen gap-4 text-[--text-3]">
+        <div className="text-4xl">404</div>
+        <p>Node not found: <span className="font-mono">{path}</span></p>
+        {editorLink && <a href={`/t${path}`} className="text-[--accent] hover:underline">Open in editor</a>}
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-col h-screen">
+      {editorLink && (
+        <div className="flex items-center gap-3 px-4 py-2 border-b border-[--border] bg-[--bg-2]">
+          <span className="font-semibold text-sm">{name}</span>
+          <span className="text-[10px] font-mono px-1.5 py-0.5 rounded bg-[--accent]/10 text-[--accent]">
+            {node.$type}
+          </span>
+          <span className="flex-1" />
+          <a
+            href={`/t${path}`}
+            className="text-xs text-[--text-3] hover:text-[--text-1] no-underline"
+          >
+            Open in editor
+          </a>
+        </div>
+      )}
+      <div className="flex-1 overflow-auto p-4 has-[.view-full]:p-0">
+        <RenderContext name="react">
+          <Render value={node} />
+        </RenderContext>
+      </div>
+    </div>
+  );
+}

package/src/bind/bind.test.ts

@@ -0,0 +1,316 @@
+import type { NodeData } from '@treenity/core/core';
+import assert from 'node:assert/strict';
+import { describe, it } from 'node:test';
+import { clearComputed, getComputed, setComputed, subscribeComputed } from './computed';
+import { evaluateRef, extractArgPaths, hasOnce, isCollectionRef } from './eval';
+import { isRefArg, parseMapExpr } from './parse';
+
+// ── Parser ──
+
+describe('parseMapExpr', () => {
+  it('parses pipe with field chain', () => {
+    const expr = parseMapExpr('last().value | div(5)');
+    assert.deepEqual(expr.steps, [
+      { type: 'pipe', name: 'last', args: [] },
+      { type: 'field', name: 'value' },
+      { type: 'pipe', name: 'div', args: [5] },
+    ]);
+  });
+
+  it('parses bare pipe (no parens)', () => {
+    const expr = parseMapExpr('round');
+    assert.deepEqual(expr.steps, [
+      { type: 'pipe', name: 'round', args: [] },
+    ]);
+  });
+
+  it('parses multiple args', () => {
+    const expr = parseMapExpr('clamp(0, 10)');
+    assert.deepEqual(expr.steps, [
+      { type: 'pipe', name: 'clamp', args: [0, 10] },
+    ]);
+  });
+
+  it('parses field-only chain', () => {
+    const expr = parseMapExpr('.status');
+    assert.deepEqual(expr.steps, [
+      { type: 'field', name: 'status' },
+    ]);
+  });
+
+  it('parses complex chain', () => {
+    const expr = parseMapExpr('last().value | sub(20) | abs | div(10)');
+    assert.deepEqual(expr.steps, [
+      { type: 'pipe', name: 'last', args: [] },
+      { type: 'field', name: 'value' },
+      { type: 'pipe', name: 'sub', args: [20] },
+      { type: 'pipe', name: 'abs', args: [] },
+      { type: 'pipe', name: 'div', args: [10] },
+    ]);
+  });
+
+  it('parses map pipe', () => {
+    const expr = parseMapExpr('map(value) | avg');
+    assert.deepEqual(expr.steps, [
+      { type: 'pipe', name: 'map', args: ['value'] },
+      { type: 'pipe', name: 'avg', args: [] },
+    ]);
+  });
+
+  it('parses #field as step (self lookup)', () => {
+    const expr = parseMapExpr('#width | mul(#height)');
+    assert.deepEqual(expr.steps, [
+      { type: 'field', name: 'width' },
+      { type: 'pipe', name: 'mul', args: [{ $ref: '.', fields: ['height'] }] },
+    ]);
+  });
+
+  it('parses #/path.field ref arg', () => {
+    const expr = parseMapExpr('#price | mul(#/config/tax.rate)');
+    const mulStep = expr.steps[1];
+    assert.equal(mulStep.type, 'pipe');
+    if (mulStep.type === 'pipe') {
+      assert.equal(isRefArg(mulStep.args[0]), true);
+      assert.deepEqual(mulStep.args[0], { $ref: '/config/tax', fields: ['rate'] });
+    }
+  });
+
+  it('parses #/path without field (whole node)', () => {
+    const expr = parseMapExpr('count(#/sensors)');
+    const step = expr.steps[0];
+    if (step.type === 'pipe') {
+      assert.deepEqual(step.args[0], { $ref: '/sensors', fields: [] });
+    }
+  });
+
+  it('parses #/path.deep.field', () => {
+    const expr = parseMapExpr('mul(#/config.tax.rate)');
+    const step = expr.steps[0];
+    if (step.type === 'pipe') {
+      assert.deepEqual(step.args[0], { $ref: '/config', fields: ['tax', 'rate'] });
+    }
+  });
+});
+
+// ── Evaluator ──
+
+describe('evaluateRef', () => {
+  const config = { $path: '/config', $type: 'config', factor: 5, tax: { rate: 0.2 } } as NodeData;
+
+  const sensors = [
+    { $path: '/s/1', $type: 'reading', value: 10, seq: 0 },
+    { $path: '/s/2', $type: 'reading', value: 20, seq: 1 },
+    { $path: '/s/3', $type: 'reading', value: 30, seq: 2 },
+  ] as NodeData[];
+
+  const selfNode = { $path: '/obj', $type: 't3d.object', width: 4, height: 3, price: 100 } as NodeData;
+
+  const allNodes = [...sensors, config, selfNode];
+
+  const ctx = {
+    getNode: (p: string) => allNodes.find(s => s.$path === p),
+    getChildren: (p: string) => p === '/s' ? sensors : [],
+  };
+
+  it('resolves plain ref (no $map)', () => {
+    const result = evaluateRef({ $ref: '/s/2' }, ctx);
+    assert.equal((result as NodeData)?.value, 20);
+  });
+
+  it('resolves last().value | div(5)', () => {
+    const result = evaluateRef({ $ref: '/s', $map: 'last().value | div(5)' }, ctx);
+    assert.equal(result, 6); // 30 / 5
+  });
+
+  it('resolves first().value', () => {
+    const result = evaluateRef({ $ref: '/s', $map: 'first().value' }, ctx);
+    assert.equal(result, 10);
+  });
+
+  it('resolves count()', () => {
+    const result = evaluateRef({ $ref: '/s', $map: 'count()' }, ctx);
+    assert.equal(result, 3);
+  });
+
+  it('resolves map + avg', () => {
+    const result = evaluateRef({ $ref: '/s', $map: 'map(value) | avg' }, ctx);
+    assert.equal(result, 20); // (10+20+30)/3
+  });
+
+  it('resolves map + sum', () => {
+    const result = evaluateRef({ $ref: '/s', $map: 'map(value) | sum' }, ctx);
+    assert.equal(result, 60);
+  });
+
+  it('resolves scalar chain', () => {
+    const result = evaluateRef({ $ref: '/s', $map: 'last().value | sub(20) | abs | div(2)' }, ctx);
+    assert.equal(result, 5); // |30-20| / 2
+  });
+
+  it('resolves clamp', () => {
+    const result = evaluateRef({ $ref: '/s', $map: 'last().value | clamp(0, 25)' }, ctx);
+    assert.equal(result, 25); // 30 clamped to 25
+  });
+
+  it('resolves single node field access (no collection)', () => {
+    const result = evaluateRef({ $ref: '/s/1', $map: '.value | mul(3)' }, ctx);
+    assert.equal(result, 30); // 10 * 3
+  });
+
+  it('returns undefined for empty children', () => {
+    const result = evaluateRef({ $ref: '/empty', $map: 'last().value' }, ctx);
+    assert.equal(result, undefined);
+  });
+
+  // ── Self-ref + #-args ──
+
+  it('resolves #field self lookup', () => {
+    const result = evaluateRef({ $ref: '/obj', $map: '#width | mul(#height)' }, ctx);
+    assert.equal(result, 12); // 4 * 3
+  });
+
+  it('resolves cross-ref #/path.field arg', () => {
+    const result = evaluateRef({ $ref: '/obj', $map: '#price | mul(#/config.tax.rate)' }, ctx);
+    assert.equal(result, 20); // 100 * 0.2
+  });
+
+  it('resolves external source + self arg via #', () => {
+    const result = evaluateRef({ $ref: '/s', $map: 'last().value | div(#/config.factor)' }, ctx);
+    assert.equal(result, 6); // 30 / 5
+  });
+
+  it('returns NaN for missing #ref node (loud failure)', () => {
+    const result = evaluateRef({ $ref: '/obj', $map: '#width | mul(#/missing.value)' }, ctx);
+    assert.equal(Number.isNaN(result), true); // 4 * undefined = NaN
+  });
+});
+
+// ── isCollectionRef ──
+
+describe('isCollectionRef', () => {
+  it('true for last()', () => {
+    assert.equal(isCollectionRef({ $ref: '/s', $map: 'last().value' }), true);
+  });
+
+  it('true for count()', () => {
+    assert.equal(isCollectionRef({ $ref: '/s', $map: 'count()' }), true);
+  });
+
+  it('false for field access', () => {
+    assert.equal(isCollectionRef({ $ref: '/s/1', $map: '.value' }), false);
+  });
+
+  it('false for #field self access', () => {
+    assert.equal(isCollectionRef({ $ref: '.', $map: '#width' }), false);
+  });
+
+  it('false for no $map', () => {
+    assert.equal(isCollectionRef({ $ref: '/s/1' }), false);
+  });
+});
+
+// ── extractArgPaths ──
+
+describe('extractArgPaths', () => {
+  it('returns external paths from #/path args', () => {
+    const paths = extractArgPaths({ $ref: '/obj', $map: '#price | mul(#/config.rate) | add(#/bonus.value)' });
+    assert.deepEqual(paths, ['/config', '/bonus']);
+  });
+
+  it('skips # self refs', () => {
+    const paths = extractArgPaths({ $ref: '.', $map: '#width | mul(#height)' });
+    assert.deepEqual(paths, []);
+  });
+
+  it('returns empty for no $map', () => {
+    assert.deepEqual(extractArgPaths({ $ref: '/x' }), []);
+  });
+});
+
+// ── hasOnce ──
+
+describe('hasOnce', () => {
+  it('true when once in pipe chain', () => {
+    assert.equal(hasOnce({ $ref: '/s', $map: 'last().value | div(5) | once' }), true);
+  });
+
+  it('true when once is only step', () => {
+    assert.equal(hasOnce({ $ref: '/s', $map: 'once' }), true);
+  });
+
+  it('false for normal pipes', () => {
+    assert.equal(hasOnce({ $ref: '/s', $map: 'last().value | div(5)' }), false);
+  });
+
+  it('false for no $map', () => {
+    assert.equal(hasOnce({ $ref: '/s' }), false);
+  });
+});
+
+// ── once pipe (identity) ──
+
+describe('once pipe in evaluation', () => {
+  const nodes = [
+    { $path: '/s/1', $type: 'r', value: 10 },
+    { $path: '/s/2', $type: 'r', value: 20 },
+  ] as NodeData[];
+
+  const ctx = {
+    getNode: (p: string) => nodes.find(n => n.$path === p),
+    getChildren: (p: string) => p === '/s' ? nodes : [],
+  };
+
+  it('once does not alter the computed value', () => {
+    const withOnce = evaluateRef({ $ref: '/s', $map: 'last().value | div(5) | once' }, ctx);
+    const without = evaluateRef({ $ref: '/s', $map: 'last().value | div(5)' }, ctx);
+    assert.equal(withOnce, without);
+    assert.equal(withOnce, 4); // 20 / 5
+  });
+});
+
+// ── Computed store ──
+
+describe('computed store', () => {
+  it('set + get', () => {
+    setComputed('/test', 'sy', 42);
+    const c = getComputed('/test');
+    assert.equal(c?.sy, 42);
+    clearComputed('/test');
+  });
+
+  it('fires subscriber on change', () => {
+    let fired = 0;
+    const unsub = subscribeComputed('/test2', () => { fired++; });
+    setComputed('/test2', 'px', 1);
+    assert.equal(fired, 1);
+    setComputed('/test2', 'px', 2);
+    assert.equal(fired, 2);
+    // No-op same value
+    setComputed('/test2', 'px', 2);
+    assert.equal(fired, 2);
+    unsub();
+    clearComputed('/test2');
+  });
+
+  it('returns new object reference on change (useSyncExternalStore compat)', () => {
+    setComputed('/ref-test', 'a', 1);
+    const snap1 = getComputed('/ref-test');
+    setComputed('/ref-test', 'a', 2);
+    const snap2 = getComputed('/ref-test');
+    // Must be different references — Object.is must see the change
+    assert.notEqual(snap1, snap2);
+    assert.equal(snap2?.a, 2);
+    // Old snapshot retains old value (immutable)
+    assert.equal(snap1?.a, 1);
+    clearComputed('/ref-test');
+  });
+
+  it('unsubscribe stops notifications', () => {
+    let fired = 0;
+    const unsub = subscribeComputed('/test3', () => { fired++; });
+    unsub();
+    setComputed('/test3', 'sy', 99);
+    assert.equal(fired, 0);
+    clearComputed('/test3');
+  });
+});

package/src/bind/computed.ts

@@ -0,0 +1,64 @@
+// Computed store — separate reactive layer for $ref+$map resolved values
+// Dual: valtio proxies for field-level React reactivity (useSnapshot),
+// plus synchronous manual subs for bind engine and non-React consumers.
+// Never persisted to IDB or server. No Meteor trap.
+
+import { proxy, snapshot } from 'valtio/vanilla';
+
+type Sub = () => void;
+
+const proxies = new Map<string, Record<string, unknown>>();
+const subs = new Map<string, Set<Sub>>();
+
+function ensure(path: string): Record<string, unknown> {
+  let p = proxies.get(path);
+  if (!p) {
+    p = proxy<Record<string, unknown>>({});
+    proxies.set(path, p);
+  }
+  return p;
+}
+
+function fire(path: string): void {
+  const s = subs.get(path);
+  if (s) for (const cb of s) cb();
+}
+
+export function getComputed(path: string): Record<string, unknown> | undefined {
+  const p = proxies.get(path);
+  if (!p) return undefined;
+  return snapshot(p) as Record<string, unknown>;
+}
+
+/** Get the raw valtio proxy — for useSnapshot in hooks */
+export function getComputedProxy(path: string): Record<string, unknown> | undefined {
+  return proxies.get(path);
+}
+
+export function setComputed(path: string, field: string, value: unknown): void {
+  const p = ensure(path);
+  if (Object.is(p[field], value)) return; // no-op if unchanged
+  p[field] = value;
+  fire(path); // synchronous for non-React consumers
+}
+
+export function clearComputed(path: string): void {
+  const p = proxies.get(path);
+  if (p) {
+    for (const k of Object.keys(p)) delete p[k];
+    proxies.delete(path);
+  }
+  fire(path);
+}
+
+export function subscribeComputed(path: string, cb: Sub): () => void {
+  if (!subs.has(path)) subs.set(path, new Set());
+  subs.get(path)!.add(cb);
+  return () => {
+    const s = subs.get(path);
+    if (s) {
+      s.delete(cb);
+      if (!s.size) subs.delete(path);
+    }
+  };
+}