@crewlethq/ui 0.24.0 → 0.25.0

package/dist/SlideCompare-MGM3U2ME.css

@@ -0,0 +1,80 @@
+/*
+ * SlideCompare: two versions of a deck, slide by slide.
+ *
+ * A row that changed carries its change in words beside a glyph; the side a
+ * version lacks is a dashed, empty box of the slide's shape, so the pairing
+ * still reads at a glance.
+ */
+
+.crewlet-slide-compare {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-3);
+}
+
+.crewlet-slide-compare__summary {
+  margin: 0;
+  color: var(--color-text-secondary);
+  font-size: var(--font-size-sm);
+}
+
+.crewlet-slide-compare__list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-4);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.crewlet-slide-compare__head {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--spacing-2) var(--spacing-3);
+  margin-bottom: var(--spacing-2);
+}
+
+.crewlet-slide-compare__title {
+  font-weight: var(--font-weight-semibold);
+}
+
+.crewlet-slide-compare__change {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-1);
+  padding: 0 var(--spacing-2);
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-pill);
+  color: var(--color-text-secondary);
+  font-size: var(--font-size-xs);
+}
+
+.crewlet-slide-compare__sides {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: var(--spacing-3);
+}
+
+.crewlet-slide-compare__side .crewlet-slide-stage {
+  border-radius: var(--radius-sm);
+  outline: 1px solid var(--color-border-default);
+}
+
+.crewlet-slide-compare__missing {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  aspect-ratio: 16 / 9;
+  margin: 0;
+  border: 1px dashed var(--color-border-strong);
+  border-radius: var(--radius-sm);
+  color: var(--color-text-tertiary);
+  font-size: var(--font-size-sm);
+}
+
+@media (width < 640px) {
+  .crewlet-slide-compare__sides {
+    grid-template-columns: minmax(0, 1fr);
+  }
+}

package/dist/SlideFilmstrip/SlideFilmstrip.d.ts

@@ -0,0 +1,50 @@
+import { type ReactNode } from 'react';
+/** One slide as the filmstrip lists it. */
+export interface FilmstripSlide {
+    id: string;
+    /** What a reader calls it: its first heading. */
+    title: string;
+    /** Skipped when presenting; drawn dimmed here. */
+    hidden?: boolean | undefined;
+}
+export interface SlideFilmstripLabels {
+    /** The list's name. */
+    list: string;
+    /** A thumbnail's name: "Slide 4, The plan". */
+    slide: (position: number, title: string) => string;
+    hidden: string;
+    untitled: string;
+}
+export interface SlideFilmstripProps {
+    slides: readonly FilmstripSlide[];
+    /** The slide on the stage. */
+    selected: string;
+    onSelect: (id: string) => void;
+    /** Draws one slide for its thumbnail. */
+    renderSlide: (id: string) => ReactNode;
+    /**
+     * A new order, by a drag or by the arrow keys on a slide's handle. Left
+     * out, the filmstrip is read only and draws no handles.
+     */
+    onReorder?: ((ids: string[]) => void) | undefined;
+    className?: string | undefined;
+    labels?: Partial<SlideFilmstripLabels> | undefined;
+}
+/**
+ * The column of slide thumbnails beside a deck's stage: the slide on the stage
+ * marked, each one a press away, and, where the reader may edit, a handle that
+ * moves it.
+ *
+ * ONE STOP IN THE TAB ORDER for the thumbnails: each is a button marked
+ * `aria-current` when its slide is on the stage, and only that one is in the
+ * tab order; Up and Down move to the next or previous slide, Home and End to
+ * the ends, and the stage follows. A handle is its own control beside its
+ * thumbnail, since moving a slide is a different act from looking at it; its
+ * arrow keys move the slide, and the move is announced with where it landed.
+ * (A listbox would hold the handles inside its options, which a listbox may
+ * not.)
+ *
+ * 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.
+ */
+export declare function SlideFilmstrip({ slides, selected, onSelect, renderSlide, onReorder, className, labels, }: SlideFilmstripProps): import("react").JSX.Element;

package/dist/SlideFilmstrip/index.d.ts

@@ -0,0 +1,3 @@
+import './SlideFilmstrip.css';
+export { SlideFilmstrip } from './SlideFilmstrip.js';
+export type { FilmstripSlide, SlideFilmstripLabels, SlideFilmstripProps } from './SlideFilmstrip.js';

package/dist/SlideFilmstrip/index.js

@@ -0,0 +1,8 @@
+export { SlideFilmstrip } from '../chunk-KSSSFLE2.js';
+import '../chunk-KNLJL3VP.js';
+import '../chunk-XJ2QEBMM.js';
+import '../chunk-HMPFGIWM.js';
+import '../chunk-R25RGPUB.js';
+import '../chunk-RSAQOKH3.js';
+import '../chunk-BZFWDIV6.js';
+import '../chunk-ODEQTPFM.js';

package/dist/SlideFilmstrip-BCLNAHFX.css

@@ -0,0 +1,108 @@
+/*
+ * SlideFilmstrip: the column of slide thumbnails beside a deck's stage.
+ *
+ * The selected slide is ringed in the brand accent rather than filled, so its
+ * thumbnail still shows the slide's own colours.
+ */
+
+.crewlet-slide-filmstrip__list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2);
+  margin: 0;
+  padding: var(--spacing-1);
+  list-style: none;
+}
+
+.crewlet-slide-filmstrip__item {
+  display: grid;
+  grid-template-columns: var(--spacing-5) minmax(0, 1fr) auto;
+  align-items: start;
+  gap: var(--spacing-1);
+}
+
+.crewlet-slide-filmstrip__number {
+  padding-top: var(--spacing-1);
+  color: var(--color-text-tertiary);
+  font-size: var(--font-size-xs);
+  font-variant-numeric: tabular-nums;
+  text-align: right;
+}
+
+.crewlet-slide-filmstrip__thumb {
+  position: relative;
+  display: block;
+  width: 100%;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  border-radius: var(--radius-sm);
+  outline: 1px solid var(--color-border-default);
+  cursor: pointer;
+  overflow: hidden;
+}
+
+.crewlet-slide-filmstrip__thumb:hover {
+  outline-color: var(--color-border-hover);
+}
+
+.crewlet-slide-filmstrip__item[data-selected='true'] .crewlet-slide-filmstrip__thumb {
+  outline: 2px solid var(--color-brand-accent);
+}
+
+/* ONE RING, OVER THE THUMBNAIL'S OWN EDGE: the focus outline takes the place
+   of the edge rather than standing off it as a second one. */
+.crewlet-slide-filmstrip__thumb:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: var(--size-focus-ring-inset-offset);
+}
+
+.crewlet-slide-filmstrip__item[data-hidden='true'] .crewlet-slide-stage {
+  opacity: 0.45;
+}
+
+.crewlet-slide-filmstrip__hidden {
+  position: absolute;
+  right: var(--spacing-1);
+  bottom: var(--spacing-1);
+  display: inline-flex;
+  padding: var(--spacing-0);
+  border-radius: var(--radius-xs);
+  background: var(--color-surface-elevated);
+  color: var(--color-text-secondary);
+}
+
+.crewlet-slide-filmstrip__handle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: var(--size-target-min);
+  min-height: var(--size-target-min);
+  padding: 0;
+  border: 0;
+  border-radius: var(--radius-sm);
+  background: transparent;
+  color: var(--color-text-tertiary);
+  cursor: grab;
+}
+
+.crewlet-slide-filmstrip__handle:hover {
+  background: var(--color-surface-hover);
+}
+
+.crewlet-slide-filmstrip__handle:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: var(--size-focus-ring-inset-offset);
+}
+
+.crewlet-slide-filmstrip__item[data-reorder='dragging'] {
+  opacity: 0.4;
+}
+
+.crewlet-slide-filmstrip__item[data-reorder-target='before'] .crewlet-slide-filmstrip__thumb {
+  box-shadow: 0 calc(var(--spacing-1) * -1) 0 var(--color-brand-accent);
+}
+
+.crewlet-slide-filmstrip__item[data-reorder-target='after'] .crewlet-slide-filmstrip__thumb {
+  box-shadow: 0 var(--spacing-1) 0 var(--color-brand-accent);
+}

package/dist/SlideGrid/SlideGrid.d.ts

@@ -0,0 +1,32 @@
+import type { ReactNode } from 'react';
+import type { FilmstripSlide } from '../SlideFilmstrip/index.js';
+/** A run of the deck's outline and the slides it holds, in order. */
+export interface SlideGridSection {
+    /** The section's sentence; empty for slides before the first section. */
+    title: string;
+    slides: readonly FilmstripSlide[];
+}
+export interface SlideGridLabels {
+    slide: (position: number, title: string) => string;
+    hidden: string;
+    untitled: string;
+}
+export interface SlideGridProps {
+    sections: readonly SlideGridSection[];
+    renderSlide: (id: string) => ReactNode;
+    /** Open a slide: the editor's stage, or Present from it. */
+    onOpen: (id: string) => void;
+    /** The slide to mark as current, if any. */
+    current?: string | undefined;
+    className?: string | undefined;
+    labels?: Partial<SlideGridLabels> | undefined;
+}
+/**
+ * Every slide of a deck at once, laid out by its outline's sections: the view
+ * for finding a slide, checking the rhythm of a deck, or reviewing it whole.
+ *
+ * NUMBERED ACROSS THE DECK, not within a section, since a presenter says
+ * "slide 7" whatever section it sits in. Each card is a button naming its
+ * slide, so the grid is a list of choices to a screen reader.
+ */
+export declare function SlideGrid({ sections, renderSlide, onOpen, current, className, labels }: SlideGridProps): import("react").JSX.Element;

package/dist/SlideGrid/index.d.ts

@@ -0,0 +1,3 @@
+import './SlideGrid.css';
+export { SlideGrid } from './SlideGrid.js';
+export type { SlideGridLabels, SlideGridProps, SlideGridSection } from './SlideGrid.js';

package/dist/SlideGrid/index.js

@@ -0,0 +1,5 @@
+export { SlideGrid } from '../chunk-Q4A5CGUB.js';
+import '../chunk-KNLJL3VP.js';
+import '../chunk-HMPFGIWM.js';
+import '../chunk-R25RGPUB.js';
+import '../chunk-ODEQTPFM.js';

package/dist/SlideGrid-RT6QEQEE.css

@@ -0,0 +1,82 @@
+/*
+ * SlideGrid: every slide of a deck at once, by its outline's sections.
+ */
+
+.crewlet-slide-grid {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-6);
+}
+
+.crewlet-slide-grid__heading {
+  margin: 0 0 var(--spacing-3);
+  color: var(--color-text-secondary);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-semibold);
+}
+
+.crewlet-slide-grid__list {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
+  gap: var(--spacing-4);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.crewlet-slide-grid__card {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2);
+  width: 100%;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+
+.crewlet-slide-grid__card .crewlet-slide-stage {
+  border-radius: var(--radius-sm);
+  outline: 1px solid var(--color-border-default);
+}
+
+.crewlet-slide-grid__card:hover .crewlet-slide-stage {
+  outline-color: var(--color-border-hover);
+}
+
+.crewlet-slide-grid__card[aria-current='true'] .crewlet-slide-stage {
+  outline: 2px solid var(--color-brand-accent);
+}
+
+/* ONE RING, round the whole card (its slide and its caption), on the inset
+   offset so it does not stand off the slide's own edge as a second line. */
+.crewlet-slide-grid__card:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: var(--size-focus-ring-inset-offset);
+}
+
+.crewlet-slide-grid__card[data-hidden='true'] .crewlet-slide-stage {
+  opacity: 0.45;
+}
+
+.crewlet-slide-grid__caption {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  color: var(--color-text-secondary);
+  font-size: var(--font-size-xs);
+}
+
+.crewlet-slide-grid__number {
+  color: var(--color-text-tertiary);
+  font-variant-numeric: tabular-nums;
+}
+
+.crewlet-slide-grid__title {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

package/dist/SlideStage/SlideStage.d.ts

@@ -0,0 +1,47 @@
+import { type ReactNode } from 'react';
+/** A presentation's stage: 1920 by 1080 CSS pixels, 16:9. */
+export declare const SLIDE_WIDTH = 1920;
+export declare const SLIDE_HEIGHT = 1080;
+/**
+ * How a stage fills its box.
+ *
+ * - `width`: as wide as its container, as tall as 16:9 makes it. A filmstrip
+ *   thumbnail, a grid card, the editor's slide.
+ * - `contain`: as large as fits inside its container both ways, centred, the
+ *   rest letterboxed. Present, full screen.
+ */
+export type SlideStageFit = 'width' | 'contain';
+export interface SlideStageProps {
+    /** The slide, laid out at the stage's own size (1920 by 1080 by default). */
+    children: ReactNode;
+    /** The slide's accessible name: "Slide 4 of 12, The plan". */
+    label: string;
+    fit?: SlideStageFit | undefined;
+    /**
+     * A fixed scale instead of one measured from the box: print, where the page
+     * is known and a measurement taken on screen would be the wrong one.
+     */
+    scale?: number | undefined;
+    /** The stage's own size, for a format other than 16:9 at 1920. */
+    width?: number | undefined;
+    height?: number | undefined;
+    className?: string | undefined;
+}
+/**
+ * A slide drawn at its authored size and scaled to whatever box it is given.
+ *
+ * ONE LAYOUT AT EVERY SIZE. A slide is authored on a fixed 1920 by 1080 stage,
+ * with pixel font sizes and pinned positions, so it is laid out at exactly that
+ * size and then scaled as a whole: a thumbnail, the editor and a projector all
+ * show the same line breaks. Reflowing it to the box would move every pinned
+ * element relative to the text beside it.
+ *
+ * MEASURED, NOT GUESSED: the scale is the box's own size over the stage's,
+ * read whenever the box resizes, so a filmstrip that narrows or a window that
+ * goes full screen redraws at the new size. A `scale` given outright is used
+ * as is, for print.
+ *
+ * A GROUP NAMED AS A SLIDE, so a screen reader announces "slide" with its
+ * name and reads its text in source order, which is the slide's reading order.
+ */
+export declare function SlideStage({ children, label, fit, scale, width, height, className, }: SlideStageProps): import("react").JSX.Element;

package/dist/SlideStage/index.d.ts

@@ -0,0 +1,5 @@
+import './SlideStage.css';
+export { SlideStage, SLIDE_WIDTH, SLIDE_HEIGHT } from './SlideStage.js';
+export type { SlideStageFit, SlideStageProps } from './SlideStage.js';
+export { useSlideKeys } from './useSlideKeys.js';
+export type { SlideKeys } from './useSlideKeys.js';

package/dist/SlideStage/index.js

@@ -0,0 +1,4 @@
+export { SLIDE_HEIGHT, SLIDE_WIDTH, SlideStage, useSlideKeys } from '../chunk-KNLJL3VP.js';
+import '../chunk-HMPFGIWM.js';
+import '../chunk-R25RGPUB.js';
+import '../chunk-ODEQTPFM.js';

package/dist/SlideStage/useSlideKeys.d.ts

@@ -0,0 +1,21 @@
+export interface SlideKeys {
+    onNext: () => void;
+    onPrevious: () => void;
+    onFirst?: (() => void) | undefined;
+    onLast?: (() => void) | undefined;
+    /** Escape: leave the show. */
+    onExit?: (() => void) | undefined;
+    /** Listen only while the show is on. */
+    enabled?: boolean | undefined;
+}
+/**
+ * The keys every presentation answers, the ones a clicker sends too: Right,
+ * Down, Page Down, Space and Enter go forward; Left, Up, Page Up and Backspace
+ * go back; Home and End go to the ends; Escape leaves.
+ *
+ * AT THE DOCUMENT, because a show has no field to focus and a clicker sends
+ * its key wherever focus is. A key a field is typing, a composition is using,
+ * or a nearer surface (a menu, a dialog) already handled is left alone, and
+ * modified keys are the browser's.
+ */
+export declare function useSlideKeys({ onNext, onPrevious, onFirst, onLast, onExit, enabled }: SlideKeys): void;

package/dist/SlideStage-XIOTMMRU.css

@@ -0,0 +1,32 @@
+/*
+ * SlideStage: a slide laid out at its authored size and scaled to its box.
+ *
+ * The box clips: a pinned element authored past the stage's edge is cut there,
+ * as it is on a projector, rather than spilling over the next thumbnail.
+ */
+
+.crewlet-slide-stage {
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  background: var(--color-surface-inset);
+}
+
+.crewlet-slide-stage--contain {
+  height: 100%;
+}
+
+.crewlet-slide-stage__frame {
+  position: absolute;
+  top: 0;
+  left: 0;
+  transform-origin: 0 0;
+  overflow: hidden;
+}
+
+@media print {
+  .crewlet-slide-stage {
+    break-inside: avoid;
+    background: transparent;
+  }
+}

package/dist/Switcher/index.js

@@ -1,10 +1,10 @@
-export { Switcher } from '../chunk-KG6XRG5Z.js';
+export { Switcher } from '../chunk-5OY4LJFH.js';
 import '../chunk-W5J7R5EB.js';
 import '../chunk-F4DPAJCN.js';
 import '../chunk-F73MC7EZ.js';
+import '../chunk-FYTIJM2T.js';
 import '../chunk-6QFAK2WV.js';
 import '../chunk-BWRGFKJP.js';
-import '../chunk-FYTIJM2T.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-IG75YMUN.js';
 import '../chunk-OG6CL3EB.js';

package/dist/TableCells/index.js

@@ -1,7 +1,7 @@
-export { TABLE_TAGS_CELL_LABELS, TableDateCell, TableEntityCell, TableKeyCell, TableNumberCell, TableStatusCell, TableTagsCell, TableTextCell } from '../chunk-MUGM7SEG.js';
+export { TABLE_TAGS_CELL_LABELS, TableDateCell, TableEntityCell, TableKeyCell, TableNumberCell, TableStatusCell, TableTagsCell, TableTextCell } from '../chunk-LFNUH4GY.js';
+import '../chunk-FBSEJO2C.js';
 import '../chunk-GFV4LJHH.js';
 import '../chunk-WIATRXEJ.js';
-import '../chunk-FBSEJO2C.js';
 import '../chunk-3CZ7XAVY.js';
 import '../chunk-EUCC37WY.js';
 import '../chunk-UAN5NE7M.js';

package/dist/Tabs/index.js

@@ -1,5 +1,5 @@
-export { TabPanel, Tabs, tabId } from '../chunk-XJFOOXCF.js';
-import '../chunk-CBOICT64.js';
+export { TabPanel, Tabs, tabId } from '../chunk-HJEVSQN6.js';
+import '../chunk-RKKO7QHH.js';
 import '../chunk-BHHIIK3M.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/Tabs/roving.d.ts

@@ -71,5 +71,6 @@ export declare function useRoving(count: number, select: ((index: number) => voi
     buttons: import("react").RefObject<(HTMLButtonElement | null)[]>;
     onKeyDown: (event: KeyboardEvent<HTMLElement>, vertical: boolean) => void;
     onFocusAt: (index: number) => void;
+    reset: () => void;
     focused: number | null;
 };

package/dist/TagGroup/TagGroup.d.ts

@@ -13,8 +13,23 @@ export interface TagGroupProps {
      * thirty-six service accounts.
      */
     max?: number | undefined;
+    /**
+     * What happens to the tags that do not fit.
+     *
+     * `expand` (the default) folds everything past `max` behind a "+N more"
+     * button that shows them in place.
+     *
+     * `fit` keeps the group on ONE LINE in whatever width it is given: the tags
+     * that would wrap are left out and counted in a static "+N" chip, so a tag is
+     * never cut mid-glyph by the box it sits in. It is for a dense row (a sheet
+     * cell, a table) where a button per row would be a tab stop per row; the
+     * group's name still says how many there are.
+     */
+    overflow?: 'expand' | 'fit' | undefined;
     /** The overflow control's label. */
     moreLabel?: ((hidden: number) => string) | undefined;
+    /** The `fit` count chip's text. */
+    countLabel?: ((hidden: number) => string) | undefined;
     /** What is said once the rest are shown. */
     expandedMessage?: ((total: number) => string) | undefined;
     className?: string | undefined;
@@ -38,4 +53,4 @@ export interface TagGroupProps {
  * expansion still works and the announcer says loudly that nothing was said,
  * which is the point of it being one region rather than one per component.
  */
-export declare function TagGroup({ label, max, moreLabel, expandedMessage, className, children, }: TagGroupProps): import("react").JSX.Element;
+export declare function TagGroup({ label, max, overflow, moreLabel, countLabel, expandedMessage, className, children, }: TagGroupProps): import("react").JSX.Element;

package/dist/TagGroup/index.js

@@ -1,4 +1,4 @@
-export { TagGroup } from '../chunk-E6UWRXNM.js';
+export { TagGroup } from '../chunk-O2EGEONV.js';
 import '../chunk-RSAQOKH3.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{TagGroup-BCQZD7ZD.css → TagGroup-NAXTJHDS.css}

@@ -25,6 +25,28 @@
   outline-offset: 2px;
 }
 
+/* ONE LINE (overflow="fit"): what wraps is measured and left out, so the
+   line is clipped only for the instant before the count replaces it. */
+.crewlet-tag-group--fit {
+  flex-wrap: wrap;
+  overflow: hidden;
+  max-height: max(24px, calc(24px * var(--density, 1)));
+}
+
+.crewlet-tag-group__count {
+  display: inline-flex;
+  align-items: center;
+  height: max(20px, calc(20px * var(--density, 1)));
+  padding: 0 var(--spacing-1);
+  border-radius: var(--radius-xs);
+  background: var(--color-surface-subtle);
+  color: var(--color-text-secondary);
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-2xs);
+  font-weight: var(--font-weight-medium);
+  white-space: nowrap;
+}
+
 .crewlet-tag-group__item {
   display: inline-flex;
   min-width: 0;

package/dist/ThemeGallery/index.js

@@ -1,6 +1,6 @@
-export { ThemeGallery } from '../chunk-KLIEPFEZ.js';
+export { ThemeGallery } from '../chunk-C2FRTWKO.js';
 import '../chunk-MNFU2RNT.js';
 import '../chunk-F73MC7EZ.js';
-import '../chunk-CBOICT64.js';
+import '../chunk-RKKO7QHH.js';
 import '../chunk-R25RGPUB.js';
 import '../chunk-ODEQTPFM.js';

package/dist/ThemeSwitcher/index.js

@@ -1,10 +1,10 @@
-export { DensitySwitcher, ThemeSwitcher } from '../chunk-IPM2E6UI.js';
+export { DensitySwitcher, ThemeSwitcher } from '../chunk-WJDQ7XQA.js';
 export { applyStoredPreferences, resolveTheme, useDensityPreference, useSystemTheme, useThemePreference } from '../chunk-Z24ZUSTX.js';
-import '../chunk-M54K52ZU.js';
+import '../chunk-FQCLKD7U.js';
 export { DENSITY_PREFERENCES, PALETTE_ID, THEME_PREFERENCES, applyDensity, applyPalette, applyTheme, isDensityPreference, isPaletteId, isThemePreference } from '../chunk-ZXXDZJQN.js';
-import '../chunk-7QL2OFP6.js';
-import '../chunk-XJFOOXCF.js';
-import '../chunk-CBOICT64.js';
+import '../chunk-RCQXUT5K.js';
+import '../chunk-HJEVSQN6.js';
+import '../chunk-RKKO7QHH.js';
 import '../chunk-BHHIIK3M.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/TreeCanvas/index.js

@@ -1,6 +1,6 @@
-export { TreeCanvas } from '../chunk-TBIZSQHB.js';
+export { TreeCanvas } from '../chunk-RSC7UJCR.js';
 import '../chunk-MY374UUD.js';
-import '../chunk-TXAFKH2A.js';
+import '../chunk-KZOGQXSP.js';
 import '../chunk-VYOKRN2I.js';
 import '../chunk-OG6CL3EB.js';
 import '../chunk-HMPFGIWM.js';

package/dist/VersionCompare/VersionCompare.d.ts

@@ -43,6 +43,13 @@ export interface VersionCompareProps {
     from?: ReactNode;
     /** The newer version, drawn for the versions lens. With `from` left out it is drawn alone. */
     to?: ReactNode;
+    /**
+     * The versions lens, drawn by the host in place of the two panes: content
+     * compared item by item, where two independent panes could not line the
+     * items up (a deck's slides, paired by id, with added and removed ones in
+     * place).
+     */
+    versions?: ReactNode;
     /** A sentence over the versions lens: "Both versions show today's data." */
     note?: ReactNode;
     /** Controls at the end of the head, after the lens switch: "Back to the page". */
@@ -67,4 +74,4 @@ export interface VersionCompareProps {
  * A LENS THAT CANNOT BE DRAWN IS ABSENT, not offered and then empty: a first
  * version has nothing to compare with, and a sheet has no side by side.
  */
-export declare function VersionCompare({ fromLabel, toLabel, title, description, lens, onLensChange, before, after, changes, context, from, to, note, actions, labels: overrides, className, }: VersionCompareProps): import("react").JSX.Element;
+export declare function VersionCompare({ fromLabel, toLabel, title, description, lens, onLensChange, before, after, changes, context, from, to, versions, note, actions, labels: overrides, className, }: VersionCompareProps): import("react").JSX.Element;