likec4 0.48.0 → 0.50.0

package/dist/@likec4/diagrams/diagram/state/atoms.js

@@ -3,92 +3,67 @@ import { equals } from "rambdax";
 import { selectAtom } from "jotai/utils";
 const currentHoveredNodeAtom = atom(null);
 const nodeTimeoutAtom = atom(void 0);
+const scheduleHoveredNode = (set, node = null, timeout = 175) => {
+  if (timeout <= 0) {
+    set(currentHoveredNodeAtom, node);
+    return;
+  }
+  set(
+    nodeTimeoutAtom,
+    setTimeout(() => {
+      set(currentHoveredNodeAtom, node);
+    }, timeout)
+  );
+};
 export const hoveredNodeAtom = atom(
   (get) => get(currentHoveredNodeAtom),
   (get, set, update) => {
     clearTimeout(get(nodeTimeoutAtom));
-    clearTimeout(get(edgeTimeoutAtom));
     const _prev = get(currentHoveredNodeAtom);
     const _next = typeof update === "function" ? update(_prev) : update;
     if (equals(_prev, _next)) {
       return false;
     }
-    if (_next != null && _prev == null) {
-      set(
-        nodeTimeoutAtom,
-        setTimeout(() => {
-          set(currentHoveredNodeAtom, _next);
-          set(currentHoveredEdgeAtom, null);
-        }, 200)
-      );
-      return true;
-    }
-    if (_next != null && _prev != null) {
-      set(
-        nodeTimeoutAtom,
-        setTimeout(() => {
-          set(currentHoveredNodeAtom, _next);
-          set(currentHoveredEdgeAtom, null);
-        }, 150)
-      );
-      return true;
-    }
-    if (_next == null && _prev != null) {
-      set(
-        nodeTimeoutAtom,
-        setTimeout(() => {
-          set(currentHoveredNodeAtom, null);
-        }, 150)
-      );
-      return true;
+    const timeout = !!_next && !!_prev ? 120 : 175;
+    if (_next != null) {
+      clearTimeout(get(edgeTimeoutAtom));
+      scheduleHoveredEdge(set, null, timeout);
     }
-    set(currentHoveredNodeAtom, _next);
+    scheduleHoveredNode(set, _next, timeout);
     return true;
   }
 );
 export const hoveredNodeIdAtom = selectAtom(hoveredNodeAtom, (node) => node?.id ?? null);
 const currentHoveredEdgeAtom = atom(null);
 const edgeTimeoutAtom = atom(void 0);
+const scheduleHoveredEdge = (set, edge = null, timeout = 175) => {
+  if (timeout <= 0) {
+    set(currentHoveredEdgeAtom, edge);
+    return;
+  }
+  set(
+    edgeTimeoutAtom,
+    setTimeout(() => {
+      set(currentHoveredEdgeAtom, edge);
+    }, timeout)
+  );
+};
 export const hoveredEdgeAtom = atom(
   (get) => get(currentHoveredEdgeAtom),
   (get, set, update) => {
-    clearTimeout(get(nodeTimeoutAtom));
     clearTimeout(get(edgeTimeoutAtom));
     const _prev = get(currentHoveredEdgeAtom);
     const _next = typeof update === "function" ? update(_prev) : update;
     if (equals(_prev, _next)) {
       return false;
     }
-    if (_next != null && _prev == null) {
-      set(
-        edgeTimeoutAtom,
-        setTimeout(() => {
-          set(currentHoveredEdgeAtom, _next);
-          set(currentHoveredNodeAtom, null);
-        }, 400)
-      );
-      return true;
-    }
-    if (_next != null && _prev != null) {
-      set(
-        edgeTimeoutAtom,
-        setTimeout(() => {
-          set(currentHoveredEdgeAtom, _next);
-          set(currentHoveredNodeAtom, null);
-        }, 150)
-      );
-      return true;
-    }
-    if (_next == null && _prev != null) {
-      set(
-        edgeTimeoutAtom,
-        setTimeout(() => {
-          set(currentHoveredEdgeAtom, null);
-        }, 150)
-      );
-      return true;
+    let timeout = 175;
+    if (_next != null) {
+      timeout = _prev != null ? 120 : 300;
+      clearTimeout(get(nodeTimeoutAtom));
+      scheduleHoveredNode(set, null, timeout);
     }
-    set(currentHoveredEdgeAtom, null);
+    scheduleHoveredEdge(set, _next, timeout);
     return true;
   }
 );

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

@@ -0,0 +1,14 @@
+import { is } from "rambdax";
+export function mousePointer(e) {
+  const container = e.target.getStage()?.container();
+  if (container) {
+    container.style.cursor = "pointer";
+  }
+}
+export function mouseDefault(e) {
+  const container = e.target.getStage()?.container();
+  if (container) {
+    container.style.cursor = "";
+  }
+}
+export const isNumber = is(Number);

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

@@ -13,11 +13,10 @@ export function useDiagramApi() {
       get container() {
         return ref.current?.container ?? null;
       },
-      resetStageZoom: (_immediate) => {
-        nonNullable(ref.current, "not mounted, use ref").resetStageZoom(_immediate);
-      },
-      centerOnNode: (node) => nonNullable(ref.current, "not mounted, use ref").centerOnNode(node),
-      centerAndFit: () => nonNullable(ref.current, "not mounted, use ref").centerAndFit()
+      resetStageZoom: (_immediate) => nonNullable(ref.current, "not mounted, use ref").resetStageZoom(_immediate),
+      centerOnNode: (node, opts) => nonNullable(ref.current, "not mounted, use ref").centerOnNode(node, opts),
+      centerOnRect: (rect, opts) => nonNullable(ref.current, "not mounted, use ref").centerOnRect(rect, opts),
+      centerAndFit: (opts) => nonNullable(ref.current, "not mounted, use ref").centerAndFit(opts)
     })
   );
   return [ref, api];

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

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

package/dist/__app__/likec4.css

@@ -1,11 +1,8 @@
 @import '@radix-ui/themes/styles.css';
 
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
 .radix-themes {
   --font-weight-bold: 600;
+  --color-text-dimmed: var(--gray-a8);
 }
 
 *,
@@ -26,10 +23,16 @@ html, body {
 }
 
 #like4-root {
-  margin: 0;
+  /* margin: 0;
   padding: 0;
   width: 100vw;
   height: 100vh;
+  overscroll-behavior: none;
+  overflow: hidden; */
+  /* & > div {
+    position: fixed;
+    inset: 0;
+  } */
 }
 
 .transparent-bg {

package/dist/__app__/src/App.jsx

@@ -1,18 +1,18 @@
+import { nonexhaustive } from '@likec4/core';
+import { Theme } from '@radix-ui/themes';
 import { Provider } from 'jotai';
-import { Fragment } from 'react';
+import { Fragment, useDeferredValue } from 'react';
+import { isNil } from 'remeda';
 import { Sidebar } from './components';
-import { ExportPage, IndexPage, EmbedPage, ViewPage } from './pages';
+import { EmbedPage, ExportPage, IndexPage, ViewPage } from './pages';
 import { useRoute } from './router';
-import { Theme } from '@radix-ui/themes';
-import { nonexhaustive } from '@likec4/core';
-import { isNil } from 'remeda';
 const Routes = () => {
-    const r = useRoute();
+    const r = useDeferredValue(useRoute());
     const theme = r.params?.theme;
     let page = null;
     switch (r.route) {
         case 'view': {
-            page = <ViewPage key='view' viewId={r.params.viewId} showUI={r.showUI}/>;
+            page = (<ViewPage key='view' viewId={r.params.viewId} viewMode={r.params.mode} showUI={r.showUI}/>);
             break;
         }
         case 'export': {
@@ -30,11 +30,9 @@ const Routes = () => {
         default:
             nonexhaustive(r);
     }
-    return (<Theme hasBackground={!!theme} accentColor='indigo' radius='small' appearance={theme}>
+    return (<Theme hasBackground={!!theme} accentColor='indigo' radius='small' appearance={theme ?? 'inherit'}>
       {page}
-      {r.showUI && (<Fragment key='ui'>
-          <Sidebar />
-        </Fragment>)}
+      <Fragment key='ui'>{r.showUI && <Sidebar />}</Fragment>
     </Theme>);
 };
 export default function App() {

package/dist/__app__/src/components/CopyToClipboard.jsx

@@ -0,0 +1,29 @@
+import { CheckCircledIcon, CopyIcon } from '@radix-ui/react-icons';
+import { Box, IconButton, Tooltip } from '@radix-ui/themes';
+import { useCallback, useEffect, useState } from 'react';
+import styles from './CopyToClipboard.module.css';
+export function CopyToClipboard({ text }) {
+    const [copied, setCopied] = useState(false);
+    const copy = useCallback(() => {
+        void navigator.clipboard.writeText(text);
+        setCopied(true);
+    }, [text]);
+    useEffect(() => {
+        setCopied(false);
+    }, [text]);
+    useEffect(() => {
+        if (copied) {
+            const timeout = setTimeout(() => {
+                setCopied(false);
+            }, 800);
+            return () => clearTimeout(timeout);
+        }
+    }, [copied]);
+    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>
+      </Tooltip>
+    </Box>);
+}

package/dist/__app__/src/components/CopyToClipboard.module.css

@@ -0,0 +1,16 @@
+@keyframes copyButton {
+  0% { transform: scale(1); opacity: 1 }
+  40% { transform: scale(1.4); opacity: .7; }
+  60% { transform: scale(0.6); opacity: 1 }
+  80% { transform: scale(0.95) }
+  100% { transform: scale(0.85) }
+}
+.copyButton {
+  animation-timing-function: ease-in;
+  backdrop-filter: blur(2px);
+
+  &:where([data-copied='true']) {
+    animation-name: copyButton;
+    animation-duration: .7s;
+  }
+}

package/dist/__app__/src/components/DiagramNotFound.jsx

@@ -22,8 +22,8 @@ export const DiagramNotFound = ({ viewId }) => {
               does not exist
             </Text>
             <Box pt='2'>
-              <Button variant='soft' color='amber' className='cursor-pointer' onClick={() => $pages.index.open()}>
-                Go to overview
+              <Button asChild variant='soft' color='amber'>
+                <a href={$pages.index.url()}>Go to overview</a>
               </Button>
             </Box>
           </Flex>

package/dist/__app__/src/components/index.js

@@ -1,4 +1,5 @@
 export { Sidebar } from './sidebar/Sidebar';
-export { ViewActionsToolbar } from './view-page/ViewActionsToolbar';
+export { ViewActions } from './view-page/ViewActions';
 export { ThemePanelToggle } from './ThemePanelToggle';
 export { DiagramNotFound } from './DiagramNotFound';
+export { CopyToClipboard } from './CopyToClipboard';

package/dist/__app__/src/components/sidebar/Sidebar.jsx

@@ -11,7 +11,7 @@ export const Sidebar = () => {
     const [isOpened, toggle] = useToggle(false, true);
     useClickOutside(ref, () => isOpened && toggle());
     return (<>
-      <Flex position='fixed' left='0' p={'2'} className={cn(styles.trigger, 'inset-y-0 cursor-pointer items-start', isOpened && 'display-none')} onClick={toggle}>
+      <Flex position='fixed' left='0' top={'0'} bottom={'0'} p={'2'} justify={'start'} data-opened={isOpened} className={cn(styles.trigger)} onClick={toggle}>
         <IconButton size='2' color='gray' variant='soft'>
           <HamburgerMenuIcon width={22} height={22}/>
         </IconButton>

package/dist/__app__/src/components/sidebar/styles.module.css

@@ -1,7 +1,10 @@
 .trigger {
-
   cursor: pointer;
 
+  &[data-opened='true'] {
+    visibility: hidden;
+  }
+
   &::before {
     transition-property: all;
     transition-timing-function: cubic-bezier(0, 0.31, 0, 1.03);

package/dist/__app__/src/components/view-page/DisplayModeSelector.jsx

@@ -1,7 +1,8 @@
 import { CaretDownIcon } from '@radix-ui/react-icons';
 import { Button, DropdownMenu, Flex, IconButton, Separator } from '@radix-ui/themes';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { keys } from 'remeda';
+import { updateSearchParams, useSearchParams } from '../../router';
 const Mode = {
     react: 'React',
     dot: 'Graphviz',
@@ -10,19 +11,24 @@ const Mode = {
 };
 const mode_keys = keys.strict(Mode);
 export const DisplayModeSelector = () => {
-    const [current, setCurrent] = useState('react');
+    const current = useSearchParams().mode ?? 'react';
     const [[first, second, ...rest], setModes] = useState(mode_keys);
     const changeMode = (mode) => () => {
         if (mode === current) {
             return;
         }
-        setCurrent(mode);
-        if (mode === first || mode === second) {
-            return;
-        }
-        // change only second
-        setModes(([first, ...rest]) => [first, mode, ...rest.filter(m => m !== mode)]);
+        updateSearchParams({ mode });
     };
+    useEffect(() => {
+        // change only second
+        setModes(modes => {
+            if (modes[0] === current || modes[1] === current) {
+                return modes;
+            }
+            const [first, ...rest] = modes;
+            return [first, current, ...rest.filter(m => m !== current)];
+        });
+    }, [current]);
     return (<Flex display={{
             initial: 'none',
             sm: 'flex'
@@ -39,7 +45,7 @@ export const DisplayModeSelector = () => {
             <CaretDownIcon />
           </IconButton>
         </DropdownMenu.Trigger>
-        <DropdownMenu.Content>
+        <DropdownMenu.Content size={'1'} side='bottom' align='end'>
           {rest.map(mode => (<DropdownMenu.Item key={mode} onClick={changeMode(mode)}>
               {Mode[mode]}
             </DropdownMenu.Item>))}

package/dist/__app__/src/components/view-page/Header.jsx

@@ -0,0 +1,97 @@
+import { ExternalLinkIcon, Link2Icon } from '@radix-ui/react-icons';
+import { Box, Code, Flex, Heading, HoverCard, IconButton, Link, Text, Tooltip } from '@radix-ui/themes';
+import { isEmpty } from 'remeda';
+import { ViewActions } from './ViewActions';
+import styles from './Header.module.css';
+export function Header({ diagram }) {
+    return (<Flex position={'fixed'} top='0' left='0' width={'100%'} className={styles.header} justify='between' align={'stretch'} gap={'4'} p={'2'}>
+      <Flex pl='7' grow='1' gap={'2'} shrink='1' align={'stretch'} wrap={'nowrap'}>
+        <DiagramTitle diagram={diagram}/>
+        <DiagramLinks diagram={diagram}/>
+      </Flex>
+      <ViewActions diagram={diagram}/>
+    </Flex>);
+}
+function DiagramTitle({ diagram }) {
+    const hasDescription = !isEmpty(diagram.description?.trim());
+    return (<HoverCard.Root closeDelay={500}>
+      <HoverCard.Trigger>
+        <Flex px={'3'} className={styles.title} align={'center'}>
+          <Heading size={{
+            initial: '2',
+            sm: '3',
+            md: '4'
+        }} trim={'both'} weight={'medium'}>
+            {diagram.title || 'Untitled'}
+          </Heading>
+        </Flex>
+      </HoverCard.Trigger>
+      <HoverCard.Content size={'2'} className={styles.titleHoverCardContent}>
+        <Flex direction='column' gap='3'>
+          <HoverCardItem title='view id'>
+            <Code color='gray' size='2'>
+              {diagram.id}
+            </Code>
+          </HoverCardItem>
+          {diagram.viewOf && (<HoverCardItem title='view of'>
+              <Code size='2'>{diagram.viewOf}</Code>
+            </HoverCardItem>)}
+          <HoverCardItem title='description'>
+            {hasDescription ? (<Text as='p' size='2' style={{ whiteSpace: 'pre-line' }}>
+                {diagram.description?.trim()}
+              </Text>) : (<Text as='p' size='2' className={styles.dimmed}>
+                no description
+              </Text>)}
+          </HoverCardItem>
+        </Flex>
+      </HoverCard.Content>
+    </HoverCard.Root>);
+}
+function HoverCardItem({ title, children }) {
+    return (<Box>
+      <Text as='p' size='1' color='gray'>
+        {title}
+      </Text>
+      {children}
+    </Box>);
+}
+function DiagramLinks({ diagram: { links } }) {
+    if (!links) {
+        return null;
+    }
+    if (links.length > 1) {
+        return (<Flex align={'center'}>
+        <Box grow={'0'} height={'4'}>
+          <HoverCard.Root closeDelay={500}>
+            <HoverCard.Trigger>
+              <IconButton color='gray' variant='ghost' size={'2'}>
+                <Link2Icon width={16} height={16}/>
+              </IconButton>
+            </HoverCard.Trigger>
+            <HoverCard.Content size={'2'} align='center'>
+              <Flex direction='column' gap='2'>
+                {links.map(link => (<Flex asChild align={'center'} gap={'2'} key={link}>
+                    <Link href={link} target='_blank'>
+                      <ExternalLinkIcon width={13} height={13}/>
+                      <Text size='2'>{link}</Text>
+                    </Link>
+                  </Flex>))}
+              </Flex>
+            </HoverCard.Content>
+          </HoverCard.Root>
+        </Box>
+      </Flex>);
+    }
+    const link = links[0];
+    return (<Flex align={'center'}>
+      <Tooltip content={link}>
+        <Box grow={'0'}>
+          <IconButton asChild color='gray' variant='ghost' size={'2'}>
+            <Link href={link} target='_blank'>
+              <Link2Icon width={16} height={16}/>
+            </Link>
+          </IconButton>
+        </Box>
+      </Tooltip>
+    </Flex>);
+}

package/dist/__app__/src/components/view-page/Header.module.css

@@ -0,0 +1,24 @@
+.header {
+  background: var(--color-panel-translucent);
+  border-bottom: 1px solid var(--gray-a2);
+}
+
+.dimmed {
+  color: var(--color-text-dimmed);
+}
+
+/* diagram title */
+.title {
+  border-radius: var(--radius-2);
+  cursor: var(--cursor-link);
+
+  &:hover {
+    background-color: var(--gray-a3);
+  }
+}
+
+.titleHoverCardContent {
+  width: var(--radix-hover-card-trigger-width);
+  min-width: 200px;
+  max-width: 500px;
+}

package/dist/__app__/src/components/view-page/ShareDialog.jsx

@@ -1,24 +1,25 @@
 import { ExclamationTriangleIcon, InfoCircledIcon, OpenInNewWindowIcon } from '@radix-ui/react-icons';
-import { Box, Button, Callout, Code, Dialog, Flex, Link, Select, Tabs, Text } from '@radix-ui/themes';
+import { Box, Button, Callout, Code, Dialog, Flex, Link, ScrollArea, Select, Tabs, Text } from '@radix-ui/themes';
 import { useState } from 'react';
 import { $pages } from '../../router';
+import { CopyToClipboard } from '../CopyToClipboard';
 const embedCode = (diagram, theme) => {
+    const url = new URL($pages.embed.path(diagram.id), window.location.href);
     const padding = 20;
-    const params = new URLSearchParams();
-    params.set('padding', `${padding}`);
+    url.searchParams.set('padding', `${padding}`);
     if (theme !== 'system') {
-        params.set('theme', theme);
+        url.searchParams.set('theme', theme);
+    }
+    else {
+        url.searchParams.delete('theme');
     }
     const width = diagram.width + padding * 2;
     const height = diagram.height + padding * 2;
-    const url = new URL(window.location.href);
-    url.pathname = $pages.embed.path(diagram.id);
-    url.search = params.toString();
-    const iframe = `<iframe src="${url.href}" width="100%" height="100%" style="border:0;background:transparent;"></iframe>`;
     const code = `
-<div style="aspect-ratio:${width}/${height};max-width:${width}px;width:100%;height:auto;padding:0;margin-left:auto;margin-right:auto">
-  ${iframe}
-</div>`.trim();
+<div style="aspect-ratio:${width}/${height};width:100%;height:auto;max-width:${width}px;margin:0 auto">
+  <iframe src="${url.href}" width="100%" height="100%" style="border:0;background:transparent;"></iframe>
+</div>
+`.trim();
     return {
         code,
         href: url.href
@@ -64,10 +65,17 @@ export const ShareDialog = ({ diagram }) => {
                     </Link>
                   </Flex>
                 </Flex>
-                <Box asChild display={'block'} my='2' p='2' className='whitespace-pre-wrap overflow-scroll select-all'>
-                  <Code variant='soft' autoFocus>
-                    {code}
-                  </Code>
+                <Box position={'relative'} mt={'1'}>
+                  <ScrollArea scrollbars='both' style={{ maxHeight: 200 }}>
+                    <Box asChild display={'block'} px='2' py='3' style={{
+            whiteSpace: 'pre'
+        }}>
+                      <Code variant='soft' autoFocus>
+                        {code}
+                      </Code>
+                    </Box>
+                  </ScrollArea>
+                  <CopyToClipboard text={code}/>
                 </Box>
               </label>
               <Text as='div' size='2' color='gray' trim={'start'}>

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

@@ -0,0 +1,69 @@
+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';
+// import { ThemePanelToggle } from '../ThemePanelToggle'
+import { DisplayModeSelector } from './DisplayModeSelector';
+import ExportDiagram from './ExportDiagram';
+import { ShareDialog } from './ShareDialog';
+import { updateSearchParams } from '../../router';
+const ExportMenu = ({ onExport, children }) => {
+    const changeMode = (mode) => (_) => {
+        updateSearchParams({ mode });
+    };
+    return (<DropdownMenu.Root>
+      <DropdownMenu.Trigger>{children}</DropdownMenu.Trigger>
+      <DropdownMenu.Content variant='soft'>
+        <DropdownMenu.Label>
+          <Text weight='medium'>Current view</Text>
+        </DropdownMenu.Label>
+        <DropdownMenu.Group>
+          <DropdownMenu.Item onClick={_ => {
+            onExport('png');
+        }}>
+            Export as .png
+          </DropdownMenu.Item>
+          <DropdownMenu.Item onClick={changeMode('dot')}>Export as .dot</DropdownMenu.Item>
+          <DropdownMenu.Item onClick={changeMode('mmd')}>Export as .mmd</DropdownMenu.Item>
+          <DropdownMenu.Item onClick={changeMode('d2')}>Export as .d2</DropdownMenu.Item>
+          <DropdownMenu.Item disabled>Export to Draw.io</DropdownMenu.Item>
+          <DropdownMenu.Item disabled>Export to Miro</DropdownMenu.Item>
+        </DropdownMenu.Group>
+        <DropdownMenu.Separator />
+        <DropdownMenu.Label>
+          <Text weight='medium'>All views</Text>
+        </DropdownMenu.Label>
+        <DropdownMenu.Group>
+          <DropdownMenu.Item disabled>Download as ZIP</DropdownMenu.Item>
+        </DropdownMenu.Group>
+      </DropdownMenu.Content>
+    </DropdownMenu.Root>);
+};
+export const ViewActions = ({ diagram }) => {
+    const [exportTo, setExportTo] = useState(null);
+    return (<Flex shrink={'0'} grow={'0'} gap={'3'} align='center' wrap={'nowrap'}>
+      <DisplayModeSelector />
+      <Dialog.Root>
+        <Dialog.Trigger>
+          <Button variant='solid' size={{
+            initial: '1',
+            md: '2'
+        }}>
+            <ShareIcon />
+            <Text>Share</Text>
+          </Button>
+        </Dialog.Trigger>
+        <ShareDialog diagram={diagram}/>
+      </Dialog.Root>
+      <ExportMenu onExport={setExportTo}>
+        <Button variant='soft' color='gray' size={{
+            initial: '1',
+            md: '2'
+        }}>
+          <Text>Export</Text>
+          <CaretDownIcon />
+        </Button>
+      </ExportMenu>
+      {exportTo === 'png' && (<ExportDiagram key={'export-diagram-png'} diagram={diagram} onCompleted={() => setExportTo(null)}/>)}
+      {/* <ThemePanelToggle /> */}
+    </Flex>);
+};