@treenity/react 3.0.0 → 3.0.1

package/src/ComponentSection.tsx

@@ -0,0 +1,113 @@
+// ComponentSection — renders one component's edit UI (header + fields + actions)
+// Used by NodeEditor for both the main type section and named component sections.
+
+import { ConfirmPopover } from '#components/ConfirmPopover';
+import { Button } from '#components/ui/button';
+import { NodeProvider, Render, RenderContext } from '#context';
+import type { ComponentData, NodeData } from '@treenity/core';
+import { Trash2 } from 'lucide-react';
+import { ActionCardList } from './ActionCards';
+import { ErrorBoundary } from './ErrorBoundary';
+
+function EditPanel({ node, type, data, onData }: {
+  node: NodeData;
+  type: string;
+  data: Record<string, unknown>;
+  onData: (d: Record<string, unknown>) => void;
+}) {
+  return (
+    <NodeProvider value={node}>
+      <RenderContext name="react:edit">
+        <Render
+          value={{ $type: type, ...data } as ComponentData}
+          onChange={(next: ComponentData) => {
+            const d: Record<string, unknown> = {};
+            for (const [k, v] of Object.entries(next as Record<string, unknown>)) {
+              if (k === '$type' || k === '$path') continue;
+              d[k] = v;
+            }
+            onData(d);
+          }}
+        />
+      </RenderContext>
+    </NodeProvider>
+  );
+}
+
+export type ComponentSectionProps = {
+  node: NodeData;
+  name: string;
+  compType: string;
+  data: Record<string, unknown>;
+  onData: (d: Record<string, unknown>) => void;
+  collapsed?: boolean;
+  onToggle?: () => void;
+  onRemove?: () => void;
+  toast: (msg: string) => void;
+  onActionComplete?: () => void;
+};
+
+export function ComponentSection({
+  node,
+  name,
+  compType,
+  data,
+  onData,
+  collapsed,
+  onToggle,
+  onRemove,
+  toast,
+  onActionComplete,
+}: ComponentSectionProps) {
+  const isMain = !onToggle;
+
+  return (
+    <div className="border-t border-border mt-2 pt-0.5 first:border-t-0 first:mt-0 first:pt-0">
+      <div
+        className="flex items-center justify-between py-2 pb-1.5 text-[11px] font-semibold text-muted-foreground uppercase tracking-wider cursor-pointer select-none"
+        onClick={onToggle}
+      >
+        {isMain ? (
+          <span>{compType}</span>
+        ) : (
+          <span className="font-mono text-[12px]">{name}</span>
+        )}
+        {!isMain && (
+          <span className="flex items-center gap-2">
+            <span className="text-[11px] text-muted-foreground/50 font-mono">{compType}</span>
+            {onRemove && (
+              <ConfirmPopover
+                title={`Remove "${name}"?`}
+                variant="destructive"
+                onConfirm={onRemove}
+              >
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  className="h-6 w-6 text-muted-foreground/40 hover:text-destructive"
+                  onClick={(e) => e.stopPropagation()}
+                >
+                  <Trash2 className="w-3.5 h-3.5" />
+                </Button>
+              </ConfirmPopover>
+            )}
+          </span>
+        )}
+      </div>
+
+      {!collapsed && (
+        <ErrorBoundary>
+          <EditPanel node={node} type={compType} data={data} onData={onData} />
+          <ActionCardList
+            path={node.$path}
+            componentName={name}
+            compType={compType}
+            compData={data}
+            toast={toast}
+            onActionComplete={onActionComplete}
+          />
+        </ErrorBoundary>
+      )}
+    </div>
+  );
+}

package/src/ErrorBoundary.tsx

@@ -0,0 +1,37 @@
+import { Component, type ReactNode } from 'react';
+
+type Props = {
+  fallback?: (error: string, reset: () => void) => ReactNode;
+  children: ReactNode;
+};
+
+type State = { error: string | null };
+
+const defaultFallback = (error: string, reset: () => void) => (
+  <div className="rounded border border-destructive/30 bg-destructive/5 p-2 text-[11px]">
+    <div className="text-destructive font-mono break-all">{error}</div>
+    <button
+      className="mt-1 text-[10px] text-muted-foreground hover:text-foreground underline"
+      onClick={reset}
+    >
+      Retry
+    </button>
+  </div>
+);
+
+export class ErrorBoundary extends Component<Props, State> {
+  state: State = { error: null };
+
+  static getDerivedStateFromError(e: Error) {
+    return { error: e.message };
+  }
+
+  reset = () => this.setState({ error: null });
+
+  render() {
+    if (this.state.error) {
+      return (this.props.fallback ?? defaultFallback)(this.state.error, this.reset);
+    }
+    return this.props.children;
+  }
+}

package/src/Inspector.css

@@ -0,0 +1,54 @@
+/* Editor shell */
+.editor {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  background: var(--bg);
+}
+
+/* Edit panel — slides from right */
+.edit-panel {
+  position: fixed;
+  top: 0;
+  right: 0;
+  height: 100vh;
+  width: 380px;
+  background: var(--surface);
+  border-left: 1px solid var(--border);
+  transform: translateX(100%);
+  transition: transform 0.25s ease;
+  display: flex;
+  flex-direction: column;
+  z-index: 100;
+  box-shadow: -8px 0 24px rgba(0, 0, 0, 0.3);
+}
+.edit-panel.open {
+  transform: translateX(0);
+}
+
+.edit-panel-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 14px 16px;
+  border-bottom: 1px solid var(--border);
+  font-weight: 600;
+  font-size: 14px;
+  flex-shrink: 0;
+}
+.edit-panel-actions {
+  display: flex;
+  gap: 8px;
+  padding: 12px 16px;
+  border-top: 1px solid var(--border);
+  flex-shrink: 0;
+}
+
+/* Node view */
+.node-view {
+  /* max-width: 680px; */
+}
+.node-view:has(> .view-full) {
+  max-width: none;
+}