npm - @dumiflex/wp-kit - Versions diffs - 0.3.0 → 0.4.0 - Mend

@dumiflex/wp-kit 0.3.0 → 0.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (128) hide show

package/CHANGELOG.md +77 -51
package/LICENSE +674 -674
package/README.md +73 -76
package/package.json +78 -77
package/src/Avatar.vue +83 -83
package/src/Badge.vue +97 -97
package/src/Banner.vue +118 -118
package/src/BookmarkButton.vue +27 -27
package/src/BundleMeta.vue +51 -51
package/src/Button.vue +103 -103
package/src/Card.vue +68 -68
package/src/Checkbox.vue +109 -107
package/src/Chip.vue +163 -97
package/src/ChoiceCards.vue +133 -133
package/src/CloseButton.vue +69 -69
package/src/CodeBlock.vue +119 -119
package/src/ColorField.vue +188 -206
package/src/ColorPicker.vue +201 -201
package/src/Combobox.vue +331 -334
package/src/ConfirmDialog.vue +165 -163
package/src/ConfirmModal.vue +147 -147
package/src/ConstraintMatrixPreview.vue +708 -708
package/src/ContextMenu.vue +386 -379
package/src/CopyButton.vue +156 -156
package/src/DataTable.vue +292 -292
package/src/DatePicker.vue +234 -234
package/src/DescriptionList.vue +73 -73
package/src/DiffView.vue +68 -68
package/src/Disclosure.vue +166 -166
package/src/DragHandle.vue +49 -49
package/src/Drawer.vue +131 -131
package/src/DropZone.vue +196 -196
package/src/DropdownMenu.vue +72 -72
package/src/EmptyState.vue +111 -111
package/src/Field.vue +28 -28
package/src/HsvPicker.vue +208 -208
package/src/Icon.vue +39 -39
package/src/IconPicker.vue +209 -209
package/src/ImageGrid.vue +125 -125
package/src/InlineEdit.vue +183 -183
package/src/Input.vue +99 -99
package/src/Kbd.vue +56 -56
package/src/Lightbox.vue +173 -173
package/src/ListFilter.vue +85 -85
package/src/ListRow.vue +204 -204
package/src/LoadingMark.vue +175 -161
package/src/Logo.vue +60 -60
package/src/Modal.vue +78 -76
package/src/ModalShell.vue +109 -107
package/src/Pagination.vue +106 -106
package/src/Popover.vue +180 -171
package/src/PostCard.vue +210 -211
package/src/ProgressBar.vue +90 -90
package/src/RadioGroup.vue +177 -177
package/src/RangeSlider.vue +183 -183
package/src/RelativeDate.vue +35 -35
package/src/ResizeHandle.vue +143 -143
package/src/SearchInput.vue +192 -199
package/src/Select.vue +644 -641
package/src/Separator.vue +54 -54
package/src/Skeleton.vue +82 -82
package/src/Slider.vue +198 -198
package/src/SortableList.vue +260 -260
package/src/SplitPane.vue +68 -68
package/src/StarButton.vue +40 -40
package/src/Stepper.vue +141 -141
package/src/SupportLinks.vue +93 -93
package/src/TagInput.vue +297 -300
package/src/Textarea.vue +57 -57
package/src/Timeline.vue +92 -92
package/src/ToastCard.vue +119 -119
package/src/ToastHost.vue +40 -40
package/src/Toggle.vue +36 -36
package/src/TokenizedValue.vue +310 -310
package/src/Toolbar.vue +110 -110
package/src/VirtualList.vue +87 -87
package/src/VisuallyHidden.vue +29 -29
package/src/WpButton.vue +75 -75
package/src/WpCheck.vue +104 -102
package/src/WpIconButton.vue +107 -107
package/src/WpImageZoom.vue +544 -544
package/src/WpNumber.vue +178 -183
package/src/WpSegmented.vue +175 -175
package/src/WpSelect.vue +93 -89
package/src/WpSwitch.vue +163 -163
package/src/WpTabs.vue +188 -188
package/src/_modal-motion.css +33 -33
package/src/_skeleton.css +50 -50
package/src/axis-color.ts +42 -42
package/src/button.css +169 -169
package/src/calendar.ts +59 -59
package/src/clipboard.ts +50 -50
package/src/colour-presets.ts +12 -12
package/src/diff.ts +51 -51
package/src/drop-zone.ts +41 -41
package/src/field.css +50 -0
package/src/flip.ts +237 -237
package/src/floating-layer.ts +48 -0
package/src/floating.ts +99 -99
package/src/hsv.ts +100 -100
package/src/icon-catalog.ts +52 -52
package/src/image-zoom.ts +93 -93
package/src/kind-colour.ts +28 -0
package/src/logo-paths.ts +21 -21
package/src/matrix-axis.ts +91 -91
package/src/pagination.ts +27 -27
package/src/platform-keys.ts +29 -29
package/src/rich-tokenize.ts +357 -357
package/src/select-types.ts +32 -32
package/src/slider-math.ts +45 -45
package/src/sortable.ts +22 -22
package/src/theme/fonts/OFL-Fraunces.txt +93 -93
package/src/theme/fonts/OFL-JetBrainsMono.txt +93 -93
package/src/theme/fonts/OFL-Manrope.txt +93 -93
package/src/theme/looks.css +428 -428
package/src/theme/palettes.css +254 -254
package/src/theme/tokens.css +2896 -2894
package/src/tokens.ts +56 -56
package/src/tooltip.css +43 -43
package/src/tooltip.ts +146 -146
package/src/useDialogFocus.ts +73 -73
package/src/useGrowableField.ts +357 -357
package/src/useModalKeyShield.ts +116 -116
package/src/useToast.ts +48 -48
package/src/wp-logo.svg +14 -14
package/src/ChipToggle.vue +0 -92
package/src/KindChip.vue +0 -53
package/src/RatingBadge.vue +0 -42

package/README.md CHANGED Viewed

@@ -1,76 +1,73 @@
-# wp-kit
-The Vue 3 component kit shared by the [Wildcard Pipeline](https://github.com/DumiFlex/ComfyUI-Wildcard-Pipeline) extension (its manager and canvas widgets) and the [Wildcard Pipeline Community](https://github.com/DumiFlex/Wildcard-Pipeline-Community) site.
-Buttons, inputs, selects, checkboxes and toggles, cards, chips, tables, modals, drawers and confirm dialogs, overlays (Popover, DropdownMenu, ContextMenu, tooltip), tabs, sliders, tag, date, colour and icon pickers, lists, image grid and lightbox, toasts, diff and code views, and the logo. And the theme they wear: the design tokens, six colour palettes and seven looks in `src/theme/`.
-Every piece uses CSS custom properties, so it takes on the colours, corners and type of whichever app it sits in.
-**See every piece live:** [dumiflex.github.io/wp-kit](https://dumiflex.github.io/wp-kit/), with a switcher for the palette, the look and light or dark.
-## Install
-The kit is on npm as [`@dumiflex/wp-kit`](https://www.npmjs.com/package/@dumiflex/wp-kit). It ships its source (`.vue`, `.ts` and the theme CSS) with no build step, so your Vite app compiles the pieces it imports with its own Vue plugin:
-```bash
-pnpm add @dumiflex/wp-kit vue primeicons
-```
-```ts
-import Button from "@dumiflex/wp-kit/Button.vue";
-import { SHARED_TOKENS } from "@dumiflex/wp-kit/tokens.ts";
-import "@dumiflex/wp-kit/theme/tokens.css";
-```
-Import one file at a time (there is no barrel file, on purpose), so the bundler ships only what you use. In `vite.config`, set `resolve.dedupe: ["vue"]` (one Vue, not the app's and a second one) and `optimizeDeps.exclude: ["@dumiflex/wp-kit"]` (the `.vue` sources go through your Vue plugin, not the pre-bundler). An app that already imports the kit as `@/kit/...` can keep that by aliasing `@/kit` to `node_modules/@dumiflex/wp-kit/src`.
-Each release is staged on npm by the release workflow (trusted publishing, with provenance) and goes live once a maintainer approves it.
-### Apps that copy the kit
-The Wildcard Pipeline apps still copy `src/` in at a release tag until they move to the package:
-```bash
-node scripts/kit-pull.mjs v0.2.1   # in the app repo
-```
-The app's script downloads that tag, copies `src/` into the app's kit folder, and writes the tag and commit next to it. A CI check (`kit-pull.mjs --check`) fails when the copy no longer matches what was pulled, so a fix to a kit piece is made here, released, and pulled into the apps in an ordinary PR.
-## What a host must provide
-- **Vue 3.5** and **PrimeIcons 7** (peer dependencies; icons are `pi pi-*` classes). The kit imports nothing else at runtime.
-- **A theme.** A page app loads the kit's own: `theme/tokens.css`, then `theme/palettes.css` and `theme/looks.css`, and `button.css`. It sets `data-wp-palette`, `data-wp-look` and `wp-theme-light` on `<html>` to switch them (see [docs/tokens.md](docs/tokens.md)). A host with its own colour sheet (the ComfyUI canvas) defines the names in `SHARED_TOKENS` ([`src/tokens.ts`](src/tokens.ts)) instead, and uses only the pieces that read nothing else.
-- **`button.css`** loaded once globally if the app uses the `.wp-btn` classes on plain elements. `WpButton` pulls it in on its own.
-## Rules for a piece
-- Reads only the shared token names, or, for a piece listed in `PAGE_PIECES`, names `src/theme/` defines (`src/tokens.test.ts` fails otherwise).
-- Every class starts with `wp-`.
-- Fixed corners are `min(Npx, var(--wp-radius-cap, 999px))`, pills `var(--wp-radius-cap, 999px)`, so a host's look can square them off.
-- Props use the shared names `size` / `variant` / `tone` / `v-model:open`; heights come from `--wp-control-h-sm|md|lg` (24 / 32 / 40 px).
-- Overlays place themselves through `floating.ts` and handle Escape, Tab and focus return through `useDialogFocus`.
-- No app code: no stores, routers, ComfyUI globals or `@/` imports. A piece only imports `vue` and other kit files.
-Every piece has an entry and a demo on the site (`site/src/registry.ts` + `site/src/demos/<id>.vue`); `site/src/coverage.test.ts` fails when one is missing. The longer component standard lives in the extension repo: `docs/component-standard.md`.
-## Develop
-```bash
-pnpm install
-pnpm lint
-pnpm typecheck
-pnpm test
-pnpm site:dev     # the showcase site on localhost
-pnpm site:build   # site/dist, what Pages serves
-pnpm check-package  # what npm would publish: the files apps import, nothing repo-only
-```
-Node 22+ and pnpm 9. The site lives in `site/` (outside `src/`, so the apps never copy it). It is deployed to GitHub Pages by `.github/workflows/site.yml` on every release and on "Run workflow"; CI builds it on every PR.
-## Versions and releases
-Commits and PR titles follow [Conventional Commits](https://www.conventionalcommits.org/) (`feat:`, `fix:`, `refactor:` …); the `pr-title` check enforces it. Work goes into `dev` by squash-merged PRs. Merging `dev` into `main` ships: release-please opens a release PR with the next version and `CHANGELOG.md`, it merges itself once CI passes, and the `vX.Y.Z` tag it makes is what the apps pull. While the kit is below 1.0, a `feat` bumps the minor version and a `fix` the patch.
-## License
-[GPL-3.0-or-later](LICENSE). Copyright (C) 2026 DumiFlex.
+# @dumiflex/wp-kit
+[![npm](https://img.shields.io/npm/v/@dumiflex/wp-kit?logo=npm&label=npm)](https://www.npmjs.com/package/@dumiflex/wp-kit)
+[![Vue 3](https://img.shields.io/badge/Vue-3-42b883?logo=vuedotjs&logoColor=white)](https://vuejs.org/)
+[![TypeScript](https://img.shields.io/badge/TypeScript-strict-3178c6?logo=typescript&logoColor=white)](https://www.typescriptlang.org/)
+[![License: GPL-3.0-or-later](https://img.shields.io/npm/l/@dumiflex/wp-kit)](https://github.com/DumiFlex/wp-kit/blob/main/LICENSE)
+A Vue 3 component kit with its own theme: buttons, fields, selects, checkboxes, switches, chips, cards, tables, dialogs, drawers, popovers, menus, tooltips, tabs, sliders, colour, date and icon pickers, lists, toasts, code and diff views. The theme is design tokens, six colour palettes and seven looks (corners, type, borders). It was built for [Wildcard Pipeline](https://github.com/DumiFlex/ComfyUI-Wildcard-Pipeline), a ComfyUI extension, and works in any Vue 3 + Vite app.
+Every piece reads CSS custom properties, so it takes on the colours, corners and type of the app it sits in.
+**See every piece live, with when to use it:** [dumiflex.github.io/wp-kit](https://dumiflex.github.io/wp-kit/). The site has a switcher for the palette, the look and light or dark.
+## Install
+```bash
+npm install @dumiflex/wp-kit vue primeicons
+# or: pnpm add @dumiflex/wp-kit vue primeicons
+```
+The package ships source (`.vue`, `.ts` and CSS) with no build step, and your Vite app compiles the pieces it imports. In `vite.config`:
+```ts
+export default defineConfig({
+  plugins: [vue()],
+  resolve: { dedupe: ["vue"] },                     // one Vue, yours
+  optimizeDeps: { exclude: ["@dumiflex/wp-kit"] },  // .vue files go through your Vue plugin
+});
+```
+## Use
+Import one file at a time. There is no barrel file, so the bundler only ships what you use:
+```ts
+import "primeicons/primeicons.css";
+import "@dumiflex/wp-kit/theme/tokens.css";
+import "@dumiflex/wp-kit/theme/palettes.css";
+import "@dumiflex/wp-kit/theme/looks.css";
+import "@dumiflex/wp-kit/button.css";
+import Button from "@dumiflex/wp-kit/Button.vue";
+import Chip from "@dumiflex/wp-kit/Chip.vue";
+```
+```vue
+<Button variant="primary" icon="pi-plus" @click="add">Add</Button>
+<Chip tone="warn" icon="pi-exclamation-triangle">2 conflicts</Chip>
+<Chip :pressed="tag === 'portrait'" :count="12" size="sm" @click="tag = 'portrait'">portrait</Chip>
+```
+Pick a palette and a look on `<html>`: `data-wp-palette="…"`, `data-wp-look="…"`, and the class `wp-theme-light` for light mode. The site lists them all and shows each piece's props and an example.
+If you already import the kit as `@/kit/...`, alias `@/kit` to `node_modules/@dumiflex/wp-kit/src`.
+## What your app provides
+- **Vue 3.5** and **PrimeIcons 7** (peer dependencies). Icons are `pi pi-*` classes. The kit imports nothing else at runtime.
+- **A theme:** the kit's own sheets above. A host with its own colour sheet can define the names in [`SHARED_TOKENS`](https://github.com/DumiFlex/wp-kit/blob/main/src/tokens.ts) instead and use the pieces that read only those.
+## Versions
+[Semantic versioning](https://semver.org/). Below 1.0, a minor version can break: read the [changelog](https://github.com/DumiFlex/wp-kit/blob/main/CHANGELOG.md) before you bump. Each release is published from CI with provenance.
+## Links
+- [Live components](https://dumiflex.github.io/wp-kit/)
+- [Source and issues](https://github.com/DumiFlex/wp-kit)
+- [Changelog](https://github.com/DumiFlex/wp-kit/blob/main/CHANGELOG.md)
+## License
+[GPL-3.0-or-later](https://github.com/DumiFlex/wp-kit/blob/main/LICENSE). Copyright (C) 2026 DumiFlex.

package/package.json CHANGED Viewed

@@ -1,77 +1,78 @@
-{
-  "name": "@dumiflex/wp-kit",
-  "version": "0.3.0",
-  "description": "Vue 3 component kit shared by the Wildcard Pipeline manager, canvas and community site.",
-  "keywords": [
-    "vue",
-    "vue3",
-    "components",
-    "design-tokens",
-    "comfyui",
-    "wildcard-pipeline"
-  ],
-  "homepage": "https://dumiflex.github.io/wp-kit/",
-  "bugs": {
-    "url": "https://github.com/DumiFlex/wp-kit/issues"
-  },
-  "license": "GPL-3.0-or-later",
-  "type": "module",
-  "files": [
-    "src",
-    "!src/**/__tests__",
-    "!src/**/*.test.ts",
-    "CHANGELOG.md"
-  ],
-  "exports": {
-    "./package.json": "./package.json",
-    "./*": "./src/*"
-  },
-  "sideEffects": [
-    "**/*.css",
-    "**/*.vue"
-  ],
-  "publishConfig": {
-    "access": "public"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/DumiFlex/wp-kit.git"
-  },
-  "packageManager": "pnpm@9.12.0",
-  "engines": {
-    "node": ">=22"
-  },
-  "scripts": {
-    "lint": "eslint .",
-    "typecheck": "vue-tsc --noEmit",
-    "test": "vitest run",
-    "test:watch": "vitest",
-    "site:dev": "vite --config site/vite.config.ts",
-    "site:build": "vite build --config site/vite.config.ts",
-    "site:preview": "vite preview --config site/vite.config.ts",
-    "check-package": "node scripts/check-package.mjs"
-  },
-  "peerDependencies": {
-    "vue": "^3.5.0",
-    "primeicons": "^7.0.0 || ^8.0.0"
-  },
-  "devDependencies": {
-    "@types/node": "^22.10.0",
-    "@typescript-eslint/eslint-plugin": "8.59.0",
-    "@typescript-eslint/parser": "8.59.0",
-    "@vitejs/plugin-vue": "5.2.4",
-    "@vue/test-utils": "2.4.8",
-    "@vue/tsconfig": "0.5.1",
-    "eslint": "9.39.4",
-    "eslint-plugin-vue": "9.33.0",
-    "eslint-plugin-vuejs-accessibility": "^2.5.0",
-    "jsdom": "29.0.2",
-    "primeicons": "7.0.0",
-    "typescript": "5.9.3",
-    "vite": "5.4.21",
-    "vitest": "2.1.9",
-    "vue": "3.5.44",
-    "vue-eslint-parser": "10.4.0",
-    "vue-tsc": "2.2.12"
-  }
-}
+{
+  "name": "@dumiflex/wp-kit",
+  "version": "0.4.0",
+  "description": "Vue 3 component kit shared by the Wildcard Pipeline manager, canvas and community site.",
+  "keywords": [
+    "vue",
+    "vue3",
+    "components",
+    "design-tokens",
+    "comfyui",
+    "wildcard-pipeline"
+  ],
+  "homepage": "https://dumiflex.github.io/wp-kit/",
+  "bugs": {
+    "url": "https://github.com/DumiFlex/wp-kit/issues"
+  },
+  "license": "GPL-3.0-or-later",
+  "type": "module",
+  "files": [
+    "src",
+    "!src/**/__tests__",
+    "!src/**/*.test.ts",
+    "CHANGELOG.md"
+  ],
+  "exports": {
+    "./package.json": "./package.json",
+    "./*": "./src/*"
+  },
+  "sideEffects": [
+    "**/*.css",
+    "**/*.vue"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/DumiFlex/wp-kit.git"
+  },
+  "packageManager": "pnpm@9.12.0",
+  "engines": {
+    "node": ">=22"
+  },
+  "scripts": {
+    "lint": "eslint .",
+    "typecheck": "vue-tsc --noEmit",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "site:dev": "vite --config site/vite.config.ts",
+    "site:build": "vite build --config site/vite.config.ts",
+    "site:preview": "vite preview --config site/vite.config.ts",
+    "check-package": "node scripts/npm-readme.mjs --check && node scripts/check-package.mjs",
+    "npm-readme": "node scripts/npm-readme.mjs"
+  },
+  "peerDependencies": {
+    "vue": "^3.5.0",
+    "primeicons": "^7.0.0 || ^8.0.0"
+  },
+  "devDependencies": {
+    "@types/node": "^22.10.0",
+    "@typescript-eslint/eslint-plugin": "8.59.0",
+    "@typescript-eslint/parser": "8.59.0",
+    "@vitejs/plugin-vue": "5.2.4",
+    "@vue/test-utils": "2.4.8",
+    "@vue/tsconfig": "0.5.1",
+    "eslint": "9.39.4",
+    "eslint-plugin-vue": "9.33.0",
+    "eslint-plugin-vuejs-accessibility": "^2.5.0",
+    "jsdom": "29.0.2",
+    "primeicons": "7.0.0",
+    "typescript": "5.9.3",
+    "vite": "5.4.21",
+    "vitest": "2.1.9",
+    "vue": "3.5.44",
+    "vue-eslint-parser": "10.4.0",
+    "vue-tsc": "2.2.12"
+  }
+}

package/src/Avatar.vue CHANGED Viewed

@@ -1,83 +1,83 @@
-<script setup lang="ts">
-/**
- * Avatar: a person's picture, or their initials on a colour picked from
- * their name when there is no picture (or it fails to load). For community
- * authors, chat participants and history entries. Works on the canvas and
- * in the manager.
- *
- *   <Avatar name="Dumi Flex" :src="author.avatar_url" />
- *   <Avatar name="Pack bot" icon="pi-box" size="sm" />
- *
- * The name is the image's alt text; with `decorative` (the name is already
- * written beside it) screen readers skip it.
- */
-import { computed, ref, watch } from "vue";
-const props = withDefaults(defineProps<{
-  name: string;
-  src?: string | null | undefined;
-  /** A PrimeIcons class to draw instead of initials. */
-  icon?: string | undefined;
-  size?: "sm" | "md" | "lg" | undefined;
-  shape?: "circle" | "square" | undefined;
-  /** The name is written next to it already. */
-  decorative?: boolean | undefined;
-}>(), { src: null, icon: undefined, size: "md", shape: "circle" });
-const failed = ref(false);
-watch(() => props.src, () => { failed.value = false; });
-const initials = computed(() => {
-  const words = props.name.trim().split(/\s+/).filter(Boolean);
-  if (!words.length) return "?";
-  const first = [...words[0]][0] ?? "";
-  const last = words.length > 1 ? [...words[words.length - 1]][0] ?? "" : "";
-  return (first + last).toUpperCase();
-});
-const HUES = [
-  "var(--wp-var-1)", "var(--wp-var-2)", "var(--wp-var-3)", "var(--wp-var-4)",
-  "var(--wp-var-5)", "var(--wp-var-6)", "var(--wp-var-7)", "var(--wp-var-8)",
-];
-/** One of the eight variable colours, the same for the same name every time. */
-const hue = computed(() => {
-  let h = 0;
-  for (const ch of props.name) h = (h * 31 + (ch.codePointAt(0) ?? 0)) >>> 0;
-  return HUES[h % 8];
-});
-</script>
-<template>
-  <span
-    class="wp-avatar"
-    :data-size="size"
-    :data-shape="shape"
-    :style="{ '--_hue': hue }"
-    :role="decorative ? undefined : 'img'"
-    :aria-label="decorative ? undefined : name"
-    :aria-hidden="decorative ? 'true' : undefined"
-  >
-    <img v-if="src && !failed" class="wp-avatar__img" :src="src" alt="" @error="failed = true">
-    <i v-else-if="icon" class="pi wp-avatar__icon" :class="icon" aria-hidden="true" />
-    <span v-else class="wp-avatar__initials" aria-hidden="true">{{ initials }}</span>
-  </span>
-</template>
-<style scoped>
-.wp-avatar {
-  --_s: var(--wp-control-h-md);
-  position: relative; display: inline-grid; place-items: center; flex: none; overflow: hidden;
-  width: var(--_s); height: var(--_s); border-radius: 50%; /* round: avatar */
-  background: color-mix(in srgb, var(--_hue) 22%, var(--wp-bg-2));
-  color: color-mix(in srgb, var(--_hue) 70%, var(--wp-text));
-  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--_hue) 30%, transparent);
-  font: 600 calc(var(--_s) * 0.4)/1 var(--wp-font-sans); letter-spacing: 0.02em; user-select: none;
-}
-.wp-avatar[data-size="sm"] { --_s: var(--wp-control-h-sm); }
-.wp-avatar[data-size="lg"] { --_s: var(--wp-control-h-lg); }
-.wp-avatar[data-shape="square"] { border-radius: var(--wp-radius); }
-.wp-avatar[data-size="sm"][data-shape="square"] { border-radius: var(--wp-radius-sm); }
-.wp-avatar__img { width: 100%; height: 100%; object-fit: cover; }
-.wp-avatar__icon { font-size: calc(var(--_s) * 0.45); }
-</style>
+<script setup lang="ts">
+/**
+ * Avatar: a person's picture, or their initials on a colour picked from
+ * their name when there is no picture (or it fails to load). For community
+ * authors, chat participants and history entries. Works on the canvas and
+ * in the manager.
+ *
+ *   <Avatar name="Dumi Flex" :src="author.avatar_url" />
+ *   <Avatar name="Pack bot" icon="pi-box" size="sm" />
+ *
+ * The name is the image's alt text; with `decorative` (the name is already
+ * written beside it) screen readers skip it.
+ */
+import { computed, ref, watch } from "vue";
+const props = withDefaults(defineProps<{
+  name: string;
+  src?: string | null | undefined;
+  /** A PrimeIcons class to draw instead of initials. */
+  icon?: string | undefined;
+  size?: "sm" | "md" | "lg" | undefined;
+  shape?: "circle" | "square" | undefined;
+  /** The name is written next to it already. */
+  decorative?: boolean | undefined;
+}>(), { src: null, icon: undefined, size: "md", shape: "circle" });
+const failed = ref(false);
+watch(() => props.src, () => { failed.value = false; });
+const initials = computed(() => {
+  const words = props.name.trim().split(/\s+/).filter(Boolean);
+  if (!words.length) return "?";
+  const first = [...words[0]][0] ?? "";
+  const last = words.length > 1 ? [...words[words.length - 1]][0] ?? "" : "";
+  return (first + last).toUpperCase();
+});
+const HUES = [
+  "var(--wp-var-1)", "var(--wp-var-2)", "var(--wp-var-3)", "var(--wp-var-4)",
+  "var(--wp-var-5)", "var(--wp-var-6)", "var(--wp-var-7)", "var(--wp-var-8)",
+];
+/** One of the eight variable colours, the same for the same name every time. */
+const hue = computed(() => {
+  let h = 0;
+  for (const ch of props.name) h = (h * 31 + (ch.codePointAt(0) ?? 0)) >>> 0;
+  return HUES[h % 8];
+});
+</script>
+<template>
+  <span
+    class="wp-avatar"
+    :data-size="size"
+    :data-shape="shape"
+    :style="{ '--_hue': hue }"
+    :role="decorative ? undefined : 'img'"
+    :aria-label="decorative ? undefined : name"
+    :aria-hidden="decorative ? 'true' : undefined"
+  >
+    <img v-if="src && !failed" class="wp-avatar__img" :src="src" alt="" @error="failed = true">
+    <i v-else-if="icon" class="pi wp-avatar__icon" :class="icon" aria-hidden="true" />
+    <span v-else class="wp-avatar__initials" aria-hidden="true">{{ initials }}</span>
+  </span>
+</template>
+<style scoped>
+.wp-avatar {
+  --_s: var(--wp-control-h-md);
+  position: relative; display: inline-grid; place-items: center; flex: none; overflow: hidden;
+  width: var(--_s); height: var(--_s); border-radius: 50%; /* round: avatar */
+  background: color-mix(in srgb, var(--_hue) 22%, var(--wp-bg-2));
+  color: color-mix(in srgb, var(--_hue) 70%, var(--wp-text));
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--_hue) 30%, transparent);
+  font: 600 calc(var(--_s) * 0.4)/1 var(--wp-font-sans); letter-spacing: 0.02em; user-select: none;
+}
+.wp-avatar[data-size="sm"] { --_s: var(--wp-control-h-sm); }
+.wp-avatar[data-size="lg"] { --_s: var(--wp-control-h-lg); }
+.wp-avatar[data-shape="square"] { border-radius: var(--wp-radius); }
+.wp-avatar[data-size="sm"][data-shape="square"] { border-radius: var(--wp-radius-sm); }
+.wp-avatar__img { width: 100%; height: 100%; object-fit: cover; }
+.wp-avatar__icon { font-size: calc(var(--_s) * 0.45); }
+</style>