@angelerator/uuics-react/dist/index.mjs

Universal UI Context System - React hooks and components

import { createContext, useState, useRef, useEffect, useCallback, useMemo, useContext } from 'react';
import { UUICSEngine } from '@angelerator/uuics-core';
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';

// src/hooks/useUICS.ts
function useUICS(config) {
  const [context, setContext] = useState(null);
  const [isInitialized, setIsInitialized] = useState(false);
  const engineRef = useRef(null);
  useEffect(() => {
    const engine = new UUICSEngine(config);
    engineRef.current = engine;
    engine.initialize().then(() => {
      setIsInitialized(true);
      const currentContext = engine.getContext();
      if (currentContext) {
        setContext(currentContext);
      }
    });
    const unsubscribe = engine.subscribe((newContext) => {
      setContext(newContext);
    });
    return () => {
      unsubscribe();
      engine.destroy();
      engineRef.current = null;
    };
  }, []);
  const execute = useCallback(async (command) => {
    if (!engineRef.current) {
      return {
        success: false,
        message: "Engine not initialized",
        error: "UUICS engine is not available"
      };
    }
    return engineRef.current.execute(command);
  }, []);
  const executeBatch = useCallback(async (commands) => {
    if (!engineRef.current) {
      return [];
    }
    return engineRef.current.executeBatch(commands);
  }, []);
  const serialize = useCallback((format) => {
    if (!engineRef.current) {
      return "";
    }
    return engineRef.current.serialize(format);
  }, []);
  const scan = useCallback(async () => {
    if (!engineRef.current) {
      return null;
    }
    return engineRef.current.scan();
  }, []);
  return {
    context,
    isInitialized,
    execute,
    executeBatch,
    serialize,
    scan,
    engine: engineRef.current
  };
}
function useUIElement(selector) {
  const { context } = useUICS();
  const element = useMemo(() => {
    if (!context) {
      return null;
    }
    return context.elements.find((el) => el.selector === selector) ?? null;
  }, [context, selector]);
  return element;
}
function useUIElements(type) {
  const { context } = useUICS();
  const elements = useMemo(() => {
    if (!context) {
      return [];
    }
    return context.elements.filter((el) => el.type === type);
  }, [context, type]);
  return elements;
}
var UUICSContext = createContext(null);
function UUICSProvider({ children, config }) {
  const uuics = useUICS(config);
  return /* @__PURE__ */ jsx(UUICSContext.Provider, { value: uuics, children });
}
function useUUICSContext() {
  const context = useContext(UUICSContext);
  if (!context) {
    throw new Error("useUUICSContext must be used within a UUICSProvider");
  }
  return context;
}
function DebugPanel({
  format = "natural",
  className = "",
  style = {}
}) {
  const { context, serialize, isInitialized } = useUUICSContext();
  const [isExpanded, setIsExpanded] = useState(true);
  const [selectedFormat, setSelectedFormat] = useState(format);
  if (!isInitialized) {
    return /* @__PURE__ */ jsxs("div", { className: `uuics-debug-panel loading ${className}`, style, children: [
      /* @__PURE__ */ jsx("div", { className: "uuics-debug-header", children: /* @__PURE__ */ jsx("h3", { children: "UUICS Debug Panel" }) }),
      /* @__PURE__ */ jsx("div", { className: "uuics-debug-content", children: "Initializing..." })
    ] });
  }
  const serializedContext = serialize(selectedFormat);
  return /* @__PURE__ */ jsxs("div", { className: `uuics-debug-panel ${className}`, style, children: [
    /* @__PURE__ */ jsxs("div", { className: "uuics-debug-header", children: [
      /* @__PURE__ */ jsx("h3", { children: "UUICS Debug Panel" }),
      /* @__PURE__ */ jsx("button", { onClick: () => setIsExpanded(!isExpanded), children: isExpanded ? "Collapse" : "Expand" })
    ] }),
    isExpanded && /* @__PURE__ */ jsxs(Fragment, { children: [
      /* @__PURE__ */ jsxs("div", { className: "uuics-debug-controls", children: [
        /* @__PURE__ */ jsxs("label", { children: [
          "Format:",
          /* @__PURE__ */ jsxs(
            "select",
            {
              value: selectedFormat,
              onChange: (e) => setSelectedFormat(e.target.value),
              children: [
                /* @__PURE__ */ jsx("option", { value: "natural", children: "Natural Language" }),
                /* @__PURE__ */ jsx("option", { value: "json", children: "JSON" }),
                /* @__PURE__ */ jsx("option", { value: "openapi", children: "OpenAPI" })
              ]
            }
          )
        ] }),
        context && /* @__PURE__ */ jsxs("div", { className: "uuics-debug-stats", children: [
          /* @__PURE__ */ jsxs("span", { children: [
            "Elements: ",
            context.elements.length
          ] }),
          /* @__PURE__ */ jsxs("span", { children: [
            "Actions: ",
            context.actions.length
          ] })
        ] })
      ] }),
      /* @__PURE__ */ jsx("div", { className: "uuics-debug-content", children: /* @__PURE__ */ jsx("pre", { children: serializedContext }) })
    ] })
  ] });
}

export { DebugPanel, UUICSProvider, useUICS, useUIElement, useUIElements, useUUICSContext };
//# sourceMappingURL=index.mjs.map
//# sourceMappingURL=index.mjs.map