@tangle-network/ui 11.13.0 → 11.14.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @tangle-network/ui
 
+## 11.14.0
+
+### Minor Changes
+
+- 999438e: Add DialogContent hideCloseButton with a false default. It hides only the built-in close button, preserving Radix dismissal handlers, explicit close actions, variants and refs. Callers that require an explicit choice must still guard Escape/outside events and provide an accessible cancel or completion action.
+
+## 11.13.1
+
+### Patch Changes
+
+- 5cbda07: Load the full Highlight.js syntax renderer only when a code block mounts.
+  Keep code readable until highlighting arrives, and leave prose-only Markdown free of syntax-engine requests.
+
 ## 11.13.0
 
 ### Minor Changes

package/dist/markdown/code-block.js

@@ -3,7 +3,6 @@ import { cn } from "../lib/utils.js";
 import { memo, useCallback, useEffect, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Check, Copy } from "lucide-react";
-import SyntaxHighlighter from "react-syntax-highlighter";
 //#region src/markdown/code-block.tsx
 const syntaxTheme = (() => {
 	const comment = "var(--syntax-comment, currentColor)";
@@ -65,9 +64,35 @@ const syntaxTheme = (() => {
 		}
 	};
 })();
+let highlighterPromise;
+function loadHighlighter() {
+	return highlighterPromise ??= import("react-syntax-highlighter/dist/esm/default-highlight").then((module) => module.default).catch((error) => {
+		highlighterPromise = void 0;
+		throw error;
+	});
+}
 const CodeBlock = memo(({ code, language, label, showLineNumbers = false, light, className, children, ...props }) => {
+	const [Highlighter, setHighlighter] = useState(null);
+	useEffect(() => {
+		let active = true;
+		loadHighlighter().then((component) => {
+			if (active) setHighlighter(() => component);
+		}).catch(() => {});
+		return () => {
+			active = false;
+		};
+	}, []);
 	const headerLabel = label ?? language;
 	const mode = light === void 0 ? {} : { "data-theme": light ? "light" : "dark" };
+	const customStyle = {
+		margin: 0,
+		padding: "var(--code-padding-y, 0.625rem) var(--code-padding-x, 0.75rem)",
+		background: "transparent",
+		fontSize: "var(--code-font-size, 0.8125rem)",
+		lineHeight: "var(--code-line-height, 1.5)",
+		overflowX: "auto"
+	};
+	const codeTagProps = { style: { fontFamily: "var(--font-mono, 'JetBrains Mono', ui-monospace, monospace)" } };
 	return /* @__PURE__ */ jsxs("div", {
 		className: cn("group relative overflow-hidden rounded-lg border font-mono", "bg-card border-border", className),
 		...props,
@@ -84,7 +109,7 @@ const CodeBlock = memo(({ code, language, label, showLineNumbers = false, light,
 				className: "absolute right-2 top-2 z-10 flex items-center gap-2 opacity-0 transition-opacity group-hover:opacity-100",
 				children
 			}),
-			/* @__PURE__ */ jsx(SyntaxHighlighter, {
+			Highlighter ? /* @__PURE__ */ jsx(Highlighter, {
 				language: language ?? "text",
 				style: syntaxTheme,
 				showLineNumbers,
@@ -93,17 +118,22 @@ const CodeBlock = memo(({ code, language, label, showLineNumbers = false, light,
 					minWidth: "2.5em",
 					paddingRight: "1em"
 				},
-				customStyle: {
-					margin: 0,
-					padding: "var(--code-padding-y, 0.625rem) var(--code-padding-x, 0.75rem)",
-					background: "transparent",
-					fontSize: "var(--code-font-size, 0.8125rem)",
-					lineHeight: "var(--code-line-height, 1.5)",
-					overflowX: "auto"
-				},
-				codeTagProps: { style: { fontFamily: "var(--font-mono, 'JetBrains Mono', ui-monospace, monospace)" } },
+				customStyle,
+				codeTagProps,
 				wrapLines: false,
 				children: code
+			}) : /* @__PURE__ */ jsx("pre", {
+				style: {
+					...syntaxTheme.hljs,
+					...customStyle
+				},
+				children: /* @__PURE__ */ jsx("code", {
+					style: {
+						...codeTagProps.style,
+						whiteSpace: "pre"
+					},
+					children: code
+				})
 			})
 		]
 	});

package/dist/primitives/dialog.d.ts

@@ -8,6 +8,12 @@ declare const DialogClose: React.ForwardRefExoticComponent<DialogPrimitive.Dialo
 declare const DialogOverlay: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const DialogContent: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
   variant?: "default" | "sandbox";
+  /**
+   * Hide only the built-in close button. Escape/outside dismissal still follows
+   * Radix's handlers; prevent those events explicitly when a choice is required
+   * and provide an accessible way to finish or cancel the operation.
+   */
+  hideCloseButton?: boolean;
 } & React.RefAttributes<HTMLDivElement>>;
 declare function DialogHeader({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
 declare namespace DialogHeader {

package/dist/primitives/dialog.js

@@ -15,7 +15,7 @@ const DialogOverlay = React.forwardRef(({ className, ...props }, ref) => /* @__P
 	...props
 }));
 DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
-const DialogContent = React.forwardRef(({ className, children, variant = "default", ...props }, ref) => {
+const DialogContent = React.forwardRef(({ className, children, variant = "default", hideCloseButton = false, ...props }, ref) => {
 	return /* @__PURE__ */ jsxs(DialogPortal, { children: [/* @__PURE__ */ jsx(DialogOverlay, {}), /* @__PURE__ */ jsxs(DialogPrimitive.Content, {
 		ref,
 		className: cn("fixed top-[50%] left-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%]", "gap-4 rounded-lg border bg-card p-6 shadow-lg duration-200", "data-[state=closed]:animate-out data-[state=open]:animate-in", "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0", "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95", "data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%]", "data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]", {
@@ -23,7 +23,7 @@ const DialogContent = React.forwardRef(({ className, children, variant = "defaul
 			sandbox: "border-[var(--border-accent)] shadow-[var(--shadow-accent)]"
 		}[variant], className),
 		...props,
-		children: [children, /* @__PURE__ */ jsxs(DialogPrimitive.Close, {
+		children: [children, !hideCloseButton && /* @__PURE__ */ jsxs(DialogPrimitive.Close, {
 			className: cn("absolute top-4 right-4 rounded-sm opacity-70 transition-[opacity,box-shadow] hover:opacity-100 focus-visible:opacity-100 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground", focusRing),
 			children: [/* @__PURE__ */ jsx(X, { className: "h-4 w-4" }), /* @__PURE__ */ jsx("span", {
 				className: "sr-only",

package/package.json

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

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

@@ -1,16 +1,20 @@
-import { cleanup, render, screen } from "@testing-library/react";
+import { cleanup, render, screen, waitFor } from "@testing-library/react";
 import { renderToString } from "react-dom/server";
+import SyntaxHighlighter from "react-syntax-highlighter";
 import { afterEach, describe, expect, it } from "vitest";
 import { CodeBlock, CopyButton } from "./code-block";
 
 afterEach(cleanup);
 
 describe("CodeBlock scoped semantic colors", () => {
-  it("emits live CSS variables through the real highlighter, not sampled root colors", () => {
+  it("keeps code readable before the renderer loads, then applies live semantic colors and line numbers", async () => {
     const { container } = render(<CodeBlock code={'const message = "hello";'} language="javascript" showLineNumbers />);
-    expect(container.innerHTML).toContain("var(--syntax-keyword, currentColor)");
+    expect(container.querySelector("pre code")?.textContent).toBe('const message = "hello";');
+    await waitFor(() => expect(container.innerHTML).toContain("var(--syntax-keyword, currentColor)"));
     expect(container.innerHTML).toContain("var(--syntax-string, currentColor)");
     expect(container.innerHTML).toContain("var(--syntax-comment, currentColor)");
+    expect(container.querySelector(".react-syntax-highlighter-line-number")).not.toBeNull();
+    expect(container.querySelector("pre code")?.textContent?.replace(/^1/, "")).toBe('const message = "hello";');
   });
 
   it("inherits a named scope by default without inserting its own mode", () => {
@@ -35,10 +39,12 @@ describe("CodeBlock scoped semantic colors", () => {
     expect(screen.getByRole("button", { name: "Copy example" })).toBeTruthy();
   });
 
-  it("server-renders the same semantic references independent of document theme", () => {
+  it("server-renders readable code with the same semantic references independent of document theme", () => {
     const source = <CodeBlock code="const x = 1" language="javascript" />;
     document.documentElement.className = "dark";
     const dark = renderToString(source);
+    expect(dark).toContain("const x = 1");
+    expect(dark).toContain("var(--syntax-foreground, currentColor)");
     document.documentElement.className = "light";
     expect(renderToString(source)).toBe(dark);
     document.documentElement.removeAttribute("class");
@@ -52,6 +58,34 @@ describe("CodeBlock", () => {
     expect(container.querySelector("code")).not.toBeNull();
   });
 
+  it.each([
+    ["javascript", "const answer = 42;"],
+    ["js", "const answer = 42;"],
+    ["brainfuck", "++[>+++<-]"],
+    ["not-a-language", "const answer = 42;"],
+  ])("keeps the default highlighter's tokens for language %s", async (language, code) => {
+    const baseline = document.createElement("div");
+    baseline.innerHTML = renderToString(<SyntaxHighlighter language={language}>{code}</SyntaxHighlighter>);
+    const expected = Array.from(baseline.querySelectorAll("pre code span"), (span) => span.textContent);
+    expect(expected.length).toBeGreaterThan(0);
+
+    const { container } = render(<CodeBlock code={code} language={language} />);
+    await waitFor(() => expect(container.querySelectorAll("pre code span").length).toBe(expected.length));
+    expect(Array.from(container.querySelectorAll("pre code span"), (span) => span.textContent)).toEqual(expected);
+    expect(container.querySelector("pre code")?.textContent).toBe(code);
+  });
+
+  it("preserves whitespace and line numbering after the renderer loads", async () => {
+    const code = "\tfirst  \n  second\n";
+    const baseline = document.createElement("div");
+    baseline.innerHTML = renderToString(<SyntaxHighlighter language="text" showLineNumbers>{code}</SyntaxHighlighter>);
+    const { container } = render(<CodeBlock code={code} language="text" showLineNumbers />);
+    expect(container.querySelector("pre code")?.textContent).toBe(code);
+    await waitFor(() => expect(container.querySelectorAll(".react-syntax-highlighter-line-number").length)
+      .toBe(baseline.querySelectorAll(".react-syntax-highlighter-line-number").length));
+    expect(container.querySelector("pre code")?.textContent).toBe(baseline.querySelector("pre code")?.textContent);
+  });
+
   it("uses `label` as the header text, overriding `language`", () => {
     const { getByText, queryByText } = render(
       <CodeBlock code={"x"} language="typescript" label="config.ts" />,

package/src/markdown/code-block.tsx

@@ -7,7 +7,7 @@ import {
   type HTMLAttributes,
   type ReactNode,
 } from "react";
-import SyntaxHighlighter from "react-syntax-highlighter";
+import type SyntaxHighlighter from "react-syntax-highlighter";
 import { Check, Copy } from "lucide-react";
 import { focusRing } from "../lib/focus";
 import { cn } from "../lib/utils";
@@ -65,6 +65,20 @@ const syntaxTheme: { [key: string]: React.CSSProperties } = (() => {
   };
 })();
 
+type Highlighter = typeof SyntaxHighlighter;
+let highlighterPromise: Promise<Highlighter> | undefined;
+
+function loadHighlighter(): Promise<Highlighter> {
+  // Preserve the default renderer's language behavior, including alias inputs
+  // and unknown-language auto-detection. Its light async variant differs.
+  return highlighterPromise ??= import("react-syntax-highlighter/dist/esm/default-highlight")
+    .then((module) => module.default)
+    .catch((error: unknown) => {
+      highlighterPromise = undefined;
+      throw error;
+    });
+}
+
 export interface CodeBlockProps extends HTMLAttributes<HTMLDivElement> {
   code: string;
   language?: string;
@@ -82,8 +96,28 @@ export interface CodeBlockProps extends HTMLAttributes<HTMLDivElement> {
 
 export const CodeBlock = memo(
   ({ code, language, label, showLineNumbers = false, light, className, children, ...props }: CodeBlockProps) => {
+    const [Highlighter, setHighlighter] = useState<Highlighter | null>(null);
+    useEffect(() => {
+      let active = true;
+      void loadHighlighter().then((component) => {
+        if (active) setHighlighter(() => component);
+      }).catch(() => {
+        // A failed chunk leaves the code readable; a later mount can retry.
+      });
+      return () => { active = false; };
+    }, []);
+
     const headerLabel = label ?? language;
     const mode = light === undefined ? {} : { "data-theme": light ? "light" : "dark" };
+    const customStyle = {
+      margin: 0,
+      padding: "var(--code-padding-y, 0.625rem) var(--code-padding-x, 0.75rem)",
+      background: "transparent",
+      fontSize: "var(--code-font-size, 0.8125rem)",
+      lineHeight: "var(--code-line-height, 1.5)",
+      overflowX: "auto" as const,
+    };
+    const codeTagProps = { style: { fontFamily: "var(--font-mono, 'JetBrains Mono', ui-monospace, monospace)" } };
 
     return (
       <div
@@ -104,28 +138,27 @@ export const CodeBlock = memo(
             {children}
           </div>
         )}
-        <SyntaxHighlighter
-          language={language ?? "text"}
-          style={syntaxTheme}
-          showLineNumbers={showLineNumbers}
-          lineNumberStyle={{
-            color: "var(--syntax-comment, currentColor)",
-            minWidth: "2.5em",
-            paddingRight: "1em",
-          }}
-          customStyle={{
-            margin: 0,
-            padding: "var(--code-padding-y, 0.625rem) var(--code-padding-x, 0.75rem)",
-            background: "transparent",
-            fontSize: "var(--code-font-size, 0.8125rem)",
-            lineHeight: "var(--code-line-height, 1.5)",
-            overflowX: "auto",
-          }}
-          codeTagProps={{ style: { fontFamily: "var(--font-mono, 'JetBrains Mono', ui-monospace, monospace)" } }}
-          wrapLines={false}
-        >
-          {code}
-        </SyntaxHighlighter>
+        {Highlighter ? (
+          <Highlighter
+            language={language ?? "text"}
+            style={syntaxTheme}
+            showLineNumbers={showLineNumbers}
+            lineNumberStyle={{
+              color: "var(--syntax-comment, currentColor)",
+              minWidth: "2.5em",
+              paddingRight: "1em",
+            }}
+            customStyle={customStyle}
+            codeTagProps={codeTagProps}
+            wrapLines={false}
+          >
+            {code}
+          </Highlighter>
+        ) : (
+          <pre style={{ ...syntaxTheme.hljs, ...customStyle }}>
+            <code style={{ ...codeTagProps.style, whiteSpace: "pre" }}>{code}</code>
+          </pre>
+        )}
       </div>
     );
   },

package/src/primitives/dialog-dismissal.stories.tsx

@@ -0,0 +1,48 @@
+import { useState } from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { Button } from "./button";
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "./dialog";
+
+const meta = {
+  title: "Primitives/Dialog/Dismissal",
+  component: DialogContent,
+  parameters: { layout: "centered" },
+} satisfies Meta<typeof DialogContent>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+function ExplicitChoiceExample() {
+  const [open, setOpen] = useState(false);
+  const [choice, setChoice] = useState("No choice recorded.");
+  const finish = (value: string) => {
+    setChoice(value);
+    setOpen(false);
+  };
+  return (
+    <div className="space-y-4">
+      <Dialog open={open} onOpenChange={setOpen}>
+        <DialogTrigger asChild><Button>Review operation</Button></DialogTrigger>
+        <DialogContent
+          hideCloseButton
+          onEscapeKeyDown={(event) => event.preventDefault()}
+          onInteractOutside={(event) => event.preventDefault()}
+        >
+          <DialogHeader>
+            <DialogTitle>Continue this operation?</DialogTitle>
+            <DialogDescription>
+              This example requires an explicit choice. Hiding the close button
+              alone does not block Escape or outside dismissal; these handlers do.
+            </DialogDescription>
+          </DialogHeader>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => finish("Cancelled in this example.")}>Cancel</Button>
+            <Button onClick={() => finish("Confirmed in this example.")}>Confirm</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+      <output className="block text-sm text-muted-foreground" aria-live="polite">{choice}</output>
+    </div>
+  );
+}
+
+export const ExplicitChoice: Story = { render: () => <ExplicitChoiceExample /> };

package/src/primitives/dialog.test.tsx

@@ -0,0 +1,75 @@
+import { createRef, type ComponentProps } from "react";
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
+import { Dialog, DialogClose, DialogContent, DialogDescription, DialogTitle } from "./dialog";
+
+function Example(props: ComponentProps<typeof DialogContent>) {
+  return (
+    <Dialog defaultOpen>
+      <DialogContent {...props}>
+        <DialogTitle>Confirm operation</DialogTitle>
+        <DialogDescription>Choose whether to continue.</DialogDescription>
+        <DialogClose asChild><button type="button">Cancel operation</button></DialogClose>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+describe("DialogContent close-button visibility", () => {
+  it("retains the default accessible close button and its dismissal behavior", async () => {
+    const user = userEvent.setup();
+    render(<Example />);
+    expect(screen.getByRole("dialog", { name: "Confirm operation" })).toBeInTheDocument();
+    await user.click(screen.getByRole("button", { name: "Close", exact: true }));
+    await waitFor(() => expect(screen.queryByRole("dialog")).toBeNull());
+  });
+
+  it.each(["default", "sandbox"] as const)("hides only the built-in button for the %s variant", async (variant) => {
+    const user = userEvent.setup();
+    render(<Example hideCloseButton variant={variant} />);
+    expect(screen.queryByRole("button", { name: "Close", exact: true })).toBeNull();
+    expect(screen.getByRole("dialog")).not.toHaveAttribute("hideCloseButton");
+    expect(screen.getByRole("dialog")).toHaveAccessibleDescription("Choose whether to continue.");
+    await user.click(screen.getByRole("button", { name: "Cancel operation" }));
+    await waitFor(() => expect(screen.queryByRole("dialog")).toBeNull());
+  });
+
+  it("restores the same default button when visibility changes", () => {
+    const { rerender } = render(<Example hideCloseButton />);
+    expect(screen.queryByRole("button", { name: "Close", exact: true })).toBeNull();
+    rerender(<Example hideCloseButton={false} />);
+    expect(screen.getByRole("button", { name: "Close", exact: true })).toBeInTheDocument();
+    rerender(<Example hideCloseButton />);
+    expect(screen.queryByRole("button", { name: "Close", exact: true })).toBeNull();
+  });
+
+  it("does not silently disable Escape when the close button is hidden", async () => {
+    const user = userEvent.setup();
+    render(<Example hideCloseButton />);
+    await user.keyboard("{Escape}");
+    await waitFor(() => expect(screen.queryByRole("dialog")).toBeNull());
+  });
+
+  it("preserves the caller's Escape guard and an explicit keyboard-operable exit", async () => {
+    const user = userEvent.setup();
+    const guard = vi.fn((event: KeyboardEvent) => event.preventDefault());
+    render(<Example hideCloseButton onEscapeKeyDown={guard} />);
+    await user.keyboard("{Escape}");
+    expect(guard).toHaveBeenCalledOnce();
+    expect(screen.getByRole("dialog")).toBeInTheDocument();
+    screen.getByRole("button", { name: "Cancel operation" }).focus();
+    await user.keyboard("{Enter}");
+    await waitFor(() => expect(screen.queryByRole("dialog")).toBeNull());
+  });
+
+  it("forwards content refs, native attributes and class overrides", () => {
+    const ref = createRef<HTMLDivElement>();
+    render(<Example ref={ref} hideCloseButton id="operation-dialog" data-example="retained" className="max-w-xl" />);
+    const dialog = screen.getByRole("dialog");
+    expect(ref.current).toBe(dialog);
+    expect(dialog).toHaveAttribute("id", "operation-dialog");
+    expect(dialog).toHaveAttribute("data-example", "retained");
+    expect(dialog).toHaveClass("max-w-xl");
+  });
+});

package/src/primitives/dialog.tsx

@@ -33,8 +33,14 @@ const DialogContent = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & {
     variant?: "default" | "sandbox";
+    /**
+     * Hide only the built-in close button. Escape/outside dismissal still follows
+     * Radix's handlers; prevent those events explicitly when a choice is required
+     * and provide an accessible way to finish or cancel the operation.
+     */
+    hideCloseButton?: boolean;
   }
->(({ className, children, variant = "default", ...props }, ref) => {
+>(({ className, children, variant = "default", hideCloseButton = false, ...props }, ref) => {
   const variants = {
     default: "border-border",
     sandbox: "border-[var(--border-accent)] shadow-[var(--shadow-accent)]",
@@ -59,15 +65,17 @@ const DialogContent = React.forwardRef<
         {...props}
       >
         {children}
-        <DialogPrimitive.Close
-          className={cn(
-            "absolute top-4 right-4 rounded-sm opacity-70 transition-[opacity,box-shadow] hover:opacity-100 focus-visible:opacity-100 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground",
-            focusRing,
-          )}
-        >
-          <X className="h-4 w-4" />
-          <span className="sr-only">Close</span>
-        </DialogPrimitive.Close>
+        {!hideCloseButton && (
+          <DialogPrimitive.Close
+            className={cn(
+              "absolute top-4 right-4 rounded-sm opacity-70 transition-[opacity,box-shadow] hover:opacity-100 focus-visible:opacity-100 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground",
+              focusRing,
+            )}
+          >
+            <X className="h-4 w-4" />
+            <span className="sr-only">Close</span>
+          </DialogPrimitive.Close>
+        )}
       </DialogPrimitive.Content>
     </DialogPortal>
   );