aplance-ui 1.5.1 → 1.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "aplance-ui",
-  "version": "1.5.1",
+  "version": "1.6.0",
   "description": "The aplance-ui CLI - scaffold the design system and copy components into your project as source.",
   "keywords": [
     "react",
@@ -50,14 +50,20 @@
     "lint": "eslint src",
     "prepublishOnly": "npm run build && npm run typecheck && npm run lint"
   },
+  "engines": {
+    "node": ">=20.12.0"
+  },
   "dependencies": {
-    "@clack/prompts": "^0.8.2",
-    "commander": "^12.1.0",
+    "@clack/prompts": "^1.9.0",
+    "commander": "^14.0.3",
     "picocolors": "^1.1.1"
   },
   "devDependencies": {
-    "@types/node": "^24.10.1",
-    "tsup": "^8.3.5",
-    "typescript": "~5.9.3"
+    "@eslint/js": "^10.0.1",
+    "@types/node": "^24.12.2",
+    "eslint": "^10.15.0",
+    "tsup": "^9.0.0",
+    "typescript": "~5.9.3",
+    "typescript-eslint": "^8.72.2"
   }
 }

package/registry/components/primitives/modal/modal.module.css

@@ -120,9 +120,13 @@
   flex-direction: column;
   max-height: calc(100dvh - 2 * var(--spacing-6));
 
-  /* Edge placements fill the viewport - inside-scroll should reach the edges */
+  /* A sheet stops short of the far edge, so the page behind it still shows
+     and a tap there closes it: --modal-sheet-max-height, 80dvh by default.
+     Drawers and full placements fill the viewport. */
   &[data-placement='bottom'],
-  &[data-placement='top'],
+  &[data-placement='top'] {
+    max-height: var(--modal-sheet-max-height, 80dvh);
+  }
   &[data-placement='left'],
   &[data-placement='right'],
   &[data-placement='full'] {
@@ -390,7 +394,9 @@
     max-height: calc(100dvh - 2 * var(--spacing-6));
   }
   .scroll_inside[data-mobile-placement='bottom'],
-  .scroll_inside[data-mobile-placement='top'],
+  .scroll_inside[data-mobile-placement='top'] {
+    max-height: var(--modal-sheet-max-height, 80dvh);
+  }
   .scroll_inside[data-mobile-placement='left'],
   .scroll_inside[data-mobile-placement='right'],
   .scroll_inside[data-mobile-placement='full'] {

package/registry/components/primitives/popover/popover-context.ts

@@ -17,6 +17,8 @@ export type PopoverContextType = {
   availableWidth?: number;
   availableHeight?: number;
   autoPosition: boolean;
+  /** Above the trigger's layer (e.g. a modal), or null for the popover token. */
+  menuZIndex: number | null;
   hoverTimeoutRef: RefObject<ReturnType<typeof setTimeout> | null>;
   renderOnPortal: boolean;
   mounted: boolean;

package/registry/components/primitives/popover/popover.tsx

@@ -41,6 +41,37 @@ const useIsomorphicLayoutEffect =
 const isVerticalPosition = (position: Position): boolean =>
   position === "top" || position === "bottom";
 
+/**
+ * The z-index a portaled menu needs to show above the layer its trigger lives
+ * in: a modal's overlay, a sheet, an app's own fixed panel. The menu portals
+ * to <body>, where it competes with the trigger's outermost positioned
+ * ancestor that has a z-index. When that layer sits at or above
+ * `--z-index-popover`, the menu goes one level above it; null keeps the token
+ * (a trigger on the page itself, or under a lower layer like a sticky header).
+ */
+const zIndexAboveLayer = (trigger: HTMLElement): number | null => {
+  let layer: number | null = null;
+  for (
+    let node: HTMLElement | null = trigger;
+    node && node !== document.body;
+    node = node.parentElement
+  ) {
+    const style = getComputedStyle(node);
+    const zIndex = Number.parseInt(style.zIndex, 10);
+    if (style.position !== "static" && Number.isFinite(zIndex)) layer = zIndex;
+  }
+  if (layer === null) return null;
+  const popoverLevel = Number.parseInt(
+    getComputedStyle(document.documentElement).getPropertyValue(
+      "--z-index-popover",
+    ),
+    10,
+  );
+  return Number.isFinite(popoverLevel) && layer < popoverLevel
+    ? null
+    : layer + 1;
+};
+
 const clamp = (value: number, min: number, max: number): number =>
   Math.min(Math.max(value, min), Math.max(min, max));
 
@@ -120,6 +151,7 @@ export const Popover: FC<PopoverProps> = ({
     width?: number;
     height?: number;
   }>({});
+  const [menuZIndex, setMenuZIndex] = useState<number | null>(null);
 
   // Calculate Menu Position
   const calculatePosition = useCallback(() => {
@@ -224,8 +256,19 @@ export const Popover: FC<PopoverProps> = ({
       width: availableWidth,
       height: availableHeight,
     });
+    // An in-place menu already sits inside its trigger's layer.
+    setMenuZIndex(
+      renderOnPortal ? zIndexAboveLayer(popoverRef.current) : null,
+    );
     setIsMeasured(true);
-  }, [position, align, offset, shouldAutoPosition, collisionPadding]);
+  }, [
+    position,
+    align,
+    offset,
+    shouldAutoPosition,
+    collisionPadding,
+    renderOnPortal,
+  ]);
 
   // Open / Close Handling
   // Visibility (opacity / pointer-events) is derived from `isOpen && isMeasured`
@@ -352,6 +395,7 @@ export const Popover: FC<PopoverProps> = ({
         availableWidth: availableSize.width,
         availableHeight: availableSize.height,
         autoPosition: shouldAutoPosition,
+        menuZIndex,
         mounted,
       }}
     >
@@ -484,6 +528,7 @@ export const PopoverMenu: FC<PopoverMenuProps> = ({
     availableWidth,
     availableHeight,
     autoPosition,
+    menuZIndex,
   } = usePopover();
 
   const handleMouseEnter = () => {
@@ -544,7 +589,7 @@ export const PopoverMenu: FC<PopoverMenuProps> = ({
     position: "fixed",
     top: coords.top,
     left: coords.left,
-    zIndex: "var(--z-index-popover)",
+    zIndex: menuZIndex ?? "var(--z-index-popover)",
     ...(constrainedMaxWidth !== undefined && { maxWidth: constrainedMaxWidth }),
     ...(autoPosition &&
       availableHeight !== undefined && { maxHeight: availableHeight }),

package/registry/components/ui/chart/chart.tsx

@@ -6,7 +6,6 @@ import {
   Bar,
   BarChart as RechartsBarChart,
   CartesianGrid,
-  Cell,
   ComposedChart as RechartsComposedChart,
   Line,
   LineChart as RechartsLineChart,
@@ -15,14 +14,19 @@ import {
   PolarAngleAxis,
   RadialBar,
   RadialBarChart as RechartsRadialBarChart,
+  Rectangle,
   ReferenceLine,
   ResponsiveContainer,
   Scatter as RechartsScatter,
   ScatterChart as RechartsScatterChart,
+  Sector,
   Tooltip,
   XAxis,
   YAxis,
   ZAxis,
+  type BarShapeProps,
+  type PieSectorShapeProps,
+  type RadialBarSectorProps,
 } from "recharts";
 import type { ReactNode } from "react";
 import s from "./chart.module.css";
@@ -428,6 +432,27 @@ function ChartTooltip({
   );
 }
 
+// ─── Per-item colours ─────────────────────────────────────────────────────────
+// Recharts 3 deprecates <Cell> (removed in 4.0): each bar or sector takes its
+// own colour through `shape`, from the `__color` stamped on its datum here.
+
+const itemColor = (payload: unknown, fallback: string | undefined) => {
+  const color = (payload as { __color?: unknown } | null | undefined)?.__color;
+  return typeof color === "string" ? color : fallback;
+};
+
+const renderColoredBar = (props: BarShapeProps) => (
+  <Rectangle {...props} fill={itemColor(props.payload, props.fill)} />
+);
+
+const renderColoredSector = (props: PieSectorShapeProps) => (
+  <Sector {...props} fill={itemColor(props.payload, props.fill)} />
+);
+
+const renderColoredRadialBar = (props: RadialBarSectorProps) => (
+  <Sector {...props} fill={itemColor(props.payload, props.fill)} />
+);
+
 // ─── Shared legend ────────────────────────────────────────────────────────────
 
 function ChartLegend({ items }: { items: LegendItem[] }) {
@@ -444,8 +469,8 @@ function ChartLegend({ items }: { items: LegendItem[] }) {
 }
 
 // ─── Cartesian frame ──────────────────────────────────────────────────────────
-// Returns an array so Recharts' React.Children.toArray scan finds XAxis/YAxis
-// directly - Fragments are opaque to that scan, arrays are not.
+// Grid, axes, tooltip and reference lines shared by every cartesian chart,
+// returned as a keyed array of chart children.
 
 const renderCartesianFrame = ({
   categoryKey,
@@ -465,6 +490,18 @@ const renderCartesianFrame = ({
   orientation?: "vertical" | "horizontal";
 }): ReactNode[] => {
   const isHorizontal = orientation === "horizontal";
+  const showLeftYAxis = options.showYAxis && axisConfig.showLeftAxis;
+  const showRightYAxis =
+    options.showYAxis && axisConfig.showRightAxis && !isHorizontal;
+  // The rendered Y axis that the grid and reference lines measure against.
+  // Recharts 3 drops a grid or reference line (a vertical one included) whose
+  // yAxisId names no rendered axis, and the axes here use named ids. With the
+  // Y axis hidden, everything shares Recharts' default axis instead.
+  const frameYAxisId = showLeftYAxis
+    ? "left"
+    : showRightYAxis
+      ? "right"
+      : undefined;
 
   const items: ReactNode[] = [
     options.showGrid ? (
@@ -474,6 +511,7 @@ const renderCartesianFrame = ({
         vertical={isHorizontal}
         horizontal={!isHorizontal}
         stroke={palette.grid}
+        yAxisId={frameYAxisId}
       />
     ) : null,
 
@@ -505,7 +543,7 @@ const renderCartesianFrame = ({
     ) : null,
 
     // Left Y axis - value axis (vertical) or category axis (horizontal)
-    options.showYAxis && axisConfig.showLeftAxis ? (
+    showLeftYAxis ? (
       isHorizontal ? (
         <YAxis
           key="y-axis-left"
@@ -535,7 +573,7 @@ const renderCartesianFrame = ({
     ) : null,
 
     // Right Y axis - only for vertical orientation with dual-axis series
-    options.showYAxis && axisConfig.showRightAxis && !isHorizontal ? (
+    showRightYAxis ? (
       <YAxis
         key="y-axis-right"
         yAxisId="right"
@@ -569,12 +607,8 @@ const renderCartesianFrame = ({
     items.push(
       <ReferenceLine
         key={`rl-${i}`}
-        {...(rl.axis === "x"
-          ? { x: rl.value }
-          : {
-              y: rl.value,
-              yAxisId: options.showYAxis ? (rl.yAxisId ?? "left") : undefined,
-            })}
+        {...(rl.axis === "x" ? { x: rl.value } : { y: rl.value })}
+        yAxisId={options.showYAxis ? (rl.yAxisId ?? frameYAxisId) : undefined}
         stroke={resolveColorToken(rl.color, palette.muted)}
         strokeDasharray={rl.strokeDasharray ?? "4 4"}
         strokeWidth={1}
@@ -689,15 +723,8 @@ function BarChartRenderer({
               fill={item.color}
               stackId={item.stackId}
               yAxisId={options.showYAxis ? item.yAxisId : undefined}
-            >
-              {usesCategoryColorMap &&
-                chartData.map((entry, index) => {
-                  const key = toLookupKey(entry[categoryKey]);
-                  const fill =
-                    typeof entry.__color === "string" ? entry.__color : item.color;
-                  return <Cell key={`${item.key}-${key}-${index}`} fill={fill} />;
-                })}
-            </Bar>
+              shape={usesCategoryColorMap ? renderColoredBar : undefined}
+            />
           ))}
         </RechartsBarChart>
       </ResponsiveContainer>
@@ -1093,11 +1120,8 @@ function DonutChartRenderer({
               nameKey={nameKey}
               stroke="var(--color-background)"
               strokeWidth={2}
-            >
-              {legendItems.map((item, index) => (
-                <Cell key={`${item.key}-${index}`} fill={item.color} />
-              ))}
-            </Pie>
+              shape={renderColoredSector}
+            />
             <Tooltip
               content={
                 <ChartTooltip
@@ -1183,11 +1207,8 @@ function RadialBarChartRenderer({
               dataKey="__value"
               cornerRadius={6}
               background={{ fill: palette.grid }}
-            >
-              {chartData.map((item, index) => (
-                <Cell key={index} fill={item.__color} />
-              ))}
-            </RadialBar>
+              shape={renderColoredRadialBar}
+            />
             <Tooltip
               content={
                 <ChartTooltip

package/registry/components/ui/chart/types.ts

@@ -23,7 +23,11 @@ export type ReferenceLineConfig = {
   /** CSS token (e.g. "--color-chart-secondary") or raw CSS color. */
   color?: string;
   strokeDasharray?: string;
-  /** Which Y axis to attach to when axis is "y". Default: "left". */
+  /**
+   * Which Y axis the line measures against: a "y" line sits on its scale, an
+   * "x" line spans its height. Default: the left axis, or the right one when
+   * only right-axis series are shown.
+   */
   yAxisId?: "left" | "right";
 };
 

package/registry/components/ui/data-table/checkbox-column.tsx

@@ -1,10 +1,12 @@
-import type { ColumnDef } from "@tanstack/react-table";
 import { Input } from "../input-fields/input/input";
+import type { DataTableColumnDef } from "./types";
+import { SELECT_COLUMN_ID } from "./utils";
 import s from "./data-table.module.css";
 
 /**
  * Pre-built select-all / per-row checkbox column using `<Input type="checkbox">`.
- * Handles indeterminate state on the header checkbox.
+ * Handles indeterminate state on the header checkbox. Shift-click a row's
+ * checkbox to select (or clear) every row between it and the last one clicked.
  *
  * @example
  * const cols = useMemo(
@@ -14,9 +16,9 @@ import s from "./data-table.module.css";
  */
 export function checkboxColumn<TData extends { id: string }>(
   editingRowId?: string | null,
-): ColumnDef<TData> {
+): DataTableColumnDef<TData, unknown> {
   return {
-    id: "select",
+    id: SELECT_COLUMN_ID,
     // Compact fixed width keeps checkbox cells visually balanced while
     // reserving enough room for focus ring rendering.
     size: 42,
@@ -30,19 +32,21 @@ export function checkboxColumn<TData extends { id: string }>(
       align: "center",
       truncate: false,
     },
+    // The header box selects the rows on screen: the current page.
     header: ({ table }) => (
       <Input
         type="checkbox"
-        checked={table.getIsAllRowsSelected()}
+        checked={table.getIsAllPageRowsSelected()}
         className={s.selection_checkbox}
         disabled={editingRowId != null}
         ref={(el: HTMLInputElement | null) => {
           if (el)
             el.indeterminate =
-              table.getIsSomeRowsSelected() && !table.getIsAllRowsSelected();
+              table.getIsSomePageRowsSelected() &&
+              !table.getIsAllPageRowsSelected();
         }}
-        onChange={table.getToggleAllRowsSelectedHandler()}
-        aria-label="Select all rows"
+        onChange={table.getToggleAllPageRowsSelectedHandler()}
+        aria-label="Select all rows on this page"
       />
     ),
     cell: ({ row }) => (

package/registry/components/ui/data-table/data-table.module.css

@@ -277,18 +277,36 @@
       overflow: visible;
     }
   }
+
+  /* Footer row (columns with a `footer`, e.g. totals): sticks to the bottom
+     of the scrolling body so it stays in view. Its top line is an inset
+     shadow, so it never doubles the last row's line. */
+  tfoot td {
+    position: sticky;
+    bottom: 0;
+    z-index: 1;
+    padding: var(--spacing-5) var(--spacing-6);
+    font-size: var(--font-size-sm);
+    font-weight: var(--font-weight-semibold);
+    color: var(--color-foreground);
+    vertical-align: middle;
+    box-shadow: inset 0 var(--border-1) 0 var(--color-border);
+    /* explicit background so the rows scrolling under it stay hidden */
+    background: var(--color-muted);
+  }
 }
 
 /* ─────────────────────────────────────────────
    Vertical column borders (showVerticalBorders prop)
-   Drawn on the LEFT of every cell except the first, so we never get a
+   Drawn on the START side of every cell except the first, so we never get a
    double border at the table's outer edge.
 ───────────────────────────────────────────── */
 .table_vertical_borders {
-  /* Only add vertical border if the previous cell is not the last left-pinned cell. Prevents double border with pinned columns. */
-  thead th:not(.col_pinned_last.col_pinned_left) + th,
-  tbody td:not(.col_pinned_last.col_pinned_left) + td {
-    border-left: var(--border-1) solid var(--color-border);
+  /* Skip the cell after the start group's divider column, which already draws that line. */
+  thead th:not(.col_pinned_last.col_pinned_start) + th,
+  tbody td:not(.col_pinned_last.col_pinned_start) + td,
+  tfoot td:not(.col_pinned_last.col_pinned_start) + td {
+    border-inline-start: var(--border-1) solid var(--color-border);
   }
 }
 
@@ -472,13 +490,14 @@
 
 /* ─────────────────────────────────────────────
    Column pinning - sticky offsets are written inline by JS
-   The hairline divider lives only on the LAST column of each pinning group
-   (`col_pinned_last`) so adjacent pinned columns don't get double dividers.
+   The hairline divider lives only on the pinned column that meets the
+   scrolling center (`col_pinned_last`: the last one counted inward from its
+   edge), so adjacent pinned columns don't get double dividers.
 ───────────────────────────────────────────── */
-.table th.col_pinned_left,
-.table th.col_pinned_right,
-.table td.col_pinned_left,
-.table td.col_pinned_right {
+.table th.col_pinned_start,
+.table th.col_pinned_end,
+.table td.col_pinned_start,
+.table td.col_pinned_end {
   position: sticky;
   z-index: 1;
 
@@ -486,19 +505,22 @@
   background-color: var(--color-muted);
 }
 
-.table thead th.col_pinned_left,
-.table thead th.col_pinned_right {
+/* Pinned header and footer cells stick on both axes: above everything else. */
+.table thead th.col_pinned_start,
+.table thead th.col_pinned_end,
+.table tfoot td.col_pinned_start,
+.table tfoot td.col_pinned_end {
   z-index: 2;
 }
 
-/* Pinned left columns: add a right border only to the last pinned cell to act as a divider. */
-.col_pinned_last.col_pinned_left {
-  border-right: var(--border-1) solid var(--color-border);
+/* Start group: the divider on its inner (end) side. */
+.col_pinned_last.col_pinned_start {
+  border-inline-end: var(--border-1) solid var(--color-border);
 }
 
-/* Pinned right columns: add a left border only to the last pinned cell to act as a divider. */
-.col_pinned_last.col_pinned_right {
-  border-left: var(--border-1) solid var(--color-border);
+/* End group: the divider on its inner (start) side. */
+.col_pinned_last.col_pinned_end {
+  border-inline-start: var(--border-1) solid var(--color-border);
 }
 
 /* Keep interactive cell popovers above sticky neighbors when they are rendered