@enigmax/primitives 0.25.0 → 0.26.0

package/dist/index.d.ts

@@ -9,7 +9,8 @@ export { R as RelativeTimeFormat, a as RelativeTimeOptions, b as RelativeTimePre
 export { F as FLAG_CDN, a as FLAG_RATIO, b as FlagConfig, c as FlagFormat, d as FlagOptions, e as FlagShape, f as FlagSource, g as FlagView, h as configureFlags, i as flagAttributes, j as flagConfig, k as flagName, l as flagSrc, m as flagView, n as normalizeFlagCode, r as resetFlagConfig } from './flags-BQU1V9rE.js';
 export { P as PaletteKey, a as PositionedRow, R as RecentEntry, b as RecentStore, c as RecentStoreOptions, d as RowGroup, e as createRecentStore, g as groupRows, i as isPaletteShortcut, m as moveActive, r as recentKey, s as shortcutLabel } from './palette-D7iuQh_T.js';
 export { S as SELECT_SEARCH_KEYS, a as SelectInstance, b as SelectMoveKey, c as SelectOption, d as SelectOptions, e as SelectState, f as createSelect } from './select-ClSy-J1f.js';
-export { C as CLIPBOARD_PREFIX, a as CONTEXT_MENU_SEARCH_KEYS, b as ClipboardAction, c as ClipboardMenuLabels, d as ClipboardMenuOptions, e as ClipboardTarget, f as ContextMenuAction, g as ContextMenuEntry, h as ContextMenuInstance, i as ContextMenuLabel, j as ContextMenuLevel, k as ContextMenuMoveKey, l as ContextMenuOptions, m as ContextMenuPoint, n as ContextMenuSeparator, o as ContextMenuState, p as clipboardAction, q as clipboardEntries, r as clipboardHasText, s as createContextMenu, t as inspectClipboardTarget, u as isAction, v as performClipboardAction } from './clipboard-menu-B_ouitfS.js';
+export { C as CONTEXT_MENU_SEARCH_KEYS, a as ContextMenuAction, b as ContextMenuEntry, c as ContextMenuInstance, d as ContextMenuLabel, e as ContextMenuLevel, f as ContextMenuMoveKey, g as ContextMenuOptions, h as ContextMenuPoint, i as ContextMenuSeparator, j as ContextMenuState, k as createContextMenu, l as isAction } from './context-menu-D3FtTn7v.js';
+export { C as CLIPBOARD_PREFIX, a as ClipboardAction, b as ClipboardMenuLabels, c as ClipboardMenuOptions, d as ClipboardTarget, e as clipboardAction, f as clipboardEntries, g as clipboardHasText, i as inspectClipboardTarget, p as performClipboardAction } from './clipboard-menu-BvXJCSFN.js';
 export { D as DEFAULT_SELECTION_SHORTCUTS, S as SelectionClickModifiers, a as SelectionCommand, b as SelectionCommandEvent, c as SelectionCommandName, d as SelectionInstance, e as SelectionOptions, f as SelectionShortcuts, g as SelectionState, h as createSelection } from './selection-B_pmzHpy.js';
 export { S as Shortcut, a as ShortcutEvent, b as ShortcutSpec, T as TYPEAHEAD_MS, c as TypeaheadState, d as TypeaheadStep, i as isApplePlatform, m as matchesShortcut, p as parseShortcut, s as shortcutList, e as shortcutText, f as shortcutTokens, t as typeaheadStep } from './keys-D2zJs1uB.js';
 
@@ -39,4 +40,267 @@ declare const INPUT_ICON_PATHS: {
 /** The same shapes as a standalone SVG string, for the DOM renderer below. */
 declare function iconMarkup(paths: readonly string[]): string;
 
-export { INPUT_ICON_PATHS, iconMarkup };
+/**
+ * The arithmetic behind the image viewer: zoom around a point, panning that cannot lose the
+ * image, moving through a set, and getting a file onto the disk.
+ *
+ * Not a React module, and deliberately: none of this is rendering. A page drawing its own
+ * viewer, or a test, gets the same maths - and the parts that are easy to get wrong (zoom
+ * that drifts away from the cursor, a pan that strands the image off screen, a download that
+ * silently opens a tab instead) are then testable without a browser.
+ */
+/** How far the image is scaled, and where its centre sits relative to the frame's, in px. */
+interface Transform {
+    scale: number;
+    x: number;
+    y: number;
+}
+interface ZoomLimits {
+    min: number;
+    max: number;
+}
+/** A box in viewport coordinates - the frame the image is being viewed in. */
+interface Box {
+    left: number;
+    top: number;
+    width: number;
+    height: number;
+}
+declare const IDENTITY: Transform;
+declare const ZOOM_LIMITS: ZoomLimits;
+/** What a keyboard `+`/`-` step multiplies by, and the ratio a double press toggles to. */
+declare const ZOOM_STEP = 1.35;
+declare const ZOOM_DOUBLE = 2.5;
+declare function clampScale(scale: number, limits?: ZoomLimits): number;
+/**
+ * A wheel notch to a zoom factor.
+ *
+ * `deltaMode` matters: a mouse reports pixels, but Firefox reports LINES (mode 1) and a page
+ * scroll reports pages (mode 2), so treating every delta as pixels makes the same gesture
+ * zoom a hundred times harder in one browser than another. The exponential keeps a notch
+ * proportional - zooming out from 8x and in from 1x take the same number of turns.
+ */
+declare function wheelFactor(deltaY: number, deltaMode?: number): number;
+/**
+ * Zoom, keeping the point under the pointer under the pointer.
+ *
+ * The defect this exists for: scaling around the frame's centre slides whatever the visitor
+ * was pointing at out from under them, so zooming into a face means zooming and then hunting
+ * for it again. The offset is corrected by how much that point moved when the scale changed.
+ */
+declare function zoomAt(current: Transform, factor: number, point: {
+    x: number;
+    y: number;
+}, box: Box, limits?: ZoomLimits): Transform;
+/**
+ * Keep the image over the frame.
+ *
+ * At 1x it is centred and there is nothing to pan. Zoomed, the offset is bounded by the half
+ * of the image that hangs outside the frame - without it a drag can throw the picture off the
+ * screen entirely, and the only way back is to close the viewer.
+ */
+declare function clampPan(transform: Transform, box: Box, natural: {
+    width: number;
+    height: number;
+}): Transform;
+/** The size an image is DRAWN at inside a frame it is fitted to, which is what pan is bounded by. */
+declare function fittedSize(natural: {
+    width: number;
+    height: number;
+}, box: Box): {
+    width: number;
+    height: number;
+};
+/** The distance between two pointers, for a pinch. */
+declare function pinchDistance(a: {
+    x: number;
+    y: number;
+}, b: {
+    x: number;
+    y: number;
+}): number;
+/**
+ * The next index in a set, skipping what has been discarded.
+ *
+ * Returns -1 when there is nothing left to show, which is the viewer's cue to close rather
+ * than to sit on an empty frame.
+ */
+declare function nextIndex(index: number, length: number, step: number, options?: {
+    loop?: boolean;
+    skip?: ReadonlySet<number>;
+}): number;
+/** The file name to save as: whatever the caller asked for, else the one in the URL. */
+declare function filenameFrom(url: string, fallback?: string): string;
+/**
+ * Save the file, rather than navigate to it.
+ *
+ * `<a download>` is honoured only for a same-origin URL; on a CDN the browser ignores the
+ * attribute and opens the image in a tab instead, which is not what the row said it would do.
+ * So the bytes are fetched and handed over as a blob, and the plain anchor is the fallback for
+ * when that is refused (no CORS header) - a tab is still better than nothing happening.
+ */
+declare function downloadFile(url: string, filename?: string): Promise<void>;
+/** How long the picture takes to fly, when the stylesheet does not say otherwise. */
+declare const FLIGHT_MS = 300;
+/**
+ * How long the flight ACTUALLY lasts, read off the element.
+ *
+ * The duration lives in the stylesheet (`--enigma-image-flight`), so a project that slows it
+ * down would otherwise have the viewer give up waiting halfway through and close mid-flight.
+ * The constant above is only the answer for an element with no transition on it at all.
+ */
+declare function flightMs(element: Element | null): number;
+/**
+ * The transform that puts a picture exactly over another box.
+ *
+ * This is the FLIP the lightbox opens with: the full-size image is laid out where it belongs,
+ * measured, and then drawn back ON the thumbnail with this transform - so releasing it to the
+ * identity transform is the picture growing out of the one in the page rather than a dialog
+ * appearing over it. Closing is the same transform applied in the other direction.
+ *
+ * Both boxes are the same picture, so one scale is enough; the width is used because a
+ * thumbnail is nearly always constrained by it. Null when either box has not been laid out
+ * yet, which is the caller's cue to skip the animation rather than to divide by zero.
+ */
+declare function flightFrom(from: Box, to: Box): Transform | null;
+/** Whether the reader has asked for less movement. Every animation here is skipped when they have. */
+declare function prefersReducedMotion(): boolean;
+
+/**
+ * The arithmetic behind the video player: times, seeking, buffering, volume and the keys.
+ *
+ * None of it is rendering, so it is testable without a browser and reusable by a page that
+ * draws its own controls - the same split the colour maths and the image viewer's are in.
+ */
+/** The playback rates the settings menu offers, in the order it lists them. */
+declare const SPEEDS: readonly [0.5, 0.75, 1, 1.25, 1.5, 1.75, 2];
+/** How far the arrows seek, in seconds, and what a bigger jump moves by. */
+declare const SEEK_STEP = 5;
+declare const SEEK_JUMP = 10;
+declare const VOLUME_STEP = 0.05;
+/**
+ * Seconds as a clock, sized by the LONGEST time it will have to show.
+ *
+ * `duration` is what stops the label changing width mid-playback: a 1h04m video passing 10:00
+ * would otherwise go from `9:59` to `10:00` to `1:00:00`, and every control after it moves.
+ */
+declare function formatTime(seconds: number, duration?: number): string;
+/** A time as a fraction of the duration, safe before the metadata says what that is. */
+declare function progress(time: number, duration: number): number;
+/** Where a press on a horizontal rail lands, as a fraction of it. */
+declare function fractionAt(box: {
+    left: number;
+    width: number;
+}, clientX: number): number;
+/**
+ * How much is buffered AHEAD of where playback is.
+ *
+ * The range under the playhead, not the largest one: a viewer who seeks past the buffer is
+ * looking at a bar that says nothing is loaded, which is true of the part they are watching.
+ */
+declare function bufferedAhead(ranges: TimeRanges | null, time: number, duration: number): number;
+/** The next rate in the list, wrapping - what a repeated press on the speed row does. */
+declare function nextSpeed(current: number, step?: number): number;
+/** What a key press means, or null when the player should leave it to the page. */
+type PlayerCommand = {
+    type: "toggle";
+} | {
+    type: "seek";
+    by: number;
+} | {
+    type: "seekTo";
+    fraction: number;
+} | {
+    type: "volume";
+    by: number;
+} | {
+    type: "mute";
+} | {
+    type: "fullscreen";
+} | {
+    type: "captions";
+} | {
+    type: "pip";
+};
+/**
+ * The shortcuts, as the platform's video players define them.
+ *
+ * Space and K play, J and L jump ten, the arrows nudge five and the volume, M mutes, F is
+ * fullscreen, C captions, and a digit seeks to that tenth of the video.
+ */
+declare function commandFor(key: string): PlayerCommand | null;
+/**
+ * Whether a key press belongs to the page rather than to the player.
+ *
+ * A shortcut that fires while somebody is typing turns their space bar into a pause, so the
+ * player stands down inside anything that takes text.
+ */
+declare function isTypingTarget(target: EventTarget | null): boolean;
+/** Whether the document is showing something fullscreen, across the two spellings of it. */
+declare function fullscreenElement(): Element | null;
+/**
+ * Fullscreen, including the one platform that will not give it to a container.
+ *
+ * iOS Safari has no Fullscreen API on an arbitrary element: the only thing that can fill the
+ * screen is the video itself, through `webkitEnterFullscreen`. Without that branch the button
+ * does nothing at all on an iPhone, which is where most video is watched.
+ */
+declare function toggleFullscreen(container: HTMLElement, video: HTMLVideoElement | null): Promise<void>;
+/** Picture in picture, where the browser has it. Firefox has its own button and no API. */
+declare function supportsPip(): boolean;
+declare function togglePip(video: HTMLVideoElement): Promise<void>;
+/** One subtitle track, as the menu lists it. */
+interface CaptionTrack {
+    /** Where it sits in the element's own `textTracks`, which is what turns it on. */
+    index: number;
+    label: string;
+    language: string;
+}
+/** Which of the element's text tracks are subtitles a viewer would choose between. */
+declare function captionTracks(list: TextTrackList | null | undefined): CaptionTrack[];
+/**
+ * The track the element is SHOWING, or -1.
+ *
+ * Read rather than remembered: a `default` track is showing before any button was pressed, and
+ * a player that assumed "off" would need two presses to turn something off.
+ */
+declare function activeCaption(list: TextTrackList | null | undefined): number;
+/**
+ * Show one track and disable the rest. -1 turns them all off.
+ *
+ * "disabled" rather than "hidden": a hidden track still fires its cues, so a page listening to
+ * `cuechange` for its own transcript would keep receiving a language nobody asked for.
+ */
+declare function showCaption(list: TextTrackList | null | undefined, index: number): void;
+/** What the cast control knows about the world. */
+interface RemoteState {
+    /** There is somewhere to cast TO. Before the browser has looked, this is optimistic. */
+    available: boolean;
+    /** Playing on that screen right now. */
+    connected: boolean;
+}
+/**
+ * Whether this element can be cast at all.
+ *
+ * `disableRemotePlayback` is honoured: a page that asked for the button to be gone does not
+ * get one drawn over its video by a component.
+ */
+declare function supportsRemote(video: HTMLVideoElement | null): boolean;
+/**
+ * Watch for a screen to cast to, and for the connection to it.
+ *
+ * WHY AVAILABILITY IS OPTIMISTIC WHEN THE WATCH FAILS. `watchAvailability` rejects with
+ * NotSupportedError on the platforms that can still `prompt()` - Safari, and Chromium for some
+ * sources - so treating a rejection as "no devices" hides a control that works. A button that
+ * opens an empty picker is a smaller loss than a missing one.
+ */
+declare function watchRemote(video: HTMLVideoElement, onChange: (state: RemoteState) => void): () => void;
+/**
+ * Open the browser's own device picker.
+ *
+ * There is no list to draw ourselves: both APIs hand the choice to the platform, which is the
+ * only thing that can enumerate the screens on the network.
+ */
+declare function promptRemote(video: HTMLVideoElement): Promise<void>;
+
+export { type Box, type CaptionTrack, FLIGHT_MS, IDENTITY, INPUT_ICON_PATHS, type PlayerCommand, type RemoteState, SEEK_JUMP, SEEK_STEP, SPEEDS, type Transform, VOLUME_STEP, ZOOM_DOUBLE, ZOOM_LIMITS, ZOOM_STEP, type ZoomLimits, activeCaption, bufferedAhead, captionTracks, clampPan, clampScale, commandFor, downloadFile, filenameFrom, fittedSize, flightFrom, flightMs, formatTime, fractionAt, fullscreenElement, iconMarkup, isTypingTarget, nextIndex, nextSpeed, pinchDistance, prefersReducedMotion, progress, promptRemote, showCaption, supportsPip, supportsRemote, toggleFullscreen, togglePip, watchRemote, wheelFactor, zoomAt };

package/dist/index.js

@@ -1,14 +1,16 @@
+export { FLIGHT_MS, IDENTITY, ZOOM_DOUBLE, ZOOM_LIMITS, ZOOM_STEP, clampPan, clampScale, downloadFile, filenameFrom, fittedSize, flightFrom, flightMs, nextIndex, pinchDistance, prefersReducedMotion, wheelFactor, zoomAt } from './chunk-QIIV2QSV.js';
 export { createInput } from './chunk-KJINGUQN.js';
+export { colorEquals, formatColor, hslToRgb, hsvToRgb, parseColor, rgbToHsl, rgbToHsv, toHex } from './chunk-S2FPN5ID.js';
+export { SERVER_NETWORK_STATE, createNetworkMonitor } from './chunk-2QFTRNAZ.js';
 export { ensureZone, normalizeDate, parseDuration, relativeTimeAttributes, relativeTimeView } from './chunk-IXVMRVD4.js';
 export { estimatePasswordStrength, generatePassword } from './chunk-HC2ME5PU.js';
-export { colorEquals, formatColor, hslToRgb, hsvToRgb, parseColor, rgbToHsl, rgbToHsv, toHex } from './chunk-S2FPN5ID.js';
 export { CLIPBOARD_PREFIX, CONTEXT_MENU_SEARCH_KEYS, clipboardAction, clipboardEntries, clipboardHasText, createContextMenu, inspectClipboardTarget, isAction, performClipboardAction } from './chunk-Z3VDE7OA.js';
 export { DEFAULT_SELECTION_SHORTCUTS, createSelection } from './chunk-WSQC3PCC.js';
+export { SEEK_JUMP, SEEK_STEP, SPEEDS, VOLUME_STEP, activeCaption, bufferedAhead, captionTracks, commandFor, formatTime, fractionAt, fullscreenElement, isTypingTarget, nextSpeed, progress, promptRemote, showCaption, supportsPip, supportsRemote, toggleFullscreen, togglePip, watchRemote } from './chunk-RUEQ3TGP.js';
 export { createButton } from './chunk-MMQPZGSU.js';
 export { FLAG_CDN, FLAG_RATIO, configureFlags, flagAttributes, flagConfig, flagName, flagSrc, flagView, normalizeFlagCode, resetFlagConfig } from './chunk-LMZJBOZG.js';
 export { createNotifications } from './chunk-SNYUBXWQ.js';
 export { createMarquee } from './chunk-UOSSNUSC.js';
-export { SERVER_NETWORK_STATE, createNetworkMonitor } from './chunk-2QFTRNAZ.js';
 export { INPUT_ICON_PATHS, iconMarkup } from './chunk-F25CGNQC.js';
 export { SELECT_SEARCH_KEYS, createSelect } from './chunk-NONGREXC.js';
 export { TYPEAHEAD_MS, isApplePlatform, matchesShortcut, parseShortcut, shortcutList, shortcutText, shortcutTokens, typeaheadStep } from './chunk-4VUHQFAT.js';

package/dist/menu-MSQSE6U5.js

@@ -0,0 +1,54 @@
+import { Download, MenuButton } from './chunk-ISXB5RUH.js';
+import { downloadFile } from './chunk-QIIV2QSV.js';
+import { ContextMenu, useContextMenuContext } from './chunk-DZMHY3SU.js';
+import './chunk-EYZ366LP.js';
+import './chunk-Z3VDE7OA.js';
+import './chunk-4VUHQFAT.js';
+import './chunk-HS3X3XCW.js';
+import './chunk-4ZPMP47J.js';
+import { useRef } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function ImageMenu({ item, index, options, labels }) {
+  const rows = [];
+  if (options.download !== false) {
+    rows.push({ id: "download", label: labels.download ?? "Download", icon: /* @__PURE__ */ jsx(Download, {}) });
+  }
+  if (options.items?.length) {
+    if (rows.length > 0) rows.push({ type: "separator" });
+    rows.push(...options.items);
+  }
+  return /* @__PURE__ */ jsxs(
+    ContextMenu.Root,
+    {
+      items: rows,
+      clipboard: false,
+      onSelect: (row) => {
+        if (row.id === "download") void downloadFile(item.download ?? item.src, item.filename);
+        options.onSelect?.(row.id, item, index);
+      },
+      children: [
+        /* @__PURE__ */ jsx(Trigger, { label: labels.menu ?? "More" }),
+        /* @__PURE__ */ jsx(ContextMenu.Content, {})
+      ]
+    }
+  );
+}
+function Trigger({ label }) {
+  const menu = useContextMenuContext("Image.Menu");
+  const ref = useRef(null);
+  return /* @__PURE__ */ jsx("span", { ref, style: { display: "contents" }, children: /* @__PURE__ */ jsx(
+    MenuButton,
+    {
+      label,
+      expanded: menu.state.open,
+      onPress: () => {
+        const box = ref.current?.firstElementChild?.getBoundingClientRect();
+        if (!box) return;
+        menu.open({ x: box.right, y: box.bottom + 6 });
+      }
+    }
+  ) });
+}
+
+export { ImageMenu };

package/dist/menu-PNQRTRNV.js

@@ -0,0 +1,33 @@
+import { ContextMenu, useContextMenuContext } from './chunk-DZMHY3SU.js';
+import './chunk-Z3VDE7OA.js';
+import './chunk-4VUHQFAT.js';
+import './chunk-HS3X3XCW.js';
+import './chunk-4ZPMP47J.js';
+import { useEffect } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function VideoMenu({ rows, title, onSelect, onReady }) {
+  return /* @__PURE__ */ jsxs(
+    ContextMenu.Root,
+    {
+      items: rows,
+      title,
+      clipboard: false,
+      onSelect,
+      children: [
+        /* @__PURE__ */ jsx(Publish, { onReady }),
+        /* @__PURE__ */ jsx(ContextMenu.Content, {})
+      ]
+    }
+  );
+}
+function Publish({ onReady }) {
+  const menu = useContextMenuContext("Video.Menu");
+  useEffect(() => {
+    onReady(menu.open);
+    return () => onReady(null);
+  }, [menu.open, onReady]);
+  return null;
+}
+
+export { VideoMenu };

package/dist/next/index.d.ts

@@ -23,11 +23,15 @@ export { PaletteContent, PaletteContextValue, PaletteField, PaletteFooter, Palet
 export { R as RecentEntry, b as RecentStore, e as createRecentStore, g as groupRows, i as isPaletteShortcut, m as moveActive, r as recentKey, s as shortcutLabel } from '../palette-D7iuQh_T.js';
 export { Select, SelectContent, SelectContextValue, SelectItem, SelectList, SelectMultipleProps, SelectOptionRow, SelectProps, SelectRoot, SelectRootProps, SelectSearch, SelectSingleProps, SelectTrigger, SelectValue, useSelectContext } from '../react/select.js';
 export { a as SelectInstance, c as SelectOption, d as SelectOptions, e as SelectState, f as createSelect } from '../select-ClSy-J1f.js';
-export { ContextMenu, ContextMenuContent, ContextMenuContentProps, ContextMenuContextValue, ContextMenuItem, ContextMenuList, ContextMenuNode, ContextMenuPanel, ContextMenuProps, ContextMenuRoot, ContextMenuRootProps, ContextMenuRow, ContextMenuSearch, ContextMenuTrigger, ContextMenuTriggerProps, useContextMenuContext } from '../react/context-menu.js';
-export { C as CLIPBOARD_PREFIX, b as ClipboardAction, c as ClipboardMenuLabels, d as ClipboardMenuOptions, e as ClipboardTarget, f as ContextMenuAction, g as ContextMenuEntry, h as ContextMenuInstance, l as ContextMenuOptions, o as ContextMenuState, p as clipboardAction, q as clipboardEntries, r as clipboardHasText, s as createContextMenu, t as inspectClipboardTarget, u as isAction, v as performClipboardAction } from '../clipboard-menu-B_ouitfS.js';
+export { ContextMenu, ContextMenuContent, ContextMenuContentProps, ContextMenuList, ContextMenuPanel, ContextMenuProps, ContextMenuRoot, ContextMenuRootProps, ContextMenuRow, ContextMenuSearch, ContextMenuTrigger, ContextMenuTriggerProps } from '../react/context-menu.js';
+export { C as CLIPBOARD_PREFIX, a as ClipboardAction, b as ClipboardMenuLabels, c as ClipboardMenuOptions, d as ClipboardTarget, e as clipboardAction, f as clipboardEntries, g as clipboardHasText, i as inspectClipboardTarget, p as performClipboardAction } from '../clipboard-menu-BvXJCSFN.js';
+export { a as ContextMenuAction, b as ContextMenuEntry, c as ContextMenuInstance, g as ContextMenuOptions, j as ContextMenuState, k as createContextMenu, l as isAction } from '../context-menu-D3FtTn7v.js';
 export { MarqueeRect, SelectionList, SelectionListProps, SelectionRenderer, SelectionRowRender, UseSelectionOptions, UseSelectionResult, useSelection } from '../react/selection.js';
 export { D as DEFAULT_SELECTION_SHORTCUTS, a as SelectionCommand, b as SelectionCommandEvent, c as SelectionCommandName, d as SelectionInstance, e as SelectionOptions, f as SelectionShortcuts, g as SelectionState, h as createSelection } from '../selection-B_pmzHpy.js';
 export { S as Shortcut, b as ShortcutSpec, i as isApplePlatform, m as matchesShortcut, p as parseShortcut, e as shortcutText, f as shortcutTokens } from '../keys-D2zJs1uB.js';
+export { Image, ImageItem, ImageLabels, ImageMenuOptions, ImageProps, ImageSource, ZoomOptions } from '../react/image.js';
+export { Video, VideoControls, VideoLabels, VideoProps, VideoSource, VideoTrack } from '../react/video.js';
+export { C as ContextMenuContextValue, a as ContextMenuItem, b as ContextMenuNode, u as useContextMenuContext } from '../context-BfjYGPnH.js';
 
 /**
  * The Next.js entry. Same components, wired to `next/link`.

package/dist/next/index.js

@@ -1,29 +1,33 @@
 "use client";
-export { useInput } from '../chunk-MSOCCQGH.js';
+export { useInput } from '../chunk-T7I6WJSN.js';
+export { useSearch } from '../chunk-45UHLZYT.js';
+export { useNetworkState } from '../chunk-S653GLSF.js';
 export { RelativeTime } from '../chunk-OCMI7R6H.js';
 export { PasswordStrength } from '../chunk-XQHCZAPJ.js';
 export { ContextMenu, ContextMenuContent, ContextMenuList, ContextMenuPanel, ContextMenuRoot, ContextMenuRow, ContextMenuSearch, ContextMenuTrigger, useContextMenuContext } from '../chunk-DZMHY3SU.js';
 export { SelectionList, useSelection } from '../chunk-N6PDHMAX.js';
+export { Image } from '../chunk-4SZ5N7BA.js';
+import '../chunk-EYZ366LP.js';
+export { Video } from '../chunk-JJVZYW5C.js';
 import { Button } from '../chunk-6BGBYUSZ.js';
 export { getLinkComponent, setLinkComponent, useButton } from '../chunk-6BGBYUSZ.js';
 export { Flag } from '../chunk-NPHRS2Q7.js';
 export { Toaster, toast, useSonner } from '../chunk-WPTBURIC.js';
 export { createNotificationQueue, defaultQueue, useNotifications } from '../chunk-QYMUIW5I.js';
 export { useMarquee } from '../chunk-ZWR2EXHQ.js';
-export { useSearch } from '../chunk-45UHLZYT.js';
-export { useNetworkState } from '../chunk-S653GLSF.js';
 import '../chunk-KJINGUQN.js';
+export { colorEquals, formatColor, hslToRgb, hsvToRgb, parseColor, rgbToHsl, rgbToHsv, toHex } from '../chunk-S2FPN5ID.js';
+import '../chunk-2QFTRNAZ.js';
 import '../chunk-IXVMRVD4.js';
 export { estimatePasswordStrength, generatePassword } from '../chunk-HC2ME5PU.js';
-export { colorEquals, formatColor, hslToRgb, hsvToRgb, parseColor, rgbToHsl, rgbToHsv, toHex } from '../chunk-S2FPN5ID.js';
 export { CLIPBOARD_PREFIX, clipboardAction, clipboardEntries, clipboardHasText, createContextMenu, inspectClipboardTarget, isAction, performClipboardAction } from '../chunk-Z3VDE7OA.js';
 export { DEFAULT_SELECTION_SHORTCUTS, createSelection } from '../chunk-WSQC3PCC.js';
+import '../chunk-RUEQ3TGP.js';
 import '../chunk-MMQPZGSU.js';
 export { configureFlags, flagAttributes, flagName, flagSrc, flagView, normalizeFlagCode } from '../chunk-LMZJBOZG.js';
 import '../chunk-SNYUBXWQ.js';
 import '../chunk-UOSSNUSC.js';
-import '../chunk-2QFTRNAZ.js';
-export { Input } from '../chunk-3MGBZOAU.js';
+export { Input } from '../chunk-RMNXVWQ4.js';
 import '../chunk-KVLSOQTI.js';
 import '../chunk-F25CGNQC.js';
 export { PaletteContent, PaletteField, PaletteFooter, PaletteItem, PaletteList, PaletteRoot, PaletteTrigger, SearchPalette, usePaletteContext } from '../chunk-FGBIZDV2.js';

package/dist/react/context-menu.d.ts

@@ -1,59 +1,13 @@
-import { ReactNode, RefObject, ComponentPropsWithoutRef } from 'react';
-import { f as ContextMenuAction, g as ContextMenuEntry, h as ContextMenuInstance, o as ContextMenuState, m as ContextMenuPoint, d as ClipboardMenuOptions, l as ContextMenuOptions } from '../clipboard-menu-B_ouitfS.js';
-export { C as CLIPBOARD_PREFIX, a as CONTEXT_MENU_SEARCH_KEYS, b as ClipboardAction, c as ClipboardMenuLabels, e as ClipboardTarget, i as ContextMenuLabel, j as ContextMenuLevel, k as ContextMenuMoveKey, n as ContextMenuSeparator, p as clipboardAction, q as clipboardEntries, r as clipboardHasText, s as createContextMenu, t as inspectClipboardTarget, u as isAction, v as performClipboardAction } from '../clipboard-menu-B_ouitfS.js';
+import { ReactNode, ComponentPropsWithoutRef } from 'react';
+import { b as ContextMenuNode, a as ContextMenuItem } from '../context-BfjYGPnH.js';
+export { C as ContextMenuContextValue, u as useContextMenuContext } from '../context-BfjYGPnH.js';
+import { c as ClipboardMenuOptions } from '../clipboard-menu-BvXJCSFN.js';
+export { C as CLIPBOARD_PREFIX, a as ClipboardAction, b as ClipboardMenuLabels, d as ClipboardTarget, e as clipboardAction, f as clipboardEntries, g as clipboardHasText, i as inspectClipboardTarget, p as performClipboardAction } from '../clipboard-menu-BvXJCSFN.js';
+import { g as ContextMenuOptions, b as ContextMenuEntry } from '../context-menu-D3FtTn7v.js';
+export { C as CONTEXT_MENU_SEARCH_KEYS, a as ContextMenuAction, c as ContextMenuInstance, d as ContextMenuLabel, e as ContextMenuLevel, f as ContextMenuMoveKey, h as ContextMenuPoint, i as ContextMenuSeparator, j as ContextMenuState, k as createContextMenu, l as isAction } from '../context-menu-D3FtTn7v.js';
 export { S as Shortcut, b as ShortcutSpec, m as matchesShortcut, p as parseShortcut, e as shortcutText, f as shortcutTokens } from '../keys-D2zJs1uB.js';
 import '../search-DYgqRp37.js';
 
-/**
- * One row, as React draws it. The core carries `icon` as `unknown` because it cannot know
- * what a node is; here it is one.
- */
-interface ContextMenuItem extends Omit<ContextMenuAction, "icon" | "items"> {
-    icon?: ReactNode;
-    items?: readonly ContextMenuNode[];
-}
-/** Anything that can appear in a menu, with React's icon type. */
-type ContextMenuNode = ContextMenuItem | Exclude<ContextMenuEntry, ContextMenuAction>;
-interface ContextMenuContextValue {
-    instance: ContextMenuInstance;
-    state: ContextMenuState;
-    /**
-     * Open at a point, over what the press landed on. False when there was nothing to show,
-     * so the press is left alone.
-     *
-     * `target` is what the clipboard rows are built from - the field or the selection under
-     * the pointer - and a caller that leaves it out gets a menu with none of them, which is
-     * the right answer for a menu opened from somewhere that is not a press.
-     */
-    open: (point: ContextMenuPoint, target?: EventTarget | null) => boolean;
-    close: () => void;
-    /** ids the parts need to point at each other. */
-    ids: {
-        trigger: string;
-    };
-    panelId: (level: number) => string;
-    itemId: (level: number, index: number) => string;
-    triggerRef: RefObject<HTMLElement | null>;
-    /** Which panel the keyboard is in. Always the deepest open one. */
-    onMenuKeyDown: (event: React.KeyboardEvent) => void;
-    /** How long the pointer must rest on a row before its submenu opens, and before one closes. */
-    delays: {
-        open: number;
-        close: number;
-    };
-    /** Drop the pending close, wherever it was scheduled. Called wherever the pointer lands. */
-    cancelClose: () => void;
-    /** Close everything below `level`, after the beat - replacing any close already waiting. */
-    scheduleClose: (level: number) => void;
-    /** Draw a row instead of the default icon / label / shortcut. */
-    renderItem?: (item: ContextMenuItem, level: number, index: number) => ReactNode;
-    /** Shown while a fetched submenu has not answered. */
-    loadingLabel: ReactNode;
-    /** Shown when a filter matched nothing, or a fetched submenu came back with nothing. */
-    emptyLabel: ReactNode;
-}
-declare function useContextMenuContext(part: string): ContextMenuContextValue;
-
 interface ContextMenuRootProps {
     /** The rows. A list with nothing selectable in it opens no menu at all. */
     items: readonly ContextMenuNode[];
@@ -216,4 +170,4 @@ declare namespace ContextMenu {
     var Item: typeof ContextMenuRow;
 }
 
-export { CONTEXT_MENU_STYLES, ClipboardMenuOptions, ContextMenu, ContextMenuAction, ContextMenuContent, type ContextMenuContentProps, type ContextMenuContextValue, ContextMenuEntry, ContextMenuInstance, type ContextMenuItem, ContextMenuList, type ContextMenuListProps, type ContextMenuNode, ContextMenuOptions, ContextMenuPanel, type ContextMenuPanelProps, ContextMenuPoint, type ContextMenuProps, ContextMenuRoot, type ContextMenuRootProps, ContextMenuRow, type ContextMenuRowProps, ContextMenuSearch, type ContextMenuSearchProps, ContextMenuState, ContextMenuTrigger, type ContextMenuTriggerProps, useContextMenuContext };
+export { CONTEXT_MENU_STYLES, ClipboardMenuOptions, ContextMenu, ContextMenuContent, type ContextMenuContentProps, ContextMenuEntry, ContextMenuItem, ContextMenuList, type ContextMenuListProps, ContextMenuNode, ContextMenuOptions, ContextMenuPanel, type ContextMenuPanelProps, type ContextMenuProps, ContextMenuRoot, type ContextMenuRootProps, ContextMenuRow, type ContextMenuRowProps, ContextMenuSearch, type ContextMenuSearchProps, ContextMenuTrigger, type ContextMenuTriggerProps };

package/dist/react/image.d.ts

@@ -0,0 +1,109 @@
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
+import { b as ContextMenuNode } from '../context-BfjYGPnH.js';
+import '../context-menu-D3FtTn7v.js';
+import '../search-DYgqRp37.js';
+
+/**
+ * The prop shapes for `<Image>`, split from the component so the viewer's chunk can import
+ * them without pulling the component in - the same arrangement `<Input>` is in.
+ *
+ * WHAT IS ON BY DEFAULT is the whole design of this API: an image that opens and zooms, and
+ * nothing else. A gallery's arrows, its thumbnails, a menu and a discard action are each a
+ * decision about the page they sit in, so each is a prop you turn on rather than one you
+ * remember to turn off.
+ */
+
+/** One image in a set: a URL, or the URL plus what is known about it. */
+type ImageSource = string | ImageItem;
+interface ImageItem {
+    src: string;
+    alt?: string;
+    /** A smaller file for the strip and for the frame while the full one loads. */
+    thumbnail?: string;
+    /** The URL to save, when the file to download is not the one being shown. */
+    download?: string;
+    /** Saved under this name instead of the one in the URL. */
+    filename?: string;
+    caption?: ReactNode;
+}
+interface ZoomOptions {
+    /** How far out. 1 is the fitted image; below it the picture is smaller than its frame. */
+    min?: number;
+    max?: number;
+    /** Zoom on the wheel. On by default - it is the gesture every image viewer answers. */
+    wheel?: boolean;
+    /** A double press toggles between fitted and this. `false` leaves the gesture alone. */
+    doubleClick?: boolean;
+}
+interface ImageMenuOptions {
+    /** The download row. On whenever the menu is. */
+    download?: boolean;
+    /** Rows of your own, after the built-in ones. */
+    items?: readonly ContextMenuNode[];
+    onSelect?: (id: string, item: ImageItem, index: number) => void;
+}
+/** Every string the viewer says, for a UI that is not in English. */
+interface ImageLabels {
+    open?: string;
+    close?: string;
+    zoomIn?: string;
+    zoomOut?: string;
+    reset?: string;
+    previous?: string;
+    next?: string;
+    menu?: string;
+    download?: string;
+    discard?: string;
+    thumbnails?: string;
+    /** The frame itself, announced as the dialog's name. Default "Image viewer". */
+    viewer?: string;
+    /** `{index}` and `{total}` are replaced. Default "{index} of {total}". */
+    counter?: string;
+}
+interface ImageProps extends Omit<ComponentPropsWithoutRef<"img">, "children" | "onSelect"> {
+    src: string;
+    alt: string;
+    /**
+     * The set this image belongs to. Without it the viewer shows this one image; with it the
+     * arrows, the strip and the discard action have something to move through.
+     */
+    images?: readonly ImageSource[];
+    /** Where in `images` this one is. Found by `src` when it is left out. */
+    index?: number;
+    /** Click to see it larger. ON by default: it is what an image in a page is expected to do. */
+    lightbox?: boolean;
+    /** Zoom, with the wheel and the keyboard. ON by default. */
+    zoom?: boolean | ZoomOptions;
+    /**
+     * The picture flies out of the page into the viewer, and back into it on the way out. ON
+     * by default, and skipped anyway for a reader who has asked for less movement.
+     */
+    animate?: boolean;
+    /** Arrows, the counter, and Left/Right on the keyboard. Off by default. */
+    navigation?: boolean;
+    /** The strip of previews along the bottom. Off by default. */
+    thumbnails?: boolean;
+    /** The three dots, and what is under them. Off by default. */
+    menu?: boolean | ImageMenuOptions;
+    /**
+     * Take an image out of the set and move to the next one. Off by default, because it is
+     * destructive and only the caller knows whether it means anything on their page.
+     */
+    discardable?: boolean;
+    onDiscard?: (item: ImageItem, index: number) => void;
+    /** Whether the arrows and the strip wrap around at the ends. On by default. */
+    loop?: boolean;
+    /** The caption under the frame, when the item carries none of its own. */
+    caption?: ReactNode;
+    onOpenChange?: (open: boolean) => void;
+    onIndexChange?: (index: number, item: ImageItem) => void;
+    /** The viewer's stylesheet, injected once. There is no useful unstyled lightbox. */
+    styles?: boolean;
+    labels?: ImageLabels;
+    /** Props for the element wrapping the thumbnail - this is what you position. */
+    wrapperProps?: ComponentPropsWithoutRef<"span">;
+}
+
+declare function Image(props: ImageProps): ReactNode;
+
+export { Image, type ImageItem, type ImageLabels, type ImageMenuOptions, type ImageProps, type ImageSource, type ZoomOptions };

package/dist/react/image.js

@@ -0,0 +1,3 @@
+"use client";
+export { Image } from '../chunk-4SZ5N7BA.js';
+import '../chunk-EYZ366LP.js';