@commonpub/layer 0.81.0 → 0.83.0

package/components/AppToast.vue

@@ -10,7 +10,7 @@ const { toasts, dismiss } = useToast();
         :key="toast.id"
         class="cpub-toast"
         :class="`cpub-toast--${toast.type}`"
-        role="status"
+        :role="toast.type === 'error' ? 'alert' : 'status'"
       >
         <i
           :class="{

package/components/ContentAvatar.vue

@@ -0,0 +1,98 @@
+<script setup lang="ts">
+/**
+ * Headless author avatar shared by the content views (ProjectView, ArticleView).
+ *
+ * Renders an <img class="cpub-av"> when `src` is present, else an initials
+ * <div class="cpub-av"> (first two letters of `name`, uppercased, falling back
+ * to 'CP'). The .cpub-av CSS lives HERE — Vue scoped styles are hashed per
+ * component instance, so the avatar rules cannot be left behind in the views;
+ * they must travel with the markup. The .cpub-av block (square-lock, border,
+ * object-fit, div-only flex centering) is copied verbatim from the pre-dedup
+ * ProjectView/ArticleView so behaviour is identical.
+ *
+ * Size is per-call: ProjectView's byline was 36px, ArticleView's byline 44px,
+ * ArticleView's author card 64px — so callers pass `size`/`fontSize` (the only
+ * value that ever diverged between the two views).
+ */
+const props = withDefaults(
+  defineProps<{
+    src?: string | null;
+    name: string;
+    /** Avatar diameter in px. */
+    size?: number;
+    /** Initials font-size in px. */
+    fontSize?: number;
+  }>(),
+  { src: null, size: 28, fontSize: 10 },
+);
+
+const initials = computed(() => props.name?.slice(0, 2).toUpperCase() || 'CP');
+const cssVars = computed(() => ({
+  '--cpub-av-size': `${props.size}px`,
+  '--cpub-av-font': `${props.fontSize}px`,
+}));
+</script>
+
+<template>
+  <img
+    v-if="src"
+    :src="src"
+    :alt="name"
+    class="cpub-av"
+    :style="cssVars"
+  />
+  <div v-else class="cpub-av" :style="cssVars">{{ initials }}</div>
+</template>
+
+<style scoped>
+/* ── AVATARS ──
+ * Two render modes share the .cpub-av class:
+ *   <img class="cpub-av" ...>          ← avatar photo
+ *   <div class="cpub-av">JD</div>      ← initials fallback when no avatar
+ *
+ * Sizing + border-radius is shared. But `display: flex` MUST NOT apply to
+ * the <img> — when a replaced element gets `display: flex` set, browsers
+ * (notably Chromium) treat the img content render-box inconsistently and
+ * the inline `object-fit: cover` is silently dropped, producing a squished
+ * (stretched-to-box) image instead of a center-cropped one. Visible on
+ * deveco.io blog pages where author avatars are vertical photos (e.g.
+ * 816×1456) rendered into a 44×44 square.
+ *
+ * Fix: scope display:flex centering to the div variant only.
+ */
+.cpub-av {
+  --cpub-av-size: 28px;
+  --cpub-av-font: 10px;
+  width: var(--cpub-av-size);
+  height: var(--cpub-av-size);
+  /* Hard-lock to a square. Without min/max clamps, a global img reset or a
+     dropped dimension lets the <img> fall back to its intrinsic aspect ratio,
+     so a portrait photo renders as a tall oval (the deveco blog-avatar bug -
+     visible even on wide viewports, so it's not flex compression). min/max on
+     BOTH axes clamp the used size regardless of what sets width/height. */
+  min-width: var(--cpub-av-size);
+  max-width: var(--cpub-av-size);
+  min-height: var(--cpub-av-size);
+  max-height: var(--cpub-av-size);
+  border-radius: 50%;
+  background: var(--surface3);
+  border: var(--border-width-default) solid var(--border);
+  flex-shrink: 0;
+}
+
+div.cpub-av {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--cpub-av-font);
+  font-weight: 700;
+  color: var(--text-dim);
+  font-family: var(--font-mono);
+}
+
+/* Defensive: even when consumers forget the inline `object-fit:cover`,
+   img.cpub-av crops instead of stretching. */
+img.cpub-av {
+  object-fit: cover;
+}
+</style>

package/components/CpubCriteriaBar.vue

@@ -0,0 +1,88 @@
+<script setup lang="ts">
+/**
+ * CpubCriteriaBar — the one criteria-weighting visual, shared by the `criteriaBar`
+ * block (view + edit preview) and the public "Judging Criteria" section. One thin,
+ * seamless, sharp stacked bar (no gaps, no rounding, no in-segment text) where each
+ * criterion is a proportional colored segment; all labels live in a legend
+ * (swatch · name · share, with an optional description line). The bar is decorative
+ * (aria-hidden); the legend + an sr-only summary carry the data. Pattern: the
+ * iOS-storage / GitHub-language bar — distinct categorical colors, external legend.
+ */
+import { criteriaBar, type CriteriaBarItem } from '../utils/contestBlocks';
+
+// NB: boolean props cast an absent value to `false` (Vue boolean casting), so the
+// legend must default true explicitly — otherwise callers that omit it lose the legend.
+const props = withDefaults(
+  defineProps<{
+    items?: CriteriaBarItem[];
+    heading?: string;
+    showLegend?: boolean;
+  }>(),
+  { items: () => [], heading: '', showLegend: true },
+);
+
+const data = computed(() => criteriaBar(props.items));
+const segments = computed(() => data.value.rows.filter((r) => r.pct > 0));
+const showLegend = computed(() => props.showLegend);
+const hasDesc = computed(() => data.value.rows.some((r) => r.description));
+const summary = computed(() =>
+  data.value.rows.map((r) => (data.value.total > 0 ? `${r.label} ${r.pct}%` : r.label)).join(', '),
+);
+</script>
+
+<template>
+  <figure v-if="data.rows.length" class="cpub-cbar" role="group" :aria-label="heading || 'Criteria weighting'">
+    <figcaption v-if="heading" class="cpub-cbar-heading">{{ heading }}</figcaption>
+
+    <div v-if="segments.length" class="cpub-cbar-track" aria-hidden="true">
+      <span
+        v-for="(s, i) in segments"
+        :key="i"
+        class="cpub-cbar-seg"
+        :style="{ width: `${s.pct}%`, background: s.colorVar }"
+        :title="`${s.label} — ${s.pct}%`"
+      />
+    </div>
+
+    <ul v-if="showLegend" class="cpub-cbar-legend" :class="{ 'cpub-cbar-legend--rows': hasDesc }">
+      <li v-for="(r, i) in data.rows" :key="i" class="cpub-cbar-li">
+        <span class="cpub-cbar-dot" :style="{ background: r.colorVar }" aria-hidden="true" />
+        <span class="cpub-cbar-name">{{ r.label }}</span>
+        <span v-if="data.total > 0" class="cpub-cbar-val">{{ r.pct }}%</span>
+        <span v-if="r.description" class="cpub-cbar-desc">{{ r.description }}</span>
+      </li>
+    </ul>
+
+    <span class="cpub-sr-only">Criteria weighting: {{ summary }}.</span>
+  </figure>
+</template>
+
+<style scoped>
+.cpub-cbar { margin: 0; }
+.cpub-cbar-heading { font-size: 11px; font-weight: 700; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-faint); margin: 0 0 8px; }
+
+/* The bar: thin, seamless (segments butt edge-to-edge), sharp (no radius leak). */
+.cpub-cbar-track {
+  display: flex; width: 100%; height: 10px; overflow: hidden;
+  border-radius: 0; background: var(--surface2);
+  border: var(--border-width-default) solid var(--border);
+}
+.cpub-cbar-seg { height: 100%; min-width: 2px; border-radius: 0; }
+
+/* Legend — compact wrap by default; one row per item when descriptions exist. */
+.cpub-cbar-legend { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; }
+.cpub-cbar-li { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
+.cpub-cbar-dot { width: 10px; height: 10px; flex-shrink: 0; border-radius: 0; border: var(--border-width-default) solid var(--border2); }
+.cpub-cbar-name { font-size: 12px; color: var(--text); font-weight: 600; }
+.cpub-cbar-val { font-size: 11px; color: var(--text-faint); font-family: var(--font-mono); }
+.cpub-cbar-desc { display: none; }
+
+/* Rows mode: a scannable list with the weight right-aligned + a description line. */
+.cpub-cbar-legend--rows { flex-direction: column; gap: 12px; }
+.cpub-cbar-legend--rows .cpub-cbar-li { display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: 3px 10px; width: 100%; }
+.cpub-cbar-legend--rows .cpub-cbar-dot { align-self: center; }
+.cpub-cbar-legend--rows .cpub-cbar-val { justify-self: end; }
+.cpub-cbar-legend--rows .cpub-cbar-desc { display: block; grid-column: 2 / -1; font-size: 12px; color: var(--text-dim); line-height: 1.5; }
+
+.cpub-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
+</style>

package/components/CpubDateTimeField.vue

@@ -0,0 +1,73 @@
+<script setup lang="ts">
+/**
+ * Themed datetime field — one offset-correct, theme-aware replacement for raw
+ * `<input type="datetime-local">` across the contest editor (and reusable
+ * elsewhere). The model value is an ISO instant; the control speaks the viewer's
+ * local wall-clock via the shared utils/datetime helpers (no UTC shift, the bug
+ * fixed in Phase 1). `min`/`max` accept ISO and constrain the native picker (e.g.
+ * a stage's end can't precede its start). The native popup themes correctly via
+ * `color-scheme` on :root (packages/ui/theme/base.css).
+ */
+const props = defineProps<{
+  modelValue?: string | null;
+  label?: string;
+  min?: string | null;
+  max?: string | null;
+  required?: boolean;
+  disabled?: boolean;
+  /** Explicit id for the input; otherwise an SSR-safe one is generated. */
+  id?: string;
+}>();
+
+const emit = defineEmits<{ 'update:modelValue': [value: string | undefined] }>();
+
+const generatedId = useId();
+const fieldId = computed(() => props.id ?? `cpub-dt-${generatedId}`);
+
+// The local wall-clock is timezone-dependent, so the server (its TZ) and the
+// client (the viewer's TZ) compute different value/min/max strings. Vue flags the
+// hydration mismatch and, worse, does NOT rectify it in production (the viewer
+// would see the SERVER's timezone). Defer the conversion to the client: render
+// empty on the server and the first hydration tick, then fill once mounted, so
+// SSR == hydration and the local value only appears client-side.
+const mounted = ref(false);
+onMounted(() => { mounted.value = true; });
+const localValue = computed(() => (mounted.value ? toLocalInput(props.modelValue) : ''));
+const localMin = computed(() => (mounted.value ? toLocalInput(props.min) || undefined : undefined));
+const localMax = computed(() => (mounted.value ? toLocalInput(props.max) || undefined : undefined));
+
+function onInput(e: Event): void {
+  emit('update:modelValue', fromLocalInput((e.target as HTMLInputElement).value));
+}
+</script>
+
+<template>
+  <div class="cpub-datetime-field">
+    <label v-if="label" :for="fieldId" class="cpub-form-label">
+      {{ label }}<span v-if="required" class="cpub-datetime-req" aria-hidden="true"> *</span>
+    </label>
+    <input
+      :id="fieldId"
+      type="datetime-local"
+      class="cpub-input"
+      :value="localValue"
+      :min="localMin"
+      :max="localMax"
+      :required="required"
+      :disabled="disabled"
+      :aria-label="label ? undefined : 'Date and time'"
+      @input="onInput"
+    />
+  </div>
+</template>
+
+<style scoped>
+.cpub-datetime-field {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+}
+.cpub-datetime-req {
+  color: var(--red);
+}
+</style>

package/components/CpubMarkdown.vue

@@ -28,7 +28,9 @@ const props = defineProps<{
 const trimmed = computed(() => (props.source ?? '').trim());
 const isHtml = computed(() => props.format === 'html');
 
-const richHtml = computed(() => (isHtml.value && trimmed.value ? sanitizeRichHtml(trimmed.value) : ''));
+// neutralizeColors: drop hardcoded color literals so the themed `.cpub-md-html`
+// baseline shows through (dark-mode-safe); author `var(--*)`/currentColor are kept.
+const richHtml = computed(() => (isHtml.value && trimmed.value ? sanitizeRichHtml(trimmed.value, { neutralizeColors: true }) : ''));
 
 const blocks = computed<BlockTuple[]>(() => {
   if (isHtml.value || !trimmed.value) return [];

package/components/FormatToggle.vue

@@ -8,7 +8,7 @@ const model = defineModel<'markdown' | 'html'>({ default: 'markdown' });
 </script>
 
 <template>
-  <div class="cpub-fmt-toggle" role="radiogroup" aria-label="Field format">
+  <div class="cpub-fmt-toggle" role="group" aria-label="Field format">
     <button
       type="button"
       class="cpub-fmt-opt"
@@ -48,7 +48,7 @@ const model = defineModel<'markdown' | 'html'>({ default: 'markdown' });
 }
 .cpub-fmt-active {
   background: var(--accent);
-  color: var(--accent-contrast, #fff);
+  color: var(--color-on-accent);
 }
 .cpub-fmt-opt:focus-visible {
   outline: 2px solid var(--accent);

package/components/ImageUpload.vue

@@ -13,6 +13,8 @@ const emit = defineEmits<{
   'update:modelValue': [url: string];
 }>();
 
+const { uploadFile } = useFileUpload();
+
 const uploading = ref(false);
 const error = ref('');
 const fileInput = ref<HTMLInputElement | null>(null);
@@ -59,14 +61,9 @@ async function onCropped(blob: Blob): Promise<void> {
   error.value = '';
   try {
     const ext = blob.type === 'image/png' ? 'png' : 'jpg';
-    const formData = new FormData();
-    formData.append('file', new File([blob], `${props.purpose}.${ext}`, { type: blob.type || 'image/jpeg' }));
-    formData.append('purpose', props.purpose);
-
-    const result = await $fetch<{ url: string }>('/api/files/upload', {
-      method: 'POST',
-      body: formData,
-    });
+    const file = new File([blob], `${props.purpose}.${ext}`, { type: blob.type || 'image/jpeg' });
+
+    const result = await uploadFile(file, props.purpose);
 
     emit('update:modelValue', result.url);
   } catch (err: unknown) {

package/components/MirrorDetailModal.vue

@@ -92,6 +92,7 @@ async function remove(): Promise<void> {
 </script>
 
 <template>
+  <Teleport to="body">
   <div class="cpub-modal-backdrop" @click.self="emit('close')">
     <div ref="contentRef" class="cpub-modal-content" role="dialog" aria-modal="true" aria-labelledby="cpub-mirror-modal-title">
       <div class="cpub-modal-header">
@@ -170,12 +171,13 @@ async function remove(): Promise<void> {
       </div>
     </div>
   </div>
+  </Teleport>
 </template>
 
 <style scoped>
 .cpub-modal-backdrop {
   position: fixed; inset: 0; background: var(--color-surface-scrim, rgba(0,0,0,0.5));
-  z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 16px;
+  z-index: var(--z-modal-backdrop); display: flex; align-items: center; justify-content: center; padding: 16px;
 }
 .cpub-modal-content {
   background: var(--surface); border: var(--border-width-default) solid var(--border);

package/components/MirrorRequestApproveModal.vue

@@ -77,6 +77,7 @@ async function reject(): Promise<void> {
 </script>
 
 <template>
+  <Teleport to="body">
   <div class="cpub-modal-backdrop" @click.self="emit('close')">
     <div ref="contentRef" class="cpub-modal-content" role="dialog" aria-modal="true" aria-labelledby="cpub-mr-modal-title">
       <div class="cpub-modal-header">
@@ -123,12 +124,13 @@ async function reject(): Promise<void> {
       </div>
     </div>
   </div>
+  </Teleport>
 </template>
 
 <style scoped>
 .cpub-modal-backdrop {
   position: fixed; inset: 0; background: var(--color-surface-scrim, rgba(0,0,0,0.5));
-  z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 16px;
+  z-index: var(--z-modal-backdrop); display: flex; align-items: center; justify-content: center; padding: 16px;
 }
 .cpub-modal-content {
   background: var(--surface); border: var(--border-width-default) solid var(--border);

package/components/ProductEditModal.vue

@@ -0,0 +1,184 @@
+<script setup lang="ts">
+interface EditableProduct {
+  id: string;
+  name: string;
+  description: string | null;
+  category: string | null;
+  purchaseUrl: string | null;
+  datasheetUrl: string | null;
+  status: string;
+}
+
+const props = defineProps<{
+  product: EditableProduct;
+}>();
+
+const emit = defineEmits<{
+  close: [];
+  updated: [product: { slug: string }];
+}>();
+
+const toast = useToast();
+
+const formName = ref(props.product.name);
+const formDescription = ref(props.product.description ?? '');
+const formCategory = ref(props.product.category ?? 'other');
+const formPurchaseUrl = ref(props.product.purchaseUrl ?? '');
+const formDatasheetUrl = ref(props.product.datasheetUrl ?? '');
+const formStatus = ref(props.product.status ?? 'active');
+const saving = ref(false);
+
+// Parent mounts/unmounts this modal via v-if, so it's always "open" while
+// mounted. A local ref flipped on mount drives useFocusTrap's watcher.
+const contentRef = ref<HTMLElement | null>(null);
+const visible = ref(false);
+onMounted(() => { visible.value = true; });
+useFocusTrap(contentRef, () => visible.value, () => emit('close'));
+
+async function handleSave(): Promise<void> {
+  if (!formName.value.trim()) return;
+  saving.value = true;
+  try {
+    const updated = await $fetch<{ slug: string }>(`/api/products/${props.product.id}`, {
+      method: 'PUT',
+      body: {
+        name: formName.value,
+        description: formDescription.value || undefined,
+        category: formCategory.value,
+        purchaseUrl: formPurchaseUrl.value || undefined,
+        datasheetUrl: formDatasheetUrl.value || undefined,
+        status: formStatus.value,
+      },
+    });
+    toast.success('Product updated');
+    emit('updated', updated);
+    emit('close');
+  } catch {
+    toast.error('Failed to update product');
+  } finally {
+    saving.value = false;
+  }
+}
+</script>
+
+<template>
+  <Teleport to="body">
+    <div class="cpub-modal-backdrop" @click.self="emit('close')">
+      <div ref="contentRef" class="cpub-modal-content" role="dialog" aria-modal="true" aria-labelledby="cpub-edit-product-title">
+        <div class="cpub-modal-header">
+          <h3 id="cpub-edit-product-title" class="cpub-modal-title">Edit Product</h3>
+          <button class="cpub-modal-close" aria-label="Close" @click="emit('close')"><i class="fa-solid fa-xmark"></i></button>
+        </div>
+
+        <form class="cpub-resource-form" @submit.prevent="handleSave">
+          <label class="cpub-field-label" for="cpub-edit-product-name">Name</label>
+          <input id="cpub-edit-product-name" v-model="formName" type="text" placeholder="Product name" class="cpub-input" required />
+
+          <label class="cpub-field-label" for="cpub-edit-product-desc">Description</label>
+          <input id="cpub-edit-product-desc" v-model="formDescription" type="text" placeholder="Short description (optional)" class="cpub-input" />
+
+          <label class="cpub-field-label" for="cpub-edit-product-category">Category</label>
+          <select id="cpub-edit-product-category" v-model="formCategory" class="cpub-input">
+            <option value="microcontroller">Microcontroller</option>
+            <option value="sbc">SBC</option>
+            <option value="sensor">Sensor</option>
+            <option value="actuator">Actuator</option>
+            <option value="display">Display</option>
+            <option value="communication">Communication</option>
+            <option value="power">Power</option>
+            <option value="mechanical">Mechanical</option>
+            <option value="software">Software</option>
+            <option value="tool">Tool</option>
+            <option value="other">Other</option>
+          </select>
+
+          <label class="cpub-field-label" for="cpub-edit-product-purchase">Purchase URL</label>
+          <input id="cpub-edit-product-purchase" v-model="formPurchaseUrl" type="url" placeholder="Purchase URL (optional)" class="cpub-input" />
+
+          <label class="cpub-field-label" for="cpub-edit-product-datasheet">Datasheet URL</label>
+          <input id="cpub-edit-product-datasheet" v-model="formDatasheetUrl" type="url" placeholder="Datasheet URL (optional)" class="cpub-input" />
+
+          <label class="cpub-field-label" for="cpub-edit-product-status">Status</label>
+          <select id="cpub-edit-product-status" v-model="formStatus" class="cpub-input">
+            <option value="active">Active</option>
+            <option value="discontinued">Discontinued</option>
+            <option value="preview">Preview</option>
+          </select>
+
+          <div class="cpub-modal-actions">
+            <button type="submit" class="cpub-btn cpub-btn-primary" :disabled="saving || !formName.trim()">
+              {{ saving ? 'Saving...' : 'Save Changes' }}
+            </button>
+            <button type="button" class="cpub-btn" @click="emit('close')">Cancel</button>
+          </div>
+        </form>
+      </div>
+    </div>
+  </Teleport>
+</template>
+
+<style scoped>
+.cpub-modal-backdrop {
+  position: fixed;
+  inset: 0;
+  background: var(--color-surface-scrim, rgba(0,0,0,0.5));
+  z-index: var(--z-modal-backdrop);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.cpub-modal-content {
+  background: var(--surface);
+  border: var(--border-width-default) solid var(--border);
+  box-shadow: var(--shadow-lg);
+  -webkit-backdrop-filter: var(--surface-backdrop, none);
+  backdrop-filter: var(--surface-backdrop, none);
+  padding: 24px;
+  max-width: 420px;
+  width: 90vw;
+  max-height: 90vh;
+  overflow-y: auto;
+}
+
+.cpub-modal-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 12px;
+}
+
+.cpub-modal-title { font-size: 16px; font-weight: 700; }
+
+.cpub-modal-close {
+  background: none;
+  border: none;
+  color: var(--text-faint);
+  cursor: pointer;
+  font-size: 14px;
+  padding: 4px;
+}
+.cpub-modal-close:hover { color: var(--text); }
+
+.cpub-resource-form {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.cpub-field-label {
+  font-family: var(--font-mono);
+  font-size: 10px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  color: var(--text-faint);
+  margin-top: 6px;
+}
+
+.cpub-modal-actions {
+  display: flex;
+  gap: 8px;
+  margin-top: 12px;
+}
+</style>

package/components/RemoteFollowDialog.vue

@@ -44,9 +44,9 @@ useFocusTrap(dialogRef, () => open.value, close);
 <template>
   <Teleport to="body">
     <div v-if="open" class="cpub-rfd-overlay" @click.self="close">
-      <div ref="dialogRef" class="cpub-rfd-dialog" role="dialog" aria-modal="true">
+      <div ref="dialogRef" class="cpub-rfd-dialog" role="dialog" aria-modal="true" aria-labelledby="cpub-rfd-title">
         <div class="cpub-rfd-header">
-          <h3>Follow from your instance</h3>
+          <h3 id="cpub-rfd-title">Follow from your instance</h3>
           <button class="cpub-rfd-close" aria-label="Close" @click="close">
             <i class="fa-solid fa-xmark"></i>
           </button>

package/components/SearchSidebar.vue

@@ -22,10 +22,11 @@ const { hubs: hubsEnabled } = useFeatures();
          over an empty list reads as broken on quiet/new instances). -->
     <div v-if="trendingSearches?.length" class="cpub-sb-block">
       <div class="cpub-sb-heading">Trending Searches</div>
-      <ul class="cpub-pop-search-list">
-        <li
+      <div class="cpub-pop-search-list" role="group" aria-label="Trending searches">
+        <button
           v-for="(item, idx) in trendingSearches?.slice(0, 8) ?? []"
           :key="idx"
+          type="button"
           class="cpub-pop-search-item"
           @click="emit('search', item.query)"
         >
@@ -35,23 +36,25 @@ const { hubs: hubsEnabled } = useFeatures();
             <i :class="item.trend > 0 ? 'fa-solid fa-arrow-trend-up' : 'fa-solid fa-minus'" style="font-size: 9px"></i>
             <template v-if="item.trend > 0">+{{ item.trend }}%</template>
           </span>
-        </li>
-      </ul>
+        </button>
+      </div>
     </div>
 
     <!-- Suggested Tags -->
     <div class="cpub-sb-block">
       <div class="cpub-sb-heading">Suggested Tags</div>
       <div class="cpub-tag-cloud">
-        <span
+        <button
           v-for="tag in suggestedTags"
           :key="tag"
+          type="button"
           class="cpub-s-tag"
           :class="{ active: activeTags.includes(tag) }"
+          :aria-pressed="activeTags.includes(tag)"
           @click="emit('toggle-tag', tag)"
         >
           {{ tag }}
-        </span>
+        </button>
       </div>
     </div>
 
@@ -60,10 +63,10 @@ const { hubs: hubsEnabled } = useFeatures();
       <div class="cpub-sb-heading">Browse by Category</div>
       <p class="cpub-no-results-note">Not finding what you need? Try browsing a category directly.</p>
       <div class="cpub-cat-grid">
-        <div v-for="cat in categories" :key="cat.label" class="cpub-cat-cell" @click="emit('set-category', cat.label)">
+        <button v-for="cat in categories" :key="cat.label" type="button" class="cpub-cat-cell" @click="emit('set-category', cat.label)">
           <span class="cpub-cat-icon"><i :class="cat.icon"></i></span>
           <span class="cpub-cat-label">{{ cat.label }}</span>
-        </div>
+        </button>
       </div>
     </div>
 
@@ -79,9 +82,6 @@ const { hubs: hubsEnabled } = useFeatures();
             <NuxtLink :to="(hub as Record<string, unknown>).source === 'federated' ? `/federated-hubs/${hub.id}` : `/hubs/${hub.slug}`" class="cpub-related-hub-name">{{ hub.name }}</NuxtLink>
             <div class="cpub-related-hub-members">{{ hub.memberCount ?? 0 }} members</div>
           </div>
-          <button class="cpub-btn-join-sm">
-            <i class="fa-solid fa-plus" style="font-size: 8px"></i> Join
-          </button>
         </div>
       </div>
     </div>
@@ -104,7 +104,8 @@ const { hubs: hubsEnabled } = useFeatures();
 
 .cpub-pop-search-item {
   display: flex; align-items: center; gap: 8px; padding: 7px 0;
-  border-bottom: var(--border-width-default) solid var(--border2); cursor: pointer;
+  border: 0; border-bottom: var(--border-width-default) solid var(--border2);
+  width: 100%; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer;
 }
 
 .cpub-pop-search-item:last-child { border-bottom: none; }
@@ -146,6 +147,7 @@ const { hubs: hubsEnabled } = useFeatures();
 .cpub-cat-cell {
   background: var(--surface2); border: var(--border-width-default) solid var(--border); padding: 10px;
   cursor: pointer; transition: border-color 0.15s, background 0.15s; text-align: center;
+  width: 100%; color: inherit; font: inherit; display: block;
 }
 
 .cpub-cat-cell:hover { border-color: var(--accent); background: var(--surface3); }
@@ -170,13 +172,4 @@ const { hubs: hubsEnabled } = useFeatures();
 
 .cpub-related-hub-name:hover { color: var(--accent); }
 .cpub-related-hub-members { font-size: 10px; font-family: var(--font-mono); color: var(--text-faint); }
-
-.cpub-btn-join-sm {
-  font-size: 10px; font-family: var(--font-mono); padding: 3px 8px;
-  border: var(--border-width-default) solid var(--border); background: var(--green-bg); color: var(--green);
-  cursor: pointer; flex-shrink: 0; display: inline-flex; align-items: center; gap: 4px;
-  box-shadow: var(--shadow-sm); transition: all 0.15s;
-}
-
-.cpub-btn-join-sm:hover { box-shadow: var(--shadow-sm); }
 </style>