@multiplatform.one/components 6.1.0 → 6.4.0

package/src/views/views.spec.tsx

@@ -1,10 +1,33 @@
-import { cleanup, screen } from "@testing-library/react";
+import { cleanup, fireEvent, screen } from "@testing-library/react";
 import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { useChartPalette, type ChartPalette } from "@multiplatform.one/theme";
 import * as React from "react";
+import { Theme } from "tamagui";
 import { afterEach, describe, expect, it, vi } from "vitest";
-import { Calendar, type CalendarEvent } from "./Calendar";
+import { componentColors } from "../componentColors";
+import {
+  Calendar,
+  computeEventMoveRange,
+  findDayKeyAtPoint,
+  type CalendarDayLayout,
+  type CalendarEvent,
+} from "./Calendar";
 import * as ViewExports from "./index";
 
+// ChartSurface measures its width via onLayout, which never fires in
+// happy-dom (no layout engine) — pin the measurement so the universal
+// charts inside ChartCard render; scales, marks, and palette resolution
+// stay real (same convention as the explicit widths in charts.spec.tsx).
+vi.mock("../charts/ChartSurface", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("../charts/ChartSurface")>();
+  return {
+    ...actual,
+    ChartSurface: (props: React.ComponentProps<typeof actual.ChartSurface>) => (
+      <actual.ChartSurface {...props} width={props.width ?? 400} />
+    ),
+  };
+});
+
 // Mock @tanstack/react-virtual so that useVirtualizer renders all items
 // in the happy-dom test environment (which has no layout engine).
 vi.mock("@tanstack/react-virtual", () => ({
@@ -66,6 +89,28 @@ describe("List", () => {
     expect(screen.getByText("No Pokemon found")).toBeInTheDocument();
   });
 
+  it("shows list skeleton while loading with no items (W9 / DG-ST-02)", () => {
+    renderWithProviders(
+      <List items={[]} renderItem={() => <span />} isLoading emptyMessage="No Pokemon found" />,
+    );
+    expect(document.querySelector('[data-async-skeleton="list"]')).toBeTruthy();
+    expect(screen.queryByText("No Pokemon found")).toBeNull();
+  });
+
+  it("forbids empty chrome when error is set (W9 / DG-ST-01)", () => {
+    renderWithProviders(
+      <List
+        items={[]}
+        renderItem={() => <span />}
+        emptyMessage="No Pokemon found"
+        error="Failed to fetch"
+      />,
+    );
+    expect(screen.queryByText("No Pokemon found")).toBeNull();
+    expect(screen.getByText("Failed to fetch")).toBeInTheDocument();
+    expect(document.querySelector('[data-async-state="error"]')).toBeTruthy();
+  });
+
   it("renders rows as ListItem with listitem role", () => {
     const items = [
       { id: "1", name: "Pikachu" },
@@ -158,32 +203,57 @@ describe("Kanban", () => {
     expect(screen.getByText("2")).toBeInTheDocument();
     expect(screen.getByText("1")).toBeInTheDocument();
   });
+
+  it("shows error UI and hides board chrome when error is set (W9 / DG-ST-01)", () => {
+    renderWithProviders(
+      <Kanban
+        columns={[{ id: "todo", title: "To Do", items: [] }]}
+        renderCard={() => <span />}
+        error="Board failed to load"
+        emptyColumnMessage="No items"
+      />,
+    );
+    expect(screen.queryByText("To Do")).toBeNull();
+    expect(screen.queryByText("No items")).toBeNull();
+    expect(screen.getByText("Board failed to load")).toBeInTheDocument();
+  });
+
+  it("shows kanban skeleton while loading empty board (W9 / DG-ST-02)", () => {
+    renderWithProviders(
+      <Kanban
+        columns={[{ id: "todo", title: "To Do", items: [] }]}
+        renderCard={() => <span />}
+        isLoading
+      />,
+    );
+    expect(document.querySelector('[data-async-skeleton="kanban"]')).toBeTruthy();
+  });
 });
 
 // ---------------------------------------------------------------------------
-// Test 4: TreeView renders nested tree data as ListItem rows
+// Test 4: TreeView — EUI-style flat rows + expand/select contracts
 // ---------------------------------------------------------------------------
 describe("TreeView", () => {
-  it("renders nested tree data from props", () => {
-    const nodes: TreeNode[] = [
-      {
-        id: "root",
-        label: "Root Node",
-        children: [
-          { id: "child-1", label: "Child 1" },
-          {
-            id: "child-2",
-            label: "Child 2",
-            children: [{ id: "grandchild", label: "Grandchild" }],
-          },
-        ],
-      },
-      {
-        id: "root-2",
-        label: "Root 2",
-      },
-    ];
+  const nodes: TreeNode[] = [
+    {
+      id: "root",
+      label: "Root Node",
+      children: [
+        { id: "child-1", label: "Child 1" },
+        {
+          id: "child-2",
+          label: "Child 2",
+          children: [{ id: "grandchild", label: "Grandchild" }],
+        },
+      ],
+    },
+    {
+      id: "root-2",
+      label: "Root 2",
+    },
+  ];
 
+  it("renders nested tree data from props", () => {
     renderWithProviders(
       <TreeView
         nodes={nodes}
@@ -193,15 +263,85 @@ describe("TreeView", () => {
       />,
     );
 
-    // Root nodes visible
     expect(screen.getByText("Root Node")).toBeInTheDocument();
     expect(screen.getByText("Root 2")).toBeInTheDocument();
+    expect(screen.getByText("Child 1")).toBeInTheDocument();
+    expect(screen.getByText("Child 2")).toBeInTheDocument();
+    expect(screen.getByText("Grandchild")).toBeInTheDocument();
+  });
+
+  it("expandByDefault shows all nested descendants", () => {
+    renderWithProviders(
+      <TreeView nodes={nodes} expandByDefault ariaLabel="Test tree" height={400} />,
+    );
 
-    // Children visible (root is expanded by default)
+    expect(screen.getByText("Root Node")).toBeInTheDocument();
     expect(screen.getByText("Child 1")).toBeInTheDocument();
     expect(screen.getByText("Child 2")).toBeInTheDocument();
+    expect(screen.getByText("Grandchild")).toBeInTheDocument();
+  });
+
+  it("marks the selectedId row as aria-selected", () => {
+    renderWithProviders(
+      <TreeView
+        nodes={nodes}
+        defaultExpandedIds={["root"]}
+        selectedId="child-1"
+        ariaLabel="Selection tree"
+        height={400}
+      />,
+    );
+
+    const selected = screen.getByText("Child 1").closest('[role="treeitem"]');
+    expect(selected).toHaveAttribute("aria-selected", "true");
+  });
+
+  it("exposes expandable branches via aria-expanded rows", () => {
+    renderWithProviders(
+      <TreeView nodes={nodes} showExpansionArrows ariaLabel="Arrow tree" height={400} />,
+    );
+
+    // The whole branch row is the toggle target (EUI/VS Code semantics);
+    // the caret is a rotating indicator, not a separate sub-44px control.
+    const branch = screen.getByText("Root Node").closest('[role="treeitem"]');
+    expect(branch).toHaveAttribute("aria-expanded", "false");
+  });
+
+  it("toggles a branch on row press and again with Space", () => {
+    renderWithProviders(
+      <TreeView nodes={nodes} showExpansionArrows ariaLabel="Space tree" height={400} />,
+    );
+
+    expect(screen.queryByText("Child 1")).not.toBeInTheDocument();
 
-    // Grandchild visible (child-2 is expanded by default)
+    // Pressing the branch row expands it (and focuses the row).
+    fireEvent.click(screen.getByText("Root Node"));
+    expect(screen.getByText("Child 1")).toBeInTheDocument();
+    expect(screen.getByText("Root Node").closest('[role="treeitem"]')).toHaveAttribute(
+      "aria-expanded",
+      "true",
+    );
+
+    // Space on the focused branch collapses it again.
+    const tree = screen.getByRole("tree");
+    tree.focus();
+    fireEvent.keyDown(tree, { key: " ", code: "Space" });
+
+    expect(screen.queryByText("Child 1")).not.toBeInTheDocument();
+  });
+
+  it("uses compressed estimateSize defaults without crashing", () => {
+    renderWithProviders(
+      <TreeView
+        nodes={nodes}
+        display="compressed"
+        expandByDefault
+        ariaLabel="Compressed tree"
+        height={280}
+      />,
+    );
+
+    expect(screen.getByRole("tree")).toHaveAttribute("aria-label", "Compressed tree");
     expect(screen.getByText("Grandchild")).toBeInTheDocument();
   });
 });
@@ -236,6 +376,36 @@ describe("ImageGrid", () => {
     expect(screen.getByText("Photo C")).toBeInTheDocument();
   });
 
+  it("shows the grid-shaped skeleton twin while loading with no items (LC-20 / DG-ST-02)", () => {
+    renderWithProviders(<ImageGrid items={[]} renderItem={() => <div />} isLoading columns={3} />);
+
+    const twin = document.querySelector('[data-async-skeleton="image-grid"]');
+    expect(twin).toBeTruthy();
+    // Aspect-correct blocks matching the live geometry: columns * 2 cells
+    expect(twin?.children.length).toBe(6);
+    expect(screen.queryByText("No items found")).toBeNull();
+  });
+
+  it("error wins over empty and the retry action fires (W9 / DG-ST-01)", () => {
+    const onRetry = vi.fn();
+    renderWithProviders(
+      <ImageGrid
+        items={[]}
+        renderItem={() => <div />}
+        emptyMessage="No images"
+        error="Image list failed to load"
+        onRetry={onRetry}
+      />,
+    );
+
+    expect(screen.queryByText("No images")).toBeNull();
+    expect(document.querySelector('[data-async-state="error"]')).toBeTruthy();
+    expect(screen.getByText("Image list failed to load")).toBeInTheDocument();
+
+    fireEvent.click(screen.getByText("Retry"));
+    expect(onRetry).toHaveBeenCalledTimes(1);
+  });
+
   it("renders empty message when items array is empty", () => {
     renderWithProviders(
       <ImageGrid items={[]} renderItem={() => <div />} emptyMessage="No images" />,
@@ -283,6 +453,194 @@ describe("Calendar", () => {
   });
 });
 
+// ---------------------------------------------------------------------------
+// Test 6b: Calendar event drag-and-drop (computeEventMoveRange + pointer flow)
+// ---------------------------------------------------------------------------
+describe("Calendar event drag", () => {
+  describe("computeEventMoveRange", () => {
+    it("preserves time-of-day and duration when moving to another day", () => {
+      const event: CalendarEvent = {
+        id: "evt-1",
+        title: "Standup",
+        start: new Date(2026, 2, 10, 9, 0),
+        end: new Date(2026, 2, 10, 9, 30),
+      };
+      const range = computeEventMoveRange(event, new Date(2026, 2, 20));
+      expect(range.start).toEqual(new Date(2026, 2, 20, 9, 0));
+      expect(range.end).toEqual(new Date(2026, 2, 20, 9, 30));
+      expect(range.end.getTime() - range.start.getTime()).toBe(30 * 60 * 1000);
+    });
+
+    it("preserves the day span of multi-day events", () => {
+      const event: CalendarEvent = {
+        id: "evt-2",
+        title: "Conference",
+        start: new Date(2026, 2, 10, 9, 0),
+        end: new Date(2026, 2, 12, 17, 0),
+      };
+      const range = computeEventMoveRange(event, new Date(2026, 2, 25));
+      expect(range.start).toEqual(new Date(2026, 2, 25, 9, 0));
+      expect(range.end).toEqual(new Date(2026, 2, 27, 17, 0));
+    });
+
+    it("moves backwards and across month boundaries", () => {
+      const event: CalendarEvent = {
+        id: "evt-3",
+        title: "Review",
+        start: new Date(2026, 2, 10, 14, 15),
+        end: new Date(2026, 2, 10, 15, 45),
+      };
+      const range = computeEventMoveRange(event, new Date(2026, 1, 27));
+      expect(range.start).toEqual(new Date(2026, 1, 27, 14, 15));
+      expect(range.end).toEqual(new Date(2026, 1, 27, 15, 45));
+    });
+
+    it("returns a zero-duration range for events without an end", () => {
+      const event: CalendarEvent = {
+        id: "evt-4",
+        title: "Reminder",
+        start: new Date(2026, 2, 10, 8, 0),
+      };
+      const range = computeEventMoveRange(event, new Date(2026, 2, 11));
+      expect(range.start).toEqual(new Date(2026, 2, 11, 8, 0));
+      expect(range.end).toEqual(range.start);
+    });
+  });
+
+  describe("findDayKeyAtPoint (native hit-test)", () => {
+    const layouts: CalendarDayLayout[] = [
+      { key: "2026-03-10", x: 0, y: 0, width: 100, height: 80 },
+      { key: "2026-03-11", x: 100, y: 0, width: 100, height: 80 },
+      { key: "2026-03-17", x: 0, y: 80, width: 100, height: 80 },
+    ];
+
+    it("returns the day key whose rect contains the point", () => {
+      expect(findDayKeyAtPoint(150, 40, layouts)).toBe("2026-03-11");
+      expect(findDayKeyAtPoint(10, 100, layouts)).toBe("2026-03-17");
+    });
+
+    it("returns null when the point misses every day cell", () => {
+      expect(findDayKeyAtPoint(500, 500, layouts)).toBeNull();
+    });
+
+    it("assigns shared edges to the next cell (half-open rects)", () => {
+      expect(findDayKeyAtPoint(100, 0, layouts)).toBe("2026-03-11");
+      expect(findDayKeyAtPoint(0, 80, layouts)).toBe("2026-03-17");
+      expect(findDayKeyAtPoint(199, 79, layouts)).toBe("2026-03-11");
+    });
+  });
+
+  describe("pointer drag interaction", () => {
+    const start = new Date(2026, 2, 10, 9, 0);
+    const dragEvents: CalendarEvent[] = [
+      { id: "evt-1", title: "Standup", start, end: new Date(2026, 2, 10, 9, 30) },
+    ];
+    const originalElementFromPoint = document.elementFromPoint;
+
+    afterEach(() => {
+      (document as any).elementFromPoint = originalElementFromPoint;
+    });
+
+    function renderDraggableCalendar(onEventMove = vi.fn(), onEventClick = vi.fn()) {
+      const { container } = renderWithProviders(
+        <Calendar
+          events={dragEvents}
+          viewType="month"
+          initialDate={start}
+          onEventMove={onEventMove}
+          onEventClick={onEventClick}
+          height={600}
+        />,
+      );
+      const chip = container.querySelector('[data-calendar-event="evt-1"]');
+      const targetCell = container.querySelector('[data-calendar-day="2026-03-20"]');
+      expect(chip).toBeTruthy();
+      expect(targetCell).toBeTruthy();
+      // happy-dom has no layout engine, so stub hit-testing to the target cell.
+      (document as any).elementFromPoint = vi.fn(() => targetCell);
+      return { chip: chip as Element, targetCell: targetCell as Element };
+    }
+
+    it("moves an event to another day via pointer drag", () => {
+      const onEventMove = vi.fn();
+      const onEventClick = vi.fn();
+      const { chip } = renderDraggableCalendar(onEventMove, onEventClick);
+
+      fireEvent.pointerDown(chip, { button: 0, clientX: 100, clientY: 100 });
+      fireEvent.pointerMove(window, { clientX: 160, clientY: 160 });
+      fireEvent.pointerUp(window, { clientX: 160, clientY: 160 });
+
+      expect(onEventMove).toHaveBeenCalledTimes(1);
+      const [movedEvent, range] = onEventMove.mock.calls[0];
+      expect(movedEvent.id).toBe("evt-1");
+      expect(range.start).toEqual(new Date(2026, 2, 20, 9, 0));
+      expect(range.end).toEqual(new Date(2026, 2, 20, 9, 30));
+      expect(onEventClick).not.toHaveBeenCalled();
+    });
+
+    it("does not fire onEventMove when movement stays under the drag threshold", () => {
+      const onEventMove = vi.fn();
+      const { chip } = renderDraggableCalendar(onEventMove);
+
+      fireEvent.pointerDown(chip, { button: 0, clientX: 100, clientY: 100 });
+      fireEvent.pointerMove(window, { clientX: 101, clientY: 101 });
+      fireEvent.pointerUp(window, { clientX: 101, clientY: 101 });
+
+      expect(onEventMove).not.toHaveBeenCalled();
+    });
+
+    it("still fires onEventClick for a plain click when drag is enabled", () => {
+      const onEventMove = vi.fn();
+      const onEventClick = vi.fn();
+      const { chip } = renderDraggableCalendar(onEventMove, onEventClick);
+
+      fireEvent.pointerDown(chip, { button: 0, clientX: 100, clientY: 100 });
+      fireEvent.pointerUp(window, { clientX: 100, clientY: 100 });
+      fireEvent.click(screen.getByText("Standup"));
+
+      expect(onEventClick).toHaveBeenCalledTimes(1);
+      expect(onEventClick.mock.calls[0][0].id).toBe("evt-1");
+      expect(onEventMove).not.toHaveBeenCalled();
+    });
+
+    it("cancels an in-flight drag with Escape", () => {
+      const onEventMove = vi.fn();
+      const { chip } = renderDraggableCalendar(onEventMove);
+
+      fireEvent.pointerDown(chip, { button: 0, clientX: 100, clientY: 100 });
+      fireEvent.pointerMove(window, { clientX: 160, clientY: 160 });
+      fireEvent.keyDown(window, { key: "Escape" });
+      fireEvent.pointerUp(window, { clientX: 160, clientY: 160 });
+
+      expect(onEventMove).not.toHaveBeenCalled();
+    });
+
+    it("disables drag when enableEventDrag is false", () => {
+      const onEventMove = vi.fn();
+      const { container } = renderWithProviders(
+        <Calendar
+          events={dragEvents}
+          viewType="month"
+          initialDate={start}
+          onEventMove={onEventMove}
+          enableEventDrag={false}
+          height={600}
+        />,
+      );
+      const chip = container.querySelector('[data-calendar-event="evt-1"]') as Element;
+      const targetCell = container.querySelector('[data-calendar-day="2026-03-20"]');
+      (document as any).elementFromPoint = vi.fn(() => targetCell);
+
+      fireEvent.pointerDown(chip, { button: 0, clientX: 100, clientY: 100 });
+      fireEvent.pointerMove(window, { clientX: 160, clientY: 160 });
+      fireEvent.pointerUp(window, { clientX: 160, clientY: 160 });
+
+      expect(onEventMove).not.toHaveBeenCalled();
+      (document as any).elementFromPoint = originalElementFromPoint;
+    });
+  });
+});
+
 // ---------------------------------------------------------------------------
 // Test 7: Dashboard renders KPICard and ChartCard as Card components
 // ---------------------------------------------------------------------------
@@ -315,6 +673,224 @@ describe("Dashboard", () => {
   });
 });
 
+// ---------------------------------------------------------------------------
+// Test 7b: LC-36 TREND-SENTIMENT — trend color encodes sentiment, never
+// direction. resolveTrendColor is the one sentinel resolver: color comes
+// from trend × goodDirection; undeclared sentiment renders neutral.
+// ---------------------------------------------------------------------------
+describe("KPICard trend sentiment (LC-36 TREND-SENTIMENT)", () => {
+  const { resolveTrendColor } = ViewExports;
+  const success = componentColors.semantic.success;
+  const error = componentColors.semantic.error;
+  const neutral = componentColors.text.muted;
+
+  it("renders neutral when goodDirection is undeclared — direction alone never picks a verdict color", () => {
+    expect(resolveTrendColor("up", undefined)).toBe(neutral);
+    expect(resolveTrendColor("down", undefined)).toBe(neutral);
+  });
+
+  it("renders neutral when goodDirection is 'none' (direction without sentiment)", () => {
+    expect(resolveTrendColor("up", "none")).toBe(neutral);
+    expect(resolveTrendColor("down", "none")).toBe(neutral);
+  });
+
+  it("colors by improvement when sentiment is declared (trend × goodDirection)", () => {
+    // improving → success
+    expect(resolveTrendColor("up", "up")).toBe(success);
+    expect(resolveTrendColor("down", "down")).toBe(success);
+    // worsening → error
+    expect(resolveTrendColor("down", "up")).toBe(error);
+    expect(resolveTrendColor("up", "down")).toBe(error);
+  });
+
+  it("renders neutral for a neutral or absent trend regardless of declaration", () => {
+    expect(resolveTrendColor("neutral", "up")).toBe(neutral);
+    expect(resolveTrendColor("neutral", undefined)).toBe(neutral);
+    expect(resolveTrendColor(undefined, "down")).toBe(neutral);
+  });
+
+  it("KPICard passes the resolved sentiment color to the trend text", () => {
+    // Declared down-good falling metric (an improvement) and an undeclared
+    // one render through the same sentinel resolver — smoke the DOM wiring.
+    renderWithProviders(
+      <ViewExports.KPICard
+        config={{
+          id: "overdue",
+          title: "Overdue Balance",
+          value: 25470,
+          trend: "down",
+          trendValue: "-8%",
+          goodDirection: "down",
+        }}
+      />,
+    );
+    expect(screen.getByText("↓")).toBeInTheDocument();
+    expect(screen.getByText("-8%")).toBeInTheDocument();
+  });
+});
+
+// ---------------------------------------------------------------------------
+// Test 7a: ReportBuilder honest async states (W9 / DG-ST-01,02,04 / DG-TBL-06)
+// ---------------------------------------------------------------------------
+describe("ReportBuilder", () => {
+  const reportColumns = [
+    { fieldname: "name", label: "Name", fieldtype: "Data", enabled: true },
+    { fieldname: "status", label: "Status", fieldtype: "Select", enabled: true },
+  ];
+
+  it("shows the table skeleton twin while loading with no rows (LC-20 / DG-ST-02)", () => {
+    renderWithProviders(<ViewExports.ReportBuilder columns={reportColumns} data={[]} isLoading />);
+
+    expect(document.querySelector('[data-async-skeleton="table"]')).toBeTruthy();
+    expect(screen.queryByText("No data to display")).toBeNull();
+  });
+
+  it("error wins over empty, hides the toolbar counts, and retry fires (DG-ST-01/04)", () => {
+    const onRetry = vi.fn();
+    renderWithProviders(
+      <ViewExports.ReportBuilder
+        columns={reportColumns}
+        data={[]}
+        error="Report rows failed to load"
+        onRetry={onRetry}
+      />,
+    );
+
+    // Failed load must never masquerade as an empty report
+    expect(screen.queryByText("No data to display")).toBeNull();
+    expect(document.querySelector('[data-async-state="error"]')).toBeTruthy();
+    expect(screen.getByText("Report rows failed to load")).toBeInTheDocument();
+    // Toolbar column count hides with the toolbar (DG-ST-04)
+    expect(screen.queryByText(/2 \/ 2 columns/)).toBeNull();
+
+    fireEvent.click(screen.getByText("Retry"));
+    expect(onRetry).toHaveBeenCalledTimes(1);
+  });
+
+  it("distinguishes no-results (active filters) from true empty (DG-TBL-06 / Axiom 6)", () => {
+    const { unmount } = renderWithProviders(
+      <ViewExports.ReportBuilder columns={reportColumns} data={[]} hasActiveFilters />,
+    );
+    expect(screen.getByText("No results found")).toBeInTheDocument();
+    expect(screen.queryByText("No data to display")).toBeNull();
+    unmount();
+
+    renderWithProviders(<ViewExports.ReportBuilder columns={reportColumns} data={[]} />);
+    expect(screen.getByText("No data to display")).toBeInTheDocument();
+    expect(screen.queryByText("No results found")).toBeNull();
+  });
+});
+
+// ---------------------------------------------------------------------------
+// Test 7b: ChartCard default colors come from the canonical chart palette
+// (SB-D-07 / SB-D-25 — single-series identity, categorical palette, tint
+// re-anchor, explicit data colors pass through untouched).
+// ---------------------------------------------------------------------------
+describe("ChartCard palette", () => {
+  const pieData = [
+    { label: "A", value: 4 },
+    { label: "B", value: 3 },
+    { label: "C", value: 2 },
+    { label: "D", value: 1 },
+  ];
+
+  function PaletteProbe({ into }: { into: { current?: ChartPalette } }) {
+    into.current = useChartPalette();
+    return null;
+  }
+
+  function pieSliceFills(): Array<string | null> {
+    return Array.from(document.querySelectorAll("svg path")).map((p) => p.getAttribute("fill"));
+  }
+
+  it("pie slices take the categorical palette from useChartPalette()", () => {
+    const captured: { current?: ChartPalette } = {};
+    renderWithProviders(
+      <>
+        <PaletteProbe into={captured} />
+        <ViewExports.ChartCard config={{ id: "p", title: "Pie", type: "pie", data: pieData }} />
+      </>,
+    );
+    expect(captured.current).toBeDefined();
+    const fills = pieSliceFills();
+    expect(fills).toEqual(captured.current?.categorical.slice(0, pieData.length));
+  });
+
+  it("single-series bars all take the identity solid", () => {
+    const captured: { current?: ChartPalette } = {};
+    renderWithProviders(
+      <>
+        <PaletteProbe into={captured} />
+        <ViewExports.ChartCard config={{ id: "b", title: "Bar", type: "bar", data: pieData }} />
+      </>,
+    );
+    const fills = Array.from(document.querySelectorAll("svg rect")).map((r) =>
+      r.getAttribute("fill"),
+    );
+    expect(fills.length).toBe(pieData.length);
+    for (const fill of fills) expect(fill).toBe(captured.current?.single);
+  });
+
+  it("re-anchors the palette identity under a tint sub-theme", () => {
+    const captured: { current?: ChartPalette } = {};
+    const base: { current?: ChartPalette } = {};
+    renderWithProviders(
+      <>
+        <PaletteProbe into={base} />
+        <Theme name={"red" as any}>
+          <PaletteProbe into={captured} />
+          <ViewExports.ChartCard config={{ id: "t", title: "Bar", type: "bar", data: pieData }} />
+        </Theme>
+      </>,
+    );
+    expect(captured.current).toBeDefined();
+    expect(base.current).toBeDefined();
+    // Tint identity is the re-ramped $color9, not the base accent.
+    expect(captured.current?.single).not.toBe(base.current?.single);
+    const fills = Array.from(document.querySelectorAll("svg rect")).map((r) =>
+      r.getAttribute("fill"),
+    );
+    for (const fill of fills) expect(fill).toBe(captured.current?.single);
+  });
+
+  it("explicit data colors pass through untouched (VALUE IS DATA)", () => {
+    renderWithProviders(
+      <ViewExports.ChartCard
+        config={{
+          id: "v",
+          title: "Pie",
+          type: "pie",
+          data: [
+            { label: "custom", value: 5, color: "#123456" },
+            { label: "default", value: 5 },
+          ],
+        }}
+      />,
+    );
+    const fills = pieSliceFills();
+    expect(fills[0]).toBe("#123456");
+    expect(fills[1]).not.toBe("#123456");
+  });
+
+  it("explicit config.colors list passes through untouched", () => {
+    renderWithProviders(
+      <ViewExports.ChartCard
+        config={{
+          id: "cc",
+          title: "Bar",
+          type: "bar",
+          data: pieData,
+          colors: ["#0a0b0c"],
+        }}
+      />,
+    );
+    const fills = Array.from(document.querySelectorAll("svg rect")).map((r) =>
+      r.getAttribute("fill"),
+    );
+    for (const fill of fills) expect(fill).toBe("#0a0b0c");
+  });
+});
+
 // ---------------------------------------------------------------------------
 // Barrel export validation
 // ---------------------------------------------------------------------------
@@ -323,6 +899,7 @@ describe("Views barrel exports", () => {
     expect(ViewExports).toHaveProperty("List");
     expect(ViewExports).toHaveProperty("Kanban");
     expect(ViewExports).toHaveProperty("Calendar");
+    expect(ViewExports).toHaveProperty("computeEventMoveRange");
     expect(ViewExports).toHaveProperty("TreeView");
     expect(ViewExports).toHaveProperty("ImageGrid");
     expect(ViewExports).toHaveProperty("Dashboard");