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

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

package/README.md CHANGED Viewed

@@ -1,3 +1,76 @@
-# Temporary Holding Version
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+# 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.

package/package.json CHANGED Viewed

@@ -1,6 +1,77 @@
-{
-  "name": "@dumiflex/wp-kit",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+{
+  "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"
+  }
+}

package/src/Avatar.vue ADDED Viewed

@@ -0,0 +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>

package/src/Badge.vue ADDED Viewed

@@ -0,0 +1,97 @@
+<script setup lang="ts">
+/**
+ * Badge: a count bubble or a status dot. On its own it sits in the line of
+ * text; wrapped around something (a button, an icon, an avatar) it sits on
+ * that thing's top-right corner. Works on the canvas and in the manager.
+ *
+ *   <Badge :count="3" tone="danger" label="3 conflicts"><Button icon="pi-bell" aria-label="Problems" /></Badge>
+ *   <Badge dot tone="success" text="Running" />
+ *   <Badge dot tone="warn" label="Out of date" />
+ *
+ * Colour is never the only signal: a dot without `text` needs a `label`,
+ * which screen readers read in its place. Counts over `max` read
+ * "99+". A count of 0 hides the badge unless `show-zero`.
+ */
+import { computed, useSlots } from "vue";
+const props = withDefaults(defineProps<{
+  count?: number | undefined;
+  /** Counts above this read "max+". */
+  max?: number | undefined;
+  /** A dot instead of a number. */
+  dot?: boolean | undefined;
+  tone?: "neutral" | "info" | "success" | "warn" | "danger" | "accent" | undefined;
+  /** Visible text after the dot or count (a status line). */
+  text?: string | undefined;
+  /** Name for screen readers when the badge has no text, e.g. "3 conflicts". */
+  label?: string | undefined;
+  /** Show a count of 0 instead of hiding the badge. */
+  showZero?: boolean | undefined;
+  /** Draw the dot as a soft pulse (something is running). */
+  pulse?: boolean | undefined;
+}>(), { count: undefined, max: 99, tone: "accent", text: undefined, label: undefined });
+const slots = useSlots();
+const anchored = computed(() => !!slots.default);
+const shown = computed(() => props.dot || (props.count !== undefined && (props.count > 0 || props.showZero)));
+const countText = computed(() =>
+  props.count === undefined ? "" : props.count > props.max ? `${props.max}+` : String(props.count),
+);
+</script>
+<template>
+  <span v-if="anchored" class="wp-badge-anchor">
+    <slot />
+    <span v-if="shown" class="wp-badge wp-badge--corner" :data-tone="tone" :data-dot="dot || undefined" :data-pulse="pulse || undefined" aria-hidden="true"><template v-if="!dot">{{ countText }}</template></span>
+    <span v-if="shown && (label || countText)" class="wp-badge__sr">{{ label ?? countText }}</span>
+  </span>
+  <span v-else-if="shown || text" class="wp-badge-line" :data-tone="tone">
+    <span v-if="shown" class="wp-badge" :data-tone="tone" :data-dot="dot || undefined" :data-pulse="pulse || undefined" aria-hidden="true"><template v-if="!dot">{{ countText }}</template></span>
+    <span v-if="!text && (label || countText)" class="wp-badge__sr">{{ label ?? countText }}</span>
+    <span v-if="text" class="wp-badge-line__text">{{ text }}</span>
+  </span>
+</template>
+<style scoped>
+.wp-badge-anchor { position: relative; display: inline-flex; }
+.wp-badge__sr {
+  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
+  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
+}
+.wp-badge-line {
+  display: inline-flex; align-items: center; gap: var(--wp-space-2); min-width: 0;
+  color: var(--wp-text-muted); font: 500 var(--wp-text-xs)/1.2 var(--wp-font-sans);
+}
+.wp-badge-line__text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.wp-badge {
+  --_tone: var(--wp-accent);
+  display: inline-grid; place-items: center; flex: none; box-sizing: border-box;
+  min-width: 18px; height: 18px; padding: 0 5px;
+  border-radius: var(--wp-radius-cap, 999px); background: var(--_tone); color: var(--wp-bg);
+  font: 600 10.5px/1 var(--wp-font-sans); font-variant-numeric: tabular-nums;
+}
+.wp-badge[data-tone="neutral"] { --_tone: var(--wp-text-dim); }
+.wp-badge[data-tone="info"] { --_tone: var(--wp-info); }
+.wp-badge[data-tone="success"] { --_tone: var(--wp-success); }
+.wp-badge[data-tone="warn"] { --_tone: var(--wp-warn); }
+.wp-badge[data-tone="danger"] { --_tone: var(--wp-danger); }
+.wp-badge[data-dot] { min-width: 0; width: 8px; height: 8px; padding: 0; }
+.wp-badge--corner {
+  position: absolute; top: 0; right: 0; transform: translate(40%, -40%);
+  box-shadow: 0 0 0 2px var(--wp-bg-1); pointer-events: none;
+}
+.wp-badge--corner[data-dot] { transform: translate(25%, -25%); }
+.wp-badge[data-pulse]::after {
+  content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--_tone);
+  animation: wp-badge-pulse 1.6s ease-out infinite;
+}
+.wp-badge[data-pulse] { position: relative; }
+.wp-badge--corner[data-pulse] { position: absolute; }
+@keyframes wp-badge-pulse {
+  from { opacity: 0.6; transform: scale(1); }
+  to { opacity: 0; transform: scale(2.4); }
+}
+@media (prefers-reduced-motion: reduce) {
+  .wp-badge[data-pulse]::after { animation: none; display: none; }
+}
+</style>

package/src/Banner.vue ADDED Viewed

@@ -0,0 +1,118 @@
+<script setup lang="ts">
+/**
+ * Banner: an inline message in a tone, with an optional title, actions and
+ * a close button. It sits in the flow of the page (not floating), above or
+ * inside whatever it talks about. Works on the canvas and in the manager.
+ *
+ *   <Banner tone="warn" title="2 modules are out of date">
+ *     Update them before you publish.
+ *     <template #actions><Button size="sm">Update</Button></template>
+ *   </Banner>
+ *
+ * A danger banner is announced at once (`role="alert"`); the others are
+ * read politely (`role="status"`). Neither takes focus. `note` is for text
+ * that is part of the page (a docs tip): `role="note"`, never announced.
+ */
+import { computed, useSlots } from "vue";
+import CloseButton from "./CloseButton.vue";
+export type BannerTone = "neutral" | "info" | "success" | "warn" | "danger" | "accent";
+const TONE_ICON: Record<BannerTone, string> = {
+  neutral: "pi-info-circle",
+  info: "pi-info-circle",
+  success: "pi-check-circle",
+  warn: "pi-exclamation-triangle",
+  danger: "pi-times-circle",
+  accent: "pi-sparkles",
+};
+const props = withDefaults(defineProps<{
+  tone?: BannerTone | undefined;
+  title?: string | undefined;
+  /** A PrimeIcons class to use instead of the tone's icon; `""` for none. */
+  icon?: string | undefined;
+  size?: "sm" | "md" | undefined;
+  /** Show a close button; it emits `dismiss`. */
+  dismissible?: boolean | undefined;
+  /** The close button's name. */
+  dismissLabel?: string | undefined;
+  /** Part of the page, not news: `role="note"` instead of a live region. */
+  note?: boolean | undefined;
+}>(), { tone: "info", size: "md", icon: undefined, dismissLabel: "Dismiss" });
+const emit = defineEmits<{ (e: "dismiss"): void }>();
+const slots = useSlots();
+const iconClass = computed(() => props.icon ?? TONE_ICON[props.tone]);
+</script>
+<template>
+  <div
+    class="wp-banner"
+    :data-tone="tone"
+    :data-size="size"
+    :role="note ? 'note' : tone === 'danger' ? 'alert' : 'status'"
+  >
+    <i v-if="iconClass" class="pi wp-banner__icon" :class="iconClass" aria-hidden="true" />
+    <div class="wp-banner__body">
+      <p v-if="title" class="wp-banner__title">{{ title }}</p>
+      <div v-if="slots.default" class="wp-banner__text"><slot /></div>
+    </div>
+    <div v-if="slots.actions" class="wp-banner__actions"><slot name="actions" /></div>
+    <CloseButton
+      v-if="dismissible"
+      class="wp-banner__close"
+      size="sm"
+      :label="dismissLabel"
+      @click="emit('dismiss')"
+    />
+  </div>
+</template>
+<style scoped>
+.wp-banner {
+  --_banner-tone: var(--wp-info);
+  display: flex;
+  align-items: flex-start;
+  gap: var(--wp-space-4);
+  min-width: 0;
+  padding: var(--wp-space-4) var(--wp-space-5);
+  border: 1px solid color-mix(in srgb, var(--_banner-tone) 38%, var(--wp-border));
+  border-radius: var(--wp-radius-md);
+  background: color-mix(in srgb, var(--_banner-tone) 10%, var(--wp-bg-1));
+  color: var(--wp-text);
+  font: 400 var(--wp-text-sm)/1.45 var(--wp-font-sans);
+}
+.wp-banner[data-tone="neutral"] { --_banner-tone: var(--wp-text-muted); }
+.wp-banner[data-tone="success"] { --_banner-tone: var(--wp-success); }
+.wp-banner[data-tone="warn"] { --_banner-tone: var(--wp-warn); }
+.wp-banner[data-tone="danger"] { --_banner-tone: var(--wp-danger); }
+.wp-banner[data-tone="accent"] { --_banner-tone: var(--wp-accent-500); }
+.wp-banner[data-size="sm"] {
+  gap: var(--wp-space-3);
+  padding: var(--wp-space-3) var(--wp-space-4);
+  border-radius: var(--wp-radius);
+  font-size: var(--wp-text-xs);
+}
+.wp-banner__icon {
+  flex: none;
+  /* Centre the icon on the first line of text. */
+  line-height: 1.45;
+  font-size: 1.1em;
+  color: var(--_banner-tone);
+}
+.wp-banner[data-tone="accent"] .wp-banner__icon { color: var(--wp-accent-text); }
+.wp-banner__body { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
+.wp-banner__title { margin: 0; font-weight: 600; }
+.wp-banner__text { color: var(--wp-text-muted); overflow-wrap: anywhere; }
+.wp-banner__body > .wp-banner__text:only-child { color: var(--wp-text); }
+.wp-banner__text :deep(p) { margin: 0; }
+.wp-banner__text :deep(p + p) { margin-top: var(--wp-space-2); }
+.wp-banner__actions { display: inline-flex; align-items: center; gap: var(--wp-space-3); flex: none; align-self: center; }
+.wp-banner__close { flex: none; margin: -2px calc(var(--wp-space-2) * -1) -2px 0; }
+@media (max-width: 520px) {
+  .wp-banner { flex-wrap: wrap; }
+  .wp-banner__actions { order: 3; width: 100%; padding-left: calc(1.1em + var(--wp-space-4)); }
+}
+</style>

package/src/BookmarkButton.vue ADDED Viewed

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+/**
+ * Bookmark a post: a toggle Button with a filled bookmark when on. The app
+ * owns the request; this only shows the state and emits `toggle`.
+ *
+ *   <BookmarkButton :bookmarked="post.bookmarked_by_me" :disabled="pending" @toggle="bookmark" />
+ */
+import Button from "./Button.vue";
+withDefaults(defineProps<{
+  bookmarked: boolean;
+  disabled?: boolean | undefined;
+  size?: "sm" | "md" | "lg" | undefined;
+}>(), { disabled: false, size: "md" });
+const emit = defineEmits<{ (e: "toggle"): void }>();
+</script>
+<template>
+  <Button
+    :icon="bookmarked ? 'bookmark-fill' : 'bookmark'"
+    :pressed="bookmarked"
+    :disabled="disabled"
+    :size="size"
+    @click="emit('toggle')"
+  >{{ bookmarked ? "Bookmarked" : "Bookmark" }}</Button>
+</template>

package/src/BundleMeta.vue ADDED Viewed

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+/**
+ * One line saying what a bundle holds: a box mark, "3 modules" and their
+ * names joined by middots.
+ *
+ *   <BundleMeta :count="3" :names="['palette', 'mood', 'style']" />
+ */
+import Icon from "./Icon.vue";
+defineProps<{
+  count: number;
+  names?: string[] | undefined;
+}>();
+</script>
+<template>
+  <div class="wp-bundle-meta">
+    <span class="wp-bundle-meta__icon" aria-hidden="true"><Icon name="box" :size="10" /></span>
+    <span class="wp-bundle-meta__text">
+      <span class="wp-bundle-meta__count">{{ count }} {{ count === 1 ? "module" : "modules" }}</span>
+      <template v-for="(n, i) in names ?? []" :key="i">
+        <span class="wp-bundle-meta__sep">·</span>{{ n }}
+      </template>
+    </span>
+  </div>
+</template>
+<style scoped>
+.wp-bundle-meta {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  font-family: var(--wp-font-mono);
+  font-size: 11.5px;
+  line-height: 1.5;
+  color: var(--wp-text-dim);
+}
+.wp-bundle-meta__icon {
+  display: inline-grid;
+  place-items: center;
+  flex-shrink: 0;
+  width: 18px;
+  height: 18px;
+  border-radius: min(4px, var(--wp-radius-cap, 999px));
+  background: color-mix(in oklab, var(--wp-bundle-default) 18%, transparent);
+  color: var(--wp-text-muted);
+}
+.wp-bundle-meta__text { flex: 1; min-width: 0; word-break: break-word; }
+.wp-bundle-meta__count { color: var(--wp-text); font-weight: 500; }
+.wp-bundle-meta__sep { margin: 0 4px; color: var(--wp-text-dim); }
+</style>

package/src/Button.vue ADDED Viewed

@@ -0,0 +1,103 @@
+<script setup lang="ts">
+/**
+ * Button — single source of truth for app buttons.
+ *
+ * Variants:
+ *   primary   — solid accent; main CTA per surface
+ *   secondary — subtle filled; default
+ *   ghost     — transparent with hover bg; tertiary
+ *   danger    — red-tinted; destructive actions
+ *   link      — text-only; inline CTAs
+ *   outline   — neutral bordered ghost (not accent: an accent outline read as
+ *               a second primary)
+ *   add       — dashed, quiet: the "Add a row" button at the end of a list
+ *
+ * `block` stretches it to the full width of its container. `pressed` makes
+ * it a toggle (aria-pressed, accent tint while on).
+ *
+ * Sizes follow the control scale: sm 24 / md 32 (default) / lg 40.
+ *
+ * States: default · hover · active · focus-visible · disabled · loading.
+ * Disabled fades to 45% with a not-allowed cursor and no hover change.
+ * Loading keeps the variant's own colours, swaps the lead icon for the
+ * sparkle LoadingMark in the label colour, sets aria-busy and ignores clicks.
+ *
+ * Icon-only mode auto-engages when no slot content is provided (.wp-btn--icon).
+ * Pass `aria-label` for screen reader text when using icon-only mode.
+ *
+ * The styles live in kit/button.css, shared with the canvas
+ * Button twin.
+ */
+import { computed, useSlots } from "vue";
+import Icon from "./Icon.vue";
+import LoadingMark from "./LoadingMark.vue";
+type Variant = "primary" | "secondary" | "ghost" | "danger" | "link" | "outline" | "add";
+type Size = "sm" | "md" | "lg";
+interface Props {
+  variant?: Variant | undefined;
+  size?: Size | undefined;
+  icon?: string | undefined;
+  iconRight?: string | undefined;
+  loading?: boolean | undefined;
+  disabled?: boolean | undefined;
+  block?: boolean | undefined;
+  /** Makes it a toggle (`aria-pressed`): on, it wears the accent tint. */
+  pressed?: boolean | undefined;
+  type?: "button" | "submit" | "reset" | undefined;
+  ariaLabel?: string | undefined;
+}
+const props = withDefaults(defineProps<Props>(), {
+  variant: "secondary",
+  size: "md",
+  type: "button",
+  pressed: undefined,
+});
+const emit = defineEmits<{
+  (e: "click", evt: MouseEvent): void;
+}>();
+const slots = useSlots();
+const hasContent = computed(() => Boolean(slots.default));
+/** Native hover tooltip for icon-only buttons. Their `aria-label` names them
+ *  for screen readers, but a sighted user hovering a bare icon gets nothing —
+ *  so mirror the label into `title` when there's no visible text. A button with
+ *  text already says what it does, so it stays untitled. */
+const titleAttr = computed(() =>
+  !hasContent.value && props.ariaLabel ? props.ariaLabel : undefined);
+const classes = computed(() => [
+  "wp-btn",
+  `wp-btn--${props.variant}`,
+  `wp-btn--${props.size}`,
+  !hasContent.value && "wp-btn--icon",
+  props.block && "wp-btn--block",
+]);
+function onClick(e: MouseEvent) {
+  if (props.disabled || props.loading) return;
+  emit("click", e);
+}
+</script>
+<template>
+  <button
+    :type="type"
+    :class="classes"
+    :disabled="disabled || loading"
+    :aria-label="ariaLabel"
+    :title="titleAttr"
+    :aria-busy="loading || undefined"
+    :aria-pressed="pressed === undefined ? undefined : pressed"
+    @click="onClick"
+  >
+    <LoadingMark v-if="loading" variant="sparkle" mono :size="size === 'lg' ? 16 : 14" decorative />
+    <Icon v-else-if="icon" :name="icon" />
+    <span v-if="hasContent" class="wp-btn__label"><slot /></span>
+    <Icon v-if="iconRight" :name="iconRight" />
+  </button>
+</template>