@astryxdesign/core 0.7.5-canary.fccd771 → 0.7.5

package/dist/TabList/TabMenu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TabMenu.d.ts","sourceRoot":"","sources":["../../src/TabList/TabMenu.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAK,EAAE,EAA6B,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAGxE,OAAO,EAAiB,KAAK,QAAQ,EAAC,MAAM,SAAS,CAAC;AAoBtD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAG5C,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;CAC7B;AAED,MAAM,WAAW,YAAa,SAAQ,IAAI,CACxC,SAAS,CAAC,iBAAiB,CAAC,EAC5B,MAAM,GAAG,UAAU,GAAG,eAAe,GAAG,eAAe,GAAG,eAAe,CAC1E;IACC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,OAAO,EAAE,aAAa,EAAE,CAAC;CAC1B;AA+KD;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,OAAO,CAAC,EACtB,GAAG,EACH,KAAK,EACL,OAAO,EACP,MAAM,EACN,SAAS,EACT,KAAK,EACL,OAAO,EACP,GAAG,IAAI,EACR,EAAE,YAAY,qBA6Ld;yBAtMe,OAAO"}
+{"version":3,"file":"TabMenu.d.ts","sourceRoot":"","sources":["../../src/TabList/TabMenu.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAK,EAAE,EAA6B,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAGxE,OAAO,EAAiB,KAAK,QAAQ,EAAC,MAAM,SAAS,CAAC;AAuBtD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAG5C,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;CAC7B;AAED,MAAM,WAAW,YAAa,SAAQ,IAAI,CACxC,SAAS,CAAC,iBAAiB,CAAC,EAC5B,MAAM,GAAG,UAAU,GAAG,eAAe,GAAG,eAAe,GAAG,eAAe,CAC1E;IACC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,OAAO,EAAE,aAAa,EAAE,CAAC;CAC1B;AAmLD;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,OAAO,CAAC,EACtB,GAAG,EACH,KAAK,EACL,OAAO,EACP,MAAM,EACN,SAAS,EACT,KAAK,EACL,OAAO,EACP,GAAG,IAAI,EACR,EAAE,YAAY,qBA6Md;yBAtNe,OAAO"}

package/dist/TabList/TabMenu.js

@@ -25,6 +25,9 @@ import { focusOutlineProps } from "../utils/focusOutline.stylex.js";
 import { usePopover } from "../Popover/usePopover.js";
 import { MENU_ITEM_SELECTOR } from "../DropdownMenu/menuItemRoles.js";
 import { useListFocus } from "../hooks/useListFocus.js";
+import { useMenuPress } from "../hooks/useMenuPress.js";
+import { menuTouchActionStyles } from "../DropdownMenu/menuTouchAction.stylex.js";
+import { useMenuOverflow } from "../DropdownMenu/useMenuOverflow.js";
 import { useTabListContext } from "./TabListContext.js";
 import "./tab.markers.stylex.js";
 import { tabScope } from "./tab.markers.stylex.js";
@@ -39,6 +42,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 const styles = {
   trigger: {
     kVAEAm: "x1n2onr6",
+    kmuXW: "x2lah0s",
     k1xSpc: "x3nfvp2",
     kGNEyG: "x6s0dn4",
     kjj79g: "xl56j7k",
@@ -88,6 +92,15 @@ const styles = {
     k3aq6I: "x19jd1h0",
     $$css: true
   },
+  dropdown: {
+    kfSwDN: "x87ps6o",
+    k1xSpc: "x78zum5",
+    kXwgrk: "xdt5ytf",
+    kOIVth: "x1lsbc85",
+    k8WAf4: "xu0wf1k",
+    kg3NbH: "x7a5moj",
+    $$css: true
+  },
   menuItem: {
     k1xSpc: "x78zum5",
     kGNEyG: "x6s0dn4",
@@ -202,6 +215,16 @@ export function TabMenu({
     itemSelector: MENU_ITEM_SELECTOR,
     onEscape: () => popover.hide()
   });
+
+  // A press that slides across the options picks the one it lifts on, the
+  // highlight following the pointer, as DropdownMenu's does
+  // (`family:action-groups` FR1-FR3, FR5); a mouse released outside closes it.
+  const menuPress = useMenuPress({
+    menuRef: listRef,
+    itemSelector: MENU_ITEM_SELECTOR,
+    onDismiss: popover.hide
+  });
+  const hasOverflow = useMenuOverflow(listRef, options.length, popover.isOpen);
   const handleToggle = useCallback(() => {
     if (popover.isOpen) {
       popover.hide();
@@ -285,11 +308,10 @@ export function TabMenu({
       id: menuId,
       role: "menu",
       "aria-label": label,
+      ...menuPress.menuProps,
       onKeyDown: handleMenuKeyDown,
       onFocus: handleFocus,
-      ...mergeProps(themeProps('tab-menu-dropdown'), {
-        className: "x78zum5 xdt5ytf x1lsbc85 xu0wf1k x7a5moj"
-      }),
+      ...mergeProps(themeProps('tab-menu-dropdown'), stylex.props(styles.dropdown, hasOverflow ? menuTouchActionStyles.scrolls : menuTouchActionStyles.fits)),
       children: [/*#__PURE__*/_jsx("span", {
         role: "presentation",
         ...{

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

@@ -1 +1 @@
-{"version":3,"file":"TableCell.d.ts","sourceRoot":"","sources":["../../src/Table/TableCell.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;GAUG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AACrC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAQ5C,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,gBAAgB,CAAC;AACjD,OAAO,KAAK,EAAC,mBAAmB,EAAC,MAAM,SAAS,CAAC;AAgBjD,gDAAgD;AAChD,MAAM,WAAW,cAAe,SAAQ,SAAS,CAAC,oBAAoB,CAAC;IACrE,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,oBAAoB,CAAC,CAAC;IACtC,0FAA0F;IAC1F,KAAK,CAAC,EAAE,KAAK,GAAG,KAAK,GAAG,UAAU,GAAG,UAAU,CAAC;IAChD,yEAAyE;IACzE,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,yEAAyE;IACzE,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,sEAAsE;IACtE,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;OAGG;IACH,MAAM,CAAC,EAAE,YAAY,GAAG,YAAY,EAAE,CAAC;IACvC;;;;OAIG;IACH,kBAAkB,CAAC,EAAE,mBAAmB,CAAC;CAC1C;AAsHD;;;;;;;;;;;;;GAaG;AACH,wBAAgB,SAAS,CAAC,EACxB,QAAQ,EACR,MAAM,EACN,GAAG,EACH,SAAS,EAAE,iBAAiB,EAC5B,KAAK,EAAE,aAAa,EACpB,kBAAkB,EAClB,GAAG,KAAK,EACT,EAAE,cAAc,+BAwDhB;yBAhEe,SAAS"}
+{"version":3,"file":"TableCell.d.ts","sourceRoot":"","sources":["../../src/Table/TableCell.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;GAUG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AACrC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAQ5C,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,gBAAgB,CAAC;AACjD,OAAO,KAAK,EAAC,mBAAmB,EAAC,MAAM,SAAS,CAAC;AAiBjD,gDAAgD;AAChD,MAAM,WAAW,cAAe,SAAQ,SAAS,CAAC,oBAAoB,CAAC;IACrE,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,oBAAoB,CAAC,CAAC;IACtC,0FAA0F;IAC1F,KAAK,CAAC,EAAE,KAAK,GAAG,KAAK,GAAG,UAAU,GAAG,UAAU,CAAC;IAChD,yEAAyE;IACzE,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,yEAAyE;IACzE,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,sEAAsE;IACtE,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;OAGG;IACH,MAAM,CAAC,EAAE,YAAY,GAAG,YAAY,EAAE,CAAC;IACvC;;;;OAIG;IACH,kBAAkB,CAAC,EAAE,mBAAmB,CAAC;CAC1C;AA4HD;;;;;;;;;;;;;GAaG;AACH,wBAAgB,SAAS,CAAC,EACxB,QAAQ,EACR,MAAM,EACN,GAAG,EACH,SAAS,EAAE,iBAAiB,EAC5B,KAAK,EAAE,aAAa,EACpB,kBAAkB,EAClB,GAAG,KAAK,EACT,EAAE,cAAc,+BA0DhB;yBAlEe,SAAS"}

package/dist/Table/TableCell.js

@@ -21,6 +21,7 @@ import "./table.stylex.js";
 import { overflowStyles, wrapStyles, containerEdgeStyles, tableRowMarker } from "./table.stylex.js";
 import { useTableContext, buildDividerStyles, mergeXStyle } from "./useTableCellStyles.js";
 import { mergeProps } from "../utils/index.js";
+import { glidingDividerStyles } from "./glidingDivider.js";
 import { themeProps } from "../utils/themeProps.js";
 
 /** Props for TableCell — thin `<td>` wrapper */
@@ -113,6 +114,7 @@ const contextMenuCellStyles = {
 };
 const dividerRowStyles = {
   cell: {
+    "--_table-row-divider-width": "x6ivs5n x1gxz47l",
     kt9PQ7: "x92x3c3 x1wp2rvj",
     kfdmCh: "x1q0q8m5",
     kL6WhQ: "xw8gpjh",
@@ -171,7 +173,9 @@ export function TableCell({
   // When the cell owns a context menu, its density padding is relocated onto
   // the right-click trigger wrapper (see `content` below) so the entire cell —
   // padding included — opens the menu. Otherwise padding lives on the `<td>`.
-  const cellStyles = ctx ? [hasContextMenu ? densityTextStyles[ctx.density] : densityStyles[ctx.density], ctx.textOverflow === 'truncate' ? overflowStyles.cell : wrapStyles.cell, containerEdgeStyles[ctx.density], verticalAlignStyles[ctx.verticalAlign], ...buildDividerStyles(ctx, dividerRowStyles.cell, dividerColumnStyles.cell), ...(hasContextMenu ? [contextMenuCellStyles.cell] : [])] : [];
+  const cellStyles = ctx ? [hasContextMenu ? densityTextStyles[ctx.density] : densityStyles[ctx.density], ctx.textOverflow === 'truncate' ? overflowStyles.cell : wrapStyles.cell, containerEdgeStyles[ctx.density], verticalAlignStyles[ctx.verticalAlign], ...buildDividerStyles(ctx, dividerRowStyles.cell, dividerColumnStyles.cell), ...(hasContextMenu ? [contextMenuCellStyles.cell] : []),
+  // While a glide moves the row, its divider moves with it.
+  glidingDividerStyles.cell] : [];
 
   // The cell owns the context-menu wrapper so it controls how the menu
   // interacts with its padding / content. No-op when no actions. When actions

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

@@ -1 +1 @@
-{"version":3,"file":"TableHeaderCell.d.ts","sourceRoot":"","sources":["../../src/Table/TableHeaderCell.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;GAUG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AACrC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAS5C,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,gBAAgB,CAAC;AACjD,OAAO,KAAK,EAAC,mBAAmB,EAAC,MAAM,SAAS,CAAC;AAOjD,4EAA4E;AAC5E,MAAM,WAAW,oBAAqB,SAAQ,SAAS,CAAC,oBAAoB,CAAC;IAC3E,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,oBAAoB,CAAC,CAAC;IACtC,oDAAoD;IACpD,KAAK,CAAC,EAAE,KAAK,GAAG,KAAK,GAAG,UAAU,GAAG,UAAU,CAAC;IAChD,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;OAGG;IACH,MAAM,CAAC,EAAE,YAAY,GAAG,YAAY,EAAE,CAAC;IACvC;;;;OAIG;IACH,kBAAkB,CAAC,EAAE,mBAAmB,CAAC;CAC1C;AAkDD;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,eAAe,CAAC,EAC9B,QAAQ,EACR,MAAM,EACN,GAAG,EACH,SAAS,EAAE,iBAAiB,EAC5B,KAAK,EAAE,aAAa,EACpB,kBAAkB,EAClB,GAAG,KAAK,EACT,EAAE,oBAAoB,+BAsCtB;yBA9Ce,eAAe"}
+{"version":3,"file":"TableHeaderCell.d.ts","sourceRoot":"","sources":["../../src/Table/TableHeaderCell.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;GAUG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AACrC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAS5C,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,gBAAgB,CAAC;AACjD,OAAO,KAAK,EAAC,mBAAmB,EAAC,MAAM,SAAS,CAAC;AAOjD,4EAA4E;AAC5E,MAAM,WAAW,oBAAqB,SAAQ,SAAS,CAAC,oBAAoB,CAAC;IAC3E,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,oBAAoB,CAAC,CAAC;IACtC,oDAAoD;IACpD,KAAK,CAAC,EAAE,KAAK,GAAG,KAAK,GAAG,UAAU,GAAG,UAAU,CAAC;IAChD,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;OAGG;IACH,MAAM,CAAC,EAAE,YAAY,GAAG,YAAY,EAAE,CAAC;IACvC;;;;OAIG;IACH,kBAAkB,CAAC,EAAE,mBAAmB,CAAC;CAC1C;AAoDD;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,eAAe,CAAC,EAC9B,QAAQ,EACR,MAAM,EACN,GAAG,EACH,SAAS,EAAE,iBAAiB,EAC5B,KAAK,EAAE,aAAa,EACpB,kBAAkB,EAClB,GAAG,KAAK,EACT,EAAE,oBAAoB,+BAsCtB;yBA9Ce,eAAe"}

package/dist/Table/TableHeaderCell.js

@@ -57,6 +57,7 @@ const headerStyles = {
 };
 const headerDividerStyles = {
   cell: {
+    "--_table-row-divider-width": "x6ivs5n",
     kt9PQ7: "x92x3c3",
     kfdmCh: "x1q0q8m5",
     kL6WhQ: "xw8gpjh",

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

@@ -1 +1 @@
-{"version":3,"file":"TableRow.d.ts","sourceRoot":"","sources":["../../src/Table/TableRow.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;GAWG;AAEH,OAAO,EAAM,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAC1C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAG5C,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,gBAAgB,CAAC;AAMjD,+CAA+C;AAC/C,MAAM,WAAW,aAAc,SAAQ,SAAS,CAAC,mBAAmB,CAAC;IACnE,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,mBAAmB,CAAC,CAAC;IACrC,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,MAAM,CAAC,EAAE,YAAY,EAAE,CAAC;IACxB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAuED;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,QAAQ,CAAC,EACvB,QAAQ,EACR,MAAM,EACN,GAAG,EACH,WAAmB,EACnB,SAAS,EAAE,iBAAiB,EAC5B,KAAK,EAAE,aAAa,EACpB,GAAG,KAAK,EACT,EAAE,aAAa,+BAwDf;yBAhEe,QAAQ"}
+{"version":3,"file":"TableRow.d.ts","sourceRoot":"","sources":["../../src/Table/TableRow.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;GAWG;AAEH,OAAO,EAAM,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAC1C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAG5C,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,gBAAgB,CAAC;AAOjD,+CAA+C;AAC/C,MAAM,WAAW,aAAc,SAAQ,SAAS,CAAC,mBAAmB,CAAC;IACnE,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,mBAAmB,CAAC,CAAC;IACrC,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,MAAM,CAAC,EAAE,YAAY,EAAE,CAAC;IACxB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAuED;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,QAAQ,CAAC,EACvB,QAAQ,EACR,MAAM,EACN,GAAG,EACH,WAAmB,EACnB,SAAS,EAAE,iBAAiB,EAC5B,KAAK,EAAE,aAAa,EACpB,GAAG,KAAK,EACT,EAAE,aAAa,+BA0Df;yBAlEe,QAAQ"}

package/dist/Table/TableRow.js

@@ -19,6 +19,7 @@ import * as stylex from '@stylexjs/stylex';
 import "../theme/tokens.stylex.js";
 import { colorVars, durationVars, easeVars } from "../theme/tokens.stylex.js";
 import { tableRowMarker } from "./table.stylex.js";
+import { glidingDividerStyles } from "./glidingDivider.js";
 import { TableContext } from "./TableContext.js";
 import { mergeProps } from "../utils/index.js";
 import { themeProps } from "../utils/themeProps.js";
@@ -124,6 +125,8 @@ export function TableRow({
   if (ctx.dividers === 'rows' || ctx.dividers === 'grid') {
     // Note: last-body-row border removal is handled by TableCell
     // to avoid affecting the header row in <thead>.
+    // While a glide moves the row, its divider moves with it.
+    rowStyles.push(glidingDividerStyles.row);
   }
   if (xstyle) {
     rowStyles.push(...xstyle);

package/dist/Table/glidingDivider.d.ts

@@ -0,0 +1,96 @@
+/**
+ * @file glidingDivider.ts
+ * @input Table rows a row glide moves (Web Animations on the `<tr>`), their
+ *   computed borders, StyleX
+ * @output Exports `glidingDividerStyles` (a row's stand-in divider while it
+ *   glides), `markGlidingRows` (marks the moving rows for that glide and
+ *   carries each row's own border onto the stand-in) and `rowEdge`
+ * @position Table internals. With collapsed borders the table paints every
+ *   border at its cell's static place, so a row that moves leaves its divider
+ *   behind. For the glide only, the moving row's cells are marked: their
+ *   borders go transparent (their width stays, so nothing reflows) and one of
+ *   them draws the same divider across the whole row in its ::after, which
+ *   moves with the row. A pinned cell draws its own over it
+ *   (plugins/stickyColumns).
+ *
+ * SYNC: When modified, update TableCell.tsx, plugins/rowExpansion and
+ *   plugins/stickyColumns.
+ */
+import * as stylex from '@stylexjs/stylex';
+import { type BottomEdge } from './rowDivider.js';
+export type { BottomEdge } from './rowDivider.js';
+/** On a row while a glide moves it. */
+export declare const GLIDING_ATTRIBUTE = "data-astryx-row-gliding";
+/**
+ * A row's divider, carried on the row for its glide. Names no cell sets, so
+ * a pinned cell's own carry (plugins/stickyColumns) cannot shadow them.
+ */
+export declare const GLIDE_DIVIDER_WIDTH = "--_table-row-glide-width";
+export declare const GLIDE_DIVIDER_STYLE = "--_table-row-glide-style";
+export declare const GLIDE_DIVIDER_COLOR = "--_table-row-glide-color";
+export declare const glidingDividerStyles: Readonly<{
+    readonly cell: Readonly<{
+        readonly borderBottomColor: stylex.StyleXClassNameFor<"borderBottomColor", unknown>;
+        readonly '::after': stylex.StyleXClassNameFor<"::after", {
+            readonly content: {
+                readonly default: null;
+                readonly "[data-astryx-cell-gliding=\"line\"]": "\"\"";
+            };
+            readonly position: {
+                readonly default: null;
+                readonly "[data-astryx-cell-gliding=\"line\"]": "absolute";
+            };
+            readonly insetInline: {
+                readonly default: null;
+                readonly "[data-astryx-cell-gliding=\"line\"]": 0;
+            };
+            readonly bottom: {
+                readonly default: null;
+                readonly "[data-astryx-cell-gliding=\"line\"]": "calc(-1 * var(--_table-row-glide-offset, 0px))";
+            };
+            readonly height: {
+                readonly default: null;
+                readonly "[data-astryx-cell-gliding=\"line\"]": 0;
+            };
+            readonly borderBottomWidth: {
+                readonly default: null;
+                readonly "[data-astryx-cell-gliding=\"line\"]": "var(--_table-row-glide-width, 0px)";
+            };
+            readonly borderBottomStyle: {
+                readonly default: null;
+                readonly "[data-astryx-cell-gliding=\"line\"]": "var(--_table-row-glide-style, solid)";
+            };
+            readonly borderBottomColor: {
+                readonly default: null;
+                readonly "[data-astryx-cell-gliding=\"line\"]": `var(--_table-row-glide-color, ${stylex.StyleXVar<"light-dark(#05365919, #F2F4F619)">})`;
+            };
+            readonly pointerEvents: {
+                readonly default: null;
+                readonly "[data-astryx-cell-gliding=\"line\"]": "none";
+            };
+        }>;
+    }>;
+    readonly panelCell: Readonly<{
+        readonly borderBottomColor: stylex.StyleXClassNameFor<"borderBottomColor", unknown>;
+    }>;
+    readonly row: Readonly<{
+        readonly position: stylex.StyleXClassNameFor<"position", unknown>;
+    }>;
+}>;
+export declare function rowEdge(row: Element): BottomEdge | null;
+/**
+ * Marks the rows a glide is moving around `changed`, and `entering` (a row
+ * playing its entrance, with that entrance), so their cells draw a divider
+ * that moves with them; unmarks them in one batch when that motion ends. A
+ * glide moves a contiguous run of rows next to the change and stops near the
+ * visible part, so this walks out from the changed row each way and stops at
+ * still rows: it never visits the rest of a long table. It asks the motion
+ * module which rows glide and takes the borders read before the glide
+ * started (`edges`), so it reads nothing from the layout: it only writes.
+ * Resolves when the motion has ended.
+ */
+export declare function markGlidingRows(changed: HTMLElement, edges: ReadonlyMap<Element, BottomEdge>, entering: {
+    row: HTMLElement;
+    animation: Animation;
+} | null, glideOf: (element: Element) => Animation | null): Promise<void>;
+//# sourceMappingURL=glidingDivider.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"glidingDivider.d.ts","sourceRoot":"","sources":["../../src/Table/glidingDivider.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;GAiBG;AAEH,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAE3C,OAAO,EAAkB,KAAK,UAAU,EAAC,MAAM,cAAc,CAAC;AAE9D,YAAY,EAAC,UAAU,EAAC,MAAM,cAAc,CAAC;AAE7C,uCAAuC;AACvC,eAAO,MAAM,iBAAiB,4BAA4B,CAAC;AAc3D;;;GAGG;AACH,eAAO,MAAM,mBAAmB,6BAA6B,CAAC;AAC9D,eAAO,MAAM,mBAAmB,6BAA6B,CAAC;AAC9D,eAAO,MAAM,mBAAmB,6BAA6B,CAAC;AAE9D,eAAO,MAAM,oBAAoB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA+D/B,CAAC;AAwDH,wBAAgB,OAAO,CAAC,GAAG,EAAE,OAAO,GAAG,UAAU,GAAG,IAAI,CAKvD;AAED;;;;;;;;;;GAUG;AACH,wBAAsB,eAAe,CACnC,OAAO,EAAE,WAAW,EACpB,KAAK,EAAE,WAAW,CAAC,OAAO,EAAE,UAAU,CAAC,EACvC,QAAQ,EAAE;IAAC,GAAG,EAAE,WAAW,CAAC;IAAC,SAAS,EAAE,SAAS,CAAA;CAAC,GAAG,IAAI,EACzD,OAAO,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,SAAS,GAAG,IAAI,GAC9C,OAAO,CAAC,IAAI,CAAC,CA+If"}

package/dist/Table/glidingDivider.js

@@ -0,0 +1,275 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file glidingDivider.ts
+ * @input Table rows a row glide moves (Web Animations on the `<tr>`), their
+ *   computed borders, StyleX
+ * @output Exports `glidingDividerStyles` (a row's stand-in divider while it
+ *   glides), `markGlidingRows` (marks the moving rows for that glide and
+ *   carries each row's own border onto the stand-in) and `rowEdge`
+ * @position Table internals. With collapsed borders the table paints every
+ *   border at its cell's static place, so a row that moves leaves its divider
+ *   behind. For the glide only, the moving row's cells are marked: their
+ *   borders go transparent (their width stays, so nothing reflows) and one of
+ *   them draws the same divider across the whole row in its ::after, which
+ *   moves with the row. A pinned cell draws its own over it
+ *   (plugins/stickyColumns).
+ *
+ * SYNC: When modified, update TableCell.tsx, plugins/rowExpansion and
+ *   plugins/stickyColumns.
+ */
+
+import * as stylex from '@stylexjs/stylex';
+import "../theme/tokens.stylex.js";
+import { colorVars } from "../theme/tokens.stylex.js";
+import { collapsedBottom } from "./rowDivider.js";
+/** On a row while a glide moves it. */
+export const GLIDING_ATTRIBUTE = 'data-astryx-row-gliding';
+const GLIDING = '[data-astryx-row-gliding]';
+/**
+ * On each cell of a moving row; `line` on the one that draws the row's
+ * divider. On the cells themselves, so a table nested in a moving row keeps
+ * its own dividers.
+ */
+const CELL_ATTRIBUTE = 'data-astryx-cell-gliding';
+const CELL_GLIDING = '[data-astryx-cell-gliding]';
+const CELL_LINE = '[data-astryx-cell-gliding="line"]';
+
+/** On a pinned (sticky) cell: plugins/stickyColumns. */
+const PINNED_ATTRIBUTE = 'data-astryx-table-pinned';
+
+/**
+ * A row's divider, carried on the row for its glide. Names no cell sets, so
+ * a pinned cell's own carry (plugins/stickyColumns) cannot shadow them.
+ */
+export const GLIDE_DIVIDER_WIDTH = '--_table-row-glide-width';
+export const GLIDE_DIVIDER_STYLE = '--_table-row-glide-style';
+export const GLIDE_DIVIDER_COLOR = '--_table-row-glide-color';
+export const glidingDividerStyles = {
+  cell: {
+    kL6WhQ: "xw8gpjh x1lczva8",
+    k5JduY: "xjnv0ub",
+    kwXMNM: "x1ea2at",
+    kcktkL: "x15skwfs",
+    k8Iv0R: "x1f4wvdr",
+    k4zj60: "x2euz0u",
+    kHSQhd: "x9a7to",
+    kh0EW9: "x90dban",
+    kvRJ0G: "x8qyx5",
+    kloYau: "x1uwli9g",
+    $$css: true
+  },
+  panelCell: {
+    kL6WhQ: "x1gu98mf x1lczva8",
+    $$css: true
+  },
+  row: {
+    kVAEAm: "xjsxhw0",
+    $$css: true
+  }
+};
+
+/** The batch that marked a row last: only that batch unmarks it. */
+const markedBy = new WeakMap();
+/**
+ * A marked element's own inline border colors (bottom, or top for the row
+ * below and its cells), given back when it is unmarked.
+ */
+const inlineTopOf = new WeakMap();
+/** The edge sources a row hid when it was marked, given back at unmark. */
+const sourcesOf = new WeakMap();
+/** A marked cell's own inline border color, given back when it is unmarked. */
+const inlineColorOf = new WeakMap();
+
+/**
+ * A row's own bottom border, for its stand-in while it moves; null for a row
+ * already carrying one. Read where the glide reads the layout (`animate`'s
+ * `beforeMove`), before anything starts moving.
+ */
+/**
+ * The elements whose borders the collapse can take a row's divider from
+ * (`rowDivider.ts` collapsedBottom): the row's own bottom, the row below's
+ * top and its cells' tops, and at a section edge the row groups' borders.
+ */
+function edgeSourcesOf(row) {
+  const bottoms = [row];
+  const tops = [];
+  const group = row.parentElement;
+  const next = row.nextElementSibling ?? group?.nextElementSibling?.firstElementChild ?? null;
+  if (next instanceof HTMLElement) {
+    tops.push(next);
+    for (const cell of next.children) {
+      if (cell instanceof HTMLElement) {
+        tops.push(cell);
+      }
+    }
+  }
+  if (row.nextElementSibling == null && group instanceof HTMLElement) {
+    bottoms.push(group);
+    const nextGroup = group.nextElementSibling;
+    if (nextGroup instanceof HTMLElement) {
+      tops.push(nextGroup);
+    }
+  }
+  return {
+    bottoms,
+    tops
+  };
+}
+export function rowEdge(row) {
+  if (row.hasAttribute(GLIDING_ATTRIBUTE) || row.lastElementChild == null) {
+    return null;
+  }
+  return collapsedBottom(row.lastElementChild);
+}
+
+/**
+ * Marks the rows a glide is moving around `changed`, and `entering` (a row
+ * playing its entrance, with that entrance), so their cells draw a divider
+ * that moves with them; unmarks them in one batch when that motion ends. A
+ * glide moves a contiguous run of rows next to the change and stops near the
+ * visible part, so this walks out from the changed row each way and stops at
+ * still rows: it never visits the rest of a long table. It asks the motion
+ * module which rows glide and takes the borders read before the glide
+ * started (`edges`), so it reads nothing from the layout: it only writes.
+ * Resolves when the motion has ended.
+ */
+export async function markGlidingRows(changed, edges, entering, glideOf) {
+  const rows = new Map();
+  const glide = glideOf(changed);
+  if (glide != null) {
+    rows.set(changed, glide);
+  }
+  for (const step of ['nextElementSibling', 'previousElementSibling']) {
+    let row = changed[step];
+    // The changed row's own panel enters rather than glides: look past it.
+    let stillInARow = 0;
+    while (row instanceof HTMLElement && stillInARow < 2) {
+      const animation = glideOf(row);
+      if (animation != null) {
+        rows.set(row, animation);
+        stillInARow = 0;
+      } else {
+        stillInARow += 1;
+      }
+      row = row[step];
+    }
+  }
+  if (entering != null) {
+    rows.set(entering.row, entering.animation);
+  }
+  if (rows.size === 0) {
+    return;
+  }
+  const batch = Symbol('glide');
+  // Where each row's divider rests, read before any write. The line hangs
+  // from the row's padding box (its containing block), which a row's own
+  // border shortens; the collapsed edge starts at a cell's padding-box
+  // bottom, which a wide border puts below it. The table paints that edge
+  // from the whole pixel at or above it, so the line starts there too.
+  const offsets = new Map();
+  for (const row of rows.keys()) {
+    const edge = edges.get(row);
+    const cell = row.lastElementChild;
+    if (edge == null || !(cell instanceof HTMLElement)) {
+      continue;
+    }
+    const cellEdge = cell.getBoundingClientRect().top + cell.clientTop + cell.clientHeight;
+    const rowPaddingEdge = row.getBoundingClientRect().top + row.clientTop + row.clientHeight;
+    offsets.set(row, Math.floor(cellEdge) + edge.width - rowPaddingEdge);
+  }
+  for (const row of rows.keys()) {
+    const edge = edges.get(row);
+    if (edge != null && !row.hasAttribute(GLIDING_ATTRIBUTE)) {
+      row.style.setProperty(GLIDE_DIVIDER_WIDTH, `${edge.width}px`);
+      row.style.setProperty(GLIDE_DIVIDER_STYLE, edge.style);
+      row.style.setProperty(GLIDE_DIVIDER_COLOR, edge.color);
+      row.setAttribute(GLIDING_ATTRIBUTE, '');
+      // Every edge the collapse could take the divider from is painted by the
+      // table at the row's static place: the row's own border, the row
+      // below's top and its cells' tops, and at a section edge the row
+      // groups' borders. They go transparent too, and the line carries the
+      // winner.
+      const sources = edgeSourcesOf(row);
+      sourcesOf.set(row, sources);
+      for (const element of sources.bottoms) {
+        if (!inlineColorOf.has(element)) {
+          inlineColorOf.set(element, element.style.borderBottomColor);
+          element.style.borderBottomColor = 'transparent';
+        }
+      }
+      for (const element of sources.tops) {
+        if (!inlineTopOf.has(element)) {
+          inlineTopOf.set(element, element.style.borderTopColor);
+          element.style.borderTopColor = 'transparent';
+        }
+      }
+      row.style.setProperty('--_table-row-glide-offset', `${offsets.get(row) ?? 0}px`);
+      // The table's last row can glide a pixel farther than the rows above
+      // it (its border collapses differently), so mid-glide it overlaps the
+      // row above. Each moving row is its own layer; the last one stays
+      // under the others so it cannot cover the divider above it. Both stay
+      // under a sticky header (z-index 3).
+      row.style.zIndex = row.nextElementSibling == null ? '0' : '1';
+      // The first cell that scrolls with the row draws the line; a pinned
+      // cell is positioned (the line would be its width) and draws its own.
+      let hasLine = false;
+      for (const cell of row.children) {
+        const isLine = !hasLine && !cell.hasAttribute(PINNED_ATTRIBUTE);
+        cell.setAttribute(CELL_ATTRIBUTE, isLine ? 'line' : '');
+        hasLine ||= isLine;
+        // Inline, so a theme's `table-cell` color or an app's stylesheet on
+        // the cells, which outrank the stylesheet's rule, cannot keep the
+        // line at the row's static place.
+        if (cell instanceof HTMLElement) {
+          inlineColorOf.set(cell, cell.style.borderBottomColor);
+          cell.style.borderBottomColor = 'transparent';
+        }
+      }
+    }
+    markedBy.set(row, batch);
+  }
+  await Promise.all([...rows.values()].map(async animation => {
+    await animation?.finished.catch(() => undefined);
+  }));
+  // Writes only, and only for rows no later glide has taken over.
+  for (const row of rows.keys()) {
+    if (markedBy.get(row) !== batch) {
+      continue;
+    }
+    markedBy.delete(row);
+    row.removeAttribute(GLIDING_ATTRIBUTE);
+    row.style.removeProperty('z-index');
+    const {
+      bottoms,
+      tops
+    } = sourcesOf.get(row) ?? {
+      bottoms: [],
+      tops: []
+    };
+    sourcesOf.delete(row);
+    for (const element of bottoms) {
+      if (inlineColorOf.has(element)) {
+        element.style.borderBottomColor = inlineColorOf.get(element) ?? '';
+        inlineColorOf.delete(element);
+      }
+    }
+    for (const element of tops) {
+      if (inlineTopOf.has(element)) {
+        element.style.borderTopColor = inlineTopOf.get(element) ?? '';
+        inlineTopOf.delete(element);
+      }
+    }
+    row.style.removeProperty('--_table-row-glide-offset');
+    for (const cell of row.children) {
+      cell.removeAttribute(CELL_ATTRIBUTE);
+      if (cell instanceof HTMLElement && inlineColorOf.has(cell)) {
+        cell.style.borderBottomColor = inlineColorOf.get(cell) ?? '';
+        inlineColorOf.delete(cell);
+      }
+    }
+    row.style.removeProperty(GLIDE_DIVIDER_WIDTH);
+    row.style.removeProperty(GLIDE_DIVIDER_STYLE);
+    row.style.removeProperty(GLIDE_DIVIDER_COLOR);
+  }
+}

package/dist/Table/plugins/columnResize/useTableColumnResize.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useTableColumnResize.d.ts","sourceRoot":"","sources":["../../../../src/Table/plugins/columnResize/useTableColumnResize.tsx"],"names":[],"mappings":"AAkBA,OAAO,KAAK,EACV,WAAW,EAGX,WAAW,EAGZ,MAAM,aAAa,CAAC;AAWrB,MAAM,WAAW,0BAA0B;IACzC;;;;;;;OAOG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAEtC;;;OAGG;IACH;;;;;OAKG;IACH,iBAAiB,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,KAAK,IAAI,CAAC;IAE9D;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;;;;;;;;;;OAWG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,EAAE,CAAC;CAClD;AAkrBD,wBAAgB,oBAAoB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EACpE,MAAM,EAAE,0BAA0B,GACjC,WAAW,CAAC,CAAC,CAAC,CA6RhB"}
+{"version":3,"file":"useTableColumnResize.d.ts","sourceRoot":"","sources":["../../../../src/Table/plugins/columnResize/useTableColumnResize.tsx"],"names":[],"mappings":"AAkBA,OAAO,KAAK,EACV,WAAW,EAGX,WAAW,EAGZ,MAAM,aAAa,CAAC;AAWrB,MAAM,WAAW,0BAA0B;IACzC;;;;;;;OAOG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAEtC;;;OAGG;IACH;;;;;OAKG;IACH,iBAAiB,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,KAAK,IAAI,CAAC;IAE9D;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;;;;;;;;;;OAWG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,EAAE,CAAC;CAClD;AAkrBD,wBAAgB,oBAAoB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EACpE,MAAM,EAAE,0BAA0B,GACjC,WAAW,CAAC,CAAC,CAAC,CA4ShB"}

package/dist/Table/plugins/columnResize/useTableColumnResize.js

@@ -506,6 +506,10 @@ export function useTableColumnResize(config) {
   configRef.current = config;
   const dragStateRef = useRef(null);
   const isDraggingRef = useRef(false);
+  // The scroll container's merged ref, kept while the inner ref is the same,
+  // so React does not detach and re-attach it (and every plugin's listeners
+  // on it) on every render.
+  const mergedScrollWrapperRef = useRef(null);
   const tableRef = useRef(null);
   const globalMinWidth = config.minWidth;
   const maxWidth = config.maxWidth ?? Infinity;
@@ -652,8 +656,9 @@ export function useTableColumnResize(config) {
     transformScrollWrapper(props) {
       // Compose with any ref a prior plugin (e.g. sticky columns,
       // virtualization) already set on the scroll container.
-      const existingRef = props.htmlProps.ref;
-      const mergedRef = node => {
+      const existingRef = props.htmlProps.ref ?? null;
+      const cached = mergedScrollWrapperRef.current;
+      const mergedRef = cached != null && cached.inner === existingRef ? cached.merged : node => {
         attachScrollGate(node);
         if (typeof existingRef === 'function') {
           existingRef(node);
@@ -661,6 +666,10 @@ export function useTableColumnResize(config) {
           existingRef.current = node;
         }
       };
+      mergedScrollWrapperRef.current = {
+        inner: existingRef,
+        merged: mergedRef
+      };
       return {
         ...props,
         htmlProps: {

package/dist/Table/plugins/rowExpansion/useTableRowExpansion.d.ts

@@ -15,6 +15,7 @@
  */
 import { type ReactNode } from 'react';
 import type { TablePlugin } from '../../types.js';
+import { type AnimatedLayout } from '../../../motion/animatedLayout.js';
 /**
  * Configuration for useTableRowExpansion (detail-panel mode).
  *
@@ -71,6 +72,13 @@ export interface UseTableRowExpansionConfig<T extends Record<string, unknown>> {
      * @default false (only the chevron toggles expansion).
      */
     hasRowClickExpansion?: boolean;
+    /**
+     * A handle from `useAnimatedLayout`. With it, opening or closing a row's
+     * panel glides the rows after it to their new places instead of jumping,
+     * and an opening panel plays its entrance on the same motion. Without it,
+     * rows jump, as before.
+     */
+    animatedLayout?: AnimatedLayout;
 }
 /**
  * Returns a TablePlugin that expands a full-width detail panel below a row.

package/dist/Table/plugins/rowExpansion/useTableRowExpansion.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useTableRowExpansion.d.ts","sourceRoot":"","sources":["../../../../src/Table/plugins/rowExpansion/useTableRowExpansion.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,EAAkB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAqBtD,OAAO,KAAK,EACV,WAAW,EAKZ,MAAM,aAAa,CAAC;AAMrB;;;;;;GAMG;AACH,MAAM,WAAW,0BAA0B,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;IAC3E,0CAA0C;IAC1C,YAAY,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IAC1B,2DAA2D;IAC3D,QAAQ,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,kDAAkD;IAClD,SAAS,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,CAAC;IAC/B;;;OAGG;IACH,cAAc,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,SAAS,CAAC;IACvC;;;OAGG;IACH,mBAAmB,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,OAAO,CAAC;IAC3C;;;;;;;;;;;;;;;;;;;OAmBG;IACH,YAAY,CAAC,EAAE,OAAO,GAAG,aAAa,CAAC;IACvC;;;;;;;;;OASG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;CAChC;AAsQD;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,wBAAgB,oBAAoB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EACpE,MAAM,EAAE,0BAA0B,CAAC,CAAC,CAAC,GACpC,WAAW,CAAC,CAAC,CAAC,CAgOhB"}
+{"version":3,"file":"useTableRowExpansion.d.ts","sourceRoot":"","sources":["../../../../src/Table/plugins/rowExpansion/useTableRowExpansion.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,EAKL,KAAK,SAAS,EAEf,MAAM,OAAO,CAAC;AAuBf,OAAO,KAAK,EACV,WAAW,EAMZ,MAAM,aAAa,CAAC;AAErB,OAAO,EAKL,KAAK,cAAc,EAEpB,MAAM,gCAAgC,CAAC;AAaxC;;;;;;GAMG;AACH,MAAM,WAAW,0BAA0B,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;IAC3E,0CAA0C;IAC1C,YAAY,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IAC1B,2DAA2D;IAC3D,QAAQ,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,kDAAkD;IAClD,SAAS,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,CAAC;IAC/B;;;OAGG;IACH,cAAc,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,SAAS,CAAC;IACvC;;;OAGG;IACH,mBAAmB,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,OAAO,CAAC;IAC3C;;;;;;;;;;;;;;;;;;;OAmBG;IACH,YAAY,CAAC,EAAE,OAAO,GAAG,aAAa,CAAC;IACvC;;;;;;;;;OASG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B;;;;;OAKG;IACH,cAAc,CAAC,EAAE,cAAc,CAAC;CACjC;AA8ZD;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,wBAAgB,oBAAoB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EACpE,MAAM,EAAE,0BAA0B,CAAC,CAAC,CAAC,GACpC,WAAW,CAAC,CAAC,CAAC,CAofhB"}