@likec4/diagram 1.26.1 → 1.27.0

package/dist/likec4diagram/ui/controls/ManualLayoutToolsButton.js

@@ -1,8 +1,9 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { Popover, PopoverTarget, PopoverDropdown, Group, ActionIconGroup } from "@mantine/core";
-import { IconLayoutCollage, IconLayoutBoardSplit, IconLayoutAlignLeft, IconLayoutAlignCenter, IconLayoutAlignRight, IconLayoutAlignTop, IconLayoutAlignMiddle, IconLayoutAlignBottom, IconRouteOff } from "@tabler/icons-react";
-import { useDiagram } from "../../../hooks/useDiagram.js";
-import { Tooltip, ActionIcon } from "./_shared.js";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Popover, PopoverTarget, PopoverDropdown, Group, ActionIconGroup } from '@mantine/core';
+import { IconLayoutCollage, IconLayoutBoardSplit, IconLayoutAlignLeft, IconLayoutAlignCenter, IconLayoutAlignRight, IconLayoutAlignTop, IconLayoutAlignMiddle, IconLayoutAlignBottom, IconRouteOff } from '@tabler/icons-react';
+import { useDiagram } from '../../../hooks/useDiagram.js';
+import { Tooltip, ActionIcon } from './_shared.js';
+
 const Action = ({
   label,
   icon,
@@ -132,6 +133,5 @@ const ManualLayoutToolsButton = (props) => {
     }
   );
 };
-export {
-  ManualLayoutToolsButton
-};
+
+export { ManualLayoutToolsButton };

package/dist/likec4diagram/ui/controls/NavigationButtons.js

@@ -1,8 +1,9 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { IconChevronLeft, IconChevronRight } from "@tabler/icons-react";
-import { AnimatePresence, m } from "framer-motion";
-import { useDiagram, useDiagramContext } from "../../../hooks/useDiagram.js";
-import { ActionIcon } from "./_shared.js";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { IconChevronLeft, IconChevronRight } from '@tabler/icons-react';
+import { AnimatePresence, m } from 'framer-motion';
+import { useDiagram, useDiagramContext } from '../../../hooks/useDiagram.js';
+import { ActionIcon } from './_shared.js';
+
 const NavigationButtons = () => {
   const diagram = useDiagram();
   const {
@@ -53,6 +54,5 @@ const NavigationButtons = () => {
     )
   ] });
 };
-export {
-  NavigationButtons
-};
+
+export { NavigationButtons };

package/dist/likec4diagram/ui/controls/ToggleReadonly.js

@@ -1,7 +1,8 @@
-import { jsx } from "react/jsx-runtime";
-import { IconLock, IconLockOpen2 } from "@tabler/icons-react";
-import { useDiagramContext, useDiagram } from "../../../hooks/useDiagram.js";
-import { Tooltip, ActionIcon } from "./_shared.js";
+import { jsx } from 'react/jsx-runtime';
+import { IconLock, IconLockOpen2 } from '@tabler/icons-react';
+import { useDiagramContext, useDiagram } from '../../../hooks/useDiagram.js';
+import { Tooltip, ActionIcon } from './_shared.js';
+
 const selector = (state) => ({
   visible: state.features.enableReadOnly !== true,
   isReadOnly: state.toggledFeatures.enableReadOnly ?? state.features.enableReadOnly
@@ -23,6 +24,5 @@ const ToggleReadonly = () => {
     }
   ) });
 };
-export {
-  ToggleReadonly
-};
+
+export { ToggleReadonly };

package/dist/likec4diagram/ui/controls/_shared.js

@@ -1,4 +1,5 @@
-import { Tooltip as Tooltip$1, ActionIcon as ActionIcon$1 } from "@mantine/core";
+import { Tooltip as Tooltip$1, ActionIcon as ActionIcon$1 } from '@mantine/core';
+
 const Tooltip = Tooltip$1.withProps({
   color: "dark",
   fz: "xs",
@@ -17,7 +18,5 @@ const ActionIcon = ActionIcon$1.withProps({
   variant: "default",
   color: "gray"
 });
-export {
-  ActionIcon,
-  Tooltip
-};
+
+export { ActionIcon, Tooltip };

package/dist/likec4diagram/ui/controls/styles.css.js

@@ -1,17 +1,79 @@
-/* empty css                          */
-var navigationButtons = "o1xx0f0";
-var panel = "o1xx0f1";
-var actionIconGroup = "o1xx0f2";
-var autolayoutButton = "o1xx0f4";
-var autolayoutIndicator = "o1xx0f5";
-var spacingSliderBody = "o1xx0f6";
-var spacingSliderThumb = "o1xx0f7";
-export {
-  actionIconGroup,
-  autolayoutButton,
-  autolayoutIndicator,
-  navigationButtons,
-  panel,
-  spacingSliderBody,
-  spacingSliderThumb
-};
+import { css } from '@likec4/styles/css';
+
+const navigationButtons = css({
+  gap: "micro",
+  _empty: {
+    display: "none"
+  }
+});
+const panel = css({
+  top: "1rem",
+  left: "1rem",
+  margin: 0,
+  pointerEvents: "none",
+  "& :where(button, .action-icon, [role='dialog'])": {
+    pointerEvents: "all"
+  },
+  ["& .action-icon"]: {
+    ["--ai-size"]: "2rem"
+  },
+  ["& .tabler-icon"]: {
+    width: "65%",
+    height: "65%"
+  },
+  _reduceGraphics: {
+    "& .action-icon": {
+      "--ai-radius": "0px"
+    }
+  }
+});
+const actionIconGroup = css({
+  shadow: {
+    base: "md",
+    _whenPanning: "none"
+  }
+});
+css({
+  ["& .tabler-icon"]: {
+    width: "65%",
+    height: "65%"
+  }
+});
+const autolayoutButton = css({
+  flex: "1 1 40%",
+  textAlign: "center",
+  fontWeight: 500,
+  padding: "4px 6px",
+  fontSize: "11px",
+  zIndex: 1
+});
+const autolayoutIndicator = css({
+  background: "mantine.colors.gray[2]",
+  borderRadius: "sm",
+  border: `1px solid`,
+  borderColor: "mantine.colors.gray[4]",
+  _dark: {
+    background: "mantine.colors.dark[5]",
+    borderColor: "mantine.colors.dark[4]"
+  }
+});
+const spacingSliderBody = css({
+  position: "relative",
+  borderRadius: "sm",
+  background: "mantine.colors.gray[3]",
+  boxShadow: "inset 1px 1px 3px 0px #00000024",
+  _dark: {
+    background: "mantine.colors.dark[7]"
+  }
+});
+const spacingSliderThumb = css({
+  position: "absolute",
+  width: 8,
+  height: 8,
+  border: `2px solid`,
+  borderColor: "mantine.colors.gray[5]",
+  borderRadius: 3,
+  transform: "translate(-50%, -50%)"
+});
+
+export { actionIconGroup, autolayoutButton, autolayoutIndicator, navigationButtons, panel, spacingSliderBody, spacingSliderThumb };

package/dist/likec4diagram/ui/diagram-title/DiagramTitlePanel.css.js

@@ -1,9 +1,49 @@
-/* empty css                                     */
-var card = "_1wkb4qe0";
-var title = "_1wkb4qe1";
-var description = "_1wkb4qe2";
-export {
-  card,
-  description,
-  title
-};
+import { css } from '@likec4/styles/css';
+
+const card = css({
+  cursor: "default",
+  minWidth: 200,
+  maxWidth: "calc(100vw - 16px)",
+  width: "auto",
+  // backgroundColor: 'mantine.colors.body',
+  borderRadius: "sm",
+  sm: {
+    minWidth: 250,
+    maxWidth: "90vw"
+  },
+  md: {
+    minWidth: 350,
+    maxWidth: "70vw"
+  },
+  shadow: {
+    base: "xs",
+    _whenPanning: "none"
+  },
+  backgroundColor: {
+    base: "mantine.colors.body/80",
+    _dark: "mantine.colors.dark[6]/80",
+    _whenPanning: "mantine.colors.body"
+  }
+  // _dark: {
+  //   backgroundColor: 'mantine.colors.dark[6]',
+  // },
+  // _noReduceGraphics: {
+  //   borderRadius: 'sm',
+  //   backgroundColor: `mantine.colors.body/80`,
+  //   // WebkitBackdropFilter: fallbackVar(vars.safariAnimationHook, 'blur(8px)'),
+  //   // backdropFilter: fallbackVar(vars.safariAnimationHook, 'blur(8px)'),
+  //   _dark: {
+  //     backgroundColor: `mantine.colors.dark[6]/80`,
+  //   },
+  // },
+});
+const title = css({});
+const description = css({
+  whiteSpaceCollapse: "preserve-breaks",
+  color: "mantine.colors.gray[7]",
+  _dark: {
+    color: "mantine.colors.gray[5]"
+  }
+});
+
+export { card, description, title };

package/dist/likec4diagram/ui/diagram-title/DiagramTitlePanel.js

@@ -1,12 +1,13 @@
-import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { Card, CardSection, Button, Group, Text, Spoiler, Stack } from "@mantine/core";
-import { useLocalStorage } from "@mantine/hooks";
-import { IconMenu } from "@tabler/icons-react";
-import clsx from "clsx";
-import { AnimatePresence, m } from "framer-motion";
-import { Link } from "../../../components/Link.js";
-import { useDiagramContext } from "../../../hooks/useDiagram.js";
-import { card, title, description } from "./DiagramTitlePanel.css.js";
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { Card, CardSection, Button, Group, Text, Spoiler, Stack } from '@mantine/core';
+import { useLocalStorage } from '@mantine/hooks';
+import { IconMenu } from '@tabler/icons-react';
+import clsx from 'clsx';
+import { AnimatePresence, m } from 'framer-motion';
+import { Link } from '../../../components/Link.js';
+import { useDiagramContext } from '../../../hooks/useDiagram.js';
+import { card, title, description } from './DiagramTitlePanel.css.js';
+
 function DiagramTitlePanel() {
   const { id, title: title$1, description: description$1, links, isNotActiveWalkthrough } = useDiagramContext((s) => ({
     id: s.view.id,
@@ -153,6 +154,5 @@ function DiagramTitlePanel() {
     }
   ) });
 }
-export {
-  DiagramTitlePanel
-};
+
+export { DiagramTitlePanel };

package/dist/likec4diagram/ui/notation/NotationPanel.css.js

@@ -1,15 +1,85 @@
-/* empty css                                 */
-var container = "r9c4gg0";
-var icon = "r9c4gg1";
-var card = "r9c4gg2";
-var tabPanel = "r9c4gg3";
-var elementNotation = "r9c4gg4";
-var shapeBadge = "r9c4gg6";
-export {
-  card,
-  container,
-  elementNotation,
-  icon,
-  shapeBadge,
-  tabPanel
-};
+import { css } from '@likec4/styles/css';
+
+const container = css({
+  bottom: 0,
+  right: 0,
+  padding: 8,
+  margin: 0
+});
+const icon = css({
+  ["--ai-radius"]: "0px",
+  _noReduceGraphics: {
+    ["--ai-radius"]: "{radii.md}"
+  }
+});
+const card = css({
+  cursor: "default",
+  userSelect: "none",
+  minWidth: 200,
+  maxWidth: "calc(100vw - 20px)",
+  backgroundColor: `mantine.colors.body/80`,
+  // WebkitBackdropFilter: fallbackVar(vars.safariAnimationHook, 'blur(8px)'),
+  // backdropFilter: fallbackVar(vars.safariAnimationHook, 'blur(8px)'),
+  sm: {
+    minWidth: 300,
+    maxWidth: `65vw`
+  },
+  md: {
+    maxWidth: `40vw`
+  },
+  _dark: {
+    backgroundColor: `mantine.colors.dark[6]/80`
+  }
+});
+const tabPanel = css({
+  padding: "2xs"
+});
+const elementNotation = css({
+  backgroundColor: "transparent",
+  transition: "all 100ms ease-in",
+  // WebkitBackdropFilter: fallbackVar(vars.safariAnimationHook, 'blur(8px)'),
+  // backdropFilter: fallbackVar(vars.safariAnimationHook, 'blur(8px)'),
+  // vars: {
+  //   // [stokeFillMix]: `color-mix(in srgb, ${vars.element.stroke} 90%, ${vars.element.fill})`
+  // },
+  _hover: {
+    transition: "all 120ms ease-out",
+    // backgroundColor:
+    backgroundColor: `mantine.colors.primary[2]/50`
+  },
+  _dark: {
+    _hover: {
+      backgroundColor: `mantine.colors.dark[3]/40`
+    }
+  }
+});
+css({
+  fill: "likec4.palette.fill",
+  stroke: "likec4.palette.stroke",
+  strokeWidth: 1,
+  overflow: "visible",
+  width: "100%",
+  height: "auto",
+  filter: `
+    drop-shadow(0 2px 3px rgb(0 0 0 / 22%))
+    drop-shadow(0 1px 8px rgb(0 0 0 / 10%))
+  `
+});
+const shapeBadge = css({
+  fontWeight: 500,
+  letterSpacing: "0.2px",
+  paddingTop: 0,
+  paddingBottom: 0,
+  textTransform: "lowercase",
+  transition: "all 150ms ease-in-out",
+  cursor: "pointer",
+  ["--badge-radius"]: "2px",
+  ["--badge-fz"]: "9.5px",
+  ["--badge-padding-x"]: "3px",
+  ["--badge-height"]: "13.5px",
+  ["--badge-lh"]: "1"
+  // ['--badge-bg']: vars.element.fill,
+  // ['--badge-color']: vars.element.hiContrast
+});
+
+export { card, container, elementNotation, icon, shapeBadge, tabPanel };

package/dist/likec4diagram/ui/notation/NotationPanel.js

@@ -1,18 +1,20 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import "@likec4/core";
-import { Tooltip, ThemeIcon, ActionIcon, Paper, Tabs, TabsList, TabsTab, TabsPanel, ScrollAreaAutosize, Stack, Card, Group, Box, Badge, Text } from "@mantine/core";
-import { useLocalStorage } from "@mantine/hooks";
-import { IconAlertTriangle, IconHelpCircle, IconArrowDownRight } from "@tabler/icons-react";
-import clsx from "clsx";
-import { AnimatePresence, m } from "framer-motion";
-import { memo, useState } from "react";
-import { ceil, isNonNullish } from "remeda";
-import { useDiagramContext, useDiagram } from "../../../hooks/useDiagram.js";
-import { useXYStore } from "../../../hooks/useXYFlow.js";
-import { container, icon, card, tabPanel, elementNotation, shapeBadge } from "./NotationPanel.css.js";
-import { useMantinePortalProps } from "../../../hooks/useMantinePortalProps.js";
-import { ElementShape } from "../../../base/primitives/element/ElementShape.js";
-import { vars } from "../../../theme-vars.css.js";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import '@likec4/core';
+import { cx, css } from '@likec4/styles/css';
+import { token } from '@likec4/styles/tokens';
+import { Tooltip, ThemeIcon, ActionIcon, Paper, Tabs, TabsList, TabsTab, TabsPanel, ScrollAreaAutosize, Stack, Card, Group, Box, Badge, Text } from '@mantine/core';
+import { useLocalStorage } from '@mantine/hooks';
+import { IconAlertTriangle, IconHelpCircle, IconArrowDownRight } from '@tabler/icons-react';
+import clsx from 'clsx';
+import { AnimatePresence, m } from 'framer-motion';
+import { memo, useState } from 'react';
+import { ceil, isNonNullish } from 'remeda';
+import { useDiagramContext, useDiagram } from '../../../hooks/useDiagram.js';
+import { useXYStore } from '../../../hooks/useXYFlow.js';
+import { container, icon, card, tabPanel, shapeBadge, elementNotation } from './NotationPanel.css.js';
+import { useMantinePortalProps } from '../../../hooks/useMantinePortalProps.js';
+import { ElementShape } from '../../../base/primitives/element/ElementShape.js';
+
 const ElementNotation = ({ value }) => {
   const {
     title,
@@ -29,10 +31,12 @@ const ElementNotation = ({ value }) => {
       shadow: "none",
       px: "xs",
       py: "sm",
-      className: elementNotation,
-      mod: {
-        "likec4-color": color
-      },
+      className: cx(
+        elementNotation,
+        css({
+          likec4Palette: color
+        })
+      ),
       onMouseEnter: () => {
         setOnlyKind(null);
       },
@@ -79,7 +83,7 @@ const ElementNotation = ({ value }) => {
                     setOnlyKind(null);
                   },
                   opacity: isNonNullish(onlyKind) && onlyKind !== kind ? 0.25 : 1,
-                  color: isNonNullish(onlyKind) && onlyKind !== kind ? "gray" : vars.element.fill,
+                  color: isNonNullish(onlyKind) && onlyKind !== kind ? "gray" : token("colors.likec4.palette.fill"),
                   children: kind
                 },
                 kind
@@ -104,15 +108,12 @@ const ElementNotation = ({ value }) => {
     }
   );
 };
-const selector = (s) => {
-  var _a;
-  return {
-    id: s.view.id,
-    notations: ((_a = s.view.notation) == null ? void 0 : _a.elements) ?? [],
-    isVisible: true
-    // isVisible: isNullish(s.focusedNodeId ?? s.activeWalkthrough),
-  };
-};
+const selector = (s) => ({
+  id: s.view.id,
+  notations: s.view.notation?.elements ?? [],
+  isVisible: true
+  // isVisible: isNullish(s.focusedNodeId ?? s.activeWalkthrough),
+});
 const NotationPanel = memo(() => {
   const height = useXYStore((s) => s.height);
   const {
@@ -236,6 +237,5 @@ const NotationPanel = memo(() => {
     )
   ] });
 });
-export {
-  NotationPanel
-};
+
+export { NotationPanel };

package/dist/likec4diagram/ui/search/ElementsColumn.css.d.ts

@@ -1,15 +1,10 @@
 export { focusable } from './_shared.css';
-export declare const treeContainer: string;
 export declare const treeNode: string;
 export declare const treeRoot: string;
 export declare const treeLabel: string;
 export declare const treeSubtree: string;
-export declare const iconSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 export declare const elementExpandIcon: string;
-export declare const elementButton: string;
 export declare const elementTitleAndId: string;
-export declare const elementTitle: string;
 export declare const elementId: string;
-export declare const elementDescription: string;
 export declare const elementIcon: string;
 export declare const elementViewsCount: string;

package/dist/likec4diagram/ui/search/ElementsColumn.css.js

@@ -1,30 +1,70 @@
-/* empty css                           */
-/* empty css                                  */
-var focusable = "_1cfw8gr4";
-var treeNode = "basone1";
-var treeRoot = "basone2";
-var treeLabel = "basone3";
-var treeSubtree = "basone4";
-var elementExpandIcon = "basone5";
-var elementButton = "basone6 _1cfw8gr3";
-var elementTitleAndId = "basone7";
-var elementTitle = "basone8 _1cfw8gr5";
-var elementId = "basone9";
-var elementDescription = "basonea _1cfw8gr6";
-var elementIcon = "basoneb";
-var elementViewsCount = "basonec";
-export {
-  elementButton,
-  elementDescription,
-  elementExpandIcon,
-  elementIcon,
-  elementId,
-  elementTitle,
-  elementTitleAndId,
-  elementViewsCount,
-  focusable,
-  treeLabel,
-  treeNode,
-  treeRoot,
-  treeSubtree
-};
+import { css } from '@likec4/styles/css';
+import { container } from '@likec4/styles/patterns';
+
+const whenContainerIsNarrow = `@container likec4-tree (max-width: 450px)`;
+const treeNode = css({
+  outline: "none",
+  marginBottom: "8px"
+});
+const treeRoot = css(
+  container.raw({
+    containerName: "likec4-tree"
+  }),
+  {
+    overflow: "hidden",
+    containerType: "inline-size",
+    height: "100%"
+  }
+);
+const treeLabel = css({
+  display: "flex",
+  alignItems: "baseline",
+  outline: "none !important",
+  gap: "4px"
+});
+const treeSubtree = css({
+  marginTop: "8px"
+});
+const elementExpandIcon = css({
+  color: "mantine.colors.dimmed"
+});
+const elementTitleAndId = css({
+  [whenContainerIsNarrow]: {
+    flexDirection: "column-reverse",
+    alignItems: "flex-start",
+    gap: 2
+  }
+});
+const elementId = css({
+  // color: `[var(${descriptionColor}, {colors.mantine.colors.dimmed})]`,
+  fontSize: "10px",
+  lineHeight: "1.3",
+  display: "block",
+  fontWeight: 500,
+  whiteSpace: "nowrap",
+  padding: "1px 5px",
+  borderRadius: "4px",
+  background: `mantine.colors.dark[9]/30`,
+  _light: {
+    background: `mantine.colors.gray[3]/20`
+  }
+});
+const elementIcon = css({
+  ["--likec4-icon-size"]: "24px",
+  [whenContainerIsNarrow]: {
+    ["--likec4-icon-size"]: "18px"
+  }
+});
+const elementViewsCount = css({
+  flex: 0,
+  // color: `[var(${descriptionColor}, {colors.mantine.colors.dimmed})]`,
+  fontSize: "10px",
+  fontWeight: 500,
+  whiteSpace: "nowrap",
+  lineHeight: "1.1",
+  [whenContainerIsNarrow]: {
+    display: "none"
+  }
+});
+
+export { elementExpandIcon, elementIcon, elementId, elementTitleAndId, elementViewsCount, treeLabel, treeNode, treeRoot, treeSubtree };