@crewlethq/ui 0.64.0 → 0.65.0

package/dist/{chunk-3V5T5K5H.js → chunk-7MGXHCVK.js}

@@ -1,6 +1,6 @@
 import { SlideStage } from './chunk-RMEBFYL7.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './SlideGrid-FJA33DV4.css';
+import './SlideGrid-J4LAOUSJ.css';
 import { EyeOffGlyph } from '@crewlethq/icons/glyphs';
 import { jsx, jsxs } from 'react/jsx-runtime';
 

package/dist/{chunk-MMZZGJHX.js → chunk-7SYEOJLP.js}

@@ -1,6 +1,6 @@
 import { VisuallyHidden } from './chunk-UT6CW3C7.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './ChoiceButtons-HWXEF2H3.css';
+import './ChoiceButtons-Q2ET3I2N.css';
 import { useId } from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 

package/dist/{chunk-MKKX6N7C.js → chunk-7XKDPTZ5.js}

@@ -1,8 +1,8 @@
 import { CardHeaderSlotContext } from './chunk-AV2DXAEL.js';
-import { Count } from './chunk-5KRRJNQO.js';
+import { Count } from './chunk-MLDTLZAO.js';
 import { useHeadingLevel, HeadingLevelProvider, nextHeadingLevel, headingTag } from './chunk-PQADV6P6.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './Card-JR2UPQH7.css';
+import './Card-O35OMBQ5.css';
 import { createContext, useId, useState, isValidElement, useRef, useCallback, useMemo, Children, cloneElement, useContext, useEffect, Fragment } from 'react';
 import { jsx, jsxs } from 'react/jsx-runtime';
 

package/dist/{chunk-ACRRRPWT.js → chunk-ANTAQAR4.js}

@@ -1,6 +1,6 @@
 import { VisuallyHidden } from './chunk-UT6CW3C7.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './Kbd-MCWJTRTT.css';
+import './Kbd-YO5U2PSZ.css';
 import { Fragment } from 'react';
 import { jsx, jsxs } from 'react/jsx-runtime';
 

package/dist/{chunk-5IPPLWVA.js → chunk-B76OKJMX.js}

@@ -1,6 +1,7 @@
+import { StatusDot } from './chunk-WIATRXEJ.js';
 import { toISO, useNow, formatRelative } from './chunk-L6NG7CUA.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './EditingStatus-YU7EGM6Y.css';
+import './EditingStatus-TMGT265J.css';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
 var LABELS = {
@@ -14,7 +15,7 @@ function EditingStatus({ dirty, saving = false, savedAt, labels, className }) {
   const showSaved = !saving && !dirty && savedAt !== void 0 && savedAt !== null && toISO(savedAt) !== null;
   const state = saving ? text.saving : dirty ? text.unsaved : showSaved ? text.saved : null;
   return /* @__PURE__ */ jsxs("span", { className: cx("crewlet-editing-status", dirty && "crewlet-editing-status--dirty", className), children: [
-    /* @__PURE__ */ jsx("span", { className: "crewlet-editing-status__dot", "aria-hidden": "true" }),
+    /* @__PURE__ */ jsx(StatusDot, { tone: dirty ? "brand" : "neutral", className: "crewlet-editing-status__dot" }),
     /* @__PURE__ */ jsxs("span", { className: "crewlet-editing-status__text", children: [
       /* @__PURE__ */ jsxs("span", { role: "status", "aria-live": "polite", className: "crewlet-editing-status__live", children: [
         /* @__PURE__ */ jsx("span", { className: "crewlet-editing-status__label", children: text.editing }),

package/dist/{chunk-5AQBPHZD.js → chunk-BKP6XCAJ.js}

@@ -1,7 +1,7 @@
 import { AVATAR_SIZES, Avatar } from './chunk-PZKHBB7D.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './Avatar-3C2H2WA4.css';
-import './AvatarStack-GEJBNV7E.css';
+import './Avatar-FDQSCB7A.css';
+import './AvatarStack-7I3P7LCK.css';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 function counted(count, one, many) {

package/dist/{chunk-QBI5ETKY.js → chunk-BRLZXYPA.js}

@@ -1,6 +1,6 @@
 import { VisuallyHidden } from './chunk-UT6CW3C7.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './Skeleton-V735HRGM.css';
+import './Skeleton-7ZA5ETJM.css';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 
 var range = (n) => Array.from({ length: Math.max(0, n) }, (_, i) => i);

package/dist/{chunk-PHQPQZUX.js → chunk-BVNFNFA6.js}

@@ -1,15 +1,15 @@
 import { richEditorLabels } from './chunk-CSQTDGTS.js';
 import { Callout } from './chunk-BPCY7ZID.js';
-import { Skeleton } from './chunk-QBI5ETKY.js';
+import { Skeleton } from './chunk-BRLZXYPA.js';
 import { Button } from './chunk-7QTPJDRF.js';
-import './RichEditor-NPD2KAPS.css';
+import './RichEditor-5CF3QV3J.css';
 import { forwardRef, useState, useEffect } from 'react';
 import { jsx } from 'react/jsx-runtime';
 
 var engine = null;
 var loading = null;
 function loadEngine() {
-  loading ??= import('./Editor-GHHWWXXL.js').then(
+  loading ??= import('./Editor-URGZOK2S.js').then(
     (module) => {
       engine = module.Editor;
       return engine;

package/dist/{chunk-OD3Z6QKN.js → chunk-BWAUL5MB.js}

@@ -1,11 +1,11 @@
-import { Select } from './chunk-XQZ6EWOE.js';
-import { Combobox } from './chunk-PK2P2QH6.js';
-import { FormField, Textarea, InputAffix } from './chunk-TLIJG4TP.js';
-import './Input-GMOWHZRG.css';
+import { Select } from './chunk-VK45YJLH.js';
+import { Combobox } from './chunk-ZUBFVK6B.js';
+import { FormField, Textarea, InputAffix } from './chunk-ETSF7SU6.js';
+import './Input-GEFFMKBS.css';
 import './VisuallyHidden-AOEXU5EB.css';
 import './HitArea-QUOS6ZDJ.css';
 import './Combobox-GBCWXWEB.css';
-import './Select-F526HLNR.css';
+import './Select-6BQPBOHH.css';
 import './ValueField-EIBD6RYS.css';
 import { useId, useRef, useState } from 'react';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';

package/dist/{chunk-PWG3VHRQ.js → chunk-BXCL6P5Z.js}

@@ -1,6 +1,6 @@
 import { useFocusModality } from './chunk-NUZHC6MM.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './Document-TZ2NBLOR.css';
+import './Document-M6JYGLWV.css';
 import { forwardRef, useRef, useCallback, useLayoutEffect, useEffect } from 'react';
 import { jsx } from 'react/jsx-runtime';
 
@@ -55,6 +55,20 @@ var DocumentTitleField = forwardRef(function DocumentTitleField2({ error = false
     observer.observe(element);
     return () => observer.disconnect();
   }, [fit]);
+  useEffect(() => {
+    const fonts = typeof document === "undefined" ? void 0 : document.fonts;
+    if (!fonts) return void 0;
+    let live = true;
+    const loaded = () => {
+      if (live) fit();
+    };
+    void fonts.ready.then(loaded);
+    fonts.addEventListener("loadingdone", loaded);
+    return () => {
+      live = false;
+      fonts.removeEventListener("loadingdone", loaded);
+    };
+  }, [fit]);
   useEffect(() => {
     const element = own.current;
     if (!element) return void 0;

package/dist/{chunk-WDPREXOL.js → chunk-CFY257ND.js}

@@ -1,14 +1,14 @@
 import { useClipboard } from './chunk-STJ7QBC3.js';
-import { Modal } from './chunk-KVWZDCTQ.js';
+import { Modal } from './chunk-I24FI46B.js';
 import { EmptyValue } from './chunk-RE3FBGQQ.js';
 import { useCardHeaderSlot } from './chunk-AV2DXAEL.js';
-import { Checkbox } from './chunk-KIPAFCVS.js';
-import { Menu } from './chunk-LODRX4FU.js';
+import { Checkbox } from './chunk-PBCNINMB.js';
+import { Menu } from './chunk-T73DMDU4.js';
 import { Button } from './chunk-7QTPJDRF.js';
-import { IconButton } from './chunk-2XWFWNDT.js';
+import { IconButton } from './chunk-UAUP6XGK.js';
 import { VisuallyHidden } from './chunk-UT6CW3C7.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './DataTable-NL2YWAIA.css';
+import './DataTable-H43JSHOI.css';
 import React, { useState, useCallback, useMemo, useRef, useLayoutEffect, useEffect, useId } from 'react';
 import { createPortal } from 'react-dom';
 import { CheckGlyph, CircleAlertGlyph, CopyGlyph, ChevronsLeftGlyph, ChevronLeftGlyph, ChevronRightGlyph, ChevronsRightGlyph, SettingsGlyph, GripVerticalGlyph, ChevronUpGlyph, ChevronDownGlyph, TrashGlyph, ArrowUpGlyph, ArrowDownGlyph, ChevronsUpDownGlyph, RotateCcwGlyph } from '@crewlethq/icons/glyphs';
@@ -207,6 +207,8 @@ var DATA_TABLE_LABELS = {
   loading: "Loading rows",
   tone: { info: "Active", warning: "Needs attention", danger: "Failed" }
 };
+var COLUMN_LABEL_INFIX = "-col-";
+var columnLabelKey = (columnKey) => columnKey.replace(/\s+/g, "_");
 var DataTable = ({
   data = [],
   columns = {},
@@ -430,6 +432,12 @@ var DataTable = ({
   const scrollRef = useRef(null);
   const [fitRequests, setFitRequests] = useState(0);
   const requestFit = useCallback(() => setFitRequests((n) => n + 1), []);
+  const [railOverflows, setRailOverflows] = useState(false);
+  const syncRailOverflow = useCallback(() => {
+    const el = scrollRef.current;
+    if (!el) return;
+    setRailOverflows(el.scrollWidth - el.clientWidth > 1);
+  }, []);
   const emptyCellRef = useRef(null);
   const [emptySaid, setEmptySaid] = useState("");
   const resetToDefault = () => {
@@ -493,7 +501,11 @@ var DataTable = ({
     if (visibleDataKeys.length === 0) return;
     let chromeWidth = 0;
     if (expandable2) chromeWidth += 32;
-    if (hasChromeColumn2) chromeWidth += isCompact2 ? 48 : columnWidths2.__actions ?? 60;
+    if (hasChromeColumn2) {
+      const actions = isCompact2 ? el.querySelector(".crewlet-data-table__th--actions") : null;
+      const drawn = actions ? Math.ceil(actions.getBoundingClientRect().width) : 0;
+      chromeWidth += isCompact2 ? drawn > 0 ? drawn : 48 : columnWidths2.__actions ?? 60;
+    }
     chromeWidth += visibleStickyKeys.reduce(
       (sum, key) => sum + (columnWidths2[key] ?? minColumnWidth2),
       0
@@ -514,9 +526,46 @@ var DataTable = ({
     const available = containerWidth - chromeWidth;
     const leftover = available - dataTotal;
     if (leftover >= 0 && leftover <= 1) return;
+    const px = (value) => Number.parseFloat(value) || 0;
+    const labelSpans = new Map(
+      Array.from(el.querySelectorAll("thead th span[id]"), (span) => [
+        span.id.slice(span.id.indexOf(COLUMN_LABEL_INFIX) + COLUMN_LABEL_INFIX.length),
+        span
+      ])
+    );
+    const headerFloor = (key) => {
+      const label = labelSpans.get(columnLabelKey(key));
+      const row = label?.parentElement;
+      const th = label?.closest("th");
+      if (!label || !row || !th) return 0;
+      const range = label.ownerDocument.createRange();
+      if (typeof range.getBoundingClientRect !== "function") return 0;
+      range.selectNodeContents(label);
+      const name = range.getBoundingClientRect().width;
+      if (name <= 0) return 0;
+      const rowStyle = getComputedStyle(row);
+      const beside = Array.from(row.children).filter(
+        (child) => child !== label && getComputedStyle(child).position !== "absolute"
+      );
+      let need = name + px(rowStyle.paddingLeft) + px(rowStyle.paddingRight);
+      beside.forEach((child) => {
+        need += child.getBoundingClientRect().width + px(rowStyle.columnGap);
+      });
+      if (row !== th) {
+        const cellStyle = getComputedStyle(th);
+        need += px(cellStyle.paddingLeft) + px(cellStyle.paddingRight);
+      }
+      return Math.ceil(need);
+    };
+    const floors = new Map(
+      visibleDataKeys.map((key) => [
+        key,
+        Math.max(minColumnWidth2, columns2[key]?.minWidth ?? 0, headerFloor(key))
+      ])
+    );
     const next = { ...columnWidths2 };
     const widthOf = (key) => next[key] ?? minColumnWidth2;
-    const floorOf = (key) => Math.max(minColumnWidth2, columns2[key]?.minWidth ?? 0);
+    const floorOf = (key) => floors.get(key) ?? minColumnWidth2;
     visibleDataKeys.forEach((key) => {
       next[key] = widthOf(key);
     });
@@ -554,6 +603,7 @@ var DataTable = ({
     let lastWidth = el.clientWidth;
     if (typeof ResizeObserver !== "function") return;
     const observer = new ResizeObserver(() => {
+      syncRailOverflow();
       const w = el.clientWidth;
       if (w > 0 && w !== lastWidth) {
         lastWidth = w;
@@ -561,8 +611,10 @@ var DataTable = ({
       }
     });
     observer.observe(el);
+    const table = el.querySelector("table");
+    if (table) observer.observe(table);
     return () => observer.disconnect();
-  }, [requestFit]);
+  }, [requestFit, syncRailOverflow]);
   useEffect(() => {
     const chosen = Object.keys(resizedColumns);
     if (chosen.length === 0) {
@@ -759,12 +811,7 @@ var DataTable = ({
   const [settingsSaid, setSettingsSaid] = useState("");
   const instanceId = useId();
   const reorderHintId = `${instanceId}-reorder`;
-  const columnLabelId = (columnKey) => (
-    // Whitespace out of the key: `aria-labelledby` is a SPACE-SEPARATED list
-    // of ids, so a column keyed "created at" would point the cell at two ids
-    // that do not exist and leave the header with no name at all.
-    `${instanceId}-col-${columnKey.replace(/\s+/g, "_")}`
-  );
+  const columnLabelId = (columnKey) => `${instanceId}${COLUMN_LABEL_INFIX}${columnLabelKey(columnKey)}`;
   const handleToggleColumn = (columnKey) => {
     if (whyFixed(columnKey, draftVisibleColumns) !== null && draftVisibleColumns[columnKey] !== false) return;
     setDraftVisibleColumns((prev) => ({ ...prev, [columnKey]: !prev[columnKey] }));
@@ -1025,7 +1072,6 @@ var DataTable = ({
         {
           scope: "col",
           className: "crewlet-data-table__th--chrome crewlet-data-table__th--actions",
-          style: { width: 1 },
           children: /* @__PURE__ */ jsx(VisuallyHidden, { children: labels.actions })
         },
         "__actions"
@@ -1113,6 +1159,7 @@ var DataTable = ({
   };
   const displayedData = getDisplayedData();
   const bodyHoldsRows = loading && displayedData.length === 0 || !error && displayedData.length > 0;
+  useLayoutEffect(syncRailOverflow, [syncRailOverflow, columnWidths, fittedColumnKeys, bodyHoldsRows, displayedData.length]);
   const visibleColumnKeys = columnOrder.filter(isColumnVisible);
   const firstVisibleKey = columnOrder.find(
     (key) => columns[key]?.sticky !== "right" && isColumnVisible(key)
@@ -1319,7 +1366,8 @@ var DataTable = ({
            */
           isCompact && columnOrder.some(
             (k) => columns[k]?.sticky === "right" && isColumnVisible(k)
-          ) ? "crewlet-data-table__rail--frozen" : void 0
+          ) ? "crewlet-data-table__rail--frozen" : void 0,
+          railOverflows ? "crewlet-data-table__rail--overflows" : void 0
         ].filter(Boolean).join(" "),
         style: isCompact ? {
           "--crewlet-data-table-sticky-pane-width": `${columnOrder.filter((key) => columns[key]?.sticky === "right" && isColumnVisible(key)).reduce((sum, key) => sum + (columnWidths[key] ?? minColumnWidth), 0)}px`

package/dist/{chunk-PUJUWLCX.js → chunk-CLJGFOTV.js}

@@ -1,7 +1,7 @@
 import { HeadingLevelProvider } from './chunk-PQADV6P6.js';
 import { useAppShellAside, ResizeHandle } from './chunk-PIYJNCN7.js';
 import { useModalLayer } from './chunk-H5XTJ7GJ.js';
-import { IconButton } from './chunk-2XWFWNDT.js';
+import { IconButton } from './chunk-UAUP6XGK.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import { createContext, useId, useRef, useContext, useLayoutEffect, useEffect, useMemo } from 'react';
 import { MinimizeGlyph, MaximizeGlyph, XGlyph } from '@crewlethq/icons/glyphs';

package/dist/{chunk-HACEB6L4.js → chunk-CSXJIIO4.js}

@@ -1,7 +1,7 @@
 import { Tooltip } from './chunk-I33UIUZD.js';
 import { VisuallyHidden } from './chunk-UT6CW3C7.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './FactList-G2H73NFR.css';
+import './FactList-QEOHLHX3.css';
 import { LockGlyph } from '@crewlethq/icons/glyphs';
 import { jsx, jsxs } from 'react/jsx-runtime';
 

package/dist/{chunk-QC2DEQCN.js → chunk-CVKANYHD.js}

@@ -1,6 +1,6 @@
 import { VisuallyHidden } from './chunk-UT6CW3C7.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './AddPill-RYCY56P4.css';
+import './AddPill-FPM5RUKI.css';
 import { useState, useId, useRef, useCallback, useEffect, Fragment } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 

package/dist/{chunk-VBO2GYWX.js → chunk-CWYU7DNT.js}

@@ -1,6 +1,6 @@
 import { useAppShellPeek, ResizeHandle } from './chunk-PIYJNCN7.js';
 import { ButtonLink } from './chunk-7QTPJDRF.js';
-import { IconButton } from './chunk-2XWFWNDT.js';
+import { IconButton } from './chunk-UAUP6XGK.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './HitArea-QUOS6ZDJ.css';
 import './ResizeHandle-2UNSZ4ZQ.css';

package/dist/{chunk-O7VXE4TO.js → chunk-CX6QT4CH.js}

@@ -1,10 +1,10 @@
 import { useReorder } from './chunk-MPVMB2DV.js';
-import { Input } from './chunk-TLIJG4TP.js';
-import { Menu } from './chunk-LODRX4FU.js';
-import { IconButton } from './chunk-2XWFWNDT.js';
+import { Input } from './chunk-ETSF7SU6.js';
+import { Menu } from './chunk-T73DMDU4.js';
+import { IconButton } from './chunk-UAUP6XGK.js';
 import { VisuallyHidden } from './chunk-UT6CW3C7.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './DocTabsEditor-4M452LNS.css';
+import './DocTabsEditor-25J6MYZF.css';
 import { useState, useRef, useId } from 'react';
 import { PlusGlyph, PencilGlyph, ArrowUpGlyph, ArrowDownGlyph, TrashGlyph, GripVerticalGlyph, EllipsisGlyph } from '@crewlethq/icons/glyphs';
 import { jsx, jsxs } from 'react/jsx-runtime';

package/dist/{chunk-J4HPMS7F.js → chunk-CYYBE2MM.js}

@@ -1,4 +1,4 @@
-import { Count } from './chunk-5KRRJNQO.js';
+import { Count } from './chunk-MLDTLZAO.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './ArrangeGroup-KRWWOJKR.css';
 import { useId } from 'react';

package/dist/{chunk-YSHQQNB6.js → chunk-DKJJ434E.js}

@@ -1,13 +1,13 @@
 import { PrincipalAvatar } from './chunk-CI3VPIJN.js';
 import { toInstant, RelativeTime, formatExact, toISO } from './chunk-L6NG7CUA.js';
-import { Document } from './chunk-PWG3VHRQ.js';
-import { Composer } from './chunk-5CY6BW4Y.js';
-import { Count } from './chunk-5KRRJNQO.js';
+import { Document } from './chunk-BXCL6P5Z.js';
+import { Composer } from './chunk-5OFRDX66.js';
+import { Count } from './chunk-MLDTLZAO.js';
 import { useHeadingLevel, headingTag } from './chunk-PQADV6P6.js';
 import { Button } from './chunk-7QTPJDRF.js';
-import { IconButton } from './chunk-2XWFWNDT.js';
+import { IconButton } from './chunk-UAUP6XGK.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './CommentThread-7VXOFTZO.css';
+import './CommentThread-FRXTDNV6.css';
 import { useState, useRef, useId, useMemo } from 'react';
 import { MessageSquareGlyph, XGlyph } from '@crewlethq/icons/glyphs';
 import { jsxs, jsx } from 'react/jsx-runtime';

package/dist/{chunk-SPCSFJNY.js → chunk-DMK2A4IK.js}

@@ -1,6 +1,6 @@
-import { CopyButton } from './chunk-IOTN23FZ.js';
+import { CopyButton } from './chunk-IYG4ETAQ.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './CodeBlock-N5ETJF24.css';
+import './CodeBlock-T47UA5GM.css';
 import { forwardRef, useRef, useState, useLayoutEffect } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
@@ -52,8 +52,10 @@ var CodeBlock = forwardRef(function CodeBlock2({
     selection.addRange(range);
   };
   let content = body;
+  let digits;
   if (perLine) {
     const lines = body.split("\n");
+    if (showLineNumbers) digits = String(lines.length).length;
     content = lines.map((line, index) => /* @__PURE__ */ jsxs("span", { className: "crewlet-codeblock__line", children: [
       showLineNumbers ? /* @__PURE__ */ jsx("span", { className: "crewlet-codeblock__ln", "aria-hidden": true, children: index + 1 }) : null,
       prompt === void 0 ? null : /* @__PURE__ */ jsx("span", { className: "crewlet-codeblock__prompt", "aria-hidden": true, children: prompt }),
@@ -73,9 +75,10 @@ var CodeBlock = forwardRef(function CodeBlock2({
         maxHeight !== void 0 && "crewlet-codeblock--bounded",
         className
       ),
-      style: maxHeight === void 0 ? style : {
+      style: maxHeight === void 0 && digits === void 0 ? style : {
         ...style,
-        "--crewlet-codeblock-max-height": typeof maxHeight === "number" ? `${maxHeight}px` : maxHeight
+        ...maxHeight === void 0 ? null : { "--crewlet-codeblock-max-height": typeof maxHeight === "number" ? `${maxHeight}px` : maxHeight },
+        ...digits === void 0 ? null : { "--crewlet-codeblock-digits": String(digits) }
       },
       children: [
         showHeader ? /* @__PURE__ */ jsxs("div", { className: "crewlet-codeblock__header", children: [

package/dist/{chunk-OJ2QULVH.js → chunk-DO4J4TBZ.js}

@@ -1,8 +1,8 @@
 import { IconTile } from './chunk-3LI4TRUR.js';
-import { Tag } from './chunk-KYIAFNU7.js';
+import { Tag } from './chunk-I5OIKDX2.js';
 import { useHeadingLevel, headingTag } from './chunk-PQADV6P6.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './ReviewList-TIN6C2JN.css';
+import './ReviewList-2IZA67EX.css';
 import { createElement } from 'react';
 import { CircleAlertGlyph } from '@crewlethq/icons/glyphs';
 import { jsx, jsxs } from 'react/jsx-runtime';

package/dist/{chunk-BGLKLXL3.js → chunk-DOY3KC6I.js}

@@ -1,5 +1,5 @@
 import { cx } from './chunk-ODEQTPFM.js';
-import './ArtifactAccess-Y53ZTRFS.css';
+import './ArtifactAccess-RNNN2EIG.css';
 import { BuildingComplexGlyph, UsersGlyph, LockGlyph } from '@crewlethq/icons/glyphs';
 import { jsx, jsxs } from 'react/jsx-runtime';
 

package/dist/{chunk-5XACKNYR.js → chunk-DPNVKWJX.js}

@@ -1,7 +1,7 @@
-import { CursorFlag } from './chunk-3BYIWOTV.js';
-import { presenceHueClass } from './chunk-I6POAB4V.js';
+import { CursorFlag } from './chunk-MMCYH5LB.js';
+import { presenceHueClass } from './chunk-EFX2YC5T.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './LiveCursor-DZHGIYWE.css';
+import './LiveCursor-Z6DHHLWI.css';
 import { useState, useEffect } from 'react';
 import { MousePointer2Glyph } from '@crewlethq/icons/glyphs';
 import { jsxs, jsx } from 'react/jsx-runtime';

package/dist/{chunk-JAOJLEYB.js → chunk-DXVJSBEW.js}

@@ -1,14 +1,14 @@
 import { Tooltip } from './chunk-I33UIUZD.js';
-import { SegmentedControl } from './chunk-F7VBYCW2.js';
+import { SegmentedControl } from './chunk-W6UVBBNH.js';
 import { ArtifactIcon } from './chunk-AVL52EME.js';
-import { isApplePlatform, Kbd } from './chunk-ACRRRPWT.js';
-import { Menu } from './chunk-LODRX4FU.js';
+import { isApplePlatform, Kbd } from './chunk-ANTAQAR4.js';
+import { Menu } from './chunk-T73DMDU4.js';
 import { Button } from './chunk-7QTPJDRF.js';
-import { IconButton } from './chunk-2XWFWNDT.js';
+import { IconButton } from './chunk-UAUP6XGK.js';
 import { returnFocus } from './chunk-NUZHC6MM.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './ArtifactKinds-O3CALPVX.css';
-import './ArtifactBar-LEBMR35Y.css';
+import './ArtifactBar-X46WJNW7.css';
 import { useId, useState, useRef, useEffect } from 'react';
 import { ChevronLeftGlyph, EllipsisGlyph, ChevronDownGlyph } from '@crewlethq/icons/glyphs';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';

package/dist/{chunk-7SRSPU4O.js → chunk-E55DKVY7.js}

@@ -1,16 +1,16 @@
 import { useMediaMatch } from './chunk-RTPQDNW3.js';
-import { Menu } from './chunk-LODRX4FU.js';
+import { Menu } from './chunk-T73DMDU4.js';
 import { PeekContext, AsideContext, ResizeHandle, clampSize } from './chunk-PIYJNCN7.js';
 import { HIT_AREA_CLASS } from './chunk-2YTOOH3A.js';
 import { focusables, useModalLayer, isComposing, layerCount } from './chunk-H5XTJ7GJ.js';
-import { IconButton } from './chunk-2XWFWNDT.js';
+import { IconButton } from './chunk-UAUP6XGK.js';
 import { returnFocus } from './chunk-NUZHC6MM.js';
 import { VisuallyHidden } from './chunk-UT6CW3C7.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './HitArea-QUOS6ZDJ.css';
-import './AppShell-ZVCJRGXH.css';
+import './AppShell-LZQA3XU4.css';
 import './ResizeHandle-2UNSZ4ZQ.css';
-import { createContext, forwardRef, useContext, useId, useState, useRef, useCallback, useEffect, useLayoutEffect } from 'react';
+import { createContext, forwardRef, useContext, useSyncExternalStore, useCallback, useId, useState, useRef, useEffect, useLayoutEffect } from 'react';
 import { breakpoint } from '@crewlethq/tokens';
 import { ChevronUpGlyph, ChevronsUpDownGlyph, ChevronRightGlyph, MenuGlyph } from '@crewlethq/icons/glyphs';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
@@ -79,6 +79,49 @@ function AccountRow({
     actions ? /* @__PURE__ */ jsx("div", { className: "crewlet-account-row__actions", children: actions }) : null
   ] });
 }
+function createScreenWidthStore() {
+  let width = null;
+  const listeners = /* @__PURE__ */ new Set();
+  return {
+    get: () => width,
+    set(next) {
+      if (next === width) return;
+      width = next;
+      for (const listener of listeners) listener();
+    },
+    subscribe(listener) {
+      listeners.add(listener);
+      return () => listeners.delete(listener);
+    }
+  };
+}
+var ScreenWidthContext = createContext(null);
+var noSubscription = () => () => {
+};
+function contentInlineSize(element) {
+  if (element.getClientRects().length === 0) return null;
+  const style = getComputedStyle(element);
+  const padding = (Number.parseFloat(style.paddingLeft) || 0) + (Number.parseFloat(style.paddingRight) || 0);
+  return Math.max(0, Math.round(element.clientWidth - padding));
+}
+function useScreenWidth() {
+  const store = useContext(ScreenWidthContext);
+  return useSyncExternalStore(
+    store ? store.subscribe : noSubscription,
+    () => store ? store.get() : null,
+    () => null
+  );
+}
+function useScreenBelow(width) {
+  const store = useContext(ScreenWidthContext);
+  const window2 = useMediaMatch(`(width < ${width}px)`);
+  const read = useCallback(() => {
+    const measured2 = store ? store.get() : null;
+    return measured2 === null ? null : measured2 < width;
+  }, [store, width]);
+  const measured = useSyncExternalStore(store ? store.subscribe : noSubscription, read, () => null);
+  return measured ?? window2;
+}
 var APP_SHELL_ASIDE_WIDTH = 420;
 var NARROW = `(width < ${breakpoint.shell})`;
 var AppShellContext = createContext(null);
@@ -167,6 +210,21 @@ function AppShell({
     observer.observe(frame);
     return () => observer.disconnect();
   }, [asideColumn]);
+  const content = useRef(null);
+  const [screenWidth] = useState(createScreenWidthStore);
+  useLayoutEffect(() => {
+    const column = content.current;
+    if (!column) return void 0;
+    const measure = () => screenWidth.set(contentInlineSize(column));
+    measure();
+    if (typeof ResizeObserver === "undefined") return void 0;
+    const observer = new ResizeObserver(measure);
+    observer.observe(column);
+    return () => {
+      observer.disconnect();
+      screenWidth.set(null);
+    };
+  }, [screenWidth]);
   const shell = {
     narrow,
     drawerOpen,
@@ -238,7 +296,7 @@ function AppShell({
           topbar,
           banner ? /* @__PURE__ */ jsx("div", { className: "crewlet-app-shell__banner", children: banner }) : null,
           /* @__PURE__ */ jsxs("div", { className: "crewlet-app-shell__body", children: [
-            /* @__PURE__ */ jsx("main", { id: main, ref: setMain, className: "crewlet-app-shell__main", tabIndex: -1, children: /* @__PURE__ */ jsx("div", { className: "crewlet-app-shell__content", children }) }),
+            /* @__PURE__ */ jsx("main", { id: main, ref: setMain, className: "crewlet-app-shell__main", tabIndex: -1, children: /* @__PURE__ */ jsx("div", { ref: content, className: "crewlet-app-shell__content", children: /* @__PURE__ */ jsx(ScreenWidthContext.Provider, { value: screenWidth, children }) }) }),
             hasPeek ? /* @__PURE__ */ jsx(PeekContext.Provider, { value: { shape: peekShape }, children: peek }) : null
           ] }),
           footer
@@ -598,4 +656,4 @@ function useStoredWidth({ key, min, max, storage }) {
   return { width, setWidth, commitWidth };
 }
 
-export { APP_SHELL_ASIDE_WIDTH, AccountRow, AppShell, AppShellRail, AppShellRailRow, AppShellRailStatus, AppShellToggle, AppShellTopbar, readStoredWidth, useAppShell, useStoredWidth };
+export { APP_SHELL_ASIDE_WIDTH, AccountRow, AppShell, AppShellRail, AppShellRailRow, AppShellRailStatus, AppShellToggle, AppShellTopbar, readStoredWidth, useAppShell, useScreenBelow, useScreenWidth, useStoredWidth };

package/dist/{chunk-GXQ3B46I.js → chunk-EE3DJMSQ.js}

@@ -1,5 +1,5 @@
 import { cx } from './chunk-ODEQTPFM.js';
-import './CalendarGrid-V6TQ5QKS.css';
+import './CalendarGrid-TT624SDR.css';
 import { useRef, useMemo, useEffect } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
@@ -136,6 +136,11 @@ function CalendarGrid({
     }
   }
   const nameOf = (date) => dayLabel ? dayLabel(date) : `${weekdayNames[new Date(date.year, date.month, date.day).getDay()]} ${date.day} ${monthNames[date.month]} ${date.year}`;
+  const banded = (cell) => {
+    if (!cell || !cell.inMonth && !showOutsideDays) return false;
+    if (!(selected?.some((day) => sameDay(day, cell.date)) ?? false)) return inRange?.(cell.date) ?? false;
+    return (inRange?.(shiftDay(cell.date, 1)) ?? false) || (inRange?.(shiftDay(cell.date, -1)) ?? false);
+  };
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -159,7 +164,7 @@ function CalendarGrid({
             weekday
           );
         }) }),
-        weeks.map((week) => /* @__PURE__ */ jsx("div", { role: "row", className: "crewlet-calendar__week", children: week.map(({ date, inMonth }) => {
+        weeks.map((week, row) => /* @__PURE__ */ jsx("div", { role: "row", className: "crewlet-calendar__week", children: week.map(({ date, inMonth }, column) => {
           if (!inMonth && !showOutsideDays) {
             return /* @__PURE__ */ jsx(
               "span",
@@ -176,6 +181,10 @@ function CalendarGrid({
           const isToday = sameDay(date, now);
           const opensRange = chosen && (inRange?.(shiftDay(date, 1)) ?? false);
           const closesRange = chosen && (inRange?.(shiftDay(date, -1)) ?? false);
+          const band = between || opensRange || closesRange;
+          const joinedAfter = band && banded(week[column + 1]);
+          const joinedBelow = band && banded(weeks[row + 1]?.[column]);
+          const joinedCorner = joinedAfter && joinedBelow && banded(weeks[row + 1]?.[column + 1]);
           return /* @__PURE__ */ jsx(
             "span",
             {
@@ -194,6 +203,9 @@ function CalendarGrid({
                 between && "is-in-range",
                 opensRange && "is-range-start",
                 closesRange && "is-range-end",
+                joinedAfter && "is-joined-after",
+                joinedBelow && "is-joined-below",
+                joinedCorner && "is-joined-corner",
                 isToday && "is-today"
               ),
               onClick: () => {

package/dist/{chunk-I6POAB4V.js → chunk-EFX2YC5T.js}

@@ -1,5 +1,5 @@
 import { cx } from './chunk-ODEQTPFM.js';
-import './PresenceRing-M4C22Q6U.css';
+import './PresenceRing-ZMVVTYMH.css';
 import { jsx } from 'react/jsx-runtime';
 
 function presenceHueClass(hue) {