@sevenfold/setto-client 0.10.0 → 0.11.0

package/dist/chrome.d.ts

@@ -6,6 +6,42 @@ export interface SettoChromeHandshake {
     /** The host's React, so the chrome bundle ships no framework of its own. */
     react: typeof React;
     reactDom: typeof ReactDOM;
+    /**
+     * Hand back a component and the host renders it.
+     *
+     * Inverted deliberately. The first cut had the chrome create its own React
+     * root, which cannot work: `createRoot` lives in `react-dom/client`, not
+     * `react-dom`, and React 19 removed `render` altogether — so the bundle
+     * loaded, found neither, and mounted nothing at all.
+     *
+     * Rendering it from here is better than passing `createRoot` across would
+     * have been. The chrome ends up inside the host's own tree, so its hooks are
+     * the host's hooks with no second root to keep in step, and the error
+     * boundary that keeps a mistake off the customer's page lives on this side
+     * where it cannot be forgotten.
+     */
+    mount: (Component: React.ComponentType) => void;
+    /**
+     * The same, for the page at `/setto`.
+     *
+     * A second slot because the dashboard is not an overlay: it belongs in the
+     * host's own route, where the customer navigated to it. Registering nothing
+     * leaves the bundled dashboard in place, which is what keeps a chrome that
+     * fails to load from taking the admin down with it.
+     */
+    mountAdmin: (Component: React.ComponentType) => void;
+    /**
+     * The host's own `useSetto`, callable from the chrome.
+     *
+     * This is what makes the whole arrangement cheap. The chrome renders inside
+     * the provider's tree, so it can simply use the context — supabase, api,
+     * session, sites, the i18n store — rather than having each field copied
+     * across a handshake that could never be extended without a re-pin.
+     *
+     * It is a hook: obey the rules of hooks, and only call it from a component
+     * this file rendered.
+     */
+    useSetto: () => unknown;
     config: {
         siteId: string;
         apiUrl: string;
@@ -33,4 +69,9 @@ declare global {
         __settoChromeLoaded__?: boolean;
     }
 }
-export declare function SettoChrome(): null;
+/**
+ * What the host should render at `/setto`, or null while the chrome has not
+ * offered anything. Callers fall back to their bundled dashboard.
+ */
+export declare function useSettoAdminChrome(): React.ComponentType | null;
+export declare function SettoChrome(): import("react/jsx-runtime").JSX.Element | null;

package/dist/index.d.ts

@@ -22,6 +22,8 @@ export { SettoAnimation } from './SettoAnimation';
 export type { SettoAnimationProps } from './SettoAnimation';
 export { useSectionTheme } from './use-section-theme';
 export { SettoAdminApp } from './admin/App';
+export { SettoContext } from './provider';
+export type { SettoContextValue } from './provider';
 export { SETTO_BASE, adminViewUrl } from './lib/urls';
 export { AuthGate } from './edit-mode/auth-gate';
 export type { SettoConfig, BrandColor, DeploymentRow, SiteRow, ContentFile, PublishFile, PublishResult, } from './types';

package/dist/provider.d.ts

@@ -5,7 +5,7 @@ import { I18nStore } from './lib/i18n-store';
 import { AssetStore } from './lib/asset-store';
 import { ThemeStore } from './lib/theme-store';
 import type { SettoConfig, SiteRow } from './types';
-interface SettoContextValue {
+export interface SettoContextValue {
     config: SettoConfig;
     supabase: SupabaseClient;
     api: SettoApi;
@@ -26,6 +26,18 @@ interface SettoContextValue {
     themeStore: ThemeStore | null;
     assetStore: AssetStore | null;
 }
+/**
+ * Exported for one caller: the chrome bundle.
+ *
+ * The dashboard is compiled into that bundle, so its `useSetto` reads *this*
+ * module's context — a different instance from the one the host provider
+ * fills, which would otherwise throw "must be used within SettoProvider" the
+ * moment it rendered. Handing it the host's value through this provider is
+ * what lets the same components run on either side of the boundary.
+ *
+ * Not part of the public API in any other sense. Use `useSetto`.
+ */
+export declare const SettoContext: import("react").Context<SettoContextValue | null>;
 export interface SettoProviderProps {
     config: SettoConfig;
     children: ReactNode;
@@ -44,4 +56,3 @@ export interface SettoProviderProps {
  */
 export declare function SettoProvider({ config, children }: SettoProviderProps): import("react/jsx-runtime").JSX.Element;
 export declare function useSetto(): SettoContextValue;
-export {};

package/dist/setto-client.js

@@ -21364,8 +21364,45 @@ const CHROME_CONTRACT = 1;
 function chromeUrl(apiUrl) {
   return `${apiUrl.replace(/\/$/, "")}/chrome/v${CHROME_CONTRACT}.js`;
 }
+class ChromeBoundary extends React.Component {
+  state = { dead: false };
+  static getDerivedStateFromError() {
+    return { dead: true };
+  }
+  componentDidCatch(error) {
+    console.warn("[setto] chrome failed, continuing without it", error);
+  }
+  render() {
+    return this.state.dead ? null : this.props.children;
+  }
+}
+const slots = {
+  admin: null,
+  listeners: /* @__PURE__ */ new Set()
+};
+function publishSlot(which, Component) {
+  slots[which] = Component;
+  for (const listener of slots.listeners) {
+    try {
+      listener();
+    } catch {
+    }
+  }
+}
+function useSettoAdminChrome() {
+  const [, force] = useState(0);
+  useEffect(() => {
+    const listener = () => force((n) => n + 1);
+    slots.listeners.add(listener);
+    return () => {
+      slots.listeners.delete(listener);
+    };
+  }, []);
+  return slots.admin;
+}
 function SettoChrome() {
   const setto = useSetto();
+  const [Chrome, setChrome] = useState(null);
   const listeners = useRef(/* @__PURE__ */ new Set());
   const stateRef = useRef(() => ({
     hasSession: false,
@@ -21412,10 +21449,15 @@ function SettoChrome() {
         subscribe: (listener) => {
           listeners.current.add(listener);
           return () => listeners.current.delete(listener);
-        }
+        },
+        // `setChrome(() => C)`: a component is a function, and the updater form
+        // is the only way to put one into state without React calling it.
+        mount: (Component) => setChrome(() => Component),
+        mountAdmin: (Component) => publishSlot("admin", Component),
+        useSetto
       };
       const script = document.createElement("script");
-      script.src = chromeUrl(setto.config.apiUrl);
+      script.src = `${chromeUrl(setto.config.apiUrl)}?site=${encodeURIComponent(setto.config.siteId)}`;
       script.async = true;
       script.onerror = () => void 0;
       document.head.appendChild(script);
@@ -21423,7 +21465,8 @@ function SettoChrome() {
     } catch {
     }
   }, []);
-  return null;
+  if (!Chrome) return null;
+  return /* @__PURE__ */ jsx(ChromeBoundary, { children: /* @__PURE__ */ jsx(Chrome, {}) });
 }
 const SETTO_BASE = "/setto";
 function siteHomeUrl(pathname = "/") {
@@ -26542,6 +26585,8 @@ function depDotStyle(status) {
   };
 }
 function SettoAdminApp() {
+  const Chrome = useSettoAdminChrome();
+  if (Chrome) return /* @__PURE__ */ jsx(Chrome, {});
   return /* @__PURE__ */ jsx(AuthGate, { children: /* @__PURE__ */ jsx(SiteList, {}) });
 }
 const DEPLOYMENTS_VIEW = "deployments";
@@ -27144,6 +27189,7 @@ export {
   SettoBlock,
   SettoBlockTree,
   SettoChrome,
+  SettoContext,
   SettoForm,
   SettoIcon,
   SettoImage,