@hashsome/ui 0.1.0 → 0.3.0

package/dist/gallery/props-data.js

@@ -157,6 +157,12 @@ export const COMPONENT_PROPS = {
                 optional: true,
                 type: 'LogbookEntry[]',
             },
+            {
+                doc: "An entity whose recent activity to fetch from the backend when the drawer opens, for the same History section (Home Assistant's logbook). `history`, when given, is used instead. A backend that keeps none shows no section.",
+                name: 'logbook',
+                optional: true,
+                type: 'EntityRef',
+            },
         ],
     },
     IconButton: {
@@ -230,6 +236,12 @@ export const COMPONENT_PROPS = {
                 optional: true,
                 type: 'number',
             },
+            {
+                doc: 'For an icon drawn in more than one color: part `i` of the icon (its `i`th shape) is drawn in `colors[i]`, and any part without one, in the surrounding text color. Only for outline icons.',
+                name: 'colors',
+                optional: true,
+                type: 'readonly (string | undefined)[]',
+            },
         ],
     },
     LightTile: {
@@ -260,7 +272,7 @@ export const COMPONENT_PROPS = {
                 type: 'EnergyChartProps',
             },
             {
-                doc: 'Recent activity, shown in the drawer. No default source yet — pass explicitly.',
+                doc: "Recent activity, shown in the drawer: who or what changed it, and when. Left out, it comes from the backend's own record when it keeps one (Home Assistant's logbook), fetched when the drawer opens.",
                 name: 'history',
                 optional: true,
                 type: 'LogbookEntry[]',
@@ -301,7 +313,7 @@ export const COMPONENT_PROPS = {
                 type: 'EnergyChartProps',
             },
             {
-                doc: 'Recent activity, shown in the drawer. No default source yet — pass explicitly.',
+                doc: "Recent activity, shown in the drawer: who or what changed it, and when. Left out, it comes from the backend's own record when it keeps one (Home Assistant's logbook), fetched when the drawer opens.",
                 name: 'history',
                 optional: true,
                 type: 'LogbookEntry[]',
@@ -459,21 +471,39 @@ export const COMPONENT_PROPS = {
             },
         ],
     },
-    MediaPlayerPage: {
-        doc: "The player as a whole page: the player centered, and the player's library below it, so songs are picked right here instead of in a drawer. It is the same layout as the expanded drawer. It fills the height it is given and scrolls inside it.",
+    MediaPlayerFull: {
+        doc: "The big player: the player centered at the top, and the library (or whatever `browser` is) below it. It is what the media cards' drawers show, at every width, and it is the widget a dashboard puts in a page of its own, around it whatever it likes (a surface that fills the space and scrolls, a heading, other cards beside it). It fills the height it is given, so the page that holds it decides how tall that is.",
         props: [
             {
-                doc: 'A media player, as a ref like `ma:living_room`. A ref, not a handle: the library below the player is read through the runtime.',
+                doc: 'The media player, as a ref like `ma:living_room`.',
                 name: 'entity',
                 optional: false,
-                type: 'EntityRef',
+                type: "EntityRef | EntityHandle<'mediaPlayer'>",
             },
             {
-                doc: "What to call the player: the drawer's title and the name shown when nothing is playing. Defaults to the player's own name.",
+                doc: 'What goes below the player, usually the player\'s library: `<MediaBrowser entity="ma:living_room" layout="theater" />`. Left out, only the player is drawn.',
+                name: 'browser',
+                optional: true,
+                type: 'ReactNode',
+            },
+            {
+                doc: 'What goes beside the player in a wide space, usually the player\'s queue: `<MediaQueue entity="ma:living_room" />`. Only used when `wide` and the player has a queue; the narrow layout has no room for it.',
+                name: 'queue',
+                optional: true,
+                type: 'ReactNode',
+            },
+            {
+                doc: 'Calls the player this instead of the name it reports.',
                 name: 'name',
                 optional: true,
                 type: 'string',
             },
+            {
+                doc: 'Gives the library the whole width, for one laid out to use it (the theater layout). Defaults to whether the drawer is expanded.',
+                name: 'wide',
+                optional: true,
+                type: 'boolean',
+            },
         ],
     },
     MediaBrowser: {
@@ -499,6 +529,17 @@ export const COMPONENT_PROPS = {
             },
         ],
     },
+    MediaQueue: {
+        doc: "A player's queue: the tracks that have just played (dimmed), the one playing, and what comes next, as a list that scrolls. Tap a track to jump to it, the cross takes it out, and Clear takes out everything after the track that is playing, which carries on. What comes next can be put in another order by dragging a track by its handle (or with the arrow keys on the handle). Once the last track has played and the player has stopped, that track is shown as played, not as playing. It is made to sit beside the player in a wide space (see `MediaPlayerFull`'s `queue`).",
+        props: [
+            {
+                doc: 'The media player, as a ref like `ma:living_room`. Shows nothing for a player with no queue.',
+                name: 'entity',
+                optional: false,
+                type: 'EntityRef',
+            },
+        ],
+    },
     NavRail: {
         doc: "Fixed left sidebar for switching between a dashboard's pages. Must be rendered inside a router. It is `position: fixed` and reserves its width in the surrounding `Page`, which pads for it so content never sits under it.",
         props: [
@@ -567,7 +608,7 @@ export const COMPONENT_PROPS = {
                 type: '(EntityRef | TopBarScene)[]',
             },
             {
-                doc: 'Current weather as a pill with an icon for the sky and a rounded whole-degree reading. A weather entity, like `ha:weather.forecast_home`, shows its real condition; a plain sensor, e.g. an outdoor temperature, gets a fixed sun.',
+                doc: "Current weather as a pill with an icon for the sky and a rounded whole-degree reading. A weather entity, like `ha:weather.forecast_home`, shows its real condition, today's high and low once its forecast has loaded, and opens the forecast (the next 24 hours and the days ahead) when tapped, if its source has one; a plain sensor, e.g. an outdoor temperature, gets a fixed sun and no forecast.",
                 name: 'weather',
                 optional: true,
                 type: 'EntityRef',
@@ -662,6 +703,23 @@ export const COMPONENT_PROPS = {
             },
         ],
     },
+    WeatherForecast: {
+        doc: "A weather entity's forecast: the weather now, the next 24 hours as a chart (hover it for everything about an hour) and the days ahead. The top bar's weather chip shows it in a drawer; a dashboard can put it in a page of its own, with `expanded` for the full-size layout. Wide, it adds the current readings and a card for each hour. A source with no forecast shows only the weather now.",
+        props: [
+            {
+                doc: 'A weather entity, as a ref like `ha:weather.forecast_home`. The forecasts it offers (hourly, daily) are read through the runtime.',
+                name: 'entity',
+                optional: false,
+                type: 'EntityRef',
+            },
+            {
+                doc: 'Lay it out for a wide space (readings tiles, a card for each hour, more columns for the days) or for a narrow one. Left out, it follows the drawer it is in.',
+                name: 'expanded',
+                optional: true,
+                type: 'boolean',
+            },
+        ],
+    },
     HashsomeProvider: {
         doc: 'Connects the tree to the runtime proxy. Render only on the client.',
         props: [

package/dist/hooks.d.ts

@@ -11,6 +11,12 @@ export declare function useCommand(ref: EntityRef | undefined): CommandSender;
 export declare function useEntityHandle<K extends EntityKind>(kind: K, source: EntityRef | EntityHandle<K>): EntityHandle<K>;
 /** Connection between this browser and the runtime. */
 export declare function useConnectionStatus(): LinkStatus;
+/**
+ * How many times the connection to the runtime has opened. A hook that asked for something while it
+ * was down (and got an error) depends on this, so it asks again when the connection is back: a read
+ * that failed because the page was ahead of the connection, or because it dropped, is not final.
+ */
+export declare function useReconnects(): number;
 /** Status of the runtime's connection to a backend (`ha`, `ma`, ...). */
 export declare function useIntegrationStatus(integration: string): ConnectionStatus | undefined;
 /** Status of every backend integration the runtime reports, keyed by integration id. */

package/dist/hooks.js

@@ -1,4 +1,4 @@
-import { useCallback, useMemo, useSyncExternalStore } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState, useSyncExternalStore } from 'react';
 import { toHandle } from './entity-handle.js';
 import { useClient } from './provider.js';
 // Every `subscribe` handed to `useSyncExternalStore` below is memoized: React resubscribes whenever
@@ -33,6 +33,23 @@ export function useConnectionStatus() {
     const subscribe = useCallback((onChange) => client.onLinkChange(onChange), [client]);
     return useSyncExternalStore(subscribe, () => client.link, () => 'closed');
 }
+/**
+ * How many times the connection to the runtime has opened. A hook that asked for something while it
+ * was down (and got an error) depends on this, so it asks again when the connection is back: a read
+ * that failed because the page was ahead of the connection, or because it dropped, is not final.
+ */
+export function useReconnects() {
+    const link = useConnectionStatus();
+    const [opened, setOpened] = useState(0);
+    const was = useRef(link);
+    useEffect(() => {
+        if (link === 'open' && was.current !== 'open') {
+            setOpened((count) => count + 1);
+        }
+        was.current = link;
+    }, [link]);
+    return opened;
+}
 /** Status of the runtime's connection to a backend (`ha`, `ma`, ...). */
 export function useIntegrationStatus(integration) {
     const client = useClient();

package/dist/icon.d.ts

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

package/dist/icon.js

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

package/dist/index.d.ts

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

package/dist/index.js

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

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

@@ -31,6 +31,8 @@ export declare function PowerButton({ on, onToggle }: {
     on: boolean;
     onToggle: () => void;
 }): import("@emotion/react/jsx-runtime").JSX.Element;
+/** The height of every chip, whatever its label holds. */
+export declare const CHIP_HEIGHT = 28;
 /** A wrapping row of pill choices (modes, presets) with the selected one filled. With `tabs` it is
  * a tab list (the selected chip is the open tab) that never wraps: too many to fit scroll sideways. */
 export declare function ChipRow({ options, value, onChange, tabs, }: {

package/dist/layout/drawer-controls.js

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 /** @jsxImportSource @emotion/react */
 import { Box, Flex, Typography } from 'e-prim';
 import { motion } from 'motion/react';
+import { MarqueeText } from './marquee-text.js';
 import { useEffect, useRef } from 'react';
 import { Icon } from '../icon.js';
 import { FadeScroll } from './fade-scroll.js';
@@ -79,6 +80,8 @@ export function ValueBar({ label, value, min, max, keyStep, round = 1, gradient,
 export function PowerButton({ on, onToggle }) {
     return (_jsx(Flex, { as: "button", type: "button", "aria-pressed": on, "aria-label": on ? 'Turn off' : 'Turn on', title: on ? 'Turn off' : 'Turn on', onClick: onToggle, align: "center", justify: "center", radius: "full", cursor: "pointer", width: 36, height: 36, p: 0, background: on ? 'accent' : 'surface', color: on ? 'accentText' : 'line', css: { flex: 'none', transition: 'background-color 0.2s ease, color 0.2s ease' }, children: _jsx(Icon, { name: "lu:power", size: 16 }) }));
 }
+/** The height of every chip, whatever its label holds. */
+export const CHIP_HEIGHT = 28;
 /** A wrapping row of pill choices (modes, presets) with the selected one filled. With `tabs` it is
  * a tab list (the selected chip is the open tab) that never wraps: too many to fit scroll sideways. */
 export function ChipRow({ options, value, onChange, tabs = false, }) {
@@ -88,6 +91,13 @@ export function ChipRow({ options, value, onChange, tabs = false, }) {
             ? { flexShrink: 0, scrollbarWidth: 'none', '&::-webkit-scrollbar': { display: 'none' } }
             : { flexWrap: 'wrap' }, children: options.map((option) => {
             const selected = option.value === value;
-            return (_jsxs(Flex, { as: "button", type: "button", ...(tabs ? { role: 'tab', 'aria-selected': selected } : { 'aria-pressed': selected }), ...(option.ariaLabel ? { 'aria-label': option.ariaLabel } : {}), onClick: () => onChange(option.value), align: "center", gap: 1.5, radius: "full", cursor: "pointer", py: 1.5, px: 3, background: selected ? 'accent' : 'surface', color: selected ? 'accentText' : 'text', css: { flex: 'none', whiteSpace: 'nowrap' }, children: [option.icon ? _jsx(Icon, { name: option.icon, size: 14 }) : null, _jsx(Typography, { as: "span", variant: "body", noWrap: true, textOverflow: "ellipsis", css: { maxWidth: 220 }, children: option.label })] }, option.value));
+            return (_jsxs(Flex, { as: "button", type: "button", ...(tabs ? { role: 'tab', 'aria-selected': selected } : { 'aria-pressed': selected }), ...(option.ariaLabel ? { 'aria-label': option.ariaLabel } : {}), onClick: () => onChange(option.value), align: "center", gap: 1.5, radius: "full", cursor: "pointer", 
+                // A fixed height, not the text's: an emoji is drawn from another font with a taller line,
+                // which would make this one chip taller than the rest.
+                height: CHIP_HEIGHT, px: 3, background: selected ? 'accent' : 'surface', color: selected ? 'accentText' : 'text', css: {
+                    flex: 'none',
+                    whiteSpace: 'nowrap',
+                    transition: 'background-color 160ms ease, color 160ms ease',
+                }, children: [option.icon ? _jsx(Icon, { name: option.icon, size: 14 }) : null, _jsx(Typography, { as: "span", variant: "body", css: { minWidth: 0, maxWidth: 220 }, children: _jsx(MarqueeText, { children: option.label }) })] }, option.value));
         }) }));
 }

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

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

package/dist/layout/history-section.js

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

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

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

package/dist/layout/logbook-history.js

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

package/dist/layout/marquee-text.d.ts

@@ -0,0 +1,11 @@
+import { type ReactNode } from 'react';
+/**
+ * One line of text that fits the width it is given: when it is too long it rolls sideways, resting at
+ * each end, so all of it can be read; when it fits it just sits there. Whoever it is in decides the
+ * width (a `max-width` on it or on a parent), so a long title can never push its tile out of shape,
+ * whatever it holds (an emoji at the end included). Where the person asks their device for less
+ * motion it stays still and ends in an ellipsis.
+ */
+export declare function MarqueeText({ children }: {
+    children: ReactNode;
+}): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/layout/marquee-text.js

@@ -0,0 +1,67 @@
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+/** @jsxImportSource @emotion/react */
+import { motion, useReducedMotion } from 'motion/react';
+import { useEffect, useRef, useState } from 'react';
+/** How fast the text rolls, in px a second. */
+const SPEED = 36;
+/** How long it waits at each end, in seconds. */
+const PAUSE = 1.4;
+/**
+ * One line of text that fits the width it is given: when it is too long it rolls sideways, resting at
+ * each end, so all of it can be read; when it fits it just sits there. Whoever it is in decides the
+ * width (a `max-width` on it or on a parent), so a long title can never push its tile out of shape,
+ * whatever it holds (an emoji at the end included). Where the person asks their device for less
+ * motion it stays still and ends in an ellipsis.
+ */
+export function MarqueeText({ children }) {
+    const outer = useRef(null);
+    const inner = useRef(null);
+    const [overflow, setOverflow] = useState(0);
+    const still = useReducedMotion();
+    useEffect(() => {
+        const frame = outer.current;
+        const text = inner.current;
+        if (!frame || !text) {
+            return;
+        }
+        const measure = () => setOverflow(Math.max(0, Math.ceil(text.scrollWidth - frame.clientWidth)));
+        measure();
+        if (typeof ResizeObserver === 'undefined') {
+            return;
+        }
+        // The frame changes with the room it has; the text with what it says.
+        const watch = new ResizeObserver(measure);
+        watch.observe(frame);
+        watch.observe(text);
+        return () => watch.disconnect();
+    }, []);
+    const rolling = overflow > 0 && !still;
+    const seconds = overflow / SPEED;
+    return (_jsx("span", { ref: outer, css: {
+            display: 'block',
+            // A line height of its own, not the font's: an emoji comes from another font with a taller
+            // line, and would make a row with one in its title taller than the rest.
+            lineHeight: 1.3,
+            minWidth: 0,
+            maxWidth: '100%',
+            overflow: 'hidden',
+            whiteSpace: 'nowrap',
+            textOverflow: rolling ? 'clip' : 'ellipsis',
+        }, children: _jsx(motion.span, { ref: inner, css: { display: 'inline-block' }, ...(rolling
+                ? {
+                    animate: { x: [0, 0, -overflow, -overflow, 0] },
+                    transition: {
+                        duration: 2 * seconds + 2 * PAUSE,
+                        times: [
+                            0,
+                            PAUSE / (2 * seconds + 2 * PAUSE),
+                            (PAUSE + seconds) / (2 * seconds + 2 * PAUSE),
+                            (2 * PAUSE + seconds) / (2 * seconds + 2 * PAUSE),
+                            1,
+                        ],
+                        ease: 'linear',
+                        repeat: Infinity,
+                    },
+                }
+                : {}), children: children }) }));
+}

package/dist/layout/reveal.d.ts

@@ -0,0 +1,11 @@
+import type { ReactNode } from 'react';
+/**
+ * Fades its content in as it appears, rising a few pixels, a little later for each one after the
+ * first (the first handful only, so a long list does not take long to arrive). It only moves what is
+ * drawn inside it, never the room it takes, so nothing around it shifts. Where the person asks their
+ * device for less motion it just appears.
+ */
+export declare function Reveal({ index, children }: {
+    index?: number;
+    children: ReactNode;
+}): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/layout/reveal.js

@@ -0,0 +1,19 @@
+import { Fragment as _Fragment, jsx as _jsx } from "@emotion/react/jsx-runtime";
+/** @jsxImportSource @emotion/react */
+import { motion, useReducedMotion } from 'motion/react';
+/** How much later each following item starts, in seconds, and how many are staggered at all. */
+const STAGGER = 0.03;
+const STAGGERED = 8;
+/**
+ * Fades its content in as it appears, rising a few pixels, a little later for each one after the
+ * first (the first handful only, so a long list does not take long to arrive). It only moves what is
+ * drawn inside it, never the room it takes, so nothing around it shifts. Where the person asks their
+ * device for less motion it just appears.
+ */
+export function Reveal({ index = 0, children }) {
+    const still = useReducedMotion();
+    if (still) {
+        return _jsx(_Fragment, { children: children });
+    }
+    return (_jsx(motion.div, { initial: { opacity: 0, y: 8 }, animate: { opacity: 1, y: 0 }, transition: { duration: 0.22, ease: 'easeOut', delay: Math.min(index, STAGGERED) * STAGGER }, children: children }));
+}

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

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

package/dist/layout/series-chart.js

@@ -1,5 +1,4 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-/** @jsxImportSource @emotion/react */
 import { Box, Flex, Typography, useColorByKey } from 'e-prim';
 import { useTypographySize } from '../theme/use-typography.js';
 import { Area, AreaChart, CartesianGrid, ResponsiveContainer, Tooltip, XAxis, YAxis, } from 'recharts';
@@ -13,13 +12,19 @@ export function formatTick(range, iso) {
     }
     return date.toLocaleDateString([], { month: 'short', day: 'numeric' });
 }
+/** The grid's dashed lines, but not one along the chart's bottom edge: that is the solid axis line. */
+const dashedExceptBottom = (stroke) => ({ x1, x2, y1, offset, }) => y1 >= offset.top + offset.height - 1 ? (_jsx("g", {})) : (_jsx("line", { x1: x1, x2: x2, y1: y1, y2: y1, stroke: stroke, strokeOpacity: 0.3, strokeDasharray: "3 3" }));
 /** A bare sparkline, or — when `expanded` — the full chart with axes, grid and a tooltip. Shared by the power and sensor drawers. */
-export function SeriesChart({ samples, range, expanded, unit, fitDomain = false, }) {
+export function SeriesChart({ samples, range, expanded, unit, fitDomain = false, height, }) {
     const accent = useColorByKey('accent') ?? '';
     const textMuted = useColorByKey('textMuted') ?? '';
     const line = useColorByKey('line') ?? '';
     const tickSize = useTypographySize('secondary');
-    return (_jsx(Box, { height: expanded ? 220 : 48, mt: 3, children: _jsx(ResponsiveContainer, { width: "100%", height: "100%", children: _jsxs(AreaChart, { data: samples, margin: { top: 4, right: 0, bottom: 0, left: 0 }, children: [expanded ? _jsx(CartesianGrid, { stroke: line, strokeDasharray: "3 3", vertical: false }) : null, expanded ? (_jsx(XAxis, { dataKey: "timestamp", tickFormatter: (value) => formatTick(range, value), tick: { fontSize: tickSize, fill: textMuted }, axisLine: false, tickLine: false, minTickGap: 24 })) : null, expanded ? (_jsx(YAxis, { width: 36, ...(fitDomain ? { domain: ['auto', 'auto'] } : {}), tick: { fontSize: tickSize, fill: textMuted }, axisLine: false, tickLine: false })) : null, _jsx(Tooltip, { content: _jsx(ChartTooltip, { unit: unit }), ...(expanded
+    return (_jsx(Box, { height: height ?? (expanded ? 220 : 48), mt: 3, children: _jsx(ResponsiveContainer, { width: "100%", height: "100%", children: _jsxs(AreaChart, { data: samples, margin: { top: 4, right: 0, bottom: 0, left: 0 }, children: [expanded ? (_jsx(CartesianGrid, { stroke: line, strokeOpacity: 0.3, strokeDasharray: "3 3", vertical: false, 
+                        // The chart's bottom edge is the solid axis line, so no dashed line goes under it.
+                        horizontal: dashedExceptBottom(line) })) : null, expanded ? (_jsx(XAxis, { dataKey: "timestamp", tickFormatter: (value) => formatTick(range, value), tick: { fontSize: tickSize, fill: textMuted }, 
+                        // The bottom of the chart is a solid line; the grid above it is dashed and lighter.
+                        axisLine: { stroke: line, strokeOpacity: 0.5, strokeWidth: 0.5 }, tickLine: false, minTickGap: 24 })) : null, expanded ? (_jsx(YAxis, { width: 36, ...(fitDomain ? { domain: ['auto', 'auto'] } : {}), tick: { fontSize: tickSize, fill: textMuted }, axisLine: false, tickLine: false })) : null, _jsx(Tooltip, { content: _jsx(ChartTooltip, { unit: unit }), ...(expanded
                             ? {}
                             : { allowEscapeViewBox: { x: false, y: true }, position: { y: -52 } }) }), _jsx(Area, { type: "monotone", dataKey: "value", stroke: accent, fill: accent, fillOpacity: 0.2, strokeWidth: 2, dot: false, isAnimationActive: false })] }) }) }));
 }
@@ -42,5 +47,5 @@ function ChartTooltip({ active, payload, unit, }) {
                         day: 'numeric',
                         hour: '2-digit',
                         minute: '2-digit',
-                    }) }), _jsxs(Typography, { as: "span", variant: "bodyStrong", children: [Math.round(sample.value * 10) / 10, " ", unit] })] }) }));
+                    }) }), _jsxs(Typography, { as: "span", variant: "bodyStrong", children: [Math.round(sample.value * 10) / 10, " ", unit] }), sample.notes?.map((note) => (_jsx(Typography, { as: "span", variant: "secondary", color: "textMuted", children: note }, note)))] }) }));
 }

package/dist/layout/skeleton.d.ts

@@ -0,0 +1,11 @@
+/** @jsxImportSource @emotion/react */
+import { type BoxProps } from 'e-prim';
+/** A placeholder block for something that is on its way, in the size it will have, so what is around
+ * it does not move when the real thing arrives. It pulses gently, and holds still where the person
+ * asks their device for less motion. Decorative: say what is loading around it, with `aria-busy`. */
+export declare function Skeleton({ width, height, radius, }: {
+    /** px, or any CSS length. */
+    width: number | string;
+    height: number | string;
+    radius?: BoxProps['radius'];
+}): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/layout/skeleton.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+/** @jsxImportSource @emotion/react */
+import { Box } from 'e-prim';
+import { motion, useReducedMotion } from 'motion/react';
+/** A placeholder block for something that is on its way, in the size it will have, so what is around
+ * it does not move when the real thing arrives. It pulses gently, and holds still where the person
+ * asks their device for less motion. Decorative: say what is loading around it, with `aria-busy`. */
+export function Skeleton({ width, height, radius = 'small', }) {
+    const still = useReducedMotion();
+    return (_jsx(Box, { "aria-hidden": "true", background: "surfaceRaised", radius: radius, css: { width, height, flex: 'none', overflow: 'hidden' }, children: _jsx(motion.span, { css: { display: 'block', width: '100%', height: '100%', background: 'currentColor' }, initial: { opacity: 0.1 }, ...(still
+                ? {}
+                : {
+                    animate: { opacity: [0.04, 0.14, 0.04] },
+                    transition: { duration: 1.4, repeat: Infinity, ease: 'easeInOut' },
+                }) }) }));
+}

package/dist/layout/tile.d.ts

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