@tangle-network/ui 11.51.0 → 11.51.1

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @tangle-network/ui
 
+## 11.51.1
+
+### Patch Changes
+
+- dfdfc77: Keep streamed blockquotes stable under host typography styles by suppressing generated quotation marks. Explicit quotation marks in Markdown content remain visible.
+
 ## 11.51.0
 
 ### Minor Changes

package/dist/markdown/markdown.js

@@ -166,7 +166,7 @@ function MarkdownImage({ node: _node, src, alt, className, ...props }) {
 */
 const Markdown = memo(({ children, className, urlTransform, linkChip }) => {
 	return /* @__PURE__ */ jsx("div", {
-		className: cn("tangle-prose max-w-none text-sm", className),
+		className: cn("tangle-prose max-w-none text-sm [&_blockquote_p]:before:content-none [&_blockquote_p]:after:content-none", className),
 		children: /* @__PURE__ */ jsx(LinkChipContext.Provider, {
 			value: linkChip,
 			children: /* @__PURE__ */ jsx(ReactMarkdown, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/ui",
-  "version": "11.51.0",
+  "version": "11.51.1",
   "description": "Generic React UI components for Tangle products — primitives, chat, run, files, editor, markdown.",
   "type": "module",
   "license": "MIT",
@@ -166,7 +166,7 @@
   "peerDependencies": {
     "@hocuspocus/provider": ">=2.15.0 <5.0.0",
     "@nanostores/react": ">=0.8.4 <3.0.0",
-    "@tangle-network/brand": "^1.31.0",
+    "@tangle-network/brand": "^1.31.1",
     "@tiptap/core": ">=3.20.4 <4.0.0",
     "@tiptap/extension-collaboration": ">=3.20.4 <4.0.0",
     "@tiptap/extension-collaboration-caret": ">=3.7.0 <4.0.0",

package/src/markdown/markdown.stories.tsx

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react'
+import { useEffect, useState } from 'react'
 import { Markdown } from './markdown'
 import { CodeBlock, CopyButton } from './code-block'
 import { codePresentation } from '../lib/code-presentation'
@@ -11,7 +12,7 @@ const markdownMeta: Meta<typeof Markdown> = {
   parameters: { layout: 'centered', backgrounds: { default: 'dark' } },
   decorators: [
     (Story) => (
-      <div className="w-[680px] rounded-xl bg-card p-6 text-foreground">
+      <div className="w-[680px] max-w-full rounded-xl bg-card p-6 text-foreground">
         <Story />
       </div>
     ),
@@ -262,3 +263,33 @@ export const CodeBlockLight: Story = {
     </div>
   ),
 }
+
+
+/** Host typography must not add a moving closing quote to streamed text. */
+function StreamingBlockquoteFixture() {
+  const text = '> **A researcher collects the evidence and a writer prepares the draft.**\n> You decide when the work leaves the workspace. Each person sees the source, the proposed action and the result before approving it.'
+  const [length, setLength] = useState(0)
+  useEffect(() => {
+    let interval: ReturnType<typeof setInterval>
+    const delay = setTimeout(() => {
+      let shown = 0
+      interval = setInterval(() => {
+        shown = Math.min(shown + 4, text.length); setLength(shown)
+        if (shown === text.length) clearInterval(interval)
+      }, 30)
+    }, 1500)
+    return () => { clearTimeout(delay); clearInterval(interval) }
+  }, [])
+  return <div className="streaming-blockquote-fixture" data-stream-length={length} data-stream-complete={length === text.length}>
+    <style>{`@layer base {
+      .streaming-blockquote-fixture blockquote p::before { content: open-quote; }
+      .streaming-blockquote-fixture blockquote p::after { content: close-quote; }
+    }`}</style>
+    <Markdown>{text.slice(0, length)}</Markdown>
+  </div>
+}
+
+export const StreamingBlockquote: Story = {
+  parameters: { layout: 'fullscreen' },
+  render: () => <StreamingBlockquoteFixture />,
+}

package/src/markdown/markdown.tsx

@@ -240,7 +240,7 @@ export interface MarkdownProps {
 export const Markdown = memo(({ children, className, urlTransform, linkChip }: MarkdownProps) => {
   return (
     <div
-      className={cn("tangle-prose max-w-none text-sm", className)}
+      className={cn("tangle-prose max-w-none text-sm [&_blockquote_p]:before:content-none [&_blockquote_p]:after:content-none", className)}
     >
       <LinkChipContext.Provider value={linkChip}>
         <ReactMarkdown