@hashsome/ui 0.1.0

package/dist/gallery/props-data.js

@@ -0,0 +1,718 @@
+// Generated by `pnpm generate:catalog` from the components' own prop interfaces and doc comments.
+// Do not edit by hand. The gallery renders this as each component's props table.
+export const COMPONENT_PROPS = {
+    Grid: {
+        doc: 'A grid of equal-width columns for tiles; cells share the width and never overflow it.',
+        props: [
+            {
+                doc: 'Number of equal columns. Default 2.',
+                name: 'columns',
+                optional: true,
+                type: 'number',
+            },
+            {
+                doc: 'Tiles (or any content) to lay out, one per cell.',
+                name: 'children',
+                optional: false,
+                type: 'ReactNode',
+            },
+        ],
+    },
+    Page: {
+        doc: "The page every dashboard renders into: padded by the density's spacing, a column with gaps, exactly viewport height, and scrolling inside itself (the document never scrolls — the entity drawer is `position: fixed` and relies on that). It pads further for a `NavRail` or `NavDock` the dashboard includes. Render it once, in the app's root layout.",
+        props: [
+            {
+                doc: 'The dashboard.',
+                name: 'children',
+                optional: false,
+                type: 'ReactNode',
+            },
+            {
+                doc: 'Page height. Default `100dvh`: the whole viewport. Only embedding it somewhere smaller (a preview) needs another.',
+                name: 'height',
+                optional: true,
+                type: 'string | number',
+            },
+        ],
+    },
+    RoomHeader: {
+        doc: 'The header that starts a room: muted icon and title, a hairline, and readouts on the right. Put it above a `Grid` (or any tiles); it adds its own space above, so consecutive rooms read as groups.',
+        props: [
+            {
+                doc: "The room's name.",
+                name: 'title',
+                optional: false,
+                type: 'string',
+            },
+            {
+                doc: 'Icon id, e.g. `lu:sofa`.',
+                name: 'icon',
+                optional: true,
+                type: 'IconName',
+            },
+            {
+                doc: 'Header readouts, typically `<SensorReadout />`s.',
+                name: 'readouts',
+                optional: true,
+                type: 'ReactNode',
+            },
+        ],
+    },
+    Tile: {
+        doc: 'Base pill used by all entity tiles. Tap to press; hold (with `detail` set) to open the drawer.',
+        props: [
+            {
+                doc: "The tile's name.",
+                name: 'label',
+                optional: false,
+                type: 'string',
+            },
+            {
+                doc: 'Icon id, e.g. `lu:lightbulb`.',
+                name: 'icon',
+                optional: true,
+                type: 'IconName',
+            },
+            {
+                doc: 'Second line. Replaced by the status label when the entity is not ready.',
+                name: 'secondary',
+                optional: true,
+                type: 'ReactNode',
+            },
+            {
+                doc: 'Status of what the tile shows; anything but `ready` disables it and shows why (Loading, Unavailable, Not found).',
+                name: 'status',
+                optional: true,
+                type: 'EntityStatus',
+            },
+            {
+                doc: 'Whether the thing it controls is on: lights the icon (and the whole card for an on/off tile) with the accent color.',
+                name: 'active',
+                optional: true,
+                type: 'boolean',
+            },
+            {
+                doc: 'Highlights the tile as pending / done / failed after an action.',
+                name: 'feedback',
+                optional: true,
+                type: "'pending' | 'done' | 'error' | undefined",
+            },
+            {
+                doc: 'Called on a tap — not after a drag or a hold.',
+                name: 'onPress',
+                optional: true,
+                type: '(() => void) | undefined',
+            },
+            {
+                doc: '0..1. Renders a fill bar; enables drag and arrow keys to change it.',
+                name: 'fill',
+                optional: true,
+                type: 'number',
+            },
+            {
+                doc: 'Called once when a drag ends or an arrow key is pressed.',
+                name: 'onFillChange',
+                optional: true,
+                type: '(fill: number) => void',
+            },
+            {
+                doc: 'Controls shown on the right (steppers, icon buttons).',
+                name: 'trailing',
+                optional: true,
+                type: 'ReactNode',
+            },
+            {
+                doc: '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.',
+                name: 'overlay',
+                optional: true,
+                type: '(controls: { openDetail: () => void }) => ReactNode',
+            },
+            {
+                doc: 'Native tooltip text.',
+                name: 'title',
+                optional: true,
+                type: 'string',
+            },
+            {
+                doc: 'Rendered in the shared detail drawer on a long-press (~500ms). Adds the hold gesture.',
+                name: 'detail',
+                optional: true,
+                type: 'ReactNode',
+            },
+            {
+                doc: 'Subtitle under the drawer header\'s name, e.g. "Light". Only used when `detail` is set.',
+                name: 'kind',
+                optional: true,
+                type: 'string',
+            },
+            {
+                doc: "A power-draw chart, shown in the drawer above `history` (e.g. from a Shelly's energy monitoring). Generic across every entity type.",
+                name: 'energy',
+                optional: true,
+                type: 'EnergyChartProps',
+            },
+            {
+                doc: '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.',
+                name: 'history',
+                optional: true,
+                type: 'LogbookEntry[]',
+            },
+        ],
+    },
+    IconButton: {
+        doc: '',
+        props: [],
+    },
+    EnergyChart: {
+        doc: "A power-draw chart for an entity's detail drawer, e.g. from a Shelly's energy monitoring. Generic — any entity type can supply it. Deliberately two-tier: a bare sparkline while the drawer is at its normal (side) width, and the full interactive chart — axes, tooltip, a selectable time range — only once it's expanded to fullscreen, where there's room for it.",
+        props: [
+            {
+                doc: "Live power sensor (current draw, e.g. a Shelly's `sensor.*_power`). Its reading is the headline and updates as it changes; without it the headline falls back to the last chart sample.",
+                name: 'power',
+                optional: true,
+                type: 'EntityRef',
+            },
+            {
+                doc: 'Lifetime energy counter (kWh, e.g. `sensor.*_energy`). Shown as a quiet "Lifetime" line when expanded — per-period usage can\'t be derived from a counter without history, so pass `usage` for that.',
+                name: 'energy',
+                optional: true,
+                type: 'EntityRef',
+            },
+            {
+                doc: "Usage per period in kWh. Left out, it is worked out from `energy`'s history when the backend keeps one (Home Assistant's long-term statistics); pass it to use your own.",
+                name: 'usage',
+                optional: true,
+                type: 'EnergyUsage',
+            },
+            {
+                doc: "Samples for each range the person can pick; `onRangeChange` fires on pick. Left out, they are loaded from `power`'s history when the backend keeps one, for the selected range; pass them to use your own.",
+                name: 'seriesByRange',
+                optional: true,
+                type: 'Partial<Record<EnergyRange, EnergySample[]>>',
+            },
+            {
+                doc: 'Called when the person picks another range, so a real data source can load it.',
+                name: 'onRangeChange',
+                optional: true,
+                type: '(range: EnergyRange) => void',
+            },
+            {
+                doc: "Default `'W'`.",
+                name: 'unit',
+                optional: true,
+                type: 'string',
+            },
+        ],
+    },
+    HistorySection: {
+        doc: "A short activity list for an entity's detail drawer. Generic — any entity type can supply it.",
+        props: [
+            {
+                doc: 'Recent activity, newest first. An empty list renders nothing.',
+                name: 'entries',
+                optional: false,
+                type: 'LogbookEntry[]',
+            },
+        ],
+    },
+    Icon: {
+        doc: 'An inline SVG icon, from a plain prefixed id (`lu:` Lucide, `tb:` Tabler outline). Takes the surrounding text color.',
+        props: [
+            {
+                doc: 'Prefixed icon id, e.g. `lu:lightbulb`, `tb:vacuum-cleaner`.',
+                name: 'name',
+                optional: false,
+                type: 'IconName',
+            },
+            {
+                doc: "Overrides the density's icon size, in px.",
+                name: 'size',
+                optional: true,
+                type: 'number',
+            },
+        ],
+    },
+    LightTile: {
+        doc: 'Toggle, drag-to-dim (if dimmable) and a color overlay + drawer picker (if color capable).',
+        props: [
+            {
+                doc: 'A light, as a ref like `ha:light.kitchen_ceiling` or a handle (a custom source).',
+                name: 'entity',
+                optional: false,
+                type: "EntityRef | EntityHandle<'light'>",
+            },
+            {
+                doc: "Defaults to the light's name.",
+                name: 'name',
+                optional: true,
+                type: 'string',
+            },
+            {
+                doc: 'Icon id. Defaults to a bulb.',
+                name: 'icon',
+                optional: true,
+                type: 'IconName',
+            },
+            {
+                doc: "Power-draw chart (e.g. a Shelly's energy monitoring), shown in the drawer above `history`. No default source yet — pass explicitly.",
+                name: 'energy',
+                optional: true,
+                type: 'EnergyChartProps',
+            },
+            {
+                doc: 'Recent activity, shown in the drawer. No default source yet — pass explicitly.',
+                name: 'history',
+                optional: true,
+                type: 'LogbookEntry[]',
+            },
+            {
+                doc: "Swatches shown when the palette button is opened. Default: four white temperatures. Each takes `kelvin` (color-temp lights) and/or `hs` (color lights) and is skipped if the light can't apply it.",
+                name: 'colors',
+                optional: true,
+                type: 'LightColorPreset[]',
+            },
+        ],
+    },
+    ClimateTile: {
+        doc: 'Heater / thermostat: a mode button that opens mode swatches in the card, a target temperature stepper, and (on hold) a drawer with modes, a target bar, presets, energy and history.',
+        props: [
+            {
+                doc: 'A thermostat or heater, as a ref like `ha:climate.living_room` or a handle (a custom source).',
+                name: 'entity',
+                optional: false,
+                type: "EntityRef | EntityHandle<'climate'>",
+            },
+            {
+                doc: "Defaults to the device's name.",
+                name: 'name',
+                optional: true,
+                type: 'string',
+            },
+            {
+                doc: 'Icon id. Defaults to a thermometer.',
+                name: 'icon',
+                optional: true,
+                type: 'IconName',
+            },
+            {
+                doc: 'Power-draw chart for the drawer, above `history`. No default source yet — pass explicitly.',
+                name: 'energy',
+                optional: true,
+                type: 'EnergyChartProps',
+            },
+            {
+                doc: 'Recent activity, shown in the drawer. No default source yet — pass explicitly.',
+                name: 'history',
+                optional: true,
+                type: 'LogbookEntry[]',
+            },
+        ],
+    },
+    SensorReadout: {
+        doc: 'Inline value with icon and unit. Shows "Unavailable" / "Unknown" instead of a reading, and a warning when the value leaves its safe range. Tapping a numeric reading opens a drawer.',
+        props: [
+            {
+                doc: 'A sensor, as a ref like `ha:sensor.living_room_humidity` or a handle (a custom source).',
+                name: 'entity',
+                optional: false,
+                type: "EntityRef | EntityHandle<'sensor'>",
+            },
+            {
+                doc: 'Icon id. Defaults by device class (temperature, humidity).',
+                name: 'icon',
+                optional: true,
+                type: 'IconName',
+            },
+            {
+                doc: "Drawer title. Defaults to the sensor's name.",
+                name: 'name',
+                optional: true,
+                type: 'string',
+            },
+            {
+                doc: "The sensor's battery level, as a sensor ref like `ha:sensor.kitchen_t_h_sensor_battery` (a percentage). Shown in the drawer, in red when low.",
+                name: 'battery',
+                optional: true,
+                type: 'EntityRef',
+            },
+            {
+                doc: "Readings over time (oldest first). Adds a chart and min/max for today / this week / this month to the drawer, plus a custom date and time range when expanded. Left out, they come from the backend's own history when it keeps one (Home Assistant's long-term statistics).",
+                name: 'history',
+                optional: true,
+                type: 'SensorSample[]',
+            },
+            {
+                doc: 'Flags readings outside `{ min, max }` with a warning. Humidity defaults to 30–60 %; pass `false` to turn a default off.',
+                name: 'safeRange',
+                optional: true,
+                type: 'SafeRange | false',
+            },
+            {
+                doc: 'Tapping a ready numeric reading opens a drawer (current value and safe-range verdict, plus the chart and min/max when `history` is given). Default `true`; `false` keeps it inline text, e.g. for a presence chip.',
+                name: 'drawer',
+                optional: true,
+                type: 'boolean',
+            },
+        ],
+    },
+    ActionButton: {
+        doc: 'Any one-shot thing to trigger — a scene, script, button or switch, or your own `onPress` — with pending / done / error feedback.',
+        props: [
+            {
+                doc: "Button text. Defaults to the entity's name.",
+                name: 'label',
+                optional: true,
+                type: 'string',
+            },
+            {
+                doc: 'Icon id, e.g. `lu:coffee`.',
+                name: 'icon',
+                optional: true,
+                type: 'IconName',
+            },
+            {
+                doc: 'A second line of text under the label.',
+                name: 'secondary',
+                optional: true,
+                type: 'string',
+            },
+            {
+                doc: 'What to trigger: an action entity (scene, script, button — it runs) or a switch (it flips), as a ref or a handle.',
+                name: 'entity',
+                optional: true,
+                type: "EntityRef | EntityHandle<'action'> | EntityHandle<'switch'>",
+            },
+            {
+                doc: 'A custom press for something no entity covers (a raw backend call, your own logic). Used instead of `entity`.',
+                name: 'onPress',
+                optional: true,
+                type: '() => Promise<unknown>',
+            },
+        ],
+    },
+    SceneButton: {
+        doc: 'Activates a scene.',
+        props: [
+            {
+                doc: 'A scene (an `action` entity), as a ref like `ha:scene.movie_night` or a handle.',
+                name: 'entity',
+                optional: false,
+                type: "EntityRef | EntityHandle<'action'>",
+            },
+            {
+                doc: "Defaults to the scene's name.",
+                name: 'name',
+                optional: true,
+                type: 'string',
+            },
+            {
+                doc: 'Icon id. Defaults to a palette.',
+                name: 'icon',
+                optional: true,
+                type: 'IconName',
+            },
+        ],
+    },
+    MediaPlayerBar: {
+        doc: 'Now playing with previous / play-pause / next and a volume control, for a media player entity.',
+        props: [
+            {
+                doc: 'A media player, as a ref like `ha:media_player.living_room` or `ma:living_room`, or a handle (a custom source).',
+                name: 'entity',
+                optional: false,
+                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.",
+                name: 'name',
+                optional: true,
+                type: 'string',
+            },
+            {
+                doc: "Content for the media browser shown with the player in the drawer. Holding the card or pressing the artwork opens the drawer; the browse button opens it expanded. By default a `MediaBrowser` over the player's own library, shown only for a ref whose player has one; pass your own content to replace it, or `false` for no browse button.",
+                name: 'browse',
+                optional: true,
+                type: 'ReactNode | false',
+            },
+        ],
+    },
+    MediaPlayerColumn: {
+        doc: 'The player as an upright card for a narrow column beside a dashboard (a quarter to a third of the width): the artwork in a ring that shows (and seeks) the position, title, transport and a volume bar that is always visible. It is only as tall as it needs to be. Holding the card or pressing the artwork opens the drawer with the player and its library; the browse button opens that drawer expanded.',
+        props: [
+            {
+                doc: 'A media player, as a ref like `ma:kitchen` or `ha:media_player.kitchen`, or a handle (a custom source).',
+                name: 'entity',
+                optional: false,
+                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.",
+                name: 'name',
+                optional: true,
+                type: 'string',
+            },
+            {
+                doc: "Content for the media browser shown with the player in the drawer. By default a `MediaBrowser` over the player's own library, shown only for a ref whose player has one; pass your own content to replace it, or `false` for no drawer.",
+                name: 'browse',
+                optional: true,
+                type: 'ReactNode | false',
+            },
+        ],
+    },
+    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.",
+        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.',
+                name: 'entity',
+                optional: false,
+                type: 'EntityRef',
+            },
+            {
+                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.",
+                name: 'name',
+                optional: true,
+                type: 'string',
+            },
+        ],
+    },
+    MediaBrowser: {
+        doc: "The library of a media player, in the app's own style: shelves, albums, playlists and the rest as rows with artwork. Tap a folder to open it, a track or station to play it, or the play button on an album, playlist or artist to play all of it. A search box appears when the library can be searched.",
+        props: [
+            {
+                doc: "The media player whose own library to browse, as a ref like `ma:living_room`. The backend that owns the player is the media source, so a Music Assistant player lists Music Assistant's library and a Home Assistant player Home Assistant's.",
+                name: 'entity',
+                optional: false,
+                type: 'EntityRef',
+            },
+            {
+                doc: 'Called after something is started, e.g. to close a drawer the browser sits in.',
+                name: 'onPlay',
+                optional: true,
+                type: '(item: BrowseItem) => void',
+            },
+            {
+                doc: 'How items are laid out. `list` is rows, compact enough for a narrow drawer. `theater` is a single row of large cards that scrolls sideways, for a wide space. `auto` is `theater` inside an expanded drawer and `list` anywhere else. Default `list`.',
+                name: 'layout',
+                optional: true,
+                type: "'list' | 'theater' | 'auto'",
+            },
+        ],
+    },
+    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: [
+            {
+                doc: 'The pages to link to; `to` is relative to `base`.',
+                name: 'items',
+                optional: false,
+                type: 'NavItem[]',
+            },
+            {
+                doc: 'Base path items are resolved against, e.g. `/home`.',
+                name: 'base',
+                optional: false,
+                type: 'string',
+            },
+            {
+                doc: 'Adds a light/dark toggle at the bottom of the rail. Off by default — meant for development or a project that deliberately exposes it, not every kiosk install.',
+                name: 'showThemeToggle',
+                optional: true,
+                type: 'boolean',
+            },
+        ],
+    },
+    NavDock: {
+        doc: "Floating bottom pill for switching between a dashboard's pages. Must be rendered inside a router. `position: fixed`, floating over the page; it reserves the space it takes in the surrounding `Page`, which pads for it.",
+        props: [
+            {
+                doc: 'The pages to link to; `to` is relative to `base`.',
+                name: 'items',
+                optional: false,
+                type: 'NavItem[]',
+            },
+            {
+                doc: 'Base path items are resolved against, e.g. `/home`.',
+                name: 'base',
+                optional: false,
+                type: 'string',
+            },
+            {
+                doc: 'Adds a light/dark toggle at the end of the dock. Off by default — meant for development or a project that deliberately exposes it, not every kiosk install.',
+                name: 'showThemeToggle',
+                optional: true,
+                type: 'boolean',
+            },
+        ],
+    },
+    TopBar: {
+        doc: "Shared chrome above a dashboard page's content: title (optionally a dashboard switcher), scene shortcuts, and live status (weather, presence, a clock). Composes freely — every prop but `title` is optional.",
+        props: [
+            {
+                doc: "The dashboard's name. Becomes a dashboard switcher when `dashboards` has two or more entries.",
+                name: 'title',
+                optional: false,
+                type: 'string',
+            },
+            {
+                doc: 'Other dashboards to switch to from the title. Under 2 entries renders a plain title.',
+                name: 'dashboards',
+                optional: true,
+                type: 'DashboardOption[]',
+            },
+            {
+                doc: 'Compact circular buttons that fire `scene.turn_on` directly (not the `Tile`-based `SceneButton`); a bare entity ref uses the default icon and an auto-assigned color, or pass `{ entity, icon, color }` to pick either.',
+                name: 'scenes',
+                optional: true,
+                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.',
+                name: 'weather',
+                optional: true,
+                type: 'EntityRef',
+            },
+            {
+                doc: "Your own component(s) for the right-hand side, after the weather: a security mode picker, a custom status. Whatever it is, it sits in the bar's row and is yours to style.",
+                name: 'extra',
+                optional: true,
+                type: 'ReactNode',
+            },
+            {
+                doc: 'A sensor reflecting overall home/away status (e.g. a binary presence sensor), shown as a chip.',
+                name: 'presence',
+                optional: true,
+                type: 'EntityRef',
+            },
+            {
+                doc: 'Individual people, as refs like `ha:person.dan`, shown as an overlapping avatar stack; anyone who is away is dimmed.',
+                name: 'people',
+                optional: true,
+                type: 'EntityRef[]',
+            },
+            {
+                doc: "Avatars show the person's own picture; this only colors the initial of those without one — each person gets one color from the list, always the same one. Optional: a built-in set of six is used unless you want your own, e.g. `['#8B5CF6', '#34D399']`.",
+                name: 'presenceColors',
+                optional: true,
+                type: 'readonly string[]',
+            },
+            {
+                doc: 'Default `true`.',
+                name: 'showClock',
+                optional: true,
+                type: 'boolean',
+            },
+            {
+                doc: 'Short date pill before the weather. Default `true`.',
+                name: 'showDate',
+                optional: true,
+                type: 'boolean',
+            },
+            {
+                doc: "`'auto'` follows the browser's locale (browsers don't read the OS 12/24h setting, so an `en-US` browser shows AM/PM); `'12h'`/`'24h'` force it. Default `'auto'`.",
+                name: 'clockFormat',
+                optional: true,
+                type: "'auto' | '12h' | '24h'",
+            },
+            {
+                doc: 'A status dot at the far right — green when the runtime and every integration are up; click it for the details. Default `true`.',
+                name: 'showStatus',
+                optional: true,
+                type: 'boolean',
+            },
+        ],
+    },
+    SystemStatus: {
+        doc: 'One dot summarising the runtime link and every integration — green when all are up, amber while something connects, red when something is down; click for per-system detail. `TopBar` renders it from live status, so it only needs the props above for demos.',
+        props: [
+            {
+                doc: 'Overrides the live runtime link status — for demos (the gallery) rather than real dashboards.',
+                name: 'link',
+                optional: true,
+                type: 'LinkStatus',
+            },
+            {
+                doc: 'Overrides the live per-integration statuses, keyed by integration id.',
+                name: 'statuses',
+                optional: true,
+                type: 'Readonly<Record<string, ConnectionStatus>>',
+            },
+            {
+                doc: 'Start with the detail popover open. Default `false`.',
+                name: 'defaultOpen',
+                optional: true,
+                type: 'boolean',
+            },
+        ],
+    },
+    PresenceStack: {
+        doc: 'Overlapping avatar circles for a handful of `person.*` entities.',
+        props: [
+            {
+                doc: 'People, as refs like `ha:person.dan`: one avatar each (their picture, or a colored initial). Someone who is away is dimmed and grayscale.',
+                name: 'entities',
+                optional: false,
+                type: 'EntityRef[]',
+            },
+            {
+                doc: 'Only colors the initial of people without a picture; each gets one, always the same. Optional: a built-in set of six is used by default.',
+                name: 'colors',
+                optional: true,
+                type: 'readonly string[]',
+            },
+        ],
+    },
+    HashsomeProvider: {
+        doc: 'Connects the tree to the runtime proxy. Render only on the client.',
+        props: [
+            {
+                doc: 'Runtime WebSocket URL. Defaults to `/ws` on the current origin.',
+                name: 'url',
+                optional: true,
+                type: 'string',
+            },
+            {
+                doc: 'Provide a ready-made client (gallery, tests).',
+                name: 'client',
+                optional: true,
+                type: 'Client',
+            },
+            {
+                doc: 'Options for the default `RemoteClient` (reconnect timing, a custom socket factory). Ignored when `client` is given.',
+                name: 'clientOptions',
+                optional: true,
+                type: "Omit<RemoteClientOptions, 'url'>",
+            },
+            {
+                doc: "`'system'` follows the browser/OS preference and updates live. Default `'dark'`. A `useThemeToggle()` caller (e.g. `NavRail`'s dev toggle) can still override this at runtime.",
+                name: 'theme',
+                optional: true,
+                type: 'ThemeMode',
+            },
+            {
+                doc: "Any Google Fonts family name (e.g. `'Inter'`, `'Roboto'`, `'Poppins'`), loaded dynamically. Default `'Inter'`.",
+                name: 'font',
+                optional: true,
+                type: 'string',
+            },
+            {
+                doc: "`'compact'` for small square displays: tighter spacing, shorter tiles, smaller icon circles. Default `'comfortable'`.",
+                name: 'density',
+                optional: true,
+                type: 'Density',
+            },
+            {
+                doc: 'Partial changes to the built-in theme — colors per light/dark, radii, typography, spacing, density sizes. Pass a constant defined outside the component: a new object each render rebuilds the theme each render.',
+                name: 'overrides',
+                optional: true,
+                type: 'ThemeOverrides',
+            },
+            {
+                doc: 'The app.',
+                name: 'children',
+                optional: false,
+                type: 'ReactNode',
+            },
+        ],
+    },
+};