likec4 1.50.0 → 1.51.0

package/__app__/src/likec4.js

@@ -5034,7 +5034,7 @@ function DriftsSummary() {
     onMouseLeave: onMouseLeaveDebounced,
     onClick
   }, { view, nodes, edges } = selected;
-  return view.length === 0 && nodes.length === 0 && edges.length === 0 ? null : /* @__PURE__ */ jsx(AnimatePresence, { propagate: !0, mode: "wait", children: /* @__PURE__ */ jsxs(
+  return view.length === 0 && nodes.length === 0 && edges.length === 0 ? null : /* @__PURE__ */ jsx(AnimatePresence, { children: /* @__PURE__ */ jsxs(
     m$1.div,
     {
       layout: "size",
@@ -5053,16 +5053,16 @@ function DriftsSummary() {
       }),
       children: [
         t$1(view, 1) && /* @__PURE__ */ jsx(ViewDrifts, { drifts: view }),
-        nodes.length > 0 && /* @__PURE__ */ jsxs(m$1.div, { layout: "size", children: [
+        nodes.length > 0 && /* @__PURE__ */ jsxs(m$1.div, { layout: !0, children: [
           /* @__PURE__ */ jsx(SectionHeader$2, { children: "Elements:" }),
-          /* @__PURE__ */ jsx(m$1.div, { layout: "size", className: vstack({ mt: "2", gap: "2" }), children: t$a(
+          /* @__PURE__ */ jsx("div", { className: vstack({ mt: "2", gap: "2" }), children: t$a(
             nodes,
             (node2) => /* @__PURE__ */ jsx(NodeDrifts$1, { ...node2, ...handlers }, node2.id)
           ) })
         ] }, "nodes-drifts"),
-        edges.length > 0 && /* @__PURE__ */ jsxs(m$1.div, { layout: "size", children: [
+        edges.length > 0 && /* @__PURE__ */ jsxs(m$1.div, { layout: !0, children: [
           /* @__PURE__ */ jsx(SectionHeader$2, { children: "Relationships:" }),
-          /* @__PURE__ */ jsx(m$1.div, { layout: "size", className: vstack({ mt: "2", gap: "2" }), children: t$a(edges, (edge) => /* @__PURE__ */ jsx(EdgeDrifts$1, { ...edge, ...handlers }, edge.edgeId)) })
+          /* @__PURE__ */ jsx("div", { className: vstack({ mt: "2", gap: "2" }), children: t$a(edges, (edge) => /* @__PURE__ */ jsx(EdgeDrifts$1, { ...edge, ...handlers }, edge.edgeId)) })
         ] }, "edges-drifts")
       ]
     },
@@ -5086,6 +5086,7 @@ function ViewDrifts({ drifts }) {
   ) });
 }
 function NodeDrifts$1({ id, name, drifts, ...handlers }) {
+  const key2 = `node-drifts-${id}`;
   return /* @__PURE__ */ jsxs(
     DriftsGroup,
     {
@@ -5111,28 +5112,29 @@ function NodeDrifts$1({ id, name, drifts, ...handlers }) {
             children: name
           }
         ),
-        t$a(drifts, (drift) => /* @__PURE__ */ jsx(DriftLabel, { children: drift }, id + drift))
+        t$a(drifts, (drift, i) => /* @__PURE__ */ jsx(DriftLabel, { children: drift }, key2 + drift + i))
       ]
     },
-    `node-drifts-${id}`
+    key2
   );
 }
 function EdgeDrifts$1({ edgeId, drifts, ...handlers }) {
+  const key2 = `edge-drifts-${edgeId}`;
   return /* @__PURE__ */ jsx(
     DriftsGroup,
     {
       "data-drift-type": "edge",
       "data-drift-id": edgeId,
       ...handlers,
-      children: t$a(drifts, (drift) => /* @__PURE__ */ jsx(
+      children: t$a(drifts, (drift, i) => /* @__PURE__ */ jsx(
         DriftLabel,
         {
           children: drift
         },
-        edgeId + drift
+        key2 + drift + i
       ))
     },
-    `edge-drifts-${edgeId}`
+    key2
   );
 }
 const DriftsGroup = styled(m$1.div, {
@@ -5153,7 +5155,7 @@ const DriftsGroup = styled(m$1.div, {
   defaultProps: {
     className: "group",
     variants: variants$7,
-    layout: "size",
+    layout: !0,
     initial: "initial",
     animate: "animate",
     exit: "exit"
@@ -8014,17 +8016,9 @@ const selector$5 = (ctx) => {
   }
 ));
 function StartWalkthroughButton() {
-  const { enableReadOnly, enableCompareWithLatest } = useEnabledFeatures(), diagram = useDiagram(), actor = useNavigationActor();
+  const { enableCompareWithLatest } = useEnabledFeatures(), diagram = useDiagram(), actor = useNavigationActor();
   let tooltipLabel = "Start Dynamic View Walkthrough";
-  switch (!0) {
-    case !enableReadOnly:
-      tooltipLabel = "Walkthrough not available in Edit mode";
-      break;
-    case enableCompareWithLatest:
-      tooltipLabel = "Walkthrough not available when Compare is active";
-      break;
-  }
-  return /* @__PURE__ */ jsx(Tooltip$6, { label: tooltipLabel, children: /* @__PURE__ */ jsx(
+  return !0 === enableCompareWithLatest && (tooltipLabel = "Walkthrough not available when Compare is active"), /* @__PURE__ */ jsx(Tooltip$6, { label: tooltipLabel, children: /* @__PURE__ */ jsx(
     TriggerWalkthroughButton,
     {
       onClick: (e2) => {
@@ -8035,7 +8029,7 @@ function StartWalkthroughButton() {
       exit: { opacity: 0, translateX: -20 },
       size: "compact-xs",
       h: 26,
-      disabled: !enableReadOnly || enableCompareWithLatest,
+      disabled: enableCompareWithLatest,
       classNames: {
         label: css({
           display: {

package/__app__/src/main.js

@@ -1,61 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
-import { R as Routes } from "./routes/index.js";
-import { A as createTheme, T as Tooltip, P as Portal, S as SegmentedControl, M as MantineProvider } from "./vendors.js";
-const theme = createTheme({
-  autoContrast: !0,
-  primaryColor: "indigo",
-  cursorType: "pointer",
-  fontFamily: "var(--likec4-app-font)",
-  headings: {
-    fontWeight: "500",
-    sizes: {
-      h1: {
-        // fontSize: '2rem',
-        fontWeight: "600"
-      },
-      h2: {
-        // fontSize: '1.85rem',
-      }
-    }
-  },
-  fontSizes: {
-    xxs: "var(--font-sizes-xxs)",
-    xs: "var(--font-sizes-xs)",
-    sm: "var(--font-sizes-sm)",
-    md: "var(--font-sizes-md)",
-    lg: "var(--font-sizes-lg)",
-    xl: "var(--font-sizes-xl)"
-  },
-  spacing: {
-    xs: "var(--spacing-xs)",
-    sm: "var(--spacing-sm)",
-    md: "var(--spacing-md)",
-    lg: "var(--spacing-lg)",
-    xl: "var(--spacing-xl)"
-  },
-  components: {
-    SegmentedControl: SegmentedControl.extend({
-      vars: (theme2, props, ctx) => ({
-        root: {
-          // @ts-ignore
-          "--sc-font-size": theme2.fontSizes[props.fz ?? props.size]
-        }
-      })
-    }),
-    Portal: Portal.extend({
-      defaultProps: {
-        reuseTargetNode: !0
-      }
-    }),
-    Tooltip: Tooltip.extend({
-      defaultProps: {
-        color: "dark"
-      }
-    })
-  }
-});
+import { a as Routes } from "./routes/index.js";
 createRoot(document.getElementById("likec4-root")).render(
-  /* @__PURE__ */ jsx(StrictMode, { children: /* @__PURE__ */ jsx(MantineProvider, { theme, defaultColorScheme: "auto", children: /* @__PURE__ */ jsx(Routes, {}) }) })
+  /* @__PURE__ */ jsx(StrictMode, { children: /* @__PURE__ */ jsx(Routes, {}) })
 );

package/__app__/src/routes/index.js

@@ -1,10 +1,10 @@
-import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { cY as useNavigate, bS as useCallbackRef, cZ as z, c_ as createRootRouteWithContext, a0 as t, c$ as stripSearchParams, d0 as Outlet, k as useMantineColorScheme, d1 as createFileRoute, d2 as redirect, d3 as useDocumentTitle, d4 as createRouter, d5 as createHashHistory, d6 as createBrowserHistory, d7 as RouterProvider } from "../vendors.js";
+import { jsx } from "react/jsx-runtime";
+import { cY as useNavigate, bS as useCallbackRef, cZ as z, A as createTheme, T as Tooltip, P as Portal, S as SegmentedControl, c_ as createRootRouteWithContext, a0 as t, c$ as stripSearchParams, M as MantineProvider, d0 as Outlet, d1 as createFileRoute, d2 as redirect, d3 as useDocumentTitle, d4 as createRouter, d5 as createHashHistory, d6 as createBrowserHistory, d7 as RouterProvider } from "../vendors.js";
 import { useLikeC4Projects, projects } from "likec4:projects";
 import { R as Route$3, a as Route$4, b as Route$5, c as Route$9, d as Route$a, e as Route$b, f as Route$c, g as Route$d, h as Route$h, i as Route$i, j as Route$j, k as Route$k, F as Fallback, N as NotFound } from "./single.js";
 import { pageTitle, useHashHistory, basepath } from "../const.js";
 import { L as LikeC4ProjectsProvider, B as Box } from "../likec4.js";
-import { useEffect, lazy } from "react";
+import { lazy } from "react";
 import { R as Route$6, a as Route$7, b as Route$8, c as Route$e, d as Route$f, e as Route$g, f as Route$l, g as Route$m, h as Route$n, i as Route$o, j as Route$p } from "./projects.js";
 function LikeC4ProjectsContext({ children }) {
   const projects2 = useLikeC4Projects(), navigate = useNavigate(), onProjectChange = useCallbackRef((projectId) => {
@@ -20,17 +20,79 @@ function LikeC4ProjectsContext({ children }) {
   );
 }
 const searchParamsSchema = z.object({
-  theme: z.literal(["light", "dark", "auto"]).default("auto").catch("auto"),
+  theme: z.literal(["light", "dark", "auto"]).optional().catch(void 0),
   dynamic: z.enum(["diagram", "sequence"]).default("diagram").catch("diagram"),
   padding: z.number().min(0).default(20).catch(20),
   relationships: z.string().nonempty().optional().catch(void 0).transform((v) => v)
+});
+function resolveForceColorScheme(theme2) {
+  switch (theme2) {
+    case "light":
+    case "dark":
+      return theme2;
+    default:
+      return;
+  }
+}
+const theme = createTheme({
+  autoContrast: !0,
+  primaryColor: "indigo",
+  cursorType: "pointer",
+  fontFamily: "var(--likec4-app-font)",
+  headings: {
+    fontWeight: "500",
+    sizes: {
+      h1: {
+        // fontSize: '2rem',
+        fontWeight: "600"
+      },
+      h2: {
+        // fontSize: '1.85rem',
+      }
+    }
+  },
+  fontSizes: {
+    xxs: "var(--font-sizes-xxs)",
+    xs: "var(--font-sizes-xs)",
+    sm: "var(--font-sizes-sm)",
+    md: "var(--font-sizes-md)",
+    lg: "var(--font-sizes-lg)",
+    xl: "var(--font-sizes-xl)"
+  },
+  spacing: {
+    xs: "var(--spacing-xs)",
+    sm: "var(--spacing-sm)",
+    md: "var(--spacing-md)",
+    lg: "var(--spacing-lg)",
+    xl: "var(--spacing-xl)"
+  },
+  components: {
+    SegmentedControl: SegmentedControl.extend({
+      vars: (theme2, props, ctx) => ({
+        root: {
+          // @ts-ignore
+          "--sc-font-size": theme2.fontSizes[props.fz ?? props.size]
+        }
+      })
+    }),
+    Portal: Portal.extend({
+      defaultProps: {
+        reuseTargetNode: !0
+      }
+    }),
+    Tooltip: Tooltip.extend({
+      defaultProps: {
+        color: "dark"
+      }
+    })
+  }
 }), Route$2 = createRootRouteWithContext()({
   validateSearch: searchParamsSchema,
   search: {
     middlewares: [
       stripSearchParams({
         padding: 20,
-        theme: "auto",
+        theme: void 0,
         dynamic: "diagram",
         relationships: void 0
       })
@@ -46,17 +108,18 @@ const searchParamsSchema = z.object({
   component: RootComponent
 });
 function RootComponent() {
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(Outlet, {}),
-    /* @__PURE__ */ jsx(ThemeSync, {})
-  ] });
+  const { theme: theme$1 } = Route$2.useSearch(), forceColorScheme = resolveForceColorScheme(theme$1);
+  return /* @__PURE__ */ jsx(
+    MantineProvider,
+    {
+      theme,
+      defaultColorScheme: "auto",
+      ...forceColorScheme && { forceColorScheme },
+      children: /* @__PURE__ */ jsx(Outlet, {})
+    }
+  );
 }
-const ThemeSync = () => {
-  const { theme } = Route$2.useSearch(), mantineColorScheme = useMantineColorScheme();
-  return useEffect(() => {
-    theme && mantineColorScheme.setColorScheme(theme);
-  }, [theme]), null;
-}, ProjectsOverviewPage = lazy(async () => {
+const ProjectsOverviewPage = lazy(async () => {
   const { ProjectsOverviewPage: ProjectsOverviewPage2 } = await import("../ProjectsOverview.js");
   return {
     default: ProjectsOverviewPage2
@@ -246,5 +309,7 @@ function Routes() {
   return /* @__PURE__ */ jsx(RouterProvider, { router });
 }
 export {
-  Routes as R
+  Route$2 as R,
+  Routes as a,
+  resolveForceColorScheme as r
 };

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 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, 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, useCallback, 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" }),