@crewlethq/ui 0.29.0 → 0.30.0

package/README.md

@@ -41,11 +41,11 @@ 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` and `DocumentTitle`, `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` |
+| Content and text | `Text` (the eight registers and `inherit`), `Prose`, `Document` and `DocumentTitle`, 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` |
 | List screens | `DataView`, and its parts on their own: `DataViewToolbar`, `FilterAxisBar`, `FilterAxisChip`, plus the filter model (`filterDefsFromColumns`, `applyColumnFilters`, `filterPredicate`, `blankFilterValue`) |
-| Feedback and overlays | `Callout`, `ConflictNote`, `Toaster`, `Modal` (with `variant="sheet"`), `ConfirmModal`, `CommandPalette`, `Tooltip`, `Popover`, `Announcer` |
+| Feedback and overlays | `Callout`, `ConflictNote`, `EditingStatus`, `Toaster`, `Modal` (with `variant="sheet"`), `ConfirmModal`, `CommandPalette`, `Tooltip`, `Popover`, `Announcer` |
 | Documents and review | `DiffView` and `DiffSummary` with the line diff they draw (`diffLines`, `diffStat`, `collapseDiff`, `firstChangedLines`, `splitLines`, `MAX_DIFF_LINES`, with no React in it), `DiffList`, `VersionCompare`, `CommentThread` |
 | 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` |
@@ -204,6 +204,27 @@ 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.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.
+
+- **Blocks**: headings, bulleted, numbered and task lists, quotes, callouts, code blocks with their language, tables, links, pictures and dividers.
+- **A slash menu**: type `/` at the start of a line or after a space, filter by name, move with the arrows and choose with Enter. An application adds entries of its own (`commands`), each opening a panel it draws ("Link to a page").
+- **A selection toolbar**: heading levels, bold, italic, strikethrough, inline code and a link, reached from the keyboard with Alt+F10.
+- **Markdown typed as Markdown** becomes the block or the format it spells (`# `, `- `, `1. `, `[ ] `, `> `, three backticks and a language, `---`, `**bold**`, `*em*`, `~~struck~~`, `` `code` ``, `[text](address)`), and Backspace right after gives back what was typed. The shortcuts are the ones every editor shares, and Command or Control with Enter is the caller's `onSubmit`.
+- **A paste of Markdown or HTML converts cleanly, under Trusted Types.** ProseMirror reads pasted HTML by assigning it to `innerHTML` behind a pass-through policy of its own, which a page enforcing `trusted-types 'none'` refuses and a page allowing it should not want. The editor takes paste and drop itself and reads HTML with a tokenizer that builds elements one by one in an inert document, keeping only the elements and attributes it has a meaning for, and copy writes Markdown as the plain text.
+- **A load and a save with no edit change no byte.** Every top-level block remembers the lines it was read from and is written back as them until it is edited; a changed block is written in the spelling it was read with (its bullet, its fence, `*` or `_`), checked by reading it back. `@crewlethq/ui/RichEditorMarkdown` exports the round trip (`roundTripMarkdown`, `canonicalMarkdown`) for an application to hold its own bodies to.
+
+**The Markdown grammar is part of the package** (`parseMarkdown`, `parseMarkdownSpans`, `markdownInline`, `safeHref`, `markdownHeadingOf`, `markdownFenceOf`, `markdownClosesFence`), so an application's renderer and `RichEditor` read a body by one grammar and cannot disagree about it. It reads what the Crewlet engine's renderer read, plus three things that renderer did not: backslash escapes (`\*` is an asterisk), an escaped pipe inside a table cell, and a link label holding an escaped bracket. It also reads **callouts** in GitHub's alert syntax, `> [!NOTE]`, `> [!TIP]`, `> [!IMPORTANT]`, `> [!WARNING]` and `> [!CAUTION]`.
+
+**`Document` sets a callout and a cell aligned by `data-align`.** A renderer emits an element with `data-callout="<tone>"`, the tone's name in an element with `data-callout-label` and the blocks in one with `data-callout-body`; each tone is drawn from the same three steps `Callout` paints with.
+
+**`EditingStatus` says a page is being edited**: "Editing", and an accent dot with "Unsaved changes" once anything differs from what was opened (or "Saving" while a save is in flight), announced politely. It sits in a page bar beside the caller's own Cancel and Save, and on a phone the words fold away behind the dot.
+
+**`@crewlethq/icons` carries the editor's glyphs**: `heading-1`, `type`, `strikethrough`, `text-quote`, `square-code`, `unlink`, and `text-align-start`, `text-align-center` and `text-align-end`.
+
+What to change: nothing. An application that renders Markdown itself may read it through `parseMarkdown` and `markdownInline` instead, and draws a callout by the shape above.
+
 ## Changes in 0.29.0
 
 0.29.0 adds the chrome an open artifact sits in: one slim bar over the artifact, and one panel at its side, so a host can give the artifact the screen and open everything else on demand.

package/dist/ArtifactCover/index.js

@@ -1,5 +1,5 @@
-export { DashboardCover, DocCover, SHEET_COVER_COLUMNS, SHEET_COVER_ROWS, SheetCover } from '../chunk-XALUCIG5.js';
-import '../chunk-WI6K5M5X.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';

package/dist/CommentThread/index.js

@@ -1,8 +1,8 @@
-export { COMMENT_THREAD_LABELS, CommentThread } from '../chunk-FKULOLKG.js';
+export { COMMENT_THREAD_LABELS, CommentThread } from '../chunk-GR55WT4R.js';
 import '../chunk-7DZDSSJS.js';
 import '../chunk-6QFAK2WV.js';
 import '../chunk-SMBKXWML.js';
-import '../chunk-WI6K5M5X.js';
+import '../chunk-M3LUNN7F.js';
 import '../chunk-4KP4RC3O.js';
 import '../chunk-3CZ7XAVY.js';
 import '../chunk-EUCC37WY.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%);
+  }
+}