@arronqzy/react-view 1.0.38 → 1.0.40

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arronqzy/react-view",
-  "version": "1.0.38",
+  "version": "1.0.40",
   "files": [
     "src",
     "dist",
@@ -31,13 +31,13 @@
     "@codemirror/theme-one-dark": "^6.1.2",
     "@codemirror/view": "^6.36.2",
     "@arronqzy/blueprint-dsl": "1.0.17",
-    "@arronqzy/ui": "1.0.10",
+    "@arronqzy/ui": "1.0.11",
     "@arronqzy/i18n": "0.1.17",
-    "@arronqzy/react-blueprint": "1.0.23",
+    "@arronqzy/react-blueprint": "1.0.25",
     "@arronqzy/rx-store": "1.0.8",
     "@arronqzy/view-scene3d": "0.1.5",
-    "@arronqzy/webllm-assistant": "0.1.16",
-    "@arronqzy/view-table": "0.1.8"
+    "@arronqzy/view-table": "0.1.8",
+    "@arronqzy/webllm-assistant": "0.1.16"
   },
   "devDependencies": {
     "@types/react": "^19.0.1",

package/readme.md

@@ -57,7 +57,8 @@ export function Editor({ workspace }: { workspace?: WorkspaceProjectRecord | nul
 |------|------|------|
 | `className` | 根节点 class | — |
 | `initialZoom` | 初始缩放 | `1` |
-| `initialWorkspace` | 挂载后加载的完整工作区。空则空白画布 | — |
+| `initialWorkspace` | 挂载后加载的完整工作区。空则空白画布。带 `id` 时默认同步进 IndexedDB | — |
+| `workspaceId` | 按 IndexedDB id 打开（不 remount） | — |
 
 ## 在线预览
 
@@ -89,7 +90,7 @@ parseOnlinePreviewSearchParams("?preview=online&projectId=xxx");
 
 ## 工作区事件
 
-回调带完整工作区，用来写自己的后端。IndexedDB 的增删改查不导出。
+回调带完整工作区，用来写自己的后端。`initialWorkspace` 会默认同步进 IndexedDB；本地副本可用导出的 list / get / delete / clear 清理。
 
 ```ts
 import {
@@ -111,10 +112,12 @@ syncSub.unsubscribe();
 | 事件 | 常量 | 何时触发 |
 |------|------|----------|
 | `workspace:add` | `AbuilderEvents.workspaceAdd` | 创建成功 |
-| `workspace:sync` | `AbuilderEvents.workspaceSync` | 同步成功 |
+| `workspace:sync` | `AbuilderEvents.workspaceSync` | 同步成功（载荷含 `nameSpace`） |
 | `workspace:delete` | `AbuilderEvents.workspaceDelete` | 删除工作区，参数 `{ ids, nameSpace }` |
+| `blueprint-library:changed` | `AbuilderEvents.blueprintLibraryChanged` | 蓝图库变更 |
+| `api-collection:changed` | `AbuilderEvents.apiCollectionChanged` | 接口集合变更 |
 
-`workspace:add` / `workspace:sync` 的参数字段：`id`、`name`、`createdAt`、`updatedAt`、`panelState`、`blueprintDocument`、`blueprintMeta`、`productName`、`titleIconDataUrl`。
+`workspace:add` / `workspace:sync` 的参数字段：上述工作区字段 + `nameSpace`。可用 `addEventSubscription(event, cb, { nameSpace })` 过滤。
 
 校验：
 
@@ -155,14 +158,14 @@ const dataUrl = await getPreviewSnapshot({
 | `addEventSubscription` / `AbuilderEvents` | 工作区事件 |
 | `getPreviewSnapshot` | 预览截图 data URL |
 | `parseWorkspaceData` 等 | 校验 / 解析 / 空工作区 |
-| `listWorkspaceProjects` / `getWorkspaceProject` / `deleteWorkspaceProject` / `clearWorkspaceProjects` | 浏览器 IndexedDB 中保存的工作区 |
-| `listBlueprintLibrary` / `getBlueprintLibraryRecord` / `deleteBlueprintLibraryRecord` / `clearBlueprintLibrary` | 蓝图库；删除后已挂载的面板自动刷新 |
-| `listExecutionRunRecords` / `getExecutionRunRecord` / `deleteExecutionRunRecord` / `clearAllExecutionRunRecords` / `purgeExecutionRunsOlderThan` / `trimExecutionRunRecordsToMax` | 蓝图执行日志 |
-| `readExecutionLogSettings` / `writeExecutionLogSettings` | 执行日志保留策略 |
-| `listApiCollectionRecords` / `deleteApiCollection` / `clearApiCollections` | 接口集合 |
-| `clearAbuilderStorage` | 一次清空以上四类数据，返回各自删除数量；不动偏好设置 |
-
-本地数据函数的最后一个参数都是 `nameSpace`，要和面板的 `nameSpace` 一致。
+| `putWorkspaceProject` / `upsertWorkspaceProject` / `list` / `get` / `delete` / `clear` | 工作区完整 CRUD |
+| `putBlueprintLibraryRecord` / `list` / `get` / `delete` / `clear` | 蓝图库完整 CRUD |
+| `putExecutionRunRecord` / `list` / `get` / `delete` / `clear` / `purge*` / `trim*` | 执行日志 |
+| `putApiCollection` / `upsertApiCollectionFromJson` / `list` / `delete` / `clear` | 接口集合 |
+| `getCurrentWorkspace` / `openWorkspace` / `createWorkspace` / `saveWorkspace` / `syncWorkspace` | 命令式操作已挂载面板 |
+| `clearAbuilderStorage` | 一次清空四类数据 |
+
+本地数据函数的 `nameSpace` 要和面板一致。面板 `ref` 类型为 `AbuilderViewHandle`。
 | `createView` / `createAction` | 视图 DSL 扩展点（`src/core`） |
 
 ## 样式

package/src/index.ts

@@ -12,28 +12,38 @@ export {
 export type {
   AbuilderEventName,
   AbuilderEventPayloadMap,
+  AddEventSubscriptionOptions,
   WorkspaceAddEventPayload,
   WorkspaceSyncEventPayload,
   WorkspaceDeleteEventPayload,
+  BlueprintLibraryChangedEventPayload,
   ApiCollectionUploadStartEventPayload,
   ApiCollectionUploadSuccessEventPayload,
+  ApiCollectionChangedEventPayload,
   WorkspaceData,
 } from "./panel/library/event-subscription";
 export type { WorkspaceProjectRecord } from "./panel/library/workspace-project-db";
 export {
   listWorkspaceProjects,
   getWorkspaceProject,
+  putWorkspaceProject,
+  upsertWorkspaceProject,
   deleteWorkspaceProject,
   clearWorkspaceProjects,
 } from "./panel/library/workspace-storage";
-export type { WorkspaceProjectListItem } from "./panel/library/workspace-storage";
+export type {
+  WorkspaceProjectListItem,
+  PutWorkspaceProjectOptions,
+} from "./panel/library/workspace-storage";
 export {
   listBlueprintLibrary,
   getBlueprintLibraryRecord,
+  putBlueprintLibraryRecord,
   deleteBlueprintLibraryRecord,
   clearBlueprintLibrary,
   listExecutionRunRecords,
   getExecutionRunRecord,
+  putExecutionRunRecord,
   deleteExecutionRunRecord,
   clearAllExecutionRunRecords,
   purgeExecutionRunsOlderThan,
@@ -41,6 +51,8 @@ export {
   readExecutionLogSettings,
   writeExecutionLogSettings,
   listApiCollectionRecords,
+  putApiCollection,
+  upsertApiCollectionFromJson,
   deleteApiCollection,
   clearApiCollections,
   clearAbuilderStorage,
@@ -52,6 +64,16 @@ export type {
   ExecutionRunRecord,
   ExecutionLogSettings,
   ApiCollectionRecord,
+  UpsertApiCollectionInput,
+  UpsertApiCollectionResult,
 } from "./panel/library/abuilder-storage";
+export {
+  getCurrentWorkspace,
+  openWorkspace,
+  createWorkspace,
+  saveWorkspace,
+  syncWorkspace,
+} from "./panel/library/abuilder-view-handle";
+export type { AbuilderViewHandle } from "./panel/library/abuilder-view-handle";
 export { getPreviewSnapshot } from "./panel/library/preview-snapshot";
 export type { GetPreviewSnapshotOptions } from "./panel/library/preview-snapshot";

package/src/panel/ReactViewPanel.tsx

@@ -1,4 +1,16 @@
-import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import React, {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import {
+  registerAbuilderViewHandle,
+  type AbuilderViewHandle,
+} from "./library/abuilder-view-handle";
 import { useI18n } from "@arronqzy/i18n/react";
 import { relocalizeMessage, type Locale } from "@arronqzy/i18n";
 import type { State } from "@arronqzy/rx-store";
@@ -99,13 +111,16 @@ import { PANEL_Z_INDEX } from "./constants/zIndex";
 import { useRafThrottledScroll } from "./hooks/useRafThrottledScroll";
 import {
   IconBackward,
+  IconBlueprint,
   IconBringFront,
   IconClose,
   IconForward,
   IconImage,
   IconLayers,
+  IconMoon,
   IconRedo,
   IconSendBack,
+  IconSun,
   IconUndo,
 } from "./icons";
 import {
@@ -126,7 +141,6 @@ import {
   ResizableHandle,
   ResizablePanel,
   ResizablePanelGroup,
-  Switch,
   Toaster,
   Tooltip,
   TooltipContent,
@@ -141,6 +155,11 @@ export type ReactViewPanelProps = {
   className?: string;
   /** 外部传入的完整工作区数据，挂载后按这份数据完整渲染；空则显示空白，不自动打开 IndexedDB 记录 */
   initialWorkspace?: WorkspaceProjectRecord | null;
+  /**
+   * 按 IndexedDB id 打开工作区（不 remount）。
+   * 与 `initialWorkspace` 同时存在时：首次优先完整记录；之后 id 变化从 IndexedDB 打开。
+   */
+  workspaceId?: string | null;
   /** 界面语言；省略时按 localStorage / 浏览器语言解析 */
   locale?: Locale | null;
   onLocaleChange?: (locale: Locale) => void;
@@ -156,14 +175,18 @@ export type ReactViewPanelProps = {
   packageVersion?: string | null;
 };
 
-function ReactViewPanelInner({
+const ReactViewPanelInner = forwardRef<AbuilderViewHandle, ReactViewPanelProps>(function ReactViewPanelInner(
+  {
   initialZoom = 1,
   className,
   initialWorkspace = null,
+  workspaceId = null,
   nameSpace = null,
   packageName = null,
   packageVersion = null,
-}: ReactViewPanelProps) {
+}: ReactViewPanelProps,
+  ref
+) {
   const { t, locale, setLocale } = useI18n();
   const messages = useMemo(() => getPanelMessages(t), [t]);
   const THEME_STORAGE_KEY = appStorageKey("panel:theme", nameSpace);
@@ -1076,9 +1099,26 @@ function ReactViewPanelInner({
     panelRevision: `${historyCursor}|${allElements.length}`,
     onProjectApplied: handleWorkspaceProjectApplied,
     initialWorkspace,
+    workspaceId,
     nameSpace,
   });
 
+  const viewHandle = useMemo<AbuilderViewHandle>(
+    () => ({
+      getNameSpace: () => nameSpace ?? null,
+      getCurrentWorkspace: () => workspaceProjects.getCurrentWorkspaceRecord(),
+      openWorkspace: (idOrRecord) => workspaceProjects.handleOpenProject(idOrRecord),
+      createWorkspace: () => workspaceProjects.handleCreateProject(),
+      saveWorkspace: () => workspaceProjects.handleSaveProject(),
+      syncWorkspace: () => workspaceProjects.handleSyncProject(),
+    }),
+    [nameSpace, workspaceProjects]
+  );
+
+  useImperativeHandle(ref, () => viewHandle, [viewHandle]);
+
+  useEffect(() => registerAbuilderViewHandle(viewHandle), [viewHandle]);
+
   useEffect(() => {
     registerPreviewSnapshotProvider(async () => {
       return captureEditorPreviewSnapshot({
@@ -1869,13 +1909,37 @@ function ReactViewPanelInner({
         </Tooltip>
       </TooltipProvider>
       <style>{`
-        .panel-font-root :is(span, label, p, strong, button, input, textarea, select, option, a, li) {
+        /* 功能说明视觉层次：主标签醒目、辅助说明更轻（类苹果） */
+        .panel-font-root {
+          font-size: var(--panel-font-px);
+          font-weight: 400;
+          letter-spacing: -0.011em;
+        }
+        .panel-font-root [data-typo="title"] {
+          font-size: calc(var(--panel-font-px) * 1.08) !important;
+          font-weight: 600 !important;
+          letter-spacing: -0.022em;
+        }
+        .panel-font-root [data-typo="label"] {
           font-size: var(--panel-font-px) !important;
+          font-weight: 510 !important;
+          letter-spacing: -0.015em;
+        }
+        .panel-font-root [data-typo="caption"] {
+          font-size: calc(var(--panel-font-px) * 0.85) !important;
+          font-weight: 400 !important;
+          letter-spacing: -0.008em;
+        }
+        .panel-font-root [data-typo="micro"] {
+          font-size: calc(var(--panel-font-px) * 0.77) !important;
+          font-weight: 400 !important;
         }
         /* 画布节点、富文本内容使用各自的字号，不被编辑器 UI 字号强制覆盖 */
         .panel-font-root [data-workspace-region="view"] :is(span, label, p, strong, button, input, textarea, select, option, a, li),
         .panel-font-root [data-panel-user-text] :is(span, label, p, strong, button, input, textarea, select, option, a, li) {
           font-size: inherit !important;
+          font-weight: inherit !important;
+          letter-spacing: inherit !important;
         }
         .panel-font-root :is(input, textarea):focus,
         .panel-font-root :is(input, textarea):focus-visible {
@@ -1909,7 +1973,7 @@ function ReactViewPanelInner({
           box-shadow: 0 0 0 1px hsl(var(--primary) / 0.45) inset !important;
         }
       `}</style>
-      <nav className="panel-font-root relative z-30 flex items-center gap-2 border-b border-border bg-background/95 px-2 text-foreground">
+      <nav className="panel-font-root relative z-30 flex h-10 shrink-0 items-center gap-2.5 border-b border-border/70 bg-background/80 px-3 text-foreground backdrop-blur-md supports-[backdrop-filter]:bg-background/70">
         <PanelMenubar
           t={t}
           handleExport={handleExport}
@@ -1963,8 +2027,8 @@ function ReactViewPanelInner({
         </Button>
       </nav>
       <ResizablePanelGroup direction="horizontal" className="min-h-0 w-full flex-1">
-        <ResizablePanel defaultSize={15} minSize={15}>
-          <div className="panel-font-root h-full">
+        <ResizablePanel defaultSize={16} minSize={12} maxSize={28}>
+          <div className="panel-font-root h-full min-w-0">
             <MaterialSidebar
               layers={layers}
               allElements={allElements}
@@ -2035,8 +2099,8 @@ function ReactViewPanelInner({
             />
           </div>
         </ResizablePanel>
-        <ResizableHandle withHandle />
-        <ResizablePanel defaultSize={65} minSize={10}>
+        <ResizableHandle withHandle className="opacity-70 transition-opacity hover:opacity-100" />
+        <ResizablePanel defaultSize={68} minSize={40}>
           {/* Center workspace */}
           <div
             className="panel-font-root min-w-0 h-full"
@@ -2054,18 +2118,18 @@ function ReactViewPanelInner({
               clearSelection();
             }}
           >
-            <div className="relative flex h-full flex-col overflow-hidden border border-border bg-background">
+            <div className="relative flex h-full flex-col overflow-hidden bg-background">
               <div
-                className="relative flex items-center gap-2 border-b border-border bg-background/90 px-3 py-1.5 text-foreground"
+                className="relative flex items-center gap-2 border-b border-border/60 bg-muted/15 px-3 py-1.5 text-foreground"
                 style={{ zIndex: PANEL_Z_INDEX.toolbar }}
               >
                 <Input
                   value={displayProductName}
                   onChange={(e) => setProductName(e.target.value)}
                   placeholder={t("panel.menubar.productNamePlaceholder")}
-                  className="h-7 w-[220px] text-xs focus-visible:ring-0 focus-visible:ring-offset-0 focus-visible:outline-none"
+                  className="h-7 w-[200px] rounded-md border-border/70 bg-background/80 text-xs shadow-none focus-visible:ring-0 focus-visible:ring-offset-0 focus-visible:outline-none"
                 />
-                <span className="text-[11px] text-muted-foreground">{t("panel.menubar.productName")}</span>
+                <span className="hidden text-[11px] text-muted-foreground sm:inline">{t("panel.menubar.productName")}</span>
                 <TooltipProvider delayDuration={150}>
                   <Tooltip>
                     <TooltipTrigger asChild>
@@ -2200,60 +2264,45 @@ function ReactViewPanelInner({
                   </DropdownMenuContent>
                 </DropdownMenu>
                 <div className="flex-1" />
-                <div
-                  data-blueprint-toggle
-                  className="flex shrink-0 items-center gap-2 rounded-md border border-border bg-muted/30 px-2 py-1"
-                >
-                  <span className="text-[11px] text-muted-foreground">{t("panel.menubar.blueprint")}</span>
-                  <Switch
-                    checked={blueprintOpen}
-                    onCheckedChange={setBlueprintOpen}
-                    aria-label={t("panel.menubar.showBlueprintPanel")}
-                  />
-                </div>
                 <TooltipProvider delayDuration={150}>
-                  <Tooltip>
-                    <TooltipTrigger asChild>
-                      <div className="relative">
-                        <Switch
-                          checked={isDark}
-                          onCheckedChange={applyTheme}
-                          aria-label={t("panel.menubar.toggleTheme")}
-                          className="data-[state=checked]:bg-primary/80 data-[state=unchecked]:bg-secondary"
-                        />
-                        <div
+                  <div className="inline-flex items-center gap-1">
+                    <Tooltip>
+                      <TooltipTrigger asChild>
+                        <button
+                          type="button"
+                          data-blueprint-toggle
+                          onClick={() => setBlueprintOpen((v) => !v)}
+                          aria-label={t("panel.menubar.showBlueprintPanel")}
+                          aria-pressed={blueprintOpen}
                           className={[
-                            "pointer-events-none absolute left-0.5 top-0.5 flex h-5 w-5 items-center justify-center transition-transform duration-200",
-                            isDark ? "translate-x-5" : "translate-x-0",
+                            "inline-flex h-7 w-7 items-center justify-center rounded-md border transition-colors",
+                            blueprintOpen
+                              ? "border-primary/50 bg-primary/15 text-primary"
+                              : "border-border/70 bg-background/80 text-muted-foreground hover:bg-accent hover:text-accent-foreground",
                           ].join(" ")}
                         >
-                          {isDark ? (
-                            <svg
-                              viewBox="0 0 24 24"
-                              className="h-3 w-3 text-foreground"
-                              fill="none"
-                              stroke="currentColor"
-                              strokeWidth="1.8"
-                            >
-                              <path d="M21 12.79A9 9 0 1 1 11.21 3c0 .66.08 1.3.22 1.92A7 7 0 0 0 19.08 12c.62.14 1.26.22 1.92.22Z" />
-                            </svg>
-                          ) : (
-                            <svg
-                              viewBox="0 0 24 24"
-                              className="h-3 w-3 text-foreground"
-                              fill="none"
-                              stroke="currentColor"
-                              strokeWidth="1.8"
-                            >
-                              <circle cx="12" cy="12" r="4" />
-                              <path d="M12 2v2.5M12 19.5V22M4.93 4.93l1.77 1.77M17.3 17.3l1.77 1.77M2 12h2.5M19.5 12H22M4.93 19.07 6.7 17.3M17.3 6.7l1.77-1.77" />
-                            </svg>
-                          )}
-                        </div>
-                      </div>
-                    </TooltipTrigger>
-                    <TooltipContent className="z-[10000]">{t("panel.menubar.toggleThemeHint")}</TooltipContent>
-                  </Tooltip>
+                          <IconBlueprint active={blueprintOpen} />
+                        </button>
+                      </TooltipTrigger>
+                      <TooltipContent className="z-[10000]">
+                        {t("panel.menubar.showBlueprintPanel")}
+                      </TooltipContent>
+                    </Tooltip>
+                    <Tooltip>
+                      <TooltipTrigger asChild>
+                        <button
+                          type="button"
+                          onClick={() => applyTheme(!isDark)}
+                          aria-label={t("panel.menubar.toggleTheme")}
+                          aria-pressed={isDark}
+                          className="inline-flex h-7 w-7 items-center justify-center rounded-md border border-border/70 bg-background/80 text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground"
+                        >
+                          {isDark ? <IconMoon /> : <IconSun />}
+                        </button>
+                      </TooltipTrigger>
+                      <TooltipContent className="z-[10000]">{t("panel.menubar.toggleThemeHint")}</TooltipContent>
+                    </Tooltip>
+                  </div>
                   <Tooltip>
                     <TooltipTrigger asChild>
                       <button
@@ -2266,13 +2315,11 @@ function ReactViewPanelInner({
                     </TooltipTrigger>
                     <TooltipContent className="z-[10000]">{t("panel.menubar.zoomOutCanvas")}</TooltipContent>
                   </Tooltip>
-                </TooltipProvider>
-                <span className="w-20 text-center text-xs">
-                  {zoom.x === zoom.y
-                    ? `${(zoom.x * 100).toFixed(0)}%`
-                    : `${(zoom.x * 100).toFixed(0)}%×${(zoom.y * 100).toFixed(0)}%`}
-                </span>
-                <TooltipProvider delayDuration={150}>
+                  <span className="w-20 text-center text-xs">
+                    {zoom.x === zoom.y
+                      ? `${(zoom.x * 100).toFixed(0)}%`
+                      : `${(zoom.x * 100).toFixed(0)}%×${(zoom.y * 100).toFixed(0)}%`}
+                  </span>
                   <Tooltip>
                     <TooltipTrigger asChild>
                       <button
@@ -2704,9 +2751,9 @@ function ReactViewPanelInner({
             </div>
           </div>
         </ResizablePanel>
-        <ResizableHandle withHandle />
-        <ResizablePanel defaultSize={20} minSize={20}>
-          <div className="panel-font-root h-full">
+        <ResizableHandle withHandle className="opacity-70 transition-opacity hover:opacity-100" />
+        <ResizablePanel defaultSize={20} minSize={16} maxSize={32}>
+          <div className="panel-font-root h-full min-w-0">
             <WorkspaceConfigSidebar
               configFocus={sidebarConfigFocus}
               executionLog={executionLogView}
@@ -2798,10 +2845,16 @@ function ReactViewPanelInner({
         open={apiCollectionManagerOpen}
         onOpenChange={setApiCollectionManagerOpen}
         onUploadStart={(info) => {
-          emitAbuilderEvent(AbuilderEvents.apiCollectionUploadStart, info);
+          emitAbuilderEvent(AbuilderEvents.apiCollectionUploadStart, {
+            ...info,
+            nameSpace: nameSpace ?? null,
+          });
         }}
         onUploadSuccess={(info) => {
-          emitAbuilderEvent(AbuilderEvents.apiCollectionUploadSuccess, info);
+          emitAbuilderEvent(AbuilderEvents.apiCollectionUploadSuccess, {
+            ...info,
+            nameSpace: nameSpace ?? null,
+          });
         }}
         onSyncCollection={(record) => {
           const patches = buildApiCollectionSyncPatches({
@@ -2846,17 +2899,14 @@ function ReactViewPanelInner({
       <Toaster />
     </div>
   );
-}
-
-export function ReactViewPanel({
-  locale,
-  onLocaleChange,
-  nameSpace,
-  ...rest
-}: ReactViewPanelProps) {
-  return (
-    <I18nRoot locale={locale} onLocaleChange={onLocaleChange} nameSpace={nameSpace}>
-      <ReactViewPanelInner nameSpace={nameSpace} {...rest} />
-    </I18nRoot>
-  );
-}
+});
+
+export const ReactViewPanel = forwardRef<AbuilderViewHandle, ReactViewPanelProps>(
+  function ReactViewPanel({ locale, onLocaleChange, nameSpace, ...rest }, ref) {
+    return (
+      <I18nRoot locale={locale} onLocaleChange={onLocaleChange} nameSpace={nameSpace}>
+        <ReactViewPanelInner ref={ref} nameSpace={nameSpace} {...rest} />
+      </I18nRoot>
+    );
+  }
+);

package/src/panel/components/ElementsLayer.tsx

@@ -957,7 +957,7 @@ const PanelElementNode = React.memo(function PanelElementNode({
       className={[
         "absolute select-none",
         previewMode ? "" : "rv-selectable",
-        !previewMode && isSelected ? "ring-2 ring-blue-500/90 ring-offset-0" : "",
+        !previewMode && isSelected ? "rv-node-selected" : "",
         hasViewEvent ? "cursor-pointer" : "",
       ].join(" ")}
       data-element-id={el.id}