likec4 0.43.1 → 0.44.1

package/README.md

@@ -4,10 +4,10 @@
 
 Features:
 
-- preview diagrams in a local web server (with fast hot-reload on changes)
-- build a static website for sharing and embedding diagrams
-- export to PNG, Mermaid, Dot, D2
-- generate React components
+- Preview diagrams in a local web server (with lightning fast updates) ⚡️
+- Build a static .website (deploy to github pages, netlify...) 🔗
+- Export to PNG, Mermaid, Dot, D2 (if you something static) 🖼️
+- Generate React components (for custom integrations ) 🛠️
 
 ## Install
 
@@ -33,10 +33,6 @@ You can reference it directly in the `package.json#scripts` object:
 }
 ```
 
-> **Template:**  
-> Check out the template repository [likec4/template](https://github.com/likec4/template)  
-> with pre-configured CI for building and deploying to github pages.
-
 To use the binary, you can call it with [`npx`](https://docs.npmjs.com/cli/v10/commands/npx) while in the project directory:
 
 ```sh
@@ -84,18 +80,19 @@ This recursively searchs for `*.c4`, `*.likec4` files in current folder, parses
 Any changes in the sources trigger a super-fast hot update and you see changes in the browser immediately.
 
 > **Tip:**  
-> You can use `likec4 serve [path]` in a separate terminal window and keep it running while you're editing diagrams in editor, or even serve multiple projects at once.
+> You can use `likec4 start [path]` in a separate terminal window and keep it running while you're editing diagrams in editor, or even serve multiple projects at once.
 
 ### Build static website
 
-Example [https://template.likec4.dev](https://template.likec4.dev/view/cloud)  
-Build a single-page application with all diagrams:
+Build a single HTML with diagrams, ready to be embedded into your website:
 
 ```sh
 likec4 build -o ./dist
 ```
 
-When you deploy the website, you can use "Share" button to get a link to a specific diagram.
+Example [https://template.likec4.dev](https://template.likec4.dev/view/cloud)
+
+When you deployed the website, you can use "Share" button to get a link to a specific diagram.
 
 > **Tip:**  
 > [likec4/template](https://github.com/likec4/template) repository demonstrates how to deploy to github pages.
@@ -106,13 +103,16 @@ There is also a supplementary command to preview the build:
 likec4 preview -o ./dist
 ```
 
+For example, this command can be used on CI, to compare diagrams with ones from the previous/main build.
+
 ### Export to PNG
 
 ```sh
 likec4 export png -o ./assets
 ```
 
-This command starts temporary local web server and uses [Playwright](https://playwright.dev/) to take screenshots of diagrams.
+This command starts local web server and uses Playwright to take screenshots.  
+If you plan to use it on CI, refer to [Playwright documentation](https://playwright.dev/docs/ci) for details.
 
 ### Export to Mermaid, Dot, D2
 
@@ -131,11 +131,15 @@ likec4 codegen d2
 likec4 codegen react --outfile ./src/likec4.generated.tsx
 ```
 
+Check [documentation](https://likec4.dev/docs/tools/react/)
+
 > Output file should have `.tsx` extension  
 > By default, it generates `likec4.generated.tsx` in current directory
 
 ### Generate structured data
 
+Generate a TypeScript file with `LikeC4Views` object, which contains all diagrams and their metadata.
+
 ```sh
 likec4 codegen views-data --outfile ./src/likec4.generated.ts
 
@@ -147,6 +151,18 @@ likec4 codegen ts ...
 > Output file should have `.ts` extension  
 > By default, it generates `likec4.generated.ts` in current directory
 
+## Development
+
+In root workspace:
+
+```sh
+yarn install
+yarn build
+
+cd packages/likec4
+yarn dev
+```
+
 ## Support
 
 If there's a problem you're encountering or something you need help with, don't hesitate to take advantage of my [_Priority Support_ service](https://github.com/sponsors/davydkov) where you can ask me questions in an exclusive forum. I'm well equppied to assist you with this project and would be happy to help you out! 🙂

package/dist/@likec4/core/colors/element.js

@@ -8,13 +8,13 @@ const sky = {
   fill: "#0284c7",
   stroke: "#0369a1",
   hiContrast: "#f0f9ff",
-  loContrast: "#e0f2fe"
+  loContrast: "#B6ECF7"
 };
 const slate = {
   fill: "#64748b",
   stroke: "#475569",
   hiContrast: "#f8fafc",
-  loContrast: "#e2e8f0"
+  loContrast: "#cbd5e1"
 };
 export const ElementColors = {
   primary: blue,
@@ -31,23 +31,24 @@ export const ElementColors = {
     fill: "#737373",
     stroke: "#525252",
     hiContrast: "#fafafa",
-    loContrast: "#e5e5e5"
+    loContrast: "#d4d4d4"
   },
   red: {
     // fill: colors.red[500],
     // stroke: colors.red[600],
     // hiContrast: colors.red[50],
     // loContrast: colors.red[200],
-    fill: "#b54548",
-    stroke: "#8c333a",
+    fill: "#AC4D39",
+    // fill: '#b54548',
+    stroke: "#853A2D",
     // hiContrast: '#fef2f2',
     // loContrast: '#fecaca',
     // hiContrast: '#191111', // colors.gray[900],
     // loContrast: '#3b1219' // colors.gray[800],
-    hiContrast: "#f8fafc",
+    hiContrast: "#FBD3CB",
     // hiContrast: '#f8fafc',
     // loContrast: '#fdd8d8' // radix black red 12
-    loContrast: "#F9C6C6"
+    loContrast: "#FF977D"
   },
   green: {
     fill: "#428a4f",
@@ -56,18 +57,10 @@ export const ElementColors = {
     loContrast: "#c2f0c2"
   },
   amber: {
-    // fill: colors.amber[600],
-    // stroke: colors.amber[700],
-    // hiContrast: colors.amber[50],
-    // loContrast: colors.amber[200],
-    fill: "#d97706",
-    stroke: "#b45309",
-    // hiContrast: '#fffbeb',
-    // loContrast: '#fde68a',
-    hiContrast: "#f8fafc",
-    // colors.gray[900],
-    loContrast: "#ffe0c2"
-    // colors.gray[800],
+    fill: "#A35829",
+    stroke: "#7E451D",
+    hiContrast: "#FFE0C2",
+    loContrast: "#FFA057"
   },
   indigo: {
     // fill: colors.indigo[500],

package/dist/@likec4/core/colors/relationships.js

@@ -31,7 +31,7 @@ export const RelationshipColors = {
   amber: {
     lineColor: "#b45309",
     labelBgColor: "#78350f",
-    labelColor: "#f59e0b"
+    labelColor: "#FFE0C2"
   },
   blue,
   gray,
@@ -54,9 +54,9 @@ export const RelationshipColors = {
   muted: slate,
   primary: blue,
   red: {
-    lineColor: "#b91c1c",
+    lineColor: "#AC4D39",
     labelBgColor: "#b91c1c",
-    labelColor: "#dc2626"
+    labelColor: "#FF977D"
   },
   secondary: sky,
   sky,

package/dist/@likec4/diagrams/diagram/Nodes.js

@@ -1,9 +1,10 @@
-import { jsx } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { nonexhaustive } from "@likec4/core";
 import { useTransition } from "@react-spring/konva";
 import { useRef } from "react";
 import { AnimatedGroup } from "../konva.js";
 import { Portal } from "../konva-portal.js";
+import { ZoomInIcon } from "./icons/index.js";
 import { CylinderShape, MobileShape, PersonShape, QueueShape, RectangleShape } from "./shapes/index.js";
 import { BrowserShape } from "./shapes/Browser.js";
 import { CompoundShape } from "./shapes/Compound.js";
@@ -137,23 +138,27 @@ function NodeSnape({
   onNodeClick
 }) {
   const setHoveredNode = useSetHoveredNode();
-  const Shape = isCompound(node) ? CompoundShape : nodeShape(node);
+  const _isCompound = isCompound(node);
+  const isNavigatable = !!node.navigateTo && !!onNodeClick;
+  const Shape = nodeShape(node);
   const springs = ctrl.springs;
-  return /* @__PURE__ */ jsx(Portal, { selector: ".top", enabled: isHovered && !isCompound(node), children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(Portal, { selector: ".top", enabled: isHovered && !_isCompound, children: /* @__PURE__ */ jsxs(
     AnimatedGroup,
     {
       name: node.id,
       visible: expired !== true,
-      onPointerEnter: (e) => {
-        if (animate) {
+      ...animate && {
+        onPointerEnter: (e) => {
           setHoveredNode(node);
-          onNodeClick && mousePointer(e);
+          if (isNavigatable) {
+            mousePointer(e);
+          }
+        },
+        onPointerLeave: (e) => {
+          setHoveredNode(null);
+          mouseDefault(e);
         }
       },
-      onPointerLeave: (e) => {
-        setHoveredNode(null);
-        mouseDefault(e);
-      },
       ...onNodeClick && {
         onPointerClick: (e) => {
           if (DiagramGesture.isDragging || e.evt.button !== 0) {
@@ -172,7 +177,32 @@ function NodeSnape({
       scaleX: springs.scaleX,
       scaleY: springs.scaleY,
       opacity: springs.opacity,
-      children: /* @__PURE__ */ jsx(Shape, { node, theme, springs, isHovered })
+      children: [
+        _isCompound && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            CompoundShape,
+            {
+              node,
+              theme,
+              springs,
+              labelOffsetX: isNavigatable ? -12 : 4
+            }
+          ),
+          isNavigatable && /* @__PURE__ */ jsx(ZoomInIcon, { fill: "#BABABA", opacity: 0.9, size: 16, x: 16, y: 17 })
+        ] }),
+        !_isCompound && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(Shape, { node, theme, springs, isHovered }),
+          isNavigatable && /* @__PURE__ */ jsx(
+            ZoomInIcon,
+            {
+              fill: "#BABABA",
+              size: 16,
+              x: node.size.width / 2,
+              y: node.size.height - 20
+            }
+          )
+        ] })
+      ]
     }
   ) });
 }

package/dist/@likec4/diagrams/diagram/icons/ZoomIn.js

@@ -0,0 +1,27 @@
+import { jsx } from "react/jsx-runtime";
+import { Path } from "../../konva.js";
+export const ZoomInIcon = ({ fill, opacity = 1, size = 20, x, y }) => {
+  const originalSize = 15;
+  const scale = size / originalSize;
+  const offsetIcon = originalSize / 2;
+  return /* @__PURE__ */ jsx(
+    Path,
+    {
+      data: "M10 6.5C10 8.433 8.433 10 6.5 10C4.567 10 3 8.433 3 6.5C3 4.567 4.567 3 6.5 3C8.433 3 10 4.567 10 6.5ZM9.30884 10.0159C8.53901 10.6318 7.56251 11 6.5 11C4.01472 11 2 8.98528 2 6.5C2 4.01472 4.01472 2 6.5 2C8.98528 2 11 4.01472 11 6.5C11 7.56251 10.6318 8.53901 10.0159 9.30884L12.8536 12.1464C13.0488 12.3417 13.0488 12.6583 12.8536 12.8536C12.6583 13.0488 12.3417 13.0488 12.1464 12.8536L9.30884 10.0159ZM4.25 6.5C4.25 6.22386 4.47386 6 4.75 6H6V4.75C6 4.47386 6.22386 4.25 6.5 4.25C6.77614 4.25 7 4.47386 7 4.75V6H8.25C8.52614 6 8.75 6.22386 8.75 6.5C8.75 6.77614 8.52614 7 8.25 7H7V8.25C7 8.52614 6.77614 8.75 6.5 8.75C6.22386 8.75 6 8.52614 6 8.25V7H4.75C4.47386 7 4.25 6.77614 4.25 6.5Z",
+      fill,
+      fillRule: "evenodd",
+      strokeEnabled: false,
+      x,
+      y,
+      offsetX: offsetIcon,
+      offsetY: offsetIcon,
+      scaleX: scale,
+      scaleY: scale,
+      width: originalSize,
+      height: originalSize,
+      opacity,
+      globalCompositeOperation: "luminosity",
+      hitStrokeWidth: 5
+    }
+  );
+};

package/dist/@likec4/diagrams/diagram/icons/index.js

@@ -1,2 +1,3 @@
 export * from "./ExternalLink.js";
 export * from "./BrainIcon.js";
+export * from "./ZoomIn.js";

package/dist/@likec4/diagrams/diagram/shapes/Compound.js

@@ -1,6 +1,6 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { AnimatedRect, AnimatedText } from "../../konva.js";
-export function CompoundShape({ node, theme, springs }) {
+export function CompoundShape({ node, theme, springs, labelOffsetX = 4 }) {
   const { labels } = node;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
@@ -24,9 +24,9 @@ export function CompoundShape({ node, theme, springs }) {
       AnimatedText,
       {
         x,
-        y: y - label.fontSize / 2,
-        offsetX: 4,
-        offsetY: 4,
+        y: y - 4,
+        offsetX: labelOffsetX,
+        offsetY: label.fontSize / 2,
         width: springs.width.to((v) => v - x - 4),
         fill: "#BABABA",
         fontFamily: theme.font,

package/dist/@likec4/diagrams/hooks/index.js

@@ -1,4 +1,4 @@
-export * from "./useDarkMode.js";
+export * from "./usePrefersLightMode.js";
 export * from "./useDiagramApi.js";
 export * from "./useImageLoader.js";
 export * from "./useViewIdFromHash.js";

package/dist/@likec4/diagrams/hooks/usePrefersLightMode.js

@@ -0,0 +1,5 @@
+import { useMediaQuery } from "@react-hookz/web/esm";
+const COLOR_SCHEME_QUERY = "(prefers-color-scheme: light)";
+export function usePrefersLightMode() {
+  return useMediaQuery(COLOR_SCHEME_QUERY);
+}

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

@@ -0,0 +1,50 @@
+import { CaretDownIcon } from '@radix-ui/react-icons';
+import { Button, DropdownMenu, Flex, IconButton, Separator } from '@radix-ui/themes';
+import { useState } from 'react';
+import { keys } from 'remeda';
+const Mode = {
+    react: 'React',
+    dot: 'Graphviz',
+    mmd: 'Mermaid',
+    d2: 'D2'
+};
+const mode_keys = keys.strict(Mode);
+export const DisplayModeSelector = () => {
+    const [current, setCurrent] = useState('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)]);
+    };
+    return (<Flex display={{
+            initial: 'none',
+            md: 'flex'
+        }} gap='3' align='center'>
+      <Button variant={current === first ? 'solid' : 'ghost'} size='1' onClick={changeMode(first)}>
+        {Mode[first]}
+      </Button>
+      <Button variant={current === second ? 'solid' : 'ghost'} size='1' onClick={changeMode(second)}>
+        {Mode[second]}
+      </Button>
+      <DropdownMenu.Root>
+        <DropdownMenu.Trigger>
+          <IconButton variant='ghost' size='1'>
+            <CaretDownIcon />
+          </IconButton>
+        </DropdownMenu.Trigger>
+        <DropdownMenu.Content>
+          {rest.map(mode => (<DropdownMenu.Item key={mode} onClick={changeMode(mode)}>
+              {Mode[mode]}
+            </DropdownMenu.Item>))}
+        </DropdownMenu.Content>
+      </DropdownMenu.Root>
+      <Separator orientation='vertical'/>
+    </Flex>);
+};

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

@@ -1,7 +1,8 @@
 import { CaretDownIcon, Share1Icon as ShareIcon } from '@radix-ui/react-icons';
-import { Button, Dialog, DropdownMenu, Flex, IconButton, Separator, Text } from '@radix-ui/themes';
+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>
@@ -13,29 +14,14 @@ const ExportMenu = ({ onExport, children }) => (<DropdownMenu.Root>
       <DropdownMenu.Group>
         <DropdownMenu.Item onClick={_ => {
         onExport('png');
-        // const { boundingBox } = diagramApi.diagramView()
-        // console.log('Serialized: ', diagramApi.stage.toObject())
-        // const k = new KonvaCore.Canvas({
-        //   height: diagramApi.
-        // })
-        // diagramApi.stage().toBlob({
-        //   ...boundingBox,
-        //   callback(blob) {
-        //     const url = URL.createObjectURL(blob)
-        //     window.open(url)
-        //     // const a = document.createElement('a')
-        //     // a.href = url
-        //     // a.download = 'diagram.png'
-        //     // a.click()
-        //     URL.revokeObjectURL(url)
-        //   },
-        // })
     }}>
           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>
@@ -49,24 +35,7 @@ const ExportMenu = ({ onExport, children }) => (<DropdownMenu.Root>
 export const ViewActionsToolbar = ({ diagram }) => {
     const [exportTo, setExportTo] = useState(null);
     return (<Flex position='fixed' top='0' right='0' p='2' gap={'3'} justify='end' align='center'>
-      <Flex display={{
-            initial: 'none',
-            md: 'flex'
-        }} gap='3' align='center'>
-        <Button variant='solid' size='1'>
-          React
-        </Button>
-        <Button variant='ghost' size='1'>
-          Graphviz
-        </Button>
-        <Button variant='ghost' size='1'>
-          Mermaid
-        </Button>
-        <IconButton variant='ghost' size='1'>
-          <CaretDownIcon />
-        </IconButton>
-        <Separator orientation='vertical'/>
-      </Flex>
+      <DisplayModeSelector />
       <Dialog.Root>
         <Dialog.Trigger>
           <Button variant='solid'>