@allbluecn/admin-app 0.3.2 → 0.3.4

package/src/components/admin/developer-log.tsx

@@ -4,7 +4,7 @@ import { Route } from '@/routes/_nav/developer-logs/route'
 import type { DeveloperLogEntry } from '@allbluecn/kernel'
 import { useQueryClient } from '@tanstack/react-query'
 import { useServerFn } from '@tanstack/react-start'
-import { toast } from '@/components/ui/toast'
+import { toast } from '@allbluecn/ui/toast'
 import {
   Plus,
   Pencil,
@@ -19,22 +19,12 @@ import {
   DialogHeader,
   DialogTitle,
   DialogFooter,
-} from '@/components/ui/dialog'
-import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-  AlertDialogTrigger,
-} from '@/components/ui/alert-dialog'
-import { Input } from '@/components/ui/input'
-import { Textarea } from '@/components/ui/textarea'
-import { Label } from '@/components/ui/label'
-import { Button } from '@/components/ui/button'
+} from '@allbluecn/ui/dialog'
+import { ConfirmDialog } from '@allbluecn/ui/components/confirm-dialog'
+import { Input } from '@allbluecn/ui/input'
+import { Textarea } from '@allbluecn/ui/textarea'
+import { Label } from '@allbluecn/ui/label'
+import { Button } from '@allbluecn/ui/button'
 import { createDeveloperLogFn, updateDeveloperLogFn, deleteDeveloperLogFn } from '@/server/serverFns/developer-logs'
 import { autoGenerateLogsFn, backfillLogDetailsFn } from '@/server/serverFns/developer-log-auto-generate'
 
@@ -315,21 +305,15 @@ function DeveloperLogPage() {
                       <Button variant="ghost" size="icon" className="size-7" onClick={() => handleEdit(entry)}>
                         <Pencil className="size-3.5" />
                       </Button>
-                      <AlertDialog>
-                        <AlertDialogTrigger render={<Button variant="ghost" size="icon" className="size-7 text-destructive" />}>
-                            <Trash2 className="size-3.5" />
-                          </AlertDialogTrigger>
-                        <AlertDialogContent>
-                          <AlertDialogHeader>
-                            <AlertDialogTitle>{m.common_button_delete()}</AlertDialogTitle>
-                            <AlertDialogDescription>{m.common_developerLogs_deleteConfirm()}</AlertDialogDescription>
-                          </AlertDialogHeader>
-                          <AlertDialogFooter>
-                            <AlertDialogCancel>{m.common_button_cancel()}</AlertDialogCancel>
-                            <AlertDialogAction onClick={() => handleDelete(entry.id)} className="bg-destructive hover:bg-destructive/90">{m.common_button_confirm()}</AlertDialogAction>
-                          </AlertDialogFooter>
-                        </AlertDialogContent>
-                      </AlertDialog>
+                      <ConfirmDialog
+                        trigger={<Button variant="ghost" size="icon" className="size-7 text-destructive"><Trash2 className="size-3.5" /></Button>}
+                        title={m.common_button_delete()}
+                        description={m.common_developerLogs_deleteConfirm()}
+                        cancelLabel={m.common_button_cancel()}
+                        confirmLabel={m.common_button_confirm()}
+                        confirmClassName="bg-destructive hover:bg-destructive/90"
+                        onConfirm={() => handleDelete(entry.id)}
+                      />
                     </div>
                   </td>
                 </tr>

package/src/components/ai-memory/memory-facts-panel.tsx

@@ -20,37 +20,27 @@ import { useMemo, useState } from "react"
 import {
   Eraser,
   Loader2,
-  RotateCw,
   Search,
   TriangleAlert,
   Trash2,
 } from "lucide-react"
 
 import { m } from "@/paraglide/messages.js"
-import { formatTimestamp } from "@allbluecn/web-app/lib/datetime"
-import { toast } from "@/components/ui/toast"
-import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
-import { Badge } from "@/components/ui/badge"
-import { Button } from "@/components/ui/button"
-import { Card, CardContent } from "@/components/ui/card"
-import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-} from "@/components/ui/alert-dialog"
+import { formatTimestamp } from "@allbluecn/ui/lib/datetime"
+import { toast } from "@allbluecn/ui/toast"
+import { Alert, AlertDescription, AlertTitle } from "@allbluecn/ui/alert"
+import { Badge } from "@allbluecn/ui/badge"
+import { Button } from "@allbluecn/ui/button"
+import { Card, CardContent } from "@allbluecn/ui/card"
+import { ConfirmDialog } from "@allbluecn/ui/components/confirm-dialog"
 import {
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from "@/components/ui/select"
-import { DataTable, type AdminColumnDef } from "@/components/data-table/data-table"
+} from "@allbluecn/ui/select"
+import { DataTable, type AdminColumnDef } from "@allbluecn/ui/data-table"
 import { listMemoryFactsFn } from "@/server/serverFns/ai-memory/list"
 import { deleteMemoryFactFn } from "@/server/serverFns/ai-memory/delete"
 import { clearMemoryFactsFn } from "@/server/serverFns/ai-memory/clear"
@@ -322,62 +312,32 @@ export function MemoryFactsPanel({
         </CardContent>
       </Card>
 
-      <AlertDialog open={pendingDelete !== null} onOpenChange={(open) => { if (!open) setPendingDelete(null) }}>
-        <AlertDialogContent>
-          <AlertDialogHeader>
-            <AlertDialogTitle>
-              {m["admin-ai-memory_delete_confirm_title"]()}
-            </AlertDialogTitle>
-            <AlertDialogDescription>
-              {m["admin-ai-memory_delete_confirm_description"]()}
-            </AlertDialogDescription>
-          </AlertDialogHeader>
-          <AlertDialogFooter>
-            <AlertDialogCancel>
-              {m["admin-ai-memory_delete_cancel"]()}
-            </AlertDialogCancel>
-            <AlertDialogAction
-              disabled={deletingId !== null}
-              onClick={(event) => {
-                if (!pendingDelete) return
-                event.preventDefault()
-                void handleDelete(pendingDelete, () => setPendingDelete(null))
-              }}
-            >
-              {m["admin-ai-memory_delete_confirm_action"]()}
-            </AlertDialogAction>
-          </AlertDialogFooter>
-        </AlertDialogContent>
-      </AlertDialog>
+      <ConfirmDialog
+        open={pendingDelete !== null}
+        onOpenChange={(open) => { if (!open) setPendingDelete(null) }}
+        title={m["admin-ai-memory_delete_confirm_title"]()}
+        description={m["admin-ai-memory_delete_confirm_description"]()}
+        cancelLabel={m["admin-ai-memory_delete_cancel"]()}
+        confirmLabel={m["admin-ai-memory_delete_confirm_action"]()}
+        confirmDisabled={deletingId !== null}
+        onConfirm={() => {
+          if (!pendingDelete) return
+          void handleDelete(pendingDelete, () => setPendingDelete(null))
+        }}
+      />
 
-      <AlertDialog
+      <ConfirmDialog
         open={confirmingClear}
         onOpenChange={(open) => {
           if (!open) setConfirmingClear(false)
         }}
-      >
-        <AlertDialogContent>
-          <AlertDialogHeader>
-            <AlertDialogTitle>
-              {m["admin-ai-memory_clear_confirm_title"]()}
-            </AlertDialogTitle>
-            <AlertDialogDescription>
-              {m["admin-ai-memory_clear_confirm_description"]()}
-            </AlertDialogDescription>
-          </AlertDialogHeader>
-          <AlertDialogFooter>
-            <AlertDialogCancel>
-              {m["admin-ai-memory_clear_cancel"]()}
-            </AlertDialogCancel>
-            <AlertDialogAction
-              disabled={loading}
-              onClick={() => void handleClear()}
-            >
-              {m["admin-ai-memory_clear_confirm_action"]()}
-            </AlertDialogAction>
-          </AlertDialogFooter>
-        </AlertDialogContent>
-      </AlertDialog>
+        title={m["admin-ai-memory_clear_confirm_title"]()}
+        description={m["admin-ai-memory_clear_confirm_description"]()}
+        cancelLabel={m["admin-ai-memory_clear_cancel"]()}
+        confirmLabel={m["admin-ai-memory_clear_confirm_action"]()}
+        confirmDisabled={loading}
+        onConfirm={() => void handleClear()}
+      />
     </div>
   )
 }

package/src/components/ai-prompts/preview-panel.tsx

@@ -20,7 +20,7 @@ import { useCallback, useEffect, useRef, useState } from "react"
 import { AlertTriangle, Loader2 } from "lucide-react"
 
 import { m } from "@/paraglide/messages.js"
-import { Input } from "@/components/ui/input"
+import { Input } from "@allbluecn/ui/input"
 import {
   PROMPT_PREVIEW_DEBOUNCE_MS,
   useDebouncedCallback,

package/src/components/ai-prompts/prompt-editor.tsx

@@ -18,7 +18,6 @@
 // apps/admin/src/components/ai-prompts/prompt-editor.tsx
 import { useCallback, useEffect, useState } from "react"
 import type {
-  SystemPromptSectionDTO,
   SystemPromptTemplateDTO,
 } from "@allbluecn/kernel"
 import { useMutation } from "@tanstack/react-query"
@@ -26,18 +25,18 @@ import { Link } from "@tanstack/react-router"
 import { ArrowLeft, Loader2, Save, ShieldCheck } from "lucide-react"
 
 import { m } from "@/paraglide/messages.js"
-import { toast } from "@/components/ui/toast"
-import { Badge } from "@/components/ui/badge"
-import { Button } from "@/components/ui/button"
-import { Field, FieldContent, FieldLabel } from "@/components/ui/field"
-import { Input } from "@/components/ui/input"
-import { Switch } from "@/components/ui/switch"
-import { Textarea } from "@/components/ui/textarea"
+import { toast } from "@allbluecn/ui/toast"
+import { Badge } from "@allbluecn/ui/badge"
+import { Button } from "@allbluecn/ui/button"
+import { Field, FieldContent, FieldLabel } from "@allbluecn/ui/field"
+import { Input } from "@allbluecn/ui/input"
+import { Switch } from "@allbluecn/ui/switch"
+import { Textarea } from "@allbluecn/ui/textarea"
 import {
   Tooltip,
   TooltipContent,
   TooltipTrigger,
-} from "@/components/ui/tooltip"
+} from "@allbluecn/ui/tooltip"
 import { activatePromptTemplateFn } from "@/server/serverFns/ai-prompts/activate"
 import { getPromptTemplateFn } from "@/server/serverFns/ai-prompts/get"
 import { rollbackPromptTemplateFn } from "@/server/serverFns/ai-prompts/rollback"

package/src/components/ai-prompts/prompt-table.tsx

@@ -19,14 +19,14 @@
 import { useMutation } from "@tanstack/react-query"
 import { Link, useRouter } from "@tanstack/react-router"
 import { Edit, ShieldCheck } from "lucide-react"
-import { formatTimestamp } from "@allbluecn/web-app/lib/datetime"
+import { formatTimestamp } from "@allbluecn/ui/lib/datetime"
 
 import { m } from "@/paraglide/messages.js"
-import { toast } from "@/components/ui/toast"
-import { Badge } from "@/components/ui/badge"
-import { Button } from "@/components/ui/button"
-import { Switch } from "@/components/ui/switch"
-import { DataTable, type AdminColumnDef } from "@/components/data-table/data-table"
+import { toast } from "@allbluecn/ui/toast"
+import { Badge } from "@allbluecn/ui/badge"
+import { Button } from "@allbluecn/ui/button"
+import { Switch } from "@allbluecn/ui/switch"
+import { DataTable, type AdminColumnDef } from "@allbluecn/ui/data-table"
 import { activatePromptTemplateFn } from "@/server/serverFns/ai-prompts/activate"
 import type { PromptTemplateRow } from "./prompt-utils"
 

package/src/components/ai-prompts/section-editor.tsx

@@ -19,9 +19,9 @@
 import { ArrowDown, ArrowUp, Plus, Trash2 } from "lucide-react"
 
 import { m } from "@/paraglide/messages.js"
-import { Button } from "@/components/ui/button"
-import { Input } from "@/components/ui/input"
-import { Textarea } from "@/components/ui/textarea"
+import { Button } from "@allbluecn/ui/button"
+import { Input } from "@allbluecn/ui/input"
+import { Textarea } from "@allbluecn/ui/textarea"
 import {
   appendSection,
   moveSection,

package/src/components/ai-prompts/variable-panel.tsx

@@ -19,8 +19,8 @@
 import { AlertTriangle, Plus, Trash2 } from "lucide-react"
 
 import { m } from "@/paraglide/messages.js"
-import { Button } from "@/components/ui/button"
-import { Input } from "@/components/ui/input"
+import { Button } from "@allbluecn/ui/button"
+import { Input } from "@allbluecn/ui/input"
 import {
   addVariable,
   removeVariable,

package/src/components/ai-prompts/version-history.tsx

@@ -18,26 +18,17 @@
 // apps/admin/src/components/ai-prompts/version-history.tsx
 import { useState } from "react"
 import { History, Loader2, RotateCcw } from "lucide-react"
-import { formatTimestamp } from "@allbluecn/web-app/lib/datetime"
+import { formatTimestamp } from "@allbluecn/ui/lib/datetime"
 
 import { m } from "@/paraglide/messages.js"
-import { Badge } from "@/components/ui/badge"
-import { Button } from "@/components/ui/button"
+import { Badge } from "@allbluecn/ui/badge"
+import { Button } from "@allbluecn/ui/button"
 import {
   Collapsible,
   CollapsibleContent,
   CollapsibleTrigger,
-} from "@/components/ui/collapsible"
-import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-} from "@/components/ui/alert-dialog"
+} from "@allbluecn/ui/collapsible"
+import { ConfirmDialog } from "@allbluecn/ui/components/confirm-dialog"
 import type { PromptVersionSummary } from "./prompt-utils"
 
 interface VersionHistoryProps {
@@ -125,33 +116,22 @@ export function VersionHistory({
         })}
       </CollapsibleContent>
 
-      <AlertDialog open={rollbackTarget !== null} onOpenChange={(open) => { if (!open) setRollbackTarget(null) }}>
-        <AlertDialogContent>
-          <AlertDialogHeader>
-            <AlertDialogTitle>
-              {m["admin-ai_prompts_rollback_confirm_title"]({
-                version: rollbackTarget ?? 0,
-              })}
-            </AlertDialogTitle>
-            <AlertDialogDescription>
-              {m["admin-ai_prompts_rollback_confirm_description"]({
-                version: rollbackTarget ?? 0,
-              })}
-            </AlertDialogDescription>
-          </AlertDialogHeader>
-          <AlertDialogFooter>
-            <AlertDialogCancel>{m.common_common_cancel()}</AlertDialogCancel>
-            <AlertDialogAction
-              disabled={rollbackPending}
-              onClick={() => {
-                if (rollbackTarget !== null) onRollback(rollbackTarget)
-              }}
-            >
-              {m["admin-ai_prompts_rollback_confirm_action"]()}
-            </AlertDialogAction>
-          </AlertDialogFooter>
-        </AlertDialogContent>
-      </AlertDialog>
+      <ConfirmDialog
+        open={rollbackTarget !== null}
+        onOpenChange={(open) => { if (!open) setRollbackTarget(null) }}
+        title={m["admin-ai_prompts_rollback_confirm_title"]({
+          version: rollbackTarget ?? 0,
+        })}
+        description={m["admin-ai_prompts_rollback_confirm_description"]({
+          version: rollbackTarget ?? 0,
+        })}
+        cancelLabel={m.common_common_cancel()}
+        confirmLabel={m["admin-ai_prompts_rollback_confirm_action"]()}
+        confirmDisabled={rollbackPending}
+        onConfirm={() => {
+          if (rollbackTarget !== null) onRollback(rollbackTarget)
+        }}
+      />
     </Collapsible>
   )
 }

package/src/components/ai-provider/model-list-editor.tsx

@@ -17,9 +17,8 @@
 
 // apps/admin/src/components/ai-provider/model-list-editor.tsx
 import { Plus, Trash2 } from "lucide-react"
-import { m } from '@/paraglide/messages.js'
-import { Button } from "@/components/ui/button"
-import { Input } from "@/components/ui/input"
+import { Button } from "@allbluecn/ui/button"
+import { Input } from "@allbluecn/ui/input"
 import { cn } from "@/lib/utils"
 import {
   MODEL_CAPABILITY_OPTIONS,

package/src/components/ai-provider/provider-form.tsx

@@ -21,7 +21,7 @@ import { m } from '@/paraglide/messages.js'
 import { useMutation } from "@tanstack/react-query"
 import { Link, useNavigate, useRouter } from "@tanstack/react-router"
 import { ArrowLeft, Loader2, Save } from "lucide-react"
-import { toast } from '@/components/ui/toast'
+import { toast } from '@allbluecn/ui/toast'
 import {
   ADAPTER_KINDS,
   PROVIDER_CATEGORIES,
@@ -29,17 +29,17 @@ import {
   type AdapterKind,
   type ProviderCategory,
 } from "@allbluecn/kernel"
-import { Button } from "@/components/ui/button"
-import { Input } from "@/components/ui/input"
-import { Textarea } from "@/components/ui/textarea"
-import { Switch } from "@/components/ui/switch"
+import { Button } from "@allbluecn/ui/button"
+import { Input } from "@allbluecn/ui/input"
+import { Textarea } from "@allbluecn/ui/textarea"
+import { Switch } from "@allbluecn/ui/switch"
 import {
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from "@/components/ui/select"
+} from "@allbluecn/ui/select"
 import {
   Field,
   FieldContent,
@@ -49,7 +49,7 @@ import {
   FieldSet,
   FieldLegend,
   FieldSeparator,
-} from "@/components/ui/field"
+} from "@allbluecn/ui/field"
 import { createAiProviderAdminFn } from "@/server/serverFns/ai-provider/create"
 import { updateAiProviderAdminFn } from "@/server/serverFns/ai-provider/update"
 import { ModelListEditor } from "./model-list-editor"

package/src/components/ai-provider/provider-table.tsx

@@ -21,22 +21,13 @@ import { m } from '@/paraglide/messages.js'
 import { useMutation } from "@tanstack/react-query"
 import { Link, useRouter } from "@tanstack/react-router"
 import { Edit, Plus, RefreshCw, Trash2, Users } from "lucide-react"
-import { toast } from '@/components/ui/toast'
+import { toast } from '@allbluecn/ui/toast'
 import { ADAPTER_KINDS, PROVIDER_BADGE_STYLES, type AiProviderRow } from "@allbluecn/kernel"
-import { Button } from "@/components/ui/button"
-import { Switch } from "@/components/ui/switch"
-import { Badge } from "@/components/ui/badge"
-import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-} from "@/components/ui/alert-dialog"
-import { DataTable, type AdminColumnDef } from "@/components/data-table/data-table"
+import { Button } from "@allbluecn/ui/button"
+import { Switch } from "@allbluecn/ui/switch"
+import { Badge } from "@allbluecn/ui/badge"
+import { ConfirmDialog } from "@allbluecn/ui/components/confirm-dialog"
+import { DataTable, type AdminColumnDef } from "@allbluecn/ui/data-table"
 import { ProviderIcon } from "./provider-icon"
 import { updateAiProviderAdminFn } from "@/server/serverFns/ai-provider/update"
 import { deleteAiProviderAdminFn } from "@/server/serverFns/ai-provider/delete"
@@ -245,33 +236,19 @@ export function ProviderTable({ data }: { data: AiProviderRow[] }) {
       </div>
       <DataTable columns={columns} data={data} />
 
-      <AlertDialog
+      <ConfirmDialog
         open={!!pendingDelete}
         onOpenChange={(open: boolean) => !open && setPendingDelete(null)}
-      >
-        <AlertDialogContent>
-          <AlertDialogHeader>
-            <AlertDialogTitle>
-              {m['admin-ai_table_deleteConfirm_title']({ name: pendingDelete?.displayName ?? '' })}
-            </AlertDialogTitle>
-            <AlertDialogDescription>
-              {m['admin-ai_table_deleteConfirm_description']()}
-            </AlertDialogDescription>
-          </AlertDialogHeader>
-          <AlertDialogFooter>
-            <AlertDialogCancel>{m.common_common_cancel()}</AlertDialogCancel>
-            <AlertDialogAction
-              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
-              onClick={() =>
-                pendingDelete && deleteMutation.mutate(pendingDelete.id)
-              }
-              disabled={deleteMutation.isPending}
-            >
-              {m['admin-ai_table_deleteConfirm_confirm']()}
-            </AlertDialogAction>
-          </AlertDialogFooter>
-        </AlertDialogContent>
-      </AlertDialog>
+        title={m['admin-ai_table_deleteConfirm_title']({ name: pendingDelete?.displayName ?? '' })}
+        description={m['admin-ai_table_deleteConfirm_description']()}
+        cancelLabel={m.common_common_cancel()}
+        confirmLabel={m['admin-ai_table_deleteConfirm_confirm']()}
+        confirmClassName="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+        confirmDisabled={deleteMutation.isPending}
+        onConfirm={() =>
+          pendingDelete && deleteMutation.mutate(pendingDelete.id)
+        }
+      />
     </div>
   )
 }

package/src/components/auth/admin-login-form.tsx

@@ -15,16 +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 { LogOut, User, Mail, Users, BarChart3, Shield, Settings, ArrowRight, ArrowLeft, Target } from "lucide-react";
+import { LogOut, Mail, Users, BarChart3, Shield, Settings, ArrowRight, ArrowLeft, Target } from "lucide-react";
 import { m } from '@/paraglide/messages.js'
 import { useState } from "react";
 import { signIn, signOut } from "@/lib/auth-client";
-import { Button } from "@/components/ui/button";
-import { Checkbox } from "@/components/ui/checkbox";
-import { Field, FieldLabel } from "@/components/ui/field";
-import { Card, CardContent } from "@/components/ui/card";
-import { toast } from '@/components/ui/toast';
-import { UserAvatar } from "@allbluecn/web-app/user-avatar";
+import { Button } from "@allbluecn/ui/button";
+import { Checkbox } from "@allbluecn/ui/checkbox";
+import { Field, FieldLabel } from "@allbluecn/ui/field";
+import { Card, CardContent } from "@allbluecn/ui/card";
+import { toast } from '@allbluecn/ui/toast';
+import { UserAvatar } from "@allbluecn/ui/components/user-avatar";
 import type { AvatarConfig, ShapeType } from "@allbluecn/kernel";
 import { AuthLayout, AuthLayoutLeft, AuthLayoutRight } from "@/components/auth/auth-layout";
 import { AuthHeader } from "@/components/auth/auth-header";

package/src/components/auth/icon-input.tsx

@@ -16,8 +16,8 @@
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 
-import { Input } from '@/components/ui/input'
-import { Label } from '@/components/ui/label'
+import { Input } from '@allbluecn/ui/input'
+import { Label } from '@allbluecn/ui/label'
 import type { LucideIcon } from 'lucide-react'
 
 interface IconInputProps extends React.InputHTMLAttributes<HTMLInputElement> {

package/src/components/auth/password-input.tsx

@@ -17,8 +17,8 @@
 
 import { useState } from 'react'
 import { m } from '@/paraglide/messages.js'
-import { Input } from '@/components/ui/input'
-import { Label } from '@/components/ui/label'
+import { Input } from '@allbluecn/ui/input'
+import { Label } from '@allbluecn/ui/label'
 import { Lock } from 'lucide-react'
 
 interface PasswordInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'> {

package/src/components/component/component-form-dialog.tsx

@@ -17,28 +17,28 @@
 
 import { useState, useEffect } from 'react'
 import { m } from '@/paraglide/messages.js'
-import { Button } from '@/components/ui/button'
-import { Input } from '@/components/ui/input'
-import { Label } from '@/components/ui/label'
-import { Textarea } from '@/components/ui/textarea'
-import { Switch } from '@/components/ui/switch'
+import { Button } from '@allbluecn/ui/button'
+import { Input } from '@allbluecn/ui/input'
+import { Label } from '@allbluecn/ui/label'
+import { Textarea } from '@allbluecn/ui/textarea'
+import { Switch } from '@allbluecn/ui/switch'
 import {
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from '@/components/ui/select'
+} from '@allbluecn/ui/select'
 import {
   Dialog,
   DialogContent,
   DialogFooter,
   DialogHeader,
   DialogTitle,
-} from '@/components/ui/dialog'
-import { getComponent, ComponentPreview } from '@allbluecn/web-app/prototype'
+} from '@allbluecn/ui/dialog'
+import { ComponentPreview } from './component-preview'
 import { createComponentFn, updateComponentFn } from '@/server/serverFns/components/mutations'
-import { toast } from '@/components/ui/toast'
+import { toast } from '@allbluecn/ui/toast'
 import type { ComponentItem } from './component-table'
 
 const CATEGORY_KEYS = ['base', 'block', 'template'] as const
@@ -153,19 +153,11 @@ export function ComponentFormDialog({ open, onOpenChange, component, onSuccess }
     if (!component) {
       return <span className="text-xs text-muted-foreground">{m.common_component_form_previewUnavailable()}</span>
     }
-    const config = getComponent(component.prototypeKey ?? '')
-    const Comp = config?.component
-    if (Comp) {
-      return (
-        <div className="pointer-events-none flex h-full w-full items-center justify-center overflow-hidden p-3">
-          <Comp props={propsState} style={(component.defaultStyle as Record<string, any>) ?? {}} />
-        </div>
-      )
-    }
     return (
       <ComponentPreview
         type={component.type}
         name={component.name}
+        prototypeKey={component.prototypeKey}
         defaultProps={propsState}
         defaultStyle={component.defaultStyle as Record<string, any>}
         size="md"