@tangle-network/ui 11.50.1 → 11.50.2

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @tangle-network/ui
 
+## 11.50.2
+
+### Patch Changes
+
+- 035f031: `codePresentation.header` carries the header's type (`font-sans text-sm`), so a server-rendered code block header built from it shows its label and a text copy button in the header type, not the code font. The React `CodeBlock` label takes it from the header.
+
 ## 11.50.1
 
 ### Patch Changes

package/dist/lib/code-presentation.js

@@ -189,7 +189,7 @@ const codePresentation = {
 	tabs: `tangle-code-tabs ${tabsPresentation.list.underline}`,
 	tab: tabsPresentation.trigger.underline,
 	root: "group relative min-w-0 overflow-hidden rounded-lg border font-mono bg-card border-border",
-	header: "flex flex-wrap items-center justify-between gap-3 border-b border-border px-3 py-1.5 bg-[var(--code-header-bg,hsl(var(--background)))]",
+	header: "flex flex-wrap items-center justify-between gap-3 border-b border-border px-3 py-1.5 font-sans text-sm bg-[var(--code-header-bg,hsl(var(--background)))]",
 	copy: "flex items-center justify-center min-w-8 min-h-8 pointer-coarse:min-w-11 pointer-coarse:min-h-11 rounded-md bg-muted border border-border hover:border-[var(--border-strong)] transition-colors data-[copy-loading=true]:after:content-['…'] data-[copy-loading=true]:gap-1",
 	copyStatus: "sr-only data-[copy-long-work=true]:not-sr-only data-[copy-long-work=true]:text-xs data-[copy-long-work=true]:text-muted-foreground"
 };

package/dist/markdown/code-block.js

@@ -58,7 +58,7 @@ const CodeBlock = memo(({ code: defaultCode, language: defaultLanguage, label, f
 						children: apiMetadataText(metadata)
 					}),
 					filename ? /* @__PURE__ */ jsxs("span", {
-						className: "flex min-w-0 items-center gap-2 font-sans text-sm",
+						className: "flex min-w-0 items-center gap-2",
 						children: [
 							/* @__PURE__ */ jsx(FileCode2, {
 								"aria-hidden": true,
@@ -75,7 +75,7 @@ const CodeBlock = memo(({ code: defaultCode, language: defaultLanguage, label, f
 							})
 						]
 					}) : /* @__PURE__ */ jsx("span", {
-						className: "font-sans text-sm font-medium text-muted-foreground",
+						className: "font-medium text-muted-foreground",
 						children: headerLabel
 					}),
 					children,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/ui",
-  "version": "11.50.1",
+  "version": "11.50.2",
   "description": "Generic React UI components for Tangle products — primitives, chat, run, files, editor, markdown.",
   "type": "module",
   "license": "MIT",

package/src/lib/code-presentation.ts

@@ -142,7 +142,7 @@ export const codePresentation = {
   tabs: `tangle-code-tabs ${tabsPresentation.list.underline}`,
   tab: tabsPresentation.trigger.underline,
   root: "group relative min-w-0 overflow-hidden rounded-lg border font-mono bg-card border-border",
-  header: "flex flex-wrap items-center justify-between gap-3 border-b border-border px-3 py-1.5 bg-[var(--code-header-bg,hsl(var(--background)))]",
+  header: "flex flex-wrap items-center justify-between gap-3 border-b border-border px-3 py-1.5 font-sans text-sm bg-[var(--code-header-bg,hsl(var(--background)))]",
   copy: "flex items-center justify-center min-w-8 min-h-8 pointer-coarse:min-w-11 pointer-coarse:min-h-11 rounded-md bg-muted border border-border hover:border-[var(--border-strong)] transition-colors data-[copy-loading=true]:after:content-['…'] data-[copy-loading=true]:gap-1",
   copyStatus: "sr-only data-[copy-long-work=true]:not-sr-only data-[copy-long-work=true]:text-xs data-[copy-long-work=true]:text-muted-foreground",
 };

package/src/markdown/code-block.test.tsx

@@ -188,12 +188,6 @@ describe("CodeBlock", () => {
     expect(screen.getByRole("button", { name: "Copied" })).toBeTruthy();
   });
 
-  it("renders the header label at the 14px text-sm step", () => {
-    const { getByText } = render(<CodeBlock code={"x"} label="YAML" />);
-    expect(getByText("YAML").className).toContain("text-sm");
-    expect(getByText("YAML").className).not.toContain("calc(");
-  });
-
   it("announces a failed copy", async () => {
     const writeText = vi.fn().mockRejectedValue(new Error("denied"));
     Object.defineProperty(navigator, "clipboard", { value: { writeText }, configurable: true });

package/src/markdown/code-block.tsx

@@ -83,13 +83,13 @@ export const CodeBlock = memo(
           <div className={codePresentation.header}>
             {metadata && <span className="tangle-api-meta">{apiMetadataText(metadata)}</span>}
             {filename ? (
-              <span className="flex min-w-0 items-center gap-2 font-sans text-sm">
+              <span className="flex min-w-0 items-center gap-2">
                 <FileCode2 aria-hidden className="size-4 shrink-0 text-muted-foreground" />
                 <span className="min-w-0 truncate font-mono font-medium text-foreground" title={filename}>{filename}</span>
                 {languageName && <span className="shrink-0 text-muted-foreground">{languageName}</span>}
               </span>
             ) : (
-              <span className="font-sans text-sm font-medium text-muted-foreground">{headerLabel}</span>
+              <span className="font-medium text-muted-foreground">{headerLabel}</span>
             )}
             {children}
             {examples?.length ? <CopyButton text={code}/> : null}

package/src/markdown/markdown.stories.tsx

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react'
 import { Markdown } from './markdown'
 import { CodeBlock, CopyButton } from './code-block'
+import { codePresentation } from '../lib/code-presentation'
 
 // ─── Markdown ────────────────────────────────────────────────────────────────
 
@@ -228,6 +229,14 @@ export const CodeBlockLabelledCopy: Story = {
       <CodeBlock code={`<script src="https://embed.tangle.tools/agent.js" data-agent="support"></script>`} language="html" label="HTML">
         <CopyButton text={`<script src="https://embed.tangle.tools/agent.js" data-agent="support"></script>`} label="Copy embed code" />
       </CodeBlock>
+      {/* A server-rendered host (tangle-router) builds the same header from codePresentation alone. */}
+      <div className={`${codePresentation.root} mt-4`}>
+        <div className={codePresentation.header}>
+          <span>bash</span>
+          <button type="button" className={codePresentation.copy}>Copy</button>
+        </div>
+        <pre className="p-3"><code>export TANGLE_API_KEY="sk-tan-..."</code></pre>
+      </div>
     </div>
   ),
 }