@vertebr/react 0.19.0 → 0.21.0

package/dist/components/resources/ResourceCell.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ResourceCell.d.ts","sourceRoot":"","sources":["../../../src/components/resources/ResourceCell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AA6CnD,MAAM,MAAM,iBAAiB,GAAG;IAC9B,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,KAAK,EAAE,OAAO,CAAC;IACf,+CAA+C;IAC/C,OAAO,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;CAC9B,CAAC;AAEF,wBAAgB,YAAY,CAAC,EAC3B,QAAQ,EACR,KAAK,EACL,KAAK,EACL,OAAiB,GAClB,EAAE,iBAAiB,+BAuHnB"}
+{"version":3,"file":"ResourceCell.d.ts","sourceRoot":"","sources":["../../../src/components/resources/ResourceCell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AA+CnD,MAAM,MAAM,iBAAiB,GAAG;IAC9B,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,KAAK,EAAE,OAAO,CAAC;IACf,+CAA+C;IAC/C,OAAO,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;CAC9B,CAAC;AAEF,wBAAgB,YAAY,CAAC,EAC3B,QAAQ,EACR,KAAK,EACL,KAAK,EACL,OAAiB,GAClB,EAAE,iBAAiB,+BAkInB"}

package/dist/components/resources/ResourceCell.js

@@ -6,6 +6,7 @@ const IMAGE_EXT = /\.(png|jpe?g|gif|webp|svg|avif)(\?|#|$)/i;
 function looksLikeUrl(value) {
     return /^https?:\/\//i.test(value) || value.startsWith("//");
 }
+const ISO_DATE = /^\d{4}-\d{2}-\d{2}(?:[T ]\d{2}:\d{2}|$)/;
 function looksLikeImageUrl(value) {
     if (!looksLikeUrl(value))
         return false;
@@ -77,6 +78,15 @@ export function ResourceCell({ fieldKey, field, value, variant = "table", }) {
         }
     }
     if (typeof value === "string") {
+        if (ISO_DATE.test(value)) {
+            const formatted = formatDate(value);
+            if (formatted) {
+                return _jsx("span", { className: "vertebr-cell-datetime", children: formatted });
+            }
+        }
+        if (detail && value.length > 28 && !/\s/.test(value)) {
+            return _jsx("code", { className: "vertebr-cell-token", children: value });
+        }
         if (URL_KEY.test(fieldKey) || looksLikeUrl(value)) {
             return (_jsx("a", { className: "vertebr-cell-link", href: value.startsWith("//") ? `https:${value}` : value, target: "_blank", rel: "noreferrer", title: value, onClick: (event) => event.stopPropagation(), children: detail ? value : value.replace(/^https?:\/\//i, "") }));
         }

package/dist/components/resources/ResourceTable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ResourceTable.d.ts","sourceRoot":"","sources":["../../../src/components/resources/ResourceTable.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"ResourceTable.d.ts","sourceRoot":"","sources":["../../../src/components/resources/ResourceTable.tsx"],"names":[],"mappings":"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"}

package/dist/components/resources/ResourceTable.js

@@ -44,10 +44,27 @@ function humanizeKey(key) {
         .trim();
 }
 function rowTitle(row, keys) {
-    for (const key of ["name", "title", "label", ...keys]) {
+    const preferred = [
+        "confirmationNumber",
+        "name",
+        "title",
+        "label",
+        "shippingName",
+        "customerName",
+        "email",
+        "customerEmail",
+        ...keys,
+    ];
+    for (const key of preferred) {
         const value = row[key];
-        if (typeof value === "string" && value.trim())
-            return value;
+        if (typeof value !== "string")
+            continue;
+        const trimmed = value.trim();
+        if (!trimmed)
+            continue;
+        if (trimmed.length > 28 && !/\s/.test(trimmed))
+            continue;
+        return trimmed;
     }
     return "Record";
 }

package/dist/components/resources/ResourceViewModal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ResourceViewModal.d.ts","sourceRoot":"","sources":["../../../src/components/resources/ResourceViewModal.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAGnD,MAAM,MAAM,sBAAsB,GAAG;IACnC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,WAAW,CAAC,CAAC;IACpC,GAAG,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AA4BF,wBAAgB,iBAAiB,CAAC,EAChC,MAAM,EACN,GAAG,EACH,KAAK,EACL,OAAO,EACP,OAAO,EACP,MAAM,GACP,EAAE,sBAAsB,+BAsFxB"}
+{"version":3,"file":"ResourceViewModal.d.ts","sourceRoot":"","sources":["../../../src/components/resources/ResourceViewModal.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAInD,MAAM,MAAM,sBAAsB,GAAG;IACnC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,WAAW,CAAC,CAAC;IACpC,GAAG,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AA+GF,wBAAgB,iBAAiB,CAAC,EAChC,MAAM,EACN,GAAG,EACH,KAAK,EACL,OAAO,EACP,OAAO,EACP,MAAM,GACP,EAAE,sBAAsB,+BAgFxB"}

package/dist/components/resources/ResourceViewModal.js

@@ -1,5 +1,6 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect } from "react";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+import { Dialog, DialogContent, DialogTitle } from "../dialog/Dialog";
 import { ResourceCell } from "./ResourceCell";
 function humanizeKey(key) {
     return key
@@ -8,6 +9,77 @@ function humanizeKey(key) {
         .replace(/\bcents\b/i, "")
         .trim();
 }
+const HEADING_KEYS = [
+    "confirmationNumber",
+    "name",
+    "title",
+    "label",
+    "shippingName",
+    "customerName",
+    "email",
+    "customerEmail",
+];
+function isToken(value) {
+    const trimmed = value.trim();
+    return trimmed.length > 28 && !/\s/.test(trimmed);
+}
+function readableHeading(value) {
+    if (typeof value !== "string")
+        return null;
+    const trimmed = value.trim();
+    if (!trimmed || trimmed.length > 80 || isToken(trimmed))
+        return null;
+    return trimmed;
+}
+function recordHeading(row, fallback) {
+    for (const key of HEADING_KEYS) {
+        const heading = readableHeading(row[key]);
+        if (heading)
+            return heading;
+    }
+    return readableHeading(fallback) ?? "Record";
+}
+/** Long or structured values get the full row so they wrap instead of colliding. */
+function spansRow(value) {
+    if (typeof value === "string") {
+        return value.length > 36 || value.includes("\n");
+    }
+    if (Array.isArray(value)) {
+        return value.some((entry) => typeof entry === "string" && entry.length > 36);
+    }
+    if (value instanceof Date)
+        return false;
+    if (value &&
+        typeof value === "object" &&
+        "toDate" in value &&
+        typeof value.toDate === "function") {
+        return false;
+    }
+    return value != null && typeof value === "object";
+}
+/** Keep short fields in pairs. A leftover short field fills the row before a wide one. */
+function layoutFields(entries) {
+    const laid = [];
+    let compact = [];
+    const flush = () => {
+        compact.forEach(([key, value], index) => {
+            const fillRow = compact.length % 2 === 1 && index === compact.length - 1;
+            laid.push({ key, value, span: fillRow });
+        });
+        compact = [];
+    };
+    for (const entry of entries) {
+        if (spansRow(entry[1])) {
+            flush();
+            laid.push({ key: entry[0], value: entry[1], span: true });
+        }
+        else {
+            compact.push(entry);
+        }
+    }
+    flush();
+    return laid;
+}
 function findHeroImage(schema, row) {
     for (const [key, value] of Object.entries(row)) {
         if (typeof value !== "string" || !/^https?:\/\//i.test(value))
@@ -27,18 +99,8 @@ export function ResourceViewModal({ schema, row, title, canEdit, onClose, onEdit
         ? fields.map((key) => [key, row[key]])
         : Object.entries(row);
     const hero = findHeroImage(schema, row);
-    useEffect(() => {
-        const onKeyDown = (event) => {
-            if (event.key === "Escape")
-                onClose();
-        };
-        window.addEventListener("keydown", onKeyDown);
-        const previous = document.body.style.overflow;
-        document.body.style.overflow = "hidden";
-        return () => {
-            window.removeEventListener("keydown", onKeyDown);
-            document.body.style.overflow = previous;
-        };
-    }, [onClose]);
-    return (_jsx("div", { className: "vertebr-modal-backdrop", role: "presentation", onClick: onClose, children: _jsxs("div", { className: "vertebr-modal", role: "dialog", "aria-modal": "true", "aria-label": title, onClick: (event) => event.stopPropagation(), children: [_jsxs("header", { className: "vertebr-modal-head", children: [_jsxs("div", { className: "vertebr-modal-heading", children: [_jsx("p", { className: "vertebr-modal-eyebrow", children: "Record" }), _jsx("h2", { children: title })] }), _jsxs("div", { className: "vertebr-modal-actions", children: [canEdit && onEdit ? (_jsx("button", { type: "button", className: "vertebr-btn vertebr-btn-primary", onClick: onEdit, children: "Edit" })) : null, _jsx("button", { type: "button", className: "vertebr-btn", onClick: onClose, "aria-label": "Close", children: "Close" })] })] }), _jsxs("div", { className: "vertebr-modal-body", children: [hero ? (_jsx("div", { className: "vertebr-modal-hero", children: _jsx("img", { src: hero, alt: "" }) })) : null, _jsx("dl", { className: "vertebr-modal-fields", children: entries.map(([key, value]) => (_jsxs("div", { className: "vertebr-modal-field", children: [_jsx("dt", { children: schema[key]?.label ?? humanizeKey(key) }), _jsx("dd", { children: _jsx(ResourceCell, { fieldKey: key, field: schema[key], value: value, variant: "detail" }) })] }, key))) })] })] }) }));
+    const heading = recordHeading(row, title);
+    const fieldsToShow = layoutFields(entries);
+    const titleId = useId();
+    return (_jsxs(Dialog, { onClose: onClose, maxWidth: "sm", fullWidth: true, className: "vertebr-record-modal", "aria-labelledby": titleId, children: [_jsxs(DialogTitle, { id: titleId, eyebrow: "Record", actions: _jsxs(_Fragment, { children: [canEdit && onEdit ? (_jsx("button", { type: "button", className: "vertebr-btn vertebr-btn-primary", onClick: onEdit, children: "Edit" })) : null, _jsx("button", { type: "button", className: "vertebr-btn", onClick: onClose, "aria-label": "Close", children: "Close" })] }), children: [heading, heading === "Record" && isToken(title) ? (_jsx("span", { className: "vertebr-modal-id", title: title, children: title })) : null] }), _jsxs(DialogContent, { children: [hero ? (_jsx("div", { className: "vertebr-modal-hero", children: _jsx("img", { src: hero, alt: "" }) })) : null, _jsx("dl", { className: "vertebr-modal-fields", children: fieldsToShow.map(({ key, value, span }) => (_jsxs("div", { className: "vertebr-modal-field", "data-span": span ? "full" : undefined, children: [_jsx("dt", { children: schema[key]?.label ?? humanizeKey(key) }), _jsx("dd", { children: _jsx(ResourceCell, { fieldKey: key, field: schema[key], value: value, variant: "detail" }) })] }, key))) })] })] }));
 }

package/dist/index.d.ts

@@ -12,6 +12,10 @@ export type { EmailsLibraryPanelProps } from "./components/emails/EmailsLibraryP
 export type { EmailsActivityPanelProps } from "./components/emails/EmailsActivityPanel";
 export { ResourcePanel, ResourceTable } from "./components/resources/ResourceTable";
 export { SortableHeader } from "./components/resources/SortableHeader";
+export { SelectionTableDialog } from "./components/dialog/SelectionTableDialog";
+export { Dialog, DialogActions, DialogContent, DialogTitle, } from "./components/dialog/Dialog";
+export type { DialogActionsProps, DialogContentProps, DialogMaxWidth, DialogProps, DialogTitleProps, } from "./components/dialog/Dialog";
+export type { SelectionTableDialogProps, SelectionTableDialogOverrides, SelectionTableRow, SelectionTableColumnLabels, } from "./components/dialog/SelectionTableDialog";
 export { compareFieldValues, nextTableSort, sortRows, type SortOrder, type TableSortState, } from "./lib/sort";
 export { ThemeToggle } from "./components/theme/ThemeToggle";
 export type { ThemeToggleProps } from "./components/theme/ThemeToggle";

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,iCAAiC,CAAC;AAC/D,YAAY,EAAE,iBAAiB,EAAE,MAAM,iCAAiC,CAAC;AACzE,OAAO,EAAE,YAAY,EAAE,MAAM,mCAAmC,CAAC;AACjE,OAAO,EAAE,YAAY,EAAE,MAAM,mCAAmC,CAAC;AACjE,OAAO,EAAE,gBAAgB,EAAE,MAAM,qCAAqC,CAAC;AACvE,OAAO,EAAE,eAAe,EAAE,MAAM,oCAAoC,CAAC;AACrE,OAAO,EAAE,WAAW,EAAE,MAAM,iCAAiC,CAAC;AAC9D,YAAY,EAAE,gBAAgB,EAAE,MAAM,iCAAiC,CAAC;AACxE,YAAY,EAAE,oBAAoB,EAAE,MAAM,0CAA0C,CAAC;AACrF,YAAY,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AAC7E,YAAY,EAAE,uBAAuB,EAAE,MAAM,wCAAwC,CAAC;AACtF,YAAY,EAAE,wBAAwB,EAAE,MAAM,yCAAyC,CAAC;AACxF,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,sCAAsC,CAAC;AACpF,OAAO,EAAE,cAAc,EAAE,MAAM,uCAAuC,CAAC;AACvE,OAAO,EACL,kBAAkB,EAClB,aAAa,EACb,QAAQ,EACR,KAAK,SAAS,EACd,KAAK,cAAc,GACpB,MAAM,YAAY,CAAC;AACpB,OAAO,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAC7D,YAAY,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AACvE,OAAO,EAAE,UAAU,EAAE,MAAM,gCAAgC,CAAC;AAC5D,OAAO,EACL,WAAW,EACX,gBAAgB,EAChB,eAAe,EACf,YAAY,EACZ,YAAY,GACb,MAAM,aAAa,CAAC;AACrB,OAAO,EACL,kBAAkB,EAClB,gBAAgB,EAChB,aAAa,GACd,MAAM,mBAAmB,CAAC;AAC3B,YAAY,EAAE,eAAe,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AACvE,OAAO,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAC;AACvD,OAAO,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAC1D,YAAY,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AACvD,OAAO,EACL,uBAAuB,EACvB,gBAAgB,EAChB,kBAAkB,GACnB,MAAM,4BAA4B,CAAC;AACpC,YAAY,EAAE,4BAA4B,EAAE,MAAM,4BAA4B,CAAC;AAE/E,OAAO,EACL,mBAAmB,EACnB,kBAAkB,EAClB,cAAc,EACd,oBAAoB,EACpB,0BAA0B,EAC1B,sBAAsB,GACvB,MAAM,iBAAiB,CAAC;AACzB,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AACxD,YAAY,EAAE,oBAAoB,EAAE,MAAM,uBAAuB,CAAC;AAClE,OAAO,EACL,oBAAoB,EACpB,WAAW,EACX,YAAY,GACb,MAAM,iBAAiB,CAAC;AACzB,YAAY,EACV,cAAc,EACd,qBAAqB,EACrB,sBAAsB,GACvB,MAAM,iBAAiB,CAAC;AACzB,OAAO,EACL,sBAAsB,EACtB,iBAAiB,EACjB,qBAAqB,GACtB,MAAM,uBAAuB,CAAC;AAC/B,YAAY,EACV,2BAA2B,EAC3B,mBAAmB,GACpB,MAAM,uBAAuB,CAAC;AAC/B,YAAY,EACV,aAAa,EACb,oBAAoB,EACpB,qBAAqB,EACrB,kBAAkB,EAClB,gBAAgB,EAChB,UAAU,EACV,iBAAiB,EACjB,iBAAiB,EACjB,eAAe,EACf,eAAe,EACf,aAAa,EACb,oBAAoB,EACpB,qBAAqB,EACrB,WAAW,EACX,SAAS,EACT,WAAW,EACX,WAAW,EACX,eAAe,EACf,WAAW,EACX,cAAc,EACd,GAAG,EACH,YAAY,EACZ,mBAAmB,EACnB,mBAAmB,EACnB,gBAAgB,EAChB,iBAAiB,EACjB,kBAAkB,EAClB,mBAAmB,EACnB,UAAU,EACV,WAAW,EACX,eAAe,EACf,oBAAoB,EACpB,kBAAkB,EAClB,kBAAkB,EAClB,sBAAsB,EACtB,0BAA0B,EAC1B,QAAQ,EACR,YAAY,EACZ,cAAc,EACd,kBAAkB,GACnB,MAAM,iBAAiB,CAAC;AAEzB,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/dist/index.js

@@ -6,6 +6,8 @@ export { FontPickerField } from "./components/fonts/FontPickerField";
 export { EmailsBoard } from "./components/emails/EmailsBoard";
 export { ResourcePanel, ResourceTable } from "./components/resources/ResourceTable";
 export { SortableHeader } from "./components/resources/SortableHeader";
+export { SelectionTableDialog } from "./components/dialog/SelectionTableDialog";
+export { Dialog, DialogActions, DialogContent, DialogTitle, } from "./components/dialog/Dialog";
 export { compareFieldValues, nextTableSort, sortRows, } from "./lib/sort";
 export { ThemeToggle } from "./components/theme/ThemeToggle";
 export { ConfigForm } from "./components/config/ConfigForm";

package/dist/styles/cells.css

@@ -94,6 +94,19 @@
   font-family: var(--vb-mono);
 }
 
+.vertebr-cell-token {
+  display: block;
+  max-width: 100%;
+  margin: 0;
+  font-family: var(--vb-mono);
+  font-size: 0.78rem;
+  line-height: 1.45;
+  color: var(--vb-text);
+  white-space: normal;
+  overflow-wrap: anywhere;
+  word-break: break-word;
+}
+
 .vertebr-cell-json {
   display: inline-block;
   max-width: 14rem;

package/dist/styles/index.css

@@ -14,6 +14,7 @@
 @import "./columns.css";
 @import "./cells.css";
 @import "./modal.css";
+@import "./selection-dialog.css";
 @import "./mail.css";
 @import "./emails.css";
 @import "./form.css";

package/dist/styles/modal.css

@@ -5,9 +5,11 @@
   inset: 0;
   /* Above shell chrome, toasts (100), and command palette (90). */
   z-index: 200;
-  display: grid;
-  place-items: center;
-  padding: 1.25rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 2rem;
+  overflow: auto;
   background: color-mix(in srgb, var(--vb-bg) 55%, rgba(0, 0, 0, 0.45));
   backdrop-filter: blur(6px);
   animation: vb-fade-in var(--vb-duration-normal) var(--vb-ease);
@@ -15,7 +17,10 @@
 
 .vertebr-modal {
   width: min(100%, 720px);
-  max-height: min(88vh, 860px);
+  min-width: 0;
+  min-height: 0;
+  max-width: min(100%, calc(100vw - 4rem));
+  max-height: calc(100dvh - 4rem);
   display: flex;
   flex-direction: column;
   overflow: hidden;
@@ -28,6 +33,64 @@
   animation: vb-pop-in var(--vb-duration-normal) var(--vb-ease);
 }
 
+/* MUI-style paper: hug content up to maxWidth, scroll the body. */
+.vertebr-dialog {
+  width: fit-content;
+  max-height: calc(100dvh - 4rem);
+}
+
+.vertebr-dialog[data-max-width="xs"] {
+  max-width: min(27.75rem, 100%);
+}
+.vertebr-dialog[data-max-width="sm"] {
+  max-width: min(37.5rem, 100%);
+}
+.vertebr-dialog[data-max-width="md"] {
+  max-width: min(56.25rem, 100%);
+}
+.vertebr-dialog[data-max-width="lg"] {
+  max-width: min(75rem, 100%);
+}
+.vertebr-dialog[data-max-width="xl"] {
+  max-width: min(96rem, 100%);
+}
+
+.vertebr-dialog[data-full-width="true"] {
+  width: 100%;
+}
+
+.vertebr-dialog-content {
+  flex: 1 1 auto;
+  min-width: 0;
+  min-height: 0;
+  overflow-x: auto;
+  overflow-y: auto;
+}
+
+.vertebr-dialog-content-dividers {
+  border-top: 1px solid var(--vb-border);
+  border-bottom: 1px solid var(--vb-border);
+}
+
+.vertebr-dialog-actions {
+  display: flex;
+  flex: none;
+  justify-content: flex-end;
+  gap: 0.45rem;
+  padding: 0.85rem 1.25rem 1.05rem;
+  border-top: 1px solid var(--vb-border);
+}
+
+.vertebr-dialog-title h2 {
+  display: flex;
+  flex-direction: column;
+  gap: 0.35rem;
+}
+
+.vertebr-record-modal {
+  container-type: inline-size;
+}
+
 .vertebr-modal-form {
   width: min(100%, 960px);
   max-height: min(92vh, 920px);
@@ -51,15 +114,34 @@
   align-items: flex-start;
   justify-content: space-between;
   gap: 1rem;
+  flex: none;
   padding: 1.15rem 1.25rem;
   border-bottom: 1px solid var(--vb-border);
   background: var(--vb-surface-tint);
 }
 
+.vertebr-modal-heading {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
 .vertebr-modal-heading h2 {
   margin: 0.15rem 0 0;
   font-size: 1.25rem;
   letter-spacing: -0.02em;
+  overflow-wrap: anywhere;
+  line-height: 1.3;
+}
+
+.vertebr-modal-id {
+  margin: 0.35rem 0 0;
+  overflow: hidden;
+  font-family: var(--vb-mono);
+  font-size: 0.75rem;
+  line-height: 1.4;
+  color: var(--vb-text-subtle);
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .vertebr-modal-eyebrow {
@@ -73,12 +155,17 @@
 
 .vertebr-modal-actions {
   display: flex;
+  flex: none;
   flex-wrap: wrap;
   gap: 0.45rem;
 }
 
 .vertebr-modal-body {
-  overflow: auto;
+  flex: 1 1 auto;
+  min-width: 0;
+  min-height: 0;
+  overflow-x: auto;
+  overflow-y: auto;
   padding: 1.25rem;
   display: flex;
   flex-direction: column;
@@ -102,20 +189,70 @@
 .vertebr-modal-fields {
   margin: 0;
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+  grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 0.9rem 1rem;
+  width: 100%;
+}
+
+@container (max-width: 36rem) {
+  .vertebr-modal-fields {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media (max-width: 640px) {
+  .vertebr-modal-fields {
+    grid-template-columns: 1fr;
+  }
 }
 
 .vertebr-modal-field {
   display: grid;
   gap: 0.35rem;
-  padding: 0.85rem 0.95rem;
+  padding: 0.85rem 0.95rem 1.25rem;
   border: 1px solid var(--vb-border);
   border-radius: var(--vb-radius);
   background: var(--vb-surface-tint);
   min-width: 0;
 }
 
+.vertebr-modal-field[data-span="full"] {
+  grid-column: 1 / -1;
+}
+
+.vertebr-record-modal .vertebr-modal-fields {
+  gap: 1px;
+  flex: none;
+  border: 1px solid var(--vb-border);
+  border-radius: 12px;
+  background: var(--vb-border);
+  /* Square cells paint over the rounded border unless they are clipped to it.
+     The sheet is as tall as its rows, so this only trims the corners. */
+  overflow: clip;
+}
+
+.vertebr-record-modal .vertebr-modal-field {
+  gap: 0.35rem;
+  padding: 0.8rem 1rem 1.15rem;
+  border: 0;
+  border-radius: 0;
+  background: var(--vb-bg-elevated);
+}
+
+/* Last row sits above the sheet's bottom radius, so it needs extra room
+   or the values look cut off. */
+.vertebr-record-modal .vertebr-modal-field:last-child,
+.vertebr-record-modal .vertebr-modal-fields > .vertebr-modal-field:nth-last-child(2):not([data-span="full"]) {
+  padding-bottom: 1.85rem;
+}
+
+/* The On pill is inline-flex. Margin under it does not grow the line box,
+   and overflow:hidden on the cell used to clip it, so the divider stayed put. */
+.vertebr-record-modal .vertebr-modal-field dd {
+  display: block;
+  padding-bottom: 0;
+}
+
 .vertebr-modal-field dt {
   margin: 0;
   font-family: var(--vb-mono);
@@ -128,6 +265,34 @@
 .vertebr-modal-field dd {
   margin: 0;
   min-width: 0;
+  max-width: 100%;
+  overflow-wrap: anywhere;
+  word-break: break-word;
+  line-height: 1.4;
+}
+
+.vertebr-modal-field dd > * {
+  max-width: 100%;
+  min-width: 0;
+}
+
+.vertebr-modal-field .vertebr-cell-text,
+.vertebr-modal-field .vertebr-cell-link,
+.vertebr-modal-field .vertebr-cell-json,
+.vertebr-modal-field .vertebr-cell-prose,
+.vertebr-modal-field .vertebr-cell-datetime,
+.vertebr-modal-field .vertebr-cell-number,
+.vertebr-modal-field .vertebr-cell-money {
+  display: block;
+  max-width: 100%;
+  overflow: visible;
+  text-overflow: unset;
+  white-space: normal;
+  overflow-wrap: anywhere;
+}
+
+.vertebr-modal-field .vertebr-chip-row {
+  max-width: none;
 }
 
 .vertebr-picker-body {

package/dist/styles/selection-dialog.css

@@ -0,0 +1,170 @@
+/* ── Selection table dialog (Sync pickers, multi-select tables) ─ */
+
+.vertebr-selection-dialog {
+  width: min(52rem, calc(100vw - 2rem));
+  max-height: min(40rem, calc(100vh - 2rem));
+  display: flex;
+  flex-direction: column;
+}
+
+.vertebr-selection-dialog-head {
+  align-items: flex-start;
+  flex: 0 0 auto;
+}
+
+.vertebr-selection-dialog-sub {
+  margin: 0.4rem 0 0;
+  max-width: 40rem;
+  font-size: var(--vb-font-size-100);
+  color: var(--vb-text-muted);
+  line-height: 1.45;
+}
+
+.vertebr-selection-dialog-body {
+  flex: 1 1 auto;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  border-top: 1px solid var(--vb-border-subdued);
+}
+
+.vertebr-selection-dialog-toolbar {
+  flex-wrap: wrap;
+  gap: 0.55rem 0.75rem;
+  align-items: center;
+}
+
+.vertebr-selection-dialog-toolbar .vertebr-table-toolbar-start {
+  flex: 1 1 auto;
+  min-width: 0;
+  gap: 0.45rem;
+}
+
+.vertebr-selection-dialog-toolbar-end {
+  display: inline-flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.45rem;
+  margin-left: auto;
+}
+
+.vertebr-selection-dialog-source {
+  font-size: var(--vb-font-size-100);
+  color: var(--vb-text-subtle);
+  white-space: nowrap;
+  padding-right: 0.25rem;
+}
+
+.vertebr-selection-dialog .vertebr-table-filter-menu {
+  z-index: 50;
+}
+
+.vertebr-selection-dialog-body .vertebr-table-wrap {
+  flex: 1 1 auto;
+  min-height: 0;
+  border: 0;
+  border-radius: 0;
+}
+
+.vertebr-selection-dialog-body .vertebr-empty {
+  margin: 1.25rem;
+}
+
+.vertebr-env-chips {
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: 0.35rem;
+}
+
+.vertebr-env-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  padding: 0.2rem 0.55rem 0.2rem 0.4rem;
+  border-radius: 999px;
+  border: 1px solid var(--vb-border-subdued);
+  background: var(--vb-bg-muted);
+  color: var(--vb-text-subtle);
+  font-size: 0.72rem;
+  font-weight: var(--vb-font-weight-medium);
+  letter-spacing: 0.01em;
+  line-height: 1.2;
+  white-space: nowrap;
+}
+
+.vertebr-env-chip-dot {
+  width: 0.45rem;
+  height: 0.45rem;
+  border-radius: 50%;
+  background: var(--vb-border-strong);
+  flex: 0 0 auto;
+}
+
+.vertebr-env-chip[data-on="true"] {
+  border-color: color-mix(in srgb, var(--vb-accent) 35%, var(--vb-border));
+  background: color-mix(in srgb, var(--vb-accent) 12%, var(--vb-bg-elevated));
+  color: var(--vb-text);
+}
+
+.vertebr-env-chip[data-on="true"] .vertebr-env-chip-dot {
+  background: var(--vb-accent);
+}
+
+.vertebr-env-chip[data-on="true"][data-tone="danger"] {
+  border-color: color-mix(in srgb, var(--vb-danger, #b42318) 40%, var(--vb-border));
+  background: color-mix(
+    in srgb,
+    var(--vb-danger, #b42318) 10%,
+    var(--vb-bg-elevated)
+  );
+}
+
+.vertebr-env-chip[data-on="true"][data-tone="danger"] .vertebr-env-chip-dot {
+  background: var(--vb-danger, #b42318);
+}
+
+.vertebr-env-chip[data-on="false"] {
+  opacity: 0.72;
+}
+
+.vertebr-selection-dialog-table tbody tr {
+  cursor: pointer;
+}
+
+.vertebr-selection-dialog-table tbody tr[data-selected="true"] {
+  background: color-mix(in srgb, var(--vb-accent) 8%, transparent);
+  box-shadow: inset 3px 0 0 var(--vb-accent);
+}
+
+.vertebr-selection-dialog-col-check {
+  width: 2.25rem;
+  text-align: center;
+}
+
+.vertebr-selection-dialog-primary {
+  font-family: var(--vb-font-mono, ui-monospace, monospace);
+  font-size: 0.92em;
+  font-weight: var(--vb-font-weight-semibold);
+}
+
+.vertebr-selection-dialog-foot {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--vb-space-300);
+  flex: 0 0 auto;
+}
+
+.vertebr-selection-dialog-foot-meta {
+  font-size: var(--vb-font-size-100);
+  color: var(--vb-text-muted);
+}
+
+.vertebr-selection-dialog-foot-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--vb-space-200);
+  margin-left: auto;
+}