@loidolt/theme-svelte 0.4.0 → 0.6.0

package/dist/hls.svelte.js

@@ -0,0 +1,66 @@
+import { canPlayHlsNatively, loadHls } from './hls.js';
+/**
+ * Plays an HLS playlist in a media element — natively where the browser can, through hls.js
+ * where it cannot. Fatal network errors retry and media errors attempt recovery before the
+ * status turns to `error`.
+ */
+export function createHlsSource(options = {}) {
+    let status = $state('idle');
+    let error = $state(null);
+    const fail = (next, message) => {
+        status = next;
+        error = new Error(message);
+        options.onError?.(error);
+    };
+    const source = (src) => (media) => {
+        error = null;
+        if (canPlayHlsNatively(media)) {
+            media.src = src;
+            status = 'native';
+            return () => {
+                media.removeAttribute('src');
+                media.load();
+            };
+        }
+        status = 'loading';
+        let cancelled = false;
+        let destroy;
+        void loadHls(options.loader).then((Hls) => {
+            if (cancelled)
+                return;
+            if (!Hls?.isSupported()) {
+                fail('unsupported', 'This browser needs hls.js to play the stream. Register it once: setHlsLoader(() => import("hls.js").then((module) => module.default)).');
+                return;
+            }
+            const instance = new Hls(options.config);
+            instance.on(Hls.Events.ERROR, (_event, data) => {
+                if (!data?.fatal)
+                    return;
+                if (data.type === Hls.ErrorTypes.NETWORK_ERROR)
+                    instance.startLoad();
+                else if (data.type === Hls.ErrorTypes.MEDIA_ERROR)
+                    instance.recoverMediaError();
+                else
+                    fail('error', `HLS playback failed: ${data.details ?? 'unknown error'}`);
+            });
+            instance.loadSource(src);
+            instance.attachMedia(media);
+            destroy = () => instance.destroy();
+            status = 'attached';
+        });
+        return () => {
+            cancelled = true;
+            destroy?.();
+            status = 'idle';
+        };
+    };
+    return {
+        source,
+        get status() {
+            return status;
+        },
+        get error() {
+            return error;
+        },
+    };
+}

package/dist/index.d.ts

@@ -1,7 +1,11 @@
 export { default as Accordion } from './components/Accordion.svelte';
+export { default as ActiveFilterChips } from './components/ActiveFilterChips.svelte';
 export { default as Alert } from './components/Alert.svelte';
 export { default as AlertDialog } from './components/AlertDialog.svelte';
 export { default as AppShell } from './components/AppShell.svelte';
+export { default as AspectRatio } from './components/AspectRatio.svelte';
+export { default as AudioPlayer } from './components/AudioPlayer.svelte';
+export { default as Avatar } from './components/Avatar.svelte';
 export { default as Badge } from './components/Badge.svelte';
 export { default as Brand } from './components/Brand.svelte';
 export { default as Breadcrumbs } from './components/Breadcrumbs.svelte';
@@ -9,8 +13,14 @@ export { default as Button } from './components/Button.svelte';
 export { default as Card } from './components/Card.svelte';
 export { default as Checkbox } from './components/Checkbox.svelte';
 export { default as CodeBlock } from './components/CodeBlock.svelte';
+export { default as Combobox } from './components/Combobox.svelte';
 export { default as CommentList } from './components/CommentList.svelte';
 export { default as ContextBar } from './components/ContextBar.svelte';
+export { default as DataTable } from './components/DataTable.svelte';
+export { default as DataTableColumnVisibility } from './components/DataTableColumnVisibility.svelte';
+export { default as DataTableFacetedFilter } from './components/DataTableFacetedFilter.svelte';
+export { default as DataTablePagination } from './components/DataTablePagination.svelte';
+export { default as DataTableSearch } from './components/DataTableSearch.svelte';
 export { default as Dialog } from './components/Dialog.svelte';
 export { default as Drawer } from './components/Drawer.svelte';
 export { default as DropdownMenu } from './components/DropdownMenu.svelte';
@@ -19,17 +29,26 @@ export { default as Field } from './components/Field.svelte';
 export { default as Fieldset } from './components/Fieldset.svelte';
 export { default as FileInput } from './components/FileInput.svelte';
 export { default as Filmstrip } from './components/Filmstrip.svelte';
+export { default as FilterPanel } from './components/FilterPanel.svelte';
 export { default as FloatingBar } from './components/FloatingBar.svelte';
 export { default as IconButton } from './components/IconButton.svelte';
 export { default as Input } from './components/Input.svelte';
 export { default as Label } from './components/Label.svelte';
+export { default as Lightbox } from './components/Lightbox.svelte';
 export { default as ListRow } from './components/ListRow.svelte';
+export { default as LiveRegion } from './components/LiveRegion.svelte';
 export { default as Marker } from './components/Marker.svelte';
+export { default as MediaCarousel } from './components/MediaCarousel.svelte';
+export { default as MediaEmbed } from './components/MediaEmbed.svelte';
+export { default as MediaGrid } from './components/MediaGrid.svelte';
+export { default as MultiSelect } from './components/MultiSelect.svelte';
 export { default as NavMenu } from './components/NavMenu.svelte';
 export { default as NumberField } from './components/NumberField.svelte';
+export { default as OTPInput } from './components/OTPInput.svelte';
 export { default as PageHeader } from './components/PageHeader.svelte';
 export { default as Pagination } from './components/Pagination.svelte';
 export { default as Panel } from './components/Panel.svelte';
+export { default as PasswordInput } from './components/PasswordInput.svelte';
 export { default as Popover } from './components/Popover.svelte';
 export { default as Progress } from './components/Progress.svelte';
 export { default as RadioGroup } from './components/RadioGroup.svelte';
@@ -39,7 +58,10 @@ export { default as SegmentedNav } from './components/SegmentedNav.svelte';
 export { default as Select } from './components/Select.svelte';
 export { default as Separator } from './components/Separator.svelte';
 export { default as Sidebar } from './components/Sidebar.svelte';
+export { default as SignaturePad } from './components/SignaturePad.svelte';
 export { default as Skeleton } from './components/Skeleton.svelte';
+export { default as SkipLink } from './components/SkipLink.svelte';
+export { default as Slider } from './components/Slider.svelte';
 export { default as Spinner } from './components/Spinner.svelte';
 export { default as Stat } from './components/Stat.svelte';
 export { default as StatusDot } from './components/StatusDot.svelte';
@@ -54,20 +76,41 @@ export { default as Thumbnail } from './components/Thumbnail.svelte';
 export { default as Toast } from './components/Toast.svelte';
 export { default as ToastViewport } from './components/ToastViewport.svelte';
 export { default as ToggleGroup } from './components/ToggleGroup.svelte';
+export { default as Toolbar } from './components/Toolbar.svelte';
 export { default as Tooltip } from './components/Tooltip.svelte';
 export { default as TooltipProvider } from './components/TooltipProvider.svelte';
 export { default as Topbar } from './components/Topbar.svelte';
+export { default as VideoPlayer } from './components/VideoPlayer.svelte';
 export { default as Workspace } from './components/Workspace.svelte';
 /**
  * Bits UI primitives behind the wrappers, for menus and overlays this package does not
  * model declaratively (checkbox/radio items, submenus, custom overlay composition).
  */
-export { Accordion as AccordionPrimitive, AlertDialog as AlertDialogPrimitive, Dialog as DialogPrimitive, DropdownMenu as DropdownMenuPrimitive, Pagination as PaginationPrimitive, Popover as PopoverPrimitive, Tabs as TabsPrimitive, ToggleGroup as ToggleGroupPrimitive, Tooltip as TooltipPrimitive, } from 'bits-ui';
-export { cx } from './utils.js';
+export { Accordion as AccordionPrimitive, AlertDialog as AlertDialogPrimitive, Avatar as AvatarPrimitive, Combobox as ComboboxPrimitive, Dialog as DialogPrimitive, DropdownMenu as DropdownMenuPrimitive, Pagination as PaginationPrimitive, PinInput as PinInputPrimitive, Popover as PopoverPrimitive, Slider as SliderPrimitive, Tabs as TabsPrimitive, ToggleGroup as ToggleGroupPrimitive, Tooltip as TooltipPrimitive, } from 'bits-ui';
+export { cx, describedBy } from './utils.js';
+export { autofocus, clickOutside, escapeKey, focusTrap, rovingFocus } from './attachments.js';
+export type { AutofocusOptions, ClickOutsideOptions, EscapeKeyOptions, FocusTrapOptions, RovingFocusOptions, } from './attachments.js';
+export { buildEmbedSrc, embedThumbnail, formatDuration, formatDurationSpoken, inferMediaKind, isHlsSource, mediaLabel, mediaThumbnail, parseEmbedUrl, resolveAspectRatio, toMediaSources, } from './media-utils.js';
+export type { AspectRatioName, AudioMediaItem, EmbedMediaItem, EmbedProvider, EmbedSrcOptions, ImageMediaItem, MediaItem, MediaKind, MediaSourceEntry, MediaTextTrack, ParsedEmbed, VideoMediaItem, } from './media-utils.js';
+export { createMediaPlayer } from './media-player.svelte.js';
+export type { MediaPlayer, MediaPlayerOptions, MediaTrackInfo } from './media-player.svelte.js';
+export { createMediaZoom } from './media-zoom.svelte.js';
+export type { MediaZoom, MediaZoomOptions } from './media-zoom.svelte.js';
+export { canPlayHlsNatively, loadHls, setHlsLoader } from './hls.js';
+export type { HlsConstructor, HlsErrorData, HlsInstance, HlsLoader } from './hls.js';
+export { createHlsSource } from './hls.svelte.js';
+export type { HlsSource, HlsSourceOptions, HlsStatus } from './hls.svelte.js';
+export type { MediaPlayerLabels } from './internal/media/labels.js';
+export { strokeLength, strokePath, strokesToSvg, validateSignature } from './signature.js';
+export type { SignatureError, SignaturePoint, SignatureStroke, SignatureValue, } from './signature.js';
+export { createDataTable } from './data-table.svelte.js';
+export type { DataTableColumn, DataTableFilterValue, DataTableOptions, DataTableRow, DataTableSort, DataTableState, } from './data-table.svelte.js';
+export { createAnnouncer } from './announcer.svelte.js';
+export type { Announcer, AnnouncerOptions, Politeness } from './announcer.svelte.js';
 export { createToaster } from './toaster.svelte.js';
-export type { Toaster, ToasterOptions, ToastOptions, ToastRecord } from './toaster.svelte.js';
+export type { Toaster, ToasterOptions, ToastAction, ToastOptions, ToastRecord, ToastShortcutOptions, } from './toaster.svelte.js';
 export { createTheme, themeScript } from './theme.svelte.js';
 export type { ColorScheme, Theme, ThemeOptions, ThemePreference, ThemeScriptOptions, } from './theme.svelte.js';
 export { breakpointQuery, createMediaQuery } from './media.svelte.js';
 export type { BreakpointName, MediaQuery, MediaQueryOptions } from './media.svelte.js';
-export type { ActionVariant, Alignment, BadgeSize, BadgeVariant, ColumnAlign, Crumb, Disclosure, ControlSize, DialogSize, HeadingLevel, MenuItem, NavItem, Option, Orientation, Placement, SortDirection, StatusVariant, TriggerChildProps, } from './types.js';
+export type { ActionVariant, Alignment, BadgeSize, BadgeVariant, ChoiceOption, ColumnAlign, Crumb, Disclosure, ControlSize, DialogSize, HeadingLevel, MenuCheckboxItem, MenuEntry, MenuGroup, MenuItem, MenuRadioGroup, MenuSub, NavItem, Option, OptionGroup, Orientation, Placement, SortDirection, StatusVariant, TriggerChildProps, } from './types.js';

package/dist/index.js

@@ -1,7 +1,11 @@
 export { default as Accordion } from './components/Accordion.svelte';
+export { default as ActiveFilterChips } from './components/ActiveFilterChips.svelte';
 export { default as Alert } from './components/Alert.svelte';
 export { default as AlertDialog } from './components/AlertDialog.svelte';
 export { default as AppShell } from './components/AppShell.svelte';
+export { default as AspectRatio } from './components/AspectRatio.svelte';
+export { default as AudioPlayer } from './components/AudioPlayer.svelte';
+export { default as Avatar } from './components/Avatar.svelte';
 export { default as Badge } from './components/Badge.svelte';
 export { default as Brand } from './components/Brand.svelte';
 export { default as Breadcrumbs } from './components/Breadcrumbs.svelte';
@@ -9,8 +13,14 @@ export { default as Button } from './components/Button.svelte';
 export { default as Card } from './components/Card.svelte';
 export { default as Checkbox } from './components/Checkbox.svelte';
 export { default as CodeBlock } from './components/CodeBlock.svelte';
+export { default as Combobox } from './components/Combobox.svelte';
 export { default as CommentList } from './components/CommentList.svelte';
 export { default as ContextBar } from './components/ContextBar.svelte';
+export { default as DataTable } from './components/DataTable.svelte';
+export { default as DataTableColumnVisibility } from './components/DataTableColumnVisibility.svelte';
+export { default as DataTableFacetedFilter } from './components/DataTableFacetedFilter.svelte';
+export { default as DataTablePagination } from './components/DataTablePagination.svelte';
+export { default as DataTableSearch } from './components/DataTableSearch.svelte';
 export { default as Dialog } from './components/Dialog.svelte';
 export { default as Drawer } from './components/Drawer.svelte';
 export { default as DropdownMenu } from './components/DropdownMenu.svelte';
@@ -19,17 +29,26 @@ export { default as Field } from './components/Field.svelte';
 export { default as Fieldset } from './components/Fieldset.svelte';
 export { default as FileInput } from './components/FileInput.svelte';
 export { default as Filmstrip } from './components/Filmstrip.svelte';
+export { default as FilterPanel } from './components/FilterPanel.svelte';
 export { default as FloatingBar } from './components/FloatingBar.svelte';
 export { default as IconButton } from './components/IconButton.svelte';
 export { default as Input } from './components/Input.svelte';
 export { default as Label } from './components/Label.svelte';
+export { default as Lightbox } from './components/Lightbox.svelte';
 export { default as ListRow } from './components/ListRow.svelte';
+export { default as LiveRegion } from './components/LiveRegion.svelte';
 export { default as Marker } from './components/Marker.svelte';
+export { default as MediaCarousel } from './components/MediaCarousel.svelte';
+export { default as MediaEmbed } from './components/MediaEmbed.svelte';
+export { default as MediaGrid } from './components/MediaGrid.svelte';
+export { default as MultiSelect } from './components/MultiSelect.svelte';
 export { default as NavMenu } from './components/NavMenu.svelte';
 export { default as NumberField } from './components/NumberField.svelte';
+export { default as OTPInput } from './components/OTPInput.svelte';
 export { default as PageHeader } from './components/PageHeader.svelte';
 export { default as Pagination } from './components/Pagination.svelte';
 export { default as Panel } from './components/Panel.svelte';
+export { default as PasswordInput } from './components/PasswordInput.svelte';
 export { default as Popover } from './components/Popover.svelte';
 export { default as Progress } from './components/Progress.svelte';
 export { default as RadioGroup } from './components/RadioGroup.svelte';
@@ -39,7 +58,10 @@ export { default as SegmentedNav } from './components/SegmentedNav.svelte';
 export { default as Select } from './components/Select.svelte';
 export { default as Separator } from './components/Separator.svelte';
 export { default as Sidebar } from './components/Sidebar.svelte';
+export { default as SignaturePad } from './components/SignaturePad.svelte';
 export { default as Skeleton } from './components/Skeleton.svelte';
+export { default as SkipLink } from './components/SkipLink.svelte';
+export { default as Slider } from './components/Slider.svelte';
 export { default as Spinner } from './components/Spinner.svelte';
 export { default as Stat } from './components/Stat.svelte';
 export { default as StatusDot } from './components/StatusDot.svelte';
@@ -54,16 +76,27 @@ export { default as Thumbnail } from './components/Thumbnail.svelte';
 export { default as Toast } from './components/Toast.svelte';
 export { default as ToastViewport } from './components/ToastViewport.svelte';
 export { default as ToggleGroup } from './components/ToggleGroup.svelte';
+export { default as Toolbar } from './components/Toolbar.svelte';
 export { default as Tooltip } from './components/Tooltip.svelte';
 export { default as TooltipProvider } from './components/TooltipProvider.svelte';
 export { default as Topbar } from './components/Topbar.svelte';
+export { default as VideoPlayer } from './components/VideoPlayer.svelte';
 export { default as Workspace } from './components/Workspace.svelte';
 /**
  * Bits UI primitives behind the wrappers, for menus and overlays this package does not
  * model declaratively (checkbox/radio items, submenus, custom overlay composition).
  */
-export { Accordion as AccordionPrimitive, AlertDialog as AlertDialogPrimitive, Dialog as DialogPrimitive, DropdownMenu as DropdownMenuPrimitive, Pagination as PaginationPrimitive, Popover as PopoverPrimitive, Tabs as TabsPrimitive, ToggleGroup as ToggleGroupPrimitive, Tooltip as TooltipPrimitive, } from 'bits-ui';
-export { cx } from './utils.js';
+export { Accordion as AccordionPrimitive, AlertDialog as AlertDialogPrimitive, Avatar as AvatarPrimitive, Combobox as ComboboxPrimitive, Dialog as DialogPrimitive, DropdownMenu as DropdownMenuPrimitive, Pagination as PaginationPrimitive, PinInput as PinInputPrimitive, Popover as PopoverPrimitive, Slider as SliderPrimitive, Tabs as TabsPrimitive, ToggleGroup as ToggleGroupPrimitive, Tooltip as TooltipPrimitive, } from 'bits-ui';
+export { cx, describedBy } from './utils.js';
+export { autofocus, clickOutside, escapeKey, focusTrap, rovingFocus } from './attachments.js';
+export { buildEmbedSrc, embedThumbnail, formatDuration, formatDurationSpoken, inferMediaKind, isHlsSource, mediaLabel, mediaThumbnail, parseEmbedUrl, resolveAspectRatio, toMediaSources, } from './media-utils.js';
+export { createMediaPlayer } from './media-player.svelte.js';
+export { createMediaZoom } from './media-zoom.svelte.js';
+export { canPlayHlsNatively, loadHls, setHlsLoader } from './hls.js';
+export { createHlsSource } from './hls.svelte.js';
+export { strokeLength, strokePath, strokesToSvg, validateSignature } from './signature.js';
+export { createDataTable } from './data-table.svelte.js';
+export { createAnnouncer } from './announcer.svelte.js';
 export { createToaster } from './toaster.svelte.js';
 export { createTheme, themeScript } from './theme.svelte.js';
 export { breakpointQuery, createMediaQuery } from './media.svelte.js';

package/dist/internal/EditableCell.svelte

@@ -0,0 +1,58 @@
+<script lang="ts">
+  import { autofocus } from '../attachments.js';
+
+  /*
+   * A cell that turns into a text field on demand. Enter or leaving the field saves; Escape puts
+   * the old value back. The resting state is a real button, so the cell is reachable and
+   * announced as editable without making the whole row a click target.
+   */
+  interface Props {
+    value: string;
+    label: string;
+    onCommit: (value: string) => void;
+  }
+
+  let { value, label, onCommit }: Props = $props();
+
+  let editing = $state(false);
+  let draft = $state('');
+  let button = $state<HTMLButtonElement | null>(null);
+
+  function start() {
+    draft = value;
+    editing = true;
+  }
+
+  function finish(save: boolean) {
+    if (!editing) return;
+    editing = false;
+    if (save && draft !== value) onCommit(draft);
+    // Hand focus back to the cell once it is a button again.
+    queueMicrotask(() => button?.focus());
+  }
+</script>
+
+{#if editing}
+  <input
+    class="ldt-data-table__edit-input"
+    aria-label={label}
+    bind:value={draft}
+    {@attach autofocus({ select: true, delay: 0 })}
+    onkeydown={(event) => {
+      if (event.key === 'Enter') finish(true);
+      else if (event.key === 'Escape') {
+        event.stopPropagation();
+        finish(false);
+      }
+    }}
+    onblur={() => finish(true)}
+  />
+{:else}
+  <button
+    bind:this={button}
+    type="button"
+    class="ldt-data-table__edit"
+    aria-label={`${label}: ${value}`}
+    onclick={start}>{value}</button
+  >
+{/if}

package/dist/internal/EditableCell.svelte.d.ts

@@ -0,0 +1,8 @@
+interface Props {
+    value: string;
+    label: string;
+    onCommit: (value: string) => void;
+}
+declare const EditableCell: import("svelte").Component<Props, {}, "">;
+type EditableCell = ReturnType<typeof EditableCell>;
+export default EditableCell;

package/dist/internal/ListboxEntries.svelte

@@ -0,0 +1,49 @@
+<script lang="ts" generics="T extends string">
+  import { Combobox as ComboboxPrimitive } from 'bits-ui';
+  import type { Snippet } from 'svelte';
+  import type { Option } from '../types.js';
+  import { isOptionGroup, type OptionEntry } from './options.js';
+
+  /*
+   * The option rows shared by `Combobox` and `MultiSelect`. Rendered inside a Bits combobox
+   * Content, whose context the Item and Group parts pick up.
+   */
+  interface Props {
+    entries: OptionEntry<T>[];
+    item?: Snippet<[Option<T>, { selected: boolean; highlighted: boolean }]>;
+    /** Extra reason to disable a row — `MultiSelect` uses it once `max` is reached. */
+    blocked?: (option: Option<T>) => boolean;
+  }
+
+  let { entries, item, blocked }: Props = $props();
+</script>
+
+{#snippet row(option: Option<T>, groupDisabled: boolean)}
+  <ComboboxPrimitive.Item
+    class="ldt-listbox__item"
+    value={option.value}
+    label={option.label}
+    disabled={groupDisabled || option.disabled || blocked?.(option)}
+  >
+    {#snippet children({ selected, highlighted })}
+      {#if item}{@render item(option, { selected, highlighted })}{:else}<span>{option.label}</span
+        >{/if}<span class="ldt-listbox__check" aria-hidden="true"></span>
+    {/snippet}
+  </ComboboxPrimitive.Item>
+{/snippet}
+
+{#each entries as entry (isOptionGroup(entry) ? `group:${entry.label}` : entry.value)}
+  {#if isOptionGroup(entry)}
+    <ComboboxPrimitive.Group class="ldt-listbox__group">
+      <ComboboxPrimitive.GroupHeading class="ldt-listbox__heading"
+        >{entry.label}</ComboboxPrimitive.GroupHeading
+      >
+      {#each entry.options as option (option.value)}{@render row(
+          option,
+          Boolean(entry.disabled)
+        )}{/each}
+    </ComboboxPrimitive.Group>
+  {:else}
+    {@render row(entry, false)}
+  {/if}
+{/each}

package/dist/internal/ListboxEntries.svelte.d.ts

@@ -0,0 +1,35 @@
+import type { Snippet } from 'svelte';
+import type { Option } from '../types.js';
+import { type OptionEntry } from './options.js';
+declare function $$render<T extends string>(): {
+    props: {
+        entries: OptionEntry<T>[];
+        item?: Snippet<[Option<T>, {
+            selected: boolean;
+            highlighted: boolean;
+        }]>;
+        /** Extra reason to disable a row — `MultiSelect` uses it once `max` is reached. */
+        blocked?: (option: Option<T>) => boolean;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends string> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends string>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T extends string>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const ListboxEntries: $$IsomorphicComponent;
+type ListboxEntries<T extends string> = InstanceType<typeof ListboxEntries<T>>;
+export default ListboxEntries;

package/dist/internal/media/MediaControls.svelte

@@ -0,0 +1,163 @@
+<script lang="ts">
+  import type { MediaPlayer } from '../../media-player.svelte.js';
+  import { formatDuration, formatDurationSpoken } from '../../media-utils.js';
+  import type { MediaPlayerLabels } from './labels.js';
+
+  /*
+   * The control bar shared by VideoPlayer and AudioPlayer. Every control is a native element —
+   * buttons, a range input, a select — so keyboard and screen-reader behaviour come from the
+   * platform rather than being re-implemented.
+   */
+  interface Props {
+    player: MediaPlayer;
+    labels: MediaPlayerLabels;
+    video?: boolean;
+    /** What fullscreen should cover, so the controls come along. */
+    container?: HTMLElement | null;
+  }
+
+  let { player, labels, video = false, container = null }: Props = $props();
+
+  const rates = [0.5, 0.75, 1, 1.25, 1.5, 2];
+  const live = $derived(player.duration === Infinity);
+  const known = $derived(Number.isFinite(player.duration));
+  const bufferedEnd = $derived(
+    known && player.duration > 0
+      ? Math.max(0, ...player.buffered.map(([, end]) => end)) / player.duration
+      : 0
+  );
+</script>
+
+<div class="ldt-media-controls">
+  <button
+    type="button"
+    class="ldt-media-controls__button"
+    aria-label={player.playing ? labels.pause : labels.play}
+    onclick={() => player.toggle()}
+  >
+    <svg viewBox="0 0 16 16" width="16" height="16" aria-hidden="true" focusable="false">
+      {#if player.playing}<path d="M4 3h3v10H4zM9 3h3v10H9z" fill="currentColor" />{:else}<path
+          d="M4 2.5v11l9-5.5z"
+          fill="currentColor"
+        />{/if}
+    </svg>
+  </button>
+
+  {#if !live}
+    <div class="ldt-media-controls__scrubber" style:--ldt-media-buffered={bufferedEnd}>
+      <input
+        type="range"
+        class="ldt-media-controls__range"
+        min="0"
+        max={known ? player.duration : 0}
+        step="0.1"
+        value={player.currentTime}
+        disabled={!known}
+        aria-label={labels.seek}
+        aria-valuetext={labels.position(
+          formatDurationSpoken(player.currentTime),
+          formatDurationSpoken(known ? player.duration : 0)
+        )}
+        oninput={(event) => player.seek(Number(event.currentTarget.value))}
+      />
+    </div>
+  {/if}
+  <span class="ldt-media-controls__time" aria-hidden="true">
+    {formatDuration(player.currentTime)}{#if known}&nbsp;/ {formatDuration(player.duration)}{/if}
+  </span>
+
+  <button
+    type="button"
+    class="ldt-media-controls__button"
+    aria-label={player.muted ? labels.unmute : labels.mute}
+    onclick={() => player.toggleMute()}
+  >
+    <svg
+      viewBox="0 0 16 16"
+      width="16"
+      height="16"
+      aria-hidden="true"
+      focusable="false"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="1.4"
+      ><path
+        d="M2 6h3l4-3v10L5 10H2z"
+        fill="currentColor"
+        stroke="none"
+      />{#if player.muted || player.volume === 0}<path d="m11 6 4 4m0-4-4 4" />{:else}<path
+          d="M11 5.5a3.5 3.5 0 0 1 0 5M12.8 3.5a6 6 0 0 1 0 9"
+        />{/if}</svg
+    >
+  </button>
+  <input
+    type="range"
+    class="ldt-media-controls__range ldt-media-controls__volume"
+    min="0"
+    max="1"
+    step="0.05"
+    value={player.muted ? 0 : player.volume}
+    aria-label={labels.volume}
+    aria-valuetext={`${Math.round((player.muted ? 0 : player.volume) * 100)}%`}
+    oninput={(event) => player.setVolume(Number(event.currentTarget.value))}
+  />
+
+  <select
+    class="ldt-media-controls__speed"
+    aria-label={labels.speed}
+    value={String(player.rate)}
+    onchange={(event) => player.setRate(Number(event.currentTarget.value))}
+  >
+    {#each rates as rate (rate)}<option value={String(rate)}>{rate}×</option>{/each}
+  </select>
+
+  {#if player.tracks.length}
+    <button
+      type="button"
+      class="ldt-media-controls__button ldt-media-controls__text"
+      aria-label={labels.captions}
+      aria-pressed={player.activeTrack !== null}
+      onclick={() => player.selectTrack(player.activeTrack === null ? 0 : null)}>CC</button
+    >
+  {/if}
+
+  {#if video && player.canPictureInPicture}
+    <button
+      type="button"
+      class="ldt-media-controls__button"
+      aria-label={labels.pictureInPicture}
+      aria-pressed={player.pictureInPicture}
+      onclick={() => player.togglePictureInPicture()}
+    >
+      <svg viewBox="0 0 16 16" width="16" height="16" aria-hidden="true" focusable="false"
+        ><path d="M1.5 3h13v10h-13z" fill="none" stroke="currentColor" stroke-width="1.3" /><path
+          d="M8 8h5v4H8z"
+          fill="currentColor"
+        /></svg
+      >
+    </button>
+  {/if}
+
+  {#if video}
+    <button
+      type="button"
+      class="ldt-media-controls__button"
+      aria-label={player.fullscreen ? labels.exitFullscreen : labels.fullscreen}
+      onclick={() => player.toggleFullscreen(container)}
+    >
+      <svg
+        viewBox="0 0 16 16"
+        width="16"
+        height="16"
+        aria-hidden="true"
+        focusable="false"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="1.5"
+        >{#if player.fullscreen}<path d="M6 2v4H2M10 2v4h4M6 14v-4H2M10 14v-4h4" />{:else}<path
+            d="M2 6V2h4M14 6V2h-4M2 10v4h4M14 10v4h-4"
+          />{/if}</svg
+      >
+    </button>
+  {/if}
+</div>

package/dist/internal/media/MediaControls.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { MediaPlayer } from '../../media-player.svelte.js';
+import type { MediaPlayerLabels } from './labels.js';
+interface Props {
+    player: MediaPlayer;
+    labels: MediaPlayerLabels;
+    video?: boolean;
+    /** What fullscreen should cover, so the controls come along. */
+    container?: HTMLElement | null;
+}
+declare const MediaControls: import("svelte").Component<Props, {}, "">;
+type MediaControls = ReturnType<typeof MediaControls>;
+export default MediaControls;

package/dist/internal/media/MediaStage.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">
+  import AudioPlayer from '../../components/AudioPlayer.svelte';
+  import MediaEmbed from '../../components/MediaEmbed.svelte';
+  import VideoPlayer from '../../components/VideoPlayer.svelte';
+  import type { MediaZoom } from '../../media-zoom.svelte.js';
+  import type { MediaItem } from '../../media-utils.js';
+
+  /* One item shown at full size — the body of a Lightbox or a carousel slide. */
+  interface Props {
+    item: MediaItem;
+    zoom?: MediaZoom;
+    /** Images fill the frame (`cover`) in a carousel, and fit whole (`contain`) in a lightbox. */
+    fit?: 'contain' | 'cover';
+  }
+
+  let { item, zoom, fit = 'contain' }: Props = $props();
+</script>
+
+{#if item.kind === 'image'}
+  <div class="ldt-media-stage ldt-media-stage--image" {@attach zoom?.attach}>
+    <img
+      class="ldt-media-stage__image"
+      src={item.src}
+      srcset={item.srcset}
+      alt={item.alt}
+      style:object-fit={fit}
+      style:transform={zoom?.transform}
+      draggable="false"
+    />
+  </div>
+{:else if item.kind === 'video'}
+  <VideoPlayer
+    class="ldt-media-stage"
+    src={item.src}
+    label={item.title}
+    poster={item.poster}
+    tracks={item.tracks}
+  />
+{:else if item.kind === 'audio'}
+  <AudioPlayer
+    class="ldt-media-stage"
+    src={item.src}
+    title={item.title}
+    artist={item.artist}
+    artwork={item.artwork}
+  />
+{:else}
+  <MediaEmbed class="ldt-media-stage" url={item.url} title={item.title} poster={item.poster} />
+{/if}