@crewlethq/ui 0.8.1 → 0.9.0

package/README.md

@@ -42,13 +42,13 @@ import { Button } from '@crewlethq/ui/Button';  // 8 KB of CSS, not 182 KB
 | ---- | ---------- |
 | Actions | `Button` and `ButtonLink` (variants `primary`, `secondary`, `outline`, `ghost`, `accent`, `danger`; sizes `small`, `medium`, `large`; shapes `square`, `pill`), `IconButton`, `Menu`, `Link`, `Copyable`, `CopyButton`, `Kbd` |
 | Content and text | `Text` (the eight registers), `Prose`, `InlineCode`, `List` and `ListItem`, `DescriptionList`, `Timeline`, `RelativeTime` |
-| Forms | `Input`, `Textarea`, `Label`, `FormField`, `FormRow`, `Checkbox`, `Select`, `Tag`, `TagsInput`, `DateTimePicker`, `TimeWindowPicker`, `ImageUpload` |
+| Forms | `Input`, `Textarea`, `Label`, `FormField`, `FormRow`, `Checkbox`, `Select`, `Tag`, `TagsInput`, `DateTimePicker`, `TimeWindowPicker`, `ImageUpload`, `CharacterPicker`, `HuePicker` |
 | Data display | `DataTable`, `CopyableCell`, `Table`, `StatCard`, `Meter`, `SegmentedMeter`, `Stepper`, `PricingCard`, `Avatar`, `AvatarStack`, `EntityChip`, `CodeBlock`, `Skeleton`, `Eyebrow` |
 | List screens | `DataView`, and its parts on their own: `DataViewToolbar`, `FilterAxisBar`, `FilterAxisChip`, plus the filter model (`filterDefsFromColumns`, `applyColumnFilters`, `filterPredicate`, `blankFilterValue`) |
 | Feedback and overlays | `Callout`, `Toaster`, `Modal` (with `variant="sheet"`), `ConfirmModal`, `CommandPalette`, `Tooltip`, `Popover`, `Announcer` |
 | Charts | `Legend`, `BarList`, `StackedBar`, `StackedColumns`, `ActivityStrip`, `TimeSeries`, `Sparkline`, the reading layer they share (`ChartTooltip`, `useChartHover`), and the ramp (`DATA_COLORS`, `DATA_COLOR_OTHER`, `dataColor`) |
 | Marks | `Count`, `StatusDot`, `EmptyValue`, `VisuallyHidden` |
-| Hooks and seams | `useModalLayer`, `usePopupLayer`, `LayerHost`, `useListbox`, `useOptionKeys`, `useClipboard`, `useAnnouncer`, `useNow`, `formatRelative`, `HeadingLevelProvider`, `cx` |
+| Hooks and seams | `useModalLayer`, `usePopupLayer`, `LayerHost`, `useListbox`, `useOptionKeys`, `useClipboard`, `useAnnouncer`, `useNow`, `formatRelative`, `HeadingLevelProvider`, `cx`, the node hues (`NODE_HUES`, `NODE_HUE_NAMES`, `isNodeHue`) |
 | Layout | `Container`, `Section`, `Card`, `Tabs`, `Accordion`, `Disclosure` |
 | Application shell | `AppShell` with `AppShell.Rail`, `AppShell.Topbar` and `useAppShell`, `SidebarNav` and `NavItem`, `BrandLockup`, `SearchTrigger`, `PageHeader`, `Toolbar`, `Stack`, `Inline`, `Spacer`, `AutoGrid`, `ErrorBoundary`, `useShortcut`, `useFullscreen` |
 | Preferences | `ThemeToggle`, `ThemeSwitcher`, `DensitySwitcher`, `useThemePreference`, `useDensityPreference`, `useSystemTheme`, `resolveTheme`, `applyStoredPreferences` |
@@ -191,6 +191,16 @@ places:
 - A surface that pans or zooms dispatches `LAYER_REPOSITION_EVENT` on its host
   when the content beneath it moves, and every panel anchored inside follows.
 
+## Changes in 0.9.0
+
+0.9.0 gives an agent a face of its own: one of the thirty Crewlet characters in `@crewlethq/icons/characters`, drawn in one of the six node hues an operator chooses for it.
+
+**An agent's badge can be its character.** `Avatar` takes `character` and `hue`. An agent badge with a `character` draws that character, centred, on a plate of its hue (the hue's `-fill`, its `-line` round the badge and the hue itself as the ink), in place of its initials and of any image. A badge of `AVATAR_CHARACTER_FULL_DETAIL` (56px) and up draws the character's keyline and visor gap; a smaller one draws it compact, where a hairline would be a blur. A `human` badge ignores both and keeps its circle and initials, and what any badge says to a screen reader is unchanged. An `AvatarStack` member takes the same two fields, for a stack of agents drawn as themselves. What to change: nothing; a badge with neither prop draws as it did.
+
+**The node hues are one exported set.** `NODE_HUES`, `NODE_HUE_NAMES`, `isNodeHue` and the `NodeHue` type name the six hues an entity is told apart by, where somebody chose one. `TreeCardTone` (and so `OrgTableTone`) is now `NodeHue`, so an agent's card, row and badge are drawn from one list. What to change: nothing; the six names are the same.
+
+**Two pickers choose them.** `CharacterPicker` is a radio group of every character, laid out in rows of six (`CHARACTER_PICKER_COLUMNS`), each drawn as the badge it would make in the agent's hue; Left and Right walk the characters, Up and Down move a whole row, and the chosen badge carries the kit's selected ring. `HuePicker` is a `SegmentedControl` radio row of the six hues, each a swatch and the hue's name. Both take `disabled`, which keeps the choice shown and lets nothing in the group take focus or a press. Wrap either in `FormField as="fieldset"` for a labelled field.
+
 ## Changes in 0.7.0
 
 0.7.0 draws the org surfaces (`TreeCanvas`'s `node` appearance, `OrgTable`,

package/dist/Avatar/Avatar.d.ts

@@ -1,4 +1,6 @@
 import type { HTMLAttributes } from 'react';
+import { type CrewletCharacterId } from '@crewlethq/icons/characters';
+import type { NodeHue } from '../utils/nodeHue.js';
 import type { Tone } from '../utils/tone.js';
 /**
  * WHAT THE BADGE STANDS FOR, drawn as its outline.
@@ -91,7 +93,26 @@ export interface AvatarProps extends HTMLAttributes<HTMLElement> {
      * outlives a rename, so the colour does too. Only read with `tone="seeded"`.
      */
     colorSeed?: string | undefined;
+    /**
+     * The Crewlet character an AGENT is drawn as, in place of its initials and
+     * of any image. A person is never drawn as one: on a `human` badge this is
+     * ignored, and the circle and the initials stay.
+     */
+    character?: CrewletCharacterId | undefined;
+    /**
+     * The hue the agent's character is drawn in, on a plate of the same hue.
+     * Read only with `character`; a character with no hue is drawn in the
+     * neutral badge's ink, on its plate.
+     */
+    hue?: NodeHue | undefined;
 }
+/**
+ * The smallest badge, in px, a character is drawn at full detail: its keyline
+ * and its visor gap. Under it both are hairlines finer than a pixel, which a
+ * screen draws as a blur round the body, so the character is drawn compact
+ * (see `CrewletCharacterDetail`).
+ */
+export declare const AVATAR_CHARACTER_FULL_DETAIL = 56;
 /**
  * Two uppercase initials, or one where the name has only one letter to give.
  *
@@ -139,11 +160,11 @@ export declare function avatarPixels(size: AvatarSize): number;
  */
 export declare function avatarCorner(pixels: number): number;
 /**
- * An identity badge: an image, or the initials behind it.
+ * An identity badge: an agent's character, an image, or the initials behind it.
  *
  * If the image fails to load (a stale CDN URL, an expired signature) it
  * degrades to the initials rather than to a broken-image glyph. Either way it
  * keeps its kind's outline and its ring: whether somebody has uploaded a photo
  * says nothing about what they are or what they are doing.
  */
-export declare const Avatar: ({ src, name, size, kind, tone, ring, decorative, colorSeed, className, style, ...rest }: AvatarProps) => import("react").JSX.Element;
+export declare const Avatar: ({ src, name, size, kind, tone, ring, decorative, colorSeed, character, hue, className, style, ...rest }: AvatarProps) => import("react").JSX.Element;

package/dist/Avatar/AvatarStack.d.ts

@@ -1,4 +1,6 @@
 import type { HTMLAttributes } from 'react';
+import type { CrewletCharacterId } from '@crewlethq/icons/characters';
+import type { NodeHue } from '../utils/nodeHue.js';
 import { type AvatarKind, type AvatarRing, type AvatarSizeStep } from './Avatar.js';
 /** One badge in a stack. */
 export interface AvatarStackMember {
@@ -9,6 +11,10 @@ export interface AvatarStackMember {
     src?: string | undefined;
     /** A state ring on this badge, as `Avatar` draws it. */
     ring?: AvatarRing | undefined;
+    /** The Crewlet character an agent member is drawn as, as `Avatar` draws it. */
+    character?: CrewletCharacterId | undefined;
+    /** The hue an agent member's character is drawn in, as `Avatar` draws it. */
+    hue?: NodeHue | undefined;
     /**
      * What tells two members apart when their names do not (a seat's handle, a
      * person's id), unique within the stack. The name is used when it is absent.

package/dist/Avatar/index.d.ts

@@ -1,6 +1,6 @@
 import './Avatar.css';
 import './AvatarStack.css';
-export { AVATAR_CORNER_RATIO, AVATAR_SIZES, Avatar, avatarCorner, avatarPixels, avatarTint, getInitials, } from './Avatar.js';
+export { AVATAR_CHARACTER_FULL_DETAIL, AVATAR_CORNER_RATIO, AVATAR_SIZES, Avatar, avatarCorner, avatarPixels, avatarTint, getInitials, } from './Avatar.js';
 export type { AvatarKind, AvatarProps, AvatarRing, AvatarSize, AvatarSizeStep, AvatarTone } from './Avatar.js';
 export { AvatarStack, avatarStackLabel } from './AvatarStack.js';
 export type { AvatarStackMember, AvatarStackProps } from './AvatarStack.js';

package/dist/Avatar/index.js

@@ -1,2 +1,3 @@
-export { AVATAR_CORNER_RATIO, AVATAR_SIZES, Avatar, AvatarStack, avatarCorner, avatarPixels, avatarStackLabel, avatarTint, getInitials } from '../chunk-IA232OTU.js';
+export { AvatarStack, avatarStackLabel } from '../chunk-OAH4IEQJ.js';
+export { AVATAR_CHARACTER_FULL_DETAIL, AVATAR_CORNER_RATIO, AVATAR_SIZES, Avatar, avatarCorner, avatarPixels, avatarTint, getInitials } from '../chunk-UDW3DAP5.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{Avatar-XID7Z74C.css → Avatar-JAU77SHZ.css}

@@ -1,21 +1,28 @@
 /*
  * The identity badge.
  *
- * IT IS NEUTRAL, and that is the whole rule. The system this replaces coloured
- * a seat by `PALETTE[hash(name) % 8]`, over the same eight families it also
- * spent on phases and event categories, so one amber meant "the execute
- * phase", "the decision category" and "the Analyst" at once. A hash of a name
- * carries no information: rename the seat and its colour changes, which is the
- * proof it never meant anything. Identity is the OUTLINE (a squircle for an
- * agent, a circle for a person), the monogram and the name.
+ * IT IS NEUTRAL UNLESS SOMEBODY CHOSE OTHERWISE, and a hash never chooses. The
+ * system this replaces coloured a seat by `PALETTE[hash(name) % 8]`, over the
+ * same eight families it also spent on phases and event categories, so one
+ * amber meant "the execute phase", "the decision category" and "the Analyst"
+ * at once. A hash of a name carries no information: rename the seat and its
+ * colour changes, which is the proof it never meant anything. Identity is the
+ * OUTLINE (a squircle for an agent, a circle for a person), the monogram and
+ * the name, and for an agent an operator gave one, its character and its hue.
  *
- * THE ONE HUE A BADGE CARRIES IS A STATE, as a ring round it, and the ring is
- * the component's only coloured line.
+ * THE ONE HUE A BADGE CARRIES AS A LINE IS A STATE, as a ring round it, and the
+ * ring is the component's only coloured line outside its own plate.
  *
  * The seeded tints stay for the one case that earns them, a roster somebody
  * scans, and their grounds are TOKENS: measured under white initials and held
  * at 4.5:1 by the palette suite. Spelled as literals, five of the ten sat
  * under that floor while the suite measured ten values nothing painted with.
+ *
+ * AN AGENT'S OWN HUE IS NOT A HASH. An agent an operator gave a Crewlet
+ * character and a hue is drawn as that character, in that hue, on a plate of
+ * it: the hue was chosen for the seat and survives a rename, which a hash of
+ * the name never did. It is one of the six node hues (`NodeHue`), each a
+ * measured set of steps rather than a colour with alphas applied here.
  */
 
 .crewlet-avatar {
@@ -147,6 +154,63 @@
 .crewlet-avatar--tint-8 { background: var(--color-avatar-tint-8); }
 .crewlet-avatar--tint-9 { background: var(--color-avatar-tint-9); }
 
+/* ── an agent's character ─────────────────────────────────────────────── */
+
+/*
+ * THE CHARACTER FILLS MOST OF THE PLATE, centred by its own frame (it frames
+ * every silhouette square on what it draws), with the plate's corner clear of
+ * it: a wide character such as the original Crewlet reaches the plate's
+ * sides, a tall one its top and its foot, and none touches the curve.
+ */
+.crewlet-avatar--character {
+  border: 1px solid transparent;
+}
+
+.crewlet-avatar__character {
+  display: block;
+  flex: none;
+  width: 74%;
+  height: 74%;
+}
+
+/* The plate an agent's hue is drawn on: the hue's fill, its line round the
+   badge and the hue itself as the character's ink. */
+.crewlet-avatar--hue-purple {
+  background: var(--color-node-purple-fill);
+  border-color: var(--color-node-purple-line);
+  color: var(--color-node-purple);
+}
+
+.crewlet-avatar--hue-cyan {
+  background: var(--color-node-cyan-fill);
+  border-color: var(--color-node-cyan-line);
+  color: var(--color-node-cyan);
+}
+
+.crewlet-avatar--hue-green {
+  background: var(--color-node-green-fill);
+  border-color: var(--color-node-green-line);
+  color: var(--color-node-green);
+}
+
+.crewlet-avatar--hue-amber {
+  background: var(--color-node-amber-fill);
+  border-color: var(--color-node-amber-line);
+  color: var(--color-node-amber);
+}
+
+.crewlet-avatar--hue-rose {
+  background: var(--color-node-rose-fill);
+  border-color: var(--color-node-rose-line);
+  color: var(--color-node-rose);
+}
+
+.crewlet-avatar--hue-blue {
+  background: var(--color-node-blue-fill);
+  border-color: var(--color-node-blue-line);
+  color: var(--color-node-blue);
+}
+
 /* ── the state ring ────────────────────────────────────────────────────── */
 
 /*

package/dist/CharacterPicker/CharacterPicker.d.ts

@@ -0,0 +1,38 @@
+import type { HTMLAttributes } from 'react';
+import { type CrewletCharacterId } from '@crewlethq/icons/characters';
+import type { NodeHue } from '../utils/nodeHue.js';
+/**
+ * How many characters a row of the grid holds. Thirty characters make five
+ * full rows, and a grid that wraps by width would leave the arrow keys
+ * guessing which option sits above which.
+ */
+export declare const CHARACTER_PICKER_COLUMNS = 6;
+export interface CharacterPickerProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'onChange'> {
+    /** The group's name, said on entering it: "Character". */
+    label: string;
+    /** The chosen character. */
+    value: CrewletCharacterId;
+    onValueChange: (character: CrewletCharacterId) => void;
+    /** The hue every option is shown in, so the grid previews the agent it will be. */
+    hue?: NodeHue | undefined;
+    /** The characters offered, in order. Every character, by default. */
+    characters?: readonly CrewletCharacterId[] | undefined;
+    /** Nothing can be chosen, and the grid says so. */
+    disabled?: boolean | undefined;
+}
+/**
+ * The choice of an agent's Crewlet character: a grid of the characters, each
+ * drawn as the badge it would make, in the agent's own hue.
+ *
+ * A RADIO GROUP, because a character is a setting and exactly one is chosen:
+ * the grid is one tab stop, the arrows move through it and choose as they
+ * move, as the platform's own radio group does. Left and Right walk the
+ * options in reading order and Up and Down move a whole row, because the
+ * options are laid out in rows and an arrow that ignored that would move
+ * somewhere the reader is not looking.
+ *
+ * THE CHOSEN OPTION IS SAID THE WAY THE KIT SAYS SELECTED, with the badge's
+ * own `brand` ring, rather than a frame the grid draws round a tile: one
+ * badge, one line round it, and the line means "this one".
+ */
+export declare function CharacterPicker({ label, value, onValueChange, hue, characters, disabled, className, ...rest }: CharacterPickerProps): import("react").JSX.Element;

package/dist/CharacterPicker/index.d.ts

@@ -0,0 +1,3 @@
+import './CharacterPicker.css';
+export { CHARACTER_PICKER_COLUMNS, CharacterPicker } from './CharacterPicker.js';
+export type { CharacterPickerProps } from './CharacterPicker.js';

package/dist/CharacterPicker/index.js

@@ -0,0 +1,4 @@
+export { CHARACTER_PICKER_COLUMNS, CharacterPicker } from '../chunk-IKH3Y4MP.js';
+import '../chunk-CBOICT64.js';
+import '../chunk-UDW3DAP5.js';
+import '../chunk-ODEQTPFM.js';

package/dist/CharacterPicker-ZEYIKUNQ.css

@@ -0,0 +1,42 @@
+/*
+ * The grid of characters.
+ *
+ * SIX COLUMNS, ALWAYS, and the tiles share the width: the arrow keys move a
+ * whole row on Up and Down, so a row has to hold the same options at every
+ * width (`CHARACTER_PICKER_COLUMNS`). A tile is a target the size of the
+ * badge it holds and the gap round it, never smaller than the kit's control
+ * floor.
+ */
+
+.crewlet-character-picker {
+  display: grid;
+  grid-template-columns: repeat(6, minmax(0, 1fr));
+  gap: var(--spacing-1);
+  justify-items: center;
+}
+
+.crewlet-character-picker__option {
+  display: grid;
+  place-items: center;
+  min-width: var(--size-control-lg);
+  min-height: var(--size-control-lg);
+  padding: var(--spacing-1);
+  border: 0;
+  border-radius: var(--radius-md);
+  background: transparent;
+  cursor: pointer;
+}
+
+.crewlet-character-picker__option:hover:not(:disabled) {
+  background: var(--color-surface-hover);
+}
+
+.crewlet-character-picker__option:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: 2px;
+}
+
+.crewlet-character-picker__option:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}

package/dist/CommandPalette/index.js

@@ -1,8 +1,8 @@
-export { CommandPalette } from '../chunk-BXPLX7YU.js';
+export { CommandPalette } from '../chunk-IGWPZZIB.js';
 import '../chunk-SMBKXWML.js';
-import '../chunk-BTHX2FS3.js';
 import '../chunk-6MU7HNB4.js';
 import '../chunk-ZGX2DP7F.js';
+import '../chunk-BTHX2FS3.js';
 import '../chunk-BHHIIK3M.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-7RPGY3JE.js';

package/dist/DataTable/index.js

@@ -1,10 +1,10 @@
-export { ALL_ITEMS, CopyableCell, DATA_TABLE_LABELS, DataTable, RowActionsMenu } from '../chunk-KTIEJ5Q5.js';
+export { ALL_ITEMS, CopyableCell, DATA_TABLE_LABELS, DataTable, RowActionsMenu } from '../chunk-CVB7O3SZ.js';
 import '../chunk-LSB3EHBW.js';
 import '../chunk-EUCC37WY.js';
 import '../chunk-BTHX2FS3.js';
 import '../chunk-AV2DXAEL.js';
-import '../chunk-5VNUYO76.js';
 import '../chunk-YCTMKKRA.js';
+import '../chunk-5VNUYO76.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-7RPGY3JE.js';
 import '../chunk-R25RGPUB.js';

package/dist/DataView/index.js

@@ -1,9 +1,11 @@
-export { DATA_VIEW_TOOLBAR_LABELS, DataView, DataViewToolbar, FILTER_AXIS_LABELS, FilterAxisBar, FilterAxisChip, applyColumnFilters, applyFilters, blankFilterValue, defaultOperator, filterDefsFromColumns, filterHasValue, filterPredicate, formatFilterValue, operatorOf, tableColumns } from '../chunk-A3K56LY6.js';
+export { DATA_VIEW_TOOLBAR_LABELS, DataView, DataViewToolbar, FILTER_AXIS_LABELS, FilterAxisBar, FilterAxisChip, applyColumnFilters, applyFilters, blankFilterValue, defaultOperator, filterDefsFromColumns, filterHasValue, filterPredicate, formatFilterValue, operatorOf, tableColumns } from '../chunk-EUT7VBQG.js';
 import '../chunk-PGRPNDWM.js';
-import '../chunk-HOXGBLEY.js';
 import '../chunk-3CZ7XAVY.js';
+import '../chunk-HOXGBLEY.js';
 import '../chunk-SMBKXWML.js';
-import '../chunk-KTIEJ5Q5.js';
+import '../chunk-6MU7HNB4.js';
+import '../chunk-ZGX2DP7F.js';
+import '../chunk-CVB7O3SZ.js';
 import '../chunk-LSB3EHBW.js';
 import '../chunk-EUCC37WY.js';
 import '../chunk-BTHX2FS3.js';
@@ -11,10 +13,8 @@ import '../chunk-5I56UXBJ.js';
 import '../chunk-PDUZO35I.js';
 import '../chunk-GXQ3B46I.js';
 import '../chunk-AV2DXAEL.js';
-import '../chunk-5VNUYO76.js';
 import '../chunk-YCTMKKRA.js';
-import '../chunk-6MU7HNB4.js';
-import '../chunk-ZGX2DP7F.js';
+import '../chunk-5VNUYO76.js';
 import '../chunk-BHHIIK3M.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-7RPGY3JE.js';

package/dist/EntityChip/index.js

@@ -1,3 +1,4 @@
-export { EntityChip } from '../chunk-WSOFKOLP.js';
-import '../chunk-IA232OTU.js';
+export { EntityChip } from '../chunk-Y2V3TSQC.js';
+import '../chunk-OAH4IEQJ.js';
+import '../chunk-UDW3DAP5.js';
 import '../chunk-ODEQTPFM.js';

package/dist/HuePicker/HuePicker.d.ts

@@ -0,0 +1,26 @@
+import { type SegmentedSize } from '../SegmentedControl/SegmentedControl.js';
+import { type NodeHue } from '../utils/nodeHue.js';
+export interface HuePickerProps {
+    /** The group's name, said on entering it: "Color". */
+    label: string;
+    value: NodeHue;
+    onValueChange: (hue: NodeHue) => void;
+    size?: SegmentedSize | undefined;
+    /** Nothing can be chosen, and the row says so. */
+    disabled?: boolean | undefined;
+    className?: string | undefined;
+}
+/**
+ * The choice of an entity's hue: the six node hues as a row of chips, each a
+ * swatch and the hue's name.
+ *
+ * THE NAME IS PRINTED, not left to the swatch, because a swatch alone asks the
+ * reader to tell six hues apart, which some readers cannot, and says nothing
+ * to a screen reader. It is a `SegmentedControl` radio row, so it keeps the
+ * kit's one tab stop and the arrows that choose as they move.
+ *
+ * DISABLED IS EVERY CHIP DISABLED, as `CharacterPicker` is every tile: the
+ * row is still read and the chosen hue still shown, and nothing in it takes
+ * focus or a press.
+ */
+export declare function HuePicker({ label, value, onValueChange, size, disabled, className }: HuePickerProps): import("react").JSX.Element;

package/dist/HuePicker/index.d.ts

@@ -0,0 +1,3 @@
+import './HuePicker.css';
+export { HuePicker } from './HuePicker.js';
+export type { HuePickerProps } from './HuePicker.js';

package/dist/HuePicker/index.js

@@ -0,0 +1,8 @@
+export { HuePicker } from '../chunk-26TXVHN2.js';
+import '../chunk-AYKXMIOR.js';
+import '../chunk-LPHHDCN3.js';
+import '../chunk-HEOVQZL7.js';
+import '../chunk-CBOICT64.js';
+import '../chunk-BHHIIK3M.js';
+import '../chunk-BZFWDIV6.js';
+import '../chunk-ODEQTPFM.js';

package/dist/HuePicker-5QIUR6L7.css

@@ -0,0 +1,18 @@
+/*
+ * A hue's swatch: the hue itself, as a dot beside its name. The name carries
+ * the choice; the dot is there so the row can be scanned for a colour.
+ */
+
+.crewlet-hue-picker__swatch {
+  display: block;
+  width: var(--spacing-3);
+  height: var(--spacing-3);
+  border-radius: var(--radius-circle);
+}
+
+.crewlet-hue-picker__swatch--purple { background: var(--color-node-purple); }
+.crewlet-hue-picker__swatch--cyan { background: var(--color-node-cyan); }
+.crewlet-hue-picker__swatch--green { background: var(--color-node-green); }
+.crewlet-hue-picker__swatch--amber { background: var(--color-node-amber); }
+.crewlet-hue-picker__swatch--rose { background: var(--color-node-rose); }
+.crewlet-hue-picker__swatch--blue { background: var(--color-node-blue); }

package/dist/ImageUpload/index.js

@@ -1,3 +1,4 @@
-export { ImageUpload } from '../chunk-W4GQWFRX.js';
-import '../chunk-IA232OTU.js';
+export { ImageUpload } from '../chunk-E3HDS4F7.js';
+import '../chunk-OAH4IEQJ.js';
+import '../chunk-UDW3DAP5.js';
 import '../chunk-ODEQTPFM.js';

package/dist/ListInput/index.js

@@ -1,10 +1,10 @@
-export { ListInput } from '../chunk-4JHWMJZI.js';
+export { ListInput } from '../chunk-6HXH57BL.js';
 import '../chunk-SMBKXWML.js';
 import '../chunk-ZGX2DP7F.js';
 import '../chunk-PQADV6P6.js';
+import '../chunk-RSAQOKH3.js';
 import '../chunk-7RPGY3JE.js';
 import '../chunk-R25RGPUB.js';
 import '../chunk-4FQT6ZAY.js';
-import '../chunk-RSAQOKH3.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/OrgLabel/index.js

@@ -1,3 +1,4 @@
-export { OrgLabel } from '../chunk-B47YUQGM.js';
-import '../chunk-IA232OTU.js';
+export { OrgLabel } from '../chunk-J3IS2TOA.js';
+import '../chunk-OAH4IEQJ.js';
+import '../chunk-UDW3DAP5.js';
 import '../chunk-ODEQTPFM.js';

package/dist/OrgNode/index.js

@@ -1,4 +1,5 @@
-export { OrgNodeDisclosure, OrgNodeLabel, OrgNodeLead } from '../chunk-VCOELPCT.js';
-import '../chunk-B47YUQGM.js';
-import '../chunk-IA232OTU.js';
+export { OrgNodeDisclosure, OrgNodeLabel, OrgNodeLead } from '../chunk-K7OS4O2U.js';
+import '../chunk-J3IS2TOA.js';
+import '../chunk-OAH4IEQJ.js';
+import '../chunk-UDW3DAP5.js';
 import '../chunk-ODEQTPFM.js';

package/dist/OrgTable/index.js

@@ -1,12 +1,13 @@
-export { OrgTable, OrgTableActions, OrgTableAdd, OrgTableName } from '../chunk-6SIG5I72.js';
+export { OrgTable, OrgTableActions, OrgTableAdd, OrgTableName } from '../chunk-JB6AN4ZC.js';
 import '../chunk-SX2DFTQV.js';
 import '../chunk-S3BCVWTU.js';
-import '../chunk-B47YUQGM.js';
+import '../chunk-J3IS2TOA.js';
 import '../chunk-53DVJCVW.js';
 import '../chunk-74WGARJE.js';
 import '../chunk-7RPGY3JE.js';
 import '../chunk-R25RGPUB.js';
 import '../chunk-4FQT6ZAY.js';
-import '../chunk-IA232OTU.js';
+import '../chunk-OAH4IEQJ.js';
+import '../chunk-UDW3DAP5.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/SegmentedControl/index.js

@@ -1,5 +1,7 @@
-export { SegmentedControl } from '../chunk-N5KCGFWI.js';
-import '../chunk-DRHXRGB6.js';
+import '../chunk-UI6HWAWE.js';
+export { SegmentedControl } from '../chunk-LPHHDCN3.js';
+import '../chunk-HEOVQZL7.js';
+import '../chunk-CBOICT64.js';
 import '../chunk-BHHIIK3M.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/Tabs/index.js

@@ -1,4 +1,5 @@
-export { TabPanel, Tabs, tabId } from '../chunk-DRHXRGB6.js';
+export { TabPanel, Tabs, tabId } from '../chunk-HEOVQZL7.js';
+import '../chunk-CBOICT64.js';
 import '../chunk-BHHIIK3M.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/Tabs/roving.d.ts

@@ -36,6 +36,14 @@ export interface RovingOptions {
      * a refinement of it.
      */
     followFocus?: boolean | undefined;
+    /**
+     * How many options a row of a GRID holds, for options laid out in rows and
+     * columns (a picker of tiles): Up and Down then move a whole row, to the
+     * option above or below, and stop at the grid's edge rather than wrap into
+     * another column. Left and Right still walk the options in reading order.
+     * Unset, the options are one line.
+     */
+    columns?: number | undefined;
 }
 /**
  * Roving focus over a row of buttons: ONE TAB STOP for the row, the arrows to
@@ -59,7 +67,7 @@ export interface RovingOptions {
  * focus, so a move that lands on one drops focus on the page body and the
  * next arrow press does nothing at all.
  */
-export declare function useRoving(count: number, select: ((index: number) => void) | null, { followFocus }?: RovingOptions): {
+export declare function useRoving(count: number, select: ((index: number) => void) | null, { followFocus, columns }?: RovingOptions): {
     buttons: import("react").RefObject<(HTMLButtonElement | null)[]>;
     onKeyDown: (event: KeyboardEvent<HTMLElement>, vertical: boolean) => void;
     onFocusAt: (index: number) => void;

package/dist/TagsInput/index.js

@@ -1,10 +1,10 @@
-export { TagsInput } from '../chunk-DBUGBINU.js';
+export { TagsInput } from '../chunk-MPXI6FM6.js';
 import '../chunk-LOECRMHA.js';
 import '../chunk-WIATRXEJ.js';
 import '../chunk-6MU7HNB4.js';
+import '../chunk-RSAQOKH3.js';
 import '../chunk-7RPGY3JE.js';
 import '../chunk-R25RGPUB.js';
 import '../chunk-4FQT6ZAY.js';
-import '../chunk-RSAQOKH3.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/ThemeSwitcher/index.js

@@ -1,7 +1,9 @@
-export { DensitySwitcher, ThemeSwitcher } from '../chunk-RHHGLTXJ.js';
+export { DensitySwitcher, ThemeSwitcher } from '../chunk-X6K6OZ47.js';
 export { applyDensity, applyStoredPreferences, applyTheme, resolveTheme, useDensityPreference, useSystemTheme, useThemePreference } from '../chunk-K3OWD7BJ.js';
-import '../chunk-N5KCGFWI.js';
-import '../chunk-DRHXRGB6.js';
+import '../chunk-UI6HWAWE.js';
+import '../chunk-LPHHDCN3.js';
+import '../chunk-HEOVQZL7.js';
+import '../chunk-CBOICT64.js';
 import '../chunk-BHHIIK3M.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/TimeWindowPicker/index.js

@@ -1,9 +1,9 @@
-export { DEFAULT_TIME_WINDOW_LABELS, TIME_WINDOW_SPANS, TimeWindowPicker, describeTimeWindow, isTimeWindowSet, parseTimeWindowDuration, resolveTimeWindow, timeWindowMatchesPreset } from '../chunk-HVPC2GHY.js';
+export { DEFAULT_TIME_WINDOW_LABELS, TIME_WINDOW_SPANS, TimeWindowPicker, describeTimeWindow, isTimeWindowSet, parseTimeWindowDuration, resolveTimeWindow, timeWindowMatchesPreset } from '../chunk-IZHN5I3H.js';
 import '../chunk-SEFMO2EV.js';
-import '../chunk-PDUZO35I.js';
-import '../chunk-GXQ3B46I.js';
 import '../chunk-6MU7HNB4.js';
 import '../chunk-ZGX2DP7F.js';
+import '../chunk-PDUZO35I.js';
+import '../chunk-GXQ3B46I.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-7RPGY3JE.js';
 import '../chunk-R25RGPUB.js';

package/dist/TreeCanvas/TreeCanvas.d.ts

@@ -78,26 +78,18 @@
 import { type KeyboardEvent, type MouseEvent, type ReactNode, type Ref } from 'react';
 import { type CanvasGround, type CanvasLabels } from '../Canvas/index.js';
 import { type TreeConnectorShape, type TreeInput, type TreeItemAction, type LayoutRanks, type TreeModel, type TreeViewHandle } from '../Tree/index.js';
+import type { NodeHue } from '../utils/nodeHue.js';
 /** A card of the layout: its id and the cards nested under it. */
 export interface TreeCardInput {
     id: string;
     children: TreeCardInput[];
 }
 /**
- * The six hues a card can be tinted with, and the connector arriving at it.
- *
- * DECORATIVE AND PER ENTITY, never a series: two cards sharing a hue say
- * nothing, so the palette is not measured for separability and the chart owes
- * no legend (`--color-node-*` in the tokens package says the same). It is what
- * an operator picks for one agent so they can find it again, and what a chart
- * with no such choice derives from a stable identity.
- *
- * A NAMED SET RATHER THAN A COLOUR. A caller that could hand in any colour
- * would hand in a literal, and the fill, the border and the ink of a tinted
- * card are measured steps of one hue rather than one value with alphas applied
- * by whoever drew it last.
+ * The hue a card is tinted with, and the connector arriving at it: one of the
+ * six an operator chooses an entity's hue from ([NodeHue]), so an agent's card
+ * wears the same hue as its avatar and its row.
  */
-export type TreeCardTone = 'purple' | 'cyan' | 'green' | 'amber' | 'rose' | 'blue';
+export type TreeCardTone = NodeHue;
 /**
  * The props that make an element the pointer-only strip of controls beside a
  * node: see `TreeCardContext.actions`.