@mieweb/ui 0.11.0-dev.35 → 0.11.0-dev.37

package/dist/components/EmailEditor/index.js

@@ -1,18 +1,21 @@
-export { EMAIL_BLOCK_TYPES, EmailEditor, createDefaultDesignSettings, createEmailBlock, createEmailHtmlSanitizer, createEmptyEmailContentTree, defaultEmailEditorLabels, generateEmailBlockId, renderEmailMjml } from '../../chunk-EX7Q5545.js';
+export { EMAIL_BLOCK_TYPES, EmailEditor, createDefaultDesignSettings, createEmailBlock, createEmailHtmlSanitizer, createEmptyEmailContentTree, defaultEmailEditorLabels, generateEmailBlockId, renderEmailMjml } from '../../chunk-AKC677ZF.js';
 import '../../chunk-XBAAHOCP.js';
 import '../../chunk-ME7EVT6F.js';
 import '../../chunk-AQ564XO7.js';
 import '../../chunk-CVNPNZMX.js';
-import '../../chunk-4SUEBKTY.js';
+import '../../chunk-2OTPQPJS.js';
+import '../../chunk-VCI2Y7ST.js';
+import '../../chunk-HNXLLDPN.js';
+import '../../chunk-IALTKN3Y.js';
+import '../../chunk-NIE3WBJH.js';
 import '../../chunk-EWPNM6OO.js';
 import '../../chunk-5YOT4DVH.js';
 import '../../chunk-OQWZYKJM.js';
-import '../../chunk-VCI2Y7ST.js';
 import '../../chunk-AMYFRY7K.js';
 import '../../chunk-OYUIEJPN.js';
 import '../../chunk-6NZXWKUE.js';
 import '../../chunk-3IMM2PM4.js';
-import '../../chunk-HNXLLDPN.js';
+import '../../chunk-RUGHNFQG.js';
 import '../../chunk-HTZ27DGZ.js';
 import '../../chunk-T4ME7QCT.js';
 import '../../chunk-62ZOA6PX.js';

package/dist/components/KeyboardShortcutsOverlay/index.cjs

@@ -1,10 +1,10 @@
 'use strict';
 
-var chunkMZR634HI_cjs = require('../../chunk-MZR634HI.cjs');
-require('../../chunk-XEHD2HA5.cjs');
+var chunk3M2BBOXF_cjs = require('../../chunk-3M2BBOXF.cjs');
+require('../../chunk-FRPELUI5.cjs');
 require('../../chunk-NNEFAUHV.cjs');
-require('../../chunk-FHY3K6PL.cjs');
 require('../../chunk-SCV7C55E.cjs');
+require('../../chunk-FHY3K6PL.cjs');
 require('../../chunk-IEY3ZJIT.cjs');
 require('../../chunk-S5RVSXDV.cjs');
 require('../../chunk-EUAMEVVI.cjs');
@@ -13,11 +13,11 @@ require('../../chunk-EUAMEVVI.cjs');
 
 Object.defineProperty(exports, "Kbd", {
   enumerable: true,
-  get: function () { return chunkMZR634HI_cjs.Kbd; }
+  get: function () { return chunk3M2BBOXF_cjs.Kbd; }
 });
 Object.defineProperty(exports, "KeyboardShortcutsOverlay", {
   enumerable: true,
-  get: function () { return chunkMZR634HI_cjs.KeyboardShortcutsOverlay; }
+  get: function () { return chunk3M2BBOXF_cjs.KeyboardShortcutsOverlay; }
 });
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map

package/dist/components/KeyboardShortcutsOverlay/index.js

@@ -1,8 +1,8 @@
-export { Kbd, KeyboardShortcutsOverlay } from '../../chunk-4GSFVD5V.js';
-import '../../chunk-VMEVLBI3.js';
+export { Kbd, KeyboardShortcutsOverlay } from '../../chunk-NUHHWELE.js';
+import '../../chunk-GKMMDKYY.js';
 import '../../chunk-4SMSH4OY.js';
-import '../../chunk-T4ME7QCT.js';
 import '../../chunk-VSQF22GL.js';
+import '../../chunk-T4ME7QCT.js';
 import '../../chunk-F4N67NAF.js';
 import '../../chunk-TQONQSJO.js';
 import '../../chunk-PX6F3LHL.js';

package/dist/components/Markdown/index.cjs

@@ -1,10 +1,10 @@
 'use strict';
 
-var chunkKD7YD6US_cjs = require('../../chunk-KD7YD6US.cjs');
+var chunkQOQQVNP3_cjs = require('../../chunk-QOQQVNP3.cjs');
+var chunkN7AIZWQS_cjs = require('../../chunk-N7AIZWQS.cjs');
 var chunkVVKUYQER_cjs = require('../../chunk-VVKUYQER.cjs');
 var chunkVIVS44IG_cjs = require('../../chunk-VIVS44IG.cjs');
 var chunkG42V64UW_cjs = require('../../chunk-G42V64UW.cjs');
-var chunkN7AIZWQS_cjs = require('../../chunk-N7AIZWQS.cjs');
 var chunkFNSFMM4F_cjs = require('../../chunk-FNSFMM4F.cjs');
 require('../../chunk-EACNRR3C.cjs');
 require('../../chunk-FSARTLUE.cjs');
@@ -16,19 +16,23 @@ require('../../chunk-EUAMEVVI.cjs');
 
 Object.defineProperty(exports, "CodeBlock", {
   enumerable: true,
-  get: function () { return chunkKD7YD6US_cjs.CodeBlock; }
+  get: function () { return chunkQOQQVNP3_cjs.CodeBlock; }
 });
 Object.defineProperty(exports, "MarkdownRenderer", {
   enumerable: true,
-  get: function () { return chunkKD7YD6US_cjs.MarkdownRenderer; }
+  get: function () { return chunkQOQQVNP3_cjs.MarkdownRenderer; }
 });
 Object.defineProperty(exports, "highlightCode", {
   enumerable: true,
-  get: function () { return chunkKD7YD6US_cjs.highlightCode; }
+  get: function () { return chunkQOQQVNP3_cjs.highlightCode; }
 });
 Object.defineProperty(exports, "useMarkdown", {
   enumerable: true,
-  get: function () { return chunkKD7YD6US_cjs.useMarkdown; }
+  get: function () { return chunkQOQQVNP3_cjs.useMarkdown; }
+});
+Object.defineProperty(exports, "MermaidBlock", {
+  enumerable: true,
+  get: function () { return chunkN7AIZWQS_cjs.MermaidBlock; }
 });
 Object.defineProperty(exports, "SurveyBlock", {
   enumerable: true,
@@ -42,10 +46,6 @@ Object.defineProperty(exports, "HtmlPreviewBlock", {
   enumerable: true,
   get: function () { return chunkG42V64UW_cjs.HtmlPreviewBlock; }
 });
-Object.defineProperty(exports, "MermaidBlock", {
-  enumerable: true,
-  get: function () { return chunkN7AIZWQS_cjs.MermaidBlock; }
-});
 Object.defineProperty(exports, "FenceBlock", {
   enumerable: true,
   get: function () { return chunkFNSFMM4F_cjs.FenceBlock; }

package/dist/components/Markdown/index.js

@@ -1,8 +1,8 @@
-export { CodeBlock, MarkdownRenderer, highlightCode, useMarkdown } from '../../chunk-YSIFPHLX.js';
+export { CodeBlock, MarkdownRenderer, highlightCode, useMarkdown } from '../../chunk-OJQMC426.js';
+export { MermaidBlock } from '../../chunk-YCPWQWQQ.js';
 export { SurveyBlock } from '../../chunk-OYLZ5PF2.js';
 export { CsvBlock } from '../../chunk-NA3NRLX2.js';
 export { HtmlPreviewBlock } from '../../chunk-QATEO4KC.js';
-export { MermaidBlock } from '../../chunk-YCPWQWQQ.js';
 export { FenceBlock } from '../../chunk-Q5APDRMO.js';
 import '../../chunk-N5JDL4VE.js';
 import '../../chunk-WX2XB6FP.js';

package/dist/components/MediaEditor/index.cjs

@@ -1,21 +1,22 @@
 'use strict';
 
-var chunk3O3Q3DX7_cjs = require('../../chunk-3O3Q3DX7.cjs');
-require('../../chunk-GDKOYVX3.cjs');
-require('../../chunk-ECKIFQSD.cjs');
+var chunkGG3IK5TL_cjs = require('../../chunk-GG3IK5TL.cjs');
+require('../../chunk-TZKBW4GA.cjs');
+require('../../chunk-NZUQL42A.cjs');
+require('../../chunk-LTCHD3K5.cjs');
 require('../../chunk-GM376OD6.cjs');
 require('../../chunk-4UDEMJE4.cjs');
-require('../../chunk-QHCAWDMG.cjs');
+require('../../chunk-HDZQLTBP.cjs');
 require('../../chunk-UPWIJC6I.cjs');
 require('../../chunk-7AECNMYV.cjs');
-require('../../chunk-XEHD2HA5.cjs');
+require('../../chunk-FRPELUI5.cjs');
+require('../../chunk-NNEFAUHV.cjs');
+require('../../chunk-SCV7C55E.cjs');
 require('../../chunk-I44YNYI6.cjs');
 require('../../chunk-Z5S5JEJD.cjs');
-require('../../chunk-NNEFAUHV.cjs');
 require('../../chunk-FHY3K6PL.cjs');
 require('../../chunk-FSGEDDF2.cjs');
 require('../../chunk-AOHJILLU.cjs');
-require('../../chunk-SCV7C55E.cjs');
 require('../../chunk-Z3WMDVMR.cjs');
 require('../../chunk-EACNRR3C.cjs');
 require('../../chunk-FSARTLUE.cjs');
@@ -28,23 +29,23 @@ require('../../chunk-EUAMEVVI.cjs');
 
 Object.defineProperty(exports, "FillerWordsModal", {
   enumerable: true,
-  get: function () { return chunk3O3Q3DX7_cjs.FillerWordsModal; }
+  get: function () { return chunkGG3IK5TL_cjs.FillerWordsModal; }
 });
 Object.defineProperty(exports, "MediaEditor", {
   enumerable: true,
-  get: function () { return chunk3O3Q3DX7_cjs.MediaEditor; }
+  get: function () { return chunkGG3IK5TL_cjs.MediaEditor; }
 });
 Object.defineProperty(exports, "SilenceSettingsModal", {
   enumerable: true,
-  get: function () { return chunk3O3Q3DX7_cjs.SilenceSettingsModal; }
+  get: function () { return chunkGG3IK5TL_cjs.SilenceSettingsModal; }
 });
 Object.defineProperty(exports, "SpeedMarkerMenu", {
   enumerable: true,
-  get: function () { return chunk3O3Q3DX7_cjs.SpeedMarkerMenu; }
+  get: function () { return chunkGG3IK5TL_cjs.SpeedMarkerMenu; }
 });
 Object.defineProperty(exports, "WordEditorModal", {
   enumerable: true,
-  get: function () { return chunk3O3Q3DX7_cjs.WordEditorModal; }
+  get: function () { return chunkGG3IK5TL_cjs.WordEditorModal; }
 });
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map

package/dist/components/MediaEditor/index.js

@@ -1,19 +1,20 @@
-export { FillerWordsModal, MediaEditor, SilenceSettingsModal, SpeedMarkerMenu, WordEditorModal } from '../../chunk-YGSPIDE4.js';
-import '../../chunk-V5VPECJI.js';
-import '../../chunk-R5P7NAJQ.js';
+export { FillerWordsModal, MediaEditor, SilenceSettingsModal, SpeedMarkerMenu, WordEditorModal } from '../../chunk-LQ22CY7X.js';
+import '../../chunk-JCIQIR5V.js';
+import '../../chunk-CRR7AE5D.js';
+import '../../chunk-CKECOCYJ.js';
 import '../../chunk-GAI6SRJ3.js';
 import '../../chunk-6LIC3DKE.js';
-import '../../chunk-TUYWCUKH.js';
+import '../../chunk-4LKAZW2W.js';
 import '../../chunk-VCI2Y7ST.js';
 import '../../chunk-753Z3NXL.js';
-import '../../chunk-VMEVLBI3.js';
+import '../../chunk-GKMMDKYY.js';
+import '../../chunk-4SMSH4OY.js';
+import '../../chunk-VSQF22GL.js';
 import '../../chunk-6NZXWKUE.js';
 import '../../chunk-3IMM2PM4.js';
-import '../../chunk-4SMSH4OY.js';
 import '../../chunk-T4ME7QCT.js';
 import '../../chunk-62ZOA6PX.js';
 import '../../chunk-WSNMQQ4P.js';
-import '../../chunk-VSQF22GL.js';
 import '../../chunk-YVKBXNPK.js';
 import '../../chunk-N5JDL4VE.js';
 import '../../chunk-WX2XB6FP.js';

package/dist/components/MediaFeed/index.cjs

@@ -1,17 +1,20 @@
 'use strict';
 
-var chunk4M2KE4O5_cjs = require('../../chunk-4M2KE4O5.cjs');
-require('../../chunk-GLXTVCHN.cjs');
-require('../../chunk-ECKIFQSD.cjs');
-require('../../chunk-QHCAWDMG.cjs');
+var chunkAHYDJN4H_cjs = require('../../chunk-AHYDJN4H.cjs');
+require('../../chunk-D3FNZMOB.cjs');
+require('../../chunk-TZKBW4GA.cjs');
+require('../../chunk-NZUQL42A.cjs');
+require('../../chunk-LTCHD3K5.cjs');
+require('../../chunk-HDZQLTBP.cjs');
 require('../../chunk-P22YCUVM.cjs');
 require('../../chunk-Q3YVLO52.cjs');
 require('../../chunk-GKDHMNUA.cjs');
-require('../../chunk-XEHD2HA5.cjs');
+require('../../chunk-FRPELUI5.cjs');
 require('../../chunk-NNEFAUHV.cjs');
-require('../../chunk-FHY3K6PL.cjs');
 require('../../chunk-SCV7C55E.cjs');
+require('../../chunk-FHY3K6PL.cjs');
 require('../../chunk-YW2AKBLS.cjs');
+require('../../chunk-Z3WMDVMR.cjs');
 require('../../chunk-EACNRR3C.cjs');
 require('../../chunk-FSARTLUE.cjs');
 require('../../chunk-HGJHWI7W.cjs');
@@ -23,7 +26,7 @@ require('../../chunk-EUAMEVVI.cjs');
 
 Object.defineProperty(exports, "MediaFeed", {
   enumerable: true,
-  get: function () { return chunk4M2KE4O5_cjs.MediaFeed; }
+  get: function () { return chunkAHYDJN4H_cjs.MediaFeed; }
 });
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map

package/dist/components/MediaFeed/index.d.cts

@@ -40,6 +40,24 @@ interface MediaFeedLabels {
     next: string;
     play: string;
     pause: string;
+    /** The player's own controls in the `overlay` layout. */
+    mute: string;
+    unmute: string;
+    seek: string;
+    playerFullscreen: string;
+    exitPlayerFullscreen: string;
+    pictureInPicture: string;
+    exitPictureInPicture: string;
+    /** The player's elapsed and total time, already formatted. */
+    time: (current: string, duration: string) => string;
+    /** The player's speed button: its text for a rate, and its name. */
+    playerRate: (rate: number) => string;
+    playerSpeed: (rate: string) => string;
+    showCaptions: string;
+    hideCaptions: string;
+    /** The overlay's toggle for a title or caption that doesn't fit. */
+    showMore: string;
+    showLess: string;
     blockedAutoplay: string;
     mediaError: string;
     openSource: string;
@@ -73,6 +91,21 @@ interface MediaFeedProps<T> extends Omit<React.HTMLAttributes<HTMLDivElement>, '
     getAuthor?: (item: T) => MediaFeedAuthor;
     /** Host-owned actions, such as reactions or opening a conversation. */
     renderActions?: (item: T) => React.ReactNode;
+    /**
+     * `stacked` (default): each item is a card, its details under the media.
+     * `overlay`: the media fills each item edge to edge on a dark stage, with
+     * the details at its foot as short-video apps place them (author, title and
+     * caption at the start, actions in a column at the end), Previous/Next on
+     * the end edge, and the player's touch-first overlay controls. Suits a phone
+     * or a full-height pane, upright or sideways.
+     */
+    layout?: 'stacked' | 'overlay';
+    /**
+     * Offer the full-screen viewer, an expand button on each item. Defaults to
+     * `true` for `stacked` and `false` for `overlay`, where the feed already
+     * fills its space and the player has its own full screen.
+     */
+    allowFullscreen?: boolean;
     /** Replace the built-in player, respecting its active playback boundary. */
     renderMedia?: (media: MediaFeedMedia, context: MediaFeedRenderContext<T>) => React.ReactNode;
     /** Controlled selection. Changes scroll the selected record into view. */

package/dist/components/MediaFeed/index.d.ts

@@ -40,6 +40,24 @@ interface MediaFeedLabels {
     next: string;
     play: string;
     pause: string;
+    /** The player's own controls in the `overlay` layout. */
+    mute: string;
+    unmute: string;
+    seek: string;
+    playerFullscreen: string;
+    exitPlayerFullscreen: string;
+    pictureInPicture: string;
+    exitPictureInPicture: string;
+    /** The player's elapsed and total time, already formatted. */
+    time: (current: string, duration: string) => string;
+    /** The player's speed button: its text for a rate, and its name. */
+    playerRate: (rate: number) => string;
+    playerSpeed: (rate: string) => string;
+    showCaptions: string;
+    hideCaptions: string;
+    /** The overlay's toggle for a title or caption that doesn't fit. */
+    showMore: string;
+    showLess: string;
     blockedAutoplay: string;
     mediaError: string;
     openSource: string;
@@ -73,6 +91,21 @@ interface MediaFeedProps<T> extends Omit<React.HTMLAttributes<HTMLDivElement>, '
     getAuthor?: (item: T) => MediaFeedAuthor;
     /** Host-owned actions, such as reactions or opening a conversation. */
     renderActions?: (item: T) => React.ReactNode;
+    /**
+     * `stacked` (default): each item is a card, its details under the media.
+     * `overlay`: the media fills each item edge to edge on a dark stage, with
+     * the details at its foot as short-video apps place them (author, title and
+     * caption at the start, actions in a column at the end), Previous/Next on
+     * the end edge, and the player's touch-first overlay controls. Suits a phone
+     * or a full-height pane, upright or sideways.
+     */
+    layout?: 'stacked' | 'overlay';
+    /**
+     * Offer the full-screen viewer, an expand button on each item. Defaults to
+     * `true` for `stacked` and `false` for `overlay`, where the feed already
+     * fills its space and the player has its own full screen.
+     */
+    allowFullscreen?: boolean;
     /** Replace the built-in player, respecting its active playback boundary. */
     renderMedia?: (media: MediaFeedMedia, context: MediaFeedRenderContext<T>) => React.ReactNode;
     /** Controlled selection. Changes scroll the selected record into view. */

package/dist/components/MediaFeed/index.js

@@ -1,15 +1,18 @@
-export { MediaFeed } from '../../chunk-RTADGBBN.js';
-import '../../chunk-RISZWWEQ.js';
-import '../../chunk-R5P7NAJQ.js';
-import '../../chunk-TUYWCUKH.js';
+export { MediaFeed } from '../../chunk-JUY2JLFL.js';
+import '../../chunk-SCGXD334.js';
+import '../../chunk-JCIQIR5V.js';
+import '../../chunk-CRR7AE5D.js';
+import '../../chunk-CKECOCYJ.js';
+import '../../chunk-4LKAZW2W.js';
 import '../../chunk-H2Y7HZV5.js';
 import '../../chunk-DVDT7TX7.js';
 import '../../chunk-TI3TQQ7F.js';
-import '../../chunk-VMEVLBI3.js';
+import '../../chunk-GKMMDKYY.js';
 import '../../chunk-4SMSH4OY.js';
-import '../../chunk-T4ME7QCT.js';
 import '../../chunk-VSQF22GL.js';
+import '../../chunk-T4ME7QCT.js';
 import '../../chunk-XDU65GLW.js';
+import '../../chunk-YVKBXNPK.js';
 import '../../chunk-N5JDL4VE.js';
 import '../../chunk-WX2XB6FP.js';
 import '../../chunk-VP3XNLUL.js';

package/dist/components/MediaPlayer/index.cjs

@@ -1,8 +1,11 @@
 'use strict';
 
-require('../../chunk-GLXTVCHN.cjs');
-var chunkECKIFQSD_cjs = require('../../chunk-ECKIFQSD.cjs');
-require('../../chunk-QHCAWDMG.cjs');
+require('../../chunk-D3FNZMOB.cjs');
+var chunkTZKBW4GA_cjs = require('../../chunk-TZKBW4GA.cjs');
+require('../../chunk-NZUQL42A.cjs');
+require('../../chunk-LTCHD3K5.cjs');
+require('../../chunk-HDZQLTBP.cjs');
+require('../../chunk-Z3WMDVMR.cjs');
 require('../../chunk-EACNRR3C.cjs');
 require('../../chunk-FSARTLUE.cjs');
 require('../../chunk-HGJHWI7W.cjs');
@@ -11,17 +14,21 @@ require('../../chunk-EUAMEVVI.cjs');
 
 
 
+Object.defineProperty(exports, "MediaControls", {
+  enumerable: true,
+  get: function () { return chunkTZKBW4GA_cjs.MediaControls; }
+});
 Object.defineProperty(exports, "MediaPlayer", {
   enumerable: true,
-  get: function () { return chunkECKIFQSD_cjs.MediaPlayer; }
+  get: function () { return chunkTZKBW4GA_cjs.MediaPlayer; }
 });
 Object.defineProperty(exports, "inferMediaKind", {
   enumerable: true,
-  get: function () { return chunkECKIFQSD_cjs.inferMediaKind; }
+  get: function () { return chunkTZKBW4GA_cjs.inferMediaKind; }
 });
 Object.defineProperty(exports, "mediaPlayerVariants", {
   enumerable: true,
-  get: function () { return chunkECKIFQSD_cjs.mediaPlayerVariants; }
+  get: function () { return chunkTZKBW4GA_cjs.mediaPlayerVariants; }
 });
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map

package/dist/components/MediaPlayer/index.d.cts

@@ -2,6 +2,95 @@ import * as class_variance_authority_types from 'class-variance-authority/types'
 import * as React from 'react';
 import { VariantProps } from 'class-variance-authority';
 
+type MediaTransportState = 'idle' | 'loading' | 'playing' | 'paused' | 'error';
+interface UseMediaTransportReturn {
+    /**
+     * Callback ref for the `<audio>`/`<video>` element to control. Pass this to
+     * the element's `ref` (or call it imperatively). Transport listeners attach
+     * when an element mounts and detach when it unmounts.
+     */
+    setMediaElement: (element: HTMLMediaElement | null) => void;
+    /** The currently attached media element, or `null`. */
+    mediaElement: HTMLMediaElement | null;
+    /** Derived transport state. */
+    state: MediaTransportState;
+    /** Current playback position in milliseconds. */
+    currentTimeMs: number;
+    /** Media duration in milliseconds (`0` until known / non-finite). */
+    durationMs: number;
+    /** Current playback rate. */
+    playbackRate: number;
+    /** `true` while `state === 'playing'`. */
+    isPlaying: boolean;
+    /** `true` while `state === 'loading'`. */
+    isLoading: boolean;
+    /** Start playback. */
+    play: () => void;
+    /** Pause playback. */
+    pause: () => void;
+    /** Toggle between play and pause. */
+    togglePlay: () => void;
+    /** Seek to a position in milliseconds. */
+    seekToMs: (timeMs: number) => void;
+    /** Set the playback rate multiplier. */
+    setPlaybackRate: (rate: number) => void;
+    /** Read the current position in milliseconds. */
+    getCurrentTimeMs: () => number;
+    /** Read the duration in milliseconds (`0` when unknown). */
+    getDurationMs: () => number;
+    /** Whether playback is currently paused (reads the element directly). */
+    isPaused: () => boolean;
+}
+
+/** Every string the controls show or announce, for the host to localize. */
+interface MediaControlsLabels {
+    play: string;
+    pause: string;
+    mute: string;
+    unmute: string;
+    seek: string;
+    fullscreen: string;
+    exitFullscreen: string;
+    pictureInPicture: string;
+    exitPictureInPicture: string;
+    /** The elapsed and total time, already formatted (`1:05`, `4:30`). */
+    time: (current: string, duration: string) => string;
+    /** The speed button's text for a rate (`1.5×`). */
+    rate: (rate: number) => string;
+    /** The speed button's accessible name, given its text. */
+    speed: (rate: string) => string;
+    showCaptions: string;
+    hideCaptions: string;
+}
+interface MediaControlsProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** The transport attached to the `<video>` these controls drive. */
+    transport: UseMediaTransportReturn;
+    /**
+     * The box that goes full screen with the controls (the video and these
+     * controls' shared parent). Where the browser can't take an element full
+     * screen (an iPhone), the video opens in the system's own player instead.
+     */
+    fullscreenTarget?: React.RefObject<HTMLElement | null>;
+    /** Localized text for every control; English by default. */
+    labels?: Partial<MediaControlsLabels>;
+    /** The speeds the speed button cycles through (default `[1, 1.5, 2]`). */
+    playbackRates?: readonly number[];
+}
+/**
+ * Touch-first controls laid over a `<video>`, in place of the browser's own.
+ * A tap on the picture plays or pauses it, a round ▶ shows while it's paused,
+ * and a bar along the bottom has play/pause, the time, a seek bar, playback
+ * speed, captions on/off when the video has a caption track, mute, and
+ * picture in picture and full screen where the browser supports them.
+ *
+ * `MediaPlayer` renders it for `controlsStyle="overlay"`. To use it directly,
+ * render it in a positioned box with the video, attach
+ * `transport.setMediaElement` to the video's `ref` and give the video
+ * `playsInline` (without it, an iPhone plays it in the system player, away
+ * from these controls).
+ */
+declare const MediaControls: React.ForwardRefExoticComponent<MediaControlsProps & React.RefAttributes<HTMLDivElement>>;
+
 type MediaPlayerState = 'idle' | 'loading' | 'playing' | 'paused' | 'error';
 type MediaKind = 'video' | 'audio';
 /** Ref handle for controlling {@link MediaPlayer} programmatically. */
@@ -32,9 +121,16 @@ interface MediaPlayerProps extends VariantProps<typeof mediaPlayerVariants> {
     src: string;
     /** Force the media kind; when omitted it is inferred from the src extension. */
     kind?: MediaKind;
-    /** Whether to show native controls (default `true`). */
+    /** Whether to show controls (default `true`). */
     controls?: boolean;
-    /** Begin muted; native controls can still change the volume. */
+    /**
+     * Which controls a video gets (default `'native'`, the browser's own).
+     * `'overlay'` lays touch-first controls over it ({@link MediaControls}),
+     * the same in every browser and in a mobile app's web view. Audio always uses
+     * the browser's.
+     */
+    controlsStyle?: 'native' | 'overlay';
+    /** Begin muted; the controls can still unmute it. */
     muted?: boolean;
     /** Repeat playback when the media ends. */
     loop?: boolean;
@@ -45,11 +141,13 @@ interface MediaPlayerProps extends VariantProps<typeof mediaPlayerVariants> {
     /** Caption/subtitle `<track>` elements. The `src` attribute is always set
      * on the media element, so alternative `<source>` children are ignored. */
     children?: React.ReactNode;
-    /** Localized load-error and retry text. */
+    /** The speeds the overlay controls' speed button cycles through (default `[1, 1.5, 2]`). */
+    playbackRates?: readonly number[];
+    /** Localized load-error and retry text, and the overlay controls' labels. */
     labels?: {
         error?: string;
         retry?: string;
-    };
+    } & Partial<MediaControlsLabels>;
     /** Callback when playback state changes. */
     onStateChange?: (state: MediaPlayerState) => void;
     /** Callback when playback ends. */
@@ -86,4 +184,4 @@ declare function inferMediaKind(src: string): MediaKind;
  */
 declare const MediaPlayer: React.ForwardRefExoticComponent<MediaPlayerProps & React.RefAttributes<MediaPlayerRef>>;
 
-export { type MediaKind, MediaPlayer, type MediaPlayerProps, type MediaPlayerRef, type MediaPlayerState, inferMediaKind, mediaPlayerVariants };
+export { MediaControls, type MediaControlsLabels, type MediaControlsProps, type MediaKind, MediaPlayer, type MediaPlayerProps, type MediaPlayerRef, type MediaPlayerState, inferMediaKind, mediaPlayerVariants };