@astryxdesign/core 0.7.4 → 0.7.5-canary.0418c47

package/dist/Table/plugins/selection/useTableSelectionState.d.ts

@@ -1,4 +1,4 @@
-import type { UseTableSelectionConfig } from './useTableSelection';
+import type { UseTableSelectionConfig } from './useTableSelection.js';
 export interface UseTableSelectionStateConfig<T extends Record<string, unknown>> {
     /**
      * The data array currently rendered in the table.

package/dist/Table/plugins/sortable/index.d.ts

@@ -1,5 +1,5 @@
-export { useTableSortable } from './useTableSortable';
-export type { UseTableSortableConfig, TableSortDirection, TableSortEntry, TableSortState, } from './useTableSortable';
-export { useTableSortableState } from './useTableSortableState';
-export type { UseTableSortableStateConfig, UseTableSortableStateResult, TableSortComparator, } from './useTableSortableState';
+export { useTableSortable } from './useTableSortable.js';
+export type { UseTableSortableConfig, TableSortDirection, TableSortEntry, TableSortState, } from './useTableSortable.js';
+export { useTableSortableState } from './useTableSortableState.js';
+export type { UseTableSortableStateConfig, UseTableSortableStateResult, TableSortComparator, } from './useTableSortableState.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/Table/plugins/sortable/useTableSortable.d.ts

@@ -1,4 +1,4 @@
-import type { TablePlugin } from '../../types';
+import type { TablePlugin } from '../../types.js';
 /**
  * Sort direction for a single column.
  */

package/dist/Table/plugins/sortable/useTableSortableState.d.ts

@@ -1,4 +1,4 @@
-import type { TableSortState, UseTableSortableConfig } from './useTableSortable';
+import type { TableSortState, UseTableSortableConfig } from './useTableSortable.js';
 /**
  * Custom comparator for a single sort key.
  * Receives two row values and returns a standard comparison number.

package/dist/Table/plugins/stickyColumns/index.d.ts

@@ -1,3 +1,3 @@
-export { useTableStickyColumns } from './useTableStickyColumns';
-export type { UseTableStickyColumnsConfig } from './useTableStickyColumns';
+export { useTableStickyColumns } from './useTableStickyColumns.js';
+export type { UseTableStickyColumnsConfig } from './useTableStickyColumns.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/Table/plugins/stickyColumns/useTableStickyColumns.d.ts

@@ -1,4 +1,4 @@
-import type { TablePlugin } from '../../types';
+import type { TablePlugin } from '../../types.js';
 /**
  * Config for {@link useTableStickyColumns}. Provide at least one of
  * `startKeys` / `endKeys` to pin columns.

package/dist/Table/plugins/stickyColumns/useTableStickyColumns.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useTableStickyColumns.d.ts","sourceRoot":"","sources":["../../../../src/Table/plugins/stickyColumns/useTableStickyColumns.tsx"],"names":[],"mappings":"AAkBA,OAAO,KAAK,EAEV,WAAW,EAIZ,MAAM,aAAa,CAAC;AAOrB;;;;;;;;;GASG;AACH,MAAM,WAAW,2BAA2B;IAC1C;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,EAAE,CAAC;IACrB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;CACpB;AAsND,wBAAgB,qBAAqB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EACrE,MAAM,EAAE,2BAA2B,GAClC,WAAW,CAAC,CAAC,CAAC,CAoKhB"}
+{"version":3,"file":"useTableStickyColumns.d.ts","sourceRoot":"","sources":["../../../../src/Table/plugins/stickyColumns/useTableStickyColumns.tsx"],"names":[],"mappings":"AA0BA,OAAO,KAAK,EAEV,WAAW,EAIZ,MAAM,aAAa,CAAC;AASrB;;;;;;;;;GASG;AACH,MAAM,WAAW,2BAA2B;IAC1C;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,EAAE,CAAC;IACrB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;CACpB;AAkXD,wBAAgB,qBAAqB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EACrE,MAAM,EAAE,2BAA2B,GAClC,WAAW,CAAC,CAAC,CAAC,CAqRhB"}

package/dist/Table/plugins/stickyColumns/useTableStickyColumns.js

@@ -12,11 +12,13 @@
  * - /packages/core/src/Table/Table.doc.mjs (sticky-columns documentation)
  * - /packages/core/src/Table/index.ts (exports)
  */
-import { useCallback, useMemo, useRef } from 'react';
+import { useCallback, useLayoutEffect, useMemo, useRef } from 'react';
 import * as stylex from '@stylexjs/stylex';
 import "../../../theme/tokens.stylex.js";
 import { colorVars, durationVars, easeVars } from "../../../theme/tokens.stylex.js";
 import { resolveColumnFloorWidths } from "../../columnUtils.js";
+import { collapsedBottom } from "../../rowDivider.js";
+import { useTheme, useThemeName } from "../../../theme/useTheme.js";
 
 // =============================================================================
 // Config
@@ -32,7 +34,7 @@ import { resolveColumnFloorWidths } from "../../columnUtils.js";
  * the config conditionally (e.g. `endKeys: enabled ? ['notes'] : undefined`)
  * without branching on whether to install the plugin at all.
  */
-
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 // =============================================================================
 // Width helpers
 // =============================================================================
@@ -131,6 +133,35 @@ function resolveStickySide(columns, columnKey, startKeys, endKeys) {
 // StyleX ancestor selectors are pseudo-class only — not scroll state.)
 const SHADOW_VAR_START = '--table-sticky-shadow-start';
 const SHADOW_VAR_END = '--table-sticky-shadow-end';
+
+// A pinned cell draws its own row divider. With collapsed borders the table
+// paints every border at its cell's static place: a sticky cell moves, its
+// border does not, so without this the line under a pinned column would be
+// whichever scrolled cell's border passes beneath it, and missing where that
+// cell has none. The cell's ::before (already the row overlay's layer) extends
+// over the cell's border area, covers whatever the table painted there with
+// the pinned base, and draws the divider in the cell's own border color and
+// style (inherited, so a theme, a token switch or an app's rule on the cell,
+// `:hover` included, carries over in CSS) at the cell's divider width
+// (TableCell.tsx). Where another border wins the collapse instead (an app's
+// border on the row, or the next row's top border), it is read after each
+// commit and on resize and carried as the cell's `carry` state
+// (syncPinnedDividers).
+const PINNED_ATTRIBUTE = 'data-astryx-table-pinned';
+/** Spread into a pinned cell's props: the attribute the divider sync finds. */
+const PINNED_PROPS = {
+  [PINNED_ATTRIBUTE]: ''
+};
+const CARRY = 'carry';
+const CARRYING = '[data-astryx-table-pinned="carry"]';
+// The cell's own border wins at another width than its divider's: only the
+// width is carried, and style and colour keep inheriting from the cell.
+const CARRY_WIDTH = 'width';
+const PINNED_DIVIDER_WIDTH = '--_table-row-divider-app-width';
+const PINNED_DIVIDER_STYLE = '--_table-row-divider-app-style';
+const PINNED_DIVIDER_COLOR = '--_table-row-divider-app-color';
+const PINNED_BASE = `var(--table-sticky-background, ${colorVars['--color-background-card']})`;
+const DIVIDER_WIDTH = `var(${PINNED_DIVIDER_WIDTH}, var(--_table-row-divider-width, 0px))`;
 const stickyStyles = {
   cell: {
     kVAEAm: "x7wzq59",
@@ -141,6 +172,16 @@ const stickyStyles = {
     kxmVGU: "xy5mcqj",
     km8f2m: "xkk1bqk",
     kLkRvE: "x1uvfo0n",
+    kgbC5f: "x3dkws7",
+    kTJRYx: "xhyqk6q",
+    kjBTDo: "xp41i57 x1806tya",
+    k1cwP5: "xp6skj9 x3mysge",
+    k3DiCg: "x1xm21za",
+    k836YN: "x1e2fbwo",
+    kuPSpR: "xgw21jv",
+    kTP8oX: "xgaypha",
+    khXQ3S: "xjnwjuh",
+    k2irxo: "x1iobno9",
     k7KCAZ: "xxcwgru",
     kKXxxB: "x1y1nw7a",
     kqUdNP: "xa5v58t",
@@ -195,6 +236,96 @@ const shadowStyles = {
   }
 };
 
+// =============================================================================
+// Pinned dividers: app overrides
+// =============================================================================
+
+/**
+ * The pinned divider draws the border the table would paint under the cell.
+ * The cell's own border at its divider width: drawn in CSS, nothing carried.
+ * The cell's own border at another width (an app's 2 px `td` border): only
+ * the width is carried; style and colour inherit, so a restyle reaches it.
+ * A row's or a row group's border: nothing drawn, since the table paints it
+ * along the whole row. The next row's cell top: carried as values. Read after each commit and on resize, never on scroll.
+ * Every read comes before any write, and a cell is written only when what it
+ * carries changes.
+ */
+function syncPinnedDividers(root, rows) {
+  const changes = [];
+  const cells = rows == null ? root.querySelectorAll(`[${PINNED_ATTRIBUTE}]`) : [...rows].flatMap(row => [...row.querySelectorAll(`:scope > [${PINNED_ATTRIBUTE}]`)]);
+  for (const cell of cells) {
+    const edge = collapsedBottom(cell);
+    const dividerWidth = parseFloat(getComputedStyle(cell).getPropertyValue('--_table-row-divider-width')) || 0;
+    const carried = cell.getAttribute(PINNED_ATTRIBUTE);
+    if (edge.isOwn && edge.width === dividerWidth) {
+      if (carried !== '') {
+        changes.push([cell, '', null]);
+      }
+      continue;
+    }
+    // The cell's own border at another width: carry the width alone, so a
+    // restyle of its colour or style reaches the pinned divider in CSS.
+    if (edge.isOwn) {
+      const width = `${edge.width}px`;
+      if (carried !== CARRY_WIDTH || cell.style.getPropertyValue(PINNED_DIVIDER_WIDTH) !== width) {
+        changes.push([cell, CARRY_WIDTH, [width]]);
+      }
+      continue;
+    }
+    // A row's border (or a row group's) is painted by the table along the
+    // whole row, under the pinned cell too, and follows a restyle in CSS
+    // alone: the pinned cell draws nothing over it. Only a cell's border is
+    // copied as values.
+    const value = edge.isRow ? ['0px', 'none', 'transparent'] : [`${edge.width}px`, edge.style, edge.color];
+    const isSame = carried === CARRY && cell.style.getPropertyValue(PINNED_DIVIDER_WIDTH) === value[0] && cell.style.getPropertyValue(PINNED_DIVIDER_STYLE) === value[1] && cell.style.getPropertyValue(PINNED_DIVIDER_COLOR) === value[2];
+    if (!isSame) {
+      changes.push([cell, CARRY, value]);
+    }
+  }
+  for (const [cell, mode, value] of changes) {
+    cell.setAttribute(PINNED_ATTRIBUTE, mode);
+    const [width, style, color] = value ?? [];
+    for (const [name, next] of [[PINNED_DIVIDER_WIDTH, width], [PINNED_DIVIDER_STYLE, style], [PINNED_DIVIDER_COLOR, color]]) {
+      if (next == null) {
+        cell.style.removeProperty(name);
+      } else {
+        cell.style.setProperty(name, next);
+      }
+    }
+  }
+}
+
+/**
+ * Rendered inside the table: when the colour mode or the theme around it
+ * changes (a Theme's, wherever that Theme sits above the table, or the
+ * operating system's mode under `system`), the colours resolve again with no
+ * commit of the hook's owner, so the pinned dividers' carried borders are
+ * read again.
+ */
+function PinnedDividerModeWatch({
+  refreshRef
+}) {
+  const {
+    mode
+  } = useTheme();
+  const themeName = useThemeName();
+  const lastRef = useRef({
+    mode,
+    themeName
+  });
+  useLayoutEffect(() => {
+    const last = lastRef.current;
+    if (last.mode !== mode || last.themeName !== themeName) {
+      lastRef.current = {
+        mode,
+        themeName
+      };
+      refreshRef.current?.();
+    }
+  }, [mode, themeName, refreshRef]);
+  return null;
+}
+
 // Stable empty default so an unset start/end doesn't allocate a fresh array
 // (and bust the memo) on every render.
 const EMPTY = [];
@@ -237,9 +368,14 @@ export function useTableStickyColumns(config) {
   // listeners (synchronizing with the DOM) rather than React state, so
   // scrolling never triggers re-renders.
   const detachRef = useRef(null);
+  // Re-reads the edge shadows and the pinned dividers; set while attached.
+  const refreshRef = useRef(null);
+  // The scroll container's merged ref, kept while the inner ref is the same.
+  const mergedScrollWrapperRef = useRef(null);
   const attachScrollShadow = useCallback(el => {
     detachRef.current?.();
     detachRef.current = null;
+    refreshRef.current = null;
     if (!el) {
       return;
     }
@@ -265,18 +401,98 @@ export function useTableStickyColumns(config) {
         el.style.setProperty(SHADOW_VAR_END, hasOverflow && pos < maxScroll - 1 ? '1' : '0');
       }
     };
+    // Whether the pinned dividers were read since this attach.
+    let hasRead = false;
+    const resize = () => {
+      update();
+      syncPinnedDividers(el);
+      hasRead = true;
+    };
+    // The observer's first callback reports the size at observe time. The
+    // hook owner's after-commit read usually came first; a table mounted
+    // from state below that owner (a tab, a disclosure) attached without it,
+    // so the dividers are read here then.
+    let hasObserved = false;
+    const onResize = () => {
+      if (hasObserved || !hasRead) {
+        hasObserved = true;
+        resize();
+        return;
+      }
+      hasObserved = true;
+      update();
+    };
     el.addEventListener('scroll', update, {
       passive: true
     });
-    const resizeObserver = typeof ResizeObserver !== 'undefined' ? new ResizeObserver(update) : null;
+    // A row border can change by CSS state alone (`tr:hover`,
+    // `:focus-within`): on pointer and focus changes, the rows they touch
+    // (and the row above each, whose divider a row's top border joins) are
+    // read again, once per frame.
+    const touched = new Set();
+    let frame = 0;
+    const onStateChange = event => {
+      for (const target of [event.target, event.relatedTarget]) {
+        const row = target instanceof Element ? target.closest('tr') : null;
+        if (row == null || !el.contains(row)) {
+          continue;
+        }
+        touched.add(row);
+        const above = row.previousElementSibling ?? row.parentElement?.previousElementSibling?.lastElementChild;
+        if (above != null) {
+          touched.add(above);
+        }
+      }
+      if (touched.size > 0 && frame === 0) {
+        frame = requestAnimationFrame(() => {
+          frame = 0;
+          syncPinnedDividers(el, new Set(touched));
+          touched.clear();
+        });
+      }
+    };
+    const stateEvents = ['pointerover', 'pointerout', 'focusin', 'focusout'];
+    for (const type of stateEvents) {
+      el.addEventListener(type, onStateChange, {
+        passive: true
+      });
+    }
+    const resizeObserver = typeof ResizeObserver !== 'undefined' ? new ResizeObserver(onResize) : null;
     resizeObserver?.observe(el);
+    // The table too: columns added or widened change what scrolls without
+    // resizing the wrapper.
+    const table = el.querySelector('table');
+    if (table != null) {
+      resizeObserver?.observe(table);
+    }
+    // The pinned dividers are read after the commit that attached this
+    // (the refresh layout effect below), not here as well.
     update();
+    refreshRef.current = resize;
     detachRef.current = () => {
       el.removeEventListener('scroll', update);
+      for (const type of stateEvents) {
+        el.removeEventListener(type, onStateChange);
+      }
+      cancelAnimationFrame(frame);
       resizeObserver?.disconnect();
     };
   }, []);
+
+  // After each commit: a border that changed with the render (a row
+  // highlighted on click) reaches the pinned divider, and the edge shadows
+  // follow content that changed without a resize.
+  useLayoutEffect(() => {
+    refreshRef.current?.();
+  });
   return useMemo(() => ({
+    transformTableContext(children) {
+      return /*#__PURE__*/_jsxs(_Fragment, {
+        children: [children, /*#__PURE__*/_jsx(PinnedDividerModeWatch, {
+          refreshRef: refreshRef
+        })]
+      });
+    },
     transformHeaderCell(props, column) {
       const {
         start: s,
@@ -309,6 +525,7 @@ export function useTableStickyColumns(config) {
         ...props,
         htmlProps: {
           ...props.htmlProps,
+          ...PINNED_PROPS,
           style: {
             ...props.htmlProps.style,
             ...offsetStyle
@@ -335,6 +552,7 @@ export function useTableStickyColumns(config) {
         ...props,
         htmlProps: {
           ...props.htmlProps,
+          ...PINNED_PROPS,
           style: {
             ...props.htmlProps.style,
             ...offsetStyle
@@ -349,9 +567,14 @@ export function useTableStickyColumns(config) {
         return props;
       }
       // Compose with any ref a prior plugin (e.g. virtualization) set on the
-      // scroll container.
-      const existingRef = props.htmlProps.ref;
-      const mergedRef = node => {
+      // scroll container. One merged ref per inner ref, so React does not
+      // re-attach it on every render while the plugins composed with this
+      // one keep theirs stable too (column resize does): the scroll
+      // listeners and the resize observer attach once, and the pinned
+      // dividers are read after each commit (the refresh effect).
+      const existingRef = props.htmlProps.ref ?? null;
+      const cached = mergedScrollWrapperRef.current;
+      const mergedRef = cached != null && cached.inner === existingRef ? cached.merged : node => {
         attachScrollShadow(node);
         if (typeof existingRef === 'function') {
           existingRef(node);
@@ -360,6 +583,10 @@ export function useTableStickyColumns(config) {
           existingRef.current = node;
         }
       };
+      mergedScrollWrapperRef.current = {
+        inner: existingRef,
+        merged: mergedRef
+      };
       return {
         ...props,
         htmlProps: {

package/dist/Table/plugins/tree/index.d.ts

@@ -1,5 +1,5 @@
-export { useTableTreeData } from './useTableTreeData';
-export type { TableTreeRowMeta, UseTableTreeDataConfig, } from './useTableTreeData';
-export { useTableTreeState } from './useTableTreeState';
-export type { UseTableTreeStateConfig, UseTableTreeStateResult, } from './useTableTreeState';
+export { useTableTreeData } from './useTableTreeData.js';
+export type { TableTreeRowMeta, UseTableTreeDataConfig, } from './useTableTreeData.js';
+export { useTableTreeState } from './useTableTreeState.js';
+export type { UseTableTreeStateConfig, UseTableTreeStateResult, } from './useTableTreeState.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/Table/plugins/tree/useTableTreeData.d.ts

@@ -1,4 +1,4 @@
-import type { TablePlugin } from '../../types';
+import type { TablePlugin } from '../../types.js';
 /** Structural position of one visible row within the tree. */
 export interface TableTreeRowMeta {
     /** The row's id (from `idKey`). */

package/dist/Table/plugins/tree/useTableTreeState.d.ts

@@ -1,4 +1,4 @@
-import type { UseTableTreeDataConfig } from './useTableTreeData';
+import type { UseTableTreeDataConfig } from './useTableTreeData.js';
 export interface UseTableTreeStateConfig<T extends Record<string, unknown>> {
     /** Nested data: rows may carry child rows under `childrenKey`. */
     data: T[];

package/dist/Table/rowDivider.d.ts

@@ -0,0 +1,34 @@
+export interface BottomEdge {
+    width: number;
+    style: string;
+    color: string;
+}
+/**
+ * The border the table paints under a cell, by the collapsing rules (CSS 2.1
+ * 17.6.2.1): of the cell's own bottom, the cell's below it (top), its row's
+ * bottom, the next row's top, and at a section edge (thead to tbody) the two
+ * row groups' borders, `hidden` wins, then the wider, then the stronger
+ * style; a tie goes to a cell over a row over a row group, and to the upper
+ * one. `isOwn` says the cell's own border won; `isRow` says a row's or a
+ * row group's won, which the table paints along the whole row.
+ */
+export declare function collapsedBottom(cell: HTMLTableCellElement): BottomEdge & {
+    isOwn: boolean;
+    isRow: boolean;
+};
+/**
+ * The divider a detail panel takes from its row: the color and style of the
+ * row's cells (a theme's `table-cell` styling or an app's own, which never
+ * reach the panel's cell), with their width where they set one, at the
+ * panel's own width otherwise, unless the row's own border wins the
+ * collapse (an app styling the `<tr>`), as custom property
+ * values for the panel's cell. Every value is written, `initial` where the
+ * panel keeps its own, so a panel nested in another never inherits that
+ * one's.
+ */
+export declare function panelDividerFor(row: Element): {
+    width: string;
+    style: string;
+    color: string;
+} | null;
+//# sourceMappingURL=rowDivider.d.ts.map

package/dist/Table/rowDivider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"rowDivider.d.ts","sourceRoot":"","sources":["../../src/Table/rowDivider.ts"],"names":[],"mappings":"AA4BA,MAAM,WAAW,UAAU;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AA6BD;;;;;;;;GAQG;AACH,wBAAgB,eAAe,CAAC,IAAI,EAAE,oBAAoB,GAAG,UAAU,GAAG;IACxE,KAAK,EAAE,OAAO,CAAC;IACf,KAAK,EAAE,OAAO,CAAC;CAChB,CAyCA;AAED;;;;;;;;;GASG;AACH,wBAAgB,eAAe,CAAC,GAAG,EAAE,OAAO,GAAG;IAC7C,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf,GAAG,IAAI,CAuBP"}

package/dist/Table/rowDivider.js

@@ -0,0 +1,118 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file rowDivider.ts
+ * @input Table cells and rows, their computed borders
+ * @output Exports `collapsedBottom` (the border the table paints under a
+ *   cell, by the collapsing rules) and `panelDividerFor` (the divider a
+ *   detail panel takes from its row)
+ * @position Table internals, shared by the sticky-columns and row-expansion
+ *   plugins: a divider drawn somewhere else than the table paints it (a
+ *   pinned cell's, a detail panel's) reads here which border the table would
+ *   paint, so a theme's or an app's border carries over.
+ *
+ * SYNC: When modified, update plugins/stickyColumns and plugins/rowExpansion.
+ */
+
+/** Border styles by collapsed-border precedence, weakest first (CSS 2.1). */
+const STYLE_RANK = ['inset', 'groove', 'outset', 'ridge', 'dotted', 'dashed', 'solid', 'double'];
+function edgeOf(element, side) {
+  if (element == null) {
+    return {
+      width: 0,
+      style: 'none',
+      color: ''
+    };
+  }
+  const style = getComputedStyle(element);
+  return {
+    width: parseFloat(style.getPropertyValue(`border-${side.toLowerCase()}-width`)) || 0,
+    style: style.getPropertyValue(`border-${side.toLowerCase()}-style`),
+    color: style.getPropertyValue(`border-${side.toLowerCase()}-color`)
+  };
+}
+
+/** The row below `row`, across a section edge (thead to tbody) too. */
+function rowBelow(row) {
+  if (row == null) {
+    return null;
+  }
+  return row.nextElementSibling ?? row.parentElement?.nextElementSibling?.firstElementChild ?? null;
+}
+
+/**
+ * The border the table paints under a cell, by the collapsing rules (CSS 2.1
+ * 17.6.2.1): of the cell's own bottom, the cell's below it (top), its row's
+ * bottom, the next row's top, and at a section edge (thead to tbody) the two
+ * row groups' borders, `hidden` wins, then the wider, then the stronger
+ * style; a tie goes to a cell over a row over a row group, and to the upper
+ * one. `isOwn` says the cell's own border won; `isRow` says a row's or a
+ * row group's won, which the table paints along the whole row.
+ */
+export function collapsedBottom(cell) {
+  const row = cell.parentElement;
+  const nextRow = rowBelow(row);
+  const nextCell = nextRow?.children[cell.cellIndex] ?? null;
+  const isSectionEdge = row != null && row.nextElementSibling == null;
+  // In tie order.
+  const candidates = [edgeOf(cell, 'Bottom'), edgeOf(nextCell, 'Top'), edgeOf(row, 'Bottom'), edgeOf(nextRow, 'Top'), edgeOf(isSectionEdge ? row?.parentElement ?? null : null, 'Bottom'), edgeOf(isSectionEdge ? nextRow?.parentElement ?? null : null, 'Top')];
+  const own = candidates[0];
+  if (candidates.some(edge => edge.style === 'hidden')) {
+    return {
+      width: 0,
+      style: 'none',
+      color: own.color,
+      isOwn: own.style === 'hidden',
+      isRow: false
+    };
+  }
+  const strength = edge => edge.style === 'none' || edge.width === 0 ? [-1, -1] : [edge.width, STYLE_RANK.indexOf(edge.style)];
+  let winner = own;
+  for (const edge of candidates.slice(1)) {
+    const [width, rank] = strength(edge);
+    const [bestWidth, bestRank] = strength(winner);
+    if (width > bestWidth || width === bestWidth && rank > bestRank) {
+      winner = edge;
+    }
+  }
+  return {
+    ...winner,
+    isOwn: winner === own,
+    isRow: candidates.indexOf(winner) >= 2
+  };
+}
+
+/**
+ * The divider a detail panel takes from its row: the color and style of the
+ * row's cells (a theme's `table-cell` styling or an app's own, which never
+ * reach the panel's cell), with their width where they set one, at the
+ * panel's own width otherwise, unless the row's own border wins the
+ * collapse (an app styling the `<tr>`), as custom property
+ * values for the panel's cell. Every value is written, `initial` where the
+ * panel keeps its own, so a panel nested in another never inherits that
+ * one's.
+ */
+export function panelDividerFor(row) {
+  const rowCell = row.lastElementChild;
+  if (rowCell == null) {
+    return null;
+  }
+  const rowStyle = getComputedStyle(row);
+  const rowWidth = parseFloat(rowStyle.borderBottomWidth) || 0;
+  if (rowStyle.borderBottomStyle !== 'none' && rowWidth > 0) {
+    return {
+      width: `${rowWidth}px`,
+      style: rowStyle.borderBottomStyle,
+      color: rowStyle.borderBottomColor
+    };
+  }
+  const cellStyle = getComputedStyle(rowCell);
+  // The row's cells hand their divider down (their own width is 0); a width
+  // an app or a theme sets on them anyway is the divider's.
+  const cellWidth = parseFloat(cellStyle.borderBottomWidth) || 0;
+  return {
+    width: cellWidth > 0 ? `${cellWidth}px` : 'initial',
+    style: cellStyle.borderBottomStyle,
+    color: cellStyle.borderBottomColor
+  };
+}

package/dist/Table/tableContextMenu.d.ts

@@ -9,8 +9,8 @@
  * - /packages/core/src/Table/types.ts (TableContextAction)
  */
 import { type ReactNode } from 'react';
-import type { StyleXStyles } from '../theme/types';
-import type { TableContextAction, TableContextActions } from './types';
+import type { StyleXStyles } from '../theme/types.js';
+import type { TableContextAction, TableContextActions } from './types.js';
 /**
  * Resolve a `contextMenuActions` value (array or getter) to a plain array.
  * Use this when composing actions from a prior plugin's render props so you

package/dist/Table/types.d.ts

@@ -10,9 +10,9 @@
  */
 import type React from 'react';
 import type { ComponentType, HTMLAttributes, Ref, TdHTMLAttributes, ThHTMLAttributes, ReactNode } from 'react';
-import type { StyleXStyles } from '../theme/types';
-import type { BaseProps } from '../BaseProps';
-import type { TableFilterFieldRef } from './plugins/filtering/useTableFiltering';
+import type { StyleXStyles } from '../theme/types.js';
+import type { BaseProps } from '../BaseProps.js';
+import type { TableFilterFieldRef } from './plugins/filtering/useTableFiltering.js';
 /**
  * A proportional (fr-like) column width.
  * Use the `proportional()` helper to create.

package/dist/Table/useBaseTablePlugins.d.ts

@@ -1,4 +1,4 @@
-import type { TablePlugin } from './types';
+import type { TablePlugin } from './types.js';
 /**
  * Converts a named plugin record (`Record<string, TablePlugin>`) to a stable
  * memoized array for `BaseTable`. Compares plugin values by identity so

package/dist/Table/useTableCellStyles.d.ts

@@ -1,5 +1,5 @@
-import type { StyleXStyles } from '../theme/types';
-import { type TableContextValue } from './TableContext';
+import type { StyleXStyles } from '../theme/types.js';
+import { type TableContextValue } from './TableContext.js';
 /**
  * Build the divider styles array for a cell based on context.
  * Shared between body cells and header cells — both apply row/column

package/dist/Table/utils.d.ts

@@ -3,6 +3,6 @@
  * @output Server-safe re-exports of pure Table utility functions
  * @position Subpath entry point: `@astryxdesign/core/Table/utils`
  */
-export { proportional, pixel, capitalize, generateColumns, resolveColumnWidths, DEFAULT_MIN_COLUMN_WIDTH, } from './columnUtils';
-export type { ColumnWidth, ProportionalWidth, PixelWidth, TableColumn, } from './types';
+export { proportional, pixel, capitalize, generateColumns, resolveColumnWidths, DEFAULT_MIN_COLUMN_WIDTH, } from './columnUtils.js';
+export type { ColumnWidth, ProportionalWidth, PixelWidth, TableColumn, } from './types.js';
 //# sourceMappingURL=utils.d.ts.map

package/dist/Text/Text.d.ts

@@ -12,9 +12,9 @@
  * - /packages/cli/assets/templates/blocks/components/Text/ (showcase blocks)
  */
 import { type ReactNode } from 'react';
-import type { TextType, TextSize, TextColor, BuiltinTextColor, TextWeight, TextDisplay, TextJustify, WordBreak, TextWrap } from '../theme/types';
-import type { LayerPlacement } from '../Layer';
-import type { BaseProps } from '../BaseProps';
+import type { TextType, TextSize, TextColor, BuiltinTextColor, TextWeight, TextDisplay, TextJustify, WordBreak, TextWrap } from '../theme/types.js';
+import type { LayerPlacement } from '../Layer/index.js';
+import type { BaseProps } from '../BaseProps.js';
 export type { TextType, TextSize };
 export interface TextProps extends Omit<BaseProps, 'children'> {
     /** Ref forwarded to the root element */

package/dist/Text/index.d.ts

@@ -32,8 +32,8 @@ export interface TextColorMap {
     accent: true;
     inherit: true;
 }
-export { Text, type TextProps, type TextType, type TextSize } from './Text';
-export { Heading, type HeadingProps, type HeadingLevel, type HeadingType, type HeadingTypeMap, } from '../Heading';
-export type { TextColor, TextWeight, TextDisplay, TextJustify, WordBreak, TextWrap, TextXStyleAllowed, ProseElement, } from '../theme/types';
-export { useTruncation, type UseTruncationOptions, type UseTruncationReturn, } from './useTruncation';
+export { Text, type TextProps, type TextType, type TextSize } from './Text.js';
+export { Heading, type HeadingProps, type HeadingLevel, type HeadingType, type HeadingTypeMap, } from '../Heading/index.js';
+export type { TextColor, TextWeight, TextDisplay, TextJustify, WordBreak, TextWrap, TextXStyleAllowed, ProseElement, } from '../theme/types.js';
+export { useTruncation, type UseTruncationOptions, type UseTruncationReturn, } from './useTruncation.js';
 //# sourceMappingURL=index.d.ts.map