@allbluecn/web-app 0.9.5 → 0.10.2

package/src/plugins/core/prd/components/prototype/icon-components.ts

@@ -16,33 +16,31 @@
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 import type { PrototypeComponentConfig, ComponentCategory } from "@/components/prototype";
-import { getClientI18n } from "@/i18n/client";
+import { m } from '@/paraglide/messages.js';
 import { IconPrototype, ICON_LUCIDE_MAP } from "./IconPrototype";
 
-const i18n = getClientI18n();
-
-const ICON_DEFS: Array<{ value: string; nameKey: string; category: ComponentCategory }> = [
-  { value: "smile", nameKey: "prototype.iconGeneral", category: "icons" },
-  { value: "fileText", nameKey: "prototype.iconFile", category: "icons" },
-  { value: "arrowLeft", nameKey: "prototype.iconBack", category: "icons" },
-  { value: "mousePointerClick", nameKey: "prototype.iconButton", category: "icons" },
-  { value: "textCursorInput", nameKey: "prototype.iconInput", category: "icons" },
-  { value: "table2", nameKey: "prototype.iconTable", category: "icons" },
-  { value: "image", nameKey: "prototype.iconImage", category: "icons" },
-  { value: "shoppingCart", nameKey: "prototype.iconShopping", category: "icons" },
-  { value: "user", nameKey: "prototype.iconUser", category: "icons" },
-  { value: "settings2", nameKey: "prototype.iconSettings", category: "icons" },
-  { value: "mail", nameKey: "prototype.iconMail", category: "icons" },
-  { value: "bell", nameKey: "prototype.iconNotification", category: "icons" },
-  { value: "search", nameKey: "prototype.iconSearch", category: "icons" },
-  { value: "calendar", nameKey: "prototype.iconCalendar", category: "icons" },
-  { value: "barChart3", nameKey: "prototype.iconChart", category: "icons" },
-  { value: "messageSquare", nameKey: "prototype.iconMessage", category: "icons" },
+const ICON_DEFS: Array<{ value: string; label: () => string; category: ComponentCategory }> = [
+  { value: "smile", label: m.prd_prototype_iconGeneral, category: "icons" },
+  { value: "fileText", label: m.prd_prototype_iconFile, category: "icons" },
+  { value: "arrowLeft", label: m.prd_prototype_iconBack, category: "icons" },
+  { value: "mousePointerClick", label: m.prd_prototype_iconButton, category: "icons" },
+  { value: "textCursorInput", label: m.prd_prototype_iconInput, category: "icons" },
+  { value: "table2", label: m.prd_prototype_iconTable, category: "icons" },
+  { value: "image", label: m.prd_prototype_iconImage, category: "icons" },
+  { value: "shoppingCart", label: m.prd_prototype_iconShopping, category: "icons" },
+  { value: "user", label: m.prd_prototype_iconUser, category: "icons" },
+  { value: "settings2", label: m.prd_prototype_iconSettings, category: "icons" },
+  { value: "mail", label: m.prd_prototype_iconMail, category: "icons" },
+  { value: "bell", label: m.prd_prototype_iconNotification, category: "icons" },
+  { value: "search", label: m.prd_prototype_iconSearch, category: "icons" },
+  { value: "calendar", label: m.prd_prototype_iconCalendar, category: "icons" },
+  { value: "barChart3", label: m.prd_prototype_iconChart, category: "icons" },
+  { value: "messageSquare", label: m.prd_prototype_iconMessage, category: "icons" },
 ];
 
 export const ICON_COMPONENTS: PrototypeComponentConfig[] = ICON_DEFS.map((def) => ({
   type: `icon-${def.value}`,
-  name: i18n.t(def.nameKey),
+  name: def.label(),
   source: "builtin" as const,
   category: def.category,
   defaultWidth: 48,

package/src/plugins/core/prd/components/prototype/index.ts

@@ -19,6 +19,9 @@ export * from "@/components/prototype";
 
 import type { PrototypeComponentConfig } from "@/components/prototype";
 
+export { BUILTIN_COMPONENTS, GenericPrototype } from "@/components/prototype";
+export type { PrototypeComponentConfig } from "@/components/prototype";
+
 const _localModules = import.meta.glob("./imported/*.tsx", {
   eager: true,
   import: "config",

package/src/plugins/core/prd/components/restore-version-dialog.tsx

@@ -15,9 +15,8 @@
 // You should have received a copy of the GNU Affero General Public License
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
-
 import React from "react";
-import { useTranslation } from "react-i18next";
+import { m } from '@/paraglide/messages.js'
 import { Button } from "@/components/ui/button";
 import {
   Dialog,
@@ -45,16 +44,15 @@ export function RestoreVersionDialog({
   onConfirm,
   loading,
 }: RestoreVersionDialogProps) {
-  const { t } = useTranslation(["prd", "common"]);
   const newVersionNo = currentVersionNo + 1;
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent className="sm:max-w-md">
         <DialogHeader>
-          <DialogTitle>{t("version.restoreConfirmTitle")}</DialogTitle>
+          <DialogTitle>{m.version_restoreConfirmTitle()}</DialogTitle>
           <DialogDescription>
-            {t("version.restoreConfirmDescription", { current: currentVersionNo, next: newVersionNo, target: targetVersionNo })}
+            {m.version_restoreConfirmDescription({ current: currentVersionNo, next: newVersionNo, target: targetVersionNo })}
           </DialogDescription>
         </DialogHeader>
         <DialogFooter>
@@ -64,10 +62,10 @@ export function RestoreVersionDialog({
             disabled={loading}
             onClick={() => onOpenChange(false)}
           >
-            {t("common:button.cancel")}
+            {m.common_button_cancel()}
           </Button>
           <Button size="sm" disabled={loading} onClick={onConfirm}>
-            {loading ? t("version.restoring") : t("version.confirmRestore")}
+            {loading ? m.version_restoring() : m.version_confirmRestore()}
           </Button>
         </DialogFooter>
       </DialogContent>

package/src/plugins/core/prd/components/share/prd-share-client.tsx

@@ -15,9 +15,8 @@
 // You should have received a copy of the GNU Affero General Public License
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
-
 import { useState, useMemo, useCallback } from "react";
-import { useTranslation } from "react-i18next";
+import { m } from '@/paraglide/messages.js'
 import { SharePasswordGate } from "./share-password-gate";
 import { ShareLayout } from "./share-layout";
 import { ShareSSEListener } from "./share-sse-listener";
@@ -34,7 +33,6 @@ interface SharePageClientProps {
 }
 
 export function SharePageClient({ prdId, share, hasPassword: initialHasPassword, isActive: initialIsActive = true, versionLabel, shareNotFound }: SharePageClientProps) {
-  const { t } = useTranslation("prd");
   const sessionKey = useMemo(() => `share_pwd_${prdId}_${versionLabel || 'main'}`, [prdId, versionLabel]);
   const [hasPassword, setHasPassword] = useState(initialHasPassword);
   const [active, setActive] = useState(initialIsActive);
@@ -69,9 +67,9 @@ export function SharePageClient({ prdId, share, hasPassword: initialHasPassword,
             <div className="flex flex-col gap-6 w-full max-w-xs">
               <div className="space-y-2">
                 <AlertCircle className="size-10 text-muted-foreground" />
-                <h1 className="text-2xl font-bold">{t("shareClient.notFoundTitle")}</h1>
+                <h1 className="text-2xl font-bold">{m.shareClient_notFoundTitle()}</h1>
                 <p className="text-muted-foreground text-sm">
-                  {versionLabel ? t("shareClient.versionUnavailable", { version: versionLabel }) : t("shareClient.linkUnavailable")}
+                  {versionLabel ? m.shareClient_versionUnavailable({ version: versionLabel }) : m.shareClient_linkUnavailable()}
                 </p>
               </div>
             </div>
@@ -79,7 +77,7 @@ export function SharePageClient({ prdId, share, hasPassword: initialHasPassword,
           <AuthLayoutRight>
             <div className="space-y-4">
               <h1 className="text-4xl font-bold tracking-tight">AllBlue</h1>
-              <p className="text-lg text-muted-foreground">{t("share.brandTagline")}</p>
+              <p className="text-lg text-muted-foreground">{m.share_brandTagline()}</p>
             </div>
           </AuthLayoutRight>
         </AuthLayout>
@@ -89,9 +87,9 @@ export function SharePageClient({ prdId, share, hasPassword: initialHasPassword,
             <div className="flex flex-col gap-6 w-full max-w-xs">
               <div className="space-y-2">
                 <AlertCircle className="size-10 text-muted-foreground" />
-                <h1 className="text-2xl font-bold">{t("shareClient.inactiveTitle")}</h1>
+                <h1 className="text-2xl font-bold">{m.shareClient_inactiveTitle()}</h1>
                 <p className="text-muted-foreground text-sm">
-                  {versionLabel ? t("shareClient.versionUnavailable", { version: versionLabel }) : t("shareClient.linkUnavailable")}
+                  {versionLabel ? m.shareClient_versionUnavailable({ version: versionLabel }) : m.shareClient_linkUnavailable()}
                 </p>
               </div>
             </div>
@@ -99,7 +97,7 @@ export function SharePageClient({ prdId, share, hasPassword: initialHasPassword,
           <AuthLayoutRight>
             <div className="space-y-4">
               <h1 className="text-4xl font-bold tracking-tight">AllBlue</h1>
-              <p className="text-lg text-muted-foreground">{t("share.brandTagline")}</p>
+              <p className="text-lg text-muted-foreground">{m.share_brandTagline()}</p>
             </div>
           </AuthLayoutRight>
         </AuthLayout>

package/src/plugins/core/prd/components/share/share-annotation-overlay.tsx

@@ -15,7 +15,6 @@
 // You should have received a copy of the GNU Affero General Public License
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
-
 import { useEffect, useState } from "react";
 
 interface Segment {

package/src/plugins/core/prd/components/share/share-comment-panel.tsx

@@ -16,7 +16,6 @@
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 import { useState, useEffect } from "react";
-import { useTranslation } from "react-i18next";
 import { useForm } from "@tanstack/react-form";
 import { Button } from "@/components/ui/button";
 import { Textarea } from "@/components/ui/textarea";
@@ -32,6 +31,7 @@ import {
   createCommentFn,
   updateCommentFn,
 } from "../../serverFns/comments";
+import { m } from "@/paraglide/messages.js";
 
 interface CommentUser {
   id: string;
@@ -55,7 +55,6 @@ interface ShareCommentPanelProps {
 }
 
 export function ShareCommentPanel({ prdId }: ShareCommentPanelProps) {
-  const { t } = useTranslation(["share", "common"]);
   const { data: session } = useSession();
   const [comments, setComments] = useState<Comment[]>([]);
   const [editingId, setEditingId] = useState<string | null>(null);
@@ -74,7 +73,7 @@ export function ShareCommentPanel({ prdId }: ShareCommentPanelProps) {
     const text = form.state.values.text;
     if (!text.trim()) return;
     if (text.length > 500) {
-      toast.error(t("shareComment.maxLength"));
+      toast.error(m.shareComment_maxLength({ count: 500 }));
       return;
     }
     try {
@@ -83,9 +82,9 @@ export function ShareCommentPanel({ prdId }: ShareCommentPanelProps) {
       });
       setComments((prev) => [...prev, newComment as unknown as Comment]);
       form.setFieldValue("text", "");
-      toast.success(t("shareComment.sent"));
+      toast.success(m.shareComment_sent());
     } catch {
-      toast.error(t("shareComment.sendFailed"));
+      toast.error(m.shareComment_sendFailed());
     }
   };
 
@@ -98,7 +97,7 @@ export function ShareCommentPanel({ prdId }: ShareCommentPanelProps) {
     const editText = form.state.values.editText;
     if (!editText.trim()) return;
     if (editText.length > 500) {
-      toast.error(t("shareComment.maxLength"));
+      toast.error(m.shareComment_maxLength({ count: 500 }));
       return;
     }
     try {
@@ -110,9 +109,9 @@ export function ShareCommentPanel({ prdId }: ShareCommentPanelProps) {
       );
       setEditingId(null);
       form.setFieldValue("editText", "");
-      toast.success(t("shareComment.updated"));
+      toast.success(m.shareComment_updated());
     } catch {
-      toast.error(t("shareComment.updateFailed"));
+      toast.error(m.shareComment_updateFailed());
     }
   };
 
@@ -124,9 +123,9 @@ export function ShareCommentPanel({ prdId }: ShareCommentPanelProps) {
   return (
     <div className="flex flex-col h-full">
       <div className="flex-1 overflow-y-auto p-3 space-y-3">
-        <span className="text-xs font-medium text-muted-foreground">{t("shareComment.title")}</span>
+        <span className="text-xs font-medium text-muted-foreground">{m.shareComment_title()}</span>
         {comments.length === 0 ? (
-          <p className="text-xs text-muted-foreground text-center py-4">{t("shareComment.empty")}</p>
+          <p className="text-xs text-muted-foreground text-center py-4">{m.shareComment_empty()}</p>
         ) : (
           comments.map((c) => {
             const editedDiffMs =
@@ -153,7 +152,7 @@ export function ShareCommentPanel({ prdId }: ShareCommentPanelProps) {
                         variant="secondary"
                         className="text-[9px] h-3.5 px-1 leading-none font-normal"
                       >
-                        {t("shareComment.edited")}
+                        {m.shareComment_edited()}
                       </Badge>
                     )}
                     <span className="text-[10px] text-muted-foreground ml-auto">
@@ -185,7 +184,7 @@ export function ShareCommentPanel({ prdId }: ShareCommentPanelProps) {
                               className="h-6 text-xs px-2"
                               onClick={handleEditCancel}
                              >
-                               {t("shareComment.cancel")}
+                               {m.shareComment_cancel()}
                              </Button>
                             <Button
                               size="sm"
@@ -193,7 +192,7 @@ export function ShareCommentPanel({ prdId }: ShareCommentPanelProps) {
                               onClick={() => handleEditSave(c.id)}
                               disabled={!(field.value ?? "").trim()}
                              >
-                               {t("shareComment.save")}
+                               {m.shareComment_save()}
                              </Button>
                           </div>
                         </>
@@ -227,7 +226,7 @@ export function ShareCommentPanel({ prdId }: ShareCommentPanelProps) {
                 value={field.value ?? ""}
                 onChange={(e) => field.handleChange(e.target.value)}
                 onBlur={field.handleBlur}
-                placeholder={t("comment.input-placeholder")}
+                placeholder={m['share_comment_input-placeholder']()}
                 className="h-16 text-xs resize-none"
                 maxLength={500}
               />
@@ -241,7 +240,7 @@ export function ShareCommentPanel({ prdId }: ShareCommentPanelProps) {
                   onClick={handleSubmit}
                   disabled={!(field.value ?? "").trim()}
                 >
-                  {t("comment.send")}
+                  {m.share_comment_send()}
                 </Button>
               </div>
             </>
@@ -249,7 +248,7 @@ export function ShareCommentPanel({ prdId }: ShareCommentPanelProps) {
         </div>
       ) : (
         <div className="shrink-0 border-t p-3">
-          <p className="text-xs text-muted-foreground text-center">{t("comment.login-required")}</p>
+          <p className="text-xs text-muted-foreground text-center">{m['share_comment_login-required']()}</p>
         </div>
       )}
     </div>

package/src/plugins/core/prd/components/share/share-comment-review-panel.tsx

@@ -15,17 +15,16 @@
 // You should have received a copy of the GNU Affero General Public License
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
-
 import { useState } from "react";
-import { useTranslation } from "react-i18next";
+import { m } from '@/paraglide/messages.js'
 import { cn } from "@/lib/utils";
 import { MessageSquare, ClipboardCheck } from "lucide-react";
 import { ShareCommentPanel } from "./share-comment-panel";
 import { useSession } from "@/components/shared-kit/auth/auth-client";
 
 const SUBTABS = [
-  { key: "comment", labelKey: "comment.subtabComment", icon: <MessageSquare className="size-3.5" /> },
-  { key: "review", labelKey: "comment.subtabReview", icon: <ClipboardCheck className="size-3.5" /> },
+  { key: "comment", label: m.comment_subtabComment, icon: <MessageSquare className="size-3.5" /> },
+  { key: "review", label: m.comment_subtabReview, icon: <ClipboardCheck className="size-3.5" /> },
 ] as const;
 
 interface ShareCommentReviewPanelProps {
@@ -33,7 +32,6 @@ interface ShareCommentReviewPanelProps {
 }
 
 export function ShareCommentReviewPanel({ prdId }: ShareCommentReviewPanelProps) {
-  const { t } = useTranslation("prd");
   const { data: session } = useSession();
   const [activeSubTab, setActiveSubTab] = useState("comment");
 
@@ -51,7 +49,7 @@ export function ShareCommentReviewPanel({ prdId }: ShareCommentReviewPanelProps)
                 : "text-muted-foreground hover:text-foreground"
             )}
           >
-            {tab.icon} {t(tab.labelKey)}
+            {tab.icon} {tab.label()}
           </button>
         ))}
       </div>
@@ -62,11 +60,11 @@ export function ShareCommentReviewPanel({ prdId }: ShareCommentReviewPanelProps)
         </div>
       ) : (
         <div className="flex-1 overflow-y-auto p-3 space-y-3">
-          <span className="text-xs font-medium text-muted-foreground">{t("comment.subtabReview")}</span>
+          <span className="text-xs font-medium text-muted-foreground">{m.comment_subtabReview()}</span>
           {!session ? (
-            <p className="text-xs text-muted-foreground text-center py-4">{t("shareComment.loginRequired")}</p>
+            <p className="text-xs text-muted-foreground text-center py-4">{m.shareComment_loginRequired()}</p>
           ) : (
-            <p className="text-xs text-muted-foreground text-center py-4">{t("shareComment.reviewReserved")}</p>
+            <p className="text-xs text-muted-foreground text-center py-4">{m.shareComment_reviewReserved()}</p>
           )}
         </div>
       )}

package/src/plugins/core/prd/components/share/share-directory-tree.tsx

@@ -15,9 +15,8 @@
 // You should have received a copy of the GNU Affero General Public License
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
-
 import { ChevronRight } from "lucide-react";
-import { useTranslation } from "react-i18next";
+import { m } from '@/paraglide/messages.js'
 
 interface Version {
   id: string;
@@ -48,14 +47,13 @@ export function ShareDirectoryTree({
   selectedPageId,
   onSelectPage,
 }: ShareDirectoryTreeProps) {
-  const { t } = useTranslation("prd");
   return (
     <div className="p-2 space-y-0.5">
       <div className="text-[11px] font-medium text-muted-foreground uppercase tracking-wider px-2 py-1.5">
-        {t("shareDirectory.versions")}
+        {m.shareDirectory_versions()}
       </div>
       {versions.length === 0 ? (
-        <p className="text-xs text-muted-foreground px-2 py-2">{t("shareDirectory.noVersions")}</p>
+        <p className="text-xs text-muted-foreground px-2 py-2">{m.shareDirectory_noVersions()}</p>
       ) : (
         versions.map((v) => (
           <div key={v.id}>

package/src/plugins/core/prd/components/share/share-doc-view.tsx

@@ -15,9 +15,8 @@
 // You should have received a copy of the GNU Affero General Public License
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
-
 import { useEffect } from "react";
-import { useTranslation } from "react-i18next";
+import { m } from '@/paraglide/messages.js'
 import { useEditor, EditorContent } from "@tiptap/react";
 import StarterKit from "@tiptap/starter-kit";
 import Placeholder from "@tiptap/extension-placeholder";
@@ -31,11 +30,10 @@ interface ShareDocViewProps {
 }
 
 export function ShareDocView({ content, selectedComponentId, onSelectComponent }: ShareDocViewProps) {
-  const { t } = useTranslation("prd");
   const editor = useEditor({
     extensions: [
       StarterKit,
-      Placeholder.configure({ placeholder: t("shareDoc.noContentPlaceholder") }),
+      Placeholder.configure({ placeholder: m.shareDoc_noContentPlaceholder() }),
       AnnotationNode,
     ],
     content: "",
@@ -68,7 +66,7 @@ export function ShareDocView({ content, selectedComponentId, onSelectComponent }
   if (!content) {
     return (
       <div className="flex items-center justify-center h-64 text-muted-foreground text-sm">
-        {t("shareDoc.noDoc")}
+        {m.shareDoc_noDoc()}
       </div>
     );
   }

package/src/plugins/core/prd/components/share/share-layout.tsx

@@ -15,9 +15,8 @@
 // You should have received a copy of the GNU Affero General Public License
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
-
 import { useEffect, useMemo, useRef, useState } from "react";
-import { useTranslation } from "react-i18next";
+import { m } from '@/paraglide/messages.js'
 import { ShareNavBar } from "./share-nav-bar";
 import { ShareDirectoryTree } from "./share-directory-tree";
 import { SharePrototypeView } from "./share-prototype-view";
@@ -36,7 +35,6 @@ interface ShareLayoutProps {
 }
 
 export function ShareLayout({ prdId, share, versionLabel }: ShareLayoutProps) {
-  const { t } = useTranslation("prd");
   const containerRef = useRef<HTMLDivElement>(null);
   const [versions, setVersions] = useState<any[]>([]);
   const [activeVersionId, setActiveVersionId] = useState<string | null>(null);
@@ -136,7 +134,7 @@ export function ShareLayout({ prdId, share, versionLabel }: ShareLayoutProps) {
         <div ref={containerRef} className="flex-1 flex overflow-hidden relative" onClick={handleContainerClick}>
           <ResizablePanelGroup orientation="horizontal" className="h-full">
             <ResizablePanel defaultSize={60} minSize={20} className="overflow-auto p-4">
-              <div className="text-xs font-medium text-muted-foreground mb-2 uppercase tracking-wider">{t("shareLayout.prototype")}</div>
+              <div className="text-xs font-medium text-muted-foreground mb-2 uppercase tracking-wider">{m.shareLayout_prototype()}</div>
               <SharePrototypeView
                 elements={currentElements}
                 selectedComponentId={selectedComponentId}
@@ -145,7 +143,7 @@ export function ShareLayout({ prdId, share, versionLabel }: ShareLayoutProps) {
             </ResizablePanel>
             <ResizableHandle withHandle />
             <ResizablePanel defaultSize={40} minSize={20} className="overflow-auto p-4">
-              <div className="text-xs font-medium text-muted-foreground mb-2 uppercase tracking-wider">{t("shareLayout.doc")}</div>
+              <div className="text-xs font-medium text-muted-foreground mb-2 uppercase tracking-wider">{m.shareLayout_doc()}</div>
               <ShareDocView
                 content={currentContent}
                 selectedComponentId={selectedComponentId}

package/src/plugins/core/prd/components/share/share-nav-bar.tsx

@@ -15,9 +15,8 @@
 // You should have received a copy of the GNU Affero General Public License
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
-
 import { FileText, Spline, SplinePointer } from "lucide-react";
-import { useTranslation } from "react-i18next";
+import { m } from '@/paraglide/messages.js'
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
@@ -34,14 +33,13 @@ interface ShareNavBarProps {
 }
 
 export function ShareNavBar({ name, icon, showAllConnections = false, onToggleAllConnections }: ShareNavBarProps) {
-  const { t } = useTranslation("prd");
   const Icon = icon ? ICON_MAP[icon] || FileText : FileText;
   return (
     <div className="flex items-center justify-between h-11 px-4 border-b bg-background rounded-t-xl">
       <div className="flex items-center gap-2">
         <Icon className="size-5" />
         <span className="text-sm font-medium">{name}</span>
-        <Badge variant="outline" className="text-[10px] h-5">{t("shareNav.preview")}</Badge>
+        <Badge variant="outline" className="text-[10px] h-5">{m.shareNav_preview()}</Badge>
       </div>
       <div className="flex items-center gap-3">
         {onToggleAllConnections && (
@@ -61,7 +59,7 @@ export function ShareNavBar({ name, icon, showAllConnections = false, onToggleAl
               </Button>
             </TooltipTrigger>
             <TooltipContent>
-              <p>{showAllConnections ? t("shareNav.hideConnections") : t("shareNav.showConnections")}</p>
+              <p>{showAllConnections ? m.shareNav_hideConnections() : m.shareNav_showConnections()}</p>
             </TooltipContent>
           </Tooltip>
         )}

package/src/plugins/core/prd/components/share/share-password-gate.tsx

@@ -16,7 +16,7 @@
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 import { useState } from "react";
-import { useTranslation } from "react-i18next";
+import { m } from '@/paraglide/messages.js'
 import { AuthLayout, AuthLayoutLeft, AuthLayoutRight } from "@/components/shared-kit/auth/auth-layout";
 import { Input } from "@/components/ui/input";
 import { Button } from "@/components/ui/button";
@@ -31,7 +31,6 @@ interface SharePasswordGateProps {
 }
 
 export function SharePasswordGate({ prdId, shareName, onVerified, prdver }: SharePasswordGateProps) {
-  const { t } = useTranslation("prd");
   const [password, setPassword] = useState("");
   const [loading, setLoading] = useState(false);
 
@@ -39,11 +38,11 @@ export function SharePasswordGate({ prdId, shareName, onVerified, prdver }: Shar
     setLoading(true);
     try {
       const result = await verifySharePasswordFn({ data: { prdId, password, prdver: prdver ?? undefined } });
-      if (!result.valid) throw new Error(t("sharePassword.wrongPassword"));
+      if (!result.valid) throw new Error(m.sharePassword_wrongPassword());
       sessionStorage.setItem(`share_pwd_${prdId}_${prdver || 'main'}`, password);
       onVerified();
     } catch {
-      toast.error(t("sharePassword.wrongPasswordRetry"));
+      toast.error(m.sharePassword_wrongPasswordRetry());
     } finally {
       setLoading(false);
     }
@@ -54,9 +53,9 @@ export function SharePasswordGate({ prdId, shareName, onVerified, prdver }: Shar
       <AuthLayoutLeft>
         <div className="flex flex-col gap-6 w-full max-w-xs">
           <div className="space-y-2">
-            <h1 className="text-2xl font-bold">{t("sharePassword.encryptedTitle")}</h1>
+            <h1 className="text-2xl font-bold">{m.sharePassword_encryptedTitle()}</h1>
             <p className="text-muted-foreground text-sm">
-              {t("sharePassword.enterPassword", { name: shareName })}
+              {m.sharePassword_enterPassword({ name: shareName })}
             </p>
           </div>
           <div className="space-y-3">
@@ -64,7 +63,7 @@ export function SharePasswordGate({ prdId, shareName, onVerified, prdver }: Shar
               value={password}
               onChange={(e) => setPassword(e.target.value)}
               maxLength={4}
-              placeholder={t("sharePassword.passwordPlaceholder")}
+              placeholder={m.sharePassword_passwordPlaceholder()}
               className="h-11 text-lg font-mono tracking-widest text-center"
               type="text"
               onKeyDown={(e) => e.key === "Enter" && handleVerify()}
@@ -74,7 +73,7 @@ export function SharePasswordGate({ prdId, shareName, onVerified, prdver }: Shar
               onClick={handleVerify}
               disabled={loading || password.length !== 4}
             >
-              {loading ? t("sharePassword.verifying") : t("sharePassword.viewShare")}
+              {loading ? m.sharePassword_verifying() : m.sharePassword_viewShare()}
             </Button>
           </div>
         </div>
@@ -82,7 +81,7 @@ export function SharePasswordGate({ prdId, shareName, onVerified, prdver }: Shar
       <AuthLayoutRight>
         <div className="space-y-4">
           <h1 className="text-4xl font-bold tracking-tight">AllBlue</h1>
-          <p className="text-lg text-muted-foreground">{t("share.brandTagline")}</p>
+          <p className="text-lg text-muted-foreground">{m.share_brandTagline()}</p>
         </div>
       </AuthLayoutRight>
     </AuthLayout>

package/src/plugins/core/prd/components/share/share-prototype-view.tsx

@@ -15,9 +15,8 @@
 // You should have received a copy of the GNU Affero General Public License
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
-
 import React, { useEffect } from "react";
-import { useTranslation } from "react-i18next";
+import { m } from '@/paraglide/messages.js'
 import { getComponent } from "@/lib/prototype-registry";
 import { registerComponents } from "@/lib/prototype-registry";
 import { BUILTIN_COMPONENTS } from "@/plugins/core/prd/components/prototype";
@@ -30,7 +29,6 @@ interface SharePrototypeViewProps {
 }
 
 export function SharePrototypeView({ elements, selectedComponentId, onSelect }: SharePrototypeViewProps) {
-  const { t } = useTranslation("prd");
   useEffect(() => {
     registerComponents(BUILTIN_COMPONENTS);
   }, []);
@@ -38,7 +36,7 @@ export function SharePrototypeView({ elements, selectedComponentId, onSelect }:
   if (elements.length === 0) {
     return (
       <div className="flex items-center justify-center h-64 text-muted-foreground text-sm">
-        {t("sharePrototype.noElements")}
+        {m.sharePrototype_noElements()}
       </div>
     );
   }
@@ -81,7 +79,7 @@ export function SharePrototypeView({ elements, selectedComponentId, onSelect }:
             <Component props={{ ...config.defaultProps, ...(el.overrides ?? el.props ?? {}) }} style={el.style} />
             {isSelected && (
               <div className="absolute -top-6 left-0 px-1.5 py-0.5 bg-muted text-[10px] text-muted-foreground font-mono rounded max-w-60 truncate z-20 pointer-events-none">
-                {t("element.componentId", { id: el.id })}
+                {m.element_componentId({ id: el.id })}
               </div>
             )}
           </div>