@pipelex/mthds-ui 0.5.0

package/dist/graph/react/stuff/StuffViewer.css

@@ -0,0 +1,284 @@
+/* ─── StuffViewer component styles ────────────────────────────────────────── */
+/* Uses CSS custom properties for consumer theming. Defaults match graph-core.css. */
+
+.stuff-viewer {
+  --sv-bg: var(--color-bg, #0a0a0a);
+  --sv-surface: var(--color-surface, #16213e);
+  --sv-surface-hover: var(--color-surface-hover, #1f2b47);
+  --sv-border: var(--color-border, #2a3a5a);
+  --sv-text: var(--color-text, #e2e8f0);
+  --sv-text-muted: var(--color-text-muted, #94a3b8);
+  --sv-accent: var(--color-accent, #3b82f6);
+  --sv-success: #10b981;
+  --sv-success-bg: rgba(16, 185, 129, 0.2);
+  --sv-radius: 4px;
+  --sv-font-sans: var(
+    --font-sans,
+    "Inter",
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    sans-serif
+  );
+  --sv-font-mono: var(--font-mono, "JetBrains Mono", "Monaco", "Menlo", monospace);
+
+  font-family: var(--sv-font-sans);
+  color: var(--sv-text);
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+/* ─── Header ─────────────────────────────────────────────────────────────── */
+
+.stuff-viewer-header {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: 12px 16px 8px;
+  border-bottom: 1px solid var(--sv-border);
+  flex-shrink: 0;
+}
+
+.stuff-viewer-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--sv-text);
+  margin: 0;
+}
+
+.stuff-viewer-subtitle {
+  font-size: 12px;
+  color: var(--sv-text-muted);
+  margin: 0;
+}
+
+/* ─── Toolbar: tabs + action buttons ─────────────────────────────────────── */
+
+.stuff-viewer-toolbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px 16px;
+  gap: 8px;
+  flex-shrink: 0;
+}
+
+.stuff-viewer-tabs {
+  display: flex;
+  gap: 4px;
+}
+
+.stuff-viewer-tab {
+  padding: 5px 10px;
+  border-radius: var(--sv-radius);
+  cursor: pointer;
+  font-size: 12px;
+  font-weight: 500;
+  background: var(--sv-surface-hover);
+  color: var(--sv-text-muted);
+  border: none;
+  transition:
+    background 0.15s,
+    color 0.15s;
+}
+
+.stuff-viewer-tab:hover {
+  background: var(--sv-border);
+  color: var(--sv-text);
+}
+
+.stuff-viewer-tab--active {
+  background: var(--sv-accent);
+  color: #fff;
+}
+
+/* ─── Action buttons ─────────────────────────────────────────────────────── */
+
+.stuff-viewer-actions {
+  display: flex;
+  gap: 4px;
+}
+
+.stuff-viewer-action-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border-radius: var(--sv-radius);
+  cursor: pointer;
+  background: var(--sv-surface-hover);
+  color: var(--sv-text-muted);
+  border: none;
+  transition:
+    background 0.15s,
+    color 0.15s;
+}
+
+.stuff-viewer-action-btn:hover {
+  background: var(--sv-border);
+  color: var(--sv-text);
+}
+
+.stuff-viewer-action-btn--copied {
+  background: var(--sv-success-bg);
+  color: var(--sv-success);
+}
+
+.stuff-viewer-action-btn svg {
+  width: 14px;
+  height: 14px;
+  fill: currentColor;
+}
+
+/* ─── Content area ───────────────────────────────────────────────────────── */
+
+.stuff-viewer-content {
+  flex: 1;
+  overflow: auto;
+  padding: 12px 16px 16px;
+  min-height: 0;
+}
+
+/* Pre-formatted text (JSON and Pretty tabs) */
+.stuff-viewer-pre {
+  font-family: var(--sv-font-mono);
+  font-size: 11px;
+  line-height: 1.5;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+  margin: 0;
+  color: var(--sv-text-muted);
+}
+
+.stuff-viewer-pre--nowrap {
+  white-space: pre;
+  word-wrap: normal;
+  line-height: 1;
+  overflow-x: auto;
+  padding-right: 20px;
+}
+
+/* HTML content */
+.stuff-viewer-html {
+  font-family: var(--sv-font-sans);
+  font-size: 11px;
+  color: var(--sv-text-muted);
+  line-height: 1.5;
+}
+
+.stuff-viewer-html table {
+  border-collapse: collapse;
+  width: 100%;
+}
+
+.stuff-viewer-html th,
+.stuff-viewer-html td {
+  border: 1px solid var(--sv-border);
+  padding: 8px 12px;
+  text-align: left;
+}
+
+.stuff-viewer-html th {
+  background: var(--sv-surface-hover);
+  color: var(--sv-text);
+  font-weight: 600;
+}
+
+.stuff-viewer-html tr:hover {
+  background: var(--sv-surface-hover);
+}
+
+.stuff-viewer-html a {
+  color: var(--sv-accent);
+  text-decoration: none;
+}
+
+.stuff-viewer-html a:hover {
+  text-decoration: underline;
+}
+
+.stuff-viewer-html ul {
+  list-style: none;
+  padding-left: 0;
+  margin: 0;
+}
+
+/* PDF embed */
+.stuff-viewer-pdf {
+  min-height: 400px;
+  height: 100%;
+}
+
+.stuff-viewer-pdf embed {
+  width: 100%;
+  height: 100%;
+  min-height: 500px;
+  border: none;
+}
+
+/* Image content */
+.stuff-viewer-image {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 200px;
+}
+
+.stuff-viewer-image img {
+  max-width: 100%;
+  max-height: 70vh;
+  object-fit: contain;
+}
+
+/* Local file fallback (file:// URLs that can't render inline) */
+.stuff-viewer-local-file {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 16px;
+  border-radius: 6px;
+  background: var(--sv-surface);
+  border: 1px solid var(--sv-border);
+}
+
+.stuff-viewer-local-file-icon {
+  flex-shrink: 0;
+  width: 32px;
+  height: 32px;
+  color: var(--sv-text-muted);
+}
+
+.stuff-viewer-local-file-icon svg {
+  width: 100%;
+  height: 100%;
+  fill: currentColor;
+}
+
+.stuff-viewer-local-file-info {
+  flex: 1;
+  min-width: 0;
+}
+
+.stuff-viewer-local-file-name {
+  font-family: var(--sv-font-mono);
+  font-size: 12px;
+  color: var(--sv-text);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.stuff-viewer-local-file-hint {
+  font-size: 11px;
+  color: var(--sv-text-muted);
+  margin-top: 2px;
+}
+
+/* Placeholder for missing data */
+.stuff-viewer-placeholder {
+  color: var(--sv-text-muted);
+  font-style: italic;
+  font-size: 13px;
+}

package/dist/graph/react/viewer/GraphToolbar.css

@@ -0,0 +1,61 @@
+/* ─── Graph Toolbar — floating controls over the graph background ─────── */
+
+.graph-toolbar {
+  position: absolute;
+  top: 8px;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  z-index: 11;
+  pointer-events: auto;
+}
+
+.graph-toolbar-btn {
+  all: unset;
+  box-sizing: border-box;
+  cursor: pointer;
+  width: 28px;
+  height: 28px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 6px;
+  background: rgba(17, 17, 24, 0.8);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  color: #cbd5e1;
+  backdrop-filter: blur(6px);
+  transition:
+    background 0.15s,
+    color 0.15s,
+    border-color 0.15s;
+}
+
+.graph-toolbar-btn:hover {
+  background: rgba(30, 30, 40, 0.9);
+  color: #f1f5f9;
+  border-color: rgba(255, 255, 255, 0.18);
+}
+
+.graph-toolbar-btn:focus-visible {
+  outline: 2px solid rgba(59, 130, 246, 0.6);
+  outline-offset: 1px;
+}
+
+.graph-toolbar-btn--active {
+  background: #3b82f6;
+  border-color: #3b82f6;
+  color: #ffffff;
+}
+
+.graph-toolbar-btn--active:hover {
+  background: #2563eb;
+  border-color: #2563eb;
+  color: #ffffff;
+}
+
+.graph-toolbar-separator {
+  width: 1px;
+  height: 18px;
+  background: rgba(255, 255, 255, 0.12);
+  margin: 0 2px;
+}

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export { A as ARROW_CLOSED_MARKER, m as CONTROLLER_PADDING_BOTTOM, n as CONTROLLER_PADDING_TOP, o as CONTROLLER_PADDING_X, C as ConceptInfo, D as DataflowAnalysis, E as EDGE_TYPE, p as EdgeType, q as GRAPH_DIRECTION, d as GraphConfig, k as GraphData, e as GraphDirection, a as GraphEdge, b as GraphNode, G as GraphNodeData, c as GraphSpec, r as GraphSpecEdge, s as GraphSpecEdgeKind, h as GraphSpecNode, t as GraphSpecNodeError, u as GraphSpecNodeIo, i as GraphSpecNodeIoItem, v as GraphSpecNodeTiming, L as LabelDescriptor, l as LayoutConfig, N as NODE_TYPE_CONTROLLER, w as NODE_TYPE_PIPE_CARD, x as NODE_TYPE_STUFF, y as NodeKind, z as PipeBatchBlueprint, B as PipeBlueprintBase, j as PipeBlueprintUnion, F as PipeCardPayload, H as PipeComposeBlueprint, I as PipeComposeConstructBlueprint, J as PipeComposeConstructField, K as PipeConditionBlueprint, f as PipeControllerType, M as PipeExtractBlueprint, O as PipeFuncBlueprint, Q as PipeImgGenBlueprint, R as PipeLLMBlueprint, g as PipeOperatorType, S as PipeParallelBlueprint, T as PipeSearchBlueprint, U as PipeSequenceBlueprint, P as PipeStatus, V as PipeType, W as STUFF_ID_PREFIX, X as StuffRole, Y as StuffSpecInfo, Z as SubPipeSpec, _ as TemplateBlueprint, $ as isStuffNodeId, a0 as nodeHeight, a1 as nodeWidth, a2 as stuffDigestFromId, a3 as stuffNodeId } from './types-bV8F_WoM.js';
+export { ControllerRect, DEFAULT_GRAPH_CONFIG, ElkPositionResult, LayoutResult, MAX_VISIBLE_CONTROLLER_CHILDREN, applyControllers, buildChildToControllerMap, buildControllerNodes, buildDataflowAnalysis, buildDataflowGraph, buildElkGraph, buildGraph, estimateNodeDimensions, extractAbsolutePositions, getConceptInfo, getLayoutedElements, getPaletteColors, getPipeBlueprint, inputPortId, outputPortId, resolveConceptRef } from './graph/index.js';
+import 'elkjs/lib/elk-api';

package/dist/index.js

@@ -0,0 +1,73 @@
+import "./chunk-IX35IG2I.js";
+import {
+  ARROW_CLOSED_MARKER,
+  CONTROLLER_PADDING_BOTTOM,
+  CONTROLLER_PADDING_TOP,
+  CONTROLLER_PADDING_X,
+  DEFAULT_GRAPH_CONFIG,
+  EDGE_TYPE,
+  GRAPH_DIRECTION,
+  MAX_VISIBLE_CONTROLLER_CHILDREN,
+  NODE_TYPE_CONTROLLER,
+  NODE_TYPE_PIPE_CARD,
+  NODE_TYPE_STUFF,
+  STUFF_ID_PREFIX,
+  applyControllers,
+  buildChildToControllerMap,
+  buildControllerNodes,
+  buildDataflowAnalysis,
+  buildDataflowGraph,
+  buildElkGraph,
+  buildGraph,
+  estimateNodeDimensions,
+  extractAbsolutePositions,
+  getConceptInfo,
+  getLayoutedElements,
+  getPaletteColors,
+  getPipeBlueprint,
+  inputPortId,
+  isStuffNodeId,
+  nodeHeight,
+  nodeWidth,
+  outputPortId,
+  resolveConceptRef,
+  stuffDigestFromId,
+  stuffNodeId
+} from "./chunk-CCUSQM3E.js";
+import "./chunk-DDAAVRWG.js";
+export {
+  ARROW_CLOSED_MARKER,
+  CONTROLLER_PADDING_BOTTOM,
+  CONTROLLER_PADDING_TOP,
+  CONTROLLER_PADDING_X,
+  DEFAULT_GRAPH_CONFIG,
+  EDGE_TYPE,
+  GRAPH_DIRECTION,
+  MAX_VISIBLE_CONTROLLER_CHILDREN,
+  NODE_TYPE_CONTROLLER,
+  NODE_TYPE_PIPE_CARD,
+  NODE_TYPE_STUFF,
+  STUFF_ID_PREFIX,
+  applyControllers,
+  buildChildToControllerMap,
+  buildControllerNodes,
+  buildDataflowAnalysis,
+  buildDataflowGraph,
+  buildElkGraph,
+  buildGraph,
+  estimateNodeDimensions,
+  extractAbsolutePositions,
+  getConceptInfo,
+  getLayoutedElements,
+  getPaletteColors,
+  getPipeBlueprint,
+  inputPortId,
+  isStuffNodeId,
+  nodeHeight,
+  nodeWidth,
+  outputPortId,
+  resolveConceptRef,
+  stuffDigestFromId,
+  stuffNodeId
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/shiki/index.d.ts

@@ -0,0 +1,13 @@
+import { LanguageRegistration, ThemeRegistrationRaw } from '@shikijs/core';
+
+declare const MTHDS_THEMES: readonly ["pipelex-dark", "dark-plus", "monokai", "dracula", "one-dark-pro"];
+type MthdsThemeName = (typeof MTHDS_THEMES)[number];
+
+declare function highlightMthds(code: string, theme?: MthdsThemeName): Promise<string>;
+declare function getAvailableThemes(): MthdsThemeName[];
+declare function getMthdsGrammar(): LanguageRegistration;
+declare function getMthdsTheme(): ThemeRegistrationRaw;
+
+declare const pipelexDarkTheme: ThemeRegistrationRaw;
+
+export { type MthdsThemeName, getAvailableThemes, getMthdsGrammar, getMthdsTheme, highlightMthds, pipelexDarkTheme };