@likec4/diagram 1.34.1 → 1.35.0

package/dist/navigationpanel/NavigationPanelControls.js

@@ -0,0 +1,134 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { cx, css } from '@likec4/styles/css';
+import { hstack } from '@likec4/styles/patterns';
+import { UnstyledButton } from '@mantine/core';
+import { useSelector } from '@xstate/react';
+import { deepEqual } from 'fast-equals';
+import { AnimatePresence } from 'motion/react';
+import * as m from 'motion/react-m';
+import { useEnabledFeatures } from '../context/DiagramFeatures.js';
+import { BreadcrumbsSeparator } from './_common.js';
+import { useNavigationActorRef } from './hooks.js';
+import { breadcrumbTitle } from './styles.css.js';
+import { BurgerButton } from './controls/BurgerButton.js';
+import { NavigationButtons } from './controls/NavigationButtons.js';
+import { StartWalkthroughButton } from './walkthrough/ActiveWalkthroughControls.js';
+import { OpenSource } from './controls/OpenSource.js';
+import { ToggleReadonly } from './controls/ToggleReadonly.js';
+import { SearchControl } from './controls/SearchControl.js';
+
+const selectBreadcrumbs = ({ context }) => {
+  const folder = context.viewModel.folder;
+  return {
+    folders: folder.isRoot ? [] : folder.breadcrumbs.map((s) => ({
+      folderPath: s.path,
+      title: s.title
+    })),
+    viewId: context.viewModel.id,
+    viewTitle: context.viewModel.titleOrUntitled,
+    isDynamicView: context.viewModel.isDynamicView(),
+    hasLinks: context.viewModel.links.length > 0
+  };
+};
+const NavigationPanelControls = () => {
+  const actor = useNavigationActorRef();
+  const {
+    enableSearch,
+    enableNavigationButtons,
+    enableDynamicViewWalkthrough,
+    enableReadOnly
+  } = useEnabledFeatures();
+  const {
+    folders,
+    viewTitle,
+    isDynamicView
+  } = useSelector(actor, selectBreadcrumbs, deepEqual);
+  const folderBreadcrumbs = folders.flatMap(({ folderPath, title }, i) => [
+    /* @__PURE__ */ jsx(
+      UnstyledButton,
+      {
+        component: m.button,
+        className: cx(
+          breadcrumbTitle({ dimmed: true, truncate: true }),
+          "mantine-active",
+          css({
+            maxWidth: "200px"
+          })
+        ),
+        visibleFrom: "sm",
+        title,
+        onMouseEnter: () => actor.send({ type: "breadcrumbs.mouseEnter.folder", folderPath }),
+        onMouseLeave: () => actor.send({ type: "breadcrumbs.mouseLeave.folder", folderPath }),
+        onClick: (e) => {
+          e.stopPropagation();
+          actor.send({ type: "breadcrumbs.click.folder", folderPath });
+        },
+        children: title
+      },
+      folderPath
+    ),
+    /* @__PURE__ */ jsx(BreadcrumbsSeparator, {}, `separator-${i}`)
+  ]);
+  const viewBreadcrumb = /* @__PURE__ */ jsx(
+    UnstyledButton,
+    {
+      component: m.button,
+      className: cx(
+        "mantine-active",
+        breadcrumbTitle({ truncate: true })
+      ),
+      title: viewTitle,
+      onMouseEnter: () => actor.send({ type: "breadcrumbs.mouseEnter.viewtitle" }),
+      onMouseLeave: () => actor.send({ type: "breadcrumbs.mouseLeave.viewtitle" }),
+      onClick: (e) => {
+        e.stopPropagation();
+        actor.send({ type: "breadcrumbs.click.viewtitle" });
+      },
+      children: viewTitle
+    },
+    "view-title"
+  );
+  return /* @__PURE__ */ jsxs(AnimatePresence, { propagate: true, children: [
+    /* @__PURE__ */ jsx(BurgerButton, {}),
+    enableNavigationButtons && /* @__PURE__ */ jsx(NavigationButtons, {}),
+    /* @__PURE__ */ jsxs(
+      m.div,
+      {
+        layout: "position",
+        className: hstack({
+          gap: 3,
+          flexShrink: 1,
+          flexGrow: 1,
+          overflow: "hidden",
+          md: {
+            marginRight: "md"
+          }
+        }),
+        children: [
+          folderBreadcrumbs,
+          viewBreadcrumb
+        ]
+      }
+    ),
+    enableDynamicViewWalkthrough && isDynamicView && /* @__PURE__ */ jsx(StartWalkthroughButton, {}),
+    /* @__PURE__ */ jsxs(
+      m.div,
+      {
+        layout: "position",
+        className: hstack({
+          gap: 1,
+          _empty: {
+            display: "none"
+          }
+        }),
+        children: [
+          /* @__PURE__ */ jsx(OpenSource, {}),
+          /* @__PURE__ */ jsx(ToggleReadonly, {})
+        ]
+      }
+    ),
+    enableSearch && /* @__PURE__ */ jsx(SearchControl, {})
+  ] });
+};
+
+export { NavigationPanelControls };

package/dist/navigationpanel/NavigationPanelDropdown.d.ts

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

package/dist/navigationpanel/NavigationPanelDropdown.js

@@ -0,0 +1,436 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { normalizeViewPath, VIEW_FOLDERS_SEPARATOR } from '@likec4/core/model';
+import { ifilter, ifirst, toArray, compareNaturalHierarchically, nonexhaustive } from '@likec4/core/utils';
+import { cx, css } from '@likec4/styles/css';
+import { HStack, VStack, Box } from '@likec4/styles/jsx';
+import { vstack, hstack } from '@likec4/styles/patterns';
+import { PopoverDropdown, createScopedKeydownHandler, ScrollAreaAutosize, Input, rem, Button, Divider, Highlight, UnstyledButton, Breadcrumbs } from '@mantine/core';
+import { useThrottledCallback, useUncontrolled } from '@mantine/hooks';
+import { useSelector } from '@xstate/react';
+import { deepEqual } from 'fast-equals';
+import { isEmpty, pipe, sort, isArray } from 'remeda';
+import { NavigationLink } from '../components/NavigationLink.js';
+import { useLikeC4Model } from '../likec4model/useLikeC4Model.js';
+import { useNavigationActor, useNavigationActorContext, useNavigationActorRef } from './hooks.js';
+import { breadcrumbTitle } from './styles.css.js';
+import IconSearch from '../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconSearch.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';
+import IconStack2 from '../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconStack2.js';
+import IconZoomScan from '../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconZoomScan.js';
+import IconStarFilled from '../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconStarFilled.js';
+import IconFolderFilled from '../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconFolderFilled.js';
+
+const scopedKeydownHandler = createScopedKeydownHandler({
+  siblingSelector: "[data-likec4-focusable]",
+  parentSelector: "[data-likec4-breadcrumbs-dropdown]",
+  activateOnFocus: false,
+  loop: true,
+  orientation: "vertical"
+});
+function NavigationPanelDropdown() {
+  const actor = useNavigationActor();
+  const searchQuery = useSelector(actor.actorRef, (s) => s.context.searchQuery);
+  const setSearchQuery = useThrottledCallback((value) => {
+    actor.send({ type: "searchQuery.change", value });
+  }, 250);
+  const hasSearchQuery = searchQuery.trim().length >= 2;
+  return /* @__PURE__ */ jsxs(
+    PopoverDropdown,
+    {
+      className: cx(
+        "nowheel",
+        vstack({
+          layerStyle: "likec4.dropdown",
+          gap: "sm",
+          pointerEvents: "all"
+        })
+      ),
+      "data-likec4-breadcrumbs-dropdown": true,
+      onMouseLeave: () => actor.send({ type: "dropdown.mouseLeave" }),
+      onMouseEnter: () => actor.send({ type: "dropdown.mouseEnter" }),
+      children: [
+        /* @__PURE__ */ jsx(HStack, { gap: "xs", children: /* @__PURE__ */ jsx(
+          SearchInput,
+          {
+            value: searchQuery,
+            onChange: setSearchQuery,
+            "data-likec4-focusable": true,
+            onKeyDown: scopedKeydownHandler
+          }
+        ) }),
+        /* @__PURE__ */ jsx(
+          ScrollAreaAutosize,
+          {
+            scrollbars: "xy",
+            type: "auto",
+            offsetScrollbars: "present",
+            classNames: {
+              root: css({
+                maxWidth: [
+                  "calc(100vw - 20px)",
+                  "calc(100cqw - 20px)"
+                ]
+              })
+            },
+            children: hasSearchQuery ? /* @__PURE__ */ jsx(SearchResults, { searchQuery: normalizeViewPath(searchQuery).toLowerCase() }) : /* @__PURE__ */ jsx(FolderColumns, {})
+          }
+        )
+      ]
+    }
+  );
+}
+const compare = compareNaturalHierarchically(VIEW_FOLDERS_SEPARATOR);
+function SearchResults({ searchQuery }) {
+  const likec4model = useLikeC4Model();
+  const actor = useNavigationActor();
+  const isSearchByPath = searchQuery.includes(VIEW_FOLDERS_SEPARATOR);
+  const found = pipe(
+    likec4model.views(),
+    ifilter((v) => {
+      if (isSearchByPath && v.$view.title) {
+        return normalizeViewPath(v.$view.title).toLowerCase().includes(searchQuery);
+      }
+      return v.id.toLowerCase().includes(searchQuery) || !!v.title?.toLowerCase().includes(searchQuery);
+    }),
+    ifirst(20),
+    toArray(),
+    sort((a, b) => compare(a.folder.path, b.folder.path))
+  );
+  if (found.length === 0) return /* @__PURE__ */ jsx("div", { children: "no results" });
+  const highlight = isSearchByPath ? searchQuery.split(VIEW_FOLDERS_SEPARATOR) : searchQuery;
+  return /* @__PURE__ */ jsx(
+    ScrollAreaAutosize,
+    {
+      scrollbars: "xy",
+      offsetScrollbars: false,
+      className: css({
+        width: "100%",
+        maxWidth: [
+          "70vw",
+          "calc(100cqw - 250px)"
+        ],
+        maxHeight: [
+          "70vh",
+          "calc(100cqh - 250px)"
+        ]
+      }),
+      children: /* @__PURE__ */ jsx(VStack, { gap: 1, children: found.map((v) => /* @__PURE__ */ jsx(
+        FoundedView,
+        {
+          view: v,
+          highlight,
+          onClick: (e) => {
+            console.log("click");
+            e.stopPropagation();
+            actor.selectView(v.id);
+          },
+          "data-likec4-focusable": true,
+          onKeyDown: scopedKeydownHandler
+        },
+        v.id
+      )) })
+    }
+  );
+}
+const foundedViewClass = hstack({
+  gap: "2xs",
+  rounded: "sm",
+  px: "xs",
+  py: "2xs",
+  _hover: {
+    backgroundColor: {
+      base: "mantine.colors.gray[1]",
+      _dark: "mantine.colors.dark[5]"
+    }
+  },
+  _focus: {
+    outline: "none",
+    color: "mantine.colors.primary.lightColor!",
+    backgroundColor: "mantine.colors.primary.lightHover!"
+  }
+});
+const inheritColor = css({
+  _groupFocus: {
+    color: "[inherit!]",
+    transition: "none"
+  }
+});
+function FoundedView({ view, highlight, ...props }) {
+  const folder = view.folder;
+  const viewIcon = ViewTypeIcon[view.id === "index" ? "index" : view._type];
+  const viewLabel = /* @__PURE__ */ jsx(
+    Highlight,
+    {
+      component: "div",
+      className: cx(
+        inheritColor,
+        breadcrumbTitle({ truncate: true })
+      ),
+      maw: 350,
+      highlight,
+      children: view.title ?? view.id
+    },
+    view.id
+  );
+  const className = cx(
+    props.className,
+    "group",
+    foundedViewClass
+  );
+  if (folder.isRoot) {
+    return /* @__PURE__ */ jsxs(
+      UnstyledButton,
+      {
+        ...props,
+        className,
+        children: [
+          viewIcon,
+          viewLabel
+        ]
+      }
+    );
+  }
+  const breadcrumbs = folder.breadcrumbs.map((b) => /* @__PURE__ */ jsx(
+    Highlight,
+    {
+      component: "div",
+      className: cx(
+        css({
+          _groupHover: {
+            color: "mantine.colors.dimmed"
+          }
+        }),
+        inheritColor,
+        breadcrumbTitle({ dimmed: true, truncate: true })
+      ),
+      maw: 170,
+      highlight: isArray(highlight) ? highlight : [],
+      children: b.title
+    },
+    b.path
+  ));
+  breadcrumbs.push(
+    /* @__PURE__ */ jsxs(HStack, { gap: 4, children: [
+      viewIcon,
+      viewLabel
+    ] })
+  );
+  return /* @__PURE__ */ jsxs(
+    UnstyledButton,
+    {
+      ...props,
+      className,
+      children: [
+        folderIcon,
+        /* @__PURE__ */ jsx(Breadcrumbs, { separator: /* @__PURE__ */ jsx(IconChevronRight, { size: 12, stroke: 1.5 }), separatorMargin: 3, children: breadcrumbs })
+      ]
+    }
+  );
+}
+const btnRightSection = /* @__PURE__ */ jsx(IconChevronRight, { size: 12, stroke: 1.5, className: "mantine-rotate-rtl" });
+const folderIcon = /* @__PURE__ */ jsx(
+  IconFolderFilled,
+  {
+    size: 16,
+    className: css({
+      opacity: {
+        base: 0.3,
+        _groupHover: 0.5,
+        _groupActive: 0.5
+      }
+    })
+  }
+);
+const viewTypeIconCss = css({
+  opacity: {
+    base: 0.3,
+    _dark: 0.5,
+    _groupHover: 0.7,
+    _groupActive: 0.7
+  }
+});
+const ViewTypeIcon = {
+  index: /* @__PURE__ */ jsx(IconStarFilled, { size: 16, className: viewTypeIconCss }),
+  element: /* @__PURE__ */ jsx(
+    IconZoomScan,
+    {
+      size: 18,
+      stroke: 2,
+      className: viewTypeIconCss
+    }
+  ),
+  deployment: /* @__PURE__ */ jsx(IconStack2, { size: 16, stroke: 1.5, className: viewTypeIconCss }),
+  dynamic: /* @__PURE__ */ jsx(IconStack2, { size: 16, stroke: 1.5, className: viewTypeIconCss })
+};
+const ColumnScrollArea = ScrollAreaAutosize.withProps({
+  scrollbars: "y",
+  className: css({
+    maxHeight: [
+      "calc(100vh - 50px)",
+      "calc(100cqh - 50px)"
+    ]
+  })
+});
+function folderColumn(folder, context) {
+  return {
+    folderPath: folder.path,
+    items: [
+      ...folder.folders.map((s) => ({
+        type: "folder",
+        folderPath: s.path,
+        title: s.title,
+        selected: context.selectedFolder.startsWith(s.path)
+      })),
+      ...folder.views.map((s) => ({
+        type: "view",
+        viewType: s.id === "index" ? "index" : s._type,
+        viewId: s.id,
+        title: s.title ?? s.id,
+        description: s.description.nonEmpty && s.description.text || null,
+        selected: s.id === context.viewModel.id
+      }))
+    ]
+  };
+}
+const selectColumns = (context) => {
+  const viewModel = context.viewModel;
+  const likec4model = viewModel.$model;
+  const columns = [
+    folderColumn(likec4model.rootViewFolder, context)
+  ];
+  const folder = likec4model.viewFolder(context.selectedFolder);
+  if (!folder.isRoot) {
+    for (const b of folder.breadcrumbs) {
+      columns.push(folderColumn(b, context));
+    }
+  }
+  return columns;
+};
+function FolderColumns() {
+  const columns = useNavigationActorContext(selectColumns, deepEqual);
+  return /* @__PURE__ */ jsx(HStack, { gap: "xs", alignItems: "stretch", children: columns.flatMap((column, i) => [
+    i > 0 && /* @__PURE__ */ jsx(Divider, { orientation: "vertical" }, "divider" + i),
+    /* @__PURE__ */ jsx(FolderColumn, { data: column }, column.folderPath)
+  ]) });
+}
+function FolderColumn({ data }) {
+  const actor = useNavigationActorRef();
+  const onItemClicked = (item) => (e) => {
+    e.stopPropagation();
+    if (item.type === "folder") {
+      actor.send({ type: "select.folder", folderPath: item.folderPath });
+    } else {
+      actor.send({ type: "select.view", viewId: item.viewId });
+    }
+  };
+  return /* @__PURE__ */ jsx(Box, { pb: "4", children: /* @__PURE__ */ jsx(ColumnScrollArea, { children: /* @__PURE__ */ jsx(VStack, { gap: 1, children: data.items.map((item, i) => /* @__PURE__ */ jsx(
+    FolderColumnItem,
+    {
+      columnItem: item,
+      onClick: onItemClicked(item)
+    },
+    `${data.folderPath}/${item.type}/${i}`
+  )) }) }) });
+}
+function FolderColumnItem({ columnItem, ...props }) {
+  switch (columnItem.type) {
+    case "folder":
+      return /* @__PURE__ */ jsx(
+        NavigationLink,
+        {
+          variant: "light",
+          active: columnItem.selected,
+          label: columnItem.title,
+          leftSection: folderIcon,
+          rightSection: btnRightSection,
+          maw: "300px",
+          miw: "200px",
+          ...props
+        },
+        columnItem.folderPath
+      );
+    case "view":
+      return /* @__PURE__ */ jsx(
+        NavigationLink,
+        {
+          variant: "filled",
+          active: columnItem.selected,
+          label: columnItem.title,
+          description: columnItem.description,
+          leftSection: ViewTypeIcon[columnItem.viewType],
+          maw: "300px",
+          miw: "200px",
+          ...props
+        },
+        columnItem.viewId
+      );
+    default:
+      nonexhaustive(columnItem);
+  }
+}
+function SearchInput({ onKeyDown, ...props }) {
+  const [_value, handleChange] = useUncontrolled({
+    ...props,
+    finalValue: ""
+  });
+  return /* @__PURE__ */ jsx(
+    Input,
+    {
+      size: "xs",
+      placeholder: "Search by title or id",
+      variant: "unstyled",
+      height: rem(26),
+      value: _value,
+      onKeyDown,
+      onChange: (e) => handleChange(e.currentTarget.value),
+      classNames: {
+        wrapper: css({
+          flexGrow: 1,
+          backgroundColor: {
+            base: "mantine.colors.gray[1]",
+            _dark: "mantine.colors.dark[5]/80",
+            _hover: {
+              base: "mantine.colors.gray[2]",
+              _dark: "mantine.colors.dark[4]"
+            },
+            _focus: {
+              base: "mantine.colors.gray[2]",
+              _dark: "mantine.colors.dark[4]"
+            }
+          },
+          rounded: "sm"
+        }),
+        input: css({
+          _placeholder: {
+            color: "mantine.colors.dimmed"
+          },
+          _focus: {
+            outline: "none"
+          }
+        })
+      },
+      style: {
+        ["--input-fz"]: "var(--mantine-font-size-sm)"
+      },
+      leftSection: /* @__PURE__ */ jsx(IconSearch, { size: 14 }),
+      rightSectionPointerEvents: "all",
+      rightSectionWidth: "min-content",
+      rightSection: !props.value || isEmpty(props.value) ? null : /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "subtle",
+          h: "100%",
+          size: "compact-xs",
+          color: "gray",
+          onClick: (e) => {
+            e.stopPropagation();
+            handleChange("");
+          },
+          children: "clear"
+        }
+      )
+    }
+  );
+}
+
+export { NavigationPanelDropdown };

package/dist/navigationpanel/_common.d.ts

@@ -0,0 +1,15 @@
+import { NavigationPanelActionIconVariant } from '@likec4/styles/recipes';
+import { ActionIconProps, TooltipProps, BreadcrumbsProps } from '@mantine/core';
+import { HTMLMotionProps } from 'motion/react';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+export declare const Tooltip: ForwardRefExoticComponent< TooltipProps & RefAttributes<HTMLDivElement> & {
+    component?: any;
+    renderRoot?: (props: Record<string, any>) => React.ReactNode;
+}>;
+export declare const BreadcrumbsSeparator: () => import("react/jsx-runtime").JSX.Element;
+export declare const Breadcrumbs: ForwardRefExoticComponent< BreadcrumbsProps & RefAttributes<HTMLDivElement> & {
+    component?: any;
+    renderRoot?: (props: Record<string, any>) => React.ReactNode;
+}>;
+export type PanelActionIconProps = Partial<NavigationPanelActionIconVariant> & Omit<ActionIconProps, keyof NavigationPanelActionIconVariant> & HTMLMotionProps<'button'>;
+export declare const PanelActionIcon: ForwardRefExoticComponent<Omit<PanelActionIconProps, "ref"> & RefAttributes<HTMLButtonElement>>;

package/dist/navigationpanel/_common.js

@@ -0,0 +1,69 @@
+import { jsx } from 'react/jsx-runtime';
+import { cx, css } from '@likec4/styles/css';
+import { navigationPanelActionIcon } from '@likec4/styles/recipes';
+import { ActionIcon, ThemeIcon, Tooltip as Tooltip$1, Breadcrumbs } from '@mantine/core';
+import * as m from 'motion/react-m';
+import { forwardRef } from 'react';
+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 Tooltip = Tooltip$1.withProps({
+  color: "dark",
+  fz: "xs",
+  openDelay: 600,
+  closeDelay: 120,
+  label: "",
+  children: null,
+  offset: 8,
+  withinPortal: false
+});
+const BreadcrumbsSeparator = () => /* @__PURE__ */ jsx(
+  ThemeIcon,
+  {
+    visibleFrom: "sm",
+    variant: "transparent",
+    size: 16,
+    className: css({
+      color: {
+        base: "mantine.colors.gray[5]",
+        _dark: "mantine.colors.dark[3]"
+      }
+    }),
+    children: /* @__PURE__ */ jsx(IconChevronRight, {})
+  }
+);
+Breadcrumbs.withProps({
+  separator: /* @__PURE__ */ jsx(BreadcrumbsSeparator, {}),
+  separatorMargin: 4
+});
+const PanelActionIcon = forwardRef(({
+  variant = "default",
+  className,
+  disabled = false,
+  ...others
+}, ref) => /* @__PURE__ */ jsx(
+  ActionIcon,
+  {
+    size: "md",
+    variant: "transparent",
+    radius: "sm",
+    component: m.button,
+    ...!disabled && {
+      whileHover: {
+        scale: 1.085
+      },
+      whileTap: {
+        scale: 1,
+        translateY: 1
+      }
+    },
+    disabled,
+    ...others,
+    className: cx(
+      className,
+      navigationPanelActionIcon({ variant })
+    ),
+    ref
+  }
+));
+
+export { BreadcrumbsSeparator, PanelActionIcon, Tooltip };