@treenity/react 3.0.6 → 3.0.7

package/src/Inspector.tsx

@@ -28,7 +28,7 @@ export function Inspector({ path, currentUserId, onDelete, onAddComponent, onSel
   const node = usePath(path);
   const [confirmDelete, setConfirmDelete] = useState(false);
   const [editing, setEditing] = useState(false);
-  const [context, setContext] = useState('react');
+  const [context, setContext] = useState('react:layout');
 
   // Reset context when path changes
   const [prevPath, setPrevPath] = useState(path);
@@ -113,7 +113,7 @@ export function Inspector({ path, currentUserId, onDelete, onAddComponent, onSel
       {/* Rendered view */}
       <ScrollArea className="flex-1">
         <div className="p-4">
-          <ErrorBoundary>
+          <ErrorBoundary key={node.$path}>
             <RenderContext name={context}>
               <div className="node-view">
                 <Render value={node} />

package/src/NodeEditor.tsx

@@ -7,6 +7,7 @@ import { Input } from '#components/ui/input';
 import { ScrollArea } from '#components/ui/scroll-area';
 import { Tabs, TabsList, TabsTrigger } from '#components/ui/tabs';
 import { toPlain } from '#lib/to-plain';
+import { DraftTextarea } from '#mods/editor-ui/DraftTextarea';
 import { FieldLabel, RefEditor } from '#mods/editor-ui/FieldLabel';
 import { getComponents, getPlainFields, getSchema } from '#mods/editor-ui/node-utils';
 import { type ComponentData, type GroupPerm, isRef, type NodeData, resolve } from '@treenity/core';
@@ -272,9 +273,9 @@ export function NodeEditor({ node, open, onClose, currentUserId, toast, onAddCom
             )}
           </>
         ) : (
-          <textarea
+          <DraftTextarea
             value={snap.jsonText}
-            onChange={(e) => { st.jsonText = e.target.value; st.dirty = true; }}
+            onChange={(text) => { st.jsonText = text; st.dirty = true; }}
             spellCheck={false}
           />
         )}

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

@@ -0,0 +1,42 @@
+// Uncontrolled textarea that preserves cursor position during external re-renders.
+// Uses ref + defaultValue so React never touches the DOM value while user is editing.
+
+import { Textarea } from '#components/ui/textarea';
+import { forwardRef, useEffect, useImperativeHandle, useRef } from 'react';
+
+type Props = Omit<React.ComponentProps<typeof Textarea>, 'value' | 'defaultValue' | 'onChange'> & {
+  value: string;
+  onChange: (text: string) => void;
+};
+
+export const DraftTextarea = forwardRef<HTMLTextAreaElement, Props>(
+  ({ value, onChange, ...props }, fwd) => {
+    const ref = useRef<HTMLTextAreaElement>(null);
+    const editing = useRef(false);
+
+    useImperativeHandle(fwd, () => ref.current!);
+
+    // Sync external value into DOM only when not focused
+    useEffect(() => {
+      if (!editing.current && ref.current && ref.current.value !== value) {
+        ref.current.value = value;
+      }
+    }, [value]);
+
+    return (
+      <Textarea
+        ref={ref}
+        defaultValue={value}
+        onFocus={() => { editing.current = true; }}
+        onBlur={() => {
+          editing.current = false;
+          if (ref.current && ref.current.value !== value) {
+            ref.current.value = value;
+          }
+        }}
+        onChange={(e) => onChange(e.target.value)}
+        {...props}
+      />
+    );
+  },
+);

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

@@ -1,6 +1,6 @@
 import { Button } from '#components/ui/button';
 import { Input } from '#components/ui/input';
-import { Textarea } from '#components/ui/textarea';
+import { DraftTextarea } from '#mods/editor-ui/DraftTextarea';
 import { isRef, resolveExact } from '@treenity/core';
 import { createElement, useState } from 'react';
 import { FieldLabel, RefEditor } from './FieldLabel';
@@ -92,12 +92,12 @@ export function StringArrayField({
 
   if (!isStrings) {
     return (
-      <Textarea
+      <DraftTextarea
         className="min-h-16 text-xs font-mono"
         value={JSON.stringify(value, null, 2)}
-        onChange={(e) => {
+        onChange={(text) => {
           try {
-            onChange(JSON.parse(e.target.value));
+            onChange(JSON.parse(text));
           } catch {
             /* typing */
           }

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

@@ -5,6 +5,7 @@ import { tree as clientStore } from '#client';
 // Covers: string, text, textarea, number, integer, boolean, array, object, image, uri, url, select, timestamp, path
 import { Button } from '#components/ui/button';
 import { Input } from '#components/ui/input';
+import { DraftTextarea } from '#mods/editor-ui/DraftTextarea';
 import { Popover, PopoverContent, PopoverTrigger } from '#components/ui/popover';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '#components/ui/select';
 import { Switch } from '#components/ui/switch';
@@ -281,13 +282,13 @@ function ObjectForm({ value, onChange }: FP) {
     return (
       <div className="rounded border border-border/50 bg-muted/30 p-2">
         {modeToggle}
-        <Textarea
+        <DraftTextarea
           className={`text-[11px] min-h-[60px] ${jsonError ? 'border-destructive' : ''}`}
           value={jsonDraft}
-          onChange={(e) => {
-            setJsonDraft(e.target.value);
+          onChange={(text) => {
+            setJsonDraft(text);
             try {
-              const parsed = JSON.parse(e.target.value);
+              const parsed = JSON.parse(text);
               if (typeof parsed === 'object' && parsed !== null && !Array.isArray(parsed)) {
                 emit(parsed);
                 setJsonError(false);
@@ -334,12 +335,12 @@ function ObjectForm({ value, onChange }: FP) {
                   onChange={(e) => emit({ ...obj, [k]: e.target.value })}
                 />
               ) : (
-                <Textarea
+                <DraftTextarea
                   className="flex-1 min-w-0 text-[11px] font-mono min-h-[40px]"
                   value={JSON.stringify(v, null, 2)}
-                  onChange={(e) => {
+                  onChange={(text) => {
                     try {
-                      emit({ ...obj, [k]: JSON.parse(e.target.value) });
+                      emit({ ...obj, [k]: JSON.parse(text) });
                     } catch {
                       /* typing */
                     }
@@ -484,11 +485,11 @@ function ArrayForm({ value, onChange }: FP) {
 
   // object/other — textarea fallback
   return (
-    <Textarea
+    <DraftTextarea
       value={JSON.stringify(arr, null, 2)}
-      onChange={(e) => {
+      onChange={(text) => {
         try {
-          emit(JSON.parse(e.target.value));
+          emit(JSON.parse(text));
         } catch {
           /* let user keep typing */
         }

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

@@ -79,5 +79,5 @@ export function getActionSchema(type: string, action: string): TypeSchema | null
 }
 
 export function pickDefaultContext(_type: string): string {
-  return 'react';
+  return 'react:layout';
 }

package/vite-plugin-treenity.ts

@@ -189,7 +189,13 @@ export default function treenityPlugin(opts?: { modsDirs?: string[] }): Plugin {
       // Resolve # imports via nearest package.json imports field
       if (id.startsWith('#')) {
         const pkg = readPkg(dirname(importer));
-        if (pkg?.imports) return matchPattern(id, pkg.imports, pkg.dir, conditions);
+        if (pkg?.imports) {
+          // Inside node_modules: skip 'development' condition to stay in dist/
+          // (dist files use relative ./hooks, # must resolve to same dist files)
+          const isNm = importer.includes('/node_modules/');
+          const conds = isNm ? conditions.filter(c => c !== 'development') : conditions;
+          return matchPattern(id, pkg.imports, pkg.dir, conds);
+        }
       }
 
       // Resolve @treenity/* exports (Vite doesn't handle array conditions)