@crewlethq/ui 0.30.0 → 0.31.1

package/README.md

@@ -204,6 +204,14 @@ 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.31.1
+
+**`EditingStatus` folds "Editing" on an artifact bar's narrow arrangement**, below 640px, and keeps its dot, so a phone's bar keeps the room for the title while Cancel and Save are there. The words stay in the status for a screen reader.
+
+## Changes in 0.31.0
+
+**`ArtifactBar` carries an editing state**: a `status` slot said before the kind's tools (an `EditingStatus` while a doc is edited), never folded away, and a tool's `emphasis: 'primary'`, drawn as the primary button with its word kept at every width, for the one action the state turns on, such as Save.
+
 ## Changes in 0.30.0
 
 **`RichEditor` edits Markdown in place, as the document it reads as.** The editable element is set by `Document`, so a page looks the same while it is edited as when it is read, and there is no separate preview. It is built on ProseMirror and loaded lazily: the component is a shell that fetches the editor's code with `import()` the first time one is drawn, so a screen that only reads pays for none of it, and `preloadRichEditor()` starts that fetch from a press that is about to open an editor.

package/dist/ArtifactBar/ArtifactBar.d.ts

@@ -33,6 +33,12 @@ export interface ArtifactBarTool {
      * or a kind's primary action such as a doc's Edit.
      */
     labelled?: boolean | undefined;
+    /**
+     * `primary`: the one action a kind's state turns on, such as Save while a
+     * doc is edited. Drawn as the primary button, labelled, and its word kept at
+     * every width, because a glyph alone does not say what a press commits.
+     */
+    emphasis?: 'primary' | undefined;
 }
 /** The ways a kind draws itself, as one choice: a deck's Edit, Grid and Present. */
 export interface ArtifactBarModes {
@@ -86,6 +92,12 @@ export interface ArtifactBarProps {
     modes?: ArtifactBarModes | undefined;
     /** Who else is here, such as a presence stack. Folded away first on a narrower bar. */
     presence?: ReactNode;
+    /**
+     * What the kind is doing now, said before its tools: an `EditingStatus`
+     * while a doc is edited. Never folded away; a status that has words to
+     * spare folds them itself.
+     */
+    status?: ReactNode;
     /** The kind's own controls, before the panels: a doc's Edit. */
     kindTools?: readonly ArtifactBarTool[] | undefined;
     /** The panels and actions every artifact has: details, history, people, share. */
@@ -121,7 +133,7 @@ export interface ArtifactBarProps {
  * the stylesheet shows one, so no control is ever in two places a reader can
  * see at once and nothing is measured in script.
  */
-export declare function ArtifactBar({ title, kind, icon, kindLabel, back, start, onRename, renaming, onRenamingChange, version, modes, presence, kindTools, tools, menu, as, headingLevel, pending, labels, className, }: ArtifactBarProps): import("react").JSX.Element;
+export declare function ArtifactBar({ title, kind, icon, kindLabel, back, start, onRename, renaming, onRenamingChange, version, modes, presence, status, kindTools, tools, menu, as, headingLevel, pending, labels, className, }: ArtifactBarProps): import("react").JSX.Element;
 export interface ArtifactVersionChipProps {
     /** The version on show. */
     version: number;

package/dist/ArtifactBar/index.js

@@ -1,4 +1,4 @@
-export { ARTIFACT_BAR_LABELS, ArtifactBar, ArtifactVersionChip } from '../chunk-QMBP23BL.js';
+export { ARTIFACT_BAR_LABELS, ArtifactBar, ArtifactVersionChip } from '../chunk-P4BOXB6E.js';
 import '../chunk-FQCLKD7U.js';
 import '../chunk-SMBKXWML.js';
 import '../chunk-QWOPX2MN.js';

package/dist/{ArtifactBar-IBWB5POL.css → ArtifactBar-MLMJHWY6.css}

@@ -192,6 +192,13 @@
   margin-inline-start: var(--spacing-1);
 }
 
+.crewlet-artifact-bar__status {
+  display: inline-flex;
+  align-items: center;
+  min-width: 0;
+  margin-inline-end: var(--spacing-2);
+}
+
 .crewlet-artifact-bar__presence {
   display: inline-flex;
   align-items: center;

package/dist/EditingStatus/index.js

@@ -1,2 +1,2 @@
-export { EditingStatus } from '../chunk-3DPIU2Q7.js';
+export { EditingStatus } from '../chunk-FPS3JIPQ.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{EditingStatus-NFADEPSX.css → EditingStatus-L6THUAN7.css}

@@ -42,11 +42,32 @@
   margin-right: var(--spacing-2);
 }
 
+/*
+ * THE WORDS FOLD AND THE DOT STAYS where room is short, hidden from the eye
+ * and still read by a screen reader, so the status says the same thing to
+ * everyone. On a phone the state folds. On an artifact bar's narrow
+ * arrangement (below 640px, as ArtifactBar.css draws it) "Editing" folds too:
+ * the title has the row's room first, and Cancel and Save beside the dot
+ * already say an edit is open.
+ */
 @media (width < 480px) {
   .crewlet-editing-status__state {
     position: absolute;
     width: 1px;
     height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+  }
+}
+
+@container crewlet-artifact-bar (width < 640px) {
+  .crewlet-editing-status__label,
+  .crewlet-editing-status__state {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    margin: -1px;
     overflow: hidden;
     clip-path: inset(50%);
   }

package/dist/{chunk-3DPIU2Q7.js → chunk-FPS3JIPQ.js}

@@ -1,5 +1,5 @@
 import { cx } from './chunk-ODEQTPFM.js';
-import './EditingStatus-NFADEPSX.css';
+import './EditingStatus-L6THUAN7.css';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 var LABELS = {

package/dist/{chunk-QMBP23BL.js → chunk-P4BOXB6E.js}

@@ -7,7 +7,7 @@ import { Button } from './chunk-OG6CL3EB.js';
 import { IconButton } from './chunk-4FQT6ZAY.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './ArtifactBar-IBWB5POL.css';
+import './ArtifactBar-MLMJHWY6.css';
 import { useId, useState, useRef, useEffect } from 'react';
 import { ChevronLeftGlyph, EllipsisGlyph, ChevronDownGlyph } from '@crewlethq/icons/glyphs';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
@@ -31,6 +31,7 @@ function ArtifactBar({
   version,
   modes,
   presence,
+  status,
   kindTools = [],
   tools = [],
   menu = [],
@@ -109,6 +110,7 @@ function ArtifactBar({
           }
         ) }) : null,
         /* @__PURE__ */ jsxs("div", { className: "crewlet-artifact-bar__end", children: [
+          status ? /* @__PURE__ */ jsx("span", { className: "crewlet-artifact-bar__status", children: status }) : null,
           presence ? /* @__PURE__ */ jsx("span", { className: "crewlet-artifact-bar__presence", children: presence }) : null,
           kindTools.some((t) => !t.labelled) ? /* @__PURE__ */ jsx("span", { className: "crewlet-artifact-bar__tools crewlet-artifact-bar__wide", children: kindTools.filter((t) => !t.labelled).map((tool) => /* @__PURE__ */ jsx(ToolButton, { tool, apple }, tool.key)) }) : null,
           tools.some((t) => !t.labelled) ? /* @__PURE__ */ jsxs("span", { className: "crewlet-artifact-bar__tools crewlet-artifact-bar__wide", children: [
@@ -165,6 +167,20 @@ function ToolButton({ tool, apple }) {
 }
 function LabelledTool({ tool, apple }) {
   const shortcut = tool.keys ? ariaKeys(tool.keys, apple) : void 0;
+  if (tool.emphasis === "primary") {
+    return /* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(Tip, { tool, apple }), placement: "bottom", disabled: !tool.keys, children: /* @__PURE__ */ jsx(
+      Button,
+      {
+        size: "small",
+        variant: "primary",
+        leadingIcon: tool.icon,
+        disabledReason: tool.disabledReason,
+        "aria-keyshortcuts": shortcut,
+        onClick: tool.onSelect,
+        children: tool.label
+      }
+    ) });
+  }
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx("span", { className: "crewlet-artifact-bar__roomy", children: /* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(Tip, { tool, apple }), placement: "bottom", disabled: !tool.keys, children: /* @__PURE__ */ jsx(
       Button,

package/dist/generated/index.js

@@ -1,7 +1,7 @@
 import '../chunk-OC46246T.js';
 export { WidgetFrame } from '../chunk-AAOH2P6Y.js';
 export { ElementToPngError, elementToPng, serializeElement, toCsv } from '../chunk-UOR7TOAU.js';
-export { ThemeToggle } from '../chunk-NP2C4Y4E.js';
+export { ToastProvider, Toaster, useToast } from '../chunk-QH3AKP2N.js';
 export { TreeCanvas } from '../chunk-S6VG5ZFZ.js';
 export { VERSION_COMPARE_LABELS, VERSION_COMPARE_LENSES, VersionCompare } from '../chunk-EHQTPVV4.js';
 export { VersionTimeline } from '../chunk-W4XYY73O.js';
@@ -10,24 +10,24 @@ export { Text } from '../chunk-IKBK4A5O.js';
 export { ThemeGallery } from '../chunk-C2FRTWKO.js';
 export { ThemeSwatch } from '../chunk-MNFU2RNT.js';
 export { DensitySwitcher, ThemeSwitcher } from '../chunk-WJDQ7XQA.js';
+export { ThemeToggle } from '../chunk-NP2C4Y4E.js';
 export { applyStoredPreferences, resolveTheme, useDensityPreference, useSystemTheme, useThemePreference } from '../chunk-Z24ZUSTX.js';
 export { DEFAULT_TIME_WINDOW_LABELS, TIME_WINDOW_SPANS, TimeWindowPicker, describeTimeWindow, isTimeWindowSet, parseTimeWindowDuration, resolveTimeWindow, timeWindowMatchesPreset } from '../chunk-UZ6MA2V6.js';
 export { Timeline, TimelineItem } from '../chunk-AUQPBL4O.js';
-export { ToastProvider, Toaster, useToast } from '../chunk-QH3AKP2N.js';
-export { SlideGrid } from '../chunk-3C3BRIMY.js';
+export { Stepper } from '../chunk-5QWIJSQM.js';
 export { Switcher } from '../chunk-HVNTQ36V.js';
 export { Table } from '../chunk-V2N3BMOT.js';
 export { TABLE_TAGS_CELL_LABELS, TableDateCell, TableEntityCell, TableKeyCell, TableNumberCell, TableStatusCell, TableTagsCell, TableTextCell } from '../chunk-LFNUH4GY.js';
 export { SLIDE_COMPARE_LABELS, SlideCompare } from '../chunk-ALMSY7RL.js';
 export { SlideFilmstrip } from '../chunk-LR5QTFOE.js';
+export { SlideGrid } from '../chunk-3C3BRIMY.js';
 export { StatCard } from '../chunk-IKB6HFGK.js';
 export { StatGroup } from '../chunk-JXRI5YD2.js';
-export { Stepper } from '../chunk-5QWIJSQM.js';
+export { SegmentedMeter, segmentedMeterLabel } from '../chunk-4AK52VHB.js';
 export { ARTIFACT_ROLES, SHAREABLE_ROLES, ShareDialog, roleAtLeast } from '../chunk-JQLTG4KH.js';
 export { Select } from '../chunk-FC4YTTFJ.js';
 export { CellDisplay, CellEditor, CheckboxCell, DateCell, LongTextCell, MultiSelectCell, NumberCell, PersonCell, RatingCell, SelectCell, SheetCell, SheetGrid, StatusCell, TextCell, UrlCell } from '../chunk-CT4EZF62.js';
 export { TagGroup } from '../chunk-O2EGEONV.js';
-export { SegmentedMeter, segmentedMeterLabel } from '../chunk-4AK52VHB.js';
 export { matchesShortcut, useShortcut } from '../chunk-2FPENTCF.js';
 export { NavGroup, NavItem, SidebarNav } from '../chunk-UCCC7YVZ.js';
 export { ReadingPane, ReadingPaneByline, ReadingPaneLead, ReadingPaneOutcome, ReadingPaneQuote, ReadingPaneReasoning, ReadingPaneSection, ReadingPaneTitle } from '../chunk-ZAJHGDAW.js';
@@ -57,8 +57,8 @@ import '../chunk-CENOOTAV.js';
 export { MERGE_CONFLICTS_LABELS, MergeConflicts } from '../chunk-RWA4H2TV.js';
 export { DEFAULT_METER_THRESHOLDS, METER_STATES, Meter, meterState, meterStateTone, meterTone, progressTone } from '../chunk-UGNUUVRI.js';
 export { NewItemsNotice } from '../chunk-PXU6HOZB.js';
-export { OrgLabel } from '../chunk-AKEZ3G5V.js';
 export { FactLine, ObjectHeader, SetByLine } from '../chunk-VGE3G3T4.js';
+export { OrgLabel } from '../chunk-AKEZ3G5V.js';
 export { Link } from '../chunk-FBSEJO2C.js';
 export { LinkInterstitial, openExternal } from '../chunk-ZR5VN5IV.js';
 export { List, ListItem } from '../chunk-DS2C73RJ.js';
@@ -74,12 +74,12 @@ export { FollowBanner } from '../chunk-LDJ3J4TQ.js';
 export { DEFAULT_FRAME_THEME, EXTERNAL_URL_MAX, FRAME_BRIDGE, FRAME_MESSAGE, FRAME_ORIGIN_MODES, FRAME_SANDBOX_TOKENS, applyFrameTheme, checkFrameSandbox, externalUrl, frameFragment, frameOriginMatches, frameThemeMessage, httpOrigin, isFocusExit, isFrameNonce, negotiateBridge, parseFrameFragment, portTargetOrigin, readFrameHello, readFramePortMessage, readFrameTheme, readOpenLink } from '../chunk-F6V2PTN6.js';
 export { DENSITY_PREFERENCES, PALETTE_ID, THEME_PREFERENCES, applyDensity, applyPalette, applyTheme, isDensityPreference, isPaletteId, isThemePreference } from '../chunk-ZXXDZJQN.js';
 export { useFullscreen } from '../chunk-XDTYBF2F.js';
-import '../chunk-FFMCMSJB.js';
 export { Highlight, highlightRanges, highlightTerms } from '../chunk-H6VKCIWV.js';
+import '../chunk-FFMCMSJB.js';
 export { IconTile } from '../chunk-IXJHTFXG.js';
 export { DownloadButton } from '../chunk-BEHFTRMZ.js';
 export { downloadBlob, downloadText, safeFilename, useDownload } from '../chunk-IW55G7XG.js';
-export { EditingStatus } from '../chunk-3DPIU2Q7.js';
+export { EditingStatus } from '../chunk-FPS3JIPQ.js';
 export { EntityChip } from '../chunk-4KWOKX2B.js';
 export { ErrorBoundary } from '../chunk-XX2VQE55.js';
 export { Eyebrow } from '../chunk-RK4XPHVG.js';
@@ -102,6 +102,7 @@ export { ALL_ITEMS, CopyableCell, DATA_TABLE_LABELS, DataTable, RowActionsMenu }
 export { DATASET_SOURCE_KINDS, DatasetSource, DatasetSourceList } from '../chunk-ZB5O3ELS.js';
 export { Tag } from '../chunk-GFV4LJHH.js';
 export { StatusDot } from '../chunk-WIATRXEJ.js';
+export { ChoiceButtons } from '../chunk-YSJC7AZC.js';
 export { ChoiceList } from '../chunk-QBXZLGK2.js';
 export { CodeBlock } from '../chunk-GDDE4UM7.js';
 export { CopyButton, Copyable } from '../chunk-W46LPU4R.js';
@@ -125,7 +126,6 @@ export { LONGTEXT_MAX_DEFAULT, RATING_MAX_CEILING, RATING_MAX_DEFAULT, SHEET_COL
 export { PRESENCE_ACTIVITIES, PRESENCE_HUES, PRESENCE_LABELS, assignPresenceHues, collapseSessions, joinNames, presenceLabels, presenceOrder } from '../chunk-Z7JYG5TF.js';
 import '../chunk-3L5NHASN.js';
 export { ActivityStrip, BarList, ChartTooltip, DATA_COLORS, DATA_COLOR_OTHER, Legend, Sparkline, StackedBar, StackedColumns, TimeSeries, dataColor, niceScale, useChartHover } from '../chunk-77DRMDXR.js';
-export { ChoiceButtons } from '../chunk-YSJC7AZC.js';
 export { AuthLayout } from '../chunk-VDPJGP4Q.js';
 export { AvatarPicker } from '../chunk-TGYDROIB.js';
 export { HuePicker } from '../chunk-LIXSV5YI.js';
@@ -144,7 +144,7 @@ export { Switch } from '../chunk-A722MUNR.js';
 export { DEFAULT_REORDER_LABELS, moveKey, useReorder, useReorderLists } from '../chunk-XJ2QEBMM.js';
 export { Checkbox, CheckboxGroup } from '../chunk-7T42VQQT.js';
 export { FormField, FormRow, FormSection, Input, InputAffix, Label, ReadOnlyField, Textarea } from '../chunk-6QFAK2WV.js';
-export { ARTIFACT_BAR_LABELS, ArtifactBar, ArtifactVersionChip } from '../chunk-QMBP23BL.js';
+export { ARTIFACT_BAR_LABELS, ArtifactBar, ArtifactVersionChip } from '../chunk-P4BOXB6E.js';
 import '../chunk-FQCLKD7U.js';
 export { Kbd, isApplePlatform, keyGlyph } from '../chunk-SMBKXWML.js';
 export { Tooltip } from '../chunk-QWOPX2MN.js';

package/dist/index.js

@@ -1,7 +1,7 @@
 import './chunk-OC46246T.js';
 export { WidgetFrame } from './chunk-AAOH2P6Y.js';
 export { ElementToPngError, elementToPng, serializeElement, toCsv } from './chunk-UOR7TOAU.js';
-export { ThemeToggle } from './chunk-NP2C4Y4E.js';
+export { ToastProvider, Toaster, useToast } from './chunk-QH3AKP2N.js';
 export { TreeCanvas } from './chunk-S6VG5ZFZ.js';
 export { VERSION_COMPARE_LABELS, VERSION_COMPARE_LENSES, VersionCompare } from './chunk-EHQTPVV4.js';
 export { VersionTimeline } from './chunk-W4XYY73O.js';
@@ -10,24 +10,24 @@ export { Text } from './chunk-IKBK4A5O.js';
 export { ThemeGallery } from './chunk-C2FRTWKO.js';
 export { ThemeSwatch } from './chunk-MNFU2RNT.js';
 export { DensitySwitcher, ThemeSwitcher } from './chunk-WJDQ7XQA.js';
+export { ThemeToggle } from './chunk-NP2C4Y4E.js';
 export { applyStoredPreferences, resolveTheme, useDensityPreference, useSystemTheme, useThemePreference } from './chunk-Z24ZUSTX.js';
 export { DEFAULT_TIME_WINDOW_LABELS, TIME_WINDOW_SPANS, TimeWindowPicker, describeTimeWindow, isTimeWindowSet, parseTimeWindowDuration, resolveTimeWindow, timeWindowMatchesPreset } from './chunk-UZ6MA2V6.js';
 export { Timeline, TimelineItem } from './chunk-AUQPBL4O.js';
-export { ToastProvider, Toaster, useToast } from './chunk-QH3AKP2N.js';
-export { SlideGrid } from './chunk-3C3BRIMY.js';
+export { Stepper } from './chunk-5QWIJSQM.js';
 export { Switcher } from './chunk-HVNTQ36V.js';
 export { Table } from './chunk-V2N3BMOT.js';
 export { TABLE_TAGS_CELL_LABELS, TableDateCell, TableEntityCell, TableKeyCell, TableNumberCell, TableStatusCell, TableTagsCell, TableTextCell } from './chunk-LFNUH4GY.js';
 export { SLIDE_COMPARE_LABELS, SlideCompare } from './chunk-ALMSY7RL.js';
 export { SlideFilmstrip } from './chunk-LR5QTFOE.js';
+export { SlideGrid } from './chunk-3C3BRIMY.js';
 export { StatCard } from './chunk-IKB6HFGK.js';
 export { StatGroup } from './chunk-JXRI5YD2.js';
-export { Stepper } from './chunk-5QWIJSQM.js';
+export { SegmentedMeter, segmentedMeterLabel } from './chunk-4AK52VHB.js';
 export { ARTIFACT_ROLES, SHAREABLE_ROLES, ShareDialog, roleAtLeast } from './chunk-JQLTG4KH.js';
 export { Select } from './chunk-FC4YTTFJ.js';
 export { CellDisplay, CellEditor, CheckboxCell, DateCell, LongTextCell, MultiSelectCell, NumberCell, PersonCell, RatingCell, SelectCell, SheetCell, SheetGrid, StatusCell, TextCell, UrlCell } from './chunk-CT4EZF62.js';
 export { TagGroup } from './chunk-O2EGEONV.js';
-export { SegmentedMeter, segmentedMeterLabel } from './chunk-4AK52VHB.js';
 export { matchesShortcut, useShortcut } from './chunk-2FPENTCF.js';
 export { NavGroup, NavItem, SidebarNav } from './chunk-UCCC7YVZ.js';
 export { ReadingPane, ReadingPaneByline, ReadingPaneLead, ReadingPaneOutcome, ReadingPaneQuote, ReadingPaneReasoning, ReadingPaneSection, ReadingPaneTitle } from './chunk-ZAJHGDAW.js';
@@ -57,8 +57,8 @@ import './chunk-CENOOTAV.js';
 export { MERGE_CONFLICTS_LABELS, MergeConflicts } from './chunk-RWA4H2TV.js';
 export { DEFAULT_METER_THRESHOLDS, METER_STATES, Meter, meterState, meterStateTone, meterTone, progressTone } from './chunk-UGNUUVRI.js';
 export { NewItemsNotice } from './chunk-PXU6HOZB.js';
-export { OrgLabel } from './chunk-AKEZ3G5V.js';
 export { FactLine, ObjectHeader, SetByLine } from './chunk-VGE3G3T4.js';
+export { OrgLabel } from './chunk-AKEZ3G5V.js';
 export { Link } from './chunk-FBSEJO2C.js';
 export { LinkInterstitial, openExternal } from './chunk-ZR5VN5IV.js';
 export { List, ListItem } from './chunk-DS2C73RJ.js';
@@ -74,12 +74,12 @@ export { FollowBanner } from './chunk-LDJ3J4TQ.js';
 export { DEFAULT_FRAME_THEME, EXTERNAL_URL_MAX, FRAME_BRIDGE, FRAME_MESSAGE, FRAME_ORIGIN_MODES, FRAME_SANDBOX_TOKENS, applyFrameTheme, checkFrameSandbox, externalUrl, frameFragment, frameOriginMatches, frameThemeMessage, httpOrigin, isFocusExit, isFrameNonce, negotiateBridge, parseFrameFragment, portTargetOrigin, readFrameHello, readFramePortMessage, readFrameTheme, readOpenLink } from './chunk-F6V2PTN6.js';
 export { DENSITY_PREFERENCES, PALETTE_ID, THEME_PREFERENCES, applyDensity, applyPalette, applyTheme, isDensityPreference, isPaletteId, isThemePreference } from './chunk-ZXXDZJQN.js';
 export { useFullscreen } from './chunk-XDTYBF2F.js';
-import './chunk-FFMCMSJB.js';
 export { Highlight, highlightRanges, highlightTerms } from './chunk-H6VKCIWV.js';
+import './chunk-FFMCMSJB.js';
 export { IconTile } from './chunk-IXJHTFXG.js';
 export { DownloadButton } from './chunk-BEHFTRMZ.js';
 export { downloadBlob, downloadText, safeFilename, useDownload } from './chunk-IW55G7XG.js';
-export { EditingStatus } from './chunk-3DPIU2Q7.js';
+export { EditingStatus } from './chunk-FPS3JIPQ.js';
 export { EntityChip } from './chunk-4KWOKX2B.js';
 export { ErrorBoundary } from './chunk-XX2VQE55.js';
 export { Eyebrow } from './chunk-RK4XPHVG.js';
@@ -102,6 +102,7 @@ export { ALL_ITEMS, CopyableCell, DATA_TABLE_LABELS, DataTable, RowActionsMenu }
 export { DATASET_SOURCE_KINDS, DatasetSource, DatasetSourceList } from './chunk-ZB5O3ELS.js';
 export { Tag } from './chunk-GFV4LJHH.js';
 export { StatusDot } from './chunk-WIATRXEJ.js';
+export { ChoiceButtons } from './chunk-YSJC7AZC.js';
 export { ChoiceList } from './chunk-QBXZLGK2.js';
 export { CodeBlock } from './chunk-GDDE4UM7.js';
 export { CopyButton, Copyable } from './chunk-W46LPU4R.js';
@@ -125,7 +126,6 @@ export { LONGTEXT_MAX_DEFAULT, RATING_MAX_CEILING, RATING_MAX_DEFAULT, SHEET_COL
 export { PRESENCE_ACTIVITIES, PRESENCE_HUES, PRESENCE_LABELS, assignPresenceHues, collapseSessions, joinNames, presenceLabels, presenceOrder } from './chunk-Z7JYG5TF.js';
 import './chunk-3L5NHASN.js';
 export { ActivityStrip, BarList, ChartTooltip, DATA_COLORS, DATA_COLOR_OTHER, Legend, Sparkline, StackedBar, StackedColumns, TimeSeries, dataColor, niceScale, useChartHover } from './chunk-77DRMDXR.js';
-export { ChoiceButtons } from './chunk-YSJC7AZC.js';
 export { AuthLayout } from './chunk-VDPJGP4Q.js';
 export { AvatarPicker } from './chunk-TGYDROIB.js';
 export { HuePicker } from './chunk-LIXSV5YI.js';
@@ -144,7 +144,7 @@ export { Switch } from './chunk-A722MUNR.js';
 export { DEFAULT_REORDER_LABELS, moveKey, useReorder, useReorderLists } from './chunk-XJ2QEBMM.js';
 export { Checkbox, CheckboxGroup } from './chunk-7T42VQQT.js';
 export { FormField, FormRow, FormSection, Input, InputAffix, Label, ReadOnlyField, Textarea } from './chunk-6QFAK2WV.js';
-export { ARTIFACT_BAR_LABELS, ArtifactBar, ArtifactVersionChip } from './chunk-QMBP23BL.js';
+export { ARTIFACT_BAR_LABELS, ArtifactBar, ArtifactVersionChip } from './chunk-P4BOXB6E.js';
 import './chunk-FQCLKD7U.js';
 export { Kbd, isApplePlatform, keyGlyph } from './chunk-SMBKXWML.js';
 export { Tooltip } from './chunk-QWOPX2MN.js';

package/dist/styles.css

@@ -1996,7 +1996,7 @@ button.crewlet-account-row__who:focus-visible {
 }
 
 
-/* ArtifactBar-IBWB5POL.css */
+/* ArtifactBar-MLMJHWY6.css */
 /*
  * One row, one hairline under it, the height of a large row. The lead (the
  * way back, the glyph, the title, the version) takes what the end leaves it
@@ -2191,6 +2191,13 @@ button.crewlet-account-row__who:focus-visible {
   margin-inline-start: var(--spacing-1);
 }
 
+.crewlet-artifact-bar__status {
+  display: inline-flex;
+  align-items: center;
+  min-width: 0;
+  margin-inline-end: var(--spacing-2);
+}
+
 .crewlet-artifact-bar__presence {
   display: inline-flex;
   align-items: center;
@@ -11520,7 +11527,7 @@ svg.crewlet-datetime__chevron {
 }
 
 
-/* EditingStatus-NFADEPSX.css */
+/* EditingStatus-L6THUAN7.css */
 /*
  * The editing status (EditingStatus.tsx): a word and a dot, in the bar's own
  * small step, quiet until something is unsaved.
@@ -11565,11 +11572,32 @@ svg.crewlet-datetime__chevron {
   margin-right: var(--spacing-2);
 }
 
+/*
+ * THE WORDS FOLD AND THE DOT STAYS where room is short, hidden from the eye
+ * and still read by a screen reader, so the status says the same thing to
+ * everyone. On a phone the state folds. On an artifact bar's narrow
+ * arrangement (below 640px, as ArtifactBar.css draws it) "Editing" folds too:
+ * the title has the row's room first, and Cancel and Save beside the dot
+ * already say an edit is open.
+ */
 @media (width < 480px) {
   .crewlet-editing-status__state {
     position: absolute;
     width: 1px;
     height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+  }
+}
+
+@container crewlet-artifact-bar (width < 640px) {
+  .crewlet-editing-status__label,
+  .crewlet-editing-status__state {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    margin: -1px;
     overflow: hidden;
     clip-path: inset(50%);
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crewlethq/ui",
-  "version": "0.30.0",
+  "version": "0.31.1",
   "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.30.0",
-    "@crewlethq/tokens": "0.30.0",
+    "@crewlethq/icons": "0.31.1",
+    "@crewlethq/tokens": "0.31.1",
     "prosemirror-commands": "1.7.2",
     "prosemirror-gapcursor": "1.4.1",
     "prosemirror-history": "1.5.1",