@crewlethq/ui 0.8.0 → 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/Charts/index.js

@@ -1,3 +1,3 @@
-export { ActivityStrip, BarList, ChartTooltip, DATA_COLORS, DATA_COLOR_OTHER, Legend, Sparkline, StackedBar, StackedColumns, TimeSeries, dataColor, niceScale, useChartHover } from '../chunk-6VL4LGWC.js';
+export { ActivityStrip, BarList, ChartTooltip, DATA_COLORS, DATA_COLOR_OTHER, Legend, Sparkline, StackedBar, StackedColumns, TimeSeries, dataColor, niceScale, useChartHover } from '../chunk-4WNNEDKO.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{Charts-THPA5BWV.css → Charts-JUERFLAR.css}

@@ -213,24 +213,67 @@
   gap: calc(var(--spacing-1) * 1.5);
 }
 
+/*
+ * THE BAR STANDS ON THE NAME'S LINE, AND A SPLIT BAR'S KEY ON THE SUB'S. An
+ * item is a grid of two columns, the words' and the plot, and two lines. The
+ * row spans it and lends its parts to it (`subgrid`), and the words' wrapper
+ * lends its own two lines in turn (`display: contents`), so the name and the
+ * plot share the first line and are centred on each other, and the sub and a
+ * split bar's key share the second, the key starting where the bar starts.
+ * Centred on the words' whole column instead, a row with a sub drew its bar,
+ * and the value at its end, between the name and the sub, a few pixels below
+ * the name it belongs to; and the key stood on a third line of its own, under
+ * the sub, where it read as one more bar. A row with neither is one line,
+ * centred in the item's height.
+ *
+ * THE KEY LETS THE POINTER THROUGH. It is outside the row in the markup,
+ * because a row that leads somewhere is a link or a button and holds no list,
+ * so it is drawn over the row's second line rather than inside it, and a
+ * press on it is a press on the row.
+ */
+.crewlet-bar-list--beside .crewlet-bar-list__item {
+  display: grid;
+  grid-template-columns: var(--crewlet-bar-list-label-width) minmax(0, 1fr);
+  grid-template-rows: auto auto;
+  align-content: center;
+  column-gap: var(--spacing-3);
+  min-height: var(--size-control-md);
+}
+
+/* `gap: normal` is what hands a subgrid its parent's gaps: the stacked
+   register's own gap on every row would otherwise move the plot off the
+   column the key stands in. */
 .crewlet-bar-list--beside .crewlet-bar-list__row {
-  flex-direction: row;
+  display: grid;
+  grid-column: 1 / -1;
+  grid-row: 1 / -1;
+  grid-template-columns: subgrid;
+  grid-template-rows: subgrid;
   align-items: center;
-  gap: var(--spacing-3);
-  min-height: var(--size-control-md);
+  gap: normal;
 }
 
 .crewlet-bar-list__names {
-  display: flex;
-  flex: none;
-  flex-direction: column;
-  width: var(--crewlet-bar-list-label-width);
-  min-width: 0;
+  display: contents;
   line-height: var(--font-line-height-tight);
 }
 
+.crewlet-bar-list--beside .crewlet-bar-list__names > .crewlet-bar-list__label {
+  grid-row: 1;
+  grid-column: 1;
+}
+
+.crewlet-bar-list--beside .crewlet-bar-list__plot {
+  grid-row: 1;
+  grid-column: 2;
+}
+
+.crewlet-bar-list--beside .crewlet-bar-list__names > .crewlet-bar-list__sub {
+  grid-row: 2;
+  grid-column: 1;
+}
+
 .crewlet-bar-list--beside .crewlet-bar-list__label {
-  flex: none;
   color: var(--color-text-secondary);
 }
 
@@ -240,7 +283,6 @@
 
 .crewlet-bar-list__plot {
   display: block;
-  flex: 1 1 auto;
   min-width: 0;
 }
 
@@ -296,10 +338,10 @@
 }
 
 /*
- * THE KEY UNDER A SPLIT BAR, at the caption step, starting where the bar
- * starts: under the plot in the BESIDE register, past the words' column and
- * the gap after it, so each name stands under the bar it keys rather than
- * under the row's own name.
+ * THE KEY UNDER A SPLIT BAR, at the caption step. In the BESIDE register it
+ * stands on the row's second line, under the bar it keys (see the item's
+ * grid above), so each name stands under its part rather than under the
+ * row's own name.
  */
 .crewlet-bar-list__key {
   margin-top: var(--spacing-1);
@@ -307,8 +349,11 @@
 }
 
 .crewlet-bar-list--beside .crewlet-bar-list__key {
+  grid-row: 2;
+  grid-column: 2;
+  align-self: center;
   margin-top: 0;
-  padding-inline-start: calc(var(--crewlet-bar-list-label-width) + var(--spacing-3));
+  pointer-events: none;
 }
 
 /* ─── Stacked bar ─────────────────────────────────────────────── */

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-QJZ3Y6WW.js';
+export { ALL_ITEMS, CopyableCell, DATA_TABLE_LABELS, DataTable, RowActionsMenu } from '../chunk-CVB7O3SZ.js';
 import '../chunk-LSB3EHBW.js';
 import '../chunk-EUCC37WY.js';
-import '../chunk-YCTMKKRA.js';
+import '../chunk-BTHX2FS3.js';
 import '../chunk-AV2DXAEL.js';
+import '../chunk-YCTMKKRA.js';
 import '../chunk-5VNUYO76.js';
-import '../chunk-BTHX2FS3.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-7RPGY3JE.js';
 import '../chunk-R25RGPUB.js';

package/dist/DataView/index.js

@@ -1,20 +1,20 @@
-export { DATA_VIEW_TOOLBAR_LABELS, DataView, DataViewToolbar, FILTER_AXIS_LABELS, FilterAxisBar, FilterAxisChip, applyColumnFilters, applyFilters, blankFilterValue, defaultOperator, filterDefsFromColumns, filterHasValue, filterPredicate, formatFilterValue, operatorOf, tableColumns } from '../chunk-CHG7VT2M.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-5I56UXBJ.js';
-import '../chunk-PDUZO35I.js';
-import '../chunk-QJZ3Y6WW.js';
+import '../chunk-HOXGBLEY.js';
+import '../chunk-SMBKXWML.js';
+import '../chunk-6MU7HNB4.js';
+import '../chunk-ZGX2DP7F.js';
+import '../chunk-CVB7O3SZ.js';
 import '../chunk-LSB3EHBW.js';
 import '../chunk-EUCC37WY.js';
-import '../chunk-YCTMKKRA.js';
+import '../chunk-BTHX2FS3.js';
+import '../chunk-5I56UXBJ.js';
+import '../chunk-PDUZO35I.js';
 import '../chunk-GXQ3B46I.js';
 import '../chunk-AV2DXAEL.js';
+import '../chunk-YCTMKKRA.js';
 import '../chunk-5VNUYO76.js';
-import '../chunk-SMBKXWML.js';
-import '../chunk-BTHX2FS3.js';
-import '../chunk-6MU7HNB4.js';
-import '../chunk-ZGX2DP7F.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/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';