@multiplatform.one/components 7.4.1 → 7.6.0

package/src/views/Gantt.tsx

@@ -228,6 +228,8 @@ const SKELETON_BARS = [
 
 function GanttSkeleton({ labelWidth, rowHeight }: { labelWidth: number; rowHeight: number }) {
   const { t } = useTranslation();
+  const { knobProps } = useResolvedKnobs();
+  const edgePad = knobProps.panelPadding.padding;
   return (
     <YStack width="100%" aria-busy aria-label={t("Loading")} {...{ "data-gantt-skeleton": "true" }}>
       <XStack
@@ -236,7 +238,7 @@ function GanttSkeleton({ labelWidth, rowHeight }: { labelWidth: number; rowHeigh
         {...hairline.bottom}
         borderColor="$borderColor"
       >
-        <XStack width={labelWidth} paddingHorizontal="$3">
+        <XStack width={labelWidth} paddingHorizontal={edgePad}>
           <Skeleton width={64} height={12} />
         </XStack>
         <Skeleton width={220} height={12} />
@@ -249,7 +251,7 @@ function GanttSkeleton({ labelWidth, rowHeight }: { labelWidth: number; rowHeigh
           {...(i < SKELETON_BARS.length - 1 ? hairline.bottom : null)}
           borderColor={componentColors.divider}
         >
-          <XStack width={labelWidth} paddingHorizontal="$3">
+          <XStack width={labelWidth} paddingHorizontal={edgePad}>
             <Skeleton width={i % 2 === 0 ? 96 : 72} height={12} />
           </XStack>
           <YStack marginLeft={bar.x}>
@@ -282,14 +284,14 @@ function BarIntentWrap({
 
 /** Title ink on a filled bar — paper or ink, whichever clears AA on the fill. */
 function GanttBarLabel({ title, fill }: { title: string; fill: string }) {
+  const { knobProps } = useResolvedKnobs();
   const ink = useReadableTextOn(fill);
   return (
     <Text
       color={ink ?? "$color1"}
-      fontSize="$1"
-      fontWeight="600"
+      {...knobProps.label}
       numberOfLines={1}
-      paddingHorizontal="$2"
+      paddingHorizontal={knobProps.control.paddingHorizontal}
       pointerEvents="none"
       zIndex={1}
       aria-hidden
@@ -311,7 +313,7 @@ function GanttTaskName({
 }) {
   const ink = useReadableTextOn(selected ? "$accentBackground" : undefined);
   return (
-    <Text {...body} fontSize="$2" numberOfLines={1} color={selected && ink ? ink : "$color"}>
+    <Text {...body} numberOfLines={1} color={selected && ink ? ink : "$color"}>
       {title}
     </Text>
   );
@@ -445,9 +447,7 @@ export function GanttView({
   const rangeLabel = useMemo(() => formatRangeLabel(range), [range]);
   const months = useMemo(() => monthBands(range, pxPerDay), [range, pxPerDay]);
   const weekends = useMemo(() => weekendColumns(range, pxPerDay), [range, pxPerDay]);
-  const todayColX = showToday
-    ? dateToX(startOfDay(new Date()), range.start, pxPerDay)
-    : null;
+  const todayColX = showToday ? dateToX(startOfDay(new Date()), range.start, pxPerDay) : null;
 
   const changeZoom = useCallback(
     (next: GanttZoom) => {
@@ -932,7 +932,7 @@ export function GanttView({
             top={barInset}
             height={barHeight}
             {...knobProps.borderRadius}
-            borderWidth={1}
+            borderWidth={knobProps.inputSurface.borderWidth}
             borderColor="$accentColor"
             backgroundColor="$accentBackground"
             opacity={0.25}
@@ -963,9 +963,7 @@ export function GanttView({
           tabIndex={0}
           aria-label={ganttTaskAccessibleLabel(task)}
           // LC-71: one ring on the bar (the perceived control), keyboard-only.
-          {...(isBarFocused && barKeyboardRing
-            ? keyboardFocusRingProps
-            : { outlineWidth: 0 })}
+          {...(isBarFocused && barKeyboardRing ? keyboardFocusRingProps : { outlineWidth: 0 })}
           onFocus={() => {
             setFocusedBarId(task.id);
             setBarKeyboardRing(wasKeyboardFocus());
@@ -1031,14 +1029,14 @@ export function GanttView({
               {...(rtl ? { right: 0 } : { left: 0 })}
               backgroundColor="$background"
               {...knobProps.borderRadius}
-              borderWidth={1}
+              borderWidth={knobProps.inputSurface.borderWidth}
               borderColor="$borderColor"
-              paddingHorizontal="$2"
+              paddingHorizontal={knobProps.control.paddingHorizontal}
               pointerEvents="none"
               zIndex={4}
               {...{ "data-gantt-drag-label": "true" }}
             >
-              <Text fontSize="$1" color="$color" numberOfLines={1}>
+              <Text {...knobProps.label} color="$color" numberOfLines={1}>
                 {formatSpanLabel(previewSpan)}
               </Text>
             </XStack>
@@ -1124,7 +1122,11 @@ export function GanttView({
         elevation={knobProps.elevation}
         // LC-72 CONTAINER-CLIP: the frame rounds and clips; rows stay square.
         {...knobProps.containerRadius}
-        {...{ "data-gantt-view": zoom }}
+        {...{
+          "data-gantt-view": zoom,
+          "data-size": knobProps.size,
+          "data-density": knobProps.density,
+        }}
       >
         {/* Header */}
         {(showNavigation || showZoomSwitcher) && (
@@ -1176,16 +1178,12 @@ export function GanttView({
             flexShrink={0}
             height={axisHeight}
             alignItems="center"
-            paddingHorizontal="$3"
+            paddingHorizontal={knobProps.panelPadding.padding}
             {...hairlineEnd}
             borderColor="$borderColor"
             {...{ backgroundColor: componentColors.surface.background }}
           >
-            <Text
-              {...knobProps.label}
-              color={componentColors.text.muted}
-              numberOfLines={1}
-            >
+            <Text {...knobProps.label} color={componentColors.text.muted} numberOfLines={1}>
               {t("Task")}
             </Text>
           </XStack>
@@ -1240,7 +1238,6 @@ export function GanttView({
                     top={2}
                     width={Math.max(0, band.width - 8)}
                     {...knobProps.label}
-                    fontWeight="600"
                     color={componentColors.text.secondary}
                     numberOfLines={1}
                   >
@@ -1255,9 +1252,7 @@ export function GanttView({
                   {...(rtl ? { right: tick.x + 4 } : { left: tick.x + 4 })}
                   top={axisHeight / 2}
                   {...knobProps.label}
-                  color={
-                    tick.major ? componentColors.text.secondary : componentColors.text.muted
-                  }
+                  color={tick.major ? componentColors.text.secondary : componentColors.text.muted}
                   numberOfLines={1}
                 >
                   {formatDayOfMonth(tick.date)}
@@ -1292,7 +1287,7 @@ export function GanttView({
                     key={task.id}
                     height={rowHeight}
                     alignItems="center"
-                    paddingHorizontal="$3"
+                    paddingHorizontal={knobProps.panelPadding.padding}
                     {...(last ? null : hairline.bottom)}
                     borderColor={minorGridColor}
                     backgroundColor={

package/src/views/ImageGrid.spec.tsx

@@ -0,0 +1,37 @@
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { readFileSync } from "node:fs";
+import { dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
+import { describe, expect, it } from "vitest";
+import { ImageGrid } from "./ImageGrid";
+
+const here = dirname(fileURLToPath(import.meta.url));
+
+describe("ImageGrid live-media tile (R11 / media-19)", () => {
+  it("does not paint a status pip; tile radius stays UNCLAMPED", () => {
+    const src = readFileSync(join(here, "ImageGrid.tsx"), "utf8");
+    expect(src).not.toMatch(
+      /capContainerRadius\(|knobProps\.containerRadius|knobProps\.cardSurface/,
+    );
+    expect(src).toContain("knobProps.borderRadius");
+    expect(src).not.toMatch(/data-status-pip|StatusPip|statusPip/);
+
+    renderWithProviders(
+      <ImageGrid
+        items={[
+          { id: "1", title: "Photo A" },
+          { id: "2", title: "Photo B" },
+        ]}
+        columns={2}
+        renderItem={(item) => <div>{item.title}</div>}
+        height={400}
+      />,
+    );
+    const cells = document.querySelectorAll('[role="gridcell"]');
+    expect(cells.length).toBe(2);
+    for (const cell of cells) {
+      expect(cell.querySelector("[data-status-pip]")).toBeNull();
+      expect(cell.getAttribute("data-media-tile")).toBe("image-grid");
+    }
+  });
+});

package/src/views/ImageGrid.stories.tsx

@@ -1,7 +1,8 @@
 import { action } from "@multiplatform.one/storybook";
 import { resolveChartPalette } from "@multiplatform.one/theme";
 import type { Meta } from "@storybook/react-native-web-vite";
-import { Image, Text, YStack } from "tamagui";
+import { Text, YStack } from "tamagui";
+import { Image } from "../images/Image";
 import { ImageGrid } from "./ImageGrid";
 
 interface ImageItem {
@@ -59,16 +60,31 @@ const meta: Meta = {
   title: "Components/ImageGrid",
   parameters: {
     status: { type: "stable" },
+    docs: {
+      description: {
+        component:
+          "Live-media tiles: unclamped `borderRadius` (media-19, not CONTAINER-CAP). No status pip on the photograph (R11 / DL-1). Nested hue is opt-in — ImageGrid does not wrap Tint (R12).",
+      },
+    },
   },
 };
 
 export default meta;
 
 function PhotoPlate({ item }: { item: ImageItem }) {
-  // No tile-owned radius (G-15 story honesty): ImageGrid's card frame
-  // clips items at the knob radius — a pinned $3 held a 7px arc at
-  // borderRadius:none (UX-P06 "ImageGrid tiles br=7").
-  return <Image src={item.src} alt={item.alt} width="100%" aspectRatio={1} objectFit="cover" />;
+  // Catalog Image (LC-56). No tile-owned radius (G-15 story honesty):
+  // ImageGrid's card frame clips items at the knob radius — a pinned $3
+  // held a 7px arc at borderRadius:none (UX-P06 "ImageGrid tiles br=7").
+  return (
+    <Image
+      src={item.src}
+      alt={item.alt}
+      width="100%"
+      aspectRatio={1}
+      objectFit="cover"
+      borderRadius={0}
+    />
+  );
 }
 
 export const Default = {

package/src/views/ImageGrid.tsx

@@ -149,6 +149,8 @@ function ImageGridSkeleton({
  * LC-71 ring rides this node (inset — overflow clips children to radius),
  * never the padded cell and never the grid. Hover veil is pointer-only;
  * keyboard focus is ring-only (no fill wash over the image).
+ * R11: no status pip on the media; radius UNCLAMPED (not CONTAINER-CAP).
+ * R12: this module does not wrap Tint — nested hue is opt-in at the caller.
  */
 function ImageGridTile({
   id,
@@ -159,8 +161,7 @@ function ImageGridTile({
   columns,
   colIndex,
   rowIndex,
-  radius,
-  radiusClassName,
+  radiusFragment,
   onPress,
   children,
 }: {
@@ -172,11 +173,11 @@ function ImageGridTile({
   columns: number;
   colIndex: number;
   rowIndex: number;
-  radius: string | number;
-  radiusClassName?: string;
+  radiusFragment: { borderRadius?: string | number; className?: string };
   onPress?: () => void;
   children: React.ReactNode;
 }) {
+  const radius = radiusFragment.borderRadius;
   const [hovered, setHovered] = useState(false);
   return (
     <View width={`${100 / columns}%` as any} padding={cellPadding} role="presentation">
@@ -189,9 +190,10 @@ function ImageGridTile({
         aria-rowindex={rowIndex}
         aria-selected={isFocused}
         data-focused={isFocused || undefined}
+        data-media-tile="image-grid"
         position="relative"
-        borderRadius={radius}
-        {...(radiusClassName ? { className: radiusClassName } : {})}
+        {...radiusFragment}
+        borderWidth={0}
         cursor={clickable ? "pointer" : undefined}
         {...(showRing ? keyboardFocusRingProps : { outlineWidth: 0 })}
         // Tamagui forwards onHoverIn/onHoverOut at runtime; the RN-flavored
@@ -264,7 +266,7 @@ export function ImageGrid<T>({
 }: ImageGridProps<T>) {
   const { t } = useTranslation();
   const emptyMessage = emptyMessageProp ?? t("No items found");
-  const { knobProps } = useResolvedKnobs();
+  const { knobProps } = useResolvedKnobs({ component: "ImageGrid" });
   const isRTL = useDirection() === "rtl";
   // Flex `gap` on a single-child cell wrapper is a no-op, so gutters come
   // from half-gutter padding on every cell (works on web and native — no
@@ -399,8 +401,10 @@ export function ImageGrid<T>({
   const effectiveFocused = focusedIndex >= items.length ? -1 : focusedIndex;
   const showKeyboardRing = effectiveFocused >= 0 && wasKeyboardFocus();
   const rowCount = Math.ceil(items.length / columns);
-  const radius = knobProps.borderRadius.borderRadius;
-  const radiusClassName = knobProps.borderRadius.className;
+  // media-19 UNCLAMPED: spread the scale radius fragment, never
+  // `containerRadius` / `cardSurface` (R11). Tile has no padding for
+  // CONTAINER-CAP to bite on.
+  const radiusFragment = knobProps.borderRadius;
 
   const gridBody =
     items.length === 0 ? null : (
@@ -453,8 +457,7 @@ export function ImageGrid<T>({
                       columns={columns}
                       colIndex={col + 1}
                       rowIndex={row + 1}
-                      radius={radius}
-                      radiusClassName={radiusClassName}
+                      radiusFragment={radiusFragment}
                       onPress={
                         onItemClick
                           ? () => {

package/src/views/Kanban.native.tsx

@@ -1,4 +1,5 @@
 import { FlashList, type FlashListRef } from "@shopify/flash-list";
+import { Spinner } from "@multiplatform.one/forms";
 import {
   animationConfig,
   hairlineWidth,
@@ -6,8 +7,6 @@ import {
   radiusClassProps,
   useResolvedKnobs,
 } from "@multiplatform.one/theme";
-import { componentColors } from "../componentColors";
-import { EmptyState } from "../layouts/page";
 import React, {
   useCallback,
   useEffect,
@@ -17,20 +16,13 @@ import React, {
   useState,
   type ReactNode,
 } from "react";
-import { useTranslation } from "../shared/i18n";
 import { AccessibilityInfo, Animated } from "react-native";
-import {
-  Card,
-  ListItem,
-  ScrollView,
-  Spinner,
-  Text,
-  View,
-  XStack,
-  YStack,
-  type YStackProps,
-} from "tamagui";
+import { ListItem, ScrollView, Text, View, XStack, YStack, type YStackProps } from "tamagui";
+import { componentColors } from "../componentColors";
 import { AsyncBoundary, useAsyncCount } from "../layouts/AsyncBoundary";
+import { EmptyState } from "../layouts/page";
+import { Card } from "../surfaces";
+import { useTranslation } from "../shared/i18n";
 import {
   autoScrollVelocity,
   describeCancel,
@@ -756,16 +748,7 @@ export function Kanban<T>({
             }}
           >
             <View padding="$1">
-              <Card
-                size={knobProps.sizeToken}
-                padding={0}
-                {...knobProps.borderRadius}
-                borderWidth={knobProps.inputSurface.borderWidth}
-                borderColor="$borderColor"
-                backgroundColor="$color1"
-                overflow="hidden"
-                {...LIFT_SHADOW}
-              >
+              <Card overflow="hidden" {...LIFT_SHADOW}>
                 {renderCard(drag.item)}
               </Card>
             </View>
@@ -855,19 +838,10 @@ function KanbanColumnView<T>({
       overflow="hidden"
       transition={knobProps.transition}
       {...knobProps.borderRadius}
-      backgroundColor={
-        isDropTarget
-          ? componentColors.interactive.background
-          : componentColors.surface.background
-      }
-      borderWidth={knobProps.inputSurface.borderWidth}
-      borderColor={
-        isDropTarget ? componentColors.interactive.border : componentColors.surface.border
-      }
+      {...knobProps.panelPadding}
+      backgroundColor={isDropTarget ? componentColors.interactive.background : "transparent"}
+      data-kanban-column={column.id}
     >
-      {column.color ? (
-        <View height={3} width="100%" backgroundColor={column.color as any} />
-      ) : null}
       <ListItem
         title={column.title}
         icon={
@@ -878,12 +852,13 @@ function KanbanColumnView<T>({
               height={8}
               borderRadius={4}
               backgroundColor={column.color as any}
+              data-kanban-column-dot
             />
           ) : undefined
         }
         iconAfter={
           itemCount !== undefined || renderColumnActions ? (
-            <XStack alignItems="center" gap="$1">
+            <XStack alignItems="center" {...knobProps.gap}>
               {itemCount !== undefined && (
                 <Text
                   color={componentColors.text.muted}
@@ -969,18 +944,21 @@ function KanbanColumnView<T>({
                 >
                   <Card
                     id={`${kanbanId}-col-${columnIndex}-card-${index}`}
-                    size={knobProps.sizeToken}
-                    padding={0}
-                    {...knobProps.borderRadius}
                     elevation={knobProps.elevation}
                     minHeight={MIN_PRESS_TARGET}
-                    borderWidth={knobProps.inputSurface.borderWidth}
-                    borderColor={ghost ? componentColors.interactive.border : "$borderColor"}
-                    borderStyle={ghost ? ("dashed" as any) : undefined}
-                    backgroundColor="$color1"
+                    {...(ghost
+                      ? {
+                          borderWidth: hairlineWidth,
+                          borderColor: componentColors.interactive.border,
+                          borderStyle: "dashed" as any,
+                        }
+                      : undefined)}
                     hoverStyle={{ backgroundColor: componentColors.interactive.background }}
                     pressStyle={{ scale: 0.98 }}
                     overflow="hidden"
+                    data-kanban-card={String(
+                      getItemKey ? getItemKey(item, index) : `${column.id}-${index}`,
+                    )}
                     onPress={
                       getCardDragProps
                         ? undefined // responders own the tap; handled on release
@@ -994,7 +972,7 @@ function KanbanColumnView<T>({
             }}
             ListFooterComponent={
               isLoading ? (
-                <YStack padding="$2" alignItems="center">
+                <YStack {...knobProps.panelPadding} alignItems="center">
                   <Spinner size="small" />
                 </YStack>
               ) : null

package/src/views/Kanban.spec.tsx

@@ -0,0 +1,113 @@
+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, vi } from "vitest";
+import * as KanbanModule from "./Kanban";
+import { Kanban, type KanbanColumn } from "./Kanban";
+
+vi.mock("@tanstack/react-virtual", () => ({
+  useVirtualizer: (opts: { count: number; estimateSize: () => number }) => {
+    const size = opts.estimateSize();
+    const items = Array.from({ length: opts.count }, (_, i) => ({
+      index: i,
+      key: String(i),
+      start: i * size,
+      end: (i + 1) * size,
+      size,
+    }));
+    return {
+      getVirtualItems: () => items,
+      getTotalSize: () => opts.count * size,
+      measureElement: () => {},
+      isScrolling: false,
+      scrollToIndex: () => {},
+    };
+  },
+}));
+
+afterEach(cleanup);
+
+const columns: KanbanColumn<{ id: string; title: string }>[] = [
+  {
+    id: "todo",
+    title: "To Do",
+    color: "$blue9",
+    items: [{ id: "1", title: "Task 1" }],
+  },
+  {
+    id: "done",
+    title: "Done",
+    items: [{ id: "2", title: "Task 2" }],
+  },
+];
+
+function radiusClassOn(el: Element | null): string | undefined {
+  let node = el as HTMLElement | null;
+  for (let i = 0; i < 16 && node; i++) {
+    const found = String(node.className || "")
+      .split(" ")
+      .find((c) => c.startsWith("_btlr-"));
+    if (found) return found;
+    node = node.parentElement;
+  }
+  return undefined;
+}
+
+describe("Kanban exports", () => {
+  it("exposes only named exports", () => {
+    expect(KanbanModule).toHaveProperty("Kanban");
+    expect(KanbanModule).not.toHaveProperty("default");
+  });
+});
+
+describe("Kanban design law (SB-M-302 / LC-60)", () => {
+  it("declares the column status dot as R-PILL and paints it only when color is set", () => {
+    const { container } = renderWithProviders(
+      <Kanban columns={columns} renderCard={(item) => <span>{item.title}</span>} />,
+    );
+
+    const dots = container.querySelectorAll('[data-radius-part="Kanban column dot"]');
+    expect(dots).toHaveLength(1);
+    expect(dots[0]?.getAttribute("data-radius-class")).toBe("R-PILL");
+    expect(container.querySelectorAll("[data-kanban-column-stripe]")).toHaveLength(0);
+  });
+
+  it("lets the radius knob reshape cards and column frames", () => {
+    const { rerender } = renderWithProviders(
+      <Preset overrides={{ borderRadius: "full" }}>
+        <Kanban columns={columns} renderCard={(item) => <span>{item.title}</span>} />
+      </Preset>,
+    );
+    const fullCard = radiusClassOn(screen.getByText("Task 1"));
+    const fullColumn = radiusClassOn(
+      document.querySelector("[data-kanban-column='todo']") as HTMLElement,
+    );
+
+    rerender(
+      <Preset overrides={{ borderRadius: "none" }}>
+        <Kanban columns={columns} renderCard={(item) => <span>{item.title}</span>} />
+      </Preset>,
+    );
+    const noneCard = radiusClassOn(screen.getByText("Task 1"));
+    const noneColumn = radiusClassOn(
+      document.querySelector("[data-kanban-column='todo']") as HTMLElement,
+    );
+
+    expect(fullCard).toBeDefined();
+    expect(noneCard).toBeDefined();
+    expect(fullCard).not.toBe(noneCard);
+    expect(fullColumn).toBeDefined();
+    expect(noneColumn).toBeDefined();
+    expect(fullColumn).not.toBe(noneColumn);
+  });
+
+  it("does not paint raw input-surface borders on the column frame", () => {
+    renderWithProviders(
+      <Kanban columns={columns} renderCard={(item) => <span>{item.title}</span>} />,
+    );
+    const column = document.querySelector("[data-kanban-column='todo']") as HTMLElement;
+    expect(column).toBeTruthy();
+    const className = String(column.className || "");
+    expect(className).not.toMatch(/_bw-/);
+  });
+});

package/src/views/Kanban.stories.tsx

@@ -39,7 +39,7 @@ const columns: KanbanColumn<Task>[] = [
 
 function TaskCard({ item }: { item: Task }) {
   return (
-    <YStack padding="$2" gap="$1">
+    <YStack gap="$1">
       <Text fontSize="$3">{item.title}</Text>
       <Text fontSize="$2" color="$color11" textTransform="capitalize">
         {item.priority}