@oeave/bakery3 0.0.0-stage → 0.1.0

package/dist/r3f/index.js

@@ -0,0 +1,592 @@
+'use client';import { createBakery3 } from '../chunk-ARMTTZXZ.js';
+import '../chunk-WBIAFIHV.js';
+import '../chunk-25ZXSVQ3.js';
+import '../chunk-ZEBVAIJJ.js';
+import { mountBakery3Devtools, mountTimelinePanel } from '../chunk-54WJDN5R.js';
+export { Timeline, createTimeline } from '../chunk-CX4WTVGH.js';
+import '../chunk-V3QINEEG.js';
+import '../chunk-APBOWWSV.js';
+import '../chunk-S4AJTLLN.js';
+import { rememberEnvironmentSource } from '../chunk-AF5BIELI.js';
+import '../chunk-TGFNQBKC.js';
+import '../chunk-HQTUFVMM.js';
+import '../chunk-4E5VV4QY.js';
+import '../chunk-W6WQ5UP7.js';
+import '../chunk-6NYR73Y7.js';
+import '../chunk-MD2U6S4N.js';
+import { Bakery3Error } from '../chunk-3G5QL4F4.js';
+export { Bakery3Error, RenderBudgetExceeded } from '../chunk-3G5QL4F4.js';
+import { createContext, useContext, useState, useEffect, useMemo, useRef, useSyncExternalStore, useCallback, Children, isValidElement, cloneElement, version } from 'react';
+import { useThree, context, _roots } from '@react-three/fiber';
+import { jsx, Fragment } from 'react/jsx-runtime';
+
+// src/r3f/store.ts
+var snapshot = null;
+var listeners = /* @__PURE__ */ new Set();
+var publishers = /* @__PURE__ */ new Map();
+function publish(owner, next) {
+  const previous = publishers.get(owner);
+  if (previous && previous.bakery3 === next.bakery3 && previous.renders === next.renders && previous.store === next.store) {
+    return;
+  }
+  publishers.set(owner, next);
+  settle();
+}
+function unpublish(owner) {
+  if (publishers.delete(owner)) settle();
+}
+function settle() {
+  let current = null;
+  for (const entry of publishers.values()) current = entry;
+  if (current === snapshot) return;
+  snapshot = current;
+  for (const listener of listeners) listener();
+}
+function subscribe(listener) {
+  listeners.add(listener);
+  return () => listeners.delete(listener);
+}
+function getSnapshot() {
+  return snapshot;
+}
+function getServerSnapshot() {
+  return null;
+}
+var jobListeners = /* @__PURE__ */ new Set();
+var running = /* @__PURE__ */ new Map();
+function announceJob(job, kind) {
+  running.set(job, kind);
+  for (const listener of jobListeners) listener(job, kind);
+  const done = () => running.delete(job);
+  job.result().then(done, done);
+}
+function subscribeJobs(listener) {
+  jobListeners.add(listener);
+  for (const [job, kind] of running) listener(job, kind);
+  return () => jobListeners.delete(listener);
+}
+
+// src/r3f/canvas.ts
+function findCanvas(inside, roots, caller) {
+  if (inside) return inside;
+  if (roots.size === 1) return [...roots.values()][0].store;
+  const component = caller.startsWith("<");
+  const who = component ? caller : `${caller}()`;
+  if (roots.size === 0) {
+    throw new Bakery3Error({
+      code: "InvalidRequest",
+      message: component ? `${who} found no <Canvas> on the page.` : `${who} was called before a <Canvas> mounted.`,
+      why: "useBakery3() renders the scene in your <Canvas>, and there is none on the page yet.",
+      fix: "Mount the <Canvas> first, or call it from a component inside the <Canvas>.",
+      docs: "https://bakery3.com/docs#your-first-render"
+    });
+  }
+  throw new Bakery3Error({
+    code: "InvalidRequest",
+    message: `${who} cannot tell which of the ${roots.size} canvases on this page to ${component ? "show" : "render"}.`,
+    why: component ? `${caller} with apiKey or token finds your scene on its own only when the page has one <Canvas>.` : "useBakery3({ apiKey }) finds your scene on its own only when the page has one <Canvas>.",
+    fix: component ? `Put <Bakery3Provider apiKey="\u2026"> inside the <Canvas> you want, and mount ${caller.replace(/>$/, " />")} without apiKey or token.` : 'Put <Bakery3Provider apiKey="\u2026"> inside the <Canvas> you want to render, and call useBakery3() without options.',
+    docs: "https://bakery3.com/docs#render-from-several-canvases-or-components"
+  });
+}
+
+// src/r3f/renderState.ts
+var IDLE = Object.freeze({
+  job: null,
+  isRendering: false,
+  progress: 0,
+  previewUrl: void 0,
+  result: null,
+  error: null
+});
+function createRenderTracker(options = {}) {
+  let state = IDLE;
+  let latest = 0;
+  let detach = [];
+  const listeners2 = /* @__PURE__ */ new Set();
+  function set(patch) {
+    state = { ...state, ...patch };
+    for (const listener of listeners2) listener();
+  }
+  return {
+    getState: () => state,
+    subscribe(listener) {
+      listeners2.add(listener);
+      return () => listeners2.delete(listener);
+    },
+    async watch(start, kind = "render") {
+      const mine = ++latest;
+      for (const off of detach) off();
+      detach = [];
+      set({
+        job: null,
+        isRendering: true,
+        progress: 0,
+        previewUrl: void 0,
+        result: null,
+        error: null
+      });
+      let job;
+      try {
+        job = await start();
+      } catch (cause) {
+        if (mine === latest) set({ isRendering: false, error: asError(cause) });
+        throw cause;
+      }
+      if (mine !== latest) return job;
+      set({
+        job,
+        progress: job.progress ?? 0,
+        previewUrl: job.previewUrl
+      });
+      detach = [
+        job.on("progress", ({ percent }) => {
+          if (mine === latest) set({ progress: percent / 100 });
+        }),
+        job.on("preview", ({ url }) => {
+          if (mine === latest) set({ previewUrl: url });
+        })
+      ];
+      options.onJob?.(job, kind);
+      job.result().then(
+        (result) => {
+          if (mine === latest) {
+            set({ isRendering: false, progress: 1, result });
+          }
+        },
+        (cause) => {
+          if (mine === latest)
+            set({ isRendering: false, error: asError(cause) });
+        }
+      );
+      return job;
+    },
+    stop() {
+      latest++;
+      for (const off of detach) off();
+      detach = [];
+      state.job?.stop?.();
+    }
+  };
+}
+function asError(cause) {
+  return cause instanceof Error ? cause : new Error(String(cause));
+}
+var Bakery3Context = createContext(null);
+function Bakery3Provider({
+  children,
+  ...options
+}) {
+  const scene = useThree((state) => state.scene);
+  const camera = useThree((state) => state.camera);
+  const gl = useThree((state) => state.gl);
+  const store = useContext(context);
+  const [renders] = useState(newTracker);
+  const [owner] = useState(() => ({}));
+  const bakery3 = useClient(options);
+  useEffect(() => {
+    bakery3.attach({ scene, camera, renderer: gl });
+  }, [bakery3, scene, camera, gl]);
+  useEffect(() => rememberDreiEnvironment(scene), [scene, scene.environment]);
+  const value = useMemo(
+    () => ({ bakery3, renders, store }),
+    [bakery3, renders, store]
+  );
+  useEffect(() => () => unpublish(owner), [owner]);
+  useEffect(() => () => renders.stop(), [renders]);
+  useEffect(() => {
+    publish(owner, { bakery3, renders, store });
+  }, [owner, bakery3, renders, store]);
+  return /* @__PURE__ */ jsx(Bakery3Context.Provider, { value, children });
+}
+function newTracker() {
+  return createRenderTracker({ onJob: announceJob });
+}
+function useClient(options) {
+  const optionsRef = useRef(options);
+  optionsRef.current = options;
+  const present = options !== void 0;
+  const loose = options ?? {};
+  const { apiKey, baseUrl } = loose;
+  const keyNamed = options !== void 0 && "apiKey" in options;
+  const tokenNamed = options !== void 0 && "token" in options;
+  const hasToken = loose.token !== void 0;
+  const hasFetch = loose.fetch !== void 0;
+  return useMemo(() => {
+    if (!optionsRef.current) return null;
+    const given = optionsRef.current;
+    const { token, apiKey: apiKey2, fetch, ...rest } = given;
+    const auth = {
+      ..."apiKey" in given ? { apiKey: apiKey2 } : {},
+      ..."token" in given ? {
+        token: typeof token === "function" ? () => optionsRef.current.token() : token
+      } : {}
+    };
+    const transport = fetch ? {
+      fetch: ((input, init) => (optionsRef.current?.fetch ?? globalThis.fetch)(input, init))
+    } : {};
+    return createBakery3({
+      ...dropUndefined(rest),
+      ...auth,
+      ...transport
+    });
+  }, [present, apiKey, baseUrl, keyNamed, tokenNamed, hasToken, hasFetch]);
+}
+function dropUndefined(value) {
+  return Object.fromEntries(
+    Object.entries(value).filter(([, entry]) => entry !== void 0)
+  );
+}
+function rememberDreiEnvironment(scene) {
+  const texture = scene.environment;
+  const url = texture?.userData?.url ?? texture?.userData?.src;
+  if (texture && typeof url === "string") {
+    rememberEnvironmentSource(texture, url);
+  }
+}
+function useBakery3(options) {
+  const own = useClient(options);
+  const canvas = useContext(context);
+  const context$1 = useContext(Bakery3Context);
+  const published = useSyncExternalStore(
+    subscribe,
+    getSnapshot,
+    getServerSnapshot
+  );
+  const [ownRenders] = useState(newTracker);
+  useEffect(() => () => ownRenders.stop(), [ownRenders]);
+  const shared = own ? null : context$1 ?? published;
+  const bakery3 = own ?? shared?.bakery3 ?? null;
+  const renders = shared?.renders ?? ownRenders;
+  const sharedStore = shared?.store ?? null;
+  const state = useSyncExternalStore(
+    renders.subscribe,
+    renders.getState,
+    renders.getState
+  );
+  const client = useCallback(
+    (method) => {
+      if (!own) {
+        const found = mounted(bakery3, method);
+        if (sharedStore) rememberDreiEnvironment(sharedStore.getState().scene);
+        return found;
+      }
+      const { scene, camera, gl } = findCanvas(
+        canvas,
+        _roots,
+        method
+      ).getState();
+      rememberDreiEnvironment(scene);
+      own.attach({ scene, camera, renderer: gl });
+      return own;
+    },
+    [own, canvas, bakery3, sharedStore]
+  );
+  const watch = useCallback(
+    (kind, start) => renders.watch(start, kind),
+    [renders]
+  );
+  return useMemo(
+    () => ({
+      bakery3,
+      job: state.job,
+      isRendering: state.isRendering,
+      previewUrl: state.previewUrl,
+      progress: state.progress,
+      result: state.result,
+      error: state.error,
+      ready: bakery3 !== null,
+      check: () => client("check").check(),
+      estimate: async (options2) => client("estimate").estimate(options2),
+      timeline: (options2) => client("timeline").timeline(options2),
+      getRender: async (id) => (own ?? mounted(bakery3, "getRender")).getRender(id),
+      // Both go through `watch` so a video reports progress, previews and
+      // failures through exactly the same state a still does: a component
+      // showing a progress bar should not care which one it is watching.
+      render: ((options2) => options2 && "cameras" in options2 && Array.isArray(options2.cameras) ? client("render").render(options2) : watch(
+        "render",
+        async () => client("render").render(options2)
+      )),
+      renderVariants: async (options2) => client("renderVariants").renderVariants(options2),
+      quoteVariants: async (options2) => client("quoteVariants").quoteVariants(options2),
+      testVariants: async (options2, test) => client("testVariants").testVariants(options2, test),
+      renderVideo: (options2) => watch("video", async () => client("renderVideo").renderVideo(options2))
+    }),
+    [own, bakery3, client, watch, state]
+  );
+}
+function mounted(bakery3, method) {
+  if (bakery3) return bakery3;
+  throw new Bakery3Error({
+    code: "InvalidRequest",
+    message: `${method}() was called before <Bakery3Provider> mounted.`,
+    why: "useBakery3() without options reads the client from the provider, and no provider is mounted on this page yet. It belongs inside <Canvas>, which mounts its children after the first frame.",
+    fix: "Pass your key to the hook, useBakery3({ apiKey }) or useBakery3({ token }), or put <Bakery3Provider> inside <Canvas> and disable the button until `ready` is true.",
+    docs: "https://bakery3.com/docs#render-from-several-canvases-or-components"
+  });
+}
+var warned = /* @__PURE__ */ new Set();
+function Bakery3Material({ web, render }) {
+  const ref = useRef(null);
+  const child = Children.only(web);
+  const element = isValidElement(child) ? child : null;
+  const theirs = element ? refOf(element) : void 0;
+  const merged = useCallback(
+    (material) => {
+      ref.current = material;
+      assignRef(theirs, material);
+    },
+    [theirs]
+  );
+  useEffect(() => {
+    const material = ref.current;
+    if (!material || !material.isMaterial) {
+      const message = "[bakery3] <Bakery3Material> could not reach the web material, so the render will not use the fallback. The web element must be a material element, such as <shaderMaterial>, or a component that forwards its ref to one.\n\nDocs: https://bakery3.com/docs/material-fallbacks";
+      if (!warned.has(message)) {
+        warned.add(message);
+        console.warn(message);
+      }
+      return;
+    }
+    material.userData = material.userData ?? {};
+    material.userData.bakery3 = {
+      ...material.userData.bakery3,
+      fallback: fallbackFromProps(render.props)
+    };
+    return () => {
+      if (material.userData?.bakery3) delete material.userData.bakery3.fallback;
+    };
+  }, [render]);
+  if (!element) return /* @__PURE__ */ jsx(Fragment, { children: web });
+  return cloneElement(element, {
+    ref: merged
+  });
+}
+function refOf(element) {
+  if (Number.parseInt(version, 10) >= 19) {
+    return element.props.ref;
+  }
+  return element.ref ?? void 0;
+}
+function assignRef(target, value) {
+  if (typeof target === "function") target(value);
+  else if (target) target.current = value;
+}
+var FALLBACK_KEYS = [
+  "color",
+  "metalness",
+  "roughness",
+  "clearcoat",
+  "clearcoatRoughness",
+  "transmission",
+  "thickness",
+  "ior",
+  "emissive",
+  "emissiveIntensity",
+  "opacity",
+  "sheen",
+  "sheenColor",
+  "iridescence",
+  "anisotropy"
+];
+function fallbackFromProps(props) {
+  const out = {};
+  for (const key of FALLBACK_KEYS) {
+    if (props[key] !== void 0) out[key] = props[key];
+  }
+  return out;
+}
+var NO_CLIENT_GRACE_MS = 2500;
+var CANVAS_POLL_MS = 500;
+var warned2 = /* @__PURE__ */ new Set();
+function warnOnce(message) {
+  if (warned2.has(message)) return;
+  warned2.add(message);
+  console.warn(`[bakery3] ${message}`);
+}
+function Bakery3Devtools(props) {
+  const inside = useContext(context);
+  const provider = useContext(Bakery3Context);
+  const published = useSyncExternalStore(
+    subscribe,
+    getSnapshot,
+    getServerSnapshot
+  );
+  const shared = provider ?? published;
+  const auth = authOf(props);
+  const orphaned = useOrphaned(auth === void 0 && shared === null);
+  const own = useClient(auth ?? (orphaned ? transportOf(props) : void 0));
+  const canvas = useCanvas(own !== null, inside);
+  const bakery3 = own ?? shared?.bakery3 ?? null;
+  const store = own ? canvas.store : shared?.store ?? null;
+  const latest = useRef(props);
+  latest.current = props;
+  useEffect(() => {
+    if (canvas.error) warnOnce(canvas.error.toDisplayString());
+  }, [canvas.error]);
+  const shape = `${Boolean(props.bakeTransport)}|${Boolean(props.history)}`;
+  useEffect(() => {
+    if (!bakery3 || !store) return;
+    const live = () => store.getState();
+    const panel = mountBakery3Devtools({
+      bakery3: rememberingEnvironment(bakery3, () => live().scene),
+      // Getters: R3F swaps the camera (a resize, a `makeDefault` camera)
+      // without remounting anything, and a remount here is exactly what
+      // would close the panel and revert the bake on screen.
+      get scene() {
+        return live().scene;
+      },
+      get camera() {
+        return live().camera;
+      },
+      get renderer() {
+        return live().gl;
+      },
+      ...latest.current.position ? { position: latest.current.position } : {},
+      ...latest.current.defaultOpen !== void 0 ? { defaultOpen: latest.current.defaultOpen } : {},
+      ...latest.current.defaultTab ? { defaultTab: latest.current.defaultTab } : {},
+      defaultQuality: latest.current.defaultQuality ?? "studio",
+      ...props.timeline ? { timeline: props.timeline } : {},
+      ...latest.current.timelineTargets ? { timelineTargets: latest.current.timelineTargets } : {},
+      ...latest.current.history ? { history: latest.current.history } : {},
+      onPlaybackChange: (active) => latest.current.onPlaybackChange?.(active),
+      ...props.bakeTransport ? {
+        bakeTransport: (spec, assets) => latest.current.bakeTransport(spec, assets)
+      } : {},
+      // Getters, because these two are read when a bake finishes rather than
+      // when the panel mounts: changing either has to take effect without a
+      // remount, and a remount is exactly what would lose the bake it applies
+      // to.
+      get bakeBaseUrl() {
+        return latest.current.bakeBaseUrl;
+      },
+      get muteLightsOnApply() {
+        return latest.current.muteLightsOnApply;
+      }
+    });
+    const untrack = [];
+    const offJobs = subscribeJobs((job, kind) => {
+      untrack.push(
+        panel.trackJob(
+          job,
+          kind === "video" ? "video from your app" : "render from your app"
+        )
+      );
+    });
+    return () => {
+      offJobs();
+      for (const off of untrack) off();
+      panel.dispose();
+    };
+  }, [bakery3, store, shape, props.timeline]);
+  return null;
+}
+function authOf(props) {
+  if (!("apiKey" in props) && !("token" in props)) return void 0;
+  return {
+    ..."apiKey" in props ? { apiKey: props.apiKey } : {},
+    ..."token" in props ? { token: props.token } : {},
+    ...transportOf(props)
+  };
+}
+function transportOf(props) {
+  return {
+    ...props.baseUrl !== void 0 ? { baseUrl: props.baseUrl } : {},
+    ...props.fetch !== void 0 ? { fetch: props.fetch } : {},
+    ...props.defaults !== void 0 ? { defaults: props.defaults } : {}
+  };
+}
+var NOT_YET = { store: null, error: null };
+function useCanvas(enabled, inside) {
+  const [found, setFound] = useState(NOT_YET);
+  useEffect(() => {
+    if (!enabled) {
+      setFound(NOT_YET);
+      return;
+    }
+    const roots = _roots;
+    const look = () => {
+      let next = NOT_YET;
+      if (inside || roots.size > 0) {
+        try {
+          next = {
+            store: findCanvas(inside, roots, "<Bakery3Devtools>"),
+            error: null
+          };
+        } catch (error) {
+          next = { store: null, error };
+        }
+      }
+      setFound(
+        (previous) => previous.store === next.store && previous.error?.message === next.error?.message ? previous : next
+      );
+    };
+    look();
+    if (inside) return;
+    const timer = setInterval(look, CANVAS_POLL_MS);
+    return () => clearInterval(timer);
+  }, [enabled, inside]);
+  return found;
+}
+function useOrphaned(missing) {
+  const [orphaned, setOrphaned] = useState(false);
+  useEffect(() => {
+    if (!missing) {
+      setOrphaned(false);
+      return;
+    }
+    const timer = setTimeout(() => {
+      warnOnce(
+        "<Bakery3Devtools> found no client. Pass apiKey or token to it, or put <Bakery3Provider> inside your <Canvas>.\n\nDocs: https://bakery3.com/docs/devtools#mount-it"
+      );
+      setOrphaned(true);
+    }, NO_CLIENT_GRACE_MS);
+    return () => clearTimeout(timer);
+  }, [missing]);
+  return orphaned;
+}
+function rememberingEnvironment(bakery3, scene) {
+  const remember = () => rememberDreiEnvironment(scene());
+  return {
+    check: (target) => bakery3.check(target),
+    estimate: (options) => bakery3.estimate(options),
+    render: (options) => {
+      remember();
+      return bakery3.render(options);
+    },
+    renderVideo: (options) => {
+      remember();
+      return bakery3.renderVideo(options);
+    },
+    bake: (options) => {
+      remember();
+      return bakery3.bake(options);
+    }
+  };
+}
+function Bakery3Timeline(props) {
+  const panel = useRef(null);
+  const latest = useRef(props);
+  latest.current = props;
+  useEffect(() => {
+    panel.current = mountTimelinePanel({
+      timeline: props.timeline,
+      ...latest.current.targets ? { targets: latest.current.targets } : {},
+      ...latest.current.position ? { position: latest.current.position } : {},
+      ...latest.current.defaultOpen !== void 0 ? { defaultOpen: latest.current.defaultOpen } : {},
+      onPlaybackChange: (active) => latest.current.onPlaybackChange?.(active),
+      ...latest.current.onRenderVideo ? {
+        onRenderVideo: (timeline) => latest.current.onRenderVideo?.(timeline)
+      } : {}
+    });
+    return () => {
+      panel.current?.dispose();
+      panel.current = null;
+    };
+  }, [props.timeline]);
+  return null;
+}
+
+export { Bakery3Devtools, Bakery3Material, Bakery3Provider, Bakery3Timeline, useBakery3 };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map