@treenity/react 3.0.0 → 3.0.1

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

@@ -1,10 +1,16 @@
 // react:form handlers — editable fields for inspector panel
 import * as cache from '#cache';
 import { tree as clientStore } from '#client';
-import { useSchema } from '#schema-loader';
 // react view handlers — readOnly display for same types
 // Covers: string, text, textarea, number, integer, boolean, array, object, image, uri, url, select, timestamp, path
-import { register, resolve as resolveHandler } from '@treenity/core/core';
+import { Button } from '#components/ui/button';
+import { Input } from '#components/ui/input';
+import { Popover, PopoverContent, PopoverTrigger } from '#components/ui/popover';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '#components/ui/select';
+import { Switch } from '#components/ui/switch';
+import { Textarea } from '#components/ui/textarea';
+import { useSchema } from '#schema-loader';
+import { register, resolve as resolveHandler } from '@treenity/core';
 import dayjs from 'dayjs';
 import { X } from 'lucide-react';
 import { createElement, useCallback, useEffect, useRef, useState, useSyncExternalStore } from 'react';
@@ -97,20 +103,22 @@ function StringForm({ value, onChange }: FP) {
   // enum → select dropdown
   if (value.enum && value.enum.length > 0) {
     return (
-      <select
-        value={String(value.value ?? '')}
-        onChange={(e) => onChange?.({ ...value, value: e.target.value })}
-      >
-        <option value="">—</option>
-        {value.enum.map((v) => (
-          <option key={v} value={v}>{v}</option>
-        ))}
-      </select>
+      <Select value={String(value.value ?? '')} onValueChange={(v) => onChange?.({ ...value, value: v })}>
+        <SelectTrigger className="h-7 text-xs font-mono">
+          <SelectValue placeholder="—" />
+        </SelectTrigger>
+        <SelectContent>
+          {value.enum.map((v) => (
+            <SelectItem key={v} value={v}>{v}</SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
     );
   }
 
   return (
-    <input
+    <Input
+      className="h-7 text-xs"
       value={String(value.value ?? '')}
       placeholder={value.placeholder}
       onChange={(e) => onChange?.({ ...value, value: e.target.value })}
@@ -120,7 +128,8 @@ function StringForm({ value, onChange }: FP) {
 
 function TextForm({ value, onChange }: FP) {
   return (
-    <textarea
+    <Textarea
+      className="text-xs"
       value={String(value.value ?? '')}
       placeholder={value.placeholder}
       onChange={(e) => onChange?.({ ...value, value: e.target.value })}
@@ -130,8 +139,9 @@ function TextForm({ value, onChange }: FP) {
 
 function NumberForm({ value, onChange }: FP) {
   return (
-    <input
+    <Input
       type="number"
+      className="h-7 text-xs"
       value={String(value.value ?? 0)}
       onChange={(e) => onChange?.({ ...value, value: Number(e.target.value) })}
     />
@@ -140,9 +150,10 @@ function NumberForm({ value, onChange }: FP) {
 
 function IntegerForm({ value, onChange }: FP) {
   return (
-    <input
+    <Input
       type="number"
       step="1"
+      className="h-7 text-xs"
       value={String(value.value ?? 0)}
       onChange={(e) => onChange?.({ ...value, value: Math.round(Number(e.target.value)) })}
     />
@@ -152,11 +163,9 @@ function IntegerForm({ value, onChange }: FP) {
 function BooleanForm({ value, onChange }: FP) {
   return (
     <label className="flex items-center gap-2 cursor-pointer">
-      <input
-        type="checkbox"
-        className="w-auto"
+      <Switch
         checked={!!value.value}
-        onChange={(e) => onChange?.({ ...value, value: e.target.checked })}
+        onCheckedChange={(checked) => onChange?.({ ...value, value: checked })}
       />
       <span className="text-xs text-muted-foreground">{value.label}</span>
     </label>
@@ -167,7 +176,8 @@ function ImageForm({ value, onChange }: FP) {
   const src = typeof value.value === 'string' ? value.value : '';
   return (
     <div className="space-y-2">
-      <input
+      <Input
+        className="h-7 text-xs"
         value={src}
         placeholder="Image URL"
         onChange={(e) => onChange?.({ ...value, value: e.target.value })}
@@ -181,7 +191,8 @@ function UriForm({ value, onChange }: FP) {
   const url = String(value.value ?? '');
   return (
     <div className="space-y-1">
-      <input
+      <Input
+        className="h-7 text-xs"
         value={url}
         placeholder={value.placeholder ?? 'https://...'}
         onChange={(e) => onChange?.({ ...value, value: e.target.value })}
@@ -200,9 +211,9 @@ function TimestampForm({ value, onChange }: FP) {
   const formatted = ts ? dayjs(ts > 1e12 ? ts : ts * 1000).format('YYYY-MM-DD HH:mm:ss') : '—';
   return (
     <div className="flex items-center gap-2">
-      <input
+      <Input
         type="number"
-        className="flex-1"
+        className="h-7 text-xs flex-1"
         value={String(ts)}
         onChange={(e) => onChange?.({ ...value, value: Number(e.target.value) })}
       />
@@ -214,15 +225,16 @@ function TimestampForm({ value, onChange }: FP) {
 function SelectForm({ value, onChange }: FP) {
   const opts = value.enum ?? [];
   return (
-    <select
-      value={String(value.value ?? '')}
-      onChange={(e) => onChange?.({ ...value, value: e.target.value })}
-    >
-      <option value="">—</option>
-      {opts.map((v) => (
-        <option key={v} value={v}>{v}</option>
-      ))}
-    </select>
+    <Select value={String(value.value ?? '')} onValueChange={(v) => onChange?.({ ...value, value: v })}>
+      <SelectTrigger className="h-7 text-xs font-mono">
+        <SelectValue placeholder="—" />
+      </SelectTrigger>
+      <SelectContent>
+        {opts.map((v) => (
+          <SelectItem key={v} value={v}>{v}</SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
   );
 }
 
@@ -240,16 +252,20 @@ function ObjectForm({ value, onChange }: FP) {
 
   const modeToggle = (
     <div className="flex gap-1 mb-1">
-      <button
+      <Button
+        variant="ghost"
+        size="sm"
         type="button"
-        className={`border-0 px-2 py-0.5 text-[10px] rounded ${mode === 'fields' ? 'bg-muted text-foreground' : 'bg-transparent text-muted-foreground hover:text-foreground'}`}
+        className={`h-6 px-2 text-[10px] ${mode === 'fields' ? 'bg-muted text-foreground' : 'text-muted-foreground hover:text-foreground'}`}
         onClick={() => setMode('fields')}
       >
         Fields
-      </button>
-      <button
+      </Button>
+      <Button
+        variant="ghost"
+        size="sm"
         type="button"
-        className={`border-0 px-2 py-0.5 text-[10px] rounded ${mode === 'json' ? 'bg-muted text-foreground' : 'bg-transparent text-muted-foreground hover:text-foreground'}`}
+        className={`h-6 px-2 text-[10px] ${mode === 'json' ? 'bg-muted text-foreground' : 'text-muted-foreground hover:text-foreground'}`}
         onClick={() => {
           setJsonDraft(JSON.stringify(obj, null, 2));
           setJsonError(false);
@@ -257,7 +273,7 @@ function ObjectForm({ value, onChange }: FP) {
         }}
       >
         JSON
-      </button>
+      </Button>
     </div>
   );
 
@@ -265,7 +281,7 @@ function ObjectForm({ value, onChange }: FP) {
     return (
       <div className="rounded border border-border/50 bg-muted/30 p-2">
         {modeToggle}
-        <textarea
+        <Textarea
           className={`text-[11px] min-h-[60px] ${jsonError ? 'border-destructive' : ''}`}
           value={jsonDraft}
           onChange={(e) => {
@@ -299,27 +315,26 @@ function ObjectForm({ value, onChange }: FP) {
                 {k}
               </span>
               {typeof v === 'boolean' ? (
-                <input
-                  type="checkbox"
-                  className="w-auto mt-1.5"
+                <Switch
+                  className="mt-1"
                   checked={v}
-                  onChange={(e) => emit({ ...obj, [k]: e.target.checked })}
+                  onCheckedChange={(checked) => emit({ ...obj, [k]: checked })}
                 />
               ) : typeof v === 'number' ? (
-                <input
+                <Input
                   type="number"
-                  className="flex-1 min-w-0 text-[11px]"
+                  className="h-7 text-[11px] flex-1 min-w-0"
                   value={String(v)}
                   onChange={(e) => emit({ ...obj, [k]: Number(e.target.value) })}
                 />
               ) : typeof v === 'string' ? (
-                <input
-                  className="flex-1 min-w-0 text-[11px]"
+                <Input
+                  className="h-7 text-[11px] flex-1 min-w-0"
                   value={v}
                   onChange={(e) => emit({ ...obj, [k]: e.target.value })}
                 />
               ) : (
-                <textarea
+                <Textarea
                   className="flex-1 min-w-0 text-[11px] font-mono min-h-[40px]"
                   value={JSON.stringify(v, null, 2)}
                   onChange={(e) => {
@@ -331,9 +346,11 @@ function ObjectForm({ value, onChange }: FP) {
                   }}
                 />
               )}
-              <button
+              <Button
+                variant="ghost"
+                size="icon"
                 type="button"
-                className="border-0 bg-transparent p-0 mt-1 text-muted-foreground/30 opacity-0 group-hover:opacity-100 hover:text-destructive shrink-0 cursor-pointer transition-opacity"
+                className="h-5 w-5 p-0 mt-1 text-muted-foreground/30 opacity-0 group-hover:opacity-100 hover:text-destructive shrink-0 transition-opacity"
                 onClick={() => {
                   const next = { ...obj };
                   delete next[k];
@@ -341,15 +358,15 @@ function ObjectForm({ value, onChange }: FP) {
                 }}
               >
                 <X className="h-3 w-3" />
-              </button>
+              </Button>
             </div>
           ))}
         </div>
       )}
 
       <div className="flex gap-1 items-center border-t border-border/30 pt-1.5">
-        <input
-          className="flex-1 min-w-0 text-[11px] bg-transparent border-dashed"
+        <Input
+          className="h-7 text-[11px] flex-1 min-w-0 bg-transparent border-dashed"
           placeholder="new key..."
           value={newKey}
           onChange={(e) => setNewKey(e.target.value)}
@@ -363,9 +380,11 @@ function ObjectForm({ value, onChange }: FP) {
             }
           }}
         />
-        <button
+        <Button
+          variant="ghost"
+          size="sm"
           type="button"
-          className="border-0 bg-transparent p-0 text-[11px] text-muted-foreground hover:text-foreground shrink-0 cursor-pointer"
+          className="h-6 px-2 text-[10px] text-muted-foreground hover:text-foreground shrink-0"
           onClick={() => {
             const k = newKey.trim();
             if (k && !(k in obj)) {
@@ -375,7 +394,7 @@ function ObjectForm({ value, onChange }: FP) {
           }}
         >
           +
-        </button>
+        </Button>
       </div>
     </div>
   );
@@ -398,19 +417,21 @@ function ArrayForm({ value, onChange }: FP) {
                 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
+                <Button
+                  variant="ghost"
+                  size="icon"
                   type="button"
-                  className="ml-0.5 border-0 bg-transparent p-0 text-muted-foreground/40 hover:text-foreground leading-none cursor-pointer"
+                  className="h-5 w-5 p-0 ml-0.5 text-muted-foreground/40 hover:text-foreground leading-none"
                   onClick={() => emit(arr.filter((_, j) => j !== i))}
                 >
                   ×
-                </button>
+                </Button>
               </span>
             ))}
           </div>
         )}
-        <input
-          className="text-[11px] bg-transparent border-dashed"
+        <Input
+          className="h-7 text-[11px] bg-transparent border-dashed"
           placeholder="add item..."
           value={input}
           onChange={(e) => setInput(e.target.value)}
@@ -431,35 +452,39 @@ function ArrayForm({ value, onChange }: FP) {
       <div className="rounded border border-border/50 bg-muted/30 p-2 space-y-1">
         {arr.map((item, i) => (
           <div key={i} className="flex gap-1 items-center group">
-            <input
+            <Input
               type="number"
-              className="flex-1 text-[11px]"
+              className="h-7 text-[11px] flex-1"
               value={String(item ?? 0)}
               onChange={(e) => emit(arr.map((v, j) => (j === i ? Number(e.target.value) : v)))}
             />
-            <button
+            <Button
+              variant="ghost"
+              size="icon"
               type="button"
-              className="border-0 bg-transparent p-0 text-muted-foreground/30 opacity-0 group-hover:opacity-100 hover:text-destructive cursor-pointer transition-opacity"
+              className="h-5 w-5 p-0 text-muted-foreground/30 opacity-0 group-hover:opacity-100 hover:text-destructive transition-opacity"
               onClick={() => emit(arr.filter((_, j) => j !== i))}
             >
               <X className="h-3 w-3" />
-            </button>
+            </Button>
           </div>
         ))}
-        <button
+        <Button
+          variant="ghost"
+          size="sm"
           type="button"
-          className="border-0 bg-transparent p-0 text-[11px] text-muted-foreground hover:text-foreground cursor-pointer"
+          className="h-6 px-2 text-[10px] text-muted-foreground hover:text-foreground"
           onClick={() => emit([...arr, 0])}
         >
           + add
-        </button>
+        </Button>
       </div>
     );
   }
 
   // object/other — textarea fallback
   return (
-    <textarea
+    <Textarea
       value={JSON.stringify(arr, null, 2)}
       onChange={(e) => {
         try {
@@ -482,8 +507,7 @@ function PathView({ value }: FP) {
 
 // Compact tree picker dropdown for selecting a node path
 // Lazy-loads children via trpc on expand, caches into front/cache
-export function MiniTree({ onSelect, onClose }: { onSelect: (path: string) => void; onClose: () => void }) {
-  const ref = useRef<HTMLDivElement>(null);
+export function MiniTree({ onSelect }: { onSelect: (path: string) => void }) {
   const [expanded, setExpanded] = useState<Set<string>>(new Set(['/']));
   const [loaded, setLoaded] = useState<Set<string>>(new Set());
   const [filter, setFilter] = useState('');
@@ -499,15 +523,6 @@ export function MiniTree({ onSelect, onClose }: { onSelect: (path: string) => vo
     fetchChildren('/');
   }, []);
 
-  // Close on outside click
-  useEffect(() => {
-    const handler = (e: MouseEvent) => {
-      if (ref.current && !ref.current.contains(e.target as Node)) onClose();
-    };
-    document.addEventListener('mousedown', handler);
-    return () => document.removeEventListener('mousedown', handler);
-  }, [onClose]);
-
   async function fetchChildren(path: string) {
     if (loaded.has(path)) return;
     const { items } = await clientStore.getChildren(path);
@@ -594,13 +609,10 @@ export function MiniTree({ onSelect, onClose }: { onSelect: (path: string) => vo
   const rootNode = nodes.get('/');
 
   return (
-    <div
-      ref={ref}
-      className="absolute z-50 mt-1 w-64 max-h-60 overflow-auto bg-popover border border-border rounded-lg shadow-lg"
-    >
+    <>
       <div className="p-1.5 border-b border-border">
-        <input
-          className="text-[11px] w-full"
+        <Input
+          className="h-7 text-[11px] w-full"
           placeholder="Filter..."
           value={filter}
           onChange={(e) => setFilter(e.target.value)}
@@ -611,7 +623,7 @@ export function MiniTree({ onSelect, onClose }: { onSelect: (path: string) => vo
         {rootNode && renderNode('/', 0)}
         {!rootNode && rootKids.map((r) => renderNode(r, 0))}
       </div>
-    </div>
+    </>
   );
 }
 
@@ -668,8 +680,8 @@ function EmbeddedFields({ data, type, setData }: {
       {entries.map(([k, v]) => (
         <div key={k} className="field">
           <label>{k}</label>
-          <input
-            className="text-[11px]"
+          <Input
+            className="h-7 text-[11px]"
             value={typeof v === 'string' ? v : JSON.stringify(v)}
             onChange={(e) => setData((prev) => ({ ...prev, [k]: e.target.value }))}
           />
@@ -749,9 +761,11 @@ function PathForm({ value, onChange }: FP) {
         {/* Header row: mode switch + input + controls */}
         <div className="flex items-center gap-1">
           {/* Mode toggle — always visible */}
-          <button
+          <Button
+            variant="ghost"
+            size="sm"
             type="button"
-            className={`border-0 bg-transparent p-0 px-1 cursor-pointer shrink-0 text-[10px] font-bold font-mono ${
+            className={`h-6 px-1 text-[10px] font-bold font-mono shrink-0 ${
               mode === 'val' ? 'text-amber-500' : 'text-primary'
             }`}
             onClick={() => {
@@ -767,7 +781,7 @@ function PathForm({ value, onChange }: FP) {
             title={mode === 'val' ? 'Value mode — embeds node data' : 'Ref mode — stores path'}
           >
             {mode}
-          </button>
+          </Button>
 
           {/* Type badge when refType is known */}
           {refType && (
@@ -784,8 +798,8 @@ function PathForm({ value, onChange }: FP) {
               )}
             </span>
           ) : (
-            <input
-              className="flex-1 min-w-0 text-[11px] font-mono border-0 bg-transparent"
+            <Input
+              className="h-7 text-[11px] font-mono flex-1 min-w-0 border-0 bg-transparent"
               value={refPath}
               placeholder="drop or pick a node"
               onChange={(e) => setRef(e.target.value)}
@@ -793,22 +807,34 @@ function PathForm({ value, onChange }: FP) {
           )}
 
           {hasValue && (
-            <button
+            <Button
+              variant="ghost"
+              size="icon"
               type="button"
-              className="border-0 bg-transparent p-0 px-0.5 text-muted-foreground/40 hover:text-foreground cursor-pointer shrink-0"
+              className="h-5 w-5 p-0 text-muted-foreground/40 hover:text-foreground shrink-0"
               onClick={() => { onChange?.({ ...value, value: '' }); setMode('ref'); }}
             >
               <X className="h-3 w-3" />
-            </button>
+            </Button>
           )}
-          <button
-            type="button"
-            className="border-0 bg-transparent p-0 px-1 text-muted-foreground hover:text-foreground cursor-pointer shrink-0 text-[11px]"
-            onClick={() => setPickerOpen((v) => !v)}
-            title="Browse tree"
-          >
-            &#9776;
-          </button>
+          <Popover open={pickerOpen} onOpenChange={setPickerOpen}>
+            <PopoverTrigger asChild>
+              <Button
+                variant="ghost"
+                size="icon"
+                type="button"
+                className="h-5 w-5 p-0 text-muted-foreground hover:text-foreground shrink-0 text-[11px]"
+                title="Browse tree"
+              >
+                &#9776;
+              </Button>
+            </PopoverTrigger>
+            <PopoverContent align="end" className="w-64 max-h-60 overflow-auto p-0">
+              <MiniTree
+                onSelect={(p) => { applyNode(p); setPickerOpen(false); }}
+              />
+            </PopoverContent>
+          </Popover>
         </div>
 
         {/* Inline typed editor for embedded value */}
@@ -822,13 +848,6 @@ function PathForm({ value, onChange }: FP) {
           </div>
         )}
       </div>
-
-      {pickerOpen && (
-        <MiniTree
-          onSelect={(p) => { applyNode(p); setPickerOpen(false); }}
-          onClose={() => setPickerOpen(false)}
-        />
-      )}
     </div>
   );
 }

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

@@ -3,7 +3,8 @@
 
 import { Render, RenderContext } from '#context';
 import { useChildren } from '#hooks';
-import { type ComponentData, type NodeData, register } from '@treenity/core/core';
+import { type ComponentData, type NodeData, register } from '@treenity/core';
+import { EmptyNodePlaceholder } from './empty-placeholder';
 import { getComponents, getPlainFields } from './node-utils';
 
 function DefaultLayout({ value }: { value: ComponentData }) {
@@ -54,9 +55,10 @@ function DefaultLayout({ value }: { value: ComponentData }) {
         </RenderContext>
       )}
 
-      {children.length === 0 && !hasInfo && <div className="node-empty">Empty node</div>}
+      {children.length === 0 && !hasInfo && <EmptyNodePlaceholder value={node} />}
     </div>
   );
 }
 
+
 register('default', 'react:layout', DefaultLayout as any);

package/src/mods/editor-ui/list-items.tsx

@@ -2,8 +2,8 @@
 // Self-contained: include card styling, click navigation, chevron
 
 import { useNavigate } from '#hooks';
-import type { NodeData } from '@treenity/core/core';
-import { register } from '@treenity/core/core';
+import type { NodeData } from '@treenity/core';
+import { register } from '@treenity/core';
 
 const TYPE_ICONS: Record<string, string> = {
   root: '/',

package/src/mods/editor-ui/node-utils.ts

@@ -1,9 +1,9 @@
-import { getContextsForType, type NodeData, resolve } from '@treenity/core/core';
+import { getContextsForType, isComponent, type NodeData, resolve } from '@treenity/core';
 import type { PropertySchema, TypeSchema } from '@treenity/core/schema/types';
 
 export function getComponents(node: NodeData): [string, Record<string, unknown>][] {
   return Object.entries(node).filter(
-    ([k, v]) => !k.startsWith('$') && typeof v === 'object' && v !== null && '$type' in v,
+    ([k, v]) => !k.startsWith('$') && isComponent(v),
   ) as [string, Record<string, unknown>][];
 }
 
@@ -78,7 +78,6 @@ export function getActionSchema(type: string, action: string): TypeSchema | null
   };
 }
 
-export function pickDefaultContext(type: string): string {
-  const ctxs = getViewContexts(type);
-  return ctxs.includes('react') ? 'react' : ctxs[0] ?? 'react';
+export function pickDefaultContext(_type: string): string {
+  return 'react';
 }