@crewlethq/ui 0.34.1 → 0.35.0

package/dist/SheetColumnEditor/SheetColumnEditor.d.ts

@@ -0,0 +1,94 @@
+/**
+ * A sheet column's settings, as a compact panel: its name, its type, the
+ * choices a select, multi-select or status column offers (each with its
+ * colour, or its category for a status), whether a value is required, and
+ * moving or deleting the column. What a SheetGrid header's popover holds
+ * (`renderColumnEditor`), and what any schema surface that edits one column
+ * at a time draws.
+ *
+ * LIVE, NOT A FORM TO SUBMIT. Every change is handed to the host at once as
+ * the next `SheetColumn`, so the grid beside it redraws as the reader types
+ * and picks; Done only closes. A name cleared to nothing is held here and
+ * not handed on, since a column with no name is one nobody can find, and the
+ * name it had comes back if the reader leaves it empty.
+ *
+ * A CHOICE'S ID IS MADE ONCE, from its label when it is added, and never
+ * changes after, so renaming a choice never rewrites a value that chose it.
+ * A host whose store has its own id rule passes `optionId`.
+ */
+import { type SheetColumn, type SheetColumnType, type SheetStatusCategory } from '../SheetModel/index.js';
+/** The glyph each column type is drawn with, in a type menu and beside a column's name. */
+export declare function SheetColumnTypeGlyph({ type, size }: {
+    type: SheetColumnType;
+    size?: 'xs' | 'sm' | 'md' | undefined;
+}): import("react").JSX.Element;
+export interface SheetColumnEditorLabels {
+    name: string;
+    /** Said when the name field is left empty. */
+    nameMissing: string;
+    type: string;
+    /** Each type's name. */
+    types: Record<SheetColumnType, string>;
+    /** What each type holds, under its name in the type list. */
+    typeDetails: Record<SheetColumnType, string>;
+    /** The suggestion beside the type: "Looks like dates". */
+    suggestion: (type: string) => string;
+    /** The button that takes the suggestion: "Use Date". */
+    useType: (type: string) => string;
+    choices: string;
+    addChoice: string;
+    choiceName: (index: number) => string;
+    choiceColor: (choice: string) => string;
+    noColor: string;
+    choiceCategory: (choice: string) => string;
+    categories: Record<SheetStatusCategory, string>;
+    removeChoice: (choice: string) => string;
+    noChoices: string;
+    duplicateChoice: (choice: string) => string;
+    /** The choices a new status column starts with, one per category it names. */
+    statusStarters: readonly {
+        label: string;
+        category: SheetStatusCategory;
+    }[];
+    required: string;
+    requiredDetail: string;
+    stars: string;
+    moveBefore: string;
+    moveAfter: string;
+    deleteColumn: string;
+    done: string;
+}
+export declare const SHEET_COLUMN_EDITOR_LABELS: SheetColumnEditorLabels;
+export interface SheetColumnEditorProps {
+    column: SheetColumn;
+    /** Every change, at once, as the next column. */
+    onChange: (next: SheetColumn) => void;
+    /** Done: the host closes the panel. Enter in the name field does the same. */
+    onDone?: (() => void) | undefined;
+    /** Shows Delete column. */
+    onDelete?: (() => void) | undefined;
+    /** Why Delete column cannot be pressed, said on it: the one column a sheet needs, say. */
+    deleteDisabledReason?: string | undefined;
+    /** Shows Move left and Move right. */
+    onMove?: ((step: -1 | 1) => void) | undefined;
+    canMoveBefore?: boolean | undefined;
+    canMoveAfter?: boolean | undefined;
+    /** The types offered, in their order. Every type by default. */
+    types?: readonly SheetColumnType[] | undefined;
+    /** Why the type cannot change, said under it: the column every row is named by, say. */
+    typeLockedReason?: string | undefined;
+    /** A type the host proposes from the column's name or its values, offered as one press. */
+    suggestedType?: SheetColumnType | undefined;
+    /** Why the host refuses the name (another column has it, say). */
+    nameError?: string | undefined;
+    /** Makes a new choice's id from its label, unique among `taken`. */
+    optionId?: ((label: string, taken: readonly string[]) => string) | undefined;
+    /**
+     * Starts on the name, selected, so typing replaces it: a panel opened on a
+     * header, or on a column just added with a placeholder name.
+     */
+    selectName?: boolean | undefined;
+    labels?: Partial<SheetColumnEditorLabels> | undefined;
+    className?: string | undefined;
+}
+export declare function SheetColumnEditor({ column, onChange, onDone, onDelete, deleteDisabledReason, onMove, canMoveBefore, canMoveAfter, types, typeLockedReason, suggestedType, nameError, optionId, selectName, labels: overrides, className, }: SheetColumnEditorProps): import("react").JSX.Element;

package/dist/SheetColumnEditor/index.d.ts

@@ -0,0 +1,3 @@
+import './SheetColumnEditor.css';
+export { SHEET_COLUMN_EDITOR_LABELS, SheetColumnEditor, SheetColumnTypeGlyph } from './SheetColumnEditor.js';
+export type { SheetColumnEditorLabels, SheetColumnEditorProps } from './SheetColumnEditor.js';

package/dist/SheetColumnEditor/index.js

@@ -0,0 +1,23 @@
+export { SHEET_COLUMN_EDITOR_LABELS, SheetColumnEditor, SheetColumnTypeGlyph } from '../chunk-MAD6WPER.js';
+import '../chunk-BQ7AKL2N.js';
+import '../chunk-FFMCMSJB.js';
+import '../chunk-F73MC7EZ.js';
+import '../chunk-OOMXLJ3S.js';
+import '../chunk-Z7JYG5TF.js';
+import '../chunk-SUXP4OBT.js';
+import '../chunk-AYKXMIOR.js';
+import '../chunk-CPEPST4S.js';
+import '../chunk-6QFAK2WV.js';
+import '../chunk-SMBKXWML.js';
+import '../chunk-CCAXYHQS.js';
+import '../chunk-VL6CUNSX.js';
+import '../chunk-RKKO7QHH.js';
+import '../chunk-BHHIIK3M.js';
+import '../chunk-PQADV6P6.js';
+import '../chunk-BUVCV3WI.js';
+import '../chunk-OMV5W53A.js';
+import '../chunk-R25RGPUB.js';
+import '../chunk-OG6CL3EB.js';
+import '../chunk-4FQT6ZAY.js';
+import '../chunk-BZFWDIV6.js';
+import '../chunk-ODEQTPFM.js';

package/dist/SheetColumnEditor-BO2HKFRB.css

@@ -0,0 +1,73 @@
+/*
+ * A sheet column's settings (SheetColumnEditor.tsx): a column of fields at
+ * the compact step, the choices as rows of a swatch, a name and a remove
+ * control, and a foot with the column's own actions at the start and Done at
+ * the end. It sits in a popover, so it sets no surface of its own.
+ */
+
+.crewlet-sheet-column-editor {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-3);
+  width: 100%;
+  min-width: 0;
+}
+
+/* The suggestion: a quiet line naming the type, and the press that takes it. */
+.crewlet-sheet-column-editor__suggestion {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-2);
+  margin-top: calc(var(--spacing-2) * -1);
+  color: var(--color-text-secondary);
+  font-size: var(--font-size-xs);
+}
+
+.crewlet-sheet-column-editor__suggestion-text {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-1);
+  min-width: 0;
+}
+
+.crewlet-sheet-column-editor__choices {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-1);
+  margin: 0 0 var(--spacing-1);
+  padding: 0;
+  list-style: none;
+}
+
+.crewlet-sheet-column-editor__choices:empty {
+  display: none;
+}
+
+.crewlet-sheet-column-editor__choice {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-1);
+  min-width: 0;
+}
+
+.crewlet-sheet-column-editor__choice > .crewlet-input {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+/* The foot: a hairline above it, the column's own actions, then Done. */
+.crewlet-sheet-column-editor__foot {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-2);
+  padding-top: var(--spacing-3);
+  border-top: 1px solid var(--color-border-default);
+}
+
+.crewlet-sheet-column-editor__foot-start {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-1);
+}

package/dist/SheetGrid/SheetGrid.d.ts

@@ -28,6 +28,7 @@
  * row's `aria-rowindex` tell assistive technology how many there are and
  * where it is.
  */
+import { type ReactNode } from 'react';
 import { type PresenceLabels } from '../PresenceModel/index.js';
 import { type SheetCellPresence, type SheetColumn, type SheetEdit, type SheetLabels, type SheetPerson, type SheetRow, type SheetSort, type SheetSyncState } from '../SheetModel/index.js';
 /** `edit` takes edits; `read` draws the same grid with every cell read only. */
@@ -95,10 +96,27 @@ export interface SheetGridProps {
      * (`sync.refused`), so the reader clears them once they have read why.
      */
     onDismissRefused?: (() => void) | undefined;
+    /**
+     * Makes each column header open the host's column settings in a popover
+     * anchored to it: a click, Enter or Space on a header opens it, and Escape
+     * closes it and returns to the header. The grid owns the popover and its
+     * placement; the host draws what is inside and changes its own `columns`.
+     * A header that opens settings does not sort on a click: a host that offers
+     * both puts its sort in the settings, as a spreadsheet's column menu does.
+     */
+    renderColumnEditor?: ((column: SheetColumn, close: () => void) => ReactNode) | undefined;
+    /**
+     * The field whose settings are open, for a host that opens them itself (a
+     * column it has just added, say). Leave it out and the grid keeps its own.
+     */
+    settingsColumn?: string | null | undefined;
+    onSettingsColumnChange?: ((field: string | null) => void) | undefined;
+    /** Shows the Add column control after the last header. The host appends the column. */
+    onAddColumn?: (() => void) | undefined;
     /** A BCP 47 tag for numbers and dates; the reader's own locale when absent. */
     locale?: string | undefined;
     className?: string | undefined;
     labels?: Partial<SheetLabels> | undefined;
     presenceLabels?: Partial<PresenceLabels> | undefined;
 }
-export declare function SheetGrid({ label, columns: declared, rows: given, people, mode, onEdit, onAddRow, onShowHistory, onActiveCellChange, onEditingChange, onUndo, onRedo, onOpenLink, presence, sort, onSortChange, sync, onRetry, height, fit, onDeleteRow, onDismissRefused, locale, className, labels: labelOverrides, presenceLabels: presenceOverrides, }: SheetGridProps): import("react").JSX.Element;
+export declare function SheetGrid({ label, columns: declared, rows: given, people, mode, onEdit, onAddRow, onShowHistory, onActiveCellChange, onEditingChange, onUndo, onRedo, onOpenLink, presence, sort, onSortChange, sync, onRetry, height, fit, onDeleteRow, onDismissRefused, renderColumnEditor, settingsColumn, onSettingsColumnChange, onAddColumn, locale, className, labels: labelOverrides, presenceLabels: presenceOverrides, }: SheetGridProps): import("react").JSX.Element;

package/dist/SheetGrid/index.js

@@ -1,18 +1,19 @@
-export { CellDisplay, CellEditor, CheckboxCell, DateCell, LongTextCell, MultiSelectCell, NumberCell, PersonCell, RatingCell, SelectCell, SheetCell, SheetGrid, StatusCell, TextCell, UrlCell } from '../chunk-EWAFN2IU.js';
+export { CellDisplay, CellEditor, CheckboxCell, DateCell, LongTextCell, MultiSelectCell, NumberCell, PersonCell, RatingCell, SelectCell, SheetCell, SheetGrid, StatusCell, TextCell, UrlCell } from '../chunk-5VCG26CV.js';
 import '../chunk-O2EGEONV.js';
 import '../chunk-CENOOTAV.js';
 import '../chunk-GFV4LJHH.js';
 import '../chunk-WIATRXEJ.js';
 import '../chunk-3BYIWOTV.js';
 import '../chunk-I6POAB4V.js';
-import '../chunk-SGHIAGPR.js';
-import '../chunk-VI5FWDZW.js';
+import '../chunk-HAKTRTRP.js';
+import '../chunk-OOMXLJ3S.js';
 import '../chunk-Z7JYG5TF.js';
+import '../chunk-K3IJQNB7.js';
 import '../chunk-AYKXMIOR.js';
 import '../chunk-6ZJ3N7QI.js';
 import '../chunk-5AQBPHZD.js';
 import '../chunk-PZKHBB7D.js';
-import '../chunk-3EB2AV3H.js';
+import '../chunk-BUVCV3WI.js';
 import '../chunk-OMV5W53A.js';
 import '../chunk-R25RGPUB.js';
 import '../chunk-OG6CL3EB.js';

package/dist/{SheetGrid-GDPCCZ4V.css → SheetGrid-YRDXTIIZ.css}

@@ -426,6 +426,54 @@
   font-size: var(--font-size-xs);
 }
 
+/* A HEADER THAT OPENS ITS COLUMN'S SETTINGS reads as pressable: the pointer,
+   and the hover tint the open header keeps while its popover is up. */
+.crewlet-sheet-grid__header--settings {
+  cursor: pointer;
+}
+
+.crewlet-sheet-grid__header--settings:hover,
+.crewlet-sheet-grid__header--open {
+  background: var(--color-surface-hover);
+  color: var(--color-text-primary);
+}
+
+/* A COLUMN'S SETTINGS: the popover holds a short form, so it is padded as a
+   panel and given the room a list of choices needs before it scrolls. */
+.crewlet-popover.crewlet-sheet-grid__column-settings {
+  width: 300px;
+  max-height: min(560px, 80vh);
+  padding: var(--spacing-3);
+}
+
+/* ADD COLUMN stands beside the header row, outside the grid's roles: the
+   scroller lays the grid and the control side by side, the grid's last track
+   still takes the slack up to the control, and the control sticks to the top
+   with the header while the rows scroll under it. */
+.crewlet-sheet-grid__scroller--add-column {
+  --crewlet-sheet-add-column-width: var(--size-target-min);
+  display: flex;
+  align-items: flex-start;
+}
+
+.crewlet-sheet-grid__scroller--add-column > .crewlet-sheet-grid__grid {
+  flex: 0 0 auto;
+  min-width: calc(100% - var(--crewlet-sheet-add-column-width));
+}
+
+.crewlet-sheet-grid__add-column {
+  position: sticky;
+  top: 0;
+  z-index: var(--z-index-sticky);
+  display: flex;
+  flex: 0 0 var(--crewlet-sheet-add-column-width);
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  border-bottom: 1px solid var(--color-border-default);
+  background: var(--color-surface-subtle);
+}
+
 .crewlet-sheet-grid__sync {
   display: inline-flex;
   align-items: center;

package/dist/SheetModel/index.js

@@ -1,3 +1,3 @@
-export { LONGTEXT_MAX_DEFAULT, RATING_MAX_CEILING, RATING_MAX_DEFAULT, SHEET_COLUMN_BOUNDS, SHEET_COLUMN_TYPES, SHEET_COLUMN_WIDTHS, SHEET_FIT_SAMPLES, SHEET_LABELS, SHEET_ROW_HEIGHT, SHEET_ROW_NUMBER_WIDTH, SheetPendingEdits, TEXT_MAX_DEFAULT, URL_MAX, cellDescription, cellKey, cellSpeech, changeText, changeTime, checkValue, columnOffsets, columnWidth, compareValues, displayText, drawnColumns, editText, editorSide, findOption, findPerson, fitSamples, fittedWidth, flagText, hasPrevious, inRange, isEmptyValue, isMod, isMultiCell, isSheetColumnType, isTypingKey, liveOptions, moveFrom, nextSort, normalizeValue, optionHue, parseOptionList, parseTSV, parseText, planClear, planPaste, presenceByCell, presenceByColumn, presenceByRow, rangeOf, ratingMax, refusalText, rowName, sameValue, scrollToRow, sheetLabels, sortRows, spokenText, statusTone, textMax, toTSV, visibleRows } from '../chunk-VI5FWDZW.js';
+export { LONGTEXT_MAX_DEFAULT, RATING_MAX_CEILING, RATING_MAX_DEFAULT, SHEET_COLUMN_BOUNDS, SHEET_COLUMN_TYPES, SHEET_COLUMN_WIDTHS, SHEET_FIT_SAMPLES, SHEET_LABELS, SHEET_ROW_HEIGHT, SHEET_ROW_NUMBER_WIDTH, SheetPendingEdits, TEXT_MAX_DEFAULT, URL_MAX, cellDescription, cellKey, cellSpeech, changeText, changeTime, checkValue, columnOffsets, columnWidth, compareValues, displayText, drawnColumns, editText, editorSide, findOption, findPerson, fitSamples, fittedWidth, flagText, hasPrevious, inRange, isEmptyValue, isMod, isMultiCell, isSheetColumnType, isTypingKey, liveOptions, moveFrom, nextSort, normalizeValue, optionHue, parseOptionList, parseTSV, parseText, planClear, planPaste, presenceByCell, presenceByColumn, presenceByRow, rangeOf, ratingMax, refusalText, rowName, sameValue, scrollToRow, sheetLabels, sortRows, spokenText, statusTone, textMax, toTSV, visibleRows } from '../chunk-OOMXLJ3S.js';
 import '../chunk-Z7JYG5TF.js';
 import '../chunk-AYKXMIOR.js';

package/dist/SheetModel/labels.d.ts

@@ -74,6 +74,12 @@ export interface SheetLabels {
     keyboardHelp: string;
     /** A sort, for the header's control. */
     sortBy: (column: string) => string;
+    /** A column's settings popover, its name and its header's tip. */
+    columnSettings: (column: string) => string;
+    /** Appended to the keyboard help when headers open their column's settings. */
+    columnSettingsHelp: string;
+    /** The control after the last header that adds a column. */
+    addColumn: string;
 }
 export declare const SHEET_LABELS: SheetLabels;
 /** Labels with a caller's overrides applied, the one way both renderers merge them. */

package/dist/SlideFilmstrip/SlideFilmstrip.d.ts

@@ -1,4 +1,5 @@
 import { type ReactNode } from 'react';
+import { type MenuEntry } from '../Menu/index.js';
 /** One slide as the filmstrip lists it. */
 export interface FilmstripSlide {
     id: string;
@@ -14,6 +15,10 @@ export interface SlideFilmstripLabels {
     slide: (position: number, title: string) => string;
     hidden: string;
     untitled: string;
+    /** A slide's actions menu: "Actions for slide 4, The plan". */
+    actions: (position: number, title: string) => string;
+    duplicate: string;
+    delete: string;
 }
 /**
  * Which way the strip runs: a column beside the stage, or a row under it
@@ -33,6 +38,23 @@ export interface SlideFilmstripProps {
      */
     onReorder?: ((ids: string[]) => void) | undefined;
     orientation?: SlideFilmstripOrientation | undefined;
+    /**
+     * Copy a slide in place, after itself: Command+D (Control+D elsewhere) on
+     * its thumbnail, or its actions menu. Left out, nothing duplicates.
+     */
+    onDuplicate?: ((id: string) => void) | undefined;
+    /**
+     * Remove a slide: Delete or Backspace on its thumbnail, or its actions
+     * menu. Left out, nothing deletes. The caller moves the selection.
+     */
+    onDelete?: ((id: string) => void) | undefined;
+    /** Further entries of a slide's actions menu, after Duplicate and Delete. */
+    actions?: ((id: string) => readonly MenuEntry[]) | undefined;
+    /**
+     * What follows the last slide inside the strip, such as a New slide
+     * control, so it scrolls with the slides it adds to.
+     */
+    footer?: ReactNode;
     className?: string | undefined;
     labels?: Partial<SlideFilmstripLabels> | undefined;
 }
@@ -57,5 +79,12 @@ export interface SlideFilmstripProps {
  *
  * THUMBNAILS ARE THE SLIDES THEMSELVES, drawn by the caller at the slide's own
  * size and scaled by `SlideStage`, so what the strip shows is what presents.
+ *
+ * A SLIDE'S ACTIONS ARE KEYS ON ITS THUMBNAIL AND A MENU BESIDE IT, as a
+ * presentation editor's filmstrip has them: Command+D (Control+D) duplicates,
+ * Delete or Backspace deletes, and the menu names both with their keys, so the
+ * pointer and the keyboard reach the same acts and the menu teaches the keys.
+ * The menu's trigger is out of the tab order, since the thumbnail's keys reach
+ * every act it holds and the Menu key (or Shift+F10) opens it from there.
  */
-export declare function SlideFilmstrip({ slides, selected, onSelect, renderSlide, onReorder, orientation, className, labels, }: SlideFilmstripProps): import("react").JSX.Element;
+export declare function SlideFilmstrip({ slides, selected, onSelect, renderSlide, onReorder, orientation, onDuplicate, onDelete, actions, footer, className, labels, }: SlideFilmstripProps): import("react").JSX.Element;

package/dist/SlideFilmstrip/index.js

@@ -1,8 +1,12 @@
-export { SlideFilmstrip } from '../chunk-XV32RKQZ.js';
+export { SlideFilmstrip } from '../chunk-QIXMNOBD.js';
 import '../chunk-LV4APO72.js';
 import '../chunk-XJ2QEBMM.js';
+import '../chunk-SMBKXWML.js';
+import '../chunk-BUVCV3WI.js';
 import '../chunk-OMV5W53A.js';
 import '../chunk-R25RGPUB.js';
+import '../chunk-OG6CL3EB.js';
 import '../chunk-RSAQOKH3.js';
+import '../chunk-4FQT6ZAY.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{SlideFilmstrip-5U6Z55GS.css → SlideFilmstrip-4ITZLMO4.css}

@@ -167,3 +167,52 @@
 .crewlet-slide-filmstrip--horizontal .crewlet-slide-filmstrip__item[data-reorder-target='after'] .crewlet-slide-filmstrip__thumb {
   box-shadow: var(--spacing-1) 0 0 var(--color-brand-accent);
 }
+
+/* A SLIDE'S CONTROLS, beside its thumbnail: the handle over the actions menu,
+   one column, so a thumbnail keeps the strip's full width beside them. The
+   menu's trigger shows on the selected slide and under the pointer or focus,
+   so a strip of twelve slides is not twelve rows of ellipses. */
+.crewlet-slide-filmstrip__controls {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--spacing-0);
+}
+
+.crewlet-slide-filmstrip__controls .crewlet-menu-anchor {
+  opacity: 0;
+}
+
+.crewlet-slide-filmstrip__item[data-selected='true'] .crewlet-menu-anchor,
+.crewlet-slide-filmstrip__item:hover .crewlet-menu-anchor,
+.crewlet-slide-filmstrip__controls .crewlet-menu-anchor:focus-within,
+.crewlet-slide-filmstrip__controls .crewlet-menu-anchor:has([aria-expanded='true']) {
+  opacity: 1;
+}
+
+@media (hover: none) {
+  .crewlet-slide-filmstrip__controls .crewlet-menu-anchor {
+    opacity: 1;
+  }
+}
+
+/* What follows the slides (a New slide control), aligned with the thumbnails
+   rather than with the numbers beside them. */
+.crewlet-slide-filmstrip__footer {
+  padding: var(--spacing-1) var(--spacing-1) var(--spacing-2) calc(var(--spacing-5) + var(--spacing-2));
+}
+
+.crewlet-slide-filmstrip--horizontal {
+  display: flex;
+  align-items: flex-start;
+}
+
+.crewlet-slide-filmstrip--horizontal .crewlet-slide-filmstrip__controls {
+  grid-area: handle;
+  flex-direction: row;
+}
+
+.crewlet-slide-filmstrip--horizontal .crewlet-slide-filmstrip__footer {
+  flex: none;
+  padding: var(--spacing-1) var(--spacing-2);
+}

package/dist/SourceEditor/SourceEditor.d.ts

@@ -0,0 +1,62 @@
+import { type TextareaHTMLAttributes } from "react";
+/** How a marked line reads: a refusal, or advice. */
+export type SourceMarkTone = "danger" | "warning";
+/** One line called out in the source, as a checker found it. */
+export interface SourceMark {
+    /** The line, counted from 1. A line past the end is ignored. */
+    line: number;
+    tone: SourceMarkTone;
+    /** What is wrong on the line, shown as the gutter number's tooltip. */
+    message?: string;
+}
+export interface SourceEditorProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, "value" | "onChange" | "onSubmit" | "children" | "wrap" | "spellCheck"> {
+    value: string;
+    onChange: (value: string) => void;
+    /** Names the field for a screen reader when no visible label points at it. */
+    label?: string;
+    /** Lines to call out in the gutter and behind the text. */
+    marks?: readonly SourceMark[];
+    /** Called on Command+Enter (Control+Enter elsewhere). */
+    onSubmit?: (() => void) | undefined;
+    /** Spaces one Tab indents by. */
+    indent?: number;
+    /** Fill the parent's height rather than size to `rows`. */
+    fill?: boolean;
+    className?: string | undefined;
+    /** The field's own class, for a consumer that sets its height. */
+    fieldClassName?: string | undefined;
+}
+/** What a parent can ask of the editor. */
+export interface SourceEditorHandle {
+    /** Focus the field with the caret at the start of `line` (from 1), scrolled into view. */
+    revealLine: (line: number) => void;
+    focus: () => void;
+    /** The field itself. */
+    readonly element: HTMLTextAreaElement | null;
+}
+/** The keyboard instructions every editor carries for a screen reader. */
+export declare const SOURCE_EDITOR_KEYS = "Tab indents and Shift+Tab outdents. Press Escape, then Tab, to move to the next control.";
+/** The offset of the start of `line` (from 1) in `text`, clamped to the text. */
+export declare function lineStart(text: string, line: number): number;
+/**
+ * Source text written in place: a monospaced field with a line gutter, and
+ * lines a checker called out marked in the gutter and behind the text.
+ *
+ * A REAL TEXTAREA, so everything a browser gives a field (selection, undo,
+ * spelling off, a screen reader's editing commands, autofill off) is there
+ * without being rebuilt. The gutter and the marks are drawn behind and beside
+ * it and scroll with it; they are hidden from assistive technology, which
+ * reads the findings where the consumer lists them.
+ *
+ * LINES NEVER WRAP, so a line number and a mark always sit on the line they
+ * name: a long line scrolls sideways.
+ *
+ * TAB INDENTS, AND ESCAPE GIVES TAB BACK. Tab and Shift+Tab indent and outdent
+ * the lines under the selection, as every code editor does. A keyboard user
+ * leaves by pressing Escape first: the next Tab then moves focus as usual. The
+ * instructions are the field's description.
+ *
+ * ENTER KEEPS THE INDENT of the line it breaks, and Command+Enter (Control+Enter)
+ * calls `onSubmit`.
+ */
+export declare const SourceEditor: import("react").ForwardRefExoticComponent<SourceEditorProps & import("react").RefAttributes<SourceEditorHandle>>;

package/dist/SourceEditor/index.d.ts

@@ -0,0 +1,3 @@
+import "./SourceEditor.css";
+export { SOURCE_EDITOR_KEYS, SourceEditor, lineStart } from "./SourceEditor.js";
+export type { SourceEditorHandle, SourceEditorProps, SourceMark, SourceMarkTone, } from "./SourceEditor.js";

package/dist/SourceEditor/index.js

@@ -0,0 +1,3 @@
+export { SOURCE_EDITOR_KEYS, SourceEditor, lineStart } from '../chunk-PI7HKLIT.js';
+import '../chunk-BZFWDIV6.js';
+import '../chunk-ODEQTPFM.js';