@hashsome/ui 0.6.0 → 0.8.0

package/dist/entities/sensor-readout.js

@@ -3,6 +3,7 @@ import { Flex, Typography } from 'e-prim';
 import { Icon } from '../icon.js';
 import { fallbackName } from '../entity-handle.js';
 import { useEntityHandle } from '../hooks.js';
+import { AnimatedNumber } from '../layout/animated-number.js';
 import { SensorHistory } from '../layout/sensor-history.js';
 import { PlainButton } from '../layout/plain-button.js';
 import { DrawerTrigger } from '../layout/use-drawer.js';
@@ -62,20 +63,23 @@ export function SensorReadout({ entity, icon, name, battery, history, safeRange,
     const level = ready ? rangeLevel(sensor.value, range) : undefined;
     const label = name ?? sensor?.name ?? fallbackName(entity);
     const valueText = ready ? `${formatValue(sensor.value)}${unit ? ` ${unit}` : ''}` : '';
+    // A number that changes moves to its new value; written to one decimal, as `valueText` is.
+    const reading = (n) => `${formatValue(String(n))}${unit ? ` ${unit}` : ''}`;
+    const moving = ready && sensor.numeric !== undefined ? Math.round(sensor.numeric * 10) / 10 : undefined;
     const warning = level === 'low' || level === 'high';
     const hint = warning && range
         ? `${label} is too ${level} (safe range ${describeRange(range, unit)})`
         : undefined;
-    const content = (_jsxs(_Fragment, { children: [_jsx(Icon, { name: resolvedIcon, size: 16 }), _jsx(Typography, { as: "span", variant: "body", noWrap: true, children: ready ? valueText : statusLabels[status] }), warning ? _jsx(Icon, { name: "lu:triangle-alert", size: 16 }) : null] }));
+    const content = (_jsxs(_Fragment, { children: [_jsx(Icon, { name: resolvedIcon, size: 16 }), _jsx(Typography, { as: "span", variant: "body", noWrap: true, children: ready ? (moving !== undefined ? (_jsx(AnimatedNumber, { value: moving, format: reading })) : (valueText)) : (statusLabels[status]) }), warning ? _jsx(Icon, { name: "lu:triangle-alert", size: 16 }) : null] }));
     const numeric = ready && sensor.numeric !== undefined;
     if (drawer && numeric) {
-        return (_jsx(DrawerTrigger, { icon: resolvedIcon, label: label, kind: deviceClass ? capitalize(deviceClass) : 'Sensor', body: _jsx(SensorDetailBody, { valueText: valueText, level: level, range: range, unit: unit, ...(battery ? { battery } : {}), ...(typeof entity === 'string' ? { entity } : {}), ...(history ? { history } : {}) }), children: (open) => (_jsx(PlainButton, { inline: true, align: "center", gap: 1, css: readoutStates, "data-status": status, "data-range": level, "aria-label": `${label}: ${valueText}${hint ? `. ${hint}` : ''}`, title: hint, onClick: open, children: content })) }));
+        return (_jsx(DrawerTrigger, { icon: resolvedIcon, label: label, kind: deviceClass ? capitalize(deviceClass) : 'Sensor', body: _jsx(SensorDetailBody, { valueText: valueText, ...(moving !== undefined ? { moving, reading } : {}), level: level, range: range, unit: unit, ...(battery ? { battery } : {}), ...(typeof entity === 'string' ? { entity } : {}), ...(history ? { history } : {}) }), children: (open) => (_jsx(PlainButton, { inline: true, align: "center", gap: 1, css: readoutStates, "data-status": status, "data-range": level, "aria-label": `${label}: ${valueText}${hint ? `. ${hint}` : ''}`, title: hint, onClick: open, children: content })) }));
     }
     return (_jsx(Flex, { as: "span", inline: true, align: "center", gap: 1, css: readoutStates, "data-status": status, "data-range": level, title: hint, children: content }));
 }
-function SensorDetailBody({ valueText, level, range, unit, entity, battery, history, }) {
+function SensorDetailBody({ valueText, moving, reading, level, range, unit, entity, battery, history, }) {
     const warning = level === 'low' || level === 'high';
-    return (_jsxs(Flex, { direction: "column", gap: 2, children: [_jsxs(Flex, { direction: "column", background: "surfaceRaised", radius: "row", py: 3.5, px: 4, children: [_jsx(Typography, { as: "span", variant: "secondary", color: "textMuted", children: "Now" }), _jsx(Typography, { as: "span", variant: "stat", children: valueText }), range ? (_jsxs(Flex, { align: "center", gap: 1.5, css: ({ palette }) => ({ color: warning ? palette.danger : palette.textMuted }), children: [warning ? _jsx(Icon, { name: "lu:triangle-alert", size: 14 }) : null, _jsx(Typography, { as: "span", variant: "secondary", children: warning
+    return (_jsxs(Flex, { direction: "column", gap: 2, children: [_jsxs(Flex, { direction: "column", background: "surfaceRaised", radius: "row", py: 3.5, px: 4, children: [_jsx(Typography, { as: "span", variant: "secondary", color: "textMuted", children: "Now" }), _jsx(Typography, { as: "span", variant: "stat", children: moving !== undefined && reading ? (_jsx(AnimatedNumber, { value: moving, format: reading })) : (valueText) }), range ? (_jsxs(Flex, { align: "center", gap: 1.5, css: ({ palette }) => ({ color: warning ? palette.danger : palette.textMuted }), children: [warning ? _jsx(Icon, { name: "lu:triangle-alert", size: 14 }) : null, _jsx(Typography, { as: "span", variant: "secondary", children: warning
                                     ? `Too ${level} · safe range ${describeRange(range, unit)}`
                                     : `Within the safe range (${describeRange(range, unit)})` })] })) : null] }), battery ? _jsx(BatteryLevel, { entity: battery }) : null, _jsx(SensorHistory, { ...(history ? { samples: history } : entity ? { entity } : {}), unit: unit })] }));
 }

package/dist/gallery/gallery.js

@@ -22,6 +22,7 @@ import { SensorReadout } from '../entities/sensor-readout.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 { AnimatedNumber } from '../layout/animated-number.js';
 import { Board, Cell } from '../layout/board.js';
 import { Grid } from '../layout/grid.js';
 import { HistorySection } from '../layout/history-section.js';
@@ -74,6 +75,15 @@ function PropsTable({ name }) {
 function ComponentDoc({ title, description, components, children, }) {
     return (_jsxs("section", { css: { marginBottom: 40 }, children: [_jsxs(Flex, { direction: "column", gap: 1, maxWidth: "60ch", mb: 4, children: [_jsx(Typography, { as: "h2", variant: "heading", children: title }), _jsx(Typography, { as: "p", variant: "body", color: "textMuted", children: description })] }), _jsx(Stage, { children: children }), components.map((name) => (_jsx(PropsTable, { name: name }, name)))] }));
 }
+/** A reading that changes every time the button is pressed, to see it move. */
+function AnimatedNumberDemo() {
+    const [watts, setWatts] = useState(40.1);
+    return (_jsxs(Flex, { align: "center", gap: 4, children: [_jsx(Typography, { as: "span", variant: "stat", children: _jsx(AnimatedNumber, { value: watts, format: (n) => `${n.toFixed(1)} W` }) }), _jsx(ActionButton, { label: "Change the reading", icon: "lu:refresh-cw", onPress: () => {
+                    // Down to a few watts, then back up to the lamp's own.
+                    setWatts((current) => (current > 20 ? 3.2 : 38) + Math.round(Math.random() * 60) / 10);
+                    return Promise.resolve();
+                } })] }));
+}
 /** Plain dimmable tile whose fill follows a local value, since `Tile` itself is controlled. */
 function TileFillDemo() {
     const [fill, setFill] = useState(0.6);
@@ -364,7 +374,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: "Board & Cell", components: ['Board', 'Cell'], description: "A page for one known device, laid out on a grid. Each cell says only how big it is (`cols` wide, `rows` tall); the board places them in order, in the first spot they fit. Rows are as tall as their content, so a cell of `rows={2}` ends where the second row does, and `rows='fill'` runs from where the cell is placed down to the bottom of the page, whatever rows are beside it. Every card is a whole number of grid modules tall, the gap between columns and inside a cell is three modules and between rows six, so the result stays on the grid (turn on the debug menu's Show grid to see it).", children: _jsxs(Flex, { direction: "column", gap: 5, children: [_jsxs(Board, { children: [_jsxs(Cell, { cols: 8, children: [_jsx(RoomHeader, { title: "Kitchen", icon: "lu:utensils-crossed" }), _jsxs(Grid, { columns: 2, children: [_jsx(Tile, { label: "Lamp", icon: "lu:lightbulb" }), _jsx(Tile, { label: "Ceiling", icon: "lu:lightbulb" })] })] }), _jsx(Cell, { cols: 4, rows: 2, children: _jsx(MediaPlayerColumn, { entity: "ha:media_player.off" }) }), _jsxs(Cell, { cols: 8, children: [_jsx(RoomHeader, { title: "Stairs", icon: "lu:footprints" }), _jsxs(Grid, { columns: 2, children: [_jsx(Tile, { label: "Lamp", icon: "lu:lightbulb" }), _jsx(Tile, { label: "Spotlights", icon: "lu:lightbulb" })] })] })] }), _jsx(Flex, { direction: "column", height: 460, css: { outline: '1px dashed currentColor' }, children: _jsxs(Board, { children: [_jsx(Cell, { children: _jsxs(TopRow, { children: [_jsx(DateChip, {}), _jsx(Clock, { format: "24h" })] }) }), _jsxs(Cell, { cols: 8, children: [_jsx(RoomHeader, { title: "Kitchen", icon: "lu:utensils-crossed" }), _jsxs(Grid, { columns: 2, children: [_jsx(Tile, { label: "Lamp", icon: "lu:lightbulb" }), _jsx(Tile, { label: "Ceiling", icon: "lu:lightbulb" })] })] }), _jsx(Cell, { cols: 4, rows: "fill", children: _jsx(MediaPlayerColumn, { entity: "ha:media_player.off" }) })] }) })] }) }), _jsx(ComponentDoc, { title: "Top Row", components: ['TopRow'], description: "The row along the top of a page you build yourself instead of with `TopBar`: the date, the weather, the clock and the status in a line at the right, in the height the grid gives the top row (40px), with no padding of its own.", children: _jsxs(TopRow, { children: [_jsx(DateChip, {}), _jsx(Clock, { format: "24h" })] }) }), _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. Where the queue has no room beside the player (a narrow column, the side drawer), Library and Queue are tabs above the list; `tabs={false}` leaves only the library, `defaultTab` and `tab` / `onTabChange` choose which is open. 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; with `search='icon'` (the second demo) it is an icon at the end of the row of tabs, after a thin line, and pressing it turns that row into the field, so it takes no room of its own. The `theater` layout (third 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 (fourth 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(Flex, { direction: "column", maxHeight: 420, overflow: "auto", children: _jsx(MediaBrowser, { entity: "ha:media_player.living_room", search: "icon" }) }), _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: [
+                                        }) }), _jsx(Icon, { name: "lu:sun", size: 14 }), _jsx(Icon, { name: "lu:moon", size: 14 })] })] }), _jsx(ComponentDoc, { title: "Board & Cell", components: ['Board', 'Cell'], description: "A page for one known device, laid out on a grid. Each cell says only how big it is (`cols` wide, `rows` tall); the board places them in order, in the first spot they fit. Rows are as tall as their content, so a cell of `rows={2}` ends where the second row does, and `rows='fill'` runs from where the cell is placed down to the bottom of the page, whatever rows are beside it. Every card is a whole number of grid modules tall, the gap between columns and inside a cell is three modules and between rows six, so the result stays on the grid (turn on the debug menu's Show grid to see it).", children: _jsxs(Flex, { direction: "column", gap: 5, children: [_jsxs(Board, { children: [_jsxs(Cell, { cols: 8, children: [_jsx(RoomHeader, { title: "Kitchen", icon: "lu:utensils-crossed" }), _jsxs(Grid, { columns: 2, children: [_jsx(Tile, { label: "Lamp", icon: "lu:lightbulb" }), _jsx(Tile, { label: "Ceiling", icon: "lu:lightbulb" })] })] }), _jsx(Cell, { cols: 4, rows: 2, children: _jsx(MediaPlayerColumn, { entity: "ha:media_player.off" }) }), _jsxs(Cell, { cols: 8, children: [_jsx(RoomHeader, { title: "Stairs", icon: "lu:footprints" }), _jsxs(Grid, { columns: 2, children: [_jsx(Tile, { label: "Lamp", icon: "lu:lightbulb" }), _jsx(Tile, { label: "Spotlights", icon: "lu:lightbulb" })] })] })] }), _jsx(Flex, { direction: "column", height: 460, css: { outline: '1px dashed currentColor' }, children: _jsxs(Board, { children: [_jsx(Cell, { children: _jsxs(TopRow, { children: [_jsx(DateChip, {}), _jsx(Clock, { format: "24h" })] }) }), _jsxs(Cell, { cols: 8, children: [_jsx(RoomHeader, { title: "Kitchen", icon: "lu:utensils-crossed" }), _jsxs(Grid, { columns: 2, children: [_jsx(Tile, { label: "Lamp", icon: "lu:lightbulb" }), _jsx(Tile, { label: "Ceiling", icon: "lu:lightbulb" })] })] }), _jsx(Cell, { cols: 4, rows: "fill", children: _jsx(MediaPlayerColumn, { entity: "ha:media_player.off" }) })] }) })] }) }), _jsx(ComponentDoc, { title: "Top Row", components: ['TopRow'], description: "The row along the top of a page you build yourself instead of with `TopBar`: the date, the weather, the clock and the status in a line at the right, in the height the grid gives the top row (40px), with no padding of its own.", children: _jsxs(TopRow, { children: [_jsx(DateChip, {}), _jsx(Clock, { format: "24h" })] }) }), _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: "Animated Number", components: ['AnimatedNumber'], description: "A number that moves to its new value instead of jumping: a power reading, a temperature. The first value is shown at once; a new one is moved to from what is shown now, even if the last move has not finished. The text is changed directly, with no render for each step, so many of them cost little, and nothing moves when the app is set to reduced motion. `format` writes a number with its unit and should round, as it is called for each step. The drawer's power reading, the sensor readouts and a thermostat's current temperature use it.", children: _jsx(AnimatedNumberDemo, {}) }), _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. Where the queue has no room beside the player (a narrow column, the side drawer), Library and Queue are tabs above the list; `tabs={false}` leaves only the library, `defaultTab` and `tab` / `onTabChange` choose which is open. 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; with `search='icon'` (the second demo) it is an icon at the end of the row of tabs, after a thin line, and pressing it turns that row into the field, so it takes no room of its own. The `theater` layout (third 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 (fourth 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(Flex, { direction: "column", maxHeight: 420, overflow: "auto", children: _jsx(MediaBrowser, { entity: "ha:media_player.living_room", search: "icon" }) }), _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' },

package/dist/gallery/props-data.js

@@ -18,6 +18,29 @@ export const COMPONENT_PROPS = {
             },
         ],
     },
+    AnimatedNumber: {
+        doc: 'A number that moves to its new value instead of jumping to it: a power reading that changes, a temperature. The first value is shown at once, and a new one is moved to from what is shown now, even if it has not arrived yet; the text is changed directly (no render per step), so many of them cost little, and none moves when the app is set to reduced motion.',
+        props: [
+            {
+                doc: 'The number to show. When it changes, what is shown moves to it instead of jumping.',
+                name: 'value',
+                optional: false,
+                type: 'number',
+            },
+            {
+                doc: 'How a number is written, with its unit: `(n) => \\`${n.toFixed(1)} W\\``. Called for every step of the move, with a number between the old value and the new one, so it should round. Default: the number with as many decimals as `value` has.',
+                name: 'format',
+                optional: true,
+                type: '(n: number) => string',
+            },
+            {
+                doc: 'Seconds the move takes. Default 0.6.',
+                name: 'duration',
+                optional: true,
+                type: 'number',
+            },
+        ],
+    },
     Board: {
         doc: 'A page laid out on a grid, for a dashboard made for one device. The page is `columns` equal columns (a gap between them) and rows as tall as what is in them, with twice that gap between rows. Nothing says where a cell goes: each `Cell` only says how big it is, and the board puts it in the first place it fits, in the order written. Every card is a whole number of grid modules tall and every gap is 3, so whatever the board makes stays on the grid. It takes the height that is left of the page. Opt in: a page of plain flex columns keeps working the same.',
         props: [

package/dist/index.d.ts

@@ -8,6 +8,7 @@ export * from './status.ts';
 export type { IconName } from './icon-data.ts';
 export * from './icon.tsx';
 export * from './layout/grid.tsx';
+export * from './layout/animated-number.tsx';
 export * from './layout/board.tsx';
 export * from './layout/top-row.tsx';
 export * from './layout/page.tsx';

package/dist/index.js

@@ -4,6 +4,7 @@ export * from './hooks.js';
 export * from './status.js';
 export * from './icon.js';
 export * from './layout/grid.js';
+export * from './layout/animated-number.js';
 export * from './layout/board.js';
 export * from './layout/top-row.js';
 export * from './layout/page.js';

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

@@ -0,0 +1,15 @@
+export interface AnimatedNumberProps {
+    /** The number to show. When it changes, what is shown moves to it instead of jumping. */
+    value: number;
+    /** How a number is written, with its unit: `(n) => \`${n.toFixed(1)} W\``. Called for every step of the move, with a number between the old value and the new one, so it should round. Default: the number with as many decimals as `value` has. */
+    format?: (n: number) => string;
+    /** Seconds the move takes. Default 0.6. */
+    duration?: number;
+}
+/** How many decimals a number is written with: `40.1` has one. */
+export declare function decimalsOf(value: number): number;
+/** A number that moves to its new value instead of jumping to it: a power reading that changes, a
+ * temperature. The first value is shown at once, and a new one is moved to from what is shown now, even
+ * if it has not arrived yet; the text is changed directly (no render per step), so many of them cost
+ * little, and none moves when the app is set to reduced motion. */
+export declare function AnimatedNumber({ value, format, duration }: AnimatedNumberProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/layout/animated-number.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+/** @jsxImportSource @emotion/react */
+import { animate, MotionGlobalConfig } from 'motion/react';
+import { useLayoutEffect, useRef } from 'react';
+/** How many decimals a number is written with: `40.1` has one. */
+export function decimalsOf(value) {
+    return Number.isFinite(value) ? (String(value).split('.')[1] ?? '').length : 0;
+}
+/** A number that moves to its new value instead of jumping to it: a power reading that changes, a
+ * temperature. The first value is shown at once, and a new one is moved to from what is shown now, even
+ * if it has not arrived yet; the text is changed directly (no render per step), so many of them cost
+ * little, and none moves when the app is set to reduced motion. */
+export function AnimatedNumber({ value, format, duration = 0.6 }) {
+    const text = useRef(null);
+    const shown = useRef(value);
+    // What was asked for last, kept for the move, which must not start over because a caller's function is new.
+    const write = useRef((n) => String(n));
+    const decimals = decimalsOf(value);
+    const written = (n) => (format ? format(n) : n.toFixed(decimals));
+    useLayoutEffect(() => {
+        write.current = written;
+    });
+    // Before the first paint of a new value, so the final value is never seen for a frame first.
+    useLayoutEffect(() => {
+        const node = text.current;
+        const from = shown.current;
+        if (!node || from === value || !Number.isFinite(from) || !Number.isFinite(value)) {
+            shown.current = value;
+            return;
+        }
+        // Reduced motion: it is simply the new value.
+        if (MotionGlobalConfig.skipAnimations) {
+            shown.current = value;
+            node.textContent = write.current(value);
+            return;
+        }
+        node.textContent = write.current(from);
+        const move = animate(from, value, {
+            duration,
+            ease: 'easeOut',
+            onUpdate: (n) => {
+                shown.current = n;
+                node.textContent = write.current(n);
+            },
+            onComplete: () => {
+                shown.current = value;
+                node.textContent = write.current(value);
+            },
+        });
+        return () => move.stop();
+    }, [value, duration]);
+    return (_jsx("span", { ref: text, css: { fontVariantNumeric: 'tabular-nums' }, children: written(value) }));
+}

package/dist/layout/drawer-controls.js

@@ -1,11 +1,11 @@
 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 { animate, motion } from 'motion/react';
 import { MarqueeText } from './marquee-text.js';
 import { useEffect, useId, useRef, } from 'react';
 import { Icon } from '../icon.js';
-import { FadeScroll } from './fade-scroll.js';
+import { FADE, FadeScroll } from './fade-scroll.js';
 import { RoundButton } from './round-button.js';
 /** Fine adjustment: a press nudges by `delta` (1%); holding repeats in steps of 10 until released. */
 export function StepButton({ icon, label, delta, holdDelta = delta * 10, onStep, disabled, size = 36, }) {
@@ -104,6 +104,49 @@ export function ChipRow({ options, value, onChange, tabs = false, }) {
     // The accent behind the selected chip is one pill that glides to the next; its own id, so two rows
     // on a page do not share it.
     const pill = useId();
+    // The selected tab is brought into view when it is not (it is a long name that has just opened, or a
+    // tab part way out of the row), by scrolling the row so it is at its start.
+    const marker = useRef(null);
+    const selectedLabel = options.find((option) => option.value === value)?.label;
+    useEffect(() => {
+        const chip = marker.current?.parentElement;
+        const scroller = chip?.parentElement;
+        if (!tabs || !chip || !scroller) {
+            return;
+        }
+        let scroll;
+        const reveal = () => {
+            const at = chip.getBoundingClientRect();
+            const row = scroller.getBoundingClientRect();
+            // Out of view includes under the fade at an edge that has more beyond it, which hides it nearly as much.
+            const inLeft = row.left + (scroller.scrollLeft > 1 ? FADE : 0);
+            const more = scroller.scrollLeft + scroller.clientWidth < scroller.scrollWidth - 1;
+            const inRight = row.right - (more ? FADE : 0);
+            if (at.left >= inLeft && at.right <= inRight) {
+                return;
+            }
+            scroll?.stop();
+            const from = scroller.scrollLeft;
+            // To the start of the row, clear of the fade there (a position before the start is the start).
+            scroll = animate(from, from + (at.left - row.left) - FADE, {
+                duration: 0.35,
+                ease: 'easeOut',
+                onUpdate: (to) => {
+                    scroller.scrollLeft = to;
+                },
+            });
+        };
+        reveal();
+        // The row can get narrower after the tab is selected (the actions of what opened come in beside it).
+        const resize = typeof ResizeObserver === 'undefined' ? undefined : new ResizeObserver(reveal);
+        resize?.observe(scroller);
+        return () => {
+            scroll?.stop();
+            resize?.disconnect();
+        };
+        // `selectedLabel` is not read inside: a new name for the selected tab is its length changing, which is a reason to look again.
+        // oxlint-disable-next-line react/exhaustive-effect-dependencies
+    }, [tabs, value, selectedLabel]);
     // Tabs scroll sideways when there are more than fit, and fade at the edge that has more.
     const Wrap = tabs ? FadeScroll : Flex;
     return (_jsx(Wrap, { gap: 2, ...(tabs ? { role: 'tablist' } : {}), css: tabs
@@ -123,7 +166,7 @@ export function ChipRow({ options, value, onChange, tabs = false, }) {
                     position: 'relative',
                     whiteSpace: 'nowrap',
                     transition: 'color 160ms ease',
-                }, children: [selected ? (_jsx(Box, { as: motion.span, layoutId: pill, position: "absolute", radius: "full", background: "accent", transition: { type: 'spring', duration: 0.32, bounce: 0.12 }, 
+                }, children: [selected ? _jsx("span", { ref: marker, hidden: true }) : null, selected ? (_jsx(Box, { as: motion.span, layoutId: pill, position: "absolute", radius: "full", background: "accent", transition: { type: 'spring', duration: 0.32, bounce: 0.12 }, 
                         // Above every chip's own background, whichever way it is going: a later chip paints over
                         // an earlier one's pill otherwise.
                         css: { inset: 0, zIndex: 1 } })) : null, _jsxs(Flex, { as: "span", align: "center", gap: 1.5, position: "relative", minWidth: 0, css: { zIndex: 2 }, 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/energy-chart.js

@@ -4,6 +4,7 @@ import { useState } from 'react';
 import { useEntityHandle } from '../hooks.js';
 import { useEntityHistory } from '../use-entity-history.js';
 import { usageFromDaily } from './energy-usage.js';
+import { AnimatedNumber, decimalsOf } from './animated-number.js';
 import { useDetail } from './detail-provider.js';
 import { RangeSwitcher, SeriesChart } from './series-chart.js';
 const ENERGY_RANGES = [
@@ -53,9 +54,7 @@ function PowerReading({ entity, fallbackUnit }) {
     const handle = useEntityHandle('sensor', entity);
     const sensor = handle.entity;
     const unit = sensor?.unit ?? fallbackUnit;
-    return (_jsx(Typography, { as: "span", variant: "stat", "aria-live": "off", children: handle.status === 'ready' && sensor?.numeric !== undefined
-            ? `${sensor.numeric} ${unit}`
-            : '—' }));
+    return (_jsx(Typography, { as: "span", variant: "stat", "aria-live": "off", children: handle.status === 'ready' && sensor?.numeric !== undefined ? (_jsx(AnimatedNumber, { value: sensor.numeric, format: (n) => `${n.toFixed(decimalsOf(sensor.numeric ?? 0))} ${unit}` })) : ('—') }));
 }
 function LifetimeEnergy({ entity }) {
     const handle = useEntityHandle('sensor', entity);

package/dist/layout/fade-scroll.d.ts

@@ -2,6 +2,8 @@
 import type { Interpolation, Theme } from '@emotion/react';
 import { type FlexProps } from 'e-prim';
 import { type ElementType } from 'react';
+/** How wide the fade at a scrolled edge is. */
+export declare const FADE = 40;
 /**
  * A row that scrolls sideways and fades out at an edge that has more content beyond it, so it
  * reads as scrollable: the right edge while there is more to the right, the left once scrolled.

package/dist/layout/fade-scroll.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 import { Flex } from 'e-prim';
 import { useCallback, useEffect, useRef, useState } from 'react';
 /** How wide the fade at a scrolled edge is. */
-const FADE = 40;
+export const FADE = 40;
 const maskFor = (start, end) => `linear-gradient(to right, ${start ? 'transparent' : '#000'} 0, #000 ${start ? FADE : 0}px, #000 calc(100% - ${end ? FADE : 0}px), ${end ? 'transparent' : '#000'} 100%)`;
 /**
  * A row that scrolls sideways and fades out at an edge that has more content beyond it, so it

package/dist/layout/icon-button-styles.js

@@ -16,7 +16,9 @@ export const iconButtonStyles = ({ palette, radius }) => ({
     transition: 'background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease',
     '&:disabled': { cursor: 'default', opacity: 0.5 },
     "&[data-active='true']": { color: palette.warm },
-    "&[data-feedback='pending']": { opacity: 0.6 },
+    // Waiting: the ring turning around the edge says so, so the button stays as clear as it was.
+    "&[data-feedback='pending']": { position: 'relative', cursor: 'progress' },
+    "&:disabled[data-feedback='pending']": { cursor: 'progress', opacity: 1 },
     "&[data-feedback='done']": { background: palette.accent, color: palette.accentText },
     "&[data-feedback='error']": { color: palette.danger },
     "&[data-primary='true']": { background: palette.accent, color: palette.accentText },

package/dist/layout/spinner.d.ts

@@ -0,0 +1,13 @@
+/** A turning ring: something is in progress and will not say how long it takes. Kept turning when the
+ * app is set to reduced motion (`data-keep-motion`): a spinner that stopped would look stuck, and one
+ * small turning icon costs next to nothing. */
+export declare function Spinner({ size, label }: {
+    size?: number;
+    label?: string;
+}): import("@emotion/react/jsx-runtime").JSX.Element;
+/** A ring that turns around the edge of a round button (give the button `position: relative`): the
+ * button is waiting for an answer and will not take another press. Kept turning under reduced motion
+ * for the same reason `Spinner` is. */
+export declare function SpinnerRing({ label }: {
+    label?: string;
+}): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/layout/spinner.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+/** @jsxImportSource @emotion/react */
+import { keyframes } from '@emotion/react';
+import { Icon } from '../icon.js';
+const turn = keyframes({ to: { transform: 'rotate(360deg)' } });
+/** A turning ring: something is in progress and will not say how long it takes. Kept turning when the
+ * app is set to reduced motion (`data-keep-motion`): a spinner that stopped would look stuck, and one
+ * small turning icon costs next to nothing. */
+export function Spinner({ size = 16, label = 'Loading' }) {
+    return (_jsx("span", { role: "status", "aria-label": label, "data-keep-motion": true, css: {
+            display: 'inline-grid',
+            placeItems: 'center',
+            flex: 'none',
+            animation: `${turn} 0.9s linear infinite`,
+        }, children: _jsx(Icon, { name: "lu:loader-circle", size: size }) }));
+}
+/** A ring that turns around the edge of a round button (give the button `position: relative`): the
+ * button is waiting for an answer and will not take another press. Kept turning under reduced motion
+ * for the same reason `Spinner` is. */
+export function SpinnerRing({ label = 'Loading' }) {
+    return (_jsx("span", { role: "status", "aria-label": label, "data-keep-motion": true, css: ({ palette }) => ({
+            position: 'absolute',
+            inset: 0,
+            pointerEvents: 'none',
+            color: palette.accent,
+            animation: `${turn} 0.9s linear infinite`,
+        }), children: _jsx("svg", { viewBox: "0 0 100 100", width: "100%", height: "100%", "aria-hidden": "true", children: _jsx("circle", { cx: "50", cy: "50", r: "47", fill: "none", stroke: "currentColor", strokeWidth: "5", strokeLinecap: "round", strokeDasharray: "75 221" }) }) }));
+}

package/dist/layout/tile.d.ts

@@ -70,6 +70,6 @@ export declare function IconButton({ icon, label, onClick, disabled, active, pre
     color?: string;
     /** For a toggle: whether it is on, announced to assistive tech (`aria-pressed`). Pair it with `active` to color it. */
     pressed?: boolean;
-    /** Shows the outcome of an action the press started: `pending` dims it, `done` flashes it with the accent, `error` turns it red. Every press also gives a small squeeze. */
+    /** Shows the outcome of an action the press started: `pending` turns a ring around it and stops it taking another press, `done` flashes it with the accent, `error` turns it red. Every press also gives a small squeeze. */
     feedback?: 'pending' | 'done' | 'error' | undefined;
 }): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/layout/tile.js

@@ -4,6 +4,7 @@ import { AnimatePresence, motion } from 'motion/react';
 import { useEffect, useMemo, useRef, useState, } from 'react';
 import { Icon } from '../icon.js';
 import { RoundButton } from './round-button.js';
+import { SpinnerRing } from './spinner.js';
 import { statusLabels } from '../status.js';
 import { BADGE } from '../theme/grid.js';
 import { useDrawer } from './use-drawer.js';
@@ -211,5 +212,6 @@ export function Tile({ label, icon, secondary, status = 'ready', active = false,
                 }, children: [iconBadge, _jsx(Typography, { variant: "label", as: "span", noWrap: true, textOverflow: "ellipsis", position: "relative", grow: 1, minWidth: 0, children: label }), !ready ? (_jsx(Typography, { variant: "secondary", as: "span", noWrap: true, textOverflow: "ellipsis", color: "textMuted", position: "relative", css: { flex: 'none' }, children: statusLabels[status] })) : liveSecondary ? (_jsx(Typography, { variant: "secondary", as: "span", noWrap: true, textOverflow: "ellipsis", color: statusOnAccent ? 'onAccent' : dimColorKey, position: "relative", css: { flex: 'none' }, children: liveSecondary })) : null] })), trailing ? (_jsx(Flex, { align: "center", gap: 2, pr: 2.5, position: "relative", children: trailing })) : null] }));
 }
 export function IconButton({ icon, label, onClick, disabled, active, pressed, primary, size, glyph, color, feedback, }) {
-    return (_jsx(RoundButton, { as: motion.button, ...(size !== undefined ? { size: size * 2 } : {}), ...(color ? { css: { '&&&': { color } } } : {}), whileTap: disabled ? {} : { scale: 0.88 }, transition: { duration: 0.12 }, "data-feedback": feedback, "aria-label": label, title: label, disabled: disabled, "data-active": active, "aria-pressed": pressed, "data-primary": primary, onClick: onClick, children: _jsx(AnimatePresence, { initial: false, mode: "popLayout", children: _jsx(Box, { as: motion.span, css: { display: 'grid' }, initial: { rotate: -90, opacity: 0, scale: 0.6 }, animate: { rotate: 0, opacity: 1, scale: 1 }, exit: { rotate: 90, opacity: 0, scale: 0.6 }, transition: { duration: 0.18 }, children: _jsx(Icon, { name: icon, ...(glyph !== undefined ? { size: glyph } : size !== undefined ? { size } : {}) }) }, icon) }) }));
+    const ring = feedback === 'pending';
+    return (_jsxs(RoundButton, { as: motion.button, ...(size !== undefined ? { size: size * 2 } : {}), ...(color ? { css: { '&&&': { color } } } : {}), whileTap: disabled || feedback === 'pending' ? {} : { scale: 0.88 }, transition: { duration: 0.12 }, "data-feedback": feedback, "aria-label": label, title: label, disabled: disabled || feedback === 'pending', "data-active": active, "aria-pressed": pressed, "data-primary": primary, onClick: onClick, children: [_jsx(AnimatePresence, { initial: false, mode: "popLayout", children: _jsx(Box, { as: motion.span, css: { display: 'grid' }, initial: { rotate: -90, opacity: 0, scale: 0.6 }, animate: { rotate: 0, opacity: 1, scale: 1 }, exit: { rotate: 90, opacity: 0, scale: 0.6 }, transition: { duration: 0.18 }, children: _jsx(Icon, { name: icon, ...(glyph !== undefined ? { size: glyph } : size !== undefined ? { size } : {}) }) }, icon) }), ring ? _jsx(SpinnerRing, {}) : null] }));
 }

package/dist/use-media-queue.js

@@ -1,5 +1,6 @@
 import { useCallback, useEffect, useState } from 'react';
 import { useEntity, useReconnects } from './hooks.js';
+import { useMediaPending } from './entities/media-pending.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;
@@ -19,6 +20,8 @@ export function useMediaQueue(ref) {
     // 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;
+    // Something added to or played from the library changes the queue without changing the track.
+    const asked = useMediaPending(ref).length;
     const has = player?.kind === 'mediaPlayer' && player.capabilities.queue;
     useEffect(() => {
         if (!ref || !has) {
@@ -32,9 +35,9 @@ export function useMediaQueue(ref) {
             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.
+        // `track`, `shuffle`, `tick`, `reconnects` and `asked` 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]);
+    }, [client, ref, has, track, shuffle, tick, reconnects, asked]);
     const answered = state !== undefined && state.ref === ref;
     return {
         queue: answered ? state.queue : undefined,

package/package.json

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