@camstack/ui-library 1.2.335 → 1.2.337

package/CHANGELOG.md

@@ -0,0 +1,20 @@
+# Changelog
+
+All notable changes to this package are documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [Unreleased]
+
+## [1.2.337] - 2026-10-27
+
+### Added
+
+- The published package now includes its README and CHANGELOG.
+
+## [1.2.336] - 2026-10-27
+
+### Added
+
+- CamStack UI Library (@camstack/ui-library).

package/README.md

@@ -0,0 +1,19 @@
+# CamStack UI Library
+
+The shared React component library and Tailwind theme the CamStack admin UI, addon pages and widgets are built from.
+
+<!-- readme:generated:start (derived from the manifest; edit outside this block) -->
+
+Package `@camstack/ui-library` on npm.
+
+## Documentation
+
+- [docs/architecture/ui.md](https://github.com/camstack/server/blob/main/docs/architecture/ui.md)
+- [docs/ui/conventions.md](https://github.com/camstack/server/blob/main/docs/ui/conventions.md)
+- [docs/ui/admin-patterns.md](https://github.com/camstack/server/blob/main/docs/ui/admin-patterns.md)
+- [docs/ui/common-components.md](https://github.com/camstack/server/blob/main/docs/ui/common-components.md)
+- [packages/ui-library/AGENTS.md](https://github.com/camstack/server/blob/main/packages/ui-library/AGENTS.md)
+
+See [CHANGELOG.md](./CHANGELOG.md) for what changed in each version.
+
+<!-- readme:generated:end -->

package/dist/{SceneMonitorEditor-5N2xqurW.js → SceneMonitorEditor-BgqJYVdM.js}

@@ -1,5 +1,5 @@
 import { t as Settings2 } from "./settings-2-jT1iBqHD.js";
-import { A as Trash2, SCENE_CAPTURE_VARIANTS, Sr as Camera, TEXT_HINT, UiTrans, badgeFor, coverageLine, fn as ImageOff, hubPath, isAbsentProvider, pt as RotateCcw, roiTooLarge, statusLine, useDeviceProxy, useDeviceSnapshotImage, useDeviceStateSlice, useSystem, useUiText, variantLabel } from "./index.js";
+import { A as Trash2, SCENE_CAPTURE_VARIANTS, Sr as Camera, TEXT_HINT, UiTrans, badgeFor, coverageLine, fn as ImageOff, hubPath, isAbsentProvider, pt as RotateCcw, roiTooLarge, statusLine, useConfirm, useDeviceProxy, useDeviceSnapshotImage, useDeviceStateSlice, useSystem, useUiText, variantLabel } from "./index.js";
 import { MaskShapeCanvas } from "./MaskShapeCanvas-C9cJlxvG.js";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
@@ -92,7 +92,7 @@ function SceneReferenceGallery({ monitor, disabled, onDelete }) {
 	const t = useUiText();
 	const groups = groupReferences(monitor);
 	const total = totalReferences(monitor);
-	const [confirming, setConfirming] = useState(null);
+	const confirm = useConfirm();
 	if (groups.length === 0) return /* @__PURE__ */ jsx("p", {
 		className: `${TEXT_HINT} leading-relaxed`,
 		children: t("uiLibrary.sceneReferenceGallery.empty", "No photographs captured yet. Press “Capture daylight” to take the one this scene will judge everything against.")
@@ -113,7 +113,6 @@ function SceneReferenceGallery({ monitor, disabled, onDelete }) {
 				children: group.tiles.map((tile) => {
 					const key = `${tile.stateId}:${String(tile.index)}`;
 					const isLastOverall = total === 1;
-					const pending = confirming === key;
 					return /* @__PURE__ */ jsxs("li", {
 						className: "flex w-24 flex-col gap-1 rounded-md border border-border p-1",
 						children: [
@@ -131,21 +130,22 @@ function SceneReferenceGallery({ monitor, disabled, onDelete }) {
 									date: formatCapturedAt(tile.reference.capturedAt)
 								}),
 								onClick: () => {
-									if (isLastOverall && !pending) {
-										setConfirming(key);
-										return;
-									}
-									setConfirming(null);
-									onDelete({
-										stateId: tile.stateId,
-										index: tile.index
-									});
+									(async () => {
+										if (isLastOverall) {
+											if (!await confirm({
+												title: t("uiLibrary.sceneReferenceGallery.deleteTitle", "Delete the only photograph?"),
+												message: t("uiLibrary.sceneReferenceGallery.lastWarning", "This is the only photograph this scene has. Delete it and the scene no longer knows what normal looks like — it stops judging until you capture again."),
+												confirmLabel: t("uiLibrary.sceneReferenceGallery.delete", "Delete"),
+												variant: "danger"
+											})) return;
+										}
+										onDelete({
+											stateId: tile.stateId,
+											index: tile.index
+										});
+									})();
 								},
-								children: [/* @__PURE__ */ jsx(Trash2, { className: "mr-1 inline h-3 w-3" }), pending ? t("uiLibrary.sceneReferenceGallery.confirm", "Confirm") : t("uiLibrary.sceneReferenceGallery.delete", "Delete")]
-							}),
-							pending && /* @__PURE__ */ jsx("p", {
-								className: "text-[10px] leading-snug text-warning",
-								children: t("uiLibrary.sceneReferenceGallery.lastWarning", "This is the only photograph this scene has. Delete it and the scene no longer knows what normal looks like — it stops judging until you capture again.")
+								children: [/* @__PURE__ */ jsx(Trash2, { className: "mr-1 inline h-3 w-3" }), t("uiLibrary.sceneReferenceGallery.delete", "Delete")]
 							})
 						]
 					}, key);

package/dist/{SceneMonitorEditor-D_jkzQ2o.cjs → SceneMonitorEditor-C-way4ES.cjs}

@@ -92,7 +92,7 @@ function SceneReferenceGallery({ monitor, disabled, onDelete }) {
 	const t = require_index.useUiText();
 	const groups = groupReferences(monitor);
 	const total = totalReferences(monitor);
-	const [confirming, setConfirming] = (0, react.useState)(null);
+	const confirm = require_index.useConfirm$1();
 	if (groups.length === 0) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
 		className: `${require_index.TEXT_HINT} leading-relaxed`,
 		children: t("uiLibrary.sceneReferenceGallery.empty", "No photographs captured yet. Press “Capture daylight” to take the one this scene will judge everything against.")
@@ -113,7 +113,6 @@ function SceneReferenceGallery({ monitor, disabled, onDelete }) {
 				children: group.tiles.map((tile) => {
 					const key = `${tile.stateId}:${String(tile.index)}`;
 					const isLastOverall = total === 1;
-					const pending = confirming === key;
 					return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", {
 						className: "flex w-24 flex-col gap-1 rounded-md border border-border p-1",
 						children: [
@@ -131,21 +130,22 @@ function SceneReferenceGallery({ monitor, disabled, onDelete }) {
 									date: formatCapturedAt(tile.reference.capturedAt)
 								}),
 								onClick: () => {
-									if (isLastOverall && !pending) {
-										setConfirming(key);
-										return;
-									}
-									setConfirming(null);
-									onDelete({
-										stateId: tile.stateId,
-										index: tile.index
-									});
+									(async () => {
+										if (isLastOverall) {
+											if (!await confirm({
+												title: t("uiLibrary.sceneReferenceGallery.deleteTitle", "Delete the only photograph?"),
+												message: t("uiLibrary.sceneReferenceGallery.lastWarning", "This is the only photograph this scene has. Delete it and the scene no longer knows what normal looks like — it stops judging until you capture again."),
+												confirmLabel: t("uiLibrary.sceneReferenceGallery.delete", "Delete"),
+												variant: "danger"
+											})) return;
+										}
+										onDelete({
+											stateId: tile.stateId,
+											index: tile.index
+										});
+									})();
 								},
-								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.Trash2, { className: "mr-1 inline h-3 w-3" }), pending ? t("uiLibrary.sceneReferenceGallery.confirm", "Confirm") : t("uiLibrary.sceneReferenceGallery.delete", "Delete")]
-							}),
-							pending && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-								className: "text-[10px] leading-snug text-warning",
-								children: t("uiLibrary.sceneReferenceGallery.lastWarning", "This is the only photograph this scene has. Delete it and the scene no longer knows what normal looks like — it stops judging until you capture again.")
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.Trash2, { className: "mr-1 inline h-3 w-3" }), t("uiLibrary.sceneReferenceGallery.delete", "Delete")]
 							})
 						]
 					}, key);

package/dist/composites/device-list/batch-toolbar.d.ts

@@ -1,4 +1,4 @@
-import { type ReactNode } from "react";
+import type { ReactNode } from "react";
 export interface DeviceBatchToolbarProps {
 	readonly selectedIds: ReadonlySet<number>;
 	readonly onClear: () => void;

package/dist/index.cjs

@@ -56566,7 +56566,7 @@ function PrimaryChildPicker({ childrenList, selectedId, onSetPrimary, disabled,
 //#region src/composites/device-list/batch-toolbar.tsx
 function DeviceBatchToolbar({ selectedIds, onClear, remove, disable, enable }) {
 	const t = useUiText();
-	const [pendingDelete, setPendingDelete] = (0, react$1.useState)(false);
+	const confirm = useConfirm();
 	if (selectedIds.size === 0) return null;
 	const ids = [...selectedIds];
 	const count = ids.length;
@@ -56578,19 +56578,14 @@ function DeviceBatchToolbar({ selectedIds, onClear, remove, disable, enable }) {
 		for (const id of ids) enable({ deviceId: id });
 		onClear();
 	};
-	const handleDeleteFirst = () => {
-		setPendingDelete(true);
-	};
-	const handleDeleteConfirm = () => {
+	const handleDelete = async () => {
+		if (!await confirm({
+			title: t("uiLibrary.batchToolbar.deleteTitle", "Delete {{count}} devices?", { count }),
+			message: t("uiLibrary.batchToolbar.deleteMessage", "{{count}} selected devices will be deleted. This cannot be undone.", { count }),
+			confirmLabel: t("uiLibrary.batchToolbar.delete", "Delete"),
+			variant: "danger"
+		})) return;
 		for (const id of ids) remove({ deviceId: id });
-		setPendingDelete(false);
-		onClear();
-	};
-	const handleDeleteCancel = () => {
-		setPendingDelete(false);
-	};
-	const handleClear = () => {
-		setPendingDelete(false);
 		onClear();
 	};
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -56619,25 +56614,15 @@ function DeviceBatchToolbar({ selectedIds, onClear, remove, disable, enable }) {
 						className: cn("inline-flex items-center h-6 px-2.5 rounded-md border text-[10.5px] font-medium transition-colors", "border-border bg-surface text-foreground-subtle hover:text-foreground hover:bg-surface"),
 						children: t("uiLibrary.batchToolbar.enable", "Enable")
 					}),
-					pendingDelete ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-						type: "button",
-						onClick: handleDeleteConfirm,
-						className: cn("inline-flex items-center h-6 px-2.5 rounded-md border text-[10.5px] font-medium transition-colors", "border-red-500/50 bg-red-500/10 text-red-400 hover:bg-red-500/20"),
-						children: t("uiLibrary.batchToolbar.confirmDelete", "Confirm delete {{count}}?", { count })
-					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-						type: "button",
-						onClick: handleDeleteCancel,
-						className: cn("inline-flex items-center h-6 px-2.5 rounded-md border text-[10.5px] font-medium transition-colors", "border-border bg-surface text-foreground-subtle hover:text-foreground hover:bg-surface"),
-						children: t("uiLibrary.batchToolbar.cancel", "Cancel")
-					})] }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 						type: "button",
-						onClick: handleDeleteFirst,
-						className: cn("inline-flex items-center h-6 px-2.5 rounded-md border text-[10.5px] font-medium transition-colors", "border-red-500/40 bg-red-500/10 text-red-400 hover:bg-red-500/20"),
+						onClick: () => void handleDelete(),
+						className: cn("inline-flex items-center h-6 px-2.5 rounded-md border text-[10.5px] font-medium transition-colors", "border-danger/40 bg-danger/10 text-danger hover:bg-danger/20"),
 						children: t("uiLibrary.batchToolbar.delete", "Delete")
 					}),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 						type: "button",
-						onClick: handleClear,
+						onClick: onClear,
 						className: cn("inline-flex items-center h-6 px-2.5 rounded-md border text-[10.5px] font-medium transition-colors", "border-border bg-surface text-foreground-subtle hover:text-foreground hover:bg-surface"),
 						children: t("uiLibrary.batchToolbar.clear", "Clear")
 					})
@@ -70966,7 +70951,7 @@ var MotionZonesSettings = (0, react$1.lazy)(() => Promise.resolve().then(() => r
 /** Lazy-wrapped `SceneMonitorEditor` — code-split off the main bundle for the
 *  same reason: it mounts `MaskShapeCanvas`, which chains react-konva. Render
 *  inside `<Suspense>`; the admin-ui `/scenes` dialog is its only caller. */
-var SceneMonitorEditor = (0, react$1.lazy)(() => Promise.resolve().then(() => require("./SceneMonitorEditor-D_jkzQ2o.cjs")).then((m) => ({ default: m.SceneMonitorEditor })));
+var SceneMonitorEditor = (0, react$1.lazy)(() => Promise.resolve().then(() => require("./SceneMonitorEditor-C-way4ES.cjs")).then((m) => ({ default: m.SceneMonitorEditor })));
 /** Lazy-wrapped `PrivacyMaskSettings` — code-split off the main bundle. */
 var PrivacyMaskSettings = (0, react$1.lazy)(() => Promise.resolve().then(() => require("./PrivacyMaskSettings-BUWvVF_n.cjs")).then((m) => ({ default: m.PrivacyMaskSettings })));
 //#endregion
@@ -72095,6 +72080,7 @@ exports.useClusterTopology = useClusterTopology;
 exports.useColorGetStatus = useColorGetStatus;
 exports.useColorSetColor = useColorSetColor;
 exports.useConfirm = useConfirm;
+exports.useConfirm$1 = useConfirm;
 exports.useConnectionTestDescribeTest = useConnectionTestDescribeTest;
 exports.useConnectionTestTestSettings = useConnectionTestTestSettings;
 exports.useConnectivityGetStatus = useConnectivityGetStatus;

package/dist/index.js

@@ -56542,7 +56542,7 @@ function PrimaryChildPicker({ childrenList, selectedId, onSetPrimary, disabled,
 //#region src/composites/device-list/batch-toolbar.tsx
 function DeviceBatchToolbar({ selectedIds, onClear, remove, disable, enable }) {
 	const t = useUiText();
-	const [pendingDelete, setPendingDelete] = useState(false);
+	const confirm = useConfirm();
 	if (selectedIds.size === 0) return null;
 	const ids = [...selectedIds];
 	const count = ids.length;
@@ -56554,19 +56554,14 @@ function DeviceBatchToolbar({ selectedIds, onClear, remove, disable, enable }) {
 		for (const id of ids) enable({ deviceId: id });
 		onClear();
 	};
-	const handleDeleteFirst = () => {
-		setPendingDelete(true);
-	};
-	const handleDeleteConfirm = () => {
+	const handleDelete = async () => {
+		if (!await confirm({
+			title: t("uiLibrary.batchToolbar.deleteTitle", "Delete {{count}} devices?", { count }),
+			message: t("uiLibrary.batchToolbar.deleteMessage", "{{count}} selected devices will be deleted. This cannot be undone.", { count }),
+			confirmLabel: t("uiLibrary.batchToolbar.delete", "Delete"),
+			variant: "danger"
+		})) return;
 		for (const id of ids) remove({ deviceId: id });
-		setPendingDelete(false);
-		onClear();
-	};
-	const handleDeleteCancel = () => {
-		setPendingDelete(false);
-	};
-	const handleClear = () => {
-		setPendingDelete(false);
 		onClear();
 	};
 	return /* @__PURE__ */ jsxs("div", {
@@ -56595,25 +56590,15 @@ function DeviceBatchToolbar({ selectedIds, onClear, remove, disable, enable }) {
 						className: cn("inline-flex items-center h-6 px-2.5 rounded-md border text-[10.5px] font-medium transition-colors", "border-border bg-surface text-foreground-subtle hover:text-foreground hover:bg-surface"),
 						children: t("uiLibrary.batchToolbar.enable", "Enable")
 					}),
-					pendingDelete ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("button", {
-						type: "button",
-						onClick: handleDeleteConfirm,
-						className: cn("inline-flex items-center h-6 px-2.5 rounded-md border text-[10.5px] font-medium transition-colors", "border-red-500/50 bg-red-500/10 text-red-400 hover:bg-red-500/20"),
-						children: t("uiLibrary.batchToolbar.confirmDelete", "Confirm delete {{count}}?", { count })
-					}), /* @__PURE__ */ jsx("button", {
-						type: "button",
-						onClick: handleDeleteCancel,
-						className: cn("inline-flex items-center h-6 px-2.5 rounded-md border text-[10.5px] font-medium transition-colors", "border-border bg-surface text-foreground-subtle hover:text-foreground hover:bg-surface"),
-						children: t("uiLibrary.batchToolbar.cancel", "Cancel")
-					})] }) : /* @__PURE__ */ jsx("button", {
+					/* @__PURE__ */ jsx("button", {
 						type: "button",
-						onClick: handleDeleteFirst,
-						className: cn("inline-flex items-center h-6 px-2.5 rounded-md border text-[10.5px] font-medium transition-colors", "border-red-500/40 bg-red-500/10 text-red-400 hover:bg-red-500/20"),
+						onClick: () => void handleDelete(),
+						className: cn("inline-flex items-center h-6 px-2.5 rounded-md border text-[10.5px] font-medium transition-colors", "border-danger/40 bg-danger/10 text-danger hover:bg-danger/20"),
 						children: t("uiLibrary.batchToolbar.delete", "Delete")
 					}),
 					/* @__PURE__ */ jsx("button", {
 						type: "button",
-						onClick: handleClear,
+						onClick: onClear,
 						className: cn("inline-flex items-center h-6 px-2.5 rounded-md border text-[10.5px] font-medium transition-colors", "border-border bg-surface text-foreground-subtle hover:text-foreground hover:bg-surface"),
 						children: t("uiLibrary.batchToolbar.clear", "Clear")
 					})
@@ -70942,7 +70927,7 @@ var MotionZonesSettings = lazy(() => import("./MotionZonesSettings-BCU2NW7w.js")
 /** Lazy-wrapped `SceneMonitorEditor` — code-split off the main bundle for the
 *  same reason: it mounts `MaskShapeCanvas`, which chains react-konva. Render
 *  inside `<Suspense>`; the admin-ui `/scenes` dialog is its only caller. */
-var SceneMonitorEditor = lazy(() => import("./SceneMonitorEditor-5N2xqurW.js").then((m) => ({ default: m.SceneMonitorEditor })));
+var SceneMonitorEditor = lazy(() => import("./SceneMonitorEditor-BgqJYVdM.js").then((m) => ({ default: m.SceneMonitorEditor })));
 /** Lazy-wrapped `PrivacyMaskSettings` — code-split off the main bundle. */
 var PrivacyMaskSettings = lazy(() => import("./PrivacyMaskSettings-VntwpB1u.js").then((m) => ({ default: m.PrivacyMaskSettings })));
 //#endregion

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@camstack/ui-library",
-  "version": "1.2.335",
+  "version": "1.2.337",
   "repository": {
     "type": "git",
     "url": "https://github.com/camstack/server.git",
@@ -40,7 +40,9 @@
   "files": [
     "dist",
     "src/tailwind",
-    "assets"
+    "assets",
+    "README.md",
+    "CHANGELOG.md"
   ],
   "scripts": {
     "build": "vite build && npx tsx ../../scripts/emit-isolated-dts.ts --root . --src src --out dist",