@treenity/react 3.0.0

package/src/lib/minimd.ts

@@ -0,0 +1,95 @@
+// Minimal markdown → HTML for chat bubbles (~50 lines)
+// Covers: headers, bold, italic, inline code, code blocks, links, lists, blockquotes, hr
+import './minimd.css';
+
+const esc = (s: string) => s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+
+function inline(s: string): string {
+  return esc(s)
+    .replace(/`([^`]+)`/g, '<code>$1</code>')
+    .replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>')
+    .replace(/__(.+?)__/g, '<strong>$1</strong>')
+    .replace(/\*(.+?)\*/g, '<em>$1</em>')
+    .replace(/_(.+?)_/g, '<em>$1</em>')
+    .replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" target="_blank" rel="noopener">$1</a>');
+}
+
+export function minimd(src: string): string {
+  const lines = src.split('\n');
+  const out: string[] = [];
+  let i = 0;
+
+  while (i < lines.length) {
+    const line = lines[i];
+
+    // Fenced code block
+    if (line.startsWith('```')) {
+      const lang = line.slice(3).trim();
+      const code: string[] = [];
+      i++;
+      while (i < lines.length && !lines[i].startsWith('```')) {
+        code.push(lines[i]);
+        i++;
+      }
+      i++; // skip closing ```
+      out.push(`<pre${lang ? ` data-lang="${esc(lang)}"` : ''}><code>${esc(code.join('\n'))}</code></pre>`);
+      continue;
+    }
+
+    // Header
+    const hm = line.match(/^(#{1,4})\s+(.+)/);
+    if (hm) { out.push(`<h${hm[1].length}>${inline(hm[2])}</h${hm[1].length}>`); i++; continue; }
+
+    // HR
+    if (/^[-*_]{3,}\s*$/.test(line)) { out.push('<hr>'); i++; continue; }
+
+    // Blockquote
+    if (line.startsWith('> ')) { out.push(`<blockquote>${inline(line.slice(2))}</blockquote>`); i++; continue; }
+
+    // Unordered list
+    if (/^[-*+]\s/.test(line)) {
+      out.push('<ul>');
+      while (i < lines.length && /^[-*+]\s/.test(lines[i])) {
+        out.push(`<li>${inline(lines[i].replace(/^[-*+]\s/, ''))}</li>`);
+        i++;
+      }
+      out.push('</ul>');
+      continue;
+    }
+
+    // Ordered list
+    if (/^\d+\.\s/.test(line)) {
+      out.push('<ol>');
+      while (i < lines.length && /^\d+\.\s/.test(lines[i])) {
+        out.push(`<li>${inline(lines[i].replace(/^\d+\.\s/, ''))}</li>`);
+        i++;
+      }
+      out.push('</ol>');
+      continue;
+    }
+
+    // Table
+    if (line.startsWith('|') && i + 1 < lines.length && /^\|[-\s:|]+\|/.test(lines[i + 1])) {
+      const parseRow = (r: string) => r.split('|').slice(1, -1).map(c => c.trim());
+      const headers = parseRow(line);
+      i += 2; // skip header + separator
+      out.push('<table><thead><tr>' + headers.map(h => `<th>${inline(h)}</th>`).join('') + '</tr></thead><tbody>');
+      while (i < lines.length && lines[i].startsWith('|')) {
+        const cells = parseRow(lines[i]);
+        out.push('<tr>' + cells.map(c => `<td>${inline(c)}</td>`).join('') + '</tr>');
+        i++;
+      }
+      out.push('</tbody></table>');
+      continue;
+    }
+
+    // Empty line
+    if (!line.trim()) { i++; continue; }
+
+    // Paragraph
+    out.push(`<p>${inline(line)}</p>`);
+    i++;
+  }
+
+  return out.join('\n');
+}

package/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

package/src/load-client.ts

@@ -0,0 +1,5 @@
+// Client-side mod auto-discovery.
+// Internal mods (packages/react/src/mods/*) — vite glob.
+// External mods (mods/*, core/src/mods/*) — vite-plugin-mods virtual module.
+import.meta.glob('./mods/*/client.ts', { eager: true });
+import 'virtual:mod-clients';

package/src/main.tsx

@@ -0,0 +1,22 @@
+import 'reflect-metadata';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { enablePatches } from 'immer';
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import { App } from './App';
+import './load-client';
+import './style.css';
+
+enablePatches();
+
+const queryClient = new QueryClient();
+
+const root = document.getElementById('root');
+if (!root) throw new Error('No #root element');
+createRoot(root).render(
+  <StrictMode>
+    <QueryClientProvider client={queryClient}>
+      <App />
+    </QueryClientProvider>
+  </StrictMode>,
+);

package/src/mods/editor-ui/CLAUDE.md

@@ -0,0 +1,3 @@
+# editor-ui
+
+View-слой админки. Fallback `react`-рендерер для всех нод/компонентов, специализированные views (layout, page, dir, user, list), schema-driven form fields для NodeEditor.

package/src/mods/editor-ui/client.ts

@@ -0,0 +1,8 @@
+import './default-view';
+import './layout-view';
+import './user-view';
+import './dir-view';
+import './list-items';
+import { registerFormFields } from './form-fields';
+
+registerFormFields();

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

@@ -0,0 +1,148 @@
+import { Render, RenderContext } from '#context';
+import { useChildren } from '#hooks';
+import { trpc } from '#trpc';
+import { type ComponentData, type NodeData, register } from '@treenity/core/core';
+import { useCallback, useState } from 'react';
+import { getComponents, getPlainFields, getSchema } from './node-utils';
+
+/** Fallback for components without their own react handler */
+function ComponentFieldsView({ value }: { value: ComponentData }) {
+  const s = getSchema(value.$type);
+  const fields = s ? Object.entries(s.properties) : [];
+
+  if (fields.length > 0) {
+    return (
+      <>
+        {fields.map(([k, prop]) => {
+          const val = (value as any)[k];
+          return (
+            <div key={k} className="comp-view-row">
+              <span className="comp-view-label">{(prop as any).title || k}</span>
+              <span className="comp-view-value">
+                {val === undefined || val === '' ? '—' : typeof val === 'object' ? JSON.stringify(val) : String(val)}
+              </span>
+            </div>
+          );
+        })}
+      </>
+    );
+  }
+
+  const entries = Object.entries(value).filter(([k]) => !k.startsWith('$'));
+  if (entries.length === 0) return null;
+
+  return (
+    <>
+      {entries.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 || '—' : typeof v === 'object' ? JSON.stringify(v) : String(v)}
+          </span>
+        </div>
+      ))}
+    </>
+  );
+}
+
+function GenerateViewButton({ type, sample }: { type: string; sample: NodeData }) {
+  const [status, setStatus] = useState<'idle' | 'generating' | 'done' | 'error'>('idle');
+  const [error, setError] = useState('');
+
+  const generate = useCallback(async () => {
+    setStatus('generating');
+    try {
+      const clean = Object.fromEntries(
+        Object.entries(sample).filter(([k]) => !['$rev', '$acl', '$owner'].includes(k)),
+      );
+      await trpc.execute.mutate({
+        path: '/metatron',
+        action: 'task',
+        data: { prompt: `Generate a React view for type "${type}". Sample data:\n${JSON.stringify(clean, null, 2)}` },
+      });
+      setStatus('done');
+    } catch (err: any) {
+      setError(err.message);
+      setStatus('error');
+    }
+  }, [type, sample]);
+
+  if (status === 'generating') {
+    return <div className="text-sm text-blue-400 animate-pulse py-2">Creating task...</div>;
+  }
+  if (status === 'error') {
+    return <div className="text-sm text-red-400 py-2">{error}</div>;
+  }
+  if (status === 'done') {
+    return <div className="text-sm text-green-400 py-2">Task created in /metatron — waiting for AI</div>;
+  }
+
+  return (
+    <button
+      onClick={generate}
+      className="text-sm text-blue-400 hover:text-blue-300 border border-blue-400/30 rounded px-3 py-1.5 my-2"
+    >
+      Generate AI View
+    </button>
+  );
+}
+
+function DefaultNodeView({ value }: { value: NodeData }) {
+  const children = useChildren(value.$path);
+  const plain = getPlainFields(value);
+  const components = getComponents(value);
+  const hasInfo = Object.keys(plain).length > 0 || components.length > 0;
+  const canGenerate = value.$type.includes('.');
+
+  return (
+    <div className="node-default-view">
+      {canGenerate && <GenerateViewButton type={value.$type} sample={value} />}
+
+      {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>
+        );
+      })}
+
+      {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>
+  );
+}
+
+/** Dispatch: node → DefaultNodeView, component → ComponentFieldsView */
+function DefaultView({ value }: { value: ComponentData }) {
+  if ('$path' in value) return <DefaultNodeView value={value as NodeData} />;
+  return <ComponentFieldsView value={value} />;
+}
+
+register('default', 'react', DefaultView as any);

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

@@ -0,0 +1,91 @@
+import { Render, RenderContext } from '#context';
+import { useChildren } from '#hooks';
+import { type NodeData, register } from '@treenity/core/core';
+
+const STATUS_COLORS: Record<string, [string, string]> = {
+  draft: ['var(--accent-subtle, #1a2a3a)', 'var(--accent)'],
+  published: ['#1a2e1a', '#4c8'],
+  archived: ['#2e2a1a', '#ca4'],
+};
+
+function FolderView({ value }: { value: NodeData }) {
+  const children = useChildren(value.$path);
+  const meta = value.metadata as
+    | { $type: string; title?: string; description?: string }
+    | undefined;
+  const status = value.status as { $type: string; value?: string } | undefined;
+  const counter = value.counter as { $type: string; count?: number } | undefined;
+
+  return (
+    <div className="node-default-view">
+      {(meta || status || counter) && (
+        <div
+          style={{
+            padding: 16,
+            background: 'var(--surface)',
+            borderRadius: 'var(--radius)',
+            marginBottom: 12,
+          }}
+        >
+          {meta?.title && <div style={{ fontSize: 18, fontWeight: 600 }}>{meta.title}</div>}
+          {meta?.description && (
+            <div style={{ fontSize: 13, color: 'var(--text-2)', marginTop: 4 }}>
+              {meta.description}
+            </div>
+          )}
+          {(status || counter) && (
+            <div style={{ display: 'flex', gap: 8, marginTop: 8 }}>
+              {status?.value &&
+                (() => {
+                  const [bg, fg] = STATUS_COLORS[status.value] ?? STATUS_COLORS.draft;
+                  return (
+                    <span
+                      style={{
+                        padding: '2px 10px',
+                        borderRadius: 12,
+                        fontSize: 11,
+                        fontWeight: 600,
+                        background: bg,
+                        color: fg,
+                      }}
+                    >
+                      {status.value}
+                    </span>
+                  );
+                })()}
+              {counter != null && (
+                <span
+                  style={{
+                    padding: '2px 10px',
+                    borderRadius: 12,
+                    fontSize: 11,
+                    fontWeight: 600,
+                    background: 'var(--surface)',
+                    border: '1px solid var(--border)',
+                    color: 'var(--text-2)',
+                  }}
+                >
+                  count: {counter.count ?? 0}
+                </span>
+              )}
+            </div>
+          )}
+        </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 && !meta && !status && !counter && (
+        <div className="node-empty">Empty folder</div>
+      )}
+    </div>
+  );
+}
+
+register('dir', 'react', FolderView as any);