@crewlethq/ui 0.32.0 → 0.33.0

package/dist/{chunk-UB7TJEKZ.js → chunk-KV3ODJXH.js}

@@ -1,7 +1,6 @@
 import { EmptyState } from './chunk-RA2ULG6H.js';
-import { Card } from './chunk-ACA27MZH.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './AccessDeniedCard-WXM5DBDZ.css';
+import './AccessDeniedCard-QVNDMT46.css';
 import { ShieldGlyph, LockGlyph, EyeOffGlyph } from '@crewlethq/icons/glyphs';
 import { jsx } from 'react/jsx-runtime';
 
@@ -21,17 +20,17 @@ var LABELS = {
   }
 };
 var GLYPHS = {
-  "not-found": /* @__PURE__ */ jsx(EyeOffGlyph, { size: 32 }),
-  "no-access": /* @__PURE__ */ jsx(LockGlyph, { size: 32 }),
-  revoked: /* @__PURE__ */ jsx(LockGlyph, { size: 32 }),
-  "app-locked": /* @__PURE__ */ jsx(ShieldGlyph, { size: 32 })
+  "not-found": /* @__PURE__ */ jsx(EyeOffGlyph, { size: "xl" }),
+  "no-access": /* @__PURE__ */ jsx(LockGlyph, { size: "xl" }),
+  revoked: /* @__PURE__ */ jsx(LockGlyph, { size: "xl" }),
+  "app-locked": /* @__PURE__ */ jsx(ShieldGlyph, { size: "xl" })
 };
 function AccessDeniedCard({ reason, owner, action, headingLevel, className, labels }) {
   const text = {
     titles: { ...LABELS.titles, ...labels?.titles },
     descriptions: { ...LABELS.descriptions, ...labels?.descriptions }
   };
-  return /* @__PURE__ */ jsx(Card, { padding: "lg", className: cx("crewlet-access-denied-card", className), "data-reason": reason, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx("div", { className: cx("crewlet-access-denied-card", className), "data-reason": reason, children: /* @__PURE__ */ jsx(
     EmptyState,
     {
       icon: GLYPHS[reason],

package/dist/chunk-LL5AFXU7.js

@@ -0,0 +1,96 @@
+import { SlideStage } from './chunk-LV4APO72.js';
+import { Button } from './chunk-OG6CL3EB.js';
+import { VisuallyHidden } from './chunk-BZFWDIV6.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './SlideCompare-HTCMPQFY.css';
+import { useState } from 'react';
+import { MinusGlyph, PlusGlyph, PencilGlyph, ArrowUpDownGlyph } from '@crewlethq/icons/glyphs';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+var plural = (n, one, many) => `${n} ${n === 1 ? one : many}`;
+var SLIDE_COMPARE_LABELS = {
+  changed: "Changed",
+  added: "Added",
+  removed: "Removed",
+  unchanged: "Unchanged",
+  moved: (from, to) => `Moved from ${from} to ${to}`,
+  missing: "Not in this version",
+  summary: (c) => [
+    c.changed && plural(c.changed, "slide changed", "slides changed"),
+    c.added && plural(c.added, "added", "added"),
+    c.removed && plural(c.removed, "removed", "removed"),
+    c.moved && plural(c.moved, "moved", "moved")
+  ].filter(Boolean).join(", ") + ".",
+  showUnchanged: (n) => `Show the ${plural(n, "unchanged slide", "unchanged slides")}`,
+  hideUnchanged: "Hide the unchanged slides",
+  identical: "The two versions hold the same slides, in the same order."
+};
+var MARKS = {
+  changed: PencilGlyph,
+  added: PlusGlyph,
+  removed: MinusGlyph,
+  unchanged: null
+};
+function SlideCompare({ rows, fromLabel, toLabel, className, labels }) {
+  const text = { ...SLIDE_COMPARE_LABELS, ...labels };
+  const [showAll, setShowAll] = useState(false);
+  const counts = { changed: 0, added: 0, removed: 0, moved: 0 };
+  for (const r of rows) {
+    if (r.change !== "unchanged") counts[r.change] += 1;
+    if (r.moved) counts.moved += 1;
+  }
+  const still = rows.filter((r) => r.change === "unchanged" && !r.moved);
+  const shown = showAll ? rows : rows.filter((r) => r.change !== "unchanged" || r.moved);
+  const differs = counts.changed + counts.added + counts.removed + counts.moved > 0;
+  return /* @__PURE__ */ jsxs("div", { className: cx("crewlet-slide-compare", className), children: [
+    /* @__PURE__ */ jsx("p", { className: "crewlet-slide-compare__summary", children: differs ? text.summary(counts) : text.identical }),
+    shown.length > 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs("div", { className: "crewlet-slide-compare__columns", "aria-hidden": "true", children: [
+        /* @__PURE__ */ jsx("span", { children: fromLabel }),
+        /* @__PURE__ */ jsx("span", { children: toLabel })
+      ] }),
+      /* @__PURE__ */ jsx("ol", { className: "crewlet-slide-compare__list", children: shown.map((row) => {
+        const Mark = MARKS[row.change];
+        return /* @__PURE__ */ jsxs("li", { className: "crewlet-slide-compare__row", "data-change": row.change, children: [
+          /* @__PURE__ */ jsxs("div", { className: "crewlet-slide-compare__head", children: [
+            /* @__PURE__ */ jsxs("span", { className: "crewlet-slide-compare__title", children: [
+              row.toPosition ?? row.fromPosition,
+              ". ",
+              row.title
+            ] }),
+            row.change === "unchanged" && row.moved ? null : /* @__PURE__ */ jsxs("span", { className: "crewlet-slide-compare__change", children: [
+              Mark ? /* @__PURE__ */ jsx(Mark, { size: "sm" }) : null,
+              text[row.change]
+            ] }),
+            row.moved && row.fromPosition !== void 0 && row.toPosition !== void 0 ? /* @__PURE__ */ jsxs("span", { className: "crewlet-slide-compare__change", children: [
+              /* @__PURE__ */ jsx(ArrowUpDownGlyph, { size: "sm" }),
+              text.moved(row.fromPosition, row.toPosition)
+            ] }) : null
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "crewlet-slide-compare__sides", children: [
+            { side: "from", label: fromLabel, node: row.from, at: row.fromPosition },
+            { side: "to", label: toLabel, node: row.to, at: row.toPosition }
+          ].map((s) => /* @__PURE__ */ jsxs("div", { className: "crewlet-slide-compare__side", "data-side": s.side, children: [
+            /* @__PURE__ */ jsx("span", { className: "crewlet-slide-compare__side-label", "aria-hidden": "true", children: s.label }),
+            s.node !== void 0 && s.node !== null ? /* @__PURE__ */ jsx(SlideStage, { label: `${s.label}, slide ${s.at ?? ""}, ${row.title}`, framed: true, children: s.node }) : /* @__PURE__ */ jsxs("p", { className: "crewlet-slide-compare__missing", children: [
+              /* @__PURE__ */ jsx(VisuallyHidden, { children: `${s.label}: ` }),
+              text.missing
+            ] })
+          ] }, s.side)) })
+        ] }, row.key);
+      }) })
+    ] }) : null,
+    still.length > 0 ? /* @__PURE__ */ jsx(
+      Button,
+      {
+        className: "crewlet-slide-compare__toggle",
+        size: "small",
+        variant: "ghost",
+        onClick: () => setShowAll((v) => !v),
+        children: showAll ? text.hideUnchanged : text.showUnchanged(still.length)
+      }
+    ) : null
+  ] });
+}
+
+export { SLIDE_COMPARE_LABELS, SlideCompare };

package/dist/{chunk-VYOKRN2I.js → chunk-LM3ISVJA.js}

@@ -1,4 +1,4 @@
-import { useLayerContainer } from './chunk-HMPFGIWM.js';
+import { useLayerContainer } from './chunk-OMV5W53A.js';
 import { useRef, useLayoutEffect } from 'react';
 
 function LayerNodeBridge({ onNode }) {

package/dist/{chunk-E6CR5PEV.js → chunk-LV4APO72.js}

@@ -1,6 +1,6 @@
 import { isComposing } from './chunk-R25RGPUB.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './SlideStage-KGRRALXR.css';
+import './SlideStage-S2FISF4C.css';
 import { useRef, useState, useLayoutEffect, useEffect } from 'react';
 import { jsx } from 'react/jsx-runtime';
 
@@ -76,6 +76,7 @@ function SlideStage({
   width = SLIDE_WIDTH,
   height = SLIDE_HEIGHT,
   roleDescription = "slide",
+  framed = false,
   className
 }) {
   const box = useRef(null);
@@ -121,7 +122,12 @@ function SlideStage({
     "div",
     {
       ref: box,
-      className: cx("crewlet-slide-stage", `crewlet-slide-stage--${fit}`, className),
+      className: cx(
+        "crewlet-slide-stage",
+        `crewlet-slide-stage--${fit}`,
+        framed && fit !== "contain" && "crewlet-slide-stage--framed",
+        className
+      ),
       style: boxStyle,
       role: "group",
       "aria-roledescription": roleDescription,

package/dist/{chunk-B4EBHPK3.js → chunk-M5KZX5JE.js}

@@ -1,6 +1,6 @@
 import { Count } from './chunk-BHHIIK3M.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './ArrangeGroup-GY5YMP6E.css';
+import './ArrangeGroup-KRWWOJKR.css';
 import { useId } from 'react';
 import { ChevronDownGlyph } from '@crewlethq/icons/glyphs';
 import { jsxs, jsx } from 'react/jsx-runtime';
@@ -9,6 +9,7 @@ var PLACEHOLDER = "Name this group";
 function ArrangeGroup({
   title,
   tone = "none",
+  variant = "band",
   collapsed,
   onCollapsedChange,
   count,
@@ -27,7 +28,13 @@ function ArrangeGroup({
   return /* @__PURE__ */ jsxs(
     "section",
     {
-      className: cx("crewlet-arrange-group", `crewlet-arrange-group--${tone}`, collapsed && "is-collapsed", className),
+      className: cx(
+        "crewlet-arrange-group",
+        `crewlet-arrange-group--${tone}`,
+        variant === "section" && "crewlet-arrange-group--section",
+        collapsed && "is-collapsed",
+        className
+      ),
       "aria-label": title || "Untitled group",
       ...rest,
       children: [

package/dist/{chunk-PJD2KFHX.js → chunk-MDNVHIB2.js}

@@ -1,16 +1,16 @@
-import { Note } from './chunk-CJKMURZO.js';
-import { CanvasToolbar, toolForKey } from './chunk-E6EWK5YY.js';
-import { IDENTITY_VIEW, Canvas } from './chunk-OTN35CI4.js';
+import { Note } from './chunk-5SZGKSGL.js';
+import { CanvasToolbar, toolForKey } from './chunk-GLSOD5Z4.js';
+import { IDENTITY_VIEW, Canvas } from './chunk-22UEIXZE.js';
 import { IconButton } from './chunk-4FQT6ZAY.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './CanvasBoard-MBZVBWDO.css';
+import './CanvasBoard-5NNSKY6A.css';
 import { useState, useRef, useImperativeHandle, useCallback, useMemo, useEffect } from 'react';
 import { MaximizeGlyph, PencilGlyph, TrashGlyph, MousePointer2Glyph, HandGlyph, TypeGlyph, StickyNoteGlyph } from '@crewlethq/icons/glyphs';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 // src/CanvasBoard/budget.ts
 var CANVAS_BOARD_MAX_LIVE = 12;
-var CANVAS_BOARD_MIN_LIVE_WIDTH = 160;
+var CANVAS_BOARD_MIN_LIVE_WIDTH = 96;
 function liveBoards(boards, view, viewport, max = CANVAS_BOARD_MAX_LIVE, minWidth = CANVAS_BOARD_MIN_LIVE_WIDTH) {
   if (max <= 0 || viewport.width <= 0 || viewport.height <= 0) return [];
   const ranked = [];
@@ -203,6 +203,16 @@ function useFrameGestures(zoom, minSide, maxSide, commit) {
   });
   return { preview, handle, pointer };
 }
+var sameSelection = (a, b) => a === b || a !== null && b !== null && a.kind === b.kind && a.id === b.id;
+function boardRoom(width, height) {
+  const title = width >= BOARD_TITLE_MIN_WIDTH;
+  if (width >= PLACEHOLDER_FULL.width && height >= PLACEHOLDER_FULL.height) return { title, lines: 2 };
+  if (width >= PLACEHOLDER_SIZE.width && height >= PLACEHOLDER_SIZE.height) return { title, lines: 1 };
+  return { title, lines: 0 };
+}
+var BOARD_TITLE_MIN_WIDTH = 40;
+var PLACEHOLDER_SIZE = { width: 96, height: 32 };
+var PLACEHOLDER_FULL = { width: 200, height: 64 };
 var TYPING = "input, textarea, select, [contenteditable='true']";
 function CanvasBoard({
   label,
@@ -220,6 +230,8 @@ function CanvasBoard({
   onNoteCreate,
   onOpen,
   onActivate,
+  selected: heldSelection,
+  onSelectedChange,
   controlsExtra,
   toolbar = true,
   labels,
@@ -232,7 +244,13 @@ function CanvasBoard({
   const [viewport, setViewport] = useState({ width: 0, height: 0 });
   const [active, setActive] = useState(null);
   const [editing, setEditing] = useState(null);
-  const [selected, setSelected] = useState(null);
+  const [ownSelection, setOwnSelection] = useState(null);
+  const selected = heldSelection !== void 0 ? heldSelection : ownSelection;
+  const setSelected = (next) => {
+    if (sameSelection(next, selected)) return;
+    if (heldSelection === void 0) setOwnSelection(next);
+    onSelectedChange?.(next);
+  };
   const [chosenTool, setTool] = useState("move");
   const [spaceHeld, setSpaceHeld] = useState(false);
   const canvas = useRef(null);
@@ -363,7 +381,7 @@ function CanvasBoard({
             label,
             content,
             largestItemWidth: largest || void 0,
-            ground: "dotted",
+            ground: "grid",
             cursor: TOOL_CURSOR[acting],
             minZoom: CANVAS_BOARD_MIN_ZOOM,
             refitOnResize: true,
@@ -382,10 +400,12 @@ function CanvasBoard({
                 const isLive = live.has(b.id);
                 const isActive = !editable && active === b.id && isLive;
                 const chosen = isSelected("board", b.id);
+                const room = boardRoom(b.w * view.k, b.h * view.k);
                 return /* @__PURE__ */ jsxs(
                   "section",
                   {
                     className: "crewlet-canvas-board__board",
+                    "data-untitled": !room.title || void 0,
                     "data-live": isLive || void 0,
                     "data-active": isActive || void 0,
                     "data-selected": chosen || void 0,
@@ -423,6 +443,7 @@ function CanvasBoard({
                           {
                             size: "sm",
                             variant: "ghost",
+                            className: "crewlet-canvas-board__open",
                             label: text.open(b.title),
                             icon: /* @__PURE__ */ jsx(MaximizeGlyph, {}),
                             onClick: () => onOpen(b.id)
@@ -430,11 +451,15 @@ function CanvasBoard({
                         )
                       ] }),
                       /* @__PURE__ */ jsxs("div", { className: "crewlet-canvas-board__body", children: [
-                        isLive ? renderBoard(b) : /* @__PURE__ */ jsx("div", { className: "crewlet-canvas-board__placeholder", children: /* @__PURE__ */ jsxs("span", { className: "crewlet-canvas-board__placeholder-text", children: [
-                          /* @__PURE__ */ jsx("span", { className: "crewlet-canvas-board__placeholder-title", children: b.title }),
-                          /* @__PURE__ */ jsx("span", { children: text.size(b.w, b.h) }),
-                          /* @__PURE__ */ jsx("span", { children: text.paused })
-                        ] }) }),
+                        isLive ? renderBoard(b) : (
+                          // NAMED BY ITS TITLE ABOVE IT, as a live board is, so it
+                          // says only what a running board does not: its size and
+                          // why it is not running, as much of that as fits.
+                          /* @__PURE__ */ jsx("div", { className: "crewlet-canvas-board__placeholder", children: room.lines > 0 && /* @__PURE__ */ jsxs("span", { className: "crewlet-canvas-board__placeholder-text", children: [
+                            /* @__PURE__ */ jsx("span", { className: "crewlet-canvas-board__placeholder-size", children: text.size(b.w, b.h) }),
+                            room.lines > 1 && /* @__PURE__ */ jsx("span", { children: text.paused })
+                          ] }) })
+                        ),
                         !isActive && // A press here pans the canvas like the field around it;
                         // a click selects the board and a double-click hands a
                         // live board the pointer. The board's page stays
@@ -639,4 +664,4 @@ function NoteView({
   return /* @__PURE__ */ jsx("div", { className: "crewlet-canvas-board__note", "data-kind": "title", style: frame, ...paper, children: body });
 }
 
-export { CANVAS_BOARD_MAX_LIVE, CANVAS_BOARD_MIN_LIVE_WIDTH, CANVAS_BOARD_MIN_ZOOM, CANVAS_NOTE_COLORS, CanvasBoard, TITLE_GLYPH_EM, liveBoards, titleSize };
+export { BOARD_TITLE_MIN_WIDTH, CANVAS_BOARD_MAX_LIVE, CANVAS_BOARD_MIN_LIVE_WIDTH, CANVAS_BOARD_MIN_ZOOM, CANVAS_NOTE_COLORS, CanvasBoard, TITLE_GLYPH_EM, boardRoom, liveBoards, titleSize };

package/dist/{chunk-V5IGUXMZ.js → chunk-MTMKIUWF.js}

@@ -1,6 +1,6 @@
-import { richEditorLabels } from './chunk-A4E5YLXO.js';
-import { Skeleton } from './chunk-W5J7R5EB.js';
-import { Callout } from './chunk-SVSCLHHI.js';
+import { richEditorLabels } from './chunk-4B6LSFDS.js';
+import { Skeleton } from './chunk-TEUQWOWZ.js';
+import { Callout } from './chunk-SZZRIHGT.js';
 import { Button } from './chunk-OG6CL3EB.js';
 import './RichEditor-NPD2KAPS.css';
 import { forwardRef, useState, useEffect } from 'react';
@@ -9,7 +9,7 @@ import { jsx } from 'react/jsx-runtime';
 var engine = null;
 var loading = null;
 function loadEngine() {
-  loading ??= import('./Editor-YWBUJAQU.js').then(
+  loading ??= import('./Editor-UUZ7XKCU.js').then(
     (module) => {
       engine = module.Editor;
       return engine;

package/dist/{chunk-HVNTQ36V.js → chunk-O37AQNLK.js}

@@ -1,10 +1,10 @@
-import { Skeleton } from './chunk-W5J7R5EB.js';
-import { Modal } from './chunk-I3KKZ2O3.js';
+import { Skeleton } from './chunk-TEUQWOWZ.js';
+import { Modal } from './chunk-XEGZHHRH.js';
 import { useListbox, useOptionKeys } from './chunk-F73MC7EZ.js';
-import { Popover } from './chunk-BWRGFKJP.js';
+import { Popover } from './chunk-K3IJQNB7.js';
 import { KeyChip, highlightMatch } from './chunk-FYTIJM2T.js';
 import { Input } from './chunk-6QFAK2WV.js';
-import { useMediaMatch } from './chunk-IG75YMUN.js';
+import { useMediaMatch } from './chunk-RTPQDNW3.js';
 import { focusables, isComposing } from './chunk-R25RGPUB.js';
 import { announce } from './chunk-RSAQOKH3.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';

package/dist/{chunk-HMPFGIWM.js → chunk-OMV5W53A.js}

@@ -23,6 +23,15 @@ function placePopup(anchor, size, bounds, gap = LAYER_GAP, prefer = "below") {
 function viewportBounds() {
   return { x: 0, y: 0, width: window.innerWidth, height: window.innerHeight };
 }
+function anchorGone(anchor, host, inHost) {
+  const own = {
+    x: anchor.left - (inHost ? host.x : 0),
+    y: anchor.top - (inHost ? host.y : 0),
+    width: anchor.width,
+    height: anchor.height
+  };
+  return outsideBounds(own, { x: 0, y: 0, width: host.width, height: host.height });
+}
 function outsideBounds(anchor, bounds) {
   return anchor.x + anchor.width < bounds.x || anchor.y + anchor.height < bounds.y || anchor.x > bounds.x + bounds.width || anchor.y > bounds.y + bounds.height;
 }
@@ -40,4 +49,4 @@ function useLayerContainer() {
   return typeof document === "undefined" ? null : document.body;
 }
 
-export { LAYER_GAP, LAYER_REPOSITION_EVENT, LayerHost, outsideBounds, placePopup, useLayerContainer, viewportBounds };
+export { LAYER_GAP, LAYER_REPOSITION_EVENT, LayerHost, anchorGone, outsideBounds, placePopup, useLayerContainer, viewportBounds };

package/dist/chunk-ONL54WMH.js

@@ -0,0 +1,55 @@
+import { useRoving } from './chunk-RKKO7QHH.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './LayersList-NQZEIPZB.css';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var LAYERS_LIST_LABELS = {
+  openable: (label) => `${label}, press Enter or double-click to open`
+};
+function LayersList({
+  label,
+  items,
+  selected = null,
+  onSelect,
+  onOpen,
+  heading,
+  labels,
+  className
+}) {
+  const text = { ...LAYERS_LIST_LABELS, ...labels };
+  const roving = useRoving(items.length, null, { followFocus: true });
+  const picked = items.findIndex((item) => item.id === selected);
+  const stop = roving.focused ?? Math.max(0, picked);
+  const onKeyDown = (event, id) => {
+    if (event.key === "Enter" && onOpen) {
+      event.preventDefault();
+      onOpen(id);
+      return;
+    }
+    roving.onKeyDown(event, true);
+  };
+  return /* @__PURE__ */ jsxs("nav", { className: cx("crewlet-layers-list", className), "aria-label": label, children: [
+    heading !== void 0 && heading !== null ? /* @__PURE__ */ jsx("div", { className: "crewlet-layers-list__heading", children: heading }) : null,
+    /* @__PURE__ */ jsx("ol", { className: "crewlet-layers-list__items", children: items.map((item, index) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        ref: (el) => {
+          roving.buttons.current[index] = el;
+        },
+        className: "crewlet-layers-list__item",
+        "aria-label": onOpen ? text.openable(item.label) : void 0,
+        "aria-current": item.id === selected ? "true" : void 0,
+        title: item.label,
+        tabIndex: index === stop ? 0 : -1,
+        onFocus: () => roving.onFocusAt(index),
+        onClick: () => onSelect?.(item.id),
+        onDoubleClick: onOpen ? () => onOpen(item.id) : void 0,
+        onKeyDown: (event) => onKeyDown(event, item.id),
+        children: item.label
+      }
+    ) }, item.id)) })
+  ] });
+}
+
+export { LAYERS_LIST_LABELS, LayersList };

package/dist/{chunk-AKEZ3G5V.js → chunk-ONQKKHON.js}

@@ -1,4 +1,4 @@
-import { Avatar } from './chunk-5OM447RW.js';
+import { Avatar } from './chunk-PZKHBB7D.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './OrgLabel-R5KY7C3W.css';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';

package/dist/{chunk-LZHLSQYK.js → chunk-OOWPSBIS.js}

@@ -1,6 +1,6 @@
 import { Toolbar } from './chunk-PGRPNDWM.js';
-import { SegmentedControl } from './chunk-RCQXUT5K.js';
-import { tabId } from './chunk-HJEVSQN6.js';
+import { SegmentedControl } from './chunk-CCAXYHQS.js';
+import { tabId } from './chunk-VL6CUNSX.js';
 import { IconButton } from './chunk-4FQT6ZAY.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './MarkdownEditor-WOKV7CLK.css';

package/dist/{chunk-JQLTG4KH.js → chunk-ORT5IKHP.js}

@@ -1,14 +1,14 @@
-import { Select } from './chunk-FC4YTTFJ.js';
+import { Select } from './chunk-UQGFHNDI.js';
 import { CopyButton } from './chunk-W46LPU4R.js';
-import { Modal } from './chunk-I3KKZ2O3.js';
-import { Callout } from './chunk-SVSCLHHI.js';
-import { PrincipalAvatar } from './chunk-4KP4RC3O.js';
+import { Modal } from './chunk-XEGZHHRH.js';
+import { Callout } from './chunk-SZZRIHGT.js';
+import { PrincipalAvatar } from './chunk-CI3VPIJN.js';
 import { useHeadingLevel, headingTag } from './chunk-PQADV6P6.js';
-import { useMediaMatch } from './chunk-IG75YMUN.js';
+import { useMediaMatch } from './chunk-RTPQDNW3.js';
 import { Button } from './chunk-OG6CL3EB.js';
 import { IconButton } from './chunk-4FQT6ZAY.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './ShareDialog-YZ4F37MW.css';
+import './ShareDialog-4QDCBWMH.css';
 import { useState, useId } from 'react';
 import { breakpoint } from '@crewlethq/tokens';
 import { XGlyph } from '@crewlethq/icons/glyphs';
@@ -43,6 +43,7 @@ var LABELS = {
   },
   roleFor: (name) => `Role for ${name}`,
   remove: (name) => `Remove ${name}`,
+  noAccess: "No access",
   saving: "Saving",
   busy: "Wait for the change to finish.",
   agentNote: (name, role) => `${name} can ${AGENT_CAN[role]}.`,
@@ -143,52 +144,62 @@ function ShareDialog({
           /* @__PURE__ */ jsx(Heading, { id: audienceId, className: "crewlet-share-dialog__heading", children: text.audience }),
           /* @__PURE__ */ jsx("ul", { className: "crewlet-share-dialog__audience", children: audience.map((row) => {
             const direct = row.via === void 0 && row.role !== "owner";
-            const editable = !readOnly && onRoleChange !== void 0 && (row.editable ?? direct);
-            const removable = !readOnly && onRemove !== void 0 && (row.removable ?? (row.editable ?? direct));
-            const rowNote = row.note ?? (row.principal.kind === "agent" ? text.agentNote(row.principal.name, row.role) : void 0);
+            const invalid = row.invalid !== void 0 && row.invalid !== "";
+            const editable = !invalid && !readOnly && onRoleChange !== void 0 && (row.editable ?? direct);
+            const removable = !readOnly && onRemove !== void 0 && (invalid ? row.removable ?? true : row.removable ?? (row.editable ?? direct));
+            const rowNote = invalid ? void 0 : row.note ?? (row.principal.kind === "agent" ? text.agentNote(row.principal.name, row.role) : void 0);
             const detail = row.via ?? row.principal.detail;
-            return /* @__PURE__ */ jsxs("li", { className: cx("crewlet-share-dialog__row", row.pending && "is-pending"), "aria-busy": row.pending || void 0, children: [
-              /* @__PURE__ */ jsx(PrincipalAvatar, { principal: row.principal, size: "md" }),
-              /* @__PURE__ */ jsxs("span", { className: "crewlet-share-dialog__who", children: [
-                /* @__PURE__ */ jsxs("span", { className: "crewlet-share-dialog__name", children: [
-                  row.principal.name,
-                  row.self ? /* @__PURE__ */ jsxs("span", { className: "crewlet-share-dialog__you", children: [
-                    " ",
-                    text.you
-                  ] }) : null
-                ] }),
-                detail ? /* @__PURE__ */ jsx("span", { className: "crewlet-share-dialog__detail", children: detail }) : null
-              ] }),
-              /* @__PURE__ */ jsxs("span", { className: "crewlet-share-dialog__controls", children: [
-                row.pending ? /* @__PURE__ */ jsx("span", { className: "crewlet-share-dialog__saving", children: text.saving }) : null,
-                editable && row.role !== "owner" ? /* @__PURE__ */ jsx(
-                  Select,
-                  {
-                    value: row.role,
-                    options: roleOptions,
-                    onChange: (value) => onRoleChange(row, value),
-                    ariaLabel: text.roleFor(row.principal.name),
-                    disabled: row.pending ?? false,
-                    size: "sm",
-                    width: "auto",
-                    align: "right"
-                  }
-                ) : /* @__PURE__ */ jsx("span", { className: "crewlet-share-dialog__role", children: text.roles[row.role] }),
-                removable ? /* @__PURE__ */ jsx(
-                  IconButton,
-                  {
-                    label: text.remove(row.principal.name),
-                    icon: /* @__PURE__ */ jsx(XGlyph, {}),
-                    size: "sm",
-                    variant: "ghost",
-                    disabledReason: row.pending ? text.busy : void 0,
-                    onClick: () => onRemove(row)
-                  }
-                ) : null
-              ] }),
-              rowNote ? /* @__PURE__ */ jsx("span", { className: "crewlet-share-dialog__note", children: rowNote }) : null,
-              /* @__PURE__ */ jsx("span", { className: "crewlet-share-dialog__refusal", "aria-live": "polite", children: row.refusal ?? "" })
-            ] }, row.id);
+            return /* @__PURE__ */ jsxs(
+              "li",
+              {
+                className: cx("crewlet-share-dialog__row", row.pending && "is-pending", invalid && "is-invalid"),
+                "aria-busy": row.pending || void 0,
+                children: [
+                  /* @__PURE__ */ jsx(PrincipalAvatar, { principal: row.principal, size: "md" }),
+                  /* @__PURE__ */ jsxs("span", { className: "crewlet-share-dialog__who", children: [
+                    /* @__PURE__ */ jsxs("span", { className: "crewlet-share-dialog__name", children: [
+                      row.principal.name,
+                      row.self ? /* @__PURE__ */ jsxs("span", { className: "crewlet-share-dialog__you", children: [
+                        " ",
+                        text.you
+                      ] }) : null
+                    ] }),
+                    detail ? /* @__PURE__ */ jsx("span", { className: "crewlet-share-dialog__detail", children: detail }) : null
+                  ] }),
+                  /* @__PURE__ */ jsxs("span", { className: "crewlet-share-dialog__controls", children: [
+                    row.pending ? /* @__PURE__ */ jsx("span", { className: "crewlet-share-dialog__saving", children: text.saving }) : null,
+                    editable && row.role !== "owner" ? /* @__PURE__ */ jsx(
+                      Select,
+                      {
+                        value: row.role,
+                        options: roleOptions,
+                        onChange: (value) => onRoleChange(row, value),
+                        ariaLabel: text.roleFor(row.principal.name),
+                        disabled: row.pending ?? false,
+                        size: "sm",
+                        width: "auto",
+                        align: "right"
+                      }
+                    ) : /* @__PURE__ */ jsx("span", { className: "crewlet-share-dialog__role", children: invalid ? text.noAccess : text.roles[row.role] }),
+                    removable ? /* @__PURE__ */ jsx(
+                      IconButton,
+                      {
+                        label: text.remove(row.principal.name),
+                        icon: /* @__PURE__ */ jsx(XGlyph, {}),
+                        size: "sm",
+                        variant: "ghost",
+                        disabledReason: row.pending ? text.busy : void 0,
+                        onClick: () => onRemove(row)
+                      }
+                    ) : null
+                  ] }),
+                  rowNote ? /* @__PURE__ */ jsx("span", { className: "crewlet-share-dialog__note", children: rowNote }) : null,
+                  invalid ? /* @__PURE__ */ jsx("span", { className: "crewlet-share-dialog__invalid", children: row.invalid }) : null,
+                  /* @__PURE__ */ jsx("span", { className: "crewlet-share-dialog__refusal", "aria-live": "polite", children: row.refusal ?? "" })
+                ]
+              },
+              row.id
+            );
           }) })
         ] }),
         /* @__PURE__ */ jsxs("section", { className: "crewlet-share-dialog__section", "aria-labelledby": companyId, "aria-busy": companyPending || void 0, children: [

package/dist/{chunk-4KWOKX2B.js → chunk-OSKJZNBT.js}

@@ -1,4 +1,4 @@
-import { Avatar } from './chunk-5OM447RW.js';
+import { Avatar } from './chunk-PZKHBB7D.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './EntityChip-LUCPZBBG.css';
 import { Children, isValidElement, cloneElement } from 'react';

package/dist/{chunk-EHQTPVV4.js → chunk-PLTCDSTU.js}

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

package/dist/{chunk-5OM447RW.js → chunk-PZKHBB7D.js}

@@ -20,7 +20,7 @@ function avatarInitialsName(name, kind) {
 var AVATAR_CHARACTER_FULL_DETAIL = 56;
 var getInitials = (name) => {
   if (!name) return "?";
-  const words = name.trim().split(/[\s\-_.]+/).filter(Boolean);
+  const words = name.trim().split(/[\s\-_.:]+/).map((word2) => word2.replace(/^\p{P}+|\p{P}+$/gu, "")).filter(Boolean);
   if (words.length === 0) return "?";
   const first = (word2) => (Array.from(word2)[0] ?? "").toUpperCase();
   if (words.length >= 2) return words.slice(0, 2).map(first).join("") || "?";

package/dist/{chunk-VEB5ERRE.js → chunk-QWNVSR6G.js}

@@ -1,6 +1,6 @@
 import { useTreeState, treeExpandable, treeLevel, treePosInSet, treeSetSize, treeItemAction, treePrevious, treeNext, treeStep } from './chunk-MY374UUD.js';
-import { LayerNodeBridge } from './chunk-VYOKRN2I.js';
-import { LayerHost, LAYER_REPOSITION_EVENT } from './chunk-HMPFGIWM.js';
+import { LayerNodeBridge } from './chunk-LM3ISVJA.js';
+import { LayerHost, LAYER_REPOSITION_EVENT } from './chunk-OMV5W53A.js';
 import { focusables } from './chunk-R25RGPUB.js';
 import { IconButton } from './chunk-4FQT6ZAY.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';

package/dist/{chunk-IG75YMUN.js → chunk-RTPQDNW3.js}

@@ -1,6 +1,6 @@
 import { useCallback, useSyncExternalStore } from 'react';
 
-// src/utils/useMediaMatch.ts
+// src/MediaMatch/useMediaMatch.ts
 function useMediaMatch(query) {
   const subscribe = useCallback(
     (notify) => {