likec4 0.48.0 → 0.50.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "likec4",
-  "version": "0.48.0",
+  "version": "0.50.0",
   "license": "MIT",
   "homepage": "https://likec4.dev",
   "author": "Denis Davydkov <denis@davydkov.com>",
@@ -32,7 +32,7 @@
     "lint": "run -T eslint src/ --fix",
     "test": "run -T vitest run",
     "test:watch": "run -T vitest",
-    "clean": "run -T rimraf dist app/dist dev/.export dev/dist",
+    "clean": "run -T rimraf dist app/dist dev/.export dev/dist node_modules/.vite",
     "dev": "tsx watch src/cli/index.ts serve dev",
     "dev:bigbank": "tsx watch src/cli/index.ts serve ../../docs/likec4/bigbank",
     "dev:index-page": "tsx watch src/cli/index.ts serve ../../docs/likec4/index-page",
@@ -42,7 +42,8 @@
     "cli:serve": "tsx watch src/cli/index.ts serve dev",
     "cli:build": "tsx src/cli/index.ts build -o dev/dist dev",
     "cli:preview": "tsx src/cli/index.ts preview -o dev/dist dev",
-    "cli:export": "tsx src/cli/index.ts export png -o dev/export dev"
+    "cli:export": "tsx src/cli/index.ts export png -o dev/export dev",
+    "cli:export:json": "tsx src/cli/index.ts export json -o dev/export/likec4.json dev"
   },
   "dependencies": {
     "rambdax": "^9.1.1",
@@ -67,32 +68,30 @@
     "classnames": "^2.3.2",
     "clsx": "^1.2.1",
     "nanostores": "^0.9.5",
-    "playwright-core": "^1.40.0",
+    "playwright-core": "^1.40.1",
     "postcss": "^8.4.31",
+    "postcss-nested": "^6.0.1",
     "prop-types": "^15.8.1",
-    "radix-themes-tw": "^0.0.8",
     "react": "^18.2.0",
     "react-accessible-treeview": "^2.8.0",
     "react-dom": "^18.2.0",
-    "tailwind-merge": "^1.14.0",
-    "tailwindcss": "^3.3.5",
-    "vite": "^4.5.0"
+    "vite": "^5.0.4"
   },
   "devDependencies": {
-    "@likec4/core": "0.48.0",
-    "@likec4/diagrams": "0.48.0",
-    "@likec4/generators": "0.48.0",
-    "@likec4/language-server": "0.48.0",
-    "@likec4/layouts": "0.48.0",
-    "@types/node": "^20.8.7",
+    "@likec4/core": "0.50.0",
+    "@likec4/diagrams": "0.50.0",
+    "@likec4/generators": "0.50.0",
+    "@likec4/language-server": "0.50.0",
+    "@likec4/layouts": "0.50.0",
+    "@types/node": "^20.10.1",
     "@types/prop-types": "^15.7.10",
     "@types/react": "^18.2.0",
     "@types/react-dom": "^18.2.0",
     "@types/yargs": "^17.0.31",
     "boxen": "^7.1.1",
     "ci-info": "^3.9.0",
-    "esbuild": "^0.19.5",
-    "esbuild-node-externals": "^1.9.0",
+    "esbuild": "^0.19.7",
+    "esbuild-node-externals": "^1.11.0",
     "execa": "^8.0.1",
     "get-port": "^7.0.0",
     "json5": "^2.2.3",
@@ -102,7 +101,8 @@
     "pretty-ms": "^8.0.0",
     "strip-indent": "^4.0.0",
     "tsx": "^4.1.3",
-    "typescript": "^5.2.2",
+    "type-fest": "^4.8.2",
+    "typescript": "^5.3.2",
     "typescript-plugin-css-modules": "^5.0.2",
     "vitest": "^0.34.6",
     "yargs": "^17.7.2"

package/dist/__app__/postcss.config.cjs

@@ -1,11 +0,0 @@
-const autoprefixer = require('autoprefixer');
-const nesting = require('tailwindcss/nesting/index.js');
-const tailwindcss = require('tailwindcss');
-const { resolve } = require('node:path');
-
-const tailwindCfg = resolve(__dirname, './tailwind.config.cjs');
-
-/* @type {import('postcss').Postcss} */
-module.exports = {
-  plugins: [nesting, tailwindcss(tailwindCfg), autoprefixer],
-};

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

@@ -1,66 +0,0 @@
-import { CaretDownIcon, Share1Icon as ShareIcon } from '@radix-ui/react-icons';
-import { Button, Dialog, DropdownMenu, Flex, Text } from '@radix-ui/themes';
-import { useState } from 'react';
-// import { ThemePanelToggle } from '../ThemePanelToggle'
-import { DisplayModeSelector } from './DisplayModeSelector';
-import ExportDiagram from './ExportDiagram';
-import { ShareDialog } from './ShareDialog';
-const ExportMenu = ({ onExport, 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={_ => {
-        onExport('png');
-    }}>
-          Export as .png
-        </DropdownMenu.Item>
-        <DropdownMenu.Item disabled>Export as .dot</DropdownMenu.Item>
-        <DropdownMenu.Item disabled>Export as .mmd</DropdownMenu.Item>
-        <DropdownMenu.Item disabled>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 ViewActionsToolbar = ({ diagram }) => {
-    const [exportTo, setExportTo] = useState(null);
-    return (<Flex position='fixed' top='0' right='0' p={{
-            initial: '3',
-            md: '2'
-        }} gap={'3'} justify='end' align='center'>
-      <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/pages/index.module.css

@@ -1,11 +0,0 @@
-.dashboardTile {
-
-  @media (min-width: 768px) {
-    min-width: 300px;
-    max-width: 500px;
-  }
-
-  /* &:where(:global(.rt-variant-surface))::after {
-    box-shadow: none;
-  } */
-}

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

@@ -1,57 +0,0 @@
-import { DashboardIcon } from '@radix-ui/react-icons';
-import { Box, Button, Card, Flex, Separator, Text } from '@radix-ui/themes';
-import { useAtomValue } from 'jotai';
-import { memo } from 'react';
-import { useIndexPageTileAtoms } from '../data';
-import { $pages } from '../router';
-import styles from './index.module.css';
-const DashboardTileView = ({ atom }) => {
-    const { title, id } = useAtomValue(atom);
-    return (<Flex asChild justify={'start'}>
-      <Button color='gray' variant='soft' className='cursor-pointer' size='2' onClick={_ => $pages.view.open(id)}>
-        <DashboardIcon width={14} height={14} style={{
-            color: 'var(--gray-a10)'
-        }}/>
-        <Text>{title}</Text>
-      </Button>
-    </Flex>);
-};
-const DashboardTile = ({ atom }) => {
-    const { path, views, isRoot } = useAtomValue(atom);
-    return (<Card asChild className={styles.dashboardTile} variant='classic' size={{
-            initial: '1',
-            sm: '2'
-        }}>
-      <Box grow={'1'} shrink={'0'}>
-        <Flex direction='column' gap='3'>
-          <Text as='div' trim='end' weight={isRoot ? 'medium' : 'bold'} size='2' className='truncate' color={isRoot ? 'gray' : undefined}>
-            {isRoot ? 'index' : '🗂️ ' + path}
-          </Text>
-          <Separator orientation='horizontal' my='1' size={'4'}/>
-          {views.map(view => (<DashboardTileView key={view.toString()} atom={view}/>))}
-        </Flex>
-      </Box>
-    </Card>);
-};
-export const IndexPage = memo(() => {
-    const tiles = useIndexPageTileAtoms();
-    return (<Box style={{
-            paddingLeft: 60
-        }}>
-      <Flex gap={{
-            initial: '4',
-            lg: '6'
-        }} p={{
-            initial: '4',
-            lg: '6'
-        }} wrap={{
-            initial: 'nowrap',
-            sm: 'wrap'
-        }} direction={{
-            initial: 'column',
-            sm: 'row'
-        }} align='stretch'>
-        {tiles.map(tile => (<DashboardTile key={tile.toString()} atom={tile}/>))}
-      </Flex>
-    </Box>);
-});

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

@@ -1,30 +0,0 @@
-.diagramBg {
-  overscroll-behavior: none;
-  overflow: hidden;
-  --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;
-    }
-  }
-}

package/dist/__app__/tailwind.config.cjs

@@ -1,17 +0,0 @@
-const { radixThemePreset } = require('radix-themes-tw');
-const { resolve } = require('node:path');
-
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-  presets: [radixThemePreset],
-  darkMode: ['class', '[data-mode="dark"]'],
-  content: [
-    resolve(__dirname, './src') + '/**/*.{js,jsx,ts,tsx,md,mdx}',
-    resolve(__dirname, './index.html'),
-  ],
-  corePlugins: {
-    // ...
-    // Preflight is enabled by default, we disable it here
-    preflight: false
-  }
-};