@likec4/diagram 1.26.1 → 1.27.0

package/dist/bundle/LikeC4View.d.ts

@@ -0,0 +1,2 @@
+import { LikeC4ViewProps } from './LikeC4View.props';
+export declare function LikeC4View<ViewId extends string = string, Tag = string, Kind = string>({ viewId, ...props }: LikeC4ViewProps<ViewId, Tag, Kind>): import("react/jsx-runtime").JSX.Element;

package/dist/bundle/LikeC4View.js

@@ -0,0 +1,176 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { memo, useState } from 'react';
+import { ShadowRoot } from './ShadowRoot.js';
+import { cx } from '@likec4/styles/css';
+import { Box, ActionIcon } from '@mantine/core';
+import { shallowEqual } from '@mantine/hooks';
+import { IconX } from '@tabler/icons-react';
+import { isBoolean } from 'remeda';
+import { FramerMotionConfig } from '../context/FramerMotionConfig.js';
+import { LikeC4Diagram } from '../LikeC4Diagram.js';
+import { useLikeC4Model } from '../likec4model/useLikeC4Model.js';
+import { Overlay } from '../overlays/overlay/Overlay.js';
+import { useColorScheme, useShadowRootStyle, cssInteractive } from './styles.css.js';
+import { ErrorMessage, ViewNotFound } from './ViewNotFound.js';
+
+function LikeC4View({
+  viewId,
+  ...props
+}) {
+  const likec4model = useLikeC4Model();
+  const view = likec4model?.findView(viewId);
+  if (!likec4model) {
+    return /* @__PURE__ */ jsx(ErrorMessage, { children: "LikeC4Model not found. Make sure you have LikeC4ModelProvider." });
+  }
+  if (likec4model.type !== "layouted") {
+    return /* @__PURE__ */ jsx(ErrorMessage, { children: "LikeC4Model is not layouted. Make sure you have LikeC4ModelProvider with layouted model." });
+  }
+  if (!view || !view.isDiagram()) {
+    return /* @__PURE__ */ jsx(ViewNotFound, { viewId });
+  }
+  return /* @__PURE__ */ jsx(LikeC4ViewInner, { view: view.$view, ...props });
+}
+const LikeC4ViewInner = memo(({
+  view,
+  className,
+  pannable = false,
+  zoomable = false,
+  keepAspectRatio = true,
+  colorScheme: explicitColorScheme,
+  injectFontCss = true,
+  controls = false,
+  fitView = true,
+  fitViewPadding = 0.1,
+  background = "transparent",
+  browser = true,
+  showDiagramTitle = false,
+  showNavigationButtons = false,
+  showNotations = false,
+  enableFocusMode = false,
+  enableDynamicViewWalkthrough = enableFocusMode,
+  enableElementDetails = false,
+  enableRelationshipBrowser = enableElementDetails,
+  enableRelationshipDetails = enableRelationshipBrowser,
+  reduceGraphics = "auto",
+  mantineTheme,
+  styleNonce,
+  style,
+  reactFlowProps = {},
+  ...props
+}) => {
+  const likec4model = useLikeC4Model(true, "layouted");
+  const colorScheme = useColorScheme(explicitColorScheme);
+  const [shadowRootProps, cssstyle] = useShadowRootStyle(keepAspectRatio, view);
+  const [browserViewId, onNavigateTo] = useState(null);
+  const browserView = browserViewId ? likec4model.findView(browserViewId)?.$view : null;
+  const notations = view.notation?.elements ?? [];
+  const hasNotations = notations.length > 0;
+  let nonce;
+  if (typeof styleNonce === "string") {
+    nonce = styleNonce;
+  } else if (typeof styleNonce === "function") {
+    nonce = styleNonce();
+  }
+  const isBrowserEnabled = browser !== false;
+  const browserProps = isBoolean(browser) ? {} : browser;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "style",
+      {
+        type: "text/css",
+        nonce,
+        dangerouslySetInnerHTML: {
+          __html: cssstyle
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      ShadowRoot,
+      {
+        ...shadowRootProps,
+        injectFontCss,
+        theme: mantineTheme,
+        colorScheme,
+        styleNonce,
+        className: cx(
+          "likec4-view",
+          className
+        ),
+        style,
+        children: /* @__PURE__ */ jsxs(FramerMotionConfig, { children: [
+          /* @__PURE__ */ jsx(
+            LikeC4Diagram,
+            {
+              view,
+              readonly: true,
+              pannable,
+              zoomable,
+              background,
+              fitView,
+              fitViewPadding,
+              showDiagramTitle,
+              showNotations: showNotations && hasNotations,
+              enableDynamicViewWalkthrough,
+              showNavigationButtons,
+              experimentalEdgeEditing: false,
+              enableFocusMode,
+              enableRelationshipDetails,
+              enableElementDetails,
+              enableRelationshipBrowser,
+              controls,
+              nodesDraggable: false,
+              reduceGraphics,
+              className: cx(isBrowserEnabled && cssInteractive),
+              enableSearch: false,
+              ...isBrowserEnabled && {
+                onNavigateTo,
+                onCanvasClick: () => onNavigateTo(view.id),
+                onNodeClick: () => onNavigateTo(view.id)
+              },
+              reactFlowProps,
+              ...props
+            }
+          ),
+          browserView && /* @__PURE__ */ jsxs(Overlay, { onClose: () => onNavigateTo(null), children: [
+            /* @__PURE__ */ jsx(
+              LikeC4Diagram,
+              {
+                view: browserView,
+                background: "dots",
+                onNavigateTo: (to) => onNavigateTo(to),
+                enableDynamicViewWalkthrough: true,
+                enableFocusMode: true,
+                enableRelationshipBrowser: true,
+                enableElementDetails: true,
+                enableRelationshipDetails: true,
+                enableSearch: true,
+                controls: true,
+                readonly: true,
+                fitView: true,
+                fitViewPadding,
+                ...props,
+                ...browserProps,
+                showNotations: (browserProps.showNotations ?? true) && (browserView.notation?.elements.length ?? 0) > 0
+              }
+            ),
+            /* @__PURE__ */ jsx(Box, { pos: "absolute", top: "1rem", right: "1rem", children: /* @__PURE__ */ jsx(
+              ActionIcon,
+              {
+                variant: "default",
+                color: "gray",
+                onClick: (e) => {
+                  e.stopPropagation();
+                  onNavigateTo(null);
+                },
+                children: /* @__PURE__ */ jsx(IconX, {})
+              }
+            ) })
+          ] })
+        ] })
+      }
+    )
+  ] });
+}, shallowEqual);
+LikeC4ViewInner.displayName = "LikeC4ViewInner";
+
+export { LikeC4View };

package/dist/bundle/LikeC4View.props.d.ts

@@ -0,0 +1,207 @@
+import { WhereOperator } from '@likec4/core';
+import { CSSProperties } from 'react';
+import { ElementIconRenderer, OverrideReactFlowProps } from '../LikeC4Diagram.props';
+export interface LikeC4ViewProps<ViewId = string, Tag = string, Kind = string> {
+    /**
+     * View to display.
+     */
+    viewId: ViewId;
+    /**
+     * Enable/disable panning
+     * @default false
+     */
+    pannable?: boolean | undefined;
+    /**
+     * Enable/disable zooming
+     * @default false
+     */
+    zoomable?: boolean | undefined;
+    /**
+     * @default true
+     */
+    keepAspectRatio?: boolean | undefined;
+    /**
+     * Background pattern
+     * @default 'transparent'
+     */
+    background?: 'dots' | 'lines' | 'cross' | 'transparent' | 'solid' | undefined;
+    /**
+     * Click on the view opens a modal with browser.
+     * You can customize or disable the browser.
+     *
+     * @default true
+     */
+    browser?: boolean | LikeC4BrowserProps | undefined;
+    /**
+     * @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;
+    /**
+     * Show/hide panel with top left controls,
+     * @default false
+     */
+    controls?: boolean | undefined;
+    /**
+     * If set, initial viewport will show all nodes & edges
+     * @default true
+     */
+    fitView?: boolean | undefined;
+    /**
+     * Seems like this is percentage of the view size
+     * @default 0.1
+     */
+    fitViewPadding?: number | undefined;
+    /**
+     * Display diagram title / description
+     *
+     * @default false
+     */
+    showDiagramTitle?: boolean | undefined;
+    /**
+     * Show back/forward navigation buttons
+     * @default false
+     */
+    showNavigationButtons?: undefined | boolean;
+    /**
+     * Display notations of the view
+     * @default false
+     */
+    showNotations?: boolean | undefined;
+    /**
+     * If double click on a node should enable focus mode, i.e. highlight incoming/outgoing edges
+     * Conflicts with `browser` prop
+     *
+     * @default false
+     */
+    enableFocusMode?: boolean | undefined;
+    /**
+     * If Walkthrough for dynamic views should be enabled
+     * @default enableFocusMode
+     */
+    enableDynamicViewWalkthrough?: boolean | undefined;
+    /**
+     * Enable popup with element details
+     * @default false
+     */
+    enableElementDetails?: boolean | undefined;
+    /**
+     * Experimental feature to browse relationships
+     *
+     * @default enableElementDetails
+     */
+    enableRelationshipBrowser?: boolean | undefined;
+    /**
+     * Display dropdown with details on relationship's label click
+     * @default enableRelationshipBrowser
+     */
+    enableRelationshipDetails?: boolean | undefined;
+    /**
+     * Improve performance by hiding certain elements and reducing visual effects (disable mix-blend, shadows, animations)
+     *
+     * @default 'auto' - will be set to true if view is pannable and has more than 3000 * 2000 pixels
+     */
+    reduceGraphics?: 'auto' | boolean | undefined;
+    where?: WhereOperator<Tag, Kind> | undefined;
+    /**
+     * Override some react flow props
+     */
+    reactFlowProps?: OverrideReactFlowProps | undefined;
+    className?: string | undefined;
+    style?: CSSProperties | undefined;
+    /**
+     * Override Mantine theme
+     */
+    mantineTheme?: any;
+    /** Function to generate nonce attribute added to all generated `<style />` tags */
+    styleNonce?: string | (() => string) | undefined;
+    /**
+     * Render custom icon for a node
+     * By default, if icon is http:// or https://, it will be rendered as an image
+     */
+    renderIcon?: ElementIconRenderer | undefined;
+}
+export interface LikeC4BrowserProps {
+    /**
+     * Background pattern for the browser view.
+     * @default 'dots'
+     */
+    background?: 'dots' | 'lines' | 'cross' | 'transparent' | 'solid' | undefined;
+    /**
+     * Seems like this is percentage of the view size
+     * @default 0.1
+     */
+    fitViewPadding?: number | undefined;
+    /**
+     * Show/hide panel with top left controls,
+     * @default true
+     */
+    controls?: boolean | undefined;
+    /**
+     * Display diagram title / description
+     *
+     * @default true
+     */
+    showDiagramTitle?: boolean | undefined;
+    /**
+     * Show back/forward navigation buttons
+     * @default true
+     */
+    showNavigationButtons?: undefined | boolean;
+    /**
+     * Enable search popup for elements and views
+     * @default true
+     */
+    enableSearch?: boolean | undefined;
+    /**
+     * If double click on a node should enable focus mode
+     *
+     * @default true
+     */
+    enableFocusMode?: boolean | undefined;
+    /**
+     * If Walkthrough for dynamic views should be enabled
+     * @default true
+     */
+    enableDynamicViewWalkthrough?: boolean | undefined;
+    /**
+     * Enable popup with element details
+     * @default true
+     */
+    enableElementDetails?: boolean | undefined;
+    /**
+     * Experimental feature to browse relationships
+     *
+     * @default enableElementDetails
+     */
+    enableRelationshipBrowser?: boolean | undefined;
+    /**
+     * Display dropdown with details on relationship's label click
+     * @default enableRelationshipBrowser
+     */
+    enableRelationshipDetails?: boolean | undefined;
+    /**
+     * Display notations of the view
+     * @default true
+     */
+    showNotations?: boolean | undefined;
+    /**
+     * Improve performance by hiding certain elements and reducing visual effects (disable mix-blend, shadows, animations)
+     *
+     * @default 'auto' - will be set to true if view is pannable and has more than 3000 * 2000 pixels
+     */
+    reduceGraphics?: 'auto' | boolean | undefined;
+    className?: string | undefined;
+    style?: CSSProperties | undefined;
+    /**
+     * Override some react flow props
+     */
+    reactFlowProps?: OverrideReactFlowProps | undefined;
+}

package/dist/bundle/ReactLikeC4.d.ts

@@ -0,0 +1,36 @@
+import { WhereOperator } from '@likec4/core';
+import { CSSProperties } from 'react';
+import { LikeC4DiagramProps } from '../LikeC4Diagram';
+import { OnNavigateTo } from '../LikeC4Diagram.props';
+export type ReactLikeC4Props<ViewId = string, Tag = string, Kind = string> = Omit<LikeC4DiagramProps, 'view' | 'where' | 'onNavigateTo'> & {
+    viewId: ViewId;
+    /**
+     * Keep aspect ratio of the diagram
+     * Disable if you need to manage the viewport (use className)
+     *
+     * @default true
+     */
+    keepAspectRatio?: boolean | undefined;
+    /**
+     * 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;
+    style?: CSSProperties | undefined;
+    where?: WhereOperator<Tag, Kind> | undefined;
+    onNavigateTo?: OnNavigateTo<ViewId> | undefined;
+    mantineTheme?: any;
+    /** Function to generate nonce attribute added to all generated `<style />` tags */
+    styleNonce?: string | (() => string) | undefined;
+};
+export declare function ReactLikeC4<ViewId extends string = string, Tag = string, Kind = string>({ viewId, ...props }: ReactLikeC4Props<ViewId, Tag, Kind>): import("react/jsx-runtime").JSX.Element;
+export declare namespace ReactLikeC4 {
+    var displayName: string;
+}

package/dist/bundle/ReactLikeC4.js

@@ -0,0 +1,90 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import 'react';
+import { ShadowRoot } from './ShadowRoot.js';
+import { cx } from '@likec4/styles/css';
+import { isString, isFunction } from 'remeda';
+import { LikeC4Diagram } from '../LikeC4Diagram.js';
+import { useLikeC4Model } from '../likec4model/useLikeC4Model.js';
+import { useColorScheme, useShadowRootStyle } from './styles.css.js';
+import { ErrorMessage, ViewNotFound } from './ViewNotFound.js';
+
+function ReactLikeC4({
+  viewId,
+  ...props
+}) {
+  const likec4model = useLikeC4Model();
+  const view = likec4model?.findView(viewId);
+  if (!likec4model) {
+    return /* @__PURE__ */ jsx(ErrorMessage, { children: "LikeC4Model not found. Make sure you have LikeC4ModelProvider." });
+  }
+  if (!view) {
+    return /* @__PURE__ */ jsx(ViewNotFound, { viewId });
+  }
+  if (!view.isDiagram()) {
+    return /* @__PURE__ */ jsx(ErrorMessage, { children: "LikeC4Model is not layouted. Make sure you have LikeC4ModelProvider with layouted model." });
+  }
+  return /* @__PURE__ */ jsx(ReactLikeC4Inner, { view: view.$view, ...props });
+}
+function ReactLikeC4Inner({
+  className,
+  view,
+  colorScheme: explicitColorScheme,
+  injectFontCss = true,
+  keepAspectRatio = true,
+  showNotations = true,
+  onNavigateTo,
+  background = "transparent",
+  style,
+  mantineTheme,
+  styleNonce,
+  ...props
+}) {
+  const colorScheme = useColorScheme(explicitColorScheme);
+  const [shadowRootProps, cssstyle] = useShadowRootStyle(keepAspectRatio, view);
+  const notations = view.notation?.elements ?? [];
+  const hasNotations = notations.length > 0;
+  let nonce;
+  if (isString(styleNonce)) {
+    nonce = styleNonce;
+  } else if (isFunction(styleNonce)) {
+    nonce = styleNonce();
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "style",
+      {
+        type: "text/css",
+        nonce,
+        dangerouslySetInnerHTML: { __html: cssstyle }
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      ShadowRoot,
+      {
+        ...shadowRootProps,
+        injectFontCss,
+        theme: mantineTheme,
+        colorScheme,
+        styleNonce,
+        className: cx(
+          "likec4-view",
+          className
+        ),
+        style,
+        children: /* @__PURE__ */ jsx(
+          LikeC4Diagram,
+          {
+            view,
+            showNotations: showNotations && hasNotations,
+            onNavigateTo,
+            background,
+            ...props
+          }
+        )
+      }
+    )
+  ] });
+}
+ReactLikeC4.displayName = "GenericReactLikeC4";
+
+export { ReactLikeC4 };

package/dist/bundle/ShadowRoot.d.ts

@@ -0,0 +1,12 @@
+import { MantineThemeOverride } from '@mantine/core';
+import { HTMLAttributes } from 'react';
+type ShadowRootProps = HTMLAttributes<HTMLDivElement> & {
+    injectFontCss?: boolean | undefined;
+    styleNonce?: string | (() => string) | undefined;
+    mode?: 'open' | 'closed';
+    delegatesFocus?: boolean;
+    colorScheme?: 'light' | 'dark' | undefined;
+    theme?: MantineThemeOverride | undefined;
+};
+export declare function ShadowRoot({ children, theme, injectFontCss, styleNonce, colorScheme, ...props }: ShadowRootProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/bundle/ShadowRoot.js

@@ -0,0 +1,52 @@
+import { jsx } from 'react/jsx-runtime';
+import { cx, css } from '@likec4/styles/css';
+import { MantineProvider } from '@mantine/core';
+import { useRef, useCallback } from 'react';
+import root from 'react-shadow';
+import { isDefined } from 'remeda';
+import { useBundledStyleSheet, DefaultTheme } from './styles.css.js';
+
+const Root = root["div"];
+function ShadowRoot({
+  children,
+  theme = DefaultTheme,
+  injectFontCss = true,
+  styleNonce,
+  colorScheme,
+  ...props
+}) {
+  const rootRef = useRef(null);
+  const styleSheets = useBundledStyleSheet(injectFontCss, styleNonce);
+  const getRootElement = useCallback(() => rootRef.current ?? void 0, [rootRef]);
+  let getStyleNonce;
+  if (isDefined(styleNonce)) {
+    getStyleNonce = typeof styleNonce === "function" ? styleNonce : () => styleNonce;
+  }
+  return /* @__PURE__ */ jsx(Root, { ssr: false, styleSheets, ...props, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: rootRef,
+      ...colorScheme && { "data-mantine-color-scheme": colorScheme },
+      className: cx(
+        "likec4-shadow-root",
+        css({
+          display: "contents"
+        })
+      ),
+      children: /* @__PURE__ */ jsx(
+        MantineProvider,
+        {
+          ...colorScheme && { forceColorScheme: colorScheme },
+          defaultColorScheme: "auto",
+          getRootElement,
+          ...getStyleNonce && { getStyleNonce },
+          cssVariablesSelector: ".likec4-shadow-root",
+          theme,
+          children
+        }
+      )
+    }
+  ) });
+}
+
+export { ShadowRoot };

package/dist/bundle/ViewNotFound.d.ts

@@ -0,0 +1,5 @@
+import { PropsWithChildren } from 'react';
+export declare const ErrorMessage: ({ children }: PropsWithChildren) => import("react/jsx-runtime").JSX.Element;
+export declare const ViewNotFound: ({ viewId }: {
+    viewId: string;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/bundle/ViewNotFound.js

@@ -0,0 +1,30 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+const ErrorMessage = ({ children }) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    style: {
+      margin: "1rem 0"
+    },
+    children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          margin: "0 auto",
+          display: "inline-block",
+          padding: "2rem",
+          background: "rgba(250,82,82,.15)",
+          color: "#ffa8a8"
+        },
+        children
+      }
+    )
+  }
+);
+const ViewNotFound = ({ viewId }) => /* @__PURE__ */ jsxs(ErrorMessage, { children: [
+  "View ",
+  /* @__PURE__ */ jsx("code", { children: viewId }),
+  " not found"
+] });
+
+export { ErrorMessage, ViewNotFound };

package/dist/bundle/font.css.js

@@ -0,0 +1,3 @@
+const fontsCss = "@font-face{font-family:IBM Plex Sans;font-style:normal;font-display:swap;font-weight:400;src:url(https://cdn.jsdelivr.net/fontsource/fonts/ibm-plex-sans@latest/latin-400-normal.woff2) format(\"woff2\"),url(https://cdn.jsdelivr.net/fontsource/fonts/ibm-plex-sans@latest/latin-400-normal.woff) format(\"woff\");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:IBM Plex Sans;font-style:normal;font-display:swap;font-weight:500;src:url(https://cdn.jsdelivr.net/fontsource/fonts/ibm-plex-sans@latest/latin-500-normal.woff2) format(\"woff2\"),url(https://cdn.jsdelivr.net/fontsource/fonts/ibm-plex-sans@latest/latin-500-normal.woff) format(\"woff\");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:IBM Plex Sans;font-style:normal;font-display:swap;font-weight:600;src:url(https://cdn.jsdelivr.net/fontsource/fonts/ibm-plex-sans@latest/latin-600-normal.woff2) format(\"woff2\"),url(https://cdn.jsdelivr.net/fontsource/fonts/ibm-plex-sans@latest/latin-600-normal.woff) format(\"woff\");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:IBM Plex Sans;font-style:normal;font-display:swap;font-weight:400;src:url(https://cdn.jsdelivr.net/fontsource/fonts/ibm-plex-sans@latest/cyrillic-400-normal.woff2) format(\"woff2\"),url(https://cdn.jsdelivr.net/fontsource/fonts/ibm-plex-sans@latest/cyrillic-400-normal.woff) format(\"woff\");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:IBM Plex Sans;font-style:normal;font-display:swap;font-weight:500;src:url(https://cdn.jsdelivr.net/fontsource/fonts/ibm-plex-sans@latest/cyrillic-500-normal.woff2) format(\"woff2\"),url(https://cdn.jsdelivr.net/fontsource/fonts/ibm-plex-sans@latest/cyrillic-500-normal.woff) format(\"woff\");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:IBM Plex Sans;font-style:normal;font-display:swap;font-weight:600;src:url(https://cdn.jsdelivr.net/fontsource/fonts/ibm-plex-sans@latest/cyrillic-600-normal.woff2) format(\"woff2\"),url(https://cdn.jsdelivr.net/fontsource/fonts/ibm-plex-sans@latest/cyrillic-600-normal.woff) format(\"woff\");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:IBM Plex Sans;font-style:normal;font-display:swap;font-weight:400;src:url(https://cdn.jsdelivr.net/fontsource/fonts/ibm-plex-sans@latest/cyrillic-ext-400-normal.woff2) format(\"woff2\"),url(https://cdn.jsdelivr.net/fontsource/fonts/ibm-plex-sans@latest/cyrillic-ext-400-normal.woff) format(\"woff\");unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:IBM Plex Sans;font-style:normal;font-display:swap;font-weight:500;src:url(https://cdn.jsdelivr.net/fontsource/fonts/ibm-plex-sans@latest/cyrillic-ext-500-normal.woff2) format(\"woff2\"),url(https://cdn.jsdelivr.net/fontsource/fonts/ibm-plex-sans@latest/cyrillic-ext-500-normal.woff) format(\"woff\");unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:IBM Plex Sans;font-style:normal;font-display:swap;font-weight:600;src:url(https://cdn.jsdelivr.net/fontsource/fonts/ibm-plex-sans@latest/cyrillic-ext-600-normal.woff2) format(\"woff2\"),url(https://cdn.jsdelivr.net/fontsource/fonts/ibm-plex-sans@latest/cyrillic-ext-600-normal.woff) format(\"woff\");unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:IBM Plex Sans;font-style:normal;font-display:swap;font-weight:400;src:url(https://cdn.jsdelivr.net/fontsource/fonts/ibm-plex-sans@latest/latin-ext-400-normal.woff2) format(\"woff2\"),url(https://cdn.jsdelivr.net/fontsource/fonts/ibm-plex-sans@latest/latin-ext-400-normal.woff) format(\"woff\");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:IBM Plex Sans;font-style:normal;font-display:swap;font-weight:500;src:url(https://cdn.jsdelivr.net/fontsource/fonts/ibm-plex-sans@latest/latin-ext-500-normal.woff2) format(\"woff2\"),url(https://cdn.jsdelivr.net/fontsource/fonts/ibm-plex-sans@latest/latin-ext-500-normal.woff) format(\"woff\");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:IBM Plex Sans;font-style:normal;font-display:swap;font-weight:600;src:url(https://cdn.jsdelivr.net/fontsource/fonts/ibm-plex-sans@latest/latin-ext-600-normal.woff2) format(\"woff2\"),url(https://cdn.jsdelivr.net/fontsource/fonts/ibm-plex-sans@latest/latin-ext-600-normal.woff) format(\"woff\");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}";
+
+export { fontsCss as default };

package/dist/bundle/index.d.ts

@@ -0,0 +1,5 @@
+export { LikeC4View } from './LikeC4View';
+export type { LikeC4ViewProps } from './LikeC4View.props';
+export { ReactLikeC4, type ReactLikeC4Props } from './ReactLikeC4';
+export { LikeC4ModelProvider } from './LikeC4ModelProvider';
+export { ViewNotFound } from './ViewNotFound';

package/dist/bundle/index.js

@@ -0,0 +1,4 @@
+export { LikeC4View } from './LikeC4View.js';
+export { ReactLikeC4 } from './ReactLikeC4.js';
+export { LikeC4ModelProvider } from './LikeC4ModelProvider.js';
+export { ViewNotFound } from './ViewNotFound.js';

package/dist/bundle/styles.css.d.ts

@@ -0,0 +1,10 @@
+import { DiagramView } from '@likec4/core';
+import { MantineThemeOverride } from '@mantine/core';
+export declare const DefaultTheme: MantineThemeOverride;
+export declare const cssInteractive: string;
+export declare function useBundledStyleSheet(injectFontCss: boolean, styleNonce?: string | (() => string) | undefined): CSSStyleSheet[];
+export type ColorScheme = 'light' | 'dark';
+export declare function useColorScheme(explicit?: ColorScheme): ColorScheme;
+export declare function useShadowRootStyle(keepAspectRatio: boolean, view: DiagramView): [{
+    'data-likec4-instance': string;
+}, style: string];