@treenity/react 3.0.0 → 3.0.1

package/dist/symbols.d.ts

@@ -0,0 +1,5 @@
+import { type NodeData } from '@treenity/core';
+export declare const $key: unique symbol;
+export declare const $node: unique symbol;
+export declare function stampNode(node: NodeData): void;
+//# sourceMappingURL=symbols.d.ts.map

package/dist/symbols.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"symbols.d.ts","sourceRoot":"","sources":["../src/symbols.ts"],"names":[],"mappings":"AAGA,OAAO,EAAe,KAAK,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAE5D,eAAO,MAAM,IAAI,eAA8B,CAAC;AAChD,eAAO,MAAM,KAAK,eAA+B,CAAC;AAElD,wBAAgB,SAAS,CAAC,IAAI,EAAE,QAAQ,GAAG,IAAI,CAS9C"}

package/dist/symbols.js

@@ -0,0 +1,16 @@
+// Symbol-based component location metadata.
+// Stamped on deserialization (cache.put). Survive spread, invisible to JSON/keys/entries.
+import { isComponent } from '@treenity/core';
+export const $key = Symbol.for('treenity.$key');
+export const $node = Symbol.for('treenity.$node');
+export function stampNode(node) {
+    node[$key] = '';
+    node[$node] = node;
+    for (const [k, v] of Object.entries(node)) {
+        if (k.startsWith('$') || !isComponent(v))
+            continue;
+        v[$key] = k;
+        v[$node] = node;
+    }
+}
+//# sourceMappingURL=symbols.js.map

package/dist/symbols.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"symbols.js","sourceRoot":"","sources":["../src/symbols.ts"],"names":[],"mappings":"AAAA,4CAA4C;AAC5C,0FAA0F;AAE1F,OAAO,EAAE,WAAW,EAAiB,MAAM,gBAAgB,CAAC;AAE5D,MAAM,CAAC,MAAM,IAAI,GAAG,MAAM,CAAC,GAAG,CAAC,eAAe,CAAC,CAAC;AAChD,MAAM,CAAC,MAAM,KAAK,GAAG,MAAM,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;AAElD,MAAM,UAAU,SAAS,CAAC,IAAc;IACrC,IAAY,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC;IACxB,IAAY,CAAC,KAAK,CAAC,GAAG,IAAI,CAAC;IAE5B,KAAK,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC;QAC1C,IAAI,CAAC,CAAC,UAAU,CAAC,GAAG,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC;YAAE,SAAS;QAClD,CAAS,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;QACpB,CAAS,CAAC,KAAK,CAAC,GAAG,IAAI,CAAC;IAC3B,CAAC;AACH,CAAC"}

package/dist/trpc.d.ts

@@ -13,7 +13,7 @@ export declare const trpc: import("@trpc/client").TRPCClient<import("@trpc/serve
             path: string;
             watch?: boolean | undefined;
         };
-        output: import("@treenity/core/core").NodeData | undefined;
+        output: import("@treenity/core").NodeData | undefined;
         meta: object;
     }>;
     getChildren: import("@trpc/server").TRPCQueryProcedure<{
@@ -25,7 +25,7 @@ export declare const trpc: import("@trpc/client").TRPCClient<import("@trpc/serve
             watch?: boolean | undefined;
             watchNew?: boolean | undefined;
         };
-        output: import("@treenity/core/tree").Page<import("@treenity/core/core").NodeData>;
+        output: import("@treenity/core/tree").Page<import("@treenity/core").NodeData>;
         meta: object;
     }>;
     set: import("@trpc/server").TRPCMutationProcedure<{
@@ -66,7 +66,7 @@ export declare const trpc: import("@trpc/client").TRPCClient<import("@trpc/serve
     }>;
     getTemplates: import("@trpc/server").TRPCQueryProcedure<{
         input: void;
-        output: import("@treenity/core/core").NodeData[];
+        output: import("@treenity/core").NodeData[];
         meta: object;
     }>;
     applyTemplate: import("@trpc/server").TRPCMutationProcedure<{
@@ -122,6 +122,13 @@ export declare const trpc: import("@trpc/client").TRPCClient<import("@trpc/serve
         } | null;
         meta: object;
     }>;
+    getPerm: import("@trpc/server").TRPCQueryProcedure<{
+        input: {
+            path: string;
+        };
+        output: number;
+        meta: object;
+    }>;
     logout: import("@trpc/server").TRPCMutationProcedure<{
         input: void;
         output: {

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,16 +1,81 @@
 {
   "name": "@treenity/react",
-  "version": "3.0.0",
+  "version": "3.0.1",
+  "description": "React binding for Treenity — reactive hooks, admin UI, and context-based component rendering.",
   "type": "module",
+  "publishConfig": {
+    "access": "public"
+  },
+  "license": "AGPL-3.0",
+  "author": "Treenity <hello@treenity.ai> (https://treenity.ai)",
+  "homepage": "https://github.com/treenity-ai/treenity",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/treenity-ai/treenity.git",
+    "directory": "packages/react"
+  },
+  "keywords": [
+    "treenity",
+    "react",
+    "hooks",
+    "reactive",
+    "tree",
+    "composable",
+    "admin",
+    "ui",
+    "mcp",
+    "ai-native"
+  ],
   "imports": {
-    "#*": { "development": ["./src/*.ts", "./src/*.tsx"], "default": ["./dist/*.js", "./dist/*.jsx"] }
+    "#*": {
+      "development": [
+        "./src/*.ts",
+        "./src/*.tsx"
+      ],
+      "default": [
+        "./dist/*.js",
+        "./dist/*.jsx"
+      ]
+    }
   },
   "exports": {
-    ".":      { "development": "./src/index.ts", "types": "./dist/index.d.ts", "default": "./dist/index.js" },
-    "./ui/*": { "development": ["./src/components/ui/*.ts", "./src/components/ui/*.tsx"], "types": "./dist/components/ui/*.d.ts", "default": "./dist/components/ui/*.js" },
-    "./*":    { "development": ["./src/*.ts", "./src/*.tsx"], "types": ["./dist/*.d.ts"], "default": ["./dist/*.js"] }
+    ".": {
+      "development": "./src/index.ts",
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./ui/*": {
+      "development": [
+        "./src/components/ui/*.ts",
+        "./src/components/ui/*.tsx"
+      ],
+      "types": "./dist/components/ui/*.d.ts",
+      "default": "./dist/components/ui/*.js"
+    },
+    "./*.css": "./src/*.css",
+    "./*": {
+      "development": [
+        "./src/*.ts",
+        "./src/*.tsx"
+      ],
+      "types": [
+        "./dist/*.d.ts"
+      ],
+      "default": [
+        "./dist/*.js"
+      ]
+    }
+  },
+  "treenity": {
+    "clients": "./src/mods/clients.ts",
+    "servers": "./src/mods/servers.ts"
   },
-  "files": ["dist", "src"],
+  "files": [
+    "dist",
+    "src",
+    "LICENSE",
+    "README.md"
+  ],
   "scripts": {
     "build": "tsc -p tsconfig.build.json",
     "prepack": "npm run build",
@@ -42,6 +107,7 @@
     "@trpc/client": "^11.9.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "cmdk": "^1.1.1",
     "d3-hierarchy": "^3.1.2",
     "d3-selection": "^3.0.0",
     "d3-zoom": "^3.0.0",
@@ -59,6 +125,7 @@
     "radix-ui": "^1.4.3",
     "react-easy-crop": "^5.5.6",
     "react-grid-layout": "^2.2.2",
+    "react-resizable-panels": "^4.7.2",
     "sonner": "^2.0.7",
     "swiper": "^12.1.2",
     "tailwind-merge": "^3.4.0",
@@ -82,7 +149,6 @@
     "three": "^0.183.2",
     "tsx": "^4.21.0",
     "typescript": "^5.9.3",
-    "vite": "^7.3.1",
-    "vite-tsconfig-paths": "^6.1.0"
+    "vite": "^7.3.1"
   }
 }

package/src/AclEditor.tsx

@@ -1,7 +1,8 @@
 import { Button } from '#components/ui/button';
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '#components/ui/collapsible';
 import { Input } from '#components/ui/input';
-import { A, type GroupPerm, R, S, W } from '@treenity/core/core';
-import { ChevronDown, ChevronRight, X } from 'lucide-react';
+import { A, type GroupPerm, R, S, W } from '@treenity/core';
+import { ChevronRight, X } from 'lucide-react';
 import { useMemo, useState } from 'react';
 import * as cache from './cache';
 
@@ -136,7 +137,6 @@ function ancestorChain(path: string): { path: string; owner?: string; acl?: Grou
 }
 
 export function AclEditor({ path, owner, rules, currentUserId, onChange }: Props) {
-  const [open, setOpen] = useState(false);
   const [newGroup, setNewGroup] = useState('');
   const chain = useMemo(() => ancestorChain(path), [path]);
 
@@ -162,11 +162,8 @@ export function AclEditor({ path, owner, rules, currentUserId, onChange }: Props
   }
 
   return (
-    <div className="card">
-      <div
-        className="card-header cursor-pointer select-none"
-        onClick={() => setOpen((v) => !v)}
-      >
+    <Collapsible className="border-t border-border mt-2 pt-0.5 first:border-t-0 first:mt-0 first:pt-0">
+      <CollapsibleTrigger className="flex w-full items-center justify-between py-2 pb-1.5 text-[11px] font-semibold text-muted-foreground uppercase tracking-wider cursor-pointer select-none">
         <span>Access Control</span>
         <span className="flex items-center gap-2 normal-case tracking-normal font-normal">
           {effective && (
@@ -192,15 +189,11 @@ export function AclEditor({ path, owner, rules, currentUserId, onChange }: Props
               </span>
             </span>
           )}
-          {open ? (
-            <ChevronDown className="h-3 w-3" />
-          ) : (
-            <ChevronRight className="h-3 w-3" />
-          )}
+          <ChevronRight className="h-3 w-3 transition-transform duration-200 group-data-[state=open]:rotate-90" />
         </span>
-      </div>
-      {open && (
-        <div className="card-body space-y-3">
+      </CollapsibleTrigger>
+      <CollapsibleContent>
+        <div className="py-0.5 pb-2.5 space-y-3">
           <div className="field">
             <label className="text-xs text-muted-foreground">$owner</label>
             <Input value={owner} onChange={(e) => onChange(e.target.value, rules)} />
@@ -258,8 +251,8 @@ export function AclEditor({ path, owner, rules, currentUserId, onChange }: Props
             </div>
           )}
         </div>
-      )}
-    </div>
+      </CollapsibleContent>
+    </Collapsible>
   );
 }
 

package/src/ActionCards.tsx

@@ -0,0 +1,224 @@
+// ActionCards — action pill buttons with expandable params, run, and results
+
+import { Button } from '#components/ui/button';
+import { Checkbox } from '#components/ui/checkbox';
+import { Input } from '#components/ui/input';
+import { Render } from '#context';
+import { getActions, getActionSchema } from '#mods/editor-ui/node-utils';
+import type { ComponentData, NodeData } from '@treenity/core';
+import { useState } from 'react';
+import * as cache from './cache';
+import { useSchema } from './schema-loader';
+import { trpc } from './trpc';
+
+function ResultView({ value }: { value: unknown }) {
+  if (value === undefined || value === null) return null;
+  if (typeof value !== 'object')
+    return <span className="font-mono text-[11px]">{String(value)}</span>;
+
+  if ('$type' in (value as Record<string, unknown>)) {
+    return <Render value={value as ComponentData} />;
+  }
+
+  const entries = Object.entries(value as Record<string, unknown>);
+  if (entries.length === 0) return <span className="text-muted-foreground text-[11px]">empty</span>;
+
+  return (
+    <div className="flex flex-col gap-0.5">
+      {entries.map(([k, v]) => (
+        <div key={k} className="flex gap-2 text-[11px]">
+          <span className="text-muted-foreground shrink-0">{k}</span>
+          <span className="font-mono text-foreground/80 truncate">
+            {typeof v === 'object' && v !== null ? JSON.stringify(v) : String(v ?? '')}
+          </span>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+export function ActionCardList({
+  path,
+  componentName,
+  compType,
+  toast,
+  onActionComplete,
+}: {
+  path: string;
+  componentName: string;
+  compType: string;
+  compData: Record<string, unknown>;
+  toast: (msg: string) => void;
+  onActionComplete?: () => void;
+}) {
+  const schema = useSchema(compType);
+  const [expanded, setExpanded] = useState<string | null>(null);
+  const [paramsText, setParamsText] = useState<Record<string, string>>({});
+  const [schemaData, setSchemaData] = useState<Record<string, Record<string, unknown>>>({});
+  const [running, setRunning] = useState<string | null>(null);
+  const [results, setResults] = useState<Record<string, { ok: boolean; value: unknown }>>({});
+  const [resultMode, setResultMode] = useState<Record<string, 'pretty' | 'json'>>({});
+
+  if (schema === undefined) return null;
+
+  const actions = getActions(compType, schema);
+  if (actions.length === 0) return null;
+
+  async function run(a: string) {
+    setRunning(a);
+    try {
+      const actionSchema = getActionSchema(compType, a);
+      let data: unknown = {};
+      if (actionSchema) {
+        data = schemaData[a] ?? {};
+      } else {
+        const raw = (paramsText[a] ?? '').trim();
+        if (raw && raw !== '{}') {
+          try { data = JSON.parse(raw); }
+          catch { toast('Invalid JSON params'); setRunning(null); return; }
+        }
+      }
+      const result = await trpc.execute.mutate({ path, key: componentName, action: a, data });
+      const fresh = (await trpc.get.query({ path, watch: true })) as NodeData | undefined;
+      if (fresh) cache.put(fresh);
+      onActionComplete?.();
+      setResults((prev) => ({ ...prev, [a]: { ok: true, value: result } }));
+      setExpanded(a);
+    } catch (e) {
+      setResults((prev) => ({
+        ...prev,
+        [a]: { ok: false, value: e instanceof Error ? e.message : String(e) },
+      }));
+      setExpanded(a);
+    } finally {
+      setRunning(null);
+    }
+  }
+
+  return (
+    <div className="mt-2.5 pt-2.5 border-t border-border">
+      <div className="flex flex-wrap gap-1.5">
+        {actions.map((a) => (
+          <Button
+            key={a}
+            variant="outline"
+            size="sm"
+            className={`h-6 rounded-full font-mono text-[11px] text-green-300 bg-green-400/10 border-green-400/40 hover:bg-green-400/20 hover:border-green-400/60 ${expanded === a ? 'bg-green-400/20 border-green-300' : ''} ${running === a ? 'opacity-60 pointer-events-none' : ''}`}
+            onClick={() => setExpanded(expanded === a ? null : a)}
+          >
+            {running === a ? '...' : a}
+            {results[a] && !results[a].ok && expanded !== a && (
+              <span className="ml-1 text-destructive">!</span>
+            )}
+            {results[a]?.ok && expanded !== a && (
+              <span className="ml-1 text-primary/60">✓</span>
+            )}
+          </Button>
+        ))}
+      </div>
+
+      {expanded && (() => {
+        const a = expanded;
+        const actionSchema = getActionSchema(compType, a);
+        const hasParams = actionSchema !== null && Object.keys(actionSchema.properties).length > 0;
+        const noParams = actionSchema !== null && Object.keys(actionSchema.properties).length === 0;
+        const result = results[a];
+        const mode = resultMode[a] ?? 'pretty';
+
+        return (
+          <div className="mt-2 p-2 px-2.5 border border-border rounded-md bg-card">
+            {hasParams && (
+              <div className="flex flex-col gap-1.5 mb-2">
+                {Object.entries(actionSchema!.properties).map(([field, prop]) => {
+                  const p = prop as { type: string; title?: string; format?: string };
+                  const val = (schemaData[a] ?? {})[field];
+                  const setField = (v: unknown) =>
+                    setSchemaData((prev) => ({
+                      ...prev,
+                      [a]: { ...(prev[a] ?? {}), [field]: v },
+                    }));
+                  return (
+                    <div key={field} className="flex flex-col gap-0.5">
+                      <label>{p.title ?? field}</label>
+                      {p.type === 'number' || p.format === 'number' ? (
+                        <Input type="number" className="h-7 text-xs" value={String(val ?? 0)}
+                          onChange={(e) => setField(Number(e.target.value))} />
+                      ) : p.type === 'boolean' ? (
+                        <label className="flex items-center gap-1.5 cursor-pointer">
+                          <Checkbox checked={!!val}
+                            onChange={(e) => setField((e.target as HTMLInputElement).checked)} />
+                          <span className="text-[11px]">{val ? 'true' : 'false'}</span>
+                        </label>
+                      ) : (
+                        <Input className="h-7 text-xs" value={String(val ?? '')}
+                          onChange={(e) => setField(e.target.value)} />
+                      )}
+                    </div>
+                  );
+                })}
+              </div>
+            )}
+
+            {!hasParams && !noParams && (
+              <textarea
+                className="min-h-12 text-[11px] mb-2"
+                value={paramsText[a] ?? '{}'}
+                onChange={(e) => setParamsText((prev) => ({ ...prev, [a]: e.target.value }))}
+                spellCheck={false}
+                rows={2}
+              />
+            )}
+
+            <Button
+              size="sm"
+              className="h-6 rounded-full text-[11px] font-medium"
+              disabled={running !== null}
+              onClick={() => run(a)}
+            >
+              {running === a ? '...' : '▶'} {a}
+            </Button>
+
+            {result && (
+              <div className={`mt-2 p-1.5 px-2 rounded-md bg-background border ${result.ok ? 'border-border' : 'border-destructive/40 bg-destructive/5'}`}>
+                {!result.ok ? (
+                  <span className="text-destructive font-mono text-[11px]">{String(result.value)}</span>
+                ) : result.value === undefined || result.value === null ? (
+                  <span className="text-primary text-[11px]">✓ done</span>
+                ) : (
+                  <>
+                    <div className="flex items-center justify-between mb-1">
+                      <span className="text-[10px] text-muted-foreground uppercase tracking-wider">Result</span>
+                      {typeof result.value === 'object' && (
+                        <div className="flex gap-0.5">
+                          <Button
+                            variant={mode === 'pretty' ? 'secondary' : 'ghost'}
+                            size="sm"
+                            className="h-5 px-1.5 text-[10px] rounded-full"
+                            onClick={() => setResultMode((p) => ({ ...p, [a]: 'pretty' }))}
+                          >View</Button>
+                          <Button
+                            variant={mode === 'json' ? 'secondary' : 'ghost'}
+                            size="sm"
+                            className="h-5 px-1.5 text-[10px] rounded-full"
+                            onClick={() => setResultMode((p) => ({ ...p, [a]: 'json' }))}
+                          >JSON</Button>
+                        </div>
+                      )}
+                    </div>
+                    {mode === 'json' ? (
+                      <pre className="text-[11px] font-mono text-foreground/60 whitespace-pre-wrap break-all leading-relaxed">
+                        {JSON.stringify(result.value, null, 2)}
+                      </pre>
+                    ) : (
+                      <ResultView value={result.value} />
+                    )}
+                  </>
+                )}
+              </div>
+            )}
+          </div>
+        );
+      })()}
+    </div>
+  );
+}