@crisp-ui-kit/crisp 0.5.0 → 0.7.0

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

@@ -1,5 +1,5 @@
 import { defineRecipe, resolveRecipe } from "../../core/index.js";
-import { contract as c } from "../../tokens/index.js";
+import { contract as c, elevation as e } from "../../tokens/index.js";
 // A multiline text field, measured from Attio's settings "Personal context": an
 // inset 1px ring (radius 8), 14px text, 6/10 padding, and an optional character
 // counter pinned bottom-right (12px, muted). Focus rings the field brand.
@@ -11,16 +11,28 @@ const config = defineRecipe({
     & .textarea-field {
       box-sizing: border-box; display: block; width: 100%; min-height: 80px; resize: vertical;
       margin: 0; padding: ${c.space["1.5"]} ${c.space["2.5"]}; border: none; border-radius: ${c.radius.md};
-      background: ${c.bgSurface}; box-shadow: 0 0 2px rgba(28,40,64,0.18), 0 1px 3px rgba(0,0,0,0.04);
+      background: ${c.bgSurface}; box-shadow: ${e.field};
       font-family: inherit; font-size: ${c.text.lg}; line-height: 20px; color: ${c.fgPrimary};
       outline: none; transition: box-shadow .15s ease;
       -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
     }
     & .textarea-field::placeholder { color: ${c.fgMuted}; }
-    & .textarea-field:focus { box-shadow: inset 0 0 0 1px ${c.bgBrandSolid}; }
     & .textarea-field:disabled { opacity: 0.5; cursor: not-allowed; }
+
+    /* seed-design's focus treatment, same as Input: a 2px ring on an ::after
+       overlay that is present-but-transparent at rest, so focusing never
+       shifts the box, animating only its colour. */
+    & .textarea-wrap { position: relative; display: block; }
+    & .textarea-wrap::after {
+      content: ""; position: absolute; inset: 0; border-radius: ${c.radius.md};
+      border: 2px solid transparent; transition: border-color .1s ease;
+      pointer-events: none;
+    }
+    & .textarea-wrap:focus-within::after { border-color: ${c.strokeFieldFocus}; }
+    &[data-invalid] .textarea-wrap::after { border-color: ${c.bgDanger}; }
+    &[data-invalid] .textarea-wrap:focus-within::after { border-color: ${c.bgDanger}; }
     &[data-counted] .textarea-field { padding-bottom: ${c.space["5"]}; }
-    & .textarea-count { position: absolute; right: ${c.space["2.5"]}; bottom: ${c.space["1.5"]}; font-size: ${c.text.sm}; color: ${c.fgMuted}; pointer-events: none; }
+    & .textarea-count { position: absolute; inset-inline-end: ${c.space["2.5"]}; bottom: ${c.space["1.5"]}; font-size: ${c.text.sm}; color: ${c.fgMuted}; pointer-events: none; }
     & .textarea-count[data-over] { color: ${c.bgDanger}; }
   `,
     variants: {},

package/dist/esm/components/toast/toast.js

@@ -9,19 +9,19 @@ const ICONS = {
     warning: TriangleAlert,
     danger: CircleAlert,
 };
-function ToastCard({ item, onClose, }) {
+function ToastCard({ item, onClose, dismissLabel, }) {
     const Icon = ICONS[item.tone ?? "info"];
     return (_jsxs("div", { className: "toast", role: "status", "data-tone": item.tone ?? "info", children: [_jsx("span", { className: "toast-icon", children: _jsx(Icon, { size: 16, strokeWidth: 1.75, "aria-hidden": "true" }) }), _jsxs("div", { className: "toast-body", children: [_jsx("div", { className: "toast-title", children: item.title }), item.description != null && (_jsx("div", { className: "toast-desc", children: item.description })), item.action && (_jsx("button", { type: "button", className: "toast-action", onClick: () => {
                             item.action?.onClick();
                             onClose();
-                        }, children: item.action.label }))] }), _jsx("button", { type: "button", className: "toast-close", "aria-label": "Dismiss", onClick: onClose, children: _jsx(X, { size: 15, strokeWidth: 2, "aria-hidden": "true" }) })] }));
+                        }, children: item.action.label }))] }), _jsx("button", { type: "button", className: "toast-close", "aria-label": dismissLabel, onClick: onClose, children: _jsx(X, { size: 15, strokeWidth: 2, "aria-hidden": "true" }) })] }));
 }
 /**
  * Wrap your app in a `ToastProvider`, then call `useToast().toast({...})` from
  * anywhere to push a notification. Toasts stack bottom-right and auto-dismiss
  * after `duration` (default 4s; 0 keeps them until dismissed).
  */
-export function ToastProvider({ children, duration = 4000, }) {
+export function ToastProvider({ children, duration = 4000, dismissLabel = "Dismiss", regionLabel = "Notifications", }) {
     const [items, setItems] = React.useState([]);
     const idRef = React.useRef(0);
     const timers = React.useRef(new Map());
@@ -47,7 +47,7 @@ export function ToastProvider({ children, duration = 4000, }) {
         return () => map.forEach(clearTimeout);
     }, []);
     const api = React.useMemo(() => ({ toast, dismiss }), [toast, dismiss]);
-    return (_jsxs(ToastContext.Provider, { value: api, children: [children, _jsx("div", { className: toastRecipe(), children: _jsx("div", { className: "toast-viewport", role: "region", "aria-label": "Notifications", children: items.map((t) => (_jsx(ToastCard, { item: t, onClose: () => dismiss(t.id) }, t.id))) }) })] }));
+    return (_jsxs(ToastContext.Provider, { value: api, children: [children, _jsx("div", { className: toastRecipe(), children: _jsx("div", { className: "toast-viewport", role: "region", "aria-label": regionLabel, children: items.map((t) => (_jsx(ToastCard, { item: t, onClose: () => dismiss(t.id), dismissLabel: dismissLabel }, t.id))) }) })] }));
 }
 ToastProvider.displayName = "ToastProvider";
 export function useToast() {

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

@@ -6,7 +6,7 @@ import { contract as c } from "../../tokens/index.js";
 const config = defineRecipe({
     name: "toast",
     base: `display: contents; font-family: ${c.font.sans};
-    & .toast-viewport { position: fixed; z-index: 80; right: ${c.space["4"]}; bottom: ${c.space["4"]}; display: flex; flex-direction: column; gap: ${c.space["2"]}; width: 360px; max-width: calc(100vw - ${c.space["8"]}); pointer-events: none; }
+    & .toast-viewport { position: fixed; z-index: 80; inset-inline-end: ${c.space["4"]}; bottom: ${c.space["4"]}; display: flex; flex-direction: column; gap: ${c.space["2"]}; width: 360px; max-width: calc(100vw - ${c.space["8"]}); pointer-events: none; }
     & .toast { pointer-events: auto; display: flex; align-items: flex-start; gap: ${c.space["2.5"]}; box-sizing: border-box; padding: ${c.space["3"]}; border-radius: ${c.radius.xl}; background: ${c.bgRaised}; box-shadow: inset 0 0 0 1px color-mix(in srgb, ${c.fgPrimary} 5%, transparent), 0 8px 28px -6px rgba(28,40,64,0.16), 0 2px 6px -2px rgba(28,40,64,0.10); opacity: 1; transform: translateY(0); transition: opacity 0.15s ease, transform 0.15s ease; @starting-style { opacity: 0; transform: translateY(8px); } }
     & .toast-icon { flex-shrink: 0; margin-top: 1px; display: inline-flex; color: ${c.fgMuted}; }
     & .toast[data-tone="info"] .toast-icon { color: ${c.bgBrandSolid}; }
@@ -18,7 +18,7 @@ const config = defineRecipe({
     & .toast-desc { font-size: ${c.text.md}; color: ${c.fgMuted}; }
     & .toast-action { align-self: flex-start; margin-top: ${c.space["1.5"]}; height: 24px; padding: 0 ${c.space["2"]}; border: none; border-radius: ${c.radius.md}; background: color-mix(in srgb, ${c.fgPrimary} 6%, transparent); color: ${c.fgPrimary}; font-family: inherit; font-size: ${c.text.sm}; font-weight: ${c.weight.medium}; cursor: pointer; }
     & .toast-action:hover { background: color-mix(in srgb, ${c.fgPrimary} 10%, transparent); }
-    & .toast-close { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin: -2px -2px 0 0; padding: 0; border: none; border-radius: ${c.radius.md}; background: none; color: ${c.fgMuted}; cursor: pointer; }
+    & .toast-close { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin: -2px -2px 0 0; padding: 0; border: none; border-radius: ${c.radius.md}; background: none; color: ${c.fgMuted}; font-family: inherit; cursor: pointer; }
     & .toast-close:hover { background: color-mix(in srgb, ${c.fgPrimary} 6%, transparent); color: ${c.fgPrimary}; }`,
     variants: {},
     defaultVariants: {},

package/dist/esm/components/tooltip/tooltip.js

@@ -8,11 +8,24 @@ import { tooltipRecipe } from "./tooltip.recipe.js";
  * and hides on leave / blur / Escape. The bubble is portaled and positioned
  * above the trigger (flipping below near the top edge).
  */
-export function Tooltip({ content, children, side = "top", delay = 350, }) {
+export function Tooltip({ content, children, side = "top", delay = 350, open: openProp, defaultOpen, onOpenChange, }) {
     const triggerRef = React.useRef(null);
     const timer = React.useRef(undefined);
     const [pos, setPos] = React.useState(null);
-    const show = () => {
+    const [internalOpen, setInternalOpen] = React.useState(defaultOpen ?? false);
+    const open = openProp ?? internalOpen;
+    const setOpen = React.useCallback((next) => {
+        if (openProp === undefined)
+            setInternalOpen(next);
+        onOpenChange?.(next);
+    }, [openProp, onOpenChange]);
+    // Measuring is separate from opening, so a controlled consumer that flips
+    // `open` gets placed against the trigger exactly as a hover would.
+    React.useLayoutEffect(() => {
+        if (!open) {
+            setPos(null);
+            return;
+        }
         const el = triggerRef.current;
         if (!el)
             return;
@@ -23,17 +36,18 @@ export function Tooltip({ content, children, side = "top", delay = 350, }) {
             top: Math.round(below ? r.bottom + 6 : r.top - 6),
             below,
         });
-    };
-    const open = () => {
+    }, [open, side]);
+    const openAfterDelay = () => {
         clearTimeout(timer.current);
-        timer.current = setTimeout(show, delay);
+        timer.current = setTimeout(() => setOpen(true), delay);
     };
     const close = () => {
         clearTimeout(timer.current);
-        setPos(null);
+        setOpen(false);
     };
     React.useEffect(() => () => clearTimeout(timer.current), []);
-    return (_jsxs(_Fragment, { children: [_jsx("span", { ref: triggerRef, style: { display: "inline-flex" }, onPointerEnter: open, onPointerLeave: close, onFocusCapture: open, onBlurCapture: close, onKeyDown: (e) => e.key === "Escape" && close(), children: children }), pos != null &&
+    return (_jsxs(_Fragment, { children: [_jsx("span", { ref: triggerRef, style: { display: "inline-flex" }, onPointerEnter: openAfterDelay, onPointerLeave: close, onFocusCapture: openAfterDelay, onBlurCapture: close, onKeyDown: (e) => e.key === "Escape" && close(), children: children }), open &&
+                pos != null &&
                 createPortal(_jsx("div", { role: "tooltip", className: tooltipRecipe(), style: {
                         left: pos.left,
                         top: pos.top,

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

@@ -0,0 +1,2 @@
+export { WheelPicker, } from "./wheelpicker.js";
+export { wheelpickerRecipe } from "./wheelpicker.recipe.js";

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

@@ -0,0 +1,98 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { wheelpickerRecipe } from "./wheelpicker.recipe.js";
+const ITEM_HEIGHT = { small: 36, medium: 44 };
+/**
+ * A scroll-snapping wheel, measured from seed-design. Each column snaps its
+ * rows to a centred selection band; the momentum is the browser's own, because
+ * the column is an ordinary scroll container with `scroll-snap-type: y
+ * mandatory` rather than a JavaScript animation.
+ *
+ * Keyboard: each column is a `listbox` that takes focus, with ↑/↓ moving the
+ * selection, Home/End jumping to the ends, and a visible ring on the selected
+ * row for keyboard focus only.
+ */
+export function WheelPicker({ columns, value: valueProp, defaultValue, onValueChange, size = "medium", className, ...rest }) {
+    const firstOf = React.useCallback(() => Object.fromEntries(columns.map((c) => [c.key, c.options[0]?.value ?? ""])), [columns]);
+    const [internal, setInternal] = React.useState(() => ({ ...firstOf(), ...defaultValue }));
+    const value = valueProp ?? internal;
+    const itemHeight = ITEM_HEIGHT[size];
+    // the listbox owns focus and points at the active row with
+    // aria-activedescendant; options are not individually tabbable, which is the
+    // ARIA listbox pattern and what lets ↑/↓ work without focus leaving the column
+    const baseId = React.useId();
+    const optionId = (colKey, value) => `${baseId}-${colKey}-${value}`;
+    const refs = React.useRef(new Map());
+    // set while a programmatic scroll is settling, so the scroll handler does not
+    // read a half-finished position and report a selection nobody picked
+    const settling = React.useRef(new Set());
+    const commit = (key, next) => {
+        if (value[key] === next)
+            return;
+        const merged = { ...value, [key]: next };
+        if (valueProp === undefined)
+            setInternal(merged);
+        onValueChange?.(merged);
+    };
+    const scrollTo = React.useCallback((key, index, behavior) => {
+        const el = refs.current.get(key);
+        if (!el || index < 0)
+            return;
+        settling.current.add(key);
+        el.scrollTo({ top: index * itemHeight, behavior });
+        // a smooth scroll has no completion event; one frame past the animation
+        // is enough for the snap to land
+        setTimeout(() => settling.current.delete(key), behavior === "smooth" ? 300 : 0);
+    }, [itemHeight]);
+    // keep each column parked on its selected row, including on first paint
+    React.useEffect(() => {
+        for (const col of columns) {
+            const i = col.options.findIndex((o) => o.value === value[col.key]);
+            scrollTo(col.key, i, "auto");
+        }
+    }, [columns, value, scrollTo]);
+    const onScroll = (col) => {
+        if (settling.current.has(col.key))
+            return;
+        const el = refs.current.get(col.key);
+        if (!el)
+            return;
+        const i = Math.round(el.scrollTop / itemHeight);
+        const opt = col.options[Math.max(0, Math.min(i, col.options.length - 1))];
+        if (opt)
+            commit(col.key, opt.value);
+    };
+    const onKeyDown = (e, col) => {
+        const i = col.options.findIndex((o) => o.value === value[col.key]);
+        const go = (next) => {
+            e.preventDefault();
+            const clamped = Math.max(0, Math.min(next, col.options.length - 1));
+            const opt = col.options[clamped];
+            if (!opt)
+                return;
+            commit(col.key, opt.value);
+            scrollTo(col.key, clamped, "smooth");
+        };
+        if (e.key === "ArrowDown")
+            go(i + 1);
+        else if (e.key === "ArrowUp")
+            go(i - 1);
+        else if (e.key === "Home")
+            go(0);
+        else if (e.key === "End")
+            go(col.options.length - 1);
+    };
+    return (_jsxs("div", { className: wheelpickerRecipe({ size, className }), ...rest, children: [_jsx("div", { className: "wheelpicker-indicator", "aria-hidden": "true" }), _jsx("div", { className: "wheelpicker-fog", children: _jsx("div", { className: "wheelpicker-columns", children: columns.map((col) => (_jsx("div", { role: "listbox", "aria-label": col.label, "aria-activedescendant": optionId(col.key, value[col.key] ?? ""), tabIndex: 0, className: "wheelpicker-column", ref: (el) => {
+                            if (el)
+                                refs.current.set(col.key, el);
+                            else
+                                refs.current.delete(col.key);
+                        }, onScroll: () => onScroll(col), onKeyDown: (e) => onKeyDown(e, col), children: col.options.map((opt) => {
+                            const selected = opt.value === value[col.key];
+                            return (_jsx("div", { id: optionId(col.key, opt.value), role: "option", "aria-selected": selected, "data-selected": selected ? "" : undefined, className: "wheelpicker-item", onClick: () => {
+                                    commit(col.key, opt.value);
+                                    scrollTo(col.key, col.options.indexOf(opt), "smooth");
+                                }, children: opt.label }, opt.value));
+                        }) }, col.key))) }) })] }));
+}
+WheelPicker.displayName = "WheelPicker";

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

@@ -0,0 +1,92 @@
+import { defineRecipe, resolveRecipe } from "../../core/index.js";
+import { contract as c } from "../../tokens/index.js";
+// seed-design's wheel picker, measured from @seed-design/css.
+//
+// The wheel physics are CSS, not JavaScript: each column is a scroll container
+// with `scroll-snap-type: y mandatory` and items that snap centred, so the
+// browser's own momentum and rubber-banding do the work. Half a viewport of
+// padding above and below is what lets the first and last item reach the
+// centre band.
+//
+//                    small    medium
+//   viewport height   180px    220px
+//   item height        36px     44px
+//   font / line       20/27    26/35
+//   fog max height    108px    132px
+//   centre offset      72px     88px   ((viewport - item) / 2)
+const config = defineRecipe({
+    name: "wheelpicker",
+    base: `
+    position: relative; box-sizing: border-box; width: 100%; overflow: hidden;
+    background: ${c.bgSurface}; font-family: ${c.font.sans};
+
+    /* the band the selected row sits in; behind the items, never hit-tested */
+    & .wheelpicker-indicator {
+      position: absolute; z-index: 0; inset-inline: ${c.space["4"]}; top: 50%;
+      transform: translateY(-50%); border-radius: ${c.radius.md};
+      background: ${c.bgNeutralWeak}; pointer-events: none;
+    }
+
+    /* fades the rows furthest from the centre, so the column reads as a wheel
+       rather than a list. 40% of the viewport, capped, top and bottom. */
+    & .wheelpicker-fog {
+      position: relative; z-index: 1; height: 100%; overflow: hidden;
+      mask-image: linear-gradient(
+        to bottom,
+        transparent 0,
+        #000 var(--wheelpicker-fog),
+        #000 calc(100% - var(--wheelpicker-fog)),
+        transparent 100%
+      );
+    }
+    & .wheelpicker-columns { display: flex; width: 100%; height: 100%; justify-content: center; }
+
+    & .wheelpicker-column {
+      box-sizing: border-box; flex: 0 0 auto; width: max-content; height: 100%;
+      overflow-x: hidden; overflow-y: auto;
+      overscroll-behavior-y: contain; overscroll-behavior-x: none;
+      scroll-snap-type: y mandatory; touch-action: pan-y;
+      scrollbar-width: none; -ms-overflow-style: none; outline: none;
+      padding-block: var(--wheelpicker-offset);
+    }
+    & .wheelpicker-column::-webkit-scrollbar { display: none; }
+
+    & .wheelpicker-item {
+      display: flex; align-items: center; justify-content: center;
+      scroll-snap-align: center; user-select: none; white-space: nowrap;
+      padding-inline: ${c.space["4"]}; color: ${c.fgDisabled};
+      background: none; border: none; font: inherit; cursor: pointer;
+    }
+    & .wheelpicker-item[data-selected] { color: ${c.fgPrimary}; }
+
+    /* the ring is drawn on the SELECTED row, and only for keyboard focus:
+       a pointer user has just tapped the row they meant and does not need it */
+    & .wheelpicker-column:focus-visible .wheelpicker-item[data-selected] {
+      outline: 2px solid ${c.strokeFocusRing}; outline-offset: -2px;
+      border-radius: ${c.radius.md};
+    }
+  `,
+    variants: {
+        size: {
+            small: `
+        height: 180px; --wheelpicker-offset: 72px;
+        --wheelpicker-fog: min(40%, 108px);
+        & .wheelpicker-indicator { height: 36px; }
+        & .wheelpicker-item { height: 36px; min-height: 36px; font-size: 20px; line-height: 27px; }
+      `,
+            medium: `
+        height: 220px; --wheelpicker-offset: 88px;
+        --wheelpicker-fog: min(40%, 132px);
+        & .wheelpicker-indicator { height: 44px; }
+        & .wheelpicker-item { height: 44px; min-height: 44px; font-size: 26px; line-height: 35px; }
+      `,
+        },
+    },
+    defaultVariants: { size: "medium" },
+    compoundVariants: [],
+});
+export const wheelpickerRecipe = Object.assign(resolveRecipe(config), {
+    config,
+    meta: { medium: { height: "220px", itemHeight: "44px" } },
+});
+export default config;

package/dist/esm/index.js

@@ -13,9 +13,11 @@ export * from "./components/button/index.js";
 export * from "./components/callout/index.js";
 export * from "./components/card/index.js";
 export * from "./components/checkbox/index.js";
+export * from "./components/columncalc/index.js";
 export * from "./components/contextmenu/index.js";
 export * from "./components/datatable/index.js";
 export * from "./components/datepicker/index.js";
+export * from "./components/datepickerfield/index.js";
 export * from "./components/dialog/index.js";
 export * from "./components/divider/index.js";
 export * from "./components/donutchart/index.js";
@@ -30,6 +32,7 @@ export * from "./components/multiselect/index.js";
 export * from "./components/popover/index.js";
 export * from "./components/progress/index.js";
 export * from "./components/radiogroup/index.js";
+export * from "./components/resizablepanel/index.js";
 export * from "./components/segmented/index.js";
 export * from "./components/select/index.js";
 export * from "./components/skeleton/index.js";
@@ -43,12 +46,14 @@ export * from "./components/tabs/index.js";
 export * from "./components/textarea/index.js";
 export * from "./components/toast/index.js";
 export * from "./components/tooltip/index.js";
+export * from "./components/wheelpicker/index.js";
 export * from "./core/index.js";
 // product surfaces (product/) — faithful, pixel-measured rebuilds of specific
 // Attio screens (Sidebar, RecordsTable, RecordPage, Inbox, …). Use them as-is
 // or as composition references for your own data; `components/` above holds
 // the generic primitives (Table, DataTable, Button, …) to build your own UI from.
 export * from "./product/appshell/index.js";
+export * from "./product/authshell/index.js";
 export * from "./product/board/index.js";
 export * from "./product/command/index.js";
 export * from "./product/entitycard/index.js";

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

@@ -8,25 +8,49 @@ import { appshellRecipe } from "./appshell.recipe.js";
  * collapse button to slide it away (a floating button brings it back). The
  * sidebar pane clips rather than squishing, so its content never reflows.
  */
-export function AppShell({ sidebar, children, defaultWidth = 275, minWidth = 220, maxWidth = 460, className, }) {
-    const [collapsed, setCollapsed] = React.useState(false);
-    const [width, setWidth] = React.useState(defaultWidth);
+export function AppShell({ sidebar, children, width: widthProp, defaultWidth = 275, onWidthChange, collapsed: collapsedProp, defaultCollapsed = false, onCollapsedChange, minWidth = 220, maxWidth = 350, className, expandLabel = "Expand sidebar", ...rest }) {
+    const [internalCollapsed, setInternalCollapsed] = React.useState(defaultCollapsed);
+    const collapsed = collapsedProp ?? internalCollapsed;
+    const setCollapsed = (next) => {
+        onCollapsedChange?.(next);
+        if (collapsedProp === undefined)
+            setInternalCollapsed(next);
+    };
+    const [internalWidth, setInternalWidth] = React.useState(defaultWidth);
+    // Live width while the pointer is down, so a controlled shell still tracks
+    // the drag instead of waiting for the parent to echo each move back.
+    const [dragWidth, setDragWidth] = React.useState(null);
+    const width = dragWidth ?? widthProp ?? internalWidth;
     const [dragging, setDragging] = React.useState(false);
     const startResize = (e) => {
         e.preventDefault();
         const startX = e.clientX;
         const startW = width;
-        setDragging(true);
+        // 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;
+        let last = startW;
         const prevSelect = document.body.style.userSelect;
         const prevCursor = document.body.style.cursor;
         document.body.style.userSelect = "none";
         document.body.style.cursor = "col-resize";
         const onMove = (ev) => {
+            if (!moved) {
+                moved = true;
+                setDragging(true);
+            }
             const w = Math.round(Math.min(maxWidth, Math.max(minWidth, startW + (ev.clientX - startX))));
-            setWidth(w);
+            setDragWidth(w);
+            last = w;
         };
         const onUp = () => {
             setDragging(false);
+            setDragWidth(null);
+            if (last !== startW) {
+                onWidthChange?.(last);
+                if (widthProp === undefined)
+                    setInternalWidth(last);
+            }
             document.body.style.userSelect = prevSelect;
             document.body.style.cursor = prevCursor;
             window.removeEventListener("pointermove", onMove);
@@ -35,10 +59,10 @@ export function AppShell({ sidebar, children, defaultWidth = 275, minWidth = 220
         window.addEventListener("pointermove", onMove);
         window.addEventListener("pointerup", onUp);
     };
-    const toggleCollapse = () => setCollapsed((v) => !v);
-    return (_jsxs("div", { className: appshellRecipe({ className }), children: [_jsxs("div", { className: "appshell-side", "data-collapsed": collapsed ? "" : undefined, style: {
+    const toggleCollapse = () => setCollapsed(!collapsed);
+    return (_jsxs("div", { className: appshellRecipe({ className }), ...rest, children: [_jsxs("div", { className: "appshell-side", "data-collapsed": collapsed ? "" : undefined, style: {
                     width: collapsed ? 0 : width,
-                    transition: dragging ? "none" : "width .18s ease",
-                }, children: [_jsx("div", { className: "appshell-side-inner", style: { width }, children: sidebar(toggleCollapse) }), !collapsed && (_jsx("div", { className: "appshell-resize", "data-dragging": dragging ? "" : undefined, "aria-hidden": "true", onPointerDown: startResize }))] }), _jsxs("div", { className: "appshell-main", children: [collapsed && (_jsx("button", { type: "button", className: "appshell-expand", "aria-label": "Expand sidebar", onClick: () => setCollapsed(false), children: _jsx(PanelLeft, { size: 15, strokeWidth: 1.75 }) })), children] })] }));
+                    transition: dragging ? "none" : "width .14s ease",
+                }, children: [_jsx("div", { className: "appshell-side-inner", style: { width }, children: sidebar(toggleCollapse) }), !collapsed && (_jsx("div", { className: "appshell-resize", "data-dragging": dragging ? "" : undefined, "aria-hidden": "true", onPointerDown: startResize }))] }), _jsxs("div", { className: "appshell-main", children: [collapsed && (_jsx("button", { type: "button", className: "appshell-expand", "aria-label": expandLabel, onClick: () => setCollapsed(false), children: _jsx(PanelLeft, { size: 15, strokeWidth: 1.75 }) })), children] })] }));
 }
 AppShell.displayName = "AppShell";

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

@@ -9,11 +9,11 @@ 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: 9px; height: 100%; cursor: col-resize; z-index: 5; touch-action: none; }
-    & .appshell-resize::after { content: ""; position: absolute; top: 0; right: 0; width: 2px; height: 100%; background: transparent; transition: background-color .12s; }
-    & .appshell-resize:hover::after, & .appshell-resize[data-dragging]::after { background: ${c.bgBrandSolid}; }
+    & .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: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"]}; left: ${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}; cursor: pointer; transition: background-color .12s; }
+    & .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; }
     & .appshell-expand:hover { background: ${c.bgRaised}; color: ${c.fgPrimary}; }
   `,
     variants: {},

package/dist/esm/product/authshell/authshell.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { authshellRecipe } from "./authshell.recipe.js";
+/**
+ * The Attio welcome/auth layout (app.attio.com/welcome/*) — measured live.
+ * A centered page frame: an optional top progress bar, a logo, a two-pane
+ * card (the form + an optional product preview, hidden under 1200px), and
+ * a footer. Auth-surface Input/FormField/Button treatment (flatter fields,
+ * 36px buttons) applies automatically to those crisp components when
+ * rendered as `children` — see authshell.recipe.ts.
+ */
+export function AuthShell({ progress, logo, title, children, preview, footer, className, ...rest }) {
+    const hasProgress = typeof progress === "number";
+    const pct = hasProgress
+        ? Math.round(Math.max(0, Math.min(1, progress)) * 100)
+        : 0;
+    return (_jsxs("div", { className: authshellRecipe({ className }), ...rest, children: [hasProgress && (_jsx("div", { className: "authshell-progress", role: "progressbar", "aria-valuenow": pct, "aria-valuemin": 0, "aria-valuemax": 100, children: _jsx("div", { className: "authshell-progress-fill", style: { width: `${pct}%` } }) })), logo != null && _jsx("div", { className: "authshell-logo", children: logo }), _jsxs("div", { className: "authshell-card", children: [_jsx("div", { className: "authshell-pane", children: _jsxs("div", { className: "authshell-body", children: [title != null && _jsx("div", { className: "authshell-title", children: title }), _jsx("div", { className: "authshell-form", children: children })] }) }), preview != null && _jsx("div", { className: "authshell-preview", children: preview })] }), footer != null && _jsx("div", { className: "authshell-footer", children: footer })] }));
+}
+AuthShell.displayName = "AuthShell";

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

@@ -0,0 +1,64 @@
+import { defineRecipe, resolveRecipe } from "../../core/index.js";
+import { contract as c } from "../../tokens/index.js";
+// Attio's welcome/auth surface (app.attio.com/welcome/*) — measured live,
+// 2026-09-15. A centered page frame holding a two-pane card: the form on the
+// left, an optional product preview on the right, with an optional top
+// progress bar and a footer under the card. Every value below is measured
+// from the live app, EXCEPT the 1200px preview-hiding breakpoint (called out
+// at the container query below) — Attio drops the pane in JS somewhere between a
+// measured 954px and 1393px viewport width, so 1200px is chosen, not measured.
+const config = defineRecipe({
+    name: "authshell",
+    base: `min-height: 100%; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; position: relative;
+    background: ${c.bgSurface}; font-family: ${c.font.sans}; font-size: ${c.text.lg}; line-height: 20px; color: ${c.fgPrimary};
+    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
+
+    & .authshell-progress { position: absolute; top: 0; left: 0; width: 100%; height: 2px; background: ${c.borderDefault}; }
+    & .authshell-progress-fill { height: 2px; background: ${c.fgPrimary}; border-radius: 4px; transition: width .2s; }
+
+    & .authshell-logo { margin-top: ${c.space["8"]}; height: 24px; display: flex; align-items: center; }
+
+    & .authshell-card { margin-top: ${c.space["6"]}; display: flex; height: 692px; border-radius: 20px; border: 1px solid ${c.borderSubtle}; overflow: hidden; }
+
+    & .authshell-pane { flex: 0 0 564px; padding: 72px; display: flex; flex-direction: column; box-sizing: border-box; }
+
+    & .authshell-preview { flex: 0 0 564px; padding: 96px 64px; background: ${c.bgSubtle}; border-inline-start: 1px solid color-mix(in srgb, ${c.fgPrimary} 5%, transparent); position: relative; overflow: hidden; box-sizing: border-box; }
+    & .authshell-preview::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 120px; background: linear-gradient(color-mix(in srgb, ${c.bgSubtle} 0%, transparent) 0%, ${c.bgSubtle} 100%); pointer-events: none; }
+
+    & .authshell-body { width: 420px; margin: 0 auto; display: flex; flex-direction: column; gap: ${c.space["8"]}; align-items: center; }
+
+    & .authshell-title { font-size: 20px; line-height: 24px; font-weight: ${c.weight.semibold}; letter-spacing: -0.4px; color: ${c.fgPrimary}; align-self: stretch; }
+
+    & .authshell-form { align-self: stretch; display: flex; flex-direction: column; gap: 28px; }
+
+    & .authshell-footer { margin-top: ${c.space["6"]}; display: flex; align-items: center; gap: ${c.space["1"]}; font-size: ${c.text.sm}; line-height: 16px; color: color-mix(in srgb, ${c.fgPrimary} 63%, transparent); }
+    & .authshell-footer a { color: inherit; font-weight: ${c.weight.medium}; text-decoration: underline; }
+
+    /* Auth-surface control treatment: flatter than the in-app chrome — a plain
+       hairline ring instead of elevation.field's soft glow, and a 36px (not
+       40px) submit. Scoped to .authshell-body so a consumer keeps using
+       crisp's Input / FormField / Button and gets the auth treatment for free. */
+    & .authshell-body .formfield-label { font-size: ${c.text.sm}; line-height: 16px; font-weight: ${c.weight.medium}; letter-spacing: -0.12px; color: color-mix(in srgb, ${c.fgPrimary} 50%, transparent); padding-inline-start: ${c.space["1"]}; }
+    & .authshell-body .formfield { gap: ${c.space["1"]}; }
+    & .authshell-body .input { height: 34px; padding-inline: ${c.space["2.5"]}; border-radius: 10px; background: transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, ${c.fgPrimary} 6%, transparent); font-size: ${c.text.lg}; font-weight: ${c.weight.medium}; letter-spacing: -0.14px; transition: box-shadow .14s, background-color .14s; }
+    & .authshell-body .input:focus { box-shadow: inset 0 0 0 1px ${c.bgBrandSolid}; }
+    /* Same three-layer brand shadow as Button's primary intent, but the auth
+       button's inset ring is measured at rgba(0,0,0,0.06) — a hairline, not
+       the in-app button's rgba(255,255,255,0.07) highlight. */
+    & .authshell-body .button { height: 36px; padding-inline: ${c.space["3"]}; border-radius: 10px; }
+    & .authshell-body .button--intent_primary { box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06), 0 2px 4px -2px rgba(38,109,240,0.12), 0 3px 6px -2px rgba(38,109,240,0.08); }
+
+    /* Attio drops the preview pane in JS on narrow viewports (measured: two
+       panes at 1393px, one at 954px), so 1200px is a chosen threshold inside
+       that bracket, not a measured value. A CONTAINER query, not a media
+       query: the shell is embedded in the docs inside an ~800px column, where
+       a viewport query would keep the 1130px card and overflow it. Asking the
+       shell's own width is what "there isn't room for the preview" means. */
+    container-type: inline-size;
+    @container (max-width: 1200px) { & .authshell-preview { display: none; } }`,
+    variants: {},
+    defaultVariants: {},
+    compoundVariants: [],
+});
+export const authshellRecipe = resolveRecipe(config);
+export default config;

package/dist/esm/product/authshell/index.js

@@ -0,0 +1,2 @@
+export { AuthShell } from "./authshell.js";
+export { authshellRecipe } from "./authshell.recipe.js";

package/dist/esm/product/board/board.js

@@ -7,7 +7,7 @@ import { boardRecipe } from "./board.recipe.js";
  * (the parent owns the cards, so the move is a controlled state update).
  * Measured from Attio's Deals pipeline.
  */
-export function Board({ columns, cards, onCardsChange, renderCard, onNewCard, newCardLabel = "New", className, }) {
+export function Board({ columns, cards, onCardsChange, renderCard, onNewCard, newCardLabel = "New", className, ...rest }) {
     const [dragId, setDragId] = React.useState(null);
     const [overCol, setOverCol] = React.useState(null);
     const move = (cardId, toColumn) => {
@@ -16,7 +16,7 @@ export function Board({ columns, cards, onCardsChange, renderCard, onNewCard, ne
             return;
         onCardsChange?.(cards.map((c) => (c.id === cardId ? { ...c, columnId: toColumn } : c)));
     };
-    return (_jsx("div", { className: boardRecipe({ className }), children: columns.map((col) => {
+    return (_jsx("div", { className: boardRecipe({ className }), ...rest, children: columns.map((col) => {
             const colCards = cards.filter((c) => c.columnId === col.id);
             return (_jsxs("div", { className: "board-col", "data-over": overCol === col.id ? "" : undefined, onDragOver: (e) => {
                     if (!dragId)

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

@@ -11,7 +11,7 @@ const config = defineRecipe({
     & .board-col-dot { width: 9px; height: 9px; border-radius: ${c.radius.full}; flex-shrink: 0; }
     & .board-col-title { font-size: ${c.text.lg}; font-weight: ${c.weight.semibold}; color: ${c.fgPrimary}; }
     & .board-col-count { font-size: ${c.text.md}; color: ${c.fgMuted}; }
-    & .board-col-add { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin-left: auto; padding: 0; border: none; border-radius: ${c.radius.md}; background: none; color: ${c.fgMuted}; cursor: pointer; }
+    & .board-col-add { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin-inline-start: auto; padding: 0; border: none; border-radius: ${c.radius.md}; background: none; color: ${c.fgMuted}; font-family: inherit; cursor: pointer; }
     & .board-col-add:hover { background: color-mix(in srgb, ${c.fgPrimary} 6%, transparent); color: ${c.fgPrimary}; }
     & .board-col-body { display: flex; flex-direction: column; gap: ${c.space["2"]}; flex: 1; min-height: 48px; padding: ${c.space["1"]}; border-radius: ${c.radius.lg}; overflow-y: auto; transition: background 0.12s; }
     & .board-col[data-over] .board-col-body { background: color-mix(in srgb, ${c.bgBrandSolid} 7%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, ${c.bgBrandSolid} 30%, transparent); }