@treenity/react 3.0.0 → 3.0.2

package/src/hooks.ts

@@ -5,10 +5,19 @@
 // execute:     action caller
 // watch:       universal async generator
 
-import { type Class, getComp, type TypeProxy } from '@treenity/core/comp';
-import { getComponent, type NodeData, normalizeType } from '@treenity/core/core';
+import { getComponent, type NodeData, normalizeType, resolve } from '@treenity/core';
+import { type Class, type TypeProxy } from '@treenity/core/comp';
 import { deriveURI, parseURI } from '@treenity/core/uri';
-import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useSyncExternalStore } from 'react';
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  useSyncExternalStore,
+} from 'react';
 import * as cache from './cache';
 import { tree } from './client';
 import { trpc } from './trpc';
@@ -50,7 +59,7 @@ export function usePath<T extends object>(
   const path = isTyped ? pathOrUri : (parsed?.path ?? null);
 
   const node = useSyncExternalStore(
-    useCallback((cb: () => void) => (path ? cache.subscribePath(path, cb) : () => {}), [path]),
+    useCallback((cb: () => void) => (path ? cache.subscribePath(path, cb) : () => { }), [path]),
     useCallback(() => (path ? cache.get(path) : undefined), [path]),
   );
 
@@ -90,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(
@@ -102,21 +114,153 @@ 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 ──
 
 export const execute = (
-  path: string, action: string, data?: unknown, type?: string, key?: string,
-) => trpc.execute.mutate({ path, type, key, action, data });
+  pathOrUri: string, action: string, data?: unknown, type?: string, key?: string,
+) => {
+  let path = pathOrUri;
+  if (!key && pathOrUri.includes('#')) {
+    const parsed = parseURI(pathOrUri);
+    path = parsed.path;
+    key = parsed.key;
+  }
+
+  // Optimistic: resolve class from cache + registry, predict locally
+  const cached = cache.get(path);
+  if (cached) {
+    const compType = type ?? cached.$type;
+    const cls = resolve(compType, 'class');
+    if (cls) {
+      const fn = cls.prototype?.[action];
+      if (fn) predictOptimistic(path, cls, key, fn, data);
+    }
+  }
+
+  return trpc.execute.mutate({ path, type, key, action, data });
+};
+
+// ── useCanWrite: ACL-based write permission check ──
+
+const W = 2;
+const permCache = new Map<string, { perm: number; ts: number }>();
+const PERM_TTL = 30_000; // 30s cache
+
+export function useCanWrite(path: string | null): boolean {
+  const [perm, setPerm] = useState<number>(0);
+
+  useEffect(() => {
+    if (!path) return;
+    const cached = permCache.get(path);
+    if (cached && Date.now() - cached.ts < PERM_TTL) {
+      setPerm(cached.perm);
+      return;
+    }
+    trpc.getPerm.query({ path }).then((p) => {
+      permCache.set(path, { perm: p, ts: Date.now() });
+      setPerm(p);
+    }).catch(() => setPerm(0));
+  }, [path]);
+
+  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;
+const AsyncGenFn = Object.getPrototypeOf(async function* () { }).constructor;
+const AsyncFn = Object.getPrototypeOf(async function () { }).constructor;
+
+/** Optimistic prediction: run a sync method locally on a cloned cached node */
+export function predictOptimistic<T extends object>(
+  path: string, cls: Class<T>, key: string | undefined,
+  fn: Function, data: unknown,
+): void {
+  if (fn instanceof AsyncFn) return;
+
+  const cached = cache.get(path);
+  if (!cached) return;
+
+  try {
+    const draft = structuredClone(cached);
+    const target = getComponent(draft, cls, key);
+    if (!target) return;
+
+    fn.call(target, data);
+    cache.put(draft);
+  } catch { /* prediction failed — server-only */ }
+}
 
 function streamToAsyncIterable<T>(
   input: { path: string; type?: string; key?: string; action: string; data?: unknown },
@@ -157,7 +301,7 @@ function makeProxy<T extends object>(
 ): TypeProxy<T> {
   const type = normalizeType(cls);
   const comp = node
-    ? (key ? getComponent(node, key) : getComp(node, cls))
+    ? (key ? getComponent(node, key) : getComponent(node, cls))
     : undefined;
 
   return new Proxy(comp ?? {}, {
@@ -166,7 +310,11 @@ function makeProxy<T extends object>(
       if (typeof fn === 'function') {
         if (fn instanceof AsyncGenFn)
           return (data?: unknown) => streamToAsyncIterable({ path, type, key, action: prop, data });
-        return (data?: unknown) => trpc.execute.mutate({ path, type, key, action: prop, data });
+
+        return (data?: unknown) => {
+          predictOptimistic(path, cls, key, fn, data);
+          return trpc.execute.mutate({ path, type, key, action: prop, data });
+        };
       }
       return (comp as any)?.[prop];
     },

package/src/idb.ts

@@ -2,7 +2,7 @@
 // Raw IDB API, no dependencies. Fire-and-forget friendly.
 // Degrades silently if IDB unavailable (private browsing, SSR).
 
-import type { NodeData } from '@treenity/core/core';
+import type { NodeData } from '@treenity/core';
 
 const DB_NAME = 'treenity';
 const DB_VERSION = 1;

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/lib/to-plain.ts

@@ -0,0 +1,21 @@
+// Deep-clone any value into a plain JSON-safe object.
+// Strips valtio proxies, preserves Dates, drops functions/symbols.
+
+export function toPlain<T>(value: T): T {
+  if (value === null || value === undefined) return value;
+
+  if (value instanceof Date) return new Date(value.getTime()) as T;
+
+  if (Array.isArray(value)) return value.map(toPlain) as T;
+
+  if (typeof value === 'object') {
+    const out: Record<string, unknown> = {};
+    for (const [k, v] of Object.entries(value)) {
+      if (typeof v === 'function' || typeof v === 'symbol') continue;
+      out[k] = toPlain(v);
+    }
+    return out as T;
+  }
+
+  return value;
+}

package/src/main.tsx

@@ -1,22 +1,32 @@
 import 'reflect-metadata';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { enablePatches } from 'immer';
-import { StrictMode } from 'react';
+import { StrictMode, type ReactNode } from 'react';
 import { createRoot } from 'react-dom/client';
 import { App } from './App';
 import './load-client';
-import './style.css';
+import { Toaster } from './components/ui/sonner';
+import './root.css';
 
 enablePatches();
 
 const queryClient = new QueryClient();
 
+// StrictMode off: FlowGram inversify container breaks on double-mount
+// https://github.com/bytedance/flowgram.ai/issues/402
+// TODO: re-enable once FlowGram fixes React 19 StrictMode support
+// const Strict = import.meta.env.VITE_STRICT_MODE !== 'false'
+//   ? StrictMode
+//   : ({ children }: { children: ReactNode }) => children;
+const Strict = ({ children }: { children: ReactNode }) => children;
+
 const root = document.getElementById('root');
 if (!root) throw new Error('No #root element');
 createRoot(root).render(
-  <StrictMode>
+  <Strict>
     <QueryClientProvider client={queryClient}>
       <App />
+      <Toaster />
     </QueryClientProvider>
-  </StrictMode>,
+  </Strict>,
 );

package/src/mods/clients.ts

@@ -0,0 +1,3 @@
+// Barrel: all react mod client registrations
+import './editor-ui/client';
+import './treenity/client';

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

@@ -0,0 +1,125 @@
+// FieldLabel — interactive label for Inspector fields
+// Click → dropdown menu (value/$ref/$map + copy/clear), drop target for tree nodes
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '#components/ui/dropdown-menu';
+import { Input } from '#components/ui/input';
+import { isRef } from '@treenity/core';
+import { useState } from 'react';
+
+type FieldMode = 'value' | 'ref' | 'map';
+
+function getFieldMode(v: unknown): FieldMode {
+  if (v && typeof v === 'object' && isRef(v)) {
+    return (v as { $map?: string }).$map !== undefined ? 'map' : 'ref';
+  }
+  return 'value';
+}
+
+const MODE_LABELS: Record<FieldMode, string> = { value: 'val', ref: '$ref', map: '$map' };
+
+/** Interactive field label — click for mode menu, drop target for tree nodes */
+export function FieldLabel({ label, value, onChange }: {
+  label: string;
+  value: unknown;
+  onChange?: (next: unknown) => void;
+}) {
+  const [dragOver, setDragOver] = useState(false);
+  const mode = getFieldMode(value);
+
+  function switchMode(next: FieldMode) {
+    if (!onChange || next === mode) return;
+    if (next === 'value') {
+      onChange(0);
+    } else if (next === 'ref') {
+      onChange({ $ref: '.' });
+    } else {
+      const r = isRef(value) ? (value as { $ref: string }).$ref : '.';
+      onChange({ $ref: r, $map: '' });
+    }
+  }
+
+  if (!onChange) {
+    return <label>{label}</label>;
+  }
+
+  return (
+    <label
+      className={dragOver ? 'text-primary cursor-pointer' : 'cursor-pointer'}
+      onDragOver={(e) => {
+        if (e.dataTransfer.types.includes('application/treenity-path')) {
+          e.preventDefault();
+          setDragOver(true);
+        }
+      }}
+      onDragLeave={() => setDragOver(false)}
+      onDrop={(e) => {
+        e.preventDefault();
+        setDragOver(false);
+        const path = e.dataTransfer.getData('application/treenity-path');
+        if (path && onChange) {
+          const existing = isRef(value) ? (value as { $map?: string }).$map : undefined;
+          onChange(existing !== undefined ? { $ref: path, $map: existing } : { $ref: path });
+        }
+      }}
+    >
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <span className="block overflow-hidden text-ellipsis">{label}</span>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="start" className="min-w-[100px]">
+          {(['value', 'ref', 'map'] as FieldMode[]).map((m) => (
+            <DropdownMenuItem key={m} onClick={() => switchMode(m)}>
+              {mode === m ? '\u25CF ' : '\u00A0\u00A0'}{MODE_LABELS[m]}
+            </DropdownMenuItem>
+          ))}
+          <DropdownMenuSeparator />
+          <DropdownMenuItem onClick={() => navigator.clipboard.writeText(JSON.stringify(value))}>
+            Copy
+          </DropdownMenuItem>
+          <DropdownMenuItem onClick={() => onChange(undefined)}>
+            Clear
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </label>
+  );
+}
+
+/** Inline ref/map editor — $ref + optional $map, compact single/double row */
+export function RefEditor({ value, onChange }: {
+  value: { $ref: string; $map?: string };
+  onChange: (next: unknown) => void;
+}) {
+  const hasMap = value.$map !== undefined;
+
+  return (
+    <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="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"
+        />
+      </div>
+      {hasMap && (
+        <div className="flex items-center gap-1">
+          <span className="text-[9px] text-muted-foreground shrink-0 w-5">$map</span>
+          <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"
+          />
+        </div>
+      )}
+    </div>
+  );
+}

package/src/mods/editor-ui/client.ts

@@ -1,7 +1,7 @@
 import './default-view';
+import './default-edit';
 import './layout-view';
 import './user-view';
-import './dir-view';
 import './list-items';
 import { registerFormFields } from './form-fields';
 

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

@@ -0,0 +1,101 @@
+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';
+import { FieldLabel, RefEditor } from './FieldLabel';
+import { renderField, StringArrayField } from './form-field';
+
+function DefaultEditForm({ value, onChange }: { value: ComponentData; onChange?: (next: ComponentData) => void }) {
+  const schema = useSchema(value.$type);
+  if (schema === undefined) return null;
+
+  const data: Record<string, unknown> = {};
+  for (const [k, v] of Object.entries(value)) {
+    if (!k.startsWith('$')) data[k] = v;
+  }
+
+  const setData = (fn: (prev: Record<string, unknown>) => Record<string, unknown>) => {
+    if (!onChange) return;
+    const next = fn(data);
+    onChange({ ...value, ...next } as ComponentData);
+  };
+
+  // Schema-driven form
+  if (schema && Object.keys(schema.properties).length > 0) {
+    return (
+      <div className="py-0.5 pb-2.5">
+        {Object.entries(schema.properties).map(([field, prop]) => {
+          const p = prop as {
+            type: string; title: string; format?: string; description?: string;
+            readOnly?: boolean; enum?: string[]; items?: { type?: string; properties?: Record<string, unknown> };
+            refType?: string;
+          };
+          return renderField(field, {
+            type: p.format ?? p.type, label: p.title ?? field, placeholder: p.description,
+            readOnly: p.readOnly || !onChange, enum: p.enum, items: p.items, refType: p.refType,
+          }, data, setData);
+        })}
+      </div>
+    );
+  }
+
+  // Fallback: raw field rendering
+  if (Object.keys(data).length > 0) {
+    return (
+      <div className="py-0.5 pb-2.5">
+        {Object.entries(data).map(([k, v]) => {
+          const onCh = (next: unknown) => setData((prev) => ({ ...prev, [k]: next }));
+          if (v && typeof v === 'object' && isRef(v)) {
+            return (
+              <div key={k} className="field">
+                <FieldLabel label={k} value={v} onChange={onCh} />
+                <RefEditor value={v as { $ref: string; $map?: string }} onChange={onCh} />
+              </div>
+            );
+          }
+          return (
+            <div key={k} className={`field${Array.isArray(v) || (typeof v === 'object' && v !== null) ? ' stack' : ''}`}>
+              <FieldLabel label={k} value={v} onChange={onCh} />
+              {typeof v === 'boolean' ? (
+                <label className="flex items-center gap-2 cursor-pointer">
+                  <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" 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[]}
+                  onChange={(next) => setData((prev) => ({ ...prev, [k]: next }))} />
+              ) : typeof v === 'object' ? (
+                (() => {
+                  const h = resolve('object', 'react:form');
+                  return h
+                    ? createElement(h as any, {
+                        value: { $type: 'object', value: data[k] },
+                        onChange: (next: { value: unknown }) => setData((prev) => ({ ...prev, [k]: next.value })),
+                      })
+                    : <pre className="text-[11px] font-mono text-foreground/60">{JSON.stringify(data[k], null, 2)}</pre>;
+                })()
+              ) : (
+                <Input className="h-7 text-xs" value={String(data[k] ?? '')}
+                  onChange={(e) => setData((prev) => ({ ...prev, [k]: e.target.value }))} />
+              )}
+            </div>
+          );
+        })}
+      </div>
+    );
+  }
+
+  // Empty
+  return (
+    <pre className="text-[11px] font-mono text-foreground/60 bg-muted/30 rounded p-2 whitespace-pre-wrap">
+      {JSON.stringify(data, null, 2)}
+    </pre>
+  );
+}
+
+register('default', 'react:edit', DefaultEditForm as any);

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

@@ -1,8 +1,11 @@
+import './editor-ui.css';
+import { Button } from '#components/ui/button';
 import { Render, RenderContext } from '#context';
 import { useChildren } from '#hooks';
 import { trpc } from '#trpc';
-import { type ComponentData, type NodeData, register } from '@treenity/core/core';
+import { type ComponentData, type NodeData, register } from '@treenity/core';
 import { useCallback, useState } from 'react';
+import { EmptyNodePlaceholder } from './empty-placeholder';
 import { getComponents, getPlainFields, getSchema } from './node-utils';
 
 /** Fallback for components without their own react handler */
@@ -45,7 +48,7 @@ function ComponentFieldsView({ value }: { value: ComponentData }) {
   );
 }
 
-function GenerateViewButton({ type, sample }: { type: string; sample: NodeData }) {
+export function GenerateViewButton({ type, sample, context, label }: { type: string; sample: NodeData; context?: string; label?: string }) {
   const [status, setStatus] = useState<'idle' | 'generating' | 'done' | 'error'>('idle');
   const [error, setError] = useState('');
 
@@ -58,7 +61,7 @@ function GenerateViewButton({ type, sample }: { type: string; sample: NodeData }
       await trpc.execute.mutate({
         path: '/metatron',
         action: 'task',
-        data: { prompt: `Generate a React view for type "${type}". Sample data:\n${JSON.stringify(clean, null, 2)}` },
+        data: { prompt: `Generate a React view for type "${type}"${context ? ` in context "${context}"` : ''}. Sample data:\n${JSON.stringify(clean, null, 2)}` },
       });
       setStatus('done');
     } catch (err: any) {
@@ -78,12 +81,14 @@ function GenerateViewButton({ type, sample }: { type: string; sample: NodeData }
   }
 
   return (
-    <button
+    <Button
+      variant="outline"
+      size="sm"
       onClick={generate}
-      className="text-sm text-blue-400 hover:text-blue-300 border border-blue-400/30 rounded px-3 py-1.5 my-2"
+      className="text-blue-400 border-blue-400/30 hover:text-blue-300 my-2"
     >
-      Generate AI View
-    </button>
+      {label ?? 'Generate AI View'}
+    </Button>
   );
 }
 
@@ -134,7 +139,7 @@ function DefaultNodeView({ value }: { value: NodeData }) {
         </RenderContext>
       )}
 
-      {children.length === 0 && !hasInfo && <div className="node-empty">Empty node</div>}
+      {children.length === 0 && !hasInfo && <EmptyNodePlaceholder value={value} />}
     </div>
   );
 }

package/src/mods/editor-ui/dir-view.tsx

@@ -1,6 +1,6 @@
 import { Render, RenderContext } from '#context';
 import { useChildren } from '#hooks';
-import { type NodeData, register } from '@treenity/core/core';
+import { type NodeData } from '@treenity/core';
 
 const STATUS_COLORS: Record<string, [string, string]> = {
   draft: ['var(--accent-subtle, #1a2a3a)', 'var(--accent)'],
@@ -88,4 +88,4 @@ function FolderView({ value }: { value: NodeData }) {
   );
 }
 
-register('dir', 'react', FolderView as any);
+// register('dir', 'react', FolderView as any);