@likec4/diagram 1.19.1 → 1.20.0

package/dist/context/DiagramFeatures.d.ts

@@ -0,0 +1,31 @@
+import { ExclusiveUnion, NonEmptyArray } from '@likec4/core';
+import { PropsWithChildren } from 'react';
+declare const FeatureNames: readonly ["Controls", "ReadOnly", "FocusMode", "NavigateTo", "ElementDetails", "RelationshipDetails", "RelationshipBrowser", "Search", "NavigationButtons", "Notations", "DynamicViewWalkthrough", "EdgeEditing", "ViewTitle", "FitView", "LikeC4Model", "Vscode"];
+type FeatureName = typeof FeatureNames[number];
+export type EnabledFeatures = {
+    [P in `enable${FeatureName}`]: boolean;
+};
+export declare const AllDisabled: EnabledFeatures;
+export declare function DiagramFeatures({ children, features, overrides, }: PropsWithChildren<ExclusiveUnion<{
+    features: {
+        features: EnabledFeatures;
+    };
+    overrides: {
+        overrides: Partial<EnabledFeatures>;
+    };
+}>>): import("react/jsx-runtime").JSX.Element;
+export declare namespace DiagramFeatures {
+    var Overlays: ({ children }: PropsWithChildren) => import("react/jsx-runtime").JSX.Element;
+}
+export declare function useEnabledFeature<F extends NonEmptyArray<FeatureName>>(...names: F): {
+    [P in `enable${F[number]}`]: boolean;
+};
+export declare function useEnabledFeatures(): EnabledFeatures;
+export declare function IfEnabled({ feature, children, and, }: PropsWithChildren<{
+    feature: FeatureName;
+    and?: boolean;
+}>): import("react/jsx-runtime").JSX.Element | null;
+export declare function IfNotEnabled({ feature, children, }: PropsWithChildren<{
+    feature: FeatureName;
+}>): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/context/DiagramFeatures.js

@@ -0,0 +1,140 @@
+import { jsx, Fragment } from "react/jsx-runtime";
+import { useCustomCompareEffect } from "@react-hookz/web";
+import { createContext, useContext, useState } from "react";
+import { mapToObj, pick, map } from "remeda";
+import { depsShallowEqual } from "../hooks/useUpdateEffect.js";
+const FeatureNames = [
+  "Controls",
+  "ReadOnly",
+  "FocusMode",
+  "NavigateTo",
+  "ElementDetails",
+  "RelationshipDetails",
+  "RelationshipBrowser",
+  "Search",
+  "NavigationButtons",
+  "Notations",
+  "DynamicViewWalkthrough",
+  "EdgeEditing",
+  "ViewTitle",
+  "FitView",
+  /**
+   * LikeC4Model is available in context
+   */
+  "LikeC4Model",
+  /**
+   * Running in VSCode
+   */
+  "Vscode"
+];
+const AllDisabled = mapToObj(
+  FeatureNames,
+  (name) => [`enable${name}`, false]
+);
+const DiagramFeaturesContext = createContext(AllDisabled);
+const validate = (features) => {
+  let {
+    enableReadOnly,
+    enableLikeC4Model,
+    enableElementDetails,
+    enableRelationshipDetails,
+    enableRelationshipBrowser,
+    enableSearch,
+    ...rest
+  } = features;
+  if (!enableLikeC4Model) {
+    if (enableElementDetails) {
+      console.warn("enableElementDetails is ignored because requires LikeC4Model");
+      enableElementDetails = false;
+    }
+    if (enableRelationshipDetails) {
+      console.warn("enableRelationshipDetails is ignored because requires enableLikeC4Model");
+      enableRelationshipDetails = false;
+    }
+    if (enableRelationshipBrowser) {
+      console.warn("enableRelationshipBrowser is ignored because requires LikeC4Model");
+      enableRelationshipBrowser = false;
+    }
+    if (enableSearch) {
+      console.warn("enableSearch is ignored because requires LikeC4Model");
+      enableSearch = false;
+    }
+  }
+  if (enableReadOnly) {
+    if (rest.enableEdgeEditing) {
+      console.warn("enableEdgeEditing is ignored because enabled ReadOnly");
+      rest.enableEdgeEditing = false;
+    }
+  }
+  return {
+    ...rest,
+    enableReadOnly,
+    enableLikeC4Model,
+    enableElementDetails,
+    enableRelationshipDetails,
+    enableRelationshipBrowser,
+    enableSearch
+  };
+};
+function DiagramFeatures({
+  children,
+  features,
+  overrides
+}) {
+  const scope = useContext(DiagramFeaturesContext);
+  const [enabled, setFeatures] = useState(scope);
+  useCustomCompareEffect(
+    () => {
+      setFeatures(validate({
+        ...scope,
+        ...features,
+        ...overrides
+      }));
+    },
+    [scope, features, overrides],
+    depsShallowEqual
+  );
+  return /* @__PURE__ */ jsx(DiagramFeaturesContext.Provider, { value: enabled, children });
+}
+DiagramFeatures.Overlays = ({ children }) => {
+  return /* @__PURE__ */ jsx(
+    DiagramFeatures,
+    {
+      overrides: {
+        enableControls: false,
+        enableReadOnly: true,
+        enableEdgeEditing: false
+      },
+      children
+    }
+  );
+};
+function useEnabledFeature(...names) {
+  return pick(useContext(DiagramFeaturesContext), map(names, (name) => `enable${name}`));
+}
+function useEnabledFeatures() {
+  return useContext(DiagramFeaturesContext);
+}
+function IfEnabled({
+  feature,
+  children,
+  and = true
+}) {
+  const enabled = useEnabledFeature(feature)[`enable${feature}`] === true;
+  return enabled && and ? /* @__PURE__ */ jsx(Fragment, { children }) : null;
+}
+function IfNotEnabled({
+  feature,
+  children
+}) {
+  const notEnabled = useEnabledFeature(feature)[`enable${feature}`] !== true;
+  return notEnabled ? /* @__PURE__ */ jsx(Fragment, { children }) : null;
+}
+export {
+  AllDisabled,
+  DiagramFeatures,
+  IfEnabled,
+  IfNotEnabled,
+  useEnabledFeature,
+  useEnabledFeatures
+};

package/dist/{ui → context}/FramerMotionConfig.js

@@ -1,13 +1,11 @@
 import { jsx } from "react/jsx-runtime";
 import { useMantineStyleNonce } from "@mantine/core";
-import { useId } from "@mantine/hooks";
-import { LazyMotion, domMax, MotionConfig, LayoutGroup } from "framer-motion";
+import { LazyMotion, domMax, MotionConfig } from "framer-motion";
 import "react";
 const FramerMotionConfig = ({ children }) => {
   var _a;
-  const layoutId = useId();
   const nonce = (_a = useMantineStyleNonce()) == null ? void 0 : _a();
-  return /* @__PURE__ */ jsx(LazyMotion, { features: domMax, strict: true, children: /* @__PURE__ */ jsx(MotionConfig, { reducedMotion: "user", ...nonce && { nonce }, children: /* @__PURE__ */ jsx(LayoutGroup, { id: layoutId, children }) }) });
+  return /* @__PURE__ */ jsx(LazyMotion, { features: domMax, strict: true, children: /* @__PURE__ */ jsx(MotionConfig, { reducedMotion: "user", ...nonce && { nonce }, children }) });
 };
 export {
   FramerMotionConfig

package/dist/context/IconRenderer.d.ts

@@ -0,0 +1,11 @@
+import { ElementIconRenderer } from '../LikeC4Diagram.props';
+import { Provider } from 'react';
+export declare const IconRendererProvider: Provider<ElementIconRenderer | null>;
+export declare function IconRenderer({ element, className, }: {
+    element?: {
+        id: string;
+        title: string;
+        icon?: string | null | undefined;
+    };
+    className: string;
+}): import("react/jsx-runtime").JSX.Element | null;

package/dist/{xyflow/nodes/shared/ElementIcon.js → context/IconRenderer.js}

@@ -1,16 +1,17 @@
 import { jsx } from "react/jsx-runtime";
 import clsx from "clsx";
-import { m } from "framer-motion";
-const ElementIcon = ({
+import { createContext, useContext } from "react";
+const IconRendererContext = createContext(null);
+const IconRendererProvider = IconRendererContext.Provider;
+function IconRenderer({
   element,
-  viewId,
-  className,
-  renderIcon: RenderIcon
-}) => {
-  if (!element.icon || element.icon === "none") {
+  className
+}) {
+  const RenderIcon = useContext(IconRendererContext);
+  if (!element || !element.icon || element.icon === "none") {
     return null;
   }
-  let icon = null;
+  let icon;
   if (element.icon.startsWith("http://") || element.icon.startsWith("https://")) {
     icon = /* @__PURE__ */ jsx("img", { src: element.icon, alt: element.title });
   } else if (RenderIcon) {
@@ -20,19 +21,18 @@ const ElementIcon = ({
     return null;
   }
   return /* @__PURE__ */ jsx(
-    m.div,
+    "div",
     {
-      layoutId: `${viewId}:element:icon:${element.id}`,
       className: clsx(
         className,
         "likec4-element-icon"
       ),
       "data-likec4-icon": element.icon,
       children: icon
-    },
-    `${viewId}:element:icon:${element.id}`
+    }
   );
-};
+}
 export {
-  ElementIcon
+  IconRenderer,
+  IconRendererProvider
 };

package/dist/context/RootContainer.d.ts

@@ -0,0 +1,9 @@
+import { PropsWithChildren, RefObject } from 'react';
+export declare function RootContainer({ className, children, }: PropsWithChildren<{
+    className?: string | undefined;
+}>): import("react/jsx-runtime").JSX.Element;
+export declare function useRootContainerRef(): RefObject<HTMLDivElement | null>;
+/**
+ * NOTE: Non-reactive
+ */
+export declare function useRootContainer(): HTMLDivElement | null;

package/dist/context/RootContainer.js

@@ -0,0 +1,20 @@
+import { jsx } from "react/jsx-runtime";
+import { Box } from "@mantine/core";
+import clsx from "clsx";
+import { createContext, createRef, useRef, useContext } from "react";
+import { rootClassName } from "../globals.css.js";
+const RootContainerContext = createContext(createRef());
+function RootContainer({
+  className,
+  children
+}) {
+  const ref = useRef(null);
+  return /* @__PURE__ */ jsx(Box, { className: clsx(rootClassName, className), ref, children: /* @__PURE__ */ jsx(RootContainerContext.Provider, { value: ref, children }) });
+}
+function useRootContainer() {
+  return useContext(RootContainerContext).current;
+}
+export {
+  RootContainer,
+  useRootContainer
+};

package/dist/context/index.d.ts

@@ -0,0 +1,7 @@
+export { DiagramEventHandlers, useDiagramEventHandlers } from './DiagramEventHandlers';
+export { AllDisabled, DiagramFeatures, IfEnabled, IfNotEnabled, useEnabledFeature, useEnabledFeatures, } from './DiagramFeatures';
+export type { EnabledFeatures } from './DiagramFeatures';
+export { EnsureMantine } from './EnsureMantine';
+export { FramerMotionConfig } from './FramerMotionConfig';
+export { IconRenderer, IconRendererProvider } from './IconRenderer';
+export { RootContainer, useRootContainer, useRootContainerRef } from './RootContainer';

package/dist/globals.css.js

@@ -1,90 +1,3 @@
-import "./node_modules/@mantine/core/esm/components/ScrollArea/ScrollArea.module.css.mjs.vanilla.css.js";
-import "./node_modules/@mantine/core/esm/components/UnstyledButton/UnstyledButton.module.css.mjs.vanilla.css.js";
-import "./node_modules/@mantine/core/esm/components/VisuallyHidden/VisuallyHidden.module.css.mjs.vanilla.css.js";
-import "./node_modules/@mantine/core/esm/components/Paper/Paper.module.css.mjs.vanilla.css.js";
-import "./node_modules/@mantine/core/esm/components/Popover/Popover.module.css.mjs.vanilla.css.js";
-import "./node_modules/@mantine/core/esm/components/Loader/Loader.module.css.mjs.vanilla.css.js";
-import "./node_modules/@mantine/core/esm/components/ActionIcon/ActionIcon.module.css.mjs.vanilla.css.js";
-import "./node_modules/@mantine/core/esm/components/CloseButton/CloseButton.module.css.mjs.vanilla.css.js";
-import "./node_modules/@mantine/core/esm/components/Group/Group.module.css.mjs.vanilla.css.js";
-import "./node_modules/@mantine/core/esm/components/Overlay/Overlay.module.css.mjs.vanilla.css.js";
-import "./node_modules/@mantine/core/esm/components/ModalBase/ModalBase.module.css.mjs.vanilla.css.js";
-import "./node_modules/@mantine/core/esm/components/Input/Input.module.css.mjs.vanilla.css.js";
-import "./node_modules/@mantine/core/esm/components/Flex/Flex.module.css.mjs.vanilla.css.js";
-import "./node_modules/@mantine/core/esm/components/FloatingIndicator/FloatingIndicator.module.css.mjs.vanilla.css.js";
-import "./node_modules/@mantine/core/esm/components/Accordion/Accordion.module.css.mjs.vanilla.css.js";
-import "./node_modules/@mantine/core/esm/components/Affix/Affix.module.css.mjs.vanilla.css.js";
-import "./node_modules/@mantine/core/esm/components/Alert/Alert.module.css.mjs.vanilla.css.js";
-import "./node_modules/@mantine/core/esm/components/Text/Text.module.css.mjs.vanilla.css.js";
-import "./node_modules/@mantine/core/esm/components/Anchor/Anchor.module.css.mjs.vanilla.css.js";
-import "./node_modules/@mantine/core/esm/components/AngleSlider/AngleSlider.module.css.mjs.vanilla.css.js";
-import "./node_modules/@mantine/core/esm/components/AppShell/AppShell.module.css.mjs.vanilla.css.js";
-import "./node_modules/@mantine/core/esm/components/AspectRatio/AspectRatio.module.css.mjs.vanilla.css.js";
-import "./node_modules/@mantine/core/esm/components/Combobox/Combobox.module.css.mjs.vanilla.css.js";
-import "./node_modules/@mantine/core/esm/components/InlineInput/InlineInput.module.css.mjs.vanilla.css.js";
-import "./node_modules/@mantine/core/esm/components/Checkbox/CheckboxCard/CheckboxCard.module.css.mjs.vanilla.css.js";
-import "./node_modules/@mantine/core/esm/components/Checkbox/CheckboxIndicator/CheckboxIndicator.module.css.mjs.vanilla.css.js";
-import "./node_modules/@mantine/core/esm/components/Checkbox/Checkbox.module.css.mjs.vanilla.css.js";
-import "./node_modules/@mantine/core/esm/components/Avatar/Avatar.module.css.mjs.vanilla.css.js";
-import "./node_modules/@mantine/core/esm/components/BackgroundImage/BackgroundImage.module.css.mjs.vanilla.css.js";
-import "./node_modules/@mantine/core/esm/components/Badge/Badge.module.css.mjs.vanilla.css.js";
-import "./node_modules/@mantine/core/esm/components/Blockquote/Blockquote.module.css.mjs.vanilla.css.js";
-import "./node_modules/@mantine/core/esm/components/Breadcrumbs/Breadcrumbs.module.css.mjs.vanilla.css.js";
-import "./node_modules/@mantine/core/esm/components/Burger/Burger.module.css.mjs.vanilla.css.js";
-import "./node_modules/@mantine/core/esm/components/Button/Button.module.css.mjs.vanilla.css.js";
-import "./node_modules/@mantine/core/esm/components/Card/Card.module.css.mjs.vanilla.css.js";
-import "./node_modules/@mantine/core/esm/components/Center/Center.module.css.mjs.vanilla.css.js";
-import "./node_modules/@mantine/core/esm/components/Chip/Chip.module.css.mjs.vanilla.css.js";
-import "./node_modules/@mantine/core/esm/components/Code/Code.module.css.mjs.vanilla.css.js";
-import "./node_modules/@mantine/core/esm/components/ColorSwatch/ColorSwatch.module.css.mjs.vanilla.css.js";
-import "./node_modules/@mantine/core/esm/components/ColorPicker/ColorPicker.module.css.mjs.vanilla.css.js";
-import "./node_modules/@mantine/core/esm/components/ColorInput/ColorInput.module.css.mjs.vanilla.css.js";
-import "./node_modules/@mantine/core/esm/components/Container/Container.module.css.mjs.vanilla.css.js";
-import "./node_modules/@mantine/core/esm/components/Dialog/Dialog.module.css.mjs.vanilla.css.js";
-import "./node_modules/@mantine/core/esm/components/Divider/Divider.module.css.mjs.vanilla.css.js";
-import "./node_modules/@mantine/core/esm/components/Drawer/Drawer.module.css.mjs.vanilla.css.js";
-import "./node_modules/@mantine/core/esm/components/Fieldset/Fieldset.module.css.mjs.vanilla.css.js";
-import "./node_modules/@mantine/core/esm/components/Grid/Grid.module.css.mjs.vanilla.css.js";
-import "./node_modules/@mantine/core/esm/components/Mark/Mark.module.css.mjs.vanilla.css.js";
-import "./node_modules/@mantine/core/esm/components/Image/Image.module.css.mjs.vanilla.css.js";
-import "./node_modules/@mantine/core/esm/components/Indicator/Indicator.module.css.mjs.vanilla.css.js";
-import "./node_modules/@mantine/core/esm/components/Kbd/Kbd.module.css.mjs.vanilla.css.js";
-import "./node_modules/@mantine/core/esm/components/List/List.module.css.mjs.vanilla.css.js";
-import "./node_modules/@mantine/core/esm/components/LoadingOverlay/LoadingOverlay.module.css.mjs.vanilla.css.js";
-import "./node_modules/@mantine/core/esm/components/Menu/Menu.module.css.mjs.vanilla.css.js";
-import "./node_modules/@mantine/core/esm/components/Modal/Modal.module.css.mjs.vanilla.css.js";
-import "./node_modules/@mantine/core/esm/components/Pill/Pill.module.css.mjs.vanilla.css.js";
-import "./node_modules/@mantine/core/esm/components/PillsInput/PillsInput.module.css.mjs.vanilla.css.js";
-import "./node_modules/@mantine/core/esm/components/NavLink/NavLink.module.css.mjs.vanilla.css.js";
-import "./node_modules/@mantine/core/esm/components/Notification/Notification.module.css.mjs.vanilla.css.js";
-import "./node_modules/@mantine/core/esm/components/NumberInput/NumberInput.module.css.mjs.vanilla.css.js";
-import "./node_modules/@mantine/core/esm/components/Pagination/Pagination.module.css.mjs.vanilla.css.js";
-import "./node_modules/@mantine/core/esm/components/PasswordInput/PasswordInput.module.css.mjs.vanilla.css.js";
-import "./node_modules/@mantine/core/esm/components/PinInput/PinInput.module.css.mjs.vanilla.css.js";
-import "./node_modules/@mantine/core/esm/components/Progress/Progress.module.css.mjs.vanilla.css.js";
-import "./node_modules/@mantine/core/esm/components/Radio/RadioCard/RadioCard.module.css.mjs.vanilla.css.js";
-import "./node_modules/@mantine/core/esm/components/Radio/RadioIndicator/RadioIndicator.module.css.mjs.vanilla.css.js";
-import "./node_modules/@mantine/core/esm/components/Radio/Radio.module.css.mjs.vanilla.css.js";
-import "./node_modules/@mantine/core/esm/components/Rating/Rating.module.css.mjs.vanilla.css.js";
-import "./node_modules/@mantine/core/esm/components/Tooltip/Tooltip.module.css.mjs.vanilla.css.js";
-import "./node_modules/@mantine/core/esm/components/RingProgress/RingProgress.module.css.mjs.vanilla.css.js";
-import "./node_modules/@mantine/core/esm/components/SegmentedControl/SegmentedControl.module.css.mjs.vanilla.css.js";
-import "./node_modules/@mantine/core/esm/components/SemiCircleProgress/SemiCircleProgress.module.css.mjs.vanilla.css.js";
-import "./node_modules/@mantine/core/esm/components/SimpleGrid/SimpleGrid.module.css.mjs.vanilla.css.js";
-import "./node_modules/@mantine/core/esm/components/Skeleton/Skeleton.module.css.mjs.vanilla.css.js";
-import "./node_modules/@mantine/core/esm/components/Slider/Slider.module.css.mjs.vanilla.css.js";
-import "./node_modules/@mantine/core/esm/components/Spoiler/Spoiler.module.css.mjs.vanilla.css.js";
-import "./node_modules/@mantine/core/esm/components/Stack/Stack.module.css.mjs.vanilla.css.js";
-import "./node_modules/@mantine/core/esm/components/Stepper/Stepper.module.css.mjs.vanilla.css.js";
-import "./node_modules/@mantine/core/esm/components/Switch/Switch.module.css.mjs.vanilla.css.js";
-import "./node_modules/@mantine/core/esm/components/Table/Table.module.css.mjs.vanilla.css.js";
-import "./node_modules/@mantine/core/esm/components/Tabs/Tabs.module.css.mjs.vanilla.css.js";
-import "./node_modules/@mantine/core/esm/components/ThemeIcon/ThemeIcon.module.css.mjs.vanilla.css.js";
-import "./node_modules/@mantine/core/esm/components/Timeline/Timeline.module.css.mjs.vanilla.css.js";
-import "./node_modules/@mantine/core/esm/components/Title/Title.module.css.mjs.vanilla.css.js";
-import "./node_modules/@mantine/core/esm/components/Tree/Tree.module.css.mjs.vanilla.css.js";
-import "./node_modules/@mantine/core/esm/components/TypographyStylesProvider/TypographyStylesProvider.module.css.mjs.vanilla.css.js";
-import "./theme-vars.css.ts.vanilla.css.js";
 /* empty css                           */
 var rootClassName = "likec4-diagram-root";
 export {

package/dist/hooks/index.d.ts

@@ -1,5 +1,7 @@
-export * from './useDiagramState';
-export * from './useMantinePortalProps';
-export * from './useSetState';
-export * from './useUpdateEffect';
-export * from './useXYFlow';
+export { useCurrentViewId } from './useCurrentViewId';
+export type { DiagramContext } from './useDiagramContext';
+export { useMantinePortalProps } from './useMantinePortalProps';
+export { useSetState } from './useSetState';
+export { useUpdateEffect } from './useUpdateEffect';
+export { useXYFlow, useXYInternalNode, useXYStore, useXYStoreApi } from './useXYFlow';
+export type { XYStoreApi } from './useXYFlow';

package/dist/hooks/useCurrentViewId.d.ts

@@ -0,0 +1,2 @@
+import { ViewId } from '@likec4/core';
+export declare function useCurrentViewId(): ViewId;

package/dist/hooks/useCurrentViewId.js

@@ -0,0 +1,8 @@
+import { useDiagramContext } from "./useDiagramContext.js";
+const selectViewId = (state) => state.view.id;
+function useCurrentViewId() {
+  return useDiagramContext(selectViewId);
+}
+export {
+  useCurrentViewId
+};