@nulib/clover 4.0.0-beta.1 → 4.0.0

package/README.md

@@ -6,7 +6,7 @@ Clover builds accessible viewers for IIIF Manifests and Collections, in React or
 components: a ready-made `Viewer`, and the parts it is made of, to compose your own. It is
 a project of [Northwestern University Libraries](https://www.library.northwestern.edu/).
 
-[Documentation](https://nulib-ds.github.io/clover/docs) ·
+[Documentation](https://clover.iiif.library.northwestern.edu/docs) ·
 [Repository](https://github.com/nulib-ds/clover) ·
 [Issues](https://github.com/nulib-ds/clover/issues)
 
@@ -104,16 +104,16 @@ If you serve Clover's files yourself, copy the whole `dist/web-components` folde
 
 ## Learn more
 
-- [Get started](https://nulib-ds.github.io/clover/docs): a quick start, either way.
-- [Viewer](https://nulib-ds.github.io/clover/docs/viewer): its templates, and every prop.
-- [Composing layouts](https://nulib-ds.github.io/clover/docs/composing): layouts of your
+- [Get started](https://clover.iiif.library.northwestern.edu/docs): a quick start, either way.
+- [Viewer](https://clover.iiif.library.northwestern.edu/docs/viewer): its templates, and every prop.
+- [Composing layouts](https://clover.iiif.library.northwestern.edu/docs/composing): layouts of your
   own, from the parts and hooks.
-- [Styling](https://nulib-ds.github.io/clover/docs/styling): colors, sizes and classes.
-- [Technical overview](https://nulib-ds.github.io/clover/docs/technical): events,
+- [Styling](https://clover.iiif.library.northwestern.edu/docs/styling): colors, sizes and classes.
+- [Technical overview](https://clover.iiif.library.northwestern.edu/docs/technical): events,
   languages, types, what each part loads, and coming from Clover 3.x.
 
 Clover 3.x, `@samvera/clover-iiif`, is documented on the same site, under
-[Clover 3.x](https://nulib-ds.github.io/clover/docs/3.x).
+[Clover 3.x](https://clover.iiif.library.northwestern.edu/docs/deprecated-versions).
 
 ## License
 

package/dist/components/Annotations/Annotations.mjs

@@ -1,32 +1,36 @@
 "use client";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import React, { forwardRef, useEffect, useMemo, useState, useRef } from "react";
+import React, { forwardRef, useMemo, useState, useRef, useEffect } from "react";
 import { useUniqueId } from "../../ui/useUniqueId.mjs";
 import { EntryBodies } from "./EntryBodies.mjs";
-import { selectListedSets, findEntry, selectHiddenSets, manifestOfAnnotation } from "../../core/annotation-sets.mjs";
+import { selectListedSets, findEntry, selectHiddenSets, selectAnnotationPages, manifestOfAnnotation } from "../../core/annotation-sets.mjs";
+import { usePagesReached } from "../../react/usePagesReached.mjs";
+import { ListEnd } from "../../ui/ListEnd.mjs";
 import { annotationName } from "../../core/annotation-name.mjs";
-import { readLink } from "../../core/link.mjs";
+import { readLink, readTagSource } from "../../core/link.mjs";
 import { showLink } from "../../core/show-link.mjs";
-import { loadManifest } from "../../core/load.mjs";
 import { selectSequence, selectVisibleCanvases } from "../../core/selectors.mjs";
-import { parseTime } from "../../core/ranges.mjs";
 import { regionSource } from "../../core/region.mjs";
-import { resolveThumbnail } from "../../core/thumbnail.mjs";
 import { localize } from "../../core/value.mjs";
 import { langWithin } from "../../i18n/config.mjs";
 import { useCloverTranslation } from "../../i18n/useCloverTranslation.mjs";
 import { join } from "../../lib/classnames.mjs";
-import { playFrom } from "../../lib/time.mjs";
+import { parseTime, playFrom } from "../../lib/time.mjs";
 import { useClover, useCloverSelector } from "../../react/context.mjs";
+import { fetchManifest } from "../../react/fetchManifest.mjs";
 import { bringIntoView, scrollerOf } from "../../ui/bringIntoView.mjs";
 import { titleTag } from "../../ui/heading.mjs";
 import { CueTime } from "../../ui/Cue.mjs";
+import { EntryThumbnail } from "../../ui/EntryThumbnail.mjs";
+import { useLoaded } from "../../hooks/useLoaded.mjs";
 import { HideToggle } from "../../ui/HideToggle.mjs";
-import { languageCode } from "../../ui/languageCode.mjs";
-import { Tip } from "../../ui/Tip.mjs";
-import { useContainerName } from "../../ui/useContainerName.mjs";
 import { visuallyHidden } from "../../ui/visuallyHidden.mjs";
-import { languagesOf, startingLanguage, inLanguage, autonym } from "./languages.mjs";
+import { startingLanguage } from "../../core/language-choice.mjs";
+import { useReadingLanguages } from "../../react/readingLanguages.mjs";
+import { LanguageChoice } from "../../ui/LanguageChoice.mjs";
+import { languagesOf, inLanguage } from "./languages.mjs";
+import { languageProps } from "../../i18n/direction.mjs";
+const NO_PAGES = [];
 const Annotations = forwardRef(
   function Annotations2({
     scope = "all",
@@ -66,9 +70,10 @@ const Annotations = forwardRef(
         playFrom(element, time.start);
       clover.selectAnnotation(id);
     };
-    useEffect(() => {
-      if (scope === "all") return clover.holdAllAnnotationPages();
-    }, [clover, scope]);
+    const pages = useCloverSelector(
+      (state) => scope === "all" ? selectAnnotationPages(state.manifest) : NO_PAGES
+    );
+    const reach = usePagesReached(pages);
     const visible = (set) => set.entries.filter(
       (entry) => shown.some((canvas) => canvas.id === entry.canvasId)
     );
@@ -97,7 +102,8 @@ const Annotations = forwardRef(
           renderEntry,
           onSelect: choose,
           onHighlight: (id) => clover.highlight.emit(id),
-          onVisible: (ids, on) => ids.forEach((id) => clover.setSetVisible(id, on))
+          onVisible: (ids, on) => ids.forEach((id) => clover.setSetVisible(id, on)),
+          end: reach.more && /* @__PURE__ */ jsx(ListEnd, { onReached: reach.reachNext })
         }
       );
     if (!groups.length) return null;
@@ -153,7 +159,8 @@ function AnnotationGroup({
   const headingLevel = title.text ? setLevel + 1 : setLevel;
   const languages = useMemo(() => languagesOf(entries), [entries]);
   const [picked, setPicked] = useState();
-  const chosen = startingLanguage(languages, language, picked);
+  const offered = useReadingLanguages();
+  const chosen = offered ? startingLanguage(languages, offered.chosen) : startingLanguage(languages, language, picked);
   const listed = entries.filter((entry) => inLanguage(entry, chosen));
   return /* @__PURE__ */ jsxs(
     "section",
@@ -168,16 +175,18 @@ function AnnotationGroup({
             {
               className: "clover-annotations-title",
               id: `${id}-title`,
-              lang: title.lang,
+              ...languageProps(title.lang),
               children: title.text
             }
           ),
-          chosen && /* @__PURE__ */ jsx(
+          chosen && !offered && /* @__PURE__ */ jsx(
             LanguageChoice,
             {
               languages,
               chosen,
-              onChange: setPicked
+              onChange: setPicked,
+              nameKey: "annotationsLanguage",
+              part: "clover-annotations"
             }
           ),
           /* @__PURE__ */ jsx(
@@ -250,20 +259,6 @@ function layersOf(sets, canvases, language) {
 function inOrder(groups, order) {
   return groups.every(([id]) => order.has(id)) ? groups.sort(([a], [b]) => order.get(a) - order.get(b)) : groups;
 }
-const fetched = /* @__PURE__ */ new WeakMap();
-function fetchManifest(clover, id) {
-  let byId = fetched.get(clover);
-  if (!byId) fetched.set(clover, byId = /* @__PURE__ */ new Map());
-  let manifest = byId.get(id);
-  if (!manifest) {
-    manifest = loadManifest(
-      { id, type: "Manifest" },
-      { request: clover.request }
-    ).catch(() => null);
-    byId.set(id, manifest);
-  }
-  return manifest;
-}
 function useElsewhere(layers, here) {
   const { clover, language } = useClover("Annotations");
   const wanted = useMemo(() => {
@@ -317,7 +312,8 @@ const AnnotationLayers = forwardRef(function AnnotationLayers2({
   renderEntry,
   onSelect,
   onHighlight,
-  onVisible
+  onVisible,
+  end
 }, ref) {
   const id = useUniqueId();
   const canvases = useCloverSelector(
@@ -333,6 +329,7 @@ const AnnotationLayers = forwardRef(function AnnotationLayers2({
   );
   const elsewhere = useElsewhere(layers, canvasById);
   const [picked, setPicked] = useState({});
+  const offered = useReadingLanguages();
   const manifestLabel = useCloverSelector((state) => {
     var _a;
     return (_a = state.manifest) == null ? void 0 : _a.label;
@@ -372,7 +369,7 @@ const AnnotationLayers = forwardRef(function AnnotationLayers2({
     if (entry) bringIntoView(entry, "nearest");
   }, [selected]);
   if (!layers.length) return null;
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs(
     Tag,
     {
       ref: (node) => {
@@ -383,167 +380,131 @@ const AnnotationLayers = forwardRef(function AnnotationLayers2({
       className: join("clover-annotations", className),
       "data-scope": "all",
       ...rest,
-      children: layers.map((layer, layerIndex) => {
-        const Title = titleTag(headingLevel);
-        const level = layer.title.text ? headingLevel + 1 : headingLevel;
-        const Label = titleTag(level);
-        const hidden = layer.setIds.every(
-          (setId) => hiddenSets.includes(setId)
-        );
-        const languages = languagesOf(
-          layer.canvases.flatMap((group) => group.entries)
-        );
-        const chosen = startingLanguage(languages, language, picked[layer.key]);
-        return /* @__PURE__ */ jsxs(
-          "section",
-          {
-            className: "clover-annotations-set",
-            "aria-labelledby": layer.title.text ? `${id}-${layerIndex}` : void 0,
-            children: [
-              /* @__PURE__ */ jsxs("div", { className: "clover-annotations-set-header", children: [
-                layer.title.text && /* @__PURE__ */ jsx(
-                  Title,
-                  {
-                    className: "clover-annotations-title",
-                    id: `${id}-${layerIndex}`,
-                    lang: layer.title.lang,
-                    children: layer.title.text
-                  }
-                ),
-                chosen && /* @__PURE__ */ jsx(
-                  LanguageChoice,
-                  {
-                    languages,
-                    chosen,
-                    onChange: (tag) => setPicked((current) => ({ ...current, [layer.key]: tag }))
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  HideToggle,
-                  {
-                    hidden,
-                    onChange: (hide) => onVisible(layer.setIds, !hide),
-                    of: layer.title.text ? `${id}-${layerIndex}` : void 0
-                  }
-                )
-              ] }),
-              layer.canvases.map((group, groupIndex) => {
-                var _a;
-                const entries = group.entries.filter(
-                  (entry) => inLanguage(entry, chosen)
-                );
-                if (!entries.length) return null;
-                const there = elsewhere.of.get(group.canvasId);
-                const label = there ? there.label : elsewhere.named && title.text ? canvases.length > 1 && group.label.text ? [title, group.label] : [title] : [group.label];
-                const labeled = grouped && Boolean((_a = label[0]) == null ? void 0 : _a.text);
-                const current = grouped && shown.includes(group.canvasId);
-                const labelId = `${id}-${layerIndex}-${groupIndex}`;
-                return /* @__PURE__ */ jsxs(
-                  "section",
-                  {
-                    className: "clover-annotations-canvas",
-                    "data-canvas": group.canvasId,
-                    "aria-labelledby": labeled ? labelId : void 0,
-                    "aria-current": current ? "true" : void 0,
-                    children: [
-                      labeled && /* @__PURE__ */ jsx(
-                        Label,
-                        {
-                          className: "clover-annotations-canvas-label",
-                          id: labelId,
-                          lang: label.length === 1 ? label[0].lang : void 0,
-                          children: label.length === 1 ? label[0].text : label.map((part, index) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
-                            index > 0 && ", ",
-                            /* @__PURE__ */ jsx("span", { lang: part.lang, children: part.text })
-                          ] }, index))
-                        }
-                      ),
-                      /* @__PURE__ */ jsx("ol", { className: "clover-annotations-list", children: entries.map((entry, index) => /* @__PURE__ */ jsx(
-                        AnnotationItem,
-                        {
-                          entry,
-                          canvas: canvasById.get(group.canvasId) ?? (there == null ? void 0 : there.canvas),
-                          index,
-                          headingLevel: labeled ? level + 1 : level,
-                          language,
-                          showLabel,
-                          selected: entry.id === selected,
-                          highlighted: entry.id === highlighted,
-                          renderEntry,
-                          onSelect,
-                          onHighlight
-                        },
-                        entry.id
-                      )) })
-                    ]
-                  },
-                  group.canvasId
-                );
-              })
-            ]
-          },
-          layer.key
-        );
-      })
+      children: [
+        layers.map((layer, layerIndex) => {
+          const Title = titleTag(headingLevel);
+          const level = layer.title.text ? headingLevel + 1 : headingLevel;
+          const Label = titleTag(level);
+          const hidden = layer.setIds.every(
+            (setId) => hiddenSets.includes(setId)
+          );
+          const languages = languagesOf(
+            layer.canvases.flatMap((group) => group.entries)
+          );
+          const chosen = offered ? startingLanguage(languages, offered.chosen) : startingLanguage(languages, language, picked[layer.key]);
+          return /* @__PURE__ */ jsxs(
+            "section",
+            {
+              className: "clover-annotations-set",
+              "aria-labelledby": layer.title.text ? `${id}-${layerIndex}` : void 0,
+              children: [
+                /* @__PURE__ */ jsxs("div", { className: "clover-annotations-set-header", children: [
+                  layer.title.text && /* @__PURE__ */ jsx(
+                    Title,
+                    {
+                      className: "clover-annotations-title",
+                      id: `${id}-${layerIndex}`,
+                      ...languageProps(layer.title.lang),
+                      children: layer.title.text
+                    }
+                  ),
+                  chosen && !offered && /* @__PURE__ */ jsx(
+                    LanguageChoice,
+                    {
+                      languages,
+                      chosen,
+                      onChange: (tag) => setPicked((current) => ({ ...current, [layer.key]: tag })),
+                      nameKey: "annotationsLanguage",
+                      part: "clover-annotations"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    HideToggle,
+                    {
+                      hidden,
+                      onChange: (hide) => onVisible(layer.setIds, !hide),
+                      of: layer.title.text ? `${id}-${layerIndex}` : void 0
+                    }
+                  )
+                ] }),
+                layer.canvases.map((group, groupIndex) => {
+                  var _a;
+                  const entries = group.entries.filter(
+                    (entry) => inLanguage(entry, chosen)
+                  );
+                  if (!entries.length) return null;
+                  const there = elsewhere.of.get(group.canvasId);
+                  const label = there ? there.label : elsewhere.named && title.text ? canvases.length > 1 && group.label.text ? [title, group.label] : [title] : [group.label];
+                  const labeled = grouped && Boolean((_a = label[0]) == null ? void 0 : _a.text);
+                  const current = grouped && shown.includes(group.canvasId);
+                  const labelId = `${id}-${layerIndex}-${groupIndex}`;
+                  return /* @__PURE__ */ jsxs(
+                    "section",
+                    {
+                      className: "clover-annotations-canvas",
+                      "data-canvas": group.canvasId,
+                      "aria-labelledby": labeled ? labelId : void 0,
+                      "aria-current": current ? "true" : void 0,
+                      children: [
+                        labeled && /* @__PURE__ */ jsx(
+                          Label,
+                          {
+                            className: "clover-annotations-canvas-label",
+                            id: labelId,
+                            ...languageProps(
+                              label.length === 1 ? label[0].lang : void 0
+                            ),
+                            children: label.length === 1 ? label[0].text : label.map((part, index) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
+                              index > 0 && ", ",
+                              /* @__PURE__ */ jsx("span", { ...languageProps(part.lang), children: part.text })
+                            ] }, index))
+                          }
+                        ),
+                        /* @__PURE__ */ jsx("ol", { className: "clover-annotations-list", children: entries.map((entry, index) => /* @__PURE__ */ jsx(
+                          AnnotationItem,
+                          {
+                            entry,
+                            canvas: canvasById.get(group.canvasId) ?? (there == null ? void 0 : there.canvas),
+                            index,
+                            headingLevel: labeled ? level + 1 : level,
+                            language,
+                            showLabel,
+                            selected: entry.id === selected,
+                            highlighted: entry.id === highlighted,
+                            renderEntry,
+                            onSelect,
+                            onHighlight
+                          },
+                          entry.id
+                        )) })
+                      ]
+                    },
+                    group.canvasId
+                  );
+                })
+              ]
+            },
+            layer.key
+          );
+        }),
+        end
+      ]
     }
   );
 });
-function LanguageChoice({
-  languages,
-  chosen,
-  onChange
-}) {
-  const { t, langOf } = useCloverTranslation();
-  const id = useUniqueId();
-  const name = useContainerName(
-    t("annotationsLanguage"),
-    langOf("annotationsLanguage")
-  );
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    name.node,
-    /* @__PURE__ */ jsx("fieldset", { ...name.props, className: "clover-annotations-languages", children: languages.map((tag) => {
-      const own = autonym(tag);
-      return /* @__PURE__ */ jsxs("label", { className: "clover-annotations-language", children: [
-        /* @__PURE__ */ jsx(
-          "input",
-          {
-            type: "radio",
-            name: `${id}-language`,
-            checked: tag === chosen,
-            onChange: () => onChange(tag)
-          }
-        ),
-        /* @__PURE__ */ jsx("span", { className: "clover-annotations-language-code", children: languageCode(tag) }),
-        " ",
-        /* @__PURE__ */ jsx("span", { style: visuallyHidden, lang: tag, children: own }),
-        /* @__PURE__ */ jsx(Tip, { label: own, lang: tag })
-      ] }, tag);
-    }) })
-  ] });
-}
-const THUMBNAIL_SIZE = 52;
-function useRegionThumbnail(entry, canvas) {
-  const { clover } = useClover("Annotations");
-  const source = useMemo(() => {
-    const rect = entry.target.rect;
+function useRegionSource(entry, canvas) {
+  const svg = entry.target.rect ? void 0 : entry.target.svg;
+  const reader = useLoaded(loadSvgShape, Boolean(svg));
+  return useMemo(() => {
+    var _a, _b;
+    const box = svg ? (_a = reader == null ? void 0 : reader.readSvgShape(svg)) == null ? void 0 : _a.box : void 0;
+    const rect = entry.target.rect ?? (box ? { x: box.x, y: box.y, w: box.width, h: box.height } : void 0);
     if (!rect || !canvas || entry.bodies.some((body) => body.image))
       return null;
-    return regionSource(canvas, rect);
-  }, [entry, canvas]);
-  const [src, setSrc] = useState();
-  useEffect(() => {
-    setSrc(void 0);
-    if (!source) return;
-    let live = true;
-    void resolveThumbnail(source, THUMBNAIL_SIZE, clover.request).then(
-      (url) => live && setSrc(url)
-    );
-    return () => {
-      live = false;
-    };
-  }, [source, clover]);
-  return src;
+    return regionSource(canvas, rect, (_b = entry.layer) == null ? void 0 : _b.image);
+  }, [entry, canvas, svg, reader]);
 }
+const loadSvgShape = () => import("../../core/svg-shape.mjs");
 function AnnotationItem({
   entry,
   canvas,
@@ -564,7 +525,8 @@ function AnnotationItem({
   const show = time ? { text: t("annotationsShowTime"), lang: langOf("annotationsShowTime") } : showLabel;
   const oneLanguage = !show.lang && !langWithin(text.lang, hostLanguage);
   const name = text.text ? `${show.text}: ${text.text}` : show.text;
-  const thumbnail = useRegionThumbnail(entry, canvas);
+  const { clover } = useClover("Annotations");
+  const thumbnail = useRegionSource(entry, canvas);
   return /* @__PURE__ */ jsxs(
     "li",
     {
@@ -582,16 +544,12 @@ function AnnotationItem({
       },
       children: [
         time && /* @__PURE__ */ jsx(CueTime, { start: time.start, className: "clover-annotations-time" }),
-        thumbnail && /* @__PURE__ */ jsx(
-          "img",
+        /* @__PURE__ */ jsx(
+          EntryThumbnail,
           {
             className: "clover-annotations-thumbnail",
-            src: thumbnail,
-            alt: "",
-            width: THUMBNAIL_SIZE / 2,
-            height: THUMBNAIL_SIZE / 2,
-            loading: "lazy",
-            decoding: "async"
+            source: thumbnail,
+            request: clover.request
           }
         ),
         /* @__PURE__ */ jsxs("div", { className: "clover-annotations-body clover-cue-text", children: [
@@ -615,13 +573,13 @@ function AnnotationItem({
             style: visuallyHidden,
             onClick: () => onSelect(entry.id),
             children: !oneLanguage && /* @__PURE__ */ jsxs(Fragment, { children: [
-              /* @__PURE__ */ jsxs("span", { lang: show.lang, children: [
+              /* @__PURE__ */ jsxs("span", { ...languageProps(show.lang), children: [
                 show.text,
                 text.text && ":"
               ] }),
               text.text && /* @__PURE__ */ jsxs(Fragment, { children: [
                 " ",
-                /* @__PURE__ */ jsx("span", { lang: text.lang, children: text.text })
+                /* @__PURE__ */ jsx("span", { ...languageProps(text.lang), children: text.text })
               ] })
             ] })
           }
@@ -633,7 +591,10 @@ function AnnotationItem({
 function FollowLink({ annotation }) {
   const { clover } = useClover("Annotations");
   const { t, langOf } = useCloverTranslation();
-  const link = useMemo(() => readLink(annotation), [annotation]);
+  const link = useMemo(
+    () => readLink(annotation) ?? readTagSource(annotation),
+    [annotation]
+  );
   if (!link) return null;
   const text = t("annotationsOpenLink");
   const lang = langOf("annotationsOpenLink");
@@ -645,7 +606,7 @@ function FollowLink({ annotation }) {
         href: link.id,
         target: "_blank",
         rel: "noopener noreferrer",
-        lang,
+        ...languageProps(lang),
         children: text
       }
     );
@@ -654,7 +615,7 @@ function FollowLink({ annotation }) {
     {
       type: "button",
       className: "clover-annotations-link",
-      lang,
+      ...languageProps(lang),
       onClick: (event) => {
         var _a;
         const root = event.currentTarget.closest(".clover-root");

package/dist/components/Annotations/EntryBodies.mjs

@@ -1,24 +1,49 @@
 "use client";
 import { jsx, Fragment } from "react/jsx-runtime";
+import { bodyInLanguage } from "../../core/annotation-name.mjs";
 import { localize } from "../../core/value.mjs";
 import { useCloverTranslation } from "../../i18n/useCloverTranslation.mjs";
 import { Markup } from "../../ui/Markup.mjs";
+import { languageProps } from "../../i18n/direction.mjs";
 const hasText = (bodies) => bodies.some((body) => {
   var _a;
   return (_a = body.value) == null ? void 0 : _a.trim();
 });
+const shownOf = (bodies, language) => {
+  const choices = /* @__PURE__ */ new Map();
+  for (const body of bodies)
+    if (body.choice !== void 0)
+      choices.set(body.choice, [...choices.get(body.choice) ?? [], body]);
+  if (!choices.size) return bodies;
+  const shown = new Set(
+    [...choices.values()].map((items) => bodyInLanguage(items, language))
+  );
+  return bodies.filter((body) => body.choice === void 0 || shown.has(body));
+};
 function EntryBodies({
   bodies,
   language,
   headingLevel
 }) {
   const { t, langOf } = useCloverTranslation();
+  const shown = shownOf(bodies, language);
   const altOf = (body) => {
-    if (hasText(bodies)) return { text: "" };
+    if (hasText(shown)) return { text: "" };
     const label = localize(body.label, language);
     return label.text ? label : { text: t("annotationsImage"), lang: langOf("annotationsImage") };
   };
-  return /* @__PURE__ */ jsx(Fragment, { children: bodies.map((body, index) => {
+  return /* @__PURE__ */ jsx(Fragment, { children: shown.map((body, index) => {
+    if (body.place)
+      return /* @__PURE__ */ jsx(
+        Markup,
+        {
+          as: "div",
+          markup: body.label,
+          language,
+          className: "clover-annotations-text"
+        },
+        index
+      );
     if (!body.image)
       return /* @__PURE__ */ jsx(
         Markup,
@@ -38,7 +63,7 @@ function EntryBodies({
       {
         src: body.image,
         alt: alt.text,
-        lang: alt.text ? alt.lang : void 0,
+        ...languageProps(alt.text ? alt.lang : void 0),
         width: 200,
         loading: "lazy",
         className: "clover-annotations-image"

package/dist/components/Annotations/languages.mjs

@@ -1,5 +1,4 @@
 "use client";
-import { localize } from "../../core/value.mjs";
 function entryLanguages(entry) {
   const tags = entry.bodies.filter((body) => {
     var _a;
@@ -16,28 +15,13 @@ function languagesOf(entries) {
   );
   return split ? all : [];
 }
-function startingLanguage(languages, language, picked) {
-  if (picked && languages.includes(picked)) return picked;
-  if (!languages.length) return void 0;
-  const map = Object.fromEntries(languages.map((tag) => [tag, [tag]]));
-  return localize(map, language).lang ?? languages[0];
-}
 function inLanguage(entry, chosen) {
   if (!chosen) return true;
   const tags = entryLanguages(entry);
   return !tags.length || tags.includes(chosen);
 }
-function autonym(tag) {
-  try {
-    return new Intl.DisplayNames([tag], { type: "language" }).of(tag) ?? tag;
-  } catch {
-    return tag;
-  }
-}
 export {
-  autonym,
   entryLanguages,
   inLanguage,
-  languagesOf,
-  startingLanguage
+  languagesOf
 };