@exellix/diagrams-toolkit 0.2.0

package/src/ResourceDataTable.jsx

@@ -0,0 +1,180 @@
+import React, { useMemo, useState } from 'react';
+import { Search, ChevronDown, ChevronUp, MoreHorizontal } from 'lucide-react';
+
+/**
+ * @typedef {{
+ *   key: string,
+ *   label: string,
+ *   sortable?: boolean,
+ *   render?: (row: Record<string, unknown>) => React.ReactNode,
+ *   className?: string,
+ * }} DataColumn
+ *
+ * @typedef {{
+ *   id: string,
+ *   label: string,
+ *   options: Array<{ value: string, label: string }>,
+ * }} DataFilter
+ */
+
+/**
+ * @param {{
+ *   columns: DataColumn[],
+ *   rows: Array<Record<string, unknown>>,
+ *   searchPlaceholder?: string,
+ *   searchKeys?: string[],
+ *   filters?: DataFilter[],
+ *   filterValues?: Record<string, string>,
+ *   onFilterChange?: (key: string, value: string) => void,
+ *   sortKey?: string,
+ *   sortDir?: 'asc' | 'desc',
+ *   onSort?: (key: string) => void,
+ *   rowActions?: (row: Record<string, unknown>) => React.ReactNode,
+ *   onRowClick?: (row: Record<string, unknown>) => void,
+ *   emptyMessage?: string,
+ *   toolbar?: React.ReactNode,
+ *   className?: string,
+ * }} props
+ */
+export function ResourceDataTable({
+  columns,
+  rows,
+  searchPlaceholder = 'Search…',
+  searchKeys = [],
+  filters = [],
+  filterValues = {},
+  onFilterChange,
+  sortKey,
+  sortDir = 'desc',
+  onSort,
+  rowActions,
+  onRowClick,
+  emptyMessage = 'No items found.',
+  toolbar,
+  className = '',
+}) {
+  const [search, setSearch] = useState('');
+
+  const filtered = useMemo(() => {
+    let list = [...rows];
+    const q = search.trim().toLowerCase();
+    if (q) {
+      list = list.filter((row) => {
+        const keys = searchKeys.length ? searchKeys : columns.map((c) => c.key);
+        return keys.some((k) => String(row[k] ?? '').toLowerCase().includes(q));
+      });
+    }
+    for (const f of filters) {
+      const val = filterValues[f.id];
+      if (val && val !== 'all') {
+        list = list.filter((row) => String(row[f.id] ?? '') === val);
+      }
+    }
+    if (sortKey && onSort) {
+      list.sort((a, b) => {
+        const av = a[sortKey];
+        const bv = b[sortKey];
+        const cmp =
+          typeof av === 'number' && typeof bv === 'number'
+            ? av - bv
+            : String(av ?? '').localeCompare(String(bv ?? ''));
+        return sortDir === 'asc' ? cmp : -cmp;
+      });
+    }
+    return list;
+  }, [rows, search, searchKeys, columns, filters, filterValues, sortKey, sortDir, onSort]);
+
+  return (
+    <div className={`flex flex-col min-h-0 ${className}`}>
+      <div className="flex flex-wrap items-center gap-3 px-4 py-3 bg-white border-b border-slate-200 shrink-0">
+        <div className="relative flex-1 min-w-[12rem] max-w-md">
+          <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
+          <input
+            type="search"
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+            placeholder={searchPlaceholder}
+            className="w-full pl-9 pr-3 py-2 text-sm border border-slate-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500/30"
+          />
+        </div>
+        {filters.map((f) => (
+          <select
+            key={f.id}
+            value={filterValues[f.id] ?? 'all'}
+            onChange={(e) => onFilterChange?.(f.id, e.target.value)}
+            className="text-sm border border-slate-200 rounded-lg px-3 py-2 bg-white"
+          >
+            <option value="all">All {f.label}</option>
+            {f.options.map((o) => (
+              <option key={o.value} value={o.value}>
+                {o.label}
+              </option>
+            ))}
+          </select>
+        ))}
+        {toolbar}
+      </div>
+      <div className="flex-1 min-h-0 overflow-auto">
+        <table className="w-full text-sm text-left">
+          <thead className="sticky top-0 bg-slate-50 border-b border-slate-200 text-xs uppercase text-slate-500">
+            <tr>
+              {columns.map((col) => (
+                <th key={col.key} className={`px-4 py-3 font-semibold ${col.className ?? ''}`}>
+                  {col.sortable && onSort ? (
+                    <button
+                      type="button"
+                      onClick={() => onSort(col.key)}
+                      className="inline-flex items-center gap-1 hover:text-slate-800"
+                    >
+                      {col.label}
+                      {sortKey === col.key ? (
+                        sortDir === 'asc' ? (
+                          <ChevronUp size={14} />
+                        ) : (
+                          <ChevronDown size={14} />
+                        )
+                      ) : null}
+                    </button>
+                  ) : (
+                    col.label
+                  )}
+                </th>
+              ))}
+              {rowActions ? <th className="px-4 py-3 w-12" /> : null}
+            </tr>
+          </thead>
+          <tbody className="divide-y divide-slate-100 bg-white">
+            {filtered.length === 0 ? (
+              <tr>
+                <td colSpan={columns.length + (rowActions ? 1 : 0)} className="px-4 py-12 text-center text-slate-500">
+                  {emptyMessage}
+                </td>
+              </tr>
+            ) : (
+              filtered.map((row) => (
+                <tr
+                  key={String(row.id ?? row.graphId ?? row.itemId)}
+                  className={`hover:bg-slate-50 ${onRowClick ? 'cursor-pointer' : ''}`}
+                  onClick={() => onRowClick?.(row)}
+                >
+                  {columns.map((col) => (
+                    <td key={col.key} className={`px-4 py-3 ${col.className ?? ''}`}>
+                      {col.render ? col.render(row) : String(row[col.key] ?? '—')}
+                    </td>
+                  ))}
+                  {rowActions ? (
+                    <td className="px-4 py-3" onClick={(e) => e.stopPropagation()}>
+                      {rowActions(row)}
+                    </td>
+                  ) : null}
+                </tr>
+              ))
+            )}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}
+
+export { MoreHorizontal };

package/src/StatusBadge.jsx

@@ -0,0 +1,41 @@
+import React from 'react';
+
+/** @type {Record<string, { className: string, label?: string }>} */
+export const DEFAULT_STATUS_PALETTE = {
+  draft: { className: 'bg-gray-100 text-gray-600 border-gray-200', label: 'Draft' },
+  published: { className: 'bg-green-100 text-green-700 border-green-200', label: 'Published' },
+  deleted: { className: 'bg-red-50 text-red-700 border-red-200', label: 'Deleted' },
+  planned: { className: 'bg-purple-100 text-purple-700 border-purple-200', label: 'Planned' },
+  'partially-defined': {
+    className: 'bg-yellow-100 text-yellow-700 border-yellow-200',
+    label: 'Needs Def',
+  },
+  'ready-for-config': {
+    className: 'bg-blue-100 text-blue-700 border-blue-200',
+    label: 'Ready for Config',
+  },
+  'implementation-ready': {
+    className: 'bg-green-100 text-green-700 border-green-200',
+    label: 'Impl Ready',
+  },
+};
+
+/**
+ * @param {{
+ *   status: string,
+ *   palette?: Record<string, { className: string, label?: string }>,
+ *   className?: string,
+ * }} props
+ */
+export function StatusBadge({ status, palette = DEFAULT_STATUS_PALETTE, className = '' }) {
+  const key = typeof status === 'string' ? status.trim() : '';
+  const entry = palette[key] || palette.draft || { className: 'bg-gray-100 text-gray-600 border-gray-200' };
+  const label = entry.label || key || 'Unknown';
+  return (
+    <span
+      className={`inline-flex px-2 py-0.5 text-xs font-medium rounded-full border ${entry.className} ${className}`}
+    >
+      {label}
+    </span>
+  );
+}

package/src/SyncStateBanner.jsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import { AlertTriangle } from 'lucide-react';
+
+const SYNC_LABELS = {
+  clean: { text: 'Layers in sync', className: 'bg-emerald-50 text-emerald-800 border-emerald-200' },
+  'concept-ahead': {
+    text: 'Concept layer has unpublished changes',
+    className: 'bg-amber-50 text-amber-900 border-amber-200',
+  },
+  'graph-ahead': {
+    text: 'Graph changed — layers may be stale',
+    className: 'bg-amber-50 text-amber-900 border-amber-200',
+  },
+  'layer-ahead': {
+    text: 'Data-flow layer has unpublished changes',
+    className: 'bg-amber-50 text-amber-900 border-amber-200',
+  },
+  conflict: {
+    text: 'Layer conflict — resolve before continuing',
+    className: 'bg-red-50 text-red-800 border-red-200',
+  },
+};
+
+/**
+ * @param {{
+ *   syncState: string,
+ *   onResolve?: () => void,
+ *   resolveLabel?: string,
+ *   className?: string,
+ * }} props
+ */
+export function SyncStateBanner({
+  syncState,
+  onResolve,
+  resolveLabel = 'Resolve',
+  className = '',
+}) {
+  if (!syncState || syncState === 'clean') return null;
+  const entry = SYNC_LABELS[syncState] || SYNC_LABELS.conflict;
+
+  return (
+    <div
+      className={`flex items-center gap-3 px-4 py-2 border-b text-sm ${entry.className} ${className}`}
+    >
+      <AlertTriangle size={16} className="shrink-0" aria-hidden />
+      <span className="flex-1">{entry.text}</span>
+      {onResolve ? (
+        <button
+          type="button"
+          onClick={onResolve}
+          className="shrink-0 px-2.5 py-1 text-xs font-semibold rounded-md border border-current hover:bg-white/40"
+        >
+          {resolveLabel}
+        </button>
+      ) : null}
+    </div>
+  );
+}

package/src/ViewTabStrip.jsx

@@ -0,0 +1,39 @@
+import React from 'react';
+
+/**
+ * @param {{
+ *   tabs: Array<{ id: string, label: string, disabled?: boolean }>,
+ *   active: string,
+ *   onChange: (id: string) => void,
+ *   className?: string,
+ * }} props
+ */
+export function ViewTabStrip({ tabs, active, onChange, className = '' }) {
+  return (
+    <div
+      className={`inline-flex items-center gap-0.5 p-0.5 bg-slate-100 border border-slate-200 rounded-lg ${className}`}
+      role="tablist"
+    >
+      {tabs.map((tab) => {
+        const isActive = tab.id === active;
+        return (
+          <button
+            key={tab.id}
+            type="button"
+            role="tab"
+            aria-selected={isActive}
+            disabled={tab.disabled}
+            onClick={() => onChange(tab.id)}
+            className={`px-3 py-1.5 text-sm font-medium rounded-md transition-colors ${
+              isActive
+                ? 'bg-white text-indigo-700 shadow-sm border border-slate-200'
+                : 'text-slate-600 hover:text-slate-900 hover:bg-slate-50'
+            } disabled:opacity-40 disabled:cursor-not-allowed`}
+          >
+            {tab.label}
+          </button>
+        );
+      })}
+    </div>
+  );
+}

package/src/ZoomControls.jsx

@@ -0,0 +1,80 @@
+import React from 'react';
+import { Crosshair, ZoomIn, ZoomOut } from 'lucide-react';
+
+/**
+ * @param {{
+ *   zoom?: number,
+ *   minZoom?: number,
+ *   maxZoom?: number,
+ *   onZoomChange?: (zoom: number) => void,
+ *   onZoomIn?: () => void,
+ *   onZoomOut?: () => void,
+ *   onFitView?: () => void,
+ *   showSlider?: boolean,
+ *   className?: string,
+ * }} props
+ */
+export function ZoomControls({
+  zoom = 100,
+  minZoom = 25,
+  maxZoom = 200,
+  onZoomChange,
+  onZoomIn,
+  onZoomOut,
+  onFitView,
+  showSlider = true,
+  className = '',
+}) {
+  const pct = Math.min(maxZoom, Math.max(minZoom, Math.round(zoom)));
+
+  return (
+    <div
+      className={`flex items-center gap-2 bg-white border border-slate-200 rounded-lg shadow-md px-2.5 py-2 ${className}`}
+      onPointerDown={(e) => e.stopPropagation()}
+    >
+      {onZoomOut ? (
+        <button
+          type="button"
+          className="p-1.5 rounded-md hover:bg-slate-50 text-slate-600 border border-slate-200"
+          onClick={onZoomOut}
+          aria-label="Zoom out"
+        >
+          <ZoomOut size={16} />
+        </button>
+      ) : null}
+      {showSlider && onZoomChange ? (
+        <input
+          type="range"
+          min={minZoom}
+          max={maxZoom}
+          step={5}
+          value={pct}
+          onChange={(e) => onZoomChange(Number(e.target.value))}
+          className="flex-1 min-w-[6rem] h-1.5 cursor-pointer accent-indigo-600"
+          aria-label="Canvas zoom"
+        />
+      ) : null}
+      {onZoomIn ? (
+        <button
+          type="button"
+          className="p-1.5 rounded-md hover:bg-slate-50 text-slate-600 border border-slate-200"
+          onClick={onZoomIn}
+          aria-label="Zoom in"
+        >
+          <ZoomIn size={16} />
+        </button>
+      ) : null}
+      {onFitView ? (
+        <button
+          type="button"
+          className="p-1.5 rounded-md hover:bg-slate-50 text-slate-600 border border-slate-200"
+          onClick={onFitView}
+          title="Fit in view"
+          aria-label="Fit in view"
+        >
+          <Crosshair size={16} />
+        </button>
+      ) : null}
+    </div>
+  );
+}

package/src/index.js

@@ -0,0 +1,39 @@
+export { ViewTabStrip } from './ViewTabStrip.jsx';
+export { JsonDocumentPanel } from './JsonDocumentPanel.jsx';
+export { FlowCanvas } from './FlowCanvas.jsx';
+export { GraphCanvas } from './GraphCanvas.jsx';
+export { GraphCanvasZoomControl } from './GraphCanvasZoomControl.jsx';
+export { DefaultGraphEdge } from './DefaultGraphEdge.jsx';
+export { ConceptSummaryStrip } from './ConceptSummaryStrip.jsx';
+export { ResourceDataTable } from './ResourceDataTable.jsx';
+export { StatusBadge, DEFAULT_STATUS_PALETTE } from './StatusBadge.jsx';
+export { InspectorShell } from './InspectorShell.jsx';
+export { ZoomControls } from './ZoomControls.jsx';
+export { EmptyState } from './EmptyState.jsx';
+export { ErrorState } from './ErrorState.jsx';
+export { SyncStateBanner } from './SyncStateBanner.jsx';
+export {
+  clampGraphCanvasScale,
+  graphCanvasScaleToPercent,
+  graphCanvasPercentToScale,
+  GRAPH_CANVAS_MIN_SCALE,
+  GRAPH_CANVAS_MAX_SCALE,
+  GRAPH_CANVAS_MIN_PERCENT,
+  GRAPH_CANVAS_MAX_PERCENT,
+} from './lib/graphCanvasZoom.js';
+export {
+  layoutGraphNodesFromTopology,
+  calculateAutoLayout,
+  withEdgeCounts,
+  DEFAULT_NODE_CARD_WIDTH,
+  DEFAULT_CANVAS_LEFT_INSET,
+} from './lib/graphCanvasLayout.js';
+export { computeEdgeBezierPath } from './lib/computeEdgeBezierPath.js';
+export {
+  computeGraphViewportResizePan,
+  canvasNodesForViewportBounds,
+  graphContentScreenBounds,
+  GRAPH_VIEWPORT_RESIZE_EDGE_PAD,
+  GRAPH_NODE_CARD_WIDTH,
+  GRAPH_NODE_CARD_APPROX_HEIGHT,
+} from './lib/graphViewportResizePan.js';

package/src/lib/computeEdgeBezierPath.js

@@ -0,0 +1,32 @@
+import { DEFAULT_NODE_CARD_WIDTH } from './graphCanvasLayout.js';
+
+/**
+ * Cubic-bezier path from source node right-center to target node left-center.
+ * @param {{ x: number, y: number }} sourceNode
+ * @param {{ x: number, y: number }} targetNode
+ * @param {{ nodeWidth?: number, anchorY?: number, minControlOffset?: number }} [opts]
+ * @returns {{ path: string, startX: number, startY: number, endX: number, endY: number, midX: number, midY: number }}
+ */
+export function computeEdgeBezierPath(sourceNode, targetNode, opts = {}) {
+  const nodeWidth = opts.nodeWidth ?? DEFAULT_NODE_CARD_WIDTH;
+  const anchorY = opts.anchorY ?? 60;
+  const minControlOffset = opts.minControlOffset ?? 50;
+
+  const startX = sourceNode.x + nodeWidth;
+  const startY = sourceNode.y + anchorY;
+  const endX = targetNode.x;
+  const endY = targetNode.y + anchorY;
+
+  const controlPointOffset = Math.max(Math.abs(endX - startX) / 2, minControlOffset);
+  const path = `M ${startX} ${startY} C ${startX + controlPointOffset} ${startY}, ${endX - controlPointOffset} ${endY}, ${endX} ${endY}`;
+
+  return {
+    path,
+    startX,
+    startY,
+    endX,
+    endY,
+    midX: (startX + endX) / 2,
+    midY: (startY + endY) / 2,
+  };
+}

package/src/lib/graphCanvasLayout.js

@@ -0,0 +1,99 @@
+/** Default layout constants matching graphs-studio node cards. */
+export const DEFAULT_NODE_CARD_WIDTH = 320;
+export const GRAPH_NODE_CARD_APPROX_HEIGHT = 240;
+export const DEFAULT_VIRTUAL_ANCHOR_GAP = 100;
+export const DEFAULT_CANVAS_LEFT_INSET =
+  DEFAULT_NODE_CARD_WIDTH + DEFAULT_VIRTUAL_ANCHOR_GAP + 60;
+
+/**
+ * @param {object[]} nodes
+ * @param {object[]} edges
+ * @param {{ columnGap?: number, rowGap?: number, leftInset?: number, baseX?: number, baseY?: number }} [opts]
+ */
+export function calculateAutoLayout(nodes, edges, opts = {}) {
+  const columnGap = opts.columnGap ?? 380;
+  const rowGap = opts.rowGap ?? 340;
+  const leftInset = opts.leftInset ?? DEFAULT_CANVAS_LEFT_INSET;
+  const baseX = opts.baseX ?? 100;
+  const baseY = opts.baseY ?? 100;
+
+  const levels = {};
+  const inDegree = {};
+  const outDegree = {};
+
+  nodes.forEach((n) => {
+    inDegree[n.id] = 0;
+    outDegree[n.id] = [];
+  });
+
+  edges.forEach((e) => {
+    if (inDegree[e.to] !== undefined) inDegree[e.to]++;
+    if (outDegree[e.from]) {
+      if (!outDegree[e.from].includes(e.to)) outDegree[e.from].push(e.to);
+    } else {
+      outDegree[e.from] = [e.to];
+    }
+  });
+
+  let queue = nodes.filter((n) => inDegree[n.id] === 0).map((n) => n.id);
+  queue.forEach((id) => {
+    levels[id] = 0;
+  });
+
+  while (queue.length > 0) {
+    const u = queue.shift();
+    (outDegree[u] || []).forEach((v) => {
+      if (levels[v] === undefined || levels[v] < levels[u] + 1) {
+        levels[v] = levels[u] + 1;
+        queue.push(v);
+      }
+    });
+  }
+
+  nodes.forEach((n) => {
+    if (levels[n.id] === undefined) levels[n.id] = 0;
+  });
+
+  const levelCounts = {};
+  return nodes.map((n) => {
+    const l = levels[n.id];
+    if (levelCounts[l] === undefined) levelCounts[l] = 0;
+    const x = l * columnGap + baseX + leftInset;
+    const y = levelCounts[l] * rowGap + baseY;
+    levelCounts[l]++;
+    return { ...n, x, y };
+  });
+}
+
+/**
+ * @param {object[]} nodes
+ * @param {object[]} edges
+ */
+export function withEdgeCounts(nodes, edges) {
+  const counts = (Array.isArray(edges) ? edges : []).reduce(
+    (acc, e) => {
+      if (!acc.in[e.to]) acc.in[e.to] = 0;
+      if (!acc.out[e.from]) acc.out[e.from] = 0;
+      acc.in[e.to]++;
+      acc.out[e.from]++;
+      return acc;
+    },
+    { in: {}, out: {} },
+  );
+  return (Array.isArray(nodes) ? nodes : []).map((n) => ({
+    ...n,
+    _inCount: counts.in[n.id] || 0,
+    _outCount: counts.out[n.id] || 0,
+  }));
+}
+
+/**
+ * Auto-layout canvas nodes + edge in/out counts from canonical node/edge lists.
+ * @param {object[]} nList
+ * @param {object[]} eList
+ * @param {{ columnGap?: number, rowGap?: number, leftInset?: number }} [layoutOpts]
+ */
+export function layoutGraphNodesFromTopology(nList, eList, layoutOpts) {
+  const layoutedNodes = calculateAutoLayout(nList, eList, layoutOpts);
+  return withEdgeCounts(layoutedNodes, eList);
+}

package/src/lib/graphCanvasZoom.js

@@ -0,0 +1,33 @@
+/** Canvas zoom limits (match graph-editor wheel + toolbar). */
+export const GRAPH_CANVAS_MIN_SCALE = 0.1;
+export const GRAPH_CANVAS_MAX_SCALE = 3;
+
+export const GRAPH_CANVAS_MIN_PERCENT = Math.round(GRAPH_CANVAS_MIN_SCALE * 100);
+export const GRAPH_CANVAS_MAX_PERCENT = Math.round(GRAPH_CANVAS_MAX_SCALE * 100);
+
+/**
+ * @param {number} scale
+ * @returns {number}
+ */
+export function clampGraphCanvasScale(scale) {
+  if (!Number.isFinite(scale)) return 1;
+  return Math.min(GRAPH_CANVAS_MAX_SCALE, Math.max(GRAPH_CANVAS_MIN_SCALE, scale));
+}
+
+/**
+ * @param {number} scale
+ * @returns {number} Integer percent for UI (10–300).
+ */
+export function graphCanvasScaleToPercent(scale) {
+  return Math.round(clampGraphCanvasScale(scale) * 100);
+}
+
+/**
+ * @param {number} percent
+ * @returns {number}
+ */
+export function graphCanvasPercentToScale(percent) {
+  const n = Number(percent);
+  if (!Number.isFinite(n)) return 1;
+  return clampGraphCanvasScale(n / 100);
+}