@treenity/react 3.0.0 → 3.0.1

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

@@ -0,0 +1,147 @@
+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 { trpc } from '#trpc';
+import { isOfType, type NodeData } from '@treenity/core';
+import { useEffect, useRef, useState } from 'react';
+
+export type TypeInfo = { type: string; label: string; description: string };
+
+export async function loadTypes(): Promise<TypeInfo[]> {
+  const { items } = (await trpc.getChildren.query({ path: '/sys/types', limit: 0, depth: 99 })) as {
+    items: NodeData[];
+    total: number;
+  };
+  return items
+    .filter((n) => isOfType(n, 'type'))
+    .map((n) => {
+      const schema = n.schema as { $type: string; title?: string; description?: string } | undefined;
+      const typeName = n.$path.slice('/sys/types/'.length).replace(/\//g, '.');
+      return {
+        type: typeName,
+        label: schema?.title ?? typeName,
+        description: schema?.description ?? '',
+      };
+    });
+}
+
+function groupByNamespace(types: TypeInfo[]): Map<string, TypeInfo[]> {
+  const groups = new Map<string, TypeInfo[]>();
+  for (const t of types) {
+    const dotIdx = t.type.indexOf('.');
+    const ns = dotIdx === -1 ? 'core' : t.type.slice(0, dotIdx);
+    if (!groups.has(ns)) groups.set(ns, []);
+    groups.get(ns)!.push(t);
+  }
+  return groups;
+}
+
+export function TypePicker({
+  onSelect,
+  onCancel,
+  title = 'Create Node',
+  nameLabel = 'Node name',
+  action = 'Create',
+  autoName = false,
+}: {
+  onSelect: (name: string, type: string) => void;
+  onCancel: () => void;
+  title?: string;
+  nameLabel?: string;
+  action?: string;
+  autoName?: boolean;
+}) {
+  const [types, setTypes] = useState<TypeInfo[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [name, setName] = useState('');
+  const [nameManual, setNameManual] = useState(false);
+  const [selectedType, setSelectedType] = useState<string | null>(null);
+  const nameRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    loadTypes()
+      .then(setTypes)
+      .catch((err) => {
+        console.error('Failed to load types:', err);
+        setError('Failed to load types');
+      })
+      .finally(() => setLoading(false));
+  }, []);
+
+  function handleSelectType(type: string) {
+    setSelectedType(type);
+    if (autoName && !nameManual) {
+      const lastSegment = type.includes('.') ? type.slice(type.lastIndexOf('.') + 1) : type;
+      setName(lastSegment);
+    }
+    requestAnimationFrame(() => nameRef.current?.focus());
+  }
+
+  function handleSubmit() {
+    if (name && selectedType) onSelect(name, selectedType);
+  }
+
+  const groups = groupByNamespace(types);
+
+  return (
+    <Dialog open onOpenChange={(open) => { if (!open) onCancel(); }}>
+      <DialogContent className="p-0 gap-0 max-w-[380px]" showCloseButton={false}>
+        <DialogHeader className="px-4 pt-4 pb-2">
+          <DialogTitle className="text-[15px]">{title}</DialogTitle>
+        </DialogHeader>
+
+        <Command className="rounded-none border-none" shouldFilter>
+          <CommandInput placeholder="Search types..." />
+          <CommandList className="max-h-[280px]">
+            {loading && <div className="p-3 text-muted-foreground text-[13px]">Loading types...</div>}
+            {error && <div className="p-3 text-destructive text-[13px]">{error}</div>}
+            <CommandEmpty>No types found</CommandEmpty>
+            {[...groups.entries()].map(([ns, items]) => (
+              <CommandGroup key={ns} heading={ns}>
+                {items.map((t) => (
+                  <CommandItem
+                    key={t.type}
+                    value={`${t.type} ${t.label} ${t.description}`}
+                    onSelect={() => handleSelectType(t.type)}
+                    className={selectedType === t.type ? 'bg-accent text-accent-foreground' : ''}
+                  >
+                    <div className="flex flex-col gap-0.5">
+                      <div className="flex items-center gap-2">
+                        <span className="font-mono text-[13px]">{t.type}</span>
+                        {t.label !== t.type && <span className="text-muted-foreground text-[12px]">{t.label}</span>}
+                      </div>
+                      {t.description && (
+                        <span className="text-[11px] text-muted-foreground/60 leading-tight">{t.description}</span>
+                      )}
+                    </div>
+                  </CommandItem>
+                ))}
+              </CommandGroup>
+            ))}
+          </CommandList>
+        </Command>
+
+        <div className="px-4 py-3 border-t border-border">
+          <input
+            ref={nameRef}
+            className="w-full"
+            placeholder={nameLabel}
+            value={name}
+            onChange={(e) => { setName(e.target.value); setNameManual(true); }}
+            onKeyDown={(e) => { if (e.key === 'Enter') { e.preventDefault(); handleSubmit(); } }}
+          />
+        </div>
+
+        <DialogFooter className="px-4 pb-4">
+          <Button variant="outline" onClick={onCancel}>Cancel</Button>
+          <Button disabled={!name || !selectedType} onClick={handleSubmit}>
+            {action}
+            {name ? ` "${name}"` : ''}
+            {selectedType ? ` as ${selectedType}` : ''}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

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

@@ -1,4 +1,4 @@
-import { type NodeData, register } from '@treenity/core/core';
+import { type NodeData, register } from '@treenity/core';
 import { pathName } from './list-items';
 import { getComponents, getSchema } from './node-utils';
 

package/src/mods/servers.ts

@@ -0,0 +1,2 @@
+// Barrel: all react mod server registrations
+// (none currently — react mods are client-only)

package/src/mods/treenity/groups/index.tsx

@@ -3,7 +3,7 @@
 import { Badge } from '#components/ui/badge';
 import { Button } from '#components/ui/button';
 import { Input } from '#components/ui/input';
-import { register } from '@treenity/core/core';
+import { register } from '@treenity/core';
 import { X } from 'lucide-react';
 import { useState } from 'react';
 

package/src/mods/treenity/preview.tsx

@@ -1,7 +1,7 @@
 // Reusable type preview — Storybook-like: context switcher + live render + schema form editor
 
 import { Render, RenderContext } from '#context';
-import { type ComponentData, getContextsForType, type NodeData } from '@treenity/core/core';
+import { type ComponentData, getContextsForType, type NodeData } from '@treenity/core';
 import { useMemo, useState } from 'react';
 
 // ── Mock data generator (by JSON Schema field type) ──

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

@@ -2,7 +2,7 @@
 
 import { Render } from '#context';
 import { usePath } from '#hooks';
-import { type NodeData, register } from '@treenity/core/core';
+import { type NodeData, register } from '@treenity/core';
 import { useState } from 'react';
 
 // ── Node-level view (for ref nodes like /sys/autostart/xxx) ──

package/src/mods/treenity/schema-form.tsx

@@ -2,7 +2,7 @@
 // Any type without a specific react:form handler falls here via resolve('default', 'react:form')
 
 import { type RenderProps } from '#context';
-import { register, resolve } from '@treenity/core/core';
+import { register, resolve } from '@treenity/core';
 import { createElement } from 'react';
 
 function DefaultSchemaForm({ value, onChange }: RenderProps) {

package/src/mods/treenity/seed.ts

@@ -1,4 +1,4 @@
-import { type NodeData, R, S } from '@treenity/core/core';
+import { type NodeData, R, S } from '@treenity/core';
 import { registerPrefab } from '@treenity/core/mod';
 
 registerPrefab('core', 'seed', [

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

@@ -1,6 +1,6 @@
 // Type node views — react + react:list + live preview
 
-import { getContextsForType, type NodeData, register } from '@treenity/core/core';
+import { getContextsForType, type NodeData, register } from '@treenity/core';
 import { TypePreview } from './preview';
 
 // ── Helpers ──

package/src/optimistic.test.ts

@@ -0,0 +1,111 @@
+// Optimistic prediction tests — predictOptimistic updates cache for sync methods
+
+import { registerType } from '@treenity/core/comp';
+import assert from 'node:assert';
+import { beforeEach, describe, it } from 'node:test';
+import * as cache from './cache';
+import { predictOptimistic } from './hooks';
+
+class Counter {
+  count = 0;
+
+  increment() {
+    this.count++;
+  }
+
+  setCount(data: { count: number }) {
+    this.count = data.count;
+  }
+
+  async asyncAction() {
+    // Simulates server-only async method
+    await Promise.resolve();
+    this.count = 999;
+  }
+
+  broken() {
+    throw new Error('intentional failure');
+  }
+}
+
+registerType('test.counter', Counter);
+
+describe('predictOptimistic', () => {
+  beforeEach(() => {
+    cache.clear();
+  });
+
+  it('sync method updates cache immediately', () => {
+    cache.put({ $path: '/c', $type: 'test.counter', count: 5 } as any);
+
+    predictOptimistic('/c', Counter, undefined, Counter.prototype.increment, undefined);
+
+    const node = cache.get('/c');
+    assert.strictEqual((node as any).count, 6);
+  });
+
+  it('sync method with data updates cache', () => {
+    cache.put({ $path: '/c', $type: 'test.counter', count: 0 } as any);
+
+    predictOptimistic('/c', Counter, undefined, Counter.prototype.setCount, { count: 42 });
+
+    const node = cache.get('/c');
+    assert.strictEqual((node as any).count, 42);
+  });
+
+  it('does not mutate original cached node', () => {
+    cache.put({ $path: '/c', $type: 'test.counter', count: 10 } as any);
+    const before = cache.get('/c');
+
+    predictOptimistic('/c', Counter, undefined, Counter.prototype.increment, undefined);
+
+    const after = cache.get('/c');
+    assert.notStrictEqual(before, after);
+  });
+
+  it('skips async methods', () => {
+    cache.put({ $path: '/c', $type: 'test.counter', count: 0 } as any);
+
+    predictOptimistic('/c', Counter, undefined, Counter.prototype.asyncAction, undefined);
+
+    const node = cache.get('/c');
+    assert.strictEqual((node as any).count, 0);
+  });
+
+  it('skips when path not in cache', () => {
+    predictOptimistic('/missing', Counter, undefined, Counter.prototype.increment, undefined);
+
+    assert.strictEqual(cache.get('/missing'), undefined);
+  });
+
+  it('swallows method errors without updating cache', () => {
+    cache.put({ $path: '/c', $type: 'test.counter', count: 5 } as any);
+
+    predictOptimistic('/c', Counter, undefined, Counter.prototype.broken, undefined);
+
+    const node = cache.get('/c');
+    assert.strictEqual((node as any).count, 5);
+  });
+
+  it('skips when component type not found on node', () => {
+    cache.put({ $path: '/c', $type: 'unknown.type', count: 5 } as any);
+
+    predictOptimistic('/c', Counter, undefined, Counter.prototype.increment, undefined);
+
+    const node = cache.get('/c');
+    assert.strictEqual((node as any).count, 5);
+  });
+
+  it('works with named component key', () => {
+    cache.put({
+      $path: '/n',
+      $type: 'dir',
+      stats: { $type: 'test.counter', count: 3 },
+    } as any);
+
+    predictOptimistic('/n', Counter, 'stats', Counter.prototype.increment, undefined);
+
+    const node = cache.get('/n') as any;
+    assert.strictEqual(node.stats.count, 4);
+  });
+});

package/src/remote-tree.test.ts

@@ -1,4 +1,4 @@
-import type { NodeData } from '@treenity/core/core';
+import type { NodeData } from '@treenity/core';
 import { withCache } from '@treenity/core/tree/cache';
 import assert from 'node:assert/strict';
 import { describe, it } from 'node:test';

package/src/remote-tree.ts

@@ -3,7 +3,7 @@
 // Enables client to use the same combinators as server:
 //   withSubscriptions(withCache(createRemoteTree(trpc)))
 
-import type { NodeData } from '@treenity/core/core';
+import type { NodeData } from '@treenity/core';
 import type { Tree } from '@treenity/core/tree';
 import { defaultPatch } from '@treenity/core/tree/patch';
 import type { trpc } from './trpc';

package/src/root.css

@@ -0,0 +1,117 @@
+/* Tailwind disabled — using CDN in index.html to avoid cross-package conflict */
+/* @import 'tailwindcss'; */
+/* @source "."; */
+/* @source "../../src/mods"; */
+
+/* Local fonts */
+@font-face { font-family: 'Manrope'; src: url('/fonts/Manrope-Light.ttf'); font-weight: 300; font-display: swap; }
+@font-face { font-family: 'Manrope'; src: url('/fonts/Manrope-Regular.ttf'); font-weight: 400; font-display: swap; }
+@font-face { font-family: 'Manrope'; src: url('/fonts/Manrope-Medium.ttf'); font-weight: 500; font-display: swap; }
+@font-face { font-family: 'Manrope'; src: url('/fonts/Manrope-SemiBold.ttf'); font-weight: 600; font-display: swap; }
+
+/* shadcn/ui theme tokens — now in CDN (index.html), kept here for reference */
+/* @theme inline extend { ... } — see index.html <style type="text/tailwindcss"> */
+
+/* Tailwind theme tokens — unlayered :root beats CDN's layered output */
+:root {
+  --color-background: #0d1117;
+  --color-foreground: #e6edf3;
+  --color-card: #161b22;
+  --color-card-foreground: #e6edf3;
+  --color-popover: #161b22;
+  --color-popover-foreground: #e6edf3;
+  --color-primary: #2ecc71;
+  --color-primary-foreground: #ffffff;
+  --color-secondary: #21262d;
+  --color-secondary-foreground: #e6edf3;
+  --color-muted: #161b22;
+  --color-muted-foreground: #7d8590;
+  --color-accent: rgba(46, 204, 113, 0.15);
+  --color-accent-foreground: #2ecc71;
+  --color-destructive: #f85149;
+  --color-destructive-foreground: #e6edf3;
+  --color-border: #30363d;
+  --color-input: #30363d;
+  --color-ring: #2ecc71;
+  --radius-sm: 4px;
+  --radius-md: 6px;
+  --radius-lg: 8px;
+
+  /* Legacy aliases */
+  --bg: var(--color-background);
+  --surface: var(--color-card);
+  --surface-2: var(--color-secondary);
+  --surface-3: var(--color-border);
+  --border: var(--color-border);
+  --border-subtle: var(--color-border);
+  --text: var(--color-foreground);
+  --text-2: var(--color-muted-foreground);
+  --text-3: color-mix(in srgb, var(--color-muted-foreground) 60%, transparent);
+  --accent: var(--color-primary);
+  --accent-subtle: var(--color-accent);
+  --danger: var(--color-destructive);
+  --danger-subtle: color-mix(in srgb, var(--color-destructive) 15%, transparent);
+  --success: #3fb950;
+  --success-subtle: rgba(63, 185, 80, 0.15);
+  --warning: #d29922;
+  --radius: var(--radius-md);
+  --radius-lg: var(--radius-lg);
+  --font: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
+  --mono: 'SF Mono', SFMono-Regular, 'Cascadia Code', 'Fira Code', Consolas, monospace;
+  --transition: 0.15s ease;
+}
+@layer base {
+  *,
+  ::before,
+  ::after {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    border-color: var(--color-border);
+  }
+}
+html,
+body {
+  height: 100%;
+  font-family: var(--font);
+}
+body {
+  background: var(--bg);
+  color: var(--text);
+  font-size: 14px;
+  line-height: 1.5;
+}
+
+@layer base {
+  input,
+  textarea,
+  select {
+    width: 100%;
+    padding: 4px 8px;
+    background: var(--bg);
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    color: var(--text);
+    font-size: 12px;
+    font-family: var(--mono);
+    outline: none;
+    transition: border-color var(--transition);
+  }
+  input:focus,
+  textarea:focus,
+  select:focus {
+    border-color: var(--accent);
+  }
+  input:read-only {
+    color: var(--text-2);
+    cursor: default;
+  }
+  input:read-only:focus {
+    border-color: var(--border);
+  }
+  textarea {
+    min-height: 80px;
+    resize: vertical;
+    line-height: 1.5;
+  }
+}

package/src/schema-loader.ts

@@ -1,5 +1,5 @@
 // Lazy registry loader — fetches type nodes from /sys/types on demand
-import { type ContextHandlers, register, resolve } from '@treenity/core/core';
+import { type ContextHandlers, register, resolve } from '@treenity/core';
 import type { TypeSchema } from '@treenity/core/schema/types';
 import { useEffect, useState } from 'react';
 import { trpc } from './trpc';

package/src/symbols.ts

@@ -0,0 +1,18 @@
+// Symbol-based component location metadata.
+// Stamped on deserialization (cache.put). Survive spread, invisible to JSON/keys/entries.
+
+import { isComponent, type NodeData } from '@treenity/core';
+
+export const $key = Symbol.for('treenity.$key');
+export const $node = Symbol.for('treenity.$node');
+
+export function stampNode(node: NodeData): void {
+  (node as any)[$key] = '';
+  (node as any)[$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;
+  }
+}

package/src/index.html

@@ -1,14 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Treenity</title>
-    <link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Manrope:wght@400;500;600;700;800&display=swap" rel="stylesheet">
-    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="main.tsx"></script>
-  </body>
-</html>