@likec4/diagram 1.35.0 → 1.36.0

package/dist/base/primitives/edge/EdgeLabel.js

@@ -1,11 +1,10 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { isStepEdgeId, extractStep } from '@likec4/core';
-import { cx } from '@likec4/styles/css';
+import { cx, css } from '@likec4/styles/css';
 import { Box } from '@likec4/styles/jsx';
-import { Text } from '@mantine/core';
+import { edgeLabel } from '@likec4/styles/recipes';
 import { forwardRef } from 'react';
 import { isTruthy } from 'remeda';
-import { labelsva } from './EdgeLabel.css.js';
 
 const EdgeLabel = forwardRef(({
   edgeProps: {
@@ -21,14 +20,25 @@ const EdgeLabel = forwardRef(({
   ...rest
 }, ref) => {
   const stepNum = isStepEdgeId(id) ? extractStep(id) : null;
-  const classes = labelsva({
+  const classes = edgeLabel({
     isStepEdge: stepNum !== null
   });
   return /* @__PURE__ */ jsxs(Box, { ref, className: cx(classes.root, className), ...rest, children: [
     stepNum !== null && /* @__PURE__ */ jsx(Box, { className: classes.stepNumber, children: stepNum }),
     /* @__PURE__ */ jsxs(Box, { className: classes.labelContents, children: [
-      isTruthy(label) && /* @__PURE__ */ jsx(Text, { component: "div", className: classes.labelText, lineClamp: 5, children: label }),
-      isTruthy(technology) && /* @__PURE__ */ jsx(Text, { component: "div", className: classes.labelTechnology, children: "[ " + technology + " ]" }),
+      isTruthy(label) && /* @__PURE__ */ jsx(
+        Box,
+        {
+          className: cx(
+            classes.labelText,
+            css({
+              lineClamp: 5
+            })
+          ),
+          children: label
+        }
+      ),
+      isTruthy(technology) && /* @__PURE__ */ jsx(Box, { className: classes.labelTechnology, children: "[ " + technology + " ]" }),
       children
     ] })
   ] });

package/dist/base/primitives/edge/EdgeLabelContainer.js

@@ -1,9 +1,8 @@
 import { jsx } from 'react/jsx-runtime';
-import { cx, css } from '@likec4/styles/css';
+import { cx } from '@likec4/styles/css';
 import { EdgeLabelRenderer } from '@xyflow/react';
 import { isNumber } from 'remeda';
 import { ZIndexes } from '../../const.js';
-import { edgeVars } from './edge.css.js';
 import { translate, edgeLabelContainer } from './EdgeLabel.css.js';
 
 const toCssVarValue = (value) => {
@@ -40,10 +39,6 @@ function EdgeLabelContainer({
     "div",
     {
       className: cx(
-        css({
-          likec4RelationPalette: color
-        }),
-        edgeVars,
         edgeLabelContainer,
         "nodrag nopan",
         "likec4-edge-label-container",

package/dist/base/primitives/edge/EdgeMarkers.js

@@ -83,7 +83,7 @@ const OArrow = (props) => /* @__PURE__ */ jsx(
       {
         d: "M 0 0 L 8 3 L 0 6 L 1 3 z",
         stroke: "context-stroke",
-        fill: "var(--likec4-background-color)",
+        fill: "context-stroke",
         strokeWidth: 1.25,
         strokeLinejoin: "miter",
         strokeLinecap: "square"
@@ -129,7 +129,7 @@ const ODiamond = (props) => /* @__PURE__ */ jsx(
       {
         d: "M5,0 L10,4 L5,8 L0,4 Z",
         stroke: "context-stroke",
-        fill: "var(--likec4-background-color)",
+        fill: "context-stroke",
         strokeWidth: 1.25,
         strokeLinecap: "round"
       }
@@ -171,7 +171,7 @@ const ODot = (props) => /* @__PURE__ */ jsx(
       {
         strokeWidth: 1.25,
         stroke: "context-stroke",
-        fill: "var(--likec4-background-color)",
+        fill: "context-stroke",
         cx: 4,
         cy: 4,
         r: 3

package/dist/base/primitives/edge/edge.css.d.ts

@@ -1,7 +1,5 @@
-export declare const edgeVars: string;
 export declare const edgeContainer: string;
 export declare const hideOnReducedGraphics: string;
 export declare const edgePathBg: string;
 export declare const markerContext: string;
 export declare const cssEdgePath: string;
-export declare const actionBtn: string;

package/dist/base/primitives/edge/edge.css.js

@@ -1,29 +1,6 @@
 import { css } from '@likec4/styles/css';
 
 const isSelected = ".react-flow__edge.selected";
-const edgeStroke = "--xy-edge-stroke";
-const edgeStrokeSelected = "--xy-edge-stroke-selected";
-const labelColor = "--xy-edge-label-color";
-const labelBg = "--xy-edge-label-background-color";
-const edgeVars = css({
-  [edgeStroke]: "{colors.likec4.relation.stroke}",
-  [edgeStrokeSelected]: "{colors.likec4.relation.stroke.selected}",
-  [labelColor]: {
-    base: "{colors.likec4.relation.label}",
-    _light: `color-mix(in srgb, {colors.likec4.relation.label}, rgba(255 255 255 / 0.85) 40%)`
-  },
-  [labelBg]: {
-    _light: `{colors.likec4.relation.label.bg/60}`,
-    _dark: `{colors.likec4.relation.label.bg/50}`
-  },
-  ["--xy-edge-stroke-width"]: "3",
-  "&:is([data-likec4-hovered='true'],[data-edge-active='true'])": {
-    [edgeStroke]: "{colors.likec4.relation.stroke.selected}",
-    _whenSelected: {
-      ["--xy-edge-stroke-width"]: "4"
-    }
-  }
-});
 const edgeContainer = css({
   _reduceGraphics: {
     transition: "none"
@@ -90,36 +67,5 @@ const cssEdgePath = css({
     animationName: "none"
   }
 });
-const aiBg = {
-  var: "--ai-bg"};
-const actionBtn = css({
-  // zIndex: 'calc(var(--layer-overlays, 1) + 1)',
-  pointerEvents: "all",
-  // color: `xyedge.label`,
-  cursor: "pointer",
-  opacity: 0.75,
-  transition: "fast",
-  // backgroundColor: aiBg.ref,
-  [aiBg.var]: "var(--xy-edge-label-background-color)",
-  "--ai-hover": `color-mix(in srgb , var(--xy-edge-label-background-color), {colors.likec4.mixColor} 10%)`,
-  "--ai-size": `var(--ai-size-sm)`,
-  "--ai-radius": `var(--mantine-radius-sm)`,
-  _hover: {
-    translateY: "1px",
-    scale: 1.15
-  },
-  _active: {
-    translateY: "-1px",
-    scale: "0.9"
-  },
-  _whenHovered: {
-    opacity: 1
-  },
-  "& .tabler-icon": {
-    width: "80%",
-    height: "80%",
-    strokeWidth: "2"
-  }
-});
 
-export { actionBtn, cssEdgePath, edgeContainer, edgePathBg, edgeVars, hideOnReducedGraphics, markerContext };
+export { cssEdgePath, edgeContainer, edgePathBg, hideOnReducedGraphics, markerContext };

package/dist/base/primitives/element/ElementActionButtons.js

@@ -11,9 +11,9 @@ import { stopPropagation } from '../../../utils/xyflow.js';
 const container = css({
   position: "absolute",
   zIndex: 1,
-  top: `calc(100% - 30px)`,
+  top: `[calc(100% - 30px)]`,
   transform: "translateX(-50%)",
-  left: `50%`,
+  left: `[50%]`,
   width: "auto",
   minHeight: "30px",
   display: "flex",

package/dist/base/primitives/element/ElementDetailsButton.js

@@ -10,20 +10,21 @@ import IconId from '../../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react
 
 const container = css({
   position: "absolute",
-  top: 2,
-  right: 2,
+  top: "0.5",
+  right: "0.5",
   _shapeBrowser: {
-    right: "5px"
+    right: "[5px]"
   },
   _shapeCylinder: {
-    top: "14px"
+    top: "[14px]"
   },
   _shapeStorage: {
-    top: "14px"
+    top: "[14px]"
   },
   _shapeQueue: {
-    top: "1px",
-    right: "12px"
+    top: "[1px]",
+    right: "3"
+    // 12px
   },
   _smallZoom: {
     display: "none"

package/dist/base/primitives/element/ElementNodeContainer.css.js

@@ -4,8 +4,8 @@ const container = css({
   position: "relative",
   width: "100%",
   height: "100%",
-  padding: 0,
-  margin: 0,
+  padding: "0",
+  margin: "0",
   display: "flex",
   alignItems: "center",
   justifyContent: "center",
@@ -13,8 +13,8 @@ const container = css({
   _before: {
     content: '" "',
     position: "absolute",
-    top: "calc(100% - 4px)",
-    left: 0,
+    top: "[calc(100% - 4px)]",
+    left: "0",
     width: "100%",
     height: "24px",
     background: "[transparent]",

package/dist/base/primitives/element/ElementNodeContainer.js

@@ -1,6 +1,6 @@
 import { jsx } from 'react/jsx-runtime';
 import { DefaultShapeSize, DefaultTextSize, DefaultPaddingSize } from '@likec4/core/types';
-import { cx, css } from '@likec4/styles/css';
+import { cx } from '@likec4/styles/css';
 import * as m from 'motion/react-m';
 import { forwardRef } from 'react';
 import { container } from './ElementNodeContainer.css.js';
@@ -62,9 +62,6 @@ const ElementNodeContainer = forwardRef(({
     {
       ref,
       className: cx(
-        css({
-          likec4Palette: data.color
-        }),
         container,
         "group",
         "likec4-element-node",

package/dist/base/primitives/element/ElementShape.css.js

@@ -4,14 +4,14 @@ const indicator = css({
   _smallZoom: {
     visibility: "hidden"
   },
-  stroke: "likec4.palette.loContrast",
+  stroke: "var(--likec4-palette-loContrast)",
   fill: "[none]",
   strokeWidth: 8,
   strokeOpacity: 0.8,
   visibility: "hidden",
   pointerEvents: "none",
   _light: {
-    stroke: `[color-mix(in srgb, {colors.likec4.palette.fill} 50%,rgb(121, 121, 121))]`
+    stroke: `[color-mix(in srgb, var(--likec4-palette-fill) 50%,rgb(121, 121, 121))]`
   },
   _whenFocused: {
     visibility: "visible"
@@ -25,26 +25,26 @@ const indicator = css({
   }
 });
 const fillElementFill = css({
-  fill: "likec4.palette.fill"
+  fill: "var(--likec4-palette-fill)"
 });
 css({
-  fill: "likec4.palette.stroke"
+  fill: "var(--likec4-palette-stroke)"
 });
 const fillMixStroke = css({
-  fill: "[color-mix(in srgb, {colors.likec4.palette.stroke} 90%, {colors.likec4.palette.fill})]",
+  fill: "[color-mix(in srgb, var(--likec4-palette-stroke) 90%, var(--likec4-palette-fill))]",
   ".shape-svg-multiple &": {
-    fill: "likec4.palette.fill"
+    fill: "var(--likec4-palette-fill)"
   }
 });
 const shapeBase = css.raw({
-  top: 0,
-  left: 0,
+  top: "0",
+  left: "0",
   position: "absolute",
   width: "100%",
   height: "100%",
   pointerEvents: "none",
-  fill: "likec4.palette.fill",
-  stroke: "likec4.palette.stroke",
+  fill: "var(--likec4-palette-fill)",
+  stroke: "var(--likec4-palette-stroke)",
   overflow: "visible"
   // zIndex is removed to improve rendering performance
   // this forces to keep shape in the same layer as the node
@@ -75,7 +75,7 @@ const shapeSvg = css(shapeBase, {
   transitionDelay: "0ms",
   filter: `
       drop-shadow(0 2px 1px rgba(0, 0, 0, 0.21))
-      drop-shadow(0 1px 1px color-mix(in srgb, {colors.likec4.palette.stroke} 40%, transparent))
+      drop-shadow(0 1px 1px color-mix(in srgb, var(--likec4-palette-stroke) 40%, transparent))
       drop-shadow(0 5px 3px rgba(0, 0, 0, 0.1))
     `,
   _whenHovered: {

package/dist/base/primitives/element/ElementTags.d.ts

@@ -3,6 +3,7 @@ import { NodeProps } from '../../types';
 import { ForwardRefExoticComponent, RefAttributes, MemoExoticComponent } from 'react';
 export type ElementTagProps = {
     tag: string;
+    cursor?: 'pointer' | 'default';
 } & Omit<BoxProps, 'children'>;
 export declare const ElementTag: ForwardRefExoticComponent<Omit<ElementTagProps, "ref"> & RefAttributes<HTMLDivElement>>;
 type Data = {

package/dist/base/primitives/element/ElementTags.js

@@ -14,7 +14,7 @@ import { useCurrentZoom } from '../../../hooks/useXYFlow.js';
 import { stopPropagation } from '../../../utils/xyflow.js';
 
 const ElementTag = forwardRef(
-  ({ tag, className, ...props }, ref) => {
+  ({ tag, cursor = "default", className, ...props }, ref) => {
     const spec = useTagSpecification(tag);
     return /* @__PURE__ */ jsxs(
       Box,
@@ -28,8 +28,9 @@ const ElementTag = forwardRef(
           className
         ),
         ...props,
+        style: { cursor },
         children: [
-          /* @__PURE__ */ jsx("span", { style: { opacity: 0.7, fontSize: "1.05em" }, children: "#" }),
+          /* @__PURE__ */ jsx("span", { children: "#" }),
           /* @__PURE__ */ jsx("span", { children: tag })
         ]
       }
@@ -79,23 +80,23 @@ const ElementTags = memo(({ id, data: { tags, width, hovered = false } }) => {
           "likec4-element-tags",
           hstack({
             pointerEvents: "all",
-            gap: 4,
+            gap: "1",
             alignItems: "flex-end",
             justifyItems: "stretch",
             position: "absolute",
             width: "100%",
-            bottom: 0,
-            left: 0,
-            padding: 4,
+            bottom: "0",
+            left: "0",
+            padding: "1",
             _shapeCylinder: {
-              bottom: 5
+              bottom: "[5px]"
             },
             _shapeStorage: {
-              bottom: 5
+              bottom: "[5px]"
             },
             _shapeQueue: {
-              bottom: 0,
-              paddingLeft: 14
+              bottom: "0",
+              paddingLeft: "[14px]"
             }
           })
         ),
@@ -129,11 +130,12 @@ const ElementTags = memo(({ id, data: { tags, width, hovered = false } }) => {
       {
         ref: tagsToolbarRef,
         css: {
-          gap: 4,
+          gap: "0.5",
+          alignItems: "baseline",
           flexWrap: "wrap",
           pb: "sm",
           translate: "auto",
-          x: -8,
+          x: "[-8px]",
           maxWidth
         },
         children: tags.map((tag) => /* @__PURE__ */ jsx(
@@ -145,8 +147,9 @@ const ElementTags = memo(({ id, data: { tags, width, hovered = false } }) => {
               cursor: "pointer",
               ...zoomIsLargeEnough && {
                 fontSize: "lg",
-                borderRadius: 4,
-                px: 6
+                borderRadius: "[4px]",
+                px: "1.5"
+                // 6px
               }
             }),
             onClick: (e) => {

package/dist/bundle/LikeC4View.d.ts

@@ -1,3 +1,3 @@
+import { aux } from '@likec4/core/types';
 import { LikeC4ViewProps } from './LikeC4View.props';
-import type * as aux from '@likec4/core/types/_aux';
 export declare function LikeC4View<A extends aux.Any = aux.UnknownLayouted>({ viewId, ...props }: LikeC4ViewProps<A>): import("react/jsx-runtime").JSX.Element;

package/dist/bundle/LikeC4View.js

@@ -31,6 +31,12 @@ function LikeC4View({
   }
   return /* @__PURE__ */ jsx(LikeC4ViewInner, { view: view.$view, ...props });
 }
+const DEFAULT_BROWSER_PADDING = {
+  top: "50px",
+  bottom: "16px",
+  left: "16px",
+  right: "16px"
+};
 const LikeC4ViewInner = memo(({
   view,
   className,
@@ -152,7 +158,7 @@ const LikeC4ViewInner = memo(({
                 controls: "next",
                 readonly: true,
                 fitView: true,
-                fitViewPadding: "32px",
+                fitViewPadding: DEFAULT_BROWSER_PADDING,
                 ...props,
                 ...browserProps,
                 showNotations: (browserProps.showNotations ?? true) && (browserView.notation?.nodes.length ?? 0) > 0,

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

@@ -1,7 +1,6 @@
-import { WhereOperator } from '@likec4/core/types';
+import { aux, WhereOperator } from '@likec4/core/types';
 import { CSSProperties } from 'react';
 import { CustomNodes, ElementIconRenderer, OverrideReactFlowProps, PaddingWithUnit, ViewPadding } from '../LikeC4Diagram.props';
-import type * as aux from '@likec4/core/types/_aux';
 export interface LikeC4ViewProps<A extends aux.Any> {
     /**
      * View to display.

package/dist/bundle/ReactLikeC4.d.ts

@@ -1,6 +1,6 @@
+import { aux } from '@likec4/core/types';
 import { CSSProperties } from 'react';
 import { LikeC4DiagramProps } from '../LikeC4Diagram';
-import type * as aux from '@likec4/core/types/_aux';
 export type ReactLikeC4Props<A extends aux.Any> = Omit<LikeC4DiagramProps<A>, 'view'> & {
     viewId: aux.ViewId<A>;
     /**

package/dist/bundle/ViewNotFound.js

@@ -4,7 +4,7 @@ const ErrorMessage = ({ children }) => /* @__PURE__ */ jsx(
   "div",
   {
     style: {
-      margin: "1rem 0"
+      margin: "[1rem 0]"
     },
     children: /* @__PURE__ */ jsx(
       "div",

package/dist/bundle/index.d.ts

@@ -2,6 +2,7 @@ export type { ChangeEvent, CustomNodes, DiagramNodeWithNavigate, ElementIconRend
 export { LikeC4View } from './LikeC4View';
 export type { LikeC4BrowserProps, LikeC4ViewProps } from './LikeC4View.props';
 export { ReactLikeC4, type ReactLikeC4Props } from './ReactLikeC4';
-export { LikeC4ModelProvider } from './LikeC4ModelProvider';
+export { LikeC4ProjectsProvider, type LikeC4ProjectsProviderProps } from '../LikeC4ProjectsProvider';
+export { LikeC4ModelProvider, type LikeC4ModelProviderProps } from './LikeC4ModelProvider';
 export { ViewNotFound } from './ViewNotFound';
 export * from '../custom/hooks';

package/dist/bundle/index.js

@@ -1,5 +1,6 @@
 export { LikeC4View } from './LikeC4View.js';
 export { ReactLikeC4 } from './ReactLikeC4.js';
+export { LikeC4ProjectsProvider } from '../LikeC4ProjectsProvider.js';
 export { LikeC4ModelProvider } from './LikeC4ModelProvider.js';
 export { ViewNotFound } from './ViewNotFound.js';
 export { useDiagramEventHandlers } from '../context/DiagramEventHandlers.js';

package/dist/bundle/styles.css.js

@@ -12,7 +12,7 @@ const DefaultTheme = createTheme({
   primaryColor: "indigo",
   cursorType: "pointer",
   defaultRadius: "sm",
-  fontFamily: "var(--fonts-likec4)",
+  fontFamily: "var(--likec4-app-font, var(--likec4-app-font-default))",
   headings: {
     fontWeight: "500",
     sizes: {

package/dist/components/ErrorFallback.js

@@ -6,7 +6,7 @@ import IconX from '../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1
 
 function ErrorFallback({ error, resetErrorBoundary }) {
   const errorString = error instanceof Error ? error.message : "Unknown error";
-  return /* @__PURE__ */ jsx(Box, { pos: "fixed", top: 0, left: 0, w: "100%", p: 0, style: { zIndex: 1e3 }, children: /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx(Box, { pos: "fixed", top: "0", left: "0", w: "100%", p: "0", style: { zIndex: 1e3 }, children: /* @__PURE__ */ jsxs(
     Notification,
     {
       icon: /* @__PURE__ */ jsx(IconX, { style: { width: 16, height: 16 } }),

package/dist/components/GithubIcon.d.ts

@@ -0,0 +1,2 @@
+import { SVGProps, ForwardRefExoticComponent, RefAttributes } from 'react';
+export declare const GithubIcon: ForwardRefExoticComponent<Omit<SVGProps<SVGSVGElement>, "ref"> & RefAttributes<SVGSVGElement>>;

package/dist/components/GithubIcon.js

@@ -0,0 +1,17 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+
+const GithubIcon = forwardRef((props, ref) => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    height: "24",
+    width: "24",
+    fill: "currentColor",
+    ...props,
+    viewBox: "0 0 24 24",
+    ref,
+    children: /* @__PURE__ */ jsx("path", { d: "M12 1C5.923 1 1 5.923 1 12c0 4.867 3.149 8.979 7.521 10.436.55.096.756-.233.756-.522 0-.262-.013-1.128-.013-2.049-2.764.509-3.479-.674-3.699-1.292-.124-.317-.66-1.293-1.127-1.554-.385-.207-.936-.715-.014-.729.866-.014 1.485.797 1.691 1.128.99 1.663 2.571 1.196 3.204.907.096-.715.385-1.196.701-1.471-2.448-.275-5.005-1.224-5.005-5.432 0-1.196.426-2.186 1.128-2.956-.111-.275-.496-1.402.11-2.915 0 0 .921-.288 3.024 1.128a10.193 10.193 0 0 1 2.75-.371c.936 0 1.871.123 2.75.371 2.104-1.43 3.025-1.128 3.025-1.128.605 1.513.221 2.64.111 2.915.701.77 1.127 1.747 1.127 2.956 0 4.222-2.571 5.157-5.019 5.432.399.344.743 1.004.743 2.035 0 1.471-.014 2.654-.014 3.025 0 .289.206.632.756.522C19.851 20.979 23 16.854 23 12c0-6.077-4.922-11-11-11Z" })
+  }
+));
+
+export { GithubIcon };

package/dist/components/Link.d.ts

@@ -1,5 +1,6 @@
 import { Link as LinkData } from '@likec4/core';
-export declare function Link({ value, size, }: {
-    size?: 'sm' | 'md';
+import { BadgeProps } from '@mantine/core';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+export declare const Link: ForwardRefExoticComponent<Omit<BadgeProps, "children" | "classNames"> & {
     value: LinkData;
-}): import("react/jsx-runtime").JSX.Element;
+} & RefAttributes<HTMLDivElement>>;