@luxonis/depthai-viewer-common 0.0.2 → 0.0.4

package/{src/index.ts → dist/index.d.ts}

@@ -1,29 +1,22 @@
 export * from './utils/functions.js';
-
 export * from './components/ButtonLink.js';
 export * from './components/Link.js';
 export * from './components/Pipeline.js';
 export * from './components/Resizable.js';
 export * from './components/Streams.js';
 export * from './components/CTASubLabel.js';
-
 export * from './constants/connection.js';
 export * from './constants/url.js';
-
 export * from './dai-connection/connection.js';
 export * from './dai-connection/decoder.worker.js';
-
 export * from './hooks/connection.js';
 export * from './hooks/navigation.js';
 export * from './hooks/search.js';
-
-export * from './models/device-configuration.js';
-
 export * from './utils/dynamic-base-worker.js';
 export * from './utils/functions.js';
 export * from './utils/sorting.js';
 export * from './utils/url.js';
-
 export * from './providers/DataProvider.js';
 export * from './providers/ConnectionProvider.js';
 export * from './constants/streams.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC;AAErC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,sBAAsB,CAAC;AACrC,cAAc,0BAA0B,CAAC;AACzC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,yBAAyB,CAAC;AACxC,cAAc,6BAA6B,CAAC;AAE5C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,oBAAoB,CAAC;AAEnC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,oCAAoC,CAAC;AAEnD,cAAc,uBAAuB,CAAC;AACtC,cAAc,uBAAuB,CAAC;AACtC,cAAc,mBAAmB,CAAC;AAElC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,sBAAsB,CAAC;AACrC,cAAc,oBAAoB,CAAC;AACnC,cAAc,gBAAgB,CAAC;AAE/B,cAAc,6BAA6B,CAAC;AAC5C,cAAc,mCAAmC,CAAC;AAClD,cAAc,wBAAwB,CAAC"}

package/dist/index.js

@@ -0,0 +1,22 @@
+export * from './utils/functions.js';
+export * from './components/ButtonLink.js';
+export * from './components/Link.js';
+export * from './components/Pipeline.js';
+export * from './components/Resizable.js';
+export * from './components/Streams.js';
+export * from './components/CTASubLabel.js';
+export * from './constants/connection.js';
+export * from './constants/url.js';
+export * from './dai-connection/connection.js';
+export * from './dai-connection/decoder.worker.js';
+export * from './hooks/connection.js';
+export * from './hooks/navigation.js';
+export * from './hooks/search.js';
+export * from './utils/dynamic-base-worker.js';
+export * from './utils/functions.js';
+export * from './utils/sorting.js';
+export * from './utils/url.js';
+export * from './providers/DataProvider.js';
+export * from './providers/ConnectionProvider.js';
+export * from './constants/streams.js';
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC;AAErC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,sBAAsB,CAAC;AACrC,cAAc,0BAA0B,CAAC;AACzC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,yBAAyB,CAAC;AACxC,cAAc,6BAA6B,CAAC;AAE5C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,oBAAoB,CAAC;AAEnC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,oCAAoC,CAAC;AAEnD,cAAc,uBAAuB,CAAC;AACtC,cAAc,uBAAuB,CAAC;AACtC,cAAc,mBAAmB,CAAC;AAElC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,sBAAsB,CAAC;AACrC,cAAc,oBAAoB,CAAC;AACnC,cAAc,gBAAgB,CAAC;AAE/B,cAAc,6BAA6B,CAAC;AAC5C,cAAc,mCAAmC,CAAC;AAClD,cAAc,wBAAwB,CAAC"}

package/dist/providers/ConnectionProvider.d.ts

@@ -0,0 +1,9 @@
+import { type ConnectionData } from '../hooks/connection.js';
+import type { DAIService } from '../dai-connection/connection.js';
+import React from 'react';
+export declare const ConnectionContext: React.Context<ConnectionData>;
+export declare const ConnectionProvider: React.FC<React.PropsWithChildren<{
+    activeServices: DAIService[];
+}>>;
+export declare const useConnection: () => ConnectionData;
+//# sourceMappingURL=ConnectionProvider.d.ts.map

package/dist/providers/ConnectionProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConnectionProvider.d.ts","sourceRoot":"","sources":["../../src/providers/ConnectionProvider.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,cAAc,EAAuB,MAAM,wBAAwB,CAAC;AAElF,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iCAAiC,CAAC;AAElE,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,eAAO,MAAM,iBAAiB,+BAS5B,CAAC;AAEH,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CACxC,KAAK,CAAC,iBAAiB,CAAC;IAAE,cAAc,EAAE,UAAU,EAAE,CAAA;CAAE,CAAC,CAiBzD,CAAC;AAEF,eAAO,MAAM,aAAa,sBAA4C,CAAC"}

package/dist/providers/ConnectionProvider.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { VisualizerContext } from '@luxonis/visualizer-protobuf';
+import { useCreateConnection } from '../hooks/connection.js';
+import { useData } from './DataProvider.js';
+import { noop } from '../utils/functions.js';
+import React from 'react';
+export const ConnectionContext = React.createContext({
+    daiConnection: null,
+    connected: false,
+    topics: [],
+    pipeline: undefined,
+    isPipelineLoading: false,
+    setIsPipelineLoading: noop,
+    connections: [],
+    toggleTopic: noop,
+});
+export const ConnectionProvider = ({ children, activeServices }) => {
+    const { connectionType, wsUrl, token, clientId } = useData();
+    const connectionData = useCreateConnection({
+        type: connectionType,
+        token,
+        clientId,
+        connectionUrl: wsUrl,
+        activeServices,
+    });
+    return (_jsx(VisualizerContext, { connections: connectionData.connections, children: _jsx(ConnectionContext.Provider, { value: connectionData, children: children }) }));
+};
+export const useConnection = () => React.useContext(ConnectionContext);
+//# sourceMappingURL=ConnectionProvider.js.map

package/dist/providers/ConnectionProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConnectionProvider.js","sourceRoot":"","sources":["../../src/providers/ConnectionProvider.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,8BAA8B,CAAC;AACjE,OAAO,EAAuB,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAClF,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAE5C,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAC7C,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,CAAC,MAAM,iBAAiB,GAAG,KAAK,CAAC,aAAa,CAAiB;IACpE,aAAa,EAAE,IAAI;IACnB,SAAS,EAAE,KAAK;IAChB,MAAM,EAAE,EAAE;IACV,QAAQ,EAAE,SAAS;IACnB,iBAAiB,EAAE,KAAK;IACxB,oBAAoB,EAAE,IAAI;IAC1B,WAAW,EAAE,EAAE;IACf,WAAW,EAAE,IAAI;CACjB,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,kBAAkB,GAE3B,CAAC,EAAE,QAAQ,EAAE,cAAc,EAAE,EAAE,EAAE;IACpC,MAAM,EAAE,cAAc,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,OAAO,EAAE,CAAC;IAE7D,MAAM,cAAc,GAAG,mBAAmB,CAAC;QAC1C,IAAI,EAAE,cAAc;QACpB,KAAK;QACL,QAAQ;QACR,aAAa,EAAE,KAAK;QACpB,cAAc;KACd,CAAC,CAAC;IAEH,OAAO,CACN,KAAC,iBAAiB,IAAC,WAAW,EAAE,cAAc,CAAC,WAAW,YACzD,KAAC,iBAAiB,CAAC,QAAQ,IAAC,KAAK,EAAE,cAAc,YAAG,QAAQ,GAA8B,GACvE,CACpB,CAAC;AACH,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAG,GAAG,EAAE,CAAC,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,CAAC"}

package/dist/providers/DataProvider.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+export type DataContext = {
+    columns: number | null;
+    changeColumns: (columns: number | null) => void;
+    changeWsUrl: (url: string) => void;
+    connectionType: 'ws' | 'webrtc';
+    wsUrl: string;
+    token: string;
+    clientId: string;
+};
+export declare const useData: () => DataContext;
+export declare const DataProvider: React.FC<React.PropsWithChildren>;
+//# sourceMappingURL=DataProvider.d.ts.map

package/dist/providers/DataProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataProvider.d.ts","sourceRoot":"","sources":["../../src/providers/DataProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,MAAM,MAAM,WAAW,GAAG;IACzB,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,aAAa,EAAE,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAChD,WAAW,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,cAAc,EAAE,IAAI,GAAG,QAAQ,CAAC;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;CACjB,CAAC;AAYF,eAAO,MAAM,OAAO,mBAAsC,CAAC;AAE3D,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,iBAAiB,CA2C1D,CAAC"}

package/dist/providers/DataProvider.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { DEFAULT_WS_URL, IS_LOCALHOST, LOCALHOST_WS_URL } from '../constants/url.js';
+import { useFlatSearch } from '../hooks/search.js';
+import { noop } from '../utils/functions.js';
+const DataContext = React.createContext({
+    columns: null,
+    connectionType: 'ws',
+    wsUrl: DEFAULT_WS_URL,
+    changeColumns: noop,
+    changeWsUrl: noop,
+    token: '',
+    clientId: '',
+});
+export const useData = () => React.useContext(DataContext);
+export const DataProvider = ({ children }) => {
+    const { search, updateSearch } = useFlatSearch({
+        defaultInit: { layout: '0', t: '', cid: '' },
+    });
+    const [columns, setColumns] = React.useState(() => {
+        return search.layout === '0' ? null : Number(search.layout);
+    });
+    const [connectionUrl, setConnectionUrl] = React.useState(search.t && search.cid ? '' : IS_LOCALHOST ? LOCALHOST_WS_URL : DEFAULT_WS_URL);
+    const changeColumns = React.useCallback((columns) => {
+        setColumns(columns);
+        updateSearch('layout', columns ?? 0);
+    }, [updateSearch]);
+    const changeWsUrl = React.useCallback((url) => {
+        setConnectionUrl(url);
+        updateSearch('t', null);
+        updateSearch('cid', null);
+    }, [updateSearch]);
+    return (_jsx(DataContext.Provider, { value: {
+            token: search.t,
+            clientId: search.cid,
+            wsUrl: connectionUrl,
+            connectionType: search.t && search.cid ? 'webrtc' : 'ws',
+            columns,
+            changeColumns,
+            changeWsUrl,
+        }, children: children }));
+};
+//# sourceMappingURL=DataProvider.js.map

package/dist/providers/DataProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataProvider.js","sourceRoot":"","sources":["../../src/providers/DataProvider.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,cAAc,EAAE,YAAY,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AACrF,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACnD,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAY7C,MAAM,WAAW,GAAG,KAAK,CAAC,aAAa,CAAc;IACpD,OAAO,EAAE,IAAI;IACb,cAAc,EAAE,IAAI;IACpB,KAAK,EAAE,cAAc;IACrB,aAAa,EAAE,IAAI;IACnB,WAAW,EAAE,IAAI;IACjB,KAAK,EAAE,EAAE;IACT,QAAQ,EAAE,EAAE;CACZ,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,OAAO,GAAG,GAAG,EAAE,CAAC,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC;AAE3D,MAAM,CAAC,MAAM,YAAY,GAAsC,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE;IAC/E,MAAM,EAAE,MAAM,EAAE,YAAY,EAAE,GAAG,aAAa,CAAC;QAC9C,WAAW,EAAE,EAAE,MAAM,EAAE,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,GAAG,EAAE,EAAE,EAAE;KAC5C,CAAC,CAAC;IACH,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAgB,GAAG,EAAE;QAChE,OAAO,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;IAC7D,CAAC,CAAC,CAAC;IACH,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,KAAK,CAAC,QAAQ,CACvD,MAAM,CAAC,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,cAAc,CAC9E,CAAC;IAEF,MAAM,aAAa,GAAG,KAAK,CAAC,WAAW,CACtC,CAAC,OAAsB,EAAE,EAAE;QAC1B,UAAU,CAAC,OAAO,CAAC,CAAC;QACpB,YAAY,CAAC,QAAQ,EAAE,OAAO,IAAI,CAAC,CAAC,CAAC;IACtC,CAAC,EACD,CAAC,YAAY,CAAC,CACd,CAAC;IAEF,MAAM,WAAW,GAAG,KAAK,CAAC,WAAW,CACpC,CAAC,GAAW,EAAE,EAAE;QACf,gBAAgB,CAAC,GAAG,CAAC,CAAC;QACtB,YAAY,CAAC,GAAG,EAAE,IAAI,CAAC,CAAC;QACxB,YAAY,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC;IAC3B,CAAC,EACD,CAAC,YAAY,CAAC,CACd,CAAC;IAEF,OAAO,CACN,KAAC,WAAW,CAAC,QAAQ,IACpB,KAAK,EAAE;YACN,KAAK,EAAE,MAAM,CAAC,CAAW;YACzB,QAAQ,EAAE,MAAM,CAAC,GAAa;YAC9B,KAAK,EAAE,aAAa;YACpB,cAAc,EAAE,MAAM,CAAC,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI;YACxD,OAAO;YACP,aAAa;YACb,WAAW;SACX,YAEA,QAAQ,GACa,CACvB,CAAC;AACH,CAAC,CAAC"}

package/dist/utils/arrays.d.ts

@@ -0,0 +1,2 @@
+export declare function makeColumns<T>(list: T[], columns: number | null): T[][];
+//# sourceMappingURL=arrays.d.ts.map

package/dist/utils/arrays.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"arrays.d.ts","sourceRoot":"","sources":["../../src/utils/arrays.ts"],"names":[],"mappings":"AAAA,wBAAgB,WAAW,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,EAAE,OAAO,EAAE,MAAM,GAAG,IAAI,GAAG,CAAC,EAAE,EAAE,CASvE"}

package/dist/utils/arrays.js

@@ -0,0 +1,11 @@
+export function makeColumns(list, columns) {
+    if (!columns) {
+        return [list];
+    }
+    const result = [];
+    for (let i = 0; i < list.length; i += columns) {
+        result.push(list.slice(i, i + columns));
+    }
+    return result;
+}
+//# sourceMappingURL=arrays.js.map

package/dist/utils/arrays.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"arrays.js","sourceRoot":"","sources":["../../src/utils/arrays.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,WAAW,CAAI,IAAS,EAAE,OAAsB;IAC/D,IAAI,CAAC,OAAO,EAAE,CAAC;QACd,OAAO,CAAC,IAAI,CAAC,CAAC;IACf,CAAC;IACD,MAAM,MAAM,GAAU,EAAE,CAAC;IACzB,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC,IAAI,OAAO,EAAE,CAAC;QAC/C,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,GAAG,OAAO,CAAC,CAAC,CAAC;IACzC,CAAC;IACD,OAAO,MAAM,CAAC;AACf,CAAC"}

package/dist/utils/dynamic-base-worker.d.ts

@@ -0,0 +1,8 @@
+export declare class DynamicBaseWorker extends Worker {
+    DEBUG_IS_DYNAMIC_POLYFILL: boolean;
+    constructor(scriptUrl: string | URL, options?: WorkerOptions & {
+        basePath?: string;
+    });
+    postMessage(message: any, transfer?: Transferable[] | StructuredSerializeOptions): void;
+}
+//# sourceMappingURL=dynamic-base-worker.d.ts.map

package/dist/utils/dynamic-base-worker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dynamic-base-worker.d.ts","sourceRoot":"","sources":["../../src/utils/dynamic-base-worker.ts"],"names":[],"mappings":"AAAA,qBAAa,iBAAkB,SAAQ,MAAM;IACrC,yBAAyB,UAAQ;gBAE5B,SAAS,EAAE,MAAM,GAAG,GAAG,EAAE,OAAO,CAAC,EAAE,aAAa,GAAG;QAAE,QAAQ,CAAC,EAAE,MAAM,CAAA;KAAE;IAU7E,WAAW,CAEjB,OAAO,EAAE,GAAG,EACZ,QAAQ,CAAC,EAAE,YAAY,EAAE,GAAG,0BAA0B,GACpD,IAAI;CAGP"}

package/dist/utils/dynamic-base-worker.js

@@ -0,0 +1,19 @@
+export class DynamicBaseWorker extends Worker {
+    DEBUG_IS_DYNAMIC_POLYFILL = true;
+    constructor(scriptUrl, options) {
+        const url = new URL(scriptUrl);
+        if (options?.basePath !== undefined) {
+            url.pathname = `${options.basePath}${url.pathname}`;
+        }
+        else {
+            url.pathname = `${window.__basePath}${url.pathname}`;
+        }
+        super(url.toString(), options);
+    }
+    postMessage(
+    // biome-ignore lint/suspicious/noExplicitAny: <explanation>
+    message, transfer) {
+        super.postMessage(message, transfer);
+    }
+}
+//# sourceMappingURL=dynamic-base-worker.js.map

package/dist/utils/dynamic-base-worker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dynamic-base-worker.js","sourceRoot":"","sources":["../../src/utils/dynamic-base-worker.ts"],"names":[],"mappings":"AAAA,MAAM,OAAO,iBAAkB,SAAQ,MAAM;IACrC,yBAAyB,GAAG,IAAI,CAAC;IAExC,YAAY,SAAuB,EAAE,OAA+C;QACnF,MAAM,GAAG,GAAG,IAAI,GAAG,CAAC,SAAS,CAAC,CAAC;QAC/B,IAAI,OAAO,EAAE,QAAQ,KAAK,SAAS,EAAE,CAAC;YACrC,GAAG,CAAC,QAAQ,GAAG,GAAG,OAAO,CAAC,QAAQ,GAAG,GAAG,CAAC,QAAQ,EAAE,CAAC;QACrD,CAAC;aAAM,CAAC;YACP,GAAG,CAAC,QAAQ,GAAG,GAAG,MAAM,CAAC,UAAU,GAAG,GAAG,CAAC,QAAQ,EAAE,CAAC;QACtD,CAAC;QACD,KAAK,CAAC,GAAG,CAAC,QAAQ,EAAE,EAAE,OAAO,CAAC,CAAC;IAChC,CAAC;IAEM,WAAW;IACjB,4DAA4D;IAC5D,OAAY,EACZ,QAAsD;QAEtD,KAAK,CAAC,WAAW,CAAC,OAAO,EAAE,QAAkD,CAAC,CAAC;IAChF,CAAC;CACD"}

package/dist/utils/functions.d.ts

@@ -0,0 +1,2 @@
+export declare const noop: () => void;
+//# sourceMappingURL=functions.d.ts.map

package/dist/utils/functions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"functions.d.ts","sourceRoot":"","sources":["../../src/utils/functions.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,IAAI,YAEhB,CAAC"}

package/dist/utils/functions.js

@@ -0,0 +1,4 @@
+export const noop = () => {
+    /* no-op */
+};
+//# sourceMappingURL=functions.js.map

package/dist/utils/functions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"functions.js","sourceRoot":"","sources":["../../src/utils/functions.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,IAAI,GAAG,GAAG,EAAE;IACxB,WAAW;AACZ,CAAC,CAAC"}

package/dist/utils/sorting.d.ts

@@ -0,0 +1,3 @@
+import type { Topic } from '../hooks/connection.js';
+export declare function sortStreamsDefault(streams: Topic[]): Topic[];
+//# sourceMappingURL=sorting.d.ts.map

package/dist/utils/sorting.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sorting.d.ts","sourceRoot":"","sources":["../../src/utils/sorting.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,wBAAwB,CAAC;AAcpD,wBAAgB,kBAAkB,CAAC,OAAO,EAAE,KAAK,EAAE,WA2BlD"}

package/dist/utils/sorting.js

@@ -0,0 +1,34 @@
+import { StreamTypes } from '../constants/streams.js';
+const PreferredStreamOrder = [
+    StreamTypes.Encoded,
+    StreamTypes.Raw,
+    StreamTypes.Disparity,
+    StreamTypes.PointCloud,
+    StreamTypes.LeftEncoded,
+    StreamTypes.LeftRaw,
+    StreamTypes.RightEncoded,
+    StreamTypes.RightRaw,
+];
+export function sortStreamsDefault(streams) {
+    return streams.sort((a, b) => {
+        const indexA = PreferredStreamOrder.indexOf(a.name);
+        const indexB = PreferredStreamOrder.indexOf(b.name);
+        if (indexA === -1 && indexB === -1) {
+            if (indexA === -1) {
+                console.warn('No index for stream', a.name);
+            }
+            if (indexB === -1) {
+                console.warn('No index for stream', b.name);
+            }
+            return 0;
+        }
+        if (indexA === -1) {
+            return 1;
+        }
+        if (indexB === -1) {
+            return -1;
+        }
+        return indexA - indexB;
+    });
+}
+//# sourceMappingURL=sorting.js.map

package/dist/utils/sorting.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sorting.js","sourceRoot":"","sources":["../../src/utils/sorting.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAEtD,MAAM,oBAAoB,GAAa;IACtC,WAAW,CAAC,OAAO;IACnB,WAAW,CAAC,GAAG;IACf,WAAW,CAAC,SAAS;IACrB,WAAW,CAAC,UAAU;IACtB,WAAW,CAAC,WAAW;IACvB,WAAW,CAAC,OAAO;IACnB,WAAW,CAAC,YAAY;IACxB,WAAW,CAAC,QAAQ;CACpB,CAAC;AAEF,MAAM,UAAU,kBAAkB,CAAC,OAAgB;IAClD,OAAO,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;QAC5B,MAAM,MAAM,GAAG,oBAAoB,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;QACpD,MAAM,MAAM,GAAG,oBAAoB,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;QAEpD,IAAI,MAAM,KAAK,CAAC,CAAC,IAAI,MAAM,KAAK,CAAC,CAAC,EAAE,CAAC;YACpC,IAAI,MAAM,KAAK,CAAC,CAAC,EAAE,CAAC;gBACnB,OAAO,CAAC,IAAI,CAAC,qBAAqB,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC;YAC7C,CAAC;YAED,IAAI,MAAM,KAAK,CAAC,CAAC,EAAE,CAAC;gBACnB,OAAO,CAAC,IAAI,CAAC,qBAAqB,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC;YAC7C,CAAC;YAED,OAAO,CAAC,CAAC;QACV,CAAC;QAED,IAAI,MAAM,KAAK,CAAC,CAAC,EAAE,CAAC;YACnB,OAAO,CAAC,CAAC;QACV,CAAC;QAED,IAAI,MAAM,KAAK,CAAC,CAAC,EAAE,CAAC;YACnB,OAAO,CAAC,CAAC,CAAC;QACX,CAAC;QAED,OAAO,MAAM,GAAG,MAAM,CAAC;IACxB,CAAC,CAAC,CAAC;AACJ,CAAC"}

package/dist/utils/url.d.ts

@@ -0,0 +1,5 @@
+export declare function parseUrl(pathname: string): {
+    basePath: string;
+    page: string;
+};
+//# sourceMappingURL=url.d.ts.map

package/dist/utils/url.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"url.d.ts","sourceRoot":"","sources":["../../src/utils/url.ts"],"names":[],"mappings":"AAAA,wBAAgB,QAAQ,CAAC,QAAQ,EAAE,MAAM;;;EAOxC"}

package/dist/utils/url.js

@@ -0,0 +1,7 @@
+export function parseUrl(pathname) {
+    const segments = pathname.split('/').filter(Boolean);
+    const page = segments.at(-1) === 'pipeline' ? 'pipeline' : 'streams';
+    const basePath = segments.slice(0, page === 'pipeline' ? -1 : undefined).join('/');
+    return { basePath, page };
+}
+//# sourceMappingURL=url.js.map

package/dist/utils/url.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"url.js","sourceRoot":"","sources":["../../src/utils/url.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,QAAQ,CAAC,QAAgB;IACxC,MAAM,QAAQ,GAAG,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;IAErD,MAAM,IAAI,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,KAAK,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC;IAErE,MAAM,QAAQ,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC,EAAE,IAAI,KAAK,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IACnF,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;AAC3B,CAAC"}

package/package.json

@@ -1,11 +1,11 @@
 {
 	"name": "@luxonis/depthai-viewer-common",
-	"version": "0.0.2",
+	"version": "0.0.4",
 	"description": "Common utilities and components for building a frontend application for DepthAI projects",
 	"license": "ISC",
 	"author": "Luxonis Holding Corporation",
 	"type": "module",
-	"main": "index.js",
+	"main": "dist/index.js",
 	"exports": {
 		".": "./dist/index.js"
 	},
@@ -21,9 +21,10 @@
 		"@luxonis/visualizer-protobuf": "^2.31.0",
 		"@luxonis/depthai-pipeline-lib": "^1.4.8",
 		"@luxonis/common-fe-components": "1.14.0",
-		"@luxonis/common-fe-utils": "1.14.0",
+		"@luxonis/common-fe-utils": "1.20.0",
 		"lodash": "^4.17.21",
-		"zod": "^3.24.3"
+		"zod": "^3.24.3",
+		"react-resizable-panels": "^2.1.3"
 	},
 	"peerDependencies": {
 		"react": "^18.3.1",

package/src/components/ButtonLink.tsx

@@ -1,12 +0,0 @@
-import type React from 'react';
-import { Button, type ButtonProps } from '@luxonis/common-fe-components';
-import { Link, type LinkProps } from './Link.js';
-
-export type ButtonLinkProps = ButtonProps & {
-	linkProps: LinkProps;
-};
-
-export const ButtonLink: React.FC<ButtonLinkProps> = ({ linkProps, ...buttonProps }) => {
-	const button = <Button {...buttonProps} />;
-	return !buttonProps.disabled ? <Link {...linkProps}>{button}</Link> : button;
-};

package/src/components/CTASubLabel.tsx

@@ -1,39 +0,0 @@
-import { ExternalLink, Flex, SubLabel } from '@luxonis/common-fe-components';
-import { useConnection } from '../providers/ConnectionProvider.js';
-import React from 'react';
-
-const DISPLAY_LABEL_TIMEOUT = 30_000 as const;
-
-export const CTASubLabel = () => {
-	const { connected, topics } = useConnection();
-	const [shouldDisplayLabel, setShouldDisplayLabel] = React.useState(false);
-	React.useEffect(() => {
-		if (connected && topics.length === 0 && !shouldDisplayLabel) {
-			const timeout = setTimeout(() => setShouldDisplayLabel(true), DISPLAY_LABEL_TIMEOUT);
-			return () => clearTimeout(timeout);
-		}
-	}, [connected, topics, shouldDisplayLabel]);
-
-	return (
-		shouldDisplayLabel && (
-			<Flex textAlign="center">
-				<SubLabel
-					text={
-						<p>
-							You can purchase an OAK camera from the{' '}
-							<ExternalLink raw to="https://shop.luxonis.com" color="light.active">
-								<SubLabel color="link" text="Luxonis Store" />
-							</ExternalLink>
-							. After your purchase,
-							<br /> explore the{' '}
-							<ExternalLink raw to="https://rvc4.docs.luxonis.com/hardware" color="light.active">
-								<SubLabel color="link" text="Luxonis Documentation" />
-							</ExternalLink>{' '}
-							for comprehensive setup tutorials to get started.
-						</p>
-					}
-				/>
-			</Flex>
-		)
-	);
-};

package/src/components/Link.tsx

@@ -1,10 +0,0 @@
-import { Link as _Link } from 'react-router-dom';
-import { useNavigation } from '../hooks/navigation.js';
-
-export type LinkProps = { to: 'pipeline' | 'streams' };
-
-export const Link: React.FC<React.PropsWithChildren<LinkProps>> = ({ to, children }) => {
-	const { makePath } = useNavigation();
-
-	return <_Link to={makePath(to)}>{children}</_Link>;
-};

package/src/components/Pipeline.tsx

@@ -1,35 +0,0 @@
-import { Flex, Header } from '@luxonis/common-fe-components';
-import { PipelineCanvas } from '@luxonis/depthai-pipeline-lib';
-import { useConnection } from '../providers/ConnectionProvider.js';
-import React from 'react';
-
-const PIPELINE_LOADING_TIMEOUT = 60_000;
-
-export const Pipeline: React.FC = () => {
-	const { pipeline, isPipelineLoading, setIsPipelineLoading } = useConnection();
-
-	React.useEffect(() => {
-		if (isPipelineLoading && pipeline === undefined) {
-			const timeout = setTimeout(() => {
-				setIsPipelineLoading(false);
-			}, PIPELINE_LOADING_TIMEOUT);
-			return () => clearTimeout(timeout);
-		}
-	}, [isPipelineLoading, pipeline, setIsPipelineLoading]);
-
-	if (isPipelineLoading) {
-		return (
-			<Flex align="center" justify="center" full>
-				<Header text="Loading pipeline..." />
-			</Flex>
-		);
-	}
-
-	return pipeline === undefined ? (
-		<Flex align="center" justify="center" full>
-			<Header text="Pipeline is not available" />
-		</Flex>
-	) : (
-		<PipelineCanvas pipeline={pipeline} height="full" />
-	);
-};

package/src/components/Resizable.tsx

@@ -1,56 +0,0 @@
-import React from 'react';
-import { Panel, PanelGroup, PanelResizeHandle } from 'react-resizable-panels';
-
-export type ResizableItem = {
-	component: React.ReactNode;
-};
-
-export type ResizableLayoutProps = {
-	id?: string | null;
-	items: ResizableItem[][];
-};
-
-export const ResizableLayout: React.FC<ResizableLayoutProps> = ({
-	items,
-	id = 'resizable-layout',
-}) => {
-	const groupStyles: React.CSSProperties = React.useMemo(
-		() => ({
-			display: 'flex',
-			gap: '5px',
-		}),
-		[],
-	);
-
-	const panels = React.useMemo(
-		() =>
-			items.map((row, rowIndex) => (
-				<React.Fragment key={`resizable-row-${rowIndex}`}>
-					<Panel order={rowIndex}>
-						<PanelGroup
-							autoSaveId={id && `${id}-${rowIndex}`}
-							direction="horizontal"
-							style={groupStyles}
-						>
-							{row.map((item, itemIndex) => (
-								<React.Fragment key={`resizable-row-${rowIndex}-item-${itemIndex}`}>
-									<Panel order={itemIndex} style={{ display: 'flex' }}>
-										{item.component}
-									</Panel>
-									{itemIndex !== row.length - 1 && <PanelResizeHandle />}
-								</React.Fragment>
-							))}
-						</PanelGroup>
-					</Panel>
-					{rowIndex !== items.length - 1 && <PanelResizeHandle />}
-				</React.Fragment>
-			)),
-		[groupStyles, id, items],
-	);
-
-	return (
-		<PanelGroup autoSaveId={id} direction="vertical" style={groupStyles}>
-			{panels}
-		</PanelGroup>
-	);
-};