@arronqzy/vue-view 0.1.6 → 0.1.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arronqzy/vue-view",
-  "version": "0.1.6",
+  "version": "0.1.8",
   "description": "Vue 3 visual view editor for Abuilder (Ant Design Vue)",
   "license": "MIT",
   "type": "module",
@@ -23,12 +23,13 @@
     "selecto": "^1.26.3",
     "uuid": "^13.0.0",
     "vue": "^3.5.13",
-    "@arronqzy/blueprint-dsl": "1.0.6",
-    "@arronqzy/rx-store": "1.0.4",
-    "@arronqzy/vue-blueprint": "0.1.4",
-    "@arronqzy/view-table": "0.1.3",
-    "@arronqzy/vue-rx-store": "0.1.2",
-    "@arronqzy/i18n": "0.1.5"
+    "@arronqzy/blueprint-dsl": "1.0.8",
+    "@arronqzy/rx-store": "1.0.5",
+    "@arronqzy/i18n": "0.1.7",
+    "@arronqzy/view-scene3d": "0.1.2",
+    "@arronqzy/view-table": "0.1.5",
+    "@arronqzy/vue-blueprint": "0.1.6",
+    "@arronqzy/vue-rx-store": "0.1.3"
   },
   "peerDependencies": {
     "vue": "^3.4.0"

package/src/panel/VueViewOnlinePreview.vue

@@ -8,8 +8,11 @@ import {
   listBlueprintLibrary,
   useBlueprintPageLifecycle,
   type BlueprintLibraryListItem,
+  resolveRunnableNodeType,
+  resolveViewElementIds,
 } from "@arronqzy/vue-blueprint";
 import type { LibraryBlueprintResolver, PageLifecyclePhase } from "@arronqzy/blueprint-dsl";
+import { collectArmedViewEventBindings, EVENT_NODE_TYPE, LIFECYCLE_NODE_TYPE } from "@arronqzy/blueprint-dsl";
 import type { State } from "@arronqzy/rx-store";
 import ElementsLayer from "./components/ElementsLayer.vue";
 import {
@@ -204,7 +207,7 @@ const lifecycleReady = computed(
   () => Boolean(panelState.value && layerElements.value.length > 0 && layoutReady.value)
 );
 
-const { triggerBlueprintNode } = useBlueprintPageLifecycle({
+const { triggerBlueprintNode, emitViewEvent, firedLifecyclePhases } = useBlueprintPageLifecycle({
   graph: blueprintGraph,
   active: ref(true),
   enabled: lifecycleReady,
@@ -220,6 +223,22 @@ const { triggerBlueprintNode } = useBlueprintPageLifecycle({
   onViewScopeUpdate: handleViewScopeUpdate,
 });
 
+const boundViewEventTypes = computed(() =>
+  collectArmedViewEventBindings(
+    blueprintGraph.value.document.nodes.map((node) => ({
+      id: node.id,
+      nodeType: resolveRunnableNodeType(node),
+      lifecyclePhase: node.lifecyclePhase,
+      viewElementIds: resolveViewElementIds(node),
+      eventConfig: node.eventConfig,
+    })),
+    blueprintGraph.value.document.edges,
+    EVENT_NODE_TYPE,
+    LIFECYCLE_NODE_TYPE,
+    firedLifecyclePhases.value
+  )
+);
+
 onMounted(() => {
   const onResize = () => applySceneFit();
   window.addEventListener("resize", onResize);
@@ -240,8 +259,9 @@ function noopSelect() {}
 
   <div
     v-else-if="!panelState"
-    class="flex min-h-screen w-full items-center justify-center bg-white text-sm text-gray-600"
+    class="flex min-h-screen w-full flex-col items-center justify-center gap-3 bg-white text-sm text-gray-600"
   >
+    <div class="h-9 w-9 animate-spin rounded-full border-2 border-gray-300 border-t-gray-700" />
     {{ t("panel.workspace.previewLoading") }}
   </div>
 
@@ -286,6 +306,12 @@ function noopSelect() {}
               void triggerBlueprintNode(payload.blueprintNodeId, payload);
             }
           "
+          :bound-view-event-types="boundViewEventTypes"
+          :on-view-ui-event="
+            (payload) => {
+              void emitViewEvent(payload);
+            }
+          "
           @select-ids="noopSelect"
         />
       </div>

package/src/panel/VueViewPanel.vue

@@ -24,8 +24,10 @@ import {
   type BlueprintGraphNode,
   type BlueprintLibraryListItem,
   type BlueprintMetaDraft,
+  resolveRunnableNodeType,
+  resolveViewElementIds,
 } from "@arronqzy/vue-blueprint";
-import type { LibraryBlueprintResolver } from "@arronqzy/blueprint-dsl";
+import { collectArmedViewEventBindings, EVENT_NODE_TYPE, LIFECYCLE_NODE_TYPE, type LibraryBlueprintResolver } from "@arronqzy/blueprint-dsl";
 import {
   Button,
   Checkbox,
@@ -65,6 +67,8 @@ import {
 import { useRafThrottledScroll } from "./hooks/useRafThrottledScroll";
 import { useI18n } from "@arronqzy/i18n/vue";
 import { getPanelMessages } from "./constants/messages";
+import BusyOverlay from "./components/BusyOverlay.vue";
+import { assertFileSize, parseJsonText, runBusyTask } from "./utils/async-work";
 import "../tailwind.css";
 
 const { t, locale, setLocale } = useI18n();
@@ -400,7 +404,7 @@ const workspaceProjects = useWorkspaceProjects({
   onProjectApplied: handleWorkspaceProjectApplied,
 });
 
-const { triggerBlueprintNode } = useBlueprintPageLifecycle({
+const { triggerBlueprintNode, emitViewEvent, firedLifecyclePhases } = useBlueprintPageLifecycle({
   graph: blueprintGraph,
   active: blueprintOpen,
   bootKey: computed(() => workspaceProjects.activeProjectId.value ?? undefined),
@@ -412,6 +416,22 @@ const { triggerBlueprintNode } = useBlueprintPageLifecycle({
   onViewScopeUpdate: handleViewScopeUpdate,
 });
 
+const boundViewEventTypes = computed(() =>
+  collectArmedViewEventBindings(
+    blueprintGraph.value.document.nodes.map((node) => ({
+      id: node.id,
+      nodeType: resolveRunnableNodeType(node),
+      lifecyclePhase: node.lifecyclePhase,
+      viewElementIds: resolveViewElementIds(node),
+      eventConfig: node.eventConfig,
+    })),
+    blueprintGraph.value.document.edges,
+    EVENT_NODE_TYPE,
+    LIFECYCLE_NODE_TYPE,
+    firedLifecyclePhases.value
+  )
+);
+
 const blueprintNodeOptions = computed(() =>
   blueprintGraph.value.document.nodes.map((node) => ({
     id: node.id,
@@ -419,19 +439,21 @@ const blueprintNodeOptions = computed(() =>
   }))
 );
 async function loadBlueprintFromLibrary(id: string) {
-  const record = await getBlueprintLibraryRecord(id);
-  if (!record) {
-    message.error(panelMessages().blueprintNotFound);
-    void refreshBlueprintLibrary();
-    return;
-  }
-  blueprintGraph.value = BlueprintGraph.fromDocument(record.document);
-  blueprintMeta.value = { name: record.name, remark: record.remark ?? "" };
-  activeBlueprintLibraryId.value = record.id;
-  blueprintSyncedDocument.value = record.document;
-  selectedBlueprintNodeId.value = null;
-  configFocus.value = "blueprint";
-  blueprintOpen.value = true;
+  await runBusyTask(t("common.loadingBlueprint"), async () => {
+    const record = await getBlueprintLibraryRecord(id);
+    if (!record) {
+      message.error(panelMessages().blueprintNotFound);
+      void refreshBlueprintLibrary();
+      return;
+    }
+    blueprintGraph.value = BlueprintGraph.fromDocument(record.document);
+    blueprintMeta.value = { name: record.name, remark: record.remark ?? "" };
+    activeBlueprintLibraryId.value = record.id;
+    blueprintSyncedDocument.value = record.document;
+    selectedBlueprintNodeId.value = null;
+    configFocus.value = "blueprint";
+    blueprintOpen.value = true;
+  });
 }
 
 function snapshotWorkspaceBlueprint() {
@@ -462,74 +484,97 @@ async function handleSelectBlueprintLibraryItem(id: string) {
 }
 
 async function syncBlueprintToLibrary() {
-  if (!activeBlueprintLibraryId.value) return;
-  const record = await getBlueprintLibraryRecord(activeBlueprintLibraryId.value);
-  if (!record) return;
-  await putBlueprintLibraryRecord({
-    ...record,
-    document: blueprintGraph.value.document,
-    name: blueprintMeta.value.name,
-    remark: blueprintMeta.value.remark,
+  const libraryId = activeBlueprintLibraryId.value;
+  if (!libraryId) return;
+  await runBusyTask(t("common.syncingBlueprint"), async () => {
+    const record = await getBlueprintLibraryRecord(libraryId);
+    if (!record) return;
+    await putBlueprintLibraryRecord({
+      ...record,
+      document: blueprintGraph.value.document,
+      name: blueprintMeta.value.name,
+      remark: blueprintMeta.value.remark,
+    });
+    blueprintSyncedDocument.value = blueprintGraph.value.document;
+    message.success(panelMessages().blueprintSyncedToLibrary);
+    await refreshBlueprintLibrary();
   });
-  blueprintSyncedDocument.value = blueprintGraph.value.document;
-  message.success(panelMessages().blueprintSyncedToLibrary);
-  await refreshBlueprintLibrary();
 }
 
 async function saveBlueprintToLibrary(meta: BlueprintMetaDraft) {
-  const id = activeBlueprintLibraryId.value ?? createLibraryBlueprintId();
-  const record = buildLibraryRecord({
-    id,
-    document: blueprintGraph.value.document,
-    meta,
-    source: "saved",
+  await runBusyTask(t("common.savingBlueprint"), async () => {
+    const id = activeBlueprintLibraryId.value ?? createLibraryBlueprintId();
+    const record = buildLibraryRecord({
+      id,
+      document: blueprintGraph.value.document,
+      meta,
+      source: "saved",
+    });
+    await putBlueprintLibraryRecord(record);
+    activeBlueprintLibraryId.value = id;
+    blueprintSyncedDocument.value = blueprintGraph.value.document;
+    blueprintMeta.value = meta;
+    await refreshBlueprintLibrary();
+    message.success(panelMessages().blueprintSavedToLibrary);
   });
-  await putBlueprintLibraryRecord(record);
-  activeBlueprintLibraryId.value = id;
-  blueprintSyncedDocument.value = blueprintGraph.value.document;
-  blueprintMeta.value = meta;
-  await refreshBlueprintLibrary();
-  message.success(panelMessages().blueprintSavedToLibrary);
 }
 
 function handleExport() {
-  const data = exportPanelData();
-  const blob = new Blob([JSON.stringify(data, null, 2)], { type: "application/json" });
-  const url = URL.createObjectURL(blob);
-  const a = document.createElement("a");
-  a.href = url;
-  const safeName = (productName.value.trim() || "panel")
-    .replace(/[\\/:*?"<>|]/g, "-")
-    .replace(/\s+/g, "-");
-  a.download = `${safeName}-${Date.now()}.json`;
-  a.click();
-  URL.revokeObjectURL(url);
+  void runBusyTask(t("common.exportingPanel"), async () => {
+    const data = exportPanelData();
+    const blob = new Blob([JSON.stringify(data, null, 2)], { type: "application/json" });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    const safeName = (productName.value.trim() || "panel")
+      .replace(/[\\/:*?"<>|]/g, "-")
+      .replace(/\s+/g, "-");
+    a.download = `${safeName}-${Date.now()}.json`;
+    a.click();
+    URL.revokeObjectURL(url);
+  });
 }
 
 async function handleImportFile(file: File) {
-  const text = await file.text();
-  const parsed = JSON.parse(text) as State;
-  const ok = importPanelData(parsed);
-  if (!ok) window.alert(panelMessages().importInvalidFormat);
-  else selectedIds.value = [];
+  try {
+    await runBusyTask(t("common.importingPanel"), async () => {
+      assertFileSize(file, "json");
+      const text = await file.text();
+      const parsed = await parseJsonText<State>(text);
+      const ok = importPanelData(parsed);
+      if (!ok) window.alert(panelMessages().importInvalidFormat);
+      else selectedIds.value = [];
+    });
+  } catch (error) {
+    message.error(error instanceof Error ? error.message : panelMessages().importInvalidFormat);
+  }
 }
 
 function openBlueprintExport() {
-  downloadBlueprintExport(
-    buildBlueprintExportPayload(blueprintGraph.value.document, blueprintMeta.value)
-  );
-  message.success(panelMessages().blueprintExported);
+  void runBusyTask(t("common.exportingPanel"), async () => {
+    downloadBlueprintExport(
+      buildBlueprintExportPayload(blueprintGraph.value.document, blueprintMeta.value)
+    );
+    message.success(panelMessages().blueprintExported);
+  });
 }
 
 async function handleBlueprintImportFile(file: File) {
-  const text = await file.text();
-  const payload = parseBlueprintImportFile(JSON.parse(text) as unknown);
-  const record = libraryRecordFromImport(payload);
-  await putBlueprintLibraryRecord(record);
-  await refreshBlueprintLibrary();
-  if (!activeBlueprintLibraryId.value) snapshotWorkspaceBlueprint();
-  await loadBlueprintFromLibrary(record.id);
-  message.success(panelMessages().blueprintImported);
+  try {
+    await runBusyTask(t("common.importingBlueprint"), async () => {
+      assertFileSize(file, "json");
+      const text = await file.text();
+      const payload = parseBlueprintImportFile(await parseJsonText(text));
+      const record = libraryRecordFromImport(payload);
+      await putBlueprintLibraryRecord(record);
+      await refreshBlueprintLibrary();
+      if (!activeBlueprintLibraryId.value) snapshotWorkspaceBlueprint();
+      await loadBlueprintFromLibrary(record.id);
+      message.success(panelMessages().blueprintImported);
+    });
+  } catch (error) {
+    message.error(error instanceof Error ? error.message : panelMessages().importInvalidFormat);
+  }
 }
 
 async function handleWorkspaceCreateProject() {
@@ -539,6 +584,7 @@ async function handleWorkspaceCreateProject() {
 
 async function handleWorkspaceOpenProject(id: string) {
   try {
+    stopAllClockSchedules();
     clearViewElementScopes();
     await workspaceProjects.handleOpenProject(id);
     selectedIds.value = [];
@@ -662,6 +708,7 @@ onUnmounted(() => window.removeEventListener("keydown", onKeyDown));
         :active-project-id="workspaceProjects.activeProjectId.value"
         :active-project-name="workspaceProjects.activeProjectName.value"
         :dirty="workspaceProjects.dirty.value"
+        :previewing-project-ids="workspaceProjects.previewingProjectIds.value"
         @create-project="handleWorkspaceCreateProject"
         @open-project="handleWorkspaceOpenProject"
         @sync-project="handleWorkspaceSyncProject"
@@ -763,6 +810,12 @@ onUnmounted(() => window.removeEventListener("keydown", onKeyDown));
                     void triggerBlueprintNode(payload.blueprintNodeId, payload);
                   }
                 "
+                :bound-view-event-types="boundViewEventTypes"
+                :on-view-ui-event="
+                  (payload) => {
+                    void emitViewEvent(payload);
+                  }
+                "
                 @select-ids="selectIds"
               />
               <SelectLayer
@@ -876,6 +929,7 @@ onUnmounted(() => window.removeEventListener("keydown", onKeyDown));
       </Layout.Sider>
     </Layout>
 
+    <BusyOverlay />
     <input ref="importInputRef" type="file" accept="application/json" class="hidden" @change="async (e) => { const f = (e.target as HTMLInputElement).files?.[0]; (e.target as HTMLInputElement).value = ''; if (f) await handleImportFile(f); }" />
     <input ref="blueprintImportInputRef" type="file" accept="application/json" class="hidden" @change="async (e) => { const f = (e.target as HTMLInputElement).files?.[0]; (e.target as HTMLInputElement).value = ''; if (f) await handleBlueprintImportFile(f); }" />
 

package/src/panel/components/BusyOverlay.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { useI18n } from "@arronqzy/i18n/vue";
+import { busyOverlayMessage } from "../utils/async-work";
+
+const { t } = useI18n();
+</script>
+
+<template>
+  <Teleport to="body">
+    <div
+      v-if="busyOverlayMessage"
+      class="fixed inset-0 flex flex-col items-center justify-center gap-3 bg-black/45 px-6"
+      style="z-index: 40000"
+      role="status"
+      aria-live="polite"
+      aria-busy="true"
+    >
+      <div class="h-9 w-9 animate-spin rounded-full border-2 border-white/30 border-t-white" />
+      <div class="max-w-sm text-center text-sm text-white">
+        {{ busyOverlayMessage || t("common.loading") }}
+      </div>
+    </div>
+  </Teleport>
+</template>

package/src/panel/components/ConfigHintIcon.vue

@@ -1,16 +1,16 @@
 <script setup lang="ts">
+import { computed } from "vue";
 import { useI18n } from "@arronqzy/i18n/vue";
 import { Tooltip } from "ant-design-vue";
 
-const { t, locale } = useI18n();
-withDefaults(
-  defineProps<{
-    label?: string;
-    contentClass?: string;
-    buttonClass?: string;
-  }>(),
-  { label: t("common.hint") }
-);
+const { t } = useI18n();
+const props = defineProps<{
+  label?: string;
+  contentClass?: string;
+  buttonClass?: string;
+}>();
+
+const resolvedLabel = computed(() => props.label || t("common.hint"));
 </script>
 
 <template>
@@ -28,7 +28,7 @@ withDefaults(
         buttonClass ??
         'inline-flex h-4 w-4 shrink-0 items-center justify-center rounded-full border border-border text-[10px] leading-none text-muted-foreground hover:bg-accent/50'
       "
-      :aria-label="t('common.hintAria', { label })"
+      :aria-label="t('common.hintAria', { label: resolvedLabel })"
     >
       ?
     </button>

package/src/panel/components/ElementsLayer.vue

@@ -15,7 +15,17 @@ import {
   VideoNodeContent,
 } from "./elementsLayerNodes";
 import TableNodeContent from "./table/TableNodeContent.vue";
+import Scene3dNodeContent from "@arronqzy/view-scene3d/vue";
+import { mergeScene3dConfig } from "@arronqzy/view-scene3d";
 import type { TableCellActionHandler } from "./table/TableNodeContent.vue";
+import { comparePanelElementsPaintOrder } from "../utils/gridPlacement";
+import {
+  createViewEventSignal,
+  snapshotDomEvent,
+  snapshotViewEventNode,
+  type ViewEventSignal,
+  type ViewEventType,
+} from "@arronqzy/blueprint-dsl";
 
 const props = withDefaults(
   defineProps<{
@@ -31,6 +41,8 @@ const props = withDefaults(
     previewMode?: boolean;
     previewLayoutKey?: number;
     onTableCellAction?: TableCellActionHandler;
+    boundViewEventTypes?: ReadonlyMap<string, ReadonlySet<ViewEventType>>;
+    onViewUiEvent?: (payload: ViewEventSignal) => void;
   }>(),
   { layerLocked: false, previewMode: false }
 );
@@ -104,6 +116,17 @@ const NodeContent = defineComponent({
       if (el.materialType === "geometry") {
         return h(GeometryNodeContent, { element: el });
       }
+      if (el.materialType === "scene3d") {
+        return h(Scene3dNodeContent, {
+          config: el.scene3d,
+          previewMode: p.previewMode,
+          selected: p.selected,
+          onUpdateConfig: (patch) =>
+            p.updateElement(el.id, {
+              scene3d: mergeScene3dConfig({ ...el.scene3d, ...patch }),
+            }),
+        });
+      }
       if (el.materialType === "image") {
         return h(ImageNodeContent, { element: el });
       }
@@ -119,14 +142,11 @@ const NodeContent = defineComponent({
   },
 });
 
-const sortedElements = computed(() =>
-  [...props.elements].sort((a, b) => {
-    const za = a.zIndex ?? 1;
-    const zb = b.zIndex ?? 1;
-    if (za !== zb) return za - zb;
-    return a.id.localeCompare(b.id);
-  })
-);
+const sortedElements = computed(() => {
+  const byId = new Map<string, PanelElement>();
+  for (const el of props.allElements) byId.set(el.id, el);
+  return [...props.elements].sort((a, b) => comparePanelElementsPaintOrder(a, b, byId));
+});
 
 function onSelect(id: string, event: MouseEvent) {
   if (props.previewMode) return;
@@ -141,6 +161,23 @@ function onSelect(id: string, event: MouseEvent) {
   }
   emit("selectIds", [id]);
 }
+
+function emitViewUiEvent(el: PanelElement, eventType: ViewEventType, event: MouseEvent) {
+  if (!props.onViewUiEvent) return;
+  if (!props.boundViewEventTypes?.get(el.id)?.has(eventType)) return;
+  props.onViewUiEvent(
+    createViewEventSignal({
+      eventType,
+      event: snapshotDomEvent(event),
+      node: snapshotViewEventNode(el),
+    })
+  );
+}
+
+function hasViewEvent(el: PanelElement) {
+  const types = props.boundViewEventTypes?.get(el.id);
+  return Boolean(types && types.size > 0 && props.onViewUiEvent);
+}
 </script>
 
 <template>
@@ -151,6 +188,7 @@ function onSelect(id: string, event: MouseEvent) {
       'absolute select-none',
       previewMode ? '' : 'rv-selectable',
       !previewMode && selectedIds.includes(el.id) ? 'ring-2 ring-blue-500/90 ring-offset-0' : '',
+      hasViewEvent(el) ? 'cursor-pointer' : '',
     ]"
     :data-element-id="el.id"
     :style="{
@@ -165,6 +203,11 @@ function onSelect(id: string, event: MouseEvent) {
       ...getNodeVisualStyle(el),
     }"
     @mousedown="onSelect(el.id, $event)"
+    @click="emitViewUiEvent(el, 'click', $event)"
+    @dblclick="emitViewUiEvent(el, 'dblclick', $event)"
+    @contextmenu="emitViewUiEvent(el, 'contextmenu', $event)"
+    @mouseenter="emitViewUiEvent(el, 'mouseenter', $event)"
+    @mouseleave="emitViewUiEvent(el, 'mouseleave', $event)"
   >
     <NodeContent
       :element="el"

package/src/panel/components/MaterialPreview.vue

@@ -106,6 +106,14 @@ const common =
       <polygon points="50,36 54,42 50,48 42,48 38,42 42,36" class="fill-primary/70" />
     </svg>
   </div>
+  <div v-else-if="id === 'scene3d'" :class="common">
+    <svg viewBox="0 0 80 60" class="h-full w-full">
+      <polygon points="40,8 62,22 62,44 40,56 18,44 18,22" class="fill-primary/20 stroke-primary/80" stroke-width="1.5" />
+      <polygon points="40,8 62,22 40,32 18,22" class="fill-primary/45" />
+      <polygon points="40,32 62,22 62,44 40,56" class="fill-primary/30" />
+      <polygon points="40,32 18,22 18,44 40,56" class="fill-primary/55" />
+    </svg>
+  </div>
   <div v-else-if="id === 'reference'" :class="common">
     <div class="absolute inset-2 rounded-md border border-dashed border-primary/70 bg-primary/10" />
     <div class="absolute inset-0 flex items-center justify-center text-[10px] text-primary/80">

package/src/panel/components/PanelConfigSidebar.vue

@@ -20,6 +20,7 @@ import PanelConfigTextSection from "./config/PanelConfigTextSection.vue";
 import PanelConfigAudioSection from "./config/PanelConfigAudioSection.vue";
 import PanelConfigVideoSection from "./config/PanelConfigVideoSection.vue";
 import PanelConfigGeometrySection from "./config/PanelConfigGeometrySection.vue";
+import PanelConfigScene3dSection from "./config/PanelConfigScene3dSection.vue";
 import PanelConfigGridSection from "./config/PanelConfigGridSection.vue";
 import PanelConfigGridChildSpan from "./config/PanelConfigGridChildSpan.vue";
 import PanelConfigReferenceSection from "./config/PanelConfigReferenceSection.vue";
@@ -333,6 +334,16 @@ watch(
               @update:open="(v) => setSectionExpanded('geometryConfig', v)"
             />
 
+            <PanelConfigScene3dSection
+              v-if="materialType === 'scene3d' && shouldShowSection('scene3dConfig', t('panel.config.sectionScene3d'), [t('panel.material.scene3d'), '3d', 'glb', t('panel.config.groupScene3dCamera')])"
+              :element="selectedElement"
+              :is-editable="isNodeEditable"
+              :open="isSectionExpanded('scene3dConfig')"
+              :force-open="forceOpenSections"
+              :update-element="updateElement"
+              @update:open="(v) => setSectionExpanded('scene3dConfig', v)"
+            />
+
             <PanelConfigGridSection
               v-if="materialType === 'grid' && shouldShowSection('gridConfig', t('panel.config.sectionGrid'), [t('panel.config.searchKwGrid'), t('panel.config.rowsShort'), t('panel.config.colsShort'), t('panel.config.searchKwGap')])"
               :element="selectedElement"

package/src/panel/components/WorkspaceConfigSidebar.vue

@@ -80,6 +80,7 @@ export type WorkspaceConfigSidebarProps = Omit<
         | "jsonConfig"
         | "logicConfig"
         | "clockConfig"
+        | "eventConfig"
       >
     >
   ) => void;

package/src/panel/components/WorkspaceProjectNav.vue

@@ -19,6 +19,7 @@ const props = defineProps<{
   activeProjectId: string | null;
   activeProjectName: string | null;
   dirty: boolean;
+  previewingProjectIds?: string[];
 }>();
 
 const emit = defineEmits<{
@@ -76,8 +77,10 @@ const projectMenu = computed(() =>
       default: () =>
         props.projects.length === 0
           ? [h(Menu.Item, { key: "empty", disabled: true }, () => t("panel.workspace.noSavedWorkspaces"))]
-          : props.projects.map((project) =>
-              h(
+          : props.projects.map((project) => {
+              const isCurrent = props.activeProjectId === project.id;
+              const isPreviewing = (props.previewingProjectIds ?? []).includes(project.id);
+              return h(
                 "div",
                 { key: project.id, class: "px-1 py-0.5" },
                 h("div", { class: "flex items-center gap-1" }, [
@@ -86,16 +89,41 @@ const projectMenu = computed(() =>
                     {
                       type: "button",
                       class: [
-                        "min-w-0 flex-1 rounded px-2 py-1.5 text-left text-xs hover:bg-accent",
-                        props.activeProjectId === project.id
-                          ? "bg-accent/60 font-medium"
+                        "min-w-0 flex-1 rounded px-2 py-1.5 text-left text-xs hover:bg-gray-100",
+                        isCurrent
+                          ? "bg-blue-50 font-medium text-blue-700 ring-1 ring-inset ring-blue-300"
+                          : "",
+                        !isCurrent && isPreviewing
+                          ? "bg-sky-50 ring-1 ring-inset ring-sky-300"
                           : "",
                       ].join(" "),
                       onClick: () =>
                         void runAction(() => emit("openProject", project.id)),
                     },
                     [
-                      h("div", { class: "truncate" }, project.name),
+                      h("div", { class: "flex items-center gap-1" }, [
+                        h("div", { class: "min-w-0 flex-1 truncate" }, project.name),
+                        isCurrent
+                          ? h(
+                              "span",
+                              {
+                                class:
+                                  "shrink-0 rounded bg-blue-600 px-1 py-px text-[9px] leading-none text-white",
+                              },
+                              t("panel.workspace.currentBadge")
+                            )
+                          : null,
+                        isPreviewing
+                          ? h(
+                              "span",
+                              {
+                                class:
+                                  "shrink-0 rounded bg-sky-600 px-1 py-px text-[9px] leading-none text-white",
+                              },
+                              t("panel.workspace.previewingBadge")
+                            )
+                          : null,
+                      ]),
                       h(
                         "div",
                         { class: "truncate text-[10px] text-muted-foreground" },
@@ -132,8 +160,8 @@ const projectMenu = computed(() =>
                     () => t("common.delete")
                   ),
                 ])
-              )
-            ),
+              );
+            }),
     }
   )
 );