likec4 1.50.0 → 1.52.0

package/__app__/src/routes/single.js

@@ -1,13 +1,15 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { d8 as useRouter, d9 as useParams, da as isNotFound, db as Container, br as Alert, U as Text, dc as Code, W as Button, dd as e, de as e$1, as as e$2, bt as Group, bh as rem, df as Link, bZ as Title, d1 as createFileRoute, Q as m, d0 as Outlet, d as deepEqual, s as shallowEqual, dg as useMatches, dh as useIsomorphicLayoutEffect, d3 as useDocumentTitle, di as SimpleGrid, dj as useInViewport, dk as e$3, ci as Card, aQ as Box, d2 as redirect, k as useMantineColorScheme, dl as useComputedColorScheme, aA as ActionIcon, aF as MotionDiv, cN as isValidMotionProp, aD as Menu, bc as MenuTarget, bd as MenuDropdown, be as MenuItem, dm as MenuDivider, bp as Stack, b5 as CopyButton$1, dn as Select, dp as ModalRoot, dq as ModalOverlay, dr as ModalContent, ds as ModalBody, bL as Tabs, bM as TabsList, bN as TabsTab, bO as TabsPanel, dt as useMantineTheme, du as useMediaQuery, cq as useDisclosure, aG as Divider, dv as MenuLabel, dw as useSearch, dx as LoadingOverlay, dy as toBlob, c$ as stripSearchParams, cZ as z, cY as useNavigate, bS as useCallbackRef, aL as useIsMounted, T as Tooltip, dz as useAsync, dA as Tt, dB as _t, bP as ScrollArea, dC as Ht, dD as notFound } from "../vendors.js";
+import { d8 as useRouter, d9 as useParams, da as isNotFound, db as Container, br as Alert, U as Text, dc as Code, W as Button, dd as e, de as e$1, as as e$2, bt as Group, bh as rem, df as Link, bZ as Title, d1 as createFileRoute, Q as m, d0 as Outlet, k as useMantineColorScheme, dg as useComputedColorScheme, cY as useNavigate, aA as ActionIcon, c9 as useHotkeys, aI as AnimatePresence, d as deepEqual, s as shallowEqual, dh as useMatches, di as useIsomorphicLayoutEffect, a9 as r, dj as onMount, v as useStore$1, r as atom, bq as useTree, bs as Tree, b6 as HoverCard, b7 as HoverCardTarget, b8 as HoverCardDropdown, R as ThemeIcon, ch as useLocalStorage, dk as Drawer, bP as ScrollArea, S as SegmentedControl, d3 as useDocumentTitle, dl as Burger, dm as SimpleGrid, dn as useInViewport, dp as e$3, ci as Card, aQ as Box$1, d2 as redirect, aF as MotionDiv, cN as isValidMotionProp, aD as Menu, bc as MenuTarget, bd as MenuDropdown, be as MenuItem, dq as MenuDivider, bp as Stack, b5 as CopyButton$1, dr as Select, ds as ModalRoot, dt as ModalOverlay, du as ModalContent, dv as ModalBody, bL as Tabs, bM as TabsList, bN as TabsTab, bO as TabsPanel, dw as useMantineTheme, dx as useMediaQuery, cq as useDisclosure, aG as Divider, dy as MenuLabel, dz as useSearch, dA as LoadingOverlay, dB as toBlob, c$ as stripSearchParams, cZ as z, bS as useCallbackRef, aL as useIsMounted, T as Tooltip, dC as useAsync, dD as Tt, dE as _t, dF as Ht, dG as notFound } from "../vendors.js";
 import { loadModel } from "likec4:model";
-import { c as css, s as styled, I as IconRendererProvider, a as LikeC4ModelProvider, u as useUpdateEffect, S as StaticLikeC4Diagram, M as Markdown, b as LikeC4AdHocViewEditor, B as Box$1, d as IconMoonStars, e as IconSun, f as createStyleContext, n as navigationPanel, i as isCssProperty, g as useLikeC4Projects$1, h as IconChevronDown, j as IconAlertTriangle, k as IconCheck, l as IconCopy, m as IconExternalLink, o as IconShare, p as pickViewBounds, q as LikeC4Diagram, r as useLikeC4Model, t as useDiagramContext, v as useDiagram, w as useOnDiagramEvent, x as LikeC4EditorProvider } from "../likec4.js";
+import { c as css, s as styled, I as IconRendererProvider, a as LikeC4ModelProvider, b as IconMoonStars, d as IconSun, n as normalizeSearch, S as SearchContext, e as SearchControl, F as FramerMotionConfig, O as Overlay, f as bodyCss, g as dialogCss, h as SearchPanelContent, u as useUpdateEffect, i as useLikeC4Model, j as StaticLikeC4Diagram, B as Box, k as IconStarFilled, l as IconStack2, m as IconLayoutDashboard, o as IconFileCode, p as IconFolderOpen, q as IconFolderFilled, r as IconArrowLeft, N as NavigationPanel$1, M as Markdown, t as LikeC4AdHocViewEditor, v as createStyleContext, w as navigationPanel, x as isCssProperty, y as useLikeC4Projects$1, z as IconChevronDown, A as IconAlertTriangle, C as IconCheck, D as IconCopy, E as IconExternalLink, G as IconShare, H as pickViewBounds, J as LikeC4Diagram, K as useDiagramContext, P as useDiagram, Q as useOnDiagramEvent, R as LikeC4EditorProvider } from "../likec4.js";
 import { getProjectIcons } from "likec4:icons";
-import { useMemo, createContext, useContext, useState, useEffect, memo, useCallback, useRef } from "react";
+import { useMemo, createContext, useContext, useRef, useEffect, useState, useCallback, memo } from "react";
 import { useStore } from "likec4/vite-plugin/internal";
 import { RichText } from "@likec4/core/types";
+import { nonexhaustive, compareNatural } from "@likec4/core/utils";
 import { pageTitle, ComponentName, useHashHistory, isDevelopment, krokiPumlSvgUrl, krokiD2SvgUrl } from "../const.js";
 import { likec4rpc, isRpcAvailable } from "likec4:rpc";
+import { R as Route$c, r as resolveForceColorScheme } from "./index.js";
 import { useLikeC4Projects } from "likec4:projects";
 function Fallback({ error: _error, resetErrorBoundary }) {
   const router = useRouter(), params = useParams({
@@ -197,6 +199,95 @@ function RouteComponent$1() {
   const { $likec4model, projectId } = Route$b.useLoaderData();
   return /* @__PURE__ */ jsx(ViewOutlet, { children: /* @__PURE__ */ jsx(m, { FallbackComponent: Fallback, children: /* @__PURE__ */ jsx(LikeC4IconRendererContext, { projectId, children: /* @__PURE__ */ jsx(LikeC4ModelContext, { likec4model: $likec4model, children: /* @__PURE__ */ jsx(Outlet, {}) }) }) }) });
 }
+function ColorSchemeToggle() {
+  const { setColorScheme } = useMantineColorScheme({
+    keepTransitions: !0
+  }), computedColorScheme = useComputedColorScheme("light"), navigate = useNavigate(), { theme: urlTheme } = Route$c.useSearch(), isForced = resolveForceColorScheme(urlTheme) != null, pendingScheme = useRef(null);
+  return useEffect(() => {
+    pendingScheme.current != null && !isForced && (setColorScheme(pendingScheme.current), pendingScheme.current = null);
+  }, [isForced, setColorScheme]), /* @__PURE__ */ jsxs(
+    ActionIcon,
+    {
+      size: "md",
+      variant: "subtle",
+      color: "gray",
+      onClick: () => {
+        if (pendingScheme.current != null) return;
+        const next = computedColorScheme === "light" ? "dark" : "light";
+        isForced ? (pendingScheme.current = next, navigate({
+          from: Route$c.fullPath,
+          search: (prev) => ({ ...prev, theme: void 0 }),
+          replace: !0
+        }).catch(() => {
+          pendingScheme.current = null;
+        })) : setColorScheme(next);
+      },
+      "aria-label": "Toggle color scheme",
+      children: [
+        /* @__PURE__ */ jsx(IconMoonStars, { stroke: 1.5, display: computedColorScheme === "light" ? "block" : "none" }),
+        /* @__PURE__ */ jsx(IconSun, { stroke: 1.5, display: computedColorScheme === "dark" ? "block" : "none" })
+      ]
+    }
+  );
+}
+function OverviewSearchAdapter({
+  onClose,
+  children
+}) {
+  const [searchValue, setSearchValue] = useState(""), [pickViewFor, setPickViewFor] = useState(null), navigate = useNavigate(), navigateTo = useCallback((viewId, focusOnElement) => {
+    onClose(), navigate({
+      to: "/view/$viewId/",
+      params: { viewId },
+      search: (prev) => ({
+        ...prev,
+        ...focusOnElement && { focusOnElement }
+      })
+    });
+  }, [navigate, onClose]), openPickView = useCallback((elementFqn) => {
+    setPickViewFor(elementFqn);
+  }, []), closePickView = useCallback(() => {
+    setPickViewFor(null);
+  }, []), value = useMemo(() => ({
+    searchValue,
+    setSearchValue,
+    normalizedSearch: normalizeSearch(searchValue),
+    navigateTo,
+    openPickView,
+    closePickView,
+    pickViewFor,
+    close: onClose,
+    currentViewId: null,
+    openedWithSearch: null
+  }), [searchValue, pickViewFor, navigateTo, openPickView, closePickView, onClose]);
+  return /* @__PURE__ */ jsx(SearchContext.Provider, { value, children });
+}
+const OverviewSearch = memo(() => {
+  const [isOpened, setIsOpened] = useState(!1), open = useCallback(() => setIsOpened(!0), []), close = useCallback(() => setIsOpened(!1), []);
+  return useHotkeys([
+    ["mod+k", open, { preventDefault: !0 }]
+  ]), /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(SearchControl, { onClick: open }),
+    /* @__PURE__ */ jsx(FramerMotionConfig, { children: /* @__PURE__ */ jsx(AnimatePresence, { children: isOpened && /* @__PURE__ */ jsx(
+      Overlay,
+      {
+        fullscreen: !0,
+        withBackdrop: !1,
+        backdrop: {
+          opacity: 0.9
+        },
+        classes: {
+          dialog: dialogCss,
+          body: bodyCss
+        },
+        openDelay: 0,
+        onClose: close,
+        "data-likec4-search": "true",
+        children: /* @__PURE__ */ jsx(OverviewSearchAdapter, { onClose: close, children: /* @__PURE__ */ jsx(SearchPanelContent, {}) })
+      }
+    ) }) })
+  ] });
+});
+OverviewSearch.displayName = "OverviewSearch";
 function useTransparentBackground(enabled = !0) {
   useIsomorphicLayoutEffect(() => {
     const htmlEl = document.body.parentElement;
@@ -247,6 +338,251 @@ function useCurrentProject() {
   });
   return projects.find((p) => p.id === projectId) ?? projects[0];
 }
+const isTreeNodeData = (node) => "type" in node && ["file", "folder", "view", "deployment-view"].includes(node.type);
+function dropFilename(relativePath) {
+  return relativePath === "" ? "" : relativePath.split("/").slice(0, -1).join("/");
+}
+function compareTreeNodes(a, b) {
+  return a.children.length === 0 && b.children.length > 0 ? 1 : a.children.length > 0 && b.children.length === 0 ? -1 : compareNatural(a.label, b.label);
+}
+function buildDiagramTreeData(views, groupBy) {
+  const root2 = {
+    value: "",
+    label: "Diagrams",
+    type: "folder",
+    children: []
+  }, findParent = (path) => {
+    let parent = root2;
+    if (path === "")
+      return parent;
+    const segments = path.split("/"), traversed = ["@fs"];
+    for (; segments.length; ) {
+      const label = segments.shift();
+      traversed.push(label);
+      const value = traversed.join("/");
+      let node = r(parent.children, (n) => n.value === value);
+      node || (node = { label, value, type: "folder", children: [] }, parent.children.push(node)), parent = node;
+    }
+    return parent;
+  };
+  for (const view of views) {
+    let relativePath;
+    switch (groupBy) {
+      case "by-files":
+        relativePath = view.$view.sourcePath ?? "";
+        break;
+      case "by-folders":
+        relativePath = dropFilename(view.$view.sourcePath ?? "");
+        break;
+      case "none":
+        relativePath = "";
+        break;
+      default:
+        nonexhaustive(groupBy);
+    }
+    const parent = findParent(relativePath);
+    parent.children.push({
+      value: view.id,
+      label: view.title ?? view.id,
+      type: view.isDeploymentView() ? "deployment-view" : "view",
+      children: []
+    }), parent !== root2 && (parent.children.sort(compareTreeNodes), groupBy === "by-files" && parent.type !== "file" && (parent.type = "file"));
+  }
+  return root2.children.sort(compareTreeNodes);
+}
+function useDiagramsTreeData(groupBy = "by-files") {
+  const model = useLikeC4Model();
+  return useMemo(() => buildDiagramTreeData([...model.views()], groupBy), [model, groupBy]);
+}
+const drawerOpenedAtom = atom(!1);
+onMount(drawerOpenedAtom, () => {
+  drawerOpenedAtom.set(!1);
+});
+const useDrawerOpened = () => useStore$1(drawerOpenedAtom), SidebarDrawerOps = {
+  open: () => drawerOpenedAtom.set(!0),
+  close: () => drawerOpenedAtom.set(!1)
+}, isFile = (node) => isTreeNodeData(node) && node.type === "file", FolderIcon = ({ node, expanded }) => isFile(node) ? /* @__PURE__ */ jsx(ThemeIcon, { size: "sm", variant: "transparent", color: "indigo", children: /* @__PURE__ */ jsx(IconFileCode, { size: 16 }) }) : /* @__PURE__ */ jsx(ThemeIcon, { size: "sm", variant: "transparent", color: "violet", children: expanded ? /* @__PURE__ */ jsx(IconFolderOpen, { size: 16 }) : /* @__PURE__ */ jsx(IconFolderFilled, { size: 16 }) }), setHoveredNode = () => {
+}, DiagramsTree = /* @__PURE__ */ memo(({ groupBy }) => {
+  const views = useLikeC4Views(), data = useDiagramsTreeData(groupBy), navigate = useNavigate(), navigateTo = (viewId2) => {
+    SidebarDrawerOps.close(), navigate({
+      to: "/view/$viewId/",
+      viewTransition: !1,
+      params: { viewId: viewId2 }
+    });
+  }, [diagram] = useCurrentView(), viewId = diagram?.id ?? null, tree = useTree({
+    multiple: !1
+  });
+  tree.setHoveredNode = setHoveredNode;
+  const sourcePath = diagram?.sourcePath ?? null;
+  useUpdateEffect(() => {
+    tree.collapseAllNodes();
+  }, [groupBy]), useEffect(() => {
+    if (sourcePath) {
+      const segments = sourcePath.split("/");
+      let path = "@fs";
+      for (const segment of segments)
+        path += `/${segment}`, tree.expand(path);
+    }
+  }, [sourcePath, groupBy]), useEffect(() => {
+    viewId && tree.select(viewId);
+  }, [viewId]);
+  const theme = useComputedColorScheme();
+  return /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(
+    Tree,
+    {
+      allowRangeSelection: !1,
+      tree,
+      data,
+      styles: {
+        node: {
+          marginTop: 2,
+          marginBottom: 2
+        }
+      },
+      levelOffset: "md",
+      renderNode: ({ node, selected, expanded, elementProps, hasChildren }) => /* @__PURE__ */ jsx(DiagramPreviewHoverCard, { diagram: hasChildren ? void 0 : views.find((v) => v.id === node.value), children: /* @__PURE__ */ jsx(
+        Button,
+        {
+          fullWidth: !0,
+          color: theme === "light" ? "dark" : "gray",
+          variant: selected ? "transparent" : "subtle",
+          size: "sm",
+          fz: "sm",
+          fw: hasChildren ? "600" : "500",
+          justify: "flex-start",
+          styles: {
+            section: {
+              opacity: 0.5
+            }
+          },
+          leftSection: /* @__PURE__ */ jsxs(Fragment, { children: [
+            !hasChildren && node.value === "index" && /* @__PURE__ */ jsx(IconStarFilled, { size: 14, opacity: 0.7 }),
+            !hasChildren && node.value !== "index" && isTreeNodeData(node) && /* @__PURE__ */ jsxs(Fragment, { children: [
+              node.type === "deployment-view" && /* @__PURE__ */ jsx(IconStack2, { size: 14 }),
+              node.type === "view" && /* @__PURE__ */ jsx(IconLayoutDashboard, { size: 14 })
+            ] }),
+            hasChildren && /* @__PURE__ */ jsx(FolderIcon, { node, expanded })
+          ] }),
+          ...elementProps,
+          ...!hasChildren && {
+            onClick: (e2) => {
+              e2.stopPropagation(), navigateTo(node.value);
+            }
+          },
+          children: node.label
+        }
+      ) })
+    }
+  ) });
+}, (prev, next) => prev.groupBy === next.groupBy);
+function DiagramPreviewHoverCard({ diagram, children }) {
+  const ratio = diagram ? Math.max(diagram.bounds.width / 400, diagram.bounds.height / 300) : 1, width = diagram ? Math.round(diagram.bounds.width / ratio) : 0, height = diagram ? Math.round(diagram.bounds.height / ratio) : 0;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    diagram && /* @__PURE__ */ jsxs(HoverCard, { position: "right-start", openDelay: 400, closeDelay: 100, keepMounted: !1, shadow: "lg", children: [
+      /* @__PURE__ */ jsx(HoverCardTarget, { children }),
+      /* @__PURE__ */ jsx(HoverCardDropdown, { style: { width, height }, p: "xs", children: /* @__PURE__ */ jsx(DiagramPreview, { diagram }) })
+    ] }),
+    !diagram && children
+  ] });
+}
+const DiagramPreview = memo(({ diagram }) => {
+  const ratio = Math.max(diagram.bounds.width / 400, diagram.bounds.height / 300), width = Math.round(diagram.bounds.width / ratio), height = Math.round(diagram.bounds.height / ratio);
+  return /* @__PURE__ */ jsx(
+    StaticLikeC4Diagram,
+    {
+      view: diagram,
+      fitView: !0,
+      fitViewPadding: "4px",
+      enableElementDetails: !1,
+      reduceGraphics: !0,
+      initialWidth: width,
+      initialHeight: height
+    }
+  );
+}, (prev, next) => prev.diagram.id === next.diagram.id), SidebarDrawer = memo(() => {
+  const opened = useDrawerOpened(), [grouping, setGrouping] = useLocalStorage({
+    key: "sidebar-drawer-grouping",
+    defaultValue: "by-files"
+  }), isSingleProject = useMatches({
+    select: (matches) => matches.some((match) => match.routeId === "/_single")
+  });
+  return /* @__PURE__ */ jsxs(
+    Drawer.Root,
+    {
+      keepMounted: isSingleProject,
+      opened,
+      scrollAreaComponent: ScrollArea.Autosize,
+      onClose: SidebarDrawerOps.close,
+      children: [
+        /* @__PURE__ */ jsx(Drawer.Overlay, { blur: 2 }),
+        /* @__PURE__ */ jsxs(Drawer.Content, { children: [
+          /* @__PURE__ */ jsxs(Drawer.Header, { children: [
+            /* @__PURE__ */ jsxs(Group, { gap: "xs", children: [
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  component: Link,
+                  to: "/",
+                  leftSection: /* @__PURE__ */ jsx(IconArrowLeft, { size: 14 }),
+                  color: "dimmed",
+                  variant: "subtle",
+                  px: rem(5),
+                  styles: {
+                    section: {
+                      marginInlineEnd: 4
+                    }
+                  },
+                  size: "xs",
+                  children: "Overview"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                SegmentedControl,
+                {
+                  size: "xs",
+                  withItemsBorders: !1,
+                  value: grouping,
+                  onChange: setGrouping,
+                  data: [
+                    { label: "By files", value: "by-files" },
+                    { label: "By folders", value: "by-folders" },
+                    { label: "List", value: "none" }
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  leftSection: /* @__PURE__ */ jsx(IconStarFilled, { size: 12, stroke: 2 }),
+                  color: "dimmed",
+                  variant: "subtle",
+                  px: rem(5),
+                  styles: {
+                    section: {
+                      marginInlineEnd: 4
+                    }
+                  },
+                  size: "xs",
+                  renderRoot: (props) => /* @__PURE__ */ jsx(
+                    Link,
+                    {
+                      to: "/view/$viewId",
+                      params: { viewId: "index" },
+                      ...props
+                    }
+                  ),
+                  children: "Open index"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx(Drawer.CloseButton, {})
+          ] }),
+          /* @__PURE__ */ jsx(Drawer.Body, { children: /* @__PURE__ */ jsx(DiagramsTree, { groupBy: grouping }) })
+        ] })
+      ]
+    }
+  );
+});
 css({
   color: "text.dimmed"
 });
@@ -281,16 +617,54 @@ const previewBg = css({
 function RouteComponent() {
   useDocumentTitle(pageTitle);
   const views = useLikeC4Views();
-  return /* @__PURE__ */ jsx(Container, { size: "xl", children: /* @__PURE__ */ jsx(
-    SimpleGrid,
-    {
-      p: { base: "md", sm: "xl" },
-      cols: { base: 1, sm: 2, md: 3, xl: 4 },
-      spacing: { base: 10, sm: "xl" },
-      verticalSpacing: { base: "md", sm: "xl" },
-      children: views.map((v) => /* @__PURE__ */ jsx(ViewCard, { view: v }, v.id))
-    }
-  ) });
+  return /* @__PURE__ */ jsxs(Container, { size: "xl", children: [
+    /* @__PURE__ */ jsx(SidebarDrawer, {}),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: css({
+          containerName: "likec4-root",
+          containerType: "inline-size",
+          display: "flex",
+          alignItems: "flex-start",
+          justifyContent: "space-between",
+          padding: "xs",
+          gap: "xs",
+          position: "sticky",
+          top: "0",
+          zIndex: "10",
+          backgroundColor: "likec4.panel.bg/85",
+          backdropFilter: "blur(8px)"
+        }),
+        children: [
+          /* @__PURE__ */ jsx(NavigationPanel$1.Root, { css: { position: "relative", width: "max-content", margin: "0" }, children: /* @__PURE__ */ jsxs(NavigationPanel$1.Body, { children: [
+            /* @__PURE__ */ jsx("div", { style: { width: 0, height: 36 }, "aria-hidden": !0 }),
+            /* @__PURE__ */ jsx(Burger, { size: "sm", onClick: SidebarDrawerOps.open, "aria-label": "Toggle navigation" }),
+            /* @__PURE__ */ jsx(
+              NavigationPanel$1.Logo,
+              {
+                css: { flexShrink: 0 },
+                onClick: () => window.scrollTo({ top: 0, behavior: "smooth" })
+              }
+            ),
+            /* @__PURE__ */ jsx(OverviewSearch, {})
+          ] }) }),
+          /* @__PURE__ */ jsx(NavigationPanel$1.Root, { panelPosition: "right", css: { position: "relative", margin: "0" }, children: /* @__PURE__ */ jsx(NavigationPanel$1.Body, { children: /* @__PURE__ */ jsx("div", { style: { display: "flex", alignItems: "center", minHeight: 36 }, children: /* @__PURE__ */ jsx(ColorSchemeToggle, {}) }) }) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      SimpleGrid,
+      {
+        p: { base: "md", sm: "md" },
+        pt: { base: "sm", sm: "sm" },
+        cols: { base: 1, sm: 2, md: 3, xl: 4 },
+        spacing: { base: 10, sm: "xl" },
+        verticalSpacing: { base: "md", sm: "xl" },
+        children: views.map((v) => /* @__PURE__ */ jsx(ViewCard, { view: v }, v.id))
+      }
+    )
+  ] });
 }
 function ViewCard({ view }) {
   const [visible, setVisible] = useState(!1), { ref, inViewport } = useInViewport();
@@ -308,7 +682,7 @@ function ViewCard({ view }) {
       className: "group",
       withBorder: !0,
       children: [
-        /* @__PURE__ */ jsx(Card.Section, { children: /* @__PURE__ */ jsx(Box, { className: previewBg, style: { height: 200 }, children: visible && /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx(Card.Section, { children: /* @__PURE__ */ jsx(Box$1, { className: previewBg, style: { height: 200 }, children: visible && /* @__PURE__ */ jsx(
           StaticLikeC4Diagram,
           {
             background: "transparent",
@@ -409,7 +783,7 @@ function WebcomponentPage() {
     </html>
   `;
   return /* @__PURE__ */ jsx(
-    Box$1,
+    Box,
     {
       css: {
         position: "fixed",
@@ -435,26 +809,6 @@ function WebcomponentPage() {
     }
   );
 }
-function ColorSchemeToggle() {
-  const { setColorScheme } = useMantineColorScheme({
-    keepTransitions: !0
-  }), computedColorScheme = useComputedColorScheme("light");
-  return /* @__PURE__ */ jsxs(
-    ActionIcon,
-    {
-      visibleFrom: "sm",
-      size: "md",
-      variant: "subtle",
-      color: "gray",
-      onClick: () => setColorScheme(computedColorScheme === "light" ? "dark" : "light"),
-      "aria-label": "Toggle color scheme",
-      children: [
-        /* @__PURE__ */ jsx(IconMoonStars, { stroke: 1.5, display: computedColorScheme === "light" ? "block" : "none" }),
-        /* @__PURE__ */ jsx(IconSun, { stroke: 1.5, display: computedColorScheme === "dark" ? "block" : "none" })
-      ]
-    }
-  );
-}
 const { withProvider, withContext } = createStyleContext(navigationPanel), shouldForwardProp = (prop, variantKeys) => !variantKeys.includes(prop) && (isValidMotionProp(prop) || !isCssProperty(prop)), Root = withProvider(MotionDiv, "root", {
   shouldForwardProp
 }), Body = withContext(MotionDiv, "body", {
@@ -560,10 +914,10 @@ const AlertLocalhost = () => /* @__PURE__ */ jsx(
 `.trim();
   return /* @__PURE__ */ jsxs(Stack, { children: [
     code.includes("http://localhost") && /* @__PURE__ */ jsx(AlertLocalhost, {}),
-    /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(Text, { size: "sm", children: "Embedded view is an iframe with a static diagram" }) }),
+    /* @__PURE__ */ jsx(Box$1, { children: /* @__PURE__ */ jsx(Text, { size: "sm", children: "Embedded view is an iframe with a static diagram" }) }),
     /* @__PURE__ */ jsxs(Stack, { gap: "xs", children: [
       /* @__PURE__ */ jsxs(Group, { justify: "space-between", children: [
-        /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(Text, { fw: "500", size: "sm", children: "HTML" }) }),
+        /* @__PURE__ */ jsx(Box$1, { children: /* @__PURE__ */ jsx(Text, { fw: "500", size: "sm", children: "HTML" }) }),
         /* @__PURE__ */ jsxs(Group, { gap: "xs", children: [
           /* @__PURE__ */ jsx(ActionIcon, { component: "a", href, target: "_blank", variant: "light", color: "gray", children: /* @__PURE__ */ jsx(IconExternalLink, {}) }),
           /* @__PURE__ */ jsx(CopyButton$1, { value: code, timeout: 1500, children: CopyButtonChild })
@@ -571,7 +925,7 @@ const AlertLocalhost = () => /* @__PURE__ */ jsx(
       ] }),
       /* @__PURE__ */ jsx(Code, { block: !0, children: code }),
       /* @__PURE__ */ jsx(
-        Box,
+        Box$1,
         {
           style: {
             alignSelf: "flex-start"
@@ -619,10 +973,10 @@ function WebcomponentsPanel({ diagram }) {
   );
   return /* @__PURE__ */ jsxs(Stack, { children: [
     jscode.includes("http://localhost") && /* @__PURE__ */ jsx(AlertLocalhost, {}),
-    /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(Text, { size: "sm", children: "Add this script to your page:" }) }),
+    /* @__PURE__ */ jsx(Box$1, { children: /* @__PURE__ */ jsx(Text, { size: "sm", children: "Add this script to your page:" }) }),
     /* @__PURE__ */ jsxs(Stack, { gap: "xs", children: [
       /* @__PURE__ */ jsxs(Group, { justify: "space-between", children: [
-        /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(Text, { fw: "500", size: "sm", children: "JavaScript" }) }),
+        /* @__PURE__ */ jsx(Box$1, { children: /* @__PURE__ */ jsx(Text, { fw: "500", size: "sm", children: "JavaScript" }) }),
         /* @__PURE__ */ jsxs(Group, { gap: "xs", children: [
           /* @__PURE__ */ jsx(ActionIcon, { component: "a", href: webcomponentPreview.href, target: "_blank", variant: "light", color: "gray", children: /* @__PURE__ */ jsx(IconExternalLink, {}) }),
           /* @__PURE__ */ jsx(
@@ -636,7 +990,7 @@ function WebcomponentsPanel({ diagram }) {
         ] })
       ] }),
       /* @__PURE__ */ jsx(Code, { block: !0, children: jscode }),
-      /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsxs(Text, { size: "sm", c: "dimmed", children: [
+      /* @__PURE__ */ jsx(Box$1, { children: /* @__PURE__ */ jsxs(Text, { size: "sm", c: "dimmed", children: [
         "This script defines a custom element (webcomponent) that renders your diagrams.",
         /* @__PURE__ */ jsx("br", {}),
         "Script must be inserted once in the ",
@@ -649,8 +1003,8 @@ function WebcomponentsPanel({ diagram }) {
     ] }),
     /* @__PURE__ */ jsxs(Stack, { gap: "xs", children: [
       /* @__PURE__ */ jsxs(Group, { justify: "space-between", children: [
-        /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(Text, { fw: "500", size: "sm", children: "HTML" }) }),
-        /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx(Box$1, { children: /* @__PURE__ */ jsx(Text, { fw: "500", size: "sm", children: "HTML" }) }),
+        /* @__PURE__ */ jsx(Box$1, { children: /* @__PURE__ */ jsx(
           CopyButton$1,
           {
             value: htmlCode,
@@ -660,7 +1014,7 @@ function WebcomponentsPanel({ diagram }) {
         ) })
       ] }),
       /* @__PURE__ */ jsx(Code, { block: !0, children: htmlCode }),
-      /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsxs(Text, { size: "sm", c: "dimmed", children: [
+      /* @__PURE__ */ jsx(Box$1, { children: /* @__PURE__ */ jsxs(Text, { size: "sm", c: "dimmed", children: [
         "Insert this code to your page. Page may have multiple ",
         /* @__PURE__ */ jsx("code", { children: "<likec4-view>" }),
         "."
@@ -890,7 +1244,7 @@ function GuardedExportPage({ diagram }) {
     });
   }, extraPadding = 16, width = bounds.width + padding * 2 + extraPadding, height = bounds.height + padding * 2 + extraPadding;
   return /* @__PURE__ */ jsxs(
-    Box$1,
+    Box,
     {
       ref: viewportRef,
       "data-testid": "export-page",
@@ -1065,7 +1419,8 @@ function ViewReact() {
       },
       children: [
         /* @__PURE__ */ jsx(ListenForDynamicVariantChange, {}),
-        /* @__PURE__ */ jsx(OpenRelationshipBrowserFromUrl, {})
+        /* @__PURE__ */ jsx(OpenRelationshipBrowserFromUrl, {}),
+        /* @__PURE__ */ jsx(FocusElementFromUrl, {})
       ]
     }
   );
@@ -1102,6 +1457,30 @@ function OpenRelationshipBrowserFromUrl() {
     process();
   }, [relationships]), null;
 }
+function FocusElementFromUrl() {
+  const router = useRouter(), diagram = useDiagram(), { focusOnElement } = useSearch({
+    from: "__root__"
+  }), processedRef = useRef(null), focusAndClear = useCallbackRef((fqn) => {
+    try {
+      if (processedRef.current === fqn) return;
+      processedRef.current = fqn, diagram.focusOnElement(fqn), router.buildAndCommitLocation({
+        search: (s) => {
+          const { focusOnElement: _, ...rest } = s;
+          return rest;
+        },
+        replace: !0,
+        viewTransition: !1
+      });
+    } catch (error) {
+      console.error("focusOnElement failed:", error);
+    }
+  });
+  return useOnDiagramEvent("initialized", () => {
+    focusOnElement && processedRef.current !== focusOnElement && focusAndClear(focusOnElement);
+  }), useUpdateEffect(() => {
+    focusOnElement || (processedRef.current = null);
+  }, [focusOnElement]), null;
+}
 function ListenForDynamicVariantChange() {
   const router = useRouter(), dynamicViewVariant = useDiagramContext((c) => c.dynamicViewVariant);
   return useUpdateEffect(() => {
@@ -1179,7 +1558,8 @@ function ViewEditor() {
           },
           children: [
             /* @__PURE__ */ jsx(ListenForDynamicVariantChange, {}),
-            /* @__PURE__ */ jsx(OpenRelationshipBrowserFromUrl, {})
+            /* @__PURE__ */ jsx(OpenRelationshipBrowserFromUrl, {}),
+            /* @__PURE__ */ jsx(FocusElementFromUrl, {})
           ]
         }
       )
@@ -1193,7 +1573,7 @@ function CopyButton({ text }) {
   return /* @__PURE__ */ jsx(CopyButton$1, { value: text, timeout: 2e3, children: ({ copied, copy }) => /* @__PURE__ */ jsx(Tooltip, { label: copied ? "Copied" : "Copy", withArrow: !0, position: "right", children: /* @__PURE__ */ jsx(ActionIcon, { color: copied ? "teal" : "gray", variant: copied ? "light" : "subtle", onClick: copy, children: copied ? /* @__PURE__ */ jsx(IconCheck, { style: { width: rem(16) } }) : /* @__PURE__ */ jsx(IconCopy, { style: { width: rem(16) } }) }) }) });
 }
 function CopyToClipboard({ text }) {
-  return /* @__PURE__ */ jsx(Box, { pos: "absolute", top: "0", right: "0", p: "4", children: /* @__PURE__ */ jsx(CopyButton, { text }) });
+  return /* @__PURE__ */ jsx(Box$1, { pos: "absolute", top: "0", right: "0", p: "4", children: /* @__PURE__ */ jsx(CopyButton, { text }) });
 }
 const svgContainer = css({
   minWidth: 300,
@@ -1272,9 +1652,9 @@ function ViewAsPuml({ pumlSource }) {
                 children: krokiSvg.status === "loading" ? "Loading..." : "Render with Kroki"
               }
             ),
-            krokiSvg.status === "error" && /* @__PURE__ */ jsx(Box$1, { children: krokiSvg.error?.message })
+            krokiSvg.status === "error" && /* @__PURE__ */ jsx(Box, { children: krokiSvg.error?.message })
           ] }),
-          krokiSvg.status === "success" && /* @__PURE__ */ jsx(Box$1, { className: svgContainer, children: krokiSvg.result ? /* @__PURE__ */ jsx("div", { dangerouslySetInnerHTML: { __html: krokiSvg.result } }) : /* @__PURE__ */ jsx(Box$1, { children: "Empty result" }) })
+          krokiSvg.status === "success" && /* @__PURE__ */ jsx(Box, { className: svgContainer, children: krokiSvg.result ? /* @__PURE__ */ jsx("div", { dangerouslySetInnerHTML: { __html: krokiSvg.result } }) : /* @__PURE__ */ jsx(Box, { children: "Empty result" }) })
         ] }) })
       ]
     }
@@ -1341,7 +1721,7 @@ function ViewAsMmd({ viewId, mmdSource }) {
             }
           }
         ),
-        /* @__PURE__ */ jsx(_t, { children: /* @__PURE__ */ jsx(ScrollArea, { h: "100%", children: mmdSvg.result && /* @__PURE__ */ jsx(Box$1, { className: svgContainer, dangerouslySetInnerHTML: { __html: mmdSvg.result } }) }) })
+        /* @__PURE__ */ jsx(_t, { children: /* @__PURE__ */ jsx(ScrollArea, { h: "100%", children: mmdSvg.result && /* @__PURE__ */ jsx(Box, { className: svgContainer, dangerouslySetInnerHTML: { __html: mmdSvg.result } }) }) })
       ]
     }
   ) });
@@ -1474,9 +1854,9 @@ function ViewAsD2({ d2Source }) {
                 children: krokiSvg.status === "loading" ? "Loading..." : "Render with Kroki"
               }
             ),
-            krokiSvg.status === "error" && /* @__PURE__ */ jsx(Box$1, { children: krokiSvg.error?.message })
+            krokiSvg.status === "error" && /* @__PURE__ */ jsx(Box, { children: krokiSvg.error?.message })
           ] }),
-          krokiSvg.status === "success" && /* @__PURE__ */ jsx(Box$1, { className: svgContainer, children: krokiSvg.result ? /* @__PURE__ */ jsx("div", { dangerouslySetInnerHTML: { __html: krokiSvg.result } }) : /* @__PURE__ */ jsx(Box$1, { children: "Empty result" }) })
+          krokiSvg.status === "success" && /* @__PURE__ */ jsx(Box, { className: svgContainer, children: krokiSvg.result ? /* @__PURE__ */ jsx("div", { dangerouslySetInnerHTML: { __html: krokiSvg.result } }) : /* @__PURE__ */ jsx(Box, { children: "Empty result" }) })
         ] }) })
       ]
     }