@crewlethq/ui 0.26.0 → 0.27.1

package/README.md

@@ -204,6 +204,22 @@ 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.1
+
+**`useSlideKeys` answers every key with the newest handlers.** It re-added its document listener after each render, so after every step there was a gap, between the new slide's commit and the effect that re-added the listener, in which a quick second press (a clicker held down, two taps) reached the previous slide's handlers and moved to the slide already shown: the press was lost. The hook now keeps one listener for as long as it is `enabled` and reads the handlers from a ref it brings up to date as each render commits, before the browser can dispatch another event. A show whose stage stays mounted across slides, as `SlideStage fit="view"` does, met the gap on almost every quick press.
+
+Nothing to change: handlers that close over the current slide are right as they are.
+
+## 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-OGAAHVF6.js';
+import '../chunk-O63MWA4G.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-ALMSY7RL.js';
+import '../chunk-O63MWA4G.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-LR5QTFOE.js';
+import '../chunk-O63MWA4G.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-3C3BRIMY.js';
+import '../chunk-O63MWA4G.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-O63MWA4G.js';
 import '../chunk-HMPFGIWM.js';
 import '../chunk-R25RGPUB.js';
 import '../chunk-ODEQTPFM.js';

package/dist/SlideStage/useSlideKeys.d.ts

@@ -17,5 +17,14 @@ export interface SlideKeys {
  * 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.
+ *
+ * THE NEWEST HANDLERS ANSWER EVERY KEY. A show's handlers close over the slide
+ * it is on, so a key must never reach the handlers of a slide already left.
+ * They are read from a ref the hook brings up to date as each render commits,
+ * before the browser can dispatch another event, and the listener itself
+ * stays put. Re-adding the listener after each render instead left a gap
+ * after every step, between the new slide's commit and the effect that
+ * re-added it, where a quick second press (a clicker held down, or two taps)
+ * went to the old slide's handlers and moved to the slide already shown.
  */
 export declare function useSlideKeys({ onNext, onPrevious, onFirst, onLast, onExit, enabled }: SlideKeys): void;

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-Q4A5CGUB.js → chunk-3C3BRIMY.js}

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

package/dist/{chunk-Z54BPRL6.js → chunk-ALMSY7RL.js}

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

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

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

package/dist/chunk-O63MWA4G.js

@@ -0,0 +1,172 @@
+import { isComposing } from './chunk-R25RGPUB.js';
+import { cx } from './chunk-ODEQTPFM.js';
+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({
+  children,
+  label,
+  fit = "width",
+  scale,
+  width = SLIDE_WIDTH,
+  height = SLIDE_HEIGHT,
+  className
+}) {
+  const box = useRef(null);
+  const viewHeight = useFitInView(box, fit === "view" && scale === void 0, height / width);
+  const [measured, setMeasured] = useState({
+    scale: 0,
+    left: 0,
+    top: 0
+  });
+  useLayoutEffect(() => {
+    const el = box.current;
+    if (!el || scale !== void 0) return void 0;
+    const read = () => {
+      const w = el.clientWidth;
+      const h = el.clientHeight;
+      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 {
+        setMeasured({ scale: w / width, left: 0, top: 0 });
+      }
+    };
+    read();
+    if (typeof ResizeObserver === "undefined") return void 0;
+    const observer = new ResizeObserver(read);
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [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 } : {} } : fit === "view" ? {
+    "--crewlet-slide-stage-ratio": `${width} / ${height}`,
+    ...viewHeight !== null ? { height: viewHeight } : {}
+  } : {};
+  const frameStyle = {
+    width,
+    height,
+    transform: `translate(${scale === void 0 ? measured.left : 0}px, ${scale === void 0 ? measured.top : 0}px) scale(${s})`,
+    // Hidden until measured, so a slide is never painted at full size for
+    // one frame inside a thumbnail.
+    visibility: s > 0 ? "visible" : "hidden"
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: box,
+      className: cx("crewlet-slide-stage", `crewlet-slide-stage--${fit}`, className),
+      style: boxStyle,
+      role: "group",
+      "aria-roledescription": "slide",
+      "aria-label": label,
+      children: /* @__PURE__ */ jsx("div", { className: "crewlet-slide-stage__frame", style: frameStyle, children })
+    }
+  );
+}
+function typing(target) {
+  if (!(target instanceof HTMLElement)) return false;
+  return target.isContentEditable || ["INPUT", "TEXTAREA", "SELECT"].includes(target.tagName);
+}
+function useSlideKeys({ onNext, onPrevious, onFirst, onLast, onExit, enabled = true }) {
+  const keys = useRef({ onNext, onPrevious, onFirst, onLast, onExit });
+  useLayoutEffect(() => {
+    keys.current = { onNext, onPrevious, onFirst, onLast, onExit };
+  });
+  useEffect(() => {
+    if (!enabled) return void 0;
+    const onKeyDown = (event) => {
+      if (event.defaultPrevented || isComposing(event) || typing(event.target)) return;
+      if (event.altKey || event.ctrlKey || event.metaKey) return;
+      const { onNext: onNext2, onPrevious: onPrevious2, onFirst: onFirst2, onLast: onLast2, onExit: onExit2 } = keys.current;
+      const act = {
+        ArrowRight: onNext2,
+        ArrowDown: onNext2,
+        PageDown: onNext2,
+        " ": onNext2,
+        Enter: onNext2,
+        ArrowLeft: onPrevious2,
+        ArrowUp: onPrevious2,
+        PageUp: onPrevious2,
+        Backspace: onPrevious2,
+        Home: onFirst2,
+        End: onLast2,
+        Escape: onExit2
+      };
+      const fn = act[event.key];
+      if (!fn) return;
+      if ((event.key === "Enter" || event.key === " ") && event.target instanceof HTMLButtonElement) return;
+      event.preventDefault();
+      fn();
+    };
+    document.addEventListener("keydown", onKeyDown);
+    return () => document.removeEventListener("keydown", onKeyDown);
+  }, [enabled]);
+}
+
+export { SLIDE_HEIGHT, SLIDE_WIDTH, SlideStage, useSlideKeys };

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

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

package/dist/generated/index.js

@@ -1,30 +1,30 @@
 import '../chunk-SLRKS5PF.js';
-export { VersionTimeline } from '../chunk-W4XYY73O.js';
+export { TreeCanvas } from '../chunk-RSC7UJCR.js';
 export { WidgetFrame } from '../chunk-BQYQWJPK.js';
 export { ElementToPngError, elementToPng, serializeElement, toCsv } from '../chunk-UOR7TOAU.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';
+export { VersionTimeline } from '../chunk-W4XYY73O.js';
+export { Timeline, TimelineItem } from '../chunk-AUQPBL4O.js';
 export { TagsInput } from '../chunk-2CQLNML5.js';
 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-ALMSY7RL.js';
+export { SlideFilmstrip } from '../chunk-LR5QTFOE.js';
+export { SlideGrid } from '../chunk-3C3BRIMY.js';
 export { StatCard } from '../chunk-IKB6HFGK.js';
 export { StatGroup } from '../chunk-JXRI5YD2.js';
-export { SearchTrigger } from '../chunk-6DRDCT22.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';
@@ -37,12 +37,13 @@ export { QR_DARK, QR_LIGHT, QR_QUIET_ZONE, QrCode, qrModulePath, qrModules } fro
 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-OGAAHVF6.js';
+export { SLIDE_HEIGHT, SLIDE_WIDTH, SlideStage, useSlideKeys } from '../chunk-O63MWA4G.js';
 export { PricingCard } from '../chunk-DQSXWQMJ.js';
+export { NewItemsNotice } from '../chunk-PXU6HOZB.js';
 export { FactLine, ObjectHeader, SetByLine } from '../chunk-VGE3G3T4.js';
 export { OrgNodeDisclosure, OrgNodeLabel, OrgNodeLead } from '../chunk-TBMDMXEX.js';
 export { OrgTable, OrgTableActions, OrgTableAdd, OrgTableName } from '../chunk-AMNN4WDX.js';
@@ -53,16 +54,15 @@ export { Outline, scrollToHeading, useActiveHeading } from '../chunk-A5YKNRG6.js
 export { PEOPLE_RAIL_LABELS, PeopleRail, peopleRailKey } from '../chunk-FVLCTCMV.js';
 import '../chunk-CENOOTAV.js';
 export { LIVE_CURSOR_HIDE_MS, LIVE_CURSOR_REST_MS, LiveCursor } from '../chunk-5XACKNYR.js';
+export { ListInput } from '../chunk-D5JZN3ML.js';
 export { MARKDOWN_FORMATS, MarkdownEditor, formatMarkdown, insertMarkdown, markdownWords } from '../chunk-LZHLSQYK.js';
 export { MERGE_CONFLICTS_LABELS, MergeConflicts } from '../chunk-RWA4H2TV.js';
 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';
@@ -71,12 +71,12 @@ export { InboxGroup, InboxList, InboxMore, InboxRow, InboxToggle } from '../chun
 export { EntityChip } from '../chunk-4KWOKX2B.js';
 export { ErrorBoundary } from '../chunk-XX2VQE55.js';
 export { Eyebrow } from '../chunk-RK4XPHVG.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 { useFullscreen } from '../chunk-XDTYBF2F.js';
+export { FactList } from '../chunk-JI5AVQLA.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';
@@ -93,8 +93,8 @@ export { DATASET_SOURCE_KINDS, DatasetSource, DatasetSourceList } from '../chunk
 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 { DescriptionList, DescriptionListItem } from '../chunk-F2XSYBKH.js';
 export { Combobox } from '../chunk-QS4ZGTEU.js';
 export { CommandPalette } from '../chunk-GTLJXJ3U.js';
 export { ConfirmModal, Modal } from '../chunk-F4DPAJCN.js';
@@ -140,9 +140,8 @@ export { ARTIFACT_KINDS, ArtifactCard, ArtifactKindGlyph } from '../chunk-6J35F3
 export { PRINCIPAL_KINDS, PrincipalAvatar } from '../chunk-4KP4RC3O.js';
 export { RelativeTime, currentNow, formatElapsed, formatExact, formatRelative, formatUntil, toISO, toInstant, useNow } from '../chunk-3CZ7XAVY.js';
 export { EMPTY_VALUE, EmptyValue } from '../chunk-EUCC37WY.js';
-export { AuthLayout } from '../chunk-WHZFDS62.js';
-export { BrandLockup } from '../chunk-7KBNFFM3.js';
 export { AvatarStack, avatarStackLabel } from '../chunk-UAN5NE7M.js';
+export { AuthLayout } from '../chunk-WHZFDS62.js';
 export { AvatarPicker } from '../chunk-PRNX5AFE.js';
 export { HuePicker } from '../chunk-SGIQCI6Y.js';
 export { SegmentedControl } from '../chunk-RCQXUT5K.js';
@@ -152,6 +151,7 @@ export { NODE_HUES, NODE_HUE_NAMES, isNodeHue } from '../chunk-AYKXMIOR.js';
 export { CHARACTER_PICKER_COLUMNS, CharacterPicker } from '../chunk-HVIX5ECM.js';
 import '../chunk-RKKO7QHH.js';
 export { AVATAR_CHARACTER_FULL_DETAIL, AVATAR_CORNER_RATIO, AVATAR_SIZES, AVATAR_STATUSES, AVATAR_STATUS_LABELS, Avatar, avatarCorner, avatarInitialsName, avatarPixels, avatarTint, getInitials } from '../chunk-5OM447RW.js';
+export { BrandLockup } from '../chunk-7KBNFFM3.js';
 export { ACCESS_DENIED_REASONS, AccessDeniedCard } from '../chunk-G3EEUNZQ.js';
 export { EmptyState } from '../chunk-RA2ULG6H.js';
 export { Card } from '../chunk-YZCJ63JF.js';
@@ -167,9 +167,9 @@ export { Menu } from '../chunk-UFKUWVMV.js';
 export { Button, ButtonLink } from '../chunk-OG6CL3EB.js';
 export { LAYER_GAP, LAYER_REPOSITION_EVENT, LayerHost, outsideBounds, placePopup, useLayerContainer, viewportBounds } from '../chunk-HMPFGIWM.js';
 export { focusables, isComposing, isModalLayerOpen, layerCount, useBodyScrollLock, useModalLayer, usePopupLayer } from '../chunk-R25RGPUB.js';
-export { ArrangeBoard } from '../chunk-QO7QEQKV.js';
 export { ArrangeFrame, useGridResize } from '../chunk-DEJHAOC5.js';
 export { Announcer, announce, useAnnouncer } from '../chunk-RSAQOKH3.js';
 export { IconButton } from '../chunk-4FQT6ZAY.js';
 export { VisuallyHidden } from '../chunk-BZFWDIV6.js';
+export { ArrangeBoard } from '../chunk-QO7QEQKV.js';
 export { cx } from '../chunk-ODEQTPFM.js';

package/dist/index.js

@@ -1,30 +1,30 @@
 import './chunk-SLRKS5PF.js';
-export { VersionTimeline } from './chunk-W4XYY73O.js';
+export { TreeCanvas } from './chunk-RSC7UJCR.js';
 export { WidgetFrame } from './chunk-BQYQWJPK.js';
 export { ElementToPngError, elementToPng, serializeElement, toCsv } from './chunk-UOR7TOAU.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';
+export { VersionTimeline } from './chunk-W4XYY73O.js';
+export { Timeline, TimelineItem } from './chunk-AUQPBL4O.js';
 export { TagsInput } from './chunk-2CQLNML5.js';
 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-ALMSY7RL.js';
+export { SlideFilmstrip } from './chunk-LR5QTFOE.js';
+export { SlideGrid } from './chunk-3C3BRIMY.js';
 export { StatCard } from './chunk-IKB6HFGK.js';
 export { StatGroup } from './chunk-JXRI5YD2.js';
-export { SearchTrigger } from './chunk-6DRDCT22.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';
@@ -37,12 +37,13 @@ export { QR_DARK, QR_LIGHT, QR_QUIET_ZONE, QrCode, qrModulePath, qrModules } fro
 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-OGAAHVF6.js';
+export { SLIDE_HEIGHT, SLIDE_WIDTH, SlideStage, useSlideKeys } from './chunk-O63MWA4G.js';
 export { PricingCard } from './chunk-DQSXWQMJ.js';
+export { NewItemsNotice } from './chunk-PXU6HOZB.js';
 export { FactLine, ObjectHeader, SetByLine } from './chunk-VGE3G3T4.js';
 export { OrgNodeDisclosure, OrgNodeLabel, OrgNodeLead } from './chunk-TBMDMXEX.js';
 export { OrgTable, OrgTableActions, OrgTableAdd, OrgTableName } from './chunk-AMNN4WDX.js';
@@ -53,16 +54,15 @@ export { Outline, scrollToHeading, useActiveHeading } from './chunk-A5YKNRG6.js'
 export { PEOPLE_RAIL_LABELS, PeopleRail, peopleRailKey } from './chunk-FVLCTCMV.js';
 import './chunk-CENOOTAV.js';
 export { LIVE_CURSOR_HIDE_MS, LIVE_CURSOR_REST_MS, LiveCursor } from './chunk-5XACKNYR.js';
+export { ListInput } from './chunk-D5JZN3ML.js';
 export { MARKDOWN_FORMATS, MarkdownEditor, formatMarkdown, insertMarkdown, markdownWords } from './chunk-LZHLSQYK.js';
 export { MERGE_CONFLICTS_LABELS, MergeConflicts } from './chunk-RWA4H2TV.js';
 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';
@@ -71,12 +71,12 @@ export { InboxGroup, InboxList, InboxMore, InboxRow, InboxToggle } from './chunk
 export { EntityChip } from './chunk-4KWOKX2B.js';
 export { ErrorBoundary } from './chunk-XX2VQE55.js';
 export { Eyebrow } from './chunk-RK4XPHVG.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 { useFullscreen } from './chunk-XDTYBF2F.js';
+export { FactList } from './chunk-JI5AVQLA.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';
@@ -93,8 +93,8 @@ export { DATASET_SOURCE_KINDS, DatasetSource, DatasetSourceList } from './chunk-
 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 { DescriptionList, DescriptionListItem } from './chunk-F2XSYBKH.js';
 export { Combobox } from './chunk-QS4ZGTEU.js';
 export { CommandPalette } from './chunk-GTLJXJ3U.js';
 export { ConfirmModal, Modal } from './chunk-F4DPAJCN.js';
@@ -140,9 +140,8 @@ export { ARTIFACT_KINDS, ArtifactCard, ArtifactKindGlyph } from './chunk-6J35F33
 export { PRINCIPAL_KINDS, PrincipalAvatar } from './chunk-4KP4RC3O.js';
 export { RelativeTime, currentNow, formatElapsed, formatExact, formatRelative, formatUntil, toISO, toInstant, useNow } from './chunk-3CZ7XAVY.js';
 export { EMPTY_VALUE, EmptyValue } from './chunk-EUCC37WY.js';
-export { AuthLayout } from './chunk-WHZFDS62.js';
-export { BrandLockup } from './chunk-7KBNFFM3.js';
 export { AvatarStack, avatarStackLabel } from './chunk-UAN5NE7M.js';
+export { AuthLayout } from './chunk-WHZFDS62.js';
 export { AvatarPicker } from './chunk-PRNX5AFE.js';
 export { HuePicker } from './chunk-SGIQCI6Y.js';
 export { SegmentedControl } from './chunk-RCQXUT5K.js';
@@ -152,6 +151,7 @@ export { NODE_HUES, NODE_HUE_NAMES, isNodeHue } from './chunk-AYKXMIOR.js';
 export { CHARACTER_PICKER_COLUMNS, CharacterPicker } from './chunk-HVIX5ECM.js';
 import './chunk-RKKO7QHH.js';
 export { AVATAR_CHARACTER_FULL_DETAIL, AVATAR_CORNER_RATIO, AVATAR_SIZES, AVATAR_STATUSES, AVATAR_STATUS_LABELS, Avatar, avatarCorner, avatarInitialsName, avatarPixels, avatarTint, getInitials } from './chunk-5OM447RW.js';
+export { BrandLockup } from './chunk-7KBNFFM3.js';
 export { ACCESS_DENIED_REASONS, AccessDeniedCard } from './chunk-G3EEUNZQ.js';
 export { EmptyState } from './chunk-RA2ULG6H.js';
 export { Card } from './chunk-YZCJ63JF.js';
@@ -167,9 +167,9 @@ export { Menu } from './chunk-UFKUWVMV.js';
 export { Button, ButtonLink } from './chunk-OG6CL3EB.js';
 export { LAYER_GAP, LAYER_REPOSITION_EVENT, LayerHost, outsideBounds, placePopup, useLayerContainer, viewportBounds } from './chunk-HMPFGIWM.js';
 export { focusables, isComposing, isModalLayerOpen, layerCount, useBodyScrollLock, useModalLayer, usePopupLayer } from './chunk-R25RGPUB.js';
-export { ArrangeBoard } from './chunk-QO7QEQKV.js';
 export { ArrangeFrame, useGridResize } from './chunk-DEJHAOC5.js';
 export { Announcer, announce, useAnnouncer } from './chunk-RSAQOKH3.js';
 export { IconButton } from './chunk-4FQT6ZAY.js';
 export { VisuallyHidden } from './chunk-BZFWDIV6.js';
+export { ArrangeBoard } from './chunk-QO7QEQKV.js';
 export { cx } from './chunk-ODEQTPFM.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.1",
   "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.1",
+    "@crewlethq/tokens": "0.27.1",
     "uqr": "0.1.3"
   },
   "peerDependencies": {

package/dist/chunk-KNLJL3VP.js

@@ -1,101 +0,0 @@
-import { isComposing } from './chunk-R25RGPUB.js';
-import { cx } from './chunk-ODEQTPFM.js';
-import './SlideStage-XIOTMMRU.css';
-import { useRef, useState, useLayoutEffect, useEffect } from 'react';
-import { jsx } from 'react/jsx-runtime';
-
-var SLIDE_WIDTH = 1920;
-var SLIDE_HEIGHT = 1080;
-function SlideStage({
-  children,
-  label,
-  fit = "width",
-  scale,
-  width = SLIDE_WIDTH,
-  height = SLIDE_HEIGHT,
-  className
-}) {
-  const box = useRef(null);
-  const [measured, setMeasured] = useState({
-    scale: 0,
-    left: 0,
-    top: 0
-  });
-  useLayoutEffect(() => {
-    const el = box.current;
-    if (!el || scale !== void 0) return void 0;
-    const read = () => {
-      const w = el.clientWidth;
-      const h = el.clientHeight;
-      if (fit === "contain") {
-        const s2 = Math.min(w / width, h / height);
-        setMeasured({ scale: s2, left: (w - width * s2) / 2, top: (h - height * s2) / 2 });
-      } else {
-        setMeasured({ scale: w / width, left: 0, top: 0 });
-      }
-    };
-    read();
-    if (typeof ResizeObserver === "undefined") return void 0;
-    const observer = new ResizeObserver(read);
-    observer.observe(el);
-    return () => observer.disconnect();
-  }, [fit, scale, width, height]);
-  const s = scale ?? measured.scale;
-  const boxStyle = fit === "width" || scale !== void 0 ? { aspectRatio: `${width} / ${height}`, ...scale !== void 0 ? { width: width * scale } : {} } : {};
-  const frameStyle = {
-    width,
-    height,
-    transform: `translate(${scale === void 0 ? measured.left : 0}px, ${scale === void 0 ? measured.top : 0}px) scale(${s})`,
-    // Hidden until measured, so a slide is never painted at full size for
-    // one frame inside a thumbnail.
-    visibility: s > 0 ? "visible" : "hidden"
-  };
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      ref: box,
-      className: cx("crewlet-slide-stage", `crewlet-slide-stage--${fit}`, className),
-      style: boxStyle,
-      role: "group",
-      "aria-roledescription": "slide",
-      "aria-label": label,
-      children: /* @__PURE__ */ jsx("div", { className: "crewlet-slide-stage__frame", style: frameStyle, children })
-    }
-  );
-}
-function typing(target) {
-  if (!(target instanceof HTMLElement)) return false;
-  return target.isContentEditable || ["INPUT", "TEXTAREA", "SELECT"].includes(target.tagName);
-}
-function useSlideKeys({ onNext, onPrevious, onFirst, onLast, onExit, enabled = true }) {
-  useEffect(() => {
-    if (!enabled) return void 0;
-    const onKeyDown = (event) => {
-      if (event.defaultPrevented || isComposing(event) || typing(event.target)) return;
-      if (event.altKey || event.ctrlKey || event.metaKey) return;
-      const act = {
-        ArrowRight: onNext,
-        ArrowDown: onNext,
-        PageDown: onNext,
-        " ": onNext,
-        Enter: onNext,
-        ArrowLeft: onPrevious,
-        ArrowUp: onPrevious,
-        PageUp: onPrevious,
-        Backspace: onPrevious,
-        Home: onFirst,
-        End: onLast,
-        Escape: onExit
-      };
-      const fn = act[event.key];
-      if (!fn) return;
-      if ((event.key === "Enter" || event.key === " ") && event.target instanceof HTMLButtonElement) return;
-      event.preventDefault();
-      fn();
-    };
-    document.addEventListener("keydown", onKeyDown);
-    return () => document.removeEventListener("keydown", onKeyDown);
-  }, [enabled, onNext, onPrevious, onFirst, onLast, onExit]);
-}
-
-export { SLIDE_HEIGHT, SLIDE_WIDTH, SlideStage, useSlideKeys };