likec4 0.40.0-build.9 → 0.40.0

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

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { nonNullable, defaultTheme as theme } from "@likec4/core";
 import { useHookableRef, useUpdateEffect } from "@react-hookz/web/esm";
-import { useSpring, easings } from "@react-spring/konva";
+import { easings, useSpring } from "@react-spring/konva";
 import { clamp } from "rambdax";
 import { forwardRef, useEffect, useImperativeHandle, useRef } from "react";
 import { AnimatedStage, Layer } from "../konva.js";
@@ -125,9 +125,15 @@ export const Diagram = /* @__PURE__ */ forwardRef(
     useImperativeHandle(
       ref,
       () => ({
-        stage: () => nonNullable(stageRef.current),
-        diagramView: () => refs.current.diagram,
-        container: () => nonNullable(stageRef.current?.container()),
+        get stage() {
+          return nonNullable(stageRef.current, "not mounted");
+        },
+        get diagramView() {
+          return refs.current.diagram;
+        },
+        get container() {
+          return nonNullable(stageRef.current?.container(), "not mounted");
+        },
         resetStageZoom: (_immediate) => {
           refs.current.resetStageZoom(_immediate);
         },
@@ -139,7 +145,7 @@ export const Diagram = /* @__PURE__ */ forwardRef(
         }),
         centerAndFit: () => refs.current.centerAndFit()
       }),
-      [refs, stageRef]
+      [refs, id, stageRef]
     );
     useUpdateEffect(() => {
       refs.current.centerAndFit(80, 650);
@@ -186,20 +192,20 @@ export const Diagram = /* @__PURE__ */ forwardRef(
         onPinch: ({ memo, first, last, origin: [ox, oy], movement: [ms], offset: [scale] }) => {
           if (first) {
             const stage = nonNullable(stageRef.current);
-            const { width: width2, height: height2, x: x2, y: y2 } = stage.container().getBoundingClientRect();
-            const tx = ox - (x2 + width2 / 2);
-            const ty = oy - (y2 + height2 / 2);
+            const { x: x2, y: y2 } = stage.getAbsolutePosition();
+            const tx = Math.round(ox - x2);
+            const ty = Math.round(oy - y2);
             memo = [stage.x(), stage.y(), tx, ty];
           }
-          const x = memo[0] - (ms - 1) * memo[2];
-          const y = memo[1] - (ms - 1) * memo[3];
+          const x = Math.round(memo[0] - (ms - 1) * memo[2]);
+          const y = Math.round(memo[1] - (ms - 1) * memo[3]);
           stageSpringApi.start({
             to: {
               x,
               y,
               scale
             },
-            immediate: immediate || !last
+            immediate: immediate || !last || !first
           });
           return memo;
         }
@@ -216,9 +222,12 @@ export const Diagram = /* @__PURE__ */ forwardRef(
           }
         },
         pinch: {
+          pointer: {
+            touch: true
+          },
           enabled: zoomable,
-          modifierKey: null,
           scaleBounds: { min: 0.2, max: 1.15 },
+          rubberband: 0.05,
           pinchOnWheel: true
         }
       }

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

@@ -127,7 +127,7 @@ export function Nodes({ animate, theme, diagram, onNodeClick }) {
     key
   ));
 }
-const NodeSnape = ({
+function NodeSnape({
   animate,
   node,
   ctrl,
@@ -135,7 +135,7 @@ const NodeSnape = ({
   isHovered,
   expired,
   onNodeClick
-}) => {
+}) {
   const setHoveredNode = useSetHoveredNode();
   const Shape = isCompound(node) ? CompoundShape : nodeShape(node);
   const springs = ctrl.springs;
@@ -173,4 +173,4 @@ const NodeSnape = ({
       children: /* @__PURE__ */ jsx(Shape, { node, theme, springs, isHovered })
     }
   ) });
-};
+}

package/dist/@likec4/diagrams/diagram/icons/ExternalLink.js

@@ -88,4 +88,3 @@ export const ExternalLink = ({
     )
   );
 };
-export {};

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

@@ -1,12 +1,12 @@
-export const mousePointer = (e) => {
+export function mousePointer(e) {
   const container = e.target.getStage()?.container();
   if (container) {
     container.style.cursor = "pointer";
   }
-};
-export const mouseDefault = (e) => {
+}
+export function mouseDefault(e) {
   const container = e.target.getStage()?.container();
   if (container) {
     container.style.cursor = "auto";
   }
-};
+}

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

@@ -2,16 +2,16 @@ import { useAtom, useAtomValue, useSetAtom } from "jotai";
 import { selectAtom } from "jotai/utils";
 import { hoveredEdgeAtom, hoveredEdgeIdAtom, hoveredNodeAtom, hoveredNodeIdAtom } from "./atoms.js";
 import { useCallback } from "react";
-export const useHoveredNode = () => {
+export function useHoveredNode() {
   return useAtom(hoveredNodeAtom);
-};
-export const useHoveredNodeId = () => {
+}
+export function useHoveredNodeId() {
   return useAtomValue(hoveredNodeIdAtom);
-};
-export const useSetHoveredNode = () => {
+}
+export function useSetHoveredNode() {
   return useSetAtom(hoveredNodeAtom);
-};
-export const useGetNodeState = (nodeId) => {
+}
+export function useGetNodeState(nodeId) {
   const isHovered = useAtomValue(
     selectAtom(
       hoveredNodeAtom,
@@ -19,10 +19,10 @@ export const useGetNodeState = (nodeId) => {
     )
   );
   return { isHovered };
-};
-export const useHoveredEdgeId = () => {
+}
+export function useHoveredEdgeId() {
   return useAtomValue(hoveredEdgeIdAtom);
-};
-export const useSetHoveredEdge = () => {
+}
+export function useSetHoveredEdge() {
   return useSetAtom(hoveredEdgeAtom);
-};
+}

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

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { Provider, createStore } from "jotai";
 import { useState } from "react";
-export const DiagramStateProvider = ({ children }) => {
+export function DiagramStateProvider({ children }) {
   const [store] = useState(() => createStore());
   return /* @__PURE__ */ jsx(Provider, { store, children });
-};
+}

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

@@ -1,4 +1,4 @@
 export * from "./useDarkMode.js";
-export * from "./useDiagramRef.js";
+export * from "./useDiagramApi.js";
 export * from "./useImageLoader.js";
 export * from "./useViewIdFromHash.js";

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

@@ -0,0 +1,27 @@
+import { useRef, useMemo } from "react";
+import { nonNullable } from "@likec4/core";
+export function useDiagramApi() {
+  const ref = useRef(null);
+  return useMemo(
+    () => [
+      ref,
+      {
+        get stage() {
+          return nonNullable(ref.current, "not mounted, use ref").stage;
+        },
+        get diagramView() {
+          return nonNullable(ref.current, "not mounted, use ref").diagramView;
+        },
+        get container() {
+          return nonNullable(ref.current, "not mounted, use ref").container;
+        },
+        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()
+      }
+    ],
+    [ref]
+  );
+}

package/dist/@likec4/diagrams/konva-html.js

@@ -2,12 +2,12 @@ import { jsx } from "react/jsx-runtime";
 import { useCallback, useLayoutEffect, useMemo, useRef, useState } from "react";
 import ReactDOM from "react-dom/client";
 import { Group } from "./konva.js";
-const needForceStyle = (el) => {
+function needForceStyle(el) {
   const pos = window.getComputedStyle(el).position;
   const ok = pos === "absolute" || pos === "relative";
   return !ok;
-};
-export const KonvaHtml = ({ children, groupProps, divProps, transform, transformFunc }) => {
+}
+export function KonvaHtml({ children, groupProps, divProps, transform, transformFunc }) {
   const groupRef = useRef(null);
   const [div] = useState(() => document.createElement("div"));
   const root = useMemo(() => ReactDOM.createRoot(div), [div]);
@@ -71,4 +71,4 @@ export const KonvaHtml = ({ children, groupProps, divProps, transform, transform
     };
   }, []);
   return /* @__PURE__ */ jsx(Group, { ref: groupRef, ...groupProps });
-};
+}

package/dist/@likec4/diagrams/konva-portal.js

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { useEffect, useLayoutEffect, useRef } from "react";
 import { Group } from "./konva.js";
-export const Portal = ({ selector, enabled, children }) => {
+export function Portal({ selector, enabled, children }) {
   const outer = useRef(null);
   const inner = useRef(null);
   const safeRef = useRef();
@@ -31,4 +31,4 @@ export const Portal = ({ selector, enabled, children }) => {
     };
   }, []);
   return /* @__PURE__ */ jsx(Group, { ref: outer, children: /* @__PURE__ */ jsx(Group, { ref: inner, children }) });
-};
+}

package/dist/__app__/src/App.jsx

@@ -0,0 +1,26 @@
+import { Provider } from 'jotai';
+// import { useAtomsDevtools } from 'jotai-devtools'
+import { Fragment } from 'react';
+import { Sidebar } from './components';
+import { ExportPage, IndexPage, ViewPage } from './pages';
+import { useRoute } from './router';
+const Routes = () => {
+    const r = useRoute();
+    return (<>
+      {r.route === 'index' && <IndexPage key='index'/>}
+      {r.route === 'view' && <ViewPage key='view' viewId={r.params.viewId} showUI={r.showUI}/>}
+      {r.route === 'export' && (<ExportPage key='export' viewId={r.params.viewId} padding={r.params.padding}/>)}
+      {r.showUI && (<Fragment key='ui'>
+          <Sidebar />
+        </Fragment>)}
+    </>);
+};
+// const AtomsDevTools = import.meta.env.DEV ? ({ children }: PropsWithChildren) => {
+//   useAtomsDevtools('demo')
+//   return <>{children}</>
+// } : Fragment
+export default function App() {
+    return (<Provider>
+      <Routes />
+    </Provider>);
+}

package/dist/__app__/src/components/{DiagramNotFound.tsx → DiagramNotFound.jsx}

@@ -1,15 +1,13 @@
-import { ExclamationTriangleIcon } from '@radix-ui/react-icons'
-import { Box, Button, Card, Flex, Heading, IconButton, Text } from '@radix-ui/themes'
-import { $pages } from '../router'
-
+import { ExclamationTriangleIcon } from '@radix-ui/react-icons';
+import { Box, Button, Card, Flex, Heading, IconButton, Text } from '@radix-ui/themes';
+import { $pages } from '../router';
 export const DiagramNotFound = () => {
-  return (
-    <Flex position='fixed' inset='0' align='center' justify='center'>
+    return (<Flex position='fixed' inset='0' align='center' justify='center'>
       <Card color='red' size='3'>
         <Flex gap='4' direction='row' align='start'>
           <Box grow='0' shrink='0' pt='1'>
             <IconButton variant='ghost' color='amber'>
-              <ExclamationTriangleIcon width={50} height={50} />
+              <ExclamationTriangleIcon width={50} height={50}/>
             </IconButton>
           </Box>
           <Flex gap='3' direction='column'>
@@ -25,6 +23,5 @@ export const DiagramNotFound = () => {
           </Flex>
         </Flex>
       </Card>
-    </Flex>
-  )
-}
+    </Flex>);
+};

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

@@ -0,0 +1,12 @@
+import { MoonIcon } from '@radix-ui/react-icons';
+import { IconButton, ThemePanel } from '@radix-ui/themes';
+import { useToggle } from '@react-hookz/web/esm';
+export const ThemePanelToggle = () => {
+    const [isOpened, toggle] = useToggle(false, true);
+    return (<>
+      <IconButton color='gray' variant={isOpened ? 'solid' : 'soft'} onClick={toggle} size={'2'}>
+        <MoonIcon width={16} height={16}/>
+      </IconButton>
+      {isOpened && <ThemePanel style={{ top: 50 }}/>}
+    </>);
+};

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

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

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

@@ -0,0 +1,38 @@
+import { DashboardIcon, TriangleRightIcon } from '@radix-ui/react-icons';
+import { Box, Flex, Text } from '@radix-ui/themes';
+import TreeView from 'react-accessible-treeview';
+import { useDiagramsTree } from '../../data';
+import { $pages, useRoute } from '../../router';
+import { cn } from '../../utils';
+import styles from './DiagramsTree.module.css';
+function inTree(id, data) {
+    return data.some(d => d.id === id);
+}
+export function DiagramsTree() {
+    const data = useDiagramsTree();
+    const r = useRoute();
+    const viewId = r.route === 'view' || r.route === 'export' ? r.params.viewId : null;
+    const selectedId = viewId && inTree(viewId, data) ? [viewId] : [];
+    return (<Box className={styles.treeview}>
+      <TreeView data={data} propagateSelect propagateSelectUpwards selectedIds={selectedId} onNodeSelect={({ element, isBranch }) => {
+            if (isBranch) {
+                return;
+            }
+            $pages.view.open('' + element.id);
+        }} nodeRenderer={({ element, isBranch, isExpanded, getNodeProps, handleExpand, handleSelect }) => {
+            return (<Flex {...getNodeProps({ onClick: isBranch ? handleExpand : handleSelect })} align={'center'} gap={isBranch ? '1' : '2'}>
+              {isBranch && (<Box style={{ lineHeight: '15px' }}>
+                  <TriangleRightIcon width={15} height={15} className={cn('transition duration-200 ease-out', isExpanded && 'rotate-90')}/>
+                </Box>)}
+              {!isBranch && (<Box style={{ lineHeight: '14px' }} width={'min-content'}>
+                  <DashboardIcon width={14} height={14}/>
+                </Box>)}
+              <Box asChild grow={'1'}>
+                <Text as='div' size={'2'} weight={isBranch ? 'bold' : undefined} className='truncate'>
+                  {(isBranch ? '🗂️ ' : '') + element.name}
+                </Text>
+              </Box>
+            </Flex>);
+        }}/>
+    </Box>);
+}

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

@@ -0,0 +1,35 @@
+import { Box, Button, Flex, IconButton, ScrollArea, Separator } from '@radix-ui/themes';
+import { useClickOutside, useToggle } from '@react-hookz/web/esm';
+import { HamburgerMenuIcon, ArrowLeftIcon } from '@radix-ui/react-icons';
+import { useRef } from 'react';
+import { cn } from '~/utils';
+import { DiagramsTree } from './DiagramsTree';
+import styles from './styles.module.css';
+import { $pages } from '../../router';
+export const Sidebar = () => {
+    const ref = useRef(null);
+    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}>
+        <IconButton size='2' color='gray' variant='soft'>
+          <HamburgerMenuIcon width={22} height={22}/>
+        </IconButton>
+      </Flex>
+      <Flex ref={ref} className={styles.navsidebar} position='fixed' left='0' top='0' bottom='0' data-opened={isOpened}>
+        <ScrollArea scrollbars='vertical' type='scroll'>
+          <Box p='4' pl='2'>
+            <Button variant='ghost' ml='2' mt='1' size='1' color='gray' onClick={_ => {
+            toggle();
+            $pages.index.open();
+        }}>
+              <ArrowLeftIcon />
+              Back to dashboard
+            </Button>
+            <Separator orientation='horizontal' my='3' size={'4'}/>
+            <DiagramsTree />
+          </Box>
+        </ScrollArea>
+      </Flex>
+    </>);
+};

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

@@ -52,34 +52,3 @@
     transform: translateX(0);
   }
 }
-
-:global(.rt-variant-soft),
-:global(.rt-variant-solid) {
-  &.navitem {
-    @apply transition-colors;
-    /* color: var(--accent-10); */
-    /* background-color: transparent; */
-    justify-content: space-between;
-    align-items: center;
-    cursor: pointer;
-
-    /*
-  &:hover, &[data-current="true"] {
-    color: var(--accent-11);
-    background-color: var(--accent-a3);
-  } */
-
-    .icon {
-      visibility: hidden;
-      transform: translateX(-25%);
-      opacity: 0.7;
-    }
-
-    &:hover .icon {
-      visibility: visible;
-      transition: all 0.15s ease-out;
-      transform: translateX(0);
-      opacity: 1;
-    }
-  }
-}

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

@@ -1,57 +1,32 @@
-import type { DiagramView } from '@likec4/diagrams'
-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 { useState } from 'react'
-
-const embedCode = (diagram: DiagramView, theme: string) => {
-  const padding = 20
-  const params = new URLSearchParams()
-  params.set('embed', diagram.id)
-  params.set('padding', `${padding}`)
-  if (theme !== 'system') {
-    params.set('theme', theme)
-  }
-
-  const width = diagram.width + padding * 2
-  const height = diagram.height + padding * 2
-
-  const url = new URL(window.location.href)
-  url.search = params.toString()
-  const iframe = `<iframe src="${url.href}" width="100%" height="100%" style="border:0;background:transparent;"></iframe>`
-
-  const code = `
+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 { useState } from 'react';
+const embedCode = (diagram, theme) => {
+    const padding = 20;
+    const params = new URLSearchParams();
+    params.set('embed', diagram.id);
+    params.set('padding', `${padding}`);
+    if (theme !== 'system') {
+        params.set('theme', theme);
+    }
+    const width = diagram.width + padding * 2;
+    const height = diagram.height + padding * 2;
+    const url = new URL(window.location.href);
+    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()
-
-  return {
-    code,
-    href: url.href
-  }
-}
-
-export const ShareDialog = ({ diagram }: { diagram: DiagramView }) => {
-  const [theme, setTheme] = useState('system')
-
-  const { code, href } = embedCode(diagram, theme)
-
-  return (
-    <Dialog.Content size={'2'} style={{ maxWidth: 700, minWidth: 300 }}>
+</div>`.trim();
+    return {
+        code,
+        href: url.href
+    };
+};
+export const ShareDialog = ({ diagram }) => {
+    const [theme, setTheme] = useState('system');
+    const { code, href } = embedCode(diagram, theme);
+    return (<Dialog.Content size={'2'} style={{ maxWidth: 700, minWidth: 300 }}>
       <Tabs.Root defaultValue='embed'>
         <Tabs.List>
           <Tabs.Trigger value='embed'>Embed</Tabs.Trigger>
@@ -62,8 +37,7 @@ export const ShareDialog = ({ diagram }: { diagram: DiagramView }) => {
         <Box px='1' py='4'>
           <Tabs.Content value='embed'>
             <Flex direction='column' gap='4'>
-              {code.includes('http://localhost') && (
-                <Callout.Root size='1' color='amber'>
+              {code.includes('http://localhost') && (<Callout.Root size='1' color='amber'>
                   <Callout.Icon>
                     <ExclamationTriangleIcon />
                   </Callout.Icon>
@@ -71,8 +45,7 @@ export const ShareDialog = ({ diagram }: { diagram: DiagramView }) => {
                     This is a local URL. You need to build and deploy your diagrams to a public URL
                     to make it available for embedding.
                   </Callout.Text>
-                </Callout.Root>
-              )}
+                </Callout.Root>)}
               <label>
                 <Flex direction='row' justify='between'>
                   <Text as='div' size='2' weight='medium'>
@@ -82,18 +55,12 @@ export const ShareDialog = ({ diagram }: { diagram: DiagramView }) => {
                     <Link size='2' href={href} target='_blank'>
                       <Text as='span'>Open in new tab</Text>
                       <Text as='span'>
-                        <OpenInNewWindowIcon width={12} height={12} />
+                        <OpenInNewWindowIcon width={12} height={12}/>
                       </Text>
                     </Link>
                   </Flex>
                 </Flex>
-                <Box
-                  asChild
-                  display={'block'}
-                  my='2'
-                  p='2'
-                  className='whitespace-pre-wrap overflow-scroll select-all'
-                >
+                <Box asChild display={'block'} my='2' p='2' className='whitespace-pre-wrap overflow-scroll select-all'>
                   <Code variant='soft' autoFocus>
                     {code}
                   </Code>
@@ -107,7 +74,7 @@ export const ShareDialog = ({ diagram }: { diagram: DiagramView }) => {
                   Theme
                 </Text>
                 <Select.Root size='2' defaultValue={theme} onValueChange={v => setTheme(v)}>
-                  <Select.Trigger variant='soft' />
+                  <Select.Trigger variant='soft'/>
                   <Select.Content>
                     <Select.Item value='system'>Same as system</Select.Item>
                     <Select.Item value='light'>Light</Select.Item>
@@ -143,6 +110,5 @@ export const ShareDialog = ({ diagram }: { diagram: DiagramView }) => {
           </Button>
         </Dialog.Close>
       </Flex>
-    </Dialog.Content>
-  )
-}
+    </Dialog.Content>);
+};

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

@@ -0,0 +1,60 @@
+import { CaretDownIcon, Share1Icon as ShareIcon } from '@radix-ui/react-icons';
+import { Button, Dialog, DropdownMenu, Flex, Text } from '@radix-ui/themes';
+import { ThemePanelToggle } from '../ThemePanelToggle';
+import { ShareDialog } from './ShareDialog';
+const ExportMenu = ({ diagramApi, children }) => (<DropdownMenu.Root>
+    <DropdownMenu.Trigger>{children}</DropdownMenu.Trigger>
+    <DropdownMenu.Content>
+      <DropdownMenu.Label>
+        <Text weight='medium'>Current view</Text>
+      </DropdownMenu.Label>
+      <DropdownMenu.Group>
+        <DropdownMenu.Item onClick={_ => {
+        // const { boundingBox } = diagramApi.diagramView()
+        console.log('Serialized: ', diagramApi.stage.toObject());
+        // diagramApi.stage().toBlob({
+        //   ...boundingBox,
+        //   callback(blob) {
+        //     const url = URL.createObjectURL(blob)
+        //     window.open(url)
+        //     // const a = document.createElement('a')
+        //     // a.href = url
+        //     // a.download = 'diagram.png'
+        //     // a.click()
+        //     URL.revokeObjectURL(url)
+        //   },
+        // })
+    }}>
+          Export as PNG
+        </DropdownMenu.Item>
+        <DropdownMenu.Item>Export as SVG</DropdownMenu.Item>
+      </DropdownMenu.Group>
+      <DropdownMenu.Separator />
+      <DropdownMenu.Label>
+        <Text weight='medium'>All views</Text>
+      </DropdownMenu.Label>
+      <DropdownMenu.Group>
+        <DropdownMenu.Item>Download as ZIP</DropdownMenu.Item>
+      </DropdownMenu.Group>
+    </DropdownMenu.Content>
+  </DropdownMenu.Root>);
+export const ViewActionsToolbar = ({ diagramApi, diagram }) => {
+    return (<Flex position='fixed' top='0' right='0' p='2' gap={'3'} justify='end'>
+      <Dialog.Root>
+        <Dialog.Trigger>
+          <Button variant='solid'>
+            <ShareIcon />
+            <Text>Share</Text>
+          </Button>
+        </Dialog.Trigger>
+        <ShareDialog diagram={diagram}/>
+      </Dialog.Root>
+      <ExportMenu diagramApi={diagramApi}>
+        <Button variant='soft' color='gray'>
+          <Text>Export</Text>
+          <CaretDownIcon />
+        </Button>
+      </ExportMenu>
+      <ThemePanelToggle />
+    </Flex>);
+};