@nulib/clover 0.0.0-stage → 4.0.0-beta.1

package/dist/components/Canvas/FrameAnimation.mjs

@@ -0,0 +1,344 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useState, useRef, useCallback, useMemo } from "react";
+import { useUniqueId } from "../../ui/useUniqueId.mjs";
+import ChoiceMenu from "./ChoiceMenu.mjs";
+import { resolveBody } from "./layout.mjs";
+import { useBarHeight } from "./media/useBarHeight.mjs";
+import { imageSource, resolveThumbnail } from "../../core/thumbnail.mjs";
+import { useOptionalClover } from "../../react/context.mjs";
+import { TransportButton } from "./media/TransportButton.mjs";
+import { useCloverTranslation } from "../../i18n/useCloverTranslation.mjs";
+import { PauseIcon, PlayIcon } from "../../ui/mediaIcons.mjs";
+const HOLD_MS = 50;
+const FRAME_IMAGE = 128;
+function useFrameImages(frames, request) {
+  const [images, setImages] = useState([]);
+  useEffect(() => {
+    let live = true;
+    void Promise.all(
+      frames.map((frame) => {
+        const { body } = frame.annotation;
+        const resolved = resolveBody(Array.isArray(body) ? body[0] : body);
+        const source = resolved && imageSource(resolved.body, resolved.region);
+        return source ? resolveThumbnail(source, FRAME_IMAGE, request) : void 0;
+      })
+    ).then((urls) => live && setImages(urls));
+    return () => {
+      live = false;
+    };
+  }, [frames, request]);
+  return images;
+}
+function useAnimation(frames, key, {
+  autoplay = false,
+  loop = false,
+  isReady,
+  onEnded
+}) {
+  const [frame, setFrame] = useState(0);
+  const [playing, setPlaying] = useState(false);
+  const [repeat, setRepeat] = useState(loop);
+  const ready = useRef(isReady);
+  ready.current = isReady;
+  const ended = useRef(onEnded);
+  ended.current = onEnded;
+  useEffect(() => {
+    setFrame(0);
+    setRepeat(loop);
+    const reduced = typeof matchMedia === "function" && matchMedia("(prefers-reduced-motion: reduce)").matches;
+    setPlaying(autoplay && frames.length > 1 && !reduced);
+  }, [key]);
+  useEffect(() => {
+    if (!playing || frames.length < 2) return;
+    const current = frames[Math.min(frame, frames.length - 1)];
+    const ms = Math.max(40, (current.end - current.start) * 1e3);
+    let timer = setTimeout(function advance() {
+      var _a;
+      const atEnd = frame + 1 >= frames.length;
+      if (atEnd && !repeat) {
+        setPlaying(false);
+        (_a = ended.current) == null ? void 0 : _a.call(ended);
+        return;
+      }
+      const next = atEnd ? 0 : frame + 1;
+      if (ready.current && !ready.current(next)) {
+        timer = setTimeout(advance, HOLD_MS);
+        return;
+      }
+      setFrame(next);
+    }, ms);
+    return () => clearTimeout(timer);
+  }, [playing, frame, frames, repeat]);
+  return { frame, playing, repeat, setFrame, setPlaying, setRepeat };
+}
+function FrameControls({
+  frames,
+  animation,
+  language
+}) {
+  var _a;
+  const { t, langOf } = useCloverTranslation();
+  const { frame, playing, repeat, setFrame, setPlaying, setRepeat } = animation;
+  const last = frames.length - 1;
+  const triggerId = `${useUniqueId().replace(/:/g, "")}-frames`;
+  const menuId = `${triggerId}-menu`;
+  const [open, setOpen] = useState(false);
+  const bar = useRef(null);
+  useBarHeight(bar);
+  const close = useCallback(
+    (restoreFocus) => {
+      var _a2;
+      setOpen(false);
+      if (restoreFocus) (_a2 = document.getElementById(triggerId)) == null ? void 0 : _a2.focus();
+    },
+    [triggerId]
+  );
+  const images = useFrameImages(frames, (_a = useOptionalClover()) == null ? void 0 : _a.clover.request);
+  const group = useMemo(
+    () => ({
+      key: "frame",
+      items: frames.map((f, n) => ({
+        label: f.annotation.label,
+        id: f.annotation.id,
+        image: images[n]
+      }))
+    }),
+    [frames, images]
+  );
+  const position = t("framePosition", {
+    index: frame + 1,
+    total: frames.length
+  });
+  const step = (by) => {
+    const next = Math.min(last, Math.max(0, frame + by));
+    if (next === frame) return;
+    setPlaying(false);
+    setFrame(next);
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "clover-canvas-transport",
+      "data-kind": "frames",
+      "data-testid": "clover-canvas-frames",
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "clover-canvas-transport-seek-area", children: /* @__PURE__ */ jsx(
+          "input",
+          {
+            "aria-label": t("frameSeek"),
+            "aria-valuetext": position,
+            lang: langOf("frameSeek"),
+            className: "clover-canvas-transport-seek",
+            max: last,
+            min: 0,
+            step: 1,
+            type: "range",
+            value: frame,
+            onChange: (event) => {
+              setPlaying(false);
+              setFrame(Number(event.target.value));
+            },
+            style: {
+              "--clover-transport-progress": `${last ? frame / last * 100 : 0}%`
+            }
+          }
+        ) }),
+        /* @__PURE__ */ jsxs("div", { className: "clover-canvas-transport-bar", ref: bar, children: [
+          /* @__PURE__ */ jsx(
+            TransportButton,
+            {
+              words: "framePrevious",
+              disabled: frame === 0,
+              onClick: () => step(-1),
+              children: /* @__PURE__ */ jsx(
+                "svg",
+                {
+                  "aria-hidden": "true",
+                  focusable: "false",
+                  width: "16",
+                  height: "16",
+                  viewBox: "0 0 16 16",
+                  children: /* @__PURE__ */ jsx(
+                    "path",
+                    {
+                      d: "M10 3L5 8l5 5",
+                      fill: "none",
+                      stroke: "currentColor",
+                      strokeWidth: "2",
+                      strokeLinecap: "round",
+                      strokeLinejoin: "round"
+                    }
+                  )
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            TransportButton,
+            {
+              words: playing ? "playerPause" : "playerPlay",
+              button: playing ? "pause" : "play",
+              onClick: () => {
+                if (!playing && frame === last) setFrame(0);
+                setPlaying(!playing);
+              },
+              children: playing ? /* @__PURE__ */ jsx(PauseIcon, {}) : /* @__PURE__ */ jsx(PlayIcon, {})
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            TransportButton,
+            {
+              words: "frameNext",
+              disabled: frame === last,
+              onClick: () => step(1),
+              children: /* @__PURE__ */ jsx(
+                "svg",
+                {
+                  "aria-hidden": "true",
+                  focusable: "false",
+                  width: "16",
+                  height: "16",
+                  viewBox: "0 0 16 16",
+                  children: /* @__PURE__ */ jsx(
+                    "path",
+                    {
+                      d: "M6 3l5 5-5 5",
+                      fill: "none",
+                      stroke: "currentColor",
+                      strokeWidth: "2",
+                      strokeLinecap: "round",
+                      strokeLinejoin: "round"
+                    }
+                  )
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            TransportButton,
+            {
+              words: "frameRepeat",
+              button: "repeat",
+              pressed: repeat,
+              onClick: () => setRepeat(!repeat),
+              children: /* @__PURE__ */ jsx(
+                "svg",
+                {
+                  "aria-hidden": "true",
+                  focusable: "false",
+                  width: "16",
+                  height: "16",
+                  viewBox: "0 0 16 16",
+                  children: /* @__PURE__ */ jsx(
+                    "path",
+                    {
+                      d: "M3 7V6a2 2 0 0 1 2-2h7l-2-2M13 9v1a2 2 0 0 1-2 2H4l2 2",
+                      fill: "none",
+                      stroke: "currentColor",
+                      strokeWidth: "1.75",
+                      strokeLinecap: "round",
+                      strokeLinejoin: "round"
+                    }
+                  )
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsxs("span", { className: "clover-canvas-transport-frames", children: [
+            /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                id: triggerId,
+                className: "clover-canvas-transport-time",
+                "aria-controls": open ? menuId : void 0,
+                "aria-expanded": open,
+                onClick: () => {
+                  if (!open) setPlaying(false);
+                  setOpen(!open);
+                },
+                children: [
+                  /* @__PURE__ */ jsx("span", { "aria-live": "off", lang: langOf("framePosition"), children: position }),
+                  /* @__PURE__ */ jsx(
+                    "svg",
+                    {
+                      "aria-hidden": "true",
+                      focusable: "false",
+                      width: "12",
+                      height: "12",
+                      viewBox: "0 0 12 12",
+                      children: /* @__PURE__ */ jsx(
+                        "path",
+                        {
+                          d: "M3 7.5l3-3 3 3",
+                          fill: "none",
+                          stroke: "currentColor",
+                          strokeWidth: "1.5",
+                          strokeLinecap: "round",
+                          strokeLinejoin: "round"
+                        }
+                      )
+                    }
+                  )
+                ]
+              }
+            ),
+            open && /* @__PURE__ */ jsx(
+              ChoiceMenu,
+              {
+                id: menuId,
+                triggerId,
+                label: t("frameSeek"),
+                labelLang: langOf("frameSeek"),
+                language,
+                choices: [group],
+                selections: { frame },
+                onSelect: (_key, index) => {
+                  setPlaying(false);
+                  setFrame(index);
+                },
+                onClose: close
+              }
+            )
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+function FrameAnimation({
+  renderer,
+  frames,
+  byFrame,
+  animationKey,
+  sceneVersion,
+  autoplay,
+  loop,
+  onEnded,
+  language
+}) {
+  const animation = useAnimation(frames, animationKey, {
+    autoplay,
+    loop,
+    onEnded,
+    isReady: (frame) => (byFrame[frame] ?? []).every((id) => renderer.isReady(id))
+  });
+  useEffect(() => {
+    const shown = new Set(byFrame[animation.frame] ?? []);
+    renderer.setHidden(byFrame.flat().filter((id) => !shown.has(id)));
+  }, [renderer, byFrame, animation.frame, sceneVersion]);
+  return /* @__PURE__ */ jsx("div", { className: "clover-canvas-media", "data-kind": "frames", children: /* @__PURE__ */ jsx(
+    FrameControls,
+    {
+      frames,
+      animation,
+      language
+    }
+  ) });
+}
+export {
+  FrameControls,
+  FrameAnimation as default,
+  useAnimation
+};

package/dist/components/Canvas/LoadedCanvas.mjs

@@ -0,0 +1,177 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useState, useEffect, useRef, useCallback } from "react";
+import CanvasView from "./CanvasView.mjs";
+import { applyTarget, useRangeChapters } from "./fromManifest.mjs";
+import { paintedMedia } from "./layout.mjs";
+import { CanvasPending } from "../Body/Pending.mjs";
+import { BodyAlert } from "../Body/BodyAlert.mjs";
+import { loadAnnotationSets } from "../../core/annotation-collection.mjs";
+import { readPage } from "../../core/annotation-sets.mjs";
+import { loadContent } from "../../core/load.mjs";
+import { useLoaded } from "../../hooks/useLoaded.mjs";
+const loadRanges = () => import("../../core/ranges.mjs");
+function LoadedCanvas({
+  iiifContent,
+  onAnnotationLink,
+  onReady,
+  onMediaElement,
+  placeholder = true,
+  of,
+  ...props
+}) {
+  var _a, _b, _c, _d;
+  const [view, setView] = useState({ state: "loading" });
+  const request = (_a = props.options) == null ? void 0 : _a.request;
+  const key = typeof iiifContent === "string" ? iiifContent : String((iiifContent == null ? void 0 : iiifContent.id) ?? "");
+  const [followed, setFollowed] = useState(null);
+  const link = (followed == null ? void 0 : followed.key) === key ? followed : null;
+  useEffect(() => {
+    let live = true;
+    setView(
+      (current) => current.state === "ready" ? { ...current, next: true } : { state: "loading" }
+    );
+    (async () => {
+      var _a2;
+      const content = await loadContent((link == null ? void 0 : link.manifestId) ?? iiifContent, {
+        request
+      });
+      const canvases = (content.manifest.items ?? []).filter(
+        (each) => of ? each.type === of : each.type !== "Scene"
+      );
+      const wanted = (link == null ? void 0 : link.canvasId) ?? ((_a2 = content.target) == null ? void 0 : _a2.canvasId);
+      const canvas = canvases.find((each) => each.id === wanted) ?? canvases[0];
+      if (!canvas) throw new Error(`It has no ${of ?? "Canvas"} to show.`);
+      if (live) setView({ state: "ready", content, canvas });
+    })().catch((error) => {
+      if (live)
+        setView({
+          state: "error",
+          error: error instanceof Error ? error : new Error(String(error))
+        });
+    });
+    return () => {
+      live = false;
+    };
+  }, [key, link == null ? void 0 : link.manifestId, link == null ? void 0 : link.canvasId, request, of]);
+  const ready = view.state === "ready" ? view : null;
+  const [annotations, setAnnotations] = useState([]);
+  const given = Boolean(props.annotations);
+  useEffect(() => {
+    setAnnotations((current) => current.length ? [] : current);
+    if (!ready || given) return;
+    let live = true;
+    annotationsOf(ready.canvas, ready.content, request).then((found) => {
+      if (live && found.length) setAnnotations(found);
+    }).catch(() => void 0);
+    return () => {
+      live = false;
+    };
+  }, [ready == null ? void 0 : ready.canvas, ready == null ? void 0 : ready.content, request, given]);
+  const follow = (target) => {
+    var _a2;
+    if (!ready) return;
+    const { manifest } = ready.content;
+    const here = (_a2 = manifest.items) == null ? void 0 : _a2.find(
+      (canvas) => canvas.id === target.canvasId
+    );
+    if (here) setView({ ...ready, canvas: here });
+    else if (target.manifestId && target.manifestId !== manifest.id)
+      setFollowed({ ...target, key, manifestId: target.manifestId });
+  };
+  const linked = ((_b = ready == null ? void 0 : ready.content.target) == null ? void 0 : _b.canvasId) === (ready == null ? void 0 : ready.canvas.id) && Boolean(
+    ((_c = ready == null ? void 0 : ready.content.target) == null ? void 0 : _c.region) || ((_d = ready == null ? void 0 : ready.content.target) == null ? void 0 : _d.time) !== void 0
+  );
+  const pending = useRef(null);
+  const handle = useRef(null);
+  const media = useRef(null);
+  const shown = useRef(null);
+  shown.current = (ready == null ? void 0 : ready.canvas) ?? null;
+  const apply = useCallback(() => {
+    const target = pending.current;
+    if (!target || !shown.current) return;
+    const hasMedia = paintedMedia(shown.current).length > 0;
+    if (applyTarget(target, handle.current, media.current, hasMedia))
+      pending.current = null;
+  }, []);
+  useEffect(() => {
+    pending.current = linked ? (ready == null ? void 0 : ready.content.target) ?? null : null;
+    apply();
+  }, [ready == null ? void 0 : ready.content, ready == null ? void 0 : ready.canvas, linked, apply]);
+  const handleReady = useCallback(
+    (ready2) => {
+      handle.current = ready2;
+      ready2.on("change", apply);
+      apply();
+      onReady == null ? void 0 : onReady(ready2);
+    },
+    [apply, onReady]
+  );
+  const handleMediaElement = useCallback(
+    (element) => {
+      media.current = element;
+      if (element) apply();
+      onMediaElement == null ? void 0 : onMediaElement(element);
+    },
+    [apply, onMediaElement]
+  );
+  const playing = ready && paintedMedia(ready.canvas).length ? ready.canvas : void 0;
+  const ranges = useLoaded(loadRanges, Boolean(playing));
+  const chapters = useRangeChapters(
+    ready == null ? void 0 : ready.content.manifest,
+    playing,
+    props.language,
+    (ranges == null ? void 0 : ranges.chaptersOf) ?? null
+  );
+  if (view.state === "ready")
+    return /* @__PURE__ */ jsx(
+      CanvasView,
+      {
+        ...props,
+        manifestId: view.next ? "loading" : view.content.manifest.id,
+        canvases: [view.canvas],
+        label: props.label ?? view.canvas.label ?? view.content.manifest.label,
+        partOf: props.partOf ?? view.content.manifest.label,
+        annotations: props.annotations ?? annotations,
+        onAnnotationLink: onAnnotationLink ?? follow,
+        chapters: props.chapters ?? chapters,
+        placeholder: placeholder && !linked,
+        onReady: handleReady,
+        onMediaElement: handleMediaElement
+      }
+    );
+  if (view.state === "error")
+    return /* @__PURE__ */ jsx(CanvasPending, { children: /* @__PURE__ */ jsx(BodyAlert, { error: view.error }) });
+  return /* @__PURE__ */ jsx(CanvasPending, {});
+}
+async function annotationsOf(canvas, content, request) {
+  const pages = canvas.annotations ?? [];
+  const embedded = pages.filter((page) => Array.isArray(page == null ? void 0 : page.items));
+  const referenced = pages.filter((page) => !Array.isArray(page == null ? void 0 : page.items));
+  const sets = [
+    ...embedded.map((page, index) => ({
+      id: page.id ?? `annotations-${index}`,
+      label: page.label,
+      entries: readPage(page, page.id ?? `annotations-${index}`, canvas.id)
+    })),
+    ...referenced.length ? await loadAnnotationSets(referenced, { request }) : [],
+    ...content.annotation ? [
+      {
+        id: "content-state",
+        entries: readPage({ items: [content.annotation] }, "content-state")
+      }
+    ] : [],
+    ...content.annotationSets ?? []
+  ];
+  return sets.flatMap(
+    (set) => set.entries.filter((entry) => entry.canvasId === canvas.id).map((entry) => ({
+      annotation: entry.annotation,
+      targetIndex: 0,
+      pageId: set.id,
+      ...set.label ? { pageLabel: set.label } : {}
+    }))
+  );
+}
+export {
+  LoadedCanvas as default
+};

package/dist/components/Canvas/Placeholder.mjs

@@ -0,0 +1,105 @@
+"use client";
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import { Play, Close, OpenViewer, CloseViewer } from "../Body/glyphs.mjs";
+import Button from "../../ui/Button.mjs";
+import { useCloverTranslation } from "../../i18n/useCloverTranslation.mjs";
+import { STILL_SIZE } from "./layout.mjs";
+function useStill(source, request) {
+  const [src, setSrc] = useState(source.src);
+  const key = source.src ?? source.service ?? source.fallback;
+  useEffect(() => {
+    if (source.src) return setSrc(source.src);
+    let live = true;
+    void import("../../core/thumbnail.mjs").then(
+      ({ resolveThumbnail }) => resolveThumbnail(source, STILL_SIZE, request)
+    ).then((url) => live && setSrc(url));
+    return () => {
+      live = false;
+    };
+  }, [key]);
+  return src;
+}
+function Still({
+  still,
+  request,
+  style
+}) {
+  const src = useStill(still.source, request);
+  return src ? (
+    // eslint-disable-next-line @next/next/no-img-element -- This library also renders outside Next.js.
+    /* @__PURE__ */ jsx(
+      "img",
+      {
+        alt: still.alt,
+        lang: still.alt ? still.lang : void 0,
+        src,
+        style
+      }
+    )
+  ) : /* @__PURE__ */ jsx("span", { style });
+}
+const Placeholder = ({
+  instance,
+  stills,
+  vertical,
+  media,
+  active,
+  lingering,
+  onToggle,
+  request
+}) => {
+  const { t, langOf } = useCloverTranslation();
+  const toggleKey = media ? active ? "playerPlay" : "playerClose" : active ? "imageViewerOpen" : "imageViewerClose";
+  const shares = stills.map(
+    ({ width, height }) => vertical ? height / width : width / height
+  );
+  const total = shares.reduce((sum, share) => sum + share, 0);
+  const ratio = vertical ? 1 / total : total;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        className: "clover-canvas-placeholder-toggle",
+        id: `placeholder-${instance}`,
+        label: t(toggleKey),
+        lang: langOf(toggleKey),
+        onClick: onToggle,
+        children: media ? active ? /* @__PURE__ */ jsx(Play, {}) : /* @__PURE__ */ jsx(Close, {}) : active ? /* @__PURE__ */ jsx(OpenViewer, {}) : /* @__PURE__ */ jsx(CloseViewer, {})
+      }
+    ),
+    (active || lingering) && /* @__PURE__ */ jsx(
+      "div",
+      {
+        "aria-hidden": active ? void 0 : true,
+        className: "clover-canvas-placeholder",
+        "data-lingering": !active,
+        "data-media": media,
+        "data-testid": "clover-canvas-placeholder",
+        "data-vertical": vertical,
+        onClick: active ? onToggle : void 0,
+        children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "clover-canvas-placeholder-frame",
+            style: { "--ratio": ratio },
+            children: stills.map((still, index) => /* @__PURE__ */ jsx(
+              Still,
+              {
+                still,
+                request,
+                style: {
+                  [vertical ? "height" : "width"]: `${shares[index] / total * 100}%`
+                }
+              },
+              index
+            ))
+          }
+        )
+      }
+    )
+  ] });
+};
+export {
+  Placeholder as default
+};

package/dist/components/Canvas/fromManifest.mjs

@@ -0,0 +1,44 @@
+"use client";
+import { useMemo } from "react";
+import { localize } from "../../core/value.mjs";
+function useRangeChapters(manifest, playing, language, read) {
+  return useMemo(
+    () => ((read == null ? void 0 : read(manifest ?? null, (playing == null ? void 0 : playing.id) ?? null, playing == null ? void 0 : playing.duration)) ?? []).map((chapter) => {
+      const value = localize(chapter.label, language);
+      return {
+        ...chapter.id ? { id: chapter.id } : {},
+        label: value.text,
+        lang: value.lang,
+        start: chapter.start,
+        end: chapter.end
+      };
+    }),
+    [manifest, playing, language, read]
+  );
+}
+function applyTarget(target, handle, media, hasMedia) {
+  if (target.region) {
+    if (!handle) return false;
+    const { x, y, w, h } = target.region;
+    const placed = handle.fitCanvasRect(
+      target.canvasId,
+      { x, y, width: w, height: h },
+      true
+    );
+    if (!placed) return false;
+  }
+  if (hasMedia && (target.time !== void 0 || target.autoplay)) {
+    if (!media) return false;
+    const play = () => {
+      if (target.time !== void 0) media.currentTime = target.time;
+      if (target.autoplay) media.play().catch(() => void 0);
+    };
+    if (media.readyState >= HTMLMediaElement.HAVE_METADATA) play();
+    else media.addEventListener("loadedmetadata", play, { once: true });
+  }
+  return true;
+}
+export {
+  applyTarget,
+  useRangeChapters
+};

package/dist/components/Canvas/index.mjs

@@ -0,0 +1,19 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { Suspense, lazy } from "react";
+import CanvasView from "./CanvasView.mjs";
+import { rendererSurface } from "./rendererSurface.mjs";
+import { CanvasPending } from "../Body/Pending.mjs";
+import { useOptionalClover } from "../../react/context.mjs";
+const ConnectedCanvas = lazy(() => import("./Connected.mjs"));
+const LoadedCanvas = lazy(() => import("./LoadedCanvas.mjs"));
+const Canvas = (props) => {
+  const root = useOptionalClover();
+  if (props.iiifContent !== void 0 && props.canvases === void 0)
+    return /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(CanvasPending, {}), children: /* @__PURE__ */ jsx(LoadedCanvas, { ...props, surface: rendererSurface }) });
+  const handed = props.canvases !== void 0 || props.body !== void 0 || props.src !== void 0;
+  return root && !handed ? /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(CanvasPending, {}), children: /* @__PURE__ */ jsx(ConnectedCanvas, { ...props, surface: rendererSurface }) }) : /* @__PURE__ */ jsx(CanvasView, { ...props, surface: rendererSurface });
+};
+export {
+  Canvas as default
+};