likec4 0.48.0 → 0.50.0

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

package/dist/__app__/src/pages/index-page/index.module.css

@@ -0,0 +1,20 @@
+.header {
+  background: var(--color-surface);
+}
+
+.dimmed {
+  color: var(--color-text-dimmed);
+}
+
+.previewBg {
+  overflow: hidden;
+  touch-action: none;
+  user-select: none;
+  pointer-events: none;
+  padding: 0;
+  margin: 0;
+  background-origin: padding-box;
+  background-image: radial-gradient(var(--gray-a5) 15%, var(--color-panel-translucent) 15%);
+  background-position: 0 0;
+  background-size: 12px 12px;
+}

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

@@ -1,4 +1,4 @@
-export * from './index.page';
+export * from './index-page';
 export * from './export.page';
 export * from './embed.page';
 export * from './view.page';

package/dist/__app__/src/pages/useTransparentBackground.js

@@ -1,8 +1,8 @@
-import { useEffect } from 'react';
+import { useIsomorphicLayoutEffect } from '@react-hookz/web/esm';
 // To get the transparent background
 // We need to add a class to the HTML element
 export function useTransparentBackground(enabled = true) {
-    useEffect(() => {
+    useIsomorphicLayoutEffect(() => {
         const htmlEl = document.body.parentElement;
         if (!htmlEl || enabled !== true)
             return;

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

@@ -0,0 +1,60 @@
+import { Diagram, useDiagramApi } from '@likec4/diagrams';
+import { Box } from '@radix-ui/themes';
+import { useWindowSize } from '@react-hookz/web/esm';
+import { useCallback, useEffect, useRef } from 'react';
+import { $pages } from '../../router';
+import { cn } from '../../utils';
+import styles from './view-page.module.css';
+const Paddings = [70, 20, 20, 40];
+function round(n, d = 1) {
+    const m = Math.pow(10, d);
+    return Math.round(n * m) / m;
+}
+export function ViewAsReact({ diagram }) {
+    const { width, height } = useWindowSize();
+    const pageDivRef = useRef(null);
+    const [ref, api] = useDiagramApi();
+    const handleTransform = useCallback(() => {
+        const stage = api.stage;
+        const style = pageDivRef.current?.style;
+        if (!stage || !style) {
+            return;
+        }
+        const pos = stage.getAbsolutePosition();
+        let scale = stage.scaleX();
+        while (scale < 0.5) {
+            scale = scale / 0.5;
+        }
+        const size = round(24 * scale);
+        const x = round(pos.x);
+        const y = round(pos.y);
+        style.setProperty('--diagram-bg-size', `${size}px`);
+        style.setProperty('--diagram-bg-position-x', `${x}px`);
+        style.setProperty('--diagram-bg-position-y', `${y}px`);
+    }, [api, pageDivRef]);
+    useEffect(() => {
+        const stage = api.stage;
+        if (!stage) {
+            return;
+        }
+        stage.on('absoluteTransformChange', handleTransform);
+        handleTransform();
+        return () => {
+            stage.off('absoluteTransformChange', handleTransform);
+        };
+    }, [api]);
+    return (<Box position={'fixed'} inset='0' className={cn(styles.reactDiagram
+        // isActive && styles.active
+        )} ref={pageDivRef}>
+      <Diagram ref={ref} diagram={diagram} padding={Paddings} maxZoom={1.05} width={width} height={height} onNodeClick={node => {
+            if (node.navigateTo) {
+                $pages.view.open(node.navigateTo);
+            }
+            else {
+                api.centerOnNode(node, {
+                    keepZoom: true
+                });
+            }
+        }} onStageClick={_ => ({})} onEdgeClick={_ => ({})}/>
+    </Box>);
+}

package/dist/__app__/src/pages/view-page/index.js

@@ -0,0 +1,11 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { lazy } from 'react';
+export * from './ViewAsReact';
+export const ViewAs = lazy(() => import('./other-formats'));
+// export const ViewAs = {
+//   Dot: ViewAsDot,
+//   D2: ViewAsD2,
+//   Mmd: ViewAsMmd,
+// } satisfies Record<Capitalize<Exclude<ViewMode, 'react'>>, React.FunctionComponent<any>>
+// export const ViewAsReact = lazy(() => import('./ViewAsReact'))
+// export const ViewAsReact = lazy(() => import('./ViewAsReact'))

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

@@ -0,0 +1,18 @@
+import { Box, Code, ScrollArea } from '@radix-ui/themes';
+import { d2Source } from 'virtual:likec4/d2-sources';
+import { CopyToClipboard } from '../../../components';
+export default function ViewAsD2({ viewId }) {
+    const src = d2Source(viewId);
+    return (<>
+      <ScrollArea scrollbars='both'>
+        <Box asChild display={'block'} p='2' style={{
+            whiteSpace: 'pre'
+        }}>
+          <Code variant='soft' autoFocus>
+            {src}
+          </Code>
+        </Box>
+      </ScrollArea>
+      <CopyToClipboard text={src}/>
+    </>);
+}

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

@@ -0,0 +1,33 @@
+import { Box, Code, Grid, ScrollArea } from '@radix-ui/themes';
+import { dotSource, svgSource } from 'virtual:likec4/dot-sources';
+import styles from '../view-page.module.css';
+import { CopyToClipboard } from '../../../components';
+export default function ViewAsDot({ viewId }) {
+    const dot = dotSource(viewId);
+    return (<Grid 
+    //@ts-expect-error TODO: fails on columns prop due to `exactOptionalPropertyTypes: true` in tsconfig
+    columns='2' gap='2' shrink='1' grow='1'>
+      <Box py={'2'} position={'relative'} style={{
+            overflow: 'scroll'
+        }}>
+        <ScrollArea scrollbars='both'>
+          <Box asChild display={'block'} p='2' style={{
+            whiteSpace: 'pre'
+        }}>
+            <Code variant='soft' autoFocus>
+              {dot}
+            </Code>
+          </Box>
+        </ScrollArea>
+        <CopyToClipboard text={dot}/>
+      </Box>
+      <Box py={'2'} style={{
+            overflow: 'scroll',
+            overscrollBehavior: 'none'
+        }}>
+        <Box asChild position={'relative'} className={styles.dotSvg}>
+          <div dangerouslySetInnerHTML={{ __html: svgSource(viewId) }}></div>
+        </Box>
+      </Box>
+    </Grid>);
+}

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

@@ -0,0 +1,18 @@
+import { Box, Code, ScrollArea } from '@radix-ui/themes';
+import { mmdSource } from 'virtual:likec4/mmd-sources';
+import { CopyToClipboard } from '../../../components';
+export default function ViewAsMmd({ viewId }) {
+    const src = mmdSource(viewId);
+    return (<>
+      <ScrollArea scrollbars='both'>
+        <Box asChild display={'block'} p='2' style={{
+            whiteSpace: 'pre'
+        }}>
+          <Code variant='soft' autoFocus>
+            {src}
+          </Code>
+        </Box>
+      </ScrollArea>
+      <CopyToClipboard text={src}/>
+    </>);
+}

package/dist/__app__/src/pages/view-page/other-formats.jsx

@@ -0,0 +1,43 @@
+import { Box, Flex, Tabs } from '@radix-ui/themes';
+import { updateSearchParams } from '../../router';
+import ViewAsD2 from './other-formats/ViewAsD2';
+import ViewAsDot from './other-formats/ViewAsDot';
+import ViewAsMmd from './other-formats/ViewAsMmd';
+import styles from './view-page.module.css';
+export default function ViewDiagramInOtherFormats({ viewId, viewMode }) {
+    return (<Flex asChild position={'fixed'} inset={'0'} pt={'8'} pl={'8'} pr={'2'} align={'stretch'} direction={'column'}>
+      <Tabs.Root value={viewMode} onValueChange={mode => mode !== viewMode && updateSearchParams({ mode: mode })}>
+        <Box asChild shrink={'0'} grow={'0'}>
+          <Tabs.List>
+            <Tabs.Trigger value='dot'>Graphviz</Tabs.Trigger>
+            <Tabs.Trigger value='mmd'>Mermaid</Tabs.Trigger>
+            <Tabs.Trigger value='d2'>D2</Tabs.Trigger>
+          </Tabs.List>
+        </Box>
+
+        <Box p='2' className={styles.otherFormats} position={'relative'}>
+          <Tabs.Content value='dot'>
+            <ViewAsDot viewId={viewId}/>
+          </Tabs.Content>
+
+          <Tabs.Content value='mmd'>
+            <ViewAsMmd viewId={viewId}/>
+          </Tabs.Content>
+
+          <Tabs.Content value='d2'>
+            <ViewAsD2 viewId={viewId}/>
+          </Tabs.Content>
+        </Box>
+      </Tabs.Root>
+    </Flex>);
+    // switch (viewMode) {
+    //   case 'dot':
+    //     return <ViewAsDot viewId={viewId} />
+    //   case 'd2':
+    //     return <ViewAsD2 viewId={viewId} />
+    //   case 'mmd':
+    //     return <ViewAsMmd viewId={viewId} />
+    //   default:
+    //     nonexhaustive(viewMode)
+    // }
+}

package/dist/__app__/src/pages/view-page/view-page.module.css

@@ -0,0 +1,81 @@
+.reactDiagram {
+  --diagram-bg-size: 24px;
+  --diagram-bg-position-x: 0;
+  --diagram-bg-position-y: 0;
+
+  :global(.konvajs-content) {
+
+    &::before {
+      content: '';
+      position: absolute;
+      padding: 0;
+      margin: 0;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      pointer-events: none;
+      touch-action: none;
+      user-select: none;
+      background-origin: border-box;
+      background-attachment: fixed;
+      background-image: radial-gradient(var(--gray-a3) 12%, transparent 12%);
+      background-position: var(--diagram-bg-position-x) var(--diagram-bg-position-y);
+      background-size: var(--diagram-bg-size) var(--diagram-bg-size);
+      z-index: -1;
+    }
+  }
+/*
+  :where(:not(.dimmed)) :global(.konvajs-content) {
+    transition:
+      filter 200ms ease-out,
+      transform 500ms cubic-bezier(0.46, 0.08, 0.27, 0.95);
+    filter: none;
+    transform: none;
+  }
+
+  :where(.dimmed) :global(.konvajs-content) {
+
+    // &::before {
+    //  filter: blur(3px);
+   //   transition-delay: 100ms;
+    //  transition-timing-function: ease-in;
+    // }
+
+      filter: blur(3px);
+      transform: scale(0.95);
+      transition-delay: 100ms, 0ms;
+      transition-duration: 200ms, 900ms;
+      transition-timing-function: ease-in, cubic-bezier(0.46, 0.08, 0.27, 0.95);
+  } */
+}
+
+/* .diagramPreview {
+  :global(.konvajs-content) {
+    background: var(--color-overlay);
+  }
+} */
+
+.dotSvg {
+  & > svg {
+    width: 100%;
+    height: auto;
+  }
+}
+
+.otherFormats {
+  display: flex;
+  align-items: stretch;
+  flex: 1 1 auto;
+  overflow: scroll;
+
+  & > :global(.rt-TabsContent) {
+    display: flex;
+    align-items: stretch;
+    flex: 1 1 auto;
+    overflow: scroll;
+    &[hidden] {
+      display: none;
+    }
+  }
+}

package/dist/__app__/src/pages/view.page.jsx

@@ -1,71 +1,18 @@
-import { Diagram, useDiagramApi } from '@likec4/diagrams';
-import { Box, Flex, Heading, Text } from '@radix-ui/themes';
-import { useWindowSize } from '@react-hookz/web/esm';
-import { $pages } from '../router';
-import { DiagramNotFound, ViewActionsToolbar } from '../components';
+import { Suspense } from 'react';
+import { DiagramNotFound } from '../components';
+import { Header } from '../components/view-page/Header';
 import { useLikeC4View } from '../data';
-import { Fragment, useCallback, useEffect, useRef } from 'react';
-import styles from './view-page.module.css';
-const Paddings = [70, 20, 20, 40];
-function round(n, d = 1) {
-    const m = Math.pow(10, d);
-    return Math.round(n * m) / m;
-}
-export function ViewPage({ viewId, showUI = true }) {
-    const { width, height } = useWindowSize();
+import { ViewAs, ViewAsReact } from './view-page';
+export function ViewPage({ viewId, viewMode, showUI = true }) {
     const diagram = useLikeC4View(viewId);
-    const pageDivRef = useRef(null);
-    const [ref, api] = useDiagramApi();
-    const handleTransform = useCallback(() => {
-        const stage = api.stage;
-        const style = pageDivRef.current?.style;
-        if (!stage || !style) {
-            return;
-        }
-        const pos = stage.getAbsolutePosition();
-        let scale = stage.scaleX();
-        while (scale < 0.5) {
-            scale = scale / 0.5;
-        }
-        const size = round(24 * scale);
-        const x = round(pos.x);
-        const y = round(pos.y);
-        style.setProperty('--diagram-bg-size', `${size}px`);
-        style.setProperty('--diagram-bg-position-x', `${x}px`);
-        style.setProperty('--diagram-bg-position-y', `${y}px`);
-    }, [api, pageDivRef]);
-    useEffect(() => {
-        const stage = api.stage;
-        if (!stage) {
-            return;
-        }
-        stage.on('absoluteTransformChange', handleTransform);
-        handleTransform();
-        return () => {
-            stage.off('absoluteTransformChange', handleTransform);
-        };
-    }, [api]);
     if (!diagram) {
         return <DiagramNotFound viewId={viewId}/>;
     }
-    return (<Box position={'fixed'} inset='0' className={styles.diagramBg} ref={pageDivRef}>
-      <Diagram ref={ref} diagram={diagram} padding={showUI ? Paddings : undefined} width={width} height={height} onNodeClick={node => {
-            if (node.navigateTo) {
-                $pages.view.open(node.navigateTo);
-            }
-        }} onEdgeClick={_ => ({})}/>
-      {showUI && (<Fragment key='ui'>
-          <Flex position={'fixed'} top='0' p='3' style={{
-                left: 54
-            }} direction={'column'}>
-            <Text size={'1'} trim={'start'} color='gray' as='div' className='whitespace-nowrap select-none'>
-              id: <span className='select-all'>{diagram.id}</span>
-            </Text>
-            <Heading size={'5'} className='select-all'>
-              {diagram.title || 'Untitled'}
-            </Heading>
-          </Flex>
-          <ViewActionsToolbar diagram={diagram}/>
-        </Fragment>)}
-    </Box>);
+    return (<>
+      {viewMode === 'react' && <ViewAsReact diagram={diagram}/>}
+      {viewMode !== 'react' && (<Suspense>
+          <ViewAs viewMode={viewMode} viewId={viewId}/>
+        </Suspense>)}
+      <Header diagram={diagram}/>
+    </>);
 }