@tuwaio/docs-ui 0.2.0 → 0.3.0

package/README.md

@@ -3,16 +3,17 @@
 [![NPM Version](https://img.shields.io/npm/v/@tuwaio/docs-ui.svg)](https://www.npmjs.com/package/@tuwaio/docs-ui)
 [![License](https://img.shields.io/npm/l/@tuwaio/docs-ui.svg)](https://github.com/TuwaIO/docs/blob/main/packages/docs-ui/LICENSE)
 
-`@tuwaio/docs-ui` is the shared UI of the TUWA documentation sites: the navbar, footer, logo and stylesheet of every `*.docs.tuwa.io` site and of the [docs hub](https://docs.tuwa.io), plus the decorative parts of the hub and the TUWA landing page. The sites are built with Next.js (App Router) and Nextra 4; one package keeps them visually consistent.
+`@tuwaio/docs-ui` is the shared UI of the TUWA documentation sites: the navbar, footer, logo and stylesheet of every `*.docs.tuwa.io` site and of the [docs hub](https://docs.tuwa.io), plus the decorative parts of the hub and the TUWA landing page, and the policy pages of the TUWA website and the Quasar dashboard. The sites are built with Next.js (App Router) and Nextra 4; one package keeps them visually consistent.
 
 ---
 
 ## 🏛️ Core Capabilities
 
-- **Nextra layout parts:** `Navbar` and `Footer` wrap the navbar and footer of `nextra-theme-docs` with the site logo and a row of external links (`baseNavLinks`, `baseFooterLinks` are the defaults: the npm and GitHub organizations of TUWA).
+- **Nextra layout parts:** `Navbar` and `Footer` wrap the navbar and footer of `nextra-theme-docs` with the site logo and a row of external links (`baseNavLinks`, `baseFooterLinks` are the defaults: the npm and GitHub organizations of TUWA). The footer also links the policies in force on tuwa.io and the list of all policies on the docs hub.
 - **Logo:** `RemoteLogo` is an async React Server Component that fetches an SVG (by default the TUWA logo) and renders it as React elements, so it takes `className` and `currentColor`.
 - **Theme switch:** `ThemeSwitcher` is a light/dark switch for any theme state (for example `next-themes`).
 - **Decoration:** `Orb` (an animated sphere in the brand color of a TUWA project), `StarryBackground` (an animated star field on a canvas) and `NoSSR` (renders its children only on the client).
+- **Policy pages:** `policies` lists the TUWA policies (Terms, Privacy, Cookie, Refund, Security, Data Processing Addendum) with their paths and whether they are in force (`publishedPolicies`; footers use `footerPolicies`). `loadPolicy` loads the text of a policy, and `PolicyDocument` renders it with the date of the version, a Download PDF button, anchored sections and a list of sections. The texts and PDFs come from [`TuwaIO/workflows/docs`](https://github.com/TuwaIO/workflows/tree/main/docs).
 - **Stylesheet:** `dist/index.css` contains the `--tuwa-*` theme variables of [`@tuwaio/nova-core`](https://stories.tuwa.io/?path=/docs/packages-nova-core-overview--docs) (light and `.dark`), the styles of the Nextra parts and the Tailwind CSS v4 utilities used by the components, prefixed with `tuwadocs:`.
 
 ---
@@ -76,13 +77,53 @@ export default async function RootLayout({ children }: { children: ReactNode })
 
 ---
 
+### Policy pages
+
+A policy page in the Next.js App Router (a Server Component; the content is cached for an hour):
+
+```tsx
+import { loadPolicy, PolicyDocument } from '@tuwaio/docs-ui';
+
+export default async function RefundPage() {
+  const content = await loadPolicy('refund');
+
+  return (
+    <main className="mx-auto max-w-6xl px-4 py-12">
+      <PolicyDocument slug="refund" content={content} />
+    </main>
+  );
+}
+```
+
+Footers list the policies in force:
+
+```tsx
+import { footerPolicies } from '@tuwaio/docs-ui';
+
+export function PolicyLinks() {
+  return (
+    <nav aria-label="Policies" className="flex flex-wrap gap-x-4 gap-y-2 text-xs">
+      {footerPolicies.map((policy) => (
+        <a key={policy.slug} href={policy.href}>
+          {policy.title}
+        </a>
+      ))}
+    </nav>
+  );
+}
+```
+
+Sections have stable anchors (`/refund#how-to-request-a-refund`), so hints and FAQ answers can link to a section.
+
+---
+
 ## 🗄️ Browser Storage
 
 Nothing. `ThemeSwitcher` only calls `onToggle`; the site keeps the theme.
 
 ## 🌐 External Services
 
-`RemoteLogo` requests its `url` on the server (by default `cdn.jsdelivr.net/gh/TuwaIO/workflows@main/preview/logo_v2.svg`), cached by Next.js for 24 hours. The other components send no requests.
+`RemoteLogo` requests its `url` on the server (by default `cdn.jsdelivr.net/gh/TuwaIO/workflows@main/preview/logo_v2.svg`), cached by Next.js for 24 hours. `loadPolicy` requests `raw.githubusercontent.com/TuwaIO/workflows/main/docs/<slug>.json` on the server, cached by Next.js for an hour by default. The Download PDF button of `PolicyDocument` links to the PDF on the same host; the browser requests it only when it is clicked. The other components send no requests.
 
 ---
 

package/dist/components/Footer.cjs

@@ -24,6 +24,7 @@ module.exports = __toCommonJS(Footer_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_nova_core = require("@tuwaio/nova-core");
 var import_nextra_theme_docs = require("nextra-theme-docs");
+var import_policies = require("../policies");
 var import_utils = require("../utils");
 function Footer({ links, logo }) {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_nextra_theme_docs.Footer, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "tuwadocs:flex tuwadocs:w-full tuwadocs:flex-col tuwadocs:items-center tuwadocs:sm:items-start tuwa-footer-border tuwadocs:pt-8", children: [
@@ -45,18 +46,47 @@ function Footer({ links, logo }) {
       )) })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "tuwadocs:w-full tuwa-footer-border tuwadocs:pt-4", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "tuwadocs:flex tuwadocs:flex-col tuwadocs:sm:flex-row tuwadocs:justify-between tuwadocs:items-start tuwadocs:sm:items-center tuwadocs:gap-4", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "tuwadocs:flex-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "tuwadocs:flex tuwadocs:flex-col tuwadocs:sm:flex-row tuwadocs:justify-between tuwadocs:items-center tuwadocs:sm:items-start tuwadocs:gap-4", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "tuwadocs:flex-1 tuwadocs:text-center tuwadocs:sm:text-left", children: [
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "tuwa-footer-description", children: "The modular, headless-first Web3 infrastructure. Build self-custodial applications on open-source, portable building blocks." }),
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "tuwa-footer-license", children: "Licensed under Apache 2.0. Open source and free to use." })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "tuwa-footer-copyright", children: [
-          "\xA9 2025 - ",
-          (/* @__PURE__ */ new Date()).getFullYear(),
-          " TUWA. All rights reserved."
-        ] })
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          "nav",
+          {
+            "aria-label": "Policies",
+            className: "tuwadocs:flex tuwadocs:flex-wrap tuwadocs:items-center tuwadocs:justify-center tuwadocs:sm:justify-end tuwadocs:gap-x-4 tuwadocs:gap-y-2 tuwadocs:text-xs",
+            children: [
+              import_policies.footerPolicies.map((policy) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                "a",
+                {
+                  href: (0, import_policies.getPolicyPageUrl)(policy.slug),
+                  target: "_blank",
+                  rel: "noopener noreferrer",
+                  className: "tuwa-footer-link",
+                  children: policy.title
+                },
+                policy.slug
+              )),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                "a",
+                {
+                  href: import_policies.POLICIES_INDEX_URL,
+                  target: "_blank",
+                  rel: "noopener noreferrer",
+                  className: "tuwa-footer-link tuwadocs:font-semibold",
+                  children: "All policies"
+                }
+              )
+            ]
+          }
+        )
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "tuwadocs:flex tuwadocs:flex-wrap tuwadocs:items-center tuwadocs:gap-3 tuwadocs:mt-4 tuwadocs:pt-4 tuwa-footer-border" })
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "tuwadocs:flex tuwadocs:flex-wrap tuwadocs:items-center tuwadocs:justify-center tuwadocs:gap-3 tuwadocs:mt-4 tuwadocs:pt-4 tuwa-footer-border", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "tuwa-footer-copyright", children: [
+        "\xA9 2025 - ",
+        (/* @__PURE__ */ new Date()).getFullYear(),
+        " TUWA. All rights reserved."
+      ] }) })
     ] })
   ] }) });
 }

package/dist/components/Footer.d.cts

@@ -3,8 +3,9 @@ import { NavProps } from './NavBar.cjs';
 
 /**
  * The footer of a TUWA documentation site: the `Footer` of `nextra-theme-docs` with the logo, external links, the
- * TUWA description, the license and the copyright line (the current year is read on render). Render it in the `footer`
- * prop of the Nextra `Layout`.
+ * TUWA description and the license on the left, links to the policies in force on tuwa.io (`footerPolicies`) and to
+ * the list of all policies on the docs hub on the right, and the copyright line (the current year is read on render)
+ * centered below; on narrow screens everything is centered. Render it in the `footer` prop of the Nextra `Layout`.
  *
  * @param props - See {@link NavProps}.
  * @returns The footer.

package/dist/components/Footer.d.ts

@@ -3,8 +3,9 @@ import { NavProps } from './NavBar.js';
 
 /**
  * The footer of a TUWA documentation site: the `Footer` of `nextra-theme-docs` with the logo, external links, the
- * TUWA description, the license and the copyright line (the current year is read on render). Render it in the `footer`
- * prop of the Nextra `Layout`.
+ * TUWA description and the license on the left, links to the policies in force on tuwa.io (`footerPolicies`) and to
+ * the list of all policies on the docs hub on the right, and the copyright line (the current year is read on render)
+ * centered below; on narrow screens everything is centered. Render it in the `footer` prop of the Nextra `Layout`.
  *
  * @param props - See {@link NavProps}.
  * @returns The footer.

package/dist/components/Footer.js

@@ -1,6 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cn } from "@tuwaio/nova-core";
 import { Footer as NextraFooter } from "nextra-theme-docs";
+import { footerPolicies, getPolicyPageUrl, POLICIES_INDEX_URL } from "../policies";
 import { baseFooterLinks } from "../utils";
 function Footer({ links, logo }) {
   return /* @__PURE__ */ jsx(NextraFooter, { children: /* @__PURE__ */ jsxs("div", { className: "tuwadocs:flex tuwadocs:w-full tuwadocs:flex-col tuwadocs:items-center tuwadocs:sm:items-start tuwa-footer-border tuwadocs:pt-8", children: [
@@ -22,18 +23,47 @@ function Footer({ links, logo }) {
       )) })
     ] }),
     /* @__PURE__ */ jsxs("div", { className: "tuwadocs:w-full tuwa-footer-border tuwadocs:pt-4", children: [
-      /* @__PURE__ */ jsxs("div", { className: "tuwadocs:flex tuwadocs:flex-col tuwadocs:sm:flex-row tuwadocs:justify-between tuwadocs:items-start tuwadocs:sm:items-center tuwadocs:gap-4", children: [
-        /* @__PURE__ */ jsxs("div", { className: "tuwadocs:flex-1", children: [
+      /* @__PURE__ */ jsxs("div", { className: "tuwadocs:flex tuwadocs:flex-col tuwadocs:sm:flex-row tuwadocs:justify-between tuwadocs:items-center tuwadocs:sm:items-start tuwadocs:gap-4", children: [
+        /* @__PURE__ */ jsxs("div", { className: "tuwadocs:flex-1 tuwadocs:text-center tuwadocs:sm:text-left", children: [
           /* @__PURE__ */ jsx("p", { className: "tuwa-footer-description", children: "The modular, headless-first Web3 infrastructure. Build self-custodial applications on open-source, portable building blocks." }),
           /* @__PURE__ */ jsx("p", { className: "tuwa-footer-license", children: "Licensed under Apache 2.0. Open source and free to use." })
         ] }),
-        /* @__PURE__ */ jsxs("div", { className: "tuwa-footer-copyright", children: [
-          "\xA9 2025 - ",
-          (/* @__PURE__ */ new Date()).getFullYear(),
-          " TUWA. All rights reserved."
-        ] })
+        /* @__PURE__ */ jsxs(
+          "nav",
+          {
+            "aria-label": "Policies",
+            className: "tuwadocs:flex tuwadocs:flex-wrap tuwadocs:items-center tuwadocs:justify-center tuwadocs:sm:justify-end tuwadocs:gap-x-4 tuwadocs:gap-y-2 tuwadocs:text-xs",
+            children: [
+              footerPolicies.map((policy) => /* @__PURE__ */ jsx(
+                "a",
+                {
+                  href: getPolicyPageUrl(policy.slug),
+                  target: "_blank",
+                  rel: "noopener noreferrer",
+                  className: "tuwa-footer-link",
+                  children: policy.title
+                },
+                policy.slug
+              )),
+              /* @__PURE__ */ jsx(
+                "a",
+                {
+                  href: POLICIES_INDEX_URL,
+                  target: "_blank",
+                  rel: "noopener noreferrer",
+                  className: "tuwa-footer-link tuwadocs:font-semibold",
+                  children: "All policies"
+                }
+              )
+            ]
+          }
+        )
       ] }),
-      /* @__PURE__ */ jsx("div", { className: "tuwadocs:flex tuwadocs:flex-wrap tuwadocs:items-center tuwadocs:gap-3 tuwadocs:mt-4 tuwadocs:pt-4 tuwa-footer-border" })
+      /* @__PURE__ */ jsx("div", { className: "tuwadocs:flex tuwadocs:flex-wrap tuwadocs:items-center tuwadocs:justify-center tuwadocs:gap-3 tuwadocs:mt-4 tuwadocs:pt-4 tuwa-footer-border", children: /* @__PURE__ */ jsxs("div", { className: "tuwa-footer-copyright", children: [
+        "\xA9 2025 - ",
+        (/* @__PURE__ */ new Date()).getFullYear(),
+        " TUWA. All rights reserved."
+      ] }) })
     ] })
   ] }) });
 }

package/dist/components/PolicyDocument.cjs

@@ -0,0 +1,163 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var PolicyDocument_exports = {};
+__export(PolicyDocument_exports, {
+  PolicyDocument: () => PolicyDocument
+});
+module.exports = __toCommonJS(PolicyDocument_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_outline = require("@heroicons/react/24/outline");
+var import_nova_core = require("@tuwaio/nova-core");
+var import_html_react_parser = __toESM(require("html-react-parser"), 1);
+var import_policies = require("../policies");
+const BLOCKED_ELEMENTS = /* @__PURE__ */ new Set([
+  "script",
+  "style",
+  "iframe",
+  "object",
+  "embed",
+  "form",
+  "input",
+  "button",
+  "textarea",
+  "select",
+  "link",
+  "meta",
+  "base"
+]);
+function sanitize(node) {
+  if (!(node instanceof import_html_react_parser.Element)) return void 0;
+  if (BLOCKED_ELEMENTS.has(node.name)) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {});
+  for (const name of Object.keys(node.attribs)) {
+    if (name.toLowerCase().startsWith("on")) delete node.attribs[name];
+  }
+  if (node.name === "a") {
+    const href = node.attribs.href ?? "";
+    if (/^\s*javascript:/i.test(href)) {
+      delete node.attribs.href;
+    } else if (/^https?:\/\//i.test(href)) {
+      node.attribs.target = "_blank";
+      node.attribs.rel = "noopener noreferrer";
+    }
+  }
+  return void 0;
+}
+function PolicyDocument({
+  slug,
+  content,
+  source = import_policies.POLICY_SOURCE,
+  labels,
+  className,
+  classNames
+}) {
+  const tocLabel = labels?.toc ?? "On this page";
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      className: (0, import_nova_core.cn)(
+        "tuwadocs:grid tuwadocs:grid-cols-1 tuwadocs:gap-10 tuwadocs:lg:grid-cols-[minmax(0,1fr)_14rem]",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "tuwadocs:min-w-0", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+            "header",
+            {
+              className: (0, import_nova_core.cn)(
+                "tuwadocs:mb-8 tuwadocs:flex tuwadocs:flex-col tuwadocs:gap-4 tuwadocs:border-b tuwadocs:border-[var(--tuwa-border-primary)] tuwadocs:pb-6",
+                classNames?.header
+              ),
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  "h1",
+                  {
+                    className: (0, import_nova_core.cn)(
+                      "tuwadocs-policy-title tuwadocs:text-3xl tuwadocs:font-extrabold tuwadocs:tracking-tight tuwadocs:text-[var(--tuwa-text-primary)] tuwadocs:sm:text-4xl",
+                      classNames?.title
+                    ),
+                    children: content.title
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "tuwadocs:flex tuwadocs:flex-wrap tuwadocs:items-center tuwadocs:justify-between tuwadocs:gap-3", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", { className: (0, import_nova_core.cn)("tuwadocs:text-sm tuwadocs:text-[var(--tuwa-text-secondary)]", classNames?.updated), children: [
+                    labels?.updated ?? "Last updated",
+                    " ",
+                    content.updated
+                  ] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                    "a",
+                    {
+                      href: (0, import_policies.getPolicyFileUrl)(slug, "pdf", source),
+                      target: "_blank",
+                      rel: "noopener noreferrer",
+                      className: (0, import_nova_core.cn)(
+                        "tuwadocs-policy-title tuwadocs:inline-flex tuwadocs:h-10 tuwadocs:no-underline tuwadocs:items-center tuwadocs:gap-2 tuwadocs:rounded-[var(--tuwa-rounded-corners)] tuwadocs:border tuwadocs:border-[var(--tuwa-border-primary)] tuwadocs:bg-[var(--tuwa-bg-primary)] tuwadocs:px-4 tuwadocs:text-sm tuwadocs:font-bold tuwadocs:text-[var(--tuwa-text-primary)] tuwadocs:transition-colors tuwadocs:hover:bg-[var(--tuwa-bg-muted)]",
+                        classNames?.download
+                      ),
+                      children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_outline.ArrowDownTrayIcon, { className: "tuwadocs:h-4 tuwadocs:w-4", "aria-hidden": "true" }),
+                        labels?.download ?? "Download PDF"
+                      ]
+                    }
+                  )
+                ] })
+              ]
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("article", { className: (0, import_nova_core.cn)("tuwadocs-policy", classNames?.body), children: (0, import_html_react_parser.default)(content.html, { replace: sanitize }) })
+        ] }),
+        content.sections.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          "nav",
+          {
+            "aria-label": tocLabel,
+            className: (0, import_nova_core.cn)(
+              "tuwadocs:hidden tuwadocs:lg:sticky tuwadocs:lg:top-24 tuwadocs:lg:block tuwadocs:lg:self-start",
+              classNames?.toc
+            ),
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "tuwadocs:mb-3 tuwadocs:text-xs tuwadocs:font-bold tuwadocs:uppercase tuwadocs:tracking-widest tuwadocs:text-[var(--tuwa-text-tertiary)]", children: tocLabel }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ol", { className: "tuwadocs:flex tuwadocs:list-none tuwadocs:flex-col tuwadocs:gap-2 tuwadocs:border-l tuwadocs:border-[var(--tuwa-border-primary)] tuwadocs:pl-4", children: content.sections.map((section) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                "a",
+                {
+                  href: `#${section.id}`,
+                  className: "tuwadocs:text-sm tuwadocs:text-[var(--tuwa-text-secondary)] tuwadocs:no-underline tuwadocs:transition-colors tuwadocs:hover:text-[var(--tuwa-text-primary)]",
+                  children: section.title
+                }
+              ) }, section.id)) })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  PolicyDocument
+});

package/dist/components/PolicyDocument.d.cts

@@ -0,0 +1,57 @@
+import * as React from 'react';
+import { PolicySlug, PolicyContent } from '../policies.cjs';
+
+/**
+ * Props of {@link PolicyDocument}.
+ */
+interface PolicyDocumentProps {
+    /** Slug of the policy; sets the link of the Download PDF button. */
+    slug: PolicySlug;
+    /** Content of the policy, from `loadPolicy`. */
+    content: PolicyContent;
+    /** Base URL of the policy files for the PDF link (default: `POLICY_SOURCE`). */
+    source?: string;
+    /** Texts of the page. */
+    labels?: {
+        /** Text before the date of the version (default: `Last updated`). */
+        updated?: string;
+        /** Text of the button that opens the PDF (default: `Download PDF`). */
+        download?: string;
+        /** Heading and accessible name of the list of sections (default: `On this page`). */
+        toc?: string;
+    };
+    /** Classes of the root element. */
+    className?: string;
+    /** Classes of the parts of the page. */
+    classNames?: {
+        /** The header with the title, the date and the button. */
+        header?: string;
+        /** The title. */
+        title?: string;
+        /** The date of the version. */
+        updated?: string;
+        /** The Download PDF button. */
+        download?: string;
+        /** The `article` with the body. */
+        body?: string;
+        /** The list of sections (shown from the `lg` breakpoint). */
+        toc?: string;
+    };
+}
+/**
+ * A TUWA policy page (Terms, Privacy, Cookie, Refund, Security): the title, the date of the version, a Download PDF
+ * button with the official document, the text with anchored sections and, from the `lg` breakpoint, a sticky list of
+ * the sections. The text is selectable and readable on phones, by search engines and by screen readers; the PDF is
+ * generated from the same source.
+ *
+ * Load the content on the server with `loadPolicy` and render the page inside the layout of the site. The body is
+ * HTML from `TuwaIO/workflows`: scripts, styles, frames, forms and event attributes are dropped, and external links
+ * open in a new tab. Headings scroll below a sticky header (`scroll-margin-top`), so `/refund#how-to-request-a-refund`
+ * opens at its section.
+ *
+ * @param props - See {@link PolicyDocumentProps}.
+ * @returns The policy page.
+ */
+declare function PolicyDocument({ slug, content, source, labels, className, classNames, }: PolicyDocumentProps): React.JSX.Element;
+
+export { PolicyDocument, type PolicyDocumentProps };

package/dist/components/PolicyDocument.d.ts

@@ -0,0 +1,57 @@
+import * as React from 'react';
+import { PolicySlug, PolicyContent } from '../policies.js';
+
+/**
+ * Props of {@link PolicyDocument}.
+ */
+interface PolicyDocumentProps {
+    /** Slug of the policy; sets the link of the Download PDF button. */
+    slug: PolicySlug;
+    /** Content of the policy, from `loadPolicy`. */
+    content: PolicyContent;
+    /** Base URL of the policy files for the PDF link (default: `POLICY_SOURCE`). */
+    source?: string;
+    /** Texts of the page. */
+    labels?: {
+        /** Text before the date of the version (default: `Last updated`). */
+        updated?: string;
+        /** Text of the button that opens the PDF (default: `Download PDF`). */
+        download?: string;
+        /** Heading and accessible name of the list of sections (default: `On this page`). */
+        toc?: string;
+    };
+    /** Classes of the root element. */
+    className?: string;
+    /** Classes of the parts of the page. */
+    classNames?: {
+        /** The header with the title, the date and the button. */
+        header?: string;
+        /** The title. */
+        title?: string;
+        /** The date of the version. */
+        updated?: string;
+        /** The Download PDF button. */
+        download?: string;
+        /** The `article` with the body. */
+        body?: string;
+        /** The list of sections (shown from the `lg` breakpoint). */
+        toc?: string;
+    };
+}
+/**
+ * A TUWA policy page (Terms, Privacy, Cookie, Refund, Security): the title, the date of the version, a Download PDF
+ * button with the official document, the text with anchored sections and, from the `lg` breakpoint, a sticky list of
+ * the sections. The text is selectable and readable on phones, by search engines and by screen readers; the PDF is
+ * generated from the same source.
+ *
+ * Load the content on the server with `loadPolicy` and render the page inside the layout of the site. The body is
+ * HTML from `TuwaIO/workflows`: scripts, styles, frames, forms and event attributes are dropped, and external links
+ * open in a new tab. Headings scroll below a sticky header (`scroll-margin-top`), so `/refund#how-to-request-a-refund`
+ * opens at its section.
+ *
+ * @param props - See {@link PolicyDocumentProps}.
+ * @returns The policy page.
+ */
+declare function PolicyDocument({ slug, content, source, labels, className, classNames, }: PolicyDocumentProps): React.JSX.Element;
+
+export { PolicyDocument, type PolicyDocumentProps };

package/dist/components/PolicyDocument.js

@@ -0,0 +1,129 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { ArrowDownTrayIcon } from "@heroicons/react/24/outline";
+import { cn } from "@tuwaio/nova-core";
+import parse, { Element } from "html-react-parser";
+import { getPolicyFileUrl, POLICY_SOURCE } from "../policies";
+const BLOCKED_ELEMENTS = /* @__PURE__ */ new Set([
+  "script",
+  "style",
+  "iframe",
+  "object",
+  "embed",
+  "form",
+  "input",
+  "button",
+  "textarea",
+  "select",
+  "link",
+  "meta",
+  "base"
+]);
+function sanitize(node) {
+  if (!(node instanceof Element)) return void 0;
+  if (BLOCKED_ELEMENTS.has(node.name)) return /* @__PURE__ */ jsx(Fragment, {});
+  for (const name of Object.keys(node.attribs)) {
+    if (name.toLowerCase().startsWith("on")) delete node.attribs[name];
+  }
+  if (node.name === "a") {
+    const href = node.attribs.href ?? "";
+    if (/^\s*javascript:/i.test(href)) {
+      delete node.attribs.href;
+    } else if (/^https?:\/\//i.test(href)) {
+      node.attribs.target = "_blank";
+      node.attribs.rel = "noopener noreferrer";
+    }
+  }
+  return void 0;
+}
+function PolicyDocument({
+  slug,
+  content,
+  source = POLICY_SOURCE,
+  labels,
+  className,
+  classNames
+}) {
+  const tocLabel = labels?.toc ?? "On this page";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "tuwadocs:grid tuwadocs:grid-cols-1 tuwadocs:gap-10 tuwadocs:lg:grid-cols-[minmax(0,1fr)_14rem]",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "tuwadocs:min-w-0", children: [
+          /* @__PURE__ */ jsxs(
+            "header",
+            {
+              className: cn(
+                "tuwadocs:mb-8 tuwadocs:flex tuwadocs:flex-col tuwadocs:gap-4 tuwadocs:border-b tuwadocs:border-[var(--tuwa-border-primary)] tuwadocs:pb-6",
+                classNames?.header
+              ),
+              children: [
+                /* @__PURE__ */ jsx(
+                  "h1",
+                  {
+                    className: cn(
+                      "tuwadocs-policy-title tuwadocs:text-3xl tuwadocs:font-extrabold tuwadocs:tracking-tight tuwadocs:text-[var(--tuwa-text-primary)] tuwadocs:sm:text-4xl",
+                      classNames?.title
+                    ),
+                    children: content.title
+                  }
+                ),
+                /* @__PURE__ */ jsxs("div", { className: "tuwadocs:flex tuwadocs:flex-wrap tuwadocs:items-center tuwadocs:justify-between tuwadocs:gap-3", children: [
+                  /* @__PURE__ */ jsxs("p", { className: cn("tuwadocs:text-sm tuwadocs:text-[var(--tuwa-text-secondary)]", classNames?.updated), children: [
+                    labels?.updated ?? "Last updated",
+                    " ",
+                    content.updated
+                  ] }),
+                  /* @__PURE__ */ jsxs(
+                    "a",
+                    {
+                      href: getPolicyFileUrl(slug, "pdf", source),
+                      target: "_blank",
+                      rel: "noopener noreferrer",
+                      className: cn(
+                        "tuwadocs-policy-title tuwadocs:inline-flex tuwadocs:h-10 tuwadocs:no-underline tuwadocs:items-center tuwadocs:gap-2 tuwadocs:rounded-[var(--tuwa-rounded-corners)] tuwadocs:border tuwadocs:border-[var(--tuwa-border-primary)] tuwadocs:bg-[var(--tuwa-bg-primary)] tuwadocs:px-4 tuwadocs:text-sm tuwadocs:font-bold tuwadocs:text-[var(--tuwa-text-primary)] tuwadocs:transition-colors tuwadocs:hover:bg-[var(--tuwa-bg-muted)]",
+                        classNames?.download
+                      ),
+                      children: [
+                        /* @__PURE__ */ jsx(ArrowDownTrayIcon, { className: "tuwadocs:h-4 tuwadocs:w-4", "aria-hidden": "true" }),
+                        labels?.download ?? "Download PDF"
+                      ]
+                    }
+                  )
+                ] })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx("article", { className: cn("tuwadocs-policy", classNames?.body), children: parse(content.html, { replace: sanitize }) })
+        ] }),
+        content.sections.length > 0 && /* @__PURE__ */ jsxs(
+          "nav",
+          {
+            "aria-label": tocLabel,
+            className: cn(
+              "tuwadocs:hidden tuwadocs:lg:sticky tuwadocs:lg:top-24 tuwadocs:lg:block tuwadocs:lg:self-start",
+              classNames?.toc
+            ),
+            children: [
+              /* @__PURE__ */ jsx("p", { className: "tuwadocs:mb-3 tuwadocs:text-xs tuwadocs:font-bold tuwadocs:uppercase tuwadocs:tracking-widest tuwadocs:text-[var(--tuwa-text-tertiary)]", children: tocLabel }),
+              /* @__PURE__ */ jsx("ol", { className: "tuwadocs:flex tuwadocs:list-none tuwadocs:flex-col tuwadocs:gap-2 tuwadocs:border-l tuwadocs:border-[var(--tuwa-border-primary)] tuwadocs:pl-4", children: content.sections.map((section) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+                "a",
+                {
+                  href: `#${section.id}`,
+                  className: "tuwadocs:text-sm tuwadocs:text-[var(--tuwa-text-secondary)] tuwadocs:no-underline tuwadocs:transition-colors tuwadocs:hover:text-[var(--tuwa-text-primary)]",
+                  children: section.title
+                }
+              ) }, section.id)) })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  PolicyDocument
+};