Sensor cards are built by composition, from three components: CwLocationCard owns the location
shell, CwSensorCard owns a single expandable sensor panel, and CwDataList renders the detail rows. Nested cards stay reactive when the parent
updates their props, and the location header rolls up the status of every sensor inside it.
The outer location card reacts to the nested sensor status automatically. The sensor panel exposes expand/collapse and freshness callbacks without taking ownership of the input data.
Sensor freshness: no timer
Row freshness map: {}
hasError attributeSetting hasError hides the normal primary/secondary readings and shows a
pulsing red error badge in their place, so a fault is impossible to miss. The string you
pass becomes the badge text — pass a localized message (true falls back to a
generic SENSOR ERROR).
Use CwDataList for the standard sensor detail rows inside an expanded
panel, or anywhere else you need the same metadata layout.
Rendered with CwDataList
The location shell now derives its own header status from the sensor cards rendered
inside it. Mixed sensor states resolve to warning.
Weather stations and tank monitors often need row labels that do not map cleanly to
the default temperature and humidity assumptions. That is where passing explicit detailRows into CwDataList pays off.
Short sensor panels stay compact by default, and an empty location card now stands on its own without pretending to be a sensor panel.
loading shows skeleton readings. When lastSeenAt is older than expireAfterMinutes, the readings dim and a “Last seen … ago” line appears.
Every visible string can be replaced through labels.
<CwLocationCard title="Greenhouse A">
<CwSensorCard
label="CW-SS-TMEPNCO2-18"
status="online"
primaryValue={-22.93}
primaryUnit="°C"
primary_icon="thermo"
secondaryValue={79.61}
secondaryUnit="%"
secondary_icon="drop"
lastSeenAt={new Date(Date.now() - 120_000)}
expireAfterMinutes={10}
onExpand={(label) => console.log('expanded:', label)}
onCollapse={(label) => console.log('collapsed:', label)}
onExpire={(label) => console.log('overdue:', label)}
>
<CwDataList
rows={[
{ id: 'temperature', label: 'Temperature', value: '-22.93', unit: '°C', icon: 'thermo' },
{ id: 'humidity', label: 'Humidity', value: '79.61', unit: '%', icon: 'drop' },
{ id: 'updated', label: 'Last Update', icon: 'timer', lastSeenAt: new Date(Date.now() - 120_000), expireAfterMinutes: 10 }
]}
/>
</CwSensorCard>
</CwLocationCard><script lang="ts">
let sensorWithinTimeout = $state<boolean | null>(null);
</script>
<CwLocationCard title="Greenhouse A">
<CwSensorCard
label="CW-SS-TMEPNCO2-18"
status="online"
primaryValue={22.93}
primaryUnit="°C"
secondaryValue={79.61}
secondaryUnit="%"
lastSeenAt={new Date(Date.now() - 120_000)}
expireAfterMinutes={10}
onExpand={(label) => console.log('expanded:', label)}
onCollapse={(label) => console.log('collapsed:', label)}
onExpire={(label) => console.log('expired:', label)}
bind:withinTimeout={sensorWithinTimeout}
>
<CwDataList
rows={[
{ id: 'temperature', label: 'Temperature', value: '22.93', unit: '°C', icon: 'thermo' },
{ id: 'humidity', label: 'Humidity', value: '79.61', unit: '%', icon: 'drop' },
{ id: 'updated', label: 'Last Update', icon: 'timer', lastSeenAt: new Date(Date.now() - 120_000), expireAfterMinutes: 10 }
]}
/>
</CwSensorCard>
</CwLocationCard>
<pre>{JSON.stringify({ sensorWithinTimeout }, null, 2)}</pre><script lang="ts">
import { buildCwSensorCardDetailRows } from '$lib/components/cwSensorCardRows.js';
const sensors = [
{
label: 'CW-Temp-01',
primaryValue: 21.5,
primaryUnit: '°C',
secondaryValue: 58.2,
secondaryUnit: '%',
lastSeenAt: new Date(Date.now() - 60_000),
expireAfterMinutes: 10
},
{
label: 'CW-Temp-02',
primaryValue: 19.8,
primaryUnit: '°C',
secondaryValue: 62.1,
secondaryUnit: '%',
lastSeenAt: new Date(Date.now() - 300_000),
expireAfterMinutes: 15
}
];
</script>
<CwLocationCard title="Research Lab">
{#each sensors as sensor (sensor.label)}
<CwSensorCard
label={sensor.label}
status={sensor.status ?? 'online'}
primaryValue={sensor.primaryValue}
primaryUnit={sensor.primaryUnit ?? '°C'}
secondaryValue={sensor.secondaryValue}
secondaryUnit={sensor.secondaryUnit ?? '%'}
lastSeenAt={sensor.lastSeenAt}
expireAfterMinutes={sensor.expireAfterMinutes}
>
<CwDataList rows={buildCwSensorCardDetailRows(sensor)} />
</CwSensorCard>
{/each}
</CwLocationCard><CwDataList
rows={[
{ id: 'temperature', label: 'Temperature', value: '22.40', unit: '°C', icon: 'thermo' },
{ id: 'humidity', label: 'Humidity', value: '67.30', unit: '%', icon: 'drop' },
{ id: 'updated', label: 'Last Update', icon: 'timer', lastSeenAt: new Date(Date.now() - 120_000), expireAfterMinutes: 10 }
]}
/><script lang="ts">
const weatherDevice = {
label: 'CW-Weather-01',
primaryValue: 22.4,
primaryUnit: '°C',
primary_icon: 'thermo',
secondaryValue: 67.3,
secondaryUnit: '%',
secondary_icon: 'drop',
lastSeenAt: new Date(Date.now() - 60_000),
expireAfterMinutes: 10,
detailRows: [
{ id: 'wind', label: 'Wind Speed', value: '12.50', unit: 'km/h', icon: '💨' },
{ id: 'lux', label: 'Lux Level', value: '48500', unit: 'lx', icon: '☀️' },
{ id: 'updated', label: 'Last Update', icon: 'timer', lastSeenAt: new Date(Date.now() - 60_000), expireAfterMinutes: 10 }
]
};
</script>
<CwLocationCard title="Weather Station Alpha">
<CwSensorCard
label={weatherDevice.label}
status="online"
primaryValue={weatherDevice.primaryValue}
primaryUnit={weatherDevice.primaryUnit}
primary_icon={weatherDevice.primary_icon}
secondaryValue={weatherDevice.secondaryValue}
secondaryUnit={weatherDevice.secondaryUnit}
secondary_icon={weatherDevice.secondary_icon}
lastSeenAt={weatherDevice.lastSeenAt}
expireAfterMinutes={weatherDevice.expireAfterMinutes}
defaultExpanded
>
<CwDataList rows={weatherDevice.detailRows} />
</CwSensorCard>
</CwLocationCard>CwLocationCard, CwSensorCard, and CwDataList now split the old monolithic sensor-card API into three focused pieces. Compose them in markup so location state, sensor state, and detail rows stay reactive without pushing a devices array into one component.
The intended structure is `CwLocationCard` -> `CwSensorCard` -> `CwDataList`. Use `CwCardDataRowItem` directly only when you need row-level control outside the shared list wrapper.
| API | Type | Details |
|---|---|---|
CwLocationCard.title Default: | string | Location or site label shown in the outer shell header. |
CwLocationCard.status Default: | CwStatusDotStatus | Fallback location status used when no nested sensor cards are registered. |
CwLocationCard.onNavigate | (target: string) => void | Called from the location header action button. |
CwSensorCard.label | string | Sensor or device label shown in the expandable panel header. |
CwSensorCard.status Default: | CwStatusDotStatus | Base sensor status before freshness overrides are applied. |
CwSensorCard.primaryValue / primaryUnit / primary_icon | number / string / string | Snippet | Main reading shown in the sensor panel header. If the icon is omitted, the card infers a sensible built-in icon from the unit. |
CwSensorCard.secondaryValue / secondaryUnit / secondary_icon | number / string / string | Snippet | Optional supporting reading rendered next to the primary reading. |
CwSensorCard.lastSeenAt / lastSeen / LastSeen / lastUpdated | Date | string | number | Freshness timestamp used for overdue detection on the sensor card. Prefer `lastSeenAt`; `lastUpdated` remains supported for compatibility. |
CwSensorCard.expireAfterMinutes / alarmTimeoutMinutes / AlarmTimeoutMinutes / expectedUpdateAfterMinutes | number | Threshold used by the sensor-card freshness timer. Prefer `expireAfterMinutes`; `expectedUpdateAfterMinutes` remains supported for compatibility. |
CwSensorCard.open / defaultExpanded / storageKey | boolean / boolean / string | Use these to control or persist the expanded state for an individual sensor panel. |
CwSensorCard.onExpand / onCollapse / onExpire / alarmCallback / AlarmCallback | (label: string) => void | Lifecycle callbacks for panel toggles and freshness expiry. `alarmCallback` and `AlarmCallback` are accepted as aliases for expiry handling. |
bind:CwSensorCard.withinTimeout | boolean | null | Bindable freshness state for the sensor card itself. `true` means fresh, `false` means expired, and `null` means no timer inputs were supplied. |
CwDataList.rows | CwDataListRow[] | Detail rows rendered inside the expanded sensor body. |
bind:CwDataList.rowWithinTimeoutMap | Record<string, boolean | null> | Bindable row freshness state keyed by row id. Rows without timer inputs are omitted from the map. |
class | string | Each component also accepts an extra `class` prop on its own root element. |
loading Default: | boolean | Shows a skeleton reading and sets `aria-busy` while data loads. |
labels | CwSensorCard labels | Strings for the error, details, empty value and "last seen" text. |
detailsHeadingLevel | 1–6 | Heading level for the details section. |
Each snippet is a complete, working example you can paste into a Svelte 5 component.
The default composed structure for one sensor per location.
<CwLocationCard title="Greenhouse A">
<CwSensorCard
label="CW-SS-TMEPNCO2-18"
status="online"
primaryValue={-22.93}
primaryUnit="°C"
secondaryValue={79.61}
secondaryUnit="%"
lastSeenAt={new Date(Date.now() - 120_000)}
expireAfterMinutes={10}
>
<CwDataList rows={rows} />
</CwSensorCard>
</CwLocationCard>Use this when the host application needs sensor-level expiry state.
<script lang="ts">
let sensorWithinTimeout = $state<boolean | null>(null);
</script>
<CwSensorCard
label="CW-SS-TMEPNCO2-18"
status="online"
primaryValue={22.93}
primaryUnit="°C"
secondaryValue={79.61}
secondaryUnit="%"
lastSeenAt={new Date(Date.now() - 120_000)}
expireAfterMinutes={10}
onExpire={(label) => console.log('expired:', label)}
bind:withinTimeout={sensorWithinTimeout}
/>Render one `CwSensorCard` per sensor and let the location shell aggregate the status.
<CwLocationCard title="Research Lab">
{#each sensors as sensor (sensor.label)}
<CwSensorCard label={sensor.label} status={sensor.status ?? 'online'} primaryValue={sensor.primaryValue}>
<CwDataList rows={buildCwSensorCardDetailRows(sensor)} />
</CwSensorCard>
{/each}
</CwLocationCard>Pass explicit rows into `CwDataList` when the sensor needs custom metadata.
<script lang="ts">
const weatherDevice = {
label: 'CW-Weather-01',
primaryValue: 22.4,
primaryUnit: '°C',
secondaryValue: 67.3,
secondaryUnit: '%',
lastUpdated: new Date(Date.now() - 60_000),
expectedUpdateAfterMinutes: 10,
detailRows: [
{ id: 'wind', label: 'Wind Speed', value: '12.50', unit: 'km/h', icon: '💨' },
{ id: 'lux', label: 'Lux Level', value: '48500', unit: 'lx', icon: '☀️' },
{ id: 'updated', label: 'Last Update', icon: 'timer', lastUpdated: new Date(Date.now() - 60_000), expectedUpdateAfter: 10 }
]
};
</script>
<CwSensorCard label={weatherDevice.label} defaultExpanded>
<CwDataList rows={weatherDevice.detailRows} />
</CwSensorCard>