@crewlethq/ui 0.25.0 → 0.27.0

package/README.md

@@ -204,6 +204,36 @@ 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:
+
+- asks for the `db` capability, and reads its collection's title and columns from `data.schema()`, which answers every collection;
+- reads its rows through `subscribe(callback, onError)`, and says a refused subscription (`forbidden`, `not_found`, `unavailable`, `capability_not_declared`) in place of the grid rather than drawing an empty sheet;
+- writes an edit with `merge`, a paste or a cleared range as one `batch().merge(...).commit()`, all or nothing, and Add row with `set` under an id the kit mints;
+- deletes a row with `delete`, from SheetGrid's row actions (`onDeleteRow`), once the reader confirms it in the kit's own `ConfirmModal` (an artifact frame refuses `window.confirm`); a refused delete keeps the row and is said on its first cell;
+- says on the cell both a write the engine refused (its verdict: `conflict`, `invalid`, `forbidden`, `quota`, `gone`) and one the runtime rejected with nothing decided (`rate_limited`, `unavailable`), and holds either in the sync strip until the reader dismisses it, as 0.25.0's audit made the native sheet do;
+- steps Mod+Z and Mod+Shift+Z through `data.undo()` and `data.redo()`, the page's own writes, and says a step somebody overtook;
+- offers every seat from `identity.people()` to a person cell, and reads presence as the room's members from `presence.roster()` and its subscription, publishing the reader's own cell as an activity and a focus.
+
+The kit's README documents each call it makes and the capability it needs.
+
+What to change:
+
+- A page whose version declared `data` for its sheet declares `db`.
+- A page that passes its own runtime to `mountSheet` (`runtime` in `SheetOptions`) passes one of contract 1.0's shape, as `KitRuntime` now declares it: `identity.me()` answers a `seat` where it answered an `id`, `identity.lookup` is gone in favour of `identity.people()`, a collection answers `subscribe`, `set`, `merge` and `delete` (no `schema`, `create` or `update`), a batch answers `merge`, writes resolve with `{ verdict, seq?, reason? }`, and presence answers `roster()` and a subscription to the roster's `members` rather than peers. `KitPeer`, `KitSchema` and `KitViewer.id` are gone, in favour of `KitMember`, `KitCollectionSchema` and `KitViewer.seat`.
+- A page that relies on the window's own `crewlet` changes nothing beyond the capability.
+
 ## Changes in 0.25.0
 
 0.25.0 adds the pieces the slides, dashboard, doc and sheet artifact kinds are drawn with, and the fixes from the artifact audit. Every new piece draws content the host renders itself and takes its data and callbacks as props, so nothing in it parses an artifact or knows a route.

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

@@ -2,7 +2,7 @@ import '../chunk-SLRKS5PF.js';
 export { VersionTimeline } from '../chunk-W4XYY73O.js';
 export { WidgetFrame } from '../chunk-BQYQWJPK.js';
 export { ElementToPngError, elementToPng, serializeElement, toCsv } from '../chunk-UOR7TOAU.js';
-export { ThemeToggle } from '../chunk-NP2C4Y4E.js';
+export { Timeline, TimelineItem } from '../chunk-AUQPBL4O.js';
 export { ToastProvider, Toaster, useToast } from '../chunk-QH3AKP2N.js';
 export { TreeCanvas } from '../chunk-RSC7UJCR.js';
 export { VERSION_COMPARE_LABELS, VERSION_COMPARE_LENSES, VersionCompare } from '../chunk-EHQTPVV4.js';
@@ -11,38 +11,38 @@ 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 { 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 { Timeline, TimelineItem } from '../chunk-AUQPBL4O.js';
+export { ThemeToggle } from '../chunk-NP2C4Y4E.js';
+export { applyStoredPreferences, resolveTheme, useDensityPreference, useSystemTheme, useThemePreference } from '../chunk-Z24ZUSTX.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 { Section } from '../chunk-FAQGGX2Z.js';
-export { SegmentedMeter, segmentedMeterLabel } from '../chunk-4AK52VHB.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 { 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';
@@ -52,6 +52,7 @@ export { SIZE_EPSILON, TYPE_AHEAD_RESET_MS, createTreeModel, isTypeAheadKey, lay
 export { OrgLabel } from '../chunk-AKEZ3G5V.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';
@@ -62,39 +63,38 @@ export { AutoGrid, Inline, Spacer, Stack } from '../chunk-ZAC7SKUN.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 { useFullscreen } from '../chunk-XDTYBF2F.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 { FILTER_CHIP_ATTRIBUTE, FilterChip, FilterChipGroup } from '../chunk-5YLON2PW.js';
 export { FactList } from '../chunk-JI5AVQLA.js';
+export { FILTER_CHIP_ATTRIBUTE, FilterChip, FilterChipGroup } from '../chunk-5YLON2PW.js';
 export { FollowBanner } from '../chunk-FW7HN6AP.js';
 export { DEFAULT_FRAME_THEME, EXTERNAL_URL_MAX, FRAME_BRIDGE, FRAME_MESSAGE, FRAME_ORIGIN_MODES, FRAME_SANDBOX_TOKENS, applyFrameTheme, checkFrameSandbox, externalUrl, frameFragment, frameOriginMatches, frameThemeMessage, httpOrigin, isFocusExit, isFrameNonce, negotiateBridge, parseFrameFragment, portTargetOrigin, readFrameHello, readFramePortMessage, readFrameTheme, readOpenLink } from '../chunk-F6V2PTN6.js';
 export { DENSITY_PREFERENCES, PALETTE_ID, THEME_PREFERENCES, applyDensity, applyPalette, applyTheme, isDensityPreference, isPaletteId, isThemePreference } from '../chunk-ZXXDZJQN.js';
-export { Highlight, highlightRanges, highlightTerms } from '../chunk-H6VKCIWV.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

@@ -2,7 +2,7 @@ import './chunk-SLRKS5PF.js';
 export { VersionTimeline } from './chunk-W4XYY73O.js';
 export { WidgetFrame } from './chunk-BQYQWJPK.js';
 export { ElementToPngError, elementToPng, serializeElement, toCsv } from './chunk-UOR7TOAU.js';
-export { ThemeToggle } from './chunk-NP2C4Y4E.js';
+export { Timeline, TimelineItem } from './chunk-AUQPBL4O.js';
 export { ToastProvider, Toaster, useToast } from './chunk-QH3AKP2N.js';
 export { TreeCanvas } from './chunk-RSC7UJCR.js';
 export { VERSION_COMPARE_LABELS, VERSION_COMPARE_LENSES, VersionCompare } from './chunk-EHQTPVV4.js';
@@ -11,38 +11,38 @@ 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 { 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 { Timeline, TimelineItem } from './chunk-AUQPBL4O.js';
+export { ThemeToggle } from './chunk-NP2C4Y4E.js';
+export { applyStoredPreferences, resolveTheme, useDensityPreference, useSystemTheme, useThemePreference } from './chunk-Z24ZUSTX.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 { Section } from './chunk-FAQGGX2Z.js';
-export { SegmentedMeter, segmentedMeterLabel } from './chunk-4AK52VHB.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 { 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';
@@ -52,6 +52,7 @@ export { SIZE_EPSILON, TYPE_AHEAD_RESET_MS, createTreeModel, isTypeAheadKey, lay
 export { OrgLabel } from './chunk-AKEZ3G5V.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';
@@ -62,39 +63,38 @@ export { AutoGrid, Inline, Spacer, Stack } from './chunk-ZAC7SKUN.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 { useFullscreen } from './chunk-XDTYBF2F.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 { FILTER_CHIP_ATTRIBUTE, FilterChip, FilterChipGroup } from './chunk-5YLON2PW.js';
 export { FactList } from './chunk-JI5AVQLA.js';
+export { FILTER_CHIP_ATTRIBUTE, FilterChip, FilterChipGroup } from './chunk-5YLON2PW.js';
 export { FollowBanner } from './chunk-FW7HN6AP.js';
 export { DEFAULT_FRAME_THEME, EXTERNAL_URL_MAX, FRAME_BRIDGE, FRAME_MESSAGE, FRAME_ORIGIN_MODES, FRAME_SANDBOX_TOKENS, applyFrameTheme, checkFrameSandbox, externalUrl, frameFragment, frameOriginMatches, frameThemeMessage, httpOrigin, isFocusExit, isFrameNonce, negotiateBridge, parseFrameFragment, portTargetOrigin, readFrameHello, readFramePortMessage, readFrameTheme, readOpenLink } from './chunk-F6V2PTN6.js';
 export { DENSITY_PREFERENCES, PALETTE_ID, THEME_PREFERENCES, applyDensity, applyPalette, applyTheme, isDensityPreference, isPaletteId, isThemePreference } from './chunk-ZXXDZJQN.js';
-export { Highlight, highlightRanges, highlightTerms } from './chunk-H6VKCIWV.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.25.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.25.0",
-    "@crewlethq/tokens": "0.25.0",
+    "@crewlethq/icons": "0.27.0",
+    "@crewlethq/tokens": "0.27.0",
     "uqr": "0.1.3"
   },
   "peerDependencies": {