likec4 1.49.0 → 1.51.0

package/__app__/src/routes/single.js

@@ -1,13 +1,14 @@
 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 It, dB as Ot, bP as ScrollArea, dC as Nt, 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, 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, cY as useNavigate, 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, 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 { 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 { getProjectIcons } from "likec4:icons";
-import { useMemo, createContext, useContext, useState, useEffect, memo, useRef } from "react";
+import { useMemo, createContext, useContext, useState, useEffect, useRef, memo, useCallback } from "react";
 import { useStore } from "likec4/vite-plugin/internal";
 import { RichText } from "@likec4/core/types";
 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({
@@ -438,15 +439,27 @@ function WebcomponentPage() {
 function ColorSchemeToggle() {
   const { setColorScheme } = useMantineColorScheme({
     keepTransitions: !0
-  }), computedColorScheme = useComputedColorScheme("light");
-  return /* @__PURE__ */ jsxs(
+  }), 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,
     {
       visibleFrom: "sm",
       size: "md",
       variant: "subtle",
       color: "gray",
-      onClick: () => setColorScheme(computedColorScheme === "light" ? "dark" : "light"),
+      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" }),
@@ -740,7 +753,14 @@ const Header = memo(() => {
 function ExportButton() {
   const isInsideProject = useMatches({
     select: (matches) => matches.some(({ routeId }) => routeId === "/project/$projectId")
-  });
+  }), project = useCurrentProject(), viewId = useCurrentViewId(), handleDrawioExport = useCallback(async () => {
+    try {
+      const { loadDrawioSources } = await import("likec4:drawio"), { drawioEditUrl } = await loadDrawioSources(project.id), url = drawioEditUrl(viewId);
+      window.open(url, "_blank", "noopener,noreferrer");
+    } catch (error) {
+      console.error("Failed to export to Draw.io:", error);
+    }
+  }, [project.id, viewId]);
   return /* @__PURE__ */ jsxs(Menu, { shadow: "md", width: 200, trigger: "click-hover", openDelay: 200, children: [
     /* @__PURE__ */ jsx(MenuTarget, { children: /* @__PURE__ */ jsx(
       Button,
@@ -827,7 +847,7 @@ function ExportButton() {
           children: "Export as .puml"
         }
       ),
-      /* @__PURE__ */ jsx(MenuItem, { disabled: !0, children: "Export to Draw.io" }),
+      /* @__PURE__ */ jsx(MenuItem, { onClick: handleDrawioExport, children: "Export to Draw.io" }),
       /* @__PURE__ */ jsx(MenuItem, { disabled: !0, children: "Export to Miro" }),
       /* @__PURE__ */ jsx(MenuItem, { disabled: !0, children: "Export to Notion" })
     ] })
@@ -1222,12 +1242,12 @@ const svgContainer = css({
 function ViewAsPuml({ pumlSource }) {
   const [krokiSvg, { execute }] = useAsync(fetchFromKroki$1, null);
   return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(
-    It,
+    Tt,
     {
       className: viewWithTopPadding,
       orientation: "horizontal",
       children: [
-        /* @__PURE__ */ jsx(Ot, { children: /* @__PURE__ */ jsxs(
+        /* @__PURE__ */ jsx(_t, { children: /* @__PURE__ */ jsxs(
           ScrollArea,
           {
             className: cssScrollArea,
@@ -1244,14 +1264,14 @@ function ViewAsPuml({ pumlSource }) {
           }
         ) }),
         /* @__PURE__ */ jsx(
-          Nt,
+          Ht,
           {
             style: {
               width: 10
             }
           }
         ),
-        /* @__PURE__ */ jsx(Ot, { children: /* @__PURE__ */ jsxs(ScrollArea, { h: "100%", children: [
+        /* @__PURE__ */ jsx(_t, { children: /* @__PURE__ */ jsxs(ScrollArea, { h: "100%", children: [
           krokiSvg.status !== "success" && /* @__PURE__ */ jsxs(Fragment, { children: [
             /* @__PURE__ */ jsx(
               Button,
@@ -1305,12 +1325,12 @@ function ViewAsMmd({ viewId, mmdSource }) {
   return useEffect(() => {
     execute(viewId, mmdSource);
   }, [mmdSource]), /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(
-    It,
+    Tt,
     {
       className: viewWithTopPadding,
       orientation: "horizontal",
       children: [
-        /* @__PURE__ */ jsx(Ot, { children: /* @__PURE__ */ jsxs(
+        /* @__PURE__ */ jsx(_t, { children: /* @__PURE__ */ jsxs(
           ScrollArea,
           {
             className: cssScrollArea,
@@ -1327,14 +1347,14 @@ function ViewAsMmd({ viewId, mmdSource }) {
           }
         ) }),
         /* @__PURE__ */ jsx(
-          Nt,
+          Ht,
           {
             style: {
               width: 10
             }
           }
         ),
-        /* @__PURE__ */ jsx(Ot, { 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$1, { className: svgContainer, dangerouslySetInnerHTML: { __html: mmdSvg.result } }) }) })
       ]
     }
   ) });
@@ -1359,8 +1379,8 @@ function Page$2() {
   return /* @__PURE__ */ jsx(ViewAsMmd, { viewId, mmdSource: source });
 }
 function ViewAsDot({ dot, dotSvg }) {
-  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(It, { className: viewWithTopPadding, children: [
-    /* @__PURE__ */ jsx(Ot, { children: /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(Tt, { className: viewWithTopPadding, children: [
+    /* @__PURE__ */ jsx(_t, { children: /* @__PURE__ */ jsxs(
       ScrollArea,
       {
         className: cssScrollArea,
@@ -1377,14 +1397,14 @@ function ViewAsDot({ dot, dotSvg }) {
       }
     ) }),
     /* @__PURE__ */ jsx(
-      Nt,
+      Ht,
       {
         style: {
           width: 10
         }
       }
     ),
-    /* @__PURE__ */ jsx(Ot, { children: /* @__PURE__ */ jsx(ScrollArea, { h: "100%", children: /* @__PURE__ */ jsx("div", { className: svgContainer, dangerouslySetInnerHTML: { __html: dotSvg } }) }) })
+    /* @__PURE__ */ jsx(_t, { children: /* @__PURE__ */ jsx(ScrollArea, { h: "100%", children: /* @__PURE__ */ jsx("div", { className: svgContainer, dangerouslySetInnerHTML: { __html: dotSvg } }) }) })
   ] }) });
 }
 const Route$1 = createFileRoute("/_single/view/$viewId/dot")({
@@ -1424,12 +1444,12 @@ const fetchFromKroki = async (d2) => await (await fetch(krokiD2SvgUrl, {
 function ViewAsD2({ d2Source }) {
   const [krokiSvg, { execute }] = useAsync(fetchFromKroki, null);
   return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(
-    It,
+    Tt,
     {
       className: viewWithTopPadding,
       orientation: "horizontal",
       children: [
-        /* @__PURE__ */ jsx(Ot, { children: /* @__PURE__ */ jsxs(
+        /* @__PURE__ */ jsx(_t, { children: /* @__PURE__ */ jsxs(
           ScrollArea,
           {
             className: cssScrollArea,
@@ -1446,14 +1466,14 @@ function ViewAsD2({ d2Source }) {
           }
         ) }),
         /* @__PURE__ */ jsx(
-          Nt,
+          Ht,
           {
             style: {
               width: 10
             }
           }
         ),
-        /* @__PURE__ */ jsx(Ot, { children: /* @__PURE__ */ jsxs(ScrollArea, { h: "100%", children: [
+        /* @__PURE__ */ jsx(_t, { children: /* @__PURE__ */ jsxs(ScrollArea, { h: "100%", children: [
           krokiSvg.status !== "success" && /* @__PURE__ */ jsxs(Fragment, { children: [
             /* @__PURE__ */ jsx(
               Button,