@crewlethq/ui 0.55.0 → 0.57.0

package/dist/chunk-LXYSWQNE.js

@@ -0,0 +1,214 @@
+import { useAppShellPeek, ResizeHandle } from './chunk-PIYJNCN7.js';
+import { ButtonLink } from './chunk-HD4QJ2SI.js';
+import { IconButton } from './chunk-2BQYODY3.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './HitArea-QUOS6ZDJ.css';
+import './ResizeHandle-2UNSZ4ZQ.css';
+import './PeekRail-4L5YUQMW.css';
+import { createContext, useRef, useEffect, useState, useMemo, useContext, Fragment as Fragment$1 } from 'react';
+import { ChevronUpGlyph, ChevronDownGlyph, ArrowUpRightGlyph, XGlyph } from '@crewlethq/icons/glyphs';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+
+var PEEK_RAIL_WIDTH = 420;
+var PEEK_RAIL_MIN_WIDTH = 330;
+var PEEK_RAIL_MAX_WIDTH = 640;
+var PEEK_RAIL_LABELS = {
+  previous: "Previous",
+  next: "Next",
+  close: "Close",
+  open: "Open",
+  resize: "Resize the detail panel"
+};
+function PeekRail({
+  label,
+  shape: asked,
+  width = PEEK_RAIL_WIDTH,
+  minWidth = PEEK_RAIL_MIN_WIDTH,
+  maxWidth = PEEK_RAIL_MAX_WIDTH,
+  defaultWidth = PEEK_RAIL_WIDTH,
+  reserve,
+  onWidthChange,
+  onWidthCommit,
+  onClose,
+  onStep,
+  openHref,
+  labels,
+  className,
+  children
+}) {
+  const words = { ...PEEK_RAIL_LABELS, ...labels };
+  const slot = useAppShellPeek();
+  const shape = asked ?? slot?.shape ?? "column";
+  const rail = useRef(null);
+  const close = useRef(onClose);
+  close.current = onClose;
+  useEffect(() => {
+    const element = rail.current;
+    if (!element) return void 0;
+    const doc = element.ownerDocument;
+    const onKeyDown = (event) => {
+      if (event.key !== "Escape" || event.defaultPrevented || event.isComposing) return;
+      if (!(event.target instanceof Node) || !element.contains(event.target)) return;
+      event.preventDefault();
+      close.current();
+    };
+    doc.addEventListener("keydown", onKeyDown);
+    return () => doc.removeEventListener("keydown", onKeyDown);
+  }, []);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    shape === "drawer" ? (
+      // A press on the page behind the drawer closes it, as a press on
+      // nothing does beside a column. The veil is a pointer convenience:
+      // the keyboard closes the rail with Close or Escape.
+      /* @__PURE__ */ jsx("div", { className: "crewlet-peek-rail__veil", role: "presentation", onClick: onClose })
+    ) : null,
+    /* @__PURE__ */ jsxs(
+      "aside",
+      {
+        ref: rail,
+        className: cx("crewlet-peek-rail", className),
+        "data-shape": shape,
+        "aria-label": label,
+        style: {
+          ["--crewlet-peek-rail-width"]: `${width}px`,
+          ...reserve === void 0 ? null : { ["--crewlet-peek-rail-reserve"]: `${reserve}px` }
+        },
+        children: [
+          shape === "column" && onWidthChange ? /* @__PURE__ */ jsx(
+            ResizeHandle,
+            {
+              label: words.resize,
+              value: width,
+              min: minWidth,
+              max: maxWidth,
+              defaultValue: defaultWidth,
+              onValueChange: onWidthChange,
+              onValueCommit: onWidthCommit,
+              edge: "left"
+            }
+          ) : null,
+          /* @__PURE__ */ jsxs("div", { className: "crewlet-peek-rail__bar", children: [
+            onStep ? /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(
+                IconButton,
+                {
+                  size: "sm",
+                  variant: "ghost",
+                  icon: /* @__PURE__ */ jsx(ChevronUpGlyph, { size: "sm" }),
+                  label: words.previous,
+                  title: words.previousHint,
+                  onClick: () => onStep(-1)
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                IconButton,
+                {
+                  size: "sm",
+                  variant: "ghost",
+                  icon: /* @__PURE__ */ jsx(ChevronDownGlyph, { size: "sm" }),
+                  label: words.next,
+                  title: words.nextHint,
+                  onClick: () => onStep(1)
+                }
+              )
+            ] }) : null,
+            /* @__PURE__ */ jsx("span", { className: "crewlet-peek-rail__spacer" }),
+            openHref ? /* @__PURE__ */ jsx(
+              ButtonLink,
+              {
+                size: "small",
+                variant: "secondary",
+                href: openHref,
+                trailingIcon: /* @__PURE__ */ jsx(ArrowUpRightGlyph, { size: "sm" }),
+                children: words.open
+              }
+            ) : null,
+            /* @__PURE__ */ jsx(
+              IconButton,
+              {
+                size: "sm",
+                variant: "ghost",
+                icon: /* @__PURE__ */ jsx(XGlyph, { size: "sm" }),
+                label: words.close,
+                title: words.closeHint,
+                onClick: onClose
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "crewlet-peek-rail__body", children })
+        ]
+      }
+    )
+  ] });
+}
+var NeighbourContext = createContext(null);
+var NOTHING = { tokens: [] };
+function PeekNeighbours({ children }) {
+  const [published, publish] = useState(NOTHING);
+  const value = useMemo(() => ({ ...published, publish }), [published]);
+  return /* @__PURE__ */ jsx(NeighbourContext.Provider, { value, children });
+}
+function usePeekOrder() {
+  const host = useContext(NeighbourContext);
+  return host ? { tokens: host.tokens, query: host.query } : NOTHING;
+}
+function usePeekNeighbours(tokens, query) {
+  const publish = useContext(NeighbourContext)?.publish;
+  const key = tokens.join("\0");
+  const queryKey = query ? new URLSearchParams(query).toString() : "";
+  useEffect(() => {
+    if (!publish) return void 0;
+    const order = {
+      tokens: key === "" ? [] : key.split("\0"),
+      ...queryKey === "" ? null : { query: Object.fromEntries(new URLSearchParams(queryKey)) }
+    };
+    publish(order);
+    return () => publish(NOTHING);
+  }, [key, queryKey, publish]);
+}
+function usePeekStep(current, move) {
+  const { tokens } = usePeekOrder();
+  if (current === null) return void 0;
+  const at = tokens.indexOf(current);
+  if (at < 0 || tokens.length < 2) return void 0;
+  return (delta) => {
+    const next = tokens[Math.max(0, Math.min(tokens.length - 1, at + delta))];
+    if (next !== void 0 && next !== current) move(next);
+  };
+}
+function PeekHost({ current, render, label, onClose, onMove, openHref, boundary, ...rail }) {
+  const order = usePeekOrder();
+  const step = usePeekStep(current, onMove);
+  const body = current === null ? void 0 : render(current);
+  const missing = current !== null && body === void 0;
+  useEffect(() => {
+    if (missing) onClose();
+  }, [missing, onClose]);
+  if (current === null || body === void 0) return null;
+  const query = order.tokens.includes(current) ? order.query : void 0;
+  return /* @__PURE__ */ jsx(PeekRail, { ...rail, label: label(current), onClose, onStep: step, openHref: openHref?.(current, query), children: /* @__PURE__ */ jsx(Fragment$1, { children: boundary ? boundary(current, body) : body }, current) });
+}
+
+// src/PeekRail/activation.ts
+function isPlainPress(event) {
+  return !event.defaultPrevented && event.button === 0 && !event.metaKey && !event.ctrlKey && !event.shiftKey && !event.altKey;
+}
+function peekClickHandler(open) {
+  if (!open) return void 0;
+  return (event) => {
+    if (!isPlainPress(event)) return;
+    event.preventDefault();
+    open();
+  };
+}
+function peekRowActivation(open) {
+  return (row, event) => {
+    if (!("button" in event)) {
+      open(row);
+      return;
+    }
+    peekClickHandler(() => open(row))?.(event);
+  };
+}
+
+export { PEEK_RAIL_LABELS, PEEK_RAIL_MAX_WIDTH, PEEK_RAIL_MIN_WIDTH, PEEK_RAIL_WIDTH, PeekHost, PeekNeighbours, PeekRail, isPlainPress, peekClickHandler, peekRowActivation, usePeekNeighbours, usePeekOrder, usePeekStep };

package/dist/chunk-LZXY6IMO.js

@@ -0,0 +1,68 @@
+import { Button } from './chunk-HD4QJ2SI.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './ReceiptStrip-IIRKRTBG.css';
+import { CircleAlertGlyph, TriangleAlertGlyph, InfoGlyph, CircleCheckGlyph } from '@crewlethq/icons/glyphs';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+var ICONS = {
+  success: /* @__PURE__ */ jsx(CircleCheckGlyph, { size: "md" }),
+  neutral: /* @__PURE__ */ jsx(InfoGlyph, { size: "md" }),
+  info: /* @__PURE__ */ jsx(InfoGlyph, { size: "md" }),
+  warning: /* @__PURE__ */ jsx(TriangleAlertGlyph, { size: "md" }),
+  danger: /* @__PURE__ */ jsx(CircleAlertGlyph, { size: "md" })
+};
+function ReceiptStrip({
+  tone = "success",
+  icon,
+  children,
+  actions,
+  announce = true,
+  className,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...rest,
+      role: announce ? tone === "danger" ? "alert" : "status" : void 0,
+      className: cx("crewlet-receipt-strip", `crewlet-receipt-strip--${tone}`, className),
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "crewlet-receipt-strip__icon", "aria-hidden": "true", children: icon ?? ICONS[tone] }),
+        /* @__PURE__ */ jsx("div", { className: "crewlet-receipt-strip__text", children }),
+        actions === void 0 || actions === null || actions === false ? null : /* @__PURE__ */ jsx("div", { className: "crewlet-receipt-strip__actions", children: actions })
+      ]
+    }
+  );
+}
+var REFUSAL_STRIP_LABELS = { retry: "Try again", dismiss: "Dismiss" };
+function RefusalStrip({
+  children,
+  hint,
+  onRetry,
+  retrying = false,
+  onDismiss,
+  placement = "inline",
+  announce = true,
+  labels: overrides,
+  className,
+  ...rest
+}) {
+  const labels = overrides ? { ...REFUSAL_STRIP_LABELS, ...overrides } : REFUSAL_STRIP_LABELS;
+  const actions = onRetry || onDismiss ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    onRetry ? /* @__PURE__ */ jsx(Button, { size: "small", variant: "ghost", loading: retrying, onClick: onRetry, children: labels.retry }) : null,
+    onDismiss ? /* @__PURE__ */ jsx(Button, { size: "small", variant: "ghost", onClick: onDismiss, children: labels.dismiss }) : null
+  ] }) : void 0;
+  const words = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("span", { className: "crewlet-refusal-strip__sentence", children }),
+    hint === void 0 || hint === null ? null : /* @__PURE__ */ jsx("span", { className: "crewlet-refusal-strip__hint", children: hint })
+  ] });
+  if (placement === "foot") {
+    return /* @__PURE__ */ jsx(ReceiptStrip, { ...rest, tone: "danger", announce, actions, className: cx("crewlet-refusal-strip--foot", className), children: words });
+  }
+  return /* @__PURE__ */ jsxs("span", { ...rest, role: announce ? "alert" : void 0, className: cx("crewlet-refusal-strip", className), children: [
+    words,
+    actions
+  ] });
+}
+
+export { REFUSAL_STRIP_LABELS, ReceiptStrip, RefusalStrip };

package/dist/{chunk-EKLEYNGR.js → chunk-MYX4XABB.js}

@@ -1,10 +1,10 @@
 import { Select } from './chunk-XQZ6EWOE.js';
 import { today, shiftMonth, CalendarGrid, compareDays } from './chunk-GXQ3B46I.js';
 import { Popover } from './chunk-KHJIEPZV.js';
-import { Input } from './chunk-XANKR3EP.js';
-import { Button } from './chunk-OG6CL3EB.js';
+import { Input } from './chunk-FXQLNETQ.js';
+import { Button } from './chunk-HD4QJ2SI.js';
 import { isComposing } from './chunk-H5XTJ7GJ.js';
-import { IconButton } from './chunk-LACA4JGC.js';
+import { IconButton } from './chunk-2BQYODY3.js';
 import { useFocusModality } from './chunk-NUZHC6MM.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './TimeWindowPicker-I3HXC74I.css';

package/dist/{chunk-PM3JVNRY.js → chunk-N3ISZVLK.js}

@@ -1,5 +1,5 @@
 import { useThemePreference, useSystemTheme, resolveTheme } from './chunk-Z24ZUSTX.js';
-import { IconButton } from './chunk-LACA4JGC.js';
+import { IconButton } from './chunk-2BQYODY3.js';
 import { SunGlyph, MoonGlyph } from '@crewlethq/icons/glyphs';
 import { jsx } from 'react/jsx-runtime';
 

package/dist/chunk-NEHSV55H.js

@@ -0,0 +1,119 @@
+import { DiffList } from './chunk-Z3GDMNMU.js';
+import { Tag } from './chunk-KYIAFNU7.js';
+import { Disclosure } from './chunk-GG4QZWMQ.js';
+import { VisuallyHidden } from './chunk-BZFWDIV6.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './ChangeList-CB2DLR5S.css';
+import { useId } from 'react';
+import { ArrowRightGlyph } from '@crewlethq/icons/glyphs';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+var CHANGE_LIST_LABELS = {
+  changedFrom: "Changed from",
+  to: "to",
+  added: "Added:",
+  removed: "Removed:",
+  isNew: "New",
+  addedWords: "added",
+  removedWords: "removed",
+  showWhole: "Show the whole change"
+};
+var CHANGE_LIST_COLLAPSE_OVER = 80;
+var ELLIPSIS = "\u2026";
+function shortenUnchanged(text, place, max = CHANGE_LIST_COLLAPSE_OVER) {
+  if (text.length <= max) return text;
+  const keep = place === "middle" ? Math.floor(max / 2) : max;
+  const words = text.trim();
+  const head = () => {
+    const cut = words.slice(0, keep);
+    const space = cut.lastIndexOf(" ");
+    return (space > 0 ? cut.slice(0, space) : cut).trim();
+  };
+  const tail = () => {
+    const cut = words.slice(Math.max(0, words.length - keep));
+    const space = cut.indexOf(" ");
+    return (space >= 0 ? cut.slice(space + 1) : cut).trim();
+  };
+  const lead = /^\s/.test(text) ? " " : "";
+  const trail = /\s$/.test(text) ? " " : "";
+  if (place === "first") return `${ELLIPSIS} ${tail()}${trail}`;
+  if (place === "last") return `${lead}${head()} ${ELLIPSIS}`;
+  return `${lead}${head()} ${ELLIPSIS} ${tail()}${trail}`;
+}
+function WordDiff({ row, labels }) {
+  const max = row.collapseOver ?? CHANGE_LIST_COLLAPSE_OVER;
+  const changes = row.words.map((part, index) => part.op === "=" ? -1 : index).filter((index) => index >= 0);
+  const firstChange = changes[0] ?? Number.POSITIVE_INFINITY;
+  const lastChange = changes[changes.length - 1] ?? Number.NEGATIVE_INFINITY;
+  return /* @__PURE__ */ jsx("p", { className: "crewlet-change-list__words", children: row.words.map((part, index) => {
+    if (part.op === "+") {
+      return /* @__PURE__ */ jsxs("ins", { className: "crewlet-change-list__inserted", children: [
+        /* @__PURE__ */ jsx(VisuallyHidden, { children: `${labels.addedWords} ` }),
+        part.text
+      ] }, index);
+    }
+    if (part.op === "-") {
+      return /* @__PURE__ */ jsxs("del", { className: "crewlet-change-list__deleted", children: [
+        /* @__PURE__ */ jsx(VisuallyHidden, { children: `${labels.removedWords} ` }),
+        part.text
+      ] }, index);
+    }
+    const place = index < firstChange ? "first" : index > lastChange ? "last" : "middle";
+    return /* @__PURE__ */ jsx("span", { children: shortenUnchanged(part.text, place, max) }, index);
+  }) });
+}
+function Value({ row, labels }) {
+  switch (row.kind) {
+    case "fact":
+      return /* @__PURE__ */ jsx("span", { className: "crewlet-change-list__fact", children: row.value });
+    case "changed":
+      return /* @__PURE__ */ jsxs("span", { className: "crewlet-change-list__pair", children: [
+        /* @__PURE__ */ jsx(VisuallyHidden, { children: `${labels.changedFrom} ` }),
+        /* @__PURE__ */ jsx("del", { className: "crewlet-change-list__from", children: row.from }),
+        /* @__PURE__ */ jsxs("span", { className: "crewlet-change-list__next", children: [
+          /* @__PURE__ */ jsx(ArrowRightGlyph, { size: "sm", className: "crewlet-change-list__arrow" }),
+          /* @__PURE__ */ jsx(VisuallyHidden, { children: ` ${labels.to} ` }),
+          /* @__PURE__ */ jsx("ins", { className: "crewlet-change-list__to", children: row.to })
+        ] })
+      ] });
+    case "added":
+      return /* @__PURE__ */ jsxs("span", { className: "crewlet-change-list__pair", children: [
+        /* @__PURE__ */ jsxs("ins", { className: "crewlet-change-list__to", children: [
+          /* @__PURE__ */ jsx(VisuallyHidden, { children: `${labels.added} ` }),
+          row.to
+        ] }),
+        row.isNew ? /* @__PURE__ */ jsx(Tag, { size: "xs", variant: "success", children: labels.isNew }) : null
+      ] });
+    case "removed":
+      return /* @__PURE__ */ jsxs("del", { className: "crewlet-change-list__removed", children: [
+        /* @__PURE__ */ jsx(VisuallyHidden, { children: `${labels.removed} ` }),
+        row.from
+      ] });
+  }
+}
+function ChangeList({ rows, heading, settled = false, labels: overrides, diffLabels, className }) {
+  const labels = overrides ? { ...CHANGE_LIST_LABELS, ...overrides } : CHANGE_LIST_LABELS;
+  const headingId = useId();
+  return /* @__PURE__ */ jsxs("div", { className: cx("crewlet-change-list", settled && "crewlet-change-list--settled", className), children: [
+    heading === void 0 || heading === null ? null : /* @__PURE__ */ jsx("div", { id: headingId, className: "crewlet-change-list__heading", children: heading }),
+    /* @__PURE__ */ jsx("dl", { className: "crewlet-change-list__rows", "aria-labelledby": heading === void 0 || heading === null ? void 0 : headingId, children: rows.map((row, index) => /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cx("crewlet-change-list__row", `crewlet-change-list__row--${row.kind}`),
+        children: [
+          /* @__PURE__ */ jsx("dt", { className: "crewlet-change-list__label", children: row.label }),
+          /* @__PURE__ */ jsxs("dd", { className: "crewlet-change-list__value", children: [
+            row.kind === "text" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(WordDiff, { row, labels }),
+              row.whole && row.whole.length > 0 ? /* @__PURE__ */ jsx(Disclosure, { title: labels.showWhole, headingLevel: "none", size: "compact", className: "crewlet-change-list__whole", children: /* @__PURE__ */ jsx(DiffList, { rows: [...row.whole], layout: "auto", labels: diffLabels }) }) : null
+            ] }) : /* @__PURE__ */ jsx(Value, { row, labels }),
+            row.note === void 0 || row.note === null ? null : /* @__PURE__ */ jsx("span", { className: "crewlet-change-list__note", children: row.note })
+          ] })
+        ]
+      },
+      `${index}:${row.label}`
+    )) })
+  ] });
+}
+
+export { CHANGE_LIST_COLLAPSE_OVER, CHANGE_LIST_LABELS, ChangeList, shortenUnchanged };

package/dist/{chunk-LLHO4FJK.js → chunk-NHJQXDHA.js}

@@ -1,4 +1,4 @@
-import { FormField } from './chunk-XANKR3EP.js';
+import { FormField } from './chunk-FXQLNETQ.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './Checkbox-MB22OW6P.css';

package/dist/{chunk-F6CKQX5D.js → chunk-NK3D66PB.js}

@@ -1,7 +1,7 @@
 import { Toolbar } from './chunk-NR4CPM4T.js';
-import { Button } from './chunk-OG6CL3EB.js';
-import { returnFocus } from './chunk-NUZHC6MM.js';
 import { announce } from './chunk-RSAQOKH3.js';
+import { Button } from './chunk-HD4QJ2SI.js';
+import { returnFocus } from './chunk-NUZHC6MM.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './SelectionBar-XPWKUOSC.css';
 import { useRef, useEffect } from 'react';

package/dist/{chunk-RHPBTE3F.js → chunk-NQGZRMUG.js}

@@ -1,4 +1,4 @@
-import { Copyable } from './chunk-7SHAFLEX.js';
+import { Copyable } from './chunk-ES4HR34Y.js';
 import { normalizeHex } from './chunk-7W3LYIOC.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './ColorSwatch-DNMUFHNS.css';

package/dist/chunk-NVZCANJ5.js

@@ -0,0 +1,3 @@
+import './HitArea-QUOS6ZDJ.css';
+import './ResizeHandle-2UNSZ4ZQ.css';
+import './SidePanel-ERBUIELD.css';

package/dist/{chunk-RRO7UEYU.js → chunk-OHBXOEP3.js}

@@ -1,4 +1,4 @@
-import { IconButton } from './chunk-LACA4JGC.js';
+import { IconButton } from './chunk-2BQYODY3.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './SlideNav-BLFJF6AH.css';
 import { ChevronLeftGlyph, ChevronRightGlyph } from '@crewlethq/icons/glyphs';

package/dist/{chunk-USVUSO3S.js → chunk-OHG7762N.js}

@@ -1,5 +1,5 @@
 import { diffLines, diffStat, collapseDiff, DiffSummary, DiffView } from './chunk-BVWSLXTY.js';
-import { SegmentedControl } from './chunk-CNGHOTHV.js';
+import { SegmentedControl } from './chunk-AWSFK2IK.js';
 import { EmptyState } from './chunk-PPUR46MK.js';
 import { useHeadingLevel, headingTag, nextHeadingLevel, HeadingLevelProvider } from './chunk-PQADV6P6.js';
 import { cx } from './chunk-ODEQTPFM.js';

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

@@ -1,4 +1,4 @@
-import { IconTile } from './chunk-IXJHTFXG.js';
+import { IconTile } from './chunk-3LI4TRUR.js';
 import { Tag } from './chunk-KYIAFNU7.js';
 import { useHeadingLevel, headingTag } from './chunk-PQADV6P6.js';
 import { cx } from './chunk-ODEQTPFM.js';

package/dist/{chunk-ITTECHM4.js → chunk-OOZ5AGPS.js}

@@ -1,12 +1,12 @@
 import { Select } from './chunk-XQZ6EWOE.js';
-import { Modal } from './chunk-NWGGH2LN.js';
-import { CopyButton } from './chunk-7SHAFLEX.js';
+import { CopyButton } from './chunk-ES4HR34Y.js';
+import { Modal } from './chunk-QZ4B72FP.js';
 import { Callout } from './chunk-BPCY7ZID.js';
 import { PrincipalAvatar } from './chunk-CI3VPIJN.js';
-import { useMediaMatch } from './chunk-RTPQDNW3.js';
 import { useHeadingLevel, headingTag } from './chunk-PQADV6P6.js';
-import { Button } from './chunk-OG6CL3EB.js';
-import { IconButton } from './chunk-LACA4JGC.js';
+import { useMediaMatch } from './chunk-RTPQDNW3.js';
+import { Button } from './chunk-HD4QJ2SI.js';
+import { IconButton } from './chunk-2BQYODY3.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './ShareDialog-4QDCBWMH.css';
 import { useState, useId } from 'react';

package/dist/{chunk-BZXY2L2D.js → chunk-OYAXKHVW.js}

@@ -1,5 +1,5 @@
 import { NODE_HUES, NODE_HUE_NAMES } from './chunk-AYKXMIOR.js';
-import { SegmentedControl } from './chunk-CNGHOTHV.js';
+import { SegmentedControl } from './chunk-AWSFK2IK.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import { jsx } from 'react/jsx-runtime';
 

package/dist/{chunk-WQQ5T5SA.js → chunk-OZIBNFLO.js}

@@ -1,7 +1,7 @@
 import { frameThemeMessage, readFrameHello, frameOriginMatches, negotiateBridge, FRAME_MESSAGE, portTargetOrigin, checkFrameSandbox, httpOrigin, isFrameNonce, frameFragment, readOpenLink, externalUrl, isFocusExit } from './chunk-F6V2PTN6.js';
 import { Callout } from './chunk-BPCY7ZID.js';
 import { Skeleton } from './chunk-TEUQWOWZ.js';
-import { Button } from './chunk-OG6CL3EB.js';
+import { Button } from './chunk-HD4QJ2SI.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './SandboxedFrame-P5NASXB7.css';
 import { useState, useMemo, useRef, useEffect } from 'react';

package/dist/{chunk-DFK5EQTU.js → chunk-PDTEPN4D.js}

@@ -1,5 +1,5 @@
 import { Skeleton } from './chunk-TEUQWOWZ.js';
-import { RelativeTime } from './chunk-3CZ7XAVY.js';
+import { RelativeTime } from './chunk-KS7YIJ4S.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './WidgetFrame-BTFW3CRK.css';

package/dist/chunk-PIYJNCN7.js

@@ -0,0 +1,124 @@
+import { HIT_AREA_CLASS } from './chunk-2YTOOH3A.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import { createContext, useContext, useState, useRef, useCallback } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+var AsideContext = createContext(null);
+var PeekContext = createContext(null);
+function useAppShellAside() {
+  return useContext(AsideContext);
+}
+function useAppShellPeek() {
+  return useContext(PeekContext);
+}
+var RESIZE_HANDLE_STEP = 16;
+var RESIZE_HANDLE_LARGE_STEP = 64;
+function clampSize(value, min, max) {
+  const ceiling = Math.max(min, max);
+  return Math.round(Math.min(ceiling, Math.max(min, value)));
+}
+function ResizeHandle({
+  value,
+  min,
+  max,
+  onValueChange,
+  onValueCommit,
+  defaultValue,
+  label,
+  edge = "left",
+  controls,
+  valueText = (px) => `${px} pixels`,
+  step = RESIZE_HANDLE_STEP,
+  largeStep = RESIZE_HANDLE_LARGE_STEP,
+  className
+}) {
+  const now = clampSize(value, min, max);
+  const ceiling = Math.max(min, max);
+  const [dragging, setDragging] = useState(false);
+  const drag = useRef(null);
+  const grows = edge === "left" ? -1 : 1;
+  const change = useCallback(
+    (next, commit) => {
+      const clamped = clampSize(next, min, max);
+      if (clamped !== now) onValueChange(clamped);
+      if (commit) onValueCommit?.(clamped);
+    },
+    [max, min, now, onValueChange, onValueCommit]
+  );
+  const onKeyDown = (event) => {
+    const by = event.shiftKey ? largeStep : step;
+    switch (event.key) {
+      case "ArrowLeft":
+        change(now - by * grows, true);
+        break;
+      case "ArrowRight":
+        change(now + by * grows, true);
+        break;
+      case "Home":
+        change(min, true);
+        break;
+      case "End":
+        change(ceiling, true);
+        break;
+      case "Enter":
+        if (defaultValue === void 0) return;
+        change(defaultValue, true);
+        break;
+      default:
+        return;
+    }
+    event.preventDefault();
+  };
+  const onPointerDown = (event) => {
+    if (event.button !== 0) return;
+    event.preventDefault();
+    drag.current = { x: event.clientX, from: now, last: now, pointer: event.pointerId };
+    event.currentTarget.setPointerCapture?.(event.pointerId);
+    setDragging(true);
+  };
+  const onPointerMove = (event) => {
+    const start = drag.current;
+    if (!start || start.pointer !== event.pointerId) return;
+    const next = clampSize(start.from + (event.clientX - start.x) * grows, min, max);
+    if (next === start.last) return;
+    start.last = next;
+    onValueChange(next);
+  };
+  const end = (event) => {
+    const start = drag.current;
+    if (!start || start.pointer !== event.pointerId) return;
+    drag.current = null;
+    setDragging(false);
+    onValueCommit?.(start.last);
+  };
+  return (
+    // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions -- see above
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        role: "separator",
+        "aria-orientation": "vertical",
+        "aria-label": label,
+        "aria-valuenow": now,
+        "aria-valuemin": min,
+        "aria-valuemax": ceiling,
+        "aria-valuetext": valueText(now),
+        "aria-controls": controls,
+        tabIndex: 0,
+        className: cx("crewlet-resize-handle", `crewlet-resize-handle--${edge}`, HIT_AREA_CLASS, className),
+        "data-dragging": dragging || void 0,
+        onKeyDown,
+        onPointerDown,
+        onPointerMove,
+        onPointerUp: end,
+        onPointerCancel: end,
+        onLostPointerCapture: end,
+        onDoubleClick: () => {
+          if (defaultValue !== void 0) change(defaultValue, true);
+        }
+      }
+    )
+  );
+}
+
+export { AsideContext, PeekContext, RESIZE_HANDLE_LARGE_STEP, RESIZE_HANDLE_STEP, ResizeHandle, clampSize, useAppShellAside, useAppShellPeek };

package/dist/{chunk-ZVV2VERB.js → chunk-Q6R6EUQ4.js}

@@ -1,7 +1,7 @@
 import { Note } from './chunk-5SZGKSGL.js';
-import { CanvasToolbar, toolForKey } from './chunk-MU5KH3JF.js';
-import { IDENTITY_VIEW, Canvas } from './chunk-TV2QW6GX.js';
-import { IconButton } from './chunk-LACA4JGC.js';
+import { CanvasToolbar, toolForKey } from './chunk-LQ6AGUDL.js';
+import { IDENTITY_VIEW, Canvas } from './chunk-YEURM24I.js';
+import { IconButton } from './chunk-2BQYODY3.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './CanvasBoard-JMYNIAHK.css';
 import { useState, useRef, useImperativeHandle, useCallback, useMemo, useEffect } from 'react';