@likec4/diagram 1.34.2 → 1.36.0

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

@@ -1,5 +1,4 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { RichText } from '@likec4/core/types';
 import { cx } from '@likec4/styles/css';
 import { Card, CardSection, Button, Group, Text, Spoiler, Stack } from '@mantine/core';
 import { useLocalStorage } from '@mantine/hooks';
@@ -7,24 +6,27 @@ import { AnimatePresence, m } from 'motion/react';
 import { Link } from '../../../components/Link.js';
 import { useDiagramContext } from '../../../hooks/useDiagram.js';
 import { card, title, description } from './DiagramTitlePanel.css.js';
-import IconMenu from '../../../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconMenu.js';
+import { useCurrentViewModel } from '../../../likec4model/useCurrentViewModel.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,
+    // 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 { id, title: title$1, description: description$1, links, isNotActiveWalkthrough } = useDiagramContext(selector);
+  const view = useCurrentViewModel();
+  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: isNotActiveWalkthrough && /* @__PURE__ */ jsx(
     m.div,
@@ -111,12 +113,12 @@ function DiagramTitlePanel() {
                         "id:",
                         " "
                       ] }),
-                      id
+                      view.id
                     ]
                   }
                 )
               ] }),
-              description$1.nonEmpty && /* @__PURE__ */ jsx(
+              view.description.nonEmpty && /* @__PURE__ */ jsx(
                 Spoiler,
                 {
                   maxHeight: 60,
@@ -127,12 +129,12 @@ function DiagramTitlePanel() {
                     {
                       className: description,
                       textScale: 0.9,
-                      value: description$1
+                      value: view.description
                     }
                   )
                 }
               ),
-              description$1.isEmpty && /* @__PURE__ */ jsx(
+              view.description.isEmpty && /* @__PURE__ */ jsx(
                 Text,
                 {
                   component: "div",
@@ -141,14 +143,14 @@ function DiagramTitlePanel() {
                   children: "no description"
                 }
               ),
-              links && /* @__PURE__ */ jsx(
+              view.links.length > 0 && /* @__PURE__ */ jsx(
                 Stack,
                 {
                   mt: "xs",
                   gap: 4,
                   justify: "stretch",
                   align: "stretch",
-                  children: links.map((link) => /* @__PURE__ */ jsx(Link, { value: link }, link.url))
+                  children: view.links.map((link) => /* @__PURE__ */ jsx(Link, { value: link }, link.url))
                 }
               )
             ] })

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

@@ -1,10 +1,10 @@
 import { css } from '@likec4/styles/css';
 
 const container = css({
-  bottom: 0,
-  right: 0,
-  padding: 8,
-  margin: 0
+  bottom: "0",
+  right: "0",
+  padding: "2",
+  margin: "0"
 });
 const icon = css({
   ["--ai-radius"]: "0px",
@@ -32,7 +32,7 @@ const card = css({
   }
 });
 const tabPanel = css({
-  padding: "2xs"
+  padding: "xxs"
 });
 const elementNotation = css({
   backgroundColor: "transparent",
@@ -54,8 +54,8 @@ const elementNotation = css({
   }
 });
 css({
-  fill: "likec4.palette.fill",
-  stroke: "likec4.palette.stroke",
+  fill: "var(--likec4-palette-fill)",
+  stroke: "var(--likec4-palette-stroke)",
   strokeWidth: 1,
   overflow: "visible",
   width: "100%",
@@ -68,8 +68,8 @@ css({
 const shapeBadge = css({
   fontWeight: 500,
   letterSpacing: "0.2px",
-  paddingTop: 0,
-  paddingBottom: 0,
+  paddingTop: "0",
+  paddingBottom: "0",
   textTransform: "lowercase",
   transition: "all 150ms ease-in-out",
   cursor: "pointer",
@@ -78,8 +78,8 @@ const shapeBadge = css({
   ["--badge-padding-x"]: "3px",
   ["--badge-height"]: "13.5px",
   ["--badge-lh"]: "1",
-  ["--badge-bg"]: "{colors.likec4.palette.fill}",
-  ["--badge-color"]: "{colors.likec4.palette.hiContrast}"
+  ["--badge-bg"]: "var(--likec4-palette-fill)",
+  ["--badge-color"]: "var(--likec4-palette-hiContrast)"
 });
 
 export { card, container, elementNotation, icon, shapeBadge, tabPanel };

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

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { cx, css } from '@likec4/styles/css';
+import { cx } from '@likec4/styles/css';
 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 { AnimatePresence, m } from 'motion/react';
@@ -9,9 +9,9 @@ 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 IconAlertTriangle from '../../../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconAlertTriangle.js';
-import IconHelpCircle from '../../../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconHelpCircle.js';
-import IconArrowDownRight from '../../../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconArrowDownRight.js';
+import IconAlertTriangle from '../../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconAlertTriangle.js';
+import IconHelpCircle from '../../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconHelpCircle.js';
+import IconArrowDownRight from '../../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconArrowDownRight.js';
 import { ElementShape } from '../../../base/primitives/element/ElementShape.js';
 
 const ElementNotation = ({ value }) => {
@@ -31,10 +31,7 @@ const ElementNotation = ({ value }) => {
       px: "xs",
       py: "sm",
       className: cx(
-        elementNotation,
-        css({
-          likec4Palette: color
-        })
+        elementNotation
       ),
       "data-likec4-color": color,
       onMouseEnter: () => {

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

@@ -2,17 +2,17 @@ import { css } from '@likec4/styles/css';
 
 const container = css({
   position: "absolute",
-  bottom: "0.5rem",
-  left: "50%",
+  bottom: "xxs",
+  left: "[50%]",
   transform: "translateX(-50%)",
-  padding: 0,
-  margin: 0,
+  padding: "[0px]",
+  margin: "[0px]",
   display: "flex",
   flexDirection: "column",
-  gap: "0.4rem",
+  gap: "[0.4rem]",
   alignItems: "center",
   md: {
-    gap: "0.6rem"
+    gap: "[0.6rem]"
   }
 });
 const tablerIcons = {
@@ -50,10 +50,10 @@ const btn = css({
 });
 const parallelStateFrame = css({
   position: "absolute",
-  margin: 0,
-  padding: 0,
-  top: 0,
-  left: 0,
+  margin: "0",
+  padding: "0",
+  top: "0",
+  left: "0",
   width: "100%",
   height: "100%",
   border: `2px solid`,

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

@@ -6,10 +6,10 @@ import { isTruthy, isNonNull } from 'remeda';
 import { useDiagramContext, useDiagram } from '../../../hooks/useDiagram.js';
 import { parallelStateFrame, btn, buttons, container } from './DynamicViewWalkthrough.css.js';
 import { useXYStore } from '../../../hooks/useXYFlow.js';
-import IconPlayerPlayFilled from '../../../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconPlayerPlayFilled.js';
-import IconPlayerSkipBackFilled from '../../../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconPlayerSkipBackFilled.js';
-import IconPlayerStopFilled from '../../../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconPlayerStopFilled.js';
-import IconPlayerSkipForwardFilled from '../../../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconPlayerSkipForwardFilled.js';
+import IconPlayerPlayFilled from '../../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconPlayerPlayFilled.js';
+import IconPlayerSkipBackFilled from '../../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconPlayerSkipBackFilled.js';
+import IconPlayerStopFilled from '../../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconPlayerStopFilled.js';
+import IconPlayerSkipForwardFilled from '../../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconPlayerSkipForwardFilled.js';
 
 function DynamicViewWalkthrough() {
   const isMobile = useXYStore((s) => s.width <= 750);

package/dist/likec4model/LikeC4ModelContext.d.ts

@@ -1,3 +1,6 @@
-import { LikeC4Model } from '@likec4/core/model';
+import { LikeC4Model, LikeC4ViewModel } from '@likec4/core/model';
+import { aux, DiagramView } from '@likec4/core/types';
 import { Context } from 'react';
 export declare const LikeC4ModelContext: Context<LikeC4Model<any> | null>;
+export type CurrentViewModel = LikeC4ViewModel<aux.UnknownLayouted, DiagramView<aux.UnknownLayouted>>;
+export declare const CurrentViewModelContext: Context<CurrentViewModel | null>;

package/dist/likec4model/LikeC4ModelContext.js

@@ -1,5 +1,6 @@
 import { createContext } from 'react';
 
 const LikeC4ModelContext = createContext(null);
+const CurrentViewModelContext = createContext(null);
 
-export { LikeC4ModelContext };
+export { CurrentViewModelContext, LikeC4ModelContext };

package/dist/likec4model/LikeC4ProjectsContext.d.ts

@@ -0,0 +1,7 @@
+import { LikeC4Project, ProjectId } from '@likec4/core/types';
+import { Context } from 'react';
+export type LikeC4ProjectsContext = {
+    projects: ReadonlyArray<LikeC4Project>;
+    onProjectChange: (id: ProjectId) => void;
+};
+export declare const LikeC4ProjectsContext: Context<LikeC4ProjectsContext | null>;

package/dist/likec4model/LikeC4ProjectsContext.js

@@ -0,0 +1,5 @@
+import { createContext } from 'react';
+
+const LikeC4ProjectsContext = createContext(null);
+
+export { LikeC4ProjectsContext };

package/dist/likec4model/index.d.ts

@@ -1,2 +1,4 @@
+export { useCurrentViewModel, } from './useCurrentViewModel';
 export { useLikeC4ElementsTree, } from './useLikeC4ElementsTree';
 export { useLikeC4Model, useLikeC4Specification, useLikeC4ViewModel, } from './useLikeC4Model';
+export { useChangeLikeC4Project, useHasProjects, useLikeC4ProjectId, useLikeC4Projects, useLikeC4ProjectsContext, } from './useLikeC4Project';

package/dist/likec4model/useCurrentViewModel.d.ts

@@ -0,0 +1,2 @@
+import { CurrentViewModel } from './LikeC4ModelContext';
+export declare function useCurrentViewModel(): CurrentViewModel;

package/dist/likec4model/useCurrentViewModel.js

@@ -0,0 +1,12 @@
+import { useContext } from 'react';
+import { CurrentViewModelContext } from './LikeC4ModelContext.js';
+
+function useCurrentViewModel() {
+  const vm = useContext(CurrentViewModelContext);
+  if (!vm) {
+    throw new Error("No LikeC4ViewModel in context found");
+  }
+  return vm;
+}
+
+export { useCurrentViewModel };

package/dist/likec4model/useLikeC4Model.d.ts

@@ -1,10 +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.Unknown>(): LikeC4Model<A>;
-export declare function useLikeC4Model<A extends aux.Any = aux.Unknown>(type: 'layouted'): LikeC4Model.Layouted<A>;
-export declare function useLikeC4Model<A extends aux.Any = aux.Unknown>(type: 'computed'): LikeC4Model.Computed<A>;
-export declare function useLikeC4Model<A extends aux.Any = aux.Unknown>(type: 'layouted' | 'computed' | undefined): LikeC4Model<A>;
-export declare function useLikeC4ViewModel<A extends aux.Any = aux.Unknown>(viewId: aux.LooseViewId<A>): LikeC4ViewModel<aux.toLayouted<A>> | null;
+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;

package/dist/likec4model/useLikeC4Model.js

@@ -1,31 +1,25 @@
-import { useContext } from 'react';
-import { isString } from 'remeda';
+import { deepEqual } from 'fast-equals';
+import { useContext, useState, useEffect } from 'react';
 import { LikeC4ModelContext } from './LikeC4ModelContext.js';
 
-function useLikeC4Model(type) {
+function useLikeC4Model() {
   const model = useContext(LikeC4ModelContext);
   if (!model) {
     throw new Error("LikeC4Model not found. Make sure you have LikeC4ModelProvider.");
   }
-  if (isString(type) && model.stage !== type) {
-    throw new Error(`Invalid LikeC4ModelContext, expected "${type}" but got "${model.stage}" in context`);
-  }
   return model;
 }
 function useLikeC4ViewModel(viewId) {
-  const model = useLikeC4Model("layouted");
-  const view = model.findView(viewId);
-  if (!view) {
-    return null;
-  }
-  if (!view.isDiagram()) {
-    throw new Error(`View "${viewId}" is not layouted`);
-  }
-  return view;
+  const model = useLikeC4Model();
+  return model.view(viewId);
 }
 function useLikeC4Specification() {
   const model = useLikeC4Model();
-  return model.$data.specification;
+  const [specification, setSpecification] = useState(model.$data.specification);
+  useEffect(() => {
+    setSpecification((current) => deepEqual(current, model.$data.specification) ? current : model.$data.specification);
+  }, [model]);
+  return specification;
 }
 
 export { useLikeC4Model, useLikeC4Specification, useLikeC4ViewModel };

package/dist/likec4model/useLikeC4Project.d.ts

@@ -0,0 +1,22 @@
+import { LikeC4Project, ProjectId } from '@likec4/core/types';
+import { LikeC4ProjectsContext } from './LikeC4ProjectsContext';
+/**
+ * @returns The list of available projects, or empty array if no projects are available.
+ */
+export declare function useLikeC4Projects(): ReadonlyArray<LikeC4Project>;
+/**
+ * @returns The callback to change current project.
+ */
+export declare function useChangeLikeC4Project(): (id: ProjectId) => void;
+/**
+ * @returns The callback to change current project.
+ */
+export declare function useLikeC4ProjectsContext(): LikeC4ProjectsContext;
+/**
+ * @returns True if there are more than one project available in the context.
+ */
+export declare function useHasProjects(): boolean;
+/**
+ * @returns The current project id.
+ */
+export declare function useLikeC4ProjectId(): ProjectId;

package/dist/likec4model/useLikeC4Project.js

@@ -0,0 +1,23 @@
+import { useContext } from 'react';
+import { LikeC4ModelContext } from './LikeC4ModelContext.js';
+import { LikeC4ProjectsContext } from './LikeC4ProjectsContext.js';
+
+const emptyProjects = [];
+const emptyOnProjectChange = () => {
+};
+const emptyContext = {
+  projects: emptyProjects,
+  onProjectChange: emptyOnProjectChange
+};
+function useLikeC4ProjectsContext() {
+  return useContext(LikeC4ProjectsContext) ?? emptyContext;
+}
+function useLikeC4ProjectId() {
+  const ctx = useContext(LikeC4ModelContext);
+  if (!ctx) {
+    throw new Error("No LikeC4ModelContext found");
+  }
+  return ctx.projectId;
+}
+
+export { useLikeC4ProjectId, useLikeC4ProjectsContext };

package/dist/navigationpanel/NavigationPanel.d.ts

@@ -0,0 +1,2 @@
+import { MemoExoticComponent } from 'react';
+export declare const NavigationPanel: MemoExoticComponent<() => import("react/jsx-runtime").JSX.Element>;

package/dist/navigationpanel/NavigationPanel.js

@@ -0,0 +1,122 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { VStack } from '@likec4/styles/jsx';
+import { hstack } from '@likec4/styles/patterns';
+import { Portal, Popover, PopoverTarget } from '@mantine/core';
+import { useUpdateEffect } from '@react-hookz/web';
+import { useActorRef, useSelector } from '@xstate/react';
+import { LayoutGroup, AnimatePresence } from 'motion/react';
+import * as m from 'motion/react-m';
+import { memo, useEffect } from 'react';
+import { useDiagramActorRef } from '../hooks/safeContext.js';
+import { useDiagramContext } from '../hooks/useDiagram.js';
+import { useMantinePortalProps } from '../hooks/useMantinePortalProps.js';
+import { useCurrentViewModel } from '../likec4model/useCurrentViewModel.js';
+import { navigationPanelActorLogic } from './actor.js';
+import { NavigationPanelActorContextProvider } from './hooks.js';
+import { NavigationPanelControls } from './NavigationPanelControls.js';
+import { NavigationPanelDropdown } from './NavigationPanelDropdown.js';
+import { EditorPanel } from './editorpanel/EditorPanel.js';
+import { ActiveWalkthroughControls } from './walkthrough/ActiveWalkthroughControls.js';
+
+const NavigationPanel = memo(() => {
+  const diagramActor = useDiagramActorRef();
+  const viewModel = useCurrentViewModel();
+  const { portalProps } = useMantinePortalProps();
+  const actorRef = useActorRef(
+    navigationPanelActorLogic,
+    {
+      input: {
+        viewModel
+      }
+    }
+  );
+  useEffect(() => {
+    const subscription = actorRef.on("navigateTo", (event) => {
+      if (diagramActor.getSnapshot().context.view.id !== event.viewId) {
+        diagramActor.send({ type: "navigate.to", viewId: event.viewId });
+      }
+    });
+    return () => subscription.unsubscribe();
+  }, [actorRef, diagramActor]);
+  useUpdateEffect(() => {
+    actorRef.send({ type: "update.inputs", inputs: { viewModel } });
+  }, [viewModel]);
+  return /* @__PURE__ */ jsx(Portal, { ...portalProps, children: /* @__PURE__ */ jsx(
+    VStack,
+    {
+      className: "react-flow__panel",
+      css: {
+        alignItems: "flex-start",
+        pointerEvents: "none",
+        top: "0",
+        left: "0",
+        margin: "0",
+        width: "100%",
+        gap: "xxs",
+        maxWidth: [
+          "calc(100vw)",
+          "calc(100cqw)"
+        ],
+        "@/sm": {
+          margin: "xs",
+          gap: "xs",
+          width: "max-content",
+          maxWidth: [
+            "calc(100vw - 2 * {spacing.md})",
+            "calc(100cqw - 2 * {spacing.md})"
+          ]
+        }
+      },
+      children: /* @__PURE__ */ jsxs(NavigationPanelActorContextProvider, { value: actorRef, children: [
+        /* @__PURE__ */ jsx(NavigationPanelImpl, { actor: actorRef }),
+        /* @__PURE__ */ jsx(EditorPanel, {})
+      ] })
+    }
+  ) });
+});
+NavigationPanel.displayName = "NavigationPanel";
+const NavigationPanelImpl = ({ actor }) => {
+  const opened = useSelector(actor, (s) => s.hasTag("active"));
+  const portalProps = useMantinePortalProps();
+  return /* @__PURE__ */ jsxs(
+    Popover,
+    {
+      offset: {
+        mainAxis: 2
+      },
+      middlewares: { flip: false },
+      opened,
+      position: "bottom-start",
+      trapFocus: true,
+      ...portalProps,
+      clickOutsideEvents: ["pointerdown", "mousedown", "click"],
+      onDismiss: () => actor.send({ type: "dropdown.dismiss" }),
+      children: [
+        /* @__PURE__ */ jsx(NavigationPanelPopoverTarget, { actor }),
+        /* @__PURE__ */ jsx(NavigationPanelDropdown, {})
+      ]
+    }
+  );
+};
+const NavigationPanelPopoverTarget = ({ actor }) => {
+  const isActiveWalkthrough = useDiagramContext((c) => c.activeWalkthrough !== null);
+  return /* @__PURE__ */ jsx(LayoutGroup, { children: /* @__PURE__ */ jsx(PopoverTarget, { children: /* @__PURE__ */ jsx(
+    m.div,
+    {
+      layout: true,
+      className: hstack({
+        layerStyle: "likec4.panel",
+        position: "relative",
+        gap: "xs",
+        cursor: "pointer",
+        paddingRight: "md",
+        pointerEvents: "all",
+        width: "100%"
+      }),
+      onMouseLeave: () => actor.send({ type: "breadcrumbs.mouseLeave" }),
+      children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "popLayout", children: isActiveWalkthrough ? /* @__PURE__ */ jsx(ActiveWalkthroughControls, {}) : /* @__PURE__ */ jsx(NavigationPanelControls, {}) })
+    }
+  ) }) });
+};
+
+export { NavigationPanel };

package/dist/navigationpanel/NavigationPanelControls.d.ts

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