likec4 1.29.0 → 1.30.0

package/README.md

@@ -1,6 +1,7 @@
 # LikeC4
 
-![NPM Version](https://img.shields.io/npm/v/likec4)
+<a href="https://www.npmjs.com/package/likec4" target="_blank">![NPM Version](https://img.shields.io/npm/v/likec4)</a>
+<a href="https://www.npmjs.com/package/likec4" target="_blank">![NPM Downloads](https://img.shields.io/npm/dw/likec4)</a>
 
 `likec4` package is a composition of language services, react components, vite plugin and CLI.
 

package/__app__/src/main.js

@@ -828,6 +828,11 @@ function useDebouncedValue(value, wait, options = { leading: !1 }) {
   }, [value, options.leading, wait]), useEffect(() => (mountedRef.current = !0, cancel), []), [_value, cancel];
 }
 const useIsomorphicEffect = typeof document < "u" ? useLayoutEffect$1 : useEffect;
+function useDocumentTitle(title2) {
+  useIsomorphicEffect(() => {
+    typeof title2 == "string" && title2.trim().length > 0 && (document.title = title2.trim());
+  }, [title2]);
+}
 function useDidUpdate(fn, dependencies) {
   const mounted = useRef(!1);
   useEffect(
@@ -16523,9 +16528,11 @@ var memo$1 = (fn) => {
     const result = fn(...args);
     return cache.set(key2, result), result;
   };
-};
+}, MERGE_OMIT = /* @__PURE__ */ new Set(["__proto__", "constructor", "prototype"]);
 function mergeProps(...sources) {
   return sources.reduce((prev, obj) => (obj && Object.keys(obj).forEach((key2) => {
+    if (MERGE_OMIT.has(key2))
+      return;
     const prevValue = prev[key2], value = obj[key2];
     isObject(prevValue) && isObject(value) ? prev[key2] = mergeProps(prevValue, value) : prev[key2] = value;
   }), prev), {});
@@ -16855,7 +16862,7 @@ const asTheme = (v) => {
   component: RouteComponent$3
 });
 function RouteComponent$3() {
-  return /* @__PURE__ */ jsx(Container, { size: "xs", py: "lg", children: /* @__PURE__ */ jsxs(Stack, { children: [
+  return useDocumentTitle("LikeC4 Projects"), /* @__PURE__ */ jsx(Container, { size: "xs", py: "lg", children: /* @__PURE__ */ jsxs(Stack, { children: [
     /* @__PURE__ */ jsx(Text, { fz: "lg", children: "Select a project" }),
     projects.map((v) => /* @__PURE__ */ jsx(
       Button,
@@ -16932,29 +16939,22 @@ function PopChild({ children: children2, isPresent, anchorX }) {
   }, [isPresent]), jsx(PopChildMeasure, { isPresent, childRef: ref, sizeRef: size2, children: React.cloneElement(children2, { ref }) });
 }
 const PresenceChild = ({ children: children2, initial, isPresent, onExitComplete, custom: custom5, presenceAffectsLayout, mode, anchorX }) => {
-  const presenceChildren = useConstant(newChildrenMap), id2 = useId$2(), memoizedOnExitComplete = useCallback((childId) => {
-    presenceChildren.set(childId, !0);
-    for (const isComplete of presenceChildren.values())
-      if (!isComplete)
-        return;
-    onExitComplete && onExitComplete();
-  }, [presenceChildren, onExitComplete]), context2 = useMemo(
-    () => ({
-      id: id2,
-      initial,
-      isPresent,
-      custom: custom5,
-      onExitComplete: memoizedOnExitComplete,
-      register: (childId) => (presenceChildren.set(childId, !1), () => presenceChildren.delete(childId))
-    }),
-    /**
-     * If the presence of a child affects the layout of the components around it,
-     * we want to make a new context value to ensure they get re-rendered
-     * so they can detect that layout change.
-     */
-    presenceAffectsLayout ? [Math.random(), memoizedOnExitComplete] : [isPresent, memoizedOnExitComplete]
-  );
-  return useMemo(() => {
+  const presenceChildren = useConstant(newChildrenMap), id2 = useId$2();
+  let isReusedContext = !0, context2 = useMemo(() => (isReusedContext = !1, {
+    id: id2,
+    initial,
+    isPresent,
+    custom: custom5,
+    onExitComplete: (childId) => {
+      presenceChildren.set(childId, !0);
+      for (const isComplete of presenceChildren.values())
+        if (!isComplete)
+          return;
+      onExitComplete && onExitComplete();
+    },
+    register: (childId) => (presenceChildren.set(childId, !1), () => presenceChildren.delete(childId))
+  }), [isPresent, presenceChildren, onExitComplete]);
+  return presenceAffectsLayout && isReusedContext && (context2 = { ...context2 }), useMemo(() => {
     presenceChildren.forEach((_, key2) => presenceChildren.set(key2, !1));
   }, [isPresent]), React.useEffect(() => {
     !isPresent && !presenceChildren.size && onExitComplete && onExitComplete();
@@ -17935,7 +17935,7 @@ class MotionValue {
    * -  `transformer`: A function to transform incoming values with.
    */
   constructor(init2, options = {}) {
-    this.version = "12.7.3", this.canTrackVelocity = null, this.events = {}, this.updateAndNotify = (v, render = !0) => {
+    this.version = "12.7.4", this.canTrackVelocity = null, this.events = {}, this.updateAndNotify = (v, render = !0) => {
       const currentTime = time.now();
       this.updatedAt !== currentTime && this.setPrevFrameValue(), this.prev = this.current, this.setCurrent(v), this.current !== this.prev && this.events.change && this.events.change.notify(this.current), render && this.events.renderRequest && this.events.renderRequest.notify(this.current);
     }, this.hasAnimated = !1, this.setCurrent(init2), this.owner = options.owner;
@@ -44626,9 +44626,15 @@ const root$1 = css({
   fontSize: "sm",
   // mantine.fontSizes.sm,
   fontWeight: 500,
-  paddingRight: "50px",
+  paddingRight: "10px",
   color: "mantine.colors.placeholder",
-  flex: "1"
+  flex: "1",
+  sm: {
+    paddingRight: "30px"
+  },
+  md: {
+    paddingRight: "50px"
+  }
 }), shortcut = css({
   fontSize: "11px",
   fontWeight: 600,
@@ -49260,6 +49266,7 @@ const previewBg = css({
   component: RouteComponent$1
 });
 function RouteComponent$1() {
+  useDocumentTitle("LikeC4");
   const views = t$4(useLikeC4Model$1(!0).$model.views);
   return /* @__PURE__ */ jsx(
     SimpleGrid,
@@ -49913,7 +49920,15 @@ function Header({ diagram }) {
         /* @__PURE__ */ jsxs(Group, { gap: isTablet ? 6 : 4, wrap: "nowrap", children: [
           isReactDiagramRoute ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
             /* @__PURE__ */ jsx(SelectProject, {}),
-            /* @__PURE__ */ jsx(Button, { size: isTablet ? "sm" : "xs", leftSection: /* @__PURE__ */ jsx(IconShare, { size: 14 }), onClick: open, children: "Share" }),
+            projects.length <= 1 && /* @__PURE__ */ jsx(
+              Button,
+              {
+                size: isTablet ? "sm" : "xs",
+                leftSection: /* @__PURE__ */ jsx(IconShare, { size: 14 }),
+                onClick: open,
+                children: "Share"
+              }
+            ),
             /* @__PURE__ */ jsx(ExportButton, { diagram })
           ] }) : /* @__PURE__ */ jsx(
             Button,
@@ -50475,7 +50490,7 @@ function ExportPage() {
     500
   ), !diagram)
     throw notFound();
-  const width = diagram.bounds.width + padding * 2, height = diagram.bounds.height + padding * 2;
+  const extraPadding = 16, width = diagram.bounds.width + padding * 2 + extraPadding, height = diagram.bounds.height + padding * 2 + extraPadding;
   return /* @__PURE__ */ jsxs(
     Box,
     {
@@ -50558,18 +50573,21 @@ const Route$a = createFileRoute("/_single/embed/$viewId")({
   component: EmbedPage
 });
 function ViewReact() {
-  const router = useRouter(), view = useCurrentDiagram(), onNavigateTo = useCallbackRef((viewId) => {
+  const viewId = useParams({
+    select: (params) => params.viewId ?? "index",
+    strict: !1
+  }), router = useRouter(), view = useCurrentDiagram(), onNavigateTo = useCallbackRef((viewId2) => {
     const loc = router.buildLocation({
       to: ".",
       params: (current) => ({
         ...current,
-        viewId
+        viewId: viewId2
       }),
       search: !0
     });
     router.commitLocation(loc);
-  });
-  if (!view)
+  }), title2 = view ? view.title ?? view.id : `${viewId} not found`;
+  if (useDocumentTitle(title2 + " - LikeC4"), !view)
     return /* @__PURE__ */ jsx(NotFound, {});
   const hasNotations = (view.notation?.elements ?? []).length > 0;
   return /* @__PURE__ */ jsx(