@camstack/ui-library 1.2.19 → 1.2.21

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

@@ -5,6 +5,19 @@ import { DeviceControlProps } from './control-registry';
  * 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.
  */
+/**
+ * The row/card-sized alarm control.
+ *
+ * It leads with the STATE, and that is the fix rather than the decoration: the
+ * first version rendered only the segment strip, so the sole indication that a
+ * panel was armed was which of four buttons happened to be highlighted — and in
+ * a grid card the strip overflowed and cut the highlighted one off entirely. A
+ * security control whose state you have to infer from a button is not showing
+ * you its state.
+ *
+ * The strip is allowed to WRAP for the same reason: four modes do not fit a
+ * card at phone width, and a truncated alarm control is worse than a tall one.
+ */
 export declare function AlarmInlineControl({ trpc, deviceId, optimistic }: DeviceControlProps): ReactNode;
 /**
  * AlarmHeroCard — segmented arm/disarm hero for AlarmPanel devices.

package/dist/index.cjs

@@ -26752,25 +26752,25 @@ function isArmedState(state) {
 function isTransitioningState(state) {
 	return state === "arming" || state === "disarming";
 }
-function AlarmGlyph({ icon }) {
+function AlarmGlyph({ icon, sizeClass = "h-8 w-8" }) {
 	if (icon === "disarmed") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ShieldOff, {
-		className: "h-8 w-8",
+		className: sizeClass,
 		"aria-hidden": "true"
 	});
 	if (icon === "triggered") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ShieldAlert, {
-		className: "h-8 w-8",
+		className: sizeClass,
 		"aria-hidden": "true"
 	});
 	if (icon === "pending") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Shield, {
-		className: "h-8 w-8",
+		className: sizeClass,
 		"aria-hidden": "true"
 	});
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ShieldCheck, {
-		className: "h-8 w-8",
+		className: sizeClass,
 		"aria-hidden": "true"
 	});
 }
-function Segment({ label, active, busy, onSelect }) {
+function Segment({ label, active, busy, onSelect, compact = false }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 		type: "button",
 		"aria-label": label,
@@ -26780,7 +26780,7 @@ function Segment({ label, active, busy, onSelect }) {
 			e.stopPropagation();
 			if (!busy) onSelect();
 		},
-		className: cn("flex-1 rounded-md px-3 py-2 text-sm font-medium transition-colors", active ? "bg-primary text-primary-foreground shadow-sm" : "text-foreground-muted hover:bg-surface-hover", busy && "opacity-40 cursor-not-allowed"),
+		className: cn("rounded-md font-medium transition-colors", compact ? "px-2 py-1 text-xs" : "flex-1 px-3 py-2 text-sm", active ? "bg-primary text-primary-foreground shadow-sm" : "text-foreground-muted hover:bg-surface-hover", busy && "opacity-40 cursor-not-allowed"),
 		children: label
 	});
 }
@@ -26790,21 +26790,23 @@ function Segment({ label, active, busy, onSelect }) {
 * segment row. Transitioning states (arming/disarming) leave NO segment
 * highlighted so the Disarm button does not look active mid-arm.
 */
-function AlarmSegments({ state, availableModes, busy, onDisarm, onArm }) {
+function AlarmSegments({ state, availableModes, busy, onDisarm, onArm, compact = false }) {
 	const armed = isArmedState(state);
 	const transitioning = isTransitioningState(state);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: "flex items-stretch gap-1 rounded-lg border border-border bg-surface-subtle p-1",
+		className: cn("flex min-w-0 flex-wrap items-stretch gap-1 rounded-lg border border-border bg-surface-subtle", compact ? "p-0.5" : "p-1"),
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Segment, {
 			label: "Disarm",
 			active: !armed && !transitioning,
 			busy,
-			onSelect: onDisarm
+			onSelect: onDisarm,
+			compact
 		}), availableModes.map((mode) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Segment, {
 			label: ARM_MODE_LABEL[mode],
 			active: !transitioning && state === `armed_${mode}`,
 			busy,
-			onSelect: () => onArm(mode)
+			onSelect: () => onArm(mode),
+			compact
 		}, mode))]
 	});
 }
@@ -26845,16 +26847,40 @@ function useAlarmControl(trpc, deviceId, optimistic) {
 * 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.
 */
+/**
+* The row/card-sized alarm control.
+*
+* It leads with the STATE, and that is the fix rather than the decoration: the
+* first version rendered only the segment strip, so the sole indication that a
+* panel was armed was which of four buttons happened to be highlighted — and in
+* a grid card the strip overflowed and cut the highlighted one off entirely. A
+* security control whose state you have to infer from a button is not showing
+* you its state.
+*
+* The strip is allowed to WRAP for the same reason: four modes do not fit a
+* card at phone width, and a truncated alarm control is worse than a tall one.
+*/
 function AlarmInlineControl({ trpc, deviceId, optimistic }) {
 	const { display, capPresent, busy, handleDisarm, handleArm } = useAlarmControl(trpc, deviceId, optimistic);
 	if (!capPresent) return null;
 	if (display === void 0) return null;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AlarmSegments, {
-		state: display.state,
-		availableModes: display.availableModes,
-		busy,
-		onDisarm: handleDisarm,
-		onArm: handleArm
+	const config = ALARM_STATE_CONFIG[display.state];
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "flex min-w-0 flex-wrap items-center gap-2",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+			className: cn("inline-flex shrink-0 items-center gap-1.5 rounded-md border px-2 py-1 text-[11px] font-medium", config.colorClass),
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(AlarmGlyph, {
+				icon: config.icon,
+				sizeClass: "h-3.5 w-3.5"
+			}), config.label]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AlarmSegments, {
+			state: display.state,
+			availableModes: display.availableModes,
+			busy,
+			onDisarm: handleDisarm,
+			onArm: handleArm,
+			compact: true
+		})]
 	});
 }
 /**
@@ -26884,10 +26910,10 @@ function AlarmHeroCard({ trpc, deviceId, optimistic }) {
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				"data-testid": "alarm-state",
 				"data-state": display.state,
-				className: cn("flex h-16 w-16 items-center justify-center rounded-full border-2", config.colorClass),
+				className: cn("flex h-16 w-16 items-center justify-center rounded-full border-2", config.colorClass, isTransitioningState(display.state) && "animate-pulse"),
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AlarmGlyph, { icon: config.icon })
 			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-				className: "text-sm font-medium text-foreground-muted",
+				className: cn("text-sm font-medium", config.colorClass, "border-0 bg-transparent"),
 				children: config.label
 			})]
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AlarmSegments, {

package/dist/index.js

@@ -26728,25 +26728,25 @@ function isArmedState(state) {
 function isTransitioningState(state) {
 	return state === "arming" || state === "disarming";
 }
-function AlarmGlyph({ icon }) {
+function AlarmGlyph({ icon, sizeClass = "h-8 w-8" }) {
 	if (icon === "disarmed") return /* @__PURE__ */ jsx(ShieldOff, {
-		className: "h-8 w-8",
+		className: sizeClass,
 		"aria-hidden": "true"
 	});
 	if (icon === "triggered") return /* @__PURE__ */ jsx(ShieldAlert, {
-		className: "h-8 w-8",
+		className: sizeClass,
 		"aria-hidden": "true"
 	});
 	if (icon === "pending") return /* @__PURE__ */ jsx(Shield, {
-		className: "h-8 w-8",
+		className: sizeClass,
 		"aria-hidden": "true"
 	});
 	return /* @__PURE__ */ jsx(ShieldCheck, {
-		className: "h-8 w-8",
+		className: sizeClass,
 		"aria-hidden": "true"
 	});
 }
-function Segment({ label, active, busy, onSelect }) {
+function Segment({ label, active, busy, onSelect, compact = false }) {
 	return /* @__PURE__ */ jsx("button", {
 		type: "button",
 		"aria-label": label,
@@ -26756,7 +26756,7 @@ function Segment({ label, active, busy, onSelect }) {
 			e.stopPropagation();
 			if (!busy) onSelect();
 		},
-		className: cn("flex-1 rounded-md px-3 py-2 text-sm font-medium transition-colors", active ? "bg-primary text-primary-foreground shadow-sm" : "text-foreground-muted hover:bg-surface-hover", busy && "opacity-40 cursor-not-allowed"),
+		className: cn("rounded-md font-medium transition-colors", compact ? "px-2 py-1 text-xs" : "flex-1 px-3 py-2 text-sm", active ? "bg-primary text-primary-foreground shadow-sm" : "text-foreground-muted hover:bg-surface-hover", busy && "opacity-40 cursor-not-allowed"),
 		children: label
 	});
 }
@@ -26766,21 +26766,23 @@ function Segment({ label, active, busy, onSelect }) {
 * segment row. Transitioning states (arming/disarming) leave NO segment
 * highlighted so the Disarm button does not look active mid-arm.
 */
-function AlarmSegments({ state, availableModes, busy, onDisarm, onArm }) {
+function AlarmSegments({ state, availableModes, busy, onDisarm, onArm, compact = false }) {
 	const armed = isArmedState(state);
 	const transitioning = isTransitioningState(state);
 	return /* @__PURE__ */ jsxs("div", {
-		className: "flex items-stretch gap-1 rounded-lg border border-border bg-surface-subtle p-1",
+		className: cn("flex min-w-0 flex-wrap items-stretch gap-1 rounded-lg border border-border bg-surface-subtle", compact ? "p-0.5" : "p-1"),
 		children: [/* @__PURE__ */ jsx(Segment, {
 			label: "Disarm",
 			active: !armed && !transitioning,
 			busy,
-			onSelect: onDisarm
+			onSelect: onDisarm,
+			compact
 		}), availableModes.map((mode) => /* @__PURE__ */ jsx(Segment, {
 			label: ARM_MODE_LABEL[mode],
 			active: !transitioning && state === `armed_${mode}`,
 			busy,
-			onSelect: () => onArm(mode)
+			onSelect: () => onArm(mode),
+			compact
 		}, mode))]
 	});
 }
@@ -26821,16 +26823,40 @@ function useAlarmControl(trpc, deviceId, optimistic) {
 * 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.
 */
+/**
+* The row/card-sized alarm control.
+*
+* It leads with the STATE, and that is the fix rather than the decoration: the
+* first version rendered only the segment strip, so the sole indication that a
+* panel was armed was which of four buttons happened to be highlighted — and in
+* a grid card the strip overflowed and cut the highlighted one off entirely. A
+* security control whose state you have to infer from a button is not showing
+* you its state.
+*
+* The strip is allowed to WRAP for the same reason: four modes do not fit a
+* card at phone width, and a truncated alarm control is worse than a tall one.
+*/
 function AlarmInlineControl({ trpc, deviceId, optimistic }) {
 	const { display, capPresent, busy, handleDisarm, handleArm } = useAlarmControl(trpc, deviceId, optimistic);
 	if (!capPresent) return null;
 	if (display === void 0) return null;
-	return /* @__PURE__ */ jsx(AlarmSegments, {
-		state: display.state,
-		availableModes: display.availableModes,
-		busy,
-		onDisarm: handleDisarm,
-		onArm: handleArm
+	const config = ALARM_STATE_CONFIG[display.state];
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex min-w-0 flex-wrap items-center gap-2",
+		children: [/* @__PURE__ */ jsxs("span", {
+			className: cn("inline-flex shrink-0 items-center gap-1.5 rounded-md border px-2 py-1 text-[11px] font-medium", config.colorClass),
+			children: [/* @__PURE__ */ jsx(AlarmGlyph, {
+				icon: config.icon,
+				sizeClass: "h-3.5 w-3.5"
+			}), config.label]
+		}), /* @__PURE__ */ jsx(AlarmSegments, {
+			state: display.state,
+			availableModes: display.availableModes,
+			busy,
+			onDisarm: handleDisarm,
+			onArm: handleArm,
+			compact: true
+		})]
 	});
 }
 /**
@@ -26860,10 +26886,10 @@ function AlarmHeroCard({ trpc, deviceId, optimistic }) {
 			children: [/* @__PURE__ */ jsx("div", {
 				"data-testid": "alarm-state",
 				"data-state": display.state,
-				className: cn("flex h-16 w-16 items-center justify-center rounded-full border-2", config.colorClass),
+				className: cn("flex h-16 w-16 items-center justify-center rounded-full border-2", config.colorClass, isTransitioningState(display.state) && "animate-pulse"),
 				children: /* @__PURE__ */ jsx(AlarmGlyph, { icon: config.icon })
 			}), /* @__PURE__ */ jsx("span", {
-				className: "text-sm font-medium text-foreground-muted",
+				className: cn("text-sm font-medium", config.colorClass, "border-0 bg-transparent"),
 				children: config.label
 			})]
 		}), /* @__PURE__ */ jsx(AlarmSegments, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@camstack/ui-library",
-  "version": "1.2.19",
+  "version": "1.2.21",
   "type": "module",
   "main": "dist/index.cjs",
   "module": "dist/index.js",