likec4 0.49.0 → 0.51.0

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

package/dist/__app__/src/router.js

@@ -1,14 +1,20 @@
 import { useStore } from '@nanostores/react';
-import { createSearchParams, createRouter, openPage, getPagePath } from '@nanostores/router';
+import { createRouter, createSearchParams, getPagePath } from '@nanostores/router';
 import { computed } from 'nanostores';
+import { equals, isEmpty, isString, mapValues, omitBy } from 'remeda';
 import { BaseUrl } from './const';
+import { startTransition } from 'react';
 export const $router = createRouter({
     index: BaseUrl,
     view: `${BaseUrl}view/:viewId?`,
     export: `${BaseUrl}export/:viewId`,
     embed: `${BaseUrl}embed/:viewId`
+}, {
+    links: true
+});
+const $searchParams = createSearchParams({
+    links: true
 });
-const $searchParams = createSearchParams();
 const asTheme = (v) => {
     const vlower = v?.toLowerCase();
     if (vlower === 'light' || vlower === 'dark') {
@@ -21,17 +27,61 @@ const asPadding = (v) => {
     if (parsed && isFinite(parsed) && isNaN(parsed) === false) {
         return Math.round(parsed);
     }
-    return 20;
+    return undefined;
+};
+const asViewMode = (v) => {
+    const mode = v?.toLowerCase() ?? '';
+    switch (mode) {
+        case 'dot':
+        case 'mmd':
+        case 'd2':
+        case 'react': {
+            return mode;
+        }
+        default: {
+            return undefined;
+        }
+    }
 };
-const $route = computed([$router, $searchParams], (r, v) => {
+const searchParams = computed($searchParams, v => {
+    return {
+        theme: asTheme(v.theme),
+        padding: asPadding(v.padding),
+        mode: asViewMode(v.mode),
+        showUI: 'showUI' in v ? v.showUI === 'true' : undefined
+    };
+});
+const filter = (v, k) => v == undefined ||
+    (k === 'theme' && v === 'dark') ||
+    (k === 'mode' && v === 'react') ||
+    (k === 'padding' && v === 20);
+function omitDefaults(v) {
+    return omitBy(v, filter);
+}
+export function updateSearchParams(update) {
+    const current = searchParams.get();
+    const next = {
+        ...current,
+        ...update
+    };
+    if (!equals(current, next)) {
+        const params = mapValues(omitDefaults(next), v => (isString(v) ? v : String(v)));
+        startTransition(() => {
+            $searchParams.open(params);
+        });
+    }
+}
+export const useSearchParams = () => useStore(searchParams);
+const $route = computed([$router, searchParams], (r, v) => {
     if (r?.route === 'view') {
         return {
             route: 'view',
             params: {
-                viewId: r.params.viewId ?? 'index',
-                theme: asTheme(v.theme) ?? 'dark'
+                viewId: (r.params.viewId ?? 'index'),
+                theme: v.theme ?? 'dark',
+                mode: v.mode ?? 'react'
             },
-            showUI: 'showUI' in v ? v.showUI === 'true' : true
+            showUI: v.showUI ?? true
         };
     }
     if (r?.route === 'export' || r?.route === 'embed') {
@@ -39,7 +89,7 @@ const $route = computed([$router, $searchParams], (r, v) => {
             route: r.route,
             params: {
                 viewId: r.params.viewId,
-                padding: asPadding(v.padding),
+                padding: v.padding ?? 20,
                 theme: r.route === 'embed' ? asTheme(v.theme) : undefined
             },
             showUI: false
@@ -50,29 +100,49 @@ const $route = computed([$router, $searchParams], (r, v) => {
         params: {
             theme: asTheme(v.theme) ?? 'dark'
         },
-        showUI: 'showUI' in v ? v.showUI === 'true' : true
+        showUI: v.showUI ?? false
     };
 });
 export const useRoute = () => useStore($route);
 export const isCurrentDiagram = (view) => {
     const r = $route.get();
-    return (r.route === 'view' || r.route === 'export') && r.params.viewId === view.id;
+    return ((r.route === 'view' || r.route === 'export' || r.route === 'embed') &&
+        r.params.viewId === view.id);
 };
+function currentSearchParams() {
+    const params = omitDefaults(searchParams.get());
+    if (isEmpty(params)) {
+        return '';
+    }
+    const urlSearchParams = new URLSearchParams();
+    for (const [k, v] of Object.entries(params)) {
+        urlSearchParams.set(k, isString(v) ? v : String(v));
+    }
+    const asString = urlSearchParams.toString();
+    return asString !== '' ? '?' + asString : '';
+}
+function getRoutePath(name, ...params) {
+    // if (params.length > 1) {
+    //   let p = params[0]!
+    //   p.
+    // }
+    return getPagePath($router, name, ...params) + currentSearchParams();
+}
+function openRoute(name, ...params) {
+    startTransition(() => {
+        $router.open(getRoutePath(name, ...params));
+    });
+}
 export const $pages = {
     index: {
-        open: () => openPage($router, 'index')
+        url: () => getRoutePath('index'),
+        open: () => openRoute('index')
     },
     view: {
-        open: (viewId) => openPage($router, 'view', { viewId })
+        url: (viewId) => getRoutePath('view', { viewId }),
+        open: (viewId) => openRoute('view', { viewId })
     },
     embed: {
-        path: (viewId) => getPagePath($router, 'embed', { viewId })
+        path: (viewId) => getRoutePath('embed', { viewId })
     }
 };
-// if (import.meta.env.DEV) {
-//   logger({
-//     $searchParams,
-//     $router,
-//     $route
-//   })
-// }

package/dist/__app__/src/utils/utils.js

@@ -1,5 +1,4 @@
 import { clsx } from 'clsx';
-import { twMerge } from 'tailwind-merge';
 export function cn(...inputs) {
-    return twMerge(clsx(inputs));
+    return clsx(inputs);
 }

package/dist/__app__/tsconfig.json

@@ -11,6 +11,7 @@
     "skipLibCheck": true,
     "outDir": "dist",
     "allowJs": true,
+    "exactOptionalPropertyTypes": true,
     "moduleResolution": "bundler",
     "esModuleInterop": true,
     "allowArbitraryExtensions": true,