@crewlethq/ui 0.34.2 → 0.35.1

package/dist/DataTable/index.js

@@ -1,4 +1,4 @@
-export { ALL_ITEMS, CopyableCell, DATA_TABLE_LABELS, DataTable, RowActionsMenu } from '../chunk-UXXJDIYE.js';
+export { ALL_ITEMS, CopyableCell, DATA_TABLE_LABELS, DataTable, RowActionsMenu } from '../chunk-22CQQDFW.js';
 import '../chunk-STJ7QBC3.js';
 import '../chunk-DTIW4CHZ.js';
 import '../chunk-XEGZHHRH.js';
@@ -7,7 +7,7 @@ import '../chunk-6QFAK2WV.js';
 import '../chunk-EUCC37WY.js';
 import '../chunk-AV2DXAEL.js';
 import '../chunk-PQADV6P6.js';
-import '../chunk-3EB2AV3H.js';
+import '../chunk-BUVCV3WI.js';
 import '../chunk-OMV5W53A.js';
 import '../chunk-R25RGPUB.js';
 import '../chunk-OG6CL3EB.js';

package/dist/DataView/index.js

@@ -1,6 +1,6 @@
-export { DATA_VIEW_TOOLBAR_LABELS, DataView, DataViewToolbar, FILTER_AXIS_LABELS, FilterAxisBar, FilterAxisChip, applyColumnFilters, applyFilters, blankFilterValue, defaultOperator, filterDefsFromColumns, filterHasValue, filterPredicate, formatFilterValue, operatorOf, tableColumns } from '../chunk-NPQWKZTB.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-QFNWMWWY.js';
 import '../chunk-HOXGBLEY.js';
-import '../chunk-UXXJDIYE.js';
+import '../chunk-22CQQDFW.js';
 import '../chunk-73A7D5CE.js';
 import '../chunk-STJ7QBC3.js';
 import '../chunk-DTIW4CHZ.js';
@@ -17,7 +17,7 @@ import '../chunk-EUCC37WY.js';
 import '../chunk-AV2DXAEL.js';
 import '../chunk-BHHIIK3M.js';
 import '../chunk-PQADV6P6.js';
-import '../chunk-3EB2AV3H.js';
+import '../chunk-BUVCV3WI.js';
 import '../chunk-OMV5W53A.js';
 import '../chunk-R25RGPUB.js';
 import '../chunk-OG6CL3EB.js';

package/dist/DocTabsEditor/index.js

@@ -1,8 +1,8 @@
-export { DOC_TABS_EDITOR_LABELS, DocTabsEditor } from '../chunk-YZFLH463.js';
+export { DOC_TABS_EDITOR_LABELS, DocTabsEditor } from '../chunk-QEFHYUCY.js';
 import '../chunk-XJ2QEBMM.js';
 import '../chunk-6QFAK2WV.js';
 import '../chunk-PQADV6P6.js';
-import '../chunk-3EB2AV3H.js';
+import '../chunk-BUVCV3WI.js';
 import '../chunk-OMV5W53A.js';
 import '../chunk-R25RGPUB.js';
 import '../chunk-OG6CL3EB.js';

package/dist/{Editor-JMRD6AZW.js → Editor-BVQHBF7L.js}

@@ -1,10 +1,10 @@
-import { schema, readMarkdown, writeMarkdown } from './chunk-C7DKX453.js';
-import { richEditorLabels } from './chunk-4B6LSFDS.js';
-import { safeHref, MARKDOWN_CALLOUT_TONES } from './chunk-KK5OYNAF.js';
+import { richEditorLabels } from './chunk-CSQTDGTS.js';
+import { schema, readMarkdown, writeMarkdown } from './chunk-QH6VYJ3X.js';
+import { safeHref, MARKDOWN_CALLOUT_TONES } from './chunk-BAKPMH3S.js';
 import { Toolbar } from './chunk-PGRPNDWM.js';
 import { FormField, Input } from './chunk-6QFAK2WV.js';
 import './chunk-PQADV6P6.js';
-import { Menu } from './chunk-3EB2AV3H.js';
+import { Menu } from './chunk-BUVCV3WI.js';
 import { placePopup, viewportBounds } from './chunk-OMV5W53A.js';
 import { usePopupLayer } from './chunk-R25RGPUB.js';
 import { Button } from './chunk-OG6CL3EB.js';

package/dist/FileDrop/FileDrop.d.ts

@@ -0,0 +1,64 @@
+import { type HTMLAttributes, type ReactNode } from "react";
+import { type ButtonProps } from "../Button/index.js";
+/** A file the person brought, and where it sits in what they brought. */
+export interface PickedFile {
+    /**
+     * Its path inside what was brought, with forward slashes: the file's name
+     * alone for loose files, `site/css/main.css` for a file inside a folder.
+     */
+    path: string;
+    file: File;
+}
+/**
+ * The files a drop carries, folders walked. Read from the entries API where the
+ * browser offers it (the only way a dropped folder's contents are reachable),
+ * else from the drop's flat file list.
+ */
+export declare function droppedFiles(data: DataTransfer): Promise<PickedFile[]>;
+/** The files an input picked, under their folder path when a folder was picked. */
+export declare function pickedFiles(list: FileList | null): PickedFile[];
+export interface FilePickButtonProps extends Omit<ButtonProps, "onClick" | "children"> {
+    onFiles: (files: PickedFile[]) => void;
+    /** File types the picker offers, as the input's `accept` takes them. */
+    accept?: string | undefined;
+    /** Pick a whole folder rather than files. */
+    directory?: boolean;
+    /** Allow more than one file. Ignored for a folder, which is always many. */
+    multiple?: boolean;
+    children: ReactNode;
+}
+/**
+ * A button that opens the system's file picker: the keyboard's and the
+ * screen reader's way to bring files, always offered beside a drop target.
+ */
+export declare const FilePickButton: import("react").ForwardRefExoticComponent<FilePickButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+export interface FileDropProps extends Omit<HTMLAttributes<HTMLDivElement>, "onDrop" | "title"> {
+    onFiles: (files: PickedFile[]) => void;
+    /**
+     * The region the files may be dropped on. Without it, the primitive draws
+     * its own target: a framed area holding `title`, `hint` and `actions`.
+     */
+    children?: ReactNode;
+    /** The target's heading, and what the overlay says while files are over it. */
+    title: ReactNode;
+    /** One line under the title: what may be brought. */
+    hint?: ReactNode;
+    /** The pickers, usually one or two `FilePickButton`s. Drawn in the target. */
+    actions?: ReactNode;
+    disabled?: boolean;
+}
+/**
+ * Where files are dropped: a target of its own, or any region (an editor, a
+ * pane) that takes files dropped on it, with an overlay saying so while files
+ * are held over it. Folders are walked.
+ *
+ * DROPPING IS NEVER THE ONLY WAY. A drop is a pointer gesture, so the target
+ * always carries a picker (`actions`, with `FilePickButton`), and a region
+ * that wraps content is expected to offer one nearby. The overlay is hidden
+ * from assistive technology; the consumer announces what arrived.
+ *
+ * A DRAG THAT IS NOT FILES (text being moved inside an editor) passes through
+ * untouched, and the overlay is counted in and out per element so a drag
+ * crossing children does not flicker it.
+ */
+export declare const FileDrop: import("react").ForwardRefExoticComponent<FileDropProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/FileDrop/index.d.ts

@@ -0,0 +1,3 @@
+import "./FileDrop.css";
+export { FileDrop, FilePickButton, droppedFiles, pickedFiles, } from "./FileDrop.js";
+export type { FileDropProps, FilePickButtonProps, PickedFile, } from "./FileDrop.js";

package/dist/FileDrop/index.js

@@ -0,0 +1,4 @@
+export { FileDrop, FilePickButton, droppedFiles, pickedFiles } from '../chunk-THDGBD6Y.js';
+import '../chunk-OG6CL3EB.js';
+import '../chunk-BZFWDIV6.js';
+import '../chunk-ODEQTPFM.js';

package/dist/FileDrop-WE7BNZGV.css

@@ -0,0 +1,80 @@
+/*
+ * Where files are dropped. A target of its own is a dashed, quiet area with a
+ * heading, a hint and the pickers; a region wrapping content draws nothing
+ * until files are held over it, then an accent overlay saying what dropping
+ * does. The overlay takes no pointer, so the drop lands on the region.
+ */
+.crewlet-file-drop {
+  position: relative;
+  min-width: 0;
+}
+
+.crewlet-file-drop.is-target {
+  display: grid;
+  justify-items: center;
+  gap: var(--spacing-1);
+  padding: var(--spacing-6) var(--spacing-4);
+  border: 1px dashed var(--color-border-strong);
+  border-radius: var(--radius-md);
+  background: var(--color-surface-subtle);
+  text-align: center;
+  transition:
+    border-color var(--motion-duration-fast) var(--motion-easing-default),
+    background-color var(--motion-duration-fast) var(--motion-easing-default);
+}
+
+.crewlet-file-drop.is-target.is-over {
+  border-color: var(--color-brand-accent);
+  background: var(--color-brand-accent-soft);
+}
+
+.crewlet-file-drop.is-disabled {
+  opacity: 0.6;
+}
+
+.crewlet-file-drop__title {
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+  color: var(--color-text-primary);
+}
+
+.crewlet-file-drop__hint {
+  font-size: var(--font-size-xs);
+  color: var(--color-text-tertiary);
+}
+
+.crewlet-file-drop__actions {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: var(--spacing-2);
+  margin-top: var(--spacing-2);
+}
+
+.crewlet-file-drop__overlay {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  display: grid;
+  place-content: center;
+  justify-items: center;
+  gap: var(--spacing-1);
+  border: 1px dashed var(--color-brand-accent);
+  border-radius: var(--radius-md);
+  /* Floats over the region's content, so it takes the frosted ground. */
+  background: var(--color-surface-glass);
+  backdrop-filter: blur(var(--blur-sm));
+  pointer-events: none;
+  text-align: center;
+}
+
+/* The input the picker opens is never drawn or reached: the button is. */
+.crewlet-file-drop__input {
+  display: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .crewlet-file-drop.is-target {
+    transition: none;
+  }
+}

package/dist/FindingList/FindingList.d.ts

@@ -0,0 +1,35 @@
+import type { ReactNode } from "react";
+/** How a finding reads: something that refuses, or advice. */
+export type FindingTone = "danger" | "warning";
+/** One thing a checker found. */
+export interface Finding {
+    /** Stable identity within the list. */
+    key: string;
+    tone: FindingTone;
+    /** Where it is, as a reader names it: `index.html, line 6`. */
+    location?: ReactNode;
+    /** What is wrong, as a sentence. */
+    message: ReactNode;
+    /**
+     * Take the reader to it (an editor's line). With it the row is a button;
+     * without it, text.
+     */
+    onSelect?: (() => void) | undefined;
+}
+export interface FindingListProps {
+    findings: readonly Finding[];
+    /** Names the list for a screen reader: "Problems in the page". */
+    label: string;
+    /** What each tone is called to a screen reader, before the message. */
+    toneLabels?: Partial<Record<FindingTone, string>> | undefined;
+    className?: string | undefined;
+}
+/**
+ * What a checker found, one row each: its tone's glyph in its ink, where it is
+ * and what is wrong. Refusals first, then advice, each in the order given.
+ *
+ * A ROW THAT GOES SOMEWHERE IS A BUTTON, so a keyboard walks the findings with
+ * Tab and Enter takes it to the line, as a pointer does. The tone is said in
+ * words before the message, since a glyph's colour is not a word.
+ */
+export declare function FindingList({ findings, label, toneLabels, className, }: FindingListProps): import("react").JSX.Element;

package/dist/FindingList/index.d.ts

@@ -0,0 +1,3 @@
+import "./FindingList.css";
+export { FindingList } from "./FindingList.js";
+export type { Finding, FindingListProps, FindingTone } from "./FindingList.js";

package/dist/FindingList/index.js

@@ -0,0 +1,3 @@
+export { FindingList } from '../chunk-NTB5LRRD.js';
+import '../chunk-BZFWDIV6.js';
+import '../chunk-ODEQTPFM.js';

package/dist/FindingList-PMYA2R6Q.css

@@ -0,0 +1,71 @@
+/*
+ * What a checker found: a quiet list, one row each, the tone's glyph in its
+ * ink, the location in mono over the sentence. A row that goes somewhere takes
+ * the hover ground and the focus ring as a whole.
+ */
+.crewlet-finding-list {
+  display: grid;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.crewlet-finding-list__row {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  gap: var(--spacing-2);
+  align-items: start;
+  width: 100%;
+  padding: var(--spacing-2);
+  border: 0;
+  border-radius: var(--radius-sm);
+  background: transparent;
+  color: var(--color-text-primary);
+  font: inherit;
+  text-align: start;
+}
+
+button.crewlet-finding-list__row {
+  cursor: pointer;
+}
+
+button.crewlet-finding-list__row:hover {
+  background: var(--color-surface-hover);
+}
+
+button.crewlet-finding-list__row:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: -2px;
+}
+
+.crewlet-finding-list__glyph {
+  display: inline-flex;
+  padding-top: 2px;
+}
+
+.crewlet-finding-list__glyph.is-danger {
+  color: var(--color-feedback-danger-ink);
+}
+
+.crewlet-finding-list__glyph.is-warning {
+  color: var(--color-feedback-warning-ink);
+}
+
+.crewlet-finding-list__text {
+  display: grid;
+  gap: 2px;
+  min-width: 0;
+}
+
+.crewlet-finding-list__location {
+  font-family: var(--font-family-mono);
+  font-size: var(--font-size-2xs);
+  color: var(--color-text-tertiary);
+  overflow-wrap: anywhere;
+}
+
+.crewlet-finding-list__message {
+  font-size: var(--font-size-sm);
+  line-height: var(--font-line-height-normal);
+  overflow-wrap: anywhere;
+}

package/dist/HuePicker/HuePicker.d.ts

@@ -21,6 +21,15 @@ export type HuePickerProps = HuePickerBase & ({
     value: NodeHue | 'none';
     onValueChange: (hue: NodeHue | 'none') => void;
 });
+/**
+ * A hue's swatch, a dot in the hue, or the hairline ring of no hue: what a
+ * hue picker, a hue menu or a list of coloured choices draws beside a name.
+ * Decorative: the name beside it carries the hue.
+ */
+export declare function HueSwatch({ hue, className }: {
+    hue: NodeHue | 'none';
+    className?: string | undefined;
+}): import("react").JSX.Element;
 /**
  * The choice of an entity's hue: the six node hues as a row of chips, each a
  * swatch and the hue's name.

package/dist/HuePicker/index.d.ts

@@ -1,3 +1,3 @@
 import './HuePicker.css';
-export { HuePicker } from './HuePicker.js';
+export { HuePicker, HueSwatch } from './HuePicker.js';
 export type { HuePickerProps } from './HuePicker.js';

package/dist/HuePicker/index.js

@@ -1,5 +1,5 @@
 import '../chunk-FFMCMSJB.js';
-export { HuePicker } from '../chunk-GPHWCK7M.js';
+export { HuePicker, HueSwatch } from '../chunk-SUXP4OBT.js';
 import '../chunk-AYKXMIOR.js';
 import '../chunk-CCAXYHQS.js';
 import '../chunk-VL6CUNSX.js';

package/dist/Markdown/index.js

@@ -1 +1 @@
-export { MARKDOWN_CALLOUT_NAMES, MARKDOWN_CALLOUT_TONES, markdownBreaks, markdownClosesFence, markdownCodeText, markdownFenceOf, markdownHeadingOf, markdownInline, markdownLines, parseMarkdown, parseMarkdownSpans, safeHref } from '../chunk-KK5OYNAF.js';
+export { MARKDOWN_CALLOUT_NAMES, MARKDOWN_CALLOUT_TONES, markdownBreaks, markdownClosesFence, markdownCodeText, markdownFenceOf, markdownHeadingOf, markdownInline, markdownLines, parseMarkdown, parseMarkdownSpans, safeHref } from '../chunk-BAKPMH3S.js';

package/dist/Menu/Menu.d.ts

@@ -122,7 +122,12 @@ export interface MenuTriggerProps {
     onKeyDown: (event: KeyboardEvent<HTMLElement>) => void;
 }
 export interface MenuProps {
-    /** The trigger's accessible name, such as "Actions for Software Engineer". */
+    /**
+     * The trigger's accessible name, such as "Actions for Software Engineer".
+     * It names a text trigger too, so "New" can be announced as "New artifact":
+     * keep the trigger's visible words in it, so a person who speaks what they
+     * see still reaches the button.
+     */
     label: string;
     items: readonly MenuEntry[];
     /** The trigger's glyph, when it has no visible text. */

package/dist/Menu/index.js

@@ -1,4 +1,4 @@
-export { Menu } from '../chunk-3EB2AV3H.js';
+export { Menu } from '../chunk-BUVCV3WI.js';
 import '../chunk-OMV5W53A.js';
 import '../chunk-R25RGPUB.js';
 import '../chunk-OG6CL3EB.js';

package/dist/RichEditor/index.js

@@ -1,6 +1,6 @@
-export { RichEditor, preloadRichEditor } from '../chunk-EQ7P7DGN.js';
-export { RICH_EDITOR_LABELS, richEditorLabels } from '../chunk-4B6LSFDS.js';
-import '../chunk-KK5OYNAF.js';
+export { RichEditor, preloadRichEditor } from '../chunk-3VD3G3IL.js';
+export { RICH_EDITOR_LABELS, richEditorLabels } from '../chunk-CSQTDGTS.js';
+import '../chunk-BAKPMH3S.js';
 import '../chunk-SZZRIHGT.js';
 import '../chunk-TEUQWOWZ.js';
 import '../chunk-OG6CL3EB.js';

package/dist/RichEditorMarkdown/index.js

@@ -1,3 +1,3 @@
-export { canonicalMarkdown, roundTripMarkdown } from '../chunk-TRQCHF2F.js';
-import '../chunk-C7DKX453.js';
-import '../chunk-KK5OYNAF.js';
+export { canonicalMarkdown, roundTripMarkdown } from '../chunk-SWD4QBL6.js';
+import '../chunk-QH6VYJ3X.js';
+import '../chunk-BAKPMH3S.js';

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-J6YZ4IYV.js';
+import '../chunk-BQ7AKL2N.js';
+import '../chunk-FFMCMSJB.js';
+import '../chunk-F73MC7EZ.js';
+import '../chunk-LFSIKGRQ.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;