@crisp-ui-kit/crisp 0.7.3 → 0.7.5

package/dist/cjs/components/avatar/avatar.recipe.js

@@ -31,12 +31,5 @@ const config = (0, core_1.defineRecipe)({
 });
 exports.avatarRecipe = Object.assign((0, core_1.resolveRecipe)(config), {
     config,
-    meta: {
-        lg: {
-            height: "24px",
-            fontSize: "12px",
-            fontWeight: "600",
-        },
-    },
 });
 exports.default = config;

package/dist/cjs/components/badge/badge.recipe.js

@@ -56,13 +56,5 @@ const config = (0, core_1.defineRecipe)({
 });
 exports.badgeRecipe = Object.assign((0, core_1.resolveRecipe)(config), {
     config,
-    meta: {
-        medium: {
-            height: "20px",
-            borderRadius: "6px",
-            fontSize: "12px",
-            fontWeight: "500",
-        },
-    },
 });
 exports.default = config;

package/dist/cjs/components/button/button.recipe.js

@@ -44,15 +44,5 @@ const config = (0, core_1.defineRecipe)({
 });
 exports.buttonRecipe = Object.assign((0, core_1.resolveRecipe)(config), {
     config,
-    meta: {
-        primary: {
-            height: "28px",
-            borderRadius: "8px",
-            fontWeight: "500",
-            fontSize: "14px",
-            background: "rgb(38, 109, 240)",
-            color: "rgb(255, 255, 255)",
-        },
-    },
 });
 exports.default = config;

package/dist/cjs/components/checkbox/checkbox.recipe.js

@@ -24,11 +24,5 @@ const config = (0, core_1.defineRecipe)({
 });
 exports.checkboxRecipe = Object.assign((0, core_1.resolveRecipe)(config), {
     config,
-    meta: {
-        box: {
-            size: "16px",
-            borderRadius: "6px",
-        },
-    },
 });
 exports.default = config;

package/dist/cjs/components/datatable/datatable.js

@@ -107,16 +107,30 @@ function formatCell(type, v, symbol) {
     return asText(v);
 }
 /** Built-in typed-cell renderer (used when a column has no custom `render`). */
-function renderTyped(col, value, avatarTone) {
+// `value` is always the RAW cell value and `display` the caller's `format`
+// output, if any. They are separate arguments on purpose: the entity and tags
+// branches inspect the value's SHAPE (object / array), so handing them a
+// formatted string used to make them fall through to their empty state and
+// silently drop the cell's data. Each branch decides for itself where a
+// display string belongs -- as an entity's name, a status' label -- while the
+// raw value keeps driving structure and tone.
+function renderTyped(col, value, avatarTone, display) {
     const empty = (0, jsx_runtime_1.jsx)("span", { className: "datatable-muted", children: "\u2014" });
     switch (col.type) {
         case "entity": {
-            const e = (typeof value === "object" && value ? value : { name: asText(value) });
+            const raw = (typeof value === "object" && value ? value : { name: asText(value) });
+            // a formatted string relabels the entity; its avatar and its hashed tone
+            // still come from the real value
+            const e = display ? { ...raw, name: display } : raw;
             if (!e.name)
                 return empty;
-            return ((0, jsx_runtime_1.jsxs)("span", { className: "datatable-entity", children: [(0, jsx_runtime_1.jsx)("span", { className: "datatable-avatar", "data-tone": avatarTone === "hashed" ? toneFor(e.name) : undefined, children: e.avatar ? ((0, jsx_runtime_1.jsx)("img", { src: e.avatar, alt: "" })) : (initials(e.name).slice(0, 2)) }), (0, jsx_runtime_1.jsx)("span", { className: "datatable-entity-name", children: e.name })] }));
+            return ((0, jsx_runtime_1.jsxs)("span", { className: "datatable-entity", children: [(0, jsx_runtime_1.jsx)("span", { className: "datatable-avatar", "data-tone": avatarTone === "hashed" ? toneFor(raw.name) : undefined, children: e.avatar ? ((0, jsx_runtime_1.jsx)("img", { src: e.avatar, alt: "" })) : (initials(e.name).slice(0, 2)) }), (0, jsx_runtime_1.jsx)("span", { className: "datatable-entity-name", children: e.name })] }));
         }
         case "tags": {
+            // asking for a format on a tag column means "render it your way" -- show
+            // that string rather than trying to split it back into chips
+            if (display)
+                return display;
             const tags = Array.isArray(value) ? value : [];
             if (!tags.length)
                 return empty;
@@ -126,10 +140,12 @@ function renderTyped(col, value, avatarTone) {
             const s = asText(value);
             if (!s)
                 return empty;
-            return ((0, jsx_runtime_1.jsx)("span", { className: "datatable-tag", "data-tone": col.tones?.[s] ?? toneFor(s), children: s }));
+            // tone is looked up by the RAW status, so formatting the label (casing,
+            // translation) can never silently repaint the chip
+            return ((0, jsx_runtime_1.jsx)("span", { className: "datatable-tag", "data-tone": col.tones?.[s] ?? toneFor(s), children: display || s }));
         }
         default: {
-            const text = formatCell(col.type, value, col.symbol);
+            const text = display || formatCell(col.type, value, col.symbol);
             const isNum = col.type === "number" || col.type === "currency";
             if (!text)
                 return empty;
@@ -324,7 +340,8 @@ function DataTable({ columns: columnsProp, data, selectable = false, selectedIds
     }
     /**
      * Spreadsheet keyboard model, ported from RecordsTable: arrows move the
-     * selected cell, Enter opens its editor, Escape clears, and Cmd/Ctrl+C
+     * selected cell, Enter opens its editor (or, on a non-editable cell,
+     * activates the row via `onRowClick`), Escape clears, and Cmd/Ctrl+C
      * copies the cell's RENDERED text (what the user sees, not the raw value).
      */
     function onGridKeyDown(e) {
@@ -361,6 +378,10 @@ function DataTable({ columns: columnsProp, data, selectable = false, selectedIds
                 e.preventDefault();
                 setEditing({ id: selCell.id, key: selCell.key });
             }
+            else if (onRowClick) {
+                e.preventDefault();
+                onRowClick(rows[r]);
+            }
             return;
         }
         else
@@ -502,7 +523,7 @@ function DataTable({ columns: columnsProp, data, selectable = false, selectedIds
                                                     }
                                                 }, children: col.render
                                                     ? col.render(value, row)
-                                                    : renderTyped(col, col.format ? col.format(value, row) : value, avatarTone) }, col.key));
+                                                    : renderTyped(col, value, avatarTone, col.format?.(value, row)) }, col.key));
                                         })] }, row.id)))] }, group ?? "__ungrouped")))) }), (hasSummary || onAddRow) && ((0, jsx_runtime_1.jsxs)(table_1.TableFooter, { children: [hasSummary && ((0, jsx_runtime_1.jsxs)(table_1.TableRow, { children: [showGrip && (0, jsx_runtime_1.jsx)(table_1.TableCell, { ...stickyCol(-2) }), selectable && (0, jsx_runtime_1.jsx)(table_1.TableCell, { ...stickyCol(-1) }), columns.map((col, i) => ((0, jsx_runtime_1.jsx)(table_1.TableCell, { align: alignFor(col), ...stickyCol(i), children: col.summary ? col.summary(rows) : null }, col.key)))] })), onAddRow && ((0, jsx_runtime_1.jsx)(table_1.TableRow, { children: (0, jsx_runtime_1.jsx)(table_1.TableCell, { className: "datatable-addcell", colSpan: totalCols, children: (0, jsx_runtime_1.jsxs)("button", { type: "button", className: "datatable-addrow", onClick: onAddRow, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 15, strokeWidth: 1.75, "aria-hidden": "true" }), addRowLabel] }) }) }))] }))] })] }));
 }
 DataTable.displayName = "DataTable";

package/dist/cjs/components/input/input.recipe.js

@@ -54,6 +54,5 @@ const config = (0, core_1.defineRecipe)({
 });
 exports.inputRecipe = Object.assign((0, core_1.resolveRecipe)(config), {
     config,
-    meta: { medium: { height: "32px", borderRadius: "8px", fontSize: "14px" } },
 });
 exports.default = config;

package/dist/cjs/components/kbd/kbd.recipe.js

@@ -12,12 +12,5 @@ const config = (0, core_1.defineRecipe)({
 });
 exports.kbdRecipe = Object.assign((0, core_1.resolveRecipe)(config), {
     config,
-    meta: {
-        chip: {
-            height: "20px",
-            borderRadius: "6px",
-            fontSize: "11px",
-        },
-    },
 });
 exports.default = config;

package/dist/cjs/components/switch/switch.recipe.js

@@ -24,6 +24,5 @@ const config = (0, core_1.defineRecipe)({
 });
 exports.switchRecipe = Object.assign((0, core_1.resolveRecipe)(config), {
     config,
-    meta: { track: { width: "24px", height: "16px" }, thumb: { size: "12px" } },
 });
 exports.default = config;

package/dist/cjs/components/wheelpicker/wheelpicker.recipe.js

@@ -90,6 +90,5 @@ const config = (0, core_1.defineRecipe)({
 });
 exports.wheelpickerRecipe = Object.assign((0, core_1.resolveRecipe)(config), {
     config,
-    meta: { medium: { height: "220px", itemHeight: "44px" } },
 });
 exports.default = config;

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

@@ -25,6 +25,5 @@ const config = (0, core_1.defineRecipe)({
 });
 exports.appshellRecipe = Object.assign((0, core_1.resolveRecipe)(config), {
     config,
-    meta: { sidebar: { defaultWidth: "275px" } },
 });
 exports.default = config;

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

@@ -37,11 +37,5 @@ const config = (0, core_1.defineRecipe)({
 });
 exports.commandRecipe = Object.assign((0, core_1.resolveRecipe)(config), {
     config,
-    meta: {
-        content: {
-            maxWidth: "720px",
-            borderRadius: "16px",
-        },
-    },
 });
 exports.default = config;

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

@@ -24,13 +24,5 @@ const config = (0, core_1.defineRecipe)({
 });
 exports.navitemRecipe = Object.assign((0, core_1.resolveRecipe)(config), {
     config,
-    meta: {
-        row: {
-            height: "28px",
-            borderRadius: "9px",
-            fontSize: "14px",
-            fontWeight: "500",
-        },
-    },
 });
 exports.default = config;

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

@@ -46,6 +46,5 @@ const config = (0, core_1.defineRecipe)({
 });
 exports.recordpanelRecipe = Object.assign((0, core_1.resolveRecipe)(config), {
     config,
-    meta: { panel: { width: "420px" } },
 });
 exports.default = config;

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

@@ -97,11 +97,21 @@ ${(0, tabletoolbar_chrome_1.toolbarChromeBody)("recordstable")}
     & .recordstable-col-check { width: 40px; min-width: 40px; padding: 0; }
     & .recordstable-check-inner { display: flex; align-items: center; justify-content: center; height: 100%; }
     & .recordstable-col-check, & .recordstable-col-entity { position: sticky; z-index: 3; background: ${tokens_1.contract.bgSurface}; }
-    & .recordstable-col-check { left: 0; }
-    & .recordstable-col-entity { left: 40px; clip-path: inset(0 -38px 0 0); transition: box-shadow .2s ease; }
+    /* The sticky pin is a LOGICAL offset: with physical \`left\` these columns
+       were not pinned at all under RTL -- scrolled, they left the viewport
+       entirely (measured: viewport 13..773, check column at x=1333). Nothing in
+       JS measures these, so converting them is safe; the two properties below
+       that have no logical form get an explicit RTL rule rather than being
+       left to point the wrong way. */
+    & .recordstable-col-check { inset-inline-start: 0; }
+    & .recordstable-col-entity { inset-inline-start: 40px; clip-path: inset(0 -38px 0 0); transition: box-shadow .2s ease; }
+    [dir="rtl"] & .recordstable-col-entity { clip-path: inset(0 0 0 -38px); }
     & thead .recordstable-col-check, & thead .recordstable-col-entity { z-index: 4; }
     /* soft shadow on the sticky column edge once the grid is scrolled horizontally */
     & .recordstable-scroll[data-scrolled] .recordstable-col-entity { box-shadow: 6px 0 16px 4px rgba(0,0,0,0.12); }
+    /* box-shadow has no logical form either: the bleed follows the scrolled
+       content, which is the opposite side under RTL. */
+    [dir="rtl"] & .recordstable-scroll[data-scrolled] .recordstable-col-entity { box-shadow: -6px 0 16px 4px rgba(0,0,0,0.12); }
     /* AI-enriched values carry a purple wash. Measured from Attio:
        a full-bleed overlay at #9b69ff 4% (== bgPurple), composited OVER
        whatever row-state background the cell already has, which is why it
@@ -142,11 +152,5 @@ ${(0, tabletoolbar_chrome_1.toolbarChromeBody)("recordstable")}
 });
 exports.recordstableRecipe = Object.assign((0, core_1.resolveRecipe)(config), {
     config,
-    meta: {
-        row: {
-            height: "36px",
-            gridLine: "1px",
-        },
-    },
 });
 exports.default = config;

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

@@ -37,10 +37,5 @@ const config = (0, core_1.defineRecipe)({
 });
 exports.sidebarRecipe = Object.assign((0, core_1.resolveRecipe)(config), {
     config,
-    meta: {
-        container: {
-            width: "275px",
-        },
-    },
 });
 exports.default = config;

package/dist/esm/components/avatar/avatar.recipe.js

@@ -28,12 +28,5 @@ const config = defineRecipe({
 });
 export const avatarRecipe = Object.assign(resolveRecipe(config), {
     config,
-    meta: {
-        lg: {
-            height: "24px",
-            fontSize: "12px",
-            fontWeight: "600",
-        },
-    },
 });
 export default config;

package/dist/esm/components/badge/badge.recipe.js

@@ -53,13 +53,5 @@ const config = defineRecipe({
 });
 export const badgeRecipe = Object.assign(resolveRecipe(config), {
     config,
-    meta: {
-        medium: {
-            height: "20px",
-            borderRadius: "6px",
-            fontSize: "12px",
-            fontWeight: "500",
-        },
-    },
 });
 export default config;

package/dist/esm/components/button/button.recipe.js

@@ -41,15 +41,5 @@ const config = defineRecipe({
 });
 export const buttonRecipe = Object.assign(resolveRecipe(config), {
     config,
-    meta: {
-        primary: {
-            height: "28px",
-            borderRadius: "8px",
-            fontWeight: "500",
-            fontSize: "14px",
-            background: "rgb(38, 109, 240)",
-            color: "rgb(255, 255, 255)",
-        },
-    },
 });
 export default config;

package/dist/esm/components/checkbox/checkbox.recipe.js

@@ -21,11 +21,5 @@ const config = defineRecipe({
 });
 export const checkboxRecipe = Object.assign(resolveRecipe(config), {
     config,
-    meta: {
-        box: {
-            size: "16px",
-            borderRadius: "6px",
-        },
-    },
 });
 export default config;

package/dist/esm/components/datatable/datatable.js

@@ -71,16 +71,30 @@ function formatCell(type, v, symbol) {
     return asText(v);
 }
 /** Built-in typed-cell renderer (used when a column has no custom `render`). */
-function renderTyped(col, value, avatarTone) {
+// `value` is always the RAW cell value and `display` the caller's `format`
+// output, if any. They are separate arguments on purpose: the entity and tags
+// branches inspect the value's SHAPE (object / array), so handing them a
+// formatted string used to make them fall through to their empty state and
+// silently drop the cell's data. Each branch decides for itself where a
+// display string belongs -- as an entity's name, a status' label -- while the
+// raw value keeps driving structure and tone.
+function renderTyped(col, value, avatarTone, display) {
     const empty = _jsx("span", { className: "datatable-muted", children: "\u2014" });
     switch (col.type) {
         case "entity": {
-            const e = (typeof value === "object" && value ? value : { name: asText(value) });
+            const raw = (typeof value === "object" && value ? value : { name: asText(value) });
+            // a formatted string relabels the entity; its avatar and its hashed tone
+            // still come from the real value
+            const e = display ? { ...raw, name: display } : raw;
             if (!e.name)
                 return empty;
-            return (_jsxs("span", { className: "datatable-entity", children: [_jsx("span", { className: "datatable-avatar", "data-tone": avatarTone === "hashed" ? toneFor(e.name) : undefined, children: e.avatar ? (_jsx("img", { src: e.avatar, alt: "" })) : (initials(e.name).slice(0, 2)) }), _jsx("span", { className: "datatable-entity-name", children: e.name })] }));
+            return (_jsxs("span", { className: "datatable-entity", children: [_jsx("span", { className: "datatable-avatar", "data-tone": avatarTone === "hashed" ? toneFor(raw.name) : undefined, children: e.avatar ? (_jsx("img", { src: e.avatar, alt: "" })) : (initials(e.name).slice(0, 2)) }), _jsx("span", { className: "datatable-entity-name", children: e.name })] }));
         }
         case "tags": {
+            // asking for a format on a tag column means "render it your way" -- show
+            // that string rather than trying to split it back into chips
+            if (display)
+                return display;
             const tags = Array.isArray(value) ? value : [];
             if (!tags.length)
                 return empty;
@@ -90,10 +104,12 @@ function renderTyped(col, value, avatarTone) {
             const s = asText(value);
             if (!s)
                 return empty;
-            return (_jsx("span", { className: "datatable-tag", "data-tone": col.tones?.[s] ?? toneFor(s), children: s }));
+            // tone is looked up by the RAW status, so formatting the label (casing,
+            // translation) can never silently repaint the chip
+            return (_jsx("span", { className: "datatable-tag", "data-tone": col.tones?.[s] ?? toneFor(s), children: display || s }));
         }
         default: {
-            const text = formatCell(col.type, value, col.symbol);
+            const text = display || formatCell(col.type, value, col.symbol);
             const isNum = col.type === "number" || col.type === "currency";
             if (!text)
                 return empty;
@@ -288,7 +304,8 @@ export function DataTable({ columns: columnsProp, data, selectable = false, sele
     }
     /**
      * Spreadsheet keyboard model, ported from RecordsTable: arrows move the
-     * selected cell, Enter opens its editor, Escape clears, and Cmd/Ctrl+C
+     * selected cell, Enter opens its editor (or, on a non-editable cell,
+     * activates the row via `onRowClick`), Escape clears, and Cmd/Ctrl+C
      * copies the cell's RENDERED text (what the user sees, not the raw value).
      */
     function onGridKeyDown(e) {
@@ -325,6 +342,10 @@ export function DataTable({ columns: columnsProp, data, selectable = false, sele
                 e.preventDefault();
                 setEditing({ id: selCell.id, key: selCell.key });
             }
+            else if (onRowClick) {
+                e.preventDefault();
+                onRowClick(rows[r]);
+            }
             return;
         }
         else
@@ -466,7 +487,7 @@ export function DataTable({ columns: columnsProp, data, selectable = false, sele
                                                     }
                                                 }, children: col.render
                                                     ? col.render(value, row)
-                                                    : renderTyped(col, col.format ? col.format(value, row) : value, avatarTone) }, col.key));
+                                                    : renderTyped(col, value, avatarTone, col.format?.(value, row)) }, col.key));
                                         })] }, row.id)))] }, group ?? "__ungrouped")))) }), (hasSummary || onAddRow) && (_jsxs(TableFooter, { children: [hasSummary && (_jsxs(TableRow, { children: [showGrip && _jsx(TableCell, { ...stickyCol(-2) }), selectable && _jsx(TableCell, { ...stickyCol(-1) }), columns.map((col, i) => (_jsx(TableCell, { align: alignFor(col), ...stickyCol(i), children: col.summary ? col.summary(rows) : null }, col.key)))] })), onAddRow && (_jsx(TableRow, { children: _jsx(TableCell, { className: "datatable-addcell", colSpan: totalCols, children: _jsxs("button", { type: "button", className: "datatable-addrow", onClick: onAddRow, children: [_jsx(Plus, { size: 15, strokeWidth: 1.75, "aria-hidden": "true" }), addRowLabel] }) }) }))] }))] })] }));
 }
 DataTable.displayName = "DataTable";

package/dist/esm/components/input/input.recipe.js

@@ -51,6 +51,5 @@ const config = defineRecipe({
 });
 export const inputRecipe = Object.assign(resolveRecipe(config), {
     config,
-    meta: { medium: { height: "32px", borderRadius: "8px", fontSize: "14px" } },
 });
 export default config;

package/dist/esm/components/kbd/kbd.recipe.js

@@ -9,12 +9,5 @@ const config = defineRecipe({
 });
 export const kbdRecipe = Object.assign(resolveRecipe(config), {
     config,
-    meta: {
-        chip: {
-            height: "20px",
-            borderRadius: "6px",
-            fontSize: "11px",
-        },
-    },
 });
 export default config;

package/dist/esm/components/switch/switch.recipe.js

@@ -21,6 +21,5 @@ const config = defineRecipe({
 });
 export const switchRecipe = Object.assign(resolveRecipe(config), {
     config,
-    meta: { track: { width: "24px", height: "16px" }, thumb: { size: "12px" } },
 });
 export default config;

package/dist/esm/components/wheelpicker/wheelpicker.recipe.js

@@ -87,6 +87,5 @@ const config = defineRecipe({
 });
 export const wheelpickerRecipe = Object.assign(resolveRecipe(config), {
     config,
-    meta: { medium: { height: "220px", itemHeight: "44px" } },
 });
 export default config;

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

@@ -22,6 +22,5 @@ const config = defineRecipe({
 });
 export const appshellRecipe = Object.assign(resolveRecipe(config), {
     config,
-    meta: { sidebar: { defaultWidth: "275px" } },
 });
 export default config;

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

@@ -34,11 +34,5 @@ const config = defineRecipe({
 });
 export const commandRecipe = Object.assign(resolveRecipe(config), {
     config,
-    meta: {
-        content: {
-            maxWidth: "720px",
-            borderRadius: "16px",
-        },
-    },
 });
 export default config;

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

@@ -21,13 +21,5 @@ const config = defineRecipe({
 });
 export const navitemRecipe = Object.assign(resolveRecipe(config), {
     config,
-    meta: {
-        row: {
-            height: "28px",
-            borderRadius: "9px",
-            fontSize: "14px",
-            fontWeight: "500",
-        },
-    },
 });
 export default config;

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

@@ -43,6 +43,5 @@ const config = defineRecipe({
 });
 export const recordpanelRecipe = Object.assign(resolveRecipe(config), {
     config,
-    meta: { panel: { width: "420px" } },
 });
 export default config;

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

@@ -94,11 +94,21 @@ ${toolbarChromeBody("recordstable")}
     & .recordstable-col-check { width: 40px; min-width: 40px; padding: 0; }
     & .recordstable-check-inner { display: flex; align-items: center; justify-content: center; height: 100%; }
     & .recordstable-col-check, & .recordstable-col-entity { position: sticky; z-index: 3; background: ${c.bgSurface}; }
-    & .recordstable-col-check { left: 0; }
-    & .recordstable-col-entity { left: 40px; clip-path: inset(0 -38px 0 0); transition: box-shadow .2s ease; }
+    /* The sticky pin is a LOGICAL offset: with physical \`left\` these columns
+       were not pinned at all under RTL -- scrolled, they left the viewport
+       entirely (measured: viewport 13..773, check column at x=1333). Nothing in
+       JS measures these, so converting them is safe; the two properties below
+       that have no logical form get an explicit RTL rule rather than being
+       left to point the wrong way. */
+    & .recordstable-col-check { inset-inline-start: 0; }
+    & .recordstable-col-entity { inset-inline-start: 40px; clip-path: inset(0 -38px 0 0); transition: box-shadow .2s ease; }
+    [dir="rtl"] & .recordstable-col-entity { clip-path: inset(0 0 0 -38px); }
     & thead .recordstable-col-check, & thead .recordstable-col-entity { z-index: 4; }
     /* soft shadow on the sticky column edge once the grid is scrolled horizontally */
     & .recordstable-scroll[data-scrolled] .recordstable-col-entity { box-shadow: 6px 0 16px 4px rgba(0,0,0,0.12); }
+    /* box-shadow has no logical form either: the bleed follows the scrolled
+       content, which is the opposite side under RTL. */
+    [dir="rtl"] & .recordstable-scroll[data-scrolled] .recordstable-col-entity { box-shadow: -6px 0 16px 4px rgba(0,0,0,0.12); }
     /* AI-enriched values carry a purple wash. Measured from Attio:
        a full-bleed overlay at #9b69ff 4% (== bgPurple), composited OVER
        whatever row-state background the cell already has, which is why it
@@ -139,11 +149,5 @@ ${toolbarChromeBody("recordstable")}
 });
 export const recordstableRecipe = Object.assign(resolveRecipe(config), {
     config,
-    meta: {
-        row: {
-            height: "36px",
-            gridLine: "1px",
-        },
-    },
 });
 export default config;

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

@@ -34,10 +34,5 @@ const config = defineRecipe({
 });
 export const sidebarRecipe = Object.assign(resolveRecipe(config), {
     config,
-    meta: {
-        container: {
-            width: "275px",
-        },
-    },
 });
 export default config;

package/dist/recordstable.css

@@ -149,11 +149,21 @@
     & .recordstable-col-check { width: 40px; min-width: 40px; padding: 0; }
     & .recordstable-check-inner { display: flex; align-items: center; justify-content: center; height: 100%; }
     & .recordstable-col-check, & .recordstable-col-entity { position: sticky; z-index: 3; background: var(--bg-surface); }
-    & .recordstable-col-check { left: 0; }
-    & .recordstable-col-entity { left: 40px; clip-path: inset(0 -38px 0 0); transition: box-shadow .2s ease; }
+    /* The sticky pin is a LOGICAL offset: with physical `left` these columns
+       were not pinned at all under RTL -- scrolled, they left the viewport
+       entirely (measured: viewport 13..773, check column at x=1333). Nothing in
+       JS measures these, so converting them is safe; the two properties below
+       that have no logical form get an explicit RTL rule rather than being
+       left to point the wrong way. */
+    & .recordstable-col-check { inset-inline-start: 0; }
+    & .recordstable-col-entity { inset-inline-start: 40px; clip-path: inset(0 -38px 0 0); transition: box-shadow .2s ease; }
+    [dir="rtl"] & .recordstable-col-entity { clip-path: inset(0 0 0 -38px); }
     & thead .recordstable-col-check, & thead .recordstable-col-entity { z-index: 4; }
     /* soft shadow on the sticky column edge once the grid is scrolled horizontally */
     & .recordstable-scroll[data-scrolled] .recordstable-col-entity { box-shadow: 6px 0 16px 4px rgba(0,0,0,0.12); }
+    /* box-shadow has no logical form either: the bleed follows the scrolled
+       content, which is the opposite side under RTL. */
+    [dir="rtl"] & .recordstable-scroll[data-scrolled] .recordstable-col-entity { box-shadow: -6px 0 16px 4px rgba(0,0,0,0.12); }
     /* AI-enriched values carry a purple wash. Measured from Attio:
        a full-bleed overlay at #9b69ff 4% (== bgPurple), composited OVER
        whatever row-state background the cell already has, which is why it