@crewlethq/ui 0.44.0 → 0.46.0

package/README.md

@@ -41,7 +41,7 @@ import { Button } from '@crewlethq/ui/Button';  // 8 KB of CSS, not 182 KB
 | Area | Components |
 | ---- | ---------- |
 | Actions | `Button` and `ButtonLink` (variants `primary`, `secondary`, `outline`, `ghost`, `accent`, `danger`; sizes `small`, `medium`, `large`; shapes `square`, `pill`), `IconButton`, `Menu`, `Link`, `Copyable`, `CopyButton`, `DownloadButton`, `Kbd` |
-| Content and text | `Text` (the eight registers and `inherit`), `Prose`, `Document`, `DocumentTitle` and `DocumentTitleField`, the Markdown grammar (`parseMarkdown`, `parseMarkdownSpans`, `markdownInline`, `safeHref` and the line readers, with no React in it), `Highlight`, `InlineCode`, `List` and `ListItem`, `DescriptionList`, `Timeline`, `RelativeTime`, `Note`, `Divider` |
+| Content and text | `Text` (the eight registers and `inherit`), `Prose`, `Statement`, `Document`, `DocumentTitle` and `DocumentTitleField`, the Markdown grammar (`parseMarkdown`, `parseMarkdownSpans`, `markdownInline`, `safeHref` and the line readers, with no React in it), `Highlight`, `InlineCode`, `List` and `ListItem`, `DescriptionList`, `Timeline`, `RelativeTime`, `Note`, `Divider` |
 | Forms | `Input`, `Textarea`, `Label`, `FormField`, `FormRow`, `Checkbox`, `CheckboxGroup`, `ConfirmField`, `Select`, `Tag`, `TagsInput`, `DateTimePicker`, `TimeWindowPicker`, `ImageUpload`, `CharacterPicker`, `HuePicker`, `AvatarPicker`, `FactList`, `ChoiceList`, `Composer`, `MarkdownEditor`, `RichEditor` (with `preloadRichEditor`, and the round trip `roundTripMarkdown` and `canonicalMarkdown` from `@crewlethq/ui/RichEditorMarkdown`) |
 | Data display | `DataTable`, `CopyableCell`, `Table`, the read-only table cells (`TableKeyCell`, `TableNumberCell`, `TableDateCell`, `TableEntityCell`, `TableStatusCell`, `TableTagsCell`, `TableTextCell`), `StatCard`, `Meter`, `SegmentedMeter`, `Stepper`, `PricingCard`, `Avatar`, `AvatarStack`, `EntityChip`, `CodeBlock`, `QrCode`, `ObjectHeader`, `FactLine`, `SetByLine`, `Skeleton`, `Eyebrow`, `StatGroup`, `PinTile`, `IconTile`, `SettingsTable` (with `SettingsTable.Row`), `CatalogTile` |
 | List screens | `DataView`, and its parts on their own: `DataViewToolbar`, `FilterAxisBar`, `FilterAxisChip`, plus the filter model (`filterDefsFromColumns`, `applyColumnFilters`, `filterPredicate`, `blankFilterValue`) |
@@ -50,7 +50,7 @@ import { Button } from '@crewlethq/ui/Button';  // 8 KB of CSS, not 182 KB
 | 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`, `useHighlightRest` and `HIGHLIGHT_REST_MS`, `useClipboard`, `useDownload`, `downloadText`, `downloadBlob`, `safeFilename`, `toCsv`, `elementToPng` and `ElementToPngError`, `useOutcome`, `useAnnouncer`, `useNow`, `formatRelative`, `HeadingLevelProvider`, `cx`, the node hues (`NODE_HUES`, `NODE_HUE_NAMES`, `isNodeHue`) |
-| Layout | `Container`, `Section`, `Card`, `TileGrid`, `ListDetail`, `Tabs`, `Accordion`, `Disclosure`, `Outline` (with `useActiveHeading` and `scrollToHeading`), `TreeGrid` |
+| Layout | `Container`, `Section`, `Card`, `TileGrid`, `ListDetail`, `AsideLayout`, `Tabs`, `Accordion`, `Disclosure`, `Outline` (with `useActiveHeading` and `scrollToHeading`), `TreeGrid` |
 | Arranging a page | `ArrangeBoard`, `ArrangeGrid`, `ArrangeFrame` (with `useGridResize`), `ArrangeGroup`, `ArrangeList`, and the reorder hooks under them (`useReorder`, `useReorderLists`, `moveKey`) |
 | Application shell | `AppShell` with `AppShell.Rail`, `SectionFrame` (with `SectionFrame.Nav` and `SectionFrame.Body`), `LockedLabel`, `AppShell.Topbar`, `AppShell.AccountRow` and `useAppShell`, `AuthLayout`, `SidebarNav` and `NavItem`, `DirectoryList`, `BrandLockup`, `SearchTrigger`, `PageHeader`, `Toolbar`, `Stack`, `Inline`, `Spacer`, `AutoGrid`, `ErrorBoundary`, `useShortcut`, `useFullscreen`, `useIdle`, `useMediaMatch` |
 | Preferences | `ThemeToggle`, `ThemeSwitcher`, `DensitySwitcher`, `ThemeGallery`, `ThemeSwatch`, `useThemePreference`, `useDensityPreference`, `useSystemTheme`, `resolveTheme`, `applyStoredPreferences`, and the framework-free `applyTheme`, `applyPalette`, `applyDensity` with `THEME_PREFERENCES`, `DENSITY_PREFERENCES` and their guards |
@@ -204,6 +204,38 @@ 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.46.0
+
+The pieces for editing a company's principles where they are read: a statement or a list of policies changed in place on its own card, with nothing to go and find in another screen.
+
+**`InlineEditor` is new**: one record edited in place, as a form named by `label`. Its fields come first, then a bar with the `EditingStatus` at its start and Cancel and Save at its end. Mod+Enter saves from any field and Escape cancels, each only once nothing inside has claimed the key and never during an input method's composition. Enter in a one-line field does not submit the form, so saving is always the one gesture, and a `ListInput` inside it passes Mod+Enter through rather than adding an item. Escape and Cancel discard at once, so a caller holding a draft worth keeping asks first in `onCancel` while `dirty`. Save is never a dead button: while nothing has changed (`dirty`), while a field refuses its value (`invalid`) and while a save is in flight (`saving`) it stays reachable and says why it does nothing. `error` is said as an alert above the bar, and `notice` holds a `ConflictNote` once the record has moved on. The focus lands at the end of the first field as it opens (`focusOnMount`). It owns no state: the draft, the save, the conflict and the focus once it closes are the caller's.
+
+**`CharacterCount` is new**: how much of a limit a text has used ("120 / 500"), in the warning ink from nine tenths of the way and the danger ink past it, read as one sentence and announced only as it crosses a step. Characters are code points, as Go's `utf8.RuneCountInString` counts them, so an emoji counts once; `countCharacters` counts them. **`FormField` takes `limit={{ length, max }}`**, which draws the count at the end of the help line, joins it into the field's description and marks a value past it invalid. It is a soft limit: nothing typed or pasted is cut.
+
+**`Textarea` takes `singleLine`**: a one-line value that wraps so it can be read whole while it is edited (a one-line `Input` scrolled a 160-character mission sideways and showed only its tail). Enter and Shift+Enter write no line break, Ctrl or Command with Enter passes through to a form's save, and a line break pasted or dropped in (any of `\n`, `\r`, `\v`, `\f`, U+0085, U+2028 and U+2029, the set a server refusing a break in one line also counts) is folded into a space (`foldLineBreaks`) and said so through the `Announcer` (`foldedMessage`), never silently. It is announced as one line (`aria-multiline="false"`). **A `ListInput` without `multiline` now draws its items and its new-item box this way**, so a long policy wraps rather than being clipped to one line; Enter keeps its list rules. Under a hidden legend (`hideLabel`) the add control stands at the end of the box's row, rather than alone above it.
+
+**`EditingStatus` is read with a pause between its words**: "Editing, Unsaved changes" rather than "EditingUnsaved changes", since the dot between them is drawn by the stylesheet and a live region does not read it.
+
+**`ListInput`'s new-item text can be the owner's (`draft`, `onDraftChange`).** Held inside the list alone, a policy typed and not yet added was dropped by the form's Save without a word, and no unsaved-changes check could see it. A form that saves the list holds the draft and saves `withDraft(value, draft)`, which appends it trimmed. Left out, the list holds it as before.
+
+**`ListInput` also takes these additions, each off unless asked for.** `reorderByDrag` gives each row a grip it is dragged by, through `useReorder`. The grip belongs to the pointer: it is hidden from a screen reader and out of the tab order, since Alt+Up, Alt+Down and the Move buttons already cover reordering from the keyboard. `undoRemove` leaves a row where a removed item was, with Undo (which puts it back there, focused) and Dismiss, both described by the row's sentence; the focus goes to Undo, the row says the removal in place of an announcement, and it goes with the list's next change. `maxItems` replaces the new-item box with a sentence once the list is full (`fullMessage`). `maxLength` holds each item and the new-item box to a soft limit with a `CharacterCount`, counted on the trimmed text. `itemError` says a refusal under the one item it is about and links it to that item. `hideLabel` keeps the legend for assistive technology only, for a list already titled by the card around it. A `ref` gives `focusItem(index)` and `focusNew()`. An item's control now sits in a `.crewlet-list-input__field` column with what is said under it.
+
+**`Text` takes `variant="passage"`**: words somebody wrote to be read whole (a mission on its card, a policy, a comment), at the body's size with the relaxed leading, the author's line breaks kept and a long word broken rather than overflowing. **`List` takes `density="compact"`**: rows a small step apart, and on `numbered-divided` in the body's size at its normal leading, so a card holds eight two-line policies on one screen. **`List` takes `measure`**: `normal` (68ch) or `wide` (80ch, the new `--size-measure-wide` token, for a list of statements such as a company's policies) holds each row's words to a reading measure while the row and its rule still span the list. Unset, the words take the row's width as before. `comfortable`, the default, is unchanged.
+
+**A compact `CatalogTile` never cuts its name**, and **a `TileGrid` holding one folds where a track would be narrower than its one-line header** (about 30rem): two tracks fold to one under 61rem, three under 92rem and four to two under 123rem. At a 1024px window two compact tiles stood on 415px tracks and cut the name to its first letter; a compact head short of room now wraps its state and its fact under the name instead.
+
+**`@crewlethq/icons` adds `TelescopeGlyph` and `ScrollTextGlyph`**: the vision's card and the standing policies' card, beside `TargetGlyph` for the mission. `Card.Header` already draws a glyph before its title through `icon`.
+
+## Changes in 0.45.0
+
+The pieces of the engine's Company › Principles page: a company's mission, vision and policies beside the facts about it.
+
+**`Statement` is new**: a label over the words a page exists to say (a mission, a vision, a goal), set a step over the body (`--font-size-lg`, the body's own step over it on a phone) at the reading measure, with the author's line breaks kept. A block such as a numbered list is drawn as given under the same label, so every statement on a page heads the same way. An unwritten one says so through `empty` (`title`, `description` and an optional `action`) as an inline empty state, never as grey text in the words' place. It is a region named by its label.
+
+**`AsideLayout` is new**: a page's main column with an aside beside it from 56rem of the layout's own width (a container query, not the window's), the aside `--crewlet-aside-layout-aside` wide (18rem by default). Narrower, the aside follows the main column past one hairline. Each column is a stack one step apart, and the aside is a complementary landmark named by `asideLabel`.
+
+**`EmptyState` takes `size="inline"`**: one left-aligned row on a dashed hairline, the sentence beside its one action and no glyph, for a part of a page that is empty while the rest of it is not.
+
 ## Changes in 0.44.0
 
 The pieces of the engine's Company › Integrations home, a summary of what a company has in use beside the directory of everything it could.

package/dist/AccessDeniedCard/index.js

@@ -1,4 +1,4 @@
-export { ACCESS_DENIED_REASONS, AccessDeniedCard } from '../chunk-KV3ODJXH.js';
-import '../chunk-RA2ULG6H.js';
+export { ACCESS_DENIED_REASONS, AccessDeniedCard } from '../chunk-QTMUKRTN.js';
+import '../chunk-PPUR46MK.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/AgentHandoffPanel/index.js

@@ -1,15 +1,18 @@
-export { AGENT_HANDOFF_LABELS, AgentHandoffPanel } from '../chunk-N3SHQ3VU.js';
+export { AGENT_HANDOFF_LABELS, AgentHandoffPanel } from '../chunk-RRPQMMCZ.js';
 import '../chunk-AUQPBL4O.js';
 import '../chunk-JQ7IFSF6.js';
 import '../chunk-OGXHZHRX.js';
-import '../chunk-7CXGSS7D.js';
+import '../chunk-O6H5XXVK.js';
 import '../chunk-NBDN5JZV.js';
-import '../chunk-ZI5G5RS7.js';
+import '../chunk-Z734SV4E.js';
+import '../chunk-XCUUI7E7.js';
 import '../chunk-SMBKXWML.js';
 import '../chunk-FZVJDJFN.js';
 import '../chunk-BHHIIK3M.js';
 import '../chunk-PQADV6P6.js';
+import '../chunk-RSAQOKH3.js';
 import '../chunk-OG6CL3EB.js';
+import '../chunk-H5XTJ7GJ.js';
 import '../chunk-LACA4JGC.js';
 import '../chunk-NUZHC6MM.js';
 import '../chunk-BZFWDIV6.js';

package/dist/AppShell/index.js

@@ -1,10 +1,10 @@
-export { AccountRow, AppShell, AppShellRail, AppShellRailRow, AppShellRailStatus, AppShellToggle, AppShellTopbar, useAppShell } from '../chunk-5AHDGYKN.js';
+export { AccountRow, AppShell, AppShellRail, AppShellRailRow, AppShellRailStatus, AppShellToggle, AppShellTopbar, useAppShell } from '../chunk-2KQR6JKE.js';
 import '../chunk-RTPQDNW3.js';
-import '../chunk-PCI7ZJ6Z.js';
+import '../chunk-TMM32U7D.js';
 import '../chunk-OMV5W53A.js';
-import '../chunk-H5XTJ7GJ.js';
 import '../chunk-2YTOOH3A.js';
 import '../chunk-OG6CL3EB.js';
+import '../chunk-H5XTJ7GJ.js';
 import '../chunk-LACA4JGC.js';
 import '../chunk-NUZHC6MM.js';
 import '../chunk-BZFWDIV6.js';

package/dist/ArrangeList/index.js

@@ -1,10 +1,12 @@
-export { ArrangeList, DEFAULT_ARRANGE_LABELS } from '../chunk-GPIRKHGS.js';
+export { ArrangeList, DEFAULT_ARRANGE_LABELS } from '../chunk-T7DXSFUX.js';
 import '../chunk-A722MUNR.js';
 import '../chunk-XJ2QEBMM.js';
-import '../chunk-EY7LACIR.js';
-import '../chunk-ZI5G5RS7.js';
+import '../chunk-RWET7W22.js';
+import '../chunk-Z734SV4E.js';
+import '../chunk-XCUUI7E7.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-RSAQOKH3.js';
+import '../chunk-H5XTJ7GJ.js';
 import '../chunk-LACA4JGC.js';
 import '../chunk-NUZHC6MM.js';
 import '../chunk-BZFWDIV6.js';

package/dist/ArtifactBar/index.js

@@ -1,7 +1,7 @@
-export { ARTIFACT_BAR_LABELS, ArtifactBar, ArtifactVersionChip } from '../chunk-UO5VJHWP.js';
+export { ARTIFACT_BAR_LABELS, ArtifactBar, ArtifactVersionChip } from '../chunk-U4HOKU6P.js';
 import '../chunk-OOC7Q67K.js';
-import '../chunk-BF5WV7NM.js';
-import '../chunk-KA75QPFM.js';
+import '../chunk-6FVGSWLS.js';
+import '../chunk-ILFEWRLG.js';
 import '../chunk-WIATRXEJ.js';
 import '../chunk-EGMQURBR.js';
 import '../chunk-I33UIUZD.js';
@@ -9,11 +9,11 @@ import '../chunk-ILDNJHRU.js';
 import '../chunk-CE2THTQR.js';
 import '../chunk-SMBKXWML.js';
 import '../chunk-BHHIIK3M.js';
-import '../chunk-PCI7ZJ6Z.js';
+import '../chunk-TMM32U7D.js';
 import '../chunk-OMV5W53A.js';
-import '../chunk-H5XTJ7GJ.js';
 import '../chunk-2YTOOH3A.js';
 import '../chunk-OG6CL3EB.js';
+import '../chunk-H5XTJ7GJ.js';
 import '../chunk-LACA4JGC.js';
 import '../chunk-NUZHC6MM.js';
 import '../chunk-BZFWDIV6.js';

package/dist/ArtifactCard/index.js

@@ -1,13 +1,13 @@
-export { ArtifactCard, ArtifactCardSkeleton, ArtifactPreviewGlyph } from '../chunk-U2XAJONO.js';
+export { ArtifactCard, ArtifactCardSkeleton, ArtifactPreviewGlyph } from '../chunk-OKE5YSLD.js';
 import '../chunk-TEUQWOWZ.js';
 import '../chunk-CI3VPIJN.js';
 import '../chunk-3CZ7XAVY.js';
 import '../chunk-EUCC37WY.js';
+import '../chunk-5AQBPHZD.js';
+import '../chunk-PZKHBB7D.js';
 import '../chunk-UBZDYOCA.js';
 import '../chunk-INHXF2CL.js';
 import '../chunk-AV2DXAEL.js';
-import '../chunk-5AQBPHZD.js';
-import '../chunk-PZKHBB7D.js';
 import '../chunk-BGLKLXL3.js';
 export { ARTIFACT_KINDS, ArtifactKindGlyph } from '../chunk-CE2THTQR.js';
 import '../chunk-BHHIIK3M.js';

package/dist/AsideLayout/AsideLayout.d.ts

@@ -0,0 +1,24 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+export interface AsideLayoutProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** The page's main column: what the page is about. */
+    children: ReactNode;
+    /** The column beside it: facts about the subject, how it is used, related places. */
+    aside: ReactNode;
+    /** What the aside is, for a screen reader's landmark: "About the company". */
+    asideLabel: string;
+}
+/**
+ * A page's main column with an aside beside it, each a stack of blocks one
+ * page step apart.
+ *
+ * THE COLUMNS FOLLOW THE ROOM THE PAGE HAS, NOT THE WINDOW. It is a container
+ * query on its own width, because a page beside a navigation rail is narrow
+ * on a wide screen too: from 56rem the aside stands beside the main column at
+ * `--crewlet-aside-layout-aside` (18rem by default), and below that it
+ * follows the main column under one hairline, so a phone reads the subject
+ * first and its facts after it.
+ *
+ * THE ASIDE IS A COMPLEMENTARY LANDMARK named by `asideLabel`, so a screen
+ * reader can skip to it or past it.
+ */
+export declare function AsideLayout({ children, aside, asideLabel, className, ...rest }: AsideLayoutProps): import("react").JSX.Element;

package/dist/AsideLayout/index.d.ts

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

package/dist/AsideLayout/index.js

@@ -0,0 +1,2 @@
+export { AsideLayout } from '../chunk-KY65C4XS.js';
+import '../chunk-ODEQTPFM.js';

package/dist/AsideLayout-TH5SQZNK.css

@@ -0,0 +1,45 @@
+/*
+ * AsideLayout: a main column with an aside beside it from 56rem of its own
+ * width, and after it below that (AsideLayout.tsx).
+ */
+
+.crewlet-aside-layout {
+  container-type: inline-size;
+  min-width: 0;
+}
+
+.crewlet-aside-layout__columns {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  align-items: start;
+  gap: var(--spacing-7);
+}
+
+/* EACH COLUMN IS A STACK one step apart, so the blocks in it stand apart
+   evenly without each carrying a margin of its own. */
+.crewlet-aside-layout__main,
+.crewlet-aside-layout__aside {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-6);
+  min-width: 0;
+}
+
+/* FOLLOWING THE MAIN COLUMN, the aside is set off by one hairline, so its
+   facts read as about the page rather than as more of it. */
+.crewlet-aside-layout__aside {
+  padding-top: var(--spacing-6);
+  border-top: 1px solid var(--color-border-default);
+}
+
+@container (min-width: 56rem) {
+  .crewlet-aside-layout__columns {
+    grid-template-columns: minmax(0, 1fr) var(--crewlet-aside-layout-aside, 18rem);
+    gap: var(--spacing-8);
+  }
+
+  .crewlet-aside-layout__aside {
+    padding-top: 0;
+    border-top: 0;
+  }
+}

package/dist/AvatarPicker/index.js

@@ -1,19 +1,19 @@
-export { AvatarPicker } from '../chunk-Q7HLZH32.js';
-import '../chunk-QOP7QYUW.js';
+export { AvatarPicker } from '../chunk-3QSKDZR5.js';
+import '../chunk-34RMTXDZ.js';
 import '../chunk-KHJIEPZV.js';
 import '../chunk-AYKXMIOR.js';
 import '../chunk-SNQRGH4A.js';
-import '../chunk-BF5WV7NM.js';
-import '../chunk-KA75QPFM.js';
+import '../chunk-6FVGSWLS.js';
+import '../chunk-ILFEWRLG.js';
 import '../chunk-WIATRXEJ.js';
 import '../chunk-EGMQURBR.js';
 import '../chunk-PZKHBB7D.js';
 import '../chunk-BHHIIK3M.js';
-import '../chunk-PCI7ZJ6Z.js';
+import '../chunk-TMM32U7D.js';
 import '../chunk-OMV5W53A.js';
-import '../chunk-H5XTJ7GJ.js';
 import '../chunk-2YTOOH3A.js';
 import '../chunk-OG6CL3EB.js';
+import '../chunk-H5XTJ7GJ.js';
 import '../chunk-LACA4JGC.js';
 import '../chunk-NUZHC6MM.js';
 import '../chunk-BZFWDIV6.js';

package/dist/Canvas/index.js

@@ -3,8 +3,8 @@ import '../chunk-LM3ISVJA.js';
 import '../chunk-I33UIUZD.js';
 import '../chunk-SMBKXWML.js';
 import '../chunk-OMV5W53A.js';
-import '../chunk-H5XTJ7GJ.js';
 import '../chunk-OG6CL3EB.js';
+import '../chunk-H5XTJ7GJ.js';
 import '../chunk-LACA4JGC.js';
 import '../chunk-NUZHC6MM.js';
 import '../chunk-BZFWDIV6.js';

package/dist/CanvasBoard/index.js

@@ -7,8 +7,8 @@ import '../chunk-LM3ISVJA.js';
 import '../chunk-I33UIUZD.js';
 import '../chunk-SMBKXWML.js';
 import '../chunk-OMV5W53A.js';
-import '../chunk-H5XTJ7GJ.js';
 import '../chunk-OG6CL3EB.js';
+import '../chunk-H5XTJ7GJ.js';
 import '../chunk-LACA4JGC.js';
 import '../chunk-NUZHC6MM.js';
 import '../chunk-BZFWDIV6.js';

package/dist/CanvasToolbar/index.js

@@ -5,8 +5,8 @@ import '../chunk-LM3ISVJA.js';
 import '../chunk-I33UIUZD.js';
 import '../chunk-SMBKXWML.js';
 import '../chunk-OMV5W53A.js';
-import '../chunk-H5XTJ7GJ.js';
 import '../chunk-OG6CL3EB.js';
+import '../chunk-H5XTJ7GJ.js';
 import '../chunk-LACA4JGC.js';
 import '../chunk-NUZHC6MM.js';
 import '../chunk-BZFWDIV6.js';

package/dist/CatalogTile/index.js

@@ -1,3 +1,3 @@
-export { CatalogTile } from '../chunk-5GNA4RKP.js';
+export { CatalogTile } from '../chunk-TGSIVB6H.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{CatalogTile-VPSLCKJE.css → CatalogTile-26XN7L2A.css}

@@ -156,20 +156,25 @@
   height: var(--size-row-sm);
 }
 
+/*
+ * THE NAME IS NEVER CUT. It is what the tile is: "C…" names nothing. Where
+ * the line is short of room the state and the fact wrap under the name rather
+ * than squeezing it, and a name longer than the whole line wraps at a word.
+ * The grid folds a compact tile's tracks before it comes to that (see
+ * TileGrid.css), so the wrap is the fallback and not the layout.
+ */
 .crewlet-catalog-tile--compact .crewlet-catalog-tile__title {
   flex: 1 1 auto;
   flex-direction: row;
+  flex-wrap: wrap;
   align-items: center;
-  gap: var(--spacing-2);
+  gap: 0 var(--spacing-2);
   padding-top: 0;
 }
 
 .crewlet-catalog-tile--compact .crewlet-catalog-tile__name {
-  flex: 0 1 auto;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  flex: 0 0 auto;
+  max-width: 100%;
 }
 
 .crewlet-catalog-tile--compact .crewlet-catalog-tile__status {
@@ -177,7 +182,8 @@
 }
 
 .crewlet-catalog-tile--compact .crewlet-catalog-tile__meta {
-  flex: 0 1 auto;
+  flex: none;
+  max-width: 100%;
 }
 
 .crewlet-catalog-tile--compact .crewlet-catalog-tile__description {

package/dist/CharacterCount/CharacterCount.d.ts

@@ -0,0 +1,63 @@
+import { type HTMLAttributes } from 'react';
+/**
+ * How many characters a text holds, counted the way a reader counts them.
+ *
+ * CODE POINTS, NOT UTF-16 UNITS. `'🙂'.length` is 2, so a limit counted on
+ * `.length` refuses an emoji-heavy sentence a character early and tells the
+ * writer they typed something they did not. A Go server counting with
+ * `utf8.RuneCountInString` counts code points too, so the number on the
+ * screen and the number in the refusal are the same number.
+ */
+export declare function countCharacters(text: string): number;
+/** Where a count stands against its limit. */
+export type CharacterCountState = 'within' | 'near' | 'over';
+/** The share of the limit past which the count is drawn as a warning. */
+export declare const CHARACTER_COUNT_NEAR = 0.9;
+/** Where `length` stands against `max`. */
+export declare function characterCountState(length: number, max: number): CharacterCountState;
+/** Every sentence the count says. */
+export interface CharacterCountLabels {
+    /** What a screen reader hears for the count itself: "120 of 500 characters". */
+    count: (length: number, max: number) => string;
+    /** Said once as the count crosses into the warning step: "50 characters left". */
+    left: (left: number) => string;
+    /** Said, and read for the count, once it is past the limit: "12 characters over the limit of 500". */
+    over: (over: number, max: number) => string;
+    /** Said once as an over-long text comes back within the limit. */
+    within: string;
+}
+export declare const CHARACTER_COUNT_LABELS: CharacterCountLabels;
+export interface CharacterCountProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'children'> {
+    /** How many characters the text holds. `countCharacters` counts them. */
+    length: number;
+    /** The most it may hold. */
+    max: number;
+    /**
+     * Says the crossings through the page's `Announcer`: into the warning step,
+     * past the limit, and back within it. ON by default; turn it off for a count
+     * that is not beside the field being typed in.
+     */
+    announce?: boolean | undefined;
+    labels?: Partial<CharacterCountLabels> | undefined;
+}
+/**
+ * How much of a limit a text has used, beside the field it is typed in:
+ * "120 / 500", in the warning ink from nine tenths of the way, and in the
+ * danger ink past it.
+ *
+ * A SOFT LIMIT. The field keeps whatever was typed or pasted, and the count
+ * says by how much it is over, because a native `maxLength` cuts a pasted
+ * paragraph at the limit without a word, and the writer finds out which half
+ * was kept only after it was saved. The form refusing to save is the caller's,
+ * through the field's own error.
+ *
+ * READ IN ONE SENTENCE. The digits are drawn hidden and a sentence is read
+ * instead ("120 of 500 characters"), so a field that lists the count in its
+ * `aria-describedby` is described in words rather than as "120 slash 500".
+ *
+ * THE CROSSINGS ARE SAID, ONCE EACH, and nothing in between. A count read on
+ * every keystroke is a screen reader that cannot be heard over; one that
+ * says nothing is a limit a reader who cannot see the ink meets only as a
+ * refusal.
+ */
+export declare function CharacterCount({ length, max, announce: says, labels: overrides, className, ...rest }: CharacterCountProps): import("react").JSX.Element;

package/dist/CharacterCount/index.d.ts

@@ -0,0 +1,3 @@
+import './CharacterCount.css';
+export { CHARACTER_COUNT_LABELS, CHARACTER_COUNT_NEAR, CharacterCount, characterCountState, countCharacters, } from './CharacterCount.js';
+export type { CharacterCountLabels, CharacterCountProps, CharacterCountState } from './CharacterCount.js';

package/dist/CharacterCount/index.js

@@ -0,0 +1,4 @@
+export { CHARACTER_COUNT_LABELS, CHARACTER_COUNT_NEAR, CharacterCount, characterCountState, countCharacters } from '../chunk-XCUUI7E7.js';
+import '../chunk-RSAQOKH3.js';
+import '../chunk-BZFWDIV6.js';
+import '../chunk-ODEQTPFM.js';

package/dist/CharacterCount-S735DICR.css

@@ -0,0 +1,29 @@
+/*
+ * The count of a limited field (CharacterCount.tsx): the help line's own small
+ * step, in its quiet ink until the limit is close.
+ */
+
+.crewlet-character-count {
+  flex: none;
+  font-size: var(--font-size-xs);
+  line-height: var(--font-line-height-normal);
+  /* Figures of one width, so the count does not shift as a digit changes. */
+  font-variant-numeric: tabular-nums;
+  color: var(--color-text-tertiary);
+  white-space: nowrap;
+}
+
+.crewlet-character-count__of {
+  margin-inline: 0.15em;
+}
+
+.crewlet-character-count--near {
+  color: var(--color-feedback-warning-ink);
+}
+
+/* Past the limit the count is the refusal's ink and weight, so the number
+   that says what to fix is the loudest thing on the line. */
+.crewlet-character-count--over {
+  color: var(--color-feedback-danger-ink);
+  font-weight: var(--font-weight-medium);
+}

package/dist/Checkbox/index.js

@@ -1,6 +1,9 @@
-export { Checkbox, CheckboxGroup } from '../chunk-EY7LACIR.js';
-import '../chunk-ZI5G5RS7.js';
+export { Checkbox, CheckboxGroup } from '../chunk-RWET7W22.js';
+import '../chunk-Z734SV4E.js';
+import '../chunk-XCUUI7E7.js';
 import '../chunk-PQADV6P6.js';
+import '../chunk-RSAQOKH3.js';
+import '../chunk-H5XTJ7GJ.js';
 import '../chunk-LACA4JGC.js';
 import '../chunk-NUZHC6MM.js';
 import '../chunk-BZFWDIV6.js';

package/dist/Combobox/index.js

@@ -1,9 +1,11 @@
-export { Combobox } from '../chunk-MVGCZ655.js';
+export { Combobox } from '../chunk-2UVMIM2J.js';
 import '../chunk-7KHM2FZH.js';
-import '../chunk-ZI5G5RS7.js';
+import '../chunk-Z734SV4E.js';
+import '../chunk-XCUUI7E7.js';
 import '../chunk-PQADV6P6.js';
-import '../chunk-H5XTJ7GJ.js';
+import '../chunk-RSAQOKH3.js';
 import '../chunk-2YTOOH3A.js';
+import '../chunk-H5XTJ7GJ.js';
 import '../chunk-LACA4JGC.js';
 import '../chunk-NUZHC6MM.js';
 import '../chunk-BZFWDIV6.js';

package/dist/CommandPalette/index.js

@@ -1,14 +1,16 @@
-export { CommandPalette } from '../chunk-6MAQ2SVP.js';
-import '../chunk-FYINAYAJ.js';
+export { CommandPalette } from '../chunk-YR3ZURBM.js';
+import '../chunk-6AKG2VLR.js';
 import '../chunk-7KHM2FZH.js';
-import '../chunk-ZI5G5RS7.js';
+import '../chunk-Z734SV4E.js';
+import '../chunk-XCUUI7E7.js';
 import '../chunk-SMBKXWML.js';
 import '../chunk-BHHIIK3M.js';
 import '../chunk-PQADV6P6.js';
+import '../chunk-RSAQOKH3.js';
 import '../chunk-OMV5W53A.js';
-import '../chunk-H5XTJ7GJ.js';
 import '../chunk-2YTOOH3A.js';
 import '../chunk-OG6CL3EB.js';
+import '../chunk-H5XTJ7GJ.js';
 import '../chunk-LACA4JGC.js';
 import '../chunk-NUZHC6MM.js';
 import '../chunk-BZFWDIV6.js';

package/dist/CommentThread/index.js

@@ -1,16 +1,19 @@
-export { COMMENT_THREAD_LABELS, CommentThread } from '../chunk-NVMZQ3Y4.js';
-import '../chunk-PWG3VHRQ.js';
+export { COMMENT_THREAD_LABELS, CommentThread } from '../chunk-2LPNWAN6.js';
 import '../chunk-CI3VPIJN.js';
 import '../chunk-3CZ7XAVY.js';
 import '../chunk-EUCC37WY.js';
 import '../chunk-5AQBPHZD.js';
 import '../chunk-PZKHBB7D.js';
-import '../chunk-7CXGSS7D.js';
-import '../chunk-ZI5G5RS7.js';
+import '../chunk-PWG3VHRQ.js';
+import '../chunk-O6H5XXVK.js';
+import '../chunk-Z734SV4E.js';
+import '../chunk-XCUUI7E7.js';
 import '../chunk-SMBKXWML.js';
 import '../chunk-BHHIIK3M.js';
 import '../chunk-PQADV6P6.js';
+import '../chunk-RSAQOKH3.js';
 import '../chunk-OG6CL3EB.js';
+import '../chunk-H5XTJ7GJ.js';
 import '../chunk-LACA4JGC.js';
 import '../chunk-NUZHC6MM.js';
 import '../chunk-BZFWDIV6.js';

package/dist/Composer/index.js

@@ -1,7 +1,10 @@
-export { COMPOSER_COUNTER_AT, Composer } from '../chunk-7CXGSS7D.js';
-import '../chunk-ZI5G5RS7.js';
+export { COMPOSER_COUNTER_AT, Composer } from '../chunk-O6H5XXVK.js';
+import '../chunk-Z734SV4E.js';
+import '../chunk-XCUUI7E7.js';
 import '../chunk-SMBKXWML.js';
 import '../chunk-PQADV6P6.js';
+import '../chunk-RSAQOKH3.js';
+import '../chunk-H5XTJ7GJ.js';
 import '../chunk-LACA4JGC.js';
 import '../chunk-NUZHC6MM.js';
 import '../chunk-BZFWDIV6.js';

package/dist/ConfirmField/index.js

@@ -1,7 +1,10 @@
-export { ConfirmField, confirmMatches } from '../chunk-FG243QHY.js';
+export { ConfirmField, confirmMatches } from '../chunk-KZDMAQNJ.js';
 import '../chunk-5CLW2CXT.js';
-import '../chunk-ZI5G5RS7.js';
+import '../chunk-Z734SV4E.js';
+import '../chunk-XCUUI7E7.js';
 import '../chunk-PQADV6P6.js';
+import '../chunk-RSAQOKH3.js';
+import '../chunk-H5XTJ7GJ.js';
 import '../chunk-LACA4JGC.js';
 import '../chunk-NUZHC6MM.js';
 import '../chunk-BZFWDIV6.js';

package/dist/DataGrid/index.js

@@ -1,5 +1,5 @@
-export { ChooserList, ColumnChooser, DataGrid, columnChoicesOf, fitGridColumns, parseGridSort } from '../chunk-XIDD7PJO.js';
-import '../chunk-RA2ULG6H.js';
+export { ChooserList, ColumnChooser, DataGrid, columnChoicesOf, fitGridColumns, parseGridSort } from '../chunk-2MYSESZF.js';
+import '../chunk-PPUR46MK.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-RTPQDNW3.js';
 import '../chunk-OG6CL3EB.js';

package/dist/DataTable/index.js

@@ -1,16 +1,18 @@
-export { ALL_ITEMS, CopyableCell, DATA_TABLE_LABELS, DataTable, RowActionsMenu } from '../chunk-GI3S6RMM.js';
+export { ALL_ITEMS, CopyableCell, DATA_TABLE_LABELS, DataTable, RowActionsMenu } from '../chunk-PWZT6CZY.js';
 import '../chunk-STJ7QBC3.js';
 import '../chunk-DTIW4CHZ.js';
-import '../chunk-FYINAYAJ.js';
-import '../chunk-EY7LACIR.js';
+import '../chunk-6AKG2VLR.js';
+import '../chunk-RWET7W22.js';
 import '../chunk-EUCC37WY.js';
 import '../chunk-AV2DXAEL.js';
-import '../chunk-ZI5G5RS7.js';
+import '../chunk-Z734SV4E.js';
+import '../chunk-XCUUI7E7.js';
 import '../chunk-PQADV6P6.js';
-import '../chunk-PCI7ZJ6Z.js';
+import '../chunk-RSAQOKH3.js';
+import '../chunk-TMM32U7D.js';
 import '../chunk-OMV5W53A.js';
-import '../chunk-H5XTJ7GJ.js';
 import '../chunk-OG6CL3EB.js';
+import '../chunk-H5XTJ7GJ.js';
 import '../chunk-LACA4JGC.js';
 import '../chunk-NUZHC6MM.js';
 import '../chunk-BZFWDIV6.js';