@hashsome/ui 0.10.0 → 0.12.0

package/dist/entities/media-browser.js

@@ -18,6 +18,18 @@ import { useMediaBrowser } from '../use-media-browser.js';
 import { trackMedia, useMediaPending } from './media-pending.js';
 /** The height of the search field, and of the row of tabs it replaces. */
 const SEARCH_HEIGHT = 36;
+/** The name of each kind of thing a search finds, on the chip that narrows the results to it. */
+const KIND_LABELS = {
+    album: 'Albums',
+    artist: 'Artists',
+    track: 'Tracks',
+    playlist: 'Playlists',
+    radio: 'Radio',
+    folder: 'Folders',
+    other: 'Other',
+};
+/** The chip for every kind at once. */
+const ALL_KINDS = 'all';
 const KIND_ICONS = {
     folder: 'lu:folder',
     artist: 'lu:mic-vocal',
@@ -95,9 +107,23 @@ export function MediaBrowser({ entity, onPlay, layout = 'list', search: searchMo
                             }
                         },
                     }
-                    : {}), css: { background: 'none', outline: 'none' } }), onDemand ? (_jsx(PlainButton, { "aria-label": "Close search", title: "Close search", onClick: closeSearch, center: true, css: { flex: 'none' }, children: _jsx(Icon, { name: "lu:x", size: 16 }) })) : browser.query !== '' ? (_jsx(PlainButton, { "aria-label": "Clear search", title: "Clear search", onClick: () => browser.search(''), center: true, css: { flex: 'none' }, children: _jsx(Icon, { name: "lu:x", size: 16 }) })) : null] })) : null;
-    /** The categories (and, with `search='icon'`, the search icon at the end). */
-    const tabsRow = browser.tabs ? (_jsxs(Flex, { align: "center", gap: 3, ...(onDemand ? { minHeight: SEARCH_HEIGHT } : {}), children: [_jsx(Flex, { direction: "column", grow: 1, minWidth: 0, children: _jsx(ChipRow, { tabs: true, options: browser.tabs.map((item) => 
+                    : {}), css: {
+                    background: 'none',
+                    outline: 'none',
+                    // A search field gets a clear button of the browser's own in some browsers, and this one has its own
+                    // (and a button to close it), so the browser's is not drawn.
+                    '&::-webkit-search-cancel-button, &::-webkit-search-decoration': {
+                        WebkitAppearance: 'none',
+                        appearance: 'none',
+                        display: 'none',
+                    },
+                } }), onDemand ? (_jsx(PlainButton, { "aria-label": "Close search", title: "Close search", onClick: closeSearch, center: true, css: { flex: 'none' }, children: _jsx(Icon, { name: "lu:x", size: 16 }) })) : browser.query !== '' ? (_jsx(PlainButton, { "aria-label": "Clear search", title: "Clear search", onClick: () => browser.search(''), center: true, css: { flex: 'none' }, children: _jsx(Icon, { name: "lu:x", size: 16 }) })) : null] })) : null;
+    /** The categories (and, with `search='icon'`, the search icon at the end). While a search has results, the
+     * same row is the kinds to narrow it to: the shelves mean nothing to a search's results, which belong to none. */
+    const tabsRow = browser.tabs ? (_jsxs(Flex, { align: "center", gap: 3, ...(onDemand ? { minHeight: SEARCH_HEIGHT } : {}), children: [_jsx(Flex, { direction: "column", grow: 1, minWidth: 0, children: browser.searching && browser.kindsPending ? (_jsx(KindsSkeleton, {})) : browser.searching && browser.kinds ? (_jsx(ChipRow, { tabs: true, options: [
+                        { value: ALL_KINDS, label: 'All' },
+                        ...browser.kinds.map((kind) => ({ value: kind, label: KIND_LABELS[kind] })),
+                    ], value: browser.kind ?? ALL_KINDS, onChange: (id) => browser.filterBy(id === ALL_KINDS ? undefined : id) })) : (_jsx(ChipRow, { tabs: true, options: browser.tabs.map((item) => 
                     // Inside a shelf the selected tab becomes the way back, so nothing is added to the
                     // layout and nothing below it moves.
                     item.id === browser.activeTab && inside
@@ -107,11 +133,15 @@ export function MediaBrowser({ entity, onPlay, layout = 'list', search: searchMo
                             icon: 'lu:arrow-left',
                             ariaLabel: 'Back',
                         }
-                        : { value: item.id, label: item.title }), value: browser.activeTab, onChange: (id) => id === browser.activeTab && inside ? browser.back() : browser.selectTab(id) }) }), actionsHere, searchTrigger] })) : null;
-    return (_jsxs(Flex, { direction: "column", gap: 3, minHeight: 0, position: "relative", children: [onDemand ? (_jsx(AnimatePresence, { initial: false, mode: "popLayout", children: _jsx(motion.div, { initial: { opacity: 0, x: fieldShown ? 28 : 0 }, animate: { opacity: 1, x: 0 }, exit: { opacity: 0, x: fieldShown ? 0 : 28 }, transition: { duration: 0.18, ease: 'easeOut' }, children: fieldShown ? search : browser.tabs === undefined ? header : tabsRow }, fieldShown ? 'field' : 'row') })) : (_jsxs(_Fragment, { children: [browser.tabs === undefined ? header : null, search, tabsRow] })), browser.error ? (_jsx(Message, { theater: theater, children: _jsx(Typography, { as: "p", variant: "body", color: "danger", role: "alert", m: 0, children: browser.error }) })) : browser.loading ? (_jsx(BrowseSkeleton, { theater: theater })) : browser.items.length === 0 ? (_jsx(Message, { theater: theater, children: _jsx(Typography, { as: "p", variant: "body", color: "textMuted", m: 0, children: browser.searching ? 'Nothing found.' : 'Nothing here.' }) })) : theater ? (_jsx(FadeScroll, { as: "ul", gap: 4, m: 0, p: 0, pb: 2, css: { ...THEATER_STAGE, listStyle: 'none', scrollSnapType: 'x proximity' }, children: browser.items.map((item, index) => (_jsx("li", { css: { flex: 'none', scrollSnapAlign: 'start' }, children: _jsx(Reveal, { index: browser.searching ? 0 : index, children: _jsx(BrowseCard, { item: item, asked: askedOf(item), queueable: queueable, onOpen: () => browser.open(item), onPlay: () => play(item), onAdd: () => addToQueue(item) }) }) }, `${browser.listKey}:${item.id}`))) })) : (_jsx(Flex, { direction: "column", gap: 1, as: "ul", m: 0, p: 0, minHeight: 0, css: { listStyle: 'none', overflowY: 'auto' }, children: browser.items.map((item, index) => (_jsx("li", { css: { flex: 'none' }, children: _jsx(Reveal, { index: browser.searching ? 0 : index, children: _jsx(BrowseRow, { item: item, asked: askedOf(item), queueable: queueable, onOpen: () => browser.open(item), onPlay: () => play(item), onNext: () => playNext(item), onAdd: () => addToQueue(item) }) }) }, `${browser.listKey}:${item.id}`))) }))] }));
+                        : { value: item.id, label: item.title }), value: browser.activeTab, onChange: (id) => id === browser.activeTab && inside ? browser.back() : browser.selectTab(id) })) }), actionsHere, searchTrigger] })) : null;
+    return (_jsxs(Flex, { direction: "column", gap: 3, minHeight: 0, position: "relative", children: [onDemand ? (_jsx(AnimatePresence, { initial: false, mode: "popLayout", children: _jsx(motion.div, { initial: { opacity: 0, x: fieldShown ? 28 : 0 }, animate: { opacity: 1, x: 0 }, exit: { opacity: 0, x: fieldShown ? 0 : 28 }, transition: { duration: 0.18, ease: 'easeOut' }, children: fieldShown ? search : browser.tabs === undefined ? header : tabsRow }, fieldShown ? 'field' : 'row') })) : (_jsxs(_Fragment, { children: [browser.tabs === undefined ? header : null, search, tabsRow] })), browser.error ? (_jsx(Message, { theater: theater, children: _jsx(Typography, { as: "p", variant: "body", color: "danger", role: "alert", m: 0, children: browser.error }) })) : browser.loading ? (_jsx(BrowseSkeleton, { theater: theater })) : browser.items.length === 0 ? (_jsx(Message, { theater: theater, children: _jsx(Typography, { as: "p", variant: "body", color: "textMuted", m: 0, children: browser.searching ? 'Nothing found.' : 'Nothing here.' }) })) : theater ? (_jsx(FadeScroll, { as: "ul", gap: 4, m: 0, p: 0, pb: 2, css: { ...THEATER_STAGE, listStyle: 'none', scrollSnapType: 'x proximity' }, children: browser.items.map((item, index) => (_jsx("li", { css: { flex: 'none', scrollSnapAlign: 'start' }, children: _jsx(Reveal, { index: browser.searching ? 0 : index, children: _jsx(BrowseCard, { item: item, asked: askedOf(item), queueable: queueable, onOpen: () => browser.open(item), onPlay: () => play(item), onAdd: () => addToQueue(item) }) }) }, `${browser.listKey}:${item.id}`))) })) : (_jsx(Flex, { direction: "column", gap: 1, as: "ul", m: 0, p: 0, minHeight: 0, css: { listStyle: 'none', overflowY: 'auto', overflowX: 'hidden' }, children: browser.items.map((item, index) => (_jsx("li", { css: { flex: 'none' }, children: _jsx(Reveal, { index: browser.searching ? 0 : index, children: _jsx(BrowseRow, { item: item, asked: askedOf(item), queueable: queueable, onOpen: () => browser.open(item), onPlay: () => play(item), onNext: () => playNext(item), onAdd: () => addToQueue(item) }) }) }, `${browser.listKey}:${item.id}`))) }))] }));
 }
 /** What shows where the list will be while it loads: placeholders shaped like what is coming (cards in
  * the theater layout, rows in the list), in the room the real thing takes, so nothing moves. */
+/** Where the kinds to narrow a search to will be, in the chips' own height, so the list below does not move. */
+function KindsSkeleton() {
+    return (_jsx(Flex, { gap: 2, "aria-busy": "true", css: { height: CHIP_HEIGHT }, children: [40, 78, 74, 70, 62].map((width) => (_jsx(Skeleton, { width: width, height: CHIP_HEIGHT, radius: "full" }, width))) }));
+}
 function BrowseSkeleton({ theater }) {
     return theater ? (_jsx(Flex, { as: "ul", role: "status", "aria-label": "Loading", "aria-busy": "true", gap: 4, m: 0, p: 0, pb: 2, css: { ...THEATER_STAGE, listStyle: 'none', overflow: 'hidden' }, children: Array.from({ length: 12 }, (_, index) => (_jsxs(Flex, { as: "li", direction: "column", gap: 2, css: { flex: 'none', width: CARD_SIZE }, children: [_jsx(Skeleton, { width: CARD_SIZE, height: CARD_SIZE, radius: "card" }), _jsxs(Flex, { direction: "column", gap: 1, px: 1, children: [_jsx(Skeleton, { width: "70%", height: 14 }), _jsx(Skeleton, { width: "45%", height: 12 })] })] }, index))) })) : (_jsx(Flex, { as: "ul", role: "status", "aria-label": "Loading", "aria-busy": "true", direction: "column", gap: 1, m: 0, p: 0, css: { listStyle: 'none' }, children: Array.from({ length: 6 }, (_, index) => (_jsxs(Flex, { as: "li", align: "center", gap: 3, py: 1.5, px: 2, children: [_jsx(Skeleton, { width: 44, height: 44 }), _jsxs(Flex, { direction: "column", gap: 1.5, grow: 1, children: [_jsx(Skeleton, { width: "60%", height: 14 }), _jsx(Skeleton, { width: "35%", height: 12 })] })] }, index))) }));
 }

package/dist/entities/media-pending.d.ts

@@ -4,7 +4,9 @@ import type { EntityRef } from '@hashsome/core';
  * changes until it does: so the button, the item and the player say it is waiting. */
 export interface MediaPending {
     /** What was asked. A transport command is its own name (`togglePlay`, `next`, `previous`, `setShuffle`);
-     * from the library: `playItem` (replaces what is playing, so the player says it is loading it), `queueNext`, `queueAdd`. */
+     * from the library: `playItem` (replaces what is playing, so the player says it is loading it), `queueNext`, `queueAdd`;
+     * and a change of who plays together starts with `group:` (`group:add:<speaker>`, `group:reset`...), which is done
+     * when the player's group changes. */
     kind: string;
     /** For the library kinds: the item it was asked for. */
     item?: string;

package/dist/entities/media-pending.js

@@ -14,7 +14,17 @@ const changesTrack = (kind) => kind === 'next' || kind === 'previous' || kind ==
 /** How long after the player acknowledges a request to wait for it to take effect, when it never
  * visibly does (a skip back on a track already at its start). A skip or a start from the library
  * takes the player several seconds. */
-const settleFor = (kind) => kind === 'playItem' ? 15_000 : kind === 'next' ? 10_000 : kind === 'previous' ? 4_000 : 2_000;
+const settleFor = (kind) => kind === 'playItem'
+    ? 15_000
+    : kind === 'next'
+        ? 10_000
+        : kind === 'previous'
+            ? 4_000
+            : changesGroup(kind)
+                ? 8_000
+                : 2_000;
+/** Asks that change who plays together are done when the group is another. */
+const changesGroup = (kind) => kind.startsWith('group:');
 /** A position past this many seconds means the track plays, and is not only announced. */
 const STARTED_AFTER_S = 0.05;
 /** At least this long is shown for a request, so a quick answer still shows a turn. */
@@ -34,7 +44,12 @@ const publish = (ref) => {
 /** Shows `entry` as pending for `ref` from now until the player has taken it up, whichever way: until it
  * refuses it, or changes after acknowledging it, or a while after (`useMediaPending` reports the change). */
 export function trackMedia(ref, entry, request) {
-    const waiting = { entry, answered: false, baseTitle: lastSeen.get(ref)?.title };
+    const waiting = {
+        entry,
+        answered: false,
+        baseTitle: lastSeen.get(ref)?.title,
+        baseGroup: lastSeen.get(ref)?.group,
+    };
     const started = Date.now();
     pending.set(ref, [...(pending.get(ref) ?? []), waiting]);
     publish(ref);
@@ -72,7 +87,9 @@ export function trackMedia(ref, entry, request) {
 function observe(ref, seen) {
     lastSeen.set(ref, seen);
     for (const waiting of pending.get(ref) ?? []) {
-        const done = !changesTrack(waiting.entry.kind) || (seen.title !== waiting.baseTitle && seen.started);
+        const done = changesGroup(waiting.entry.kind)
+            ? seen.group !== waiting.baseGroup
+            : !changesTrack(waiting.entry.kind) || (seen.title !== waiting.baseTitle && seen.started);
         if (!done) {
             continue;
         }
@@ -110,12 +127,14 @@ export function useMediaPending(ref) {
     const playback = media?.playback;
     const album = media?.media?.album;
     const shuffle = media?.shuffle;
+    // Who plays together, as one text: it changes when someone joins or leaves, whoever leads.
+    const group = media?.group ? `${media.group.leader}>${media.group.members.join(',')}` : '';
     useEffect(() => {
         if (ref && present) {
-            observe(ref, { title, started });
+            observe(ref, { title, started, group });
         }
         // `playback`, `album` and `shuffle` are not read inside: a change to any of them is the reason to look again.
         // oxlint-disable-next-line react/exhaustive-effect-dependencies
-    }, [ref, present, title, started, playback, album, shuffle]);
+    }, [ref, present, title, started, group, playback, album, shuffle]);
     return useSyncExternalStore(subscribe, () => (ref ? (view.get(ref) ?? NONE) : NONE), () => NONE);
 }

package/dist/entities/media-player-bar.d.ts

@@ -15,8 +15,12 @@ export interface MediaPlayerBarProps {
     onOpen?: () => void;
     /** The library and the queue each open as a full-size overlay of their own, from the browse button and a new queue button, instead of one drawer with the whole player in it: for a small display, where the card itself is the player. The library overlay is a `MediaBrowser` as a list (or your `browse` content), the queue overlay a `MediaQueue`; each button is left out when the player has none, or for `browse={false}`. Holding the card and pressing the artwork then do nothing, unless `onOpen` is given. Default `false`. */
     overlays?: boolean;
+    /** Whether the player can add speakers to what it plays, put it back to just itself and join a stream playing elsewhere (`MediaSpeakers`), from a speakers button with `overlays` and a Speakers tab in the drawer. Only for a player that can be grouped. `false` leaves it out. Default `true`. */
+    grouping?: boolean;
+    /** An allowlist of the speakers that can be added: only those that are in it and that the player can be grouped with are offered. Absent, every speaker it can be grouped with is offered. */
+    speakers?: EntityRef[];
     /** `1` puts the controls beside the track, in one pill; `2` puts them on a second row under it, for a narrow space (a small wall display). Default `'auto'`: one row, and two once the bar is narrower than 560 px wide. */
     rows?: 1 | 2 | 'auto';
 }
 /** Now playing with previous / play-pause / next and a volume control, for a media player entity. */
-export declare function MediaPlayerBar({ entity, name, browse, drawer, onOpen, overlays, rows, }: MediaPlayerBarProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function MediaPlayerBar({ entity, name, browse, drawer, onOpen, overlays, grouping, speakers, rows, }: MediaPlayerBarProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/entities/media-player-bar.js

@@ -19,6 +19,7 @@ import { MediaBrowser } from './media-browser.js';
 import { LoadingLine, useLoadingLabel } from './media-loading-line.js';
 import { MediaPlayerFull } from './media-player-full.js';
 import { MediaQueue } from './media-queue.js';
+import { SpeakersOverlay } from './media-speakers-pill.js';
 import { formatDuration, useMediaPosition, useSteadyPlaying } from './media-progress.js';
 import { useSeekHold } from './media-seek.js';
 import { SeekLine } from './seek-line.js';
@@ -134,7 +135,7 @@ function HoldCard({ open, status, rows, volumeOpen, children, }) {
     return rows === 'auto' ? (_jsx(Flex, { width: "100%", css: { containerType: 'inline-size' }, children: card })) : (card);
 }
 /** Now playing with previous / play-pause / next and a volume control, for a media player entity. */
-export function MediaPlayerBar({ entity, name, browse, drawer = true, onOpen, overlays = false, rows = 'auto', }) {
+export function MediaPlayerBar({ entity, name, browse, drawer = true, onOpen, overlays = false, grouping = true, speakers, rows = 'auto', }) {
     const handle = useEntityHandle('mediaPlayer', entity);
     const player = handle.entity;
     const status = handle.status;
@@ -165,13 +166,15 @@ export function MediaPlayerBar({ entity, name, browse, drawer = true, onOpen, ov
         ? undefined
         : (browse ?? (ref && caps?.browse ? _jsx(MediaBrowser, { entity: ref, layout: "list" }) : undefined));
     const queueBody = ref && caps?.queue === true ? _jsx(MediaQueue, { entity: ref }) : undefined;
+    // And whether it can be grouped, for the pill that opens who plays together with it.
+    const grouped = grouping && ref !== undefined && caps?.group === true;
     const volumeSlider = (_jsxs(Flex, { as: motion.div, align: "center", gap: 2, grow: 1, minWidth: 0, initial: { opacity: 0 }, animate: { opacity: 1 }, transition: { duration: 0.15 }, "data-part": "volume", children: [_jsx(PlainButton, { as: motion.button, initial: { scale: 0, opacity: 0 }, animate: { scale: 1, opacity: 1 }, transition: VOLUME_SPRING, "aria-label": muted ? 'Unmute' : 'Mute', "aria-pressed": muted, title: muted ? 'Unmute' : 'Mute', onClick: volume.toggleMute, center: true, color: muted ? 'accent' : 'textMuted', css: { flex: 'none' }, children: _jsx(Icon, { name: muted ? 'lu:volume-x' : 'lu:volume-2', size: 16 }) }), _jsx(Flex, { as: motion.div, grow: 1, minWidth: 0, initial: { scaleX: 0.4, opacity: 0 }, animate: { scaleX: 1, opacity: 1 }, transition: { ...VOLUME_SPRING, delay: 0.04 }, css: { transformOrigin: 'left center' }, children: _jsx(ValueBar, { label: "Volume level", value: volume.shown, min: 0, max: 100, keyStep: 5, height: 10, onDrag: volume.drag, onCommit: volume.commit }) }), _jsxs(Typography, { as: motion.span, variant: "secondary", color: "textMuted", minWidth: 32, align: "right", css: { flex: 'none' }, initial: { opacity: 0 }, animate: { opacity: 1 }, transition: { duration: 0.2, delay: 0.1 }, children: [volume.shown, "%"] })] }));
     const trackInfo = (_jsx(_Fragment, { children: _jsxs(Flex, { "data-part": "track", direction: "column", grow: 1, minWidth: 0, ...(ready ? {} : { color: 'textMuted' }), children: [_jsxs(Flex, { align: "center", gap: 1.5, minWidth: 0, children: [_jsx(Typography, { as: "span", variant: "label", noWrap: true, textOverflow: "ellipsis", children: ready
                                 ? (player?.media?.title ?? 'Nothing playing')
                                 : statusLabels[status] }), ready && caps?.shuffle ? (_jsx(PlainButton, { "aria-label": "Shuffle", "aria-pressed": player?.shuffle === true, title: "Shuffle", onClick: () => press('setShuffle', () => handle.command('setShuffle', { shuffle: player?.shuffle !== true })), center: true, color: player?.shuffle === true ? 'accent' : 'textMuted', css: { flex: 'none' }, children: feedbackFor('setShuffle') === 'pending' ? (_jsx(Spinner, { size: 14 })) : (_jsx(Icon, { name: "lu:shuffle", size: 14 })) })) : null] }), loading ? (_jsx(LoadingLine, { label: loading, variant: "secondary" })) : ready && player?.media?.artist ? (_jsx(Typography, { as: "span", variant: "secondary", color: "textMuted", noWrap: true, textOverflow: "ellipsis", children: player.media.artist })) : null] }) }));
     const bar = (open, openExpanded, openQueue) => (_jsxs(HoldCard, { open: open, status: status, rows: rows, volumeOpen: volumeOpen && ready, children: [_jsx(Ring, { onOpen: open, fraction: progress, children: artwork }), trackInfo, timed ? (_jsxs(Typography, { as: "span", "data-part": "time", variant: "secondary", color: "textMuted", noWrap: true, css: { flex: 'none', fontVariantNumeric: 'tabular-nums' }, children: [formatDuration(seek.shown ?? 0), " / ", formatDuration(duration ?? 0)] })) : null, volumeOpen && ready ? volumeSlider : null, _jsxs(Flex, { "data-part": "tools", align: "center", gap: 3, css: { flex: 'none' }, children: [_jsx(IconButton, { icon: volumeOpen ? 'lu:x' : muted ? 'lu:volume-x' : 'lu:volume-2', label: volumeOpen ? 'Close volume' : 'Volume', glyph: MEDIA_GLYPH, disabled: !ready || (caps?.volume === false && caps.mute === false), onClick: () => setVolumeOpen((current) => !current) }), (overlays
                         ? openExpanded !== undefined
-                        : open && (onOpen ? browse !== false : browser !== undefined)) ? (_jsx(IconButton, { icon: "lu:library", label: "Browse media", glyph: MEDIA_GLYPH, onClick: () => (openExpanded ?? open)?.() })) : null, openQueue ? (_jsx(IconButton, { icon: "lu:list-music", label: "Queue", glyph: MEDIA_GLYPH, onClick: openQueue })) : null] }), _jsxs(Flex, { "data-part": "transport", align: "center", gap: 3, css: { flex: 'none' }, children: [_jsx(IconButton, { icon: "lu:skip-back", label: "Previous", glyph: MEDIA_GLYPH, disabled: !ready || caps?.previous === false || !can.previous, feedback: feedbackFor('previous'), onClick: () => press('previous', () => handle.command('previous')) }), _jsx(IconButton, { icon: playing ? 'lu:pause' : 'lu:play', label: playing ? 'Pause' : 'Play', glyph: MEDIA_GLYPH, disabled: !ready || !can.play, primary: true, feedback: feedbackFor('togglePlay'), onClick: () => press('togglePlay', () => handle.command('togglePlay')) }), _jsx(IconButton, { icon: "lu:skip-forward", label: "Next", glyph: MEDIA_GLYPH, disabled: !ready || caps?.next === false || !can.next, feedback: feedbackFor('next'), onClick: () => press('next', () => handle.command('next')) })] }), timed ? (_jsx(SeekLine, { seek: seek, duration: duration ?? 0, seekable: caps?.seek === true })) : null] }));
+                        : open && (onOpen ? browse !== false : browser !== undefined)) ? (_jsx(IconButton, { icon: "lu:library", label: "Browse media", glyph: MEDIA_GLYPH, onClick: () => (openExpanded ?? open)?.() })) : null, openQueue ? (_jsx(IconButton, { icon: "lu:list-music", label: "Queue", glyph: MEDIA_GLYPH, onClick: openQueue })) : null, grouped && ref && ready ? (_jsx(SpeakersOverlay, { player: player, entity: ref, name: name, title: name ?? player?.name ?? fallbackName(entity), allowed: speakers, compact: true })) : null] }), _jsxs(Flex, { "data-part": "transport", align: "center", gap: 3, css: { flex: 'none' }, children: [_jsx(IconButton, { icon: "lu:skip-back", label: "Previous", glyph: MEDIA_GLYPH, disabled: !ready || caps?.previous === false || !can.previous, feedback: feedbackFor('previous'), onClick: () => press('previous', () => handle.command('previous')) }), _jsx(IconButton, { icon: playing ? 'lu:pause' : 'lu:play', label: playing ? 'Pause' : 'Play', glyph: MEDIA_GLYPH, disabled: !ready || !can.play, primary: true, feedback: feedbackFor('togglePlay'), onClick: () => press('togglePlay', () => handle.command('togglePlay')) }), _jsx(IconButton, { icon: "lu:skip-forward", label: "Next", glyph: MEDIA_GLYPH, disabled: !ready || caps?.next === false || !can.next, feedback: feedbackFor('next'), onClick: () => press('next', () => handle.command('next')) })] }), timed ? (_jsx(SeekLine, { seek: seek, duration: duration ?? 0, seekable: caps?.seek === true })) : null] }));
     // Holding the card, the artwork and the browse button open the same drawer: the player laid out
     // like the vertical one, with the library below it.
     if (!ready) {
@@ -189,5 +192,5 @@ export function MediaPlayerBar({ entity, name, browse, drawer = true, onOpen, ov
     if (!drawer) {
         return bar();
     }
-    return (_jsx(DrawerTrigger, { icon: "lu:music", label: name ?? player?.name ?? fallbackName(entity), kind: "Media", body: _jsx(MediaPlayerFull, { entity: entity, ...(name !== undefined ? { name } : {}), ...(browser !== undefined ? { browser } : {}), ...(typeof entity === 'string' ? { queue: _jsx(MediaQueue, { entity: entity }) } : {}) }), children: (open, openExpanded) => bar(open, openExpanded) }));
+    return (_jsx(DrawerTrigger, { icon: "lu:music", label: name ?? player?.name ?? fallbackName(entity), kind: "Media", body: _jsx(MediaPlayerFull, { entity: entity, ...(name !== undefined ? { name } : {}), ...(browser !== undefined ? { browser } : {}), ...(typeof entity === 'string' ? { queue: _jsx(MediaQueue, { entity: entity }) } : {}), grouping: grouping, speakersView: "inline", ...(speakers ? { speakers } : {}) }), children: (open, openExpanded) => bar(open, openExpanded) }));
 }

package/dist/entities/media-player-column.d.ts

@@ -11,6 +11,10 @@ export interface MediaPlayerColumnProps {
     browse?: ReactNode | false;
     /** The library and the queue each open as a full-size overlay of their own, from a library button and a queue button beside the transport, instead of one half-size drawer with the whole player in it: for a small display, where the drawer's half state is no use. The library overlay is a `MediaBrowser` as a list (or your `browse` content), the queue overlay a `MediaQueue`; each button is left out when the player has none, or for `browse={false}`. Holding the card and pressing the artwork then do nothing. Shuffle moves up beside the title. Default `false`. */
     overlays?: boolean;
+    /** Whether the player can add speakers to what it plays, put it back to just itself and join a stream playing elsewhere (`MediaSpeakers`): a Speakers tab in the drawer's player, and with `overlays` a speakers button beside the title that opens it. Only for a player that can be grouped. `false` leaves it out. Default `true`. */
+    grouping?: boolean;
+    /** An allowlist of the speakers that can be added: only those that are in it and that the player can be grouped with are offered. Absent, every speaker it can be grouped with is offered. */
+    speakers?: EntityRef[];
 }
 /** The player as an upright card for a narrow column beside a dashboard (a quarter to a third of
  * the width): the artwork in a ring that shows (and seeks) the position, title, transport and a
@@ -18,4 +22,4 @@ export interface MediaPlayerColumnProps {
  * pressing the artwork opens the drawer with the player and its library; the browse button opens
  * that drawer expanded. With `overlays` there is no drawer: the library and the queue open full
  * size, each on its own. */
-export declare function MediaPlayerColumn({ entity, name, browse, overlays, }: MediaPlayerColumnProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function MediaPlayerColumn({ entity, name, browse, overlays, grouping, speakers, }: MediaPlayerColumnProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/entities/media-player-column.js

@@ -9,6 +9,7 @@ import { useHold } from '../layout/use-hold.js';
 import { MediaBrowser } from './media-browser.js';
 import { MediaPlayerFull } from './media-player-full.js';
 import { MediaQueue } from './media-queue.js';
+import { SpeakersOverlay } from './media-speakers-pill.js';
 import { NowPlaying } from './now-playing.js';
 /** The player as an upright card for a narrow column beside a dashboard (a quarter to a third of
  * the width): the artwork in a ring that shows (and seeks) the position, title, transport and a
@@ -16,7 +17,7 @@ import { NowPlaying } from './now-playing.js';
  * pressing the artwork opens the drawer with the player and its library; the browse button opens
  * that drawer expanded. With `overlays` there is no drawer: the library and the queue open full
  * size, each on its own. */
-export function MediaPlayerColumn({ entity, name, browse, overlays = false, }) {
+export function MediaPlayerColumn({ entity, name, browse, overlays = false, grouping = true, speakers, }) {
     const handle = useEntityHandle('mediaPlayer', entity);
     const player = handle.entity;
     const ref = typeof entity === 'string' ? entity : undefined;
@@ -25,6 +26,14 @@ export function MediaPlayerColumn({ entity, name, browse, overlays = false, }) {
         : (browse ??
             (ref && player?.capabilities.browse ? (_jsx(MediaBrowser, { entity: ref, layout: "auto" })) : undefined));
     const fallback = fallbackName(entity);
+    // Whether it can be grouped, for the pill under the track info that opens who plays together with it.
+    const grouped = grouping && ref !== undefined && player?.capabilities.group === true;
+    // The pill under the track info, which opens the speakers over the player.
+    const pill = grouped && ref
+        ? {
+            speakers: (_jsx(SpeakersOverlay, { player: player, entity: ref, name: name, title: name ?? player?.name ?? fallback, allowed: speakers })),
+        }
+        : {};
     if (overlays) {
         // What the overlays hold: the library as a list, the queue; each only when the player has one.
         const title = name ?? player?.name ?? fallback;
@@ -41,9 +50,9 @@ export function MediaPlayerColumn({ entity, name, browse, overlays = false, }) {
                             ? {
                                 extra: (_jsx(IconButton, { icon: "lu:list-music", label: "Queue", glyph: 18, onClick: openQueue })),
                             }
-                            : {}) }) })) })) })) : (_jsx(Card, { children: _jsx(NowPlaying, { handle: handle, fallback: fallback, ...(name !== undefined ? { name } : {}) }) }));
+                            : {}), ...pill }) })) })) })) : (_jsx(Card, { children: _jsx(NowPlaying, { handle: handle, fallback: fallback, ...(name !== undefined ? { name } : {}), ...pill }) }));
     }
-    return browser !== undefined && handle.status === 'ready' ? (_jsx(DrawerTrigger, { icon: "lu:music", label: name ?? player?.name ?? fallback, kind: "Media", body: _jsx(MediaPlayerFull, { entity: entity, browser: browser, ...(typeof entity === 'string' ? { queue: _jsx(MediaQueue, { entity: entity }) } : {}), ...(name !== undefined ? { name } : {}) }), children: (open, openExpanded) => (_jsx(Card, { open: open, children: _jsx(NowPlaying, { handle: handle, fallback: fallback, ...(name !== undefined ? { name } : {}), onOpenArtwork: open, extra: _jsx(IconButton, { icon: "lu:library", label: "Browse media", glyph: 18, onClick: openExpanded }) }) })) })) : (_jsx(Card, { children: _jsx(NowPlaying, { handle: handle, fallback: fallback, ...(name !== undefined ? { name } : {}) }) }));
+    return browser !== undefined && handle.status === 'ready' ? (_jsx(DrawerTrigger, { icon: "lu:music", label: name ?? player?.name ?? fallback, kind: "Media", body: _jsx(MediaPlayerFull, { entity: entity, browser: browser, ...(typeof entity === 'string' ? { queue: _jsx(MediaQueue, { entity: entity }) } : {}), ...(speakers ? { speakers } : {}), grouping: grouping, speakersView: "inline", ...(name !== undefined ? { name } : {}) }), children: (open, openExpanded) => (_jsx(Card, { open: open, children: _jsx(NowPlaying, { handle: handle, fallback: fallback, ...(name !== undefined ? { name } : {}), onOpenArtwork: open, ...pill, extra: _jsx(IconButton, { icon: "lu:library", label: "Browse media", glyph: 18, onClick: openExpanded }) }) })) })) : (_jsx(Card, { children: _jsx(NowPlaying, { handle: handle, fallback: fallback, ...(name !== undefined ? { name } : {}), ...pill }) }));
 }
 /** The card itself; with `open`, holding it (anywhere but on a control) calls it. */
 function Card({ open, children }) {

package/dist/entities/media-player-full.d.ts

@@ -9,6 +9,12 @@ export interface MediaPlayerFullProps {
     browser?: ReactNode;
     /** What goes beside the player in a wide space, usually the player's queue: `<MediaQueue entity="ma:living_room" />`. Only used when `wide` and the player has a queue; the narrow layout has no room for it. */
     queue?: ReactNode;
+    /** Whether the player can add speakers to what it plays, put it back to just itself and join a stream playing elsewhere (`MediaSpeakers`): a pill under the track info says how its speakers stand and opens them. Only for a player given as a ref that can be grouped. `false` leaves it out. Default `true`. */
+    grouping?: boolean;
+    /** An allowlist of the speakers that can be added: only those that are in it and that the player can be grouped with are offered. Absent, every speaker it can be grouped with is offered. */
+    speakers?: EntityRef[];
+    /** How the pill opens the speakers: `overlay` over the player, in the side panel the media overlays use, or `inline`, in the place of the list below the player, for a player that is already in a panel. Default `overlay`. */
+    speakersView?: 'overlay' | 'inline';
     /** Calls the player this instead of the name it reports. */
     name?: string;
     /** Gives the library the whole width, for one laid out to use it (the theater layout). Defaults to whether the drawer is expanded. */
@@ -29,4 +35,4 @@ export type ListTab = 'library' | 'queue';
  * in a page of its own, around it whatever it likes (a surface that fills the space and scrolls, a
  * heading, other cards beside it). It fills the height it is given, so the page that holds it
  * decides how tall that is. */
-export declare function MediaPlayerFull({ entity, browser, queue, wide, name, tabs, defaultTab, tab, onTabChange, }: MediaPlayerFullProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function MediaPlayerFull({ entity, browser, queue, grouping, speakers, speakersView, wide, name, tabs, defaultTab, tab, onTabChange, }: MediaPlayerFullProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/entities/media-player-full.js

@@ -6,19 +6,22 @@ import { fallbackName } from '../entity-handle.js';
 import { useEntityHandle } from '../hooks.js';
 import { useDetail } from '../layout/detail-provider.js';
 import { Icon } from '../icon.js';
+import { MediaSpeakers } from './media-speakers.js';
+import { SpeakersOverlay, SpeakersPill } from './media-speakers-pill.js';
 import { NowPlaying } from './now-playing.js';
 /** The artwork ring's diameter in a full-size player, against the usual 168px. */
 const FULL_SIZE = 260;
 const TAB_HEIGHT = 40;
 /** Library and Queue, as text with an underline (not the pills the library's own categories are, so the
  * two rows read as different things). */
-function ListTabs({ value, onChange }) {
+function ListTabs({ value, lists, onChange, }) {
     // One line that slides between the tabs; its own id, so two players on a page do not share it.
     const line = useId();
-    const tabs = [
+    const all = [
         { id: 'library', label: 'Library', icon: 'lu:library' },
         { id: 'queue', label: 'Queue', icon: 'lu:list-music' },
     ];
+    const tabs = all.filter((tab) => lists.includes(tab.id));
     return (_jsx(Flex, { role: "tablist", "aria-label": "Library or queue", gap: 5, css: ({ palette }) => ({ flexShrink: 0, borderBottom: `1px solid ${palette.border}` }), children: tabs.map((tab) => {
             const selected = tab.id === value;
             return (_jsxs(Flex, { as: "button", type: "button", role: "tab", "aria-selected": selected, onClick: () => onChange(tab.id), align: "center", justify: "center", gap: 2, height: TAB_HEIGHT, cursor: "pointer", color: selected ? 'text' : 'textMuted', css: {
@@ -36,7 +39,7 @@ function ListTabs({ value, onChange }) {
  * in a page of its own, around it whatever it likes (a surface that fills the space and scrolls, a
  * heading, other cards beside it). It fills the height it is given, so the page that holds it
  * decides how tall that is. */
-export function MediaPlayerFull({ entity, browser, queue, wide, name, tabs = true, defaultTab = 'library', tab, onTabChange, }) {
+export function MediaPlayerFull({ entity, browser, queue, grouping = true, speakers, speakersView = 'overlay', wide, name, tabs = true, defaultTab = 'library', tab, onTabChange, }) {
     const handle = useEntityHandle('mediaPlayer', entity);
     const { detail } = useDetail();
     const full = wide ?? detail?.expanded === true;
@@ -47,13 +50,20 @@ export function MediaPlayerFull({ entity, browser, queue, wide, name, tabs = tru
         ...(browser !== undefined ? ['library'] : []),
         ...(!full && tabs && hasQueue ? ['queue'] : []),
     ];
+    // The speakers, behind a pill under the track info.
+    const ref = typeof entity === 'string' ? entity : undefined;
+    const player = handle.entity;
+    const [speakersOpen, setSpeakersOpen] = useState(false);
+    const speakersBody = grouping && ref && player?.capabilities.group === true ? (_jsx(MediaSpeakers, { entity: ref, ...(name !== undefined ? { name } : {}), ...(speakers ? { speakers } : {}) })) : undefined;
+    const pill = speakersBody && ref ? (speakersView === 'inline' ? (_jsx(SpeakersPill, { player: player, speakers: speakers, pressed: speakersOpen, onClick: () => setSpeakersOpen((now) => !now) })) : (_jsx(SpeakersOverlay, { player: player, entity: ref, name: name, title: name ?? player?.name ?? fallbackName(entity), allowed: speakers }))) : undefined;
+    const showSpeakers = speakersView === 'inline' && speakersOpen && speakersBody !== undefined;
     const wanted = tab ?? kept;
     const open = lists.includes(wanted) ? wanted : lists[0];
     const choose = (next) => {
         setKept(next);
         onTabChange?.(next);
     };
-    return (_jsxs(Flex, { direction: "column", gap: 5, grow: 1, minHeight: 0, children: [_jsxs(Flex, { align: "stretch", justify: "center", gap: 6, ...(full ? { grow: 1 } : {}), css: { flexShrink: 0 }, children: [_jsx(Flex, { align: "center", justify: "center", grow: 1, minWidth: 0, children: _jsx(Box, { width: "100%", maxWidth: full ? 560 : 420, children: _jsx(NowPlaying, { handle: handle, fallback: fallbackName(entity), ...(name !== undefined ? { name } : {}), shuffle: "title", ...(full ? { size: FULL_SIZE } : {}) }) }) }), full && queue !== undefined && handle.entity?.capabilities.queue === true ? (_jsx(Flex, { position: "relative", width: 400, css: ({ palette }) => ({ flex: 'none', borderLeft: `1px solid ${palette.border}` }), children: _jsx(Flex, { direction: "column", position: "absolute", pl: 5, css: { inset: 0 }, children: queue }) })) : null] }), open !== undefined ? (_jsxs(_Fragment, { children: [lists.length > 1 ? (_jsx(ListTabs, { value: open, onChange: choose })) : (_jsx(Box, { height: 1, background: "border", css: { flexShrink: 0 } })), _jsx(Flex
+    return (_jsxs(Flex, { direction: "column", gap: 5, grow: 1, minHeight: 0, children: [_jsxs(Flex, { align: "stretch", justify: "center", gap: 6, ...(full ? { grow: 1 } : {}), css: { flexShrink: 0 }, children: [_jsx(Flex, { align: "center", justify: "center", grow: 1, minWidth: 0, children: _jsx(Box, { width: "100%", maxWidth: full ? 560 : 420, children: _jsx(NowPlaying, { handle: handle, fallback: fallbackName(entity), ...(name !== undefined ? { name } : {}), shuffle: "title", ...(pill ? { speakers: pill } : {}), ...(full ? { size: FULL_SIZE } : {}) }) }) }), full && queue !== undefined && handle.entity?.capabilities.queue === true ? (_jsx(Flex, { position: "relative", width: 400, css: ({ palette }) => ({ flex: 'none', borderLeft: `1px solid ${palette.border}` }), children: _jsx(Flex, { direction: "column", position: "absolute", pl: 5, css: { inset: 0 }, children: queue }) })) : null] }), showSpeakers ? (_jsxs(_Fragment, { children: [_jsx(Box, { height: 1, background: "border", css: { flexShrink: 0 } }), _jsx(Flex, { direction: "column", width: "100%", minHeight: 0, ...(full ? {} : { maxWidth: 960, mx: 'auto' }), children: speakersBody })] })) : open !== undefined ? (_jsxs(_Fragment, { children: [lists.length > 1 ? (_jsx(ListTabs, { value: open, lists: lists, onChange: choose })) : (_jsx(Box, { height: 1, background: "border", css: { flexShrink: 0 } })), _jsx(Flex
                     // Another list fades in where the last one was, so a tab does not cut from one to the other.
                     , { 
                         // Another list fades in where the last one was, so a tab does not cut from one to the other.

package/dist/entities/media-queue.js

@@ -99,6 +99,7 @@ export function MediaQueue({ entity }) {
                     minHeight: 0,
                     listStyle: 'none',
                     overflowY: 'auto',
+                    overflowX: 'hidden',
                 }), children: [_jsxs(AnimatePresence, { initial: false, children: [leading.map((item, index) => (_jsx(QueueRow, { item: item, still: still === true, dim: index < at || (finished && item.current === true), played: finished && item.current === true, onPlay: () => run('playQueueItem', item) }, item.id))), shown.map((item) => (_jsx(QueueRow, { item: item, still: still === true, 
                                 // While Clear works only what is on its way out is dimmed.
                                 dim: clearing, reorderable: true, onPlay: () => run('playQueueItem', item), onRemove: () => run('removeQueueItem', item), onDrop: () => drop(item), onStep: (by) => step(item, by) }, item.id)))] }), hidden > 0 ? (_jsxs(Typography, { as: "li", variant: "secondary", color: "textMuted", py: 2, css: { flex: 'none' }, children: ["and ", hidden.toLocaleString(), " more"] })) : null] }))] }));

package/dist/entities/media-speakers-pill.d.ts

@@ -0,0 +1,44 @@
+/** @jsxImportSource @emotion/react */
+import type { EntityRef, MediaPlayerEntity } from '@hashsome/core';
+/** What the pill says: how many speakers play together, or which stream is playing in another room, or nothing. */
+export interface SpeakersSummary {
+    /** The speakers playing together with this player, itself included; 0 while it plays alone. */
+    together: number;
+    /** The streams playing on the speakers it could join, named by the player that leads each. Empty while it is in a group. */
+    elsewhere: string[];
+}
+/** The speakers a player could be grouped with, narrowed to an allowlist when there is one, and what they play. */
+export declare function useSpeakersSummary(player: MediaPlayerEntity | undefined, allowed: readonly EntityRef[] | undefined): SpeakersSummary;
+/** The words for a summary: "Speakers" with nothing going on, "3 speakers" in a group, "Patio playing" or "2 streams playing" when there is a stream to join. */
+export declare function summaryLabel(summary: SpeakersSummary): string;
+/**
+ * A small pill that says how a player's speakers stand and opens them: "Speakers" while it plays alone, "3 speakers"
+ * once others play with it, "Patio playing" when there is a stream in another room to join. A dot marks a stream to
+ * join, and the speaker icon takes the accent colour while the player is in a group.
+ */
+export declare function SpeakersPill({ player, speakers, onClick, pressed, compact, }: {
+    /** The player whose speakers they are. */
+    player: MediaPlayerEntity | undefined;
+    /** An allowlist of the speakers to count, as `MediaSpeakers` takes it. */
+    speakers?: readonly EntityRef[] | undefined;
+    onClick: () => void;
+    /** Whether what it opens is open, for a pill that toggles an inline view. */
+    pressed?: boolean | undefined;
+    /** Without words, for a bar with no room: the icon, and the count in a group. */
+    compact?: boolean;
+}): import("@emotion/react/jsx-runtime").JSX.Element;
+/** The pill, opening the speakers in the side panel every media overlay uses, which can be made full size. It builds
+ * the speakers itself and is memoized: the panel keeps its content live by pushing it again whenever it is a new
+ * element, and a parent that re-renders when the panel opens (as the full player does) would otherwise build a new one
+ * each time, and push it again, without end. */
+export declare const SpeakersOverlay: import("react").MemoExoticComponent<({ player, entity, name, title, allowed, compact, }: {
+    player: MediaPlayerEntity | undefined;
+    /** The player, as a ref. */
+    entity: EntityRef;
+    /** What to call it, when it is not the name it reports. */
+    name?: string | undefined;
+    /** The player's name, under the panel's heading. */
+    title: string;
+    allowed?: readonly EntityRef[] | undefined;
+    compact?: boolean;
+}) => import("@emotion/react/jsx-runtime").JSX.Element>;

package/dist/entities/media-speakers-pill.js

@@ -0,0 +1,73 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { Box, Flex, Typography } from 'e-prim';
+import { memo } from 'react';
+import { useEntities } from '../hooks.js';
+import { Icon } from '../icon.js';
+import { DrawerTrigger } from '../layout/use-drawer.js';
+import { MediaSpeakers, offeredSpeakers } from './media-speakers.js';
+/** The speakers a player could be grouped with, narrowed to an allowlist when there is one, and what they play. */
+export function useSpeakersSummary(player, allowed) {
+    const offered = offeredSpeakers(player?.groupable, allowed).filter((ref) => ref !== player?.ref);
+    const states = useEntities(offered);
+    const group = player?.group;
+    if (group) {
+        return { together: group.members.length + 1, elsewhere: [] };
+    }
+    // One stream per leader: two speakers playing together are one stream, named by who leads it.
+    const byRef = new Map();
+    states.forEach((state, index) => {
+        const ref = offered[index];
+        if (ref !== undefined && state?.kind === 'mediaPlayer') {
+            byRef.set(ref, state.name);
+        }
+    });
+    const streams = new Map();
+    states.forEach((state) => {
+        if (state?.kind !== 'mediaPlayer' || state.availability !== 'ready') {
+            return;
+        }
+        if (state.playback !== 'playing') {
+            return;
+        }
+        const leader = state.group?.leader ?? state.ref;
+        if (!streams.has(leader)) {
+            streams.set(leader, byRef.get(leader) ?? state.name);
+        }
+    });
+    return { together: 0, elsewhere: [...streams.values()] };
+}
+/** The words for a summary: "Speakers" with nothing going on, "3 speakers" in a group, "Patio playing" or "2 streams playing" when there is a stream to join. */
+export function summaryLabel(summary) {
+    if (summary.together > 1) {
+        return `${summary.together} speakers`;
+    }
+    const [only] = summary.elsewhere;
+    if (summary.elsewhere.length === 1 && only !== undefined) {
+        return `${only} playing`;
+    }
+    if (summary.elsewhere.length > 1) {
+        return `${summary.elsewhere.length} streams playing`;
+    }
+    return 'Speakers';
+}
+/**
+ * A small pill that says how a player's speakers stand and opens them: "Speakers" while it plays alone, "3 speakers"
+ * once others play with it, "Patio playing" when there is a stream in another room to join. A dot marks a stream to
+ * join, and the speaker icon takes the accent colour while the player is in a group.
+ */
+export function SpeakersPill({ player, speakers, onClick, pressed, compact = false, }) {
+    const summary = useSpeakersSummary(player, speakers);
+    const label = summaryLabel(summary);
+    const grouped = summary.together > 1;
+    const offering = !grouped && summary.elsewhere.length > 0;
+    const words = compact ? (grouped ? String(summary.together) : undefined) : label;
+    return (_jsxs(Flex, { as: "button", type: "button", "aria-label": `Speakers: ${label}`, "aria-haspopup": "dialog", "aria-expanded": pressed, title: label, onClick: onClick, align: "center", justify: "center", gap: 2, radius: "full", height: 30, px: words === undefined ? 0 : 3, background: "surfaceRaised", color: grouped ? 'text' : 'textMuted', cursor: "pointer", css: { flex: 'none', minWidth: 30, maxWidth: '100%', border: 0 }, children: [_jsx(Box, { color: grouped ? 'accent' : 'textMuted', css: { display: 'grid' }, children: _jsx(Icon, { name: "lu:speaker", size: 14 }) }), offering ? (_jsx(Box, { background: "accent", radius: "full", width: 7, height: 7, "aria-hidden": "true", css: { flex: 'none' } })) : null, words !== undefined ? (_jsx(Typography, { as: "span", variant: "label", noWrap: true, textOverflow: "ellipsis", overflow: "hidden", children: words })) : null] }));
+}
+/** The pill, opening the speakers in the side panel every media overlay uses, which can be made full size. It builds
+ * the speakers itself and is memoized: the panel keeps its content live by pushing it again whenever it is a new
+ * element, and a parent that re-renders when the panel opens (as the full player does) would otherwise build a new one
+ * each time, and push it again, without end. */
+export const SpeakersOverlay = memo(function SpeakersOverlay({ player, entity, name, title, allowed, compact, }) {
+    const body = (_jsx(MediaSpeakers, { entity: entity, ...(name !== undefined ? { name } : {}), ...(allowed ? { speakers: [...allowed] } : {}) }));
+    return (_jsx(DrawerTrigger, { icon: "lu:speaker", label: "Speakers", kind: title, body: body, children: (open) => (_jsx(SpeakersPill, { player: player, speakers: allowed, onClick: open, ...(compact ? { compact } : {}) })) }));
+});

package/dist/entities/media-speakers.d.ts

@@ -0,0 +1,20 @@
+/** @jsxImportSource @emotion/react */
+import type { EntityRef } from '@hashsome/core';
+import { type EntityHandle } from '../entity-handle.ts';
+export interface MediaSpeakersProps {
+    /** The player whose stream this is, as a ref like `ma:porch` or a handle (a custom source). */
+    entity: EntityRef | EntityHandle<'mediaPlayer'>;
+    /** What to call the player. Defaults to the player's own name. */
+    name?: string;
+    /** An allowlist of the speakers that can be added to this stream (or joined). Only those that are in it and that the player can be grouped with are offered; a speaker the player cannot be grouped with is left out, and one that is but is unavailable shows dimmed. Absent, every speaker it can be grouped with is offered. Speakers already in the stream are always shown, so they can be taken out. */
+    speakers?: EntityRef[];
+}
+/** The speakers to offer: the ones the player can be grouped with, narrowed to an allowlist when there is one. */
+export declare function offeredSpeakers(groupable: readonly EntityRef[] | undefined, allowed: readonly EntityRef[] | undefined): EntityRef[];
+/**
+ * The speakers of a player's stream: who plays together with it, a volume for each, a way to take one out, to add
+ * another, to join a stream that is playing in another room, and to put the stream back to just this player.
+ * Everything is asked of the backend and shown when it answers. Playing something else on a speaker, or on this
+ * player, to do it asks first.
+ */
+export declare function MediaSpeakers({ entity, name, speakers }: MediaSpeakersProps): import("@emotion/react/jsx-runtime").JSX.Element;