@nulib/clover 4.4.2 → 4.5.0

package/README.md

@@ -109,8 +109,8 @@ If you serve Clover's files yourself, copy the whole `dist/web-components` folde
 - [Composing layouts](https://clover.iiif.library.northwestern.edu/docs/composing): layouts of your
   own, from the parts and hooks.
 - [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.
+- [Glossary](https://clover.iiif.library.northwestern.edu/docs/composing/glossary): every
+  component and helper, and the package's structure.
 
 Clover 3.x, `@samvera/clover-iiif`, is deprecated and no longer maintained. Its docs are
 kept on the same site, under

package/dist/components/Annotations/Annotations.mjs

@@ -26,7 +26,7 @@ import { useLoaded } from "../../hooks/useLoaded.mjs";
 import { HideToggle } from "../../ui/HideToggle.mjs";
 import { visuallyHidden } from "../../ui/visuallyHidden.mjs";
 import { startingLanguage } from "../../core/language-choice.mjs";
-import { useReadingLanguages } from "../../react/readingLanguages.mjs";
+import { useReadingLanguages, covers } from "../../react/readingLanguages.mjs";
 import { LanguageChoice } from "../../ui/LanguageChoice.mjs";
 import { languagesOf, inLanguage } from "./languages.mjs";
 import { languageProps } from "../../i18n/direction.mjs";
@@ -160,7 +160,8 @@ function AnnotationGroup({
   const languages = useMemo(() => languagesOf(entries), [entries]);
   const [picked, setPicked] = useState();
   const offered = useReadingLanguages();
-  const chosen = offered ? startingLanguage(languages, offered.chosen) : startingLanguage(languages, language, picked);
+  const follows = covers(offered, languages);
+  const chosen = follows ? startingLanguage(languages, offered.chosen) : startingLanguage(languages, (offered == null ? void 0 : offered.chosen) ?? language, picked);
   const listed = entries.filter((entry) => inLanguage(entry, chosen));
   return /* @__PURE__ */ jsxs(
     "section",
@@ -179,7 +180,7 @@ function AnnotationGroup({
               children: title.text
             }
           ),
-          chosen && !offered && /* @__PURE__ */ jsx(
+          chosen && !follows && /* @__PURE__ */ jsx(
             LanguageChoice,
             {
               languages,
@@ -391,7 +392,12 @@ const AnnotationLayers = forwardRef(function AnnotationLayers2({
           const languages = languagesOf(
             layer.canvases.flatMap((group) => group.entries)
           );
-          const chosen = offered ? startingLanguage(languages, offered.chosen) : startingLanguage(languages, language, picked[layer.key]);
+          const follows = covers(offered, languages);
+          const chosen = follows ? startingLanguage(languages, offered.chosen) : startingLanguage(
+            languages,
+            (offered == null ? void 0 : offered.chosen) ?? language,
+            picked[layer.key]
+          );
           return /* @__PURE__ */ jsxs(
             "section",
             {
@@ -408,7 +414,7 @@ const AnnotationLayers = forwardRef(function AnnotationLayers2({
                       children: layer.title.text
                     }
                   ),
-                  chosen && !offered && /* @__PURE__ */ jsx(
+                  chosen && !follows && /* @__PURE__ */ jsx(
                     LanguageChoice,
                     {
                       languages,

package/dist/components/Items/Items.mjs

@@ -183,6 +183,7 @@ function ItemsView({
   navigation,
   rtl = false,
   layout = "slider",
+  orientation = "horizontal",
   thumbnailSize = 200,
   request,
   language,
@@ -212,6 +213,7 @@ function ItemsView({
   const { langOf } = root;
   const contrast = useHighContrast(highContrast);
   const slider = layout === "slider";
+  const vertical = slider && orientation === "vertical";
   const listbox = navigation === "id";
   const viewport = useRef(null);
   const masonry = layout === "masonry";
@@ -230,12 +232,13 @@ function ItemsView({
   }, [masonry]);
   const track = useScrollTrack({
     align: listbox ? "center" : "start",
-    itemCount: items.length
+    itemCount: items.length,
+    axis: vertical ? "y" : "x"
   });
   const held = useRef(void 0);
   useEffect(() => () => window.clearTimeout(held.current), []);
   const roving = useRovingFocus(items.length, selected, {
-    orientation: layout === "slider" ? "horizontal" : layout === "list" ? "vertical" : "both",
+    orientation: vertical ? "vertical" : layout === "slider" ? "horizontal" : layout === "list" ? "vertical" : "both",
     rtl,
     onActivate: (index, event) => onActivate(items[index], event),
     onMove: followFocus ? (index, event) => {
@@ -301,7 +304,13 @@ function ItemsView({
   const positioned = (item) => !(renderItem || localize(item.label, language).text || showSummary && secondary === "summary" && localize(item.summary, language).text);
   const positionName = (item, index) => positioned(item) ? t("canvasPosition", { index: index + 1, total: items.length }) : void 0;
   const positionLang = (item) => positioned(item) ? langOf("canvasPosition") : void 0;
-  const trackStyle = slider ? { display: "flex", margin: 0, padding: 0, listStyle: "none" } : void 0;
+  const trackStyle = slider ? {
+    display: "flex",
+    flexDirection: vertical ? "column" : void 0,
+    margin: 0,
+    padding: 0,
+    listStyle: "none"
+  } : void 0;
   const slideStyle = slider ? { flex: "0 0 auto", scrollSnapAlign: listbox ? "center" : "start" } : void 0;
   const stepping = listbox && selected >= 0;
   const scrollButton = (step) => {
@@ -339,7 +348,7 @@ function ItemsView({
               children: /* @__PURE__ */ jsx(
                 "path",
                 {
-                  d: step === "next" !== rtl ? "M6 3l5 5-5 5" : "M10 3L5 8l5 5",
+                  d: vertical ? step === "next" ? "M3 6l5 5 5-5" : "M3 10l5-5 5 5" : step === "next" !== rtl ? "M6 3l5 5-5 5" : "M10 3L5 8l5 5",
                   fill: "none",
                   stroke: "currentColor",
                   strokeWidth: "2",
@@ -361,6 +370,7 @@ function ItemsView({
       ref: root.ref,
       className: join("clover-items", className),
       "data-layout": layout,
+      "data-orientation": vertical ? "vertical" : void 0,
       "data-navigation": navigation,
       ...highContrastProps(contrast),
       ...rest,
@@ -414,7 +424,7 @@ function ItemsView({
                       ref: listRef,
                       role: "listbox",
                       ...listName,
-                      "aria-orientation": slider ? "horizontal" : layout === "list" ? "vertical" : void 0,
+                      "aria-orientation": vertical ? "vertical" : slider ? "horizontal" : layout === "list" ? "vertical" : void 0,
                       className: "clover-items-track",
                       style: trackStyle,
                       children: items.map((item, index) => {

package/dist/components/Items/PagerLayout.mjs

@@ -10,6 +10,7 @@ function PagerLayout({
   forwardedRef,
   /* eslint-disable @typescript-eslint/no-unused-vars -- Items' own, not the nav's */
   layout,
+  orientation,
   thumbnailSize,
   renderItem,
   header,

package/dist/components/Map/MapView.mjs

@@ -243,7 +243,7 @@ function MapView({
         scrollZoom,
         // Its credits behind their ⓘ, in the lower corner; none where left out.
         attributionControl: credits ? { compact: true } : false,
-        // MapLibre's own names, in Clover's words; kept current below.
+        // MapLibre's own names, in Clover's interface words; kept current below.
         locale: {
           "Map.Title": t2("mapLabel"),
           "NavigationControl.ZoomIn": t2("imageZoomIn"),

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) {