@arronqzy/react-view 0.0.1

package/src/panel/components/PanelRulers.tsx

@@ -0,0 +1,89 @@
+import React, { useEffect, useMemo, useState } from "react";
+import Ruler from "@scena/react-ruler";
+import { PANEL_Z_INDEX } from "../constants/zIndex";
+
+const RULER_WORLD_UNIT = 100;
+const RULER_SEGMENT = 10;
+
+export type PanelRulersProps = {
+  zoomX: number;
+  zoomY: number;
+  scrollLeft: number;
+  scrollTop: number;
+  size?: number;
+};
+
+export function PanelRulers({
+  zoomX,
+  zoomY,
+  scrollLeft,
+  scrollTop,
+  size = 32,
+}: PanelRulersProps) {
+  const [isDark, setIsDark] = useState(false);
+  useEffect(() => {
+    const root = document.documentElement;
+    const update = () => setIsDark(root.classList.contains("dark"));
+    update();
+    const observer = new MutationObserver(update);
+    observer.observe(root, { attributes: true, attributeFilter: ["class"] });
+    return () => observer.disconnect();
+  }, []);
+
+  const rulerScrollLeft = scrollLeft + size;
+  const rulerScrollTop = scrollTop + size;
+
+  const horizontalProps = useMemo(
+    () => ({
+      zoom: zoomX,
+      unit: RULER_WORLD_UNIT,
+      segment: RULER_SEGMENT,
+      backgroundColor: isDark ? "rgba(15,23,42,0.98)" : "rgba(255,255,255,0.98)",
+      lineColor: isDark ? "rgba(226,232,240,0.4)" : "rgba(15,23,42,0.22)",
+      textColor: isDark ? "rgba(248,250,252,0.95)" : "rgba(15,23,42,0.75)",
+      font: "10px system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial",
+      longLineSize: 8,
+      shortLineSize: 4,
+    }),
+    [isDark, zoomX]
+  );
+
+  const verticalProps = useMemo(
+    () => ({
+      zoom: zoomY,
+      unit: RULER_WORLD_UNIT,
+      segment: RULER_SEGMENT,
+      backgroundColor: isDark ? "rgba(15,23,42,0.98)" : "rgba(255,255,255,0.98)",
+      lineColor: isDark ? "rgba(226,232,240,0.4)" : "rgba(15,23,42,0.22)",
+      textColor: isDark ? "rgba(248,250,252,0.95)" : "rgba(15,23,42,0.75)",
+      font: "10px system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial",
+      longLineSize: 8,
+      shortLineSize: 4,
+    }),
+    [isDark, zoomY]
+  );
+
+  return (
+    <div
+      className="pointer-events-none absolute inset-0 isolate"
+      style={{ ["--rv-ruler-size" as string]: `${size}px`, zIndex: PANEL_Z_INDEX.ruler }}
+    >
+      <div className="absolute left-[var(--rv-ruler-size)] right-[var(--rv-ruler-size)] top-0 h-[var(--rv-ruler-size)] overflow-visible">
+        <Ruler type="horizontal" {...horizontalProps} scrollPos={rulerScrollLeft} />
+      </div>
+      <div className="absolute left-0 top-[var(--rv-ruler-size)] bottom-[var(--rv-ruler-size)] w-[var(--rv-ruler-size)] overflow-visible">
+        <Ruler type="vertical" {...verticalProps} scrollPos={rulerScrollTop} />
+      </div>
+      <div className="absolute left-[var(--rv-ruler-size)] right-[var(--rv-ruler-size)] bottom-0 h-[var(--rv-ruler-size)] overflow-visible">
+        <Ruler type="horizontal" {...horizontalProps} scrollPos={rulerScrollLeft} />
+      </div>
+      <div className="absolute right-0 top-[var(--rv-ruler-size)] bottom-[var(--rv-ruler-size)] w-[var(--rv-ruler-size)] overflow-visible">
+        <Ruler type="vertical" {...verticalProps} scrollPos={rulerScrollTop} />
+      </div>
+      <div className="absolute left-0 top-0 h-[var(--rv-ruler-size)] w-[var(--rv-ruler-size)] border-b border-r border-border bg-background" />
+      <div className="absolute right-0 top-0 h-[var(--rv-ruler-size)] w-[var(--rv-ruler-size)] border-b border-l border-border bg-background" />
+      <div className="absolute left-0 bottom-0 h-[var(--rv-ruler-size)] w-[var(--rv-ruler-size)] border-r border-t border-border bg-background" />
+      <div className="absolute right-0 bottom-0 h-[var(--rv-ruler-size)] w-[var(--rv-ruler-size)] border-l border-t border-border bg-background" />
+    </div>
+  );
+}

package/src/panel/components/SelectLayer.tsx

@@ -0,0 +1,106 @@
+import React, { useCallback, useMemo } from "react";
+import Selecto from "react-selecto";
+
+export type SelectLayerProps = {
+  container: HTMLElement | null;
+  dragContainer?: HTMLElement | null;
+  rootContainer?: HTMLElement | null;
+  selectableTargets?: string[];
+  selectedIds: string[];
+  onSelectedIdsChange: (ids: string[]) => void;
+};
+
+export function SelectLayer({
+  container,
+  dragContainer,
+  rootContainer,
+  selectableTargets = [".rv-selectable"],
+  selectedIds,
+  onSelectedIdsChange,
+}: SelectLayerProps) {
+  const selectedIdSet = useMemo(() => new Set(selectedIds), [selectedIds]);
+  const dragRoot = dragContainer ?? rootContainer ?? null;
+  const overlayContainer = typeof document !== "undefined" ? document.body : null;
+
+  const handleSelect = useCallback(
+    (e: any) => {
+      const input = e?.inputEvent as MouseEvent | undefined;
+      if (input && input.button !== 0) return;
+      const selected = (e?.selected ?? []) as Array<HTMLElement | SVGElement>;
+      const idSet = new Set<string>();
+      for (const el of selected) {
+        const root = (el as Element).closest?.(".rv-selectable") as
+          | HTMLElement
+          | null;
+        const id = root?.dataset.elementId;
+        if (id) idSet.add(id);
+      }
+      onSelectedIdsChange(Array.from(idSet));
+    },
+    [onSelectedIdsChange]
+  );
+
+  if (!container || !dragRoot || !overlayContainer) return null;
+
+  return (
+    <Selecto
+      // container 可以是 transform 过的画布；rootContainer 必须是未 transform 的真实坐标系容器
+      container={container}
+      rootContainer={dragRoot}
+      // 选择框渲染到 body，避免受滚动/缩放影响产生偏移
+      portalContainer={overlayContainer}
+      // 鼠标事件绑定到滚动容器，确保 clientX/Y 与坐标系一致
+      dragContainer={dragRoot}
+      selectableTargets={selectableTargets}
+      // 点击选中交给 ElementsLayer（支持 shift 多选），Selecto 只负责框选
+      selectByClick={false}
+      selectFromInside={false}
+      // 不要阻止在节点内部的拖动（让 Moveable 接管拖拽移动）
+      preventDragFromInside={false}
+      preventDefault={false}
+      continueSelect={false}
+      toggleContinueSelect="shift"
+      ratio={0}
+      hitRate={0}
+      dragCondition={(e: any) => {
+        const input = e?.inputEvent as MouseEvent | undefined;
+        // 只允许左键触发框选，右键不参与选区变更
+        if (input && input.button !== 0) return false;
+        const target = (input?.target as HTMLElement | null) ?? null;
+        const isShift = !!input?.shiftKey;
+        if (isShift) return true;
+
+        // 已有选中时：在选中区域/Moveable 控制框上按下，应该交给 Moveable 拖动，不启动框选
+        if (selectedIdSet.size > 0) {
+          if (
+            target?.closest(".moveable-control-box") ||
+            target?.closest(".moveable-line") ||
+            target?.closest(".moveable-control") ||
+            target?.closest(".moveable-direction")
+          ) {
+            return false;
+          }
+          const selectable = target?.closest(".rv-selectable") as HTMLElement | null;
+          const id = selectable?.dataset.elementId;
+          if (id && selectedIdSet.has(id)) return false;
+        }
+        return true;
+      }}
+      onDragStart={(e: { inputEvent: { target: unknown }; stop: () => void }) => {
+        const input = e.inputEvent as MouseEvent | undefined;
+        if (input && input.button !== 0) {
+          e.stop();
+          return;
+        }
+        // 已有多选时，默认应该是拖动移动；只有按住 shift 才继续框选/追加
+        const target = e.inputEvent.target as HTMLElement | null;
+        const selectable = target?.closest(".rv-selectable") as HTMLElement | null;
+        const id = selectable?.dataset.elementId;
+        const isShift = (e.inputEvent as MouseEvent | undefined)?.shiftKey ?? false;
+        if (id && selectedIdSet.has(id) && !isShift) e.stop();
+      }}
+      onSelect={handleSelect}
+    />
+  );
+}
+

package/src/panel/components/ViewElementScopePanel.tsx

@@ -0,0 +1,79 @@
+import { useEffect, useRef, useState } from "react";
+
+import { formatViewElementScope } from "../utils/scope-template";
+
+const SCOPE_COLLAPSE_STORAGE_KEY = "panel:config-scope-collapsed";
+
+export type ViewElementScopePanelProps = {
+  scope: unknown;
+};
+
+export function ViewElementScopePanel({ scope }: ViewElementScopePanelProps) {
+  const [isCollapsed, setIsCollapsed] = useState(false);
+  const [scopeUpdated, setScopeUpdated] = useState(false);
+  const prevScopeSerializedRef = useRef<string | null>(null);
+  const themedScrollbarClass =
+    "scrollbar-thin [&::-webkit-scrollbar]:h-2 [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-track]:bg-muted/40 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-border/80 [&::-webkit-scrollbar-thumb]:hover:bg-border";
+
+  useEffect(() => {
+    const stored = window.localStorage.getItem(SCOPE_COLLAPSE_STORAGE_KEY);
+    if (stored === "1") setIsCollapsed(true);
+  }, []);
+
+  useEffect(() => {
+    window.localStorage.setItem(
+      SCOPE_COLLAPSE_STORAGE_KEY,
+      isCollapsed ? "1" : "0"
+    );
+  }, [isCollapsed]);
+
+  useEffect(() => {
+    const serialized = formatViewElementScope(scope);
+    if (
+      prevScopeSerializedRef.current !== null &&
+      prevScopeSerializedRef.current !== serialized
+    ) {
+      setScopeUpdated(true);
+    }
+    prevScopeSerializedRef.current = serialized;
+  }, [scope]);
+
+  return (
+    <div className="mt-2 border-t border-border/50 pt-2">
+      <div className="flex items-center justify-between gap-2">
+        <div className="flex min-w-0 items-center gap-1.5">
+          <div className="text-[11px] font-medium text-foreground">Scope 数据</div>
+          {scopeUpdated ? (
+            <span className="shrink-0 rounded bg-sky-500/15 px-1.5 py-0.5 text-[10px] font-medium text-sky-700 dark:text-sky-300">
+              已更新
+            </span>
+          ) : null}
+        </div>
+        <button
+          type="button"
+          className="rounded border border-border px-1.5 py-0.5 text-[11px] text-muted-foreground hover:bg-accent"
+          onClick={() => setIsCollapsed((prev) => !prev)}
+        >
+          {isCollapsed ? "展开 Scope" : "收起 Scope"}
+        </button>
+      </div>
+      {!isCollapsed ? (
+        <>
+          <pre
+            className={`mt-2 max-h-[200px] overflow-auto rounded-md border border-border/70 bg-muted/30 p-2 font-mono text-[10px] leading-relaxed text-foreground ${themedScrollbarClass}`}
+          >
+            {formatViewElementScope(scope)}
+          </pre>
+          <p className="mt-1.5 text-[10px] leading-relaxed text-muted-foreground">
+            表单中可使用模版字符串引用 scope，例如{" "}
+            <code className="rounded bg-muted px-1">{`{scope?.a||0}`}</code>
+            、
+            <code className="rounded bg-muted px-1">{`{scope?.name||''}`}</code>
+            。支持 <code className="rounded bg-muted px-1">?.</code> 与{" "}
+            <code className="rounded bg-muted px-1">||</code> 占位。
+          </p>
+        </>
+      ) : null}
+    </div>
+  );
+}

package/src/panel/components/WorkspaceConfigSidebar.tsx

@@ -0,0 +1,158 @@
+import { useMemo } from "react";
+
+import {
+  BlueprintExecutionLogPanel,
+  BlueprintNodeConfigSidebar,
+  type BlueprintGraphNode,
+  type ExecutionLogSettings,
+  type ExecutionTraceEntry,
+} from "@arronqzy/react-blueprint";
+import {
+  Empty,
+  EmptyDescription,
+  EmptyIcon,
+  EmptyTitle,
+} from "@arronqzy/ui";
+
+import type { PanelConfigSidebarProps } from "./PanelConfigSidebar";
+import { PanelConfigSidebar } from "./PanelConfigSidebar";
+import type { PanelElement } from "../types";
+
+export type WorkspaceConfigFocus = "view" | "blueprint" | "blueprint-log";
+
+export type BlueprintExecutionLogViewProps = {
+  entries: ExecutionTraceEntry[];
+  settings: ExecutionLogSettings;
+  onUpdateSettings: (patch: Partial<ExecutionLogSettings>) => void;
+  onSave: () => void;
+  onExport: () => void;
+  onClear: () => void;
+  onClearAllSaved?: () => void | Promise<void>;
+  onApplyRetention: () => void;
+  hasSavedRuns?: boolean;
+  lifecyclePhase?: string;
+};
+
+export type WorkspaceConfigSidebarProps = Omit<
+  PanelConfigSidebarProps,
+  "selectedElement" | "selectedElements"
+> & {
+  configFocus: WorkspaceConfigFocus;
+  executionLog?: BlueprintExecutionLogViewProps;
+  selectedBlueprintNode: BlueprintGraphNode | null;
+  allowFalseSignalPropagation?: boolean;
+  onUpdateAllowFalseSignalPropagation?: (value: boolean) => void;
+  onUpdateBlueprintNode: (
+    nodeId: string,
+    patch: Partial<
+      Pick<
+        BlueprintGraphNode,
+        | "label"
+        | "role"
+        | "nodeType"
+        | "configSource"
+        | "viewElementId"
+        | "viewElementIds"
+        | "nestedBlueprintId"
+        | "libraryBlueprintId"
+        | "lifecyclePhase"
+        | "fetchConfig"
+        | "jsonConfig"
+        | "logicConfig"
+        | "clockConfig"
+      >
+    >
+  ) => void;
+  blueprintLibraryOptions?: { id: string; label: string }[];
+  selectedElement: PanelElement | null;
+  selectedElements?: PanelElement[];
+  allViewElements: PanelElement[];
+};
+
+export function WorkspaceConfigSidebar({
+  configFocus,
+  executionLog,
+  selectedBlueprintNode,
+  allowFalseSignalPropagation = false,
+  onUpdateAllowFalseSignalPropagation,
+  onUpdateBlueprintNode,
+  blueprintLibraryOptions = [],
+  selectedElement,
+  selectedElements,
+  allViewElements,
+  ...viewPanelProps
+}: WorkspaceConfigSidebarProps) {
+  const viewElementOptions = useMemo(
+    () =>
+      allViewElements.map((el) => ({
+        id: el.id,
+        label: el.name?.trim() || el.chart?.title || el.materialType || el.id,
+      })),
+    [allViewElements]
+  );
+
+  if (configFocus === "view") {
+    return (
+      <PanelConfigSidebar
+        {...viewPanelProps}
+        selectedElement={selectedElement}
+        selectedElements={selectedElements}
+      />
+    );
+  }
+
+  if (configFocus === "blueprint-log" && executionLog) {
+    return (
+      <BlueprintExecutionLogPanel
+        entries={executionLog.entries}
+        settings={executionLog.settings}
+        onUpdateSettings={executionLog.onUpdateSettings}
+        onSave={() => void executionLog.onSave()}
+        onExport={executionLog.onExport}
+        onClear={executionLog.onClear}
+        onClearAllSaved={executionLog.onClearAllSaved}
+        hasSavedRuns={executionLog.hasSavedRuns}
+        onApplyRetention={() => void executionLog.onApplyRetention()}
+        lifecyclePhase={executionLog.lifecyclePhase}
+      />
+    );
+  }
+
+  if (!selectedBlueprintNode) {
+    return (
+      <div className="flex h-full flex-col overflow-hidden bg-background text-foreground">
+        <Empty className="py-10">
+          <EmptyIcon>
+            <svg
+              viewBox="0 0 24 24"
+              className="h-4 w-4"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="1.8"
+              aria-hidden="true"
+            >
+              <circle cx="6" cy="6" r="2" />
+              <circle cx="18" cy="18" r="2" />
+              <path d="M8 7l8 4M8 17l8-4" />
+            </svg>
+          </EmptyIcon>
+          <EmptyTitle>未选中蓝图节点</EmptyTitle>
+          <EmptyDescription>
+            在蓝图面板中选中一个节点后，这里会显示对应的配置。
+          </EmptyDescription>
+        </Empty>
+      </div>
+    );
+  }
+
+  return (
+    <BlueprintNodeConfigSidebar
+      node={selectedBlueprintNode}
+      allowFalseSignalPropagation={allowFalseSignalPropagation}
+      onUpdateAllowFalseSignalPropagation={onUpdateAllowFalseSignalPropagation}
+      viewElementOptions={viewElementOptions}
+      blueprintLibraryOptions={blueprintLibraryOptions}
+      onUpdateNode={onUpdateBlueprintNode}
+    />
+  );
+}

package/src/panel/components/WorkspaceProjectNav.tsx

@@ -0,0 +1,220 @@
+import React, { useState } from "react";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  Button,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@arronqzy/ui";
+import type { WorkspaceProjectListItem } from "../library/workspace-project-db";
+
+function formatUpdatedAt(ts: number): string {
+  try {
+    return new Date(ts).toLocaleString();
+  } catch {
+    return String(ts);
+  }
+}
+
+export type WorkspaceProjectNavProps = {
+  projects: WorkspaceProjectListItem[];
+  activeProjectId: string | null;
+  activeProjectName: string | null;
+  dirty: boolean;
+  onCreateProject: () => Promise<{ name: string; id: string } | void>;
+  onOpenProject: (id: string) => Promise<void>;
+  onSyncProject: () => Promise<string | void>;
+  onDeleteProject: (id: string) => Promise<void>;
+  onPreviewProject: (id: string, options?: { syncFirst?: boolean }) => Promise<void>;
+};
+
+export function WorkspaceProjectNav({
+  projects,
+  activeProjectId,
+  activeProjectName,
+  dirty,
+  onCreateProject,
+  onOpenProject,
+  onSyncProject,
+  onDeleteProject,
+  onPreviewProject,
+}: WorkspaceProjectNavProps) {
+  const [pendingDeleteId, setPendingDeleteId] = useState<string | null>(null);
+  const [busy, setBusy] = useState(false);
+
+  const pendingDelete = projects.find((p) => p.id === pendingDeleteId) ?? null;
+
+  const runAction = async (action: () => Promise<unknown>) => {
+    if (busy) return;
+    setBusy(true);
+    try {
+      await action();
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  return (
+    <>
+      <div className="flex items-center gap-1.5 border-l border-border pl-2">
+        <TooltipProvider delayDuration={150}>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button
+                type="button"
+                variant="outline"
+                size="sm"
+                className="h-7 px-2 text-xs"
+                disabled={busy}
+                onClick={() => void runAction(onCreateProject)}
+              >
+                创建工作区
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent className="z-[10100]">
+              以当前产物名称新建一条 IndexedDB 工作区记录，不会覆盖已有工作区
+            </TooltipContent>
+          </Tooltip>
+
+          {activeProjectId ? (
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button
+                  type="button"
+                  variant={dirty ? "default" : "outline"}
+                  size="sm"
+                  className="h-7 px-2 text-xs"
+                  disabled={busy || !dirty}
+                  onClick={() => void runAction(onSyncProject)}
+                >
+                  同步{dirty ? " *" : ""}
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent className="z-[10100]">
+                {dirty
+                  ? `同步更新「${activeProjectName ?? "当前工作区"}」到 IndexedDB`
+                  : "当前工作区已与 IndexedDB 同步"}
+              </TooltipContent>
+            </Tooltip>
+          ) : null}
+
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button
+                type="button"
+                variant="outline"
+                size="sm"
+                className="h-7 max-w-[200px] truncate px-2 text-xs"
+                disabled={busy}
+              >
+                {activeProjectName ? `工作区：${activeProjectName}` : "已保存工作区"}
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="start" className="z-[10100] w-72">
+              {projects.length === 0 ? (
+                <DropdownMenuItem disabled>暂无已保存工作区</DropdownMenuItem>
+              ) : (
+                projects.map((project) => (
+                  <div key={project.id} className="px-1 py-0.5">
+                    <div className="flex items-center gap-1">
+                      <button
+                        type="button"
+                        className={[
+                          "min-w-0 flex-1 rounded px-2 py-1.5 text-left text-xs hover:bg-accent",
+                          activeProjectId === project.id ? "bg-accent/60 font-medium" : "",
+                        ].join(" ")}
+                        onClick={() =>
+                          void runAction(async () => {
+                            await onOpenProject(project.id);
+                          })
+                        }
+                      >
+                        <div className="truncate">{project.name}</div>
+                        <div className="truncate text-[10px] text-muted-foreground">
+                          {formatUpdatedAt(project.updatedAt)}
+                        </div>
+                      </button>
+                      <Button
+                        type="button"
+                        variant="ghost"
+                        size="sm"
+                        className="h-7 shrink-0 px-2 text-[10px]"
+                        onClick={() =>
+                          void runAction(async () => {
+                            await onPreviewProject(project.id, {
+                              syncFirst: activeProjectId === project.id,
+                            });
+                          })
+                        }
+                      >
+                        预览
+                      </Button>
+                      <Button
+                        type="button"
+                        variant="ghost"
+                        size="sm"
+                        className="h-7 shrink-0 px-2 text-[10px] text-destructive hover:text-destructive"
+                        onClick={() => setPendingDeleteId(project.id)}
+                      >
+                        删除
+                      </Button>
+                    </div>
+                  </div>
+                ))
+              )}
+              {/* <DropdownMenuSeparator />
+              <DropdownMenuItem onClick={() => void runAction(onCreateProject)}>
+                创建工作区
+              </DropdownMenuItem> */}
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </TooltipProvider>
+      </div>
+
+      <AlertDialog
+        open={!!pendingDelete}
+        onOpenChange={(open) => {
+          if (!open) setPendingDeleteId(null);
+        }}
+      >
+        <AlertDialogContent className="z-[10150]">
+          <AlertDialogHeader>
+            <AlertDialogTitle>删除工作区？</AlertDialogTitle>
+            <AlertDialogDescription>
+              将永久删除 IndexedDB 中的「{pendingDelete?.name ?? ""}」，此操作不可恢复。
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>取消</AlertDialogCancel>
+            <AlertDialogAction
+              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+              onClick={() => {
+                const id = pendingDeleteId;
+                setPendingDeleteId(null);
+                if (!id) return;
+                void runAction(async () => {
+                  await onDeleteProject(id);
+                });
+              }}
+            >
+              删除
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </>
+  );
+}