likec4 0.40.1-build.2 → 0.40.1-build.4

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Denis Davydkov
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,3 @@
+# LikeC4
+
+...

package/dist/__app__/likec4.css

@@ -4,78 +4,7 @@
 @tailwind components;
 @tailwind utilities;
 
-/* @layer base {
-
-  :root {
-    --background: 0 0% 100%;
-    --foreground: 222.2 84% 4.9%;
-
-    --card: 0 0% 100%;
-    --card-foreground: 222.2 84% 4.9%;
-
-    --popover: 0 0% 100%;
-    --popover-foreground: 222.2 84% 4.9%;
-
-    --primary: 222.2 47.4% 11.2%;
-    --primary-foreground: 210 40% 98%;
-
-    --secondary: 210 40% 96.1%;
-    --secondary-foreground: 222.2 47.4% 11.2%;
-yarn add @fontsource-variable/noto-sans-tc
-    --muted: 210 40% 96.1%;
-    --muted-foreground: 215.4 16.3% 46.9%;
-
-    --accent: 210 40% 96.1%;
-    --accent-foreground: 222.2 47.4% 11.2%;
-
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 210 40% 98%;
-
-    --border: 214.3 31.8% 91.4%;
-    --input: 214.3 31.8% 91.4%;
-    --ring: 222.2 84% 4.9%;
-
-    --radius: 0.5rem;
-  }
-
-  .dark {
-    --background: 222.2 84% 4.9%;
-    --foreground: 210 40% 98%;
-
-    --card: 222.2 84% 4.9%;
-    --card-foreground: 210 40% 98%;
-
-    --popover: 222.2 84% 4.9%;
-    --popover-foreground: 210 40% 98%;
-
-    --primary: 210 40% 98%;
-    --primary-foreground: 222.2 47.4% 11.2%;
-
-    --secondary: 217.2 32.6% 17.5%;
-    --secondary-foreground: 210 40% 98%;
-
-    --muted: 217.2 32.6% 17.5%;
-    --muted-foreground: 215 20.2% 65.1%;
-
-    --accent: 217.2 32.6% 17.5%;
-    --accent-foreground: 210 40% 98%;
-
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 210 40% 98%;
-
-    --border: 217.2 32.6% 17.5%;
-    --input: 217.2 32.6% 17.5%;
-    --ring: 212.7 26.8% 83.9%;
-
-  }
-
-} */
-
 .radix-themes {
-  /* --default-font-family: 'Rubik Variable',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji'; */
-  --font-weight-light: 200;
-  --font-weight-regular: 400;
-  --font-weight-medium: 500;
   --font-weight-bold: 600;
 }
 
@@ -83,3 +12,7 @@ html, body {
   margin: 0;
   padding: 0;
 }
+
+.export-page {
+  --color-page-background: transparent !important;
+}

package/dist/__app__/src/App.jsx

@@ -1,24 +1,20 @@
 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';
+import { Theme } from '@radix-ui/themes';
 const Routes = () => {
     const r = useRoute();
-    return (<>
+    return (<Theme accentColor='iris' panelBackground='translucent' appearance={r.params?.theme} radius='small'>
       {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>)}
-    </>);
+    </Theme>);
 };
-// const AtomsDevTools = import.meta.env.DEV ? ({ children }: PropsWithChildren) => {
-//   useAtomsDevtools('demo')
-//   return <>{children}</>
-// } : Fragment
 export default function App() {
     return (<Provider>
       <Routes />

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

@@ -15,9 +15,9 @@ export const DiagramNotFound = () => {
               Diagram not found
             </Heading>
             <Text as='div'>The diagram you are looking for does not exist.</Text>
-            <Box>
+            <Box pt='2'>
               <Button variant='soft' color='amber' onClick={() => $pages.index.open()}>
-                Home page
+                Go to overview
               </Button>
             </Box>
           </Flex>

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

@@ -1,12 +1,14 @@
 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 }}/>}
-    </>);
-};
+export const ThemePanelToggle = import.meta.env.PROD
+    ? () => null
+    : () => {
+        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/sidebar/Sidebar.jsx

@@ -24,7 +24,7 @@ export const Sidebar = () => {
             $pages.index.open();
         }}>
               <ArrowLeftIcon />
-              Back to dashboard
+              Back to overview
             </Button>
             <Separator orientation='horizontal' my='3' size={'4'}/>
             <DiagramsTree />

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

@@ -26,7 +26,7 @@ const embedCode = (diagram, theme) => {
 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 }}>
+    return (<Dialog.Content size='2' style={{ maxWidth: 800, minWidth: 280 }}>
       <Tabs.Root defaultValue='embed'>
         <Tabs.List>
           <Tabs.Trigger value='embed'>Embed</Tabs.Trigger>
@@ -42,8 +42,11 @@ export const ShareDialog = ({ diagram }) => {
                     <ExclamationTriangleIcon />
                   </Callout.Icon>
                   <Callout.Text>
-                    This is a local URL. You need to build and deploy your diagrams to a public URL
+                    This is a local URL. You need to build your project and deploy to a public URL
                     to make it available for embedding.
+                    <br />
+                    <Code>likec4 build --help</Code> builds your project as static website (single
+                    .html file)
                   </Callout.Text>
                 </Callout.Root>)}
               <label>

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

@@ -25,9 +25,11 @@ const ExportMenu = ({ diagramApi, children }) => (<DropdownMenu.Root>
         //   },
         // })
     }}>
-          Export as PNG
+          Export as .png
         </DropdownMenu.Item>
-        <DropdownMenu.Item>Export as SVG</DropdownMenu.Item>
+        <DropdownMenu.Item>Export as .dot</DropdownMenu.Item>
+        <DropdownMenu.Item>Export as .d2</DropdownMenu.Item>
+        <DropdownMenu.Item>Export as .mmd</DropdownMenu.Item>
       </DropdownMenu.Group>
       <DropdownMenu.Separator />
       <DropdownMenu.Label>

package/dist/__app__/src/main.jsx

@@ -1,9 +1,6 @@
-import { Theme } from '@radix-ui/themes';
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import App from './App';
 ReactDOM.createRoot(document.getElementById('like4-root')).render(<React.StrictMode>
-    <Theme accentColor='iris' panelBackground='translucent' appearance='dark' radius='small'>
-      <App />
-    </Theme>
+    <App />
   </React.StrictMode>);

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

@@ -1,12 +1,13 @@
 import { Diagram } from '@likec4/diagrams';
-import { useLikeC4View } from '../data';
-import { useLayoutEffect } from 'react';
-import styles from './export.module.css';
+import { useIsomorphicLayoutEffect, useWindowSize } from '@react-hookz/web/esm';
 import { DiagramNotFound } from '../components';
+import { useLikeC4View } from '../data';
 export function ExportPage({ viewId, padding }) {
+    const { width, height } = useWindowSize();
     const diagram = useLikeC4View(viewId);
-    useLayoutEffect(() => {
-        const classname = styles.exportpage ?? '';
+    useIsomorphicLayoutEffect(() => {
+        // see ../../likec4.css
+        const classname = 'export-page';
         document.body.parentElement?.classList.add(classname);
         return () => {
             document.body.parentElement?.classList.remove(classname);
@@ -15,5 +16,5 @@ export function ExportPage({ viewId, padding }) {
     if (!diagram) {
         return <DiagramNotFound />;
     }
-    return (<Diagram animate={false} pannable={false} zoomable={false} diagram={diagram} padding={padding} width={diagram.width + padding * 2} height={diagram.height + padding * 2}/>);
+    return (<Diagram animate={false} pannable={false} zoomable={false} diagram={diagram} padding={padding} width={width} height={height}/>);
 }

package/dist/__app__/src/router.js

@@ -4,13 +4,28 @@ import { useStore } from '@nanostores/react';
 import { createSearchParams } from '@nanostores/router';
 import { computed } from 'nanostores';
 const $searchParams = createSearchParams();
+const asTheme = (v) => {
+    const vlower = v?.toLowerCase();
+    if (vlower === 'light' || vlower === 'dark') {
+        return vlower;
+    }
+    return undefined;
+};
+const asPadding = (v) => {
+    const parsed = v ? parseFloat(v) : undefined;
+    if (parsed && isFinite(parsed) && isNaN(parsed) === false) {
+        return Math.round(parsed);
+    }
+    return 20;
+};
 const $route = computed($searchParams, v => {
     if ('embed' in v) {
         return {
             route: 'export',
             params: {
                 viewId: v.embed,
-                padding: 'padding' in v ? parseInt(v.padding) : 20
+                padding: asPadding(v.padding),
+                theme: asTheme(v.theme)
             },
             showUI: false
         };
@@ -20,7 +35,8 @@ const $route = computed($searchParams, v => {
             route: 'export',
             params: {
                 viewId: v.export,
-                padding: 'padding' in v ? parseInt(v.padding) : 20
+                padding: asPadding(v.padding),
+                theme: asTheme(v.theme)
             },
             showUI: false
         };