@gallerist/react 0.0.0-stage → 0.3.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Shafayet Ahmmed
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,144 @@
-# Temporary Holding Version
+# @gallerist/react
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+React adapter for Gallerist — <Gallerist> component, useGallerist() hook, JSX overlay/region portals.
+
+Part of [Gallerist](https://github.com/shafayet9780/gallerist#readme) — a headless, framework-agnostic media viewer for grouped / nested galleries with image-space overlays and virtualized rendering.
+
+## Install
+
+```bash
+npm i @gallerist/react
+```
+
+Needs React and React DOM 18 or later (it uses `useSyncExternalStore`, `useId` and
+`useInsertionEffect`).
+
+## Usage
+
+```tsx
+import { Gallerist } from '@gallerist/react'
+import '@gallerist/theme-default/gallerist.css'
+
+<Gallerist items={[{ id: 'a', type: 'image', source: 'a.jpg' }]} open={open} onClose={() => setOpen(false)} />
+```
+
+Props that update live: `items` / `groups` / `collection` (changed content is applied in place and
+keeps the cursor on the same item; data rebuilt inline with the same content is ignored; an invalid
+update, such as a duplicate id, is logged and the current data kept), `on`, `open`, `onClose`, `skin`,
+`accent` and `scheme`. Everything else (`loop`, `startAt`, `plugins`, `overlays`, `preset`, `container`,
+`label`, `returnFocus`, `preload`, `adapters`, …) is read once; change the component's `key` to apply
+new values.
+
+`preset` sets the layout, the thumbnails rail included: `thumbnails()` in `plugins` takes the preset's
+rail options for any option you don't pass (`preset="reviewer"` gives the timeline and numbered items;
+`thumbnails({ timeline: false })` keeps the numbers and drops the timeline).
+
+`plugins`, `on` and render props are functions, so `<Gallerist>` is used from a client component. The
+build carries a `"use client"` banner, so a Next.js App Router page can import it from inside a client
+boundary (a file that starts with `"use client"`); a Server Component can't pass it those props.
+
+### Opening at a position
+
+`open` takes `true`, `false`, or a position `{ g, i }` (group index, optional item index):
+
+```tsx
+const [at, setAt] = useState<{ g: number; i?: number } | false>(false)
+
+<button onClick={() => setAt({ g: 3, i: 1 })}>Open the 4th group</button>
+<Gallerist groups={groups} open={at} onClose={() => setAt(false)} />
+```
+
+A new position while the viewer is open moves the cursor. The position is applied when it changes,
+not enforced: the user can navigate away from it, and an inline `open={{ g: 3 }}` re-rendered with the
+same value doesn't pull them back. `open` is compared by value (`g` and `i`), so setting the same
+`{ g, i }` again does nothing; to jump back to it, call `ref.current.open({ g, i })`. Going from a
+position to `true` keeps the viewer where it is.
+
+### Escape
+
+The viewer listens for Escape on its own root and closes, unless a handler that ran first called
+`event.preventDefault()`. A dialog or popover you open over the viewer should handle Escape itself:
+if it is rendered inside the viewer (`<Gallerist.Overlay>`, `<Gallerist.Region>`), call
+`preventDefault()` on the Escape that closes it, or the viewer closes too. A dialog library that
+listens on `document` in the capture phase sees Escape before the viewer does; it keeps the viewer
+open only if it calls `preventDefault()` (or `stopPropagation()`) on the key it handles.
+
+### The imperative handle
+
+The ref is the viewer itself (`ViewerApi` from `@gallerist/core`), for code that drives the viewer
+without controlled props:
+
+```tsx
+import type { ViewerApi } from '@gallerist/core'
+
+const viewer = useRef<ViewerApi>(null)
+
+<Gallerist ref={viewer} groups={groups} />
+<button onClick={() => viewer.current?.open({ g: 2, i: 0 })}>Open</button>
+```
+
+`open({ g, i })`, `close()`, `next()` / `prev()`, `nextItem()` / `prevItem()`, `goTo(g, i)`,
+`goToId(groupId, itemId)`, `zoomTo(scale)`, `resetZoom()`, `getState()`, `subscribe(fn)` and
+`on(event, fn)` are all there. Leave `open` undefined when the ref drives visibility, or the next
+change of `open` wins.
+
+### Captions
+
+`<Gallerist.Caption>` renders the current item's caption with React, into the renderer's caption
+region: the caption bar under the stage, the editorial placard, or wherever the preset puts it. Item
+data keeps its plain-text `caption`; the design lives here, once per viewer.
+
+```tsx
+interface Shot {
+  app: string
+  capturedAt: string
+}
+
+<Gallerist groups={groups} open={open} onClose={close}>
+  <Gallerist.Caption>
+    {({ item, group, cursor }) => {
+      const shot = item.meta as Shot
+      return (
+        <div className="shot-caption">
+          <strong>{shot.app}</strong> <time>{shot.capturedAt}</time>
+          <span>
+            {cursor.i + 1} of {group.items.length}
+          </span>
+        </div>
+      )
+    }}
+  </Gallerist.Caption>
+</Gallerist>
+```
+
+Returning `null`, `undefined`, `true` or `false` shows the item's text `caption` (or nothing), in a
+`span.gallerist-caption-text` so it keeps the theme's caption font. The band grows with what you render
+(the stage gives up the room), from the height of a two-line text caption up to 40% of the viewport
+(less if the stage would drop below 36% of the viewer), then it scrolls. Its text is the viewer's
+accessible description (`aria-describedby`); the announcement on navigation stays the position plus
+the item's `alt`, so put what a screen reader user needs in `alt`. Without React, use
+[`@gallerist/plugin-captions`](../plugin-captions/README.md).
+
+### Hooks
+
+- `useCurrentItem()` returns `{ item, group, cursor }` for the enclosing `<Gallerist>` (or pass it a
+  viewer). It re-renders on navigation and collection changes, not on zoom or pan.
+- `useGallerist(viewer)` returns the whole state (`useSyncExternalStore`) and stable action functions.
+
+```tsx
+function Details() {
+  const { item } = useCurrentItem()
+  return <p>{item?.alt}</p>
+}
+```
+
+### Portals
+
+`<Gallerist.Region name="toolbar">` renders JSX into a named region (`toolbar`, `aside`, `footer`,
+`caption`, …); `<Gallerist.Overlay anchor={…}>` renders JSX as an overlay on the image or the viewport.
+
+Full docs: the [monorepo README](https://github.com/shafayet9780/gallerist#readme) and [`docs/`](https://github.com/shafayet9780/gallerist/tree/main/docs).
+
+## License
+
+MIT © Shafayet Ahmmed

package/dist/index.cjs

@@ -0,0 +1,320 @@
+"use client";
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  DEFAULT_STRINGS: () => import_renderer_dom2.DEFAULT_STRINGS,
+  Gallerist: () => Gallerist2,
+  GalleristContext: () => GalleristContext,
+  resolvePreset: () => import_renderer_dom2.resolvePreset,
+  useCurrentItem: () => useCurrentItem,
+  useGallerist: () => useGallerist,
+  useViewerContext: () => useViewerContext
+});
+module.exports = __toCommonJS(index_exports);
+var import_renderer_dom2 = require("@gallerist/renderer-dom");
+
+// src/context.ts
+var import_react = require("react");
+var GalleristContext = (0, import_react.createContext)(null);
+function useViewerContext() {
+  const viewer = (0, import_react.useContext)(GalleristContext);
+  if (!viewer)
+    throw new Error(
+      "Gallerist.Overlay / Gallerist.Region / Gallerist.Caption must be used inside <Gallerist>"
+    );
+  return viewer;
+}
+
+// src/useGallerist.ts
+var import_react2 = require("react");
+function useGallerist(viewer) {
+  const subscribe = (0, import_react2.useCallback)((cb) => viewer.subscribe(cb), [viewer]);
+  const getSnapshot = (0, import_react2.useCallback)(() => viewer.getState(), [viewer]);
+  const state = (0, import_react2.useSyncExternalStore)(subscribe, getSnapshot, getSnapshot);
+  const actions = (0, import_react2.useMemo)(
+    () => ({
+      open: (at) => viewer.open(at),
+      close: () => viewer.close(),
+      next: () => viewer.next(),
+      prev: () => viewer.prev(),
+      nextItem: () => viewer.nextItem(),
+      prevItem: () => viewer.prevItem(),
+      goTo: (g, i) => viewer.goTo(g, i),
+      goToId: (g, i) => viewer.goToId(g, i),
+      zoomTo: (s, f) => viewer.zoomTo(s, f),
+      resetZoom: () => viewer.resetZoom()
+    }),
+    [viewer]
+  );
+  return { state, viewer, ...actions };
+}
+
+// src/useCurrentItem.ts
+var import_react3 = require("react");
+function useCurrentItem(viewer) {
+  const fromContext = (0, import_react3.useContext)(GalleristContext);
+  const v = viewer ?? fromContext;
+  if (!v) throw new Error("useCurrentItem() must be used inside <Gallerist> or given a viewer");
+  const last = (0, import_react3.useRef)(null);
+  const subscribe = (0, import_react3.useCallback)((cb) => v.subscribe(cb), [v]);
+  const getSnapshot = (0, import_react3.useCallback)(() => {
+    const { g, i } = v.getState().cursor;
+    const group = v.getCollection().groups[g];
+    const item = group?.items[i];
+    const prev = last.current;
+    if (prev && prev.item === item && prev.group === group && prev.cursor.g === g && prev.cursor.i === i)
+      return prev;
+    last.current = { item, group, cursor: { g, i } };
+    return last.current;
+  }, [v]);
+  return (0, import_react3.useSyncExternalStore)(subscribe, getSnapshot, getSnapshot);
+}
+
+// src/Gallerist.tsx
+var import_core = require("@gallerist/core");
+var import_renderer_dom = require("@gallerist/renderer-dom");
+var import_react4 = require("react");
+var import_react_dom = require("react-dom");
+var import_jsx_runtime = require("react/jsx-runtime");
+var EVENT_NAMES = Object.keys({
+  init: 1,
+  destroy: 1,
+  open: 1,
+  opened: 1,
+  close: 1,
+  closed: 1,
+  beforeSlide: 1,
+  slide: 1,
+  afterSlide: 1,
+  beforeItem: 1,
+  item: 1,
+  afterItem: 1,
+  zoom: 1,
+  zoomEnd: 1,
+  load: 1,
+  loaded: 1,
+  loadError: 1,
+  collectionChange: 1,
+  fullscreenChange: 1,
+  overlayClick: 1
+});
+var toCollection = (items, groups, collection) => collection ?? { groups: groups ?? (items ?? []).map((it) => ({ id: it.id, items: [it] })) };
+var shallowSame = (a, b) => {
+  if (Object.is(a, b)) return true;
+  if (Array.isArray(a) && Array.isArray(b)) {
+    return a.length === b.length && a.every((v, i) => Object.is(v, b[i]));
+  }
+  if (!a || !b || typeof a !== "object" || typeof b !== "object") return false;
+  const ka = Object.keys(a);
+  const rb = b;
+  return ka.length === Object.keys(b).length && ka.every((k) => Object.is(a[k], rb[k]));
+};
+var sameRecord = (a, b, skip) => {
+  const ra = a;
+  const rb = b;
+  const ka = Object.keys(ra).filter((k) => k !== skip);
+  const kb = Object.keys(rb).filter((k) => k !== skip);
+  return ka.length === kb.length && ka.every((k) => shallowSame(ra[k], rb[k]));
+};
+var sameCollection = (a, b) => a.groups.length === b.groups.length && shallowSame(a.meta, b.meta) && a.groups.every((g, gi) => {
+  const h = b.groups[gi];
+  return !!h && sameRecord(g, h, "items") && g.items.length === h.items.length && g.items.every((it, ii) => {
+    const other = h.items[ii];
+    return !!other && sameRecord(it, other);
+  });
+});
+var GalleristBase = (0, import_react4.forwardRef)(function Gallerist(props, ref) {
+  const {
+    open,
+    onClose,
+    container,
+    controls,
+    preset,
+    skin,
+    accent,
+    scheme,
+    arrows,
+    rail,
+    autoHide,
+    linear,
+    strings,
+    itemIndicator,
+    navigator,
+    frame,
+    groupAxis,
+    arrowLabels,
+    label,
+    returnFocus,
+    preload,
+    adapters,
+    children,
+    ...options
+  } = props;
+  const rootRef = (0, import_react4.useRef)(null);
+  const { items, groups, collection, on } = options;
+  const onRef = (0, import_react4.useRef)(on);
+  (0, import_react4.useInsertionEffect)(() => {
+    onRef.current = on;
+  });
+  const [viewer] = (0, import_react4.useState)(() => {
+    const { plugins: _plugins, on: _on, ...rest } = options;
+    const forward = {};
+    for (const name of EVENT_NAMES) {
+      ;
+      forward[name] = (payload) => onRef.current?.[name]?.(payload);
+    }
+    return (0, import_core.createViewer)({ ...rest, on: forward });
+  });
+  const appliedData = (0, import_react4.useRef)({ items, groups, collection });
+  (0, import_react4.useEffect)(() => {
+    const prev = appliedData.current;
+    if (prev.items === items && prev.groups === groups && prev.collection === collection) return;
+    appliedData.current = { items, groups, collection };
+    const next = toCollection(items, groups, collection);
+    if (sameCollection(next, viewer.getCollection())) return;
+    try {
+      viewer.setCollection(next);
+    } catch (error) {
+      console.error("[gallerist] ignored an invalid collection update:", error);
+    }
+  }, [viewer, items, groups, collection]);
+  (0, import_react4.useImperativeHandle)(ref, () => viewer, [viewer]);
+  (0, import_react4.useEffect)(() => {
+    const disposers = (options.plugins ?? []).map((plugin) => viewer.use(plugin));
+    return () => {
+      for (const dispose of disposers) dispose();
+    };
+  }, [viewer]);
+  (0, import_react4.useEffect)(() => {
+    const handle = (0, import_renderer_dom.mount)(viewer, {
+      container: container ?? null,
+      controls,
+      preset,
+      arrows,
+      rail,
+      autoHide,
+      linear,
+      strings,
+      itemIndicator,
+      navigator,
+      frame,
+      groupAxis,
+      arrowLabels,
+      label,
+      returnFocus,
+      preload,
+      adapters,
+      skin,
+      accent,
+      scheme,
+      loop: options.loop
+    });
+    rootRef.current = handle.root;
+    return () => {
+      handle.destroy();
+      rootRef.current = null;
+    };
+  }, [viewer]);
+  (0, import_react4.useEffect)(() => {
+    const root = rootRef.current;
+    if (root) (0, import_renderer_dom.applyAppearance)(root, { skin, accent, scheme });
+  }, [skin, accent, scheme]);
+  const openG = typeof open === "object" && open ? open.g : void 0;
+  const openI = typeof open === "object" && open ? open.i : void 0;
+  const shown = open === void 0 ? void 0 : !!open;
+  (0, import_react4.useEffect)(() => {
+    if (shown === void 0) return;
+    if (shown) viewer.open(openG === void 0 ? void 0 : { g: openG, i: openI });
+    else viewer.close();
+  }, [shown, openG, openI, viewer]);
+  (0, import_react4.useEffect)(() => {
+    if (!onClose) return;
+    return viewer.on("closed", () => onClose());
+  }, [onClose, viewer]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(GalleristContext.Provider, { value: viewer, children });
+});
+function Overlay(props) {
+  const viewer = useViewerContext();
+  const [host, setHost] = (0, import_react4.useState)(null);
+  const autoId = (0, import_react4.useId)();
+  const id = props.id ?? autoId;
+  const anchorKey = JSON.stringify(props.anchor);
+  const visibleAtKey = JSON.stringify(props.visibleAt ?? null);
+  (0, import_react4.useEffect)(() => {
+    const node = document.createElement("div");
+    setHost(node);
+    const spec = {
+      id,
+      anchor: props.anchor,
+      layer: props.layer,
+      interactive: props.interactive,
+      visibleAt: props.visibleAt,
+      class: props.className,
+      render: () => node
+      // stable host; React owns its children through the portal
+    };
+    const dispose = viewer.use(() => ({ name: `overlay:${id}`, overlays: [spec] }));
+    return () => {
+      dispose();
+      setHost(null);
+    };
+  }, [viewer, id, anchorKey, visibleAtKey, props.layer, props.interactive, props.className]);
+  return host ? (0, import_react_dom.createPortal)(props.children, host) : null;
+}
+function Region(props) {
+  const viewer = useViewerContext();
+  const [host, setHost] = (0, import_react4.useState)(null);
+  const { name } = props;
+  (0, import_react4.useEffect)(() => {
+    const node = document.createElement("div");
+    setHost(node);
+    const dispose = viewer.use(() => ({
+      name: `region:${name}`,
+      regions: { [name]: () => node }
+    }));
+    return () => {
+      dispose();
+      setHost(null);
+    };
+  }, [viewer, name]);
+  return host ? (0, import_react_dom.createPortal)(props.children, host) : null;
+}
+function Caption(props) {
+  const { item, group, cursor } = useCurrentItem();
+  const out = item && group ? props.children({ item, group, cursor }) : null;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Region, { name: "caption", children: out == null || typeof out === "boolean" ? text(item?.caption) : out });
+}
+function text(caption) {
+  return typeof caption === "string" && caption ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "gallerist-caption-text", children: caption }) : null;
+}
+var Gallerist2 = Object.assign(GalleristBase, { Overlay, Region, Caption });
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  DEFAULT_STRINGS,
+  Gallerist,
+  GalleristContext,
+  resolvePreset,
+  useCurrentItem,
+  useGallerist,
+  useViewerContext
+});
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/context.ts","../src/useGallerist.ts","../src/useCurrentItem.ts","../src/Gallerist.tsx"],"sourcesContent":["// @gallerist/react — React adapter (spec §16). Thin binding over the headless store.\nexport {\n  type Accent,\n  type ArrowLayout,\n  type ColorScheme,\n  type GroupAxis,\n  type ItemIndicator,\n  type PresetName,\n  type RailPlacement,\n  type ResolvedPreset,\n  type Skin,\n  type Strings,\n  DEFAULT_STRINGS,\n  resolvePreset,\n} from '@gallerist/renderer-dom'\nexport { useViewerContext, GalleristContext } from './context'\nexport { type UseGallerist, useGallerist } from './useGallerist'\nexport { type CurrentItem, useCurrentItem } from './useCurrentItem'\nexport {\n  Gallerist,\n  type GalleristCaptionProps,\n  type GalleristOpenAt,\n  type GalleristOverlayProps,\n  type GalleristProps,\n  type GalleristRegionProps,\n} from './Gallerist'\n","import type { ViewerApi } from '@gallerist/core'\nimport { createContext, useContext } from 'react'\n\nexport const GalleristContext = createContext<ViewerApi | null>(null)\n\nexport function useViewerContext(): ViewerApi {\n  const viewer = useContext(GalleristContext)\n  if (!viewer)\n    throw new Error(\n      'Gallerist.Overlay / Gallerist.Region / Gallerist.Caption must be used inside <Gallerist>',\n    )\n  return viewer\n}\n","import type { ViewerApi, ViewerState } from '@gallerist/core'\nimport { useCallback, useMemo, useSyncExternalStore } from 'react'\n\nexport interface UseGallerist {\n  state: Readonly<ViewerState>\n  viewer: ViewerApi\n  open: ViewerApi['open']\n  close: ViewerApi['close']\n  next: ViewerApi['next']\n  prev: ViewerApi['prev']\n  nextItem: ViewerApi['nextItem']\n  prevItem: ViewerApi['prevItem']\n  goTo: ViewerApi['goTo']\n  goToId: ViewerApi['goToId']\n  zoomTo: ViewerApi['zoomTo']\n  resetZoom: ViewerApi['resetZoom']\n}\n\n/** Bind a React component to a viewer's state (useSyncExternalStore) + its actions. */\nexport function useGallerist(viewer: ViewerApi): UseGallerist {\n  const subscribe = useCallback((cb: () => void) => viewer.subscribe(cb), [viewer])\n  const getSnapshot = useCallback(() => viewer.getState(), [viewer])\n  const state = useSyncExternalStore(subscribe, getSnapshot, getSnapshot)\n\n  // Stabilize the action closures so they keep a constant identity across re-renders (this hook\n  // re-renders on every store commit). Otherwise each commit handed consumers fresh function\n  // references, defeating React.memo / dependency-array memoization downstream (S-PERF4).\n  const actions = useMemo(\n    () => ({\n      open: (at?: Parameters<ViewerApi['open']>[0]) => viewer.open(at),\n      close: () => viewer.close(),\n      next: () => viewer.next(),\n      prev: () => viewer.prev(),\n      nextItem: () => viewer.nextItem(),\n      prevItem: () => viewer.prevItem(),\n      goTo: (g: number, i?: number) => viewer.goTo(g, i),\n      goToId: (g: string, i?: string) => viewer.goToId(g, i),\n      zoomTo: (s: number, f?: Parameters<ViewerApi['zoomTo']>[1]) => viewer.zoomTo(s, f),\n      resetZoom: () => viewer.resetZoom(),\n    }),\n    [viewer],\n  )\n\n  return { state, viewer, ...actions }\n}\n","import type { Cursor, Group, Item, ViewerApi } from '@gallerist/core'\nimport { useCallback, useContext, useRef, useSyncExternalStore } from 'react'\nimport { GalleristContext } from './context'\n\n/** The viewer's current item, its group and its position. */\nexport interface CurrentItem<GM = unknown, IM = unknown> {\n  /** undefined only for an empty collection */\n  item: Item<IM> | undefined\n  group: Group<GM, IM> | undefined\n  cursor: Readonly<Cursor>\n}\n\n/**\n * The current item, group and cursor of the enclosing `<Gallerist>` (or of `viewer`). Re-renders\n * when the cursor or the collection changes, not on zoom or pan.\n */\nexport function useCurrentItem<GM = unknown, IM = unknown>(\n  viewer?: ViewerApi,\n): CurrentItem<GM, IM> {\n  const fromContext = useContext(GalleristContext)\n  const v = viewer ?? fromContext\n  if (!v) throw new Error('useCurrentItem() must be used inside <Gallerist> or given a viewer')\n  // useSyncExternalStore needs a stable snapshot: the same object until the item really changes\n  const last = useRef<CurrentItem | null>(null)\n  const subscribe = useCallback((cb: () => void) => v.subscribe(cb), [v])\n  const getSnapshot = useCallback((): CurrentItem => {\n    const { g, i } = v.getState().cursor\n    const group = v.getCollection().groups[g]\n    const item = group?.items[i]\n    const prev = last.current\n    if (\n      prev &&\n      prev.item === item &&\n      prev.group === group &&\n      prev.cursor.g === g &&\n      prev.cursor.i === i\n    )\n      return prev\n    last.current = { item, group, cursor: { g, i } }\n    return last.current\n  }, [v])\n  return useSyncExternalStore(subscribe, getSnapshot, getSnapshot) as CurrentItem<GM, IM>\n}\n","import {\n  type Collection,\n  type Cursor,\n  type EventHandlers,\n  type EventMap,\n  type Group,\n  type Item,\n  type OverlaySpec,\n  type RegionName,\n  type ViewerApi,\n  type ViewerOptions,\n  createViewer,\n} from '@gallerist/core'\nimport {\n  type Accent,\n  type ArrowLayout,\n  type ColorScheme,\n  type ItemIndicator,\n  type MountOptions,\n  type PresetName,\n  type RailPlacement,\n  type Skin,\n  type Strings,\n  applyAppearance,\n  mount,\n} from '@gallerist/renderer-dom'\nimport {\n  type ReactNode,\n  forwardRef,\n  useEffect,\n  useId,\n  useImperativeHandle,\n  useInsertionEffect,\n  useRef,\n  useState,\n} from 'react'\nimport { createPortal } from 'react-dom'\nimport { GalleristContext, useViewerContext } from './context'\nimport { useCurrentItem } from './useCurrentItem'\n\n/** A position to open at: group `g`, item `i` (default: the group's remembered item). */\nexport interface GalleristOpenAt {\n  g: number\n  i?: number\n}\n\n/**\n * `items` / `groups` / `collection` and `on` are reactive. Changed data swaps the collection in\n * place (diffed by id, keeping the cursor); data rebuilt with the same content is ignored. Every other viewer option\n * (`loop`, `itemMemory`, `startAt`, `plugins`, `overlays`, …) and the layout props (`container`,\n * `preset`, `arrows`, `rail`, `label`, `preload`, `adapters`, …) are read once; change the\n * component's `key` to apply new ones. `skin`, `accent`, `scheme` and `open` are reactive.\n */\nexport interface GalleristProps extends ViewerOptions {\n  /**\n   * Controlled visibility. `true` opens at the current position; `{ g, i }` opens there, and a new\n   * position while open moves the cursor (applied when the value changes, so the user can still\n   * navigate away from it); `false` closes. Leave it undefined to drive the viewer through the ref.\n   */\n  open?: boolean | GalleristOpenAt\n  onClose?: () => void\n  container?: HTMLElement | null\n  controls?: boolean\n  /** layout preset (arrow placement, auto-hide, data-gallerist-preset, the thumbnails() defaults) — UX-E. */\n  preset?: PresetName\n  /** visual skin, default `gallery`; other skins need their stylesheet (reactive). */\n  skin?: Skin\n  /** the skin's accent by name, e.g. `mint` (Gallery) or `cyan` (Console) (reactive). */\n  accent?: Accent\n  /** colour scheme: `dark`, `light` or `auto`; unset, the skin's own default (reactive). */\n  scheme?: ColorScheme\n  /** within-group arrow placement (overrides the preset default) — UX-D. */\n  arrows?: ArrowLayout\n  /** thumbnail rail placement (overrides the preset default) — UX-E. */\n  rail?: RailPlacement\n  /** auto-hide chrome on idle (overrides the preset default) — UX-C. */\n  autoHide?: boolean\n  /** linear flat traversal: ←/→ walks the flattened item sequence; pairs with a flat thumbnail rail. */\n  linear?: boolean\n  /** UI text overrides (button labels, announcements) for translation; read once at mount. */\n  strings?: Partial<Strings>\n  /** item position indicator: `pills` (default), `dots`, `counter` or `placard`; read once at mount. */\n  itemIndicator?: ItemIndicator\n  /** zoom navigator while zoomed in (overrides the preset default); read once at mount. */\n  navigator?: boolean\n  /** framed media: the work hangs with room around it (overrides the preset); read once at mount. */\n  frame?: boolean\n  /** which arrows move between groups (overrides the rail and preset default); read once at mount. */\n  groupAxis?: MountOptions['groupAxis']\n  /** name the group arrows after their target group (overrides the preset); read once at mount. */\n  arrowLabels?: MountOptions['arrowLabels']\n  /** the overlay dialog's accessible name (default `strings.dialog`); read once at mount. */\n  label?: string\n  /** where focus returns when the overlay closes (default: what had focus when it opened); read\n   *  once at mount, so pass a getter for a target that changes. */\n  returnFocus?: MountOptions['returnFocus']\n  /** how many groups to keep mounted ahead of and behind the current one; read once at mount. */\n  preload?: MountOptions['preload']\n  /** media adapters, replacing the default image adapter; read once at mount. */\n  adapters?: MountOptions['adapters']\n  children?: ReactNode\n}\n\n// Every viewer event, checked against EventMap (a missing or unknown name fails to compile), so\n// the forwarders below can route each one to the latest `on` handlers.\nconst EVENT_NAMES = Object.keys({\n  init: 1,\n  destroy: 1,\n  open: 1,\n  opened: 1,\n  close: 1,\n  closed: 1,\n  beforeSlide: 1,\n  slide: 1,\n  afterSlide: 1,\n  beforeItem: 1,\n  item: 1,\n  afterItem: 1,\n  zoom: 1,\n  zoomEnd: 1,\n  load: 1,\n  loaded: 1,\n  loadError: 1,\n  collectionChange: 1,\n  fullscreenChange: 1,\n  overlayClick: 1,\n} satisfies Record<keyof EventMap, 1>) as (keyof EventMap)[]\n\n// The collection a data prop describes (flat items → singleton groups). setCollection validates it.\nconst toCollection = (items?: Item[], groups?: Group[], collection?: Collection): Collection =>\n  collection ?? { groups: groups ?? (items ?? []).map((it) => ({ id: it.id, items: [it] })) }\n\n// Values equal at one level of depth: identical, or arrays/plain objects with identical entries\n// (a `source: { src }`, `naturalSize`, or a re-created `overlays` array of the same specs).\nconst shallowSame = (a: unknown, b: unknown): boolean => {\n  if (Object.is(a, b)) return true\n  if (Array.isArray(a) && Array.isArray(b)) {\n    return a.length === b.length && a.every((v, i) => Object.is(v, b[i]))\n  }\n  if (!a || !b || typeof a !== 'object' || typeof b !== 'object') return false\n  const ka = Object.keys(a)\n  const rb = b as Record<string, unknown>\n  return (\n    ka.length === Object.keys(b).length &&\n    ka.every((k) => Object.is((a as Record<string, unknown>)[k], rb[k]))\n  )\n}\nconst sameRecord = (a: object, b: object, skip?: string): boolean => {\n  const ra = a as Record<string, unknown>\n  const rb = b as Record<string, unknown>\n  const ka = Object.keys(ra).filter((k) => k !== skip)\n  const kb = Object.keys(rb).filter((k) => k !== skip)\n  return ka.length === kb.length && ka.every((k) => shallowSame(ra[k], rb[k]))\n}\n// Same content (groups, items and their fields), even when rebuilt as fresh objects — so an\n// inline `items={photos.map(…)}` doesn't swap the collection (and reset load status) every render.\nconst sameCollection = (a: Collection, b: Readonly<Collection>): boolean =>\n  a.groups.length === b.groups.length &&\n  shallowSame(a.meta, b.meta) &&\n  a.groups.every((g, gi) => {\n    const h = b.groups[gi]\n    return (\n      !!h &&\n      sameRecord(g, h, 'items') &&\n      g.items.length === h.items.length &&\n      g.items.every((it, ii) => {\n        const other = h.items[ii]\n        return !!other && sameRecord(it, other)\n      })\n    )\n  })\n\nconst GalleristBase = forwardRef<ViewerApi, GalleristProps>(function Gallerist(props, ref) {\n  const {\n    open,\n    onClose,\n    container,\n    controls,\n    preset,\n    skin,\n    accent,\n    scheme,\n    arrows,\n    rail,\n    autoHide,\n    linear,\n    strings,\n    itemIndicator,\n    navigator,\n    frame,\n    groupAxis,\n    arrowLabels,\n    label,\n    returnFocus,\n    preload,\n    adapters,\n    children,\n    ...options\n  } = props\n  const rootRef = useRef<HTMLElement | null>(null)\n  const { items, groups, collection, on } = options\n\n  // The viewer outlives renders, so its handlers must not capture the first render's `on`: they\n  // forward to whatever `on` the latest committed render passed (a returned `false` still cancels).\n  const onRef = useRef<EventHandlers | undefined>(on)\n  useInsertionEffect(() => {\n    onRef.current = on\n  })\n  // Create the viewer once (core is DOM-free → SSR-safe); options are read at construction. Lazy\n  // useState (not useMemo, which React may discard) guarantees a single stable instance. Plugins\n  // are deliberately NOT registered at construction — they're managed in an effect below so their\n  // teardown runs on unmount (I-X2).\n  const [viewer] = useState(() => {\n    const { plugins: _plugins, on: _on, ...rest } = options\n    const forward: EventHandlers = {}\n    for (const name of EVENT_NAMES) {\n      ;(forward as Record<string, (p: unknown) => unknown>)[name] = (payload) =>\n        (onRef.current?.[name] as ((p: unknown) => unknown) | undefined)?.(payload)\n    }\n    return createViewer({ ...rest, on: forward })\n  })\n\n  // Data props are reactive: new data swaps the collection via setCollection (diffed by id, so the\n  // cursor and zoom survive when the current item does). The first render's data is already in the\n  // viewer; a new reference with the same content is ignored; invalid data (a duplicate id) is\n  // reported and the viewer keeps its current collection instead of crashing the React tree.\n  const appliedData = useRef({ items, groups, collection })\n  useEffect(() => {\n    const prev = appliedData.current\n    if (prev.items === items && prev.groups === groups && prev.collection === collection) return\n    appliedData.current = { items, groups, collection }\n    const next = toCollection(items, groups, collection)\n    if (sameCollection(next, viewer.getCollection())) return\n    try {\n      viewer.setCollection(next)\n    } catch (error) {\n      console.error('[gallerist] ignored an invalid collection update:', error)\n    }\n  }, [viewer, items, groups, collection])\n  useImperativeHandle(ref, () => viewer, [viewer])\n\n  // Register the construction-time plugins via use() and dispose them on unmount, so their\n  // init()-created store subscriptions / observers / DOM don't leak on every remount (the viewer\n  // itself is intentionally never destroyed — see the mount effect). Plugins are mount-time config.\n  // biome-ignore lint/correctness/useExhaustiveDependencies: register once for the viewer's life\n  useEffect(() => {\n    const disposers = (options.plugins ?? []).map((plugin) => viewer.use(plugin))\n    return () => {\n      for (const dispose of disposers) dispose()\n    }\n  }, [viewer])\n\n  // Mount the renderer once per viewer (client-side); container/controls are mount-time only. Only\n  // the renderer (the DOM holder) is torn down here. The viewer is NOT destroyed on cleanup: under\n  // StrictMode the simulated unmount would run viewer.destroy() on the stable useState instance,\n  // permanently poisoning it (registerPlugin/nav short-circuit once destroyed) so re-registered\n  // overlays/regions vanish. The viewer is plain JS (no DOM) and is reclaimed by GC once the\n  // component unmounts and the renderer/hook/overlay subscriptions have all cleaned themselves up.\n  // biome-ignore lint/correctness/useExhaustiveDependencies: intentional mount-once (layout opts read once)\n  useEffect(() => {\n    const handle = mount(viewer, {\n      container: container ?? null,\n      controls,\n      preset,\n      arrows,\n      rail,\n      autoHide,\n      linear,\n      strings,\n      itemIndicator,\n      navigator,\n      frame,\n      groupAxis,\n      arrowLabels,\n      label,\n      returnFocus,\n      preload,\n      adapters,\n      skin,\n      accent,\n      scheme,\n      loop: options.loop,\n    })\n    rootRef.current = handle.root\n    return () => {\n      handle.destroy()\n      rootRef.current = null\n    }\n  }, [viewer])\n\n  // The appearance is reactive: the skin files key off root attributes, so no remount is needed.\n  useEffect(() => {\n    const root = rootRef.current\n    if (root) applyAppearance(root, { skin, accent, scheme })\n  }, [skin, accent, scheme])\n\n  // `open` is compared by value, so an inline `open={{ g: 2 }}` re-applies only when g or i change\n  const openG = typeof open === 'object' && open ? open.g : undefined\n  const openI = typeof open === 'object' && open ? open.i : undefined\n  const shown = open === undefined ? undefined : !!open\n  useEffect(() => {\n    if (shown === undefined) return\n    // open({ g, i }) on a viewer already showing is a navigation (core)\n    if (shown) viewer.open(openG === undefined ? undefined : { g: openG, i: openI })\n    else viewer.close()\n  }, [shown, openG, openI, viewer])\n\n  useEffect(() => {\n    if (!onClose) return\n    return viewer.on('closed', () => onClose())\n  }, [onClose, viewer])\n\n  return <GalleristContext.Provider value={viewer}>{children}</GalleristContext.Provider>\n})\n\nexport interface GalleristOverlayProps {\n  anchor: OverlaySpec['anchor']\n  id?: string\n  layer?: number\n  interactive?: boolean\n  visibleAt?: [number, number]\n  className?: string\n  children?: ReactNode\n}\n\n/** Render a React subtree as an image-space / viewport overlay via a portal (decision P0-G). */\nfunction Overlay(props: GalleristOverlayProps): ReactNode {\n  const viewer = useViewerContext()\n  const [host, setHost] = useState<HTMLElement | null>(null)\n  // useId is SSR-deterministic (server + client agree), unlike a module-global counter.\n  const autoId = useId()\n  const id = props.id ?? autoId\n\n  // Depend on the VALUE of the object/array props, not their identity. The common usage passes\n  // inline literals (`anchor={{ kind: 'viewport', … }}`) that are a fresh reference every render;\n  // keying on identity disposed+re-registered the overlay plugin on every parent render, forcing a\n  // full overlay repaint. Serializing makes re-registration happen only on a real change (I-X3).\n  const anchorKey = JSON.stringify(props.anchor)\n  const visibleAtKey = JSON.stringify(props.visibleAt ?? null)\n  // biome-ignore lint/correctness/useExhaustiveDependencies: anchor/visibleAt tracked by value key\n  useEffect(() => {\n    const node = document.createElement('div')\n    setHost(node)\n    const spec: OverlaySpec = {\n      id,\n      anchor: props.anchor,\n      layer: props.layer,\n      interactive: props.interactive,\n      visibleAt: props.visibleAt,\n      class: props.className,\n      render: () => node, // stable host; React owns its children through the portal\n    }\n    const dispose = viewer.use(() => ({ name: `overlay:${id}`, overlays: [spec] }))\n    return () => {\n      dispose()\n      setHost(null)\n    }\n  }, [viewer, id, anchorKey, visibleAtKey, props.layer, props.interactive, props.className])\n\n  return host ? createPortal(props.children, host) : null\n}\n\nexport interface GalleristRegionProps {\n  name: RegionName\n  children?: ReactNode\n}\n\n/** Render a React subtree into a named renderer region (toolbar, footer, …) via a portal. */\nfunction Region(props: GalleristRegionProps): ReactNode {\n  const viewer = useViewerContext()\n  const [host, setHost] = useState<HTMLElement | null>(null)\n  const { name } = props\n\n  useEffect(() => {\n    const node = document.createElement('div')\n    setHost(node)\n    const dispose = viewer.use(() => ({\n      name: `region:${name}`,\n      regions: { [name]: () => node },\n    }))\n    return () => {\n      dispose()\n      setHost(null)\n    }\n  }, [viewer, name])\n\n  return host ? createPortal(props.children, host) : null\n}\n\nexport interface GalleristCaptionProps<GM = unknown, IM = unknown> {\n  /**\n   * the caption for the current item; `null`, `undefined`, `true` or `false` shows its text\n   * `caption` (in a `span.gallerist-caption-text`, the theme's caption type)\n   */\n  children: (current: {\n    item: Item<IM>\n    group: Group<GM, IM>\n    cursor: Readonly<Cursor>\n  }) => ReactNode\n}\n\n/**\n * Render the caption for the current item with React, into the renderer's caption region (the\n * caption bar, the editorial placard, wherever the preset puts it). Re-renders on navigation and\n * collection changes. Its text is the viewer's accessible description, like a text caption.\n */\nfunction Caption<GM = unknown, IM = unknown>(props: GalleristCaptionProps<GM, IM>): ReactNode {\n  const { item, group, cursor } = useCurrentItem<GM, IM>()\n  const out = item && group ? props.children({ item, group, cursor }) : null\n  return (\n    <Region name=\"caption\">\n      {out == null || typeof out === 'boolean' ? text(item?.caption) : out}\n    </Region>\n  )\n}\n\n// The item's own text caption, styled like the bar's text. Untyped data (JSON, a CDN page) can still\n// carry an old object-shaped caption, which React would throw on: anything but a string is none.\nfunction text(caption: unknown): ReactNode {\n  return typeof caption === 'string' && caption ? (\n    <span className=\"gallerist-caption-text\">{caption}</span>\n  ) : null\n}\n\nexport const Gallerist = Object.assign(GalleristBase, { Overlay, Region, Caption })\n"],"mappings":"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","names":["Gallerist","import_renderer_dom","import_react","import_react","import_react","Gallerist"]}

package/dist/index.d.cts

@@ -0,0 +1,141 @@
+import { PresetName, Skin, Accent, ColorScheme, ArrowLayout, RailPlacement, Strings, ItemIndicator, MountOptions } from '@gallerist/renderer-dom';
+export { Accent, ArrowLayout, ColorScheme, DEFAULT_STRINGS, GroupAxis, ItemIndicator, PresetName, RailPlacement, ResolvedPreset, Skin, Strings, resolvePreset } from '@gallerist/renderer-dom';
+import * as react from 'react';
+import { ReactNode } from 'react';
+import { ViewerApi, ViewerState, Item, Group, Cursor, ViewerOptions, OverlaySpec, RegionName } from '@gallerist/core';
+
+declare const GalleristContext: react.Context<ViewerApi | null>;
+declare function useViewerContext(): ViewerApi;
+
+interface UseGallerist {
+    state: Readonly<ViewerState>;
+    viewer: ViewerApi;
+    open: ViewerApi['open'];
+    close: ViewerApi['close'];
+    next: ViewerApi['next'];
+    prev: ViewerApi['prev'];
+    nextItem: ViewerApi['nextItem'];
+    prevItem: ViewerApi['prevItem'];
+    goTo: ViewerApi['goTo'];
+    goToId: ViewerApi['goToId'];
+    zoomTo: ViewerApi['zoomTo'];
+    resetZoom: ViewerApi['resetZoom'];
+}
+/** Bind a React component to a viewer's state (useSyncExternalStore) + its actions. */
+declare function useGallerist(viewer: ViewerApi): UseGallerist;
+
+/** The viewer's current item, its group and its position. */
+interface CurrentItem<GM = unknown, IM = unknown> {
+    /** undefined only for an empty collection */
+    item: Item<IM> | undefined;
+    group: Group<GM, IM> | undefined;
+    cursor: Readonly<Cursor>;
+}
+/**
+ * The current item, group and cursor of the enclosing `<Gallerist>` (or of `viewer`). Re-renders
+ * when the cursor or the collection changes, not on zoom or pan.
+ */
+declare function useCurrentItem<GM = unknown, IM = unknown>(viewer?: ViewerApi): CurrentItem<GM, IM>;
+
+/** A position to open at: group `g`, item `i` (default: the group's remembered item). */
+interface GalleristOpenAt {
+    g: number;
+    i?: number;
+}
+/**
+ * `items` / `groups` / `collection` and `on` are reactive. Changed data swaps the collection in
+ * place (diffed by id, keeping the cursor); data rebuilt with the same content is ignored. Every other viewer option
+ * (`loop`, `itemMemory`, `startAt`, `plugins`, `overlays`, …) and the layout props (`container`,
+ * `preset`, `arrows`, `rail`, `label`, `preload`, `adapters`, …) are read once; change the
+ * component's `key` to apply new ones. `skin`, `accent`, `scheme` and `open` are reactive.
+ */
+interface GalleristProps extends ViewerOptions {
+    /**
+     * Controlled visibility. `true` opens at the current position; `{ g, i }` opens there, and a new
+     * position while open moves the cursor (applied when the value changes, so the user can still
+     * navigate away from it); `false` closes. Leave it undefined to drive the viewer through the ref.
+     */
+    open?: boolean | GalleristOpenAt;
+    onClose?: () => void;
+    container?: HTMLElement | null;
+    controls?: boolean;
+    /** layout preset (arrow placement, auto-hide, data-gallerist-preset, the thumbnails() defaults) — UX-E. */
+    preset?: PresetName;
+    /** visual skin, default `gallery`; other skins need their stylesheet (reactive). */
+    skin?: Skin;
+    /** the skin's accent by name, e.g. `mint` (Gallery) or `cyan` (Console) (reactive). */
+    accent?: Accent;
+    /** colour scheme: `dark`, `light` or `auto`; unset, the skin's own default (reactive). */
+    scheme?: ColorScheme;
+    /** within-group arrow placement (overrides the preset default) — UX-D. */
+    arrows?: ArrowLayout;
+    /** thumbnail rail placement (overrides the preset default) — UX-E. */
+    rail?: RailPlacement;
+    /** auto-hide chrome on idle (overrides the preset default) — UX-C. */
+    autoHide?: boolean;
+    /** linear flat traversal: ←/→ walks the flattened item sequence; pairs with a flat thumbnail rail. */
+    linear?: boolean;
+    /** UI text overrides (button labels, announcements) for translation; read once at mount. */
+    strings?: Partial<Strings>;
+    /** item position indicator: `pills` (default), `dots`, `counter` or `placard`; read once at mount. */
+    itemIndicator?: ItemIndicator;
+    /** zoom navigator while zoomed in (overrides the preset default); read once at mount. */
+    navigator?: boolean;
+    /** framed media: the work hangs with room around it (overrides the preset); read once at mount. */
+    frame?: boolean;
+    /** which arrows move between groups (overrides the rail and preset default); read once at mount. */
+    groupAxis?: MountOptions['groupAxis'];
+    /** name the group arrows after their target group (overrides the preset); read once at mount. */
+    arrowLabels?: MountOptions['arrowLabels'];
+    /** the overlay dialog's accessible name (default `strings.dialog`); read once at mount. */
+    label?: string;
+    /** where focus returns when the overlay closes (default: what had focus when it opened); read
+     *  once at mount, so pass a getter for a target that changes. */
+    returnFocus?: MountOptions['returnFocus'];
+    /** how many groups to keep mounted ahead of and behind the current one; read once at mount. */
+    preload?: MountOptions['preload'];
+    /** media adapters, replacing the default image adapter; read once at mount. */
+    adapters?: MountOptions['adapters'];
+    children?: ReactNode;
+}
+interface GalleristOverlayProps {
+    anchor: OverlaySpec['anchor'];
+    id?: string;
+    layer?: number;
+    interactive?: boolean;
+    visibleAt?: [number, number];
+    className?: string;
+    children?: ReactNode;
+}
+/** Render a React subtree as an image-space / viewport overlay via a portal (decision P0-G). */
+declare function Overlay(props: GalleristOverlayProps): ReactNode;
+interface GalleristRegionProps {
+    name: RegionName;
+    children?: ReactNode;
+}
+/** Render a React subtree into a named renderer region (toolbar, footer, …) via a portal. */
+declare function Region(props: GalleristRegionProps): ReactNode;
+interface GalleristCaptionProps<GM = unknown, IM = unknown> {
+    /**
+     * the caption for the current item; `null`, `undefined`, `true` or `false` shows its text
+     * `caption` (in a `span.gallerist-caption-text`, the theme's caption type)
+     */
+    children: (current: {
+        item: Item<IM>;
+        group: Group<GM, IM>;
+        cursor: Readonly<Cursor>;
+    }) => ReactNode;
+}
+/**
+ * Render the caption for the current item with React, into the renderer's caption region (the
+ * caption bar, the editorial placard, wherever the preset puts it). Re-renders on navigation and
+ * collection changes. Its text is the viewer's accessible description, like a text caption.
+ */
+declare function Caption<GM = unknown, IM = unknown>(props: GalleristCaptionProps<GM, IM>): ReactNode;
+declare const Gallerist: react.ForwardRefExoticComponent<GalleristProps & react.RefAttributes<ViewerApi>> & {
+    Overlay: typeof Overlay;
+    Region: typeof Region;
+    Caption: typeof Caption;
+};
+
+export { type CurrentItem, Gallerist, type GalleristCaptionProps, GalleristContext, type GalleristOpenAt, type GalleristOverlayProps, type GalleristProps, type GalleristRegionProps, type UseGallerist, useCurrentItem, useGallerist, useViewerContext };

package/dist/index.d.ts

@@ -0,0 +1,141 @@
+import { PresetName, Skin, Accent, ColorScheme, ArrowLayout, RailPlacement, Strings, ItemIndicator, MountOptions } from '@gallerist/renderer-dom';
+export { Accent, ArrowLayout, ColorScheme, DEFAULT_STRINGS, GroupAxis, ItemIndicator, PresetName, RailPlacement, ResolvedPreset, Skin, Strings, resolvePreset } from '@gallerist/renderer-dom';
+import * as react from 'react';
+import { ReactNode } from 'react';
+import { ViewerApi, ViewerState, Item, Group, Cursor, ViewerOptions, OverlaySpec, RegionName } from '@gallerist/core';
+
+declare const GalleristContext: react.Context<ViewerApi | null>;
+declare function useViewerContext(): ViewerApi;
+
+interface UseGallerist {
+    state: Readonly<ViewerState>;
+    viewer: ViewerApi;
+    open: ViewerApi['open'];
+    close: ViewerApi['close'];
+    next: ViewerApi['next'];
+    prev: ViewerApi['prev'];
+    nextItem: ViewerApi['nextItem'];
+    prevItem: ViewerApi['prevItem'];
+    goTo: ViewerApi['goTo'];
+    goToId: ViewerApi['goToId'];
+    zoomTo: ViewerApi['zoomTo'];
+    resetZoom: ViewerApi['resetZoom'];
+}
+/** Bind a React component to a viewer's state (useSyncExternalStore) + its actions. */
+declare function useGallerist(viewer: ViewerApi): UseGallerist;
+
+/** The viewer's current item, its group and its position. */
+interface CurrentItem<GM = unknown, IM = unknown> {
+    /** undefined only for an empty collection */
+    item: Item<IM> | undefined;
+    group: Group<GM, IM> | undefined;
+    cursor: Readonly<Cursor>;
+}
+/**
+ * The current item, group and cursor of the enclosing `<Gallerist>` (or of `viewer`). Re-renders
+ * when the cursor or the collection changes, not on zoom or pan.
+ */
+declare function useCurrentItem<GM = unknown, IM = unknown>(viewer?: ViewerApi): CurrentItem<GM, IM>;
+
+/** A position to open at: group `g`, item `i` (default: the group's remembered item). */
+interface GalleristOpenAt {
+    g: number;
+    i?: number;
+}
+/**
+ * `items` / `groups` / `collection` and `on` are reactive. Changed data swaps the collection in
+ * place (diffed by id, keeping the cursor); data rebuilt with the same content is ignored. Every other viewer option
+ * (`loop`, `itemMemory`, `startAt`, `plugins`, `overlays`, …) and the layout props (`container`,
+ * `preset`, `arrows`, `rail`, `label`, `preload`, `adapters`, …) are read once; change the
+ * component's `key` to apply new ones. `skin`, `accent`, `scheme` and `open` are reactive.
+ */
+interface GalleristProps extends ViewerOptions {
+    /**
+     * Controlled visibility. `true` opens at the current position; `{ g, i }` opens there, and a new
+     * position while open moves the cursor (applied when the value changes, so the user can still
+     * navigate away from it); `false` closes. Leave it undefined to drive the viewer through the ref.
+     */
+    open?: boolean | GalleristOpenAt;
+    onClose?: () => void;
+    container?: HTMLElement | null;
+    controls?: boolean;
+    /** layout preset (arrow placement, auto-hide, data-gallerist-preset, the thumbnails() defaults) — UX-E. */
+    preset?: PresetName;
+    /** visual skin, default `gallery`; other skins need their stylesheet (reactive). */
+    skin?: Skin;
+    /** the skin's accent by name, e.g. `mint` (Gallery) or `cyan` (Console) (reactive). */
+    accent?: Accent;
+    /** colour scheme: `dark`, `light` or `auto`; unset, the skin's own default (reactive). */
+    scheme?: ColorScheme;
+    /** within-group arrow placement (overrides the preset default) — UX-D. */
+    arrows?: ArrowLayout;
+    /** thumbnail rail placement (overrides the preset default) — UX-E. */
+    rail?: RailPlacement;
+    /** auto-hide chrome on idle (overrides the preset default) — UX-C. */
+    autoHide?: boolean;
+    /** linear flat traversal: ←/→ walks the flattened item sequence; pairs with a flat thumbnail rail. */
+    linear?: boolean;
+    /** UI text overrides (button labels, announcements) for translation; read once at mount. */
+    strings?: Partial<Strings>;
+    /** item position indicator: `pills` (default), `dots`, `counter` or `placard`; read once at mount. */
+    itemIndicator?: ItemIndicator;
+    /** zoom navigator while zoomed in (overrides the preset default); read once at mount. */
+    navigator?: boolean;
+    /** framed media: the work hangs with room around it (overrides the preset); read once at mount. */
+    frame?: boolean;
+    /** which arrows move between groups (overrides the rail and preset default); read once at mount. */
+    groupAxis?: MountOptions['groupAxis'];
+    /** name the group arrows after their target group (overrides the preset); read once at mount. */
+    arrowLabels?: MountOptions['arrowLabels'];
+    /** the overlay dialog's accessible name (default `strings.dialog`); read once at mount. */
+    label?: string;
+    /** where focus returns when the overlay closes (default: what had focus when it opened); read
+     *  once at mount, so pass a getter for a target that changes. */
+    returnFocus?: MountOptions['returnFocus'];
+    /** how many groups to keep mounted ahead of and behind the current one; read once at mount. */
+    preload?: MountOptions['preload'];
+    /** media adapters, replacing the default image adapter; read once at mount. */
+    adapters?: MountOptions['adapters'];
+    children?: ReactNode;
+}
+interface GalleristOverlayProps {
+    anchor: OverlaySpec['anchor'];
+    id?: string;
+    layer?: number;
+    interactive?: boolean;
+    visibleAt?: [number, number];
+    className?: string;
+    children?: ReactNode;
+}
+/** Render a React subtree as an image-space / viewport overlay via a portal (decision P0-G). */
+declare function Overlay(props: GalleristOverlayProps): ReactNode;
+interface GalleristRegionProps {
+    name: RegionName;
+    children?: ReactNode;
+}
+/** Render a React subtree into a named renderer region (toolbar, footer, …) via a portal. */
+declare function Region(props: GalleristRegionProps): ReactNode;
+interface GalleristCaptionProps<GM = unknown, IM = unknown> {
+    /**
+     * the caption for the current item; `null`, `undefined`, `true` or `false` shows its text
+     * `caption` (in a `span.gallerist-caption-text`, the theme's caption type)
+     */
+    children: (current: {
+        item: Item<IM>;
+        group: Group<GM, IM>;
+        cursor: Readonly<Cursor>;
+    }) => ReactNode;
+}
+/**
+ * Render the caption for the current item with React, into the renderer's caption region (the
+ * caption bar, the editorial placard, wherever the preset puts it). Re-renders on navigation and
+ * collection changes. Its text is the viewer's accessible description, like a text caption.
+ */
+declare function Caption<GM = unknown, IM = unknown>(props: GalleristCaptionProps<GM, IM>): ReactNode;
+declare const Gallerist: react.ForwardRefExoticComponent<GalleristProps & react.RefAttributes<ViewerApi>> & {
+    Overlay: typeof Overlay;
+    Region: typeof Region;
+    Caption: typeof Caption;
+};
+
+export { type CurrentItem, Gallerist, type GalleristCaptionProps, GalleristContext, type GalleristOpenAt, type GalleristOverlayProps, type GalleristProps, type GalleristRegionProps, type UseGallerist, useCurrentItem, useGallerist, useViewerContext };

package/dist/index.js

@@ -0,0 +1,306 @@
+"use client";
+
+// src/index.ts
+import {
+  DEFAULT_STRINGS,
+  resolvePreset
+} from "@gallerist/renderer-dom";
+
+// src/context.ts
+import { createContext, useContext } from "react";
+var GalleristContext = createContext(null);
+function useViewerContext() {
+  const viewer = useContext(GalleristContext);
+  if (!viewer)
+    throw new Error(
+      "Gallerist.Overlay / Gallerist.Region / Gallerist.Caption must be used inside <Gallerist>"
+    );
+  return viewer;
+}
+
+// src/useGallerist.ts
+import { useCallback, useMemo, useSyncExternalStore } from "react";
+function useGallerist(viewer) {
+  const subscribe = useCallback((cb) => viewer.subscribe(cb), [viewer]);
+  const getSnapshot = useCallback(() => viewer.getState(), [viewer]);
+  const state = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+  const actions = useMemo(
+    () => ({
+      open: (at) => viewer.open(at),
+      close: () => viewer.close(),
+      next: () => viewer.next(),
+      prev: () => viewer.prev(),
+      nextItem: () => viewer.nextItem(),
+      prevItem: () => viewer.prevItem(),
+      goTo: (g, i) => viewer.goTo(g, i),
+      goToId: (g, i) => viewer.goToId(g, i),
+      zoomTo: (s, f) => viewer.zoomTo(s, f),
+      resetZoom: () => viewer.resetZoom()
+    }),
+    [viewer]
+  );
+  return { state, viewer, ...actions };
+}
+
+// src/useCurrentItem.ts
+import { useCallback as useCallback2, useContext as useContext2, useRef, useSyncExternalStore as useSyncExternalStore2 } from "react";
+function useCurrentItem(viewer) {
+  const fromContext = useContext2(GalleristContext);
+  const v = viewer ?? fromContext;
+  if (!v) throw new Error("useCurrentItem() must be used inside <Gallerist> or given a viewer");
+  const last = useRef(null);
+  const subscribe = useCallback2((cb) => v.subscribe(cb), [v]);
+  const getSnapshot = useCallback2(() => {
+    const { g, i } = v.getState().cursor;
+    const group = v.getCollection().groups[g];
+    const item = group?.items[i];
+    const prev = last.current;
+    if (prev && prev.item === item && prev.group === group && prev.cursor.g === g && prev.cursor.i === i)
+      return prev;
+    last.current = { item, group, cursor: { g, i } };
+    return last.current;
+  }, [v]);
+  return useSyncExternalStore2(subscribe, getSnapshot, getSnapshot);
+}
+
+// src/Gallerist.tsx
+import {
+  createViewer
+} from "@gallerist/core";
+import {
+  applyAppearance,
+  mount
+} from "@gallerist/renderer-dom";
+import {
+  forwardRef,
+  useEffect,
+  useId,
+  useImperativeHandle,
+  useInsertionEffect,
+  useRef as useRef2,
+  useState
+} from "react";
+import { createPortal } from "react-dom";
+import { jsx } from "react/jsx-runtime";
+var EVENT_NAMES = Object.keys({
+  init: 1,
+  destroy: 1,
+  open: 1,
+  opened: 1,
+  close: 1,
+  closed: 1,
+  beforeSlide: 1,
+  slide: 1,
+  afterSlide: 1,
+  beforeItem: 1,
+  item: 1,
+  afterItem: 1,
+  zoom: 1,
+  zoomEnd: 1,
+  load: 1,
+  loaded: 1,
+  loadError: 1,
+  collectionChange: 1,
+  fullscreenChange: 1,
+  overlayClick: 1
+});
+var toCollection = (items, groups, collection) => collection ?? { groups: groups ?? (items ?? []).map((it) => ({ id: it.id, items: [it] })) };
+var shallowSame = (a, b) => {
+  if (Object.is(a, b)) return true;
+  if (Array.isArray(a) && Array.isArray(b)) {
+    return a.length === b.length && a.every((v, i) => Object.is(v, b[i]));
+  }
+  if (!a || !b || typeof a !== "object" || typeof b !== "object") return false;
+  const ka = Object.keys(a);
+  const rb = b;
+  return ka.length === Object.keys(b).length && ka.every((k) => Object.is(a[k], rb[k]));
+};
+var sameRecord = (a, b, skip) => {
+  const ra = a;
+  const rb = b;
+  const ka = Object.keys(ra).filter((k) => k !== skip);
+  const kb = Object.keys(rb).filter((k) => k !== skip);
+  return ka.length === kb.length && ka.every((k) => shallowSame(ra[k], rb[k]));
+};
+var sameCollection = (a, b) => a.groups.length === b.groups.length && shallowSame(a.meta, b.meta) && a.groups.every((g, gi) => {
+  const h = b.groups[gi];
+  return !!h && sameRecord(g, h, "items") && g.items.length === h.items.length && g.items.every((it, ii) => {
+    const other = h.items[ii];
+    return !!other && sameRecord(it, other);
+  });
+});
+var GalleristBase = forwardRef(function Gallerist(props, ref) {
+  const {
+    open,
+    onClose,
+    container,
+    controls,
+    preset,
+    skin,
+    accent,
+    scheme,
+    arrows,
+    rail,
+    autoHide,
+    linear,
+    strings,
+    itemIndicator,
+    navigator,
+    frame,
+    groupAxis,
+    arrowLabels,
+    label,
+    returnFocus,
+    preload,
+    adapters,
+    children,
+    ...options
+  } = props;
+  const rootRef = useRef2(null);
+  const { items, groups, collection, on } = options;
+  const onRef = useRef2(on);
+  useInsertionEffect(() => {
+    onRef.current = on;
+  });
+  const [viewer] = useState(() => {
+    const { plugins: _plugins, on: _on, ...rest } = options;
+    const forward = {};
+    for (const name of EVENT_NAMES) {
+      ;
+      forward[name] = (payload) => onRef.current?.[name]?.(payload);
+    }
+    return createViewer({ ...rest, on: forward });
+  });
+  const appliedData = useRef2({ items, groups, collection });
+  useEffect(() => {
+    const prev = appliedData.current;
+    if (prev.items === items && prev.groups === groups && prev.collection === collection) return;
+    appliedData.current = { items, groups, collection };
+    const next = toCollection(items, groups, collection);
+    if (sameCollection(next, viewer.getCollection())) return;
+    try {
+      viewer.setCollection(next);
+    } catch (error) {
+      console.error("[gallerist] ignored an invalid collection update:", error);
+    }
+  }, [viewer, items, groups, collection]);
+  useImperativeHandle(ref, () => viewer, [viewer]);
+  useEffect(() => {
+    const disposers = (options.plugins ?? []).map((plugin) => viewer.use(plugin));
+    return () => {
+      for (const dispose of disposers) dispose();
+    };
+  }, [viewer]);
+  useEffect(() => {
+    const handle = mount(viewer, {
+      container: container ?? null,
+      controls,
+      preset,
+      arrows,
+      rail,
+      autoHide,
+      linear,
+      strings,
+      itemIndicator,
+      navigator,
+      frame,
+      groupAxis,
+      arrowLabels,
+      label,
+      returnFocus,
+      preload,
+      adapters,
+      skin,
+      accent,
+      scheme,
+      loop: options.loop
+    });
+    rootRef.current = handle.root;
+    return () => {
+      handle.destroy();
+      rootRef.current = null;
+    };
+  }, [viewer]);
+  useEffect(() => {
+    const root = rootRef.current;
+    if (root) applyAppearance(root, { skin, accent, scheme });
+  }, [skin, accent, scheme]);
+  const openG = typeof open === "object" && open ? open.g : void 0;
+  const openI = typeof open === "object" && open ? open.i : void 0;
+  const shown = open === void 0 ? void 0 : !!open;
+  useEffect(() => {
+    if (shown === void 0) return;
+    if (shown) viewer.open(openG === void 0 ? void 0 : { g: openG, i: openI });
+    else viewer.close();
+  }, [shown, openG, openI, viewer]);
+  useEffect(() => {
+    if (!onClose) return;
+    return viewer.on("closed", () => onClose());
+  }, [onClose, viewer]);
+  return /* @__PURE__ */ jsx(GalleristContext.Provider, { value: viewer, children });
+});
+function Overlay(props) {
+  const viewer = useViewerContext();
+  const [host, setHost] = useState(null);
+  const autoId = useId();
+  const id = props.id ?? autoId;
+  const anchorKey = JSON.stringify(props.anchor);
+  const visibleAtKey = JSON.stringify(props.visibleAt ?? null);
+  useEffect(() => {
+    const node = document.createElement("div");
+    setHost(node);
+    const spec = {
+      id,
+      anchor: props.anchor,
+      layer: props.layer,
+      interactive: props.interactive,
+      visibleAt: props.visibleAt,
+      class: props.className,
+      render: () => node
+      // stable host; React owns its children through the portal
+    };
+    const dispose = viewer.use(() => ({ name: `overlay:${id}`, overlays: [spec] }));
+    return () => {
+      dispose();
+      setHost(null);
+    };
+  }, [viewer, id, anchorKey, visibleAtKey, props.layer, props.interactive, props.className]);
+  return host ? createPortal(props.children, host) : null;
+}
+function Region(props) {
+  const viewer = useViewerContext();
+  const [host, setHost] = useState(null);
+  const { name } = props;
+  useEffect(() => {
+    const node = document.createElement("div");
+    setHost(node);
+    const dispose = viewer.use(() => ({
+      name: `region:${name}`,
+      regions: { [name]: () => node }
+    }));
+    return () => {
+      dispose();
+      setHost(null);
+    };
+  }, [viewer, name]);
+  return host ? createPortal(props.children, host) : null;
+}
+function Caption(props) {
+  const { item, group, cursor } = useCurrentItem();
+  const out = item && group ? props.children({ item, group, cursor }) : null;
+  return /* @__PURE__ */ jsx(Region, { name: "caption", children: out == null || typeof out === "boolean" ? text(item?.caption) : out });
+}
+function text(caption) {
+  return typeof caption === "string" && caption ? /* @__PURE__ */ jsx("span", { className: "gallerist-caption-text", children: caption }) : null;
+}
+var Gallerist2 = Object.assign(GalleristBase, { Overlay, Region, Caption });
+export {
+  DEFAULT_STRINGS,
+  Gallerist2 as Gallerist,
+  GalleristContext,
+  resolvePreset,
+  useCurrentItem,
+  useGallerist,
+  useViewerContext
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/context.ts","../src/useGallerist.ts","../src/useCurrentItem.ts","../src/Gallerist.tsx"],"sourcesContent":["// @gallerist/react — React adapter (spec §16). Thin binding over the headless store.\nexport {\n  type Accent,\n  type ArrowLayout,\n  type ColorScheme,\n  type GroupAxis,\n  type ItemIndicator,\n  type PresetName,\n  type RailPlacement,\n  type ResolvedPreset,\n  type Skin,\n  type Strings,\n  DEFAULT_STRINGS,\n  resolvePreset,\n} from '@gallerist/renderer-dom'\nexport { useViewerContext, GalleristContext } from './context'\nexport { type UseGallerist, useGallerist } from './useGallerist'\nexport { type CurrentItem, useCurrentItem } from './useCurrentItem'\nexport {\n  Gallerist,\n  type GalleristCaptionProps,\n  type GalleristOpenAt,\n  type GalleristOverlayProps,\n  type GalleristProps,\n  type GalleristRegionProps,\n} from './Gallerist'\n","import type { ViewerApi } from '@gallerist/core'\nimport { createContext, useContext } from 'react'\n\nexport const GalleristContext = createContext<ViewerApi | null>(null)\n\nexport function useViewerContext(): ViewerApi {\n  const viewer = useContext(GalleristContext)\n  if (!viewer)\n    throw new Error(\n      'Gallerist.Overlay / Gallerist.Region / Gallerist.Caption must be used inside <Gallerist>',\n    )\n  return viewer\n}\n","import type { ViewerApi, ViewerState } from '@gallerist/core'\nimport { useCallback, useMemo, useSyncExternalStore } from 'react'\n\nexport interface UseGallerist {\n  state: Readonly<ViewerState>\n  viewer: ViewerApi\n  open: ViewerApi['open']\n  close: ViewerApi['close']\n  next: ViewerApi['next']\n  prev: ViewerApi['prev']\n  nextItem: ViewerApi['nextItem']\n  prevItem: ViewerApi['prevItem']\n  goTo: ViewerApi['goTo']\n  goToId: ViewerApi['goToId']\n  zoomTo: ViewerApi['zoomTo']\n  resetZoom: ViewerApi['resetZoom']\n}\n\n/** Bind a React component to a viewer's state (useSyncExternalStore) + its actions. */\nexport function useGallerist(viewer: ViewerApi): UseGallerist {\n  const subscribe = useCallback((cb: () => void) => viewer.subscribe(cb), [viewer])\n  const getSnapshot = useCallback(() => viewer.getState(), [viewer])\n  const state = useSyncExternalStore(subscribe, getSnapshot, getSnapshot)\n\n  // Stabilize the action closures so they keep a constant identity across re-renders (this hook\n  // re-renders on every store commit). Otherwise each commit handed consumers fresh function\n  // references, defeating React.memo / dependency-array memoization downstream (S-PERF4).\n  const actions = useMemo(\n    () => ({\n      open: (at?: Parameters<ViewerApi['open']>[0]) => viewer.open(at),\n      close: () => viewer.close(),\n      next: () => viewer.next(),\n      prev: () => viewer.prev(),\n      nextItem: () => viewer.nextItem(),\n      prevItem: () => viewer.prevItem(),\n      goTo: (g: number, i?: number) => viewer.goTo(g, i),\n      goToId: (g: string, i?: string) => viewer.goToId(g, i),\n      zoomTo: (s: number, f?: Parameters<ViewerApi['zoomTo']>[1]) => viewer.zoomTo(s, f),\n      resetZoom: () => viewer.resetZoom(),\n    }),\n    [viewer],\n  )\n\n  return { state, viewer, ...actions }\n}\n","import type { Cursor, Group, Item, ViewerApi } from '@gallerist/core'\nimport { useCallback, useContext, useRef, useSyncExternalStore } from 'react'\nimport { GalleristContext } from './context'\n\n/** The viewer's current item, its group and its position. */\nexport interface CurrentItem<GM = unknown, IM = unknown> {\n  /** undefined only for an empty collection */\n  item: Item<IM> | undefined\n  group: Group<GM, IM> | undefined\n  cursor: Readonly<Cursor>\n}\n\n/**\n * The current item, group and cursor of the enclosing `<Gallerist>` (or of `viewer`). Re-renders\n * when the cursor or the collection changes, not on zoom or pan.\n */\nexport function useCurrentItem<GM = unknown, IM = unknown>(\n  viewer?: ViewerApi,\n): CurrentItem<GM, IM> {\n  const fromContext = useContext(GalleristContext)\n  const v = viewer ?? fromContext\n  if (!v) throw new Error('useCurrentItem() must be used inside <Gallerist> or given a viewer')\n  // useSyncExternalStore needs a stable snapshot: the same object until the item really changes\n  const last = useRef<CurrentItem | null>(null)\n  const subscribe = useCallback((cb: () => void) => v.subscribe(cb), [v])\n  const getSnapshot = useCallback((): CurrentItem => {\n    const { g, i } = v.getState().cursor\n    const group = v.getCollection().groups[g]\n    const item = group?.items[i]\n    const prev = last.current\n    if (\n      prev &&\n      prev.item === item &&\n      prev.group === group &&\n      prev.cursor.g === g &&\n      prev.cursor.i === i\n    )\n      return prev\n    last.current = { item, group, cursor: { g, i } }\n    return last.current\n  }, [v])\n  return useSyncExternalStore(subscribe, getSnapshot, getSnapshot) as CurrentItem<GM, IM>\n}\n","import {\n  type Collection,\n  type Cursor,\n  type EventHandlers,\n  type EventMap,\n  type Group,\n  type Item,\n  type OverlaySpec,\n  type RegionName,\n  type ViewerApi,\n  type ViewerOptions,\n  createViewer,\n} from '@gallerist/core'\nimport {\n  type Accent,\n  type ArrowLayout,\n  type ColorScheme,\n  type ItemIndicator,\n  type MountOptions,\n  type PresetName,\n  type RailPlacement,\n  type Skin,\n  type Strings,\n  applyAppearance,\n  mount,\n} from '@gallerist/renderer-dom'\nimport {\n  type ReactNode,\n  forwardRef,\n  useEffect,\n  useId,\n  useImperativeHandle,\n  useInsertionEffect,\n  useRef,\n  useState,\n} from 'react'\nimport { createPortal } from 'react-dom'\nimport { GalleristContext, useViewerContext } from './context'\nimport { useCurrentItem } from './useCurrentItem'\n\n/** A position to open at: group `g`, item `i` (default: the group's remembered item). */\nexport interface GalleristOpenAt {\n  g: number\n  i?: number\n}\n\n/**\n * `items` / `groups` / `collection` and `on` are reactive. Changed data swaps the collection in\n * place (diffed by id, keeping the cursor); data rebuilt with the same content is ignored. Every other viewer option\n * (`loop`, `itemMemory`, `startAt`, `plugins`, `overlays`, …) and the layout props (`container`,\n * `preset`, `arrows`, `rail`, `label`, `preload`, `adapters`, …) are read once; change the\n * component's `key` to apply new ones. `skin`, `accent`, `scheme` and `open` are reactive.\n */\nexport interface GalleristProps extends ViewerOptions {\n  /**\n   * Controlled visibility. `true` opens at the current position; `{ g, i }` opens there, and a new\n   * position while open moves the cursor (applied when the value changes, so the user can still\n   * navigate away from it); `false` closes. Leave it undefined to drive the viewer through the ref.\n   */\n  open?: boolean | GalleristOpenAt\n  onClose?: () => void\n  container?: HTMLElement | null\n  controls?: boolean\n  /** layout preset (arrow placement, auto-hide, data-gallerist-preset, the thumbnails() defaults) — UX-E. */\n  preset?: PresetName\n  /** visual skin, default `gallery`; other skins need their stylesheet (reactive). */\n  skin?: Skin\n  /** the skin's accent by name, e.g. `mint` (Gallery) or `cyan` (Console) (reactive). */\n  accent?: Accent\n  /** colour scheme: `dark`, `light` or `auto`; unset, the skin's own default (reactive). */\n  scheme?: ColorScheme\n  /** within-group arrow placement (overrides the preset default) — UX-D. */\n  arrows?: ArrowLayout\n  /** thumbnail rail placement (overrides the preset default) — UX-E. */\n  rail?: RailPlacement\n  /** auto-hide chrome on idle (overrides the preset default) — UX-C. */\n  autoHide?: boolean\n  /** linear flat traversal: ←/→ walks the flattened item sequence; pairs with a flat thumbnail rail. */\n  linear?: boolean\n  /** UI text overrides (button labels, announcements) for translation; read once at mount. */\n  strings?: Partial<Strings>\n  /** item position indicator: `pills` (default), `dots`, `counter` or `placard`; read once at mount. */\n  itemIndicator?: ItemIndicator\n  /** zoom navigator while zoomed in (overrides the preset default); read once at mount. */\n  navigator?: boolean\n  /** framed media: the work hangs with room around it (overrides the preset); read once at mount. */\n  frame?: boolean\n  /** which arrows move between groups (overrides the rail and preset default); read once at mount. */\n  groupAxis?: MountOptions['groupAxis']\n  /** name the group arrows after their target group (overrides the preset); read once at mount. */\n  arrowLabels?: MountOptions['arrowLabels']\n  /** the overlay dialog's accessible name (default `strings.dialog`); read once at mount. */\n  label?: string\n  /** where focus returns when the overlay closes (default: what had focus when it opened); read\n   *  once at mount, so pass a getter for a target that changes. */\n  returnFocus?: MountOptions['returnFocus']\n  /** how many groups to keep mounted ahead of and behind the current one; read once at mount. */\n  preload?: MountOptions['preload']\n  /** media adapters, replacing the default image adapter; read once at mount. */\n  adapters?: MountOptions['adapters']\n  children?: ReactNode\n}\n\n// Every viewer event, checked against EventMap (a missing or unknown name fails to compile), so\n// the forwarders below can route each one to the latest `on` handlers.\nconst EVENT_NAMES = Object.keys({\n  init: 1,\n  destroy: 1,\n  open: 1,\n  opened: 1,\n  close: 1,\n  closed: 1,\n  beforeSlide: 1,\n  slide: 1,\n  afterSlide: 1,\n  beforeItem: 1,\n  item: 1,\n  afterItem: 1,\n  zoom: 1,\n  zoomEnd: 1,\n  load: 1,\n  loaded: 1,\n  loadError: 1,\n  collectionChange: 1,\n  fullscreenChange: 1,\n  overlayClick: 1,\n} satisfies Record<keyof EventMap, 1>) as (keyof EventMap)[]\n\n// The collection a data prop describes (flat items → singleton groups). setCollection validates it.\nconst toCollection = (items?: Item[], groups?: Group[], collection?: Collection): Collection =>\n  collection ?? { groups: groups ?? (items ?? []).map((it) => ({ id: it.id, items: [it] })) }\n\n// Values equal at one level of depth: identical, or arrays/plain objects with identical entries\n// (a `source: { src }`, `naturalSize`, or a re-created `overlays` array of the same specs).\nconst shallowSame = (a: unknown, b: unknown): boolean => {\n  if (Object.is(a, b)) return true\n  if (Array.isArray(a) && Array.isArray(b)) {\n    return a.length === b.length && a.every((v, i) => Object.is(v, b[i]))\n  }\n  if (!a || !b || typeof a !== 'object' || typeof b !== 'object') return false\n  const ka = Object.keys(a)\n  const rb = b as Record<string, unknown>\n  return (\n    ka.length === Object.keys(b).length &&\n    ka.every((k) => Object.is((a as Record<string, unknown>)[k], rb[k]))\n  )\n}\nconst sameRecord = (a: object, b: object, skip?: string): boolean => {\n  const ra = a as Record<string, unknown>\n  const rb = b as Record<string, unknown>\n  const ka = Object.keys(ra).filter((k) => k !== skip)\n  const kb = Object.keys(rb).filter((k) => k !== skip)\n  return ka.length === kb.length && ka.every((k) => shallowSame(ra[k], rb[k]))\n}\n// Same content (groups, items and their fields), even when rebuilt as fresh objects — so an\n// inline `items={photos.map(…)}` doesn't swap the collection (and reset load status) every render.\nconst sameCollection = (a: Collection, b: Readonly<Collection>): boolean =>\n  a.groups.length === b.groups.length &&\n  shallowSame(a.meta, b.meta) &&\n  a.groups.every((g, gi) => {\n    const h = b.groups[gi]\n    return (\n      !!h &&\n      sameRecord(g, h, 'items') &&\n      g.items.length === h.items.length &&\n      g.items.every((it, ii) => {\n        const other = h.items[ii]\n        return !!other && sameRecord(it, other)\n      })\n    )\n  })\n\nconst GalleristBase = forwardRef<ViewerApi, GalleristProps>(function Gallerist(props, ref) {\n  const {\n    open,\n    onClose,\n    container,\n    controls,\n    preset,\n    skin,\n    accent,\n    scheme,\n    arrows,\n    rail,\n    autoHide,\n    linear,\n    strings,\n    itemIndicator,\n    navigator,\n    frame,\n    groupAxis,\n    arrowLabels,\n    label,\n    returnFocus,\n    preload,\n    adapters,\n    children,\n    ...options\n  } = props\n  const rootRef = useRef<HTMLElement | null>(null)\n  const { items, groups, collection, on } = options\n\n  // The viewer outlives renders, so its handlers must not capture the first render's `on`: they\n  // forward to whatever `on` the latest committed render passed (a returned `false` still cancels).\n  const onRef = useRef<EventHandlers | undefined>(on)\n  useInsertionEffect(() => {\n    onRef.current = on\n  })\n  // Create the viewer once (core is DOM-free → SSR-safe); options are read at construction. Lazy\n  // useState (not useMemo, which React may discard) guarantees a single stable instance. Plugins\n  // are deliberately NOT registered at construction — they're managed in an effect below so their\n  // teardown runs on unmount (I-X2).\n  const [viewer] = useState(() => {\n    const { plugins: _plugins, on: _on, ...rest } = options\n    const forward: EventHandlers = {}\n    for (const name of EVENT_NAMES) {\n      ;(forward as Record<string, (p: unknown) => unknown>)[name] = (payload) =>\n        (onRef.current?.[name] as ((p: unknown) => unknown) | undefined)?.(payload)\n    }\n    return createViewer({ ...rest, on: forward })\n  })\n\n  // Data props are reactive: new data swaps the collection via setCollection (diffed by id, so the\n  // cursor and zoom survive when the current item does). The first render's data is already in the\n  // viewer; a new reference with the same content is ignored; invalid data (a duplicate id) is\n  // reported and the viewer keeps its current collection instead of crashing the React tree.\n  const appliedData = useRef({ items, groups, collection })\n  useEffect(() => {\n    const prev = appliedData.current\n    if (prev.items === items && prev.groups === groups && prev.collection === collection) return\n    appliedData.current = { items, groups, collection }\n    const next = toCollection(items, groups, collection)\n    if (sameCollection(next, viewer.getCollection())) return\n    try {\n      viewer.setCollection(next)\n    } catch (error) {\n      console.error('[gallerist] ignored an invalid collection update:', error)\n    }\n  }, [viewer, items, groups, collection])\n  useImperativeHandle(ref, () => viewer, [viewer])\n\n  // Register the construction-time plugins via use() and dispose them on unmount, so their\n  // init()-created store subscriptions / observers / DOM don't leak on every remount (the viewer\n  // itself is intentionally never destroyed — see the mount effect). Plugins are mount-time config.\n  // biome-ignore lint/correctness/useExhaustiveDependencies: register once for the viewer's life\n  useEffect(() => {\n    const disposers = (options.plugins ?? []).map((plugin) => viewer.use(plugin))\n    return () => {\n      for (const dispose of disposers) dispose()\n    }\n  }, [viewer])\n\n  // Mount the renderer once per viewer (client-side); container/controls are mount-time only. Only\n  // the renderer (the DOM holder) is torn down here. The viewer is NOT destroyed on cleanup: under\n  // StrictMode the simulated unmount would run viewer.destroy() on the stable useState instance,\n  // permanently poisoning it (registerPlugin/nav short-circuit once destroyed) so re-registered\n  // overlays/regions vanish. The viewer is plain JS (no DOM) and is reclaimed by GC once the\n  // component unmounts and the renderer/hook/overlay subscriptions have all cleaned themselves up.\n  // biome-ignore lint/correctness/useExhaustiveDependencies: intentional mount-once (layout opts read once)\n  useEffect(() => {\n    const handle = mount(viewer, {\n      container: container ?? null,\n      controls,\n      preset,\n      arrows,\n      rail,\n      autoHide,\n      linear,\n      strings,\n      itemIndicator,\n      navigator,\n      frame,\n      groupAxis,\n      arrowLabels,\n      label,\n      returnFocus,\n      preload,\n      adapters,\n      skin,\n      accent,\n      scheme,\n      loop: options.loop,\n    })\n    rootRef.current = handle.root\n    return () => {\n      handle.destroy()\n      rootRef.current = null\n    }\n  }, [viewer])\n\n  // The appearance is reactive: the skin files key off root attributes, so no remount is needed.\n  useEffect(() => {\n    const root = rootRef.current\n    if (root) applyAppearance(root, { skin, accent, scheme })\n  }, [skin, accent, scheme])\n\n  // `open` is compared by value, so an inline `open={{ g: 2 }}` re-applies only when g or i change\n  const openG = typeof open === 'object' && open ? open.g : undefined\n  const openI = typeof open === 'object' && open ? open.i : undefined\n  const shown = open === undefined ? undefined : !!open\n  useEffect(() => {\n    if (shown === undefined) return\n    // open({ g, i }) on a viewer already showing is a navigation (core)\n    if (shown) viewer.open(openG === undefined ? undefined : { g: openG, i: openI })\n    else viewer.close()\n  }, [shown, openG, openI, viewer])\n\n  useEffect(() => {\n    if (!onClose) return\n    return viewer.on('closed', () => onClose())\n  }, [onClose, viewer])\n\n  return <GalleristContext.Provider value={viewer}>{children}</GalleristContext.Provider>\n})\n\nexport interface GalleristOverlayProps {\n  anchor: OverlaySpec['anchor']\n  id?: string\n  layer?: number\n  interactive?: boolean\n  visibleAt?: [number, number]\n  className?: string\n  children?: ReactNode\n}\n\n/** Render a React subtree as an image-space / viewport overlay via a portal (decision P0-G). */\nfunction Overlay(props: GalleristOverlayProps): ReactNode {\n  const viewer = useViewerContext()\n  const [host, setHost] = useState<HTMLElement | null>(null)\n  // useId is SSR-deterministic (server + client agree), unlike a module-global counter.\n  const autoId = useId()\n  const id = props.id ?? autoId\n\n  // Depend on the VALUE of the object/array props, not their identity. The common usage passes\n  // inline literals (`anchor={{ kind: 'viewport', … }}`) that are a fresh reference every render;\n  // keying on identity disposed+re-registered the overlay plugin on every parent render, forcing a\n  // full overlay repaint. Serializing makes re-registration happen only on a real change (I-X3).\n  const anchorKey = JSON.stringify(props.anchor)\n  const visibleAtKey = JSON.stringify(props.visibleAt ?? null)\n  // biome-ignore lint/correctness/useExhaustiveDependencies: anchor/visibleAt tracked by value key\n  useEffect(() => {\n    const node = document.createElement('div')\n    setHost(node)\n    const spec: OverlaySpec = {\n      id,\n      anchor: props.anchor,\n      layer: props.layer,\n      interactive: props.interactive,\n      visibleAt: props.visibleAt,\n      class: props.className,\n      render: () => node, // stable host; React owns its children through the portal\n    }\n    const dispose = viewer.use(() => ({ name: `overlay:${id}`, overlays: [spec] }))\n    return () => {\n      dispose()\n      setHost(null)\n    }\n  }, [viewer, id, anchorKey, visibleAtKey, props.layer, props.interactive, props.className])\n\n  return host ? createPortal(props.children, host) : null\n}\n\nexport interface GalleristRegionProps {\n  name: RegionName\n  children?: ReactNode\n}\n\n/** Render a React subtree into a named renderer region (toolbar, footer, …) via a portal. */\nfunction Region(props: GalleristRegionProps): ReactNode {\n  const viewer = useViewerContext()\n  const [host, setHost] = useState<HTMLElement | null>(null)\n  const { name } = props\n\n  useEffect(() => {\n    const node = document.createElement('div')\n    setHost(node)\n    const dispose = viewer.use(() => ({\n      name: `region:${name}`,\n      regions: { [name]: () => node },\n    }))\n    return () => {\n      dispose()\n      setHost(null)\n    }\n  }, [viewer, name])\n\n  return host ? createPortal(props.children, host) : null\n}\n\nexport interface GalleristCaptionProps<GM = unknown, IM = unknown> {\n  /**\n   * the caption for the current item; `null`, `undefined`, `true` or `false` shows its text\n   * `caption` (in a `span.gallerist-caption-text`, the theme's caption type)\n   */\n  children: (current: {\n    item: Item<IM>\n    group: Group<GM, IM>\n    cursor: Readonly<Cursor>\n  }) => ReactNode\n}\n\n/**\n * Render the caption for the current item with React, into the renderer's caption region (the\n * caption bar, the editorial placard, wherever the preset puts it). Re-renders on navigation and\n * collection changes. Its text is the viewer's accessible description, like a text caption.\n */\nfunction Caption<GM = unknown, IM = unknown>(props: GalleristCaptionProps<GM, IM>): ReactNode {\n  const { item, group, cursor } = useCurrentItem<GM, IM>()\n  const out = item && group ? props.children({ item, group, cursor }) : null\n  return (\n    <Region name=\"caption\">\n      {out == null || typeof out === 'boolean' ? text(item?.caption) : out}\n    </Region>\n  )\n}\n\n// The item's own text caption, styled like the bar's text. Untyped data (JSON, a CDN page) can still\n// carry an old object-shaped caption, which React would throw on: anything but a string is none.\nfunction text(caption: unknown): ReactNode {\n  return typeof caption === 'string' && caption ? (\n    <span className=\"gallerist-caption-text\">{caption}</span>\n  ) : null\n}\n\nexport const Gallerist = Object.assign(GalleristBase, { Overlay, Region, Caption })\n"],"mappings":"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","names":["useCallback","useContext","useSyncExternalStore","useContext","useCallback","useSyncExternalStore","useRef","useRef","Gallerist"]}

package/package.json

@@ -1,6 +1,80 @@
 {
   "name": "@gallerist/react",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.3.0",
+  "description": "React adapter for Gallerist — <Gallerist> component, useGallerist() hook, JSX overlay/region portals.",
+  "license": "MIT",
+  "type": "module",
+  "sideEffects": false,
+  "files": [
+    "dist",
+    "LICENSE",
+    "README.md"
+  ],
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    }
+  },
+  "peerDependencies": {
+    "@gallerist/core": ">=0.3.0 <1",
+    "@gallerist/renderer-dom": ">=0.3.0 <1",
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "devDependencies": {
+    "@testing-library/react": "^16.1.0",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "tsup": "^8.3.5",
+    "typescript": "^5.7.2",
+    "@gallerist/core": "0.3.0",
+    "@gallerist/renderer-dom": "0.3.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/shafayet9780/gallerist.git",
+    "directory": "packages/react"
+  },
+  "homepage": "https://github.com/shafayet9780/gallerist#readme",
+  "bugs": {
+    "url": "https://github.com/shafayet9780/gallerist/issues"
+  },
+  "author": "Shafayet Ahmmed",
+  "keywords": [
+    "lightbox",
+    "gallery",
+    "image-viewer",
+    "media-viewer",
+    "photo-gallery",
+    "carousel",
+    "zoom",
+    "pan",
+    "overlays",
+    "headless",
+    "framework-agnostic",
+    "virtualized",
+    "nested-gallery",
+    "react",
+    "react-component",
+    "hook"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsup",
+    "typecheck": "tsc --noEmit"
+  }
 }