zebflow 0.7.9

Reactive web automation platform — pipelines, templates, and real-time collaboration in a single binary.
Documentation
import { createContext, useContext, useEffect, useMemo, useState } from "zeb";
import { registerStudioChrome } from "@/pages/project-studio/components/studio-chrome-bridge";

type StudioChromeValue = {
  repoEpoch: number;
  activePanel: string | null;
  setActivePanel: (id: string | null) => void;
  openHeaderPanel: (id: "git-repo" | "session") => void;
  consoleOpen: boolean;
  toggleConsole: () => void;
};

const StudioChromeContext = createContext(null as StudioChromeValue | null);

export function StudioChromeProvider({ children }) {
  const [repoEpoch, setRepoEpoch] = useState(0);
  const [activePanel, setActivePanel] = useState(null as string | null);
  const [consoleOpen, setConsoleOpen] = useState(false);

  useEffect(() => {
    registerStudioChrome({
      touchRepo: () => setRepoEpoch((n) => n + 1),
      setActivePanel,
      openConsole: () => setConsoleOpen(true),
      closeConsole: () => setConsoleOpen(false),
    });
    return () => registerStudioChrome(null);
  }, []);

  const value = useMemo((): StudioChromeValue => {
    return {
      repoEpoch,
      activePanel,
      setActivePanel,
      openHeaderPanel: (id) => setActivePanel(id),
      consoleOpen,
      toggleConsole: () => setConsoleOpen((v) => !v),
    };
  }, [repoEpoch, activePanel, consoleOpen]);

  return <StudioChromeContext.Provider value={value}>{children}</StudioChromeContext.Provider>;
}

export function useStudioChrome(): StudioChromeValue {
  const ctx = useContext(StudioChromeContext);
  if (!ctx) {
    throw new Error("useStudioChrome must be used inside StudioChromeProvider");
  }
  return ctx;
}