@darajs/core 0.4.8

package/dist/components/progress-tracker/progress-tracker.js

@@ -0,0 +1,204 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/* eslint-disable react-hooks/exhaustive-deps */
+import { useContext, useEffect, useRef, useState } from 'react';
+import styled from '@darajs/styled-components';
+import { ProgressBar } from '@darajs/ui-components';
+import { useTaskContext } from '../../shared/context/global-task-context';
+import websocketCtx from '../../shared/context/websocket-context';
+const POLLING_INTERVAL = 100;
+const FAKE_PROGRESS_INTERVAL = 100;
+const ESTIMATE_RATIO = 0.85;
+/**
+ * Progress estimator function - roughly `y = 1 - exp(x)`.
+ *
+ * @param time time in milliseconds
+ * @param timeConstant seconds to reach 63%, then 86%, then 95%, then 98%
+ */
+function estimateProgress(time, timeConstant = 10) {
+    // This reaches in 63% in 10s, 86% in 20s
+    return 1 - Math.exp((-1 * time) / (FAKE_PROGRESS_INTERVAL * 10 * timeConstant));
+}
+/**
+ * Build a generator which will return fake progress
+ *
+ * @param progressStart starting point
+ * @param progressEnd ending point
+ * @param estimatedTime estimated time the faking should take; if specified, the fake progress
+ *  will use 'real'/estimated values for 60% of the estimated time before changing to a fake algo
+ */
+function fakeProgressGenerator(progressStart, progressEnd, estimatedTime) {
+    const difference = progressEnd - progressStart;
+    const estimatedProgressUpdates = [];
+    let timeConstant = 10;
+    // If estimated time is set, fake progress will start with estimated updates
+    if (estimatedTime && estimatedTime !== 0) {
+        const estimatedDifference = ESTIMATE_RATIO * difference;
+        const estimatedProgressTime = ESTIMATE_RATIO * estimatedTime;
+        const numberOfUpdates = estimatedProgressTime / FAKE_PROGRESS_INTERVAL;
+        const estimatedProgressChunk = estimatedDifference / numberOfUpdates;
+        let t = 0;
+        let p = progressStart;
+        // Compute list of 'estimated' (estimated) progress updates
+        while (t < estimatedProgressTime) {
+            p += estimatedProgressChunk;
+            t += FAKE_PROGRESS_INTERVAL;
+            estimatedProgressUpdates.push(p);
+        }
+        // Set time constant (time to reach 63% of the target) to the remaining chunk of estimated time
+        timeConstant = (1 - ESTIMATE_RATIO) * (estimatedTime / 1000);
+    }
+    // Build internal generator which returns estimated updates, then fake updates
+    function* getNextUpdate() {
+        let startFrom = progressStart;
+        // First we return estimated updates
+        while (estimatedProgressUpdates.length > 0) {
+            const update = estimatedProgressUpdates.shift();
+            startFrom = update;
+            yield update;
+        }
+        let i = 0;
+        // Then keep returning fake updates based on the estimate function
+        while (true) {
+            // Estimated is in range 0-1
+            const estimated = estimateProgress(FAKE_PROGRESS_INTERVAL * i, timeConstant);
+            // Rescale estimated to range of startFrom->progressEnd
+            yield estimated * (progressEnd - startFrom) + startFrom;
+            i++;
+        }
+    }
+    return getNextUpdate();
+}
+const ProgressWrapper = styled.div `
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    padding: 1rem;
+`;
+const ProgressHeader = styled.h4 `
+    font-size: 1.2rem;
+`;
+const ProgressMessage = styled.span `
+    font-size: ${(props) => props.theme.font.size};
+`;
+/**
+ * Retrieve a list of running tasks if there are any
+ *
+ * @param tasksContext
+ * @param variablesRef
+ */
+function findRunningTasks(tasksContext, variablesRef) {
+    var _a;
+    // check if there are variables the component is subscribed to, and there are tasks running
+    if (!(((_a = variablesRef === null || variablesRef === void 0 ? void 0 : variablesRef.current) === null || _a === void 0 ? void 0 : _a.size) > 0 && tasksContext.hasRunningTasks())) {
+        return [];
+    }
+    return tasksContext.getVariableTasks(...variablesRef.current.values());
+}
+/**
+ * ProgressTracker component can be used as a placeholder to replace the standard loading spinner.
+ * If a task is running, data is captured from the task function and a ProgressBar with live updates in shown.
+ */
+function ProgressTracker(props) {
+    const taskContext = useTaskContext();
+    const { client: wsClient } = useContext(websocketCtx);
+    const [latestProgressUpdate, setLatestProgressUpdate] = useState(null); // latest progress message
+    const [progress, setProgress] = useState(null);
+    const fakeInterval = useRef(null);
+    const [subscribedTaskIds, setSubscribedTaskIds] = useState([]);
+    const [restartTrigger, setRestartTrigger] = useState(0); // used to trigger a restart of polling for a running task
+    useEffect(() => {
+        let progressSubscription = null;
+        // Start polling and looking for running tasks
+        const timer = setInterval(() => {
+            const taskIds = findRunningTasks(taskContext, props.variablesRef);
+            // Once tasks are found, subscribe to their progress updates and stop polling
+            // This handles a component having multiple tasks running - it's a limitation that only one of them
+            // can be tracked; this is only an issue if a component calls useVariable for multiple inputs
+            if (taskIds.length > 0) {
+                setSubscribedTaskIds(taskIds);
+                progressSubscription = wsClient
+                    .progressUpdates$(...taskIds)
+                    .subscribe((notif) => setLatestProgressUpdate(notif.message));
+                clearInterval(timer);
+            }
+        }, POLLING_INTERVAL);
+        return () => {
+            // Clean up intervals and subscriptions
+            clearInterval(timer);
+            if (fakeInterval.current) {
+                clearInterval(fakeInterval.current);
+            }
+            progressSubscription === null || progressSubscription === void 0 ? void 0 : progressSubscription.unsubscribe();
+        };
+    }, [restartTrigger]);
+    /**
+     * Handle cancellations of subscribed task ids.
+     */
+    useEffect(() => {
+        let subscription = null;
+        if (subscribedTaskIds.length > 0) {
+            subscription = wsClient.taskStatusUpdates$(...subscribedTaskIds).subscribe((newStatus) => {
+                if (newStatus === 'CANCELED') {
+                    // Reset component
+                    if (fakeInterval.current) {
+                        clearInterval(fakeInterval.current);
+                    }
+                    setLatestProgressUpdate(null);
+                    setSubscribedTaskIds([]);
+                    setProgress(null);
+                    // Restart polling
+                    setRestartTrigger((v) => v + 1);
+                }
+            });
+        }
+        return () => {
+            subscription === null || subscription === void 0 ? void 0 : subscription.unsubscribe();
+        };
+    }, [subscribedTaskIds]);
+    /**
+     * Handle progress updates.
+     * This is in a chained effect rather than in the subscription handler since it needs
+     * access to the latest state.
+     */
+    useEffect(() => {
+        var _a, _b;
+        if (!latestProgressUpdate) {
+            return;
+        }
+        // Clear faking process interval if its set
+        if (fakeInterval.current) {
+            clearInterval(fakeInterval.current);
+        }
+        // whether we received a message to start fake mode
+        const shouldStartFakeProgress = latestProgressUpdate.message.startsWith('FAKE_PROGRESS__');
+        if (!shouldStartFakeProgress) {
+            // If not, just update progress
+            setProgress({
+                message: latestProgressUpdate.message,
+                progress: latestProgressUpdate.progress,
+            });
+            return;
+        }
+        // Start fake mode and update message to the sent message
+        const [, estimatedTime, message] = latestProgressUpdate.message.split('__');
+        setProgress({
+            message,
+            progress: (_a = progress === null || progress === void 0 ? void 0 : progress.progress) !== null && _a !== void 0 ? _a : 0,
+        });
+        const progressGenerator = fakeProgressGenerator((_b = progress === null || progress === void 0 ? void 0 : progress.progress) !== null && _b !== void 0 ? _b : 0, latestProgressUpdate.progress, parseFloat(estimatedTime));
+        fakeInterval.current = setInterval(() => {
+            const nextValue = progressGenerator.next().value;
+            setProgress({
+                message,
+                progress: nextValue,
+            });
+        }, FAKE_PROGRESS_INTERVAL);
+    }, [latestProgressUpdate]);
+    // If no task is running, just show a standard loading bar
+    if (subscribedTaskIds.length === 0) {
+        return props.fallback;
+    }
+    return (_jsxs(ProgressWrapper, { children: [_jsx(ProgressHeader, { children: "Task in progress" }), progress && (_jsxs(_Fragment, { children: [_jsx(ProgressMessage, { children: progress.message }), _jsx(ProgressBar, { progress: parseFloat(progress.progress.toFixed(2)) })] }))] }));
+}
+export default ProgressTracker;
+//# sourceMappingURL=progress-tracker.js.map

package/dist/components/progress-tracker/progress-tracker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"progress-tracker.js","sourceRoot":"","sources":["../../../js/components/progress-tracker/progress-tracker.tsx"],"names":[],"mappings":"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"}

package/dist/components/router-content/router-content.d.ts

@@ -0,0 +1,14 @@
+import { RouteContent } from '../../types';
+interface RouterContentProps {
+    /** The list of routes to render content conditionally from */
+    routes: Array<RouteContent>;
+}
+/**
+ * The RouterContent component takes a list of RouterContent objects from the api and create a react-router based on
+ * them.
+ *
+ * @param props - the component props
+ */
+declare function RouterContent(props: RouterContentProps): JSX.Element;
+export default RouterContent;
+//# sourceMappingURL=router-content.d.ts.map

package/dist/components/router-content/router-content.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"router-content.d.ts","sourceRoot":"","sources":["../../../js/components/router-content/router-content.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAUvC,UAAU,kBAAkB;IACxB,8DAA8D;IAC9D,MAAM,EAAE,KAAK,CAAC,YAAY,CAAC,CAAC;CAC/B;AAED;;;;;GAKG;AACH,iBAAS,aAAa,CAAC,KAAK,EAAE,kBAAkB,GAAG,GAAG,CAAC,OAAO,CAkB7D;AAED,eAAe,aAAa,CAAC"}

package/dist/components/router-content/router-content.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Redirect, Route, Switch } from 'react-router-dom';
+import { DynamicComponent, PrivateRoute } from '../../shared';
+const PageNotFound = () => {
+    return (_jsx("div", { style: { alignItems: 'center', display: 'flex', justifyContent: 'center', width: '100%' }, children: _jsx("h2", { children: "404 - page not found" }) }));
+};
+/**
+ * The RouterContent component takes a list of RouterContent objects from the api and create a react-router based on
+ * them.
+ *
+ * @param props - the component props
+ */
+function RouterContent(props) {
+    return (_jsxs(Switch, { children: [props.routes.map(({ content, route, on_load, name }) => (_jsx(Route, { path: route, render: () => (_jsx(PrivateRoute, { name: name, on_load: on_load, children: _jsx(DynamicComponent, { component: content }) })) }, route))), _jsx(Route, { exact: true, path: "/", render: () => _jsx(Redirect, { to: props.routes[0].route }) }), _jsx(Route, { component: PageNotFound })] }));
+}
+export default RouterContent;
+//# sourceMappingURL=router-content.js.map

package/dist/components/router-content/router-content.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"router-content.js","sourceRoot":"","sources":["../../../js/components/router-content/router-content.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAE3D,OAAO,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAG1D,MAAM,YAAY,GAAG,GAAgB,EAAE;IACnC,OAAO,CACH,cAAK,KAAK,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,EAAE,YAC1F,gDAA6B,GAC3B,CACT,CAAC;AACN,CAAC,CAAC;AAOF;;;;;GAKG;AACH,SAAS,aAAa,CAAC,KAAyB;IAC5C,OAAO,CACH,MAAC,MAAM,eACF,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,CACrD,KAAC,KAAK,IAEF,IAAI,EAAE,KAAK,EACX,MAAM,EAAE,GAAG,EAAE,CAAC,CACV,KAAC,YAAY,IAAC,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,YACtC,KAAC,gBAAgB,IAAC,SAAS,EAAE,OAAO,GAAI,GAC7B,CAClB,IANI,KAAK,CAOZ,CACL,CAAC,EACF,KAAC,KAAK,IAAC,KAAK,QAAC,IAAI,EAAC,GAAG,EAAC,MAAM,EAAE,GAAG,EAAE,CAAC,KAAC,QAAQ,IAAC,EAAE,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,KAAK,GAAI,GAAI,EAC/E,KAAC,KAAK,IAAC,SAAS,EAAE,YAAY,GAAI,IAC7B,CACZ,CAAC;AACN,CAAC;AAED,eAAe,aAAa,CAAC"}

package/dist/components/side-bar-frame/side-bar-frame.d.ts

@@ -0,0 +1,21 @@
+import { ComponentInstance } from '../../types';
+interface SideBarFrameProps {
+    content: ComponentInstance;
+    hide_logo?: boolean;
+    logo_path?: string;
+    logo_position: 'top' | 'bottom';
+    logo_width?: string;
+    side_bar: ComponentInstance;
+    side_bar_padding?: string;
+    side_bar_position?: 'left' | 'right';
+    side_bar_width?: string;
+}
+/**
+ * The SideBarFrame component is designed as a root component for an app built using the Dara core framework. It adds
+ * a dark blue side bar to the left of the screen and displays a main content on a light grey background in the center
+ *
+ * It exposes two slots for registering content: side-bar & content
+ */
+declare function SideBarFrame(props: SideBarFrameProps): JSX.Element;
+export default SideBarFrame;
+//# sourceMappingURL=side-bar-frame.d.ts.map

package/dist/components/side-bar-frame/side-bar-frame.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"side-bar-frame.d.ts","sourceRoot":"","sources":["../../../js/components/side-bar-frame/side-bar-frame.tsx"],"names":[],"mappings":"AAWA,OAAO,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAuF5C,UAAU,iBAAiB;IACvB,OAAO,EAAE,iBAAiB,CAAC;IAC3B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,EAAE,KAAK,GAAG,QAAQ,CAAC;IAChC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,iBAAiB,CAAC;IAC5B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,iBAAiB,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACrC,cAAc,CAAC,EAAE,MAAM,CAAC;CAC3B;AAID;;;;;GAKG;AACH,iBAAS,YAAY,CAAC,KAAK,EAAE,iBAAiB,GAAG,GAAG,CAAC,OAAO,CAkD3D;AAED,eAAe,YAAY,CAAC"}

package/dist/components/side-bar-frame/side-bar-frame.js

@@ -0,0 +1,87 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { transparentize } from 'polished';
+import styled, { ThemeContext, useTheme } from '@darajs/styled-components';
+import { Button } from '@darajs/ui-components';
+import { useConfig } from '../../api';
+import CausalensDark from '../../assets/causalens-dark.svg';
+import CausalensLight from '../../assets/causalens-light.svg';
+import DaraDark from '../../assets/dara-dark.svg';
+import DaraLight from '../../assets/dara-light.svg';
+import { DirectionCtx, DynamicComponent, Wrapper, getIcon, resolveTheme } from '../../shared';
+import { prependBaseUrl } from '../../utils';
+const shouldForwardProp = (prop) => !['width'].includes(prop);
+const SideBar = styled.div.withConfig({ shouldForwardProp }) `
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    width: ${(props) => props.width || '240px'};
+    min-width: 150px;
+    max-width: 350px;
+    height: 100%;
+    padding: 2rem 1rem 1.5rem;
+
+    color: ${(props) => props.theme.colors.secondary};
+
+    background: ${(props) => {
+    return `radial-gradient(circle closest-corner at 10% 50%, ${transparentize(0.4, props.theme.colors.background)} 0%, ${transparentize(0.9, props.theme.colors.blue4)} 100%),radial-gradient(circle closest-corner at 5% 10%, ${transparentize(0.8, props.theme.colors.error)} 0%, ${transparentize(0.9, props.theme.colors.blue4)} 230%),radial-gradient(circle closest-corner at 50% 100%, ${transparentize(0.8, props.theme.colors.success)} 200%, ${transparentize(0.2, props.theme.colors.blue4)} 610%)`;
+}};
+    box-shadow:
+        rgb(20 20 25 / 15%) 0 4px 16px,
+        rgb(20 20 25 / 15%) 0 8px 32px;
+`;
+const LogoutButton = styled(Button) `
+    width: 80%;
+    margin-bottom: 1.5rem;
+    padding: 1rem;
+    border-radius: 1rem;
+
+    a {
+        color: ${(props) => props.theme.colors.blue1};
+        text-decoration: none;
+    }
+
+    svg {
+        cursor: pointer;
+        margin-right: 1rem;
+        color: ${(props) => props.theme.colors.blue1};
+    }
+`;
+const BuiltWithLink = styled.a `
+    display: flex;
+    gap: 0.2rem;
+    align-items: center;
+
+    font-size: 0.75rem;
+    color: inherit;
+    text-decoration: none;
+
+    :hover {
+        text-decoration: underline;
+    }
+`;
+const LogoImage = styled.img `
+    width: ${(props) => props.width};
+    max-width: 200px;
+    margin: 1rem 0 2rem;
+`;
+const LogoutArrow = getIcon('fa-solid fa-arrow-right-from-bracket');
+/**
+ * The SideBarFrame component is designed as a root component for an app built using the Dara core framework. It adds
+ * a dark blue side bar to the left of the screen and displays a main content on a light grey background in the center
+ *
+ * It exposes two slots for registering content: side-bar & content
+ */
+function SideBarFrame(props) {
+    var _a, _b;
+    const theme = useTheme();
+    const { data: config } = useConfig();
+    const logo = props.logo_path && (_jsx(LogoImage, { alt: "Logo", src: prependBaseUrl(props.logo_path), width: props.logo_width }));
+    const logoSrc = theme.themeType === 'dark' ? DaraDark : DaraLight;
+    const causalensLogoSrc = theme.themeType === 'dark' ? CausalensDark : CausalensLight;
+    const daraLogo = _jsx("img", { alt: "Dara Logo", src: logoSrc });
+    const causalensLogo = _jsx("img", { alt: "causaLens Logo", src: causalensLogoSrc });
+    return (_jsxs(Wrapper, { backgroundColor: theme.colors.background, children: [props.side_bar_position === 'right' && (_jsx(Wrapper, { children: props.content && _jsx(DynamicComponent, { component: props.content }) })), _jsx(ThemeContext.Provider, { value: resolveTheme((_a = config === null || config === void 0 ? void 0 : config.theme) === null || _a === void 0 ? void 0 : _a.main, (_b = config === null || config === void 0 ? void 0 : config.theme) === null || _b === void 0 ? void 0 : _b.base), children: _jsxs(SideBar, { style: { padding: props.side_bar_padding }, width: props.side_bar_width, children: [!props.hide_logo && props.logo_position !== 'bottom' && logo, _jsx(Wrapper, { direction: "column", children: _jsx(DirectionCtx.Provider, { value: { direction: 'column' }, children: props.side_bar && _jsx(DynamicComponent, { component: props.side_bar }) }) }), !props.hide_logo && props.logo_position === 'bottom' && logo, _jsxs(LogoutButton, { href: "/logout", styling: "error", children: [_jsx(LogoutArrow, { style: { marginRight: '0.5rem' } }), "Logout"] }), _jsxs(BuiltWithLink, { href: "https://github.com/causalens/dara", target: "_blank", rel: "noopener noreferrer", children: ["Built with ", daraLogo] }), (config === null || config === void 0 ? void 0 : config.powered_by_causalens) && (_jsxs(BuiltWithLink, { href: "https://causalens.com/?utm_source=dara&utm_medium=direct&utm_campaign=dara_platform", target: "_blank", rel: "noopener", children: [_jsx("span", { style: { marginTop: '0.4375rem' }, children: "Powered by" }), " ", causalensLogo] }))] }) }), props.side_bar_position !== 'right' && (_jsx(Wrapper, { style: { padding: '2rem 3rem' }, children: props.content && _jsx(DynamicComponent, { component: props.content }) }))] }));
+}
+export default SideBarFrame;
+//# sourceMappingURL=side-bar-frame.js.map

package/dist/components/side-bar-frame/side-bar-frame.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"side-bar-frame.js","sourceRoot":"","sources":["../../../js/components/side-bar-frame/side-bar-frame.tsx"],"names":[],"mappings":"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"}

package/dist/components/top-bar-frame/top-bar-frame.d.ts

@@ -0,0 +1,16 @@
+import { ComponentInstance } from '../../types';
+interface TopBarFrameProps {
+    content: ComponentInstance;
+    hide_logo?: boolean;
+    logo_path?: string;
+    logo_width?: string;
+    top_bar: ComponentInstance;
+    top_bar_height?: string;
+    top_bar_padding?: string;
+}
+/**
+ * The TopBarFrame component is designed as a root component for an app built using the Dara core framework.
+ */
+declare function TopBarFrame(props: TopBarFrameProps): JSX.Element;
+export default TopBarFrame;
+//# sourceMappingURL=top-bar-frame.d.ts.map

package/dist/components/top-bar-frame/top-bar-frame.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"top-bar-frame.d.ts","sourceRoot":"","sources":["../../../js/components/top-bar-frame/top-bar-frame.tsx"],"names":[],"mappings":"AASA,OAAO,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AA4F5C,UAAU,gBAAgB;IACtB,OAAO,EAAE,iBAAiB,CAAC;IAC3B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,OAAO,EAAE,iBAAiB,CAAC;IAC3B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC5B;AAID;;GAEG;AACH,iBAAS,WAAW,CAAC,KAAK,EAAE,gBAAgB,GAAG,GAAG,CAAC,OAAO,CAoCzD;AAED,eAAe,WAAW,CAAC"}

package/dist/components/top-bar-frame/top-bar-frame.js

@@ -0,0 +1,89 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { transparentize } from 'polished';
+import styled, { ThemeContext, useTheme } from '@darajs/styled-components';
+import { Button } from '@darajs/ui-components';
+import { useConfig } from '../../api';
+import DaraDark from '../../assets/dara-dark.svg';
+import DaraLight from '../../assets/dara-light.svg';
+import { DirectionCtx, DynamicComponent, Wrapper, getIcon, resolveTheme } from '../../shared';
+import { prependBaseUrl } from '../../utils';
+const shouldForwardProp = (prop) => !['width'].includes(prop);
+const TopBar = styled.div.withConfig({ shouldForwardProp }) `
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    align-items: flex-end;
+
+    width: 100%;
+    height: ${(props) => props.height || '124px'};
+    min-height: 100px;
+    max-height: 350px;
+    padding: 2rem 3rem;
+
+    color: ${(props) => props.theme.colors.secondary};
+
+    background: ${(props) => {
+    return `
+        radial-gradient(farthest-side at 50% 0%, ${transparentize(0.7, props.theme.colors.background)} 0%, ${transparentize(0.9, props.theme.colors.blue4)} 50%),
+        radial-gradient(at -50% 90%, ${transparentize(0.5, props.theme.colors.error)} 0%, ${transparentize(0.7, props.theme.colors.blue4)} 45%),
+        radial-gradient(at 130% 100%, ${transparentize(0.4, props.theme.colors.success)} 0%, ${transparentize(0.5, props.theme.colors.blue4)} 50%)`;
+}};
+    box-shadow:
+        rgb(20 20 25 / 15%) 0 4px 16px,
+        rgb(20 20 25 / 15%) 0 8px 32px;
+`;
+const TopBarContent = styled.div `
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+`;
+const LogoutButton = styled(Button) `
+    width: 7rem;
+    height: 3rem;
+    margin-left: 0.5rem;
+    padding: 1rem;
+
+    border-radius: 1rem;
+
+    a {
+        color: ${(props) => props.theme.colors.blue1};
+        text-decoration: none;
+    }
+
+    svg {
+        cursor: pointer;
+        margin-right: 1rem;
+        color: ${(props) => props.theme.colors.blue1};
+    }
+`;
+const RouteButtons = styled(Wrapper) `
+    gap: 0.5rem;
+    align-items: center;
+`;
+const BuiltWithSpan = styled.span `
+    display: flex;
+    gap: 0.2rem;
+    align-items: center;
+    font-size: 0.75rem;
+`;
+const LogoImage = styled.img `
+    width: ${(props) => props.width};
+    max-width: 200px;
+    margin: 0 3rem 0 0;
+`;
+const LogoutArrow = getIcon('fa-solid fa-arrow-right-from-bracket');
+/**
+ * The TopBarFrame component is designed as a root component for an app built using the Dara core framework.
+ */
+function TopBarFrame(props) {
+    var _a, _b;
+    const theme = useTheme();
+    const { data: config } = useConfig();
+    const logo = props.logo_path && (_jsx(LogoImage, { alt: "Logo", src: prependBaseUrl(props.logo_path), width: props.logo_width }));
+    const logoSrc = theme.themeType === 'dark' ? DaraDark : DaraLight;
+    const daraLogo = _jsx("img", { alt: "Dara", src: logoSrc });
+    return (_jsxs(Wrapper, { backgroundColor: theme.colors.background, direction: "column", children: [_jsx(ThemeContext.Provider, { value: resolveTheme((_a = config === null || config === void 0 ? void 0 : config.theme) === null || _a === void 0 ? void 0 : _a.main, (_b = config === null || config === void 0 ? void 0 : config.theme) === null || _b === void 0 ? void 0 : _b.base), children: _jsxs(TopBar, { height: props.top_bar_height, style: { padding: props.top_bar_padding }, children: [_jsxs(TopBarContent, { children: [!props.hide_logo && logo, props.top_bar && (_jsx(RouteButtons, { direction: "row", children: _jsx(DirectionCtx.Provider, { value: { direction: 'row' }, children: props.top_bar && _jsx(DynamicComponent, { component: props.top_bar }) }) })), _jsxs(LogoutButton, { href: "/logout", styling: "error", children: [_jsx(LogoutArrow, { style: { marginRight: '0.5rem' } }), "Logout"] })] }), _jsxs(BuiltWithSpan, { children: ["Built with ", daraLogo] })] }) }), _jsx(Wrapper, { style: { padding: '2rem 3rem' }, children: props.content && _jsx(DynamicComponent, { component: props.content }) })] }));
+}
+export default TopBarFrame;
+//# sourceMappingURL=top-bar-frame.js.map

package/dist/components/top-bar-frame/top-bar-frame.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"top-bar-frame.js","sourceRoot":"","sources":["../../../js/components/top-bar-frame/top-bar-frame.tsx"],"names":[],"mappings":"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"}

package/dist/devtools/backend-errors/backend-errors-ctx.d.ts

@@ -0,0 +1,17 @@
+import { ServerErrorMessage } from '../../api/websocket';
+interface BackendErrorContext {
+    clearErrors: () => void;
+    errors: ServerErrorMessage['message'][];
+}
+/**
+ * Provides a live stream of backend errors
+ */
+export declare function BackendErrorsProvider(props: {
+    children: JSX.Element;
+}): JSX.Element;
+/**
+ * Get the current backend errors from context
+ */
+export declare function useBackendErrors(): BackendErrorContext;
+export {};
+//# sourceMappingURL=backend-errors-ctx.d.ts.map

package/dist/devtools/backend-errors/backend-errors-ctx.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"backend-errors-ctx.d.ts","sourceRoot":"","sources":["../../../js/devtools/backend-errors/backend-errors-ctx.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AA2BrD,UAAU,mBAAmB;IACzB,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,MAAM,EAAE,kBAAkB,CAAC,SAAS,CAAC,EAAE,CAAC;CAC3C;AAID;;GAEG;AACH,wBAAgB,qBAAqB,CAAC,KAAK,EAAE;IAAE,QAAQ,EAAE,GAAG,CAAC,OAAO,CAAA;CAAE,GAAG,GAAG,CAAC,OAAO,CAInF;AAED;;GAEG;AACH,wBAAgB,gBAAgB,IAAI,mBAAmB,CAEtD"}

package/dist/devtools/backend-errors/backend-errors-ctx.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useEffect, useState } from 'react';
+import WebSocketCtx from '../../shared/context/websocket-context';
+/**
+ * Helper hook to subscribe to errors coming from the backend
+ */
+function useBackendErrorsSubscription() {
+    const [errors, setErrors] = useState([]);
+    const { client } = useContext(WebSocketCtx);
+    useEffect(() => {
+        const sub = client.serverErrors$().subscribe((err) => {
+            setErrors((prev) => [...prev, err.message]);
+        });
+        return () => {
+            sub.unsubscribe();
+        };
+    });
+    const clearErrors = useCallback(() => {
+        setErrors([]);
+    }, []);
+    return [errors, clearErrors];
+}
+const BackendErrorsCtx = createContext(null);
+/**
+ * Provides a live stream of backend errors
+ */
+export function BackendErrorsProvider(props) {
+    const [errors, clearErrors] = useBackendErrorsSubscription();
+    return _jsx(BackendErrorsCtx.Provider, { value: { clearErrors, errors }, children: props.children });
+}
+/**
+ * Get the current backend errors from context
+ */
+export function useBackendErrors() {
+    return useContext(BackendErrorsCtx);
+}
+//# sourceMappingURL=backend-errors-ctx.js.map

package/dist/devtools/backend-errors/backend-errors-ctx.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"backend-errors-ctx.js","sourceRoot":"","sources":["../../../js/devtools/backend-errors/backend-errors-ctx.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,WAAW,EAAE,UAAU,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAGpF,OAAO,YAAY,MAAM,oCAAoC,CAAC;AAE9D;;GAEG;AACH,SAAS,4BAA4B;IACjC,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IACzC,MAAM,EAAE,MAAM,EAAE,GAAG,UAAU,CAAC,YAAY,CAAC,CAAC;IAE5C,SAAS,CAAC,GAAG,EAAE;QACX,MAAM,GAAG,GAAG,MAAM,CAAC,aAAa,EAAE,CAAC,SAAS,CAAC,CAAC,GAAG,EAAE,EAAE;YACjD,SAAS,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,GAAG,IAAI,EAAE,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC;QAChD,CAAC,CAAC,CAAC;QAEH,OAAO,GAAG,EAAE;YACR,GAAG,CAAC,WAAW,EAAE,CAAC;QACtB,CAAC,CAAC;IACN,CAAC,CAAC,CAAC;IAEH,MAAM,WAAW,GAAG,WAAW,CAAC,GAAG,EAAE;QACjC,SAAS,CAAC,EAAE,CAAC,CAAC;IAClB,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CAAC,MAAM,EAAE,WAAW,CAAC,CAAC;AACjC,CAAC;AAOD,MAAM,gBAAgB,GAAG,aAAa,CAAsB,IAAI,CAAC,CAAC;AAElE;;GAEG;AACH,MAAM,UAAU,qBAAqB,CAAC,KAAgC;IAClE,MAAM,CAAC,MAAM,EAAE,WAAW,CAAC,GAAG,4BAA4B,EAAE,CAAC;IAE7D,OAAO,KAAC,gBAAgB,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,WAAW,EAAE,MAAM,EAAE,YAAG,KAAK,CAAC,QAAQ,GAA6B,CAAC;AACnH,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,gBAAgB;IAC5B,OAAO,UAAU,CAAC,gBAAgB,CAAC,CAAC;AACxC,CAAC"}

package/dist/devtools/backend-errors/backend-errors.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Displays backend errors as an accordion list with a filter bar at the top
+ */
+declare function BackendErrors(): JSX.Element;
+export default BackendErrors;
+//# sourceMappingURL=backend-errors.d.ts.map

package/dist/devtools/backend-errors/backend-errors.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"backend-errors.d.ts","sourceRoot":"","sources":["../../../js/devtools/backend-errors/backend-errors.tsx"],"names":[],"mappings":"AAkDA;;GAEG;AACH,iBAAS,aAAa,IAAI,GAAG,CAAC,OAAO,CAuBpC;AAED,eAAe,aAAa,CAAC"}

package/dist/devtools/backend-errors/backend-errors.js

@@ -0,0 +1,57 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { isAfter } from 'date-fns';
+import { useState } from 'react';
+import styled from '@darajs/styled-components';
+import { Button, Input as UIInput } from '@darajs/ui-components';
+import { useBackendErrors } from './backend-errors-ctx';
+import ErrorDisplay, { parseErrorsForDisplay } from './error-display';
+const ErrorsContainer = styled.div `
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+`;
+const ErrorList = styled.div `
+    overflow-y: auto;
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+
+    height: 100%;
+`;
+const ClearButton = styled(Button) `
+    padding: 0 0.5rem;
+    color: ${(props) => props.theme.colors.grey4};
+    background-color: inherit;
+    transition: color 100ms ease 0s;
+
+    :hover:not(:disabled) {
+        color: ${(props) => props.theme.colors.grey5};
+        background-color: inherit;
+    }
+`;
+const Toolbar = styled.div `
+    display: flex;
+    gap: 0.5rem;
+    align-items: center;
+
+    padding-top: 0.25rem;
+    padding-bottom: 0.25rem;
+    padding-left: 0.5rem;
+
+    border-bottom: 1px solid;
+    border-bottom-color: ${(props) => props.theme.colors.grey5};
+`;
+/**
+ * Displays backend errors as an accordion list with a filter bar at the top
+ */
+function BackendErrors() {
+    const [searchQuery, setSearchQuery] = useState('');
+    const { errors, clearErrors } = useBackendErrors();
+    const parsedErrors = parseErrorsForDisplay(errors)
+        .filter((e) => e.description.toLowerCase().includes(searchQuery.toLowerCase()))
+        .sort((a, b) => (isAfter(b.time, a.time) ? 1 : -1));
+    return (_jsxs(ErrorsContainer, { children: [_jsxs(Toolbar, { children: [_jsx(ClearButton, { onClick: clearErrors, children: _jsx("i", { className: "fa-solid fa-ban fa-lg" }) }), _jsx(UIInput, { onChange: (e) => setSearchQuery(e), placeholder: "Filter", value: searchQuery })] }), _jsx(ErrorList, { children: parsedErrors.map((e) => (_jsx(ErrorDisplay, { errorMessage: e }, e.time.getTime()))) })] }));
+}
+export default BackendErrors;
+//# sourceMappingURL=backend-errors.js.map