@camstack/ui-library 1.2.173 → 1.2.175

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.cjs CHANGED
@@ -2045,6 +2045,30 @@ var Gauge = createLucideIcon("gauge", [["path", {
2045
2045
  * This source code is licensed under the ISC license.
2046
2046
  * See the LICENSE file in the root directory of this source tree.
2047
2047
  */
2048
+ var Grid2x2 = createLucideIcon("grid-2x2", [
2049
+ ["path", {
2050
+ d: "M12 3v18",
2051
+ key: "108xh3"
2052
+ }],
2053
+ ["path", {
2054
+ d: "M3 12h18",
2055
+ key: "1i2n21"
2056
+ }],
2057
+ ["rect", {
2058
+ x: "3",
2059
+ y: "3",
2060
+ width: "18",
2061
+ height: "18",
2062
+ rx: "2",
2063
+ key: "h1oib"
2064
+ }]
2065
+ ]);
2066
+ /**
2067
+ * @license lucide-react v0.576.0 - ISC
2068
+ *
2069
+ * This source code is licensed under the ISC license.
2070
+ * See the LICENSE file in the root directory of this source tree.
2071
+ */
2048
2072
  var GripHorizontal = createLucideIcon("grip-horizontal", [
2049
2073
  ["circle", {
2050
2074
  cx: "12",
@@ -6599,6 +6623,12 @@ var usePtzGoHome = trpc.ptz.goHome.useMutation;
6599
6623
  var usePtzGetHomePreset = trpc.ptz.getHomePreset.useQuery;
6600
6624
  /** Generated alias around `trpc.ptz.setHomePreset.useMutation`. */
6601
6625
  var usePtzSetHomePreset = trpc.ptz.setHomePreset.useMutation;
6626
+ /** Generated alias around `trpc.ptz.captureHomeHere.useMutation`. */
6627
+ var usePtzCaptureHomeHere = trpc.ptz.captureHomeHere.useMutation;
6628
+ /** Generated alias around `trpc.ptz.getHomeReturn.useQuery`. */
6629
+ var usePtzGetHomeReturn = trpc.ptz.getHomeReturn.useQuery;
6630
+ /** Generated alias around `trpc.ptz.setHomeReturn.useMutation`. */
6631
+ var usePtzSetHomeReturn = trpc.ptz.setHomeReturn.useMutation;
6602
6632
  /** Generated alias around `trpc.ptz.getPosition.useQuery`. */
6603
6633
  var usePtzGetPosition = trpc.ptz.getPosition.useQuery;
6604
6634
  /** Generated alias around `trpc.ptz.setAutofocus.useMutation`. */
@@ -16231,6 +16261,611 @@ function AutotrackSection({ deviceId }) {
16231
16261
  });
16232
16262
  }
16233
16263
  //#endregion
16264
+ //#region src/hooks/use-devices.ts
16265
+ /**
16266
+ * useDevices / useDevice — reactive sync-mirror reads.
16267
+ *
16268
+ * Both hooks hand out `DeviceProxy` references straight out of the
16269
+ * `System` mirror. The mirror keeps device + binding caches warm via
16270
+ * the `device.registered/unregistered/bindings-changed` event stream,
16271
+ * so re-renders are driven by lifecycle pushes — no React Query
16272
+ * round-trip and no `refetch` plumbing needed at the caller side.
16273
+ *
16274
+ * The hooks defensively read once on mount and assume the System has
16275
+ * been `init()`ed by the host app — calls before the warm-boot
16276
+ * completes simply return an empty array / null and re-render once
16277
+ * the registered listeners fire.
16278
+ */
16279
+ /**
16280
+ * Reactive list of devices matching the optional filter set. Returns a
16281
+ * stable array reference between updates so consumers passing it as a
16282
+ * prop don't tear down memoized children.
16283
+ */
16284
+ function useDevices(filters) {
16285
+ const system = useSystem();
16286
+ const filtersKey = (0, react$1.useMemo)(() => filters ? JSON.stringify(filters) : "", [filters]);
16287
+ const [devices, setDevices] = (0, react$1.useState)(() => system.listDevices(filters));
16288
+ (0, react$1.useEffect)(() => {
16289
+ const refresh = () => {
16290
+ setDevices(system.listDevices(filters));
16291
+ };
16292
+ refresh();
16293
+ let unsubAdded = null;
16294
+ let unsubRemoved = null;
16295
+ try {
16296
+ unsubAdded = system.onDeviceAdded(refresh);
16297
+ unsubRemoved = system.onDeviceRemoved(refresh);
16298
+ } catch {}
16299
+ const unsubConn = system.subscribeConnectionEvents((state) => {
16300
+ if (state === "connected") refresh();
16301
+ });
16302
+ return () => {
16303
+ unsubAdded?.();
16304
+ unsubRemoved?.();
16305
+ unsubConn();
16306
+ };
16307
+ }, [
16308
+ system,
16309
+ filters,
16310
+ filtersKey
16311
+ ]);
16312
+ return devices;
16313
+ }
16314
+ /**
16315
+ * Single-device variant. Returns `null` until the device is in the
16316
+ * mirror; re-renders when the device is removed (back to `null`) or
16317
+ * added.
16318
+ */
16319
+ function useDevice(deviceId) {
16320
+ const system = useSystem();
16321
+ const [device, setDevice] = (0, react$1.useState)(() => deviceId === null ? null : system.getDevice(deviceId));
16322
+ (0, react$1.useEffect)(() => {
16323
+ if (deviceId === null) {
16324
+ setDevice(null);
16325
+ return;
16326
+ }
16327
+ const refresh = () => {
16328
+ setDevice(system.getDevice(deviceId));
16329
+ };
16330
+ refresh();
16331
+ let unsubAdded = null;
16332
+ let unsubRemoved = null;
16333
+ try {
16334
+ unsubAdded = system.onDeviceAdded(refresh);
16335
+ unsubRemoved = system.onDeviceRemoved(refresh);
16336
+ } catch {}
16337
+ const unsubConn = system.subscribeConnectionEvents((state) => {
16338
+ if (state === "connected") refresh();
16339
+ });
16340
+ return () => {
16341
+ unsubAdded?.();
16342
+ unsubRemoved?.();
16343
+ unsubConn();
16344
+ };
16345
+ }, [system, deviceId]);
16346
+ return device;
16347
+ }
16348
+ //#endregion
16349
+ //#region src/hooks/use-device-snapshot.ts
16350
+ /**
16351
+ * useDeviceSnapshotImage — a device's snapshot as a plain image URL.
16352
+ *
16353
+ * ## What this used to do, and why it stopped
16354
+ *
16355
+ * It fetched `dev.snapshot.getSnapshot()` over tRPC and returned
16356
+ * `data:image/jpeg;base64,…`. That put a full camera capture — up to 4 K,
16357
+ * measured at 758 KB average per camera on the live hub — through the msgpack
16358
+ * WebSocket plane, base64-inflated by a third, and then held it in the
16359
+ * react-query heap for 24 h per device. The device list rendered it into a
16360
+ * **28 × 28 px `<img>`**.
16361
+ *
16362
+ * It also did not do what it appeared to do. `snapshot.getSnapshot` scoped to a
16363
+ * device routes to the NATIVE provider, not the snapshot wrapper, so it bypassed
16364
+ * the wrapper's cache, coalescing and stale-while-revalidate entirely: probed
16365
+ * live, a `force:true` call returned a fresh 1.05 MB JPEG in 0.55 s while the
16366
+ * wrapper's `lastCapturedAt` for that camera did not move. Two snapshot paths,
16367
+ * different behaviour, and only one of them maintained the cache the other one
16368
+ * reported on.
16369
+ *
16370
+ * ## What it does now
16371
+ *
16372
+ * Returns the same URL the viewer uses: `/addon/snapshot/media/<id>.jpg?w=<n>`,
16373
+ * served by the wrapper over the HTTP data plane. Relative and same-origin, so
16374
+ * the admin UI's `camstack_session` cookie authenticates it — the endpoint is
16375
+ * `access: 'authenticated'`, which accepts either a Bearer header or that
16376
+ * cookie, and a bare `<img>` can only send the cookie. This is the same
16377
+ * mechanism the native `<video>` fallback in `hls-video.tsx` already relies on.
16378
+ *
16379
+ * Caching is now the browser's, which is the point: `ETag` +
16380
+ * `Cache-Control: private, max-age=<device maxAgeS>` means a repeat render is a
16381
+ * cache hit and a revalidation is a 0-byte 304. No JS heap, no msgpack, no
16382
+ * base64. Nothing to configure — unlike `expo-image` on native, browsers
16383
+ * revalidate a stale URL rather than treating it as immutable, so the URL stays
16384
+ * stable and does NOT need a version parameter.
16385
+ */
16386
+ /** The hub-proxied path prefix for the snapshot image data plane, composed
16387
+ * below on `baseUrl` or, for the same-origin case, on the page's mount. */
16388
+ var SNAPSHOT_MEDIA_PATH = "/addon/snapshot/media";
16389
+ function useDeviceSnapshotImage(deviceId, options = {}) {
16390
+ const { width, baseUrl } = options;
16391
+ const [refreshNonce, setRefreshNonce] = (0, react$1.useState)(0);
16392
+ return {
16393
+ src: (0, react$1.useMemo)(() => {
16394
+ if (deviceId === null || deviceId <= 0) return null;
16395
+ const base = baseUrl !== void 0 ? baseUrl.replace(/\/+$/, "") : routerBasename();
16396
+ const params = new URLSearchParams();
16397
+ if (width !== void 0 && Number.isInteger(width) && width > 0) params.set("w", String(width));
16398
+ if (refreshNonce > 0) {
16399
+ params.set("force", "1");
16400
+ params.set("r", String(refreshNonce));
16401
+ }
16402
+ const query = params.toString();
16403
+ return `${base}${SNAPSHOT_MEDIA_PATH}/${String(deviceId)}.jpg${query.length > 0 ? `?${query}` : ""}`;
16404
+ }, [
16405
+ deviceId,
16406
+ width,
16407
+ baseUrl,
16408
+ refreshNonce
16409
+ ]),
16410
+ loading: false,
16411
+ refresh: (0, react$1.useCallback)(() => {
16412
+ setRefreshNonce((n) => n + 1);
16413
+ }, [])
16414
+ };
16415
+ }
16416
+ //#endregion
16417
+ //#region src/composites/cap-settings/camera-grid-layout.ts
16418
+ /** Smallest rectangle the editor will produce — ffmpeg refuses a zero-area crop. */
16419
+ var MIN_EXTENT = .02;
16420
+ function isRecord(value) {
16421
+ return value !== null && typeof value === "object" && !Array.isArray(value);
16422
+ }
16423
+ function readRect(value) {
16424
+ if (!isRecord(value)) return null;
16425
+ const { x, y, width, height } = value;
16426
+ if (typeof x !== "number" || typeof y !== "number" || typeof width !== "number" || typeof height !== "number") return null;
16427
+ if (x < 0 || y < 0 || width <= 0 || height <= 0) return null;
16428
+ if (x + width > 1 || y + height > 1) return null;
16429
+ return {
16430
+ x,
16431
+ y,
16432
+ width,
16433
+ height
16434
+ };
16435
+ }
16436
+ function readCell(value) {
16437
+ if (!isRecord(value)) return null;
16438
+ const deviceId = value["deviceId"];
16439
+ if (typeof deviceId !== "number" || !Number.isInteger(deviceId)) return null;
16440
+ const source = readRect(value["source"]);
16441
+ const cell = readRect(value["cell"]);
16442
+ if (source === null || cell === null) return null;
16443
+ return {
16444
+ deviceId,
16445
+ source,
16446
+ cell
16447
+ };
16448
+ }
16449
+ /** Parse the `getGridForDevice` reply. See {@link GridLayoutReadOutcome}. */
16450
+ function parseGridView(raw) {
16451
+ if (!isRecord(raw) || !("grid" in raw)) return "unreadable";
16452
+ const grid = raw["grid"];
16453
+ if (grid === null) return null;
16454
+ if (!isRecord(grid)) return "unreadable";
16455
+ const { instanceId, deviceId, name, width, height, fps, cells } = grid;
16456
+ if (typeof instanceId !== "string" || typeof deviceId !== "number" || typeof name !== "string" || typeof width !== "number" || typeof height !== "number" || typeof fps !== "number" || !Array.isArray(cells)) return "unreadable";
16457
+ const parsed = [];
16458
+ for (const entry of cells) {
16459
+ const cell = readCell(entry);
16460
+ if (cell === null) return "unreadable";
16461
+ parsed.push(cell);
16462
+ }
16463
+ return {
16464
+ instanceId,
16465
+ deviceId,
16466
+ name,
16467
+ width,
16468
+ height,
16469
+ fps,
16470
+ cells: parsed
16471
+ };
16472
+ }
16473
+ /**
16474
+ * Keep a rectangle inside the unit square.
16475
+ *
16476
+ * The addon THROWS on a rectangle that falls outside — a silently clipped
16477
+ * picture is worse than a refusal — so the editor must never hand it one.
16478
+ */
16479
+ function clampNormalizedRect(rect) {
16480
+ const width = Math.min(1, Math.max(MIN_EXTENT, rect.width));
16481
+ const height = Math.min(1, Math.max(MIN_EXTENT, rect.height));
16482
+ return {
16483
+ x: Math.min(1 - width, Math.max(0, rect.x)),
16484
+ y: Math.min(1 - height, Math.max(0, rect.y)),
16485
+ width,
16486
+ height
16487
+ };
16488
+ }
16489
+ /** Drag: translate by a normalized delta, clamped. */
16490
+ function moveNormalizedRect(rect, dx, dy) {
16491
+ return clampNormalizedRect({
16492
+ ...rect,
16493
+ x: rect.x + dx,
16494
+ y: rect.y + dy
16495
+ });
16496
+ }
16497
+ /** Resize from the bottom-right corner: the origin stays put. */
16498
+ function resizeNormalizedRect(rect, dw, dh) {
16499
+ return clampNormalizedRect({
16500
+ ...rect,
16501
+ width: rect.width + dw,
16502
+ height: rect.height + dh
16503
+ });
16504
+ }
16505
+ //#endregion
16506
+ //#region src/composites/cap-settings/CameraGridLayoutEditor.tsx
16507
+ /**
16508
+ * The camera-grid layout editor.
16509
+ *
16510
+ * A grid's geometry is the one thing a DERIVED settings form cannot express: a
16511
+ * generated form renders "cell 1 source = 592, cell 1 crop x = 0.25, cell 1 crop
16512
+ * width = 0.5…" and nobody can hold a picture in their head from that. So the
16513
+ * geometry gets a widget — the canvas, drawn at the grid's own aspect ratio,
16514
+ * with the cells on it — while the knobs that ARE ordinary fields (the name,
16515
+ * the canvas size, the frame rate) sit beside it in the same panel.
16516
+ *
16517
+ * Every rectangle in here is NORMALIZED [0,1], on both sides: the crop taken
16518
+ * out of a source, and the cell it lands in. That is how the addon stores them
16519
+ * (a source camera can change resolution, and a stored pixel rectangle would
16520
+ * quietly start cutting the wrong region), so the editor speaks the same
16521
+ * language rather than converting at the boundary.
16522
+ *
16523
+ * The preview is the source cameras' own snapshots, positioned by CSS from the
16524
+ * SAME normalized numbers that will become the ffmpeg `crop`/`overlay`. It costs
16525
+ * the server nothing and it is wrong in exactly the ways the real composition
16526
+ * would be wrong.
16527
+ */
16528
+ var ADDON_ID = "camera-grid";
16529
+ var FULL_FRAME = {
16530
+ x: 0,
16531
+ y: 0,
16532
+ width: 1,
16533
+ height: 1
16534
+ };
16535
+ var MAX_CELLS = 16;
16536
+ /** Hoisted so `useDevices` does not re-subscribe on every render. */
16537
+ var CAMERA_FILTER = { type: _camstack_types.DeviceType.Camera };
16538
+ function CameraGridLayoutEditor({ deviceId }) {
16539
+ const system = useSystem();
16540
+ const cameras = (0, react$1.useMemo)(() => system.listDeviceInfos(CAMERA_FILTER), [system, useDevices(CAMERA_FILTER)]);
16541
+ const [loaded, setLoaded] = (0, react$1.useState)(void 0);
16542
+ const [draft, setDraft] = (0, react$1.useState)(null);
16543
+ const [saving, setSaving] = (0, react$1.useState)(false);
16544
+ const [saveError, setSaveError] = (0, react$1.useState)(null);
16545
+ const [selected, setSelected] = (0, react$1.useState)(0);
16546
+ const [drag, setDrag] = (0, react$1.useState)(null);
16547
+ const reload = (0, react$1.useCallback)(async () => {
16548
+ const outcome = parseGridView(await system.trpcClient.addons.custom.mutate({
16549
+ addonId: ADDON_ID,
16550
+ action: "getGridForDevice",
16551
+ input: { deviceId }
16552
+ }));
16553
+ setLoaded(outcome);
16554
+ setDraft(outcome === null || outcome === "unreadable" ? null : outcome);
16555
+ }, [system, deviceId]);
16556
+ (0, react$1.useEffect)(() => {
16557
+ reload().catch(() => {
16558
+ setLoaded("unreadable");
16559
+ });
16560
+ }, [reload]);
16561
+ const save = (0, react$1.useCallback)(async () => {
16562
+ if (draft === null) return;
16563
+ setSaving(true);
16564
+ setSaveError(null);
16565
+ try {
16566
+ const outcome = parseGridView(await system.trpcClient.addons.custom.mutate({
16567
+ addonId: ADDON_ID,
16568
+ action: "saveGridLayout",
16569
+ input: {
16570
+ deviceId,
16571
+ name: draft.name,
16572
+ width: draft.width,
16573
+ height: draft.height,
16574
+ fps: draft.fps,
16575
+ cells: draft.cells.map((cell) => ({ ...cell }))
16576
+ }
16577
+ }));
16578
+ if (outcome !== null && outcome !== "unreadable") {
16579
+ setLoaded(outcome);
16580
+ setDraft(outcome);
16581
+ }
16582
+ } catch (error) {
16583
+ setSaveError(error instanceof Error ? error.message : String(error));
16584
+ } finally {
16585
+ setSaving(false);
16586
+ }
16587
+ }, [
16588
+ system,
16589
+ deviceId,
16590
+ draft
16591
+ ]);
16592
+ const patchCell = (0, react$1.useCallback)((index, patch) => {
16593
+ setDraft((prev) => prev === null ? prev : {
16594
+ ...prev,
16595
+ cells: prev.cells.map((cell, i) => i === index ? {
16596
+ ...cell,
16597
+ ...patch
16598
+ } : cell)
16599
+ });
16600
+ }, []);
16601
+ const canvasAspect = (0, react$1.useMemo)(() => draft === null ? 16 / 9 : draft.width / draft.height, [draft]);
16602
+ if (loaded === void 0) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(WidgetPanel, {
16603
+ title: "Grid layout",
16604
+ icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Grid2x2, { className: "h-3.5 w-3.5" }),
16605
+ children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
16606
+ className: "flex items-center gap-2 text-[10.5px] text-foreground-subtle",
16607
+ children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(LoaderCircle, { className: "h-3 w-3 animate-spin" }), " Loading the layout…"]
16608
+ })
16609
+ });
16610
+ if (loaded === "unreadable") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(WidgetPanel, {
16611
+ title: "Grid layout",
16612
+ icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Grid2x2, { className: "h-3.5 w-3.5" }),
16613
+ children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
16614
+ className: "flex items-center gap-2 text-[10.5px] text-danger",
16615
+ children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(CircleAlert, { className: "h-3 w-3" }), "The Camera Grids addon did not answer, so this layout is unknown — not empty."]
16616
+ })
16617
+ });
16618
+ if (loaded === null || draft === null) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(WidgetPanel, {
16619
+ title: "Grid layout",
16620
+ icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Grid2x2, { className: "h-3.5 w-3.5" }),
16621
+ children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
16622
+ className: "text-[10.5px] text-foreground-subtle",
16623
+ children: "This camera is not a grid."
16624
+ })
16625
+ });
16626
+ const onPointerMove = (event) => {
16627
+ if (drag === null) return;
16628
+ const bounds = event.currentTarget.getBoundingClientRect();
16629
+ if (bounds.width === 0 || bounds.height === 0) return;
16630
+ const dx = (event.clientX - drag.startX) / bounds.width;
16631
+ const dy = (event.clientY - drag.startY) / bounds.height;
16632
+ patchCell(drag.index, { cell: drag.mode === "move" ? moveNormalizedRect(drag.origin, dx, dy) : resizeNormalizedRect(drag.origin, dx, dy) });
16633
+ };
16634
+ return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(WidgetPanel, {
16635
+ title: "Grid layout",
16636
+ icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Grid2x2, { className: "h-3.5 w-3.5" }),
16637
+ headerRight: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
16638
+ type: "button",
16639
+ disabled: saving,
16640
+ onClick: () => void save(),
16641
+ className: "flex items-center gap-1 rounded border border-border px-2 py-0.5 text-[10px] uppercase",
16642
+ children: [saving ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LoaderCircle, { className: "h-3 w-3 animate-spin" }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Save, { className: "h-3 w-3" }), "Save"]
16643
+ }),
16644
+ children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
16645
+ className: "flex flex-col gap-3",
16646
+ children: [
16647
+ saveError !== null && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
16648
+ className: "flex items-center gap-2 text-[10.5px] text-danger",
16649
+ children: [
16650
+ /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CircleAlert, { className: "h-3 w-3" }),
16651
+ " ",
16652
+ saveError
16653
+ ]
16654
+ }),
16655
+ /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
16656
+ className: "relative w-full select-none overflow-hidden rounded border border-border bg-black",
16657
+ style: { aspectRatio: String(canvasAspect) },
16658
+ onPointerMove,
16659
+ onPointerUp: () => {
16660
+ setDrag(null);
16661
+ },
16662
+ onPointerLeave: () => {
16663
+ setDrag(null);
16664
+ },
16665
+ children: [draft.cells.map((cell, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(GridCellBox, {
16666
+ cell,
16667
+ selected: index === selected,
16668
+ onSelect: () => {
16669
+ setSelected(index);
16670
+ },
16671
+ onDragStart: (mode, event) => {
16672
+ setSelected(index);
16673
+ setDrag({
16674
+ index,
16675
+ mode,
16676
+ startX: event.clientX,
16677
+ startY: event.clientY,
16678
+ origin: cell.cell
16679
+ });
16680
+ }
16681
+ }, `${String(cell.deviceId)}-${String(index)}`)), draft.cells.length === 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
16682
+ className: "absolute inset-0 flex items-center justify-center text-[10.5px] text-foreground-subtle",
16683
+ children: "No cells yet — add one below."
16684
+ })]
16685
+ }),
16686
+ /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
16687
+ className: "grid grid-cols-4 gap-2 text-[10.5px]",
16688
+ children: [
16689
+ /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LabelledNumber, {
16690
+ label: "Width",
16691
+ value: draft.width,
16692
+ onChange: (width) => {
16693
+ setDraft({
16694
+ ...draft,
16695
+ width
16696
+ });
16697
+ }
16698
+ }),
16699
+ /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LabelledNumber, {
16700
+ label: "Height",
16701
+ value: draft.height,
16702
+ onChange: (height) => {
16703
+ setDraft({
16704
+ ...draft,
16705
+ height
16706
+ });
16707
+ }
16708
+ }),
16709
+ /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LabelledNumber, {
16710
+ label: "FPS",
16711
+ value: draft.fps,
16712
+ onChange: (fps) => {
16713
+ setDraft({
16714
+ ...draft,
16715
+ fps
16716
+ });
16717
+ }
16718
+ }),
16719
+ /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
16720
+ type: "button",
16721
+ disabled: draft.cells.length >= MAX_CELLS,
16722
+ onClick: () => {
16723
+ const first = cameras.find((camera) => camera.id !== deviceId);
16724
+ if (!first) return;
16725
+ setDraft({
16726
+ ...draft,
16727
+ cells: [...draft.cells, {
16728
+ deviceId: first.id,
16729
+ source: FULL_FRAME,
16730
+ cell: clampNormalizedRect({
16731
+ x: .1,
16732
+ y: .1,
16733
+ width: .4,
16734
+ height: .4
16735
+ })
16736
+ }]
16737
+ });
16738
+ setSelected(draft.cells.length);
16739
+ },
16740
+ className: "flex items-center justify-center gap-1 self-end rounded border border-border px-2 py-1 uppercase",
16741
+ children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Plus, { className: "h-3 w-3" }), " Cell"]
16742
+ })
16743
+ ]
16744
+ }),
16745
+ draft.cells[selected] !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CellInspector, {
16746
+ cell: draft.cells[selected],
16747
+ index: selected,
16748
+ cameras: cameras.filter((camera) => camera.id !== deviceId),
16749
+ onChange: (patch) => {
16750
+ patchCell(selected, patch);
16751
+ },
16752
+ onRemove: () => {
16753
+ setDraft({
16754
+ ...draft,
16755
+ cells: draft.cells.filter((_, i) => i !== selected)
16756
+ });
16757
+ setSelected(0);
16758
+ }
16759
+ })
16760
+ ]
16761
+ })
16762
+ });
16763
+ }
16764
+ function GridCellBox({ cell, selected, onSelect, onDragStart }) {
16765
+ const { src } = useDeviceSnapshotImage(cell.deviceId, { width: 640 });
16766
+ const backgroundSize = `${String(100 / cell.source.width)}% ${String(100 / cell.source.height)}%`;
16767
+ const backgroundPosition = cell.source.width >= 1 && cell.source.height >= 1 ? "center" : `${String(cell.source.x / Math.max(1e-6, 1 - cell.source.width) * 100)}% ${String(cell.source.y / Math.max(1e-6, 1 - cell.source.height) * 100)}%`;
16768
+ return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
16769
+ role: "presentation",
16770
+ onPointerDown: (event) => {
16771
+ onSelect();
16772
+ onDragStart("move", event);
16773
+ },
16774
+ className: `absolute cursor-move border ${selected ? "border-accent" : "border-border/60"}`,
16775
+ style: {
16776
+ left: `${String(cell.cell.x * 100)}%`,
16777
+ top: `${String(cell.cell.y * 100)}%`,
16778
+ width: `${String(cell.cell.width * 100)}%`,
16779
+ height: `${String(cell.cell.height * 100)}%`,
16780
+ backgroundImage: src === null ? void 0 : `url(${src})`,
16781
+ backgroundSize,
16782
+ backgroundPosition,
16783
+ backgroundRepeat: "no-repeat"
16784
+ },
16785
+ children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
16786
+ role: "presentation",
16787
+ onPointerDown: (event) => {
16788
+ event.stopPropagation();
16789
+ onDragStart("resize", event);
16790
+ },
16791
+ className: "absolute -bottom-1 -right-1 h-2.5 w-2.5 cursor-se-resize bg-accent"
16792
+ })
16793
+ });
16794
+ }
16795
+ function CellInspector({ cell, index, cameras, onChange, onRemove }) {
16796
+ return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
16797
+ className: "flex flex-col gap-2 rounded border border-border p-2 text-[10.5px]",
16798
+ children: [
16799
+ /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
16800
+ className: "flex items-center justify-between",
16801
+ children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
16802
+ className: "uppercase text-foreground-subtle",
16803
+ children: ["Cell ", index + 1]
16804
+ }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
16805
+ type: "button",
16806
+ onClick: onRemove,
16807
+ className: "text-danger",
16808
+ children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Trash2, { className: "h-3 w-3" })
16809
+ })]
16810
+ }),
16811
+ /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
16812
+ className: "flex items-center gap-2",
16813
+ children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
16814
+ className: "w-16 text-foreground-subtle",
16815
+ children: "Source"
16816
+ }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("select", {
16817
+ value: String(cell.deviceId),
16818
+ onChange: (event) => {
16819
+ onChange({ deviceId: Number(event.target.value) });
16820
+ },
16821
+ className: "flex-1 rounded border border-border bg-transparent px-1 py-0.5",
16822
+ children: cameras.map((camera) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
16823
+ value: String(camera.id),
16824
+ children: camera.name
16825
+ }, camera.id))
16826
+ })]
16827
+ }),
16828
+ /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
16829
+ className: "grid grid-cols-4 gap-2",
16830
+ children: [
16831
+ "x",
16832
+ "y",
16833
+ "width",
16834
+ "height"
16835
+ ].map((key) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LabelledNumber, {
16836
+ label: `Crop ${key}`,
16837
+ value: Math.round(cell.source[key] * 100) / 100,
16838
+ step: .01,
16839
+ onChange: (next) => {
16840
+ onChange({ source: clampNormalizedRect({
16841
+ ...cell.source,
16842
+ [key]: next
16843
+ }) });
16844
+ }
16845
+ }, key))
16846
+ })
16847
+ ]
16848
+ });
16849
+ }
16850
+ function LabelledNumber({ label, value, step = 1, onChange }) {
16851
+ return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
16852
+ className: "flex flex-col gap-0.5",
16853
+ children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
16854
+ className: "text-foreground-subtle",
16855
+ children: label
16856
+ }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
16857
+ type: "number",
16858
+ step,
16859
+ value,
16860
+ onChange: (event) => {
16861
+ const next = Number(event.target.value);
16862
+ if (Number.isFinite(next)) onChange(next);
16863
+ },
16864
+ className: "rounded border border-border bg-transparent px-1 py-0.5"
16865
+ })]
16866
+ });
16867
+ }
16868
+ //#endregion
16234
16869
  //#region src/hooks/use-device-proxy.ts
16235
16870
  /**
16236
16871
  * useDeviceProxy — canonical React entry point for a device.
@@ -17003,6 +17638,7 @@ function usePTZ(trpc, deviceId, hookOptions) {
17003
17638
  const ptz = useDeviceProxy(trpc, enabled ? deviceId : null)?.ptz;
17004
17639
  const [presets, setPresets] = (0, react$1.useState)([]);
17005
17640
  const [homePreset, setHomePresetState] = (0, react$1.useState)(null);
17641
+ const [homeReturn, setHomeReturnState] = (0, react$1.useState)(null);
17006
17642
  const [options, setOptions] = (0, react$1.useState)(null);
17007
17643
  const [busy, setBusy] = (0, react$1.useState)(false);
17008
17644
  const [error, setError] = (0, react$1.useState)(null);
@@ -17024,6 +17660,15 @@ function usePTZ(trpc, deviceId, hookOptions) {
17024
17660
  setError(err instanceof Error ? err.message : String(err));
17025
17661
  }
17026
17662
  }, [ptz, enabled]);
17663
+ const refreshHomeReturn = (0, react$1.useCallback)(async () => {
17664
+ if (!enabled || !ptz) return;
17665
+ try {
17666
+ setHomeReturnState(await ptz.getHomeReturn({}));
17667
+ } catch (err) {
17668
+ if (isAbsentProvider(err)) return;
17669
+ setHomeReturnState(null);
17670
+ }
17671
+ }, [ptz, enabled]);
17027
17672
  const refreshOptions = (0, react$1.useCallback)(async () => {
17028
17673
  if (!enabled || !ptz) return;
17029
17674
  try {
@@ -17037,10 +17682,12 @@ function usePTZ(trpc, deviceId, hookOptions) {
17037
17682
  refreshPresets();
17038
17683
  refreshOptions();
17039
17684
  refreshHomePreset();
17685
+ refreshHomeReturn();
17040
17686
  }, [
17041
17687
  refreshPresets,
17042
17688
  refreshOptions,
17043
- refreshHomePreset
17689
+ refreshHomePreset,
17690
+ refreshHomeReturn
17044
17691
  ]);
17045
17692
  const wrap = (0, react$1.useCallback)(async (fn) => {
17046
17693
  if (!enabled || !ptz) return void 0;
@@ -17125,6 +17772,28 @@ function usePTZ(trpc, deviceId, hookOptions) {
17125
17772
  wrap,
17126
17773
  refreshHomePreset
17127
17774
  ]),
17775
+ captureHomeHere: (0, react$1.useCallback)(async () => {
17776
+ if (!ptz) return;
17777
+ await wrap(() => ptz.captureHomeHere({}));
17778
+ await refreshHomePreset();
17779
+ }, [
17780
+ ptz,
17781
+ wrap,
17782
+ refreshHomePreset
17783
+ ]),
17784
+ homeReturn,
17785
+ setHomeReturn: (0, react$1.useCallback)(async (enabled, seconds) => {
17786
+ if (!ptz) return;
17787
+ await wrap(() => ptz.setHomeReturn({
17788
+ enabled,
17789
+ seconds
17790
+ }));
17791
+ await refreshHomeReturn();
17792
+ }, [
17793
+ ptz,
17794
+ wrap,
17795
+ refreshHomeReturn
17796
+ ]),
17128
17797
  goToPreset: (0, react$1.useCallback)(async (presetId) => {
17129
17798
  if (!ptz) return;
17130
17799
  await wrap(() => ptz.goToPreset({ presetId }));
@@ -17186,58 +17855,116 @@ function usePTZ(trpc, deviceId, hookOptions) {
17186
17855
  //#endregion
17187
17856
  //#region src/composites/cap-settings/HomePresetPicker.tsx
17188
17857
  /**
17189
- * Which preset `ptz.goHome` targets on this camera.
17858
+ * Where "Home" sends this camera, and how it is set.
17190
17859
  *
17191
- * This exists because the vendor "convention" was wrong on every camera of
17192
- * this fleet. Three providers each hardcoded a slot — reolink 0, hikvision
17193
- * '1', amcrest 1 — and measured on 2026-09-17 those slots held "stanza",
17194
- * "Credenza" and "Preset1": the operator's own presets, not a home. Two of the
17195
- * three swallowed the failure, so a head that never moved looked exactly like a
17196
- * head that went home.
17860
+ * ## Why this exists at all
17197
17861
  *
17198
- * Four things can be true, and the picker renders each differently:
17862
+ * The vendor "convention" was wrong on every camera of this fleet. Three
17863
+ * providers each hardcoded a slot — reolink 0, hikvision '1', amcrest 1 — and
17864
+ * measured on 2026-09-17 those slots held "stanza", "Credenza" and "Preset1":
17865
+ * the operator's own presets, not a home. Two of the three swallowed the
17866
+ * failure, so a head that never moved looked exactly like one that went home.
17199
17867
  *
17200
- * `native` — the camera homes WITHOUT a preset (ONVIF moves to the PTZ
17201
- * origin). Nothing to pick, so no control is shown.
17202
- * `firmware` — the camera named a preset `fn: 'home'` itself (Hikvision's
17203
- * "Back to origin"). Preselected, and the operator may override.
17868
+ * ## The mistake this component made first
17869
+ *
17870
+ * Its first version rendered NOTHING for `source: 'native'`, with a comment
17871
+ * saying "the camera homes natively; there is no preset to choose". That is
17872
+ * true for ONVIF, whose home is the fixed PTZ origin. It was written hours
17873
+ * before we learned that Reolink's native home is a GUARD POINT — a stored
17874
+ * position, settable, with its own idle-return timer — so the control was
17875
+ * hidden from the one vendor that most needed it. A comment that is right about
17876
+ * one case and read as covering all of them is exactly the leftover that reads
17877
+ * as verification.
17878
+ *
17879
+ * ## What each state offers now
17880
+ *
17881
+ * `native` — no preset to pick, but "Set home here" and, where the camera
17882
+ * has one, the idle-return delay.
17883
+ * `firmware` — the camera named its own home (Hikvision's "Back to origin").
17884
+ * Preselected; the operator may override.
17204
17885
  * `operator` — pinned here.
17205
- * `none` — `goHome` REFUSES. Said out loud, because a disabled feature
17206
- * must never look like a broken one.
17886
+ * `none` — Home REFUSES, and the UI says so. A disabled feature must
17887
+ * never look like a broken one (D62).
17207
17888
  */
17889
+ var SELECT_CLASS$2 = "rounded-md border border-border bg-surface px-2 py-1 text-[11px] text-foreground focus:border-primary focus:outline-none disabled:opacity-50";
17208
17890
  function HomePresetPicker({ controls }) {
17209
- const { homePreset, presets, setHomePreset, busy } = controls;
17891
+ const { homePreset, presets, setHomePreset, captureHomeHere, homeReturn, setHomeReturn, busy } = controls;
17210
17892
  const [saving, setSaving] = (0, react$1.useState)(false);
17211
17893
  if (homePreset === null) return null;
17212
- if (homePreset.source === "native") return null;
17213
- const value = homePreset.presetId ?? "";
17214
- return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
17215
- className: "flex flex-col gap-1 px-2 pt-2",
17894
+ const disabled = busy || saving;
17895
+ const run = (action) => {
17896
+ setSaving(true);
17897
+ action().finally(() => setSaving(false));
17898
+ };
17899
+ const explanation = homePreset.source === "native" ? "This camera stores its own home position. “Set home here” pins it to where the camera is pointing now." : homePreset.source === "firmware" ? "Taken from the camera, which names this preset as its home." : homePreset.source === "none" ? "Nothing is set, so Home refuses rather than moving to an arbitrary preset." : "Pinned here. Clear it to fall back to the camera’s own home.";
17900
+ return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
17901
+ className: "flex flex-col gap-2 px-2 pt-2",
17216
17902
  children: [
17217
- /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
17218
- className: "text-[10px] font-medium text-foreground-subtle",
17219
- children: "Home preset"
17903
+ homePreset.source !== "native" && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
17904
+ className: "flex flex-col gap-1",
17905
+ children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
17906
+ className: "text-[10px] font-medium text-foreground-subtle",
17907
+ children: "Home preset"
17908
+ }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("select", {
17909
+ value: homePreset.presetId ?? "",
17910
+ disabled,
17911
+ onChange: (e) => {
17912
+ const next = e.target.value === "" ? null : e.target.value;
17913
+ run(() => setHomePreset(next));
17914
+ },
17915
+ className: SELECT_CLASS$2,
17916
+ children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
17917
+ value: "",
17918
+ children: "Not set — Home is refused"
17919
+ }), presets.map((preset) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("option", {
17920
+ value: preset.id,
17921
+ children: [preset.name || preset.id, preset.fn === "home" ? " (camera’s own home)" : ""]
17922
+ }, preset.id))]
17923
+ })]
17220
17924
  }),
17221
- /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("select", {
17222
- value,
17223
- disabled: busy || saving,
17224
- onChange: (e) => {
17225
- const next = e.target.value === "" ? null : e.target.value;
17226
- setSaving(true);
17227
- setHomePreset(next).finally(() => setSaving(false));
17228
- },
17229
- className: "rounded-md border border-border bg-surface px-2 py-1 text-[11px] text-foreground focus:border-primary focus:outline-none disabled:opacity-50",
17230
- children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
17231
- value: "",
17232
- children: "Not set — Home is refused"
17233
- }), presets.map((preset) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("option", {
17234
- value: preset.id,
17235
- children: [preset.name || preset.id, preset.fn === "home" ? " (camera’s own home)" : ""]
17236
- }, preset.id))]
17925
+ /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
17926
+ type: "button",
17927
+ disabled,
17928
+ onClick: () => run(() => captureHomeHere()),
17929
+ className: "self-start rounded-md border border-border px-2 py-1 text-[11px] text-foreground hover:bg-primary/10 disabled:opacity-50",
17930
+ children: "Set home here"
17931
+ }),
17932
+ homeReturn !== null && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
17933
+ className: "flex flex-col gap-1",
17934
+ children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
17935
+ className: "flex items-center gap-2",
17936
+ children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
17937
+ type: "checkbox",
17938
+ checked: homeReturn.enabled,
17939
+ disabled,
17940
+ onChange: (e) => run(() => setHomeReturn(e.target.checked, homeReturn.seconds))
17941
+ }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
17942
+ className: "text-[10px] font-medium text-foreground-subtle",
17943
+ children: "Return home when idle"
17944
+ })]
17945
+ }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
17946
+ className: "flex flex-col gap-1",
17947
+ children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
17948
+ className: "text-[10px] font-medium text-foreground-subtle",
17949
+ children: "After (s)"
17950
+ }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
17951
+ type: "number",
17952
+ min: 0,
17953
+ max: 3600,
17954
+ defaultValue: homeReturn.seconds,
17955
+ disabled,
17956
+ onBlur: (e) => {
17957
+ const next = Number(e.target.value);
17958
+ if (!Number.isFinite(next) || Math.round(next) === homeReturn.seconds) return;
17959
+ run(() => setHomeReturn(homeReturn.enabled, Math.round(next)));
17960
+ },
17961
+ className: SELECT_CLASS$2
17962
+ })]
17963
+ })]
17237
17964
  }),
17238
17965
  /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
17239
17966
  className: "text-[10px] text-foreground-subtle",
17240
- children: homePreset.source === "firmware" ? "Taken from the camera, which names this preset as its home." : homePreset.source === "none" ? "Nothing is set, so Home refuses rather than moving to an arbitrary preset." : "Pinned here. Clear it to fall back to the camera’s own home."
17967
+ children: explanation
17241
17968
  })
17242
17969
  ]
17243
17970
  });
@@ -19806,13 +20533,14 @@ function RecordingPanel({ deviceId }) {
19806
20533
  * `type:'widget'` ConfigField. `WidgetSlot` resolves these BEFORE the
19807
20534
  * Module-Federation `WidgetRegistry`. ids are namespaced `host/<name>`. */
19808
20535
  var HOST_WIDGETS = {
19809
- "host/motion-zones-grid": (0, react$1.lazy)(() => Promise.resolve().then(() => require("./MotionZonesSettings-BP9p0pFB.cjs")).then((m) => ({ default: m.MotionZonesSettings }))),
20536
+ "host/motion-zones-grid": (0, react$1.lazy)(() => Promise.resolve().then(() => require("./MotionZonesSettings-BK9R9NIr.cjs")).then((m) => ({ default: m.MotionZonesSettings }))),
19810
20537
  "host/privacy-mask-grid": (0, react$1.lazy)(() => Promise.resolve().then(() => require("./PrivacyMaskSettings-DfZAFg32.cjs")).then((m) => ({ default: m.PrivacyMaskSettings }))),
19811
20538
  "host/ptz-panel": PtzPanel,
19812
20539
  "host/navigation-panel": NavigationPanel,
19813
20540
  "host/consumables-panel": ConsumablesPanel,
19814
20541
  "host/ptz-autotrack": AutotrackSection,
19815
- "host/recording-panel": RecordingPanel
20542
+ "host/recording-panel": RecordingPanel,
20543
+ "host/camera-grid-layout": CameraGridLayoutEditor
19816
20544
  };
19817
20545
  //#endregion
19818
20546
  //#region src/composites/widget-slot.tsx
@@ -43262,74 +43990,6 @@ function useDeviceNetworkLink(trpc, deviceId) {
43262
43990
  return useDeviceState(trpc, deviceId, (s) => s.networkLink) ?? null;
43263
43991
  }
43264
43992
  //#endregion
43265
- //#region src/hooks/use-device-snapshot.ts
43266
- /**
43267
- * useDeviceSnapshotImage — a device's snapshot as a plain image URL.
43268
- *
43269
- * ## What this used to do, and why it stopped
43270
- *
43271
- * It fetched `dev.snapshot.getSnapshot()` over tRPC and returned
43272
- * `data:image/jpeg;base64,…`. That put a full camera capture — up to 4 K,
43273
- * measured at 758 KB average per camera on the live hub — through the msgpack
43274
- * WebSocket plane, base64-inflated by a third, and then held it in the
43275
- * react-query heap for 24 h per device. The device list rendered it into a
43276
- * **28 × 28 px `<img>`**.
43277
- *
43278
- * It also did not do what it appeared to do. `snapshot.getSnapshot` scoped to a
43279
- * device routes to the NATIVE provider, not the snapshot wrapper, so it bypassed
43280
- * the wrapper's cache, coalescing and stale-while-revalidate entirely: probed
43281
- * live, a `force:true` call returned a fresh 1.05 MB JPEG in 0.55 s while the
43282
- * wrapper's `lastCapturedAt` for that camera did not move. Two snapshot paths,
43283
- * different behaviour, and only one of them maintained the cache the other one
43284
- * reported on.
43285
- *
43286
- * ## What it does now
43287
- *
43288
- * Returns the same URL the viewer uses: `/addon/snapshot/media/<id>.jpg?w=<n>`,
43289
- * served by the wrapper over the HTTP data plane. Relative and same-origin, so
43290
- * the admin UI's `camstack_session` cookie authenticates it — the endpoint is
43291
- * `access: 'authenticated'`, which accepts either a Bearer header or that
43292
- * cookie, and a bare `<img>` can only send the cookie. This is the same
43293
- * mechanism the native `<video>` fallback in `hls-video.tsx` already relies on.
43294
- *
43295
- * Caching is now the browser's, which is the point: `ETag` +
43296
- * `Cache-Control: private, max-age=<device maxAgeS>` means a repeat render is a
43297
- * cache hit and a revalidation is a 0-byte 304. No JS heap, no msgpack, no
43298
- * base64. Nothing to configure — unlike `expo-image` on native, browsers
43299
- * revalidate a stale URL rather than treating it as immutable, so the URL stays
43300
- * stable and does NOT need a version parameter.
43301
- */
43302
- /** The hub-proxied path prefix for the snapshot image data plane, composed
43303
- * below on `baseUrl` or, for the same-origin case, on the page's mount. */
43304
- var SNAPSHOT_MEDIA_PATH = "/addon/snapshot/media";
43305
- function useDeviceSnapshotImage(deviceId, options = {}) {
43306
- const { width, baseUrl } = options;
43307
- const [refreshNonce, setRefreshNonce] = (0, react$1.useState)(0);
43308
- return {
43309
- src: (0, react$1.useMemo)(() => {
43310
- if (deviceId === null || deviceId <= 0) return null;
43311
- const base = baseUrl !== void 0 ? baseUrl.replace(/\/+$/, "") : routerBasename();
43312
- const params = new URLSearchParams();
43313
- if (width !== void 0 && Number.isInteger(width) && width > 0) params.set("w", String(width));
43314
- if (refreshNonce > 0) {
43315
- params.set("force", "1");
43316
- params.set("r", String(refreshNonce));
43317
- }
43318
- const query = params.toString();
43319
- return `${base}${SNAPSHOT_MEDIA_PATH}/${String(deviceId)}.jpg${query.length > 0 ? `?${query}` : ""}`;
43320
- }, [
43321
- deviceId,
43322
- width,
43323
- baseUrl,
43324
- refreshNonce
43325
- ]),
43326
- loading: false,
43327
- refresh: (0, react$1.useCallback)(() => {
43328
- setRefreshNonce((n) => n + 1);
43329
- }, [])
43330
- };
43331
- }
43332
- //#endregion
43333
43993
  //#region src/composites/hover-zoom-image.tsx
43334
43994
  /**
43335
43995
  * <HoverZoomImage> — a small thumbnail that expands into a floating
@@ -50466,91 +51126,6 @@ function useDeviceWebrtc(trpc, deviceId, pollIntervalMs = 5e3) {
50466
51126
  };
50467
51127
  }
50468
51128
  //#endregion
50469
- //#region src/hooks/use-devices.ts
50470
- /**
50471
- * useDevices / useDevice — reactive sync-mirror reads.
50472
- *
50473
- * Both hooks hand out `DeviceProxy` references straight out of the
50474
- * `System` mirror. The mirror keeps device + binding caches warm via
50475
- * the `device.registered/unregistered/bindings-changed` event stream,
50476
- * so re-renders are driven by lifecycle pushes — no React Query
50477
- * round-trip and no `refetch` plumbing needed at the caller side.
50478
- *
50479
- * The hooks defensively read once on mount and assume the System has
50480
- * been `init()`ed by the host app — calls before the warm-boot
50481
- * completes simply return an empty array / null and re-render once
50482
- * the registered listeners fire.
50483
- */
50484
- /**
50485
- * Reactive list of devices matching the optional filter set. Returns a
50486
- * stable array reference between updates so consumers passing it as a
50487
- * prop don't tear down memoized children.
50488
- */
50489
- function useDevices(filters) {
50490
- const system = useSystem();
50491
- const filtersKey = (0, react$1.useMemo)(() => filters ? JSON.stringify(filters) : "", [filters]);
50492
- const [devices, setDevices] = (0, react$1.useState)(() => system.listDevices(filters));
50493
- (0, react$1.useEffect)(() => {
50494
- const refresh = () => {
50495
- setDevices(system.listDevices(filters));
50496
- };
50497
- refresh();
50498
- let unsubAdded = null;
50499
- let unsubRemoved = null;
50500
- try {
50501
- unsubAdded = system.onDeviceAdded(refresh);
50502
- unsubRemoved = system.onDeviceRemoved(refresh);
50503
- } catch {}
50504
- const unsubConn = system.subscribeConnectionEvents((state) => {
50505
- if (state === "connected") refresh();
50506
- });
50507
- return () => {
50508
- unsubAdded?.();
50509
- unsubRemoved?.();
50510
- unsubConn();
50511
- };
50512
- }, [
50513
- system,
50514
- filters,
50515
- filtersKey
50516
- ]);
50517
- return devices;
50518
- }
50519
- /**
50520
- * Single-device variant. Returns `null` until the device is in the
50521
- * mirror; re-renders when the device is removed (back to `null`) or
50522
- * added.
50523
- */
50524
- function useDevice(deviceId) {
50525
- const system = useSystem();
50526
- const [device, setDevice] = (0, react$1.useState)(() => deviceId === null ? null : system.getDevice(deviceId));
50527
- (0, react$1.useEffect)(() => {
50528
- if (deviceId === null) {
50529
- setDevice(null);
50530
- return;
50531
- }
50532
- const refresh = () => {
50533
- setDevice(system.getDevice(deviceId));
50534
- };
50535
- refresh();
50536
- let unsubAdded = null;
50537
- let unsubRemoved = null;
50538
- try {
50539
- unsubAdded = system.onDeviceAdded(refresh);
50540
- unsubRemoved = system.onDeviceRemoved(refresh);
50541
- } catch {}
50542
- const unsubConn = system.subscribeConnectionEvents((state) => {
50543
- if (state === "connected") refresh();
50544
- });
50545
- return () => {
50546
- unsubAdded?.();
50547
- unsubRemoved?.();
50548
- unsubConn();
50549
- };
50550
- }, [system, deviceId]);
50551
- return device;
50552
- }
50553
- //#endregion
50554
51129
  //#region src/hooks/use-doorbell-events.ts
50555
51130
  /**
50556
51131
  * useDoorbellEvents — subscribe to doorbell.onPressed across the cluster.
@@ -50815,7 +51390,7 @@ function mirror(input) {
50815
51390
  * Render inside `<Suspense>` at all call sites. */
50816
51391
  var MaskShapeCanvas = (0, react$1.lazy)(() => Promise.resolve().then(() => require("./MaskShapeCanvas-BByN3jvt.cjs")).then((m) => ({ default: m.MaskShapeCanvas })));
50817
51392
  /** Lazy-wrapped `MotionZonesSettings` — code-split off the main bundle. */
50818
- var MotionZonesSettings = (0, react$1.lazy)(() => Promise.resolve().then(() => require("./MotionZonesSettings-BP9p0pFB.cjs")).then((m) => ({ default: m.MotionZonesSettings })));
51393
+ var MotionZonesSettings = (0, react$1.lazy)(() => Promise.resolve().then(() => require("./MotionZonesSettings-BK9R9NIr.cjs")).then((m) => ({ default: m.MotionZonesSettings })));
50819
51394
  /** Lazy-wrapped `SceneMonitorEditor` — code-split off the main bundle for the
50820
51395
  * same reason: it mounts `MaskShapeCanvas`, which chains react-konva. Render
50821
51396
  * inside `<Suspense>`; the admin-ui `/scenes` dialog is its only caller. */
@@ -50946,6 +51521,7 @@ exports.FormField = FormField$1;
50946
51521
  exports.GRID_GAP = GRID_GAP;
50947
51522
  exports.GRID_PAIRED = GRID_PAIRED;
50948
51523
  exports.GRID_QUICK_STATS = GRID_QUICK_STATS;
51524
+ exports.Grid2x2 = Grid2x2;
50949
51525
  exports.GripTrack = GripTrack;
50950
51526
  exports.GroupedModelSelector = GroupedModelSelector;
50951
51527
  exports.HOST_WIDGETS = HOST_WIDGETS;
@@ -52025,9 +52601,11 @@ exports.usePtzAutotrackGetSettings = usePtzAutotrackGetSettings;
52025
52601
  exports.usePtzAutotrackGetStatus = usePtzAutotrackGetStatus;
52026
52602
  exports.usePtzAutotrackSetEnabled = usePtzAutotrackSetEnabled;
52027
52603
  exports.usePtzAutotrackSetSettings = usePtzAutotrackSetSettings;
52604
+ exports.usePtzCaptureHomeHere = usePtzCaptureHomeHere;
52028
52605
  exports.usePtzContinuousMove = usePtzContinuousMove;
52029
52606
  exports.usePtzDeletePreset = usePtzDeletePreset;
52030
52607
  exports.usePtzGetHomePreset = usePtzGetHomePreset;
52608
+ exports.usePtzGetHomeReturn = usePtzGetHomeReturn;
52031
52609
  exports.usePtzGetOptions = usePtzGetOptions;
52032
52610
  exports.usePtzGetPosition = usePtzGetPosition;
52033
52611
  exports.usePtzGetPresets = usePtzGetPresets;
@@ -52038,6 +52616,7 @@ exports.usePtzMove = usePtzMove;
52038
52616
  exports.usePtzSavePreset = usePtzSavePreset;
52039
52617
  exports.usePtzSetAutofocus = usePtzSetAutofocus;
52040
52618
  exports.usePtzSetHomePreset = usePtzSetHomePreset;
52619
+ exports.usePtzSetHomeReturn = usePtzSetHomeReturn;
52041
52620
  exports.usePtzStop = usePtzStop;
52042
52621
  exports.useRebootReboot = useRebootReboot;
52043
52622
  exports.useRecordedPlayback = useRecordedPlayback;