@mannisto/astro-metadata 1.0.2 → 2.0.0-alpha.1

package/README.md

@@ -2,131 +2,476 @@
 
 ![banner](./assets/banner.png)
 
-![npm version](https://img.shields.io/npm/v/@mannisto/astro-metadata)
-![license](https://img.shields.io/badge/license-MIT-green)
-![astro peer dependency](https://img.shields.io/npm/dependency-version/@mannisto/astro-metadata/peer/astro)
+![Astro](https://img.shields.io/badge/astro-%232C2052.svg?style=for-the-badge&logo=astro&logoColor=white)
+![npm version](https://img.shields.io/npm/v/@mannisto/astro-metadata?style=for-the-badge)
+![license](https://img.shields.io/badge/license-MIT-green?style=for-the-badge)
 
-Astro components for managing your page head — metadata, social sharing, favicons, and SEO.
+The page metadata for Astro: the title, the description, the canonical URL, social cards, favicons, the web app manifest and structured data. Set the site values one time, and give each page only its own values.
 
-## Installation
-```bash
-# pnpm
-pnpm add @mannisto/astro-metadata
+- [Install](#install)
+- [Configuration](#configuration)
+- [Metadata component](#metadata-component)
+- [Favicons](#favicons)
+- [Web app manifest](#web-app-manifest)
+- [Structured data](#structured-data)
+- [Checks](#checks)
+- [API](#api)
+- [Good to know](#good-to-know)
+- [Migrate from v1](#migrate-from-v1)
+- [Contributing](#contributing)
+- [License](#license)
+
+## Install
 
-# npm
+```bash
 npm install @mannisto/astro-metadata
+```
+
+The integration requires Astro 6.4.6 or later, or Astro 7.
+
+## Configuration
+
+```typescript
+// astro.config.ts
+import metadata from "@mannisto/astro-metadata"
+import { defineConfig } from "astro/config"
+
+export default defineConfig({
+  site: "https://example.com",
+  integrations: [
+    metadata({
+      siteName: "Acme Studio",
+      titleTemplate: "%s | Acme Studio",
+      description: "Tools for small teams.",
+      image: { url: "/og.jpg", alt: "Acme Studio", width: 1200, height: 630 },
+      twitter: { site: "@acmestudio" },
+      themeColor: "#111111",
+      feeds: [{ href: "/rss.xml", title: "News" }],
+      favicon: { source: "./src/assets/logo.svg" },
+      manifest: { name: "Acme Studio" },
+    }),
+  ],
+})
+```
+
+Set `site` in the Astro config. The canonical URL and the social images must be absolute URLs, and the package uses `site` to make them.
+
+| Option | Default | Description |
+|---|---|---|
+| `siteName` | — | The name of the site: the title of a page without a title, and `og:site_name`. |
+| `titleTemplate` | — | The title template, for example `"%s \| My Site"`. `%s` is the page title. |
+| `description` | — | The description of a page without a description. |
+| `image` | — | The social image of a page without an image: `url`, `alt`, `width` and `height`. |
+| `twitter` | — | `site`: the Twitter (X) handle of the site. `card`: `"summary"` or `"summary_large_image"` (default) for pages with an image. |
+| `themeColor` | — | The color of the browser interface. Give one color, or `{ light, dark }`. |
+| `feeds` | — | The RSS, Atom or JSON feeds: `href`, `title` and `type` (`"rss"` by default). |
+| `robots` | — | `index: false` or `follow: false` for all pages, for example on a staging site. `extra`: other directives, for example `"max-image-preview:large"`. |
+| `favicon` | — | Generates the favicons from one image. See [Favicons](#favicons). |
+| `manifest` | — | Generates the web app manifest, or links your own. See [Web app manifest](#web-app-manifest). |
+| `debug` | `true` | The Metadata app in the dev toolbar (`client`) and the checks in the build log (`build`). Set `false` to turn off both, or `{ client: false }` or `{ build: false }` to turn off one. See [Checks](#checks). |
+| `rules` | — | `ignore`: the ids of the check rules to turn off. `custom`: your own rules. See [Checks](#checks). |
+| `pages` | — | `ignore`: the pages without checks, as path patterns, for example `["/404", "/drafts/**"]`. See [Checks](#checks). |
 
-# yarn
-yarn add @mannisto/astro-metadata
+### Translations
+
+Each text can be one string, or an object with one string for each locale:
+
+```typescript
+metadata({
+  siteName: { en: "Acme Studio", fi: "Acme Studio Suomi" },
+  titleTemplate: { en: "%s | Acme Studio", fi: "%s | Acme Studio Suomi" },
+})
 ```
 
-## Usage
+`<Metadata>` uses the text of `Astro.currentLocale`, or of its `locale` prop. A locale without a text uses the first text.
 
-There are three ways to use this package. Pick what suits your project, or combine them freely.
+## Metadata component
 
-### Head component
+Put `<Metadata>` into the `<head>` of your layout, and give it the values of the page:
 
-The simplest approach — use `Head` in your layout and pass props down from pages. Title, description and image flow into Open Graph and Twitter automatically.
 ```astro
 ---
-import { Head } from "@mannisto/astro-metadata"
+// src/layouts/Layout.astro
+import { Metadata, type MetadataProps } from "@mannisto/astro-metadata/components"
+
+type Props = MetadataProps
 ---
 
-<html>
-  <Head
-    title="Home"
-    titleTemplate="%s | My Site"
-    description="Welcome to my site"
-    image={{ url: "/og.jpg", alt: "My Site", width: 1200, height: 630 }}
-  />
+<html lang="en">
+  <head>
+    <Metadata {...Astro.props} />
+  </head>
   <body>
     <slot />
   </body>
 </html>
 ```
 
-[Read more →](docs/usage/head.md)
-
-### Metadata API
-
-Set metadata in pages, resolve in layouts — no prop drilling.
 ```astro
 ---
-// pages/about.astro
-import { Metadata } from "@mannisto/astro-metadata"
+// src/pages/about.astro
+import Layout from "../layouts/Layout.astro"
+---
+
+<Layout title="About" description="The story of Acme Studio.">
+  <h1>About</h1>
+</Layout>
+```
+
+The page values override the site values. For example, `title="About"` gives:
 
-Metadata.set({
-  title: "About",
-  description: "Learn more about us",
+```html
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>About | Acme Studio</title>
+<meta name="description" content="The story of Acme Studio.">
+<link rel="canonical" href="https://example.com/about/">
+<meta property="og:title" content="About">
+<meta property="og:description" content="The story of Acme Studio.">
+<meta property="og:url" content="https://example.com/about/">
+<meta property="og:type" content="website">
+<meta property="og:site_name" content="Acme Studio">
+<meta property="og:image" content="https://example.com/og.jpg">
+<meta name="twitter:card" content="summary_large_image">
+<meta name="twitter:site" content="@acmestudio">
+...
+```
+
+| Prop | Default | Description |
+|---|---|---|
+| `title` | `siteName` | The page title. The title template adds the site name. |
+| `description` | `description` | The page description. |
+| `image` | `image` | The social image: `url`, `alt`, `width` and `height`. |
+| `type` | `"website"` | The Open Graph type, for example `"article"`. |
+| `author` | — | The Twitter (X) handle of the author, for example `"@acmewriter"`. |
+| `canonical` | The current page | The canonical path or URL. |
+| `index` | `true` | `false` keeps the page out of search results. |
+| `follow` | `true` | `false` tells search engines not to follow the links. |
+| `hreflang` | — | The hreflang links: the page in each locale, and `x-default`: `{ hreflang, href }[]`. |
+| `schema` | — | Structured data. See [Structured data](#structured-data). |
+| `locale` | `Astro.currentLocale` | The locale of the translated site values. |
+
+A tag is rendered only when it has a value. For example, the robots tag is necessary only with `index` or `follow` set to `false`.
+
+## Favicons
+
+Give one square source image. An SVG gives the best result. Use a PNG, WebP or JPEG of at least 512 × 512 px, or the large icons become blurred.
+
+```typescript
+metadata({
+  favicon: {
+    source: "./src/assets/logo.svg",
+    background: "#ffffff",
+  },
 })
----
 ```
-```astro
----
-// layouts/Layout.astro
-import { Head, Metadata } from "@mannisto/astro-metadata"
 
-const meta = Metadata.resolve({
-  title: "My Site",
-  titleTemplate: "%s | My Site",
+The integration generates these files, and `<Metadata>` renders their tags in the recommended order:
+
+| File | Use |
+|---|---|
+| `/favicon.ico` | 16 and 32 px, for old browsers and tools |
+| `/favicon.svg` | Modern browsers. Only for an SVG source. |
+| `/favicon-16.png`, `/favicon-32.png` | Browser tabs |
+| `/apple-touch-icon.png` | 180 px, for the iOS home screen |
+| `/favicon-192.png`, `/favicon-512.png` | The web app manifest |
+
+iOS shows transparent pixels as black, so the Apple icon shows the logo on the `background` color (white by default).
+
+To generate other files, give a `files` list. It replaces the default files:
+
+```typescript
+favicon: {
+  source: "./src/assets/logo.svg",
+  files: [
+    { path: "/favicon.ico", sizes: [16, 32, 48] },
+    { path: "/favicon.svg" },
+    { path: "/apple-touch-icon.png", size: 180 },
+    { path: "/favicon-96.png", size: 96 },
+    { path: "/favicon-512.png", size: 512 },
+  ],
+}
+```
+
+The extension sets the format: `.ico`, `.png` or `.svg`. The name and the size set the use:
+
+- `.ico` and `.svg` files, and `.png` files smaller than 192 px, get an icon link tag.
+- `apple-touch-icon.png` gets the Apple link tag.
+- `.png` files of 192 px or larger go into the web app manifest.
+
+Keep the names `favicon.ico` and `apple-touch-icon.png`. Browsers and iOS ask for these URLs directly.
+
+## Web app manifest
+
+Give the manifest as an object, and the integration serves it at `/manifest.webmanifest` with the generated icons:
+
+```typescript
+metadata({
+  manifest: {
+    name: "Acme Studio",
+    shortName: "Acme",
+    backgroundColor: "#ffffff",
+  },
 })
----
+```
 
-<html>
-  <Head {...meta} />
-  <body>
-    <slot />
-  </body>
-</html>
+| Value | Default | Description |
+|---|---|---|
+| `name` | — | The name of the app. |
+| `shortName` | — | The name on the home screen. |
+| `description` | — | The description of the app. |
+| `startUrl` | `"/"` | The page that the installed app opens. |
+| `display` | `"standalone"` | `"standalone"`, `"fullscreen"`, `"minimal-ui"` or `"browser"`. |
+| `themeColor` | `themeColor` | The color of the app interface. |
+| `backgroundColor` | — | The color of the start screen. |
+| `extra` | — | Other manifest fields, copied into the file unchanged. |
+
+With translated texts, each locale gets its own manifest: the first locale at `/manifest.webmanifest`, the others at `/fi/manifest.webmanifest` and so on.
+
+To use your own manifest, give its path. The integration then only renders the link tag:
+
+```typescript
+metadata({
+  manifest: "/site.webmanifest",
+})
 ```
 
-[Read more →](docs/usage/metadata.md)
+Your own manifest endpoint can use the generated icons with `Favicon.icons()`.
+
+## Structured data
 
-### Individual components
+The `Schema` builders make the most common JSON-LD types. They fill in the site name and make all URLs absolute.
 
-Use components directly in your `<head>` for full control.
 ```astro
 ---
-import { Title, Description, OpenGraph } from "@mannisto/astro-metadata"
+import { Metadata } from "@mannisto/astro-metadata/components"
+import { Schema } from "@mannisto/astro-metadata/runtime"
 ---
 
-<html>
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <Title value="My Page" template="%s | My Site" />
-    <Description value="Welcome to my site" />
-    <OpenGraph
-      title="My Page"
-      image={{ url: "/og.jpg", alt: "My Site" }}
-    />
-  </head>
-  <body>
-    <slot />
-  </body>
-</html>
+<Metadata
+  title="Hello"
+  type="article"
+  schema={[
+    Schema.article({
+      title: "Hello",
+      published: new Date("2026-09-01"),
+      author: { name: "Acme Writer", url: "/about" },
+      url: "/blog/hello",
+    }),
+    Schema.breadcrumbs([
+      { name: "Home", url: "/" },
+      { name: "Blog", url: "/blog" },
+    ]),
+  ]}
+/>
 ```
 
-[Read more →](docs/usage/components.md)
+The `schema` prop also takes your own objects. The types come from [`schema-dts`](https://github.com/google/schema-dts), so your editor completes the schema.org fields.
+
+## Checks
 
-## Components
+The integration checks the metadata of each page. Each problem has a level:
 
-- [Canonical](docs/components/canonical.md)
-- [Description](docs/components/description.md)
-- [Favicon](docs/components/favicon.md)
-- [Head](docs/components/head.md)
-- [Keywords](docs/components/keywords.md)
-- [LanguageAlternates](docs/components/language-alternates.md)
-- [OpenGraph](docs/components/open-graph.md)
-- [Robots](docs/components/robots.md)
-- [Schema](docs/components/schema.md)
-- [Title](docs/components/title.md)
-- [Twitter](docs/components/twitter.md)
+| Level | Meaning | Examples |
+| --- | --- | --- |
+| Error | The metadata is broken. | No title, placeholder text such as `undefined`, two canonical links, invalid JSON-LD, an `og:image` that does not load |
+| Warning | Fix it for better results. | A long title, the same title on two pages, no `twitter:card`, an `og:image` over 600 KB, an hreflang page that does not link back |
+| Info | Good to know. | `noindex`, a short description, no `og:image:alt` |
+
+The checks look at three things:
+
+- **The head of each page:** the tags, the structured data and the hreflang links. A page with `noindex` gets no search and sharing checks.
+- **The files of each page:** the `og:image` and the favicons. The checks load them, and compare the real image size, format and file size with the tags. Files on other sites are not checked.
+- **All pages together:** the same title or description on two pages, and hreflang links that do not link back. Only the build can compare the pages.
+
+The results show in two places:
+
+- **In dev:** Open the Metadata app in the Astro dev toolbar. It shows the problems of the current page. Click a problem to open the row of its tag. The app also shows the link previews of Google, Twitter (X), Facebook, LinkedIn, WhatsApp, Discord and Slack, and all metadata tags.
+- **In the build:** The integration logs the errors and the warnings of the prerendered pages:
+
+```
+[WARN] [@mannisto/astro-metadata] /about/index.html
+  - The page has no description.
+```
+
+### Turn off rules
+
+All rules and their ids are in [`src/lib/rules.js`](./src/lib/rules.js). Give the ids of the rules to turn off in `rules.ignore`. This applies to the dev toolbar app and to the build:
+
+```typescript
+metadata({
+  rules: {
+    ignore: ["description-short", "og-image-alt-missing"],
+  },
+})
+```
+
+### Custom rules
+
+Add your own rules in `rules.custom`. A rule has an `id`, a `level` (`"error"`, `"warning"` or `"info"`), a `message`, and a `check` function that returns `true` when the page has the problem:
+
+```typescript
+metadata({
+  rules: {
+    custom: [
+      {
+        id: "title-brand",
+        level: "warning",
+        message: "The title must contain the brand name.",
+        check(head) {
+          return !head.titles[0]?.includes("Acme Studio")
+        },
+      },
+    ],
+  },
+})
+```
+
+The `head` has the metadata of the page:
+
+| Value | Description |
+|---|---|
+| `titles` | The texts of all title tags. |
+| `meta` | The first `content` of each meta tag, by its `name` or `property`, for example `head.meta["og:image"]`. |
+| `metaCount` | The number of meta tags with each name. |
+| `links` | The attributes of all link tags, for example `{ rel: "canonical", href: "…" }`. |
+| `schemas` | The texts of the JSON-LD scripts. |
+| `lang`, `charset` | The `lang` attribute of the html tag, and the charset. |
+
+The rule can also have:
+- `message` as a function, `(head) => string`, for a message with values of the page.
+- `field`, the tag of the problem, for example `"og:title"`. A click on the problem in the dev toolbar app opens its row.
+- `indexed: true`, to skip the rule on a noindex page.
+
+The custom rules run in the build and in the dev toolbar app. In dev, the dev server runs them, because they are functions in the Astro config. Text between backticks in a message shows as code in the dev toolbar app. The `MetadataRule` type gives your editor completion.
+
+### Ignore pages
+
+Some pages do not need checks, for example a 404 page or the drafts. Give their paths in `pages.ignore`, without the base. In a pattern, `*` matches one part of the path, and `**` matches any number of parts:
+
+```typescript
+metadata({
+  pages: {
+    ignore: ["/404", "/drafts/**"],
+  },
+})
+```
+
+The build does not check these pages, and does not compare them with the other pages. The dev toolbar app shows all values of these pages, but no problems.
+
+Set `debug: { build: false }` to hide the build warnings, `debug: { client: false }` to remove the dev toolbar app, and `debug: false` to turn off both.
+
+## API
+
+```typescript
+import { Favicon, Manifest, Schema, Site } from "@mannisto/astro-metadata/runtime"
+```
+
+| Method | Returns | Description |
+|---|---|---|
+| `Site.config` | `MetadataConfig` | The site values of the integration |
+| `Site.name("fi")` | `string` | The site name of a locale |
+| `Site.title("About", "fi")` | `string` | The page title in the title template |
+| `Site.url("/og.jpg")` | `string` | The absolute URL of a path |
+| `Site.pageUrl("/about")` | `string` | The absolute URL of a page, with the trailing slash of Astro |
+| `Favicon.config` | `FaviconConfig` | The favicon config, or `undefined` without the `favicon` option |
+| `Favicon.files` | `ResolvedFaviconFile[]` | The generated files |
+| `Favicon.links()` | `FaviconLink[]` | The link tags of the generated files |
+| `Favicon.icons()` | `ManifestIcon[]` | The icons for a web app manifest |
+| `Favicon.url("/favicon.ico")` | `string` | The URL of a file, with the base and a hash |
+| `Favicon.generate("/favicon-32.png")` | `Promise<Response>` | Generates a file of the config |
+| `Manifest.config` | `ManifestConfig \| string` | The `manifest` option |
+| `Manifest.url("fi")` | `string` | The URL of the manifest of a locale |
+| `Manifest.build("fi")` | `object` | The manifest of a locale |
+| `Manifest.paths()` | `ManifestPath[]` | The generated manifest files |
+| `Schema.website()` | `WebSite` | The website, with the site name and URL |
+| `Schema.organization()` | `Organization` | The organization: `name`, `url`, `logo`, `sameAs` |
+| `Schema.article()` | `Article` | An article: `title`, `description`, `image`, `published`, `modified`, `author`, `url`, `type` |
+| `Schema.breadcrumbs()` | `BreadcrumbList` | The path to the current page: `{ name, url }[]` |
+| `Schema.stringify(data)` | `string` | JSON that is safe inside a script tag |
+
+| Component | Props |
+|---|---|
+| `<Metadata>` | See [Metadata component](#metadata-component) |
+
+Import the types from `@mannisto/astro-metadata/runtime`, for example `import type { MetadataImage } from "@mannisto/astro-metadata/runtime"`.
+
+## Good to know
+
+- **CMS data.** Give CMS values to `<Metadata>` as props. The site values of the integration are fixed at startup, and a change restarts the dev server.
+- **Trailing slash.** The canonical URL and the `hreflang` links follow the `trailingSlash` setting of Astro. With `"ignore"`, `build.format` decides.
+- **`sharp`.** The favicons use the `sharp` package that Astro installs. If you install Astro without its optional dependencies, install `sharp` yourself.
+- **Files in `public/`.** A file in `public/` with the same path as a generated favicon replaces the generated file. The integration shows a warning.
+- **With @mannisto/astro-i18n.** Give the locale and the hreflang links to `<Metadata>`:
+
+  ```astro
+  ---
+  import { Locale } from "@mannisto/astro-i18n/runtime"
+  import { Metadata } from "@mannisto/astro-metadata/components"
+
+  const { code } = Locale.use(Astro)
+  ---
+
+  <Metadata locale={code} hreflang={Locale.hreflang(Astro.url, Astro.site!)} />
+  ```
+
+## Migrate from v1
+
+Version 2 is a new API. The main changes:
+
+### Move the site values into the integration
+
+```diff
+- <Head title="About" titleTemplate="%s | My Site" description="..." />
++ metadata({ titleTemplate: "%s | My Site", description: "..." })
+```
+
+### Use `<Metadata>` inside your own `<head>`
+
+`<Head>` rendered the `<head>` element. `<Metadata>` renders only the tags.
+
+```diff
+- import { Head } from "@mannisto/astro-metadata"
++ import { Metadata } from "@mannisto/astro-metadata/components"
+
+- <Head title="About" />
++ <head>
++   <Metadata title="About" />
++ </head>
+```
+
+### Replace the removed components
+
+`Title`, `Description`, `Canonical`, `Robots`, `OpenGraph`, `Twitter`, `Favicon`, `LanguageAlternates`, `Keywords` and `Schema` are removed. `<Metadata>` renders their tags.
+
+```diff
+- <LanguageAlternates alternates={links} />
+- <Schema schema={data} />
++ <Metadata hreflang={links} schema={data} />
+```
+
+### Replace the `Metadata` store
+
+`Metadata.set()` and `Metadata.resolve()` are removed. Give the values as props to your layout.
+
+### Replace the robots object and the `false` props
+
+```diff
+- <Head robots={{ index: false }} twitter={false} />
++ <Metadata index={false} />
+```
+
+### Generate the favicons
+
+```diff
+- <Head favicon={{ icons: [{ path: "/favicon.ico" }] }} />
++ metadata({ favicon: { source: "./src/assets/logo.svg" } })
+```
 
 ## Contributing
 
-See [CONTRIBUTING.md](CONTRIBUTING.md) for setup and contribution guidelines.
+Read [CONTRIBUTING.md](./CONTRIBUTING.md) for the setup and the test commands. Report bugs and ideas in [GitHub issues](https://github.com/eremannisto/astro-metadata/issues).
 
 ## License
 
-MIT © [Ere Männistö](https://github.com/eremannisto)
+MIT © [Ere Männistö](https://github.com/eremannisto)

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mannisto/astro-metadata",
-  "version": "1.0.2",
-  "description": "Astro components for managing your page head — metadata, social sharing, favicons, and SEO.",
+  "version": "2.0.0-alpha.1",
+  "description": "Metadata for Astro: page tags, social cards, favicons, the web app manifest and structured data.",
   "license": "MIT",
   "type": "module",
   "homepage": "https://github.com/eremannisto/astro-metadata#readme",
@@ -18,10 +18,16 @@
     "seo",
     "metadata"
   ],
-  "exports": "./index.ts",
+  "exports": {
+    ".": {
+      "types": "./src/integration.d.ts",
+      "default": "./src/integration.js"
+    },
+    "./runtime": "./src/runtime.ts",
+    "./components": "./src/components/index.ts"
+  },
   "files": [
-    "src",
-    "index.ts"
+    "src"
   ],
   "scripts": {
     "lint": "eslint . --fix",
@@ -33,21 +39,26 @@
     "test:fixtures": "pnpm --filter \"./tests/e2e/fixtures/**\" exec astro build"
   },
   "peerDependencies": {
-    "astro": "^4.3.0 || ^5.0.0 || ^6.0.0 || ^7.0.0"
+    "astro": "^6.4.6 || ^7.0.0"
   },
   "devDependencies": {
     "@eslint/js": "^10.0.1",
     "@ianvs/prettier-plugin-sort-imports": "^4.7.1",
-    "@playwright/test": "^1.58.2",
-    "@types/node": "^22.19.15",
-    "astro": "^6.4.8",
-    "eslint": "^10.0.3",
+    "@playwright/test": "^1.63.0",
+    "@types/node": "^22.20.5",
+    "astro": "^7.3.5",
+    "eslint": "^10.11.0",
     "eslint-config-prettier": "^10.1.8",
-    "prettier": "^3.8.1",
+    "prettier": "^3.9.9",
     "prettier-plugin-astro": "^0.14.1",
+    "sharp": "^0.35.5",
     "typescript": "^5.9.3",
-    "typescript-eslint": "^8.57.0",
-    "vitest": "^4.1.0"
+    "typescript-eslint": "^8.71.0",
+    "vitest": "^4.1.11"
   },
-  "packageManager": "pnpm@10.32.1"
+  "packageManager": "pnpm@10.32.1",
+  "dependencies": {
+    "lit": "^3.3.3",
+    "schema-dts": "^2.0.0"
+  }
 }

package/src/assets/icons/LICENSE.md

@@ -0,0 +1,35 @@
+The icons in this folder are from [Phosphor Icons](https://phosphoricons.com).
+
+| File                         | Phosphor icon    | Weight  |
+| ---------------------------- | ---------------- | ------- |
+| `binoculars.svg`             | `binoculars`     | Bold    |
+| `caret-right.svg`            | `caret-right`    | Bold    |
+| `check.svg`                  | `check`          | Bold    |
+| `copy.svg`                   | `copy`           | Bold    |
+| `x.svg`                      | `x`              | Bold    |
+| `seal-check-duotone.svg`     | `seal-check`     | Duotone |
+| `seal-question-duotone.svg`  | `seal-question`  | Duotone |
+| `warning-circle-duotone.svg` | `warning-circle` | Duotone |
+| `warning-duotone.svg`        | `warning`        | Duotone |
+
+MIT License
+
+Copyright (c) 2023 Phosphor Icons
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/src/assets/icons/binoculars.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M241,150.65s0,0,0-.05a51.33,51.33,0,0,0-2.53-5.9L196.93,50.18a12,12,0,0,0-2.5-3.65,36,36,0,0,0-50.92,0A12,12,0,0,0,140,55V76H116V55a12,12,0,0,0-3.51-8.48,36,36,0,0,0-50.92,0,12,12,0,0,0-2.5,3.65L17.53,144.7A51.33,51.33,0,0,0,15,150.6s0,0,0,.05A52,52,0,1,0,116,168V100h24v68a52,52,0,1,0,101-17.35ZM80,62.28a12,12,0,0,1,12-1.22v63.15a51.9,51.9,0,0,0-35.9-7.62ZM64,196a28,28,0,1,1,28-28A28,28,0,0,1,64,196ZM164,61.06a12.06,12.06,0,0,1,12,1.22l23.87,54.31a51.9,51.9,0,0,0-35.9,7.62ZM192,196a28,28,0,1,1,28-28A28,28,0,0,1,192,196Z"/></svg>

package/src/assets/icons/caret-right.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M184.49,136.49l-80,80a12,12,0,0,1-17-17L159,128,87.51,56.49a12,12,0,1,1,17-17l80,80A12,12,0,0,1,184.49,136.49Z"/></svg>

package/src/assets/icons/check.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z"/></svg>