@nanisoft/prism-ui 0.10.2 → 0.15.0

package/dist/components/ui/tree.js

@@ -1,7 +1,7 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useRef } from 'react';
-import { cn } from '../../lib/utils';
+import { useCallback, useRef, useState } from 'react';
+import { cn } from '../../lib/utils.js';
 /** Whether a group's subtree contains the current address, at any depth. */
 function containsHref(nodes, currentHref) {
     if (currentHref === undefined)
@@ -24,19 +24,45 @@ function under(href, currentHref) {
         return false;
     return currentHref === href || currentHref.startsWith(`${href}/`);
 }
-function TreeLevel({ nodes, currentHref, depth, }) {
+function TreeLevel({ nodes, currentHref, depth, tabStopFor, onFocusNode, }) {
     return (_jsx("ul", { "data-slot": "tree-list", "data-depth": depth, 
         // `group` on the list, not `treeitem`: the items are the things a reader
         // navigates between, and a `ul` of them is a group. `role="none"` on each
-        // item below removes the listitem role so that only the anchors and labels
-        // are the navigable things, which is what lets a caller's own keyboard model
-        // move between them without a roving tabindex fighting the document's.
+        // item below removes the listitem role, and a `<div>` is a generic element,
+        // which is transparent in the accessibility tree. So both are passed through
+        // and each anchor is owned by the group rather than by the wrapper around it,
+        // which is why `aria-level` is redundant here and load-bearing for a reader
+        // who is placed by the level rather than by the nesting.
         role: "group", className: cn('border-border flex flex-col gap-1 border-l', 
         // One level of indent per nested group and none at the top, so the depth
         // reads from the rule rather than from the words.
-        depth > 0 && 'ps-3'), children: nodes.map((node, index) => (_jsx(TreeItem, { node: node, currentHref: currentHref, depth: depth }, `${node.type}:${index}`))) }));
+        depth > 0 && 'ps-3'), children: nodes.map((node, index) => (_jsx(TreeItem, { node: node, currentHref: currentHref, depth: depth, tabStopFor: tabStopFor, onFocusNode: onFocusNode }, `${node.type}:${index}`))) }));
 }
-function TreeItem({ node, currentHref, depth, }) {
+/**
+ * The address of the first node a reader could focus, in the order they meet them.
+ *
+ * Depth first, because that is the order `TreeLevel` renders in and the order the
+ * arrow keys collect from the DOM, so this is the same walk the reader sees rather
+ * than a second list to fall behind it. It exists for one state: before the reader
+ * has been in the tree at all, the tab stop has to be resolved during the first
+ * render, because a ref is not attached yet and a stop read from the DOM has none on
+ * the first paint.
+ */
+function firstHref(nodes) {
+    for (const node of nodes) {
+        if (node.type === 'page')
+            return node.href;
+        if (node.type === 'group') {
+            if (node.href !== undefined)
+                return node.href;
+            const below = firstHref(node.items);
+            if (below !== undefined)
+                return below;
+        }
+    }
+    return undefined;
+}
+function TreeItem({ node, currentHref, depth, tabStopFor, onFocusNode, }) {
     if (node.type === 'divider') {
         // A rule between nodes. It is a label, so it is not focusable and a reader
         // does not meet it as a destination, and the empty title renders no words
@@ -44,7 +70,11 @@ function TreeItem({ node, currentHref, depth, }) {
         return (_jsx("li", { "data-slot": "tree-divider", role: "none", className: "border-border mt-2 border-t pt-2 first:mt-0 first:border-t-0 first:pt-0", children: node.title ? (_jsx("span", { className: "text-muted-foreground text-xs font-medium tracking-wide uppercase", children: node.title })) : null }));
     }
     if (node.type === 'group') {
-        return (_jsx("li", { "data-slot": "tree-group", role: "none", children: _jsxs("div", { className: "flex flex-col gap-1", children: [node.href === undefined ? (
+        // Read once into a `const` because TypeScript does not carry a narrowing of
+        // `node.href` into a callback, and the roving tab stop and the focus handler
+        // below are both callbacks that need the address as a `string`.
+        const href = node.href;
+        return (_jsx("li", { "data-slot": "tree-group", role: "none", children: _jsxs("div", { className: "flex flex-col gap-1", children: [href === undefined ? (
                     /*
                      * A group with no index is a tree item that is not a destination, so it
                      * carries `role="treeitem"` and its level and nothing else. It is not a
@@ -52,14 +82,28 @@ function TreeItem({ node, currentHref, depth, }) {
                      * rather than ignored, which the accessibility gate caught the first
                      * time this was rendered, and a reader needs the level to place a label
                      * that has no anchor to place it by.
+                     *
+                     * It carries no `aria-expanded`, and neither arm below does. The
+                     * attribute says whether a node's children are on the page, and there is
+                     * no collapse anywhere in this Component: every group renders its
+                     * subtree, so the honest value is always "expanded" and the useful one
+                     * is none at all. `aria-expanded="true"` on a node a reader presses and
+                     * nothing happens is worse than silence, because it promises a second
+                     * press. ARIA's own wording covers this case: a node that cannot expand
+                     * omits the attribute. The level is what places a label that has no
+                     * anchor to place it by.
                      */
-                    _jsx("span", { "data-slot": "tree-label", role: "treeitem", "aria-level": depth + 1, "aria-expanded": node.items.length > 0 ? true : undefined, className: cn('rounded-sm text-sm font-semibold tracking-tight', containsHref(node.items, currentHref) ? 'text-foreground' : 'text-muted-foreground'), children: node.title })) : (_jsx("a", { "data-slot": "tree-heading", href: node.href, role: "treeitem", "aria-level": depth + 1, "aria-expanded": node.items.length > 0 ? true : undefined, "aria-current": currentHref === node.href ? 'page' : undefined, className: cn('hover:text-foreground rounded-sm text-sm font-semibold tracking-tight transition-colors duration-fast ease-out', under(node.href, currentHref) ? 'text-foreground' : 'text-muted-foreground'), children: node.title })), node.items.length > 0 ? (_jsx(TreeLevel, { nodes: node.items, currentHref: currentHref, depth: depth + 1 })) : null] }) }));
+                    _jsx("span", { "data-slot": "tree-label", role: "treeitem", "aria-level": depth + 1, className: cn('rounded-sm text-sm font-semibold tracking-tight', containsHref(node.items, currentHref) ? 'text-foreground' : 'text-muted-foreground'), children: node.title })) : (_jsx("a", { "data-slot": "tree-heading", href: href, role: "treeitem", "aria-level": depth + 1, "aria-current": currentHref === href ? 'page' : undefined, 
+                        // The roving tab stop, as `ToggleGroup` holds it. See the JSDoc on the
+                        // Component for why a tree of forty links is one Tab stop rather than
+                        // forty.
+                        tabIndex: tabStopFor(href) ? 0 : -1, onFocus: () => onFocusNode(href), className: cn('hover:text-foreground rounded-sm text-sm font-semibold tracking-tight transition-colors duration-fast ease-out', under(href, currentHref) ? 'text-foreground' : 'text-muted-foreground'), children: node.title })), node.items.length > 0 ? (_jsx(TreeLevel, { nodes: node.items, currentHref: currentHref, depth: depth + 1, tabStopFor: tabStopFor, onFocusNode: onFocusNode })) : null] }) }));
     }
     return (_jsx("li", { "data-slot": "tree-item", role: "none", children: _jsx("a", { "data-slot": "tree-link", href: node.href, 
             // A destination in a tree is a `treeitem`, not a link with a level hung
             // off it: the level belongs to the item, and a reader placing it in the
             // tree is reading the item rather than the anchor inside it.
-            role: "treeitem", "aria-level": depth + 1, "aria-current": currentHref === node.href ? 'page' : undefined, className: cn('-ms-px block border-l-2 py-1 ps-3 text-sm transition-colors duration-fast ease-out', currentHref === node.href
+            role: "treeitem", "aria-level": depth + 1, "aria-current": currentHref === node.href ? 'page' : undefined, tabIndex: tabStopFor(node.href) ? 0 : -1, onFocus: () => onFocusNode(node.href), className: cn('-ms-px block border-l-2 py-1 ps-3 text-sm transition-colors duration-fast ease-out', currentHref === node.href
                 ? 'text-foreground border-primary font-medium'
                 : 'text-muted-foreground hover:text-foreground border-transparent'), children: node.title }) }));
 }
@@ -84,17 +128,52 @@ function TreeItem({ node, currentHref, depth, }) {
  * are specific to a documentation rail and are reasoned at length in the design
  * rules. A documentation rail is one shape a tree takes, not the shape. Whether the
  * Page composes this Component later is a decision this ticket does not make.
+ *
+ * **Nothing collapses, so nothing claims to.** There is no `open` set, no
+ * `aria-expanded` on a node and no arrow that folds a subtree away. The attribute
+ * was on every group with children, hard-coded to `true`, and it promised a second
+ * press that did nothing: a reader who hears "expanded" and presses to collapse
+ * has been told about a control this Component does not have. ARIA's own wording
+ * covers the case, that a node which cannot expand omits the attribute, and `aria-level`
+ * is what places a node in the tree for a reader who wants that instead.
  */
 function Tree({ nodes, currentHref, label, className, empty }) {
     const root = useRef(null);
+    // The roving tab stop, held as an address rather than as an index, for the reason
+    // `ToggleGroup` holds a value rather than a position: a caller who reorders or
+    // removes nodes must not strand the reader on a node that moved.
+    const [stop, setStop] = useState(null);
+    /**
+     * Which node holds the tree's one tab stop.
+     *
+     * `null` is the "the reader has not been here yet" case, and it resolves to the
+     * current address rather than to the first node, which is the same rule
+     * `ToggleGroup` applies to a pressed member and for the same reason: a rail that
+     * Tab lands on the top of while the page is forty nodes down is a rail that
+     * reports the wrong place through the tab order alone, and a keyboard reader
+     * arriving from the content has no other way to be placed.
+     *
+     * The first destination is the fallback rather than a second answer, so it applies
+     * only when the current address is not in this tree. A `currentHref` naming
+     * another page is ordinary: a consumer holding a route that is not one of its own
+     * nodes. Two tab stops is the failure that reading either rule alone would produce.
+     */
+    const tabStopFor = useCallback((href) => {
+        if (stop !== null)
+            return stop === href;
+        if (currentHref !== undefined && containsHref(nodes, currentHref))
+            return href === currentHref;
+        return firstHref(nodes) === href;
+    }, [currentHref, nodes, stop]);
     /**
      * The keyboard model, and the reason it lives here rather than in a caller's.
      *
      * A tree is one Tab stop, and the arrow keys move inside it. That is the ARIA
      * pattern, and a consumer who composes the markup themselves gets the Tab order
      * of the document instead, which is every node in the tree and none of the
-     * arrows. A roving tabindex is the mechanism: one node is tabbable at a time and
-     * the arrows move which one.
+     * arrows. The roving tabindex above is the mechanism: one node is tabbable at a
+     * time, and the arrows move which one, because the arrow handler moves focus and
+     * `onFocus` on each node moves the stop with it.
      *
      * The flat order is collected from the DOM rather than computed from the node
      * data, because the DOM is what a reader actually moves through and computing a
@@ -132,6 +211,6 @@ function Tree({ nodes, currentHref, label, className, empty }) {
         // case is authored rather than left for a caller to notice.
         return (_jsxs("div", { "data-slot": "tree-empty", className: cn('text-muted-foreground text-sm', className), children: [empty?.message ?? null, empty?.action] }));
     }
-    return (_jsx("div", { "data-slot": "tree", ref: root, role: "tree", "aria-label": label, onKeyDown: onKeyDown, className: cn('flex flex-col', className), children: _jsx(TreeLevel, { nodes: nodes, currentHref: currentHref, depth: 0 }) }));
+    return (_jsx("div", { "data-slot": "tree", ref: root, role: "tree", "aria-label": label, onKeyDown: onKeyDown, className: cn('flex flex-col', className), children: _jsx(TreeLevel, { nodes: nodes, currentHref: currentHref, depth: 0, tabStopFor: tabStopFor, onFocusNode: setStop }) }));
 }
 export { Tree };

package/dist/components/ui/typography.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cva } from 'class-variance-authority';
-import { cn } from '../../lib/utils';
+import { cn } from '../../lib/utils.js';
 const headingVariants = cva('font-semibold tracking-tight text-balance', {
     variants: {
         size: {

package/dist/components/ui/video-player.d.ts

@@ -0,0 +1,236 @@
+import type { ComponentProps, ReactNode } from 'react';
+/**
+ * One caption or description track, and the words a reader meets it under.
+ *
+ * Exported because a caller builds a list of these from their own localisation
+ * data and would otherwise repeat the shape at every call site.
+ */
+export type VideoPlayerTrack = {
+    /** The WebVTT file the browser fetches the cues from. */
+    src: string;
+    /**
+     * The language the cues in that file are written in, as a BCP 47 tag.
+     *
+     * Required because it is the tag the browser matches against the reader's own
+     * language list to decide which track to offer first, and a track with no tag
+     * is never preferred for anybody. It is not a claim a consumer makes lightly
+     * either: a file labelled `en` that carries translated cues is a caption track
+     * that will be served to an English reader who cannot read them.
+     */
+    srcLang: string;
+    /**
+     * The name this track is listed under in the browser's own track menu.
+     *
+     * Required, and it is the caller's word for a reason that is sharper here than
+     * anywhere else in this package: the browser renders this string verbatim, in
+     * the platform's own control bar, in a font and a language Prism does not get
+     * to choose. "English" and "English (UK)" and "English, audio description" are
+     * three different things to a reader and only the consumer knows which one this
+     * file is. Prism writing a default would put an English word into the
+     * platform's own menu of a product that may not use English.
+     */
+    label: string;
+    /**
+     * What the track carries, and required rather than defaulted.
+     *
+     * `captions` is the dialogue and everything that carries meaning with it: the
+     * speaker names, the sound that is not speech, the text on the screen.
+     * `descriptions` is the audio description, a second track of what the picture
+     * is doing, written to be read in the gaps between the captions.
+     *
+     * There is no default because the two are not interchangeable and a browser
+     * cannot tell them apart: it renders both in the same menu and a description
+     * filed as a caption is read out over the dialogue. The three other kinds the
+     * HTML specification allows are deliberately absent. `subtitles` is a
+     * translation of dialogue that already exists as captions, and a file per
+     * language is the correct shape for that rather than two tracks claiming the
+     * same dialogue. `chapters` is a menu this Component does not read and has no
+     * vocabulary for. `metadata` is not rendered by any browser at all, so offering
+     * it would be a prop that quietly does nothing.
+     */
+    kind: 'captions' | 'descriptions';
+    /**
+     * Whether the browser turns this track on without being asked.
+     *
+     * At most one track in a list should say so, and which one is the caller's
+     * because which language the reader reads is not knowable from here. A video
+     * whose every track leaves this off plays with no captions on, which is the
+     * default this Component exists to make a decision about rather than inherit.
+     */
+    default?: boolean;
+};
+/** The props the VideoPlayer accepts. */
+export interface VideoPlayerProps extends Omit<ComponentProps<'div'>, 'children'> {
+    /** The file the browser plays. Progressive, and the caller's to choose. */
+    src: string;
+    /**
+     * The captions, and required.
+     *
+     * Required rather than optional, and an empty array is an answer rather than an
+     * omission: it says the video carries no dialogue and nothing that needs
+     * transcribing, which is true of a screen recording of a cursor and not true of
+     * a recorded stand-up. Making it required means the question is asked at build
+     * time, and an optional prop is a question nobody asks. It is the one prop here
+     * whose absence would be a WCAG 1.2.2 failure for most of the videos a B2B
+     * product ships, and a Component that made it optional would be making that
+     * decision quietly on the consumer's behalf.
+     */
+    captions: readonly VideoPlayerTrack[];
+    /**
+     * The name a screen reader reads for the element itself, and required.
+     *
+     * A `<video>` has no name of its own. Its poster is announced as an image, its
+     * caption track labels are only reachable by opening the browser's own track
+     * menu, and a video that is not playing announces almost nothing at all. So the
+     * name is the caller's and it is required, because the alternative is Prism
+     * inventing one and publishing it as part of this Component's interface.
+     */
+    label: string;
+    /**
+     * The image shown before the video plays, and the caller's.
+     *
+     * A poster is a claim about the content, so this Component does not compose
+     * one: a gradient with a play triangle on it tells a reader that the video
+     * starts immediately and is about to start, which is a claim about a consumer's
+     * file that nobody can check from here. A caller who wants a poster draws it, and
+     * a caller who wants the browser's own first frame gets it by passing none.
+     */
+    poster?: string;
+    /**
+     * The ratio the frame holds, as width over height. @defaultValue 16 / 9
+     *
+     * Passed to `AspectRatio`, so an undrawable ratio falls back the same way it
+     * does everywhere else in this package, and a caller who wants the frame to be
+     * exactly as tall as the video can pass the file's own dimensions once at
+     * upload time.
+     */
+    ratio?: number;
+    /**
+     * Whether the browser's own control bar is drawn. @defaultValue true
+     *
+     * On by default and the reason is worth the whole paragraph. The platform's
+     * controls are the only control surface Prism can be confident is operable by
+     * keyboard, announced correctly by a screen reader, and already translated into
+     * the reader's language by the reader's own platform. Every custom control bar
+     * this package could draw instead would be a re-derivation of that, and the
+     * honest accounting of a video player written from scratch is that its controls
+     * are the part that ships the bugs.
+     */
+    showControls?: boolean;
+    /**
+     * The tokens in the browser's own `controlsList`, in the caller's words.
+     *
+     * Passed straight through, because the tokens are the platform's and this
+     * Component has no opinion on which of them a product should withhold. A string
+     * rather than an array of booleans because the attribute is a space-separated
+     * list by specification, and the browser ignores the ones it does not know, so
+     * passing tokens for a browser that does not implement them is harmless.
+     */
+    controlsList?: string;
+    /** How much the browser fetches before the reader presses play. @defaultValue 'metadata' */
+    preload?: 'none' | 'metadata' | 'auto';
+    /**
+     * Whether the video plays inside its frame rather than taking the screen.
+     *
+     * @defaultValue true
+     *
+     * A default rather than an omission, because the platform default on a phone is
+     * to take the whole screen, and a reader who taps a diagram in a document and
+     * is thrown into a full-screen player has lost the document. A caller whose
+     * video really is better full screen turns this off.
+     */
+    playsInline?: boolean;
+    /**
+     * The caller's own controls, drawn under the frame.
+     *
+     * A slot and not a set of props, because every control that goes here is one
+     * Prism refuses to own: a play button is the media engine's, a chapter list is
+     * the caller's data, a speed menu is a preference Prism does not hold. What the
+     * slot buys is a place to draw them beside a frame that is already the right
+     * shape. The cost is the one this Component's central decision already names:
+     * nothing here works until the caller wires it to the element, because Prism
+     * never touches the media element and exposes no handle to it.
+     */
+    controls?: ReactNode;
+    /**
+     * The words of the video, in the caller's own markup.
+     *
+     * A slot rather than a prop of type string because a transcript is not a string:
+     * it is headings, timestamps, speaker names and paragraphs, and a Component that
+     * took a flat string would force all of that into one block with no structure a
+     * reader can navigate. It is where an audio description belongs in text form,
+     * which is the only form of a description a reader can skim, search, translate
+     * or read with a screen reader that will not read the description track aloud.
+     */
+    transcript?: ReactNode;
+    /** Layout only, exactly as on every Component. */
+    className?: string;
+}
+/**
+ * A video surface with the caller's source, poster, caption tracks and controls.
+ *
+ * **It owns no player engine, and that is the decision rather than a limitation
+ * this Component could not afford.** There is no media library in this package and
+ * no embed SDK, and the reason is that a player engine is not a Component. A
+ * player is a decode pipeline, a buffering policy, an adaptive-bitrate ladder, a
+ * DRM boundary and a set of vendor fallbacks, and every one of those is a
+ * product's decision about its own content and its own reach. Shipping one would
+ * put a JavaScript runtime in the bundle of every consumer who wanted a framed
+ * `<video>`, and it would put it there whether or not that consumer ever played
+ * anything, which is the cost the client-JavaScript budget in `DESIGN.md` exists
+ * to refuse. So this Component is a styled `<video>` element with a frame, a
+ * caption track list and two slots, and the engine is the one every browser
+ * already has.
+ *
+ * **A styled element with two slots, rather than a slot-only container, and the
+ * reason is who owns the semantics.** A container with a `children` slot would be
+ * smaller and would ship nothing at all: no track list, no poster, no ratio, no
+ * `controls` decision, no `playsInline` default. Every one of those would then be
+ * assembled by the consumer, and every one of them is a place where a video
+ * silently becomes inaccessible: a `<track>` with no `label` is a track a screen
+ * reader announces as an unnamed entry, a `<video>` with no `playsInline` throws
+ * a phone reader out of the document, and a `<video controls>` is the one control
+ * surface in this Component's story that is already correct. A Component that
+ * owned none of that would be a Component whose entire job was to be an element
+ * with a border, which is a class and not a Component. What it owns is the part
+ * that must not be optional: the required caption list, the required name, the
+ * frame's ratio, the default control surface and the poster as the caller's
+ * image.
+ *
+ * **The honest cost is that Prism cannot help with a custom control bar.** The
+ * `controls` slot is where a caller's own controls go and it is a plain box: this
+ * Component holds no reference to the media element, exposes no imperative handle,
+ * and offers no state, so a caller who wants a play button of their own has to
+ * reach for the element themselves with a `ref`, a `useRef` and the platform's own
+ * `play()`, `pause()`, `currentTime` and `volume` properties. That is the deal,
+ * and it is a deal with a real bill: every control a caller builds is a control
+ * they must make keyboard operable, announce, localise, test and keep in step with
+ * the media element's own state, and Prism will not catch them when they get it
+ * wrong. A Component that handed out a handle and a state machine would be able to
+ * catch some of that, and would also be the engine this Component refuses to be.
+ * The answer for a consumer who wants both is that the platform's controls are on
+ * by default for exactly this reason, and that a custom bar is a request upstream
+ * rather than something to assemble from a `ref` beside this Component.
+ *
+ * **Autoplay is refused rather than left out by accident.** There is no `autoPlay`
+ * prop, no `loop` and no `muted`. A video that starts on its own with sound is an
+ * accessibility failure and one no consumer should have to opt out of, and a video
+ * that starts silently is a claim about the content that only the consumer's file
+ * can support. A caller who has an autoplaying loop wants a plain `<video>` in a
+ * `className` of their own, not a design system asserting that sound is optional.
+ *
+ * **Nothing here is animated.** The frame is a box with a border, the poster is
+ * the browser's own cross-fade to the first frame, and the control bar is the
+ * platform's. There is no fade on mount, no play-button pulse and no loading
+ * shimmer, because DESIGN.md's first motion law is that motion is state feedback
+ * and a video surface has no state of its own to report.
+ *
+ * It is a server Component, and that is a consequence rather than an accident: it
+ * holds no state, reads no context, attaches no handler and takes no function
+ * prop, so a page with a dozen videos costs no JavaScript from this package at
+ * all. Everything that needs a runtime is the consumer's, which is the same
+ * argument `FilterPanel` makes and the reason this could be a plain `div` at all.
+ */
+declare function VideoPlayer({ src, captions, label, poster, ratio, showControls, controlsList, preload, playsInline, controls, transcript, className, ...props }: VideoPlayerProps): import("react").JSX.Element;
+export { VideoPlayer };
+//# sourceMappingURL=video-player.d.ts.map

package/dist/components/ui/video-player.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"video-player.d.ts","sourceRoot":"","sources":["../../../src/components/ui/video-player.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAKtD;;;;;GAKG;AACH,MAAM,MAAM,gBAAgB,GAAG;IAC7B,yDAAyD;IACzD,GAAG,EAAE,MAAM,CAAA;IACX;;;;;;;;OAQG;IACH,OAAO,EAAE,MAAM,CAAA;IACf;;;;;;;;;;OAUG;IACH,KAAK,EAAE,MAAM,CAAA;IACb;;;;;;;;;;;;;;;;;OAiBG;IACH,IAAI,EAAE,UAAU,GAAG,cAAc,CAAA;IACjC;;;;;;;OAOG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB,CAAA;AAED,yCAAyC;AACzC,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC;IAC/E,2EAA2E;IAC3E,GAAG,EAAE,MAAM,CAAA;IACX;;;;;;;;;;;OAWG;IACH,QAAQ,EAAE,SAAS,gBAAgB,EAAE,CAAA;IACrC;;;;;;;;OAQG;IACH,KAAK,EAAE,MAAM,CAAA;IACb;;;;;;;;OAQG;IACH,MAAM,CAAC,EAAE,MAAM,CAAA;IACf;;;;;;;OAOG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;;;;;;;;;OAUG;IACH,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB;;;;;;;;OAQG;IACH,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,4FAA4F;IAC5F,OAAO,CAAC,EAAE,MAAM,GAAG,UAAU,GAAG,MAAM,CAAA;IACtC;;;;;;;;;OASG;IACH,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB;;;;;;;;;;OAUG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB;;;;;;;;;OASG;IACH,UAAU,CAAC,EAAE,SAAS,CAAA;IACtB,kDAAkD;IAClD,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgEG;AACH,iBAAS,WAAW,CAAC,EACnB,GAAG,EACH,QAAQ,EACR,KAAK,EACL,MAAM,EACN,KAAK,EACL,YAAmB,EACnB,YAAY,EACZ,OAAoB,EACpB,WAAkB,EAClB,QAAQ,EACR,UAAU,EACV,SAAS,EACT,GAAG,KAAK,EACT,EAAE,gBAAgB,+BA+DlB;AAED,OAAO,EAAE,WAAW,EAAE,CAAA"}

package/dist/components/ui/video-player.js

@@ -0,0 +1,72 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../../lib/utils.js';
+import { AspectRatio } from './aspect-ratio.js';
+/**
+ * A video surface with the caller's source, poster, caption tracks and controls.
+ *
+ * **It owns no player engine, and that is the decision rather than a limitation
+ * this Component could not afford.** There is no media library in this package and
+ * no embed SDK, and the reason is that a player engine is not a Component. A
+ * player is a decode pipeline, a buffering policy, an adaptive-bitrate ladder, a
+ * DRM boundary and a set of vendor fallbacks, and every one of those is a
+ * product's decision about its own content and its own reach. Shipping one would
+ * put a JavaScript runtime in the bundle of every consumer who wanted a framed
+ * `<video>`, and it would put it there whether or not that consumer ever played
+ * anything, which is the cost the client-JavaScript budget in `DESIGN.md` exists
+ * to refuse. So this Component is a styled `<video>` element with a frame, a
+ * caption track list and two slots, and the engine is the one every browser
+ * already has.
+ *
+ * **A styled element with two slots, rather than a slot-only container, and the
+ * reason is who owns the semantics.** A container with a `children` slot would be
+ * smaller and would ship nothing at all: no track list, no poster, no ratio, no
+ * `controls` decision, no `playsInline` default. Every one of those would then be
+ * assembled by the consumer, and every one of them is a place where a video
+ * silently becomes inaccessible: a `<track>` with no `label` is a track a screen
+ * reader announces as an unnamed entry, a `<video>` with no `playsInline` throws
+ * a phone reader out of the document, and a `<video controls>` is the one control
+ * surface in this Component's story that is already correct. A Component that
+ * owned none of that would be a Component whose entire job was to be an element
+ * with a border, which is a class and not a Component. What it owns is the part
+ * that must not be optional: the required caption list, the required name, the
+ * frame's ratio, the default control surface and the poster as the caller's
+ * image.
+ *
+ * **The honest cost is that Prism cannot help with a custom control bar.** The
+ * `controls` slot is where a caller's own controls go and it is a plain box: this
+ * Component holds no reference to the media element, exposes no imperative handle,
+ * and offers no state, so a caller who wants a play button of their own has to
+ * reach for the element themselves with a `ref`, a `useRef` and the platform's own
+ * `play()`, `pause()`, `currentTime` and `volume` properties. That is the deal,
+ * and it is a deal with a real bill: every control a caller builds is a control
+ * they must make keyboard operable, announce, localise, test and keep in step with
+ * the media element's own state, and Prism will not catch them when they get it
+ * wrong. A Component that handed out a handle and a state machine would be able to
+ * catch some of that, and would also be the engine this Component refuses to be.
+ * The answer for a consumer who wants both is that the platform's controls are on
+ * by default for exactly this reason, and that a custom bar is a request upstream
+ * rather than something to assemble from a `ref` beside this Component.
+ *
+ * **Autoplay is refused rather than left out by accident.** There is no `autoPlay`
+ * prop, no `loop` and no `muted`. A video that starts on its own with sound is an
+ * accessibility failure and one no consumer should have to opt out of, and a video
+ * that starts silently is a claim about the content that only the consumer's file
+ * can support. A caller who has an autoplaying loop wants a plain `<video>` in a
+ * `className` of their own, not a design system asserting that sound is optional.
+ *
+ * **Nothing here is animated.** The frame is a box with a border, the poster is
+ * the browser's own cross-fade to the first frame, and the control bar is the
+ * platform's. There is no fade on mount, no play-button pulse and no loading
+ * shimmer, because DESIGN.md's first motion law is that motion is state feedback
+ * and a video surface has no state of its own to report.
+ *
+ * It is a server Component, and that is a consequence rather than an accident: it
+ * holds no state, reads no context, attaches no handler and takes no function
+ * prop, so a page with a dozen videos costs no JavaScript from this package at
+ * all. Everything that needs a runtime is the consumer's, which is the same
+ * argument `FilterPanel` makes and the reason this could be a plain `div` at all.
+ */
+function VideoPlayer({ src, captions, label, poster, ratio, showControls = true, controlsList, preload = 'metadata', playsInline = true, controls, transcript, className, ...props }) {
+    return (_jsxs("div", { "data-slot": "video-player", className: cn('flex flex-col gap-3', className), ...props, children: [_jsx(AspectRatio, { ratio: ratio, className: "bg-muted/40 rounded-xl border", children: _jsx("video", { "data-slot": "video-player-video", className: "size-full object-contain", src: src, poster: poster, controls: showControls, controlsList: controlsList, preload: preload, playsInline: playsInline, "aria-label": label, children: captions.map((track) => (_jsx("track", { "data-slot": "video-player-track", kind: track.kind, src: track.src, srcLang: track.srcLang, label: track.label, default: track.default }, track.src))) }) }), controls === undefined ? null : (_jsx("div", { "data-slot": "video-player-controls", className: "flex flex-col gap-2", children: controls })), transcript === undefined ? null : (_jsx("div", { "data-slot": "video-player-transcript", className: "text-muted-foreground text-sm", children: transcript }))] }));
+}
+export { VideoPlayer };