@crewlethq/ui 0.4.3 → 0.5.0

package/dist/{chunk-NTRZGNEX.js → chunk-S3BCVWTU.js}

@@ -146,28 +146,36 @@ function treeTypeAhead(tree, expanded, from, text) {
 
 // src/Tree/layout.ts
 var MIN_OUTLINE_HEIGHT = 1;
-function bandsOf(roots, gapY) {
+function roomOf(membership) {
+  return { head: membership?.group.inset.top ?? 0, foot: membership?.group.inset.bottom ?? 0 };
+}
+function bandsOf(roots, gapY, groupOf) {
   const height = [];
+  const head = [];
+  const foot = [];
   const visit = (node, depth) => {
+    const room = roomOf(groupOf.get(node.id));
     height[depth] = Math.max(height[depth] ?? 0, node.height);
+    head[depth] = Math.max(head[depth] ?? 0, room.head);
+    foot[depth] = Math.max(foot[depth] ?? 0, room.foot);
     node.children.forEach((child) => visit(child, depth + 1));
   };
   roots.forEach((root) => visit(root, 0));
   const top = [];
   let at = 0;
   for (let depth = 0; depth < height.length; depth++) {
-    top[depth] = at;
-    at += height[depth] + gapY;
+    top[depth] = at + head[depth];
+    at = top[depth] + height[depth] + foot[depth] + gapY;
   }
   return { top, height };
 }
 function shift(outline, dx, dy) {
-  return outline.map((s) => ({ top: s.top + dy, bottom: s.bottom + dy, value: s.value + dx }));
+  return outline.map((s) => ({ ...s, top: s.top + dy, bottom: s.bottom + dy, value: s.value + dx }));
 }
 function mirror(outline) {
   return outline.map((s) => ({ ...s, value: -s.value }));
 }
-function merge(a, b, pick) {
+function merge(a, b, keep) {
   const cuts = [...new Set([...a, ...b].flatMap((s) => [s.top, s.bottom]))].sort((x, y) => x - y);
   const out = [];
   let i = 0;
@@ -177,13 +185,16 @@ function merge(a, b, pick) {
     const hi = cuts[k + 1];
     while (i < a.length && a[i].bottom <= lo) i++;
     while (j < b.length && b[j].bottom <= lo) j++;
-    const va = i < a.length && a[i].top <= lo ? a[i].value : void 0;
-    const vb = j < b.length && b[j].top <= lo ? b[j].value : void 0;
-    const value = va !== void 0 && vb !== void 0 ? pick(va, vb) : va ?? vb;
-    if (value === void 0) continue;
+    const sa = i < a.length && a[i].top <= lo ? a[i] : void 0;
+    const sb = j < b.length && b[j].top <= lo ? b[j] : void 0;
+    const chosen = sa && sb ? (keep === "max" ? sb.value > sa.value : sb.value < sa.value) ? sb : sa : sa ?? sb;
+    if (chosen === void 0) continue;
     const last = out[out.length - 1];
-    if (last && last.bottom === lo && last.value === value) last.bottom = hi;
-    else out.push({ top: lo, bottom: hi, value });
+    if (last && last.bottom === lo && last.value === chosen.value && last.group === chosen.group) {
+      last.bottom = hi;
+    } else {
+      out.push({ top: lo, bottom: hi, value: chosen.value, group: chosen.group, pad: chosen.pad });
+    }
   }
   return out;
 }
@@ -193,7 +204,9 @@ function separation(right, left, gap) {
   for (const s of left) {
     while (i < right.length && right[i].bottom <= s.top) i++;
     for (let k = i; k < right.length && right[k].top < s.bottom; k++) {
-      need = Math.max(need, right[k].value - s.value);
+      const edge = right[k];
+      const inside = edge.group !== null && edge.group === s.group ? edge.pad + s.pad : 0;
+      need = Math.max(need, edge.value - s.value - inside);
     }
   }
   if (Number.isFinite(need)) return need + gap;
@@ -207,7 +220,7 @@ function packFromLeft(kids2, gap) {
   for (let i = 1; i < kids2.length; i++) {
     const at = separation(reach, kids2[i].left, gap);
     positions.push(at);
-    reach = merge(reach, shift(kids2[i].right, at, 0), Math.max);
+    reach = merge(reach, shift(kids2[i].right, at, 0), "max");
   }
   return positions;
 }
@@ -220,24 +233,42 @@ function pack(kids2, gap) {
   const centre = (averaged[0] + averaged[averaged.length - 1]) / 2;
   return averaged.map((p) => p - centre);
 }
-function build(node, gaps, bands, depth) {
-  const kids2 = node.children.map((child) => build(child, gaps, bands, depth + 1));
+function childDrop(node, gaps, groupOf) {
+  const own = groupOf.get(node.id);
+  const body = own ? own.tallest : node.height;
+  let head = 0;
+  for (const child of node.children) head = Math.max(head, roomOf(groupOf.get(child.id)).head);
+  return body + roomOf(own).foot + gaps.gapY + head;
+}
+function build(node, gaps, bands, depth, groupOf) {
+  const kids2 = node.children.map((child) => build(child, gaps, bands, depth + 1, groupOf));
   const half = node.width / 2;
   const tall = Math.max(node.height, MIN_OUTLINE_HEIGHT);
   const inBand = bands ? (bands.height[depth] - node.height) / 2 : 0;
-  let left = [{ top: inBand, bottom: inBand + tall, value: -half }];
-  let right = [{ top: inBand, bottom: inBand + tall, value: half }];
+  const member = groupOf.get(node.id);
+  const pad = member?.group.inset.x ?? 0;
+  const group = member?.group.id ?? null;
+  let top = inBand;
+  let bottom = inBand + tall;
+  if (member) {
+    const body = Math.max(member.tallest, MIN_OUTLINE_HEIGHT);
+    const at = bands ? (bands.height[depth] - member.tallest) / 2 : 0;
+    top = at - member.group.inset.top;
+    bottom = at + body + member.group.inset.bottom;
+  }
+  let left = [{ top, bottom, value: -half - pad, group, pad }];
+  let right = [{ top, bottom, value: half + pad, group, pad }];
   if (kids2.length === 0) return { node, kids: kids2, offsets: [], inBand, left, right };
   const offsets = pack(kids2, gaps.gapX);
-  const childTop = bands ? bands.top[depth + 1] - bands.top[depth] : node.height + gaps.gapY;
+  const childTop = bands ? bands.top[depth + 1] - bands.top[depth] : childDrop(node, gaps, groupOf);
   if (!bands && childTop > node.height) {
-    const band = (value) => [{ top: node.height, bottom: childTop, value }];
-    left = merge(left, band(Math.min(-half, offsets[0])), Math.min);
-    right = merge(right, band(Math.max(half, offsets[offsets.length - 1])), Math.max);
+    const band = (value) => [{ top: node.height, bottom: childTop, value, group: null, pad: 0 }];
+    left = merge(left, band(Math.min(-half, offsets[0])), "min");
+    right = merge(right, band(Math.max(half, offsets[offsets.length - 1])), "max");
   }
   kids2.forEach((kid, i) => {
-    left = merge(left, shift(kid.left, offsets[i], childTop), Math.min);
-    right = merge(right, shift(kid.right, offsets[i], childTop), Math.max);
+    left = merge(left, shift(kid.left, offsets[i], childTop), "min");
+    right = merge(right, shift(kid.right, offsets[i], childTop), "max");
   });
   return { node, kids: kids2, offsets, inBand, left, right };
 }
@@ -251,30 +282,107 @@ function validate(roots, gaps) {
   if (gaps.ranks !== void 0 && gaps.ranks !== "per-parent" && gaps.ranks !== "shared") {
     throw new RangeError(`layoutForest: ranks is "${gaps.ranks}"; it is "per-parent" or "shared"`);
   }
-  const seen = /* @__PURE__ */ new Set();
-  const visit = (node) => {
+  const seen = /* @__PURE__ */ new Map();
+  const place = /* @__PURE__ */ new Map();
+  const visit = (node, parent, index) => {
     if (seen.has(node.id)) {
       throw new RangeError(`layoutForest: the id "${node.id}" appears twice; every box needs its own id`);
     }
-    seen.add(node.id);
+    seen.set(node.id, node);
+    place.set(node.id, { parent, index });
     if (!size(node.width) || !size(node.height)) {
       throw new RangeError(
         `layoutForest: "${node.id}" is ${node.width} by ${node.height}; a size must be finite and non-negative`
       );
     }
-    node.children.forEach(visit);
+    node.children.forEach((child, i) => visit(child, node.id, i));
   };
-  roots.forEach(visit);
+  roots.forEach((root, i) => visit(root, null, i));
+  const groupOf = /* @__PURE__ */ new Map();
+  const named = /* @__PURE__ */ new Set();
+  for (const group of gaps.groups ?? []) {
+    const { id, members, inset } = group;
+    if (named.has(id)) throw new RangeError(`layoutForest: the group "${id}" appears twice`);
+    named.add(id);
+    if (!size(inset.x) || !size(inset.top) || !size(inset.bottom)) {
+      throw new RangeError(
+        `layoutForest: the group "${id}" has the inset ${JSON.stringify(inset)}; each side must be finite and non-negative`
+      );
+    }
+    if (members.length === 0) throw new RangeError(`layoutForest: the group "${id}" has no members`);
+    let tallest = 0;
+    const indices = [];
+    let parent;
+    for (const member of members) {
+      const node = seen.get(member);
+      if (!node) throw new RangeError(`layoutForest: the group "${id}" names "${member}", which is no box of the forest`);
+      const other = groupOf.get(member);
+      if (other) {
+        throw new RangeError(
+          `layoutForest: "${member}" is in the group "${other.group.id}" and in "${id}"; a box is in one group at most`
+        );
+      }
+      const at = place.get(member);
+      if (parent !== void 0 && at.parent !== parent) {
+        throw new RangeError(
+          `layoutForest: the group "${id}" holds boxes of different parents; a group is a run of siblings`
+        );
+      }
+      parent = at.parent;
+      indices.push(at.index);
+      tallest = Math.max(tallest, node.height);
+      groupOf.set(member, { group, tallest: 0 });
+    }
+    indices.sort((a, b) => a - b);
+    if (indices[indices.length - 1] - indices[0] + 1 !== indices.length) {
+      throw new RangeError(
+        `layoutForest: the group "${id}" skips a sibling between its members; a group is a CONSECUTIVE run of siblings`
+      );
+    }
+    for (const member of members) groupOf.set(member, { group, tallest });
+  }
+  return groupOf;
+}
+function placeGroups(byId, groups) {
+  return groups.map(({ id, members, inset }) => {
+    let left = Infinity;
+    let top = Infinity;
+    let right = -Infinity;
+    let bottom = -Infinity;
+    for (const member of members) {
+      const box = byId.get(member);
+      if (!box) continue;
+      left = Math.min(left, box.x);
+      top = Math.min(top, box.y);
+      right = Math.max(right, box.x + box.width);
+      bottom = Math.max(bottom, box.y + box.height);
+    }
+    return {
+      id,
+      members,
+      inset,
+      x: left - inset.x,
+      y: top - inset.top,
+      width: right - left + inset.x * 2,
+      height: bottom - top + inset.top + inset.bottom
+    };
+  });
 }
 function layoutForest(roots, gaps) {
-  validate(roots, gaps);
+  const groupOf = validate(roots, gaps);
   const margin = gaps.margin ?? 0;
   const nodes = [];
   if (roots.length === 0) {
-    return { nodes, byId: /* @__PURE__ */ new Map(), bounds: { x: 0, y: 0, width: 0, height: 0 } };
+    return {
+      nodes,
+      byId: /* @__PURE__ */ new Map(),
+      groups: [],
+      ranks: gaps.ranks ?? "per-parent",
+      bounds: { x: 0, y: 0, width: 0, height: 0 }
+    };
   }
-  const bands = gaps.ranks === "shared" ? bandsOf(roots, gaps.gapY) : null;
-  const trees = roots.map((root) => build(root, gaps, bands, 0));
+  const bands = gaps.ranks === "shared" ? bandsOf(roots, gaps.gapY, groupOf) : null;
+  const trees = roots.map((root) => build(root, gaps, bands, 0, groupOf));
   const centres = pack(trees, gaps.gapX);
   const place = (tree, centre, top, depth, parent) => {
     const { node } = tree;
@@ -287,29 +395,74 @@ function layoutForest(roots, gaps) {
       depth,
       parent
     });
-    const childTop = bands ? bands.top[depth + 1] : top + node.height + gaps.gapY;
+    const childTop = bands ? bands.top[depth + 1] : top + childDrop(node, gaps, groupOf);
     tree.kids.forEach((kid, i) => place(kid, centre + tree.offsets[i], childTop, depth + 1, node.id));
   };
-  trees.forEach((tree, i) => place(tree, centres[i], bands ? bands.top[0] : 0, 0, null));
+  let rootHead = 0;
+  for (const root of roots) rootHead = Math.max(rootHead, roomOf(groupOf.get(root.id)).head);
+  trees.forEach((tree, i) => place(tree, centres[i], bands ? bands.top[0] : rootHead, 0, null));
+  const padOf = (id) => groupOf.get(id)?.group.inset.x ?? 0;
   let minX = Infinity;
-  for (const node of nodes) minX = Math.min(minX, node.x);
-  let maxX = -Infinity;
-  let maxY = 0;
+  for (const node of nodes) minX = Math.min(minX, node.x - padOf(node.id));
   for (const node of nodes) {
     node.x += margin - minX;
     node.y += margin;
-    maxX = Math.max(maxX, node.x + node.width);
-    maxY = Math.max(maxY, node.y + node.height);
+  }
+  const byId = new Map(nodes.map((node) => [node.id, node]));
+  const groups = placeGroups(byId, gaps.groups ?? []);
+  let maxX = -Infinity;
+  let maxY = 0;
+  for (const one of [...nodes, ...groups]) {
+    maxX = Math.max(maxX, one.x + one.width);
+    maxY = Math.max(maxY, one.y + one.height);
   }
   return {
     nodes,
-    byId: new Map(nodes.map((node) => [node.id, node])),
+    byId,
+    groups,
+    ranks: gaps.ranks ?? "per-parent",
     bounds: { x: 0, y: 0, width: maxX + margin, height: maxY + margin }
   };
 }
-var CONNECTOR_RADIUS = 12;
-function layoutConnectors(layout, shape = "step") {
+var ELBOW_RADIUS = 6;
+var CENTRED = 1e-6;
+var STEP_RADIUS = 12;
+function busOf(layout) {
+  const boxOf = /* @__PURE__ */ new Map();
+  for (const group of layout.groups ?? []) for (const member of group.members) boxOf.set(member, group);
+  const topOf = (node) => Math.min(boxOf.get(node.id)?.y ?? node.y, node.y);
+  const bottomOf = (node) => {
+    const box = boxOf.get(node.id);
+    return Math.max(box ? box.y + box.height : -Infinity, node.y + node.height);
+  };
+  const shared = layout.ranks === "shared";
+  const rankTop = /* @__PURE__ */ new Map();
+  const rankBottom = /* @__PURE__ */ new Map();
+  if (shared) {
+    for (const node of layout.nodes) {
+      rankTop.set(node.depth, Math.min(rankTop.get(node.depth) ?? Infinity, topOf(node)));
+      rankBottom.set(node.depth, Math.max(rankBottom.get(node.depth) ?? -Infinity, bottomOf(node)));
+    }
+  }
+  const reach = /* @__PURE__ */ new Map();
+  for (const node of layout.nodes) {
+    if (node.parent === null) continue;
+    const top = shared ? rankTop.get(node.depth) : topOf(node);
+    reach.set(node.parent, Math.min(reach.get(node.parent) ?? Infinity, top));
+  }
+  const bus = /* @__PURE__ */ new Map();
+  for (const [id, top] of reach) {
+    const parent = layout.byId.get(id);
+    if (!parent) continue;
+    const bottom = parent.y + parent.height;
+    const from = shared ? rankBottom.get(parent.depth) : bottomOf(parent);
+    bus.set(id, Math.min(Math.max(from + (top - from) / 2, bottom), top));
+  }
+  return bus;
+}
+function layoutConnectors(layout, shape = "elbow") {
   const out = [];
+  const bus = busOf(layout);
   for (const node of layout.nodes) {
     if (node.parent === null) continue;
     const parent = layout.byId.get(node.parent);
@@ -318,19 +471,35 @@ function layoutConnectors(layout, shape = "step") {
     const fromY = parent.y + parent.height;
     const toX = node.x + node.width / 2;
     const toY = node.y;
-    const midY = fromY + (toY - fromY) / 2;
+    const midY = bus.get(parent.id) ?? fromY + (toY - fromY) / 2;
     const across = toX - fromX;
     const at = (d) => out.push({ id: node.id, parent: parent.id, d });
+    if (shape === "straight") {
+      at(`M${fromX} ${fromY}L${toX} ${toY}`);
+      continue;
+    }
     if (shape === "curve") {
       at(`M ${fromX} ${fromY} C ${fromX} ${midY}, ${toX} ${midY}, ${toX} ${toY}`);
       continue;
     }
-    if (Math.abs(across) < 0.5) {
+    if (Math.abs(across) < CENTRED) {
       at(`M${fromX} ${fromY}V${toY}`);
       continue;
     }
-    const radius = Math.min(CONNECTOR_RADIUS, Math.abs(across) / 2, Math.abs(midY - fromY));
+    const radius = Math.min(
+      shape === "elbow" ? ELBOW_RADIUS : STEP_RADIUS,
+      Math.abs(across) / 2,
+      Math.max(0, midY - fromY),
+      Math.max(0, toY - midY)
+    );
     const step = across > 0 ? radius : -radius;
+    if (shape === "elbow") {
+      const first = across > 0 ? 0 : 1;
+      at(
+        `M${fromX} ${fromY}V${midY - radius}A${radius} ${radius} 0 0 ${first} ${fromX + step} ${midY}H${toX - step}A${radius} ${radius} 0 0 ${1 - first} ${toX} ${midY + radius}V${toY}`
+      );
+      continue;
+    }
     at(
       `M${fromX} ${fromY}V${midY - radius}Q${fromX} ${midY},${fromX + step} ${midY}H${toX - step}Q${toX} ${midY},${toX} ${midY + radius}V${toY}`
     );
@@ -526,4 +695,4 @@ function useLayoutAnchor(positions, anchorId, keep) {
   }, [positions, anchorId]);
 }
 
-export { SIZE_EPSILON, TYPE_AHEAD_RESET_MS, createTreeModel, isTypeAheadKey, layoutConnectors, layoutForest, treeAllExpandable, treeAncestors, treeCollapseOrAscend, treeExpandOrDescend, treeExpandTo, treeExpandable, treeFirst, treeFirstChild, treeItemAction, treeLast, treeLevel, treeNext, treeParent, treePosInSet, treePrevious, treeSetSize, treeStep, treeTypeAhead, treeVisible, typeAheadBuffer, useLayoutAnchor, useMeasuredSizes, useTreeState };
+export { SIZE_EPSILON, TYPE_AHEAD_RESET_MS, createTreeModel, isTypeAheadKey, layoutConnectors, layoutForest, placeGroups, treeAllExpandable, treeAncestors, treeCollapseOrAscend, treeExpandOrDescend, treeExpandTo, treeExpandable, treeFirst, treeFirstChild, treeItemAction, treeLast, treeLevel, treeNext, treeParent, treePosInSet, treePrevious, treeSetSize, treeStep, treeTypeAhead, treeVisible, typeAheadBuffer, useLayoutAnchor, useMeasuredSizes, useTreeState };

package/dist/chunk-S7KW47IQ.js

@@ -0,0 +1,121 @@
+import { useThemePreference, useDensityPreference } from './chunk-K3OWD7BJ.js';
+import { SegmentedControl } from './chunk-DHPUMOTX.js';
+import { SunGlyph, MonitorGlyph, MoonGlyph } from '@crewlethq/icons/glyphs';
+import { jsx } from 'react/jsx-runtime';
+
+function ThemeSwitcher(props) {
+  if (props.value !== void 0) {
+    const { storageKey: _none, ...controlled } = props;
+    return /* @__PURE__ */ jsx(ThemeRow, { ...controlled });
+  }
+  const { value: _stored, storageKey = "crewlet_theme", ...row } = props;
+  return /* @__PURE__ */ jsx(StoredThemeSwitcher, { ...row, storageKey });
+}
+function StoredThemeSwitcher({
+  storageKey,
+  onChange,
+  ...row
+}) {
+  const [theme, choose] = useThemePreference({ storageKey });
+  return /* @__PURE__ */ jsx(
+    ThemeRow,
+    {
+      ...row,
+      value: theme,
+      onChange: (next) => {
+        choose(next);
+        onChange?.(next);
+      }
+    }
+  );
+}
+function ThemeRow({
+  value,
+  onChange,
+  label = "Theme",
+  lightLabel = "Light",
+  systemLabel = "Follow the system",
+  darkLabel = "Dark",
+  size = "sm",
+  className
+}) {
+  return /* @__PURE__ */ jsx(
+    SegmentedControl,
+    {
+      label,
+      semantics: "radio",
+      size,
+      className,
+      value,
+      onValueChange: onChange,
+      options: [
+        { value: "light", icon: /* @__PURE__ */ jsx(SunGlyph, {}), srLabel: lightLabel, title: lightLabel },
+        { value: "system", icon: /* @__PURE__ */ jsx(MonitorGlyph, {}), srLabel: systemLabel, title: systemLabel },
+        { value: "dark", icon: /* @__PURE__ */ jsx(MoonGlyph, {}), srLabel: darkLabel, title: darkLabel }
+      ]
+    }
+  );
+}
+function DensitySwitcher(props) {
+  if (props.value !== void 0) {
+    const { storageKey: _none, ...controlled } = props;
+    return /* @__PURE__ */ jsx(DensityRow, { ...controlled });
+  }
+  const { value: _stored, storageKey = "crewlet_density", ...row } = props;
+  return /* @__PURE__ */ jsx(StoredDensitySwitcher, { ...row, storageKey });
+}
+function StoredDensitySwitcher({
+  storageKey,
+  onChange,
+  ...row
+}) {
+  const [density, choose] = useDensityPreference({ storageKey });
+  return /* @__PURE__ */ jsx(
+    DensityRow,
+    {
+      ...row,
+      value: density,
+      onChange: (next) => {
+        choose(next);
+        onChange?.(next);
+      }
+    }
+  );
+}
+function DensityRow({
+  value,
+  onChange,
+  label = "Density",
+  compactLabel = "Compact",
+  normalLabel = "Normal",
+  comfortableLabel = "Comfortable",
+  compactMark = "S",
+  normalMark = "M",
+  comfortableMark = "L",
+  size = "sm",
+  className
+}) {
+  return /* @__PURE__ */ jsx(
+    SegmentedControl,
+    {
+      label,
+      semantics: "radio",
+      size,
+      className,
+      value,
+      onValueChange: onChange,
+      options: [
+        { value: "compact", label: compactMark, srLabel: compactLabel, title: compactLabel },
+        { value: "normal", label: normalMark, srLabel: normalLabel, title: normalLabel },
+        {
+          value: "comfortable",
+          label: comfortableMark,
+          srLabel: comfortableLabel,
+          title: comfortableLabel
+        }
+      ]
+    }
+  );
+}
+
+export { DensitySwitcher, ThemeSwitcher };

package/dist/{chunk-OFHBK7RI.js → chunk-SJQ546ID.js}

@@ -1,10 +1,10 @@
-import { useListbox, useOptionKeys } from './chunk-GTOUGQQK.js';
+import { useListbox, useOptionKeys } from './chunk-6MU7HNB4.js';
 import { useLayerContainer, viewportBounds, outsideBounds, placePopup, LAYER_GAP, LAYER_REPOSITION_EVENT } from './chunk-7RPGY3JE.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './Select-2X77FSWR.css';
+import './Select-E24U5LBC.css';
 import { forwardRef, useId, useMemo, useState, useRef, useCallback, useEffect, useLayoutEffect } from 'react';
 import { createPortal } from 'react-dom';
-import { KeyboardArrowDownGlyph, CheckGlyph, SearchGlyph } from '@crewlethq/icons/glyphs';
+import { ChevronDownGlyph, CheckGlyph, SearchGlyph } from '@crewlethq/icons/glyphs';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 var same = (a, b) => String(a) === String(b);
@@ -77,6 +77,7 @@ var Select = forwardRef(function Select2({
       className: classes,
       menuClassName,
       size,
+      width,
       align,
       active,
       error,
@@ -138,7 +139,7 @@ var NativeSelect = forwardRef(function NativeSelect2({ id, value, onChange, opti
             ]
           }
         ),
-        /* @__PURE__ */ jsx(KeyboardArrowDownGlyph, { className: "crewlet-select__chevron", size: "sm" })
+        /* @__PURE__ */ jsx(ChevronDownGlyph, { className: "crewlet-select__chevron", size: "sm" })
       ]
     }
   );
@@ -153,6 +154,7 @@ var ListboxSelect = forwardRef(function ListboxSelect2({
   className,
   menuClassName,
   size,
+  width,
   align,
   active,
   error,
@@ -236,6 +238,11 @@ var ListboxSelect = forwardRef(function ListboxSelect2({
     listbox,
     count: flat.length,
     disabled: (index2) => flat[index2]?.disabled === true,
+    // AND NEITHER ARE THE ENDS, for the same reason type-ahead is withheld
+    // below: with a search box on screen those keys are the caret's, and the
+    // query's own start and end are otherwise unreachable — the panel is
+    // portalled, so a pointer cannot place the caret either.
+    ends: !searchable,
     ...searchable ? {} : {
       textOf: (index2) => {
         const option = flat[index2];
@@ -247,6 +254,11 @@ var ListboxSelect = forwardRef(function ListboxSelect2({
     if (!open) return;
     listbox.setActive(keys.opening(flat.findIndex((option) => isChosen(option.value))));
   }, [open]);
+  useEffect(() => {
+    if (!open || listbox.active < 0) return;
+    if (flat[listbox.active]?.disabled !== true) return;
+    listbox.setActive(keys.step(listbox.active, 1));
+  }, [open, flat]);
   useEffect(() => {
     if (open && searchable) search.current?.focus();
   }, [open, searchable]);
@@ -269,27 +281,32 @@ var ListboxSelect = forwardRef(function ListboxSelect2({
     const inHost = container !== document.body;
     const host = inHost ? container.getBoundingClientRect() : viewportBounds();
     const rect = at.getBoundingClientRect();
-    const width = rect.width;
+    const matches = width === "full";
+    box.style.width = matches ? `${rect.width}px` : "";
+    box.style.minWidth = matches ? "" : `${rect.width}px`;
+    const own = box.getBoundingClientRect();
     const local = {
-      x: (align === "right" ? rect.right - width : rect.left) - (inHost ? host.x : 0),
+      x: (align === "right" ? rect.right - own.width : 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 };
     if (outsideBounds(local, whole)) {
-      close(false);
+      close(panel.current?.contains(document.activeElement) ?? false);
       return;
     }
     const spot = placePopup(
       local,
-      { width, height: box.getBoundingClientRect().height },
+      { width: own.width, height: own.height },
       { x: LAYER_GAP, y: LAYER_GAP, width: host.width - 2 * LAYER_GAP, height: host.height - 2 * LAYER_GAP }
     );
+    const applied = matches ? rect.width : void 0;
+    const floor = matches ? void 0 : rect.width;
     setPlace(
-      (was) => was && was.left === spot.left && was.top === spot.top && was.width === width ? was : { left: spot.left, top: spot.top, width }
+      (was) => was && was.left === spot.left && was.top === spot.top && was.width === applied && was.minWidth === floor ? was : { left: spot.left, top: spot.top, width: applied, minWidth: floor }
     );
-  }, [align, close, container]);
+  }, [align, close, container, width]);
   useLayoutEffect(() => {
     if (!open) {
       setPlace(null);
@@ -306,6 +323,9 @@ var ListboxSelect = forwardRef(function ListboxSelect2({
       window.removeEventListener("scroll", onLayout, true);
     };
   }, [open, container, position]);
+  useLayoutEffect(() => {
+    if (open) position();
+  }, [open, flat.length, position]);
   function onKeyDown(event) {
     if (disabled) return;
     if (!open) {
@@ -339,7 +359,7 @@ var ListboxSelect = forwardRef(function ListboxSelect2({
     hasValue = false;
   }
   const listId = listbox.listId;
-  const activeId = open && flat.length > 0 ? listbox.optionId(listbox.active) : void 0;
+  const activeId = open && listbox.active >= 0 ? listbox.optionId(listbox.active) : void 0;
   const comboOnTrigger = !searchable;
   const requiredForAria = ariaRequired ?? required;
   let index = -1;
@@ -388,6 +408,7 @@ var ListboxSelect = forwardRef(function ListboxSelect2({
     {
       ref: (el) => {
         panel.current = el;
+        listbox.panelRef(el);
       },
       className: cx(
         "crewlet-select__menu",
@@ -395,7 +416,7 @@ var ListboxSelect = forwardRef(function ListboxSelect2({
         container !== null && container !== document.body ? "crewlet-select__menu--in-host" : "crewlet-select__menu--fixed",
         menuClassName
       ),
-      style: place ? { left: place.left, top: place.top, width: place.width } : (
+      style: place ? { left: place.left, top: place.top, width: place.width, minWidth: place.minWidth } : (
         // Laid out but not painted, so its own height can be measured
         // before it is placed and no reader sees it in a corner first.
         { visibility: "hidden" }
@@ -430,7 +451,6 @@ var ListboxSelect = forwardRef(function ListboxSelect2({
           {
             ref: (el) => {
               list.current = el;
-              listbox.listRef(el);
             },
             id: listId,
             className: cx("crewlet-listbox", "crewlet-select__list"),
@@ -485,7 +505,7 @@ var ListboxSelect = forwardRef(function ListboxSelect2({
             onKeyDown,
             children: [
               renderTrigger ? renderTrigger(single, { open }) : /* @__PURE__ */ jsx("span", { className: cx("crewlet-select__label", !hasValue && "is-placeholder"), children: label }),
-              /* @__PURE__ */ jsx(KeyboardArrowDownGlyph, { className: "crewlet-select__chevron", size: "sm" })
+              /* @__PURE__ */ jsx(ChevronDownGlyph, { className: "crewlet-select__chevron", size: "sm" })
             ]
           }
         ),

package/dist/{chunk-D35VTV2Z.js → chunk-SV7QAONL.js}

@@ -1,4 +1,4 @@
-import { CopyButton } from './chunk-3QRYCPXQ.js';
+import { CopyButton } from './chunk-OPKIKM35.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './CodeBlock-GYNJ2HI6.css';
 import { forwardRef, useRef, useState, useLayoutEffect } from 'react';

package/dist/{chunk-IAJLHVUA.js → chunk-TIWAHZZ6.js}

@@ -1,4 +1,4 @@
-import { OrgLabel } from './chunk-5C5YMZQU.js';
+import { OrgLabel } from './chunk-WOFOMTGB.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './OrgNode-BT7T2Q2X.css';
 import { jsx, jsxs } from 'react/jsx-runtime';

package/dist/{chunk-2PRH365R.js → chunk-UA7O3KKJ.js}

@@ -1,5 +1,5 @@
 import { cx } from './chunk-ODEQTPFM.js';
-import './Checkbox-VGW26YLQ.css';
+import './Checkbox-BOXQ747I.css';
 import { forwardRef, useId, useRef, useCallback, useEffect } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';