@tangle-network/ui 11.8.0 → 11.9.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @tangle-network/ui
 
+## 11.9.0
+
+### Minor Changes
+
+- b047084: Expose react-markdown's typed `urlTransform` hook through the shared Markdown component.
+
 ## 11.8.0
 
 ### Minor Changes

package/dist/chat.js

@@ -5,19 +5,19 @@ import {
   MessageList,
   ThinkingIndicator,
   UserMessage
-} from "./chunk-X53RZSX6.js";
+} from "./chunk-7YOCS6IF.js";
 import "./chunk-565EATZZ.js";
-import "./chunk-OXZRCXJK.js";
+import "./chunk-TN4FUEWY.js";
 import "./chunk-KNYSKNZX.js";
 import "./chunk-ND3ZFXQK.js";
 import "./chunk-NWECTSOH.js";
 import "./chunk-L57WRIND.js";
-import "./chunk-3M7BPSSW.js";
+import "./chunk-3TI5DEHV.js";
 import "./chunk-GYPQXTJU.js";
 import "./chunk-4CLN43XT.js";
 import "./chunk-XU3HB5QL.js";
 import "./chunk-MKTSMWVD.js";
-import "./chunk-P5F43A65.js";
+import "./chunk-EOAX2ENE.js";
 import "./chunk-WUQDUBJG.js";
 import "./chunk-RQHJBTEU.js";
 export {

package/dist/{chunk-3M7BPSSW.js → chunk-3TI5DEHV.js}

@@ -17,7 +17,7 @@ import {
 } from "./chunk-MKTSMWVD.js";
 import {
   Markdown
-} from "./chunk-P5F43A65.js";
+} from "./chunk-EOAX2ENE.js";
 import {
   CodeBlock
 } from "./chunk-WUQDUBJG.js";

package/dist/{chunk-X53RZSX6.js → chunk-7YOCS6IF.js}

@@ -6,7 +6,7 @@ import {
 import {
   InlineThinkingItem,
   RunGroup
-} from "./chunk-OXZRCXJK.js";
+} from "./chunk-TN4FUEWY.js";
 import {
   ToolCallGroup,
   ToolCallStep
@@ -16,10 +16,10 @@ import {
 } from "./chunk-ND3ZFXQK.js";
 import {
   OpenUIArtifactRenderer
-} from "./chunk-3M7BPSSW.js";
+} from "./chunk-3TI5DEHV.js";
 import {
   Markdown
-} from "./chunk-P5F43A65.js";
+} from "./chunk-EOAX2ENE.js";
 import {
   cn
 } from "./chunk-RQHJBTEU.js";

package/dist/{chunk-P5F43A65.js → chunk-EOAX2ENE.js}

@@ -12,7 +12,7 @@ import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 import rehypeSanitize from "rehype-sanitize";
 import { Fragment, jsx } from "react/jsx-runtime";
-var Markdown = memo(({ children, className }) => {
+var Markdown = memo(({ children, className, urlTransform }) => {
   return /* @__PURE__ */ jsx(
     "div",
     {
@@ -22,6 +22,7 @@ var Markdown = memo(({ children, className }) => {
         {
           remarkPlugins: [remarkGfm],
           rehypePlugins: [rehypeSanitize],
+          urlTransform,
           components: {
             pre({ children: preChildren }) {
               return /* @__PURE__ */ jsx(Fragment, { children: preChildren });

package/dist/{chunk-OXZRCXJK.js → chunk-TN4FUEWY.js}

@@ -8,14 +8,14 @@ import {
 } from "./chunk-L57WRIND.js";
 import {
   OpenUIArtifactRenderer
-} from "./chunk-3M7BPSSW.js";
+} from "./chunk-3TI5DEHV.js";
 import {
   formatDuration,
   truncateText
 } from "./chunk-4CLN43XT.js";
 import {
   Markdown
-} from "./chunk-P5F43A65.js";
+} from "./chunk-EOAX2ENE.js";
 import {
   cn
 } from "./chunk-RQHJBTEU.js";

package/dist/{chunk-BWOUSEHM.js → chunk-VPWY4I5O.js}

@@ -11,7 +11,7 @@ import {
 } from "./chunk-OEX7NZE3.js";
 import {
   parseToolEvent
-} from "./chunk-Q7ZR6LSD.js";
+} from "./chunk-XYAIX4SU.js";
 
 // src/hooks/use-dropdown-menu.ts
 import { useEffect, useRef, useState } from "react";

package/dist/{chunk-Q7ZR6LSD.js → chunk-XYAIX4SU.js}

@@ -4,7 +4,7 @@ import {
 } from "./chunk-KNYSKNZX.js";
 import {
   Markdown
-} from "./chunk-P5F43A65.js";
+} from "./chunk-EOAX2ENE.js";
 import {
   cn
 } from "./chunk-RQHJBTEU.js";

package/dist/{chunk-XGOWUDDW.js → chunk-YJ6RE5WV.js}

@@ -16,7 +16,7 @@ import {
 } from "./chunk-LTEKI7YJ.js";
 import {
   Markdown
-} from "./chunk-P5F43A65.js";
+} from "./chunk-EOAX2ENE.js";
 import {
   CodeBlock,
   CopyButton
@@ -719,7 +719,7 @@ import { lazy, Suspense } from "react";
 import { Download as Download2, X as X3 } from "lucide-react";
 import { Fragment, jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
 var LazyDocumentEditorPane = lazy(async () => {
-  const module = await import("./document-editor-pane-A3JURPW5.js");
+  const module = await import("./document-editor-pane-EX25CEYW.js");
   return { default: module.DocumentEditorPane };
 });
 function FileArtifactPane({

package/dist/{chunk-QGTIBEPX.js → chunk-ZKCEAIIZ.js}

@@ -9,7 +9,7 @@ import {
 } from "./chunk-LTEKI7YJ.js";
 import {
   Markdown
-} from "./chunk-P5F43A65.js";
+} from "./chunk-EOAX2ENE.js";
 import {
   cn
 } from "./chunk-RQHJBTEU.js";

package/dist/{document-editor-pane-A3JURPW5.js → document-editor-pane-EX25CEYW.js}

@@ -1,10 +1,10 @@
 "use client";
 import {
   DocumentEditorPane
-} from "./chunk-QGTIBEPX.js";
+} from "./chunk-ZKCEAIIZ.js";
 import "./chunk-Q56BYXQF.js";
 import "./chunk-LTEKI7YJ.js";
-import "./chunk-P5F43A65.js";
+import "./chunk-EOAX2ENE.js";
 import "./chunk-WUQDUBJG.js";
 import "./chunk-RQHJBTEU.js";
 export {

package/dist/editor.js

@@ -11,10 +11,10 @@ import {
   useEditorConnection,
   useEditorContext,
   useYjsState
-} from "./chunk-QGTIBEPX.js";
+} from "./chunk-ZKCEAIIZ.js";
 import "./chunk-Q56BYXQF.js";
 import "./chunk-LTEKI7YJ.js";
-import "./chunk-P5F43A65.js";
+import "./chunk-EOAX2ENE.js";
 import "./chunk-WUQDUBJG.js";
 import "./chunk-RQHJBTEU.js";
 export {

package/dist/files.js

@@ -7,7 +7,7 @@ import {
   RichFileTree,
   filterFileTree,
   parseCsv
-} from "./chunk-XGOWUDDW.js";
+} from "./chunk-YJ6RE5WV.js";
 import "./chunk-4CLN43XT.js";
 import {
   detectFileFormat,
@@ -19,7 +19,7 @@ import {
 } from "./chunk-XU3HB5QL.js";
 import "./chunk-MKTSMWVD.js";
 import "./chunk-LTEKI7YJ.js";
-import "./chunk-P5F43A65.js";
+import "./chunk-EOAX2ENE.js";
 import "./chunk-WUQDUBJG.js";
 import "./chunk-RQHJBTEU.js";
 export {

package/dist/hooks.js

@@ -11,21 +11,21 @@ import {
   useSSEStream,
   useSdkSession,
   useToolCallStream
-} from "./chunk-BWOUSEHM.js";
+} from "./chunk-VPWY4I5O.js";
 import "./chunk-OEX7NZE3.js";
 import {
   useAutoScroll,
   useRunCollapseState,
   useRunGroups
 } from "./chunk-565EATZZ.js";
-import "./chunk-Q7ZR6LSD.js";
+import "./chunk-XYAIX4SU.js";
 import "./chunk-KNYSKNZX.js";
 import "./chunk-ND3ZFXQK.js";
 import "./chunk-NWECTSOH.js";
 import "./chunk-L57WRIND.js";
 import "./chunk-4CLN43XT.js";
 import "./chunk-XU3HB5QL.js";
-import "./chunk-P5F43A65.js";
+import "./chunk-EOAX2ENE.js";
 import "./chunk-WUQDUBJG.js";
 import "./chunk-RQHJBTEU.js";
 export {

package/dist/index.d.ts

@@ -38,5 +38,6 @@ import '@pierre/trees';
 import './document-editor-pane-IAEQn_Dl.js';
 import '@hocuspocus/provider';
 import 'yjs';
+import 'react-markdown';
 import 'nanostores';
 import 'clsx';

package/dist/index.js

@@ -20,7 +20,7 @@ import {
   useSSEStream,
   useSdkSession,
   useToolCallStream
-} from "./chunk-BWOUSEHM.js";
+} from "./chunk-VPWY4I5O.js";
 import {
   addMessage,
   addParts,
@@ -146,7 +146,7 @@ import {
   MessageList,
   ThinkingIndicator,
   UserMessage
-} from "./chunk-X53RZSX6.js";
+} from "./chunk-7YOCS6IF.js";
 import {
   useAutoScroll,
   useRunCollapseState,
@@ -158,11 +158,11 @@ import {
 import {
   ToolCallFeed,
   parseToolEvent
-} from "./chunk-Q7ZR6LSD.js";
+} from "./chunk-XYAIX4SU.js";
 import {
   InlineThinkingItem,
   RunGroup
-} from "./chunk-OXZRCXJK.js";
+} from "./chunk-TN4FUEWY.js";
 import {
   ExpandedToolDetail,
   InlineToolItem,
@@ -190,7 +190,7 @@ import {
 import "./chunk-RQGKSCEZ.js";
 import {
   OpenUIArtifactRenderer
-} from "./chunk-3M7BPSSW.js";
+} from "./chunk-3TI5DEHV.js";
 import {
   Badge,
   Card,
@@ -219,7 +219,7 @@ import {
   RichFileTree,
   filterFileTree,
   parseCsv
-} from "./chunk-XGOWUDDW.js";
+} from "./chunk-YJ6RE5WV.js";
 import {
   formatBytes,
   formatDuration,
@@ -250,7 +250,7 @@ import {
 import "./chunk-5Z5ZYMOJ.js";
 import {
   Markdown
-} from "./chunk-P5F43A65.js";
+} from "./chunk-EOAX2ENE.js";
 import {
   CodeBlock,
   CopyButton

package/dist/markdown.d.ts

@@ -1,15 +1,18 @@
 import * as React from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import { UrlTransform } from 'react-markdown';
 export { C as CodeBlock, a as CodeBlockProps, b as CopyButton } from './code-block-0kSpWMnf.js';
 
 interface MarkdownProps {
     children: string;
     className?: string;
+    /** Transform parsed link and image URLs before sanitisation. */
+    urlTransform?: UrlTransform;
 }
 /**
  * Renders Markdown content with GFM support, XSS sanitisation, and
  * custom code block rendering via our CodeBlock component.
  */
-declare const Markdown: React.MemoExoticComponent<({ children, className }: MarkdownProps) => react_jsx_runtime.JSX.Element>;
+declare const Markdown: React.MemoExoticComponent<({ children, className, urlTransform }: MarkdownProps) => react_jsx_runtime.JSX.Element>;
 
 export { Markdown, type MarkdownProps };

package/dist/markdown.js

@@ -1,7 +1,7 @@
 import "./chunk-5Z5ZYMOJ.js";
 import {
   Markdown
-} from "./chunk-P5F43A65.js";
+} from "./chunk-EOAX2ENE.js";
 import {
   CodeBlock,
   CopyButton

package/dist/openui.js

@@ -1,10 +1,10 @@
 import "./chunk-RQGKSCEZ.js";
 import {
   OpenUIArtifactRenderer
-} from "./chunk-3M7BPSSW.js";
+} from "./chunk-3TI5DEHV.js";
 import "./chunk-GYPQXTJU.js";
 import "./chunk-MKTSMWVD.js";
-import "./chunk-P5F43A65.js";
+import "./chunk-EOAX2ENE.js";
 import "./chunk-WUQDUBJG.js";
 import "./chunk-RQHJBTEU.js";
 export {

package/dist/run.js

@@ -4,11 +4,11 @@ import {
 import {
   ToolCallFeed,
   parseToolEvent
-} from "./chunk-Q7ZR6LSD.js";
+} from "./chunk-XYAIX4SU.js";
 import {
   InlineThinkingItem,
   RunGroup
-} from "./chunk-OXZRCXJK.js";
+} from "./chunk-TN4FUEWY.js";
 import {
   ExpandedToolDetail,
   InlineToolItem,
@@ -18,12 +18,12 @@ import {
 import "./chunk-ND3ZFXQK.js";
 import "./chunk-NWECTSOH.js";
 import "./chunk-L57WRIND.js";
-import "./chunk-3M7BPSSW.js";
+import "./chunk-3TI5DEHV.js";
 import "./chunk-GYPQXTJU.js";
 import "./chunk-4CLN43XT.js";
 import "./chunk-XU3HB5QL.js";
 import "./chunk-MKTSMWVD.js";
-import "./chunk-P5F43A65.js";
+import "./chunk-EOAX2ENE.js";
 import "./chunk-WUQDUBJG.js";
 import "./chunk-RQHJBTEU.js";
 export {

package/dist/sdk-hooks.js

@@ -5,21 +5,21 @@ import {
   useSSEStream,
   useSdkSession,
   useToolCallStream
-} from "./chunk-BWOUSEHM.js";
+} from "./chunk-VPWY4I5O.js";
 import "./chunk-OEX7NZE3.js";
 import {
   useAutoScroll,
   useRunCollapseState,
   useRunGroups
 } from "./chunk-565EATZZ.js";
-import "./chunk-Q7ZR6LSD.js";
+import "./chunk-XYAIX4SU.js";
 import "./chunk-KNYSKNZX.js";
 import "./chunk-ND3ZFXQK.js";
 import "./chunk-NWECTSOH.js";
 import "./chunk-L57WRIND.js";
 import "./chunk-4CLN43XT.js";
 import "./chunk-XU3HB5QL.js";
-import "./chunk-P5F43A65.js";
+import "./chunk-EOAX2ENE.js";
 import "./chunk-WUQDUBJG.js";
 import "./chunk-RQHJBTEU.js";
 export {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/ui",
-  "version": "11.8.0",
+  "version": "11.9.0",
   "description": "Generic React UI components for Tangle products — primitives, chat, run, files, editor, markdown.",
   "type": "module",
   "license": "MIT",
@@ -134,6 +134,7 @@
     "turndown": "^7.2.2"
   },
   "peerDependencies": {
+    "@tangle-network/brand": "^1.5.0",
     "@hocuspocus/provider": ">=2.15.0 <5.0.0",
     "@nanostores/react": ">=0.8.4 <2.0.0",
     "@tiptap/core": ">=3.20.4 <4.0.0",
@@ -145,8 +146,7 @@
     "react": "^18 || ^19",
     "react-dom": "^18 || ^19",
     "react-router": "^7 || ^8",
-    "yjs": "^13.6.0",
-    "@tangle-network/brand": "^1.5.0"
+    "yjs": "^13.6.0"
   },
   "peerDependenciesMeta": {
     "@nanostores/react": {

package/src/markdown/markdown.test.tsx

@@ -1,5 +1,5 @@
-import { describe, expect, it } from "vitest";
-import { render } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { render, screen } from "@testing-library/react";
 import { Markdown } from "./markdown";
 
 describe("Markdown", () => {
@@ -20,4 +20,28 @@ describe("Markdown", () => {
     expect(inlineCode).toHaveClass("bg-card");
     expect(inlineCode).toHaveClass("text-[var(--code-keyword)]");
   });
+
+  it("passes parsed URLs through the typed transform hook", () => {
+    const urlTransform = vi.fn((url: string, key: string) => (
+      key === "href" && url === "system/brief.md"
+        ? "/app/ws-1/vault?file=system%2Fbrief.md"
+        : url
+    ));
+
+    render(
+      <Markdown urlTransform={urlTransform}>
+        {'[Brief](system/brief.md)'}
+      </Markdown>,
+    );
+
+    expect(screen.getByRole("link", { name: "Brief" })).toHaveAttribute(
+      "href",
+      "/app/ws-1/vault?file=system%2Fbrief.md",
+    );
+    expect(urlTransform).toHaveBeenCalledWith(
+      "system/brief.md",
+      "href",
+      expect.objectContaining({ tagName: "a" }),
+    );
+  });
 });

package/src/markdown/markdown.tsx

@@ -1,5 +1,5 @@
 import { memo } from "react";
-import ReactMarkdown from "react-markdown";
+import ReactMarkdown, { type UrlTransform } from "react-markdown";
 import remarkGfm from "remark-gfm";
 import rehypeSanitize from "rehype-sanitize";
 import { CodeBlock, CopyButton } from "./code-block";
@@ -8,13 +8,15 @@ import { cn } from "../lib/utils";
 export interface MarkdownProps {
   children: string;
   className?: string;
+  /** Transform parsed link and image URLs before sanitisation. */
+  urlTransform?: UrlTransform;
 }
 
 /**
  * Renders Markdown content with GFM support, XSS sanitisation, and
  * custom code block rendering via our CodeBlock component.
  */
-export const Markdown = memo(({ children, className }: MarkdownProps) => {
+export const Markdown = memo(({ children, className, urlTransform }: MarkdownProps) => {
   return (
     <div
       className={cn("tangle-prose max-w-none text-sm", className)}
@@ -22,6 +24,7 @@ export const Markdown = memo(({ children, className }: MarkdownProps) => {
       <ReactMarkdown
         remarkPlugins={[remarkGfm]}
         rehypePlugins={[rehypeSanitize]}
+        urlTransform={urlTransform}
         components={{
           pre({ children: preChildren }) {
             return <>{preChildren}</>;