@localix-ai/flowdown 0.0.0-stage → 0.5.1

package/dist/mermaid/viewer.js

@@ -0,0 +1,309 @@
+"use client";
+import { useLabels } from "../react/labels.js";
+import { CloseIcon, FitIcon, MinusIcon, PlusIcon } from "./icons.js";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/mermaid/viewer.tsx
+/** A button or key zooms by this much; the wheel by its own delta. */
+const STEP = 1.25;
+/** An arrow key pans by this many pixels. */
+const PAN = 48;
+/** Room left around a fitted diagram. */
+const PADDING = 32;
+/**
+* A diagram's size in its own units, from the opening tag alone: its `viewBox`, else its `width`
+* and `height`. Mermaid writes `width="100%"`, so a percentage counts as unknown.
+*/
+function diagramBounds(svg) {
+	const root = /<svg\b[^>]*>/i.exec(svg)?.[0] ?? "";
+	const attribute = (name) => new RegExp(`\\s${name}\\s*=\\s*(["'])(.*?)\\1`, "i").exec(root)?.[2];
+	const length = (name) => {
+		const value = attribute(name);
+		return value?.includes("%") ? void 0 : Number.parseFloat(value ?? "");
+	};
+	const box = attribute("viewBox")?.trim().split(/[\s,]+/).map(Number);
+	const positive = (value, fallback) => value !== void 0 && Number.isFinite(value) && value > 0 ? value : fallback;
+	return {
+		width: positive(box?.[2] ?? length("width"), 800),
+		height: positive(box?.[3] ?? length("height"), 600)
+	};
+}
+/**
+* The scale that shows the whole diagram on the stage, kept as the stage resizes. A small diagram
+* is enlarged up to twice its size; a stage not laid out yet (a test DOM) shows it at its own.
+*/
+function useFitScale(stage, size) {
+	const [fit, setFit] = useState(1);
+	useEffect(() => {
+		const element = stage.current;
+		if (!element) return;
+		const measure = () => {
+			const { width, height } = element.getBoundingClientRect();
+			if (width <= PADDING || height <= PADDING) return;
+			setFit(Math.min((width - PADDING) / size.width, (height - PADDING) / size.height, 2));
+		};
+		measure();
+		if (typeof ResizeObserver === "undefined") return;
+		const observer = new ResizeObserver(measure);
+		observer.observe(element);
+		return () => observer.disconnect();
+	}, [stage, size]);
+	return fit;
+}
+/** `from` zoomed by `factor` around `point` (relative to the stage's centre), within the limits. */
+function zoomed(from, factor, point, fit) {
+	const scale = Math.min(Math.max(fit, 1) * 8, Math.max(Math.min(fit, 1) / 4, from.scale * factor));
+	const k = scale / from.scale;
+	return {
+		scale,
+		x: point.x - (point.x - from.x) * k,
+		y: point.y - (point.y - from.y) * k
+	};
+}
+const centre = {
+	x: 0,
+	y: 0
+};
+/** The first two pointers' midpoint and distance apart; the distance is 0 for one pointer. */
+function spread(pointers) {
+	const [first, second] = [...pointers.values()];
+	if (!first) return {
+		start: centre,
+		distance: 0
+	};
+	if (!second) return {
+		start: first,
+		distance: 0
+	};
+	return {
+		start: {
+			x: (first.x + second.x) / 2,
+			y: (first.y + second.y) / 2
+		},
+		distance: Math.hypot(second.x - first.x, second.y - first.y)
+	};
+}
+const ZOOM_KEYS = /* @__PURE__ */ new Map([
+	["+", STEP],
+	["=", STEP],
+	["-", 1 / STEP],
+	["_", 1 / STEP]
+]);
+/** The picture follows the key: the right arrow shows what is to the right. */
+const PAN_KEYS = /* @__PURE__ */ new Map([
+	["ArrowLeft", {
+		x: PAN,
+		y: 0
+	}],
+	["ArrowRight", {
+		x: -48,
+		y: 0
+	}],
+	["ArrowUp", {
+		x: 0,
+		y: PAN
+	}],
+	["ArrowDown", {
+		x: 0,
+		y: -48
+	}]
+]);
+function DiagramViewer({ svg, onClose }) {
+	const labels = useLabels();
+	const dialog = useRef(null);
+	const stage = useRef(null);
+	const size = useMemo(() => diagramBounds(svg), [svg]);
+	const fit = useFitScale(stage, size);
+	const [moved, setMoved] = useState(null);
+	const [moving, setMoving] = useState(false);
+	const view = moved ?? {
+		scale: fit,
+		x: 0,
+		y: 0
+	};
+	const pointers = useRef(/* @__PURE__ */ new Map());
+	const gesture = useRef(null);
+	useEffect(() => {
+		const element = dialog.current;
+		if (!element) return;
+		if (!element.open) element.showModal();
+		stage.current?.focus();
+	}, []);
+	useEffect(() => {
+		const element = stage.current;
+		if (!element) return;
+		const wheel = (event) => {
+			event.preventDefault();
+			const box = element.getBoundingClientRect();
+			const point = {
+				x: event.clientX - box.left - box.width / 2,
+				y: event.clientY - box.top - box.height / 2
+			};
+			const delta = Math.max(-100, Math.min(100, event.deltaY));
+			const factor = Math.exp(-delta * (event.ctrlKey ? .01 : .002));
+			setMoving(true);
+			setMoved((current) => zoomed(current ?? {
+				scale: fit,
+				x: 0,
+				y: 0
+			}, factor, point, fit));
+		};
+		element.addEventListener("wheel", wheel, { passive: false });
+		return () => element.removeEventListener("wheel", wheel);
+	}, [fit]);
+	const zoomBy = (factor) => {
+		setMoving(false);
+		setMoved(zoomed(view, factor, centre, fit));
+	};
+	const actualSize = () => {
+		setMoving(false);
+		setMoved(zoomed(view, 1 / view.scale, centre, fit));
+	};
+	const fitToStage = () => {
+		setMoving(false);
+		setMoved(null);
+	};
+	/** Starts a drag or a pinch from the pointers down now, from the view shown now. */
+	const begin = (from) => {
+		const now = spread(pointers.current);
+		gesture.current = pointers.current.size ? {
+			from,
+			...now
+		} : null;
+		setMoving(pointers.current.size > 0);
+	};
+	const onPointerDown = (event) => {
+		if (event.pointerType === "mouse" && event.button !== 0) return;
+		event.currentTarget.setPointerCapture?.(event.pointerId);
+		pointers.current.set(event.pointerId, {
+			x: event.clientX,
+			y: event.clientY
+		});
+		begin(view);
+	};
+	const onPointerMove = (event) => {
+		const start = gesture.current;
+		if (!start || !pointers.current.has(event.pointerId)) return;
+		pointers.current.set(event.pointerId, {
+			x: event.clientX,
+			y: event.clientY
+		});
+		const now = spread(pointers.current);
+		const box = event.currentTarget.getBoundingClientRect();
+		const anchor = {
+			x: start.start.x - box.left - box.width / 2,
+			y: start.start.y - box.top - box.height / 2
+		};
+		const factor = start.distance > 0 && now.distance > 0 ? now.distance / start.distance : 1;
+		const next = zoomed(start.from, factor, anchor, fit);
+		setMoved({
+			scale: next.scale,
+			x: next.x + now.start.x - start.start.x,
+			y: next.y + now.start.y - start.start.y
+		});
+	};
+	const onPointerUp = (event) => {
+		if (!pointers.current.delete(event.pointerId)) return;
+		begin(view);
+	};
+	const onKeyDown = (event) => {
+		if (event.key === "Escape") {
+			event.preventDefault();
+			dialog.current?.close();
+			return;
+		}
+		if (event.altKey || event.metaKey || event.ctrlKey) return;
+		const factor = ZOOM_KEYS.get(event.key);
+		const pan = PAN_KEYS.get(event.key);
+		if (factor) zoomBy(factor);
+		else if (event.key === "0") fitToStage();
+		else if (pan) {
+			setMoving(false);
+			setMoved({
+				...view,
+				x: view.x + pan.x,
+				y: view.y + pan.y
+			});
+		} else return;
+		event.preventDefault();
+	};
+	const percent = `${Math.round(view.scale * 100)}%`;
+	return /* @__PURE__ */ jsxs("dialog", {
+		ref: dialog,
+		className: "fd-diagram-viewer",
+		"aria-label": labels.diagram,
+		onClose,
+		onKeyDown,
+		onClick: (event) => {
+			if (event.target === event.currentTarget) event.currentTarget.close();
+		},
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "fd-diagram-viewer-bar",
+			children: [
+				/* @__PURE__ */ jsx("button", {
+					type: "button",
+					className: "fd-diagram-action",
+					"aria-label": labels.zoomOut,
+					title: labels.zoomOut,
+					onClick: () => zoomBy(1 / STEP),
+					children: /* @__PURE__ */ jsx(MinusIcon, {})
+				}),
+				/* @__PURE__ */ jsx("button", {
+					type: "button",
+					className: "fd-diagram-action fd-diagram-zoom",
+					"aria-label": `${labels.actualSize} (${percent})`,
+					title: labels.actualSize,
+					onClick: actualSize,
+					children: percent
+				}),
+				/* @__PURE__ */ jsx("button", {
+					type: "button",
+					className: "fd-diagram-action",
+					"aria-label": labels.zoomIn,
+					title: labels.zoomIn,
+					onClick: () => zoomBy(STEP),
+					children: /* @__PURE__ */ jsx(PlusIcon, {})
+				}),
+				/* @__PURE__ */ jsx("button", {
+					type: "button",
+					className: "fd-diagram-action",
+					"aria-label": labels.fit,
+					title: labels.fit,
+					onClick: fitToStage,
+					children: /* @__PURE__ */ jsx(FitIcon, {})
+				}),
+				/* @__PURE__ */ jsx("button", {
+					type: "button",
+					className: "fd-diagram-action fd-diagram-close",
+					"aria-label": labels.close,
+					title: labels.close,
+					onClick: () => dialog.current?.close(),
+					children: /* @__PURE__ */ jsx(CloseIcon, {})
+				})
+			]
+		}), /* @__PURE__ */ jsx("div", {
+			ref: stage,
+			className: "fd-diagram-stage",
+			role: "application",
+			"aria-label": labels.diagram,
+			tabIndex: 0,
+			"data-moving": moving || void 0,
+			onPointerDown,
+			onPointerMove,
+			onPointerUp,
+			onPointerCancel: onPointerUp,
+			children: /* @__PURE__ */ jsx("div", {
+				className: "fd-diagram-viewer-canvas",
+				style: {
+					width: size.width,
+					height: size.height,
+					transform: `translate(${view.x}px, ${view.y}px) scale(${view.scale})`
+				},
+				dangerouslySetInnerHTML: { __html: svg }
+			})
+		})]
+	});
+}
+export { DiagramViewer };
+
+//# sourceMappingURL=viewer.js.map

package/dist/mermaid/viewer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"viewer.js","names":[],"sources":["../../src/mermaid/viewer.tsx"],"sourcesContent":["'use client'\nimport {\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n  type KeyboardEvent,\n  type PointerEvent,\n  type RefObject,\n} from 'react'\nimport { useLabels } from '../react/labels'\nimport { CloseIcon, FitIcon, MinusIcon, PlusIcon } from './icons'\n\n/**\n * The enlarged diagram: a modal `<dialog>` over the page, with the picture on a stage that pans\n * and zooms. Plain state and a CSS transform; no gesture library. Loaded only when a diagram is\n * first enlarged (`diagram.tsx`).\n */\n\n/** Where the picture sits: its scale (1 is its own size) and its offset from the stage's centre. */\ninterface View {\n  scale: number\n  x: number\n  y: number\n}\ninterface Point {\n  x: number\n  y: number\n}\n/** A drag or a pinch in progress, measured from where it started. */\ninterface Gesture {\n  from: View\n  start: Point\n  distance: number\n}\n\n/** A button or key zooms by this much; the wheel by its own delta. */\nconst STEP = 1.25\n/** An arrow key pans by this many pixels. */\nconst PAN = 48\n/** Room left around a fitted diagram. */\nconst PADDING = 32\n\n/**\n * A diagram's size in its own units, from the opening tag alone: its `viewBox`, else its `width`\n * and `height`. Mermaid writes `width=\"100%\"`, so a percentage counts as unknown.\n */\nfunction diagramBounds(svg: string) {\n  const root = /<svg\\b[^>]*>/i.exec(svg)?.[0] ?? ''\n  const attribute = (name: string) =>\n    new RegExp(`\\\\s${name}\\\\s*=\\\\s*([\"'])(.*?)\\\\1`, 'i').exec(root)?.[2]\n  const length = (name: string) => {\n    const value = attribute(name)\n    return value?.includes('%') ? undefined : Number.parseFloat(value ?? '')\n  }\n  const box = attribute('viewBox')\n    ?.trim()\n    .split(/[\\s,]+/)\n    .map(Number)\n  const positive = (value: number | undefined, fallback: number) =>\n    value !== undefined && Number.isFinite(value) && value > 0 ? value : fallback\n  return {\n    width: positive(box?.[2] ?? length('width'), 800),\n    height: positive(box?.[3] ?? length('height'), 600),\n  }\n}\n\n/**\n * The scale that shows the whole diagram on the stage, kept as the stage resizes. A small diagram\n * is enlarged up to twice its size; a stage not laid out yet (a test DOM) shows it at its own.\n */\nfunction useFitScale(\n  stage: RefObject<HTMLDivElement | null>,\n  size: { width: number; height: number },\n) {\n  const [fit, setFit] = useState(1)\n  useEffect(() => {\n    const element = stage.current\n    if (!element) return\n    const measure = () => {\n      const { width, height } = element.getBoundingClientRect()\n      if (width <= PADDING || height <= PADDING) return\n      setFit(Math.min((width - PADDING) / size.width, (height - PADDING) / size.height, 2))\n    }\n    measure()\n    if (typeof ResizeObserver === 'undefined') return\n    const observer = new ResizeObserver(measure)\n    observer.observe(element)\n    return () => observer.disconnect()\n  }, [stage, size])\n  return fit\n}\n\n/** `from` zoomed by `factor` around `point` (relative to the stage's centre), within the limits. */\nfunction zoomed(from: View, factor: number, point: Point, fit: number): View {\n  const scale = Math.min(Math.max(fit, 1) * 8, Math.max(Math.min(fit, 1) / 4, from.scale * factor))\n  const k = scale / from.scale\n  return { scale, x: point.x - (point.x - from.x) * k, y: point.y - (point.y - from.y) * k }\n}\n\nconst centre: Point = { x: 0, y: 0 }\n\n/** The first two pointers' midpoint and distance apart; the distance is 0 for one pointer. */\nfunction spread(pointers: Map<number, Point>): { start: Point; distance: number } {\n  const [first, second] = [...pointers.values()]\n  if (!first) return { start: centre, distance: 0 }\n  if (!second) return { start: first, distance: 0 }\n  return {\n    start: { x: (first.x + second.x) / 2, y: (first.y + second.y) / 2 },\n    distance: Math.hypot(second.x - first.x, second.y - first.y),\n  }\n}\n\nconst ZOOM_KEYS = new Map([\n  ['+', STEP],\n  ['=', STEP],\n  ['-', 1 / STEP],\n  ['_', 1 / STEP],\n])\n/** The picture follows the key: the right arrow shows what is to the right. */\nconst PAN_KEYS = new Map<string, Point>([\n  ['ArrowLeft', { x: PAN, y: 0 }],\n  ['ArrowRight', { x: -PAN, y: 0 }],\n  ['ArrowUp', { x: 0, y: PAN }],\n  ['ArrowDown', { x: 0, y: -PAN }],\n])\n\nexport function DiagramViewer({ svg, onClose }: { svg: string; onClose: () => void }) {\n  const labels = useLabels()\n  const dialog = useRef<HTMLDialogElement>(null)\n  const stage = useRef<HTMLDivElement>(null)\n  const size = useMemo(() => diagramBounds(svg), [svg])\n  const fit = useFitScale(stage, size)\n  // Null until the reader moves the picture: it stays fitted while the window resizes.\n  const [moved, setMoved] = useState<View | null>(null)\n  // A drag or pinch follows the finger; only a button or a key glides (`data-moving` off).\n  const [moving, setMoving] = useState(false)\n  const view = moved ?? { scale: fit, x: 0, y: 0 }\n  const pointers = useRef(new Map<number, Point>())\n  const gesture = useRef<Gesture | null>(null)\n\n  useEffect(() => {\n    const element = dialog.current\n    if (!element) return\n    if (!element.open) element.showModal()\n    stage.current?.focus()\n    // No close on cleanup: a dialog leaves the top layer with the page when it unmounts, and a\n    // close here would end the viewer in Strict Mode, whose second mount follows a cleanup.\n  }, [])\n\n  // The wheel zooms at the pointer; a trackpad pinch arrives as the wheel with Ctrl held. A\n  // listener of its own, because React's is passive and the page behind must not scroll.\n  useEffect(() => {\n    const element = stage.current\n    if (!element) return\n    const wheel = (event: WheelEvent) => {\n      event.preventDefault()\n      const box = element.getBoundingClientRect()\n      const point = {\n        x: event.clientX - box.left - box.width / 2,\n        y: event.clientY - box.top - box.height / 2,\n      }\n      const delta = Math.max(-100, Math.min(100, event.deltaY))\n      const factor = Math.exp(-delta * (event.ctrlKey ? 0.01 : 0.002))\n      setMoving(true)\n      setMoved((current) => zoomed(current ?? { scale: fit, x: 0, y: 0 }, factor, point, fit))\n    }\n    element.addEventListener('wheel', wheel, { passive: false })\n    return () => element.removeEventListener('wheel', wheel)\n  }, [fit])\n\n  const zoomBy = (factor: number) => {\n    setMoving(false)\n    setMoved(zoomed(view, factor, centre, fit))\n  }\n  const actualSize = () => {\n    setMoving(false)\n    setMoved(zoomed(view, 1 / view.scale, centre, fit))\n  }\n  const fitToStage = () => {\n    setMoving(false)\n    setMoved(null)\n  }\n\n  /** Starts a drag or a pinch from the pointers down now, from the view shown now. */\n  const begin = (from: View) => {\n    const now = spread(pointers.current)\n    gesture.current = pointers.current.size ? { from, ...now } : null\n    setMoving(pointers.current.size > 0)\n  }\n  const onPointerDown = (event: PointerEvent<HTMLDivElement>) => {\n    if (event.pointerType === 'mouse' && event.button !== 0) return\n    event.currentTarget.setPointerCapture?.(event.pointerId)\n    pointers.current.set(event.pointerId, { x: event.clientX, y: event.clientY })\n    begin(view)\n  }\n  const onPointerMove = (event: PointerEvent<HTMLDivElement>) => {\n    const start = gesture.current\n    if (!start || !pointers.current.has(event.pointerId)) return\n    pointers.current.set(event.pointerId, { x: event.clientX, y: event.clientY })\n    const now = spread(pointers.current)\n    const box = event.currentTarget.getBoundingClientRect()\n    const anchor = {\n      x: start.start.x - box.left - box.width / 2,\n      y: start.start.y - box.top - box.height / 2,\n    }\n    const factor = start.distance > 0 && now.distance > 0 ? now.distance / start.distance : 1\n    const next = zoomed(start.from, factor, anchor, fit)\n    setMoved({\n      scale: next.scale,\n      x: next.x + now.start.x - start.start.x,\n      y: next.y + now.start.y - start.start.y,\n    })\n  }\n  const onPointerUp = (event: PointerEvent<HTMLDivElement>) => {\n    if (!pointers.current.delete(event.pointerId)) return\n    // A finger lifted from a pinch: the one left drags on from here.\n    begin(view)\n  }\n\n  const onKeyDown = (event: KeyboardEvent<HTMLDialogElement>) => {\n    if (event.key === 'Escape') {\n      // Closed here rather than by the dialog's own cancel, so every browser closes the same way.\n      event.preventDefault()\n      dialog.current?.close()\n      return\n    }\n    if (event.altKey || event.metaKey || event.ctrlKey) return\n    const factor = ZOOM_KEYS.get(event.key)\n    const pan = PAN_KEYS.get(event.key)\n    if (factor) zoomBy(factor)\n    else if (event.key === '0') fitToStage()\n    else if (pan) {\n      setMoving(false)\n      setMoved({ ...view, x: view.x + pan.x, y: view.y + pan.y })\n    } else return\n    event.preventDefault()\n  }\n\n  const percent = `${Math.round(view.scale * 100)}%`\n  return (\n    // The dialog's keys and its backdrop click; every control in it is a button of its own.\n    // oxlint-disable-next-line jsx-a11y/no-noninteractive-element-interactions\n    <dialog\n      ref={dialog}\n      className=\"fd-diagram-viewer\"\n      aria-label={labels.diagram}\n      onClose={onClose}\n      onKeyDown={onKeyDown}\n      // A click on the backdrop lands on the dialog itself: it closes, as a click outside does.\n      onClick={(event) => {\n        if (event.target === event.currentTarget) event.currentTarget.close()\n      }}\n    >\n      <div className=\"fd-diagram-viewer-bar\">\n        <button\n          type=\"button\"\n          className=\"fd-diagram-action\"\n          aria-label={labels.zoomOut}\n          title={labels.zoomOut}\n          onClick={() => zoomBy(1 / STEP)}\n        >\n          <MinusIcon />\n        </button>\n        <button\n          type=\"button\"\n          className=\"fd-diagram-action fd-diagram-zoom\"\n          aria-label={`${labels.actualSize} (${percent})`}\n          title={labels.actualSize}\n          onClick={actualSize}\n        >\n          {percent}\n        </button>\n        <button\n          type=\"button\"\n          className=\"fd-diagram-action\"\n          aria-label={labels.zoomIn}\n          title={labels.zoomIn}\n          onClick={() => zoomBy(STEP)}\n        >\n          <PlusIcon />\n        </button>\n        <button\n          type=\"button\"\n          className=\"fd-diagram-action\"\n          aria-label={labels.fit}\n          title={labels.fit}\n          onClick={fitToStage}\n        >\n          <FitIcon />\n        </button>\n        <button\n          type=\"button\"\n          className=\"fd-diagram-action fd-diagram-close\"\n          aria-label={labels.close}\n          title={labels.close}\n          onClick={() => dialog.current?.close()}\n        >\n          <CloseIcon />\n        </button>\n      </div>\n      {/* A pan and zoom surface: it takes the focus so the keys reach it, and handles its own. */}\n      <div\n        ref={stage}\n        className=\"fd-diagram-stage\"\n        role=\"application\"\n        aria-label={labels.diagram}\n        // oxlint-disable-next-line jsx-a11y/no-noninteractive-tabindex\n        tabIndex={0}\n        data-moving={moving || undefined}\n        onPointerDown={onPointerDown}\n        onPointerMove={onPointerMove}\n        onPointerUp={onPointerUp}\n        onPointerCancel={onPointerUp}\n      >\n        <div\n          className=\"fd-diagram-viewer-canvas\"\n          style={{\n            width: size.width,\n            height: size.height,\n            transform: `translate(${view.x}px, ${view.y}px) scale(${view.scale})`,\n          }}\n          // The same SVG the page shows, from Mermaid in strict mode.\n          dangerouslySetInnerHTML={{ __html: svg }}\n        />\n      </div>\n    </dialog>\n  )\n}\n"],"mappings":"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"}

package/dist/prompt/index.d.ts

@@ -0,0 +1,19 @@
+import { ANSWER_FORM_EXAMPLES, CALLOUT_KINDS, CalloutKind, DIAGRAM_FENCE_LANGUAGE, DIAGRAM_KINDS, TREE_FENCE_LANGUAGE } from "../dialect.js";
+export interface AnswerFormatOptions {
+  /** The section's heading line. */
+  header?: string;
+  /** Mention `$…$` math. Off by default, like `<Markdown math>`: turn both on together. */
+  math?: boolean;
+  /** Teach ```mermaid diagrams. Off by default, like `<Markdown mermaid>`: turn both on together. */
+  diagrams?: boolean;
+}
+export declare const ANSWER_FORMAT_HEADER = "# Answer formatting";
+/**
+ * One line for the rules at the top of a system prompt. Described only in a section further down,
+ * the forms read as an optional reference: a model still answered "plan by day" with a numbered
+ * list and "worth it?" with prose. Stated among the leading rules, they are part of answering.
+ */
+export declare function answerFormsPrinciple(header?: string): string;
+/** The section that teaches the dialect, ready to place in a system prompt. */
+export declare function answerFormatPrompt({ header, math, diagrams }?: AnswerFormatOptions): string;
+export { ANSWER_FORM_EXAMPLES, CALLOUT_KINDS, type CalloutKind, DIAGRAM_FENCE_LANGUAGE, DIAGRAM_KINDS, TREE_FENCE_LANGUAGE };

package/dist/prompt/index.js

@@ -0,0 +1,54 @@
+import { ANSWER_FORM_EXAMPLES, CALLOUT_KINDS, DIAGRAM_FENCE_LANGUAGE, DIAGRAM_KINDS, TREE_FENCE_LANGUAGE } from "../dialect.js";
+// src/prompt/index.ts
+/**
+* `@localix-ai/flowdown/prompt`: the instructions that teach a model to write the dialect.
+*
+* A model writes the forms it was told about and no others: without these lines, a renderer's
+* steps, tabs and callouts go unused, and a reply's shape is whatever the model defaults to
+* (headings on a two-line answer, bullet lists where a comparison belonged, a warning buried
+* mid-paragraph). Every marker and example here is read from `dialect.ts`, the file the renderer
+* reads too, and the tests render each example: the prompt cannot teach a form that would print as
+* raw text.
+*
+* Plain text, no dependencies, safe on a server. Every character rides every request's prompt, so
+* a rule is one line, and only the forms a model cannot know are shown in full.
+*/
+const ANSWER_FORMAT_HEADER = "# Answer formatting";
+/** An example under its rule line, two spaces in, blank lines kept blank. */
+const shown = (lines) => lines.map((line) => line ? `  ${line}` : "").join("\n");
+/**
+* One line for the rules at the top of a system prompt. Described only in a section further down,
+* the forms read as an optional reference: a model still answered "plan by day" with a numbered
+* list and "worth it?" with prose. Stated among the leading rules, they are part of answering.
+*/
+function answerFormsPrinciple(header = ANSWER_FORMAT_HEADER) {
+	return `- Shape every reply with the forms in "${header.replace(/^#+\s*/, "")}": the page renders them, and a plain list or table where a form fits is a formatting defect.`;
+}
+/** The section that teaches the dialect, ready to place in a system prompt. */
+function answerFormatPrompt({ header = ANSWER_FORMAT_HEADER, math = false, diagrams = false } = {}) {
+	const markers = CALLOUT_KINDS.map((kind) => `[!${kind.toUpperCase()}]`).join(" ");
+	const { comparison, verdict, steps, stats, details, sources } = ANSWER_FORM_EXAMPLES;
+	const lines = [
+		header,
+		answerFormsPrinciple(header),
+		`Replies render as GitHub Markdown${math ? " with $…$ math" : ""} plus the forms below; the user's style preferences override them.`,
+		"Match the content to the first form that fits; a table or list is the fallback. Write a marker as its own quote line, the content unquoted after it.",
+		"- Lead with the answer. Short replies use prose; long ones use `##` per thread, short paragraphs and selective bold.",
+		`- Options compared (X vs Y, which to use) or variants (per OS, language): a tab per option, \`#### Label\`; a compared option holds its sides. After them a \`---\`, then one line on when to pick which:\n${shown(comparison)}`,
+		`- One option weighed (should I, is it worth it): its sides, then the verdict:\n${shown(verdict)}`,
+		`- Stages in order (a plan, recovery, schedule, by day, a procedure): steps, never a numbered list:\n${shown(steps)}`,
+		`- Headline figures (speedups, sizes, key numbers): stats:\n${shown(stats)}`,
+		"- Exact values across options (specs, prices, limits): a table.",
+		`- A risk or key aside: one or two callouts, quotes starting \`> [!KIND]\` (${markers}); text after the marker titles it.`,
+		`- Long secondary material (a full log, raw output, a derivation): folded, its content quoted:\n${shown(details)}`,
+		`- Pages the reply draws on: sources, last:\n${shown(sources)}`,
+		`- A directory layout: a \`\`\`${TREE_FENCE_LANGUAGE} fence of \`├──\`/\`└──\` lines. Things to do: \`- [ ] item\`.`,
+		"- Code for a file names it: ```ts title=\"src/app.ts\". A change to code: a ```diff fence."
+	];
+	if (diagrams) lines.push(`- Draw what a picture explains better in a \`\`\`${DIAGRAM_FENCE_LANGUAGE} fence (${DIAGRAM_KINDS.join(", ")}); quote labels with punctuation.`, "- Draw proactively for branching flows, structure and data; prefer one useful picture over ASCII art. Use supplied data; label illustrative data. Never claim an unsupported chart type.");
+	lines.push("- Quote attribution: `> — Author`. Image caption: `![alt](url \"Caption\")`.");
+	return lines.join("\n");
+}
+export { ANSWER_FORMAT_HEADER, ANSWER_FORM_EXAMPLES, CALLOUT_KINDS, DIAGRAM_FENCE_LANGUAGE, DIAGRAM_KINDS, TREE_FENCE_LANGUAGE, answerFormatPrompt, answerFormsPrinciple };
+
+//# sourceMappingURL=index.js.map

package/dist/prompt/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../src/prompt/index.ts"],"sourcesContent":["/**\n * `@localix-ai/flowdown/prompt`: the instructions that teach a model to write the dialect.\n *\n * A model writes the forms it was told about and no others: without these lines, a renderer's\n * steps, tabs and callouts go unused, and a reply's shape is whatever the model defaults to\n * (headings on a two-line answer, bullet lists where a comparison belonged, a warning buried\n * mid-paragraph). Every marker and example here is read from `dialect.ts`, the file the renderer\n * reads too, and the tests render each example: the prompt cannot teach a form that would print as\n * raw text.\n *\n * Plain text, no dependencies, safe on a server. Every character rides every request's prompt, so\n * a rule is one line, and only the forms a model cannot know are shown in full.\n */\nimport {\n  ANSWER_FORM_EXAMPLES,\n  CALLOUT_KINDS,\n  DIAGRAM_FENCE_LANGUAGE,\n  DIAGRAM_KINDS,\n  TREE_FENCE_LANGUAGE,\n} from '../dialect'\n\n// The names a prompt of your own builds its lines from, the same ones the renderer reads.\nexport {\n  ANSWER_FORM_EXAMPLES,\n  CALLOUT_KINDS,\n  DIAGRAM_FENCE_LANGUAGE,\n  DIAGRAM_KINDS,\n  TREE_FENCE_LANGUAGE,\n  type CalloutKind,\n} from '../dialect'\n\nexport interface AnswerFormatOptions {\n  /** The section's heading line. */\n  header?: string\n  /** Mention `$…$` math. Off by default, like `<Markdown math>`: turn both on together. */\n  math?: boolean\n  /** Teach ```mermaid diagrams. Off by default, like `<Markdown mermaid>`: turn both on together. */\n  diagrams?: boolean\n}\n\nexport const ANSWER_FORMAT_HEADER = '# Answer formatting'\n\n/** An example under its rule line, two spaces in, blank lines kept blank. */\nconst shown = (lines: readonly string[]) =>\n  lines.map((line) => (line ? `  ${line}` : '')).join('\\n')\n\n/**\n * One line for the rules at the top of a system prompt. Described only in a section further down,\n * the forms read as an optional reference: a model still answered \"plan by day\" with a numbered\n * list and \"worth it?\" with prose. Stated among the leading rules, they are part of answering.\n */\nexport function answerFormsPrinciple(header = ANSWER_FORMAT_HEADER): string {\n  return `- Shape every reply with the forms in \"${header.replace(/^#+\\s*/, '')}\": the page renders them, and a plain list or table where a form fits is a formatting defect.`\n}\n\n/** The section that teaches the dialect, ready to place in a system prompt. */\nexport function answerFormatPrompt({\n  header = ANSWER_FORMAT_HEADER,\n  math = false,\n  diagrams = false,\n}: AnswerFormatOptions = {}): string {\n  const markers = CALLOUT_KINDS.map((kind) => `[!${kind.toUpperCase()}]`).join(' ')\n  const { comparison, verdict, steps, stats, details, sources } = ANSWER_FORM_EXAMPLES\n  const lines = [\n    header,\n    answerFormsPrinciple(header),\n    `Replies render as GitHub Markdown${math ? ' with $…$ math' : ''} plus the forms below; the user's style preferences override them.`,\n    // A decision list, read top-down, first match wins. A catalogue of forms made \"compare options\n    // in a table\" the only rule a \"compare X and Y\" request matched, and every comparison a table.\n    'Match the content to the first form that fits; a table or list is the fallback. Write a marker as its own quote line, the content unquoted after it.',\n    '- Lead with the answer. Short replies use prose; long ones use `##` per thread, short paragraphs and selective bold.',\n    `- Options compared (X vs Y, which to use) or variants (per OS, language): a tab per option, \\`#### Label\\`; a compared option holds its sides. After them a \\`---\\`, then one line on when to pick which:\\n${shown(comparison)}`,\n    `- One option weighed (should I, is it worth it): its sides, then the verdict:\\n${shown(verdict)}`,\n    `- Stages in order (a plan, recovery, schedule, by day, a procedure): steps, never a numbered list:\\n${shown(steps)}`,\n    `- Headline figures (speedups, sizes, key numbers): stats:\\n${shown(stats)}`,\n    '- Exact values across options (specs, prices, limits): a table.',\n    `- A risk or key aside: one or two callouts, quotes starting \\`> [!KIND]\\` (${markers}); text after the marker titles it.`,\n    `- Long secondary material (a full log, raw output, a derivation): folded, its content quoted:\\n${shown(details)}`,\n    `- Pages the reply draws on: sources, last:\\n${shown(sources)}`,\n    `- A directory layout: a \\`\\`\\`${TREE_FENCE_LANGUAGE} fence of \\`├──\\`/\\`└──\\` lines. Things to do: \\`- [ ] item\\`.`,\n    '- Code for a file names it: ```ts title=\"src/app.ts\". A change to code: a ```diff fence.',\n  ]\n  if (diagrams) {\n    lines.push(\n      `- Draw what a picture explains better in a \\`\\`\\`${DIAGRAM_FENCE_LANGUAGE} fence (${DIAGRAM_KINDS.join(', ')}); quote labels with punctuation.`,\n      '- Draw proactively for branching flows, structure and data; prefer one useful picture over ASCII art. Use supplied data; label illustrative data. Never claim an unsupported chart type.',\n    )\n  }\n  lines.push('- Quote attribution: `> — Author`. Image caption: `![alt](url \"Caption\")`.')\n  return lines.join('\\n')\n}\n"],"mappings":";;;;;;;;;;;;;;;AAwCA,MAAa,uBAAuB;;AAGpC,MAAM,SAAS,UACb,MAAM,KAAK,SAAU,OAAO,KAAK,SAAS,EAAG,CAAC,CAAC,KAAK,IAAI;;;;;;AAO1D,SAAgB,qBAAqB,SAAS,sBAA8B;CAC1E,OAAO,0CAA0C,OAAO,QAAQ,UAAU,EAAE,EAAE;AAChF;;AAGA,SAAgB,mBAAmB,EACjC,SAAS,sBACT,OAAO,OACP,WAAW,UACY,CAAC,GAAW;CACnC,MAAM,UAAU,cAAc,KAAK,SAAS,KAAK,KAAK,YAAY,EAAE,EAAE,CAAC,CAAC,KAAK,GAAG;CAChF,MAAM,EAAE,YAAY,SAAS,OAAO,OAAO,SAAS,YAAY;CAChE,MAAM,QAAQ;EACZ;EACA,qBAAqB,MAAM;EAC3B,oCAAoC,OAAO,mBAAmB,GAAG;EAGjE;EACA;EACA,8MAA8M,MAAM,UAAU;EAC9N,kFAAkF,MAAM,OAAO;EAC/F,uGAAuG,MAAM,KAAK;EAClH,8DAA8D,MAAM,KAAK;EACzE;EACA,8EAA8E,QAAQ;EACtF,kGAAkG,MAAM,OAAO;EAC/G,+CAA+C,MAAM,OAAO;EAC5D,iCAAiC,oBAAoB;EACrD;CACF;CACA,IAAI,UACF,MAAM,KACJ,oDAAoD,uBAAuB,UAAU,cAAc,KAAK,IAAI,EAAE,oCAC9G,0LACF;CAEF,MAAM,KAAK,8EAA4E;CACvF,OAAO,MAAM,KAAK,IAAI;AACxB"}

package/dist/react/callout.d.ts

@@ -0,0 +1,9 @@
+import { ComponentPropsWithoutRef } from "react";
+type CalloutProps = ComponentPropsWithoutRef<'blockquote'> & {
+  node?: unknown;
+  'data-callout'?: string;
+  'data-callout-title'?: string;
+};
+/** A quote, or a typed callout (`> [!WARNING]`): what `render/views.ts` says one is made of. */
+export declare function Callout({ children, ...props }: CalloutProps): string | number | bigint | boolean | Iterable<import("react").ReactNode> | Promise<string | number | bigint | boolean | Iterable<import("react").ReactNode> | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | import("react").ReactPortal | null | undefined> | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | import("react").ReactPortal | null | undefined;
+export {};

package/dist/react/callout.js

@@ -0,0 +1,12 @@
+"use client";
+import { callout } from "../render/views.js";
+import { useLabels } from "./labels.js";
+import { react } from "./render.js";
+// src/react/callout.tsx
+/** A quote, or a typed callout (`> [!WARNING]`): what `render/views.ts` says one is made of. */
+function Callout({ children, ...props }) {
+	return callout(react, props, children === void 0 ? [] : [children], useLabels());
+}
+export { Callout };
+
+//# sourceMappingURL=callout.js.map

package/dist/react/callout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"callout.js","names":[],"sources":["../../src/react/callout.tsx"],"sourcesContent":["'use client'\nimport type { ComponentPropsWithoutRef } from 'react'\nimport type { Props } from '../render/factory'\nimport { callout } from '../render/views'\nimport { useLabels } from './labels'\nimport { react } from './render'\n\ntype CalloutProps = ComponentPropsWithoutRef<'blockquote'> & {\n  node?: unknown\n  'data-callout'?: string\n  'data-callout-title'?: string\n}\n\n/** A quote, or a typed callout (`> [!WARNING]`): what `render/views.ts` says one is made of. */\nexport function Callout({ children, ...props }: CalloutProps) {\n  return callout(react, props as Props, children === undefined ? [] : [children], useLabels())\n}\n"],"mappings":";;;;;;AAcA,SAAgB,QAAQ,EAAE,UAAU,GAAG,SAAuB;CAC5D,OAAO,QAAQ,OAAO,OAAgB,aAAa,KAAA,IAAY,CAAC,IAAI,CAAC,QAAQ,GAAG,UAAU,CAAC;AAC7F"}

package/dist/react/code-block.d.ts

@@ -0,0 +1,18 @@
+import { ComponentPropsWithoutRef, ReactNode } from "react";
+type CodeProps = ComponentPropsWithoutRef<'code'> & {
+  node?: unknown;
+};
+type PreProps = ComponentPropsWithoutRef<'pre'> & {
+  node?: unknown;
+};
+/**
+ * Code, inline or in a fence. A fenced block is highlighted when the page gave `<Markdown>` a
+ * highlighter and the fence names a language it knows; otherwise its text is printed as is.
+ */
+export declare function Code({ children, ...props }: CodeProps): string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | Iterable<ReactNode> | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | import("react").ReactPortal | null | undefined> | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | import("react").ReactPortal | null | undefined;
+/**
+ * A fenced code block: its language, a download and a copy button above the code. Replace it with
+ * your own through `components.pre`; the `Code` inside still highlights.
+ */
+export declare function CodeBlock({ node: _node, children, ...props }: PreProps): import("react").JSX.Element;
+export {};

package/dist/react/code-block.js

@@ -0,0 +1,94 @@
+"use client";
+import { codeFileName, copyText, downloadFile } from "../browser/file-actions.js";
+import { code, codeBar, codeFrame, copyButton, downloadButton, readCodeBlock } from "../render/views.js";
+import { useRenderContext } from "./context.js";
+import { useLabels } from "./labels.js";
+import { react } from "./render.js";
+import { useScrolls } from "./scrolls.js";
+import { memo, useEffect, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+// src/react/code-block.tsx
+/** How long "Copied" stays before the button reads "Copy" again. */
+const COPIED_MS = 1600;
+/**
+* Code, inline or in a fence. A fenced block is highlighted when the page gave `<Markdown>` a
+* highlighter and the fence names a language it knows; otherwise its text is printed as is.
+*/
+function Code({ children, ...props }) {
+	const { highlight } = useRenderContext();
+	return code(react, props, children === void 0 ? [] : [children], highlight);
+}
+function CopyButton({ code: text }) {
+	const labels = useLabels();
+	const [copies, setCopies] = useState(0);
+	useEffect(() => {
+		if (copies === 0) return;
+		const timer = setTimeout(() => setCopies(0), COPIED_MS);
+		return () => clearTimeout(timer);
+	}, [copies]);
+	const copy = () => {
+		copyText(text.current).then((done) => {
+			if (done) setCopies((count) => count + 1);
+		});
+	};
+	return copyButton(react, labels, copies > 0, copy);
+}
+/** Saves the code as a file: named as its fence's title, or `code.<ext>` from its language. */
+function DownloadButton({ code: text, name }) {
+	return downloadButton(react, useLabels(), () => downloadFile(text.current, name));
+}
+/**
+* A fenced code block: its language, a download and a copy button above the code. Replace it with
+* your own through `components.pre`; the `Code` inside still highlights.
+*/
+function CodeBlock({ node: _node, children, ...props }) {
+	const { language, title, text } = readCodeBlock(react, children === void 0 ? [] : [children]);
+	return /* @__PURE__ */ jsx(CodeFrame, {
+		language,
+		title,
+		text,
+		preProps: props,
+		children
+	});
+}
+/**
+* The bar of a code block. It reads the code only when a button is pressed, so while a fence is
+* being written the bar is drawn once, not on every token.
+*/
+const CodeBar = memo(function CodeBar({ language, title, code: text }) {
+	return codeBar(react, language, title, [/* @__PURE__ */ jsx(DownloadButton, {
+		code: text,
+		name: codeFileName(title, language)
+	}, "download"), /* @__PURE__ */ jsx(CopyButton, { code: text }, "copy")]);
+});
+/**
+* The frame of a code block: the bar with its language and its download and copy buttons, then the
+* `<pre>`. A fence that names its file (` ```ts title="src/app.ts" `) shows the file first, the
+* language after it; a fence with no language shows none.
+*/
+function CodeFrame({ language, title, text, preProps, children }) {
+	const labels = useLabels();
+	const [attach, scrolls, again] = useScrolls();
+	const current = useRef(text);
+	useEffect(() => {
+		if (current.current === text) return;
+		current.current = text;
+		again();
+	}, [text, again]);
+	return codeFrame(react, language, /* @__PURE__ */ jsx(CodeBar, {
+		language,
+		title,
+		code: current
+	}), {
+		...preProps,
+		ref: attach,
+		...scrolls ? {
+			role: "group",
+			"aria-label": labels.scrollableCode,
+			tabIndex: 0
+		} : null
+	}, [children]);
+}
+export { Code, CodeBlock, CodeFrame };
+
+//# sourceMappingURL=code-block.js.map

package/dist/react/code-block.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"code-block.js","names":[],"sources":["../../src/react/code-block.tsx"],"sourcesContent":["'use client'\nimport {\n  memo,\n  useEffect,\n  useRef,\n  useState,\n  type ComponentPropsWithoutRef,\n  type ReactNode,\n} from 'react'\nimport { codeFileName, copyText, downloadFile } from '../browser/file-actions'\nimport type { Props } from '../render/factory'\nimport {\n  code,\n  codeBar,\n  codeFrame,\n  copyButton,\n  downloadButton,\n  readCodeBlock,\n} from '../render/views'\nimport { useRenderContext } from './context'\nimport { useLabels } from './labels'\nimport { react } from './render'\nimport { useScrolls } from './scrolls'\n\ntype CodeProps = ComponentPropsWithoutRef<'code'> & { node?: unknown }\ntype PreProps = ComponentPropsWithoutRef<'pre'> & { node?: unknown }\n\n/** How long \"Copied\" stays before the button reads \"Copy\" again. */\nconst COPIED_MS = 1_600\n\n/**\n * Code, inline or in a fence. A fenced block is highlighted when the page gave `<Markdown>` a\n * highlighter and the fence names a language it knows; otherwise its text is printed as is.\n */\nexport function Code({ children, ...props }: CodeProps) {\n  const { highlight } = useRenderContext()\n  return code(react, props as Props, children === undefined ? [] : [children], highlight)\n}\n\n/** The code of a block as last drawn: read when a button is pressed, not when it is drawn. */\ntype CodeText = { readonly current: string }\n\nfunction CopyButton({ code: text }: { code: CodeText }) {\n  const labels = useLabels()\n  // How many times the code was copied since the button last read \"Copy\": each copy starts the\n  // wait over, and the effect's cleanup ends it when the block leaves the page.\n  const [copies, setCopies] = useState(0)\n  useEffect(() => {\n    if (copies === 0) return\n    const timer = setTimeout(() => setCopies(0), COPIED_MS)\n    return () => clearTimeout(timer)\n  }, [copies])\n  const copy = () => {\n    // The Clipboard API, or the old copy command where the page has none (an insecure origin).\n    // When both refuse there is nothing to say: the code is still selectable.\n    void copyText(text.current).then((done) => {\n      if (done) setCopies((count) => count + 1)\n    })\n  }\n  return copyButton(react, labels, copies > 0, copy)\n}\n\n/** Saves the code as a file: named as its fence's title, or `code.<ext>` from its language. */\nfunction DownloadButton({ code: text, name }: { code: CodeText; name: string }) {\n  return downloadButton(react, useLabels(), () => downloadFile(text.current, name))\n}\n\n/**\n * A fenced code block: its language, a download and a copy button above the code. Replace it with\n * your own through `components.pre`; the `Code` inside still highlights.\n */\nexport function CodeBlock({ node: _node, children, ...props }: PreProps) {\n  const { language, title, text } = readCodeBlock(react, children === undefined ? [] : [children])\n  return (\n    <CodeFrame language={language} title={title} text={text} preProps={props}>\n      {children}\n    </CodeFrame>\n  )\n}\n\n/**\n * The bar of a code block. It reads the code only when a button is pressed, so while a fence is\n * being written the bar is drawn once, not on every token.\n */\nconst CodeBar = memo(function CodeBar({\n  language,\n  title,\n  code: text,\n}: {\n  language: string | undefined\n  title: string | undefined\n  code: CodeText\n}) {\n  return codeBar(react, language, title, [\n    <DownloadButton key=\"download\" code={text} name={codeFileName(title, language)} />,\n    <CopyButton key=\"copy\" code={text} />,\n  ])\n})\n\n/**\n * The frame of a code block: the bar with its language and its download and copy buttons, then the\n * `<pre>`. A fence that names its file (` ```ts title=\"src/app.ts\" `) shows the file first, the\n * language after it; a fence with no language shows none.\n */\nexport function CodeFrame({\n  language,\n  title,\n  text,\n  preProps,\n  children,\n}: {\n  language: string | undefined\n  title?: string | undefined\n  text: string\n  preProps?: ComponentPropsWithoutRef<'pre'>\n  children: ReactNode\n}) {\n  const labels = useLabels()\n  // A line too long for the reply scrolls inside the `<pre>`: the keyboard must then reach it.\n  const [attach, scrolls, again] = useScrolls<HTMLPreElement>()\n  const current = useRef(text)\n  useEffect(() => {\n    // Not on the first drawing: the box was measured as it was attached.\n    if (current.current === text) return\n    current.current = text\n    again()\n  }, [text, again])\n  return codeFrame(\n    react,\n    language,\n    <CodeBar language={language} title={title} code={current} />,\n    {\n      ...(preProps as Props | undefined),\n      ref: attach,\n      ...(scrolls ? { role: 'group', 'aria-label': labels.scrollableCode, tabIndex: 0 } : null),\n    },\n    [children],\n  )\n}\n"],"mappings":";;;;;;;;;;;AA4BA,MAAM,YAAY;;;;;AAMlB,SAAgB,KAAK,EAAE,UAAU,GAAG,SAAoB;CACtD,MAAM,EAAE,cAAc,iBAAiB;CACvC,OAAO,KAAK,OAAO,OAAgB,aAAa,KAAA,IAAY,CAAC,IAAI,CAAC,QAAQ,GAAG,SAAS;AACxF;AAKA,SAAS,WAAW,EAAE,MAAM,QAA4B;CACtD,MAAM,SAAS,UAAU;CAGzB,MAAM,CAAC,QAAQ,aAAa,SAAS,CAAC;CACtC,gBAAgB;EACd,IAAI,WAAW,GAAG;EAClB,MAAM,QAAQ,iBAAiB,UAAU,CAAC,GAAG,SAAS;EACtD,aAAa,aAAa,KAAK;CACjC,GAAG,CAAC,MAAM,CAAC;CACX,MAAM,aAAa;EAGjB,SAAc,KAAK,OAAO,CAAC,CAAC,MAAM,SAAS;GACzC,IAAI,MAAM,WAAW,UAAU,QAAQ,CAAC;EAC1C,CAAC;CACH;CACA,OAAO,WAAW,OAAO,QAAQ,SAAS,GAAG,IAAI;AACnD;;AAGA,SAAS,eAAe,EAAE,MAAM,MAAM,QAA0C;CAC9E,OAAO,eAAe,OAAO,UAAU,SAAS,aAAa,KAAK,SAAS,IAAI,CAAC;AAClF;;;;;AAMA,SAAgB,UAAU,EAAE,MAAM,OAAO,UAAU,GAAG,SAAmB;CACvE,MAAM,EAAE,UAAU,OAAO,SAAS,cAAc,OAAO,aAAa,KAAA,IAAY,CAAC,IAAI,CAAC,QAAQ,CAAC;CAC/F,OACE,oBAAC,WAAD;EAAqB;EAAiB;EAAa;EAAM,UAAU;EAChE;CACQ,CAAA;AAEf;;;;;AAMA,MAAM,UAAU,KAAK,SAAS,QAAQ,EACpC,UACA,OACA,MAAM,QAKL;CACD,OAAO,QAAQ,OAAO,UAAU,OAAO,CACrC,oBAAC,gBAAD;EAA+B,MAAM;EAAM,MAAM,aAAa,OAAO,QAAQ;CAAI,GAA7D,UAA6D,GACjF,oBAAC,YAAD,EAAuB,MAAM,KAAO,GAApB,MAAoB,CACtC,CAAC;AACH,CAAC;;;;;;AAOD,SAAgB,UAAU,EACxB,UACA,OACA,MACA,UACA,YAOC;CACD,MAAM,SAAS,UAAU;CAEzB,MAAM,CAAC,QAAQ,SAAS,SAAS,WAA2B;CAC5D,MAAM,UAAU,OAAO,IAAI;CAC3B,gBAAgB;EAEd,IAAI,QAAQ,YAAY,MAAM;EAC9B,QAAQ,UAAU;EAClB,MAAM;CACR,GAAG,CAAC,MAAM,KAAK,CAAC;CAChB,OAAO,UACL,OACA,UACA,oBAAC,SAAD;EAAmB;EAAiB;EAAO,MAAM;CAAU,CAAA,GAC3D;EACE,GAAI;EACJ,KAAK;EACL,GAAI,UAAU;GAAE,MAAM;GAAS,cAAc,OAAO;GAAgB,UAAU;EAAE,IAAI;CACtF,GACA,CAAC,QAAQ,CACX;AACF"}

package/dist/react/context.d.ts

@@ -0,0 +1,18 @@
+import { Highlighter } from "../render/views.js";
+import { Components } from "./render.js";
+import { ComponentType } from "react";
+/**
+ * What `<Markdown components>` takes: an element for any tag, and a page's own drawing of the two
+ * fences that are not code. `diagram` is told whether its fence is the one still being written
+ * (`growing`), so it can wait for the whole source; every diagram above it is complete.
+ */
+export type MarkdownComponents = Components & {
+  diagram?: ComponentType<{
+    source: string;
+    growing: boolean;
+  }>;
+  tree?: ComponentType<{
+    source: string;
+  }>;
+};
+export type { Highlighter };

package/dist/react/context.js

@@ -0,0 +1,17 @@
+"use client";
+import { createContext, useContext } from "react";
+// src/react/context.tsx
+const RenderContextValue = createContext({
+	highlight: null,
+	mermaid: null
+});
+const useRenderContext = () => useContext(RenderContextValue);
+/**
+* Whether the block being drawn is the end of a streaming reply that stops inside a fence. Such a
+* fence is still being written: a diagram in it is not drawn yet (every token would be a layout
+* and most of them a syntax error), only shown as the source it is so far.
+*/
+const GrowingFence = createContext(false);
+export { GrowingFence, RenderContextValue, useRenderContext };
+
+//# sourceMappingURL=context.js.map

package/dist/react/context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.js","names":[],"sources":["../../src/react/context.tsx"],"sourcesContent":["'use client'\nimport { createContext, useContext, type ComponentType } from 'react'\nimport type { Components } from './render'\nimport type { MermaidRenderer } from '../mermaid/renderer'\nimport type { Highlighter } from '../render/views'\n\nexport type { Highlighter } from '../render/views'\n\n/**\n * What `<Markdown components>` takes: an element for any tag, and a page's own drawing of the two\n * fences that are not code. `diagram` is told whether its fence is the one still being written\n * (`growing`), so it can wait for the whole source; every diagram above it is complete.\n */\nexport type MarkdownComponents = Components & {\n  diagram?: ComponentType<{ source: string; growing: boolean }>\n  tree?: ComponentType<{ source: string }>\n}\n\n/** What every block of one document shares, beside the labels. */\nexport interface RenderContext {\n  highlight: Highlighter | null\n  /**\n   * What draws a diagram, or null to show it as its source. `'page'` is the page's one renderer,\n   * for a page that gave a Mermaid loader: it lives in the chunk a diagram loads, so it is named\n   * here, not held.\n   */\n  mermaid: MermaidRenderer | 'page' | null\n}\n\nexport const RenderContextValue = createContext<RenderContext>({ highlight: null, mermaid: null })\n\nexport const useRenderContext = () => useContext(RenderContextValue)\n\n/**\n * Whether the block being drawn is the end of a streaming reply that stops inside a fence. Such a\n * fence is still being written: a diagram in it is not drawn yet (every token would be a layout\n * and most of them a syntax error), only shown as the source it is so far.\n */\nexport const GrowingFence = createContext(false)\n"],"mappings":";;;AA6BA,MAAa,qBAAqB,cAA6B;CAAE,WAAW;CAAM,SAAS;AAAK,CAAC;AAEjG,MAAa,yBAAyB,WAAW,kBAAkB;;;;;;AAOnE,MAAa,eAAe,cAAc,KAAK"}

package/dist/react/draw.d.ts

@@ -0,0 +1,2 @@
+import "./render.js";
+import "react";