@crewlethq/ui 0.4.3 → 0.5.0

package/dist/{Tag-VNZEYLB6.css → Tag-GBE7LQJP.css}

@@ -1,5 +1,5 @@
 /*
- * The tag: a small pill naming a state, a phase or a value.
+ * The tag: a small pill naming a state, a category or a value.
  *
  * THREE VARIABLES CARRY EVERY VARIANT. A tag is its tone's `soft` tint under
  * its tone's `ink`, with the `line` step as the boundary it grows when it can
@@ -19,39 +19,49 @@
 
 .crewlet-tag {
   /*
-   * THE ENGINE'S BADGE. Its line box is 11px at the document's 1.5 leading
-   * plus a pixel of padding and a pixel of border on each side, which lands on
-   * 20.5px; the step below is the whole pixel that renders, and it scales with
-   * density the way every size token does.
+   * THE APPROVED DESIGN'S PILL: 22px tall with fully round ends, the caption
+   * step at the medium weight, and 9px of room inside each end, which is the
+   * step a rounded end eats before the first letter clears it.
    *
    * The height is a STEP and the floor is separate, because the two answer
-   * different questions. A tag that only labels takes the engine's geometry
-   * exactly. A tag that ACTS is a pointer target, and 20px fails WCAG 2.2, so
-   * it takes the 24px floor as well: the engine draws its actionable badge at
-   * the inert one's height, which is the one place its look and the target
-   * rule disagree. Nothing else about the pill changes, so a row of tags still
-   * reads as one set.
+   * different questions. A tag that only labels takes the design's geometry
+   * exactly. A tag that ACTS is a pointer target, and 22px fails WCAG 2.2, so
+   * it takes the 24px floor as well. Nothing else about the pill changes, so a
+   * row of tags still reads as one set.
+   *
+   * THE NEUTRAL PILL IS THE RAISED RUNG under the secondary ink, the design's
+   * quiet pill: a category, a count, a word that is not a state. Every other
+   * variant below is its tone's soft tint under its ink.
+   *
+   * The boundary at rest is `--crewlet-tag-edge`: transparent for a tinted
+   * pill, whose hue already separates it from any neutral ground, and the
+   * strong border step for the neutral one (see its rule below).
    */
-  --crewlet-tag-height: calc(20px * var(--density, 1));
+  --crewlet-tag-height: calc(22px * var(--density, 1));
   --crewlet-tag-floor: 0px;
-  --crewlet-tag-fill: var(--color-surface-inset);
+  /* The design's 9px inside each round end: two steps and a quarter, so it
+     follows the density with every other gap. The remove control and the
+     press half of a split pill read it too, to reach the pill's own ends. */
+  --crewlet-tag-pad: calc(var(--spacing-2) + var(--spacing-1) / 4);
+  --crewlet-tag-fill: var(--color-surface-elevated);
   --crewlet-tag-ink: var(--color-text-secondary);
   --crewlet-tag-line: var(--color-border-hover);
+  --crewlet-tag-edge: transparent;
 
   display: inline-flex;
   align-items: center;
-  gap: var(--spacing-1);
+  /* The design's 6px between a dot or a glyph and the word: a step and a
+     half. */
+  gap: calc(var(--spacing-1) * 1.5);
   height: max(var(--crewlet-tag-height), var(--crewlet-tag-floor));
-  padding: 0 var(--spacing-2);
-  border: 1px solid transparent;
-  border-radius: var(--radius-xs);
+  padding: 0 var(--crewlet-tag-pad);
+  border: 1px solid var(--crewlet-tag-edge);
+  border-radius: var(--radius-pill);
   background: var(--crewlet-tag-fill);
   color: var(--crewlet-tag-ink);
   font-family: var(--font-family-sans);
-  font-size: var(--font-size-2xs);
+  font-size: var(--font-size-xs);
   font-weight: var(--font-weight-medium);
-  /* The engine tracks the badge a hundredth of an em open, which is the
-     normal step at this size: a hundredth of 11px is a tenth of a pixel. */
   letter-spacing: var(--font-letter-spacing-normal);
   line-height: 1;
   /* A tag is an atomic token: its label never breaks across lines inside the
@@ -104,53 +114,54 @@
 /* ── sizes ─────────────────────────────────────────────────────────────── */
 
 /*
- * THREE HEIGHTS OF ONE BADGE. The engine draws a single pill and spends its
+ * THREE HEIGHTS OF ONE PILL. The design draws a single pill and spends its
  * variation on tone rather than on size, so the steps here differ by how much
- * room the pill takes and not by what it is: the type, the radius, the weight
- * and the tracking are the engine's at every one of them.
+ * room the pill takes and not by what it is: the radius, the weight and the
+ * tracking are the design's at every one of them.
  *
- * xs is an 18px pill and is NON-INTERACTIVE for that reason: it is under the
- * 24px target floor, and the component refuses a press at this step. It is for
- * a mark inside a dense row, where the label is still the carrier.
+ * xs is the design's 18px count pill, the one a rail row carries, and is
+ * NON-INTERACTIVE for that reason: it is under the 24px target floor, and the
+ * component refuses a press at this step. It is for a mark inside a dense
+ * row, where the label is still the carrier, and it takes the micro step, the
+ * design's 10.5px at the scale's floor.
  *
  * EVERY STEP SCALES WITH DENSITY, which is not decoration: written as a flat
- * 18px, this one stayed put while the badge above it came down to
- * 20 x 0.82 = 16.4px, so the dense mark rendered TALLER than the badge it is
- * meant to sit inside a row of. A step that does not move with the rest of the
- * scale is a step that overtakes one of its neighbours at some density.
+ * 18px, this one stayed put while the pill above it came down with the
+ * density, so the dense mark rendered TALLER than the pill it is meant to sit
+ * inside a row of. A step that does not move with the rest of the scale is a
+ * step that overtakes one of its neighbours at some density.
  */
 .crewlet-tag--xs {
   --crewlet-tag-height: calc(18px * var(--density, 1));
-  padding: 0 var(--spacing-1);
-  gap: 3px;
+  --crewlet-tag-pad: calc(var(--spacing-1) * 1.5);
+  gap: var(--spacing-1);
+  font-size: var(--font-size-2xs);
 }
 
-/* The engine's badge, and the default. */
+/* The design's pill, and the default. */
 .crewlet-tag--sm {
-  --crewlet-tag-height: calc(20px * var(--density, 1));
+  --crewlet-tag-height: calc(22px * var(--density, 1));
 }
 
 /* The md step is a small control's own height, so a tag and a small button in
-   one toolbar sit on the same baseline. One type step up with it: 11px inside
-   a 28px pill reads as a label that lost its box. */
+   one toolbar sit on the same line. */
 .crewlet-tag--md {
   --crewlet-tag-height: var(--size-control-sm);
-  font-size: var(--font-size-xs);
 }
 
 /*
  * A TAG THAT ACTS CLEARS 24px, at every density and every step. Last among the
  * steps so it is the floor whichever one is drawn, and a floor rather than a
- * height so the md step keeps its 28px.
+ * height so the md step keeps its 26px.
  */
 .crewlet-tag--acts {
   --crewlet-tag-floor: max(24px, calc(24px * var(--density, 1)));
 }
 
-/* One step down from the sans, where there is a step to take: a mono face
-   draws larger than the sans at the same size, and a machine value beside a
-   word has to read as the same line. At the two smaller steps the sans is
-   already at the bottom of the scale and the mono stays beside it. */
+/* One step down from the sans: a mono face draws larger than the sans at the
+   same size, and a machine value beside a word has to read as the same line.
+   At xs the sans is already at the bottom of the scale and the mono stays
+   beside it. */
 .crewlet-tag--monospace .crewlet-tag__label {
   font-family: var(--font-family-mono);
   font-size: var(--font-size-2xs);
@@ -188,43 +199,6 @@
   --crewlet-tag-line: var(--color-brand-accent-soft-strong);
 }
 
-/*
- * The phase family has a soft step and no line step, because nothing else in
- * the system needed a phase boundary. The ink is the boundary here: it is the
- * same hue at a strength a 1px rule can be seen at, and a border is not text,
- * so the rule that an ink step is never a BACKGROUND is untouched.
- *
- * A PHASE IS SET IN THE MICRO-LABEL REGISTER, uppercase and tracked open,
- * where a state is set in the badge's own. Phase is the one categorical
- * identity the product spends colour on outside a chart, and it is what a
- * reader follows across four screens; the second register is what separates it
- * at a glance from the state badge sitting beside it on the same row.
- */
-.crewlet-tag--phase-onboarding,
-.crewlet-tag--phase-execute,
-.crewlet-tag--phase-review {
-  letter-spacing: var(--font-letter-spacing-wide);
-  text-transform: uppercase;
-}
-
-.crewlet-tag--phase-onboarding {
-  --crewlet-tag-fill: var(--color-phase-onboarding-soft);
-  --crewlet-tag-ink: var(--color-phase-onboarding-ink);
-  --crewlet-tag-line: var(--color-phase-onboarding-ink);
-}
-
-.crewlet-tag--phase-execute {
-  --crewlet-tag-fill: var(--color-phase-execute-soft);
-  --crewlet-tag-ink: var(--color-phase-execute-ink);
-  --crewlet-tag-line: var(--color-phase-execute-ink);
-}
-
-.crewlet-tag--phase-review {
-  --crewlet-tag-fill: var(--color-phase-review-soft);
-  --crewlet-tag-ink: var(--color-phase-review-ink);
-  --crewlet-tag-line: var(--color-phase-review-ink);
-}
-
 /* ── appearance ────────────────────────────────────────────────────────── */
 
 /*
@@ -237,6 +211,31 @@
   border-color: var(--crewlet-tag-line);
 }
 
+/*
+ * THE NEUTRAL PILL CARRIES A BOUNDARY, because its fill IS a surface. The
+ * raised rung is also the ground of a palette's lead block, a raised card and
+ * the rail's current row, and on any of them a raised pill with a transparent
+ * boundary was the colour of what it stood on: the pill vanished and its words
+ * read as loose text with odd gaps between them.
+ *
+ * THE STRONG STEP, NOT THE DEFAULT ONE. The design's own chip is found by 1px
+ * of its line step (`.chip`), which is the default border here, and that
+ * measured under the hairline dE of 3 on five grounds a pill lands on: 2.76 on
+ * the light frame, 2.86 on a pressed row over a light card, 2.77 and 2.71 on an
+ * inset well inside a raised surface, and 2.08 on a hovered row over the dark
+ * sheet. The strong step is the design's line-2, the boundary it draws round a
+ * key cap (`.kbd`), and it clears 3 on every rung and every overlay in both
+ * themes. The suite measures all of them.
+ *
+ * The hover takes the strong step once more, because the press line a tinted
+ * pill moves to on hover IS the strong step in both themes, and a hover that
+ * lands on the resting boundary draws no hover at all.
+ */
+.crewlet-tag--neutral.crewlet-tag--soft {
+  --crewlet-tag-edge: var(--color-border-strong);
+  --crewlet-tag-line: var(--color-border-strong-hover);
+}
+
 /* The neutral outline is the engine's `.badge.outline`: the hairline step as
    the boundary, and the tertiary ink, which is a quieter register than the
    tinted outlines keep. It is the appearance for a value that is not a state
@@ -295,9 +294,9 @@
   align-self: stretch;
   gap: inherit;
   min-width: 0;
-  padding: 0 var(--spacing-2);
+  padding: 0 var(--crewlet-tag-pad);
   border: 0;
-  border-radius: var(--radius-xs) 0 0 var(--radius-xs);
+  border-radius: var(--radius-pill) 0 0 var(--radius-pill);
   background: transparent;
   /* A button inherits none of these. */
   color: inherit;
@@ -354,10 +353,10 @@
   min-width: 24px;
   margin-block-start: -1px;
   margin-block-end: -1px;
-  margin-right: calc(var(--spacing-2) * -1);
+  margin-right: calc(var(--crewlet-tag-pad) * -1);
   padding: 0 var(--spacing-1);
   border: 0;
-  border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
+  border-radius: 0 var(--radius-pill) var(--radius-pill) 0;
   background: transparent;
   color: inherit;
   cursor: pointer;

package/dist/TagsInput/index.js

@@ -1,10 +1,10 @@
-export { TagsInput } from '../chunk-BJSKPEZI.js';
-import '../chunk-S2XHHEW4.js';
-import '../chunk-PZSWF74H.js';
-import '../chunk-GTOUGQQK.js';
+export { TagsInput } from '../chunk-KD4H66L6.js';
+import '../chunk-74KMX7YH.js';
+import '../chunk-WIATRXEJ.js';
+import '../chunk-6MU7HNB4.js';
 import '../chunk-RSAQOKH3.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/ThemeSwitcher/ThemeSwitcher.d.ts

@@ -1,15 +1,46 @@
-export interface ThemeSwitcherProps {
+import { type DensityPreference, type ThemePreference } from './preferences.js';
+/**
+ * Who holds a preference: the control, or the application around it.
+ *
+ * STORED, the default: the control reads the choice kept under `storageKey`,
+ * writes the root attribute and storage when it changes, and tells `onChange`
+ * afterwards. Every stored control on one key reads one value, so two of them
+ * on a page agree.
+ *
+ * CONTROLLED, with `value`: the control draws `value`, calls `onChange` with
+ * the reader's pick and WRITES NOTHING, neither the root attribute nor
+ * storage. The application owns the preference (normally one
+ * `useThemePreference` it hands to every control that shows it), so a second
+ * writer here would be a second opinion about which theme is on. A
+ * `storageKey` has nothing to name in that mode, and the types refuse one.
+ *
+ * A control is one or the other for its whole life: the two are different
+ * components underneath, so switching remounts it.
+ */
+export type PreferenceControl<T extends string> = {
+    value?: undefined;
+    /** Told after a pick is applied and stored. */
+    onChange?: ((next: T) => void) | undefined;
     /** Where the choice is kept. */
-    storageKey?: string;
+    storageKey?: string | undefined;
+} | {
+    /** The choice to draw. The control writes nothing of its own. */
+    value: T;
+    /** The reader's pick. Nothing changes until `value` does. */
+    onChange: (next: T) => void;
+    storageKey?: undefined;
+};
+interface ThemeRowProps {
     /** Names the group. */
-    label?: string;
+    label?: string | undefined;
     /** What each choice is called out loud. The glyphs say nothing on their own. */
-    lightLabel?: string;
-    systemLabel?: string;
-    darkLabel?: string;
-    size?: 'sm' | 'md';
-    className?: string;
+    lightLabel?: string | undefined;
+    systemLabel?: string | undefined;
+    darkLabel?: string | undefined;
+    size?: 'sm' | 'md' | undefined;
+    className?: string | undefined;
 }
+export type ThemeSwitcherProps = ThemeRowProps & PreferenceControl<ThemePreference>;
 /**
  * Light, the system's, or dark.
  *
@@ -21,21 +52,21 @@ export interface ThemeSwitcherProps {
  * EACH OPTION IS A WORD, not a picture of one. The glyphs are the whole of
  * what is drawn, so without a spoken name the row is three unnamed buttons.
  */
-export declare function ThemeSwitcher({ storageKey, label, lightLabel, systemLabel, darkLabel, size, className, }: ThemeSwitcherProps): import("react").JSX.Element;
-export interface DensitySwitcherProps {
-    storageKey?: string;
-    label?: string;
+export declare function ThemeSwitcher(props: ThemeSwitcherProps): import("react").JSX.Element;
+interface DensityRowProps {
+    label?: string | undefined;
     /** What each choice is called out loud. */
-    compactLabel?: string;
-    normalLabel?: string;
-    comfortableLabel?: string;
+    compactLabel?: string | undefined;
+    normalLabel?: string | undefined;
+    comfortableLabel?: string | undefined;
     /** What each choice is drawn as. One letter, which is a picture of a size. */
-    compactMark?: string;
-    normalMark?: string;
-    comfortableMark?: string;
-    size?: 'sm' | 'md';
-    className?: string;
+    compactMark?: string | undefined;
+    normalMark?: string | undefined;
+    comfortableMark?: string | undefined;
+    size?: 'sm' | 'md' | undefined;
+    className?: string | undefined;
 }
+export type DensitySwitcherProps = DensityRowProps & PreferenceControl<DensityPreference>;
 /**
  * How much room the interface gives itself.
  *
@@ -44,4 +75,5 @@ export interface DensitySwitcherProps {
  * nothing: a reader was offered "S" and left to guess. The mark stays, and
  * each option is called Compact, Normal or Comfortable.
  */
-export declare function DensitySwitcher({ storageKey, label, compactLabel, normalLabel, comfortableLabel, compactMark, normalMark, comfortableMark, size, className, }: DensitySwitcherProps): import("react").JSX.Element;
+export declare function DensitySwitcher(props: DensitySwitcherProps): import("react").JSX.Element;
+export {};

package/dist/ThemeSwitcher/index.d.ts

@@ -1,4 +1,4 @@
 export { DensitySwitcher, ThemeSwitcher } from './ThemeSwitcher.js';
-export type { DensitySwitcherProps, ThemeSwitcherProps } from './ThemeSwitcher.js';
-export { applyDensity, applyStoredPreferences, applyTheme, useDensityPreference, useThemePreference, } from './preferences.js';
-export type { DensityPreference, PreferenceOptions, StoredPreferences, ThemePreference, } from './preferences.js';
+export type { DensitySwitcherProps, PreferenceControl, ThemeSwitcherProps } from './ThemeSwitcher.js';
+export { applyDensity, applyStoredPreferences, applyTheme, resolveTheme, useDensityPreference, useSystemTheme, useThemePreference, } from './preferences.js';
+export type { DensityPreference, PreferenceOptions, ResolvedTheme, StoredPreferences, ThemePreference, } from './preferences.js';

package/dist/ThemeSwitcher/index.js

@@ -1,6 +1,7 @@
-export { DensitySwitcher, ThemeSwitcher, applyDensity, applyStoredPreferences, applyTheme, useDensityPreference, useThemePreference } from '../chunk-2HQR4U4D.js';
-import '../chunk-6ZFVFA56.js';
-import '../chunk-QEUY3A5P.js';
+export { DensitySwitcher, ThemeSwitcher } from '../chunk-S7KW47IQ.js';
+export { applyDensity, applyStoredPreferences, applyTheme, resolveTheme, useDensityPreference, useSystemTheme, useThemePreference } from '../chunk-K3OWD7BJ.js';
+import '../chunk-DHPUMOTX.js';
+import '../chunk-QY7UU5ZB.js';
 import '../chunk-BHHIIK3M.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/ThemeSwitcher/preferences.d.ts

@@ -6,10 +6,13 @@ export type DensityPreference = 'normal' | 'compact' | 'comfortable';
  * Puts the theme on the root element.
  *
  * `system` REMOVES the attribute rather than writing a third value, because
- * the stylesheet's own default is the system's: a document with no attribute
- * is light, or dark where the platform asks for dark. A `data-theme="system"`
- * would match neither selector and paint the light palette on a reader who
- * asked for dark.
+ * following the system IS the absence of a choice, and the stylesheet's own
+ * default is the system's: a document with no attribute is dark, or light
+ * where the platform asks for light. What beats the system is an explicit
+ * value, in both directions: `light` by a block of its own, `dark` by keeping
+ * the light media block from matching. A `data-theme="system"` names no
+ * palette, so it would be a choice only to the code that asks whether the
+ * attribute is there at all, which is the wrong answer to give it.
  */
 export declare function applyTheme(theme: ThemePreference): void;
 /** Puts the density on the root element. `normal` removes the attribute. */
@@ -24,11 +27,22 @@ export interface PreferenceOptions {
  * WHY IT IS A HOOK RATHER THAN A CONTEXT. Nothing renders differently by
  * theme: the palette is CSS custom properties on the root, so the only state
  * is which attribute is set, and a context would make every component that
- * reads it re-render for a change none of them draw.
+ * reads it re-render for a change none of them draw. Two calls with one
+ * `storageKey` read one value, so a toggle and a row on the same page agree.
  */
 export declare function useThemePreference({ storageKey, }: PreferenceOptions): [ThemePreference, (next: ThemePreference) => void];
 /** The reader's density, kept on the root element and in storage. */
 export declare function useDensityPreference({ storageKey, }: PreferenceOptions): [DensityPreference, (next: DensityPreference) => void];
+/** The palette the root actually paints: a choice, or the system's answer. */
+export type ResolvedTheme = 'light' | 'dark';
+/**
+ * The palette the platform asks for, now and whenever it changes. A server,
+ * and a browser that cannot be asked, are answered dark, which is what the
+ * theme layer paints for them.
+ */
+export declare function useSystemTheme(): ResolvedTheme;
+/** What a preference paints on a platform that asks for `system`. */
+export declare function resolveTheme(preference: ThemePreference, system: ResolvedTheme): ResolvedTheme;
 export interface StoredPreferences {
     themeKey?: string | undefined;
     densityKey?: string | undefined;

package/dist/ThemeToggle/ThemeToggle.d.ts

@@ -0,0 +1,40 @@
+import { type IconButtonSize, type IconButtonVariant } from '../IconButton/index.js';
+import type { PreferenceControl } from '../ThemeSwitcher/ThemeSwitcher.js';
+import { type ThemePreference } from '../ThemeSwitcher/preferences.js';
+interface ToggleButtonProps {
+    /** Named for what a press does, while the page is dark. */
+    toLightLabel?: string | undefined;
+    /** Named for what a press does, while the page is light. */
+    toDarkLabel?: string | undefined;
+    /** The rail's foot wears `sm`, the quiet step beside the identity row. */
+    size?: IconButtonSize | undefined;
+    variant?: IconButtonVariant | undefined;
+    className?: string | undefined;
+}
+/**
+ * `onChange` receives `light` or `dark`, never `system`: a press is a choice.
+ * Stored (the default) or controlled by `value`, as `ThemeSwitcher` is, and a
+ * controlled toggle writes nothing of its own.
+ */
+export type ThemeToggleProps = ToggleButtonProps & PreferenceControl<ThemePreference>;
+/**
+ * One press from the palette on the screen to the other one.
+ *
+ * IT FLIPS WHAT IS PAINTED, NOT WHAT WAS CHOSEN. A reader following a dark
+ * system has the preference `system`; toggling that preference has no
+ * opposite to go to, and cycling light, system, dark would spend a press on
+ * `system`, which repaints nothing and reads as a button that did not work.
+ * So the toggle RESOLVES the preference against the platform (the query the
+ * theme layer itself answers) and writes the explicit opposite, which beats
+ * the system in both directions. Following the system again is a choice in the
+ * 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
+ * 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
+ * changing name would announce the change twice in two contradicting ways.
+ */
+export declare function ThemeToggle(props: ThemeToggleProps): import("react").JSX.Element;
+export {};

package/dist/ThemeToggle/index.d.ts

@@ -0,0 +1,2 @@
+export { ThemeToggle } from './ThemeToggle.js';
+export type { ThemeToggleProps } from './ThemeToggle.js';

package/dist/ThemeToggle/index.js

@@ -0,0 +1,5 @@
+export { ThemeToggle } from '../chunk-C5WJUZVR.js';
+import '../chunk-K3OWD7BJ.js';
+import '../chunk-4UQ7SMPK.js';
+import '../chunk-BZFWDIV6.js';
+import '../chunk-ODEQTPFM.js';

package/dist/TimeWindowPicker/index.js

@@ -1,13 +1,13 @@
-export { DEFAULT_TIME_WINDOW_LABELS, TIME_WINDOW_SPANS, TimeWindowPicker, describeTimeWindow, isTimeWindowSet, parseTimeWindowDuration, resolveTimeWindow, timeWindowMatchesPreset } from '../chunk-WOYYD2YR.js';
-import '../chunk-OFHBK7RI.js';
-import '../chunk-DD5BBGBE.js';
+export { DEFAULT_TIME_WINDOW_LABELS, TIME_WINDOW_SPANS, TimeWindowPicker, describeTimeWindow, isTimeWindowSet, parseTimeWindowDuration, resolveTimeWindow, timeWindowMatchesPreset } from '../chunk-JGRNTBF2.js';
+import '../chunk-SJQ546ID.js';
+import '../chunk-AUS5FNQE.js';
 import '../chunk-GXQ3B46I.js';
-import '../chunk-GTOUGQQK.js';
-import '../chunk-O6232G37.js';
+import '../chunk-6MU7HNB4.js';
+import '../chunk-DSUY5F4E.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-7RPGY3JE.js';
-import '../chunk-ITHXJHBB.js';
-import '../chunk-F27EPQ7D.js';
-import '../chunk-BZYDZBAN.js';
+import '../chunk-R25RGPUB.js';
+import '../chunk-4UQ7SMPK.js';
+import '../chunk-ETYEBKR4.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/Toaster/index.js

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

package/dist/Toolbar/index.js

@@ -1,4 +1,4 @@
-export { Toolbar, ToolbarOverflow, ToolbarWide } from '../chunk-5EKIWVOR.js';
+export { Toolbar, ToolbarOverflow, ToolbarWide } from '../chunk-PGRPNDWM.js';
 import '../chunk-7RPGY3JE.js';
-import '../chunk-ITHXJHBB.js';
+import '../chunk-R25RGPUB.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{Toolbar-IP6LXN45.css → Toolbar-HUOSMNTH.css}

@@ -37,7 +37,9 @@
   display: none;
 }
 
-@media (max-width: 900px) {
+/* Under the shell's breakpoint, strictly, as the shell switches: the wide
+   controls fold into the overflow where the rail becomes a drawer. */
+@media (width < 1024px) {
   .crewlet-toolbar__wide {
     display: none;
   }

package/dist/Tooltip/index.js

@@ -1,4 +1,4 @@
-export { Tooltip } from '../chunk-XV6WRMBC.js';
+export { Tooltip } from '../chunk-CQY5NTRS.js';
 import '../chunk-7RPGY3JE.js';
-import '../chunk-ITHXJHBB.js';
+import '../chunk-R25RGPUB.js';
 import '../chunk-ODEQTPFM.js';

package/dist/Tree/index.d.ts

@@ -1,7 +1,7 @@
 export { createTreeModel, isTypeAheadKey, treeAllExpandable, treeAncestors, treeCollapseOrAscend, treeExpandOrDescend, treeExpandTo, treeExpandable, treeFirst, treeFirstChild, treeLast, treeLevel, treeNext, treeParent, treePosInSet, treePrevious, treeSetSize, treeTypeAhead, treeVisible, typeAheadBuffer, TYPE_AHEAD_RESET_MS, } from './model.js';
 export type { TreeInput, TreeModel, TypeAheadState } from './model.js';
-export { layoutConnectors, layoutForest } from './layout.js';
-export type { ForestLayout, LayoutGaps, LayoutNode, LayoutRanks, PlacedNode, TreeConnector, TreeConnectorShape, } from './layout.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 { SIZE_EPSILON, useLayoutAnchor, useMeasuredSizes } from './useMeasuredSizes.js';

package/dist/Tree/index.js

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