likec4 0.49.0 → 0.50.0

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>);
+};

package/dist/__app__/src/data/atoms.js

@@ -1,7 +1,7 @@
 import { atom } from 'jotai';
-import { atomFamily, atomWithReducer, splitAtom } from 'jotai/utils';
-import { equals, groupBy, mapObject, values } from 'rambdax';
-import { LikeC4Views } from '~likec4';
+import { atomFamily, atomWithReducer } from 'jotai/utils';
+import { equals, mapObject, values } from 'rambdax';
+import { LikeC4Views } from 'virtual:likec4/views';
 import { buildDiagramTreeAtom } from './sidebar-diagram-tree';
 function atomWithCompare(initialValue) {
     return atomWithReducer(initialValue, (prev, next) => {
@@ -27,24 +27,6 @@ export const viewsAtom = atom(get => get(_viewsAtom), (_, set, update) => {
     }, update));
 });
 viewsAtom.debugLabel = 'views';
-const indexPageTilesAtom = atom(get => {
-    const views = values(get(viewsAtom));
-    const byPath = groupBy(v => get(v).relativePath ?? '', views);
-    return Object.entries(byPath)
-        .map(([path, views]) => ({
-        path,
-        isRoot: path === '',
-        views
-    }))
-        .sort((a, b) => {
-        return a.path.localeCompare(b.path);
-    });
-});
-const byPath = (tile) => tile.path;
-export const indexPageTilesAtomsAtom = splitAtom(indexPageTilesAtom, byPath);
-// export type DashboardTile = ExtractAtomValue<typeof dashboardTilesAtom>[number]
-// const key = (tile: DashboardTile) => tile.path
-// export const diagramsTreeAtom = atom(buildDiagramTreeAtom(LikeC4Views))
 export const diagramsTreeAtom = atom(get => {
     const views = values(get(viewsAtom));
     return buildDiagramTreeAtom(views.map(v => get(v)));
@@ -63,7 +45,7 @@ if (import.meta.hot) {
             $updateViews = undefined;
         };
     };
-    import.meta.hot.accept('/@vite-plugin-likec4/likec4-generated', md => {
+    import.meta.hot.accept('/@vite-plugin-likec4/likec4-views', md => {
         const update = md?.LikeC4Views;
         if (update) {
             $updateViews?.(update);

package/dist/__app__/src/data/hooks.js

@@ -1,11 +1,12 @@
 import { useAtomValue } from 'jotai';
 import { useMemo } from 'react';
-import { diagramsTreeAtom, indexPageTilesAtomsAtom, selectLikeC4ViewAtom } from './atoms';
+import { diagramsTreeAtom, selectLikeC4ViewAtom } from './atoms';
+import { viewsGroupAtomsAtom } from './index-page';
 export const useLikeC4View = (viewId) => {
     const anAtom = useMemo(() => selectLikeC4ViewAtom(viewId), [viewId]);
     return useAtomValue(anAtom);
 };
-export const useIndexPageTileAtoms = () => {
-    return useAtomValue(indexPageTilesAtomsAtom);
-};
 export const useDiagramsTree = () => useAtomValue(diagramsTreeAtom);
+export const useViewGroupsAtoms = () => {
+    return useAtomValue(viewsGroupAtomsAtom);
+};

package/dist/__app__/src/data/index-page.js

@@ -0,0 +1,22 @@
+import { atom } from 'jotai';
+import { viewsAtom } from './atoms';
+import { groupBy, values } from 'remeda';
+import { splitAtom } from 'jotai/utils';
+/**
+ * Views grouped by folder
+ */
+const viewGroupsAtom = atom(get => {
+    const views = values(get(viewsAtom));
+    const byPath = groupBy(views, v => get(v).relativePath ?? '');
+    return Object.entries(byPath)
+        .map(([path, views]) => ({
+        path,
+        isRoot: path === '',
+        views
+    }))
+        .sort((a, b) => {
+        return a.path.localeCompare(b.path);
+    });
+});
+const byPath = (tile) => tile.path;
+export const viewsGroupAtomsAtom = splitAtom(viewGroupsAtom, byPath);

package/dist/__app__/src/likec4-views.js

@@ -1,7 +1,7 @@
 /**
  * Script for embedding LikeC4Views in a web page.
  */
-import { LikeC4Views } from '~likec4-dimensions';
+import { LikeC4Views } from 'virtual:likec4/dimensions';
 let BASE = import.meta.env.BASE_URL;
 if (!BASE.endsWith('/')) {
     BASE = BASE + '/';

package/dist/__app__/src/pages/index-page/index.jsx

@@ -0,0 +1,99 @@
+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 { useAtomValue } from 'jotai';
+import { memo, useState } from 'react';
+import { isEmpty } from 'remeda';
+import { useViewGroupsAtoms } from '../../data';
+import { $pages } from '../../router';
+import { cn } from '../../utils';
+import styles from './index.module.css';
+import { ExclamationTriangleIcon } from '@radix-ui/react-icons';
+const DiagramPreview = memo((props) => {
+    const [diagram, setDiagram] = useState(null);
+    // defer rendering to update to avoid flickering
+    useDebouncedEffect(() => {
+        setDiagram(props.diagram);
+    }, [props.diagram], 50);
+    return (<Box className={styles.previewBg} style={{ width: 350, height: 175 }}>
+      {diagram && (<Diagram animate={false} pannable={false} zoomable={false} minZoom={0.1} maxZoom={1} diagram={diagram} padding={[4, 6, 4, 6]} width={350} height={175}/>)}
+    </Box>);
+});
+const ViewCard = ({ atom }) => {
+    // const diagram =
+    const diagram = useAtomValue(atom);
+    const { id, title, description } = diagram;
+    return (<Box asChild shrink='0' grow='1'>
+      <Card asChild style={{ width: 350, maxWidth: 350 }} variant='surface' size='1'>
+        <a href={$pages.view.url(id)}>
+          <Inset clip='padding-box' side='top' pb='current'>
+            <DiagramPreview diagram={diagram}/>
+          </Inset>
+          <Text as='div' size='2' weight='bold' trim='start'>
+            {title || id}
+          </Text>
+          <Text as='div' color='gray' size='2' my='1' className={cn(isEmpty(description?.trim()) && styles.dimmed)} style={{
+            whiteSpace: 'pre-line'
+        }}>
+            {description?.trim() || 'no description'}
+          </Text>
+        </a>
+      </Card>
+    </Box>);
+};
+function ViewsGroup({ atom }) {
+    const { path, views, isRoot } = useAtomValue(atom);
+    return (<Flex asChild gap={'4'} direction={'column'}>
+      <Section size='2'>
+        <Flex gap='2'>
+          <Heading color={isRoot ? undefined : 'gray'} className={cn(isRoot || styles.dimmed)} trim='end'>
+            views
+          </Heading>
+          {!isRoot && (<>
+              <Heading color='gray' className={styles.dimmed} trim={'end'}>
+                /
+              </Heading>
+              <Heading trim={'end'}>{path}</Heading>
+            </>)}
+        </Flex>
+        <Separator orientation='horizontal' my='2' size={'4'}/>
+        <Flex gap={{
+            initial: '4',
+            md: '6'
+        }} wrap={{
+            initial: 'nowrap',
+            md: 'wrap'
+        }} direction={{
+            initial: 'column',
+            md: 'row'
+        }} align='stretch'>
+          {views.map(v => (<ViewCard key={v.toString()} atom={v}/>))}
+        </Flex>
+      </Section>
+    </Flex>);
+}
+export function IndexPage() {
+    const viewGroupsAtoms = useViewGroupsAtoms();
+    return (<Container size={'4'} px={{
+            initial: '3',
+            lg: '1'
+        }}>
+      {viewGroupsAtoms.map(g => (<ViewsGroup key={g.toString()} atom={g}/>))}
+      {viewGroupsAtoms.length === 0 && (<Flex position='fixed' inset='0' align='center' justify='center'>
+          <Card color='red' size='4'>
+            <Flex gap='4' direction='row' align='center'>
+              <Box grow='0' shrink='0' pt='1'>
+                <IconButton variant='ghost' color='red'>
+                  <ExclamationTriangleIcon width={20} height={20}/>
+                </IconButton>
+              </Box>
+              <Flex gap='3' direction='column'>
+                <Heading trim='both' color='red' size='4'>
+                  No diagrams found
+                </Heading>
+              </Flex>
+            </Flex>
+          </Card>
+        </Flex>)}
+    </Container>);
+}