@crewlethq/ui 0.9.0 → 0.11.0

package/dist/index.js

@@ -1,101 +1,105 @@
-import './chunk-YPTC4TX5.js';
+import './chunk-PQLMLG5K.js';
+export { TreeCanvas } from './chunk-5WEVLIB6.js';
 import './chunk-AER7UDD4.js';
+export { ThemeToggle } from './chunk-ORNOOMVY.js';
+export { DEFAULT_TIME_WINDOW_LABELS, TIME_WINDOW_SPANS, TimeWindowPicker, describeTimeWindow, isTimeWindowSet, parseTimeWindowDuration, resolveTimeWindow, timeWindowMatchesPreset } from './chunk-HLBRPES3.js';
 export { Timeline, TimelineItem } from './chunk-O67VF5MS.js';
 export { ToastProvider, Toaster, useToast } from './chunk-UG5ZMAXW.js';
-export { Tooltip } from './chunk-CQY5NTRS.js';
-export { TreeCanvas } from './chunk-L7THQMFB.js';
+export { Switch } from './chunk-A722MUNR.js';
+export { Table } from './chunk-V2N3BMOT.js';
 export { TagGroup } from './chunk-E6UWRXNM.js';
-export { TagsInput } from './chunk-MPXI6FM6.js';
+export { TagsInput } from './chunk-7JGWSOLM.js';
 export { Text } from './chunk-23DHIMJA.js';
-export { DensitySwitcher, ThemeSwitcher } from './chunk-X6K6OZ47.js';
-export { ThemeToggle } from './chunk-ORNOOMVY.js';
+export { DensitySwitcher, ThemeSwitcher } from './chunk-WEIINZPA.js';
 export { applyDensity, applyStoredPreferences, applyTheme, resolveTheme, useDensityPreference, useSystemTheme, useThemePreference } from './chunk-K3OWD7BJ.js';
-export { DEFAULT_TIME_WINDOW_LABELS, TIME_WINDOW_SPANS, TimeWindowPicker, describeTimeWindow, isTimeWindowSet, parseTimeWindowDuration, resolveTimeWindow, timeWindowMatchesPreset } from './chunk-IZHN5I3H.js';
+export { Select } from './chunk-SEFMO2EV.js';
+export { matchesShortcut, useShortcut } from './chunk-2FPENTCF.js';
 export { NavGroup, NavItem, SidebarNav } from './chunk-IVFJD7WY.js';
 export { Skeleton } from './chunk-W5J7R5EB.js';
 export { StatCard } from './chunk-IKB6HFGK.js';
 export { StatGroup } from './chunk-QVAFL2LE.js';
 export { Stepper } from './chunk-5QWIJSQM.js';
-export { Switch } from './chunk-A722MUNR.js';
-export { Table } from './chunk-V2N3BMOT.js';
+export { PricingCard } from './chunk-UCYIRDND.js';
+export { Tag } from './chunk-LOECRMHA.js';
+export { StatusDot } from './chunk-WIATRXEJ.js';
 export { Prose } from './chunk-JCSA3XVH.js';
 export { SearchTrigger } from './chunk-6DRDCT22.js';
 export { Section } from './chunk-A2UXBCLO.js';
-import './chunk-UI6HWAWE.js';
+import './chunk-UAQIUSSK.js';
 export { SegmentedMeter, segmentedMeterLabel } from './chunk-4AK52VHB.js';
-export { Select } from './chunk-SEFMO2EV.js';
-export { matchesShortcut, useShortcut } from './chunk-2FPENTCF.js';
+export { DEFAULT_METER_THRESHOLDS, METER_STATES, Meter, meterState, meterStateTone, meterTone, progressTone } from './chunk-4PZ6FJKW.js';
 export { NewItemsNotice } from './chunk-PXU6HOZB.js';
-export { OrgNodeDisclosure, OrgNodeLabel, OrgNodeLead } from './chunk-K7OS4O2U.js';
-export { OrgTable, OrgTableActions, OrgTableAdd, OrgTableName } from './chunk-JB6AN4ZC.js';
-export { TreeGrid } from './chunk-SX2DFTQV.js';
+export { OrgNodeDisclosure, OrgNodeLabel, OrgNodeLead } from './chunk-IHGKPEEV.js';
+export { OrgTable, OrgTableActions, OrgTableAdd, OrgTableName } from './chunk-ZMJHK7DR.js';
+export { TreeGrid } from './chunk-MCPKHYMC.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';
-export { OrgLabel } from './chunk-J3IS2TOA.js';
-export { PricingCard } from './chunk-UCYIRDND.js';
-export { Tag } from './chunk-LOECRMHA.js';
-export { StatusDot } from './chunk-WIATRXEJ.js';
+export { OrgLabel } from './chunk-6OF2DBKY.js';
 export { AutoGrid, Inline, Spacer, Stack } from './chunk-W4ENKCXJ.js';
 export { Link } from './chunk-ZPSOF6VL.js';
 export { List, ListItem } from './chunk-DS2C73RJ.js';
-export { ListInput } from './chunk-6HXH57BL.js';
-export { DEFAULT_METER_THRESHOLDS, METER_STATES, Meter, meterState, meterStateTone, meterTone, progressTone } from './chunk-4PZ6FJKW.js';
+export { ListInput } from './chunk-LZP7FGT7.js';
+export { Eyebrow } from './chunk-RK4XPHVG.js';
+export { FactList } from './chunk-URYDN2KA.js';
+export { Tooltip } from './chunk-CQY5NTRS.js';
 export { FILTER_CHIP_ATTRIBUTE, FilterChip, FilterChipGroup } from './chunk-5YLON2PW.js';
 export { useFullscreen } from './chunk-XDTYBF2F.js';
-export { HuePicker } from './chunk-26TXVHN2.js';
-export { NODE_HUES, NODE_HUE_NAMES, isNodeHue } from './chunk-AYKXMIOR.js';
-export { SegmentedControl } from './chunk-LPHHDCN3.js';
-export { TabPanel, Tabs, tabId } from './chunk-HEOVQZL7.js';
+import './chunk-EXHQ2QVW.js';
+export { ImageUpload } from './chunk-LAQK4V3Z.js';
 export { InlineCode } from './chunk-NN62JQLR.js';
-export { ImageUpload } from './chunk-E3HDS4F7.js';
 export { DescriptionList, DescriptionListItem } from './chunk-XN4JBAN3.js';
 export { DIFF_LIST_LABELS, DiffList } from './chunk-LFHCXZO5.js';
-export { Disclosure } from './chunk-MICH6QSJ.js';
+export { Disclosure } from './chunk-S4RCG44T.js';
 export { EmptyState } from './chunk-RA2ULG6H.js';
-export { EntityChip } from './chunk-Y2V3TSQC.js';
+export { EntityChip } from './chunk-DDTDN5L2.js';
 export { ErrorBoundary } from './chunk-XX2VQE55.js';
-export { Eyebrow } from './chunk-RK4XPHVG.js';
-export { Combobox } from './chunk-UYK72NOS.js';
-export { CommandPalette } from './chunk-IGWPZZIB.js';
+export { CodeBlock } from './chunk-KGTQ5CVD.js';
+export { Combobox } from './chunk-ELZKOVEC.js';
+export { CommandPalette } from './chunk-6SDGRKQ7.js';
 export { Container } from './chunk-QVE4GJAT.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';
+export { CopyButton, Copyable } from './chunk-YACKC3K2.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-CIOKUMVC.js';
 export { Toolbar, ToolbarOverflow, ToolbarWide } from './chunk-PGRPNDWM.js';
 export { RelativeTime, currentNow, formatElapsed, formatExact, formatRelative, formatUntil, toISO, toInstant, useNow } from './chunk-3CZ7XAVY.js';
 export { PageHeader } from './chunk-HOXGBLEY.js';
+export { DEFAULT_DATE_TIME_PICKER_LABELS, DateTimePicker } from './chunk-JCNUQ3US.js';
 export { Kbd, isApplePlatform, keyGlyph } from './chunk-SMBKXWML.js';
+export { FormField, FormRow, FormSection, Input, InputAffix, Label, ReadOnlyField, Textarea } from './chunk-FTEJPHBI.js';
 export { TYPE_AHEAD_WINDOW, useListbox, useOptionKeys } from './chunk-6MU7HNB4.js';
-export { FormField, FormRow, FormSection, Input, InputAffix, Label, ReadOnlyField, Textarea } from './chunk-ZGX2DP7F.js';
-export { ALL_ITEMS, CopyableCell, DATA_TABLE_LABELS, DataTable, RowActionsMenu } from './chunk-CVB7O3SZ.js';
-export { Menu } from './chunk-LSB3EHBW.js';
+export { ALL_ITEMS, CopyableCell, DATA_TABLE_LABELS, DataTable, RowActionsMenu } from './chunk-R4ZJB5YX.js';
+export { Menu } from './chunk-TFH6SYWB.js';
 export { EMPTY_VALUE, EmptyValue } from './chunk-EUCC37WY.js';
-export { ConfirmModal, Modal } from './chunk-BTHX2FS3.js';
-export { DEFAULT_DATE_TIME_PICKER_LABELS, DateTimePicker } from './chunk-5I56UXBJ.js';
-export { Popover } from './chunk-PDUZO35I.js';
+export { ConfirmModal, Modal } from './chunk-TEEJSTFG.js';
+export { useClipboard, writeClipboard } from './chunk-5VNUYO76.js';
 export { CalendarGrid, compareDays, daysInMonth, sameDay, shiftDay, shiftMonth, today } from './chunk-GXQ3B46I.js';
 export { Callout } from './chunk-R6FBDTP3.js';
-export { CANVAS_COMPOSE_CONTEXT, CANVAS_FIT_MAX_ZOOM, CANVAS_FIT_PADDING, CANVAS_FOCUS_CONTEXT, CANVAS_MAX_ZOOM, CANVAS_MIN_ZOOM, CANVAS_PAN_MARGIN, CANVAS_PAN_STEP, CANVAS_REVEAL_PADDING, CANVAS_TAP_SLOP, CANVAS_WHEEL_LINE_PX, CANVAS_WHEEL_ZOOM_PER_PIXEL, CANVAS_ZOOM_CEILING, CANVAS_ZOOM_LIMITS, CANVAS_ZOOM_STEP, Canvas, IDENTITY_VIEW, anchorView, beyondSlop, clampPan, clampZoom, fitView, panBy, pinchView, regionView, revealView, screenRect, toScreen, toWorld, wheelPixels, wheelZoomFactor, zoomAt, zoomLimits } from './chunk-VE6LD3KM.js';
+export { CANVAS_COMPOSE_CONTEXT, CANVAS_FIT_MAX_ZOOM, CANVAS_FIT_PADDING, CANVAS_FOCUS_CONTEXT, CANVAS_MAX_ZOOM, CANVAS_MIN_ZOOM, CANVAS_PAN_MARGIN, CANVAS_PAN_STEP, CANVAS_REVEAL_PADDING, CANVAS_TAP_SLOP, CANVAS_WHEEL_LINE_PX, CANVAS_WHEEL_ZOOM_PER_PIXEL, CANVAS_ZOOM_CEILING, CANVAS_ZOOM_LIMITS, CANVAS_ZOOM_STEP, Canvas, IDENTITY_VIEW, anchorView, beyondSlop, clampPan, clampZoom, fitView, panBy, pinchView, regionView, revealView, screenRect, toScreen, toWorld, wheelPixels, wheelZoomFactor, zoomAt, zoomLimits } from './chunk-2PZBIHRV.js';
 import './chunk-53DVJCVW.js';
-export { Card } from './chunk-CEOXFO3E.js';
+export { Button, ButtonLink } from './chunk-OG6CL3EB.js';
+export { Card } from './chunk-EG6NYWVK.js';
 export { useCardHeaderSlot } from './chunk-AV2DXAEL.js';
-export { CHARACTER_PICKER_COLUMNS, CharacterPicker } from './chunk-IKH3Y4MP.js';
-import './chunk-CBOICT64.js';
+import './chunk-3L5NHASN.js';
 export { ActivityStrip, BarList, ChartTooltip, DATA_COLORS, DATA_COLOR_OTHER, Legend, Sparkline, StackedBar, StackedColumns, TimeSeries, dataColor, niceScale, useChartHover } from './chunk-4WNNEDKO.js';
 export { Checkbox } from './chunk-YCTMKKRA.js';
-export { CodeBlock } from './chunk-MORLKUGM.js';
-export { CopyButton, Copyable } from './chunk-26SCUACK.js';
-export { useClipboard, writeClipboard } from './chunk-5VNUYO76.js';
-export { Accordion, AccordionItem } from './chunk-RIAZM6L3.js';
-export { DisclosureAnatomy } from './chunk-FZVJDJFN.js';
-export { Count } from './chunk-BHHIIK3M.js';
+export { Accordion, AccordionItem } from './chunk-G2AVKPSL.js';
+export { DisclosureAnatomy } from './chunk-ENJUPIND.js';
 export { HeadingLevelProvider, headingTag, nextHeadingLevel, useHeadingLevel } from './chunk-PQADV6P6.js';
 export { ADD_PILL_MS, AddPill } from './chunk-74WGARJE.js';
+export { AppShell, AppShellRail, AppShellRailRow, AppShellToggle, AppShellTopbar, useAppShell } from './chunk-7LD6P32I.js';
+export { IconButton } from './chunk-4FQT6ZAY.js';
 export { Announcer, announce, useAnnouncer } from './chunk-RSAQOKH3.js';
-export { AppShell, AppShellRail, AppShellRailRow, AppShellToggle, AppShellTopbar, useAppShell } from './chunk-OVLJEVQS.js';
+export { AvatarStack, avatarStackLabel } from './chunk-3UK4VFSK.js';
+export { AvatarPicker } from './chunk-HV6IZFBK.js';
+export { HuePicker } from './chunk-K5Q2DK3P.js';
+export { NODE_HUES, NODE_HUE_NAMES, isNodeHue } from './chunk-AYKXMIOR.js';
+export { SegmentedControl } from './chunk-EBBAAQDY.js';
+export { TabPanel, Tabs, tabId } from './chunk-JHQUT4WJ.js';
+export { Popover } from './chunk-PDUZO35I.js';
+export { CHARACTER_PICKER_COLUMNS, CharacterPicker } from './chunk-YXMCUKFI.js';
+import './chunk-CBOICT64.js';
+export { Count } from './chunk-BHHIIK3M.js';
 export { LAYER_GAP, LAYER_REPOSITION_EVENT, LayerHost, outsideBounds, placePopup, useLayerContainer, viewportBounds } from './chunk-7RPGY3JE.js';
 export { focusables, isComposing, isModalLayerOpen, layerCount, useBodyScrollLock, useModalLayer, usePopupLayer } from './chunk-R25RGPUB.js';
-export { IconButton } from './chunk-4FQT6ZAY.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';
-export { BrandLockup } from './chunk-7KBNFFM3.js';
-export { Button, ButtonLink } from './chunk-OG6CL3EB.js';
 export { VisuallyHidden } from './chunk-BZFWDIV6.js';
+export { AVATAR_CHARACTER_FULL_DETAIL, AVATAR_CORNER_RATIO, AVATAR_SIZES, AVATAR_STATUSES, AVATAR_STATUS_LABELS, Avatar, avatarCorner, avatarPixels, avatarTint, getInitials } from './chunk-HI6Q2UXQ.js';
+export { BrandLockup } from './chunk-7KBNFFM3.js';
 export { cx } from './chunk-ODEQTPFM.js';

package/dist/styles.css

@@ -1088,7 +1088,7 @@
 }
 
 
-/* Avatar-JAU77SHZ.css */
+/* Avatar-QHYOFID3.css */
 /*
  * The identity badge.
  *
@@ -1101,8 +1101,10 @@
  * 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 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.
+ * A STATE IS A CORNER BADGE, NEVER A LINE ROUND THE PLATE. A ring in a state's
+ * hue round a plate in the agent's own hue put two colours on a 32px mark and
+ * framed what the agent was doing louder than who it is. The one ring left is
+ * SELECTED, in the accent.
  *
  * 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
@@ -1302,11 +1304,12 @@
   color: var(--color-node-blue);
 }
 
-/* ── the state ring ────────────────────────────────────────────────────── */
+/* ── the selected ring ────────────────────────────────────────────────── */
 
 /*
  * A 1.5px LINE 2px OUTSIDE THE BADGE, which is the design's ring: it draws a
  * 3.5px shadow over a 2px one in the card's colour, and 3.5 less 2 is 1.5.
+ * Longhands, so nothing else that sets an outline resets the ring's geometry.
  *
  * AN OUTLINE RATHER THAN THAT SHADOW PAIR, for three reasons. The gap is
  * TRANSPARENT, so the ring reads on whatever the badge stands on, where the
@@ -1314,44 +1317,156 @@
  * other ground. An outline follows the corner, the squircle's included, in
  * every engine this package supports. And forced-colors mode keeps an outline
  * and drops every shadow, so the ring is still drawn for the readers who most
- * need a boundary; it is drawn in the system colour there, which is why the
- * state is always said in words beside the badge as well.
- *
- * LONGHANDS, so the tone rules below set the colour alone and cannot reset the
- * geometry, whichever order they are read in. Each fill is measured at 3:1 as
- * a mark on every opaque surface by @crewlethq/tokens, which is the floor a
- * boundary a reader has to see is held to.
- */
-.crewlet-avatar--ring-info,
-.crewlet-avatar--ring-warning,
-.crewlet-avatar--ring-danger,
-.crewlet-avatar--ring-success,
+ * need a boundary.
+ *
+ * SELECTED, in the accent, which is what the accent means: where the reader
+ * is. It is the only place a badge spends the accent, and the accent is
+ * measured at 3:1 as a mark on every opaque surface by @crewlethq/tokens.
+ */
 .crewlet-avatar--ring-brand {
   outline-style: solid;
   outline-width: 1.5px;
   outline-offset: 2px;
+  outline-color: var(--color-brand-accent);
 }
 
-.crewlet-avatar--ring-info {
-  outline-color: var(--color-feedback-info);
+/* ── the status badge ─────────────────────────────────────────────────── */
+
+/*
+ * THE FRAME is the face's own box, so a badge with a status takes exactly the
+ * room one without takes: the corner badge hangs past it rather than growing
+ * it, and a row lays out the same either way. The badge is 0.42 of the box,
+ * never under 10px, which is the size its glyph stays a shape at.
+ */
+.crewlet-avatar-frame {
+  --crewlet-avatar-status-size: max(10px, calc(var(--crewlet-avatar-size) * 0.42));
+  --crewlet-avatar-status-overhang: 2px;
+  --crewlet-avatar-status-gap: 1.5px;
+  position: relative;
+  display: inline-flex;
+  flex: none;
+  width: var(--crewlet-avatar-size);
+  height: var(--crewlet-avatar-size);
+  vertical-align: middle;
 }
 
-.crewlet-avatar--ring-warning {
-  outline-color: var(--color-feedback-warning);
+/*
+ * THE NOTCH: the face is masked by a circle a gap wider than the badge, centred
+ * where the badge sits, so the gap shows whatever the badge stands on. A ring
+ * of the ground's colour would need to know that ground, and a badge on a card,
+ * a hovered row and the page would each need a different one. A mask reads only
+ * alpha, so its black is opacity rather than a colour.
+ */
+.crewlet-avatar--notched {
+  --crewlet-avatar-status-centre: calc(
+    100% + var(--crewlet-avatar-status-overhang) - var(--crewlet-avatar-status-size) / 2
+  );
+  --crewlet-avatar-status-cut: calc(var(--crewlet-avatar-status-size) / 2 + var(--crewlet-avatar-status-gap));
+  -webkit-mask-image: radial-gradient(
+    circle at var(--crewlet-avatar-status-centre) var(--crewlet-avatar-status-centre),
+    transparent var(--crewlet-avatar-status-cut),
+    #000 calc(var(--crewlet-avatar-status-cut) + 0.5px)
+  );
+  mask-image: radial-gradient(
+    circle at var(--crewlet-avatar-status-centre) var(--crewlet-avatar-status-centre),
+    transparent var(--crewlet-avatar-status-cut),
+    #000 calc(var(--crewlet-avatar-status-cut) + 0.5px)
+  );
 }
 
-.crewlet-avatar--ring-danger {
-  outline-color: var(--color-feedback-danger);
+/*
+ * THE BADGE: a state's fill step carrying its glyph in the inverse ink, which
+ * the tokens' palette suite holds at 3:1 on each fill (`MARK_ON_FILL`). The
+ * transparent outline is drawn only in forced-colors mode, where the fill
+ * becomes the page's own colour and the outline is what keeps a boundary.
+ */
+.crewlet-avatar__status {
+  position: absolute;
+  right: calc(var(--crewlet-avatar-status-overhang) * -1);
+  bottom: calc(var(--crewlet-avatar-status-overhang) * -1);
+  display: grid;
+  place-items: center;
+  width: var(--crewlet-avatar-status-size);
+  height: var(--crewlet-avatar-status-size);
+  border-radius: var(--radius-circle);
+  outline: 1px solid transparent;
+  color: var(--color-text-inverse);
+  pointer-events: none;
 }
 
-.crewlet-avatar--ring-success {
-  outline-color: var(--color-feedback-success);
+.crewlet-avatar__status > svg {
+  display: block;
+  width: 100%;
+  height: 100%;
 }
 
-/* SELECTED, in the accent, which is what the accent means: where the reader
-   is. It is the only place a badge spends the accent. */
-.crewlet-avatar--ring-brand {
-  outline-color: var(--color-brand-accent);
+.crewlet-avatar__status--working {
+  background: var(--color-feedback-info);
+}
+
+.crewlet-avatar__status--needs {
+  background: var(--color-feedback-warning);
+}
+
+.crewlet-avatar__status--stopped {
+  background: var(--color-feedback-danger);
+}
+
+
+/* AvatarPicker-PREY36MG.css */
+/*
+ * The badge as a button, with a pencil pip on its corner saying it changes
+ * the badge. No chrome of its own beyond the focus ring: the badge is the
+ * control's face.
+ */
+.crewlet-avatar-picker {
+  position: relative;
+  display: inline-flex;
+  flex: none;
+  padding: 0;
+  border: 0;
+  border-radius: var(--radius-lg);
+  background: none;
+  cursor: pointer;
+}
+
+button.crewlet-avatar-picker:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: 2px;
+}
+
+.crewlet-avatar-picker__pip {
+  position: absolute;
+  right: calc(var(--spacing-1) * -1);
+  bottom: calc(var(--spacing-1) * -1);
+  display: grid;
+  place-items: center;
+  width: 16px;
+  height: 16px;
+  border: 1px solid var(--color-border-strong);
+  border-radius: var(--radius-circle);
+  background: var(--color-surface-elevated);
+  color: var(--color-text-secondary);
+}
+
+button.crewlet-avatar-picker:hover .crewlet-avatar-picker__pip {
+  color: var(--color-text-primary);
+}
+
+.crewlet-avatar-picker__body {
+  display: grid;
+  gap: var(--spacing-2);
+  width: max-content;
+  max-width: 100%;
+  padding: var(--spacing-3);
+}
+
+.crewlet-avatar-picker__label {
+  font-size: var(--font-size-2xs);
+  font-weight: var(--font-weight-medium);
+  letter-spacing: var(--font-letter-spacing-wide);
+  text-transform: uppercase;
+  color: var(--color-text-tertiary);
 }
 
 
@@ -7974,6 +8089,66 @@ svg.crewlet-datetime__chevron {
 }
 
 
+/* FactList-G2H73NFR.css */
+/*
+ * Read-only facts in one bordered box, a 32px row each: label and lock on the
+ * left, the value on the right. The rows share the box's hairline between
+ * them, so a list of six reads as one object rather than six cards.
+ */
+.crewlet-fact-list {
+  display: grid;
+  margin: 0;
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-md);
+  overflow: hidden;
+}
+
+.crewlet-fact-list__row {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  min-height: 32px;
+  padding: var(--spacing-1) var(--spacing-3);
+  font-size: var(--font-size-compact);
+}
+
+.crewlet-fact-list__row + .crewlet-fact-list__row {
+  border-top: 1px solid var(--color-border-default);
+}
+
+.crewlet-fact-list__row.is-locked {
+  cursor: help;
+}
+
+.crewlet-fact-list__label {
+  display: flex;
+  flex: 1 1 auto;
+  align-items: center;
+  gap: var(--spacing-1);
+  min-width: 0;
+  margin: 0;
+  color: var(--color-text-tertiary);
+}
+
+.crewlet-fact-list__lock {
+  flex: none;
+  color: var(--color-text-tertiary);
+}
+
+.crewlet-fact-list__value {
+  display: flex;
+  flex: 0 1 auto;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--spacing-2);
+  min-width: 0;
+  margin: 0;
+  color: var(--color-text-secondary);
+  text-align: right;
+  overflow-wrap: anywhere;
+}
+
+
 /* FilterChip-EZ4QMW4E.css */
 /*
  * The filter chip: neutral until it is on, and then the accent.
@@ -8566,7 +8741,7 @@ svg.crewlet-datetime__chevron {
 }
 
 
-/* Input-DRFNI26F.css */
+/* Input-RAKNQJCV.css */
 /*
  * The form row: Input, Textarea, Label, FormField, FormRow, FormSection and
  * ReadOnlyField.
@@ -9071,6 +9246,13 @@ svg.crewlet-datetime__chevron {
   color: var(--color-text-tertiary);
 }
 
+/* SHOWN ONLY WHILE THE FIELD HAS FOCUS (`helperOnFocus`): a dense form reads as
+   labels and values at rest, and the sentence appears under the field the
+   reader is in. Still described, so a screen reader hears it on entry. */
+.crewlet-form-field--helper-on-focus:not(:focus-within) .crewlet-form-field__helper {
+  display: none;
+}
+
 /*
  * The error line, on the danger INK. It stays BESIDE the help rather than
  * replacing it: a reader told they are wrong needs the line that says what
@@ -15434,7 +15616,7 @@ svg.crewlet-select__chevron {
 }
 
 
-/* Tabs-BWFQSWY3.css */
+/* Tabs-5I5Q5KKM.css */
 /*
  * The pill register: Tabs and SegmentedControl.
  *
@@ -15775,6 +15957,39 @@ svg.crewlet-select__chevron {
   }
 }
 
+/* ── markers ──────────────────────────────────────────────────────────────
+   What needs the reader behind a tab: a danger count for problems, a 6px
+   dot for a warning or an unsaved change. One per tab, the most urgent. */
+.crewlet-tabs__marker {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+}
+.crewlet-tabs__marker--danger {
+  min-width: 16px;
+  height: 16px;
+  padding: 0 var(--spacing-1);
+  border-radius: var(--radius-circle);
+  background: var(--color-feedback-danger-soft);
+  color: var(--color-feedback-danger-ink);
+  font-family: var(--font-family-mono);
+  font-size: var(--font-size-2xs);
+  line-height: 1;
+}
+.crewlet-tabs__marker--warning,
+.crewlet-tabs__marker--changed {
+  width: 6px;
+  height: 6px;
+  border-radius: var(--radius-circle);
+}
+.crewlet-tabs__marker--warning {
+  background: var(--color-feedback-warning);
+}
+.crewlet-tabs__marker--changed {
+  background: var(--color-brand-accent);
+}
+
 
 /* Tag-4BRQS6GN.css */
 /*

package/dist/utils/index.js

@@ -1,5 +1,5 @@
 import '../chunk-AER7UDD4.js';
-export { NODE_HUES, NODE_HUE_NAMES, isNodeHue } from '../chunk-AYKXMIOR.js';
 export { useClipboard, writeClipboard } from '../chunk-5VNUYO76.js';
 export { HeadingLevelProvider, headingTag, nextHeadingLevel, useHeadingLevel } from '../chunk-PQADV6P6.js';
+export { NODE_HUES, NODE_HUE_NAMES, isNodeHue } from '../chunk-AYKXMIOR.js';
 export { cx } from '../chunk-ODEQTPFM.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crewlethq/ui",
-  "version": "0.9.0",
+  "version": "0.11.0",
   "description": "Crewlet shared React components built on @crewlethq/tokens and @crewlethq/icons.",
   "license": "MIT",
   "repository": {
@@ -42,8 +42,8 @@
     "clean": "rm -rf dist src/generated"
   },
   "dependencies": {
-    "@crewlethq/icons": "0.9.0",
-    "@crewlethq/tokens": "0.9.0"
+    "@crewlethq/icons": "0.11.0",
+    "@crewlethq/tokens": "0.11.0"
   },
   "peerDependencies": {
     "react": ">=18",

package/dist/chunk-UDW3DAP5.js

@@ -1,125 +0,0 @@
-import { cx } from './chunk-ODEQTPFM.js';
-import { useState, useEffect } from 'react';
-import { CrewletCharacter } from '@crewlethq/icons/characters';
-import { jsx } from 'react/jsx-runtime';
-
-var AVATAR_SIZES = { xs: 20, sm: 26, md: 32, lg: 40 };
-var AVATAR_CORNER_RATIO = 0.29;
-var AVATAR_CHARACTER_FULL_DETAIL = 56;
-var getInitials = (name) => {
-  if (!name) return "?";
-  const words = name.trim().split(/[\s\-_.]+/).filter(Boolean);
-  if (words.length === 0) return "?";
-  const first = (word2) => (Array.from(word2)[0] ?? "").toUpperCase();
-  if (words.length >= 2) return words.slice(0, 2).map(first).join("") || "?";
-  const word = words[0];
-  const humps = word.split(/(?<=\p{Ll})(?=\p{Lu})/u);
-  if (humps.length >= 2) return humps.slice(0, 2).map(first).join("");
-  return Array.from(word).slice(0, 2).map((character) => character.toUpperCase()).join("") || "?";
-};
-var TINT_COUNT = 10;
-var avatarTint = (seed) => {
-  let hash = 0;
-  for (let i = 0; i < seed.length; i += 1) {
-    hash = hash * 31 + seed.charCodeAt(i) >>> 0;
-  }
-  return hash % TINT_COUNT;
-};
-function avatarPixels(size) {
-  return typeof size === "number" ? size : AVATAR_SIZES[size];
-}
-function avatarCorner(pixels) {
-  return pixels * AVATAR_CORNER_RATIO;
-}
-var Avatar = ({
-  src,
-  name,
-  size = "md",
-  kind = "agent",
-  tone = "neutral",
-  ring,
-  decorative = false,
-  colorSeed,
-  character,
-  hue,
-  className,
-  style,
-  ...rest
-}) => {
-  const [imageFailed, setImageFailed] = useState(false);
-  useEffect(() => {
-    setImageFailed(false);
-  }, [src]);
-  const step = typeof size === "number" ? null : size;
-  const pixels = avatarPixels(size);
-  const measured = step === null ? {
-    "--crewlet-avatar-size": `${pixels}px`,
-    fontSize: Math.max(9, Math.round(pixels * 0.36))
-  } : {};
-  const seeded = tone === "seeded" ? avatarTint(colorSeed ?? name ?? "") : null;
-  const classes = cx(
-    "crewlet-avatar",
-    `crewlet-avatar--${kind}`,
-    step === null ? null : `crewlet-avatar--${step}`,
-    ring === void 0 ? null : `crewlet-avatar--ring-${ring}`,
-    className
-  );
-  if (character !== void 0 && kind === "agent") {
-    return /* @__PURE__ */ jsx(
-      "span",
-      {
-        ...rest,
-        className: cx(
-          classes,
-          "crewlet-avatar--character",
-          hue === void 0 ? "crewlet-avatar--neutral" : `crewlet-avatar--hue-${hue}`
-        ),
-        style: { ...measured, ...style },
-        role: decorative ? void 0 : "img",
-        "aria-hidden": decorative ? true : void 0,
-        "aria-label": decorative ? void 0 : name ? `${name} avatar` : "Avatar",
-        children: /* @__PURE__ */ jsx(
-          CrewletCharacter,
-          {
-            className: "crewlet-avatar__character",
-            character,
-            detail: pixels >= AVATAR_CHARACTER_FULL_DETAIL ? "full" : "compact"
-          }
-        )
-      }
-    );
-  }
-  if (src && !imageFailed) {
-    return /* @__PURE__ */ jsx(
-      "img",
-      {
-        ...rest,
-        className: cx(classes, "crewlet-avatar--image"),
-        style: { ...measured, ...style },
-        src,
-        alt: decorative ? "" : name ?? "",
-        "aria-hidden": decorative ? true : void 0,
-        onError: () => setImageFailed(true)
-      }
-    );
-  }
-  return /* @__PURE__ */ jsx(
-    "span",
-    {
-      ...rest,
-      className: cx(
-        classes,
-        "crewlet-avatar--fallback",
-        `crewlet-avatar--${tone}`,
-        seeded === null ? null : `crewlet-avatar--tint-${seeded}`
-      ),
-      style: { ...measured, ...style },
-      role: decorative ? void 0 : "img",
-      "aria-hidden": decorative ? true : void 0,
-      "aria-label": decorative ? void 0 : name ? `${name} avatar` : "Avatar",
-      children: getInitials(name)
-    }
-  );
-};
-
-export { AVATAR_CHARACTER_FULL_DETAIL, AVATAR_CORNER_RATIO, AVATAR_SIZES, Avatar, avatarCorner, avatarPixels, avatarTint, getInitials };