@hashsome/ui 0.3.0 → 0.5.0

package/dist/gallery/gallery.js

@@ -3,11 +3,13 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "@emotion/reac
 import { Flex, Typography } from 'e-prim';
 import { LocalClient } from '@hashsome/core';
 import { useEffect, useMemo, useState } from 'react';
+import { NavLink, Route, Routes } from 'react-router';
 import { ActionButton } from '../entities/action-button.js';
 import { ClimateTile } from '../entities/climate-tile.js';
 import { LightTile } from '../entities/light-tile.js';
 import { MediaBrowser } from '../entities/media-browser.js';
 import { MediaPlayerBar } from '../entities/media-player-bar.js';
+import { AnimatedOutlet } from '../layout/animated-outlet.js';
 import { MediaPlayerColumn } from '../entities/media-player-column.js';
 import { MediaPlayerFull } from '../entities/media-player-full.js';
 import { MediaQueue } from '../entities/media-queue.js';
@@ -17,7 +19,7 @@ import { NavRail } from '../entities/nav-rail.js';
 import { Page } from '../layout/page.js';
 import { SceneButton } from '../entities/scene-button.js';
 import { SensorReadout } from '../entities/sensor-readout.js';
-import { PresenceStack, SystemStatus, TopBar } from '../entities/top-bar.js';
+import { Clock, DateChip, PresenceStack, SystemStatus, TopBar, WeatherChip, } from '../entities/top-bar.js';
 import { Icon } from '../icon.js';
 import { EnergyChart, } from '../layout/energy-chart.js';
 import { Grid } from '../layout/grid.js';
@@ -79,6 +81,17 @@ function TileFillDemo() {
  * chrome). `NavDock` is `position: fixed`, which a plain wrapper can't contain — `transform` on
  * an ancestor makes it establish a containing block for fixed-position descendants instead (a
  * standard CSS escape hatch), confining it to this box instead of the real viewport. */
+const DEMO_PAGES = [
+    { to: '', label: 'Lights', icon: 'lu:lightbulb' },
+    { to: 'climate', label: 'Climate', icon: 'lu:thermometer' },
+    { to: 'music', label: 'Music', icon: 'lu:music' },
+];
+const DEMO_BASE = '/gallery/transition';
+/** Three pages under a route of the gallery's own router, with links to go between them: later ones
+ * slide in from the right. Until the address is under the demo's route there is a link to start it. */
+function AnimatedOutletDemo() {
+    return (_jsx(Flex, { direction: "column", gap: 3, height: 140, p: 3, children: _jsxs(Routes, { children: [_jsx(Route, { path: DEMO_BASE, element: _jsxs(_Fragment, { children: [_jsx(Flex, { gap: 2, children: DEMO_PAGES.map((page) => (_jsx(NavLink, { to: page.to ? `${DEMO_BASE}/${page.to}` : DEMO_BASE, end: true, children: ({ isActive }) => (_jsx(Flex, { as: "span", align: "center", px: 3, height: 32, radius: "full", background: isActive ? 'accent' : 'surfaceRaised', color: isActive ? 'accentText' : 'text', children: _jsx(Typography, { as: "span", variant: "label", children: page.label }) })) }, page.to))) }), _jsx(AnimatedOutlet, { items: [...DEMO_PAGES], base: DEMO_BASE })] }), children: DEMO_PAGES.map((page) => (_jsx(Route, { ...(page.to ? { path: page.to } : { index: true }), element: _jsx(Flex, { center: true, grow: 1, background: "surfaceRaised", radius: "row", children: _jsx(Typography, { as: "span", variant: "heading", children: page.label }) }) }, page.to))) }), _jsx(Route, { path: "*", element: _jsx(Flex, { center: true, grow: 1, children: _jsx(NavLink, { to: DEMO_BASE, children: "Try the transition" }) }) })] }) }));
+}
 function SubPreview({ label, height, children, }) {
     return (_jsxs(Flex, { direction: "column", gap: 2, children: [_jsx(Typography, { as: "span", variant: "eyebrow", uppercase: true, color: "textMuted", children: label }), _jsx(Flex, { position: "relative", overflow: "hidden", radius: "row", border: true, height: height, css: { transform: 'translateZ(0)' }, children: children })] }));
 }
@@ -349,9 +362,9 @@ 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', '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: [
+                                        }) }), _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. In a space narrower than 560px, or with `rows={2}`, the controls move to a second row under the track.", children: _jsxs(Flex, { direction: "column", gap: 3, children: [_jsx(MediaPlayerBar, { entity: "ha:media_player.living_room" }), _jsx(MediaPlayerBar, { entity: "ha:media_player.off" }), _jsx(Flex, { width: 380, children: _jsx(MediaPlayerBar, { entity: "ha:media_player.living_room", rows: 2 }) })] }) }), _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: "Animated Outlet", components: ['AnimatedOutlet'], description: "A dashboard layout's `Outlet` with a transition between its pages: the page that was showing fades out, then the new one fades in, sliding from the side it sits on in the nav (a later page from the right, an earlier one from the left) when you give it the nav's `items`. Without them the pages only fade. It does nothing for a visitor who prefers reduced motion. Try the links.", children: _jsx(AnimatedOutletDemo, {}) }), _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' },
-                            ], scenes: [{ entity: 'ha:scene.tv_time', icon: 'lu:tv' }], weather: "ha:weather.home", people: ['ha:person.dan', 'ha:person.alex'] }) }), _jsx(ComponentDoc, { title: "Presence Stack", components: ['PresenceStack'], description: "Overlapping avatar circles for a handful of person entities (the Top Bar's presence), each with a picture or a colored initial.", children: _jsx(PresenceStack, { entities: ['ha:person.dan', 'ha:person.alex'] }) }), _jsx(ComponentDoc, { title: "System Status", components: ['SystemStatus'], description: "The dot at the top bar's right edge. Green when the runtime and every integration are up, amber while something is connecting, red when something is down; click it for per-system detail. Shown here open, in each state.", children: _jsxs(Flex, { gap: 6, px: 6, align: "flex-start", justify: "space-around", minHeight: 32, children: [_jsx(SystemStatus, { defaultOpen: true, link: "open", statuses: { ha: 'connected', ma: 'connected' } }), _jsx(SystemStatus, { defaultOpen: true, link: "open", statuses: { ha: 'connected', ma: 'connecting' } }), _jsx(SystemStatus, { defaultOpen: true, link: "open", statuses: { ha: 'error', ma: 'disconnected' } })] }) }), _jsx(ComponentDoc, { title: "Hashsome Provider", description: "The app provider: connects to the runtime, installs the theme, font and density globally, and renders the shared detail drawer. Everything on this page runs inside one \u2014 use the toggle above to flip its theme.", components: ['HashsomeProvider'], children: _jsx(Typography, { as: "span", variant: "body", color: "textMuted", children: `theme="${mode}" · density="${density}"` }) })] }) }) }));
+                            ], scenes: [{ entity: 'ha:scene.tv_time', icon: 'lu:tv' }], weather: "ha:weather.home", people: ['ha:person.dan', 'ha:person.alex'] }) }), _jsx(ComponentDoc, { title: "Header pieces", components: ['DateChip', 'WeatherChip', 'Clock'], description: "The top bar's date, weather and clock, on their own: for a dashboard that builds its own header (a small room display, say) without the title, switcher and scenes of a whole TopBar. Put them in a row with SystemStatus, PresenceStack or anything else.", children: _jsxs(Flex, { align: "center", gap: 3, px: 4, children: [_jsx(DateChip, {}), _jsx(WeatherChip, { entity: "ha:weather.home" }), _jsx(Clock, { format: "24h" })] }) }), _jsx(ComponentDoc, { title: "Presence Stack", components: ['PresenceStack'], description: "Overlapping avatar circles for a handful of person entities (the Top Bar's presence), each with a picture or a colored initial.", children: _jsx(PresenceStack, { entities: ['ha:person.dan', 'ha:person.alex'] }) }), _jsx(ComponentDoc, { title: "System Status", components: ['SystemStatus'], description: "The dot at the top bar's right edge. Green when the runtime and every integration are up, amber while something is connecting, red when something is down; click it for per-system detail. Shown here open, in each state.", children: _jsxs(Flex, { gap: 6, px: 6, align: "flex-start", justify: "space-around", minHeight: 32, children: [_jsx(SystemStatus, { defaultOpen: true, link: "open", statuses: { ha: 'connected', ma: 'connected' } }), _jsx(SystemStatus, { defaultOpen: true, link: "open", statuses: { ha: 'connected', ma: 'connecting' } }), _jsx(SystemStatus, { defaultOpen: true, link: "open", statuses: { ha: 'error', ma: 'disconnected' } })] }) }), _jsx(ComponentDoc, { title: "Hashsome Provider", description: "The app provider: connects to the runtime, installs the theme, font and density globally, and renders the shared detail drawer. Everything on this page runs inside one \u2014 use the toggle above to flip its theme.", components: ['HashsomeProvider'], children: _jsx(Typography, { as: "span", variant: "body", color: "textMuted", children: `theme="${mode}" · density="${density}"` }) })] }) }) }));
 }

package/dist/gallery/props-data.js

@@ -35,6 +35,23 @@ export const COMPONENT_PROPS = {
             },
         ],
     },
+    AnimatedOutlet: {
+        doc: "A dashboard layout's `<Outlet />` with a transition between its pages: the page that was showing fades out (sliding a little toward the side it was on), then the new one fades in from the side it is on. It is a drop-in for `Outlet` in a layout route, and does nothing the first time a page shows or for a visitor who prefers reduced motion.",
+        props: [
+            {
+                doc: "The dashboard's pages in the order its nav lists them (the same `items` as `NavRail` or `NavDock`). A page then slides in from the side it sits on: a later page from the right, an earlier one from the left. Left out, pages only fade.",
+                name: 'items',
+                optional: true,
+                type: 'NavItem[]',
+            },
+            {
+                doc: 'The path `items` are relative to, e.g. `/bathroom`. Needed with `items`.',
+                name: 'base',
+                optional: true,
+                type: 'string',
+            },
+        ],
+    },
     RoomHeader: {
         doc: 'The header that starts a room: muted icon and title, a hairline, and readouts on the right. Put it above a `Grid` (or any tiles); it adds its own space above, so consecutive rooms read as groups.',
         props: [
@@ -283,6 +300,12 @@ export const COMPONENT_PROPS = {
                 optional: true,
                 type: 'LightColorPreset[]',
             },
+            {
+                doc: 'Holding the tile opens a drawer with the full controls, the color bars, the energy chart and the recent activity. `false` leaves the tile as it is without it: a toggle that dims by dragging, with the color swatches if the light has color, and no drawer built, which is lighter on a small display. Default `true`.',
+                name: 'drawer',
+                optional: true,
+                type: 'boolean',
+            },
         ],
     },
     ClimateTile: {
@@ -446,6 +469,30 @@ export const COMPONENT_PROPS = {
                 optional: true,
                 type: 'ReactNode | false',
             },
+            {
+                doc: '`false` builds no drawer: holding the card, pressing the artwork and the browse button then do nothing, which is lighter on a small display. Default `true`. See `onOpen` to send them somewhere else instead.',
+                name: 'drawer',
+                optional: true,
+                type: 'boolean',
+            },
+            {
+                doc: "Called instead of opening the drawer when the card is held, the artwork pressed or the browse button pressed: for a dashboard with a page of its own for the player (a `MediaPlayerFull`), `onOpen={() => navigate('/bathroom/music')}`. Given, no drawer is built. The browse button stays unless `browse` is `false`.",
+                name: 'onOpen',
+                optional: true,
+                type: '() => void',
+            },
+            {
+                doc: '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`.',
+                name: 'overlays',
+                optional: true,
+                type: 'boolean',
+            },
+            {
+                doc: "`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.",
+                name: 'rows',
+                optional: true,
+                type: "1 | 2 | 'auto'",
+            },
         ],
     },
     MediaPlayerColumn: {
@@ -686,6 +733,23 @@ export const COMPONENT_PROPS = {
             },
         ],
     },
+    WeatherChip: {
+        doc: "Current weather, as a pill: an icon for the sky and a rounded whole-degree reading. A `weather` entity gives the real condition, today's high and low once its forecast has loaded, and opens the forecast when tapped (if its source has one); a plain `sensor.*` (an outdoor temperature) gets a fixed sun and no forecast, since a sensor says nothing about the sky. The top bar's weather pill, for a dashboard that builds its own header instead of using `TopBar`.",
+        props: [
+            {
+                doc: 'A weather entity, like `ha:weather.forecast_home`, or a plain temperature sensor.',
+                name: 'entity',
+                optional: false,
+                type: 'EntityRef',
+            },
+            {
+                doc: "Tapping a weather entity's pill opens its forecast in a drawer. `false` builds none and the pill is only what it shows, which is lighter on a small display. Default `true`.",
+                name: 'drawer',
+                optional: true,
+                type: 'boolean',
+            },
+        ],
+    },
     PresenceStack: {
         doc: 'Overlapping avatar circles for a handful of `person.*` entities.',
         props: [
@@ -703,6 +767,21 @@ export const COMPONENT_PROPS = {
             },
         ],
     },
+    DateChip: {
+        doc: "A short date pill (`Tue · Oct 6`), the top bar's, for a dashboard that builds its own header.",
+        props: [],
+    },
+    Clock: {
+        doc: "The top bar's clock: the time in the large clock type, with AM/PM beside it in a 12h format. For a dashboard that builds its own header instead of using `TopBar`.",
+        props: [
+            {
+                doc: "`'auto'` follows the browser's locale (browsers don't read the OS 12/24h setting, so an `en-US` browser shows AM/PM); `'12h'`/`'24h'` force it. Default `'auto'`.",
+                name: 'format',
+                optional: true,
+                type: "'auto' | '12h' | '24h'",
+            },
+        ],
+    },
     WeatherForecast: {
         doc: "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, with `expanded` for the full-size layout. Wide, it adds the current readings and a card for each hour. A source with no forecast shows only the weather now.",
         props: [
@@ -742,7 +821,7 @@ export const COMPONENT_PROPS = {
                 type: "Omit<RemoteClientOptions, 'url'>",
             },
             {
-                doc: "`'system'` follows the browser/OS preference and updates live. Default `'dark'`. A `useThemeToggle()` caller (e.g. `NavRail`'s dev toggle) can still override this at runtime.",
+                doc: "`'light'`, `'dark'`, `'system'` (follows the browser/OS preference and updates live), or a schedule: `{ dark: { from: '19:00', to: '07:00' } }` is dark between those times on the display's clock, `{ sun: 'ha:sun.sun' }` is dark while that entity, a `daylight` sensor (`on` while the sun is up; the Home Assistant integration makes one of `sun.sun`), is `off`. Default `'dark'`. A schedule and the document shell's first paint use `'system'` until the time or the entity is known. A `useThemeToggle()` caller (e.g. `NavRail`'s dev toggle) can still override this at runtime. Pass a constant defined outside the component.",
                 name: 'theme',
                 optional: true,
                 type: 'ThemeMode',
@@ -759,6 +838,12 @@ export const COMPONENT_PROPS = {
                 optional: true,
                 type: 'Density',
             },
+            {
+                doc: "`'reduced'` turns animations and transitions off, for a slow display, `'full'` keeps them and `'auto'` (the default) leaves things as they are. A device can choose for itself with `?motion=reduced` (or `full`) on the address it opens: the choice is kept on the device, so reloads and links inside the app keep it, and `?motion=auto` forgets it. That wins over this prop.",
+                name: 'motion',
+                optional: true,
+                type: 'MotionPreference',
+            },
             {
                 doc: 'Partial changes to the built-in theme — colors per light/dark, radii, typography, spacing, density sizes. Pass a constant defined outside the component: a new object each render rebuilds the theme each render.',
                 name: 'overrides',

package/dist/index.d.ts

@@ -9,6 +9,7 @@ export type { IconName } from './icon-data.ts';
 export * from './icon.tsx';
 export * from './layout/grid.tsx';
 export * from './layout/page.tsx';
+export * from './layout/animated-outlet.tsx';
 export * from './layout/room-header.tsx';
 export { Tile, type TileProps } from './layout/tile.tsx';
 export * from './layout/energy-chart.tsx';

package/dist/index.js

@@ -5,6 +5,7 @@ export * from './status.js';
 export * from './icon.js';
 export * from './layout/grid.js';
 export * from './layout/page.js';
+export * from './layout/animated-outlet.js';
 export * from './layout/room-header.js';
 export { Tile } from './layout/tile.js';
 export * from './layout/energy-chart.js';

package/dist/layout/animated-outlet.d.ts

@@ -0,0 +1,14 @@
+import type { NavItem } from '../entities/nav-rail.tsx';
+export interface AnimatedOutletProps {
+    /** The dashboard's pages in the order its nav lists them (the same `items` as `NavRail` or `NavDock`). A page then slides in from the side it sits on: a later page from the right, an earlier one from the left. Left out, pages only fade. */
+    items?: NavItem[];
+    /** The path `items` are relative to, e.g. `/bathroom`. Needed with `items`. */
+    base?: string;
+}
+/**
+ * A dashboard layout's `<Outlet />` with a transition between its pages: the page that was showing
+ * fades out (sliding a little toward the side it was on), then the new one fades in from the side
+ * it is on. It is a drop-in for `Outlet` in a layout route, and does nothing the first time a page
+ * shows or for a visitor who prefers reduced motion.
+ */
+export declare function AnimatedOutlet({ items, base }: AnimatedOutletProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/layout/animated-outlet.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+/** @jsxImportSource @emotion/react */
+import { AnimatePresence, motion, useReducedMotion } from 'motion/react';
+import { useState } from 'react';
+import { useLocation, useOutlet } from 'react-router';
+/** How far a page slides, in px, as it comes and goes. */
+const SLIDE = 24;
+/** The index of the item whose page `pathname` is, or -1. */
+function indexAt(pathname, items, base) {
+    if (!items || base === undefined) {
+        return -1;
+    }
+    const here = pathname.replace(/\/$/, '') || '/';
+    return items.findIndex((item) => (item.to ? `${base}/${item.to}` : base) === here);
+}
+/**
+ * A dashboard layout's `<Outlet />` with a transition between its pages: the page that was showing
+ * fades out (sliding a little toward the side it was on), then the new one fades in from the side
+ * it is on. It is a drop-in for `Outlet` in a layout route, and does nothing the first time a page
+ * shows or for a visitor who prefers reduced motion.
+ */
+export function AnimatedOutlet({ items, base }) {
+    const outlet = useOutlet();
+    const { pathname } = useLocation();
+    const still = useReducedMotion();
+    const index = indexAt(pathname, items, base);
+    // Moving to a later page is +1, to an earlier one -1; with no order to go by, 0 is just a fade.
+    const [seen, setSeen] = useState({ index, direction: 0 });
+    if (seen.index !== index) {
+        setSeen({
+            index,
+            direction: index === -1 || seen.index === -1 ? 0 : Math.sign(index - seen.index),
+        });
+    }
+    const seconds = still ? 0 : 0.14;
+    const slide = still ? 0 : SLIDE;
+    return (_jsx(AnimatePresence, { mode: "wait", initial: false, custom: seen.direction, children: _jsx(motion.div, { custom: seen.direction, variants: {
+                enter: (side) => ({ opacity: 0, x: side * slide }),
+                show: { opacity: 1, x: 0 },
+                exit: (side) => ({ opacity: 0, x: -side * slide }),
+            }, initial: "enter", animate: "show", exit: "exit", transition: { duration: seconds, ease: 'easeOut' }, 
+            // A page fills the space it is given, as it does without the wrapper.
+            css: { display: 'flex', flexDirection: 'column', flex: '1 1 auto', minHeight: 0 }, children: outlet }, pathname) }));
+}

package/dist/layout/detail-provider.d.ts

@@ -4,11 +4,13 @@ interface DetailState {
     header: ReactNode;
     body: ReactNode;
     expanded: boolean;
+    /** Stays at full size: the drawer has no button to collapse it. */
+    locked: boolean;
 }
 interface DetailContextValue {
     detail: DetailState | null;
-    /** `expanded` opens it at full size instead of the side panel. */
-    openDetail: (id: string, header: ReactNode, body: ReactNode, expanded?: boolean) => void;
+    /** `expanded` opens it at full size instead of the side panel; `locked` keeps it there, with no button to collapse it. */
+    openDetail: (id: string, header: ReactNode, body: ReactNode, expanded?: boolean, locked?: boolean) => void;
     /** Keeps an already-open drawer's content live; a no-op for any other `id`. */
     updateDetail: (id: string, header: ReactNode, body: ReactNode) => void;
     closeDetail: () => void;

package/dist/layout/detail-provider.js

@@ -4,8 +4,8 @@ const DetailContext = createContext(null);
 /** Backs the single shared `EntityDrawer`; instantiated once by `HashsomeProvider`. */
 export function DetailProvider({ children }) {
     const [detail, setDetail] = useState(null);
-    const openDetail = useCallback((id, header, body, expanded = false) => {
-        setDetail({ id, header, body, expanded });
+    const openDetail = useCallback((id, header, body, expanded = false, locked = false) => {
+        setDetail({ id, header, body, expanded: expanded || locked, locked });
     }, []);
     const updateDetail = useCallback((id, header, body) => {
         setDetail((current) => (current && current.id === id ? { ...current, header, body } : current));

package/dist/layout/drawer-controls.js

@@ -36,6 +36,7 @@ export function StepButton({ icon, label, delta, holdDelta = delta * 10, onStep,
  * `fill` shows accent up to the value; a `gradient` track stays vivid up to the value and dims past it instead (no marker or thumb). */
 export function ValueBar({ label, value, min, max, keyStep, round = 1, gradient, height = 28, onDrag, onCommit, }) {
     const dragging = useRef(false);
+    const lastDrag = useRef(null);
     const fraction = max === min ? 0 : (value - min) / (max - min);
     const pct = Math.min(1, Math.max(0, fraction)) * 100;
     const clampValue = (v) => Math.min(max, Math.max(min, v));
@@ -64,16 +65,31 @@ export function ValueBar({ label, value, min, max, keyStep, round = 1, gradient,
         width: "100%", height: height, radius: "full", background: "surface", border: !gradient, cursor: "pointer", overflow: "hidden", css: { touchAction: 'none', ...(gradient ? { backgroundImage: gradient } : {}) }, onPointerDown: (event) => {
             dragging.current = true;
             event.currentTarget.setPointerCapture?.(event.pointerId);
-            onDrag(valueAt(event));
+            lastDrag.current = valueAt(event);
+            onDrag(lastDrag.current);
         }, onPointerMove: (event) => {
             if (dragging.current) {
-                onDrag(valueAt(event));
+                lastDrag.current = valueAt(event);
+                onDrag(lastDrag.current);
             }
         }, onPointerUp: (event) => {
             if (dragging.current) {
                 dragging.current = false;
                 onCommit(valueAt(event));
             }
+        }, 
+        // A touch the browser took or lost never ends with a release. Ending the drag with the last
+        // value the finger reached lets whoever holds it let go, instead of leaving it held for good.
+        onPointerCancel: () => {
+            if (dragging.current) {
+                dragging.current = false;
+                onCommit(lastDrag.current ?? value);
+            }
+        }, onLostPointerCapture: () => {
+            if (dragging.current) {
+                dragging.current = false;
+                onCommit(lastDrag.current ?? value);
+            }
         }, onKeyDown: onKeyDown, children: gradient ? (_jsx(Box, { as: motion.span, position: "absolute", background: "surface", initial: false, animate: { left: `${Math.max(pct, 4)}%` }, transition: { duration: 0 }, css: { top: 0, bottom: 0, right: 0, opacity: 0.72, pointerEvents: 'none' } })) : (_jsx(Box, { as: motion.span, position: "absolute", background: "accent", initial: false, animate: { width: `${pct}%` }, transition: { duration: 0 }, css: { top: 0, bottom: 0, left: 0 } })) }));
 }
 /** One round power icon button with two states: filled with the accent while on, neutral while off. */

package/dist/layout/entity-drawer.js

@@ -68,7 +68,7 @@ export function EntityDrawer() {
                         // its default `min-height: auto` can win out and push it past the stretched height
                         // instead of scrolling internally. `height: '100%'` here is well-defined regardless
                         // (the wrapper's `inset: 0` gives it an unambiguous content-box size).
-                        height: "100%", minHeight: 0, maxHeight: "100%", overflow: "auto", p: 5, css: { pointerEvents: 'auto' }, children: [_jsxs(Flex, { justify: "space-between", align: "center", gap: 2.5, mb: 4, children: [detail.header, _jsxs(Flex, { gap: 1.5, grow: 0, children: [_jsx(DrawerActionButton, { icon: expanded ? 'lu:minimize-2' : 'lu:maximize-2', label: expanded ? 'Collapse' : 'Expand', onClick: toggleExpanded }), _jsx(DrawerActionButton, { icon: "lu:x", label: "Close", onClick: closeDetail })] })] }), detail.body] }, "hash-drawer") })] })) : null }));
+                        height: "100%", minHeight: 0, maxHeight: "100%", overflow: "auto", p: 5, css: { pointerEvents: 'auto' }, children: [_jsxs(Flex, { justify: "space-between", align: "center", gap: 2.5, mb: 4, children: [detail.header, _jsxs(Flex, { gap: 1.5, grow: 0, children: [detail.locked ? null : (_jsx(DrawerActionButton, { icon: expanded ? 'lu:minimize-2' : 'lu:maximize-2', label: expanded ? 'Collapse' : 'Expand', onClick: toggleExpanded })), _jsx(DrawerActionButton, { icon: "lu:x", label: "Close", onClick: closeDetail })] })] }), detail.body] }, "hash-drawer") })] })) : null }));
 }
 const ACTION_BACKGROUND = 'surfaceRaised';
 const ACTION_COLOR = 'text';

package/dist/layout/hold-progress.d.ts

@@ -1,2 +1,8 @@
-/** The thin line along a card's top edge that fills while a press is being timed as a hold. */
-export declare function HoldProgress(): import("@emotion/react/jsx-runtime").JSX.Element;
+export interface HoldProgressProps {
+    /** Which edge of the card the line runs along. Default `top`. */
+    edge?: 'top' | 'bottom';
+    /** A literal CSS color for the line, alpha included. Left out, a half-faded muted text color. */
+    color?: string;
+}
+/** The thin line along a card's edge that fills while a press is being timed as a hold. */
+export declare function HoldProgress({ edge, color }: HoldProgressProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/layout/hold-progress.js

@@ -1,9 +1,25 @@
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 /** @jsxImportSource @emotion/react */
+import { keyframes } from '@emotion/react';
 import { Box } from 'e-prim';
-import { motion } from 'motion/react';
 import { HOLD_MS } from './use-hold.js';
-/** The thin line along a card's top edge that fills while a press is being timed as a hold. */
-export function HoldProgress() {
-    return (_jsx(Box, { as: motion.span, position: "absolute", height: 2, background: "textMuted", initial: { width: '0%' }, animate: { width: '100%' }, transition: { duration: HOLD_MS / 1000, ease: 'linear' }, css: { top: 0, left: 0, opacity: 0.5, pointerEvents: 'none' } }));
+/** Grows the line from its left end by scaling it, which the browser animates on its own, without
+ * the page's JavaScript or a layout for each frame: on a slow display, animating the width is what
+ * made the hold look stuck. */
+const fill = keyframes({
+    from: { transform: 'scaleX(0)' },
+    to: { transform: 'scaleX(1)' },
+});
+/** The thin line along a card's edge that fills while a press is being timed as a hold. */
+export function HoldProgress({ edge = 'top', color }) {
+    return (_jsx(Box, { as: "span", "data-keep-motion": "", position: "absolute", width: "100%", height: 2, ...(color ? {} : { background: 'textMuted' }), css: {
+            [edge]: 0,
+            left: 0,
+            opacity: color ? 1 : 0.5,
+            ...(color ? { backgroundColor: color } : {}),
+            pointerEvents: 'none',
+            transformOrigin: 'left center',
+            willChange: 'transform',
+            animation: `${fill} ${HOLD_MS}ms linear forwards`,
+        } }));
 }

package/dist/layout/tile.js

@@ -8,6 +8,7 @@ import { statusLabels } from '../status.js';
 import { useDrawer } from './use-drawer.js';
 import { EnergyChart } from './energy-chart.js';
 import { HistorySection } from './history-section.js';
+import { HoldProgress } from './hold-progress.js';
 import { LogbookHistory } from './logbook-history.js';
 const DRAG_THRESHOLD = 8;
 const KEY_STEP = 0.05;
@@ -181,19 +182,14 @@ export function Tile({ label, icon, secondary, status = 'ready', active = false,
     // the unavailable/unknown/missing/loading statuses below).
     const dimColorKey = ready ? 'line' : 'textMuted';
     const cardOpacity = !ready || feedback === 'pending' ? 0.7 : 1;
-    const iconBadge = icon ? (_jsx(Flex, { as: motion.span, align: "center", justify: "center", position: "relative", radius: "full", width: 32, height: 32, animate: { backgroundColor: iconBg, color: iconColor }, transition: COLOR_TRANSITION, css: { flex: 'none' }, children: _jsx(Icon, { name: icon, size: 16 }) })) : null;
-    return (_jsxs(Flex, { as: motion.div, radius: "card", position: "relative", align: "center", overflow: "hidden", minWidth: 0, "data-status": status, "data-active": accented, "data-solid-accent": solidAccent, "data-fill": fill !== undefined, "data-fill-visible": showFill, "data-overlay": overlay !== undefined, "data-pending": feedback === 'pending', "data-feedback": feedback === 'pending' ? undefined : feedback, animate: { backgroundColor: cardBg, color: cardColor, opacity: cardOpacity }, transition: COLOR_TRANSITION, css: ({ palette }) => feedback === 'error' ? { outline: `2px solid ${palette.danger}`, outlineOffset: -2 } : null, children: [hasFill ? (_jsx(Box, { as: motion.span, position: "absolute", background: "accent", 
+    const iconBadge = icon ? (_jsx(Flex, { as: motion.span, align: "center", justify: "center", position: "relative", radius: "full", width: 32, height: 32, initial: false, animate: { backgroundColor: iconBg, color: iconColor }, transition: COLOR_TRANSITION, css: { flex: 'none' }, children: _jsx(Icon, { name: icon, size: 16 }) })) : null;
+    return (_jsxs(Flex, { as: motion.div, radius: "card", position: "relative", align: "center", overflow: "hidden", minWidth: 0, "data-status": status, "data-active": accented, "data-solid-accent": solidAccent, "data-fill": fill !== undefined, "data-fill-visible": showFill, "data-overlay": overlay !== undefined, "data-pending": feedback === 'pending', "data-feedback": feedback === 'pending' ? undefined : feedback, 
+        // A card that mounts (a page opened) is drawn as it is, not animated from nothing.
+        initial: false, animate: { backgroundColor: cardBg, color: cardColor, opacity: cardOpacity }, transition: COLOR_TRANSITION, css: ({ palette }) => feedback === 'error' ? { outline: `2px solid ${palette.danger}`, outlineOffset: -2 } : null, children: [hasFill ? (_jsx(Box, { as: motion.span, position: "absolute", background: "accent", 
                 // Spans the whole card, including behind `trailing` (e.g. a color-capable light's
                 // picker button) — it's a sibling of the button and `trailing`, not nested inside the
                 // button, specifically so its width isn't capped at the button's own narrower bounds.
-                animate: { width: `${(shownFill ?? 0) * 100}%`, opacity: overlaid ? 0 : shownFill }, transition: drag !== null ? { duration: 0 } : COLOR_TRANSITION, css: { inset: '0 auto 0 0', pointerEvents: 'none' } })) : null, holdable && holding ? (_jsx(Box, { as: motion.span, position: "absolute", initial: { width: '0%' }, animate: { width: '100%' }, transition: { duration: HOLD_MS / 1000, ease: 'linear' }, height: 2, css: {
-                    inset: 'auto auto 0 0',
-                    pointerEvents: 'none',
-                    // Visible against either background: a light wash normally, a dark wash on an
-                    // accent-colored (non-dimmable-active) card, where a light or accent bar would
-                    // disappear or clash.
-                    backgroundColor: solidAccent ? 'rgba(0, 0, 0, 0.35)' : 'rgba(255, 255, 255, 0.55)',
-                } }, "hold-progress")) : null, overlay ? (_jsxs(Flex, { align: "center", gap: 2.5, minWidth: 0, grow: 1, position: "relative", pt: 2, pr: 2, pb: 2, pl: 2, css: { alignSelf: 'stretch' }, children: [iconBadge, _jsx(Flex, { grow: 1, minWidth: 0, justify: "center", align: "center", children: overlay({ openDetail: openDrawer }) })] })) : (_jsxs(Flex, { as: "button", type: "button", disabled: !ready || (!onPress && !adjustable && !holdable), onClick: onClick, onPointerDown: onPointerDown, onPointerMove: onPointerMove, onPointerUp: onPointerUp, onPointerCancel: onPointerCancel, onKeyDown: onKeyDown, title: title, "aria-label": label, align: "center", gap: 2.5, minWidth: 0, grow: 1, position: "relative", cursor: ready ? 'pointer' : 'default', pt: 2, pr: 3.5, pb: 2, pl: 2, css: {
+                initial: false, animate: { width: `${(shownFill ?? 0) * 100}%`, opacity: overlaid ? 0 : shownFill }, transition: drag !== null ? { duration: 0 } : COLOR_TRANSITION, css: { inset: '0 auto 0 0', pointerEvents: 'none' } })) : null, holdable && holding ? (_jsx(HoldProgress, { edge: "bottom", color: solidAccent ? 'rgba(0, 0, 0, 0.35)' : 'rgba(255, 255, 255, 0.55)' })) : null, overlay ? (_jsxs(Flex, { align: "center", gap: 2.5, minWidth: 0, grow: 1, position: "relative", pt: 2, pr: 2, pb: 2, pl: 2, css: { alignSelf: 'stretch' }, children: [iconBadge, _jsx(Flex, { grow: 1, minWidth: 0, justify: "center", align: "center", children: overlay({ openDetail: openDrawer }) })] })) : (_jsxs(Flex, { as: "button", type: "button", disabled: !ready || (!onPress && !adjustable && !holdable), onClick: onClick, onPointerDown: onPointerDown, onPointerMove: onPointerMove, onPointerUp: onPointerUp, onPointerCancel: onPointerCancel, onKeyDown: onKeyDown, title: title, "aria-label": label, align: "center", gap: 2.5, minWidth: 0, grow: 1, position: "relative", cursor: ready ? 'pointer' : 'default', pt: 2, pr: 3.5, pb: 2, pl: 2, css: {
                     alignSelf: 'stretch',
                     background: 'none',
                     textAlign: 'left',

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

@@ -17,6 +17,7 @@ export declare function useDrawer({ icon, label, kind, body, }: {
 }): {
     open: () => void;
     openExpanded: () => void;
+    openFull: () => void;
     isOpen: boolean;
 };
 /** `useDrawer` for an owner that must not itself subscribe to the drawer's context. Re-pushing the
@@ -28,6 +29,6 @@ export declare function DrawerTrigger({ icon, label, kind, body, children, }: {
     label: string;
     kind?: string | undefined;
     body: ReactNode;
-    /** Gets `open` (the side panel) and `openExpanded` (full size). */
-    children: (open: () => void, openExpanded: () => void) => ReactNode;
+    /** Gets `open` (the side panel), `openExpanded` (full size, which can be collapsed) and `openFull` (full size, with no collapse button). */
+    children: (open: () => void, openExpanded: () => void, openFull: () => void) => ReactNode;
 }): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/layout/use-drawer.js

@@ -22,13 +22,15 @@ export function useDrawer({ icon, label, kind, body, }) {
     }, [isOpen, id, icon, label, kind, body, updateDetail]);
     const open = () => openDetail(id, _jsx(DrawerHeader, { icon: icon, label: label, kind: kind }), body);
     const openExpanded = () => openDetail(id, _jsx(DrawerHeader, { icon: icon, label: label, kind: kind }), body, true);
-    return { open, openExpanded, isOpen };
+    // Full size and kept there: for content that is an overlay of its own, with nothing to collapse to.
+    const openFull = () => openDetail(id, _jsx(DrawerHeader, { icon: icon, label: label, kind: kind }), body, true, true);
+    return { open, openExpanded, openFull, isOpen };
 }
 /** `useDrawer` for an owner that must not itself subscribe to the drawer's context. Re-pushing the
  * body on every context change re-renders whoever called the hook; if that is the same component
  * that built `body`, it makes a fresh element each time and loops. Hosting the hook in this child
  * keeps `body`'s identity tied to the parent's own renders (entity updates), not the drawer's. */
 export function DrawerTrigger({ icon, label, kind, body, children, }) {
-    const { open, openExpanded } = useDrawer({ icon, label, kind, body });
-    return _jsx(_Fragment, { children: children(open, openExpanded) });
+    const { open, openExpanded, openFull } = useDrawer({ icon, label, kind, body });
+    return _jsx(_Fragment, { children: children(open, openExpanded, openFull) });
 }

package/dist/provider.d.ts

@@ -2,7 +2,12 @@ import { type Client, type RemoteClientOptions } from '@hashsome/core';
 import { type ReactNode } from 'react';
 import { type Density } from './theme/density.ts';
 import { type ThemeOverrides } from './theme/overrides.ts';
-export type ThemeMode = 'light' | 'dark' | 'system';
+import { type ThemeSchedule } from './theme/schedule.ts';
+export type { ThemeSchedule };
+/** `reduced` turns every animation off, for a slow display; `full` keeps them; `auto` (the default) leaves things as they are. */
+export type MotionPreference = 'auto' | 'full' | 'reduced';
+/** `'system'` follows the display's own light/dark preference; a `ThemeSchedule` changes with the time of day. */
+export type ThemeMode = 'light' | 'dark' | 'system' | ThemeSchedule;
 export interface HashsomeProviderProps {
     /** Runtime WebSocket URL. Defaults to `/ws` on the current origin. */
     url?: string;
@@ -10,12 +15,14 @@ export interface HashsomeProviderProps {
     client?: Client;
     /** Options for the default `RemoteClient` (reconnect timing, a custom socket factory). Ignored when `client` is given. */
     clientOptions?: Omit<RemoteClientOptions, 'url'>;
-    /** `'system'` follows the browser/OS preference and updates live. Default `'dark'`. A `useThemeToggle()` caller (e.g. `NavRail`'s dev toggle) can still override this at runtime. */
+    /** `'light'`, `'dark'`, `'system'` (follows the browser/OS preference and updates live), or a schedule: `{ dark: { from: '19:00', to: '07:00' } }` is dark between those times on the display's clock, `{ sun: 'ha:sun.sun' }` is dark while that entity, a `daylight` sensor (`on` while the sun is up; the Home Assistant integration makes one of `sun.sun`), is `off`. Default `'dark'`. A schedule and the document shell's first paint use `'system'` until the time or the entity is known. A `useThemeToggle()` caller (e.g. `NavRail`'s dev toggle) can still override this at runtime. Pass a constant defined outside the component. */
     theme?: ThemeMode;
     /** Any Google Fonts family name (e.g. `'Inter'`, `'Roboto'`, `'Poppins'`), loaded dynamically. Default `'Inter'`. */
     font?: string;
     /** `'compact'` for small square displays: tighter spacing, shorter tiles, smaller icon circles. Default `'comfortable'`. */
     density?: Density;
+    /** `'reduced'` turns animations and transitions off, for a slow display, `'full'` keeps them and `'auto'` (the default) leaves things as they are. A device can choose for itself with `?motion=reduced` (or `full`) on the address it opens: the choice is kept on the device, so reloads and links inside the app keep it, and `?motion=auto` forgets it. That wins over this prop. */
+    motion?: MotionPreference;
     /** Partial changes to the built-in theme — colors per light/dark, radii, typography, spacing, density sizes. Pass a constant defined outside the component: a new object each render rebuilds the theme each render. */
     overrides?: ThemeOverrides;
     /** The app. */
@@ -33,5 +40,5 @@ export interface ThemeModeState {
  * Must be rendered inside `<HashsomeProvider>`. */
 export declare function useThemeToggle(): ThemeModeState;
 /** Connects the tree to the runtime proxy. Render only on the client. */
-export declare function HashsomeProvider({ url, client, clientOptions, theme, font, density, overrides, children, }: HashsomeProviderProps): import("react").JSX.Element;
+export declare function HashsomeProvider({ url, client, clientOptions, theme, motion, font, density, overrides, children, }: HashsomeProviderProps): import("react").JSX.Element;
 export declare function useClient(): Client;