@crewlethq/ui 0.2.0 → 0.4.0

package/dist/TreeGrid/TreeGrid.d.ts

@@ -0,0 +1,142 @@
+/**
+ * A hierarchy as rows and columns: the view a keyboard or a screen reader user
+ * works fastest in, and the one a narrow screen falls back to.
+ *
+ * A TREEGRID, NOT A TREE. Every row says its level, position and expansion
+ * like a treeitem, and its cells are navigable like a grid's. A row holds
+ * focus by default and its keys act on the node (Enter activates, Delete or
+ * Backspace removes, the ContextMenu key or Shift+F10 opens its actions);
+ * Right opens a closed row or steps into its cells, Left steps back out,
+ * closes the row or climbs to its parent, Up and Down keep the column. A cell
+ * holding a control focuses the control itself, so what the cell does is one
+ * Enter away, and the grid's one tab stop is wherever focus is: a press that
+ * opens a cell's menu moves it to that cell, and the row's chevron, which is
+ * pointer only and hidden from assistive technology, takes no focus at all.
+ *
+ * NAVIGATION KEYS ARE CAPTURED, so they reach the grid before the control that
+ * holds focus in a cell: ArrowDown on a menu button would otherwise open the
+ * menu instead of moving to the next row. An open menu keeps its keys because
+ * it is in no row: it renders in the layer over the grid, and React carries
+ * its keys up through this handler with a target no row contains.
+ *
+ * THE MENUS OPEN OVER THE GRID, NOT INSIDE IT. The grid scrolls sideways at
+ * narrow widths, and a box that scrolls on one axis clips on both, so a menu
+ * drawn under its trigger in the last rows would be cut off and would scroll
+ * the grid down instead of opening. The frame publishes a LayerHost over the
+ * scroller, and a sideways scroll tells that layer so an open surface follows
+ * its trigger or closes with it.
+ *
+ * Ported from the generic half of the engine dashboard's org builder outline.
+ */
+import { type KeyboardEvent, type MouseEvent, type ReactNode, type Ref } from 'react';
+import { type TreeInput, type TreeItemAction, type TreeViewHandle } from '../Tree/index.js';
+export interface TreeGridColumn {
+    key: string;
+    /** The column's name. */
+    header: string;
+    /**
+     * Read but not seen, for a column whose heading would be noise in the sight
+     * of it and is still the only thing a screen reader has (an actions column).
+     */
+    headerHidden?: boolean | undefined;
+    /** This column's grid track. One flexible column by default. */
+    width?: string | undefined;
+}
+/** A row that holds only controls, such as an inline Add row. */
+export interface TreeGridAddRow {
+    /** The row's accessible name, since its cells are all controls: "Add to Platform". */
+    label: string;
+    /** How many cells it has, which is what End and Right count to. */
+    cells: number;
+}
+/** What a cell needs from the grid it is drawn in. */
+export interface TreeGridContext {
+    expanded(id: string): boolean;
+    expandable(id: string): boolean;
+    toggle(id: string): void;
+    /**
+     * Whether this cell holds the grid's one tab stop. A control in a cell takes
+     * `tabIndex` from it; a cell with no control takes the stop itself.
+     */
+    tabStop(id: string, column: number): boolean;
+    /** Says a press opened a control in this cell, so the tab stop follows focus into it. */
+    opened(id: string, column: number): void;
+    /**
+     * The props that make a press anywhere in a pointer-only strip land on the
+     * row rather than on the control it hit.
+     */
+    press(id: string): {
+        onMouseDown(event: MouseEvent<HTMLElement>): void;
+    };
+    menuOpen(id: string): boolean;
+    setMenuOpen(id: string, open: boolean): void;
+}
+/** Every string the grid renders on its own. */
+export interface TreeGridLabels {
+    /** The pointer-only chevron's tooltip, given the row's own label. */
+    expand: (label: string) => string;
+    collapse: (label: string) => string;
+}
+export interface TreeGridProps {
+    /** The accessible name of the grid, such as "Organization outline". */
+    label: string;
+    columns: readonly TreeGridColumn[];
+    /**
+     * The hierarchy: every row, nested. An add row is one of these too.
+     *
+     * Keep it stable across renders (a `useMemo` over what it is derived from).
+     * A fresh array each render rebuilds the model, and with it the visible
+     * order, on every push a parent takes.
+     */
+    rows: readonly TreeInput[];
+    /**
+     * Draws one cell. `column` is its one based position, which is also its
+     * `aria-colindex`, so a caller reads its own `columns` by `column - 1`. The
+     * first cell is drawn after the chevron strip, inside the same cell.
+     */
+    renderCell: (id: string, column: number, grid: TreeGridContext) => ReactNode;
+    /**
+     * Whether a cell holds a control that takes the grid's tab stop for itself
+     * (a menu trigger, a chooser, a button). It is asked per row as well as per
+     * column, because one column often holds a control on some rows and plain
+     * text on others.
+     */
+    cellHasControl?: ((id: string, column: number) => boolean) | undefined;
+    /**
+     * Carries out Enter (activate) or Delete and Backspace (remove) on a row.
+     * Return false when the row has no such action, so the key travels on.
+     *
+     * Called only while the ROW itself holds focus, never from inside a cell,
+     * and never on an add row. The Menu key is not here: which menu is open is
+     * this component's state, so it opens the row's own menu itself when
+     * `hasRowMenu` says there is one.
+     */
+    onRowKey?: ((id: string, action: Exclude<TreeItemAction, 'menu'>) => boolean) | undefined;
+    /**
+     * Any other key the caller claims on a row, such as Alt with an arrow to
+     * reorder it. Asked FIRST, while the row itself holds focus, and never on an
+     * add row; return true when it was handled, and the grid swallows the key.
+     */
+    onRowKeyDown?: ((id: string, event: KeyboardEvent<HTMLElement>) => boolean) | undefined;
+    /** Whether a row has a menu the ContextMenu key and Shift+F10 can open. */
+    hasRowMenu?: ((id: string) => boolean) | undefined;
+    /**
+     * Whether a row is an add row, and what it is called. An add row is a row of
+     * the grid like any other, so it counts in its siblings' position and set
+     * size; it just holds controls rather than a node's own data.
+     */
+    addRow?: ((id: string) => TreeGridAddRow | null) | undefined;
+    /** The selected row, drawn as `aria-selected`. */
+    selectedId?: string | null | undefined;
+    /**
+     * Selection follows focus. Called with every row focus reaches except an add
+     * row, which names no node.
+     */
+    onSelect?: ((id: string) => void) | undefined;
+    /** Sets `aria-readonly`: the rows can be read and navigated but not edited. */
+    readOnly?: boolean | undefined;
+    labels?: Partial<TreeGridLabels> | undefined;
+    ref?: Ref<TreeViewHandle> | undefined;
+    className?: string | undefined;
+}
+export declare function TreeGrid({ label, columns, rows: forest, renderCell, cellHasControl, onRowKey, onRowKeyDown, hasRowMenu, addRow, selectedId, onSelect, readOnly, labels, ref, className, }: TreeGridProps): import("react/jsx-runtime").JSX.Element;

package/dist/TreeGrid/index.d.ts

@@ -0,0 +1,3 @@
+import './TreeGrid.css';
+export { TreeGrid } from './TreeGrid.js';
+export type { TreeGridAddRow, TreeGridColumn, TreeGridContext, TreeGridLabels, TreeGridProps, } from './TreeGrid.js';

package/dist/TreeGrid/index.js

@@ -0,0 +1,8 @@
+export { TreeGrid } from '../chunk-5SDBMKUO.js';
+import '../chunk-NTRZGNEX.js';
+import '../chunk-53DVJCVW.js';
+import '../chunk-7RPGY3JE.js';
+import '../chunk-ITHXJHBB.js';
+import '../chunk-F27EPQ7D.js';
+import '../chunk-BZFWDIV6.js';
+import '../chunk-ODEQTPFM.js';

package/dist/TreeGrid-NSW7VMOX.css

@@ -0,0 +1,132 @@
+/*
+ * A hierarchy as rows and columns (TreeGrid.tsx).
+ *
+ * Each row is a grid on ONE column template, so the cells of every row line up
+ * without a table: a table row cannot be a focusable treegrid row with a
+ * level. The grid keeps a minimum width and scrolls sideways in its own box
+ * below that, so a phone width screen keeps every column readable and the page
+ * itself never scrolls sideways.
+ */
+
+.crewlet-tree-grid {
+  position: relative;
+}
+
+/*
+ * THE SCROLLER IS THE CONTAINING BLOCK OF WHAT IT HOLDS. A box that scrolls
+ * clips only the descendants whose containing block is inside it, so an
+ * absolutely positioned one (the screen-reader text of the last column's
+ * header, far right in a phone width grid) would be placed against the frame
+ * instead, escape the scroller, and give the page a sideways overflow as wide
+ * as the whole grid: hidden, but scrolled by a focus or a find in page, which
+ * pushes the page sideways. Positioned, the scroller keeps all of it.
+ *
+ * The two declarations belong together, and the component's suite holds them
+ * together: one without the other is the bug, not a style.
+ */
+.crewlet-tree-grid__scroller {
+  position: relative;
+  overflow-x: auto;
+  overscroll-behavior-x: contain;
+}
+
+.crewlet-tree-grid__grid {
+  min-width: var(--crewlet-tree-grid-min-width, 45rem);
+  font-size: var(--font-size-compact);
+  /*
+   * THE PANEL'S GROUND. It painted the step above it, which is the colour a
+   * hovered row takes elsewhere in the system: an outline sitting beside a
+   * table read as a table with every row hovered at once, and on a card it was
+   * a lighter block inside a darker frame for no stated reason.
+   */
+  background: var(--color-surface-subtle);
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-lg);
+}
+
+.crewlet-tree-grid__row {
+  display: grid;
+  grid-template-columns: var(--crewlet-tree-grid-columns, minmax(0, 1fr));
+  align-items: center;
+  min-height: var(--size-row-md);
+  border-top: 1px solid var(--color-border-default);
+}
+
+/*
+ * THE HEAD IS THE TABLE'S HEADER REGISTER, in full. It spelled three of the
+ * register's five declarations and left the tracking and the case off, so a
+ * treegrid and a table standing on the same screen named their columns two
+ * different ways. It is one micro-label step, declared once, wherever a column
+ * is named.
+ */
+.crewlet-tree-grid__head .crewlet-tree-grid__row {
+  border-top: 0;
+  font-size: var(--font-size-2xs);
+  font-weight: var(--font-weight-medium);
+  letter-spacing: var(--font-letter-spacing-wide);
+  text-transform: uppercase;
+  color: var(--color-text-tertiary);
+}
+
+.crewlet-tree-grid__row > [role='columnheader'],
+.crewlet-tree-grid__cell {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  min-width: 0;
+  padding: 0 var(--spacing-2);
+}
+
+/* The indent is the row's own level, set on the row. */
+.crewlet-tree-grid__cell:first-child {
+  padding-inline-start: calc(var(--spacing-5) * var(--crewlet-tree-grid-depth, 0));
+}
+
+/*
+ * The chevron's place is held on every row, expandable or not, so a name never
+ * shifts sideways as a row gains or loses children.
+ */
+.crewlet-tree-grid__toggle {
+  display: inline-flex;
+  flex: none;
+  width: var(--size-control-sm);
+}
+
+/*
+ * OPENING A ROW TURNS THE CHEVRON, it does not swap it for another drawing.
+ * Two glyphs exchanged is a cut, and a row opening is the one movement this
+ * table has: the mark a reader is pointing at is the mark that moves. The
+ * drawing turns inside its control, so the control's own box, ground and focus
+ * ring stay square.
+ */
+.crewlet-tree-grid__toggle svg {
+  transition: transform var(--motion-duration-fast) var(--motion-easing-default);
+}
+
+.crewlet-tree-grid__toggle[data-open] svg {
+  transform: rotate(90deg);
+}
+
+/*
+ * A READER WHO ASKED FOR LESS gets the turn without the movement: the chevron
+ * still points at the row's state, it simply arrives there. Dropping the
+ * rotation as well would leave a closed and an open row drawn identically.
+ */
+@media (prefers-reduced-motion: reduce) {
+  .crewlet-tree-grid__toggle svg {
+    transition: none;
+  }
+}
+
+.crewlet-tree-grid__row:focus-visible,
+.crewlet-tree-grid__cell:focus-visible {
+  outline: 2px solid var(--color-focus);
+  /* Inside a box that scrolls, an outset ring is clipped by the scroller on
+     the first and last rows and painted over by the next row. */
+  outline-offset: var(--size-focus-ring-inset-offset);
+}
+
+/* The selection is where the reader is, so it takes the accent. */
+.crewlet-tree-grid__row[aria-selected='true'] {
+  box-shadow: inset 2px 0 0 var(--color-brand-accent);
+}

package/dist/VisuallyHidden/VisuallyHidden.d.ts

@@ -0,0 +1,23 @@
+import type { ElementType, ReactNode } from 'react';
+export interface VisuallyHiddenProps {
+    /** The element to draw. A span by default; a `li` inside a list, and so on. */
+    as?: ElementType | undefined;
+    /** For a sentence something else points at with aria-describedby. */
+    id?: string | undefined;
+    className?: string | undefined;
+    children?: ReactNode;
+}
+/**
+ * Words a screen reader reads and nobody sees.
+ *
+ * NOT `display: none`, and not `hidden`: both take the text out of the
+ * accessibility tree along with the picture, which is the opposite of the
+ * point. The clip rectangle is the one technique every assistive technology
+ * still reads, and it leaves the element in the layout at a size of one pixel
+ * rather than zero, because a zero-sized element is skipped by some of them.
+ *
+ * What it is for: the sentence beside a glyph that carries the meaning, the
+ * spoken form of a shortcut whose keycaps are drawn as symbols, the name of a
+ * column whose header is an icon, and the reason a disabled control gives.
+ */
+export declare function VisuallyHidden({ as: Tag, id, className, children }: VisuallyHiddenProps): import("react/jsx-runtime").JSX.Element;

package/dist/VisuallyHidden/index.d.ts

@@ -0,0 +1,3 @@
+import './VisuallyHidden.css';
+export { VisuallyHidden } from './VisuallyHidden.js';
+export type { VisuallyHiddenProps } from './VisuallyHidden.js';

package/dist/VisuallyHidden/index.js

@@ -0,0 +1,2 @@
+export { VisuallyHidden } from '../chunk-BZFWDIV6.js';
+import '../chunk-ODEQTPFM.js';

package/dist/VisuallyHidden-L552H7OA.css

@@ -0,0 +1,21 @@
+/*
+ * Hidden from the eye, read by everything else.
+ *
+ * The clip rectangle rather than `display: none` or `visibility: hidden`:
+ * those two remove the text from the accessibility tree as well as from the
+ * page. One pixel rather than zero, because a zero-sized element is skipped by
+ * some screen readers. `white-space: nowrap` stops a long sentence wrapping
+ * inside that pixel and being read a word at a time.
+ */
+
+.crewlet-visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  border: 0;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}

package/dist/chunk-22O7LAW2.js

@@ -0,0 +1,41 @@
+import { VisuallyHidden } from './chunk-BZFWDIV6.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './StatCard-KYPKZUWX.css';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+var StatCard = ({
+  label,
+  value,
+  unit,
+  sub,
+  icon,
+  tone = "neutral",
+  loading = false,
+  loadingLabel = "Loading",
+  flush = false,
+  className,
+  ...rest
+}) => /* @__PURE__ */ jsxs(
+  "div",
+  {
+    ...rest,
+    className: cx("crewlet-statcard", `crewlet-statcard--${tone}`, flush && "crewlet-statcard--flush", className),
+    "aria-busy": loading || void 0,
+    children: [
+      /* @__PURE__ */ jsxs("div", { className: "crewlet-statcard__label", children: [
+        icon ? /* @__PURE__ */ jsx("span", { className: "crewlet-statcard__icon", "aria-hidden": true, children: icon }) : null,
+        label
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "crewlet-statcard__value", children: loading ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("span", { className: "crewlet-statcard__placeholder", "aria-hidden": true }),
+        /* @__PURE__ */ jsx(VisuallyHidden, { children: loadingLabel })
+      ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        value,
+        unit ? /* @__PURE__ */ jsx("span", { className: "crewlet-statcard__unit", children: unit }) : null
+      ] }) }),
+      /* @__PURE__ */ jsx("div", { className: "crewlet-statcard__sub", children: sub })
+    ]
+  }
+);
+
+export { StatCard };

package/dist/chunk-23DHIMJA.js

@@ -0,0 +1,38 @@
+import { cx } from './chunk-ODEQTPFM.js';
+import './Text-XIPYYZX2.css';
+import { jsx } from 'react/jsx-runtime';
+
+function Text({
+  as: Tag = "span",
+  variant = "body",
+  tone,
+  mono = false,
+  numeric = false,
+  truncate = false,
+  clamp,
+  measure,
+  className,
+  children,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsx(
+    Tag,
+    {
+      ...rest,
+      className: cx(
+        "crewlet-text",
+        `crewlet-text--${variant}`,
+        tone && `crewlet-text--tone-${tone}`,
+        mono && "crewlet-text--mono",
+        numeric && "crewlet-text--numeric",
+        truncate && "crewlet-text--truncate",
+        clamp !== void 0 && `crewlet-text--clamp-${clamp}`,
+        measure && `crewlet-text--measure-${measure}`,
+        className
+      ),
+      children
+    }
+  );
+}
+
+export { Text };

package/dist/chunk-2EOKFKHX.js

@@ -0,0 +1,263 @@
+import { HeadingLevelProvider } from './chunk-PQADV6P6.js';
+import { useLayerContainer } from './chunk-7RPGY3JE.js';
+import { focusables, useModalLayer, useBodyScrollLock } from './chunk-ITHXJHBB.js';
+import { IconButton } from './chunk-F27EPQ7D.js';
+import { Button } from './chunk-BZYDZBAN.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './Modal-XYQJ4BL6.css';
+import { useId, useRef, useCallback } from 'react';
+import { createPortal } from 'react-dom';
+import { CloseGlyph } from '@crewlethq/icons/glyphs';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+function Modal({ open, ...rest }) {
+  const container = useLayerContainer();
+  return open && container ? /* @__PURE__ */ jsx(ModalFrame, { container, ...rest }, hostKey(container)) : null;
+}
+var hostKeys = /* @__PURE__ */ new WeakMap();
+var hostsSeen = 0;
+function hostKey(host) {
+  const known = hostKeys.get(host);
+  if (known !== void 0) return known;
+  hostsSeen += 1;
+  hostKeys.set(host, hostsSeen);
+  return hostsSeen;
+}
+function given(node) {
+  return node !== void 0 && node !== null && node !== false && node !== "";
+}
+function ModalFrame({
+  container,
+  onClose,
+  title,
+  subtitle,
+  icon,
+  footer,
+  footerStart,
+  headerActions,
+  children,
+  size = "sm",
+  variant = "dialog",
+  shape = "framed",
+  placement,
+  role = "dialog",
+  dismissable = true,
+  closeOnBackdrop = true,
+  showCloseButton = true,
+  stackBody = false,
+  flush = false,
+  className,
+  ariaLabel,
+  describedBy,
+  initialFocus,
+  onSubmit,
+  closeLabel = "Close",
+  closeDisabledReason = "Closing is unavailable until this finishes.",
+  ...rest
+}) {
+  const id = useId();
+  const titleId = `${id}-title`;
+  const subtitleId = `${id}-subtitle`;
+  const prompt = shape === "prompt" && variant === "dialog";
+  const banded = !prompt;
+  const sheet = variant === "sheet";
+  const place = placement ?? (prompt ? "center" : "top");
+  const frame = useRef(null);
+  const body = useRef(null);
+  const foot = useRef(null);
+  const start = useRef(initialFocus);
+  start.current = initialFocus;
+  const where = useCallback(() => {
+    const chosen = start.current?.();
+    if (chosen) return chosen;
+    const inBody = body.current ? focusables(body.current)[0] : void 0;
+    if (inBody) return inBody;
+    const inFoot = foot.current ? focusables(foot.current)[0] : void 0;
+    return inFoot ?? frame.current;
+  }, []);
+  const layer = useModalLayer({ onClose, dismissable, initialFocus: where });
+  useBodyScrollLock(true);
+  const labelledBy = given(title) ? titleId : void 0;
+  const described = describedBy ?? (given(subtitle) ? subtitleId : void 0);
+  const frameProps = {
+    ...rest,
+    ref: (el) => {
+      frame.current = el;
+      layer.panelRef(el);
+    },
+    className: cx(
+      "crewlet-modal",
+      `crewlet-modal--${variant}`,
+      variant === "dialog" ? `crewlet-modal--${size}` : void 0,
+      prompt ? "crewlet-modal--prompt" : void 0,
+      className
+    ),
+    role,
+    "aria-modal": true,
+    "aria-labelledby": labelledBy,
+    "aria-label": labelledBy === void 0 ? ariaLabel : void 0,
+    "aria-describedby": described,
+    tabIndex: -1
+  };
+  const closes = banded && showCloseButton;
+  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+    banded && (given(title) || given(subtitle) || given(headerActions) || closes) ? /* @__PURE__ */ jsxs("div", { className: cx("crewlet-modal__header", sheet ? "crewlet-modal__header--sheet" : void 0), children: [
+      given(icon) ? /* @__PURE__ */ jsx("span", { className: "crewlet-modal__icon", "aria-hidden": "true", children: icon }) : null,
+      /* @__PURE__ */ jsxs("div", { className: "crewlet-modal__heading", children: [
+        given(title) ? /* @__PURE__ */ jsx(
+          "p",
+          {
+            className: cx("crewlet-modal__title", sheet ? "crewlet-modal__title--sheet" : void 0),
+            id: titleId,
+            children: title
+          }
+        ) : null,
+        given(subtitle) ? /* @__PURE__ */ jsx("p", { className: "crewlet-modal__subtitle", id: subtitleId, children: subtitle }) : null
+      ] }),
+      given(headerActions) ? /* @__PURE__ */ jsx("div", { className: "crewlet-modal__actions", children: headerActions }) : null,
+      closes ? /* @__PURE__ */ jsx(
+        IconButton,
+        {
+          className: "crewlet-modal__close",
+          label: closeLabel,
+          icon: /* @__PURE__ */ jsx(CloseGlyph, { size: "md" }),
+          onClick: onClose,
+          disabledReason: dismissable ? void 0 : closeDisabledReason
+        }
+      ) : null
+    ] }) : null,
+    given(children) || prompt && given(title) ? /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: body,
+        className: cx(
+          "crewlet-modal__body",
+          stackBody ? "crewlet-modal__body--stacked" : void 0,
+          flush ? "crewlet-modal__body--flush" : void 0,
+          sheet ? "crewlet-modal__body--sheet" : void 0
+        ),
+        children: [
+          prompt && given(title) ? /* @__PURE__ */ jsx("p", { className: "crewlet-modal__prompt-title", id: titleId, children: title }) : null,
+          /* @__PURE__ */ jsx(HeadingLevelProvider, { level: 2, children })
+        ]
+      }
+    ) : null,
+    given(footer) || given(footerStart) ? /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: foot,
+        className: cx("crewlet-modal__footer", sheet ? "crewlet-modal__footer--sheet" : void 0),
+        children: [
+          given(footerStart) ? /* @__PURE__ */ jsx("div", { className: "crewlet-modal__footer-start", children: footerStart }) : null,
+          /* @__PURE__ */ jsx("div", { className: "crewlet-modal__footer-end", children: footer })
+        ]
+      }
+    ) : null
+  ] });
+  return createPortal(
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: closeOnBackdrop ? layer.veilRef : void 0,
+        className: cx(
+          "crewlet-modal-overlay",
+          `crewlet-modal-overlay--${variant}`,
+          `crewlet-modal-overlay--${place}`,
+          // Fixed against the window, absolute inside a LayerHost: a fullscreen
+          // container paints only its own subtree, so a surface drawn there
+          // covers the container rather than a viewport it cannot reach.
+          container === document.body ? "crewlet-modal-overlay--fixed" : "crewlet-modal-overlay--in-host"
+        ),
+        role: "presentation",
+        style: { zIndex: layer.zIndex },
+        children: /* @__PURE__ */ jsx("div", { ...frameProps, children: onSubmit ? /* @__PURE__ */ jsx(
+          "form",
+          {
+            className: "crewlet-modal__form",
+            onSubmit: (event) => {
+              event.preventDefault();
+              onSubmit();
+            },
+            children: content
+          }
+        ) : content })
+      }
+    ),
+    container
+  );
+}
+function ConfirmModal({
+  open,
+  onClose,
+  onConfirm,
+  title,
+  message,
+  children,
+  confirmLabel = "Confirm",
+  cancelLabel = "Cancel",
+  destructive = false,
+  confirmVariant,
+  cancelVariant = "tertiary",
+  confirmDisabled = false,
+  confirmDisabledReason = "Complete the confirmation above to continue.",
+  submitting = false,
+  busyReason = "Waiting for this to finish.",
+  shape = "prompt",
+  size = "sm"
+}) {
+  const messageId = `${useId()}-message`;
+  const resolvedConfirm = confirmVariant ?? (destructive ? "danger" : "primary");
+  const blocked = confirmDisabled || submitting;
+  const submit = useCallback(() => {
+    if (blocked) return;
+    void (async () => {
+      try {
+        await onConfirm();
+      } catch {
+      }
+    })();
+  }, [blocked, onConfirm]);
+  return /* @__PURE__ */ jsxs(
+    Modal,
+    {
+      open,
+      onClose,
+      title,
+      shape,
+      size,
+      role: destructive ? "alertdialog" : "dialog",
+      describedBy: given(message) ? messageId : void 0,
+      dismissable: !submitting,
+      closeDisabledReason: busyReason,
+      onSubmit: submit,
+      stackBody: true,
+      footer: /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: cancelVariant,
+            onClick: onClose,
+            disabledReason: submitting ? busyReason : void 0,
+            children: cancelLabel
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            type: "submit",
+            variant: resolvedConfirm,
+            loading: submitting,
+            disabledReason: confirmDisabled ? confirmDisabledReason : void 0,
+            children: confirmLabel
+          }
+        )
+      ] }),
+      children: [
+        given(message) ? /* @__PURE__ */ jsx("p", { className: "crewlet-modal__message", id: messageId, children: message }) : null,
+        children
+      ]
+    }
+  );
+}
+
+export { ConfirmModal, Modal };