likec4 1.3.0 → 1.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "likec4",
-  "version": "1.3.0",
+  "version": "1.5.0",
   "license": "MIT",
   "homepage": "https://likec4.dev",
   "author": "Denis Davydkov <denis@davydkov.com>",
@@ -65,10 +65,12 @@
     "lint": "run -T eslint src/ --fix",
     "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",
+    "dev:bigbank": "tsx watch src/cli/index.ts serve ../../apps/docs/src/components/bigbank",
+    "dev:dynamic-view": "tsx watch src/cli/index.ts serve ../../apps/docs/src/components/dynamic-view",
+    "dev:index-page": "tsx watch src/cli/index.ts serve ../../apps/docs/src/components/index-page",
     "dev:template": "tsx watch src/cli/index.ts serve ../create-likec4/template",
     "dev:example-cloud": "tsx watch src/cli/index.ts serve ../../examples/cloud-system",
+    "dev:failed": "tsx watch src/cli/index.ts serve ../../examples/failed",
     "dev:example-dev": "tsx watch src/cli/index.ts serve ../../examples/diagrams-dev/likec4",
     "cli": "tsx src/cli/index.ts",
     "cli:serve": "tsx watch src/cli/index.ts serve dev",
@@ -78,12 +80,12 @@
     "cli:export:json": "tsx src/cli/index.ts export json -o dev/export/likec4.json dev"
   },
   "dependencies": {
-    "@hpcc-js/wasm": "2.16.2",
+    "@hpcc-js/wasm": "2.18.0",
     "@vitejs/plugin-react": "4.3.1",
     "esm-env": "1.0.0",
     "nanostores": "0.10.3",
-    "playwright": "1.44.1",
-    "vite": "5.3.1"
+    "playwright": "1.45.0",
+    "vite": "5.3.3"
   },
   "peerDependencies": {
     "react": "^18.3.1",
@@ -99,22 +101,21 @@
   },
   "devDependencies": {
     "@fontsource/ibm-plex-sans": "^5.0.20",
-    "@likec4/core": "1.3.0",
-    "@likec4/diagram": "1.3.0",
-    "@likec4/generators": "1.3.0",
-    "@likec4/language-server": "1.3.0",
-    "@likec4/layouts": "1.3.0",
-    "@likec4/tsconfig": "1.3.0",
-    "@mantine/core": "7.10.2",
-    "@mantine/hooks": "7.10.2",
-    "@mantine/vanilla-extract": "7.10.2",
+    "@likec4/core": "1.5.0",
+    "@likec4/diagram": "1.5.0",
+    "@likec4/generators": "1.5.0",
+    "@likec4/language-server": "1.5.0",
+    "@likec4/layouts": "1.5.0",
+    "@likec4/tsconfig": "1.5.0",
+    "@mantine/core": "7.11.1",
+    "@mantine/hooks": "7.11.1",
+    "@mantine/vanilla-extract": "7.11.1",
     "@nanostores/react": "^0.7.2",
     "@react-hookz/web": "^24.0.4",
-    "@tabler/icons-react": "^3.0.0",
-    "@tanstack/react-router": "^1.36.3",
-    "@tanstack/router-vite-plugin": "^1.37.0",
-    "@types/mermaid": "^9.2.0",
-    "@types/node": "^20.14.2",
+    "@tabler/icons-react": "^3.9.0",
+    "@tanstack/react-router": "^1.43.4",
+    "@tanstack/router-vite-plugin": "^1.43.1",
+    "@types/node": "^20.14.10",
     "@types/prop-types": "^15.7.11",
     "@types/react": "18.3.3",
     "@types/react-dom": "18.3.0",
@@ -122,46 +123,47 @@
     "@types/yargs": "^17.0.32",
     "@vanilla-extract/css": "^1.15.3",
     "@vanilla-extract/dynamic": "^2.1.1",
-    "@vanilla-extract/vite-plugin": "^4.0.11",
+    "@vanilla-extract/vite-plugin": "^4.0.13",
+    "autoprefixer": "^10.4.19",
     "ci-info": "^3.9.0",
     "classnames": "^2.3.2",
     "clsx": "^2.1.1",
     "consola": "^3.2.3",
     "esbuild": "^0.21.5",
     "esbuild-node-externals": "^1.13.1",
-    "execa": "^9.1.0",
+    "execa": "^9.3.0",
     "fast-equals": "^5.0.1",
-    "framer-motion": "^11.2.2",
+    "framer-motion": "^11.2.13",
     "get-port": "^7.1.0",
     "html-to-image": "^1.11.11",
     "json5": "^2.2.3",
-    "langium": "3.1.0",
+    "langium": "3.1.2",
     "mkdirp": "^3.0.1",
-    "npm-run-all2": "^6.1.2",
-    "p-limit": "^5.0.0",
-    "picocolors": "^1.0.0",
-    "pkg-up": "^5.0.0",
-    "postcss": "^8.4.38",
+    "npm-run-all2": "^6.2.2",
+    "p-limit": "^6.0.0",
+    "package-up": "^5.0.0",
+    "picocolors": "^1.0.1",
+    "postcss": "^8.4.39",
     "postcss-preset-mantine": "^1.15.0",
     "pretty-ms": "^9.0.0",
     "prop-types": "^15.8.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-error-boundary": "^4.0.13",
-    "react-resizable-panels": "^2.0.19",
-    "react-shadow": "^20.4.0",
-    "remeda": "^1.61.0",
+    "react-resizable-panels": "^2.0.20",
+    "react-shadow": "^20.5.0",
+    "remeda": "^2.3.0",
     "string-hash": "^1.1.3",
     "strip-indent": "^4.0.0",
     "terser": "^5.31.1",
     "tsx": "~4.9.3",
-    "type-fest": "^4.18.2",
-    "typescript": "^5.4.5",
+    "type-fest": "^4.21.0",
+    "typescript": "^5.5.3",
     "ufo": "^1.5.3",
     "vite-plugin-css-injected-by-js": "^3.5.1",
     "vite-plugin-shadow-style": "^1.1.0",
-    "vitest": "~1.5.3",
+    "vitest": "~1.6.0",
     "yargs": "^17.7.2"
   },
-  "packageManager": "yarn@4.3.0"
+  "packageManager": "yarn@4.3.1"
 }

package/react/LikeC4Browser.css.d.ts

@@ -1,5 +1,4 @@
 export declare const modalContent: string;
 export declare const modalBody: string;
 export declare const cssDiagram: string;
-export declare const modalCloseButton: string;
-export declare const historyButtons: string;
+export declare const closeButton: string;

package/react/LikeC4Browser.d.ts

@@ -1,7 +1,24 @@
-import type { DiagramView, LikeC4ViewBaseProps } from './types';
-export type LikeC4BrowserProps<ViewId extends string> = Omit<LikeC4ViewBaseProps<ViewId>, 'viewId' | 'interactive'> & {
+import type { DiagramView } from './types';
+export type LikeC4BrowserProps<ViewId extends string> = {
     view: DiagramView<ViewId>;
+    /**
+     * By default determined by the user's system preferences.
+     */
+    colorScheme?: 'light' | 'dark' | undefined;
+    /**
+     * LikeC4 views are using 'IBM Plex Sans' font.
+     * By default, component injects the CSS to document head.
+     * Set to false if you want to handle the font yourself.
+     *
+     * @default true
+     */
+    injectFontCss?: boolean | undefined;
+    /**
+     * Background pattern
+     * @default 'dots'
+     */
+    background?: 'dots' | 'lines' | 'cross' | 'transparent' | 'solid' | undefined;
     onNavigateTo: (to: ViewId) => void;
     onClose: () => void;
 };
-export declare function LikeC4Browser<ViewId extends string>({ colorScheme, view, injectFontCss, onNavigateTo, onClose, overlay, background, ...props }: LikeC4BrowserProps<ViewId>): import("react/jsx-runtime").JSX.Element;
+export declare function LikeC4Browser<ViewId extends string>({ colorScheme, view, injectFontCss, onNavigateTo, onClose, background }: LikeC4BrowserProps<ViewId>): import("react/jsx-runtime").JSX.Element;

package/react/LikeC4ViewElement.d.ts

@@ -1,6 +1,24 @@
-import type { DiagramView, LikeC4ViewBaseProps } from './types';
-export type LikeC4ViewElementProps<ViewId extends string> = Omit<LikeC4ViewBaseProps<ViewId>, 'viewId' | 'interactive' | 'overlay'> & {
+import { type HTMLAttributes } from 'react';
+import type { DiagramView } from './types';
+export type LikeC4ViewElementProps<ViewId extends string> = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
     view: DiagramView<ViewId>;
+    /**
+     * By default determined by the user's system preferences.
+     */
+    colorScheme?: 'light' | 'dark' | undefined;
+    /**
+     * LikeC4 views are using 'IBM Plex Sans' font.
+     * By default, component injects the CSS to document head.
+     * Set to false if you want to handle the font yourself.
+     *
+     * @default true
+     */
+    injectFontCss?: boolean | undefined;
+    /**
+     * Background pattern
+     * @default 'transparent'
+     */
+    background?: 'dots' | 'lines' | 'cross' | 'transparent' | 'solid' | undefined;
     onNavigateTo?: ((to: ViewId) => void) | undefined;
 };
-export declare function LikeC4ViewElement<ViewId extends string>({ onNavigateTo, view, injectFontCss, colorScheme, background, ...props }: LikeC4ViewElementProps<ViewId>): import("react/jsx-runtime").JSX.Element;
+export declare function LikeC4ViewElement<ViewId extends string>({ onNavigateTo: _onNavigateTo, className, view, injectFontCss, colorScheme, background, ...props }: LikeC4ViewElementProps<ViewId>): import("react/jsx-runtime").JSX.Element;

package/react/ShadowRoot.d.ts

@@ -1,8 +1,6 @@
 import { type HTMLAttributes } from 'react';
 type ShadowRootProps = HTMLAttributes<HTMLDivElement> & {
-    rootClassName?: string;
     injectFontCss?: boolean | undefined;
-    colorScheme?: 'light' | 'dark' | undefined;
 };
-export declare function ShadowRoot({ children, rootClassName, colorScheme, injectFontCss, ...props }: ShadowRootProps): import("react/jsx-runtime").JSX.Element;
+export declare function ShadowRoot({ children, injectFontCss, ...props }: ShadowRootProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/react/ShadowRootMantineProvider.d.ts

@@ -0,0 +1,7 @@
+import { type PropsWithChildren } from 'react';
+type ShadowRootMantineProps = PropsWithChildren<{
+    className?: string | undefined;
+    colorScheme?: 'light' | 'dark' | undefined;
+}>;
+export declare function ShadowRootMantineProvider({ children, className, colorScheme }: ShadowRootMantineProps): import("react/jsx-runtime").JSX.Element;
+export {};