@treenity/react 3.0.0 → 3.0.2

package/src/Login.tsx

@@ -0,0 +1,97 @@
+import { Button } from '#components/ui/button';
+import { Dialog, DialogContent } from '#components/ui/dialog';
+import { Input } from '#components/ui/input';
+import { Label } from '#components/ui/label';
+import { useState } from 'react';
+import { setToken, trpc } from './trpc';
+
+function LoginForm({ onLogin }: { onLogin: (userId: string) => void }) {
+  const [mode, setMode] = useState<'login' | 'register'>('login');
+  const [userId, setUserId] = useState('');
+  const [password, setPassword] = useState('');
+  const [err, setErr] = useState<string | null>(null);
+  const [loading, setLoading] = useState(false);
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    if (!userId.trim() || !password) return;
+    setLoading(true);
+    setErr(null);
+    try {
+      const fn = mode === 'register' ? trpc.register : trpc.login;
+      const res = await fn.mutate({ userId: userId.trim(), password });
+      setToken(res.token);
+      onLogin(res.userId);
+    } catch (e) {
+      setErr(e instanceof Error ? e.message : 'Failed');
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <form className="flex flex-col gap-4 w-80 p-8 rounded-lg border border-border bg-card" onSubmit={handleSubmit}>
+      <div className="flex items-center justify-center gap-2 mb-2">
+        <img src="/treenity.svg" alt="" width="32" height="32" />
+        <span className="text-lg font-semibold">Treenity</span>
+      </div>
+
+      <div className="flex flex-col gap-1.5">
+        <Label htmlFor="userId">User ID</Label>
+        <Input
+          id="userId"
+          autoFocus
+          placeholder="Enter your user ID"
+          value={userId}
+          onChange={(e) => setUserId(e.target.value)}
+        />
+      </div>
+
+      <div className="flex flex-col gap-1.5">
+        <Label htmlFor="password">Password</Label>
+        <Input
+          id="password"
+          type="password"
+          placeholder="Enter password"
+          value={password}
+          onChange={(e) => setPassword(e.target.value)}
+        />
+      </div>
+
+      {err && <p className="text-sm text-destructive">{err}</p>}
+
+      <Button type="submit" disabled={loading || !userId.trim() || !password}>
+        {loading ? '...' : mode === 'register' ? 'Create account' : 'Sign in'}
+      </Button>
+
+      <Button
+        type="button"
+        variant="ghost"
+        onClick={() => {
+          setMode((m) => (m === 'login' ? 'register' : 'login'));
+          setErr(null);
+        }}
+      >
+        {mode === 'login' ? 'No account? Register' : 'Have an account? Sign in'}
+      </Button>
+    </form>
+  );
+}
+
+export function LoginScreen({ onLogin }: { onLogin: (userId: string) => void }) {
+  return (
+    <div className="flex items-center justify-center h-screen bg-background">
+      <LoginForm onLogin={onLogin} />
+    </div>
+  );
+}
+
+export function LoginModal({ onLogin, onClose }: { onLogin: (userId: string) => void; onClose?: () => void }) {
+  return (
+    <Dialog open onOpenChange={(open) => { if (!open && onClose) onClose(); }}>
+      <DialogContent className="p-0 border-none bg-transparent shadow-none max-w-fit" showCloseButton={!!onClose}>
+        <LoginForm onLogin={onLogin} />
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/NodeEditor.tsx

@@ -0,0 +1,300 @@
+// NodeEditor — self-contained edit panel for a node (properties, components, actions)
+// Reusable: Inspector uses it as a slide-out, but can be embedded anywhere.
+
+import { Button } from '#components/ui/button';
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '#components/ui/collapsible';
+import { Input } from '#components/ui/input';
+import { ScrollArea } from '#components/ui/scroll-area';
+import { Tabs, TabsList, TabsTrigger } from '#components/ui/tabs';
+import { toPlain } from '#lib/to-plain';
+import { FieldLabel, RefEditor } from '#mods/editor-ui/FieldLabel';
+import { getComponents, getPlainFields, getSchema } from '#mods/editor-ui/node-utils';
+import { type ComponentData, type GroupPerm, isRef, type NodeData, resolve } from '@treenity/core';
+import type { TypeSchema } from '@treenity/core/schema/types';
+import { ChevronRight } from 'lucide-react';
+import { useEffect, useState } from 'react';
+import { proxy, snapshot, useSnapshot } from 'valtio';
+import { AclEditor } from './AclEditor';
+import * as cache from './cache';
+import { ComponentSection } from './ComponentSection';
+import { set } from './hooks';
+
+type AnyClass = { new(): Record<string, unknown> };
+
+function NodeCard({ path, type, onChangeType }: {
+  path: string;
+  type: string;
+  onChangeType: (t: string) => void;
+}) {
+  return (
+    <Collapsible className="border-t border-border mt-2 pt-0.5 first:border-t-0 first:mt-0 first:pt-0">
+      <CollapsibleTrigger className="flex w-full items-center justify-between py-2 pb-1.5 text-[11px] font-semibold text-muted-foreground uppercase tracking-wider cursor-pointer select-none">
+        <span>Node</span>
+        <span className="flex items-center gap-2 normal-case tracking-normal font-normal text-[11px] font-mono text-foreground/50">
+          {path}
+          <span className="text-primary">{type}</span>
+          <ChevronRight className="h-3 w-3 transition-transform duration-200 group-data-[state=open]:rotate-90" />
+        </span>
+      </CollapsibleTrigger>
+      <CollapsibleContent>
+        <div className="py-0.5 pb-2.5">
+          <div className="field">
+            <label>$path</label>
+            <Input className="h-7 text-xs" value={path} readOnly />
+          </div>
+          <div className="field">
+            <label>$type</label>
+            <Input className="h-7 text-xs" value={type} onChange={(e) => onChangeType(e.target.value)} />
+          </div>
+        </div>
+      </CollapsibleContent>
+    </Collapsible>
+  );
+}
+
+export type NodeEditorProps = {
+  node: NodeData;
+  open: boolean;
+  onClose: () => void;
+  currentUserId?: string;
+  toast: (msg: string) => void;
+  onAddComponent: (path: string) => void;
+};
+
+export function NodeEditor({ node, open, onClose, currentUserId, toast, onAddComponent }: NodeEditorProps) {
+  const [st] = useState(() => proxy({
+    nodeType: '',
+    compTexts: {} as Record<string, string>,
+    compData: {} as Record<string, Record<string, unknown>>,
+    plainData: {} as Record<string, unknown>,
+    tab: 'properties' as 'properties' | 'json',
+    jsonText: '',
+    collapsed: { $node: true } as Record<string, boolean>,
+    aclOwner: '',
+    aclRules: [] as GroupPerm[],
+    dirty: false,
+    stale: false,
+    syncedPath: null as string | null,
+    syncedRev: null as unknown,
+  }));
+  const snap = useSnapshot(st);
+
+  function syncFromNode(n: NodeData) {
+    st.nodeType = n.$type;
+    st.aclOwner = (n.$owner as string) ?? '';
+    st.aclRules = n.$acl ? [...(n.$acl as GroupPerm[])] : [];
+    const texts: Record<string, string> = {};
+    const cdata: Record<string, Record<string, unknown>> = {};
+    for (const [name, comp] of getComponents(n)) {
+      texts[name] = JSON.stringify(comp, null, 2);
+      const d: Record<string, unknown> = {};
+      for (const [k, v] of Object.entries(comp)) {
+        if (!k.startsWith('$')) d[k] = v;
+      }
+      cdata[name] = d;
+    }
+    st.compTexts = texts;
+    st.compData = cdata;
+    st.plainData = getPlainFields(n);
+    st.jsonText = JSON.stringify(n, null, 2);
+    st.tab = 'properties';
+  }
+
+  useEffect(() => {
+    const pathChanged = node.$path !== st.syncedPath;
+    if (pathChanged) {
+      syncFromNode(node);
+      st.syncedPath = node.$path;
+      st.syncedRev = node.$rev;
+      st.dirty = false;
+      st.stale = false;
+      return;
+    }
+
+    if (node.$rev !== st.syncedRev) {
+      if (st.dirty) {
+        st.stale = true;
+      } else {
+        syncFromNode(node);
+        st.syncedRev = node.$rev;
+      }
+    }
+  }, [node.$path, node.$rev]);
+
+  function handleReset() {
+    const current = cache.get(node.$path) ?? node;
+    syncFromNode(current);
+    st.syncedRev = current.$rev;
+    st.dirty = false;
+    st.stale = false;
+  }
+
+  const nodeName = node.$path === '/' ? '/' : node.$path.slice(node.$path.lastIndexOf('/') + 1);
+  const components = getComponents(node);
+  const schemaHandler = resolve(node.$type, 'schema');
+  const schema = schemaHandler ? (schemaHandler() as TypeSchema) : null;
+  const mainCompCls = resolve(node.$type, 'class') as AnyClass | null;
+  const mainCompDefaults = mainCompCls ? new mainCompCls() : null;
+
+  async function handleSave() {
+    const s = toPlain(snapshot(st));
+    let toSave: NodeData;
+    if (s.tab === 'json') {
+      try {
+        toSave = JSON.parse(s.jsonText);
+      } catch {
+        toast('Invalid JSON');
+        return;
+      }
+    } else {
+      toSave = { $path: node.$path, $type: s.nodeType, ...s.plainData } as NodeData;
+      if (s.aclOwner) toSave.$owner = s.aclOwner;
+      if (s.aclRules.length > 0) toSave.$acl = [...s.aclRules] as GroupPerm[];
+      for (const [name, comp] of components) {
+        const ctype = (comp as ComponentData).$type;
+        const cschema = getSchema(ctype);
+        const cd = s.compData[name];
+        if ((cschema || (cd && Object.keys(cd).length > 0)) && cd) {
+          toSave[name] = { $type: ctype, ...cd };
+        } else {
+          const text = s.compTexts[name];
+          if (text === undefined) continue;
+          try {
+            toSave[name] = JSON.parse(text);
+          } catch {
+            toast(`Invalid JSON in component: ${name}`);
+            return;
+          }
+        }
+      }
+    }
+    await set(toSave);
+    const fresh = cache.get(node.$path);
+    if (fresh) {
+      syncFromNode(fresh);
+      st.syncedRev = fresh.$rev;
+    }
+    st.dirty = false;
+    st.stale = false;
+    toast('Saved');
+  }
+
+  function handleRemoveComponent(name: string) {
+    const next = { ...node };
+    delete next[name];
+    set(next);
+  }
+
+  return (
+    <div className={`edit-panel${open ? ' open' : ''}`}>
+      <div className="edit-panel-header">
+        <span>Edit {nodeName}</span>
+        <Button variant="ghost" size="sm" className="h-6 w-6 p-0" onClick={onClose}>
+          &#10005;
+        </Button>
+      </div>
+
+      <Tabs value={snap.tab} onValueChange={(v) => {
+        st.tab = v as 'properties' | 'json';
+        if (v === 'json') st.jsonText = JSON.stringify({ ...node, ...st.plainData }, null, 2);
+      }} className="px-3 pt-2">
+        <TabsList className="h-8 bg-secondary">
+          <TabsTrigger value="properties" className="text-xs">Properties</TabsTrigger>
+          <TabsTrigger value="json" className="text-xs">JSON</TabsTrigger>
+        </TabsList>
+      </Tabs>
+
+      <ScrollArea className="flex-1">
+        <div className="p-3.5">
+        {snap.tab === 'properties' ? (
+          <>
+            <NodeCard path={node.$path} type={snap.nodeType} onChangeType={(v) => { st.nodeType = v; st.dirty = true; }} />
+            <AclEditor
+              path={node.$path}
+              owner={snap.aclOwner}
+              rules={snap.aclRules as GroupPerm[]}
+              currentUserId={currentUserId}
+              onChange={(o, r) => { st.aclOwner = o; st.aclRules = r; st.dirty = true; }}
+            />
+
+            {/* Main type section */}
+            <ComponentSection
+              node={node}
+              name=""
+              compType={node.$type}
+              data={snap.plainData as Record<string, unknown>}
+              onData={(d) => { st.plainData = d; st.dirty = true; }}
+              toast={toast}
+              onActionComplete={handleReset}
+            />
+
+            {/* Named components */}
+            {components.map(([name, comp]) => (
+              <ComponentSection
+                key={name}
+                node={node}
+                name={name}
+                compType={(comp as ComponentData).$type}
+                data={(snap.compData[name] ?? {}) as Record<string, unknown>}
+                onData={(d) => { st.compData[name] = d; st.dirty = true; }}
+                collapsed={!!snap.collapsed[name]}
+                onToggle={() => { st.collapsed[name] = !st.collapsed[name]; }}
+                onRemove={() => handleRemoveComponent(name)}
+                toast={toast}
+                onActionComplete={handleReset}
+              />
+            ))}
+
+            {/* Untyped plain data fallback */}
+            {!schema && !mainCompDefaults && Object.keys(snap.plainData).length > 0 && (
+              <div className="border-t border-border mt-2 pt-0.5 first:border-t-0 first:mt-0 first:pt-0">
+                <div className="flex items-center justify-between py-2 pb-1.5 text-[11px] font-semibold text-muted-foreground uppercase tracking-wider">Data</div>
+                <div className="py-0.5 pb-2.5">
+                  {Object.entries(snap.plainData).map(([k, v]) => {
+                    const onCh = (next: unknown) => { st.plainData[k] = next; st.dirty = true; };
+                    return (
+                      <div key={k} className={`field${typeof v === 'object' && v !== null ? ' stack' : ''}`}>
+                        <FieldLabel label={k} value={v} onChange={onCh} />
+                        {typeof v === 'object' && isRef(v) ? (
+                          <RefEditor value={v as { $ref: string; $map?: string }} onChange={onCh} />
+                        ) : (
+                          <Input
+                            className="h-7 text-xs"
+                            value={typeof v === 'string' ? v : JSON.stringify(v)}
+                            onChange={(e) => { st.plainData[k] = e.target.value; st.dirty = true; }}
+                          />
+                        )}
+                      </div>
+                    );
+                  })}
+                </div>
+              </div>
+            )}
+          </>
+        ) : (
+          <textarea
+            value={snap.jsonText}
+            onChange={(e) => { st.jsonText = e.target.value; st.dirty = true; }}
+            spellCheck={false}
+          />
+        )}
+        </div>
+      </ScrollArea>
+
+      <div className="edit-panel-actions">
+        {snap.stale && (
+          <Button variant="ghost" size="sm" onClick={handleReset} title="Node updated externally">
+            Reset
+          </Button>
+        )}
+        <Button size="sm" onClick={handleSave}>
+          Save
+        </Button>
+        {snap.tab === 'properties' && (
+          <Button variant="outline" size="sm" onClick={() => onAddComponent(node.$path)}>+ Component</Button>
+        )}
+      </div>
+
+    </div>
+  );
+}

package/src/Tree.css

@@ -0,0 +1,91 @@
+/* Tree sidebar */
+.tree-node {
+  position: relative;
+}
+.tree-children {
+  position: relative;
+  padding-left: 12px;
+}
+.tree-children::before {
+  content: '';
+  position: absolute;
+  left: 15px;
+  top: 0;
+  bottom: 8px;
+  width: 1px;
+  background: var(--border-subtle);
+}
+
+.tree-row {
+  display: flex;
+  align-items: center;
+  padding: 1px 8px 1px 0;
+  cursor: pointer;
+  color: var(--text);
+  font-size: 14px;
+  height: 28px;
+  position: relative;
+  user-select: none;
+  transition: background var(--transition);
+}
+.tree-row:hover {
+  background: var(--surface-2);
+}
+.tree-row.selected {
+  background: var(--accent-subtle);
+}
+.tree-row.selected::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 2px;
+  bottom: 2px;
+  width: 2px;
+  background: var(--accent);
+  border-radius: 1px;
+}
+
+.tree-toggle {
+  width: 20px;
+  height: 28px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--text-3);
+  font-size: 14px;
+  flex-shrink: 0;
+  transition: color var(--transition);
+}
+.tree-toggle:hover {
+  color: var(--text-2);
+}
+
+.tree-label {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.tree-badge {
+  font-size: 10px;
+  color: var(--text-3);
+  padding: 1px 6px;
+  background: var(--surface-3);
+  border-radius: 10px;
+  flex-shrink: 0;
+  font-family: var(--mono);
+  cursor: pointer;
+  transition: all var(--transition);
+}
+.tree-badge:hover {
+  color: var(--text-2);
+  background: var(--surface-2);
+}
+
+/* Drag */
+.tree-drop-above {
+  box-shadow: inset 0 2px 0 var(--accent);
+}
+.tree-drop-below {
+  box-shadow: inset 0 -2px 0 var(--accent);
+}

package/src/Tree.tsx

@@ -1,4 +1,13 @@
-import { useCallback, useEffect, useRef, useState, useSyncExternalStore } from 'react';
+import './Tree.css';
+import { ConfirmDialog } from '#components/ConfirmDialog';
+import { Badge } from '#components/ui/badge';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '#components/ui/dropdown-menu';
+import { useCallback, useRef, useState, useSyncExternalStore } from 'react';
 import * as cache from './cache';
 
 type TreeProps = {
@@ -47,57 +56,45 @@ function BadgeMenu({
   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]);
+  const [confirmDelete, setConfirmDelete] = useState(false);
 
   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);
-            }}
+    <>
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild onClick={(e) => e.stopPropagation()}>
+          <Badge
+            variant="secondary"
+            className="tree-badge cursor-pointer text-[10px] px-1.5 py-0 h-5 font-mono font-normal"
+            title={fullType}
           >
+            {typeLabel}
+          </Badge>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end" className="min-w-[120px]" onClick={(e) => e.stopPropagation()}>
+          <DropdownMenuItem onClick={() => onCreateChild(path)}>
             + Add child
-          </button>
+          </DropdownMenuItem>
           {onDelete && (
-            <button
-              className="tree-menu-item danger"
-              onClick={(e) => {
-                e.stopPropagation();
-                setOpen(false);
-                if (confirm(`Delete ${path}?`)) onDelete(path);
-              }}
+            <DropdownMenuItem
+              className="text-destructive focus:text-destructive"
+              onClick={() => setConfirmDelete(true)}
             >
               × Delete
-            </button>
+            </DropdownMenuItem>
           )}
-        </div>
+        </DropdownMenuContent>
+      </DropdownMenu>
+      {onDelete && (
+        <ConfirmDialog
+          open={confirmDelete}
+          onOpenChange={setConfirmDelete}
+          title={`Delete ${path}?`}
+          description="This action cannot be undone."
+          variant="destructive"
+          onConfirm={() => onDelete(path)}
+        />
       )}
-    </div>
+    </>
   );
 }
 

package/src/bind/engine.ts

@@ -4,7 +4,7 @@
 
 import * as cache from '#cache';
 import { trpc } from '#trpc';
-import { isRef, type NodeData, type Ref } from '@treenity/core/core';
+import { isRef, type NodeData, type Ref } from '@treenity/core';
 import { clearComputed, getComputed, setComputed } from './computed';
 import { evaluateRef, extractArgPaths, hasOnce, isCollectionRef } from './eval';
 

package/src/bind/eval.ts

@@ -2,7 +2,7 @@
 // Resolves source from $ref, applies $map pipeline
 // #field (self) and #/path.field (external) args resolved from context
 
-import type { NodeData, Ref } from '@treenity/core/core';
+import type { NodeData, Ref } from '@treenity/core';
 import { isRefArg, type MapExpr, parseMapExpr, type PipeArg } from './parse';
 import { getPipe } from './pipes';
 

package/src/bind/hook.ts

@@ -2,7 +2,7 @@
 
 import * as cache from '#cache';
 import { set, usePath } from '#hooks';
-import { isRef, type NodeData } from '@treenity/core/core';
+import { isRef, type NodeData } from '@treenity/core';
 import { useCallback, useMemo, useSyncExternalStore } from 'react';
 import { useSnapshot } from 'valtio';
 import { proxy } from 'valtio/vanilla';

package/src/bind/pipes.ts

@@ -1,6 +1,6 @@
 // Pipe registry — Angular-style transforms for $map expressions
 
-import type { NodeData } from '@treenity/core/core';
+import type { NodeData } from '@treenity/core';
 
 export type PipeFn = (input: unknown, ...args: unknown[]) => unknown;
 

package/src/cache.ts

@@ -2,8 +2,13 @@
 // useSyncExternalStore-friendly: stable snapshots, targeted notifications
 // IDB persistence: fire-and-forget writes, hydrate() on startup.
 
-import type { NodeData } from '@treenity/core/core';
+import type { NodeData } from '@treenity/core';
 import * as idb from './idb';
+import { stampNode } from './symbols';
+
+/** Shallow-freeze in dev mode to catch accidental cache mutation at the source */
+const devFreeze: (node: NodeData) => void =
+  import.meta.env?.DEV ? (node) => Object.freeze(node) : () => {};
 
 type Sub = () => void;
 
@@ -109,7 +114,9 @@ export function removeFromParent(path: string, parent: string) {
 // ── Writes ──
 
 export function put(node: NodeData, virtualParent?: string) {
+  stampNode(node);
   nodes.set(node.$path, node);
+  devFreeze(node);
   const p = virtualParent ?? parentOf(node.$path);
   if (p !== null) {
     if (!parentIndex.has(p)) parentIndex.set(p, new Set());
@@ -135,7 +142,9 @@ export function putMany(items: NodeData[], virtualParent?: string) {
   const ts = Date.now();
   const idbEntries: idb.IDBEntry[] = [];
   for (const n of items) {
+    stampNode(n);
     nodes.set(n.$path, n);
+    devFreeze(n);
     lastUpdated.set(n.$path, ts);
     fire(pathSubs, n.$path);
     const p = virtualParent ?? parentOf(n.$path);
@@ -225,7 +234,9 @@ export async function hydrate(): Promise<void> {
   try {
     const entries = await idb.loadAll();
     for (const { data, lastUpdated: ts, virtualParent } of entries) {
+      stampNode(data);
       nodes.set(data.$path, data);
+      devFreeze(data);
       lastUpdated.set(data.$path, ts);
       const p = virtualParent ?? parentOf(data.$path);
       if (p !== null) {