likec4 0.54.0 → 0.57.0

package/dist/@likec4/core/errors/index.js

@@ -44,28 +44,13 @@ export class RelationRefError extends BaseError {
   }
 }
 export function normalizeError(e) {
-  if (e instanceof BaseError) {
+  if (e instanceof BaseError || e instanceof Error) {
     return e;
   }
-  if (e instanceof Error) {
-    return new UnknownError(e.message, { cause: e });
-  }
-  if (e === null || e === void 0) {
-    return new UnknownError("Undefined error");
-  }
   const message = isString(e) ? e : stringify(e);
-  return new UnknownError(message);
-}
-export function serializeError(e) {
-  const error = normalizeError(e);
-  return {
-    name: error.name,
-    message: error.stack ? error.stack : `${error.name}: ${error.message}`,
-    error
-  };
-}
-export function throwNormalizedError(e) {
-  throw normalizeError(e);
+  const error = new UnknownError(message);
+  Error.captureStackTrace(error, normalizeError);
+  return error;
 }
 export function invariant(condition, message) {
   if (condition) {

package/dist/@likec4/diagrams/components/FullscreenDiagramBrowser.js

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { invariant } from "@likec4/core";
-import { useSyncedRef } from "@react-hookz/web/esm";
+import { useSyncedRef } from "@react-hookz/web";
 import { useCallback } from "react";
 import { createPortal } from "react-dom";
 import { useViewIdFromHash } from "../hooks/useViewIdFromHash.js";

package/dist/@likec4/diagrams/components/primitives/fullscreen/FullscreenDiagram.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { invariant } from "@likec4/core";
-import { useKeyboardEvent, useMeasure } from "@react-hookz/web/esm";
+import { useKeyboardEvent, useMeasure } from "@react-hookz/web";
 import { disableBodyScroll, enableBodyScroll } from "body-scroll-lock-upgrade";
 import { useEffect, useRef } from "react";
 import { Diagram } from "../../../diagram/Diagram.js";

package/dist/@likec4/diagrams/components/primitives/responsive/ResponsiveDiagram.js

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import { useMeasure } from "@react-hookz/web/esm";
+import { useMeasure } from "@react-hookz/web";
 import { forwardRef } from "react";
 import { Diagram } from "../../../diagram/index.js";
 export const ResponsiveDiagram = /* @__PURE__ */ forwardRef(

package/dist/@likec4/diagrams/diagram/Diagram.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { nonNullable, defaultTheme as theme } from "@likec4/core";
-import { useHookableRef, useUpdateEffect } from "@react-hookz/web/esm";
+import { useHookableRef, useUpdateEffect } from "@react-hookz/web";
 import { useSpring } from "@react-spring/konva";
 import { clamp, isNil } from "rambdax";
 import { forwardRef, useEffect, useImperativeHandle, useRef } from "react";

package/dist/@likec4/diagrams/diagram/nodes/NodeLinkBtn.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { invariant } from "@likec4/core";
 import { isEqualSimple } from "@react-hookz/deep-equal/esnext";
-import { useToggle } from "@react-hookz/web/esm";
+import { useToggle } from "@react-hookz/web";
 import { useSpring } from "@react-spring/konva";
 import { mix, toHex } from "khroma";
 import { memo } from "react";

package/dist/@likec4/diagrams/diagram/nodes/NodeZoomBtn.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { isEqualSimple } from "@react-hookz/deep-equal/esnext";
-import { useToggle } from "@react-hookz/web/esm";
+import { useToggle } from "@react-hookz/web";
 import { useSpring } from "@react-spring/konva";
 import { lighten, mix, toHex } from "khroma";
 import { memo } from "react";

package/dist/@likec4/diagrams/hooks/useImageLoader.js

@@ -1,5 +1,5 @@
 import { useLayoutEffect, useRef, useState } from "react";
-import { useIsMounted } from "@react-hookz/web/esm";
+import { useIsMounted } from "@react-hookz/web";
 import { invariant } from "@likec4/core";
 const imageElements = /* @__PURE__ */ new Map();
 export default function useImageLoader(url, crossOrigin, referrerpolicy) {

package/dist/@likec4/diagrams/hooks/usePrefersLightMode.js

@@ -1,4 +1,4 @@
-import { useMediaQuery } from "@react-hookz/web/esm";
+import { useMediaQuery } from "@react-hookz/web";
 const COLOR_SCHEME_QUERY = "(prefers-color-scheme: light)";
 export function usePrefersLightMode() {
   return useMediaQuery(COLOR_SCHEME_QUERY);

package/dist/__app__/App.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export default function App(): JSX.Element;
+//# sourceMappingURL=App.d.ts.map

package/dist/__app__/components/CopyToClipboard.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+type CopyToClipboardProps = {
+    text: string;
+};
+export declare function CopyToClipboard({ text }: CopyToClipboardProps): JSX.Element;
+export {};
+//# sourceMappingURL=CopyToClipboard.d.ts.map

package/dist/__app__/{src/components → components}/CopyToClipboard.jsx

@@ -12,17 +12,18 @@ export function CopyToClipboard({ text }) {
         setCopied(false);
     }, [text]);
     useEffect(() => {
-        if (copied) {
-            const timeout = setTimeout(() => {
-                setCopied(false);
-            }, 800);
-            return () => clearTimeout(timeout);
+        if (!copied) {
+            return;
         }
+        const timeout = setTimeout(() => {
+            setCopied(false);
+        }, 800);
+        return () => clearTimeout(timeout);
     }, [copied]);
-    return (<Box position='absolute' top={'0'} right={'0'} p={'4'}>
+    return (<Box position="absolute" top={'0'} right={'0'} p={'4'}>
       <Tooltip content={copied ? 'Copied!' : 'Copy to clipboard'} {...(copied ? { open: true } : {})}>
-        <IconButton variant='soft' color={copied ? 'green' : undefined} size={'2'} radius='large' onClick={copy} data-copied={copied} className={styles.copyButton}>
-          {copied ? (<CheckCircledIcon width={16} height={16}/>) : (<CopyIcon width={16} height={16}/>)}
+        <IconButton variant="soft" color={copied ? 'green' : undefined} size={'2'} radius="large" onClick={copy} data-copied={copied} className={styles.copyButton}>
+          {copied ? <CheckCircledIcon width={16} height={16}/> : <CopyIcon width={16} height={16}/>}
         </IconButton>
       </Tooltip>
     </Box>);

package/dist/__app__/components/DiagramNotFound.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const DiagramNotFound: ({ viewId }: {
+    viewId: string;
+}) => JSX.Element;
+//# sourceMappingURL=DiagramNotFound.d.ts.map

package/dist/__app__/components/ThemePanelToggle.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare const ThemePanelToggle: (() => null) | (() => JSX.Element);
+//# sourceMappingURL=ThemePanelToggle.d.ts.map

package/dist/__app__/{src/components → components}/ThemePanelToggle.jsx

@@ -1,6 +1,6 @@
 import { MoonIcon } from '@radix-ui/react-icons';
 import { IconButton, ThemePanel } from '@radix-ui/themes';
-import { useToggle } from '@react-hookz/web/esm';
+import { useToggle } from '@react-hookz/web';
 export const ThemePanelToggle = import.meta.env.PROD
     ? () => null
     : () => {

package/dist/__app__/components/index.d.ts

@@ -0,0 +1,6 @@
+export { Sidebar } from './sidebar/Sidebar';
+export { ViewActions } from './view-page/ViewActions';
+export { ThemePanelToggle } from './ThemePanelToggle';
+export { DiagramNotFound } from './DiagramNotFound';
+export { CopyToClipboard } from './CopyToClipboard';
+//# sourceMappingURL=index.d.ts.map

package/dist/__app__/components/sidebar/DiagramsTree.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare function DiagramsTree(): JSX.Element;
+//# sourceMappingURL=DiagramsTree.d.ts.map

package/dist/__app__/{src/components → components}/sidebar/DiagramsTree.jsx

@@ -1,6 +1,6 @@
 import { DashboardIcon, TriangleRightIcon } from '@radix-ui/react-icons';
 import { Box, Flex, Text } from '@radix-ui/themes';
-import TreeView from 'react-accessible-treeview';
+import TreeView, {} from 'react-accessible-treeview';
 import { useDiagramsTree } from '../../data';
 import { $pages, useRoute } from '../../router';
 import { cn } from '../../utils';

package/dist/__app__/components/sidebar/Sidebar.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare const Sidebar: () => JSX.Element;
+//# sourceMappingURL=Sidebar.d.ts.map

package/dist/__app__/{src/components → components}/sidebar/Sidebar.jsx

@@ -1,5 +1,5 @@
 import { Box, Button, Flex, IconButton, ScrollArea, Separator } from '@radix-ui/themes';
-import { useClickOutside, useToggle } from '@react-hookz/web/esm';
+import { useClickOutside, useToggle } from '@react-hookz/web';
 import { HamburgerMenuIcon, ArrowLeftIcon } from '@radix-ui/react-icons';
 import { useRef } from 'react';
 import { cn } from '../../utils';

package/dist/__app__/components/view-page/DisplayModeSelector.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare const DisplayModeSelector: () => JSX.Element;
+//# sourceMappingURL=DisplayModeSelector.d.ts.map

package/dist/__app__/components/view-page/ExportDiagram.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import type { DiagramView } from '@likec4/diagrams';
+type Props = {
+    diagram: DiagramView;
+    onCompleted: () => void;
+};
+declare const ExportDiagram: import("react").MemoExoticComponent<({ diagram, onCompleted }: Props) => JSX.Element>;
+export default ExportDiagram;
+//# sourceMappingURL=ExportDiagram.d.ts.map

package/dist/__app__/{src/components → components}/view-page/ExportDiagram.jsx

@@ -1,6 +1,6 @@
 import { Diagram, useDiagramApi } from '@likec4/diagrams';
 import { Box, Portal } from '@radix-ui/themes';
-import { useDebouncedEffect } from '@react-hookz/web/esm';
+import { useDebouncedEffect } from '@react-hookz/web';
 import { memo, useRef } from 'react';
 function downloadBlob(blob, name) {
     // Convert your blob into a Blob URL (a special url that points to an object in the browser's memory)

package/dist/__app__/components/view-page/Header.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import type { DiagramView } from '@likec4/core';
+type HeaderProps = {
+    diagram: DiagramView;
+};
+export declare function Header({ diagram }: HeaderProps): JSX.Element;
+export {};
+//# sourceMappingURL=Header.d.ts.map

package/dist/__app__/components/view-page/ShareDialog.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import type { DiagramView } from '@likec4/diagrams';
+export declare const ShareDialog: ({ diagram }: {
+    diagram: DiagramView;
+}) => JSX.Element;
+//# sourceMappingURL=ShareDialog.d.ts.map

package/dist/__app__/components/view-page/ViewActions.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { type DiagramView } from '@likec4/diagrams';
+export declare const ViewActions: ({ diagram }: {
+    diagram: DiagramView;
+}) => JSX.Element;
+//# sourceMappingURL=ViewActions.d.ts.map

package/dist/__app__/{src/components → components}/view-page/ViewActions.jsx

@@ -1,3 +1,4 @@
+import {} from '@likec4/diagrams';
 import { CaretDownIcon, Share1Icon as ShareIcon } from '@radix-ui/react-icons';
 import { Button, Dialog, DropdownMenu, Flex, Text } from '@radix-ui/themes';
 import React, { useState } from 'react';

package/dist/__app__/const.d.ts

@@ -0,0 +1,2 @@
+export declare const BaseUrl: string;
+//# sourceMappingURL=const.d.ts.map

package/dist/__app__/data/atoms.d.ts

@@ -0,0 +1,5 @@
+import type { DiagramView } from '@likec4/core';
+export declare const viewsAtom: import("jotai").WritableAtom<import("rambdax").Dictionary<import("jotai").WritableAtom<DiagramView, [DiagramView], void>>, [update: Record<LikeC4ViewId, DiagramView>], void>;
+export declare const diagramsTreeAtom: import("jotai").Atom<import("react-accessible-treeview").INode<import("react-accessible-treeview/dist/TreeView/utils").IFlatMetadata>[]>;
+export declare const selectLikeC4ViewAtom: (viewId: string) => import("jotai").Atom<DiagramView | null>;
+//# sourceMappingURL=atoms.d.ts.map

package/dist/__app__/data/hooks.d.ts

@@ -0,0 +1,10 @@
+import { type ViewsGroup } from './index-page';
+export declare const useLikeC4View: (viewId: string) => import("@likec4/core").DiagramView | null;
+export declare const useDiagramsTree: () => import("react-accessible-treeview").INode<import("react-accessible-treeview/dist/TreeView/utils").IFlatMetadata>[];
+export type { ViewsGroup };
+export declare const useViewGroupsAtoms: () => import("jotai").Atom<{
+    path: string;
+    isRoot: boolean;
+    views: [import("jotai").WritableAtom<import("@likec4/core").DiagramView, [import("@likec4/core").DiagramView], void>, ...import("jotai").WritableAtom<import("@likec4/core").DiagramView, [import("@likec4/core").DiagramView], void>[]];
+}>[];
+//# sourceMappingURL=hooks.d.ts.map

package/dist/__app__/data/index-page.d.ts

@@ -0,0 +1,17 @@
+import type { ExtractAtomValue } from 'jotai';
+/**
+ * Views grouped by folder
+ */
+declare const viewGroupsAtom: import("jotai").Atom<{
+    path: string;
+    isRoot: boolean;
+    views: [import("jotai").WritableAtom<import("@likec4/core").DiagramView, [import("@likec4/core").DiagramView], void>, ...import("jotai").WritableAtom<import("@likec4/core").DiagramView, [import("@likec4/core").DiagramView], void>[]];
+}[]>;
+export type ViewsGroup = ExtractAtomValue<typeof viewGroupsAtom>[number];
+export declare const viewsGroupAtomsAtom: import("jotai").Atom<import("jotai").Atom<{
+    path: string;
+    isRoot: boolean;
+    views: [import("jotai").WritableAtom<import("@likec4/core").DiagramView, [import("@likec4/core").DiagramView], void>, ...import("jotai").WritableAtom<import("@likec4/core").DiagramView, [import("@likec4/core").DiagramView], void>[]];
+}>[]>;
+export {};
+//# sourceMappingURL=index-page.d.ts.map

package/dist/__app__/data/index.d.ts

@@ -0,0 +1,2 @@
+export * from './hooks';
+//# sourceMappingURL=index.d.ts.map

package/dist/__app__/data/sidebar-diagram-tree.d.ts

@@ -0,0 +1,3 @@
+import type { DiagramView } from '@likec4/core';
+export declare function buildDiagramTreeAtom(views: DiagramView[]): import("react-accessible-treeview").INode<import("react-accessible-treeview/dist/TreeView/utils").IFlatMetadata>[];
+//# sourceMappingURL=sidebar-diagram-tree.d.ts.map

package/dist/__app__/likec4-views.d.ts

@@ -0,0 +1,5 @@
+declare const _default: {
+    log: () => void;
+};
+export default _default;
+//# sourceMappingURL=likec4-views.d.ts.map

package/dist/__app__/main.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=main.d.ts.map

package/dist/__app__/pages/embed.page.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+type EmbedPageProps = {
+    viewId: string;
+    padding: number;
+    transparentBg?: boolean | undefined;
+};
+export declare function EmbedPage({ viewId, padding, transparentBg }: EmbedPageProps): JSX.Element;
+export {};
+//# sourceMappingURL=embed.page.d.ts.map

package/dist/__app__/{src/pages → pages}/embed.page.jsx

@@ -1,5 +1,5 @@
 import { Diagram } from '@likec4/diagrams';
-import { useWindowSize } from '@react-hookz/web/esm';
+import { useWindowSize } from '@react-hookz/web';
 import { DiagramNotFound } from '../components';
 import { useLikeC4View } from '../data';
 import { useTransparentBackground } from './useTransparentBackground';

package/dist/__app__/pages/export.page.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+type ExportPageProps = {
+    viewId: string;
+    padding: number;
+};
+export declare function ExportPage({ viewId, padding }: ExportPageProps): JSX.Element;
+export {};
+//# sourceMappingURL=export.page.d.ts.map

package/dist/__app__/{src/pages → pages}/export.page.jsx

@@ -1,5 +1,5 @@
 import { Diagram } from '@likec4/diagrams';
-import { useWindowSize } from '@react-hookz/web/esm';
+import { useWindowSize } from '@react-hookz/web';
 import { DiagramNotFound } from '../components';
 import { useLikeC4View } from '../data';
 import { useTransparentBackground } from './useTransparentBackground';

package/dist/__app__/pages/index-page/index.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare function IndexPage(): JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/__app__/{src/pages → pages}/index-page/index.jsx

@@ -1,6 +1,6 @@
 import { Diagram } from '@likec4/diagrams';
 import { Box, Card, Container, Flex, Heading, IconButton, Inset, Section, Separator, Text } from '@radix-ui/themes';
-import { useDebouncedEffect } from '@react-hookz/web/esm';
+import { useDebouncedEffect } from '@react-hookz/web';
 import { useAtomValue } from 'jotai';
 import { memo, useState } from 'react';
 import { isEmpty } from 'remeda';

package/dist/__app__/pages/index.d.ts

@@ -0,0 +1,5 @@
+export * from './index-page';
+export * from './export.page';
+export * from './embed.page';
+export * from './view.page';
+//# sourceMappingURL=index.d.ts.map

package/dist/__app__/pages/useTransparentBackground.d.ts

@@ -0,0 +1,2 @@
+export declare function useTransparentBackground(enabled?: boolean): void;
+//# sourceMappingURL=useTransparentBackground.d.ts.map

package/dist/__app__/{src/pages → pages}/useTransparentBackground.js

@@ -1,4 +1,4 @@
-import { useIsomorphicLayoutEffect } from '@react-hookz/web/esm';
+import { useIsomorphicLayoutEffect } from '@react-hookz/web';
 // To get the transparent background
 // We need to add a class to the HTML element
 export function useTransparentBackground(enabled = true) {

package/dist/__app__/pages/view-page/ViewAsReact.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import type { DiagramView } from '@likec4/diagrams';
+type ViewAsReactProps = {
+    diagram: DiagramView;
+};
+export declare function ViewAsReact({ diagram }: ViewAsReactProps): JSX.Element;
+export {};
+//# sourceMappingURL=ViewAsReact.d.ts.map

package/dist/__app__/{src/pages → pages}/view-page/ViewAsReact.jsx

@@ -1,6 +1,6 @@
 import { Diagram, useDiagramApi } from '@likec4/diagrams';
 import { Box } from '@radix-ui/themes';
-import { useWindowSize } from '@react-hookz/web/esm';
+import { useWindowSize } from '@react-hookz/web';
 import { useCallback, useEffect, useRef } from 'react';
 import { $pages } from '../../router';
 import { cn } from '../../utils';

package/dist/__app__/pages/view-page/index.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export * from './ViewAsReact';
+export declare const ViewAs: import("react").LazyExoticComponent<typeof import("./other-formats").default>;
+//# sourceMappingURL=index.d.ts.map

package/dist/__app__/pages/view-page/other-formats/ViewAsD2.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+type ViewAsDotProps = {
+    viewId: string;
+};
+export default function ViewAsD2({ viewId }: ViewAsDotProps): JSX.Element;
+export {};
+//# sourceMappingURL=ViewAsD2.d.ts.map

package/dist/__app__/{src/pages → pages}/view-page/other-formats/ViewAsD2.jsx

@@ -1,5 +1,5 @@
-import { Box, Button, Code, ScrollArea } from '@radix-ui/themes';
-import { useAsync } from '@react-hookz/web/esm';
+import { Box, Button, Code, Flex, ScrollArea } from '@radix-ui/themes';
+import { useAsync } from '@react-hookz/web';
 import { d2Source } from 'virtual:likec4/d2-sources';
 import { CopyToClipboard } from '../../../components';
 import { Panel, PanelGroup, PanelResizeHandle } from 'react-resizable-panels';

package/dist/__app__/pages/view-page/other-formats/ViewAsDot.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+type ViewAsDotProps = {
+    viewId: string;
+};
+export default function ViewAsDot({ viewId }: ViewAsDotProps): JSX.Element;
+export {};
+//# sourceMappingURL=ViewAsDot.d.ts.map

package/dist/__app__/{src/pages → pages}/view-page/other-formats/ViewAsDot.jsx

@@ -1,4 +1,4 @@
-import { Box, Code, ScrollArea } from '@radix-ui/themes';
+import { Box, Code, Grid, ScrollArea } from '@radix-ui/themes';
 import { dotSource, svgSource } from 'virtual:likec4/dot-sources';
 import { CopyToClipboard } from '../../../components';
 import { Panel, PanelGroup, PanelResizeHandle } from 'react-resizable-panels';

package/dist/__app__/pages/view-page/other-formats/ViewAsMmd.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+type ViewAsMmdProps = {
+    viewId: string;
+};
+export default function ViewAsMmd({ viewId }: ViewAsMmdProps): JSX.Element;
+export {};
+//# sourceMappingURL=ViewAsMmd.d.ts.map

package/dist/__app__/{src/pages → pages}/view-page/other-formats/ViewAsMmd.jsx

@@ -1,5 +1,5 @@
-import { Box, Code, ScrollArea } from '@radix-ui/themes';
-import { useAsync } from '@react-hookz/web/esm';
+import { Box, Code, Flex, ScrollArea } from '@radix-ui/themes';
+import { useAsync } from '@react-hookz/web';
 import { useEffect } from 'react';
 import { mmdSource } from 'virtual:likec4/mmd-sources';
 import { CopyToClipboard } from '../../../components';

package/dist/__app__/pages/view-page/other-formats.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { type ViewMode } from '../../router';
+type Props = {
+    viewMode: Exclude<ViewMode, 'react'>;
+    viewId: string;
+};
+export default function ViewDiagramInOtherFormats({ viewId, viewMode }: Props): JSX.Element;
+export {};
+//# sourceMappingURL=other-formats.d.ts.map

package/dist/__app__/pages/view.page.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import type { ViewMode } from '../router';
+type ViewPageProps = {
+    viewId: string;
+    viewMode: ViewMode;
+    showUI?: boolean;
+};
+export declare function ViewPage({ viewId, viewMode, showUI }: ViewPageProps): JSX.Element;
+export {};
+//# sourceMappingURL=view.page.d.ts.map

package/dist/__app__/{src/pages → pages}/view.page.jsx

@@ -1,7 +1,8 @@
-import { Suspense } from 'react';
+import { Fragment, Suspense } from 'react';
 import { DiagramNotFound } from '../components';
 import { Header } from '../components/view-page/Header';
 import { useLikeC4View } from '../data';
+import { useSearchParams } from '../router';
 import { ViewAs, ViewAsReact } from './view-page';
 export function ViewPage({ viewId, viewMode, showUI = true }) {
     const diagram = useLikeC4View(viewId);

package/dist/__app__/router.d.ts

@@ -0,0 +1,69 @@
+import type { ViewID } from '@likec4/core';
+export declare const $router: import("@nanostores/router").Router<{
+    readonly index: string;
+    readonly view: `${string}view/:viewId?`;
+    readonly export: `${string}export/:viewId`;
+    readonly embed: `${string}embed/:viewId`;
+}>;
+export type ViewMode = 'react' | 'dot' | 'mmd' | 'd2';
+declare const searchParams: import("nanostores").ReadableAtom<{
+    theme: "light" | "dark" | undefined;
+    padding: number | undefined;
+    mode: ViewMode | undefined;
+    showUI: boolean | undefined;
+}>;
+type SearchParams = ReturnType<(typeof searchParams)['get']>;
+export declare function updateSearchParams(update: Partial<SearchParams>): void;
+export declare const useSearchParams: () => {
+    theme: "light" | "dark" | undefined;
+    padding: number | undefined;
+    mode: ViewMode | undefined;
+    showUI: boolean | undefined;
+};
+export declare const useRoute: () => {
+    route: "view";
+    params: {
+        viewId: ViewID;
+        theme: "light" | "dark";
+        mode: ViewMode;
+        padding?: never;
+    };
+    showUI: boolean;
+} | {
+    route: "export" | "embed";
+    params: {
+        viewId: ViewID;
+        padding: number;
+        theme: "light" | "dark" | undefined;
+        mode?: never;
+    };
+    showUI: boolean;
+} | {
+    route: "index";
+    params: {
+        theme: "light" | "dark";
+        viewId?: never;
+        mode?: never;
+        padding?: never;
+    };
+    showUI: boolean;
+};
+export type Route = NonNullable<ReturnType<typeof useRoute>>;
+export declare const isCurrentDiagram: <V extends {
+    id: string;
+}>(view: V) => boolean;
+export declare const $pages: {
+    readonly index: {
+        readonly url: () => string;
+        readonly open: () => void;
+    };
+    readonly view: {
+        readonly url: (viewId: string) => string;
+        readonly open: (viewId: string) => void;
+    };
+    readonly embed: {
+        readonly path: (viewId: string) => string;
+    };
+};
+export {};
+//# sourceMappingURL=router.d.ts.map

package/dist/__app__/utils/index.d.ts

@@ -0,0 +1,2 @@
+export * from './utils';
+//# sourceMappingURL=index.d.ts.map

package/dist/__app__/utils/utils.d.ts

@@ -0,0 +1,3 @@
+import { type ClassValue } from 'clsx';
+export declare function cn(...inputs: ClassValue[]): string;
+//# sourceMappingURL=utils.d.ts.map