@nulib/clover 4.4.1 → 4.5.0

package/dist/components/Panel/About.mjs

@@ -2,11 +2,12 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useContext, useRef, useEffect, Suspense, lazy } from "react";
 import { useUniqueId } from "../../ui/useUniqueId.mjs";
-import { isLoneCanvas } from "../../core/load.mjs";
+import { isLoneCanvas, isImageServiceManifest } from "../../core/load.mjs";
 import { useCloverTranslation } from "../../i18n/useCloverTranslation.mjs";
 import { join } from "../../lib/classnames.mjs";
 import { useCloverSelector } from "../../react/context.mjs";
-import { InPanelContext, ReadingLanguages } from "./ReadingLanguages.mjs";
+import { LanguageToggle } from "./LanguageToggle.mjs";
+import { InPanelContext } from "./ReadingLanguages.mjs";
 import { Thumbnail, Summary, Metadata, RequiredStatement, Rights, Homepage, SeeAlso, Id } from "../Primitives/Primitives.mjs";
 import { useDownloads } from "../Download/downloads.mjs";
 import { Provider } from "../Provider/Provider.mjs";
@@ -23,14 +24,24 @@ const NavDate = lazy(
   () => import("../../ui/NavDate.mjs").then(({ NavDate: NavDate2 }) => ({ default: NavDate2 }))
 );
 const PartOfManifest = lazy(() => import("./PartOfManifest.mjs"));
-function About({ languages = true, ...props }) {
+function About({
+  languages = true,
+  interfaceLanguages = true,
+  ...props
+}) {
   const inPanel = useContext(InPanelContext);
   return /* @__PURE__ */ jsx(
     AboutContent,
     {
       ...props,
       download: !inPanel && props.download !== false,
-      choice: inPanel || !languages ? null : /* @__PURE__ */ jsx(ReadingLanguages, { part: "clover-about" })
+      choice: inPanel ? null : /* @__PURE__ */ jsx(
+        LanguageToggle,
+        {
+          values: languages,
+          interfaceLanguages
+        }
+      )
     }
   );
 }
@@ -182,7 +193,7 @@ function AboutContent({
         ),
         section(
           isLoneCanvas(manifest) ? "aboutCanvas" : "aboutManifest",
-          manifest.id,
+          !isImageServiceManifest(manifest) && manifest.id,
           /* @__PURE__ */ jsx(Id, {})
         )
       ]

package/dist/components/Panel/AboutActions.mjs

@@ -1,18 +1,12 @@
 "use client";
 import { jsxs, jsx } from "react/jsx-runtime";
-import { Suspense, lazy, useState, useCallback } from "react";
+import { useState, useCallback, Suspense, lazy } from "react";
 import { useDownloads } from "../Download/downloads.mjs";
 import { useCloverTranslation } from "../../i18n/useCloverTranslation.mjs";
 import { Tip } from "../../ui/Tip.mjs";
 import { useUniqueId } from "../../ui/useUniqueId.mjs";
-import "./ReadingLanguages.mjs";
+import { useLanguageToggle, LanguageToggle } from "./LanguageToggle.mjs";
 import { languageProps } from "../../i18n/direction.mjs";
-import { useReadingLanguages } from "../../react/readingLanguages.mjs";
-const LanguageChoice = lazy(
-  () => import("../../ui/LanguageChoice.mjs").then((module) => ({
-    default: module.LanguageChoice
-  }))
-);
 const ControlMenu = lazy(() => import("../Canvas/ControlMenu.mjs"));
 const DownloadGroups = lazy(
   () => import("../Download/Download.mjs").then(({ DownloadGroups: DownloadGroups2 }) => ({
@@ -21,22 +15,22 @@ const DownloadGroups = lazy(
 );
 function AboutActions({
   languages = true,
+  interfaceLanguages = true,
   download = true
 }) {
-  const choice = useReadingLanguages();
+  const choice = useLanguageToggle({ values: languages, interfaceLanguages });
   const { page, all } = useDownloads();
   const offered = download && page.length + all.length > 0;
-  if (!(languages && choice) && !offered) return null;
+  if (!choice && !offered) return null;
   return /* @__PURE__ */ jsxs("div", { className: "clover-about-actions", children: [
     offered && /* @__PURE__ */ jsx(DownloadButton, { page, all }),
-    languages && choice && /* @__PURE__ */ jsx(Suspense, { fallback: null, children: /* @__PURE__ */ jsx(
-      LanguageChoice,
+    choice && /* @__PURE__ */ jsx(
+      LanguageToggle,
       {
-        ...choice,
-        nameKey: "readingLanguage",
-        part: "clover-about"
+        values: languages,
+        interfaceLanguages
       }
-    ) })
+    )
   ] });
 }
 function DownloadButton({

package/dist/components/Panel/LanguageToggle.mjs

@@ -0,0 +1,69 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useEffect, Suspense, lazy } from "react";
+import { cloverI18n } from "../../i18n/config.mjs";
+import { useCloverTranslation } from "../../i18n/useCloverTranslation.mjs";
+import { useClover } from "../../react/context.mjs";
+import { useReadingLanguages } from "../../react/readingLanguages.mjs";
+const LanguageChoice = lazy(
+  () => import("../../ui/LanguageChoice.mjs").then((module) => ({
+    default: module.LanguageChoice
+  }))
+);
+const besideHeading = (place) => {
+  var _a;
+  const box = place.closest(".clover-sections-actions");
+  const label = (_a = box == null ? void 0 : box.closest(".clover-sections-item")) == null ? void 0 : _a.querySelector(".clover-sections-heading .clover-sections-label");
+  return box && label ? { box, label } : null;
+};
+const chooseInterface = (tag) => void cloverI18n.chooseInterfaceLanguage(tag);
+function useInterfaceLanguages() {
+  useCloverTranslation();
+  const { languages, chosen } = cloverI18n.interfaceLanguages();
+  return languages.length > 1 ? { languages, chosen } : null;
+}
+function useLanguageToggle({
+  values = true,
+  interfaceLanguages = true
+} = {}) {
+  const reading = useReadingLanguages();
+  const spoken = useInterfaceLanguages();
+  const own = values ? (reading == null ? void 0 : reading.languages) ?? [] : [];
+  const names = (tag) => own.some((each) => each === tag || cloverI18n.stringsFor(each) === tag);
+  const languages = [
+    ...own,
+    ...(interfaceLanguages ? (spoken == null ? void 0 : spoken.languages) ?? [] : []).filter(
+      (tag) => !names(tag)
+    )
+  ];
+  if (languages.length < 2) return null;
+  const picked = cloverI18n.chosenLanguage;
+  const pickedTag = picked && cloverI18n.stringsFor(picked);
+  const chosen = pickedTag && languages.includes(pickedTag) && !names(pickedTag) ? pickedTag : values && reading ? reading.chosen : (spoken == null ? void 0 : spoken.chosen) ?? languages[0];
+  const onChange = (tag) => own.includes(tag) && reading ? reading.onChange(tag) : chooseInterface(tag);
+  return { languages, chosen, onChange };
+}
+function LanguageToggle({
+  values,
+  interfaceLanguages
+}) {
+  const choice = useLanguageToggle({ values, interfaceLanguages });
+  const { drawsToggle } = useClover("About");
+  const drawn = !!choice;
+  useEffect(() => drawn ? drawsToggle == null ? void 0 : drawsToggle() : void 0, [drawn, drawsToggle]);
+  if (!choice) return null;
+  return /* @__PURE__ */ jsx(Suspense, { fallback: null, children: /* @__PURE__ */ jsx(
+    LanguageChoice,
+    {
+      ...choice,
+      nameKey: "readingLanguage",
+      part: "clover-about",
+      fit: besideHeading
+    }
+  ) });
+}
+export {
+  LanguageToggle,
+  useInterfaceLanguages,
+  useLanguageToggle
+};

package/dist/components/Panel/Panel.mjs

@@ -52,6 +52,7 @@ const Panel = forwardRef(function Panel2({
   as: Tag = "aside",
   download = true,
   languages = true,
+  interfaceLanguages = true,
   sections,
   labels,
   className,
@@ -88,7 +89,14 @@ const Panel = forwardRef(function Panel2({
     (child) => React.isValidElement(child) && child.type === Tab
   );
   const inner = layout === "accordion" ? headingLevel + 1 : headingLevel;
-  const aboutActions = languages || download ? /* @__PURE__ */ jsx(AboutActions, { languages, download }) : void 0;
+  const aboutActions = languages || interfaceLanguages || download ? /* @__PURE__ */ jsx(
+    AboutActions,
+    {
+      languages,
+      interfaceLanguages,
+      download
+    }
+  ) : void 0;
   const tabs = given.length ? given.map(({ props }) => ({
     value: props.value,
     label: props.label,

package/dist/components/Panel/ReadingLanguages.mjs

@@ -1,20 +1,6 @@
 "use client";
-import { jsx } from "react/jsx-runtime";
-import { createContext, Suspense, lazy } from "react";
-import { useReadingLanguages } from "../../react/readingLanguages.mjs";
-const LanguageChoice = lazy(
-  () => import("../../ui/LanguageChoice.mjs").then((module) => ({
-    default: module.LanguageChoice
-  }))
-);
+import { createContext } from "react";
 const InPanelContext = createContext(false);
-function ReadingLanguages({ part }) {
-  const choice = useReadingLanguages();
-  if (!choice) return null;
-  return /* @__PURE__ */ jsx(Suspense, { fallback: null, children: /* @__PURE__ */ jsx(LanguageChoice, { ...choice, nameKey: "readingLanguage", part }) });
-}
 export {
-  InPanelContext,
-  ReadingLanguages,
-  useReadingLanguages
+  InPanelContext
 };

package/dist/components/Panel/sections.mjs

@@ -1,6 +1,7 @@
 "use client";
 import { canvasTimedText, canvasTextTranscripts } from "../Canvas/layout.mjs";
 import { hasMapData } from "../../core/geo-detect.mjs";
+import { isImageServiceManifest } from "../../core/load.mjs";
 import { searchServiceOf } from "../../core/search-service.mjs";
 import { tableOfContents } from "../../core/ranges.mjs";
 import { selectVisibleCanvases, partOfCollection } from "../../core/selectors.mjs";
@@ -17,6 +18,10 @@ const PANEL_SECTIONS = [
   "annotations"
 ];
 const HAS = {
+  about: (state) => {
+    var _a, _b;
+    return !isImageServiceManifest(state.manifest) || Boolean(((_a = state.manifest) == null ? void 0 : _a.rights) || ((_b = state.manifest) == null ? void 0 : _b.requiredStatement));
+  },
   // A content state's several targets (Cookbook 0540), listed as a Collection's members are.
   targets: (state) => {
     var _a;
@@ -46,7 +51,7 @@ const narrow = (data, sections) => {
 };
 function usePanelSections(sections) {
   const data = {
-    about: true,
+    about: useCloverSelector(HAS.about),
     targets: useCloverSelector(HAS.targets),
     collection: useCloverSelector(HAS.collection),
     contents: useCloverSelector(HAS.contents),

package/dist/components/Root/useRootState.mjs

@@ -1,7 +1,8 @@
 "use client";
-import { useRef, useState, useEffect, useMemo, useSyncExternalStore } from "react";
+import { useRef, useState, useEffect, useSyncExternalStore, useCallback, useMemo } from "react";
 import { createClover } from "../../core/clover.mjs";
 import { requestKey } from "../../core/request.mjs";
+import { cloverI18n } from "../../i18n/config.mjs";
 import { useRootContentState } from "../../react/useContentStateOutput.mjs";
 import { sameRenderers } from "../Body/renderers.mjs";
 function useRootState({
@@ -117,15 +118,53 @@ function useRootState({
     setChosenUnder(language);
     setChosen(void 0);
   }
-  const reading = chosen ?? language;
+  const moved = useRef(void 0);
+  const [chosenFor, setChosenFor] = useState(key);
+  if (chosenFor !== key) {
+    setChosenFor(key);
+    setChosen(void 0);
+  }
+  useEffect(() => {
+    const spoken = moved.current;
+    moved.current = void 0;
+    if (spoken && cloverI18n.chosenLanguage === spoken)
+      void cloverI18n.chooseInterfaceLanguage();
+  }, [key]);
+  const interfaceChosen = useSyncExternalStore(
+    cloverI18n.subscribe,
+    () => cloverI18n.chosenLanguage,
+    () => cloverI18n.chosenLanguage
+  );
+  const reading = chosen ?? language ?? interfaceChosen;
+  const chooseLanguage = useCallback((tag) => {
+    setChosen(tag);
+    const spoken = cloverI18n.stringsFor(tag);
+    moved.current = spoken;
+    if (spoken) void cloverI18n.chooseInterfaceLanguage(spoken);
+  }, []);
+  const [toggles, setToggles] = useState(0);
+  const drawsToggle = useCallback(() => {
+    setToggles((count) => count + 1);
+    return () => setToggles((count) => count - 1);
+  }, []);
+  const toggleDrawn = toggles > 0;
   const context = useMemo(
     () => ({
       clover,
       language: reading,
       renderers: stableRenderers,
-      chooseLanguage: setChosen
+      chooseLanguage,
+      toggleDrawn,
+      drawsToggle
     }),
-    [clover, reading, stableRenderers]
+    [
+      clover,
+      reading,
+      stableRenderers,
+      chooseLanguage,
+      toggleDrawn,
+      drawsToggle
+    ]
   );
   return [context, status, rest];
 }

package/dist/components/Search/Search.mjs

@@ -35,6 +35,7 @@ const Search = forwardRef(function Search2({
     (state) => selectSequence(state.manifest).canvases
   );
   const selected = useCloverSelector((state) => state.annotationId);
+  const canvasId = useCloverSelector((state) => state.canvasId);
   const highlighted = useSyncExternalStore(
     clover.highlight.subscribe,
     clover.highlight.get,
@@ -52,12 +53,14 @@ const Search = forwardRef(function Search2({
     if (search.status !== "ready" || !search.set) return;
     if (arrived.current === search.set) return;
     arrived.current = search.set;
-    const first = search.hits[0];
     const chosen = search.hits.some(
       (hit) => selected && hit.entryIds.includes(selected)
     );
-    if (first && !chosen) clover.selectAnnotation(first.entryIds[0]);
-  }, [clover, search.status, search.set, search.hits, selected]);
+    if (chosen) return;
+    const here = search.hits.find((hit) => hit.canvasId === canvasId);
+    const to = here ?? search.hits[0];
+    if (to) clover.selectAnnotation(to.entryIds[0]);
+  }, [clover, search.status, search.set, search.hits, selected, canvasId]);
   useEffect(() => {
     var _a;
     const held = (_a = field.current) == null ? void 0 : _a.closest(
@@ -185,8 +188,8 @@ const Search = forwardRef(function Search2({
           }
         ) }),
         bar,
-        groups.map(({ canvasId, hits }, index) => {
-          const canvas = canvases.find((item) => item.id === canvasId);
+        groups.map(({ canvasId: canvasId2, hits }, index) => {
+          const canvas = canvases.find((item) => item.id === canvasId2);
           const label = localize(canvas == null ? void 0 : canvas.label, language);
           return /* @__PURE__ */ jsxs(
             "section",
@@ -200,7 +203,7 @@ const Search = forwardRef(function Search2({
                     id: `${id}-${index}`,
                     className: "clover-content-search-canvas",
                     ...languageProps(label.text ? label.lang : void 0),
-                    children: label.text || canvasId
+                    children: label.text || canvasId2
                   }
                 ),
                 /* @__PURE__ */ jsx("ol", { className: "clover-content-search-hits", children: hits.map(({ hit, index: place }) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
@@ -227,7 +230,7 @@ const Search = forwardRef(function Search2({
                 ) }, hit.id)) })
               ]
             },
-            `${canvasId}-${index}`
+            `${canvasId2}-${index}`
           );
         }),
         shown < count && /* @__PURE__ */ jsx(

package/dist/components/Transcript/Transcript.mjs

@@ -13,7 +13,8 @@ import { playFrom } from "../../lib/time.mjs";
 import { sameLanguage } from "../../i18n/languages.mjs";
 import { languageProps } from "../../i18n/direction.mjs";
 import { useClover, useCloverSelector } from "../../react/context.mjs";
-import { useReadingLanguages } from "../../react/readingLanguages.mjs";
+import { useReadingLanguages, covers } from "../../react/readingLanguages.mjs";
+import { GlobeGlyph } from "../../ui/GlobeGlyph.mjs";
 import { bringIntoView, scrollerOf } from "../../ui/bringIntoView.mjs";
 import { CueTime } from "../../ui/Cue.mjs";
 import { FieldPill } from "../../ui/FieldPill.mjs";
@@ -209,40 +210,48 @@ const Transcript = forwardRef(
       (code) => code && shown.filter((each) => each === code).length === 1 ? code : void 0
     );
     const lang = track.language && track.language !== "none" ? track.language : void 0;
-    const languages = tracks.length > 1 && !offered && /* @__PURE__ */ jsxs(Fragment, { children: [
+    const files = tracks.some((each) => each.read === "text");
+    const follows = covers(
+      offered,
+      tracks.map((each) => each.language)
+    );
+    const languages = tracks.length > 1 && (files || !follows) && /* @__PURE__ */ jsxs(Fragment, { children: [
       name.node,
-      /* @__PURE__ */ jsx("fieldset", { ...name.props, className: "clover-transcript-languages", children: tracks.map((option, index) => {
-        const label = localize(option.label, language);
-        const code = codes[index];
-        const text = label.text || option.language || String(index + 1);
-        return /* @__PURE__ */ jsxs("label", { className: "clover-transcript-language", children: [
-          /* @__PURE__ */ jsx(
-            "input",
-            {
-              type: "radio",
-              name: `${id}-language`,
-              checked: index === choice,
-              onChange: () => {
-                setChoice(index);
-                if (isCaptionTrack(option)) clover.captions.emit(option.id);
+      /* @__PURE__ */ jsxs("fieldset", { ...name.props, className: "clover-transcript-languages", children: [
+        !files && /* @__PURE__ */ jsx("span", { className: "clover-languages-glyph", "aria-hidden": "true", children: /* @__PURE__ */ jsx(GlobeGlyph, {}) }),
+        tracks.map((option, index) => {
+          const label = localize(option.label, language);
+          const code = codes[index];
+          const text = label.text || option.language || String(index + 1);
+          return /* @__PURE__ */ jsxs("label", { className: "clover-transcript-language", children: [
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "radio",
+                name: `${id}-language`,
+                checked: index === choice,
+                onChange: () => {
+                  setChoice(index);
+                  if (isCaptionTrack(option)) clover.captions.emit(option.id);
+                }
               }
-            }
-          ),
-          code && /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx("span", { className: "clover-transcript-code", children: code }),
-            " "
-          ] }),
-          /* @__PURE__ */ jsx(
-            "span",
-            {
-              style: code ? visuallyHidden : void 0,
-              ...languageProps(label.text ? label.lang : void 0),
-              children: text
-            }
-          ),
-          code && label.text && /* @__PURE__ */ jsx(Tip, { label: label.text, lang: label.lang })
-        ] }, option.id);
-      }) })
+            ),
+            code && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx("span", { className: "clover-transcript-code", children: code }),
+              " "
+            ] }),
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                style: code ? visuallyHidden : void 0,
+                ...languageProps(label.text ? label.lang : void 0),
+                children: text
+              }
+            ),
+            code && label.text && /* @__PURE__ */ jsx(Tip, { label: label.text, lang: label.lang })
+          ] }, option.id);
+        })
+      ] })
     ] });
     const seek = (cue, play = true) => {
       if (element) {

package/dist/core/image-service-content.mjs

@@ -0,0 +1,108 @@
+"use client";
+import { parseInfo, imageRequestUrl } from "../lib/renderer/sources/imageService.mjs";
+import { toPresentation4 } from "./presentation.mjs";
+function fittedSize(info) {
+  const { width, height, maxWidth, maxHeight, maxArea } = info;
+  const fits = (w, h) => (!maxWidth || w <= maxWidth) && (!maxHeight || h <= maxHeight) && (!maxArea || w * h <= maxArea);
+  if (fits(width, height)) return { width, height };
+  const listed = info.sizes.filter((size) => fits(size.width, size.height));
+  if (listed.length) return listed[listed.length - 1];
+  if (!info.sizeByW) return { width, height };
+  const scale = Math.min(
+    maxWidth ? maxWidth / width : 1,
+    maxHeight ? maxHeight / height : 1,
+    maxArea ? Math.sqrt(maxArea / (width * height)) : 1
+  );
+  return {
+    width: Math.max(1, Math.floor(width * scale)),
+    height: Math.max(1, Math.floor(height * scale))
+  };
+}
+function thumbnailSize(info, edge = 200) {
+  return info.sizes.find((size) => Math.max(size.width, size.height) >= edge) ?? fittedSize(info);
+}
+const FORMATS = {
+  jpg: "image/jpeg",
+  png: "image/png",
+  webp: "image/webp",
+  gif: "image/gif"
+};
+function imageBody(info, service, size) {
+  const whole = { x: 0, y: 0, width: info.width, height: info.height };
+  return {
+    id: imageRequestUrl(info, whole, size.width, size.height),
+    type: "Image",
+    format: FORMATS[info.format] ?? "image/jpeg",
+    width: size.width,
+    height: size.height,
+    service: [service]
+  };
+}
+function serviceEntry(doc, info) {
+  if (info.version === 3) {
+    return {
+      id: info.id,
+      type: "ImageService3",
+      profile: typeof doc.profile === "string" ? doc.profile : "level0"
+    };
+  }
+  const profile = [].concat(doc.profile ?? []).find((value) => typeof value === "string");
+  return {
+    "@id": info.id,
+    "@type": "ImageService2",
+    profile: profile ?? "http://iiif.io/api/image/2/level0.json"
+  };
+}
+async function imageServiceContent(json, requestedId) {
+  const info = parseInfo(json, requestedId);
+  const service = serviceEntry(json, info);
+  const canvasId = `${info.id}/canvas`;
+  const rights = [json.rights, json.license].flat().find((value) => typeof value === "string");
+  const attribution = json.attribution;
+  const manifest = {
+    "@context": "http://iiif.io/api/presentation/3/context.json",
+    id: info.id,
+    type: "Manifest",
+    label: { none: [""] },
+    thumbnail: [imageBody(info, service, thumbnailSize(info))],
+    items: [
+      {
+        id: canvasId,
+        type: "Canvas",
+        width: info.width,
+        height: info.height,
+        items: [
+          {
+            id: `${canvasId}/page`,
+            type: "AnnotationPage",
+            items: [
+              {
+                id: `${canvasId}/page/image`,
+                type: "Annotation",
+                motivation: "painting",
+                body: imageBody(info, service, fittedSize(info)),
+                target: canvasId
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  };
+  if (rights) manifest.rights = rights;
+  if (attribution) {
+    manifest.requiredStatement = {
+      label: { en: ["Attribution"] },
+      value: {
+        none: [].concat(attribution).map(
+          (value) => typeof value === "string" ? value : String((value == null ? void 0 : value["@value"]) ?? "")
+        ).filter(Boolean)
+      }
+    };
+  }
+  return { manifest: await toPresentation4(manifest) };
+}
+export {
+  fittedSize,
+  imageServiceContent
+};

package/dist/core/load.mjs

@@ -14,6 +14,30 @@ function isContentState(json) {
   }
   return value.type === "SpecificResource";
 }
+const isImageService = (json) => Boolean(json) && typeof json === "object" && /ImageService[123]|iiif\.io\/api\/image/.test(
+  JSON.stringify(
+    ["@context", "type", "@type", "protocol"].map(
+      (key) => json[key]
+    )
+  )
+);
+async function fetchContent(request, url, signal) {
+  try {
+    return await fetchJson(request, url, signal);
+  } catch (error) {
+    if ((signal == null ? void 0 : signal.aborted) || /\.json([?#]|$)/i.test(url)) throw error;
+    try {
+      const json = await fetchJson(
+        request,
+        `${url.replace(/\/+$/, "")}/info.json`,
+        signal
+      );
+      if (isImageService(json)) return json;
+    } catch {
+    }
+    throw error;
+  }
+}
 const DESCRIPTIVE = [
   "summary",
   "metadata",
@@ -45,6 +69,10 @@ const isLoneCanvas = (manifest) => {
   var _a, _b;
   return Boolean(manifest) && ((_b = (_a = manifest.items) == null ? void 0 : _a[0]) == null ? void 0 : _b.id) === manifest.id;
 };
+const isImageServiceManifest = (manifest) => {
+  var _a, _b;
+  return Boolean(manifest) && ((_a = manifest.items) == null ? void 0 : _a.length) === 1 && ((_b = manifest.items[0]) == null ? void 0 : _b.id) === `${manifest.id}/canvas`;
+};
 const ANNOTATIONS = /^(oa:)?Annotation(Page|Collection)$/;
 class CloverContentError extends Error {
   constructor() {
@@ -132,7 +160,7 @@ async function loadContent(input, options = {}) {
   };
   if (typeof input === "string") {
     if (isUrl(input.trim())) {
-      json = await fetchJson(request, input.trim(), signal);
+      json = await fetchContent(request, input.trim(), signal);
     } else {
       const { decodeContentState } = await readContentState();
       const state = decodeContentState(input);
@@ -149,6 +177,13 @@ async function loadContent(input, options = {}) {
     const { annotationsContent } = await import("./annotations-content.mjs");
     return annotationsContent(json, options);
   }
+  if (isImageService(json)) {
+    const { imageServiceContent } = await import("./image-service-content.mjs");
+    return imageServiceContent(
+      json,
+      typeof input === "string" ? input.trim() : void 0
+    );
+  }
   const resource = await toPresentation4(json);
   (_a = signal == null ? void 0 : signal.throwIfAborted) == null ? void 0 : _a.call(signal);
   switch (resource.type) {
@@ -185,6 +220,8 @@ async function loadContent(input, options = {}) {
 export {
   CloverContentError,
   fetchResource,
+  isImageService,
+  isImageServiceManifest,
   isLoneCanvas,
   loadContent,
   loadManifest,

package/dist/core/value.mjs

@@ -11,7 +11,7 @@ function localize(value, language, separator = ", ") {
   const tag = languageToRead(tags, language);
   const entry = value[tag];
   const text = Array.isArray(entry) ? entry.join(separator) : String(entry);
-  return { text, lang: tag === "none" ? void 0 : tag };
+  return { text, lang: tag === "none" || tag === "@none" ? void 0 : tag };
 }
 const TAG = /^[A-Za-z]{2,8}(-[A-Za-z0-9]{1,8})*$/;
 function hrefLangOf(resource) {