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

package/dist/templates/gallery/Gallery.mjs

@@ -0,0 +1,62 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import { preloadLightbox, Lightbox } from "../shared/Lightbox.mjs";
+import { titled } from "../../ui/heading.mjs";
+import { useUniqueId } from "../../ui/useUniqueId.mjs";
+import { Root } from "../../components/Root/Root.mjs";
+import { Label } from "../../components/Label/Label.mjs";
+import { Summary } from "../../components/Primitives/Primitives.mjs";
+import { Status } from "../../components/Status/Status.mjs";
+import { Items } from "../../components/Items/Items.mjs";
+const below = (level) => level + 1;
+function Gallery({
+  className,
+  size,
+  headingLevel = 2,
+  style,
+  ...root
+}) {
+  const [open, setOpen] = useState(false);
+  const title = titled(
+    headingLevel,
+    `${useUniqueId().replace(/:/g, "")}-title`
+  );
+  return /* @__PURE__ */ jsxs(
+    Root,
+    {
+      className: ["clover-template-gallery", className].filter(Boolean).join(" "),
+      style: size ? { ...style, "--clover-items-size": size } : style,
+      onPointerOver: preloadLightbox,
+      onFocus: preloadLightbox,
+      ...title.group,
+      ...root,
+      children: [
+        /* @__PURE__ */ jsxs("header", { className: "clover-template-gallery-header", children: [
+          /* @__PURE__ */ jsx(
+            Label,
+            {
+              as: title.as,
+              className: "clover-template-gallery-title",
+              ...title.title
+            }
+          ),
+          /* @__PURE__ */ jsx(Summary, { className: "clover-template-gallery-summary" })
+        ] }),
+        /* @__PURE__ */ jsx(Status, {}),
+        /* @__PURE__ */ jsx(Items, { layout: "grid", onSelect: () => setOpen(true) }),
+        /* @__PURE__ */ jsx(
+          Lightbox,
+          {
+            open,
+            onClose: () => setOpen(false),
+            headingLevel: below(headingLevel)
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  Gallery
+};

package/dist/templates/index.d.mts

@@ -0,0 +1,276 @@
+// Generated by dts-bundle-generator v8.0.1
+
+import * as P4 from '@iiif/parser/presentation-4/types';
+import React from 'react';
+
+export type Presentation4Canvas = P4.Canvas;
+export type Presentation4Scene = P4.Scene;
+export type Presentation4Timeline = P4.Timeline;
+/**
+ * A IIIF resource Clover can show directly, a Manifest's item: a Canvas (`Canvas`), a
+ * Timeline (`Timeline`, sound) or a Scene (`Scene`, 3D).
+ */
+export type Container = Presentation4Canvas | Presentation4Timeline | Presentation4Scene;
+/**
+ * How Clover asks for things: one setting for every request it makes — the IIIF resource,
+ * referenced annotation pages, `info.json`, tiles, captions and HLS segments.
+ *
+ * A `<video>` or `<img>` element cannot send headers, so where Clover must use one (media
+ * without HLS, an image served without CORS) only `credentials` applies.
+ */
+export interface CloverRequest {
+	/** Cookies and HTTP authentication: `"include"` sends them cross-origin. */
+	credentials?: RequestCredentials;
+	/** Extra headers, such as `Authorization`. They force a CORS preflight. */
+	headers?: Record<string, string>;
+	/** Your own `fetch`, to sign, log or proxy requests. */
+	fetch?: typeof fetch;
+}
+/**
+ * Annotations a host adds to what the Manifest carries: an AnnotationPage, an
+ * AnnotationCollection (its pages followed from `first` through `next`), or a list of
+ * either, as URLs or objects. Each page becomes one set.
+ */
+export type AnnotationsInput = string | Record<string, unknown> | unknown[];
+export interface ContentStateOutput {
+	/** The content state annotation. */
+	json: Record<string, unknown>;
+	/** The same, encoded for a URL. */
+	encoded: string;
+}
+/**
+ * Turning whatever a `Root` is handed into a Manifest to show.
+ *
+ * `iiifContent` may be a URL, a IIIF resource object (Presentation 2, 3 or 4), or a content
+ * state (JSON or base64url). The resource may be a Manifest, a Collection (its first
+ * Manifest is shown), a lone Canvas (its `partOf` Manifest, or a Manifest made around
+ * it), or annotations, an AnnotationPage or AnnotationCollection (the Manifest their first
+ * annotation's Canvas is `partOf`, at that Canvas). Everything is fetched once, with the
+ * request settings, and upgraded to Presentation 4.
+ */
+export type IIIFContent = string | Record<string, unknown>;
+/**
+ * One Clover: what a `Root` owns. Framework-free, so it can be tested — and driven —
+ * without React.
+ *
+ * The store holds only what parts render from. Everything that changes per frame (the
+ * viewport) or per tick (media time) goes through channels, so panning or playback
+ * re-renders nothing that has not asked to hear about it.
+ */
+export type CloverStatus = "idle" | "loading" | "ready" | "error";
+/**
+ * Renderers of your own for some views, drawn by `Body` in place of `Canvas`: a 3D
+ * model, a PDF, a map, anything a Canvas paints that Clover does not draw, or draws
+ * differently than you want. The successor to 3.x's `customDisplays`.
+ */
+export interface BodyRendererProps {
+	/** The view's Canvases, in Presentation 4: one, or two for a spread. */
+	canvases: Container[];
+	/**
+	 * The bodies the view's Canvases paint, unwrapped: a `Choice` as its first item, a
+	 * `SpecificResource` as its `source`, Presentation 4's groups as their items.
+	 */
+	bodies: Array<Record<string, any>>;
+	/** `Body`'s children (its controls), to place if the renderer wants them. */
+	children?: React.ReactNode;
+}
+export interface BodyRenderer {
+	/** Draws a view showing one of these Canvases… */
+	canvasId?: string[];
+	/** …or painting a body of one of these formats (`model/gltf-binary`, `application/pdf`)… */
+	format?: string[];
+	/** …or any view this says yes to. */
+	match?: (view: Omit<BodyRendererProps, "children">) => boolean;
+	/**
+	 * What draws it. It renders inside the Root, so Clover's hooks work in it
+	 * (`useActiveCanvas`, `useNavigation`, `useClover`…), as 3.x's `hooks` prop gave.
+	 */
+	component: React.ComponentType<BodyRendererProps>;
+}
+export interface RootProps extends Omit<React.HTMLAttributes<HTMLElement>, "children"> {
+	/**
+	 * What to show: a URL, a IIIF resource (Presentation 2, 3 or 4: a Manifest, Collection
+	 * or Canvas), or a content state (JSON or base64url).
+	 */
+	iiifContent: IIIFContent;
+	/** The Canvas to show, controlled: moving asks `onCanvasChange` to change it. */
+	canvasId?: string;
+	/** The Canvas to start on, uncontrolled. A content state or `start` still wins. */
+	defaultCanvasId?: string;
+	/** The reader moved to a Canvas (the first of the view that shows it). */
+	onCanvasChange?: (canvasId: string) => void;
+	/**
+	 * In a Collection, the member Manifest to show, controlled: choosing another asks
+	 * `onManifestChange` to change it.
+	 */
+	manifestId?: string;
+	/** In a Collection, the member Manifest to open first, uncontrolled. */
+	defaultManifestId?: string;
+	/** In a Collection, the reader moved (or, controlled, asks to move) to a Manifest. */
+	onManifestChange?: (manifestId: string) => void;
+	onStatusChange?: (status: CloverStatus, error: Error | null) => void;
+	/**
+	 * A Content Search query to run once the Manifest is shown, and again whenever it
+	 * changes (3.x's `iiifContentSearchQuery`). The reader can search on from `Search`.
+	 */
+	searchQuery?: string;
+	/** Credentials, headers and `fetch` for every request any part makes. */
+	request?: CloverRequest;
+	/** The language to read IIIF text in. The reader's, by default. */
+	language?: string;
+	/**
+	 * Renderers of your own for some views — by Canvas id, painting format, or a test —
+	 * drawn by every `Body` inside in place of `Canvas` (3.x's `customDisplays`).
+	 */
+	renderers?: BodyRenderer[];
+	/**
+	 * Annotations to show beside the Manifest's own: an AnnotationPage or
+	 * AnnotationCollection (or a list of them), as URLs or objects.
+	 */
+	annotations?: AnnotationsInput;
+	/**
+	 * Whose referenced annotation pages to fetch: the view's as the reader moves (default),
+	 * or every Canvas's at once, for a layout that shows them all.
+	 */
+	annotationPages?: "view" | "all";
+	/**
+	 * Where the reader is, as a IIIF content state, whenever it settles: after a move, a
+	 * pan or zoom, or a pause or seek in media. Debounced, and only when it changed.
+	 */
+	onContentStateChange?: (state: ContentStateOutput) => void;
+	/** The element to render. Default `div`. */
+	as?: React.ElementType;
+	children?: React.ReactNode;
+}
+/**
+ * A scrolling row of thumbnails (`slider`), a column, a wrapping grid, or one item at a
+ * time (`pager`: Previous, Position and Next).
+ */
+export type ItemsLayout = "slider" | "list" | "grid" | "pager";
+/** How the sections are laid out. */
+export type SectionsLayout = "tabs" | "accordion";
+/** How an information panel lays out its sections. */
+export type PanelLayout = SectionsLayout;
+export type DefaultProps = Omit<RootProps, "children"> & {
+	/** The header over the Body: the resource's title and provider. Default `true`. */
+	header?: boolean;
+	/**
+	 * The title's heading level, to fit the outline of the page around the layout (under
+	 * an `h2`, 3). The panel's sections are a level below it, or at it with no header,
+	 * taking the title's place. Default 2.
+	 */
+	headingLevel?: number;
+	/** The information panel beside the Body, with its toggle. Default `true`. */
+	panel?: boolean;
+	/**
+	 * Whether the panel starts open beside the Body. Default `true`. Where it has no room
+	 * there and would slide over the Body, it starts closed.
+	 */
+	defaultPanelOpen?: boolean;
+	/**
+	 * How the information panel lays out its sections: `"accordion"` (the default),
+	 * stacked boxes each opened by its heading, or `"tabs"`.
+	 */
+	panelLayout?: PanelLayout;
+	/** The downloads in the panel's About, as links. Default `true`. */
+	download?: boolean;
+	/** The thumbnails under the Body: a layout, or `false` for none. Default `slider`. */
+	items?: Exclude<ItemsLayout, "pager"> | false;
+	/**
+	 * Where the panel's width is remembered once the reader drags its bar
+	 * (`localStorage`). Default `"clover-template-default"`; `false` forgets it.
+	 */
+	storageKey?: string | false;
+	/**
+	 * Fill the box it sits in: as tall as that box, the Body taking what the header and
+	 * the strip leave, so nothing runs below it. For a box of a set height, the window
+	 * under a page's own header say. Default `false`: the Body is
+	 * `--clover-body-height` tall, and the layout as tall as it needs.
+	 */
+	fill?: boolean;
+};
+/**
+ * The Viewer's own layout, drawn when no `template` is given: Clover 3.x's Viewer, built
+ * from 4.x parts. Copy this file to start a layout of your own.
+ *
+ * The title and its actions over the Body, and under the Body the thumbnail strip,
+ * headed by the position and a pair of arrows; the information panel to the right of all
+ * three, the layout's full height. The panel has its own space, as in 3.x, and a bar
+ * between it and the rest shares the width (drag it, or use the arrow keys on it). Where there is no room for both
+ * (a phone), the panel slides over the Body instead, and a strip of the page stays
+ * uncovered: a click there, Escape or the panel's close button puts it away. Size it with
+ * `--clover-body-height`.
+ */
+export declare function Default({ className, header, headingLevel, panel, defaultPanelOpen, panelLayout, download, items, storageKey, fill, ...root }: DefaultProps): React.JSX.Element;
+export type DocumentProps = Omit<RootProps, "children"> & {
+	/**
+	 * Whether the page thumbnails start shown beside the page. Default `true`. On a phone,
+	 * where they would float over the page, they start put away.
+	 */
+	defaultSidebarOpen?: boolean;
+	/**
+	 * Whether the information panel starts open beside the page. Default `false`. Where it
+	 * has no room there and would slide over the page, it starts closed.
+	 */
+	defaultPanelOpen?: boolean;
+	/**
+	 * How the information panel lays out its sections: `"accordion"` (the default, as
+	 * Default's), stacked boxes each opened by its heading, or `"tabs"`.
+	 */
+	panelLayout?: PanelLayout;
+	/** The downloads in the toolbar, as links: the page's and the Manifest's `rendering`. Default `true`. */
+	download?: boolean;
+	/**
+	 * The title's heading level, to fit the outline of the page around the layout (under
+	 * an `h2`, 3). The panel's sections, and the downloads' groups, are a level below
+	 * it. Default 2.
+	 */
+	headingLevel?: number;
+	/**
+	 * Where the thumbnails' width is remembered once the reader drags the bar beside them
+	 * (`localStorage`). Default `"clover-template-document"`; `false` forgets it.
+	 */
+	storageKey?: string | false;
+};
+/**
+ * A layout that reads like a PDF viewer: a toolbar, page thumbnails down the left, and
+ * the pages down one column, a spread to a sheet, the top of the next always showing:
+ * scrolling moves through them as a PDF reader's continuous view does, coming to rest on
+ * a sheet near its top, and PageUp and PageDown go a sheet at a time (`Sheets.tsx`). A
+ * bar between the thumbnails and the pages widens or narrows them. The information panel sits to the right of the page, with its own bar,
+ * where there is room for both, and slides out over the page where there is not. Size
+ * it with `--clover-template-document-height`.
+ */
+export declare function Document({ className, defaultSidebarOpen, defaultPanelOpen, panelLayout, download, headingLevel, storageKey, ...root }: DocumentProps): React.JSX.Element;
+export type GalleryProps = Omit<RootProps, "children"> & {
+	/** The size of a grid cell. Default `10rem`, through `--clover-items-size`. */
+	size?: string;
+	/**
+	 * The title's heading level, to fit the outline of the page around the layout (under
+	 * an `h2`, 3). The lightbox's title is a level below it. Default 2.
+	 */
+	headingLevel?: number;
+};
+/**
+ * A grid of the Manifest's views — a spread is one cell — that opens one in a lightbox
+ * with the Body and the pager. Escape, the close button, or a press outside closes it,
+ * and focus returns to the cell.
+ */
+export declare function Gallery({ className, size, headingLevel, style, ...root }: GalleryProps): React.JSX.Element;
+export interface LightboxProps {
+	open: boolean;
+	onClose: () => void;
+	/** The level of its title, a level under the layout's. Default 3. */
+	headingLevel?: number;
+	className?: string;
+}
+/**
+ * The current Canvas in a modal `<dialog>`: its label, the Body, and the pager (with the
+ * position). A native dialog keeps focus inside, closes on Escape, and returns focus to
+ * whatever opened it. The Body mounts only while open, so it is sized when drawn, and its
+ * code loads the first time (`preloadLightbox` starts it sooner): until then its box holds
+ * its place, busy, while the title, Close and the pager are already there.
+ */
+export declare function Lightbox({ open, onClose, headingLevel, className, }: LightboxProps): React.JSX.Element;
+
+export {};

package/dist/templates/index.mjs

@@ -0,0 +1,11 @@
+"use client";
+import { Default } from "./default/Default.mjs";
+import { Document } from "./document/Document.mjs";
+import { Gallery } from "./gallery/Gallery.mjs";
+import { Lightbox } from "./shared/Lightbox.mjs";
+export {
+  Default,
+  Document,
+  Gallery,
+  Lightbox
+};

package/dist/templates/shared/Lightbox.mjs

@@ -0,0 +1,111 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useRef, useEffect, Suspense, lazy } from "react";
+import { useT, useLangOf, useLocalized, useActiveCanvas } from "../../react/hooks.mjs";
+import { useUniqueId } from "../../ui/useUniqueId.mjs";
+import { Label } from "../../components/Label/Label.mjs";
+import { titled } from "../../ui/heading.mjs";
+import { Tip } from "../../ui/Tip.mjs";
+import { Items } from "../../components/Items/Items.mjs";
+const load = () => import("./LightboxBody.mjs");
+const LightboxBody = lazy(load);
+const preloadLightbox = () => void load();
+function Lightbox({
+  open,
+  onClose,
+  headingLevel = 3,
+  className
+}) {
+  var _a;
+  const t = useT();
+  const langOf = useLangOf();
+  const dialog = useRef(null);
+  const baseId = useUniqueId().replace(/:/g, "");
+  const titleId = `${baseId}-title`;
+  const manifestTitleId = `${baseId}-manifest`;
+  const canvasLabel = useLocalized((_a = useActiveCanvas()) == null ? void 0 : _a.label);
+  const named = canvasLabel.text ? titleId : manifestTitleId;
+  useEffect(() => {
+    var _a2;
+    const element = dialog.current;
+    if (!element) return;
+    if (open && !element.open) (_a2 = element.showModal) == null ? void 0 : _a2.call(element);
+    if (!open && element.open) element.close();
+  }, [open]);
+  return /* @__PURE__ */ jsx(
+    "dialog",
+    {
+      ref: dialog,
+      className: ["clover-template-lightbox", className].filter(Boolean).join(" "),
+      "aria-labelledby": named,
+      onClose,
+      onClick: (event) => {
+        if (event.target === dialog.current) onClose();
+      },
+      children: open && /* @__PURE__ */ jsxs("div", { className: "clover-template-lightbox-content", children: [
+        /* @__PURE__ */ jsxs("header", { className: "clover-template-lightbox-header", children: [
+          /* @__PURE__ */ jsx(
+            Label,
+            {
+              of: "canvas",
+              as: titled(headingLevel, titleId).as,
+              id: titleId,
+              className: "clover-template-lightbox-title"
+            }
+          ),
+          named === manifestTitleId && /* @__PURE__ */ jsx(Label, { id: manifestTitleId, hidden: true }),
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              className: "clover-template-lightbox-close",
+              "aria-label": t("commonClose"),
+              lang: langOf("commonClose"),
+              onClick: onClose,
+              children: [
+                /* @__PURE__ */ jsx(
+                  "svg",
+                  {
+                    "aria-hidden": "true",
+                    focusable: "false",
+                    width: "16",
+                    height: "16",
+                    viewBox: "0 0 16 16",
+                    children: /* @__PURE__ */ jsx(
+                      "path",
+                      {
+                        d: "M3 3l10 10M13 3L3 13",
+                        stroke: "currentColor",
+                        strokeWidth: "2",
+                        strokeLinecap: "round"
+                      }
+                    )
+                  }
+                ),
+                /* @__PURE__ */ jsx(Tip, { label: t("commonClose") })
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(
+          Suspense,
+          {
+            fallback: /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "clover-template-lightbox-body clover-template-lightbox-pending",
+                "aria-busy": "true"
+              }
+            ),
+            children: /* @__PURE__ */ jsx(LightboxBody, {})
+          }
+        ),
+        /* @__PURE__ */ jsx(Items, { layout: "pager" })
+      ] })
+    }
+  );
+}
+export {
+  Lightbox,
+  preloadLightbox
+};

package/dist/templates/shared/LightboxBody.mjs

@@ -0,0 +1,9 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { Body } from "../../components/Body/Body.mjs";
+function LightboxBody() {
+  return /* @__PURE__ */ jsx(Body, { className: "clover-template-lightbox-body" });
+}
+export {
+  LightboxBody as default
+};

package/dist/templates/shared/dragToClose.mjs

@@ -0,0 +1,129 @@
+"use client";
+const CLOSE_SHARE = 1 / 3;
+const FLICK = 0.5;
+const SLOP = 8;
+const SPRING = "translate 240ms cubic-bezier(0.16, 1, 0.3, 1)";
+function attach(element, latest) {
+  let id = null;
+  let state = "idle";
+  let startX = 0;
+  let startY = 0;
+  let offset = 0;
+  let width = 1;
+  let toward = 1;
+  let samples = [];
+  const moving = () => {
+    var _a;
+    return [element, (_a = latest.current.alongside) == null ? void 0 : _a.current];
+  };
+  const onDown = (event) => {
+    if (event.pointerType === "mouse" || !event.isPrimary || !latest.current.enabled)
+      return;
+    id = event.pointerId;
+    state = "pending";
+    startX = event.clientX;
+    startY = event.clientY;
+    offset = 0;
+    width = element.getBoundingClientRect().width || 1;
+    const rtl = getComputedStyle(element).direction === "rtl";
+    toward = latest.current.side === "end" !== rtl ? 1 : -1;
+    samples = [[event.timeStamp, 0]];
+  };
+  const onMove = (event) => {
+    var _a, _b;
+    if (event.pointerId !== id || state === "idle" || state === "scroll")
+      return;
+    const dx = (event.clientX - startX) * toward;
+    const dy = event.clientY - startY;
+    if (state === "pending") {
+      if (Math.abs(dy) > SLOP && Math.abs(dy) > Math.abs(dx)) {
+        state = "scroll";
+        return;
+      }
+      if (dx < SLOP) return;
+      state = "drag";
+      try {
+        (_a = element.setPointerCapture) == null ? void 0 : _a.call(element, event.pointerId);
+      } catch {
+      }
+      move(moving(), void 0, "none");
+    }
+    offset = Math.max(0, dx);
+    move(moving(), `${offset * toward}px 0`);
+    const wash = (_b = latest.current.scrim) == null ? void 0 : _b.current;
+    if (wash) {
+      wash.style.transition = "none";
+      wash.style.opacity = String(1 - offset / width);
+    }
+    samples.push([event.timeStamp, offset]);
+    if (samples.length > 5) samples.shift();
+    event.preventDefault();
+  };
+  const onUp = (event) => {
+    var _a;
+    if (event.pointerId !== id) return;
+    const dragged = state === "drag";
+    state = "idle";
+    id = null;
+    if (!dragged) return;
+    element.addEventListener("click", swallow, { capture: true, once: true });
+    setTimeout(() => element.removeEventListener("click", swallow, true), 0);
+    const [t0, x0] = samples[0];
+    const [t1, x1] = samples[samples.length - 1];
+    const speed = t1 > t0 ? (x1 - x0) / (t1 - t0) : 0;
+    const wash = (_a = latest.current.scrim) == null ? void 0 : _a.current;
+    if (offset > width * CLOSE_SHARE || speed > FLICK) {
+      if (wash) {
+        wash.style.transition = "opacity 240ms ease";
+        wash.style.opacity = "0";
+      }
+      if (latest.current.exits) {
+        move(moving(), `${width * toward}px 0`, "translate 200ms ease-out");
+        setTimeout(() => latest.current.onClose(), 200);
+        return;
+      }
+      move(moving(), void 0, "");
+      latest.current.onClose();
+      return;
+    }
+    move(moving(), "", SPRING);
+    if (wash) {
+      wash.style.transition = "opacity 240ms ease";
+      wash.style.opacity = "";
+    }
+  };
+  const swallow = (event) => {
+    event.stopPropagation();
+    event.preventDefault();
+  };
+  element.addEventListener("pointerdown", onDown);
+  element.addEventListener("pointermove", onMove, { passive: false });
+  element.addEventListener("pointerup", onUp);
+  element.addEventListener("pointercancel", onUp);
+  return () => {
+    element.removeEventListener("pointerdown", onDown);
+    element.removeEventListener("pointermove", onMove);
+    element.removeEventListener("pointerup", onUp);
+    element.removeEventListener("pointercancel", onUp);
+  };
+}
+function reset(element, latest) {
+  var _a, _b;
+  move([element, (_a = latest.current.alongside) == null ? void 0 : _a.current], "", "");
+  const wash = (_b = latest.current.scrim) == null ? void 0 : _b.current;
+  if (wash) {
+    wash.style.opacity = "";
+    wash.style.transition = "";
+  }
+}
+function move(elements, translate, transition) {
+  for (const element of elements) {
+    if (!element) continue;
+    if (transition !== void 0) element.style.transition = transition;
+    if (translate !== void 0) element.style.translate = translate;
+  }
+}
+export {
+  attach,
+  reset
+};

package/dist/templates/shared/useDragToClose.mjs

@@ -0,0 +1,35 @@
+"use client";
+import { useRef, useEffect } from "react";
+let drag;
+let loaded;
+function useDragToClose(pane, {
+  enabled,
+  side,
+  onClose,
+  scrim,
+  alongside,
+  exits = false
+}) {
+  const latest = useRef({ enabled, side, onClose, scrim, alongside, exits });
+  latest.current = { enabled, side, onClose, scrim, alongside, exits };
+  useEffect(() => {
+    const element = pane.current;
+    if (!element) return;
+    loaded == null ? void 0 : loaded.reset(element, latest);
+    if (!enabled) return;
+    let live = true;
+    let detach;
+    void (drag ?? (drag = import("./dragToClose.mjs").then(
+      (module) => loaded = module
+    ))).then((module) => {
+      if (live) detach = module.attach(element, latest);
+    });
+    return () => {
+      live = false;
+      detach == null ? void 0 : detach();
+    };
+  }, [pane, enabled]);
+}
+export {
+  useDragToClose
+};