@crisp-ui-kit/crisp 0.20.0 → 0.20.2

package/dist/appshell.css

@@ -3,8 +3,8 @@
     display: flex; height: 100%; width: 100%; overflow: hidden; background: var(--bg-surface); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
     & .appshell-side { position: relative; flex-shrink: 0; overflow: hidden; }
     & .appshell-side-inner { height: 100%; }
-    & .appshell-resize { position: absolute; top: 0; right: 0; width: 10px; height: 100%; cursor: col-resize; z-index: 5; touch-action: none; }
-    & .appshell-resize::after { content: ""; position: absolute; top: 0; right: 0; width: 1px; height: 100%; background: var(--border-subtle); transition: background-color .16s, height .16s; }
+    & .appshell-resize { position: absolute; top: 0; inset-inline-end: 0; width: 10px; height: 100%; cursor: col-resize; z-index: 5; touch-action: none; }
+    & .appshell-resize::after { content: ""; position: absolute; top: 0; inset-inline-end: 0; width: 1px; height: 100%; background: var(--border-subtle); transition: background-color .16s, height .16s; }
     & .appshell-resize:hover::after, & .appshell-resize[data-dragging]::after { width: 2px; background: var(--bg-brand-solid); }
     & .appshell-main { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }
     & .appshell-expand { position: absolute; top: var(--space-2); inset-inline-start: var(--space-2); z-index: 6; display: inline-flex; align-items: center; justify-content: center; width: var(--size-row); height: var(--size-row); padding: 0; border: none; border-radius: var(--radius-md); box-shadow: inset 0 0 0 1px var(--border-subtle); background: var(--bg-surface); color: var(--fg-muted); font-family: inherit; cursor: pointer; transition: background-color .12s; }

package/dist/cjs/core/direction.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isRtlElement = isRtlElement;
+/**
+ * The nearest declared direction. The `dir` attribute is checked first because
+ * it is how a document says this in practice and it is readable without a
+ * layout, then computed style for a direction set purely in CSS.
+ *
+ * Shared so that a floating layer's edge choice and a drag handler's sign come
+ * from the same answer. They have to agree: mirroring one without the other is
+ * the half-conversion lesson 54 is about.
+ */
+function isRtlElement(anchor) {
+    if (!anchor || typeof window === "undefined")
+        return false;
+    const declared = anchor.closest("[dir]")?.getAttribute("dir");
+    if (declared)
+        return declared.toLowerCase() === "rtl";
+    try {
+        return window.getComputedStyle(anchor).direction === "rtl";
+    }
+    catch {
+        return false;
+    }
+}

package/dist/cjs/core/index.js

@@ -14,11 +14,13 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.usePrefersReducedMotion = exports.resolveRecipe = exports.Primitive = exports.placeFloating = exports.defineRecipe = exports.cx = void 0;
+exports.usePrefersReducedMotion = exports.resolveRecipe = exports.Primitive = exports.placeFloating = exports.isRtlElement = exports.defineRecipe = exports.cx = void 0;
 var cx_1 = require("./cx");
 Object.defineProperty(exports, "cx", { enumerable: true, get: function () { return cx_1.cx; } });
 var define_1 = require("./define");
 Object.defineProperty(exports, "defineRecipe", { enumerable: true, get: function () { return define_1.defineRecipe; } });
+var direction_1 = require("./direction");
+Object.defineProperty(exports, "isRtlElement", { enumerable: true, get: function () { return direction_1.isRtlElement; } });
 var place_floating_1 = require("./place-floating");
 Object.defineProperty(exports, "placeFloating", { enumerable: true, get: function () { return place_floating_1.placeFloating; } });
 var primitive_1 = require("./primitive");

package/dist/cjs/core/place-floating.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.placeFloating = placeFloating;
+const direction_1 = require("./direction");
 /**
  * Where a floating layer goes, in logical terms.
  *
@@ -21,26 +22,8 @@ exports.placeFloating = placeFloating;
  * be the half-conversion #146 exists to prevent — the rect it is measured
  * against would still be physical.
  */
-/**
- * The nearest declared direction. The `dir` attribute is checked first because
- * it is how a document says this in practice and it is readable without a
- * layout, then computed style for a direction set purely in CSS.
- */
-function isRtl(anchor) {
-    if (!anchor || typeof window === "undefined")
-        return false;
-    const declared = anchor.closest("[dir]")?.getAttribute("dir");
-    if (declared)
-        return declared.toLowerCase() === "rtl";
-    try {
-        return window.getComputedStyle(anchor).direction === "rtl";
-    }
-    catch {
-        return false;
-    }
-}
 function placeFloating({ rect, align = "start", gap, flipBelow, anchor, }) {
-    const rtl = isRtl(anchor);
+    const rtl = (0, direction_1.isRtlElement)(anchor);
     const up = window.innerHeight - rect.bottom < flipBelow;
     const style = up
         ? { bottom: window.innerHeight - rect.top + gap }

package/dist/cjs/product/appshell/appshell.js

@@ -37,6 +37,7 @@ exports.AppShell = AppShell;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const lucide_react_1 = require("lucide-react");
 const React = __importStar(require("react"));
+const core_1 = require("../../core");
 const appshell_recipe_1 = require("./appshell.recipe");
 /**
  * App-shell layout with a collapsible + resizable sidebar, mirroring Attio's
@@ -62,6 +63,11 @@ function AppShell({ sidebar, children, width: widthProp, defaultWidth = 275, onW
         e.preventDefault();
         const startX = e.clientX;
         const startW = width;
+        // The sidebar is the flex row's first child, so under RTL it renders on the
+        // RIGHT — measured. `clientX` stays physical, so pulling right must SHRINK
+        // it there. Mirroring the handle's CSS without this is the half-conversion
+        // lesson 54 is about, which is why both change in one commit (#212).
+        const dir = (0, core_1.isRtlElement)(e.currentTarget) ? -1 : 1;
         // Attio only enters the drag state once the pointer has actually moved — a
         // click on the handle is not a drag, so the blue bar must not flash on press.
         let moved = false;
@@ -75,7 +81,7 @@ function AppShell({ sidebar, children, width: widthProp, defaultWidth = 275, onW
                 moved = true;
                 setDragging(true);
             }
-            const w = Math.round(Math.min(maxWidth, Math.max(minWidth, startW + (ev.clientX - startX))));
+            const w = Math.round(Math.min(maxWidth, Math.max(minWidth, startW + dir * (ev.clientX - startX))));
             setDragWidth(w);
             last = w;
         };

package/dist/cjs/product/appshell/appshell.recipe.js

@@ -12,8 +12,8 @@ const config = (0, core_1.defineRecipe)({
     display: flex; height: 100%; width: 100%; overflow: hidden; background: ${tokens_1.contract.bgSurface}; font-family: ${tokens_1.contract.font.sans}; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
     & .appshell-side { position: relative; flex-shrink: 0; overflow: hidden; }
     & .appshell-side-inner { height: 100%; }
-    & .appshell-resize { position: absolute; top: 0; right: 0; width: 10px; height: 100%; cursor: col-resize; z-index: 5; touch-action: none; }
-    & .appshell-resize::after { content: ""; position: absolute; top: 0; right: 0; width: 1px; height: 100%; background: ${tokens_1.contract.borderSubtle}; transition: background-color .16s, height .16s; }
+    & .appshell-resize { position: absolute; top: 0; inset-inline-end: 0; width: 10px; height: 100%; cursor: col-resize; z-index: 5; touch-action: none; }
+    & .appshell-resize::after { content: ""; position: absolute; top: 0; inset-inline-end: 0; width: 1px; height: 100%; background: ${tokens_1.contract.borderSubtle}; transition: background-color .16s, height .16s; }
     & .appshell-resize:hover::after, & .appshell-resize[data-dragging]::after { width: 2px; background: ${tokens_1.contract.bgBrandSolid}; }
     & .appshell-main { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }
     & .appshell-expand { position: absolute; top: ${tokens_1.contract.space["2"]}; inset-inline-start: ${tokens_1.contract.space["2"]}; z-index: 6; display: inline-flex; align-items: center; justify-content: center; width: ${tokens_1.contract.size.row}; height: ${tokens_1.contract.size.row}; padding: 0; border: none; border-radius: ${tokens_1.contract.radius.md}; box-shadow: inset 0 0 0 1px ${tokens_1.contract.borderSubtle}; background: ${tokens_1.contract.bgSurface}; color: ${tokens_1.contract.fgMuted}; font-family: inherit; cursor: pointer; transition: background-color .12s; }

package/dist/cjs/product/recordpage/recordpage.js

@@ -42,6 +42,7 @@ const avatar_1 = require("../../components/avatar");
 const checkbox_1 = require("../../components/checkbox");
 const menu_1 = require("../../components/menu");
 const tabs_1 = require("../../components/tabs");
+const core_1 = require("../../core");
 const recordstable_1 = require("../recordstable");
 const recordpage_recipe_1 = require("./recordpage.recipe");
 function valueEmpty(v) {
@@ -215,14 +216,20 @@ function RecordPage({ record, columns, collection = "Records", labels, onBack, o
     const [resizing, setResizing] = React.useState(false);
     const dragRef = React.useRef(null);
     const onResizeDown = (e) => {
-        dragRef.current = { x: e.clientX, w: detailsW };
+        // details is the flex row's first child, so it sits on the right under RTL
+        // and a rightward pull must shrink it (#212)
+        dragRef.current = {
+            x: e.clientX,
+            w: detailsW,
+            dir: (0, core_1.isRtlElement)(e.currentTarget) ? -1 : 1,
+        };
         setResizing(true);
         e.currentTarget.setPointerCapture(e.pointerId);
     };
     const onResizeMove = (e) => {
         if (!dragRef.current)
             return;
-        const next = dragRef.current.w + (e.clientX - dragRef.current.x);
+        const next = dragRef.current.w + dragRef.current.dir * (e.clientX - dragRef.current.x);
         setDetailsW(Math.max(300, Math.min(560, next)));
     };
     const onResizeUp = (e) => {

package/dist/cjs/product/recordpage/recordpage.recipe.js

@@ -34,8 +34,8 @@ const config = (0, core_1.defineRecipe)({
 
     & .recordpage-details { width: 320px; flex-shrink: 0; overflow-y: auto; border-inline-end: 1px solid ${tokens_1.contract.borderSubtle}; padding: ${tokens_1.contract.space["3"]}; }
     & .recordpage-resizer { position: relative; flex: 0 0 auto; width: 0; align-self: stretch; cursor: col-resize; z-index: 5; touch-action: none; }
-    & .recordpage-resizer::before { content: ""; position: absolute; top: 0; bottom: 0; left: -4px; width: 9px; }
-    & .recordpage-resizer::after { content: ""; position: absolute; top: 0; bottom: 0; left: -1px; width: 2px; background: transparent; transition: background-color .12s ease; }
+    & .recordpage-resizer::before { content: ""; position: absolute; top: 0; bottom: 0; inset-inline-start: -4px; width: 9px; }
+    & .recordpage-resizer::after { content: ""; position: absolute; top: 0; bottom: 0; inset-inline-start: -1px; width: 2px; background: transparent; transition: background-color .12s ease; }
     & .recordpage-resizer:hover::after, & .recordpage-resizer[data-active]::after { background: color-mix(in srgb, ${tokens_1.contract.bgBrandSolid} 55%, transparent); }
     & .recordpage-entity { display: flex; align-items: center; gap: ${tokens_1.contract.space["2"]}; padding: ${tokens_1.contract.space["1"]} ${tokens_1.contract.space["1"]} ${tokens_1.contract.space["2"]}; }
     & .recordpage-entity-logo { width: 32px; height: 32px; border-radius: 30%; flex-shrink: 0; object-fit: cover; background: ${tokens_1.contract.bgRaised}; }

package/dist/cjs/product/recordstable/recordstable.js

@@ -52,6 +52,7 @@ const menu_1 = require("../../components/menu");
 const multiselect_1 = require("../../components/multiselect");
 const select_1 = require("../../components/select");
 const switch_1 = require("../../components/switch");
+const core_1 = require("../../core");
 const company_logos_1 = require("./company-logos");
 const recordstable_recipe_1 = require("./recordstable.recipe");
 const EDITABLE = new Set(["text", "number", "url", "currency"]);
@@ -897,7 +898,11 @@ function RecordsTable({ labels, columns: columnsProp = exports.defaultColumns, r
         setOpenMenu(null);
     };
     // column resize via pointer drag on the header edge
-    const resizeCol = (key, startX, startW) => {
+    const resizeCol = (key, startX, startW, grip) => {
+        // A table's columns reverse under RTL — measured — so the grip sits on the
+        // column's leading edge there and a rightward pull must SHRINK it. The
+        // anchor is `inset-inline-end`; this is the other half (#214).
+        const dir = (0, core_1.isRtlElement)(grip) ? -1 : 1;
         // guard the whole document during the drag: kill text selection and force a
         // resize cursor so the gesture doesn't select cells or flicker (was buggy)
         const prevSelect = document.body.style.userSelect;
@@ -905,7 +910,7 @@ function RecordsTable({ labels, columns: columnsProp = exports.defaultColumns, r
         document.body.style.userSelect = "none";
         document.body.style.cursor = "col-resize";
         const onMove = (e) => {
-            const w = Math.round(Math.max(72, startW + (e.clientX - startX)));
+            const w = Math.round(Math.max(72, startW + dir * (e.clientX - startX)));
             setCols((prev) => prev.map((c) => (c.key === key ? { ...c, width: w } : c)));
         };
         const onUp = () => {
@@ -995,7 +1000,7 @@ function RecordsTable({ labels, columns: columnsProp = exports.defaultColumns, r
                                                             e.stopPropagation();
                                                             const th = e.currentTarget
                                                                 .parentElement;
-                                                            resizeCol(col.key, e.clientX, th ? th.getBoundingClientRect().width : 180);
+                                                            resizeCol(col.key, e.clientX, th ? th.getBoundingClientRect().width : 180, e.currentTarget);
                                                         }, onClick: (e) => e.stopPropagation() })] }, col.key));
                                         }), (0, jsx_runtime_1.jsx)("th", { className: "recordstable-th recordstable-addcol", children: allowAddColumn && ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: addColumn, "aria-label": t.addColumn, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 15, strokeWidth: 1.75 }) })) })] }) }), (0, jsx_runtime_1.jsx)("tbody", { children: visibleRows.map((row) => ((0, jsx_runtime_1.jsxs)("tr", { "data-selected": selected.has(row.id) ? "" : undefined, onContextMenu: (e) => {
                                         e.preventDefault();

package/dist/cjs/product/recordstable/recordstable.recipe.js

@@ -46,8 +46,8 @@ ${(0, tabletoolbar_chrome_1.toolbarChromeBody)("recordstable")}
     & .recordstable-th[data-sorted="desc"] .recordstable-sort svg { transform: rotate(180deg); }
 
     /* column resize handle */
-    & .recordstable-resize { position: absolute; top: 0; right: -3px; width: 9px; height: 100%; cursor: col-resize; z-index: 6; touch-action: none; }
-    & .recordstable-resize::after { content: ""; position: absolute; top: 0; left: 3px; width: 2px; height: 100%; background: ${tokens_1.contract.bgBrandSolid}; opacity: 0; transition: opacity .12s; }
+    & .recordstable-resize { position: absolute; top: 0; inset-inline-end: -3px; width: 9px; height: 100%; cursor: col-resize; z-index: 6; touch-action: none; }
+    & .recordstable-resize::after { content: ""; position: absolute; top: 0; inset-inline-start: 3px; width: 2px; height: 100%; background: ${tokens_1.contract.bgBrandSolid}; opacity: 0; transition: opacity .12s; }
     & .recordstable-resize:hover::after, & .recordstable-resize[data-resizing]::after { opacity: 1; }
 
     /* add-column header */

package/dist/esm/core/direction.js

@@ -0,0 +1,22 @@
+/**
+ * The nearest declared direction. The `dir` attribute is checked first because
+ * it is how a document says this in practice and it is readable without a
+ * layout, then computed style for a direction set purely in CSS.
+ *
+ * Shared so that a floating layer's edge choice and a drag handler's sign come
+ * from the same answer. They have to agree: mirroring one without the other is
+ * the half-conversion lesson 54 is about.
+ */
+export function isRtlElement(anchor) {
+    if (!anchor || typeof window === "undefined")
+        return false;
+    const declared = anchor.closest("[dir]")?.getAttribute("dir");
+    if (declared)
+        return declared.toLowerCase() === "rtl";
+    try {
+        return window.getComputedStyle(anchor).direction === "rtl";
+    }
+    catch {
+        return false;
+    }
+}

package/dist/esm/core/index.js

@@ -1,5 +1,6 @@
 export { cx } from "./cx.js";
 export { defineRecipe } from "./define.js";
+export { isRtlElement } from "./direction.js";
 export { placeFloating, } from "./place-floating.js";
 export { Primitive } from "./primitive.js";
 export { resolveRecipe } from "./resolve.js";

package/dist/esm/core/place-floating.js

@@ -1,3 +1,4 @@
+import { isRtlElement } from "./direction.js";
 /**
  * Where a floating layer goes, in logical terms.
  *
@@ -18,26 +19,8 @@
  * be the half-conversion #146 exists to prevent — the rect it is measured
  * against would still be physical.
  */
-/**
- * The nearest declared direction. The `dir` attribute is checked first because
- * it is how a document says this in practice and it is readable without a
- * layout, then computed style for a direction set purely in CSS.
- */
-function isRtl(anchor) {
-    if (!anchor || typeof window === "undefined")
-        return false;
-    const declared = anchor.closest("[dir]")?.getAttribute("dir");
-    if (declared)
-        return declared.toLowerCase() === "rtl";
-    try {
-        return window.getComputedStyle(anchor).direction === "rtl";
-    }
-    catch {
-        return false;
-    }
-}
 export function placeFloating({ rect, align = "start", gap, flipBelow, anchor, }) {
-    const rtl = isRtl(anchor);
+    const rtl = isRtlElement(anchor);
     const up = window.innerHeight - rect.bottom < flipBelow;
     const style = up
         ? { bottom: window.innerHeight - rect.top + gap }

package/dist/esm/product/appshell/appshell.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { PanelLeft } from "lucide-react";
 import * as React from "react";
+import { isRtlElement } from "../../core/index.js";
 import { appshellRecipe } from "./appshell.recipe.js";
 /**
  * App-shell layout with a collapsible + resizable sidebar, mirroring Attio's
@@ -26,6 +27,11 @@ export function AppShell({ sidebar, children, width: widthProp, defaultWidth = 2
         e.preventDefault();
         const startX = e.clientX;
         const startW = width;
+        // The sidebar is the flex row's first child, so under RTL it renders on the
+        // RIGHT — measured. `clientX` stays physical, so pulling right must SHRINK
+        // it there. Mirroring the handle's CSS without this is the half-conversion
+        // lesson 54 is about, which is why both change in one commit (#212).
+        const dir = isRtlElement(e.currentTarget) ? -1 : 1;
         // Attio only enters the drag state once the pointer has actually moved — a
         // click on the handle is not a drag, so the blue bar must not flash on press.
         let moved = false;
@@ -39,7 +45,7 @@ export function AppShell({ sidebar, children, width: widthProp, defaultWidth = 2
                 moved = true;
                 setDragging(true);
             }
-            const w = Math.round(Math.min(maxWidth, Math.max(minWidth, startW + (ev.clientX - startX))));
+            const w = Math.round(Math.min(maxWidth, Math.max(minWidth, startW + dir * (ev.clientX - startX))));
             setDragWidth(w);
             last = w;
         };

package/dist/esm/product/appshell/appshell.recipe.js

@@ -9,8 +9,8 @@ const config = defineRecipe({
     display: flex; height: 100%; width: 100%; overflow: hidden; background: ${c.bgSurface}; font-family: ${c.font.sans}; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
     & .appshell-side { position: relative; flex-shrink: 0; overflow: hidden; }
     & .appshell-side-inner { height: 100%; }
-    & .appshell-resize { position: absolute; top: 0; right: 0; width: 10px; height: 100%; cursor: col-resize; z-index: 5; touch-action: none; }
-    & .appshell-resize::after { content: ""; position: absolute; top: 0; right: 0; width: 1px; height: 100%; background: ${c.borderSubtle}; transition: background-color .16s, height .16s; }
+    & .appshell-resize { position: absolute; top: 0; inset-inline-end: 0; width: 10px; height: 100%; cursor: col-resize; z-index: 5; touch-action: none; }
+    & .appshell-resize::after { content: ""; position: absolute; top: 0; inset-inline-end: 0; width: 1px; height: 100%; background: ${c.borderSubtle}; transition: background-color .16s, height .16s; }
     & .appshell-resize:hover::after, & .appshell-resize[data-dragging]::after { width: 2px; background: ${c.bgBrandSolid}; }
     & .appshell-main { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }
     & .appshell-expand { position: absolute; top: ${c.space["2"]}; inset-inline-start: ${c.space["2"]}; z-index: 6; display: inline-flex; align-items: center; justify-content: center; width: ${c.size.row}; height: ${c.size.row}; padding: 0; border: none; border-radius: ${c.radius.md}; box-shadow: inset 0 0 0 1px ${c.borderSubtle}; background: ${c.bgSurface}; color: ${c.fgMuted}; font-family: inherit; cursor: pointer; transition: background-color .12s; }

package/dist/esm/product/recordpage/recordpage.js

@@ -5,6 +5,7 @@ import { Avatar } from "../../components/avatar/index.js";
 import { Checkbox } from "../../components/checkbox/index.js";
 import { Menu, MenuItem, MenuSeparator } from "../../components/menu/index.js";
 import { Tabs } from "../../components/tabs/index.js";
+import { isRtlElement } from "../../core/index.js";
 import { tagTone, } from "../recordstable/index.js";
 import { recordpageRecipe } from "./recordpage.recipe.js";
 function valueEmpty(v) {
@@ -178,14 +179,20 @@ export function RecordPage({ record, columns, collection = "Records", labels, on
     const [resizing, setResizing] = React.useState(false);
     const dragRef = React.useRef(null);
     const onResizeDown = (e) => {
-        dragRef.current = { x: e.clientX, w: detailsW };
+        // details is the flex row's first child, so it sits on the right under RTL
+        // and a rightward pull must shrink it (#212)
+        dragRef.current = {
+            x: e.clientX,
+            w: detailsW,
+            dir: isRtlElement(e.currentTarget) ? -1 : 1,
+        };
         setResizing(true);
         e.currentTarget.setPointerCapture(e.pointerId);
     };
     const onResizeMove = (e) => {
         if (!dragRef.current)
             return;
-        const next = dragRef.current.w + (e.clientX - dragRef.current.x);
+        const next = dragRef.current.w + dragRef.current.dir * (e.clientX - dragRef.current.x);
         setDetailsW(Math.max(300, Math.min(560, next)));
     };
     const onResizeUp = (e) => {

package/dist/esm/product/recordpage/recordpage.recipe.js

@@ -31,8 +31,8 @@ const config = defineRecipe({
 
     & .recordpage-details { width: 320px; flex-shrink: 0; overflow-y: auto; border-inline-end: 1px solid ${c.borderSubtle}; padding: ${c.space["3"]}; }
     & .recordpage-resizer { position: relative; flex: 0 0 auto; width: 0; align-self: stretch; cursor: col-resize; z-index: 5; touch-action: none; }
-    & .recordpage-resizer::before { content: ""; position: absolute; top: 0; bottom: 0; left: -4px; width: 9px; }
-    & .recordpage-resizer::after { content: ""; position: absolute; top: 0; bottom: 0; left: -1px; width: 2px; background: transparent; transition: background-color .12s ease; }
+    & .recordpage-resizer::before { content: ""; position: absolute; top: 0; bottom: 0; inset-inline-start: -4px; width: 9px; }
+    & .recordpage-resizer::after { content: ""; position: absolute; top: 0; bottom: 0; inset-inline-start: -1px; width: 2px; background: transparent; transition: background-color .12s ease; }
     & .recordpage-resizer:hover::after, & .recordpage-resizer[data-active]::after { background: color-mix(in srgb, ${c.bgBrandSolid} 55%, transparent); }
     & .recordpage-entity { display: flex; align-items: center; gap: ${c.space["2"]}; padding: ${c.space["1"]} ${c.space["1"]} ${c.space["2"]}; }
     & .recordpage-entity-logo { width: 32px; height: 32px; border-radius: 30%; flex-shrink: 0; object-fit: cover; background: ${c.bgRaised}; }

package/dist/esm/product/recordstable/recordstable.js

@@ -14,6 +14,7 @@ import { Menu, MenuItem, useMenuKeyboard } from "../../components/menu/index.js"
 import { MultiSelect } from "../../components/multiselect/index.js";
 import { Select } from "../../components/select/index.js";
 import { Switch } from "../../components/switch/index.js";
+import { isRtlElement } from "../../core/index.js";
 import { companyLogos } from "./company-logos.js";
 import { recordstableRecipe } from "./recordstable.recipe.js";
 const EDITABLE = new Set(["text", "number", "url", "currency"]);
@@ -859,7 +860,11 @@ export function RecordsTable({ labels, columns: columnsProp = defaultColumns, ro
         setOpenMenu(null);
     };
     // column resize via pointer drag on the header edge
-    const resizeCol = (key, startX, startW) => {
+    const resizeCol = (key, startX, startW, grip) => {
+        // A table's columns reverse under RTL — measured — so the grip sits on the
+        // column's leading edge there and a rightward pull must SHRINK it. The
+        // anchor is `inset-inline-end`; this is the other half (#214).
+        const dir = isRtlElement(grip) ? -1 : 1;
         // guard the whole document during the drag: kill text selection and force a
         // resize cursor so the gesture doesn't select cells or flicker (was buggy)
         const prevSelect = document.body.style.userSelect;
@@ -867,7 +872,7 @@ export function RecordsTable({ labels, columns: columnsProp = defaultColumns, ro
         document.body.style.userSelect = "none";
         document.body.style.cursor = "col-resize";
         const onMove = (e) => {
-            const w = Math.round(Math.max(72, startW + (e.clientX - startX)));
+            const w = Math.round(Math.max(72, startW + dir * (e.clientX - startX)));
             setCols((prev) => prev.map((c) => (c.key === key ? { ...c, width: w } : c)));
         };
         const onUp = () => {
@@ -957,7 +962,7 @@ export function RecordsTable({ labels, columns: columnsProp = defaultColumns, ro
                                                             e.stopPropagation();
                                                             const th = e.currentTarget
                                                                 .parentElement;
-                                                            resizeCol(col.key, e.clientX, th ? th.getBoundingClientRect().width : 180);
+                                                            resizeCol(col.key, e.clientX, th ? th.getBoundingClientRect().width : 180, e.currentTarget);
                                                         }, onClick: (e) => e.stopPropagation() })] }, col.key));
                                         }), _jsx("th", { className: "recordstable-th recordstable-addcol", children: allowAddColumn && (_jsx("button", { type: "button", onClick: addColumn, "aria-label": t.addColumn, children: _jsx(Plus, { size: 15, strokeWidth: 1.75 }) })) })] }) }), _jsx("tbody", { children: visibleRows.map((row) => (_jsxs("tr", { "data-selected": selected.has(row.id) ? "" : undefined, onContextMenu: (e) => {
                                         e.preventDefault();

package/dist/esm/product/recordstable/recordstable.recipe.js

@@ -43,8 +43,8 @@ ${toolbarChromeBody("recordstable")}
     & .recordstable-th[data-sorted="desc"] .recordstable-sort svg { transform: rotate(180deg); }
 
     /* column resize handle */
-    & .recordstable-resize { position: absolute; top: 0; right: -3px; width: 9px; height: 100%; cursor: col-resize; z-index: 6; touch-action: none; }
-    & .recordstable-resize::after { content: ""; position: absolute; top: 0; left: 3px; width: 2px; height: 100%; background: ${c.bgBrandSolid}; opacity: 0; transition: opacity .12s; }
+    & .recordstable-resize { position: absolute; top: 0; inset-inline-end: -3px; width: 9px; height: 100%; cursor: col-resize; z-index: 6; touch-action: none; }
+    & .recordstable-resize::after { content: ""; position: absolute; top: 0; inset-inline-start: 3px; width: 2px; height: 100%; background: ${c.bgBrandSolid}; opacity: 0; transition: opacity .12s; }
     & .recordstable-resize:hover::after, & .recordstable-resize[data-resizing]::after { opacity: 1; }
 
     /* add-column header */

package/dist/recordpage.css

@@ -22,8 +22,8 @@
 
     & .recordpage-details { width: 320px; flex-shrink: 0; overflow-y: auto; border-inline-end: 1px solid var(--border-subtle); padding: var(--space-3); }
     & .recordpage-resizer { position: relative; flex: 0 0 auto; width: 0; align-self: stretch; cursor: col-resize; z-index: 5; touch-action: none; }
-    & .recordpage-resizer::before { content: ""; position: absolute; top: 0; bottom: 0; left: -4px; width: 9px; }
-    & .recordpage-resizer::after { content: ""; position: absolute; top: 0; bottom: 0; left: -1px; width: 2px; background: transparent; transition: background-color .12s ease; }
+    & .recordpage-resizer::before { content: ""; position: absolute; top: 0; bottom: 0; inset-inline-start: -4px; width: 9px; }
+    & .recordpage-resizer::after { content: ""; position: absolute; top: 0; bottom: 0; inset-inline-start: -1px; width: 2px; background: transparent; transition: background-color .12s ease; }
     & .recordpage-resizer:hover::after, & .recordpage-resizer[data-active]::after { background: color-mix(in srgb, var(--bg-brand-solid) 55%, transparent); }
     & .recordpage-entity { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-1) var(--space-2); }
     & .recordpage-entity-logo { width: 32px; height: 32px; border-radius: 30%; flex-shrink: 0; object-fit: cover; background: var(--bg-raised); }

package/dist/recordstable.css

@@ -91,8 +91,8 @@
     & .recordstable-th[data-sorted="desc"] .recordstable-sort svg { transform: rotate(180deg); }
 
     /* column resize handle */
-    & .recordstable-resize { position: absolute; top: 0; right: -3px; width: 9px; height: 100%; cursor: col-resize; z-index: 6; touch-action: none; }
-    & .recordstable-resize::after { content: ""; position: absolute; top: 0; left: 3px; width: 2px; height: 100%; background: var(--bg-brand-solid); opacity: 0; transition: opacity .12s; }
+    & .recordstable-resize { position: absolute; top: 0; inset-inline-end: -3px; width: 9px; height: 100%; cursor: col-resize; z-index: 6; touch-action: none; }
+    & .recordstable-resize::after { content: ""; position: absolute; top: 0; inset-inline-start: 3px; width: 2px; height: 100%; background: var(--bg-brand-solid); opacity: 0; transition: opacity .12s; }
     & .recordstable-resize:hover::after, & .recordstable-resize[data-resizing]::after { opacity: 1; }
 
     /* add-column header */

package/dist/styles.css

@@ -1857,8 +1857,8 @@
     display: flex; height: 100%; width: 100%; overflow: hidden; background: var(--bg-surface); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
     & .appshell-side { position: relative; flex-shrink: 0; overflow: hidden; }
     & .appshell-side-inner { height: 100%; }
-    & .appshell-resize { position: absolute; top: 0; right: 0; width: 10px; height: 100%; cursor: col-resize; z-index: 5; touch-action: none; }
-    & .appshell-resize::after { content: ""; position: absolute; top: 0; right: 0; width: 1px; height: 100%; background: var(--border-subtle); transition: background-color .16s, height .16s; }
+    & .appshell-resize { position: absolute; top: 0; inset-inline-end: 0; width: 10px; height: 100%; cursor: col-resize; z-index: 5; touch-action: none; }
+    & .appshell-resize::after { content: ""; position: absolute; top: 0; inset-inline-end: 0; width: 1px; height: 100%; background: var(--border-subtle); transition: background-color .16s, height .16s; }
     & .appshell-resize:hover::after, & .appshell-resize[data-dragging]::after { width: 2px; background: var(--bg-brand-solid); }
     & .appshell-main { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }
     & .appshell-expand { position: absolute; top: var(--space-2); inset-inline-start: var(--space-2); z-index: 6; display: inline-flex; align-items: center; justify-content: center; width: var(--size-row); height: var(--size-row); padding: 0; border: none; border-radius: var(--radius-md); box-shadow: inset 0 0 0 1px var(--border-subtle); background: var(--bg-surface); color: var(--fg-muted); font-family: inherit; cursor: pointer; transition: background-color .12s; }
@@ -2213,8 +2213,8 @@
 
     & .recordpage-details { width: 320px; flex-shrink: 0; overflow-y: auto; border-inline-end: 1px solid var(--border-subtle); padding: var(--space-3); }
     & .recordpage-resizer { position: relative; flex: 0 0 auto; width: 0; align-self: stretch; cursor: col-resize; z-index: 5; touch-action: none; }
-    & .recordpage-resizer::before { content: ""; position: absolute; top: 0; bottom: 0; left: -4px; width: 9px; }
-    & .recordpage-resizer::after { content: ""; position: absolute; top: 0; bottom: 0; left: -1px; width: 2px; background: transparent; transition: background-color .12s ease; }
+    & .recordpage-resizer::before { content: ""; position: absolute; top: 0; bottom: 0; inset-inline-start: -4px; width: 9px; }
+    & .recordpage-resizer::after { content: ""; position: absolute; top: 0; bottom: 0; inset-inline-start: -1px; width: 2px; background: transparent; transition: background-color .12s ease; }
     & .recordpage-resizer:hover::after, & .recordpage-resizer[data-active]::after { background: color-mix(in srgb, var(--bg-brand-solid) 55%, transparent); }
     & .recordpage-entity { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-1) var(--space-2); }
     & .recordpage-entity-logo { width: 32px; height: 32px; border-radius: 30%; flex-shrink: 0; object-fit: cover; background: var(--bg-raised); }
@@ -2483,8 +2483,8 @@
     & .recordstable-th[data-sorted="desc"] .recordstable-sort svg { transform: rotate(180deg); }
 
     /* column resize handle */
-    & .recordstable-resize { position: absolute; top: 0; right: -3px; width: 9px; height: 100%; cursor: col-resize; z-index: 6; touch-action: none; }
-    & .recordstable-resize::after { content: ""; position: absolute; top: 0; left: 3px; width: 2px; height: 100%; background: var(--bg-brand-solid); opacity: 0; transition: opacity .12s; }
+    & .recordstable-resize { position: absolute; top: 0; inset-inline-end: -3px; width: 9px; height: 100%; cursor: col-resize; z-index: 6; touch-action: none; }
+    & .recordstable-resize::after { content: ""; position: absolute; top: 0; inset-inline-start: 3px; width: 2px; height: 100%; background: var(--bg-brand-solid); opacity: 0; transition: opacity .12s; }
     & .recordstable-resize:hover::after, & .recordstable-resize[data-resizing]::after { opacity: 1; }
 
     /* add-column header */

package/dist/types/core/direction.d.ts

@@ -0,0 +1,10 @@
+/**
+ * The nearest declared direction. The `dir` attribute is checked first because
+ * it is how a document says this in practice and it is readable without a
+ * layout, then computed style for a direction set purely in CSS.
+ *
+ * Shared so that a floating layer's edge choice and a drag handler's sign come
+ * from the same answer. They have to agree: mirroring one without the other is
+ * the half-conversion lesson 54 is about.
+ */
+export declare function isRtlElement(anchor: Element | null | undefined): boolean;

package/dist/types/core/index.d.ts

@@ -1,5 +1,6 @@
 export { cx } from "./cx";
 export { defineRecipe } from "./define";
+export { isRtlElement } from "./direction";
 export { type FloatingAlign, type PlaceFloatingOptions, placeFloating, } from "./place-floating";
 export { Primitive } from "./primitive";
 export { resolveRecipe } from "./resolve";

package/dist/types/core/place-floating.d.ts

@@ -17,4 +17,24 @@ export type PlacedFloating = {
     /** True when the layer was flipped above the trigger. */
     up: boolean;
 };
+/**
+ * Where a floating layer goes, in logical terms.
+ *
+ * `start` and `end` are inline edges, not left and right. `Menu` and `Popover`
+ * both took an `align` prop named that way and then wrote
+ * `align === "end" ? right : left` with no direction anywhere, so in an RTL
+ * document both were backwards and a layer near the viewport edge overflowed on
+ * the wrong side (#210).
+ *
+ * The direction is read from the anchor's computed style rather than from a
+ * prop, so an inherited `dir` on any ancestor is honoured without every call
+ * site having to thread it down.
+ *
+ * Physical `left`/`right` are deliberate in the OUTPUT: this positions a
+ * `position: fixed` layer against viewport coordinates, which are physical in
+ * both directions. What must be direction-aware is the CHOICE of edge, and
+ * that happens here, once. Converting the output to `inset-inline-start` would
+ * be the half-conversion #146 exists to prevent — the rect it is measured
+ * against would still be physical.
+ */
 export declare function placeFloating({ rect, align, gap, flipBelow, anchor, }: PlaceFloatingOptions): PlacedFloating;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crisp-ui-kit/crisp",
-  "version": "0.20.0",
+  "version": "0.20.2",
   "description": "A lean React design system, measured pixel-for-pixel from Attio.",
   "license": "MIT",
   "type": "module",