@neurosquad/card-sdk 1.0.0

package/dist/react.js

@@ -0,0 +1,257 @@
+/*! @neurosquad/card-sdk 1.0.0 | MIT */
+
+// src/react/index.tsx
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  useSyncExternalStore
+} from "react";
+import {
+  connect,
+  createTranslator
+} from "./card-sdk.js";
+import { jsx } from "react/jsx-runtime";
+var CardContext = createContext(null);
+function CardProvider({
+  card,
+  connectOptions,
+  fallback = null,
+  errorFallback,
+  children
+}) {
+  const [state, setState] = useState({
+    card: card ?? null,
+    error: null
+  });
+  const options = useRef(connectOptions);
+  useEffect(() => {
+    if (card) {
+      setState({ card, error: null });
+      return;
+    }
+    let cancelled = false;
+    connect(options.current).then(
+      (connected) => !cancelled && setState({ card: connected, error: null }),
+      (error) => !cancelled && setState({ card: null, error: error instanceof Error ? error : new Error(String(error)) })
+    );
+    return () => {
+      cancelled = true;
+    };
+  }, [card]);
+  const current = card ?? state.card;
+  if (state.error && !current) {
+    return errorFallback ? errorFallback(state.error) : /* @__PURE__ */ jsx("pre", { style: { whiteSpace: "pre-wrap", padding: 12 }, children: state.error.message });
+  }
+  if (!current) return fallback;
+  return /* @__PURE__ */ jsx(CardContext.Provider, { value: current, children });
+}
+function useCard() {
+  const card = useContext(CardContext);
+  if (!card) throw new Error("useCard() must be used inside <CardProvider>");
+  return card;
+}
+function useCardContext() {
+  const card = useCard();
+  return useCardSelector(card, (context) => context);
+}
+function useCardSelector(card, select) {
+  const subscribe = useCallback((onChange) => card.onContextChange(onChange), [card]);
+  const snapshot = useCallback(() => select(card.context), [card, select]);
+  return useSyncExternalStore(subscribe, snapshot, snapshot);
+}
+var selectSettings = (context) => context.settings;
+var selectTheme = (context) => context.theme;
+var selectI18n = (context) => context.i18n;
+var selectVisibility = (context) => context.visibility;
+var selectPeers = (context) => context.peers;
+var selectExpanded = (context) => context.expanded;
+function useSettings() {
+  const card = useCard();
+  const settings = useCardSelector(card, selectSettings);
+  const set = useCallback(
+    async (values) => {
+      await card.settings.set(values);
+    },
+    [card]
+  );
+  return [settings, set];
+}
+function useStorage(key, initial, options = {}) {
+  const card = useCard();
+  const scope = options.scope ?? "instance";
+  const [state, setState] = useState({
+    value: initial,
+    loading: true,
+    error: null
+  });
+  const latest = useRef(state.value);
+  latest.current = state.value;
+  const initialRef = useRef(initial);
+  const writes = useRef(0);
+  useEffect(() => {
+    let cancelled = false;
+    const store = scope === "package" ? card.storage.package : card.storage;
+    const load = () => {
+      const started = writes.current;
+      store.get(key, initialRef.current).then(
+        (value) => {
+          if (!cancelled && writes.current === started)
+            setState({ value, loading: false, error: null });
+        },
+        (error) => {
+          if (!cancelled) setState((s) => ({ ...s, loading: false, error }));
+        }
+      );
+    };
+    load();
+    const off = scope === "package" ? card.storage.onChange((change) => change.key === key && load()) : void 0;
+    return () => {
+      cancelled = true;
+      off?.();
+    };
+  }, [card, key, scope]);
+  const set = useCallback(
+    (next) => {
+      const value = typeof next === "function" ? next(latest.current) : next;
+      latest.current = value;
+      writes.current++;
+      setState((s) => ({ ...s, value, loading: false }));
+      const store = scope === "package" ? card.storage.package : card.storage;
+      store.set(key, value).catch((error) => setState((s) => ({ ...s, error })));
+    },
+    [card, key, scope]
+  );
+  return [state.value, set, { loading: state.loading, error: state.error }];
+}
+function useAgents() {
+  const card = useCard();
+  const [state, setState] = useState({
+    agents: [],
+    loading: true,
+    error: null
+  });
+  const [tick, setTick] = useState(0);
+  useEffect(() => {
+    let cancelled = false;
+    card.agents.list().then(
+      (agents) => !cancelled && setState({ agents, loading: false, error: null }),
+      (error) => !cancelled && setState((s) => ({ ...s, loading: false, error }))
+    );
+    const offChanged = card.agents.onChanged(
+      (agents) => setState({ agents, loading: false, error: null })
+    );
+    const offStatus = card.agents.onStatus(
+      (event) => setState((s) => ({
+        ...s,
+        agents: s.agents.map(
+          (agent) => agent.id === event.agentId ? { ...agent, status: event.status } : agent
+        )
+      }))
+    );
+    return () => {
+      cancelled = true;
+      offChanged();
+      offStatus();
+    };
+  }, [card, tick]);
+  const refresh = useCallback(() => setTick((n) => n + 1), []);
+  return { ...state, refresh };
+}
+function useAgentStatus(agentId) {
+  const { agents } = useAgents();
+  return agentId ? agents.find((agent) => agent.id === agentId)?.status : void 0;
+}
+function usePort(input) {
+  const card = useCard();
+  const [message, setMessage] = useState(void 0);
+  useEffect(
+    () => card.ports.onMessage((_data, event) => setMessage(event), input ? { input } : {}),
+    [card, input]
+  );
+  return { data: message?.data, message };
+}
+function useEmit(output) {
+  const card = useCard();
+  return useCallback((data) => card.ports.emit(output, data), [card, output]);
+}
+function usePeers() {
+  return useCardSelector(useCard(), selectPeers);
+}
+function useTheme() {
+  return useCardSelector(useCard(), selectTheme);
+}
+function useLanguage() {
+  return useCardSelector(useCard(), selectI18n);
+}
+function useVisibility() {
+  return useCardSelector(useCard(), selectVisibility);
+}
+function useExpanded() {
+  return useCardSelector(useCard(), selectExpanded);
+}
+function usePaused() {
+  return useVisibility() !== "visible";
+}
+function useTool(name, handler) {
+  const card = useCard();
+  const ref = useRef(handler);
+  ref.current = handler;
+  useEffect(() => card.tools.handle(name, (args, call) => ref.current(args, call)), [card, name]);
+}
+function usePortRequest(input, handler) {
+  const card = useCard();
+  const ref = useRef(handler);
+  ref.current = handler;
+  useEffect(
+    () => card.ports.onRequest(input, (data, request) => ref.current(data, request)),
+    [card, input]
+  );
+}
+function useCardEvent(event, handler) {
+  const card = useCard();
+  const ref = useRef(handler);
+  ref.current = handler;
+  useEffect(() => card.on(event, (data) => ref.current(data)), [card, event]);
+}
+function useTranslator(catalog) {
+  const card = useCard();
+  const translator = useMemo(() => createTranslator(catalog, card), [catalog, card]);
+  const language = useLanguage().language;
+  useEffect(() => () => translator.dispose(), [translator]);
+  return useMemo(() => {
+    const t = ((key, values) => translator(key, values));
+    return Object.assign(t, {
+      language,
+      locale: translator.locale,
+      setLanguage: translator.setLanguage,
+      onChange: translator.onChange,
+      dispose: translator.dispose
+    });
+  }, [translator, language]);
+}
+export {
+  CardProvider,
+  useAgentStatus,
+  useAgents,
+  useCard,
+  useCardContext,
+  useCardEvent,
+  useEmit,
+  useExpanded,
+  useLanguage,
+  usePaused,
+  usePeers,
+  usePort,
+  usePortRequest,
+  useSettings,
+  useStorage,
+  useTheme,
+  useTool,
+  useTranslator,
+  useVisibility
+};