@crewlethq/ui 0.17.1 → 0.18.0

package/dist/chunk-4U3GQ7D2.js

@@ -0,0 +1,99 @@
+import { PrincipalAvatar } from './chunk-4KP4RC3O.js';
+import { RelativeTime } from './chunk-3CZ7XAVY.js';
+import { AvatarStack } from './chunk-UAN5NE7M.js';
+import { Card } from './chunk-EG6NYWVK.js';
+import { VisuallyHidden } from './chunk-BZFWDIV6.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './ArtifactCard-EXVAEBV6.css';
+import { useId } from 'react';
+import { TableGlyph, FileTextGlyph, FileCodeGlyph, PinGlyph } from '@crewlethq/icons/glyphs';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var ARTIFACT_KINDS = ["html", "markdown", "sheet"];
+var KIND_GLYPHS = {
+  html: FileCodeGlyph,
+  markdown: FileTextGlyph,
+  sheet: TableGlyph
+};
+function ArtifactKindGlyph({ kind, size = "md" }) {
+  const Drawn = KIND_GLYPHS[kind];
+  return /* @__PURE__ */ jsx(Drawn, { size });
+}
+var LABELS = {
+  kinds: { html: "Page", markdown: "Document", sheet: "Sheet" },
+  pinned: "Pinned",
+  version: (version) => `v${version}`,
+  changes: (count) => count === 1 ? "1 change since you looked" : `${count} changes since you looked`,
+  present: (count) => count === 1 ? "1 here now" : `${count} here now`,
+  updated: "Updated"
+};
+function ArtifactCard({
+  title,
+  kind,
+  href,
+  preview,
+  owner,
+  updatedAt,
+  updatedBy,
+  presence,
+  changes,
+  pinned = false,
+  version,
+  project,
+  size = "card",
+  className,
+  now,
+  labels
+}) {
+  const text = { ...LABELS, ...labels, kinds: { ...LABELS.kinds, ...labels?.kinds } };
+  const titleId = useId();
+  const factsId = useId();
+  const present = presence && presence.length > 0 ? presence : null;
+  return /* @__PURE__ */ jsxs(
+    Card,
+    {
+      href,
+      variant: "subtle",
+      padding: "none",
+      className: cx("crewlet-artifact-card", `crewlet-artifact-card--${size}`, className),
+      "aria-labelledby": titleId,
+      "aria-describedby": factsId,
+      children: [
+        size === "card" ? /* @__PURE__ */ jsx("span", { className: "crewlet-artifact-card__preview", "aria-hidden": true, children: preview ?? /* @__PURE__ */ jsx("span", { className: "crewlet-artifact-card__glyph", children: /* @__PURE__ */ jsx(ArtifactKindGlyph, { kind, size: 32 }) }) }) : /* @__PURE__ */ jsx("span", { className: "crewlet-artifact-card__glyph crewlet-artifact-card__glyph--compact", "aria-hidden": true, children: /* @__PURE__ */ jsx(ArtifactKindGlyph, { kind, size: "lg" }) }),
+        /* @__PURE__ */ jsxs("span", { className: "crewlet-artifact-card__body", children: [
+          /* @__PURE__ */ jsxs("span", { className: "crewlet-artifact-card__title-row", children: [
+            /* @__PURE__ */ jsx("span", { id: titleId, className: "crewlet-artifact-card__title", children: title }),
+            pinned ? /* @__PURE__ */ jsx("span", { className: "crewlet-artifact-card__pin", title: text.pinned, "aria-hidden": true, children: /* @__PURE__ */ jsx(PinGlyph, { size: "xs" }) }) : null
+          ] }),
+          /* @__PURE__ */ jsxs("span", { id: factsId, className: "crewlet-artifact-card__facts", children: [
+            /* @__PURE__ */ jsxs("span", { className: "crewlet-artifact-card__line", children: [
+              /* @__PURE__ */ jsx("span", { children: text.kinds[kind] }),
+              project ? /* @__PURE__ */ jsx("span", { children: project }) : null,
+              version !== void 0 ? /* @__PURE__ */ jsx("span", { children: text.version(version) }) : null,
+              pinned ? /* @__PURE__ */ jsx(VisuallyHidden, { children: text.pinned }) : null
+            ] }),
+            /* @__PURE__ */ jsxs("span", { className: "crewlet-artifact-card__line", children: [
+              owner ? /* @__PURE__ */ jsxs("span", { className: "crewlet-artifact-card__owner", children: [
+                /* @__PURE__ */ jsx(PrincipalAvatar, { principal: owner, size: "xs" }),
+                /* @__PURE__ */ jsx("span", { children: owner.name })
+              ] }) : null,
+              /* @__PURE__ */ jsxs("span", { children: [
+                updatedBy ? `${updatedBy} ` : `${text.updated} `,
+                /* @__PURE__ */ jsx(RelativeTime, { value: updatedAt, now })
+              ] })
+            ] }),
+            present || changes !== void 0 && changes > 0 ? /* @__PURE__ */ jsxs("span", { className: "crewlet-artifact-card__line", children: [
+              present ? /* @__PURE__ */ jsxs("span", { className: "crewlet-artifact-card__presence", children: [
+                /* @__PURE__ */ jsx(AvatarStack, { members: present, max: 3, size: "xs", decorative: true }),
+                /* @__PURE__ */ jsx("span", { children: text.present(present.length) })
+              ] }) : null,
+              changes !== void 0 && changes > 0 ? /* @__PURE__ */ jsx("span", { className: "crewlet-artifact-card__changes", children: text.changes(changes) }) : null
+            ] }) : null
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+
+export { ARTIFACT_KINDS, ArtifactCard, ArtifactKindGlyph };

package/dist/chunk-5XACKNYR.js

@@ -0,0 +1,53 @@
+import { CursorFlag } from './chunk-3BYIWOTV.js';
+import { presenceHueClass } from './chunk-I6POAB4V.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './LiveCursor-DZHGIYWE.css';
+import { useState, useEffect } from 'react';
+import { MousePointer2Glyph } from '@crewlethq/icons/glyphs';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var LIVE_CURSOR_REST_MS = 5e3;
+var LIVE_CURSOR_HIDE_MS = 3e4;
+function LiveCursor({
+  x,
+  y,
+  name,
+  hue,
+  kind = "human",
+  idleAfterMs = LIVE_CURSOR_REST_MS,
+  hideAfterMs = LIVE_CURSOR_HIDE_MS,
+  interpolate = true,
+  className
+}) {
+  const [phase, setPhase] = useState("live");
+  useEffect(() => {
+    setPhase("live");
+    const rest = setTimeout(() => setPhase("resting"), idleAfterMs);
+    const hide = setTimeout(() => setPhase("gone"), hideAfterMs);
+    return () => {
+      clearTimeout(rest);
+      clearTimeout(hide);
+    };
+  }, [x, y, idleAfterMs, hideAfterMs]);
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      "aria-hidden": "true",
+      "data-phase": phase,
+      className: cx(
+        "crewlet-live-cursor",
+        presenceHueClass(hue),
+        interpolate && "crewlet-live-cursor--glide",
+        phase !== "live" && `crewlet-live-cursor--${phase}`,
+        className
+      ),
+      style: { transform: `translate(${x}px, ${y}px)` },
+      children: [
+        /* @__PURE__ */ jsx(MousePointer2Glyph, { size: "lg", filled: true, className: "crewlet-live-cursor__pointer" }),
+        /* @__PURE__ */ jsx(CursorFlag, { name, hue, kind, placement: "inline", className: "crewlet-live-cursor__flag" })
+      ]
+    }
+  );
+}
+
+export { LIVE_CURSOR_HIDE_MS, LIVE_CURSOR_REST_MS, LiveCursor };

package/dist/{chunk-FSKTOIYC.js → chunk-76FXDZAZ.js}

@@ -1,10 +1,10 @@
 import { Menu } from './chunk-NS7BVLL3.js';
-import { EmptyValue } from './chunk-EUCC37WY.js';
+import { Modal } from './chunk-2TZATTIU.js';
 import { Checkbox } from './chunk-75CLJNDQ.js';
-import { Modal } from './chunk-DEEVA6TV.js';
 import { useClipboard } from './chunk-STJ7QBC3.js';
 import { Button } from './chunk-OG6CL3EB.js';
 import { IconButton } from './chunk-4FQT6ZAY.js';
+import { EmptyValue } from './chunk-EUCC37WY.js';
 import { useCardHeaderSlot } from './chunk-AV2DXAEL.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';

package/dist/chunk-A7EBCHEG.js

@@ -0,0 +1,49 @@
+import { ConfirmModal } from './chunk-2TZATTIU.js';
+import { InlineCode } from './chunk-5CLW2CXT.js';
+import { Callout } from './chunk-SVSCLHHI.js';
+import './LinkInterstitial-ET4MSVSV.css';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var LABELS = {
+  title: "Open an external link?",
+  intro: (source) => source ? `${source} wants to open a page outside Crewlet. Open it only if you trust where it goes.` : "This page wants to open a link outside Crewlet. Open it only if you trust where it goes.",
+  destination: "Destination",
+  insecure: "This link does not use a secure connection, so anyone on the network can read what you send to it.",
+  open: "Open link",
+  cancel: "Cancel"
+};
+function openExternal(url) {
+  window.open(url.href, "_blank", "noopener,noreferrer");
+}
+function LinkInterstitial({ url, source, onClose, onOpened, labels }) {
+  const text = { ...LABELS, ...labels };
+  const mail = url?.protocol === "mailto:";
+  const where = url ? mail ? decodeURIComponent(url.pathname) : url.hostname : "";
+  return /* @__PURE__ */ jsx(
+    ConfirmModal,
+    {
+      open: url !== null,
+      onClose,
+      onConfirm: () => {
+        if (!url) return;
+        openExternal(url);
+        onOpened?.(url);
+        onClose();
+      },
+      title: text.title,
+      message: text.intro(source),
+      confirmLabel: text.open,
+      cancelLabel: text.cancel,
+      shape: "framed",
+      size: "md",
+      children: url ? /* @__PURE__ */ jsxs("div", { className: "crewlet-link-interstitial", children: [
+        /* @__PURE__ */ jsx("span", { className: "crewlet-link-interstitial__label", children: text.destination }),
+        /* @__PURE__ */ jsx("span", { className: "crewlet-link-interstitial__host", children: where }),
+        /* @__PURE__ */ jsx(InlineCode, { className: "crewlet-link-interstitial__href", children: url.href }),
+        url.protocol === "http:" ? /* @__PURE__ */ jsx(Callout, { variant: "warning", children: text.insecure }) : null
+      ] }) : null
+    }
+  );
+}
+
+export { LinkInterstitial, openExternal };

package/dist/{chunk-JCO3SIST.js → chunk-AQCV62K6.js}

@@ -1,4 +1,4 @@
-import { Tag } from './chunk-LOECRMHA.js';
+import { Tag } from './chunk-GFV4LJHH.js';
 import { useListbox } from './chunk-F73MC7EZ.js';
 import { announce } from './chunk-RSAQOKH3.js';
 import { IconButton } from './chunk-4FQT6ZAY.js';

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-HENOTGUV.js → chunk-BOW2VUCH.js}

@@ -1,6 +1,6 @@
-import { HuePicker } from './chunk-NXDEPUVG.js';
-import { NODE_HUE_NAMES } from './chunk-AYKXMIOR.js';
+import { HuePicker } from './chunk-PA4CYTBY.js';
 import { Popover } from './chunk-BWRGFKJP.js';
+import { NODE_HUE_NAMES } from './chunk-AYKXMIOR.js';
 import { CharacterPicker } from './chunk-5PSXBL73.js';
 import { Avatar } from './chunk-5OM447RW.js';
 import { cx } from './chunk-ODEQTPFM.js';

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-ESKP3TXM.js

@@ -0,0 +1 @@
+

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 };

package/dist/chunk-FW7HN6AP.js

@@ -0,0 +1,40 @@
+import { Callout } from './chunk-SVSCLHHI.js';
+import { Button } from './chunk-OG6CL3EB.js';
+import { isComposing } from './chunk-R25RGPUB.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import { useEffect } from 'react';
+import { EyeGlyph, UserGlyph } from '@crewlethq/icons/glyphs';
+import { jsx } from 'react/jsx-runtime';
+
+var LABELS = {
+  following: (name) => `Following ${name}. Press Esc or scroll to stop.`,
+  left: (name) => `${name} left. You stopped following.`,
+  stop: "Stop following",
+  dismiss: "Dismiss"
+};
+function FollowBanner({ name, state = "following", onStop, onDismiss, className, labels }) {
+  const text = { ...LABELS, ...labels };
+  const following = state === "following";
+  useEffect(() => {
+    if (!following) return void 0;
+    const onKeyDown = (event) => {
+      if (event.key !== "Escape" || event.defaultPrevented || isComposing(event)) return;
+      onStop();
+    };
+    document.addEventListener("keydown", onKeyDown);
+    return () => document.removeEventListener("keydown", onKeyDown);
+  }, [following, onStop]);
+  return /* @__PURE__ */ jsx(
+    Callout,
+    {
+      layout: "banner",
+      live: "polite",
+      icon: following ? /* @__PURE__ */ jsx(EyeGlyph, { size: "md" }) : /* @__PURE__ */ jsx(UserGlyph, { size: "md" }),
+      className: cx("crewlet-follow-banner", className),
+      action: following ? /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", onClick: onStop, children: text.stop }) : onDismiss ? /* @__PURE__ */ jsx(Button, { size: "small", variant: "ghost", onClick: onDismiss, children: text.dismiss }) : void 0,
+      children: following ? text.following(name) : text.left(name)
+    }
+  );
+}
+
+export { FollowBanner };