@almadar/ui 2.42.0 → 2.43.0

package/dist/avl/index.js

@@ -1,7 +1,7 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { OrbitControls, Grid as Grid$1, Stars, Sparkles, Html, RoundedBox } from '@react-three/drei';
 import * as React124 from 'react';
-import React124__default, { createContext, useState, useRef, useCallback, useEffect, useLayoutEffect, lazy, useContext, useMemo, Suspense, useSyncExternalStore, useId, forwardRef, useImperativeHandle, useReducer, Component } from 'react';
+import React124__default, { createContext, useState, useRef, useCallback, useEffect, useMemo, useLayoutEffect, lazy, useContext, Suspense, useSyncExternalStore, useId, forwardRef, useImperativeHandle, useReducer, Component } from 'react';
 import { useThree, useFrame, Canvas } from '@react-three/fiber';
 import * as THREE6 from 'three';
 import { MathUtils, Vector3, Quaternion, QuadraticBezierCurve3 } from 'three';
@@ -44,7 +44,7 @@ import langDiff from 'react-syntax-highlighter/dist/esm/languages/prism/diff';
 import langToml from 'react-syntax-highlighter/dist/esm/languages/prism/toml';
 import langGo from 'react-syntax-highlighter/dist/esm/languages/prism/go';
 import langGraphql from 'react-syntax-highlighter/dist/esm/languages/prism/graphql';
-import { schemaToIR, getPage, isCircuitEvent } from '@almadar/core';
+import { FieldTypeSchema, schemaToIR, getPage, isCircuitEvent } from '@almadar/core';
 import '@tanstack/react-query';
 import { StateMachineManager, createContextFromBindings, interpolateValue, EffectExecutor } from '@almadar/runtime';
 
@@ -2914,7 +2914,7 @@ function EventBusProvider({ children, debug: debug2 = false }) {
       }
     };
   }, [debug2]);
-  const contextValue = useMemo(
+  const contextValue2 = useMemo(
     () => ({
       emit,
       on,
@@ -2927,12 +2927,12 @@ function EventBusProvider({ children, debug: debug2 = false }) {
     [emit, on, once, hasListeners, onAny, getSelectedEntity, clearSelectedEntity]
   );
   useEffect(() => {
-    setGlobalEventBus(contextValue);
+    setGlobalEventBus(contextValue2);
     return () => {
       setGlobalEventBus(null);
     };
-  }, [contextValue]);
-  return /* @__PURE__ */ jsx(EventBusContext.Provider, { value: contextValue, children });
+  }, [contextValue2]);
+  return /* @__PURE__ */ jsx(EventBusContext.Provider, { value: contextValue2, children });
 }
 var EventBusContext;
 var init_EventBusProvider = __esm({
@@ -13229,7 +13229,7 @@ var ThemeProvider = ({
     const newMode = resolvedMode === "dark" ? "light" : "dark";
     setMode(newMode);
   }, [resolvedMode, setMode]);
-  const contextValue = useMemo(
+  const contextValue2 = useMemo(
     () => ({
       theme,
       mode,
@@ -13251,7 +13251,7 @@ var ThemeProvider = ({
       appliedTheme
     ]
   );
-  return /* @__PURE__ */ jsx(ThemeContext.Provider, { value: contextValue, children });
+  return /* @__PURE__ */ jsx(ThemeContext.Provider, { value: contextValue2, children });
 };
 function useTheme() {
   const context = useContext(ThemeContext);
@@ -13275,25 +13275,92 @@ function useTheme() {
 var store = /* @__PURE__ */ new Map();
 var storeListeners = /* @__PURE__ */ new Set();
 var watchCallbacks = /* @__PURE__ */ new Map();
-function advance(entityType, data) {
-  const prev = store.get(entityType);
-  const oldData = prev?.data ?? [];
-  store.set(entityType, { data, version: (prev?.version ?? 0) + 1 });
+function extractId(record) {
+  const r2 = record;
+  return String(r2.id ?? r2._id ?? r2.key ?? "");
+}
+function materialize(snap) {
+  return snap.ids.map((id) => snap.entities.get(id));
+}
+function notifyListeners(entityType, prev) {
   for (const listener of storeListeners) {
     listener();
   }
   const cbs = watchCallbacks.get(entityType);
   if (cbs) {
+    const oldData = prev ? materialize(prev) : [];
+    const cur = store.get(entityType);
+    const newData = cur ? materialize(cur) : [];
     for (const cb of cbs) {
       try {
-        cb(oldData, data);
+        cb(oldData, newData);
       } catch {
       }
     }
   }
 }
+function setAll(entityType, records) {
+  const entities = /* @__PURE__ */ new Map();
+  const ids = [];
+  for (const r2 of records) {
+    const rec = r2;
+    const id = extractId(rec);
+    if (id) {
+      entities.set(id, rec);
+      ids.push(id);
+    }
+  }
+  const prev = store.get(entityType);
+  store.set(entityType, { entities, ids, version: (prev?.version ?? 0) + 1 });
+  notifyListeners(entityType, prev);
+}
+function upsertOne(entityType, record) {
+  const id = extractId(record);
+  if (!id) return;
+  const prev = store.get(entityType);
+  const snapshot = prev ? { entities: new Map(prev.entities), ids: [...prev.ids], version: prev.version } : { entities: /* @__PURE__ */ new Map(), ids: [], version: 0 };
+  snapshot.entities.set(id, record);
+  if (!snapshot.ids.includes(id)) snapshot.ids.push(id);
+  snapshot.version++;
+  store.set(entityType, snapshot);
+  notifyListeners(entityType, prev);
+}
+function addOne(entityType, record) {
+  upsertOne(entityType, record);
+}
+function updateOne(entityType, id, changes) {
+  const prev = store.get(entityType);
+  if (!prev?.entities.has(id)) return;
+  const snapshot = {
+    entities: new Map(prev.entities),
+    ids: [...prev.ids],
+    version: prev.version
+  };
+  snapshot.entities.set(id, { ...snapshot.entities.get(id), ...changes });
+  snapshot.version++;
+  store.set(entityType, snapshot);
+  notifyListeners(entityType, prev);
+}
+function removeOne(entityType, id) {
+  const prev = store.get(entityType);
+  if (!prev) return;
+  const snapshot = {
+    entities: new Map(prev.entities),
+    ids: prev.ids.filter((i) => i !== id),
+    version: prev.version
+  };
+  snapshot.entities.delete(id);
+  snapshot.version++;
+  store.set(entityType, snapshot);
+  notifyListeners(entityType, prev);
+}
 function getSnapshot(entityType) {
-  return store.get(entityType)?.data ?? [];
+  const snap = store.get(entityType);
+  if (!snap) return [];
+  return materialize(snap);
+}
+function getById(entityType, id) {
+  return store.get(entityType)?.entities.get(id) ?? null;
 }
 function getVersion(entityType) {
   return store.get(entityType)?.version ?? 0;
@@ -13317,15 +13384,21 @@ function useEntityRef(entityType) {
   }, [entityType]);
   return useSyncExternalStore(subscribeToStore, getSnapshotStable, () => []);
 }
-var EntityStoreContext = createContext({
-  advance,
-  getSnapshot
-});
+var contextValue = {
+  setAll,
+  upsertOne,
+  addOne,
+  updateOne,
+  removeOne,
+  getSnapshot,
+  getById
+};
+var EntityStoreContext = createContext(contextValue);
 function useEntityStore() {
   return useContext(EntityStoreContext);
 }
 function EntityStoreProvider({ children }) {
-  return /* @__PURE__ */ jsx(EntityStoreContext.Provider, { value: { advance, getSnapshot }, children });
+  return /* @__PURE__ */ jsx(EntityStoreContext.Provider, { value: contextValue, children });
 }
 
 // providers/OrbitalProvider.tsx
@@ -13401,13 +13474,13 @@ function SelectionProvider({
       unsubCancel();
     };
   }, [eventBus, setSelected, clearSelection, debug2]);
-  const contextValue = {
+  const contextValue2 = {
     selected,
     setSelected,
     clearSelection,
     isSelected
   };
-  return /* @__PURE__ */ jsx(SelectionContext.Provider, { value: contextValue, children });
+  return /* @__PURE__ */ jsx(SelectionContext.Provider, { value: contextValue2, children });
 }
 var DEFAULT_SLOTS = {
   main: null,
@@ -13556,8 +13629,8 @@ function useUISlotManager() {
 var UISlotContext = createContext(null);
 function UISlotProvider({ children }) {
   const slotManager = useUISlotManager();
-  const contextValue = useMemo(() => slotManager, [slotManager]);
-  return /* @__PURE__ */ jsx(UISlotContext.Provider, { value: contextValue, children });
+  const contextValue2 = useMemo(() => slotManager, [slotManager]);
+  return /* @__PURE__ */ jsx(UISlotContext.Provider, { value: contextValue2, children });
 }
 function useUISlots() {
   const context = useContext(UISlotContext);
@@ -20060,13 +20133,13 @@ function getState() {
   }
   return { checks: /* @__PURE__ */ new Map(), transitions: [], bridgeHealth: null, listeners: /* @__PURE__ */ new Set() };
 }
-function notifyListeners() {
+function notifyListeners2() {
   getState().listeners.forEach((l) => l());
   exposeOnWindow();
 }
 function registerCheck(id, label, status = "pending", details) {
   getState().checks.set(id, { id, label, status, details, updatedAt: Date.now() });
-  notifyListeners();
+  notifyListeners2();
 }
 function getAllChecks() {
   return Array.from(getState().checks.values());
@@ -20110,7 +20183,7 @@ function recordTransition(trace) {
       failedEffects.map((e) => `${e.type}: ${e.error}`).join("; ")
     );
   }
-  notifyListeners();
+  notifyListeners2();
 }
 function getTransitions2() {
   return [...getState().transitions];
@@ -20143,7 +20216,7 @@ function recordServerResponse(orbitalName, event, response) {
       response.error
     );
   }
-  notifyListeners();
+  notifyListeners2();
 }
 function getBridgeHealth() {
   const bh = getState().bridgeHealth;
@@ -21759,6 +21832,42 @@ var orbStyleOverrides = {
   "orb-op-async": { color: ORB_COLORS.dark.async }
 };
 var orbStyle = { ...dark, ...orbStyleOverrides };
+function computeFoldRegions(code) {
+  const lines = code.split("\n");
+  const regions = [];
+  const stack = [];
+  for (let i = 0; i < lines.length; i++) {
+    const line = lines[i];
+    let inString = false;
+    for (let j = 0; j < line.length; j++) {
+      const ch = line[j];
+      if (ch === "\\" && inString) {
+        j++;
+        continue;
+      }
+      if (ch === '"') {
+        inString = !inString;
+        continue;
+      }
+      if (inString) continue;
+      if (ch === "{" || ch === "[") {
+        stack.push({ line: i, bracket: ch });
+      } else if (ch === "}" || ch === "]") {
+        const open = stack.pop();
+        if (open && open.line < i) {
+          regions.push({
+            start: open.line,
+            end: i,
+            closeBracket: ch
+          });
+        }
+      }
+    }
+  }
+  return regions.sort((a, b) => a.start - b.start);
+}
+var LINE_PROPS_FN = (n) => ({ "data-line": String(n - 1) });
+var HIDDEN_LINE_NUMBERS = { display: "none" };
 var CodeBlock = React124__default.memo(
   ({
     code: rawCode,
@@ -21766,6 +21875,7 @@ var CodeBlock = React124__default.memo(
     showCopyButton = true,
     showLanguageBadge = true,
     maxHeight = "60vh",
+    foldable: foldableProp,
     className
   }) => {
     const code = typeof rawCode === "string" ? rawCode : String(rawCode ?? "");
@@ -21774,8 +21884,114 @@ var CodeBlock = React124__default.memo(
     const eventBus = useEventBus();
     const { t: _t } = useTranslate();
     const scrollRef = useRef(null);
+    const codeRef = useRef(null);
     const savedScrollLeftRef = useRef(0);
     const [copied, setCopied] = useState(false);
+    const isFoldable = foldableProp ?? (language === "orb" || language === "json");
+    const [collapsed, setCollapsed] = useState(() => /* @__PURE__ */ new Set());
+    const foldRegions = useMemo(
+      () => isFoldable ? computeFoldRegions(code) : [],
+      [code, isFoldable]
+    );
+    const foldStartMap = useMemo(() => {
+      const m = /* @__PURE__ */ new Map();
+      for (const r2 of foldRegions) m.set(r2.start, r2);
+      return m;
+    }, [foldRegions]);
+    const hiddenLines = useMemo(() => {
+      const h = /* @__PURE__ */ new Set();
+      for (const r2 of foldRegions) {
+        if (!collapsed.has(r2.start)) continue;
+        for (let i = r2.start + 1; i <= r2.end; i++) h.add(i);
+      }
+      return h;
+    }, [foldRegions, collapsed]);
+    const collapsedRef = useRef(collapsed);
+    collapsedRef.current = collapsed;
+    const foldStartMapRef = useRef(foldStartMap);
+    foldStartMapRef.current = foldStartMap;
+    const toggleFold = useCallback((lineNum) => {
+      setCollapsed((prev) => {
+        const next = new Set(prev);
+        if (next.has(lineNum)) next.delete(lineNum);
+        else next.add(lineNum);
+        return next;
+      });
+    }, []);
+    const toggleFoldRef = useRef(toggleFold);
+    toggleFoldRef.current = toggleFold;
+    useEffect(() => {
+      setCollapsed(/* @__PURE__ */ new Set());
+    }, [code]);
+    const highlightedElement = useMemo(
+      () => /* @__PURE__ */ jsx(
+        SyntaxHighlighter,
+        {
+          PreTag: "div",
+          language,
+          style: activeStyle,
+          wrapLines: true,
+          showLineNumbers: true,
+          showInlineLineNumbers: false,
+          lineNumberContainerStyle: HIDDEN_LINE_NUMBERS,
+          lineProps: LINE_PROPS_FN,
+          customStyle: {
+            backgroundColor: "transparent",
+            borderRadius: 0,
+            padding: 0,
+            margin: 0,
+            whiteSpace: "pre",
+            minWidth: "100%"
+          },
+          children: code
+        }
+      ),
+      [code, language, activeStyle]
+    );
+    useLayoutEffect(() => {
+      const container = codeRef.current;
+      if (!container) return;
+      container.querySelectorAll(".fold-toggle, .fold-summary").forEach((el) => el.remove());
+      const lineEls = container.querySelectorAll("[data-line]");
+      if (!isFoldable || foldRegions.length === 0) {
+        lineEls.forEach((el) => {
+          el.style.display = "";
+          el.style.position = "";
+          el.style.paddingLeft = "";
+        });
+        return;
+      }
+      lineEls.forEach((el) => {
+        const num = parseInt(el.getAttribute("data-line") ?? "-1", 10);
+        if (hiddenLines.has(num)) {
+          el.style.display = "none";
+          return;
+        }
+        el.style.display = "";
+        el.style.position = "relative";
+        el.style.paddingLeft = "1.2em";
+        const region = foldStartMap.get(num);
+        if (!region) return;
+        const isCollapsed = collapsed.has(num);
+        const toggle = document.createElement("span");
+        toggle.className = "fold-toggle";
+        toggle.textContent = isCollapsed ? "\u25B6" : "\u25BC";
+        toggle.style.cssText = "position:absolute;left:0;top:0;width:1.2em;text-align:center;cursor:pointer;color:#858585;font-size:10px;user-select:none;line-height:inherit;height:100%";
+        toggle.addEventListener("click", (e) => {
+          e.stopPropagation();
+          toggleFoldRef.current(num);
+        });
+        el.insertBefore(toggle, el.firstChild);
+        if (isCollapsed) {
+          const summary = document.createElement("span");
+          summary.className = "fold-summary";
+          summary.style.cssText = "color:#858585;font-style:italic";
+          const count = region.end - region.start - 1;
+          summary.textContent = ` ... ${count} line${count !== 1 ? "s" : ""} ${region.closeBracket}`;
+          el.appendChild(summary);
+        }
+      });
+    }, [collapsed, hiddenLines, foldStartMap, foldRegions, isFoldable]);
     useLayoutEffect(() => {
       const el = scrollRef.current;
       return () => {
@@ -21806,8 +22022,9 @@ var CodeBlock = React124__default.memo(
         eventBus.emit("UI:COPY_CODE", { language, success: false });
       }
     };
+    const hasHeader = showLanguageBadge || showCopyButton;
     return /* @__PURE__ */ jsxs(Box, { className: `relative group ${className || ""}`, children: [
-      (showLanguageBadge || showCopyButton) && /* @__PURE__ */ jsxs(
+      hasHeader && /* @__PURE__ */ jsxs(
         HStack,
         {
           justify: "between",
@@ -21842,31 +22059,14 @@ var CodeBlock = React124__default.memo(
             touchAction: "pan-x pan-y",
             contain: "paint",
             backgroundColor: "#1e1e1e",
-            borderRadius: showLanguageBadge || showCopyButton ? "0 0 0.5rem 0.5rem" : "0.5rem",
-            padding: "1rem"
+            borderRadius: hasHeader ? "0 0 0.5rem 0.5rem" : "0.5rem"
           },
-          children: /* @__PURE__ */ jsx(
-            SyntaxHighlighter,
-            {
-              PreTag: "div",
-              language,
-              style: activeStyle,
-              customStyle: {
-                backgroundColor: "transparent",
-                borderRadius: 0,
-                padding: 0,
-                margin: 0,
-                whiteSpace: "pre",
-                minWidth: "100%"
-              },
-              children: code
-            }
-          )
+          children: /* @__PURE__ */ jsx("div", { ref: codeRef, style: { padding: "1rem" }, children: highlightedElement })
         }
       )
     ] });
   },
-  (prev, next) => prev.language === next.language && prev.code === next.code && prev.showCopyButton === next.showCopyButton && prev.maxHeight === next.maxHeight
+  (prev, next) => prev.language === next.language && prev.code === next.code && prev.showCopyButton === next.showCopyButton && prev.maxHeight === next.maxHeight && prev.foldable === next.foldable
 );
 CodeBlock.displayName = "CodeBlock";
 
@@ -29770,27 +29970,27 @@ function useQuerySingleton(query) {
       store2.listeners.delete(listener);
     };
   }, [store2]);
-  const notifyListeners3 = useCallback(() => {
+  const notifyListeners4 = useCallback(() => {
     store2.listeners.forEach((listener) => listener());
   }, [store2]);
   const setSearch = useCallback((value) => {
     store2.search = value;
-    notifyListeners3();
-  }, [store2, notifyListeners3]);
+    notifyListeners4();
+  }, [store2, notifyListeners4]);
   const setFilter = useCallback((key, value) => {
     store2.filters = { ...store2.filters, [key]: value };
-    notifyListeners3();
-  }, [store2, notifyListeners3]);
+    notifyListeners4();
+  }, [store2, notifyListeners4]);
   const clearFilters = useCallback(() => {
     store2.filters = {};
     store2.search = "";
-    notifyListeners3();
-  }, [store2, notifyListeners3]);
+    notifyListeners4();
+  }, [store2, notifyListeners4]);
   const setSort = useCallback((field, direction) => {
     store2.sortField = field;
     store2.sortDirection = direction;
-    notifyListeners3();
-  }, [store2, notifyListeners3]);
+    notifyListeners4();
+  }, [store2, notifyListeners4]);
   return {
     search: store2.search,
     setSearch,
@@ -39972,24 +40172,24 @@ init_cn();
 // lib/traitRegistry.ts
 var traits = /* @__PURE__ */ new Map();
 var listeners = /* @__PURE__ */ new Set();
-function notifyListeners2() {
+function notifyListeners3() {
   listeners.forEach((listener) => listener());
 }
 function registerTrait(info) {
   traits.set(info.id, info);
-  notifyListeners2();
+  notifyListeners3();
 }
 function updateTraitState(id, newState) {
   const trait = traits.get(id);
   if (trait) {
     trait.currentState = newState;
     trait.transitionCount++;
-    notifyListeners2();
+    notifyListeners3();
   }
 }
 function unregisterTrait(id) {
   traits.delete(id);
-  notifyListeners2();
+  notifyListeners3();
 }
 function getAllTraits() {
   return Array.from(traits.values());
@@ -41768,7 +41968,7 @@ function SequencerBoard({
     setPlayState("playing");
     setCurrentStep(0);
     let step = 0;
-    const advance2 = () => {
+    const advance = () => {
       step++;
       if (step >= entity.maxSlots) {
         const playerSeq = slots.map((s) => s?.id);
@@ -41799,10 +41999,10 @@ function SequencerBoard({
         }
       } else {
         setCurrentStep(step);
-        timerRef.current = setTimeout(advance2, stepDurationMs);
+        timerRef.current = setTimeout(advance, stepDurationMs);
       }
     };
-    timerRef.current = setTimeout(advance2, stepDurationMs);
+    timerRef.current = setTimeout(advance, stepDurationMs);
   }, [canPlay, slots, entity.maxSlots, entity.solutions, stepDurationMs, playEvent, completeEvent, emit]);
   const machine = {
     name: entity.title,
@@ -45362,13 +45562,14 @@ function getToastPosition(position) {
       return "top-4 right-4";
   }
 }
-function renderPatternChildren(children, onDismiss, parentId = "root") {
+function renderPatternChildren(children, onDismiss, parentId = "root", parentPath = "root") {
   if (!children || !Array.isArray(children) || children.length === 0) {
     return null;
   }
   return children.map((child, index) => {
     if (!child || typeof child !== "object") return null;
     const childId = `${parentId}-${index}`;
+    const childPath = parentPath === "root" ? `root.children.${index}` : `${parentPath}.children.${index}`;
     const childContent = {
       id: childId,
       pattern: child.type,
@@ -45380,7 +45581,8 @@ function renderPatternChildren(children, onDismiss, parentId = "root") {
       SlotContentRenderer,
       {
         content: childContent,
-        onDismiss
+        onDismiss,
+        patternPath: childPath
       },
       childId
     );
@@ -45412,7 +45614,8 @@ function renderPatternProps(props, onDismiss) {
 }
 function SlotContentRenderer({
   content,
-  onDismiss
+  onDismiss,
+  patternPath
 }) {
   const entityProp = content.props.entity;
   const entityType = typeof entityProp === "string" ? entityProp : "";
@@ -45421,7 +45624,8 @@ function SlotContentRenderer({
   if (PatternComponent) {
     const childrenConfig = content.props.children;
     const hasChildren = PATTERNS_WITH_CHILDREN.has(content.pattern) || Array.isArray(childrenConfig) && childrenConfig.length > 0;
-    const renderedChildren = hasChildren ? renderPatternChildren(childrenConfig, onDismiss, content.id) : void 0;
+    const myPath = patternPath ?? "root";
+    const renderedChildren = hasChildren ? renderPatternChildren(childrenConfig, onDismiss, content.id, myPath) : void 0;
     const { children: _childrenConfig, ...restProps } = content.props;
     const renderedProps = renderPatternProps(restProps, onDismiss);
     let finalProps;
@@ -45437,6 +45641,7 @@ function SlotContentRenderer({
     } else {
       finalProps = renderedProps;
     }
+    const acceptsChildren = PATTERNS_WITH_CHILDREN.has(content.pattern);
     return /* @__PURE__ */ jsx(
       Box,
       {
@@ -45445,6 +45650,9 @@ function SlotContentRenderer({
         "data-id": content.id,
         "data-node-id": content.nodeId,
         "data-source-trait": content.sourceTrait,
+        "data-pattern-path": myPath,
+        "data-pattern-type": content.pattern,
+        "data-accepts-children": acceptsChildren ? "true" : void 0,
         children: /* @__PURE__ */ jsx(PatternComponent, { ...finalProps, children: renderedChildren })
       }
     );
@@ -45797,6 +46005,13 @@ createContext(null);
 
 // lib/api-client.ts
 typeof process !== "undefined" && process.env?.VITE_API_URL ? process.env.VITE_API_URL : "/api";
+
+// hooks/useDraggable.ts
+init_useEventBus();
+var ALMADAR_DND_MIME = "application/x-almadar-dnd";
+
+// hooks/useDropZone.ts
+init_useEventBus();
 typeof process !== "undefined" && process.env?.VITE_API_URL ? process.env.VITE_API_URL : "http://localhost:3000";
 
 // runtime/createClientEffectHandlers.ts
@@ -45844,13 +46059,13 @@ function EntitySchemaProvider({
     }
     return map;
   }, [entities]);
-  const contextValue = useMemo(
+  const contextValue2 = useMemo(
     () => ({
       entities: entitiesMap
     }),
     [entitiesMap]
   );
-  return /* @__PURE__ */ jsx(EntitySchemaContext.Provider, { value: contextValue, children });
+  return /* @__PURE__ */ jsx(EntitySchemaContext.Provider, { value: contextValue2, children });
 }
 function useEntitySchema() {
   const context = useContext(EntitySchemaContext);
@@ -46449,7 +46664,7 @@ function TraitInitializer({ traits: traits2, orbitalNames, onNavigate }) {
       if (responseData) {
         for (const [entityType, records] of Object.entries(responseData)) {
           if (Array.isArray(records)) {
-            entityStore.advance(entityType, records);
+            entityStore.setAll(entityType, records);
           }
         }
       }
@@ -46508,7 +46723,7 @@ function TraitInitializer({ traits: traits2, orbitalNames, onNavigate }) {
         if (initResponseData) {
           for (const [entityType, records] of Object.entries(initResponseData)) {
             if (Array.isArray(records)) {
-              entityStore.advance(entityType, records);
+              entityStore.setAll(entityType, records);
             }
           }
         }
@@ -46557,7 +46772,7 @@ function SchemaRunner({ schema, serverUrl, mockData, pageName, onNavigate }) {
     if (!serverUrl && mockData) {
       for (const [entityType, records] of Object.entries(mockData)) {
         if (Array.isArray(records)) {
-          entityStore.advance(entityType, records);
+          entityStore.setAll(entityType, records);
         }
       }
     }
@@ -46638,6 +46853,9 @@ function OrbPreview({
   );
 }
 OrbPreview.displayName = "OrbPreview";
+
+// components/molecules/avl/OrbPreviewNode.tsx
+init_useEventBus();
 var ScreenSizeContext = createContext("tablet");
 var PatternSelectionContext = createContext({ selected: null, select: () => {
 } });
@@ -46665,12 +46883,12 @@ function eventHandleStyle(source) {
   };
 }
 function buildOrbitalSchema(fullSchema, orbitalName) {
-  const orbital = fullSchema.orbitals?.find((o) => o.name === orbitalName);
+  const orbital = (fullSchema.orbitals ?? []).find((o) => o.name === orbitalName);
   if (!orbital) return fullSchema;
   return { ...fullSchema, name: `${fullSchema.name}__${orbitalName}`, orbitals: [orbital] };
 }
 function buildTransitionSchema(fullSchema, orbitalName, traitName, transitionEvent, fromState, toState) {
-  const orbital = fullSchema.orbitals?.find((o) => o.name === orbitalName);
+  const orbital = (fullSchema.orbitals ?? []).find((o) => o.name === orbitalName);
   if (!orbital) return fullSchema;
   const clonedOrbital = JSON.parse(JSON.stringify(orbital));
   const traits2 = clonedOrbital.traits ?? [];
@@ -46703,7 +46921,9 @@ function buildTransitionSchema(fullSchema, orbitalName, traitName, transitionEve
   }
   const targetTrait = traits2.find((t) => {
     if (typeof t === "string") return t === traitName;
-    return t.name === traitName;
+    if ("name" in t) return t.name === traitName;
+    if ("ref" in t) return t.ref === traitName;
+    return false;
   });
   if (targetTrait) {
     clonedOrbital.traits = [targetTrait];
@@ -46720,6 +46940,21 @@ var SELECTION_STYLES = `
     outline: 2px solid var(--color-primary);
     outline-offset: 1px;
   }
+  .orb-preview-live.drag-active [data-accepts-children="true"] {
+    outline: 2px dashed var(--color-primary);
+    outline-offset: -2px;
+    transition: outline-color 0.15s, background-color 0.15s;
+  }
+  .orb-preview-live.drag-active [data-accepts-children="true"].drag-hover {
+    outline-color: var(--color-primary);
+    background-color: color-mix(in srgb, var(--color-primary) 5%, transparent);
+  }
+  .orb-preview-live .drop-indicator {
+    height: 2px;
+    background: var(--color-primary);
+    border-radius: 1px;
+    pointer-events: none;
+  }
 `;
 var OrbPreviewNodeInner = (props) => {
   const data = props.data;
@@ -46779,6 +47014,87 @@ var OrbPreviewNodeInner = (props) => {
       select(null);
     }
   }, [data, select]);
+  const eventBus = useEventBus();
+  const [dragActive, setDragActive] = useState(false);
+  useEffect(() => {
+    const unsub1 = eventBus.on("UI:DRAG_START", (e) => {
+      const kind = e.payload?.kind;
+      if (kind === "pattern") setDragActive(true);
+    });
+    const unsub2 = eventBus.on("UI:DRAG_END", () => setDragActive(false));
+    return () => {
+      unsub1();
+      unsub2();
+    };
+  }, [eventBus]);
+  const handlePreviewDrop = useCallback((e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setDragActive(false);
+    contentRef.current?.querySelectorAll(".drag-hover, .drop-indicator").forEach((el2) => {
+      el2.classList.remove("drag-hover");
+      if (el2.classList.contains("drop-indicator")) el2.remove();
+    });
+    const raw = e.dataTransfer.getData(ALMADAR_DND_MIME);
+    if (!raw) return;
+    let payload;
+    try {
+      payload = JSON.parse(raw);
+    } catch {
+      return;
+    }
+    if (payload.kind !== "pattern") return;
+    let el = e.target;
+    while (el && el.dataset.acceptsChildren !== "true") {
+      el = el.parentElement;
+      if (!el || el === contentRef.current) break;
+    }
+    const containerPath = el?.dataset?.patternPath;
+    if (!containerPath) {
+      eventBus.emit("UI:PATTERN_INSERT", {
+        parentPath: "root",
+        patternType: payload.data.type,
+        index: 0
+      });
+      return;
+    }
+    const pathChildren = el.querySelectorAll(":scope > [data-pattern-path]");
+    let insertIndex = pathChildren.length;
+    for (let i = 0; i < pathChildren.length; i++) {
+      const rect = pathChildren[i].getBoundingClientRect();
+      const style = el.firstElementChild ? getComputedStyle(el.firstElementChild) : null;
+      const isVertical = style?.flexDirection !== "row";
+      const mid = isVertical ? rect.top + rect.height / 2 : rect.left + rect.width / 2;
+      const cursor = isVertical ? e.clientY : e.clientX;
+      if (cursor < mid) {
+        insertIndex = i;
+        break;
+      }
+    }
+    eventBus.emit("UI:PATTERN_INSERT", {
+      parentPath: containerPath,
+      patternType: payload.data.type,
+      index: insertIndex
+    });
+  }, [eventBus]);
+  const handlePreviewDragOver = useCallback((e) => {
+    if (!dragActive) return;
+    e.preventDefault();
+    e.stopPropagation();
+    e.dataTransfer.dropEffect = "copy";
+    let el = e.target;
+    while (el && el.dataset.acceptsChildren !== "true") {
+      el = el.parentElement;
+      if (!el || el === contentRef.current) break;
+    }
+    contentRef.current?.querySelectorAll(".drag-hover").forEach((c) => c.classList.remove("drag-hover"));
+    if (el?.dataset?.acceptsChildren === "true") {
+      el.classList.add("drag-hover");
+    }
+  }, [dragActive]);
+  const handlePreviewDragLeave = useCallback((e) => {
+    contentRef.current?.querySelectorAll(".drag-hover").forEach((c) => c.classList.remove("drag-hover"));
+  }, []);
   return /* @__PURE__ */ jsxs(
     Box,
     {
@@ -46823,8 +47139,11 @@ var OrbPreviewNodeInner = (props) => {
           Box,
           {
             ref: contentRef,
-            className: "orb-preview-live nodrag",
+            className: `orb-preview-live nodrag${dragActive ? " drag-active" : ""}`,
             onClick: handleContentClick,
+            onDrop: handlePreviewDrop,
+            onDragOver: handlePreviewDragOver,
+            onDragLeave: handlePreviewDragLeave,
             children: orbitalSchema ? /* @__PURE__ */ jsx(Box, { style: { minHeight: preset.minHeight }, children: /* @__PURE__ */ jsx(
               OrbPreview,
               {
@@ -46943,7 +47262,9 @@ init_Avl3DExprTree();
 // components/organisms/avl/OrbInspector.tsx
 init_Box();
 init_Typography();
+init_Stack();
 init_types();
+init_useEventBus();
 function formatExpression(expr) {
   if (!expr) return "";
   if (typeof expr === "string") return expr;
@@ -46978,7 +47299,7 @@ var FIELD_TYPE_MAP = {
   array: "array"
 };
 function findEntity(schema, orbitalName) {
-  const orbital = schema.orbitals?.find((o) => o.name === orbitalName);
+  const orbital = (schema.orbitals ?? []).find((o) => o.name === orbitalName);
   if (!orbital || typeof orbital.entity === "string") return null;
   const e = orbital.entity;
   const fields = (e.fields ?? []).map((f3) => ({
@@ -46989,7 +47310,7 @@ function findEntity(schema, orbitalName) {
   return { name: e.name ?? orbitalName, persistence: e.persistence ?? "runtime", fields };
 }
 function findTransition(schema, orbitalName, traitName, event) {
-  const orbital = schema.orbitals?.find((o) => o.name === orbitalName);
+  const orbital = (schema.orbitals ?? []).find((o) => o.name === orbitalName);
   if (!orbital) return null;
   const traits2 = orbital.traits ?? [];
   const trait = traits2.find((t) => typeof t !== "string" && t.name === traitName);
@@ -46999,16 +47320,39 @@ function findTransition(schema, orbitalName, traitName, event) {
   return sm.transitions?.find((t) => t.event === event) ?? null;
 }
 function findTraits(schema, orbitalName) {
-  const orbital = schema.orbitals?.find((o) => o.name === orbitalName);
+  const orbital = (schema.orbitals ?? []).find((o) => o.name === orbitalName);
   if (!orbital) return [];
   return (orbital.traits ?? []).filter((t) => typeof t !== "string").map((t) => ({
     name: t.name,
     stateCount: t.stateMachine?.states?.length ?? 0
   }));
 }
+function findPatternInTree(root, path) {
+  if (!path || path === "root") return root;
+  const parts = path.split(".");
+  let current = root;
+  for (const part of parts) {
+    if (current === null || current === void 0 || typeof current !== "object") return null;
+    const record = current;
+    if (part === "children" && Array.isArray(record.children)) {
+      current = record.children;
+    } else if (Array.isArray(current)) {
+      const idx = parseInt(part, 10);
+      if (isNaN(idx) || idx < 0 || idx >= current.length) return null;
+      current = current[idx];
+    } else {
+      current = record[part];
+    }
+  }
+  return typeof current === "object" && current !== null ? current : null;
+}
+var FIELD_TYPE_OPTIONS = FieldTypeSchema.options.map((v) => ({ value: v, label: v }));
+var EFFECT_TYPE_OPTIONS = Object.keys(EFFECT_TYPE_TO_CATEGORY).map((v) => ({ value: v, label: v }));
 function OrbInspector({ node, schema, editable = false, onSchemaChange, onClose }) {
   const { selected: selectedPattern } = useContext(PatternSelectionContext);
   const [activeTab, setActiveTab] = useState("inspector");
+  const eventBus = useEventBus();
+  const { t } = useTranslate();
   const orbitalName = node.orbitalName ?? "";
   const traitName = node.traitName ?? "";
   const transitionEvent = node.transitionEvent ?? "";
@@ -47028,25 +47372,56 @@ function OrbInspector({ node, schema, editable = false, onSchemaChange, onClose
     return findTransition(schema, orbitalName, traitName, transitionEvent);
   }, [schema, orbitalName, traitName, transitionEvent]);
   const traits2 = useMemo(() => findTraits(schema, orbitalName), [schema, orbitalName]);
+  const patternConfig = useMemo(() => {
+    if (!selectedPattern || !transition) return null;
+    const patternId = selectedPattern.patternId ?? "root";
+    for (const eff of transition.effects ?? []) {
+      if (Array.isArray(eff) && eff[0] === "render-ui" && eff[2]) {
+        const found = findPatternInTree(eff[2], patternId);
+        if (found) return found;
+      }
+    }
+    return null;
+  }, [selectedPattern, transition]);
   const orbCode = useMemo(() => {
-    const orbital = schema.orbitals?.find((o) => o.name === orbitalName);
+    const orbital = (schema.orbitals ?? []).find((o) => o.name === orbitalName);
     if (!orbital) return "{}";
     if (isExpanded && traitName) {
-      const traits3 = orbital.traits ?? [];
-      const trait = traits3.find((t) => typeof t !== "string" && t.name === traitName);
+      const traitList = orbital.traits ?? [];
+      const trait = traitList.find((tr) => typeof tr !== "string" && tr.name === traitName);
       if (trait && typeof trait !== "string" && trait.stateMachine) {
         if (transitionEvent) {
-          const t = trait.stateMachine.transitions?.find((tx) => tx.event === transitionEvent);
-          if (t) return JSON.stringify(t, null, 2);
+          const tx = trait.stateMachine.transitions?.find((txn) => txn.event === transitionEvent);
+          if (tx) return JSON.stringify(tx, null, 2);
         }
         return JSON.stringify({ name: trait.name, stateMachine: trait.stateMachine }, null, 2);
       }
     }
     return JSON.stringify(orbital, null, 2);
   }, [schema, orbitalName, traitName, transitionEvent, isExpanded]);
-  const handlePropChange = useCallback((prop, value) => {
-    if (!editable || !onSchemaChange) return;
-  }, [editable, onSchemaChange]);
+  const handlePropChange = useCallback((propName, value) => {
+    if (!editable) return;
+    eventBus.emit("UI:PROP_CHANGE", { propName, value });
+  }, [editable, eventBus]);
+  const handleAddField = useCallback(() => {
+    eventBus.emit("UI:ADD_FIELD", {});
+  }, [eventBus]);
+  const handleUpdateField = useCallback((fieldName, updates) => {
+    eventBus.emit("UI:UPDATE_FIELD", { fieldName, updates });
+  }, [eventBus]);
+  const handleRemoveField = useCallback((fieldName) => {
+    eventBus.emit("UI:REMOVE_FIELD", { fieldName });
+  }, [eventBus]);
+  const handleGuardChange = useCallback((guardExpr) => {
+    if (!editable) return;
+    eventBus.emit("UI:GUARD_CHANGE", { guard: guardExpr || null });
+  }, [editable, eventBus]);
+  const handleAddEffect = useCallback((effectType) => {
+    eventBus.emit("UI:ADD_EFFECT", { effectType });
+  }, [eventBus]);
+  const handleRemoveEffect = useCallback((effectIndex) => {
+    eventBus.emit("UI:REMOVE_EFFECT", { effectIndex });
+  }, [eventBus]);
   const headerTitle = selectedPattern ? selectedPattern.patternType : isExpanded ? transitionEvent || "Transition" : orbitalName;
   return /* @__PURE__ */ jsxs(Box, { className: "flex flex-col bg-card border-l border-border h-full", style: { width: 340 }, children: [
     /* @__PURE__ */ jsxs(Box, { className: "shrink-0 border-b border-border", children: [
@@ -47104,48 +47479,98 @@ function OrbInspector({ node, schema, editable = false, onSchemaChange, onClose
       /* ── Inspector Tab ── */
       /* @__PURE__ */ jsxs(Fragment, { children: [
         selectedPattern && patternDef?.propsSchema && /* @__PURE__ */ jsxs(Box, { className: "px-4 py-3 border-b border-border/40", children: [
-          /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-muted-foreground text-[10px] uppercase tracking-wider mb-2", children: "Props" }),
-          /* @__PURE__ */ jsx(Box, { className: "flex flex-col gap-1.5", children: Object.entries(patternDef.propsSchema).slice(0, 8).map(([propName, propSchema]) => {
+          /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-muted-foreground text-[10px] uppercase tracking-wider mb-2", children: t("Props") }),
+          /* @__PURE__ */ jsx(Box, { className: "flex flex-col gap-1.5", children: Object.entries(patternDef.propsSchema).slice(0, 12).map(([propName, propSchema]) => {
             const ps = propSchema;
+            const currentValue = patternConfig ? patternConfig[propName] : void 0;
+            const displayValue = currentValue !== void 0 ? typeof currentValue === "object" ? JSON.stringify(currentValue) : String(currentValue) : "";
             return /* @__PURE__ */ jsxs(Box, { className: "flex items-center gap-2", children: [
               /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-muted-foreground text-[11px] w-20 shrink-0 font-mono", children: propName }),
               editable ? /* @__PURE__ */ jsx(
                 Input,
                 {
+                  defaultValue: displayValue,
                   placeholder: ps.types?.join(" | ") ?? "string",
                   className: "flex-1 text-[11px] h-6",
-                  onChange: (e) => handlePropChange(propName, e.target.value)
+                  onBlur: (e) => handlePropChange(propName, e.target.value)
                 }
               ) : /* @__PURE__ */ jsxs(Typography, { variant: "small", className: "text-[11px] text-muted-foreground", children: [
-                ps.types?.join(" | ") ?? "string",
+                displayValue || (ps.types?.join(" | ") ?? "string"),
                 ps.required ? " *" : ""
               ] })
             ] }, propName);
           }) })
         ] }),
         (selectedPattern && isEntityPattern || !selectedPattern && !isExpanded) && entity && /* @__PURE__ */ jsxs(Box, { className: "px-4 py-3 border-b border-border/40", children: [
-          /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-muted-foreground text-[10px] uppercase tracking-wider mb-2", children: "Entity" }),
+          /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-muted-foreground text-[10px] uppercase tracking-wider mb-2", children: t("Entity") }),
           /* @__PURE__ */ jsxs(Box, { className: "flex items-center gap-2 mb-2", children: [
             /* @__PURE__ */ jsx("svg", { width: 14, height: 14, children: /* @__PURE__ */ jsx("circle", { cx: 7, cy: 7, r: 5, fill: "var(--color-primary)" }) }),
             /* @__PURE__ */ jsx(Typography, { variant: "small", className: "font-semibold text-[12px]", children: entity.name }),
             /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-muted-foreground text-[10px]", children: entity.persistence })
           ] }),
-          /* @__PURE__ */ jsx(Box, { className: "flex flex-col gap-1", children: entity.fields.map((f3) => /* @__PURE__ */ jsxs(Box, { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx(Box, { className: "flex flex-col gap-1", children: entity.fields.map((f3) => /* @__PURE__ */ jsxs(HStack, { gap: "xs", className: "items-center", children: [
             /* @__PURE__ */ jsx("svg", { width: 12, height: 12, children: /* @__PURE__ */ jsx(AvlFieldType, { x: 6, y: 6, kind: FIELD_TYPE_MAP[f3.type] ?? "string", size: 4 }) }),
-            /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-[11px] font-mono flex-1", children: f3.name }),
-            /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-muted-foreground text-[10px]", children: f3.type }),
-            f3.required && /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-primary text-[9px]", children: "req" })
-          ] }, f3.name)) })
+            editable ? /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(
+                Input,
+                {
+                  defaultValue: f3.name,
+                  className: "flex-1 text-[11px] font-mono h-6",
+                  onBlur: (e) => {
+                    if (e.target.value !== f3.name) {
+                      handleUpdateField(f3.name, { name: e.target.value });
+                    }
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Select,
+                {
+                  value: f3.type,
+                  options: FIELD_TYPE_OPTIONS,
+                  onChange: (e) => handleUpdateField(f3.name, { type: e.target.value }),
+                  className: "w-20 text-[10px] h-6"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  variant: "ghost",
+                  size: "sm",
+                  onClick: () => handleRemoveField(f3.name),
+                  className: "shrink-0 p-0.5 h-6 w-6",
+                  children: /* @__PURE__ */ jsx(Icon, { name: "x", size: "xs" })
+                }
+              )
+            ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-[11px] font-mono flex-1", children: f3.name }),
+              /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-muted-foreground text-[10px]", children: f3.type }),
+              f3.required && /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-primary text-[9px]", children: t("req") })
+            ] })
+          ] }, f3.name)) }),
+          editable && /* @__PURE__ */ jsxs(
+            Button,
+            {
+              variant: "ghost",
+              size: "sm",
+              onClick: handleAddField,
+              className: "mt-2 text-[11px] w-full",
+              children: [
+                /* @__PURE__ */ jsx(Icon, { name: "plus", size: "xs", className: "mr-1" }),
+                t("Add Field")
+              ]
+            }
+          )
         ] }),
         !selectedPattern && !isExpanded && traits2.length > 0 && /* @__PURE__ */ jsxs(Box, { className: "px-4 py-3 border-b border-border/40", children: [
           /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-muted-foreground text-[10px] uppercase tracking-wider mb-2", children: "Traits" }),
-          /* @__PURE__ */ jsx(Box, { className: "flex flex-col gap-1", children: traits2.map((t) => /* @__PURE__ */ jsxs(Box, { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-[11px] font-semibold", children: t.name }),
+          /* @__PURE__ */ jsx(Box, { className: "flex flex-col gap-1", children: traits2.map((t2) => /* @__PURE__ */ jsxs(Box, { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-[11px] font-semibold", children: t2.name }),
             /* @__PURE__ */ jsxs(Typography, { variant: "small", className: "text-muted-foreground text-[10px]", children: [
-              t.stateCount,
+              t2.stateCount,
               " states"
             ] })
-          ] }, t.name)) })
+          ] }, t2.name)) })
         ] }),
         isExpanded && fromState && toState && /* @__PURE__ */ jsxs(Box, { className: "px-4 py-3 border-b border-border/40", children: [
           /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-muted-foreground text-[10px] uppercase tracking-wider mb-2", children: "Transition" }),
@@ -47164,19 +47589,22 @@ function OrbInspector({ node, schema, editable = false, onSchemaChange, onClose
           /* @__PURE__ */ jsx("svg", { width: 16, height: 16, children: /* @__PURE__ */ jsx(AvlEvent, { x: 8, y: 8, size: 12 }) }),
           /* @__PURE__ */ jsx(Typography, { variant: "small", className: "font-semibold text-[12px]", children: transitionEvent })
         ] }) }),
-        (transition?.guard ?? guard) && /* @__PURE__ */ jsx(Box, { className: "px-4 py-2 border-b border-border/40", children: /* @__PURE__ */ jsxs(Box, { className: "flex items-center gap-2", children: [
+        (transition?.guard ?? guard ?? editable) && isExpanded && /* @__PURE__ */ jsx(Box, { className: "px-4 py-2 border-b border-border/40", children: /* @__PURE__ */ jsxs(HStack, { gap: "xs", className: "items-center", children: [
           /* @__PURE__ */ jsx("svg", { width: 16, height: 16, children: /* @__PURE__ */ jsx(AvlGuard, { x: 8, y: 8, size: 12 }) }),
           editable ? /* @__PURE__ */ jsx(
             Input,
             {
               defaultValue: formatExpression(transition?.guard ?? guard),
-              className: "flex-1 text-[11px] font-mono h-6"
+              placeholder: t("Guard expression"),
+              className: "flex-1 text-[11px] font-mono h-6",
+              onBlur: (e) => handleGuardChange(e.target.value)
             }
           ) : /* @__PURE__ */ jsx(Typography, { variant: "small", className: "font-mono text-[11px] text-muted-foreground", children: formatExpression(transition?.guard ?? guard) })
         ] }) }),
-        effectTypes.length > 0 && /* @__PURE__ */ jsxs(Box, { className: "px-4 py-3 border-b border-border/40", children: [
+        (effectTypes.length > 0 || editable) && isExpanded && /* @__PURE__ */ jsxs(Box, { className: "px-4 py-3 border-b border-border/40", children: [
           /* @__PURE__ */ jsxs(Typography, { variant: "small", className: "text-muted-foreground text-[10px] uppercase tracking-wider mb-2", children: [
-            "Effects (",
+            t("Effects"),
+            " (",
             effectTypes.length,
             ")"
           ] }),
@@ -47184,15 +47612,26 @@ function OrbInspector({ node, schema, editable = false, onSchemaChange, onClose
             const isKnown = KNOWN_EFFECTS.has(type);
             const category = EFFECT_TYPE_TO_CATEGORY[type];
             const catColor = category ? EFFECT_CATEGORY_COLORS[category] : void 0;
-            return /* @__PURE__ */ jsxs(Box, { className: "flex items-center gap-2", children: [
+            return /* @__PURE__ */ jsxs(HStack, { gap: "xs", className: "items-center", children: [
               /* @__PURE__ */ jsxs(Typography, { variant: "small", className: "text-muted-foreground text-[11px] w-4 text-right shrink-0", children: [
                 i + 1,
                 "."
               ] }),
               isKnown && /* @__PURE__ */ jsx("svg", { width: 16, height: 16, children: /* @__PURE__ */ jsx(AvlEffect, { x: 8, y: 8, effectType: type, size: 6, showBackground: true }) }),
-              /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-[11px]", style: { color: catColor?.color }, children: effectSummary(type) })
+              /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-[11px] flex-1", style: { color: catColor?.color }, children: effectSummary(type) }),
+              editable && /* @__PURE__ */ jsx(
+                Button,
+                {
+                  variant: "ghost",
+                  size: "sm",
+                  onClick: () => handleRemoveEffect(i),
+                  className: "shrink-0 p-0.5 h-6 w-6",
+                  children: /* @__PURE__ */ jsx(Icon, { name: "x", size: "xs" })
+                }
+              )
             ] }, i);
-          }) })
+          }) }),
+          editable && /* @__PURE__ */ jsx(AddEffectButton, { onAdd: handleAddEffect })
         ] }),
         patterns.length > 0 && !selectedPattern && /* @__PURE__ */ jsxs(Box, { className: "px-4 py-3", children: [
           /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-muted-foreground text-[10px] uppercase tracking-wider mb-2", children: "render-ui" }),
@@ -47208,6 +47647,40 @@ function OrbInspector({ node, schema, editable = false, onSchemaChange, onClose
     ) })
   ] });
 }
+function AddEffectButton({ onAdd }) {
+  const [open, setOpen] = useState(false);
+  const { t } = useTranslate();
+  return /* @__PURE__ */ jsxs(Box, { className: "relative mt-2", children: [
+    /* @__PURE__ */ jsxs(
+      Button,
+      {
+        variant: "ghost",
+        size: "sm",
+        onClick: () => setOpen((prev) => !prev),
+        className: "text-[11px] w-full",
+        children: [
+          /* @__PURE__ */ jsx(Icon, { name: "plus", size: "xs", className: "mr-1" }),
+          t("Add Effect")
+        ]
+      }
+    ),
+    open && /* @__PURE__ */ jsx(Box, { className: "absolute z-20 top-full left-0 right-0 mt-1 bg-card border border-border rounded-md shadow-lg overflow-hidden", children: EFFECT_TYPE_OPTIONS.map((opt) => /* @__PURE__ */ jsxs(
+      Box,
+      {
+        className: "px-3 py-1.5 text-[11px] cursor-pointer hover:bg-muted/50 flex items-center gap-2",
+        onClick: () => {
+          onAdd(opt.value);
+          setOpen(false);
+        },
+        children: [
+          KNOWN_EFFECTS.has(opt.value) && /* @__PURE__ */ jsx("svg", { width: 14, height: 14, children: /* @__PURE__ */ jsx(AvlEffect, { x: 7, y: 7, effectType: opt.value, size: 5, showBackground: true }) }),
+          /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-[11px]", children: opt.label })
+        ]
+      },
+      opt.value
+    )) })
+  ] });
+}
 function OrbPatternTree({ config, depth }) {
   if (!config || typeof config !== "object") return null;
   const { type, children, ...props } = config;
@@ -47256,7 +47729,9 @@ function FlowCanvasInner({
   onLevelChange,
   initialOrbital,
   editable,
-  onSchemaChange
+  onSchemaChange,
+  onPatternDelete,
+  onEventWire
 }) {
   const parsedSchema = useMemo(() => {
     if (typeof schemaProp === "string") return JSON.parse(schemaProp);
@@ -47335,8 +47810,15 @@ function FlowCanvasInner({
         setExpandedOrbital(void 0);
         onLevelChange?.("overview");
       }
+    } else if (e.key === "Delete" || e.key === "Backspace") {
+      const target = e.target;
+      if (target.tagName === "INPUT" || target.tagName === "TEXTAREA" || target.isContentEditable) return;
+      if (selectedPattern && selectedPattern.nodeData) {
+        onPatternDelete?.({ patternId: selectedPattern.patternId ?? "", nodeData: selectedPattern.nodeData });
+        setSelectedPattern(null);
+      }
     }
-  }, [level, onLevelChange, selectedNode]);
+  }, [level, onLevelChange, selectedNode, selectedPattern, onPatternDelete]);
   useEffect(() => {
     document.addEventListener("keydown", handleKeyDown);
     return () => document.removeEventListener("keydown", handleKeyDown);
@@ -47351,6 +47833,22 @@ function FlowCanvasInner({
       onLevelChange?.("overview");
     }
   }, [level, onLevelChange, selectedNode]);
+  const handleConnect = useCallback((connection) => {
+    if (!connection.sourceHandle?.startsWith("event-") || !onEventWire) return;
+    const eventName = connection.sourceHandle.replace("event-", "");
+    const sourceNode = nodes.find((n) => n.id === connection.source);
+    const targetNode = nodes.find((n) => n.id === connection.target);
+    if (!sourceNode || !targetNode) return;
+    const srcData = sourceNode.data;
+    const tgtData = targetNode.data;
+    onEventWire({
+      eventName,
+      sourceOrbital: srcData.orbitalName ?? "",
+      targetOrbital: tgtData.orbitalName ?? "",
+      sourceTraitName: srcData.traitName,
+      targetTraitName: tgtData.traitName
+    });
+  }, [nodes, onEventWire]);
   const screenSizeKeys = ["mobile", "tablet", "desktop"];
   return /* @__PURE__ */ jsx(ScreenSizeContext.Provider, { value: screenSize, children: /* @__PURE__ */ jsx(PatternSelectionContext.Provider, { value: patternSelectionValue, children: /* @__PURE__ */ jsxs(
     Box,
@@ -47371,6 +47869,7 @@ function FlowCanvasInner({
               onEdgesChange,
               onNodeDoubleClick: handleNodeDoubleClick,
               onNodeClick: handleNodeClick,
+              onConnect: handleConnect,
               minZoom: 0.1,
               maxZoom: 2,
               fitView: true,