@hashsome/ui 0.1.0 → 0.2.0

package/dist/entities/weather-look.js

@@ -0,0 +1,75 @@
+const SUN = '#FBBF24';
+const CLOUD = '#60A5FA';
+const RAIN = '#3B82F6';
+const SNOW = '#7DD3FC';
+export const CONDITION_LOOK = {
+    sunny: { icon: 'lu:sun', color: SUN },
+    'clear-night': { icon: 'lu:moon', color: '#A5B4FC' },
+    // The cloud is the last shape of `cloud-sun`; the rest is the sun.
+    partlycloudy: { icon: 'lu:cloud-sun', color: SUN, parts: { 5: CLOUD } },
+    cloudy: { icon: 'lu:cloud', color: CLOUD },
+    fog: { icon: 'lu:cloud-fog', parts: { 0: CLOUD } },
+    rainy: { icon: 'lu:cloud-rain', color: RAIN, parts: { 0: CLOUD } },
+    pouring: { icon: 'lu:cloud-rain-wind', color: RAIN, parts: { 0: CLOUD } },
+    snowy: { icon: 'lu:cloud-snow', color: SNOW, parts: { 0: CLOUD } },
+    'snowy-rainy': { icon: 'lu:cloud-snow', color: RAIN, parts: { 0: CLOUD } },
+    hail: { icon: 'lu:cloud-hail', color: SNOW, parts: { 0: CLOUD } },
+    lightning: { icon: 'lu:cloud-lightning', color: SUN, parts: { 0: CLOUD } },
+    'lightning-rainy': { icon: 'lu:cloud-lightning', color: SUN, parts: { 0: CLOUD } },
+    windy: { icon: 'lu:wind' },
+    exceptional: { icon: 'lu:triangle-alert', color: '#F2554A' },
+    unknown: { icon: 'lu:cloud' },
+};
+/** A condition in words. */
+export const CONDITION_LABEL = {
+    sunny: 'Sunny',
+    'clear-night': 'Clear',
+    partlycloudy: 'Partly cloudy',
+    cloudy: 'Cloudy',
+    fog: 'Fog',
+    rainy: 'Rain',
+    pouring: 'Heavy rain',
+    snowy: 'Snow',
+    'snowy-rainy': 'Sleet',
+    hail: 'Hail',
+    lightning: 'Thunderstorm',
+    'lightning-rainy': 'Thunderstorm with rain',
+    windy: 'Windy',
+    exceptional: 'Exceptional weather',
+    unknown: 'Unknown',
+};
+const COMPASS = [
+    'N',
+    'NNE',
+    'NE',
+    'ENE',
+    'E',
+    'ESE',
+    'SE',
+    'SSE',
+    'S',
+    'SSW',
+    'SW',
+    'WSW',
+    'W',
+    'WNW',
+    'NW',
+    'NNW',
+];
+/** The compass point for a bearing in degrees: `225` is `SW`. */
+export function compass(degrees) {
+    return COMPASS[Math.round((((degrees % 360) + 360) % 360) / 22.5) % 16];
+}
+/** How strong a UV index is, in words. */
+export function uvLevel(index) {
+    if (index < 3) {
+        return 'low';
+    }
+    if (index < 6) {
+        return 'moderate';
+    }
+    if (index < 8) {
+        return 'high';
+    }
+    return index < 11 ? 'very high' : 'extreme';
+}

package/dist/gallery/fixtures.js

@@ -1,4 +1,4 @@
-import { LocalClient, mockAction, mockClimate, mockLibrary, mockLight, mockMediaPlayer, mockPerson, mockSensor, MockIntegration, } from '@hashsome/core';
+import { LocalClient, mockAction, mockClimate, mockLibrary, mockLight, mockMediaPlayer, mockPerson, mockSensor, mockWeather, MockIntegration, } from '@hashsome/core';
 /** Album art for the gallery's playing demo, served by the docs dev server from `docs/public/`. */
 // Under the base path the site is served from (`/hash/` on GitHub Pages), not the domain's root.
 const DEMO_ARTWORK = `${import.meta.env.BASE_URL}artwork.jpg`;
@@ -62,6 +62,12 @@ export function createGalleryIntegration() {
             'sensor.lamp_energy': energy('1.64'),
             'sensor.led_power': power('7'),
             'sensor.led_energy': energy('3.2'),
+            'weather.home': mockWeather({
+                name: 'Home',
+                condition: 'partlycloudy',
+                temperature: 12.3,
+                humidity: 71,
+            }),
             'sensor.temperature': mockSensor({ value: '18.04', unit: '°C', measurement: 'temperature' }),
             'sensor.humidity': mockSensor({ value: '64.41', unit: '%', measurement: 'humidity' }),
             'sensor.bedroom_humidity': mockSensor({

package/dist/gallery/gallery.js

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

@@ -157,6 +157,12 @@ export const COMPONENT_PROPS = {
                 optional: true,
                 type: 'LogbookEntry[]',
             },
+            {
+                doc: "An entity whose recent activity to fetch from the backend when the drawer opens, for the same History section (Home Assistant's logbook). `history`, when given, is used instead. A backend that keeps none shows no section.",
+                name: 'logbook',
+                optional: true,
+                type: 'EntityRef',
+            },
         ],
     },
     IconButton: {
@@ -230,6 +236,12 @@ export const COMPONENT_PROPS = {
                 optional: true,
                 type: 'number',
             },
+            {
+                doc: 'For an icon drawn in more than one color: part `i` of the icon (its `i`th shape) is drawn in `colors[i]`, and any part without one, in the surrounding text color. Only for outline icons.',
+                name: 'colors',
+                optional: true,
+                type: 'readonly (string | undefined)[]',
+            },
         ],
     },
     LightTile: {
@@ -260,7 +272,7 @@ export const COMPONENT_PROPS = {
                 type: 'EnergyChartProps',
             },
             {
-                doc: 'Recent activity, shown in the drawer. No default source yet — pass explicitly.',
+                doc: "Recent activity, shown in the drawer: who or what changed it, and when. Left out, it comes from the backend's own record when it keeps one (Home Assistant's logbook), fetched when the drawer opens.",
                 name: 'history',
                 optional: true,
                 type: 'LogbookEntry[]',
@@ -301,7 +313,7 @@ export const COMPONENT_PROPS = {
                 type: 'EnergyChartProps',
             },
             {
-                doc: 'Recent activity, shown in the drawer. No default source yet — pass explicitly.',
+                doc: "Recent activity, shown in the drawer: who or what changed it, and when. Left out, it comes from the backend's own record when it keeps one (Home Assistant's logbook), fetched when the drawer opens.",
                 name: 'history',
                 optional: true,
                 type: 'LogbookEntry[]',
@@ -459,21 +471,33 @@ export const COMPONENT_PROPS = {
             },
         ],
     },
-    MediaPlayerPage: {
-        doc: "The player as a whole page: the player centered, and the player's library below it, so songs are picked right here instead of in a drawer. It is the same layout as the expanded drawer. It fills the height it is given and scrolls inside it.",
+    MediaPlayerFull: {
+        doc: "The big player: the player centered at the top, and the library (or whatever `browser` is) below it. It is what the media cards' drawers show, at every width, and it is the widget a dashboard puts in a page of its own, around it whatever it likes (a surface that fills the space and scrolls, a heading, other cards beside it). It fills the height it is given, so the page that holds it decides how tall that is.",
         props: [
             {
-                doc: 'A media player, as a ref like `ma:living_room`. A ref, not a handle: the library below the player is read through the runtime.',
+                doc: 'The media player, as a ref like `ma:living_room`.',
                 name: 'entity',
                 optional: false,
-                type: 'EntityRef',
+                type: "EntityRef | EntityHandle<'mediaPlayer'>",
             },
             {
-                doc: "What to call the player: the drawer's title and the name shown when nothing is playing. Defaults to the player's own name.",
+                doc: 'What goes below the player, usually the player\'s library: `<MediaBrowser entity="ma:living_room" layout="theater" />`. Left out, only the player is drawn.',
+                name: 'browser',
+                optional: true,
+                type: 'ReactNode',
+            },
+            {
+                doc: 'Calls the player this instead of the name it reports.',
                 name: 'name',
                 optional: true,
                 type: 'string',
             },
+            {
+                doc: 'Gives the library the whole width, for one laid out to use it (the theater layout). Defaults to whether the drawer is expanded.',
+                name: 'wide',
+                optional: true,
+                type: 'boolean',
+            },
         ],
     },
     MediaBrowser: {
@@ -567,7 +591,7 @@ export const COMPONENT_PROPS = {
                 type: '(EntityRef | TopBarScene)[]',
             },
             {
-                doc: 'Current weather as a pill with an icon for the sky and a rounded whole-degree reading. A weather entity, like `ha:weather.forecast_home`, shows its real condition; a plain sensor, e.g. an outdoor temperature, gets a fixed sun.',
+                doc: "Current weather as a pill with an icon for the sky and a rounded whole-degree reading. A weather entity, like `ha:weather.forecast_home`, shows its real condition, today's high and low once its forecast has loaded, and opens the forecast (the next 24 hours and the days ahead) when tapped, if its source has one; a plain sensor, e.g. an outdoor temperature, gets a fixed sun and no forecast.",
                 name: 'weather',
                 optional: true,
                 type: 'EntityRef',
@@ -662,6 +686,23 @@ export const COMPONENT_PROPS = {
             },
         ],
     },
+    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: [
+            {
+                doc: 'A weather entity, as a ref like `ha:weather.forecast_home`. The forecasts it offers (hourly, daily) are read through the runtime.',
+                name: 'entity',
+                optional: false,
+                type: 'EntityRef',
+            },
+            {
+                doc: 'Lay it out for a wide space (readings tiles, a card for each hour, more columns for the days) or for a narrow one. Left out, it follows the drawer it is in.',
+                name: 'expanded',
+                optional: true,
+                type: 'boolean',
+            },
+        ],
+    },
     HashsomeProvider: {
         doc: 'Connects the tree to the runtime proxy. Render only on the client.',
         props: [

package/dist/icon.d.ts

@@ -4,6 +4,8 @@ export interface IconProps {
     name: IconName;
     /** Overrides the density's icon size, in px. */
     size?: number;
+    /** For an icon drawn in more than one color: part `i` of the icon (its `i`th shape) is drawn in `colors[i]`, and any part without one, in the surrounding text color. Only for outline icons. */
+    colors?: readonly (string | undefined)[];
 }
 /** An inline SVG icon, from a plain prefixed id (`lu:` Lucide, `tb:` Tabler outline). Takes the surrounding text color. */
-export declare function Icon({ name, size }: IconProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function Icon({ name, size, colors }: IconProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/icon.js

@@ -7,7 +7,7 @@ const STROKE_WIDTH = 1.5;
  * here (e.g. a future filled pack) renders solid instead. */
 const STROKE_PACKS = new Set(['lu', 'tb']);
 /** An inline SVG icon, from a plain prefixed id (`lu:` Lucide, `tb:` Tabler outline). Takes the surrounding text color. */
-export function Icon({ name, size }) {
+export function Icon({ name, size, colors }) {
     const stroke = STROKE_PACKS.has(name.slice(0, name.indexOf(':')));
     const nodes = ICON_NODES[name];
     if (!nodes) {
@@ -24,5 +24,9 @@ export function Icon({ name, size }) {
                 strokeLinecap: 'round',
                 strokeLinejoin: 'round',
             }
-            : {}), "aria-hidden": "true", children: (nodes ?? []).map(([tag, attrs], i) => createElement(tag, { key: i, ...attrs })) }));
+            : {}), "aria-hidden": "true", children: (nodes ?? []).map(([tag, attrs], i) => createElement(tag, {
+            key: i,
+            ...attrs,
+            ...(stroke && colors?.[i] ? { stroke: colors[i] } : {}),
+        })) }));
 }

package/dist/index.d.ts

@@ -22,7 +22,8 @@ export * from './entities/action-button.tsx';
 export * from './entities/scene-button.tsx';
 export * from './entities/media-player-bar.tsx';
 export * from './entities/media-player-column.tsx';
-export * from './entities/media-player-page.tsx';
+export * from './entities/media-player-full.tsx';
+export * from './entities/weather-forecast.tsx';
 export * from './entities/media-browser.tsx';
 export { formatDuration } from './entities/media-progress.ts';
 export * from './entities/nav-rail.tsx';

package/dist/index.js

@@ -16,7 +16,8 @@ export * from './entities/action-button.js';
 export * from './entities/scene-button.js';
 export * from './entities/media-player-bar.js';
 export * from './entities/media-player-column.js';
-export * from './entities/media-player-page.js';
+export * from './entities/media-player-full.js';
+export * from './entities/weather-forecast.js';
 export * from './entities/media-browser.js';
 export { formatDuration } from './entities/media-progress.js';
 export * from './entities/nav-rail.js';

package/dist/layout/history-section.d.ts

@@ -1,16 +1,6 @@
-export interface LogbookEntry {
-    id: string;
-    /** Lowercase, no actor prefix, e.g. "turned on", "brightness set to 60%" — capitalized when
-     * there's no `actor` to lead with ("Turned on"), left lowercase after one ("Dan turned on"). */
-    message: string;
-    /** ISO 8601. */
-    timestamp: string;
-    /** Who or what triggered it, e.g. "Dan" or "automation.bedtime". Omit for the system. */
-    actor?: string;
-    /** Only matters when `actor` is set: a person gets an initials avatar, an automation a robot
-     * icon. Default `'person'`. */
-    actorKind?: 'person' | 'automation';
-}
+/** @jsxImportSource @emotion/react */
+import type { LogbookEntry } from '@hashsome/core';
+export type { LogbookEntry };
 export interface HistorySectionProps {
     /** Recent activity, newest first. An empty list renders nothing. */
     entries: LogbookEntry[];

package/dist/layout/history-section.js

@@ -1,5 +1,4 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-/** @jsxImportSource @emotion/react */
 import { Flex, Typography } from 'e-prim';
 import { Icon } from '../icon.js';
 import { capitalize } from '../status.js';
@@ -26,14 +25,25 @@ function initials(name) {
         .map((word) => word.charAt(0).toUpperCase())
         .join('');
 }
-function Avatar({ actor, kind }) {
-    const automation = kind === 'automation';
-    return (_jsx(Flex, { align: "center", justify: "center", background: automation ? 'surfaceRaised' : 'accent', color: automation ? 'text' : 'accentText', radius: "full", width: 32, height: 32, css: { flex: 'none' }, children: automation ? (_jsx(Icon, { name: "lu:bot", size: 16 })) : (_jsx(Typography, { as: "span", variant: "eyebrow", children: initials(actor) })) }));
+/** The chip for a row nobody caused: a switch thrown the way it went for on and off, and a chip for
+ * the device coming or going or another mode. */
+const QUIET_ICON = {
+    on: 'lu:toggle-right',
+    off: 'lu:toggle-left',
+    state: 'lu:cpu',
+    availability: 'lu:cpu',
+};
+/** The round picture at the start of a row: initials for a person, a workflow icon for an automation, and
+ * for nobody a quiet chip, so every row's text lines up: a switch for on and off (often someone at
+ * the device's own switch), a chip for the device coming or going. */
+function Avatar({ actor, kind, change, }) {
+    const person = actor !== undefined && kind === 'person';
+    return (_jsx(Flex, { role: "img", "aria-label": actor ?? 'System', align: "center", justify: "center", background: person ? 'accent' : 'surfaceRaised', color: person ? 'accentText' : actor === undefined ? 'textMuted' : 'text', radius: "full", width: 32, height: 32, css: { flex: 'none' }, children: person ? (_jsx(Typography, { as: "span", variant: "eyebrow", children: initials(actor) })) : (_jsx(Icon, { name: actor !== undefined ? 'lu:workflow' : QUIET_ICON[change ?? 'availability'], size: 16 })) }));
 }
 /** A short activity list for an entity's detail drawer. Generic — any entity type can supply it. */
 export function HistorySection({ entries }) {
     if (entries.length === 0) {
         return null;
     }
-    return (_jsxs(Flex, { direction: "column", gap: 4, pt: 4, mt: "auto", children: [_jsx(Typography, { as: "span", variant: "eyebrow", uppercase: true, color: "textMuted", children: "History" }), _jsx(Flex, { direction: "column", children: entries.map((entry) => (_jsxs(Flex, { align: "center", gap: 3, py: 2, children: [entry.actor ? _jsx(Avatar, { actor: entry.actor, kind: entry.actorKind ?? 'person' }) : null, _jsxs(Flex, { direction: "column", minWidth: 0, children: [_jsxs(Typography, { as: "span", variant: "body", noWrap: true, textOverflow: "ellipsis", minWidth: 0, children: [entry.actor ? (_jsxs(Typography, { as: "span", variant: "bodyStrong", children: [entry.actor, ' '] })) : null, entry.actor ? entry.message : capitalize(entry.message)] }), _jsx(Typography, { as: "span", variant: "secondary", color: "textMuted", children: relativeTime(entry.timestamp) })] })] }, entry.id))) })] }));
+    return (_jsxs(Flex, { direction: "column", gap: 4, pt: 4, mt: "auto", children: [_jsx(Typography, { as: "span", variant: "eyebrow", uppercase: true, color: "textMuted", children: "History" }), _jsx(Flex, { direction: "column", children: entries.map((entry) => (_jsxs(Flex, { align: "center", gap: 3, py: 2, children: [_jsx(Avatar, { actor: entry.actor, kind: entry.actorKind ?? 'person', change: entry.change }), _jsxs(Flex, { direction: "column", minWidth: 0, children: [_jsxs(Typography, { as: "span", variant: "body", noWrap: true, textOverflow: "ellipsis", minWidth: 0, children: [entry.actor ? (_jsxs(Typography, { as: "span", variant: "bodyStrong", children: [entry.actor, ' '] })) : null, entry.actor ? entry.message : capitalize(entry.message)] }), _jsx(Typography, { as: "span", variant: "secondary", color: "textMuted", children: relativeTime(entry.timestamp) })] })] }, entry.id))) })] }));
 }

package/dist/layout/logbook-history.d.ts

@@ -0,0 +1,6 @@
+import type { EntityRef } from '@hashsome/core';
+/** A drawer's History section filled from the backend: it asks for the entity's recent activity when
+ * it is drawn (so only when the drawer opens), and shows nothing until there is some. */
+export declare function LogbookHistory({ entity }: {
+    entity: EntityRef;
+}): import("react").JSX.Element | null;

package/dist/layout/logbook-history.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEntityLogbook } from '../use-entity-logbook.js';
+import { HistorySection } from './history-section.js';
+/** A drawer's History section filled from the backend: it asks for the entity's recent activity when
+ * it is drawn (so only when the drawer opens), and shows nothing until there is some. */
+export function LogbookHistory({ entity }) {
+    const { entries } = useEntityLogbook(entity);
+    return entries ? _jsx(HistorySection, { entries: entries }) : null;
+}

package/dist/layout/series-chart.d.ts

@@ -2,18 +2,22 @@ export interface SeriesSample {
     /** ISO 8601. */
     timestamp: string;
     value: number;
+    /** Extra lines the tooltip shows under the value, e.g. the sky and the wind at that hour. */
+    notes?: string[];
 }
 /** The window a chart covers; `custom` is a from/to pair the caller has already applied to the samples. */
 export type SeriesRange = '1h' | '1d' | '1w' | '1m' | 'custom';
 export declare function formatTick(range: SeriesRange, iso: string): string;
 /** A bare sparkline, or — when `expanded` — the full chart with axes, grid and a tooltip. Shared by the power and sensor drawers. */
-export declare function SeriesChart({ samples, range, expanded, unit, fitDomain, }: {
+export declare function SeriesChart({ samples, range, expanded, unit, fitDomain, height, }: {
     samples: SeriesSample[];
     range: SeriesRange;
     expanded: boolean;
     unit: string;
     /** Fit the y axis to the data instead of starting at 0 — right for temperature/humidity, wrong for power. */
     fitDomain?: boolean;
+    /** The chart's height in px. Default 48 for the sparkline, 220 when expanded. */
+    height?: number;
 }): import("@emotion/react/jsx-runtime").JSX.Element;
 export declare function RangeSwitcher<T extends string>({ range, options, onChange, }: {
     range: T;

package/dist/layout/series-chart.js

@@ -14,12 +14,12 @@ export function formatTick(range, iso) {
     return date.toLocaleDateString([], { month: 'short', day: 'numeric' });
 }
 /** A bare sparkline, or — when `expanded` — the full chart with axes, grid and a tooltip. Shared by the power and sensor drawers. */
-export function SeriesChart({ samples, range, expanded, unit, fitDomain = false, }) {
+export function SeriesChart({ samples, range, expanded, unit, fitDomain = false, height, }) {
     const accent = useColorByKey('accent') ?? '';
     const textMuted = useColorByKey('textMuted') ?? '';
     const line = useColorByKey('line') ?? '';
     const tickSize = useTypographySize('secondary');
-    return (_jsx(Box, { height: expanded ? 220 : 48, mt: 3, children: _jsx(ResponsiveContainer, { width: "100%", height: "100%", children: _jsxs(AreaChart, { data: samples, margin: { top: 4, right: 0, bottom: 0, left: 0 }, children: [expanded ? _jsx(CartesianGrid, { stroke: line, strokeDasharray: "3 3", vertical: false }) : null, expanded ? (_jsx(XAxis, { dataKey: "timestamp", tickFormatter: (value) => formatTick(range, value), tick: { fontSize: tickSize, fill: textMuted }, axisLine: false, tickLine: false, minTickGap: 24 })) : null, expanded ? (_jsx(YAxis, { width: 36, ...(fitDomain ? { domain: ['auto', 'auto'] } : {}), tick: { fontSize: tickSize, fill: textMuted }, axisLine: false, tickLine: false })) : null, _jsx(Tooltip, { content: _jsx(ChartTooltip, { unit: unit }), ...(expanded
+    return (_jsx(Box, { height: height ?? (expanded ? 220 : 48), mt: 3, children: _jsx(ResponsiveContainer, { width: "100%", height: "100%", children: _jsxs(AreaChart, { data: samples, margin: { top: 4, right: 0, bottom: 0, left: 0 }, children: [expanded ? _jsx(CartesianGrid, { stroke: line, strokeDasharray: "3 3", vertical: false }) : null, expanded ? (_jsx(XAxis, { dataKey: "timestamp", tickFormatter: (value) => formatTick(range, value), tick: { fontSize: tickSize, fill: textMuted }, axisLine: false, tickLine: false, minTickGap: 24 })) : null, expanded ? (_jsx(YAxis, { width: 36, ...(fitDomain ? { domain: ['auto', 'auto'] } : {}), tick: { fontSize: tickSize, fill: textMuted }, axisLine: false, tickLine: false })) : null, _jsx(Tooltip, { content: _jsx(ChartTooltip, { unit: unit }), ...(expanded
                             ? {}
                             : { allowEscapeViewBox: { x: false, y: true }, position: { y: -52 } }) }), _jsx(Area, { type: "monotone", dataKey: "value", stroke: accent, fill: accent, fillOpacity: 0.2, strokeWidth: 2, dot: false, isAnimationActive: false })] }) }) }));
 }
@@ -42,5 +42,5 @@ function ChartTooltip({ active, payload, unit, }) {
                         day: 'numeric',
                         hour: '2-digit',
                         minute: '2-digit',
-                    }) }), _jsxs(Typography, { as: "span", variant: "bodyStrong", children: [Math.round(sample.value * 10) / 10, " ", unit] })] }) }));
+                    }) }), _jsxs(Typography, { as: "span", variant: "bodyStrong", children: [Math.round(sample.value * 10) / 10, " ", unit] }), sample.notes?.map((note) => (_jsx(Typography, { as: "span", variant: "secondary", color: "textMuted", children: note }, note)))] }) }));
 }

package/dist/layout/tile.d.ts

@@ -1,3 +1,5 @@
+/** @jsxImportSource @emotion/react */
+import type { EntityRef } from '@hashsome/core';
 import { type ReactNode } from 'react';
 import type { IconName } from '../icon-data.ts';
 import { type EntityStatus } from '../status.ts';
@@ -44,9 +46,15 @@ export interface TileProps {
      * type — whichever component has a way to fetch it just passes it through.
      */
     history?: LogbookEntry[];
+    /**
+     * An entity whose recent activity to fetch from the backend when the drawer opens, for the same
+     * History section (Home Assistant's logbook). `history`, when given, is used instead. A backend
+     * that keeps none shows no section.
+     */
+    logbook?: EntityRef;
 }
 /** Base pill used by all entity tiles. Tap to press; hold (with `detail` set) to open the drawer. */
-export declare function Tile({ label, icon, secondary, status, active, feedback, onPress, fill, onFillChange, trailing, overlay, title, detail, kind, energy, history, }: TileProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function Tile({ label, icon, secondary, status, active, feedback, onPress, fill, onFillChange, trailing, overlay, title, detail, kind, energy, history, logbook, }: TileProps): import("@emotion/react/jsx-runtime").JSX.Element;
 export declare function IconButton({ icon, label, onClick, disabled, active, pressed, primary, size, glyph, color, feedback, }: {
     icon: IconName;
     label: string;

package/dist/layout/tile.js

@@ -1,5 +1,4 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-/** @jsxImportSource @emotion/react */
 import { Box, Flex, Typography, useColorByKey } from 'e-prim';
 import { AnimatePresence, motion } from 'motion/react';
 import { useEffect, useMemo, useRef, useState, } from 'react';
@@ -9,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 { LogbookHistory } from './logbook-history.js';
 const DRAG_THRESHOLD = 8;
 const KEY_STEP = 0.05;
 const HOLD_MS = 500;
@@ -19,11 +19,15 @@ const valueAt = (event) => {
     return rect.width > 0 ? clamp01((event.clientX - rect.left) / rect.width) : 0;
 };
 /** Base pill used by all entity tiles. Tap to press; hold (with `detail` set) to open the drawer. */
-export function Tile({ label, icon, secondary, status = 'ready', active = false, feedback, onPress, fill, onFillChange, trailing, overlay, title, detail, kind, energy, history, }) {
+export function Tile({ label, icon, secondary, status = 'ready', active = false, feedback, onPress, fill, onFillChange, trailing, overlay, title, detail, kind, energy, history, logbook, }) {
     const ready = status === 'ready';
     const adjustable = fill !== undefined && onFillChange !== undefined && ready;
-    const holdable = (detail !== undefined || energy !== undefined || history !== undefined) && ready;
-    const drawerBody = useMemo(() => (_jsxs(_Fragment, { children: [detail, energy ? _jsx(EnergyChart, { ...energy }) : null, history ? _jsx(HistorySection, { entries: history }) : null] })), [detail, energy, history]);
+    const holdable = (detail !== undefined ||
+        energy !== undefined ||
+        history !== undefined ||
+        logbook !== undefined) &&
+        ready;
+    const drawerBody = useMemo(() => (_jsxs(_Fragment, { children: [detail, energy ? _jsx(EnergyChart, { ...energy }) : null, history ? (_jsx(HistorySection, { entries: history })) : logbook ? (_jsx(LogbookHistory, { entity: logbook })) : null] })), [detail, energy, history, logbook]);
     const [drag, setDrag] = useState(null);
     const [holding, setHolding] = useState(false);
     const start = useRef(null);

package/dist/use-entity-logbook.d.ts

@@ -0,0 +1,13 @@
+import type { EntityRef, LogbookEntry } from '@hashsome/core';
+export interface EntityLogbookState {
+    /** `undefined` until the first answer, and always for a backend that keeps no activity. */
+    entries: LogbookEntry[] | undefined;
+    loading: boolean;
+}
+/**
+ * What happened to an entity lately and who or what caused it, from the backend's own record,
+ * fetched when `ref` changes and kept for half a minute. A backend that keeps no activity, or an
+ * error, leaves `entries` undefined: activity is an extra, so a component just shows nothing. Pass
+ * `undefined` to not ask at all.
+ */
+export declare function useEntityLogbook(ref: EntityRef | undefined): EntityLogbookState;

package/dist/use-entity-logbook.js

@@ -0,0 +1,42 @@
+import { useEffect, useState } from 'react';
+import { useClient } from './provider.js';
+/** How long an answer is reused: closing and reopening a drawer does not ask again. */
+const FRESH_MS = 30_000;
+/** How many entries a drawer's History section lists. */
+const LIMIT = 6;
+const cache = new WeakMap();
+function load(client, ref) {
+    const answers = cache.get(client) ?? new Map();
+    cache.set(client, answers);
+    const known = answers.get(ref);
+    if (known && Date.now() - known.at < FRESH_MS) {
+        return known.entries;
+    }
+    const entries = client.logbook(ref, { limit: LIMIT }).then((result) => result.entries);
+    answers.set(ref, { at: Date.now(), entries });
+    // A failed answer is not worth keeping: the next ask tries again.
+    entries.catch(() => answers.delete(ref));
+    return entries;
+}
+/**
+ * What happened to an entity lately and who or what caused it, from the backend's own record,
+ * fetched when `ref` changes and kept for half a minute. A backend that keeps no activity, or an
+ * error, leaves `entries` undefined: activity is an extra, so a component just shows nothing. Pass
+ * `undefined` to not ask at all.
+ */
+export function useEntityLogbook(ref) {
+    const client = useClient();
+    const [state, setState] = useState();
+    useEffect(() => {
+        if (!ref) {
+            return;
+        }
+        let current = true;
+        load(client, ref).then((entries) => current && setState({ ref, entries }), () => current && setState({ ref, entries: undefined }));
+        return () => {
+            current = false;
+        };
+    }, [client, ref]);
+    const answered = state !== undefined && state.ref === ref;
+    return { entries: answered ? state.entries : undefined, loading: ref !== undefined && !answered };
+}