From 27e427abf6111ee8456e1275bbd81e6c86d6fc29 Mon Sep 17 00:00:00 2001
From: Nishant Bangarwa <nishant.monu51@gmail.com>
Date: Wed, 22 Jul 2026 09:08:08 +0530
Subject: [PATCH 1/2] feat: export canvas tab groups to PDF

---
 .../share/ShareDashboardPopover.svelte        | 16 +++++
 .../features/canvas/stores/canvas-entity.ts   |  4 ++
 .../exports/pdf/CanvasPdfExportTab.svelte     | 56 +++++++++++++++++
 .../pdf/CanvasPdfExportTabGroup.svelte        | 32 ++++++++++
 .../exports/pdf/CanvasPdfExportView.svelte    | 38 ++++++++----
 .../exports/pdf/ExportDashboardForm.svelte    | 18 ++++++
 .../src/features/exports/pdf/capture.spec.ts  | 62 ++++++++++++++++++-
 .../src/features/exports/pdf/capture.ts       | 48 +++++++++-----
 .../features/exports/pdf/export-canvas-pdf.ts |  1 +
 web-common/src/features/exports/pdf/types.ts  |  4 ++
 web-common/src/lib/i18n/messages/en.json      |  2 +
 web-common/src/lib/i18n/messages/es.json      |  2 +
 12 files changed, 254 insertions(+), 29 deletions(-)
 create mode 100644 web-common/src/features/exports/pdf/CanvasPdfExportTab.svelte
 create mode 100644 web-common/src/features/exports/pdf/CanvasPdfExportTabGroup.svelte

diff --git a/web-admin/src/features/dashboards/share/ShareDashboardPopover.svelte b/web-admin/src/features/dashboards/share/ShareDashboardPopover.svelte
index c0fc661ff5e5..793b877fa316 100644
--- a/web-admin/src/features/dashboards/share/ShareDashboardPopover.svelte
+++ b/web-admin/src/features/dashboards/share/ShareDashboardPopover.svelte
@@ -17,10 +17,13 @@
   import Tooltip from "@rilldata/web-common/components/tooltip/Tooltip.svelte";
   import TooltipContent from "@rilldata/web-common/components/tooltip/TooltipContent.svelte";
   import { featureFlags } from "@rilldata/web-common/features/feature-flags";
+  import { getCanvasStoreUnguarded } from "@rilldata/web-common/features/canvas/state-managers/state-managers";
+  import type { LayoutBlock } from "@rilldata/web-common/features/canvas/stores/tab-group";
   import ExportDashboardForm from "@rilldata/web-common/features/exports/pdf/ExportDashboardForm.svelte";
   import { exportCanvasPdf } from "@rilldata/web-common/features/exports/pdf/export-canvas-pdf";
   import type { PdfExportRunOptions } from "@rilldata/web-common/features/exports/pdf/types";
   import { m } from "@rilldata/web-common/lib/i18n/gen/messages";
+  import { readable } from "svelte/store";
 
   export let createMagicAuthTokens: boolean;
   // Provide canvas identifiers to enable the "PDF" tab (canvas dashboards only).
@@ -42,6 +45,18 @@
       exportCanvasPdf({ canvasName: name, instanceId: id, ...o });
   }
 
+  const emptyLayout = readable<LayoutBlock[]>([]);
+  // Resolved when the popover opens (the canvas store may not yet be
+  // initialized when this header button first mounts).
+  $: layoutStore =
+    (isOpen &&
+      canvasName &&
+      instanceId &&
+      getCanvasStoreUnguarded(canvasName, instanceId)?.canvasEntity.layout) ||
+    emptyLayout;
+  // Gates the all-tabs/active-tab option in the PDF export form.
+  $: hasTabGroups = $layoutStore.some((block) => block.kind === "tab-group");
+
   function onCopy() {
     navigator.clipboard.writeText(window.location.href).catch(console.error);
     copied = true;
@@ -106,6 +121,7 @@
         <TabsContent value="pdf" class="mt-0 p-4">
           <ExportDashboardForm
             runExport={runPdfExport}
+            showTabOptions={hasTabGroups}
             onComplete={() => (isOpen = false)}
           />
         </TabsContent>
diff --git a/web-common/src/features/canvas/stores/canvas-entity.ts b/web-common/src/features/canvas/stores/canvas-entity.ts
index 686517b3f2b8..43db28f65487 100644
--- a/web-common/src/features/canvas/stores/canvas-entity.ts
+++ b/web-common/src/features/canvas/stores/canvas-entity.ts
@@ -126,6 +126,10 @@ export class CanvasEntity {
   // data query (see BaseCanvasComponent.dataEnabled) so all components fetch and
   // render regardless of the lazy-load latch, without mutating that latch.
   exportMode = writable<boolean>(false);
+  // Whether the PDF export renders every tab of each tab group (stacked in strip
+  // order) or only each group's active tab. Set by exportCanvasPdf alongside
+  // exportMode; read by CanvasPdfExportView.
+  exportAllTabs = writable<boolean>(true);
 
   // This is to skip processing the spec the first time the store updates with a value
   // We've already called it as part of the constructor
diff --git a/web-common/src/features/exports/pdf/CanvasPdfExportTab.svelte b/web-common/src/features/exports/pdf/CanvasPdfExportTab.svelte
new file mode 100644
index 000000000000..8f715e6c07d5
--- /dev/null
+++ b/web-common/src/features/exports/pdf/CanvasPdfExportTab.svelte
@@ -0,0 +1,56 @@
+<script lang="ts">
+  import type { BaseCanvasComponent } from "@rilldata/web-common/features/canvas/components/BaseCanvasComponent";
+  import StaticCanvasRow from "@rilldata/web-common/features/canvas/StaticCanvasRow.svelte";
+  import type { Tab } from "@rilldata/web-common/features/canvas/stores/tab-group";
+
+  // One exported tab: a label band naming the tab (captured as its own block,
+  // see captureTargetsIn) followed by the tab's rows. The idPrefix namespaces
+  // the row ids so the same rowIndex in different tabs stays unique.
+  let {
+    groupName,
+    tab,
+    components,
+    maxWidth,
+  }: {
+    groupName: string;
+    tab: Tab;
+    components: Map<string, BaseCanvasComponent>;
+    maxWidth: number;
+  } = $props();
+
+  const rows = $derived(tab.grid);
+</script>
+
+<section
+  id={`pdf-tab-label-${groupName}-${tab.name}`}
+  class="pdf-tab-label-row w-full h-fit relative"
+  style:max-width="{maxWidth}px"
+>
+  <h2>{tab.displayName}</h2>
+</section>
+
+{#each $rows as row, rowIndex (rowIndex)}
+  <StaticCanvasRow
+    {row}
+    {rowIndex}
+    {components}
+    {maxWidth}
+    navigationEnabled={false}
+    lazy={false}
+    idPrefix={`${groupName}-${tab.name}-`}
+  />
+{/each}
+
+<style lang="postcss">
+  /* Mimics the live tab strip: the tab's name underlined in the accent color on
+     a hairline spanning the row, so the PDF shows which tab the rows below
+     belong to. */
+  .pdf-tab-label-row {
+    @apply flex items-end border-b border-gray-200 px-2 pt-3;
+  }
+
+  h2 {
+    @apply -mb-px w-fit border-b-2 border-primary-500 px-1 pb-1;
+    @apply text-sm font-medium text-fg-primary;
+  }
+</style>
diff --git a/web-common/src/features/exports/pdf/CanvasPdfExportTabGroup.svelte b/web-common/src/features/exports/pdf/CanvasPdfExportTabGroup.svelte
new file mode 100644
index 000000000000..7a1feaf929dc
--- /dev/null
+++ b/web-common/src/features/exports/pdf/CanvasPdfExportTabGroup.svelte
@@ -0,0 +1,32 @@
+<script lang="ts">
+  import type { BaseCanvasComponent } from "@rilldata/web-common/features/canvas/components/BaseCanvasComponent";
+  import type { TabGroup } from "@rilldata/web-common/features/canvas/stores/tab-group";
+  import CanvasPdfExportTab from "./CanvasPdfExportTab.svelte";
+
+  // PDF-capture render of a tab group. Unlike the live CanvasTabGroupView
+  // (interactive strip, only the active tab mounted), the exported tabs are
+  // stacked: each tab contributes a label band naming it followed by its rows,
+  // one tab below the previous in strip order. When allTabs is false only the
+  // group's active tab is rendered, so the PDF matches what the user sees.
+  let {
+    group,
+    components,
+    maxWidth,
+    allTabs,
+  }: {
+    group: TabGroup;
+    components: Map<string, BaseCanvasComponent>;
+    maxWidth: number;
+    allTabs: boolean;
+  } = $props();
+
+  const tabs = $derived(group.tabs);
+  const activeTabIndex = $derived(group.activeTabIndex);
+  const exportTabs = $derived(
+    allTabs ? $tabs : $tabs[$activeTabIndex] ? [$tabs[$activeTabIndex]] : [],
+  );
+</script>
+
+{#each exportTabs as tab (tab.name)}
+  <CanvasPdfExportTab groupName={group.name} {tab} {components} {maxWidth} />
+{/each}
diff --git a/web-common/src/features/exports/pdf/CanvasPdfExportView.svelte b/web-common/src/features/exports/pdf/CanvasPdfExportView.svelte
index 4a11a783165a..ed06c47ddfe6 100644
--- a/web-common/src/features/exports/pdf/CanvasPdfExportView.svelte
+++ b/web-common/src/features/exports/pdf/CanvasPdfExportView.svelte
@@ -2,23 +2,28 @@
   import { getCanvasStore } from "@rilldata/web-common/features/canvas/state-managers/state-managers";
   import StaticCanvasRow from "@rilldata/web-common/features/canvas/StaticCanvasRow.svelte";
   import CanvasPdfExportHeader from "./CanvasPdfExportHeader.svelte";
+  import CanvasPdfExportTabGroup from "./CanvasPdfExportTabGroup.svelte";
 
   // A dedicated, read-only render of the whole canvas used solely as the PDF
-  // capture target. It reuses the live dashboard's row/component rendering off
+  // capture target. It reuses the live dashboard's block/component rendering off
   // the same canvas store, but renders every component eagerly (lazy={false}) so
   // the capture is complete without touching the live dashboard's lazy-load
-  // state. See captureCanvasBlocks, which reads from #canvas-pdf-export-view.
+  // state. Tab groups are flattened for print: every exported tab (all tabs, or
+  // only each group's active one — see exportAllTabs) renders as a label band
+  // followed by its rows, stacked in strip order.
+  // See captureCanvasBlocks, which reads from #canvas-pdf-export-view.
   export let canvasName: string;
   export let instanceId: string;
   // Render width in px; matches the on-screen content width for fidelity.
   export let width: number;
 
   $: ({
-    canvasEntity: { componentsStore, _rows },
+    canvasEntity: { componentsStore, _rows, layout, exportAllTabs },
   } = getCanvasStore(canvasName, instanceId));
 
   $: components = $componentsStore;
   $: rows = $_rows;
+  $: blocks = $layout;
 </script>
 
 <div
@@ -34,15 +39,24 @@
     class="row-container w-full h-fit flex flex-col items-center relative"
     style:width="{width}px"
   >
-    {#each rows as row, rowIndex (rowIndex)}
-      <StaticCanvasRow
-        {row}
-        {rowIndex}
-        {components}
-        maxWidth={width}
-        navigationEnabled={false}
-        lazy={false}
-      />
+    {#each blocks as block (block.kind === "tab-group" ? `g-${block.group.name}` : `r-${block.rowIndex}`)}
+      {#if block.kind === "tab-group"}
+        <CanvasPdfExportTabGroup
+          group={block.group}
+          {components}
+          maxWidth={width}
+          allTabs={$exportAllTabs}
+        />
+      {:else if rows[block.freeRowIndex]}
+        <StaticCanvasRow
+          row={rows[block.freeRowIndex]}
+          rowIndex={block.rowIndex}
+          {components}
+          maxWidth={width}
+          navigationEnabled={false}
+          lazy={false}
+        />
+      {/if}
     {/each}
   </div>
 </div>
diff --git a/web-common/src/features/exports/pdf/ExportDashboardForm.svelte b/web-common/src/features/exports/pdf/ExportDashboardForm.svelte
index d10ae3253d63..46169df4d334 100644
--- a/web-common/src/features/exports/pdf/ExportDashboardForm.svelte
+++ b/web-common/src/features/exports/pdf/ExportDashboardForm.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
   import { Button } from "@rilldata/web-common/components/button";
   import Checkbox from "@rilldata/web-common/components/forms/Checkbox.svelte";
+  import Radio from "@rilldata/web-common/components/forms/Radio.svelte";
   import { eventBus } from "@rilldata/web-common/lib/event-bus/event-bus";
   import { extractErrorMessage } from "@rilldata/web-common/lib/errors";
   import { m } from "@rilldata/web-common/lib/i18n/gen/messages";
@@ -13,8 +14,13 @@
   // in the future.
   export let runExport: (opts: PdfExportRunOptions) => Promise<void>;
   export let onComplete: () => void = () => {};
+  // Shown only when the dashboard has tab groups: whether to export every tab
+  // or only each group's active tab.
+  export let showTabOptions = false;
 
   let includeFilters = true;
+  // Radio binds a plain string; "all" or "active".
+  let tabMode: string = "all";
 
   let exporting = false;
   let progressLabel = m.export_pdf_button();
@@ -34,6 +40,7 @@
     try {
       await runExport({
         includeFilters,
+        allTabs: tabMode === "all",
         onProgress: ({ phase }) => {
           progressLabel = PROGRESS_COPY[phase];
         },
@@ -66,6 +73,17 @@
     label={m.export_pdf_include_filters()}
   />
 
+  {#if showTabOptions}
+    <Radio
+      name="pdf-tab-export"
+      bind:value={tabMode}
+      options={[
+        { value: "all", label: m.export_pdf_tabs_all() },
+        { value: "active", label: m.export_pdf_tabs_active() },
+      ]}
+    />
+  {/if}
+
   <Button
     type="primary"
     loading={exporting}
diff --git a/web-common/src/features/exports/pdf/capture.spec.ts b/web-common/src/features/exports/pdf/capture.spec.ts
index bec9559beb39..2e1b20b45858 100644
--- a/web-common/src/features/exports/pdf/capture.spec.ts
+++ b/web-common/src/features/exports/pdf/capture.spec.ts
@@ -1,6 +1,6 @@
 // @vitest-environment jsdom
 import { describe, expect, it } from "vitest";
-import { inlineSvgStyles } from "./capture";
+import { captureTargetsIn, inlineSvgStyles, rowIndexFor } from "./capture";
 
 describe("inlineSvgStyles", () => {
   it("restores original SVG style attributes", () => {
@@ -27,3 +27,63 @@ describe("inlineSvgStyles", () => {
     expect(circle.hasAttribute("style")).toBe(false);
   });
 });
+
+describe("captureTargetsIn", () => {
+  // Mirrors the export render: free rows and tab rows are top-level <section>s
+  // holding component cards, and each exported tab is preceded by its label
+  // band (a section.pdf-tab-label-row; see CanvasPdfExportTab).
+  function renderExportDom(): HTMLElement {
+    const container = document.createElement("div");
+    container.innerHTML = `
+      <section id="canvas-row-0">
+        <article id="free-a" class="component-card"></article>
+        <article id="free-b" class="component-card"></article>
+      </section>
+      <section id="pdf-tab-label-overview-first" class="pdf-tab-label-row"></section>
+      <section id="canvas-row-overview-first-0">
+        <article id="tab-a" class="component-card"></article>
+        <article id="tab-b" class="component-card"></article>
+      </section>
+      <section id="pdf-tab-label-overview-second" class="pdf-tab-label-row"></section>
+      <section id="canvas-row-overview-second-0">
+        <article id="tab-c" class="component-card"></article>
+      </section>
+      <section id="canvas-row-2">
+        <article id="free-c" class="component-card"></article>
+      </section>
+    `;
+    return container;
+  }
+
+  it("captures every card plus each tab's label band, in document order", () => {
+    const container = renderExportDom();
+
+    const targets = captureTargetsIn(container);
+
+    expect(targets.map((el) => el.id)).toStrictEqual([
+      "free-a",
+      "free-b",
+      "pdf-tab-label-overview-first",
+      "tab-a",
+      "tab-b",
+      "pdf-tab-label-overview-second",
+      "tab-c",
+      "free-c",
+    ]);
+  });
+
+  it("stacks each tab's label and rows between the surrounding free rows", () => {
+    const container = renderExportDom();
+    const indexOf = (selector: string) =>
+      rowIndexFor(container.querySelector<HTMLElement>(selector)!, container);
+
+    expect(indexOf("#free-a")).toBe(0);
+    expect(indexOf("#free-b")).toBe(0);
+    expect(indexOf("#pdf-tab-label-overview-first")).toBe(1);
+    expect(indexOf("#tab-a")).toBe(2);
+    expect(indexOf("#tab-b")).toBe(2);
+    expect(indexOf("#pdf-tab-label-overview-second")).toBe(3);
+    expect(indexOf("#tab-c")).toBe(4);
+    expect(indexOf("#free-c")).toBe(5);
+  });
+});
diff --git a/web-common/src/features/exports/pdf/capture.ts b/web-common/src/features/exports/pdf/capture.ts
index dd1c05df17dd..c3eb33737eb3 100644
--- a/web-common/src/features/exports/pdf/capture.ts
+++ b/web-common/src/features/exports/pdf/capture.ts
@@ -78,8 +78,9 @@ export interface CaptureOptions {
   onProgress?: (ratio: number) => void;
 }
 
-// Rasterizes the filter bar (optional) and each canvas component into image
-// blocks positioned relative to the canvas content area. Per-block failures
+// Rasterizes the filter bar (optional) and each canvas block into images
+// positioned relative to the canvas content area: every component card plus the
+// label band above each exported tab (see captureTargetsIn). Per-block failures
 // degrade to a skipped block rather than aborting the whole export.
 export async function captureCanvasBlocks(
   opts: CaptureOptions,
@@ -108,12 +109,10 @@ export async function captureCanvasBlocks(
   const contentWidthPx = rowContainer.clientWidth;
   const backgroundColor = getComputedStyle(exportView).backgroundColor;
 
-  const articles = Array.from(
-    rowContainer.querySelectorAll<HTMLElement>("article.component-card"),
-  );
+  const targets = captureTargetsIn(rowContainer);
 
   const blocks: CapturedBlock[] = [];
-  const total = articles.length + (opts.includeFilters ? 1 : 0);
+  const total = targets.length + (opts.includeFilters ? 1 : 0);
   let done = 0;
   const reportProgress = () => opts.onProgress?.(total ? done / total : 1);
 
@@ -149,21 +148,21 @@ export async function captureCanvasBlocks(
     reportProgress();
   }
 
-  for (const article of articles) {
-    const rect = article.getBoundingClientRect();
+  for (const target of targets) {
+    const rect = target.getBoundingClientRect();
     try {
-      const dataUrl = await rasterizeNode(article, backgroundColor);
+      const dataUrl = await rasterizeNode(target, backgroundColor);
       blocks.push({
-        id: article.id,
+        id: target.id,
         dataUrl,
         xPx: rect.left - contentRect.left,
         yPx: rect.top - contentRect.top,
         widthPx: rect.width,
         heightPx: rect.height,
-        rowIndex: rowIndexFor(article, rowContainer),
+        rowIndex: rowIndexFor(target, rowContainer),
       });
     } catch (e) {
-      console.warn(`Failed to capture canvas component "${article.id}"`, e);
+      console.warn(`Failed to capture canvas block "${target.id}"`, e);
     }
     done += 1;
     reportProgress();
@@ -172,10 +171,27 @@ export async function captureCanvasBlocks(
   return { blocks, contentWidthPx, backgroundColor };
 }
 
-// Canvas rows are <section> elements; use the section's DOM order as the row
-// index so components in the same row are grouped and laid out together.
-function rowIndexFor(article: HTMLElement, rowContainer: HTMLElement): number {
-  const section = article.closest("section");
+// The units to rasterize, in document order: every component card (top-level
+// rows and exported tab rows alike, since the export view flattens tab groups
+// into plain rows) plus the label band above each exported tab (see
+// CanvasPdfExportTab). Capturing the bands keeps it visible in the PDF which
+// tab the rows below belong to.
+export function captureTargetsIn(rowContainer: HTMLElement): HTMLElement[] {
+  return Array.from(
+    rowContainer.querySelectorAll<HTMLElement>(
+      "article.component-card, section.pdf-tab-label-row",
+    ),
+  );
+}
+
+// Canvas rows (and tab label bands) are <section> elements; use the nearest
+// section's DOM order as the row index so blocks in the same row are grouped
+// and laid out together.
+export function rowIndexFor(
+  target: HTMLElement,
+  rowContainer: HTMLElement,
+): number {
+  const section = target.closest("section");
   if (!section) return 0;
   const sections = Array.from(rowContainer.querySelectorAll("section"));
   const index = sections.indexOf(section);
diff --git a/web-common/src/features/exports/pdf/export-canvas-pdf.ts b/web-common/src/features/exports/pdf/export-canvas-pdf.ts
index aa182189497a..bc2da67ef4e7 100644
--- a/web-common/src/features/exports/pdf/export-canvas-pdf.ts
+++ b/web-common/src/features/exports/pdf/export-canvas-pdf.ts
@@ -24,6 +24,7 @@ export async function exportCanvasPdf(
   // Mount the off-screen export render (see CanvasPdfExportView) and force-enable
   // every component's data query; the tick() inside prepareCanvasForCapture
   // flushes it into the DOM before we capture. The live dashboard is untouched.
+  canvasEntity.exportAllTabs.set(opts.allTabs);
   canvasEntity.exportMode.set(true);
 
   try {
diff --git a/web-common/src/features/exports/pdf/types.ts b/web-common/src/features/exports/pdf/types.ts
index 01f1ca75aba3..272643f22613 100644
--- a/web-common/src/features/exports/pdf/types.ts
+++ b/web-common/src/features/exports/pdf/types.ts
@@ -19,6 +19,9 @@ export interface ExportProgress {
 // orchestrators (canvas, explore) receive these plus their own identifiers.
 export interface PdfExportRunOptions {
   includeFilters: boolean;
+  // When true, every tab of each tab group is exported, stacked in strip order;
+  // when false, only each group's active tab. Irrelevant without tab groups.
+  allTabs: boolean;
   onProgress?: (progress: ExportProgress) => void;
 }
 
@@ -26,6 +29,7 @@ export interface ExportCanvasPdfOptions {
   canvasName: string;
   instanceId: string;
   includeFilters: boolean;
+  allTabs: boolean;
   timeoutMs?: number;
   onProgress?: (progress: ExportProgress) => void;
 }
diff --git a/web-common/src/lib/i18n/messages/en.json b/web-common/src/lib/i18n/messages/en.json
index 5df177470ab4..a7561e6f9406 100644
--- a/web-common/src/lib/i18n/messages/en.json
+++ b/web-common/src/lib/i18n/messages/en.json
@@ -1103,6 +1103,8 @@
   "export_pdf_include_filters": "Include filters",
   "export_pdf_rendering_charts": "Rendering charts…",
   "export_pdf_success": "Dashboard exported as PDF",
+  "export_pdf_tabs_active": "Export active tab only",
+  "export_pdf_tabs_all": "Export all tabs",
   "field_list_add_fields": "Add {label} fields",
   "field_list_aria": "{label} field list",
   "field_list_dimensions": "DIMENSIONS",
diff --git a/web-common/src/lib/i18n/messages/es.json b/web-common/src/lib/i18n/messages/es.json
index 089440a67a01..ca62b7d81140 100644
--- a/web-common/src/lib/i18n/messages/es.json
+++ b/web-common/src/lib/i18n/messages/es.json
@@ -1112,6 +1112,8 @@
   "export_pdf_include_filters": "Incluir filtros",
   "export_pdf_rendering_charts": "Renderizando gráficos…",
   "export_pdf_success": "Dashboard exportado como PDF",
+  "export_pdf_tabs_active": "Exportar solo la pestaña activa",
+  "export_pdf_tabs_all": "Exportar todas las pestañas",
   "field_list_add_fields": "Agregar campos de {label}",
   "field_list_aria": "Lista de campos de {label}",
   "field_list_dimensions": "DIMENSIONES",

From e113cd37bbb28b17e7a86274a4612f1cd6bbb977 Mon Sep 17 00:00:00 2001
From: Nishant Bangarwa <nishant.monu51@gmail.com>
Date: Thu, 23 Jul 2026 20:31:40 +0530
Subject: [PATCH 2/2] Address review: all-tabs checkbox, keep tab labels with
 their rows, hide scrollbars in PDF export

---
 .../exports/pdf/CanvasPdfExportView.svelte    |  8 ++++
 .../exports/pdf/ExportDashboardForm.svelte    | 17 +++-----
 .../src/features/exports/pdf/capture.spec.ts  | 27 ++++++++++--
 .../src/features/exports/pdf/capture.ts       | 21 ++++++++--
 .../src/features/exports/pdf/layout.spec.ts   | 41 +++++++++++++++++++
 web-common/src/features/exports/pdf/layout.ts |  6 ++-
 web-common/src/lib/i18n/messages/en.json      |  1 -
 web-common/src/lib/i18n/messages/es.json      |  1 -
 8 files changed, 102 insertions(+), 20 deletions(-)

diff --git a/web-common/src/features/exports/pdf/CanvasPdfExportView.svelte b/web-common/src/features/exports/pdf/CanvasPdfExportView.svelte
index ed06c47ddfe6..22cfb67cc5f5 100644
--- a/web-common/src/features/exports/pdf/CanvasPdfExportView.svelte
+++ b/web-common/src/features/exports/pdf/CanvasPdfExportView.svelte
@@ -66,4 +66,12 @@
     container-type: inline-size;
     container-name: canvas-container;
   }
+
+  /* Scrollbars on overflowing components (tables, legends) would be rasterized
+     into the capture. Applied per element via `*` because html-to-image inlines
+     each element's computed styles into its clone: computed scrollbar-width
+     survives the cloning, whereas ::-webkit-scrollbar stylesheet rules do not. */
+  #canvas-pdf-export-view :global(*) {
+    scrollbar-width: none;
+  }
 </style>
diff --git a/web-common/src/features/exports/pdf/ExportDashboardForm.svelte b/web-common/src/features/exports/pdf/ExportDashboardForm.svelte
index 46169df4d334..936c8b278cb5 100644
--- a/web-common/src/features/exports/pdf/ExportDashboardForm.svelte
+++ b/web-common/src/features/exports/pdf/ExportDashboardForm.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
   import { Button } from "@rilldata/web-common/components/button";
   import Checkbox from "@rilldata/web-common/components/forms/Checkbox.svelte";
-  import Radio from "@rilldata/web-common/components/forms/Radio.svelte";
   import { eventBus } from "@rilldata/web-common/lib/event-bus/event-bus";
   import { extractErrorMessage } from "@rilldata/web-common/lib/errors";
   import { m } from "@rilldata/web-common/lib/i18n/gen/messages";
@@ -19,8 +18,7 @@
   export let showTabOptions = false;
 
   let includeFilters = true;
-  // Radio binds a plain string; "all" or "active".
-  let tabMode: string = "all";
+  let allTabs = true;
 
   let exporting = false;
   let progressLabel = m.export_pdf_button();
@@ -40,7 +38,7 @@
     try {
       await runExport({
         includeFilters,
-        allTabs: tabMode === "all",
+        allTabs,
         onProgress: ({ phase }) => {
           progressLabel = PROGRESS_COPY[phase];
         },
@@ -74,13 +72,10 @@
   />
 
   {#if showTabOptions}
-    <Radio
-      name="pdf-tab-export"
-      bind:value={tabMode}
-      options={[
-        { value: "all", label: m.export_pdf_tabs_all() },
-        { value: "active", label: m.export_pdf_tabs_active() },
-      ]}
+    <Checkbox
+      id="pdf-all-tabs"
+      bind:checked={allTabs}
+      label={m.export_pdf_tabs_all()}
     />
   {/if}
 
diff --git a/web-common/src/features/exports/pdf/capture.spec.ts b/web-common/src/features/exports/pdf/capture.spec.ts
index 2e1b20b45858..47b74d5da4f0 100644
--- a/web-common/src/features/exports/pdf/capture.spec.ts
+++ b/web-common/src/features/exports/pdf/capture.spec.ts
@@ -72,18 +72,39 @@ describe("captureTargetsIn", () => {
     ]);
   });
 
-  it("stacks each tab's label and rows between the surrounding free rows", () => {
+  it("groups each tab's label with the tab's first row, between the free rows", () => {
     const container = renderExportDom();
     const indexOf = (selector: string) =>
       rowIndexFor(container.querySelector<HTMLElement>(selector)!, container);
 
     expect(indexOf("#free-a")).toBe(0);
     expect(indexOf("#free-b")).toBe(0);
-    expect(indexOf("#pdf-tab-label-overview-first")).toBe(1);
+    // A label shares its rowIndex with the row that follows it, so the two
+    // paginate as one unit and the label can't be orphaned by a page break.
+    expect(indexOf("#pdf-tab-label-overview-first")).toBe(2);
     expect(indexOf("#tab-a")).toBe(2);
     expect(indexOf("#tab-b")).toBe(2);
-    expect(indexOf("#pdf-tab-label-overview-second")).toBe(3);
+    expect(indexOf("#pdf-tab-label-overview-second")).toBe(4);
     expect(indexOf("#tab-c")).toBe(4);
     expect(indexOf("#free-c")).toBe(5);
   });
+
+  it("keeps an empty tab's label on its own row", () => {
+    const container = document.createElement("div");
+    container.innerHTML = `
+      <section id="pdf-tab-label-overview-empty" class="pdf-tab-label-row"></section>
+      <section id="pdf-tab-label-overview-second" class="pdf-tab-label-row"></section>
+      <section id="canvas-row-overview-second-0">
+        <article id="tab-a" class="component-card"></article>
+      </section>
+    `;
+    const indexOf = (selector: string) =>
+      rowIndexFor(container.querySelector<HTMLElement>(selector)!, container);
+
+    // No row follows the empty tab's label (the next section is another label),
+    // so it keeps its own index instead of merging into an unrelated row.
+    expect(indexOf("#pdf-tab-label-overview-empty")).toBe(0);
+    expect(indexOf("#pdf-tab-label-overview-second")).toBe(2);
+    expect(indexOf("#tab-a")).toBe(2);
+  });
 });
diff --git a/web-common/src/features/exports/pdf/capture.ts b/web-common/src/features/exports/pdf/capture.ts
index c3eb33737eb3..0adabb5082b2 100644
--- a/web-common/src/features/exports/pdf/capture.ts
+++ b/web-common/src/features/exports/pdf/capture.ts
@@ -186,14 +186,29 @@ export function captureTargetsIn(rowContainer: HTMLElement): HTMLElement[] {
 
 // Canvas rows (and tab label bands) are <section> elements; use the nearest
 // section's DOM order as the row index so blocks in the same row are grouped
-// and laid out together.
+// and laid out together. A tab label band reports the index of the row section
+// that follows it, so the label and the tab's first row paginate as one unit
+// and the label can never be stranded alone at the bottom of a page (paginate
+// sizes a row by the vertical extent of its blocks). A label with no following
+// row (an empty tab) keeps its own index.
 export function rowIndexFor(
   target: HTMLElement,
   rowContainer: HTMLElement,
 ): number {
-  const section = target.closest("section");
+  let section: Element | null = target.closest("section");
   if (!section) return 0;
-  const sections = Array.from(rowContainer.querySelectorAll("section"));
+  if (section.classList.contains("pdf-tab-label-row")) {
+    const next = section.nextElementSibling;
+    if (
+      next?.tagName === "SECTION" &&
+      !next.classList.contains("pdf-tab-label-row")
+    ) {
+      section = next;
+    }
+  }
+  const sections: Element[] = Array.from(
+    rowContainer.querySelectorAll("section"),
+  );
   const index = sections.indexOf(section);
   return index === -1 ? 0 : index;
 }
diff --git a/web-common/src/features/exports/pdf/layout.spec.ts b/web-common/src/features/exports/pdf/layout.spec.ts
index 6d59c0e7be7e..ebac7287b396 100644
--- a/web-common/src/features/exports/pdf/layout.spec.ts
+++ b/web-common/src/features/exports/pdf/layout.spec.ts
@@ -200,6 +200,47 @@ describe("paginate", () => {
     expect(result.placements.some((p) => p.page === 0)).toBe(true);
   });
 
+  it("moves a tab label band and the tab's first row to the next page together", () => {
+    // A label band shares its rowIndex with the tab's first row (see
+    // rowIndexFor in capture.ts) and sits above it, so the row's height is the
+    // combined vertical extent. When that unit doesn't fit under the previous
+    // row, the label must move with the cards, never stay behind alone.
+    const result = paginate(
+      [
+        block({ id: "prev", rowIndex: 0, yPx: 0, heightPx: 900 }),
+        block({ id: "label", rowIndex: 1, yPx: 900, heightPx: 40 }),
+        block({ id: "card", rowIndex: 1, yPx: 940, heightPx: 900 }),
+      ],
+      { ...A4, contentWidthPx: 1000 },
+    );
+    const label = result.placements.find((p) => p.block.id === "label")!;
+    const card = result.placements.find((p) => p.block.id === "card")!;
+    expect(label.page).toBe(1);
+    expect(card.page).toBe(label.page);
+    // The label renders directly above the card, preserving on-screen offsets.
+    expect(label.yPt).toBeLessThan(card.yPt);
+    expect(card.yPt).toBeCloseTo(label.yPt + label.hPt, 1);
+  });
+
+  it("keeps the label atop the first slice when the tab's first row must be sliced", () => {
+    const result = paginate(
+      [
+        block({ id: "label", rowIndex: 0, yPx: 0, heightPx: 40 }),
+        block({ id: "tall-card", rowIndex: 0, yPx: 40, heightPx: 5000 }),
+      ],
+      { ...A4, contentWidthPx: 1000 },
+    );
+    const labels = result.placements.filter((p) => p.block.id === "label");
+    const slices = result.placements
+      .filter((p) => p.block.id === "tall-card")
+      .sort((a, b) => a.page - b.page);
+    // The label is placed once, on the same page as the first slice, above it.
+    expect(labels).toHaveLength(1);
+    expect(slices.length).toBeGreaterThan(1);
+    expect(labels[0].page).toBe(slices[0].page);
+    expect(labels[0].yPt).toBeLessThan(slices[0].yPt);
+  });
+
   it("places the filter bar (rowIndex -1) before content rows", () => {
     const result = paginate(
       [
diff --git a/web-common/src/features/exports/pdf/layout.ts b/web-common/src/features/exports/pdf/layout.ts
index 45761f3403f6..6a74eea80057 100644
--- a/web-common/src/features/exports/pdf/layout.ts
+++ b/web-common/src/features/exports/pdf/layout.ts
@@ -93,8 +93,12 @@ export function paginate(
   let cursorYPt = pageTopPt(0);
 
   for (const row of rows) {
+    // Size the row by the vertical extent of its blocks, not the tallest block:
+    // a row can stack blocks with different tops (a tab label band grouped with
+    // the tab's first row of cards; see rowIndexFor in capture.ts).
     const rowTopPx = Math.min(...row.map((b) => b.yPx));
-    const rowHeightPt = Math.max(...row.map((b) => b.heightPx)) * scale;
+    const rowBottomPx = Math.max(...row.map((b) => b.yPx + b.heightPx));
+    const rowHeightPt = (rowBottomPx - rowTopPx) * scale;
 
     // True when nothing has been placed on the current page yet, so we must not
     // advance to a fresh page (that would strand the page, e.g. page 0 holding
diff --git a/web-common/src/lib/i18n/messages/en.json b/web-common/src/lib/i18n/messages/en.json
index a7561e6f9406..a6bf7c3ae8cf 100644
--- a/web-common/src/lib/i18n/messages/en.json
+++ b/web-common/src/lib/i18n/messages/en.json
@@ -1103,7 +1103,6 @@
   "export_pdf_include_filters": "Include filters",
   "export_pdf_rendering_charts": "Rendering charts…",
   "export_pdf_success": "Dashboard exported as PDF",
-  "export_pdf_tabs_active": "Export active tab only",
   "export_pdf_tabs_all": "Export all tabs",
   "field_list_add_fields": "Add {label} fields",
   "field_list_aria": "{label} field list",
diff --git a/web-common/src/lib/i18n/messages/es.json b/web-common/src/lib/i18n/messages/es.json
index ca62b7d81140..0214f34bb8cc 100644
--- a/web-common/src/lib/i18n/messages/es.json
+++ b/web-common/src/lib/i18n/messages/es.json
@@ -1112,7 +1112,6 @@
   "export_pdf_include_filters": "Incluir filtros",
   "export_pdf_rendering_charts": "Renderizando gráficos…",
   "export_pdf_success": "Dashboard exportado como PDF",
-  "export_pdf_tabs_active": "Exportar solo la pestaña activa",
   "export_pdf_tabs_all": "Exportar todas las pestañas",
   "field_list_add_fields": "Agregar campos de {label}",
   "field_list_aria": "Lista de campos de {label}",