@solidxai/core-ui 0.1.13-beta.1 → 0.1.13-beta.2

package/dist/components/workflow/WorkflowNodeSchemaEditor.tsx

@@ -0,0 +1,808 @@
+import React from "react";
+import YAML from "yaml";
+import { getExtensionComponent } from "../../helpers/registry";
+import type {
+  WorkflowNodeChildSlotDefinition,
+  WorkflowNodeConfigurationFieldDefinition,
+  WorkflowNodeMetadataResponse,
+} from "../../types/workflow-node";
+import {
+  SolidButton,
+  SolidCodeEditor,
+  SolidDialog,
+  SolidDialogBody,
+  SolidDialogFooter,
+  SolidInput,
+  SolidNumberInput,
+  SolidPanel,
+  SolidSelect,
+  SolidSwitch,
+  SolidTag,
+  SolidTextarea,
+} from "../shad-cn-ui";
+
+type WorkflowNodeSchemaEditorProps = {
+  nodeType: WorkflowNodeMetadataResponse;
+  value?: Record<string, any>;
+  onChange?: (value: Record<string, any>) => void;
+  onSubmit?: (value: Record<string, any>) => void;
+  readOnly?: boolean;
+  className?: string;
+};
+
+type WorkflowNodeEditorValue = {
+  [key: string]: any;
+  id: string;
+  name?: string;
+  description?: string;
+  kind: string;
+  type: string;
+  disabled?: boolean;
+  timeoutMs?: number;
+  retryPolicy?: Record<string, any>;
+  onError?: "fail" | "continue";
+  configuration?: Record<string, any>;
+  children?: WorkflowNodeEditorValue[];
+  nodes?: WorkflowNodeEditorValue[];
+  then?: WorkflowNodeEditorValue[];
+  else?: WorkflowNodeEditorValue[];
+  branches?: Array<{
+    id: string;
+    name?: string;
+    nodes: WorkflowNodeEditorValue[];
+  }>;
+};
+
+type WorkflowNodeEditorDialogProps = WorkflowNodeSchemaEditorProps & {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  title?: string;
+  nodeValue?: WorkflowNodeEditorValue;
+  onNodeChange?: (value: WorkflowNodeEditorValue) => void;
+  onNodeSubmit?: (value: WorkflowNodeEditorValue) => void;
+};
+
+type WorkflowNodePaletteProps = {
+  nodeTypes: WorkflowNodeMetadataResponse[];
+  value?: string;
+  onSelect?: (nodeType: WorkflowNodeMetadataResponse) => void;
+  className?: string;
+};
+
+type FieldEditorProps = {
+  nodeType: WorkflowNodeMetadataResponse;
+  field: WorkflowNodeConfigurationFieldDefinition;
+  value: any;
+  readOnly?: boolean;
+  onChange: (value: any) => void;
+};
+
+function normalizeFieldValue(
+  field: WorkflowNodeConfigurationFieldDefinition,
+  currentValue: any,
+) {
+  if (currentValue !== undefined) {
+    return currentValue;
+  }
+
+  return field.defaultValue;
+}
+
+function parseYamlValue(input: string, fallback: any) {
+  if (!input.trim()) {
+    return {};
+  }
+
+  try {
+    return YAML.parse(input);
+  } catch {
+    return fallback;
+  }
+}
+
+function getPathValue(value: Record<string, any>, pathOrKey: string) {
+  return pathOrKey
+    .split(".")
+    .reduce<any>((current, part) => current?.[part], value);
+}
+
+function setPathValue(value: Record<string, any>, pathOrKey: string, nextValue: any) {
+  const parts = pathOrKey.split(".");
+  if (parts.length === 1) {
+    return {
+      ...value,
+      [pathOrKey]: nextValue,
+    };
+  }
+
+  const nextRoot = { ...value };
+  let cursor: Record<string, any> = nextRoot;
+  parts.forEach((part, index) => {
+    if (index === parts.length - 1) {
+      cursor[part] = nextValue;
+      return;
+    }
+
+    const existing = cursor[part];
+    cursor[part] =
+      existing && typeof existing === "object" && !Array.isArray(existing)
+        ? { ...existing }
+        : {};
+    cursor = cursor[part];
+  });
+
+  return nextRoot;
+}
+
+function getSlotCount(node: WorkflowNodeEditorValue, slot: WorkflowNodeChildSlotDefinition) {
+  if (slot.kind === "branch-collection") {
+    return Array.isArray(node.branches) ? node.branches.length : 0;
+  }
+
+  const value = node[slot.key];
+  return Array.isArray(value) ? value.length : 0;
+}
+
+function renderFieldHint(field: WorkflowNodeConfigurationFieldDefinition) {
+  return (
+    <div style={{ display: "flex", gap: "0.5rem", flexWrap: "wrap" }}>
+      {field.valueType ? <SolidTag>{field.valueType}</SolidTag> : null}
+      {field.required ? <SolidTag tone="warn">required</SolidTag> : null}
+      {field.expressionAllowed ? <SolidTag>expressions</SolidTag> : null}
+      {field.secretAllowed ? <SolidTag tone="success">secret</SolidTag> : null}
+    </div>
+  );
+}
+
+function WorkflowNodeFieldEditor({
+  nodeType,
+  field,
+  value,
+  readOnly,
+  onChange,
+}: FieldEditorProps) {
+  const extensionKey =
+    field.extensionComponentKey ?? nodeType.ui?.fieldComponentKeys?.[field.key];
+  const ExtensionComponent = extensionKey ? getExtensionComponent(extensionKey) : null;
+
+  const normalizedValue = normalizeFieldValue(field, value);
+
+  if (ExtensionComponent) {
+    return (
+      <ExtensionComponent
+        nodeType={nodeType}
+        field={field}
+        value={normalizedValue}
+        onChange={onChange}
+        readOnly={readOnly}
+      />
+    );
+  }
+
+  if (field.enumValues?.length) {
+    return (
+      <SolidSelect
+        value={normalizedValue}
+        disabled={readOnly}
+        options={field.enumValues.map((item) => ({
+          label: String(item),
+          value: item,
+        }))}
+        onChange={(event) => onChange(event.value)}
+      />
+    );
+  }
+
+  if (field.valueType === "boolean") {
+    return (
+      <SolidSwitch
+        checked={!!normalizedValue}
+        disabled={readOnly}
+        onChange={(checked) => onChange(checked)}
+      />
+    );
+  }
+
+  if (field.valueType === "number" || field.valueType === "integer") {
+    return (
+      <SolidNumberInput
+        value={normalizedValue}
+        disabled={readOnly}
+        onChange={(event) => onChange(event.value)}
+      />
+    );
+  }
+
+  if (
+    field.valueType === "object" ||
+    field.valueType === "array" ||
+    field.valueType === "json" ||
+    field.widgetHint === "json-editor" ||
+    field.widgetHint === "yaml-editor"
+  ) {
+    const stringValue =
+      typeof normalizedValue === "string"
+        ? normalizedValue
+        : YAML.stringify(normalizedValue ?? {});
+
+    return (
+      <SolidCodeEditor
+        language="yaml"
+        height="220px"
+        readOnly={readOnly}
+        value={stringValue}
+        onChange={(next) => onChange(parseYamlValue(next ?? "", normalizedValue))}
+      />
+    );
+  }
+
+  if (field.valueType === "any") {
+    return (
+      <SolidCodeEditor
+        language="yaml"
+        height="220px"
+        readOnly={readOnly}
+        value={
+          typeof normalizedValue === "string"
+            ? normalizedValue
+            : YAML.stringify(normalizedValue ?? null)
+        }
+        onChange={(next) => onChange(parseYamlValue(next ?? "", normalizedValue))}
+      />
+    );
+  }
+
+  if (field.widgetHint === "textarea") {
+    return (
+      <SolidTextarea
+        value={normalizedValue ?? ""}
+        disabled={readOnly}
+        onChange={(event) => onChange(event.target.value)}
+      />
+    );
+  }
+
+  return (
+    <SolidInput
+      value={normalizedValue ?? ""}
+      disabled={readOnly}
+      onChange={(event) => onChange(event.target.value)}
+    />
+  );
+}
+
+export function WorkflowNodeSchemaEditor({
+  nodeType,
+  value,
+  onChange,
+  onSubmit,
+  readOnly,
+  className,
+}: WorkflowNodeSchemaEditorProps) {
+  const [draft, setDraft] = React.useState<Record<string, any>>(
+    value ?? nodeType.authoring?.defaultConfiguration ?? {},
+  );
+
+  React.useEffect(() => {
+    setDraft(value ?? nodeType.authoring?.defaultConfiguration ?? {});
+  }, [nodeType, value]);
+
+  const fields = nodeType.authoring?.configurationFields ?? [];
+  const groupOrder = nodeType.ui?.layoutHints?.groupOrder ?? [];
+  const groupedFields = fields.reduce<Record<string, WorkflowNodeConfigurationFieldDefinition[]>>(
+    (acc, field) => {
+      const group = field.group ?? "General";
+      acc[group] = acc[group] ?? [];
+      acc[group].push(field);
+      return acc;
+    },
+    {},
+  );
+
+  const orderedGroups = Object.keys(groupedFields).sort((left, right) => {
+    const leftIndex = groupOrder.indexOf(left);
+    const rightIndex = groupOrder.indexOf(right);
+    if (leftIndex >= 0 && rightIndex >= 0) {
+      return leftIndex - rightIndex;
+    }
+    if (leftIndex >= 0) {
+      return -1;
+    }
+    if (rightIndex >= 0) {
+      return 1;
+    }
+    return left.localeCompare(right);
+  });
+
+  const updateField = (field: WorkflowNodeConfigurationFieldDefinition, nextValue: any) => {
+    const nextDraft = setPathValue(draft, field.path ?? field.key, nextValue);
+    setDraft(nextDraft);
+    onChange?.(nextDraft);
+  };
+
+  return (
+    <div className={className} style={{ display: "grid", gap: "1rem" }}>
+      {orderedGroups.map((group) => (
+        <SolidPanel key={group} header={group}>
+          <div style={{ display: "grid", gap: "1rem" }}>
+            {groupedFields[group].map((field) => (
+              <div key={field.key} style={{ display: "grid", gap: "0.5rem" }}>
+                <div style={{ display: "grid", gap: "0.35rem" }}>
+                  <div style={{ display: "flex", gap: "0.5rem", alignItems: "center", flexWrap: "wrap" }}>
+                    <strong>{field.label ?? field.key}</strong>
+                    {renderFieldHint(field)}
+                  </div>
+                  {field.description ? (
+                    <div style={{ opacity: 0.8 }}>{field.description}</div>
+                  ) : null}
+                </div>
+                <WorkflowNodeFieldEditor
+                  nodeType={nodeType}
+                  field={field}
+                  value={getPathValue(draft, field.path ?? field.key)}
+                  readOnly={readOnly}
+                  onChange={(nextValue) => updateField(field, nextValue)}
+                />
+              </div>
+            ))}
+          </div>
+        </SolidPanel>
+      ))}
+
+      {!readOnly && onSubmit ? (
+        <div style={{ display: "flex", justifyContent: "flex-end" }}>
+          <SolidButton onClick={() => onSubmit(draft)}>Save</SolidButton>
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
+function WorkflowNodeCommonFields({
+  nodeType,
+  draft,
+  readOnly,
+  onChange,
+}: {
+  nodeType: WorkflowNodeMetadataResponse;
+  draft: WorkflowNodeEditorValue;
+  readOnly?: boolean;
+  onChange: (value: WorkflowNodeEditorValue) => void;
+}) {
+  const authoring = nodeType.authoring;
+  const update = (patch: Partial<WorkflowNodeEditorValue>) => {
+    onChange({ ...draft, ...patch });
+  };
+
+  return (
+    <SolidPanel header="Node">
+      <div style={{ display: "grid", gap: "1rem" }}>
+        <div style={{ display: "grid", gap: "1rem", gridTemplateColumns: "repeat(2, minmax(0, 1fr))" }}>
+          <div style={{ display: "grid", gap: "0.45rem" }}>
+            <strong>Id</strong>
+            <SolidInput
+              value={draft.id ?? ""}
+              disabled={readOnly}
+              onChange={(event) => update({ id: event.target.value })}
+            />
+          </div>
+          <div style={{ display: "grid", gap: "0.45rem" }}>
+            <strong>Type</strong>
+            <SolidInput value={draft.type ?? nodeType.type} disabled />
+          </div>
+        </div>
+
+        {authoring?.supportsName !== false ? (
+          <div style={{ display: "grid", gap: "0.45rem" }}>
+            <strong>Name</strong>
+            <SolidInput
+              value={draft.name ?? ""}
+              disabled={readOnly}
+              onChange={(event) => update({ name: event.target.value })}
+            />
+          </div>
+        ) : null}
+
+        {authoring?.supportsDescription ? (
+          <div style={{ display: "grid", gap: "0.45rem" }}>
+            <strong>Description</strong>
+            <SolidTextarea
+              value={draft.description ?? ""}
+              disabled={readOnly}
+              onChange={(event) => update({ description: event.target.value })}
+            />
+          </div>
+        ) : null}
+
+        <div style={{ display: "flex", gap: "0.6rem", flexWrap: "wrap" }}>
+          <SolidTag>{nodeType.kind}</SolidTag>
+          {nodeType.category ? <SolidTag>{nodeType.category}</SolidTag> : null}
+          {nodeType.ui?.defaultEditorMode ? (
+            <SolidTag>{nodeType.ui.defaultEditorMode}</SolidTag>
+          ) : null}
+        </div>
+      </div>
+    </SolidPanel>
+  );
+}
+
+function WorkflowNodeRuntimeFields({
+  nodeType,
+  draft,
+  readOnly,
+  onChange,
+}: {
+  nodeType: WorkflowNodeMetadataResponse;
+  draft: WorkflowNodeEditorValue;
+  readOnly?: boolean;
+  onChange: (value: WorkflowNodeEditorValue) => void;
+}) {
+  const authoring = nodeType.authoring;
+  const hasRuntimeFields =
+    authoring?.supportsDisableToggle ||
+    authoring?.supportsTimeoutMs ||
+    authoring?.supportsOnError ||
+    authoring?.supportsRetryPolicy;
+
+  if (!hasRuntimeFields) {
+    return null;
+  }
+
+  const update = (patch: Partial<WorkflowNodeEditorValue>) => {
+    onChange({ ...draft, ...patch });
+  };
+
+  return (
+    <SolidPanel header="Runtime">
+      <div style={{ display: "grid", gap: "1rem" }}>
+        {authoring?.supportsDisableToggle ? (
+          <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: "1rem" }}>
+            <div>
+              <strong>Disabled</strong>
+              <div style={{ opacity: 0.75 }}>Skip this node during execution.</div>
+            </div>
+            <SolidSwitch
+              checked={!!draft.disabled}
+              disabled={readOnly}
+              onChange={(checked) => update({ disabled: checked || undefined })}
+            />
+          </div>
+        ) : null}
+
+        <div style={{ display: "grid", gap: "1rem", gridTemplateColumns: "repeat(2, minmax(0, 1fr))" }}>
+          {authoring?.supportsTimeoutMs ? (
+            <div style={{ display: "grid", gap: "0.45rem" }}>
+              <strong>Timeout (ms)</strong>
+              <SolidNumberInput
+                value={draft.timeoutMs}
+                disabled={readOnly}
+                onChange={(event) => update({ timeoutMs: event.value ?? undefined })}
+              />
+            </div>
+          ) : null}
+
+          {authoring?.supportsOnError ? (
+            <div style={{ display: "grid", gap: "0.45rem" }}>
+              <strong>On error</strong>
+              <SolidSelect
+                value={draft.onError ?? "fail"}
+                disabled={readOnly}
+                options={[
+                  { label: "Fail workflow", value: "fail" },
+                  { label: "Continue", value: "continue" },
+                ]}
+                onChange={(event) => update({ onError: event.value })}
+              />
+            </div>
+          ) : null}
+        </div>
+
+        {authoring?.supportsRetryPolicy ? (
+          <div style={{ display: "grid", gap: "1rem", gridTemplateColumns: "repeat(2, minmax(0, 1fr))" }}>
+            <div style={{ display: "grid", gap: "0.45rem" }}>
+              <strong>Max retries</strong>
+              <SolidNumberInput
+                value={draft.retryPolicy?.maxRetries}
+                disabled={readOnly}
+                onChange={(event) =>
+                  update({
+                    retryPolicy: {
+                      ...(draft.retryPolicy ?? {}),
+                      maxRetries: event.value ?? undefined,
+                    },
+                  })
+                }
+              />
+            </div>
+            <div style={{ display: "grid", gap: "0.45rem" }}>
+              <strong>Retry delay (ms)</strong>
+              <SolidNumberInput
+                value={draft.retryPolicy?.delayMs}
+                disabled={readOnly}
+                onChange={(event) =>
+                  update({
+                    retryPolicy: {
+                      ...(draft.retryPolicy ?? {}),
+                      delayMs: event.value ?? undefined,
+                    },
+                  })
+                }
+              />
+            </div>
+          </div>
+        ) : null}
+      </div>
+    </SolidPanel>
+  );
+}
+
+function WorkflowNodeChildSlotsSummary({
+  nodeType,
+  draft,
+}: {
+  nodeType: WorkflowNodeMetadataResponse;
+  draft: WorkflowNodeEditorValue;
+}) {
+  const childSlots = nodeType.authoring?.childSlots ?? [];
+  if (!childSlots.length) {
+    return null;
+  }
+
+  return (
+    <SolidPanel header="Topology Slots">
+      <div style={{ display: "grid", gap: "0.65rem" }}>
+        {childSlots.map((slot) => (
+          <div
+            key={slot.key}
+            style={{
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "space-between",
+              gap: "1rem",
+              padding: "0.65rem 0.75rem",
+              border: "1px solid var(--surface-border, #dbe3f0)",
+              borderRadius: "0.5rem",
+              background: "rgba(248, 250, 252, 0.68)",
+            }}
+          >
+            <div style={{ display: "grid", gap: "0.2rem" }}>
+              <strong>{slot.label ?? slot.key}</strong>
+              <span style={{ opacity: 0.76 }}>
+                {slot.description ??
+                  "Use the topology canvas to add, reorder, or remove child nodes."}
+              </span>
+            </div>
+            <SolidTag>{getSlotCount(draft, slot)}</SolidTag>
+          </div>
+        ))}
+        <div style={{ opacity: 0.75 }}>
+          Child node membership is edited from the topology canvas. This dialog edits the
+          control node itself.
+        </div>
+      </div>
+    </SolidPanel>
+  );
+}
+
+function WorkflowNodeFullEditor({
+  nodeType,
+  value,
+  onChange,
+  readOnly,
+}: {
+  nodeType: WorkflowNodeMetadataResponse;
+  value: WorkflowNodeEditorValue;
+  onChange: (value: WorkflowNodeEditorValue) => void;
+  readOnly?: boolean;
+}) {
+  const configuration = value.configuration ?? {};
+
+  return (
+    <div style={{ display: "grid", gap: "1rem" }}>
+      <WorkflowNodeCommonFields
+        nodeType={nodeType}
+        draft={value}
+        readOnly={readOnly}
+        onChange={onChange}
+      />
+      <WorkflowNodeSchemaEditor
+        nodeType={nodeType}
+        value={configuration}
+        readOnly={readOnly}
+        onChange={(nextConfiguration) =>
+          onChange({
+            ...value,
+            configuration: nextConfiguration,
+          })
+        }
+      />
+      <WorkflowNodeRuntimeFields
+        nodeType={nodeType}
+        draft={value}
+        readOnly={readOnly}
+        onChange={onChange}
+      />
+      <WorkflowNodeChildSlotsSummary nodeType={nodeType} draft={value} />
+    </div>
+  );
+}
+
+export function WorkflowNodeEditorDialog({
+  open,
+  onOpenChange,
+  title,
+  nodeType,
+  value,
+  onChange,
+  onSubmit,
+  readOnly,
+  nodeValue,
+  onNodeChange,
+  onNodeSubmit,
+}: WorkflowNodeEditorDialogProps) {
+  const [draft, setDraft] = React.useState<Record<string, any>>(
+    value ?? nodeValue?.configuration ?? nodeType.authoring?.defaultConfiguration ?? {},
+  );
+  const [nodeDraft, setNodeDraft] = React.useState<WorkflowNodeEditorValue>(
+    nodeValue ?? {
+      id: "",
+      type: nodeType.type,
+      kind: nodeType.kind,
+      configuration: value ?? nodeType.authoring?.defaultConfiguration ?? {},
+    },
+  );
+
+  React.useEffect(() => {
+    setDraft(value ?? nodeValue?.configuration ?? nodeType.authoring?.defaultConfiguration ?? {});
+    setNodeDraft(
+      nodeValue ?? {
+        id: "",
+        type: nodeType.type,
+        kind: nodeType.kind,
+        configuration: value ?? nodeType.authoring?.defaultConfiguration ?? {},
+      },
+    );
+  }, [nodeType, nodeValue, value, open]);
+
+  const editorComponentKey = nodeType.ui?.editorComponentKey;
+  const CustomEditor = editorComponentKey ? getExtensionComponent(editorComponentKey) : null;
+  const useCustomEditor = !!CustomEditor && nodeType.ui?.defaultEditorMode === "custom";
+  const isFullNodeMode = !!nodeValue || !!onNodeSubmit || !!onNodeChange;
+
+  const handleNodeChange = (nextValue: WorkflowNodeEditorValue) => {
+    setNodeDraft(nextValue);
+    setDraft(nextValue.configuration ?? {});
+    onNodeChange?.(nextValue);
+  };
+
+  return (
+    <SolidDialog
+      open={open}
+      onOpenChange={onOpenChange}
+      header={title ?? nodeType.label ?? nodeType.type}
+      className={`solid-workflow-node-editor-dialog solid-workflow-node-editor-dialog--${nodeType.ui?.modalSize ?? "lg"}`}
+      style={{
+        width: nodeType.ui?.modalSize === "full" ? "96vw" : "min(1100px, 92vw)",
+        maxWidth: "96vw",
+      }}
+    >
+      <SolidDialogBody>
+        {useCustomEditor ? (
+          <CustomEditor
+            nodeType={nodeType}
+            value={isFullNodeMode ? nodeDraft : draft}
+            nodeValue={nodeDraft}
+            configuration={draft}
+            onChange={isFullNodeMode ? handleNodeChange : setDraft}
+            readOnly={readOnly}
+          />
+        ) : isFullNodeMode ? (
+          <WorkflowNodeFullEditor
+            nodeType={nodeType}
+            value={nodeDraft}
+            onChange={handleNodeChange}
+            readOnly={readOnly}
+          />
+        ) : (
+          <WorkflowNodeSchemaEditor
+            nodeType={nodeType}
+            value={draft}
+            onChange={(nextValue) => {
+              setDraft(nextValue);
+              onChange?.(nextValue);
+            }}
+            onSubmit={(nextValue) => {
+              setDraft(nextValue);
+              onSubmit?.(nextValue);
+            }}
+            readOnly={readOnly}
+          />
+        )}
+      </SolidDialogBody>
+      {!readOnly && (onSubmit || onNodeSubmit) ? (
+        <SolidDialogFooter>
+          <SolidButton variant="secondary" onClick={() => onOpenChange(false)}>
+            Cancel
+          </SolidButton>
+          <SolidButton
+            onClick={() => {
+              if (isFullNodeMode) {
+                onNodeSubmit?.(nodeDraft);
+              } else {
+                onSubmit?.(draft);
+              }
+            }}
+          >
+            Save
+          </SolidButton>
+        </SolidDialogFooter>
+      ) : null}
+    </SolidDialog>
+  );
+}
+
+export function WorkflowNodePalette({
+  nodeTypes,
+  value,
+  onSelect,
+  className,
+}: WorkflowNodePaletteProps) {
+  const [query, setQuery] = React.useState("");
+
+  const filteredNodeTypes = nodeTypes.filter((nodeType) => {
+    const haystack = [
+      nodeType.type,
+      nodeType.label,
+      nodeType.description,
+      nodeType.category,
+      nodeType.subcategory,
+      ...(nodeType.tags ?? []),
+      ...(nodeType.authoring?.searchableText ?? []),
+    ]
+      .filter(Boolean)
+      .join(" ")
+      .toLowerCase();
+
+    return haystack.includes(query.trim().toLowerCase());
+  });
+
+  return (
+    <div className={className} style={{ display: "grid", gap: "1rem" }}>
+      <SolidInput
+        value={query}
+        onChange={(event) => setQuery(event.target.value)}
+        placeholder="Search node types"
+      />
+      <div style={{ display: "grid", gap: "0.75rem" }}>
+        {filteredNodeTypes.map((nodeType) => (
+          <button
+            key={nodeType.type}
+            type="button"
+            onClick={() => onSelect?.(nodeType)}
+            style={{
+              textAlign: "left",
+              border: value === nodeType.type
+                ? "1px solid var(--primary-color, #2563eb)"
+                : "1px solid var(--surface-border, #e5e7eb)",
+              borderRadius: "0.75rem",
+              padding: "0.9rem 1rem",
+              background: "var(--surface-card, #fff)",
+              display: "grid",
+              gap: "0.5rem",
+              cursor: "pointer",
+            }}
+          >
+            <div style={{ display: "flex", gap: "0.5rem", alignItems: "center", flexWrap: "wrap" }}>
+              <strong>{nodeType.label ?? nodeType.type}</strong>
+              {nodeType.category ? <SolidTag>{nodeType.category}</SolidTag> : null}
+              <SolidTag>{nodeType.kind}</SolidTag>
+            </div>
+            {nodeType.description ? (
+              <div style={{ opacity: 0.8 }}>{nodeType.description}</div>
+            ) : null}
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+}