@treenity/react 3.0.0 → 3.0.2

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

@@ -0,0 +1,148 @@
+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';
+
+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="h-8 text-sm"
+            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,8 @@
 // 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/core';
+import { type ComponentData, getContextsForType, type NodeData } from '@treenity/core';
 import { useMemo, useState } from 'react';
 
 // ── Mock data generator (by JSON Schema field type) ──
@@ -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,8 +1,9 @@
 // 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/core';
+import { type NodeData, register } from '@treenity/core';
 import { useState } from 'react';
 
 // ── Node-level view (for ref nodes like /sys/autostart/xxx) ──
@@ -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/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,9 +1,9 @@
-import { type NodeData, R, S } from '@treenity/core/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/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/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,25 @@
+// Symbol-based component location metadata.
+// 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 {
+  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;
+    hide(v, $key, k);
+    hide(v, $node, node);
+  }
+}