@crewlethq/ui 0.34.2 → 0.35.0

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';

package/dist/SourceEditor-G2C3STPX.css

@@ -0,0 +1,160 @@
+/*
+ * Source text written in place: a gutter of line numbers beside a real
+ * textarea, and the marks a checker placed drawn behind the text. The gutter,
+ * the marks and the field share one font, one line height and one top inset,
+ * so a number and a mark always sit on the line they name; the layers follow
+ * the field's scroll by a transform.
+ *
+ * The BOX takes the focus ring, as the Composer's does.
+ */
+.crewlet-source-editor {
+  --crewlet-source-inset: var(--spacing-2);
+
+  position: relative;
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  min-width: 0;
+  overflow: hidden;
+  border: 1px solid var(--color-border-strong);
+  border-radius: var(--radius-md);
+  background: var(--color-surface-background);
+  font-family: var(--font-family-mono);
+  font-size: var(--font-size-xs);
+  line-height: var(--font-line-height-normal);
+  transition:
+    border-color var(--motion-duration-fast) var(--motion-easing-default),
+    box-shadow var(--motion-duration-fast) var(--motion-easing-default);
+}
+
+.crewlet-source-editor:hover {
+  border-color: var(--color-border-strong-hover);
+}
+
+.crewlet-source-editor:focus-within {
+  border-color: var(--color-brand-accent);
+  box-shadow: 0 0 0 2px var(--color-brand-accent-soft);
+}
+
+.crewlet-source-editor.is-fill {
+  height: 100%;
+}
+
+.crewlet-source-editor__gutter {
+  position: relative;
+  overflow: hidden;
+  border-right: 1px solid var(--color-border-default);
+  background: var(--color-surface-subtle);
+  user-select: none;
+}
+
+.crewlet-source-editor__numbers {
+  display: grid;
+  padding: var(--crewlet-source-inset) 0;
+  will-change: transform;
+}
+
+.crewlet-source-editor__number {
+  /* Wide enough for the longest number, so the text never shifts as lines are added. */
+  min-width: calc(var(--crewlet-source-digits, 2) * 1ch + var(--spacing-2) * 2);
+  padding: 0 var(--spacing-2);
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+  color: var(--color-text-tertiary);
+}
+
+.crewlet-source-editor__number.is-danger {
+  color: var(--color-feedback-danger-ink);
+  font-weight: var(--font-weight-semibold);
+  box-shadow: inset 2px 0 0 var(--color-feedback-danger-ink);
+}
+
+.crewlet-source-editor__number.is-warning {
+  color: var(--color-feedback-warning-ink);
+  font-weight: var(--font-weight-semibold);
+  box-shadow: inset 2px 0 0 var(--color-feedback-warning-ink);
+}
+
+.crewlet-source-editor__body {
+  position: relative;
+  display: grid;
+  min-width: 0;
+}
+
+.crewlet-source-editor__marks {
+  position: absolute;
+  inset: 0;
+  overflow: hidden;
+  pointer-events: none;
+}
+
+.crewlet-source-editor__marks > div {
+  position: relative;
+  will-change: transform;
+}
+
+.crewlet-source-editor__mark {
+  position: absolute;
+  top: calc(var(--crewlet-source-inset) + var(--crewlet-source-line) * 1lh);
+  left: 0;
+  right: 0;
+  height: 1lh;
+}
+
+.crewlet-source-editor__mark.is-danger {
+  background: var(--color-feedback-danger-soft);
+}
+
+.crewlet-source-editor__mark.is-warning {
+  background: var(--color-feedback-warning-soft);
+}
+
+.crewlet-source-editor .crewlet-source-editor__field {
+  position: relative;
+  display: block;
+  width: 100%;
+  min-height: 0;
+  margin: 0;
+  padding: var(--crewlet-source-inset) var(--spacing-3);
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  color: var(--color-text-primary);
+  font: inherit;
+  white-space: pre;
+  overflow: auto;
+  resize: none;
+  tab-size: 2;
+  caret-color: var(--color-brand-accent);
+}
+
+.crewlet-source-editor.is-fill .crewlet-source-editor__field {
+  height: 100%;
+}
+
+.crewlet-source-editor .crewlet-source-editor__field::placeholder {
+  color: var(--color-text-tertiary);
+}
+
+/* The ring is the box's, above. A transparent outline stays, because forced
+   colors drops the box's shadow and paints an outline in its place. */
+.crewlet-source-editor .crewlet-source-editor__field:focus-visible {
+  outline: 2px solid transparent;
+  outline-offset: -2px;
+}
+
+.crewlet-source-editor .crewlet-source-editor__field[readonly] {
+  color: var(--color-text-secondary);
+}
+
+@media (forced-colors: active) {
+  .crewlet-source-editor__mark {
+    background: Highlight;
+    opacity: 0.25;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .crewlet-source-editor {
+    transition: none;
+  }
+}

package/dist/ThemeGallery/ThemeGallery.d.ts

@@ -1,4 +1,4 @@
-import { type HTMLAttributes } from 'react';
+import { type HTMLAttributes, type ReactNode } from 'react';
 import { type ThemeId } from '@crewlethq/tokens';
 import { type ThemeSwatchPair } from '../ThemeSwatch/index.js';
 /** A theme as the gallery offers it: the fields of a `themeRegistry` entry it reads. */
@@ -9,7 +9,8 @@ export interface ThemeGalleryTheme<T extends string = string> {
     tag: string;
     /** The id of the group it is listed under. */
     group: string;
-    swatch: ThemeSwatchPair;
+    /** Its two palettes, drawn as the card's thumbnail unless `renderPreview` draws one. */
+    swatch?: ThemeSwatchPair | undefined;
 }
 /** A heading the themes are listed under, as `themeGroups` carries it. */
 export interface ThemeGalleryGroup {
@@ -38,6 +39,12 @@ export interface ThemeGalleryProps<T extends string = ThemeId> extends Omit<HTML
     columns?: number | undefined;
     /** Nothing can be chosen, and the gallery says so. */
     disabled?: boolean | undefined;
+    /**
+     * Draws a card's thumbnail in place of its swatch: a theme of something
+     * other than the product's chrome, such as a slide deck's, shown as what it
+     * themes. Decoration, as the swatch is: the card is named by its theme.
+     */
+    renderPreview?: ((theme: ThemeGalleryTheme<T>) => ReactNode) | undefined;
 }
 /**
  * The choice of a theme: every theme, each drawn as its two palettes, listed
@@ -62,4 +69,4 @@ export interface ThemeGalleryProps<T extends string = ThemeId> extends Omit<HTML
  * and described by its group's heading; the drawing is decoration, because
  * the name is printed under it.
  */
-export declare function ThemeGallery<T extends string = ThemeId>({ label, value, onValueChange, onPreview, themes, groups, columns, disabled, className, style, ...rest }: ThemeGalleryProps<T>): import("react").JSX.Element;
+export declare function ThemeGallery<T extends string = ThemeId>({ label, value, onValueChange, onPreview, themes, groups, columns, disabled, renderPreview, className, style, ...rest }: ThemeGalleryProps<T>): import("react").JSX.Element;

package/dist/ThemeGallery/index.js

@@ -1,4 +1,4 @@
-export { ThemeGallery } from '../chunk-C2FRTWKO.js';
+export { ThemeGallery } from '../chunk-W3UVOZKL.js';
 import '../chunk-MNFU2RNT.js';
 import '../chunk-F73MC7EZ.js';
 import '../chunk-RKKO7QHH.js';

package/dist/{ThemeGallery-NITASULQ.css → ThemeGallery-HSUKBDWY.css}

@@ -91,3 +91,12 @@
     border-width: 2px;
   }
 }
+
+/* A THUMBNAIL THE CALLER DRAWS (`renderPreview`) fills the card's width, as
+   the swatch does, and is clipped to the card's inner corner. */
+.crewlet-theme-gallery__preview {
+  display: block;
+  overflow: hidden;
+  border-radius: var(--radius-sm);
+  pointer-events: none;
+}

package/dist/{chunk-UXXJDIYE.js → chunk-22CQQDFW.js}

@@ -3,7 +3,7 @@ import { Modal } from './chunk-XEGZHHRH.js';
 import { Checkbox } from './chunk-CPEPST4S.js';
 import { EmptyValue } from './chunk-EUCC37WY.js';
 import { useCardHeaderSlot } from './chunk-AV2DXAEL.js';
-import { Menu } from './chunk-3EB2AV3H.js';
+import { Menu } from './chunk-BUVCV3WI.js';
 import { Button } from './chunk-OG6CL3EB.js';
 import { IconButton } from './chunk-4FQT6ZAY.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';

package/dist/{chunk-EQ7P7DGN.js → chunk-3VD3G3IL.js}

@@ -1,4 +1,4 @@
-import { richEditorLabels } from './chunk-4B6LSFDS.js';
+import { richEditorLabels } from './chunk-CSQTDGTS.js';
 import { Callout } from './chunk-SZZRIHGT.js';
 import { Skeleton } from './chunk-TEUQWOWZ.js';
 import { Button } from './chunk-OG6CL3EB.js';
@@ -9,7 +9,7 @@ import { jsx } from 'react/jsx-runtime';
 var engine = null;
 var loading = null;
 function loadEngine() {
-  loading ??= import('./Editor-JMRD6AZW.js').then(
+  loading ??= import('./Editor-BVQHBF7L.js').then(
     (module) => {
       engine = module.Editor;
       return engine;