@crewlethq/ui 0.3.0 → 0.4.0

package/dist/{chunk-EPOOQZYA.js → chunk-ZFATEERP.js}

@@ -49,6 +49,7 @@ function FilterChip({
     }
   );
 }
+var ACTIVATE_HINT = "Press Enter or Space to apply the filter you land on.";
 var reachable = (chip) => !chip.disabled && chip.getAttribute("aria-disabled") !== "true";
 function moveTo(key, from, total) {
   if (key === "ArrowRight" || key === "ArrowDown") return (from + 1) % total;
@@ -60,6 +61,8 @@ function moveTo(key, from, total) {
 function FilterChipGroup({
   label,
   semantics = "toggle",
+  activate = "automatic",
+  activateHint,
   value,
   onValueChange,
   allowNone = false,
@@ -69,19 +72,25 @@ function FilterChipGroup({
 }) {
   const row = useRef(null);
   const labelId = useId();
+  const hintId = useId();
+  const manual = semantics === "radio" && activate === "manual";
+  const hint = manual ? activateHint === void 0 ? ACTIVATE_HINT : activateHint : null;
+  const landed = useRef(null);
   const chips = useCallback(
     () => row.current === null ? [] : [...row.current.querySelectorAll(`[${FILTER_CHIP_ATTRIBUTE}]`)],
     []
   );
-  useLayoutEffect(() => {
+  const placeStop = useCallback(() => {
     if (semantics !== "radio") return;
     const all = chips();
+    const held = manual && landed.current !== null ? all.indexOf(landed.current) : -1;
     const chosen = all.findIndex((chip) => chip.getAttribute("aria-checked") === "true" && reachable(chip));
-    const stop = chosen < 0 ? all.findIndex(reachable) : chosen;
+    const stop = held >= 0 && reachable(all[held]) ? held : chosen < 0 ? all.findIndex(reachable) : chosen;
     all.forEach((chip, index) => {
       chip.tabIndex = index === stop ? 0 : -1;
     });
-  });
+  }, [chips, manual, semantics]);
+  useLayoutEffect(placeStop);
   const choose = useCallback(
     (next) => {
       onValueChange?.(next);
@@ -95,9 +104,23 @@ function FilterChipGroup({
     if (from < 0 || open.length === 0) return;
     const to = moveTo(event.key, from, open.length);
     if (to === null) return;
+    const next = open[to];
+    if (next === void 0) return;
     event.preventDefault();
-    open[to]?.focus();
-    open[to]?.click();
+    next.focus();
+    if (manual) {
+      landed.current = next;
+      placeStop();
+      return;
+    }
+    next.click();
+  };
+  const onFocus = (event) => {
+    if (!manual) return;
+    const target = event.target;
+    if (!target.hasAttribute(FILTER_CHIP_ATTRIBUTE)) return;
+    landed.current = target;
+    placeStop();
   };
   return /* @__PURE__ */ jsxs(
     "div",
@@ -105,11 +128,14 @@ function FilterChipGroup({
       ref: row,
       role: semantics === "radio" ? "radiogroup" : "group",
       "aria-labelledby": labelId,
+      "aria-describedby": hint ? hintId : void 0,
       className: cx("crewlet-filter-chip-group", className),
       onKeyDown,
+      onFocus,
       children: [
         hideLabel ? /* @__PURE__ */ jsx(VisuallyHidden, { id: labelId, children: label }) : /* @__PURE__ */ jsx("span", { id: labelId, className: "crewlet-filter-chip-group__label", children: label }),
-        /* @__PURE__ */ jsx(GroupContext.Provider, { value: { semantics, value, choose, allowNone }, children })
+        /* @__PURE__ */ jsx(GroupContext.Provider, { value: { semantics, value, choose, allowNone }, children }),
+        hint ? /* @__PURE__ */ jsx(VisuallyHidden, { id: hintId, children: hint }) : null
       ]
     }
   );

package/dist/generated/index.js

@@ -2,25 +2,25 @@ import '../chunk-ZCR6YGQ4.js';
 export { TreeCanvas } from '../chunk-7HPRF5XN.js';
 import '../chunk-IJ7QXNIJ.js';
 export { Text } from '../chunk-23DHIMJA.js';
-export { DensitySwitcher, ThemeSwitcher, applyDensity, applyStoredPreferences, applyTheme, useDensityPreference, useThemePreference } from '../chunk-GUIF6Q6N.js';
-export { DEFAULT_TIME_WINDOW_LABELS, TIME_WINDOW_SPANS, TimeWindowPicker, describeTimeWindow, isTimeWindowSet, parseTimeWindowDuration, resolveTimeWindow, timeWindowMatchesPreset } from '../chunk-G2QFRTJ2.js';
-export { ToastProvider, Toaster, useToast } from '../chunk-NPZY6YYL.js';
+export { DensitySwitcher, ThemeSwitcher, applyDensity, applyStoredPreferences, applyTheme, useDensityPreference, useThemePreference } from '../chunk-2HQR4U4D.js';
+export { DEFAULT_TIME_WINDOW_LABELS, TIME_WINDOW_SPANS, TimeWindowPicker, describeTimeWindow, isTimeWindowSet, parseTimeWindowDuration, resolveTimeWindow, timeWindowMatchesPreset } from '../chunk-WOYYD2YR.js';
 export { Timeline, TimelineItem } from '../chunk-O67VF5MS.js';
+export { ToastProvider, Toaster, useToast } from '../chunk-NPZY6YYL.js';
 export { Tooltip } from '../chunk-XV6WRMBC.js';
-export { StatGroup } from '../chunk-QNCVHRZL.js';
+export { StatCard } from '../chunk-22O7LAW2.js';
 export { Switch } from '../chunk-EV6IMYJ6.js';
 export { Table } from '../chunk-FEFTGVMF.js';
 export { TagGroup } from '../chunk-V2XMNLMS.js';
 export { TagsInput } from '../chunk-RDGD7Z7I.js';
 export { SearchTrigger } from '../chunk-Q4ZPPART.js';
 export { Section } from '../chunk-A2UXBCLO.js';
-export { SegmentedControl } from '../chunk-ARMRX2YV.js';
-export { TabPanel, Tabs, tabId } from '../chunk-YMWONFSI.js';
-export { Select } from '../chunk-5IMACPJS.js';
+export { SegmentedControl } from '../chunk-6ZFVFA56.js';
+export { TabPanel, Tabs, tabId } from '../chunk-QEUY3A5P.js';
+export { Select } from '../chunk-OFHBK7RI.js';
 export { matchesShortcut, useShortcut } from '../chunk-F6OE5FH3.js';
 export { NavGroup, NavItem, SidebarNav } from '../chunk-3EYF6HKB.js';
 export { Skeleton } from '../chunk-W5J7R5EB.js';
-export { StatCard } from '../chunk-22O7LAW2.js';
+export { StatGroup } from '../chunk-QNCVHRZL.js';
 export { OrgNodeDisclosure, OrgNodeLabel, OrgNodeLead } from '../chunk-IAJLHVUA.js';
 export { OrgTable, OrgTableActions, OrgTableAdd, OrgTableName } from '../chunk-H4FBTAYS.js';
 export { TreeGrid } from '../chunk-5SDBMKUO.js';
@@ -30,10 +30,10 @@ export { PricingCard } from '../chunk-KLJCCMF3.js';
 export { Tag } from '../chunk-S2XHHEW4.js';
 export { StatusDot } from '../chunk-PZSWF74H.js';
 export { Prose } from '../chunk-JCSA3XVH.js';
-export { List, ListItem } from '../chunk-HZ5XZNPS.js';
 export { Link } from '../chunk-2ZQMA2WB.js';
+export { List, ListItem } from '../chunk-HZ5XZNPS.js';
 export { ListInput } from '../chunk-EN6K2IFA.js';
-export { Meter, meterTone } from '../chunk-LGCPQIOZ.js';
+export { Meter, meterTone, progressTone } from '../chunk-YODNNSZL.js';
 export { NewItemsNotice } from '../chunk-YLYOWZ4V.js';
 export { useFullscreen } from '../chunk-XDTYBF2F.js';
 export { ImageUpload } from '../chunk-5WS6L6FA.js';
@@ -45,15 +45,15 @@ export { EmptyState } from '../chunk-RA2ULG6H.js';
 export { EntityChip } from '../chunk-QYOFACSP.js';
 export { ErrorBoundary } from '../chunk-7EM5T4ME.js';
 export { Eyebrow } from '../chunk-RK4XPHVG.js';
-export { FILTER_CHIP_ATTRIBUTE, FilterChip, FilterChipGroup } from '../chunk-EPOOQZYA.js';
+export { FILTER_CHIP_ATTRIBUTE, FilterChip, FilterChipGroup } from '../chunk-ZFATEERP.js';
 export { CommandPalette } from '../chunk-ESCO4XYW.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-GHYY2WPF.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-34VGEDVV.js';
 export { Toolbar, ToolbarOverflow, ToolbarWide } from '../chunk-5EKIWVOR.js';
 export { PageHeader } from '../chunk-HOXGBLEY.js';
 export { RelativeTime, currentNow, formatElapsed, formatExact, formatRelative, formatUntil, toISO, toInstant, useNow } from '../chunk-3CZ7XAVY.js';
 export { Kbd, isApplePlatform, keyGlyph } from '../chunk-SFZOKW2G.js';
-export { ALL_ITEMS, CopyableCell, DATA_TABLE_LABELS, DataTable, RowActionsMenu } from '../chunk-EHMQQHYR.js';
+export { ALL_ITEMS, CopyableCell, DATA_TABLE_LABELS, DataTable, RowActionsMenu } from '../chunk-WQX73TWF.js';
 export { Menu } from '../chunk-FBZAKNSX.js';
 export { EMPTY_VALUE, EmptyValue } from '../chunk-EUCC37WY.js';
 export { ConfirmModal, Modal } from '../chunk-2EOKFKHX.js';
@@ -64,13 +64,13 @@ export { CalendarGrid, compareDays, daysInMonth, sameDay, shiftDay, shiftMonth,
 export { Callout } from '../chunk-3ZP55QZE.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-CMEE37QJ.js';
 import '../chunk-53DVJCVW.js';
-export { Card } from '../chunk-T7FKOJKW.js';
+export { Card } from '../chunk-NDCATSW7.js';
 export { useCardHeaderSlot } from '../chunk-AV2DXAEL.js';
 export { ActivityStrip, BarList, DATA_COLORS, DATA_COLOR_OTHER, Legend, Sparkline, StackedBar, TimeSeries, dataColor } from '../chunk-F4PJZ4ED.js';
 export { Checkbox } from '../chunk-2PRH365R.js';
-export { CodeBlock } from '../chunk-HTDFCRJZ.js';
-export { CopyButton, Copyable } from '../chunk-D3OADIM6.js';
-export { useClipboard } from '../chunk-V663QU4R.js';
+export { CodeBlock } from '../chunk-D35VTV2Z.js';
+export { CopyButton, Copyable } from '../chunk-3QRYCPXQ.js';
+export { useClipboard, writeClipboard } from '../chunk-5VNUYO76.js';
 export { Combobox } from '../chunk-UOGSZKLT.js';
 export { TYPE_AHEAD_WINDOW, useListbox, useOptionKeys } from '../chunk-GTOUGQQK.js';
 export { FormField, FormRow, FormSection, Input, InputAffix, Label, ReadOnlyField, Textarea } from '../chunk-O6232G37.js';

package/dist/index.js

@@ -2,25 +2,25 @@ import './chunk-ZCR6YGQ4.js';
 export { TreeCanvas } from './chunk-7HPRF5XN.js';
 import './chunk-IJ7QXNIJ.js';
 export { Text } from './chunk-23DHIMJA.js';
-export { DensitySwitcher, ThemeSwitcher, applyDensity, applyStoredPreferences, applyTheme, useDensityPreference, useThemePreference } from './chunk-GUIF6Q6N.js';
-export { DEFAULT_TIME_WINDOW_LABELS, TIME_WINDOW_SPANS, TimeWindowPicker, describeTimeWindow, isTimeWindowSet, parseTimeWindowDuration, resolveTimeWindow, timeWindowMatchesPreset } from './chunk-G2QFRTJ2.js';
-export { ToastProvider, Toaster, useToast } from './chunk-NPZY6YYL.js';
+export { DensitySwitcher, ThemeSwitcher, applyDensity, applyStoredPreferences, applyTheme, useDensityPreference, useThemePreference } from './chunk-2HQR4U4D.js';
+export { DEFAULT_TIME_WINDOW_LABELS, TIME_WINDOW_SPANS, TimeWindowPicker, describeTimeWindow, isTimeWindowSet, parseTimeWindowDuration, resolveTimeWindow, timeWindowMatchesPreset } from './chunk-WOYYD2YR.js';
 export { Timeline, TimelineItem } from './chunk-O67VF5MS.js';
+export { ToastProvider, Toaster, useToast } from './chunk-NPZY6YYL.js';
 export { Tooltip } from './chunk-XV6WRMBC.js';
-export { StatGroup } from './chunk-QNCVHRZL.js';
+export { StatCard } from './chunk-22O7LAW2.js';
 export { Switch } from './chunk-EV6IMYJ6.js';
 export { Table } from './chunk-FEFTGVMF.js';
 export { TagGroup } from './chunk-V2XMNLMS.js';
 export { TagsInput } from './chunk-RDGD7Z7I.js';
 export { SearchTrigger } from './chunk-Q4ZPPART.js';
 export { Section } from './chunk-A2UXBCLO.js';
-export { SegmentedControl } from './chunk-ARMRX2YV.js';
-export { TabPanel, Tabs, tabId } from './chunk-YMWONFSI.js';
-export { Select } from './chunk-5IMACPJS.js';
+export { SegmentedControl } from './chunk-6ZFVFA56.js';
+export { TabPanel, Tabs, tabId } from './chunk-QEUY3A5P.js';
+export { Select } from './chunk-OFHBK7RI.js';
 export { matchesShortcut, useShortcut } from './chunk-F6OE5FH3.js';
 export { NavGroup, NavItem, SidebarNav } from './chunk-3EYF6HKB.js';
 export { Skeleton } from './chunk-W5J7R5EB.js';
-export { StatCard } from './chunk-22O7LAW2.js';
+export { StatGroup } from './chunk-QNCVHRZL.js';
 export { OrgNodeDisclosure, OrgNodeLabel, OrgNodeLead } from './chunk-IAJLHVUA.js';
 export { OrgTable, OrgTableActions, OrgTableAdd, OrgTableName } from './chunk-H4FBTAYS.js';
 export { TreeGrid } from './chunk-5SDBMKUO.js';
@@ -30,10 +30,10 @@ export { PricingCard } from './chunk-KLJCCMF3.js';
 export { Tag } from './chunk-S2XHHEW4.js';
 export { StatusDot } from './chunk-PZSWF74H.js';
 export { Prose } from './chunk-JCSA3XVH.js';
-export { List, ListItem } from './chunk-HZ5XZNPS.js';
 export { Link } from './chunk-2ZQMA2WB.js';
+export { List, ListItem } from './chunk-HZ5XZNPS.js';
 export { ListInput } from './chunk-EN6K2IFA.js';
-export { Meter, meterTone } from './chunk-LGCPQIOZ.js';
+export { Meter, meterTone, progressTone } from './chunk-YODNNSZL.js';
 export { NewItemsNotice } from './chunk-YLYOWZ4V.js';
 export { useFullscreen } from './chunk-XDTYBF2F.js';
 export { ImageUpload } from './chunk-5WS6L6FA.js';
@@ -45,15 +45,15 @@ export { EmptyState } from './chunk-RA2ULG6H.js';
 export { EntityChip } from './chunk-QYOFACSP.js';
 export { ErrorBoundary } from './chunk-7EM5T4ME.js';
 export { Eyebrow } from './chunk-RK4XPHVG.js';
-export { FILTER_CHIP_ATTRIBUTE, FilterChip, FilterChipGroup } from './chunk-EPOOQZYA.js';
+export { FILTER_CHIP_ATTRIBUTE, FilterChip, FilterChipGroup } from './chunk-ZFATEERP.js';
 export { CommandPalette } from './chunk-ESCO4XYW.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-GHYY2WPF.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-34VGEDVV.js';
 export { Toolbar, ToolbarOverflow, ToolbarWide } from './chunk-5EKIWVOR.js';
 export { PageHeader } from './chunk-HOXGBLEY.js';
 export { RelativeTime, currentNow, formatElapsed, formatExact, formatRelative, formatUntil, toISO, toInstant, useNow } from './chunk-3CZ7XAVY.js';
 export { Kbd, isApplePlatform, keyGlyph } from './chunk-SFZOKW2G.js';
-export { ALL_ITEMS, CopyableCell, DATA_TABLE_LABELS, DataTable, RowActionsMenu } from './chunk-EHMQQHYR.js';
+export { ALL_ITEMS, CopyableCell, DATA_TABLE_LABELS, DataTable, RowActionsMenu } from './chunk-WQX73TWF.js';
 export { Menu } from './chunk-FBZAKNSX.js';
 export { EMPTY_VALUE, EmptyValue } from './chunk-EUCC37WY.js';
 export { ConfirmModal, Modal } from './chunk-2EOKFKHX.js';
@@ -64,13 +64,13 @@ export { CalendarGrid, compareDays, daysInMonth, sameDay, shiftDay, shiftMonth,
 export { Callout } from './chunk-3ZP55QZE.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-CMEE37QJ.js';
 import './chunk-53DVJCVW.js';
-export { Card } from './chunk-T7FKOJKW.js';
+export { Card } from './chunk-NDCATSW7.js';
 export { useCardHeaderSlot } from './chunk-AV2DXAEL.js';
 export { ActivityStrip, BarList, DATA_COLORS, DATA_COLOR_OTHER, Legend, Sparkline, StackedBar, TimeSeries, dataColor } from './chunk-F4PJZ4ED.js';
 export { Checkbox } from './chunk-2PRH365R.js';
-export { CodeBlock } from './chunk-HTDFCRJZ.js';
-export { CopyButton, Copyable } from './chunk-D3OADIM6.js';
-export { useClipboard } from './chunk-V663QU4R.js';
+export { CodeBlock } from './chunk-D35VTV2Z.js';
+export { CopyButton, Copyable } from './chunk-3QRYCPXQ.js';
+export { useClipboard, writeClipboard } from './chunk-5VNUYO76.js';
 export { Combobox } from './chunk-UOGSZKLT.js';
 export { TYPE_AHEAD_WINDOW, useListbox, useOptionKeys } from './chunk-GTOUGQQK.js';
 export { FormField, FormRow, FormSection, Input, InputAffix, Label, ReadOnlyField, Textarea } from './chunk-O6232G37.js';

package/dist/styles.css

@@ -2061,7 +2061,7 @@
 }
 
 
-/* Card-AHX3Q2JD.css */
+/* Card-RLR254LD.css */
 /*
  * Card, THE surface. Everything on a screen is a card, a row inside one, or a
  * control.
@@ -2458,6 +2458,28 @@
   color: var(--color-text-primary);
 }
 
+/*
+ * A TITLE THAT ENDS RATHER THAN STOPS, where a caller has asked for it.
+ *
+ * The name block clips, which is what keeps the head one line, so a title
+ * wider than the row is cut at the header's edge — mid-word, with nothing to
+ * say a word was lost. `text-overflow` is the rule that says it, and it
+ * applies to a BLOCK container only: on the flex title above it does nothing
+ * at all, and the text it would act on is an anonymous flex item that no
+ * selector here can reach. So the modifier makes the title a block. Its
+ * children are then one line of inline content rather than centred flex items
+ * with a gap between them, which is the whole of what a caller opts into, and
+ * why this is a modifier rather than the base rule.
+ *
+ * `white-space: nowrap` is already the title's own, and `min-width: 0` is what
+ * lets the block shrink below its content inside the name block; both stand.
+ */
+.crewlet-card__title--truncate {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
 /*
  * The subtitle gives up its tail and the title does not: a title is the
  * record's identity and has to be read in full, while a subtitle is context.
@@ -2886,7 +2908,7 @@
 }
 
 
-/* CodeBlock-U2W6NNVC.css */
+/* CodeBlock-GYNJ2HI6.css */
 /*
  * CodeBlock, a monospace command, config or record surface. One step off the
  * page, with an optional header carrying a filename and the copy control.
@@ -2955,6 +2977,42 @@
   white-space: pre-wrap;
   overflow-wrap: anywhere;
   tab-size: 2;
+  /*
+   * THE CEILING IS A CASCADING ONE, read here and declared nowhere, so the
+   * fallback IS the default: with nothing set the block is unbounded, as it
+   * has always been. `maxHeight` writes the property inline on the block, and
+   * an application that wants one ceiling for every block it renders writes it
+   * once on an ancestor instead — because a ceiling every call site has to
+   * remember is a ceiling somebody forgets, and the right height is a fact
+   * about the SURFACE the block sits on rather than about the component.
+   *
+   * Declared with a fallback rather than seeded on `.crewlet-codeblock`: a
+   * name a component declares on itself stops inheriting, so seeding it would
+   * be the one shape in which an ancestor's value can never arrive.
+   *
+   * ONE DECLARATION, in the rule below. `.crewlet-codeblock--bounded` is still
+   * emitted as the marker that this block set a ceiling of its own — the hook
+   * an application stylesheet and a reader of the DOM key on — but it draws
+   * nothing, because a second rule restating this height is how the two come
+   * to disagree.
+   */
+}
+
+/*
+ * The ceiling, at the specificity the rule it replaces already had.
+ *
+ * `.crewlet-codeblock .crewlet-codeblock__pre` rather than
+ * `.crewlet-codeblock__pre`, and the extra class earns its place: the rule
+ * that used to set this was `.crewlet-codeblock--bounded .crewlet-codeblock__pre`
+ * at (0,2,0), and an application overriding it wrote `.crewlet-codeblock__pre
+ * { max-height: … }` at (0,1,0) and expected to LOSE. Declaring it on the
+ * single class drops this to (0,1,0), which turns every one of those
+ * overrides into a tie decided by sheet order — so a consumer who wrote a
+ * losing rule on purpose silently starts winning. Same two-class weight,
+ * same outcome for anybody who already had an opinion.
+ */
+.crewlet-codeblock .crewlet-codeblock__pre {
+  max-height: var(--crewlet-codeblock-max-height, none);
 }
 
 /*
@@ -2967,21 +3025,20 @@
 }
 
 /*
- * Bounded, with its own scroll. Without a ceiling a long record pushes
- * everything under it off the screen, which on a detail page is every other
- * fact about the thing being read.
- */
-.crewlet-codeblock--bounded .crewlet-codeblock__pre {
-  max-height: var(--crewlet-codeblock-max-height);
-}
-
-/*
- * A BLOCK THAT OWNS SELECT-ALL. Select-all is a document verb, so on a screen
- * that is mostly one record it took the nav, the stat row and every card with
- * it. While this block has focus the verb means "this record", which is the
- * only thing anybody was reaching for, and the ring is what says so: a
- * keyboard verb that changes meaning on focus, with no visible focus state, is
- * a secret.
+ * A BLOCK A READER CAN REACH. Two things put the block in the tab order and
+ * the role follows both: `selectable`, and `focusWhenScrollable` on a box that
+ * turned out to scroll.
+ *
+ * On the first, select-all is a document verb, so on a screen that is mostly
+ * one record it took the nav, the stat row and every card with it. While this
+ * block has focus the verb means "this record", which is the only thing
+ * anybody was reaching for, and the ring is what says so: a keyboard verb that
+ * changes meaning on focus, with no visible focus state, is a secret. On the
+ * second the block keeps no keys at all; the ring is there because a scroll
+ * container a reader arrows through has to say where they are.
+ *
+ * The text cursor is right for both, and it is what the caret-shape of a
+ * `pre` full of selectable text should always have been.
  */
 .crewlet-codeblock__pre[role='region'] {
   cursor: text;

package/dist/utils/index.d.ts

@@ -1,5 +1,5 @@
 export { cx } from './cx.js';
-export { useClipboard } from './useClipboard.js';
+export { useClipboard, writeClipboard } from './useClipboard.js';
 export type { Clipboard, ClipboardOptions, ClipboardState } from './useClipboard.js';
 export type { PhaseTone, Tone } from './tone.js';
 export { HeadingLevelProvider, headingTag, nextHeadingLevel, useHeadingLevel } from './headingLevel.js';

package/dist/utils/index.js

@@ -1,4 +1,4 @@
 import '../chunk-IJ7QXNIJ.js';
-export { useClipboard } from '../chunk-V663QU4R.js';
+export { useClipboard, writeClipboard } from '../chunk-5VNUYO76.js';
 export { HeadingLevelProvider, headingTag, nextHeadingLevel, useHeadingLevel } from '../chunk-PQADV6P6.js';
 export { cx } from '../chunk-ODEQTPFM.js';

package/dist/utils/useClipboard.d.ts

@@ -1,7 +1,35 @@
 export type ClipboardState = 'idle' | 'copied' | 'failed';
 export interface ClipboardOptions {
-    /** How long the copied or failed answer stands before the control settles back. */
-    resetMs?: number;
+    /** How long the copied answer stands before the control settles back. */
+    resetMs?: number | undefined;
+    /**
+     * How long a REFUSAL stands, which is not the same question.
+     *
+     * Left unset it is `resetMs`, which is what this hook has always done and
+     * what every current call site still gets. `null` holds the failed state
+     * until the next copy; a number gives it a clock of its own.
+     *
+     * WHY IT IS A SEPARATE CLOCK. A success confirms something the reader
+     * already knows they asked for, so it can go as soon as it has been seen.
+     * A refusal is news — usually that the origin is not secure and that NO
+     * copy on this page will ever work — and a control that has quietly gone
+     * back to offering its action is indistinguishable from one nobody ever
+     * pressed, so the reader presses it again and learns nothing a second time.
+     * [Toaster] already settled this question for this design system and its
+     * `DURATIONS` table is the precedent: `info` and `success` go after 4s,
+     * `warning` and `danger` are sticky, because news that removes itself is
+     * news somebody misses.
+     *
+     * `null` rather than Toaster's `0` for sticky, because `resetMs` has
+     * shipped with `0` meaning "settle on the next tick" and a second option in
+     * the same object reading the same number as its opposite is a trap. `null`
+     * collides with nothing.
+     *
+     * The recommendation is `null`. It is not the DEFAULT only because moving
+     * the default is a behaviour change for every call site that never asked
+     * for one.
+     */
+    failedResetMs?: number | null | undefined;
 }
 export interface Clipboard {
     state: ClipboardState;
@@ -10,7 +38,7 @@ export interface Clipboard {
 /**
  * Putting text on the clipboard, and saying whether it arrived.
  *
- * TWO THINGS ARE LOAD BEARING, and both were wrong before this existed.
+ * THREE THINGS ARE LOAD BEARING, and all three were wrong before this existed.
  *
  * 1. THE CLIPBOARD API IS NOT ALWAYS THERE. It is gated on a secure context,
  *    so `navigator.clipboard` is simply undefined on the plain http origin
@@ -22,9 +50,33 @@ export interface Clipboard {
  * 2. A COPY WITH NO FEEDBACK IS A DEAD BUTTON. The clipboard is invisible;
  *    the only way a reader learns it worked is if the control says so, which
  *    is what `state` is for.
+ * 3. THE WRITE OUTLIVES THE SCREEN. `writeText` is held for as long as the
+ *    browser holds its permission prompt, which is until the reader answers
+ *    it — and they may navigate instead. The unmount cleanup clears whatever
+ *    timer exists AT THAT MOMENT, and for a write still in flight that is
+ *    none: the settle then ran after the cleanup and armed a fresh timer with
+ *    nothing left alive to clear it, so the hook leaked a timer per abandoned
+ *    copy and wrote state to a component that was gone. `live` is what the
+ *    settle is checked against, and it is checked AFTER the await rather than
+ *    before, because the await is the whole of the gap.
  *
  * The text may be a THUNK, resolved on the press. On a live screen the thing
  * worth copying is assembled from everything on it, so a string prop means
  * building it again on every push for a control nobody has touched.
  */
-export declare function useClipboard({ resetMs }?: ClipboardOptions): Clipboard;
+export declare function useClipboard({ resetMs, failedResetMs }?: ClipboardOptions): Clipboard;
+/**
+ * The write itself, with no state machine around it.
+ *
+ * Exported because the two halves are independently useful and only one of
+ * them is hard: a caller that already owns its feedback — a toast, a form's
+ * own status line, a control whose label is driven by something else —
+ * wants the secure-context detection, the fallback and the honest boolean,
+ * and reimplementing those to get them means reimplementing
+ * `execCommandCopy` too, which is the half with the focus restoration in it.
+ *
+ * Returns whether the text reached the clipboard. It never throws: a refusal
+ * is `false`, because a caller that has to tell a refusal from a success is
+ * exactly the caller that must not receive one as an exception.
+ */
+export declare function writeClipboard(text: string): Promise<boolean>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crewlethq/ui",
-  "version": "0.3.0",
+  "version": "0.4.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.3.0",
-    "@crewlethq/tokens": "0.3.0"
+    "@crewlethq/icons": "0.4.0",
+    "@crewlethq/tokens": "0.4.0"
   },
   "peerDependencies": {
     "react": ">=18",

package/dist/chunk-ARMRX2YV.js

@@ -1,96 +0,0 @@
-import { useRoving, tabStop, tabId } from './chunk-YMWONFSI.js';
-import { Count } from './chunk-BHHIIK3M.js';
-import { cx } from './chunk-ODEQTPFM.js';
-import './Tabs-VLICJFVB.css';
-import './SegmentedControl-X3BI3XU4.css';
-import { jsx, jsxs } from 'react/jsx-runtime';
-
-function SegmentedControl({
-  label,
-  options,
-  value,
-  onValueChange,
-  size = "md",
-  className = "",
-  semantics,
-  panelId
-}) {
-  const radio = semantics === "radio";
-  const cards = options.some((option) => option.description !== void 0);
-  const { buttons, onKeyDown } = useRoving(
-    options.length,
-    radio ? (index) => onValueChange(options[index].value) : null
-  );
-  const selected = tabStop(
-    options,
-    Math.max(
-      0,
-      options.findIndex((option) => option.value === value)
-    )
-  );
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: cx(
-        "crewlet-tabs",
-        /*
-         * THE PILL CHROME IS NOT WORN IN CARDS MODE. A card row is not a chip
-         * in a tinted container: the pill's own rules set the container's
-         * background, border, padding and `width: fit-content`, and each
-         * option's padding, radius and active chip. Left on, every one of
-         * them still applied (the two stylesheets are single-class rules and
-         * Tabs.css is bundled last), so the cards were drawn inside a pill
-         * bar sized to its content, which is what the mode exists to avoid.
-         */
-        !cards && "crewlet-tabs--pill",
-        `crewlet-tabs--${size}`,
-        "crewlet-segmented",
-        cards && "crewlet-segmented--cards",
-        className
-      ),
-      role: radio ? "radiogroup" : "tablist",
-      "aria-label": label,
-      children: options.map((option, index) => {
-        const chosen = option.value === value;
-        const named = option.srLabel ?? (option.label ? void 0 : option.title);
-        return /* @__PURE__ */ jsxs(
-          "button",
-          {
-            ref: (el) => {
-              buttons.current[index] = el;
-            },
-            type: "button",
-            role: radio ? "radio" : "tab",
-            id: radio || !panelId ? void 0 : tabId(panelId, option.value),
-            "aria-checked": radio ? chosen : void 0,
-            "aria-selected": radio ? void 0 : chosen,
-            "aria-controls": radio ? void 0 : panelId,
-            "aria-label": named,
-            tabIndex: index === selected ? 0 : -1,
-            title: option.title,
-            disabled: option.disabled,
-            className: cx(
-              "crewlet-tabs__tab",
-              "crewlet-segmented__option",
-              chosen && "is-active",
-              option.disabled && "is-disabled"
-            ),
-            onClick: () => onValueChange(option.value),
-            onKeyDown: (event) => onKeyDown(event, radio),
-            children: [
-              option.icon ? /* @__PURE__ */ jsx("span", { className: "crewlet-tabs__icon", children: option.icon }) : null,
-              option.label || option.description ? /* @__PURE__ */ jsxs("span", { className: "crewlet-segmented__text", children: [
-                /* @__PURE__ */ jsx("span", { className: "crewlet-tabs__label", children: option.label }),
-                option.description ? /* @__PURE__ */ jsx("span", { className: "crewlet-segmented__description", children: option.description }) : null
-              ] }) : null,
-              option.count != null ? /* @__PURE__ */ jsx(Count, { value: option.count }) : null
-            ]
-          },
-          option.value
-        );
-      })
-    }
-  );
-}
-
-export { SegmentedControl };