@pipelex/mthds-ui 0.6.4 → 0.7.0

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

@@ -1,16 +1,21 @@
 /* ─── StuffViewer component styles ────────────────────────────────────────── */
-/* Uses CSS custom properties for consumer theming. Defaults match graph-core.css. */
+/* StuffViewer is also exported standalone (used outside GraphViewer — e.g.
+ * docs pages, embedded previews). The theme tokens are normally applied to
+ * the GraphViewer container, but when this component is rendered on its own
+ * those tokens may not be set. The fallbacks below match the dark palette
+ * from `graphConfig.ts` (DARK_PALETTE_COLORS) so the component always
+ * renders with valid colors and fonts. */
 
 .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-bg: var(--surface-page, #0a0a0a);
+  --sv-surface: var(--surface-panel, #111118);
+  --sv-surface-hover: var(--surface-elevated, rgba(255, 255, 255, 0.06));
+  --sv-border: var(--border-default, rgba(255, 255, 255, 0.1));
+  --sv-text: var(--text-default, #e2e8f0);
+  --sv-text-muted: var(--text-muted, #94a3b8);
+  --sv-accent: var(--color-accent, #8be9fd);
+  --sv-success: var(--color-success, #50fa7b);
+  --sv-success-bg: var(--color-success-bg, rgba(80, 250, 123, 0.15));
   --sv-radius: 4px;
   --sv-font-sans: var(
     --font-sans,
@@ -90,7 +95,7 @@
 
 .stuff-viewer-tab--active {
   background: var(--sv-accent);
-  color: #fff;
+  color: var(--text-on-accent, #0e0e0e);
 }
 
 /* ─── Action buttons ─────────────────────────────────────────────────────── */
@@ -305,3 +310,25 @@ button.stuff-viewer-local-file--button:focus-visible {
   font-style: italic;
   font-size: 13px;
 }
+
+.stuff-viewer-error {
+  border: 1px solid var(--color-status-failed, #ff5555);
+  border-radius: 6px;
+  padding: 12px;
+  background: rgba(255, 85, 85, 0.08);
+}
+
+.stuff-viewer-error-title {
+  color: var(--color-status-failed, #ff5555);
+  font-weight: 600;
+  font-size: 13px;
+  margin-bottom: 4px;
+}
+
+.stuff-viewer-error-detail {
+  color: var(--sv-text-muted);
+  font-family: var(--font-mono, monospace);
+  font-size: 12px;
+  white-space: pre-wrap;
+  word-break: break-word;
+}

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

@@ -1,4 +1,6 @@
 /* ─── Graph Toolbar — floating controls over the graph background ─────── */
+/* Token-only styling: theme switching happens by swapping `--surface-*`,   */
+/* `--text-*`, `--border-*`, and `--color-accent` values on the container.  */
 
 .graph-toolbar {
   position: absolute;
@@ -20,9 +22,9 @@
   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;
+  background: var(--surface-overlay);
+  border: 1px solid var(--border-default);
+  color: var(--text-secondary);
   backdrop-filter: blur(6px);
   transition:
     background 0.15s,
@@ -31,45 +33,41 @@
 }
 
 .graph-toolbar-btn:hover {
-  background: rgba(30, 30, 40, 0.9);
-  color: #f1f5f9;
-  border-color: rgba(255, 255, 255, 0.18);
+  background: var(--surface-overlay-hover);
+  color: var(--text-primary);
+  border-color: var(--border-strong);
 }
 
 .graph-toolbar-btn:focus-visible {
-  outline: 2px solid rgba(59, 130, 246, 0.6);
+  outline: 2px solid var(--focus-ring);
   outline-offset: 1px;
 }
 
 .graph-toolbar-btn--active {
-  background: #3b82f6;
-  border-color: #3b82f6;
-  color: #ffffff;
+  background: var(--color-accent);
+  border-color: var(--color-accent);
+  color: var(--text-on-accent);
 }
 
 .graph-toolbar-btn--active:hover {
-  background: #2563eb;
-  border-color: #2563eb;
-  color: #ffffff;
+  background: var(--color-accent);
+  border-color: var(--color-accent);
+  color: var(--text-on-accent);
+  filter: brightness(1.1);
 }
 
-.graph-toolbar-btn:disabled {
+.graph-toolbar-btn:disabled,
+.graph-toolbar-btn:disabled:hover {
   opacity: 0.4;
   cursor: not-allowed;
-  background: rgba(17, 17, 24, 0.6);
-  color: #64748b;
-  border-color: rgba(255, 255, 255, 0.06);
-}
-
-.graph-toolbar-btn:disabled:hover {
-  background: rgba(17, 17, 24, 0.6);
-  color: #64748b;
-  border-color: rgba(255, 255, 255, 0.06);
+  background: var(--surface-overlay-disabled);
+  color: var(--text-dim);
+  border-color: var(--border-subtle);
 }
 
 .graph-toolbar-separator {
   width: 1px;
   height: 18px;
-  background: rgba(255, 255, 255, 0.12);
+  background: var(--border-default);
   margin: 0 2px;
 }

package/dist/index.d.ts

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

package/dist/index.js

@@ -1,13 +1,18 @@
-import "./chunk-IZ4FH2WM.js";
+import "./chunk-L24K3TZU.js";
 import {
   ARROW_CLOSED_MARKER,
   CONTROLLER_PADDING_BOTTOM,
   CONTROLLER_PADDING_TOP,
   CONTROLLER_PADDING_X,
+  DARK_PALETTE_COLORS,
   DEFAULT_GRAPH_CONFIG,
   EDGE_TYPE,
   FOLD_MODE,
   GRAPH_DIRECTION,
+  GRAPH_THEME,
+  GraphSpecValidationError,
+  KNOWN_PIPE_TYPES,
+  LIGHT_PALETTE_COLORS,
   MAX_VISIBLE_CONTROLLER_CHILDREN,
   NODE_TYPE_CONTROLLER,
   NODE_TYPE_PIPE_CARD,
@@ -15,6 +20,7 @@ import {
   STUFF_ID_PREFIX,
   applyControllers,
   applyFolds,
+  asPipeCallNode,
   buildChildToControllerMap,
   buildContainmentChain,
   buildControllerNodes,
@@ -29,6 +35,7 @@ import {
   getConceptInfo,
   getLayoutedElements,
   getPaletteColors,
+  getPaletteForTheme,
   getPipeBlueprint,
   inputPortId,
   isStuffNodeId,
@@ -38,18 +45,24 @@ import {
   outputPortId,
   resolveConceptRef,
   stuffDigestFromId,
-  stuffNodeId
-} from "./chunk-FHRUYFGV.js";
+  stuffNodeId,
+  validateGraphSpec
+} from "./chunk-ILX53OYM.js";
 import "./chunk-2NMEKWO5.js";
 export {
   ARROW_CLOSED_MARKER,
   CONTROLLER_PADDING_BOTTOM,
   CONTROLLER_PADDING_TOP,
   CONTROLLER_PADDING_X,
+  DARK_PALETTE_COLORS,
   DEFAULT_GRAPH_CONFIG,
   EDGE_TYPE,
   FOLD_MODE,
   GRAPH_DIRECTION,
+  GRAPH_THEME,
+  GraphSpecValidationError,
+  KNOWN_PIPE_TYPES,
+  LIGHT_PALETTE_COLORS,
   MAX_VISIBLE_CONTROLLER_CHILDREN,
   NODE_TYPE_CONTROLLER,
   NODE_TYPE_PIPE_CARD,
@@ -57,6 +70,7 @@ export {
   STUFF_ID_PREFIX,
   applyControllers,
   applyFolds,
+  asPipeCallNode,
   buildChildToControllerMap,
   buildContainmentChain,
   buildControllerNodes,
@@ -71,6 +85,7 @@ export {
   getConceptInfo,
   getLayoutedElements,
   getPaletteColors,
+  getPaletteForTheme,
   getPipeBlueprint,
   inputPortId,
   isStuffNodeId,
@@ -80,6 +95,7 @@ export {
   outputPortId,
   resolveConceptRef,
   stuffDigestFromId,
-  stuffNodeId
+  stuffNodeId,
+  validateGraphSpec
 };
 //# sourceMappingURL=index.js.map

package/dist/shiki/index.d.ts

@@ -1,13 +1,26 @@
 import { LanguageRegistration, ThemeRegistrationRaw } from '@shikijs/core';
 
-declare const MTHDS_THEMES: readonly ["pipelex-dark", "dark-plus", "monokai", "dracula", "one-dark-pro"];
+declare const MTHDS_THEMES: readonly ["pipelex-dark", "pipelex-light"];
 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 function getMthdsTheme(name?: MthdsThemeName): ThemeRegistrationRaw;
+/** Both pipelex themes, for editors that register every theme up front (e.g. Monaco). */
+declare function getMthdsThemes(): ThemeRegistrationRaw[];
 
 declare const pipelexDarkTheme: ThemeRegistrationRaw;
 
-export { type MthdsThemeName, getAvailableThemes, getMthdsGrammar, getMthdsTheme, highlightMthds, pipelexDarkTheme };
+/**
+ * Light counterpart of `pipelexDarkTheme` — same scopes, one-for-one.
+ * Surfaces and neutrals match the pipelex-app light theme (warm cream
+ * `--card` background, warm near-black `--foreground` text, warm muted
+ * grays) so the editor sits naturally inside the app instead of reading
+ * as a stark-white third-party widget. The Pipelex brand accents (coral,
+ * teal, green, magenta, orange) keep their dark-theme hues, darkened so
+ * they hold contrast on the cream background.
+ */
+declare const pipelexLightTheme: ThemeRegistrationRaw;
+
+export { type MthdsThemeName, getAvailableThemes, getMthdsGrammar, getMthdsTheme, getMthdsThemes, highlightMthds, pipelexDarkTheme, pipelexLightTheme };

package/dist/shiki/index.js

@@ -8,10 +8,6 @@ import {
   createHighlighterCore
 } from "@shikijs/core";
 import { createOnigurumaEngine } from "@shikijs/engine-oniguruma";
-import darkPlus from "@shikijs/themes/dark-plus";
-import dracula from "@shikijs/themes/dracula";
-import monokai from "@shikijs/themes/monokai";
-import oneDarkPro from "@shikijs/themes/one-dark-pro";
 
 // src/shiki/mthds.tmLanguage.json
 var mthds_tmLanguage_default = {
@@ -1280,14 +1276,224 @@ var pipelexDarkTheme = {
   ]
 };
 
+// src/shiki/pipelexLightTheme.ts
+var pipelexLightTheme = {
+  name: "pipelex-light",
+  type: "light",
+  colors: {
+    "editor.background": "#F6F3EF",
+    "editor.foreground": "#1B1713"
+  },
+  settings: [
+    // Default text
+    {
+      scope: [],
+      settings: {
+        foreground: "#1B1713"
+      }
+    },
+    // ── Coral Red #D32F2F bold (dark: #FF6B6B) ──────────────
+    // Pipe sections, pipe types, pipe names
+    {
+      scope: [
+        "entity.name.tag.pipe.mthds",
+        "entity.name.tag.pipe-type.mthds",
+        "entity.name.tag.pipe-name.mthds"
+      ],
+      settings: {
+        foreground: "#D32F2F",
+        fontStyle: "bold"
+      }
+    },
+    // ── Teal #0F766E bold (dark: #4ECDC4) ───────────────────
+    // Concept sections, concept types
+    {
+      scope: ["entity.name.type.concept.mthds"],
+      settings: {
+        foreground: "#0F766E",
+        fontStyle: "bold"
+      }
+    },
+    // ── Green #15803D bold (dark: #98FB98) ──────────────────
+    // Data variables
+    {
+      scope: ["variable.other.readwrite.mthds"],
+      settings: {
+        foreground: "#15803D",
+        fontStyle: "bold"
+      }
+    },
+    // ── Magenta #C2255C (dark: #FF79C6, no bold) ────────────
+    // Template markers, sigils, escape sequences
+    {
+      scope: ["storage.modifier.mthds", "constant.character.escape.mthds"],
+      settings: {
+        foreground: "#C2255C"
+      }
+    },
+    // ── Magenta #C2255C bold (Jinja keywords) ───────────────
+    {
+      scope: ["keyword.control.jinja.mthds"],
+      settings: {
+        foreground: "#C2255C",
+        fontStyle: "bold"
+      }
+    },
+    // ── Magenta #C2255C (Jinja operators) ───────────────────
+    {
+      scope: ["keyword.operator.jinja.mthds"],
+      settings: {
+        foreground: "#C2255C"
+      }
+    },
+    // ── Magenta #C2255C (HTML tags) ─────────────────────────
+    {
+      scope: ["entity.name.tag.html.mthds"],
+      settings: {
+        foreground: "#C2255C"
+      }
+    },
+    // ── Orange #C2410C bold (model refs; dark: #FFB86C) ─────
+    {
+      scope: ["constant.other.symbol.mthds"],
+      settings: {
+        foreground: "#C2410C",
+        fontStyle: "bold"
+      }
+    },
+    // ── Orange #C2410C (Jinja delimiters) ───────────────────
+    {
+      scope: ["punctuation.definition.jinja.mthds"],
+      settings: {
+        foreground: "#C2410C"
+      }
+    },
+    // ── Dark red #A31515 (strings; Light+ default) ──────────
+    {
+      scope: [
+        "string.quoted.triple.basic.block.mthds",
+        "string.quoted.single.basic.line.mthds",
+        "string.quoted.triple.literal.block.mthds",
+        "string.quoted.single.literal.line.mthds",
+        "string.quoted.triple.basic.block.jinja2.mthds",
+        "string.quoted.single.basic.line.jinja2.mthds",
+        "string.quoted.triple.basic.block.prompt.mthds",
+        "string.quoted.single.basic.line.prompt.mthds",
+        "string.quoted.html.mthds"
+      ],
+      settings: {
+        foreground: "#A31515"
+      }
+    },
+    // ── Green #008000 italic (comments; Light+ default) ─────
+    {
+      scope: [
+        "comment",
+        "comment.line.number-sign.mthds",
+        "comment.block.jinja.mthds",
+        "comment.block.html.mthds"
+      ],
+      settings: {
+        foreground: "#008000",
+        fontStyle: "italic"
+      }
+    },
+    // ── Green #008000 italic (preprocessor directives) ──────
+    {
+      scope: ["meta.preprocessor.mthds"],
+      settings: {
+        foreground: "#008000",
+        fontStyle: "italic"
+      }
+    },
+    // ── Navy #001080 (generic property names; Light+) ───────
+    {
+      scope: ["support.type.property-name.mthds"],
+      settings: {
+        foreground: "#001080"
+      }
+    },
+    // ── Blue #0000FF (booleans; Light+) ─────────────────────
+    {
+      scope: ["constant.language.boolean.mthds"],
+      settings: {
+        foreground: "#0000FF"
+      }
+    },
+    // ── Dark green #098658 (numbers; Light+) ────────────────
+    {
+      scope: ["constant.numeric", "constant.other.time"],
+      settings: {
+        foreground: "#098658"
+      }
+    },
+    // ── Navy #001080 (table/array property names) ───────────
+    {
+      scope: ["support.type.property-name.table.mthds", "support.type.property-name.array.mthds"],
+      settings: {
+        foreground: "#001080"
+      }
+    },
+    // ── Brown #795E26 (Jinja functions, HTML attributes; Light+) ─
+    {
+      scope: ["support.function.jinja.mthds", "entity.other.attribute-name.html.mthds"],
+      settings: {
+        foreground: "#795E26"
+      }
+    },
+    // ── Navy #001080 (Jinja variables) ──────────────────────
+    {
+      scope: ["variable.other.jinja.mthds"],
+      settings: {
+        foreground: "#001080"
+      }
+    },
+    // ── Standard foreground #1B1713 (punctuation) ───────────
+    {
+      scope: [
+        "punctuation.definition.table.mthds",
+        "punctuation.definition.array.table.mthds",
+        "punctuation.definition.array.mthds",
+        "punctuation.definition.table.inline.mthds",
+        "punctuation.separator.dot.mthds",
+        "punctuation.separator.array.mthds",
+        "punctuation.separator.table.inline.mthds",
+        "punctuation.eq.mthds",
+        "punctuation.definition.string.begin.mthds",
+        "punctuation.definition.string.end.mthds"
+      ],
+      settings: {
+        foreground: "#1B1713"
+      }
+    },
+    // ── Magenta #C2255C (pipe ref arrow) ────────────────────
+    {
+      scope: ["keyword.operator.arrow.mthds"],
+      settings: {
+        foreground: "#C2255C"
+      }
+    },
+    // ── Warm muted #6A6158 (namespace/package address) ──────
+    // Matches the app's light --muted-foreground.
+    {
+      scope: ["punctuation.separator.namespace.mthds"],
+      settings: {
+        foreground: "#6A6158"
+      }
+    },
+    // ── Red #C00000 underline (invalid) ─────────────────────
+    {
+      scope: ["invalid.illegal.escape.mthds"],
+      settings: {
+        foreground: "#C00000",
+        fontStyle: "underline"
+      }
+    }
+  ]
+};
+
 // src/shiki/themes.ts
-var MTHDS_THEMES = [
-  "pipelex-dark",
-  "dark-plus",
-  "monokai",
-  "dracula",
-  "one-dark-pro"
-];
+var MTHDS_THEMES = ["pipelex-dark", "pipelex-light"];
 
 // src/shiki/highlighter.ts
 var mthdsLang = __spreadProps(__spreadValues({}, mthds_tmLanguage_default), {
@@ -1298,7 +1504,7 @@ function getHighlighter() {
   if (!highlighterPromise) {
     highlighterPromise = createHighlighterCore({
       engine: createOnigurumaEngine(import("@shikijs/engine-oniguruma/wasm-inlined")),
-      themes: [pipelexDarkTheme, darkPlus, monokai, dracula, oneDarkPro],
+      themes: [pipelexDarkTheme, pipelexLightTheme],
       langs: [mthdsLang]
     }).catch((err) => {
       highlighterPromise = null;
@@ -1320,14 +1526,19 @@ function getAvailableThemes() {
 function getMthdsGrammar() {
   return mthdsLang;
 }
-function getMthdsTheme() {
-  return pipelexDarkTheme;
+function getMthdsTheme(name = "pipelex-dark") {
+  return name === "pipelex-light" ? pipelexLightTheme : pipelexDarkTheme;
+}
+function getMthdsThemes() {
+  return [pipelexDarkTheme, pipelexLightTheme];
 }
 export {
   getAvailableThemes,
   getMthdsGrammar,
   getMthdsTheme,
+  getMthdsThemes,
   highlightMthds,
-  pipelexDarkTheme
+  pipelexDarkTheme,
+  pipelexLightTheme
 };
 //# sourceMappingURL=index.js.map