@hashsome/ui 0.1.0

package/dist/layout/sensor-history.js

@@ -0,0 +1,91 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+/** @jsxImportSource @emotion/react */
+import { Flex, Typography } from 'e-prim';
+import { useState } from 'react';
+import { useEntityHistory } from '../use-entity-history.js';
+import { DateTimeField } from './date-time-field.js';
+import { useDetail } from './detail-provider.js';
+import { aggregate, downsample, fromDateTimeInput, periodStart, samplesBetween, toDateTimeInput, } from './sensor-stats.js';
+import { RangeSwitcher, SeriesChart, } from './series-chart.js';
+const DAY = 24 * 60 * 60_000;
+const RANGES = [
+    { value: '1h', label: '1H' },
+    { value: '1d', label: '1D' },
+    { value: '1w', label: '1W' },
+    { value: '1m', label: '1M' },
+    { value: 'custom', label: 'Custom' },
+];
+/** The month's hourly points up to where the week's finer points begin, then those. */
+function mergeHistory(coarse, fine) {
+    const from = fine?.[0]?.timestamp;
+    return [
+        ...(coarse ?? []).filter((sample) => from === undefined || sample.timestamp < from),
+        ...(fine ?? []),
+    ];
+}
+const WINDOW_MS = {
+    '1h': 60 * 60_000,
+    '1d': DAY,
+    '1w': 7 * DAY,
+    '1m': 30 * DAY,
+};
+function formatNumber(value) {
+    return String(Math.round(value * 10) / 10);
+}
+/**
+ * A sensor's history for its detail drawer: a bare sparkline while the drawer is at its normal
+ * width, and — once expanded — the full chart with a range switcher (including a custom from/to
+ * date and time range). Min / max tiles aggregate the supplied samples: today / this week / this month
+ * collapsed, today / last 7 / last 30 days expanded, plus the custom range when one is chosen.
+ */
+export function SensorHistory({ samples: given, entity, unit, }) {
+    // Hourly averages for the month, with five-minute ones for the last week laid over them, so the
+    // 1H and 1D views have more than a point or two.
+    const month = useEntityHistory(given ? undefined : entity, { range: '1m', bucket: '1h' });
+    const week = useEntityHistory(given ? undefined : entity, { range: '1w', bucket: '5m' });
+    const samples = given ?? mergeHistory(month.result?.points, week.result?.points);
+    const { detail } = useDetail();
+    const expanded = detail?.expanded ?? false;
+    const now = new Date();
+    const [range, setRange] = useState('1d');
+    const [from, setFrom] = useState(() => toDateTimeInput(new Date(now.getTime() - 7 * DAY)));
+    const [to, setTo] = useState(() => toDateTimeInput(now));
+    if (samples.length === 0) {
+        return null;
+    }
+    const fromDate = fromDateTimeInput(from);
+    const toDate = fromDateTimeInput(to);
+    const customWindow = fromDate && toDate && fromDate <= toDate ? { from: fromDate, to: toDate } : undefined;
+    // Collapsed always shows the 1D sparkline; the switcher only exists once expanded.
+    const activeRange = expanded ? range : '1d';
+    const chartSamples = activeRange === 'custom'
+        ? customWindow
+            ? samplesBetween(samples, customWindow.from, customWindow.to)
+            : []
+        : samplesBetween(samples, new Date(now.getTime() - WINDOW_MS[activeRange]), now);
+    const stat = (start) => aggregate(samplesBetween(samples, start, now));
+    const tiles = expanded
+        ? [
+            { label: 'Today', value: stat(periodStart('today', now)) },
+            { label: 'Last 7 days', value: stat(periodStart('last7d', now)) },
+            { label: 'Last 30 days', value: stat(periodStart('last30d', now)) },
+            ...(range === 'custom'
+                ? [
+                    {
+                        label: 'Custom range',
+                        value: customWindow
+                            ? aggregate(samplesBetween(samples, customWindow.from, customWindow.to))
+                            : undefined,
+                    },
+                ]
+                : []),
+        ]
+        : [
+            { label: 'Today', value: stat(periodStart('today', now)) },
+            { label: 'This week', value: stat(periodStart('week', now)) },
+            { label: 'This month', value: stat(periodStart('month', now)) },
+        ];
+    return (_jsxs(Flex, { direction: "column", gap: 2, mt: 4, children: [_jsxs(Flex, { justify: "space-between", align: "center", children: [_jsx(Typography, { as: "span", variant: "eyebrow", uppercase: true, color: "textMuted", children: "History" }), expanded ? _jsx(RangeSwitcher, { range: range, options: RANGES, onChange: setRange }) : null] }), expanded && range === 'custom' ? (_jsxs(Flex, { align: "center", gap: 4, css: { flexWrap: 'wrap' }, children: [_jsx(DateTimeField, { label: "From", value: from, max: to, onChange: setFrom }), _jsx(DateTimeField, { label: "To", value: to, min: from, align: "right", onChange: setTo })] })) : null, _jsx(Flex, { gap: 2, children: tiles.map((tile) => (_jsxs(Flex, { direction: "column", grow: 1, minWidth: 0, background: "surfaceRaised", radius: "row", py: 2.5, px: 3, css: { flexBasis: 0 }, children: [_jsx(Typography, { as: "span", variant: "secondary", color: "textMuted", children: tile.label }), _jsx(Typography, { as: "span", variant: "bodyStrong", noWrap: true, children: tile.value
+                                ? `${formatNumber(tile.value.min)} – ${formatNumber(tile.value.max)} ${unit}`
+                                : '—' })] }, tile.label))) }), chartSamples.length === 0 ? (_jsx(Typography, { as: "span", variant: "secondary", color: "textMuted", children: "No readings in this range." })) : (_jsx(SeriesChart, { samples: downsample(chartSamples, 240), range: activeRange, expanded: expanded, unit: unit, fitDomain: true }))] }));
+}

package/dist/layout/sensor-history.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sensor-history.js","sourceRoot":"","sources":["../../src/layout/sensor-history.tsx"],"names":[],"mappings":"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"}

package/dist/layout/sensor-stats.d.ts

@@ -0,0 +1,21 @@
+import type { SeriesSample } from './series-chart.tsx';
+export interface MinMax {
+    min: number;
+    max: number;
+    avg: number;
+}
+export declare function startOfDay(date: Date): Date;
+/** Local midnight of the most recent Monday. */
+export declare function startOfWeek(date: Date): Date;
+export declare function startOfMonth(date: Date): Date;
+/** The period windows the readout drawer aggregates over; `from` inclusive, `to` is `now`. */
+export declare function periodStart(period: 'today' | 'week' | 'month' | 'last7d' | 'last30d', now: Date): Date;
+export declare function samplesBetween(samples: SeriesSample[], from: Date, to: Date): SeriesSample[];
+/** Min / max / average of the samples, or `undefined` when there are none. */
+export declare function aggregate(samples: SeriesSample[]): MinMax | undefined;
+/** Thins a long series to at most `limit` points by bucket-averaging, so a month of readings stays cheap to draw. */
+export declare function downsample(samples: SeriesSample[], limit: number): SeriesSample[];
+/** `YYYY-MM-DDTHH:mm` in local time, the value format of `<input type="datetime-local">`. */
+export declare function toDateTimeInput(date: Date): string;
+/** The local time a `YYYY-MM-DDTHH:mm` string names, or `undefined` if it isn't one. */
+export declare function fromDateTimeInput(value: string): Date | undefined;

package/dist/layout/sensor-stats.js

@@ -0,0 +1,79 @@
+const DAY = 24 * 60 * 60_000;
+export function startOfDay(date) {
+    return new Date(date.getFullYear(), date.getMonth(), date.getDate());
+}
+/** Local midnight of the most recent Monday. */
+export function startOfWeek(date) {
+    const day = startOfDay(date);
+    const sinceMonday = (day.getDay() + 6) % 7;
+    return new Date(day.getFullYear(), day.getMonth(), day.getDate() - sinceMonday);
+}
+export function startOfMonth(date) {
+    return new Date(date.getFullYear(), date.getMonth(), 1);
+}
+/** The period windows the readout drawer aggregates over; `from` inclusive, `to` is `now`. */
+export function periodStart(period, now) {
+    switch (period) {
+        case 'today':
+            return startOfDay(now);
+        case 'week':
+            return startOfWeek(now);
+        case 'month':
+            return startOfMonth(now);
+        case 'last7d':
+            return new Date(now.getTime() - 7 * DAY);
+        case 'last30d':
+            return new Date(now.getTime() - 30 * DAY);
+    }
+}
+export function samplesBetween(samples, from, to) {
+    const lo = from.getTime();
+    const hi = to.getTime();
+    return samples.filter((sample) => {
+        const t = Date.parse(sample.timestamp);
+        return t >= lo && t <= hi;
+    });
+}
+/** Min / max / average of the samples, or `undefined` when there are none. */
+export function aggregate(samples) {
+    if (samples.length === 0) {
+        return undefined;
+    }
+    let min = Infinity;
+    let max = -Infinity;
+    let sum = 0;
+    for (const sample of samples) {
+        min = Math.min(min, sample.value);
+        max = Math.max(max, sample.value);
+        sum += sample.value;
+    }
+    return { min, max, avg: sum / samples.length };
+}
+/** Thins a long series to at most `limit` points by bucket-averaging, so a month of readings stays cheap to draw. */
+export function downsample(samples, limit) {
+    if (samples.length <= limit) {
+        return samples;
+    }
+    const size = Math.ceil(samples.length / limit);
+    const out = [];
+    for (let i = 0; i < samples.length; i += size) {
+        const bucket = samples.slice(i, i + size);
+        out.push({
+            timestamp: bucket[Math.floor(bucket.length / 2)].timestamp,
+            value: bucket.reduce((sum, s) => sum + s.value, 0) / bucket.length,
+        });
+    }
+    return out;
+}
+const pad = (n) => String(n).padStart(2, '0');
+/** `YYYY-MM-DDTHH:mm` in local time, the value format of `<input type="datetime-local">`. */
+export function toDateTimeInput(date) {
+    return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}T${pad(date.getHours())}:${pad(date.getMinutes())}`;
+}
+/** The local time a `YYYY-MM-DDTHH:mm` string names, or `undefined` if it isn't one. */
+export function fromDateTimeInput(value) {
+    const match = /^(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2})$/.exec(value);
+    return match
+        ? new Date(Number(match[1]), Number(match[2]) - 1, Number(match[3]), Number(match[4]), Number(match[5]))
+        : undefined;
+}

package/dist/layout/sensor-stats.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sensor-stats.js","sourceRoot":"","sources":["../../src/layout/sensor-stats.ts"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,25 @@
+export interface SeriesSample {
+    /** ISO 8601. */
+    timestamp: string;
+    value: number;
+}
+/** 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, }: {
+    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;
+}): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function RangeSwitcher<T extends string>({ range, options, onChange, }: {
+    range: T;
+    options: {
+        value: T;
+        label: string;
+    }[];
+    onChange: (range: T) => void;
+}): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/layout/series-chart.js

@@ -0,0 +1,46 @@
+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';
+export function formatTick(range, iso) {
+    const date = new Date(iso);
+    if (range === '1h' || range === '1d') {
+        return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+    }
+    if (range === '1w') {
+        return date.toLocaleDateString([], { weekday: 'short' });
+    }
+    return date.toLocaleDateString([], { month: 'short', day: 'numeric' });
+}
+/** A bare sparkline, or — when `expanded` — the full chart with axes, grid and a tooltip. Shared by the power and sensor drawers. */
+export function SeriesChart({ samples, range, expanded, unit, fitDomain = false, }) {
+    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
+                            ? {}
+                            : { 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 })] }) }) }));
+}
+export function RangeSwitcher({ range, options, onChange, }) {
+    return (_jsx(Flex, { background: "surfaceRaised", radius: "full", p: 0.5, gap: 0.5, children: options.map((option) => {
+            const active = option.value === range;
+            return (_jsx(Flex, { as: "button", type: "button", onClick: () => onChange(option.value), grow: 1, radius: "full", cursor: "pointer", align: "center", justify: "center", py: 1.25, px: 2.5, background: active ? 'accent' : 'transparent', color: active ? 'accentText' : 'text', children: _jsx(Typography, { as: "span", variant: "label", children: option.label }) }, option.value));
+        }) }));
+}
+function ChartTooltip({ active, payload, unit, }) {
+    if (!active || !payload?.length) {
+        return null;
+    }
+    const sample = payload[0]?.payload;
+    if (!sample) {
+        return null;
+    }
+    return (_jsx(Box, { background: "surfaceRaised", color: "text", border: true, radius: "small", typography: "body", py: 1.5, px: 2.5, children: _jsxs(Flex, { direction: "column", children: [_jsx(Typography, { as: "span", variant: "secondary", color: "textMuted", children: new Date(sample.timestamp).toLocaleString([], {
+                        month: 'short',
+                        day: 'numeric',
+                        hour: '2-digit',
+                        minute: '2-digit',
+                    }) }), _jsxs(Typography, { as: "span", variant: "bodyStrong", children: [Math.round(sample.value * 10) / 10, " ", unit] })] }) }));
+}

package/dist/layout/series-chart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"series-chart.js","sourceRoot":"","sources":["../../src/layout/series-chart.tsx"],"names":[],"mappings":"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"}

package/dist/layout/stepper.d.ts

@@ -0,0 +1,10 @@
+import type { ReactNode } from 'react';
+/** A pill holding a minus button, a value and a plus button. The buttons inside lose their own
+ * background and shrink to fit the pill. */
+export declare function Stepper({ children }: {
+    children: ReactNode;
+}): import("@emotion/react/jsx-runtime").JSX.Element;
+/** The value between a `Stepper`'s buttons. */
+export declare function StepperValue({ children }: {
+    children: ReactNode;
+}): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/layout/stepper.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+/** @jsxImportSource @emotion/react */
+import { Flex, Typography } from 'e-prim';
+/** A pill holding a minus button, a value and a plus button. The buttons inside lose their own
+ * background and shrink to fit the pill. */
+export function Stepper({ children }) {
+    return (_jsx(Flex, { align: "center", background: "surfaceRaised", radius: "full", height: 32, gap: 1, px: 1, css: { '& button': { background: 'none', width: 28, height: 28 } }, children: children }));
+}
+/** The value between a `Stepper`'s buttons. */
+export function StepperValue({ children }) {
+    return (_jsx(Typography, { as: "span", variant: "body", minWidth: "4.2em", align: "center", css: { fontVariantNumeric: 'tabular-nums' }, children: children }));
+}

package/dist/layout/stepper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stepper.js","sourceRoot":"","sources":["../../src/layout/stepper.tsx"],"names":[],"mappings":";AAAA,sCAAsC;AACtC,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAC;AAG1C;4CAC4C;AAC5C,MAAM,UAAU,OAAO,CAAC,EAAE,QAAQ,EAA2B;IAC3D,OAAO,CACL,KAAC,IAAI,IACH,KAAK,EAAC,QAAQ,EACd,UAAU,EAAC,eAAe,EAC1B,MAAM,EAAC,MAAM,EACb,MAAM,EAAE,EAAE,EACV,GAAG,EAAE,CAAC,EACN,EAAE,EAAE,CAAC,EACL,GAAG,EAAE,EAAE,UAAU,EAAE,EAAE,UAAU,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,EAAE,YAEjE,QAAQ,GACJ,CACR,CAAC;AACJ,CAAC;AAED,+CAA+C;AAC/C,MAAM,UAAU,YAAY,CAAC,EAAE,QAAQ,EAA2B;IAChE,OAAO,CACL,KAAC,UAAU,IACT,EAAE,EAAC,MAAM,EACT,OAAO,EAAC,MAAM,EACd,QAAQ,EAAC,OAAO,EAChB,KAAK,EAAC,QAAQ,EACd,GAAG,EAAE,EAAE,kBAAkB,EAAE,cAAc,EAAE,YAE1C,QAAQ,GACE,CACd,CAAC;AACJ,CAAC"}

package/dist/layout/swatch-row.d.ts

@@ -0,0 +1,19 @@
+import type { IconName } from '../icon-data.ts';
+export interface SwatchItem {
+    key: string;
+    label: string;
+    selected: boolean;
+    onPick: () => void;
+    /** Literal CSS background of the dot. */
+    color: string;
+    /** Optional glyph drawn on the dot (the dot grows slightly to fit it). */
+    icon?: IconName;
+}
+/** The row of circular choices a tile shows in place of its label (light colors, climate modes):
+ * springs in left to right, with the selected one ringed. `customLabel` + `onCustom` add a trailing
+ * rainbow "custom" swatch after a divider. */
+export declare function SwatchRow({ items, customLabel, onCustom, }: {
+    items: SwatchItem[];
+    customLabel?: string;
+    onCustom?: () => void;
+}): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/layout/swatch-row.js

@@ -0,0 +1,20 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+/** @jsxImportSource @emotion/react */
+import { Box, Flex } from 'e-prim';
+import { motion } from 'motion/react';
+import { Icon } from '../icon.js';
+const SWATCH_SPRING = { type: 'spring', stiffness: 520, damping: 26 };
+/** The row of circular choices a tile shows in place of its label (light colors, climate modes):
+ * springs in left to right, with the selected one ringed. `customLabel` + `onCustom` add a trailing
+ * rainbow "custom" swatch after a divider. */
+export function SwatchRow({ items, customLabel, onCustom, }) {
+    return (_jsxs(Flex, { as: motion.div, align: "center", justify: "center", gap: 0.5, minWidth: 0, initial: { opacity: 0 }, animate: { opacity: 1 }, transition: { duration: 0.15 }, children: [items.map((item, index) => (_jsx(Flex, { type: "button", as: motion.button, initial: { scale: 0, opacity: 0 }, animate: { scale: 1, opacity: 1 }, transition: { ...SWATCH_SPRING, delay: index * 0.04 }, "aria-label": item.label, "aria-pressed": item.selected, title: item.label, onClick: item.onPick, center: true, width: 30, height: 30, p: 0, radius: "full", cursor: "pointer", css: { flex: 'none', background: 'transparent' }, children: _jsx(Flex, { as: "span", center: true, width: item.icon ? 24 : 20, height: item.icon ? 24 : 20, radius: "full", color: "accentText", css: ({ palette }) => ({
+                        background: item.color,
+                        // A ring in the page's own colors, so it reads on either theme.
+                        boxShadow: item.selected
+                            ? `0 0 0 2px ${palette.surface}, 0 0 0 4px ${palette.text}`
+                            : 'none',
+                    }), children: item.icon ? _jsx(Icon, { name: item.icon, size: 14 }) : null }) }, item.key))), onCustom ? (_jsxs(_Fragment, { children: [items.length > 0 ? (_jsx(Box, { as: "span", "aria-hidden": "true", width: 1, height: 24, mx: 1.5, background: "line", css: { opacity: 0.4 } })) : null, _jsx(Flex, { as: motion.button, initial: { scale: 0, opacity: 0 }, animate: { scale: 1, opacity: 1 }, transition: { ...SWATCH_SPRING, delay: items.length * 0.04 }, type: "button", "aria-label": customLabel ?? 'Custom', title: customLabel ?? 'Custom', onClick: onCustom, center: true, width: 30, height: 30, p: 0, radius: "full", cursor: "pointer", css: { flex: 'none', background: 'transparent' }, children: _jsx(Flex, { as: "span", center: true, width: 20, height: 20, radius: "full", css: {
+                                background: 'conic-gradient(#ff5a4d, #ffd24a, #5fd17a, #4dc9ff, #6a7bff, #c75bff, #ff5a4d)',
+                            }, children: _jsx(Box, { as: "span", width: 8, height: 8, radius: "full", background: "surface" }) }) })] })) : null] }));
+}

package/dist/layout/swatch-row.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"swatch-row.js","sourceRoot":"","sources":["../../src/layout/swatch-row.tsx"],"names":[],"mappings":"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"}

package/dist/layout/tile.d.ts

@@ -0,0 +1,67 @@
+import { type ReactNode } from 'react';
+import type { IconName } from '../icon-data.ts';
+import { type EntityStatus } from '../status.ts';
+import { type EnergyChartProps } from './energy-chart.tsx';
+import { type LogbookEntry } from './history-section.tsx';
+export interface TileProps {
+    /** The tile's name. */
+    label: string;
+    /** Icon id, e.g. `lu:lightbulb`. */
+    icon?: IconName;
+    /** Second line. Replaced by the status label when the entity is not ready. */
+    secondary?: ReactNode;
+    /** Status of what the tile shows; anything but `ready` disables it and shows why (Loading, Unavailable, Not found). */
+    status?: EntityStatus;
+    /** Whether the thing it controls is on: lights the icon (and the whole card for an on/off tile) with the accent color. */
+    active?: boolean;
+    /** Highlights the tile as pending / done / failed after an action. */
+    feedback?: 'pending' | 'done' | 'error' | undefined;
+    /** Called on a tap — not after a drag or a hold. */
+    onPress?: (() => void) | undefined;
+    /** 0..1. Renders a fill bar; enables drag and arrow keys to change it. */
+    fill?: number;
+    /** Called once when a drag ends or an arrow key is pressed. */
+    onFillChange?: (fill: number) => void;
+    /** Controls shown on the right (steppers, icon buttons). */
+    trailing?: ReactNode;
+    /** Replaces the label and status with custom content (e.g. color swatches) while set; the tile stops being one big button. `openDetail` opens the drawer. */
+    overlay?: (controls: {
+        openDetail: () => void;
+    }) => ReactNode;
+    /** Native tooltip text. */
+    title?: string;
+    /** Rendered in the shared detail drawer on a long-press (~500ms). Adds the hold gesture. */
+    detail?: ReactNode;
+    /** Subtitle under the drawer header's name, e.g. "Light". Only used when `detail` is set. */
+    kind?: string;
+    /**
+     * A power-draw chart, shown in the drawer above `history` (e.g. from a Shelly's energy
+     * monitoring). Generic across every entity type.
+     */
+    energy?: EnergyChartProps;
+    /**
+     * Recent activity, shown in the drawer below `detail`/`energy`. Generic across every entity
+     * type — whichever component has a way to fetch it just passes it through.
+     */
+    history?: LogbookEntry[];
+}
+/** 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 IconButton({ icon, label, onClick, disabled, active, pressed, primary, size, glyph, color, feedback, }: {
+    icon: IconName;
+    label: string;
+    onClick?: () => void;
+    disabled?: boolean;
+    active?: boolean;
+    primary?: boolean;
+    /** Icon glyph size in px; the button's own circle scales with it (2x). Defaults to this button's usual, larger size when omitted. */
+    size?: number;
+    /** Icon glyph size in px, leaving the button's circle at its usual size (unlike `size`, which scales both). */
+    glyph?: number;
+    /** Literal CSS color for the glyph (e.g. a light's current color). */
+    color?: string;
+    /** For a toggle: whether it is on, announced to assistive tech (`aria-pressed`). Pair it with `active` to color it. */
+    pressed?: boolean;
+    /** Shows the outcome of an action the press started: `pending` dims it, `done` flashes it with the accent, `error` turns it red. Every press also gives a small squeeze. */
+    feedback?: 'pending' | 'done' | 'error' | undefined;
+}): import("@emotion/react/jsx-runtime").JSX.Element;