@hashsome/ui 0.1.0 → 0.3.0

package/dist/entities/top-bar.js

@@ -7,7 +7,12 @@ import { fallbackName } from '../entity-handle.js';
 import { useConnectionStatus, useEntity, useEntityHandle, useIntegrationStatuses, } from '../hooks.js';
 import { Icon } from '../icon.js';
 import { statusLabels } from '../status.js';
+import { DrawerTrigger } from '../layout/use-drawer.js';
+import { useWeatherForecast } from '../use-weather-forecast.js';
 import { SensorReadout } from './sensor-readout.js';
+import { WeatherForecast } from './weather-forecast.js';
+import { WeatherIcon } from './weather-icon.js';
+import { CONDITION_LOOK } from './weather-look.js';
 /** The colors presence avatars without a picture fall back to when `presenceColors` isn't given. */
 const DEFAULT_PRESENCE_COLORS = ['#8B5CF6', '#34D399', '#60A5FA', '#F472B6', '#FBBF24', '#FB923C'];
 /** Picks one of `colors` for `id`, the same one every time (a presence avatar's color). */
@@ -54,6 +59,8 @@ export function TopBar({ title, dashboards, scenes, weather, extra, presence, pe
                             return (_jsx(SceneDot, { entity: entity, ...(color ? { color } : {}), ...(icon ? { icon } : {}) }, entity));
                         }) })) : null] }), _jsxs(Flex, { align: "center", gap: 3, children: [showDate ? _jsx(DateChip, {}) : null, weather ? _jsx(WeatherChip, { entity: weather }) : null, extra, presence ? (_jsx(StatusChip, { children: _jsx(SensorReadout, { entity: presence, drawer: false }) })) : null, people?.length ? (_jsx(PresenceStack, { entities: people, ...(presenceColors ? { colors: presenceColors } : {}) })) : null, showClock ? _jsx(Clock, { format: clockFormat }) : null, showStatus ? _jsx(SystemStatus, {}) : null] })] }));
 }
+/** The height of the switcher's button, and of each entry in its list. */
+const SWITCHER_HEIGHT = 40;
 function DashboardSwitcher({ title, dashboards, }) {
     const [open, setOpen] = useState(false);
     const navigate = useNavigate();
@@ -63,14 +70,16 @@ function DashboardSwitcher({ title, dashboards, }) {
     // The dashboard being shown: the one whose route the address is under, else the one the title names.
     const current = dashboards.find((d) => pathname === `/${d.id}` || pathname.startsWith(`/${d.id}/`)) ??
         dashboards.find((d) => d.title === title);
-    return (_jsxs(Flex, { ref: ref, position: "relative", children: [_jsxs(Flex, { as: "button", type: "button", onClick: () => setOpen((o) => !o), "aria-haspopup": "listbox", "aria-expanded": open, align: "center", justify: "center", gap: 2, cursor: "pointer", color: "text", background: "surface", border: true, height: 40, px: 4, radius: "chrome", children: [current?.icon ? _jsx(Icon, { name: current.icon, size: 20 }) : null, _jsx(Typography, { as: "h1", variant: "title", children: title }), _jsx(Icon, { name: "lu:chevron-down", size: 20 })] }), open ? (_jsx(Flex, { as: "ul", role: "listbox", direction: "column", background: "surfaceRaised", radius: "row", shadow: "drawer", p: 1.5, gap: 0.5, position: "absolute", zIndex: "dropdown", mt: 2, minWidth: "100%", css: { top: '100%', left: 0, listStyle: 'none', whiteSpace: 'nowrap' }, children: dashboards.map((d) => {
+    return (_jsxs(Flex, { ref: ref, position: "relative", children: [_jsxs(Flex, { as: "button", type: "button", onClick: () => setOpen((o) => !o), "aria-haspopup": "listbox", "aria-expanded": open, align: "center", justify: "center", gap: 2, cursor: "pointer", color: "text", background: "surface", border: true, height: SWITCHER_HEIGHT, px: 4, radius: "chrome", children: [current?.icon ? _jsx(Icon, { name: current.icon, size: 20 }) : null, _jsx(Typography, { as: "h1", variant: "title", children: title }), _jsx(Icon, { name: "lu:chevron-down", size: 20 })] }), open ? (_jsx(Flex, { as: "ul", role: "listbox", direction: "column", background: "surfaceRaised", radius: "row", shadow: "drawer", p: 1.5, gap: 0.5, position: "absolute", zIndex: "dropdown", mt: 2, minWidth: "100%", css: { top: '100%', left: 0, listStyle: 'none', whiteSpace: 'nowrap' }, children: dashboards.map((d) => {
                     const active = d.id === current?.id;
                     return (_jsx("li", { role: "none", children: _jsxs(Flex, { as: "button", type: "button", role: "option", "aria-selected": active, 
                             // Already here: marked, and nothing to switch to.
                             disabled: active, onClick: () => {
                                 setOpen(false);
                                 navigate(`/${d.id}`);
-                            }, align: "center", gap: 2, width: "100%", radius: "small", px: 2, py: 1.5, color: "text", background: active ? 'surface' : 'transparent', cursor: active ? 'default' : 'pointer', css: { textAlign: 'left' }, children: [d.icon ? _jsx(Icon, { name: d.icon, size: 16 }) : null, _jsx(Typography, { as: "span", variant: "body", grow: 1, children: d.title }), active ? _jsx(Icon, { name: "lu:check", size: 16 }) : null] }) }, d.id));
+                            }, align: "center", gap: 2, width: "100%", 
+                            // As tall as the button that opened the list, so an entry is as easy to hit on a touch screen.
+                            height: SWITCHER_HEIGHT, radius: "small", px: 3, color: "text", background: active ? 'surface' : 'transparent', cursor: active ? 'default' : 'pointer', css: { textAlign: 'left' }, children: [d.icon ? _jsx(Icon, { name: d.icon, size: 16 }) : null, _jsx(Typography, { as: "span", variant: "body", grow: 1, children: d.title }), active ? _jsx(Icon, { name: "lu:check", size: 16 }) : null] }) }, d.id));
                 }) })) : null] }));
 }
 const HEALTH_COLORS = {
@@ -128,24 +137,6 @@ export function SystemStatus({ link: linkOverride, statuses: statusesOverride, d
 function StatusChip({ children }) {
     return (_jsx(Flex, { align: "center", gap: 2, background: "surface", border: true, radius: "full", px: 3.5, py: 2.5, children: children }));
 }
-/** What a condition looks like in the pill: an icon, and a color where the weather has one. */
-const CONDITION_LOOK = {
-    sunny: { icon: 'lu:sun', color: '#FBBF24' },
-    'clear-night': { icon: 'lu:moon', color: '#A5B4FC' },
-    partlycloudy: { icon: 'lu:cloud-sun', color: '#FBBF24' },
-    cloudy: { icon: 'lu:cloud' },
-    fog: { icon: 'lu:cloud-fog' },
-    rainy: { icon: 'lu:cloud-rain', color: '#60A5FA' },
-    pouring: { icon: 'lu:cloud-rain-wind', color: '#60A5FA' },
-    snowy: { icon: 'lu:cloud-snow', color: '#BAE6FD' },
-    'snowy-rainy': { icon: 'lu:cloud-snow', color: '#93C5FD' },
-    hail: { icon: 'lu:cloud-hail', color: '#93C5FD' },
-    lightning: { icon: 'lu:cloud-lightning', color: '#FBBF24' },
-    'lightning-rainy': { icon: 'lu:cloud-lightning', color: '#FBBF24' },
-    windy: { icon: 'lu:wind' },
-    exceptional: { icon: 'lu:triangle-alert', color: '#F2554A' },
-    unknown: { icon: 'lu:cloud' },
-};
 /** Current weather, as a pill: an icon for the sky and a rounded whole-degree reading. A `weather`
  * entity gives the real condition; a plain `sensor.*` (an outdoor temperature) gets a fixed sun,
  * since a sensor says nothing about the sky. */
@@ -156,11 +147,23 @@ function WeatherPill({ entity }) {
     const handle = useEntityHandle('weather', entity);
     const { status } = handle;
     const weather = handle.entity;
-    const look = CONDITION_LOOK[weather?.condition ?? 'unknown'];
+    const condition = weather?.condition ?? 'unknown';
+    const look = CONDITION_LOOK[condition];
     const ready = status === 'ready' && weather?.temperature !== undefined;
-    return (_jsxs(StatusChip, { children: [_jsx(Flex, { as: "span", css: look.color ? { color: look.color } : undefined, children: _jsx(Icon, { name: look.icon, size: 14 }) }), _jsx(Typography, { as: "span", variant: "label", children: ready
+    const forecastable = ready && (weather?.forecasts?.length ?? 0) > 0;
+    // Today's high and low sit under the reading, once the forecast has said what they are.
+    const daily = useWeatherForecast(weather?.forecasts?.includes('daily') ? entity : undefined, 'daily');
+    const today = daily.result?.points.find((point) => new Date(point.timestamp).toDateString() === new Date().toDateString()) ?? daily.result?.points[0];
+    const range = today?.temperature !== undefined && today.low !== undefined
+        ? `${Math.round(today.temperature)}° / ${Math.round(today.low)}°`
+        : undefined;
+    const chip = (_jsxs(StatusChip, { children: [_jsx(Flex, { as: "span", children: _jsx(WeatherIcon, { condition: condition, size: 14 }) }), _jsx(Typography, { as: "span", variant: "label", children: ready
                     ? `${Math.round(weather.temperature ?? 0)}°`
-                    : statusLabels[status] })] }));
+                    : statusLabels[status] }), ready && range ? (_jsx(Typography, { as: "span", variant: "secondary", color: "textMuted", children: range })) : null] }));
+    if (!forecastable) {
+        return chip;
+    }
+    return (_jsx(DrawerTrigger, { icon: look.icon, label: weather?.name ?? 'Weather', kind: "Weather", body: _jsx(WeatherForecast, { entity: entity }), children: (open) => (_jsx(PlainButton, { "aria-label": `${weather?.name ?? 'Weather'}: forecast`, onClick: open, children: chip })) }));
 }
 function SensorWeather({ entity }) {
     const handle = useEntityHandle('sensor', entity);

package/dist/entities/weather-forecast.d.ts

@@ -0,0 +1,13 @@
+/** @jsxImportSource @emotion/react */
+import type { EntityRef } from '@hashsome/core';
+export interface WeatherForecastProps {
+    /** A weather entity, as a ref like `ha:weather.forecast_home`. The forecasts it offers (hourly, daily) are read through the runtime. */
+    entity: EntityRef;
+    /** 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. */
+    expanded?: boolean;
+}
+/** 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. */
+export declare function WeatherForecast({ entity, expanded: layout }: WeatherForecastProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/entities/weather-forecast.js

@@ -0,0 +1,148 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { Box, Flex, Typography } from 'e-prim';
+import { useEntityHandle } from '../hooks.js';
+import { Icon } from '../icon.js';
+import { useDetail } from '../layout/detail-provider.js';
+import { SeriesChart } from '../layout/series-chart.js';
+import { useWeatherForecast } from '../use-weather-forecast.js';
+import { WeatherIcon } from './weather-icon.js';
+import { compass, CONDITION_LABEL, uvLevel } from './weather-look.js';
+/** How many hours the chart and the hourly cards cover. */
+const HOURS = 24;
+/** Hours between the labelled points under the chart in the narrow drawer. */
+const EVERY = 4;
+const degrees = (value) => value === undefined ? '–' : `${Math.round(value)}°`;
+const tenths = (value) => Math.round(value * 10) / 10;
+const sameDay = (a, b) => a.toDateString() === b.toDateString();
+function dayName(iso, now) {
+    const date = new Date(iso);
+    if (sameDay(date, now)) {
+        return 'Today';
+    }
+    const tomorrow = new Date(now);
+    tomorrow.setDate(now.getDate() + 1);
+    return sameDay(date, tomorrow) ? 'Tomorrow' : date.toLocaleDateString([], { weekday: 'long' });
+}
+const hourName = (iso) => new Date(iso).toLocaleTimeString([], { hour: 'numeric' });
+/** `15 km/h from WNW`, with what there is of it. */
+function windText(speed, bearing, unit) {
+    return `${Math.round(speed)}${unit ? ` ${unit}` : ''}${bearing !== undefined ? ` from ${compass(bearing)}` : ''}`;
+}
+/** `60% · 0.4 mm`, for the rain a step has: a chance, an amount, or both. Nothing for a dry step. */
+function rainText(point, unit) {
+    const parts = [
+        ...(point.precipitationProbability ? [`${Math.round(point.precipitationProbability)}%`] : []),
+        ...(point.precipitation ? [`${tenths(point.precipitation)} ${unit ?? 'mm'}`] : []),
+    ];
+    return parts.length > 0 ? parts.join(' · ') : undefined;
+}
+/** Everything a step knows, a line each, for the chart's hover: the sky, the wind, the rain, the
+ * air, the sun and the pressure. What the source did not give is left out. */
+function describeStep(point, result) {
+    const rain = rainText(point, result?.precipitationUnit);
+    const air = [
+        ...(point.humidity !== undefined ? [`Humidity ${Math.round(point.humidity)}%`] : []),
+        ...(point.cloudCoverage !== undefined
+            ? [`Cloud cover ${Math.round(point.cloudCoverage)}%`]
+            : []),
+    ];
+    const sun = [
+        ...(point.uvIndex !== undefined
+            ? [`UV ${tenths(point.uvIndex)} (${uvLevel(point.uvIndex)})`]
+            : []),
+        ...(point.apparentTemperature !== undefined
+            ? [`Feels like ${degrees(point.apparentTemperature)}`]
+            : []),
+    ];
+    return [
+        CONDITION_LABEL[point.condition],
+        ...(point.windSpeed !== undefined
+            ? [
+                `Wind ${windText(point.windSpeed, point.windBearing, result?.windUnit)}${point.windGustSpeed !== undefined ? `, gusts ${Math.round(point.windGustSpeed)}` : ''}`,
+            ]
+            : []),
+        ...(rain ? [`Rain ${rain}`] : []),
+        ...(air.length > 0 ? [air.join(' · ')] : []),
+        ...(sun.length > 0 ? [sun.join(' · ')] : []),
+        ...(point.pressure !== undefined
+            ? [
+                `Pressure ${Math.round(point.pressure)}${result?.pressureUnit ? ` ${result.pressureUnit}` : ''}`,
+            ]
+            : []),
+    ];
+}
+function ConditionIcon({ condition, size, }) {
+    return (_jsx(Flex, { as: "span", children: _jsx(WeatherIcon, { condition: condition, size: size }) }));
+}
+/** An arrow that points the way the wind blows (it comes from `bearing`, so it points the other way). */
+function WindArrow({ bearing, size }) {
+    return (_jsx(Flex, { as: "span", css: { transform: `rotate(${bearing + 180}deg)` }, children: _jsx(Icon, { name: "lu:arrow-up", size: size }) }));
+}
+/** One small reading with an icon in front of it. */
+function Metric({ icon, children }) {
+    return (_jsxs(Flex, { align: "center", gap: 1, color: "textMuted", children: [typeof icon === 'string' ? _jsx(Icon, { name: icon, size: 12 }) : icon, _jsx(Typography, { as: "span", variant: "secondary", color: "textMuted", noWrap: true, children: children })] }));
+}
+/** The wind as a metric: an arrow the way it blows, and its speed. */
+function WindMetric({ point, unit }) {
+    return point.windSpeed === undefined ? null : (_jsxs(Metric, { icon: point.windBearing !== undefined ? (_jsx(WindArrow, { bearing: point.windBearing, size: 12 })) : ('lu:wind'), children: [Math.round(point.windSpeed), unit ? ` ${unit}` : ''] }));
+}
+/** A tile with a label and a value, for the current readings of the expanded drawer. */
+function Stat({ label, children }) {
+    return (_jsxs(Flex, { direction: "column", gap: 0.5, border: true, radius: "row", px: 3, py: 2.5, children: [_jsx(Typography, { as: "span", variant: "secondary", color: "textMuted", children: label }), _jsx(Typography, { as: "span", variant: "bodyStrong", children: children })] }));
+}
+/** The readings the weather has now, from the entity and, for what it lacks, the hour that is
+ * under way (a source may give UV or cloud cover only in its forecast). */
+function currentReadings(weather, soon) {
+    return {
+        uv: weather?.uvIndex ?? soon?.uvIndex,
+        cloud: weather?.cloudCoverage ?? soon?.cloudCoverage,
+        feels: weather?.apparentTemperature ?? soon?.apparentTemperature,
+        pressure: weather?.pressure ?? soon?.pressure,
+        humidity: weather?.humidity ?? soon?.humidity,
+    };
+}
+/** 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. */
+export function WeatherForecast({ entity, expanded: layout }) {
+    const handle = useEntityHandle('weather', entity);
+    const weather = handle.entity;
+    const hourly = useWeatherForecast(weather?.forecasts?.includes('hourly') ? entity : undefined, 'hourly');
+    const daily = useWeatherForecast(weather?.forecasts?.includes('daily') ? entity : undefined, 'daily');
+    const { detail } = useDetail();
+    const expanded = layout ?? detail?.expanded ?? false;
+    const now = new Date();
+    const hours = (hourly.result?.points ?? []).slice(0, HOURS);
+    const along = hours.filter((_, index) => index % EVERY === 0);
+    const reading = currentReadings(weather, hours[0]);
+    const windUnit = hourly.result?.windUnit ?? weather?.windUnit;
+    const days = daily.result?.points ?? [];
+    const lows = days.flatMap((day) => (day.low !== undefined ? [day.low] : []));
+    const highs = days.flatMap((day) => (day.temperature !== undefined ? [day.temperature] : []));
+    const coldest = Math.min(...lows);
+    const warmest = Math.max(...highs);
+    const span = warmest - coldest;
+    return (_jsxs(Flex, { direction: "column", gap: 5, children: [_jsxs(Flex, { align: "center", gap: 3, children: [_jsx(ConditionIcon, { condition: weather?.condition ?? 'unknown', size: expanded ? 56 : 40 }), _jsxs(Flex, { direction: "column", children: [_jsx(Typography, { as: "span", variant: "heading", children: degrees(weather?.temperature) }), _jsxs(Typography, { as: "span", variant: "secondary", color: "textMuted", children: [CONDITION_LABEL[weather?.condition ?? 'unknown'], reading.humidity !== undefined ? ` · ${Math.round(reading.humidity)}% humidity` : '', reading.uv !== undefined ? ` · UV ${tenths(reading.uv)} (${uvLevel(reading.uv)})` : ''] }), weather?.windSpeed !== undefined ? (_jsxs(Flex, { align: "center", gap: 1, color: "textMuted", children: [weather.windBearing !== undefined ? (_jsx(WindArrow, { bearing: weather.windBearing, size: 12 })) : null, _jsxs(Typography, { as: "span", variant: "secondary", color: "textMuted", children: ["Wind ", windText(weather.windSpeed, weather.windBearing, weather.windUnit)] })] })) : null] })] }), expanded ? (_jsxs(Box, { css: {
+                    display: 'grid',
+                    gap: 12,
+                    gridTemplateColumns: 'repeat(auto-fill, minmax(150px, 1fr))',
+                }, children: [reading.feels !== undefined ? (_jsx(Stat, { label: "Feels like", children: degrees(reading.feels) })) : null, reading.humidity !== undefined ? (_jsxs(Stat, { label: "Humidity", children: [Math.round(reading.humidity), "%"] })) : null, weather?.windSpeed !== undefined ? (_jsx(Stat, { label: "Wind", children: windText(weather.windSpeed, weather.windBearing, weather.windUnit) })) : null, reading.uv !== undefined ? (_jsxs(Stat, { label: "UV index", children: [tenths(reading.uv), " \u00B7 ", uvLevel(reading.uv)] })) : null, reading.cloud !== undefined ? (_jsxs(Stat, { label: "Cloud cover", children: [Math.round(reading.cloud), "%"] })) : null, reading.pressure !== undefined ? (_jsxs(Stat, { label: "Pressure", children: [Math.round(reading.pressure), weather?.pressureUnit ? ` ${weather.pressureUnit}` : ''] })) : null] })) : null, hours.length > 0 ? (_jsxs(Flex, { direction: "column", gap: 1, children: [_jsx(Typography, { as: "h3", variant: "label", color: "textMuted", m: 0, children: "Next 24 hours" }), _jsx(SeriesChart, { samples: hours.flatMap((hour) => hour.temperature !== undefined
+                            ? [
+                                {
+                                    timestamp: hour.timestamp,
+                                    value: hour.temperature,
+                                    notes: describeStep(hour, hourly.result),
+                                },
+                            ]
+                            : []), range: "1d", expanded: expanded, unit: hourly.result?.unit ?? '°', fitDomain: true, height: expanded ? 180 : 88 }), expanded ? (_jsx(Box, { mt: 2, children: _jsx(Flex, { css: { overflowX: 'auto', paddingBottom: 4 }, children: hours.map((hour) => {
+                                const rain = rainText(hour, hourly.result?.precipitationUnit);
+                                return (_jsxs(Flex, { direction: "column", align: "center", gap: 1.5, px: 2, py: 1, css: { flex: '1 0 84px' }, children: [_jsx(Typography, { as: "span", variant: "secondary", color: "textMuted", children: hourName(hour.timestamp) }), _jsx(ConditionIcon, { condition: hour.condition, size: 26 }), _jsx(Typography, { as: "span", variant: "bodyStrong", children: degrees(hour.temperature) }), _jsxs(Flex, { direction: "column", align: "center", gap: 0.5, children: [rain ? _jsx(Metric, { icon: "lu:umbrella", children: rain }) : null, _jsx(WindMetric, { point: hour, unit: windUnit }), hour.humidity !== undefined ? (_jsxs(Metric, { icon: "lu:droplets", children: [Math.round(hour.humidity), "%"] })) : null, hour.uvIndex !== undefined && hour.uvIndex > 0 ? (_jsxs(Metric, { icon: "lu:sun", children: ["UV ", tenths(hour.uvIndex)] })) : null] })] }, hour.timestamp));
+                            }) }) })) : (_jsx(Flex, { justify: "space-between", mt: 1, children: along.map((hour) => (_jsxs(Flex, { direction: "column", align: "center", gap: 1, grow: 1, css: { flexBasis: 0 }, children: [_jsx(Typography, { as: "span", variant: "secondary", color: "textMuted", children: hourName(hour.timestamp) }), _jsx(ConditionIcon, { condition: hour.condition, size: 18 }), _jsx(Typography, { as: "span", variant: "label", children: degrees(hour.temperature) })] }, hour.timestamp))) }))] })) : null, days.length > 0 ? (_jsxs(Flex, { direction: "column", gap: 2, children: [_jsxs(Typography, { as: "h3", variant: "label", color: "textMuted", m: 0, children: [days.length, " days"] }), _jsx(Flex, { as: "ul", direction: "column", gap: 1, m: 0, p: 0, css: { listStyle: 'none' }, children: days.map((day) => {
+                            const rain = rainText(day, daily.result?.precipitationUnit);
+                            return (_jsxs(Flex, { as: "li", align: "center", gap: 3, py: 1.5, children: [_jsx(Typography, { as: "span", variant: "body", width: 104, noWrap: true, children: dayName(day.timestamp, now) }), _jsx(ConditionIcon, { condition: day.condition, size: 20 }), _jsx(Typography, { as: "span", variant: "secondary", color: "textMuted", width: expanded ? 90 : 40, noWrap: true, children: rain ?? '' }), _jsx(Typography, { as: "span", variant: "label", color: "textMuted", width: 36, css: { textAlign: 'right' }, children: degrees(day.low) }), _jsx(Box, { grow: 1, height: 6, radius: "full", background: "surfaceRaised", position: "relative", children: span > 0 && day.low !== undefined && day.temperature !== undefined ? (_jsx(Box, { position: "absolute", height: 6, radius: "full", background: "accent", css: {
+                                                left: `${((day.low - coldest) / span) * 100}%`,
+                                                width: `${((day.temperature - day.low) / span) * 100}%`,
+                                            } })) : null }), _jsx(Typography, { as: "span", variant: "label", width: 36, children: degrees(day.temperature) }), expanded ? (_jsxs(Flex, { gap: 4, css: { flex: 'none' }, children: [_jsx(Box, { width: 84, children: _jsx(WindMetric, { point: day, unit: daily.result?.windUnit }) }), _jsx(Box, { width: 64, children: day.humidity !== undefined ? (_jsxs(Metric, { icon: "lu:droplets", children: [Math.round(day.humidity), "%"] })) : null }), _jsx(Box, { width: 72, children: day.uvIndex !== undefined ? (_jsxs(Metric, { icon: "lu:sun", children: ["UV ", tenths(day.uvIndex)] })) : null })] })) : null] }, day.timestamp));
+                        }) })] })) : null] }));
+}

package/dist/entities/weather-icon.d.ts

@@ -0,0 +1,7 @@
+/** @jsxImportSource @emotion/react */
+import type { WeatherCondition } from '@hashsome/core';
+/** The icon for a sky condition, in its own colors: the sun yellow, a cloud blue, the rain a deeper blue. */
+export declare function WeatherIcon({ condition, size }: {
+    condition: WeatherCondition;
+    size?: number;
+}): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/entities/weather-icon.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+import { ICON_NODES } from '../icon-data.js';
+import { Icon } from '../icon.js';
+import { CONDITION_LOOK } from './weather-look.js';
+/** The icon for a sky condition, in its own colors: the sun yellow, a cloud blue, the rain a deeper blue. */
+export function WeatherIcon({ condition, size }) {
+    const look = CONDITION_LOOK[condition];
+    const parts = ICON_NODES[look.icon]?.length ?? 0;
+    const colors = Array.from({ length: parts }, (_, i) => look.parts?.[i] ?? look.color);
+    return _jsx(Icon, { name: look.icon, colors: colors, ...(size !== undefined ? { size } : {}) });
+}

package/dist/entities/weather-look.d.ts

@@ -0,0 +1,17 @@
+import type { WeatherCondition } from '@hashsome/core';
+import type { IconName } from '../icon-data.ts';
+/** What a condition looks like: an icon, and the colors it is drawn in. */
+export interface ConditionLook {
+    icon: IconName;
+    /** The color of every part of the icon that `parts` does not name; the surrounding text color when left out. */
+    color?: string;
+    /** Colors by part of the icon (its `i`th shape), for one drawn in two colors: the cloud blue and the sun yellow. */
+    parts?: Record<number, string>;
+}
+export declare const CONDITION_LOOK: Record<WeatherCondition, ConditionLook>;
+/** A condition in words. */
+export declare const CONDITION_LABEL: Record<WeatherCondition, string>;
+/** The compass point for a bearing in degrees: `225` is `SW`. */
+export declare function compass(degrees: number): string;
+/** How strong a UV index is, in words. */
+export declare function uvLevel(index: number): string;

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.d.ts

@@ -1,4 +1,10 @@
-import { LocalClient, MockIntegration } from '@hashsome/core';
+import { LocalClient, MockIntegration, type BrowseQuery, type BrowseResult } from '@hashsome/core';
+/** The gallery's backend: the mock, with one player whose shelves never finish loading, to show the
+ * loading state of the library. */
+declare class GalleryIntegration extends MockIntegration {
+    browse(entityId: string, query: BrowseQuery): Promise<BrowseResult>;
+}
 /** Mock entities covering every state the components handle. Refs are `ha:<id>`. */
-export declare function createGalleryIntegration(): MockIntegration;
+export declare function createGalleryIntegration(): GalleryIntegration;
 export declare function createGalleryClient(): LocalClient;
+export {};

package/dist/gallery/fixtures.js

@@ -1,12 +1,21 @@
-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`;
 const power = (watts) => mockSensor({ name: 'Power', value: watts, unit: 'W', measurement: 'power' });
 const energy = (kwh) => mockSensor({ name: 'Energy', value: kwh, unit: 'kWh', measurement: 'energy' });
+/** The gallery's backend: the mock, with one player whose shelves never finish loading, to show the
+ * loading state of the library. */
+class GalleryIntegration extends MockIntegration {
+    browse(entityId, query) {
+        return entityId === 'media_player.loading' && query.path !== undefined
+            ? new Promise(() => { })
+            : super.browse(entityId, query);
+    }
+}
 /** Mock entities covering every state the components handle. Refs are `ha:<id>`. */
 export function createGalleryIntegration() {
-    return new MockIntegration({
+    return new GalleryIntegration({
         library: mockLibrary(),
         entities: {
             'light.plain_on': mockLight({ name: 'Lamp', on: true }),
@@ -62,6 +71,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({
@@ -102,7 +117,11 @@ export function createGalleryIntegration() {
                 duration: 231,
                 positionUpdatedAt: new Date().toISOString(),
                 shuffle: false,
-                capabilities: { browse: true, search: true, seek: true, shuffle: true },
+                capabilities: { browse: true, search: true, seek: true, shuffle: true, queue: true },
+            }),
+            'media_player.loading': mockMediaPlayer({
+                name: 'Slow library',
+                capabilities: { browse: true, search: true },
             }),
             'media_player.off': mockMediaPlayer({
                 name: 'Kitchen Speaker',

package/dist/gallery/gallery.js

@@ -9,7 +9,9 @@ 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 { MediaQueue } from '../entities/media-queue.js';
+import { WeatherForecast } from '../entities/weather-forecast.js';
 import { NavDock } from '../entities/nav-dock.js';
 import { NavRail } from '../entities/nav-rail.js';
 import { Page } from '../layout/page.js';
@@ -80,8 +82,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 +349,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', 'MediaQueue'], description: "The big player: the player centered with its queue beside it (`MediaQueue`: tap a track to jump to it, the cross takes it out, Clear empties it), and its library below, where every track can be played, played next or added to the queue, and an open album or playlist can be played, shuffled or added whole. The media cards' drawers show the player and library too. A dashboard puts it in a page of its own, around it whatever it likes.", children: _jsx(Flex, { direction: "column", children: _jsx(MediaPlayerFull, { entity: "ha:media_player.living_room", wide: true, queue: _jsx(MediaQueue, { entity: "ha:media_player.living_room" }), browser: _jsx(MediaBrowser, { entity: "ha:media_player.living_room", layout: "theater" }) }) }) }), _jsx(ComponentDoc, { title: "Weather Forecast", components: ['WeatherForecast'], description: "A weather entity's forecast: the weather now, the next 24 hours as a chart (hover it for everything about an hour) and the days ahead. The top bar's weather chip shows it in a drawer; a dashboard can put it in a page of its own. Narrow, then with `expanded` (readings tiles, a card for each hour).", children: _jsxs(Flex, { direction: "column", gap: 6, children: [_jsx(Flex, { direction: "column", width: 380, children: _jsx(WeatherForecast, { entity: "ha:weather.home", expanded: false }) }), _jsx(WeatherForecast, { entity: "ha:weather.home", expanded: true })] }) }), _jsx(ComponentDoc, { title: "Media Browser", components: ['MediaBrowser'], description: "A player's own library in the app's style: tap a folder to open it, a track or station to play it, or the play button on an album, playlist or artist for all of it. The search box appears when the library can be searched. The `theater` layout (second demo) is one row of large cards that scrolls sideways, for a wide space; `list` is the compact default. While a shelf loads, placeholders take the room the cards will (third demo, a shelf that never arrives), so nothing moves.", children: _jsxs(Flex, { direction: "column", gap: 6, children: [_jsx(Flex, { direction: "column", maxHeight: 420, overflow: "auto", children: _jsx(MediaBrowser, { entity: "ha:media_player.living_room" }) }), _jsx(MediaBrowser, { entity: "ha:media_player.living_room", layout: "theater" }), _jsx(MediaBrowser, { entity: "ha:media_player.loading", layout: "theater" })] }) }), _jsx(ComponentDoc, { title: "Navigation", components: ['NavRail', 'NavDock', 'Page'], description: "Routes within one dashboard. A dashboard includes one itself, usually in its layout route: NavRail is fixed to the left and NavDock floats at the bottom, and both reserve the space they take in the Page around them, which pads so content never sits under them.", children: _jsxs(Flex, { direction: "column", gap: 5, children: [_jsx(SubPreview, { label: "NavRail, in a Page", height: 240, children: _jsxs(Page, { height: "100%", children: [_jsx(NavRail, { base: "/gallery", items: NAV_ITEMS }), _jsx(Typography, { as: "p", variant: "body", color: "textMuted", children: "Page content, padded clear of the rail." })] }) }), _jsx(SubPreview, { label: "NavDock", height: 140, children: _jsx(NavDock, { base: "/gallery", items: NAV_ITEMS }) })] }) }), _jsx(ComponentDoc, { title: "Top Bar", components: ['TopBar'], description: "Page chrome above a dashboard's content: a title (a dropdown to switch dashboards, once there's more than one to switch to), scene shortcuts, weather (tap it for the forecast), presence, and a clock.", children: _jsx(TopBar, { title: "Living Room", dashboards: [
                                 { id: 'living-room', title: 'Living Room', icon: 'lu:sofa' },
                                 { id: 'bedroom', title: 'Bedroom', icon: 'lu:bed' },
                                 { id: 'bathroom', title: 'Bathroom', icon: 'tb:bath' },
-                            ], 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}"` }) })] }) }) }));
 }