@treenity/react 3.0.4 → 3.0.7

package/dist/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/dist/trpc.d.ts

@@ -174,6 +174,14 @@ export declare const trpc: import("@trpc/client").TRPCClient<import("@trpc/serve
         };
         meta: object;
     }>;
+    devLogin: import("@trpc/server").TRPCMutationProcedure<{
+        input: void;
+        output: {
+            token: string;
+            userId: string;
+        };
+        meta: object;
+    }>;
     streamAction: import("@trpc/server/unstable-core-do-not-import").LegacyObservableSubscriptionProcedure<{
         input: {
             path: string;

package/dist/trpc.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"trpc.d.ts","sourceRoot":"","sources":["../src/trpc.ts"],"names":[],"mappings":"AAIA,wBAAgB,QAAQ,IAAI,MAAM,GAAG,IAAI,CAExC;AAED,wBAAgB,QAAQ,CAAC,KAAK,EAAE,MAAM,QAErC;AAED,wBAAgB,UAAU,SAEzB;AAED,eAAO,MAAM,kBAAkB,sBAAsB,CAAC;AAUtD,eAAO,MAAQ,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAAiE,CAAC"}
+{"version":3,"file":"trpc.d.ts","sourceRoot":"","sources":["../src/trpc.ts"],"names":[],"mappings":"AAIA,wBAAgB,QAAQ,IAAI,MAAM,GAAG,IAAI,CAExC;AAED,wBAAgB,QAAQ,CAAC,KAAK,EAAE,MAAM,QAErC;AAED,wBAAgB,UAAU,SAEzB;AAED,eAAO,MAAM,kBAAkB,sBAAsB,CAAC;AAUtD,eAAO,MAAQ,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAAiE,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@treenity/react",
-  "version": "3.0.4",
+  "version": "3.0.7",
   "description": "React binding for Treenity — reactive hooks, admin UI, and context-based component rendering.",
   "type": "module",
   "publishConfig": {
@@ -80,7 +80,7 @@
     "README.md"
   ],
   "scripts": {
-    "build": "tsc -p tsconfig.build.json",
+    "build": "tsc -p tsconfig.build.json && fix-hash-imports --copy-assets",
     "prepack": "npm run build",
     "test": "tsx --conditions development --test src/**/*.test.ts",
     "dev": "vite"

package/src/App.tsx

@@ -42,7 +42,8 @@ export function App() {
     const token = getToken();
     if (!token) {
       try {
-        const { token: anonToken, userId } = await trpc.anonLogin.mutate();
+        const login = import.meta.env.VITE_DEV_LOGIN ? trpc.devLogin : trpc.anonLogin;
+        const { token: anonToken, userId } = await login.mutate();
         setToken(anonToken);
         setAuthed(userId);
         setAuthChecked(true);
@@ -439,7 +440,7 @@ export function App() {
   if (!authed) return <LoginScreen onLogin={(uid) => setAuthed(uid)} />;
 
   const isAnon = authed.startsWith('anon:');
-  const needsLogin = isAnon || showLoginModal;
+  const needsLogin = showLoginModal;
   if (mode === 'view') return <NavigateProvider value={navigate}><ViewPage path={viewPath} /></NavigateProvider>;
   if (mode === 'preview') return <NavigateProvider value={navigate}><ViewPage path={viewPath} editorLink /></NavigateProvider>;
 

package/src/ComponentSection.tsx

@@ -96,7 +96,7 @@ export function ComponentSection({
       </div>
 
       {!collapsed && (
-        <ErrorBoundary>
+        <ErrorBoundary key={`${node.$path}:${compType}`}>
           <EditPanel node={node} type={compType} data={data} onData={onData} />
           <ActionCardList
             path={node.$path}

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/Treenity.tsx

@@ -4,7 +4,7 @@ import { type ReactNode } from 'react'
 import { App } from './App'
 import './load-client'
 import { Toaster } from './components/ui/sonner'
-import './root.css'
+// CSS must be imported by the consumer: import '@treenity/react/root.css'
 
 enablePatches()
 

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)