@crewlethq/ui 0.35.1 → 0.37.0

package/dist/ArtifactCard/index.js

@@ -1,13 +1,14 @@
-export { ArtifactCard, ArtifactCardSkeleton, ArtifactPreviewGlyph } from '../chunk-7UYONN6K.js';
+export { ArtifactCard, ArtifactCardSkeleton, ArtifactPreviewGlyph } from '../chunk-OHA6WSAG.js';
 import '../chunk-TEUQWOWZ.js';
 import '../chunk-CI3VPIJN.js';
 import '../chunk-3CZ7XAVY.js';
 import '../chunk-EUCC37WY.js';
-import '../chunk-W7QBBKUE.js';
-import '../chunk-ACA27MZH.js';
+import '../chunk-UBZDYOCA.js';
+import '../chunk-5QXRI35B.js';
 import '../chunk-AV2DXAEL.js';
 import '../chunk-5AQBPHZD.js';
 import '../chunk-PZKHBB7D.js';
+import '../chunk-BGLKLXL3.js';
 export { ARTIFACT_KINDS, ArtifactKindGlyph } from '../chunk-CE2THTQR.js';
 import '../chunk-BHHIIK3M.js';
 import '../chunk-PQADV6P6.js';

package/dist/ArtifactCover/index.js

@@ -1,4 +1,5 @@
-export { DashboardCover, DocCover, SHEET_COVER_COLUMNS, SHEET_COVER_ROWS, SheetCover } from '../chunk-AXBRWRGV.js';
-import '../chunk-TYKQ33CL.js';
+export { DashboardCover, DocCover, SHEET_COVER_COLUMNS, SHEET_COVER_ROWS, SheetCover } from '../chunk-JQLS3MZB.js';
+import '../chunk-P6WFZDKS.js';
 import '../chunk-CE2THTQR.js';
+import '../chunk-YSGLEHND.js';
 import '../chunk-ODEQTPFM.js';

package/dist/ArtifactKindIllustration/ArtifactKindIllustration.d.ts

@@ -20,8 +20,8 @@ export declare function ArtifactKindIllustration({ kind, className }: {
 }): import("react").JSX.Element;
 /**
  * A kind's drawing on its tinted ground: the stand-in a preview shows while
- * nothing live is drawn (off screen, still loading, over the live budget,
- * failed or empty), and the face of a Make something new tile.
+ * nothing live is drawn (never yet near, still loading, over the live budget,
+ * failed or empty), and the face of a kind tile.
  */
 export declare function ArtifactKindGround({ kind, className, children, }: {
     kind: ArtifactKind;
@@ -31,7 +31,7 @@ export declare function ArtifactKindGround({ kind, className, children, }: {
 }): import("react").JSX.Element;
 export interface ArtifactKindTileProps {
     kind: ArtifactKind;
-    /** The kind's name, under the tile: "Docs". */
+    /** The name under the tile: "Docs", or a starting point's "Landing page". */
     label: string;
     /** Where starting one goes. Left out with `disabledReason`, the tile starts nothing. */
     href?: string | undefined;
@@ -41,6 +41,13 @@ export interface ArtifactKindTileProps {
      * button. `href` wins where both are given.
      */
     onSelect?: (() => void) | undefined;
+    /**
+     * For a tile that is a button: whether it is the one chosen (a starting
+     * layout already picked). Drawn as every chosen option is, the selected
+     * edge over the selected fill with a check beside the name, and announced
+     * as a pressed button. Left out, the tile is an action with no state.
+     */
+    selected?: boolean | undefined;
     /**
      * Drawn on the kind's ground in place of its drawing: a picture of this
      * particular starting point, such as a design layout's schematic.
@@ -55,12 +62,14 @@ export interface ArtifactKindTileProps {
     className?: string | undefined;
 }
 /**
- * One kind on a "Make something new" row: the kind's drawing on its tinted
- * ground, framed, with its name under it. The whole tile is one link named by
- * the kind's name.
+ * One kind, or one starting point of a kind, as a tile: the kind's drawing on
+ * its tinted ground (or the starting point's own `face`), framed, with its
+ * name under it, such as a create page's starting layouts. The whole tile is
+ * one link or button named by the name. The gallery's "Start a new artifact" row
+ * is the quieter `ArtifactMakeRow`, a toolbar of glyphs rather than pictures.
  *
  * A TILE THAT CANNOT START is still a stop on the row, so a reader moving
  * through it by keyboard hears why (`disabledReason`) rather than finding a
  * kind missing.
  */
-export declare function ArtifactKindTile({ kind, label, href, onSelect, face, detail, badge, disabledReason, className, }: ArtifactKindTileProps): import("react").JSX.Element;
+export declare function ArtifactKindTile({ kind, label, href, onSelect, selected, face, detail, badge, disabledReason, className, }: ArtifactKindTileProps): import("react").JSX.Element;

package/dist/ArtifactKindIllustration/index.js

@@ -1,3 +1,3 @@
-export { ArtifactKindGround, ArtifactKindIllustration, ArtifactKindTile } from '../chunk-W7QBBKUE.js';
+export { ArtifactKindGround, ArtifactKindIllustration, ArtifactKindTile } from '../chunk-UBZDYOCA.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{ArtifactKindIllustration-5FPRJQ3P.css → ArtifactKindIllustration-KLFL7KBG.css}

@@ -1,5 +1,5 @@
 /*
- * A kind's drawing, its tinted ground and the Make something new tile.
+ * A kind's drawing, its tinted ground and the "Start a new artifact" tile.
  *
  * Every colour is the kind's token, `--color-artifact-kind-<kind>` and its
  * Fill and Line steps, set once per kind on `--crewlet-kind-*`
@@ -201,6 +201,42 @@ a.crewlet-kind-tile:hover .crewlet-kind-tile__frame,
   outline-offset: var(--size-focus-ring-inset-offset);
 }
 
+/*
+ * A TILE THAT STARTS SOMETHING IN PLACE (a create page's starting layouts)
+ * DRAWS ONE EDGE. Its face is a picture of the layout, with boards of its
+ * own, so the ground's tinted inner line was a second outline a few pixels
+ * inside the frame's, and with the focus ring over the frame the tile read as
+ * three nested rings. The frame is the tile's one edge; the ground keeps its
+ * tint.
+ */
+.crewlet-kind-tile--button .crewlet-kind-tile__ground {
+  box-shadow: none;
+}
+
+/*
+ * CHOSEN, as every chosen option is drawn: the selected edge (the accent
+ * mixed toward the page) on the frame, over the selected fill, and a check
+ * beside the name, the mark that clears 3:1. Under the pointer it keeps its
+ * edge, and the focus ring is drawn over it for the keyboard alone.
+ */
+.crewlet-kind-tile--button.is-selected .crewlet-kind-tile__frame,
+.crewlet-kind-tile--button.is-selected:hover .crewlet-kind-tile__frame {
+  border-color: var(--color-border-selected);
+  background-image: linear-gradient(var(--color-surface-selected), var(--color-surface-selected));
+}
+
+.crewlet-kind-tile__check {
+  flex: none;
+  margin-inline-start: auto;
+  color: var(--color-brand-accent-ink);
+}
+
+@media (forced-colors: active) {
+  .crewlet-kind-tile--button.is-selected .crewlet-kind-tile__frame {
+    border-color: Highlight;
+  }
+}
+
 .crewlet-kind-tile--disabled {
   cursor: not-allowed;
 }

package/dist/ArtifactMakeRow/ArtifactMakeRow.d.ts

@@ -0,0 +1,39 @@
+import { type ArtifactKind } from '../ArtifactKindGlyph/index.js';
+/** One kind a reader can start from the row. */
+export interface ArtifactMakeRowItem {
+    kind: ArtifactKind;
+    /** The kind's name, as what one makes: "Docs". */
+    label: string;
+    /** What the kind is for, in a few words under its name: "Live company figures". */
+    detail?: string | undefined;
+    /** Where starting one goes. Left out with `disabledReason`, the item starts nothing. */
+    href?: string | undefined;
+    /** Why this reader cannot start one. The item stays focusable and says so. */
+    disabledReason?: string | undefined;
+}
+export interface ArtifactMakeRowProps {
+    /** The kinds, in the order they are offered. */
+    items: readonly ArtifactMakeRowItem[];
+    /** What the row is called for assistive technology, when no heading names it. */
+    'aria-label'?: string | undefined;
+    /** The id of the heading that names the row. */
+    'aria-labelledby'?: string | undefined;
+    className?: string | undefined;
+}
+/**
+ * The kinds a reader can start, as one quiet tray above their work: each
+ * kind's glyph on its own tint, its name and what it is for, the whole item
+ * one link. A toolbar for making things rather than a hero: one line high on
+ * a wide page, the details dropped before a name is cut, and three across on
+ * a phone.
+ *
+ * THE TRAY IS A WORKBENCH, Crewlet's dotted field under the kinds the way the
+ * org chart's canvas sits under its seats, and an item lifts off it as a card
+ * under the pointer. The glyph is the one coloured thing in each item, so six
+ * hues read as six kinds and never as six coloured boxes.
+ *
+ * AN ITEM THAT CANNOT START is still a stop, so a reader moving through the
+ * row by keyboard hears why (`disabledReason`) rather than finding a kind
+ * missing.
+ */
+export declare function ArtifactMakeRow({ items, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, className, }: ArtifactMakeRowProps): import("react").JSX.Element;

package/dist/ArtifactMakeRow/index.d.ts

@@ -0,0 +1,4 @@
+import '../ArtifactKindIllustration/ArtifactKinds.css';
+import './ArtifactMakeRow.css';
+export { ArtifactMakeRow } from './ArtifactMakeRow.js';
+export type { ArtifactMakeRowItem, ArtifactMakeRowProps } from './ArtifactMakeRow.js';

package/dist/ArtifactMakeRow/index.js

@@ -0,0 +1,4 @@
+export { ArtifactMakeRow } from '../chunk-EAKC24BW.js';
+import '../chunk-CE2THTQR.js';
+import '../chunk-BZFWDIV6.js';
+import '../chunk-ODEQTPFM.js';

package/dist/ArtifactMakeRow-XBA2MPSY.css

@@ -0,0 +1,167 @@
+/*
+ * The "Start a new artifact" tray.
+ *
+ * Every colour is a token: the tray's ground, its dots and its hairlines are
+ * the surface and border steps, and each kind's mark reads the kind's own
+ * Fill, Line and Ink (`ArtifactKinds.css`), so the tray repaints with the
+ * theme and holds no colour of its own.
+ *
+ * THE TRAY SIZES ITSELF BY ITS OWN WIDTH, never the window's: it sits in a
+ * page column a sidebar narrows, so three steps are container queries on the
+ * tray. Under 560px three across in two lines; from 560px the six in one
+ * line, each its mark over its name, so a long name is never cut; from 920px
+ * the mark beside the name and what the kind is for under it.
+ */
+
+.crewlet-make-row {
+  container-type: inline-size;
+  /* A WORKBENCH: the canvas's dotted field on the sheet itself, one step
+     quieter than a canvas that pans, inside a hairline ring. */
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-lg);
+  background-color: var(--color-surface-background);
+  background-image: radial-gradient(var(--color-border-default) 1px, transparent 1.2px);
+  background-size: var(--spacing-4) var(--spacing-4);
+  background-position: calc(var(--spacing-4) / 2) calc(var(--spacing-4) / 2);
+}
+
+.crewlet-make-row__list {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: var(--spacing-1);
+  margin: 0;
+  padding: var(--spacing-1);
+  list-style: none;
+}
+
+.crewlet-make-row__cell {
+  display: flex;
+  min-width: 0;
+}
+
+.crewlet-make-row__item {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--spacing-2);
+  min-width: 0;
+  box-sizing: border-box;
+  padding: var(--spacing-3) var(--spacing-2);
+  border: 1px solid transparent;
+  border-radius: var(--radius-md);
+  color: var(--color-text-primary);
+  text-decoration: none;
+  outline: none;
+  transition:
+    background-color var(--motion-duration-fast) var(--motion-easing-out),
+    border-color var(--motion-duration-fast) var(--motion-easing-out),
+    box-shadow var(--motion-duration-fast) var(--motion-easing-out);
+}
+
+/* THE GLYPH ON ITS KIND'S TINT, the one coloured thing in the item. */
+.crewlet-make-row__mark {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border-radius: var(--radius-md);
+  background: var(--crewlet-kind-fill);
+  box-shadow: inset 0 0 0 1px var(--crewlet-kind-line);
+  color: var(--crewlet-kind-ink);
+}
+
+.crewlet-make-row__words {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  min-width: 0;
+  max-width: 100%;
+}
+
+.crewlet-make-row__name,
+.crewlet-make-row__detail {
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.crewlet-make-row__name {
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+  line-height: 1.3;
+}
+
+/* WHAT IT IS FOR is the widest step's: on a narrower tray the name alone
+   says it, and the details are kept as the item's description. */
+.crewlet-make-row__detail {
+  display: none;
+  color: var(--color-text-tertiary);
+  font-size: var(--font-size-xs);
+  line-height: 1.35;
+}
+
+@container (width >= 560px) {
+  .crewlet-make-row__list {
+    grid-template-columns: repeat(6, minmax(0, 1fr));
+  }
+
+  .crewlet-make-row__item {
+    padding: var(--spacing-2) var(--spacing-1);
+  }
+}
+
+@container (width >= 920px) {
+  .crewlet-make-row__item {
+    flex-direction: row;
+    gap: var(--spacing-3);
+    padding: var(--spacing-2);
+  }
+
+  .crewlet-make-row__words {
+    align-items: flex-start;
+  }
+
+  .crewlet-make-row__detail {
+    display: block;
+  }
+}
+
+/* AN ITEM LIFTS OFF THE BENCH under the pointer as a card: the card's
+   ground, the hairline a card is found by and the lightest shadow, and
+   nothing inside it moves. */
+a.crewlet-make-row__item:hover {
+  border-color: var(--color-border-default);
+  background-color: var(--color-surface-subtle);
+  box-shadow: var(--shadow-xs);
+}
+
+a.crewlet-make-row__item:active {
+  background-color: var(--color-surface-pressed);
+  box-shadow: none;
+}
+
+/* ON ITS OWN EDGE: an item draws a hairline once lifted, so the ring sits on
+   it rather than standing off it with a gap between two edges. */
+.crewlet-make-row__item:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: var(--size-focus-ring-inset-offset);
+}
+
+.crewlet-make-row__item--disabled {
+  cursor: not-allowed;
+}
+
+.crewlet-make-row__item--disabled .crewlet-make-row__mark,
+.crewlet-make-row__item--disabled .crewlet-make-row__words {
+  opacity: 0.55;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .crewlet-make-row__item {
+    transition: none;
+  }
+}

package/dist/ArtifactNameCell/ArtifactNameCell.d.ts

@@ -0,0 +1,37 @@
+import { type ArtifactKind } from '../ArtifactKindGlyph/index.js';
+export interface ArtifactNameCellLabels {
+    kinds: Record<ArtifactKind, string>;
+    pinned: string;
+}
+export interface ArtifactNameCellProps {
+    kind: ArtifactKind;
+    title: string;
+    /**
+     * What it is about, in a line under the title after the kind's word: the
+     * artifact's own description. Left out, the kind's word stands alone.
+     */
+    detail?: string | undefined;
+    pinned?: boolean | undefined;
+    /** It is in the trash: its mark is drawn without its kind's tint. */
+    trashed?: boolean | undefined;
+    className?: string | undefined;
+    labels?: Partial<ArtifactNameCellLabels> | undefined;
+}
+/**
+ * An artifact's name in a list: its kind's glyph on the kind's tint, the
+ * title, and under it the kind's word and what it is about.
+ *
+ * THE SAME MARK AS THE MAKE ROW'S, so a reader who started a doc from the
+ * tray finds it in the list by the same tile in the same colour, and the
+ * grid's badge and the list's mark name one kind one way. The mark is the one
+ * coloured thing on the row; the words are the text steps.
+ *
+ * TWO LINES, ONE NAME. The title is the row's name and the line under it is
+ * its description, each cut on one line with the whole of it on hover, so a
+ * list of long titles keeps one row height. The kind's word is printed rather
+ * than only drawn, which is what lets the list drop a Type column of its own.
+ *
+ * Not a link: the row it sits in is. The mark is decorative because the kind
+ * is printed beside it.
+ */
+export declare function ArtifactNameCell({ kind, title, detail, pinned, trashed, className, labels }: ArtifactNameCellProps): import("react").JSX.Element;

package/dist/ArtifactNameCell/index.d.ts

@@ -0,0 +1,4 @@
+import '../ArtifactKindIllustration/ArtifactKinds.css';
+import './ArtifactNameCell.css';
+export { ArtifactNameCell } from './ArtifactNameCell.js';
+export type { ArtifactNameCellLabels, ArtifactNameCellProps } from './ArtifactNameCell.js';

package/dist/ArtifactNameCell/index.js

@@ -0,0 +1,4 @@
+export { ArtifactNameCell } from '../chunk-P5VGSVWG.js';
+import '../chunk-CE2THTQR.js';
+import '../chunk-BZFWDIV6.js';
+import '../chunk-ODEQTPFM.js';

package/dist/ArtifactNameCell-RTVP4LO4.css

@@ -0,0 +1,104 @@
+/*
+ * An artifact's name in a list: the kind's mark on its tint, the title over
+ * one quiet line. Every colour is a token: the mark reads the kind's own Fill,
+ * Line and Ink (`ArtifactKinds.css`), the words the text steps.
+ */
+
+.crewlet-artifact-name {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-3);
+  min-width: 0;
+  max-width: 100%;
+  padding-block: var(--spacing-1);
+}
+
+/* THE MARK, the Make row's tile at a list's size: the kind's glyph on its
+   tint inside the kind's hairline. */
+.crewlet-artifact-name__mark {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  box-sizing: border-box;
+  border-radius: var(--radius-md);
+  background: var(--crewlet-kind-fill);
+  box-shadow: inset 0 0 0 1px var(--crewlet-kind-line);
+  color: var(--crewlet-kind-ink);
+  transition: box-shadow var(--motion-duration-fast) var(--motion-easing-out);
+}
+
+/* UNDER THE POINTER the row's ground moves (the row's own hover), and the
+   mark's hairline takes the kind's hue, so the one coloured thing on the row
+   answers too. No lift and no movement: a list is read down, not played. */
+:is(tr, [role='row']):hover .crewlet-artifact-name__mark {
+  box-shadow: inset 0 0 0 1px var(--crewlet-kind-hue);
+}
+
+.crewlet-artifact-name--trashed .crewlet-artifact-name__mark {
+  background: var(--color-surface-inset);
+  box-shadow: inset 0 0 0 1px var(--color-border-default);
+  color: var(--color-text-tertiary);
+}
+
+.crewlet-artifact-name__words {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+}
+
+.crewlet-artifact-name__title-row {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-1);
+  min-width: 0;
+}
+
+.crewlet-artifact-name__title {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--color-text-primary);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+  line-height: 1.35;
+}
+
+.crewlet-artifact-name__pin {
+  display: inline-flex;
+  flex: none;
+  color: var(--color-text-tertiary);
+}
+
+.crewlet-artifact-name__detail {
+  display: flex;
+  align-items: baseline;
+  gap: var(--spacing-1);
+  min-width: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  color: var(--color-text-tertiary);
+  font-size: var(--font-size-xs);
+  line-height: 1.35;
+}
+
+.crewlet-artifact-name__kind,
+.crewlet-artifact-name__dot {
+  flex: none;
+}
+
+.crewlet-artifact-name__about {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .crewlet-artifact-name__mark {
+    transition: none;
+  }
+}

package/dist/ArtifactPanel/ArtifactPanel.d.ts

@@ -26,6 +26,13 @@ export interface ArtifactPanelProps {
     onExpandedChange?: ((expanded: boolean) => void) | undefined;
     /** Controls in the head, before expand and close. */
     actions?: ReactNode;
+    /**
+     * What stays under the body however far it scrolls: the panel's own
+     * commit, such as a hand-off's Send. Drawn on a hairline at the panel's
+     * foot, never inside the scrolling body, so it is in reach while the
+     * reader is at the top of a long form.
+     */
+    footer?: ReactNode;
     /**
      * Whether focus moves to the panel's heading when it opens. True when the
      * reader opened it; false for a panel a link opened on arrival, which must
@@ -56,7 +63,7 @@ export interface ArtifactPanelProps {
  * portalled out of it, and the press that closes one of them never reaches
  * this.
  */
-export declare function ArtifactPanel({ title, icon, onClose, size, expanded, onExpandedChange, actions, focusOnOpen, labels, className, children, }: ArtifactPanelProps): import("react").JSX.Element;
+export declare function ArtifactPanel({ title, icon, onClose, size, expanded, onExpandedChange, actions, footer, focusOnOpen, labels, className, children, }: ArtifactPanelProps): import("react").JSX.Element;
 export interface ArtifactWorkspaceProps {
     /** The open panel, if any: an [ArtifactPanel]. */
     panel?: ReactNode;

package/dist/ArtifactPanel/index.js

@@ -1,4 +1,4 @@
-export { ARTIFACT_PANEL_LABELS, ArtifactPanel, ArtifactWorkspace } from '../chunk-HUVG2FFT.js';
+export { ARTIFACT_PANEL_LABELS, ArtifactPanel, ArtifactWorkspace } from '../chunk-Y5BD4MTE.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-4FQT6ZAY.js';
 import '../chunk-BZFWDIV6.js';

package/dist/{ArtifactPanel-HW3SU7CP.css → ArtifactPanel-KKUUIPEU.css}

@@ -117,6 +117,15 @@
   overscroll-behavior: contain;
 }
 
+/* THE FOOT holds the panel's own commit, outside the scrolling body, so it
+   stays in reach at every scroll. Its inset is the body's. */
+.crewlet-artifact-panel__foot {
+  flex: none;
+  padding: var(--spacing-3) var(--spacing-4);
+  border-top: 1px solid var(--color-border-default);
+  background: var(--color-surface-background);
+}
+
 /* NOT ROOM FOR TWO COLUMNS: the panel slides over the artifact's end edge,
    raised off it, rather than squeezing the artifact under a useful width. */
 @container crewlet-artifact-workspace (width < 960px) {

package/dist/AuthLayout/index.js

@@ -1,6 +1,6 @@
-export { AuthLayout } from '../chunk-VDPJGP4Q.js';
+export { AuthLayout } from '../chunk-WX2NIG4G.js';
 import '../chunk-7KBNFFM3.js';
-import '../chunk-ACA27MZH.js';
+import '../chunk-5QXRI35B.js';
 import '../chunk-AV2DXAEL.js';
 import '../chunk-BHHIIK3M.js';
 import '../chunk-PQADV6P6.js';

package/dist/AvatarPicker/index.js

@@ -1,8 +1,8 @@
-export { AvatarPicker } from '../chunk-FJJHD73S.js';
+export { AvatarPicker } from '../chunk-GYBDPCRC.js';
 import '../chunk-SUXP4OBT.js';
 import '../chunk-K3IJQNB7.js';
-import '../chunk-YEVG2X5R.js';
 import '../chunk-AYKXMIOR.js';
+import '../chunk-YEVG2X5R.js';
 import '../chunk-CCAXYHQS.js';
 import '../chunk-VL6CUNSX.js';
 import '../chunk-RKKO7QHH.js';

package/dist/Canvas/index.js

@@ -1,7 +1,7 @@
-export { CANVAS_COMPOSE_CONTEXT, CANVAS_FIT_MAX_ZOOM, CANVAS_FIT_PADDING, CANVAS_FOCUS_CONTEXT, CANVAS_MAX_ZOOM, CANVAS_MIN_ZOOM, CANVAS_PAN_MARGIN, CANVAS_PAN_STEP, CANVAS_REVEAL_PADDING, CANVAS_TAP_SLOP, CANVAS_WHEEL_LINE_PX, CANVAS_WHEEL_ZOOM_PER_PIXEL, CANVAS_ZOOM_CEILING, CANVAS_ZOOM_LIMITS, CANVAS_ZOOM_STEP, Canvas, IDENTITY_VIEW, ShortcutTip, anchorView, beyondSlop, clampPan, clampZoom, fitView, gridOf, panBy, pinchView, regionView, revealView, screenRect, toScreen, toWorld, wheelPixels, wheelZoomFactor, zoomAt, zoomLimits } from '../chunk-3P4Y5RX6.js';
+export { CANVAS_COMPOSE_CONTEXT, CANVAS_FIT_MAX_ZOOM, CANVAS_FIT_PADDING, CANVAS_FOCUS_CONTEXT, CANVAS_MAX_ZOOM, CANVAS_MIN_ZOOM, CANVAS_PAN_MARGIN, CANVAS_PAN_STEP, CANVAS_REVEAL_PADDING, CANVAS_TAP_SLOP, CANVAS_WHEEL_LINE_PX, CANVAS_WHEEL_ZOOM_PER_PIXEL, CANVAS_ZOOM_CEILING, CANVAS_ZOOM_LIMITS, CANVAS_ZOOM_STEP, Canvas, IDENTITY_VIEW, ShortcutTip, anchorView, beyondSlop, clampPan, clampZoom, fitView, gridOf, panBy, pinchView, regionView, revealView, screenRect, toScreen, toWorld, wheelPixels, wheelZoomFactor, zoomAt, zoomLimits } from '../chunk-4BYHAOHH.js';
 import '../chunk-LM3ISVJA.js';
-import '../chunk-SMBKXWML.js';
 import '../chunk-6ZJ3N7QI.js';
+import '../chunk-SMBKXWML.js';
 import '../chunk-OMV5W53A.js';
 import '../chunk-R25RGPUB.js';
 import '../chunk-OG6CL3EB.js';

package/dist/CanvasBoard/CanvasBoard.d.ts

@@ -48,9 +48,10 @@
  * are counter-scaled by the zoom, so a board's label is readable, its edge is
  * a hairline and its handle is a full pointer target whatever the zoom, while
  * the board itself scales with the canvas. What a board says is held to the
- * room it is drawn in (`boardRoom`): a name too narrow to read is not drawn,
+ * room it is drawn in: a name with too little room is shortened to a few
+ * letters, then to the board's number, and only then left out (`boardName`),
  * and a placeholder drops the lines it has no room for rather than spill them
- * over the boards beside it.
+ * over the boards beside it (`boardRoom`).
  */
 import { type ReactNode, type Ref } from 'react';
 import { type CanvasHandle, type CanvasLabels, type CanvasPoint } from '../Canvas/index.js';
@@ -215,19 +216,32 @@ export interface CanvasBoardProps {
     className?: string | undefined;
 }
 /**
- * WHAT A BOARD HAS ROOM TO SAY, from its size on screen.
- *
- * `title` is whether its name is drawn above it: a name narrower than a few
- * letters reads as a stray mark, so a board drawn narrower than
- * [BOARD_TITLE_MIN_WIDTH] goes unnamed until it is zoomed into. `lines` is how
- * many of a placeholder's two lines (its size, then why it is not running) fit
- * inside it at the chrome's own type, so the lines it has no room for are left
- * out rather than clipped at both ends.
+ * WHAT A BOARD'S PLACEHOLDER HAS ROOM TO SAY, from its size on screen: how
+ * many of its two lines (its size, then why it is not running) fit inside it
+ * at the chrome's own type, so the lines it has no room for are left out
+ * rather than clipped at both ends.
  */
 export declare function boardRoom(width: number, height: number): {
-    title: boolean;
     lines: 0 | 1 | 2;
 };
-/** The narrowest a board is drawn, in screen pixels, with its name above it. */
-export declare const BOARD_TITLE_MIN_WIDTH = 40;
+/**
+ * WHAT A BOARD IS CALLED ABOVE IT, from the room its name row has on screen
+ * (`room`, in screen pixels: the board's width, less what the row's other
+ * controls take).
+ *
+ * Its name, while at least [BOARD_NAME_MIN_CHARS] letters and an ellipsis
+ * fit, so a shortened name still says which board it is ("Hom..." rather than
+ * "H..." or a lone ellipsis); `whole` is false once the name may be shortened,
+ * so the full name can be offered as a tooltip. Narrower than that, its place
+ * in the design ("3"), which a reader can count to and which stays legible
+ * down to a single digit's width. Narrower still, nothing: a mark that narrow
+ * reads as a stray scratch. The name row is counter-scaled, so the type is the
+ * same size at every zoom and only the room changes.
+ */
+export declare function boardName(title: string, position: number, room: number): {
+    text: string;
+    whole: boolean;
+} | null;
+/** The fewest letters a shortened board name keeps before its ellipsis. */
+export declare const BOARD_NAME_MIN_CHARS = 3;
 export declare function CanvasBoard({ label, boards, notes, renderBoard, maxLive, minLiveWidth, editable, minSide, maxSide, onBoardChange, onNoteChange, onNoteRemove, onNoteCreate, onBoardCreate, onBoardRemove, onOpen, onActivate, selected: heldSelection, onSelectedChange, controlsExtra, toolbar, labels, canvasLabels, canvasRef, className, }: CanvasBoardProps): import("react").JSX.Element;

package/dist/CanvasBoard/index.d.ts

@@ -1,5 +1,5 @@
 import './CanvasBoard.css';
-export { BOARD_TITLE_MIN_WIDTH, CanvasBoard, CANVAS_BOARD_MIN_ZOOM, CANVAS_NOTE_COLORS, TITLE_GLYPH_EM, boardRoom, titleSize, } from './CanvasBoard.js';
+export { BOARD_NAME_MIN_CHARS, CanvasBoard, CANVAS_BOARD_MIN_ZOOM, CANVAS_NOTE_COLORS, TITLE_GLYPH_EM, boardName, boardRoom, titleSize, } from './CanvasBoard.js';
 export type { CanvasBoardItem, CanvasBoardLabels, CanvasBoardNote, CanvasBoardProps, CanvasBoardRect, CanvasBoardSelection, CanvasBoardTool, CanvasNoteColor, } from './CanvasBoard.js';
 export { CANVAS_BOARD_MAX_LIVE, CANVAS_BOARD_MIN_LIVE_WIDTH, liveBoards } from './budget.js';
 export type { BoardFrame } from './budget.js';