@multiplatform.one/table 7.4.1 → 7.5.0

package/src/components/DataTableExport/DataTableExport.spec.tsx

@@ -612,4 +612,33 @@ describe("DataTableExport", () => {
       expect(mockOnExport).toHaveBeenCalledTimes(1);
     });
   });
+
+  it("surfaces an inline error when Blob URLs are unavailable", async () => {
+    const previous = Object.getOwnPropertyDescriptor(window.URL, "createObjectURL");
+    Object.defineProperty(window.URL, "createObjectURL", {
+      configurable: true,
+      writable: true,
+      value: undefined,
+    });
+    try {
+      renderWithProviders(<DataTableExport data={mockData} columns={mockColumns} />);
+      fireEvent.click(screen.getByRole("button", { name: /Export as CSV/i }));
+      await waitFor(() => {
+        expect(screen.getByRole("alert").textContent).toMatch(
+          /not available on this platform/i,
+        );
+      });
+      expect(mockCreateObjectURL).not.toHaveBeenCalled();
+    } finally {
+      if (previous) {
+        Object.defineProperty(window.URL, "createObjectURL", previous);
+      } else {
+        Object.defineProperty(window.URL, "createObjectURL", {
+          configurable: true,
+          writable: true,
+          value: mockCreateObjectURL,
+        });
+      }
+    }
+  });
 });

package/src/components/DataTableExport/index.tsx

@@ -9,8 +9,9 @@ import { downloadBlob } from "@multiplatform.one/platform";
 import { formatCalendarDate, useResolvedKnobs } from "@multiplatform.one/theme";
 import { useState } from "react";
 import { Button, Checkbox, Input } from "@multiplatform.one/forms";
-import { Popover, ScrollView, Separator, Text, XStack, YStack } from "tamagui";
+import { Popover, ScrollView, Separator, Text, XStack, YStack, isWeb } from "tamagui";
 import type { DataTableField } from "../../types";
+import { iconSizeForToken } from "../../utils/chromeIcons";
 import { getViewLeafRows } from "../../utils/viewData";
 import { useDataTableState } from "../DataTable/DataTableStateContext";
 
@@ -74,13 +75,16 @@ export function DataTableExport<T = any>(props: DataTableExportProps<T>) {
   const data = props.data ?? (ctx ? getViewLeafRows<T>(ctx.table) : []);
   const columns = props.columns ?? (ctx ? extractColumnsFromTable(ctx.table) : []);
 
+  const { knobProps } = useResolvedKnobs();
+  const iconPx = iconSizeForToken(String(knobProps.sizeToken));
+
   const {
     filename = "export",
     exportFormats = [
       {
         id: "csv",
         label: "CSV",
-        icon: <FileTextIcon size={16} />,
+        icon: <FileTextIcon size={iconPx} />,
         extension: "csv",
         mimeType: "text/csv",
         description: "Comma-separated values",
@@ -89,7 +93,7 @@ export function DataTableExport<T = any>(props: DataTableExportProps<T>) {
       {
         id: "excel",
         label: "Excel",
-        icon: <FileXlsIcon size={16} />,
+        icon: <FileXlsIcon size={iconPx} />,
         extension: "xlsx",
         mimeType: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
         description: "Microsoft Excel format",
@@ -98,7 +102,7 @@ export function DataTableExport<T = any>(props: DataTableExportProps<T>) {
       {
         id: "pdf",
         label: "PDF",
-        icon: <FileTextIcon size={16} />,
+        icon: <FileTextIcon size={iconPx} />,
         extension: "pdf",
         mimeType: "application/pdf",
         description: "Portable document format",
@@ -107,7 +111,7 @@ export function DataTableExport<T = any>(props: DataTableExportProps<T>) {
       {
         id: "json",
         label: "JSON",
-        icon: <FileJsIcon size={16} />,
+        icon: <FileJsIcon size={iconPx} />,
         extension: "json",
         mimeType: "application/json",
         description: "JavaScript object notation",
@@ -118,7 +122,6 @@ export function DataTableExport<T = any>(props: DataTableExportProps<T>) {
     disabled = false,
   } = props;
 
-  const { knobProps } = useResolvedKnobs();
   const [isExporting, setIsExporting] = useState<string | null>(null);
   const [exportError, setExportError] = useState<string | null>(null);
   const [exportOptions, setExportOptions] = useState<Partial<ExportOptions>>({
@@ -201,7 +204,7 @@ export function DataTableExport<T = any>(props: DataTableExportProps<T>) {
       <Button
         size={knobProps.sizeToken}
         chromeless
-        icon={<PrinterIcon size={16} />}
+        icon={<PrinterIcon size={iconPx} />}
         disabled={disabled || isExporting === "print"}
         onPress={handlePrint}
         aria-label="Print table"
@@ -273,6 +276,7 @@ function ExportOptionsPopover({
   columns,
 }: ExportOptionsPopoverProps) {
   const { knobProps } = useResolvedKnobs();
+  const iconPx = iconSizeForToken(String(knobProps.sizeToken));
   const sz = knobProps.sizeToken;
   const popoverMinWidth = sz === "$3" ? 240 : sz === "$5" ? 360 : 300;
   const [selectedColumns, setSelectedColumns] = useState<Set<string>>(
@@ -293,7 +297,7 @@ function ExportOptionsPopover({
         <Button
           size={knobProps.sizeToken}
           chromeless
-          icon={<GearIcon size={16} />}
+          icon={<GearIcon size={iconPx} />}
           disabled={disabled}
           aria-label="Export options"
         >
@@ -302,9 +306,7 @@ function ExportOptionsPopover({
       </Popover.Trigger>
 
       <Popover.Content
-        {...knobProps.borderRadius}
-        borderWidth={1}
-        borderColor="$borderColor"
+        {...knobProps.elevatedSurface}
         transition={knobProps.transition}
         enterStyle={{ x: 0, y: -10, opacity: 0 }}
         exitStyle={{ x: 0, y: -10, opacity: 0 }}
@@ -317,13 +319,13 @@ function ExportOptionsPopover({
             DataTableDateFilter). */}
         <Popover.ScrollView minHeight={0}>
           <YStack {...knobProps.panelPadding} gap="$4">
-            <Text fontSize="$5" fontWeight="600">
+            <Text {...knobProps.label} fontWeight="400">
               Export Options
             </Text>
 
             {/* Filename */}
             <YStack gap="$2">
-              <Text fontSize="$3" fontWeight="500">
+              <Text {...knobProps.label} fontWeight="400">
                 Filename
               </Text>
               <Input
@@ -352,7 +354,7 @@ function ExportOptionsPopover({
 
             {/* Column Selection */}
             <YStack gap="$2">
-              <Text fontSize="$3" fontWeight="500">
+              <Text {...knobProps.label} fontWeight="400">
                 Select Columns ({selectedColumns.size} of {availableColumns.length})
               </Text>
               <ScrollView maxHeight={200}>
@@ -385,7 +387,7 @@ function ExportOptionsPopover({
 
             {/* Export Formats */}
             <YStack gap="$2">
-              <Text fontSize="$4" fontWeight="500">
+              <Text {...knobProps.label} fontWeight="400">
                 Export Formats
               </Text>
               {exportFormats.map((format) => (
@@ -399,7 +401,7 @@ function ExportOptionsPopover({
                   icon={format.icon}
                 >
                   <YStack gap="$1">
-                    <Text fontSize="$3" fontWeight="500">
+                    <Text {...knobProps.label} fontWeight="400">
                       {format.label}
                     </Text>
                     <Text fontSize="$2" color="$color10">
@@ -424,7 +426,7 @@ function ExportOptionsPopover({
               justifyContent="flex-start"
               disabled={disabled || isExporting === "print"}
               onPress={onPrint}
-              icon={<PrinterIcon size={16} />}
+              icon={<PrinterIcon size={iconPx} />}
             >
               Print Table
               {isExporting === "print" && (
@@ -671,6 +673,9 @@ async function exportAsPDF<T>(
 // interpolation) so cell values containing markup cannot inject into the
 // print document (XSS via `<img onerror>`-style data).
 async function printTable<T>(data: T[], columns: ExportColumn[]): Promise<void> {
+  if (!isWeb || typeof window.open !== "function") {
+    throw new Error("Print is not available on this platform.");
+  }
   const printWindow = window.open("", "_blank");
   if (!printWindow) {
     throw new Error("Print window was blocked. Allow popups for this site and try again.");
@@ -681,12 +686,16 @@ async function printTable<T>(data: T[], columns: ExportColumn[]): Promise<void>
 
   const style = doc.createElement("style");
   style.textContent = `
-    body { font-family: Arial, sans-serif; margin: 20px; }
+    /* Explicit print theme (Part 3 DataTableExport): scheme-safe paper palette,
+       not page chrome. Headers use the 400/700 weight ladder — never 500/600. */
+    body { color: CanvasText; background: Canvas; font-family: system-ui, sans-serif; margin: 20px; }
     table { width: 100%; border-collapse: collapse; }
-    th, td { border: 1px solid #ddd; padding: 8px; text-align: left; }
-    th { background-color: #f2f2f2; font-weight: bold; }
-    tr:nth-child(even) { background-color: #f9f9f9; }
-    @media print { body { margin: 0; } }
+    th, td { border: 1px solid CanvasText; padding: 8px; text-align: left; }
+    th { font-weight: 700; }
+    @media print {
+      body { color: #111; background: #fff; margin: 0; }
+      th, td { border-color: #111; }
+    }
   `;
   doc.head.appendChild(style);
 
@@ -724,8 +733,23 @@ async function printTable<T>(data: T[], columns: ExportColumn[]): Promise<void>
   printWindow.print();
 }
 
-// Utility function
+// Web-only download. Native/GTK have no Blob-URL download path (MPO-22);
+// throw so the inline alert fires instead of a silent console.warn no-op.
+function assertWebFileDownload(): void {
+  if (
+    !isWeb ||
+    typeof document === "undefined" ||
+    typeof URL === "undefined" ||
+    typeof URL.createObjectURL !== "function"
+  ) {
+    throw new Error(
+      "File download is not available on this platform. Provide an onExport handler.",
+    );
+  }
+}
+
 function downloadFile(content: string, filename: string, mimeType: string): void {
+  assertWebFileDownload();
   const blob = new Blob([content], { type: mimeType });
   downloadBlob(blob, filename);
 }

package/src/components/DataTableFacetMenu/index.tsx

@@ -24,10 +24,12 @@
 import { CaretDownIcon } from "@phosphor-icons/react";
 import { DropdownMenu, type DropdownMenuPlacement } from "@multiplatform.one/components";
 import { Button, Spinner } from "@multiplatform.one/forms";
+import { useResolvedKnobs } from "@multiplatform.one/theme";
 import type { ReactNode } from "react";
 import { useCallback } from "react";
 import { Text, XStack, withStaticProperties } from "tamagui";
 import { t } from "../../shared/t";
+import { iconSizeForToken } from "../../utils/chromeIcons";
 
 export interface DataTableFacetOption {
   /** Raw facet value (user id, tag, status value, …). */
@@ -120,6 +122,8 @@ function DataTableFacetMenuComponent({
   placement = "bottom-start",
   children,
 }: DataTableFacetMenuProps) {
+  const { knobProps } = useResolvedKnobs();
+  const iconPx = iconSizeForToken(String(knobProps.sizeToken));
   const active = activeValues ?? [];
   const activeCount = active.length;
 
@@ -154,7 +158,13 @@ function DataTableFacetMenuComponent({
         />
       ))}
       {(options?.length ?? 0) === 0 && !loading && (
-        <Text fontSize="$2" color="$color10" paddingHorizontal="$3" paddingVertical="$2">
+        <Text
+          {...knobProps.label}
+          fontWeight="400"
+          color="$color10"
+          paddingHorizontal="$3"
+          paddingVertical="$2"
+        >
           {t("No options")}
         </Text>
       )}
@@ -165,12 +175,11 @@ function DataTableFacetMenuComponent({
     <DropdownMenu placement={placement}>
       <DropdownMenu.Trigger asChild>
         <Button
-          size="$3"
-          compact
+          size={knobProps.sizeToken}
           // Active facet = accent trigger with count — the same active
           // anatomy as DataTableFilterButton ("Filter (n)").
           {...(activeCount > 0 ? { accent: true } : { variant: "outlined" as const })}
-          iconAfter={<CaretDownIcon size={14} />}
+          iconAfter={<CaretDownIcon size={iconPx} />}
           aria-haspopup="menu"
           aria-label={label}
           {...(disabled ? { disabled } : {})}

package/src/components/DataTableFilters/index.tsx

@@ -60,11 +60,11 @@ export function DataTableFilters(props: DataTableFiltersProps) {
   const onClearFilters = props.onClearFilters ?? ctx?.actions.clearFilters ?? (() => {});
   const availableColumns = props.availableColumns ?? [];
 
-  const { maxFilters = 10, showFilterCount = true, compact = false } = props;
+  const { maxFilters = 10, showFilterCount = true, compact } = props;
 
   const [builderOpen, setBuilderOpen] = useState(false);
   const [editingId, setEditingId] = useState<string | null>(null);
-  const { knobProps } = useResolvedKnobs({ compact });
+  const { knobProps } = useResolvedKnobs(compact === undefined ? undefined : { compact });
 
   const canAddMoreFilters = filters.length < maxFilters;
   const editingFilter = editingId ? (filters.find((f) => f.id === editingId) ?? null) : null;
@@ -223,7 +223,7 @@ function FilterBuilder({
 
   return (
     <YStack {...knobProps.panelPadding} gap="$3" minWidth={280} maxWidth={360}>
-      <Text fontSize="$3" fontWeight="600" color="$color12">
+      <Text fontSize="$3" fontWeight="400" color="$color12">
         {editingFilter ? t("Edit filter") : t("Add filter")}
       </Text>
 

package/src/components/DataTableGrouping/index.tsx

@@ -18,7 +18,6 @@ import {
   formatNumber,
   getGroupPosition,
   hairline,
-  sizeRecipeForToken,
   stackEdgeRadius,
   stackRadiusProps,
   useResolvedKnobs,
@@ -28,6 +27,7 @@ import { useCallback, useMemo, useState } from "react";
 import { Button, Select } from "@multiplatform.one/forms";
 import { Popover, Separator, Text, View, XStack, YStack, isWeb } from "tamagui";
 import { getViewLeafRows } from "../../utils/viewData";
+import { iconSizeForToken } from "../../utils/chromeIcons";
 import { useDataTableState } from "../DataTable/DataTableStateContext";
 
 export type AggregationFunction = "count" | "sum" | "avg" | "min" | "max" | "custom";
@@ -111,15 +111,18 @@ const groupMetaSizeMap: Record<string, string> = {
 
 // Chevron/tree glyphs are control-internal icons (LC-75/LC-79): the
 // generated recipe's icon channel (lossless vs the old $3/$4/$5 map).
-const groupIconSize = (token: string): number => sizeRecipeForToken(token).iconSize;
-
-const startRail = isWeb
-  ? {
-      borderInlineStartWidth: 4,
-      borderInlineStartStyle: "solid" as const,
-      borderInlineStartColor: "$color6",
-    }
-  : { borderStartWidth: 4, borderStartColor: "$color6" };
+const groupIconSize = (token: string): number => iconSizeForToken(token);
+
+function groupStartRail(borderWidth: number) {
+  const width = borderWidth === 0 ? 0 : borderWidth * 4;
+  return isWeb
+    ? {
+        borderInlineStartWidth: width,
+        borderInlineStartStyle: "solid" as const,
+        borderInlineStartColor: "$color6",
+      }
+    : { borderStartWidth: width, borderStartColor: "$color6" };
+}
 
 function groupIndent(space: string | undefined, level: number): number {
   return (groupIndentStepMap[space ?? "medium"] ?? 16) * Math.max(0, level);
@@ -390,7 +393,7 @@ function GroupHeader<T = any>({
   return (
     <XStack
       {...corners}
-      {...startRail}
+      {...groupStartRail(Number(knobProps.borderRadius.borderWidth) || 0)}
       alignItems="center"
       gap="$2"
       minHeight={44}
@@ -428,7 +431,7 @@ function GroupHeader<T = any>({
 
       <XStack flex={1} alignItems="center" justifyContent="space-between" gap="$3" flexWrap="wrap">
         <XStack alignItems="center" gap="$2" flexShrink={1} minWidth={0}>
-          <Text fontSize={knobProps.sizeToken} fontWeight="600" numberOfLines={1}>
+          <Text {...knobProps.label} fontWeight="400" numberOfLines={1}>
             {label}
           </Text>
           <Text fontSize={metaSize} color="$color10">
@@ -443,7 +446,7 @@ function GroupHeader<T = any>({
                 <Text fontSize={metaSize} color="$color10">
                   {`${agg.label || `${agg.function}(${agg.column})`}:`}
                 </Text>
-                <Text fontSize={metaSize} fontWeight="600">
+                <Text {...knobProps.label} fontWeight="400">
                   {formatAggregateValue(group.aggregations[agg.column]?.[agg.function], agg)}
                 </Text>
               </XStack>
@@ -470,6 +473,7 @@ function GroupItems<T = any>({ items, columns = [], level, stackEnd }: GroupItem
   const { knobProps } = useResolvedKnobs();
   const metaSize = groupMetaSizeMap[knobProps.sizeToken] ?? "$3";
   const indent = groupIndent(knobProps.space, level);
+  const iconSize = groupIconSize(String(knobProps.sizeToken));
   return (
     <YStack>
       {items.map((item, index) => {
@@ -485,7 +489,7 @@ function GroupItems<T = any>({ items, columns = [], level, stackEnd }: GroupItem
             <XStack
               {...corners}
               padding={groupItemPaddingMap[knobProps.space] ?? "$2"}
-              paddingInlineStart={indent + 12}
+              paddingInlineStart={indent + iconSize}
               overflow="hidden"
               backgroundColor={index % 2 === 0 ? "$background" : "$color2"}
               hoverStyle={{ backgroundColor: "$backgroundHover", ...corners }}
@@ -650,7 +654,7 @@ export function DataTableGroupingConfig<T = any>(props: DataTableGroupingConfigP
                 minWidth={20}
                 alignItems="center"
               >
-                <Text fontSize="$2" color="$color12" fontWeight="600">
+                <Text {...knobProps.label} fontWeight="400" color="$color12">
                   {currentConfig.columns.length + currentConfig.aggregations.length}
                 </Text>
               </View>
@@ -660,9 +664,7 @@ export function DataTableGroupingConfig<T = any>(props: DataTableGroupingConfigP
       </Popover.Trigger>
 
       <Popover.Content
-        {...knobProps.borderRadius}
-        borderWidth={1}
-        borderColor="$borderColor"
+        {...knobProps.elevatedSurface}
         // LC-24: enter/exit styles are dead code without a resolved token
         transition={knobProps.transition}
         enterStyle={{ x: 0, y: -10, opacity: 0 }}
@@ -674,14 +676,14 @@ export function DataTableGroupingConfig<T = any>(props: DataTableGroupingConfigP
       >
         <Popover.ScrollView minHeight={0}>
           <YStack {...knobProps.panelPadding} gap="$4">
-            <Text fontSize="$5" fontWeight="600">
+            <Text {...knobProps.label} fontWeight="400">
               Grouping & Aggregation
             </Text>
 
             {/* Group By Section */}
             <YStack gap="$3">
               <XStack justifyContent="space-between" alignItems="center">
-                <Text fontSize="$4" fontWeight="500">
+                <Text {...knobProps.label} fontWeight="400">
                   Group By
                 </Text>
                 <Text fontSize="$2" color="$color10">
@@ -713,7 +715,7 @@ export function DataTableGroupingConfig<T = any>(props: DataTableGroupingConfigP
                           {`${label} · ${index + 1}`}
                         </Text>
                         <Button
-                          size="$2"
+                          size={knobProps.sizeToken}
                           variant="outlined"
                           icon={<ArrowUpIcon size={iconSize} />}
                           disabled={disabled || index === 0}
@@ -721,7 +723,7 @@ export function DataTableGroupingConfig<T = any>(props: DataTableGroupingConfigP
                           aria-label={`Move ${label} up`}
                         />
                         <Button
-                          size="$2"
+                          size={knobProps.sizeToken}
                           variant="outlined"
                           icon={<ArrowDownIcon size={iconSize} />}
                           disabled={disabled || index === currentConfig.columns.length - 1}
@@ -729,7 +731,7 @@ export function DataTableGroupingConfig<T = any>(props: DataTableGroupingConfigP
                           aria-label={`Move ${label} down`}
                         />
                         <Button
-                          size="$2"
+                          size={knobProps.sizeToken}
                           variant="outlined"
                           icon={<MinusIcon size={iconSize} />}
                           disabled={disabled}
@@ -753,7 +755,7 @@ export function DataTableGroupingConfig<T = any>(props: DataTableGroupingConfigP
                     return (
                       <Button
                         key={key}
-                        size="$2"
+                        size={knobProps.sizeToken}
                         variant="outlined"
                         onPress={() => handleAddGroupBy(key)}
                       >
@@ -770,7 +772,7 @@ export function DataTableGroupingConfig<T = any>(props: DataTableGroupingConfigP
             {/* Aggregation Section */}
             <YStack gap="$3">
               <XStack justifyContent="space-between" alignItems="center">
-                <Text fontSize="$4" fontWeight="500">
+                <Text {...knobProps.label} fontWeight="400">
                   Aggregations
                 </Text>
                 <Text fontSize="$2" color="$color10">
@@ -800,7 +802,7 @@ export function DataTableGroupingConfig<T = any>(props: DataTableGroupingConfigP
                           {agg.function}({agg.column}){agg.label && ` as "${agg.label}"`}
                         </Text>
                         <Button
-                          size="$2"
+                          size={knobProps.sizeToken}
                           variant="outlined"
                           icon={<MinusIcon size={iconSize} />}
                           disabled={disabled}
@@ -855,6 +857,8 @@ interface AggregationSelectorProps<_T = any> {
 }
 
 function AggregationSelector<T = any>({ columns, onAddAggregation }: AggregationSelectorProps<T>) {
+  const { knobProps } = useResolvedKnobs();
+  const iconPx = groupIconSize(String(knobProps.sizeToken));
   const [selectedColumn, setSelectedColumn] = useState<string>("");
   const [selectedFunction, setSelectedFunction] = useState<AggregationFunction>("count");
 
@@ -863,11 +867,11 @@ function AggregationSelector<T = any>({ columns, onAddAggregation }: Aggregation
     label: string;
     icon: React.ReactNode;
   }> = [
-    { value: "count", label: "Count", icon: <HashIcon size={16} /> },
-    { value: "sum", label: "Sum", icon: <PlusIcon size={16} /> },
-    { value: "avg", label: "Average", icon: <CalculatorIcon size={16} /> },
-    { value: "min", label: "Minimum", icon: <MinusIcon size={16} /> },
-    { value: "max", label: "Maximum", icon: <CaretUpIcon size={16} /> },
+    { value: "count", label: "Count", icon: <HashIcon size={iconPx} /> },
+    { value: "sum", label: "Sum", icon: <PlusIcon size={iconPx} /> },
+    { value: "avg", label: "Average", icon: <CalculatorIcon size={iconPx} /> },
+    { value: "min", label: "Minimum", icon: <MinusIcon size={iconPx} /> },
+    { value: "max", label: "Maximum", icon: <CaretUpIcon size={iconPx} /> },
   ];
 
   // Convert columns to forms Select options
@@ -910,7 +914,7 @@ function AggregationSelector<T = any>({ columns, onAddAggregation }: Aggregation
 
   return (
     <YStack gap="$2">
-      <Text fontSize="$3" fontWeight="500">
+      <Text {...knobProps.label} fontWeight="400">
         Add Aggregation
       </Text>
 
@@ -925,7 +929,6 @@ function AggregationSelector<T = any>({ columns, onAddAggregation }: Aggregation
             }}
             options={columnOptions}
             placeholder="Select column..."
-            compact
             aria-label="Aggregation column"
           />
         </View>
@@ -939,12 +942,16 @@ function AggregationSelector<T = any>({ columns, onAddAggregation }: Aggregation
               }
             }}
             options={functionOptions}
-            compact
             aria-label="Aggregation function"
           />
         </View>
 
-        <Button size="$2" variant="outlined" disabled={!selectedColumn} onPress={handleAdd}>
+        <Button
+          size={knobProps.sizeToken}
+          variant="outlined"
+          disabled={!selectedColumn}
+          onPress={handleAdd}
+        >
           Add
         </Button>
       </XStack>

package/src/components/DataTablePagination/index.tsx

@@ -78,11 +78,11 @@ export function DataTablePagination(props: DataTablePaginationProps) {
     showPageSizeSelector = true,
     showPageJump = true,
     showPagerWhenSinglePage = false,
-    compact = false,
+    compact,
   } = props;
 
   const { sm } = useMedia();
-  const { knobProps } = useResolvedKnobs();
+  const { knobProps } = useResolvedKnobs(compact === undefined ? undefined : { compact });
   const isMobile = !sm;
   // LC-71: mount the composite-boundary ring sheet before Select/Input paint.
   ensureCompositeFocusRing();

package/src/components/DataTableSearch/index.tsx

@@ -266,12 +266,12 @@ function SearchOptionsPopover({
       <PopoverContent padding={0} overflow="hidden" alignItems="stretch" minWidth={280}>
         <ScrollView flexShrink={1} maxHeight={panelMaxHeight}>
           <YStack {...knobProps.panelPadding} {...knobProps.gapLg}>
-            <Text {...knobProps.heading} {...knobProps.label} fontWeight="600">
+            <Text {...knobProps.heading} {...knobProps.label} fontWeight="400">
               {t("Search Options")}
             </Text>
 
             <YStack {...knobProps.gap}>
-              <Text {...knobProps.label} fontWeight="500">
+              <Text {...knobProps.label} fontWeight="400">
                 {t("Search Settings")}
               </Text>
 
@@ -312,7 +312,7 @@ function SearchOptionsPopover({
 
             <YStack {...knobProps.gap}>
               <XStack justifyContent="space-between" alignItems="center">
-                <Text {...knobProps.label} fontWeight="500">
+                <Text {...knobProps.label} fontWeight="400">
                   {t("Search Columns")}
                 </Text>
                 <Text {...knobProps.label} color={formCommonColors.muted}>

package/src/components/DataTableToolbar/DataTableToolbar.spec.tsx

@@ -45,6 +45,26 @@ describe("DataTableToolbar", () => {
       expect(container).toBeDefined();
     });
 
+    it("exposes role=toolbar with an accessible name", () => {
+      const { getByRole } = renderWithProviders(<DataTableToolbar {...defaultProps} />);
+
+      expect(getByRole("toolbar", { name: "Table toolbar" })).toBeDefined();
+    });
+
+    it("does not mount export chrome unless enableExport is set", () => {
+      const { queryByRole } = renderWithProviders(<DataTableToolbar {...defaultProps} />);
+
+      expect(queryByRole("button", { name: /Export as CSV/i })).toBeNull();
+    });
+
+    it("mounts DataTableExport when enableExport is true", () => {
+      const { getByRole } = renderWithProviders(
+        <DataTableToolbar {...defaultProps} enableExport />,
+      );
+
+      expect(getByRole("button", { name: /Export as CSV/i })).toBeDefined();
+    });
+
     it("should render search input when enableGlobalSearch is true", () => {
       const { getByRole } = renderWithProviders(
         <DataTableToolbar {...defaultProps} enableGlobalSearch={true} />,

package/src/components/DataTableToolbar/DataTableToolbar.stories.tsx

@@ -72,15 +72,7 @@ const MainStory = () => {
         enableViews
         initialState={{ pagination: { pageIndex: 1, pageSize: 3 } }}
         renderToolbar={(props) => (
-          <DataTableToolbar
-            {...props}
-            enableViews
-            customActions={
-              <Button size="$2" variant="outlined" onPress={() => action("export-csv")()}>
-                Export CSV
-              </Button>
-            }
-          />
+          <DataTableToolbar {...props} enableViews enableExport />
         )}
         aria-label="Employee table with toolbar"
       />