@crisp-ui-kit/crisp 0.19.1 → 0.20.1

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/components/menu/menu.js

@@ -41,6 +41,7 @@ exports.MenuLabel = MenuLabel;
 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 menu_recipe_1 = require("./menu.recipe");
 const menu_keyboard_1 = require("./menu-keyboard");
 const MenuContext = React.createContext(null);
@@ -71,15 +72,13 @@ function Menu({ trigger, children, align = "start", open: openProp, defaultOpen,
         const rect = triggerRef.current?.getBoundingClientRect();
         if (!rect)
             return;
-        const gap = 4;
-        const flipUp = window.innerHeight - rect.bottom < 280;
-        const style = flipUp
-            ? { bottom: window.innerHeight - rect.top + gap }
-            : { top: rect.bottom + gap };
-        if (align === "end")
-            style.right = window.innerWidth - rect.right;
-        else
-            style.left = rect.left;
+        const { style, up: flipUp } = (0, core_1.placeFloating)({
+            rect,
+            align,
+            gap: 4,
+            flipBelow: 280,
+            anchor: triggerRef.current,
+        });
         setUp(flipUp);
         setPos(style);
     };

package/dist/cjs/components/multiselect/multiselect.js

@@ -37,6 +37,7 @@ exports.MultiSelect = MultiSelect;
 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 select_1 = require("../select");
 const multiselect_recipe_1 = require("./multiselect.recipe");
 const TONES = [
@@ -92,15 +93,17 @@ function MultiSelect({ options, value: valueProp, defaultValue, onValueChange, p
             return;
         const rect = triggerRef.current?.getBoundingClientRect();
         if (rect) {
-            const flipUp = window.innerHeight - rect.bottom < 300;
-            setUp(flipUp);
-            setPos({
-                left: rect.left,
-                minWidth: rect.width,
-                ...(flipUp
-                    ? { bottom: window.innerHeight - rect.top + 4 }
-                    : { top: rect.bottom + 4 }),
+            // the popup can grow past the trigger (minWidth, not width), so which
+            // edge it is pinned to decides which way it grows — start, in whichever
+            // direction that is (#210)
+            const { style, up: flipUp } = (0, core_1.placeFloating)({
+                rect,
+                gap: 4,
+                flipBelow: 300,
+                anchor: triggerRef.current,
             });
+            setUp(flipUp);
+            setPos({ ...style, minWidth: rect.width });
         }
         setQuery("");
         setHighlight(0);

package/dist/cjs/components/popover/popover.js

@@ -36,6 +36,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Popover = Popover;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const React = __importStar(require("react"));
+const core_1 = require("../../core");
 const popover_recipe_1 = require("./popover.recipe");
 /**
  * A generic anchored popover — the Menu/Select surface holding arbitrary
@@ -58,16 +59,13 @@ function Popover({ trigger, children, align = "start", open: openProp, defaultOp
         const el = triggerRef.current;
         if (!el)
             return;
-        const rect = el.getBoundingClientRect();
-        const gap = 6;
-        const flipUp = window.innerHeight - rect.bottom < 280;
-        const style = flipUp
-            ? { bottom: window.innerHeight - rect.top + gap }
-            : { top: rect.bottom + gap };
-        if (align === "end")
-            style.right = window.innerWidth - rect.right;
-        else
-            style.left = rect.left;
+        const { style, up: flipUp } = (0, core_1.placeFloating)({
+            rect: el.getBoundingClientRect(),
+            align,
+            gap: 6,
+            flipBelow: 280,
+            anchor: el,
+        });
         setUp(flipUp);
         setPos(style);
     };

package/dist/cjs/components/select/select.js

@@ -37,6 +37,7 @@ exports.Select = Select;
 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 listbox_keyboard_1 = require("./listbox-keyboard");
 const select_recipe_1 = require("./select.recipe");
 function optionText(o) {
@@ -87,15 +88,17 @@ function Select({ options, value, defaultValue, onValueChange, placeholder = "Se
             return;
         const rect = triggerRef.current?.getBoundingClientRect();
         if (rect) {
-            const flipUp = window.innerHeight - rect.bottom < 260;
-            setUp(flipUp);
-            setPos({
-                left: rect.left,
-                minWidth: rect.width,
-                ...(flipUp
-                    ? { bottom: window.innerHeight - rect.top + 4 }
-                    : { top: rect.bottom + 4 }),
+            // the popup can grow past the trigger (minWidth, not width), so which
+            // edge it is pinned to decides which way it grows — start, in whichever
+            // direction that is (#210)
+            const { style, up: flipUp } = (0, core_1.placeFloating)({
+                rect,
+                gap: 4,
+                flipBelow: 260,
+                anchor: triggerRef.current,
             });
+            setUp(flipUp);
+            setPos({ ...style, minWidth: rect.width });
         }
         setQuery("");
         const sel = options.findIndex((o) => o.value === selected);

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,15 @@ 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.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");
 Object.defineProperty(exports, "Primitive", { enumerable: true, get: function () { return primitive_1.Primitive; } });
 var resolve_1 = require("./resolve");

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

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.placeFloating = placeFloating;
+const direction_1 = require("./direction");
+/**
+ * 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.
+ */
+function placeFloating({ rect, align = "start", gap, flipBelow, anchor, }) {
+    const rtl = (0, direction_1.isRtlElement)(anchor);
+    const up = window.innerHeight - rect.bottom < flipBelow;
+    const style = up
+        ? { bottom: window.innerHeight - rect.top + gap }
+        : { top: rect.bottom + gap };
+    // start is the left edge in LTR and the right edge in RTL; end is the other
+    const toRight = align === "end" ? !rtl : rtl;
+    if (toRight)
+        style.right = window.innerWidth - rect.right;
+    else
+        style.left = rect.left;
+    return { style, up };
+}

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/esm/components/menu/menu.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Check } from "lucide-react";
 import * as React from "react";
+import { placeFloating } from "../../core/index.js";
 import { menuRecipe } from "./menu.recipe.js";
 import { useMenuKeyboard } from "./menu-keyboard.js";
 const MenuContext = React.createContext(null);
@@ -31,15 +32,13 @@ export function Menu({ trigger, children, align = "start", open: openProp, defau
         const rect = triggerRef.current?.getBoundingClientRect();
         if (!rect)
             return;
-        const gap = 4;
-        const flipUp = window.innerHeight - rect.bottom < 280;
-        const style = flipUp
-            ? { bottom: window.innerHeight - rect.top + gap }
-            : { top: rect.bottom + gap };
-        if (align === "end")
-            style.right = window.innerWidth - rect.right;
-        else
-            style.left = rect.left;
+        const { style, up: flipUp } = placeFloating({
+            rect,
+            align,
+            gap: 4,
+            flipBelow: 280,
+            anchor: triggerRef.current,
+        });
         setUp(flipUp);
         setPos(style);
     };

package/dist/esm/components/multiselect/multiselect.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Check, ChevronDown, Search } from "lucide-react";
 import * as React from "react";
+import { placeFloating } from "../../core/index.js";
 import { useListboxKeyboard } from "../select/index.js";
 import { multiselectRecipe } from "./multiselect.recipe.js";
 const TONES = [
@@ -56,15 +57,17 @@ export function MultiSelect({ options, value: valueProp, defaultValue, onValueCh
             return;
         const rect = triggerRef.current?.getBoundingClientRect();
         if (rect) {
-            const flipUp = window.innerHeight - rect.bottom < 300;
-            setUp(flipUp);
-            setPos({
-                left: rect.left,
-                minWidth: rect.width,
-                ...(flipUp
-                    ? { bottom: window.innerHeight - rect.top + 4 }
-                    : { top: rect.bottom + 4 }),
+            // the popup can grow past the trigger (minWidth, not width), so which
+            // edge it is pinned to decides which way it grows — start, in whichever
+            // direction that is (#210)
+            const { style, up: flipUp } = placeFloating({
+                rect,
+                gap: 4,
+                flipBelow: 300,
+                anchor: triggerRef.current,
             });
+            setUp(flipUp);
+            setPos({ ...style, minWidth: rect.width });
         }
         setQuery("");
         setHighlight(0);

package/dist/esm/components/popover/popover.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
+import { placeFloating } from "../../core/index.js";
 import { popoverRecipe } from "./popover.recipe.js";
 /**
  * A generic anchored popover — the Menu/Select surface holding arbitrary
@@ -22,16 +23,13 @@ export function Popover({ trigger, children, align = "start", open: openProp, de
         const el = triggerRef.current;
         if (!el)
             return;
-        const rect = el.getBoundingClientRect();
-        const gap = 6;
-        const flipUp = window.innerHeight - rect.bottom < 280;
-        const style = flipUp
-            ? { bottom: window.innerHeight - rect.top + gap }
-            : { top: rect.bottom + gap };
-        if (align === "end")
-            style.right = window.innerWidth - rect.right;
-        else
-            style.left = rect.left;
+        const { style, up: flipUp } = placeFloating({
+            rect: el.getBoundingClientRect(),
+            align,
+            gap: 6,
+            flipBelow: 280,
+            anchor: el,
+        });
         setUp(flipUp);
         setPos(style);
     };

package/dist/esm/components/select/select.js

@@ -1,6 +1,7 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Check, ChevronDown, Search } from "lucide-react";
 import * as React from "react";
+import { placeFloating } from "../../core/index.js";
 import { useListboxKeyboard } from "./listbox-keyboard.js";
 import { selectRecipe } from "./select.recipe.js";
 function optionText(o) {
@@ -51,15 +52,17 @@ export function Select({ options, value, defaultValue, onValueChange, placeholde
             return;
         const rect = triggerRef.current?.getBoundingClientRect();
         if (rect) {
-            const flipUp = window.innerHeight - rect.bottom < 260;
-            setUp(flipUp);
-            setPos({
-                left: rect.left,
-                minWidth: rect.width,
-                ...(flipUp
-                    ? { bottom: window.innerHeight - rect.top + 4 }
-                    : { top: rect.bottom + 4 }),
+            // the popup can grow past the trigger (minWidth, not width), so which
+            // edge it is pinned to decides which way it grows — start, in whichever
+            // direction that is (#210)
+            const { style, up: flipUp } = placeFloating({
+                rect,
+                gap: 4,
+                flipBelow: 260,
+                anchor: triggerRef.current,
             });
+            setUp(flipUp);
+            setPos({ ...style, minWidth: rect.width });
         }
         setQuery("");
         const sel = options.findIndex((o) => o.value === selected);

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,7 @@
 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";
 export * from "./rtl.js";

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

@@ -0,0 +1,35 @@
+import { isRtlElement } from "./direction.js";
+/**
+ * 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 function placeFloating({ rect, align = "start", gap, flipBelow, anchor, }) {
+    const rtl = isRtlElement(anchor);
+    const up = window.innerHeight - rect.bottom < flipBelow;
+    const style = up
+        ? { bottom: window.innerHeight - rect.top + gap }
+        : { top: rect.bottom + gap };
+    // start is the left edge in LTR and the right edge in RTL; end is the other
+    const toRight = align === "end" ? !rtl : rtl;
+    if (toRight)
+        style.right = window.innerWidth - rect.right;
+    else
+        style.left = rect.left;
+    return { style, up };
+}

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/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/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); }

package/dist/types/components/menu/menu.d.ts

@@ -3,7 +3,8 @@ export type MenuProps = {
     /** The element that opens the menu (an icon button, etc.). */
     trigger: React.ReactElement;
     children: React.ReactNode;
-    /** Align the menu to the start (left) or end (right) of the trigger. */
+    /** Align the menu to the trigger's inline `start` or `end` edge — the left
+     *  edge in an LTR document, the right one in RTL. */
     align?: "start" | "end";
     /** Controlled open state. Omit to let Menu manage it (see defaultOpen). */
     open?: boolean;

package/dist/types/components/popover/popover.d.ts

@@ -4,7 +4,8 @@ export type PopoverProps = {
     trigger: React.ReactElement;
     /** Popover body. */
     children: React.ReactNode;
-    /** Align the popover to the trigger's left (`start`) or right (`end`) edge. */
+    /** Align the popover to the trigger's inline `start` or `end` edge — the
+     *  left edge in an LTR document, the right one in RTL. */
     align?: "start" | "end";
     /** Controlled open state. Omit to let the popover manage it. */
     /** Controlled open state. Omit to let Popover manage it (see defaultOpen). */

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,7 @@
 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";
 export * from "./rtl";

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

@@ -0,0 +1,40 @@
+import type * as React from "react";
+export type FloatingAlign = "start" | "end";
+export type PlaceFloatingOptions = {
+    /** The trigger's box, from `getBoundingClientRect()`. */
+    rect: DOMRect;
+    /** Which of the trigger's INLINE edges the layer lines up with. */
+    align?: FloatingAlign;
+    /** Distance between the trigger and the layer. */
+    gap: number;
+    /** Flip above the trigger when there is less room below than this. */
+    flipBelow: number;
+    /** The element the layer belongs to; its computed direction decides sides. */
+    anchor?: Element | null;
+};
+export type PlacedFloating = {
+    style: React.CSSProperties;
+    /** 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.19.1",
+  "version": "0.20.1",
   "description": "A lean React design system, measured pixel-for-pixel from Attio.",
   "license": "MIT",
   "type": "module",