@enigmax/primitives 0.25.0 → 0.26.0

package/dist/react/index.d.ts

@@ -25,11 +25,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 './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 './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 './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 './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 './image.js';
+export { Video, VideoControls, VideoLabels, VideoProps, VideoSource, VideoTrack } from './video.js';
+export { C as ContextMenuContextValue, a as ContextMenuItem, b as ContextMenuNode, u as useContextMenuContext } from '../context-BfjYGPnH.js';
 
 interface UseInputResult {
     /** Attach to the `<input>`. */

package/dist/react/index.js

@@ -1,28 +1,32 @@
 "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';
 export { Button, 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/input.js

@@ -1,4 +1,4 @@
 "use client";
-export { Input } from '../chunk-3MGBZOAU.js';
+export { Input } from '../chunk-RMNXVWQ4.js';
 import '../chunk-KVLSOQTI.js';
 import '../chunk-F25CGNQC.js';

package/dist/react/video.d.ts

@@ -0,0 +1,120 @@
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
+import { b as ContextMenuNode, a as ContextMenuItem } from '../context-BfjYGPnH.js';
+import '../context-menu-D3FtTn7v.js';
+import '../search-DYgqRp37.js';
+
+/**
+ * The prop shapes for `<Video>`.
+ *
+ * Shaped after Plyr, which is the player this one is measured against: the same control set,
+ * the same shortcuts, the same auto-hiding bar. What differs is that the controls are the
+ * component's own markup rather than a string of HTML it parses, so a project styles them
+ * with the attributes below instead of overriding a stylesheet it did not write.
+ */
+
+interface VideoSource {
+    src: string;
+    /** `video/mp4`, `video/webm`. The browser picks the first one it can play. */
+    type?: string;
+}
+interface VideoTrack {
+    src: string;
+    /** BCP 47: `en`, `es-419`. */
+    srcLang: string;
+    label: string;
+    kind?: "subtitles" | "captions" | "descriptions" | "chapters" | "metadata";
+    default?: boolean;
+}
+/** Which controls the bar carries. Everything is on except `download`, as Plyr has it. */
+interface VideoControls {
+    play?: boolean;
+    progress?: boolean;
+    currentTime?: boolean;
+    duration?: boolean;
+    volume?: boolean;
+    captions?: boolean;
+    settings?: boolean;
+    pip?: boolean;
+    /** Play on a TV. Feature-detected, and absent until the browser reports a screen to cast to. */
+    cast?: boolean;
+    fullscreen?: boolean;
+    /** Off by default: a video a page shows is not always one it means to hand over. */
+    download?: boolean;
+}
+interface VideoLabels {
+    play?: string;
+    pause?: string;
+    mute?: string;
+    unmute?: string;
+    volume?: string;
+    seek?: string;
+    captions?: string;
+    /** The row that turns subtitles off. Default "Off". */
+    captionsOff?: string;
+    /** The heading over the language rows. Default "Subtitles". */
+    subtitles?: string;
+    settings?: string;
+    speed?: string;
+    normal?: string;
+    pip?: string;
+    cast?: string;
+    /** While it is playing on the other screen. Default "Stop casting". */
+    stopCast?: string;
+    /** The context menu's rows. */
+    loop?: string;
+    copyUrl?: string;
+    copyUrlAtTime?: string;
+    enterFullscreen?: string;
+    exitFullscreen?: string;
+    download?: string;
+    /** The player itself, as a screen reader announces the region. Default "Video player". */
+    player?: string;
+}
+interface VideoProps extends Omit<ComponentPropsWithoutRef<"video">, "controls" | "children" | "src" | "contextMenu"> {
+    /** One file, or the list the browser should choose from. */
+    src?: string | readonly VideoSource[];
+    poster?: string;
+    tracks?: readonly VideoTrack[];
+    /** The control bar. `false` leaves a bare `<video>` with nothing over it. */
+    controls?: boolean | VideoControls;
+    /** Rates the settings menu offers. Defaults to Plyr's 0.5 through 2. */
+    speeds?: readonly number[];
+    /** Space, arrows, M, F, C and the digits. On by default, and never while typing. */
+    keyboard?: boolean;
+    /** A press on the picture plays and pauses. On by default. */
+    clickToPlay?: boolean;
+    /** Hide the bar while playing, until the pointer moves. On by default. */
+    autoHide?: boolean;
+    /** How long the pointer has to be still before the bar goes, in ms. Default 2600. */
+    autoHideDelay?: number;
+    /**
+     * The menu a right-click opens, shaped the way YouTube's is. ON by default.
+     *
+     * `false` gives the browser's own menu back - which is what a page wants when the point of
+     * the video is that it can be saved from the native menu.
+     */
+    contextMenu?: boolean | VideoContextMenuOptions;
+    /** The player's stylesheet, injected once. There is no useful unstyled player. */
+    styles?: boolean;
+    labels?: VideoLabels;
+    /** The URL the download control saves. Defaults to what is playing. */
+    download?: string;
+    /** Rendered over the picture, under the controls - a title, a badge, your own overlay. */
+    children?: ReactNode;
+    /** Props for the element wrapping the video and its controls; this is what you size. */
+    wrapperProps?: ComponentPropsWithoutRef<"div">;
+}
+interface VideoContextMenuOptions {
+    /** Rows of your own, after the built-in ones. */
+    items?: readonly ContextMenuNode[];
+    /** A row was invoked - yours, or one of the built-in ids. */
+    onSelect?: (item: ContextMenuItem) => void;
+    /** The two "copy the link" rows. On whenever the menu is, where there is a URL to copy. */
+    copyUrl?: boolean;
+    /** The heading over the rows, naming what the menu is acting on. */
+    title?: string;
+}
+
+declare function Video(props: VideoProps): ReactNode;
+
+export { Video, type VideoContextMenuOptions, type VideoControls, type VideoLabels, type VideoProps, type VideoSource, type VideoTrack };

package/dist/react/video.js

@@ -0,0 +1,3 @@
+"use client";
+export { Video } from '../chunk-JJVZYW5C.js';
+import '../chunk-RUEQ3TGP.js';

package/dist/react-router/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';
 
 declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLElement>>;
 

package/dist/react-router/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/viewer-73LSE6RR.js

@@ -0,0 +1,3 @@
+export { ImageViewer, MenuButton } from './chunk-ISXB5RUH.js';
+import './chunk-QIIV2QSV.js';
+import './chunk-EYZ366LP.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@enigmax/primitives",
-  "version": "0.25.0",
+  "version": "0.26.0",
   "description": "Headless components: the behaviour, the timing and the accessibility, with no styles of their own. Framework-agnostic core plus thin adapters.",
   "type": "module",
   "sideEffects": [
@@ -37,6 +37,14 @@
       "types": "./dist/react/selection.d.ts",
       "import": "./dist/react/selection.js"
     },
+    "./react/image": {
+      "types": "./dist/react/image.d.ts",
+      "import": "./dist/react/image.js"
+    },
+    "./react/video": {
+      "types": "./dist/react/video.d.ts",
+      "import": "./dist/react/video.js"
+    },
     "./react/button": {
       "types": "./dist/react/button.d.ts",
       "import": "./dist/react/button.js"
@@ -90,6 +98,8 @@
     "./toast.css": "./recipes/toast/styles.css",
     "./input.css": "./recipes/input/styles.css",
     "./color.css": "./recipes/color/styles.css",
+    "./image.css": "./recipes/image/styles.css",
+    "./video.css": "./recipes/video/styles.css",
     "./marquee.css": "./recipes/marquee/styles.css",
     "./logo-marquee.css": "./recipes/logo-marquee/styles.css",
     "./palette.css": "./recipes/palette/styles.css",
@@ -179,7 +189,10 @@
     "shortcuts",
     "toast",
     "unstyled",
-    "vanilla"
+    "vanilla",
+    "lightbox",
+    "image-viewer",
+    "video-player"
   ],
   "license": "Apache-2.0",
   "author": "FJRG2007 <fjrg2007@tpeoficial.com>",

package/recipes/image/styles.css

@@ -0,0 +1,182 @@
+/*
+ * The image stylesheet.
+ *
+ * GENERATED from src/react/image/styles.ts by scripts/sync-recipes.mjs - edit that file, not
+ * this one. It exists as a stylesheet as well as a string because the component injects it,
+ * and this is the same sheet for anyone who would rather import it, copy it with
+ * `enigma add image --copy`, or fork it outright.
+ */
+:root {
+    --enigma-image-backdrop: rgba(0, 0, 0, 0.92);
+    --enigma-image-text: #f5f5f5;
+    --enigma-image-muted: #a3a3a3;
+    --enigma-image-control-bg: rgba(23, 23, 23, 0.72);
+    --enigma-image-control-hover: rgba(64, 64, 64, 0.82);
+    --enigma-image-control-size: 2.25rem;
+    --enigma-image-radius: 0.625rem;
+    --enigma-image-gap: 0.75rem;
+    --enigma-image-thumb-size: 3.5rem;
+    --enigma-image-focus: #f5f5f5;
+    /* Above the page's own chrome, not merely above its content: a header or a sticky sidebar
+       with a z-index of its own would otherwise paint over the dialog covering it. */
+    --enigma-image-z: 9999;
+    /* How long the picture takes to fly out of the page and back into it, and the curve it
+       flies on. They are the numbers core/image-viewer.ts waits for, so a project that
+       changes one here changes it there - see the note above the keyframes. */
+    --enigma-image-flight: 300ms;
+    --enigma-image-flight-ease: cubic-bezier(0.2, 0, 0.2, 1);
+}
+
+/* The thumbnail in the page. Only what the behaviour needs: the pointer says it opens, and
+   the box is the caller's to size. */
+[data-enigma-image] { display: inline-flex; max-width: 100%; }
+[data-enigma-image][data-clickable] { cursor: zoom-in; }
+/* Stated on the picture as well as inherited: a project that restyles the trigger button is
+   one cursor: pointer away from a thumbnail that no longer says it enlarges. */
+[data-enigma-image][data-clickable] img { cursor: zoom-in; }
+[data-enigma-image] img { display: block; max-width: 100%; height: auto; }
+/* A real box, never display:contents: an element without one cannot be focused in Chromium,
+   so a viewer closed with Escape would hand focus to the body instead of back to the picture
+   it was opened from, and the next Tab would start at the top of the page. */
+[data-enigma-image-trigger] {
+    display: inline-flex; max-width: 100%; padding: 0; margin: 0;
+    background: none; border: 0; color: inherit; font: inherit; cursor: inherit;
+}
+[data-enigma-image-trigger]:focus-visible img { outline: 2px solid var(--enigma-image-focus); outline-offset: 3px; }
+
+/* The viewer. Fixed and portalled: a lightbox inside the page's own stacking context is a
+   lightbox some ancestor's overflow or transform will clip. */
+[data-enigma-image-viewer] {
+    position: fixed; inset: 0; z-index: var(--enigma-image-z);
+    display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
+    background: var(--enigma-image-backdrop);
+    color: var(--enigma-image-text);
+}
+
+/* The opening: the backdrop arrives while the picture flies out of the page, and the toolbar
+   and the strip arrive with it rather than being there first over a picture that is still on
+   its way. data-state is only ever "opening" or "closing" while an animation is meant to be
+   running, so a viewer that skipped the flight - reduced motion, animate={false} - matches
+   none of these rules and simply exists. */
+@keyframes enigma-image-in { from { background-color: transparent; } to { background-color: var(--enigma-image-backdrop); } }
+@keyframes enigma-image-chrome { from { opacity: 0; } to { opacity: 1; } }
+[data-enigma-image-viewer][data-state="opening"] { animation: enigma-image-in var(--enigma-image-flight) ease-out; }
+[data-enigma-image-viewer][data-state="opening"] [data-enigma-image-bar],
+[data-enigma-image-viewer][data-state="opening"] [data-enigma-image-foot],
+[data-enigma-image-viewer][data-state="opening"] [data-enigma-image-nav] {
+    animation: enigma-image-chrome var(--enigma-image-flight) ease-out;
+}
+/* On the way out the backdrop drains, and the dialog stops taking presses: it is over the
+   page again, so a click through it would land on whatever is now under the pointer. */
+[data-enigma-image-viewer][data-state="closing"] {
+    background-color: transparent; pointer-events: none;
+    transition: background-color var(--enigma-image-flight) var(--enigma-image-flight-ease);
+}
+[data-enigma-image-viewer][data-state="closing"] [data-enigma-image-bar],
+[data-enigma-image-viewer][data-state="closing"] [data-enigma-image-foot],
+[data-enigma-image-viewer][data-state="closing"] [data-enigma-image-nav] {
+    opacity: 0; transition: opacity calc(var(--enigma-image-flight) / 2) ease-in;
+}
+
+[data-enigma-image-bar] {
+    display: flex; align-items: center; gap: 0.5rem;
+    padding: var(--enigma-image-gap);
+}
+[data-enigma-image-counter] {
+    font-size: 0.8125rem; font-variant-numeric: tabular-nums; color: var(--enigma-image-muted);
+    margin-inline-end: auto;
+}
+
+[data-enigma-image-button] {
+    display: grid; place-items: center; flex: none;
+    width: var(--enigma-image-control-size); height: var(--enigma-image-control-size);
+    padding: 0; color: var(--enigma-image-text);
+    background: var(--enigma-image-control-bg); border: 0; border-radius: 999px;
+    cursor: pointer;
+}
+[data-enigma-image-button]:hover { background: var(--enigma-image-control-hover); }
+[data-enigma-image-button]:focus-visible { outline: 2px solid var(--enigma-image-focus); outline-offset: 2px; }
+[data-enigma-image-button][disabled] { opacity: 0.35; cursor: not-allowed; }
+
+/* The frame the picture is fitted into, and the surface every gesture is measured against. */
+[data-enigma-image-frame] {
+    position: relative; overflow: hidden;
+    display: grid; place-items: center;
+    /* Room for the arrows down each side, so they sit beside the picture rather than on it. */
+    padding: 0 calc(var(--enigma-image-control-size) + var(--enigma-image-gap) * 1.5);
+    /* The drag IS the control once zoomed, so the page must not scroll under it. */
+    touch-action: none;
+    -webkit-user-select: none; user-select: none;
+}
+[data-enigma-image-frame] img {
+    max-width: 100%; max-height: 100%;
+    -webkit-user-drag: none;
+    will-change: transform;
+}
+/* Only while it is MOVING, which is not the same as "during the flight".
+   A transition left on permanently would put 300ms of lag between the wheel and the zoom, and
+   turn every pan into a drag the picture follows late. And one left on during "pending" is
+   worse than useless: putting the picture on the thumbnail is itself a transform change, so it
+   animated there over 300ms - behind a hidden element - and by the time anybody could see it
+   the flight was nearly over. */
+[data-enigma-image-frame][data-flying="moving"] img { transition: transform var(--enigma-image-flight) var(--enigma-image-flight-ease); }
+/* Not drawn until there is somewhere to fly from - see the note on the attribute. The spinner
+   is what stands in for it, the same one a slow picture gets. */
+[data-enigma-image-frame][data-flying="pending"] img { visibility: hidden; }
+@media (prefers-reduced-motion: reduce) {
+    [data-enigma-image-frame][data-flying="moving"] img { transition: none; }
+}
+
+/* The cursor says what a press does, which in a lightbox is three different things. The empty
+   part of the frame IS the backdrop and closes it; the picture at rest takes a double press to
+   enlarge; once it is enlarged the gesture is a drag. */
+[data-enigma-image-frame] { cursor: zoom-out; }
+[data-enigma-image-frame][data-zoom] img { cursor: zoom-in; }
+[data-enigma-image-frame][data-zoomed],
+[data-enigma-image-frame][data-zoomed] img { cursor: grab; }
+[data-enigma-image-frame][data-panning],
+[data-enigma-image-frame][data-panning] img { cursor: grabbing; }
+[data-enigma-image-frame][data-loading] img { opacity: 0.35; }
+
+/* Left and right sit over the picture rather than beside it: the frame is the biggest thing
+   on screen and the arrows have to be reachable without hunting for an edge. */
+[data-enigma-image-nav] {
+    position: absolute; top: 50%; translate: 0 -50%;
+    width: var(--enigma-image-control-size); height: var(--enigma-image-control-size);
+}
+[data-enigma-image-nav="previous"] { left: var(--enigma-image-gap); }
+[data-enigma-image-nav="next"] { right: var(--enigma-image-gap); }
+
+[data-enigma-image-spinner] {
+    position: absolute; width: 1.75rem; height: 1.75rem;
+    border: 2px solid rgba(255, 255, 255, 0.25); border-top-color: var(--enigma-image-text);
+    border-radius: 999px; animation: enigma-image-spin 700ms linear infinite;
+}
+@keyframes enigma-image-spin { to { rotate: 360deg; } }
+@media (prefers-reduced-motion: reduce) {
+    [data-enigma-image-spinner] { animation-duration: 2s; }
+}
+
+[data-enigma-image-foot] { display: grid; gap: 0.5rem; padding: var(--enigma-image-gap); }
+[data-enigma-image-caption] {
+    margin: 0; text-align: center; font-size: 0.8125rem; line-height: 1.5;
+    color: var(--enigma-image-muted);
+}
+
+/* The strip. Scrolls on its own rather than wrapping: a gallery of forty is one row you drag
+   through, not five rows that push the picture off the screen. */
+[data-enigma-image-strip] {
+    display: flex; gap: 0.5rem; overflow-x: auto; scrollbar-width: thin;
+    justify-content: safe center;
+    padding-bottom: 0.25rem;
+}
+[data-enigma-image-thumb] {
+    flex: none; width: var(--enigma-image-thumb-size); height: var(--enigma-image-thumb-size);
+    padding: 0; overflow: hidden;
+    background: none; border: 0; border-radius: 0.375rem;
+    opacity: 0.55; cursor: pointer;
+}
+[data-enigma-image-thumb] img { width: 100%; height: 100%; object-fit: cover; }
+[data-enigma-image-thumb]:hover { opacity: 0.85; }
+[data-enigma-image-thumb][aria-current="true"] { opacity: 1; box-shadow: 0 0 0 2px var(--enigma-image-focus); }
+[data-enigma-image-thumb]:focus-visible { outline: 2px solid var(--enigma-image-focus); outline-offset: 2px; }

package/recipes/video/styles.css

@@ -0,0 +1,154 @@
+/*
+ * The video stylesheet.
+ *
+ * GENERATED from src/react/video/styles.ts by scripts/sync-recipes.mjs - edit that file, not
+ * this one. It exists as a stylesheet as well as a string because the component injects it,
+ * and this is the same sheet for anyone who would rather import it, copy it with
+ * `enigma add video --copy`, or fork it outright.
+ */
+:root {
+    --enigma-video-accent: #3b82f6;
+    --enigma-video-bg: #000000;
+    --enigma-video-text: #ffffff;
+    --enigma-video-muted: rgba(255, 255, 255, 0.72);
+    --enigma-video-rail: rgba(255, 255, 255, 0.28);
+    --enigma-video-buffer: rgba(255, 255, 255, 0.45);
+    --enigma-video-panel-bg: rgba(23, 23, 23, 0.96);
+    --enigma-video-radius: 0.5rem;
+    --enigma-video-control-size: 2rem;
+    /* The icons are sized HERE and not in em of the bar's text: 1.25em of a 13px label is a
+       16px icon, and the same markup in a project with larger type silently grew a different
+       player. */
+    --enigma-video-icon-size: 1.125rem;
+    --enigma-video-rail-height: 0.3125rem;
+    --enigma-video-rail-hover: 0.5rem;
+    --enigma-video-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
+}
+
+[data-enigma-video] {
+    position: relative; display: block; width: 100%; overflow: hidden;
+    background: var(--enigma-video-bg); border-radius: var(--enigma-video-radius);
+    color: var(--enigma-video-text);
+    font-size: 0.8125rem; line-height: 1;
+}
+[data-enigma-video] video { display: block; width: 100%; height: 100%; }
+/* Fullscreen needs no sizing of its own: the UA stylesheet pins the fullscreen element to the
+   screen with !important, which outranks anything a page or this sheet can say, and a video
+   element already fits itself with object-fit: contain. Only the corner is ours. */
+[data-enigma-video][data-fullscreen] { border-radius: 0; }
+[data-enigma-video][data-hidden] { cursor: none; }
+
+/* The big one, while nothing is playing. Plyr's shape: a filled circle over the poster,
+   large enough to be the obvious target on a phone. */
+[data-enigma-video-big] {
+    position: absolute; inset: 0; margin: auto;
+    display: grid; place-items: center;
+    width: 3.75rem; height: 3.75rem; padding: 0;
+    color: var(--enigma-video-text); background: var(--enigma-video-accent);
+    border: 0; border-radius: 999px; box-shadow: var(--enigma-video-shadow);
+    cursor: pointer;
+}
+[data-enigma-video-big]:focus-visible { outline: 2px solid var(--enigma-video-text); outline-offset: 3px; }
+
+[data-enigma-video-overlay] { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
+[data-enigma-video-overlay] > * { pointer-events: auto; }
+
+[data-enigma-video-spinner] {
+    width: 2rem; height: 2rem;
+    border: 2px solid rgba(255, 255, 255, 0.25); border-top-color: var(--enigma-video-text);
+    border-radius: 999px; animation: enigma-video-spin 700ms linear infinite;
+}
+@keyframes enigma-video-spin { to { rotate: 360deg; } }
+@media (prefers-reduced-motion: reduce) {
+    [data-enigma-video-spinner] { animation-duration: 2s; }
+}
+
+[data-enigma-video-controls] {
+    position: absolute; inset-inline: 0; bottom: 0;
+    display: flex; align-items: center; gap: 0.375rem;
+    padding: 2.5rem 0.625rem 0.625rem;
+    background: linear-gradient(to top, rgba(0, 0, 0, 0.75), transparent);
+    transition: opacity 180ms ease, translate 180ms ease;
+}
+[data-enigma-video][data-hidden] [data-enigma-video-controls] { opacity: 0; translate: 0 0.5rem; pointer-events: none; }
+@media (prefers-reduced-motion: reduce) {
+    [data-enigma-video-controls] { transition: none; }
+}
+
+[data-enigma-video-button] {
+    display: grid; place-items: center; flex: none;
+    width: var(--enigma-video-control-size); height: var(--enigma-video-control-size);
+    padding: 0; color: var(--enigma-video-text); background: none; border: 0; border-radius: 0.375rem;
+    cursor: pointer;
+}
+[data-enigma-video-button] svg { width: var(--enigma-video-icon-size); height: var(--enigma-video-icon-size); flex: none; }
+[data-enigma-video-big] svg { width: 1.5rem; height: 1.5rem; }
+[data-enigma-video-button]:hover { background: rgba(255, 255, 255, 0.16); }
+[data-enigma-video-button]:focus-visible { outline: 2px solid var(--enigma-video-text); outline-offset: 1px; }
+[data-enigma-video-button][aria-pressed="true"] { color: var(--enigma-video-accent); }
+
+[data-enigma-video-time] { flex: none; color: var(--enigma-video-muted); font-variant-numeric: tabular-nums; }
+
+/* The rail. Its hit area is the row, not the 5px line: a scrubber you have to hit exactly is
+   one people miss and then seek by accident. */
+[data-enigma-video-rail] {
+    position: relative; flex: 1; min-width: 3rem; height: 1rem;
+    display: flex; align-items: center;
+    cursor: pointer; touch-action: none;
+}
+[data-enigma-video-track] {
+    position: relative; width: 100%; height: var(--enigma-video-rail-height);
+    background: var(--enigma-video-rail); border-radius: 999px; overflow: hidden;
+    transition: height 120ms ease;
+}
+[data-enigma-video-rail]:hover [data-enigma-video-track],
+[data-enigma-video-rail]:focus-visible [data-enigma-video-track] { height: var(--enigma-video-rail-hover); }
+[data-enigma-video-rail]:focus-visible { outline: 2px solid var(--enigma-video-text); outline-offset: 2px; border-radius: 999px; }
+[data-enigma-video-buffer] { position: absolute; inset-block: 0; left: 0; background: var(--enigma-video-buffer); }
+[data-enigma-video-played] { position: absolute; inset-block: 0; left: 0; background: var(--enigma-video-accent); }
+[data-enigma-video-knob] {
+    position: absolute; top: 50%; translate: -50% -50%;
+    width: 0.75rem; height: 0.75rem; border-radius: 999px;
+    background: var(--enigma-video-text); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);
+    pointer-events: none;
+}
+
+/* The volume rail folds away until the control is reached, which is what keeps a narrow
+   player from spending a third of its bar on something rarely touched. */
+[data-enigma-video-volume] { display: flex; align-items: center; flex: none; }
+[data-enigma-video-volume] [data-enigma-video-rail] {
+    width: 0; min-width: 0; opacity: 0; transition: width 140ms ease, opacity 140ms ease;
+}
+[data-enigma-video-volume]:hover [data-enigma-video-rail],
+[data-enigma-video-volume]:focus-within [data-enigma-video-rail] { width: 4.5rem; min-width: 4.5rem; opacity: 1; }
+
+[data-enigma-video-menu] { position: relative; flex: none; }
+/* The panel opens upward, and the player CLIPS - it has to, or a rounded corner is not
+   rounded. So its height is bounded by the room above the button that opened it (measured, and
+   set inline) and what does not fit scrolls. Without this a speed list plus a language list is
+   a panel with its top cut off on any player under about 300px. */
+[data-enigma-video-panel] {
+    position: absolute; right: 0; bottom: calc(100% + 0.5rem); z-index: 2;
+    box-sizing: border-box; min-width: 8.5rem; max-width: calc(100vw - 2rem); padding: 0.25rem;
+    max-height: 14rem; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
+    background: var(--enigma-video-panel-bg); border-radius: 0.5rem; box-shadow: var(--enigma-video-shadow);
+}
+[data-enigma-video-option] {
+    display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
+    width: 100%; padding: 0.4375rem 0.5rem;
+    color: var(--enigma-video-text); background: none; border: 0; border-radius: 0.375rem;
+    font: inherit; text-align: left; cursor: pointer;
+}
+[data-enigma-video-option]:hover { background: rgba(255, 255, 255, 0.12); }
+[data-enigma-video-option][aria-checked="true"] { color: var(--enigma-video-accent); }
+[data-enigma-video-option]:focus-visible { outline: 2px solid var(--enigma-video-text); outline-offset: -2px; }
+/* Sticky because the panel scrolls: the language you are choosing between should still say
+   which list it belongs to when the speeds have scrolled past it. */
+[data-enigma-video-heading] {
+    position: sticky; top: 0; z-index: 1; margin: 0;
+    padding: 0.375rem 0.5rem; color: var(--enigma-video-muted);
+    background: var(--enigma-video-panel-bg);
+    font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.06em;
+}
+[data-enigma-video-option] svg { width: 0.875rem; height: 0.875rem; flex: none; }
+[data-enigma-video-option] span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }