Sync document title from root node and propagate to menubar; rename clipboard hook; fix logo skeleton sizing

- Derive document base title from the root node (resourceName/description) in Editor and set document.title.
- Expose base title on window.__MINDMAPFLOW_BASE_TITLE__ and emit a "mindmapflow:title-changed" CustomEvent so Menubar can stay in sync; restore default title on unmount.
- Add previous title tracking to avoid redundant updates.
- Rename/move clipboard hook to hooks/use-mindmap-clipboard and update import.
- Fix homepage logo skeleton sizing and set Image height to 0 until loaded to prevent layout shift.
- Remove placeholder "Export (Coming later)" menu item.

Author: tlaukkanen

src/app/(home)/page.tsx

@@ -54,8 +54,9 @@ export default function Home() {
             <Skeleton
               aria-hidden
               baseColor="#e5e7eb"
-              className="block h-full w-full"
+              className="block h-auto w-full"
               containerClassName="absolute inset-0 pointer-events-none"
+              height={260}
               highlightColor="#f3f4f6"
             />
           ) : null}
@@ -65,7 +66,7 @@ export default function Home() {
               "block h-auto w-full object-contain transition-opacity duration-300",
               loadedImages.logo ? "opacity-100" : "opacity-0",
             )}
-            height={260}
+            height={loadedImages.logo ? 260 : 0}
             sizes="(max-width: 640px) 80vw, 480px"
             src="/mindmapflow_logo_with_text.png"
             width={480}

src/components/editor/editor.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState, useCallback, useRef, useEffect } from "react";
+import { useState, useCallback, useRef, useEffect, useMemo } from "react";
 import {
   Edge,
   MarkerType,
@@ -23,7 +23,7 @@ import { Menubar } from "./menubar";
 import { TextProperties } from "./nodes/base-node";
 import { GlobalSearchDialog } from "./global-search-dialog";
 import { useMindMapGlobalSearch } from "./hooks/use-global-search";
-import { useMindMapClipboard } from "./hooks/use-clipboard";
+import { useMindMapClipboard } from "./hooks/use-mindmap-clipboard";
 import { useMindMapNodeCreation } from "./hooks/use-node-creation";
 import { getDefaultTextProperties } from "./utils/text-properties";
 
@@ -59,11 +59,19 @@ import {
   updateSelectedNodeData,
 } from "@/utils/editor-utils";
 
+declare global {
+  interface Window {
+    __MINDMAPFLOW_BASE_TITLE__?: string;
+  }
+}
+
 const initialNodes: MindMapNode[] = sampleData.nodes;
 const initialEdges: Edge[] = sampleData.edges;
 const rootNodeId = "root";
 
 const NODE_HORIZONTAL_OFFSET = 240;
+const DEFAULT_DOCUMENT_TITLE = "MindMapFlow";
+const TITLE_CHANGE_EVENT = "mindmapflow:title-changed";
 
 export default function Editor() {
   const searchParams = useSearchParams();
@@ -194,6 +202,74 @@ export default function Editor() {
   // Derive selected node from selectedNodeId
   const selectedNode = nodes.find((node) => node.id === selectedNodeId);
 
+  const mindmapTitle = useMemo(() => {
+    const rootNode =
+      nodes.find((node) => node.id === rootNodeId) ||
+      nodes.find((node) => (node.data?.depth ?? 0) === 0);
+
+    if (!rootNode || !rootNode.data) {
+      return undefined;
+    }
+
+    const candidate =
+      rootNode.data.resourceName?.trim() ||
+      rootNode.data.description?.trim() ||
+      undefined;
+
+    if (!candidate) {
+      return undefined;
+    }
+
+    const normalized = candidate
+      .split(/\r?\n/)
+      .map((part) => part.trim())
+      .filter((part) => part.length > 0)
+      .join(" ");
+
+    return normalized.length > 0 ? normalized : undefined;
+  }, [nodes]);
+
+  const previousBaseTitleRef = useRef<string | undefined>(undefined);
+
+  useEffect(() => {
+    if (typeof window === "undefined") {
+      return;
+    }
+
+    const baseTitle = mindmapTitle
+      ? `${DEFAULT_DOCUMENT_TITLE} - ${mindmapTitle}`
+      : DEFAULT_DOCUMENT_TITLE;
+
+    if (previousBaseTitleRef.current === baseTitle) {
+      // Ensure global state stays in sync even if title is unchanged
+      window.__MINDMAPFLOW_BASE_TITLE__ = baseTitle;
+
+      return;
+    }
+
+    previousBaseTitleRef.current = baseTitle;
+    window.__MINDMAPFLOW_BASE_TITLE__ = baseTitle;
+    document.title = baseTitle;
+    window.dispatchEvent(
+      new CustomEvent<string>(TITLE_CHANGE_EVENT, { detail: baseTitle }),
+    );
+  }, [mindmapTitle]);
+
+  useEffect(() => {
+    if (typeof window === "undefined") {
+      return;
+    }
+
+    return () => {
+      window.__MINDMAPFLOW_BASE_TITLE__ = DEFAULT_DOCUMENT_TITLE;
+      window.dispatchEvent(
+        new CustomEvent<string>(TITLE_CHANGE_EVENT, {
+          detail: DEFAULT_DOCUMENT_TITLE,
+        }),
+      );
+    };
+  }, []);
+
   const applySelection = useCallback(
     (
       nextSelectedIds: string[],

…components/editor/hooks/use-clipboard.ts …ts/editor/hooks/use-mindmap-clipboard.tssrc/components/editor/hooks/use-clipboard.ts renamed to src/components/editor/hooks/use-mindmap-clipboard.ts src/components/editor/hooks/use-clipboard.ts renamed to src/components/editor/hooks/use-mindmap-clipboard.ts

@@ -59,6 +59,7 @@ export const Menubar = ({
   const [openProjectDialogOpen, setOpenProjectDialogOpen] = useState(false);
   const [manageSharesDialogOpen, setManageSharesDialogOpen] = useState(false);
   const [sharesRefreshToken, setSharesRefreshToken] = useState(0);
+  const [baseDocumentTitle, setBaseDocumentTitle] = useState("MindMapFlow");
   const projectMenuOpen = Boolean(anchorEl);
   const editMenuOpen = Boolean(editAnchorEl);
   const profileMenuOpen = Boolean(profileAchorEl);
@@ -67,6 +68,42 @@ export const Menubar = ({
   const params = useParams();
   const mindMapId = (params?.id as string | undefined) ?? undefined;
 
+  useEffect(() => {
+    if (typeof window === "undefined") {
+      return;
+    }
+
+    const readBaseTitle = () => {
+      const current = window.__MINDMAPFLOW_BASE_TITLE__;
+
+      if (typeof current === "string" && current.trim().length > 0) {
+        return current;
+      }
+
+      return "MindMapFlow";
+    };
+
+    const handleTitleChange = (event: Event) => {
+      const customEvent = event as CustomEvent<string>;
+      const detail =
+        typeof customEvent.detail === "string" ? customEvent.detail : undefined;
+      const nextTitle =
+        detail && detail.trim().length > 0 ? detail : readBaseTitle();
+
+      setBaseDocumentTitle((prev) => (prev === nextTitle ? prev : nextTitle));
+    };
+
+    setBaseDocumentTitle(readBaseTitle());
+    window.addEventListener("mindmapflow:title-changed", handleTitleChange);
+
+    return () => {
+      window.removeEventListener(
+        "mindmapflow:title-changed",
+        handleTitleChange,
+      );
+    };
+  }, []);
+
   // Update saved status whenever hasUnsavedChanges changes
   useEffect(() => {
     const updateSavedStatus = (event: Event) => {
@@ -115,14 +152,16 @@ export const Menubar = ({
 
   // Update document title based on save status
   useEffect(() => {
-    const baseTitle = "MindMapFlow";
+    const title = !isSaved
+      ? `${baseDocumentTitle} (Unsaved Changes)`
+      : baseDocumentTitle;
 
-    document.title = !isSaved ? `${baseTitle} (Unsaved Changes)` : baseTitle;
+    document.title = title;
 
     return () => {
-      document.title = baseTitle;
+      document.title = baseDocumentTitle;
     };
-  }, [isSaved]);
+  }, [isSaved, baseDocumentTitle]);
 
   // Add beforeunload event handler
   useEffect(() => {
@@ -456,9 +495,6 @@ export const Menubar = ({
                 </MenuItem>
                 <Divider component="li" sx={{ my: 0.5 }} />
                 <MenuItem onClick={handleCopyAsImage}>Export as image</MenuItem>
-                <MenuItem disabled onClick={handleMenuClose}>
-                  Export (Coming later)
-                </MenuItem>
                 <Divider component="li" sx={{ my: 0.5 }} />
                 <MenuItem
                   aria-controls={