Packages

Dashhaus is five packages that share one version, 0.4.0, and move together.

Package	What it is	Who installs it
@dashhaus/deploy	Deploy a Dashhaus dashboard into Home Assistant: copy each file, register its resource and create the dashboards from dashboard.config.mjs.	Using a skin from the command line, building a skin
@dashhaus/core	The Home Assistant foundation behind Dashhaus skins: entity models, the store, mappers, actions, useHa hooks and interaction primitives, headless; and, on its ./lovelace subpaths, the framework a skin's Lovelace card draws on.	Your own app, building a skin
@dashhaus/orb	The Orb skin for Home Assistant: React cards, bundles and dashboard furniture, and custom:dashhaus-orb, a Lovelace card drawn from YAML.	Using Orb from the command line, your own app
@dashhaus/field	The Field skin for Home Assistant: hardware-style React modules and page furniture, and custom:dashhaus-field, a Lovelace card drawn from YAML.	Using Field from the command line, your own app
create-dashhaus-skin	Start your own Dashhaus skin: a standalone project with a control card, a reading card and its Lovelace card, on @dashhaus/core.	Building a skin, once

How they depend on each other

@dashhaus/core           React (peer); react-dom and home-assistant-js-websocket (optional peers)
  ├─ @dashhaus/orb
  ├─ @dashhaus/field
  └─ your skin           (what create-dashhaus-skin writes depends on core, and deploys with deploy)

@dashhaus/deploy         depends on esbuild only; never on React, core or a skin

So a dashboard that only uses Orb or Field installs that skin’s package and @dashhaus/deploy, and uploads the resource the skin ships; nothing is built. A skin installs core and deploys its own file with the same deploy tool.

@dashhaus/core

Import	What it is
@dashhaus/core	The transport and store, HaProvider and its selectors, the useHa<Name> hooks and Ha<Name> headless components, the registry, history and request hooks (useHaRegistry, useHaAreas, useHaArea, useHaHistory, useHaRequest), the mappers and action factories, and HaActionError
@dashhaus/core/entities, @dashhaus/core/entities/*	The entity models and their pure logic (./entities/light/types, ./entities/format), with no React and no Home Assistant
@dashhaus/core/primitives	Headless interaction hooks: press, slider, range slider, sheet, keypad, and useGuardedAction for an action that asks first or takes a code
@dashhaus/core/hooks	Shared hooks with no UI: useNow, useDelayLeft, useScrollSpy, useHashPage, and useDemoClimate for stories
@dashhaus/core/perf	The opt-in performance marks a deployed skin's resource records, off unless the page asks for them with ?dashhaus_perf=1
@dashhaus/core/websocket	connectHomeAssistant and createHomeAssistantTransport: the one module that imports home-assistant-js-websocket
@dashhaus/core/seeds/*	One domain's demo data per module (./seeds/lock): its <NAME>_SEEDS, <NAME>_WORST_CASE and useDemo<Name> hook, the same for every skin's stories
@dashhaus/core/demo	Demo transports for Storybook and tests, and createDemoStore() for the whole house
@dashhaus/core/testing	A fake transport (with calls, emit and emitEntity) and a render under a real store, for connected-card tests (needs Vitest and Testing Library)
@dashhaus/core/fixtures/*	Raw Home Assistant state fixtures

The demo, testing and fixture subpaths are for stories and tests: their data can change in any release.

For a skin author

The Lovelace framework is @dashhaus/core’s ./lovelace subpaths; a React app that only uses the hooks never loads them.

Import	What it is
@dashhaus/core/lovelace	The full Lovelace entry: element base, nav, room sensors and token scoping. Not part of the contract
@dashhaus/core/lovelace/skin	The frozen skin-author surface: LovelaceDashboardElement, registerCard, scopeToHost, autoInput, useActionStatus (the rejected-command status a page shows), LovelaceHass, AutoEntityEntry, ActionStatus and ActionMessage. The frozen contract
@dashhaus/core/lovelace/card	The frame every skin's card draws on: footprint flags, ids and aria, details state, tile/sheet composition. The frozen contract
@dashhaus/core/lovelace/schema	The shared YAML Reader, the card kind table and card reader, the shared option readers, the renderer dispatch and DashboardConfigError. Pure; the frozen contract
@dashhaus/core/lovelace/layout	The automatic layout: visibility, area resolution, name sort, grouping, placement. Pure; may change with the layout work
@dashhaus/core/lovelace/conformance	checkCards, the generic card preset a skin runs against its own cards. Node- and test-only; the compatibility test

Until 1.0 a breaking change to the contract is allowed, but it is announced as one; the conformance check is what says a skin still fits.

The skins

Import	What it is
@dashhaus/orb	The skin's cards, connected tiles, bundles and dashboard furniture. Loads the token CSS
@dashhaus/orb/lovelace/card	createDashhausCard, defineDashhausCard and the custom:dashhaus-orb element
@dashhaus/orb/lovelace/auto	autoDashboard, the automatic layout a config or deploy factory can call. Pure, no React
@dashhaus/orb/storybook	The skin's Storybook section, toolbar and decorator (repo tooling)
@dashhaus/orb/resource	resourceFile: the absolute path of orb-dashboard.js, Orb's card, stylesheet and dashboard strategy (custom:orb-dashboard) in one ES module with React inside. For a Node script; Node-only
@dashhaus/orb/styles/tokens.css	Orb's design tokens, the only source of its colours
@dashhaus/field	The skin's modules, connected modules and page furniture. Loads the token CSS
@dashhaus/field/lovelace/card	createFieldCard, defineFieldCard and the custom:dashhaus-field element
@dashhaus/field/storybook	The skin's Storybook section, toolbar and decorator (repo tooling)
@dashhaus/field/resource	resourceFile: the absolute path of field-dashboard.js, Field's card, stylesheet and dashboard strategy (custom:field-dashboard) in one ES module with React inside. For a Node script; Node-only
@dashhaus/field/styles/tokens.css	Field's design tokens, the only source of its colours, every one prefixed --fd-

@dashhaus/deploy

For a script that deploys from code rather than the dashhaus-deploy command:

Import	What it is
@dashhaus/deploy	deploy({ configFile, env, skipBuild, report, warn, connect, fetch }), which resolves to { resources: [{ name, url, version, updated, error? }], dashboards }, and the loader: readConfig, resolveDashboards, resolveFiles, loadDashboards
@dashhaus/deploy/config	Types for a config (DeployConfig, DeployDashboard, DeployCardDashboard, DeployStrategyDashboard, DeployStrategy, DeployCardConfig, DeployCardFactory, DeployHa, DeployCard), and generatedDashboards()

Which path installs what

You want	Install
Orb or Field on your Home Assistant, no terminal	Nothing from npm: the Marketplace installs the skin’s resource (Orb, Field)
Orb or Field on your Home Assistant, from a script or CI	@dashhaus/orb or @dashhaus/field, and @dashhaus/deploy (Deploy from the command line)
Entities in a React app, your markup	@dashhaus/core, React, home-assistant-js-websocket (Use the hooks in your app)
Orb’s or Field’s cards in a React app	@dashhaus/orb or @dashhaus/field with the above
A skin of your own	npm create dashhaus-skin@latest, which writes a project depending on core and deploy (Build a skin)