@almadar/ui 2.42.0 → 2.43.0

package/dist/runtime/index.js

@@ -1,5 +1,5 @@
 import * as React117 from 'react';
-import React117__default, { createContext, useCallback, useState, useRef, useEffect, useLayoutEffect, lazy, useContext, useMemo, Suspense, useSyncExternalStore, useId } from 'react';
+import React117__default, { createContext, useCallback, useState, useRef, useEffect, useMemo, useLayoutEffect, lazy, useContext, Suspense, useSyncExternalStore, useId } from 'react';
 import { EventBusContext } from '@almadar/ui/providers';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import '@tanstack/react-query';
@@ -201,13 +201,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 });
 }
 createContext(null);
 var queryStores = /* @__PURE__ */ new Map();
@@ -236,27 +236,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,
@@ -714,13 +714,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);
@@ -1453,7 +1453,7 @@ function TraitProvider({
     }
     return map;
   }, [traitBindings]);
-  const contextValue = useMemo(() => {
+  const contextValue2 = useMemo(() => {
     return {
       traits: traitInstances,
       getTrait: (name) => traitInstances.get(name),
@@ -1469,7 +1469,7 @@ function TraitProvider({
       }
     };
   }, [traitInstances]);
-  return /* @__PURE__ */ jsx(TraitContext.Provider, { value: contextValue, children });
+  return /* @__PURE__ */ jsx(TraitContext.Provider, { value: contextValue2, children });
 }
 function useTraitContext() {
   const context = useContext(TraitContext);
@@ -2038,7 +2038,7 @@ var ThemeProvider = ({
     const newMode = resolvedMode === "dark" ? "light" : "dark";
     setMode(newMode);
   }, [resolvedMode, setMode]);
-  const contextValue = useMemo(
+  const contextValue2 = useMemo(
     () => ({
       theme,
       mode,
@@ -2060,7 +2060,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);
@@ -2084,25 +2084,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 r = record;
+  return String(r.id ?? r._id ?? r.key ?? "");
+}
+function materialize(snap) {
+  return snap.ids.map((id) => snap.entities.get(id));
+}
+function notifyListeners3(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 r of records) {
+    const rec = r;
+    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 });
+  notifyListeners3(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);
+  notifyListeners3(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);
+  notifyListeners3(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);
+  notifyListeners3(entityType, prev);
+}
 function getSnapshot3(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;
@@ -2126,15 +2193,21 @@ function useEntityRef(entityType) {
   }, [entityType]);
   return useSyncExternalStore(subscribeToStore, getSnapshotStable, () => []);
 }
-var EntityStoreContext = createContext({
-  advance,
-  getSnapshot: getSnapshot3
-});
+var contextValue = {
+  setAll,
+  upsertOne,
+  addOne,
+  updateOne,
+  removeOne,
+  getSnapshot: getSnapshot3,
+  getById
+};
+var EntityStoreContext = createContext(contextValue);
 function useEntityStore() {
   return useContext(EntityStoreContext);
 }
 function EntityStoreProvider({ children }) {
-  return /* @__PURE__ */ jsx(EntityStoreContext.Provider, { value: { advance, getSnapshot: getSnapshot3 }, children });
+  return /* @__PURE__ */ jsx(EntityStoreContext.Provider, { value: contextValue, children });
 }
 var EventBusContext2 = createContext(null);
 function EventBusProvider({ children, debug: debug2 = false }) {
@@ -2234,7 +2307,7 @@ function EventBusProvider({ children, debug: debug2 = false }) {
       }
     };
   }, [debug2]);
-  const contextValue = useMemo(
+  const contextValue2 = useMemo(
     () => ({
       emit,
       on,
@@ -2247,12 +2320,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(EventBusContext2.Provider, { value: contextValue, children });
+  }, [contextValue2]);
+  return /* @__PURE__ */ jsx(EventBusContext2.Provider, { value: contextValue2, children });
 }
 var iconAliases = {
   "close": LucideIcons.X,
@@ -9824,6 +9897,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 = React117__default.memo(
   ({
     code: rawCode,
@@ -9831,6 +9940,7 @@ var CodeBlock = React117__default.memo(
     showCopyButton = true,
     showLanguageBadge = true,
     maxHeight = "60vh",
+    foldable: foldableProp,
     className
   }) => {
     const code = typeof rawCode === "string" ? rawCode : String(rawCode ?? "");
@@ -9839,8 +9949,114 @@ var CodeBlock = React117__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 r of foldRegions) m.set(r.start, r);
+      return m;
+    }, [foldRegions]);
+    const hiddenLines = useMemo(() => {
+      const h = /* @__PURE__ */ new Set();
+      for (const r of foldRegions) {
+        if (!collapsed.has(r.start)) continue;
+        for (let i = r.start + 1; i <= r.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 () => {
@@ -9871,8 +10087,9 @@ var CodeBlock = React117__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",
@@ -9907,31 +10124,14 @@ var CodeBlock = React117__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";
 function Card2({
@@ -28867,7 +29067,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);
@@ -28898,10 +29098,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,
@@ -32391,13 +32591,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,
@@ -32409,7 +32610,8 @@ function renderPatternChildren(children, onDismiss, parentId = "root") {
       SlotContentRenderer,
       {
         content: childContent,
-        onDismiss
+        onDismiss,
+        patternPath: childPath
       },
       childId
     );
@@ -32441,7 +32643,8 @@ function renderPatternProps(props, onDismiss) {
 }
 function SlotContentRenderer({
   content,
-  onDismiss
+  onDismiss,
+  patternPath
 }) {
   const entityProp = content.props.entity;
   const entityType = typeof entityProp === "string" ? entityProp : "";
@@ -32450,7 +32653,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;
@@ -32466,6 +32670,7 @@ function SlotContentRenderer({
     } else {
       finalProps = renderedProps;
     }
+    const acceptsChildren = PATTERNS_WITH_CHILDREN.has(content.pattern);
     return /* @__PURE__ */ jsx(
       Box,
       {
@@ -32474,6 +32679,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 })
       }
     );
@@ -32913,7 +33121,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);
           }
         }
       }
@@ -32972,7 +33180,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);
             }
           }
         }
@@ -33021,7 +33229,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);
         }
       }
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@almadar/ui",
-  "version": "2.42.0",
+  "version": "2.43.0",
   "description": "React UI components, hooks, and providers for Almadar",
   "type": "module",
   "main": "./dist/components/index.js",