@dumiflex/wp-kit 0.5.0 → 0.7.0

package/src/ModalShell.vue

@@ -3,14 +3,21 @@
     <Transition name="wp-modal" appear>
       <!-- The overlay is a click target only; keyboard users close with Escape. -->
       <!-- eslint-disable-next-line vuejs-accessibility/click-events-have-key-events, vuejs-accessibility/no-static-element-interactions -->
-      <div v-if="visible" ref="overlayEl" class="wp-modal-overlay" @click="$emit('close')">
+      <div
+        v-if="visible"
+        ref="overlayEl"
+        class="wp-modal-overlay"
+        data-test="modal-backdrop"
+        @mousedown="downOnBackdrop = isBackdrop($event)"
+        @click="onBackdropClick"
+      >
         <div
+          ref="wrapperEl"
           class="wp-modal-wrapper"
           role="dialog"
           aria-modal="true"
           :aria-label="label"
           :aria-labelledby="labelledby"
-          @click.stop
         >
           <slot></slot>
         </div>
@@ -31,7 +38,8 @@ const props = defineProps<{
   labelledby?: string | undefined;
 }>();
 const emit = defineEmits<{
-  (e: "close"): void;
+  /** `escape` or `backdrop`, so a dialog can ignore backdrop clicks. */
+  (e: "close", reason: "escape" | "backdrop"): void;
   /** Every keydown inside the modal. Consumers MUST use this instead of a
    *  window listener: the shield stops inside-modal keys at the overlay, so a
    *  window listener would never see them. */
@@ -39,11 +47,24 @@ const emit = defineEmits<{
 }>();
 
 const overlayEl = ref<HTMLElement | null>(null);
+const wrapperEl = ref<HTMLElement | null>(null);
+
+/** The overlay or the wrapper around the panel, never the panel's own content. */
+function isBackdrop(ev: MouseEvent): boolean {
+  return ev.target === overlayEl.value || ev.target === wrapperEl.value;
+}
+/** Only a press that also STARTED on the backdrop closes: a text selection
+ *  dragged out of the dialog ends with a click on the overlay. */
+const downOnBackdrop = ref(false);
+function onBackdropClick(ev: MouseEvent): void {
+  if (downOnBackdrop.value && isBackdrop(ev)) emit("close", "backdrop");
+  downOnBackdrop.value = false;
+}
 
 function closeOnEscape(event: KeyboardEvent): void {
   if (!props.visible || event.key !== "Escape") return;
   event.preventDefault();
-  emit("close");
+  emit("close", "escape");
 }
 
 // Keys pressed INSIDE the modal are handled here and stop at the overlay, so
@@ -104,6 +125,6 @@ onBeforeUnmount(() => window.removeEventListener("keydown", onKeydown));
 
 /* `wp-modal` open/close transition lives in
  * src/components/shared/_modal-motion.css (imported globally via
- * ContextWidget) so every modal — ModalShell consumers, ConfirmDialog,
+ * ContextWidget) so every modal — ModalShell consumers (Modal, ConfirmModal),
  * InjectorBindingModal — animates with the same rules. */
 </style>

package/src/Pagination.vue

@@ -13,7 +13,7 @@
  */
 import { computed } from "vue";
 import { pageItems } from "./pagination";
-import WpButton from "./WpButton.vue";
+import Button from "./Button.vue";
 
 const props = withDefaults(defineProps<{
   /** pages: numbered pages. more: a Load more button. */
@@ -54,7 +54,7 @@ const btnSize = computed(() => (props.size === "sm" ? "sm" : "md"));
     <span class="wp-paging__range" aria-live="polite">{{ from }}–{{ to }} of {{ total }}</span>
     <ul class="wp-paging__list">
       <li>
-        <WpButton variant="ghost" :size="btnSize" icon="pi-chevron-left" aria-label="Previous page" :disabled="disabled || props.page <= 1" @click="go(props.page - 1)" />
+        <Button variant="ghost" :size="btnSize" icon="pi-chevron-left" aria-label="Previous page" :disabled="disabled || props.page <= 1" @click="go(props.page - 1)" />
       </li>
       <li v-for="it in items" :key="it">
         <span v-if="typeof it !== 'number'" class="wp-paging__gap" aria-hidden="true">…</span>
@@ -70,13 +70,13 @@ const btnSize = computed(() => (props.size === "sm" ? "sm" : "md"));
         >{{ it }}</button>
       </li>
       <li>
-        <WpButton variant="ghost" :size="btnSize" icon="pi-chevron-right" aria-label="Next page" :disabled="disabled || props.page >= pages" @click="go(props.page + 1)" />
+        <Button variant="ghost" :size="btnSize" icon="pi-chevron-right" aria-label="Next page" :disabled="disabled || props.page >= pages" @click="go(props.page + 1)" />
       </li>
     </ul>
   </nav>
   <div v-else-if="mode === 'more' && total > 0" class="wp-paging wp-paging--more" :data-size="size">
     <span class="wp-paging__range" aria-live="polite">Showing {{ Math.min(props.shown, total) }} of {{ total }}{{ noun ? ` ${noun}` : "" }}</span>
-    <WpButton v-if="props.shown < total" variant="secondary" :size="btnSize" :loading="loading" :disabled="disabled" @click="emit('more')">Load more</WpButton>
+    <Button v-if="props.shown < total" variant="secondary" :size="btnSize" :loading="loading" :disabled="disabled" @click="emit('more')">Load more</Button>
   </div>
 </template>
 

package/src/PayloadPreview.vue

@@ -0,0 +1,154 @@
+<script setup lang="ts">
+/**
+ * Rich, read-only preview of a published module or bundle payload: the
+ * community post page and its embed draw it, and the manager can too.
+ *
+ *   <PayloadPreview :payload="row" :ref-names="names" :ref-groups="groups" />
+ *
+ * This file only picks the per-type preview (WildcardPreview,
+ * FixedValuesPreview, CombinePreview, DerivationPreview, ConstraintPreview,
+ * BundlePreview; each one
+ * has a stats strip, its own search / paging for big payloads, and routes
+ * every value through `TokenizedValue` so `$var` / `@{ref}` / picks render
+ * as the chips the editor shows) and owns the Preview / Raw JSON tabs.
+ *
+ * The community renders the PUBLISHED payload, which has NO `instance`
+ * layer — so only LIBRARY exceptions exist (`payload.exceptions`); the
+ * instance-only `extra_exceptions` is ignored even if one rides along.
+ */
+import { computed, ref } from "vue";
+import WildcardPreview from "./WildcardPreview.vue";
+import FixedValuesPreview from "./FixedValuesPreview.vue";
+import CombinePreview from "./CombinePreview.vue";
+import DerivationPreview from "./DerivationPreview.vue";
+import ConstraintPreview from "./ConstraintPreview.vue";
+import BundlePreview from "./BundlePreview.vue";
+import { innerOf, payloadKind } from "./preview-readers";
+import WpTabs, { type TabItem } from "./WpTabs.vue";
+import CodeBlock from "./CodeBlock.vue";
+
+const PREVIEW_TABS: TabItem<"preview" | "raw">[] = [
+  { id: "preview", label: "Preview" },
+  { id: "raw", label: "Raw JSON" },
+];
+
+defineOptions({ name: "PayloadPreview" });
+
+const props = withDefaults(
+  defineProps<{
+    payload: Record<string, unknown> | null;
+    /**
+     * `module_id → display-name` map, built by the parent from the post's
+     * dependencies. Resolves constraint axis uuids AND any `@{uuid}` ref in
+     * a value string to readable names — retroactively, no re-publish.
+     */
+    refNames?: Record<string, string>;
+    /**
+     * `module_id → tag_groups` map from the post's dependencies, so a
+     * constraint can group its matrix by the wildcards' axes.
+     */
+    refGroups?: Record<string, Record<string, string[]>>;
+    /** Show the Preview / Raw JSON tabs. The post page draws its own. */
+    tabs?: boolean;
+    /** Rendered inside a bundle's child pane (no tabs). */
+    nested?: boolean;
+  }>(),
+  { refNames: () => ({}), refGroups: () => ({}), tabs: true, nested: false },
+);
+
+const tab = ref<"preview" | "raw">("preview");
+const showTabs = computed(() => props.tabs && !props.nested);
+
+const kind = computed(() => payloadKind(props.payload));
+const inner = computed(() => innerOf(props.payload));
+// withDefaults fills these, but the optional prop type still reads
+// `| undefined` under exactOptionalPropertyTypes; pin concrete values.
+const names = computed<Record<string, string>>(() => props.refNames ?? {});
+const groups = computed<Record<string, Record<string, string[]>>>(() => props.refGroups ?? {});
+const refMap = computed<ReadonlyMap<string, string>>(
+  () => new Map(Object.entries(props.refNames)),
+);
+const rawJson = computed(() => (props.payload ? JSON.stringify(props.payload, null, 2) : ""));
+const KNOWN = new Set(["wildcard", "fixed_values", "combine", "derivation", "constraint", "bundle"]);
+</script>
+
+<template>
+  <div
+    v-if="payload"
+    class="wp-payload-preview"
+  >
+    <WpTabs
+      v-if="showTabs"
+      v-model="tab"
+      :tabs="PREVIEW_TABS"
+      aria-label="Preview or raw JSON"
+    />
+
+    <div v-if="tab === 'preview' || !showTabs">
+      <WildcardPreview
+        v-if="kind === 'wildcard'"
+        :inner="inner"
+        :ref-map="refMap"
+      />
+      <FixedValuesPreview
+        v-else-if="kind === 'fixed_values'"
+        :inner="inner"
+        :ref-map="refMap"
+      />
+      <CombinePreview
+        v-else-if="kind === 'combine'"
+        :inner="inner"
+        :ref-map="refMap"
+      />
+      <DerivationPreview
+        v-else-if="kind === 'derivation'"
+        :payload="payload"
+        :inner="inner"
+        :ref-map="refMap"
+      />
+      <ConstraintPreview
+        v-else-if="kind === 'constraint'"
+        :inner="inner"
+        :ref-map="refMap"
+        :ref-names="names"
+        :ref-groups="groups"
+      />
+      <BundlePreview
+        v-else-if="kind === 'bundle'"
+        :payload="payload"
+        :ref-names="names"
+        :ref-groups="groups"
+      />
+      <p
+        v-if="!kind || !KNOWN.has(kind)"
+        class="wp-pv-empty"
+      >
+        Nothing to render in <code>{{ kind ?? "this payload" }}</code>. Switch to Raw JSON.
+      </p>
+    </div>
+    <div
+      v-else
+      class="wp-payload-raw"
+    >
+      <CodeBlock
+        :code="rawJson"
+        language="JSON"
+        default-wrap
+      />
+    </div>
+  </div>
+  <p
+    v-else
+    class="wp-pv-empty"
+    style="padding: 24px"
+  >
+    No payload to preview.
+  </p>
+</template>
+
+<style scoped src="./preview.css"></style>
+<style scoped>
+.wp-payload-raw {
+  padding: 18px 24px 22px;
+}
+</style>

package/src/Popover.vue

@@ -16,9 +16,15 @@
  * element don't count as outside, so it can toggle the panel itself.
  *
  *   <Popover :open="!!cell" :anchor="cell?.el" label="Cell rule" @update:open="cell = null">…</Popover>
+ *
+ * `variant="menu"` draws the panel as a menu (`menu.css`, the look Select's
+ * list, ContextMenu and Combobox share): tighter padding, 4px from the
+ * trigger, above modals, and it closes once its trigger scrolls out of view.
+ * Every panel is capped at `maxHeight` and at the room on its side, and
+ * scrolls past that instead of covering its trigger.
  */
 import { computed, nextTick, onBeforeUnmount, ref, useId, watch } from "vue";
-import { placeFloating, viewportSize, type Placement, type Side } from "./floating";
+import { placeFloating, roomOn, viewportSize, type Placement, type Side } from "./floating";
 import { provideFloatingLayer, useFloatingChild } from "./floating-layer";
 
 const props = withDefaults(defineProps<{
@@ -34,14 +40,21 @@ const props = withDefaults(defineProps<{
   role?: "dialog" | "menu" | "listbox" | "group" | undefined;
   /** Place the panel against this element instead of the trigger slot. */
   anchor?: HTMLElement | null | undefined;
-}>(), { placement: "bottom-start", autofocus: true, role: "dialog", anchor: null });
+  /** "menu" for a list of choices (Select, Combobox): the shared menu look. */
+  variant?: "panel" | "menu" | undefined;
+  /** Tallest the panel grows, in px, before it scrolls. */
+  maxHeight?: number | undefined;
+}>(), { placement: "bottom-start", autofocus: true, role: "dialog", anchor: null, variant: "panel" });
 
 const emit = defineEmits<{ (e: "update:open", v: boolean): void }>();
 
 const id = `wp-popover-${useId()}`;
 const anchorEl = ref<HTMLElement | null>(null);
 const panelEl = ref<HTMLElement | null>(null);
-const pos = ref<{ x: number; y: number; side: Side; minWidth?: number | undefined }>({ x: -9999, y: -9999, side: "bottom" });
+const pos = ref<{ x: number; y: number; side: Side; minWidth?: number | undefined; maxHeight?: number | undefined }>({ x: -9999, y: -9999, side: "bottom" });
+const isMenu = computed(() => props.variant === "menu");
+/** A short panel still shows a few rows when the room on both sides is tight. */
+const MIN_HEIGHT = 80;
 
 const FOCUSABLE = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), '
   + 'textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
@@ -68,10 +81,39 @@ function place(): void {
   const p = panelEl.value;
   if (!t || !p) return;
   const r = t.getBoundingClientRect();
-  const at = placeFloating(r, { width: Math.max(p.offsetWidth, props.matchWidth ? r.width : 0), height: p.offsetHeight }, viewportSize(), {
-    placement: props.placement,
-  });
-  pos.value = { ...at, minWidth: props.matchWidth ? r.width : undefined };
+  const view = viewportSize();
+  const opts = { placement: props.placement, gap: isMenu.value ? 4 : 6 };
+  const width = Math.max(p.offsetWidth, props.matchWidth ? r.width : 0);
+  // The content's own height (scrollHeight ignores the cap set last time),
+  // so a panel that was squeezed can grow back when there is room again.
+  const borders = p.offsetHeight - p.clientHeight;
+  const natural = Math.min(p.scrollHeight + borders, props.maxHeight ?? Infinity);
+  const first = placeFloating(r, { width, height: natural }, view, opts);
+  const fits = Math.max(MIN_HEIGHT, roomOn(first.side, r, view, opts));
+  const height = Math.min(natural, fits);
+  const at = height < natural ? placeFloating(r, { width, height }, view, opts) : first;
+  pos.value = {
+    ...at,
+    minWidth: props.matchWidth ? r.width : undefined,
+    maxHeight: Math.min(props.maxHeight ?? Infinity, fits),
+  };
+}
+
+/** True once no part of the trigger is on screen. */
+function triggerGone(): boolean {
+  const t = trigger();
+  if (!t) return false;
+  const r = t.getBoundingClientRect();
+  const view = viewportSize();
+  return r.bottom < 0 || r.top > view.height || r.right < 0 || r.left > view.width;
+}
+
+function onScroll(ev: Event): void {
+  // The panel's own scrolling changes nothing about where it sits.
+  if (ev.target instanceof Node && panelEl.value?.contains(ev.target)) return;
+  // A menu whose trigger has scrolled away has nothing left to follow.
+  if (isMenu.value && triggerGone()) { setOpen(false); return; }
+  place();
 }
 
 // A Select list, menu or Popover opened from inside this panel is part of it.
@@ -103,7 +145,7 @@ function listen(on: boolean): void {
   window[m]("pointerdown", onPointerDown as EventListener, true);
   window[m]("keydown", onKeydown as EventListener, true);
   window[m]("resize", place);
-  window[m]("scroll", place, true);
+  window[m]("scroll", onScroll, true);
 }
 
 watch(() => props.open, async (v) => {
@@ -135,17 +177,26 @@ defineExpose({ place });
       :id="id"
       ref="panelEl"
       class="wp-popover"
+      :class="{ 'wp-menu': isMenu }"
       :data-side="pos.side"
+      :data-variant="variant"
       :role="role"
       :aria-label="label"
       tabindex="-1"
-      :style="{ left: `${pos.x}px`, top: `${pos.y}px`, minWidth: pos.minWidth ? `${pos.minWidth}px` : undefined }"
+      :style="{
+        left: `${pos.x}px`,
+        top: `${pos.y}px`,
+        minWidth: pos.minWidth ? `${pos.minWidth}px` : undefined,
+        maxHeight: pos.maxHeight !== undefined && Number.isFinite(pos.maxHeight) ? `${pos.maxHeight}px` : undefined,
+      }"
     >
       <slot :close="() => setOpen(false)" />
     </div>
   </Teleport>
 </template>
 
+<style scoped src="./menu.css"></style>
+
 <style>
 @layer wp-extension {
   .wp-popover-anchor { display: inline-flex; }
@@ -155,12 +206,15 @@ defineExpose({ place });
     max-width: min(420px, calc(100vw - 16px));
     max-height: calc(100vh - 16px);
     overflow: auto;
-    padding: var(--wp-space-3);
+    padding: calc(var(--wp-space-3) + 1px); /* plus the 1px the ring stands in for */
     background: var(--wp-bg-2);
     color: var(--wp-text);
-    border: 1px solid var(--wp-border-strong);
+    /* The outline is an inset ring, not a border: these rules are layered, and
+       a host's unlayered reset (Tailwind 3's preflight sets border-width: 0
+       on every element) would beat a border. Nothing resets box-shadow. */
+    border: 0;
     border-radius: var(--wp-radius);
-    box-shadow: var(--wp-shadow-md);
+    box-shadow: inset 0 0 0 1px var(--wp-border-strong), var(--wp-shadow-md);
     font-family: var(--wp-font-sans);
     font-size: var(--wp-text-sm);
     outline: none;
@@ -169,6 +223,8 @@ defineExpose({ place });
   @keyframes wp-popover-in {
     from { opacity: 0; transform: translateY(-2px); }
   }
+  /* A menu is as wide as its longest row (up to 620px), not a 420px panel. */
+  .wp-popover[data-variant="menu"] { max-width: min(620px, calc(100vw - 16px)); }
   .wp-popover[data-side="top"] { animation-name: wp-popover-in-up; }
   @keyframes wp-popover-in-up {
     from { opacity: 0; transform: translateY(2px); }

package/src/PostDetailSkeleton.vue

@@ -0,0 +1,65 @@
+<script setup lang="ts">
+/**
+ * The shape of a post page while it loads: meta line, title, description,
+ * tag chips and the preview card on the left, the download button and its
+ * details in the rail (the rail drops under the main column on narrow
+ * screens). Shared by the site's post page and the embed's.
+ *
+ *   <PostDetailSkeleton v-if="loading" />
+ */
+import Skeleton from "./Skeleton.vue";
+
+withDefaults(defineProps<{
+  /** What screen readers hear. */
+  label?: string | undefined;
+}>(), { label: "Loading post" });
+</script>
+
+<template>
+  <div class="wp-post-detail-skeleton" data-testid="post-detail-skeleton">
+    <div class="wp-post-detail-skeleton__main">
+      <div class="wp-post-detail-skeleton__head">
+        <Skeleton width="30%" :label="label || undefined" />
+        <Skeleton shape="block" width="55%" height="32px" />
+        <Skeleton :lines="2" />
+        <Skeleton shape="chip" :lines="4" />
+      </div>
+      <Skeleton shape="block" height="320px" />
+    </div>
+    <aside class="wp-post-detail-skeleton__aside">
+      <Skeleton shape="block" height="40px" />
+      <Skeleton :lines="4" />
+    </aside>
+  </div>
+</template>
+
+<style scoped>
+.wp-post-detail-skeleton {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 320px;
+  gap: 32px;
+  align-items: start;
+  container-type: inline-size;
+}
+.wp-post-detail-skeleton__main {
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+.wp-post-detail-skeleton__head {
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+}
+.wp-post-detail-skeleton__aside {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+@media (max-width: 900px) {
+  .wp-post-detail-skeleton {
+    grid-template-columns: minmax(0, 1fr);
+  }
+}
+</style>

package/src/PostGridSkeleton.vue

@@ -0,0 +1,61 @@
+<script setup lang="ts">
+/**
+ * The shape of a post grid while its first page loads: card-sized blocks of
+ * mixed heights in the same masonry columns PostCard grids use (340px
+ * columns, one column on phones). Used by every post grid (browse, bundles,
+ * profiles, libraries, the embed).
+ *
+ *   <PostGridSkeleton v-if="loading" :count="6" />
+ *
+ * `label` is what screen readers hear once; pass `""` when the grid sits
+ * inside another skeleton that already says it (ProfileSkeleton does).
+ */
+import Skeleton from "./Skeleton.vue";
+
+withDefaults(defineProps<{
+  /** How many cards to draw. */
+  count?: number | undefined;
+  /** What screen readers hear. */
+  label?: string | undefined;
+}>(), { count: 6, label: "Loading posts" });
+
+const HEIGHTS = ["180px", "240px", "200px", "240px", "180px", "200px"];
+</script>
+
+<template>
+  <div class="wp-post-grid-skeleton" data-testid="post-grid-skeleton">
+    <Skeleton
+      v-for="i in count"
+      :key="i"
+      class="wp-post-grid-skeleton__card"
+      shape="block"
+      :height="HEIGHTS[(i - 1) % HEIGHTS.length]"
+      :label="i === 1 && label ? label : undefined"
+    />
+  </div>
+</template>
+
+<style scoped>
+.wp-post-grid-skeleton {
+  column-width: 340px;
+  column-gap: 20px;
+}
+.wp-post-grid-skeleton__card {
+  margin-bottom: 20px;
+  break-inside: avoid;
+}
+@media (max-width: 1200px) {
+  .wp-post-grid-skeleton {
+    column-width: 320px;
+  }
+}
+@media (max-width: 560px) {
+  .wp-post-grid-skeleton {
+    column-width: auto;
+    column-count: 1;
+  }
+  .wp-post-grid-skeleton__card {
+    margin-bottom: 14px;
+  }
+}
+</style>

package/src/PreviewGroup.vue

@@ -0,0 +1,75 @@
+<script setup lang="ts">
+/**
+ * One group of a preview table: a flush kit Disclosure with the group's
+ * name, its count and a dim note at the right (a share, a summary). A group
+ * with no name (the options outside any group) has no heading and is always
+ * open, so the caller writes its body once for both.
+ */
+import Disclosure from "./Disclosure.vue";
+
+withDefaults(defineProps<{
+  name?: string | undefined;
+  open: boolean;
+  count?: number | string | undefined;
+  aside?: string | undefined;
+  /** `data-test` on the heading button. */
+  testId?: string | undefined;
+}>(), { name: "", count: undefined, aside: undefined, testId: undefined });
+
+const emit = defineEmits<{ (e: "update:open", v: boolean): void }>();
+</script>
+
+<template>
+  <Disclosure
+    v-if="name"
+    flush
+    lazy
+    class="wp-pv-group"
+    :open="open"
+    :trigger-attrs="testId ? { 'data-test': testId } : undefined"
+    @update:open="(v: boolean) => emit('update:open', v)"
+  >
+    <template #summary>
+      <span class="wp-pv-group__name">{{ name }}</span>
+      <span
+        v-if="count !== undefined"
+        class="wp-pv-group__count"
+      >{{ count }}</span>
+      <span
+        v-if="aside"
+        class="wp-pv-group__aside"
+      >{{ aside }}</span>
+    </template>
+    <slot />
+  </Disclosure>
+  <div
+    v-else
+    class="wp-pv-group"
+  >
+    <slot />
+  </div>
+</template>
+
+<style scoped>
+.wp-pv-group__name {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.wp-pv-group__count {
+  padding: 0 7px;
+  border-radius: var(--wp-radius-cap, 999px);
+  background: var(--wp-bg-3);
+  color: var(--wp-text-dim);
+  font-family: var(--wp-font-mono);
+  font-size: 11px;
+  font-weight: 400;
+}
+.wp-pv-group__aside {
+  margin-left: auto;
+  color: var(--wp-text-dim);
+  font-size: 11.5px;
+  font-weight: 400;
+}
+</style>

package/src/ProfileSkeleton.vue

@@ -0,0 +1,73 @@
+<script setup lang="ts">
+/**
+ * The shape of a public profile while it loads: the head card (avatar,
+ * name, meta line), optionally the stat cards, then a post grid
+ * (PostGridSkeleton). Shared by the site's profile page and the embed's.
+ *
+ *   <ProfileSkeleton v-if="loading" stats />
+ *
+ * The root is a column with the page's gaps, so the parts space out like
+ * the page they stand in for.
+ */
+import Card from "./Card.vue";
+import Skeleton from "./Skeleton.vue";
+import PostGridSkeleton from "./PostGridSkeleton.vue";
+
+withDefaults(defineProps<{
+  /** Draw the three stat cards under the head (the site's layout). */
+  stats?: boolean | undefined;
+  /** Avatar size. */
+  avatar?: string | undefined;
+  /** What screen readers hear. */
+  label?: string | undefined;
+}>(), { stats: false, avatar: "64px", label: "Loading profile" });
+</script>
+
+<template>
+  <div class="wp-profile-skeleton" data-testid="profile-skeleton">
+    <Card :padding="false">
+      <div class="wp-profile-skeleton__head">
+        <Skeleton shape="circle" :width="avatar" :label="label || undefined" />
+        <div class="wp-profile-skeleton__name">
+          <Skeleton width="30%" />
+          <Skeleton width="20%" />
+        </div>
+      </div>
+    </Card>
+    <div v-if="stats" class="wp-profile-skeleton__stats">
+      <Skeleton v-for="i in 3" :key="i" shape="block" height="72px" />
+    </div>
+    <PostGridSkeleton :count="3" label="" />
+  </div>
+</template>
+
+<style scoped>
+.wp-profile-skeleton {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+.wp-profile-skeleton__head {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  gap: 24px;
+  align-items: center;
+  padding: 32px;
+}
+.wp-profile-skeleton__name {
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+.wp-profile-skeleton__stats {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 18px;
+}
+@media (max-width: 900px) {
+  .wp-profile-skeleton__stats {
+    grid-template-columns: minmax(0, 1fr);
+  }
+}
+</style>