@treenity/react 3.0.0 → 3.0.1

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,124 @@
+// 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 { 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="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="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,99 @@
+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">
+                  <input type="checkbox" checked={!!data[k]} className="w-auto"
+                    onChange={(e) => setData((prev) => ({ ...prev, [k]: e.target.checked }))} />
+                  {data[k] ? 'true' : 'false'}
+                </label>
+              ) : typeof v === 'number' ? (
+                <input type="number" 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 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);

package/src/mods/editor-ui/editor-ui.css

@@ -0,0 +1,174 @@
+/* Form fields */
+.field {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 4px;
+}
+.field:last-child {
+  margin-bottom: 0;
+}
+.field label {
+  font-size: 11px;
+  font-weight: 500;
+  color: var(--text-2);
+  width: 60px;
+  flex-shrink: 0;
+  white-space: nowrap;
+  position: relative;
+}
+.field:has(textarea),
+.field.stack {
+  flex-direction: column;
+  align-items: stretch;
+}
+.field:has(textarea) label,
+.field.stack label {
+  min-width: unset;
+  margin-bottom: 3px;
+}
+
+/* Component data view — shows field values in default view */
+.comp-view-card {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  padding: 14px 16px;
+  margin-bottom: 12px;
+}
+.comp-view-header {
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--text-3);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  margin-bottom: 10px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.comp-view-header .comp-type {
+  font-family: var(--mono);
+  color: var(--accent);
+  background: var(--accent-subtle);
+  padding: 1px 6px;
+  border-radius: 10px;
+  font-size: 10px;
+  text-transform: none;
+}
+.comp-view-row {
+  display: flex;
+  gap: 8px;
+  font-size: 13px;
+  padding: 3px 0;
+}
+.comp-view-label {
+  color: var(--text-3);
+  min-width: 80px;
+  flex-shrink: 0;
+}
+.comp-view-value {
+  color: var(--text);
+  word-break: break-word;
+}
+
+/* Info bar — compact chips for components and fields */
+.node-info-bar {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-bottom: 20px;
+}
+.node-info-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 10px;
+  border-radius: 16px;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  font-size: 12px;
+}
+.node-info-chip-label {
+  color: var(--text-2);
+  font-weight: 500;
+}
+.node-info-chip.data .node-info-chip-val {
+  color: var(--text);
+  max-width: 120px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* Children grid — file explorer cards with staggered reveal */
+.children-grid {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.child-card {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 10px 14px;
+  border-radius: var(--radius);
+  cursor: pointer;
+  transition: all var(--transition);
+}
+.child-card:hover {
+  background: var(--surface);
+}
+
+.child-icon {
+  width: 32px;
+  height: 32px;
+  border-radius: 8px;
+  background: var(--surface-2);
+  border: 1px solid var(--border);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text-2);
+  flex-shrink: 0;
+}
+.child-info {
+  flex: 1;
+  min-width: 0;
+}
+.child-name {
+  display: block;
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--text);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.child-type {
+  display: block;
+  font-size: 11px;
+  color: var(--text-3);
+  font-family: var(--mono);
+  margin-top: 1px;
+}
+.child-chevron {
+  color: var(--text-3);
+  font-size: 18px;
+  flex-shrink: 0;
+  transition: transform var(--transition);
+}
+.child-card:hover .child-chevron {
+  transform: translateX(2px);
+  color: var(--text-2);
+}
+
+.node-empty {
+  color: var(--text-3);
+  font-size: 13px;
+  padding: 40px;
+  text-align: center;
+}

package/src/mods/editor-ui/empty-placeholder.tsx

@@ -0,0 +1,39 @@
+import { Button } from '#components/ui/button';
+import { set } from '#hooks';
+import type { NodeData } from '@treenity/core';
+import { Plus } from 'lucide-react';
+import { useState } from 'react';
+import { TypePicker } from './type-picker';
+
+export function EmptyNodePlaceholder({ value }: { value: NodeData }) {
+  const [picking, setPicking] = useState(false);
+
+  return (
+    <div className="flex flex-col items-center justify-center gap-3 py-12 px-6">
+      <div className="text-[13px] text-[--text-3]">Empty node</div>
+      <Button
+        variant="outline"
+        size="sm"
+        onClick={() => setPicking(true)}
+        className="text-[12px] text-[--text-3] hover:text-[--accent] hover:bg-[--accent]/10"
+      >
+        <Plus className="w-3.5 h-3.5" />
+        Add Component
+      </Button>
+
+      {picking && (
+        <TypePicker
+          title="Add Component"
+          nameLabel="Component name"
+          action="Add"
+          autoName
+          onCancel={() => setPicking(false)}
+          onSelect={async (name, type) => {
+            setPicking(false);
+            await set({ ...value, [name]: { $type: type } });
+          }}
+        />
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,144 @@
+import { Button } from '#components/ui/button';
+import { Input } from '#components/ui/input';
+import { isRef, resolveExact } from '@treenity/core';
+import { createElement, useState } from 'react';
+import { FieldLabel, RefEditor } from './FieldLabel';
+
+export function renderField(
+  name: string,
+  fieldSchema: {
+    type: string;
+    label: string;
+    placeholder?: string;
+    readOnly?: boolean;
+    enum?: string[];
+    items?: { type?: string; properties?: Record<string, unknown> };
+    refType?: string;
+  },
+  data: Record<string, unknown>,
+  setData: (fn: (prev: Record<string, unknown>) => Record<string, unknown>) => void,
+) {
+  if (!fieldSchema.type) return null;
+
+  const rawValue = data[name];
+  const isRefValue = rawValue && typeof rawValue === 'object' && isRef(rawValue);
+
+  // If value is a $ref/$map, show ref editor instead of the normal field handler
+  if (isRefValue) {
+    const onFieldChange = fieldSchema.readOnly
+      ? undefined
+      : (next: unknown) => setData((prev) => ({ ...prev, [name]: next }));
+    return (
+      <div key={name} className="field">
+        <FieldLabel label={fieldSchema.label} value={rawValue} onChange={onFieldChange} />
+        {onFieldChange && (
+          <RefEditor value={rawValue as { $ref: string; $map?: string }} onChange={onFieldChange} />
+        )}
+      </div>
+    );
+  }
+
+  const ctx = fieldSchema.readOnly ? 'react' : 'react:form';
+  const handler = resolveExact(fieldSchema.type, ctx) ?? resolveExact('string', ctx);
+  if (!handler)
+    return (
+      <div key={name} className="text-[--danger] text-xs">
+        No form handler: {fieldSchema.type}
+      </div>
+    );
+
+  const fieldData: { $type: string; [k: string]: unknown } = {
+    $type: fieldSchema.type,
+    value: rawValue,
+    label: fieldSchema.label,
+    placeholder: fieldSchema.placeholder,
+  };
+  if (fieldSchema.items) fieldData.items = fieldSchema.items;
+  if (fieldSchema.enum) fieldData.enum = fieldSchema.enum;
+  if (fieldSchema.refType) fieldData.refType = fieldSchema.refType;
+
+  const isComplex = fieldSchema.type === 'object' || fieldSchema.type === 'array';
+  const onFieldChange = fieldSchema.readOnly
+    ? undefined
+    : (next: unknown) => setData((prev) => ({ ...prev, [name]: (next as { value: unknown }).value }));
+
+  return (
+    <div key={name} className={isComplex ? 'field stack' : 'field'}>
+      {fieldSchema.type !== 'boolean' && (
+        <FieldLabel
+          label={fieldSchema.label}
+          value={rawValue}
+          onChange={fieldSchema.readOnly ? undefined : (next: unknown) => setData((prev) => ({ ...prev, [name]: next }))}
+        />
+      )}
+      {createElement(handler as any, {
+        value: fieldData,
+        onChange: onFieldChange,
+      })}
+    </div>
+  );
+}
+
+export function StringArrayField({
+  value,
+  onChange,
+}: {
+  value: unknown[];
+  onChange: (next: unknown[]) => void;
+}) {
+  const [input, setInput] = useState('');
+  const isStrings = value.every((v) => typeof v === 'string');
+
+  if (!isStrings) {
+    return (
+      <textarea
+        value={JSON.stringify(value, null, 2)}
+        onChange={(e) => {
+          try {
+            onChange(JSON.parse(e.target.value));
+          } catch {
+            /* typing */
+          }
+        }}
+      />
+    );
+  }
+
+  const tags = value as string[];
+  return (
+    <div className="flex-1 space-y-1">
+      <div className="flex flex-wrap gap-1">
+        {tags.map((tag, i) => (
+          <span
+            key={i}
+            className="inline-flex items-center gap-0.5 text-[11px] font-mono bg-muted text-foreground/70 px-1.5 py-0.5 rounded"
+          >
+            {tag}
+            <Button
+              variant="ghost"
+              size="icon"
+              type="button"
+              className="h-5 w-5 p-0 ml-0.5 text-muted-foreground/40 hover:text-foreground leading-none"
+              onClick={() => onChange(tags.filter((_, j) => j !== i))}
+            >
+              x
+            </Button>
+          </span>
+        ))}
+      </div>
+      <Input
+        className="h-7 text-xs w-full"
+        placeholder="Add item..."
+        value={input}
+        onChange={(e) => setInput(e.target.value)}
+        onKeyDown={(e) => {
+          if (e.key !== 'Enter') return;
+          e.preventDefault();
+          const t = input.trim();
+          if (t && !tags.includes(t)) onChange([...tags, t]);
+          setInput('');
+        }}
+      />
+    </div>
+  );
+}