@camstack/ui-library 0.1.57 → 0.1.58

package/dist/composites/battery-badge.d.ts

@@ -2,6 +2,9 @@ export interface BatteryStatusLike {
     readonly percentage: number;
     readonly charging: 'dc' | 'solar' | 'none';
     readonly sleeping: boolean;
+    /** True for a binary LOW_BAT source with no real % — render "Normal"/"Low"
+     *  instead of a misleading exact percentage. */
+    readonly binary?: boolean;
 }
 export interface BatteryBadgeProps {
     readonly status: BatteryStatusLike | null | undefined;

package/dist/composites/camera-stream-player.d.ts

@@ -1,5 +1,35 @@
 import { ReactNode } from 'react';
+import { CamProfile } from '@camstack/types';
+type WebkitPresentationMode = 'inline' | 'picture-in-picture' | 'fullscreen';
+declare global {
+    interface HTMLVideoElement {
+        webkitSetPresentationMode?: (mode: WebkitPresentationMode) => void;
+        readonly webkitPresentationMode?: WebkitPresentationMode;
+    }
+}
 export type PlayerConnectionState = 'connecting' | 'playing' | 'error' | 'disconnected' | 'idle';
+/**
+ * Discriminated WebRTC target — same shape as `WebrtcStreamTarget` on the
+ * backend cap; the `profile` tier uses the canonical `CamProfile` enum.
+ * Carried by `getSessionState`'s `pendingRenegotiation` and handed back to
+ * `reoffer` verbatim during an adaptive re-offer.
+ */
+export type PlayerWebrtcTarget = {
+    readonly kind: 'adaptive';
+} | {
+    readonly kind: 'profile';
+    readonly profile: CamProfile;
+} | {
+    readonly kind: 'cam-stream';
+    readonly camStreamId: string;
+};
+/** Live signaling state polled mid-stream — the adaptive re-offer signal. */
+export interface SessionSignalingState {
+    readonly pendingRenegotiation: {
+        readonly target: PlayerWebrtcTarget;
+        readonly epoch: number;
+    } | null;
+}
 /**
  * Signaling function for WebRTC connection.
  * Called by the player to establish the WebRTC session.
@@ -101,7 +131,7 @@ export interface CameraStreamPlayerProps {
      * Main/High (incl. 4K) source pass through with NO transcode — the only
      * path that lets iOS decode High. The caller closes over the target.
      */
-    handleOffer?: (sdpOffer: string) => Promise<ClientOfferResult>;
+    handleOffer?: (sdpOffer: string, sessionId?: string) => Promise<ClientOfferResult>;
     /**
      * Fetch the browser-side ICE servers (STUN + TURN) for client-offer mode.
      * Called BEFORE the offer is built so a remote/CGNAT viewer can gather a
@@ -117,6 +147,35 @@ export interface CameraStreamPlayerProps {
     }>;
     /** Explicitly close the WebRTC session on server (cleanup on unmount). */
     closeSession?: (sessionId: string) => Promise<void>;
+    /**
+     * Poll the live signaling state of a session (client-offer mode only).
+     * After the server swaps the broker source to a different tier (adaptive
+     * downgrade), this returns a non-null `pendingRenegotiation` with the new
+     * target + a monotonic `epoch`. The player then transparently re-offers
+     * on the SAME sessionId — building a fresh PeerConnection in the
+     * background and only swapping the live `<video>` to the new stream once
+     * it delivers media, so the last decoded frame stays on screen with no
+     * loader. Best-effort: omit it to disable adaptive re-offer entirely.
+     */
+    getSessionState?: (sessionId: string) => Promise<SessionSignalingState>;
+    /**
+     * Re-offer signaling for an adaptive tier switch (client-offer mode).
+     * Posts a fresh browser-built offer for an EXISTING `sessionId` against
+     * the new `target` (from `getSessionState`'s `pendingRenegotiation`). The
+     * server closes the stale session and creates a fresh one under the same
+     * id, bound to the new tier's source. Distinct from `handleOffer`, whose
+     * target is fixed at the player's selected stream — a re-offer must carry
+     * the server-chosen downgrade target instead. Required (alongside
+     * `getSessionState`) for adaptive re-offer to run.
+     */
+    reoffer?: (sessionId: string, sdpOffer: string, target: PlayerWebrtcTarget) => Promise<ClientOfferResult>;
+    /**
+     * Optional poster image (snapshot data-URL) shown by the <video> before
+     * the FIRST-EVER frame is decoded. Only a cold-start fallback — once a
+     * frame is showing, the player keeps the last decoded frame across
+     * renegotiations and never falls back to the poster. Caller-supplied.
+     */
+    posterUrl?: string;
     /**
      * Override client hints sent to the server at session creation.
      * Values provided here replace the auto-computed browser values.
@@ -124,4 +183,5 @@ export interface CameraStreamPlayerProps {
      */
     hintsOverride?: Partial<ClientStreamHints>;
 }
-export declare function CameraStreamPlayer({ serverUrl, streamKey, label, autoPlay, muted: initialMuted, showControls, className, onStateChange, onError, overlay, createSession, sendAnswer, handleOffer, getIceServers, addIceCandidate, getIceCandidates, closeSession, hintsOverride, }: CameraStreamPlayerProps): import("react/jsx-runtime").JSX.Element;
+export declare function CameraStreamPlayer({ serverUrl, streamKey, label, autoPlay, muted: initialMuted, showControls, className, onStateChange, onError, overlay, createSession, sendAnswer, handleOffer, getIceServers, addIceCandidate, getIceCandidates, closeSession, getSessionState, reoffer, posterUrl, hintsOverride, }: CameraStreamPlayerProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/composites/cap-settings/ConsumablesPanel.d.ts

@@ -0,0 +1,2 @@
+import { CapSettingsComponentProps } from './index';
+export declare function ConsumablesPanel({ deviceId }: CapSettingsComponentProps): import("react/jsx-runtime").JSX.Element;

package/dist/composites/cap-settings/CoverageTrack.d.ts

@@ -0,0 +1,12 @@
+import { PlaybackSpan } from './recording-spans';
+interface CoverageTrackProps {
+    readonly windowFrom: number;
+    readonly windowTo: number;
+    readonly spans: readonly PlaybackSpan[];
+    /** Last-seeked position to mark with the playhead, or null. */
+    readonly playheadMs: number | null;
+    /** Called with the absolute ms a click maps to within the window. */
+    readonly onSeek: (clickMs: number) => void;
+}
+export declare function CoverageTrack({ windowFrom, windowTo, spans, playheadMs, onSeek, }: CoverageTrackProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/composites/cap-settings/EventBucketStrip.d.ts

@@ -0,0 +1,25 @@
+import { ClipKind } from './event-thumb';
+export interface BucketClip {
+    readonly id: string;
+    readonly timestamp: number;
+    readonly kind: ClipKind;
+    readonly label: string;
+    readonly mediaUrl?: string;
+}
+interface EventBucketStripProps {
+    readonly clips: readonly BucketClip[];
+    readonly loading: boolean;
+    /** Key of the clip whose manifest is resolving, for the spinner. */
+    readonly busyKey: string | null;
+    readonly onPlay: (clip: BucketClip) => void;
+    /** Which kinds are currently enabled for display. */
+    readonly enabledKinds: ReadonlySet<ClipKind>;
+    /** Called when the user toggles a kind checkbox. */
+    readonly onToggleKind: (kind: ClipKind) => void;
+    /** True when more results may exist beyond the current page. */
+    readonly hasMore: boolean;
+    /** Called when the user clicks "Load more". */
+    readonly onLoadMore: () => void;
+}
+export declare function EventBucketStrip({ clips, loading, busyKey, onPlay, enabledKinds, onToggleKind, hasMore, onLoadMore }: EventBucketStripProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/composites/cap-settings/EventHeatmap.d.ts

@@ -0,0 +1,10 @@
+import { DensityBucket } from './recording-timeline-model';
+interface EventHeatmapProps {
+    readonly windowFrom: number;
+    readonly windowTo: number;
+    readonly buckets: readonly DensityBucket[];
+    readonly selectedIndex: number | null;
+    readonly onSelectBucket: (index: number) => void;
+}
+export declare function EventHeatmap({ windowFrom, windowTo, buckets, selectedIndex, onSelectBucket }: EventHeatmapProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/composites/cap-settings/RecordingPanel.d.ts

@@ -0,0 +1,2 @@
+import { HostWidgetProps } from '../../widgets/host-widgets';
+export declare function RecordingPanel({ deviceId }: HostWidgetProps): import("react/jsx-runtime").JSX.Element;

package/dist/composites/cap-settings/RecordingRulesEditor.d.ts

@@ -0,0 +1,7 @@
+import { RecordingRule } from '@camstack/types';
+interface RecordingRulesEditorProps {
+    readonly rules: readonly RecordingRule[];
+    readonly onChange: (rules: RecordingRule[]) => void;
+}
+export declare function RecordingRulesEditor({ rules, onChange }: RecordingRulesEditorProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/composites/cap-settings/RecordingSettings.d.ts

@@ -0,0 +1,8 @@
+import { RecordingConfig } from '@camstack/types';
+interface RecordingSettingsProps {
+    readonly initial: RecordingConfig;
+    readonly saving: boolean;
+    readonly onSave: (config: RecordingConfig) => void;
+}
+export declare function RecordingSettings({ initial, saving, onSave }: RecordingSettingsProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/composites/cap-settings/RecordingTimeline.d.ts

@@ -0,0 +1,5 @@
+interface RecordingTimelineProps {
+    readonly deviceId: number;
+}
+export declare function RecordingTimeline({ deviceId }: RecordingTimelineProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/composites/cap-settings/TimelineControls.d.ts

@@ -0,0 +1,21 @@
+import { DayWindow } from './recording-timeline-model';
+interface TimelineControlsProps {
+    /** Currently selected calendar day. */
+    readonly day: Date;
+    /** Called when the user picks a new day. */
+    readonly onDayChange: (d: Date) => void;
+    /** Current zoom+pan view window. */
+    readonly view: DayWindow;
+    /** Full day bounds (used for zoom/pan clamping). */
+    readonly dayBounds: DayWindow;
+    /** Called when zoom changes the view. */
+    readonly onViewChange: (w: DayWindow) => void;
+}
+/**
+ * Date selector + zoom-in / zoom-out buttons for the recording timeline.
+ * Zoom cycles through ZOOM_LEVELS (widest → narrowest), centred on the
+ * current view midpoint. Horizontal pan is wired via wheel events in
+ * RecordingTimeline directly.
+ */
+export declare function TimelineControls({ day, onDayChange, view, dayBounds, onViewChange, }: TimelineControlsProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/composites/cap-settings/event-thumb.d.ts

@@ -0,0 +1,11 @@
+export type ClipKind = 'motion' | 'object' | 'audio';
+interface EventThumbProps {
+    readonly mediaUrl?: string;
+    readonly kind: ClipKind;
+}
+export declare function EventThumb({ mediaUrl, kind }: EventThumbProps): import("react/jsx-runtime").JSX.Element;
+export declare function EventKindIcon({ kind, large }: {
+    readonly kind: ClipKind;
+    readonly large?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/composites/cap-settings/index.d.ts

@@ -1,7 +1,11 @@
 export { PtzPanel } from './PtzPanel';
+export { ConsumablesPanel } from './ConsumablesPanel';
 export { AutotrackSection } from './AutotrackSection';
 export { MotionZonesSettings } from './MotionZonesSettings';
 export { PrivacyMaskSettings } from './PrivacyMaskSettings';
+export { RecordingPanel } from './RecordingPanel';
+export { RecordingSettings } from './RecordingSettings';
+export { RecordingRulesEditor } from './RecordingRulesEditor';
 export { MaskShapeCanvas } from './MaskShapeCanvas';
 export type { MaskShapeItem, MaskShapeCanvasProps } from './MaskShapeCanvas';
 /**

package/dist/composites/cap-settings/recording-config-form.d.ts

@@ -0,0 +1,5 @@
+import { RecordingRule, RecordingMode } from '@camstack/types';
+export declare function emptyRule(): RecordingRule;
+export declare function isTriggerMode(mode: RecordingMode): boolean;
+export declare function withRuleAt(rules: readonly RecordingRule[], index: number, patch: Partial<RecordingRule>): RecordingRule[];
+export declare function removeRuleAt(rules: readonly RecordingRule[], index: number): RecordingRule[];

package/dist/composites/cap-settings/recording-spans.d.ts

@@ -0,0 +1,22 @@
+export interface AvailabilityRange {
+    readonly profile: string;
+    readonly startMs: number;
+    readonly endMs: number;
+}
+export interface PlaybackSpan {
+    readonly startMs: number;
+    readonly endMs: number;
+}
+/**
+ * Merge availability ranges (across every profile) into the union of distinct
+ * time windows, ascending by start. Overlapping or touching intervals coalesce;
+ * zero/negative-length inputs are dropped. Newest-first ordering is the caller's
+ * concern (it reverses for display).
+ */
+export declare function mergeAvailabilitySpans(ranges: readonly AvailabilityRange[]): PlaybackSpan[];
+/**
+ * Pick the right unit for a byte count and render it with a sensible number of
+ * significant digits (binary prefixes, matching recording sizes elsewhere).
+ * KB and up render one decimal under 100, none above; bytes never get a decimal.
+ */
+export declare function formatBytes(bytes: number): string;

package/dist/composites/cap-settings/recording-timeline-model.d.ts

@@ -0,0 +1,84 @@
+import { PlaybackSpan } from './recording-spans';
+/** Fixed heatmap bucket size: 15 minutes → 96 buckets over 24h. */
+export declare const BUCKET_MS: number;
+/** Event kinds the timeline understands. */
+export type TimelineKind = 'motion' | 'object' | 'audio';
+export interface DensityBucket {
+    readonly index: number;
+    readonly startMs: number;
+    readonly endMs: number;
+    readonly counts: Readonly<Record<TimelineKind, number>>;
+    readonly total: number;
+    /** Highest-count kind, or null when the bucket is empty. */
+    readonly dominant: TimelineKind | null;
+}
+/** Row returned by the server `getEventDensity` call (one per non-empty bucket). */
+export interface EventDensityRow {
+    readonly bucketStart: number;
+    readonly motion: number;
+    readonly object: number;
+    readonly audio: number;
+}
+/**
+ * Convert server-side density rows into `DensityBucket[]` for the timeline
+ * heatmap. Rows with total === 0 are skipped (defensive; server already omits
+ * them). Returns a sparse, ascending-by-index array — EventHeatmap positions
+ * each bar by `b.startMs` rather than array index, so gaps are fine.
+ */
+export declare function densityRowsToBuckets(rows: readonly EventDensityRow[], windowFrom: number, bucketMs: number): DensityBucket[];
+export interface SeekTarget {
+    readonly fromMs: number;
+    readonly toMs: number;
+}
+/**
+ * Resolve a playback window for a click at `clickMs` against recorded `spans`.
+ * Inside a span → play from the click to that span's end. In a gap / outside →
+ * snap to the WHOLE nearest span. No spans → null (nothing to play).
+ * `spans` are expected ascending by start (as `mergeAvailabilitySpans` returns).
+ */
+export declare function seekTargetForSpans(clickMs: number, spans: readonly PlaybackSpan[]): SeekTarget | null;
+/**
+ * Position `ms` inside the window `[fromMs, toMs]` as a clamped percentage
+ * (0–100). A zero/negative-width window yields 0. Callers use this for `left:`.
+ */
+export declare function pctForMs(ms: number, fromMs: number, toMs: number): number;
+/** A [fromMs, toMs) window spanning (at most) one calendar day. */
+export interface DayWindow {
+    readonly fromMs: number;
+    readonly toMs: number;
+}
+/**
+ * Build a DayWindow for the given calendar `date` using local time.
+ * For any day strictly in the past: `fromMs` = local midnight, `toMs` =
+ * next local midnight (exactly 24 h).
+ * For today (or any future day that contains `nowMs`): `toMs = nowMs` so the
+ * window never extends into the future.
+ */
+export declare function dayWindow(date: Date, nowMs: number): DayWindow;
+/** Available zoom levels in ms, from widest (24h) to narrowest (15 min). */
+export declare const ZOOM_LEVELS: readonly number[];
+/**
+ * Produce a `levelMs`-wide DayWindow centred on `centerMs`, clamped within
+ * `dayBounds`. If `levelMs >= dayBounds span`, returns `dayBounds` unchanged.
+ */
+export declare function zoomWindow(_current: DayWindow, dayBounds: DayWindow, levelMs: number, centerMs: number): DayWindow;
+/**
+ * Shift `win` by `deltaMs`, preserving width, clamped within `dayBounds`.
+ */
+export declare function panWindow(win: DayWindow, dayBounds: DayWindow, deltaMs: number): DayWindow;
+/**
+ * Choose a sensible heatmap bucket size for a visible span of `spanMs`,
+ * targeting ~96-120 buckets. Always picks from `BUCKET_CANDIDATES`.
+ */
+export declare function bucketMsForSpan(spanMs: number): number;
+/** One labelled tick on the time axis. */
+export interface AxisTick {
+    readonly pct: number;
+    readonly label: string;
+}
+/**
+ * Produce `count` evenly-spaced axis ticks spanning [fromMs, toMs].
+ * - `pct` is via pctForMs (first=0, last=100).
+ * - `label` is a localised HH:MM clock string.
+ */
+export declare function axisTicks(fromMs: number, toMs: number, count: number): AxisTick[];

package/dist/composites/device-activity-panel.d.ts

@@ -1,5 +1,9 @@
 export interface DeviceActivityPanelProps {
     readonly deviceId: number;
+    /** When this device is a Container, its own id — the Logs tab then shows the
+     *  whole subtree (container + every child) by filtering `containerDeviceId`
+     *  instead of `deviceId`. Omit/undefined for a non-container. */
+    readonly containerDeviceId?: number;
     /** Initial event categories the user wants tracked. Defaults to "all". */
     readonly defaultEventCategories?: readonly string[];
     /** Initial state-cap whitelist. Empty = show every cap that fires. */
@@ -25,5 +29,5 @@ declare const TABS: readonly [{
     readonly icon: import('react').ForwardRefExoticComponent<Omit<import('lucide-react').LucideProps, "ref"> & import('react').RefAttributes<SVGSVGElement>>;
 }];
 export type ActivityTabId = (typeof TABS)[number]['id'];
-export declare function DeviceActivityPanel({ deviceId, defaultEventCategories, defaultStateCaps, initialTab, className, maxHeight, }: DeviceActivityPanelProps): import("react/jsx-runtime").JSX.Element;
+export declare function DeviceActivityPanel({ deviceId, containerDeviceId, defaultEventCategories, defaultStateCaps, initialTab, className, maxHeight, }: DeviceActivityPanelProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/composites/device-controls/alarm-hero-card.d.ts

@@ -0,0 +1,24 @@
+import { ReactNode } from 'react';
+import { DeviceControlProps } from './control-registry';
+/**
+ * Row-sized alarm control: the shared Disarm + arm-mode segment strip only —
+ * no glyph, no state label, no card padding. Cap-gated on `alarm-panel`.
+ * Drops into a 200 px control column without towering over sibling rows.
+ */
+export declare function AlarmInlineControl({ trpc, deviceId, optimistic }: DeviceControlProps): ReactNode;
+/**
+ * AlarmHeroCard — segmented arm/disarm hero for AlarmPanel devices.
+ *
+ * Renders (Spec §3):
+ *  - A shield glyph + state label tinted by lifecycle state (disarmed=muted,
+ *    armed=green, arming/pending=amber, triggered=red).
+ *  - The shared `AlarmSegments` strip: a Disarm button plus one arm button per
+ *    `availableModes` entry (Home / Away / Night / …). The currently-active
+ *    segment is highlighted; transitioning states highlight none.
+ *
+ * Cap-gated on `alarm-panel` — returns null when the device lacks the cap.
+ * PIN entry (when `requiresCode`) is deferred to a later task; the segments
+ * call arm/disarm without a code, and the provider rejects when a code is
+ * required — surfaced upstream.
+ */
+export declare function AlarmHeroCard({ trpc, deviceId, optimistic }: DeviceControlProps): ReactNode;

package/dist/composites/device-controls/atoms.d.ts

@@ -0,0 +1,81 @@
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
+export declare const FILL: "fill";
+export declare const RIGHT: "right";
+export declare const CENTER: "center";
+export declare const FIT: "fit";
+export type ControlAlign = typeof FILL | typeof RIGHT | typeof CENTER | typeof FIT;
+interface ControlColumnProps extends ComponentPropsWithoutRef<'div'> {
+    readonly align: ControlAlign;
+    readonly children: ReactNode;
+}
+/** The one control column every device-row/hero control sits in.
+ *  FILL → the child stretches to the full fixed column width (steppers, selects, buttons, cover triad).
+ *  RIGHT → the child keeps its natural width, flush to the right edge of the fixed column (readouts, toggles — card view).
+ *  CENTER → the child keeps its natural width, centered in the fixed column (readouts, toggles).
+ *  FIT → the column DROPS its fixed width and sizes to its content (table view). The control takes
+ *        its natural width and lays out in sequence with the trailing trash + status dot, so a wide
+ *        control (climate stepper + mode select, cover triad + %) never overflows a fixed box and
+ *        collides with the neighbours. FILL has no effect under FIT — a stretchy child in a
+ *        content-width wrapper simply takes its natural width.
+ *  FILL, RIGHT and CENTER share the fixed `w-[140px]` box (card / minimal / hero views). */
+export declare function ControlColumn({ align, children, className, ...rest }: ControlColumnProps): ReactNode;
+interface ValueReadoutProps {
+    readonly value: string;
+    readonly unit?: string;
+}
+/** A value + inline unit suffix (no separator). E.g. `60s`, `22%`. */
+export declare function ValueReadout({ value, unit }: ValueReadoutProps): ReactNode;
+interface StepperProps {
+    readonly value: number | string;
+    readonly unit?: string;
+    readonly onDelta: (d: 1 | -1) => void;
+}
+/** Increment/decrement control with value + unit display. */
+export declare function Stepper({ value, unit, onDelta }: StepperProps): ReactNode;
+interface SlideToggleProps {
+    readonly on: boolean;
+    readonly targetLabel: string;
+    readonly onConfirm: () => void;
+}
+/** Safety slide: onConfirm fires only after the thumb is dragged past threshold, never on a plain tap. */
+export declare function SlideToggle({ on, targetLabel, onConfirm }: SlideToggleProps): ReactNode;
+interface ArcKnobProps {
+    readonly fraction: number;
+    readonly color: string;
+    /**
+     * Distance in px from the rotating container's top edge to the knob's top
+     * edge. The knob is 20px tall, so its CENTER sits at `knobTopPx + 10` px
+     * from the top. For the knob center to ride the ring's centre radius the
+     * caller passes `(containerCenter − ringRadius) − 10`. Defaults to the
+     * thermostat gauge value (176px container, radius 76 → 88 − 76 − 10 = 2).
+     */
+    readonly knobTopPx?: number;
+    /**
+     * When provided, the knob becomes interactive: dragging it reports the new
+     * arc fraction (0..1) to the parent, which owns the value and re-renders the
+     * knob at the new `fraction`. When omitted the knob is a display-only
+     * indicator (no grab cursor, no pointer handlers).
+     */
+    readonly onDragFraction?: (fraction: number) => void;
+}
+/** Half the ArcKnob's 20px (h-5) height. Callers seat the knob centre on a
+ *  ring by computing `(containerCentre − ringRadius) − KNOB_HALF_PX`. */
+export declare const KNOB_HALF_PX = 10;
+/**
+ * White knob riding a circular arc at `fraction` (0..1). For thermostat/light/fan.
+ *
+ * Display-only by default. Pass `onDragFraction` to make the knob draggable:
+ * pointer capture is taken on the knob, and pointer moves are mapped to a new
+ * arc fraction reported back to the parent (the parent owns the value).
+ */
+export declare function ArcKnob({ fraction, color, knobTopPx, onDragFraction }: ArcKnobProps): ReactNode;
+interface GripTrackProps {
+    readonly fraction: number;
+    readonly color?: string;
+}
+/**
+ * Horizontal track with a white grip thumb at `fraction` (0..1). For seek/volume/brightness.
+ * @remarks display-only indicator; interactive drag is deferred to a later task.
+ */
+export declare function GripTrack({ fraction, color }: GripTrackProps): ReactNode;
+export {};

package/dist/composites/device-controls/brightness-panel.d.ts

@@ -0,0 +1,3 @@
+import { ReactNode } from 'react';
+import { ControlPanelProps } from './types';
+export declare function BrightnessPanel({ trpc, deviceId, layout, optimistic }: ControlPanelProps): ReactNode;

package/dist/composites/device-controls/button-control.d.ts

@@ -0,0 +1,18 @@
+import { ReactNode } from 'react';
+import { DeviceControlProps } from './control-registry';
+/**
+ * ButtonControl (inline) — compact "Press" trigger for a device-list row.
+ *
+ * The `button` cap is fire-only (no status / runtimeState), so we bypass
+ * `useDeviceCapability` (which requires a slice) and resolve the cap
+ * handle directly from the device proxy. We guard on `cap === undefined`
+ * (device has no button cap) and render nothing in that case.
+ */
+export declare function ButtonControl({ trpc, deviceId }: DeviceControlProps): ReactNode;
+/**
+ * ButtonHeroCard — large press-actuator card for the device-detail hero area.
+ *
+ * Renders a centred "Press" button with real design-token classes. The cap is
+ * fire-only so no state display is needed — the affordance IS the control.
+ */
+export declare function ButtonHeroCard({ trpc, deviceId }: DeviceControlProps): ReactNode;

package/dist/composites/device-controls/climate-panel.d.ts

@@ -0,0 +1,16 @@
+import { ReactNode } from 'react';
+import { ControlPanelProps } from './types.js';
+import { HvacMode } from '@camstack/types';
+/**
+ * Exhaustive colour map — one entry per HvacMode. Build will fail if a
+ * mode is added to the enum and not reflected here (Record<HvacMode, ...>
+ * + `satisfies` means TypeScript enforces full coverage).
+ */
+export declare const MODE_COLOR: Record<HvacMode, string>;
+/**
+ * Mode text-accent colour — applied to the compact (inline) temperature value
+ * as a subtle cue, replacing the old bordered/filled mode box so the control
+ * matches the borderless cover/lock inline visual language.
+ */
+export declare const MODE_TEXT_COLOR: Record<HvacMode, string>;
+export declare function ClimatePanel({ trpc, deviceId, features: _features, layout, optimistic }: ControlPanelProps): ReactNode;

package/dist/composites/device-controls/container-primary-hero.d.ts

@@ -0,0 +1,24 @@
+import { ReactNode } from 'react';
+import { UseDeviceProxyTrpc } from '../../hooks/use-device-proxy';
+import { ContainerChild } from './container-primary';
+/** A child row the hero can render + offer in the picker. */
+export interface ContainerHeroChild extends ContainerChild {
+    readonly name: string;
+    readonly features?: readonly string[];
+}
+export interface ContainerPrimaryHeroProps {
+    readonly trpc: UseDeviceProxyTrpc;
+    /** The container's entity-children (from `deviceManager.getChildren`). */
+    readonly children: readonly ContainerHeroChild[];
+    /** Container's LEGACY persisted primary-child override (numeric child id) —
+     *  consulted only when no durable `primaryChildEntityId` is set. */
+    readonly linkDeviceId: number | null | undefined;
+    /** Container's DURABLE primary-child override (chosen child's entityId) —
+     *  null/undefined ⇒ no durable override (falls back to linkDeviceId, then
+     *  priority default). */
+    readonly primaryChildEntityId?: string | null | undefined;
+    /** Persist the chosen primary child. Called with the picked child's
+     *  re-sync/rename-stable `entityId`. */
+    readonly onSetPrimary: (childEntityId: string) => void;
+}
+export declare function ContainerPrimaryHero({ trpc, children, linkDeviceId, primaryChildEntityId, onSetPrimary, }: ContainerPrimaryHeroProps): ReactNode;

package/dist/composites/device-controls/container-primary.d.ts

@@ -0,0 +1,46 @@
+import { ChildRef } from './primary-child';
+/**
+ * Minimal shape this module needs from a child device row. Structurally
+ * compatible with `DeviceItemDevice` / `DeviceInfo` — callers pass the raw
+ * `getChildren` rows through.
+ */
+export interface ContainerChild {
+    readonly id: number;
+    readonly stableId: string;
+    readonly type: string;
+    readonly sourceInfo?: {
+        readonly id: string;
+    } | undefined;
+}
+/**
+ * Re-sync-stable identity of a child. Prefers the upstream-system dispatch key
+ * (`sourceInfo.id` — e.g. HA `entity_id`); falls back to `stableId` for
+ * providers that never populated SourceInfo. Both survive a re-sync that may
+ * reallocate the numeric `id`.
+ */
+export declare function childEntityId(child: ContainerChild): string;
+/** Project a raw child row onto the pure resolver's {@link ChildRef} shape. */
+export declare function containerChildToRef(child: ContainerChild): ChildRef;
+/**
+ * Resolve the entityId override from the container's persisted `linkDeviceId`.
+ * Returns the linked child's stable entityId, or `undefined` when there is no
+ * link or the link is stale (points to a numeric id no longer present) — in
+ * which case the resolver falls back to the priority default.
+ */
+export declare function overrideEntityIdFromLink(children: readonly ContainerChild[], linkDeviceId: number | null | undefined): string | undefined;
+/**
+ * Full container → primary-child resolution: project children to refs, resolve
+ * the override entityId, and delegate to the pure resolver. Returns `null` for a
+ * container with no children (caller degrades gracefully).
+ *
+ * Override precedence:
+ *   1. `primaryChildEntityId` — the DURABLE override (re-sync/rename-stable),
+ *      passed straight to the resolver which matches on `entityId`. Wins when a
+ *      non-empty string is supplied.
+ *   2. `linkDeviceId` — LEGACY numeric override, re-derived to an entityId from
+ *      the live child set. Consulted only when there is no durable override.
+ *
+ * When neither resolves to a live child, the resolver falls back to the
+ * priority default.
+ */
+export declare function resolveContainerPrimary(children: readonly ContainerChild[], linkDeviceId: number | null | undefined, primaryChildEntityId?: string | null | undefined): ChildRef | null;

package/dist/composites/device-controls/control-panel.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react';
+import { ControlPanelProps } from './types.js';
+/** Trim an HA date value to the `<input type=date>` shape ('YYYY-MM-DD'). */
+export declare function toDateInput(value: string): string;
+/** Trim an HA time value ('HH:MM:SS') to the `<input type=time>` shape ('HH:MM'). */
+export declare function toTimeInput(value: string): string;
+/** Trim an HA datetime value to the `<input type=datetime-local>` shape
+ *  ('YYYY-MM-DDTHH:MM'). Accepts both 'T'- and space-separated forms. */
+export declare function toDateTimeInput(value: string): string;
+export declare function ControlPanel({ trpc, deviceId, features: _features, layout, optimistic }: ControlPanelProps): ReactNode;