@crewlethq/ui 0.31.1 → 0.33.0

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

@@ -1,15 +1,16 @@
-import { Note } from './chunk-CJKMURZO.js';
-import { IDENTITY_VIEW, Canvas } from './chunk-OJ45PPCV.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-ZLPDINSM.css';
-import { useState, useCallback, useMemo, useRef } from 'react';
-import { MaximizeGlyph, PencilGlyph, TrashGlyph } from '@crewlethq/icons/glyphs';
+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 = [];
@@ -41,6 +42,11 @@ var NOTE_TONES = {
   green: "green",
   purple: "purple"
 };
+function titleSize(note) {
+  const chars = Math.max(1, Array.from(note.text.trim()).length);
+  return Math.max(1, Math.min(note.h * 0.6, note.w / (chars * TITLE_GLYPH_EM)));
+}
+var TITLE_GLYPH_EM = 0.58;
 function noteName(note) {
   const words = note.text.trim().replace(/\s+/g, " ");
   return words.length > 40 ? `${words.slice(0, 39)}\u2026` : words;
@@ -54,8 +60,21 @@ var LABELS = {
   removeNote: "Delete note",
   noteText: "Note text",
   paused: "Zoom in to run this board",
-  active: "Press Escape to return to the canvas"
+  active: "Press Escape to return to the canvas",
+  interact: "Double-click to use this board",
+  tools: "Tools",
+  moveTool: "Move",
+  handTool: "Hand",
+  textTool: "Text",
+  stickyTool: "Sticky note"
+};
+var TOOL_CURSOR = {
+  move: "pointer",
+  hand: "hand",
+  text: "text",
+  sticky: "crosshair"
 };
+var CANVAS_BOARD_MIN_ZOOM = 0.02;
 var KEY_STEP = 8;
 var KEY_STEP_LARGE = 64;
 var CONTENT_MARGIN = 160;
@@ -80,23 +99,37 @@ function contentOf(boards, notes) {
   };
 }
 var clamp = (v, lo, hi) => Math.min(hi, Math.max(lo, v));
+var CONTROL = "button, a[href], input, select, textarea, [contenteditable='true']";
+var POINTER_CORNERS = ["resize-nw", "resize-ne", "resize-sw"];
 function useFrameGestures(zoom, minSide, maxSide, commit) {
   const [preview, setPreview] = useState(null);
   const drag = useRef(null);
   const next = useCallback(
-    (d, dx, dy) => d.mode === "move" ? { ...d.from, x: Math.round(d.from.x + dx), y: Math.round(d.from.y + dy) } : {
-      ...d.from,
-      w: clamp(Math.round(d.from.w + dx), minSide, maxSide),
-      h: clamp(Math.round(d.from.h + dy), minSide, maxSide)
+    (d, dx, dy) => {
+      const { from } = d;
+      if (d.mode === "move") return { ...from, x: Math.round(from.x + dx), y: Math.round(from.y + dy) };
+      const west = d.mode === "resize-nw" || d.mode === "resize-sw";
+      const north = d.mode === "resize-nw" || d.mode === "resize-ne";
+      const w = clamp(Math.round(from.w + (west ? -dx : dx)), minSide, maxSide);
+      const h = clamp(Math.round(from.h + (north ? -dy : dy)), minSide, maxSide);
+      return {
+        x: west ? from.x + from.w - w : from.x,
+        y: north ? from.y + from.h - h : from.y,
+        w,
+        h
+      };
     },
     [minSide, maxSide]
   );
-  const handle = (id, mode, item) => {
+  const pointer = (id, mode, item) => {
     const from = { x: item.x, y: item.y, w: item.w, h: item.h };
     return {
       onPointerDown: (event) => {
         if (event.pointerType === "mouse" && event.button !== 0) return;
+        const control = event.target instanceof Element ? event.target.closest(CONTROL) : null;
+        if (control !== null && control !== event.currentTarget) return;
         event.preventDefault();
+        event.stopPropagation();
         try {
           event.currentTarget.setPointerCapture(event.pointerId);
         } catch {
@@ -135,7 +168,12 @@ function useFrameGestures(zoom, minSide, maxSide, commit) {
       onPointerCancel: () => {
         drag.current = null;
         setPreview(null);
-      },
+      }
+    };
+  };
+  const keys = (id, mode, item) => {
+    const from = { x: item.x, y: item.y, w: item.w, h: item.h };
+    return {
       onKeyDown: (event) => {
         const step = event.shiftKey ? KEY_STEP_LARGE : KEY_STEP;
         const delta = {
@@ -159,8 +197,23 @@ function useFrameGestures(zoom, minSide, maxSide, commit) {
       }
     };
   };
-  return { preview, handle };
+  const handle = (id, mode, item) => ({
+    ...pointer(id, mode, item),
+    ...keys(id, mode, item)
+  });
+  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,
   boards,
@@ -174,9 +227,13 @@ function CanvasBoard({
   onBoardChange,
   onNoteChange,
   onNoteRemove,
+  onNoteCreate,
   onOpen,
   onActivate,
+  selected: heldSelection,
+  onSelectedChange,
   controlsExtra,
+  toolbar = true,
   labels,
   canvasLabels,
   canvasRef,
@@ -187,6 +244,28 @@ function CanvasBoard({
   const [viewport, setViewport] = useState({ width: 0, height: 0 });
   const [active, setActive] = useState(null);
   const [editing, setEditing] = 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);
+  useImperativeHandle(canvasRef, () => canvas.current, []);
+  const creates = editable && onNoteCreate !== void 0;
+  const tools = [
+    { id: "move", label: text.moveTool, icon: /* @__PURE__ */ jsx(MousePointer2Glyph, {}), shortcut: "V" },
+    { id: "hand", label: text.handTool, icon: /* @__PURE__ */ jsx(HandGlyph, {}), shortcut: "H" },
+    ...creates ? [
+      { id: "text", label: text.textTool, icon: /* @__PURE__ */ jsx(TypeGlyph, {}), shortcut: "T" },
+      { id: "sticky", label: text.stickyTool, icon: /* @__PURE__ */ jsx(StickyNoteGlyph, {}), shortcut: "S" }
+    ] : []
+  ];
+  const tool = tools.some((t) => t.id === chosenTool) ? chosenTool : "move";
+  const acting = spaceHeld ? "hand" : tool;
   const activate = (id) => {
     setActive(id);
     onActivate?.(id);
@@ -215,15 +294,77 @@ function CanvasBoard({
   );
   const largest = boards.reduce((w, b) => Math.max(w, b.w), 0);
   const live = new Set(liveBoards(drawnBoards, view, viewport, maxLive, minLiveWidth));
+  const shownSelection = selected !== null && (selected.kind === "board" ? boards : notes).some((item) => item.id === selected.id) ? selected : null;
+  const isSelected = (kind, id) => shownSelection?.kind === kind && shownSelection.id === id;
+  useEffect(() => {
+    if (!spaceHeld) return;
+    const release = (event) => {
+      if (event instanceof KeyboardEvent && event.key !== " ") return;
+      setSpaceHeld(false);
+    };
+    window.addEventListener("keyup", release);
+    window.addEventListener("blur", release);
+    return () => {
+      window.removeEventListener("keyup", release);
+      window.removeEventListener("blur", release);
+    };
+  }, [spaceHeld]);
   const onKeyDown = (event) => {
-    if (event.key === "Escape" && active !== null) {
-      event.stopPropagation();
-      activate(null);
+    const target = event.target instanceof Element ? event.target : null;
+    if (event.key === "Escape") {
+      if (active !== null) {
+        event.stopPropagation();
+        activate(null);
+      } else if (shownSelection !== null) {
+        event.stopPropagation();
+        setSelected(null);
+      }
+      return;
+    }
+    if (event.defaultPrevented || target?.closest(TYPING)) return;
+    if (event.key === " ") {
+      if (target?.closest(CONTROL)) return;
+      event.preventDefault();
+      if (!event.repeat) setSpaceHeld(true);
+      return;
+    }
+    if ((event.key === "Delete" || event.key === "Backspace") && editable && shownSelection?.kind === "note") {
+      event.preventDefault();
+      onNoteRemove?.(shownSelection.id);
+      setSelected(null);
+      return;
+    }
+    const picked = toolForKey(tools, event);
+    if (picked !== void 0) {
+      event.preventDefault();
+      setTool(picked);
     }
   };
+  const onClick = (event) => {
+    const target = event.target instanceof Element ? event.target : null;
+    if (!target?.closest(".crewlet-canvas__viewport")) return;
+    if (target.closest(".crewlet-canvas-board__board, .crewlet-canvas-board__note")) return;
+    if ((acting === "text" || acting === "sticky") && onNoteCreate && canvas.current) {
+      const at = canvas.current.worldAt({ x: event.clientX, y: event.clientY });
+      const id = onNoteCreate(acting === "text" ? "title" : "sticky", {
+        x: Math.round(at.x),
+        y: Math.round(at.y)
+      });
+      setTool("move");
+      if (id !== void 0) {
+        setSelected({ kind: "note", id });
+        setEditing(id);
+      }
+      return;
+    }
+    if (acting === "move") setSelected(null);
+  };
   const zoomVar = { "--crewlet-canvas-board-zoom": String(view.k) };
+  const activeBoard = boards.find((b) => b.id === active && live.has(b.id));
+  const chosenBoard = shownSelection?.kind === "board" ? shownSelection.id : null;
+  const hint = !editable && activeBoard ? text.active : !editable && chosenBoard !== null && live.has(chosenBoard) ? text.interact : "";
   return (
-    // The wrapper only hears Escape bubbling from inside the canvas; the
+    // The wrapper hears keys and clicks bubbling from inside the canvas; the
     // canvas's own viewport is the focusable, labelled control.
     // eslint-disable-next-line jsx-a11y/no-static-element-interactions
     /* @__PURE__ */ jsx(
@@ -231,31 +372,43 @@ function CanvasBoard({
       {
         className: cx("crewlet-canvas-board", className),
         "data-editable": editable || void 0,
+        "data-tool": acting,
         onKeyDown,
+        onClick,
         children: /* @__PURE__ */ jsx(
           Canvas,
           {
             label,
             content,
             largestItemWidth: largest || void 0,
-            ground: "dotted",
+            ground: "grid",
+            cursor: TOOL_CURSOR[acting],
+            minZoom: CANVAS_BOARD_MIN_ZOOM,
+            refitOnResize: true,
+            controlsActualSize: true,
             controlsExtra,
+            hint,
             labels: canvasLabels,
+            overlay: toolbar ? /* @__PURE__ */ jsx("div", { className: "crewlet-canvas-board__tools", children: /* @__PURE__ */ jsx(CanvasToolbar, { label: text.tools, tools, value: tool, onChange: setTool }) }) : void 0,
             onViewChange: (nextView, size) => {
               setView(nextView);
               setViewport(size);
             },
-            ref: canvasRef,
+            ref: canvas,
             children: /* @__PURE__ */ jsxs("div", { className: "crewlet-canvas-board__layer", style: zoomVar, children: [
               drawnBoards.map((b) => {
                 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,
                     "aria-label": `${b.title}, ${text.size(b.w, b.h)}`,
                     style: { left: b.x, top: b.y, width: b.w, height: b.h },
                     children: [
@@ -266,15 +419,31 @@ function CanvasBoard({
                             type: "button",
                             className: "crewlet-canvas-board__title crewlet-canvas-board__handle",
                             "aria-label": text.move(b.title),
+                            "aria-pressed": chosen,
+                            onFocus: () => setSelected({ kind: "board", id: b.id }),
                             ...boardGestures.handle(b.id, "move", b),
                             children: b.title
                           }
-                        ) : /* @__PURE__ */ jsx("span", { className: "crewlet-canvas-board__title", children: b.title }),
+                        ) : (
+                          // The name selects its board, as a press on the board
+                          // does; the board's keyboard route is its own page and
+                          // its open control, so the name is pointer only.
+                          // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
+                          /* @__PURE__ */ jsx(
+                            "span",
+                            {
+                              className: "crewlet-canvas-board__title",
+                              onClick: () => setSelected({ kind: "board", id: b.id }),
+                              children: b.title
+                            }
+                          )
+                        ),
                         onOpen && /* @__PURE__ */ jsx(
                           IconButton,
                           {
                             size: "sm",
                             variant: "ghost",
+                            className: "crewlet-canvas-board__open",
                             label: text.open(b.title),
                             icon: /* @__PURE__ */ jsx(MaximizeGlyph, {}),
                             onClick: () => onOpen(b.id)
@@ -282,32 +451,38 @@ 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 && !isActive && // A press here pans the canvas like the field around it;
-                        // a click without a drag hands this board the pointer.
-                        // The board's page stays reachable by keyboard through
-                        // its own frame, so the shield is pointer only.
-                        // eslint-disable-next-line jsx-a11y/click-events-have-key-events
+                        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
+                        // reachable by keyboard through its own frame, so the
+                        // shield is pointer only.
+                        // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
                         /* @__PURE__ */ jsx(
                           "div",
                           {
                             className: "crewlet-canvas-board__shield",
-                            onClick: editable ? void 0 : () => activate(b.id)
+                            onClick: () => setSelected({ kind: "board", id: b.id }),
+                            onDoubleClick: editable || !isLive ? void 0 : () => activate(b.id)
                           }
                         )
                       ] }),
-                      isActive && /* @__PURE__ */ jsx("p", { className: "crewlet-canvas-board__hint", children: text.active }),
                       editable && /* @__PURE__ */ jsx(
-                        "button",
+                        Corners,
                         {
-                          type: "button",
-                          className: "crewlet-canvas-board__resize",
-                          "aria-label": text.resize(b.title),
-                          ...boardGestures.handle(b.id, "resize", b)
+                          title: b.title,
+                          selected: chosen,
+                          text,
+                          keyed: boardGestures.handle(b.id, "resize-se", b),
+                          pointer: (mode) => boardGestures.pointer(b.id, mode, b)
                         }
                       )
                     ]
@@ -321,9 +496,13 @@ function CanvasBoard({
                   note: n,
                   editable,
                   editing: editing === n.id,
+                  selected: isSelected("note", n.id),
                   text,
                   moveHandle: noteGestures.handle(n.id, "move", n),
-                  resizeHandle: noteGestures.handle(n.id, "resize", n),
+                  dragPaper: noteGestures.pointer(n.id, "move", n),
+                  resizeHandle: noteGestures.handle(n.id, "resize-se", n),
+                  resizePointer: (mode) => noteGestures.pointer(n.id, mode, n),
+                  onSelect: () => setSelected({ kind: "note", id: n.id }),
                   onEdit: () => setEditing(n.id),
                   onDone: (value) => {
                     setEditing(null);
@@ -345,13 +524,47 @@ function CanvasBoard({
     )
   );
 }
+function Corners({
+  title,
+  selected,
+  text,
+  keyed,
+  pointer
+}) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    selected && POINTER_CORNERS.map((mode) => /* @__PURE__ */ jsx(
+      "span",
+      {
+        "aria-hidden": true,
+        className: "crewlet-canvas-board__resize",
+        "data-corner": mode,
+        ...pointer(mode)
+      },
+      mode
+    )),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: "crewlet-canvas-board__resize",
+        "data-corner": "resize-se",
+        "aria-label": text.resize(title),
+        ...keyed
+      }
+    )
+  ] });
+}
 function NoteView({
   note,
   editable,
   editing,
+  selected,
   text,
   moveHandle,
+  dragPaper,
   resizeHandle,
+  resizePointer,
+  onSelect,
   onEdit,
   onDone,
   onCancel,
@@ -365,6 +578,7 @@ function NoteView({
         "aria-label": text.noteText,
         defaultValue: note.text,
         autoFocus: true,
+        onFocus: (event) => event.currentTarget.select(),
         onBlur: (event) => onDone(event.currentTarget.value),
         onKeyDown: (event) => {
           if (event.key === "Escape") {
@@ -377,7 +591,14 @@ function NoteView({
           }
         }
       }
-    ) : /* @__PURE__ */ jsx("p", { className: "crewlet-canvas-board__note-text", children: note.text }),
+    ) : /* @__PURE__ */ jsx(
+      "p",
+      {
+        className: "crewlet-canvas-board__note-text",
+        style: note.kind === "title" ? { fontSize: titleSize(note) } : void 0,
+        children: note.text
+      }
+    ),
     editable && !editing && /* @__PURE__ */ jsxs("div", { className: "crewlet-canvas-board__note-tools", children: [
       /* @__PURE__ */ jsx(
         "button",
@@ -385,6 +606,7 @@ function NoteView({
           type: "button",
           className: "crewlet-canvas-board__handle crewlet-canvas-board__note-move",
           "aria-label": text.move(noteName(note)),
+          onFocus: onSelect,
           ...moveHandle
         }
       ),
@@ -410,16 +632,22 @@ function NoteView({
       )
     ] }),
     editable && !editing && /* @__PURE__ */ jsx(
-      "button",
+      Corners,
       {
-        type: "button",
-        className: "crewlet-canvas-board__resize",
-        "aria-label": text.resize(noteName(note)),
-        ...resizeHandle
+        title: noteName(note),
+        selected,
+        text,
+        keyed: resizeHandle,
+        pointer: resizePointer
       }
     )
   ] });
   const frame = { left: note.x, top: note.y, width: note.w, height: note.h };
+  const paper = {
+    "data-selected": selected || void 0,
+    onClick: onSelect,
+    ...editable && !editing ? { ...dragPaper, onDoubleClick: onEdit } : {}
+  };
   if (note.kind === "sticky") {
     return /* @__PURE__ */ jsx(
       Note,
@@ -428,11 +656,12 @@ function NoteView({
         className: "crewlet-canvas-board__note",
         "data-kind": "sticky",
         style: frame,
+        ...paper,
         children: body
       }
     );
   }
-  return /* @__PURE__ */ jsx("div", { className: "crewlet-canvas-board__note", "data-kind": "title", style: frame, children: body });
+  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_NOTE_COLORS, CanvasBoard, liveBoards };
+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-VOX3YRFO.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-YZ7KG2RD.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';