@hashsome/ui 0.1.0 → 0.2.0

package/dist/entities/artwork-ring.d.ts

@@ -2,7 +2,7 @@ import type { SeekHold } from './media-seek.ts';
 /** The player's artwork in a circle, like the one in the bar but larger: an inner outline around
  * it, and an outer ring that shows how far along playback is. With `onSeek` the ring is a slider:
  * drag around it, or use the arrow keys. Not exported from the package: `MediaPlayerColumn` and
- * `MediaPlayerPage` draw it. */
+ * `MediaPlayerFull` draw it. */
 export declare function ArtworkRing({ artworkUrl, seek, duration, seekable, onOpen, size: SIZE, }: {
     artworkUrl?: string | undefined;
     /** The position to draw and the way to change it, shared with whatever shows the time. */

package/dist/entities/artwork-ring.js

@@ -9,7 +9,7 @@ const DEFAULT_SIZE = 168;
 /** The player's artwork in a circle, like the one in the bar but larger: an inner outline around
  * it, and an outer ring that shows how far along playback is. With `onSeek` the ring is a slider:
  * drag around it, or use the arrow keys. Not exported from the package: `MediaPlayerColumn` and
- * `MediaPlayerPage` draw it. */
+ * `MediaPlayerFull` draw it. */
 export function ArtworkRing({ artworkUrl, seek, duration, seekable, onOpen, size: SIZE = DEFAULT_SIZE, }) {
     const ring = useRef(null);
     const dragging = useRef(false);

package/dist/entities/climate-tile.d.ts

@@ -12,7 +12,7 @@ export interface ClimateTileProps {
     icon?: IconName;
     /** Power-draw chart for the drawer, above `history`. No default source yet — pass explicitly. */
     energy?: EnergyChartProps;
-    /** Recent activity, shown in the drawer. No default source yet — pass explicitly. */
+    /** 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. */
     history?: LogbookEntry[];
 }
 /** Heater / thermostat: a mode button that opens mode swatches in the card, a target temperature

package/dist/entities/climate-tile.js

@@ -44,7 +44,7 @@ export function ClimateTile({ entity, name, icon, energy, history }) {
         temperature: Math.min(max, Math.max(min, Math.round(value * 100) / 100)),
     });
     const setMode = (next) => void handle.command('setMode', { mode: next });
-    return (_jsx(Tile, { label: name ?? climate?.name ?? fallbackName(entity), icon: icon ?? 'lu:thermometer', kind: "Climate", status: status, secondary: current !== undefined ? `${current} ${unit}` : undefined, detail: _jsx(ClimateDetailBody, { climate: climate, mode: mode, modes: modes, target: target, current: current, step: step, min: min, max: max, unit: unit, onMode: setMode, onTarget: setTarget, onPreset: (preset) => void handle.command('setPreset', { preset }) }), ...(energy ? { energy } : {}), ...(history ? { history } : {}), ...(ready && picking
+    return (_jsx(Tile, { label: name ?? climate?.name ?? fallbackName(entity), icon: icon ?? 'lu:thermometer', kind: "Climate", status: status, secondary: current !== undefined ? `${current} ${unit}` : undefined, detail: _jsx(ClimateDetailBody, { climate: climate, mode: mode, modes: modes, target: target, current: current, step: step, min: min, max: max, unit: unit, onMode: setMode, onTarget: setTarget, onPreset: (preset) => void handle.command('setPreset', { preset }) }), ...(energy ? { energy } : {}), ...(history ? { history } : {}), ...(typeof entity === 'string' ? { logbook: entity } : {}), ...(ready && picking
             ? {
                 // A render prop `Tile` calls, not a component of its own.
                 // oxlint-disable-next-line react/no-unstable-nested-components

package/dist/entities/light-tile.d.ts

@@ -15,7 +15,7 @@ export interface LightTileProps {
     /** Power-draw chart (e.g. a Shelly's energy monitoring), shown in the drawer above `history`.
      * No default source yet — pass explicitly. */
     energy?: EnergyChartProps;
-    /** Recent activity, shown in the drawer. No default source yet — pass explicitly. */
+    /** 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. */
     history?: LogbookEntry[];
     /** Swatches shown when the palette button is opened. Default: four white temperatures. Each takes `kelvin` (color-temp lights) and/or `hs` (color lights) and is skipped if the light can't apply it. */
     colors?: LightColorPreset[];

package/dist/entities/light-tile.js

@@ -49,7 +49,7 @@ export function LightTile({ entity, name, icon, energy, history, colors = DEFAUL
                         const [hue, saturation] = rgbToHs(picked);
                         void handle.command('setColor', { hue, saturation });
                     }
-                } })) : null }), ...(energy ? { energy } : {}), ...(history ? { history } : {}), ...(dimmable
+                } })) : null }), ...(energy ? { energy } : {}), ...(history ? { history } : {}), ...(typeof entity === 'string' ? { logbook: entity } : {}), ...(dimmable
             ? {
                 fill: on ? (brightness ?? 1) : 0,
                 onFillChange: (fill) => void handle.command('setBrightness', { brightness: fill }),

package/dist/entities/media-browser.js

@@ -48,7 +48,13 @@ export function MediaBrowser({ entity, onPlay, layout = 'list' }) {
                         icon: 'lu:arrow-left',
                         ariaLabel: 'Back',
                     }
-                    : { value: item.id, label: item.title }), value: browser.activeTab, onChange: (id) => id === browser.activeTab && inside ? browser.back() : browser.selectTab(id) })) : null, browser.error ? (_jsx(Typography, { as: "p", variant: "body", color: "danger", role: "alert", children: browser.error })) : browser.loading ? (_jsx(Typography, { as: "p", variant: "body", color: "textMuted", children: "Loading\u2026" })) : browser.items.length === 0 ? (_jsx(Typography, { as: "p", variant: "body", color: "textMuted", children: browser.searching ? 'Nothing found.' : 'Nothing here.' })) : theater ? (_jsx(FadeScroll, { as: "ul", gap: 4, m: 0, p: 0, pb: 2, css: { listStyle: 'none', scrollSnapType: 'x proximity' }, children: browser.items.map((item) => (_jsx("li", { css: { flex: 'none', scrollSnapAlign: 'start' }, children: _jsx(BrowseCard, { item: item, onOpen: () => browser.open(item), onPlay: () => play(item) }) }, item.id))) })) : (_jsx(Flex, { direction: "column", gap: 1, as: "ul", m: 0, p: 0, minHeight: 0, css: { listStyle: 'none', overflowY: 'auto' }, children: browser.items.map((item) => (_jsx("li", { css: { flex: 'none' }, children: _jsx(BrowseRow, { item: item, onOpen: () => browser.open(item), onPlay: () => play(item) }) }, item.id))) }))] }));
+                    : { value: item.id, label: item.title }), value: browser.activeTab, onChange: (id) => id === browser.activeTab && inside ? browser.back() : browser.selectTab(id) })) : null, browser.error ? (_jsx(Typography, { as: "p", variant: "body", color: "danger", role: "alert", children: browser.error })) : browser.loading ? (_jsx(Typography, { as: "p", variant: "body", color: "textMuted", children: "Loading\u2026" })) : browser.items.length === 0 ? (_jsx(Typography, { as: "p", variant: "body", color: "textMuted", children: browser.searching ? 'Nothing found.' : 'Nothing here.' })) : theater ? (_jsx(FadeScroll, { as: "ul", gap: 4, m: 0, p: 0, pb: 2, css: {
+                    listStyle: 'none',
+                    scrollSnapType: 'x proximity',
+                    containerType: 'size',
+                    flex: `0 1 ${CARD + LABEL + 16}px`,
+                    minHeight: MIN_CARD + LABEL + 16,
+                }, children: browser.items.map((item) => (_jsx("li", { css: { flex: 'none', scrollSnapAlign: 'start' }, children: _jsx(BrowseCard, { item: item, onOpen: () => browser.open(item), onPlay: () => play(item) }) }, item.id))) })) : (_jsx(Flex, { direction: "column", gap: 1, as: "ul", m: 0, p: 0, minHeight: 0, css: { listStyle: 'none', overflowY: 'auto' }, children: browser.items.map((item) => (_jsx("li", { css: { flex: 'none' }, children: _jsx(BrowseRow, { item: item, onOpen: () => browser.open(item), onPlay: () => play(item) }) }, item.id))) }))] }));
 }
 function BrowseRow({ item, onOpen, onPlay, }) {
     // A row opens what can be opened and otherwise plays; an openable thing that can also be played
@@ -56,12 +62,18 @@ function BrowseRow({ item, onOpen, onPlay, }) {
     const main = item.expandable ? onOpen : item.playable ? onPlay : undefined;
     return (_jsxs(Flex, { align: "center", gap: 2, children: [_jsxs(PlainButton, { align: "center", gap: 3, grow: 1, minWidth: 0, radius: "row", py: 1.5, px: 2, cursor: main ? 'pointer' : 'default', disabled: !main, "aria-label": item.expandable ? `Open ${item.title}` : `Play ${item.title}`, onClick: main, css: ({ palette }) => ({ '&:hover:not(:disabled)': { background: palette.surfaceRaised } }), children: [_jsx(Flex, { align: "center", justify: "center", background: "surfaceRaised", color: "textMuted", radius: "small", width: 44, height: 44, overflow: "hidden", css: { flex: 'none' }, children: item.artworkUrl ? (_jsx(Cover, { src: item.artworkUrl })) : (_jsx(Icon, { name: KIND_ICONS[item.kind], size: 20 })) }), _jsxs(Flex, { direction: "column", minWidth: 0, children: [_jsx(Typography, { as: "span", variant: "bodyStrong", noWrap: true, textOverflow: "ellipsis", overflow: "hidden", children: item.title }), item.subtitle ? (_jsx(Typography, { as: "span", variant: "secondary", color: "textMuted", noWrap: true, textOverflow: "ellipsis", overflow: "hidden", children: item.subtitle })) : null] })] }), item.expandable && item.playable ? (_jsx(IconButton, { icon: "lu:play", label: `Play ${item.title}`, glyph: 16, onClick: onPlay })) : null] }));
 }
-/** The width and height of a theater card's artwork. */
+/** The width and height of a theater card's artwork when there is room for it. */
 const CARD = 200;
+/** The smallest a theater card's artwork gets: when there is less room than that, the page scrolls instead. */
+const MIN_CARD = 120;
+/** What a theater card needs under its artwork for the title and subtitle. */
+const LABEL = 56;
+/** The artwork's side: `CARD`, or less when the row it sits in is shorter than the card and its labels (`cqh` is a percent of that row's height). */
+const CARD_SIZE = `min(${CARD}px, max(${MIN_CARD}px, calc(100cqh - ${LABEL}px)))`;
 /** An item as a large card for the theater layout: big artwork (round for an artist), then the
  * title and subtitle. It opens or plays like a row does, and an album or playlist gets its play
  * button over the artwork's corner. */
 function BrowseCard({ item, onOpen, onPlay, }) {
     const main = item.expandable ? onOpen : item.playable ? onPlay : undefined;
-    return (_jsxs(Box, { position: "relative", width: CARD, children: [_jsxs(PlainButton, { direction: "column", gap: 2, width: "100%", cursor: main ? 'pointer' : 'default', disabled: !main, "aria-label": item.expandable ? `Open ${item.title}` : `Play ${item.title}`, onClick: main, children: [_jsx(Flex, { align: "center", justify: "center", background: "surfaceRaised", color: "textMuted", radius: item.kind === 'artist' ? 'full' : 'card', overflow: "hidden", width: CARD, height: CARD, children: item.artworkUrl ? (_jsx(Cover, { src: item.artworkUrl })) : (_jsx(Icon, { name: KIND_ICONS[item.kind], size: 56 })) }), _jsxs(Flex, { direction: "column", minWidth: 0, px: 1, children: [_jsx(Typography, { as: "span", variant: "bodyStrong", noWrap: true, textOverflow: "ellipsis", overflow: "hidden", children: item.title }), item.subtitle ? (_jsx(Typography, { as: "span", variant: "secondary", color: "textMuted", noWrap: true, textOverflow: "ellipsis", overflow: "hidden", children: item.subtitle })) : null] })] }), item.expandable && item.playable ? (_jsx(Box, { position: "absolute", css: { right: 10, top: CARD - 54 }, children: _jsx(IconButton, { icon: "lu:play", label: `Play ${item.title}`, glyph: 16, onClick: onPlay }) })) : null] }));
+    return (_jsxs(Box, { position: "relative", css: { width: CARD_SIZE }, children: [_jsxs(PlainButton, { direction: "column", gap: 2, width: "100%", cursor: main ? 'pointer' : 'default', disabled: !main, "aria-label": item.expandable ? `Open ${item.title}` : `Play ${item.title}`, onClick: main, children: [_jsx(Flex, { align: "center", justify: "center", background: "surfaceRaised", color: "textMuted", radius: item.kind === 'artist' ? 'full' : 'card', overflow: "hidden", css: { width: CARD_SIZE, height: CARD_SIZE }, children: item.artworkUrl ? (_jsx(Cover, { src: item.artworkUrl })) : (_jsx(Icon, { name: KIND_ICONS[item.kind], size: 56 })) }), _jsxs(Flex, { direction: "column", minWidth: 0, px: 1, children: [_jsx(Typography, { as: "span", variant: "bodyStrong", noWrap: true, textOverflow: "ellipsis", overflow: "hidden", children: item.title }), item.subtitle ? (_jsx(Typography, { as: "span", variant: "secondary", color: "textMuted", noWrap: true, textOverflow: "ellipsis", overflow: "hidden", children: item.subtitle })) : null] })] }), item.expandable && item.playable ? (_jsx(Box, { position: "absolute", css: { right: 10, top: `calc(${CARD_SIZE} - 54px)` }, children: _jsx(IconButton, { icon: "lu:play", label: `Play ${item.title}`, glyph: 16, onClick: onPlay }) })) : null] }));
 }

package/dist/entities/media-player-bar.js

@@ -15,7 +15,7 @@ import { usePressFeedback, useVolumeControl } from './media-controls.js';
 import { Cover } from '../layout/cover.js';
 import { PlainButton } from '../layout/plain-button.js';
 import { MediaBrowser } from './media-browser.js';
-import { MediaPlayerBody } from './media-player-body.js';
+import { MediaPlayerFull } from './media-player-full.js';
 import { formatDuration, useMediaPosition } from './media-progress.js';
 import { useSeekHold } from './media-seek.js';
 import { SeekLine } from './seek-line.js';
@@ -74,5 +74,5 @@ export function MediaPlayerBar({ entity, name, browse }) {
                                             : statusLabels[status] }), ready && caps?.shuffle ? (_jsx(PlainButton, { "aria-label": "Shuffle", "aria-pressed": player?.shuffle === true, title: "Shuffle", onClick: () => void handle.command('setShuffle', { shuffle: player?.shuffle !== true }), center: true, color: player?.shuffle === true ? 'accent' : 'textMuted', css: { flex: 'none' }, children: _jsx(Icon, { name: "lu:shuffle", size: 14 }) })) : null] }), ready && player?.media?.artist ? (_jsx(Typography, { as: "span", variant: "secondary", color: "textMuted", noWrap: true, textOverflow: "ellipsis", children: player.media.artist })) : null] }), timed ? (_jsxs(Typography, { as: "span", variant: "secondary", color: "textMuted", noWrap: true, css: { flex: 'none', fontVariantNumeric: 'tabular-nums' }, children: [formatDuration(seek.shown ?? 0), " / ", formatDuration(duration ?? 0)] })) : null] })), _jsx(IconButton, { icon: volumeOpen ? 'lu:x' : muted ? 'lu:volume-x' : 'lu:volume-2', label: volumeOpen ? 'Close volume' : 'Volume', glyph: MEDIA_GLYPH, disabled: !ready || (caps?.volume === false && caps.mute === false), onClick: () => setVolumeOpen((current) => !current) }), open && browser !== undefined ? (_jsx(IconButton, { icon: "lu:library", label: "Browse media", glyph: MEDIA_GLYPH, onClick: openExpanded ?? open })) : null, _jsx(IconButton, { icon: "lu:skip-back", label: "Previous", glyph: MEDIA_GLYPH, disabled: !ready || caps?.previous === false, feedback: feedbackFor('previous'), onClick: () => press('previous', () => handle.command('previous')) }), _jsx(IconButton, { icon: playing ? 'lu:pause' : 'lu:play', label: playing ? 'Pause' : 'Play', glyph: MEDIA_GLYPH, disabled: !ready, primary: true, onClick: () => void handle.command('togglePlay') }), _jsx(IconButton, { icon: "lu:skip-forward", label: "Next", glyph: MEDIA_GLYPH, disabled: !ready || caps?.next === false, feedback: feedbackFor('next'), onClick: () => press('next', () => handle.command('next')) }), timed ? (_jsx(SeekLine, { seek: seek, duration: duration ?? 0, seekable: caps?.seek === true })) : null] }));
     // Holding the card, the artwork and the browse button open the same drawer: the player laid out
     // like the vertical one, with the library below it.
-    return ready ? (_jsx(DrawerTrigger, { icon: "lu:music", label: name ?? player?.name ?? fallbackName(entity), kind: "Media", body: _jsx(MediaPlayerBody, { entity: entity, ...(name !== undefined ? { name } : {}), ...(browser !== undefined ? { browser } : {}) }), children: (open, openExpanded) => bar(open, openExpanded) })) : (bar());
+    return ready ? (_jsx(DrawerTrigger, { icon: "lu:music", label: name ?? player?.name ?? fallbackName(entity), kind: "Media", body: _jsx(MediaPlayerFull, { entity: entity, ...(name !== undefined ? { name } : {}), ...(browser !== undefined ? { browser } : {}) }), children: (open, openExpanded) => bar(open, openExpanded) })) : (bar());
 }

package/dist/entities/media-player-column.js

@@ -7,7 +7,7 @@ import { IconButton } from '../layout/tile.js';
 import { DrawerTrigger } from '../layout/use-drawer.js';
 import { useHold } from '../layout/use-hold.js';
 import { MediaBrowser } from './media-browser.js';
-import { MediaPlayerBody } from './media-player-body.js';
+import { MediaPlayerFull } from './media-player-full.js';
 import { NowPlaying } from './now-playing.js';
 /** The player as an upright card for a narrow column beside a dashboard (a quarter to a third of
  * the width): the artwork in a ring that shows (and seeks) the position, title, transport and a
@@ -23,7 +23,7 @@ export function MediaPlayerColumn({ entity, name, browse }) {
         : (browse ??
             (ref && player?.capabilities.browse ? (_jsx(MediaBrowser, { entity: ref, layout: "auto" })) : undefined));
     const fallback = fallbackName(entity);
-    return browser !== undefined && handle.status === 'ready' ? (_jsx(DrawerTrigger, { icon: "lu:music", label: name ?? player?.name ?? fallback, kind: "Media", body: _jsx(MediaPlayerBody, { entity: entity, browser: browser, ...(name !== undefined ? { name } : {}) }), children: (open, openExpanded) => (_jsx(Card, { open: open, children: _jsx(NowPlaying, { handle: handle, fallback: fallback, ...(name !== undefined ? { name } : {}), onOpenArtwork: open, extra: _jsx(IconButton, { icon: "lu:library", label: "Browse media", glyph: 18, onClick: openExpanded }) }) })) })) : (_jsx(Card, { children: _jsx(NowPlaying, { handle: handle, fallback: fallback, ...(name !== undefined ? { name } : {}) }) }));
+    return browser !== undefined && handle.status === 'ready' ? (_jsx(DrawerTrigger, { icon: "lu:music", label: name ?? player?.name ?? fallback, kind: "Media", body: _jsx(MediaPlayerFull, { entity: entity, browser: browser, ...(name !== undefined ? { name } : {}) }), children: (open, openExpanded) => (_jsx(Card, { open: open, children: _jsx(NowPlaying, { handle: handle, fallback: fallback, ...(name !== undefined ? { name } : {}), onOpenArtwork: open, extra: _jsx(IconButton, { icon: "lu:library", label: "Browse media", glyph: 18, onClick: openExpanded }) }) })) })) : (_jsx(Card, { children: _jsx(NowPlaying, { handle: handle, fallback: fallback, ...(name !== undefined ? { name } : {}) }) }));
 }
 /** The card itself; with `open`, holding it (anywhere but on a control) calls it. */
 function Card({ open, children }) {

package/dist/entities/media-player-full.d.ts

@@ -0,0 +1,20 @@
+/** @jsxImportSource @emotion/react */
+import type { EntityRef } from '@hashsome/core';
+import type { ReactNode } from 'react';
+import { type EntityHandle } from '../entity-handle.ts';
+export interface MediaPlayerFullProps {
+    /** The media player, as a ref like `ma:living_room`. */
+    entity: EntityRef | EntityHandle<'mediaPlayer'>;
+    /** What goes below the player, usually the player's library: `<MediaBrowser entity="ma:living_room" layout="theater" />`. Left out, only the player is drawn. */
+    browser?: ReactNode;
+    /** Calls the player this instead of the name it reports. */
+    name?: string;
+    /** Gives the library the whole width, for one laid out to use it (the theater layout). Defaults to whether the drawer is expanded. */
+    wide?: boolean;
+}
+/** 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. */
+export declare function MediaPlayerFull({ entity, browser, wide, name }: MediaPlayerFullProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/entities/{media-player-body.js → media-player-full.js}

@@ -6,11 +6,12 @@ import { useDetail } from '../layout/detail-provider.js';
 import { NowPlaying } from './now-playing.js';
 /** The artwork ring's diameter in a full-size player, against the usual 168px. */
 const FULL_SIZE = 260;
-/** The big player: the player centered at the top, and the library (or whatever `browser` is)
- * below it. This one layout is the drawer, at every width, and the full page, so the two are the
- * same thing and cannot drift apart. Not exported from the package; `MediaPlayerPage` and the
- * media cards' drawers draw it. */
-export function MediaPlayerBody({ entity, browser, wide, name, }) {
+/** 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. */
+export function MediaPlayerFull({ entity, browser, wide, name }) {
     const handle = useEntityHandle('mediaPlayer', entity);
     const { detail } = useDetail();
     const full = wide ?? detail?.expanded === true;

package/dist/entities/now-playing.d.ts

@@ -2,7 +2,7 @@ import type { ReactNode } from 'react';
 import type { EntityHandle } from '../entity-handle.ts';
 /** The upright "now playing" panel the media column and page share: the artwork on a record, what is playing, how
  * far along it is, the transport buttons and a volume bar that is always there. Not exported from
- * the package; `MediaPlayerColumn` and `MediaPlayerPage` are its public forms. */
+ * the package; `MediaPlayerColumn` and `MediaPlayerFull` are its public forms. */
 export declare function NowPlaying({ handle, fallback, name, extra, onOpenArtwork, size, shuffle: shufflePlacement, }: {
     handle: EntityHandle<'mediaPlayer'>;
     /** What to call the player before it reports a name. */

package/dist/entities/now-playing.js

@@ -12,7 +12,7 @@ import { useSeekHold } from './media-seek.js';
 import { ArtworkRing } from './artwork-ring.js';
 /** The upright "now playing" panel the media column and page share: the artwork on a record, what is playing, how
  * far along it is, the transport buttons and a volume bar that is always there. Not exported from
- * the package; `MediaPlayerColumn` and `MediaPlayerPage` are its public forms. */
+ * the package; `MediaPlayerColumn` and `MediaPlayerFull` are its public forms. */
 export function NowPlaying({ handle, fallback, name, extra, onOpenArtwork, size, shuffle: shufflePlacement = 'transport', }) {
     const player = handle.entity;
     const { status } = handle;

package/dist/entities/top-bar.d.ts

@@ -22,7 +22,7 @@ export interface TopBarProps {
     dashboards?: DashboardOption[];
     /** Compact circular buttons that fire `scene.turn_on` directly (not the `Tile`-based `SceneButton`); a bare entity ref uses the default icon and an auto-assigned color, or pass `{ entity, icon, color }` to pick either. */
     scenes?: (EntityRef | TopBarScene)[];
-    /** 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. */
+    /** 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. */
     weather?: EntityRef;
     /** Your own component(s) for the right-hand side, after the weather: a security mode picker, a custom status. Whatever it is, it sits in the bar's row and is yours to style. */
     extra?: ReactNode;

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,161 @@
+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, background: "surfaceRaised", radius: "card", 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, css: { containerType: 'inline-size' }, children: _jsx(Box, { css: {
+                                display: 'grid',
+                                gap: 10,
+                                gridTemplateColumns: 'repeat(12, minmax(0, 1fr))',
+                                '@container (max-width: 1000px)': {
+                                    gridTemplateColumns: 'repeat(8, minmax(0, 1fr))',
+                                },
+                                '@container (max-width: 640px)': {
+                                    gridTemplateColumns: 'repeat(6, minmax(0, 1fr))',
+                                },
+                                '@container (max-width: 420px)': {
+                                    gridTemplateColumns: 'repeat(4, minmax(0, 1fr))',
+                                },
+                            }, children: hours.map((hour) => {
+                                const rain = rainText(hour, hourly.result?.precipitationUnit);
+                                return (_jsxs(Flex, { direction: "column", align: "center", gap: 1.5, background: "surfaceRaised", radius: "card", px: 2, py: 3, 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;