@manta-eu/react 0.1.0

package/dist/components/layouts/ConnectedDatastorePicker.d.ts

@@ -0,0 +1,4 @@
+import { type DatastorePickerProps } from "#ldo-ui";
+export type ConnectedDatastorePickerProps = Omit<DatastorePickerProps, "datastoreTree" | "isLoadingTree">;
+export declare function ConnectedDatastorePicker(props: ConnectedDatastorePickerProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ConnectedDatastorePicker.d.ts.map

package/dist/components/layouts/ConnectedDatastorePicker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConnectedDatastorePicker.d.ts","sourceRoot":"","sources":["../../../src/components/layouts/ConnectedDatastorePicker.tsx"],"names":[],"mappings":"AACA,OAAO,EAAmB,KAAK,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAGrE,MAAM,MAAM,6BAA6B,GAAG,IAAI,CAAC,oBAAoB,EAAE,eAAe,GAAG,eAAe,CAAC,CAAC;AAI1G,wBAAgB,wBAAwB,CAAC,KAAK,EAAE,6BAA6B,2CAM5E"}

package/dist/components/layouts/ConnectedDatastorePicker.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useDatastoreTreeQuery } from "@manta-eu/client";
+import { DatastorePicker } from "#ldo-ui";
+import { useMantaClient } from "#providers/MantaClientProvider";
+// Rendered into the profile menu's dropdown, which Radix mounts on open - so an operator's tree is
+// fetched when the menu is first opened rather than on every sidebar mount.
+export function ConnectedDatastorePicker(props) {
+    const { isOperator } = props;
+    const { mantaClient } = useMantaClient();
+    const { data, isLoading } = useDatastoreTreeQuery(mantaClient, undefined, { enabled: !!isOperator });
+    return _jsx(DatastorePicker, { ...props, datastoreTree: data?.datastoreTree, isLoadingTree: isLoading });
+}

package/dist/components/layouts/ConnectionBanner.d.ts

@@ -0,0 +1,2 @@
+export declare function ConnectionBanner(): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=ConnectionBanner.d.ts.map

package/dist/components/layouts/ConnectionBanner.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConnectionBanner.d.ts","sourceRoot":"","sources":["../../../src/components/layouts/ConnectionBanner.tsx"],"names":[],"mappings":"AAMA,wBAAgB,gBAAgB,mDA4C/B"}

package/dist/components/layouts/ConnectionBanner.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { XIcon } from "lucide-react";
+import { useEffect, useState } from "react";
+import { match } from "ts-pattern";
+import { cn } from "#lib/utils";
+import { useChatManagerConnection } from "#providers/ChatManagerProvider";
+export function ConnectionBanner() {
+    const { connectionState, agent } = useChatManagerConnection();
+    const [dismissed, setDismissed] = useState(false);
+    useEffect(() => {
+        if (connectionState === "open")
+            setDismissed(false);
+    }, [connectionState]);
+    const message = match(connectionState)
+        .with("connecting", () => "Connecting to Manta…")
+        .with("closed", () => "Manta is currently experiencing a connection issue")
+        .otherwise(() => null);
+    if (!message || dismissed)
+        return null;
+    return (_jsxs("div", { role: connectionState === "closed" ? "alert" : "status", "data-testid": "connection-state-banner", className: cn("lg:hidden flex shrink-0 items-center p-5 gap-2 text-center typography-small z-40", connectionState === "closed" ? "bg-error text-error-foreground" : "bg-accent text-default-foreground"), children: [_jsx("span", { className: "min-w-0 flex-1", children: message }), connectionState === "closed" && (_jsx("button", { type: "button", onClick: () => agent.reconnect(), className: "shrink-0 underline underline-offset-2 hover:no-underline", children: "Retry" })), _jsx("button", { type: "button", onClick: () => setDismissed(true), "aria-label": "Dismiss", className: "shrink-0 opacity-80 hover:opacity-100", children: _jsx(XIcon, { className: "size-4" }) })] }));
+}

package/dist/components/layouts/DeleteConfirmationDialog.d.ts

@@ -0,0 +1,13 @@
+export type DeleteConfirmationDialogProps = {
+    title: string;
+    description: string;
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    onConfirm: () => void;
+    onCancel: () => void;
+    isDeleting?: boolean;
+    confirmLabel?: string;
+    confirmingLabel?: string;
+};
+export declare function DeleteConfirmationDialog(props: DeleteConfirmationDialogProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=DeleteConfirmationDialog.d.ts.map

package/dist/components/layouts/DeleteConfirmationDialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DeleteConfirmationDialog.d.ts","sourceRoot":"","sources":["../../../src/components/layouts/DeleteConfirmationDialog.tsx"],"names":[],"mappings":"AAWA,MAAM,MAAM,6BAA6B,GAAG;IAC1C,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,IAAI,EAAE,OAAO,CAAC;IACd,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B,CAAC;AAEF,wBAAgB,wBAAwB,CAAC,KAAK,EAAE,6BAA6B,2CA6B5E"}

package/dist/components/layouts/DeleteConfirmationDialog.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, } from "#components/alert-dialog/index";
+export function DeleteConfirmationDialog(props) {
+    const { title, description, open, onOpenChange, onConfirm, onCancel, isDeleting = false, confirmLabel = "Delete", confirmingLabel = "Deleting...", } = props;
+    return (_jsx(AlertDialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(AlertDialogContent, { children: [_jsxs(AlertDialogHeader, { children: [_jsx(AlertDialogTitle, { children: title }), _jsx(AlertDialogDescription, { children: description })] }), _jsxs(AlertDialogFooter, { children: [_jsx(AlertDialogCancel, { onClick: onCancel, children: "Cancel" }), _jsx(AlertDialogAction, { variant: "destructive", onClick: onConfirm, disabled: isDeleting, children: isDeleting ? confirmingLabel : confirmLabel })] })] }) }));
+}

package/dist/components/layouts/InstallPrompt.d.ts

@@ -0,0 +1,2 @@
+export declare function InstallPrompt(): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=InstallPrompt.d.ts.map

package/dist/components/layouts/InstallPrompt.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InstallPrompt.d.ts","sourceRoot":"","sources":["../../../src/components/layouts/InstallPrompt.tsx"],"names":[],"mappings":"AASA,wBAAgB,aAAa,mDAkD5B"}

package/dist/components/layouts/InstallPrompt.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Download, Share, XIcon } from "lucide-react";
+import { useLocalStorage } from "usehooks-ts";
+import { Button } from "#components/button/index";
+import { useInstallPrompt } from "#hooks/use-install-prompt";
+import { useIsMobile } from "#hooks/use-is-mobile";
+import { cn } from "#lib/utils";
+const dismissedStorageKey = "pwa-install-prompt-dismissed";
+export function InstallPrompt() {
+    const isMobile = useIsMobile();
+    const { canPrompt, isIos, isInstalled, promptInstall } = useInstallPrompt();
+    const [dismissed, setDismissed] = useLocalStorage(dismissedStorageKey, false);
+    const actionable = canPrompt || isIos;
+    if (!isMobile || isInstalled || dismissed || !actionable)
+        return null;
+    async function handleInstall() {
+        const outcome = await promptInstall();
+        if (outcome !== "unavailable")
+            setDismissed(true);
+    }
+    return (_jsxs("div", { role: "region", "aria-label": "Install Manta", "data-testid": "install-prompt-banner", className: cn("lg:hidden flex shrink-0 items-center gap-3 border-b border-muted-border/20 p-4 z-40", "bg-accent text-default-foreground typography-small"), children: [_jsx("span", { className: "min-w-0 flex-1", children: isIos ? (_jsxs(_Fragment, { children: ["Install Manta: tap ", _jsx(Share, { className: "inline size-4 align-text-bottom" }), " then ", _jsx("b", { children: "Add to Home Screen" }), " for a full-screen app."] })) : ("Install Manta for a faster, full-screen experience.") }), canPrompt && (_jsx(Button, { size: "sm", rounded: "lg", icon: Download, onClick: handleInstall, children: "Install" })), _jsx("button", { type: "button", onClick: () => setDismissed(true), "aria-label": "Dismiss install prompt", className: "shrink-0 opacity-80 hover:opacity-100", children: _jsx(XIcon, { className: "size-4" }) })] }));
+}

package/dist/components/layouts/KnowledgeGraphStartupGate.d.ts

@@ -0,0 +1,9 @@
+import type { ReactNode } from "react";
+type KnowledgeGraphStartupGateProps = {
+    children: ReactNode;
+    embedded?: boolean;
+};
+export declare function isUsableWithoutKnowledgeGraph(pathname: string): boolean;
+export declare function KnowledgeGraphStartupGate(props: KnowledgeGraphStartupGateProps): string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | import("react/jsx-runtime").JSX.Element | null | undefined;
+export {};
+//# sourceMappingURL=KnowledgeGraphStartupGate.d.ts.map

package/dist/components/layouts/KnowledgeGraphStartupGate.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"KnowledgeGraphStartupGate.d.ts","sourceRoot":"","sources":["../../../src/components/layouts/KnowledgeGraphStartupGate.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAMvC,KAAK,8BAA8B,GAAG;IACpC,QAAQ,EAAE,SAAS,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAmBF,wBAAgB,6BAA6B,CAAC,QAAQ,EAAE,MAAM,GAAG,OAAO,CAEvE;AAED,wBAAgB,yBAAyB,CAAC,KAAK,EAAE,8BAA8B,2UAsB9E"}

package/dist/components/layouts/KnowledgeGraphStartupGate.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useLocation } from "react-router";
+import { StatusScreen } from "./StatusScreen.js";
+import { useAssistantName } from "#providers/AssistantNameProvider";
+import { useKnowledgeGraphState } from "#providers/KnowledgeGraphStateContext";
+function notProvisionedCopy(assistantName) {
+    return {
+        title: `We're setting up ${assistantName} for you`,
+        description: "Our team is getting your account ready. This can take a little while.",
+    };
+}
+function startupCopy(assistantName) {
+    return {
+        title: "Getting back up to speed",
+        description: `${assistantName} is reviewing what's changed since you were last here.`,
+    };
+}
+// Routes that fix an unavailable knowledge graph; gating them leaves no way to provision one.
+const routesUsableWithoutKnowledgeGraph = ["/datastores"];
+export function isUsableWithoutKnowledgeGraph(pathname) {
+    return routesUsableWithoutKnowledgeGraph.some((route) => pathname === route || pathname.startsWith(`${route}/`));
+}
+export function KnowledgeGraphStartupGate(props) {
+    const { children, embedded = false } = props;
+    const { isKnowledgeGraphUnavailable, knowledgeGraphAvailability } = useKnowledgeGraphState();
+    const { pathname } = useLocation();
+    const assistantName = useAssistantName();
+    if (!isKnowledgeGraphUnavailable || isUsableWithoutKnowledgeGraph(pathname)) {
+        return children;
+    }
+    const copy = knowledgeGraphAvailability === "not-provisioned" ? notProvisionedCopy(assistantName) : startupCopy(assistantName);
+    return (_jsx(StatusScreen, { title: copy.title, description: copy.description, hint: embedded ? undefined : "You can leave this page and come back later.", branded: true, embedded: embedded }));
+}

package/dist/components/layouts/RouteLayout.d.ts

@@ -0,0 +1,18 @@
+import type { MantaModelId } from "@manta-eu/client/shared/model";
+import { type ReactNode } from "react";
+import type { Datastore, User } from "#lib/chat-types";
+export type RouteLayoutProps = {
+    user: User;
+    datastore?: Datastore;
+    datastores?: Datastore[];
+    isOperator: boolean;
+    canSwitchDatastore?: boolean;
+    logout?: () => void;
+    floatingMobileMenu?: boolean;
+    allowedModels?: MantaModelId[];
+    title?: string;
+    mark?: ReactNode;
+    children: ReactNode;
+};
+export declare function RouteLayout(props: RouteLayoutProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=RouteLayout.d.ts.map

package/dist/components/layouts/RouteLayout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RouteLayout.d.ts","sourceRoot":"","sources":["../../../src/components/layouts/RouteLayout.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC;AAClE,OAAO,EAAyB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAsB9D,OAAO,KAAK,EAAE,SAAS,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AAQvD,MAAM,MAAM,gBAAgB,GAAG;IAC7B,IAAI,EAAE,IAAI,CAAC;IACX,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,UAAU,CAAC,EAAE,SAAS,EAAE,CAAC;IACzB,UAAU,EAAE,OAAO,CAAC;IACpB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,aAAa,CAAC,EAAE,YAAY,EAAE,CAAC;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAEF,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,2CA+DlD"}

package/dist/components/layouts/RouteLayout.js

@@ -0,0 +1,64 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useState } from "react";
+import { Chat } from "../chat-view/index.js";
+import { LoadingView } from "../chat-view/LoadingView.js";
+import { defaultOnboardingSteps, OnboardingModal, SidebarSpotlight, } from "../onboarding/index.js";
+import { ChatSplitLayout } from "./ChatSplitLayout.js";
+import { ConnectionBanner } from "./ConnectionBanner.js";
+import { InstallPrompt } from "./InstallPrompt.js";
+import { KnowledgeGraphStartupGate } from "./KnowledgeGraphStartupGate.js";
+import { Sidebar } from "./Sidebar.js";
+import { SidebarMobileToggle } from "./SidebarMobileToggle.js";
+import { MainContent } from "#components/main-content/index";
+import { SidebarInset, SidebarProvider, useSidebar } from "#components/sidebar/index";
+import { useShouldAutoFocusInput } from "#hooks/use-should-auto-focus-input";
+import { useChatPanelSync } from "#hooks/useChatPanelSync";
+import { useDatastoreSelection } from "#hooks/useDatastoreSelection";
+import { useOnboardingState } from "#hooks/useOnboardingState";
+import { ChatPanelProvider } from "#providers/ChatPanelContext";
+import { CommandProvider } from "#providers/commands/CommandContext";
+import { KnowledgeGraphStateProvider } from "#providers/KnowledgeGraphStateProvider";
+const expandedSidebarWidth = 232;
+const collapsedSidebarWidth = 68;
+export function RouteLayout(props) {
+    const { user, datastore, datastores, isOperator, canSwitchDatastore, logout, floatingMobileMenu, allowedModels, title, mark, children, } = props;
+    const { setSelectedDatastore, isSwitching } = useDatastoreSelection({ canSwitchDatastore });
+    const handleDatastoreSelected = useCallback((id) => void setSelectedDatastore(id, "datastore"), [setSelectedDatastore]);
+    const body = (_jsx(RouteLayoutBody, { user: user, datastore: datastore, isOperator: isOperator, allowedModels: allowedModels, title: title, mark: mark, children: children }));
+    return (_jsx(KnowledgeGraphStateProvider, { datastoreId: datastore?.id, children: _jsx(CommandProvider, { children: _jsx(SidebarProvider, { className: "h-dvh", children: _jsxs(ChatPanelProvider, { children: [_jsx(Sidebar, { user: user, datastore: datastore, datastores: datastores, isOperator: isOperator, isSwitching: isSwitching, canSwitchDatastore: canSwitchDatastore, onLogout: logout, onDatastoreSelected: handleDatastoreSelected }), _jsx(SidebarInset, { className: "min-w-0 overflow-hidden", children: _jsxs(MainContent, { className: "relative flex min-w-0 flex-col overflow-hidden", children: [_jsx(ConnectionBanner, {}), _jsx(InstallPrompt, {}), floatingMobileMenu && _jsx(SidebarMobileToggle, { className: "absolute left-3.5 top-3 z-30 shadow-sm" }), _jsx(KnowledgeGraphStartupGate, { children: body })] }) }), _jsx(OnboardingLayer, {})] }) }) }) }));
+}
+function OnboardingLayer() {
+    const { shouldShow, complete, dismiss } = useOnboardingState();
+    const { state, isMobile } = useSidebar();
+    const shouldAutoFocusInput = useShouldAutoFocusInput();
+    const [highlightId, setHighlightId] = useState(undefined);
+    const contentOffsetLeft = isMobile ? 0 : state === "expanded" ? expandedSidebarWidth : collapsedSidebarWidth;
+    const handleComplete = useCallback(() => {
+        complete();
+        if (!shouldAutoFocusInput)
+            return;
+        requestAnimationFrame(() => {
+            const input = document.querySelector("[data-chat-input]");
+            input?.focus();
+        });
+    }, [complete, shouldAutoFocusInput]);
+    const handleDismiss = useCallback((reason) => {
+        if (reason === "skip") {
+            complete();
+        }
+        else {
+            dismiss();
+        }
+    }, [complete, dismiss]);
+    const handleStepChange = useCallback((step) => {
+        setHighlightId(step.sidebarHighlightId);
+    }, []);
+    return (_jsxs(_Fragment, { children: [_jsx(OnboardingModal, { open: shouldShow, steps: defaultOnboardingSteps, contentOffsetLeft: contentOffsetLeft, onStepChange: handleStepChange, onComplete: handleComplete, onDismiss: handleDismiss }), _jsx(SidebarSpotlight, { active: shouldShow && !isMobile, targetId: highlightId })] }));
+}
+function RouteLayoutBody(props) {
+    const { user, datastore, isOperator, allowedModels, title, mark, children } = props;
+    const { splitEligible, chatOpen, chatReady, closeChat } = useChatPanelSync();
+    if (!splitEligible)
+        return children;
+    return (_jsx(ChatSplitLayout, { chat: chatReady ? (_jsx(Chat, { user: user, datastore: datastore, isCopilot: true, isOperator: isOperator, allowedModels: allowedModels, title: title, mark: mark, onCloseAction: closeChat })) : (_jsx(LoadingView, {})), chatOpen: chatOpen, children: children }));
+}

package/dist/components/layouts/SectionHeader.d.ts

@@ -0,0 +1,8 @@
+import type { ReactNode } from "react";
+type SectionHeaderProps = {
+    action?: ReactNode;
+    title: string;
+};
+export declare function SectionHeader(props: SectionHeaderProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=SectionHeader.d.ts.map

package/dist/components/layouts/SectionHeader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SectionHeader.d.ts","sourceRoot":"","sources":["../../../src/components/layouts/SectionHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,KAAK,kBAAkB,GAAG;IACxB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,2CAStD"}

package/dist/components/layouts/SectionHeader.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "#lib/utils";
+export function SectionHeader(props) {
+    const { title, action } = props;
+    return (_jsxs("div", { className: cn("mb-2 flex items-center px-2", action ? "justify-between gap-2" : "justify-start"), children: [_jsx("span", { className: "typography-tiny text-muted-foreground uppercase", children: title }), action ? _jsx("div", { className: "shrink-0", children: action }) : null] }));
+}

package/dist/components/layouts/Shell.d.ts

@@ -0,0 +1,23 @@
+import type { ReactNode } from "react";
+type MainProps = {
+    sidebar: ReactNode;
+    main: ReactNode;
+};
+type ResizableShellProps = MainProps & {
+    defaultSidebarWidth?: number;
+    minSidebarWidth?: number;
+    maxSidebarWidth?: number;
+    storageKey?: string;
+};
+type CollapsibleShellProps = ResizableShellProps & {
+    collapsible: true;
+    isCollapsed: boolean;
+};
+type NonCollapsibleShellProps = ResizableShellProps & {
+    collapsible?: never;
+    isCollapsed?: never;
+};
+type ShellProps = CollapsibleShellProps | NonCollapsibleShellProps;
+export declare function Shell(props: ShellProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=Shell.d.ts.map

package/dist/components/layouts/Shell.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Shell.d.ts","sourceRoot":"","sources":["../../../src/components/layouts/Shell.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAUvC,KAAK,SAAS,GAAG;IACf,OAAO,EAAE,SAAS,CAAC;IACnB,IAAI,EAAE,SAAS,CAAC;CACjB,CAAC;AAuBF,KAAK,mBAAmB,GAAG,SAAS,GAAG;IACrC,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF,KAAK,qBAAqB,GAAG,mBAAmB,GAAG;IACjD,WAAW,EAAE,IAAI,CAAC;IAClB,WAAW,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,KAAK,wBAAwB,GAAG,mBAAmB,GAAG;IACpD,WAAW,CAAC,EAAE,KAAK,CAAC;IACpB,WAAW,CAAC,EAAE,KAAK,CAAC;CACrB,CAAC;AAEF,KAAK,UAAU,GAAG,qBAAqB,GAAG,wBAAwB,CAAC;AAEnE,wBAAgB,KAAK,CAAC,KAAK,EAAE,UAAU,2CA6EtC"}

package/dist/components/layouts/Shell.js

@@ -0,0 +1,38 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Menu, PanelLeft } from "lucide-react";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { useLocalStorage, useToggle } from "usehooks-ts";
+import { Button } from "#components/button/index";
+import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "#components/resizable/index";
+import { Sheet, SheetContent, SheetTrigger } from "#components/sheet/index";
+import { useIsMobile } from "#hooks/use-is-mobile";
+import { cn } from "#lib/utils";
+function MobileShell(props) {
+    const { main, sidebar } = props;
+    return (_jsxs("div", { className: "flex h-svh w-full flex-col text-default-foreground bg-background", children: [_jsx("div", { className: "flex items-center gap-2 border-b border-muted-border/20 p-4", children: _jsxs(Sheet, { children: [_jsx(SheetTrigger, { asChild: true, children: _jsx(Button, { variant: "ghost", size: "sm", iconOnly: true, icon: Menu, "aria-label": "Open menu" }) }), _jsx(SheetContent, { side: "left", className: "w-80 p-0", children: sidebar })] }) }), _jsx("main", { className: "flex-1 overflow-hidden", children: main })] }));
+}
+export function Shell(props) {
+    const { sidebar, main, collapsible = false, isCollapsed = false, defaultSidebarWidth = 30, maxSidebarWidth = 40, storageKey = "sidebar-width-percent", } = props;
+    const isMobile = useIsMobile();
+    const [sidebarWidth, setSidebarWidth] = useLocalStorage(storageKey, defaultSidebarWidth);
+    const [isInitialized, setIsInitialized] = useState(false);
+    const [isSidebarCollapsed, toggleSidebar] = useToggle(isCollapsed);
+    const minSidebarWidth = isSidebarCollapsed ? 0 : (props.minSidebarWidth ?? 25);
+    const leftPanelRef = useRef(null);
+    useEffect(() => setIsInitialized(true), []);
+    const handleLayout = useCallback((sizes) => {
+        if (!isInitialized)
+            return;
+        const [width] = sizes;
+        if (width)
+            setSidebarWidth(width);
+    }, [isInitialized, minSidebarWidth, maxSidebarWidth, setSidebarWidth]);
+    useEffect(() => {
+        leftPanelRef?.current?.collapse();
+    }, [isSidebarCollapsed]);
+    if (isMobile) {
+        return _jsx(MobileShell, { main, sidebar });
+    }
+    return (_jsxs(ResizablePanelGroup, { direction: "horizontal", onLayout: handleLayout, className: "w-full h-svh bg-secondary", children: [_jsx(ResizablePanel, { collapsible: collapsible, defaultSize: sidebarWidth, minSize: minSidebarWidth, maxSize: maxSidebarWidth, className: "overflow-hidden border-r border-muted-border/20", ref: leftPanelRef, children: sidebar }), isSidebarCollapsed ? (_jsx("div", { className: "w-px" })) : (_jsx(ResizableHandle, { withHandle: true, className: "bg-background/20 border-muted-border/20" })), _jsxs(ResizablePanel, { defaultSize: 100 - sidebarWidth, minSize: 100 - maxSidebarWidth, maxSize: 100 - minSidebarWidth, className: "relative", children: [collapsible && (_jsx(PanelLeft, { size: 16, className: "absolute z-10 top-2 left-2 cursor-pointer", onClick: toggleSidebar, "aria-label": "Toggle sidebar" })), _jsx("main", { className: cn("h-full overflow-hidden", collapsible && "pl-4"), children: main })] })] }));
+}

package/dist/components/layouts/Sidebar.d.ts

@@ -0,0 +1,14 @@
+import type { Datastore, User } from "#lib/chat-types";
+type SidebarProps = {
+    user?: User;
+    datastore?: Datastore;
+    datastores?: Datastore[];
+    isOperator?: boolean;
+    isSwitching?: boolean;
+    canSwitchDatastore?: boolean;
+    onLogout?: () => void;
+    onDatastoreSelected?: (datastoreId: string) => void;
+};
+export declare function Sidebar(props: SidebarProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=Sidebar.d.ts.map

package/dist/components/layouts/Sidebar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Sidebar.d.ts","sourceRoot":"","sources":["../../../src/components/layouts/Sidebar.tsx"],"names":[],"mappings":"AAoDA,OAAO,KAAK,EAAE,SAAS,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AA6BvD,KAAK,YAAY,GAAG;IAClB,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,UAAU,CAAC,EAAE,SAAS,EAAE,CAAC;IACzB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,mBAAmB,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;CACrD,CAAC;AAEF,wBAAgB,OAAO,CAAC,KAAK,EAAE,YAAY,2CA6X1C"}

package/dist/components/layouts/Sidebar.js

@@ -0,0 +1,181 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { chatIdToPath } from "@manta-eu/client/shared/index";
+import { realmVocabLabel } from "@manta-eu/ldo/realm";
+import { isPresent } from "@manta-eu/lib/present";
+import { Activity, Brain, ChevronUp, Command, Database, FileCode2, History, PanelLeftIcon, Plug, Plus, Search, Trash2, UserPlus, Waypoints, Zap, } from "lucide-react";
+import { AnimatePresence, motion } from "motion/react";
+import { use, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Link, useLocation } from "react-router";
+import { ConnectionBadge } from "../ConnectionBadge.js";
+import { ManageDatastoresMenuItem } from "../datastore-management/ManageDatastoresMenuItem.js";
+import { ThemeSelectorDropdown } from "../theme-selector-dropdown.js";
+import { AnimatedChatTitle } from "./AnimatedChatTitle.js";
+import { ConnectedDatastorePicker } from "./ConnectedDatastorePicker.js";
+import { DeleteConfirmationDialog } from "./DeleteConfirmationDialog.js";
+import { Button } from "#components/button/index";
+import { ChannelIcon } from "#components/channel-icon/index";
+import { DropdownGroup, DropdownItem } from "#components/dropdown/index";
+import { Popover, PopoverContent, PopoverTrigger } from "#components/popover/index";
+import { Sidebar as BaseSidebar, Initials, NavMenu, NavUser, SidebarContent, SidebarFooter, SidebarHeader, SidebarMenu, SidebarMenuButton, SidebarMenuItem, useSidebar, } from "#components/sidebar/index";
+import { useConversations } from "#hooks/useConversations";
+import { useDeleteChat } from "#hooks/useDeleteChat";
+import { canPickDatastore } from "#ldo-ui";
+import { currentRealm, enableDatastoreManagement } from "#lib/build-config";
+import { usePlatform } from "#lib/use-platform";
+import { cn } from "#lib/utils";
+import { useAbsoluteNavigate } from "#providers/ActiveDatastoreProvider";
+import { AuthContext } from "#providers/AuthContext";
+import { useChatManagerConnection } from "#providers/ChatManagerProvider";
+import { useCommandContext } from "#providers/commands/CommandContext";
+import { useKnowledgeGraphState } from "#providers/KnowledgeGraphStateContext";
+import { useMantaClient } from "#providers/MantaClientProvider";
+// Not a Keycloak Organization, so an operator without an explicit pick still resolves to this.
+const realmDatastoreId = currentRealm;
+function SidebarNavLink(props) {
+    const { href, ...rest } = props;
+    return _jsx(Link, { to: href, ...rest });
+}
+function onNavClick(handler) {
+    return (event) => {
+        // Allow regular browser navigation for modifier and middle clicks
+        if (event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey)
+            return;
+        event.preventDefault();
+        handler();
+    };
+}
+export function Sidebar(props) {
+    const absoluteNavigate = useAbsoluteNavigate();
+    const { pathname } = useLocation();
+    const { isKnowledgeGraphUnavailable } = useKnowledgeGraphState();
+    const { user, datastore, datastores, isOperator, isSwitching, canSwitchDatastore, onLogout, onDatastoreSelected } = props;
+    const canManageTeam = use(AuthContext)?.canManageTeam ?? false;
+    const { state: sidebarState, isMobile, toggleSidebar, setOpenMobile } = useSidebar();
+    const isSidebarExpanded = isMobile || sidebarState === "expanded";
+    useEffect(() => {
+        if (isMobile)
+            setOpenMobile(false);
+    }, [pathname, isMobile, setOpenMobile]);
+    const { activeConversation, startNewChat, openConversation } = useChatManagerConnection();
+    const { setOpen } = useCommandContext();
+    const { conversations } = useConversations({ limit: 10 });
+    const { datastorePath } = useMantaClient();
+    const { isApple } = usePlatform();
+    const ModifierIcon = isApple ? Command : ChevronUp;
+    const navItemTooltip = isKnowledgeGraphUnavailable ? "Available when Manta is ready" : undefined;
+    const navItems = useMemo(() => [
+        {
+            title: "New chat",
+            icon: Plus,
+            onClick: startNewChat,
+        },
+        {
+            title: "Search",
+            icon: Search,
+            onClick: () => setOpen(true),
+            shortcut: (_jsxs("div", { className: "flex items-center px-2 bg-accent rounded-full py-1 absolute right-2 group-data-[collapsible=icon]:hidden", children: [_jsx(ModifierIcon, { className: "size-3 shrink-0" }), _jsx("span", { className: "typography-small", children: "K" })] })),
+        },
+        {
+            id: "nav-plans",
+            title: "Plans",
+            icon: Zap,
+            isActive: pathname.startsWith("/plans"),
+            href: "/plans",
+        },
+        {
+            id: "nav-memories",
+            title: "Memories",
+            icon: Brain,
+            isActive: pathname.startsWith("/memories"),
+            href: "/memories",
+        },
+        {
+            id: "nav-activity",
+            title: "Activity",
+            icon: Activity,
+            isActive: pathname.startsWith("/activity"),
+            href: "/activity",
+        },
+        {
+            id: "nav-integrations",
+            title: "Integrations",
+            icon: Plug,
+            isActive: pathname.startsWith("/integrations"),
+            href: "/integrations",
+        },
+        {
+            title: "Rules",
+            icon: FileCode2,
+            isActive: pathname.startsWith("/rules"),
+            href: "/rules",
+        },
+        {
+            id: "nav-data-explorer",
+            title: "Data Explorer",
+            icon: Database,
+            isActive: pathname === "/data" || pathname.startsWith("/data/"),
+            href: "/data",
+        },
+        ...(isOperator
+            ? [
+                {
+                    title: "Streams",
+                    icon: Waypoints,
+                    isActive: pathname.startsWith("/streams"),
+                    href: "/streams",
+                },
+            ]
+            : []),
+    ].map((item) => ({ ...item, disabled: isKnowledgeGraphUnavailable, tooltip: navItemTooltip })), [ModifierIcon, startNewChat, isKnowledgeGraphUnavailable, isOperator, pathname, setOpen, navItemTooltip]);
+    const userName = isPresent(user?.name) ? user.name : isPresent(user?.email) ? user.email : "User";
+    // An operator with no explicit pick is still on the realm default, not a blank name.
+    const datastoreName = datastore?.name ?? (isOperator ? realmVocabLabel(realmDatastoreId) : "");
+    const chatId = activeConversation?.id;
+    const canManageDatastores = enableDatastoreManagement && !!isOperator && !!onDatastoreSelected;
+    const showDatastorePicker = canPickDatastore({ canSwitchDatastore, canSelect: !!onDatastoreSelected, datastores });
+    // Deferred until the menu's close animation finishes, so navigating doesn't cut it short.
+    const pendingMenuNavigateRef = useRef(null);
+    const handleProfileMenuCloseAutoFocus = useCallback(() => {
+        const to = pendingMenuNavigateRef.current;
+        if (to) {
+            pendingMenuNavigateRef.current = null;
+            absoluteNavigate(to);
+        }
+    }, [absoluteNavigate]);
+    const [isChatHistoryOpen, setIsChatHistoryOpen] = useState(false);
+    const historyCloseTimer = useRef(null);
+    const openHistory = useCallback(() => {
+        if (historyCloseTimer.current)
+            clearTimeout(historyCloseTimer.current);
+        setIsChatHistoryOpen(true);
+    }, []);
+    const closeHistorySoon = useCallback(() => {
+        if (historyCloseTimer.current)
+            clearTimeout(historyCloseTimer.current);
+        historyCloseTimer.current = setTimeout(() => setIsChatHistoryOpen(false), 150);
+    }, []);
+    useEffect(() => () => {
+        if (historyCloseTimer.current)
+            clearTimeout(historyCloseTimer.current);
+    }, []);
+    const { conversationToDelete, handleDeleteClick: handleDeleteChatClick, handleConfirmDelete: handleConfirmDeleteChat, handleCancelDelete: handleCancelDeleteChat, } = useDeleteChat();
+    const showChats = !isKnowledgeGraphUnavailable && isPresent(conversations);
+    const chatRows = useMemo(() => conversations.map((chat) => {
+        const routePath = chatIdToPath(chat.id);
+        return {
+            id: chat.id,
+            path: datastorePath(routePath),
+            title: chat.title ?? chat.id,
+            isActive: chat.id === chatId && pathname === routePath,
+        };
+    }), [conversations, chatId, pathname, datastorePath]);
+    return (_jsxs(BaseSidebar, { collapsible: "icon", className: "font-roobertpro h-full", children: [_jsx(SidebarHeader, { className: "pb-0", children: _jsxs("div", { className: "flex items-center flex-row w-full h-16 justify-between group-data-[collapsible=icon]:justify-center", children: [_jsx("div", { className: "relative size-10 shrink-0", children: _jsx(AnimatePresence, { mode: "wait", initial: false, children: isSidebarExpanded ? (_jsx(motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: 0.15, ease: [0.32, 0.72, 0, 1] }, className: "absolute inset-0 flex items-center justify-center", children: _jsx(Link, { to: "/", "aria-label": "Home", children: _jsx(ChannelIcon, { channel: "MANTA", iconClassName: "size-7" }) }) }, "manta-logo")) : (_jsx(motion.button, { type: "button", "aria-label": "Expand Sidebar", onClick: toggleSidebar, initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: 0.15, ease: [0.32, 0.72, 0, 1] }, className: "absolute inset-0 flex items-center justify-center rounded-md bg-transparent text-default-foreground hover:bg-muted cursor-pointer", children: _jsx(PanelLeftIcon, { className: "size-5" }) }, "expand-trigger")) }) }), _jsx(AnimatePresence, { initial: false, children: isSidebarExpanded && (_jsx(motion.button, { type: "button", "aria-label": "Collapse Sidebar", onClick: toggleSidebar, initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: 0.15, ease: [0.32, 0.72, 0, 1] }, className: "size-10 shrink-0 flex items-center justify-center rounded-md bg-transparent text-default-foreground hover:bg-muted cursor-pointer", children: _jsx(PanelLeftIcon, { className: "size-5" }) }, "collapse-trigger")) })] }) }), _jsxs(SidebarContent, { children: [_jsx(NavMenu, { items: navItems, linkComponent: SidebarNavLink }), showChats && isSidebarExpanded && (_jsx("div", { className: "mt-2", children: _jsx("div", { className: "min-h-0", children: _jsxs("div", { className: "px-3.5", children: [_jsx("div", { className: "p-2 typography-small-medium text-muted-foreground", children: "Chats" }), _jsx(SidebarMenu, { "data-testid": "sidebar-chat-history", children: chatRows.map((chat) => (_jsxs(SidebarMenuItem, { "data-testid": "sidebar-chat-item", "data-chat-id": chat.id, className: "flex group/item", children: [_jsx(SidebarMenuButton, { asChild: true, isActive: chat.isActive, className: "typography-small text-default-foreground", "aria-label": chat.title, title: chat.title, children: _jsx("a", { href: chat.path, onClick: onNavClick(() => openConversation(chat.id)), children: _jsx(AnimatedChatTitle, { title: chat.title }) }) }), _jsx("div", { className: "absolute right-0 top-0 bottom-0 hidden group-hover/item:flex items-center pr-1 pl-6 bg-gradient-to-l from-background from-60% to-transparent", children: _jsx(Button, { className: "text-muted-foreground hover:text-default-foreground", icon: Trash2, size: "xs", variant: "ghost", iconOnly: true, "aria-label": "Delete chat", onClick: (e) => handleDeleteChatClick(chat.id, e) }) })] }, chat.id))) })] }) }) })), showChats && !isSidebarExpanded && (_jsx(SidebarMenu, { children: _jsx(SidebarMenuItem, { className: "p-3.5", children: _jsxs(Popover, { open: isChatHistoryOpen, onOpenChange: setIsChatHistoryOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx(SidebarMenuButton, { "aria-label": "Chat history", onMouseEnter: openHistory, onMouseLeave: closeHistorySoon, children: _jsx(History, { className: "size-5" }) }) }), _jsxs(PopoverContent, { side: "right", align: "start", sideOffset: 8, onOpenAutoFocus: (e) => e.preventDefault(), onMouseEnter: openHistory, onMouseLeave: closeHistorySoon, className: "max-h-[60vh] w-64 overflow-y-auto p-1 gap-1 grid", children: [_jsx("div", { className: "p-2 typography-small-medium text-muted-foreground", children: "Chats" }), chatRows.map((chat) => (_jsx("a", { href: chat.path, onClick: onNavClick(() => {
+                                                    setIsChatHistoryOpen(false);
+                                                    openConversation(chat.id);
+                                                }), title: chat.title, className: cn("flex w-full items-center gap-2 overflow-hidden rounded-xl px-3 py-2.5 text-left typography-small whitespace-nowrap transition-colors hover:bg-muted", chat.isActive
+                                                    ? "bg-faint text-default-foreground"
+                                                    : "text-muted-foreground hover:text-default-foreground"), children: _jsx("span", { className: "min-w-0 flex-1 truncate", children: chat.title }) }, chat.id)))] })] }) }) }))] }), _jsx(ConnectionBadge, {}), _jsx(SidebarFooter, { children: onLogout ? (_jsx(NavUser, { name: userName, currentDatastore: { name: datastoreName }, pickerSlot: showDatastorePicker &&
+                        onDatastoreSelected && (_jsx(ConnectedDatastorePicker, { currentDatastoreId: datastore?.id, isOperator: isOperator, isSwitching: isSwitching, datastores: datastores, onDatastoreSelected: onDatastoreSelected })), onCloseAutoFocus: handleProfileMenuCloseAutoFocus, onNavigateToAccount: () => {
+                        // TODO: Implement account navigation when account page is available
+                    }, onLogout: onLogout, children: _jsxs(DropdownGroup, { className: "p-2", children: [_jsx(ThemeSelectorDropdown, {}), canManageDatastores && (_jsx(ManageDatastoresMenuItem, { onSelect: () => (pendingMenuNavigateRef.current = "/datastores") })), canManageTeam && (_jsxs(DropdownItem, { className: "flex flex-row items-center gap-1.5 typography-caption h-11", onSelect: () => (pendingMenuNavigateRef.current = "/team"), children: [_jsx(UserPlus, { className: "size-5" }), _jsx("span", { className: "typography-caption", children: "Team Members" })] }))] }) })) : (_jsxs("div", { className: "flex items-center gap-3 px-2", children: [_jsx(Initials, { name: userName }), _jsxs("div", { className: "flex flex-col min-w-0 flex-1", children: [_jsx("span", { className: "truncate typography-small text-left", children: userName }), datastoreName && (_jsx("span", { className: "truncate typography-tiny text-muted-foreground text-left", children: datastoreName }))] })] })) }), conversationToDelete && (_jsx(DeleteConfirmationDialog, { title: "Delete Conversation", description: "Are you sure you want to delete this conversation? This action cannot be undone and will permanently remove the conversation and all its data.", open: true, onOpenChange: (open) => !open && handleCancelDeleteChat(), onConfirm: handleConfirmDeleteChat, onCancel: handleCancelDeleteChat }))] }));
+}

package/dist/components/layouts/SidebarMobileToggle.d.ts

@@ -0,0 +1,5 @@
+import { type IconOnlyButtonProps } from "#components/button/index";
+type SidebarMobileToggleProps = Omit<IconOnlyButtonProps, "icon" | "iconOnly" | "onClick" | "aria-label" | "aria-expanded">;
+export declare function SidebarMobileToggle(props: SidebarMobileToggleProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=SidebarMobileToggle.d.ts.map

package/dist/components/layouts/SidebarMobileToggle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SidebarMobileToggle.d.ts","sourceRoot":"","sources":["../../../src/components/layouts/SidebarMobileToggle.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAU,KAAK,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAI5E,KAAK,wBAAwB,GAAG,IAAI,CAClC,mBAAmB,EACnB,MAAM,GAAG,UAAU,GAAG,SAAS,GAAG,YAAY,GAAG,eAAe,CACjE,CAAC;AAEF,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,wBAAwB,2CAmBlE"}

package/dist/components/layouts/SidebarMobileToggle.js

@@ -0,0 +1,12 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PanelLeftIcon } from "lucide-react";
+import { Button } from "#components/button/index";
+import { useSidebar } from "#components/sidebar/index";
+import { cn } from "#lib/utils";
+export function SidebarMobileToggle(props) {
+    const { className, variant = "secondary", rounded = "md", ...rest } = props;
+    const { toggleSidebar, openMobile } = useSidebar();
+    const ariaLabel = openMobile ? "Close navigation" : "Open navigation";
+    return (_jsx(Button, { ...rest, variant: variant, rounded: rounded, iconOnly: true, icon: PanelLeftIcon, onClick: toggleSidebar, "aria-label": ariaLabel, "aria-expanded": openMobile, className: cn("lg:hidden", className) }));
+}

package/dist/components/layouts/StatusScreen.d.ts

@@ -0,0 +1,12 @@
+import { type ReactNode } from "react";
+export type StatusScreenProps = {
+    title: string;
+    description: string;
+    hint?: string;
+    children?: ReactNode;
+    role?: "status" | "alert";
+    branded?: boolean;
+    embedded?: boolean;
+};
+export declare function StatusScreen(props: StatusScreenProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=StatusScreen.d.ts.map

package/dist/components/layouts/StatusScreen.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StatusScreen.d.ts","sourceRoot":"","sources":["../../../src/components/layouts/StatusScreen.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAS,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAe9C,MAAM,MAAM,iBAAiB,GAAG;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAC1B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,2CA2BpD"}

package/dist/components/layouts/StatusScreen.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+import { MantaGridAnimation } from "../branding/MantaGridAnimation.js";
+import { MantaLogo } from "#components/manta-logo/index";
+const gridConfig = {
+    columnCount: 20,
+    rowCount: 11,
+    cellSizeRem: 4.5,
+    fadeColor: "var(--color-base-background)",
+    streakLengthRem: [20, 34],
+    streakDurationSeconds: [1.4, 2.2],
+    spawnInitialDelayMs: 300,
+    spawnIntervalMs: [1000, 2000],
+};
+export function StatusScreen(props) {
+    const { title, description, hint, children, role = "status", branded = false, embedded = false } = props;
+    const titleId = useId();
+    return (_jsxs("section", { className: "relative flex bg-base-background min-h-0 h-full w-full flex-1 items-center justify-center overflow-hidden text-default-foreground", "aria-labelledby": titleId, "data-embedded": embedded || undefined, children: [branded && _jsx(MantaGridAnimation, { config: gridConfig }), _jsxs("div", { className: "relative z-10 flex flex-col items-center px-8 text-center", role: role, children: [branded && (_jsx("div", { className: "mb-5 flex size-6 items-center justify-center", children: _jsx(MantaLogo, { size: 24, className: "text-default-foreground" }) })), _jsx("h1", { id: titleId, className: "typography-large-header text-default-foreground", children: title }), _jsx("p", { className: "mt-2 typography-small text-default-foreground", children: description }), hint && _jsx("p", { className: "mt-2 typography-tiny text-placeholder-foreground", children: hint }), children && _jsx("div", { className: "mt-6 flex items-center gap-2", children: children })] })] }));
+}