@dumiflex/wp-kit 0.6.0 → 0.7.1

package/src/PayloadPreview.vue

@@ -0,0 +1,155 @@
+<script setup lang="ts">
+// The shared preview sheet (wp-pv-* classes), loaded once for every preview.
+import "./preview.css";
+/**
+ * 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>
+.wp-payload-raw {
+  padding: 18px 24px 22px;
+}
+</style>

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>

package/src/RichText.vue

@@ -0,0 +1,61 @@
+<script setup lang="ts">
+/**
+ * Inline rich-text renderer for plain-text prose (post descriptions, notes).
+ *
+ *   <p class="my-description"><RichText :text="post.description" /></p>
+ *
+ * Turns URLs into links (new tab, `noopener noreferrer`) and `$var` /
+ * `@{ref}` mentions into `<code>` chips, WITHOUT `v-html`: every segment from
+ * `parseRichText` (linkify.ts) is rendered as a Vue node, so the output is
+ * XSS-safe by construction.
+ *
+ * Prose, not a grammar value: `{a|b}` stays text and a ref's body may be any
+ * words. A wildcard value (picks, refs resolved to names) is TokenizedValue.
+ *
+ * Renders INLINE (no wrapper element), so it drops into the host's own
+ * paragraph and inherits its typography.
+ */
+import { computed } from "vue";
+import { parseRichText } from "./linkify";
+
+const props = defineProps<{ text: string }>();
+
+const segments = computed(() => parseRichText(props.text));
+</script>
+
+<template>
+  <template
+    v-for="(seg, idx) in segments"
+    :key="idx"
+  >
+    <a
+      v-if="seg.kind === 'link'"
+      class="wp-rich-text__link"
+      :href="seg.href"
+      target="_blank"
+      rel="noopener noreferrer"
+    >{{ seg.text }}</a>
+    <code
+      v-else-if="seg.kind === 'code'"
+      class="wp-rich-text__code"
+    >{{ seg.text }}</code>
+    <template v-else>{{ seg.text }}</template>
+  </template>
+</template>
+
+<style scoped>
+.wp-rich-text__link {
+  color: var(--wp-accent-text);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+.wp-rich-text__code {
+  font-family: var(--wp-font-mono);
+  font-size: 0.9em;
+  background: var(--wp-bg-3);
+  color: var(--wp-accent-text);
+  padding: 1px 6px;
+  border-radius: min(5px, var(--wp-radius-cap, 999px));
+  border: 1px solid var(--wp-border);
+}
+</style>

package/src/SelectionBar.vue

@@ -0,0 +1,101 @@
+<script setup lang="ts">
+/**
+ * SelectionBar: the bar over a list while rows are ticked. "3 selected", the
+ * bulk actions (the default slot) and Clear. One bar for every list: the
+ * editors' bulk mode, the moderation queue, a backups list.
+ *
+ *   <SelectionBar v-if="picked.size" :count="picked.size" @clear="picked.clear()">
+ *     <Button variant="danger" size="sm" icon="trash" @click="del">Delete</Button>
+ *   </SelectionBar>
+ *
+ * `#start` sits right after the count (a filter, an option), the default slot
+ * on the right before Clear. `sticky` keeps it at the top of its scroll area
+ * while the list scrolls under it (`--wp-selection-bar-top` moves it below a
+ * fixed header). `noun` says what is selected ("3 options selected");
+ * `noun-one` is its singular for a count of 1 ("1 option selected"), by
+ * default the noun without its last "s". Escape
+ * inside the bar clears, like Clear; the count is read out as it changes.
+ */
+import { computed, onBeforeUnmount, onMounted, ref } from "vue";
+import Button from "./Button.vue";
+
+const props = withDefaults(defineProps<{
+  count: number;
+  /** What a row is, plural ("options"); left out it says "3 selected". */
+  noun?: string | undefined;
+  /** The noun for one row ("option"); defaults to `noun` without its last "s". */
+  nounOne?: string | undefined;
+  /** Stick to the top of the scroll area. */
+  sticky?: boolean | undefined;
+  /** Hide the Clear button (the host clears another way). */
+  hideClear?: boolean | undefined;
+  clearLabel?: string | undefined;
+  /** The toolbar's accessible name. */
+  label?: string | undefined;
+}>(), { noun: undefined, nounOne: undefined, clearLabel: "Clear", label: "Bulk actions" });
+
+const emit = defineEmits<{ clear: [] }>();
+
+/** "3 options selected", "1 option selected", or "3 selected" with no noun. */
+const countText = computed(() => {
+  if (!props.noun) return `${props.count} selected`;
+  const one = props.nounOne ?? props.noun.replace(/s$/, "");
+  return `${props.count} ${props.count === 1 ? one : props.noun} selected`;
+});
+
+function onKeydown(ev: KeyboardEvent): void {
+  if (ev.key !== "Escape" || props.hideClear) return;
+  ev.stopPropagation();
+  emit("clear");
+}
+
+// Bound in code, not as @keydown: the bar is a toolbar of buttons, and the
+// keys come from those buttons (a template handler on it reads to the a11y
+// lint as a click target on a plain element).
+const root = ref<HTMLElement | null>(null);
+onMounted(() => root.value?.addEventListener("keydown", onKeydown));
+onBeforeUnmount(() => root.value?.removeEventListener("keydown", onKeydown));
+</script>
+
+<template>
+  <div
+    ref="root"
+    class="wp-selbar"
+    role="toolbar"
+    :aria-label="label"
+    :data-sticky="sticky || undefined"
+    data-test="selection-bar"
+  >
+    <span class="wp-selbar__count" aria-live="polite" data-test="selection-count">{{ countText }}</span>
+    <slot name="start" />
+    <span class="wp-selbar__spacer" />
+    <slot />
+    <Button v-if="!hideClear" variant="ghost" size="sm" data-test="selection-clear" @click="emit('clear')">{{ clearLabel }}</Button>
+  </div>
+</template>
+
+<style scoped>
+.wp-selbar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--wp-space-4);
+  padding: var(--wp-space-3) var(--wp-space-5);
+  border: 1px solid color-mix(in oklab, var(--wp-accent) 40%, transparent);
+  border-radius: min(8px, var(--wp-radius-cap, 999px));
+  background: color-mix(in oklab, var(--wp-accent) 12%, var(--wp-bg-2));
+  font-family: var(--wp-font-sans);
+}
+.wp-selbar[data-sticky] {
+  position: sticky;
+  top: var(--wp-selection-bar-top, 0px);
+  z-index: 20;
+}
+.wp-selbar__count {
+  font-size: var(--wp-text-base);
+  font-weight: 600;
+  color: var(--wp-text);
+  white-space: nowrap;
+}
+.wp-selbar__spacer { flex: 1; }
+</style>

package/src/SettingGroup.vue

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+/**
+ * SettingGroup: a titled block of SettingRows in one bordered panel, the
+ * rows split by hairlines, so a long settings page reads as a list rather
+ * than a stack of cards.
+ *
+ *   <SettingGroup title="Content" note="Applies to this browser.">
+ *     <SettingRow label="Show NSFW posts" hint="Off by default."><WpSwitch v-model="nsfw" size="md" /></SettingRow>
+ *   </SettingGroup>
+ *
+ * `#title-extra` sits after the title (a Badge, a help link). The panel is a
+ * size container: its rows go to one column when it is narrower than 480px.
+ */
+defineProps<{
+  title?: string | undefined;
+  /** A line under the title. */
+  note?: string | undefined;
+}>();
+</script>
+
+<template>
+  <section class="wp-set-group">
+    <h3 v-if="title" class="wp-set-group__title">
+      {{ title }}<slot name="title-extra" />
+    </h3>
+    <p v-if="note" class="wp-set-group__note">{{ note }}</p>
+    <div class="wp-set-group__panel">
+      <slot />
+    </div>
+  </section>
+</template>
+
+<style scoped>
+.wp-set-group { margin-bottom: var(--wp-space-7); }
+.wp-set-group__title {
+  display: flex;
+  align-items: center;
+  gap: var(--wp-space-3);
+  margin: 0 0 var(--wp-space-3);
+  font-size: var(--wp-text-xs);
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--wp-text-dim);
+}
+.wp-set-group__note {
+  margin: 0 0 var(--wp-space-3);
+  font-size: var(--wp-text-sm);
+  color: var(--wp-text-dim);
+}
+.wp-set-group__panel {
+  container: wp-set-group / inline-size;
+  background: var(--wp-bg-2);
+  border: 1px solid var(--wp-border);
+  border-radius: var(--wp-radius-lg);
+}
+</style>