@crewlethq/ui 0.32.0 → 0.34.0

package/dist/WidgetFrame/WidgetFrame.d.ts

@@ -50,6 +50,13 @@ export interface WidgetFrameProps extends Omit<HTMLAttributes<HTMLElement>, 'tit
      * other figure keeps the frame's inset.
      */
     flush?: boolean | undefined;
+    /**
+     * Keep the title's two lines whether it fills them or not, so the figures of
+     * a row of frames start on one line: a number under a title of one line and
+     * a number under a title of two stood a line apart. For a row of figures
+     * read across (stats and meters), never for a frame alone in its row.
+     */
+    holdTitle?: boolean | undefined;
     /** The heading level of the title. Default 3, under a board's own heading. */
     headingLevel?: 2 | 3 | 4 | undefined;
     /** Overrides the shared clock, for a story or a suite. */
@@ -83,4 +90,4 @@ export interface WidgetFrameProps extends Omit<HTMLAttributes<HTMLElement>, 'tit
  * Sits inside the host's `ArrangeFrame`, which owns the grid, the drag and
  * the resize; this owns what is inside the card.
  */
-export declare function WidgetFrame({ title, source, onCite, actions, flush, headingLevel, now, labels, className, children, ...rest }: WidgetFrameProps): import("react").JSX.Element;
+export declare function WidgetFrame({ title, source, onCite, actions, flush, holdTitle, headingLevel, now, labels, className, children, ...rest }: WidgetFrameProps): import("react").JSX.Element;

package/dist/WidgetFrame/index.js

@@ -1,5 +1,5 @@
-export { WidgetFrame } from '../chunk-AAOH2P6Y.js';
-import '../chunk-W5J7R5EB.js';
+export { WidgetFrame } from '../chunk-DFK5EQTU.js';
+import '../chunk-TEUQWOWZ.js';
 import '../chunk-3CZ7XAVY.js';
 import '../chunk-EUCC37WY.js';
 import '../chunk-BZFWDIV6.js';

package/dist/{WidgetFrame-LRZIL62O.css → WidgetFrame-BTFW3CRK.css}

@@ -60,6 +60,11 @@
   line-clamp: 2;
 }
 
+/* A held title keeps its two lines empty or not (see `holdTitle`). */
+.crewlet-widget-frame--hold-title .crewlet-widget-frame__title {
+  min-height: calc(2 * 1em * var(--font-line-height-snug));
+}
+
 /* The controls stand on the title's first line: the box is one line of the
    title tall and the control is centred in it, whatever its own height. */
 .crewlet-widget-frame__actions {
@@ -77,15 +82,27 @@
   overflow: auto;
 }
 
-/* A flush figure reaches the frame's sides, and a table's cells take the
-   frame's inset, so its first column starts under the title and its row
-   rules meet the border. */
+/*
+ * A flush figure reaches the frame's sides, and a table's OUTER cells take the
+ * frame's inset, so its first column starts under the title, its last ends
+ * where the title row's controls do, and its row rules meet the border.
+ *
+ * ONLY THE OUTER ONES. Every cell took the frame's 16px a side, so two columns
+ * stood 32px apart and a table of eight columns ran past a widget the full
+ * width of a board; between columns a cell keeps the compact table's own
+ * inset. The last column is the last before the table's trailing spacer,
+ * which is not a column of the data.
+ */
 .crewlet-widget-frame--flush .crewlet-widget-frame__body {
   padding-inline: 0;
 }
 
-.crewlet-widget-frame--flush .crewlet-data-table--compact {
-  --crewlet-data-table-cell-pad-x: var(--spacing-4);
+.crewlet-widget-frame--flush .crewlet-data-table--compact :is(th, td):first-child {
+  padding-inline-start: var(--spacing-4);
+}
+
+.crewlet-widget-frame--flush .crewlet-data-table--compact :is(th, td):nth-last-child(1 of :not(.crewlet-data-table__th--spacer, .crewlet-data-table__td--spacer)) {
+  padding-inline-end: var(--spacing-4);
 }
 
 /* A stat tile drawn flush as the figure stands on the frame's inset; its own
@@ -95,6 +112,23 @@
   padding: 0;
 }
 
+/* A FRAME TOO NARROW FOR THE DISPLAY NUMBER sets it a step down rather than
+   cutting it: two columns of a board are about 120px, and a number at the
+   display step lost its last digits there ("123.…"). */
+@container crewlet-widget-frame (width < 11rem) {
+  .crewlet-widget-frame__body .crewlet-statcard__value {
+    font-size: var(--font-size-xl);
+  }
+}
+
+/* NOR DOES IT RESERVE A SECOND LINE IT HAS NOTHING FOR. The reserve keeps a
+   StatGroup's tiles at one height; a frame takes its height from the board,
+   and the empty line stood as a band of air between the number and the
+   citation that no other figure has. */
+.crewlet-widget-frame__body .crewlet-statcard__sub:empty {
+  display: none;
+}
+
 .crewlet-widget-frame__blocked {
   display: flex;
   align-items: flex-start;
@@ -190,8 +224,18 @@
     align-items: flex-start;
   }
 
+  /* STACKED, THE TITLE TAKES A SECOND LINE BEFORE IT ENDS: a frame three
+     columns wide cut "Deploys for the chosen service" to "Deploys for the
+     chosen se…". Past two lines it ends in an ellipsis, and the whole title
+     is the citation's tooltip. */
   .crewlet-widget-frame__source {
+    display: -webkit-box;
     max-width: 100%;
+    white-space: normal;
+    overflow-wrap: anywhere;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    line-clamp: 2;
   }
 
   .crewlet-widget-frame__when::before {

package/dist/{chunk-WJDQ7XQA.js → chunk-2QEDJSJC.js}

@@ -1,5 +1,5 @@
 import { useThemePreference, useDensityPreference } from './chunk-Z24ZUSTX.js';
-import { SegmentedControl } from './chunk-RCQXUT5K.js';
+import { SegmentedControl } from './chunk-CCAXYHQS.js';
 import { SunGlyph, MonitorGlyph, MoonGlyph } from '@crewlethq/icons/glyphs';
 import { jsx } from 'react/jsx-runtime';
 

package/dist/{chunk-VYDFB6PJ.js → chunk-356JNSER.js}

@@ -1,25 +1,26 @@
-import { Skeleton } from './chunk-W5J7R5EB.js';
 import { frameThemeMessage, readFrameHello, frameOriginMatches, negotiateBridge, FRAME_MESSAGE, portTargetOrigin, checkFrameSandbox, httpOrigin, isFrameNonce, frameFragment, readOpenLink, externalUrl, isFocusExit } from './chunk-F6V2PTN6.js';
-import { Callout } from './chunk-SVSCLHHI.js';
+import { Callout } from './chunk-SZZRIHGT.js';
+import { Skeleton } from './chunk-TEUQWOWZ.js';
 import { Button } from './chunk-OG6CL3EB.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './SandboxedFrame-L6HBQZCD.css';
+import './SandboxedFrame-P5NASXB7.css';
 import { useState, useMemo, useRef, useEffect } from 'react';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
 var LABELS = {
   loading: (title) => `Loading ${title}`,
-  failed: "This page failed to load.",
+  failed: "This page failed to load",
   failedDetail: "It did not finish starting. Reload it, and if it fails again, ask its owner to republish it.",
-  navigated: "This page left its frame, so it was closed.",
+  navigated: "This page left its frame, so it was closed",
   navigatedDetail: "An artifact may only show its own pages. Reload it to open it again.",
-  refused: "This page cannot be shown safely.",
+  refused: "This page cannot be shown safely",
   refusedDetail: "It arrived with a frame policy this dashboard does not accept.",
-  outdated: "This page needs a newer dashboard.",
+  outdated: "This page needs a newer dashboard",
   outdatedDetail: "Reload the dashboard to update it, then open the page again.",
   reload: "Reload"
 };
 var FRAME_HELLO_TIMEOUT_MS = 1e4;
+var FRAME_LOAD_GRACE_MS = 1500;
 function framePolicy(src, origin, mode, sandbox, nonce, theme) {
   const verdict = checkFrameSandbox(sandbox, mode);
   if (!verdict.ok) return { ok: false, refusal: { kind: "sandbox", tokens: verdict.refused } };
@@ -54,6 +55,7 @@ function FrameInstance(props) {
     onRefusal: _onRefusal,
     onReload,
     helloTimeoutMs = FRAME_HELLO_TIMEOUT_MS,
+    loadGraceMs = FRAME_LOAD_GRACE_MS,
     labels,
     className,
     ...rest
@@ -168,7 +170,7 @@ function FrameInstance(props) {
       }
       owed = true;
       clearTimeout(loadTimer);
-      loadTimer = setTimeout(() => end(greeted > 0 ? "navigated" : "failed"), helloTimeoutMs);
+      loadTimer = setTimeout(() => end(greeted > 0 ? "navigated" : "failed"), Math.min(helloTimeoutMs, loadGraceMs));
     };
     window.addEventListener("message", onWindowMessage);
     frame.addEventListener("load", onLoad);
@@ -183,7 +185,7 @@ function FrameInstance(props) {
       clearTimeout(loadTimer);
       closePort();
     };
-  }, [policy, mode, nonce, helloTimeoutMs]);
+  }, [policy, mode, nonce, helloTimeoutMs, loadGraceMs]);
   const { mode: themeMode, palette, density } = theme;
   useEffect(() => {
     portRef.current?.postMessage(frameThemeMessage({ mode: themeMode, palette, density }));
@@ -216,17 +218,15 @@ function FrameInstance(props) {
             ...credentialless
           }
         ) : null,
-        state === "loading" ? /* @__PURE__ */ jsx("div", { className: "crewlet-sandboxed-frame__loading", children: /* @__PURE__ */ jsx(Skeleton, { variant: "box", width: "100%", height: "100%", label: text.loading(title) }) }) : null,
-        ending ? /* @__PURE__ */ jsx("div", { className: "crewlet-sandboxed-frame__end", children: /* @__PURE__ */ jsx(
-          Callout,
+        state === "loading" ? /* @__PURE__ */ jsx(FrameLoading, { label: text.loading(title) }) : null,
+        ending ? /* @__PURE__ */ jsx(
+          FrameEnd,
           {
-            variant: "danger",
-            title: text[ending.title],
-            live: "polite",
+            heading: text[ending.title],
             action: onReload ? /* @__PURE__ */ jsx(Button, { variant: "outline", size: "small", onClick: onReload, children: text.reload }) : void 0,
             children: text[ending.detail]
           }
-        ) }) : null
+        ) : null
       ]
     }
   );
@@ -239,5 +239,38 @@ var END_TEXT = {
   refused: { title: "refused", detail: "refusedDetail" },
   outdated: { title: "outdated", detail: "outdatedDetail" }
 };
+function FrameLoading({ label }) {
+  return /* @__PURE__ */ jsx("div", { className: "crewlet-sandboxed-frame__loading", children: /* @__PURE__ */ jsx(
+    Skeleton,
+    {
+      variant: "box",
+      width: "100%",
+      height: "100%",
+      marginTop: 0,
+      borderRadius: "var(--radius-md)",
+      label
+    }
+  ) });
+}
+function FrameEnd({ heading, action, children }) {
+  return /* @__PURE__ */ jsx("div", { className: "crewlet-sandboxed-frame__end", children: /* @__PURE__ */ jsx(Callout, { variant: "danger", title: heading, live: "polite", action, children }) });
+}
+function SandboxedFramePlaceholder({ title, label, className, ...rest }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...rest,
+      role: "region",
+      "aria-label": title,
+      "aria-busy": true,
+      "data-state": "loading",
+      className: cx("crewlet-sandboxed-frame", className),
+      children: /* @__PURE__ */ jsx(FrameLoading, { label: label ?? LABELS.loading(title) })
+    }
+  );
+}
+function SandboxedFrameNotice({ title, heading, action, children, className, ...rest }) {
+  return /* @__PURE__ */ jsx("div", { ...rest, role: "region", "aria-label": title, "data-state": "failed", className: cx("crewlet-sandboxed-frame", className), children: /* @__PURE__ */ jsx(FrameEnd, { heading, action, children }) });
+}
 
-export { FRAME_HELLO_TIMEOUT_MS, SandboxedFrame };
+export { FRAME_HELLO_TIMEOUT_MS, FRAME_LOAD_GRACE_MS, SandboxedFrame, SandboxedFrameNotice, SandboxedFramePlaceholder };

package/dist/{chunk-2HIOJ4YZ.js → chunk-3EB2AV3H.js}

@@ -1,4 +1,4 @@
-import { useLayerContainer, viewportBounds, LAYER_GAP, outsideBounds, placePopup, LAYER_REPOSITION_EVENT } from './chunk-HMPFGIWM.js';
+import { useLayerContainer, viewportBounds, LAYER_GAP, anchorGone, placePopup, LAYER_REPOSITION_EVENT } from './chunk-OMV5W53A.js';
 import { usePopupLayer } from './chunk-R25RGPUB.js';
 import { Button } from './chunk-OG6CL3EB.js';
 import { IconButton } from './chunk-4FQT6ZAY.js';
@@ -99,14 +99,13 @@ function Menu({
       width: rect.width,
       height: rect.height
     };
-    const whole = { x: 0, y: 0, width: host.width, height: host.height };
     const bounds = {
       x: LAYER_GAP,
       y: LAYER_GAP,
       width: host.width - 2 * LAYER_GAP,
       height: host.height - 2 * LAYER_GAP
     };
-    if (outsideBounds(local, whole)) {
+    if (anchorGone(rect, host, inHost)) {
       close(true);
       return;
     }

package/dist/{chunk-ODT5H4MN.js → chunk-3LYWD3BO.js}

@@ -1,9 +1,9 @@
 import { presenceHueClass } from './chunk-I6POAB4V.js';
 import { presenceLabels, presenceOrder } from './chunk-Z7JYG5TF.js';
-import { AVATAR_SIZES, Avatar } from './chunk-5OM447RW.js';
+import { AVATAR_SIZES, Avatar } from './chunk-PZKHBB7D.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './PresenceStack-QSXQJND5.css';
+import './PresenceStack-FJJQVH74.css';
 import { isCrewletCharacter } from '@crewlethq/icons/characters';
 import { jsxs, jsx } from 'react/jsx-runtime';
 

package/dist/{chunk-OTN35CI4.js → chunk-3P4Y5RX6.js}

@@ -1,12 +1,12 @@
-import { LayerNodeBridge } from './chunk-VYOKRN2I.js';
+import { LayerNodeBridge } from './chunk-LM3ISVJA.js';
 import { Kbd } from './chunk-SMBKXWML.js';
-import { Tooltip } from './chunk-QWOPX2MN.js';
-import { LAYER_REPOSITION_EVENT, LayerHost } from './chunk-HMPFGIWM.js';
+import { Tooltip } from './chunk-6ZJ3N7QI.js';
+import { LAYER_REPOSITION_EVENT, LayerHost } from './chunk-OMV5W53A.js';
 import { Button } from './chunk-OG6CL3EB.js';
 import { IconButton } from './chunk-4FQT6ZAY.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './Canvas-LRVNW7XN.css';
+import './Canvas-VUG2HLZK.css';
 import { useId, useRef, useState, useCallback, useLayoutEffect, useImperativeHandle, useEffect } from 'react';
 import { CURSORS, ZoomOutGlyph, ZoomInGlyph, FullscreenGlyph } from '@crewlethq/icons/glyphs';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
@@ -515,7 +515,7 @@ function Canvas({
     {
       className: cx("crewlet-canvas", className),
       ref: root,
-      style: CURSOR_PROPERTIES,
+      style: ground === "grid" ? { ...CURSOR_PROPERTIES, ...gridProperties(view) } : CURSOR_PROPERTIES,
       "data-cursor": cursor,
       "data-dimmed": dimmed,
       "data-ground": ground,
@@ -628,6 +628,10 @@ function Canvas({
     }
   );
 }
+function gridOf(view) {
+  const k = view.k > 0 && Number.isFinite(view.k) ? view.k : 1;
+  return { scale: k * 2 ** -Math.floor(Math.log2(k)), x: view.x, y: view.y };
+}
 var CURSOR_PROPERTIES = {
   "--crewlet-canvas-cursor-pointer": CURSORS.pointer,
   "--crewlet-canvas-cursor-hand": CURSORS.hand,
@@ -635,6 +639,14 @@ var CURSOR_PROPERTIES = {
   "--crewlet-canvas-cursor-crosshair": CURSORS.crosshair,
   "--crewlet-canvas-cursor-text": CURSORS.text
 };
+function gridProperties(view) {
+  const grid = gridOf(view);
+  return {
+    "--crewlet-canvas-grid-scale": String(grid.scale),
+    "--crewlet-canvas-grid-x": `${grid.x}px`,
+    "--crewlet-canvas-grid-y": `${grid.y}px`
+  };
+}
 function ZoomReadout({
   zoom,
   onZoom,
@@ -716,4 +728,4 @@ function swallowNextClick(within) {
   setTimeout(() => window.removeEventListener("click", swallow, { capture: true }), 0);
 }
 
-export { CANVAS_COMPOSE_CONTEXT, CANVAS_FIT_MAX_ZOOM, CANVAS_FIT_PADDING, CANVAS_FOCUS_CONTEXT, CANVAS_MAX_ZOOM, CANVAS_MIN_ZOOM, CANVAS_PAN_MARGIN, CANVAS_PAN_STEP, CANVAS_REVEAL_PADDING, CANVAS_TAP_SLOP, CANVAS_WHEEL_LINE_PX, CANVAS_WHEEL_ZOOM_PER_PIXEL, CANVAS_ZOOM_CEILING, CANVAS_ZOOM_LIMITS, CANVAS_ZOOM_STEP, Canvas, IDENTITY_VIEW, ShortcutTip, anchorView, beyondSlop, clampPan, clampZoom, fitView, panBy, pinchView, regionView, revealView, screenRect, toScreen, toWorld, wheelPixels, wheelZoomFactor, zoomAt, zoomLimits };
+export { CANVAS_COMPOSE_CONTEXT, CANVAS_FIT_MAX_ZOOM, CANVAS_FIT_PADDING, CANVAS_FOCUS_CONTEXT, CANVAS_MAX_ZOOM, CANVAS_MIN_ZOOM, CANVAS_PAN_MARGIN, CANVAS_PAN_STEP, CANVAS_REVEAL_PADDING, CANVAS_TAP_SLOP, CANVAS_WHEEL_LINE_PX, CANVAS_WHEEL_ZOOM_PER_PIXEL, CANVAS_ZOOM_CEILING, CANVAS_ZOOM_LIMITS, CANVAS_ZOOM_STEP, Canvas, IDENTITY_VIEW, ShortcutTip, anchorView, beyondSlop, clampPan, clampZoom, fitView, gridOf, panBy, pinchView, regionView, revealView, screenRect, toScreen, toWorld, wheelPixels, wheelZoomFactor, zoomAt, zoomLimits };

package/dist/{chunk-FAQGGX2Z.js → chunk-3TFDQLW3.js}

@@ -1,6 +1,6 @@
 import { useHeadingLevel, headingTag, HeadingLevelProvider, nextHeadingLevel } from './chunk-PQADV6P6.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './Section-QR3ILQVK.css';
+import './Section-O5AHGSOG.css';
 import { useId } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 

package/dist/{chunk-E6EWK5YY.js → chunk-3Y56GQPM.js}

@@ -1,8 +1,8 @@
 import { Toolbar } from './chunk-PGRPNDWM.js';
-import { ShortcutTip } from './chunk-OTN35CI4.js';
+import { ShortcutTip } from './chunk-3P4Y5RX6.js';
 import { IconButton } from './chunk-4FQT6ZAY.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './CanvasToolbar-AE5MXH7T.css';
+import './CanvasToolbar-EM5EVZED.css';
 import { jsx } from 'react/jsx-runtime';
 
 function toolForKey(tools, event) {
@@ -20,7 +20,7 @@ function CanvasToolbar({
   return /* @__PURE__ */ jsx(Toolbar, { label, className: cx("crewlet-canvas-toolbar", className), children: tools.map((tool) => /* @__PURE__ */ jsx(ShortcutTip, { label: tool.label, keys: [tool.shortcut], children: /* @__PURE__ */ jsx(
     IconButton,
     {
-      size: "md",
+      size: "sm",
       label: tool.label,
       title: "",
       icon: tool.icon,

package/dist/{chunk-A4E5YLXO.js → chunk-4B6LSFDS.js}

@@ -1,4 +1,4 @@
-import { MARKDOWN_CALLOUT_NAMES } from './chunk-SKOYC2CF.js';
+import { MARKDOWN_CALLOUT_NAMES } from './chunk-KK5OYNAF.js';
 
 // src/RichEditor/types.ts
 var RICH_EDITOR_LABELS = {

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

@@ -1,4 +1,4 @@
-import { AVATAR_SIZES, Avatar } from './chunk-5OM447RW.js';
+import { AVATAR_SIZES, Avatar } from './chunk-PZKHBB7D.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './Avatar-3C2H2WA4.css';
 import './AvatarStack-GEJBNV7E.css';

package/dist/{chunk-CJKMURZO.js → chunk-5SZGKSGL.js}

@@ -1,5 +1,5 @@
 import { cx } from './chunk-ODEQTPFM.js';
-import './Note-ONSKKTOA.css';
+import './Note-WI5MLZOO.css';
 import { forwardRef, useId } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 

package/dist/chunk-6VOS2GMB.js

@@ -0,0 +1,54 @@
+import { IconButton } from './chunk-4FQT6ZAY.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './SlideNav-BLFJF6AH.css';
+import { ChevronLeftGlyph, ChevronRightGlyph } from '@crewlethq/icons/glyphs';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var SLIDE_NAV_LABELS = {
+  nav: "Slide controls",
+  previous: "Previous slide",
+  next: "Next slide",
+  start: "This is the first slide",
+  end: "End of the deck",
+  position: (position, total) => `${position} of ${total}`
+};
+function SlideNav({
+  position,
+  total,
+  onPrevious,
+  onNext,
+  tone = "page",
+  children,
+  className,
+  labels
+}) {
+  const text = { ...SLIDE_NAV_LABELS, ...labels };
+  return /* @__PURE__ */ jsxs("div", { className: cx("crewlet-slide-nav", `crewlet-slide-nav--${tone}`, className), role: "group", "aria-label": text.nav, children: [
+    /* @__PURE__ */ jsx(
+      IconButton,
+      {
+        label: text.previous,
+        icon: /* @__PURE__ */ jsx(ChevronLeftGlyph, {}),
+        variant: "ghost",
+        size: "sm",
+        onClick: onPrevious,
+        disabledReason: position <= 1 ? text.start : void 0
+      }
+    ),
+    /* @__PURE__ */ jsx("span", { className: "crewlet-slide-nav__position", children: text.position(position, total) }),
+    /* @__PURE__ */ jsx(
+      IconButton,
+      {
+        label: text.next,
+        icon: /* @__PURE__ */ jsx(ChevronRightGlyph, {}),
+        variant: "ghost",
+        size: "sm",
+        onClick: onNext,
+        disabledReason: position >= total ? text.end : void 0
+      }
+    ),
+    children ? /* @__PURE__ */ jsx("span", { className: "crewlet-slide-nav__more", children }) : null
+  ] });
+}
+
+export { SLIDE_NAV_LABELS, SlideNav };

package/dist/{chunk-QWOPX2MN.js → chunk-6ZJ3N7QI.js}

@@ -1,4 +1,4 @@
-import { useLayerContainer, viewportBounds, LAYER_GAP, outsideBounds, placePopup, LAYER_REPOSITION_EVENT } from './chunk-HMPFGIWM.js';
+import { useLayerContainer, viewportBounds, LAYER_GAP, anchorGone, placePopup, LAYER_REPOSITION_EVENT } from './chunk-OMV5W53A.js';
 import { usePopupLayer } from './chunk-R25RGPUB.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './Tooltip-LKQF7CE4.css';
@@ -28,6 +28,7 @@ var CLOSE_DELAY = ms(motion.duration.base);
 function Tooltip({
   content,
   placement = "top",
+  align = "center",
   disabled = false,
   openDelay = OPEN_DELAY,
   closeDelay = CLOSE_DELAY,
@@ -94,20 +95,21 @@ function Tooltip({
     const host = inHost ? container.getBoundingClientRect() : viewportBounds();
     const rect = at.getBoundingClientRect();
     const own = box.getBoundingClientRect();
+    const rtl = getComputedStyle(at).direction === "rtl";
+    const startX = align === "center" ? rect.x + rect.width / 2 - own.width / 2 : rtl ? rect.right - own.width : rect.x;
     const local = {
-      x: rect.x + rect.width / 2 - own.width / 2 - (inHost ? host.x : 0),
+      x: startX - (inHost ? host.x : 0),
       y: rect.y - (inHost ? host.y : 0),
       width: rect.width,
       height: rect.height
     };
-    const whole = { x: 0, y: 0, width: host.width, height: host.height };
     const bounds = {
       x: LAYER_GAP,
       y: LAYER_GAP,
       width: host.width - 2 * LAYER_GAP,
       height: host.height - 2 * LAYER_GAP
     };
-    if (outsideBounds({ ...local, x: rect.x - (inHost ? host.x : 0) }, whole)) {
+    if (anchorGone(rect, host, inHost)) {
       setOpen(false);
       return;
     }
@@ -115,7 +117,7 @@ function Tooltip({
     setPlace(
       (was) => was && was.left === spot.left && was.top === spot.top && was.side === spot.side ? was : spot
     );
-  }, [container, placement]);
+  }, [align, container, placement]);
   useLayoutEffect(() => {
     if (!open) return;
     position();

package/dist/{chunk-3ZAFJ4GK.js → chunk-7Q7WDXHG.js}

@@ -1,14 +1,14 @@
 import { PageHeader } from './chunk-HOXGBLEY.js';
-import { DateTimePicker } from './chunk-Y5NQ2LMS.js';
-import { DataTable } from './chunk-EBJREOKS.js';
+import { DateTimePicker } from './chunk-BY4N65PM.js';
+import { DataTable } from './chunk-UXXJDIYE.js';
 import { useListbox, useOptionKeys } from './chunk-F73MC7EZ.js';
 import { Toolbar } from './chunk-PGRPNDWM.js';
-import { Popover } from './chunk-BWRGFKJP.js';
+import { Popover } from './chunk-K3IJQNB7.js';
 import { Input } from './chunk-6QFAK2WV.js';
 import { Kbd } from './chunk-SMBKXWML.js';
 import { RelativeTime } from './chunk-3CZ7XAVY.js';
 import { Count } from './chunk-BHHIIK3M.js';
-import { Menu } from './chunk-2HIOJ4YZ.js';
+import { Menu } from './chunk-3EB2AV3H.js';
 import { Button } from './chunk-OG6CL3EB.js';
 import { IconButton } from './chunk-4FQT6ZAY.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';

package/dist/{chunk-QH3AKP2N.js → chunk-AC22RZKC.js}

@@ -1,7 +1,7 @@
-import { useLayerContainer } from './chunk-HMPFGIWM.js';
+import { useLayerContainer } from './chunk-OMV5W53A.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './Toaster-EOOOTSJT.css';
+import './Toaster-C6BQ7L6I.css';
 import { createContext, useMemo, useState, useRef, useEffect, useContext, useCallback } from 'react';
 import { createPortal } from 'react-dom';
 import { XGlyph, CircleAlertGlyph, TriangleAlertGlyph, CircleCheckGlyph, InfoGlyph } from '@crewlethq/icons/glyphs';

package/dist/{chunk-UZ6MA2V6.js → chunk-AORVEG5V.js}

@@ -1,5 +1,5 @@
-import { Select } from './chunk-FC4YTTFJ.js';
-import { Popover } from './chunk-BWRGFKJP.js';
+import { Select } from './chunk-BQ7AKL2N.js';
+import { Popover } from './chunk-K3IJQNB7.js';
 import { today, shiftMonth, CalendarGrid, compareDays } from './chunk-GXQ3B46I.js';
 import { Input } from './chunk-6QFAK2WV.js';
 import { isComposing } from './chunk-R25RGPUB.js';

package/dist/{chunk-ZITJKF6Z.js → chunk-AYB6AYNH.js}

@@ -1,5 +1,5 @@
 import { Combobox } from './chunk-QS4ZGTEU.js';
-import { PRINCIPAL_KINDS, PrincipalAvatar } from './chunk-4KP4RC3O.js';
+import { PRINCIPAL_KINDS, PrincipalAvatar } from './chunk-CI3VPIJN.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './PrincipalPicker-7NNZTGUP.css';
 import { useState, useId, useMemo } from 'react';

package/dist/{chunk-FC4YTTFJ.js → chunk-BQ7AKL2N.js}

@@ -1,7 +1,7 @@
 import { useListbox, useOptionKeys, useHighlightRest } from './chunk-F73MC7EZ.js';
-import { useLayerContainer, viewportBounds, outsideBounds, placePopup, LAYER_GAP, LAYER_REPOSITION_EVENT } from './chunk-HMPFGIWM.js';
+import { useLayerContainer, viewportBounds, anchorGone, placePopup, LAYER_GAP, LAYER_REPOSITION_EVENT } from './chunk-OMV5W53A.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './Select-2P7AWUE4.css';
+import './Select-A54YS5EP.css';
 import { forwardRef, useId, useMemo, useState, useRef, useCallback, useEffect, useLayoutEffect } from 'react';
 import { createPortal } from 'react-dom';
 import { ChevronDownGlyph, CheckGlyph, SearchGlyph } from '@crewlethq/icons/glyphs';
@@ -24,6 +24,7 @@ var Select = forwardRef(function Select2({
   align = "left",
   active = false,
   error = false,
+  appearance = "field",
   ariaLabel,
   searchable = false,
   searchPlaceholder = "Search",
@@ -37,7 +38,7 @@ var Select = forwardRef(function Select2({
 }, ref) {
   const generatedId = useId();
   const rootId = id ?? generatedId;
-  const classes = cx(className, width === "auto" && "crewlet-select--auto");
+  const classes = cx(className, width === "auto" && "crewlet-select--auto", appearance === "quiet" && "crewlet-select--quiet");
   const chosen = useMemo(() => {
     if (multiple) return Array.isArray(value) ? value : [];
     if (value === void 0 || value === null) return [];
@@ -310,8 +311,7 @@ var ListboxSelect = forwardRef(function ListboxSelect2({
       width: rect.width,
       height: rect.height
     };
-    const whole = { x: 0, y: 0, width: host.width, height: host.height };
-    if (outsideBounds(local, whole)) {
+    if (anchorGone(rect, host, inHost)) {
       close(panel.current?.contains(document.activeElement) ?? false);
       return;
     }

package/dist/{chunk-Y5NQ2LMS.js → chunk-BY4N65PM.js}

@@ -1,4 +1,4 @@
-import { Popover } from './chunk-BWRGFKJP.js';
+import { Popover } from './chunk-K3IJQNB7.js';
 import { today, CalendarGrid, shiftMonth, compareDays } from './chunk-GXQ3B46I.js';
 import { Button } from './chunk-OG6CL3EB.js';
 import { IconButton } from './chunk-4FQT6ZAY.js';

package/dist/{chunk-YFW4MTK4.js → chunk-C7DKX453.js}

@@ -1,4 +1,4 @@
-import { MARKDOWN_CALLOUT_TONES, parseMarkdownSpans, markdownInline, markdownCodeText } from './chunk-SKOYC2CF.js';
+import { MARKDOWN_CALLOUT_TONES, parseMarkdownSpans, markdownInline, markdownCodeText } from './chunk-KK5OYNAF.js';
 import { Schema, Fragment } from 'prosemirror-model';
 
 function headingTag(level) {

package/dist/{chunk-RCQXUT5K.js → chunk-CCAXYHQS.js}

@@ -1,4 +1,4 @@
-import { tabId } from './chunk-HJEVSQN6.js';
+import { tabId } from './chunk-VL6CUNSX.js';
 import { useRoving, tabStop } from './chunk-RKKO7QHH.js';
 import { Count } from './chunk-BHHIIK3M.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';