@likec4/diagram 1.38.0 → 1.39.0

package/dist/likec4model/useLikeC4Model.d.ts

@@ -1,20 +1,7 @@
-import { aux, LikeC4Model, LikeC4ViewModel } from '@likec4/core/model';
-import { TagSpecification, ElementSpecification, RelationshipSpecification, CustomColorDefinitions } from '@likec4/core';
-export declare function useLikeC4Model<A extends aux.Any = aux.UnknownLayouted>(): LikeC4Model<A>;
-export declare function useLikeC4ViewModel<A extends aux.Any = aux.UnknownLayouted>(viewId: aux.ViewId<A>): LikeC4ViewModel<A>;
-export declare function useLikeC4Specification(): {
-    tags: {
-        [x: string]: TagSpecification;
-    };
-    elements: {
-        [x: string]: Partial< ElementSpecification>;
-    };
-    deployments: {
-        [x: string]: Partial< ElementSpecification>;
-    };
-    relationships: {
-        [x: string]: Partial< RelationshipSpecification>;
-    };
-    metadataKeys?: string[];
-    customColors?: CustomColorDefinitions;
-};
+import { LikeC4Model, LikeC4ViewModel } from '@likec4/core/model';
+import type * as t from '@likec4/core/types';
+type Any = t.aux.Any;
+export declare function useLikeC4Model<A extends Any = t.aux.UnknownLayouted>(): LikeC4Model<A>;
+export declare function useLikeC4ViewModel<A extends Any = t.aux.UnknownLayouted>(viewId: t.aux.ViewId<A>): LikeC4ViewModel<A>;
+export declare function useLikeC4Specification(): t.Specification<t.aux.UnknownLayouted>;
+export {};

package/dist/navigationpanel/NavigationPanel.js

@@ -15,6 +15,7 @@ import { navigationPanelActorLogic } from './actor.js';
 import { NavigationPanelActorContextProvider } from './hooks.js';
 import { NavigationPanelControls } from './NavigationPanelControls.js';
 import { NavigationPanelDropdown } from './NavigationPanelDropdown.js';
+import { WalkthroughPanel } from './walkthrough/WalkthroughPanel.js';
 import { EditorPanel } from './editorpanel/EditorPanel.js';
 import { ActiveWalkthroughControls } from './walkthrough/ActiveWalkthroughControls.js';
 
@@ -69,7 +70,8 @@ const NavigationPanel = memo(() => {
       },
       children: /* @__PURE__ */ jsxs(NavigationPanelActorContextProvider, { value: actorRef, children: [
         /* @__PURE__ */ jsx(NavigationPanelImpl, { actor: actorRef }),
-        /* @__PURE__ */ jsx(EditorPanel, {})
+        /* @__PURE__ */ jsx(EditorPanel, {}),
+        /* @__PURE__ */ jsx(WalkthroughPanel, {})
       ] })
     }
   ) });

package/dist/navigationpanel/NavigationPanelDropdown.js

@@ -1,6 +1,6 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { ifilter, ifirst, toArray, compareNaturalHierarchically, nonexhaustive } from '@likec4/core';
 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';

package/dist/navigationpanel/walkthrough/ActiveWalkthroughControls.js

@@ -1,4 +1,5 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
+import { RichText } from '@likec4/core';
 import { css } from '@likec4/styles/css';
 import { Box } from '@likec4/styles/jsx';
 import { Button, Badge, Portal } from '@mantine/core';
@@ -79,7 +80,8 @@ const ActiveWalkthroughControls = () => {
     hasNext,
     hasPrevious,
     currentStep,
-    totalSteps
+    totalSteps,
+    notes
   } = useDiagramContext((s) => {
     const currentStepIndex = s.xyedges.findIndex((e) => e.id === s.activeWalkthrough?.stepId);
     return {
@@ -87,7 +89,8 @@ const ActiveWalkthroughControls = () => {
       hasNext: currentStepIndex < s.xyedges.length - 1,
       hasPrevious: currentStepIndex > 0,
       currentStep: currentStepIndex + 1,
-      totalSteps: s.xyedges.length
+      totalSteps: s.xyedges.length,
+      notes: s.xyedges[currentStepIndex]?.data?.notes ?? RichText.EMPTY
     };
   });
   return /* @__PURE__ */ jsxs(AnimatePresence, { propagate: true, children: [
@@ -103,8 +106,7 @@ const ActiveWalkthroughControls = () => {
         },
         rightSection: /* @__PURE__ */ jsx(IconPlayerStopFilled, { size: 10 }),
         children: "Stop"
-      },
-      "trigger-dynamic-walkthrough"
+      }
     ),
     /* @__PURE__ */ jsx(
       PrevNextButton,

package/dist/navigationpanel/walkthrough/WalkthroughPanel.d.ts

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

package/dist/navigationpanel/walkthrough/WalkthroughPanel.js

@@ -0,0 +1,83 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { RichText } from '@likec4/core';
+import { cx, css } from '@likec4/styles/css';
+import { styled } from '@likec4/styles/jsx';
+import { vstack } from '@likec4/styles/patterns';
+import { ScrollAreaAutosize } from '@mantine/core';
+import { isNonNull, isTruthy } from 'remeda';
+import { useDiagramContext } from '../../hooks/useDiagram.js';
+import { MarkdownBlock } from '../../base/primitives/MarkdownBlock.js';
+
+const SectionHeader = styled("div", {
+  base: {
+    fontSize: "xs",
+    color: "mantine.colors.dimmed",
+    fontWeight: 500,
+    userSelect: "none",
+    mb: "xxs"
+  }
+});
+function selectWalkthroughNotes(s) {
+  const isActive = isNonNull(s.activeWalkthrough);
+  const activeStepIndex = isActive ? s.xyedges.findIndex((e) => e.id === s.activeWalkthrough?.stepId) : -1;
+  return {
+    isActive,
+    isParallel: isActive && isTruthy(s.activeWalkthrough?.parallelPrefix),
+    hasNext: isActive && activeStepIndex < s.xyedges.length - 1,
+    hasPrevious: isActive && activeStepIndex > 0,
+    notes: isActive ? s.xyedges[activeStepIndex]?.data?.notes ?? RichText.EMPTY : null
+  };
+}
+const WalkthroughPanel = () => {
+  const { notes } = useDiagramContext(selectWalkthroughNotes);
+  if (!notes || notes.isEmpty) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(styled.div, { position: "relative", children: /* @__PURE__ */ jsxs(
+    ScrollAreaAutosize,
+    {
+      className: cx(
+        "nowheel nopan nodrag",
+        vstack({
+          position: "absolute",
+          layerStyle: "likec4.dropdown",
+          gap: "sm",
+          padding: "md",
+          paddingTop: "xxs",
+          pointerEvents: "all",
+          maxWidth: "calc(100cqw - 32px)",
+          minWidth: "calc(100cqw - 50px)",
+          maxHeight: "calc(100cqh - 100px)",
+          width: "max-content",
+          cursor: "default",
+          overflow: "auto",
+          overscrollBehavior: "contain",
+          "@/sm": {
+            minWidth: 400,
+            maxWidth: 550
+          },
+          "@/lg": {
+            maxWidth: 700
+          }
+        })
+      ),
+      type: "scroll",
+      children: [
+        /* @__PURE__ */ jsx(SectionHeader, { children: "Notes" }),
+        /* @__PURE__ */ jsx(
+          MarkdownBlock,
+          {
+            value: notes,
+            fontSize: "sm",
+            emptyText: "No description",
+            className: css({
+              userSelect: "all"
+            })
+          }
+        )
+      ]
+    }
+  ) });
+};
+
+export { WalkthroughPanel };