@treenity/react 3.0.0

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

@@ -0,0 +1,62 @@
+// Default react:layout handler — renders node components + children
+// Types can register custom react:layout handlers to override arrangement
+
+import { Render, RenderContext } from '#context';
+import { useChildren } from '#hooks';
+import { type ComponentData, type NodeData, register } from '@treenity/core/core';
+import { getComponents, getPlainFields } from './node-utils';
+
+function DefaultLayout({ value }: { value: ComponentData }) {
+  if (!('$path' in value)) return null;
+  const node = value as NodeData;
+  const children = useChildren(node.$path);
+  const plain = getPlainFields(node);
+  const components = getComponents(node);
+  const hasInfo = Object.keys(plain).length > 0 || components.length > 0;
+
+  return (
+    <div className="node-layout">
+      <RenderContext name="react">
+        {components.map(([name, comp]) => {
+          const ctype = (comp as any).$type;
+          return (
+            <div key={name} className="comp-view-card">
+              <div className="comp-view-header">
+                {name}
+                {name !== ctype && <span className="comp-type">{ctype}</span>}
+              </div>
+              <Render value={comp as ComponentData} />
+            </div>
+          );
+        })}
+      </RenderContext>
+
+      {Object.keys(plain).length > 0 && (
+        <div className="node-info-bar">
+          {Object.entries(plain).map(([k, v]) => (
+            <span key={k} className="node-info-chip data">
+              <span className="node-info-chip-label">{k}</span>
+              <span className="node-info-chip-val">
+                {typeof v === 'string' ? v : JSON.stringify(v)}
+              </span>
+            </span>
+          ))}
+        </div>
+      )}
+
+      {children.length > 0 && (
+        <RenderContext name="react:list">
+          <div className="children-grid">
+            {children.map((child) => (
+              <Render key={child.$path} value={child} />
+            ))}
+          </div>
+        </RenderContext>
+      )}
+
+      {children.length === 0 && !hasInfo && <div className="node-empty">Empty node</div>}
+    </div>
+  );
+}
+
+register('default', 'react:layout', DefaultLayout as any);

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

@@ -0,0 +1,63 @@
+// Universal list item components for react:list context
+// 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';
+
+const TYPE_ICONS: Record<string, string> = {
+  root: '/',
+  folder: 'D',
+  page: 'P',
+  bot: 'B',
+  'type-registry': 'T',
+  'mount-point': 'M',
+  type: 'S',
+  user: 'U',
+  shop: 'S',
+  config: 'C',
+};
+
+function typeIcon(type: string): string {
+  return TYPE_ICONS[type] ?? type.charAt(0).toUpperCase();
+}
+
+export function pathName(p: string): string {
+  return p.slice(p.lastIndexOf('/') + 1) || '/';
+}
+
+// ── Dir list item ──
+
+function DirListItem({ value }: { value: NodeData }) {
+  const navigate = useNavigate();
+  const meta = value.metadata as { $type: string; title?: string; description?: string } | undefined;
+  return (
+    <div className="child-card" onClick={() => navigate(value.$path)}>
+      <span className="child-icon">&#128193;</span>
+      <div className="child-info">
+        <span className="child-name">{meta?.title ?? pathName(value.$path)}</span>
+        <span className="child-type">{meta?.description ?? 'dir'}</span>
+      </div>
+      <span className="child-chevron">&#8250;</span>
+    </div>
+  );
+}
+register('dir', 'react:list', DirListItem as any);
+
+// ── Default list item — fallback for any type ──
+
+function DefaultListItem({ value }: { value: NodeData }) {
+  const navigate = useNavigate();
+  const path = (value as any).$ref ?? value.$path;
+  return (
+    <div className="child-card" onClick={() => navigate(path)}>
+      <span className="child-icon">{typeIcon(value.$type)}</span>
+      <div className="child-info">
+        <span className="child-name">{pathName(value.$path)}</span>
+        <span className="child-type">{value.$type}</span>
+      </div>
+      <span className="child-chevron">&#8250;</span>
+    </div>
+  );
+}
+register('default', 'react:list', DefaultListItem as any);

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

@@ -0,0 +1,84 @@
+import { getContextsForType, type NodeData, resolve } from '@treenity/core/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,
+  ) as [string, Record<string, unknown>][];
+}
+
+export function getPlainFields(node: NodeData): Record<string, unknown> {
+  const out: Record<string, unknown> = {};
+  for (const [k, v] of Object.entries(node)) {
+    if (k.startsWith('$')) continue;
+    if (typeof v === 'object' && v !== null && '$type' in v) continue;
+    out[k] = v;
+  }
+  return out;
+}
+
+export function getSchema(type: string): TypeSchema | null {
+  const h = resolve(type, 'schema');
+  return h ? (h() as TypeSchema) : null;
+}
+
+const INTERNAL_CONTEXTS = new Set(['schema', 'mount', 'class']);
+
+export function getViewContexts(type: string, node?: NodeData): string[] {
+  const ctxs = getContextsForType(type).filter(
+    (c) => !INTERNAL_CONTEXTS.has(c) && !c.startsWith('action:'),
+  );
+  // Also collect view contexts from component types present on the node
+  if (node) {
+    for (const [, comp] of getComponents(node)) {
+      for (const c of getContextsForType((comp as any).$type)) {
+        if (!INTERNAL_CONTEXTS.has(c) && !c.startsWith('action:') && !ctxs.includes(c)) {
+          ctxs.push(c);
+        }
+      }
+    }
+  }
+  return ctxs;
+}
+
+export function getActions(type: string, schema?: TypeSchema | null): string[] {
+  const actions = getContextsForType(type)
+    .filter((c) => c.startsWith('action:') && !c.includes(':', 'action:'.length))
+    .map((c) => c.slice('action:'.length))
+    .filter((a) => !a.startsWith('_'));
+
+  // Schema is the client-side contract: server-only actions declared in schema.methods
+  // are discoverable by all clients (browser, MCP, external) without the implementation
+  if (schema?.methods) {
+    for (const name of Object.keys(schema.methods)) {
+      if (!name.startsWith('_') && !actions.includes(name)) actions.push(name);
+    }
+  }
+
+  return actions;
+}
+
+// Returns action param schema from generated schema.methods[action].arguments[0].
+// null  → no schema info (show JSON textarea fallback)
+// properties={} → confirmed no params (hide params section)
+// properties={…} → typed form fields
+export function getActionSchema(type: string, action: string): TypeSchema | null {
+  const schema = getSchema(type);
+  if (!schema?.methods) return null;
+  const method = schema.methods[action];
+  if (!method) return null;
+  if (method.arguments.length === 0) return { title: action, type: 'object', properties: {} };
+  const arg = method.arguments[0];
+  if (arg.type !== 'object' || !arg.properties || Object.keys(arg.properties).length === 0)
+    return { title: action, type: 'object', properties: {} };
+  return {
+    title: method.title ?? action,
+    type: 'object',
+    properties: arg.properties as Record<string, PropertySchema>,
+  };
+}
+
+export function pickDefaultContext(type: string): string {
+  const ctxs = getViewContexts(type);
+  return ctxs.includes('react') ? 'react' : ctxs[0] ?? 'react';
+}

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

@@ -0,0 +1,101 @@
+import { type NodeData, register } from '@treenity/core/core';
+import { pathName } from './list-items';
+import { getComponents, getSchema } from './node-utils';
+
+function UserView({ value }: { value: NodeData }) {
+  const id = pathName(value.$path);
+  const groups = value.groups as { $type: string; list: string[] } | undefined;
+  const comps = getComponents(value).filter(([n]) => n !== 'groups' && n !== 'credentials');
+
+  return (
+    <div className="node-default-view">
+      <div style={{ display: 'flex', gap: 16, alignItems: 'center', marginBottom: 16 }}>
+        <div
+          style={{
+            width: 56,
+            height: 56,
+            borderRadius: '50%',
+            background: 'var(--accent)',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            fontSize: 22,
+            fontWeight: 700,
+            color: '#fff',
+            flexShrink: 0,
+          }}
+        >
+          {id.charAt(0).toUpperCase()}
+        </div>
+        <div>
+          <div style={{ fontSize: 16, fontWeight: 600 }}>{id}</div>
+          {groups?.list && groups.list.length > 0 && (
+            <div style={{ display: 'flex', gap: 4, marginTop: 6, flexWrap: 'wrap' }}>
+              {groups.list.map((g) => (
+                <span
+                  key={g}
+                  style={{
+                    padding: '2px 10px',
+                    borderRadius: 12,
+                    background: 'var(--accent-subtle)',
+                    color: 'var(--accent)',
+                    fontSize: 11,
+                    fontWeight: 500,
+                  }}
+                >
+                  {g}
+                </span>
+              ))}
+            </div>
+          )}
+          {value.$owner && (
+            <div style={{ fontSize: 11, color: 'var(--text-3)', marginTop: 4 }}>
+              owner: {String(value.$owner)}
+            </div>
+          )}
+        </div>
+      </div>
+      {comps.map(([name, comp]) => {
+        const ctype = (comp as any).$type;
+        const s = getSchema(ctype);
+        const fields = s ? Object.entries(s.properties) : [];
+        return (
+          <div key={name} className="comp-view-card">
+            <div className="comp-view-header">
+              {name}
+              {name !== ctype && <span className="comp-type">{ctype}</span>}
+            </div>
+            {fields.length > 0
+              ? fields.map(([k, prop]) => {
+                  const val = (comp as any)[k];
+                  return (
+                    <div key={k} className="comp-view-row">
+                      <span className="comp-view-label">{(prop as any).title}</span>
+                      <span className="comp-view-value">
+                        {val === undefined || val === ''
+                          ? '—'
+                          : typeof val === 'object'
+                            ? JSON.stringify(val)
+                            : String(val)}
+                      </span>
+                    </div>
+                  );
+                })
+              : Object.entries(comp)
+                  .filter(([k]) => !k.startsWith('$'))
+                  .map(([k, v]) => (
+                    <div key={k} className="comp-view-row">
+                      <span className="comp-view-label">{k}</span>
+                      <span className="comp-view-value">
+                        {typeof v === 'string' ? v || '—' : JSON.stringify(v)}
+                      </span>
+                    </div>
+                  ))}
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+register('user', 'react', UserView as any);

package/src/mods/treenity/CLAUDE.md

@@ -0,0 +1,7 @@
+# treenity
+
+Системный мод платформы. Actions для `/sys` ноды: обнаружение типов (catalog, search_types, describe_type), компиляция JSX-views, деплой prefab'ов. Реестр модулей `t.mod`.
+
+## Types
+- `treenity.system` — actions: catalog, search_types, describe_type, compile_view, deploy_prefab
+- `t.mod` — name, state (discovered/loading/loaded/failed/disabled)

package/src/mods/treenity/client.ts

@@ -0,0 +1,6 @@
+import './schema-form';
+import './type-view';
+import './ref-view';
+import { registerGroups } from './groups';
+
+registerGroups();

package/src/mods/treenity/groups/index.tsx

@@ -0,0 +1,65 @@
+// Tags form handler — react:form for "tags" format
+
+import { Badge } from '#components/ui/badge';
+import { Button } from '#components/ui/button';
+import { Input } from '#components/ui/input';
+import { register } from '@treenity/core/core';
+import { X } from 'lucide-react';
+import { useState } from 'react';
+
+type FP = {
+  value: { $type: string; value: unknown; label?: string };
+  onChange?: (next: any) => void;
+};
+
+function TagsForm({ value, onChange }: FP) {
+  const [input, setInput] = useState('');
+  const tags: string[] = Array.isArray(value.value) ? value.value : [];
+
+  function add() {
+    const t = input.trim();
+    if (!t || tags.includes(t)) return;
+    onChange?.({ ...value, value: [...tags, t] });
+    setInput('');
+  }
+
+  function remove(tag: string) {
+    onChange?.({ ...value, value: tags.filter((t) => t !== tag) });
+  }
+
+  return (
+    <div className="space-y-2">
+      <div className="flex flex-wrap gap-1.5">
+        {tags.map((tag) => (
+          <Badge key={tag} variant="secondary" className="gap-1 pr-1">
+            {tag}
+            <button
+              type="button"
+              onClick={() => remove(tag)}
+              className="ml-0.5 rounded-full hover:bg-destructive/20 hover:text-destructive p-0.5"
+            >
+              <X className="h-3 w-3" />
+            </button>
+          </Badge>
+        ))}
+        {tags.length === 0 && <span className="text-xs text-muted-foreground">No groups</span>}
+      </div>
+      <div className="flex gap-2">
+        <Input
+          className="flex-1"
+          placeholder="Add group..."
+          value={input}
+          onChange={(e) => setInput(e.target.value)}
+          onKeyDown={(e) => e.key === 'Enter' && (e.preventDefault(), add())}
+        />
+        <Button variant="outline" size="sm" type="button" onClick={add}>
+          Add
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+export function registerGroups() {
+  register('tags', 'react:form', TagsForm as any);
+}

package/src/mods/treenity/preview.tsx

@@ -0,0 +1,133 @@
+// Reusable type preview — Storybook-like: context switcher + live render + schema form editor
+
+import { Render, RenderContext } from '#context';
+import { type ComponentData, getContextsForType, type NodeData } from '@treenity/core/core';
+import { useMemo, useState } from 'react';
+
+// ── Mock data generator (by JSON Schema field type) ──
+
+const STRING_HINTS: [RegExp, string][] = [
+  [/title|heading|name/i, 'Amazing Feature Title'],
+  [/desc|subtitle|summary|text|content|body/i, 'A short description of this amazing feature that showcases its value.'],
+  [/button|label|cta/i, 'Get Started'],
+  [/url|link|href/i, 'https://example.com'],
+  [/image|photo|avatar|picture|src/i, 'https://picsum.photos/seed/demo/400/200'],
+  [/email/i, 'user@example.com'],
+  [/phone|tel/i, '+1-555-0123'],
+  [/address/i, '42 Oak Street, San Francisco'],
+  [/color/i, '#4c88ff'],
+  [/date/i, '2026-01-15'],
+  [/status|state/i, 'active'],
+  [/tag|category/i, 'featured'],
+];
+
+function mockValue(schema: Record<string, unknown>, fieldName = ''): unknown {
+  const type = schema.type as string | undefined;
+  if (schema.default !== undefined && schema.default !== '' && schema.default !== 0) return schema.default;
+  if (schema.enum) return (schema.enum as unknown[])[0];
+
+  switch (type) {
+    case 'string': {
+      const fmt = schema.format as string | undefined;
+      if (fmt === 'date' || fmt === 'date-time') return '2026-01-15';
+      if (fmt === 'email') return 'user@example.com';
+      if (fmt === 'uri' || fmt === 'url') return 'https://example.com';
+      if (fmt === 'color') return '#4c88ff';
+      if (fmt === 'image') return 'https://picsum.photos/seed/demo/400/200';
+      if (fmt === 'textarea') return 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.';
+      for (const [re, val] of STRING_HINTS) if (re.test(fieldName)) return val;
+      return schema.title ? `Sample ${schema.title}` : 'Sample text';
+    }
+    case 'number':
+    case 'integer': {
+      const min = (schema.minimum as number) ?? 0;
+      const max = (schema.maximum as number) ?? 100;
+      return Math.round((min + max) / 2) || 42;
+    }
+    case 'boolean':
+      return true;
+    case 'array': {
+      const items = schema.items as Record<string, unknown> | undefined;
+      if (!items) return ['alpha', 'beta', 'gamma'];
+      return [mockValue(items, fieldName), mockValue(items, fieldName), mockValue(items, fieldName)];
+    }
+    case 'object': {
+      const props = (schema.properties ?? {}) as Record<string, Record<string, unknown>>;
+      return mockObject(props);
+    }
+    default:
+      return 'sample';
+  }
+}
+
+export function mockObject(properties: Record<string, Record<string, unknown>>): Record<string, unknown> {
+  const result: Record<string, unknown> = {};
+  for (const [k, v] of Object.entries(properties)) result[k] = mockValue(v, k);
+  return result;
+}
+
+// ── Preview component ──
+
+export function TypePreview({ typeName, properties }: {
+  typeName: string;
+  properties: Record<string, Record<string, unknown>>;
+}) {
+  const contexts = getContextsForType(typeName);
+  const reactContexts = contexts.filter(c => c.startsWith('react'));
+
+  const initial = useMemo(() => ({
+    $path: `/preview/${typeName.replace(/\./g, '/')}`,
+    $type: typeName,
+    ...mockObject(properties),
+  } as NodeData), [typeName]);
+
+  const [previewCtx, setPreviewCtx] = useState<string | null>(null);
+  const [node, setNode] = useState<NodeData>(initial);
+
+  if (reactContexts.length === 0) return null;
+
+  const handleFormChange = (next: ComponentData) => {
+    setNode({ ...next, $path: initial.$path, $type: initial.$type } as NodeData);
+  };
+
+  return (
+    <div>
+      <div className="flex gap-1.5 mb-2">
+        {reactContexts.map(c => (
+          <button
+            key={c}
+            onClick={() => setPreviewCtx(prev => prev === c ? null : c)}
+            className={`px-2.5 py-0.5 rounded-full text-xs font-mono border cursor-pointer transition-colors ${
+              previewCtx === c
+                ? 'bg-primary text-primary-foreground border-primary'
+                : 'bg-muted border-border text-muted-foreground hover:border-primary/50'
+            }`}
+          >
+            {c}
+          </button>
+        ))}
+      </div>
+
+      {previewCtx && (
+        <div className="flex flex-col gap-3">
+          <div className="border border-border rounded-lg p-3 bg-background/50">
+            <RenderContext name={previewCtx}>
+              <Render value={node} />
+            </RenderContext>
+          </div>
+
+          <details className="group">
+            <summary className="text-xs text-muted-foreground cursor-pointer select-none hover:text-foreground transition-colors">
+              Edit data
+            </summary>
+            <div className="mt-2 border border-border rounded-lg p-3 bg-muted/30">
+              <RenderContext name="react:form">
+                <Render value={node} onChange={handleFormChange} />
+              </RenderContext>
+            </div>
+          </details>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/mods/treenity/ref-view.tsx

@@ -0,0 +1,87 @@
+// Ref node/component view — shows target path, resolve button, inline preview
+
+import { Render } from '#context';
+import { usePath } from '#hooks';
+import { type NodeData, register } from '@treenity/core/core';
+import { useState } from 'react';
+
+// ── Node-level view (for ref nodes like /sys/autostart/xxx) ──
+
+function RefNodeView({ value, onSelect }: { value: NodeData; onSelect?: (p: string) => void }) {
+  const ref = (value as any).$ref as string | undefined;
+  if (!ref) return <div className="text-sm text-muted-foreground">Invalid ref (no $ref)</div>;
+
+  return <RefDisplay target={ref} onSelect={onSelect} />;
+}
+
+// ── List item (compact, inside child-card grid) ──
+
+function RefListItem({ value }: { value: NodeData }) {
+  const ref = (value as any).$ref as string | undefined;
+  const name = value.$path.split('/').at(-1) || value.$path;
+
+  return (
+    <>
+      <span className="child-icon">&#128279;</span>
+      <div className="child-info">
+        <span className="child-name">{name}</span>
+        <span className="child-type">{ref ?? 'ref'}</span>
+      </div>
+    </>
+  );
+}
+
+// ── Shared display ──
+
+function RefDisplay({ target, onSelect }: { target: string; onSelect?: (p: string) => void }) {
+  const [resolved, setResolved] = useState(false);
+  const targetNode = usePath(resolved ? target : null);
+
+  return (
+    <div className="space-y-3">
+      {/* Link row */}
+      <div className="flex items-center gap-2">
+        <span className="text-muted-foreground text-sm">ref</span>
+        <span className="text-sm font-mono text-primary">{target}</span>
+
+        {onSelect && (
+          <button
+            className="text-xs px-2 py-0.5 rounded bg-muted hover:bg-muted/80 text-foreground border border-border"
+            onClick={() => onSelect(target)}
+          >
+            Go to
+          </button>
+        )}
+
+        <button
+          className="text-xs px-2 py-0.5 rounded bg-muted hover:bg-muted/80 text-foreground border border-border"
+          onClick={() => setResolved(!resolved)}
+        >
+          {resolved ? 'Collapse' : 'Resolve'}
+        </button>
+      </div>
+
+      {/* Resolved target */}
+      {resolved && (
+        <div className="border border-border rounded p-3 bg-muted/30">
+          {targetNode ? (
+            <div className="space-y-1">
+              <div className="flex items-center gap-2 text-xs text-muted-foreground mb-2">
+                <span className="font-mono">{targetNode.$type}</span>
+                <span>{targetNode.$path}</span>
+              </div>
+              <Render value={targetNode} />
+            </div>
+          ) : (
+            <div className="text-sm text-muted-foreground">Loading...</div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ── Registration ──
+
+register('ref', 'react', RefNodeView as any);
+register('ref', 'react:list', RefListItem as any);

package/src/mods/treenity/schema-form.tsx

@@ -0,0 +1,65 @@
+// Default react:form handler — renders form from type schema automatically
+// Any type without a specific react:form handler falls here via resolve('default', 'react:form')
+
+import { type RenderProps } from '#context';
+import { register, resolve } from '@treenity/core/core';
+import { createElement } from 'react';
+
+function DefaultSchemaForm({ value, onChange }: RenderProps) {
+  const schemaHandler = resolve(value.$type, 'schema');
+  if (!schemaHandler) {
+    return <div className="text-xs text-muted-foreground italic">No schema for {value.$type}</div>;
+  }
+
+  const schema = schemaHandler() as {
+    title?: string;
+    properties?: Record<string, Record<string, unknown>>;
+  };
+  const properties = schema.properties ?? {};
+
+  if (Object.keys(properties).length === 0) {
+    return <div className="text-xs text-muted-foreground italic">No fields defined</div>;
+  }
+
+  return (
+    <div className="flex flex-col gap-3">
+      {Object.entries(properties).map(([name, fieldSchema]) => {
+        const fieldType = String(fieldSchema.format ?? fieldSchema.type ?? 'string');
+        const isReadOnly = !!fieldSchema.readOnly;
+        const handler = resolve(fieldType, isReadOnly ? 'react' : 'react:form');
+        if (!handler) {
+          return (
+            <div key={name} className="text-xs text-destructive">
+              No form handler for type: {fieldType}
+            </div>
+          );
+        }
+
+        const fieldData: Record<string, unknown> = {
+          $type: fieldType,
+          value: (value as any)[name],
+          label: String(fieldSchema.label ?? fieldSchema.title ?? name),
+          placeholder: fieldSchema.description ? String(fieldSchema.description) : undefined,
+        };
+        if (fieldSchema.items) fieldData.items = fieldSchema.items;
+        if (fieldSchema.enum) fieldData.enum = fieldSchema.enum;
+
+        return (
+          <div key={name} className="flex flex-col gap-1">
+            {fieldType !== 'boolean' && (
+              <label className="text-xs font-medium text-muted-foreground">
+                {fieldData.label as string}
+              </label>
+            )}
+            {createElement(handler as any, {
+              value: fieldData,
+              onChange: (next: any) => onChange?.({ ...value, [name]: next.value }),
+            })}
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+register('default', 'react:form', DefaultSchemaForm as any);