@treenity/react 3.0.0 → 3.0.2

package/src/mods/editor-ui/editor-ui.css

@@ -0,0 +1,174 @@
+/* Form fields */
+.field {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 4px;
+}
+.field:last-child {
+  margin-bottom: 0;
+}
+.field label {
+  font-size: 11px;
+  font-weight: 500;
+  color: var(--text-2);
+  width: 60px;
+  flex-shrink: 0;
+  white-space: nowrap;
+  position: relative;
+}
+.field:has(textarea),
+.field.stack {
+  flex-direction: column;
+  align-items: stretch;
+}
+.field:has(textarea) label,
+.field.stack label {
+  min-width: unset;
+  margin-bottom: 3px;
+}
+
+/* Component data view — shows field values in default view */
+.comp-view-card {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  padding: 14px 16px;
+  margin-bottom: 12px;
+}
+.comp-view-header {
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--text-3);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  margin-bottom: 10px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.comp-view-header .comp-type {
+  font-family: var(--mono);
+  color: var(--accent);
+  background: var(--accent-subtle);
+  padding: 1px 6px;
+  border-radius: 10px;
+  font-size: 10px;
+  text-transform: none;
+}
+.comp-view-row {
+  display: flex;
+  gap: 8px;
+  font-size: 13px;
+  padding: 3px 0;
+}
+.comp-view-label {
+  color: var(--text-3);
+  min-width: 80px;
+  flex-shrink: 0;
+}
+.comp-view-value {
+  color: var(--text);
+  word-break: break-word;
+}
+
+/* Info bar — compact chips for components and fields */
+.node-info-bar {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-bottom: 20px;
+}
+.node-info-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 10px;
+  border-radius: 16px;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  font-size: 12px;
+}
+.node-info-chip-label {
+  color: var(--text-2);
+  font-weight: 500;
+}
+.node-info-chip.data .node-info-chip-val {
+  color: var(--text);
+  max-width: 120px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* Children grid — file explorer cards with staggered reveal */
+.children-grid {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.child-card {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 10px 14px;
+  border-radius: var(--radius);
+  cursor: pointer;
+  transition: all var(--transition);
+}
+.child-card:hover {
+  background: var(--surface);
+}
+
+.child-icon {
+  width: 32px;
+  height: 32px;
+  border-radius: 8px;
+  background: var(--surface-2);
+  border: 1px solid var(--border);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text-2);
+  flex-shrink: 0;
+}
+.child-info {
+  flex: 1;
+  min-width: 0;
+}
+.child-name {
+  display: block;
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--text);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.child-type {
+  display: block;
+  font-size: 11px;
+  color: var(--text-3);
+  font-family: var(--mono);
+  margin-top: 1px;
+}
+.child-chevron {
+  color: var(--text-3);
+  font-size: 18px;
+  flex-shrink: 0;
+  transition: transform var(--transition);
+}
+.child-card:hover .child-chevron {
+  transform: translateX(2px);
+  color: var(--text-2);
+}
+
+.node-empty {
+  color: var(--text-3);
+  font-size: 13px;
+  padding: 40px;
+  text-align: center;
+}

package/src/mods/editor-ui/empty-placeholder.tsx

@@ -0,0 +1,39 @@
+import { Button } from '#components/ui/button';
+import { set } from '#hooks';
+import type { NodeData } from '@treenity/core';
+import { Plus } from 'lucide-react';
+import { useState } from 'react';
+import { TypePicker } from './type-picker';
+
+export function EmptyNodePlaceholder({ value }: { value: NodeData }) {
+  const [picking, setPicking] = useState(false);
+
+  return (
+    <div className="flex flex-col items-center justify-center gap-3 py-12 px-6">
+      <div className="text-[13px] text-[--text-3]">Empty node</div>
+      <Button
+        variant="outline"
+        size="sm"
+        onClick={() => setPicking(true)}
+        className="text-[12px] text-[--text-3] hover:text-[--accent] hover:bg-[--accent]/10"
+      >
+        <Plus className="w-3.5 h-3.5" />
+        Add Component
+      </Button>
+
+      {picking && (
+        <TypePicker
+          title="Add Component"
+          nameLabel="Component name"
+          action="Add"
+          autoName
+          onCancel={() => setPicking(false)}
+          onSelect={async (name, type) => {
+            setPicking(false);
+            await set({ ...value, [name]: { $type: type } });
+          }}
+        />
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,146 @@
+import { Button } from '#components/ui/button';
+import { Input } from '#components/ui/input';
+import { Textarea } from '#components/ui/textarea';
+import { isRef, resolveExact } from '@treenity/core';
+import { createElement, useState } from 'react';
+import { FieldLabel, RefEditor } from './FieldLabel';
+
+export function renderField(
+  name: string,
+  fieldSchema: {
+    type: string;
+    label: string;
+    placeholder?: string;
+    readOnly?: boolean;
+    enum?: string[];
+    items?: { type?: string; properties?: Record<string, unknown> };
+    refType?: string;
+  },
+  data: Record<string, unknown>,
+  setData: (fn: (prev: Record<string, unknown>) => Record<string, unknown>) => void,
+) {
+  if (!fieldSchema.type) return null;
+
+  const rawValue = data[name];
+  const isRefValue = rawValue && typeof rawValue === 'object' && isRef(rawValue);
+
+  // If value is a $ref/$map, show ref editor instead of the normal field handler
+  if (isRefValue) {
+    const onFieldChange = fieldSchema.readOnly
+      ? undefined
+      : (next: unknown) => setData((prev) => ({ ...prev, [name]: next }));
+    return (
+      <div key={name} className="field">
+        <FieldLabel label={fieldSchema.label} value={rawValue} onChange={onFieldChange} />
+        {onFieldChange && (
+          <RefEditor value={rawValue as { $ref: string; $map?: string }} onChange={onFieldChange} />
+        )}
+      </div>
+    );
+  }
+
+  const ctx = fieldSchema.readOnly ? 'react' : 'react:form';
+  const handler = resolveExact(fieldSchema.type, ctx) ?? resolveExact('string', ctx);
+  if (!handler)
+    return (
+      <div key={name} className="text-destructive text-xs">
+        No form handler: {fieldSchema.type}
+      </div>
+    );
+
+  const fieldData: { $type: string; [k: string]: unknown } = {
+    $type: fieldSchema.type,
+    value: rawValue,
+    label: fieldSchema.label,
+    placeholder: fieldSchema.placeholder,
+  };
+  if (fieldSchema.items) fieldData.items = fieldSchema.items;
+  if (fieldSchema.enum) fieldData.enum = fieldSchema.enum;
+  if (fieldSchema.refType) fieldData.refType = fieldSchema.refType;
+
+  const isComplex = fieldSchema.type === 'object' || fieldSchema.type === 'array';
+  const onFieldChange = fieldSchema.readOnly
+    ? undefined
+    : (next: unknown) => setData((prev) => ({ ...prev, [name]: (next as { value: unknown }).value }));
+
+  return (
+    <div key={name} className={isComplex ? 'field stack' : 'field'}>
+      {fieldSchema.type !== 'boolean' && (
+        <FieldLabel
+          label={fieldSchema.label}
+          value={rawValue}
+          onChange={fieldSchema.readOnly ? undefined : (next: unknown) => setData((prev) => ({ ...prev, [name]: next }))}
+        />
+      )}
+      {createElement(handler as any, {
+        value: fieldData,
+        onChange: onFieldChange,
+      })}
+    </div>
+  );
+}
+
+export function StringArrayField({
+  value,
+  onChange,
+}: {
+  value: unknown[];
+  onChange: (next: unknown[]) => void;
+}) {
+  const [input, setInput] = useState('');
+  const isStrings = value.every((v) => typeof v === 'string');
+
+  if (!isStrings) {
+    return (
+      <Textarea
+        className="min-h-16 text-xs font-mono"
+        value={JSON.stringify(value, null, 2)}
+        onChange={(e) => {
+          try {
+            onChange(JSON.parse(e.target.value));
+          } catch {
+            /* typing */
+          }
+        }}
+      />
+    );
+  }
+
+  const tags = value as string[];
+  return (
+    <div className="flex-1 space-y-1">
+      <div className="flex flex-wrap gap-1">
+        {tags.map((tag, i) => (
+          <span
+            key={i}
+            className="inline-flex items-center gap-0.5 text-[11px] font-mono bg-muted text-foreground/70 px-1.5 py-0.5 rounded"
+          >
+            {tag}
+            <Button
+              variant="ghost"
+              size="icon"
+              type="button"
+              className="h-5 w-5 p-0 ml-0.5 text-muted-foreground/40 hover:text-foreground leading-none"
+              onClick={() => onChange(tags.filter((_, j) => j !== i))}
+            >
+              x
+            </Button>
+          </span>
+        ))}
+      </div>
+      <Input
+        className="h-7 text-xs w-full"
+        placeholder="Add item..."
+        value={input}
+        onChange={(e) => setInput(e.target.value)}
+        onKeyDown={(e) => {
+          if (e.key !== 'Enter') return;
+          e.preventDefault();
+          const t = input.trim();
+          if (t && !tags.includes(t)) onChange([...tags, t]);
+          setInput('');
+        }}
+      />
+    </div>
+  );
+}