@crewlethq/ui 0.17.1 → 0.19.0

package/dist/{chunk-DEEVA6TV.js → chunk-7IJARUIF.js}

@@ -1,13 +1,13 @@
 import { Button } from './chunk-OG6CL3EB.js';
-import { IconButton } from './chunk-4FQT6ZAY.js';
 import { HeadingLevelProvider } from './chunk-PQADV6P6.js';
 import { useLayerContainer } from './chunk-HMPFGIWM.js';
 import { focusables, useModalLayer, useBodyScrollLock } from './chunk-R25RGPUB.js';
+import { IconButton } from './chunk-4FQT6ZAY.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './Modal-RQAYGG4L.css';
+import './Modal-XOSV6FAH.css';
 import { useId, useRef, useCallback } from 'react';
 import { createPortal } from 'react-dom';
-import { XGlyph } from '@crewlethq/icons/glyphs';
+import { ChevronLeftGlyph, XGlyph } from '@crewlethq/icons/glyphs';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 function Modal({ open, ...rest }) {
@@ -35,6 +35,8 @@ function ModalFrame({
   footer,
   footerStart,
   headerActions,
+  onBack,
+  backLabel = "Back",
   children,
   size = "sm",
   variant = "dialog",
@@ -43,6 +45,7 @@ function ModalFrame({
   role = "dialog",
   dismissable = true,
   closeOnBackdrop = true,
+  backdrop = "veil",
   showCloseButton = true,
   stackBody = false,
   flush = false,
@@ -101,7 +104,16 @@ function ModalFrame({
   };
   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: [
+    banded && (given(title) || given(subtitle) || given(headerActions) || closes || onBack) ? /* @__PURE__ */ jsxs("div", { className: cx("crewlet-modal__header", sheet ? "crewlet-modal__header--sheet" : void 0), children: [
+      onBack ? /* @__PURE__ */ jsx(
+        IconButton,
+        {
+          className: "crewlet-modal__back",
+          label: backLabel,
+          icon: /* @__PURE__ */ jsx(ChevronLeftGlyph, { size: "md" }),
+          onClick: onBack
+        }
+      ) : null,
       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(
@@ -163,6 +175,7 @@ function ModalFrame({
           "crewlet-modal-overlay",
           `crewlet-modal-overlay--${variant}`,
           `crewlet-modal-overlay--${place}`,
+          backdrop === "clear" && "crewlet-modal-overlay--clear",
           // 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.

package/dist/{chunk-JCO3SIST.js → chunk-7ZNKEPLN.js}

@@ -1,8 +1,8 @@
-import { Tag } from './chunk-LOECRMHA.js';
+import { Tag } from './chunk-GFV4LJHH.js';
 import { useListbox } from './chunk-F73MC7EZ.js';
+import { isComposing } from './chunk-R25RGPUB.js';
 import { announce } from './chunk-RSAQOKH3.js';
 import { IconButton } from './chunk-4FQT6ZAY.js';
-import { isComposing } from './chunk-R25RGPUB.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './TagsInput-P2HS5QL4.css';
 import { forwardRef, useState, useRef, useId, useImperativeHandle, useEffect, useMemo, useLayoutEffect } from 'react';

package/dist/chunk-AIVZVKYZ.js

@@ -0,0 +1,126 @@
+import { Switch } from './chunk-A722MUNR.js';
+import { useReorder } from './chunk-XJ2QEBMM.js';
+import { Checkbox } from './chunk-I6NZKJGK.js';
+import { IconButton } from './chunk-4FQT6ZAY.js';
+import { VisuallyHidden } from './chunk-BZFWDIV6.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './ArrangeList-NNRTDFI5.css';
+import { GripVerticalGlyph, ChevronUpGlyph, ChevronDownGlyph } from '@crewlethq/icons/glyphs';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+
+var DEFAULT_ARRANGE_LABELS = {
+  handle: (name) => `Move ${name}`,
+  hint: "Drag to move, or press the up or down arrow key.",
+  moved: (name, position, total) => `${name} moved to position ${position} of ${total}.`,
+  moveUp: (name) => `Move ${name} up`,
+  moveDown: (name) => `Move ${name} down`,
+  atTop: (name) => `${name} is first.`,
+  atBottom: (name) => `${name} is last.`
+};
+function ArrangeList({
+  label,
+  items,
+  onReorder,
+  onShownChange,
+  toggle = "switch",
+  moveButtons = true,
+  labels: overrides,
+  className
+}) {
+  const labels = { ...DEFAULT_ARRANGE_LABELS, ...overrides };
+  const byKey = new Map(items.map((item) => [item.key, item]));
+  const nameOf = (key) => byKey.get(key)?.label ?? key;
+  const reorder = useReorder({
+    keys: items.map((item) => item.key),
+    onReorder,
+    nameOf,
+    labels
+  });
+  const last = reorder.order.length - 1;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(VisuallyHidden, { id: reorder.hintId, children: reorder.hint }),
+    /* @__PURE__ */ jsx(
+      "ul",
+      {
+        className: cx("crewlet-arrange-list", className),
+        "aria-label": label,
+        ...reorder.containerProps,
+        children: reorder.order.map((key, index) => {
+          const item = byKey.get(key);
+          if (!item) return null;
+          const { "aria-label": handleName, ...handle } = reorder.handleProps(key);
+          const fixed = item.fixed !== void 0 && item.shown ? item.fixed : void 0;
+          const Toggle = toggle === "switch" ? Switch : Checkbox;
+          return /* @__PURE__ */ jsxs(
+            "li",
+            {
+              className: cx("crewlet-arrange-list__item", !item.shown && "is-off"),
+              ...reorder.itemProps(key),
+              children: [
+                /* @__PURE__ */ jsx(
+                  IconButton,
+                  {
+                    size: "sm",
+                    variant: "ghost",
+                    className: "crewlet-arrange-list__handle",
+                    label: handleName,
+                    icon: /* @__PURE__ */ jsx(GripVerticalGlyph, { size: "md" }),
+                    ...handle
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  Toggle,
+                  {
+                    className: "crewlet-arrange-list__toggle",
+                    label: item.icon ? /* @__PURE__ */ jsxs("span", { className: "crewlet-arrange-list__label", children: [
+                      /* @__PURE__ */ jsx("span", { className: "crewlet-arrange-list__icon", "aria-hidden": "true", children: item.icon }),
+                      item.label
+                    ] }) : item.label,
+                    description: fixed ?? item.description,
+                    checked: item.shown,
+                    ...fixed ? { "aria-disabled": true } : {},
+                    onChange: (event) => {
+                      if (fixed) {
+                        event.preventDefault();
+                        return;
+                      }
+                      onShownChange(key, event.target.checked);
+                    }
+                  }
+                ),
+                item.trailing ? /* @__PURE__ */ jsx("span", { className: "crewlet-arrange-list__trailing", children: item.trailing }) : null,
+                moveButtons ? /* @__PURE__ */ jsxs("span", { className: "crewlet-arrange-list__moves", children: [
+                  /* @__PURE__ */ jsx(
+                    IconButton,
+                    {
+                      size: "sm",
+                      variant: "ghost",
+                      label: labels.moveUp(item.label),
+                      icon: /* @__PURE__ */ jsx(ChevronUpGlyph, { size: "sm" }),
+                      ...index === 0 ? { disabledReason: labels.atTop(item.label) } : {},
+                      onClick: () => reorder.move(key, -1)
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    IconButton,
+                    {
+                      size: "sm",
+                      variant: "ghost",
+                      label: labels.moveDown(item.label),
+                      icon: /* @__PURE__ */ jsx(ChevronDownGlyph, { size: "sm" }),
+                      ...index === last ? { disabledReason: labels.atBottom(item.label) } : {},
+                      onClick: () => reorder.move(key, 1)
+                    }
+                  )
+                ] }) : null
+              ]
+            },
+            key
+          );
+        })
+      }
+    )
+  ] });
+}
+
+export { ArrangeList, DEFAULT_ARRANGE_LABELS };

package/dist/{chunk-FSKTOIYC.js → chunk-AJESMWJS.js}

@@ -1,11 +1,11 @@
-import { Menu } from './chunk-NS7BVLL3.js';
-import { EmptyValue } from './chunk-EUCC37WY.js';
-import { Checkbox } from './chunk-75CLJNDQ.js';
-import { Modal } from './chunk-DEEVA6TV.js';
+import { Menu } from './chunk-JULMZNGT.js';
 import { useClipboard } from './chunk-STJ7QBC3.js';
+import { Modal } from './chunk-7IJARUIF.js';
 import { Button } from './chunk-OG6CL3EB.js';
-import { IconButton } from './chunk-4FQT6ZAY.js';
+import { Checkbox } from './chunk-I6NZKJGK.js';
+import { EmptyValue } from './chunk-EUCC37WY.js';
 import { useCardHeaderSlot } from './chunk-AV2DXAEL.js';
+import { IconButton } from './chunk-4FQT6ZAY.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './DataTable-WZK3V62B.css';

package/dist/{chunk-O67VF5MS.js → chunk-AUQPBL4O.js}

@@ -36,7 +36,7 @@ function TimelineItem({
   if (position === null) {
     throw new Error("Timeline.Item must be rendered inside a Timeline.");
   }
-  const spoken = label ?? `${itemLabel} ${position}`;
+  const spoken = label === false ? null : label ?? `${itemLabel} ${position}`;
   return /* @__PURE__ */ jsxs(
     "li",
     {
@@ -46,7 +46,7 @@ function TimelineItem({
       children: [
         /* @__PURE__ */ jsx("span", { className: "crewlet-timeline__rail", children: /* @__PURE__ */ jsx("span", { className: "crewlet-timeline__node", "aria-hidden": true, children: marker ?? position }) }),
         /* @__PURE__ */ jsxs("div", { className: "crewlet-timeline__body", children: [
-          /* @__PURE__ */ jsx(VisuallyHidden, { children: spoken }),
+          spoken === null ? null : /* @__PURE__ */ jsx(VisuallyHidden, { children: spoken }),
           children
         ] })
       ]

package/dist/chunk-CENOOTAV.js

@@ -0,0 +1 @@
+

package/dist/chunk-DEJHAOC5.js

@@ -0,0 +1,279 @@
+import { announce } from './chunk-RSAQOKH3.js';
+import { IconButton } from './chunk-4FQT6ZAY.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './ArrangeFrame-3PLZAG22.css';
+import { forwardRef, useRef, useCallback, useState, useEffect } from 'react';
+import { TrashGlyph } from '@crewlethq/icons/glyphs';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+var clamp = (n, lo, hi) => Math.max(lo, Math.min(hi, n));
+function gridOf(node) {
+  const grid = node.parentElement;
+  const own = node.getBoundingClientRect();
+  if (!grid) return { columns: 12, step: own.width, gap: 0, left: 0, width: own.width };
+  const style = getComputedStyle(grid);
+  const tracks = style.gridTemplateColumns.split(" ").map(parseFloat).filter((n) => !Number.isNaN(n));
+  const gap = parseFloat(style.columnGap) || 0;
+  const track = tracks[0] ?? grid.clientWidth / 12;
+  const box = grid.getBoundingClientRect();
+  const padLeft = parseFloat(style.paddingLeft) || 0;
+  const padRight = parseFloat(style.paddingRight) || 0;
+  return {
+    columns: tracks.length || 12,
+    step: track + gap,
+    gap,
+    left: box.left + padLeft - own.left,
+    width: box.width - padLeft - padRight
+  };
+}
+function useGridResize(frame, { name, size, rowHeight, minColumns = 1, maxColumns, minRows = 2, maxRows = 60, vertical = true, onResize }) {
+  const [live, setLive] = useState(null);
+  const [guides, setGuides] = useState(null);
+  const drag = useRef(null);
+  const say = useCallback(
+    (next, columns) => {
+      const height = next.rows === null ? "its height fits its content" : `${next.rows * rowHeight} pixels tall`;
+      announce(`${name}: ${next.columns} of ${columns} columns wide, ${height}.`);
+    },
+    [name, rowHeight]
+  );
+  const cancel = useCallback(() => {
+    drag.current = null;
+    setLive(null);
+    setGuides(null);
+  }, []);
+  useEffect(() => {
+    if (!live) return;
+    const onKey = (e) => {
+      if (e.key === "Escape") cancel();
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [live, cancel]);
+  const sizeAt = (d, x, y) => {
+    const hi = Math.min(maxColumns ?? d.columns, d.columns);
+    const columns = clamp(Math.round((d.width + (x - d.x) + d.gap) / d.step), Math.min(minColumns, hi), hi);
+    const dy = y - d.y;
+    const rows = !vertical ? size.rows : size.rows === null && Math.abs(dy) < rowHeight / 2 ? null : clamp(Math.round((d.height + dy) / rowHeight), minRows, maxRows);
+    return { columns, rows };
+  };
+  const handleProps = {
+    "aria-label": `Resize ${name}`,
+    "aria-keyshortcuts": "ArrowLeft ArrowRight ArrowUp ArrowDown Enter",
+    onPointerDown: (event) => {
+      if (event.button !== 0 || !frame.current) return;
+      event.preventDefault();
+      event.stopPropagation();
+      try {
+        event.currentTarget.setPointerCapture?.(event.pointerId);
+      } catch {
+      }
+      const rect = frame.current.getBoundingClientRect();
+      const grid = gridOf(frame.current);
+      drag.current = {
+        pointer: event.pointerId,
+        x: event.clientX,
+        y: event.clientY,
+        width: rect.width,
+        height: rect.height,
+        step: grid.step,
+        gap: grid.gap,
+        columns: grid.columns
+      };
+      setGuides({ left: grid.left, width: grid.width, columns: grid.columns, gap: grid.gap });
+      setLive(size);
+    },
+    onPointerMove: (event) => {
+      const d = drag.current;
+      if (!d || d.pointer !== event.pointerId) return;
+      const next = sizeAt(d, event.clientX, event.clientY);
+      setLive((was) => was && was.columns === next.columns && was.rows === next.rows ? was : next);
+    },
+    onPointerUp: (event) => {
+      const d = drag.current;
+      if (!d || d.pointer !== event.pointerId) return;
+      const next = sizeAt(d, event.clientX, event.clientY);
+      drag.current = null;
+      setLive(null);
+      setGuides(null);
+      if (next.columns !== size.columns || next.rows !== size.rows) {
+        onResize(next);
+        say(next, d.columns);
+      }
+    },
+    onPointerCancel: cancel,
+    onKeyDown: (event) => {
+      if (!frame.current || event.altKey || event.ctrlKey || event.metaKey) return;
+      const grid = gridOf(frame.current);
+      const hi = Math.min(maxColumns ?? grid.columns, grid.columns);
+      const rowsNow = size.rows ?? Math.round(frame.current.getBoundingClientRect().height / rowHeight);
+      let next = null;
+      if (event.key === "ArrowLeft") next = { ...size, columns: clamp(size.columns - 1, Math.min(minColumns, hi), hi) };
+      if (event.key === "ArrowRight") next = { ...size, columns: clamp(size.columns + 1, Math.min(minColumns, hi), hi) };
+      if (vertical && event.key === "ArrowUp") next = { ...size, rows: clamp(rowsNow - 1, minRows, maxRows) };
+      if (vertical && event.key === "ArrowDown") next = { ...size, rows: clamp(rowsNow + 1, minRows, maxRows) };
+      if (vertical && event.key === "Enter") next = { ...size, rows: null };
+      if (!next) return;
+      event.preventDefault();
+      event.stopPropagation();
+      if (next.columns === size.columns && next.rows === size.rows) return;
+      onResize(next);
+      say(next, grid.columns);
+    },
+    onDoubleClick: () => {
+      if (!vertical || size.rows === null) return;
+      const next = { ...size, rows: null };
+      onResize(next);
+      say(next, frame.current ? gridOf(frame.current).columns : 12);
+    }
+  };
+  return { live, guides, handleProps };
+}
+var FIELDS = 'input, textarea, select, [contenteditable="true"]';
+function assign(ref, value) {
+  if (typeof ref === "function") ref(value);
+  else if (ref) ref.current = value;
+}
+var ArrangeFrame = forwardRef(function ArrangeFrame2({
+  name,
+  editing,
+  columns,
+  rows = null,
+  rowHeight = 24,
+  handle,
+  resize,
+  actions,
+  onRemove,
+  fixed,
+  container = false,
+  bare = false,
+  selected = false,
+  fresh,
+  className,
+  style,
+  children,
+  ...rest
+}, ref) {
+  const node = useRef(null);
+  const setNode = useCallback(
+    (el) => {
+      node.current = el;
+      assign(ref, el);
+    },
+    [ref]
+  );
+  const vertical = resize?.vertical !== false;
+  const { live, guides, handleProps: resizeProps } = useGridResize(node, {
+    name,
+    size: { columns, rows },
+    rowHeight,
+    minColumns: resize?.minColumns,
+    maxColumns: resize?.maxColumns,
+    minRows: resize?.minRows,
+    maxRows: resize?.maxRows,
+    vertical,
+    onResize: (next) => resize?.onResize(next)
+  });
+  const shown = live ?? { columns, rows };
+  const placed = {
+    ...style,
+    gridColumn: `span ${shown.columns}`,
+    ...shown.rows !== null ? { height: `${shown.rows * rowHeight}px` } : {}
+  };
+  const onField = useRef(false);
+  const surface = editing && handle ? {
+    draggable: true,
+    tabIndex: 0,
+    role: "group",
+    "aria-label": name,
+    "aria-describedby": handle["aria-describedby"],
+    onPointerDownCapture: (event) => {
+      onField.current = event.target.closest(FIELDS) !== null;
+    },
+    onDragStart: (event) => {
+      if (onField.current) event.preventDefault();
+      else handle.onDragStart(event);
+    },
+    onDragEnd: handle.onDragEnd,
+    // The block's own keys only: arrows typed in a group's name move the caret.
+    onKeyDown: (event) => {
+      if (event.target === event.currentTarget) handle.onKeyDown(event);
+    }
+  } : {};
+  const resizeName = vertical ? `Resize ${name}` : `Change the width of ${name}`;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: setNode,
+      className: cx(
+        "crewlet-arrange-frame",
+        editing && "is-editing",
+        container && "is-container",
+        bare && "is-bare",
+        editing && selected && "is-selected",
+        live && "is-resizing",
+        shown.rows !== null && "is-fixed-height",
+        fresh && "is-fresh",
+        className
+      ),
+      style: placed,
+      "data-columns": shown.columns,
+      ...surface,
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "crewlet-arrange-frame__content", inert: editing && !container || void 0, children }),
+        editing ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsxs("div", { className: "crewlet-arrange-frame__bar", role: "group", "aria-label": `Tools for ${name}`, children: [
+            actions,
+            onRemove || fixed ? /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx("span", { className: "crewlet-arrange-frame__sep", "aria-hidden": "true" }),
+              /* @__PURE__ */ jsx(
+                IconButton,
+                {
+                  size: "sm",
+                  variant: "ghost-danger",
+                  label: `Remove ${name}`,
+                  icon: /* @__PURE__ */ jsx(TrashGlyph, { size: "sm" }),
+                  ...fixed ? { disabledReason: fixed } : {},
+                  onClick: () => onRemove?.()
+                }
+              )
+            ] }) : null
+          ] }),
+          resize ? /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: cx("crewlet-arrange-frame__resize", vertical ? "is-corner" : "is-edge"),
+              title: vertical ? `${resizeName}. Double click to fit the height to its content.` : resizeName,
+              draggable: false,
+              ...resizeProps,
+              "aria-label": resizeName,
+              children: /* @__PURE__ */ jsx("span", { className: "crewlet-arrange-frame__grip", "aria-hidden": "true" })
+            }
+          ) : null,
+          guides ? /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "crewlet-arrange-frame__guides",
+              "aria-hidden": "true",
+              style: {
+                left: `${guides.left}px`,
+                width: `${guides.width}px`,
+                gridTemplateColumns: `repeat(${guides.columns}, minmax(0, 1fr))`,
+                columnGap: `${guides.gap}px`
+              },
+              children: Array.from({ length: guides.columns }, (_, i) => /* @__PURE__ */ jsx("span", {}, i))
+            }
+          ) : null,
+          live ? /* @__PURE__ */ jsxs("span", { className: "crewlet-arrange-frame__size", "aria-hidden": "true", children: [
+            `${live.columns} ${live.columns === 1 ? "column" : "columns"}`,
+            vertical ? ` \xB7 ${live.rows === null ? "Height fits content" : `${live.rows * rowHeight} px tall`}` : ""
+          ] }) : null
+        ] }) : null
+      ]
+    }
+  );
+});
+
+export { ArrangeFrame, useGridResize };

package/dist/{chunk-UCYIRDND.js → chunk-DQSXWQMJ.js}

@@ -1,4 +1,4 @@
-import { Tag } from './chunk-LOECRMHA.js';
+import { Tag } from './chunk-GFV4LJHH.js';
 import './PricingCard-HTAHG4ST.css';
 import { forwardRef } from 'react';
 import { jsx } from 'react/jsx-runtime';

package/dist/{chunk-JF7X673Z.js → chunk-EIGEIT4O.js}

@@ -1,10 +1,10 @@
 import { Select } from './chunk-FC4YTTFJ.js';
-import { Input } from './chunk-4GB57WIT.js';
 import { today, shiftMonth, CalendarGrid, compareDays } from './chunk-GXQ3B46I.js';
 import { Button } from './chunk-OG6CL3EB.js';
-import { IconButton } from './chunk-4FQT6ZAY.js';
+import { Input } from './chunk-Q55TXPA3.js';
 import { Popover } from './chunk-BWRGFKJP.js';
 import { isComposing } from './chunk-R25RGPUB.js';
+import { IconButton } from './chunk-4FQT6ZAY.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './TimeWindowPicker-BZ5HHATU.css';
 import { useMemo, useState, useRef, useId, useEffect } from 'react';

package/dist/chunk-F6V2PTN6.js

@@ -0,0 +1,142 @@
+import { isDensityPreference, isPaletteId, isThemePreference, applyTheme, applyPalette, applyDensity } from './chunk-ZXXDZJQN.js';
+import { DEFAULT_THEME_ID } from '@crewlethq/tokens';
+
+var FRAME_MESSAGE = {
+  /** Frame to host, on the window: "I am the document you embedded, here is your nonce". */
+  hello: "crewlet.hello",
+  /** Host to frame, on the window, carrying the transferred port. */
+  port: "crewlet.port",
+  /** Host to frame, on the port: the reader's appearance changed. */
+  theme: "crewlet.theme",
+  /** Frame to host, on the port: open this link outside the frame. */
+  openLink: "crewlet.openLink",
+  /** Frame to host, on the port: give keyboard focus back to the page around the frame. */
+  focusExit: "crewlet.focusExit"
+};
+var FRAME_BRIDGE = { min: 1, max: 1 };
+var FRAME_ORIGIN_MODES = ["per_artifact", "shared"];
+var DEFAULT_FRAME_THEME = { mode: "system", palette: DEFAULT_THEME_ID, density: "normal" };
+function frameFragment(nonce, theme) {
+  const params = new URLSearchParams();
+  params.set("nonce", nonce);
+  params.set("theme", theme.mode);
+  params.set("palette", theme.palette);
+  params.set("density", theme.density);
+  return params.toString();
+}
+var NONCE = /^[A-Za-z0-9_-]{16,256}$/;
+function parseFrameFragment(hash) {
+  const params = new URLSearchParams(hash.startsWith("#") ? hash.slice(1) : hash);
+  const nonce = params.get("nonce");
+  const mode = params.get("theme");
+  const palette = params.get("palette");
+  const density = params.get("density");
+  return {
+    nonce: nonce !== null && NONCE.test(nonce) ? nonce : null,
+    theme: {
+      mode: isThemePreference(mode) ? mode : DEFAULT_FRAME_THEME.mode,
+      // A well-formed id the tokens do not know selects no block and paints
+      // the default, which is what an unknown palette should do.
+      palette: isPaletteId(palette) ? palette : DEFAULT_FRAME_THEME.palette,
+      density: isDensityPreference(density) ? density : DEFAULT_FRAME_THEME.density
+    }
+  };
+}
+function isFrameNonce(value) {
+  return typeof value === "string" && NONCE.test(value);
+}
+function httpOrigin(raw) {
+  let url;
+  try {
+    url = new URL(raw);
+  } catch {
+    return null;
+  }
+  return url.protocol === "https:" || url.protocol === "http:" ? url.origin : null;
+}
+function frameOriginMatches(mode, expected, actual) {
+  return mode === "per_artifact" ? actual === expected : actual === "null";
+}
+function portTargetOrigin(mode, origin) {
+  return mode === "per_artifact" ? origin : "*";
+}
+var FRAME_SANDBOX_TOKENS = {
+  "allow-scripts": "always",
+  "allow-forms": "always",
+  // Only on an origin of the artifact's own: on the shared host it would hand
+  // every artifact the same storage and the same origin.
+  "allow-same-origin": "per_artifact",
+  // Only when the version declares them, which the engine decides.
+  "allow-downloads": "declared",
+  "allow-modals": "declared"
+};
+function checkFrameSandbox(sandbox, mode) {
+  const tokens = sandbox.split(/\s+/).filter(Boolean);
+  const refused = tokens.filter((token) => {
+    const rule = FRAME_SANDBOX_TOKENS[token];
+    if (rule === void 0) return true;
+    return rule === "per_artifact" && mode !== "per_artifact";
+  });
+  return refused.length > 0 ? { ok: false, refused } : { ok: true, value: tokens.join(" ") };
+}
+var record = (data) => typeof data === "object" && data !== null && !Array.isArray(data) ? data : null;
+var CONTRACT = /^\d{1,4}\.\d{1,5}\.\d{1,6}$/;
+var bridgeVersion = (value) => typeof value === "number" && Number.isInteger(value) && value >= 1 && value <= 9999;
+function readFrameHello(data) {
+  const message = record(data);
+  if (!message || message["type"] !== FRAME_MESSAGE.hello) return null;
+  const { nonce, contract } = message;
+  const bridge = record(message["bridge"]);
+  if (!isFrameNonce(nonce) || typeof contract !== "string" || !CONTRACT.test(contract) || !bridge) return null;
+  const { min, max } = bridge;
+  if (!bridgeVersion(min) || !bridgeVersion(max) || min > max) return null;
+  return { type: FRAME_MESSAGE.hello, nonce, contract, bridge: { min, max } };
+}
+function negotiateBridge(offered, supported = FRAME_BRIDGE) {
+  const high = Math.min(offered.max, supported.max);
+  return high >= Math.max(offered.min, supported.min) ? high : null;
+}
+function readFramePortMessage(data) {
+  const message = record(data);
+  if (!message || message["type"] !== FRAME_MESSAGE.port || !bridgeVersion(message["bridge"])) return null;
+  return { type: FRAME_MESSAGE.port, bridge: message["bridge"] };
+}
+function frameThemeMessage(theme) {
+  return { type: FRAME_MESSAGE.theme, mode: theme.mode, palette: theme.palette, density: theme.density };
+}
+function readFrameTheme(data) {
+  const message = record(data);
+  if (!message || message["type"] !== FRAME_MESSAGE.theme) return null;
+  const { mode, palette, density } = message;
+  if (!isThemePreference(mode) || !isPaletteId(palette) || !isDensityPreference(density)) return null;
+  return { mode, palette, density };
+}
+function applyFrameTheme(theme, root) {
+  applyTheme(theme.mode, root);
+  applyPalette(theme.palette, root);
+  applyDensity(theme.density, root);
+}
+function readOpenLink(data) {
+  const message = record(data);
+  if (!message || message["type"] !== FRAME_MESSAGE.openLink) return null;
+  return typeof message["url"] === "string" ? message["url"] : null;
+}
+function isFocusExit(data) {
+  return record(data)?.["type"] === FRAME_MESSAGE.focusExit;
+}
+var EXTERNAL_URL_MAX = 2048;
+function externalUrl(raw) {
+  if (raw.length === 0 || raw.length > EXTERNAL_URL_MAX) return null;
+  let url;
+  try {
+    url = new URL(raw);
+  } catch {
+    return null;
+  }
+  if (url.protocol === "mailto:") return url.pathname.length > 0 ? url : null;
+  if (url.protocol !== "https:" && url.protocol !== "http:") return null;
+  if (url.username !== "" || url.password !== "" || url.hostname === "") return null;
+  return url;
+}
+
+export { DEFAULT_FRAME_THEME, EXTERNAL_URL_MAX, FRAME_BRIDGE, FRAME_MESSAGE, FRAME_ORIGIN_MODES, FRAME_SANDBOX_TOKENS, applyFrameTheme, checkFrameSandbox, externalUrl, frameFragment, frameOriginMatches, frameThemeMessage, httpOrigin, isFocusExit, isFrameNonce, negotiateBridge, parseFrameFragment, portTargetOrigin, readFrameHello, readFramePortMessage, readFrameTheme, readOpenLink };