@camstack/ui-library 1.2.20 → 1.2.22

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

@@ -6,17 +6,18 @@ import { DeviceControlProps } from './control-registry';
  * Drops into a 200 px control column without towering over sibling rows.
  */
 /**
- * The row/card-sized alarm control.
+ * The row/card-sized alarm control — ONE LINE, always.
  *
- * 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.
+ * Two earlier attempts were wrong in instructive ways. The first rendered only
+ * the segment strip, so the sole sign a panel was armed was which of four
+ * buttons happened to be highlighted — and in a grid card the strip overflowed
+ * and cut that button off. The second let the strip WRAP, which stopped the
+ * overflow by making the row two and three lines tall.
  *
- * 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.
+ * A state badge plus four buttons does not fit a phone-width row, and no amount
+ * of sizing makes it. So the row shows what a row is for — **the state** — and
+ * offers the modes through a select, which is one line at any width. The four
+ * segments live in the hero, where there is room for them.
  */
 export declare function AlarmInlineControl({ trpc, deviceId, optimistic }: DeviceControlProps): ReactNode;
 /**

package/dist/index.cjs

@@ -26770,7 +26770,7 @@ function AlarmGlyph({ icon, sizeClass = "h-8 w-8" }) {
 		"aria-hidden": "true"
 	});
 }
-function Segment({ label, active, busy, onSelect, compact = false }) {
+function Segment({ label, active, busy, onSelect }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 		type: "button",
 		"aria-label": label,
@@ -26780,7 +26780,7 @@ function Segment({ label, active, busy, onSelect, compact = false }) {
 			e.stopPropagation();
 			if (!busy) onSelect();
 		},
-		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"),
+		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"),
 		children: label
 	});
 }
@@ -26790,23 +26790,21 @@ function Segment({ label, active, busy, onSelect, compact = false }) {
 * 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, compact = false }) {
+function AlarmSegments({ state, availableModes, busy, onDisarm, onArm }) {
 	const armed = isArmedState(state);
 	const transitioning = isTransitioningState(state);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		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"),
+		className: cn("flex min-w-0 items-stretch gap-1 rounded-lg border border-border bg-surface-subtle p-1"),
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Segment, {
 			label: "Disarm",
 			active: !armed && !transitioning,
 			busy,
-			onSelect: onDisarm,
-			compact
+			onSelect: onDisarm
 		}), availableModes.map((mode) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Segment, {
 			label: ARM_MODE_LABEL[mode],
 			active: !transitioning && state === `armed_${mode}`,
 			busy,
-			onSelect: () => onArm(mode),
-			compact
+			onSelect: () => onArm(mode)
 		}, mode))]
 	});
 }
@@ -26848,38 +26846,52 @@ function useAlarmControl(trpc, deviceId, optimistic) {
 * Drops into a 200 px control column without towering over sibling rows.
 */
 /**
-* The row/card-sized alarm control.
+* The row/card-sized alarm control — ONE LINE, always.
 *
-* 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.
+* Two earlier attempts were wrong in instructive ways. The first rendered only
+* the segment strip, so the sole sign a panel was armed was which of four
+* buttons happened to be highlighted — and in a grid card the strip overflowed
+* and cut that button off. The second let the strip WRAP, which stopped the
+* overflow by making the row two and three lines tall.
 *
-* 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.
+* A state badge plus four buttons does not fit a phone-width row, and no amount
+* of sizing makes it. So the row shows what a row is for — **the state** — and
+* offers the modes through a select, which is one line at any width. The four
+* segments live in the hero, where there is room for them.
 */
 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;
 	const config = ALARM_STATE_CONFIG[display.state];
+	const current = isArmedState(display.state) ? display.state.replace("armed_", "") : "";
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: "flex min-w-0 flex-wrap items-center gap-2",
+		className: "flex min-w-0 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),
+			className: cn("inline-flex shrink-0 items-center gap-1 rounded-md border px-1.5 py-0.5 text-[11px] font-medium whitespace-nowrap", config.colorClass, isTransitioningState(display.state) && "animate-pulse"),
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(AlarmGlyph, {
 				icon: config.icon,
-				sizeClass: "h-3.5 w-3.5"
+				sizeClass: "h-3 w-3"
 			}), config.label]
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AlarmSegments, {
-			state: display.state,
-			availableModes: display.availableModes,
-			busy,
-			onDisarm: handleDisarm,
-			onArm: handleArm,
-			compact: true
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("select", {
+			"aria-label": "Alarm mode",
+			disabled: busy,
+			value: current,
+			onClick: (e) => e.stopPropagation(),
+			onChange: (e) => {
+				e.stopPropagation();
+				const next = e.target.value;
+				if (next === "") handleDisarm();
+				else handleArm(next);
+			},
+			className: cn("min-w-0 shrink rounded-md border border-border bg-surface-subtle px-1.5 py-0.5 text-xs text-foreground-muted", busy && "cursor-not-allowed opacity-40"),
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
+				value: "",
+				children: "Disarm"
+			}), display.availableModes.map((mode) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
+				value: mode,
+				children: ARM_MODE_LABEL[mode]
+			}, mode))]
 		})]
 	});
 }
@@ -26910,10 +26922,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

@@ -26746,7 +26746,7 @@ function AlarmGlyph({ icon, sizeClass = "h-8 w-8" }) {
 		"aria-hidden": "true"
 	});
 }
-function Segment({ label, active, busy, onSelect, compact = false }) {
+function Segment({ label, active, busy, onSelect }) {
 	return /* @__PURE__ */ jsx("button", {
 		type: "button",
 		"aria-label": label,
@@ -26756,7 +26756,7 @@ function Segment({ label, active, busy, onSelect, compact = false }) {
 			e.stopPropagation();
 			if (!busy) onSelect();
 		},
-		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"),
+		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"),
 		children: label
 	});
 }
@@ -26766,23 +26766,21 @@ function Segment({ label, active, busy, onSelect, compact = false }) {
 * 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, compact = false }) {
+function AlarmSegments({ state, availableModes, busy, onDisarm, onArm }) {
 	const armed = isArmedState(state);
 	const transitioning = isTransitioningState(state);
 	return /* @__PURE__ */ jsxs("div", {
-		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"),
+		className: cn("flex min-w-0 items-stretch gap-1 rounded-lg border border-border bg-surface-subtle p-1"),
 		children: [/* @__PURE__ */ jsx(Segment, {
 			label: "Disarm",
 			active: !armed && !transitioning,
 			busy,
-			onSelect: onDisarm,
-			compact
+			onSelect: onDisarm
 		}), availableModes.map((mode) => /* @__PURE__ */ jsx(Segment, {
 			label: ARM_MODE_LABEL[mode],
 			active: !transitioning && state === `armed_${mode}`,
 			busy,
-			onSelect: () => onArm(mode),
-			compact
+			onSelect: () => onArm(mode)
 		}, mode))]
 	});
 }
@@ -26824,38 +26822,52 @@ function useAlarmControl(trpc, deviceId, optimistic) {
 * Drops into a 200 px control column without towering over sibling rows.
 */
 /**
-* The row/card-sized alarm control.
+* The row/card-sized alarm control — ONE LINE, always.
 *
-* 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.
+* Two earlier attempts were wrong in instructive ways. The first rendered only
+* the segment strip, so the sole sign a panel was armed was which of four
+* buttons happened to be highlighted — and in a grid card the strip overflowed
+* and cut that button off. The second let the strip WRAP, which stopped the
+* overflow by making the row two and three lines tall.
 *
-* 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.
+* A state badge plus four buttons does not fit a phone-width row, and no amount
+* of sizing makes it. So the row shows what a row is for — **the state** — and
+* offers the modes through a select, which is one line at any width. The four
+* segments live in the hero, where there is room for them.
 */
 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;
 	const config = ALARM_STATE_CONFIG[display.state];
+	const current = isArmedState(display.state) ? display.state.replace("armed_", "") : "";
 	return /* @__PURE__ */ jsxs("div", {
-		className: "flex min-w-0 flex-wrap items-center gap-2",
+		className: "flex min-w-0 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),
+			className: cn("inline-flex shrink-0 items-center gap-1 rounded-md border px-1.5 py-0.5 text-[11px] font-medium whitespace-nowrap", config.colorClass, isTransitioningState(display.state) && "animate-pulse"),
 			children: [/* @__PURE__ */ jsx(AlarmGlyph, {
 				icon: config.icon,
-				sizeClass: "h-3.5 w-3.5"
+				sizeClass: "h-3 w-3"
 			}), config.label]
-		}), /* @__PURE__ */ jsx(AlarmSegments, {
-			state: display.state,
-			availableModes: display.availableModes,
-			busy,
-			onDisarm: handleDisarm,
-			onArm: handleArm,
-			compact: true
+		}), /* @__PURE__ */ jsxs("select", {
+			"aria-label": "Alarm mode",
+			disabled: busy,
+			value: current,
+			onClick: (e) => e.stopPropagation(),
+			onChange: (e) => {
+				e.stopPropagation();
+				const next = e.target.value;
+				if (next === "") handleDisarm();
+				else handleArm(next);
+			},
+			className: cn("min-w-0 shrink rounded-md border border-border bg-surface-subtle px-1.5 py-0.5 text-xs text-foreground-muted", busy && "cursor-not-allowed opacity-40"),
+			children: [/* @__PURE__ */ jsx("option", {
+				value: "",
+				children: "Disarm"
+			}), display.availableModes.map((mode) => /* @__PURE__ */ jsx("option", {
+				value: mode,
+				children: ARM_MODE_LABEL[mode]
+			}, mode))]
 		})]
 	});
 }
@@ -26886,10 +26898,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.20",
+  "version": "1.2.22",
   "type": "module",
   "main": "dist/index.cjs",
   "module": "dist/index.js",