@crewlethq/ui 0.11.0 → 0.13.0

package/dist/ThemeSwatch-4DL457ZB.css

@@ -0,0 +1,256 @@
+/*
+ * A theme's thumbnail.
+ *
+ * EVERY COLOUR IS THE THEME'S OWN, from the custom properties ThemeSwatch sets
+ * on each half (--crewlet-swatch-*), and none is the page's except the
+ * outline, which is the page's hairline because the page is where the
+ * thumbnail sits. Two halves share the box equally: dark, then light.
+ *
+ * IT IS A PICTURE, so forced-colors mode leaves it alone: repainted to the
+ * system's two colours, every theme would draw the same blank box.
+ */
+
+.crewlet-theme-swatch {
+  display: grid;
+  grid-auto-flow: column;
+  grid-auto-columns: minmax(0, 1fr);
+  flex: none;
+  overflow: hidden;
+  border: 1px solid var(--color-border-default);
+  forced-color-adjust: none;
+}
+
+.crewlet-theme-swatch--chip {
+  width: 26px;
+  height: 16px;
+  border-radius: var(--radius-xs);
+}
+
+.crewlet-theme-swatch--card {
+  width: 100%;
+  height: 38px;
+  border-radius: var(--radius-sm);
+}
+
+.crewlet-theme-swatch--pane {
+  width: 100%;
+  aspect-ratio: 4 / 3;
+  border-radius: var(--radius-md);
+}
+
+.crewlet-theme-swatch__half {
+  display: grid;
+  grid-template-columns: 26% minmax(0, 1fr);
+  min-width: 0;
+  background: var(--crewlet-swatch-frame);
+}
+
+/* ── The chip: each palette's frame, with its accent on it ────────────── */
+
+.crewlet-theme-swatch--chip .crewlet-theme-swatch__half {
+  grid-template-columns: none;
+  place-items: center;
+}
+
+.crewlet-theme-swatch__dot {
+  width: 6px;
+  height: 6px;
+  border-radius: var(--radius-circle);
+  background: var(--crewlet-swatch-accent);
+}
+
+/* ── The card: a rail, a sheet, a card on it ──────────────────────────── */
+
+.crewlet-theme-swatch__rail {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  padding: 6px 4px;
+  min-width: 0;
+}
+
+.crewlet-theme-swatch__rail-row {
+  display: block;
+  width: 80%;
+  height: 3px;
+  border-radius: var(--radius-pill);
+  background: var(--crewlet-swatch-muted);
+}
+
+/* The row the reader is on stands on the raised rung, as the rail draws it. */
+.crewlet-theme-swatch__rail-row.is-current {
+  width: 100%;
+  height: 6px;
+  background: var(--crewlet-swatch-raised);
+}
+
+.crewlet-theme-swatch__sheet {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  margin: 3px 3px 3px 0;
+  padding: 3px;
+  border-radius: var(--radius-xs);
+  background: var(--crewlet-swatch-sheet);
+}
+
+.crewlet-theme-swatch__card {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  justify-content: space-between;
+  min-width: 0;
+  padding: 4px;
+  border: 1px solid var(--crewlet-swatch-hairline);
+  border-radius: var(--radius-xs);
+  background: var(--crewlet-swatch-card);
+}
+
+.crewlet-theme-swatch__line {
+  display: block;
+  width: 60%;
+  height: 3px;
+  border-radius: var(--radius-pill);
+  background: var(--crewlet-swatch-text);
+}
+
+/*
+ * THE ACTION GIVES WAY BEFORE IT DISAPPEARS. A narrow thumbnail has less room
+ * than the action and the four states take, so the action narrows to a floor
+ * and the row clips its last states, rather than the action, which is what a
+ * theme is chosen for, shrinking to nothing.
+ */
+.crewlet-theme-swatch__row {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  overflow: hidden;
+}
+
+/* The primary action: the accent's fill. */
+.crewlet-theme-swatch__action {
+  display: block;
+  flex: 0 1 14px;
+  min-width: 6px;
+  height: 6px;
+  margin-right: auto;
+  border-radius: var(--radius-pill);
+  background: var(--crewlet-swatch-accent);
+}
+
+/* The four states, in the order the kit names them. */
+.crewlet-theme-swatch__state {
+  display: block;
+  flex: none;
+  width: 4px;
+  height: 4px;
+  border-radius: var(--radius-circle);
+}
+
+.crewlet-theme-swatch__state--info { background: var(--crewlet-swatch-info); }
+.crewlet-theme-swatch__state--warning { background: var(--crewlet-swatch-warning); }
+.crewlet-theme-swatch__state--danger { background: var(--crewlet-swatch-danger); }
+.crewlet-theme-swatch__state--success { background: var(--crewlet-swatch-success); }
+
+/* ── The pane: the same sketch, large enough to read as a screen ───────── */
+
+.crewlet-theme-swatch--pane .crewlet-theme-swatch__half {
+  grid-template-columns: 26% minmax(0, 1fr);
+}
+
+.crewlet-theme-swatch--pane .crewlet-theme-swatch__rail {
+  gap: 7px;
+  padding: 12px 8px;
+}
+
+.crewlet-theme-swatch--pane .crewlet-theme-swatch__rail-row {
+  height: 5px;
+}
+
+.crewlet-theme-swatch--pane .crewlet-theme-swatch__rail-row.is-current {
+  height: 12px;
+  border: 1px solid var(--crewlet-swatch-hairline);
+  border-radius: var(--radius-xs);
+}
+
+.crewlet-theme-swatch--pane .crewlet-theme-swatch__sheet {
+  gap: 8px;
+  margin: 6px 6px 6px 0;
+  padding: 10px;
+  border-radius: var(--radius-sm);
+}
+
+.crewlet-theme-swatch__title {
+  display: block;
+  flex: none;
+  width: 40%;
+  height: 6px;
+  border-radius: var(--radius-pill);
+  background: var(--crewlet-swatch-text);
+}
+
+.crewlet-theme-swatch--pane .crewlet-theme-swatch__card {
+  flex: none;
+  gap: 7px;
+  justify-content: flex-start;
+  padding: 8px;
+}
+
+.crewlet-theme-swatch__item {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.crewlet-theme-swatch--pane .crewlet-theme-swatch__state {
+  width: 6px;
+  height: 6px;
+}
+
+.crewlet-theme-swatch--pane .crewlet-theme-swatch__line {
+  width: 45%;
+  height: 4px;
+}
+
+.crewlet-theme-swatch__muted {
+  display: block;
+  width: 18%;
+  height: 4px;
+  margin-left: auto;
+  border-radius: var(--radius-pill);
+  background: var(--crewlet-swatch-muted);
+}
+
+.crewlet-theme-swatch__actions {
+  display: flex;
+  gap: 6px;
+  margin-top: auto;
+}
+
+.crewlet-theme-swatch--pane .crewlet-theme-swatch__action {
+  display: grid;
+  flex: none;
+  place-items: center;
+  width: 40%;
+  height: 16px;
+  margin-right: 0;
+  border-radius: var(--radius-xs);
+}
+
+/* The primary action's label, in the colour the theme labels its accent with. */
+.crewlet-theme-swatch__label {
+  display: block;
+  width: 50%;
+  height: 4px;
+  border-radius: var(--radius-pill);
+  background: var(--crewlet-swatch-on-accent);
+}
+
+.crewlet-theme-swatch__secondary {
+  display: block;
+  width: 26%;
+  height: 16px;
+  border: 1px solid var(--crewlet-swatch-hairline);
+  border-radius: var(--radius-xs);
+  background: var(--crewlet-swatch-card);
+}

package/dist/ThemeSwitcher/ThemeSwitcher.d.ts

@@ -31,13 +31,15 @@ export type PreferenceControl<T extends string> = {
     storageKey?: undefined;
 };
 interface ThemeRowProps {
-    /** Names the group. */
+    /** Names the group. Mode by default: the theme is the palette, and this row chooses its light or dark half. */
     label?: string | undefined;
     /** What each choice is called out loud. The glyphs say nothing on their own. */
     lightLabel?: string | undefined;
     systemLabel?: string | undefined;
     darkLabel?: string | undefined;
     size?: 'sm' | 'md' | undefined;
+    /** Equal options filling the width given, so the row draws the same box as a Density row beside it. */
+    fill?: boolean | undefined;
     className?: string | undefined;
 }
 export type ThemeSwitcherProps = ThemeRowProps & PreferenceControl<ThemePreference>;
@@ -64,6 +66,8 @@ interface DensityRowProps {
     normalMark?: string | undefined;
     comfortableMark?: string | undefined;
     size?: 'sm' | 'md' | undefined;
+    /** Equal options filling the width given, so the row draws the same box as a Mode row beside it. */
+    fill?: boolean | undefined;
     className?: string | undefined;
 }
 export type DensitySwitcherProps = DensityRowProps & PreferenceControl<DensityPreference>;

package/dist/ThemeSwitcher/index.js

@@ -1,8 +1,8 @@
-export { DensitySwitcher, ThemeSwitcher } from '../chunk-WEIINZPA.js';
+export { DensitySwitcher, ThemeSwitcher } from '../chunk-SBRE7IML.js';
 export { applyDensity, applyStoredPreferences, applyTheme, resolveTheme, useDensityPreference, useSystemTheme, useThemePreference } from '../chunk-K3OWD7BJ.js';
-import '../chunk-UAQIUSSK.js';
-import '../chunk-EBBAAQDY.js';
-import '../chunk-JHQUT4WJ.js';
+import '../chunk-VYY56AMX.js';
+import '../chunk-26PEPONN.js';
+import '../chunk-4LDTQWS7.js';
 import '../chunk-CBOICT64.js';
 import '../chunk-BHHIIK3M.js';
 import '../chunk-BZFWDIV6.js';

package/dist/ThemeToggle/ThemeToggle.d.ts

@@ -30,7 +30,7 @@ export type ThemeToggleProps = ToggleButtonProps & PreferenceControl<ThemePrefer
  * full `ThemeSwitcher`, which is where a settings screen offers it.
  *
  * NAMED FOR THE ACTION, drawn as the destination. The name changes with the
- * palette ("Switch to the light theme" on a dark page), so a screen reader
+ * mode ("Switch to light mode" on a dark page), so a screen reader
  * hears what a press will do, and the glyph is the palette it goes to: a sun
  * on a dark page, a moon on a light one. It is NOT `aria-pressed`, because
  * neither palette is the "on" state of the other, and a pressed state beside a

package/dist/ThemeToggle/index.js

@@ -1,4 +1,4 @@
-export { ThemeToggle } from '../chunk-ORNOOMVY.js';
+export { ThemeToggle } from '../chunk-6TSZCBID.js';
 import '../chunk-K3OWD7BJ.js';
 import '../chunk-4FQT6ZAY.js';
 import '../chunk-BZFWDIV6.js';

package/dist/TimeWindowPicker/index.js

@@ -1,12 +1,12 @@
-export { DEFAULT_TIME_WINDOW_LABELS, TIME_WINDOW_SPANS, TimeWindowPicker, describeTimeWindow, isTimeWindowSet, parseTimeWindowDuration, resolveTimeWindow, timeWindowMatchesPreset } from '../chunk-HLBRPES3.js';
-import '../chunk-SEFMO2EV.js';
+export { DEFAULT_TIME_WINDOW_LABELS, TIME_WINDOW_SPANS, TimeWindowPicker, describeTimeWindow, isTimeWindowSet, parseTimeWindowDuration, resolveTimeWindow, timeWindowMatchesPreset } from '../chunk-B2CITO6R.js';
+import '../chunk-XFE5W2I4.js';
+import '../chunk-F73MC7EZ.js';
 import '../chunk-FTEJPHBI.js';
-import '../chunk-6MU7HNB4.js';
 import '../chunk-GXQ3B46I.js';
 import '../chunk-OG6CL3EB.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-4FQT6ZAY.js';
-import '../chunk-PDUZO35I.js';
+import '../chunk-O2ZDZZS7.js';
 import '../chunk-7RPGY3JE.js';
 import '../chunk-R25RGPUB.js';
 import '../chunk-BZFWDIV6.js';

package/dist/Toaster/index.js

@@ -1,4 +1,4 @@
-export { ToastProvider, Toaster, useToast } from '../chunk-UG5ZMAXW.js';
+export { ToastProvider, Toaster, useToast } from '../chunk-LELD5KPA.js';
 import '../chunk-7RPGY3JE.js';
 import '../chunk-R25RGPUB.js';
 import '../chunk-BZFWDIV6.js';

package/dist/{Toaster-NVDCEIP5.css → Toaster-KZ7YE2HA.css}

@@ -190,6 +190,7 @@
 .crewlet-toast--danger .crewlet-toast__action-link {
   background: var(--color-feedback-danger);
   border-color: var(--color-feedback-danger);
+  color: var(--color-text-on-danger);
 }
 
 .crewlet-toast--danger .crewlet-toast__action-btn:hover,

package/dist/Tree/index.d.ts

@@ -3,6 +3,6 @@ export type { TreeInput, TreeModel, TypeAheadState } from './model.js';
 export { layoutConnectors, layoutForest, placeGroups } from './layout.js';
 export type { ForestLayout, LayoutGaps, LayoutGroup, LayoutGroupInset, LayoutNode, LayoutRanks, PlacedGroup, PlacedNode, TreeConnector, TreeConnectorShape, } from './layout.js';
 export { treeItemAction, treeStep, useTreeState } from './useTreeState.js';
-export type { TreeItemAction, TreeKeyEvent, TreeState, TreeStep, TreeViewHandle } from './useTreeState.js';
+export type { TreeDefaultExpanded, TreeItemAction, TreeKeyEvent, TreeState, TreeStateOptions, TreeStep, TreeViewHandle, } from './useTreeState.js';
 export { SIZE_EPSILON, useLayoutAnchor, useMeasuredSizes } from './useMeasuredSizes.js';
 export type { MeasuredSizes } from './useMeasuredSizes.js';

package/dist/Tree/index.js

@@ -1 +1 @@
-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 } from '../chunk-S3BCVWTU.js';
+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 } from '../chunk-MY374UUD.js';

package/dist/Tree/useTreeState.d.ts

@@ -35,16 +35,46 @@ export interface TreeState {
      */
     typed(event: TreeKeyEvent, from: string, now: number): string | null | undefined;
 }
+/** Which nodes are open before anybody has opened or closed one. */
+export type TreeDefaultExpanded = 
+/** Every node with children. A chart and an org outline are read whole. */
+'all'
 /**
- * What is collapsed, which node holds the tab stop, and type ahead.
+ * None. A tree whose levels are read on demand, a knowledge base's spaces
+ * say, opens one level at a time: a node that arrived open would ask for
+ * its children the moment it was drawn, and so would theirs.
+ */
+ | 'none';
+export interface TreeStateOptions {
+    /** Which nodes start open while the tree holds its own expansion. `all` by default. */
+    defaultExpanded?: TreeDefaultExpanded | undefined;
+    /**
+     * The open nodes, when the CALLER holds them: to keep them across a visit,
+     * or to read a level the moment it opens. A node in the set that has no
+     * children is ignored rather than refused, since a level still loading has
+     * none yet.
+     */
+    expanded?: ReadonlySet<string> | undefined;
+    /**
+     * The open nodes a toggle, an open or an expand or collapse of everything
+     * has just produced. Called whether or not the caller holds the set, so a
+     * caller that only reads levels on demand need not hold it.
+     */
+    onExpandedChange?: ((expanded: ReadonlySet<string>) => void) | undefined;
+}
+/**
+ * What is open, which node holds the tab stop, and type ahead.
  *
- * COLLAPSED, NOT EXPANDED, IS WHAT IS KEPT: a node nobody has closed is open,
- * which is also what a node an operation just added should be. The tab stop is
- * the node last focused, else the selection, else the first node, and is moved
- * to the nearest visible ancestor when its own node is hidden or gone, so the
- * tree always has exactly one way in.
+ * WHAT IS KEPT IS WHAT WAS TOGGLED, read against the default: under `all` it
+ * is the nodes somebody closed, so a node an operation just added arrives
+ * open, as a chart wants; under `none` it is the nodes somebody opened, so a
+ * level that has just been read arrives closed. A caller that holds the set
+ * itself replaces both. The tab stop is the node last focused, else the
+ * selection, else the first node, and is moved to the nearest visible
+ * ancestor when its own node is hidden or gone, so the tree always has
+ * exactly one way in.
  */
-export declare function useTreeState(forest: readonly TreeInput[], selected: string | null): TreeState;
+export declare function useTreeState(forest: readonly TreeInput[], selected: string | null, { defaultExpanded, expanded: held, onExpandedChange }?: TreeStateOptions): TreeState;
 /** What a navigation key asks of a tree: focus a node, or open or close one. */
 export type TreeStep = {
     readonly focus: string;

package/dist/TreeCanvas/index.js

@@ -1,5 +1,5 @@
-export { TreeCanvas } from '../chunk-5WEVLIB6.js';
-import '../chunk-S3BCVWTU.js';
+export { TreeCanvas } from '../chunk-RZ7RGECB.js';
+import '../chunk-MY374UUD.js';
 import '../chunk-2PZBIHRV.js';
 import '../chunk-53DVJCVW.js';
 import '../chunk-OG6CL3EB.js';

package/dist/TreeGrid/TreeGrid.d.ts

@@ -29,7 +29,7 @@
  * Ported from the generic half of the engine dashboard's org builder outline.
  */
 import { type KeyboardEvent, type MouseEvent, type ReactNode, type Ref } from 'react';
-import { type TreeInput, type TreeItemAction, type TreeViewHandle } from '../Tree/index.js';
+import { type TreeDefaultExpanded, type TreeInput, type TreeItemAction, type TreeViewHandle } from '../Tree/index.js';
 export interface TreeGridColumn {
     key: string;
     /** The column's name. */
@@ -135,8 +135,28 @@ export interface TreeGridProps {
     onSelect?: ((id: string) => void) | undefined;
     /** Sets `aria-readonly`: the rows can be read and navigated but not edited. */
     readOnly?: boolean | undefined;
+    /**
+     * Which rows start open while the grid holds its own expansion: every one
+     * (the default), or none, for a hierarchy whose levels are read on demand.
+     */
+    defaultExpanded?: TreeDefaultExpanded | undefined;
+    /**
+     * The open rows, when the caller holds them: to keep them across a visit,
+     * or to read a level the moment it opens. A row in the set with no children
+     * yet is ignored, so a level still loading can be held open.
+     */
+    expanded?: ReadonlySet<string> | undefined;
+    /** The open rows a toggle has just produced, whether or not the caller holds them. */
+    onExpandedChange?: ((expanded: ReadonlySet<string>) => void) | undefined;
+    /**
+     * The column names are READ BUT NOT SEEN: an outline whose cells say what
+     * they are in the sight of them (a title, a face, a time) and want no
+     * header band above them. A screen reader still hears every cell's column,
+     * because the header row is still there; only its band is not drawn.
+     */
+    headless?: boolean | undefined;
     labels?: Partial<TreeGridLabels> | undefined;
     ref?: Ref<TreeViewHandle> | undefined;
     className?: string | undefined;
 }
-export declare function TreeGrid({ label, columns, rows: forest, renderCell, cellHasControl, onRowKey, onRowKeyDown, hasRowMenu, addRow, selectedId, onSelect, readOnly, labels, ref, className, }: TreeGridProps): import("react").JSX.Element;
+export declare function TreeGrid({ label, columns, rows: forest, renderCell, cellHasControl, onRowKey, onRowKeyDown, hasRowMenu, addRow, selectedId, onSelect, readOnly, defaultExpanded, expanded: held, onExpandedChange, headless, labels, ref, className, }: TreeGridProps): import("react").JSX.Element;

package/dist/TreeGrid/index.js

@@ -1,5 +1,5 @@
-export { TreeGrid } from '../chunk-MCPKHYMC.js';
-import '../chunk-S3BCVWTU.js';
+export { TreeGrid } from '../chunk-6LXMLQUM.js';
+import '../chunk-MY374UUD.js';
 import '../chunk-53DVJCVW.js';
 import '../chunk-4FQT6ZAY.js';
 import '../chunk-7RPGY3JE.js';

package/dist/{TreeGrid-NSW7VMOX.css → TreeGrid-FBX3MSJA.css}

@@ -126,6 +126,25 @@
   outline-offset: var(--size-focus-ring-inset-offset);
 }
 
+/*
+ * A HEADLESS GRID keeps its header row for a screen reader and draws no band:
+ * the row is taken out of the layout the way VisuallyHidden takes text out,
+ * and the first row of the body loses the hairline that would otherwise sit
+ * under the frame's own edge as a second line.
+ */
+.crewlet-tree-grid--headless .crewlet-tree-grid__head {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+
+.crewlet-tree-grid--headless .crewlet-tree-grid__head + [role='rowgroup'] > .crewlet-tree-grid__row:first-child {
+  border-top: 0;
+}
+
 /* The selection is where the reader is, so it takes the accent. */
 .crewlet-tree-grid__row[aria-selected='true'] {
   box-shadow: inset 2px 0 0 var(--color-brand-accent);

package/dist/{chunk-EBBAAQDY.js → chunk-26PEPONN.js}

@@ -1,4 +1,4 @@
-import { tabId } from './chunk-JHQUT4WJ.js';
+import { tabId } from './chunk-4LDTQWS7.js';
 import { useRoving, tabStop } from './chunk-CBOICT64.js';
 import { Count } from './chunk-BHHIIK3M.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
@@ -15,6 +15,7 @@ function SegmentedControl({
   size = "md",
   layout = "pill",
   trailing,
+  fill = false,
   className = "",
   semantics,
   panelId,
@@ -55,6 +56,7 @@ function SegmentedControl({
         "crewlet-segmented",
         cards && "crewlet-segmented--cards",
         !cards && layout === "chips" && "crewlet-segmented--chips",
+        fill && !cards && layout === "pill" && "crewlet-segmented--fill",
         className
       ),
       role: radio ? "radiogroup" : "tablist",

package/dist/{chunk-HV6IZFBK.js → chunk-4FFHJBEN.js}

@@ -1,6 +1,6 @@
-import { HuePicker } from './chunk-K5Q2DK3P.js';
+import { HuePicker } from './chunk-NXDEPUVG.js';
 import { NODE_HUE_NAMES } from './chunk-AYKXMIOR.js';
-import { Popover } from './chunk-PDUZO35I.js';
+import { Popover } from './chunk-O2ZDZZS7.js';
 import { CharacterPicker } from './chunk-YXMCUKFI.js';
 import { Avatar } from './chunk-HI6Q2UXQ.js';
 import { cx } from './chunk-ODEQTPFM.js';

package/dist/{chunk-JHQUT4WJ.js → chunk-4LDTQWS7.js}

@@ -2,7 +2,7 @@ import { useRoving, tabStop } from './chunk-CBOICT64.js';
 import { Count } from './chunk-BHHIIK3M.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './Tabs-5I5Q5KKM.css';
+import './Tabs-ITJYJFMU.css';
 import React, { useRef, useLayoutEffect } from 'react';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 

package/dist/{chunk-ELZKOVEC.js → chunk-4Y7WKXAW.js}

@@ -1,5 +1,5 @@
+import { useListbox } from './chunk-F73MC7EZ.js';
 import { Input } from './chunk-FTEJPHBI.js';
-import { useListbox } from './chunk-6MU7HNB4.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './Combobox-4FUVYIE7.css';
 import { forwardRef, useId, useMemo, useRef, useCallback } from 'react';

package/dist/{chunk-MCPKHYMC.js → chunk-6LXMLQUM.js}

@@ -1,11 +1,11 @@
-import { useTreeState, treeExpandable, treeLevel, treePosInSet, treeSetSize, treeItemAction, treePrevious, treeNext, treeStep } from './chunk-S3BCVWTU.js';
+import { useTreeState, treeExpandable, treeLevel, treePosInSet, treeSetSize, treeItemAction, treePrevious, treeNext, treeStep } from './chunk-MY374UUD.js';
 import { LayerNodeBridge } from './chunk-53DVJCVW.js';
 import { IconButton } from './chunk-4FQT6ZAY.js';
 import { LayerHost, LAYER_REPOSITION_EVENT } from './chunk-7RPGY3JE.js';
 import { focusables } from './chunk-R25RGPUB.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './TreeGrid-NSW7VMOX.css';
+import './TreeGrid-FBX3MSJA.css';
 import { useState, useRef, useCallback, useLayoutEffect, useImperativeHandle } from 'react';
 import { ChevronRightGlyph } from '@crewlethq/icons/glyphs';
 import { jsx, jsxs } from 'react/jsx-runtime';
@@ -17,6 +17,14 @@ var LABELS = {
 function controlIn(cell) {
   return focusables(cell).find((el) => !el.closest('[aria-hidden="true"]')) ?? null;
 }
+var TEXT_INPUTS = /* @__PURE__ */ new Set(["text", "search", "url", "email", "tel", "password", "number"]);
+function caretKey(target, key) {
+  const lines = target instanceof HTMLTextAreaElement || target.isContentEditable;
+  const field = lines || target instanceof HTMLInputElement && TEXT_INPUTS.has(target.type);
+  if (!field) return false;
+  if (key === "ArrowLeft" || key === "ArrowRight" || key === "Home" || key === "End") return true;
+  return lines && (key === "ArrowUp" || key === "ArrowDown");
+}
 function TreeGrid({
   label,
   columns,
@@ -30,12 +38,16 @@ function TreeGrid({
   selectedId = null,
   onSelect,
   readOnly,
+  defaultExpanded,
+  expanded: held,
+  onExpandedChange,
+  headless = false,
   labels,
   ref,
   className
 }) {
   const text = { ...LABELS, ...labels };
-  const tree = useTreeState(forest, selectedId);
+  const tree = useTreeState(forest, selectedId, { defaultExpanded, expanded: held, onExpandedChange });
   const { model, expanded, rows, active, setActive, toggle } = tree;
   const [column, setColumn] = useState(null);
   const [menuFor, setMenuFor] = useState(null);
@@ -128,6 +140,7 @@ function TreeGrid({
       const width = other ? other.cells : columns.length;
       focusAt(next, col === null ? null : Math.min(col, width));
     };
+    if (col !== null && caretKey(target, event.key)) return;
     if (col !== null) {
       switch (event.key) {
         case "ArrowRight":
@@ -197,7 +210,7 @@ function TreeGrid({
     setMenuOpen: (id, open) => setMenuFor((was) => open ? id : was === id ? null : was)
   };
   const template = columns.map((one) => one.width ?? "minmax(0, 1fr)").join(" ");
-  return /* @__PURE__ */ jsx("div", { className: cx("crewlet-tree-grid", className), children: /* @__PURE__ */ jsxs(LayerHost, { className: "crewlet-tree-grid__layer", children: [
+  return /* @__PURE__ */ jsx("div", { className: cx("crewlet-tree-grid", headless && "crewlet-tree-grid--headless", className), children: /* @__PURE__ */ jsxs(LayerHost, { className: "crewlet-tree-grid__layer", children: [
     /* @__PURE__ */ jsx("div", { className: "crewlet-tree-grid__scroller", onScroll, children: /* @__PURE__ */ jsxs(
       "div",
       {

package/dist/{chunk-3UK4VFSK.js → chunk-6NIZCQUM.js}

@@ -1,6 +1,6 @@
 import { AVATAR_SIZES, Avatar } from './chunk-HI6Q2UXQ.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './Avatar-QHYOFID3.css';
+import './Avatar-BPJ36QZR.css';
 import './AvatarStack-GEJBNV7E.css';
 import { jsxs, jsx } from 'react/jsx-runtime';
 

package/dist/{chunk-ORNOOMVY.js → chunk-6TSZCBID.js}

@@ -32,8 +32,8 @@ function StoredThemeToggle({
 function ToggleButton({
   value,
   onChange,
-  toLightLabel = "Switch to the light theme",
-  toDarkLabel = "Switch to the dark theme",
+  toLightLabel = "Switch to light mode",
+  toDarkLabel = "Switch to dark mode",
   size = "sm",
   variant = "ghost",
   className

package/dist/{chunk-ZMJHK7DR.js → chunk-75WOCYGC.js}

@@ -1,5 +1,5 @@
-import { TreeGrid } from './chunk-MCPKHYMC.js';
-import { createTreeModel, treeParent } from './chunk-S3BCVWTU.js';
+import { TreeGrid } from './chunk-6LXMLQUM.js';
+import { createTreeModel, treeParent } from './chunk-MY374UUD.js';
 import { OrgLabel } from './chunk-6OF2DBKY.js';
 import { AddPill } from './chunk-74WGARJE.js';
 import { IconButton } from './chunk-4FQT6ZAY.js';