@likec4/diagram 1.41.0 → 1.42.0

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

@@ -1,145 +0,0 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { Popover, PopoverTarget, PopoverDropdown, Group, ActionIconGroup } from '@mantine/core';
-import { useDiagram } from '../../../hooks/useDiagram.js';
-import { Tooltip, ActionIcon } from './_shared.js';
-import IconLayoutCollage from '../../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutCollage.js';
-import IconLayoutBoardSplit from '../../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutBoardSplit.js';
-import IconLayoutAlignLeft from '../../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutAlignLeft.js';
-import IconLayoutAlignCenter from '../../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutAlignCenter.js';
-import IconLayoutAlignRight from '../../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutAlignRight.js';
-import IconLayoutAlignTop from '../../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutAlignTop.js';
-import IconLayoutAlignMiddle from '../../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutAlignMiddle.js';
-import IconLayoutAlignBottom from '../../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutAlignBottom.js';
-import IconRouteOff from '../../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconRouteOff.js';
-
-const Action = ({
-  label,
-  icon,
-  onClick
-}) => /* @__PURE__ */ jsx(Tooltip, { label, withinPortal: false, position: "top", children: /* @__PURE__ */ jsx(ActionIcon, { onClick, children: icon }) });
-const ManualLayoutToolsButton = (props) => {
-  const diagram = useDiagram();
-  return /* @__PURE__ */ jsxs(
-    Popover,
-    {
-      position: "right-start",
-      clickOutsideEvents: [
-        "pointerdown"
-      ],
-      radius: "xs",
-      shadow: "lg",
-      offset: {
-        mainAxis: 10
-      },
-      ...props,
-      children: [
-        /* @__PURE__ */ jsx(PopoverTarget, { children: /* @__PURE__ */ jsx(Tooltip, { label: "Manual layouting tools", withinPortal: false, position: "top-end", children: /* @__PURE__ */ jsx(ActionIcon, { children: /* @__PURE__ */ jsx(IconLayoutCollage, {}) }) }) }),
-        /* @__PURE__ */ jsx(PopoverDropdown, { p: 0, children: /* @__PURE__ */ jsxs(Group, { gap: "xs", children: [
-          /* @__PURE__ */ jsxs(ActionIconGroup, { pos: "relative", children: [
-            /* @__PURE__ */ jsx(
-              Action,
-              {
-                label: "Align in columns",
-                icon: /* @__PURE__ */ jsx(IconLayoutBoardSplit, {}),
-                onClick: (e) => {
-                  e.stopPropagation();
-                  diagram.align("Column");
-                }
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              Action,
-              {
-                label: "Align left",
-                icon: /* @__PURE__ */ jsx(IconLayoutAlignLeft, {}),
-                onClick: (e) => {
-                  e.stopPropagation();
-                  diagram.align("Left");
-                }
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              Action,
-              {
-                label: "Align center",
-                icon: /* @__PURE__ */ jsx(IconLayoutAlignCenter, {}),
-                onClick: (e) => {
-                  e.stopPropagation();
-                  diagram.align("Center");
-                }
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              Action,
-              {
-                label: "Align right",
-                icon: /* @__PURE__ */ jsx(IconLayoutAlignRight, {}),
-                onClick: (e) => {
-                  e.stopPropagation();
-                  diagram.align("Right");
-                }
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              Action,
-              {
-                label: "Align in rows",
-                icon: /* @__PURE__ */ jsx(IconLayoutBoardSplit, { style: { transform: "rotate(90deg)" } }),
-                onClick: (e) => {
-                  e.stopPropagation();
-                  diagram.align("Row");
-                }
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              Action,
-              {
-                label: "Align top",
-                icon: /* @__PURE__ */ jsx(IconLayoutAlignTop, {}),
-                onClick: (e) => {
-                  e.stopPropagation();
-                  diagram.align("Top");
-                }
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              Action,
-              {
-                label: "Align middle",
-                icon: /* @__PURE__ */ jsx(IconLayoutAlignMiddle, {}),
-                onClick: (e) => {
-                  e.stopPropagation();
-                  diagram.align("Middle");
-                }
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              Action,
-              {
-                label: "Align bottom",
-                icon: /* @__PURE__ */ jsx(IconLayoutAlignBottom, {}),
-                onClick: (e) => {
-                  e.stopPropagation();
-                  diagram.align("Bottom");
-                }
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsx(
-            Action,
-            {
-              label: "Reset all control points",
-              icon: /* @__PURE__ */ jsx(IconRouteOff, {}),
-              onClick: (e) => {
-                e.stopPropagation();
-                diagram.resetEdgeControlPoints();
-              }
-            }
-          )
-        ] }) })
-      ]
-    }
-  );
-};
-
-export { ManualLayoutToolsButton };

package/dist/likec4diagram/ui/controls/NavigationButtons.d.ts

@@ -1 +0,0 @@
-export declare const NavigationButtons: () => import("react/jsx-runtime").JSX.Element;

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

@@ -1,61 +0,0 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { AnimatePresence, m } from 'motion/react';
-import { useDiagram, useDiagramContext } from '../../../hooks/useDiagram.js';
-import { ActionIcon } from './_shared.js';
-import IconChevronLeft from '../../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronLeft.js';
-import IconChevronRight from '../../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronRight.js';
-
-const NavigationButtons = () => {
-  const diagram = useDiagram();
-  const {
-    hasStepBack,
-    hasStepForward
-  } = useDiagramContext((s) => ({
-    hasStepBack: s.navigationHistory.currentIndex > 0,
-    hasStepForward: s.navigationHistory.currentIndex < s.navigationHistory.history.length - 1
-  }));
-  return /* @__PURE__ */ jsxs(AnimatePresence, { children: [
-    hasStepBack && /* @__PURE__ */ jsx(
-      ActionIcon,
-      {
-        variant: "subtle",
-        component: m.button,
-        onClick: (e) => {
-          e.stopPropagation();
-          diagram.navigate("back");
-        },
-        layout: true,
-        initial: { opacity: 0.05, transform: "translateX(-10px)" },
-        animate: { opacity: 1, transform: "translateX(0)" },
-        exit: {
-          opacity: 0.05,
-          transform: "translateX(-10px)"
-        },
-        children: /* @__PURE__ */ jsx(IconChevronLeft, {})
-      },
-      "back"
-    ),
-    hasStepForward && /* @__PURE__ */ jsx(
-      ActionIcon,
-      {
-        variant: "subtle",
-        component: m.button,
-        layout: true,
-        initial: { opacity: 0.05, transform: "translateX(10px)" },
-        animate: { opacity: 1, transform: "translateX(0)" },
-        exit: {
-          opacity: 0,
-          transform: "translateX(10px)"
-        },
-        onClick: (e) => {
-          e.stopPropagation();
-          diagram.navigate("forward");
-        },
-        children: /* @__PURE__ */ jsx(IconChevronRight, {})
-      },
-      "forward"
-    )
-  ] });
-};
-
-export { NavigationButtons };

package/dist/likec4diagram/ui/controls/ToggleReadonly.d.ts

@@ -1 +0,0 @@
-export declare const ToggleReadonly: () => import("react/jsx-runtime").JSX.Element | null;

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

@@ -1,29 +0,0 @@
-import { jsx } from 'react/jsx-runtime';
-import { useDiagramContext, useDiagram } from '../../../hooks/useDiagram.js';
-import { Tooltip, ActionIcon } from './_shared.js';
-import IconLock from '../../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconLock.js';
-import IconLockOpen2 from '../../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconLockOpen2.js';
-
-const selector = (state) => ({
-  visible: state.features.enableReadOnly !== true,
-  isReadOnly: state.toggledFeatures.enableReadOnly ?? state.features.enableReadOnly
-});
-const ToggleReadonly = () => {
-  const { visible, isReadOnly } = useDiagramContext(selector);
-  const diagram = useDiagram();
-  if (!visible) {
-    return null;
-  }
-  return /* @__PURE__ */ jsx(Tooltip, { label: isReadOnly ? "Enable editing" : "Disable editing", children: /* @__PURE__ */ jsx(
-    ActionIcon,
-    {
-      onClick: (e) => {
-        e.stopPropagation();
-        diagram.toggleFeature("ReadOnly");
-      },
-      children: isReadOnly ? /* @__PURE__ */ jsx(IconLock, {}) : /* @__PURE__ */ jsx(IconLockOpen2, {})
-    }
-  ) });
-};
-
-export { ToggleReadonly };

package/dist/likec4diagram/ui/controls/_shared.d.ts

@@ -1,7 +0,0 @@
-import { ForwardRefExoticComponent, RefAttributes } from 'react';
-import { TooltipProps, PolymorphicComponentProps, ActionIconProps } from '@mantine/core';
-export declare const Tooltip: ForwardRefExoticComponent< TooltipProps & RefAttributes<HTMLDivElement> & {
-    component?: any;
-    renderRoot?: (props: Record<string, any>) => React.ReactNode;
-}>;
-export declare const ActionIcon: <L = "button">(props: PolymorphicComponentProps<L, ActionIconProps>) => React.ReactElement;

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

@@ -1,22 +0,0 @@
-import { Tooltip as Tooltip$1, ActionIcon as ActionIcon$1 } from '@mantine/core';
-
-const Tooltip = Tooltip$1.withProps({
-  color: "dark",
-  fz: "xs",
-  position: "right",
-  openDelay: 600,
-  closeDelay: 120,
-  label: "",
-  children: null,
-  offset: 8,
-  withinPortal: false
-});
-const ActionIcon = ActionIcon$1.withProps({
-  classNames: {
-    root: "action-icon"
-  },
-  variant: "default",
-  color: "gray"
-});
-
-export { ActionIcon, Tooltip };

package/dist/likec4diagram/ui/controls/styles.css.d.ts

@@ -1,8 +0,0 @@
-export declare const navigationButtons: string;
-export declare const panel: string;
-export declare const actionIconGroup: string;
-export declare const autolayoutIcon: string;
-export declare const autolayoutButton: string;
-export declare const autolayoutIndicator: string;
-export declare const spacingSliderBody: string;
-export declare const spacingSliderThumb: string;

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

@@ -1,79 +0,0 @@
-import { css } from '@likec4/styles/css';
-
-const navigationButtons = css({
-  gap: "xxs",
-  _empty: {
-    display: "none"
-  }
-});
-const panel = css({
-  top: "md",
-  left: "md",
-  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.d.ts

@@ -1,3 +0,0 @@
-export declare const card: string;
-export declare const title: string;
-export declare const description: string;

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

@@ -1,49 +0,0 @@
-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.d.ts

@@ -1 +0,0 @@
-export declare function DiagramTitlePanel(): import("react/jsx-runtime").JSX.Element;

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

@@ -1,164 +0,0 @@
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { cx } from '@likec4/styles/css';
-import { Card, CardSection, Button, Group, Text, Spoiler, Stack } from '@mantine/core';
-import { useLocalStorage } from '@mantine/hooks';
-import { AnimatePresence, m } from 'motion/react';
-import { Link } from '../../../components/Link.js';
-import { useDiagramContext } from '../../../hooks/useDiagram.js';
-import { useOptionalCurrentViewModel } from '../../../likec4model/useCurrentViewModel.js';
-import { card, title, description } from './DiagramTitlePanel.css.js';
-import IconMenu from '../../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconMenu.js';
-import { MarkdownBlock } from '../../../base/primitives/MarkdownBlock.js';
-
-function selector(context) {
-  return {
-    // id: context.view.id,
-    // title: context.view.title ?? 'untitled',
-    // description: RichText.from(context.view.description),
-    // links: context.view.links,
-    isNotActiveWalkthrough: context.activeWalkthrough === null
-  };
-}
-function DiagramTitlePanel() {
-  const view = useOptionalCurrentViewModel();
-  const { isNotActiveWalkthrough } = useDiagramContext(selector);
-  const [isCollapsed, setCollapsed] = useLocalStorage({
-    key: "diagram-title-webview-collapsed",
-    defaultValue: false
-  });
-  const title$1 = view?.title ?? "untitled";
-  const toggle = () => setCollapsed((v) => !v);
-  return /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: view && isNotActiveWalkthrough && /* @__PURE__ */ jsx(
-    m.div,
-    {
-      initial: { opacity: 0.05, scale: 0.7 },
-      animate: { opacity: 1, scale: 1 },
-      exit: {
-        opacity: 0.05,
-        scale: 0.6
-      },
-      className: cx("react-flow__panel", "left", "bottom"),
-      style: {
-        transformOrigin: "left center"
-      },
-      children: /* @__PURE__ */ jsxs(
-        Card,
-        {
-          className: card,
-          withBorder: !isCollapsed,
-          p: isCollapsed ? "sm" : "md",
-          onDoubleClick: (e) => e.stopPropagation(),
-          children: [
-            isCollapsed && /* @__PURE__ */ jsx(CardSection, { children: /* @__PURE__ */ jsx(
-              Button,
-              {
-                fullWidth: true,
-                justify: "stretch",
-                size: "md",
-                radius: "0",
-                variant: "subtle",
-                color: "gray",
-                onClick: toggle,
-                fw: 500,
-                fz: "sm",
-                tabIndex: -1,
-                children: title$1
-              }
-            ) }),
-            !isCollapsed && /* @__PURE__ */ jsxs(Fragment, { children: [
-              /* @__PURE__ */ jsx(CardSection, { mb: "xs", children: /* @__PURE__ */ jsx(
-                Button,
-                {
-                  fullWidth: true,
-                  size: "xs",
-                  h: "sm",
-                  py: 2,
-                  radius: "0",
-                  variant: "subtle",
-                  color: "gray",
-                  onClick: toggle,
-                  tabIndex: -1,
-                  children: /* @__PURE__ */ jsx(IconMenu, { size: 11, opacity: 0.7 })
-                }
-              ) }),
-              /* @__PURE__ */ jsxs(Group, { justify: "stretch", wrap: "nowrap", mb: "sm", children: [
-                /* @__PURE__ */ jsx(
-                  Text,
-                  {
-                    component: "div",
-                    flex: "1",
-                    size: "md",
-                    fw: 500,
-                    lh: 1.1,
-                    className: title,
-                    children: title$1
-                  }
-                ),
-                /* @__PURE__ */ jsxs(
-                  Text,
-                  {
-                    hidden: isCollapsed,
-                    component: "div",
-                    flex: "0 0 auto",
-                    inline: true,
-                    size: "xs",
-                    fz: 9,
-                    fw: 500,
-                    c: "dimmed",
-                    style: {
-                      userSelect: "all"
-                    },
-                    children: [
-                      /* @__PURE__ */ jsxs("span", { style: { userSelect: "none" }, children: [
-                        "id:",
-                        " "
-                      ] }),
-                      view.id
-                    ]
-                  }
-                )
-              ] }),
-              view.description.nonEmpty && /* @__PURE__ */ jsx(
-                Spoiler,
-                {
-                  maxHeight: 60,
-                  showLabel: /* @__PURE__ */ jsx(Button, { component: "div", color: "gray", variant: "light", fz: "10", size: "compact-xs", tabIndex: -1, children: "show more" }),
-                  hideLabel: /* @__PURE__ */ jsx(Button, { component: "div", color: "gray", variant: "light", fz: "10", size: "compact-xs", tabIndex: -1, children: "hide" }),
-                  children: /* @__PURE__ */ jsx(
-                    MarkdownBlock,
-                    {
-                      className: description,
-                      textScale: 0.9,
-                      value: view.description
-                    }
-                  )
-                }
-              ),
-              view.description.isEmpty && /* @__PURE__ */ jsx(
-                Text,
-                {
-                  component: "div",
-                  size: "xs",
-                  c: "dimmed",
-                  children: "no description"
-                }
-              ),
-              view.links.length > 0 && /* @__PURE__ */ jsx(
-                Stack,
-                {
-                  mt: "xs",
-                  gap: 4,
-                  justify: "stretch",
-                  align: "stretch",
-                  children: view.links.map((link) => /* @__PURE__ */ jsx(Link, { value: link }, link.url))
-                }
-              )
-            ] })
-          ]
-        }
-      )
-    }
-  ) });
-}
-
-export { DiagramTitlePanel };

package/dist/likec4diagram/ui/diagram-title/Link.d.ts

@@ -1,4 +0,0 @@
-import { Link } from '@likec4/core';
-export declare function Link({ link }: {
-    link: Link;
-}): import("react/jsx-runtime").JSX.Element;

package/dist/likec4diagram/ui/walkthrough/DynamicViewWalkthrough.css.d.ts

@@ -1,4 +0,0 @@
-export declare const container: string;
-export declare const buttons: string;
-export declare const btn: string;
-export declare const parallelStateFrame: string;

package/dist/likec4diagram/ui/walkthrough/DynamicViewWalkthrough.css.js

@@ -1,67 +0,0 @@
-import { css } from '@likec4/styles/css';
-
-const container = css({
-  position: "absolute",
-  bottom: "xxs",
-  left: "[50%]",
-  transform: "translateX(-50%)",
-  padding: "[0px]",
-  margin: "[0px]",
-  display: "flex",
-  flexDirection: "column",
-  gap: "[0.4rem]",
-  alignItems: "center",
-  md: {
-    gap: "[0.6rem]"
-  }
-});
-const tablerIcons = {
-  "& .tabler-icon": {
-    width: "0.85em",
-    height: "0.85em"
-  }
-};
-const buttons = css({
-  backdropFilter: "blur(8px)",
-  transition: "all 175ms ease-in",
-  _hover: {
-    transitionTimingFunction: "out",
-    transform: "scale(1.1)"
-  },
-  _active: {
-    transitionDuration: "100ms",
-    transform: "scale(0.98) translateY(3px)"
-  },
-  ...tablerIcons
-});
-const btn = css({
-  transition: "all 175ms ease-in",
-  background: "mantine.colors.primary.filled/65",
-  _hover: {
-    background: "mantine.colors.primary.filledHover/65"
-  },
-  _light: {
-    background: "mantine.colors.primary.filled/85",
-    _hover: {
-      background: "mantine.colors.primary.filledHover/85"
-    }
-  },
-  ...tablerIcons
-});
-const parallelStateFrame = css({
-  position: "absolute",
-  margin: "0",
-  padding: "0",
-  top: "0",
-  left: "0",
-  width: "100%",
-  height: "100%",
-  border: `2px solid`,
-  borderColor: "mantine.colors.orange[6]",
-  pointerEvents: "none",
-  md: {
-    borderWidth: 4
-  }
-});
-
-export { btn, buttons, container, parallelStateFrame };

package/dist/likec4diagram/ui/walkthrough/DynamicViewWalkthrough.d.ts

@@ -1 +0,0 @@
-export declare function DynamicViewWalkthrough(): import("react/jsx-runtime").JSX.Element;