@arronqzy/react-view 1.0.13 → 1.0.15

package/dist/styles.css

@@ -629,6 +629,10 @@ video {
   bottom: 0px;
 }
 
+.bottom-1\.5 {
+  bottom: 0.375rem;
+}
+
 .bottom-\[var\(--rv-ruler-size\)\] {
   bottom: var(--rv-ruler-size);
 }
@@ -1002,6 +1006,10 @@ video {
   min-height: 140px;
 }
 
+.min-h-\[64px\] {
+  min-height: 64px;
+}
+
 .min-h-\[68px\] {
   min-height: 68px;
 }
@@ -1178,6 +1186,10 @@ video {
   max-width: 32rem;
 }
 
+.max-w-sm {
+  max-width: 24rem;
+}
+
 .max-w-xs {
   max-width: 20rem;
 }
@@ -1238,6 +1250,16 @@ video {
   animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
 }
 
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.animate-spin {
+  animation: spin 1s linear infinite;
+}
+
 .cursor-crosshair {
   cursor: crosshair;
 }
@@ -1623,6 +1645,11 @@ video {
   border-color: hsl(var(--foreground) / 0.8);
 }
 
+.border-gray-300 {
+  --tw-border-opacity: 1;
+  border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
+}
+
 .border-primary\/25 {
   border-color: hsl(var(--primary) / 0.25);
 }
@@ -1668,6 +1695,10 @@ video {
   border-color: rgb(124 58 237 / var(--tw-border-opacity, 1));
 }
 
+.border-white\/30 {
+  border-color: rgb(255 255 255 / 0.3);
+}
+
 .border-white\/5 {
   border-color: rgb(255 255 255 / 0.05);
 }
@@ -1680,10 +1711,20 @@ video {
   border-left-color: hsl(var(--primary) / 0.85);
 }
 
+.border-t-gray-700 {
+  --tw-border-opacity: 1;
+  border-top-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
+}
+
 .border-t-transparent {
   border-top-color: transparent;
 }
 
+.border-t-white {
+  --tw-border-opacity: 1;
+  border-top-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
+}
+
 .bg-\[\#0c1220\] {
   --tw-bg-opacity: 1;
   background-color: rgb(12 18 32 / var(--tw-bg-opacity, 1));
@@ -1744,6 +1785,10 @@ video {
   background-color: hsl(var(--background) / 0.95);
 }
 
+.bg-black\/45 {
+  background-color: rgb(0 0 0 / 0.45);
+}
+
 .bg-black\/55 {
   background-color: rgb(0 0 0 / 0.55);
 }
@@ -1845,10 +1890,6 @@ video {
   background-color: hsl(var(--primary) / 0.15);
 }
 
-.bg-primary\/20 {
-  background-color: hsl(var(--primary) / 0.2);
-}
-
 .bg-primary\/35 {
   background-color: hsl(var(--primary) / 0.35);
 }
@@ -1901,6 +1942,11 @@ video {
   background-color: rgb(14 165 233 / 0.15);
 }
 
+.bg-sky-600 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(2 132 199 / var(--tw-bg-opacity, 1));
+}
+
 .bg-transparent {
   background-color: transparent;
 }
@@ -2150,6 +2196,15 @@ video {
   padding-bottom: 1.75rem;
 }
 
+.py-px {
+  padding-top: 1px;
+  padding-bottom: 1px;
+}
+
+.pb-1 {
+  padding-bottom: 0.25rem;
+}
+
 .pb-1\.5 {
   padding-bottom: 0.375rem;
 }
@@ -2266,6 +2321,10 @@ video {
   font-size: 20px;
 }
 
+.text-\[9px\] {
+  font-size: 9px;
+}
+
 .text-sm {
   font-size: 0.875rem;
   line-height: 1.25rem;
@@ -2420,11 +2479,20 @@ video {
   color: rgb(125 211 252 / var(--tw-text-opacity, 1));
 }
 
+.text-sky-600 {
+  --tw-text-opacity: 1;
+  color: rgb(2 132 199 / var(--tw-text-opacity, 1));
+}
+
 .text-sky-700 {
   --tw-text-opacity: 1;
   color: rgb(3 105 161 / var(--tw-text-opacity, 1));
 }
 
+.text-sky-800\/90 {
+  color: rgb(7 89 133 / 0.9);
+}
+
 .text-slate-300 {
   --tw-text-opacity: 1;
   color: rgb(203 213 225 / var(--tw-text-opacity, 1));
@@ -2478,6 +2546,10 @@ video {
   opacity: 0.45;
 }
 
+.opacity-50 {
+  opacity: 0.5;
+}
+
 .opacity-60 {
   opacity: 0.6;
 }
@@ -2563,6 +2635,10 @@ video {
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
 
+.ring-inset {
+  --tw-ring-inset: inset;
+}
+
 .ring-blue-500\/90 {
   --tw-ring-color: rgb(59 130 246 / 0.9);
 }
@@ -2579,6 +2655,10 @@ video {
   --tw-ring-color: hsl(var(--primary) / 0.2);
 }
 
+.ring-primary\/40 {
+  --tw-ring-color: hsl(var(--primary) / 0.4);
+}
+
 .ring-primary\/45 {
   --tw-ring-color: hsl(var(--primary) / 0.45);
 }
@@ -2587,6 +2667,10 @@ video {
   --tw-ring-color: hsl(var(--primary) / 0.5);
 }
 
+.ring-sky-400\/50 {
+  --tw-ring-color: rgb(56 189 248 / 0.5);
+}
+
 .ring-offset-0 {
   --tw-ring-offset-width: 0px;
 }
@@ -2779,6 +2863,10 @@ video {
   color: hsl(var(--muted-foreground));
 }
 
+.last\:border-b-0:last-child {
+  border-bottom-width: 0px;
+}
+
 .focus-within\:border-sky-500\/40:focus-within {
   border-color: rgb(14 165 233 / 0.4);
 }
@@ -2827,6 +2915,10 @@ video {
   background-color: hsl(var(--muted) / 0.35);
 }
 
+.hover\:bg-muted\/70:hover {
+  background-color: hsl(var(--muted) / 0.7);
+}
+
 .hover\:bg-primary\/90:hover {
   background-color: hsl(var(--primary) / 0.9);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arronqzy/react-view",
-  "version": "1.0.13",
+  "version": "1.0.15",
   "files": [
     "src",
     "dist",
@@ -30,13 +30,14 @@
     "@codemirror/lang-json": "^6.0.1",
     "@codemirror/theme-one-dark": "^6.1.2",
     "@codemirror/view": "^6.36.2",
-    "@arronqzy/ui": "1.0.5",
-    "@arronqzy/react-blueprint": "1.0.7",
-    "@arronqzy/view-table": "0.1.3",
-    "@arronqzy/rx-store": "1.0.4",
-    "@arronqzy/webllm-assistant": "0.1.7",
-    "@arronqzy/blueprint-dsl": "1.0.6",
-    "@arronqzy/i18n": "0.1.5"
+    "@arronqzy/ui": "1.0.6",
+    "@arronqzy/blueprint-dsl": "1.0.8",
+    "@arronqzy/i18n": "0.1.7",
+    "@arronqzy/react-blueprint": "1.0.9",
+    "@arronqzy/view-scene3d": "0.1.2",
+    "@arronqzy/rx-store": "1.0.5",
+    "@arronqzy/view-table": "0.1.5",
+    "@arronqzy/webllm-assistant": "0.1.9"
   },
   "devDependencies": {
     "@types/react": "^19.0.1",
@@ -45,8 +46,8 @@
     "eslint": "^8.57.0",
     "typescript": "^5.5.4",
     "@arronqzy/eslint-config": "0.0.0",
-    "@arronqzy/typescript-config": "1.0.0",
-    "@arronqzy/tailwind": "1.0.2"
+    "@arronqzy/tailwind": "1.0.2",
+    "@arronqzy/typescript-config": "1.0.0"
   },
   "scripts": {
     "lint": "eslint \"src/**/*.{ts,tsx}\"",

package/src/panel/ReactViewOnlinePreview.tsx

@@ -7,8 +7,11 @@ import {
   listBlueprintLibrary,
   useBlueprintPageLifecycle,
   type BlueprintLibraryListItem,
+  resolveRunnableNodeType,
+  resolveViewElementIds,
 } from "@arronqzy/react-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";
 import type { TableCellActionHandler } from "./components/table/TableNodeContent";
@@ -248,7 +251,7 @@ export function ReactViewOnlinePreview({
   const lifecycleReady =
     !!panelState && layerElements.length > 0 && layoutReady;
 
-  const { triggerBlueprintNode } = useBlueprintPageLifecycle({
+  const { triggerBlueprintNode, emitViewEvent, firedLifecyclePhases } = useBlueprintPageLifecycle({
     graph: blueprintGraph,
     active: true,
     enabled: lifecycleReady,
@@ -275,6 +278,29 @@ export function ReactViewOnlinePreview({
     },
     [triggerBlueprintNode]
   );
+  const boundViewEventTypes = useMemo(
+    () =>
+      collectArmedViewEventBindings(
+        blueprintGraph.document.nodes.map((node) => ({
+          id: node.id,
+          nodeType: resolveRunnableNodeType(node),
+          lifecyclePhase: node.lifecyclePhase,
+          viewElementIds: resolveViewElementIds(node),
+          eventConfig: node.eventConfig,
+        })),
+        blueprintGraph.document.edges,
+        EVENT_NODE_TYPE,
+        LIFECYCLE_NODE_TYPE,
+        firedLifecyclePhases
+      ),
+    [blueprintGraph.document.nodes, blueprintGraph.document.edges, firedLifecyclePhases]
+  );
+  const onViewUiEvent = useCallback(
+    (payload: Parameters<typeof emitViewEvent>[0]) => {
+      void emitViewEvent(payload);
+    },
+    [emitViewEvent]
+  );
   if (loadError) {
     return (
       <div className="flex min-h-[100vh] w-full items-center justify-center bg-white px-6 text-center text-sm text-gray-600">
@@ -285,7 +311,8 @@ export function ReactViewOnlinePreview({
 
   if (!panelState) {
     return (
-      <div className="flex min-h-[100vh] w-full items-center justify-center bg-white text-sm text-gray-600">
+      <div className="flex min-h-[100vh] w-full flex-col items-center justify-center gap-3 bg-white text-sm text-gray-600">
+        <div className="h-9 w-9 animate-spin rounded-full border-2 border-gray-300 border-t-gray-700" />
         {t("panel.workspace.previewLoading")}
       </div>
     );
@@ -342,6 +369,8 @@ export function ReactViewOnlinePreview({
             previewMode
             previewLayoutKey={layoutRevision}
             onTableCellAction={onTableCellAction}
+            boundViewEventTypes={boundViewEventTypes}
+            onViewUiEvent={onViewUiEvent}
           />
         </div>
       </div>