@multiplatform.one/components 6.4.2 → 6.6.0

package/src/layouts/attachments.tsx

@@ -24,6 +24,7 @@ import {
   YStack,
   type YStackProps,
 } from "tamagui";
+import { DialogOverlay } from "../surfaces";
 import { componentColors, sectionHeading } from "../componentColors";
 import { Skeleton } from "../Skeleton";
 import { AsyncBoundary, resolveAsyncStatus } from "./AsyncBoundary";
@@ -538,11 +539,13 @@ export function Attachments({
 
       <Dialog open={!!previewFile} onOpenChange={(open) => !open && setPreviewFile(null)}>
         <Dialog.Portal>
-          <Dialog.Overlay opacity={0.5} enterStyle={{ opacity: 0 }} exitStyle={{ opacity: 0 }} />
+          <DialogOverlay opacity={0.5} />
           <Dialog.Content
             borderWidth={1}
             borderColor="$borderColor"
             elevation={knobProps.elevation}
+            // LC-24: enter/exit styles are dead code without a resolved token
+            transition={knobProps.transition}
             enterStyle={{ x: 0, y: -20, opacity: 0, scale: 0.9 }}
             exitStyle={{ x: 0, y: 10, opacity: 0, scale: 0.95 }}
             maxWidth={800}

package/src/layouts/layouts.spec.tsx

@@ -1,6 +1,15 @@
-import { cleanup, fireEvent, screen } from "@testing-library/react";
+import { cleanup, fireEvent, render, screen } from "@testing-library/react";
 import { renderWithProviders } from "@multiplatform.one/test-utils";
+import {
+  createThemesBuilder,
+  defaultAccentTheme,
+  defaultBaseTheme,
+  defaultBuilderOptions,
+} from "@multiplatform.one/theme";
+import { configWithoutAnimations } from "@tamagui/config";
+import { animationsCSS } from "@tamagui/config/v5-css";
 import * as React from "react";
+import { TamaguiProvider, createTamagui } from "tamagui";
 import { afterEach, describe, expect, it, vi } from "vitest";
 import * as Debug from "./Debug";
 import * as Layouts from "./index";
@@ -10,6 +19,21 @@ import { ViewSwitcher, type ViewOption } from "./ViewSwitcher";
 import { Breadcrumbs, type BreadcrumbItem } from "./breadcrumbs";
 import { Tags, type TagItem } from "./tags";
 
+// House builder themes for the LC-05 mark assertion — created at MODULE
+// scope: tamagui registers a config's theme variables globally at
+// createTamagui time, and a config created after the first render (inside a
+// test body) never resolves its tokens (forms Progress.spec pattern).
+const houseThemes = createThemesBuilder(
+  defaultBaseTheme,
+  defaultAccentTheme,
+  defaultBuilderOptions,
+).themes() as Record<string, Record<string, string>>;
+const houseConfig = createTamagui({
+  ...configWithoutAnimations,
+  animations: animationsCSS,
+  themes: houseThemes as any,
+});
+
 afterEach(cleanup);
 
 describe("Layouts Index", () => {
@@ -207,6 +231,33 @@ describe("ViewSwitcher", () => {
     expect(screen.getByText("Table")).toBeInTheDocument();
     expect(screen.getByText("Kanban")).toBeInTheDocument();
   });
+
+  // LC-05 ONE-EMPHASIS / D-01 rider (b): the selected chip is an
+  // accent-TINTED step (the accent ramp's surface tier — accent11 in a light
+  // scheme), never the neutral $color3/$color4 it used to take. Stock test
+  // themes carry no accent ramp, so mount the house builder themes.
+  it("fills the selected chip with the accent-tinted surface, not a neutral step", () => {
+    const tint = houseThemes.light.accent11;
+    expect(tint).toBeTruthy();
+    // Digit prefix Tamagui embeds in the atomic class for a concrete color.
+    const tintDigits = (tint.match(/\d+/g) ?? []).slice(0, 3).join("");
+
+    const views: ViewOption[] = [
+      { type: "list", label: "List" },
+      { type: "table", label: "Table" },
+    ];
+    const { container } = render(
+      <TamaguiProvider config={houseConfig} defaultTheme="light" disableInjectCSS>
+        <ViewSwitcher views={views} currentView="list" onViewChange={() => {}} />
+      </TamaguiProvider>,
+    );
+    const selected = container.querySelector('[data-state="on"]') as HTMLElement;
+    const idle = container.querySelector('[data-state="off"]') as HTMLElement;
+    expect(selected).toBeTruthy();
+    expect(idle).toBeTruthy();
+    expect(selected.className).toContain(`_bg-hsla${tintDigits}`);
+    expect(idle.className).not.toContain(`_bg-hsla${tintDigits}`);
+  });
 });
 
 // ---------------------------------------------------------------------------
@@ -406,4 +457,29 @@ describe("Timeline", () => {
     expect(screen.queryByText(/1 entry/)).toBeNull();
     expect(screen.queryByText("Stale entry")).toBeNull();
   });
+
+  it("bidi-isolates the entry-count badge (LC-58) so RTL contexts keep the run in order", () => {
+    const { Timeline } = Layouts;
+    const entries = [
+      {
+        id: "entry-1",
+        type: "comment" as const,
+        content: "First",
+        author: "Alice",
+        timestamp: "2026-01-15T10:00:00Z",
+      },
+      {
+        id: "entry-2",
+        type: "comment" as const,
+        content: "Second",
+        author: "Bob",
+        timestamp: "2026-01-15T11:00:00Z",
+      },
+    ];
+    renderWithProviders(<Timeline entries={entries} label="Activity" />);
+
+    // The whole formatted run rides FSI…PDI — under RTL "2 entries" must not
+    // reorder to "entries 2" (the measured pre-fix failure).
+    expect(screen.getByText("\u20682 entries\u2069")).toBeInTheDocument();
+  });
 });

package/src/layouts/page.tsx

@@ -18,6 +18,7 @@
 import {
   hairline,
   layoutBreakpoints,
+  radiusClassProps,
   readingWidthStyle,
   resolvePageTitleScale,
   useResolvedKnobs,
@@ -413,7 +414,10 @@ export function EmptyState({
           justifyContent="center"
           backgroundColor="$color3"
           // R-PILL icon well: always a circle; its inset scales with the
-          // size knob (spec: empty icon well consumes sizeToken).
+          // size knob (spec: empty icon well consumes sizeToken). Declared so
+          // the `radius:none` sweep licenses the circle instead of guessing
+          // from its geometry (D-09 / LC-60).
+          {...radiusClassProps("R-PILL", "empty icon well")}
           padding={knobProps.sizeToken as any}
           borderRadius={1000}
         >

package/src/layouts/pageTitleScale.spec.tsx

@@ -0,0 +1,70 @@
+// D-11 hero-H1 dial: product screens take the moderate page-title step and the
+// 64px display scale is an explicit opt-in. jsdom cannot cascade Tamagui's
+// class-based CSS, so this asserts on the atomic font-size classes the size
+// token emits (same technique as timeline-radius.spec.tsx).
+import { cleanup, screen } from "@testing-library/react";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { Preset } from "@multiplatform.one/theme";
+import { afterEach, describe, expect, it } from "vitest";
+import { PageHeader } from "./page";
+
+afterEach(cleanup);
+
+function titleFontClasses(): string[] {
+  const title = screen.getByText("Workspace Settings");
+  return String(title.className || "")
+    .split(" ")
+    .filter((c) => c.startsWith("_fos-") || c.startsWith("_lh-"));
+}
+
+function renderTitle(node: React.ReactElement): string[] {
+  renderWithProviders(node);
+  const classes = titleFontClasses();
+  cleanup();
+  return classes;
+}
+
+describe("PageHeader page-title scale (D-11)", () => {
+  it("defaults to the moderate step, not the display H1", () => {
+    const byDefault = renderTitle(<PageHeader title="Workspace Settings" />);
+    const moderate = renderTitle(<PageHeader title="Workspace Settings" titleScale="moderate" />);
+    const display = renderTitle(<PageHeader title="Workspace Settings" titleScale="display" />);
+
+    expect(byDefault).not.toHaveLength(0);
+    expect(byDefault).toEqual(moderate);
+    expect(byDefault).not.toEqual(display);
+  });
+
+  it("the pageTitleScale knob re-scales the title without touching the screen", () => {
+    const knobDisplay = renderTitle(
+      <Preset overrides={{ pageTitleScale: "display" }}>
+        <PageHeader title="Workspace Settings" />
+      </Preset>,
+    );
+    const propDisplay = renderTitle(<PageHeader title="Workspace Settings" titleScale="display" />);
+    const knobModerate = renderTitle(
+      <Preset overrides={{ pageTitleScale: "moderate" }}>
+        <PageHeader title="Workspace Settings" />
+      </Preset>,
+    );
+
+    // Both opt-in channels resolve through the one table, so they agree.
+    expect(knobDisplay).toEqual(propDisplay);
+    expect(knobDisplay).not.toEqual(knobModerate);
+  });
+
+  it("the per-instance eject still wins over the surface knob", () => {
+    const ejected = renderTitle(
+      <Preset overrides={{ pageTitleScale: "display" }}>
+        <PageHeader title="Workspace Settings" titleScale="moderate" />
+      </Preset>,
+    );
+    const moderate = renderTitle(<PageHeader title="Workspace Settings" titleScale="moderate" />);
+    expect(ejected).toEqual(moderate);
+  });
+
+  it("the heading level is semantics, not scale — h1 either way", () => {
+    renderWithProviders(<PageHeader title="Workspace Settings" titleScale="display" />);
+    expect(screen.getByText("Workspace Settings").tagName).toBe("H1");
+  });
+});

package/src/layouts/tags.tsx

@@ -445,6 +445,8 @@ export function Tags({
               borderColor="$borderColor"
               borderRadius={knobProps.borderRadius.borderRadius}
               elevation={knobProps.elevation}
+              // LC-24: enter/exit styles are dead code without a resolved token
+              transition={knobProps.transition}
               enterStyle={{ y: -10, opacity: 0 }}
               exitStyle={{ y: -10, opacity: 0 }}
             >

package/src/layouts/timeline-radius.spec.tsx

@@ -34,6 +34,27 @@ function entryRowRadiusClass(): string | undefined {
   return undefined;
 }
 
+describe("Timeline avatar identity shape (LC-60 / D-09)", () => {
+  // Entry and composer avatars both keep their identity circle at
+  // `borderRadius: none`, so each one must carry the R-IDENTITY declaration the
+  // spec-generated allowlist reads. An undeclared circle is a KNOB-TOTALITY defect.
+  it("declares every knob-immune avatar circle at borderRadius:none", () => {
+    const { container } = renderWithProviders(
+      <Preset overrides={{ borderRadius: "none" }}>
+        <Timeline entries={entries} onCommentSubmit={() => {}} />
+      </Preset>,
+    );
+    // the composer avatar proves the composer branch rendered
+    expect(screen.getByPlaceholderText("Add a comment...")).toBeInTheDocument();
+
+    const declared = container.querySelectorAll('[data-radius-class="R-IDENTITY"]');
+    expect(declared.length).toBeGreaterThanOrEqual(2);
+    for (const el of declared) {
+      expect(el.getAttribute("data-radius-part")).toBe("Avatar");
+    }
+  });
+});
+
 describe("Timeline entry radius knob (SB-M-301)", () => {
   it("entry row border radius follows the borderRadius knob", () => {
     renderWithProviders(

package/src/layouts/timeline.tsx

@@ -523,14 +523,13 @@ export function Timeline({
     </Text>
   );
 
-  // Axiom 1 R-SCALE / Axiom 3 NULL: avatars are square at radius:none and a
-  // circle at radius:full — they follow the one radius channel, not a
-  // hardcoded `circular` eject (DF-08). A token exceeding half the box still
-  // renders a circle at the top knob.
+  // R-IDENTITY (D-09 / LC-60): the avatar slot inside a feed row is a
+  // declared identity shape — a recognized object, not a styled box — so it
+  // keeps its circle at every radius value including `none`. This reverses
+  // the DF-08 `circular` eject, which read Avatar as R-SCALE back when the
+  // spec table still classed it that way; the table was the wrong half.
   const renderAvatar = (entry: TimelineEntry, size: string) => (
     <Avatar
-      circular={false}
-      borderRadius={radiusToken}
       size={size as any}
       name={getEntryDisplayName(entry)}
       fallbackBackgroundColor="$accentBackground"
@@ -669,12 +668,7 @@ export function Timeline({
       },
       ariaLabel: addCommentLabel,
       avatar: (
-        <Avatar
-          circular={false}
-          borderRadius={radiusToken}
-          size={avatarSize}
-          backgroundColor={componentColors.interactive.hover}
-        >
+        <Avatar size={avatarSize} backgroundColor={componentColors.interactive.hover}>
           <Avatar.Fallback
             backgroundColor={componentColors.interactive.hover}
             alignItems="center"
@@ -701,12 +695,7 @@ export function Timeline({
       expanded: true,
       ariaLabel: `${replyLabel} ${getEntryDisplayName(parentEntry)}`,
       avatar: (
-        <Avatar
-          circular={false}
-          borderRadius={radiusToken}
-          size={replyAvatarSize}
-          backgroundColor={componentColors.interactive.hover}
-        >
+        <Avatar size={replyAvatarSize} backgroundColor={componentColors.interactive.hover}>
           <Avatar.Fallback
             backgroundColor={componentColors.interactive.hover}
             alignItems="center"

package/src/shared/t.spec.ts

@@ -0,0 +1,47 @@
+import { describe, expect, it } from "vitest";
+import { bidiIsolate, withInterp } from "./t";
+
+describe("withInterp", () => {
+  it("no-ops when the translation already interpolated", () => {
+    expect(withInterp("7 entries", { count: 7 })).toBe("7 entries");
+  });
+
+  it("interpolates the raw key when i18n is uninitialized", () => {
+    expect(withInterp("{{count}} entries", { count: 7 })).toBe("7 entries");
+  });
+
+  it("leaves unknown variables as-is", () => {
+    expect(withInterp("{{count}} entries", { other: 1 })).toBe("{{count}} entries");
+  });
+
+  it("handles multiple variables", () => {
+    expect(withInterp("{{a}} of {{b}}", { a: 1, b: 2 })).toBe("1 of 2");
+  });
+});
+
+describe("bidiIsolate (LC-58 BIDI-ISOLATION)", () => {
+  it("wraps the run in FSI…PDI so RTL contexts cannot reorder it", () => {
+    expect(bidiIsolate("1–5 of 5")).toBe("\u20681–5 of 5\u2069");
+    expect(bidiIsolate("7 entries")).toBe("\u20687 entries\u2069");
+  });
+
+  it("keeps LTR content byte-identical inside the isolates", () => {
+    // First-strong isolation adds only the invisible FSI/PDI frame — the
+    // visible run is unchanged, so LTR rendering is unaffected.
+    const isolated = bidiIsolate("1–25 of 312");
+    expect(isolated.slice(1, -1)).toBe("1–25 of 312");
+    expect(isolated.startsWith("\u2068")).toBe(true);
+    expect(isolated.endsWith("\u2069")).toBe(true);
+  });
+
+  it("preserves an RTL run's own base direction (first-strong semantics)", () => {
+    // An Arabic run keeps its first strong character (RTL) as the isolate's
+    // base direction — isolation never forces LTR on translated copy.
+    const rtl = "٧ إدخالات";
+    expect(bidiIsolate(rtl)).toBe(`\u2068${rtl}\u2069`);
+  });
+
+  it("leaves empty strings alone (nothing to isolate)", () => {
+    expect(bidiIsolate("")).toBe("");
+  });
+});

package/src/surfaces.tsx

@@ -9,6 +9,7 @@ import {
   View,
   type CardProps as TamaguiCardProps,
   type DialogContentProps as TamaguiDialogContentProps,
+  type DialogOverlayProps as TamaguiDialogOverlayProps,
   type TamaguiElement,
   type ViewProps,
   withStaticProperties,
@@ -150,6 +151,38 @@ export const DialogContent = forwardRef<
   );
 });
 
+// ── DialogOverlay ────────────────────────────────────────────────────────
+
+// A scrim only fades — sliding or scaling a full-bleed backdrop reads as a
+// glitch, so this stays opacity-only rather than reusing `overlayEnterExit`.
+const scrimFade = { opacity: 0 } as const;
+
+/**
+ * Knob-aware dialog scrim. Bare `Dialog.Overlay` carries no transition, so
+ * the backdrop popped in and out while the content faded (LC-24: enter/exit
+ * styles without a resolved token are dead code on the css driver). Pairs
+ * with `DialogContent`; `transition` drops to undefined at `animation=none`
+ * and under `prefers-reduced-motion`, which is the instant path.
+ */
+export const DialogOverlay = forwardRef<
+  TamaguiElement,
+  TamaguiDialogOverlayProps & { children?: ReactNode }
+>(function DialogOverlay({ children, ...props }, ref) {
+  const { knobProps } = useResolvedKnobs();
+  return (
+    <Dialog.Overlay
+      ref={ref}
+      backgroundColor="$shadow6"
+      transition={knobProps.transition}
+      enterStyle={scrimFade}
+      exitStyle={scrimFade}
+      {...props}
+    >
+      {children}
+    </Dialog.Overlay>
+  );
+});
+
 // ── PopoverContent ───────────────────────────────────────────────────────
 
 export const PopoverContent = forwardRef<TamaguiElement, ViewProps & { children?: ReactNode }>(

package/src/views/Calendar.stories.tsx

@@ -1,7 +1,7 @@
 import type { Meta } from "@storybook/react-native-web-vite";
 import { action } from "@multiplatform.one/storybook";
 import { useState } from "react";
-import { resolveChartPalette } from "@multiplatform.one/theme";
+import { formatAbsoluteDateTime, resolveChartPalette } from "@multiplatform.one/theme";
 import { Text, YStack } from "tamagui";
 import {
   Calendar,
@@ -75,7 +75,9 @@ function EventDragDemo() {
         onEventMove={(event: CalendarEvent, range: CalendarEventMoveRange) => {
           action("onEventMove")(event.id, range.start.toISOString(), range.end.toISOString());
           setLastMove(
-            `Moved "${event.title}" to ${range.start.toLocaleString()} - ${range.end.toLocaleString()}`,
+            `Moved "${event.title}" to ${formatAbsoluteDateTime(range.start)} - ${formatAbsoluteDateTime(
+              range.end,
+            )}`,
           );
           setDragEvents((prev) =>
             prev.map((e) => (e.id === event.id ? { ...e, start: range.start, end: range.end } : e)),

package/src/views/Calendar.tsx

@@ -25,6 +25,7 @@ import {
   hairline,
   hairlineWidth,
   pressTargetHitSlop,
+  radiusClassProps,
   useReadableTextOn,
   useResolvedKnobs,
 } from "@multiplatform.one/theme";
@@ -543,6 +544,7 @@ function NowIndicator({ hourHeight }: { hourHeight: number }) {
       {...{ "data-calendar-now": "true" }}
     >
       <YStack
+        {...radiusClassProps("R-PILL", "Calendar now-marker dot")}
         position="absolute"
         {...(isRTL ? { right: -3 } : { left: -3 })}
         top={-3}
@@ -1743,11 +1745,14 @@ export function Calendar({
                       hoverStyle={{ backgroundColor: componentColors.surface.background }}
                     >
                       <XStack justifyContent="flex-end" paddingInlineEnd="$1">
-                        {/* Today marker: accent disc (pill-by-anatomy, like Badge). */}
+                        {/* Today marker: accent disc (pill-by-anatomy, like Badge) —
+                            declared R-PILL so the `radius:none` sweep licenses the
+                            disc instead of inferring it from geometry (D-09 / LC-60). */}
                         <YStack
                           width={DAY_DISC_PX}
                           height={DAY_DISC_PX}
                           borderRadius={DAY_DISC_PX / 2}
+                          {...radiusClassProps("R-PILL", "Calendar today marker")}
                           alignItems="center"
                           justifyContent="center"
                           backgroundColor={today ? "$accentBackground" : "transparent"}

package/src/views/Gantt.stories.tsx

@@ -1,7 +1,7 @@
 import type { Meta } from "@storybook/react-native-web-vite";
 import { action } from "@multiplatform.one/storybook";
 import { useEffect, useState } from "react";
-import { resolveChartPalette } from "@multiplatform.one/theme";
+import { formatAbsoluteDate, resolveChartPalette } from "@multiplatform.one/theme";
 import { Text, YStack } from "tamagui";
 import { GanttView, type GanttItemMoveRange, type GanttTask } from "./Gantt";
 import { addDays, startOfDay } from "./ganttMath";
@@ -89,7 +89,7 @@ function BarDragDemo() {
         onItemMove={(task: GanttTask, range: GanttItemMoveRange) => {
           action("onItemMove")(task.id, range.start.toISOString(), range.end.toISOString());
           setLastMove(
-            `Moved "${task.title}" to ${range.start.toLocaleDateString()} – ${range.end.toLocaleDateString()}`,
+            `Moved "${task.title}" to ${formatAbsoluteDate(range.start)} – ${formatAbsoluteDate(range.end)}`,
           );
           setDragTasks((prev) =>
             prev.map((t) => (t.id === task.id ? { ...t, start: range.start, end: range.end } : t)),

package/src/views/Kanban.native.tsx

@@ -1,5 +1,5 @@
 import { FlashList, type FlashListRef } from "@shopify/flash-list";
-import { animationConfig, useResolvedKnobs } from "@multiplatform.one/theme";
+import { animationConfig, radiusClassProps, useResolvedKnobs } from "@multiplatform.one/theme";
 import React, {
   useCallback,
   useEffect,
@@ -837,7 +837,13 @@ function KanbanColumnView<T>({
         title={column.title}
         icon={
           column.color ? (
-            <YStack width={8} height={8} borderRadius={4} backgroundColor={column.color as any} />
+            <YStack
+              {...radiusClassProps("R-PILL", "Kanban column dot")}
+              width={8}
+              height={8}
+              borderRadius={4}
+              backgroundColor={column.color as any}
+            />
           ) : undefined
         }
         iconAfter={

package/src/views/Kanban.stories.tsx

@@ -1,7 +1,9 @@
 import { action } from "@multiplatform.one/storybook";
+// Catalog Button (LC-56 story honesty): stories compose catalog controls, never raw tamagui ones.
+import { Button } from "@multiplatform.one/forms";
 import type { Meta } from "@storybook/react-native-web-vite";
 import { useCallback, useState } from "react";
-import { Button, Text, XStack } from "tamagui";
+import { Text, XStack } from "tamagui";
 import { Kanban, type KanbanColumn } from "./Kanban";
 
 interface Task {

package/src/views/Kanban.tsx

@@ -2,7 +2,7 @@ import { componentColors } from "../componentColors";
 import { AsyncBoundary, useAsyncCount } from "../layouts/AsyncBoundary";
 import { EmptyState } from "../layouts/page";
 import { Spinner } from "@multiplatform.one/forms";
-import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { radiusClassProps, useResolvedKnobs } from "@multiplatform.one/theme";
 import { useHotkey } from "@tanstack/react-hotkeys";
 import type { RegisterableHotkey } from "@tanstack/react-hotkeys";
 import { useVirtualizer } from "@tanstack/react-virtual";
@@ -101,6 +101,18 @@ export interface KanbanProps<T> extends Omit<YStackProps, "children"> {
   onCardReorder?: (item: T, columnId: string, fromIndex: number, toIndex: number) => void;
   /** Called when a card is selected via keyboard or click */
   onCardSelect?: (item: T, columnId: string) => void;
+  /**
+   * Per-column actions (quick-add, column menu…) anchored in the column
+   * header after the count. Icon-only actions must carry their own
+   * accessible names — the board renders the slot as-is.
+   */
+  renderColumnActions?: (column: KanbanColumn<T>) => ReactNode;
+  /**
+   * Rendered after the last column inside the horizontal scroller — the
+   * anchored home for board-level affordances like "Add column" (never a
+   * detached toolbar strip).
+   */
+  boardEnd?: ReactNode;
   /** Called when user scrolls near the bottom (infinite scroll) */
   onLoadMore?: () => void;
   /** Stable key extractor for virtualized cards (defaults to the item index) */
@@ -249,6 +261,8 @@ export function Kanban<T>({
   onCardMove,
   onCardReorder,
   onCardSelect,
+  renderColumnActions,
+  boardEnd,
   onLoadMore,
   getItemKey,
   getItemLabel,
@@ -955,12 +969,14 @@ export function Kanban<T>({
                 registerColumn={registerColumn}
                 drag={dragContext}
                 settlingKey={settle?.itemKey}
+                renderColumnActions={renderColumnActions}
                 onLoadMore={onLoadMore}
                 getItemKey={getItemKey}
                 hasMore={hasMore}
                 isLoading={isLoading}
               />
             ))}
+            {boardEnd}
           </XStack>
         </ScrollView>
 
@@ -1110,6 +1126,7 @@ interface KanbanColumnViewProps<T> {
   registerColumn: (id: string, handle: ColumnHandle | null) => void;
   drag: KanbanDragRenderContext | null;
   settlingKey?: string | number;
+  renderColumnActions?: (column: KanbanColumn<T>) => ReactNode;
   onLoadMore?: () => void;
   getItemKey?: (item: T, index: number) => string | number;
   hasMore?: boolean;
@@ -1134,6 +1151,7 @@ function KanbanColumnView<T>({
   registerColumn,
   drag,
   settlingKey,
+  renderColumnActions,
   onLoadMore,
   getItemKey,
   hasMore,
@@ -1327,21 +1345,32 @@ function KanbanColumnView<T>({
         title={column.title}
         icon={
           column.color ? (
-            <YStack width={8} height={8} borderRadius={4} backgroundColor={column.color as any} />
+            <YStack
+              {...radiusClassProps("R-PILL", "Kanban column dot")}
+              width={8}
+              height={8}
+              borderRadius={4}
+              backgroundColor={column.color as any}
+            />
           ) : undefined
         }
         iconAfter={
-          itemCount !== undefined ? (
-            <Text
-              color={componentColors.text.muted}
-              fontSize={knobProps.sizeToken}
-              {...{ backgroundColor: componentColors.surface.background }}
-              paddingHorizontal="$2"
-              borderRadius={knobProps.borderRadius.borderRadius}
-              data-async-count
-            >
-              {itemCount}
-            </Text>
+          itemCount !== undefined || renderColumnActions ? (
+            <XStack alignItems="center" gap="$1">
+              {itemCount !== undefined && (
+                <Text
+                  color={componentColors.text.muted}
+                  fontSize={knobProps.sizeToken}
+                  {...{ backgroundColor: componentColors.surface.background }}
+                  paddingHorizontal="$2"
+                  borderRadius={knobProps.borderRadius.borderRadius}
+                  data-async-count
+                >
+                  {itemCount}
+                </Text>
+              )}
+              {renderColumnActions?.(column)}
+            </XStack>
           ) : undefined
         }
         size={knobProps.sizeToken}

package/src/views/ReportBuilder.tsx

@@ -3,9 +3,13 @@ import { componentColors } from "../componentColors";
 import { AsyncBoundary, AsyncSkeleton, resolveAsyncStatus } from "../layouts/AsyncBoundary";
 import { EmptyState } from "../layouts/page";
 import {
+  formatAbsoluteDate,
+  formatAbsoluteDateTime,
   formatCurrency,
   formatNumber,
   formatPercent,
+  formatTimeOfDay,
+  pressTargetStyle,
   useResolvedKnobs,
 } from "@multiplatform.one/theme";
 // House Button (not raw tamagui): carries the DG-LAY-04 / D-02 ≥44px press
@@ -135,6 +139,14 @@ function formatCellValue(value: unknown, fieldtype: string): string {
       return formatPercent(value as number, { precision: 1 });
     case "Rating":
       return `${formatNumber(Number(value) * 5, { precision: 1 })} / 5`;
+    // Date-class cells take the house absolute register instead of letting
+    // the wire string ("2026-01-15") reach the reader.
+    case "Date":
+      return formatAbsoluteDate(value as string);
+    case "Datetime":
+      return formatAbsoluteDateTime(value as string);
+    case "Time":
+      return formatTimeOfDay(value as string);
     default:
       return String(value);
   }
@@ -494,9 +506,10 @@ export function ReportBuilder({
           {/* Chart toggle */}
           {showChart && groupedData && (
             <Button
-              size={reportFontSize}
+              size={knobProps.sizeToken}
               onPress={() => setChartVisible((v) => !v)}
               theme={chartVisible ? "active" : undefined}
+              {...pressTargetStyle()}
             >
               Chart
             </Button>
@@ -504,7 +517,7 @@ export function ReportBuilder({
 
           {/* Export */}
           {onExport && (
-            <Button size={reportFontSize} onPress={handleExport}>
+            <Button size={knobProps.sizeToken} onPress={handleExport} {...pressTargetStyle()}>
               Export
             </Button>
           )}