@treenity/react 3.0.1 → 3.0.3

package/src/hooks.ts

@@ -99,7 +99,10 @@ export function useChildren(parentPath: string, opts?: WatchOpts) {
 
     trpc.getChildren
       .query({ path: parentPath, limit: opts?.limit, watch: opts?.watch, watchNew: opts?.watchNew })
-      .then((result: any) => cache.putMany(result.items as NodeData[], parentPath));
+      .then((result: any) => {
+        if (result.truncated) console.warn(`[tree] Children of ${parentPath} truncated — results may be incomplete`);
+        cache.putMany(result.items as NodeData[], parentPath);
+      });
   }, [parentPath, gen, opts?.limit, opts?.watch, opts?.watchNew]);
 
   return useSyncExternalStore(
@@ -111,10 +114,17 @@ export function useChildren(parentPath: string, opts?: WatchOpts) {
 // ── set: optimistic update + server persist ──
 
 export async function set(next: NodeData) {
+  const prev = cache.get(next.$path);
   cache.put(next);
-  await tree.set(next);
-  const fresh = await tree.get(next.$path);
-  if (fresh) cache.put(fresh);
+  try {
+    await tree.set(next);
+    const fresh = await tree.get(next.$path);
+    if (fresh) cache.put(fresh);
+  } catch (err) {
+    // F15: rollback optimistic cache on server reject (validation, ACL, OCC)
+    if (prev) cache.put(prev); else cache.remove(next.$path);
+    throw err;
+  }
 }
 
 // ── execute: action caller ──
@@ -168,6 +178,65 @@ export function useCanWrite(path: string | null): boolean {
   return (perm & W) !== 0;
 }
 
+// ── useAutoSave: throttled auto-persist for editable views ──
+// First save fires after 500ms (responsive), subsequent saves throttled to 2s.
+// Returns [localData, setField, dirty] — local updates are instant, server writes are batched.
+
+// TODO: check why unused
+export function useAutoSave(node: NodeData) {
+  const [local, setLocal] = useState<Record<string, unknown>>({});
+  const dirtyRef = useRef(false);
+  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const savingRef = useRef(false);
+  const pendingRef = useRef(false);
+  const lastSaveRef = useRef(0);
+  const nodeRef = useRef(node);
+  nodeRef.current = node;
+
+  const flush = useCallback(async () => {
+    if (savingRef.current) { pendingRef.current = true; return; }
+    if (!dirtyRef.current) return;
+    savingRef.current = true;
+    try {
+      const merged = { ...nodeRef.current, ...local };
+      delete merged.$rev; // skip OCC — force-write
+      await set(merged);
+      dirtyRef.current = false;
+      lastSaveRef.current = Date.now();
+    } catch (e) {
+      console.error('[autoSave] failed:', e);
+    } finally {
+      savingRef.current = false;
+      if (pendingRef.current) {
+        pendingRef.current = false;
+        flush();
+      }
+    }
+  }, [local]);
+
+  const setField = useCallback((field: string, value: unknown) => {
+    setLocal(prev => ({ ...prev, [field]: value }));
+    dirtyRef.current = true;
+
+    if (timerRef.current) clearTimeout(timerRef.current);
+    const elapsed = Date.now() - lastSaveRef.current;
+    const delay = elapsed > 2000 ? 500 : 2000; // first batch fast, then throttle
+    timerRef.current = setTimeout(() => { timerRef.current = null; flush(); }, delay);
+  }, [flush]);
+
+  // Flush on unmount
+  useEffect(() => () => {
+    if (timerRef.current) { clearTimeout(timerRef.current); flush(); }
+  }, [flush]);
+
+  // Reset local on node path change
+  useEffect(() => { setLocal({}); dirtyRef.current = false; }, [node.$path]);
+
+  const merged = useMemo(() => ({ ...node, ...local }), [node, local]);
+
+  return [merged, setField, dirtyRef.current] as const;
+}
+
 // ── Internals ──
 
 const AsyncGenFn = Object.getPrototypeOf(async function* () { }).constructor;

package/src/lib/minimd.ts

@@ -1,6 +1,7 @@
 // Minimal markdown → HTML for chat bubbles (~50 lines)
 // Covers: headers, bold, italic, inline code, code blocks, links, lists, blockquotes, hr
 import './minimd.css';
+import { sanitizeHref } from './sanitize-href';
 
 const esc = (s: string) => s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
 
@@ -11,7 +12,12 @@ function inline(s: string): string {
     .replace(/__(.+?)__/g, '<strong>$1</strong>')
     .replace(/\*(.+?)\*/g, '<em>$1</em>')
     .replace(/_(.+?)_/g, '<em>$1</em>')
-    .replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" target="_blank" rel="noopener">$1</a>');
+    .replace(/\[([^\]]+)\]\(([^)]+)\)/g, (_, text, url) => {
+      const safe = sanitizeHref(url);
+      if (!safe) return text;
+      const safeUrl = safe.replace(/"/g, '&quot;');
+      return `<a href="${safeUrl}" target="_blank" rel="noopener">${text}</a>`;
+    });
 }
 
 export function minimd(src: string): string {

package/src/lib/sanitize-href.ts

@@ -0,0 +1,13 @@
+// Allowlist-based href sanitizer — blocks javascript:, data:, vbscript:, etc.
+// Strips control characters before protocol check to defeat browser bypass vectors
+// (e.g. "java\tscript:" → browsers collapse to "javascript:")
+
+const SAFE_PROTOCOL = /^(https?:|mailto:|tel:|\/|#)/i;
+
+/** Returns sanitized URL string, or null if the protocol is unsafe. */
+export function sanitizeHref(url: string): string | null {
+  const trimmed = url.replace(/[\x00-\x20]+/g, '');
+  if (!trimmed) return null;
+  if (SAFE_PROTOCOL.test(trimmed)) return url.trim();
+  return null;
+}

package/src/main.tsx

@@ -1,7 +1,7 @@
 import 'reflect-metadata';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { enablePatches } from 'immer';
-import { StrictMode } from 'react';
+import { type ReactNode } from 'react';
 import { createRoot } from 'react-dom/client';
 import { App } from './App';
 import './load-client';
@@ -12,13 +12,25 @@ enablePatches();
 
 const queryClient = new QueryClient();
 
-const root = document.getElementById('root');
-if (!root) throw new Error('No #root element');
-createRoot(root).render(
-  <StrictMode>
-    <QueryClientProvider client={queryClient}>
-      <App />
-      <Toaster />
-    </QueryClientProvider>
-  </StrictMode>,
-);
+// StrictMode off: FlowGram inversify container breaks on double-mount
+// https://github.com/bytedance/flowgram.ai/issues/402
+const Strict = ({ children }: { children: ReactNode }) => children;
+
+/** Mount Treenity UI into a DOM element */
+export function boot(el: HTMLElement | string = '#root') {
+  const root = typeof el === 'string' ? document.querySelector(el) : el;
+  if (!root) throw new Error(`Treenity boot: element "${el}" not found`);
+  createRoot(root as HTMLElement).render(
+    <Strict>
+      <QueryClientProvider client={queryClient}>
+        <App />
+        <Toaster />
+      </QueryClientProvider>
+    </Strict>,
+  );
+}
+
+// Auto-boot when loaded directly (not imported)
+if (typeof document !== 'undefined' && document.getElementById('root')) {
+  boot('#root');
+}

package/src/mods/editor-ui/FieldLabel.tsx

@@ -8,6 +8,7 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from '#components/ui/dropdown-menu';
+import { Input } from '#components/ui/input';
 import { isRef } from '@treenity/core';
 import { useState } from 'react';
 
@@ -101,8 +102,8 @@ export function RefEditor({ value, onChange }: {
     <div className="flex flex-col gap-1 flex-1 min-w-0">
       <div className="flex items-center gap-1">
         <span className="text-[9px] text-muted-foreground shrink-0 w-5">$ref</span>
-        <input
-          className="flex-1 min-w-0"
+        <Input
+          className="h-7 text-xs flex-1 min-w-0"
           value={value.$ref}
           onChange={(e) => onChange(hasMap ? { $ref: e.target.value, $map: value.$map } : { $ref: e.target.value })}
           placeholder="path"
@@ -111,8 +112,8 @@ export function RefEditor({ value, onChange }: {
       {hasMap && (
         <div className="flex items-center gap-1">
           <span className="text-[9px] text-muted-foreground shrink-0 w-5">$map</span>
-          <input
-            className="flex-1 min-w-0"
+          <Input
+            className="h-7 text-xs flex-1 min-w-0"
             value={value.$map ?? ''}
             onChange={(e) => onChange({ $ref: value.$ref, $map: e.target.value })}
             placeholder="field"

package/src/mods/editor-ui/default-edit.tsx

@@ -1,3 +1,5 @@
+import { Checkbox } from '#components/ui/checkbox';
+import { Input } from '#components/ui/input';
 import { useSchema } from '#schema-loader';
 import { type ComponentData, isRef, register, resolve } from '@treenity/core';
 import { createElement } from 'react';
@@ -57,12 +59,12 @@ function DefaultEditForm({ value, onChange }: { value: ComponentData; onChange?:
               <FieldLabel label={k} value={v} onChange={onCh} />
               {typeof v === 'boolean' ? (
                 <label className="flex items-center gap-2 cursor-pointer">
-                  <input type="checkbox" checked={!!data[k]} className="w-auto"
-                    onChange={(e) => setData((prev) => ({ ...prev, [k]: e.target.checked }))} />
+                  <Checkbox checked={!!data[k]}
+                    onChange={(e) => setData((prev) => ({ ...prev, [k]: (e.target as HTMLInputElement).checked }))} />
                   {data[k] ? 'true' : 'false'}
                 </label>
               ) : typeof v === 'number' ? (
-                <input type="number" value={String(data[k] ?? 0)}
+                <Input type="number" className="h-7 text-xs" value={String(data[k] ?? 0)}
                   onChange={(e) => setData((prev) => ({ ...prev, [k]: Number(e.target.value) }))} />
               ) : Array.isArray(v) ? (
                 <StringArrayField value={data[k] as unknown[]}
@@ -78,7 +80,7 @@ function DefaultEditForm({ value, onChange }: { value: ComponentData; onChange?:
                     : <pre className="text-[11px] font-mono text-foreground/60">{JSON.stringify(data[k], null, 2)}</pre>;
                 })()
               ) : (
-                <input value={String(data[k] ?? '')}
+                <Input className="h-7 text-xs" value={String(data[k] ?? '')}
                   onChange={(e) => setData((prev) => ({ ...prev, [k]: e.target.value }))} />
               )}
             </div>

package/src/mods/editor-ui/form-field.tsx

@@ -1,5 +1,6 @@
 import { Button } from '#components/ui/button';
 import { Input } from '#components/ui/input';
+import { Textarea } from '#components/ui/textarea';
 import { isRef, resolveExact } from '@treenity/core';
 import { createElement, useState } from 'react';
 import { FieldLabel, RefEditor } from './FieldLabel';
@@ -42,7 +43,7 @@ export function renderField(
   const handler = resolveExact(fieldSchema.type, ctx) ?? resolveExact('string', ctx);
   if (!handler)
     return (
-      <div key={name} className="text-[--danger] text-xs">
+      <div key={name} className="text-destructive text-xs">
         No form handler: {fieldSchema.type}
       </div>
     );
@@ -91,7 +92,8 @@ export function StringArrayField({
 
   if (!isStrings) {
     return (
-      <textarea
+      <Textarea
+        className="min-h-16 text-xs font-mono"
         value={JSON.stringify(value, null, 2)}
         onChange={(e) => {
           try {

package/src/mods/editor-ui/type-picker.tsx

@@ -1,6 +1,7 @@
 import { Button } from '#components/ui/button';
 import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '#components/ui/command';
 import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from '#components/ui/dialog';
+import { Input } from '#components/ui/input';
 import { trpc } from '#trpc';
 import { isOfType, type NodeData } from '@treenity/core';
 import { useEffect, useRef, useState } from 'react';
@@ -123,9 +124,9 @@ export function TypePicker({
         </Command>
 
         <div className="px-4 py-3 border-t border-border">
-          <input
+          <Input
             ref={nameRef}
-            className="w-full"
+            className="h-8 text-sm"
             placeholder={nameLabel}
             value={name}
             onChange={(e) => { setName(e.target.value); setNameManual(true); }}

package/src/mods/treenity/preview.tsx

@@ -1,5 +1,6 @@
 // Reusable type preview — Storybook-like: context switcher + live render + schema form editor
 
+import { Button } from '#components/ui/button';
 import { Render, RenderContext } from '#context';
 import { type ComponentData, getContextsForType, type NodeData } from '@treenity/core';
 import { useMemo, useState } from 'react';
@@ -94,17 +95,15 @@ export function TypePreview({ typeName, properties }: {
     <div>
       <div className="flex gap-1.5 mb-2">
         {reactContexts.map(c => (
-          <button
+          <Button
             key={c}
+            variant={previewCtx === c ? 'default' : 'outline'}
+            size="sm"
+            className="h-auto rounded-full px-2.5 py-0.5 text-xs font-mono"
             onClick={() => setPreviewCtx(prev => prev === c ? null : c)}
-            className={`px-2.5 py-0.5 rounded-full text-xs font-mono border cursor-pointer transition-colors ${
-              previewCtx === c
-                ? 'bg-primary text-primary-foreground border-primary'
-                : 'bg-muted border-border text-muted-foreground hover:border-primary/50'
-            }`}
           >
             {c}
-          </button>
+          </Button>
         ))}
       </div>
 

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

@@ -1,5 +1,6 @@
 // Ref node/component view — shows target path, resolve button, inline preview
 
+import { Button } from '#components/ui/button';
 import { Render } from '#context';
 import { usePath } from '#hooks';
 import { type NodeData, register } from '@treenity/core';
@@ -45,20 +46,24 @@ function RefDisplay({ target, onSelect }: { target: string; onSelect?: (p: strin
         <span className="text-sm font-mono text-primary">{target}</span>
 
         {onSelect && (
-          <button
-            className="text-xs px-2 py-0.5 rounded bg-muted hover:bg-muted/80 text-foreground border border-border"
+          <Button
+            variant="outline"
+            size="sm"
+            className="h-auto px-2 py-0.5 text-xs"
             onClick={() => onSelect(target)}
           >
             Go to
-          </button>
+          </Button>
         )}
 
-        <button
-          className="text-xs px-2 py-0.5 rounded bg-muted hover:bg-muted/80 text-foreground border border-border"
+        <Button
+          variant="outline"
+          size="sm"
+          className="h-auto px-2 py-0.5 text-xs"
           onClick={() => setResolved(!resolved)}
         >
           {resolved ? 'Collapse' : 'Resolve'}
-        </button>
+        </Button>
       </div>
 
       {/* Resolved target */}

package/src/mods/treenity/seed.ts

@@ -1,9 +1,9 @@
-import { type NodeData, R, S } from '@treenity/core';
+import { type NodeData, A, R, S, W } from '@treenity/core';
 import { registerPrefab } from '@treenity/core/mod';
 
 registerPrefab('core', 'seed', [
   { $path: 'sys', $type: 'treenity.system' },
-  { $path: 'auth', $type: 'dir' },
+  { $path: 'auth', $type: 'dir', $acl: [{ g: 'admins', p: R | W | A | S }, { g: 'public', p: 0 }] },
   { $path: 'auth/users', $type: 'mount-point',
     connection: { $type: 'connection', db: 'treenity', collection: 'users' },
     mount: { $type: 't.mount.mongo' },
@@ -20,6 +20,7 @@ registerPrefab('core', 'seed', [
   { $path: 'auth/sessions', $type: 'mount-point',
     connection: { $type: 'connection', db: 'treenity', collection: 'sessions' },
     mount: { $type: 't.mount.mongo' },
+    $acl: [{ g: 'admins', p: R | W | A | S }, { g: 'authenticated', p: 0 }, { g: 'public', p: 0 }],
   },
   { $path: 'mnt', $type: 'dir' },
   { $path: 'mnt/orders', $type: 't.mount.mongo',

package/src/symbols.ts

@@ -1,18 +1,25 @@
 // Symbol-based component location metadata.
-// Stamped on deserialization (cache.put). Survive spread, invisible to JSON/keys/entries.
+// Stamped on deserialization (cache.put). Non-enumerable so they're
+// invisible to structuredClone, spread, and JSON/keys/entries.
 
 import { isComponent, type NodeData } from '@treenity/core';
 
 export const $key = Symbol.for('treenity.$key');
 export const $node = Symbol.for('treenity.$node');
 
+function hide(obj: object, sym: symbol, value: unknown): void {
+  Object.defineProperty(obj, sym, { value, enumerable: false, writable: false, configurable: true });
+}
+
 export function stampNode(node: NodeData): void {
-  (node as any)[$key] = '';
-  (node as any)[$node] = node;
+  if ((node as any)[$node] === node) return;
+
+  hide(node, $key, '');
+  hide(node, $node, node);
 
   for (const [k, v] of Object.entries(node)) {
     if (k.startsWith('$') || !isComponent(v)) continue;
-    (v as any)[$key] = k;
-    (v as any)[$node] = node;
+    hide(v, $key, k);
+    hide(v, $node, node);
   }
 }