@nulib/clover 0.0.0-stage → 4.0.0-beta.0

package/dist/components/Primitives/Primitives.mjs

@@ -0,0 +1,263 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import { thumbnailSource, resolveThumbnail } from "../../core/thumbnail.mjs";
+import { toPlainText } from "../../core/text.mjs";
+import { localize } from "../../core/value.mjs";
+import { join } from "../../lib/classnames.mjs";
+import { useOptionalClover, useOptionalCloverSelector } from "../../react/context.mjs";
+import { MetadataList, Markup } from "../../ui/Markup.mjs";
+import { ReadMore } from "../../ui/ReadMore.mjs";
+import { useProvider, resourceOf } from "./resource.mjs";
+import { asArray } from "../../lib/asArray.mjs";
+function useProperty(of, key, given) {
+  const provider = useProvider();
+  const fromRoot = useOptionalCloverSelector(
+    (state) => {
+      var _a;
+      return (_a = resourceOf(state, of)) == null ? void 0 : _a[key];
+    },
+    void 0
+  );
+  if (given !== void 0) return given;
+  return provider ? provider[key] : fromRoot;
+}
+const useLanguage = () => {
+  var _a;
+  return (_a = useOptionalClover()) == null ? void 0 : _a.language;
+};
+function Summary({
+  of = "manifest",
+  as = "p",
+  value,
+  className,
+  ...rest
+}) {
+  const summary = useProperty(of, "summary", value);
+  const language = useLanguage();
+  if (!localize(summary, language).text) return null;
+  return /* @__PURE__ */ jsx(ReadMore, { children: /* @__PURE__ */ jsx(
+    Markup,
+    {
+      as,
+      markup: summary,
+      language,
+      className: join("clover-summary", className),
+      ...rest
+    }
+  ) });
+}
+function Value({
+  value,
+  format,
+  headingLevel,
+  as = "span",
+  className,
+  ...rest
+}) {
+  const language = useLanguage();
+  return /* @__PURE__ */ jsx(
+    Markup,
+    {
+      as,
+      markup: value,
+      format,
+      headingLevel,
+      language,
+      className: join("clover-value", className),
+      ...rest
+    }
+  );
+}
+function Metadata({
+  of = "manifest",
+  value,
+  className,
+  renderValue,
+  ...rest
+}) {
+  const metadata = useProperty(of, "metadata", value);
+  const language = useLanguage();
+  return /* @__PURE__ */ jsx(
+    MetadataList,
+    {
+      metadata,
+      language,
+      renderValue,
+      className: join("clover-metadata", className),
+      ...rest
+    }
+  );
+}
+function RequiredStatement({
+  of = "manifest",
+  value,
+  className,
+  ...rest
+}) {
+  const statement = useProperty(of, "requiredStatement", value);
+  const language = useLanguage();
+  return /* @__PURE__ */ jsx(
+    MetadataList,
+    {
+      metadata: statement ? [statement] : null,
+      language,
+      className: join("clover-required-statement", className),
+      ...rest
+    }
+  );
+}
+function Rights({
+  of = "manifest",
+  value,
+  className,
+  ...rest
+}) {
+  const rights = useProperty(of, "rights", value);
+  if (!rights) return null;
+  return /* @__PURE__ */ jsx(
+    "a",
+    {
+      href: rights,
+      className: join("clover-rights", className),
+      ...rest,
+      children: rights
+    }
+  );
+}
+function Id({
+  of = "manifest",
+  value,
+  className,
+  ...rest
+}) {
+  const id = useProperty(of, "id", value);
+  if (!id) return null;
+  return /* @__PURE__ */ jsx(
+    "a",
+    {
+      href: id,
+      className: join("clover-id", className),
+      ...rest,
+      children: id
+    }
+  );
+}
+function Links({
+  property,
+  className,
+  of = "manifest",
+  value,
+  ...rest
+}) {
+  const resources = asArray(useProperty(of, property, value));
+  const language = useLanguage();
+  const links = resources.filter((resource) => resource == null ? void 0 : resource.id);
+  if (!links.length) return null;
+  return /* @__PURE__ */ jsx(
+    "ul",
+    {
+      className,
+      ...rest,
+      children: links.map((resource) => {
+        const label = localize(resource.label, language);
+        return /* @__PURE__ */ jsxs("li", { children: [
+          /* @__PURE__ */ jsx("a", { href: resource.id, lang: label.text ? label.lang : void 0, children: label.text ? toPlainText(label.text) : resource.id }),
+          resource.format && /* @__PURE__ */ jsxs("span", { className: "clover-link-format", children: [
+            " (",
+            resource.format,
+            ")"
+          ] })
+        ] }, resource.id);
+      })
+    }
+  );
+}
+const Homepage = ({ className, ...props }) => /* @__PURE__ */ jsx(
+  Links,
+  {
+    property: "homepage",
+    className: join("clover-homepage", className),
+    ...props
+  }
+);
+const Rendering = ({ className, ...props }) => /* @__PURE__ */ jsx(
+  Links,
+  {
+    property: "rendering",
+    className: join("clover-rendering", className),
+    ...props
+  }
+);
+const SeeAlso = ({ className, ...props }) => /* @__PURE__ */ jsx(
+  Links,
+  {
+    property: "seeAlso",
+    className: join("clover-see-also", className),
+    ...props
+  }
+);
+const PartOf = ({ className, ...props }) => /* @__PURE__ */ jsx(
+  Links,
+  {
+    property: "partOf",
+    className: join("clover-part-of", className),
+    ...props
+  }
+);
+function Thumbnail({
+  of = "manifest",
+  value,
+  size = 400,
+  className,
+  ...rest
+}) {
+  var _a;
+  const fromRoot = useOptionalCloverSelector(
+    (state) => resourceOf(state, of),
+    null
+  );
+  const resource = value ?? fromRoot;
+  const language = useLanguage();
+  const source = resource ? thumbnailSource(resource) : null;
+  const key = (source == null ? void 0 : source.src) ?? (source == null ? void 0 : source.service) ?? (source == null ? void 0 : source.fallback);
+  const [src, setSrc] = useState(source == null ? void 0 : source.src);
+  const request = (_a = useOptionalClover()) == null ? void 0 : _a.clover.request;
+  useEffect(() => {
+    if (!source) return setSrc(void 0);
+    if (source.src) return setSrc(source.src);
+    let live = true;
+    resolveThumbnail(source, size, request).then((url) => live && setSrc(url));
+    return () => {
+      live = false;
+    };
+  }, [key, size]);
+  if (!src) return null;
+  const label = localize(resource == null ? void 0 : resource.label, language);
+  return /* @__PURE__ */ jsx(
+    "img",
+    {
+      src,
+      alt: toPlainText(label.text),
+      lang: rest.alt === void 0 && label.text ? label.lang : void 0,
+      width: size,
+      loading: "lazy",
+      decoding: "async",
+      className: join("clover-thumbnail", className),
+      ...rest
+    }
+  );
+}
+export {
+  Homepage,
+  Id,
+  Metadata,
+  PartOf,
+  Rendering,
+  RequiredStatement,
+  Rights,
+  SeeAlso,
+  Summary,
+  Thumbnail,
+  Value
+};

package/dist/components/Primitives/resource.mjs

@@ -0,0 +1,11 @@
+"use client";
+import { useContext, createContext } from "react";
+import { selectCanvas } from "../../core/selectors.mjs";
+const resourceOf = (state, of) => of === "canvas" ? selectCanvas(state.manifest, state.canvasId) : state.manifest;
+const ProviderContext = createContext(null);
+const useProvider = () => useContext(ProviderContext);
+export {
+  ProviderContext,
+  resourceOf,
+  useProvider
+};

package/dist/components/Provider/Provider.mjs

@@ -0,0 +1,174 @@
+"use client";
+import { jsx, Fragment, jsxs } from "react/jsx-runtime";
+import { useContext, createContext, useState, useCallback, useEffect, useLayoutEffect, useRef } from "react";
+import { toPlainText } from "../../core/text.mjs";
+import { localize } from "../../core/value.mjs";
+import { useCloverTranslation } from "../../i18n/useCloverTranslation.mjs";
+import { join } from "../../lib/classnames.mjs";
+import { useOptionalCloverSelector, useOptionalClover } from "../../react/context.mjs";
+import { Label } from "../Label/Label.mjs";
+import { useProvider, resourceOf, ProviderContext } from "../Primitives/resource.mjs";
+import { asArray } from "../../lib/asArray.mjs";
+const useIsomorphicLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
+const LogoFailed = createContext(null);
+const showsAnything = (element) => {
+  var _a;
+  return Boolean((_a = element.textContent) == null ? void 0 : _a.trim()) || element.querySelector("img, svg, picture, video, canvas, object") !== null;
+};
+const isAgent = (value) => Boolean(value) && typeof value === "object" && ["label", "logo", "homepage"].some(
+  (key) => asArray(value[key]).length > 0
+);
+const isImage = (value) => Boolean(value) && typeof value.id === "string";
+const homepageOf = (agent) => {
+  var _a;
+  return (_a = asArray(agent.homepage).find(isImage)) == null ? void 0 : _a.id;
+};
+const nameOf = (agent, language) => {
+  var _a;
+  if (!agent) return null;
+  for (const label of [
+    agent.label,
+    (_a = asArray(agent.homepage).find((page) => page == null ? void 0 : page.label)) == null ? void 0 : _a.label
+  ]) {
+    const name = localize(label, language);
+    if (name.text) return { text: toPlainText(name.text), lang: name.lang };
+  }
+  return null;
+};
+function Provider({
+  of = "manifest",
+  value,
+  link = true,
+  children,
+  className,
+  ...rest
+}) {
+  var _a;
+  const fromRoot = useOptionalCloverSelector(
+    (state) => {
+      var _a2;
+      return (_a2 = resourceOf(state, of)) == null ? void 0 : _a2.provider;
+    },
+    void 0
+  );
+  const language = (_a = useOptionalClover()) == null ? void 0 : _a.language;
+  const agents = asArray(value !== void 0 ? value : fromRoot).filter(
+    isAgent
+  );
+  if (!agents.length) return null;
+  return /* @__PURE__ */ jsx("ul", { className: join("clover-provider", className), ...rest, children: agents.map((agent, index) => {
+    const homepage = link ? homepageOf(agent) : void 0;
+    const named = Boolean(localize(agent.label, language).text);
+    const drawn = children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Logo, { alt: named ? "" : void 0 }),
+      /* @__PURE__ */ jsx(Label, { className: "clover-provider-label" })
+    ] });
+    return /* @__PURE__ */ jsx(
+      ProviderItem,
+      {
+        agent,
+        homepage,
+        children: drawn
+      },
+      agent.id ?? index
+    );
+  }) });
+}
+function ProviderItem({
+  agent,
+  homepage,
+  children
+}) {
+  const content = useRef(null);
+  const [emptied, setEmptied] = useState(null);
+  const failed = useCallback(() => {
+    if (content.current && !showsAnything(content.current)) setEmptied(agent);
+  }, [agent]);
+  if (emptied === agent) return null;
+  return /* @__PURE__ */ jsx("li", { className: "clover-provider-agent", children: /* @__PURE__ */ jsx(ProviderContext.Provider, { value: agent, children: /* @__PURE__ */ jsx(LogoFailed.Provider, { value: failed, children: homepage ? /* @__PURE__ */ jsx("a", { ref: content, href: homepage, className: "clover-provider-link", children }) : /* @__PURE__ */ jsx("span", { ref: content, className: "clover-provider-content", children }) }) }) });
+}
+function Logo({
+  of = "manifest",
+  value,
+  alt,
+  className,
+  ...rest
+}) {
+  var _a;
+  const { t, langOf } = useCloverTranslation();
+  const provider = useProvider();
+  const fromRoot = useOptionalCloverSelector(
+    (state) => {
+      var _a2;
+      return (_a2 = resourceOf(state, of)) == null ? void 0 : _a2.provider;
+    },
+    void 0
+  );
+  const language = (_a = useOptionalClover()) == null ? void 0 : _a.language;
+  const sources = value !== void 0 ? asArray(value) : provider ? [provider] : asArray(fromRoot);
+  const logos = sources.flatMap(
+    (source) => {
+      if (!source || typeof source !== "object") return [];
+      const agent = source;
+      if (agent.type !== "Agent" && isImage(agent) && !agent.logo)
+        return [{ image: agent, agent: null }];
+      const image = asArray(agent.logo).find(isImage);
+      return image ? [{ image, agent }] : [];
+    }
+  );
+  if (!logos.length) return null;
+  return /* @__PURE__ */ jsx(Fragment, { children: logos.map(({ image, agent }, index) => {
+    const name = nameOf(agent, language);
+    return /* @__PURE__ */ jsx(
+      LogoImage,
+      {
+        src: image.id,
+        alt: alt ?? (name == null ? void 0 : name.text) ?? t("logo"),
+        lang: alt !== void 0 ? void 0 : name ? name.lang : langOf("logo"),
+        width: image.width,
+        height: image.height,
+        loading: "lazy",
+        decoding: "async",
+        className: join("clover-logo", className),
+        ...rest
+      },
+      `${image.id}-${index}`
+    );
+  }) });
+}
+function LogoImage({
+  alt,
+  onError,
+  ...rest
+}) {
+  const failedFor = useContext(LogoFailed);
+  const [failed, setFailed] = useState(false);
+  const fail = useCallback(() => setFailed(true), []);
+  useIsomorphicLayoutEffect(() => {
+    if (failed) failedFor == null ? void 0 : failedFor();
+  }, [failed, failedFor]);
+  const check = useCallback(
+    (image) => {
+      var _a;
+      if ((image == null ? void 0 : image.complete) && !image.naturalWidth) (_a = image.decode) == null ? void 0 : _a.call(image).catch(fail);
+    },
+    [fail]
+  );
+  if (failed) return null;
+  return /* @__PURE__ */ jsx(
+    "img",
+    {
+      ref: check,
+      alt,
+      onError: (event) => {
+        onError == null ? void 0 : onError(event);
+        fail();
+      },
+      ...rest
+    }
+  );
+}
+export {
+  Logo,
+  Provider
+};

package/dist/components/Root/Announcer.mjs

@@ -0,0 +1,58 @@
+"use client";
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { useState, useRef, useEffect } from "react";
+import { selectCanvas, selectSequence, selectPosition } from "../../core/selectors.mjs";
+import { localize } from "../../core/value.mjs";
+import { useCloverTranslation } from "../../i18n/useCloverTranslation.mjs";
+import { visuallyHidden } from "../../ui/visuallyHidden.mjs";
+function Announcer({
+  clover,
+  language
+}) {
+  const { t, langOf } = useCloverTranslation();
+  const [message, setMessage] = useState(null);
+  const tRef = useRef(t);
+  tRef.current = t;
+  useEffect(() => {
+    let last = null;
+    return clover.store.subscribe(() => {
+      const { manifest, canvasId, status } = clover.store.get();
+      if (status !== "ready" || canvasId === last) return;
+      const first = last === null;
+      last = canvasId;
+      if (first) return;
+      const canvas = selectCanvas(manifest, canvasId);
+      const label = localize(canvas == null ? void 0 : canvas.label, language);
+      const position = tRef.current("canvasPosition", {
+        index: selectPosition(manifest, canvasId) + 1,
+        total: selectSequence(manifest).views.length
+      });
+      setMessage({
+        label: label.text,
+        lang: label.lang,
+        position
+      });
+    });
+  }, [clover, language]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "clover-announcer",
+      role: "status",
+      "aria-live": "polite",
+      "aria-atomic": "true",
+      style: visuallyHidden,
+      children: [
+        (message == null ? void 0 : message.label) ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("span", { lang: message.lang, children: message.label }),
+          ",",
+          " "
+        ] }) : null,
+        message && /* @__PURE__ */ jsx("span", { lang: langOf("canvasPosition"), children: message.position })
+      ]
+    }
+  );
+}
+export {
+  Announcer
+};

package/dist/components/Root/Root.mjs

@@ -0,0 +1,29 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { HostLanguageContext } from "../../i18n/hostLanguage.mjs";
+import { join } from "../../lib/classnames.mjs";
+import { CloverContext } from "../../react/context.mjs";
+import { useRootLanguage } from "../../react/language.mjs";
+import { Announcer } from "./Announcer.mjs";
+import { useRootState } from "./useRootState.mjs";
+const Root = forwardRef(function Root2({ as: Tag = "div", className, children, ...props }, ref) {
+  const [context, status, rest] = useRootState(props);
+  const root = useRootLanguage(ref, rest.lang);
+  return /* @__PURE__ */ jsx(CloverContext.Provider, { value: context, children: /* @__PURE__ */ jsx(HostLanguageContext.Provider, { value: root.hostLanguage, children: /* @__PURE__ */ jsxs(
+    Tag,
+    {
+      ref: root.ref,
+      className: join("clover-root", className),
+      "data-status": status,
+      ...rest,
+      children: [
+        children,
+        /* @__PURE__ */ jsx(Announcer, { clover: context.clover, language: context.language })
+      ]
+    }
+  ) }) });
+});
+export {
+  Root
+};