@seamapi/react 0.17.0 → 0.18.0

package/README.md

@@ -66,6 +66,29 @@ Load the font from Google Fonts by placing the following in the `<head>` tag:
 
 [Source Sans Pro]: https://fonts.google.com/specimen/Source+Sans+Pro
 
+### Content Security Policy (CSP)
+
+By self hosting the recommended fonts (or choosing not to use them),
+and proxying the Seam API endpoint, the components are compatible with this strict CSP:
+
+```
+default-src 'self'; img-src 'self' https://connect.getseam.com
+```
+
+The `img-src` is required as some components display device images from the Seam API.
+
+When using the default endpoint, include `connect-src` with
+
+```
+connect-src 'self' https://connect.getseam.com
+```
+
+When serving the fonts from Google Fonts, include `font-src` and `style-src` with
+
+```
+font-src 'self' https://fonts.gstatic.com; style-src 'self' https://fonts.googleapis.com
+```
+
 ## Development and Testing
 
 ### Quickstart

package/lib/seam/access-codes/use-access-code.d.ts

@@ -2,7 +2,3 @@ import type { AccessCode, AccessCodeGetRequest } from 'seamapi';
 export type UseAccessCodeParams = AccessCodeGetRequest | string;
 export type UseAccessCodeData = AccessCode;
 export declare function useAccessCode(params: UseAccessCodeParams): import("@tanstack/react-query").UseQueryResult<AccessCode | null, unknown>;
-export declare function useFakeAccessCode(_params: UseAccessCodeParams): {
-    isLoading: boolean;
-    data: AccessCode;
-};

package/lib/seam/access-codes/use-access-code.js

@@ -1,6 +1,4 @@
 import { useQuery } from '@tanstack/react-query';
-import { DateTime } from 'luxon';
-import { v4 as uuid } from 'uuid';
 import { useSeamClient } from '../../../lib/seam/use-seam-client.js';
 export function useAccessCode(params) {
     const { client } = useSeamClient();
@@ -15,18 +13,4 @@ export function useAccessCode(params) {
         },
     });
 }
-export function useFakeAccessCode(_params) {
-    const accessCode = {
-        access_code_id: uuid(),
-        type: 'time_bound',
-        starts_at: DateTime.now().minus({ days: 2 }).toISO() ?? '',
-        ends_at: DateTime.now().plus({ days: 1 }).toISO() ?? '',
-        code: '1234',
-        created_at: DateTime.now().toISO() ?? '',
-        device_id: 'some_device_id',
-        status: 'set',
-        name: 'Guest - Kranz',
-    };
-    return { isLoading: false, data: accessCode };
-}
 //# sourceMappingURL=use-access-code.js.map

package/lib/seam/access-codes/use-access-code.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-access-code.js","sourceRoot":"","sources":["../../../src/lib/seam/access-codes/use-access-code.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAEhC,OAAO,EAAE,EAAE,IAAI,IAAI,EAAE,MAAM,MAAM,CAAA;AAEjC,OAAO,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAA;AAK3D,MAAM,UAAU,aAAa,CAAC,MAA2B;IACvD,MAAM,EAAE,MAAM,EAAE,GAAG,aAAa,EAAE,CAAA;IAElC,MAAM,gBAAgB,GACpB,OAAO,MAAM,KAAK,QAAQ,CAAC,CAAC,CAAC,EAAE,cAAc,EAAE,MAAM,EAAE,CAAC,CAAC,CAAC,MAAM,CAAA;IAElE,OAAO,QAAQ,CAAC;QACd,OAAO,EAAE,MAAM,IAAI,IAAI;QACvB,QAAQ,EAAE,CAAC,aAAa,EAAE,KAAK,EAAE,gBAAgB,CAAC;QAClD,OAAO,EAAE,KAAK,IAAI,EAAE;YAClB,IAAI,MAAM,IAAI,IAAI;gBAAE,OAAO,IAAI,CAAA;YAE/B,OAAO,MAAM,MAAM,EAAE,WAAW,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAA;QACxD,CAAC;KACF,CAAC,CAAA;AACJ,CAAC;AAED,MAAM,UAAU,iBAAiB,CAAC,OAA4B;IAI5D,MAAM,UAAU,GAAe;QAC7B,cAAc,EAAE,IAAI,EAAE;QACtB,IAAI,EAAE,YAAY;QAClB,SAAS,EAAE,QAAQ,CAAC,GAAG,EAAE,CAAC,KAAK,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,CAAC,CAAC,KAAK,EAAE,IAAI,EAAE;QAC1D,OAAO,EAAE,QAAQ,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,CAAC,CAAC,KAAK,EAAE,IAAI,EAAE;QACvD,IAAI,EAAE,MAAM;QACZ,UAAU,EAAE,QAAQ,CAAC,GAAG,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE;QACxC,SAAS,EAAE,gBAAgB;QAC3B,MAAM,EAAE,KAAK;QACb,IAAI,EAAE,eAAe;KACtB,CAAA;IAED,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,EAAE,UAAU,EAAE,CAAA;AAC/C,CAAC"}
+{"version":3,"file":"use-access-code.js","sourceRoot":"","sources":["../../../src/lib/seam/access-codes/use-access-code.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAGhD,OAAO,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAA;AAK3D,MAAM,UAAU,aAAa,CAAC,MAA2B;IACvD,MAAM,EAAE,MAAM,EAAE,GAAG,aAAa,EAAE,CAAA;IAElC,MAAM,gBAAgB,GACpB,OAAO,MAAM,KAAK,QAAQ,CAAC,CAAC,CAAC,EAAE,cAAc,EAAE,MAAM,EAAE,CAAC,CAAC,CAAC,MAAM,CAAA;IAElE,OAAO,QAAQ,CAAC;QACd,OAAO,EAAE,MAAM,IAAI,IAAI;QACvB,QAAQ,EAAE,CAAC,aAAa,EAAE,KAAK,EAAE,gBAAgB,CAAC;QAClD,OAAO,EAAE,KAAK,IAAI,EAAE;YAClB,IAAI,MAAM,IAAI,IAAI;gBAAE,OAAO,IAAI,CAAA;YAE/B,OAAO,MAAM,MAAM,EAAE,WAAW,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAA;QACxD,CAAC;KACF,CAAC,CAAA;AACJ,CAAC"}

package/lib/ui/AccessCodeDetails/AccessCodeDetails.d.ts

@@ -1,4 +1,6 @@
+import type { AccessCode } from 'seamapi';
 export interface AccessCodeDetailsProps {
-    accessCodeId: string;
+    accessCode: AccessCode;
+    onBack?: () => void;
 }
-export default function AccessCodeDetails({ accessCodeId, }: AccessCodeDetailsProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function AccessCodeDetails({ accessCode, onBack, }: AccessCodeDetailsProps): import("react/jsx-runtime").JSX.Element;

package/lib/ui/AccessCodeDetails/AccessCodeDetails.js

@@ -1,17 +1,18 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { DateTime } from 'luxon';
-import { useFakeAccessCode } from '../../../lib/index.js';
-import AccessCodeDevice from '../../../lib/ui/AccessCodeDetails/AccessCodeDevice.js';
+import { useState } from 'react';
+import { AccessCodeDevice } from '../../../lib/ui/AccessCodeDetails/AccessCodeDevice.js';
+import { DeviceDetails } from '../../../lib/ui/DeviceDetails/DeviceDetails.js';
 import { ContentHeader } from '../../../lib/ui/layout/ContentHeader.js';
-export default function AccessCodeDetails({ accessCodeId, }) {
-    const { isLoading, data: accessCode } = useFakeAccessCode({
-        access_code_id: accessCodeId,
-    });
-    if (isLoading || !accessCode) {
-        return null;
-    }
+export function AccessCodeDetails({ accessCode, onBack, }) {
     const name = accessCode.name ?? t.fallbackName;
-    return (_jsxs("div", { className: 'seam-access-code-details', children: [_jsx(ContentHeader, { title: 'Access code' }), _jsxs("div", { className: 'seam-summary', children: [_jsxs("div", { className: 'seam-top', children: [_jsx("span", { className: 'seam-label', children: t.accessCode }), _jsx("h5", { className: 'seam-access-code-name', children: name }), _jsx("div", { className: 'seam-code', children: accessCode.code }), _jsx("div", { className: 'seam-duration', children: _jsx(Duration, { accessCode: accessCode }) })] }), _jsx(AccessCodeDevice, { deviceId: accessCode.device_id })] }), _jsxs("div", { className: 'seam-details', children: [_jsxs("div", { className: 'seam-row', children: [_jsxs("div", { className: 'seam-heading', children: [t.id, ":"] }), _jsx("div", { className: 'seam-content', children: accessCode.access_code_id })] }), _jsxs("div", { className: 'seam-row', children: [_jsxs("div", { className: 'seam-heading', children: [t.created, ":"] }), _jsx("div", { className: 'seam-content', children: formatDate(accessCode.created_at) })] }), _jsxs("div", { className: 'seam-row seam-schedule', children: [_jsxs("div", { className: 'seam-heading', children: [t.timing, ":"] }), _jsx("div", { className: 'seam-content', children: _jsx(ScheduleInfo, { accessCode: accessCode }) })] })] })] }));
+    const [selectedDevice, selectDevice] = useState(null);
+    if (selectedDevice) {
+        return (_jsx(DeviceDetails, { device: selectedDevice, onBack: () => {
+                selectDevice(null);
+            } }));
+    }
+    return (_jsxs("div", { className: 'seam-access-code-details', children: [_jsx(ContentHeader, { title: 'Access code', onBack: onBack }), _jsxs("div", { className: 'seam-summary', children: [_jsxs("div", { className: 'seam-top', children: [_jsx("span", { className: 'seam-label', children: t.accessCode }), _jsx("h5", { className: 'seam-access-code-name', children: name }), _jsx("div", { className: 'seam-code', children: accessCode.code }), _jsx("div", { className: 'seam-duration', children: _jsx(Duration, { accessCode: accessCode }) })] }), _jsx(AccessCodeDevice, { deviceId: accessCode.device_id, onSelectDevice: selectDevice })] }), _jsxs("div", { className: 'seam-details', children: [_jsxs("div", { className: 'seam-row', children: [_jsxs("div", { className: 'seam-heading', children: [t.id, ":"] }), _jsx("div", { className: 'seam-content', children: accessCode.access_code_id })] }), _jsxs("div", { className: 'seam-row', children: [_jsxs("div", { className: 'seam-heading', children: [t.created, ":"] }), _jsx("div", { className: 'seam-content', children: formatDate(accessCode.created_at) })] }), _jsxs("div", { className: 'seam-row seam-schedule', children: [_jsxs("div", { className: 'seam-heading', children: [t.timing, ":"] }), _jsx("div", { className: 'seam-content', children: _jsx(ScheduleInfo, { accessCode: accessCode }) })] })] })] }));
 }
 function ScheduleInfo({ accessCode }) {
     if (accessCode.type === 'ongoing') {

package/lib/ui/AccessCodeDetails/AccessCodeDetails.js.map

@@ -1 +1 @@
-{"version":3,"file":"AccessCodeDetails.js","sourceRoot":"","sources":["../../../src/lib/ui/AccessCodeDetails/AccessCodeDetails.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"AccessCodeDetails.js","sourceRoot":"","sources":["../../../src/lib/ui/AccessCodeDetails/AccessCodeDetails.tsx"],"names":[],"mappings":"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"}

package/lib/ui/AccessCodeDetails/AccessCodeDevice.d.ts

@@ -1,3 +1,5 @@
-export default function AccessCodeDevice({ deviceId }: {
+import type { CommonDeviceProperties, Device } from 'seamapi';
+export declare function AccessCodeDevice({ deviceId, onSelectDevice, }: {
     deviceId: string;
+    onSelectDevice: (device: Device<CommonDeviceProperties>) => void;
 }): import("react/jsx-runtime").JSX.Element | null;

package/lib/ui/AccessCodeDetails/AccessCodeDevice.js

@@ -1,22 +1,20 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useNavigation } from '../../../lib/NavigationProvider.js';
 import { isLockDevice } from '../../../lib/seam/devices/types.js';
 import { useFakeDevice } from '../../../lib/seam/devices/use-device.js';
 import { Button } from '../../../lib/ui/Button.js';
 import { DeviceImage } from '../../../lib/ui/device/DeviceImage.js';
 import { getDeviceModel } from '../../../lib/ui/DeviceDetails/DeviceModel.js';
 import { TextButton } from '../../../lib/ui/TextButton.js';
-export default function AccessCodeDevice({ deviceId }) {
+export function AccessCodeDevice({ deviceId, onSelectDevice, }) {
     //  TODO: Replace with `useDevice()` once ready
     const { isLoading, device } = useFakeDevice({ device_id: deviceId });
-    const { show } = useNavigation();
     // TODO: Do we want to return a skeleton loader here instead?
     if (isLoading || !device || !isLockDevice(device)) {
         return null;
     }
     const model = getDeviceModel(device);
     return (_jsxs("div", { className: 'seam-access-code-device', children: [_jsx("div", { className: 'seam-device-image', children: _jsx(DeviceImage, { device: device }) }), _jsxs("div", { className: 'seam-body', children: [_jsx("div", { className: 'seam-model', children: model }), _jsx(TextButton, { onClick: () => {
-                            show({ name: 'device_detail', deviceId: device.device_id });
+                            onSelectDevice(device);
                         }, children: t.deviceDetails })] }), _jsx(Button, { children: "Unlock" })] }));
 }
 const t = {

package/lib/ui/AccessCodeDetails/AccessCodeDevice.js.map

@@ -1 +1 @@
-{"version":3,"file":"AccessCodeDevice.js","sourceRoot":"","sources":["../../../src/lib/ui/AccessCodeDetails/AccessCodeDevice.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAA;AACzD,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAA;AACxD,OAAO,EAAE,aAAa,EAAE,MAAM,gCAAgC,CAAA;AAC9D,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAA;AACzC,OAAO,EAAE,WAAW,EAAE,MAAM,8BAA8B,CAAA;AAC1D,OAAO,EAAE,cAAc,EAAE,MAAM,qCAAqC,CAAA;AACpE,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAA;AAEjD,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EAAE,QAAQ,EAAwB;IACzE,+CAA+C;IAC/C,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,GAAG,aAAa,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,CAAC,CAAA;IACpE,MAAM,EAAE,IAAI,EAAE,GAAG,aAAa,EAAE,CAAA;IAEhC,6DAA6D;IAC7D,IAAI,SAAS,IAAI,CAAC,MAAM,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,EAAE;QACjD,OAAO,IAAI,CAAA;KACZ;IAED,MAAM,KAAK,GAAG,cAAc,CAAC,MAAM,CAAC,CAAA;IAEpC,OAAO,CACL,eAAK,SAAS,EAAC,yBAAyB,aACtC,cAAK,SAAS,EAAC,mBAAmB,YAChC,KAAC,WAAW,IAAC,MAAM,EAAE,MAAM,GAAI,GAC3B,EACN,eAAK,SAAS,EAAC,WAAW,aACxB,cAAK,SAAS,EAAC,YAAY,YAAE,KAAK,GAAO,EACzC,KAAC,UAAU,IACT,OAAO,EAAE,GAAG,EAAE;4BACZ,IAAI,CAAC,EAAE,IAAI,EAAE,eAAe,EAAE,QAAQ,EAAE,MAAM,CAAC,SAAS,EAAE,CAAC,CAAA;wBAC7D,CAAC,YAEA,CAAC,CAAC,aAAa,GACL,IACT,EACN,KAAC,MAAM,yBAAgB,IACnB,CACP,CAAA;AACH,CAAC;AAED,MAAM,CAAC,GAAG;IACR,aAAa,EAAE,gBAAgB;CAChC,CAAA"}
+{"version":3,"file":"AccessCodeDevice.js","sourceRoot":"","sources":["../../../src/lib/ui/AccessCodeDetails/AccessCodeDevice.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAA;AACxD,OAAO,EAAE,aAAa,EAAE,MAAM,gCAAgC,CAAA;AAC9D,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAA;AACzC,OAAO,EAAE,WAAW,EAAE,MAAM,8BAA8B,CAAA;AAC1D,OAAO,EAAE,cAAc,EAAE,MAAM,qCAAqC,CAAA;AACpE,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAA;AAEjD,MAAM,UAAU,gBAAgB,CAAC,EAC/B,QAAQ,EACR,cAAc,GAIf;IACC,+CAA+C;IAC/C,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,GAAG,aAAa,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,CAAC,CAAA;IAEpE,6DAA6D;IAC7D,IAAI,SAAS,IAAI,CAAC,MAAM,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,EAAE;QACjD,OAAO,IAAI,CAAA;KACZ;IAED,MAAM,KAAK,GAAG,cAAc,CAAC,MAAM,CAAC,CAAA;IAEpC,OAAO,CACL,eAAK,SAAS,EAAC,yBAAyB,aACtC,cAAK,SAAS,EAAC,mBAAmB,YAChC,KAAC,WAAW,IAAC,MAAM,EAAE,MAAM,GAAI,GAC3B,EACN,eAAK,SAAS,EAAC,WAAW,aACxB,cAAK,SAAS,EAAC,YAAY,YAAE,KAAK,GAAO,EACzC,KAAC,UAAU,IACT,OAAO,EAAE,GAAG,EAAE;4BACZ,cAAc,CAAC,MAAM,CAAC,CAAA;wBACxB,CAAC,YAEA,CAAC,CAAC,aAAa,GACL,IACT,EACN,KAAC,MAAM,yBAAgB,IACnB,CACP,CAAA;AACH,CAAC;AAED,MAAM,CAAC,GAAG;IACR,aAAa,EAAE,gBAAgB;CAChC,CAAA"}

package/lib/ui/AccessCodeTable/AccessCodeTable.d.ts

@@ -1,3 +1,4 @@
 export declare function AccessCodeTable(props: {
     deviceId: string;
+    onBack?: () => void;
 }): JSX.Element;

package/lib/ui/AccessCodeTable/AccessCodeTable.js

@@ -1,7 +1,8 @@
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
 import { AccessCodeKeyIcon } from '../../../lib/icons/AccessCodeKey.js';
-import { useNavigation } from '../../../lib/NavigationProvider.js';
 import { useAccessCodes } from '../../../lib/seam/access-codes/use-access-codes.js';
+import { AccessCodeDetails } from '../../../lib/ui/AccessCodeDetails/AccessCodeDetails.js';
 import { CodeDetails } from '../../../lib/ui/AccessCodeTable/CodeDetails.js';
 import { ContentHeader } from '../../../lib/ui/layout/ContentHeader.js';
 import { TableBody } from '../../../lib/ui/Table/TableBody.js';
@@ -15,14 +16,17 @@ export function AccessCodeTable(props) {
     const { accessCodes } = useAccessCodes({
         device_id: props.deviceId,
     });
-    const { show } = useNavigation();
+    const { onBack } = props;
+    const [selectedAccessCode, selectAccessCode] = useState(null);
+    if (selectedAccessCode) {
+        return (_jsx(AccessCodeDetails, { accessCode: selectedAccessCode, onBack: () => {
+                selectAccessCode(null);
+            } }));
+    }
     if (!accessCodes)
         return _jsx(_Fragment, { children: null });
-    return (_jsxs("div", { className: 'seam-access-code-table', children: [_jsx(ContentHeader, {}), _jsx(TableHeader, { children: _jsxs(TableTitle, { children: [t.accessCodes, " ", _jsxs(Caption, { children: ["(", accessCodes.length, ")"] })] }) }), _jsx(TableBody, { children: accessCodes.map((code) => (_jsxs(TableRow, { onClick: () => {
-                        show({
-                            name: 'access_code_detail',
-                            accessCodeId: code.access_code_id,
-                        });
+    return (_jsxs("div", { className: 'seam-access-code-table', children: [_jsx(ContentHeader, { onBack: onBack }), _jsx(TableHeader, { children: _jsxs(TableTitle, { children: [t.accessCodes, " ", _jsxs(Caption, { children: ["(", accessCodes.length, ")"] })] }) }), _jsx(TableBody, { children: accessCodes.map((code) => (_jsxs(TableRow, { onClick: () => {
+                        selectAccessCode(code);
                     }, children: [_jsx(TableCell, { className: 'seam-icon-cell', children: _jsx("div", { children: _jsx(AccessCodeKeyIcon, {}) }) }), _jsxs(TableCell, { className: 'seam-name-cell', children: [_jsx(Title, { children: code.name }), _jsx(CodeDetails, { accessCode: code })] }), _jsx(TableCell, { className: 'seam-action-cell' })] }, code.access_code_id))) })] }));
 }
 const t = {

package/lib/ui/AccessCodeTable/AccessCodeTable.js.map

@@ -1 +1 @@
-{"version":3,"file":"AccessCodeTable.js","sourceRoot":"","sources":["../../../src/lib/ui/AccessCodeTable/AccessCodeTable.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAA;AAC9D,OAAO,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAA;AACzD,OAAO,EAAE,cAAc,EAAE,MAAM,2CAA2C,CAAA;AAC1E,OAAO,EAAE,WAAW,EAAE,MAAM,uCAAuC,CAAA;AACnE,OAAO,EAAE,aAAa,EAAE,MAAM,gCAAgC,CAAA;AAC9D,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAA;AACrD,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAA;AACrD,OAAO,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAA;AACzD,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAA;AACnD,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAA;AACvD,OAAO,EAAE,OAAO,EAAE,MAAM,8BAA8B,CAAA;AACtD,OAAO,EAAE,KAAK,EAAE,MAAM,4BAA4B,CAAA;AAElD,MAAM,UAAU,eAAe,CAAC,KAA2B;IACzD,MAAM,EAAE,WAAW,EAAE,GAAG,cAAc,CAAC;QACrC,SAAS,EAAE,KAAK,CAAC,QAAQ;KAC1B,CAAC,CAAA;IAEF,MAAM,EAAE,IAAI,EAAE,GAAG,aAAa,EAAE,CAAA;IAEhC,IAAI,CAAC,WAAW;QAAE,OAAO,4BAAG,IAAI,GAAI,CAAA;IAEpC,OAAO,CACL,eAAK,SAAS,EAAC,wBAAwB,aACrC,KAAC,aAAa,KAAG,EACjB,KAAC,WAAW,cACV,MAAC,UAAU,eACR,CAAC,CAAC,WAAW,OAAE,MAAC,OAAO,oBAAG,WAAW,CAAC,MAAM,SAAY,IAC9C,GACD,EACd,KAAC,SAAS,cACP,WAAW,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CACzB,MAAC,QAAQ,IAEP,OAAO,EAAE,GAAG,EAAE;wBACZ,IAAI,CAAC;4BACH,IAAI,EAAE,oBAAoB;4BAC1B,YAAY,EAAE,IAAI,CAAC,cAAc;yBAClC,CAAC,CAAA;oBACJ,CAAC,aAED,KAAC,SAAS,IAAC,SAAS,EAAC,gBAAgB,YACnC,wBACE,KAAC,iBAAiB,KAAG,GACjB,GACI,EACZ,MAAC,SAAS,IAAC,SAAS,EAAC,gBAAgB,aACnC,KAAC,KAAK,cAAE,IAAI,CAAC,IAAI,GAAS,EAC1B,KAAC,WAAW,IAAC,UAAU,EAAE,IAAI,GAAI,IACvB,EACZ,KAAC,SAAS,IAAC,SAAS,EAAC,kBAAkB,GAI3B,KArBP,IAAI,CAAC,cAAc,CAsBf,CACZ,CAAC,GACQ,IACR,CACP,CAAA;AACH,CAAC;AAED,MAAM,CAAC,GAAG;IACR,WAAW,EAAE,cAAc;CAC5B,CAAA"}
+{"version":3,"file":"AccessCodeTable.js","sourceRoot":"","sources":["../../../src/lib/ui/AccessCodeTable/AccessCodeTable.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAGhC,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAA;AAC9D,OAAO,EAAE,cAAc,EAAE,MAAM,2CAA2C,CAAA;AAC1E,OAAO,EAAE,iBAAiB,EAAE,MAAM,+CAA+C,CAAA;AACjF,OAAO,EAAE,WAAW,EAAE,MAAM,uCAAuC,CAAA;AACnE,OAAO,EAAE,aAAa,EAAE,MAAM,gCAAgC,CAAA;AAC9D,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAA;AACrD,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAA;AACrD,OAAO,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAA;AACzD,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAA;AACnD,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAA;AACvD,OAAO,EAAE,OAAO,EAAE,MAAM,8BAA8B,CAAA;AACtD,OAAO,EAAE,KAAK,EAAE,MAAM,4BAA4B,CAAA;AAElD,MAAM,UAAU,eAAe,CAAC,KAG/B;IACC,MAAM,EAAE,WAAW,EAAE,GAAG,cAAc,CAAC;QACrC,SAAS,EAAE,KAAK,CAAC,QAAQ;KAC1B,CAAC,CAAA;IACF,MAAM,EAAE,MAAM,EAAE,GAAG,KAAK,CAAA;IAExB,MAAM,CAAC,kBAAkB,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CACrD,IAAI,CACL,CAAA;IAED,IAAI,kBAAkB,EAAE;QACtB,OAAO,CACL,KAAC,iBAAiB,IAChB,UAAU,EAAE,kBAAkB,EAC9B,MAAM,EAAE,GAAG,EAAE;gBACX,gBAAgB,CAAC,IAAI,CAAC,CAAA;YACxB,CAAC,GACD,CACH,CAAA;KACF;IAED,IAAI,CAAC,WAAW;QAAE,OAAO,4BAAG,IAAI,GAAI,CAAA;IAEpC,OAAO,CACL,eAAK,SAAS,EAAC,wBAAwB,aACrC,KAAC,aAAa,IAAC,MAAM,EAAE,MAAM,GAAI,EACjC,KAAC,WAAW,cACV,MAAC,UAAU,eACR,CAAC,CAAC,WAAW,OAAE,MAAC,OAAO,oBAAG,WAAW,CAAC,MAAM,SAAY,IAC9C,GACD,EACd,KAAC,SAAS,cACP,WAAW,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CACzB,MAAC,QAAQ,IAEP,OAAO,EAAE,GAAG,EAAE;wBACZ,gBAAgB,CAAC,IAAI,CAAC,CAAA;oBACxB,CAAC,aAED,KAAC,SAAS,IAAC,SAAS,EAAC,gBAAgB,YACnC,wBACE,KAAC,iBAAiB,KAAG,GACjB,GACI,EACZ,MAAC,SAAS,IAAC,SAAS,EAAC,gBAAgB,aACnC,KAAC,KAAK,cAAE,IAAI,CAAC,IAAI,GAAS,EAC1B,KAAC,WAAW,IAAC,UAAU,EAAE,IAAI,GAAI,IACvB,EACZ,KAAC,SAAS,IAAC,SAAS,EAAC,kBAAkB,GAI3B,KAlBP,IAAI,CAAC,cAAc,CAmBf,CACZ,CAAC,GACQ,IACR,CACP,CAAA;AACH,CAAC;AAED,MAAM,CAAC,GAAG;IACR,WAAW,EAAE,cAAc;CAC5B,CAAA"}

package/lib/ui/AccessCodeTable/AccessCodeTableContent.d.ts

@@ -1,5 +1,6 @@
 import type { AccessCode } from 'seamapi';
 export interface AccessCodeTableContentProps {
     accessCodes: AccessCode[];
+    onBack?: () => void;
 }
 export declare function AccessCodeTableContent(props: AccessCodeTableContentProps): JSX.Element;

package/lib/ui/AccessCodeTable/AccessCodeTableContent.js

@@ -10,8 +10,8 @@ import { TableTitle } from '../../../lib/ui/Table/TableTitle.js';
 import { Caption } from '../../../lib/ui/typography/Caption.js';
 import { Title } from '../../../lib/ui/typography/Title.js';
 export function AccessCodeTableContent(props) {
-    const { accessCodes } = props;
-    return (_jsxs("div", { className: 'seam-access-code-table', children: [_jsx(ContentHeader, {}), _jsx(TableHeader, { children: _jsxs(TableTitle, { children: [t.accessCodes, " ", _jsxs(Caption, { children: ["(", accessCodes.length, ")"] })] }) }), _jsx(TableBody, { children: accessCodes.map((code) => (_jsxs(TableRow, { children: [_jsx(TableCell, { className: 'seam-icon-cell', children: _jsx("div", { children: _jsx(AccessCodeKeyIcon, {}) }) }), _jsxs(TableCell, { className: 'seam-name-cell', children: [_jsx(Title, { children: code.name }), _jsx(CodeDetails, { accessCode: code })] }), _jsx(TableCell, { className: 'seam-action-cell' })] }, code.access_code_id))) })] }));
+    const { accessCodes, onBack } = props;
+    return (_jsxs("div", { className: 'seam-access-code-table', children: [_jsx(ContentHeader, { onBack: onBack }), _jsx(TableHeader, { children: _jsxs(TableTitle, { children: [t.accessCodes, " ", _jsxs(Caption, { children: ["(", accessCodes.length, ")"] })] }) }), _jsx(TableBody, { children: accessCodes.map((code) => (_jsxs(TableRow, { children: [_jsx(TableCell, { className: 'seam-icon-cell', children: _jsx("div", { children: _jsx(AccessCodeKeyIcon, {}) }) }), _jsxs(TableCell, { className: 'seam-name-cell', children: [_jsx(Title, { children: code.name }), _jsx(CodeDetails, { accessCode: code })] }), _jsx(TableCell, { className: 'seam-action-cell' })] }, code.access_code_id))) })] }));
 }
 const t = {
     accessCodes: 'Access Codes',

package/lib/ui/AccessCodeTable/AccessCodeTableContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"AccessCodeTableContent.js","sourceRoot":"","sources":["../../../src/lib/ui/AccessCodeTable/AccessCodeTableContent.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAA;AAC9D,OAAO,EAAE,WAAW,EAAE,MAAM,uCAAuC,CAAA;AACnE,OAAO,EAAE,aAAa,EAAE,MAAM,gCAAgC,CAAA;AAC9D,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAA;AACrD,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAA;AACrD,OAAO,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAA;AACzD,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAA;AACnD,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAA;AACvD,OAAO,EAAE,OAAO,EAAE,MAAM,8BAA8B,CAAA;AACtD,OAAO,EAAE,KAAK,EAAE,MAAM,4BAA4B,CAAA;AAMlD,MAAM,UAAU,sBAAsB,CACpC,KAAkC;IAElC,MAAM,EAAE,WAAW,EAAE,GAAG,KAAK,CAAA;IAE7B,OAAO,CACL,eAAK,SAAS,EAAC,wBAAwB,aACrC,KAAC,aAAa,KAAG,EACjB,KAAC,WAAW,cACV,MAAC,UAAU,eACR,CAAC,CAAC,WAAW,OAAE,MAAC,OAAO,oBAAG,WAAW,CAAC,MAAM,SAAY,IAC9C,GACD,EACd,KAAC,SAAS,cACP,WAAW,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CACzB,MAAC,QAAQ,eACP,KAAC,SAAS,IAAC,SAAS,EAAC,gBAAgB,YACnC,wBACE,KAAC,iBAAiB,KAAG,GACjB,GACI,EACZ,MAAC,SAAS,IAAC,SAAS,EAAC,gBAAgB,aACnC,KAAC,KAAK,cAAE,IAAI,CAAC,IAAI,GAAS,EAC1B,KAAC,WAAW,IAAC,UAAU,EAAE,IAAI,GAAI,IACvB,EACZ,KAAC,SAAS,IAAC,SAAS,EAAC,kBAAkB,GAI3B,KAdC,IAAI,CAAC,cAAc,CAevB,CACZ,CAAC,GACQ,IACR,CACP,CAAA;AACH,CAAC;AAED,MAAM,CAAC,GAAG;IACR,WAAW,EAAE,cAAc;CAC5B,CAAA"}
+{"version":3,"file":"AccessCodeTableContent.js","sourceRoot":"","sources":["../../../src/lib/ui/AccessCodeTable/AccessCodeTableContent.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAA;AAC9D,OAAO,EAAE,WAAW,EAAE,MAAM,uCAAuC,CAAA;AACnE,OAAO,EAAE,aAAa,EAAE,MAAM,gCAAgC,CAAA;AAC9D,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAA;AACrD,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAA;AACrD,OAAO,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAA;AACzD,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAA;AACnD,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAA;AACvD,OAAO,EAAE,OAAO,EAAE,MAAM,8BAA8B,CAAA;AACtD,OAAO,EAAE,KAAK,EAAE,MAAM,4BAA4B,CAAA;AAOlD,MAAM,UAAU,sBAAsB,CACpC,KAAkC;IAElC,MAAM,EAAE,WAAW,EAAE,MAAM,EAAE,GAAG,KAAK,CAAA;IAErC,OAAO,CACL,eAAK,SAAS,EAAC,wBAAwB,aACrC,KAAC,aAAa,IAAC,MAAM,EAAE,MAAM,GAAI,EACjC,KAAC,WAAW,cACV,MAAC,UAAU,eACR,CAAC,CAAC,WAAW,OAAE,MAAC,OAAO,oBAAG,WAAW,CAAC,MAAM,SAAY,IAC9C,GACD,EACd,KAAC,SAAS,cACP,WAAW,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CACzB,MAAC,QAAQ,eACP,KAAC,SAAS,IAAC,SAAS,EAAC,gBAAgB,YACnC,wBACE,KAAC,iBAAiB,KAAG,GACjB,GACI,EACZ,MAAC,SAAS,IAAC,SAAS,EAAC,gBAAgB,aACnC,KAAC,KAAK,cAAE,IAAI,CAAC,IAAI,GAAS,EAC1B,KAAC,WAAW,IAAC,UAAU,EAAE,IAAI,GAAI,IACvB,EACZ,KAAC,SAAS,IAAC,SAAS,EAAC,kBAAkB,GAI3B,KAdC,IAAI,CAAC,cAAc,CAevB,CACZ,CAAC,GACQ,IACR,CACP,CAAA;AACH,CAAC;AAED,MAAM,CAAC,GAAG;IACR,WAAW,EAAE,cAAc;CAC5B,CAAA"}

package/lib/ui/DeviceDetails/DeviceDetails.d.ts

@@ -1,4 +1,6 @@
+import { type CommonDeviceProperties, type Device } from 'seamapi';
 export interface DeviceDetailsProps {
-    deviceId: string;
+    device: Device<CommonDeviceProperties>;
+    onBack?: () => void;
 }
 export declare function DeviceDetails(props: DeviceDetailsProps): JSX.Element | null;

package/lib/ui/DeviceDetails/DeviceDetails.js

@@ -1,37 +1,35 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import {} from 'seamapi';
 import { ChevronRightIcon } from '../../../lib/icons/ChevronRight.js';
-import { useNavigation } from '../../../lib/NavigationProvider.js';
 import { useAccessCodes } from '../../../lib/seam/access-codes/use-access-codes.js';
 import { isLockDevice } from '../../../lib/seam/devices/types.js';
-import { useFakeDevice } from '../../../lib/seam/devices/use-device.js';
+import { AccessCodeTable } from '../../../lib/ui/AccessCodeTable/AccessCodeTable.js';
 import { Button } from '../../../lib/ui/Button.js';
 import { BatteryStatus } from '../../../lib/ui/device/BatteryStatus.js';
 import { DeviceImage } from '../../../lib/ui/device/DeviceImage.js';
 import { OnlineStatus } from '../../../lib/ui/device/OnlineStatus.js';
 import { DeviceModel } from '../../../lib/ui/DeviceDetails/DeviceModel.js';
 import { ContentHeader } from '../../../lib/ui/layout/ContentHeader.js';
+import useToggle from '../../../lib/use-toggle.js';
 export function DeviceDetails(props) {
-    const { deviceId } = props;
-    const { isLoading: isLoadingDevice, device } = useFakeDevice({
-        device_id: deviceId,
+    const { device, onBack } = props;
+    const [showingAccessCodes, toggleAccessCodes] = useToggle();
+    const { isLoading, accessCodes } = useAccessCodes({
+        device_id: device.device_id,
     });
-    const { isLoading: isLoadingAccessCodes, accessCodes } = useAccessCodes({
-        device_id: deviceId,
-    });
-    const isLoading = isLoadingDevice || isLoadingAccessCodes;
-    const { show } = useNavigation();
-    if (isLoading || !device) {
+    if (isLoading) {
         return null;
     }
+    if (showingAccessCodes) {
+        return (_jsx(AccessCodeTable, { deviceId: device.device_id, onBack: toggleAccessCodes }));
+    }
     if (!isLockDevice(device)) {
         return null;
     }
     const lockStatus = device.properties.locked ? t.locked : t.unlocked;
     const accessCodeCount = accessCodes?.length;
     const accessCodeLength = device.properties?.schlage_metadata?.access_code_length;
-    return (_jsxs("div", { className: 'seam-device-details', children: [_jsx(ContentHeader, { title: 'Device' }), _jsxs("div", { className: 'seam-body', children: [_jsx("div", { className: 'seam-summary', children: _jsxs("div", { className: 'seam-content', children: [_jsx("div", { className: 'seam-image', children: _jsx(DeviceImage, { device: device }) }), _jsxs("div", { className: 'seam-info', children: [_jsx("span", { className: 'seam-label', children: t.device }), _jsx("h4", { className: 'seam-device-name', children: device.properties.name }), _jsxs("div", { className: 'seam-properties', children: [_jsxs("span", { className: 'seam-label', children: [t.status, ":"] }), ' ', _jsx(OnlineStatus, { device: device }), _jsxs("span", { className: 'seam-label', children: [t.power, ":"] }), ' ', _jsx(BatteryStatus, { device: device }), _jsx(DeviceModel, { device: device })] })] })] }) }), _jsx("div", { className: 'seam-box', children: _jsxs("div", { className: 'seam-content seam-access-codes', onClick: () => {
-                                show({ name: 'access_code_table', deviceId: device.device_id });
-                            }, children: [_jsxs("span", { className: 'seam-value', children: [accessCodeCount, " ", t.accessCodes] }), _jsx(ChevronRightIcon, {})] }) }), _jsxs("div", { className: 'seam-box', children: [_jsxs("div", { className: 'seam-content seam-lock-status', children: [_jsxs("div", { children: [_jsx("span", { className: 'seam-label', children: t.lockStatus }), _jsx("span", { className: 'seam-value', children: lockStatus })] }), _jsx("div", { className: 'seam-right', children: _jsx(Button, { size: 'small', children: t.unlock }) })] }), _jsx(AccessCodeLength, { accessCodeLength: accessCodeLength })] })] })] }));
+    return (_jsxs("div", { className: 'seam-device-details', children: [_jsx(ContentHeader, { title: 'Device', onBack: onBack }), _jsxs("div", { className: 'seam-body', children: [_jsx("div", { className: 'seam-summary', children: _jsxs("div", { className: 'seam-content', children: [_jsx("div", { className: 'seam-image', children: _jsx(DeviceImage, { device: device }) }), _jsxs("div", { className: 'seam-info', children: [_jsx("span", { className: 'seam-label', children: t.device }), _jsx("h4", { className: 'seam-device-name', children: device.properties.name }), _jsxs("div", { className: 'seam-properties', children: [_jsxs("span", { className: 'seam-label', children: [t.status, ":"] }), ' ', _jsx(OnlineStatus, { device: device }), _jsxs("span", { className: 'seam-label', children: [t.power, ":"] }), ' ', _jsx(BatteryStatus, { device: device }), _jsx(DeviceModel, { device: device })] })] })] }) }), _jsx("div", { className: 'seam-box', children: _jsxs("div", { className: 'seam-content seam-access-codes', onClick: toggleAccessCodes, children: [_jsxs("span", { className: 'seam-value', children: [accessCodeCount, " ", t.accessCodes] }), _jsx(ChevronRightIcon, {})] }) }), _jsxs("div", { className: 'seam-box', children: [_jsxs("div", { className: 'seam-content seam-lock-status', children: [_jsxs("div", { children: [_jsx("span", { className: 'seam-label', children: t.lockStatus }), _jsx("span", { className: 'seam-value', children: lockStatus })] }), _jsx("div", { className: 'seam-right', children: _jsx(Button, { size: 'small', children: t.unlock }) })] }), _jsx(AccessCodeLength, { accessCodeLength: accessCodeLength })] })] })] }));
 }
 function AccessCodeLength(props) {
     const { accessCodeLength } = props;

package/lib/ui/DeviceDetails/DeviceDetails.js.map

@@ -1 +1 @@
-{"version":3,"file":"DeviceDetails.js","sourceRoot":"","sources":["../../../src/lib/ui/DeviceDetails/DeviceDetails.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"DeviceDetails.js","sourceRoot":"","sources":["../../../src/lib/ui/DeviceDetails/DeviceDetails.tsx"],"names":[],"mappings":";AAAA,OAAO,EAA4C,MAAM,SAAS,CAAA;AAElE,OAAO,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAA;AAC5D,OAAO,EAAE,cAAc,EAAE,MAAM,2CAA2C,CAAA;AAC1E,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAA;AACxD,OAAO,EAAE,eAAe,EAAE,MAAM,2CAA2C,CAAA;AAC3E,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAA;AACzC,OAAO,EAAE,aAAa,EAAE,MAAM,gCAAgC,CAAA;AAC9D,OAAO,EAAE,WAAW,EAAE,MAAM,8BAA8B,CAAA;AAC1D,OAAO,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAA;AAC5D,OAAO,EAAE,WAAW,EAAE,MAAM,qCAAqC,CAAA;AACjE,OAAO,EAAE,aAAa,EAAE,MAAM,gCAAgC,CAAA;AAC9D,OAAO,SAAS,MAAM,mBAAmB,CAAA;AAOzC,MAAM,UAAU,aAAa,CAAC,KAAyB;IACrD,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,GAAG,KAAK,CAAA;IAEhC,MAAM,CAAC,kBAAkB,EAAE,iBAAiB,CAAC,GAAG,SAAS,EAAE,CAAA;IAE3D,MAAM,EAAE,SAAS,EAAE,WAAW,EAAE,GAAG,cAAc,CAAC;QAChD,SAAS,EAAE,MAAM,CAAC,SAAS;KAC5B,CAAC,CAAA;IAEF,IAAI,SAAS,EAAE;QACb,OAAO,IAAI,CAAA;KACZ;IAED,IAAI,kBAAkB,EAAE;QACtB,OAAO,CACL,KAAC,eAAe,IAAC,QAAQ,EAAE,MAAM,CAAC,SAAS,EAAE,MAAM,EAAE,iBAAiB,GAAI,CAC3E,CAAA;KACF;IAED,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,EAAE;QACzB,OAAO,IAAI,CAAA;KACZ;IAED,MAAM,UAAU,GAAG,MAAM,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAA;IAEnE,MAAM,eAAe,GAAG,WAAW,EAAE,MAAM,CAAA;IAE3C,MAAM,gBAAgB,GACpB,MAAM,CAAC,UAAU,EAAE,gBAAgB,EAAE,kBAAkB,CAAA;IAEzD,OAAO,CACL,eAAK,SAAS,EAAC,qBAAqB,aAClC,KAAC,aAAa,IAAC,KAAK,EAAC,QAAQ,EAAC,MAAM,EAAE,MAAM,GAAI,EAChD,eAAK,SAAS,EAAC,WAAW,aACxB,cAAK,SAAS,EAAC,cAAc,YAC3B,eAAK,SAAS,EAAC,cAAc,aAC3B,cAAK,SAAS,EAAC,YAAY,YACzB,KAAC,WAAW,IAAC,MAAM,EAAE,MAAM,GAAI,GAC3B,EACN,eAAK,SAAS,EAAC,WAAW,aACxB,eAAM,SAAS,EAAC,YAAY,YAAE,CAAC,CAAC,MAAM,GAAQ,EAC9C,aAAI,SAAS,EAAC,kBAAkB,YAAE,MAAM,CAAC,UAAU,CAAC,IAAI,GAAM,EAC9D,eAAK,SAAS,EAAC,iBAAiB,aAC9B,gBAAM,SAAS,EAAC,YAAY,aAAE,CAAC,CAAC,MAAM,SAAS,EAAC,GAAG,EACnD,KAAC,YAAY,IAAC,MAAM,EAAE,MAAM,GAAI,EAChC,gBAAM,SAAS,EAAC,YAAY,aAAE,CAAC,CAAC,KAAK,SAAS,EAAC,GAAG,EAClD,KAAC,aAAa,IAAC,MAAM,EAAE,MAAM,GAAI,EACjC,KAAC,WAAW,IAAC,MAAM,EAAE,MAAM,GAAI,IAC3B,IACF,IACF,GACF,EACN,cAAK,SAAS,EAAC,UAAU,YACvB,eACE,SAAS,EAAC,gCAAgC,EAC1C,OAAO,EAAE,iBAAiB,aAE1B,gBAAM,SAAS,EAAC,YAAY,aACzB,eAAe,OAAG,CAAC,CAAC,WAAW,IAC3B,EACP,KAAC,gBAAgB,KAAG,IAChB,GACF,EAEN,eAAK,SAAS,EAAC,UAAU,aACvB,eAAK,SAAS,EAAC,+BAA+B,aAC5C,0BACE,eAAM,SAAS,EAAC,YAAY,YAAE,CAAC,CAAC,UAAU,GAAQ,EAClD,eAAM,SAAS,EAAC,YAAY,YAAE,UAAU,GAAQ,IAC5C,EACN,cAAK,SAAS,EAAC,YAAY,YACzB,KAAC,MAAM,IAAC,IAAI,EAAC,OAAO,YAAE,CAAC,CAAC,MAAM,GAAU,GACpC,IACF,EACN,KAAC,gBAAgB,IAAC,gBAAgB,EAAE,gBAAgB,GAAI,IACpD,IACF,IACF,CACP,CAAA;AACH,CAAC;AAED,SAAS,gBAAgB,CAAC,KAEzB;IACC,MAAM,EAAE,gBAAgB,EAAE,GAAG,KAAK,CAAA;IAClC,IAAI,gBAAgB,IAAI,IAAI,EAAE;QAC5B,OAAO,IAAI,CAAA;KACZ;IAED,OAAO,CACL,eAAK,SAAS,EAAC,sCAAsC,aACnD,eAAM,SAAS,EAAC,YAAY,YAAE,CAAC,CAAC,UAAU,GAAQ,EAClD,gBAAM,SAAS,EAAC,YAAY,aACzB,gBAAgB,OAAG,CAAC,CAAC,MAAM,IACvB,IACH,CACP,CAAA;AACH,CAAC;AAED,MAAM,CAAC,GAAG;IACR,MAAM,EAAE,QAAQ;IAChB,MAAM,EAAE,QAAQ;IAChB,MAAM,EAAE,QAAQ;IAChB,QAAQ,EAAE,UAAU;IACpB,WAAW,EAAE,cAAc;IAC3B,UAAU,EAAE,aAAa;IACzB,MAAM,EAAE,QAAQ;IAChB,UAAU,EAAE,aAAa;IACzB,MAAM,EAAE,QAAQ;IAChB,KAAK,EAAE,OAAO;CACf,CAAA"}

package/lib/ui/DeviceTable/DeviceTable.js

@@ -1,11 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useNavigation } from '../../../lib/NavigationProvider.js';
+import { useState } from 'react';
 import { isLockDevice } from '../../../lib/seam/devices/types.js';
 import { useDevices, } from '../../../lib/seam/devices/use-devices.js';
 import { BatteryStatus } from '../../../lib/ui/device/BatteryStatus.js';
 import { DeviceImage } from '../../../lib/ui/device/DeviceImage.js';
 import { LockStatus } from '../../../lib/ui/device/LockStatus.js';
 import { OnlineStatus } from '../../../lib/ui/device/OnlineStatus.js';
+import { DeviceDetails } from '../../../lib/ui/DeviceDetails/DeviceDetails.js';
 import { getDeviceModel } from '../../../lib/ui/DeviceDetails/DeviceModel.js';
 import { ContentHeader } from '../../../lib/ui/layout/ContentHeader.js';
 import { TableBody } from '../../../lib/ui/Table/TableBody.js';
@@ -17,7 +18,12 @@ import { Caption } from '../../../lib/ui/typography/Caption.js';
 import { Title } from '../../../lib/ui/typography/Title.js';
 export function DeviceTable({ onBack, ...props }) {
     const { devices, isLoading, isError, error } = useDevices(props);
-    const { show } = useNavigation();
+    const [selectedDevice, selectDevice] = useState(null);
+    if (selectedDevice) {
+        return (_jsx(DeviceDetails, { device: selectedDevice, onBack: () => {
+                selectDevice(null);
+            } }));
+    }
     if (isLoading)
         return _jsx("p", { children: "..." });
     if (isError)
@@ -25,8 +31,8 @@ export function DeviceTable({ onBack, ...props }) {
     if (devices == null)
         return null;
     const deviceCount = devices.length;
-    return (_jsxs("div", { className: 'seam-device-table', children: [_jsx(ContentHeader, {}), _jsx(TableHeader, { children: _jsxs(TableTitle, { children: [t.devices, " ", _jsxs(Caption, { children: ["(", deviceCount, ")"] })] }) }), _jsx(TableBody, { children: devices.map((device) => (_jsx(DeviceRow, { device: device, onClick: () => {
-                        show({ name: 'device_detail', deviceId: device.device_id });
+    return (_jsxs("div", { className: 'seam-device-table', children: [_jsx(ContentHeader, { onBack: onBack }), _jsx(TableHeader, { children: _jsxs(TableTitle, { children: [t.devices, " ", _jsxs(Caption, { children: ["(", deviceCount, ")"] })] }) }), _jsx(TableBody, { children: devices.map((device) => (_jsx(DeviceRow, { device: device, onClick: () => {
+                        selectDevice(device);
                     } }, device.device_id))) })] }));
 }
 function DeviceRow(props) {

package/lib/ui/DeviceTable/DeviceTable.js.map

@@ -1 +1 @@
-{"version":3,"file":"DeviceTable.js","sourceRoot":"","sources":["../../../src/lib/ui/DeviceTable/DeviceTable.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"DeviceTable.js","sourceRoot":"","sources":["../../../src/lib/ui/DeviceTable/DeviceTable.tsx"],"names":[],"mappings":"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"}

package/lib/ui/layout/ContentHeader.d.ts

@@ -1,3 +1,4 @@
 export declare function ContentHeader(props: {
     title?: string;
+    onBack?: () => void;
 }): JSX.Element | null;

package/lib/ui/layout/ContentHeader.js

@@ -1,13 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ArrowBackIcon } from '../../../lib/icons/ArrowBack.js';
-import { useNavigation } from '../../../lib/NavigationProvider.js';
 export function ContentHeader(props) {
-    const { title } = props;
-    const { goBack } = useNavigation();
-    if (!title && !goBack) {
+    const { title, onBack } = props;
+    if (!title && !onBack) {
         return null;
     }
-    return (_jsxs("div", { className: 'seam-content-header', children: [goBack && _jsx(BackIcon, { onClick: goBack }), _jsx("span", { className: 'seam-title', children: title })] }));
+    return (_jsxs("div", { className: 'seam-content-header', children: [_jsx(BackIcon, { onClick: onBack }), _jsx("span", { className: 'seam-title', children: title })] }));
 }
 function BackIcon(props) {
     if (props.onClick == null) {

package/lib/ui/layout/ContentHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"ContentHeader.js","sourceRoot":"","sources":["../../../src/lib/ui/layout/ContentHeader.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAA;AACtD,OAAO,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAA;AAEzD,MAAM,UAAU,aAAa,CAAC,KAAyB;IACrD,MAAM,EAAE,KAAK,EAAE,GAAG,KAAK,CAAA;IAEvB,MAAM,EAAE,MAAM,EAAE,GAAG,aAAa,EAAE,CAAA;IAClC,IAAI,CAAC,KAAK,IAAI,CAAC,MAAM,EAAE;QACrB,OAAO,IAAI,CAAA;KACZ;IAED,OAAO,CACL,eAAK,SAAS,EAAC,qBAAqB,aACjC,MAAM,IAAI,KAAC,QAAQ,IAAC,OAAO,EAAE,MAAM,GAAI,EACxC,eAAM,SAAS,EAAC,YAAY,YAAE,KAAK,GAAQ,IACvC,CACP,CAAA;AACH,CAAC;AAED,SAAS,QAAQ,CAAC,KAA+B;IAC/C,IAAI,KAAK,CAAC,OAAO,IAAI,IAAI,EAAE;QACzB,OAAO,IAAI,CAAA;KACZ;IAED,OAAO,KAAC,aAAa,IAAC,SAAS,EAAC,gBAAgB,EAAC,OAAO,EAAE,KAAK,CAAC,OAAO,GAAI,CAAA;AAC7E,CAAC"}
+{"version":3,"file":"ContentHeader.js","sourceRoot":"","sources":["../../../src/lib/ui/layout/ContentHeader.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAA;AAEtD,MAAM,UAAU,aAAa,CAAC,KAG7B;IACC,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,KAAK,CAAA;IAC/B,IAAI,CAAC,KAAK,IAAI,CAAC,MAAM,EAAE;QACrB,OAAO,IAAI,CAAA;KACZ;IAED,OAAO,CACL,eAAK,SAAS,EAAC,qBAAqB,aAClC,KAAC,QAAQ,IAAC,OAAO,EAAE,MAAM,GAAI,EAC7B,eAAM,SAAS,EAAC,YAAY,YAAE,KAAK,GAAQ,IACvC,CACP,CAAA;AACH,CAAC;AAED,SAAS,QAAQ,CAAC,KAA+B;IAC/C,IAAI,KAAK,CAAC,OAAO,IAAI,IAAI,EAAE;QACzB,OAAO,IAAI,CAAA;KACZ;IAED,OAAO,KAAC,aAAa,IAAC,SAAS,EAAC,gBAAgB,EAAC,OAAO,EAAE,KAAK,CAAC,OAAO,GAAI,CAAA;AAC7E,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seamapi/react",
-  "version": "0.17.0",
+  "version": "0.18.0",
   "description": "Seam React component library.",
   "type": "module",
   "main": "index.js",
@@ -58,7 +58,6 @@
     "docs:build": "storybook build --docs --output-dir docs",
     "predocs:build": "npm run examples:build",
     "typecheck": "tsc",
-    "dependencies": "dpdm --exit-code circular:1 src/index.ts",
     "test": "jest --collect-coverage",
     "test:update": "jest --updateSnapshot",
     "test:watch": "jest --watch",
@@ -126,7 +125,6 @@
     "concurrently": "^8.0.1",
     "copy-webpack-plugin": "^11.0.0",
     "del-cli": "^5.0.0",
-    "dpdm": "^3.13.0",
     "eslint": "^8.9.0",
     "eslint-config-prettier": "^8.4.0",
     "eslint-config-standard-jsx": "^11.0.0",

package/src/lib/seam/access-codes/use-access-code.ts

@@ -1,7 +1,5 @@
 import { useQuery } from '@tanstack/react-query'
-import { DateTime } from 'luxon'
 import type { AccessCode, AccessCodeGetRequest } from 'seamapi'
-import { v4 as uuid } from 'uuid'
 
 import { useSeamClient } from 'lib/seam/use-seam-client.js'
 
@@ -24,22 +22,3 @@ export function useAccessCode(params: UseAccessCodeParams) {
     },
   })
 }
-
-export function useFakeAccessCode(_params: UseAccessCodeParams): {
-  isLoading: boolean
-  data: AccessCode
-} {
-  const accessCode: AccessCode = {
-    access_code_id: uuid(),
-    type: 'time_bound',
-    starts_at: DateTime.now().minus({ days: 2 }).toISO() ?? '',
-    ends_at: DateTime.now().plus({ days: 1 }).toISO() ?? '',
-    code: '1234',
-    created_at: DateTime.now().toISO() ?? '',
-    device_id: 'some_device_id',
-    status: 'set',
-    name: 'Guest - Kranz',
-  }
-
-  return { isLoading: false, data: accessCode }
-}

package/src/lib/ui/AccessCodeDetails/AccessCodeDetails.tsx

@@ -1,31 +1,38 @@
 import { DateTime } from 'luxon'
-import type { AccessCode } from 'seamapi'
+import { useState } from 'react'
+import type { AccessCode, CommonDeviceProperties, Device } from 'seamapi'
 
-import { useFakeAccessCode } from 'lib/index.js'
-
-import AccessCodeDevice from 'lib/ui/AccessCodeDetails/AccessCodeDevice.js'
+import { AccessCodeDevice } from 'lib/ui/AccessCodeDetails/AccessCodeDevice.js'
+import { DeviceDetails } from 'lib/ui/DeviceDetails/DeviceDetails.js'
 import { ContentHeader } from 'lib/ui/layout/ContentHeader.js'
 
 export interface AccessCodeDetailsProps {
-  accessCodeId: string
+  accessCode: AccessCode
+  onBack?: () => void
 }
 
-export default function AccessCodeDetails({
-  accessCodeId,
+export function AccessCodeDetails({
+  accessCode,
+  onBack,
 }: AccessCodeDetailsProps) {
-  const { isLoading, data: accessCode } = useFakeAccessCode({
-    access_code_id: accessCodeId,
-  })
+  const name = accessCode.name ?? t.fallbackName
+  const [selectedDevice, selectDevice] =
+    useState<Device<CommonDeviceProperties> | null>(null)
 
-  if (isLoading || !accessCode) {
-    return null
+  if (selectedDevice) {
+    return (
+      <DeviceDetails
+        device={selectedDevice}
+        onBack={() => {
+          selectDevice(null)
+        }}
+      />
+    )
   }
 
-  const name = accessCode.name ?? t.fallbackName
-
   return (
     <div className='seam-access-code-details'>
-      <ContentHeader title='Access code' />
+      <ContentHeader title='Access code' onBack={onBack} />
       <div className='seam-summary'>
         <div className='seam-top'>
           <span className='seam-label'>{t.accessCode}</span>
@@ -35,7 +42,10 @@ export default function AccessCodeDetails({
             <Duration accessCode={accessCode} />
           </div>
         </div>
-        <AccessCodeDevice deviceId={accessCode.device_id} />
+        <AccessCodeDevice
+          deviceId={accessCode.device_id}
+          onSelectDevice={selectDevice}
+        />
       </div>
       <div className='seam-details'>
         <div className='seam-row'>

package/src/lib/ui/AccessCodeDetails/AccessCodeDevice.tsx

@@ -1,4 +1,5 @@
-import { useNavigation } from 'lib/NavigationProvider.js'
+import type { CommonDeviceProperties, Device } from 'seamapi'
+
 import { isLockDevice } from 'lib/seam/devices/types.js'
 import { useFakeDevice } from 'lib/seam/devices/use-device.js'
 import { Button } from 'lib/ui/Button.js'
@@ -6,10 +7,15 @@ import { DeviceImage } from 'lib/ui/device/DeviceImage.js'
 import { getDeviceModel } from 'lib/ui/DeviceDetails/DeviceModel.js'
 import { TextButton } from 'lib/ui/TextButton.js'
 
-export default function AccessCodeDevice({ deviceId }: { deviceId: string }) {
+export function AccessCodeDevice({
+  deviceId,
+  onSelectDevice,
+}: {
+  deviceId: string
+  onSelectDevice: (device: Device<CommonDeviceProperties>) => void
+}) {
   //  TODO: Replace with `useDevice()` once ready
   const { isLoading, device } = useFakeDevice({ device_id: deviceId })
-  const { show } = useNavigation()
 
   // TODO: Do we want to return a skeleton loader here instead?
   if (isLoading || !device || !isLockDevice(device)) {
@@ -27,7 +33,7 @@ export default function AccessCodeDevice({ deviceId }: { deviceId: string }) {
         <div className='seam-model'>{model}</div>
         <TextButton
           onClick={() => {
-            show({ name: 'device_detail', deviceId: device.device_id })
+            onSelectDevice(device)
           }}
         >
           {t.deviceDetails}

package/src/lib/ui/AccessCodeTable/AccessCodeTable.tsx

@@ -1,6 +1,9 @@
+import { useState } from 'react'
+import type { AccessCode } from 'seamapi'
+
 import { AccessCodeKeyIcon } from 'lib/icons/AccessCodeKey.js'
-import { useNavigation } from 'lib/NavigationProvider.js'
 import { useAccessCodes } from 'lib/seam/access-codes/use-access-codes.js'
+import { AccessCodeDetails } from 'lib/ui/AccessCodeDetails/AccessCodeDetails.js'
 import { CodeDetails } from 'lib/ui/AccessCodeTable/CodeDetails.js'
 import { ContentHeader } from 'lib/ui/layout/ContentHeader.js'
 import { TableBody } from 'lib/ui/Table/TableBody.js'
@@ -11,18 +14,35 @@ import { TableTitle } from 'lib/ui/Table/TableTitle.js'
 import { Caption } from 'lib/ui/typography/Caption.js'
 import { Title } from 'lib/ui/typography/Title.js'
 
-export function AccessCodeTable(props: { deviceId: string }): JSX.Element {
+export function AccessCodeTable(props: {
+  deviceId: string
+  onBack?: () => void
+}): JSX.Element {
   const { accessCodes } = useAccessCodes({
     device_id: props.deviceId,
   })
+  const { onBack } = props
+
+  const [selectedAccessCode, selectAccessCode] = useState<AccessCode | null>(
+    null
+  )
 
-  const { show } = useNavigation()
+  if (selectedAccessCode) {
+    return (
+      <AccessCodeDetails
+        accessCode={selectedAccessCode}
+        onBack={() => {
+          selectAccessCode(null)
+        }}
+      />
+    )
+  }
 
   if (!accessCodes) return <>{null}</>
 
   return (
     <div className='seam-access-code-table'>
-      <ContentHeader />
+      <ContentHeader onBack={onBack} />
       <TableHeader>
         <TableTitle>
           {t.accessCodes} <Caption>({accessCodes.length})</Caption>
@@ -33,10 +53,7 @@ export function AccessCodeTable(props: { deviceId: string }): JSX.Element {
           <TableRow
             key={code.access_code_id}
             onClick={() => {
-              show({
-                name: 'access_code_detail',
-                accessCodeId: code.access_code_id,
-              })
+              selectAccessCode(code)
             }}
           >
             <TableCell className='seam-icon-cell'>

package/src/lib/ui/AccessCodeTable/AccessCodeTableContent.tsx

@@ -13,16 +13,17 @@ import { Title } from 'lib/ui/typography/Title.js'
 
 export interface AccessCodeTableContentProps {
   accessCodes: AccessCode[]
+  onBack?: () => void
 }
 
 export function AccessCodeTableContent(
   props: AccessCodeTableContentProps
 ): JSX.Element {
-  const { accessCodes } = props
+  const { accessCodes, onBack } = props
 
   return (
     <div className='seam-access-code-table'>
-      <ContentHeader />
+      <ContentHeader onBack={onBack} />
       <TableHeader>
         <TableTitle>
           {t.accessCodes} <Caption>({accessCodes.length})</Caption>

package/src/lib/ui/DeviceDetails/DeviceDetails.tsx

@@ -1,38 +1,41 @@
+import { type CommonDeviceProperties, type Device } from 'seamapi'
+
 import { ChevronRightIcon } from 'lib/icons/ChevronRight.js'
-import { useNavigation } from 'lib/NavigationProvider.js'
 import { useAccessCodes } from 'lib/seam/access-codes/use-access-codes.js'
 import { isLockDevice } from 'lib/seam/devices/types.js'
-import { useFakeDevice } from 'lib/seam/devices/use-device.js'
+import { AccessCodeTable } from 'lib/ui/AccessCodeTable/AccessCodeTable.js'
 import { Button } from 'lib/ui/Button.js'
 import { BatteryStatus } from 'lib/ui/device/BatteryStatus.js'
 import { DeviceImage } from 'lib/ui/device/DeviceImage.js'
 import { OnlineStatus } from 'lib/ui/device/OnlineStatus.js'
 import { DeviceModel } from 'lib/ui/DeviceDetails/DeviceModel.js'
 import { ContentHeader } from 'lib/ui/layout/ContentHeader.js'
+import useToggle from 'lib/use-toggle.js'
 
 export interface DeviceDetailsProps {
-  deviceId: string
+  device: Device<CommonDeviceProperties>
+  onBack?: () => void
 }
 
 export function DeviceDetails(props: DeviceDetailsProps): JSX.Element | null {
-  const { deviceId } = props
+  const { device, onBack } = props
 
-  const { isLoading: isLoadingDevice, device } = useFakeDevice({
-    device_id: deviceId,
-  })
+  const [showingAccessCodes, toggleAccessCodes] = useToggle()
 
-  const { isLoading: isLoadingAccessCodes, accessCodes } = useAccessCodes({
-    device_id: deviceId,
+  const { isLoading, accessCodes } = useAccessCodes({
+    device_id: device.device_id,
   })
 
-  const isLoading = isLoadingDevice || isLoadingAccessCodes
-
-  const { show } = useNavigation()
-
-  if (isLoading || !device) {
+  if (isLoading) {
     return null
   }
 
+  if (showingAccessCodes) {
+    return (
+      <AccessCodeTable deviceId={device.device_id} onBack={toggleAccessCodes} />
+    )
+  }
+
   if (!isLockDevice(device)) {
     return null
   }
@@ -46,7 +49,7 @@ export function DeviceDetails(props: DeviceDetailsProps): JSX.Element | null {
 
   return (
     <div className='seam-device-details'>
-      <ContentHeader title='Device' />
+      <ContentHeader title='Device' onBack={onBack} />
       <div className='seam-body'>
         <div className='seam-summary'>
           <div className='seam-content'>
@@ -69,9 +72,7 @@ export function DeviceDetails(props: DeviceDetailsProps): JSX.Element | null {
         <div className='seam-box'>
           <div
             className='seam-content seam-access-codes'
-            onClick={() => {
-              show({ name: 'access_code_table', deviceId: device.device_id })
-            }}
+            onClick={toggleAccessCodes}
           >
             <span className='seam-value'>
               {accessCodeCount} {t.accessCodes}

package/src/lib/ui/DeviceTable/DeviceTable.tsx

@@ -1,4 +1,6 @@
-import { useNavigation } from 'lib/NavigationProvider.js'
+import { useState } from 'react'
+import type { CommonDeviceProperties, Device } from 'seamapi'
+
 import { isLockDevice } from 'lib/seam/devices/types.js'
 import {
   useDevices,
@@ -9,6 +11,7 @@ import { BatteryStatus } from 'lib/ui/device/BatteryStatus.js'
 import { DeviceImage } from 'lib/ui/device/DeviceImage.js'
 import { LockStatus } from 'lib/ui/device/LockStatus.js'
 import { OnlineStatus } from 'lib/ui/device/OnlineStatus.js'
+import { DeviceDetails } from 'lib/ui/DeviceDetails/DeviceDetails.js'
 import { getDeviceModel } from 'lib/ui/DeviceDetails/DeviceModel.js'
 import { ContentHeader } from 'lib/ui/layout/ContentHeader.js'
 import { TableBody } from 'lib/ui/Table/TableBody.js'
@@ -27,7 +30,20 @@ interface Props {
 
 export function DeviceTable({ onBack, ...props }: DeviceTableProps) {
   const { devices, isLoading, isError, error } = useDevices(props)
-  const { show } = useNavigation()
+
+  const [selectedDevice, selectDevice] =
+    useState<Device<CommonDeviceProperties> | null>(null)
+
+  if (selectedDevice) {
+    return (
+      <DeviceDetails
+        device={selectedDevice}
+        onBack={() => {
+          selectDevice(null)
+        }}
+      />
+    )
+  }
 
   if (isLoading) return <p>...</p>
   if (isError) return <p>{error?.message}</p>
@@ -37,7 +53,7 @@ export function DeviceTable({ onBack, ...props }: DeviceTableProps) {
 
   return (
     <div className='seam-device-table'>
-      <ContentHeader />
+      <ContentHeader onBack={onBack} />
       <TableHeader>
         <TableTitle>
           {t.devices} <Caption>({deviceCount})</Caption>
@@ -49,7 +65,7 @@ export function DeviceTable({ onBack, ...props }: DeviceTableProps) {
             device={device}
             key={device.device_id}
             onClick={() => {
-              show({ name: 'device_detail', deviceId: device.device_id })
+              selectDevice(device)
             }}
           />
         ))}

package/src/lib/ui/layout/ContentHeader.tsx

@@ -1,17 +1,17 @@
 import { ArrowBackIcon } from 'lib/icons/ArrowBack.js'
-import { useNavigation } from 'lib/NavigationProvider.js'
 
-export function ContentHeader(props: { title?: string }): JSX.Element | null {
-  const { title } = props
-
-  const { goBack } = useNavigation()
-  if (!title && !goBack) {
+export function ContentHeader(props: {
+  title?: string
+  onBack?: () => void
+}): JSX.Element | null {
+  const { title, onBack } = props
+  if (!title && !onBack) {
     return null
   }
 
   return (
     <div className='seam-content-header'>
-      {goBack && <BackIcon onClick={goBack} />}
+      <BackIcon onClick={onBack} />
       <span className='seam-title'>{title}</span>
     </div>
   )

package/lib/NavigationProvider.d.ts

@@ -1,27 +0,0 @@
-interface DeviceTableView {
-    name: 'device_table';
-}
-interface DeviceDetailView {
-    name: 'device_detail';
-    deviceId: string;
-}
-interface AccessCodeTableView {
-    name: 'access_code_table';
-    deviceId: string;
-}
-interface AccessCodeDetailView {
-    name: 'access_code_detail';
-    accessCodeId: string;
-}
-export type View = DeviceTableView | DeviceDetailView | AccessCodeTableView | AccessCodeDetailView;
-export interface NavigationStackProps {
-    children: JSX.Element;
-}
-interface NavigationContextProps {
-    views: View[];
-    show: (view: View) => void;
-    goBack?: () => void;
-}
-export default function NavigationProvider({ children }: NavigationStackProps): import("react/jsx-runtime").JSX.Element;
-export declare function useNavigation(): NavigationContextProps;
-export {};

package/lib/NavigationProvider.js

@@ -1,36 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import React, { useState } from 'react';
-const NavigationContext = React.createContext(undefined);
-export default function NavigationProvider({ children }) {
-    const [views, setViews] = useState([]);
-    const pushView = (view) => {
-        setViews((current) => [view, ...current]);
-    };
-    const popView = () => {
-        setViews((current) => {
-            if (current.length === 0) {
-                return current;
-            }
-            const [_showing, ...others] = current;
-            return others;
-        });
-    };
-    const hasViews = views.length > 0;
-    return (_jsx(NavigationContext.Provider, { value: {
-            views,
-            show: pushView,
-            goBack: hasViews ? popView : undefined,
-        }, children: children }));
-}
-export function useNavigation() {
-    const context = React.useContext(NavigationContext);
-    if (context === undefined) {
-        return {
-            show: () => { },
-            goBack: undefined,
-            views: [],
-        };
-    }
-    return context;
-}
-//# sourceMappingURL=NavigationProvider.js.map

package/lib/NavigationProvider.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"NavigationProvider.js","sourceRoot":"","sources":["../src/lib/NavigationProvider.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAqCvC,MAAM,iBAAiB,GAAG,KAAK,CAAC,aAAa,CAE3C,SAAS,CAAC,CAAA;AAEZ,MAAM,CAAC,OAAO,UAAU,kBAAkB,CAAC,EAAE,QAAQ,EAAwB;IAC3E,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAS,EAAE,CAAC,CAAA;IAE9C,MAAM,QAAQ,GAAG,CAAC,IAAU,EAAE,EAAE;QAC9B,QAAQ,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC,IAAI,EAAE,GAAG,OAAO,CAAC,CAAC,CAAA;IAC3C,CAAC,CAAA;IAED,MAAM,OAAO,GAAG,GAAG,EAAE;QACnB,QAAQ,CAAC,CAAC,OAAO,EAAE,EAAE;YACnB,IAAI,OAAO,CAAC,MAAM,KAAK,CAAC,EAAE;gBACxB,OAAO,OAAO,CAAA;aACf;YAED,MAAM,CAAC,QAAQ,EAAE,GAAG,MAAM,CAAC,GAAG,OAAO,CAAA;YACrC,OAAO,MAAM,CAAA;QACf,CAAC,CAAC,CAAA;IACJ,CAAC,CAAA;IAED,MAAM,QAAQ,GAAG,KAAK,CAAC,MAAM,GAAG,CAAC,CAAA;IAEjC,OAAO,CACL,KAAC,iBAAiB,CAAC,QAAQ,IACzB,KAAK,EAAE;YACL,KAAK;YACL,IAAI,EAAE,QAAQ;YACd,MAAM,EAAE,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS;SACvC,YAEA,QAAQ,GACkB,CAC9B,CAAA;AACH,CAAC;AAED,MAAM,UAAU,aAAa;IAC3B,MAAM,OAAO,GAAG,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,CAAA;IACnD,IAAI,OAAO,KAAK,SAAS,EAAE;QACzB,OAAO;YACL,IAAI,EAAE,GAAG,EAAE,GAAE,CAAC;YACd,MAAM,EAAE,SAAS;YACjB,KAAK,EAAE,EAAE;SACV,CAAA;KACF;IAED,OAAO,OAAO,CAAA;AAChB,CAAC"}

package/lib/NavigationView.d.ts

@@ -1,5 +0,0 @@
-interface NavigationViewProps {
-    children: JSX.Element;
-}
-export declare function NavigationView({ children: rootView }: NavigationViewProps): JSX.Element;
-export {};

package/lib/NavigationView.js

@@ -1,25 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { AccessCodeTable, DeviceDetails, DeviceTable } from '../lib/index.js';
-import { useNavigation } from '../lib/NavigationProvider.js';
-import AccessCodeDetails from '../lib/ui/AccessCodeDetails/AccessCodeDetails.js';
-export function NavigationView({ children: rootView }) {
-    const { views } = useNavigation();
-    const firstView = views[0];
-    if (firstView != null) {
-        return _jsx(Subview, { view: firstView });
-    }
-    return rootView;
-}
-function Subview({ view }) {
-    switch (view.name) {
-        case 'device_detail':
-            return _jsx(DeviceDetails, { deviceId: view.deviceId });
-        case 'access_code_detail':
-            return _jsx(AccessCodeDetails, { accessCodeId: view.accessCodeId });
-        case 'device_table':
-            return _jsx(DeviceTable, {});
-        case 'access_code_table':
-            return _jsx(AccessCodeTable, { deviceId: view.deviceId });
-    }
-}
-//# sourceMappingURL=NavigationView.js.map

package/lib/NavigationView.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"NavigationView.js","sourceRoot":"","sources":["../src/lib/NavigationView.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,eAAe,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,cAAc,CAAA;AAE1E,OAAO,EAAE,aAAa,EAAa,MAAM,2BAA2B,CAAA;AACpE,OAAO,iBAAiB,MAAM,+CAA+C,CAAA;AAM7E,MAAM,UAAU,cAAc,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAuB;IACxE,MAAM,EAAE,KAAK,EAAE,GAAG,aAAa,EAAE,CAAA;IAEjC,MAAM,SAAS,GAAG,KAAK,CAAC,CAAC,CAAC,CAAA;IAC1B,IAAI,SAAS,IAAI,IAAI,EAAE;QACrB,OAAO,KAAC,OAAO,IAAC,IAAI,EAAE,SAAS,GAAI,CAAA;KACpC;IAED,OAAO,QAAQ,CAAA;AACjB,CAAC;AAED,SAAS,OAAO,CAAC,EAAE,IAAI,EAAkB;IACvC,QAAQ,IAAI,CAAC,IAAI,EAAE;QACjB,KAAK,eAAe;YAClB,OAAO,KAAC,aAAa,IAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAI,CAAA;QACnD,KAAK,oBAAoB;YACvB,OAAO,KAAC,iBAAiB,IAAC,YAAY,EAAE,IAAI,CAAC,YAAY,GAAI,CAAA;QAC/D,KAAK,cAAc;YACjB,OAAO,KAAC,WAAW,KAAG,CAAA;QACxB,KAAK,mBAAmB;YACtB,OAAO,KAAC,eAAe,IAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAI,CAAA;KACtD;AACH,CAAC"}

package/src/lib/NavigationProvider.tsx

@@ -1,86 +0,0 @@
-import React, { useState } from 'react'
-
-interface DeviceTableView {
-  name: 'device_table'
-}
-
-interface DeviceDetailView {
-  name: 'device_detail'
-  deviceId: string
-}
-
-interface AccessCodeTableView {
-  name: 'access_code_table'
-  deviceId: string
-}
-
-interface AccessCodeDetailView {
-  name: 'access_code_detail'
-  accessCodeId: string
-}
-
-export type View =
-  | DeviceTableView
-  | DeviceDetailView
-  | AccessCodeTableView
-  | AccessCodeDetailView
-
-export interface NavigationStackProps {
-  children: JSX.Element
-}
-
-interface NavigationContextProps {
-  views: View[]
-  show: (view: View) => void
-  goBack?: () => void
-}
-
-const NavigationContext = React.createContext<
-  NavigationContextProps | undefined
->(undefined)
-
-export default function NavigationProvider({ children }: NavigationStackProps) {
-  const [views, setViews] = useState<View[]>([])
-
-  const pushView = (view: View) => {
-    setViews((current) => [view, ...current])
-  }
-
-  const popView = () => {
-    setViews((current) => {
-      if (current.length === 0) {
-        return current
-      }
-
-      const [_showing, ...others] = current
-      return others
-    })
-  }
-
-  const hasViews = views.length > 0
-
-  return (
-    <NavigationContext.Provider
-      value={{
-        views,
-        show: pushView,
-        goBack: hasViews ? popView : undefined,
-      }}
-    >
-      {children}
-    </NavigationContext.Provider>
-  )
-}
-
-export function useNavigation(): NavigationContextProps {
-  const context = React.useContext(NavigationContext)
-  if (context === undefined) {
-    return {
-      show: () => {},
-      goBack: undefined,
-      views: [],
-    }
-  }
-
-  return context
-}

package/src/lib/NavigationView.tsx

@@ -1,32 +0,0 @@
-import { AccessCodeTable, DeviceDetails, DeviceTable } from 'lib/index.js'
-
-import { useNavigation, type View } from 'lib/NavigationProvider.js'
-import AccessCodeDetails from 'lib/ui/AccessCodeDetails/AccessCodeDetails.js'
-
-interface NavigationViewProps {
-  children: JSX.Element
-}
-
-export function NavigationView({ children: rootView }: NavigationViewProps) {
-  const { views } = useNavigation()
-
-  const firstView = views[0]
-  if (firstView != null) {
-    return <Subview view={firstView} />
-  }
-
-  return rootView
-}
-
-function Subview({ view }: { view: View }) {
-  switch (view.name) {
-    case 'device_detail':
-      return <DeviceDetails deviceId={view.deviceId} />
-    case 'access_code_detail':
-      return <AccessCodeDetails accessCodeId={view.accessCodeId} />
-    case 'device_table':
-      return <DeviceTable />
-    case 'access_code_table':
-      return <AccessCodeTable deviceId={view.deviceId} />
-  }
-}