@crewlethq/ui 0.12.0 → 0.14.0

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

@@ -1,98 +1,98 @@
 /*
- * The toast stack.
+ * The toast stack, drawn as the first release drew it (24a60c3): a dark strip
+ * on the page's deepest ground with the large shadow and the rim light, a
+ * 12px corner, the variant said by its mark alone, never a flood of its hue,
+ * and the countdown as a wash behind the words that drains from the right.
  *
- * ITS SURFACE IS A THEME TOKEN. 0.2.0 mixed the subtle surface 60 percent with
- * black, which is a dark strip whatever palette is painting: on a light page
- * the toast's own text measured 1.56:1 against it.
+ * IN TOKENS RATHER THAN ITS LITERALS, so it follows every theme. The strip is
+ * --color-surface-background: the first release mixed the panel with black,
+ * which read as a dark bar on a light page, where its words measured 1.56:1.
+ * The marks are the feedback INK steps, the soft moss, amber and rose it drew,
+ * measured as text on every theme. The washes are the feedback SOFT steps.
  *
- * THE DRAIN IS A RULE ALONG THE FOOT, not a wash behind the words. A tinted
- * layer under the message is a composite nothing measured, and it moves while
- * the message is being read; a 2px bar at the edge says the same thing and
- * touches no text at all. It is decoration either way: the dismissal is a
- * timer now, so a reader who asks for reduced motion still gets the toast
- * taken away.
+ * The wash is decoration: the dismissal is a timer, so a reader who asks for
+ * reduced motion gets no wash and still gets the toast taken away.
  */
-
 .crewlet-toaster {
   position: fixed;
   z-index: var(--z-index-toast);
   display: flex;
   flex-direction: column;
-  gap: var(--spacing-2);
-  /* The engine's 420px, held under the viewport at the width a phone has.
-     The strip is one or two lines of 13px text and an action; at 380 the
-     commonest failure message wrapped onto a third. */
-  width: min(420px, calc(100vw - var(--spacing-9)));
+  gap: calc(var(--spacing-2) + var(--spacing-1) / 2);
+  width: min(380px, calc(100vw - 2 * var(--spacing-6)));
   /* The stack itself takes no presses, so the screen under it stays live
      while nothing is up; each toast takes them back for its own strip. */
   pointer-events: none;
 }
 
 .crewlet-toaster--bottom-right {
-  bottom: var(--spacing-4);
-  right: var(--spacing-4);
+  bottom: var(--spacing-6);
+  right: var(--spacing-6);
 }
 
 .crewlet-toaster--top-right {
-  top: var(--spacing-4);
-  right: var(--spacing-4);
+  top: var(--spacing-6);
+  right: var(--spacing-6);
 }
 
 .crewlet-toaster--bottom-left {
-  bottom: var(--spacing-4);
-  left: var(--spacing-4);
+  bottom: var(--spacing-6);
+  left: var(--spacing-6);
 }
 
 .crewlet-toaster--top-left {
-  top: var(--spacing-4);
-  left: var(--spacing-4);
+  top: var(--spacing-6);
+  left: var(--spacing-6);
 }
 
 .crewlet-toast {
+  /* The mark and the wash are the two places a variant spends its hue. */
   --crewlet-toast-mark: var(--color-text-secondary);
-  /*
-   * The boundary and the two inks are variables so a tone can spend them. Only
-   * one does: a failure, which is the engine's one toned strip.
-   */
-  --crewlet-toast-line: var(--color-border-default);
-  --crewlet-toast-ink: var(--color-text-primary);
-  --crewlet-toast-ink-quiet: var(--color-text-secondary);
+  --crewlet-toast-wash: var(--color-surface-pressed);
+  /* 14px at the normal density, and the corner the dismiss sits in beside it. */
+  --crewlet-toast-inset: calc(var(--spacing-3) + var(--spacing-1) / 2);
 
   pointer-events: auto;
   position: relative;
   display: flex;
   align-items: flex-start;
-  /* The panel's own gap and padding, and the panel's own surface: the engine
-     draws a toast as a small panel that happens to float, so it sits on the
-     same ground, the same hairline and the same corner as everything the
-     screen behind it is made of. */
-  gap: var(--spacing-2);
-  padding: var(--spacing-2) var(--spacing-8) var(--spacing-2) var(--spacing-3);
-  background: var(--color-surface-subtle);
-  border: 1px solid var(--crewlet-toast-line);
-  border-radius: var(--radius-md);
-  box-shadow: var(--shadow-md);
-  color: var(--crewlet-toast-ink);
+  gap: var(--spacing-3);
+  padding: var(--crewlet-toast-inset) calc(var(--spacing-7) + var(--spacing-1) * 1.5) var(--crewlet-toast-inset)
+    var(--crewlet-toast-inset);
+  background: var(--color-surface-background);
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-lg);
+  /* The large shadow and the rim light, both from tokens that are a shadow in
+     every palette: --shadow-hairline is `none` in light, and a `none` inside a
+     list drops the whole declaration. */
+  box-shadow: var(--shadow-xl), var(--shadow-rim-lit);
+  color: var(--color-text-primary);
   font-family: var(--font-family-sans);
   font-size: var(--font-size-compact);
-  line-height: var(--font-line-height-normal);
+  line-height: var(--font-line-height-body);
   letter-spacing: var(--font-letter-spacing-snug);
   overflow: hidden;
-  animation: crewlet-toast-in var(--motion-duration-base) var(--motion-easing-emphasized);
+  animation: crewlet-toast-in var(--motion-duration-slow) var(--motion-easing-emphasized);
 }
 
 @keyframes crewlet-toast-in {
   from {
     opacity: 0;
-    transform: translateY(6px);
+    transform: translateX(var(--spacing-4));
   }
-
   to {
     opacity: 1;
-    transform: translateY(0);
+    transform: translateX(0);
   }
 }
 
+/* The words sit over the wash: every child is raised, and the dismiss and the
+   wash below take their own places back. */
+.crewlet-toast > * {
+  position: relative;
+  z-index: var(--z-index-raised);
+}
+
 .crewlet-toast__icon {
   display: inline-flex;
   flex: none;
@@ -100,34 +100,26 @@
   color: var(--crewlet-toast-mark);
 }
 
-/* The mark is the tone's FILL step, which is measured at 3:1 as a mark. The
-   words beside it stay in the primary ink: a coloured sentence on a coloured
-   strip is the pair that has to be measured, and this one does not exist. */
+/*
+ * A VARIANT IS ITS MARK AND ITS WASH. The words stay in the strip's own inks
+ * and the edge stays the hairline, so a failure is a rose mark on a faint rose
+ * wash rather than a red strip: the outcome is said by the glyph and the title,
+ * and the sentence beside them is read in the ink every sentence is read in.
+ * Information is the neutral mark on the neutral wash.
+ */
 .crewlet-toast--success {
-  --crewlet-toast-mark: var(--color-feedback-success);
+  --crewlet-toast-mark: var(--color-feedback-success-ink);
+  --crewlet-toast-wash: var(--color-feedback-success-soft);
 }
 
 .crewlet-toast--warning {
-  --crewlet-toast-mark: var(--color-feedback-warning);
+  --crewlet-toast-mark: var(--color-feedback-warning-ink);
+  --crewlet-toast-wash: var(--color-feedback-warning-soft);
 }
 
-/*
- * A FAILURE IS THE ONE TONED STRIP. It is the outcome that is news rather than
- * confirmation and the one that does not take itself away, so the engine gives
- * it the hue twice: the fill step on the edge, where 3:1 is the floor a
- * boundary has to clear, and the INK step on every word, which is the measured
- * text pair on this surface. Never the fill behind a word: that is the swap
- * the whole soft-and-ink split exists to stop.
- */
 .crewlet-toast--danger {
-  --crewlet-toast-mark: var(--color-feedback-danger);
-  --crewlet-toast-line: var(--color-feedback-danger);
-  --crewlet-toast-ink: var(--color-feedback-danger-ink);
-  --crewlet-toast-ink-quiet: var(--color-feedback-danger-ink);
-}
-
-.crewlet-toast--info {
-  --crewlet-toast-mark: var(--color-feedback-info);
+  --crewlet-toast-mark: var(--color-feedback-danger-ink);
+  --crewlet-toast-wash: var(--color-feedback-danger-soft);
 }
 
 /* A usage limit notice is the application's own variant: it paints the glyph
@@ -149,12 +141,12 @@
 }
 
 .crewlet-toast__message {
-  color: var(--crewlet-toast-ink-quiet);
+  color: var(--color-text-secondary);
   overflow-wrap: anywhere;
 }
 
 .crewlet-toast__actions {
-  margin-top: var(--spacing-2);
+  margin-top: calc(var(--spacing-2) + var(--spacing-1) / 2);
   display: flex;
   gap: var(--spacing-2);
 }
@@ -186,10 +178,12 @@
   border-color: var(--color-brand-accent-hover);
 }
 
+/* A failure's one filled thing is the way out of it. */
 .crewlet-toast--danger .crewlet-toast__action-btn,
 .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,
@@ -206,8 +200,9 @@
 }
 
 /* The dismiss sits absolute in the corner so a multi-line message flows
-   under it rather than around it. 24px square: the smallest target
-   WCAG 2.2 accepts. */
+   under it rather than around it, and after the body in the document, so it
+   is drawn over the words at the same raised step. 24px square: the smallest
+   target WCAG 2.2 accepts. */
 .crewlet-toast__dismiss {
   position: absolute;
   top: var(--spacing-2);
@@ -221,10 +216,7 @@
   border: 0;
   border-radius: var(--radius-sm);
   background: transparent;
-  /* The strip's own quiet ink rather than the neutral tertiary step, so the
-     close on a failure is part of the failure rather than the one grey thing
-     inside it. */
-  color: var(--crewlet-toast-ink-quiet);
+  color: var(--color-text-tertiary);
   cursor: pointer;
   transition:
     background var(--motion-duration-fast) var(--motion-easing-default),
@@ -232,25 +224,28 @@
 }
 
 .crewlet-toast__dismiss:hover {
-  background: var(--color-surface-hover);
-  color: var(--crewlet-toast-ink);
+  background: var(--color-surface-elevated);
+  color: var(--color-text-primary);
 }
 
+/*
+ * THE COUNTDOWN IS A WASH BEHIND THE WORDS, the variant's soft step over the
+ * whole strip, draining from the right as the time runs out. It sits under
+ * every raised child, and it is the timer's picture, not the timer.
+ */
 .crewlet-toast__progress {
   position: absolute;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  height: 2px;
+  inset: 0;
+  z-index: var(--z-index-base);
   transform-origin: left center;
-  background: var(--crewlet-toast-mark);
+  background: var(--crewlet-toast-wash);
   pointer-events: none;
   animation-name: crewlet-toast-drain;
   animation-timing-function: linear;
   animation-fill-mode: forwards;
 }
 
-/* Paused by the class rather than by :hover, so the bar and the timer that
+/* Paused by the class rather than by :hover, so the wash and the timer that
    actually dismisses are stopped by the same event. */
 .crewlet-toast__progress.is-paused {
   animation-play-state: paused;
@@ -260,7 +255,6 @@
   from {
     transform: scaleX(1);
   }
-
   to {
     transform: scaleX(0);
   }
@@ -286,8 +280,8 @@
 
 /*
  * The strip still arrives and still goes; it just does not slide, and the
- * countdown bar holds still. The timer is untouched: a reader who asked for
- * less motion did not ask to be left with a toast that never leaves.
+ * wash is not drawn. The timer is untouched: a reader who asked for less
+ * motion did not ask to be left with a toast that never leaves.
  */
 @media (prefers-reduced-motion: reduce) {
   .crewlet-toast {

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-GOUKOXJK.js → chunk-3VVKJ7AZ.js}

@@ -1,10 +1,10 @@
-import { useCardHeaderSlot } from './chunk-AV2DXAEL.js';
 import { Menu } from './chunk-TFH6SYWB.js';
 import { EmptyValue } from './chunk-EUCC37WY.js';
-import { Modal } from './chunk-TEEJSTFG.js';
+import { Checkbox } from './chunk-YCTMKKRA.js';
+import { Modal } from './chunk-TFMJH2E6.js';
 import { useClipboard } from './chunk-5VNUYO76.js';
 import { Button } from './chunk-OG6CL3EB.js';
-import { Checkbox } from './chunk-YCTMKKRA.js';
+import { useCardHeaderSlot } from './chunk-AV2DXAEL.js';
 import { IconButton } from './chunk-4FQT6ZAY.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';

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-GXYNEDNA.js → chunk-4Y7WKXAW.js}

@@ -1,4 +1,4 @@
-import { useListbox } from './chunk-6MU7HNB4.js';
+import { useListbox } from './chunk-F73MC7EZ.js';
 import { Input } from './chunk-FTEJPHBI.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './Combobox-4FUVYIE7.css';

package/dist/{chunk-IINFVK3W.js → chunk-5IXMLWGW.js}

@@ -1,15 +1,15 @@
-import { Toolbar } from './chunk-PGRPNDWM.js';
 import { PageHeader } from './chunk-HOXGBLEY.js';
 import { RelativeTime } from './chunk-3CZ7XAVY.js';
-import { DateTimePicker } from './chunk-JCNUQ3US.js';
-import { useListbox, useOptionKeys } from './chunk-6MU7HNB4.js';
+import { Toolbar } from './chunk-PGRPNDWM.js';
+import { DataTable } from './chunk-3VVKJ7AZ.js';
+import { Menu } from './chunk-TFH6SYWB.js';
+import { DateTimePicker } from './chunk-AXNQCAFC.js';
+import { useListbox, useOptionKeys } from './chunk-F73MC7EZ.js';
 import { Kbd } from './chunk-SMBKXWML.js';
 import { Input } from './chunk-FTEJPHBI.js';
-import { DataTable } from './chunk-GOUKOXJK.js';
-import { Menu } from './chunk-TFH6SYWB.js';
 import { Button } from './chunk-OG6CL3EB.js';
 import { IconButton } from './chunk-4FQT6ZAY.js';
-import { Popover } from './chunk-PDUZO35I.js';
+import { Popover } from './chunk-O2ZDZZS7.js';
 import { Count } from './chunk-BHHIIK3M.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';

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';