@pipelex/mthds-ui 0.7.0 → 0.9.0

package/dist/graph/index.d.ts

@@ -1,5 +1,5 @@
-import { j as GraphSpecNode, m as PipeCallNode, c as GraphSpec, D as DataflowAnalysis, C as ConceptInfo, n as PipeBlueprintUnion, o as GraphData, p as PipeCardPayload, h as FoldToggleOptions, b as GraphNode, a as GraphEdge, e as GraphDirection, q as LayoutConfig, d as GraphConfig, f as GraphTheme } from '../types-DJTrDxjV.js';
-export { A as ARROW_CLOSED_MARKER, r as CONTROLLER_PADDING_BOTTOM, s as CONTROLLER_PADDING_TOP, t as CONTROLLER_PADDING_X, E as EDGE_TYPE, u as EdgeType, v as FOLD_MODE, w as FieldResolution, F as FoldMode, x as GRAPH_DIRECTION, y as GRAPH_THEME, G as GraphNodeData, z as GraphSpecEdge, B as GraphSpecEdgeKind, H as GraphSpecNodeError, I as GraphSpecNodeIo, k as GraphSpecNodeIoItem, J as GraphSpecNodeTiming, K as KNOWN_PIPE_TYPES, L as LabelDescriptor, N as NODE_TYPE_CONTROLLER, M as NODE_TYPE_PIPE_CARD, O as NODE_TYPE_STUFF, Q as NodeKind, R as PipeBatchBlueprint, S as PipeBlueprintBase, T as PipeComposeBlueprint, U as PipeComposeConstructBlueprint, V as PipeComposeConstructField, W as PipeConditionBlueprint, g as PipeControllerType, X as PipeExtractBlueprint, Y as PipeFuncBlueprint, Z as PipeImgGenBlueprint, _ as PipeLLMBlueprint, l as PipeOperatorType, $ as PipeParallelBlueprint, a0 as PipeSearchBlueprint, a1 as PipeSequenceBlueprint, P as PipeStatus, i as PipeType, a2 as STUFF_ID_PREFIX, a3 as StuffRole, a4 as StuffSpecInfo, a5 as SubPipeSpec, a6 as TemplateBlueprint, a7 as isStuffNodeId, a8 as nodeHeight, a9 as nodeWidth, aa as stuffDigestFromId, ab as stuffNodeId } from '../types-DJTrDxjV.js';
+import { k as GraphSpecNode, n as PipeCallNode, c as GraphSpec, D as DataflowAnalysis, C as ConceptInfo, o as PipeBlueprintUnion, p as GraphData, q as PipeCardPayload, i as FoldToggleOptions, b as GraphNode, a as GraphEdge, e as GraphDirection, r as LayoutConfig, d as GraphConfig, g as GraphTheme } from '../types-uGRs3n4k.js';
+export { A as ARROW_CLOSED_MARKER, s as CONTROLLER_PADDING_BOTTOM, t as CONTROLLER_PADDING_TOP, u as CONTROLLER_PADDING_X, E as EDGE_TYPE, v as EdgeType, w as FOLD_MODE, x as FieldResolution, F as FoldMode, y as GRAPH_DIRECTION, z as GRAPH_THEME, B as GRAPH_THEME_MODE, G as GraphNodeData, H as GraphSpecEdge, I as GraphSpecEdgeKind, J as GraphSpecNodeError, K as GraphSpecNodeIo, l as GraphSpecNodeIoItem, M as GraphSpecNodeTiming, f as GraphThemeMode, N as KNOWN_PIPE_TYPES, L as LabelDescriptor, O as NODE_TYPE_CONTROLLER, Q as NODE_TYPE_PIPE_CARD, R as NODE_TYPE_STUFF, S as NodeKind, T as PipeBatchBlueprint, U as PipeBlueprintBase, V as PipeComposeBlueprint, W as PipeComposeConstructBlueprint, X as PipeComposeConstructField, Y as PipeConditionBlueprint, h as PipeControllerType, Z as PipeExtractBlueprint, _ as PipeFuncBlueprint, $ as PipeImgGenBlueprint, a0 as PipeLLMBlueprint, m as PipeOperatorType, a1 as PipeParallelBlueprint, a2 as PipeSearchBlueprint, a3 as PipeSequenceBlueprint, a4 as PipeSignatureBlueprint, P as PipeStatus, j as PipeType, a5 as STUFF_ID_PREFIX, a6 as StuffRole, a7 as StuffSpecInfo, a8 as SubPipeSpec, a9 as TemplateBlueprint, aa as isStuffNodeId, ab as nodeHeight, ac as nodeWidth, ad as stuffDigestFromId, ae as stuffNodeId } from '../types-uGRs3n4k.js';
 import { ElkNode } from 'elkjs/lib/elk-api';
 
 /**

package/dist/graph/index.js

@@ -10,6 +10,7 @@ import {
   FOLD_MODE,
   GRAPH_DIRECTION,
   GRAPH_THEME,
+  GRAPH_THEME_MODE,
   GraphSpecValidationError,
   KNOWN_PIPE_TYPES,
   LIGHT_PALETTE_COLORS,
@@ -47,7 +48,7 @@ import {
   stuffDigestFromId,
   stuffNodeId,
   validateGraphSpec
-} from "../chunk-ILX53OYM.js";
+} from "../chunk-WNSV4E7G.js";
 import "../chunk-2NMEKWO5.js";
 export {
   ARROW_CLOSED_MARKER,
@@ -60,6 +61,7 @@ export {
   FOLD_MODE,
   GRAPH_DIRECTION,
   GRAPH_THEME,
+  GRAPH_THEME_MODE,
   GraphSpecValidationError,
   KNOWN_PIPE_TYPES,
   LIGHT_PALETTE_COLORS,

package/dist/graph/react/graph-core.css

@@ -384,6 +384,19 @@
 .pipe-card--controller {
   --pipe-card-accent: var(--text-muted);
 }
+
+/* Signature (unimplemented stub) — dashed + muted so it reads as "declared,
+   not built yet", distinct from operator (solid accent) and controller (tinted). */
+.pipe-card--signature {
+  --pipe-card-accent: var(--text-muted);
+  border-left-style: dashed;
+  opacity: 0.85;
+}
+.pipe-card-badge--signature {
+  background: transparent;
+  color: var(--text-muted);
+  border: 1px dashed var(--text-muted);
+}
 @keyframes pipe-card-pulse {
   0%,
   100% {

package/dist/graph/react/index.d.ts

@@ -1,7 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import React from 'react';
-import { G as GraphNodeData, a as GraphEdge, b as GraphNode, c as GraphSpec, d as GraphConfig, e as GraphDirection, F as FoldMode, f as GraphTheme, P as PipeStatus, L as LabelDescriptor, g as PipeControllerType, h as FoldToggleOptions, i as PipeType, j as GraphSpecNode, C as ConceptInfo, k as GraphSpecNodeIoItem } from '../../types-DJTrDxjV.js';
-export { l as PipeOperatorType } from '../../types-DJTrDxjV.js';
+import { G as GraphNodeData, a as GraphEdge, b as GraphNode, c as GraphSpec, d as GraphConfig, e as GraphDirection, F as FoldMode, f as GraphThemeMode, g as GraphTheme, P as PipeStatus, L as LabelDescriptor, h as PipeControllerType, i as FoldToggleOptions, j as PipeType, k as GraphSpecNode, C as ConceptInfo, l as GraphSpecNodeIoItem } from '../../types-uGRs3n4k.js';
+export { m as PipeOperatorType } from '../../types-uGRs3n4k.js';
 import { Edge, Node, ReactFlowInstance } from '@xyflow/react';
 
 /** Data for rendering a stuff (data item) in the StuffViewer component. */
@@ -74,14 +74,24 @@ interface GraphViewerProps {
     /** Hide the built-in floating toolbar (direction + controllers toggle). */
     hideToolbar?: boolean;
     /**
-     * Color theme. Reactive: passing it as a prop drives the active theme, and
-     * clearing it back to `undefined` hands control back to `config.theme` (or
-     * the default). Users can also toggle via the built-in toolbar button
-     * (unless `showThemeToggle` is `false`).
+     * Theme *mode*: `dark | light | system`. Reactive: passing it as a prop drives
+     * the active mode, and clearing it back to `undefined` hands control back to
+     * `config.theme` (or the default `system`). Users can also cycle it via the
+     * built-in toolbar button (unless `showThemeToggle` is `false`).
      *
-     * Defaults to `config.theme` or `"dark"`.
+     * `system` resolves to the environment theme — the browser's
+     * `prefers-color-scheme`, or `systemTheme` when injected.
+     *
+     * Defaults to `config.theme` or `"system"`.
+     */
+    theme?: GraphThemeMode;
+    /**
+     * Host-injected environment theme, authoritative when set. Forwarded to the
+     * `system` resolver so non-browser hosts (e.g. VS Code webviews, where
+     * `prefers-color-scheme` is unreliable) can drive `system` from their own
+     * detection. When omitted, `system` follows the browser's `prefers-color-scheme`.
      */
-    theme?: GraphTheme;
+    systemTheme?: GraphTheme;
     /**
      * Whether to render the theme toggle button in the built-in toolbar.
      * Defaults to `true`. Set to `false` to hide it (useful when the host app
@@ -89,11 +99,12 @@ interface GraphViewerProps {
      */
     showThemeToggle?: boolean;
     /**
-     * Called whenever the active theme changes — both from the built-in toggle
-     * and from external prop / config updates. Use this to keep page chrome
-     * outside the GraphViewer container in sync with the graph's theme.
+     * Called whenever the theme changes — from the built-in toggle, from external
+     * prop / config updates, or when `system` re-resolves because the environment
+     * changed. Receives both the selected `mode` (for persistence) and the
+     * `resolvedTheme` (for keeping page chrome outside the container in sync).
      */
-    onThemeChange?: (theme: GraphTheme) => void;
+    onThemeChange?: (mode: GraphThemeMode, resolvedTheme: GraphTheme) => void;
     onNavigateToPipe?: (pipeCode: string, status?: PipeStatus) => void;
     onStuffNodeClick?: (stuffData: StuffViewerData) => void;
     onReactFlowInit?: (instance: AppRFInstance) => void;
@@ -133,6 +144,29 @@ declare function renderLabel(desc: LabelDescriptor): React.ReactNode;
 /** Convert label descriptors to React elements on all nodes */
 declare function hydrateLabels(nodes: GraphNode[]): GraphNode[];
 
+/**
+ * Read the environment's current color scheme once. SSR / no-`matchMedia` safe:
+ * defaults to `dark` when `window.matchMedia` is unavailable. Exported so
+ * non-React callers (e.g. the standalone adapter's initial body-palette paint,
+ * before any `onThemeChange` fires) can resolve `system` the same way the hook does.
+ */
+declare function detectSystemTheme(): GraphTheme;
+/**
+ * Resolved environment theme.
+ *
+ * - `injected` set → return it (host owns detection; host re-renders drive
+ *   updates). No live `matchMedia` subscription is registered.
+ * - otherwise → subscribe to `prefers-color-scheme` and re-render on `change`.
+ *
+ * Uses `useSyncExternalStore` so the subscription is concurrent-safe. The hook
+ * is always called (rules-of-hooks); only the `systemThemeStore` triple branches
+ * on `injected`, memoized so the `subscribe` reference stays stable across
+ * renders (no re-subscribe churn). SSR with no injected value falls back to
+ * `dark` via the server snapshot — see `docs/theming.md` → "SSR" for the
+ * consequence and the recommended `theme` / `systemTheme` pinning.
+ */
+declare function useSystemTheme(injected?: GraphTheme): GraphTheme;
+
 interface ControllerGroupData {
     label?: React.ReactNode;
     pipeType?: PipeControllerType;
@@ -325,4 +359,4 @@ interface UseResizableResult {
 }
 declare function useResizable({ defaultWidth, minWidth, maxWidth, containerRef, }: UseResizableOptions): UseResizableResult;
 
-export { type AppEdge, type AppNode, type AppRFInstance, ConceptDetailPanel, type ConceptDetailPanelProps, ControllerGroupNode, DetailPanel, type DetailPanelProps, GraphViewer, type GraphViewerProps, PipeCardBase, type PipeCardBaseProps, type PipeCardData, PipeCardNode, PipeDetailPanel, type PipeDetailPanelProps, PipeStatus, type ResolveStorageUrl, StuffViewer, type StuffViewerData, type StuffViewerProps, type UseResizableOptions, type UseResizableResult, applyStatusOverrides, controllerNodeTypes, extractFilename, extractInlineUrl, extractStorageUri, extractUrl, findStuffDataByDigest, getHtmlTabLabel, hydrateLabels, isInlineRenderableUrl, isSafeDisplayUrl, renderLabel, resolveMimeType, toAppEdges, toAppNodes, useResizable };
+export { type AppEdge, type AppNode, type AppRFInstance, ConceptDetailPanel, type ConceptDetailPanelProps, ControllerGroupNode, DetailPanel, type DetailPanelProps, GraphViewer, type GraphViewerProps, PipeCardBase, type PipeCardBaseProps, type PipeCardData, PipeCardNode, PipeDetailPanel, type PipeDetailPanelProps, PipeStatus, type ResolveStorageUrl, StuffViewer, type StuffViewerData, type StuffViewerProps, type UseResizableOptions, type UseResizableResult, applyStatusOverrides, controllerNodeTypes, detectSystemTheme, extractFilename, extractInlineUrl, extractStorageUri, extractUrl, findStuffDataByDigest, getHtmlTabLabel, hydrateLabels, isInlineRenderableUrl, isSafeDisplayUrl, renderLabel, resolveMimeType, toAppEdges, toAppNodes, useResizable, useSystemTheme };