@ikaros-arch/react-3dhop-iiif 0.1.0

package/dist/index.js

@@ -0,0 +1,1979 @@
+"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_FALLBACK_LANGUAGES: () => DEFAULT_FALLBACK_LANGUAGES,
+  DEFAULT_MEASURE_UNIT: () => DEFAULT_MEASURE_UNIT,
+  FORMAT_PREFERENCE: () => FORMAT_PREFERENCE,
+  IIIFCollectionCarousel: () => IIIFCollectionCarousel,
+  IIIFCollectionPicker: () => IIIFCollectionPicker,
+  IIIFCollectionProvider: () => IIIFCollectionProvider,
+  IIIFLanguageSwitcher: () => IIIFLanguageSwitcher,
+  IIIFMetadataPanel: () => IIIFMetadataPanel,
+  IIIFModelsPanel: () => IIIFModelsPanel,
+  IIIFMultiManifestModelsPanel: () => IIIFMultiManifestModelsPanel,
+  IIIFMultiManifestProvider: () => IIIFMultiManifestProvider,
+  IIIFMultiManifestViewer: () => IIIFMultiManifestViewer,
+  IIIFProvider: () => IIIFProvider,
+  IIIFSavedViewsPanel: () => IIIFSavedViewsPanel,
+  IIIFSummary: () => IIIFSummary,
+  IIIFViewer: () => IIIFViewer,
+  LANGUAGE_NAMES: () => LANGUAGE_NAMES,
+  UNITS_IN_METRES: () => UNITS_IN_METRES,
+  buildModelMatrix: () => buildModelMatrix,
+  cameraToView: () => cameraToView,
+  collectLanguages: () => collectLanguages,
+  composeTransforms: () => composeTransforms,
+  getUnitScaleFactor: () => getUnitScaleFactor,
+  isKnownUnit: () => isKnownUnit,
+  layoutManifests: () => layoutManifests,
+  loadCollection: () => loadCollection,
+  loadManifest: () => loadManifest,
+  parseCollection: () => parseCollection,
+  parseManifest: () => parseManifest,
+  resolveLanguageMap: () => resolveLanguageMap,
+  sceneFromManifest: () => sceneFromManifest,
+  sceneFromManifests: () => sceneFromManifests,
+  selectBestSource: () => selectBestSource,
+  track2view: () => track2view,
+  transformToMatrix: () => transformToMatrix,
+  useIIIFCollection: () => useIIIFCollection,
+  useIIIFManifest: () => useIIIFManifest,
+  useIIIFMultiManifest: () => useIIIFMultiManifest,
+  view2track: () => view2track,
+  viewToCameraAnnotation: () => viewToCameraAnnotation
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/IIIFViewer.tsx
+var import_react2 = require("react");
+var import_react_3dhop2 = require("@ikaros-arch/react-3dhop");
+
+// src/context.tsx
+var import_react = require("react");
+var import_react_3dhop = require("@ikaros-arch/react-3dhop");
+
+// src/iiif/mat4.ts
+function identity() {
+  return [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1];
+}
+function translation([x, y, z]) {
+  return [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, x, y, z, 1];
+}
+function scaling([x, y, z]) {
+  return [x, 0, 0, 0, 0, y, 0, 0, 0, 0, z, 0, 0, 0, 0, 1];
+}
+function degToRad(degrees) {
+  return degrees * Math.PI / 180;
+}
+function radToDeg(radians) {
+  return radians * 180 / Math.PI;
+}
+function rotationAngleAxis(angle, axis) {
+  const length = Math.hypot(axis[0], axis[1], axis[2]);
+  if (length === 0) {
+    return identity();
+  }
+  const x = axis[0] / length;
+  const y = axis[1] / length;
+  const z = axis[2] / length;
+  const s = Math.sin(angle);
+  const c = Math.cos(angle);
+  const t = 1 - c;
+  return [
+    t * x * x + c,
+    t * x * y + z * s,
+    t * z * x - y * s,
+    0,
+    t * x * y - z * s,
+    t * y * y + c,
+    t * y * z + x * s,
+    0,
+    t * z * x + y * s,
+    t * y * z - x * s,
+    t * z * z + c,
+    0,
+    0,
+    0,
+    0,
+    1
+  ];
+}
+function multiply(a, b) {
+  const out = new Array(16);
+  for (let column = 0; column < 4; column += 1) {
+    for (let row = 0; row < 4; row += 1) {
+      let sum = 0;
+      for (let k = 0; k < 4; k += 1) {
+        sum += a[k * 4 + row] * b[column * 4 + k];
+      }
+      out[column * 4 + row] = sum;
+    }
+  }
+  return out;
+}
+function transformPoint(m, [x, y, z]) {
+  const w = m[3] * x + m[7] * y + m[11] * z + m[15];
+  const divisor = w === 0 ? 1 : w;
+  return [
+    (m[0] * x + m[4] * y + m[8] * z + m[12]) / divisor,
+    (m[1] * x + m[5] * y + m[9] * z + m[13]) / divisor,
+    (m[2] * x + m[6] * y + m[10] * z + m[14]) / divisor
+  ];
+}
+
+// src/iiif/camera.ts
+var Y_AXIS = [0, 1, 0];
+var NEGATIVE_X_AXIS = [-1, 0, 0];
+var DEGENERATE = 1e-9;
+function view2track(view, framing) {
+  const { sceneCenter, sceneRadiusInv } = framing;
+  const panX = (view.target[0] - sceneCenter[0]) * sceneRadiusInv;
+  const panY = (view.target[1] - sceneCenter[1]) * sceneRadiusInv;
+  const panZ = (view.target[2] - sceneCenter[2]) * sceneRadiusInv;
+  const direction = [
+    view.target[0] - view.position[0],
+    view.target[1] - view.position[1],
+    view.target[2] - view.position[2]
+  ];
+  const length = Math.hypot(direction[0], direction[1], direction[2]);
+  if (length === 0) {
+    return [0, 0, panX, panY, panZ, 0];
+  }
+  const unit = [direction[0] / length, direction[1] / length, direction[2] / length];
+  const distance = length * sceneRadiusInv;
+  const theta = radToDeg(-Math.asin(clamp(unit[1], -1, 1)));
+  let phi;
+  if (Math.hypot(unit[0], unit[2]) > DEGENERATE) {
+    phi = radToDeg(Math.atan2(-unit[0], -unit[2]));
+  } else if (view.up && Math.hypot(view.up[0], view.up[2]) > DEGENERATE) {
+    const sign = theta >= 0 ? 1 : -1;
+    phi = radToDeg(Math.atan2(sign * -view.up[0], sign * -view.up[2]));
+  } else {
+    phi = 0;
+  }
+  return [phi, theta, panX, panY, panZ, distance];
+}
+function track2view(trackState, framing, fov = 60) {
+  const { sceneCenter, sceneRadiusInv } = framing;
+  const [phi, theta, panX, panY, panZ, normalizedDistance] = trackState;
+  const target = [
+    panX / sceneRadiusInv + sceneCenter[0],
+    panY / sceneRadiusInv + sceneCenter[1],
+    panZ / sceneRadiusInv + sceneCenter[2]
+  ];
+  const orientation = multiply(
+    rotationAngleAxis(degToRad(phi), Y_AXIS),
+    rotationAngleAxis(degToRad(theta), NEGATIVE_X_AXIS)
+  );
+  const distance = normalizedDistance / sceneRadiusInv;
+  const offset = transformPoint(orientation, [0, 0, distance]);
+  const up = transformPoint(orientation, [0, 1, 0]);
+  return {
+    position: [offset[0] + target[0], offset[1] + target[1], offset[2] + target[2]],
+    target,
+    up,
+    fov
+  };
+}
+function cameraToView(camera, framing, models = []) {
+  let target = [...framing.sceneCenter];
+  if (camera.target) {
+    target = camera.target;
+  } else if (camera.lookAtId) {
+    const referenced = models.find((model) => model.id === camera.lookAtId);
+    if (referenced) {
+      target = referenced.position;
+    }
+  }
+  return {
+    position: camera.position,
+    target,
+    up: [0, 1, 0],
+    // An orthographic camera has no field of view; 0 is the sentinel 3DHOP's own tooling uses.
+    fov: camera.type === "OrthographicCamera" ? 0 : camera.fov ?? 60
+  };
+}
+function round(value, decimals) {
+  const factor = 10 ** decimals;
+  return Math.round(value * factor) / factor;
+}
+function viewToCameraAnnotation(view, { idBase = "https://example.org/iiif/3d", label, sceneId = "https://example.org/iiif/scene/1" } = {}) {
+  const timestamp = Date.now();
+  const isOrthographic = view.fov === 0;
+  return {
+    id: `${idBase}/camera_${timestamp}`,
+    type: "Annotation",
+    motivation: ["painting"],
+    body: [
+      {
+        id: `${idBase}/cameras/${timestamp}`,
+        type: isOrthographic ? "OrthographicCamera" : "PerspectiveCamera",
+        label: { en: [label ?? `Saved View ${(/* @__PURE__ */ new Date()).toLocaleString()}`] },
+        lookAt: {
+          type: "PointSelector",
+          x: round(view.target[0], 3),
+          y: round(view.target[1], 3),
+          z: round(view.target[2], 3)
+        },
+        ...isOrthographic ? {} : { fieldOfView: round(view.fov, 1) }
+      }
+    ],
+    target: [
+      {
+        type: "SpecificResource",
+        source: { id: sceneId, type: "Scene" },
+        selector: [
+          {
+            type: "PointSelector",
+            x: round(view.position[0], 3),
+            y: round(view.position[1], 3),
+            z: round(view.position[2], 3)
+          }
+        ]
+      }
+    ]
+  };
+}
+function clamp(value, min, max) {
+  return Math.min(max, Math.max(min, value));
+}
+
+// src/iiif/language.ts
+var DEFAULT_FALLBACK_LANGUAGES = ["en", "no", "nb", "nn"];
+function resolveLanguageMap(value, language, fallbacks = DEFAULT_FALLBACK_LANGUAGES) {
+  if (value == null) {
+    return "";
+  }
+  if (typeof value === "string") {
+    return value;
+  }
+  if (typeof value !== "object") {
+    return "";
+  }
+  const pick = (tag) => {
+    const entry = value[tag];
+    if (entry == null) {
+      return void 0;
+    }
+    if (Array.isArray(entry)) {
+      return entry.length > 0 ? entry[0] : void 0;
+    }
+    return entry.length > 0 ? entry : void 0;
+  };
+  const direct = pick(language);
+  if (direct !== void 0) {
+    return direct;
+  }
+  for (const fallback of fallbacks) {
+    if (fallback === language) {
+      continue;
+    }
+    const candidate = pick(fallback);
+    if (candidate !== void 0) {
+      return candidate;
+    }
+  }
+  for (const tag of Object.keys(value)) {
+    const candidate = pick(tag);
+    if (candidate !== void 0) {
+      return candidate;
+    }
+  }
+  return "";
+}
+var LANGUAGE_MAP_KEYS = /* @__PURE__ */ new Set(["label", "value", "summary"]);
+function isLanguageMap(value) {
+  if (value == null || typeof value !== "object" || Array.isArray(value)) {
+    return false;
+  }
+  const entries = Object.entries(value);
+  return entries.length > 0 && entries.every(
+    ([, entry]) => typeof entry === "string" || Array.isArray(entry) && entry.every((item) => typeof item === "string")
+  );
+}
+function collectLanguages(value, into = /* @__PURE__ */ new Set()) {
+  if (value == null || typeof value !== "object") {
+    return into;
+  }
+  if (Array.isArray(value)) {
+    value.forEach((item) => collectLanguages(item, into));
+    return into;
+  }
+  Object.entries(value).forEach(([key, entry]) => {
+    if (LANGUAGE_MAP_KEYS.has(key) && isLanguageMap(entry)) {
+      Object.keys(entry).forEach((tag) => {
+        if (tag !== "none") {
+          into.add(tag);
+        }
+      });
+      return;
+    }
+    collectLanguages(entry, into);
+  });
+  return into;
+}
+
+// src/context.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var IIIFContext = (0, import_react.createContext)(null);
+function useIIIFManifest() {
+  const value = (0, import_react.useContext)(IIIFContext);
+  if (!value) {
+    throw new Error("useIIIFManifest must be used within an <IIIFViewer>.");
+  }
+  return value;
+}
+var IIIFProvider = ({
+  status,
+  error,
+  diagnostics,
+  parsed,
+  scene,
+  language,
+  setLanguage,
+  children
+}) => {
+  const { presenter, registerSceneObserver } = (0, import_react_3dhop.useThreeDHopViewer)();
+  const [framing, setFraming] = (0, import_react.useState)(null);
+  const [visibility, setVisibility] = (0, import_react.useState)({});
+  const [transparency, setTransparency] = (0, import_react.useState)({});
+  (0, import_react.useEffect)(() => {
+    return registerSceneObserver((instance) => {
+      const center = instance.sceneCenter;
+      const radiusInv = instance.sceneRadiusInv;
+      if (Array.isArray(center) && center.length >= 3 && typeof radiusInv === "number") {
+        setFraming({ sceneCenter: [center[0], center[1], center[2]], sceneRadiusInv: radiusInv });
+      }
+      setVisibility({});
+      setTransparency({});
+    });
+  }, [registerSceneObserver]);
+  const localize = (0, import_react.useCallback)(
+    (value2) => resolveLanguageMap(value2, language),
+    [language]
+  );
+  const goToCamera = (0, import_react.useCallback)(
+    (index, durationSeconds = 0.5) => {
+      if (!parsed || !framing || !presenter) {
+        return;
+      }
+      const camera = parsed.cameras[index];
+      if (!camera) {
+        return;
+      }
+      const view = cameraToView(camera, framing, parsed.models);
+      const trackState = view2track(view, framing);
+      if (durationSeconds > 0 && typeof presenter.animateToTrackballPosition === "function") {
+        presenter.animateToTrackballPosition(trackState, durationSeconds);
+      } else {
+        presenter.setTrackballPosition?.(trackState);
+        presenter.repaint?.();
+      }
+      if (camera.type === "OrthographicCamera") {
+        presenter.setCameraOrthographic?.();
+      } else {
+        presenter.setCameraPerspective?.();
+      }
+    },
+    [framing, parsed, presenter]
+  );
+  const saveCurrentView = (0, import_react.useCallback)(
+    (label) => {
+      if (!presenter || !framing) {
+        return null;
+      }
+      const trackState = presenter.getTrackballPosition?.();
+      if (!Array.isArray(trackState) || trackState.length < 6) {
+        return null;
+      }
+      const isOrthographic = presenter.getCameraType?.() === "orthographic";
+      const fov = isOrthographic ? 0 : presenter._scene?.space?.cameraFOV ?? 60;
+      const view = track2view(trackState, framing, fov);
+      return viewToCameraAnnotation(view, { label, sceneId: parsed?.manifest.items?.[0]?.id });
+    },
+    [framing, parsed, presenter]
+  );
+  const instanceKeyFor = (0, import_react.useCallback)(
+    (modelId) => scene?.instanceIdsByModelId[modelId],
+    [scene]
+  );
+  const isModelVisible = (0, import_react.useCallback)(
+    (modelId) => visibility[modelId] ?? true,
+    [visibility]
+  );
+  const setModelVisible = (0, import_react.useCallback)(
+    (modelId, visible) => {
+      const key = instanceKeyFor(modelId);
+      if (!key || !presenter) {
+        return;
+      }
+      if ((visibility[modelId] ?? true) === visible) {
+        return;
+      }
+      presenter.toggleInstanceVisibilityByName?.(key, true);
+      setVisibility((current) => ({ ...current, [modelId]: visible }));
+    },
+    [instanceKeyFor, presenter, visibility]
+  );
+  const isModelTransparent = (0, import_react.useCallback)(
+    (modelId) => transparency[modelId] ?? false,
+    [transparency]
+  );
+  const toggleModelTransparency = (0, import_react.useCallback)(
+    (modelId) => {
+      const key = instanceKeyFor(modelId);
+      if (!key || !presenter) {
+        return;
+      }
+      presenter.toggleInstanceTransparencyByName?.(key, true);
+      setTransparency((current) => ({ ...current, [modelId]: !(current[modelId] ?? false) }));
+    },
+    [instanceKeyFor, presenter]
+  );
+  const value = (0, import_react.useMemo)(
+    () => ({
+      status,
+      error,
+      diagnostics,
+      parsed,
+      metadata: parsed?.metadata ?? null,
+      models: parsed?.models ?? [],
+      cameras: parsed?.cameras ?? [],
+      languages: parsed?.languages ?? [],
+      language,
+      setLanguage,
+      localize,
+      measureUnit: scene?.measureUnit ?? "mm",
+      displayUnit: scene?.displayUnit ?? "mm",
+      isSceneReady: framing !== null,
+      goToCamera,
+      saveCurrentView,
+      setModelVisible,
+      isModelVisible,
+      toggleModelTransparency,
+      isModelTransparent
+    }),
+    [
+      diagnostics,
+      error,
+      framing,
+      goToCamera,
+      isModelTransparent,
+      isModelVisible,
+      language,
+      localize,
+      parsed,
+      saveCurrentView,
+      scene,
+      setLanguage,
+      setModelVisible,
+      status,
+      toggleModelTransparency
+    ]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(IIIFContext.Provider, { value, children });
+};
+
+// src/iiif/parser.ts
+var FORMAT_PREFERENCE = {
+  glb: 1,
+  gltf: 1,
+  "model/gltf-binary": 1,
+  "model/gltf+json": 1,
+  obj: 2,
+  "model/obj": 2,
+  ply: 3,
+  "application/ply": 3,
+  nexus: 4,
+  nxz: 4,
+  nxs: 4,
+  "application/octet-stream+nexus": 4
+};
+function first(value) {
+  if (Array.isArray(value)) {
+    return value.length > 0 ? value[0] : void 0;
+  }
+  return value ?? void 0;
+}
+function toVector3(selector) {
+  return [selector?.x ?? 0, selector?.y ?? 0, selector?.z ?? 0];
+}
+function readPointSelector(target) {
+  if (!target || typeof target === "string") {
+    return void 0;
+  }
+  const entry = first(target);
+  const selector = first(entry?.selector);
+  return selector?.type === "PointSelector" || selector?.x !== void 0 ? selector : void 0;
+}
+function isModelBody(body) {
+  return body?.type === "Model" || body?.type === "SpecificResource";
+}
+function isCameraBody(body) {
+  return body?.type === "PerspectiveCamera" || body?.type === "OrthographicCamera";
+}
+function selectBestSource(source) {
+  if (!source) {
+    return void 0;
+  }
+  if (!Array.isArray(source)) {
+    return source;
+  }
+  if (source.length <= 1) {
+    return source[0];
+  }
+  const rank = (candidate) => FORMAT_PREFERENCE[(candidate.format ?? "").toLowerCase()] ?? 0;
+  return [...source].sort((a, b) => rank(b) - rank(a))[0];
+}
+var KNOWN_FIELDS = {
+  museum: "museum",
+  "inventory number": "inventory",
+  inventarnummer: "inventory",
+  "object id": "objectId",
+  "objekt-id": "objectId",
+  "measure unit": "measureUnit",
+  "m\xE5leenhet": "measureUnit",
+  "display unit": "displayUnit",
+  visningsenhet: "displayUnit"
+};
+function parseMetadata(manifest, language) {
+  const resolve = (value) => resolveLanguageMap(value, language);
+  const metadata = {
+    label: resolve(manifest.label),
+    fields: []
+  };
+  const summary = resolve(manifest.summary);
+  if (summary) {
+    metadata.summary = summary;
+  }
+  const attribution = resolve(manifest.requiredStatement?.value);
+  if (attribution) {
+    metadata.attribution = attribution;
+  }
+  (manifest.metadata ?? []).forEach((entry) => {
+    const localizedLabel = resolve(entry.label);
+    const value = resolve(entry.value);
+    metadata.fields.push({ label: localizedLabel, value });
+    const canonicalKey = resolveLanguageMap(entry.label, "en").trim().toLowerCase();
+    const known = KNOWN_FIELDS[canonicalKey];
+    if (known) {
+      metadata[known] = value;
+    }
+  });
+  return metadata;
+}
+function parseModelAnnotation(annotation, body, onDiagnostic) {
+  let url;
+  let format;
+  let measureUnit;
+  let transforms = [];
+  if (body.type === "Model") {
+    url = body.id;
+    format = body.format;
+    measureUnit = body.measureUnit;
+  } else {
+    const source = selectBestSource(body.source);
+    if (!source) {
+      onDiagnostic?.({
+        level: "warning",
+        message: `Model annotation ${annotation.id ?? "(no id)"} has no usable source; skipping.`
+      });
+      return void 0;
+    }
+    url = source.id;
+    format = source.format;
+    measureUnit = source.measureUnit ?? body.measureUnit;
+    if (Array.isArray(body.transform)) {
+      transforms = body.transform;
+    }
+  }
+  if (!url) {
+    onDiagnostic?.({
+      level: "warning",
+      message: `Model annotation ${annotation.id ?? "(no id)"} has no source URL; skipping.`
+    });
+    return void 0;
+  }
+  const normalizedFormat = (format ?? "").toLowerCase();
+  const unrenderable = normalizedFormat.includes("gltf") ? "glTF" : normalizedFormat === "glb" || normalizedFormat === "model/gltf-binary" ? "glTF" : normalizedFormat === "obj" || normalizedFormat === "model/obj" ? "OBJ" : void 0;
+  if (unrenderable) {
+    onDiagnostic?.({
+      level: "warning",
+      message: `Model ${url} is ${unrenderable}, which 3DHOP cannot render. Convert it to Nexus (.nxz) or PLY.`
+    });
+  }
+  return {
+    id: annotation.id ?? url,
+    rawLabel: annotation.label,
+    url,
+    format,
+    measureUnit,
+    position: toVector3(readPointSelector(annotation.target)),
+    transforms
+  };
+}
+function parseCameraAnnotation(annotation, body) {
+  const camera = {
+    id: body.id,
+    type: body.type === "OrthographicCamera" ? "OrthographicCamera" : "PerspectiveCamera",
+    rawLabel: body.label ?? annotation.label,
+    position: toVector3(readPointSelector(annotation.target))
+  };
+  const fov = body.fieldOfView ?? body.fov;
+  if (typeof fov === "number") {
+    camera.fov = fov;
+  }
+  if (body.lookAt) {
+    if (body.lookAt.type === "PointSelector" || body.lookAt.x !== void 0) {
+      camera.target = toVector3(body.lookAt);
+    }
+    if (body.lookAt.id) {
+      camera.lookAtId = body.lookAt.id;
+    }
+  }
+  return camera;
+}
+function parseManifest(manifest, options = {}) {
+  const { language = "en", onDiagnostic } = options;
+  const models = [];
+  const cameras = [];
+  const scenes = (manifest.items ?? []).filter((item) => item?.type === "Scene");
+  if (scenes.length === 0) {
+    onDiagnostic?.({
+      level: "warning",
+      message: "Manifest contains no Scene; there is nothing to render."
+    });
+  }
+  if (scenes.length > 1) {
+    onDiagnostic?.({
+      level: "info",
+      message: `Manifest contains ${scenes.length} scenes; all of them are merged into one view.`
+    });
+  }
+  scenes.forEach((scene) => {
+    (scene.items ?? []).forEach((page) => {
+      if (page?.type !== "AnnotationPage") {
+        return;
+      }
+      (page.items ?? []).forEach((annotation) => {
+        const body = first(annotation?.body);
+        if (isModelBody(body)) {
+          const model = parseModelAnnotation(annotation, body, onDiagnostic);
+          if (model) {
+            models.push(model);
+          }
+          return;
+        }
+        if (isCameraBody(body)) {
+          cameras.push(parseCameraAnnotation(annotation, body));
+          return;
+        }
+        onDiagnostic?.({
+          level: "info",
+          message: `Skipping annotation ${annotation?.id ?? "(no id)"} of unsupported body type "${body?.type ?? "undefined"}".`
+        });
+      });
+    });
+  });
+  return {
+    manifest,
+    metadata: parseMetadata(manifest, language),
+    models,
+    cameras,
+    languages: Array.from(collectLanguages(manifest)).sort()
+  };
+}
+async function loadManifest(url, options = {}) {
+  const { signal, fetchImpl = fetch, ...parseOptions } = options;
+  const response = await fetchImpl(url, { signal });
+  if (!response.ok) {
+    throw new Error(`Failed to load IIIF manifest (${response.status} ${response.statusText}): ${url}`);
+  }
+  let json;
+  try {
+    json = await response.json();
+  } catch (cause) {
+    const detail = cause instanceof Error ? cause.message : String(cause);
+    throw new Error(`IIIF manifest at ${url} is not valid JSON: ${detail}`);
+  }
+  if (!json || typeof json !== "object") {
+    throw new Error(`IIIF manifest at ${url} is not a JSON object.`);
+  }
+  return parseManifest(json, parseOptions);
+}
+
+// src/iiif/transforms.ts
+function transformToMatrix(transform) {
+  switch (transform.type) {
+    case "ScaleTransform":
+      return scaling([transform.x ?? 1, transform.y ?? 1, transform.z ?? 1]);
+    case "TranslateTransform":
+      return translation([transform.x ?? 0, transform.y ?? 0, transform.z ?? 0]);
+    case "RotateTransform": {
+      if (transform.axis !== void 0 || transform.angle !== void 0) {
+        const angle = degToRad(transform.angle ?? 0);
+        switch (transform.axis) {
+          case "x":
+            return rotationAngleAxis(angle, [1, 0, 0]);
+          case "y":
+            return rotationAngleAxis(angle, [0, 1, 0]);
+          case "z":
+          default:
+            return rotationAngleAxis(angle, [0, 0, 1]);
+        }
+      }
+      const rx = rotationAngleAxis(degToRad(transform.x ?? 0), [1, 0, 0]);
+      const ry = rotationAngleAxis(degToRad(transform.y ?? 0), [0, 1, 0]);
+      const rz = rotationAngleAxis(degToRad(transform.z ?? 0), [0, 0, 1]);
+      return multiply(multiply(rz, ry), rx);
+    }
+    default:
+      return identity();
+  }
+}
+function composeTransforms(transforms) {
+  if (!transforms || transforms.length === 0) {
+    return identity();
+  }
+  return transforms.reduce(
+    (accumulated, transform) => multiply(transformToMatrix(transform), accumulated),
+    identity()
+  );
+}
+function buildModelMatrix({
+  position = [0, 0, 0],
+  transforms,
+  sceneScale = 1,
+  geometryScale = sceneScale
+}) {
+  const relativeGeometryScale = sceneScale === 0 ? 1 : geometryScale / sceneScale;
+  let matrix = composeTransforms(transforms);
+  if (relativeGeometryScale !== 1) {
+    matrix = multiply(matrix, scaling([relativeGeometryScale, relativeGeometryScale, relativeGeometryScale]));
+  }
+  if (position[0] !== 0 || position[1] !== 0 || position[2] !== 0) {
+    matrix = multiply(translation(position), matrix);
+  }
+  if (sceneScale !== 1) {
+    matrix = multiply(scaling([sceneScale, sceneScale, sceneScale]), matrix);
+  }
+  return matrix;
+}
+
+// src/iiif/units.ts
+var UNITS_IN_METRES = {
+  km: 1e3,
+  m: 1,
+  cm: 0.01,
+  mm: 1e-3,
+  um: 1e-6,
+  "\xB5m": 1e-6,
+  nm: 1e-9
+};
+function isKnownUnit(unit) {
+  return typeof unit === "string" && Object.prototype.hasOwnProperty.call(UNITS_IN_METRES, unit.trim());
+}
+function getUnitScaleFactor(fromUnit, toUnit) {
+  const from = typeof fromUnit === "string" ? fromUnit.trim() : "";
+  const to = typeof toUnit === "string" ? toUnit.trim() : "";
+  if (from === to) {
+    return 1;
+  }
+  const fromFactor = UNITS_IN_METRES[from] ?? 1;
+  const toFactor = UNITS_IN_METRES[to] ?? 1;
+  return fromFactor / toFactor;
+}
+
+// src/iiif/toModels.ts
+var DEFAULT_MEASURE_UNIT = "mm";
+function sanitizeKey(value, fallback) {
+  const cleaned = value.replace(/[^A-Za-z0-9_-]/g, "_").replace(/_+/g, "_").replace(/^_+|_+$/g, "");
+  return cleaned.length > 0 ? cleaned : fallback;
+}
+function sceneFromManifest(parsed, options = {}) {
+  const measureUnit = parsed.metadata.measureUnit?.trim() || DEFAULT_MEASURE_UNIT;
+  const displayUnit = options.displayUnit?.trim() || parsed.metadata.displayUnit?.trim() || measureUnit;
+  const sceneScale = getUnitScaleFactor(measureUnit, displayUnit);
+  const models = {};
+  const instanceIdsByModelId = {};
+  const meshIdByUrl = /* @__PURE__ */ new Map();
+  const usedKeys = /* @__PURE__ */ new Set();
+  parsed.models.forEach((model, index) => {
+    let meshId = meshIdByUrl.get(model.url);
+    if (!meshId) {
+      meshId = `iiif_mesh_${meshIdByUrl.size}`;
+      meshIdByUrl.set(model.url, meshId);
+    }
+    let key = sanitizeKey(model.id, `iiif_model_${index}`);
+    while (usedKeys.has(key)) {
+      key = `${key}_${index}`;
+    }
+    usedKeys.add(key);
+    const geometryScale = model.measureUnit ? getUnitScaleFactor(model.measureUnit, displayUnit) : sceneScale;
+    models[key] = {
+      url: model.url,
+      meshId,
+      // Pinned, because the scene builder otherwise derives the instance name from the entry key
+      // (`model_<key>`) and the panels address instances by the name recorded below.
+      instanceId: key,
+      transform: {
+        matrix: buildModelMatrix({
+          position: model.position,
+          transforms: model.transforms,
+          sceneScale,
+          geometryScale
+        })
+      },
+      tags: ["SPECIMEN"],
+      color: [0.5, 0.5, 0.5],
+      backfaceColor: [0.5, 0.5, 0.5, 3],
+      specularColor: [0, 0, 0, 256]
+    };
+    instanceIdsByModelId[model.id] = key;
+  });
+  const space = {
+    centerMode: "scene",
+    radiusMode: "scene",
+    cameraNearFar: [0.01, 5],
+    ...options.space
+  };
+  const config = {
+    pickedpointColor: [1, 0, 1],
+    measurementColor: [0.5, 1, 0.5],
+    showClippingPlanes: true,
+    showClippingBorder: true,
+    // A half-unit clipping border is invisible on a millimetre-scale object and enormous on a
+    // metre-scale one, so the metre case gets its own value.
+    clippingBorderSize: displayUnit === "m" ? 2e-3 : 0.5,
+    clippingBorderColor: [0, 1, 1],
+    ...options.config
+  };
+  const trackball = {
+    type: "TurntablePanTrackball",
+    ...options.trackball,
+    trackOptions: {
+      startPhi: 15,
+      startTheta: 15,
+      startDistance: 2,
+      minMaxPhi: [-180, 180],
+      minMaxTheta: [-90, 90],
+      minMaxDist: [0.1, 3],
+      ...options.trackball?.trackOptions
+    }
+  };
+  return { models, space, config, trackball, displayUnit, measureUnit, instanceIdsByModelId };
+}
+
+// src/IIIFViewer.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function defaultLanguage() {
+  if (typeof navigator !== "undefined" && navigator.language) {
+    return navigator.language.split("-")[0];
+  }
+  return "en";
+}
+var IIIFViewer = ({
+  manifest,
+  language: languageProp,
+  displayUnit,
+  applyInitialCamera = true,
+  onLoad,
+  onError,
+  onDiagnostic,
+  loadingFallback = null,
+  errorFallback = null,
+  space,
+  config,
+  trackball,
+  children,
+  ...viewerProps
+}) => {
+  const [language, setLanguage] = (0, import_react2.useState)(() => languageProp ?? defaultLanguage());
+  const [status, setStatus] = (0, import_react2.useState)("idle");
+  const [error, setError] = (0, import_react2.useState)(null);
+  const [parsed, setParsed] = (0, import_react2.useState)(null);
+  const [diagnostics, setDiagnostics] = (0, import_react2.useState)([]);
+  (0, import_react2.useEffect)(() => {
+    if (languageProp) {
+      setLanguage(languageProp);
+    }
+  }, [languageProp]);
+  (0, import_react2.useEffect)(() => {
+    const controller = new AbortController();
+    const collected = [];
+    const handleDiagnostic = (diagnostic) => {
+      collected.push(diagnostic);
+      onDiagnostic?.(diagnostic);
+    };
+    const finish = (result) => {
+      if (controller.signal.aborted) {
+        return;
+      }
+      setParsed(result);
+      setDiagnostics(collected);
+      setStatus("ready");
+      setError(null);
+    };
+    const fail = (cause) => {
+      if (controller.signal.aborted) {
+        return;
+      }
+      const normalized = cause instanceof Error ? cause : new Error(String(cause));
+      setParsed(null);
+      setDiagnostics(collected);
+      setStatus("error");
+      setError(normalized);
+      onError?.(normalized);
+    };
+    setStatus("loading");
+    if (typeof manifest === "string") {
+      loadManifest(manifest, { language, signal: controller.signal, onDiagnostic: handleDiagnostic }).then(finish).catch((cause) => {
+        if (cause instanceof DOMException && cause.name === "AbortError") {
+          return;
+        }
+        fail(cause);
+      });
+    } else {
+      try {
+        finish(parseManifest(manifest, { language, onDiagnostic: handleDiagnostic }));
+      } catch (cause) {
+        fail(cause);
+      }
+    }
+    return () => controller.abort();
+  }, [manifest, onDiagnostic, onError]);
+  const localized = (0, import_react2.useMemo)(() => {
+    if (!parsed) {
+      return null;
+    }
+    return parseManifest(parsed.manifest, { language });
+  }, [parsed, language]);
+  const scene = (0, import_react2.useMemo)(() => {
+    if (!localized) {
+      return null;
+    }
+    return sceneFromManifest(localized, { displayUnit, space, config, trackball });
+  }, [localized, displayUnit, space, config, trackball]);
+  (0, import_react2.useEffect)(() => {
+    if (status === "ready" && localized && scene) {
+      onLoad?.(localized, scene);
+    }
+  }, [status, localized, scene]);
+  if (status === "error" && error) {
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children: typeof errorFallback === "function" ? errorFallback(error) : errorFallback });
+  }
+  if (!scene || !localized) {
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children: loadingFallback });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    import_react_3dhop2.ThreeDHopViewer,
+    {
+      ...viewerProps,
+      models: scene.models,
+      space: scene.space,
+      config: scene.config,
+      trackball: scene.trackball,
+      measurementUnits: viewerProps.measurementUnits ?? scene.displayUnit,
+      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+        IIIFProvider,
+        {
+          status,
+          error,
+          diagnostics,
+          parsed: localized,
+          scene,
+          language,
+          setLanguage,
+          children: [
+            applyInitialCamera && localized.cameras.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(InitialCamera, {}) : null,
+            children
+          ]
+        }
+      )
+    }
+  );
+};
+var InitialCamera = () => {
+  const [applied, setApplied] = (0, import_react2.useState)(false);
+  const { goToCamera, cameras, isSceneReady } = useIIIFManifest();
+  (0, import_react2.useEffect)(() => {
+    if (applied || !isSceneReady || cameras.length === 0) {
+      return;
+    }
+    goToCamera(0, 0);
+    setApplied(true);
+  }, [applied, cameras.length, goToCamera, isSceneReady]);
+  return null;
+};
+
+// src/IIIFMultiManifestViewer.tsx
+var import_react4 = require("react");
+var import_react_3dhop4 = require("@ikaros-arch/react-3dhop");
+
+// src/multiManifestContext.tsx
+var import_react3 = require("react");
+var import_react_3dhop3 = require("@ikaros-arch/react-3dhop");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var IIIFMultiManifestContext = (0, import_react3.createContext)(null);
+function useIIIFMultiManifest() {
+  const value = (0, import_react3.useContext)(IIIFMultiManifestContext);
+  if (!value) {
+    throw new Error("useIIIFMultiManifest must be used within an <IIIFMultiManifestViewer>.");
+  }
+  return value;
+}
+function compositeKey(manifestKey, modelId) {
+  return `${manifestKey}::${modelId}`;
+}
+var IIIFMultiManifestProvider = ({
+  status,
+  error,
+  diagnostics,
+  scene,
+  children
+}) => {
+  const { presenter, registerSceneObserver } = (0, import_react_3dhop3.useThreeDHopViewer)();
+  const [isSceneReady, setIsSceneReady] = (0, import_react3.useState)(false);
+  const [visibility, setVisibility] = (0, import_react3.useState)({});
+  const [transparency, setTransparency] = (0, import_react3.useState)({});
+  (0, import_react3.useEffect)(() => {
+    return registerSceneObserver(() => {
+      setIsSceneReady(true);
+      setVisibility({});
+      setTransparency({});
+    });
+  }, [registerSceneObserver]);
+  const instanceKeyFor = (0, import_react3.useCallback)(
+    (manifestKey, modelId) => scene?.manifests.find((manifest) => manifest.key === manifestKey)?.instanceIdsByModelId[modelId],
+    [scene]
+  );
+  const isModelVisible = (0, import_react3.useCallback)(
+    (manifestKey, modelId) => visibility[compositeKey(manifestKey, modelId)] ?? true,
+    [visibility]
+  );
+  const setModelVisible = (0, import_react3.useCallback)(
+    (manifestKey, modelId, visible) => {
+      const key = instanceKeyFor(manifestKey, modelId);
+      const stateKey = compositeKey(manifestKey, modelId);
+      if (!key || !presenter) {
+        return;
+      }
+      if ((visibility[stateKey] ?? true) === visible) {
+        return;
+      }
+      presenter.toggleInstanceVisibilityByName?.(key, true);
+      setVisibility((current) => ({ ...current, [stateKey]: visible }));
+    },
+    [instanceKeyFor, presenter, visibility]
+  );
+  const isModelTransparent = (0, import_react3.useCallback)(
+    (manifestKey, modelId) => transparency[compositeKey(manifestKey, modelId)] ?? false,
+    [transparency]
+  );
+  const toggleModelTransparency = (0, import_react3.useCallback)(
+    (manifestKey, modelId) => {
+      const key = instanceKeyFor(manifestKey, modelId);
+      const stateKey = compositeKey(manifestKey, modelId);
+      if (!key || !presenter) {
+        return;
+      }
+      presenter.toggleInstanceTransparencyByName?.(key, true);
+      setTransparency((current) => ({ ...current, [stateKey]: !(current[stateKey] ?? false) }));
+    },
+    [instanceKeyFor, presenter]
+  );
+  const manifests = (0, import_react3.useMemo)(
+    () => scene?.manifests.map((manifest) => ({
+      key: manifest.key,
+      sourceId: manifest.sourceId,
+      label: manifest.parsed.metadata.label,
+      models: manifest.models
+    })) ?? [],
+    [scene]
+  );
+  const value = (0, import_react3.useMemo)(
+    () => ({
+      status,
+      error,
+      diagnostics,
+      manifests,
+      measureUnit: scene?.measureUnit ?? "mm",
+      displayUnit: scene?.displayUnit ?? "mm",
+      isSceneReady,
+      setModelVisible,
+      isModelVisible,
+      toggleModelTransparency,
+      isModelTransparent
+    }),
+    [
+      diagnostics,
+      error,
+      isModelTransparent,
+      isModelVisible,
+      isSceneReady,
+      manifests,
+      scene,
+      setModelVisible,
+      status,
+      toggleModelTransparency
+    ]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(IIIFMultiManifestContext.Provider, { value, children });
+};
+
+// src/iiif/toMultiModels.ts
+function sanitizeKey2(value, fallback) {
+  const cleaned = value.replace(/[^A-Za-z0-9_-]/g, "_").replace(/_+/g, "_").replace(/^_+|_+$/g, "");
+  return cleaned.length > 0 ? cleaned : fallback;
+}
+function placementSpreadRadius(models) {
+  if (models.length <= 1) {
+    return 0;
+  }
+  const centroid = models.reduce(
+    (sum, model) => [sum[0] + model.position[0], sum[1] + model.position[1], sum[2] + model.position[2]],
+    [0, 0, 0]
+  );
+  centroid[0] /= models.length;
+  centroid[1] /= models.length;
+  centroid[2] /= models.length;
+  return models.reduce((max, model) => Math.max(max, Math.hypot(
+    model.position[0] - centroid[0],
+    model.position[1] - centroid[1],
+    model.position[2] - centroid[2]
+  )), 0);
+}
+function layoutManifests(radii, options) {
+  const { gap, columns } = options;
+  const offsets = [];
+  let cursorX = 0;
+  let cursorZ = 0;
+  let rowMaxRadius = 0;
+  let previousRadius = 0;
+  radii.forEach((radius, index) => {
+    const column = columns > 0 ? index % columns : index;
+    if (column === 0 && index > 0) {
+      cursorZ += rowMaxRadius + gap + radius;
+      cursorX = 0;
+      rowMaxRadius = 0;
+      previousRadius = 0;
+    } else if (index > 0) {
+      cursorX += previousRadius + gap + radius;
+    }
+    offsets.push([cursorX, 0, cursorZ]);
+    rowMaxRadius = Math.max(rowMaxRadius, radius);
+    previousRadius = radius;
+  });
+  if (offsets.length === 0) {
+    return offsets;
+  }
+  const minX = Math.min(...offsets.map((offset) => offset[0]));
+  const maxX = Math.max(...offsets.map((offset) => offset[0]));
+  const minZ = Math.min(...offsets.map((offset) => offset[2]));
+  const maxZ = Math.max(...offsets.map((offset) => offset[2]));
+  const centerX = (minX + maxX) / 2;
+  const centerZ = (minZ + maxZ) / 2;
+  return offsets.map(([x, y, z]) => [x - centerX, y, z - centerZ]);
+}
+function sceneFromManifests(parsedList, sourceIds, options = {}) {
+  const gap = options.gap ?? 50;
+  const minRadius = options.minRadius ?? 100;
+  const columns = options.columns ?? parsedList.length;
+  const displayUnit = options.displayUnit?.trim() || parsedList[0]?.metadata.displayUnit?.trim() || parsedList[0]?.metadata.measureUnit?.trim() || "mm";
+  const perManifestScenes = parsedList.map((parsed) => sceneFromManifest(parsed, { displayUnit }));
+  const radii = perManifestScenes.map(
+    (_, index) => Math.max(minRadius, placementSpreadRadius(parsedList[index].models))
+  );
+  const autoOffsets = layoutManifests(radii, { gap, columns });
+  const models = {};
+  const usedManifestKeys = /* @__PURE__ */ new Set();
+  const manifests = [];
+  parsedList.forEach((parsed, index) => {
+    const sourceId = sourceIds[index] ?? `manifest_${index}`;
+    let manifestKey = sanitizeKey2(parsed.manifest.id ?? sourceId, `manifest_${index}`);
+    while (usedManifestKeys.has(manifestKey)) {
+      manifestKey = `${manifestKey}_${index}`;
+    }
+    usedManifestKeys.add(manifestKey);
+    const offset = options.layoutOverrides?.[manifestKey] ?? autoOffsets[index] ?? [0, 0, 0];
+    const offsetMatrix = translation(offset);
+    const manifestScene = perManifestScenes[index];
+    const instanceIdsByModelId = {};
+    Object.entries(manifestScene.models).forEach(([localKey, modelDef]) => {
+      const globalKey = `${manifestKey}__${localKey}`;
+      models[globalKey] = {
+        ...modelDef,
+        meshId: `${manifestKey}__${modelDef.meshId}`,
+        instanceId: globalKey,
+        transform: {
+          matrix: multiply(offsetMatrix, modelDef.transform.matrix)
+        }
+      };
+    });
+    Object.entries(manifestScene.instanceIdsByModelId).forEach(([modelId, localKey]) => {
+      instanceIdsByModelId[modelId] = `${manifestKey}__${localKey}`;
+    });
+    manifests.push({
+      key: manifestKey,
+      sourceId,
+      parsed,
+      models: parsed.models,
+      instanceIdsByModelId,
+      offset,
+      layoutRadius: radii[index]
+    });
+  });
+  const space = {
+    centerMode: "scene",
+    radiusMode: "scene",
+    cameraNearFar: [0.01, 5],
+    ...options.space
+  };
+  const config = {
+    pickedpointColor: [1, 0, 1],
+    measurementColor: [0.5, 1, 0.5],
+    showClippingPlanes: true,
+    showClippingBorder: true,
+    clippingBorderSize: displayUnit === "m" ? 2e-3 : 0.5,
+    clippingBorderColor: [0, 1, 1],
+    ...options.config
+  };
+  const trackball = {
+    type: "TurntablePanTrackball",
+    ...options.trackball,
+    trackOptions: {
+      startPhi: 15,
+      startTheta: 15,
+      startDistance: 2,
+      minMaxPhi: [-180, 180],
+      minMaxTheta: [-90, 90],
+      minMaxDist: [0.1, 3],
+      ...options.trackball?.trackOptions
+    }
+  };
+  return { models, space, config, trackball, displayUnit, measureUnit: displayUnit, manifests };
+}
+
+// src/IIIFMultiManifestViewer.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function defaultLanguage2() {
+  if (typeof navigator !== "undefined" && navigator.language) {
+    return navigator.language.split("-")[0];
+  }
+  return "en";
+}
+function sourceIdFor(manifest, index) {
+  if (typeof manifest === "string") {
+    return manifest;
+  }
+  return manifest.id ?? `manifest_${index}`;
+}
+var IIIFMultiManifestViewer = ({
+  manifests,
+  language: languageProp,
+  displayUnit,
+  gap,
+  minRadius,
+  columns,
+  layoutOverrides,
+  onLoad,
+  onError,
+  onDiagnostic,
+  loadingFallback = null,
+  errorFallback = null,
+  space,
+  config,
+  trackball,
+  children,
+  ...viewerProps
+}) => {
+  const [language, setLanguage] = (0, import_react4.useState)(() => languageProp ?? defaultLanguage2());
+  const [status, setStatus] = (0, import_react4.useState)("idle");
+  const [error, setError] = (0, import_react4.useState)(null);
+  const [parsedList, setParsedList] = (0, import_react4.useState)(null);
+  const [diagnostics, setDiagnostics] = (0, import_react4.useState)([]);
+  (0, import_react4.useEffect)(() => {
+    if (languageProp) {
+      setLanguage(languageProp);
+    }
+  }, [languageProp]);
+  (0, import_react4.useEffect)(() => {
+    const controller = new AbortController();
+    const collected = [];
+    const handleDiagnostic = (diagnostic) => {
+      collected.push(diagnostic);
+      onDiagnostic?.(diagnostic);
+    };
+    setStatus("loading");
+    Promise.all(
+      manifests.map((manifest, index) => {
+        if (typeof manifest === "string") {
+          return loadManifest(manifest, { language, signal: controller.signal, onDiagnostic: handleDiagnostic });
+        }
+        return Promise.resolve().then(() => parseManifest(manifest, { language, onDiagnostic: handleDiagnostic }));
+      })
+    ).then((results) => {
+      if (controller.signal.aborted) {
+        return;
+      }
+      setParsedList(results);
+      setDiagnostics(collected);
+      setStatus("ready");
+      setError(null);
+    }).catch((cause) => {
+      if (controller.signal.aborted || cause instanceof DOMException && cause.name === "AbortError") {
+        return;
+      }
+      const normalized = cause instanceof Error ? cause : new Error(String(cause));
+      setParsedList(null);
+      setDiagnostics(collected);
+      setStatus("error");
+      setError(normalized);
+      onError?.(normalized, "unknown");
+    });
+    return () => controller.abort();
+  }, [manifests, onDiagnostic, onError]);
+  const sourceIds = (0, import_react4.useMemo)(() => manifests.map(sourceIdFor), [manifests]);
+  const localizedList = (0, import_react4.useMemo)(() => {
+    if (!parsedList) {
+      return null;
+    }
+    return parsedList.map((parsed) => parseManifest(parsed.manifest, { language }));
+  }, [parsedList, language]);
+  const scene = (0, import_react4.useMemo)(() => {
+    if (!localizedList || localizedList.length === 0) {
+      return null;
+    }
+    return sceneFromManifests(localizedList, sourceIds, {
+      displayUnit,
+      space,
+      config,
+      trackball,
+      gap,
+      minRadius,
+      columns,
+      layoutOverrides
+    });
+  }, [localizedList, sourceIds, displayUnit, space, config, trackball, gap, minRadius, columns, layoutOverrides]);
+  (0, import_react4.useEffect)(() => {
+    if (status === "ready" && scene) {
+      onLoad?.(scene);
+    }
+  }, [status, scene]);
+  if (status === "error" && error) {
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_jsx_runtime4.Fragment, { children: typeof errorFallback === "function" ? errorFallback([{ sourceId: "unknown", error }]) : errorFallback });
+  }
+  if (!scene) {
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_jsx_runtime4.Fragment, { children: loadingFallback });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    import_react_3dhop4.ThreeDHopViewer,
+    {
+      ...viewerProps,
+      models: scene.models,
+      space: scene.space,
+      config: scene.config,
+      trackball: scene.trackball,
+      measurementUnits: viewerProps.measurementUnits ?? scene.displayUnit,
+      children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(IIIFMultiManifestProvider, { status, error, diagnostics, scene, children })
+    }
+  );
+};
+
+// src/collectionContext.tsx
+var import_react5 = require("react");
+
+// src/iiif/collection.ts
+function firstThumbnail(item) {
+  const thumbnail = Array.isArray(item.thumbnail) ? item.thumbnail[0] : item.thumbnail;
+  return thumbnail?.id;
+}
+function parseCollection(collection, options = {}) {
+  const { language = "en", onDiagnostic } = options;
+  const resolve = (value) => resolveLanguageMap(value, language);
+  const rawItems = collection.items ?? [];
+  if (rawItems.length === 0) {
+    onDiagnostic?.({ level: "warning", message: "Collection contains no items." });
+  }
+  const items = [];
+  rawItems.forEach((item) => {
+    if (item?.type && item.type !== "Manifest") {
+      onDiagnostic?.({
+        level: "info",
+        message: `Skipping collection item ${item.id ?? "(no id)"} of unsupported type "${item.type}".`
+      });
+      return;
+    }
+    if (!item?.id) {
+      onDiagnostic?.({ level: "warning", message: "Collection item has no id; skipping." });
+      return;
+    }
+    items.push({
+      id: item.id,
+      label: resolve(item.label) || item.id,
+      summary: resolve(item.summary) || void 0,
+      thumbnail: firstThumbnail(item)
+    });
+  });
+  return {
+    collection,
+    label: resolve(collection.label) || "Untitled Collection",
+    summary: resolve(collection.summary) || void 0,
+    items
+  };
+}
+async function loadCollection(url, options = {}) {
+  const { signal, fetchImpl = fetch, ...parseOptions } = options;
+  const response = await fetchImpl(url, { signal });
+  if (!response.ok) {
+    throw new Error(`Failed to load IIIF collection (${response.status} ${response.statusText}): ${url}`);
+  }
+  let json;
+  try {
+    json = await response.json();
+  } catch (cause) {
+    const detail = cause instanceof Error ? cause.message : String(cause);
+    throw new Error(`IIIF collection at ${url} is not valid JSON: ${detail}`);
+  }
+  if (!json || typeof json !== "object") {
+    throw new Error(`IIIF collection at ${url} is not a JSON object.`);
+  }
+  return parseCollection(json, parseOptions);
+}
+
+// src/collectionContext.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var IIIFCollectionContext = (0, import_react5.createContext)(null);
+function useIIIFCollection() {
+  const value = (0, import_react5.useContext)(IIIFCollectionContext);
+  if (!value) {
+    throw new Error("useIIIFCollection must be used within an <IIIFCollectionProvider>.");
+  }
+  return value;
+}
+var IIIFCollectionProvider = ({
+  collection,
+  language = "en",
+  initialManifestId,
+  onLoad,
+  onError,
+  onDiagnostic,
+  children
+}) => {
+  const [status, setStatus] = (0, import_react5.useState)("idle");
+  const [error, setError] = (0, import_react5.useState)(null);
+  const [label, setLabel] = (0, import_react5.useState)("");
+  const [summary, setSummary] = (0, import_react5.useState)(null);
+  const [items, setItems] = (0, import_react5.useState)([]);
+  const [diagnostics, setDiagnostics] = (0, import_react5.useState)([]);
+  const [selectedId, setSelectedId] = (0, import_react5.useState)(initialManifestId ?? null);
+  (0, import_react5.useEffect)(() => {
+    const controller = new AbortController();
+    const collected = [];
+    const handleDiagnostic = (diagnostic) => {
+      collected.push(diagnostic);
+      onDiagnostic?.(diagnostic);
+    };
+    const finish = (parsed) => {
+      if (controller.signal.aborted) {
+        return;
+      }
+      setLabel(parsed.label);
+      setSummary(parsed.summary ?? null);
+      setItems(parsed.items);
+      setDiagnostics(collected);
+      setStatus("ready");
+      setError(null);
+      setSelectedId((current) => current ?? parsed.items[0]?.id ?? null);
+      onLoad?.(parsed.items);
+    };
+    const fail = (cause) => {
+      if (controller.signal.aborted) {
+        return;
+      }
+      const normalized = cause instanceof Error ? cause : new Error(String(cause));
+      setStatus("error");
+      setError(normalized);
+      setDiagnostics(collected);
+      onError?.(normalized);
+    };
+    setStatus("loading");
+    if (typeof collection === "string") {
+      loadCollection(collection, { language, signal: controller.signal, onDiagnostic: handleDiagnostic }).then(finish).catch((cause) => {
+        if (cause instanceof DOMException && cause.name === "AbortError") {
+          return;
+        }
+        fail(cause);
+      });
+    } else {
+      try {
+        finish(parseCollection(collection, { language, onDiagnostic: handleDiagnostic }));
+      } catch (cause) {
+        fail(cause);
+      }
+    }
+    return () => controller.abort();
+  }, [collection, language, onLoad, onError]);
+  const selectedIndex = (0, import_react5.useMemo)(() => items.findIndex((item) => item.id === selectedId), [items, selectedId]);
+  const selectedItem = selectedIndex >= 0 ? items[selectedIndex] : null;
+  const selectManifest = (0, import_react5.useCallback)((id) => {
+    setSelectedId(id);
+  }, []);
+  const step = (0, import_react5.useCallback)(
+    (delta) => {
+      if (items.length === 0) {
+        return;
+      }
+      const base = selectedIndex >= 0 ? selectedIndex : 0;
+      const nextIndex = (base + delta + items.length) % items.length;
+      setSelectedId(items[nextIndex].id);
+    },
+    [items, selectedIndex]
+  );
+  const next = (0, import_react5.useCallback)(() => step(1), [step]);
+  const previous = (0, import_react5.useCallback)(() => step(-1), [step]);
+  const value = (0, import_react5.useMemo)(
+    () => ({
+      status,
+      error,
+      diagnostics,
+      label,
+      summary,
+      items,
+      selectedId,
+      selectedIndex,
+      selectedItem,
+      selectManifest,
+      next,
+      previous
+    }),
+    [status, error, diagnostics, label, summary, items, selectedId, selectedIndex, selectedItem, selectManifest, next, previous]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(IIIFCollectionContext.Provider, { value, children });
+};
+
+// src/panels/IIIFCollectionPicker.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var IIIFCollectionPicker = ({
+  label = "Object",
+  emptyMessage = "No objects in this collection.",
+  className = "iiif-collection-picker",
+  labelClassName = "iiif-collection-picker__label",
+  selectClassName = "iiif-collection-picker__select"
+}) => {
+  const { items, selectedId, selectManifest, status } = useIIIFCollection();
+  if (status === "ready" && items.length === 0) {
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: `${className}__empty`, children: emptyMessage });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className, children: [
+    label ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("label", { className: labelClassName, htmlFor: "iiif-collection-select", children: label }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      "select",
+      {
+        id: "iiif-collection-select",
+        className: selectClassName,
+        value: selectedId ?? "",
+        onChange: (event) => selectManifest(event.target.value),
+        children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("option", { value: item.id, children: item.label }, item.id))
+      }
+    )
+  ] });
+};
+
+// src/panels/IIIFCollectionCarousel.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var IIIFCollectionCarousel = ({
+  previousLabel = "Previous object",
+  nextLabel = "Next object",
+  emptyMessage = "No objects in this collection.",
+  className = "iiif-carousel",
+  trackClassName = "iiif-carousel__track",
+  itemClassName = "iiif-carousel__item",
+  activeItemClassName = "iiif-carousel__item--active",
+  thumbnailClassName = "iiif-carousel__thumbnail",
+  labelClassName = "iiif-carousel__label",
+  controlClassName = "iiif-carousel__control"
+}) => {
+  const { items, selectedId, selectManifest, next, previous, status } = useIIIFCollection();
+  if (status === "ready" && items.length === 0) {
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { className: `${className}__empty`, children: emptyMessage });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      "button",
+      {
+        type: "button",
+        className: controlClassName,
+        onClick: previous,
+        disabled: items.length < 2,
+        "aria-label": previousLabel,
+        children: "\u2039"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("ul", { className: trackClassName, children: items.map((item) => {
+      const active = item.id === selectedId;
+      return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("li", { className: active ? `${itemClassName} ${activeItemClassName}` : itemClassName, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("button", { type: "button", onClick: () => selectManifest(item.id), "aria-current": active || void 0, children: [
+        item.thumbnail ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("img", { className: thumbnailClassName, src: item.thumbnail, alt: "", loading: "lazy" }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: thumbnailClassName, "aria-hidden": "true" }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: labelClassName, children: item.label })
+      ] }) }, item.id);
+    }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      "button",
+      {
+        type: "button",
+        className: controlClassName,
+        onClick: next,
+        disabled: items.length < 2,
+        "aria-label": nextLabel,
+        children: "\u203A"
+      }
+    )
+  ] });
+};
+
+// src/panels/IIIFSummary.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var IIIFSummary = ({
+  className = "iiif-summary",
+  summaryClassName = "iiif-summary__text",
+  attributionClassName = "iiif-summary__attribution"
+}) => {
+  const { metadata } = useIIIFManifest();
+  const summary = metadata?.summary;
+  const attribution = metadata?.attribution;
+  if (!summary && !attribution) {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className, children: [
+    summary ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: summaryClassName, children: summary }) : null,
+    attribution ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: attributionClassName, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("small", { children: attribution }) }) : null
+  ] });
+};
+
+// src/panels/IIIFMetadataPanel.tsx
+var import_react6 = require("react");
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var PRIORITY_FIELDS = [
+  { key: "label", label: "Title" },
+  { key: "museum", label: "Museum" },
+  { key: "inventory", label: "Inventory" },
+  { key: "objectId", label: "Object ID" },
+  { key: "measureUnit", label: "Measure unit" },
+  { key: "displayUnit", label: "Display unit" },
+  { key: "summary", label: "Description" },
+  { key: "attribution", label: "Attribution" }
+];
+var IIIFMetadataPanel = ({
+  heading = "Metadata",
+  emptyMessage = "No metadata available",
+  hideDuplicateFields = true,
+  className = "iiif-metadata",
+  headingClassName = "iiif-metadata__heading",
+  tableClassName = "iiif-metadata__table",
+  labelClassName = "iiif-metadata__label",
+  valueClassName = "iiif-metadata__value"
+}) => {
+  const { metadata } = useIIIFManifest();
+  const rows = (0, import_react6.useMemo)(() => {
+    if (!metadata) {
+      return [];
+    }
+    const entries = [];
+    const shown = /* @__PURE__ */ new Set();
+    PRIORITY_FIELDS.forEach(({ key, label }) => {
+      const value = metadata[key];
+      if (typeof value === "string" && value.length > 0) {
+        entries.push({ label, value });
+        shown.add(value);
+      }
+    });
+    metadata.fields.forEach((field) => {
+      if (!field.value) {
+        return;
+      }
+      if (hideDuplicateFields && shown.has(field.value)) {
+        return;
+      }
+      entries.push(field);
+    });
+    return entries;
+  }, [hideDuplicateFields, metadata]);
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("section", { className, children: [
+    heading ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("h2", { className: headingClassName, children: heading }) : null,
+    rows.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: "iiif-metadata__empty", children: emptyMessage }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("table", { className: tableClassName, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("tbody", { children: rows.map((row, index) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("tr", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("th", { scope: "row", className: labelClassName, children: row.label }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("td", { className: valueClassName, children: row.value })
+    ] }, `${row.label}-${index}`)) }) })
+  ] });
+};
+
+// src/panels/IIIFModelsPanel.tsx
+var import_jsx_runtime10 = require("react/jsx-runtime");
+function fallbackName(model, index) {
+  const filename = model.url.split("/").pop() ?? "";
+  const stem = filename.split("?")[0].split("#")[0].split(".")[0];
+  return stem || `Model ${index + 1}`;
+}
+var IIIFModelsPanel = ({
+  heading = "Models",
+  emptyMessage = "No models in manifest",
+  visibilityLabel = "Show model",
+  transparencyLabel = "Toggle transparency",
+  className = "iiif-models",
+  headingClassName = "iiif-models__heading",
+  listClassName = "iiif-models__list",
+  itemClassName = "iiif-models__item"
+}) => {
+  const { models, localize, isModelVisible, setModelVisible, isModelTransparent, toggleModelTransparency } = useIIIFManifest();
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("section", { className, children: [
+    heading ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("h2", { className: headingClassName, children: heading }) : null,
+    models.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: "iiif-models__empty", children: emptyMessage }) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("ul", { className: listClassName, children: models.map((model, index) => {
+      const name = localize(model.rawLabel) || fallbackName(model, index);
+      const visible = isModelVisible(model.id);
+      const transparent = isModelTransparent(model.id);
+      return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("li", { className: itemClassName, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("label", { className: "iiif-models__visibility", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+            "input",
+            {
+              type: "checkbox",
+              checked: visible,
+              onChange: (event) => setModelVisible(model.id, event.target.checked),
+              "aria-label": `${visibilityLabel}: ${name}`
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "iiif-models__name", children: name })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("label", { className: "iiif-models__transparency", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+            "input",
+            {
+              type: "checkbox",
+              checked: transparent,
+              onChange: () => toggleModelTransparency(model.id),
+              "aria-label": `${transparencyLabel}: ${name}`
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "iiif-models__transparency-text", children: transparencyLabel })
+        ] })
+      ] }, model.id);
+    }) })
+  ] });
+};
+
+// src/panels/IIIFMultiManifestModelsPanel.tsx
+var import_jsx_runtime11 = require("react/jsx-runtime");
+function fallbackName2(model, index) {
+  const filename = model.url.split("/").pop() ?? "";
+  const stem = filename.split("?")[0].split("#")[0].split(".")[0];
+  return stem || `Model ${index + 1}`;
+}
+var IIIFMultiManifestModelsPanel = ({
+  heading = "Models",
+  emptyMessage = "No manifests selected",
+  visibilityLabel = "Show model",
+  transparencyLabel = "Toggle transparency",
+  className = "iiif-multi-models",
+  headingClassName = "iiif-multi-models__heading",
+  groupClassName = "iiif-multi-models__group",
+  groupHeadingClassName = "iiif-multi-models__group-heading",
+  listClassName = "iiif-multi-models__list",
+  itemClassName = "iiif-multi-models__item"
+}) => {
+  const { manifests, isModelVisible, setModelVisible, isModelTransparent, toggleModelTransparency } = useIIIFMultiManifest();
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("section", { className, children: [
+    heading ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("h2", { className: headingClassName, children: heading }) : null,
+    manifests.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { className: "iiif-multi-models__empty", children: emptyMessage }) : manifests.map((manifest) => /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: groupClassName, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("h3", { className: groupHeadingClassName, children: manifest.label }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("ul", { className: listClassName, children: manifest.models.map((model, index) => {
+        const name = model.rawLabel && typeof model.rawLabel === "string" ? model.rawLabel : fallbackName2(model, index);
+        const visible = isModelVisible(manifest.key, model.id);
+        const transparent = isModelTransparent(manifest.key, model.id);
+        return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("li", { className: itemClassName, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("label", { className: "iiif-multi-models__visibility", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+              "input",
+              {
+                type: "checkbox",
+                checked: visible,
+                onChange: (event) => setModelVisible(manifest.key, model.id, event.target.checked),
+                "aria-label": `${visibilityLabel}: ${name}`
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "iiif-multi-models__name", children: name })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("label", { className: "iiif-multi-models__transparency", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+              "input",
+              {
+                type: "checkbox",
+                checked: transparent,
+                onChange: () => toggleModelTransparency(manifest.key, model.id),
+                "aria-label": `${transparencyLabel}: ${name}`
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "iiif-multi-models__transparency-text", children: transparencyLabel })
+          ] })
+        ] }, model.id);
+      }) })
+    ] }, manifest.key))
+  ] });
+};
+
+// src/panels/IIIFSavedViewsPanel.tsx
+var import_react7 = require("react");
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var IIIFSavedViewsPanel = ({
+  heading = "Saved views",
+  emptyMessage = "No saved views in manifest",
+  hideSaveControl = false,
+  saveLabel = "Save current view",
+  onSaveView,
+  className = "iiif-views",
+  headingClassName = "iiif-views__heading",
+  listClassName = "iiif-views__list",
+  buttonClassName = "iiif-views__button"
+}) => {
+  const { cameras, localize, goToCamera, saveCurrentView, isSceneReady } = useIIIFManifest();
+  const [captured, setCaptured] = (0, import_react7.useState)(null);
+  const handleSave = () => {
+    const annotation = saveCurrentView();
+    if (!annotation) {
+      return;
+    }
+    if (onSaveView) {
+      onSaveView(annotation);
+      return;
+    }
+    setCaptured(JSON.stringify(annotation, null, 2));
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("section", { className, children: [
+    heading ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("h2", { className: headingClassName, children: heading }) : null,
+    cameras.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "iiif-views__empty", children: emptyMessage }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("ul", { className: listClassName, children: cameras.map((camera, index) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      "button",
+      {
+        type: "button",
+        className: buttonClassName,
+        onClick: () => goToCamera(index),
+        disabled: !isSceneReady,
+        children: localize(camera.rawLabel) || `View ${index + 1}`
+      }
+    ) }, camera.id ?? index)) }),
+    hideSaveControl ? null : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      "button",
+      {
+        type: "button",
+        className: "iiif-views__save",
+        onClick: handleSave,
+        disabled: !isSceneReady,
+        children: saveLabel
+      }
+    ),
+    captured ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("pre", { className: "iiif-views__output", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("code", { children: captured }) }) : null
+  ] });
+};
+
+// src/panels/IIIFLanguageSwitcher.tsx
+var import_jsx_runtime13 = require("react/jsx-runtime");
+var LANGUAGE_NAMES = {
+  en: "English",
+  no: "Norsk",
+  nn: "Nynorsk",
+  nb: "Bokm\xE5l",
+  de: "Deutsch",
+  fr: "Fran\xE7ais",
+  es: "Espa\xF1ol",
+  it: "Italiano",
+  se: "Davvis\xE1megiella"
+};
+var IIIFLanguageSwitcher = ({
+  label = "Language",
+  languageNames,
+  alwaysShow = false,
+  className = "iiif-language",
+  labelClassName = "iiif-language__label",
+  selectClassName = "iiif-language__select"
+}) => {
+  const { languages, language, setLanguage } = useIIIFManifest();
+  if (!alwaysShow && languages.length <= 1) {
+    return null;
+  }
+  const names = languageNames ? { ...LANGUAGE_NAMES, ...languageNames } : LANGUAGE_NAMES;
+  const options = languages.includes(language) ? languages : [language, ...languages];
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className, children: [
+    label ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("label", { className: labelClassName, htmlFor: "iiif-language-select", children: label }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      "select",
+      {
+        id: "iiif-language-select",
+        className: selectClassName,
+        value: language,
+        onChange: (event) => setLanguage(event.target.value),
+        children: options.map((tag) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("option", { value: tag, children: names[tag] ?? tag.toUpperCase() }, tag))
+      }
+    )
+  ] });
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  DEFAULT_FALLBACK_LANGUAGES,
+  DEFAULT_MEASURE_UNIT,
+  FORMAT_PREFERENCE,
+  IIIFCollectionCarousel,
+  IIIFCollectionPicker,
+  IIIFCollectionProvider,
+  IIIFLanguageSwitcher,
+  IIIFMetadataPanel,
+  IIIFModelsPanel,
+  IIIFMultiManifestModelsPanel,
+  IIIFMultiManifestProvider,
+  IIIFMultiManifestViewer,
+  IIIFProvider,
+  IIIFSavedViewsPanel,
+  IIIFSummary,
+  IIIFViewer,
+  LANGUAGE_NAMES,
+  UNITS_IN_METRES,
+  buildModelMatrix,
+  cameraToView,
+  collectLanguages,
+  composeTransforms,
+  getUnitScaleFactor,
+  isKnownUnit,
+  layoutManifests,
+  loadCollection,
+  loadManifest,
+  parseCollection,
+  parseManifest,
+  resolveLanguageMap,
+  sceneFromManifest,
+  sceneFromManifests,
+  selectBestSource,
+  track2view,
+  transformToMatrix,
+  useIIIFCollection,
+  useIIIFManifest,
+  useIIIFMultiManifest,
+  view2track,
+  viewToCameraAnnotation
+});
+//# sourceMappingURL=index.js.map