@hashsome/ui 0.2.0 → 0.4.0

package/dist/gallery/gallery.js

@@ -10,6 +10,7 @@ import { MediaBrowser } from '../entities/media-browser.js';
 import { MediaPlayerBar } from '../entities/media-player-bar.js';
 import { MediaPlayerColumn } from '../entities/media-player-column.js';
 import { MediaPlayerFull } from '../entities/media-player-full.js';
+import { MediaQueue } from '../entities/media-queue.js';
 import { WeatherForecast } from '../entities/weather-forecast.js';
 import { NavDock } from '../entities/nav-dock.js';
 import { NavRail } from '../entities/nav-rail.js';
@@ -348,7 +349,7 @@ export function Gallery({ density = 'comfortable' }) {
                                             boxShadow: '0 1px 3px rgba(0, 0, 0, 0.25)',
                                             transform: mode === 'dark' ? 'translate(28px, -50%)' : 'translateY(-50%)',
                                             transition: 'transform 0.2s ease',
-                                        }) }), _jsx(Icon, { name: "lu:sun", size: 14 }), _jsx(Icon, { name: "lu:moon", size: 14 })] })] }), _jsx(ComponentDoc, { title: "Grid", components: ['Grid'], description: "Lays tiles out in equal-width columns (`columns`, default 2). Cells share the width and never overflow it.", children: _jsxs(Flex, { direction: "column", gap: 5, children: [_jsxs(Grid, { columns: 2, children: [_jsx(Tile, { label: "Two", icon: "lu:layout-grid", secondary: "columns={2}" }), _jsx(Tile, { label: "Columns", icon: "lu:layout-grid", secondary: "equal width" })] }), _jsxs(Grid, { columns: 3, children: [_jsx(Tile, { label: "Three", icon: "lu:layout-grid", secondary: "columns={3}" }), _jsx(Tile, { label: "Columns", icon: "lu:layout-grid", secondary: "equal width" }), _jsx(Tile, { label: "Wide", icon: "lu:layout-grid", secondary: "fits the row" })] })] }) }), _jsx(ComponentDoc, { title: "Room Header", components: ['RoomHeader'], description: "The header that starts a room: a muted icon and title, a hairline and readouts on the right, placed above a Grid (or any tiles). It adds its own space above, so consecutive rooms read as groups.", children: _jsxs(Flex, { direction: "column", gap: 4, children: [_jsx(RoomHeader, { title: "Kitchen", icon: "lu:utensils-crossed" }), _jsx(RoomHeader, { title: "Porch", icon: "lu:house", readouts: _jsxs(_Fragment, { children: [_jsx(SensorReadout, { entity: "ha:sensor.temperature" }), _jsx(SensorReadout, { entity: "ha:sensor.humidity" })] }) })] }) }), _jsx(ComponentDoc, { title: "Tile", components: ['Tile'], description: "The base card every entity tile is built from: icon, label, status line, optional fill bar (drag to change it), trailing controls, a hold-to-open drawer and pending / done / error feedback. Use it directly for something that isn't an entity.", children: _jsxs(Grid, { children: [_jsx(Tile, { label: "Plain", icon: "lu:lamp", secondary: "Off" }), _jsx(Tile, { label: "Active", icon: "lu:lamp", active: true }), _jsx(TileFillDemo, {}), _jsx(Tile, { label: "With controls", icon: "lu:fan", trailing: _jsx(Typography, { as: "span", variant: "secondary", color: "textMuted", children: "trailing" }) }), _jsx(Tile, { label: "Pending", icon: "lu:lamp", feedback: "pending" }), _jsx(Tile, { label: "Error", icon: "lu:lamp", feedback: "error" }), _jsx(Tile, { label: "Unavailable", icon: "lu:lamp", status: "unavailable" }), _jsx(Tile, { label: "Not found", icon: "lu:lamp", status: "missing" })] }) }), _jsx(ComponentDoc, { title: "Icon", components: ['Icon'], description: "A plain prefixed string, no import: `lu:` is Lucide, `tb:` is Tabler outline. It takes the surrounding text color and scales with `size` (default 24px).", children: _jsxs(Flex, { direction: "column", gap: 4, children: [_jsxs(Flex, { align: "center", gap: 4, children: [_jsx(Icon, { name: "lu:lightbulb" }), _jsx(Icon, { name: "lu:thermometer", size: 16 }), _jsx(Icon, { name: "lu:sofa", size: 32 }), _jsx(Icon, { name: "tb:vacuum-cleaner" }), _jsx(Icon, { name: "tb:car-fan", size: 16 })] }), _jsxs(Flex, { align: "center", gap: 4, css: { flexWrap: 'wrap' }, children: [_jsx(Typography, { as: "span", variant: "body", color: "textMuted", children: "Find an icon:" }), ICON_PACKS.map((pack) => (_jsx(Typography, { as: "span", variant: "body", children: _jsxs("a", { css: ({ palette }) => ({ color: palette.accent, textUnderlineOffset: 3 }), href: pack.href, target: "_blank", rel: "noreferrer", children: ["Search ", pack.name, " icons (", _jsxs("span", { css: codeStyles, children: [pack.prefix, ":"] }), ")"] }) }, pack.prefix)))] })] }) }), _jsx(ComponentDoc, { title: "Energy Chart", components: ['EnergyChart'], description: "A power section for a drawer, which tiles pass through `energy`: a live power reading, usage tiles and a sparkline. Expanded in a drawer it becomes the full chart with a range switcher.", children: _jsx(EnergyChart, { power: "ha:sensor.heater_power", energy: "ha:sensor.heater_energy", usage: heaterUsage, seriesByRange: heaterSeries }) }), _jsx(ComponentDoc, { title: "History Section", components: ['HistorySection'], description: "Recent activity for a drawer, which tiles pass through `history`: who or what changed the entity, and when. An empty list renders nothing.", children: _jsx(HistorySection, { entries: lampHistory }) }), _jsx(ComponentDoc, { title: "Light Tile", components: ['LightTile'], description: "Tap to toggle, hold to open its detail drawer. Dimmable lights drag to set brightness; color-capable lights add a palette button that opens swatches in the card (white temperatures by default, overridable with `colors`), and the card's icon shows the light's current color. The drawer has the full temperature and hue bars.", children: _jsxs(Grid, { children: [_jsx(LightTile, { entity: "ha:light.plain_on", energy: lampEnergy, history: lampHistory }), _jsx(LightTile, { entity: "ha:light.plain_off", history: stairsHistory }), _jsx(LightTile, { entity: "ha:light.dimmable", icon: "lu:sparkles", energy: ledEnergy, history: ledHistory }), _jsx(LightTile, { entity: "ha:light.color", icon: "lu:lamp-desk", history: nightLampHistory }), _jsx(LightTile, { entity: "ha:light.cct", icon: "lu:lamp-desk" }), _jsx(LightTile, { entity: "ha:light.unavailable" }), _jsx(LightTile, { entity: "ha:light.missing" })] }) }), _jsx(ComponentDoc, { title: "Climate Tile", components: ['ClimateTile'], description: "A heater/thermostat tile: a mode button that opens mode swatches in the card (like light colors), plus a target-temperature stepper. Hold for the drawer: modes, a target bar with fine +/- (hold to repeat), presets, energy and history.", children: _jsxs(Grid, { columns: 1, children: [_jsx(ClimateTile, { entity: "ha:climate.heater", energy: heaterEnergy, history: heaterHistory }), _jsx(ClimateTile, { entity: "ha:climate.off", energy: thermostatEnergy, history: heaterHistory }), _jsx(ClimateTile, { entity: "ha:climate.unavailable" })] }) }), _jsx(ComponentDoc, { title: "Sensor Readout", components: ['SensorReadout'], description: "An inline value with icon and unit, defaulting its icon by device class. Readings outside a safe range get a warning (humidity defaults to 30\u201360 %; override with `safeRange`). Pass `history` to make it tappable: the drawer charts it with min/max for today, this week and this month, and a custom date and time range when expanded.", children: _jsxs(Grid, { columns: 3, children: [_jsx(SensorReadout, { entity: "ha:sensor.temperature", history: temperatureHistory }), _jsx(SensorReadout, { entity: "ha:sensor.humidity", history: humidityHistory }), _jsx(SensorReadout, { entity: "ha:sensor.bedroom_humidity", history: bedroomHumidityHistory }), _jsx(SensorReadout, { entity: "ha:sensor.office_humidity", history: officeHumidityHistory }), _jsx(SensorReadout, { entity: "ha:sensor.unavailable" }), _jsx(SensorReadout, { entity: "ha:sensor.unknown" })] }) }), _jsx(ComponentDoc, { title: "Scene Button & Action Button", components: ['SceneButton', 'ActionButton'], description: "A scene is just an action entity. An action button triggers an action (or flips a switch) and shows pending / done / error feedback after a press; `onPress` runs your own logic instead.", children: _jsxs(Grid, { columns: 3, children: [_jsx(SceneButton, { entity: "ha:scene.tv_time" }), _jsx(ActionButton, { label: "Shower", icon: "tb:bath", entity: "ha:script.shower" }), _jsx(ActionButton, { label: "Always Fails", onPress: () => Promise.reject(new Error('That went wrong')) })] }) }), _jsx(ComponentDoc, { title: "Media Player Bar", components: ['MediaPlayerBar'], description: "Track info (with a small shuffle toggle by the title) and the time beside it, then volume, browse, previous, play/pause and next (the artwork opens the browser too), with a thin progress line along the bottom while something plays. The browse button opens the player's own library in the drawer; pass `browse` content to replace it, or `false` for no button. The volume button opens a volume slider in the bar (with a mute swatch, like the light colors and climate modes). Shows album art, or a note glyph when there is none.", children: _jsxs(Flex, { direction: "column", gap: 3, children: [_jsx(MediaPlayerBar, { entity: "ha:media_player.living_room" }), _jsx(MediaPlayerBar, { entity: "ha:media_player.off" })] }) }), _jsx(ComponentDoc, { title: "Media Player Column", components: ['MediaPlayerColumn'], description: "The player as an upright card for a narrow column beside a dashboard: the artwork in a ring that shows how far along playback is (drag around it to seek), title, transport, and a volume bar that is always visible. The browse button opens the library in the drawer.", children: _jsx(Flex, { width: 320, children: _jsx(MediaPlayerColumn, { entity: "ha:media_player.living_room" }) }) }), _jsx(ComponentDoc, { title: "Media Player Full", components: ['MediaPlayerFull'], description: "The big player: the player centered, and its library below it, so songs are picked right there instead of in a drawer. The media cards' drawers show it too. A dashboard puts it in a page of its own, around it whatever it likes.", children: _jsx(Flex, { direction: "column", children: _jsx(MediaPlayerFull, { entity: "ha:media_player.living_room", wide: true, browser: _jsx(MediaBrowser, { entity: "ha:media_player.living_room", layout: "theater" }) }) }) }), _jsx(ComponentDoc, { title: "Weather Forecast", components: ['WeatherForecast'], description: "A weather entity's forecast: the weather now, the next 24 hours as a chart (hover it for everything about an hour) and the days ahead. The top bar's weather chip shows it in a drawer; a dashboard can put it in a page of its own. Narrow, then with `expanded` (readings tiles, a card for each hour).", children: _jsxs(Flex, { direction: "column", gap: 6, children: [_jsx(Flex, { direction: "column", width: 380, children: _jsx(WeatherForecast, { entity: "ha:weather.home", expanded: false }) }), _jsx(WeatherForecast, { entity: "ha:weather.home", expanded: true })] }) }), _jsx(ComponentDoc, { title: "Media Browser", components: ['MediaBrowser'], description: "A player's own library in the app's style: tap a folder to open it, a track or station to play it, or the play button on an album, playlist or artist for all of it. The search box appears when the library can be searched. The `theater` layout (second demo) is one row of large cards that scrolls sideways, for a wide space; `list` is the compact default.", children: _jsxs(Flex, { direction: "column", gap: 6, children: [_jsx(Flex, { direction: "column", maxHeight: 420, overflow: "auto", children: _jsx(MediaBrowser, { entity: "ha:media_player.living_room" }) }), _jsx(MediaBrowser, { entity: "ha:media_player.living_room", layout: "theater" })] }) }), _jsx(ComponentDoc, { title: "Navigation", components: ['NavRail', 'NavDock', 'Page'], description: "Routes within one dashboard. A dashboard includes one itself, usually in its layout route: NavRail is fixed to the left and NavDock floats at the bottom, and both reserve the space they take in the Page around them, which pads so content never sits under them.", children: _jsxs(Flex, { direction: "column", gap: 5, children: [_jsx(SubPreview, { label: "NavRail, in a Page", height: 240, children: _jsxs(Page, { height: "100%", children: [_jsx(NavRail, { base: "/gallery", items: NAV_ITEMS }), _jsx(Typography, { as: "p", variant: "body", color: "textMuted", children: "Page content, padded clear of the rail." })] }) }), _jsx(SubPreview, { label: "NavDock", height: 140, children: _jsx(NavDock, { base: "/gallery", items: NAV_ITEMS }) })] }) }), _jsx(ComponentDoc, { title: "Top Bar", components: ['TopBar'], description: "Page chrome above a dashboard's content: a title (a dropdown to switch dashboards, once there's more than one to switch to), scene shortcuts, weather (tap it for the forecast), presence, and a clock.", children: _jsx(TopBar, { title: "Living Room", dashboards: [
+                                        }) }), _jsx(Icon, { name: "lu:sun", size: 14 }), _jsx(Icon, { name: "lu:moon", size: 14 })] })] }), _jsx(ComponentDoc, { title: "Grid", components: ['Grid'], description: "Lays tiles out in equal-width columns (`columns`, default 2). Cells share the width and never overflow it.", children: _jsxs(Flex, { direction: "column", gap: 5, children: [_jsxs(Grid, { columns: 2, children: [_jsx(Tile, { label: "Two", icon: "lu:layout-grid", secondary: "columns={2}" }), _jsx(Tile, { label: "Columns", icon: "lu:layout-grid", secondary: "equal width" })] }), _jsxs(Grid, { columns: 3, children: [_jsx(Tile, { label: "Three", icon: "lu:layout-grid", secondary: "columns={3}" }), _jsx(Tile, { label: "Columns", icon: "lu:layout-grid", secondary: "equal width" }), _jsx(Tile, { label: "Wide", icon: "lu:layout-grid", secondary: "fits the row" })] })] }) }), _jsx(ComponentDoc, { title: "Room Header", components: ['RoomHeader'], description: "The header that starts a room: a muted icon and title, a hairline and readouts on the right, placed above a Grid (or any tiles). It adds its own space above, so consecutive rooms read as groups.", children: _jsxs(Flex, { direction: "column", gap: 4, children: [_jsx(RoomHeader, { title: "Kitchen", icon: "lu:utensils-crossed" }), _jsx(RoomHeader, { title: "Porch", icon: "lu:house", readouts: _jsxs(_Fragment, { children: [_jsx(SensorReadout, { entity: "ha:sensor.temperature" }), _jsx(SensorReadout, { entity: "ha:sensor.humidity" })] }) })] }) }), _jsx(ComponentDoc, { title: "Tile", components: ['Tile'], description: "The base card every entity tile is built from: icon, label, status line, optional fill bar (drag to change it), trailing controls, a hold-to-open drawer and pending / done / error feedback. Use it directly for something that isn't an entity.", children: _jsxs(Grid, { children: [_jsx(Tile, { label: "Plain", icon: "lu:lamp", secondary: "Off" }), _jsx(Tile, { label: "Active", icon: "lu:lamp", active: true }), _jsx(TileFillDemo, {}), _jsx(Tile, { label: "With controls", icon: "lu:fan", trailing: _jsx(Typography, { as: "span", variant: "secondary", color: "textMuted", children: "trailing" }) }), _jsx(Tile, { label: "Pending", icon: "lu:lamp", feedback: "pending" }), _jsx(Tile, { label: "Error", icon: "lu:lamp", feedback: "error" }), _jsx(Tile, { label: "Unavailable", icon: "lu:lamp", status: "unavailable" }), _jsx(Tile, { label: "Not found", icon: "lu:lamp", status: "missing" })] }) }), _jsx(ComponentDoc, { title: "Icon", components: ['Icon'], description: "A plain prefixed string, no import: `lu:` is Lucide, `tb:` is Tabler outline. It takes the surrounding text color and scales with `size` (default 24px).", children: _jsxs(Flex, { direction: "column", gap: 4, children: [_jsxs(Flex, { align: "center", gap: 4, children: [_jsx(Icon, { name: "lu:lightbulb" }), _jsx(Icon, { name: "lu:thermometer", size: 16 }), _jsx(Icon, { name: "lu:sofa", size: 32 }), _jsx(Icon, { name: "tb:vacuum-cleaner" }), _jsx(Icon, { name: "tb:car-fan", size: 16 })] }), _jsxs(Flex, { align: "center", gap: 4, css: { flexWrap: 'wrap' }, children: [_jsx(Typography, { as: "span", variant: "body", color: "textMuted", children: "Find an icon:" }), ICON_PACKS.map((pack) => (_jsx(Typography, { as: "span", variant: "body", children: _jsxs("a", { css: ({ palette }) => ({ color: palette.accent, textUnderlineOffset: 3 }), href: pack.href, target: "_blank", rel: "noreferrer", children: ["Search ", pack.name, " icons (", _jsxs("span", { css: codeStyles, children: [pack.prefix, ":"] }), ")"] }) }, pack.prefix)))] })] }) }), _jsx(ComponentDoc, { title: "Energy Chart", components: ['EnergyChart'], description: "A power section for a drawer, which tiles pass through `energy`: a live power reading, usage tiles and a sparkline. Expanded in a drawer it becomes the full chart with a range switcher.", children: _jsx(EnergyChart, { power: "ha:sensor.heater_power", energy: "ha:sensor.heater_energy", usage: heaterUsage, seriesByRange: heaterSeries }) }), _jsx(ComponentDoc, { title: "History Section", components: ['HistorySection'], description: "Recent activity for a drawer, which tiles pass through `history`: who or what changed the entity, and when. An empty list renders nothing.", children: _jsx(HistorySection, { entries: lampHistory }) }), _jsx(ComponentDoc, { title: "Light Tile", components: ['LightTile'], description: "Tap to toggle, hold to open its detail drawer. Dimmable lights drag to set brightness; color-capable lights add a palette button that opens swatches in the card (white temperatures by default, overridable with `colors`), and the card's icon shows the light's current color. The drawer has the full temperature and hue bars.", children: _jsxs(Grid, { children: [_jsx(LightTile, { entity: "ha:light.plain_on", energy: lampEnergy, history: lampHistory }), _jsx(LightTile, { entity: "ha:light.plain_off", history: stairsHistory }), _jsx(LightTile, { entity: "ha:light.dimmable", icon: "lu:sparkles", energy: ledEnergy, history: ledHistory }), _jsx(LightTile, { entity: "ha:light.color", icon: "lu:lamp-desk", history: nightLampHistory }), _jsx(LightTile, { entity: "ha:light.cct", icon: "lu:lamp-desk" }), _jsx(LightTile, { entity: "ha:light.unavailable" }), _jsx(LightTile, { entity: "ha:light.missing" })] }) }), _jsx(ComponentDoc, { title: "Climate Tile", components: ['ClimateTile'], description: "A heater/thermostat tile: a mode button that opens mode swatches in the card (like light colors), plus a target-temperature stepper. Hold for the drawer: modes, a target bar with fine +/- (hold to repeat), presets, energy and history.", children: _jsxs(Grid, { columns: 1, children: [_jsx(ClimateTile, { entity: "ha:climate.heater", energy: heaterEnergy, history: heaterHistory }), _jsx(ClimateTile, { entity: "ha:climate.off", energy: thermostatEnergy, history: heaterHistory }), _jsx(ClimateTile, { entity: "ha:climate.unavailable" })] }) }), _jsx(ComponentDoc, { title: "Sensor Readout", components: ['SensorReadout'], description: "An inline value with icon and unit, defaulting its icon by device class. Readings outside a safe range get a warning (humidity defaults to 30\u201360 %; override with `safeRange`). Pass `history` to make it tappable: the drawer charts it with min/max for today, this week and this month, and a custom date and time range when expanded.", children: _jsxs(Grid, { columns: 3, children: [_jsx(SensorReadout, { entity: "ha:sensor.temperature", history: temperatureHistory }), _jsx(SensorReadout, { entity: "ha:sensor.humidity", history: humidityHistory }), _jsx(SensorReadout, { entity: "ha:sensor.bedroom_humidity", history: bedroomHumidityHistory }), _jsx(SensorReadout, { entity: "ha:sensor.office_humidity", history: officeHumidityHistory }), _jsx(SensorReadout, { entity: "ha:sensor.unavailable" }), _jsx(SensorReadout, { entity: "ha:sensor.unknown" })] }) }), _jsx(ComponentDoc, { title: "Scene Button & Action Button", components: ['SceneButton', 'ActionButton'], description: "A scene is just an action entity. An action button triggers an action (or flips a switch) and shows pending / done / error feedback after a press; `onPress` runs your own logic instead.", children: _jsxs(Grid, { columns: 3, children: [_jsx(SceneButton, { entity: "ha:scene.tv_time" }), _jsx(ActionButton, { label: "Shower", icon: "tb:bath", entity: "ha:script.shower" }), _jsx(ActionButton, { label: "Always Fails", onPress: () => Promise.reject(new Error('That went wrong')) })] }) }), _jsx(ComponentDoc, { title: "Media Player Bar", components: ['MediaPlayerBar'], description: "Track info (with a small shuffle toggle by the title) and the time beside it, then volume, browse, previous, play/pause and next (the artwork opens the browser too), with a thin progress line along the bottom while something plays. The browse button opens the player's own library in the drawer; pass `browse` content to replace it, or `false` for no button. The volume button opens a volume slider in the bar (with a mute swatch, like the light colors and climate modes). Shows album art, or a note glyph when there is none.", children: _jsxs(Flex, { direction: "column", gap: 3, children: [_jsx(MediaPlayerBar, { entity: "ha:media_player.living_room" }), _jsx(MediaPlayerBar, { entity: "ha:media_player.off" })] }) }), _jsx(ComponentDoc, { title: "Media Player Column", components: ['MediaPlayerColumn'], description: "The player as an upright card for a narrow column beside a dashboard: the artwork in a ring that shows how far along playback is (drag around it to seek), title, transport, and a volume bar that is always visible. The browse button opens the library in the drawer.", children: _jsx(Flex, { width: 320, children: _jsx(MediaPlayerColumn, { entity: "ha:media_player.living_room" }) }) }), _jsx(ComponentDoc, { title: "Media Player Full", components: ['MediaPlayerFull', 'MediaQueue'], description: "The big player: the player centered with its queue beside it (`MediaQueue`: tap a track to jump to it, the cross takes it out, Clear empties it), and its library below, where every track can be played, played next or added to the queue, and an open album or playlist can be played, shuffled or added whole. The media cards' drawers show the player and library too. A dashboard puts it in a page of its own, around it whatever it likes.", children: _jsx(Flex, { direction: "column", children: _jsx(MediaPlayerFull, { entity: "ha:media_player.living_room", wide: true, queue: _jsx(MediaQueue, { entity: "ha:media_player.living_room" }), browser: _jsx(MediaBrowser, { entity: "ha:media_player.living_room", layout: "theater" }) }) }) }), _jsx(ComponentDoc, { title: "Weather Forecast", components: ['WeatherForecast'], description: "A weather entity's forecast: the weather now, the next 24 hours as a chart (hover it for everything about an hour) and the days ahead. The top bar's weather chip shows it in a drawer; a dashboard can put it in a page of its own. Narrow, then with `expanded` (readings tiles, a card for each hour).", children: _jsxs(Flex, { direction: "column", gap: 6, children: [_jsx(Flex, { direction: "column", width: 380, children: _jsx(WeatherForecast, { entity: "ha:weather.home", expanded: false }) }), _jsx(WeatherForecast, { entity: "ha:weather.home", expanded: true })] }) }), _jsx(ComponentDoc, { title: "Media Browser", components: ['MediaBrowser'], description: "A player's own library in the app's style: tap a folder to open it, a track or station to play it, or the play button on an album, playlist or artist for all of it. The search box appears when the library can be searched. The `theater` layout (second demo) is one row of large cards that scrolls sideways, for a wide space; `list` is the compact default. While a shelf loads, placeholders take the room the cards will (third demo, a shelf that never arrives), so nothing moves.", children: _jsxs(Flex, { direction: "column", gap: 6, children: [_jsx(Flex, { direction: "column", maxHeight: 420, overflow: "auto", children: _jsx(MediaBrowser, { entity: "ha:media_player.living_room" }) }), _jsx(MediaBrowser, { entity: "ha:media_player.living_room", layout: "theater" }), _jsx(MediaBrowser, { entity: "ha:media_player.loading", layout: "theater" })] }) }), _jsx(ComponentDoc, { title: "Navigation", components: ['NavRail', 'NavDock', 'Page'], description: "Routes within one dashboard. A dashboard includes one itself, usually in its layout route: NavRail is fixed to the left and NavDock floats at the bottom, and both reserve the space they take in the Page around them, which pads so content never sits under them.", children: _jsxs(Flex, { direction: "column", gap: 5, children: [_jsx(SubPreview, { label: "NavRail, in a Page", height: 240, children: _jsxs(Page, { height: "100%", children: [_jsx(NavRail, { base: "/gallery", items: NAV_ITEMS }), _jsx(Typography, { as: "p", variant: "body", color: "textMuted", children: "Page content, padded clear of the rail." })] }) }), _jsx(SubPreview, { label: "NavDock", height: 140, children: _jsx(NavDock, { base: "/gallery", items: NAV_ITEMS }) })] }) }), _jsx(ComponentDoc, { title: "Top Bar", components: ['TopBar'], description: "Page chrome above a dashboard's content: a title (a dropdown to switch dashboards, once there's more than one to switch to), scene shortcuts, weather (tap it for the forecast), presence, and a clock.", children: _jsx(TopBar, { title: "Living Room", dashboards: [
                                 { id: 'living-room', title: 'Living Room', icon: 'lu:sofa' },
                                 { id: 'bedroom', title: 'Bedroom', icon: 'lu:bed' },
                                 { id: 'bathroom', title: 'Bathroom', icon: 'tb:bath' },

package/dist/gallery/props-data.js

@@ -486,6 +486,12 @@ export const COMPONENT_PROPS = {
                 optional: true,
                 type: 'ReactNode',
             },
+            {
+                doc: '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.',
+                name: 'queue',
+                optional: true,
+                type: 'ReactNode',
+            },
             {
                 doc: 'Calls the player this instead of the name it reports.',
                 name: 'name',
@@ -523,6 +529,17 @@ export const COMPONENT_PROPS = {
             },
         ],
     },
+    MediaQueue: {
+        doc: "A player's queue: the tracks that have just played (dimmed), the one playing, and what comes next, as a list that scrolls. Tap a track to jump to it, the cross takes it out, and Clear takes out everything after the track that is playing, which carries on. What comes next can be put in another order by dragging a track by its handle (or with the arrow keys on the handle). Once the last track has played and the player has stopped, that track is shown as played, not as playing. It is made to sit beside the player in a wide space (see `MediaPlayerFull`'s `queue`).",
+        props: [
+            {
+                doc: 'The media player, as a ref like `ma:living_room`. Shows nothing for a player with no queue.',
+                name: 'entity',
+                optional: false,
+                type: 'EntityRef',
+            },
+        ],
+    },
     NavRail: {
         doc: "Fixed left sidebar for switching between a dashboard's pages. Must be rendered inside a router. It is `position: fixed` and reserves its width in the surrounding `Page`, which pads for it so content never sits under it.",
         props: [

package/dist/hooks.d.ts

@@ -11,6 +11,12 @@ export declare function useCommand(ref: EntityRef | undefined): CommandSender;
 export declare function useEntityHandle<K extends EntityKind>(kind: K, source: EntityRef | EntityHandle<K>): EntityHandle<K>;
 /** Connection between this browser and the runtime. */
 export declare function useConnectionStatus(): LinkStatus;
+/**
+ * How many times the connection to the runtime has opened. A hook that asked for something while it
+ * was down (and got an error) depends on this, so it asks again when the connection is back: a read
+ * that failed because the page was ahead of the connection, or because it dropped, is not final.
+ */
+export declare function useReconnects(): number;
 /** Status of the runtime's connection to a backend (`ha`, `ma`, ...). */
 export declare function useIntegrationStatus(integration: string): ConnectionStatus | undefined;
 /** Status of every backend integration the runtime reports, keyed by integration id. */

package/dist/hooks.js

@@ -1,4 +1,4 @@
-import { useCallback, useMemo, useSyncExternalStore } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState, useSyncExternalStore } from 'react';
 import { toHandle } from './entity-handle.js';
 import { useClient } from './provider.js';
 // Every `subscribe` handed to `useSyncExternalStore` below is memoized: React resubscribes whenever
@@ -33,6 +33,23 @@ export function useConnectionStatus() {
     const subscribe = useCallback((onChange) => client.onLinkChange(onChange), [client]);
     return useSyncExternalStore(subscribe, () => client.link, () => 'closed');
 }
+/**
+ * How many times the connection to the runtime has opened. A hook that asked for something while it
+ * was down (and got an error) depends on this, so it asks again when the connection is back: a read
+ * that failed because the page was ahead of the connection, or because it dropped, is not final.
+ */
+export function useReconnects() {
+    const link = useConnectionStatus();
+    const [opened, setOpened] = useState(0);
+    const was = useRef(link);
+    useEffect(() => {
+        if (link === 'open' && was.current !== 'open') {
+            setOpened((count) => count + 1);
+        }
+        was.current = link;
+    }, [link]);
+    return opened;
+}
 /** Status of the runtime's connection to a backend (`ha`, `ma`, ...). */
 export function useIntegrationStatus(integration) {
     const client = useClient();

package/dist/index.d.ts

@@ -25,6 +25,7 @@ export * from './entities/media-player-column.tsx';
 export * from './entities/media-player-full.tsx';
 export * from './entities/weather-forecast.tsx';
 export * from './entities/media-browser.tsx';
+export * from './entities/media-queue.tsx';
 export { formatDuration } from './entities/media-progress.ts';
 export * from './entities/nav-rail.tsx';
 export * from './entities/nav-dock.tsx';

package/dist/index.js

@@ -19,6 +19,7 @@ export * from './entities/media-player-column.js';
 export * from './entities/media-player-full.js';
 export * from './entities/weather-forecast.js';
 export * from './entities/media-browser.js';
+export * from './entities/media-queue.js';
 export { formatDuration } from './entities/media-progress.js';
 export * from './entities/nav-rail.js';
 export * from './entities/nav-dock.js';

package/dist/layout/drawer-controls.d.ts

@@ -31,6 +31,8 @@ export declare function PowerButton({ on, onToggle }: {
     on: boolean;
     onToggle: () => void;
 }): import("@emotion/react/jsx-runtime").JSX.Element;
+/** The height of every chip, whatever its label holds. */
+export declare const CHIP_HEIGHT = 28;
 /** A wrapping row of pill choices (modes, presets) with the selected one filled. With `tabs` it is
  * a tab list (the selected chip is the open tab) that never wraps: too many to fit scroll sideways. */
 export declare function ChipRow({ options, value, onChange, tabs, }: {

package/dist/layout/drawer-controls.js

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 /** @jsxImportSource @emotion/react */
 import { Box, Flex, Typography } from 'e-prim';
 import { motion } from 'motion/react';
+import { MarqueeText } from './marquee-text.js';
 import { useEffect, useRef } from 'react';
 import { Icon } from '../icon.js';
 import { FadeScroll } from './fade-scroll.js';
@@ -79,6 +80,8 @@ export function ValueBar({ label, value, min, max, keyStep, round = 1, gradient,
 export function PowerButton({ on, onToggle }) {
     return (_jsx(Flex, { as: "button", type: "button", "aria-pressed": on, "aria-label": on ? 'Turn off' : 'Turn on', title: on ? 'Turn off' : 'Turn on', onClick: onToggle, align: "center", justify: "center", radius: "full", cursor: "pointer", width: 36, height: 36, p: 0, background: on ? 'accent' : 'surface', color: on ? 'accentText' : 'line', css: { flex: 'none', transition: 'background-color 0.2s ease, color 0.2s ease' }, children: _jsx(Icon, { name: "lu:power", size: 16 }) }));
 }
+/** The height of every chip, whatever its label holds. */
+export const CHIP_HEIGHT = 28;
 /** A wrapping row of pill choices (modes, presets) with the selected one filled. With `tabs` it is
  * a tab list (the selected chip is the open tab) that never wraps: too many to fit scroll sideways. */
 export function ChipRow({ options, value, onChange, tabs = false, }) {
@@ -88,6 +91,13 @@ export function ChipRow({ options, value, onChange, tabs = false, }) {
             ? { flexShrink: 0, scrollbarWidth: 'none', '&::-webkit-scrollbar': { display: 'none' } }
             : { flexWrap: 'wrap' }, children: options.map((option) => {
             const selected = option.value === value;
-            return (_jsxs(Flex, { as: "button", type: "button", ...(tabs ? { role: 'tab', 'aria-selected': selected } : { 'aria-pressed': selected }), ...(option.ariaLabel ? { 'aria-label': option.ariaLabel } : {}), onClick: () => onChange(option.value), align: "center", gap: 1.5, radius: "full", cursor: "pointer", py: 1.5, px: 3, background: selected ? 'accent' : 'surface', color: selected ? 'accentText' : 'text', css: { flex: 'none', whiteSpace: 'nowrap' }, children: [option.icon ? _jsx(Icon, { name: option.icon, size: 14 }) : null, _jsx(Typography, { as: "span", variant: "body", noWrap: true, textOverflow: "ellipsis", css: { maxWidth: 220 }, children: option.label })] }, option.value));
+            return (_jsxs(Flex, { as: "button", type: "button", ...(tabs ? { role: 'tab', 'aria-selected': selected } : { 'aria-pressed': selected }), ...(option.ariaLabel ? { 'aria-label': option.ariaLabel } : {}), onClick: () => onChange(option.value), align: "center", gap: 1.5, radius: "full", cursor: "pointer", 
+                // A fixed height, not the text's: an emoji is drawn from another font with a taller line,
+                // which would make this one chip taller than the rest.
+                height: CHIP_HEIGHT, px: 3, background: selected ? 'accent' : 'surface', color: selected ? 'accentText' : 'text', css: {
+                    flex: 'none',
+                    whiteSpace: 'nowrap',
+                    transition: 'background-color 160ms ease, color 160ms ease',
+                }, children: [option.icon ? _jsx(Icon, { name: option.icon, size: 14 }) : null, _jsx(Typography, { as: "span", variant: "body", css: { minWidth: 0, maxWidth: 220 }, children: _jsx(MarqueeText, { children: option.label }) })] }, option.value));
         }) }));
 }

package/dist/layout/marquee-text.d.ts

@@ -0,0 +1,11 @@
+import { type ReactNode } from 'react';
+/**
+ * One line of text that fits the width it is given: when it is too long it rolls sideways, resting at
+ * each end, so all of it can be read; when it fits it just sits there. Whoever it is in decides the
+ * width (a `max-width` on it or on a parent), so a long title can never push its tile out of shape,
+ * whatever it holds (an emoji at the end included). Where the person asks their device for less
+ * motion it stays still and ends in an ellipsis.
+ */
+export declare function MarqueeText({ children }: {
+    children: ReactNode;
+}): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/layout/marquee-text.js

@@ -0,0 +1,67 @@
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+/** @jsxImportSource @emotion/react */
+import { motion, useReducedMotion } from 'motion/react';
+import { useEffect, useRef, useState } from 'react';
+/** How fast the text rolls, in px a second. */
+const SPEED = 36;
+/** How long it waits at each end, in seconds. */
+const PAUSE = 1.4;
+/**
+ * One line of text that fits the width it is given: when it is too long it rolls sideways, resting at
+ * each end, so all of it can be read; when it fits it just sits there. Whoever it is in decides the
+ * width (a `max-width` on it or on a parent), so a long title can never push its tile out of shape,
+ * whatever it holds (an emoji at the end included). Where the person asks their device for less
+ * motion it stays still and ends in an ellipsis.
+ */
+export function MarqueeText({ children }) {
+    const outer = useRef(null);
+    const inner = useRef(null);
+    const [overflow, setOverflow] = useState(0);
+    const still = useReducedMotion();
+    useEffect(() => {
+        const frame = outer.current;
+        const text = inner.current;
+        if (!frame || !text) {
+            return;
+        }
+        const measure = () => setOverflow(Math.max(0, Math.ceil(text.scrollWidth - frame.clientWidth)));
+        measure();
+        if (typeof ResizeObserver === 'undefined') {
+            return;
+        }
+        // The frame changes with the room it has; the text with what it says.
+        const watch = new ResizeObserver(measure);
+        watch.observe(frame);
+        watch.observe(text);
+        return () => watch.disconnect();
+    }, []);
+    const rolling = overflow > 0 && !still;
+    const seconds = overflow / SPEED;
+    return (_jsx("span", { ref: outer, css: {
+            display: 'block',
+            // A line height of its own, not the font's: an emoji comes from another font with a taller
+            // line, and would make a row with one in its title taller than the rest.
+            lineHeight: 1.3,
+            minWidth: 0,
+            maxWidth: '100%',
+            overflow: 'hidden',
+            whiteSpace: 'nowrap',
+            textOverflow: rolling ? 'clip' : 'ellipsis',
+        }, children: _jsx(motion.span, { ref: inner, css: { display: 'inline-block' }, ...(rolling
+                ? {
+                    animate: { x: [0, 0, -overflow, -overflow, 0] },
+                    transition: {
+                        duration: 2 * seconds + 2 * PAUSE,
+                        times: [
+                            0,
+                            PAUSE / (2 * seconds + 2 * PAUSE),
+                            (PAUSE + seconds) / (2 * seconds + 2 * PAUSE),
+                            (2 * PAUSE + seconds) / (2 * seconds + 2 * PAUSE),
+                            1,
+                        ],
+                        ease: 'linear',
+                        repeat: Infinity,
+                    },
+                }
+                : {}), children: children }) }));
+}

package/dist/layout/reveal.d.ts

@@ -0,0 +1,11 @@
+import type { ReactNode } from 'react';
+/**
+ * Fades its content in as it appears, rising a few pixels, a little later for each one after the
+ * first (the first handful only, so a long list does not take long to arrive). It only moves what is
+ * drawn inside it, never the room it takes, so nothing around it shifts. Where the person asks their
+ * device for less motion it just appears.
+ */
+export declare function Reveal({ index, children }: {
+    index?: number;
+    children: ReactNode;
+}): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/layout/reveal.js

@@ -0,0 +1,19 @@
+import { Fragment as _Fragment, jsx as _jsx } from "@emotion/react/jsx-runtime";
+/** @jsxImportSource @emotion/react */
+import { motion, useReducedMotion } from 'motion/react';
+/** How much later each following item starts, in seconds, and how many are staggered at all. */
+const STAGGER = 0.03;
+const STAGGERED = 8;
+/**
+ * Fades its content in as it appears, rising a few pixels, a little later for each one after the
+ * first (the first handful only, so a long list does not take long to arrive). It only moves what is
+ * drawn inside it, never the room it takes, so nothing around it shifts. Where the person asks their
+ * device for less motion it just appears.
+ */
+export function Reveal({ index = 0, children }) {
+    const still = useReducedMotion();
+    if (still) {
+        return _jsx(_Fragment, { children: children });
+    }
+    return (_jsx(motion.div, { initial: { opacity: 0, y: 8 }, animate: { opacity: 1, y: 0 }, transition: { duration: 0.22, ease: 'easeOut', delay: Math.min(index, STAGGERED) * STAGGER }, children: children }));
+}

package/dist/layout/series-chart.js

@@ -1,5 +1,4 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-/** @jsxImportSource @emotion/react */
 import { Box, Flex, Typography, useColorByKey } from 'e-prim';
 import { useTypographySize } from '../theme/use-typography.js';
 import { Area, AreaChart, CartesianGrid, ResponsiveContainer, Tooltip, XAxis, YAxis, } from 'recharts';
@@ -13,13 +12,19 @@ export function formatTick(range, iso) {
     }
     return date.toLocaleDateString([], { month: 'short', day: 'numeric' });
 }
+/** The grid's dashed lines, but not one along the chart's bottom edge: that is the solid axis line. */
+const dashedExceptBottom = (stroke) => ({ x1, x2, y1, offset, }) => y1 >= offset.top + offset.height - 1 ? (_jsx("g", {})) : (_jsx("line", { x1: x1, x2: x2, y1: y1, y2: y1, stroke: stroke, strokeOpacity: 0.3, strokeDasharray: "3 3" }));
 /** A bare sparkline, or — when `expanded` — the full chart with axes, grid and a tooltip. Shared by the power and sensor drawers. */
 export function SeriesChart({ samples, range, expanded, unit, fitDomain = false, height, }) {
     const accent = useColorByKey('accent') ?? '';
     const textMuted = useColorByKey('textMuted') ?? '';
     const line = useColorByKey('line') ?? '';
     const tickSize = useTypographySize('secondary');
-    return (_jsx(Box, { height: height ?? (expanded ? 220 : 48), mt: 3, children: _jsx(ResponsiveContainer, { width: "100%", height: "100%", children: _jsxs(AreaChart, { data: samples, margin: { top: 4, right: 0, bottom: 0, left: 0 }, children: [expanded ? _jsx(CartesianGrid, { stroke: line, strokeDasharray: "3 3", vertical: false }) : null, expanded ? (_jsx(XAxis, { dataKey: "timestamp", tickFormatter: (value) => formatTick(range, value), tick: { fontSize: tickSize, fill: textMuted }, axisLine: false, tickLine: false, minTickGap: 24 })) : null, expanded ? (_jsx(YAxis, { width: 36, ...(fitDomain ? { domain: ['auto', 'auto'] } : {}), tick: { fontSize: tickSize, fill: textMuted }, axisLine: false, tickLine: false })) : null, _jsx(Tooltip, { content: _jsx(ChartTooltip, { unit: unit }), ...(expanded
+    return (_jsx(Box, { height: height ?? (expanded ? 220 : 48), mt: 3, children: _jsx(ResponsiveContainer, { width: "100%", height: "100%", children: _jsxs(AreaChart, { data: samples, margin: { top: 4, right: 0, bottom: 0, left: 0 }, children: [expanded ? (_jsx(CartesianGrid, { stroke: line, strokeOpacity: 0.3, strokeDasharray: "3 3", vertical: false, 
+                        // The chart's bottom edge is the solid axis line, so no dashed line goes under it.
+                        horizontal: dashedExceptBottom(line) })) : null, expanded ? (_jsx(XAxis, { dataKey: "timestamp", tickFormatter: (value) => formatTick(range, value), tick: { fontSize: tickSize, fill: textMuted }, 
+                        // The bottom of the chart is a solid line; the grid above it is dashed and lighter.
+                        axisLine: { stroke: line, strokeOpacity: 0.5, strokeWidth: 0.5 }, tickLine: false, minTickGap: 24 })) : null, expanded ? (_jsx(YAxis, { width: 36, ...(fitDomain ? { domain: ['auto', 'auto'] } : {}), tick: { fontSize: tickSize, fill: textMuted }, axisLine: false, tickLine: false })) : null, _jsx(Tooltip, { content: _jsx(ChartTooltip, { unit: unit }), ...(expanded
                             ? {}
                             : { allowEscapeViewBox: { x: false, y: true }, position: { y: -52 } }) }), _jsx(Area, { type: "monotone", dataKey: "value", stroke: accent, fill: accent, fillOpacity: 0.2, strokeWidth: 2, dot: false, isAnimationActive: false })] }) }) }));
 }

package/dist/layout/skeleton.d.ts

@@ -0,0 +1,11 @@
+/** @jsxImportSource @emotion/react */
+import { type BoxProps } from 'e-prim';
+/** A placeholder block for something that is on its way, in the size it will have, so what is around
+ * it does not move when the real thing arrives. It pulses gently, and holds still where the person
+ * asks their device for less motion. Decorative: say what is loading around it, with `aria-busy`. */
+export declare function Skeleton({ width, height, radius, }: {
+    /** px, or any CSS length. */
+    width: number | string;
+    height: number | string;
+    radius?: BoxProps['radius'];
+}): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/layout/skeleton.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+/** @jsxImportSource @emotion/react */
+import { Box } from 'e-prim';
+import { motion, useReducedMotion } from 'motion/react';
+/** A placeholder block for something that is on its way, in the size it will have, so what is around
+ * it does not move when the real thing arrives. It pulses gently, and holds still where the person
+ * asks their device for less motion. Decorative: say what is loading around it, with `aria-busy`. */
+export function Skeleton({ width, height, radius = 'small', }) {
+    const still = useReducedMotion();
+    return (_jsx(Box, { "aria-hidden": "true", background: "surfaceRaised", radius: radius, css: { width, height, flex: 'none', overflow: 'hidden' }, children: _jsx(motion.span, { css: { display: 'block', width: '100%', height: '100%', background: 'currentColor' }, initial: { opacity: 0.1 }, ...(still
+                ? {}
+                : {
+                    animate: { opacity: [0.04, 0.14, 0.04] },
+                    transition: { duration: 1.4, repeat: Infinity, ease: 'easeInOut' },
+                }) }) }));
+}

package/dist/use-entity-history.js

@@ -1,4 +1,5 @@
 import { useEffect, useState } from 'react';
+import { useReconnects } from './hooks.js';
 import { useClient } from './provider.js';
 /** How long an answer is reused: opening a drawer twice, or switching a range back, does not ask again. */
 const FRESH_MS = 60_000;
@@ -24,6 +25,7 @@ function load(client, ref, query) {
  */
 export function useEntityHistory(ref, query) {
     const client = useClient();
+    const reconnects = useReconnects();
     const range = query?.range;
     const bucket = query?.bucket;
     const [state, setState] = useState();
@@ -37,7 +39,9 @@ export function useEntityHistory(ref, query) {
         return () => {
             current = false;
         };
-    }, [client, ref, range, bucket, key]);
+        // `reconnects` is not read inside: the connection coming back is the reason to ask again.
+        // oxlint-disable-next-line react/exhaustive-effect-dependencies
+    }, [client, ref, range, bucket, key, reconnects]);
     const answered = state !== undefined && state.key === key;
     return { result: answered ? state.result : undefined, loading: key !== undefined && !answered };
 }

package/dist/use-entity-logbook.js

@@ -1,4 +1,5 @@
 import { useEffect, useState } from 'react';
+import { useReconnects } from './hooks.js';
 import { useClient } from './provider.js';
 /** How long an answer is reused: closing and reopening a drawer does not ask again. */
 const FRESH_MS = 30_000;
@@ -26,6 +27,7 @@ function load(client, ref) {
  */
 export function useEntityLogbook(ref) {
     const client = useClient();
+    const reconnects = useReconnects();
     const [state, setState] = useState();
     useEffect(() => {
         if (!ref) {
@@ -36,7 +38,9 @@ export function useEntityLogbook(ref) {
         return () => {
             current = false;
         };
-    }, [client, ref]);
+        // `reconnects` is not read inside: the connection coming back is the reason to ask again.
+        // oxlint-disable-next-line react/exhaustive-effect-dependencies
+    }, [client, ref, reconnects]);
     const answered = state !== undefined && state.ref === ref;
     return { entries: answered ? state.entries : undefined, loading: ref !== undefined && !answered };
 }

package/dist/use-media-browser.d.ts

@@ -2,6 +2,8 @@ import type { BrowseItem, EntityRef } from '@hashsome/core';
 export interface MediaBrowserState {
     /** What is listed now. */
     items: BrowseItem[];
+    /** Which list that is: it changes when another one is shown (another tab, an album opened, a search), so a view can tell the same list updating from a new one arriving. */
+    listKey: string;
     /** A name for the list: the opened folder's, or what was searched for. Absent on a tab. */
     title: string | undefined;
     loading: boolean;
@@ -14,6 +16,8 @@ export interface MediaBrowserState {
     activeTab: string | undefined;
     /** Goes to a shelf: leaves whatever was open inside one, and any search. */
     selectTab(id: string): void;
+    /** The album, playlist or artist that is open: what a "play all" would play, and what the tracks in the list belong to. Absent at the top, on a shelf and in search results. */
+    inside: BrowseItem | undefined;
     /** Opened a folder (or searching), so there is somewhere to go back to. */
     canGoBack: boolean;
     searching: boolean;

package/dist/use-media-browser.js

@@ -1,4 +1,5 @@
 import { useCallback, useEffect, useState } from 'react';
+import { useReconnects } from './hooks.js';
 import { useClient } from './provider.js';
 /** A top level that is nothing but folders to look inside is a set of shelves, which read better
  * as tabs than as a list that always looks the same. */
@@ -10,6 +11,8 @@ const messageOf = (error) => (error instanceof Error ? error.message : String(er
  * the browser was. */
 export function useMediaBrowser(ref) {
     const client = useClient();
+    // A level that could not be read because the connection was not there is asked for again when it is.
+    const reconnects = useReconnects();
     const [trail, setTrail] = useState([{}]);
     const [text, setText] = useState('');
     const [tab, setTab] = useState();
@@ -22,7 +25,9 @@ export function useMediaBrowser(ref) {
         return () => {
             current = false;
         };
-    }, [client, ref]);
+        // `reconnects` is not read inside: the connection coming back is the reason to ask again.
+        // oxlint-disable-next-line react/exhaustive-effect-dependencies
+    }, [client, ref, reconnects]);
     const needle = text.trim();
     const searching = needle !== '';
     const here = trail.at(-1) ?? {};
@@ -49,8 +54,9 @@ export function useMediaBrowser(ref) {
             current = false;
             clearTimeout(timer);
         };
-    }, [client, ref, key, searching, needle, path]);
-    const open = useCallback((item) => setTrail((levels) => [...levels, { path: item.id, title: item.title }]), []);
+        // oxlint-disable-next-line react/exhaustive-effect-dependencies
+    }, [client, ref, key, searching, needle, path, reconnects]);
+    const open = useCallback((item) => setTrail((levels) => [...levels, { path: item.id, title: item.title, item }]), []);
     const selectTab = useCallback((id) => {
         setTab(id);
         setText('');
@@ -67,6 +73,7 @@ export function useMediaBrowser(ref) {
     const listing = !searching && atTop && !tabs ? top : result;
     return {
         items: listing?.items ?? [],
+        listKey: searching ? 'search' : `path:${path ?? 'top'}`,
         title: searching
             ? (result?.title ?? `Results for “${needle}”`)
             : atTop
@@ -77,6 +84,7 @@ export function useMediaBrowser(ref) {
         tabs,
         activeTab: searching ? undefined : selected,
         selectTab,
+        inside: searching || atTop ? undefined : here.item,
         canGoBack: searching || !atTop,
         searching,
         open,

package/dist/use-media-queue.d.ts

@@ -0,0 +1,15 @@
+import type { EntityRef, QueueResult } from '@hashsome/core';
+export interface MediaQueueState {
+    /** `undefined` until the first answer, and always for a player with no queue. */
+    queue: QueueResult | undefined;
+    loading: boolean;
+    /** Reads the queue again, e.g. after something was added to it or taken out. */
+    refresh(): void;
+}
+/**
+ * A player's queue, read when `ref` changes and again whenever the track that plays changes (the
+ * window of the queue moves with it), after `refresh()`, and every so often. A player with no queue,
+ * or an error, leaves `queue` undefined: the queue is an extra, so a component just shows nothing.
+ * Pass `undefined` to not ask at all.
+ */
+export declare function useMediaQueue(ref: EntityRef | undefined): MediaQueueState;

package/dist/use-media-queue.js

@@ -0,0 +1,44 @@
+import { useCallback, useEffect, useState } from 'react';
+import { useEntity, useReconnects } from './hooks.js';
+import { useClient } from './provider.js';
+/** How often the queue is read again while it is on screen, to pick up what another app changed. */
+const POLL_MS = 15_000;
+/**
+ * A player's queue, read when `ref` changes and again whenever the track that plays changes (the
+ * window of the queue moves with it), after `refresh()`, and every so often. A player with no queue,
+ * or an error, leaves `queue` undefined: the queue is an extra, so a component just shows nothing.
+ * Pass `undefined` to not ask at all.
+ */
+export function useMediaQueue(ref) {
+    const client = useClient();
+    const player = useEntity(ref);
+    const [state, setState] = useState();
+    const [tick, setTick] = useState(0);
+    const reconnects = useReconnects();
+    const refresh = useCallback(() => setTick((now) => now + 1), []);
+    // What changes when the queue's window does: the track playing and the order it plays in.
+    const track = player?.kind === 'mediaPlayer' ? player.media?.title : undefined;
+    const shuffle = player?.kind === 'mediaPlayer' ? player.shuffle : undefined;
+    const has = player?.kind === 'mediaPlayer' && player.capabilities.queue;
+    useEffect(() => {
+        if (!ref || !has) {
+            return;
+        }
+        let current = true;
+        const read = () => client.queue(ref, {}).then((queue) => current && setState({ ref, queue }), () => current && setState({ ref, queue: undefined }));
+        void read();
+        const timer = setInterval(() => void read(), POLL_MS);
+        return () => {
+            current = false;
+            clearInterval(timer);
+        };
+        // `track`, `shuffle`, `tick` and `reconnects` are not read inside: a change to any of them is the reason to read again.
+        // oxlint-disable-next-line react/exhaustive-effect-dependencies
+    }, [client, ref, has, track, shuffle, tick, reconnects]);
+    const answered = state !== undefined && state.ref === ref;
+    return {
+        queue: answered ? state.queue : undefined,
+        loading: ref !== undefined && has === true && !answered,
+        refresh,
+    };
+}

package/dist/use-weather-forecast.js

@@ -1,4 +1,5 @@
 import { useEffect, useState } from 'react';
+import { useReconnects } from './hooks.js';
 import { useClient } from './provider.js';
 /** How long an answer is reused: a forecast changes every half hour or so at most. */
 const FRESH_MS = 10 * 60_000;
@@ -24,6 +25,7 @@ function load(client, ref, type) {
  */
 export function useWeatherForecast(ref, type) {
     const client = useClient();
+    const reconnects = useReconnects();
     const [state, setState] = useState();
     const key = ref ? `${ref}|${type}` : undefined;
     useEffect(() => {
@@ -35,7 +37,9 @@ export function useWeatherForecast(ref, type) {
         return () => {
             current = false;
         };
-    }, [client, ref, type, key]);
+        // `reconnects` is not read inside: the connection coming back is the reason to ask again.
+        // oxlint-disable-next-line react/exhaustive-effect-dependencies
+    }, [client, ref, type, key, reconnects]);
     const answered = state !== undefined && state.key === key;
     return { result: answered ? state.result : undefined, loading: key !== undefined && !answered };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hashsome/ui",
-  "version": "0.2.0",
+  "version": "0.4.0",
   "description": "Design system components and hooks",
   "type": "module",
   "exports": {
@@ -16,7 +16,7 @@
   },
   "dependencies": {
     "@emotion/react": "11.14.0",
-    "@hashsome/core": "0.2.0",
+    "@hashsome/core": "0.4.0",
     "e-prim": "2.0.1",
     "motion": "13.4.5",
     "react": "19.3.0",