@petrarca/sonnet-ui 0.8.0 → 0.9.0

package/dist/json-editor/index.d.ts

@@ -1,5 +1,4 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import * as _codemirror_state from '@codemirror/state';
+import React__default from 'react';
 import { Extension } from '@codemirror/state';
 
 interface JsonEditorProps {
@@ -39,23 +38,22 @@ interface JsonEditorProps {
  * the document the user can modify. Everything else is visible but
  * locked. Changes outside editable regions are silently rejected.
  *
- * The default theme reads CSS variables from @petrarca/sonnet-ui/styles.css
- * (--border, --font-mono, --muted). Pass a custom `theme` extension to
- * override styling for consumers that do not use sonnet-ui tokens.
+ * A CodeEditor with the JSON language and the locking extensions. The default
+ * theme reads CSS variables from @petrarca/sonnet-ui/styles.css; pass a custom
+ * `theme` extension to override styling for consumers that do not use
+ * sonnet-ui tokens.
  */
-declare function JsonEditor({ value, editablePaths, onChange, height, className, theme, fillContainer, }: JsonEditorProps): react_jsx_runtime.JSX.Element;
+declare function JsonEditor({ value, editablePaths, onChange, height, className, theme, fillContainer, }: JsonEditorProps): React__default.JSX.Element;
 
 /**
- * Default CodeMirror theme for JsonEditor.
- *
- * Reads design tokens from @petrarca/sonnet-ui/styles.css: --border, --muted
- * and --state-selected. Each holds a bare HSL triple, so every reference has
- * to be wrapped in hsl() -- `var(--border)` on its own is not a colour and the
- * declaration is dropped.
+ * Default theme for JsonEditor: the CodeEditor look (design tokens from
+ * @petrarca/sonnet-ui/styles.css), plus the JSON editor's own marks -- the
+ * locked regions, and no active-line band (it would read as a lock).
  *
  * Consumers not using sonnet-ui tokens can pass their own Extension
  * via the JsonEditor `theme` prop to override this entirely.
  */
-declare const defaultTheme: _codemirror_state.Extension;
+declare const defaultTheme: Extension;
 
-export { JsonEditor, type JsonEditorProps, defaultTheme };
+export { JsonEditor, defaultTheme };
+export type { JsonEditorProps };

package/dist/json-editor/index.js

@@ -1,6 +1,10 @@
+import {
+  CodeEditor,
+  codeTheme
+} from "../chunk-JDD3LLTR.js";
+
 // src/JsonEditor/JsonEditor.tsx
-import { useCallback, useMemo } from "react";
-import CodeMirror from "@uiw/react-codemirror";
+import { useMemo } from "react";
 import { json } from "@codemirror/lang-json";
 import { EditorState, StateField } from "@codemirror/state";
 import { EditorView as EditorView2, Decoration } from "@codemirror/view";
@@ -37,33 +41,24 @@ function computeReadonlyRanges(editableRanges, docLength) {
 
 // src/JsonEditor/defaultTheme.ts
 import { EditorView } from "@codemirror/view";
-var defaultTheme = EditorView.theme({
-  "&": {
-    fontSize: "13px",
-    border: "1px solid hsl(var(--border))",
-    borderRadius: "6px"
-  },
-  ".cm-content": {
-    fontFamily: "'JetBrains Mono', ui-monospace, SFMono-Regular, monospace"
-  },
-  ".cm-readonly-region": {
-    backgroundColor: "hsl(var(--state-selected) / 0.5)",
-    opacity: "0.7"
-  },
-  ".cm-gutters": {
-    backgroundColor: "hsl(var(--muted) / 0.3)",
-    border: "none"
-  },
-  ".cm-activeLine": {
-    backgroundColor: "transparent"
-  },
-  ".cm-activeLineGutter": {
-    backgroundColor: "transparent"
-  }
-});
+var defaultTheme = [
+  codeTheme,
+  EditorView.theme({
+    ".cm-readonly-region": {
+      backgroundColor: "hsl(var(--state-selected) / 0.5)",
+      opacity: "0.7"
+    },
+    ".cm-activeLine": {
+      backgroundColor: "transparent"
+    },
+    ".cm-activeLineGutter": {
+      backgroundColor: "transparent"
+    }
+  })
+];
 
 // src/JsonEditor/JsonEditor.tsx
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 var readonlyMark = Decoration.mark({ class: "cm-readonly-region" });
 function buildEditableExtensions(editablePaths) {
   const changeFilter = EditorState.changeFilter.of((tr) => {
@@ -113,38 +108,22 @@ function JsonEditor({
 }) {
   const joinedPaths = editablePaths.join(",");
   const extensions = useMemo(
-    () => [json(), theme, ...buildEditableExtensions(editablePaths)],
-    [joinedPaths, theme]
+    () => [json(), ...buildEditableExtensions(editablePaths)],
+    [joinedPaths]
     // eslint-disable-line react-hooks/exhaustive-deps
   );
-  const handleChange = useCallback(
-    (val) => {
-      onChange?.(val);
-    },
-    [onChange]
+  return /* @__PURE__ */ jsx(
+    CodeEditor,
+    {
+      value,
+      onChange,
+      height,
+      fillContainer,
+      theme,
+      extensions,
+      className
+    }
   );
-  const effectiveHeight = fillContainer ? "100%" : height;
-  const wrapperStyle = fillContainer ? { height: "100%" } : void 0;
-  const wrapperClass = fillContainer ? `json-editor--fill${className ? ` ${className}` : ""}` : className;
-  return /* @__PURE__ */ jsxs("div", { className: wrapperClass, style: wrapperStyle, children: [
-    fillContainer && /* @__PURE__ */ jsx("style", { children: ".json-editor--fill > .cm-theme-light { height: 100%; }" }),
-    /* @__PURE__ */ jsx(
-      CodeMirror,
-      {
-        value,
-        height: effectiveHeight,
-        extensions,
-        onChange: handleChange,
-        basicSetup: {
-          lineNumbers: true,
-          foldGutter: true,
-          bracketMatching: true,
-          closeBrackets: true,
-          indentOnInput: true
-        }
-      }
-    )
-  ] });
 }
 export {
   JsonEditor,

package/dist/json-editor/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/JsonEditor/JsonEditor.tsx","../../src/JsonEditor/readonlyRanges.ts","../../src/JsonEditor/defaultTheme.ts"],"sourcesContent":["import React, { useCallback, useMemo } from \"react\";\nimport CodeMirror from \"@uiw/react-codemirror\";\nimport { json } from \"@codemirror/lang-json\";\nimport { EditorState, StateField, type Extension } from \"@codemirror/state\";\nimport { EditorView, Decoration, type DecorationSet } from \"@codemirror/view\";\nimport { resolvePointerRanges } from \"@petrarca/sonnet-core\";\nimport { computeReadonlyRanges } from \"./readonlyRanges\";\nimport { defaultTheme } from \"./defaultTheme\";\n\nexport interface JsonEditorProps {\n  /** The JSON string to display and edit. */\n  value: string;\n  /**\n   * JSON Pointer (RFC 6901) paths whose values are editable.\n   * Everything outside these paths is readonly.\n   * Example: [\"/metadata\", \"/definitions/Patient/description\"]\n   */\n  editablePaths: string[];\n  /** Called when the document changes (only editable regions can change). */\n  onChange?: (value: string) => void;\n  /** Editor height. Defaults to \"400px\". */\n  height?: string;\n  /** Additional CSS class on the wrapper. */\n  className?: string;\n  /**\n   * Make the editor fill its container's height. Sets height=\"100%\" and\n   * propagates the fill through CodeMirror's internal wrappers so the editor\n   * scrolls internally. Use when the container has an explicit height (e.g.\n   * `absolute inset-0` or `flex-1`). Prefer this over external `<style>` rules\n   * targeting CodeMirror's internal class names.\n   */\n  fillContainer?: boolean;\n  /**\n   * CodeMirror theme extension. Defaults to a built-in theme that reads\n   * CSS variables (--border, --font-mono, --muted) from the host app.\n   * Pass your own Extension to override styling entirely.\n   */\n  theme?: Extension;\n}\n\n// Decoration mark for readonly regions (subtle blue background)\nconst readonlyMark = Decoration.mark({ class: \"cm-readonly-region\" });\n\n/**\n * Build CodeMirror extensions that enforce editable regions:\n * - changeFilter: suppresses changes outside editable ranges\n * - StateField: decorates readonly regions with a visual style\n */\nfunction buildEditableExtensions(editablePaths: string[]) {\n  // changeFilter: recompute editable ranges from the live document on every\n  // transaction so offsets remain accurate as the user types. Using a snapshot\n  // from mount time would cause ranges to drift and incorrectly block edits.\n  const changeFilter = EditorState.changeFilter.of((tr) => {\n    const currentDoc = tr.startState.doc.toString();\n    const editableRanges = resolvePointerRanges(currentDoc, editablePaths);\n    const readonlyRanges = computeReadonlyRanges(\n      editableRanges,\n      tr.startState.doc.length,\n    );\n    // Empty readonly list means the whole document is editable -- return true\n    // to allow all changes. An empty array would block everything.\n    if (readonlyRanges.length === 0) return true;\n    return readonlyRanges.flatMap((r) => [r.from, r.to]);\n  });\n\n  // Decorations: mark readonly regions with a subtle background.\n  // Recomputed from the live document on every change so highlights stay\n  // accurate as content shifts.\n  const readonlyDecorations = StateField.define<DecorationSet>({\n    create(state) {\n      const editableRanges = resolvePointerRanges(\n        state.doc.toString(),\n        editablePaths,\n      );\n      const ranges = computeReadonlyRanges(editableRanges, state.doc.length);\n      return Decoration.set(\n        ranges.map((r) => readonlyMark.range(r.from, r.to)),\n      );\n    },\n    update(deco, tr) {\n      if (!tr.docChanged) return deco;\n      const editableRanges = resolvePointerRanges(\n        tr.state.doc.toString(),\n        editablePaths,\n      );\n      const ranges = computeReadonlyRanges(editableRanges, tr.state.doc.length);\n      return Decoration.set(\n        ranges.map((r) => readonlyMark.range(r.from, r.to)),\n      );\n    },\n    provide: (field) => EditorView.decorations.from(field),\n  });\n\n  return [changeFilter, readonlyDecorations];\n}\n\n/**\n * JsonEditor - A JSON text editor with selectively editable regions.\n *\n * Pass JSON Pointer paths to `editablePaths` to mark which parts of\n * the document the user can modify. Everything else is visible but\n * locked. Changes outside editable regions are silently rejected.\n *\n * The default theme reads CSS variables from @petrarca/sonnet-ui/styles.css\n * (--border, --font-mono, --muted). Pass a custom `theme` extension to\n * override styling for consumers that do not use sonnet-ui tokens.\n */\nexport default function JsonEditor({\n  value,\n  editablePaths,\n  onChange,\n  height = \"400px\",\n  className,\n  theme = defaultTheme,\n  fillContainer = false,\n}: JsonEditorProps) {\n  // Ranges are structural: recompute only when the set of editable paths\n  // or the theme changes, not on every keystroke. When paths change, use the\n  // current value so ranges are computed against what is actually in the editor.\n  const joinedPaths = editablePaths.join(\",\");\n\n  const extensions = useMemo(\n    () => [json(), theme, ...buildEditableExtensions(editablePaths)],\n    [joinedPaths, theme], // eslint-disable-line react-hooks/exhaustive-deps\n  );\n\n  const handleChange = useCallback(\n    (val: string) => {\n      onChange?.(val);\n    },\n    [onChange],\n  );\n\n  const effectiveHeight = fillContainer ? \"100%\" : height;\n  // When fillContainer=true the wrapper div needs an explicit height so the\n  // \"100%\" value on CodeMirror resolves against the container. However\n  // @uiw/react-codemirror does not propagate a percentage height to its\n  // internal .cm-theme-light wrapper, so we also set that explicitly via a\n  // scoped <style> that only targets children of the .json-editor--fill class.\n  const wrapperStyle = fillContainer\n    ? ({ height: \"100%\" } as React.CSSProperties)\n    : undefined;\n  const wrapperClass = fillContainer\n    ? `json-editor--fill${className ? ` ${className}` : \"\"}`\n    : className;\n\n  return (\n    <div className={wrapperClass} style={wrapperStyle}>\n      {fillContainer && (\n        <style>\n          {\".json-editor--fill > .cm-theme-light { height: 100%; }\"}\n        </style>\n      )}\n      <CodeMirror\n        value={value}\n        height={effectiveHeight}\n        extensions={extensions}\n        onChange={handleChange}\n        basicSetup={{\n          lineNumbers: true,\n          foldGutter: true,\n          bracketMatching: true,\n          closeBrackets: true,\n          indentOnInput: true,\n        }}\n      />\n    </div>\n  );\n}\n","/**\n * Editable-region maths for JsonEditor.\n *\n * Pure functions, kept out of the component file so it exports only components\n * (Fast Refresh) and so the inversion is directly testable. Not re-exported\n * from the package root -- these are internals, like the table's column\n * resolver.\n */\n\nimport type { OffsetRange } from \"@petrarca/sonnet-core\";\n\n/**\n * Normalize ranges into a sorted, non-overlapping set.\n *\n * Inversion walks a single cursor forward, so it is only correct for input that\n * is already sorted and disjoint. Neither holds in general: a caller may pass a\n * pointer together with one nested inside it -- `/metadata` and\n * `/metadata/version` -- which is a reasonable way to say \"this object is\n * editable, and so is this field within it\". Merging first makes the inversion\n * correct for any input rather than for input that happens to satisfy an\n * unstated precondition.\n */\nfunction mergeRanges(ranges: OffsetRange[]): { from: number; to: number }[] {\n  const sorted = [...ranges].sort((a, b) => a.from - b.from);\n  const merged: { from: number; to: number }[] = [];\n  for (const range of sorted) {\n    const last = merged[merged.length - 1];\n    // `<=` also folds ranges that merely touch, so the inversion emits no\n    // zero-width readonly slivers between them.\n    if (last && range.from <= last.to) {\n      last.to = Math.max(last.to, range.to);\n    } else {\n      merged.push({ from: range.from, to: range.to });\n    }\n  }\n  return merged;\n}\n\n/**\n * Compute readonly ranges from editable ranges (inversion against doc length).\n * Used by both the changeFilter and the decoration builder.\n */\nexport function computeReadonlyRanges(\n  editableRanges: OffsetRange[],\n  docLength: number,\n): { from: number; to: number }[] {\n  const ranges: { from: number; to: number }[] = [];\n  let cursor = 0;\n  for (const range of mergeRanges(editableRanges)) {\n    if (cursor < range.from) {\n      ranges.push({ from: cursor, to: range.from });\n    }\n    cursor = range.to;\n  }\n  if (cursor < docLength) {\n    ranges.push({ from: cursor, to: docLength });\n  }\n  return ranges;\n}\n","import { EditorView } from \"@codemirror/view\";\n\n/**\n * Default CodeMirror theme for JsonEditor.\n *\n * Reads design tokens from @petrarca/sonnet-ui/styles.css: --border, --muted\n * and --state-selected. Each holds a bare HSL triple, so every reference has\n * to be wrapped in hsl() -- `var(--border)` on its own is not a colour and the\n * declaration is dropped.\n *\n * Consumers not using sonnet-ui tokens can pass their own Extension\n * via the JsonEditor `theme` prop to override this entirely.\n */\nexport const defaultTheme = EditorView.theme({\n  \"&\": {\n    fontSize: \"13px\",\n    border: \"1px solid hsl(var(--border))\",\n    borderRadius: \"6px\",\n  },\n  \".cm-content\": {\n    fontFamily: \"'JetBrains Mono', ui-monospace, SFMono-Regular, monospace\",\n  },\n  \".cm-readonly-region\": {\n    backgroundColor: \"hsl(var(--state-selected) / 0.5)\",\n    opacity: \"0.7\",\n  },\n  \".cm-gutters\": {\n    backgroundColor: \"hsl(var(--muted) / 0.3)\",\n    border: \"none\",\n  },\n  \".cm-activeLine\": {\n    backgroundColor: \"transparent\",\n  },\n  \".cm-activeLineGutter\": {\n    backgroundColor: \"transparent\",\n  },\n});\n"],"mappings":"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","names":["EditorView","EditorView"]}
+{"version":3,"sources":["../../src/JsonEditor/JsonEditor.tsx","../../src/JsonEditor/readonlyRanges.ts","../../src/JsonEditor/defaultTheme.ts"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport { json } from \"@codemirror/lang-json\";\nimport { EditorState, StateField, type Extension } from \"@codemirror/state\";\nimport { EditorView, Decoration, type DecorationSet } from \"@codemirror/view\";\nimport { resolvePointerRanges } from \"@petrarca/sonnet-core\";\nimport { CodeEditor } from \"../CodeEditor/CodeEditor\";\nimport { computeReadonlyRanges } from \"./readonlyRanges\";\nimport { defaultTheme } from \"./defaultTheme\";\n\nexport interface JsonEditorProps {\n  /** The JSON string to display and edit. */\n  value: string;\n  /**\n   * JSON Pointer (RFC 6901) paths whose values are editable.\n   * Everything outside these paths is readonly.\n   * Example: [\"/metadata\", \"/definitions/Patient/description\"]\n   */\n  editablePaths: string[];\n  /** Called when the document changes (only editable regions can change). */\n  onChange?: (value: string) => void;\n  /** Editor height. Defaults to \"400px\". */\n  height?: string;\n  /** Additional CSS class on the wrapper. */\n  className?: string;\n  /**\n   * Make the editor fill its container's height. Sets height=\"100%\" and\n   * propagates the fill through CodeMirror's internal wrappers so the editor\n   * scrolls internally. Use when the container has an explicit height (e.g.\n   * `absolute inset-0` or `flex-1`). Prefer this over external `<style>` rules\n   * targeting CodeMirror's internal class names.\n   */\n  fillContainer?: boolean;\n  /**\n   * CodeMirror theme extension. Defaults to a built-in theme that reads\n   * CSS variables (--border, --font-mono, --muted) from the host app.\n   * Pass your own Extension to override styling entirely.\n   */\n  theme?: Extension;\n}\n\n// Decoration mark for readonly regions (subtle blue background)\nconst readonlyMark = Decoration.mark({ class: \"cm-readonly-region\" });\n\n/**\n * Build CodeMirror extensions that enforce editable regions:\n * - changeFilter: suppresses changes outside editable ranges\n * - StateField: decorates readonly regions with a visual style\n */\nfunction buildEditableExtensions(editablePaths: string[]) {\n  // changeFilter: recompute editable ranges from the live document on every\n  // transaction so offsets remain accurate as the user types. Using a snapshot\n  // from mount time would cause ranges to drift and incorrectly block edits.\n  const changeFilter = EditorState.changeFilter.of((tr) => {\n    const currentDoc = tr.startState.doc.toString();\n    const editableRanges = resolvePointerRanges(currentDoc, editablePaths);\n    const readonlyRanges = computeReadonlyRanges(\n      editableRanges,\n      tr.startState.doc.length,\n    );\n    // Empty readonly list means the whole document is editable -- return true\n    // to allow all changes. An empty array would block everything.\n    if (readonlyRanges.length === 0) return true;\n    return readonlyRanges.flatMap((r) => [r.from, r.to]);\n  });\n\n  // Decorations: mark readonly regions with a subtle background.\n  // Recomputed from the live document on every change so highlights stay\n  // accurate as content shifts.\n  const readonlyDecorations = StateField.define<DecorationSet>({\n    create(state) {\n      const editableRanges = resolvePointerRanges(\n        state.doc.toString(),\n        editablePaths,\n      );\n      const ranges = computeReadonlyRanges(editableRanges, state.doc.length);\n      return Decoration.set(\n        ranges.map((r) => readonlyMark.range(r.from, r.to)),\n      );\n    },\n    update(deco, tr) {\n      if (!tr.docChanged) return deco;\n      const editableRanges = resolvePointerRanges(\n        tr.state.doc.toString(),\n        editablePaths,\n      );\n      const ranges = computeReadonlyRanges(editableRanges, tr.state.doc.length);\n      return Decoration.set(\n        ranges.map((r) => readonlyMark.range(r.from, r.to)),\n      );\n    },\n    provide: (field) => EditorView.decorations.from(field),\n  });\n\n  return [changeFilter, readonlyDecorations];\n}\n\n/**\n * JsonEditor - A JSON text editor with selectively editable regions.\n *\n * Pass JSON Pointer paths to `editablePaths` to mark which parts of\n * the document the user can modify. Everything else is visible but\n * locked. Changes outside editable regions are silently rejected.\n *\n * A CodeEditor with the JSON language and the locking extensions. The default\n * theme reads CSS variables from @petrarca/sonnet-ui/styles.css; pass a custom\n * `theme` extension to override styling for consumers that do not use\n * sonnet-ui tokens.\n */\nexport default function JsonEditor({\n  value,\n  editablePaths,\n  onChange,\n  height = \"400px\",\n  className,\n  theme = defaultTheme,\n  fillContainer = false,\n}: JsonEditorProps) {\n  // Ranges are structural: recompute only when the set of editable paths\n  // changes, not on every keystroke.\n  const joinedPaths = editablePaths.join(\",\");\n\n  const extensions = useMemo(\n    () => [json(), ...buildEditableExtensions(editablePaths)],\n    [joinedPaths], // eslint-disable-line react-hooks/exhaustive-deps\n  );\n\n  return (\n    <CodeEditor\n      value={value}\n      onChange={onChange}\n      height={height}\n      fillContainer={fillContainer}\n      theme={theme}\n      extensions={extensions}\n      className={className}\n    />\n  );\n}\n","/**\n * Editable-region maths for JsonEditor.\n *\n * Pure functions, kept out of the component file so it exports only components\n * (Fast Refresh) and so the inversion is directly testable. Not re-exported\n * from the package root -- these are internals, like the table's column\n * resolver.\n */\n\nimport type { OffsetRange } from \"@petrarca/sonnet-core\";\n\n/**\n * Normalize ranges into a sorted, non-overlapping set.\n *\n * Inversion walks a single cursor forward, so it is only correct for input that\n * is already sorted and disjoint. Neither holds in general: a caller may pass a\n * pointer together with one nested inside it -- `/metadata` and\n * `/metadata/version` -- which is a reasonable way to say \"this object is\n * editable, and so is this field within it\". Merging first makes the inversion\n * correct for any input rather than for input that happens to satisfy an\n * unstated precondition.\n */\nfunction mergeRanges(ranges: OffsetRange[]): { from: number; to: number }[] {\n  const sorted = [...ranges].sort((a, b) => a.from - b.from);\n  const merged: { from: number; to: number }[] = [];\n  for (const range of sorted) {\n    const last = merged[merged.length - 1];\n    // `<=` also folds ranges that merely touch, so the inversion emits no\n    // zero-width readonly slivers between them.\n    if (last && range.from <= last.to) {\n      last.to = Math.max(last.to, range.to);\n    } else {\n      merged.push({ from: range.from, to: range.to });\n    }\n  }\n  return merged;\n}\n\n/**\n * Compute readonly ranges from editable ranges (inversion against doc length).\n * Used by both the changeFilter and the decoration builder.\n */\nexport function computeReadonlyRanges(\n  editableRanges: OffsetRange[],\n  docLength: number,\n): { from: number; to: number }[] {\n  const ranges: { from: number; to: number }[] = [];\n  let cursor = 0;\n  for (const range of mergeRanges(editableRanges)) {\n    if (cursor < range.from) {\n      ranges.push({ from: cursor, to: range.from });\n    }\n    cursor = range.to;\n  }\n  if (cursor < docLength) {\n    ranges.push({ from: cursor, to: docLength });\n  }\n  return ranges;\n}\n","import { EditorView } from \"@codemirror/view\";\nimport type { Extension } from \"@codemirror/state\";\nimport { codeTheme } from \"../CodeEditor/theme\";\n\n/**\n * Default theme for JsonEditor: the CodeEditor look (design tokens from\n * @petrarca/sonnet-ui/styles.css), plus the JSON editor's own marks -- the\n * locked regions, and no active-line band (it would read as a lock).\n *\n * Consumers not using sonnet-ui tokens can pass their own Extension\n * via the JsonEditor `theme` prop to override this entirely.\n */\nexport const defaultTheme: Extension = [\n  codeTheme,\n  EditorView.theme({\n    \".cm-readonly-region\": {\n      backgroundColor: \"hsl(var(--state-selected) / 0.5)\",\n      opacity: \"0.7\",\n    },\n    \".cm-activeLine\": {\n      backgroundColor: \"transparent\",\n    },\n    \".cm-activeLineGutter\": {\n      backgroundColor: \"transparent\",\n    },\n  }),\n];\n"],"mappings":"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","names":["EditorView","EditorView"]}

package/dist/markdown/index.d.ts

@@ -0,0 +1,67 @@
+import React__default from 'react';
+
+/** A link's target within the document's set: a path and an optional fragment. */
+interface DocumentTarget {
+    /** The path, without a leading "/" ("server/docs/ontology.md"). */
+    path: string;
+    /** The part after "#", if any. */
+    fragment?: string;
+}
+
+interface MarkdownViewerProps {
+    /** The Markdown text. */
+    content: string;
+    /** Draw ```mermaid blocks as diagrams. Default true. */
+    diagrams?: boolean;
+    /**
+     * A leading YAML front-matter block (between --- lines): shown as YAML above
+     * the document ("show", default), or left out ("hide"). Never rendered as
+     * Markdown, where it would read as a rule and a heading.
+     */
+    frontmatter?: "show" | "hide";
+    /**
+     * Where the document lives, as a path in its set of files
+     * ("server/docs/guide.md"): its relative links resolve against it.
+     */
+    documentPath?: string;
+    /**
+     * A link to another document of the set, given its resolved path (and
+     * #fragment): the element to render, e.g. a router link opening that file.
+     * With documentPath; without it, such links stay as written.
+     */
+    renderDocumentLink?: (target: DocumentTarget, children: React__default.ReactNode) => React__default.ReactNode;
+    /**
+     * A section to show: the document scrolls to the heading with this id (as
+     * GitHub makes them: "## Getting started" is "getting-started"), e.g. the
+     * #fragment of the link that opened it.
+     */
+    fragment?: string;
+    /**
+     * The text is still arriving (a chat answer): incomplete Markdown is closed
+     * as it streams and new text fades in. Default false (a whole document).
+     */
+    streaming?: boolean;
+    className?: string;
+}
+/**
+ * MarkdownViewer -- Markdown rendered for reading: GitHub-flavoured (tables,
+ * task lists, strikethrough), code blocks in the sonnet CodeEditor, Mermaid
+ * diagrams (loaded only when a document has one), and a leading front-matter
+ * block as YAML.
+ *
+ * Content is treated as untrusted: raw HTML is sanitized (no script, no event
+ * handlers or styles), unsafe links and images are blocked, links ask before
+ * leaving, and diagrams render at Mermaid's strict security level. None of
+ * this can be loosened through the props.
+ *
+ * Built on Streamdown, which stays an implementation detail: the props name no
+ * Streamdown concept, so it can be replaced here without touching an app.
+ *
+ * Usage:
+ *   <MarkdownViewer content={readme} />
+ *   <MarkdownViewer content={answer} streaming={isStreaming} />
+ */
+declare function MarkdownViewer({ content, diagrams, frontmatter, documentPath, renderDocumentLink, fragment, streaming, className, }: MarkdownViewerProps): React__default.ReactElement;
+
+export { MarkdownViewer };
+export type { DocumentTarget, MarkdownViewerProps };

package/dist/markdown/index.js

@@ -0,0 +1,237 @@
+import {
+  CopyButton
+} from "../chunk-ZQAHSGOS.js";
+import {
+  CodeEditor
+} from "../chunk-JDD3LLTR.js";
+
+// src/MarkdownViewer/MarkdownViewer.tsx
+import { useEffect, useMemo, useRef } from "react";
+import { Streamdown } from "streamdown";
+import { cn } from "@petrarca/sonnet-core";
+import { useTheme } from "@petrarca/sonnet-core/hooks";
+
+// src/MarkdownViewer/mermaid.ts
+var DEFAULTS = {
+  startOnLoad: false,
+  theme: "default",
+  securityLevel: "strict",
+  fontFamily: "monospace",
+  suppressErrorRendering: true
+};
+function asMermaidConfig(config) {
+  return { ...config, securityLevel: "strict" };
+}
+var mermaidModule;
+var loadMermaid = () => mermaidModule ??= import("mermaid");
+var lazyMermaid = {
+  name: "mermaid",
+  type: "diagram",
+  language: "mermaid",
+  getMermaid(config) {
+    const settings = { ...DEFAULTS, ...asMermaidConfig(config) };
+    let initialized = false;
+    return {
+      initialize(next) {
+        Object.assign(settings, asMermaidConfig(next));
+        initialized = false;
+      },
+      async render(id, source) {
+        const mermaid = (await loadMermaid()).default;
+        if (!initialized) {
+          mermaid.initialize(settings);
+          initialized = true;
+        }
+        return mermaid.render(id, source);
+      }
+    };
+  }
+};
+
+// src/MarkdownViewer/MarkdownCode.tsx
+import { createElement } from "react";
+import { defaultComponents } from "streamdown";
+import { jsx, jsxs } from "react/jsx-runtime";
+function languageOf(className) {
+  return className?.match(/language-([\w+#-]+)/)?.[1];
+}
+function MarkdownCode(props) {
+  const language = languageOf(props.className);
+  if (!props["data-block"] || language === "mermaid") {
+    return createElement(
+      defaultComponents.code,
+      props
+    );
+  }
+  const text = String(props.children ?? "").replace(/\n$/, "");
+  return /* @__PURE__ */ jsxs("div", { className: "group/code relative my-4", "data-language": language, children: [
+    /* @__PURE__ */ jsx(
+      CodeEditor,
+      {
+        value: text,
+        language,
+        readOnly: true,
+        variant: "compact",
+        maxHeight: "24rem",
+        "aria-label": language ? `${language} code` : "Code"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      CopyButton,
+      {
+        value: text,
+        label: "Copy code",
+        className: "absolute right-1 top-1 opacity-0 transition-opacity group-hover/code:opacity-100 focus-visible:opacity-100"
+      }
+    )
+  ] });
+}
+
+// src/MarkdownViewer/frontmatter.ts
+var FRONTMATTER = /^---[ \t]*\r?\n([\s\S]*?)\r?\n(?:---|\.\.\.)[ \t]*(?:\r?\n|$)/;
+function splitFrontmatter(text) {
+  const match = FRONTMATTER.exec(text);
+  return match ? { yaml: match[1], body: text.slice(match[0].length) } : { body: text };
+}
+
+// src/MarkdownViewer/documentLinks.tsx
+import { createElement as createElement2 } from "react";
+import {
+  defaultComponents as defaultComponents2,
+  defaultRehypePlugins
+} from "streamdown";
+import rehypeSlug from "rehype-slug";
+import { jsxs as jsxs2 } from "react/jsx-runtime";
+var DOCUMENT_ORIGIN = "https://document.invalid";
+function rehypePluginsFor(documentPath) {
+  const defaults = Object.entries(defaultRehypePlugins).map(
+    ([name, plugin]) => {
+      if (!documentPath || name !== "harden" || !Array.isArray(plugin)) {
+        return plugin;
+      }
+      const [harden, options] = plugin;
+      return [
+        harden,
+        {
+          ...options,
+          defaultOrigin: `${DOCUMENT_ORIGIN}/${documentPath.replace(/^\/+/, "")}`
+        }
+      ];
+    }
+  );
+  return [...defaults, rehypeSlug];
+}
+function targetOf(href, documentPath) {
+  if (!href) return void 0;
+  if (href.startsWith("#")) {
+    return href.length > 1 ? { path: documentPath, fragment: decodeURIComponent(href.slice(1)) } : void 0;
+  }
+  const local = href.startsWith(DOCUMENT_ORIGIN) ? href.slice(DOCUMENT_ORIGIN.length) : href.startsWith("/") && !href.startsWith("//") ? href : void 0;
+  if (local === void 0) return void 0;
+  const [path, fragment] = local.replace(/^\/+/, "").split("#", 2);
+  return {
+    path: decodeURIComponent(path),
+    ...fragment ? { fragment: decodeURIComponent(fragment) } : {}
+  };
+}
+function documentComponents(documentPath, renderLink) {
+  return {
+    a: (props) => {
+      const target = targetOf(props.href, documentPath);
+      return target ? renderLink(target, props.children) : createElement2(
+        defaultComponents2.a,
+        props
+      );
+    },
+    // An image in the document's set has no address the app can load from.
+    img: (props) => targetOf(props.src, documentPath) ? /* @__PURE__ */ jsxs2("span", { className: "text-xs text-muted-foreground", children: [
+      "[Image:",
+      " ",
+      props.alt || targetOf(props.src, documentPath)?.path,
+      "]"
+    ] }) : createElement2(
+      defaultComponents2.img,
+      props
+    )
+  };
+}
+
+// src/MarkdownViewer/MarkdownViewer.tsx
+import { jsx as jsx2, jsxs as jsxs3 } from "react/jsx-runtime";
+var PLUGINS_WITH_DIAGRAMS = { mermaid: lazyMermaid };
+var MERMAID_THEMES = {
+  light: { config: { theme: "default" } },
+  dark: { config: { theme: "dark" } }
+};
+var COMPONENTS = { code: MarkdownCode };
+function useDocumentSetup(documentPath, renderDocumentLink) {
+  return useMemo(
+    () => documentPath && renderDocumentLink ? {
+      components: {
+        ...COMPONENTS,
+        ...documentComponents(documentPath, renderDocumentLink)
+      },
+      rehypePlugins: rehypePluginsFor(documentPath)
+    } : { components: COMPONENTS, rehypePlugins: rehypePluginsFor() },
+    [documentPath, renderDocumentLink]
+  );
+}
+function useScrollToFragment(fragment, body) {
+  const ref = useRef(null);
+  useEffect(() => {
+    if (!fragment || !ref.current) return;
+    const heading = Array.from(ref.current.querySelectorAll("[id]")).find(
+      (el) => el.id === fragment
+    );
+    heading?.scrollIntoView({ block: "start" });
+  }, [fragment, body]);
+  return ref;
+}
+function MarkdownViewer({
+  content,
+  diagrams = true,
+  frontmatter = "show",
+  documentPath,
+  renderDocumentLink,
+  fragment,
+  streaming = false,
+  className
+}) {
+  const { yaml, body } = splitFrontmatter(content);
+  const { components, rehypePlugins } = useDocumentSetup(
+    documentPath,
+    renderDocumentLink
+  );
+  const ref = useScrollToFragment(fragment, body);
+  const { theme } = useTheme();
+  return /* @__PURE__ */ jsxs3("div", { ref, className: cn("sonnet-markdown text-sm", className), children: [
+    yaml && frontmatter === "show" && /* @__PURE__ */ jsx2(
+      CodeEditor,
+      {
+        value: yaml,
+        language: "yaml",
+        readOnly: true,
+        variant: "compact",
+        className: "mb-4",
+        "aria-label": "Front matter"
+      }
+    ),
+    /* @__PURE__ */ jsx2(
+      Streamdown,
+      {
+        mode: streaming ? "streaming" : "static",
+        isAnimating: streaming,
+        plugins: diagrams ? PLUGINS_WITH_DIAGRAMS : void 0,
+        mermaid: MERMAID_THEMES[theme],
+        components,
+        rehypePlugins,
+        children: body
+      },
+      theme
+    )
+  ] });
+}
+export {
+  MarkdownViewer
+};
+//# sourceMappingURL=index.js.map

package/dist/markdown/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/MarkdownViewer/MarkdownViewer.tsx","../../src/MarkdownViewer/mermaid.ts","../../src/MarkdownViewer/MarkdownCode.tsx","../../src/MarkdownViewer/frontmatter.ts","../../src/MarkdownViewer/documentLinks.tsx"],"sourcesContent":["import React, { useEffect, useMemo, useRef } from \"react\";\nimport { Streamdown } from \"streamdown\";\nimport { cn } from \"@petrarca/sonnet-core\";\nimport { useTheme } from \"@petrarca/sonnet-core/hooks\";\nimport { CodeEditor } from \"../CodeEditor/CodeEditor\";\nimport { lazyMermaid } from \"./mermaid\";\nimport { MarkdownCode } from \"./MarkdownCode\";\nimport { splitFrontmatter } from \"./frontmatter\";\nimport {\n  documentComponents,\n  rehypePluginsFor,\n  type DocumentTarget,\n} from \"./documentLinks\";\n\nexport interface MarkdownViewerProps {\n  /** The Markdown text. */\n  content: string;\n  /** Draw ```mermaid blocks as diagrams. Default true. */\n  diagrams?: boolean;\n  /**\n   * A leading YAML front-matter block (between --- lines): shown as YAML above\n   * the document (\"show\", default), or left out (\"hide\"). Never rendered as\n   * Markdown, where it would read as a rule and a heading.\n   */\n  frontmatter?: \"show\" | \"hide\";\n  /**\n   * Where the document lives, as a path in its set of files\n   * (\"server/docs/guide.md\"): its relative links resolve against it.\n   */\n  documentPath?: string;\n  /**\n   * A link to another document of the set, given its resolved path (and\n   * #fragment): the element to render, e.g. a router link opening that file.\n   * With documentPath; without it, such links stay as written.\n   */\n  renderDocumentLink?: (\n    target: DocumentTarget,\n    children: React.ReactNode,\n  ) => React.ReactNode;\n  /**\n   * A section to show: the document scrolls to the heading with this id (as\n   * GitHub makes them: \"## Getting started\" is \"getting-started\"), e.g. the\n   * #fragment of the link that opened it.\n   */\n  fragment?: string;\n  /**\n   * The text is still arriving (a chat answer): incomplete Markdown is closed\n   * as it streams and new text fades in. Default false (a whole document).\n   */\n  streaming?: boolean;\n  className?: string;\n}\n\nconst PLUGINS_WITH_DIAGRAMS = { mermaid: lazyMermaid };\n// Diagrams in Mermaid's theme for the page's: its dark one on the dark tokens.\nconst MERMAID_THEMES = {\n  light: { config: { theme: \"default\" as const } },\n  dark: { config: { theme: \"dark\" as const } },\n};\nconst COMPONENTS = { code: MarkdownCode };\n\n// The elements and plugins for a document: its own links, when it has a place.\nfunction useDocumentSetup(\n  documentPath: string | undefined,\n  renderDocumentLink: MarkdownViewerProps[\"renderDocumentLink\"],\n) {\n  return useMemo(\n    () =>\n      documentPath && renderDocumentLink\n        ? {\n            components: {\n              ...COMPONENTS,\n              ...documentComponents(documentPath, renderDocumentLink),\n            },\n            rehypePlugins: rehypePluginsFor(documentPath),\n          }\n        : { components: COMPONENTS, rehypePlugins: rehypePluginsFor() },\n    [documentPath, renderDocumentLink],\n  );\n}\n\n// Scroll to the heading `fragment` names, once the document shows it.\nfunction useScrollToFragment(\n  fragment: string | undefined,\n  body: string,\n): React.RefObject<HTMLDivElement | null> {\n  const ref = useRef<HTMLDivElement>(null);\n  useEffect(() => {\n    if (!fragment || !ref.current) return;\n    const heading = Array.from(ref.current.querySelectorAll(\"[id]\")).find(\n      (el) => el.id === fragment,\n    );\n    heading?.scrollIntoView({ block: \"start\" });\n  }, [fragment, body]);\n  return ref;\n}\n\n/**\n * MarkdownViewer -- Markdown rendered for reading: GitHub-flavoured (tables,\n * task lists, strikethrough), code blocks in the sonnet CodeEditor, Mermaid\n * diagrams (loaded only when a document has one), and a leading front-matter\n * block as YAML.\n *\n * Content is treated as untrusted: raw HTML is sanitized (no script, no event\n * handlers or styles), unsafe links and images are blocked, links ask before\n * leaving, and diagrams render at Mermaid's strict security level. None of\n * this can be loosened through the props.\n *\n * Built on Streamdown, which stays an implementation detail: the props name no\n * Streamdown concept, so it can be replaced here without touching an app.\n *\n * Usage:\n *   <MarkdownViewer content={readme} />\n *   <MarkdownViewer content={answer} streaming={isStreaming} />\n */\nexport function MarkdownViewer({\n  content,\n  diagrams = true,\n  frontmatter = \"show\",\n  documentPath,\n  renderDocumentLink,\n  fragment,\n  streaming = false,\n  className,\n}: MarkdownViewerProps): React.ReactElement {\n  const { yaml, body } = splitFrontmatter(content);\n  const { components, rehypePlugins } = useDocumentSetup(\n    documentPath,\n    renderDocumentLink,\n  );\n  const ref = useScrollToFragment(fragment, body);\n  const { theme } = useTheme();\n  return (\n    <div ref={ref} className={cn(\"sonnet-markdown text-sm\", className)}>\n      {yaml && frontmatter === \"show\" && (\n        <CodeEditor\n          value={yaml}\n          language=\"yaml\"\n          readOnly\n          variant=\"compact\"\n          className=\"mb-4\"\n          aria-label=\"Front matter\"\n        />\n      )}\n      {/* Keyed by the theme: Streamdown draws a diagram once, so a switch\n          redraws the document with the diagrams in the new theme. */}\n      <Streamdown\n        key={theme}\n        mode={streaming ? \"streaming\" : \"static\"}\n        isAnimating={streaming}\n        plugins={diagrams ? PLUGINS_WITH_DIAGRAMS : undefined}\n        mermaid={MERMAID_THEMES[theme]}\n        components={components}\n        rehypePlugins={rehypePlugins}\n      >\n        {body}\n      </Streamdown>\n    </div>\n  );\n}\n","import type { MermaidConfig } from \"mermaid\";\nimport type { DiagramPlugin } from \"streamdown\";\n\n/**\n * Mermaid for Streamdown, loaded only when a diagram is first drawn: Mermaid\n * is large, and most documents have no diagram. Same defaults as Streamdown's\n * own plugin -- notably securityLevel \"strict\", which keeps a diagram's text\n * from running script or reaching outside it.\n */\nconst DEFAULTS: MermaidConfig = {\n  startOnLoad: false,\n  theme: \"default\",\n  securityLevel: \"strict\",\n  fontFamily: \"monospace\",\n  suppressErrorRendering: true,\n};\n\n// Streamdown's view of a Mermaid config: Mermaid's own, with looser types.\ntype StreamdownConfig = Parameters<DiagramPlugin[\"getMermaid\"]>[0];\n\n// A config from Streamdown, as Mermaid's own -- strict security always wins.\nfunction asMermaidConfig(config: StreamdownConfig): MermaidConfig {\n  return { ...(config as MermaidConfig), securityLevel: \"strict\" };\n}\n\n// One Mermaid instance per app; initialized before each first use of a config.\nlet mermaidModule: Promise<typeof import(\"mermaid\")> | undefined;\nconst loadMermaid = () => (mermaidModule ??= import(\"mermaid\"));\n\nexport const lazyMermaid: DiagramPlugin = {\n  name: \"mermaid\",\n  type: \"diagram\",\n  language: \"mermaid\",\n  getMermaid(config?: StreamdownConfig) {\n    const settings: MermaidConfig = { ...DEFAULTS, ...asMermaidConfig(config) };\n    let initialized = false;\n    return {\n      initialize(next) {\n        Object.assign(settings, asMermaidConfig(next));\n        initialized = false;\n      },\n      async render(id, source) {\n        const mermaid = (await loadMermaid()).default;\n        if (!initialized) {\n          mermaid.initialize(settings);\n          initialized = true;\n        }\n        return mermaid.render(id, source);\n      },\n    };\n  },\n};\n","import React, { createElement } from \"react\";\nimport { defaultComponents } from \"streamdown\";\nimport { CodeEditor } from \"../CodeEditor/CodeEditor\";\nimport { CopyButton } from \"../copy-button\";\n\ntype CodeProps = React.ComponentProps<\"code\"> & { \"data-block\"?: unknown };\n\n// The language a fenced block names (\"language-python\" -> \"python\").\nfunction languageOf(className: string | undefined): string | undefined {\n  return className?.match(/language-([\\w+#-]+)/)?.[1];\n}\n\n/**\n * The `code` element of a Markdown document: a fenced block shows in the\n * sonnet CodeEditor (compact, read-only, the same colours as any code view)\n * with a copy button; inline code and diagram blocks (mermaid) stay\n * Streamdown's.\n */\nexport function MarkdownCode(props: CodeProps): React.ReactElement {\n  const language = languageOf(props.className);\n  if (!props[\"data-block\"] || language === \"mermaid\") {\n    return createElement(\n      defaultComponents.code as React.ComponentType<CodeProps>,\n      props,\n    );\n  }\n  const text = String(props.children ?? \"\").replace(/\\n$/, \"\");\n  return (\n    <div className=\"group/code relative my-4\" data-language={language}>\n      <CodeEditor\n        value={text}\n        language={language}\n        readOnly\n        variant=\"compact\"\n        maxHeight=\"24rem\"\n        aria-label={language ? `${language} code` : \"Code\"}\n      />\n      <CopyButton\n        value={text}\n        label=\"Copy code\"\n        className=\"absolute right-1 top-1 opacity-0 transition-opacity group-hover/code:opacity-100 focus-visible:opacity-100\"\n      />\n    </div>\n  );\n}\n","/** A document's leading YAML front matter (between --- lines), and the rest. */\nexport interface SplitDocument {\n  /** The front matter's YAML, without the --- lines; undefined when none. */\n  yaml?: string;\n  /** The Markdown after it (the whole text when there is none). */\n  body: string;\n}\n\n// A block opening the document: \"---\", lines, \"---\" (or \"...\"), each alone on\n// its line. An unclosed one (a document still streaming in) is not a block.\nconst FRONTMATTER =\n  /^---[ \\t]*\\r?\\n([\\s\\S]*?)\\r?\\n(?:---|\\.\\.\\.)[ \\t]*(?:\\r?\\n|$)/;\n\nexport function splitFrontmatter(text: string): SplitDocument {\n  const match = FRONTMATTER.exec(text);\n  return match\n    ? { yaml: match[1], body: text.slice(match[0].length) }\n    : { body: text };\n}\n","import React, { createElement } from \"react\";\nimport {\n  defaultComponents,\n  defaultRehypePlugins,\n  type StreamdownProps,\n} from \"streamdown\";\nimport rehypeSlug from \"rehype-slug\";\n\ntype RehypePlugins = NonNullable<StreamdownProps[\"rehypePlugins\"]>;\n\n/**\n * A document's relative links, resolved against where it lives.\n *\n * The sanitizer (rehype-harden) resolves every link and image against an\n * origin; given the document's address on a stand-in origin, a relative link\n * resolves to the path it names in the document's own set of files. The\n * stand-in uses the reserved .invalid domain, so it never reaches a network.\n */\nconst DOCUMENT_ORIGIN = \"https://document.invalid\";\n\n/** A link's target within the document's set: a path and an optional fragment. */\nexport interface DocumentTarget {\n  /** The path, without a leading \"/\" (\"server/docs/ontology.md\"). */\n  path: string;\n  /** The part after \"#\", if any. */\n  fragment?: string;\n}\n\n/**\n * The rehype plugins: the defaults, with links and images resolved against\n * `documentPath` when the document has one; then ids on the headings, as\n * GitHub makes them (\"## Getting started\" -> \"getting-started\"), so a link to\n * a section finds it. The ids are added after sanitizing, from the heading text.\n */\nexport function rehypePluginsFor(documentPath?: string): RehypePlugins {\n  const defaults = Object.entries(defaultRehypePlugins).map(\n    ([name, plugin]) => {\n      if (!documentPath || name !== \"harden\" || !Array.isArray(plugin)) {\n        return plugin;\n      }\n      const [harden, options] = plugin;\n      return [\n        harden,\n        {\n          ...(options as object),\n          defaultOrigin: `${DOCUMENT_ORIGIN}/${documentPath.replace(/^\\/+/, \"\")}`,\n        },\n      ] as RehypePlugins[number];\n    },\n  );\n  return [...defaults, rehypeSlug];\n}\n\n// The target a resolved href names within the document's set, if it does: on\n// the stand-in origin, or a bare path (how the sanitizer returns some); a\n// \"#section\" link names a section of the document itself.\nfunction targetOf(\n  href: string | undefined,\n  documentPath: string,\n): DocumentTarget | undefined {\n  if (!href) return undefined;\n  if (href.startsWith(\"#\")) {\n    return href.length > 1\n      ? { path: documentPath, fragment: decodeURIComponent(href.slice(1)) }\n      : undefined;\n  }\n  const local = href.startsWith(DOCUMENT_ORIGIN)\n    ? href.slice(DOCUMENT_ORIGIN.length)\n    : href.startsWith(\"/\") && !href.startsWith(\"//\")\n      ? href\n      : undefined;\n  if (local === undefined) return undefined;\n  const [path, fragment] = local.replace(/^\\/+/, \"\").split(\"#\", 2);\n  return {\n    path: decodeURIComponent(path),\n    ...(fragment ? { fragment: decodeURIComponent(fragment) } : {}),\n  };\n}\n\ntype AnchorProps = React.ComponentProps<\"a\">;\ntype ImageProps = React.ComponentProps<\"img\">;\n\n/** The link and image elements for a document whose links stay in the app. */\nexport function documentComponents(\n  documentPath: string,\n  renderLink: (\n    target: DocumentTarget,\n    children: React.ReactNode,\n  ) => React.ReactNode,\n) {\n  return {\n    a: (props: AnchorProps) => {\n      const target = targetOf(props.href, documentPath);\n      return target\n        ? renderLink(target, props.children)\n        : createElement(\n            defaultComponents.a as React.ComponentType<AnchorProps>,\n            props,\n          );\n    },\n    // An image in the document's set has no address the app can load from.\n    img: (props: ImageProps) =>\n      targetOf(props.src as string | undefined, documentPath) ? (\n        <span className=\"text-xs text-muted-foreground\">\n          [Image:{\" \"}\n          {props.alt || targetOf(props.src as string, documentPath)?.path}]\n        </span>\n      ) : (\n        createElement(\n          defaultComponents.img as React.ComponentType<ImageProps>,\n          props,\n        )\n      ),\n  };\n}\n"],"mappings":";;;;;;;;AAAA,SAAgB,WAAW,SAAS,cAAc;AAClD,SAAS,kBAAkB;AAC3B,SAAS,UAAU;AACnB,SAAS,gBAAgB;;;ACMzB,IAAM,WAA0B;AAAA,EAC9B,aAAa;AAAA,EACb,OAAO;AAAA,EACP,eAAe;AAAA,EACf,YAAY;AAAA,EACZ,wBAAwB;AAC1B;AAMA,SAAS,gBAAgB,QAAyC;AAChE,SAAO,EAAE,GAAI,QAA0B,eAAe,SAAS;AACjE;AAGA,IAAI;AACJ,IAAM,cAAc,MAAO,kBAAkB,OAAO,SAAS;AAEtD,IAAM,cAA6B;AAAA,EACxC,MAAM;AAAA,EACN,MAAM;AAAA,EACN,UAAU;AAAA,EACV,WAAW,QAA2B;AACpC,UAAM,WAA0B,EAAE,GAAG,UAAU,GAAG,gBAAgB,MAAM,EAAE;AAC1E,QAAI,cAAc;AAClB,WAAO;AAAA,MACL,WAAW,MAAM;AACf,eAAO,OAAO,UAAU,gBAAgB,IAAI,CAAC;AAC7C,sBAAc;AAAA,MAChB;AAAA,MACA,MAAM,OAAO,IAAI,QAAQ;AACvB,cAAM,WAAW,MAAM,YAAY,GAAG;AACtC,YAAI,CAAC,aAAa;AAChB,kBAAQ,WAAW,QAAQ;AAC3B,wBAAc;AAAA,QAChB;AACA,eAAO,QAAQ,OAAO,IAAI,MAAM;AAAA,MAClC;AAAA,IACF;AAAA,EACF;AACF;;;ACnDA,SAAgB,qBAAqB;AACrC,SAAS,yBAAyB;AA2B9B,SACE,KADF;AApBJ,SAAS,WAAW,WAAmD;AACrE,SAAO,WAAW,MAAM,qBAAqB,IAAI,CAAC;AACpD;AAQO,SAAS,aAAa,OAAsC;AACjE,QAAM,WAAW,WAAW,MAAM,SAAS;AAC3C,MAAI,CAAC,MAAM,YAAY,KAAK,aAAa,WAAW;AAClD,WAAO;AAAA,MACL,kBAAkB;AAAA,MAClB;AAAA,IACF;AAAA,EACF;AACA,QAAM,OAAO,OAAO,MAAM,YAAY,EAAE,EAAE,QAAQ,OAAO,EAAE;AAC3D,SACE,qBAAC,SAAI,WAAU,4BAA2B,iBAAe,UACvD;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,OAAO;AAAA,QACP;AAAA,QACA,UAAQ;AAAA,QACR,SAAQ;AAAA,QACR,WAAU;AAAA,QACV,cAAY,WAAW,GAAG,QAAQ,UAAU;AAAA;AAAA,IAC9C;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,OAAO;AAAA,QACP,OAAM;AAAA,QACN,WAAU;AAAA;AAAA,IACZ;AAAA,KACF;AAEJ;;;AClCA,IAAM,cACJ;AAEK,SAAS,iBAAiB,MAA6B;AAC5D,QAAM,QAAQ,YAAY,KAAK,IAAI;AACnC,SAAO,QACH,EAAE,MAAM,MAAM,CAAC,GAAG,MAAM,KAAK,MAAM,MAAM,CAAC,EAAE,MAAM,EAAE,IACpD,EAAE,MAAM,KAAK;AACnB;;;AClBA,SAAgB,iBAAAA,sBAAqB;AACrC;AAAA,EACE,qBAAAC;AAAA,EACA;AAAA,OAEK;AACP,OAAO,gBAAgB;AAiGf,iBAAAC,aAAA;AArFR,IAAM,kBAAkB;AAgBjB,SAAS,iBAAiB,cAAsC;AACrE,QAAM,WAAW,OAAO,QAAQ,oBAAoB,EAAE;AAAA,IACpD,CAAC,CAAC,MAAM,MAAM,MAAM;AAClB,UAAI,CAAC,gBAAgB,SAAS,YAAY,CAAC,MAAM,QAAQ,MAAM,GAAG;AAChE,eAAO;AAAA,MACT;AACA,YAAM,CAAC,QAAQ,OAAO,IAAI;AAC1B,aAAO;AAAA,QACL;AAAA,QACA;AAAA,UACE,GAAI;AAAA,UACJ,eAAe,GAAG,eAAe,IAAI,aAAa,QAAQ,QAAQ,EAAE,CAAC;AAAA,QACvE;AAAA,MACF;AAAA,IACF;AAAA,EACF;AACA,SAAO,CAAC,GAAG,UAAU,UAAU;AACjC;AAKA,SAAS,SACP,MACA,cAC4B;AAC5B,MAAI,CAAC,KAAM,QAAO;AAClB,MAAI,KAAK,WAAW,GAAG,GAAG;AACxB,WAAO,KAAK,SAAS,IACjB,EAAE,MAAM,cAAc,UAAU,mBAAmB,KAAK,MAAM,CAAC,CAAC,EAAE,IAClE;AAAA,EACN;AACA,QAAM,QAAQ,KAAK,WAAW,eAAe,IACzC,KAAK,MAAM,gBAAgB,MAAM,IACjC,KAAK,WAAW,GAAG,KAAK,CAAC,KAAK,WAAW,IAAI,IAC3C,OACA;AACN,MAAI,UAAU,OAAW,QAAO;AAChC,QAAM,CAAC,MAAM,QAAQ,IAAI,MAAM,QAAQ,QAAQ,EAAE,EAAE,MAAM,KAAK,CAAC;AAC/D,SAAO;AAAA,IACL,MAAM,mBAAmB,IAAI;AAAA,IAC7B,GAAI,WAAW,EAAE,UAAU,mBAAmB,QAAQ,EAAE,IAAI,CAAC;AAAA,EAC/D;AACF;AAMO,SAAS,mBACd,cACA,YAIA;AACA,SAAO;AAAA,IACL,GAAG,CAAC,UAAuB;AACzB,YAAM,SAAS,SAAS,MAAM,MAAM,YAAY;AAChD,aAAO,SACH,WAAW,QAAQ,MAAM,QAAQ,IACjCF;AAAA,QACEC,mBAAkB;AAAA,QAClB;AAAA,MACF;AAAA,IACN;AAAA;AAAA,IAEA,KAAK,CAAC,UACJ,SAAS,MAAM,KAA2B,YAAY,IACpD,gBAAAC,MAAC,UAAK,WAAU,iCAAgC;AAAA;AAAA,MACtC;AAAA,MACP,MAAM,OAAO,SAAS,MAAM,KAAe,YAAY,GAAG;AAAA,MAAK;AAAA,OAClE,IAEAF;AAAA,MACEC,mBAAkB;AAAA,MAClB;AAAA,IACF;AAAA,EAEN;AACF;;;AJmBI,SAEI,OAAAE,MAFJ,QAAAC,aAAA;AAhFJ,IAAM,wBAAwB,EAAE,SAAS,YAAY;AAErD,IAAM,iBAAiB;AAAA,EACrB,OAAO,EAAE,QAAQ,EAAE,OAAO,UAAmB,EAAE;AAAA,EAC/C,MAAM,EAAE,QAAQ,EAAE,OAAO,OAAgB,EAAE;AAC7C;AACA,IAAM,aAAa,EAAE,MAAM,aAAa;AAGxC,SAAS,iBACP,cACA,oBACA;AACA,SAAO;AAAA,IACL,MACE,gBAAgB,qBACZ;AAAA,MACE,YAAY;AAAA,QACV,GAAG;AAAA,QACH,GAAG,mBAAmB,cAAc,kBAAkB;AAAA,MACxD;AAAA,MACA,eAAe,iBAAiB,YAAY;AAAA,IAC9C,IACA,EAAE,YAAY,YAAY,eAAe,iBAAiB,EAAE;AAAA,IAClE,CAAC,cAAc,kBAAkB;AAAA,EACnC;AACF;AAGA,SAAS,oBACP,UACA,MACwC;AACxC,QAAM,MAAM,OAAuB,IAAI;AACvC,YAAU,MAAM;AACd,QAAI,CAAC,YAAY,CAAC,IAAI,QAAS;AAC/B,UAAM,UAAU,MAAM,KAAK,IAAI,QAAQ,iBAAiB,MAAM,CAAC,EAAE;AAAA,MAC/D,CAAC,OAAO,GAAG,OAAO;AAAA,IACpB;AACA,aAAS,eAAe,EAAE,OAAO,QAAQ,CAAC;AAAA,EAC5C,GAAG,CAAC,UAAU,IAAI,CAAC;AACnB,SAAO;AACT;AAoBO,SAAS,eAAe;AAAA,EAC7B;AAAA,EACA,WAAW;AAAA,EACX,cAAc;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ;AACF,GAA4C;AAC1C,QAAM,EAAE,MAAM,KAAK,IAAI,iBAAiB,OAAO;AAC/C,QAAM,EAAE,YAAY,cAAc,IAAI;AAAA,IACpC;AAAA,IACA;AAAA,EACF;AACA,QAAM,MAAM,oBAAoB,UAAU,IAAI;AAC9C,QAAM,EAAE,MAAM,IAAI,SAAS;AAC3B,SACE,gBAAAA,MAAC,SAAI,KAAU,WAAW,GAAG,2BAA2B,SAAS,GAC9D;AAAA,YAAQ,gBAAgB,UACvB,gBAAAD;AAAA,MAAC;AAAA;AAAA,QACC,OAAO;AAAA,QACP,UAAS;AAAA,QACT,UAAQ;AAAA,QACR,SAAQ;AAAA,QACR,WAAU;AAAA,QACV,cAAW;AAAA;AAAA,IACb;AAAA,IAIF,gBAAAA;AAAA,MAAC;AAAA;AAAA,QAEC,MAAM,YAAY,cAAc;AAAA,QAChC,aAAa;AAAA,QACb,SAAS,WAAW,wBAAwB;AAAA,QAC5C,SAAS,eAAe,KAAK;AAAA,QAC7B;AAAA,QACA;AAAA,QAEC;AAAA;AAAA,MARI;AAAA,IASP;AAAA,KACF;AAEJ;","names":["createElement","defaultComponents","jsxs","jsx","jsxs"]}