likec4 1.50.0 → 1.52.0

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,19 +20,83 @@ 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)
+  relationships: z.string().nonempty().optional().catch(void 0).transform((v) => v),
+  focusOnElement: 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
+        relationships: void 0,
+        focusOnElement: void 0
       })
     ]
   },
@@ -46,17 +110,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 +311,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/projects.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { d1 as createFileRoute, db as Container, bp as Stack, bZ as Title, W as Button, df as Link, dD as notFound, d2 as redirect, Q as m, d0 as Outlet, dE as Navigate, c$ as stripSearchParams, cZ as z } from "../vendors.js";
+import { d1 as createFileRoute, db as Container, bp as Stack, bZ as Title, W as Button, df as Link, dG as notFound, d2 as redirect, Q as m, d0 as Outlet, dH as Navigate, c$ as stripSearchParams, cZ as z } from "../vendors.js";
 import { loadModel } from "likec4:model";
 import { V as ViewOutlet, F as Fallback, L as LikeC4IconRendererContext, l as LikeC4ModelContext, A as AdHocViewEditor, H as Header, E as ExportPage, m as EmbedPage, n as ViewEditor, o as ViewReact, p as ViewAsPuml, q as ViewAsMmd, r as ViewAsDot, s as ViewAsD2 } from "./single.js";
 import { isRpcAvailable } from "likec4:rpc";