@crewlethq/ui 0.26.0 → 0.27.0

package/README.md

@@ -204,6 +204,16 @@ places:
 - A surface that pans or zooms dispatches `LAYER_REPOSITION_EVENT` on its host
   when the content beneath it moves, and every panel anchored inside follows.
 
+## Changes in 0.27.0
+
+**`SlideStage` presents in the page with `fit="view"`.** A slide presented inside a page sits below a title, a description and tabs, so a stage as tall as its column ran past the foot of the window and hid the bottom of the slide and the controls under it. A `view` stage letterboxes its slide as `contain` does, in a box whose height is measured: the room from the top of the stage's parent (the show: the stage and its controls) to the foot of its scrollport, less what else the parent holds and its `scroll-margin-bottom`, or the slide's height at the stage's width if that is less. The room is measured with the scrollport at its top, so it does not change as the reader scrolls, and again whenever the view, the show or the stage is resized. A show too low on the page to get half of what it asks takes the scrollport's whole height and is scrolled into view, clear of its `scroll-margin-top`. In full screen the stage fills its box, sharing a flex column with the show's controls.
+
+What to change:
+
+- A show presented in the page uses `fit="view"` in place of a box sized from the window's height, and lets the show's own height follow its content.
+- The show sets `scroll-margin-top` to the height of anything sticky over the view, and `scroll-margin-bottom` to the gap it keeps from the foot of the view.
+- `fit="contain"` is unchanged, for a box whose height the host already decides.
+
 ## Changes in 0.26.0
 
 **`@crewlethq/artifact-kit` binds a page's sheet to the runtime the engine serves**, `window.crewlet` contract 1.0 (the engine's `docs/reference/artifact-runtime.md`). The kit was written against a runtime the engine never served: it asked for a `data` capability the runtime calls `db`, so every page's sheet said it could not load, and it called methods the runtime does not have. The sheet now:

package/dist/PresenterView/index.js

@@ -1,5 +1,5 @@
-export { PresenterView, formatStopwatch } from '../chunk-HONZQ4UR.js';
-import '../chunk-KNLJL3VP.js';
+export { PresenterView, formatStopwatch } from '../chunk-CTHM6YSJ.js';
+import '../chunk-VCRFFIYI.js';
 import '../chunk-OG6CL3EB.js';
 import '../chunk-HMPFGIWM.js';
 import '../chunk-R25RGPUB.js';

package/dist/SlideCompare/index.js

@@ -1,5 +1,5 @@
-export { SLIDE_COMPARE_LABELS, SlideCompare } from '../chunk-Z54BPRL6.js';
-import '../chunk-KNLJL3VP.js';
+export { SLIDE_COMPARE_LABELS, SlideCompare } from '../chunk-33Z2SEDQ.js';
+import '../chunk-VCRFFIYI.js';
 import '../chunk-OG6CL3EB.js';
 import '../chunk-HMPFGIWM.js';
 import '../chunk-R25RGPUB.js';

package/dist/SlideFilmstrip/index.js

@@ -1,5 +1,5 @@
-export { SlideFilmstrip } from '../chunk-KSSSFLE2.js';
-import '../chunk-KNLJL3VP.js';
+export { SlideFilmstrip } from '../chunk-UOPHR5CE.js';
+import '../chunk-VCRFFIYI.js';
 import '../chunk-XJ2QEBMM.js';
 import '../chunk-HMPFGIWM.js';
 import '../chunk-R25RGPUB.js';

package/dist/SlideGrid/index.js

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

package/dist/SlideStage/SlideStage.d.ts

@@ -9,8 +9,11 @@ export declare const SLIDE_HEIGHT = 1080;
  *   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.
+ * - `view`: Present in the page. As `contain`, in a box as tall as lets the
+ *   stage's parent (the show: the stage and its controls) be seen whole, from
+ *   its top to the foot of the view; in full screen, the whole box.
  */
-export type SlideStageFit = 'width' | 'contain';
+export type SlideStageFit = 'width' | 'contain' | 'view';
 export interface SlideStageProps {
     /** The slide, laid out at the stage's own size (1920 by 1080 by default). */
     children: ReactNode;
@@ -36,6 +39,14 @@ export interface SlideStageProps {
  * show the same line breaks. Reflowing it to the box would move every pinned
  * element relative to the text beside it.
  *
+ * SEEN WHOLE IN THE PAGE (`fit="view"`): the stage's height is measured too,
+ * as the room from its parent's top to the foot of the scrollport less what
+ * else the parent holds, or the slide's height at the stage's width if that
+ * is less, so the slide's foot and the controls under it are never below the
+ * fold. A parent too low on the page to get half of that takes the whole view
+ * and is scrolled to, clear of its `scroll-margin-top` and
+ * `scroll-margin-bottom`. The parent's height follows its content.
+ *
  * 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

package/dist/SlideStage/fitInView.d.ts

@@ -0,0 +1,38 @@
+import { type RefObject } from 'react';
+/**
+ * How tall a `fit="view"` stage may be so that its show is seen whole.
+ *
+ * THE SHOW IS THE STAGE'S PARENT: the stage and whatever the parent sets
+ * around it (a count, Previous and Next), all of which must be on screen
+ * together. No length in a stylesheet can say how tall that may be, because it
+ * is the view's height less whatever the page sets above the show (a title, a
+ * description, tabs), and that wraps differently on every window. So it is
+ * MEASURED, after layout and again whenever the view, the show or the stage
+ * is resized.
+ *
+ * The show asks for the stage at its full width plus the rest of the show, and
+ * is given that or the room from its top to the foot of its scrollport,
+ * measured with the scrollport at its top, whichever is less. When that room
+ * would shrink it below half of what it asks, it is too low on the page to be
+ * read there: it takes the scrollport's whole height instead and is scrolled
+ * into view. The show's `scroll-margin-top` and `scroll-margin-bottom` are
+ * kept clear, so a sticky bar over the view and the page's own foot are never
+ * covered.
+ */
+export interface StageFit {
+    /** The stage's height, in CSS pixels. */
+    height: number;
+    /** Whether the show only fits once it is scrolled into view. */
+    scroll: boolean;
+}
+/** The nearest ancestor that scrolls vertically, or null when the window does. */
+export declare function scrollportOf(el: Element): HTMLElement | null;
+/** The fit of `stage`, whose slide is `ratio` (height over width) of its width. */
+export declare function fitInView(stage: HTMLElement, ratio: number): StageFit;
+/**
+ * The height a `fit="view"` stage takes, or null when it is not measured: off,
+ * not yet laid out, or in full screen, where the stage fills its box. A show
+ * that only fits once scrolled into view is scrolled there when it is first
+ * measured.
+ */
+export declare function useFitInView(stage: RefObject<HTMLElement | null>, enabled: boolean, ratio: number): number | null;

package/dist/SlideStage/index.js

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

package/dist/{SlideStage-XIOTMMRU.css → SlideStage-KGRRALXR.css}

@@ -16,6 +16,22 @@
   height: 100%;
 }
 
+/* Until it is measured, and wherever it is not (no layout), a view stage is
+   its slide's shape at its width. In full screen it fills the box, sharing a
+   flex column with the show's controls. */
+.crewlet-slide-stage--view {
+  flex: none;
+  aspect-ratio: var(--crewlet-slide-stage-ratio, 16 / 9);
+}
+
+:fullscreen .crewlet-slide-stage--view,
+.crewlet-slide-stage--view:fullscreen {
+  flex: 1 1 0;
+  min-height: 0;
+  height: 100%;
+  aspect-ratio: auto;
+}
+
 .crewlet-slide-stage__frame {
   position: absolute;
   top: 0;

package/dist/{chunk-Z54BPRL6.js → chunk-33Z2SEDQ.js}

@@ -1,4 +1,4 @@
-import { SlideStage } from './chunk-KNLJL3VP.js';
+import { SlideStage } from './chunk-VCRFFIYI.js';
 import { Button } from './chunk-OG6CL3EB.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './SlideCompare-MGM3U2ME.css';

package/dist/{chunk-HONZQ4UR.js → chunk-CTHM6YSJ.js}

@@ -1,4 +1,4 @@
-import { SlideStage } from './chunk-KNLJL3VP.js';
+import { SlideStage } from './chunk-VCRFFIYI.js';
 import { Button } from './chunk-OG6CL3EB.js';
 import { IconButton } from './chunk-4FQT6ZAY.js';
 import { cx } from './chunk-ODEQTPFM.js';

package/dist/{chunk-Q4A5CGUB.js → chunk-TD2MIINY.js}

@@ -1,4 +1,4 @@
-import { SlideStage } from './chunk-KNLJL3VP.js';
+import { SlideStage } from './chunk-VCRFFIYI.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './SlideGrid-RT6QEQEE.css';
 import { EyeOffGlyph } from '@crewlethq/icons/glyphs';

package/dist/{chunk-KSSSFLE2.js → chunk-UOPHR5CE.js}

@@ -1,4 +1,4 @@
-import { SlideStage } from './chunk-KNLJL3VP.js';
+import { SlideStage } from './chunk-VCRFFIYI.js';
 import { useReorder } from './chunk-XJ2QEBMM.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';

package/dist/{chunk-KNLJL3VP.js → chunk-VCRFFIYI.js}

@@ -1,9 +1,71 @@
 import { isComposing } from './chunk-R25RGPUB.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './SlideStage-XIOTMMRU.css';
+import './SlideStage-KGRRALXR.css';
 import { useRef, useState, useLayoutEffect, useEffect } from 'react';
 import { jsx } from 'react/jsx-runtime';
 
+function scrollportOf(el) {
+  for (let p = el.parentElement; p; p = p.parentElement) {
+    if (/^(auto|scroll)$/.test(getComputedStyle(p).overflowY)) return p;
+  }
+  return null;
+}
+var px = (value) => {
+  const n = parseFloat(value);
+  return Number.isFinite(n) ? n : 0;
+};
+function fitInView(stage, ratio) {
+  const show = stage.parentElement ?? stage;
+  const port = scrollportOf(show);
+  const box = show.getBoundingClientRect();
+  const top = port ? box.top - port.getBoundingClientRect().top - port.clientTop + port.scrollTop : box.top + window.scrollY;
+  const view = port ? port.clientHeight : document.documentElement.clientHeight;
+  const margins = getComputedStyle(show);
+  const above = px(margins.scrollMarginTop);
+  const below = px(margins.scrollMarginBottom);
+  const rest = show === stage ? 0 : Math.max(0, show.offsetHeight - stage.offsetHeight);
+  const need = stage.clientWidth * ratio + rest;
+  const room = view - top - below;
+  const scroll = room < need / 2;
+  const height = Math.min(need, scroll ? view - above - below : room);
+  return { height: Math.max(0, height - rest), scroll };
+}
+function inFullscreen(el) {
+  const full = typeof document === "undefined" ? null : document.fullscreenElement;
+  return !!full && full.contains(el);
+}
+function useFitInView(stage, enabled, ratio) {
+  const [height, setHeight] = useState(null);
+  useLayoutEffect(() => {
+    const el = stage.current;
+    if (!el || !enabled) return void 0;
+    let first = true;
+    const measure = () => {
+      if (inFullscreen(el)) {
+        setHeight(null);
+        return;
+      }
+      const fit = fitInView(el, ratio);
+      setHeight(Math.floor(fit.height));
+      if (first && fit.scroll) (el.parentElement ?? el).scrollIntoView?.({ block: "start" });
+      first = false;
+    };
+    measure();
+    document.addEventListener("fullscreenchange", measure);
+    if (typeof ResizeObserver === "undefined") {
+      return () => document.removeEventListener("fullscreenchange", measure);
+    }
+    const watch = new ResizeObserver(measure);
+    watch.observe(el);
+    if (el.parentElement) watch.observe(el.parentElement);
+    watch.observe(scrollportOf(el) ?? document.documentElement);
+    return () => {
+      watch.disconnect();
+      document.removeEventListener("fullscreenchange", measure);
+    };
+  }, [stage, enabled, ratio]);
+  return enabled ? height : null;
+}
 var SLIDE_WIDTH = 1920;
 var SLIDE_HEIGHT = 1080;
 function SlideStage({
@@ -16,6 +78,7 @@ function SlideStage({
   className
 }) {
   const box = useRef(null);
+  const viewHeight = useFitInView(box, fit === "view" && scale === void 0, height / width);
   const [measured, setMeasured] = useState({
     scale: 0,
     left: 0,
@@ -27,7 +90,7 @@ function SlideStage({
     const read = () => {
       const w = el.clientWidth;
       const h = el.clientHeight;
-      if (fit === "contain") {
+      if (fit !== "width") {
         const s2 = Math.min(w / width, h / height);
         setMeasured({ scale: s2, left: (w - width * s2) / 2, top: (h - height * s2) / 2 });
       } else {
@@ -39,9 +102,12 @@ function SlideStage({
     const observer = new ResizeObserver(read);
     observer.observe(el);
     return () => observer.disconnect();
-  }, [fit, scale, width, height]);
+  }, [fit, scale, width, height, viewHeight]);
   const s = scale ?? measured.scale;
-  const boxStyle = fit === "width" || scale !== void 0 ? { aspectRatio: `${width} / ${height}`, ...scale !== void 0 ? { width: width * scale } : {} } : {};
+  const boxStyle = fit === "width" || scale !== void 0 ? { aspectRatio: `${width} / ${height}`, ...scale !== void 0 ? { width: width * scale } : {} } : fit === "view" ? {
+    "--crewlet-slide-stage-ratio": `${width} / ${height}`,
+    ...viewHeight !== null ? { height: viewHeight } : {}
+  } : {};
   const frameStyle = {
     width,
     height,

package/dist/generated/index.js

@@ -11,47 +11,48 @@ export { Text } from '../chunk-IKBK4A5O.js';
 export { ThemeGallery } from '../chunk-C2FRTWKO.js';
 export { ThemeSwatch } from '../chunk-MNFU2RNT.js';
 export { DensitySwitcher, ThemeSwitcher } from '../chunk-WJDQ7XQA.js';
+export { DEFAULT_TIME_WINDOW_LABELS, TIME_WINDOW_SPANS, TimeWindowPicker, describeTimeWindow, isTimeWindowSet, parseTimeWindowDuration, resolveTimeWindow, timeWindowMatchesPreset } from '../chunk-LREN6TUG.js';
 export { ThemeToggle } from '../chunk-NP2C4Y4E.js';
 export { applyStoredPreferences, resolveTheme, useDensityPreference, useSystemTheme, useThemePreference } from '../chunk-Z24ZUSTX.js';
-export { DEFAULT_TIME_WINDOW_LABELS, TIME_WINDOW_SPANS, TimeWindowPicker, describeTimeWindow, isTimeWindowSet, parseTimeWindowDuration, resolveTimeWindow, timeWindowMatchesPreset } from '../chunk-LREN6TUG.js';
 export { Stepper } from '../chunk-5QWIJSQM.js';
 export { Switcher } from '../chunk-5OY4LJFH.js';
 export { Table } from '../chunk-V2N3BMOT.js';
 export { TABLE_TAGS_CELL_LABELS, TableDateCell, TableEntityCell, TableKeyCell, TableNumberCell, TableStatusCell, TableTagsCell, TableTextCell } from '../chunk-LFNUH4GY.js';
-export { NavGroup, NavItem, SidebarNav } from '../chunk-UCCC7YVZ.js';
-export { SLIDE_COMPARE_LABELS, SlideCompare } from '../chunk-Z54BPRL6.js';
-export { SlideFilmstrip } from '../chunk-KSSSFLE2.js';
-export { SlideGrid } from '../chunk-Q4A5CGUB.js';
+export { SLIDE_COMPARE_LABELS, SlideCompare } from '../chunk-33Z2SEDQ.js';
+export { SegmentedMeter, segmentedMeterLabel } from '../chunk-4AK52VHB.js';
+export { SlideFilmstrip } from '../chunk-UOPHR5CE.js';
+export { SlideGrid } from '../chunk-TD2MIINY.js';
 export { StatCard } from '../chunk-IKB6HFGK.js';
 export { StatGroup } from '../chunk-JXRI5YD2.js';
-export { SearchTrigger } from '../chunk-6DRDCT22.js';
-export { SegmentedMeter, segmentedMeterLabel } from '../chunk-4AK52VHB.js';
+export { Section } from '../chunk-FAQGGX2Z.js';
 export { ARTIFACT_ROLES, SHAREABLE_ROLES, ShareDialog, roleAtLeast } from '../chunk-URUGEAFB.js';
 export { Select } from '../chunk-FC4YTTFJ.js';
 export { CellDisplay, CellEditor, CheckboxCell, DateCell, LongTextCell, MultiSelectCell, NumberCell, PersonCell, RatingCell, SelectCell, SheetCell, SheetGrid, StatusCell, TextCell, UrlCell } from '../chunk-INTEH4F3.js';
 export { TagGroup } from '../chunk-O2EGEONV.js';
 export { matchesShortcut, useShortcut } from '../chunk-2FPENTCF.js';
-export { PrincipalPicker } from '../chunk-ZITJKF6Z.js';
+export { NavGroup, NavItem, SidebarNav } from '../chunk-UCCC7YVZ.js';
 export { Prose } from '../chunk-JCSA3XVH.js';
+export { PresenceStack } from '../chunk-ODT5H4MN.js';
 export { QR_DARK, QR_LIGHT, QR_QUIET_ZONE, QrCode, qrModulePath, qrModules } from '../chunk-Y56FM3K4.js';
 export { ReadingPane, ReadingPaneByline, ReadingPaneLead, ReadingPaneOutcome, ReadingPaneQuote, ReadingPaneReasoning, ReadingPaneSection, ReadingPaneTitle } from '../chunk-ZAJHGDAW.js';
 export { FRAME_HELLO_TIMEOUT_MS, SandboxedFrame } from '../chunk-VYDFB6PJ.js';
 export { Skeleton } from '../chunk-W5J7R5EB.js';
-export { Section } from '../chunk-FAQGGX2Z.js';
+export { SearchTrigger } from '../chunk-6DRDCT22.js';
 export { PinTile } from '../chunk-6MIXD6IW.js';
-export { PresenceStack } from '../chunk-ODT5H4MN.js';
-export { PresenterView, formatStopwatch } from '../chunk-HONZQ4UR.js';
-export { SLIDE_HEIGHT, SLIDE_WIDTH, SlideStage, useSlideKeys } from '../chunk-KNLJL3VP.js';
+export { PresenterView, formatStopwatch } from '../chunk-CTHM6YSJ.js';
+export { SLIDE_HEIGHT, SLIDE_WIDTH, SlideStage, useSlideKeys } from '../chunk-VCRFFIYI.js';
 export { PricingCard } from '../chunk-DQSXWQMJ.js';
+export { PrincipalPicker } from '../chunk-ZITJKF6Z.js';
 export { FactLine, ObjectHeader, SetByLine } from '../chunk-VGE3G3T4.js';
 export { OrgNodeDisclosure, OrgNodeLabel, OrgNodeLead } from '../chunk-TBMDMXEX.js';
+export { Outline, scrollToHeading, useActiveHeading } from '../chunk-A5YKNRG6.js';
 export { OrgTable, OrgTableActions, OrgTableAdd, OrgTableName } from '../chunk-AMNN4WDX.js';
 export { TreeGrid } from '../chunk-VEB5ERRE.js';
 export { SIZE_EPSILON, TYPE_AHEAD_RESET_MS, createTreeModel, isTypeAheadKey, layoutConnectors, layoutForest, placeGroups, treeAllExpandable, treeAncestors, treeCollapseOrAscend, treeExpandOrDescend, treeExpandTo, treeExpandable, treeFirst, treeFirstChild, treeItemAction, treeLast, treeLevel, treeNext, treeParent, treePosInSet, treePrevious, treeSetSize, treeStep, treeTypeAhead, treeVisible, typeAheadBuffer, useLayoutAnchor, useMeasuredSizes, useTreeState } from '../chunk-MY374UUD.js';
 export { OrgLabel } from '../chunk-AKEZ3G5V.js';
-export { Outline, scrollToHeading, useActiveHeading } from '../chunk-A5YKNRG6.js';
 export { PEOPLE_RAIL_LABELS, PeopleRail, peopleRailKey } from '../chunk-FVLCTCMV.js';
 import '../chunk-CENOOTAV.js';
+export { ListInput } from '../chunk-D5JZN3ML.js';
 export { LIVE_CURSOR_HIDE_MS, LIVE_CURSOR_REST_MS, LiveCursor } from '../chunk-5XACKNYR.js';
 export { MARKDOWN_FORMATS, MarkdownEditor, formatMarkdown, insertMarkdown, markdownWords } from '../chunk-LZHLSQYK.js';
 export { MERGE_CONFLICTS_LABELS, MergeConflicts } from '../chunk-RWA4H2TV.js';
@@ -59,16 +60,14 @@ import '../chunk-FQCLKD7U.js';
 export { DEFAULT_METER_THRESHOLDS, METER_STATES, Meter, meterState, meterStateTone, meterTone, progressTone } from '../chunk-UGNUUVRI.js';
 export { NewItemsNotice } from '../chunk-PXU6HOZB.js';
 export { AutoGrid, Inline, Spacer, Stack } from '../chunk-ZAC7SKUN.js';
-export { LinkInterstitial, openExternal } from '../chunk-L2OQRPXJ.js';
 export { Link } from '../chunk-FBSEJO2C.js';
+export { LinkInterstitial, openExternal } from '../chunk-L2OQRPXJ.js';
 export { List, ListItem } from '../chunk-DS2C73RJ.js';
-export { ListInput } from '../chunk-D5JZN3ML.js';
 export { Highlight, highlightRanges, highlightTerms } from '../chunk-H6VKCIWV.js';
 import '../chunk-FFMCMSJB.js';
 export { IconTile } from '../chunk-IXJHTFXG.js';
 export { ImageUpload } from '../chunk-YDBC4DNW.js';
 export { InboxGroup, InboxList, InboxMore, InboxRow, InboxToggle } from '../chunk-XYCADWZN.js';
-export { EntityChip } from '../chunk-4KWOKX2B.js';
 export { ErrorBoundary } from '../chunk-XX2VQE55.js';
 export { Eyebrow } from '../chunk-RK4XPHVG.js';
 export { FactList } from '../chunk-JI5AVQLA.js';
@@ -78,23 +77,24 @@ export { DEFAULT_FRAME_THEME, EXTERNAL_URL_MAX, FRAME_BRIDGE, FRAME_MESSAGE, FRA
 export { DENSITY_PREFERENCES, PALETTE_ID, THEME_PREFERENCES, applyDensity, applyPalette, applyTheme, isDensityPreference, isPaletteId, isThemePreference } from '../chunk-ZXXDZJQN.js';
 export { useFullscreen } from '../chunk-XDTYBF2F.js';
 export { DIFF_SUMMARY_LABELS, DIFF_VIEW_LABELS, DiffSummary, DiffView, MAX_DIFF_LINES, collapseDiff, diffLines, diffStat, firstChangedLines, splitLines } from '../chunk-BVWSLXTY.js';
-export { Disclosure } from '../chunk-S4RCG44T.js';
 export { Divider } from '../chunk-6KWNXIDE.js';
 export { DOC_TABS_EDITOR_LABELS, DocTabsEditor } from '../chunk-UZ7ZUSLH.js';
 export { DownloadButton } from '../chunk-BEHFTRMZ.js';
 export { downloadBlob, downloadText, safeFilename, useDownload } from '../chunk-IW55G7XG.js';
+export { EntityChip } from '../chunk-4KWOKX2B.js';
 export { CursorFlag } from '../chunk-3BYIWOTV.js';
 export { PresenceRing, presenceHueClass } from '../chunk-I6POAB4V.js';
+export { DATASET_SOURCE_KINDS, DatasetSource, DatasetSourceList } from '../chunk-ZZDY4XL7.js';
+export { Tag } from '../chunk-GFV4LJHH.js';
+export { StatusDot } from '../chunk-WIATRXEJ.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-OJRDEVHV.js';
 export { PageHeader } from '../chunk-HOXGBLEY.js';
 export { Toolbar, ToolbarOverflow, ToolbarWide } from '../chunk-PGRPNDWM.js';
 export { ALL_ITEMS, CopyableCell, DATA_TABLE_LABELS, DataTable, RowActionsMenu } from '../chunk-SVW3VG72.js';
-export { DATASET_SOURCE_KINDS, DatasetSource, DatasetSourceList } from '../chunk-ZZDY4XL7.js';
-export { Tag } from '../chunk-GFV4LJHH.js';
-export { StatusDot } from '../chunk-WIATRXEJ.js';
 export { DEFAULT_DATE_TIME_PICKER_LABELS, DateTimePicker } from '../chunk-WG5WUFBX.js';
 export { DescriptionList, DescriptionListItem } from '../chunk-F2XSYBKH.js';
 export { DIFF_LIST_LABELS, DiffList } from '../chunk-LFHCXZO5.js';
+export { Disclosure } from '../chunk-S4RCG44T.js';
 export { Combobox } from '../chunk-QS4ZGTEU.js';
 export { CommandPalette } from '../chunk-GTLJXJ3U.js';
 export { ConfirmModal, Modal } from '../chunk-F4DPAJCN.js';
@@ -113,11 +113,11 @@ export { Tooltip } from '../chunk-QWOPX2MN.js';
 import '../chunk-3L5NHASN.js';
 export { ActivityStrip, BarList, ChartTooltip, DATA_COLORS, DATA_COLOR_OTHER, Legend, Sparkline, StackedBar, StackedColumns, TimeSeries, dataColor, niceScale, useChartHover } from '../chunk-MLT2HBPN.js';
 export { ChoiceButtons } from '../chunk-YSJC7AZC.js';
-export { ChoiceList } from '../chunk-QBXZLGK2.js';
 export { CodeBlock } from '../chunk-GDDE4UM7.js';
 export { CopyButton, Copyable } from '../chunk-W46LPU4R.js';
 export { useClipboard, writeClipboard } from '../chunk-STJ7QBC3.js';
 export { useOutcome } from '../chunk-DTIW4CHZ.js';
+export { ChoiceList } from '../chunk-QBXZLGK2.js';
 export { Breadcrumb } from '../chunk-VWNC2L6W.js';
 export { KeyChip } from '../chunk-FYTIJM2T.js';
 export { CalendarGrid, compareDays, daysInMonth, sameDay, shiftDay, shiftMonth, today } from '../chunk-GXQ3B46I.js';

package/dist/index.js

@@ -11,47 +11,48 @@ export { Text } from './chunk-IKBK4A5O.js';
 export { ThemeGallery } from './chunk-C2FRTWKO.js';
 export { ThemeSwatch } from './chunk-MNFU2RNT.js';
 export { DensitySwitcher, ThemeSwitcher } from './chunk-WJDQ7XQA.js';
+export { DEFAULT_TIME_WINDOW_LABELS, TIME_WINDOW_SPANS, TimeWindowPicker, describeTimeWindow, isTimeWindowSet, parseTimeWindowDuration, resolveTimeWindow, timeWindowMatchesPreset } from './chunk-LREN6TUG.js';
 export { ThemeToggle } from './chunk-NP2C4Y4E.js';
 export { applyStoredPreferences, resolveTheme, useDensityPreference, useSystemTheme, useThemePreference } from './chunk-Z24ZUSTX.js';
-export { DEFAULT_TIME_WINDOW_LABELS, TIME_WINDOW_SPANS, TimeWindowPicker, describeTimeWindow, isTimeWindowSet, parseTimeWindowDuration, resolveTimeWindow, timeWindowMatchesPreset } from './chunk-LREN6TUG.js';
 export { Stepper } from './chunk-5QWIJSQM.js';
 export { Switcher } from './chunk-5OY4LJFH.js';
 export { Table } from './chunk-V2N3BMOT.js';
 export { TABLE_TAGS_CELL_LABELS, TableDateCell, TableEntityCell, TableKeyCell, TableNumberCell, TableStatusCell, TableTagsCell, TableTextCell } from './chunk-LFNUH4GY.js';
-export { NavGroup, NavItem, SidebarNav } from './chunk-UCCC7YVZ.js';
-export { SLIDE_COMPARE_LABELS, SlideCompare } from './chunk-Z54BPRL6.js';
-export { SlideFilmstrip } from './chunk-KSSSFLE2.js';
-export { SlideGrid } from './chunk-Q4A5CGUB.js';
+export { SLIDE_COMPARE_LABELS, SlideCompare } from './chunk-33Z2SEDQ.js';
+export { SegmentedMeter, segmentedMeterLabel } from './chunk-4AK52VHB.js';
+export { SlideFilmstrip } from './chunk-UOPHR5CE.js';
+export { SlideGrid } from './chunk-TD2MIINY.js';
 export { StatCard } from './chunk-IKB6HFGK.js';
 export { StatGroup } from './chunk-JXRI5YD2.js';
-export { SearchTrigger } from './chunk-6DRDCT22.js';
-export { SegmentedMeter, segmentedMeterLabel } from './chunk-4AK52VHB.js';
+export { Section } from './chunk-FAQGGX2Z.js';
 export { ARTIFACT_ROLES, SHAREABLE_ROLES, ShareDialog, roleAtLeast } from './chunk-URUGEAFB.js';
 export { Select } from './chunk-FC4YTTFJ.js';
 export { CellDisplay, CellEditor, CheckboxCell, DateCell, LongTextCell, MultiSelectCell, NumberCell, PersonCell, RatingCell, SelectCell, SheetCell, SheetGrid, StatusCell, TextCell, UrlCell } from './chunk-INTEH4F3.js';
 export { TagGroup } from './chunk-O2EGEONV.js';
 export { matchesShortcut, useShortcut } from './chunk-2FPENTCF.js';
-export { PrincipalPicker } from './chunk-ZITJKF6Z.js';
+export { NavGroup, NavItem, SidebarNav } from './chunk-UCCC7YVZ.js';
 export { Prose } from './chunk-JCSA3XVH.js';
+export { PresenceStack } from './chunk-ODT5H4MN.js';
 export { QR_DARK, QR_LIGHT, QR_QUIET_ZONE, QrCode, qrModulePath, qrModules } from './chunk-Y56FM3K4.js';
 export { ReadingPane, ReadingPaneByline, ReadingPaneLead, ReadingPaneOutcome, ReadingPaneQuote, ReadingPaneReasoning, ReadingPaneSection, ReadingPaneTitle } from './chunk-ZAJHGDAW.js';
 export { FRAME_HELLO_TIMEOUT_MS, SandboxedFrame } from './chunk-VYDFB6PJ.js';
 export { Skeleton } from './chunk-W5J7R5EB.js';
-export { Section } from './chunk-FAQGGX2Z.js';
+export { SearchTrigger } from './chunk-6DRDCT22.js';
 export { PinTile } from './chunk-6MIXD6IW.js';
-export { PresenceStack } from './chunk-ODT5H4MN.js';
-export { PresenterView, formatStopwatch } from './chunk-HONZQ4UR.js';
-export { SLIDE_HEIGHT, SLIDE_WIDTH, SlideStage, useSlideKeys } from './chunk-KNLJL3VP.js';
+export { PresenterView, formatStopwatch } from './chunk-CTHM6YSJ.js';
+export { SLIDE_HEIGHT, SLIDE_WIDTH, SlideStage, useSlideKeys } from './chunk-VCRFFIYI.js';
 export { PricingCard } from './chunk-DQSXWQMJ.js';
+export { PrincipalPicker } from './chunk-ZITJKF6Z.js';
 export { FactLine, ObjectHeader, SetByLine } from './chunk-VGE3G3T4.js';
 export { OrgNodeDisclosure, OrgNodeLabel, OrgNodeLead } from './chunk-TBMDMXEX.js';
+export { Outline, scrollToHeading, useActiveHeading } from './chunk-A5YKNRG6.js';
 export { OrgTable, OrgTableActions, OrgTableAdd, OrgTableName } from './chunk-AMNN4WDX.js';
 export { TreeGrid } from './chunk-VEB5ERRE.js';
 export { SIZE_EPSILON, TYPE_AHEAD_RESET_MS, createTreeModel, isTypeAheadKey, layoutConnectors, layoutForest, placeGroups, treeAllExpandable, treeAncestors, treeCollapseOrAscend, treeExpandOrDescend, treeExpandTo, treeExpandable, treeFirst, treeFirstChild, treeItemAction, treeLast, treeLevel, treeNext, treeParent, treePosInSet, treePrevious, treeSetSize, treeStep, treeTypeAhead, treeVisible, typeAheadBuffer, useLayoutAnchor, useMeasuredSizes, useTreeState } from './chunk-MY374UUD.js';
 export { OrgLabel } from './chunk-AKEZ3G5V.js';
-export { Outline, scrollToHeading, useActiveHeading } from './chunk-A5YKNRG6.js';
 export { PEOPLE_RAIL_LABELS, PeopleRail, peopleRailKey } from './chunk-FVLCTCMV.js';
 import './chunk-CENOOTAV.js';
+export { ListInput } from './chunk-D5JZN3ML.js';
 export { LIVE_CURSOR_HIDE_MS, LIVE_CURSOR_REST_MS, LiveCursor } from './chunk-5XACKNYR.js';
 export { MARKDOWN_FORMATS, MarkdownEditor, formatMarkdown, insertMarkdown, markdownWords } from './chunk-LZHLSQYK.js';
 export { MERGE_CONFLICTS_LABELS, MergeConflicts } from './chunk-RWA4H2TV.js';
@@ -59,16 +60,14 @@ import './chunk-FQCLKD7U.js';
 export { DEFAULT_METER_THRESHOLDS, METER_STATES, Meter, meterState, meterStateTone, meterTone, progressTone } from './chunk-UGNUUVRI.js';
 export { NewItemsNotice } from './chunk-PXU6HOZB.js';
 export { AutoGrid, Inline, Spacer, Stack } from './chunk-ZAC7SKUN.js';
-export { LinkInterstitial, openExternal } from './chunk-L2OQRPXJ.js';
 export { Link } from './chunk-FBSEJO2C.js';
+export { LinkInterstitial, openExternal } from './chunk-L2OQRPXJ.js';
 export { List, ListItem } from './chunk-DS2C73RJ.js';
-export { ListInput } from './chunk-D5JZN3ML.js';
 export { Highlight, highlightRanges, highlightTerms } from './chunk-H6VKCIWV.js';
 import './chunk-FFMCMSJB.js';
 export { IconTile } from './chunk-IXJHTFXG.js';
 export { ImageUpload } from './chunk-YDBC4DNW.js';
 export { InboxGroup, InboxList, InboxMore, InboxRow, InboxToggle } from './chunk-XYCADWZN.js';
-export { EntityChip } from './chunk-4KWOKX2B.js';
 export { ErrorBoundary } from './chunk-XX2VQE55.js';
 export { Eyebrow } from './chunk-RK4XPHVG.js';
 export { FactList } from './chunk-JI5AVQLA.js';
@@ -78,23 +77,24 @@ export { DEFAULT_FRAME_THEME, EXTERNAL_URL_MAX, FRAME_BRIDGE, FRAME_MESSAGE, FRA
 export { DENSITY_PREFERENCES, PALETTE_ID, THEME_PREFERENCES, applyDensity, applyPalette, applyTheme, isDensityPreference, isPaletteId, isThemePreference } from './chunk-ZXXDZJQN.js';
 export { useFullscreen } from './chunk-XDTYBF2F.js';
 export { DIFF_SUMMARY_LABELS, DIFF_VIEW_LABELS, DiffSummary, DiffView, MAX_DIFF_LINES, collapseDiff, diffLines, diffStat, firstChangedLines, splitLines } from './chunk-BVWSLXTY.js';
-export { Disclosure } from './chunk-S4RCG44T.js';
 export { Divider } from './chunk-6KWNXIDE.js';
 export { DOC_TABS_EDITOR_LABELS, DocTabsEditor } from './chunk-UZ7ZUSLH.js';
 export { DownloadButton } from './chunk-BEHFTRMZ.js';
 export { downloadBlob, downloadText, safeFilename, useDownload } from './chunk-IW55G7XG.js';
+export { EntityChip } from './chunk-4KWOKX2B.js';
 export { CursorFlag } from './chunk-3BYIWOTV.js';
 export { PresenceRing, presenceHueClass } from './chunk-I6POAB4V.js';
+export { DATASET_SOURCE_KINDS, DatasetSource, DatasetSourceList } from './chunk-ZZDY4XL7.js';
+export { Tag } from './chunk-GFV4LJHH.js';
+export { StatusDot } from './chunk-WIATRXEJ.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-OJRDEVHV.js';
 export { PageHeader } from './chunk-HOXGBLEY.js';
 export { Toolbar, ToolbarOverflow, ToolbarWide } from './chunk-PGRPNDWM.js';
 export { ALL_ITEMS, CopyableCell, DATA_TABLE_LABELS, DataTable, RowActionsMenu } from './chunk-SVW3VG72.js';
-export { DATASET_SOURCE_KINDS, DatasetSource, DatasetSourceList } from './chunk-ZZDY4XL7.js';
-export { Tag } from './chunk-GFV4LJHH.js';
-export { StatusDot } from './chunk-WIATRXEJ.js';
 export { DEFAULT_DATE_TIME_PICKER_LABELS, DateTimePicker } from './chunk-WG5WUFBX.js';
 export { DescriptionList, DescriptionListItem } from './chunk-F2XSYBKH.js';
 export { DIFF_LIST_LABELS, DiffList } from './chunk-LFHCXZO5.js';
+export { Disclosure } from './chunk-S4RCG44T.js';
 export { Combobox } from './chunk-QS4ZGTEU.js';
 export { CommandPalette } from './chunk-GTLJXJ3U.js';
 export { ConfirmModal, Modal } from './chunk-F4DPAJCN.js';
@@ -113,11 +113,11 @@ export { Tooltip } from './chunk-QWOPX2MN.js';
 import './chunk-3L5NHASN.js';
 export { ActivityStrip, BarList, ChartTooltip, DATA_COLORS, DATA_COLOR_OTHER, Legend, Sparkline, StackedBar, StackedColumns, TimeSeries, dataColor, niceScale, useChartHover } from './chunk-MLT2HBPN.js';
 export { ChoiceButtons } from './chunk-YSJC7AZC.js';
-export { ChoiceList } from './chunk-QBXZLGK2.js';
 export { CodeBlock } from './chunk-GDDE4UM7.js';
 export { CopyButton, Copyable } from './chunk-W46LPU4R.js';
 export { useClipboard, writeClipboard } from './chunk-STJ7QBC3.js';
 export { useOutcome } from './chunk-DTIW4CHZ.js';
+export { ChoiceList } from './chunk-QBXZLGK2.js';
 export { Breadcrumb } from './chunk-VWNC2L6W.js';
 export { KeyChip } from './chunk-FYTIJM2T.js';
 export { CalendarGrid, compareDays, daysInMonth, sameDay, shiftDay, shiftMonth, today } from './chunk-GXQ3B46I.js';

package/dist/styles.css

@@ -20848,7 +20848,7 @@ svg.crewlet-select__chevron {
 }
 
 
-/* SlideStage-XIOTMMRU.css */
+/* SlideStage-KGRRALXR.css */
 /*
  * SlideStage: a slide laid out at its authored size and scaled to its box.
  *
@@ -20867,6 +20867,22 @@ svg.crewlet-select__chevron {
   height: 100%;
 }
 
+/* Until it is measured, and wherever it is not (no layout), a view stage is
+   its slide's shape at its width. In full screen it fills the box, sharing a
+   flex column with the show's controls. */
+.crewlet-slide-stage--view {
+  flex: none;
+  aspect-ratio: var(--crewlet-slide-stage-ratio, 16 / 9);
+}
+
+:fullscreen .crewlet-slide-stage--view,
+.crewlet-slide-stage--view:fullscreen {
+  flex: 1 1 0;
+  min-height: 0;
+  height: 100%;
+  aspect-ratio: auto;
+}
+
 .crewlet-slide-stage__frame {
   position: absolute;
   top: 0;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crewlethq/ui",
-  "version": "0.26.0",
+  "version": "0.27.0",
   "description": "Crewlet shared React components built on @crewlethq/tokens and @crewlethq/icons.",
   "license": "MIT",
   "repository": {
@@ -42,8 +42,8 @@
     "clean": "rm -rf dist src/generated"
   },
   "dependencies": {
-    "@crewlethq/icons": "0.26.0",
-    "@crewlethq/tokens": "0.26.0",
+    "@crewlethq/icons": "0.27.0",
+    "@crewlethq/tokens": "0.27.0",
     "uqr": "0.1.3"
   },
   "peerDependencies": {