@dumiflex/wp-kit 0.0.0-stage → 0.4.0

package/src/ModalShell.vue

@@ -0,0 +1,109 @@
+<template>
+  <Teleport to="body">
+    <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
+          class="wp-modal-wrapper"
+          role="dialog"
+          aria-modal="true"
+          :aria-label="label"
+          :aria-labelledby="labelledby"
+          @click.stop
+        >
+          <slot></slot>
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, onBeforeUnmount } from "vue";
+import { useModalKeyShield } from "./useModalKeyShield";
+
+const props = defineProps<{
+  visible: boolean;
+  /** The dialog's name when it has no visible title. */
+  label?: string | undefined;
+  /** Id of the element that names the dialog (its title). */
+  labelledby?: string | undefined;
+}>();
+const emit = defineEmits<{
+  (e: "close"): 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. */
+  (e: "keydown", ev: KeyboardEvent): void;
+}>();
+
+const overlayEl = ref<HTMLElement | null>(null);
+
+function closeOnEscape(event: KeyboardEvent): void {
+  if (!props.visible || event.key !== "Escape") return;
+  event.preventDefault();
+  emit("close");
+}
+
+// Keys pressed INSIDE the modal are handled here and stop at the overlay, so
+// they never reach ComfyUI's global shortcuts (see useModalKeyShield).
+useModalKeyShield(overlayEl, {
+  onKey: (ev) => {
+    emit("keydown", ev);
+    closeOnEscape(ev);
+  },
+});
+
+// The window listener still covers the case where focus is OUTSIDE the modal
+// — clicking the canvas leaves the modal open but unfocused, and Escape should
+// still close it. Events from inside never get here; the shield stops them.
+function onKeydown(event: KeyboardEvent) {
+  closeOnEscape(event);
+}
+
+watch(
+  () => props.visible,
+  (visible) => {
+    if (visible) window.addEventListener("keydown", onKeydown);
+    else window.removeEventListener("keydown", onKeydown);
+  },
+  { immediate: true },
+);
+
+onBeforeUnmount(() => window.removeEventListener("keydown", onKeydown));
+</script>
+
+<style>
+@import "./_modal-motion.css";
+</style>
+
+<style scoped>
+.wp-modal-overlay,
+.wp-modal-overlay * {
+  box-sizing: border-box;
+}
+.wp-modal-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 9999;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+  background: var(--wp-overlay-bg, rgba(0, 0, 0, 0.62));
+  font-family: var(--wp-font-sans, sans-serif);
+  cursor: default;
+}
+.wp-modal-wrapper {
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  max-height: 100%;
+}
+
+/* `wp-modal` open/close transition lives in
+ * src/components/shared/_modal-motion.css (imported globally via
+ * ContextWidget) so every modal — ModalShell consumers, ConfirmDialog,
+ * InjectorBindingModal — animates with the same rules. */
+</style>

package/src/Pagination.vue

@@ -0,0 +1,106 @@
+<script setup lang="ts">
+/**
+ * Pagination: move through a long list a page at a time, or load more at
+ * its end. Works on the canvas and in the manager.
+ *
+ *   <Pagination v-model:page="page" :total="rows.length" :page-size="50" />
+ *   <Pagination mode="more" :shown="shown.length" :total="230" :loading="busy" @more="loadMore" />
+ *
+ * Pages: a `nav` with Previous / Next and the page numbers (first, last, the
+ * current page with `siblings` either side, "…" between), the current one
+ * marked `aria-current="page"`. More: one "Load more" button under a
+ * "Showing 50 of 230" line. Nothing is drawn when everything fits on one page.
+ */
+import { computed } from "vue";
+import { pageItems } from "./pagination";
+import WpButton from "./WpButton.vue";
+
+const props = withDefaults(defineProps<{
+  /** pages: numbered pages. more: a Load more button. */
+  mode?: "pages" | "more" | undefined;
+  /** The current page, from 1. */
+  page?: number | undefined;
+  /** How many items there are in all. */
+  total: number;
+  pageSize?: number | undefined;
+  /** Pages shown either side of the current one. */
+  siblings?: number | undefined;
+  /** In "more" mode: how many items are on screen. */
+  shown?: number | undefined;
+  loading?: boolean | undefined;
+  disabled?: boolean | undefined;
+  size?: "sm" | "md" | undefined;
+  /** The item's name in "Showing 50 of 230 modules". */
+  noun?: string | undefined;
+  ariaLabel?: string | undefined;
+}>(), { mode: "pages", page: 1, pageSize: 25, siblings: 1, shown: 0, size: "md", noun: undefined, ariaLabel: "Pages" });
+
+const emit = defineEmits<{ (e: "update:page", v: number): void; (e: "more"): void }>();
+
+const pages = computed(() => Math.max(1, Math.ceil(props.total / Math.max(1, props.pageSize))));
+const items = computed(() => pageItems(props.page, pages.value, props.siblings));
+const from = computed(() => Math.min(props.total, (props.page - 1) * props.pageSize + 1));
+const to = computed(() => Math.min(props.total, props.page * props.pageSize));
+
+function go(p: number): void {
+  const next = Math.min(Math.max(1, p), pages.value);
+  if (next !== props.page && !props.disabled) emit("update:page", next);
+}
+const btnSize = computed(() => (props.size === "sm" ? "sm" : "md"));
+</script>
+
+<template>
+  <nav v-if="mode === 'pages' && pages > 1" class="wp-paging" :data-size="size" :aria-label="ariaLabel">
+    <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)" />
+      </li>
+      <li v-for="it in items" :key="it">
+        <span v-if="typeof it !== 'number'" class="wp-paging__gap" aria-hidden="true">…</span>
+        <button
+          v-else
+          type="button"
+          class="wp-paging__page"
+          :data-size="size"
+          :aria-current="it === page ? 'page' : undefined"
+          :aria-label="`Page ${it}`"
+          :disabled="disabled"
+          @click="go(it)"
+        >{{ 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)" />
+      </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>
+  </div>
+</template>
+
+<style scoped>
+.wp-paging {
+  display: flex; align-items: center; justify-content: space-between; gap: var(--wp-space-4); flex-wrap: wrap;
+  min-width: 0; color: var(--wp-text-muted); font: 400 var(--wp-text-sm)/1.2 var(--wp-font-sans);
+}
+.wp-paging[data-size="sm"] { font-size: var(--wp-text-xs); gap: var(--wp-space-3); }
+.wp-paging--more { flex-direction: column; justify-content: center; }
+.wp-paging__range { font-variant-numeric: tabular-nums; }
+.wp-paging__list { display: flex; align-items: center; gap: 2px; margin: 0; padding: 0; list-style: none; }
+.wp-paging__gap { display: inline-grid; place-items: center; min-width: 20px; color: var(--wp-text-dim); }
+.wp-paging__page {
+  display: inline-grid; place-items: center; box-sizing: border-box;
+  min-width: var(--wp-control-h-md); height: var(--wp-control-h-md); margin: 0; padding: 0 var(--wp-space-2);
+  border: 1px solid transparent; border-radius: var(--wp-radius);
+  background: transparent; color: var(--wp-text-muted); font: 500 var(--wp-text-sm)/1 var(--wp-font-sans);
+  font-variant-numeric: tabular-nums; cursor: pointer;
+  transition: background var(--wp-motion-hover), color var(--wp-motion-hover);
+}
+.wp-paging__page[data-size="sm"] { min-width: var(--wp-control-h-sm); height: var(--wp-control-h-sm); border-radius: var(--wp-radius-sm); font-size: var(--wp-text-xs); }
+.wp-paging__page:hover:not(:disabled) { background: var(--wp-row-hover); color: var(--wp-text); }
+.wp-paging__page[aria-current="page"] { border-color: var(--wp-border-strong); background: var(--wp-bg-3); color: var(--wp-text); font-weight: 600; }
+.wp-paging__page:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--wp-border-focus); }
+.wp-paging__page:disabled { opacity: 0.45; cursor: not-allowed; }
+</style>

package/src/Popover.vue

@@ -0,0 +1,180 @@
+<script setup lang="ts">
+/**
+ * A panel anchored to a trigger: opens below it (or wherever `placement`
+ * says), flips and stays on screen, follows the trigger on scroll and
+ * resize, and closes on Escape or a click outside, giving focus back to
+ * the trigger. Works on the canvas and in the manager. Anything that
+ * floats next to a control builds on this instead of its own Teleport.
+ *
+ *   <Popover v-model:open="open" label="Category colour">
+ *     <template #trigger="{ props }"><Button v-bind="props">Colour</Button></template>
+ *     …panel content…
+ *   </Popover>
+ *
+ * One panel shared by many triggers (the cells of a rule grid) passes the
+ * element it belongs to as `anchor` instead of a trigger slot; clicks on that
+ * 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>
+ */
+import { computed, nextTick, onBeforeUnmount, ref, useId, watch } from "vue";
+import { placeFloating, viewportSize, type Placement, type Side } from "./floating";
+import { provideFloatingLayer, useFloatingChild } from "./floating-layer";
+
+const props = withDefaults(defineProps<{
+  open: boolean;
+  placement?: Placement | undefined;
+  /** The panel's name for screen readers. */
+  label?: string | undefined;
+  /** Make the panel at least as wide as the trigger (lists under a field). */
+  matchWidth?: boolean | undefined;
+  /** Move focus into the panel when it opens. Off for panels you type past. */
+  autofocus?: boolean | undefined;
+  /** "dialog" for panels with controls, "menu"/"listbox" when the content is one. */
+  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 });
+
+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 FOCUSABLE = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), '
+  + 'textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
+
+function trigger(): HTMLElement | null {
+  if (props.anchor) return props.anchor;
+  const el = anchorEl.value;
+  return (el?.firstElementChild as HTMLElement | null) ?? el;
+}
+
+function setOpen(v: boolean): void {
+  if (v !== props.open) emit("update:open", v);
+}
+
+const triggerProps = computed(() => ({
+  "aria-haspopup": (props.role === "group" ? "true" : props.role) as "true" | "dialog" | "menu" | "listbox",
+  "aria-expanded": props.open,
+  "aria-controls": props.open ? id : undefined,
+  onClick: () => setOpen(!props.open),
+}));
+
+function place(): void {
+  const t = trigger();
+  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 };
+}
+
+// A Select list, menu or Popover opened from inside this panel is part of it.
+const layer = provideFloatingLayer();
+// And this panel is part of a Popover it was opened from.
+useFloatingChild(() => (props.open ? panelEl.value : null));
+
+function onPointerDown(ev: PointerEvent): void {
+  const path = ev.composedPath();
+  if (layer.owns(path)) return;
+  if (panelEl.value && path.includes(panelEl.value)) return;
+  if (anchorEl.value && path.includes(anchorEl.value)) return;
+  if (props.anchor && path.includes(props.anchor)) return;
+  setOpen(false);
+}
+
+function onKeydown(ev: KeyboardEvent): void {
+  if (ev.key !== "Escape") return;
+  // An open list or menu inside the panel shuts first, on its own handler.
+  if (layer.childOpen()) return;
+  ev.preventDefault();
+  ev.stopPropagation();
+  setOpen(false);
+  trigger()?.focus();
+}
+
+function listen(on: boolean): void {
+  const m = on ? "addEventListener" : "removeEventListener";
+  window[m]("pointerdown", onPointerDown as EventListener, true);
+  window[m]("keydown", onKeydown as EventListener, true);
+  window[m]("resize", place);
+  window[m]("scroll", place, true);
+}
+
+watch(() => props.open, async (v) => {
+  if (typeof window === "undefined") return;
+  listen(v);
+  if (!v) return;
+  await nextTick();
+  place();
+  if (props.autofocus && panelEl.value && !panelEl.value.contains(document.activeElement)) {
+    (panelEl.value.querySelector<HTMLElement>(FOCUSABLE) ?? panelEl.value).focus();
+  }
+}, { immediate: true });
+
+// A shared panel moving to another trigger re-places without closing.
+watch(() => props.anchor, () => { if (props.open) void nextTick(place); });
+
+onBeforeUnmount(() => { if (typeof window !== "undefined") listen(false); });
+
+defineExpose({ place });
+</script>
+
+<template>
+  <span v-if="$slots.trigger" ref="anchorEl" class="wp-popover-anchor">
+    <slot name="trigger" :props="triggerProps" :open="open" />
+  </span>
+  <Teleport to="body">
+    <div
+      v-if="open"
+      :id="id"
+      ref="panelEl"
+      class="wp-popover"
+      :data-side="pos.side"
+      :role="role"
+      :aria-label="label"
+      tabindex="-1"
+      :style="{ left: `${pos.x}px`, top: `${pos.y}px`, minWidth: pos.minWidth ? `${pos.minWidth}px` : undefined }"
+    >
+      <slot :close="() => setOpen(false)" />
+    </div>
+  </Teleport>
+</template>
+
+<style>
+@layer wp-extension {
+  .wp-popover-anchor { display: inline-flex; }
+  .wp-popover {
+    position: fixed;
+    z-index: 10000;
+    max-width: min(420px, calc(100vw - 16px));
+    max-height: calc(100vh - 16px);
+    overflow: auto;
+    padding: var(--wp-space-3);
+    background: var(--wp-bg-2);
+    color: var(--wp-text);
+    border: 1px solid var(--wp-border-strong);
+    border-radius: var(--wp-radius);
+    box-shadow: var(--wp-shadow-md);
+    font-family: var(--wp-font-sans);
+    font-size: var(--wp-text-sm);
+    outline: none;
+    animation: wp-popover-in 120ms ease-out;
+  }
+  @keyframes wp-popover-in {
+    from { opacity: 0; transform: translateY(-2px); }
+  }
+  .wp-popover[data-side="top"] { animation-name: wp-popover-in-up; }
+  @keyframes wp-popover-in-up {
+    from { opacity: 0; transform: translateY(2px); }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .wp-popover { animation: none; }
+  }
+}
+</style>

package/src/PostCard.vue

@@ -0,0 +1,210 @@
+<script setup lang="ts">
+/**
+ * A community post as a card: type chip, NSFW / Featured / recommended
+ * badges, version, `owner/name` slug, bundle contents, description, up to
+ * four tags, then stars, downloads and when it was updated. A coloured stripe
+ * on top says the type; a featured card is tinted, a deleted one faded.
+ *
+ * The whole card is one link. It renders an `<a>` by default; pass the app's
+ * router link as `as` (and its `to`) so the kit never imports a router:
+ *
+ *   <PostCard :as="RouterLink" :to="`/p/${post.slug}`" :post="card(post)" />
+ *   <PostCard href="/p/dumi/warm" :post="…" />
+ *   <PostCard as="button" type="button" :post="…" @click="open" />
+ */
+import { computed, type Component } from "vue";
+import BundleMeta from "./BundleMeta.vue";
+import Icon from "./Icon.vue";
+import Chip from "./Chip.vue";
+import { itemType, kindColour, type ItemType } from "./kind-colour";
+import RelativeDate from "./RelativeDate.vue";
+
+export interface PostCardData {
+  /** `owner/name`. */
+  slug: string;
+  kind: "module" | "bundle";
+  subtype?: ItemType | null | undefined;
+  description?: string | undefined;
+  tags?: string[] | undefined;
+  stars: number;
+  downloads: number;
+  /** ISO time of the last update. */
+  updatedAt: string;
+  rating?: "sfw" | "nsfw" | undefined;
+  featured?: boolean | undefined;
+  /** The latest version is marked recommended. */
+  recommended?: boolean | undefined;
+  /** Soft-deleted: the card fades and shows "deleted" where the version goes. */
+  deleted?: boolean | undefined;
+  version?: number | null | undefined;
+  bundleModules?: { count: number; names: string[] } | null | undefined;
+}
+
+const props = withDefaults(defineProps<{
+  post: PostCardData;
+  /** The viewer starred it: the star in the footer fills. */
+  starred?: boolean | undefined;
+  /** Element or component for the link, e.g. the app's RouterLink. */
+  as?: string | Component | undefined;
+}>(), { starred: false, as: "a" });
+
+const type = computed(() => itemType(props.post.kind, props.post.subtype));
+const owner = computed(() => props.post.slug.split("/")[0]);
+const name = computed(() => props.post.slug.split("/").slice(1).join("/"));
+const tags = computed(() => props.post.tags ?? []);
+</script>
+
+<template>
+  <component
+    :is="as"
+    class="wp-post-card"
+    :data-type="type"
+    :data-featured="post.featured || undefined"
+    :data-deleted="post.deleted || undefined"
+  >
+    <div class="wp-post-card__top">
+      <div class="wp-post-card__badges">
+        <Chip :color="kindColour(type)">{{ type }}</Chip>
+        <Chip v-if="post.rating === 'nsfw'" tone="danger">NSFW</Chip>
+        <Chip v-if="post.featured" tone="warn" icon="star-fill">Featured</Chip>
+        <Chip v-if="post.recommended" tone="success" dot>recommended</Chip>
+      </div>
+      <span v-if="post.deleted" class="wp-chip wp-chip--danger"><Icon name="trash" :size="10" />deleted</span>
+      <span v-else class="wp-chip">v{{ post.version ?? 1 }}</span>
+    </div>
+
+    <div class="wp-post-card__slug">
+      <span class="wp-post-card__owner">{{ owner }}</span><span class="wp-post-card__sep">/</span>{{ name }}
+    </div>
+
+    <BundleMeta
+      v-if="post.kind === 'bundle' && post.bundleModules"
+      :count="post.bundleModules.count"
+      :names="post.bundleModules.names"
+    />
+
+    <p v-if="post.description" class="wp-post-card__desc">{{ post.description }}</p>
+
+    <div v-if="tags.length" class="wp-post-card__tags">
+      <span v-for="t in tags.slice(0, 4)" :key="t" class="wp-chip">{{ t }}</span>
+      <span v-if="tags.length > 4" class="wp-chip">+{{ tags.length - 4 }}</span>
+    </div>
+
+    <div class="wp-post-card__foot">
+      <span class="wp-post-card__stat" :data-active="starred || undefined">
+        <Icon :name="starred ? 'star-fill' : 'star'" :size="11" />{{ post.stars.toLocaleString() }}
+      </span>
+      <span class="wp-post-card__stat">
+        <Icon name="download" :size="11" />{{ post.downloads.toLocaleString() }}
+      </span>
+      <RelativeDate class="wp-post-card__when" :value="post.updatedAt" />
+    </div>
+  </component>
+</template>
+
+<style scoped>
+.wp-post-card {
+  --post-card-c: var(--wp-text-dim);
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  width: 100%;
+  padding: 20px 20px 18px;
+  overflow: hidden;
+  break-inside: avoid;
+  /* The page spaces its cards (a grid gap or margins); one set here would
+     beat the page's rule, since scoped styles win ties. */
+  font: inherit;
+  color: inherit;
+  text-align: left;
+  text-decoration: none;
+  cursor: pointer;
+  background: var(--wp-bg-1);
+  border: 1px solid var(--wp-border);
+  border-radius: min(12px, var(--wp-radius-cap, 999px));
+  transition: transform var(--wp-motion-quick) ease, border-color var(--wp-motion-quick) ease, box-shadow var(--wp-motion-quick) ease;
+}
+.wp-post-card::before {
+  content: "";
+  position: absolute;
+  inset: 0 0 auto;
+  height: 3px;
+  opacity: 0.85;
+  background: linear-gradient(90deg, var(--post-card-c), color-mix(in oklab, var(--post-card-c) 50%, transparent));
+}
+.wp-post-card[data-type="fixed_values"] { --post-card-c: var(--wp-kind-fixed); }
+.wp-post-card[data-type="combine"] { --post-card-c: var(--wp-kind-combine); }
+.wp-post-card[data-type="wildcard"] { --post-card-c: var(--wp-kind-wildcard); }
+.wp-post-card[data-type="constraint"] { --post-card-c: var(--wp-kind-constraint); }
+.wp-post-card[data-type="derivation"] { --post-card-c: var(--wp-kind-derivation); }
+.wp-post-card[data-type="bundle"] { --post-card-c: var(--wp-bundle-default); }
+.wp-post-card:hover {
+  transform: translateY(-3px);
+  border-color: var(--wp-border-strong);
+  box-shadow: var(--wp-shadow-lg);
+}
+.wp-post-card:focus-visible { outline: none; box-shadow: var(--wp-focus-ring); }
+.wp-post-card:hover .wp-post-card__slug { color: var(--wp-accent-text-strong); }
+.wp-post-card[data-featured] {
+  background: linear-gradient(180deg, color-mix(in oklab, var(--wp-warn) 5%, var(--wp-bg-1)), var(--wp-bg-1) 60%);
+  border-color: color-mix(in oklab, var(--wp-warn) 25%, var(--wp-border));
+}
+.wp-post-card[data-featured]:hover { border-color: color-mix(in oklab, var(--wp-warn) 40%, var(--wp-border)); }
+.wp-post-card[data-deleted] { opacity: 0.62; filter: grayscale(40%); }
+.wp-post-card[data-deleted]:hover { opacity: 0.85; filter: none; }
+
+.wp-post-card__top {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 8px;
+  min-height: 22px;
+}
+.wp-post-card__badges { display: flex; flex: 1; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
+.wp-post-card__slug {
+  font-family: var(--wp-font-mono);
+  font-size: 15.5px;
+  font-weight: 500;
+  line-height: 1.35;
+  color: var(--wp-text);
+  word-break: break-word;
+  transition: color var(--wp-motion-quick) ease;
+}
+.wp-post-card__owner { font-weight: 400; color: var(--wp-text-muted); }
+.wp-post-card__sep { color: var(--wp-accent-text); }
+.wp-post-card__desc {
+  display: -webkit-box;
+  margin: 0;
+  overflow: hidden;
+  font-size: 13px;
+  line-height: 19px;
+  color: var(--wp-text-muted);
+  text-wrap: pretty;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+}
+.wp-post-card__tags { display: flex; flex-wrap: wrap; gap: 4px; }
+.wp-post-card__tags .wp-chip { padding: 2px 8px; font-size: 11px; }
+.wp-post-card__foot {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  margin-top: 4px;
+  padding-top: 16px;
+  border-top: 1px solid var(--wp-border);
+  font-size: 12px;
+  color: var(--wp-text-muted);
+}
+.wp-post-card__stat {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  font-family: var(--wp-font-mono);
+  font-variant-numeric: tabular-nums;
+}
+.wp-post-card__stat :deep(.pi) { color: var(--wp-text-dim); }
+.wp-post-card__stat[data-active] :deep(.pi) { color: var(--wp-accent-text); }
+.wp-post-card__when { margin-left: auto; font-size: 11.5px; color: var(--wp-text-dim); }
+</style>