@sevenfold/setto-client 0.10.1 → 0.11.0

package/dist/chrome.d.ts

@@ -21,6 +21,27 @@ export interface SettoChromeHandshake {
      * 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;
@@ -48,4 +69,9 @@ declare global {
         __settoChromeLoaded__?: boolean;
     }
 }
+/**
+ * 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

@@ -21376,6 +21376,30 @@ class ChromeBoundary extends React.Component {
     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);
@@ -21428,10 +21452,12 @@ function SettoChrome() {
         },
         // `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)
+        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);
@@ -26559,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";
@@ -27161,6 +27189,7 @@ export {
   SettoBlock,
   SettoBlockTree,
   SettoChrome,
+  SettoContext,
   SettoForm,
   SettoIcon,
   SettoImage,