@canopy-iiif/app 1.9.8 → 1.9.10

package/lib/default-locale.js

@@ -1,3 +1,7 @@
+/**
+ * This file is auto-generated from content/locale.yml.
+ * Run `node packages/helpers/locales/sync-default-locale.js` after updating locale copy.
+ */
 module.exports = {
   common: {
     actions: {
@@ -7,7 +11,7 @@ module.exports = {
       clear_all: 'Clear all',
       done: 'Done',
       show: 'Show',
-      hide: 'Hide',
+      hide: 'Hide'
     },
     nouns: {
       search: 'Search',
@@ -27,12 +31,12 @@ module.exports = {
       item_label: 'Item',
       details: 'details',
       breadcrumb: 'Breadcrumb',
-      home: 'Home',
+      home: 'Home'
     },
     types: {
       work: 'Works',
       page: 'Pages',
-      docs: 'Docs',
+      docs: 'Docs'
     },
     statuses: {
       loading: 'Loading…',
@@ -44,7 +48,7 @@ module.exports = {
       loading_content: 'Loading {content}…',
       summary_content: 'Showing {shown} of {total} {content}',
       search_summary: 'Found {shown} of {total} in {type} for "{query}"',
-      no_matches: 'No matches found.',
+      no_matches: 'No matches found.'
     },
     phrases: {
       placeholder_search: 'Search…',
@@ -61,16 +65,16 @@ module.exports = {
       scroll_direction_content: 'Scroll {direction} through {content}',
       step_content: '{direction} {content}',
       item_numbered: '{content} {index}',
-      content_key: '{content} key',
+      content_key: '{content} key'
     },
     directions: {
       left: 'left',
       right: 'right',
       previous: 'Previous',
-      next: 'Next',
+      next: 'Next'
     },
     misc: {
-      referenced_by: 'Referenced by',
-    },
-  },
+      referenced_by: 'Referenced by'
+    }
+  }
 };

package/lib/search/search-app.jsx

@@ -6,6 +6,38 @@ import {
   SearchFiltersDialog,
 } from "@canopy-iiif/app/ui";
 import resultTemplates from "__CANOPY_SEARCH_RESULT_TEMPLATES__";
+const SITE_TITLE_FALLBACK = "Site title";
+
+function readSiteTitleFromGlobals() {
+  try {
+    if (
+      typeof window !== "undefined" &&
+      typeof window.CANOPY_SITE_TITLE === "string"
+    ) {
+      const raw = window.CANOPY_SITE_TITLE.trim();
+      if (raw) return raw;
+    }
+  } catch (_) {}
+  try {
+    if (
+      typeof globalThis !== "undefined" &&
+      typeof globalThis.CANOPY_SITE_TITLE === "string"
+    ) {
+      const raw = globalThis.CANOPY_SITE_TITLE.trim();
+      if (raw) return raw;
+    }
+  } catch (_) {}
+  try {
+    if (typeof document !== "undefined" && document.title) {
+      const trimmed = document.title.trim();
+      if (!trimmed) return "";
+      const parts = trimmed.split("|").map((part) => part.trim()).filter(Boolean);
+      if (parts.length > 1) return parts[parts.length - 1];
+      return trimmed;
+    }
+  } catch (_) {}
+  return "";
+}
 
 function readBasePath() {
   const normalize = (val) => {
@@ -60,6 +92,11 @@ function apiUrl(pathname) {
   return `${base}/${cleaned}`;
 }
 
+function resolveSiteTitle() {
+  const title = readSiteTitleFromGlobals();
+  return title || SITE_TITLE_FALLBACK;
+}
+
 function readDocumentLocale() {
   try {
     if (
@@ -909,6 +946,8 @@ function TabsMount() {
   const handleToggle = (facetSlug, valueSlug, checked) => {
     if (toggleFilter) toggleFilter(facetSlug, valueSlug, checked);
   };
+  const brandLabel = useMemo(() => resolveSiteTitle(), []);
+  const brandHref = useMemo(() => withBasePath("/"), []);
   return (
     <>
       <SearchTabsUI
@@ -928,6 +967,8 @@ function TabsMount() {
           selected={filters}
           onToggle={handleToggle}
           onClear={() => clearFilters && clearFilters()}
+          brandLabel={brandLabel}
+          brandHref={brandHref}
         />
       ) : null}
     </>

package/lib/search/search.js

@@ -16,6 +16,7 @@ const {
   getLocaleRouteEntries,
   getDefaultRoute,
   getDefaultLocaleCode,
+  getSiteTitle,
 } = require('../common');
 const { resolveCanopyConfigPath } = require('../config-path');
 
@@ -310,6 +311,7 @@ async function buildSearchPageForEntry(routeEntry) {
       typeof searchPageMeta.description === 'string'
         ? searchPageMeta.description
         : '';
+    const siteTitle = typeof getSiteTitle === 'function' ? getSiteTitle() : '';
     const pageDetails = {
       title: pageTitle,
       description: pageDescription,
@@ -366,6 +368,10 @@ async function buildSearchPageForEntry(routeEntry) {
       }
     }
     let headExtra = vendorTags + head + importMap + customRuntimeTag;
+    if (siteTitle && typeof siteTitle === 'string') {
+      const siteTitleScript = `<script>window.CANOPY_SITE_TITLE=${JSON.stringify(siteTitle)}</script>`;
+      headExtra = siteTitleScript + headExtra;
+    }
     try {
       const { BASE_PATH } = require('../common');
       if (BASE_PATH) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canopy-iiif/app",
-  "version": "1.9.8",
+  "version": "1.9.10",
   "private": false,
   "license": "MIT",
   "author": "Mat Jordan <mat@northwestern.edu>",

package/ui/dist/index.mjs

@@ -43186,10 +43186,11 @@ function Button({
   variant = "primary",
   className = "",
   children,
+  as: Element = "a",
   ...rest
 }) {
   const resolvedVariant = VARIANTS.has(variant) ? variant : "primary";
-  const computedRel = target === "_blank" && !rel ? "noopener noreferrer" : rel;
+  const computedRel = Element === "a" && target === "_blank" && !rel ? "noopener noreferrer" : rel;
   const content = children != null ? children : label;
   if (!content) return null;
   const classes = [
@@ -43197,17 +43198,19 @@ function Button({
     `canopy-button--${resolvedVariant}`,
     className
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ React6.createElement(
-    "a",
-    {
-      href,
-      className: classes,
-      target,
-      rel: computedRel,
-      ...rest
-    },
-    content
-  );
+  const elementProps = {
+    className: classes,
+    ...rest
+  };
+  if (Element === "a") {
+    elementProps.href = href;
+    if (target) elementProps.target = target;
+    if (computedRel) elementProps.rel = computedRel;
+  } else {
+    if (typeof target !== "undefined") elementProps.target = target;
+    if (computedRel) elementProps.rel = computedRel;
+  }
+  return /* @__PURE__ */ React6.createElement(Element, { ...elementProps }, content);
 }
 
 // ui/src/layout/ButtonWrapper.jsx
@@ -43449,22 +43452,40 @@ function SearchPanel(props = {}) {
 }
 
 // ui/src/layout/CanopyBrand.jsx
+import React13 from "react";
+
+// ui/src/layout/pageContext.js
 import React12 from "react";
+var CONTEXT_KEY = typeof Symbol === "function" ? Symbol.for("__CANOPY_PAGE_CONTEXT__") : "__CANOPY_PAGE_CONTEXT__";
+function getSharedRoot() {
+  if (typeof globalThis !== "undefined") return globalThis;
+  if (typeof window !== "undefined") return window;
+  if (typeof global !== "undefined") return global;
+  return null;
+}
+function getSafePageContext() {
+  const root2 = getSharedRoot();
+  if (root2 && root2[CONTEXT_KEY]) return root2[CONTEXT_KEY];
+  const ctx = React12.createContext({ navigation: null, page: null, site: null });
+  if (root2) root2[CONTEXT_KEY] = ctx;
+  return ctx;
+}
+
+// ui/src/layout/CanopyBrand.jsx
+var PageContext = getSafePageContext();
 function CanopyBrand(props = {}) {
-  const {
-    labelId,
-    label = "Canopy IIIF",
-    href = "/",
-    className,
-    Logo
-  } = props || {};
+  const { labelId, label: labelProp, href = "/", className, Logo } = props || {};
+  const context = React13.useContext(PageContext);
+  const contextSiteTitle = context && context.site && typeof context.site.title === "string" ? context.site.title.trim() : "";
+  const normalizedLabel = typeof labelProp === "string" && labelProp.trim() ? labelProp : "";
+  const resolvedLabel = normalizedLabel || contextSiteTitle || "Site title";
   const spanProps = labelId ? { id: labelId } : {};
   const classes = ["canopy-logo", className].filter(Boolean).join(" ");
-  return /* @__PURE__ */ React12.createElement("a", { href, className: classes }, typeof Logo === "function" ? /* @__PURE__ */ React12.createElement(Logo, null) : null, /* @__PURE__ */ React12.createElement("span", { ...spanProps }, label));
+  return /* @__PURE__ */ React13.createElement("a", { href, className: classes }, typeof Logo === "function" ? /* @__PURE__ */ React13.createElement(Logo, null) : null, /* @__PURE__ */ React13.createElement("span", { ...spanProps }, resolvedLabel));
 }
 
 // ui/src/layout/CanopyModal.jsx
-import React13 from "react";
+import React14 from "react";
 function CanopyModal(props = {}) {
   const {
     id,
@@ -43515,7 +43536,7 @@ function CanopyModal(props = {}) {
   if (padded) bodyClasses.push("canopy-modal__body--padded");
   if (bodyClassName) bodyClasses.push(bodyClassName);
   const bodyClassNameValue = bodyClasses.join(" ");
-  return /* @__PURE__ */ React13.createElement("div", { ...modalProps }, /* @__PURE__ */ React13.createElement("div", { className: "canopy-modal__panel" }, /* @__PURE__ */ React13.createElement("button", { ...closeButtonProps }, /* @__PURE__ */ React13.createElement(
+  return /* @__PURE__ */ React14.createElement("div", { ...modalProps }, /* @__PURE__ */ React14.createElement("div", { className: "canopy-modal__panel" }, /* @__PURE__ */ React14.createElement("button", { ...closeButtonProps }, /* @__PURE__ */ React14.createElement(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -43525,8 +43546,8 @@ function CanopyModal(props = {}) {
       strokeWidth: "1.5",
       className: "canopy-modal__close-icon"
     },
-    /* @__PURE__ */ React13.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 6l12 12M6 18L18 6" })
-  ), /* @__PURE__ */ React13.createElement("span", { className: "sr-only" }, closeLabel)), /* @__PURE__ */ React13.createElement("div", { className: bodyClassNameValue }, label ? /* @__PURE__ */ React13.createElement("div", { className: "canopy-modal__brand" }, /* @__PURE__ */ React13.createElement(
+    /* @__PURE__ */ React14.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 6l12 12M6 18L18 6" })
+  ), /* @__PURE__ */ React14.createElement("span", { className: "sr-only" }, closeLabel)), /* @__PURE__ */ React14.createElement("div", { className: bodyClassNameValue }, label ? /* @__PURE__ */ React14.createElement("div", { className: "canopy-modal__brand" }, /* @__PURE__ */ React14.createElement(
     CanopyBrand,
     {
       labelId: resolvedLabelId,
@@ -43539,7 +43560,7 @@ function CanopyModal(props = {}) {
 }
 
 // ui/src/layout/NavigationTree.jsx
-import React14 from "react";
+import React15 from "react";
 function normalizeDepth(depth) {
   if (typeof depth !== "number") return 0;
   return Math.max(0, Math.min(5, depth));
@@ -43548,7 +43569,7 @@ function NavigationTreeList({ nodes, depth, parentKey }) {
   if (!Array.isArray(nodes) || !nodes.length) return null;
   const listClasses = ["canopy-nav-tree__list"];
   if (depth > 0) listClasses.push("canopy-nav-tree__list--nested");
-  return /* @__PURE__ */ React14.createElement("ul", { className: listClasses.join(" "), role: "list" }, nodes.map((node, index) => /* @__PURE__ */ React14.createElement(
+  return /* @__PURE__ */ React15.createElement("ul", { className: listClasses.join(" "), role: "list" }, nodes.map((node, index) => /* @__PURE__ */ React15.createElement(
     NavigationTreeItem,
     {
       key: node.slug || node.href || node.title || `${parentKey}-${index}`,
@@ -43572,7 +43593,7 @@ function NavigationTreeItem({ node, depth, nodeKey }) {
   const allowToggle = hasChildren && !isRootLevel;
   const defaultExpanded = allowToggle ? !!node.isExpanded : true;
   const toggleLabel = node.title ? `Toggle ${node.title} menu` : "Toggle section menu";
-  return /* @__PURE__ */ React14.createElement(
+  return /* @__PURE__ */ React15.createElement(
     "li",
     {
       className: "canopy-nav-tree__item",
@@ -43581,7 +43602,7 @@ function NavigationTreeItem({ node, depth, nodeKey }) {
       "data-expanded": allowToggle ? defaultExpanded ? "true" : "false" : void 0,
       "data-default-expanded": allowToggle && defaultExpanded ? "true" : void 0
     },
-    /* @__PURE__ */ React14.createElement("div", { className: "canopy-nav-tree__row" }, /* @__PURE__ */ React14.createElement("div", { className: "canopy-nav-tree__link-wrapper" }, /* @__PURE__ */ React14.createElement(
+    /* @__PURE__ */ React15.createElement("div", { className: "canopy-nav-tree__row" }, /* @__PURE__ */ React15.createElement("div", { className: "canopy-nav-tree__link-wrapper" }, /* @__PURE__ */ React15.createElement(
       Tag,
       {
         className: classes.join(" "),
@@ -43590,7 +43611,7 @@ function NavigationTreeItem({ node, depth, nodeKey }) {
         tabIndex: isInteractive ? void 0 : -1
       },
       node.title || node.slug
-    )), allowToggle ? /* @__PURE__ */ React14.createElement(
+    )), allowToggle ? /* @__PURE__ */ React15.createElement(
       "button",
       {
         type: "button",
@@ -43600,7 +43621,7 @@ function NavigationTreeItem({ node, depth, nodeKey }) {
         "aria-label": toggleLabel,
         "data-canopy-nav-item-toggle": panelId || void 0
       },
-      /* @__PURE__ */ React14.createElement(
+      /* @__PURE__ */ React15.createElement(
         "svg",
         {
           xmlns: "http://www.w3.org/2000/svg",
@@ -43610,7 +43631,7 @@ function NavigationTreeItem({ node, depth, nodeKey }) {
           strokeWidth: "1.5",
           className: "canopy-nav-tree__toggle-icon"
         },
-        /* @__PURE__ */ React14.createElement(
+        /* @__PURE__ */ React15.createElement(
           "path",
           {
             strokeLinecap: "round",
@@ -43619,9 +43640,9 @@ function NavigationTreeItem({ node, depth, nodeKey }) {
           }
         )
       ),
-      /* @__PURE__ */ React14.createElement("span", { className: "sr-only" }, toggleLabel)
+      /* @__PURE__ */ React15.createElement("span", { className: "sr-only" }, toggleLabel)
     ) : null),
-    hasChildren ? /* @__PURE__ */ React14.createElement(
+    hasChildren ? /* @__PURE__ */ React15.createElement(
       "div",
       {
         id: panelId || void 0,
@@ -43629,7 +43650,7 @@ function NavigationTreeItem({ node, depth, nodeKey }) {
         "aria-hidden": allowToggle ? defaultExpanded ? "false" : "true" : "false",
         hidden: allowToggle ? !defaultExpanded : void 0
       },
-      /* @__PURE__ */ React14.createElement(
+      /* @__PURE__ */ React15.createElement(
         NavigationTreeList,
         {
           nodes: node.children,
@@ -43654,15 +43675,15 @@ function NavigationTree({
   const nodes = includeRoot ? [root2] : root2.children;
   if (!Array.isArray(nodes) || !nodes.length) return null;
   const combinedClassName = ["canopy-nav-tree", className].filter(Boolean).join(" ");
-  return /* @__PURE__ */ React14.createElement(
+  return /* @__PURE__ */ React15.createElement(
     Component,
     {
       className: combinedClassName,
       "data-canopy-nav-tree": "true",
       ...rest
     },
-    heading ? /* @__PURE__ */ React14.createElement("div", { className: headingClassName }, heading) : null,
-    /* @__PURE__ */ React14.createElement(
+    heading ? /* @__PURE__ */ React15.createElement("div", { className: headingClassName }, heading) : null,
+    /* @__PURE__ */ React15.createElement(
       NavigationTreeList,
       {
         nodes,
@@ -43673,23 +43694,6 @@ function NavigationTree({
   );
 }
 
-// ui/src/layout/pageContext.js
-import React15 from "react";
-var CONTEXT_KEY = typeof Symbol === "function" ? Symbol.for("__CANOPY_PAGE_CONTEXT__") : "__CANOPY_PAGE_CONTEXT__";
-function getSharedRoot() {
-  if (typeof globalThis !== "undefined") return globalThis;
-  if (typeof window !== "undefined") return window;
-  if (typeof global !== "undefined") return global;
-  return null;
-}
-function getSafePageContext() {
-  const root2 = getSharedRoot();
-  if (root2 && root2[CONTEXT_KEY]) return root2[CONTEXT_KEY];
-  const ctx = React15.createContext({ navigation: null, page: null, site: null });
-  if (root2) root2[CONTEXT_KEY] = ctx;
-  return ctx;
-}
-
 // ui/src/layout/LanguageToggle.jsx
 import React17 from "react";
 
@@ -44002,8 +44006,8 @@ function LanguageToggle({
   label,
   ariaLabel
 }) {
-  const PageContext = getSafePageContext();
-  const context = React17.useContext(PageContext);
+  const PageContext3 = getSafePageContext();
+  const context = React17.useContext(PageContext3);
   const siteLanguageToggle = context && context.site && context.site.languageToggle || null;
   const pageData = page || (context && context.page ? context.page : null);
   const resolvedToggle = languageToggle === false ? null : languageToggle === true || typeof languageToggle === "undefined" ? siteLanguageToggle : languageToggle;
@@ -44401,8 +44405,8 @@ function CanopyHeader(props = {}) {
     logo: SiteLogo,
     languageToggle: languageToggleProp
   } = props;
-  const PageContext = getSafePageContext();
-  const context = React18.useContext(PageContext);
+  const PageContext3 = getSafePageContext();
+  const context = React18.useContext(PageContext3);
   const contextPrimaryNav = context && Array.isArray(context.primaryNavigation) ? context.primaryNavigation : [];
   const navLinks = navLinksProp && navLinksProp.length ? ensureArray(navLinksProp) : ensureArray(contextPrimaryNav);
   const contextNavigation = context && context.navigation ? context.navigation : null;
@@ -45531,7 +45535,7 @@ function SearchTabs({
   const orderedTypes = Array.isArray(types) ? types : [];
   const toLabel = (t) => t && t.length ? t.charAt(0).toUpperCase() + t.slice(1) : "";
   const hasFilters = typeof onOpenFilters === "function";
-  const filterBadge = activeFilterCount > 0 ? ` (${activeFilterCount})` : "";
+  const filterBadge = activeFilterCount > 0 ? /* @__PURE__ */ React34.createElement("span", { className: "canopy-search-tabs__filters-count" }, "(", activeFilterCount, ")") : null;
   const [itemBoundingBox, setItemBoundingBox] = useState6(null);
   const [wrapperBoundingBox, setWrapperBoundingBox] = useState6(null);
   const [highlightedTab, setHighlightedTab] = useState6(null);
@@ -45611,19 +45615,23 @@ function SearchTabs({
       );
     })
   ), hasFilters ? /* @__PURE__ */ React34.createElement(
-    "button",
+    Button,
     {
+      as: "button",
       type: "button",
+      variant: "primary",
       onClick: () => onOpenFilters && onOpenFilters(),
       "aria-expanded": filtersOpen ? "true" : "false",
-      className: "inline-flex items-center gap-2 rounded-md border border-slate-200 bg-white px-3 py-1.5 text-sm font-medium text-slate-700 shadow-sm transition hover:border-brand-200 hover:bg-brand-50 hover:text-brand-700"
+      className: "canopy-search-tabs__filters-button"
     },
-    /* @__PURE__ */ React34.createElement("span", null, filtersLabel, filterBadge)
+    /* @__PURE__ */ React34.createElement("span", null, filtersLabel),
+    filterBadge
   ) : null);
 }
 
 // ui/src/search/SearchFiltersDialog.jsx
 import React35 from "react";
+var PageContext2 = getSafePageContext();
 function toArray(input) {
   if (!input) return [];
   if (Array.isArray(input)) return input;
@@ -45731,7 +45739,7 @@ function SearchFiltersDialog(props = {}) {
     onClear,
     title,
     subtitle = "Refine results by metadata",
-    brandLabel = "Canopy IIIF",
+    brandLabel: brandLabelProp,
     brandHref = "/",
     logo: SiteLogo
   } = props;
@@ -45754,6 +45762,9 @@ function SearchFiltersDialog(props = {}) {
       if (root2) root2.style.overflow = prevRoot;
     };
   }, [open]);
+  const context = React35.useContext(PageContext2);
+  const contextSiteTitle = context && context.site && typeof context.site.title === "string" ? context.site.title.trim() : "";
+  const resolvedBrandLabel = typeof brandLabelProp === "string" && brandLabelProp.trim() ? brandLabelProp : contextSiteTitle || "Site title";
   if (!open) return null;
   const brandId = "canopy-modal-filters-label";
   const subtitleText = subtitle != null ? subtitle : title;
@@ -45764,7 +45775,7 @@ function SearchFiltersDialog(props = {}) {
       variant: "filters",
       open: true,
       labelledBy: brandId,
-      label: brandLabel,
+      label: resolvedBrandLabel,
       logo: SiteLogo,
       href: brandHref,
       closeLabel: "Close filters",
@@ -47643,8 +47654,8 @@ function getReferencedModule() {
   return referencedModule;
 }
 function useReferencedManifestMap() {
-  const PageContext = getPageContext() || PageContextFallback;
-  const pageContext = React42.useContext(PageContext);
+  const PageContext3 = getPageContext() || PageContextFallback;
+  const pageContext = React42.useContext(PageContext3);
   const referencedItems = pageContext && pageContext.page && Array.isArray(pageContext.page.referencedItems) ? pageContext.page.referencedItems : [];
   return React42.useMemo(() => {
     const map = /* @__PURE__ */ new Map();