@tangle-network/ui 11.1.0 → 11.2.0

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @tangle-network/ui
 
+## 11.2.0
+
+### Minor Changes
+
+- ac4eaf4: feat(files): host-aligned artifact surface props
+
+  - `ArtifactPane`: `headerClassName` + `hideTitleBlock` (header row collapses when empty).
+  - `FileArtifactPane`: threads both through all render paths; `headerActions` is `undefined` (not an empty fragment) when there are no actions.
+  - `DocumentEditorPane`: `previewClassName` now governs the whole preview box (gutter/border/surface/padding), enabling a full-bleed document body.
+  - `FilePreview`: text previews sit on `bg-card` for a white surface in light theme.
+
+### Patch Changes
+
+- c5dfc7d: Use tokenized Tangle prose styling for markdown previews so light themes stay readable.
+
 ## 11.1.0
 
 ### Minor Changes

package/dist/{artifact-pane-DvJyPWV4.d.ts → artifact-pane-DpuWcAiF.d.ts}

@@ -14,11 +14,20 @@ interface ArtifactPaneProps {
     children?: ReactNode;
     className?: string;
     contentClassName?: string;
+    /** Extra classes for the header band (e.g. to align its surface with the host chrome). */
+    headerClassName?: string;
+    /**
+     * Suppress the eyebrow/title/subtitle/meta block. Use when the host already
+     * shows the artifact's identity elsewhere (e.g. a surrounding path row), so the
+     * pane keeps only its tabs, toolbar, and header actions. The whole header row
+     * collapses when nothing else would render in it.
+     */
+    hideTitleBlock?: boolean;
 }
 /**
  * ArtifactPane — shared frame for files, previews, documents, inspectors, and
  * other artifact-like surfaces inside sandbox applications.
  */
-declare function ArtifactPane({ eyebrow, title, subtitle, meta, headerActions, tabs, toolbar, footer, emptyState, children, className, contentClassName, }: ArtifactPaneProps): react_jsx_runtime.JSX.Element;
+declare function ArtifactPane({ eyebrow, title, subtitle, meta, headerActions, tabs, toolbar, footer, emptyState, children, className, contentClassName, headerClassName, hideTitleBlock, }: ArtifactPaneProps): react_jsx_runtime.JSX.Element;
 
 export { ArtifactPane as A, type ArtifactPaneProps as a };

package/dist/chat.js

@@ -5,17 +5,17 @@ import {
   MessageList,
   ThinkingIndicator,
   UserMessage
-} from "./chunk-FIFE5HCW.js";
+} from "./chunk-OTZWQJ5W.js";
 import "./chunk-AZWDI2JG.js";
-import "./chunk-PX5KV5HI.js";
+import "./chunk-SRAKCVPO.js";
 import "./chunk-4ORVXSMU.js";
 import "./chunk-ULDNFLIM.js";
 import "./chunk-AAUNOHVL.js";
-import "./chunk-52Y3FMFI.js";
+import "./chunk-3M7BPSSW.js";
 import "./chunk-GYPQXTJU.js";
 import "./chunk-MKTSMWVD.js";
 import "./chunk-ZRVH3WCA.js";
-import "./chunk-FJBTCTZM.js";
+import "./chunk-P5F43A65.js";
 import "./chunk-WUQDUBJG.js";
 import "./chunk-RQHJBTEU.js";
 export {

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

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

package/dist/{chunk-LELGOLFV.js → chunk-GGDYWMFF.js}

@@ -6,10 +6,10 @@ import {
 } from "./chunk-ZRVH3WCA.js";
 import {
   ArtifactPane
-} from "./chunk-CSAIKY36.js";
+} from "./chunk-LTEKI7YJ.js";
 import {
   Markdown
-} from "./chunk-FJBTCTZM.js";
+} from "./chunk-P5F43A65.js";
 import {
   CodeBlock,
   CopyButton
@@ -407,7 +407,7 @@ function PdfPreview({ blobUrl, filename }) {
   ) });
 }
 function TextPreview({ content }) {
-  return /* @__PURE__ */ jsx3("pre", { className: "bg-background rounded-[var(--radius-md)] border border-border p-4 overflow-auto max-h-[70vh] text-sm text-foreground font-mono leading-[1.55]", children: content });
+  return /* @__PURE__ */ jsx3("pre", { className: "bg-card rounded-[var(--radius-md)] border border-border p-4 overflow-auto max-h-[70vh] text-sm text-foreground font-mono leading-[1.55]", children: content });
 }
 function UnsupportedPreview({
   filename,
@@ -422,7 +422,7 @@ function UnsupportedPreview({
   ] });
 }
 function MarkdownPreview({ content }) {
-  return /* @__PURE__ */ jsx3("div", { className: "rounded-[var(--radius-md)] border border-border bg-background p-5", children: /* @__PURE__ */ jsx3(Markdown, { className: "prose-sm max-w-none", children: content }) });
+  return /* @__PURE__ */ jsx3("div", { className: "rounded-[var(--radius-md)] border border-border bg-background p-5", children: /* @__PURE__ */ jsx3(Markdown, { children: content }) });
 }
 function EmptyPreview({ filename }) {
   return /* @__PURE__ */ jsxs2("div", { className: "flex flex-col items-center justify-center py-16 text-muted-foreground", children: [
@@ -560,7 +560,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-WCTA3ZOE.js");
+  const module = await import("./document-editor-pane-OQNGM4RJ.js");
   return { default: module.DocumentEditorPane };
 });
 function FileArtifactPane({
@@ -580,6 +580,8 @@ function FileArtifactPane({
   toolbar,
   footer,
   className,
+  headerClassName,
+  hideTitleBlock,
   editor
 }) {
   const showTabs = tabs.length > 0 && onTabSelect && onTabClose;
@@ -594,7 +596,7 @@ function FileArtifactPane({
   ) : void 0;
   const isMarkdown = detectFileFormat(filename, mimeType) === "markdown" || (path ? detectFileFormat(path, mimeType) === "markdown" : false);
   const isEditableMarkdown = isMarkdown && editor?.enabled;
-  const headerActions = /* @__PURE__ */ jsxs4(Fragment, { children: [
+  const headerActions = onDownload || onClose ? /* @__PURE__ */ jsxs4(Fragment, { children: [
     onDownload && /* @__PURE__ */ jsx5(
       "button",
       {
@@ -615,7 +617,7 @@ function FileArtifactPane({
         children: /* @__PURE__ */ jsx5(X3, { className: "h-4 w-4" })
       }
     )
-  ] });
+  ] }) : void 0;
   if (isEditableMarkdown) {
     return /* @__PURE__ */ jsx5(
       Suspense,
@@ -632,6 +634,8 @@ function FileArtifactPane({
             className,
             tabs: paneTabs,
             headerActions,
+            headerClassName,
+            hideTitleBlock,
             children: /* @__PURE__ */ jsx5("div", { className: "flex min-h-[12rem] items-center justify-center rounded-[var(--radius-lg)] border border-dashed border-border bg-muted text-sm text-muted-foreground", children: "Loading editor\u2026" })
           }
         ),
@@ -647,6 +651,8 @@ function FileArtifactPane({
             className,
             tabs: paneTabs,
             headerActions,
+            headerClassName,
+            hideTitleBlock,
             markdown: content ?? "",
             mode: editor.mode,
             defaultMode: editor.defaultMode,
@@ -679,6 +685,8 @@ function FileArtifactPane({
       className,
       tabs: paneTabs,
       headerActions,
+      headerClassName,
+      hideTitleBlock,
       children: /* @__PURE__ */ jsx5(
         FilePreview,
         {

package/dist/{chunk-EWIWYC2I.js → chunk-HW4ROISY.js}

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

package/dist/{chunk-F22SQTBP.js → chunk-J3YZIQNI.js}

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

package/dist/{chunk-CSAIKY36.js → chunk-LTEKI7YJ.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-RQHJBTEU.js";
 
 // src/primitives/artifact-pane.tsx
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 function ArtifactPane({
   eyebrow,
   title,
@@ -16,9 +16,14 @@ function ArtifactPane({
   emptyState,
   children,
   className,
-  contentClassName
+  contentClassName,
+  headerClassName,
+  hideTitleBlock = false
 }) {
   const hasContent = children !== void 0 && children !== null;
+  const showTitleRow = !hideTitleBlock || Boolean(headerActions);
+  const hasHeader = showTitleRow || Boolean(tabs) || Boolean(toolbar);
+  const toolbarNeedsDivider = showTitleRow || Boolean(tabs);
   return /* @__PURE__ */ jsxs(
     "section",
     {
@@ -27,20 +32,20 @@ function ArtifactPane({
         className
       ),
       children: [
-        /* @__PURE__ */ jsxs("header", { className: "border-b border-border bg-muted/10", children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-3 px-3 py-2", children: [
-            /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+        hasHeader && /* @__PURE__ */ jsxs("header", { className: cn("border-b border-border bg-muted/10", headerClassName), children: [
+          showTitleRow && /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-3 px-3 py-2", children: [
+            /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children: !hideTitleBlock && /* @__PURE__ */ jsxs(Fragment, { children: [
               eyebrow && /* @__PURE__ */ jsx("div", { className: "mb-1 inline-flex max-w-full items-center px-1 py-0.5 text-[10px] font-bold uppercase tracking-wider text-muted-foreground", children: eyebrow }),
               /* @__PURE__ */ jsx("div", { className: "min-w-0 text-[13px] font-medium text-foreground", children: title }),
               (subtitle || meta) && /* @__PURE__ */ jsxs("div", { className: "mt-1 flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1 text-xs leading-relaxed text-muted-foreground", children: [
                 subtitle && /* @__PURE__ */ jsx("span", { className: "truncate", children: subtitle }),
                 meta && /* @__PURE__ */ jsx("span", { className: "flex items-center gap-2", children: meta })
               ] })
-            ] }),
+            ] }) }),
             headerActions && /* @__PURE__ */ jsx("div", { className: "flex shrink-0 items-center gap-1.5", children: headerActions })
           ] }),
           tabs,
-          toolbar && /* @__PURE__ */ jsx("div", { className: "border-t border-border px-3 py-2", children: toolbar })
+          toolbar && /* @__PURE__ */ jsx("div", { className: cn("px-3 py-2", toolbarNeedsDivider && "border-t border-border"), children: toolbar })
         ] }),
         /* @__PURE__ */ jsx("div", { className: cn("min-h-0 flex-1 overflow-auto", contentClassName), children: hasContent ? children : emptyState ? /* @__PURE__ */ jsx("div", { className: "flex h-full items-center justify-center p-6", children: emptyState }) : null }),
         footer && /* @__PURE__ */ jsx("footer", { className: "shrink-0 border-t border-border bg-card px-3 py-2", children: footer })

package/dist/{chunk-FIFE5HCW.js → chunk-OTZWQJ5W.js}

@@ -6,7 +6,7 @@ import {
 import {
   InlineThinkingItem,
   RunGroup
-} from "./chunk-PX5KV5HI.js";
+} from "./chunk-SRAKCVPO.js";
 import {
   ToolCallGroup,
   ToolCallStep
@@ -16,10 +16,10 @@ import {
 } from "./chunk-ULDNFLIM.js";
 import {
   OpenUIArtifactRenderer
-} from "./chunk-52Y3FMFI.js";
+} from "./chunk-3M7BPSSW.js";
 import {
   Markdown
-} from "./chunk-FJBTCTZM.js";
+} from "./chunk-P5F43A65.js";
 import {
   cn
 } from "./chunk-RQHJBTEU.js";

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

@@ -16,7 +16,7 @@ var Markdown = memo(({ children, className }) => {
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: cn("prose prose-sm dark:prose-invert max-w-none", className),
+      className: cn("tangle-prose max-w-none text-sm", className),
       children: /* @__PURE__ */ jsx(
         ReactMarkdown,
         {

package/dist/{chunk-SZ44QDA6.js → chunk-RADUPP44.js}

@@ -6,10 +6,10 @@ import {
 } from "./chunk-Q56BYXQF.js";
 import {
   ArtifactPane
-} from "./chunk-CSAIKY36.js";
+} from "./chunk-LTEKI7YJ.js";
 import {
   Markdown
-} from "./chunk-FJBTCTZM.js";
+} from "./chunk-P5F43A65.js";
 import {
   cn
 } from "./chunk-RQHJBTEU.js";
@@ -1030,6 +1030,8 @@ function DocumentEditorPane({
   footer,
   className,
   contentClassName,
+  headerClassName,
+  hideTitleBlock,
   tabs,
   toolbar,
   markdown = "",
@@ -1126,10 +1128,13 @@ function DocumentEditorPane({
     "div",
     {
       className: cn(
-        "rounded-[var(--radius-lg)] border border-border bg-background p-5",
+        // The outer margin is the card's gutter (rather than padding on the tab
+        // panel) so `previewClassName` can govern the whole box — gutter, border,
+        // surface, and inner padding — e.g. to render the document full-bleed.
+        "m-4 rounded-[var(--radius-lg)] border border-border bg-card p-5",
         previewClassName
       ),
-      children: /* @__PURE__ */ jsx5(Markdown, { className: "prose-sm max-w-none", children: draft })
+      children: /* @__PURE__ */ jsx5(Markdown, { children: draft })
     }
   );
   const localEditor = /* @__PURE__ */ jsx5(
@@ -1174,9 +1179,11 @@ function DocumentEditorPane({
           tabs,
           className,
           contentClassName,
+          headerClassName,
           toolbar: editorToolbar,
+          hideTitleBlock,
           children: [
-            /* @__PURE__ */ jsx5(TabsContent, { value: "preview", className: "mt-0 h-full px-4 py-4", children: preview }),
+            /* @__PURE__ */ jsx5(TabsContent, { value: "preview", className: "mt-0 h-full", children: preview }),
             /* @__PURE__ */ jsx5(TabsContent, { value: "edit", className: "mt-0 h-full px-4 py-4", children: isCollaborative ? collaborativeEditor : localEditor })
           ]
         }

package/dist/{chunk-PX5KV5HI.js → chunk-SRAKCVPO.js}

@@ -9,10 +9,10 @@ import {
 } from "./chunk-ULDNFLIM.js";
 import {
   OpenUIArtifactRenderer
-} from "./chunk-52Y3FMFI.js";
+} from "./chunk-3M7BPSSW.js";
 import {
   Markdown
-} from "./chunk-FJBTCTZM.js";
+} from "./chunk-P5F43A65.js";
 import {
   cn
 } from "./chunk-RQHJBTEU.js";

package/dist/{document-editor-pane-DyDEX_Zm.d.ts → document-editor-pane-C3cYEDWZ.d.ts}

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ReactNode } from 'react';
-import { a as ArtifactPaneProps } from './artifact-pane-DvJyPWV4.js';
+import { a as ArtifactPaneProps } from './artifact-pane-DpuWcAiF.js';
 import { HocuspocusProvider } from '@hocuspocus/provider';
 import * as Y from 'yjs';
 
@@ -119,6 +119,6 @@ interface DocumentEditorPaneProps extends Omit<ArtifactPaneProps, "children" | "
  * DocumentEditorPane — reusable markdown document surface with preview/edit
  * modes and optional collaborative editing backed by Yjs/Hocuspocus.
  */
-declare function DocumentEditorPane({ eyebrow, title, subtitle, meta, headerActions, footer, className, contentClassName, tabs, toolbar, markdown, mode, defaultMode, onModeChange, backend, placeholder, autoFocus, readOnly, onChange, onSave, saving, saveLabel, previewClassName, editorClassName, collaboration, }: DocumentEditorPaneProps): react_jsx_runtime.JSX.Element;
+declare function DocumentEditorPane({ eyebrow, title, subtitle, meta, headerActions, footer, className, contentClassName, headerClassName, hideTitleBlock, tabs, toolbar, markdown, mode, defaultMode, onModeChange, backend, placeholder, autoFocus, readOnly, onChange, onSave, saving, saveLabel, previewClassName, editorClassName, collaboration, }: DocumentEditorPaneProps): react_jsx_runtime.JSX.Element;
 
 export { type Collaborator as C, type DocumentEditorBackend as D, type EditorContextValue as E, type ConnectionState as a, type DocumentEditorMode as b, DocumentEditorPane as c, type DocumentEditorPaneCollaborationConfig as d, type DocumentEditorPaneProps as e, EditorProvider as f, type EditorProviderProps as g, type EditorTokenRefreshResult as h, type EditorUser as i, useEditorContext as u };

package/dist/{document-editor-pane-WCTA3ZOE.js → document-editor-pane-OQNGM4RJ.js}

@@ -1,10 +1,10 @@
 "use client";
 import {
   DocumentEditorPane
-} from "./chunk-SZ44QDA6.js";
+} from "./chunk-RADUPP44.js";
 import "./chunk-Q56BYXQF.js";
-import "./chunk-CSAIKY36.js";
-import "./chunk-FJBTCTZM.js";
+import "./chunk-LTEKI7YJ.js";
+import "./chunk-P5F43A65.js";
 import "./chunk-WUQDUBJG.js";
 import "./chunk-RQHJBTEU.js";
 export {

package/dist/editor.d.ts

@@ -1,10 +1,10 @@
-import { C as Collaborator, a as ConnectionState } from './document-editor-pane-DyDEX_Zm.js';
-export { D as DocumentEditorBackend, b as DocumentEditorMode, c as DocumentEditorPane, d as DocumentEditorPaneCollaborationConfig, e as DocumentEditorPaneProps, E as EditorContextValue, f as EditorProvider, g as EditorProviderProps, h as EditorTokenRefreshResult, i as EditorUser, u as useEditorContext } from './document-editor-pane-DyDEX_Zm.js';
+import { C as Collaborator, a as ConnectionState } from './document-editor-pane-C3cYEDWZ.js';
+export { D as DocumentEditorBackend, b as DocumentEditorMode, c as DocumentEditorPane, d as DocumentEditorPaneCollaborationConfig, e as DocumentEditorPaneProps, E as EditorContextValue, f as EditorProvider, g as EditorProviderProps, h as EditorTokenRefreshResult, i as EditorUser, u as useEditorContext } from './document-editor-pane-C3cYEDWZ.js';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { Editor } from '@tiptap/react';
 import { HocuspocusProvider } from '@hocuspocus/provider';
 import 'react';
-import './artifact-pane-DvJyPWV4.js';
+import './artifact-pane-DpuWcAiF.js';
 import 'yjs';
 
 /**

package/dist/editor.js

@@ -11,10 +11,10 @@ import {
   useEditorConnection,
   useEditorContext,
   useYjsState
-} from "./chunk-SZ44QDA6.js";
+} from "./chunk-RADUPP44.js";
 import "./chunk-Q56BYXQF.js";
-import "./chunk-CSAIKY36.js";
-import "./chunk-FJBTCTZM.js";
+import "./chunk-LTEKI7YJ.js";
+import "./chunk-P5F43A65.js";
 import "./chunk-WUQDUBJG.js";
 import "./chunk-RQHJBTEU.js";
 export {

package/dist/files.d.ts

@@ -1,8 +1,8 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { GitStatusEntry, ContextMenuItem, ContextMenuOpenContext, GitStatus } from '@pierre/trees';
 import { ReactNode, CSSProperties } from 'react';
-import { b as DocumentEditorMode, D as DocumentEditorBackend, d as DocumentEditorPaneCollaborationConfig } from './document-editor-pane-DyDEX_Zm.js';
-import { a as ArtifactPaneProps } from './artifact-pane-DvJyPWV4.js';
+import { b as DocumentEditorMode, D as DocumentEditorBackend, d as DocumentEditorPaneCollaborationConfig } from './document-editor-pane-C3cYEDWZ.js';
+import { a as ArtifactPaneProps } from './artifact-pane-DpuWcAiF.js';
 import '@hocuspocus/provider';
 import 'yjs';
 
@@ -164,13 +164,15 @@ interface FileArtifactPaneProps extends Omit<FilePreviewProps, "className"> {
     toolbar?: ArtifactPaneProps["toolbar"];
     footer?: ArtifactPaneProps["footer"];
     className?: string;
+    headerClassName?: ArtifactPaneProps["headerClassName"];
+    hideTitleBlock?: ArtifactPaneProps["hideTitleBlock"];
     editor?: FileArtifactPaneEditorOptions;
 }
 /**
  * FileArtifactPane — opinionated artifact frame for file previews with tabs and
  * header actions.
  */
-declare function FileArtifactPane({ filename, content, blobUrl, mimeType, onClose, onDownload, path, tabs, activeTabId, onTabSelect, onTabClose, eyebrow, meta, toolbar, footer, className, editor, }: FileArtifactPaneProps): react_jsx_runtime.JSX.Element;
+declare function FileArtifactPane({ filename, content, blobUrl, mimeType, onClose, onDownload, path, tabs, activeTabId, onTabSelect, onTabClose, eyebrow, meta, toolbar, footer, className, headerClassName, hideTitleBlock, editor, }: FileArtifactPaneProps): react_jsx_runtime.JSX.Element;
 
 /**
  * Shared file-format detection for every file surface — the preview pane, the

package/dist/files.js

@@ -5,7 +5,7 @@ import {
   FileTree,
   RichFileTree,
   filterFileTree
-} from "./chunk-LELGOLFV.js";
+} from "./chunk-GGDYWMFF.js";
 import {
   detectFileFormat,
   fileExtension,
@@ -13,8 +13,8 @@ import {
   getFormatLabel,
   getSyntaxLanguage
 } from "./chunk-ZRVH3WCA.js";
-import "./chunk-CSAIKY36.js";
-import "./chunk-FJBTCTZM.js";
+import "./chunk-LTEKI7YJ.js";
+import "./chunk-P5F43A65.js";
 import "./chunk-WUQDUBJG.js";
 import "./chunk-RQHJBTEU.js";
 export {

package/dist/hooks.js

@@ -11,19 +11,19 @@ import {
   useSSEStream,
   useSdkSession,
   useToolCallStream
-} from "./chunk-EWIWYC2I.js";
+} from "./chunk-HW4ROISY.js";
 import "./chunk-OEX7NZE3.js";
 import {
   useAutoScroll,
   useRunCollapseState,
   useRunGroups
 } from "./chunk-AZWDI2JG.js";
-import "./chunk-F22SQTBP.js";
+import "./chunk-J3YZIQNI.js";
 import "./chunk-4ORVXSMU.js";
 import "./chunk-ULDNFLIM.js";
 import "./chunk-AAUNOHVL.js";
 import "./chunk-ZRVH3WCA.js";
-import "./chunk-FJBTCTZM.js";
+import "./chunk-P5F43A65.js";
 import "./chunk-WUQDUBJG.js";
 import "./chunk-RQHJBTEU.js";
 export {

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 export { B as Button, a as ButtonProps, b as buttonVariants } from './button-CMQuQEW_.js';
 export { Avatar, AvatarFallback, AvatarImage, Badge, BadgeProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropZone, DropZoneProps, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, EmptyStateProps, InlineCode, InlineCodeProps, Input, InputProps, Label, Progress, SegmentedControl, SegmentedControlOption, SegmentedControlProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, SidebarDropZone, SidebarDropZoneProps, Skeleton, SkeletonCard, SkeletonTable, StatCard, StatCardProps, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, TerminalCursor, TerminalDisplay, TerminalInput, TerminalLine, Textarea, TextareaProps, ThemeToggle, Toast, ToastContainer, ToastProvider, UploadFile, UploadProgress, UploadProgressProps, badgeVariants, useTheme, useToast } from './primitives.js';
 export { Logo, LogoProps, TangleKnot } from '@tangle-network/brand';
-export { A as ArtifactPane, a as ArtifactPaneProps } from './artifact-pane-DvJyPWV4.js';
+export { A as ArtifactPane, a as ArtifactPaneProps } from './artifact-pane-DpuWcAiF.js';
 export { AgentTimeline, AgentTimelineArtifactItem, AgentTimelineCustomItem, AgentTimelineItem, AgentTimelineMessageItem, AgentTimelineProps, AgentTimelineStatusItem, AgentTimelineTone, AgentTimelineToolGroupItem, AgentTimelineToolItem, ChatContainer, ChatContainerProps, ChatMessage, ChatMessageProps, MessageList, MessageListProps, MessageRole, ThinkingIndicator, ThinkingIndicatorProps, UserMessage, UserMessageProps } from './chat.js';
 export { ExpandedToolDetail, ExpandedToolDetailProps, InlineThinkingItem, InlineThinkingItemProps, InlineToolItem, InlineToolItemProps, LiveDuration, RunGroup, RunGroupProps } from './run.js';
 export { F as FeedSegment, T as ToolCallData, a as ToolCallFeed, b as ToolCallFeedProps, c as ToolCallStatus, d as ToolCallType, p as parseToolEvent } from './tool-call-feed-D9iofJgW.js';
@@ -34,7 +34,7 @@ import '@radix-ui/react-progress';
 import '@radix-ui/react-switch';
 import '@radix-ui/react-label';
 import '@pierre/trees';
-import './document-editor-pane-DyDEX_Zm.js';
+import './document-editor-pane-C3cYEDWZ.js';
 import '@hocuspocus/provider';
 import 'yjs';
 import 'nanostores';

package/dist/index.js

@@ -17,7 +17,7 @@ import {
   useSSEStream,
   useSdkSession,
   useToolCallStream
-} from "./chunk-EWIWYC2I.js";
+} from "./chunk-HW4ROISY.js";
 import {
   addMessage,
   addParts,
@@ -137,7 +137,7 @@ import {
   MessageList,
   ThinkingIndicator,
   UserMessage
-} from "./chunk-FIFE5HCW.js";
+} from "./chunk-OTZWQJ5W.js";
 import {
   useAutoScroll,
   useRunCollapseState,
@@ -147,11 +147,11 @@ import "./chunk-47XH56SV.js";
 import {
   ToolCallFeed,
   parseToolEvent
-} from "./chunk-F22SQTBP.js";
+} from "./chunk-J3YZIQNI.js";
 import {
   InlineThinkingItem,
   RunGroup
-} from "./chunk-PX5KV5HI.js";
+} from "./chunk-SRAKCVPO.js";
 import {
   ExpandedToolDetail,
   InlineToolItem,
@@ -179,7 +179,7 @@ import {
 import "./chunk-RQGKSCEZ.js";
 import {
   OpenUIArtifactRenderer
-} from "./chunk-52Y3FMFI.js";
+} from "./chunk-3M7BPSSW.js";
 import {
   Badge,
   Card,
@@ -210,7 +210,7 @@ import {
   FileTree,
   RichFileTree,
   filterFileTree
-} from "./chunk-LELGOLFV.js";
+} from "./chunk-GGDYWMFF.js";
 import {
   detectFileFormat,
   fileExtension,
@@ -226,11 +226,11 @@ import {
 } from "./chunk-Q56BYXQF.js";
 import {
   ArtifactPane
-} from "./chunk-CSAIKY36.js";
+} from "./chunk-LTEKI7YJ.js";
 import "./chunk-5Z5ZYMOJ.js";
 import {
   Markdown
-} from "./chunk-FJBTCTZM.js";
+} from "./chunk-P5F43A65.js";
 import {
   CodeBlock,
   CopyButton

package/dist/markdown.js

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

package/dist/openui.js

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

package/dist/primitives.d.ts

@@ -13,7 +13,7 @@ import * as ProgressPrimitive from '@radix-ui/react-progress';
 import * as SwitchPrimitives from '@radix-ui/react-switch';
 import * as LabelPrimitive from '@radix-ui/react-label';
 export { Logo, LogoProps, TangleKnot } from '@tangle-network/brand';
-export { A as ArtifactPane, a as ArtifactPaneProps } from './artifact-pane-DvJyPWV4.js';
+export { A as ArtifactPane, a as ArtifactPaneProps } from './artifact-pane-DpuWcAiF.js';
 export { C as CodeBlock, a as CodeBlockProps, b as CopyButton } from './code-block-0kSpWMnf.js';
 
 declare const Card: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & {

package/dist/primitives.js

@@ -96,7 +96,7 @@ import {
 } from "./chunk-Q56BYXQF.js";
 import {
   ArtifactPane
-} from "./chunk-CSAIKY36.js";
+} from "./chunk-LTEKI7YJ.js";
 import {
   CodeBlock,
   CopyButton

package/dist/run.js

@@ -2,11 +2,11 @@ import "./chunk-47XH56SV.js";
 import {
   ToolCallFeed,
   parseToolEvent
-} from "./chunk-F22SQTBP.js";
+} from "./chunk-J3YZIQNI.js";
 import {
   InlineThinkingItem,
   RunGroup
-} from "./chunk-PX5KV5HI.js";
+} from "./chunk-SRAKCVPO.js";
 import {
   ExpandedToolDetail,
   InlineToolItem,
@@ -14,11 +14,11 @@ import {
 } from "./chunk-4ORVXSMU.js";
 import "./chunk-ULDNFLIM.js";
 import "./chunk-AAUNOHVL.js";
-import "./chunk-52Y3FMFI.js";
+import "./chunk-3M7BPSSW.js";
 import "./chunk-GYPQXTJU.js";
 import "./chunk-MKTSMWVD.js";
 import "./chunk-ZRVH3WCA.js";
-import "./chunk-FJBTCTZM.js";
+import "./chunk-P5F43A65.js";
 import "./chunk-WUQDUBJG.js";
 import "./chunk-RQHJBTEU.js";
 export {

package/dist/sdk-hooks.js

@@ -5,19 +5,19 @@ import {
   useSSEStream,
   useSdkSession,
   useToolCallStream
-} from "./chunk-EWIWYC2I.js";
+} from "./chunk-HW4ROISY.js";
 import "./chunk-OEX7NZE3.js";
 import {
   useAutoScroll,
   useRunCollapseState,
   useRunGroups
 } from "./chunk-AZWDI2JG.js";
-import "./chunk-F22SQTBP.js";
+import "./chunk-J3YZIQNI.js";
 import "./chunk-4ORVXSMU.js";
 import "./chunk-ULDNFLIM.js";
 import "./chunk-AAUNOHVL.js";
 import "./chunk-ZRVH3WCA.js";
-import "./chunk-FJBTCTZM.js";
+import "./chunk-P5F43A65.js";
 import "./chunk-WUQDUBJG.js";
 import "./chunk-RQHJBTEU.js";
 export {

package/package.json

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

package/src/editor/document-editor-pane.stories.tsx

@@ -0,0 +1,74 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { DocumentEditorPane } from './document-editor-pane'
+
+const MARKDOWN_SOURCE = `# GTM Agent Repository Overview
+
+Source: \`github.com/tangle-network/gtm-agent\`
+
+---
+
+## What It Is
+
+GTM Agent is an AI-powered go-to-market workspace where founders get a sandboxed environment.
+
+## Architecture
+
+| Layer | Owns | Location |
+| --- | --- | --- |
+| Engine | Stream normalization | \`@tangle-network/agent-app\` |
+| Shell | Auth, billing, RBAC, vault | \`src/routes/**\` |
+
+## Tech Stack
+
+- Frontend: Remix + Tailwind v4
+- Database: SQLite + Drizzle ORM
+- Sandbox: \`@tangle-network/sandbox\`
+
+[Launch](https://gtm.tangle.tools)
+`
+
+const meta: Meta<typeof DocumentEditorPane> = {
+  title: 'Editor/DocumentEditorPane',
+  component: DocumentEditorPane,
+  parameters: { layout: 'fullscreen', backgrounds: { default: 'dark' } },
+  decorators: [
+    (Story) => (
+      <div className="h-[620px] w-[900px] bg-background text-foreground">
+        <Story />
+      </div>
+    ),
+  ],
+}
+
+export default meta
+type Story = StoryObj<typeof DocumentEditorPane>
+
+export const PreviewDark: Story = {
+  name: 'Preview (dark theme)',
+  args: {
+    title: 'gtm-agent-repo.md',
+    subtitle: 'knowledge/gtm-agent-repo.md',
+    eyebrow: 'Artifact',
+    markdown: MARKDOWN_SOURCE,
+    mode: 'preview',
+  },
+}
+
+export const PreviewLight: Story = {
+  name: 'Preview (light theme)',
+  parameters: { backgrounds: { default: 'light' } },
+  decorators: [
+    (Story) => (
+      <div data-theme="tangle-light" className="h-[620px] w-[900px] bg-background text-foreground">
+        <Story />
+      </div>
+    ),
+  ],
+  args: {
+    title: 'gtm-agent-repo.md',
+    subtitle: 'knowledge/gtm-agent-repo.md',
+    eyebrow: 'Artifact',
+    markdown: MARKDOWN_SOURCE,
+    mode: 'preview',
+  },
+}

package/src/editor/document-editor-pane.tsx

@@ -182,6 +182,8 @@ export function DocumentEditorPane({
   footer,
   className,
   contentClassName,
+  headerClassName,
+  hideTitleBlock,
   tabs,
   toolbar,
   markdown = "",
@@ -287,11 +289,14 @@ export function DocumentEditorPane({
   const preview = (
     <div
       className={cn(
-        "rounded-[var(--radius-lg)] border border-border bg-background p-5",
+        // The outer margin is the card's gutter (rather than padding on the tab
+        // panel) so `previewClassName` can govern the whole box — gutter, border,
+        // surface, and inner padding — e.g. to render the document full-bleed.
+        "m-4 rounded-[var(--radius-lg)] border border-border bg-card p-5",
         previewClassName,
       )}
     >
-      <Markdown className="prose-sm max-w-none">{draft}</Markdown>
+      <Markdown>{draft}</Markdown>
     </div>
   );
 
@@ -337,9 +342,11 @@ export function DocumentEditorPane({
         tabs={tabs}
         className={className}
         contentClassName={contentClassName}
+        headerClassName={headerClassName}
         toolbar={editorToolbar}
+        hideTitleBlock={hideTitleBlock}
       >
-        <TabsContent value="preview" className="mt-0 h-full px-4 py-4">
+        <TabsContent value="preview" className="mt-0 h-full">
           {preview}
         </TabsContent>
         <TabsContent value="edit" className="mt-0 h-full px-4 py-4">

package/src/files/file-artifact-pane.tsx

@@ -44,6 +44,8 @@ export interface FileArtifactPaneProps extends Omit<FilePreviewProps, "className
   toolbar?: ArtifactPaneProps["toolbar"];
   footer?: ArtifactPaneProps["footer"];
   className?: string;
+  headerClassName?: ArtifactPaneProps["headerClassName"];
+  hideTitleBlock?: ArtifactPaneProps["hideTitleBlock"];
   editor?: FileArtifactPaneEditorOptions;
 }
 
@@ -68,6 +70,8 @@ export function FileArtifactPane({
   toolbar,
   footer,
   className,
+  headerClassName,
+  hideTitleBlock,
   editor,
 }: FileArtifactPaneProps) {
   const showTabs = tabs.length > 0 && onTabSelect && onTabClose;
@@ -83,7 +87,9 @@ export function FileArtifactPane({
     detectFileFormat(filename, mimeType) === "markdown" ||
     (path ? detectFileFormat(path, mimeType) === "markdown" : false);
   const isEditableMarkdown = isMarkdown && editor?.enabled;
-  const headerActions = (
+  // Undefined (not an empty fragment) when there are no actions, so ArtifactPane
+  // can collapse the header row entirely under hideTitleBlock.
+  const headerActions = onDownload || onClose ? (
     <>
       {onDownload && (
         <button
@@ -106,7 +112,7 @@ export function FileArtifactPane({
         </button>
       )}
     </>
-  );
+  ) : undefined;
 
   if (isEditableMarkdown) {
     return (
@@ -122,6 +128,8 @@ export function FileArtifactPane({
             className={className}
             tabs={paneTabs}
             headerActions={headerActions}
+            headerClassName={headerClassName}
+            hideTitleBlock={hideTitleBlock}
           >
             <div className="flex min-h-[12rem] items-center justify-center rounded-[var(--radius-lg)] border border-dashed border-border bg-muted text-sm text-muted-foreground">
               Loading editor…
@@ -139,6 +147,8 @@ export function FileArtifactPane({
           className={className}
           tabs={paneTabs}
           headerActions={headerActions}
+          headerClassName={headerClassName}
+          hideTitleBlock={hideTitleBlock}
           markdown={content ?? ""}
           mode={editor.mode}
           defaultMode={editor.defaultMode}
@@ -170,6 +180,8 @@ export function FileArtifactPane({
       className={className}
       tabs={paneTabs}
       headerActions={headerActions}
+      headerClassName={headerClassName}
+      hideTitleBlock={hideTitleBlock}
     >
       <FilePreview
         filename={filename}

package/src/files/file-preview.stories.tsx

@@ -43,7 +43,15 @@ Markdown still renders as **prose**, not as a code block.
 
 - Themed headings
 - \`inline code\`
-- [links](https://tangle.tools)`
+- [links](https://tangle.tools)
+
+---
+
+| Element | Expected |
+| --- | --- |
+| Body | readable foreground |
+| Table | subtle borders |
+| Code | tokenized accent |`
 
 const meta: Meta<typeof FilePreview> = {
   title: 'Files/FilePreview',
@@ -85,3 +93,16 @@ export const MarkdownProse: Story = {
   name: 'Markdown (rendered prose)',
   args: { filename: 'README.md', content: MARKDOWN_SOURCE },
 }
+
+export const MarkdownProseLight: Story = {
+  name: 'Markdown (light theme)',
+  parameters: { backgrounds: { default: 'light' } },
+  decorators: [
+    (Story) => (
+      <div data-theme="tangle-light" className="h-[560px] w-[760px] bg-background text-foreground">
+        <Story />
+      </div>
+    ),
+  ],
+  args: { filename: 'README.md', content: MARKDOWN_SOURCE },
+}

package/src/files/file-preview.tsx

@@ -171,7 +171,7 @@ function PdfPreview({ blobUrl, filename }: { blobUrl: string; filename: string }
 
 function TextPreview({ content }: { content: string }) {
   return (
-    <pre className="bg-background rounded-[var(--radius-md)] border border-border p-4 overflow-auto max-h-[70vh] text-sm text-foreground font-mono leading-[1.55]">
+    <pre className="bg-card rounded-[var(--radius-md)] border border-border p-4 overflow-auto max-h-[70vh] text-sm text-foreground font-mono leading-[1.55]">
       {content}
     </pre>
   );
@@ -199,7 +199,7 @@ function UnsupportedPreview({
 function MarkdownPreview({ content }: { content: string }) {
   return (
     <div className="rounded-[var(--radius-md)] border border-border bg-background p-5">
-      <Markdown className="prose-sm max-w-none">{content}</Markdown>
+      <Markdown>{content}</Markdown>
     </div>
   );
 }

package/src/markdown/markdown.stories.tsx

@@ -10,7 +10,7 @@ const markdownMeta: Meta<typeof Markdown> = {
   parameters: { layout: 'centered', backgrounds: { default: 'dark' } },
   decorators: [
     (Story) => (
-      <div className="w-[680px] p-6 rounded-xl bg-card text-foreground">
+      <div className="w-[680px] rounded-xl bg-card p-6 text-foreground">
         <Story />
       </div>
     ),
@@ -20,6 +20,60 @@ const markdownMeta: Meta<typeof Markdown> = {
 export default markdownMeta
 type Story = StoryObj<typeof Markdown>
 
+const CONTRAST_MARKDOWN = `# GTM Agent Repository Overview
+
+Source: \`github.com/tangle-network/gtm-agent\` Live at: [gtm.tangle.tools](https://gtm.tangle.tools)
+
+---
+
+## What It Is
+
+GTM Agent is an AI-powered go-to-market workspace where founders get a sandboxed environment with an AI co-founder.
+
+## Architecture
+
+| Layer | Owns | Location |
+|------|------|----------|
+| Engine | Stream normalization, DB port, harness | \`@tangle-network/agent-app\` |
+| Shell | Auth, billing, RBAC, vault | \`src/routes/**\` |
+| Runtime | Customer motion | Live sandbox |
+
+## Tech Stack
+
+- **Frontend:** Remix + Tailwind v4
+- **Database:** SQLite + Drizzle ORM
+- **Sandbox:** \`@tangle-network/sandbox\`
+
+> Prime directive: ship the shell, never hardcode customer motion.
+
+\`inline code\` stays readable beside paragraphs.
+
+\`\`\`ts
+export function readable(theme: 'light' | 'dark') {
+  return theme
+}
+\`\`\`
+`
+
+export const LightThemeRegression: Story = {
+  name: 'Light theme regression',
+  parameters: { backgrounds: { default: 'light' } },
+  render: () => (
+    <div data-theme="tangle-light" className="rounded-xl bg-background p-6 text-foreground">
+      <Markdown>{CONTRAST_MARKDOWN}</Markdown>
+    </div>
+  ),
+}
+
+export const DarkThemeRegression: Story = {
+  name: 'Dark theme regression',
+  render: () => (
+    <div className="rounded-xl bg-background p-6 text-foreground">
+      <Markdown>{CONTRAST_MARKDOWN}</Markdown>
+    </div>
+  ),
+}
+
 export const Prose: Story = {
   name: 'Prose',
   args: {

package/src/markdown/markdown.test.tsx

@@ -0,0 +1,23 @@
+import { describe, expect, it } from "vitest";
+import { render } from "@testing-library/react";
+import { Markdown } from "./markdown";
+
+describe("Markdown", () => {
+  it("uses the tokenized Tangle prose class instead of host typography defaults", () => {
+    const { container } = render(<Markdown>{"# Heading\n\nBody with `code`."}</Markdown>);
+    const surface = container.firstElementChild;
+
+    expect(surface).toHaveClass("tangle-prose");
+    expect(surface).not.toHaveClass("prose");
+    expect(surface).not.toHaveClass("dark:prose-invert");
+  });
+
+  it("keeps inline code on semantic tokens", () => {
+    const { container } = render(<Markdown>{"Use `token` values."}</Markdown>);
+    const inlineCode = container.querySelector("code");
+
+    expect(inlineCode).toHaveClass("border-border");
+    expect(inlineCode).toHaveClass("bg-card");
+    expect(inlineCode).toHaveClass("text-[var(--code-keyword)]");
+  });
+});

package/src/markdown/markdown.tsx

@@ -17,7 +17,7 @@ export interface MarkdownProps {
 export const Markdown = memo(({ children, className }: MarkdownProps) => {
   return (
     <div
-      className={cn("prose prose-sm dark:prose-invert max-w-none", className)}
+      className={cn("tangle-prose max-w-none text-sm", className)}
     >
       <ReactMarkdown
         remarkPlugins={[remarkGfm]}

package/src/primitives/artifact-pane.tsx

@@ -14,6 +14,15 @@ export interface ArtifactPaneProps {
   children?: ReactNode;
   className?: string;
   contentClassName?: string;
+  /** Extra classes for the header band (e.g. to align its surface with the host chrome). */
+  headerClassName?: string;
+  /**
+   * Suppress the eyebrow/title/subtitle/meta block. Use when the host already
+   * shows the artifact's identity elsewhere (e.g. a surrounding path row), so the
+   * pane keeps only its tabs, toolbar, and header actions. The whole header row
+   * collapses when nothing else would render in it.
+   */
+  hideTitleBlock?: boolean;
 }
 
 /**
@@ -33,8 +42,17 @@ export function ArtifactPane({
   children,
   className,
   contentClassName,
+  headerClassName,
+  hideTitleBlock = false,
 }: ArtifactPaneProps) {
   const hasContent = children !== undefined && children !== null;
+  // With the title block hidden, still render the top row if there are header
+  // actions to place; the block itself just collapses to empty.
+  const showTitleRow = !hideTitleBlock || Boolean(headerActions);
+  const hasHeader = showTitleRow || Boolean(tabs) || Boolean(toolbar);
+  // The toolbar's top divider only reads as a separator when something sits
+  // above it; as the header's first row it would double the host's own border.
+  const toolbarNeedsDivider = showTitleRow || Boolean(tabs);
 
   return (
     <section
@@ -43,35 +61,43 @@ export function ArtifactPane({
         className,
       )}
     >
-      <header className="border-b border-border bg-muted/10">
-        <div className="flex items-start justify-between gap-3 px-3 py-2">
-          <div className="min-w-0 flex-1">
-            {eyebrow && (
-              <div className="mb-1 inline-flex max-w-full items-center px-1 py-0.5 text-[10px] font-bold uppercase tracking-wider text-muted-foreground">
-                {eyebrow}
+      {hasHeader && (
+        <header className={cn("border-b border-border bg-muted/10", headerClassName)}>
+          {showTitleRow && (
+            <div className="flex items-start justify-between gap-3 px-3 py-2">
+              <div className="min-w-0 flex-1">
+                {!hideTitleBlock && (
+                  <>
+                    {eyebrow && (
+                      <div className="mb-1 inline-flex max-w-full items-center px-1 py-0.5 text-[10px] font-bold uppercase tracking-wider text-muted-foreground">
+                        {eyebrow}
+                      </div>
+                    )}
+                    <div className="min-w-0 text-[13px] font-medium text-foreground">
+                      {title}
+                    </div>
+                    {(subtitle || meta) && (
+                      <div className="mt-1 flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1 text-xs leading-relaxed text-muted-foreground">
+                        {subtitle && <span className="truncate">{subtitle}</span>}
+                        {meta && <span className="flex items-center gap-2">{meta}</span>}
+                      </div>
+                    )}
+                  </>
+                )}
               </div>
-            )}
-            <div className="min-w-0 text-[13px] font-medium text-foreground">
-              {title}
+              {headerActions && (
+                <div className="flex shrink-0 items-center gap-1.5">{headerActions}</div>
+              )}
+            </div>
+          )}
+          {tabs}
+          {toolbar && (
+            <div className={cn("px-3 py-2", toolbarNeedsDivider && "border-t border-border")}>
+              {toolbar}
             </div>
-            {(subtitle || meta) && (
-              <div className="mt-1 flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1 text-xs leading-relaxed text-muted-foreground">
-                {subtitle && <span className="truncate">{subtitle}</span>}
-                {meta && <span className="flex items-center gap-2">{meta}</span>}
-              </div>
-            )}
-          </div>
-          {headerActions && (
-            <div className="flex shrink-0 items-center gap-1.5">{headerActions}</div>
           )}
-        </div>
-        {tabs}
-        {toolbar && (
-          <div className="border-t border-border px-3 py-2">
-            {toolbar}
-          </div>
-        )}
-      </header>
+        </header>
+      )}
 
       <div className={cn("min-h-0 flex-1 overflow-auto", contentClassName)}>
         {hasContent ? (