@allbluecn/web-app 0.19.2 → 0.19.4

package/src/components/design/editor/layout/design-doc-panel.tsx

@@ -19,6 +19,7 @@ import React, { useEffect, useState, type ComponentType } from "react";
 import { m } from '@/paraglide/messages.js'
 import { cn } from "@/lib/utils";
 import { Maximize2, Minimize2, RotateCcw } from "lucide-react";
+import type { Editor } from "@tiptap/react";
 import { Button } from "@/components/ui/button";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
 
@@ -50,8 +51,10 @@ function NotionDocEditorLazy(props: React.ComponentProps<typeof NotionDocEditorP
           if (alive) setEditor(() => mod.NotionDocEditor as ComponentType<Record<string, unknown>>)
           return
         } catch (err) {
+          if (!alive) return; // 卸载后不再重试，避免无意义的 sleep+import 循环
           if (i < LAZY_RETRY_COUNT) {
             await new Promise((r) => setTimeout(r, LAZY_RETRY_BASE_DELAY_MS * (i + 1)))
+            if (!alive) return;
           } else if (alive) {
             setError(err instanceof Error ? err : new Error(String(err)))
           }
@@ -85,7 +88,7 @@ declare function NotionDocEditorProps(props: {
   onChange?: (content: { html: string; markdown: string }) => void
   placeholder?: string
   readOnly?: boolean
-  onEditorReady?: (editor: unknown) => void
+  onEditorReady?: (editor: Editor) => void
   showHeader?: boolean
   editorClassName?: string
 }): React.JSX.Element | null
@@ -99,7 +102,7 @@ interface DesignDocPanelProps {
   widthMode?: "default" | "wider";
   onWidthModeChange?: (mode: "default" | "wider") => void;
   readOnly?: boolean;
-  onEditorReady?: (editor: any) => void;
+  onEditorReady?: (editor: Editor) => void;
 }
 
 export function DesignDocPanel({ className, content, onContentChange, autoSaveTime, saving, widthMode, onWidthModeChange, readOnly, onEditorReady }: DesignDocPanelProps) {
@@ -138,13 +141,18 @@ export function DesignDocPanel({ className, content, onContentChange, autoSaveTi
           {onWidthModeChange && (
             <>
               <Tooltip>
-                <TooltipTrigger render={<button onClick={() => onWidthModeChange("wider")}
+                <TooltipTrigger render={
+                  <Button
+                    variant="ghost"
+                    onClick={() => onWidthModeChange("wider")}
+                    aria-label={m.docPanel_wider()}
                     className={cn(
-                      "p-1.5 rounded-md hover:bg-muted transition-colors",
+                      "p-1.5 h-auto rounded-md hover:bg-muted transition-colors",
                       widthMode === "wider"
                         ? "text-foreground bg-muted"
                         : "text-muted-foreground hover:text-foreground"
-                    )} />}>
+                    )} />
+                }>
                     <Maximize2 className="size-3" />
                   </TooltipTrigger>
                 <TooltipContent>
@@ -153,13 +161,18 @@ export function DesignDocPanel({ className, content, onContentChange, autoSaveTi
               </Tooltip>
 
                 <Tooltip>
-                <TooltipTrigger render={<button onClick={() => onWidthModeChange("default")}
+                <TooltipTrigger render={
+                  <Button
+                    variant="ghost"
+                    onClick={() => onWidthModeChange("default")}
+                    aria-label={m.docPanel_defaultWidth()}
                     className={cn(
-                      "p-1.5 rounded-md hover:bg-muted transition-colors",
+                      "p-1.5 h-auto rounded-md hover:bg-muted transition-colors",
                       widthMode === "default"
                         ? "text-foreground bg-muted"
                         : "text-muted-foreground hover:text-foreground"
-                    )} />}>
+                    )} />
+                }>
                     <Minimize2 className="size-3" />
                   </TooltipTrigger>
                 <TooltipContent>

package/src/components/design/editor/layout/design-editor-doc-utils.ts

@@ -32,18 +32,21 @@ export function mergeAiScene(prev: SceneDocument, incoming: PrototypeScene): Sce
     return id;
   };
 
+  // 两轮遍历：先为全部节点分配新 id 建 map，再统一 remap parentId，
+  // 避免子节点先于父节点出现时 idMap 未建立导致被错误提升为顶层
   const idMap = new Map<string, string>();
-  const appended = body.map((node) => {
+  const staged = body.map((node) => {
     const source = node.id;
     const id = source && !usedIds.has(source) ? source : freshId();
     if (source) idMap.set(source, id);
     usedIds.add(id);
-    return {
-      ...node,
-      id,
-      parentId: node.parentId ? idMap.get(node.parentId) ?? null : null,
-    };
+    return { node, id };
   });
+  const appended = staged.map(({ node, id }) => ({
+    ...node,
+    id,
+    parentId: node.parentId ? idMap.get(node.parentId) ?? null : null,
+  }));
 
   return { version: 1, meta: prev.meta, nodes: [...prev.nodes, ...appended] };
 }

package/src/components/design/editor/layout/design-editor-layout.tsx

@@ -664,7 +664,7 @@ export function DesignEditorLayout({ prd: initialDesign }: DesignEditorLayoutPro
                 onAnnotate={handleAnnotate}
                 onSceneGenerated={autoSave.handleSceneGenerated}
                 collabEnabled={collabEnabled}
-                pageLoaded={loaded.canvasLoadedRef.current}
+                pageLoaded={loaded.canvasLoaded}
               />
             </CanvasProvider>
           </div>

package/src/components/design/editor/layout/design-left-sidebar.tsx

@@ -27,6 +27,7 @@ import {
   Sparkles,
 } from "lucide-react";
 import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/ui/resizable";
+import { Button } from "@/components/ui/button";
 import { DesignPageTab } from "../pages-tree/design-tree-page-tab";
 import { DesignAgentPanel } from "../collaboration/design-agent-panel";
 import { ComponentLibrary } from "@/components/design/canvas/panels/component-library";
@@ -54,7 +55,8 @@ export function DesignLeftSidebar({ designId, open, onToggle, activePageId, onPa
         {open && (
           <>
             <div className="shrink-0 flex items-center h-10 border-b">
-              <button
+              <Button
+                variant="ghost"
                 onClick={() => setActiveTab("page")}
                 className={cn(
                   "flex-1 flex items-center justify-center h-full transition-colors",
@@ -67,8 +69,9 @@ export function DesignLeftSidebar({ designId, open, onToggle, activePageId, onPa
                 )}>
                   <FileText className="size-3.5" /> {m.sidebar_tabPage()}
                 </span>
-              </button>
-              <button
+              </Button>
+              <Button
+                variant="ghost"
                 onClick={() => setActiveTab("outline")}
                 className={cn(
                   "flex-1 flex items-center justify-center h-full transition-colors",
@@ -81,7 +84,7 @@ export function DesignLeftSidebar({ designId, open, onToggle, activePageId, onPa
                 )}>
                   <Layers className="size-3.5" /> {m.sidebar_tabOutline()}
                 </span>
-              </button>
+              </Button>
             </div>
 
             <ResizablePanelGroup orientation="vertical" className="flex-1">
@@ -100,7 +103,8 @@ export function DesignLeftSidebar({ designId, open, onToggle, activePageId, onPa
               <ResizablePanel defaultSize={65} minSize="30%">
                 <div className="flex h-full min-h-0 flex-col overflow-hidden">
                   <div className="shrink-0 flex items-center h-10 border-b">
-                    <button
+                    <Button
+                      variant="ghost"
                       onClick={() => setComponentTab("library")}
                       className={cn(
                         "flex-1 flex items-center justify-center h-full transition-colors",
@@ -113,8 +117,9 @@ export function DesignLeftSidebar({ designId, open, onToggle, activePageId, onPa
                       )}>
                         <Package className="size-3.5" /> {m.sidebar_tabLibrary()}
                       </span>
-                    </button>
-                    <button
+                    </Button>
+                    <Button
+                      variant="ghost"
                       onClick={() => setComponentTab("agent")}
                       className={cn(
                         "flex-1 flex items-center justify-center h-full transition-colors",
@@ -127,7 +132,7 @@ export function DesignLeftSidebar({ designId, open, onToggle, activePageId, onPa
                       )}>
                         <Sparkles className="size-3.5" /> {m.sidebar_tabAgent()}
                       </span>
-                    </button>
+                    </Button>
                   </div>
 
                   {componentTab === "agent" ? (
@@ -151,7 +156,9 @@ export function DesignLeftSidebar({ designId, open, onToggle, activePageId, onPa
         )}
       </div>
 
-      <button
+      <Button
+        variant="ghost"
+        aria-label={open ? m.rightSidebar_collapse() : m.rightSidebar_expand()}
         onClick={onToggle}
         className="absolute top-1/2 -translate-y-1/2 z-20 flex size-7 items-center justify-center rounded-full border bg-background shadow-sm hover:bg-muted transition-colors"
         style={{
@@ -161,7 +168,7 @@ export function DesignLeftSidebar({ designId, open, onToggle, activePageId, onPa
         }}
       >
         {open ? <ChevronLeft className="size-3.5" /> : <ChevronRight className="size-3.5 ml-1.5" />}
-      </button>
+      </Button>
     </div>
   );
 }

package/src/components/design/editor/layout/design-navigation.tsx

@@ -21,6 +21,7 @@ import { emitEvent, AppEvents } from "@/lib/events";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
+import { toast } from "@/components/ui/toast";
 import { DesignSharePanel } from "../share/design-share-panel";
 import {
   DropdownMenu,
@@ -109,7 +110,13 @@ export function DesignNavigation({
   };
 
   const handleDelete = async () => {
-    await deleteDesignFn({ data: { id: prd.id } });
+    try {
+      await deleteDesignFn({ data: { id: prd.id } });
+    } catch (err) {
+      console.error(err instanceof Error ? err.message : "unknown");
+      toast.error(m.prd_deleteFailed());
+      return; // 失败保持确认框打开可重试（NameConfirmDialog 仅在 onConfirm 成功后关闭）
+    }
 
     emitEvent(AppEvents.prd.deleted);
     await router.navigate({ to: "/dashboard" });

package/src/components/design/editor/layout/design-outline-tab.tsx

@@ -21,16 +21,19 @@ import { LayoutTemplate, Box } from "lucide-react";
 import { buildOutline } from "@/lib/outline-utils";
 import { OutlineNode } from "@allbluecn/kernel";
 import { CanvasElement } from "@allbluecn/kernel";
+import { Button } from "@/components/ui/button";
 
 export function OutlineTab({ elements, onSelect }: { elements: CanvasElement[]; onSelect?: (elementId: string) => void }) {
   const tree = useMemo(() => buildOutline(elements), [elements]);
 
   const renderNode = (node: OutlineNode, depth: number = 0) => (
     <div key={node.id}>
-      <div
-        className="flex items-center gap-1.5 px-2 py-1 rounded cursor-pointer text-xs hover:bg-muted/50"
-        style={{ paddingLeft: `${12 + depth * 14}px` }}
+      <Button
+        variant="ghost"
         onClick={() => onSelect?.(node.elementId)}
+        aria-label={node.label}
+        className="flex w-full items-center justify-start gap-1.5 px-2 py-1 h-auto rounded text-xs font-normal hover:bg-muted/50 text-foreground"
+        style={{ paddingLeft: `${12 + depth * 14}px` }}
       >
         {node.type === "container" ? (
           <LayoutTemplate className="size-3 shrink-0 text-muted-foreground" />
@@ -38,7 +41,7 @@ export function OutlineTab({ elements, onSelect }: { elements: CanvasElement[];
           <Box className="size-3 shrink-0 text-muted-foreground" />
         )}
         <span className="truncate">{node.label}</span>
-      </div>
+      </Button>
       {node.children.length > 0 && (
         <div>{node.children.map(child => renderNode(child, depth + 1))}</div>
       )}

package/src/components/design/editor/layout/design-right-sidebar.tsx

@@ -21,20 +21,13 @@ import { onEvent, AppEvents } from "@/lib/events";
 import { cn } from "@/lib/utils";
 import { Button } from "@/components/ui/button";
 import { PanelRightClose, PanelRightOpen } from "lucide-react";
+import type { Editor } from "@tiptap/react";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
 import { PropertyPanel } from "@/components/design/canvas/panels/property-panel";
 import { PageVersionPanel } from "../versions/page-version-panel";
 import { DesignCommentReviewPanel } from "../collaboration/design-comment-review-panel";
 import { DesignDocPanel } from "./design-doc-panel";
 
-interface PageData {
-  id: string;
-  name: string;
-  version: number;
-  canvas: any;
-  content: any;
-}
-
 interface DesignRightSidebarProps {
   designId: string;
   selectedComponentId: string | null;
@@ -45,7 +38,7 @@ interface DesignRightSidebarProps {
   onDocContentChange?: (content: { html: string; markdown: string }) => void;
   docAutoSaveTime?: string | null;
   docSaving?: boolean;
-  onDocEditorReady?: (editor: any) => void;
+  onDocEditorReady?: (editor: Editor) => void;
 }
 
 type SidebarState = "collapsed" | "expanded";
@@ -66,12 +59,30 @@ export function DesignRightSidebar({ designId, selectedComponentId, selection, o
   const skipStateWriteRef = useRef(false);
   const skipTabWriteRef = useRef(false);
 
+  // 桌面视口判定：matchMedia 订阅（resize 实时更新）；环境无 matchMedia 时
+  // （jsdom 等）回落 window.innerWidth 快照，保持与旧实现等价
+  const isDesktopRef = useRef(true);
+  useEffect(() => {
+    const compute = () =>
+      typeof window.matchMedia === "function"
+        ? window.matchMedia("(min-width: 1024px)").matches
+        : window.innerWidth >= 1024;
+    isDesktopRef.current = compute();
+    if (typeof window.matchMedia !== "function") return;
+    const mq = window.matchMedia("(min-width: 1024px)");
+    const onChange = (e: MediaQueryListEvent) => {
+      isDesktopRef.current = e.matches;
+    };
+    mq.addEventListener("change", onChange);
+    return () => mq.removeEventListener("change", onChange);
+  }, []);
+
   useEffect(() => {
     const saved = localStorage.getItem(`rightSidebar_state_${designId}`) as SidebarState;
     const savedTab = localStorage.getItem(`rightSidebar_tab_${designId}`);
     skipStateWriteRef.current = saved !== null;
     skipTabWriteRef.current = savedTab !== null;
-    if (saved === "expanded" && window.innerWidth >= 1024) setState("expanded");
+    if (saved === "expanded" && isDesktopRef.current) setState("expanded");
     if (savedTab) setActiveTab(savedTab);
   }, [designId]);
 
@@ -94,7 +105,7 @@ export function DesignRightSidebar({ designId, selectedComponentId, selection, o
   useEffect(() => {
     // 窄视口下选中元素不自动展开：w-80 面板会把画布挤压到无法绘制，
     // 属性可通过手动点「编辑」tab 查看
-    if (selection.length > 0 && window.innerWidth >= 1024) {
+    if (selection.length > 0 && isDesktopRef.current) {
       setState("expanded");
       setActiveTab("editor");
     }
@@ -130,7 +141,8 @@ export function DesignRightSidebar({ designId, selectedComponentId, selection, o
           <div className="shrink-0 flex items-center justify-between px-3 h-10 border-b">
             <div className="flex items-center gap-1">
               {TABS.map((tab) => (
-                <button
+                <Button
+                  variant="ghost"
                   key={tab.key}
                   onClick={() => handleTabClick(tab.key)}
                   className={cn(
@@ -141,7 +153,7 @@ export function DesignRightSidebar({ designId, selectedComponentId, selection, o
                   )}
                 >
                   {tab.label()}
-                </button>
+                </Button>
               ))}
             </div>
             <div className="flex items-center gap-0.5">
@@ -187,7 +199,9 @@ export function DesignRightSidebar({ designId, selectedComponentId, selection, o
         <div className="flex flex-col items-center gap-4 py-3 w-full">
           <Tooltip>
             <TooltipTrigger render={
-              <button
+              <Button
+                variant="ghost"
+                aria-label={m.rightSidebar_expand()}
                 onClick={() => setState("expanded")}
                 className="flex items-center justify-center size-6 rounded transition-colors text-muted-foreground hover:text-foreground hover:bg-muted/50"
               />
@@ -200,7 +214,9 @@ export function DesignRightSidebar({ designId, selectedComponentId, selection, o
           </Tooltip>
           {TABS.map((tab) => (
             <Tooltip key={tab.key}>
-              <TooltipTrigger render={<button
+              <TooltipTrigger render={<Button
+                  variant="ghost"
+                  aria-label={tab.label()}
                   onClick={() => handleTabClick(tab.key)}
                   className={cn(
                     "flex items-center justify-center w-6 py-3 px-1.5 rounded transition-colors text-xs font-medium",

package/src/components/design/editor/layout/hooks/use-design-auto-save.ts

@@ -118,6 +118,7 @@ export function useDesignAutoSave({
       setCanvasAutoSaveTime(formatSaveTime(new Date(), type, timezone));
     } catch (err) {
       console.error("Canvas auto-save failed:", err instanceof Error ? err.message : "unknown");
+      toast.error(m.editor_autoSaveFailed());
     } finally {
       setCanvasSaving(false);
     }
@@ -155,6 +156,9 @@ export function useDesignAutoSave({
 
     const isEmpty = !docContent.markdown.trim();
     const hadContent = !!(lastLoadedDocRef.current?.markdown?.trim());
+    // 与画布 isBareDoc 会话重置守卫同口径：自动保存路径下「删空文档」视为
+    // 会话重置推送而非真实意图（TipTap 清空瞬间可能产生空推送），跳过并复位
+    // dirty，刷新后恢复旧内容；真实清空走手动 Save（type="manual"）落库空文档
     if (type === "auto" && isEmpty && hadContent) {
       setDocDirty(false);
       return;
@@ -167,6 +171,7 @@ export function useDesignAutoSave({
       setDocAutoSaveTime(formatSaveTime(new Date(), type, timezone));
     } catch (err) {
       console.error("Doc auto-save failed:", err instanceof Error ? err.message : "unknown");
+      toast.error(m.editor_autoSaveFailed());
     } finally {
       setDocSaving(false);
     }
@@ -187,9 +192,15 @@ export function useDesignAutoSave({
   }, [activePageId]);
 
   useEffect(() => {
-    const handleBeforeUnload = () => {
+    const handleBeforeUnload = (e: BeforeUnloadEvent) => {
       canvasDebouncer.cancel();
       docDebouncer.cancel();
+      // 关闭/刷新前若有未落库编辑（防抖窗口内的内容已被 cancel 丢弃），
+      // 触发浏览器原生「未保存更改」确认，给用户阻止误关的机会
+      if (canvasDirtyRef.current || docDirtyRef.current) {
+        e.preventDefault();
+        e.returnValue = "";
+      }
     };
     window.addEventListener("beforeunload", handleBeforeUnload);
     return () => window.removeEventListener("beforeunload", handleBeforeUnload);

package/src/components/design/editor/layout/hooks/use-design-page-load.ts

@@ -1,6 +1,8 @@
 // SPDX-License-Identifier: AGPL-3.0-or-later
 
 import { useCallback, useEffect, useRef, useState } from "react";
+import { m } from '@/paraglide/messages.js'
+import { toast } from "@/components/ui/toast";
 import { getDesignPageFn } from "@/server/serverFns/design/pages";
 import { formatSaveTime } from "@/lib/time-format";
 import { createEmptyDoc, type SceneDocument } from "@/components/design/canvas/document/types";
@@ -34,18 +36,26 @@ export function useDesignPageLoad({ designId, docDebouncer }: {
 
   // 页面数据加载完成前禁止画布自动保存：mount 时 loadDoc(空文档) 也会触发
   // handleDocChange 置 dirty，若防抖保存恰在 loadPage 完成前到期（慢网络下
-  // activePageId 已设置、sceneDoc 仍是空文档），空文档会覆盖用户画板数据
+  // activePageId 已设置、sceneDoc 仍是空文档），空文档会覆盖用户画板数据。
+  // state 镜像供渲染期消费（ref 变化不触发重渲染）
   const canvasLoadedRef = useRef(false);
+  const [canvasLoaded, setCanvasLoaded] = useState(false);
+
+  // 过期响应守卫：快速连续切页时慢的旧响应不得覆盖新页数据
+  const loadSeqRef = useRef(0);
 
   const loadPage = useCallback(async (pageId: string) => {
+    const seq = ++loadSeqRef.current;
     docDebouncer.cancel();
     canvasLoadedRef.current = false;
+    setCanvasLoaded(false);
     setActivePageId(pageId);
     setCanvasAutoSaveTime(null);
     setDocAutoSaveTime(null);
     setIsPreviewing(false);
     try {
       const page = await getDesignPageFn({ data: { pageId } });
+      if (seq !== loadSeqRef.current) return; // 已有更新的 loadPage，丢弃过期响应
       if (page) {
         setSceneDoc(loadCanvasDoc(page.canvas));
         const loadedContent = (page.content as DocContent) || { html: "", markdown: "" };
@@ -57,19 +67,33 @@ export function useDesignPageLoad({ designId, docDebouncer }: {
           setDocAutoSaveTime(time);
         }
       }
-    } catch {
-      setSceneDoc(createEmptyDoc());
-      setDocContent({ html: "", markdown: "" });
+    } catch (err) {
+      if (seq !== loadSeqRef.current) return;
+      // 加载失败：保留旧内容、不打开保存闸门（阻断自动/手动保存），避免
+      // 「空画布 + 用户补画」被全量替换写库造成原页面内容永久丢失
+      console.error("Load design page failed:", err instanceof Error ? err.message : "unknown");
+      toast.error(m.editor_pageLoadFailed());
+      return;
     }
+    if (seq !== loadSeqRef.current) return;
     canvasLoadedRef.current = true;
+    setCanvasLoaded(true);
     setCanvasDirty(false);
     setDocDirty(false);
   }, [timezone, docDebouncer]);
 
+  // 初始加载只按 designId 执行一次：loadPage 依赖 timezone 等会重建，
+  // 若直接进依赖数组，时区切换等无关变化会重跑加载（取消未落库的防抖
+  // 保存并重置 dirty），丢用户编辑现场
+  const loadPageRef = useRef(loadPage);
+  loadPageRef.current = loadPage;
+  const initialLoadedDesignIdRef = useRef<string | null>(null);
   useEffect(() => {
+    if (initialLoadedDesignIdRef.current === designId) return;
+    initialLoadedDesignIdRef.current = designId;
     const lastPage = localStorage.getItem(`lastPage_${designId}`);
-    if (lastPage) loadPage(lastPage);
-  }, [designId, loadPage]);
+    if (lastPage) void loadPageRef.current(lastPage);
+  }, [designId]);
 
   return {
     timezone,
@@ -90,6 +114,7 @@ export function useDesignPageLoad({ designId, docDebouncer }: {
     docDirty,
     setDocDirty,
     canvasLoadedRef,
+    canvasLoaded,
     lastLoadedDocRef,
     loadPage,
   };

package/src/components/design/editor/pages/design-detail-page.tsx

@@ -58,7 +58,7 @@ function DesignErrorBoundaryInner({ error, reset }: { error: Error; reset: () =>
     <div className="flex flex-col items-center justify-center h-64 gap-3">
       <AlertCircle className="size-8 text-destructive" />
       <p className="text-sm text-muted-foreground">
-        {m.prd_loadError()} {error.message}
+        {m.prd_loadError()}
       </p>
       <Button variant="outline" size="sm" onClick={reset}>{m.prd_retry()}</Button>
     </div>
@@ -66,6 +66,6 @@ function DesignErrorBoundaryInner({ error, reset }: { error: Error; reset: () =>
 }
 
 export const DesignDetailPage: FC = () => {
-  const context = (useRouteContext as any)({ from: '/_nav/design/canvas/$id' }) as any
+  const context = useRouteContext({ from: '/_nav/design/canvas/$id' })
   return <DesignEditorLayout key={context.prd.id} prd={context.prd} />
 }

package/src/components/design/editor/pages/share-design-page.tsx

@@ -27,17 +27,17 @@ export const ShareDesignErrorBoundary: ComponentType<{ error: Error; reset: () =
   )
 }
 
-function ShareDesignErrorBoundaryInner({ error, reset }: { error: Error; reset: () => void }) {return (
+function ShareDesignErrorBoundaryInner({ reset }: { error: Error; reset: () => void }) {return (
     <div className="flex flex-col items-center justify-center h-64 gap-3">
       <AlertCircle className="size-8 text-destructive" />
-      <p className="text-sm text-muted-foreground">{m.common_share_loadError({ message: error.message })}</p>
+      <p className="text-sm text-muted-foreground">{m.common_share_loadFailed()}</p>
       <Button variant="outline" size="sm" onClick={reset}>{m.common_share_retry()}</Button>
     </div>
   )
 }
 
 export const ShareDesignPage: FC = () => {
-  const ctx = (useRouteContext as any)({ from: '/share/design/$designId' }) as any
+  const ctx = useRouteContext({ from: '/share/design/$designId' })
   if (ctx.error === 'not_found') {
     return <div className="flex h-screen items-center justify-center text-muted-foreground">{m.common_share_expired()}</div>
   }