@crewlethq/ui 0.18.0 → 0.20.0

package/dist/DiffView/diff.d.ts

@@ -0,0 +1,97 @@
+/**
+ * What changed between two versions of a document, by line.
+ *
+ * OVER LINES, by the classic longest-common-subsequence table. The shape is
+ * the one a prose document wants: a paragraph somebody rewrote is a line
+ * replaced, not thirty character edits scattered through it. Word-level
+ * refinement inside a changed line is deliberately absent: it makes a small
+ * edit prettier and a large one unreadable, and documents are rewritten in
+ * paragraphs.
+ *
+ * THE TABLE RATHER THAN MYERS, and [MAX_DIFF_LINES] is what pays for that
+ * choice. The table is quadratic on every input, but it is a dozen lines
+ * anybody can check by reading; the cap keeps the quadratic term small, and a
+ * document past it is reported as a whole replacement rather than freezing the
+ * tab.
+ *
+ * FRAMEWORK FREE. Nothing here imports React, so a host can compute a diff in
+ * a worker or a test and hand the sections to [DiffView].
+ */
+/** One line of the result. `same` lines carry both numbers. */
+export interface DiffLine {
+    kind: 'same' | 'add' | 'remove';
+    text: string;
+    /** 1-based line number in the OLD document, or null on an addition. */
+    before: number | null;
+    /** 1-based line number in the NEW document, or null on a removal. */
+    after: number | null;
+}
+/** What a diff amounts to, for a one-line summary above it. */
+export interface DiffStat {
+    added: number;
+    removed: number;
+    /** True when the two documents are identical, which is a real outcome. */
+    identical: boolean;
+}
+/**
+ * A run of lines kept for display, and how many unchanged lines were dropped
+ * before it. The gap is a count rather than a marker line, so the renderer
+ * decides what a gap looks like.
+ */
+export interface DiffSection {
+    /** The lines of this section, in order. */
+    lines: DiffLine[];
+    /** How many unchanged lines were dropped BEFORE this section. */
+    skipped: number;
+}
+/**
+ * The size past which the table is not worth building.
+ *
+ * SIZED FROM THE TABLE'S MEMORY, because that is the quantity that binds and
+ * it is paid on every input: `(N+1)` rows of `(M+1)` `Uint32` entries, every
+ * cell filled. At two thousand lines that is about 16 MB and 60 ms, which a
+ * tab holds without noticing; at ten thousand it is hundreds of megabytes and
+ * seconds on the main thread. Raising it means replacing the table with Myers
+ * or Hirschberg first.
+ */
+export declare const MAX_DIFF_LINES = 2000;
+/**
+ * Split a document into the lines a diff compares.
+ *
+ * A trailing newline is not a line. Every file that ends properly has one, so
+ * counting it would report an added last line on every document that gained
+ * one. Both line endings read as one.
+ */
+export declare function splitLines(text: string): string[];
+/**
+ * The line diff of two documents: every line of the result in order, context
+ * included, because a document diff is read as a document rather than as a
+ * patch.
+ */
+export declare function diffLines(before: string, after: string): DiffLine[];
+/**
+ * Count the additions and removals, and say when there are none: identical is
+ * its own answer, not "0 added, 0 removed".
+ */
+export declare function diffStat(diff: readonly DiffLine[]): DiffStat;
+/**
+ * Drop the runs of unchanged lines a reader does not need, keeping `context`
+ * lines either side of every change.
+ *
+ * A HOLE IS REPORTED, never silently closed: each section carries how many
+ * lines were dropped before it, so a reader can tell a document with two edits
+ * at its ends from one rewritten in the middle.
+ */
+export declare function collapseDiff(diff: readonly DiffLine[], context?: number): DiffSection[];
+/**
+ * The first `max` changed lines of a collapsed diff, and how many changed
+ * lines are left out: what a preview of a save shows, with the count that says
+ * it is one. An unchanged context line is drawn and not counted.
+ *
+ * A COUNT, never a quiet cut: a preview ending at its sixth line reads as a
+ * save that changed six lines.
+ */
+export declare function firstChangedLines(sections: readonly DiffSection[], max: number): {
+    sections: DiffSection[];
+    more: number;
+};

package/dist/DiffView/index.d.ts

@@ -0,0 +1,5 @@
+import './DiffView.css';
+export { DiffView, DiffSummary, DIFF_VIEW_LABELS, DIFF_SUMMARY_LABELS } from './DiffView.js';
+export type { DiffViewLabels, DiffViewProps, DiffSummaryLabels, DiffSummaryProps } from './DiffView.js';
+export { MAX_DIFF_LINES, collapseDiff, diffLines, diffStat, firstChangedLines, splitLines } from './diff.js';
+export type { DiffLine, DiffSection, DiffStat } from './diff.js';

package/dist/DiffView/index.js

@@ -0,0 +1,3 @@
+export { DIFF_SUMMARY_LABELS, DIFF_VIEW_LABELS, DiffSummary, DiffView, MAX_DIFF_LINES, collapseDiff, diffLines, diffStat, firstChangedLines, splitLines } from '../chunk-BVWSLXTY.js';
+import '../chunk-BZFWDIV6.js';
+import '../chunk-ODEQTPFM.js';

package/dist/DiffView-RVLIHTKG.css

@@ -0,0 +1,91 @@
+/* DiffView: a line diff, monospace and line-numbered on both sides.
+
+   A changed line is marked three ways, a tint, a drawn mark and a word read
+   in its place, because colour alone is not a signal and a printed or
+   forced-colours render loses the tint entirely. The tint is the soft step of
+   the state and the mark the matching ink step, the pairing the palette suite
+   measures. */
+.crewlet-diff-view {
+  overflow: hidden;
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-sm);
+  font-family: var(--font-family-mono);
+  font-size: var(--font-size-xs);
+  line-height: var(--font-line-height-normal);
+}
+
+.crewlet-diff-view__section + .crewlet-diff-view__section,
+.crewlet-diff-view__skip + .crewlet-diff-view__line {
+  border-top: 1px solid var(--color-border-default);
+}
+
+/* A GAP SAYS WHAT IT STANDS FOR. Silently closed, a document edited at both
+   ends looks like one rewritten in the middle. */
+.crewlet-diff-view__skip {
+  padding: var(--spacing-1) var(--spacing-3);
+  background: var(--color-surface-elevated);
+  color: var(--color-text-tertiary);
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-xs);
+}
+
+.crewlet-diff-view__line {
+  display: grid;
+  grid-template-columns: 3.5ch 3.5ch 2ch minmax(0, 1fr);
+  gap: var(--spacing-2);
+  padding: calc(var(--spacing-1) / 4) var(--spacing-3) calc(var(--spacing-1) / 4) var(--spacing-2);
+}
+
+.crewlet-diff-view__number {
+  color: var(--color-text-tertiary);
+  text-align: right;
+  user-select: none;
+  font-variant-numeric: tabular-nums;
+}
+
+.crewlet-diff-view__mark {
+  text-align: center;
+  user-select: none;
+}
+
+.crewlet-diff-view__text {
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
+.crewlet-diff-view__line--add {
+  background: var(--color-feedback-success-soft);
+}
+
+.crewlet-diff-view__line--add .crewlet-diff-view__mark {
+  color: var(--color-feedback-success-ink);
+}
+
+.crewlet-diff-view__line--remove {
+  background: var(--color-feedback-danger-soft);
+}
+
+.crewlet-diff-view__line--remove .crewlet-diff-view__mark {
+  color: var(--color-feedback-danger-ink);
+}
+
+/* DiffSummary: the size of the change, in the same inks as its lines. */
+.crewlet-diff-summary {
+  margin: 0;
+  color: var(--color-text-secondary);
+  font-size: var(--font-size-compact);
+}
+
+.crewlet-diff-summary__added,
+.crewlet-diff-summary__removed {
+  font-family: var(--font-family-mono);
+  font-variant-numeric: tabular-nums;
+}
+
+.crewlet-diff-summary__added {
+  color: var(--color-feedback-success-ink);
+}
+
+.crewlet-diff-summary__removed {
+  color: var(--color-feedback-danger-ink);
+}

package/dist/Divider/Divider.d.ts

@@ -0,0 +1,15 @@
+import type { HTMLAttributes } from 'react';
+export interface DividerProps extends HTMLAttributes<HTMLDivElement> {
+    /** Words on the rule, for a divider that names what follows: "History". */
+    label?: string | undefined;
+    /** Where the words sit: at the start, as a section's name, or centred. */
+    align?: 'start' | 'center' | undefined;
+}
+/**
+ * A rule between parts of a page, with or without a name.
+ *
+ * A SEPARATOR TO A SCREEN READER, and a named one says its name, so a reader
+ * moving through the page hears where one part ends and "History" begins
+ * rather than nothing at all.
+ */
+export declare function Divider({ label, align, className, ...rest }: DividerProps): import("react").JSX.Element;

package/dist/Divider/index.d.ts

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

package/dist/Divider/index.js

@@ -0,0 +1,2 @@
+export { Divider } from '../chunk-6KWNXIDE.js';
+import '../chunk-ODEQTPFM.js';

package/dist/Divider-3Z77ZAJH.css

@@ -0,0 +1,37 @@
+/* Divider: a rule across its space, with its name at its start or in its middle. */
+
+.crewlet-divider {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-3);
+  min-height: var(--size-row-sm);
+  min-width: 0;
+}
+.crewlet-divider::before,
+.crewlet-divider::after {
+  content: '';
+  flex: 1 1 auto;
+  border-top: 1px solid var(--color-border-strong);
+}
+/* One rule unless the words sit in the middle of it. */
+.crewlet-divider:not(.crewlet-divider--center)::before {
+  display: none;
+}
+.crewlet-divider:not(.crewlet-divider--labelled)::before {
+  display: block;
+}
+.crewlet-divider:not(.crewlet-divider--labelled)::after {
+  display: none;
+}
+
+.crewlet-divider__label {
+  flex: 0 1 auto;
+  overflow: hidden;
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-medium);
+  letter-spacing: var(--font-letter-spacing-wide);
+  color: var(--color-text-tertiary);
+  text-transform: uppercase;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

package/dist/HuePicker/HuePicker.d.ts

@@ -1,15 +1,26 @@
 import { type SegmentedSize } from '../SegmentedControl/SegmentedControl.js';
 import { type NodeHue } from '../utils/nodeHue.js';
-export interface HuePickerProps {
+interface HuePickerBase {
     /** The group's name, said on entering it: "Color". */
     label: string;
-    value: NodeHue;
-    onValueChange: (hue: NodeHue) => void;
     size?: SegmentedSize | undefined;
     /** Nothing can be chosen, and the row says so. */
     disabled?: boolean | undefined;
     className?: string | undefined;
 }
+/**
+ * The six hues, or the six and NO HUE first, named by `none` ("Plain"): a
+ * surface that may carry a colour (a group's band, a note) but need not.
+ */
+export type HuePickerProps = HuePickerBase & ({
+    none?: undefined;
+    value: NodeHue;
+    onValueChange: (hue: NodeHue) => void;
+} | {
+    none: string;
+    value: NodeHue | 'none';
+    onValueChange: (hue: NodeHue | 'none') => void;
+});
 /**
  * The choice of an entity's hue: the six node hues as a row of chips, each a
  * swatch and the hue's name.
@@ -23,4 +34,5 @@ export interface HuePickerProps {
  * row is still read and the chosen hue still shown, and nothing in it takes
  * focus or a press.
  */
-export declare function HuePicker({ label, value, onValueChange, size, disabled, className }: HuePickerProps): import("react").JSX.Element;
+export declare function HuePicker(props: HuePickerProps): import("react").JSX.Element;
+export {};

package/dist/HuePicker/index.js

@@ -1,5 +1,5 @@
-import '../chunk-EXHQ2QVW.js';
-export { HuePicker } from '../chunk-PA4CYTBY.js';
+import '../chunk-FFMCMSJB.js';
+export { HuePicker } from '../chunk-XU4ZUGLE.js';
 import '../chunk-26PEPONN.js';
 import '../chunk-4LDTQWS7.js';
 import '../chunk-AYKXMIOR.js';

package/dist/{HuePicker-5QIUR6L7.css → HuePicker-PAIGH6LR.css}

@@ -16,3 +16,9 @@
 .crewlet-hue-picker__swatch--amber { background: var(--color-node-amber); }
 .crewlet-hue-picker__swatch--rose { background: var(--color-node-rose); }
 .crewlet-hue-picker__swatch--blue { background: var(--color-node-blue); }
+
+/* No hue: a ring in the hairline, so the row still reads as swatches. */
+.crewlet-hue-picker__swatch--none {
+  box-sizing: border-box;
+  border: 1px solid var(--color-border-strong);
+}

package/dist/IconTile/IconTile.d.ts

@@ -0,0 +1,23 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+import type { NodeHue } from '../utils/nodeHue.js';
+export interface IconTileProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'children'> {
+    /** The glyph, at the size the tile is drawn at: `sm` in a `sm` or `md` tile, `md` in a `lg` one. */
+    children: ReactNode;
+    /** The hue it is tinted in. Left out, the brand accent's soft fill and ink. */
+    hue?: NodeHue | undefined;
+    /** One of the row heights: `sm` 28px, `md` 36px, `lg` 48px. */
+    size?: 'sm' | 'md' | 'lg' | undefined;
+}
+/**
+ * A glyph on a tinted square: what a choice in a library or a catalog is
+ * told apart by before its name is read. The widget tray draws one per widget
+ * it offers.
+ *
+ * A HUE PER KIND, NOT PER STATE. The tint is decorative and picked for the
+ * thing it marks (`NodeHue`), so a tile in rose says nothing is wrong; a state
+ * is a `StatusDot` or a `Tag`.
+ *
+ * DECORATION. The tile is hidden from assistive technology: the name beside it
+ * is what is read.
+ */
+export declare function IconTile({ children, hue, size, className, ...rest }: IconTileProps): import("react").JSX.Element;

package/dist/IconTile/index.d.ts

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

package/dist/IconTile/index.js

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

package/dist/IconTile-4GNWTLAW.css

@@ -0,0 +1,30 @@
+/*
+ * IconTile: a glyph on a tinted square. Each hue pairs its fill and its ink
+ * from one measured family (`--color-node-*`); left out, the brand accent's
+ * soft fill and ink. No edge: the tile sits inside a card that has one.
+ */
+.crewlet-icon-tile {
+  --crewlet-icon-tile-fill: var(--color-brand-accent-soft);
+  --crewlet-icon-tile-ink: var(--color-brand-accent-ink);
+  --crewlet-icon-tile-size: var(--size-row-md);
+
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  width: var(--crewlet-icon-tile-size);
+  height: var(--crewlet-icon-tile-size);
+  border-radius: var(--radius-md);
+  background: var(--crewlet-icon-tile-fill);
+  color: var(--crewlet-icon-tile-ink);
+}
+
+.crewlet-icon-tile--sm { --crewlet-icon-tile-size: var(--size-row-sm); }
+.crewlet-icon-tile--lg { --crewlet-icon-tile-size: var(--size-row-lg); border-radius: var(--radius-lg); }
+
+.crewlet-icon-tile--purple { --crewlet-icon-tile-fill: var(--color-node-purple-fill); --crewlet-icon-tile-ink: var(--color-node-purple-ink); }
+.crewlet-icon-tile--cyan { --crewlet-icon-tile-fill: var(--color-node-cyan-fill); --crewlet-icon-tile-ink: var(--color-node-cyan-ink); }
+.crewlet-icon-tile--green { --crewlet-icon-tile-fill: var(--color-node-green-fill); --crewlet-icon-tile-ink: var(--color-node-green-ink); }
+.crewlet-icon-tile--amber { --crewlet-icon-tile-fill: var(--color-node-amber-fill); --crewlet-icon-tile-ink: var(--color-node-amber-ink); }
+.crewlet-icon-tile--rose { --crewlet-icon-tile-fill: var(--color-node-rose-fill); --crewlet-icon-tile-ink: var(--color-node-rose-ink); }
+.crewlet-icon-tile--blue { --crewlet-icon-tile-fill: var(--color-node-blue-fill); --crewlet-icon-tile-ink: var(--color-node-blue-ink); }

package/dist/Input/index.js

@@ -1,5 +1,5 @@
-export { FormField, FormRow, FormSection, Input, InputAffix, Label, ReadOnlyField, Textarea } from '../chunk-4GB57WIT.js';
-import '../chunk-4FQT6ZAY.js';
+export { FormField, FormRow, FormSection, Input, InputAffix, Label, ReadOnlyField, Textarea } from '../chunk-Q55TXPA3.js';
 import '../chunk-PQADV6P6.js';
+import '../chunk-4FQT6ZAY.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/LinkInterstitial/index.js

@@ -1,11 +1,11 @@
-export { LinkInterstitial, openExternal } from '../chunk-A7EBCHEG.js';
-import '../chunk-2TZATTIU.js';
+export { LinkInterstitial, openExternal } from '../chunk-A4VMJMXJ.js';
 import '../chunk-5CLW2CXT.js';
+import '../chunk-7IJARUIF.js';
 import '../chunk-SVSCLHHI.js';
 import '../chunk-OG6CL3EB.js';
-import '../chunk-4FQT6ZAY.js';
+import '../chunk-PQADV6P6.js';
 import '../chunk-HMPFGIWM.js';
 import '../chunk-R25RGPUB.js';
-import '../chunk-PQADV6P6.js';
+import '../chunk-4FQT6ZAY.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/ListInput/index.js

@@ -1,10 +1,10 @@
-export { ListInput } from '../chunk-T3ZWBZ65.js';
+export { ListInput } from '../chunk-YSJYWQSP.js';
 import '../chunk-SMBKXWML.js';
-import '../chunk-4GB57WIT.js';
-import '../chunk-RSAQOKH3.js';
-import '../chunk-4FQT6ZAY.js';
+import '../chunk-Q55TXPA3.js';
+import '../chunk-PQADV6P6.js';
 import '../chunk-HMPFGIWM.js';
 import '../chunk-R25RGPUB.js';
-import '../chunk-PQADV6P6.js';
+import '../chunk-RSAQOKH3.js';
+import '../chunk-4FQT6ZAY.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/MarkdownEditor/index.js

@@ -4,9 +4,9 @@ import '../chunk-PGRPNDWM.js';
 import '../chunk-26PEPONN.js';
 import '../chunk-4LDTQWS7.js';
 import '../chunk-CBOICT64.js';
-import '../chunk-4FQT6ZAY.js';
+import '../chunk-BHHIIK3M.js';
 import '../chunk-HMPFGIWM.js';
 import '../chunk-R25RGPUB.js';
-import '../chunk-BHHIIK3M.js';
+import '../chunk-4FQT6ZAY.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/Menu/index.js

@@ -1,7 +1,7 @@
-export { Menu } from '../chunk-NS7BVLL3.js';
+export { Menu } from '../chunk-JULMZNGT.js';
 import '../chunk-OG6CL3EB.js';
-import '../chunk-4FQT6ZAY.js';
 import '../chunk-HMPFGIWM.js';
 import '../chunk-R25RGPUB.js';
+import '../chunk-4FQT6ZAY.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/Modal/Modal.d.ts

@@ -85,6 +85,18 @@ export interface ModalProps extends FrameAttributes {
      * one glance keeps its actions in the foot, where the eye ends up.
      */
     headerActions?: ReactNode;
+    /**
+     * A step back, drawn first in the head, before the title.
+     *
+     * For a surface reached FROM another one that stays the reader's place: a
+     * widget's options opened from a library of widgets, a record opened from a
+     * list in the same sheet. The way back belongs where the reader looks to
+     * learn where they are, beside the title, and not in a foot they have to
+     * scroll to. Closing is still the close control; this only goes back.
+     */
+    onBack?: (() => void) | undefined;
+    /** The back control's name, saying where it goes: "Back to widgets". */
+    backLabel?: string | undefined;
     children?: ReactNode;
     size?: ModalSize | undefined;
     variant?: ModalVariant | undefined;
@@ -99,6 +111,14 @@ export interface ModalProps extends FrameAttributes {
     dismissable?: boolean | undefined;
     /** A veil-only switch: the surface still closes on Escape and on its close control. */
     closeOnBackdrop?: boolean | undefined;
+    /**
+     * What the page behind looks like. `veil` dims and softens it, which is what
+     * a surface asking for the reader's whole attention wants. `clear` leaves it
+     * as it is, for a sheet whose changes ARE the page behind it (a page's
+     * customize sheet): a preview under a veil is a preview nobody can read. The
+     * surface is still modal; only the paint changes.
+     */
+    backdrop?: 'veil' | 'clear' | undefined;
     showCloseButton?: boolean | undefined;
     /** Stacks the body's children in a column with a gap, which most forms want. */
     stackBody?: boolean | undefined;

package/dist/Modal/index.js

@@ -1,8 +1,8 @@
-export { ConfirmModal, Modal } from '../chunk-2TZATTIU.js';
+export { ConfirmModal, Modal } from '../chunk-7IJARUIF.js';
 import '../chunk-OG6CL3EB.js';
-import '../chunk-4FQT6ZAY.js';
+import '../chunk-PQADV6P6.js';
 import '../chunk-HMPFGIWM.js';
 import '../chunk-R25RGPUB.js';
-import '../chunk-PQADV6P6.js';
+import '../chunk-4FQT6ZAY.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{Modal-RQAYGG4L.css → Modal-XOSV6FAH.css}

@@ -57,6 +57,12 @@
 }
 
 /* Inside a LayerHost the overlay covers the host, not the window. */
+/* The page behind stays as it is: see `backdrop` in Modal.tsx. */
+.crewlet-modal-overlay--clear {
+  background: transparent;
+  backdrop-filter: none;
+}
+
 .crewlet-modal-overlay--in-host {
   position: absolute;
 }
@@ -376,6 +382,14 @@
   margin: calc(var(--spacing-1) * -1);
 }
 
+/* The step back leads the head, its glyph on the title's inline start, as
+   the close control's sits on the head's end. */
+.crewlet-modal__back {
+  flex-shrink: 0;
+  margin-inline-start: calc(var(--spacing-2) * -1);
+  margin-block: calc(var(--spacing-1) * -1);
+}
+
 .crewlet-modal__body {
   flex: 1 1 auto;
   min-height: 0;

package/dist/Note/Note.d.ts

@@ -0,0 +1,23 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+import type { SurfaceTone } from '../ArrangeGroup/index.js';
+export interface NoteProps extends HTMLAttributes<HTMLDivElement> {
+    /** The paper it is written on: one of the six hues, or the page's own. */
+    tone?: SurfaceTone | undefined;
+    align?: 'start' | 'center' | undefined;
+    /** `lg` for a line meant to be read across the room: a goal, a rule. */
+    size?: 'md' | 'lg' | undefined;
+    children: ReactNode;
+}
+/**
+ * Words a reader leaves on their own page: a team's goal this week, how to
+ * read the cards below it, a link to the runbook. A dashboard's note.
+ *
+ * THE TONE IS THE PAPER, and the ink keeps its contrast on every one: each
+ * hue's fill with that hue's ink, which the palette gate measures as a pair.
+ * A note is never coloured to mean a state; the hues here are the reader's
+ * labels, the same six a group's band takes.
+ *
+ * IT SCROLLS rather than clipping when the reader makes it shorter than its
+ * words.
+ */
+export declare const Note: import("react").ForwardRefExoticComponent<NoteProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/Note/index.d.ts

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

package/dist/Note/index.js

@@ -0,0 +1,2 @@
+export { Note } from '../chunk-63WJLRB2.js';
+import '../chunk-ODEQTPFM.js';

package/dist/Note-RT4L6VUT.css

@@ -0,0 +1,58 @@
+/*
+ * Note: words on a coloured paper. Each hue pairs its fill with its own ink.
+ */
+
+.crewlet-note {
+  --crewlet-note-paper: var(--color-surface-subtle);
+  --crewlet-note-edge: var(--color-border-default);
+  --crewlet-note-ink: var(--color-text-primary);
+
+  box-sizing: border-box;
+  min-width: 0;
+  min-height: 0;
+  padding: var(--spacing-4);
+  overflow: auto;
+  border: 1px solid var(--crewlet-note-edge);
+  border-radius: var(--radius-lg);
+  background: var(--crewlet-note-paper);
+  color: var(--crewlet-note-ink);
+  font-size: var(--font-size-sm);
+  line-height: var(--font-line-height-normal);
+  overflow-wrap: anywhere;
+}
+
+.crewlet-note--purple { --crewlet-note-paper: var(--color-node-purple-fill); --crewlet-note-edge: var(--color-node-purple-line); --crewlet-note-ink: var(--color-node-purple-ink); }
+.crewlet-note--cyan { --crewlet-note-paper: var(--color-node-cyan-fill); --crewlet-note-edge: var(--color-node-cyan-line); --crewlet-note-ink: var(--color-node-cyan-ink); }
+.crewlet-note--green { --crewlet-note-paper: var(--color-node-green-fill); --crewlet-note-edge: var(--color-node-green-line); --crewlet-note-ink: var(--color-node-green-ink); }
+.crewlet-note--amber { --crewlet-note-paper: var(--color-node-amber-fill); --crewlet-note-edge: var(--color-node-amber-line); --crewlet-note-ink: var(--color-node-amber-ink); }
+.crewlet-note--rose { --crewlet-note-paper: var(--color-node-rose-fill); --crewlet-note-edge: var(--color-node-rose-line); --crewlet-note-ink: var(--color-node-rose-ink); }
+.crewlet-note--blue { --crewlet-note-paper: var(--color-node-blue-fill); --crewlet-note-edge: var(--color-node-blue-line); --crewlet-note-ink: var(--color-node-blue-ink); }
+
+.crewlet-note--center {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  text-align: center;
+}
+
+.crewlet-note--lg {
+  font-size: var(--font-size-lg);
+  font-weight: var(--font-weight-medium);
+  letter-spacing: var(--font-letter-spacing-tight);
+}
+
+/* Prose inside takes the note's ink, links included. */
+.crewlet-note :is(p, li, h2, h3, h4, strong, em) {
+  color: inherit;
+}
+.crewlet-note a {
+  color: inherit;
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+.crewlet-note > :first-child {
+  margin-top: 0;
+}
+.crewlet-note > :last-child {
+  margin-bottom: 0;
+}

package/dist/OrgTable/index.js

@@ -1,13 +1,13 @@
-export { OrgTable, OrgTableActions, OrgTableAdd, OrgTableName } from '../chunk-L4ZLXYPO.js';
-import '../chunk-B2Z2CDM5.js';
+export { OrgTable, OrgTableActions, OrgTableAdd, OrgTableName } from '../chunk-6A7P6II6.js';
+import '../chunk-T5TFZ2JB.js';
 import '../chunk-MY374UUD.js';
 import '../chunk-AKEZ3G5V.js';
 import '../chunk-VYOKRN2I.js';
+import '../chunk-UAN5NE7M.js';
+import '../chunk-5OM447RW.js';
 import '../chunk-TROLVEZY.js';
-import '../chunk-4FQT6ZAY.js';
 import '../chunk-HMPFGIWM.js';
 import '../chunk-R25RGPUB.js';
-import '../chunk-UAN5NE7M.js';
-import '../chunk-5OM447RW.js';
+import '../chunk-4FQT6ZAY.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';