@ai-matrx/rich-content 0.2.4 → 0.2.6

package/dist/code-block/highlight/shiki-highlighter.js

@@ -0,0 +1,126 @@
+import { createHighlighterCore } from "shiki/core";
+import { createJavaScriptRegexEngine } from "shiki/engine/javascript";
+import { bundledLanguages, bundledLanguagesAlias } from "shiki/langs";
+import { JSON_SYNTAX_COLORS } from "../../utils/lifted/syntax-themes.js";
+const SHIKI_THEME = { light: "matrx-light", dark: "matrx-dark" };
+const PLAIN_LANGUAGES = /* @__PURE__ */ new Set(["text", "plaintext", "plain", "txt", ""]);
+const LANGUAGE_ALIASES = {
+  react: "tsx",
+  shell: "shellscript",
+  sh: "shellscript",
+  bash: "shellscript",
+  zsh: "shellscript",
+  console: "shellsession",
+  terminal: "shellsession",
+  golang: "go",
+  "c#": "csharp",
+  "c++": "cpp",
+  plaintext: "text",
+  vue: "vue",
+  jsonc: "jsonc",
+  json5: "json5"
+};
+function jsonScopes(palette) {
+  return [
+    {
+      scope: ["support.type.property-name.json"],
+      settings: { foreground: palette.key }
+    },
+    {
+      scope: ["string.quoted.double.json", "string.json"],
+      settings: { foreground: palette.string }
+    },
+    {
+      scope: ["constant.numeric.json"],
+      settings: { foreground: palette.number }
+    },
+    {
+      scope: ["constant.language.json"],
+      settings: { foreground: palette.boolean }
+    },
+    {
+      scope: [
+        "punctuation.separator.dictionary.key-value.json",
+        "punctuation.separator.dictionary.pair.json",
+        "punctuation.separator.array.json",
+        "punctuation.definition.dictionary.begin.json",
+        "punctuation.definition.dictionary.end.json",
+        "punctuation.definition.array.begin.json",
+        "punctuation.definition.array.end.json"
+      ],
+      settings: { foreground: palette.punctuation }
+    }
+  ];
+}
+async function loadTheme(base, name, palette) {
+  const theme = (await base).default;
+  return {
+    ...theme,
+    name,
+    tokenColors: [
+      ...theme.tokenColors ?? theme.settings ?? [],
+      ...jsonScopes(palette)
+    ],
+    settings: void 0
+  };
+}
+let highlighterPromise = null;
+function getHighlighter() {
+  if (!highlighterPromise) {
+    highlighterPromise = createHighlighterCore({
+      engine: createJavaScriptRegexEngine({ forgiving: true }),
+      themes: [
+        loadTheme(
+          import("@shikijs/themes/light-plus"),
+          SHIKI_THEME.light,
+          JSON_SYNTAX_COLORS.light
+        ),
+        loadTheme(
+          import("@shikijs/themes/dark-plus"),
+          SHIKI_THEME.dark,
+          JSON_SYNTAX_COLORS.dark
+        )
+      ],
+      langs: []
+    }).catch((error) => {
+      highlighterPromise = null;
+      throw error;
+    });
+  }
+  return highlighterPromise;
+}
+function resolveShikiLanguage(raw) {
+  const lower = (raw ?? "").trim().toLowerCase();
+  if (PLAIN_LANGUAGES.has(lower)) return "text";
+  const aliased = LANGUAGE_ALIASES[lower] ?? lower;
+  if (aliased in bundledLanguages) return aliased;
+  const canonical = bundledLanguagesAlias[aliased];
+  if (canonical) return aliased;
+  return "text";
+}
+const loading = /* @__PURE__ */ new Map();
+async function ensureLanguage(highlighter, language) {
+  if (language === "text") return;
+  if (highlighter.getLoadedLanguages().includes(language)) return;
+  let pending = loading.get(language);
+  if (!pending) {
+    const importer = bundledLanguages[language];
+    if (!importer) return;
+    pending = importer().then(
+      (mod) => highlighter.loadLanguage(
+        mod.default
+      )
+    ).catch((error) => {
+      loading.delete(language);
+      throw error;
+    });
+    loading.set(language, pending);
+  }
+  await pending;
+}
+export {
+  SHIKI_THEME,
+  ensureLanguage,
+  getHighlighter,
+  resolveShikiLanguage
+};

package/dist/code-block/highlight/useHighlightedLines.d.ts

@@ -0,0 +1,18 @@
+export interface HighlightedToken {
+    content: string;
+    light?: string;
+    dark?: string;
+    fontStyle?: number;
+}
+export interface HighlightedCode {
+    /** One entry per source line; null while the grammar loads. */
+    lines: HighlightedToken[][] | null;
+    /** Theme background colors, for the block surface. */
+    background: {
+        light: string;
+        dark: string;
+    } | null;
+    /** The exact code `lines` were tokenized from (it lags `code` by a tick). */
+    source: string;
+}
+export declare function useHighlightedLines(code: string, rawLanguage: string | undefined): HighlightedCode;

package/dist/code-block/highlight/useHighlightedLines.js

@@ -0,0 +1,142 @@
+"use client";
+import { useEffect, useRef, useState } from "react";
+function toToken(token) {
+  const style = token.htmlStyle;
+  return {
+    content: token.content,
+    light: style?.["--shiki-light"] ?? token.color,
+    dark: style?.["--shiki-dark"] ?? token.color,
+    fontStyle: token.fontStyle
+  };
+}
+function splitLines(tokens) {
+  const lines = [[]];
+  for (const token of tokens) {
+    if (token.content === "\n") {
+      lines.push([]);
+      continue;
+    }
+    lines[lines.length - 1].push(toToken(token));
+  }
+  return lines;
+}
+const SLICE_LINES = 40;
+const SLICE_BUDGET_MS = 8;
+function takeLines(text, count) {
+  let index = -1;
+  for (let i = 0; i < count; i += 1) {
+    index = text.indexOf("\n", index + 1);
+    if (index === -1) return text;
+  }
+  return text.slice(0, index + 1);
+}
+function yieldToMain() {
+  return new Promise((resolve) => setTimeout(resolve, 0));
+}
+const CACHE_LIMIT = 64;
+const cache = /* @__PURE__ */ new Map();
+function cacheKey(language, code) {
+  return `${language}\0${code}`;
+}
+function readCache(language, code) {
+  const key = cacheKey(language, code);
+  const hit = cache.get(key);
+  if (!hit) return null;
+  cache.delete(key);
+  cache.set(key, hit);
+  return hit;
+}
+function writeCache(language, code, lines) {
+  cache.set(cacheKey(language, code), lines);
+  while (cache.size > CACHE_LIMIT) {
+    const oldest = cache.keys().next().value;
+    if (oldest === void 0) break;
+    cache.delete(oldest);
+  }
+}
+function useHighlightedLines(code, rawLanguage) {
+  const [result, setResult] = useState({
+    lines: null,
+    background: null,
+    source: ""
+  });
+  const slot = useRef(null);
+  const generation = useRef(0);
+  const queue = useRef(Promise.resolve());
+  useEffect(() => {
+    const run = ++generation.current;
+    const task = async () => {
+      const [
+        { getHighlighter, ensureLanguage, resolveShikiLanguage, SHIKI_THEME },
+        { ShikiStreamTokenizer }
+      ] = await Promise.all([
+        import("./shiki-highlighter.js"),
+        import("@shikijs/stream")
+      ]);
+      if (run !== generation.current) return;
+      const highlighter = await getHighlighter();
+      const language = resolveShikiLanguage(rawLanguage);
+      await ensureLanguage(highlighter, language);
+      let current = slot.current;
+      const isAppend = current !== null && current.language === language && code.startsWith(current.consumed);
+      if (!current || !isAppend) {
+        current = {
+          tokenizer: new ShikiStreamTokenizer({
+            highlighter,
+            lang: language,
+            themes: { light: SHIKI_THEME.light, dark: SHIKI_THEME.dark },
+            defaultColor: false
+          }),
+          language,
+          consumed: ""
+        };
+        slot.current = current;
+      }
+      const background = {
+        light: highlighter.getTheme(SHIKI_THEME.light).bg,
+        dark: highlighter.getTheme(SHIKI_THEME.dark).bg
+      };
+      const cached = readCache(language, code);
+      if (cached && current.consumed === "") {
+        setResult({ lines: cached, background, source: code });
+        return;
+      }
+      const tokenizer = current.tokenizer;
+      const publish = (source) => setResult({
+        lines: splitLines([...tokenizer.tokensStable, ...tokenizer.tokensUnstable]),
+        background,
+        source
+      });
+      let delta = code.slice(current.consumed.length);
+      let sliceStart = performance.now();
+      while (delta) {
+        const piece = takeLines(delta, SLICE_LINES);
+        await tokenizer.enqueue(piece);
+        current.consumed += piece;
+        delta = delta.slice(piece.length);
+        if (delta && performance.now() - sliceStart > SLICE_BUDGET_MS) {
+          if (run === generation.current) publish(current.consumed);
+          await yieldToMain();
+          if (run !== generation.current) return;
+          sliceStart = performance.now();
+        }
+      }
+      if (run !== generation.current) return;
+      publish(code);
+      writeCache(language, code, splitLines([
+        ...tokenizer.tokensStable,
+        ...tokenizer.tokensUnstable
+      ]));
+    };
+    queue.current = queue.current.then(task).catch((error) => {
+      console.warn(
+        `[CodeBlock] syntax highlighting unavailable for "${rawLanguage ?? "text"}" \u2014 showing plain text.`,
+        error
+      );
+    });
+  }, [code, rawLanguage]);
+  return result;
+}
+export {
+  useHighlightedLines
+};

package/dist/code-block/sticky-inset.d.ts

@@ -0,0 +1,6 @@
+export declare const STICKY_CHROME_SELECTOR = "[data-sticky-chrome]";
+export declare function stickyRestInset(args: {
+    headerBottom: number;
+    restTop: number;
+    chromeHeights: number[];
+}): number;

package/dist/code-block/sticky-inset.js

@@ -0,0 +1,10 @@
+const STICKY_CHROME_SELECTOR = "[data-sticky-chrome]";
+function stickyRestInset(args) {
+  const header = Math.max(0, Math.round(args.headerBottom - args.restTop));
+  const chrome = args.chromeHeights.reduce((sum, h) => sum + Math.max(0, h), 0);
+  return header + Math.round(chrome);
+}
+export {
+  STICKY_CHROME_SELECTOR,
+  stickyRestInset
+};

package/dist/display/block-interaction.d.ts

@@ -0,0 +1,33 @@
+/**
+ * What a chat host tells the block renderer about the conversation it renders in — and what an
+ * interactive block (a decision, a questionnaire) records back. Owned here because the engine
+ * reads it; the chat package supplies it (`configureRichContent({ app: { useHideReasoning, … } })`
+ * today, a provider once chat depends on this package).
+ */
+/** How an answer edit is remarked (ported from @ai-matrx/chat instance-resources/remarks). */
+export interface AnswerEditRemarkMeta {
+    origin: "choice" | "kind";
+    /** "I chose SQLite." — replaces the raw diff when it is the only change. */
+    projection?: string | null;
+    /** The decision's prompt (or the shape's title). */
+    quote?: string | null;
+}
+/** The status line an expert's in-progress turn shows (the chat package's label). */
+export declare const EXPERT_WORKING_LABEL = "Working\u2026";
+/**
+ * A host's renderer for a JSON code block that is an agent's structured answer (matrx-frontend:
+ * `StructuredAgentAnswerBlock` against the bound agent's output schema). Returns null when the
+ * block is not one; a bare host has none (the JSON shows as a code block).
+ */
+import type { ReactNode } from "react";
+type JsonAnswerRenderer = (ctx: {
+    block: {
+        content: string;
+    };
+    outputSchema?: unknown;
+    renderBasicMarkdown: (s: string) => ReactNode;
+    index: number;
+}) => ReactNode | null;
+export declare function registerJsonAnswerRenderer(renderer: JsonAnswerRenderer | null): void;
+export declare function jsonAnswerRenderer(): JsonAnswerRenderer | null;
+export {};

package/dist/display/block-interaction.js

@@ -0,0 +1,13 @@
+const EXPERT_WORKING_LABEL = "Working\u2026";
+const ANSWER_KEY = /* @__PURE__ */ Symbol.for("ai-matrx.rich-content.json-answer-renderer");
+function registerJsonAnswerRenderer(renderer) {
+  globalThis[ANSWER_KEY] = renderer;
+}
+function jsonAnswerRenderer() {
+  return globalThis[ANSWER_KEY] ?? null;
+}
+export {
+  EXPERT_WORKING_LABEL,
+  jsonAnswerRenderer,
+  registerJsonAnswerRenderer
+};

package/dist/display/blocks/ChatCollapsibleWrapper.d.ts

@@ -0,0 +1,13 @@
+import React, { ReactNode } from "react";
+interface ChatCollapsibleWrapperProps {
+    icon: ReactNode;
+    title: ReactNode;
+    controls?: ReactNode;
+    initialOpen?: boolean;
+    onStateChange?: (state: boolean) => void;
+    children: ReactNode;
+    className?: string;
+    maxWidth?: string;
+}
+declare const ChatCollapsibleWrapper: React.FC<ChatCollapsibleWrapperProps>;
+export default ChatCollapsibleWrapper;

package/dist/display/blocks/ChatCollapsibleWrapper.js

@@ -0,0 +1,56 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@ai-matrx/design-system";
+import { ChevronDown } from "lucide-react";
+import { ControlRow } from "@ai-matrx/design-system/controls";
+const ChatCollapsibleWrapper = ({
+  icon,
+  title,
+  controls,
+  initialOpen = true,
+  onStateChange,
+  children,
+  className = "",
+  maxWidth = "max-w-5xl"
+}) => {
+  const [isOpen, setIsOpen] = useState(initialOpen);
+  const handleOpenChange = (open) => {
+    setIsOpen(open);
+    if (onStateChange) {
+      onStateChange(open);
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    Collapsible,
+    {
+      open: isOpen,
+      onOpenChange: handleOpenChange,
+      className: `border-2 border-zinc-200 dark:border-zinc-700 rounded-3xl shadow-sm my-1 w-full ${maxWidth} mx-auto hover:bg-accent/50 hover:shadow-sm ${className}`,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "relative flex w-full items-center justify-between rounded-t-lg hover:bg-accent/50 hover:shadow-sm", children: [
+          /* @__PURE__ */ jsxs(CollapsibleTrigger, { className: "flex-1 flex items-center gap-2 py-1 pl-4 pr-1 font-medium hover:bg-accent/50 hover:shadow-sm", children: [
+            icon,
+            typeof title === "string" ? /* @__PURE__ */ jsx("span", { children: title }) : title,
+            /* @__PURE__ */ jsx(
+              ChevronDown,
+              {
+                className: `h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200 ml-auto ${isOpen ? "rotate-180" : ""}`
+              }
+            )
+          ] }),
+          controls && // One ControlRow: every action carries its own 3px half-gap, the row adds none.
+          /* @__PURE__ */ jsx(ControlRow, { nowrap: true, className: "shrink-0 pr-3", onClick: (e) => e.stopPropagation(), children: controls })
+        ] }),
+        /* @__PURE__ */ jsx(CollapsibleContent, { className: "bg-transparent dark:bg-transparent border-none", children: /* @__PURE__ */ jsxs("div", { className: "relative p-0 border-none", children: [
+          /* @__PURE__ */ jsx("div", { className: "absolute top-0 left-8 right-8 h-px bg-zinc-200 dark:bg-zinc-700" }),
+          children
+        ] }) })
+      ]
+    }
+  );
+};
+var ChatCollapsibleWrapper_default = ChatCollapsibleWrapper;
+export {
+  ChatCollapsibleWrapper_default as default
+};

package/dist/display/blocks/buildMediaSource.d.ts

@@ -0,0 +1,25 @@
+/**
+ * components/mardown-display/blocks/buildMediaSource.ts
+ *
+ * Shared URL-resolution for the chat media output-block renderers
+ * (`AudioOutputBlockRenderer`, `VideoOutputBlockRenderer`). Turns the raw
+ * `serverData` of an `audio_output` / `video_output` / `media_block` render
+ * block into the strongest `FileSource` we can, so the universal file handler
+ * (`useFileSrc`) resolves a DURABLE, playable URL — preferring the public/CDN
+ * URL and resolving from `file_id` — instead of echoing a raw legacy URL.
+ *
+ * Why this exists: the old renderers passed the raw `data.url` straight to the
+ * player. During streaming Python sends only a `file_id` (no minted URL) so it
+ * didn't play; when a URL was present it was a raw signed S3 link that leaked
+ * through "Copy link". Routing through the handler fixes both. See
+ * `AudioOutputBlockRenderer.tsx` and FOUND_DEFECTS.md → "Media durability".
+ */
+import type { FileSource } from "@ai-matrx/media/files/engine/handler/types";
+export declare function pickStr(v: unknown): string | undefined;
+/**
+ * Build the strongest `FileSource` from a media block's `serverData`.
+ * A permanent Matrx CDN URL wins because public media needs no authenticated
+ * hop. Otherwise identity (`file_id`) beats opaque URLs so the handler can
+ * resolve the durable authenticated lane. Expiring URLs are never rendered.
+ */
+export declare function buildMediaSource(sd: Record<string, unknown>, mime?: string): FileSource | null;

package/dist/display/blocks/buildMediaSource.js

@@ -0,0 +1,43 @@
+import {
+  fileIdFromUserFilesUrl,
+  isDurableMediaUrl
+} from "../../utils/lifted/durability.js";
+import { isUuidShape } from "@ai-matrx/kit/uuid";
+function pickStr(v) {
+  return typeof v === "string" && v.length > 0 ? v : void 0;
+}
+function buildMediaSource(sd, mime) {
+  const urlish = [
+    pickStr(sd.cdnUrl) ?? pickStr(sd.cdn_url),
+    pickStr(sd.downloadUrl) ?? pickStr(sd.download_url),
+    pickStr(sd.url) ?? pickStr(sd.file_url),
+    pickStr(sd.externalUrl) ?? pickStr(sd.external_url)
+  ].filter((u) => !!u);
+  const publicCdn = urlish.find(isPermanentMatrxCdnUrl);
+  if (publicCdn) {
+    return { kind: "public_cdn", url: publicCdn, mime };
+  }
+  const directId = pickStr(sd.fileId) ?? pickStr(sd.file_id);
+  if (directId && isUuidShape(directId)) {
+    return { kind: "file_id", fileId: directId, mime };
+  }
+  for (const cand of urlish) {
+    const id = fileIdFromUserFilesUrl(cand);
+    if (id) return { kind: "file_id", fileId: id, mime };
+  }
+  const durable = urlish.find((u) => isDurableMediaUrl(u));
+  if (durable) return { kind: "external_url", url: durable, mime };
+  return null;
+}
+function isPermanentMatrxCdnUrl(url) {
+  if (!isDurableMediaUrl(url)) return false;
+  try {
+    return /(^|\.)cdn\.matrxserver\.com$/i.test(new URL(url).hostname);
+  } catch {
+    return false;
+  }
+}
+export {
+  buildMediaSource,
+  pickStr
+};

package/dist/display/blocks/canvas-adaptive.d.ts

@@ -0,0 +1,118 @@
+/**
+ * How each render block adapts to the canvas pane it is shown in.
+ *
+ * Every function takes the live `CanvasPresentation` from
+ * `useCanvasPresentation()` — `null` outside the canvas — and answers `null`
+ * (or the block's existing behaviour) when there is none, so a block rendered
+ * in chat, a note or a window is unchanged. Inside the canvas the pane's shape
+ * decides (`preferredFlowDirection` from `@ai-matrx/canvas`): tall narrow panes
+ * stack and flow top to bottom, wide panes sit side by side. A person's own
+ * explicit choice (a toggle they pressed, a direction an author wrote) is
+ * always passed in and always wins.
+ *
+ * Pure functions, so each rule is tested without a browser
+ * (`__tests__/canvas-adaptive.test.ts`).
+ */
+import { type CanvasPresentation } from "@ai-matrx/canvas";
+export type CanvasFlow = "vertical" | "horizontal";
+/** Wide enough for two readable columns side by side. */
+export declare const CANVAS_TWO_COLUMN_WIDTH = 640;
+export declare function canvasFlow(p: CanvasPresentation | null): CanvasFlow | null;
+export interface FitBounds {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+export interface FitViewport {
+    x: number;
+    y: number;
+    zoom: number;
+}
+/**
+ * The smallest zoom a diagram is ever fitted to in a portrait canvas pane:
+ * node titles (14px semibold) stay at or above ~10px on screen. Below this a
+ * wide fan-out graph fitted to a 360px pane read at zoom 0.2–0.3 — every
+ * label a smear. Tuned live on "How photosynthesis works" and "Ava Science
+ * Book" (2026-10-02).
+ */
+export declare const DIAGRAM_READABLE_ZOOM = 0.72;
+/**
+ * A diagram in a portrait canvas pane fits the pane's WIDTH and starts at the
+ * top; the rest is reached by scrolling down. Shrinking the whole graph to fit
+ * a tall narrow pane makes every label unreadable, and the phone rule (fill
+ * the height) forces sideways panning.
+ *
+ * The width fit never goes below `readableZoom`. When the graph is wider than
+ * the pane at that zoom it starts at its ROOT — the top-left of the layout's
+ * first rank (`firstRank`, the topmost nodes) — and the rest is reached by
+ * scrolling down and panning across.
+ *
+ * Returns `null` when the graph already fits whole at a readable zoom (the
+ * contained fit is used) or the pane is not portrait.
+ */
+export declare function portraitWidthFitViewport(input: {
+    presentation: CanvasPresentation | null;
+    bounds: FitBounds;
+    /** Bounds of the layout's first rank; defaults to the graph's top-left. */
+    firstRank?: FitBounds | null;
+    width: number;
+    height: number;
+    minZoom: number;
+    maxZoom: number;
+    padding: number;
+    containedZoom: number;
+    readableZoom?: number;
+}): FitViewport | null;
+/**
+ * The layout's first rank: the nodes whose top edge is the graph's topmost
+ * (within `tolerance` px). In a top-to-bottom layout that is the root row.
+ */
+export declare function firstRankBounds(nodes: readonly FitBounds[], tolerance?: number): FitBounds | null;
+/** Wheel and trackpad scroll the diagram down a portrait pane instead of zooming it. */
+export declare function diagramScrollPans(p: CanvasPresentation | null): boolean;
+/** A timeline runs left to right across a wide pane; everywhere else top to bottom. */
+export declare function timelineAxis(p: CanvasPresentation | null): "vertical" | "horizontal";
+/** A text tree in a portrait pane wraps long lines downward instead of scrolling sideways. */
+export declare function treeWrapsLines(p: CanvasPresentation | null): boolean;
+/** A decision tree's Yes and No branches sit side by side in a wide pane; stacked otherwise. */
+export declare function decisionBranchesSideBySide(p: CanvasPresentation | null): boolean;
+export interface ChartPaneLayout {
+    /** Height of the plot area in px. */
+    height: number;
+    legend: "bottom" | "right";
+    /** Bars grow sideways (categories down the left) in a portrait pane. */
+    horizontalBars: boolean;
+}
+export declare function chartPaneLayout(p: CanvasPresentation | null, chartType: string): ChartPaneLayout | null;
+export type SlideThumbnailPlacement = "below" | "side";
+/** In the canvas the slide scales to fit; thumbnails sit below a portrait pane, beside a wide one. */
+export declare function slideThumbnailPlacement(p: CanvasPresentation | null): SlideThumbnailPlacement | null;
+/** The scale that fits a fixed-size slide stage inside a box, keeping its aspect ratio. */
+export declare function fitScale(stage: {
+    width: number;
+    height: number;
+}, box: {
+    width: number;
+    height: number;
+}): number;
+/**
+ * Side by side when the pane is wide, one column when it is narrow. A person's
+ * toggle always wins; so does an author who wrote `split` explicitly. Outside
+ * the canvas the authored default (split) is unchanged.
+ */
+export declare function diffIsSplit(input: {
+    presentation: CanvasPresentation | null;
+    personChoice: boolean | null;
+    authored: boolean;
+    authoredExplicitly: boolean;
+}): boolean;
+/** The list of places beside a map: always shown in a wide pane, behind a toggle when narrow. */
+export declare function mapPlacesList(p: CanvasPresentation | null): "side" | "toggle" | null;
+/**
+ * The source to DRAW for a flowchart that declares no direction: TB in a
+ * portrait pane, LR in a wide one. An author's explicit direction is never
+ * touched, nothing outside the canvas changes, and the stored source is never
+ * rewritten — this only shapes what is drawn.
+ */
+export declare function mermaidSourceForFlow(source: string, flow: CanvasFlow | null): string;