@crewlethq/ui 0.28.0 → 0.30.0

package/dist/ArtifactCard/index.js

@@ -1,12 +1,12 @@
-export { ARTIFACT_KINDS, ArtifactCard, ArtifactKindGlyph } from '../chunk-6J35F334.js';
+export { ARTIFACT_KINDS, ArtifactCard, ArtifactKindGlyph } from '../chunk-GOSQXEZU.js';
 import '../chunk-4KP4RC3O.js';
 import '../chunk-3CZ7XAVY.js';
 import '../chunk-EUCC37WY.js';
 import '../chunk-UAN5NE7M.js';
 import '../chunk-5OM447RW.js';
-import '../chunk-YZCJ63JF.js';
+import '../chunk-ACA27MZH.js';
 import '../chunk-AV2DXAEL.js';
-import '../chunk-PQADV6P6.js';
 import '../chunk-BHHIIK3M.js';
+import '../chunk-PQADV6P6.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/ArtifactCover/index.js

@@ -1,14 +1,14 @@
-export { DashboardCover, DocCover, SHEET_COVER_COLUMNS, SHEET_COVER_ROWS, SheetCover } from '../chunk-MQEEQVG6.js';
-import '../chunk-WI6K5M5X.js';
-import '../chunk-6J35F334.js';
+export { DashboardCover, DocCover, SHEET_COVER_COLUMNS, SHEET_COVER_ROWS, SheetCover } from '../chunk-6AH2XJ3Q.js';
+import '../chunk-M3LUNN7F.js';
+import '../chunk-GOSQXEZU.js';
 import '../chunk-4KP4RC3O.js';
 import '../chunk-3CZ7XAVY.js';
 import '../chunk-EUCC37WY.js';
 import '../chunk-UAN5NE7M.js';
 import '../chunk-5OM447RW.js';
-import '../chunk-YZCJ63JF.js';
+import '../chunk-ACA27MZH.js';
 import '../chunk-AV2DXAEL.js';
-import '../chunk-PQADV6P6.js';
 import '../chunk-BHHIIK3M.js';
+import '../chunk-PQADV6P6.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/ArtifactIcon/index.js

@@ -1,13 +1,13 @@
-export { ARTIFACT_ICON_WORDS, ArtifactIcon, artifactIconGlyph } from '../chunk-V2Z24W2Z.js';
-import '../chunk-6J35F334.js';
+export { ARTIFACT_ICON_WORDS, ArtifactIcon, artifactIconGlyph } from '../chunk-4JUKWWUD.js';
+import '../chunk-GOSQXEZU.js';
 import '../chunk-4KP4RC3O.js';
 import '../chunk-3CZ7XAVY.js';
 import '../chunk-EUCC37WY.js';
 import '../chunk-UAN5NE7M.js';
 import '../chunk-5OM447RW.js';
-import '../chunk-YZCJ63JF.js';
+import '../chunk-ACA27MZH.js';
 import '../chunk-AV2DXAEL.js';
-import '../chunk-PQADV6P6.js';
 import '../chunk-BHHIIK3M.js';
+import '../chunk-PQADV6P6.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/ArtifactPanel/ArtifactPanel.d.ts

@@ -0,0 +1,81 @@
+import { type ReactNode, type Ref } from 'react';
+/** How wide a panel rests beside the artifact: facts, a list, or a table. */
+export type ArtifactPanelSize = 'sm' | 'md' | 'lg';
+export interface ArtifactPanelLabels {
+    close: (title: string) => string;
+    expand: string;
+    collapse: string;
+}
+export declare const ARTIFACT_PANEL_LABELS: ArtifactPanelLabels;
+export interface ArtifactPanelProps {
+    title: string;
+    /** A glyph before the title: the one on the bar's control that opened it. */
+    icon?: ReactNode;
+    onClose: () => void;
+    size?: ArtifactPanelSize | undefined;
+    /**
+     * The panel takes the whole workspace, the artifact hidden behind it, for a
+     * table or a comparison the side's width cannot hold. With `onExpandedChange`
+     * the head carries the control that toggles it.
+     */
+    expanded?: boolean | undefined;
+    onExpandedChange?: ((expanded: boolean) => void) | undefined;
+    /** Controls in the head, before expand and close. */
+    actions?: ReactNode;
+    /**
+     * Whether focus moves to the panel's heading when it opens. True when the
+     * reader opened it; false for a panel a link opened on arrival, which must
+     * not take focus from wherever the page put it.
+     */
+    focusOnOpen?: boolean | undefined;
+    labels?: Partial<ArtifactPanelLabels> | undefined;
+    className?: string | undefined;
+    children: ReactNode;
+}
+/**
+ * A panel at the artifact's side: its details, its history, its data, who is
+ * here, its settings. One at a time, opened from the bar's controls.
+ *
+ * A COMPLEMENTARY REGION, NOT A DIALOG. The artifact beside it stays live and
+ * reachable, so the panel is an `aside` named by its heading and never traps
+ * focus; the reader moves between the two with Tab as between any two parts
+ * of a page.
+ *
+ * FOCUS IS STILL MANAGED, because a panel opened from a control that is then
+ * pressed again, or closed from inside, would otherwise leave focus on nothing.
+ * Opening moves focus to the heading, so a screen reader announces what
+ * opened; closing with focus inside hands it back to whatever held it before
+ * (the bar's control, as a rule), and leaves it alone otherwise.
+ *
+ * ESCAPE CLOSES IT from anywhere inside, a field included, unless something
+ * inside answered the press first: a menu or a dialog opened from the panel is
+ * portalled out of it, and the press that closes one of them never reaches
+ * this.
+ */
+export declare function ArtifactPanel({ title, icon, onClose, size, expanded, onExpandedChange, actions, focusOnOpen, labels, className, children, }: ArtifactPanelProps): import("react").JSX.Element;
+export interface ArtifactWorkspaceProps {
+    /** The open panel, if any: an [ArtifactPanel]. */
+    panel?: ReactNode;
+    /** Whether the open panel takes the whole workspace. */
+    expanded?: boolean | undefined;
+    /** The artifact's own body: the element a caller scrolls, measures or listens on. */
+    bodyRef?: Ref<HTMLDivElement> | undefined;
+    bodyClassName?: string | undefined;
+    /** Names the body region: the artifact's title. */
+    bodyLabel?: string | undefined;
+    className?: string | undefined;
+    children: ReactNode;
+}
+/**
+ * The artifact's body and its one open panel, side by side.
+ *
+ * THE PANEL IS A COLUMN WHERE THERE IS ROOM FOR TWO, AND A DRAWER WHERE THERE
+ * IS NOT. Measured on the workspace itself (a container query), since a
+ * sidebar beside it decides its room: wide, the artifact narrows to make room
+ * and the two are read together, which is the point of a panel of history or
+ * of who is here; narrower than two useful columns, the panel slides over the
+ * artifact's end edge; on a phone it covers the artifact whole. An expanded
+ * panel takes the workspace at every width, with the artifact kept mounted
+ * behind it so a page's state survives the look at its data.
+ */
+export declare function ArtifactWorkspace({ panel, expanded, bodyRef, bodyClassName, bodyLabel, className, children, }: ArtifactWorkspaceProps): import("react").JSX.Element;

package/dist/ArtifactPanel/index.d.ts

@@ -0,0 +1,3 @@
+import './ArtifactPanel.css';
+export { ARTIFACT_PANEL_LABELS, ArtifactPanel, ArtifactWorkspace } from './ArtifactPanel.js';
+export type { ArtifactPanelLabels, ArtifactPanelProps, ArtifactPanelSize, ArtifactWorkspaceProps, } from './ArtifactPanel.js';

package/dist/ArtifactPanel/index.js

@@ -0,0 +1,5 @@
+export { ARTIFACT_PANEL_LABELS, ArtifactPanel, ArtifactWorkspace } from '../chunk-I3BSQUKN.js';
+import '../chunk-PQADV6P6.js';
+import '../chunk-4FQT6ZAY.js';
+import '../chunk-BZFWDIV6.js';
+import '../chunk-ODEQTPFM.js';

package/dist/ArtifactPanel-YFXT5O77.css

@@ -0,0 +1,132 @@
+/*
+ * The workspace is a row: the artifact's body, then at most one panel. The
+ * body scrolls itself, so a panel beside it stays in view however far the
+ * artifact is read; the panel's own body scrolls under its head.
+ *
+ * ONE HAIRLINE between the two, the panel's start edge, and none at the
+ * workspace's own edges: whatever frames the workspace already draws those.
+ */
+
+.crewlet-artifact-workspace {
+  container: crewlet-artifact-workspace / inline-size;
+  position: relative;
+  display: flex;
+  min-width: 0;
+  min-height: 0;
+}
+
+.crewlet-artifact-workspace__body {
+  flex: 1 1 auto;
+  min-width: 0;
+  min-height: 0;
+  overflow: auto;
+}
+
+/* EXPANDED, the panel is the workspace; the body stays mounted behind it. */
+.crewlet-artifact-workspace[data-panel='expanded'] > .crewlet-artifact-workspace__body {
+  display: none;
+}
+
+.crewlet-artifact-panel {
+  --crewlet-artifact-panel-width: 25rem;
+  display: flex;
+  flex: none;
+  flex-direction: column;
+  width: var(--crewlet-artifact-panel-width);
+  min-height: 0;
+  border-left: 1px solid var(--color-border-default);
+  background: var(--color-surface-background);
+}
+
+.crewlet-artifact-panel--sm {
+  --crewlet-artifact-panel-width: 20rem;
+}
+
+.crewlet-artifact-panel--lg {
+  --crewlet-artifact-panel-width: 36rem;
+}
+
+.crewlet-artifact-panel[data-expanded] {
+  flex: 1 1 auto;
+  width: auto;
+  border-left: 0;
+}
+
+.crewlet-artifact-panel__head {
+  display: flex;
+  flex: none;
+  align-items: center;
+  gap: var(--spacing-2);
+  height: var(--size-row-lg);
+  padding: 0 var(--spacing-2) 0 var(--spacing-4);
+  border-bottom: 1px solid var(--color-border-default);
+}
+
+.crewlet-artifact-panel__icon {
+  display: inline-flex;
+  flex: none;
+  color: var(--color-text-tertiary);
+}
+
+.crewlet-artifact-panel__title {
+  flex: 1 1 auto;
+  min-width: 0;
+  margin: 0;
+  overflow: hidden;
+  color: var(--color-text-primary);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-semibold);
+  line-height: var(--font-line-height-snug);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.crewlet-artifact-panel__title:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: var(--size-focus-ring-inset-offset);
+  border-radius: var(--radius-sm);
+}
+
+.crewlet-artifact-panel__actions {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  gap: var(--spacing-1);
+}
+
+.crewlet-artifact-panel__body {
+  flex: 1 1 auto;
+  min-height: 0;
+  padding: var(--spacing-4);
+  overflow: auto;
+  overscroll-behavior: contain;
+}
+
+/* NOT ROOM FOR TWO COLUMNS: the panel slides over the artifact's end edge,
+   raised off it, rather than squeezing the artifact under a useful width. */
+@container crewlet-artifact-workspace (width < 960px) {
+  .crewlet-artifact-panel {
+    position: absolute;
+    inset-block: 0;
+    inset-inline-end: 0;
+    z-index: var(--z-index-overlay);
+    width: min(var(--crewlet-artifact-panel-width), 100%);
+    box-shadow: var(--shadow-lg);
+  }
+
+  .crewlet-artifact-panel[data-expanded] {
+    inset-inline-start: 0;
+    width: auto;
+    box-shadow: none;
+  }
+}
+
+/* A PHONE: the panel is the screen until it is closed. */
+@container crewlet-artifact-workspace (width < 640px) {
+  .crewlet-artifact-panel {
+    inset-inline-start: 0;
+    width: auto;
+    border-left: 0;
+    box-shadow: none;
+  }
+}

package/dist/AuthLayout/index.js

@@ -1,8 +1,8 @@
-export { AuthLayout } from '../chunk-WHZFDS62.js';
+export { AuthLayout } from '../chunk-VDPJGP4Q.js';
 import '../chunk-7KBNFFM3.js';
-import '../chunk-YZCJ63JF.js';
+import '../chunk-ACA27MZH.js';
 import '../chunk-AV2DXAEL.js';
-import '../chunk-PQADV6P6.js';
 import '../chunk-BHHIIK3M.js';
+import '../chunk-PQADV6P6.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/AvatarPicker/index.js

@@ -1,10 +1,10 @@
-export { AvatarPicker } from '../chunk-PRNX5AFE.js';
-import '../chunk-SGIQCI6Y.js';
-import '../chunk-RCQXUT5K.js';
-import '../chunk-HJEVSQN6.js';
+export { AvatarPicker } from '../chunk-TGYDROIB.js';
+import '../chunk-LIXSV5YI.js';
 import '../chunk-BWRGFKJP.js';
 import '../chunk-AYKXMIOR.js';
 import '../chunk-HVIX5ECM.js';
+import '../chunk-RCQXUT5K.js';
+import '../chunk-HJEVSQN6.js';
 import '../chunk-RKKO7QHH.js';
 import '../chunk-5OM447RW.js';
 import '../chunk-BHHIIK3M.js';

package/dist/Card/index.js

@@ -1,6 +1,6 @@
-export { Card } from '../chunk-YZCJ63JF.js';
+export { Card } from '../chunk-ACA27MZH.js';
 export { useCardHeaderSlot } from '../chunk-AV2DXAEL.js';
-import '../chunk-PQADV6P6.js';
 import '../chunk-BHHIIK3M.js';
+import '../chunk-PQADV6P6.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/ChangeMark/index.js

@@ -1,8 +1,8 @@
 export { ChangeMark } from '../chunk-YEKYVJQR.js';
 import '../chunk-NHBP2XS5.js';
 import '../chunk-Z7JYG5TF.js';
-import '../chunk-QWOPX2MN.js';
 import '../chunk-AYKXMIOR.js';
+import '../chunk-QWOPX2MN.js';
 import '../chunk-HMPFGIWM.js';
 import '../chunk-R25RGPUB.js';
 import '../chunk-ODEQTPFM.js';

package/dist/CommandPalette/index.js

@@ -1,10 +1,10 @@
-export { CommandPalette } from '../chunk-HCKJGBQH.js';
+export { CommandPalette } from '../chunk-VVRL27HM.js';
 import '../chunk-I3KKZ2O3.js';
 import '../chunk-F73MC7EZ.js';
-import '../chunk-SMBKXWML.js';
 import '../chunk-6QFAK2WV.js';
-import '../chunk-PQADV6P6.js';
+import '../chunk-SMBKXWML.js';
 import '../chunk-BHHIIK3M.js';
+import '../chunk-PQADV6P6.js';
 import '../chunk-HMPFGIWM.js';
 import '../chunk-R25RGPUB.js';
 import '../chunk-OG6CL3EB.js';

package/dist/CommentThread/index.js

@@ -1,15 +1,15 @@
-export { COMMENT_THREAD_LABELS, CommentThread } from '../chunk-M2VJGNCD.js';
-import '../chunk-RIEDQSA4.js';
-import '../chunk-SMBKXWML.js';
+export { COMMENT_THREAD_LABELS, CommentThread } from '../chunk-GR55WT4R.js';
+import '../chunk-7DZDSSJS.js';
 import '../chunk-6QFAK2WV.js';
-import '../chunk-WI6K5M5X.js';
+import '../chunk-SMBKXWML.js';
+import '../chunk-M3LUNN7F.js';
 import '../chunk-4KP4RC3O.js';
 import '../chunk-3CZ7XAVY.js';
 import '../chunk-EUCC37WY.js';
 import '../chunk-UAN5NE7M.js';
 import '../chunk-5OM447RW.js';
-import '../chunk-PQADV6P6.js';
 import '../chunk-BHHIIK3M.js';
+import '../chunk-PQADV6P6.js';
 import '../chunk-OG6CL3EB.js';
 import '../chunk-4FQT6ZAY.js';
 import '../chunk-BZFWDIV6.js';

package/dist/Composer/index.js

@@ -1,6 +1,6 @@
-export { COMPOSER_COUNTER_AT, Composer } from '../chunk-RIEDQSA4.js';
-import '../chunk-SMBKXWML.js';
+export { COMPOSER_COUNTER_AT, Composer } from '../chunk-7DZDSSJS.js';
 import '../chunk-6QFAK2WV.js';
+import '../chunk-SMBKXWML.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-4FQT6ZAY.js';
 import '../chunk-BZFWDIV6.js';

package/dist/DataView/index.js

@@ -1,22 +1,22 @@
-export { DATA_VIEW_TOOLBAR_LABELS, DataView, DataViewToolbar, FILTER_AXIS_LABELS, FilterAxisBar, FilterAxisChip, applyColumnFilters, applyFilters, blankFilterValue, defaultOperator, filterDefsFromColumns, filterHasValue, filterPredicate, formatFilterValue, operatorOf, tableColumns } from '../chunk-VOMYRJV5.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-RODMM35O.js';
 import '../chunk-HOXGBLEY.js';
 import '../chunk-PGRPNDWM.js';
-import '../chunk-EBJREOKS.js';
 import '../chunk-Y5NQ2LMS.js';
+import '../chunk-EBJREOKS.js';
 import '../chunk-STJ7QBC3.js';
 import '../chunk-DTIW4CHZ.js';
 import '../chunk-I3KKZ2O3.js';
 import '../chunk-F73MC7EZ.js';
-import '../chunk-SMBKXWML.js';
 import '../chunk-BWRGFKJP.js';
 import '../chunk-GXQ3B46I.js';
 import '../chunk-7T42VQQT.js';
 import '../chunk-6QFAK2WV.js';
+import '../chunk-SMBKXWML.js';
 import '../chunk-3CZ7XAVY.js';
 import '../chunk-EUCC37WY.js';
 import '../chunk-AV2DXAEL.js';
-import '../chunk-PQADV6P6.js';
 import '../chunk-BHHIIK3M.js';
+import '../chunk-PQADV6P6.js';
 import '../chunk-2HIOJ4YZ.js';
 import '../chunk-HMPFGIWM.js';
 import '../chunk-R25RGPUB.js';

package/dist/Disclosure/index.js

@@ -1,6 +1,6 @@
-export { Disclosure } from '../chunk-S4RCG44T.js';
-export { DisclosureAnatomy } from '../chunk-ENJUPIND.js';
-import '../chunk-PQADV6P6.js';
+export { Disclosure } from '../chunk-MICH6QSJ.js';
+export { DisclosureAnatomy } from '../chunk-FZVJDJFN.js';
 import '../chunk-BHHIIK3M.js';
+import '../chunk-PQADV6P6.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/Document/Document.d.ts

@@ -21,7 +21,7 @@ export interface DocumentProps extends HTMLAttributes<HTMLElement> {
 }
 /**
  * Rendered markdown, set as a document: headings, paragraphs, lists and task
- * lists, quotes, code, tables, rules, links and images.
+ * lists, quotes, callouts, code, tables, rules, links and images.
  *
  * A STYLESHEET OVER ELEMENTS, NOT A RENDERER. What a body may contain (which
  * link schemes are safe, whether raw HTML is text) is a decision about the
@@ -37,6 +37,13 @@ export interface DocumentProps extends HTMLAttributes<HTMLElement> {
  * gives that element `tabIndex={0}`, a `region` role and a name, because a
  * scroller no keyboard can reach is a table no keyboard can read to its end.
  *
+ * A CALLOUT is recognised the same way: an element with `data-callout` set
+ * to its tone (`note`, `tip`, `important`, `warning`, `caution`), the tone's
+ * name in an element with `data-callout-label` and its blocks in one with
+ * `data-callout-body`. A table cell aligned by `data-align` is set as one
+ * aligned by a style, so an editor that may write no style attribute sets a
+ * column exactly as the reader's renderer does.
+ *
  * THE TITLE IS NOT PART OF IT. A page's title is its address and its `h1`, set
  * above the body by `DocumentTitle`, so a renderer draws the body's own
  * headings from `h2` down and the outline of the page starts there.

package/dist/Document/index.js

@@ -1,2 +1,2 @@
-export { Document, DocumentTitle } from '../chunk-WI6K5M5X.js';
+export { Document, DocumentTitle } from '../chunk-M3LUNN7F.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{Document-PQGXJHB7.css → Document-G3YTZIUL.css}

@@ -286,3 +286,74 @@
   color: var(--color-text-primary);
   overflow-wrap: anywhere;
 }
+
+/*
+ * A TABLE CELL'S ALIGNMENT, read off `data-align` as well as off a style: an
+ * editor that may not write a style attribute under a strict policy marks a
+ * column this way, and the cell is set as the reader's is.
+ */
+.crewlet-document :where(th, td)[data-align='center'] {
+  text-align: center;
+}
+
+.crewlet-document :where(th, td)[data-align='right'] {
+  text-align: end;
+}
+
+/*
+ * A CALLOUT (`> [!NOTE]` and its four siblings): a tinted block with its tone
+ * named on a line of its own, read by its shape as everything here is. A
+ * renderer emits an element with `data-callout="<tone>"` and `role="note"`,
+ * the tone's name in an element with `data-callout-label`, and the blocks in
+ * one with `data-callout-body`. The fill, the ink and the line are each tone's
+ * declared steps, the same three `Callout` paints with.
+ */
+.crewlet-document [data-callout] {
+  --crewlet-document-callout-fill: var(--color-feedback-info-soft);
+  --crewlet-document-callout-ink: var(--color-feedback-info-ink);
+  --crewlet-document-callout-line: var(--color-feedback-info-line);
+  padding: var(--spacing-3) var(--spacing-4);
+  border-inline-start: 3px solid var(--crewlet-document-callout-line);
+  border-radius: var(--radius-sm);
+  background: var(--crewlet-document-callout-fill);
+}
+
+.crewlet-document [data-callout='tip'] {
+  --crewlet-document-callout-fill: var(--color-feedback-success-soft);
+  --crewlet-document-callout-ink: var(--color-feedback-success-ink);
+  --crewlet-document-callout-line: var(--color-feedback-success-line);
+}
+
+.crewlet-document [data-callout='important'] {
+  --crewlet-document-callout-fill: var(--color-brand-accent-soft);
+  --crewlet-document-callout-ink: var(--color-brand-accent-ink);
+  --crewlet-document-callout-line: var(--color-brand-accent);
+}
+
+.crewlet-document [data-callout='warning'] {
+  --crewlet-document-callout-fill: var(--color-feedback-warning-soft);
+  --crewlet-document-callout-ink: var(--color-feedback-warning-ink);
+  --crewlet-document-callout-line: var(--color-feedback-warning-line);
+}
+
+.crewlet-document [data-callout='caution'] {
+  --crewlet-document-callout-fill: var(--color-feedback-danger-soft);
+  --crewlet-document-callout-ink: var(--color-feedback-danger-ink);
+  --crewlet-document-callout-line: var(--color-feedback-danger-line);
+}
+
+.crewlet-document [data-callout-label] {
+  margin: 0 0 var(--spacing-1);
+  color: var(--crewlet-document-callout-ink);
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-semibold);
+  line-height: var(--font-line-height-snug);
+}
+
+.crewlet-document [data-callout-body] {
+  color: var(--color-text-primary);
+}
+
+.crewlet-document [data-callout-body] > * + * {
+  margin-block-start: var(--crewlet-document-gap);
+}

package/dist/EditingStatus/EditingStatus.d.ts

@@ -0,0 +1,25 @@
+/** Every string the status draws. */
+export interface EditingStatusLabels {
+    editing: string;
+    unsaved: string;
+    saving: string;
+}
+export interface EditingStatusProps {
+    /** Whether anything differs from what was opened. */
+    dirty: boolean;
+    /** Whether a save is in flight. */
+    saving?: boolean | undefined;
+    labels?: Partial<EditingStatusLabels> | undefined;
+    className?: string | undefined;
+}
+/**
+ * The quiet state a page is in while somebody edits it: "Editing", and a dot
+ * with "Unsaved changes" once anything differs from what was opened.
+ *
+ * It sits in the bar beside Save and Cancel, which are the caller's: what a
+ * save sends and what Cancel discards are decisions about the caller's own
+ * record. A STATUS, announced politely, so a screen reader hears the change
+ * from saved to unsaved without being interrupted. On a narrow bar the words
+ * fold away and the dot stays, named by the same words.
+ */
+export declare function EditingStatus({ dirty, saving, labels, className }: EditingStatusProps): import("react").JSX.Element;

package/dist/EditingStatus/index.d.ts

@@ -0,0 +1,3 @@
+import './EditingStatus.css';
+export { EditingStatus } from './EditingStatus.js';
+export type { EditingStatusLabels, EditingStatusProps } from './EditingStatus.js';

package/dist/EditingStatus/index.js

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

package/dist/EditingStatus-NFADEPSX.css

@@ -0,0 +1,53 @@
+/*
+ * The editing status (EditingStatus.tsx): a word and a dot, in the bar's own
+ * small step, quiet until something is unsaved.
+ */
+
+.crewlet-editing-status {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  min-width: 0;
+  color: var(--color-text-secondary);
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-compact);
+  white-space: nowrap;
+}
+
+.crewlet-editing-status__dot {
+  flex: none;
+  width: var(--spacing-2);
+  height: var(--spacing-2);
+  border-radius: var(--radius-circle);
+  background: var(--color-text-tertiary);
+}
+
+.crewlet-editing-status--dirty .crewlet-editing-status__dot {
+  background: var(--color-brand-accent);
+}
+
+.crewlet-editing-status__label {
+  color: var(--color-text-primary);
+  font-weight: var(--font-weight-medium);
+}
+
+.crewlet-editing-status__state {
+  overflow: hidden;
+  color: var(--color-text-tertiary);
+  text-overflow: ellipsis;
+}
+
+.crewlet-editing-status__state::before {
+  content: '\00b7';
+  margin-right: var(--spacing-2);
+}
+
+@media (width < 480px) {
+  .crewlet-editing-status__state {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+  }
+}