@crewlethq/ui 0.4.4 → 0.5.0

package/dist/{TreeCanvas-WBNQPHC7.css → TreeCanvas-HVOV4SQN.css}

@@ -31,7 +31,10 @@
 .crewlet-tree-canvas__card,
 .crewlet-tree-canvas__links,
 .crewlet-tree-canvas__gap,
-.crewlet-tree-canvas__margin {
+.crewlet-tree-canvas__margin,
+.crewlet-tree-canvas__group,
+.crewlet-tree-canvas__group-head,
+.crewlet-tree-canvas__group-pad {
   position: absolute;
   top: 0;
   left: 0;
@@ -170,15 +173,6 @@
   --crewlet-tree-canvas-card-accent: var(--color-node-blue);
 }
 
-/*
- * A card that stands for somebody outside the system takes the dashed edge
- * every such seat wears. The BOUNDARY says it rather than a hue, so it reads
- * to somebody who cannot separate the hue at all.
- */
-.crewlet-tree-canvas__card--outline {
-  border-style: dashed;
-}
-
 /*
  * THE NODES INSIDE THE CARD. `role="treeitem"` is this component's own
  * contract, handed to the caller by `ctx.item(id)`, so the inset a node sits
@@ -338,13 +332,13 @@
 /*
  * A reveal is a state change rather than an entrance, so under reduced motion
  * it simply happens. The control is still shown and still reached the same way.
+ * The `node` appearance's own quiet controls are stopped in its own section,
+ * below the rules that start them: named here, above those rules, the stops
+ * tied with them on specificity and lost on source order.
  */
 @media (prefers-reduced-motion: reduce) {
   .crewlet-tree-canvas__actions,
-  .crewlet-tree-canvas__under,
-  .crewlet-tree-canvas--node .crewlet-tree-canvas__under > :not(.crewlet-add-pill),
-  .crewlet-tree-canvas--node .crewlet-org-node__leading,
-  .crewlet-tree-canvas--node .crewlet-org-node-lead__clear {
+  .crewlet-tree-canvas__under {
     transition: none;
   }
 }
@@ -376,6 +370,92 @@
   pointer-events: none;
 }
 
+/* ---------------------------------------------------------------------------
+ * A GROUP: a box round a run of sibling cards, with a label along its top.
+ *
+ * The approved design's unit box: a hairline on the card rung with the unit's
+ * name in the tertiary ink at 12px, and the project key chip at the end of
+ * that line. The hairline is `--color-border-default` over
+ * `--color-surface-subtle` standing on the canvas's own ground, which is the
+ * pair the palette suite already holds to a visible step (the card hairline
+ * rule); a card inside the box is the same rung and is found by its own
+ * hairline, exactly as a card on a sheet is.
+ *
+ * THE ROOM IS THE LAYOUT'S. The padding round the members is the probe below,
+ * and the room above them is the header's own measured height, so the box is
+ * never drawn over a card it does not hold and a branch is never run through
+ * it: both are reserved by `layoutForest` before anything is placed.
+ * ------------------------------------------------------------------------- */
+
+/*
+ * The room beside and below a group's members, as a token: `--spacing-3`,
+ * which is also the label's own inset, so the label starts on the line the
+ * first member's edge does.
+ */
+.crewlet-tree-canvas__group-pad {
+  width: var(--spacing-3);
+  height: var(--spacing-3);
+  visibility: hidden;
+  pointer-events: none;
+}
+
+/*
+ * THE BOX IS DASHED, as the approved org chart draws a unit: a card's own
+ * edge is solid, and a box round several cards drawn the same way read as one
+ * more, larger card. A dash says the edge is a grouping rather than a thing.
+ * It is the STRONG border step, the artboard's, because a dash spends half its
+ * length on gaps: at the plain hairline's step the edge all but disappeared
+ * against the box's own fill.
+ */
+.crewlet-tree-canvas__group {
+  box-sizing: border-box;
+  background: var(--color-surface-subtle);
+  border: 1px dashed var(--color-border-strong);
+  border-radius: var(--radius-xl);
+  pointer-events: none;
+}
+
+/*
+ * THE LABEL'S LINE, and what the room above the members is measured from: one
+ * line, at the box's width, truncated rather than wrapped, because a label
+ * that wrapped would move every rank below it.
+ */
+.crewlet-tree-canvas__group-head {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  padding: var(--spacing-2) var(--spacing-3);
+  font-size: var(--font-size-xs);
+  line-height: var(--font-line-height-snug);
+  color: var(--color-text-tertiary);
+  white-space: nowrap;
+  pointer-events: none;
+}
+
+/*
+ * ON THE BOX'S OWN FILL, over the branches: a branch dropping into a member
+ * passes behind the words rather than striking through them, and the fill is
+ * the box's, so nothing about the label reads as a second surface.
+ */
+.crewlet-tree-canvas__group-label,
+.crewlet-tree-canvas__group-lead {
+  background: var(--color-surface-subtle);
+}
+
+.crewlet-tree-canvas__group-label {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* The key AHEAD of the name, a project key chip, never cut: the name after
+   it is what gives way when the line is short. */
+.crewlet-tree-canvas__group-lead {
+  display: inline-flex;
+  flex: none;
+}
+
 /* ---------------------------------------------------------------------------
  * THE CHART ARRIVING, AND REARRANGING.
  *
@@ -392,11 +472,16 @@
  * ------------------------------------------------------------------------- */
 
 .crewlet-tree-canvas__card[data-enter='waiting'],
-.crewlet-tree-canvas__links path[data-enter='waiting'] {
+.crewlet-tree-canvas__links path[data-enter='waiting'],
+.crewlet-tree-canvas__group[data-enter='waiting'],
+.crewlet-tree-canvas__group-head[data-enter='waiting'] {
   opacity: 0;
 }
 
-.crewlet-tree-canvas__card[data-enter='shown'] {
+/* A group arrives with its first member, at the card's pace. */
+.crewlet-tree-canvas__card[data-enter='shown'],
+.crewlet-tree-canvas__group[data-enter='shown'],
+.crewlet-tree-canvas__group-head[data-enter='shown'] {
   animation: crewlet-tree-canvas-arrive var(--motion-duration-slow) var(--motion-easing-default) both;
 }
 
@@ -422,9 +507,20 @@
  * when the setting changed.
  */
 @media (prefers-reduced-motion: reduce) {
+  /* Drawn, whatever step of the entrance it had reached: a card still WAITING
+     is otherwise held at nothing. */
   .crewlet-tree-canvas__card[data-enter],
-  .crewlet-tree-canvas__links path[data-enter] {
+  .crewlet-tree-canvas__links path[data-enter],
+  .crewlet-tree-canvas__group[data-enter],
+  .crewlet-tree-canvas__group-head[data-enter] {
     opacity: 1;
+  }
+
+  /* And the entrance stopped by the selectors that start it. */
+  .crewlet-tree-canvas__card[data-enter='shown'],
+  .crewlet-tree-canvas__links path[data-enter='shown'],
+  .crewlet-tree-canvas__group[data-enter='shown'],
+  .crewlet-tree-canvas__group-head[data-enter='shown'] {
     animation: none;
   }
 }
@@ -436,10 +532,11 @@
 
 /*
  * THE CONNECTORS ARE THE CONTENT, and they take the step that is measured to
- * be resolvable. The SHAPE is `layoutConnectors`, which draws a rounded step
- * from each parent's bottom into each child's top; what is decided here is only
- * how dark it is, and that the joins are round so a corner reads as a turn
- * rather than as two lines meeting.
+ * be resolvable. The SHAPE is `layoutConnectors`, which draws an orthogonal
+ * elbow from each parent's bottom into each child's top, in SVG attributes
+ * the layout computes rather than in a style a policy has to allow; what is
+ * decided here is only how dark and how heavy it is, and that the joins are
+ * round so a corner reads as a turn rather than as two lines meeting.
  *
  * A connector is the only thing on the chart that says who reports to whom:
  * remove it and the picture is a scatter of cards. That makes it a graphical
@@ -450,11 +547,22 @@
  * boundary step, which the palette suite already holds at 3:1 on every ground,
  * measures 4.83:1 and 4.78:1. Darker than the chart this is drawn from, and
  * deliberately: there the hierarchy was a line a reader had to hunt for.
+ *
+ * THE APPROVED DESIGN DRAWS IT IN `--color-border-strong`, AND THE FLOOR WINS.
+ * The artboard's connector is the strong border step at 1.5px, and on the
+ * canvas's ground that step measures 1.45:1 in dark and 1.43:1 in light (1.40
+ * and 1.50 on a group box's card rung): a line a reader cannot make out, for
+ * the one mark that says who reports to whom. The palette suite's data-mark
+ * table holds a chart's connector to 3:1 on `--color-border-control`, so the
+ * value moves up the border family to the first step that clears it, 4.40:1
+ * and 4.04:1 (4.25 and 4.26 on the card rung). The WEIGHT is the design's:
+ * 1.5px, heavier than the hairline this used to be, so a branch between two
+ * ranks of 90px cards reads as a line of the chart rather than as a seam.
  */
 .crewlet-tree-canvas__links path {
   fill: none;
   stroke: var(--color-border-control);
-  stroke-width: 1;
+  stroke-width: 1.5;
   stroke-linecap: round;
   stroke-linejoin: round;
 }
@@ -829,6 +937,20 @@
   pointer-events: auto;
 }
 
+/*
+ * The node's quiet controls arrive as a state change too, so under reduced
+ * motion they simply appear. Stopped HERE, after the rules that start their
+ * fades: the three selectors tie with those rules on specificity, so the stop
+ * has to come later in the file to win.
+ */
+@media (prefers-reduced-motion: reduce) {
+  .crewlet-tree-canvas--node .crewlet-tree-canvas__under > :not(.crewlet-add-pill),
+  .crewlet-tree-canvas--node .crewlet-org-node__leading,
+  .crewlet-tree-canvas--node .crewlet-org-node-lead__clear {
+    transition: none;
+  }
+}
+
 /*
  * THE BRANCHES ARE HEAVIER HERE. A node is half the height of a card, so a
  * hairline between two ranks of them is a thread; this is the console chart's
@@ -929,12 +1051,11 @@
  * chart this package is drawn to match does exactly this, and every step below
  * is its step.
  *
- * IT IS THE ONLY DASHED THING ON THE CHART THAT IS NOT A HUMAN SEAT, and the
- * two never collide: `cardOutline` marks a node of the data and this marks a
- * node that is not one yet, so no card can carry both. What tells them apart
- * is the hue and the breath: a human seat's edge is the chart's own boundary
- * step and does not move, and this one is the accent, with a ring outside it
- * that pulses for as long as the form is open.
+ * IT IS THE ONLY DASHED CARD ON THE CHART, because a dashed edge marks a
+ * place nothing fills yet and this is the one card that is not a node of the
+ * data. Every node's card is solid, a person's seat included: who holds a seat
+ * is its badge's outline, never the card's frame, which is why the chart has
+ * no second dashed card for a person to be confused with this one.
  *
  * ITS GROUND IS EVERY OTHER CARD'S. The ghost holds a real form with real
  * labels, helps and refusals in it, so it is NOT tinted: every contrast
@@ -1078,8 +1199,11 @@
 @media (prefers-reduced-motion: reduce) {
   /* NOT `transform` on the card itself: its transform is where the layout
      put it, written as an inline style, and a rule here saying `none` would
-     be a rule that only ever fires when something else drops that style. */
-  .crewlet-tree-canvas__card--composing,
+     be a rule that only ever fires when something else drops that style.
+     Named with the chart's class, as the rule that starts its arrival names
+     it: by its own class alone the stop was one class short of that rule,
+     and the arrival played for a reader who had asked for none. */
+  .crewlet-tree-canvas .crewlet-tree-canvas__card--composing,
   .crewlet-tree-canvas__links path[data-composing='true'] {
     opacity: 1;
     animation: none;

package/dist/TreeGrid/index.js

@@ -1,8 +1,8 @@
-export { TreeGrid } from '../chunk-5SDBMKUO.js';
-import '../chunk-NTRZGNEX.js';
+export { TreeGrid } from '../chunk-FIFNP6PL.js';
+import '../chunk-S3BCVWTU.js';
 import '../chunk-53DVJCVW.js';
 import '../chunk-7RPGY3JE.js';
-import '../chunk-ITHXJHBB.js';
-import '../chunk-F27EPQ7D.js';
+import '../chunk-R25RGPUB.js';
+import '../chunk-4UQ7SMPK.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{chunk-F6OE5FH3.js → chunk-2FPENTCF.js}

@@ -1,4 +1,4 @@
-import { isComposing, isModalLayerOpen } from './chunk-ITHXJHBB.js';
+import { isComposing, isModalLayerOpen } from './chunk-R25RGPUB.js';
 import { useRef, useEffect } from 'react';
 
 var TYPING_ROLES = /* @__PURE__ */ new Set(["combobox", "listbox", "textbox", "searchbox", "spinbutton"]);

package/dist/chunk-4AK52VHB.js

@@ -0,0 +1,88 @@
+import { cx } from './chunk-ODEQTPFM.js';
+import './SegmentedMeter-KQNML2TW.css';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function settle(difference, scale) {
+  if (Math.abs(difference) <= scale * 1e-12) return 0;
+  return Number(difference.toPrecision(12));
+}
+function checked(segments, total) {
+  const seen = /* @__PURE__ */ new Set();
+  for (const segment of segments) {
+    if (seen.has(segment.id)) {
+      throw new RangeError(`SegmentedMeter segment ids must be unique; "${segment.id}" is used twice`);
+    }
+    seen.add(segment.id);
+    if (!Number.isFinite(segment.value) || segment.value < 0) {
+      throw new RangeError(
+        `SegmentedMeter segment "${segment.id}" must be a finite count of at least 0; it was ${segment.value}`
+      );
+    }
+  }
+  if (total !== void 0 && (!Number.isFinite(total) || total < 0)) {
+    throw new RangeError(`SegmentedMeter total must be a finite count of at least 0; it was ${total}`);
+  }
+}
+function measure(segments, total) {
+  const sum = segments.reduce((running, segment) => running + segment.value, 0);
+  const whole = total ?? sum;
+  const scale = Math.max(whole, sum);
+  const remainder = Math.max(0, settle(whole - sum, scale));
+  return { whole, scale, remainder };
+}
+function segmentedMeterLabel(segments, total, remainderLabel) {
+  checked(segments, total);
+  const { whole, remainder } = measure(segments, total);
+  const words = segments.filter((segment) => segment.value > 0).map((segment) => `${segment.value} ${segment.label}`);
+  if (remainder > 0 && remainderLabel !== void 0) words.push(`${remainder} ${remainderLabel}`);
+  return `${words.length === 0 ? "0" : words.join(", ")} of ${whole}`;
+}
+function SegmentedMeter({
+  segments,
+  total,
+  remainderLabel,
+  size = "default",
+  label,
+  decorative = false,
+  className,
+  style,
+  ...rest
+}) {
+  checked(segments, total);
+  const { scale, remainder } = measure(segments, total);
+  const parts = segments.filter((segment) => segment.value > 0);
+  const share = (value) => `${value / scale * 100}%`;
+  const leftover = scale === 0 ? "100%" : remainder > 0 ? share(remainder) : null;
+  const drawn = parts.length + (leftover === null ? 0 : 1);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...rest,
+      className: cx("crewlet-segmented-meter", `crewlet-segmented-meter--${size}`, className),
+      style: { "--crewlet-segmented-meter-count": drawn, ...style },
+      role: decorative ? void 0 : "img",
+      "aria-label": decorative ? void 0 : label ?? segmentedMeterLabel(segments, total, remainderLabel),
+      "aria-hidden": decorative ? true : void 0,
+      children: [
+        parts.map((segment) => /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "crewlet-segmented-meter__segment",
+            "data-tone": segment.tone,
+            style: { flexBasis: share(segment.value) }
+          },
+          segment.id
+        )),
+        leftover === null ? null : /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "crewlet-segmented-meter__segment crewlet-segmented-meter__remainder",
+            style: { flexBasis: leftover }
+          }
+        )
+      ]
+    }
+  );
+}
+
+export { SegmentedMeter, segmentedMeterLabel };

package/dist/{chunk-7EM5T4ME.js → chunk-4IQD3HUQ.js}

@@ -1,5 +1,5 @@
-import { Button } from './chunk-BZYDZBAN.js';
-import './ErrorBoundary-ME36CQTA.css';
+import { Button } from './chunk-ETYEBKR4.js';
+import './ErrorBoundary-U2PA3LY2.css';
 import { Component } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 

package/dist/{chunk-YODNNSZL.js → chunk-4PZ6FJKW.js}

@@ -1,29 +1,58 @@
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './Meter-SKOOXQBC.css';
+import './Meter-5VCSFMZW.css';
 import { useId } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
+var METER_STATES = Object.freeze(["ok", "near", "refusing"]);
+var DEFAULT_METER_THRESHOLDS = Object.freeze({ near: 0.75 });
+var STATE_TONES = {
+  ok: "quantity",
+  near: "warning",
+  refusing: "danger"
+};
+function meterStateTone(state) {
+  if (!Object.hasOwn(STATE_TONES, state)) {
+    throw new RangeError(`Meter state must be one of ${METER_STATES.join(", ")}; it was ${String(state)}`);
+  }
+  return STATE_TONES[state];
+}
+function meterState(fraction, thresholds = DEFAULT_METER_THRESHOLDS) {
+  const { near } = thresholds;
+  if (!Number.isFinite(near) || near <= 0 || near > 1) {
+    throw new RangeError(`Meter thresholds.near must be a fraction of the limit above 0 and at most 1; it was ${near}`);
+  }
+  if (fraction >= 1) return "refusing";
+  if (fraction >= near) return "near";
+  return "ok";
+}
 function meterTone(percent) {
-  if (percent >= 100) return "danger";
-  if (percent >= 75) return "warning";
-  return "brand";
+  return meterStateTone(meterState(percent / 100));
 }
 function progressTone(percent) {
-  return percent >= 100 ? "success" : "brand";
+  return percent >= 100 ? "success" : "quantity";
+}
+function drawnTone({
+  state,
+  tone,
+  polarity = "spent",
+  thresholds
+}, fraction, percent) {
+  if (state !== void 0) return meterStateTone(state);
+  if (tone !== void 0) return tone;
+  if (polarity === "progress") return progressTone(percent);
+  return meterStateTone(meterState(fraction, thresholds));
 }
-var RAMPS = {
-  spent: meterTone,
-  progress: progressTone
-};
 function Meter({
   value,
   max,
   label,
   valueText,
   hint,
+  state,
   tone,
-  polarity = "spent",
+  polarity,
+  thresholds,
   size = "default",
   hideLabel = false,
   className,
@@ -31,8 +60,9 @@ function Meter({
 }) {
   const labelId = useId();
   const bounded = max > 0;
-  const percent = bounded ? Math.min(100, Math.max(0, value / max * 100)) : 0;
-  const drawn = tone ?? RAMPS[polarity](percent);
+  const fraction = bounded ? value / max : 0;
+  const percent = bounded ? Math.min(100, Math.max(0, fraction * 100)) : 0;
+  const drawn = drawnTone({ state, tone, polarity, thresholds }, fraction, percent);
   const trailing = hint ?? valueText;
   const reported = bounded ? Math.min(max, Math.max(0, value)) : value;
   const spoken = bounded ? valueText ?? (reported === value ? void 0 : `${value} of ${max}`) : void 0;
@@ -60,4 +90,4 @@ function Meter({
   ] });
 }
 
-export { Meter, meterTone, progressTone };
+export { DEFAULT_METER_THRESHOLDS, METER_STATES, Meter, meterState, meterStateTone, meterTone, progressTone };

package/dist/{chunk-F27EPQ7D.js → chunk-4UQ7SMPK.js}

@@ -1,6 +1,6 @@
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './IconButton-VQGNMJDI.css';
+import './IconButton-TVEUWK6L.css';
 import { forwardRef, useId, Children, isValidElement, cloneElement } from 'react';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 

package/dist/chunk-5QWIJSQM.js

@@ -0,0 +1,73 @@
+import { StatusDot } from './chunk-WIATRXEJ.js';
+import { VisuallyHidden } from './chunk-BZFWDIV6.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './Stepper-HW4JM3YH.css';
+import { CheckGlyph } from '@crewlethq/icons/glyphs';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+function Stepper({
+  steps,
+  current,
+  label,
+  tone = "info",
+  pulse = false,
+  doneLabel = "Done",
+  className,
+  ...rest
+}) {
+  const seen = /* @__PURE__ */ new Set();
+  for (const step of steps) {
+    if (seen.has(step.id)) throw new RangeError(`Stepper step ids must be unique; "${step.id}" is used twice`);
+    seen.add(step.id);
+  }
+  const at = current === null ? steps.length : steps.findIndex((step) => step.id === current);
+  if (at < 0) {
+    throw new RangeError(
+      `Stepper current must be the id of one of its steps, or null once every step is done; "${current}" is not one of ${steps.map((step) => `"${step.id}"`).join(", ")}`
+    );
+  }
+  if (steps.length === 0) return null;
+  const stateOf = (index) => index < at ? "done" : index === at ? "current" : "later";
+  return (
+    /*
+     * `role="list"` although an `ol` already has one, which is why the lint
+     * rule that calls it redundant is silenced here rather than obeyed, as
+     * `Legend` and `DiffList` silence it: the stylesheet takes the markers off,
+     * and WebKit answers a marker-less list as a group of paragraphs, so a
+     * reader would no longer be told how many steps there are before hearing
+     * them. The role puts that back.
+     */
+    // eslint-disable-next-line jsx-a11y/no-redundant-roles
+    /* @__PURE__ */ jsx(
+      "ol",
+      {
+        ...rest,
+        role: "list",
+        className: cx("crewlet-stepper", `crewlet-stepper--${tone}`, className),
+        "aria-label": label,
+        children: steps.map((step, index) => {
+          const state = stateOf(index);
+          return /* @__PURE__ */ jsx(
+            "li",
+            {
+              className: cx("crewlet-stepper__step", `crewlet-stepper__step--${state}`),
+              "aria-current": state === "current" ? "step" : void 0,
+              children: /* @__PURE__ */ jsxs("span", { className: "crewlet-stepper__chip", children: [
+                state === "done" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx(CheckGlyph, { size: "xs", className: "crewlet-stepper__check" }),
+                  /* @__PURE__ */ jsx(VisuallyHidden, { children: doneLabel }),
+                  " "
+                ] }) : null,
+                state === "current" ? /* @__PURE__ */ jsx(StatusDot, { tone, pulse, className: "crewlet-stepper__dot" }) : null,
+                /* @__PURE__ */ jsx("span", { className: "crewlet-stepper__label", children: step.label })
+              ] })
+            },
+            step.id
+          );
+        })
+      }
+    )
+  );
+}
+
+export { Stepper };

package/dist/{chunk-KIC7BZYJ.js → chunk-6MU7HNB4.js}

@@ -1,5 +1,5 @@
-import { usePopupLayer, isComposing } from './chunk-ITHXJHBB.js';
-import './Listbox-ZXYYNN6U.css';
+import { usePopupLayer, isComposing } from './chunk-R25RGPUB.js';
+import './Listbox-6WJNJQVQ.css';
 import { useState, useRef, useCallback, useEffect } from 'react';
 
 function useListbox({
@@ -25,13 +25,13 @@ function useListbox({
   );
   useEffect(() => {
     const box = list.current;
-    const row = box?.querySelector('[aria-selected="true"]');
-    if (!box || !row) return;
+    const row = active >= 0 ? document.getElementById(`${listId}-${active}`) : null;
+    if (!box || !row || !box.contains(row)) return;
     const bounds = box.getBoundingClientRect();
     const spot = row.getBoundingClientRect();
     if (spot.top < bounds.top) box.scrollTop -= bounds.top - spot.top;
     else if (spot.bottom > bounds.bottom) box.scrollTop += spot.bottom - bounds.bottom;
-  }, [active, count, open]);
+  }, [active, count, open, listId]);
   function onKeyDown(event) {
     if (!open || isComposing(event)) return false;
     if (event.key === "Escape") {
@@ -52,6 +52,7 @@ function useListbox({
         setAt((active - 1 + count) % count);
         return true;
       case "Enter":
+        if (event.metaKey || event.ctrlKey || event.altKey) return false;
         event.preventDefault();
         onCommit(active);
         return true;

package/dist/{chunk-S2XHHEW4.js → chunk-74KMX7YH.js}

@@ -1,7 +1,7 @@
-import { StatusDot } from './chunk-PZSWF74H.js';
+import { StatusDot } from './chunk-WIATRXEJ.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './Tag-VNZEYLB6.css';
-import { CloseGlyph } from '@crewlethq/icons/glyphs';
+import './Tag-GBE7LQJP.css';
+import { XGlyph } from '@crewlethq/icons/glyphs';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
 function Tag(props) {
@@ -63,7 +63,7 @@ function Tag(props) {
         onRemove();
       },
       "aria-label": removeAriaLabel,
-      children: /* @__PURE__ */ jsx(CloseGlyph, { size: "xs" })
+      children: /* @__PURE__ */ jsx(XGlyph, { size: "xs" })
     }
   );
   if (split) {

package/dist/{chunk-WNI2WSJF.js → chunk-7KBNFFM3.js}

@@ -1,5 +1,5 @@
 import { cx } from './chunk-ODEQTPFM.js';
-import './BrandLockup-6ISDEHPJ.css';
+import './BrandLockup-JKGXFCZF.css';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
 function BrandLockup({ name, mark, context, href, renderLink, className }) {

package/dist/{chunk-EFSG7HNU.js → chunk-AUS5FNQE.js}

@@ -1,5 +1,5 @@
 import { useLayerContainer, viewportBounds, LAYER_GAP, outsideBounds, placePopup, LAYER_REPOSITION_EVENT } from './chunk-7RPGY3JE.js';
-import { usePopupLayer, focusables } from './chunk-ITHXJHBB.js';
+import { usePopupLayer, focusables } from './chunk-R25RGPUB.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './Popover-WJGCF3ZQ.css';
 import { useId, useState, useRef, useCallback, useLayoutEffect, useEffect, cloneElement } from 'react';

package/dist/{chunk-CMEE37QJ.js → chunk-BMYPGGPV.js}

@@ -1,12 +1,12 @@
 import { LayerNodeBridge } from './chunk-53DVJCVW.js';
 import { LAYER_REPOSITION_EVENT, LayerHost } from './chunk-7RPGY3JE.js';
-import { IconButton } from './chunk-F27EPQ7D.js';
-import { Button } from './chunk-BZYDZBAN.js';
+import { IconButton } from './chunk-4UQ7SMPK.js';
+import { Button } from './chunk-ETYEBKR4.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './Canvas-Q6JETCWR.css';
 import { useId, useRef, useState, useCallback, useLayoutEffect, useImperativeHandle, useEffect } from 'react';
-import { ZoomOutGlyph, ZoomInGlyph, FitScreenGlyph } from '@crewlethq/icons/glyphs';
+import { ZoomOutGlyph, ZoomInGlyph, FullscreenGlyph } from '@crewlethq/icons/glyphs';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
 // src/Canvas/geometry.ts
@@ -528,7 +528,7 @@ function Canvas({
                 {
                   size: "sm",
                   label: text.fit,
-                  icon: /* @__PURE__ */ jsx(FitScreenGlyph, {}),
+                  icon: /* @__PURE__ */ jsx(FullscreenGlyph, {}),
                   onClick: () => content && apply(fitView(content, sizeNow.current), "near"),
                   disabled: !ready
                 }