archrip 0.1.2

package/dist/viewer-template/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "archrip-viewer",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@xyflow/react": "^12.10.0",
+    "nuqs": "^2.8.8",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0"
+  },
+  "devDependencies": {
+    "@tailwindcss/vite": "^4.1.18",
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^5.1.1",
+    "tailwindcss": "^4.1.18",
+    "typescript": "~5.9.3",
+    "vite": "^7.3.1"
+  }
+}

package/dist/viewer-template/src/App.tsx

@@ -0,0 +1,168 @@
+import { useCallback, useEffect, useMemo } from 'react';
+import {
+  ReactFlow,
+  ReactFlowProvider,
+  Background,
+  Controls,
+  MiniMap,
+  useReactFlow,
+} from '@xyflow/react';
+import type { NodeMouseHandler } from '@xyflow/react';
+import { useQueryState, parseAsString } from 'nuqs';
+import '@xyflow/react/dist/style.css';
+
+import type { ArchFlowNode, ArchNodeData } from './types.ts';
+import { getCategoryColors } from './types.ts';
+import { ArchNode } from './components/nodes/ArchNode.tsx';
+import { DetailPanel } from './components/DetailPanel.tsx';
+import { UseCaseFilter } from './components/UseCaseFilter.tsx';
+import { DepthFilter } from './components/DepthFilter.tsx';
+import { Legend } from './components/Legend.tsx';
+import { ThemeToggle } from './components/ThemeToggle.tsx';
+import { useArchitecture } from './hooks/useArchitecture.ts';
+import { useDepthFilter } from './hooks/useDepthFilter.ts';
+import { useUseCaseFilter } from './hooks/useUseCaseFilter.ts';
+import { useTheme } from './hooks/useTheme.ts';
+
+const nodeTypes = { archNode: ArchNode };
+
+function AppInner() {
+  const { nodes, edges, useCases, projectName, loading, error, onNodesChange, onEdgesChange } = useArchitecture();
+  const { depthLevel, setDepthLevel, visibleNodes, visibleEdges } = useDepthFilter(nodes, edges);
+  const { selectedUseCase, setSelectedUseCase, categories, filteredNodes, filteredEdges } = useUseCaseFilter(visibleNodes, visibleEdges, useCases);
+  const [selectedNodeId, setSelectedNodeId] = useQueryState('node', parseAsString.withOptions({ history: 'replace' }));
+  const { theme, toggleTheme } = useTheme();
+  const { fitView } = useReactFlow();
+
+  const selectedNodeData: ArchNodeData | null = useMemo(() => {
+    if (!selectedNodeId) return null;
+    const found = nodes.find((n) => n.id === selectedNodeId);
+    return found?.data ?? null;
+  }, [selectedNodeId, nodes]);
+
+  const onNodeClick: NodeMouseHandler<ArchFlowNode> = useCallback((_event, node) => {
+    void setSelectedNodeId(node.id);
+  }, [setSelectedNodeId]);
+
+  const onPaneClick = useCallback(() => {
+    void setSelectedNodeId(null);
+  }, [setSelectedNodeId]);
+
+  const handleUseCaseSelect = useCallback((ucId: string | null) => {
+    void setSelectedUseCase(ucId);
+  }, [setSelectedUseCase]);
+
+  const handleUseCaseClickFromPanel = useCallback((ucId: string) => {
+    void setSelectedUseCase(ucId);
+    void setSelectedNodeId(null);
+  }, [setSelectedUseCase, setSelectedNodeId]);
+
+  useEffect(() => {
+    const id = requestAnimationFrame(() => {
+      fitView({ padding: 0.15, duration: 300 });
+    });
+    return () => cancelAnimationFrame(id);
+  }, [depthLevel, selectedUseCase, fitView]);
+
+  if (loading) {
+    return (
+      <div className="w-full h-screen flex items-center justify-center" style={{ color: 'var(--color-content-tertiary)', background: 'var(--color-surface-canvas)' }}>
+        Loading architecture data...
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="w-full h-screen flex items-center justify-center" style={{ background: 'var(--color-surface-canvas)' }}>
+        <div className="text-center">
+          <p className="font-semibold mb-2" style={{ color: 'var(--color-interactive-primary)' }}>Failed to load</p>
+          <p className="text-sm" style={{ color: 'var(--color-content-tertiary)' }}>{error}</p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="w-full h-screen relative">
+      <ReactFlow
+        nodes={filteredNodes}
+        edges={filteredEdges}
+        onNodesChange={onNodesChange}
+        onEdgesChange={onEdgesChange}
+        onNodeClick={onNodeClick}
+        onPaneClick={onPaneClick}
+        nodeTypes={nodeTypes}
+        colorMode={theme}
+        fitView
+        fitViewOptions={{ padding: 0.15 }}
+        minZoom={0.05}
+        maxZoom={2}
+        proOptions={{ hideAttribution: true }}
+      >
+        <Background gap={20} size={1} />
+        <Controls showInteractive={false} />
+        <MiniMap
+          nodeColor={(node) => {
+            const data = node.data as ArchNodeData;
+            return getCategoryColors(data.category).border;
+          }}
+          maskColor="rgba(0,0,0,0.08)"
+          style={{ border: '1px solid var(--color-border-primary)' }}
+        />
+      </ReactFlow>
+
+      <div className="absolute top-3 left-3 z-10 flex flex-col gap-2">
+        {useCases.length > 0 && (
+          <UseCaseFilter
+            useCases={useCases}
+            selectedUseCase={selectedUseCase}
+            onSelect={handleUseCaseSelect}
+          />
+        )}
+        <DepthFilter depthLevel={depthLevel} onSelect={setDepthLevel} />
+      </div>
+      <Legend categories={categories} />
+
+      {/* Title + Theme Toggle */}
+      <div className="absolute top-3 right-3 z-10 flex items-center gap-2">
+        <div
+          className="backdrop-blur-sm rounded-lg px-4 py-2 border"
+          style={{
+            background: 'color-mix(in srgb, var(--color-surface-primary) 90%, transparent)',
+            borderColor: 'var(--color-border-primary)',
+            boxShadow: 'var(--shadow-panel)',
+          }}
+        >
+          <h1 className="text-sm font-bold" style={{ color: 'var(--color-content-primary)' }}>
+            {projectName} — Architecture
+          </h1>
+        </div>
+        <ThemeToggle theme={theme} onToggle={toggleTheme} />
+      </div>
+
+      {selectedNodeData && (
+        <>
+          <div
+            className="fixed inset-0 z-40"
+            onClick={() => void setSelectedNodeId(null)}
+          />
+          <DetailPanel
+            data={selectedNodeData}
+            useCases={useCases}
+            onClose={() => void setSelectedNodeId(null)}
+            onUseCaseClick={handleUseCaseClickFromPanel}
+          />
+        </>
+      )}
+    </div>
+  );
+}
+
+export default function App() {
+  return (
+    <ReactFlowProvider>
+      <AppInner />
+    </ReactFlowProvider>
+  );
+}

package/dist/viewer-template/src/components/DepthFilter.tsx

@@ -0,0 +1,43 @@
+import { DEPTH_LEVELS } from '../types.ts';
+import type { DepthLevel } from '../types.ts';
+
+interface DepthFilterProps {
+  depthLevel: DepthLevel;
+  onSelect: (level: DepthLevel) => void;
+}
+
+export function DepthFilter({ depthLevel, onSelect }: DepthFilterProps) {
+  return (
+    <div
+      className="rounded-lg p-3 w-64 border"
+      style={{
+        background: 'var(--color-surface-primary)',
+        borderColor: 'var(--color-border-primary)',
+        boxShadow: 'var(--shadow-panel)',
+      }}
+    >
+      <h3
+        className="text-xs font-semibold uppercase tracking-wider mb-2"
+        style={{ color: 'var(--color-content-tertiary)' }}
+      >
+        Depth
+      </h3>
+      <div className="flex gap-1">
+        {DEPTH_LEVELS.map(({ level, label }) => (
+          <button
+            key={level}
+            onClick={() => onSelect(level)}
+            className="flex-1 text-xs py-1.5 px-2 rounded font-medium transition-colors cursor-pointer"
+            style={
+              depthLevel === level
+                ? { background: 'var(--color-interactive-primary)', color: 'var(--color-content-inverse)' }
+                : { background: 'var(--color-surface-secondary)', color: 'var(--color-content-secondary)' }
+            }
+          >
+            {label}
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+}

package/dist/viewer-template/src/components/DetailPanel.tsx

@@ -0,0 +1,261 @@
+import type { ArchNodeData, UseCase } from '../types.ts';
+import { getCategoryColors, getCategoryLabel } from '../types.ts';
+
+interface DetailPanelProps {
+  data: ArchNodeData;
+  useCases: UseCase[];
+  onClose: () => void;
+  onUseCaseClick: (useCaseId: string) => void;
+}
+
+export function DetailPanel({ data, useCases, onClose, onUseCaseClick }: DetailPanelProps) {
+  const colors = getCategoryColors(data.category);
+
+  return (
+    <div
+      className="fixed top-0 right-0 h-full w-[400px] z-50 overflow-y-auto border-l"
+      style={{
+        background: 'var(--color-surface-primary)',
+        borderColor: 'var(--color-border-primary)',
+        boxShadow: 'var(--shadow-panel)',
+      }}
+    >
+      {/* Header */}
+      <div
+        className="sticky top-0 border-b p-4 flex items-start justify-between"
+        style={{
+          background: 'var(--color-surface-primary)',
+          borderColor: 'var(--color-border-primary)',
+        }}
+      >
+        <div>
+          <span
+            className="inline-block text-xs font-semibold px-2 py-0.5 rounded-full mb-2"
+            style={{ background: colors.bg, color: colors.text, border: `1px solid ${colors.border}` }}
+          >
+            {getCategoryLabel(data.category)}
+          </span>
+          <h2 className="text-lg font-bold" style={{ color: 'var(--color-content-primary)' }}>{data.label}</h2>
+        </div>
+        <button
+          onClick={onClose}
+          className="text-xl leading-none p-1 cursor-pointer transition-colors"
+          style={{ color: 'var(--color-content-tertiary)' }}
+          aria-label="Close"
+        >
+          &times;
+        </button>
+      </div>
+
+      <div className="p-4 space-y-5 text-sm">
+        {/* Description */}
+        {data.description && (
+          <Section title="Description">
+            <p style={{ color: 'var(--color-content-secondary)' }}>{data.description}</p>
+          </Section>
+        )}
+
+        {/* Source Link */}
+        {data.filePath && (
+          <Section title="Source">
+            {data.sourceUrl ? (
+              <a
+                href={data.sourceUrl}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="underline break-all"
+                style={{ color: 'var(--color-interactive-primary)' }}
+              >
+                {data.filePath}
+              </a>
+            ) : (
+              <code
+                className="px-1.5 py-0.5 rounded text-xs break-all"
+                style={{ color: 'var(--color-content-secondary)', background: 'var(--color-surface-secondary)' }}
+              >
+                {data.filePath}
+              </code>
+            )}
+          </Section>
+        )}
+
+        {/* Implements */}
+        {data.implements && (
+          <Section title="Implements">
+            <code
+              className="px-1.5 py-0.5 rounded text-xs"
+              style={{ color: 'var(--cat-port-text)', background: 'var(--cat-port-bg)' }}
+            >
+              {data.implements}
+            </code>
+          </Section>
+        )}
+
+        {/* External Service */}
+        {data.externalService && (
+          <Section title="External Service">
+            <span style={{ color: 'var(--color-content-secondary)' }}>{data.externalService}</span>
+          </Section>
+        )}
+
+        {/* Routes */}
+        {data.routes && data.routes.length > 0 && (
+          <Section title="Routes">
+            <div className="space-y-1">
+              {data.routes.map((route) => {
+                const [method, ...pathParts] = route.split(' ');
+                const path = pathParts.join(' ');
+                return (
+                  <div key={route} className="font-mono text-xs">
+                    <span className={`inline-block w-14 font-bold ${methodColor(method ?? '')}`}>
+                      {method}
+                    </span>
+                    <span style={{ color: 'var(--color-content-secondary)' }}>{path}</span>
+                  </div>
+                );
+              })}
+            </div>
+          </Section>
+        )}
+
+        {/* Methods */}
+        {data.methods && data.methods.length > 0 && (
+          <Section title="Methods">
+            <div className="flex flex-wrap gap-1.5">
+              {data.methods.map((m) => (
+                <code
+                  key={m}
+                  className="px-1.5 py-0.5 rounded text-xs"
+                  style={{ background: 'var(--color-surface-secondary)', color: 'var(--color-content-secondary)' }}
+                >
+                  {m}()
+                </code>
+              ))}
+            </div>
+          </Section>
+        )}
+
+        {/* Schema */}
+        {data.schema && (
+          <Section title={`Table: ${data.schema.tableName}`}>
+            <div className="overflow-x-auto">
+              <table className="w-full text-xs border-collapse">
+                <thead>
+                  <tr style={{ background: 'var(--color-surface-secondary)' }}>
+                    <th className="text-left p-1.5 font-semibold" style={{ borderBottom: '1px solid var(--color-border-primary)' }}>Column</th>
+                    <th className="text-left p-1.5 font-semibold" style={{ borderBottom: '1px solid var(--color-border-primary)' }}>Type</th>
+                    <th className="text-left p-1.5 font-semibold" style={{ borderBottom: '1px solid var(--color-border-primary)' }}>Null</th>
+                    <th className="text-left p-1.5 font-semibold" style={{ borderBottom: '1px solid var(--color-border-primary)' }}>Key</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {data.schema.columns.map((col) => (
+                    <tr key={col.name} style={{ borderBottom: '1px solid var(--color-border-primary)' }}>
+                      <td className="p-1.5 font-mono" style={{ color: 'var(--color-content-primary)' }}>
+                        {col.name}
+                        {col.foreignKey && (
+                          <span className="ml-1" style={{ color: 'var(--color-interactive-primary)' }} title={`FK: ${col.foreignKey.table}.${col.foreignKey.column}${col.foreignKey.onDelete ? ` (${col.foreignKey.onDelete})` : ''}`}>
+                            FK
+                          </span>
+                        )}
+                      </td>
+                      <td className="p-1.5" style={{ color: 'var(--color-content-secondary)' }}>{col.type}</td>
+                      <td className="p-1.5">{col.nullable ? <span className="text-yellow-600 dark:text-yellow-400">YES</span> : '-'}</td>
+                      <td className="p-1.5" style={{ color: 'var(--color-content-tertiary)' }}>{col.index ?? '-'}</td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+
+            {/* Enum Values */}
+            {data.schema.enumValues && Object.entries(data.schema.enumValues).map(([field, values]) => (
+              <div key={field} className="mt-2">
+                <div className="text-xs font-semibold mb-1" style={{ color: 'var(--color-content-secondary)' }}>{field} values:</div>
+                <div className="flex flex-wrap gap-1">
+                  {Object.entries(values).map(([k, v]) => (
+                    <span
+                      key={k}
+                      className="px-1.5 py-0.5 rounded text-xs"
+                      style={{ background: 'var(--cat-controller-bg)', color: 'var(--cat-controller-text)' }}
+                    >
+                      {k}={v}
+                    </span>
+                  ))}
+                </div>
+              </div>
+            ))}
+
+            {/* Indexes */}
+            {data.schema.indexes && data.schema.indexes.length > 0 && (
+              <div className="mt-2">
+                <div className="text-xs font-semibold mb-1" style={{ color: 'var(--color-content-secondary)' }}>Indexes:</div>
+                <ul className="text-xs space-y-0.5" style={{ color: 'var(--color-content-secondary)' }}>
+                  {data.schema.indexes.map((idx) => (
+                    <li key={idx} className="font-mono">{idx}</li>
+                  ))}
+                </ul>
+              </div>
+            )}
+          </Section>
+        )}
+
+        {/* SQL Examples */}
+        {data.sqlExamples && data.sqlExamples.length > 0 && (
+          <Section title="SQL Examples">
+            {data.sqlExamples.map((sql) => (
+              <pre key={sql} className="bg-gray-900 text-green-400 p-2 rounded text-xs overflow-x-auto mb-1.5 whitespace-pre-wrap">
+                {sql}
+              </pre>
+            ))}
+          </Section>
+        )}
+
+        {/* Use Cases */}
+        {data.useCases.length > 0 && (
+          <Section title="Use Cases">
+            <div className="flex flex-wrap gap-1.5">
+              {data.useCases.map((ucId) => {
+                const ucName = useCases.find(uc => uc.id === ucId)?.name ?? ucId;
+                return (
+                  <button
+                    key={ucId}
+                    onClick={() => onUseCaseClick(ucId)}
+                    className="px-2 py-1 rounded text-xs transition-colors cursor-pointer border"
+                    style={{
+                      background: 'var(--color-surface-secondary)',
+                      color: 'var(--color-interactive-primary)',
+                      borderColor: 'var(--color-border-primary)',
+                    }}
+                  >
+                    {ucName}
+                  </button>
+                );
+              })}
+            </div>
+          </Section>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function Section({ title, children }: { title: string; children: React.ReactNode }) {
+  return (
+    <div>
+      <h3 className="text-xs font-semibold uppercase tracking-wider mb-1.5" style={{ color: 'var(--color-content-tertiary)' }}>{title}</h3>
+      {children}
+    </div>
+  );
+}
+
+function methodColor(method: string): string {
+  switch (method) {
+    case 'GET': return 'text-green-600 dark:text-green-400';
+    case 'POST': return 'text-blue-600 dark:text-blue-400';
+    case 'PUT': return 'text-yellow-600 dark:text-yellow-400';
+    case 'PATCH': return 'text-orange-600 dark:text-orange-400';
+    case 'DELETE': return 'text-red-600 dark:text-red-400';
+    default: return '';
+  }
+}

package/dist/viewer-template/src/components/Legend.tsx

@@ -0,0 +1,41 @@
+import { getCategoryColors, getCategoryLabel } from '../types.ts';
+
+interface LegendProps {
+  categories: string[];
+}
+
+export function Legend({ categories }: LegendProps) {
+  return (
+    <div
+      className="absolute bottom-3 right-3 z-10 rounded-lg p-3 border"
+      style={{
+        background: 'var(--color-surface-primary)',
+        borderColor: 'var(--color-border-primary)',
+        boxShadow: 'var(--shadow-panel)',
+      }}
+    >
+      <h3
+        className="text-xs font-semibold uppercase tracking-wider mb-2"
+        style={{ color: 'var(--color-content-tertiary)' }}
+      >
+        Legend
+      </h3>
+      <div className="grid grid-cols-2 gap-x-4 gap-y-1">
+        {categories.map((cat) => {
+          const colors = getCategoryColors(cat);
+          return (
+            <div key={cat} className="flex items-center gap-1.5">
+              <div
+                className="w-3 h-3 rounded-sm border"
+                style={{ background: colors.bg, borderColor: colors.border }}
+              />
+              <span className="text-xs" style={{ color: 'var(--color-content-secondary)' }}>
+                {getCategoryLabel(cat)}
+              </span>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}

package/dist/viewer-template/src/components/ThemeToggle.tsx

@@ -0,0 +1,37 @@
+interface ThemeToggleProps {
+  theme: 'light' | 'dark';
+  onToggle: () => void;
+}
+
+export function ThemeToggle({ theme, onToggle }: ThemeToggleProps) {
+  return (
+    <button
+      onClick={onToggle}
+      className="p-2 rounded-lg border cursor-pointer transition-colors"
+      style={{
+        background: 'var(--color-surface-primary)',
+        borderColor: 'var(--color-border-primary)',
+        color: 'var(--color-content-secondary)',
+      }}
+      aria-label={`Switch to ${theme === 'light' ? 'dark' : 'light'} mode`}
+    >
+      {theme === 'light' ? (
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+          <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
+        </svg>
+      ) : (
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+          <circle cx="12" cy="12" r="5" />
+          <line x1="12" y1="1" x2="12" y2="3" />
+          <line x1="12" y1="21" x2="12" y2="23" />
+          <line x1="4.22" y1="4.22" x2="5.64" y2="5.64" />
+          <line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
+          <line x1="1" y1="12" x2="3" y2="12" />
+          <line x1="21" y1="12" x2="23" y2="12" />
+          <line x1="4.22" y1="19.78" x2="5.64" y2="18.36" />
+          <line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
+        </svg>
+      )}
+    </button>
+  );
+}

package/dist/viewer-template/src/components/UseCaseFilter.tsx

@@ -0,0 +1,59 @@
+import type { UseCase } from '../types.ts';
+
+interface UseCaseFilterProps {
+  useCases: UseCase[];
+  selectedUseCase: string | null;
+  onSelect: (useCaseId: string | null) => void;
+}
+
+export function UseCaseFilter({ useCases, selectedUseCase, onSelect }: UseCaseFilterProps) {
+  return (
+    <div
+      className="rounded-lg p-3 w-64 border"
+      style={{
+        background: 'var(--color-surface-primary)',
+        borderColor: 'var(--color-border-primary)',
+        boxShadow: 'var(--shadow-panel)',
+      }}
+    >
+      <h3
+        className="text-xs font-semibold uppercase tracking-wider mb-2"
+        style={{ color: 'var(--color-content-tertiary)' }}
+      >
+        Use Case Filter
+      </h3>
+      <select
+        value={selectedUseCase ?? ''}
+        onChange={(e) => onSelect(e.target.value || null)}
+        className="w-full text-sm rounded px-2 py-1.5 focus:outline-none focus:ring-2 border"
+        style={{
+          background: 'var(--color-surface-primary)',
+          borderColor: 'var(--color-border-secondary)',
+          color: 'var(--color-content-primary)',
+          '--tw-ring-color': 'var(--color-border-focus)',
+        } as React.CSSProperties}
+      >
+        <option value="">Show All</option>
+        {useCases.map((uc) => (
+          <option key={uc.id} value={uc.id}>
+            {uc.name}
+          </option>
+        ))}
+      </select>
+      {selectedUseCase && (
+        <div className="mt-2">
+          <p className="text-xs" style={{ color: 'var(--color-content-secondary)' }}>
+            {useCases.find((uc) => uc.id === selectedUseCase)?.description}
+          </p>
+          <button
+            onClick={() => onSelect(null)}
+            className="mt-1.5 text-xs cursor-pointer hover:underline"
+            style={{ color: 'var(--color-interactive-primary)' }}
+          >
+            Clear filter
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}

package/dist/viewer-template/src/components/nodes/ArchNode.tsx

@@ -0,0 +1,37 @@
+import { Handle, Position } from '@xyflow/react';
+import type { NodeProps } from '@xyflow/react';
+import type { ArchFlowNode } from '../../types.ts';
+import { getCategoryColors, getCategoryIcon } from '../../types.ts';
+
+export function ArchNode({ data, selected }: NodeProps<ArchFlowNode>) {
+  const d = data;
+  const colors = getCategoryColors(d.category);
+  const icon = getCategoryIcon(d.category);
+
+  return (
+    <>
+      <Handle type="target" position={Position.Top} style={{ background: colors.border }} />
+      <div
+        style={{
+          background: colors.bg,
+          border: `2px solid ${selected ? 'var(--color-border-focus)' : colors.border}`,
+          borderRadius: 8,
+          padding: '8px 12px',
+          minWidth: 140,
+          maxWidth: 200,
+          cursor: 'pointer',
+          boxShadow: selected ? 'var(--shadow-node-selected)' : 'var(--shadow-node)',
+          transition: 'box-shadow 0.15s, border-color 0.15s',
+        }}
+      >
+        <div style={{ fontSize: 11, color: colors.text, opacity: 0.7, marginBottom: 2 }}>
+          {icon} {d.category.toUpperCase()}
+        </div>
+        <div style={{ fontSize: 13, fontWeight: 600, color: colors.text, lineHeight: 1.3, wordBreak: 'break-word' }}>
+          {d.label}
+        </div>
+      </div>
+      <Handle type="source" position={Position.Bottom} style={{ background: colors.border }} />
+    </>
+  );
+}