@dumiflex/wp-kit 0.0.0-stage → 0.4.0

package/src/Card.vue

@@ -0,0 +1,68 @@
+<script setup lang="ts">
+import { useSlots, ref, onMounted, onBeforeUnmount } from "vue";
+
+interface Props {
+  title?: string | undefined;
+  subtitle?: string | undefined;
+  padding?: boolean | undefined;
+  /** Stick the card header (and its `subheader` slot, e.g. a bulk-edit
+   *  toolbar) to the top of the nearest scroll container so its actions stay
+   *  reachable when scrolling a long list — new rows always land at the
+   *  bottom, so the toolbar must follow. Publishes the measured height of the
+   *  whole stuck region as `--wp-card-header-h` so a sticky `<thead>` inside
+   *  the body can offset itself right below it (updates as the subheader
+   *  toolbar appears/disappears or density changes). */
+  stickyHeader?: boolean | undefined;
+}
+const props = withDefaults(defineProps<Props>(), { padding: true, stickyHeader: false });
+
+const slots = useSlots();
+const root = ref<HTMLElement | null>(null);
+const stickyEl = ref<HTMLElement | null>(null);
+let ro: ResizeObserver | null = null;
+/** The stuck region is taller than a third of the window (an AI draft or a
+ *  bulk-add box open in the subheader): it would cover the list it belongs
+ *  to and the page couldn't scroll past it, so it scrolls with the card. */
+const tooTall = ref(false);
+
+function syncStickyHeight(): void {
+  if (!root.value || !stickyEl.value) return;
+  const h = Math.round(stickyEl.value.getBoundingClientRect().height);
+  tooTall.value = typeof window !== "undefined" && window.innerHeight > 0 && h > window.innerHeight / 3;
+  root.value.style.setProperty("--wp-card-header-h", tooTall.value ? "0px" : `${h}px`);
+}
+
+onMounted(() => {
+  if (!props.stickyHeader || !stickyEl.value) return;
+  syncStickyHeight();
+  if (typeof ResizeObserver !== "undefined") {
+    ro = new ResizeObserver(syncStickyHeight);
+    ro.observe(stickyEl.value);
+  }
+  window.addEventListener("resize", syncStickyHeight);
+});
+onBeforeUnmount(() => {
+  ro?.disconnect();
+  ro = null;
+  window.removeEventListener("resize", syncStickyHeight);
+});
+</script>
+
+<template>
+  <section ref="root" class="wp-card" :class="{ 'wp-card--sticky-header': stickyHeader && !tooTall }">
+    <div ref="stickyEl" class="wp-card__sticky">
+      <header v-if="title || slots.actions" class="wp-card__header">
+        <div class="wp-card__title-wrap">
+          <h2 v-if="title" class="wp-card__title">{{ title }}</h2>
+          <p v-if="subtitle" class="wp-card__subtitle">{{ subtitle }}</p>
+        </div>
+        <span class="wp-spacer" />
+        <slot name="actions" />
+      </header>
+      <slot name="subheader" />
+    </div>
+    <div :class="padding ? 'wp-card__body' : ''">
+      <slot />
+    </div>
+  </section>
+</template>

package/src/Checkbox.vue

@@ -0,0 +1,109 @@
+<script setup lang="ts">
+import { computed } from "vue";
+
+interface Props {
+  modelValue: boolean;
+  label?: string | undefined;
+  disabled?: boolean | undefined;
+  error?: boolean | undefined;
+  id?: string | undefined;
+  ariaLabel?: string | undefined;
+  /**
+   * Tri-state indicator. When true AND `modelValue` is false, the
+   * checkbox renders a horizontal dash instead of a checkmark and
+   * announces `aria-checked="mixed"`. Used by group/select-all
+   * controls where the underlying collection is partially selected.
+   * `modelValue=true` always wins — a fully-checked box never
+   * renders as indeterminate even if the prop is set.
+   */
+  indeterminate?: boolean | undefined;
+  /**
+   * Draw the whole row as an input-height field (border, fill, full width)
+   * whose label fills it, for a yes/no filter that sits in a form grid
+   * beside Selects (the list pages' "Favorites only").
+   */
+  field?: boolean | undefined;
+}
+const props = defineProps<Props>();
+
+const emit = defineEmits<{
+  (e: "update:modelValue", v: boolean): void;
+}>();
+
+const showIndeterminate = computed<boolean>(
+  () => !!props.indeterminate && !props.modelValue,
+);
+
+const ariaChecked = computed<"true" | "false" | "mixed">(() => {
+  if (props.modelValue) return "true";
+  if (showIndeterminate.value) return "mixed";
+  return "false";
+});
+
+function toggle() {
+  if (props.disabled) return;
+  emit("update:modelValue", !props.modelValue);
+}
+</script>
+
+<template>
+  <span class="wp-checkbox" :class="{ 'is-disabled': disabled, 'wp-checkbox--field': field }">
+    <!-- Wrapper is a <span> rather than a <label> on purpose. Native <label>
+         re-dispatches click on its associated form control in some pointer
+         paths (notably when the click target is the SVG inside the button),
+         firing the button's @click twice — which double-toggled and left
+         the underlying model unchanged when a parent also wired a click
+         handler. The span wrapper has no synthetic-dispatch behavior. -->
+    <button
+      type="button"
+      class="wp-check"
+      :data-checked="modelValue ? 'true' : 'false'"
+      :data-indeterminate="showIndeterminate ? 'true' : 'false'"
+      :aria-checked="ariaChecked"
+      :aria-label="ariaLabel ?? label"
+      :aria-invalid="error || undefined"
+      :disabled="disabled"
+      role="checkbox"
+      @click="toggle"
+    >
+      <!-- tokens.css gives `.wp-check svg` pointer-events: none so the entire
+           button area (including the check mark) is a single click target —
+           clicks land on the button itself, not the SVG child. Without this,
+           a click on the SVG centerpoint could route through wrapper-bubble
+           paths in some browsers/automation drivers and double-fire toggle.
+           No inline style here: the TUI look hides the drawn mark (it reads
+           [x] instead), and an inline display would beat it. -->
+      <svg
+        v-if="modelValue"
+        viewBox="0 0 12 12"
+        fill="none"
+        aria-hidden="true"
+      >
+        <path
+          d="M3 6.2l2.2 2.2L9 4.4"
+          stroke="currentColor"
+          stroke-width="1.8"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+      </svg>
+      <!-- Indeterminate dash. Same pointer-events rule as the checkmark. -->
+      <svg
+        v-else-if="showIndeterminate"
+        viewBox="0 0 12 12"
+        fill="none"
+        aria-hidden="true"
+      >
+        <path
+          d="M3 6h6"
+          stroke="currentColor"
+          stroke-width="1.8"
+          stroke-linecap="round"
+        />
+      </svg>
+    </button>
+    <!-- A click on the words toggles too, like a <label>; keyboard users use the box itself. -->
+    <!-- eslint-disable-next-line vuejs-accessibility/click-events-have-key-events, vuejs-accessibility/no-static-element-interactions -->
+    <span v-if="label" class="wp-checkbox__label" @click="toggle">{{ label }}</span>
+  </span>
+</template>

package/src/Chip.vue

@@ -0,0 +1,163 @@
+<script setup lang="ts">
+/**
+ * The one pill in the kit: a tag, a status, a count, a category, a module
+ * type, a filter you turn on and off. Everything else is a prop:
+ *
+ *   <Chip>portrait</Chip>                                  a label
+ *   <Chip tone="warn" icon="pi-exclamation-triangle">2 conflicts</Chip>
+ *   <Chip :color="cat.color" :icon="cat.icon">{{ cat.name }}</Chip>
+ *   <Chip :color="kindColour(type)">{{ type }}</Chip>      a module type
+ *   <Chip tone="success" dot>recommended</Chip>
+ *   <Chip removable @remove="drop(t)">{{ t }}</Chip>
+ *   <Chip as="button" icon="tag" @click="open(t)">{{ t }}</Chip>   takes you somewhere
+ *   <Chip :pressed="tag === t" :count="12" size="sm" @click="pick(t)">{{ t }}</Chip>   a filter
+ *
+ * `pressed` (true or false) makes it a toggle: a `<button>` with
+ * `aria-pressed`, neutral when off and lit in the accent (or `color`) when
+ * on; with `color` its icon wears the colour even when off, so a row of type
+ * filters reads at a glance. `count` puts a small number after the label.
+ * `size`: `xs` (default, a label in a line of text), `sm` (24px, a filter
+ * row) or `md` (32px, next to a md control).
+ */
+import { computed, type Component } from "vue";
+import Icon from "./Icon.vue";
+
+type Tone = "default" | "accent" | "success" | "warn" | "danger" | "info";
+
+interface Props {
+  tone?: Tone | undefined;
+  icon?: string | null | undefined;
+  removable?: boolean | undefined;
+  /**
+   * Free-form colour (hex or any CSS colour), e.g. a category's or a kind's.
+   * On a label it overrides the tone and tints the pill: background = colour
+   * @ 18%, border = colour @ 42%, and the text blends the colour toward
+   * `--wp-text` so a pale pick stays readable in light mode and a dark pick
+   * in dark mode. On a toggle it is the "on" colour. `null` reads as none.
+   */
+  color?: string | null | undefined;
+  /** What to render: a span (default), a button, or a link. A toggle is always a button. */
+  as?: string | Component | undefined;
+  /** Makes it a toggle (`aria-pressed`). Leave unset for a plain label. */
+  pressed?: boolean | undefined;
+  /** A small number after the label. */
+  count?: number | string | undefined;
+  /** A status dot before the label, in the chip's colour. */
+  dot?: boolean | undefined;
+  size?: "xs" | "sm" | "md" | undefined;
+  disabled?: boolean | undefined;
+}
+const props = withDefaults(defineProps<Props>(), { tone: "default", as: "span", size: "xs", pressed: undefined });
+
+const emit = defineEmits<{
+  (e: "remove"): void;
+}>();
+
+const toggle = computed(() => props.pressed !== undefined);
+const tag = computed(() => (toggle.value ? "button" : props.as));
+const pressable = computed(() => tag.value !== "span");
+const classes = computed(() => [
+  "wp-chip",
+  `wp-chip--${props.size}`,
+  pressable.value && "wp-chip--action",
+  toggle.value && "wp-chip--toggle",
+  toggle.value && props.color && "wp-chip--tinted",
+  !toggle.value && (props.color ? "wp-chip--color" : props.tone !== "default" && `wp-chip--${props.tone}`),
+]);
+
+const colorStyle = computed(() => {
+  if (!props.color) return undefined;
+  const c = props.color;
+  if (toggle.value) return { "--wp-chip-c": c };
+  return {
+    color: `color-mix(in oklab, ${c} 65%, var(--wp-text))`,
+    background: `color-mix(in oklab, ${c} 18%, transparent)`,
+    borderColor: `color-mix(in oklab, ${c} 42%, transparent)`,
+  };
+});
+
+function onRemove(e: MouseEvent) {
+  e.stopPropagation();
+  emit("remove");
+}
+</script>
+
+<template>
+  <component
+    :is="tag"
+    :class="classes"
+    :style="colorStyle"
+    :type="tag === 'button' ? 'button' : undefined"
+    :aria-pressed="toggle ? pressed : undefined"
+    :disabled="tag === 'button' ? disabled : undefined"
+  >
+    <span v-if="dot" class="wp-chip__dot" aria-hidden="true" />
+    <!-- 10px sub-ICON_SM: the chip font is 10.5px and a 12px icon read
+         oversized next to it. Larger chips get a larger icon. -->
+    <Icon v-if="icon" class="wp-chip__icon" :name="icon" :size="size === 'xs' ? 10 : 11" />
+    <slot />
+    <span v-if="count !== undefined" class="wp-chip__count">{{ count }}</span>
+    <button
+      v-if="removable && !pressable"
+      type="button"
+      class="wp-chip__close"
+      aria-label="Remove"
+      @click="onRemove"
+    >
+      <!-- Close glyph also drops to 10px so chip-with-X stays balanced
+           against the slimmer body. Hit target stays 20×20 via the
+           button's min sizing in tokens.css. -->
+      <Icon name="times" :size="10" />
+    </button>
+  </component>
+</template>
+
+<style scoped>
+/* xs is the base `.wp-chip` in theme/tokens.css (19px). sm and md sit on the
+   control height scale so a filter row lines up with the fields beside it. */
+.wp-chip--sm, .wp-chip--md {
+  height: var(--wp-control-h-sm);
+  padding: 0 var(--wp-space-4);
+  gap: var(--wp-space-2);
+  font-size: var(--wp-text-sm);
+  line-height: 1;
+}
+.wp-chip--md { height: var(--wp-control-h-md); padding: 0 var(--wp-space-5); font-size: var(--wp-text-base); }
+
+.wp-chip--action {
+  font-family: inherit;
+  text-decoration: none;
+  cursor: pointer;
+  transition: background var(--wp-motion-quick) ease, border-color var(--wp-motion-quick) ease, color var(--wp-motion-quick) ease, filter var(--wp-motion-quick) ease;
+}
+.wp-chip--action:hover:not(:disabled) { border-color: var(--wp-border-strong); color: var(--wp-text); }
+.wp-chip--action.wp-chip--color:hover,
+.wp-chip--action.wp-chip--accent:hover { color: inherit; filter: brightness(1.08); }
+.wp-chip--action:focus-visible { outline: none; box-shadow: var(--wp-focus-ring); }
+.wp-chip--action:disabled { opacity: 0.45; cursor: not-allowed; }
+
+/* A toggle: neutral when off, lit in the accent or its colour when on. */
+.wp-chip--toggle { --wp-chip-c: var(--wp-accent-500); }
+.wp-chip--tinted .wp-chip__icon { color: var(--wp-chip-c); }
+.wp-chip--toggle[aria-pressed="true"] {
+  border-color: color-mix(in oklab, var(--wp-chip-c) 45%, transparent);
+  background: color-mix(in oklab, var(--wp-chip-c) 16%, transparent);
+  color: var(--wp-accent-text-strong);
+}
+.wp-chip--tinted[aria-pressed="true"] { color: var(--wp-chip-c); }
+
+.wp-chip__count {
+  padding: 0 var(--wp-space-2);
+  border-radius: var(--wp-radius-cap, 999px);
+  background: var(--wp-bg-4, var(--wp-bg-2));
+  color: var(--wp-text-dim);
+  font-family: var(--wp-font-mono);
+  font-size: 0.9em;
+  line-height: 1.4;
+}
+.wp-chip--sm .wp-chip__count, .wp-chip--md .wp-chip__count { padding: 1px var(--wp-space-3); font-size: var(--wp-text-xs); }
+.wp-chip--toggle[aria-pressed="true"] .wp-chip__count {
+  background: color-mix(in oklab, var(--wp-chip-c) 22%, transparent);
+  color: inherit;
+}
+</style>

package/src/ChoiceCards.vue

@@ -0,0 +1,133 @@
+<script setup lang="ts" generic="T extends string">
+/**
+ * Choice cards: pick one of a handful of options that each need a picture to
+ * be understood (a colour theme, a look, a layout). Each card shows the
+ * `preview` slot, a name and, unless `compact`, a one-line hint (compact puts
+ * the hint in the card's tooltip).
+ *
+ * It is a radio group (APG), like the segmented control: only the chosen card
+ * is in the Tab order, the arrow keys move to the next card and choose it,
+ * Home/End jump to the ends.
+ *
+ *   <ChoiceCards v-model="look" :options="LOOKS" aria-label="Look">
+ *     <template #preview="{ option }"><LookDrawing :id="option.value" /></template>
+ *   </ChoiceCards>
+ */
+import { nextTick, ref } from "vue";
+
+export interface ChoiceCardOption<V extends string = string> {
+  value: V;
+  label: string;
+  hint?: string | undefined;
+  /** Inline style for the card, e.g. CSS variables its preview reads. */
+  style?: Record<string, string> | undefined;
+}
+
+const props = defineProps<{
+  modelValue: T;
+  options: ChoiceCardOption<T>[];
+  /** Three to a row, smaller, hint as tooltip: for narrow panels. */
+  compact?: boolean | undefined;
+  ariaLabel?: string | undefined;
+  /** `data-test` of each card is `<testPrefix>-<value>`. */
+  testPrefix?: string | undefined;
+}>();
+
+const emit = defineEmits<{ (e: "update:modelValue", v: T): void }>();
+defineSlots<{ preview?(p: { option: ChoiceCardOption<T>; on: boolean }): unknown }>();
+const rootEl = ref<HTMLElement | null>(null);
+
+function pick(v: T): void {
+  if (v !== props.modelValue) emit("update:modelValue", v);
+}
+
+function tabStop(): T | undefined {
+  return (props.options.find((o) => o.value === props.modelValue) ?? props.options[0])?.value;
+}
+
+function onKeydown(ev: KeyboardEvent): void {
+  const all = props.options;
+  if (!all.length) return;
+  const at = all.findIndex((o) => o.value === props.modelValue);
+  let next: number;
+  switch (ev.key) {
+    case "ArrowRight": case "ArrowDown": next = (at + 1) % all.length; break;
+    case "ArrowLeft": case "ArrowUp": next = at < 0 ? all.length - 1 : (at - 1 + all.length) % all.length; break;
+    case "Home": next = 0; break;
+    case "End": next = all.length - 1; break;
+    default: return;
+  }
+  ev.preventDefault();
+  pick(all[next].value);
+  void nextTick(() => rootEl.value?.querySelectorAll<HTMLElement>("[role=radio]")[next]?.focus());
+}
+</script>
+
+<template>
+  <div
+    ref="rootEl"
+    class="wp-choice-cards"
+    :class="{ 'wp-choice-cards--compact': compact }"
+    role="radiogroup"
+    :aria-label="ariaLabel"
+  >
+    <button
+      v-for="o in options"
+      :key="o.value"
+      :title="compact ? o.hint : undefined"
+      type="button"
+      role="radio"
+      class="wp-choice-card"
+      :aria-checked="modelValue === o.value"
+      :tabindex="o.value === tabStop() ? 0 : -1"
+      :data-test="testPrefix ? `${testPrefix}-${o.value}` : undefined"
+      :style="o.style"
+      @click="pick(o.value)"
+      @keydown="onKeydown"
+    >
+      <slot name="preview" :option="o" :on="modelValue === o.value" />
+      <span class="wp-choice-card__name">{{ o.label }}</span>
+      <span v-if="!compact && o.hint" class="wp-choice-card__hint">{{ o.hint }}</span>
+    </button>
+  </div>
+</template>
+
+<style scoped>
+.wp-choice-cards {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+  gap: var(--wp-space-4);
+  width: 100%;
+}
+.wp-choice-cards--compact { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--wp-space-3); }
+.wp-choice-card {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: var(--wp-space-3);
+  min-width: 0;
+  padding: var(--wp-space-4);
+  border: 1px solid var(--wp-border);
+  border-radius: var(--wp-radius);
+  background: var(--wp-bg-2);
+  color: var(--wp-text);
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+  transition: border-color var(--wp-motion-hover), background var(--wp-motion-hover);
+}
+.wp-choice-card:hover { border-color: var(--wp-border-strong); background: var(--wp-bg-3); }
+.wp-choice-card[aria-checked="true"] {
+  border-color: var(--wp-accent-500);
+  box-shadow: inset 0 0 0 1px var(--wp-accent-500);
+  background: color-mix(in oklab, var(--wp-accent-500) 10%, var(--wp-bg-2));
+}
+.wp-choice-card:focus-visible { outline: none; box-shadow: var(--wp-focus-ring); }
+.wp-choice-card__name { font-size: var(--wp-text-base); font-weight: 600; line-height: var(--wp-line-base); }
+.wp-choice-card__hint { font-size: var(--wp-text-xs); line-height: var(--wp-line-xs); color: var(--wp-text-muted); }
+.wp-choice-cards--compact .wp-choice-card { padding: var(--wp-space-3); gap: var(--wp-space-2); }
+.wp-choice-cards--compact .wp-choice-card__name { font-size: var(--wp-text-xs); }
+@media (prefers-reduced-motion: reduce) {
+  .wp-choice-card { transition: none; }
+}
+</style>

package/src/CloseButton.vue

@@ -0,0 +1,69 @@
+<script setup lang="ts">
+/**
+ * Close button: the one × that closes a dialog, drawer, panel or banner. A
+ * square, quiet icon button on the 24/32/40 height scale, named by `label`
+ * for screen readers and shown as its tooltip. Works on the canvas
+ * (`size="sm"`) and in the manager (`md`).
+ *
+ *   <CloseButton @click="close" />
+ *   <CloseButton label="Dismiss" size="sm" @click="hide" />
+ *
+ * Manager icon actions other than closing use `Button` with an icon and no
+ * text.
+ */
+import { vTooltip } from "./tooltip";
+
+withDefaults(defineProps<{
+  label?: string | undefined;
+  size?: "sm" | "md" | "lg" | undefined;
+  disabled?: boolean | undefined;
+  /** A shortcut for the tooltip, e.g. "Esc". */
+  kbd?: string | undefined;
+}>(), { label: "Close", size: "md", kbd: undefined });
+
+const emit = defineEmits<{ (e: "click", ev: MouseEvent): void }>();
+</script>
+
+<template>
+  <button
+    v-tooltip="{ text: label, kbd }"
+    type="button"
+    class="wp-close-btn"
+    :data-size="size"
+    :aria-label="label"
+    :disabled="disabled"
+    @click="emit('click', $event)"
+  >
+    <i class="pi pi-times" aria-hidden="true" />
+  </button>
+</template>
+
+<style scoped>
+.wp-close-btn {
+  display: inline-grid;
+  place-items: center;
+  flex: none;
+  width: var(--wp-control-h-md);
+  height: var(--wp-control-h-md);
+  margin: 0;
+  padding: 0;
+  border: 1px solid transparent;
+  border-radius: var(--wp-radius);
+  background: transparent;
+  color: var(--wp-text-muted);
+  cursor: pointer;
+  transition: background var(--wp-motion-hover), color var(--wp-motion-hover), border-color var(--wp-motion-hover);
+}
+.wp-close-btn[data-size="sm"] { width: var(--wp-control-h-sm); height: var(--wp-control-h-sm); border-radius: var(--wp-radius-sm); }
+.wp-close-btn[data-size="lg"] { width: var(--wp-control-h-lg); height: var(--wp-control-h-lg); }
+.wp-close-btn .pi { font-size: 12px; }
+.wp-close-btn[data-size="sm"] .pi { font-size: 10px; }
+.wp-close-btn[data-size="lg"] .pi { font-size: 14px; }
+.wp-close-btn:hover:not(:disabled) { background: var(--wp-bg-3); color: var(--wp-text); border-color: var(--wp-border); }
+.wp-close-btn:active:not(:disabled) { background: var(--wp-bg-4); }
+.wp-close-btn:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--wp-border-focus); }
+.wp-close-btn:disabled { opacity: 0.45; cursor: not-allowed; }
+@media (prefers-reduced-motion: reduce) {
+  .wp-close-btn { transition: none; }
+}
+</style>

package/src/CodeBlock.vue

@@ -0,0 +1,119 @@
+<script setup lang="ts">
+/**
+ * Code block: text that must stay as written (JSON, a prompt as sent, a log,
+ * a snippet), in the mono font, with a copy button and a wrap switch in its
+ * head. Long text scrolls inside `max-height`. Works on the canvas and in the
+ * manager.
+ *
+ *   <CodeBlock :code="json" language="JSON" max-height="240px" />
+ *   <CodeBlock :code="log" title="Request" line-numbers v-model:wrap="wrap" />
+ *
+ * No syntax colours (they cost bundle for little gain here). A block that
+ * scrolls can be focused, so the keyboard can scroll it too.
+ */
+import { computed, ref, watch } from "vue";
+import CopyButton from "./CopyButton.vue";
+import { vTooltip } from "./tooltip";
+
+const props = withDefaults(defineProps<{
+  code: string;
+  /** A small tag in the head, e.g. "JSON". */
+  language?: string | undefined;
+  /** A name in the head, e.g. "Prompt as sent". */
+  title?: string | undefined;
+  /** Wrap long lines. Bind with v-model:wrap, or leave it to the button. */
+  wrap?: boolean | undefined;
+  /** Where wrap starts when nobody binds `wrap`. */
+  defaultWrap?: boolean | undefined;
+  /** CSS max height; the block scrolls past it. */
+  maxHeight?: string | undefined;
+  lineNumbers?: boolean | undefined;
+  /** Leave out the head (copy and wrap). */
+  bare?: boolean | undefined;
+  size?: "sm" | "md" | undefined;
+}>(), { language: undefined, title: undefined, wrap: undefined, maxHeight: undefined, size: "md" });
+
+const emit = defineEmits<{ (e: "update:wrap", v: boolean): void }>();
+
+const own = ref(props.wrap ?? props.defaultWrap ?? false);
+watch(() => props.wrap, (v) => { if (v !== undefined) own.value = v; });
+const wrapped = computed(() => props.wrap ?? own.value);
+function toggleWrap(): void {
+  own.value = !wrapped.value;
+  emit("update:wrap", own.value);
+}
+
+const lines = computed(() => props.code.replace(/\n$/, "").split("\n"));
+const name = computed(() => props.title ?? props.language ?? "Code");
+</script>
+
+<template>
+  <figure class="wp-code" :data-size="size" :data-wrap="wrapped || undefined">
+    <figcaption v-if="!bare" class="wp-code__head">
+      <span class="wp-code__title">{{ title }}</span>
+      <span v-if="language" class="wp-code__lang">{{ language }}</span>
+      <span class="wp-code__tools">
+        <button
+          v-tooltip="wrapped ? 'Don’t wrap lines' : 'Wrap lines'"
+          type="button"
+          class="wp-code__tool"
+          :aria-pressed="wrapped"
+          aria-label="Wrap lines"
+          @click="toggleWrap"
+        ><i class="pi pi-align-left" aria-hidden="true" /></button>
+        <CopyButton :text="code" :label="`Copy ${name.toLowerCase() === 'code' ? 'code' : name}`" size="sm" />
+      </span>
+    </figcaption>
+    <pre
+      class="wp-code__pre"
+      tabindex="0"
+      :aria-label="name"
+      :style="{ maxHeight }"
+    ><code v-if="!lineNumbers" class="wp-code__code">{{ code }}</code><code v-else class="wp-code__code wp-code__code--numbered"><span v-for="(l, i) in lines" :key="i" class="wp-code__line"><span class="wp-code__num" aria-hidden="true">{{ i + 1 }}</span><span class="wp-code__text">{{ l || "\u00a0" }}</span></span></code></pre>
+  </figure>
+</template>
+
+<style scoped>
+.wp-code {
+  display: flex; flex-direction: column; min-width: 0; margin: 0;
+  border: 1px solid var(--wp-border); border-radius: var(--wp-radius);
+  background: var(--wp-bg-1); overflow: hidden;
+}
+.wp-code__head {
+  display: flex; align-items: center; gap: var(--wp-space-3); min-height: 28px;
+  padding: 2px var(--wp-space-2) 2px var(--wp-space-4);
+  border-bottom: 1px solid var(--wp-border-soft); background: var(--wp-bg-2);
+  color: var(--wp-text-muted); font: 500 var(--wp-text-xs)/1.2 var(--wp-font-sans);
+}
+.wp-code__title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--wp-text); }
+.wp-code__lang {
+  padding: 1px 6px; border-radius: var(--wp-radius-sm); background: var(--wp-bg-3);
+  font: 600 10px/1.4 var(--wp-font-mono); letter-spacing: 0.04em; text-transform: uppercase;
+}
+.wp-code__tools { display: inline-flex; align-items: center; gap: 2px; margin-left: auto; }
+.wp-code__tool {
+  display: inline-grid; place-items: center; width: var(--wp-control-h-sm); height: var(--wp-control-h-sm);
+  margin: 0; padding: 0; border: 0; border-radius: var(--wp-radius-sm);
+  background: transparent; color: var(--wp-text-muted); cursor: pointer;
+}
+.wp-code__tool .pi { font-size: 11px; }
+.wp-code__tool:hover { background: var(--wp-row-hover); color: var(--wp-text); }
+.wp-code__tool[aria-pressed="true"] { color: var(--wp-accent-text); background: var(--wp-bg-3); }
+.wp-code__tool:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--wp-border-focus); }
+.wp-code__pre {
+  margin: 0; padding: var(--wp-space-4); overflow: auto;
+  color: var(--wp-text); font: 400 var(--wp-text-sm)/1.55 var(--wp-font-mono);
+  white-space: pre; tab-size: 2;
+}
+.wp-code[data-size="sm"] .wp-code__pre { padding: var(--wp-space-3); font-size: var(--wp-text-xs); }
+.wp-code[data-wrap] .wp-code__pre { white-space: pre-wrap; overflow-wrap: anywhere; }
+.wp-code__pre:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--wp-border-focus); }
+.wp-code__code { font: inherit; background: none; padding: 0; color: inherit; }
+.wp-code__code--numbered { display: table; }
+.wp-code__line { display: table-row; }
+.wp-code__num {
+  display: table-cell; padding-right: var(--wp-space-4); text-align: right;
+  color: var(--wp-text-dim); user-select: none; font-variant-numeric: tabular-nums;
+}
+.wp-code__text { display: table-cell; }
+</style>