@crewlethq/ui 0.2.0 → 0.4.0

package/dist/chunk-D35VTV2Z.js

@@ -0,0 +1,106 @@
+import { CopyButton } from './chunk-3QRYCPXQ.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './CodeBlock-GYNJ2HI6.css';
+import { forwardRef, useRef, useState, useLayoutEffect } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var CodeBlock = forwardRef(function CodeBlock2({
+  code,
+  language,
+  filename,
+  showLineNumbers = false,
+  copyable = true,
+  copyLabel = "Copy",
+  prompt,
+  wrap = true,
+  maxHeight,
+  plain = false,
+  selectable = false,
+  focusWhenScrollable = false,
+  label,
+  className,
+  style,
+  ...rest
+}, ref) {
+  const box = useRef(null);
+  const body = code.replace(/\n+$/, "");
+  const showHeader = !plain && (filename !== void 0 || language !== void 0 || copyable);
+  const perLine = showLineNumbers || prompt !== void 0;
+  const [overflows, setOverflows] = useState(false);
+  useLayoutEffect(() => {
+    if (!focusWhenScrollable) return;
+    const node = box.current;
+    if (!node) return;
+    const measure = () => setOverflows(node.scrollHeight > node.clientHeight || node.scrollWidth > node.clientWidth);
+    measure();
+    if (typeof ResizeObserver !== "function") return;
+    const watch = new ResizeObserver(measure);
+    watch.observe(node);
+    return () => watch.disconnect();
+  }, [focusWhenScrollable, body, wrap, showLineNumbers, prompt, maxHeight]);
+  const focusable = selectable || focusWhenScrollable && overflows;
+  const onKeyDown = (event) => {
+    const isA = event.code === "KeyA" || !event.code && event.key.toLowerCase() === "a";
+    if (!isA || event.altKey || event.shiftKey || !(event.metaKey || event.ctrlKey)) return;
+    const node = box.current;
+    const selection = window.getSelection?.();
+    if (!node || !selection) return;
+    event.preventDefault();
+    selection.removeAllRanges();
+    const range = document.createRange();
+    range.selectNodeContents(node);
+    selection.addRange(range);
+  };
+  let content = body;
+  if (perLine) {
+    const lines = body.split("\n");
+    content = lines.map((line, index) => /* @__PURE__ */ jsxs("span", { className: "crewlet-codeblock__line", children: [
+      showLineNumbers ? /* @__PURE__ */ jsx("span", { className: "crewlet-codeblock__ln", "aria-hidden": true, children: index + 1 }) : null,
+      prompt === void 0 ? null : /* @__PURE__ */ jsx("span", { className: "crewlet-codeblock__prompt", "aria-hidden": true, children: prompt }),
+      /* @__PURE__ */ jsx("span", { className: "crewlet-codeblock__linecontent", children: line }),
+      index < lines.length - 1 ? "\n" : null
+    ] }, `${index}-${line}`));
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...rest,
+      ref,
+      className: cx(
+        "crewlet-codeblock",
+        showLineNumbers && "crewlet-codeblock--numbered",
+        !wrap && "crewlet-codeblock--nowrap",
+        maxHeight !== void 0 && "crewlet-codeblock--bounded",
+        className
+      ),
+      style: maxHeight === void 0 ? style : {
+        ...style,
+        "--crewlet-codeblock-max-height": typeof maxHeight === "number" ? `${maxHeight}px` : maxHeight
+      },
+      children: [
+        showHeader ? /* @__PURE__ */ jsxs("div", { className: "crewlet-codeblock__header", children: [
+          /* @__PURE__ */ jsxs("span", { className: "crewlet-codeblock__meta", children: [
+            filename === void 0 ? null : /* @__PURE__ */ jsx("span", { className: "crewlet-codeblock__filename", children: filename }),
+            language !== void 0 && filename === void 0 ? /* @__PURE__ */ jsx("span", { className: "crewlet-codeblock__lang", children: language }) : null
+          ] }),
+          copyable ? /* @__PURE__ */ jsx(CopyButton, { text: code, label: copyLabel, className: "crewlet-codeblock__copy" }) : null
+        ] }) : null,
+        /* @__PURE__ */ jsx(
+          "pre",
+          {
+            ref: box,
+            className: "crewlet-codeblock__pre",
+            "data-language": language,
+            tabIndex: focusable ? 0 : void 0,
+            role: focusable ? "region" : void 0,
+            "aria-label": focusable ? label : void 0,
+            onKeyDown: selectable ? onKeyDown : void 0,
+            children: /* @__PURE__ */ jsx("code", { className: "crewlet-codeblock__code", children: content })
+          }
+        )
+      ]
+    }
+  );
+});
+
+export { CodeBlock };

package/dist/chunk-DD5BBGBE.js

@@ -0,0 +1,162 @@
+import { useLayerContainer, viewportBounds, LAYER_GAP, outsideBounds, placePopup, LAYER_REPOSITION_EVENT } from './chunk-7RPGY3JE.js';
+import { usePopupLayer, focusables } from './chunk-ITHXJHBB.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './Popover-WJGCF3ZQ.css';
+import { useId, useState, useRef, useCallback, useLayoutEffect, useEffect, cloneElement } from 'react';
+import { createPortal } from 'react-dom';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+function Popover({
+  trigger,
+  children,
+  align = "start",
+  side = "bottom",
+  width = "auto",
+  role = "dialog",
+  label,
+  className,
+  open: controlled,
+  defaultOpen = false,
+  onOpenChange
+}) {
+  const id = useId();
+  const panelId = `${id}-popover`;
+  const [uncontrolled, setUncontrolled] = useState(defaultOpen);
+  const open = controlled ?? uncontrolled;
+  const anchor = useRef(null);
+  const panel = useRef(null);
+  const [place, setPlace] = useState(null);
+  const container = useLayerContainer();
+  const isControlled = useRef(controlled !== void 0);
+  const report = useRef(onOpenChange);
+  isControlled.current = controlled !== void 0;
+  report.current = onOpenChange;
+  const setOpen = useCallback((next, reason) => {
+    if (!isControlled.current) setUncontrolled(next);
+    report.current?.(next, reason);
+  }, []);
+  const close = useCallback(
+    (reason) => {
+      if (reason === "escape" || reason === "tab") anchor.current?.focus();
+      setOpen(false, reason);
+    },
+    [setOpen]
+  );
+  const layer = usePopupLayer({ open, onDismiss: close });
+  const position = useCallback(() => {
+    const at = anchor.current;
+    const box = panel.current;
+    if (!at || !box || !container) return;
+    const inHost = container !== document.body;
+    const host = inHost ? container.getBoundingClientRect() : viewportBounds();
+    const rect = at.getBoundingClientRect();
+    const own = box.getBoundingClientRect();
+    const panelWidth = width === "match" ? rect.width : own.width;
+    const local = {
+      x: (align === "end" ? rect.right - panelWidth : rect.left) - (inHost ? host.x : 0),
+      y: rect.top - (inHost ? host.y : 0),
+      width: rect.width,
+      height: rect.height
+    };
+    const whole = { x: 0, y: 0, width: host.width, height: host.height };
+    const bounds = {
+      x: LAYER_GAP,
+      y: LAYER_GAP,
+      width: host.width - 2 * LAYER_GAP,
+      height: host.height - 2 * LAYER_GAP
+    };
+    if (outsideBounds(local, whole)) {
+      close("anchor-gone");
+      return;
+    }
+    const spot = placePopup(
+      local,
+      { width: panelWidth, height: own.height },
+      bounds,
+      LAYER_GAP,
+      side === "top" ? "above" : "below"
+    );
+    setPlace(
+      (was) => was && was.left === spot.left && was.top === spot.top && was.side === spot.side && was.width === panelWidth ? was : { left: spot.left, top: spot.top, side: spot.side, width: width === "match" ? panelWidth : void 0 }
+    );
+  }, [align, close, container, side, width]);
+  useLayoutEffect(() => {
+    if (!open) return;
+    position();
+    const onLayout = () => position();
+    container?.addEventListener(LAYER_REPOSITION_EVENT, onLayout);
+    window.addEventListener("resize", onLayout);
+    window.addEventListener("scroll", onLayout, true);
+    return () => {
+      container?.removeEventListener(LAYER_REPOSITION_EVENT, onLayout);
+      window.removeEventListener("resize", onLayout);
+      window.removeEventListener("scroll", onLayout, true);
+    };
+  }, [open, container, position]);
+  useEffect(() => {
+    if (!open) setPlace(null);
+  }, [open]);
+  const placed = open && place !== null;
+  useEffect(() => {
+    if (!placed || role !== "dialog") return;
+    const box = panel.current;
+    if (box && !box.contains(document.activeElement)) (focusables(box)[0] ?? box).focus();
+  }, [placed, role]);
+  const toggle = useCallback(() => {
+    if (open) close("trigger");
+    else setOpen(true, "trigger");
+  }, [close, open, setOpen]);
+  const triggerEl = trigger(open, toggle);
+  const haspopup = role === "none" ? void 0 : role;
+  const anchored = cloneElement(triggerEl, {
+    ref: (el) => {
+      anchor.current = el;
+      layer.insideRef(el);
+    },
+    "aria-expanded": open,
+    "aria-haspopup": triggerEl.props["aria-haspopup"] ?? haspopup,
+    "aria-controls": open ? panelId : void 0
+  });
+  function onKeyDown(event) {
+    if (event.key !== "Escape" && event.key !== "Tab" && !event.ctrlKey && !event.metaKey && !event.altKey) {
+      event.stopPropagation();
+    }
+  }
+  const style = place ? { left: place.left, top: place.top, width: place.width } : (
+    // Not `display: none`: the panel has to be laid out for its own size to
+    // be measurable, and a browser refuses focus to a hidden element, which
+    // is what stops focus arriving at a corner.
+    { visibility: "hidden" }
+  );
+  const panelNode = open ? /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: (el) => {
+        panel.current = el;
+        layer.panelRef(el);
+      },
+      id: panelId,
+      className: cx(
+        "crewlet-popover",
+        `crewlet-popover--${place?.side ?? (side === "top" ? "above" : "below")}`,
+        container !== null && container !== document.body ? "crewlet-popover--in-host" : "crewlet-popover--fixed",
+        className
+      ),
+      style: { ...style, zIndex: layer.zIndex },
+      role: role === "none" ? void 0 : role,
+      "aria-label": role === "none" ? void 0 : label,
+      "aria-modal": role === "dialog" ? false : void 0,
+      tabIndex: role === "dialog" ? -1 : void 0,
+      onKeyDown,
+      onPointerDown: (event) => event.stopPropagation(),
+      onClick: (event) => event.stopPropagation(),
+      children: typeof children === "function" ? children(() => close("content")) : children
+    }
+  ) : null;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    anchored,
+    panelNode && container ? createPortal(panelNode, container) : null
+  ] });
+}
+
+export { Popover };

package/dist/chunk-EN6K2IFA.js

@@ -0,0 +1,256 @@
+import { Kbd } from './chunk-SFZOKW2G.js';
+import { FormField, Textarea, Input } from './chunk-O6232G37.js';
+import { isComposing } from './chunk-ITHXJHBB.js';
+import { IconButton } from './chunk-F27EPQ7D.js';
+import { announce } from './chunk-RSAQOKH3.js';
+import './ListInput-O7LJKOIG.css';
+import { useState, useRef, useLayoutEffect } from 'react';
+import { ArrowUpwardGlyph, ArrowDownwardGlyph, CloseGlyph, AddGlyph } from '@crewlethq/icons/glyphs';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var minted = 0;
+var mint = () => `item-${minted += 1}`;
+var capitalized = (text) => text.charAt(0).toLocaleUpperCase() + text.slice(1);
+function ListInput({
+  label,
+  itemName,
+  value,
+  onChange,
+  multiline = false,
+  helper,
+  error,
+  placeholder,
+  disabled = false,
+  optional,
+  enterHint = true,
+  addLabel = (name) => `Add ${name}`,
+  itemLabel = (name, position) => `${name} ${position}`,
+  newItemLabel = (name) => `New ${name}`,
+  moveUpLabel = (name, position) => `Move ${name} ${position} up`,
+  moveDownLabel = (name, position) => `Move ${name} ${position} down`,
+  removeLabel = (name, position) => `Remove ${name} ${position}`,
+  addedMessage = (name, position) => `Added ${name} ${position}`,
+  removedMessage = (name, position) => `Removed ${name} ${position}`,
+  movedMessage = (name, position, count) => `Moved ${name} to position ${position} of ${count}`
+}) {
+  const [draft, setDraft] = useState("");
+  const ids = useRef([]);
+  const emitted = useRef(null);
+  if (value !== emitted.current && value.length !== ids.current.length) {
+    ids.current = value.map(mint);
+  }
+  const inputs = useRef(/* @__PURE__ */ new Map());
+  const ups = useRef(/* @__PURE__ */ new Map());
+  const downs = useRef(/* @__PURE__ */ new Map());
+  const addBox = useRef(null);
+  const focusNext = useRef(null);
+  useLayoutEffect(() => {
+    const want = focusNext.current;
+    if (!want) return;
+    focusNext.current = null;
+    if (want.target === "add") {
+      addBox.current?.focus();
+      return;
+    }
+    const up = ups.current.get(want.id);
+    const down = downs.current.get(want.id);
+    const box = inputs.current.get(want.id);
+    const order = want.target === "up" ? [up, down, box] : want.target === "down" ? [down, up, box] : [box];
+    order.find((el) => el && !el.disabled)?.focus();
+  });
+  function emit(next, nextIds, said) {
+    ids.current = nextIds;
+    emitted.current = next;
+    onChange(next);
+    if (said) announce(said);
+  }
+  const name = capitalized(itemName);
+  const count = value.length;
+  function add() {
+    const text = draft.trim();
+    if (!text || disabled) return;
+    emit(
+      [...value, text],
+      [...ids.current, mint()],
+      addedMessage(itemName, `${count + 1} of ${count + 1}`)
+    );
+    setDraft("");
+    focusNext.current = { id: "", target: "add" };
+  }
+  function move(index, by, target) {
+    const to = index + by;
+    if (disabled || to < 0 || to >= count) return;
+    const next = [...value];
+    const nextIds = [...ids.current];
+    [next[index], next[to]] = [next[to], next[index]];
+    [nextIds[index], nextIds[to]] = [nextIds[to], nextIds[index]];
+    focusNext.current = { id: nextIds[to], target };
+    emit(next, nextIds, movedMessage(itemName, to + 1, count));
+  }
+  function remove(index) {
+    if (disabled) return;
+    const next = value.filter((_, at) => at !== index);
+    const nextIds = ids.current.filter((_, at) => at !== index);
+    const neighbour = nextIds[index] ?? nextIds[index - 1];
+    focusNext.current = neighbour ? { id: neighbour, target: "input" } : { id: "", target: "add" };
+    emit(next, nextIds, removedMessage(itemName, `${index + 1} of ${count}`));
+  }
+  const acts = (event) => event.key === "Enter" && !(multiline && event.shiftKey) && !isComposing(event);
+  function itemKeys(event, index) {
+    if (isComposing(event)) return;
+    if (event.altKey && (event.key === "ArrowUp" || event.key === "ArrowDown")) {
+      event.preventDefault();
+      move(index, event.key === "ArrowUp" ? -1 : 1, "input");
+      return;
+    }
+    if (!acts(event)) return;
+    event.preventDefault();
+    const next = ids.current[index + 1];
+    if (next) inputs.current.get(next)?.focus();
+    else addBox.current?.focus();
+  }
+  const control = (props) => (
+    /*
+     * ONE LINE THAT GROWS, never a fixed block of rows. A list of sentences
+     * read as a list wants each item on its own line; a two-row textarea per
+     * item made three of them 256px where the console draws 111, and the
+     * second row was empty in every one of them. `autoResize` starts at one
+     * line and takes as many as the sentence needs.
+     */
+    multiline ? /* @__PURE__ */ jsx(
+      Textarea,
+      {
+        rows: 1,
+        autoResize: true,
+        "aria-label": props.label,
+        value: props.value,
+        placeholder: props.placeholder,
+        disabled,
+        spellCheck: true,
+        trailing: props.trailing,
+        onChange: (event) => props.onChange(event.target.value),
+        onKeyDown: props.onKeyDown,
+        ref: props.ref
+      }
+    ) : /* @__PURE__ */ jsx(
+      Input,
+      {
+        "aria-label": props.label,
+        value: props.value,
+        placeholder: props.placeholder,
+        disabled,
+        autoComplete: "off",
+        spellCheck: true,
+        trailing: props.trailing,
+        onChange: (event) => props.onChange(event.target.value),
+        onKeyDown: props.onKeyDown,
+        ref: props.ref
+      }
+    )
+  );
+  return /* @__PURE__ */ jsxs(
+    FormField,
+    {
+      as: "fieldset",
+      label,
+      optional,
+      helper,
+      error,
+      className: "crewlet-list-input",
+      labelAction: /* @__PURE__ */ jsx(
+        IconButton,
+        {
+          size: "sm",
+          variant: "soft-brand",
+          label: addLabel(itemName),
+          icon: /* @__PURE__ */ jsx(AddGlyph, {}),
+          disabled: disabled || draft.trim() === "",
+          onClick: add
+        }
+      ),
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "crewlet-list-input__add", children: control({
+          label: newItemLabel(itemName),
+          value: draft,
+          placeholder,
+          trailing: enterHint ? /* @__PURE__ */ jsx(Kbd, { subtle: true, children: "Enter" }) : void 0,
+          onChange: setDraft,
+          onKeyDown: (event) => {
+            if (!acts(event)) return;
+            event.preventDefault();
+            add();
+          },
+          ref: (el) => {
+            addBox.current = el;
+          }
+        }) }),
+        count > 0 ? /* @__PURE__ */ jsx("ol", { className: "crewlet-list-input__items", children: value.map((item, index) => {
+          const key = ids.current[index];
+          const position = `${index + 1} of ${count}`;
+          return /* @__PURE__ */ jsxs("li", { className: "crewlet-list-input__item", children: [
+            /* @__PURE__ */ jsx("span", { className: "crewlet-list-input__index", "aria-hidden": "true", children: index + 1 }),
+            control({
+              label: itemLabel(name, position),
+              value: item,
+              onChange: (next) => {
+                const list = [...value];
+                list[index] = next;
+                emit(list, ids.current);
+              },
+              onKeyDown: (event) => itemKeys(event, index),
+              ref: (el) => {
+                if (el) inputs.current.set(key, el);
+                else inputs.current.delete(key);
+              }
+            }),
+            /* @__PURE__ */ jsxs("span", { className: "crewlet-list-input__actions", children: [
+              /* @__PURE__ */ jsxs("span", { className: "crewlet-list-input__move", children: [
+                /* @__PURE__ */ jsx(
+                  IconButton,
+                  {
+                    size: "sm",
+                    label: moveUpLabel(itemName, position),
+                    icon: /* @__PURE__ */ jsx(ArrowUpwardGlyph, {}),
+                    disabled: disabled || index === 0,
+                    onClick: () => move(index, -1, "up"),
+                    ref: (el) => {
+                      if (el) ups.current.set(key, el);
+                      else ups.current.delete(key);
+                    }
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  IconButton,
+                  {
+                    size: "sm",
+                    label: moveDownLabel(itemName, position),
+                    icon: /* @__PURE__ */ jsx(ArrowDownwardGlyph, {}),
+                    disabled: disabled || index === count - 1,
+                    onClick: () => move(index, 1, "down"),
+                    ref: (el) => {
+                      if (el) downs.current.set(key, el);
+                      else downs.current.delete(key);
+                    }
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx(
+                IconButton,
+                {
+                  size: "sm",
+                  variant: "ghost-danger",
+                  label: removeLabel(itemName, position),
+                  icon: /* @__PURE__ */ jsx(CloseGlyph, {}),
+                  disabled,
+                  onClick: () => remove(index)
+                }
+              )
+            ] })
+          ] }, key);
+        }) }) : null
+      ]
+    }
+  );
+}
+
+export { ListInput };

package/dist/chunk-ESCO4XYW.js

@@ -0,0 +1,144 @@
+import { Modal } from './chunk-2EOKFKHX.js';
+import { useListbox } from './chunk-GTOUGQQK.js';
+import { Input } from './chunk-O6232G37.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './CommandPalette-CSJDUCQA.css';
+import { useId, useMemo } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function CommandPalette({ open, ...rest }) {
+  return open ? /* @__PURE__ */ jsx(Palette, { ...rest }) : null;
+}
+function Palette({
+  onClose,
+  label = "Search",
+  query,
+  onQueryChange,
+  groups,
+  placeholder = "Search",
+  footer,
+  emptyMessage = "Nothing matches that search.",
+  resultsLabel = "Results",
+  className,
+  ...rest
+}) {
+  const id = useId();
+  const flat = useMemo(() => groups.flatMap((group) => group.items), [groups]);
+  const listbox = useListbox({
+    id,
+    open: true,
+    count: flat.length,
+    popup: false,
+    onCommit: (at) => {
+      const item = flat[at];
+      if (!item) return;
+      item.onSelect();
+      onClose();
+    },
+    onClose
+  });
+  const active = listbox.active;
+  let index = -1;
+  return /* @__PURE__ */ jsxs(
+    Modal,
+    {
+      ...rest,
+      open: true,
+      onClose,
+      placement: "top",
+      size: "md",
+      ariaLabel: label,
+      showCloseButton: false,
+      flush: true,
+      className: cx("crewlet-palette", className),
+      footerStart: footer,
+      children: [
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            appearance: "command",
+            containerClassName: "crewlet-palette__field",
+            value: query,
+            onChange: (event) => {
+              onQueryChange(event.target.value);
+              listbox.setActive(0);
+            },
+            onKeyDown: listbox.onKeyDown,
+            placeholder,
+            role: "combobox",
+            "aria-label": label,
+            "aria-expanded": true,
+            "aria-controls": listbox.listId,
+            "aria-autocomplete": "list",
+            "aria-activedescendant": active >= 0 ? listbox.optionId(active) : void 0,
+            autoComplete: "off",
+            spellCheck: false
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "crewlet-palette__results",
+            ref: listbox.listRef,
+            id: listbox.listId,
+            role: "listbox",
+            "aria-label": resultsLabel,
+            children: groups.map((group) => (
+              // Named by the id of its own heading, never by the heading's text:
+              // `aria-label` would repeat words already on screen, and
+              // `aria-labelledby` given a name with a space in it splits on it.
+              /* @__PURE__ */ jsxs("div", { role: "group", "aria-labelledby": `${id}-group-${group.id}`, children: [
+                /* @__PURE__ */ jsx("div", { className: "crewlet-listbox__heading", id: `${id}-group-${group.id}`, role: "presentation", children: group.label }),
+                group.items.map((item) => {
+                  index += 1;
+                  const mine = index;
+                  return (
+                    /*
+                     * NOT A BUTTON, and not focusable: focus never leaves the
+                     * field, so a row is reached by the arrows and by the pointer.
+                     *
+                     * The two rules turned off here are both asking for the shape
+                     * this pattern is defined NOT to have. A combobox points at its
+                     * active option with `aria-activedescendant`, which requires
+                     * that the option itself never take focus, and the keys that
+                     * take a row (Enter) are handled on the field, where the rule
+                     * cannot see them. Making a row focusable would put one tab
+                     * stop per result between the field and itself, which is the
+                     * defect this replaced. The axe run in the suite beside this
+                     * file is what actually holds the surface accessible.
+                     */
+                    // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/interactive-supports-focus
+                    /* @__PURE__ */ jsxs(
+                      "div",
+                      {
+                        id: listbox.optionId(mine),
+                        className: "crewlet-listbox__option",
+                        role: "option",
+                        "aria-selected": mine === active,
+                        onMouseEnter: listbox.optionHandlers(mine).onMouseEnter,
+                        onMouseDown: (event) => event.preventDefault(),
+                        onClick: () => {
+                          item.onSelect();
+                          onClose();
+                        },
+                        children: [
+                          item.icon !== void 0 ? /* @__PURE__ */ jsx("span", { className: "crewlet-palette__icon", "aria-hidden": "true", children: item.icon }) : null,
+                          /* @__PURE__ */ jsx("span", { className: "crewlet-palette__label", children: item.label }),
+                          item.hint !== void 0 ? /* @__PURE__ */ jsx("span", { className: "crewlet-listbox__hint", children: item.hint }) : null
+                        ]
+                      },
+                      item.id
+                    )
+                  );
+                })
+              ] }, group.id)
+            ))
+          }
+        ),
+        flat.length === 0 ? /* @__PURE__ */ jsx("p", { className: "crewlet-palette__empty", children: emptyMessage }) : null
+      ]
+    }
+  );
+}
+
+export { CommandPalette };

package/dist/chunk-EUCC37WY.js

@@ -0,0 +1,14 @@
+import { VisuallyHidden } from './chunk-BZFWDIV6.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './EmptyValue-4B6ODXHT.css';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var EMPTY_VALUE = "\u2013";
+function EmptyValue({ label = "Not reported", className }) {
+  return /* @__PURE__ */ jsxs("span", { className: cx("crewlet-empty-value", className), children: [
+    /* @__PURE__ */ jsx("span", { "aria-hidden": true, children: EMPTY_VALUE }),
+    /* @__PURE__ */ jsx(VisuallyHidden, { children: label })
+  ] });
+}
+
+export { EMPTY_VALUE, EmptyValue };