import { configureTracking } from "@agent-native/core/client/analytics";
import { appPath } from "@agent-native/core/client/api-path";
import {
AppProviders,
createAgentNativeQueryClient,
useDbSync,
getBrowserTabId,
useSession,
} from "@agent-native/core/client/hooks";
import { getLocaleInitScript, useT } from "@agent-native/core/client/i18n";
import {
CommandMenu,
useCommandMenuShortcut,
} from "@agent-native/core/client/navigation";
import { getThemeInitScript } from "@agent-native/core/client/ui";
import { IconHierarchy2, IconSun, IconMoon } from "@tabler/icons-react";
import { useQueryClient } from "@tanstack/react-query";
import { useTheme } from "next-themes";
import { useCallback, useState } from "react";
import {
Links,
Meta,
Outlet,
Scripts,
ScrollRestoration,
useLocation,
useNavigate,
} from "react-router";
import type { LinksFunction } from "react-router";
import { Layout as AppLayout } from "@/components/layout/Layout";
import { Toaster } from "@/components/ui/sonner";
import { AppToolkitProvider } from "@/components/ui/toolkit-provider";
import changelog from "../CHANGELOG.md?raw";
import { i18nCatalog } from "./i18n";
import { isPublicDesignAppPath } from "./public-routes";
import stylesheet from "./global.css?url";
configureTracking({
llmConnectionStatus:
typeof window === "undefined" ||
!isPublicDesignAppPath(window.location.pathname),
getDefaultProps: (_name, properties) => ({
...properties,
app: "design",
}),
});
export const links: LinksFunction = () => [
{ rel: "stylesheet", href: stylesheet },
];
const THEME_INIT_SCRIPT = getThemeInitScript();
const LOCALE_INIT_SCRIPT = getLocaleInitScript();
export function Layout({ children }: { children: React.ReactNode }) {
return (
{children}
);
}
function DbSyncSetup() {
const qc = useQueryClient();
useDbSync({
queryClient: qc,
queryKeys: ["designs", "design-systems", "design-files"],
ignoreSource: getBrowserTabId(),
});
return null;
}
function ThemeToggleItem() {
const { resolvedTheme, setTheme } = useTheme();
const t = useT();
const isDark = resolvedTheme === "dark";
return (
setTheme(isDark ? "light" : "dark")}
keywords={["theme", "dark", "light", "mode"]}
>
{isDark ? : }
{t("root.toggleTheme")}
);
}
function DesignCommandMenu({
open,
onOpenChange,
}: {
open: boolean;
onOpenChange: (open: boolean) => void;
}) {
const t = useT();
const navigate = useNavigate();
return (
navigate("/agent")}>
{t("root.openAgent")}
{}}>
{t("root.commandSearch")}
);
}
function RootContent() {
const location = useLocation();
const { session } = useSession();
const [cmdkOpen, setCmdkOpen] = useState(false);
const hasSession = Boolean(session?.email);
const isPublicVisualEdit = location.pathname === "/visual-edit";
useCommandMenuShortcut(
useCallback(() => {
if (hasSession && !isPublicVisualEdit) setCmdkOpen(true);
}, [hasSession, isPublicVisualEdit]),
);
const content = isPublicVisualEdit ? (
) : (
);
return (
<>
{hasSession && }
{hasSession && !isPublicVisualEdit && (
)}
{content}
);
}
export default function Root() {
const [queryClient] = useState(() => createAgentNativeQueryClient());
const location = useLocation();
const isPublicPath = isPublicDesignAppPath(location.pathname);
return (
);
}
export { ErrorBoundary } from "@agent-native/core/client/ui";