@commonpub/layer 0.57.0 → 0.58.0

package/composables/useLayoutResize.ts

@@ -186,7 +186,7 @@ export function clampResize(params: {
   if (neighbourStart === null) {
     return {
       newColSpan,
-      newNeighbourColSpan: 0, // sentinel — caller knows there's no neighbour
+      newNeighbourColSpan: 0, // sentinel, caller knows there's no neighbour
       constraintHit,
       constraintBound,
     };

package/composables/usePublishValidation.ts

@@ -49,7 +49,7 @@ export function usePublishValidation(opts: PublishValidationOptions): PublishVal
       }
     }
     if (required.includes('content') && opts.getBlockTuples().length === 0) {
-      errs.push('Content is empty — add at least one block');
+      errs.push('Content is empty, add at least one block');
     }
 
     errors.value = errs;

package/composables/useThemeAdmin.ts

@@ -16,8 +16,8 @@ import type { CustomThemeRecord, ThemesPayload, ThemeFamilyView } from '../types
 // ---- Family display metadata for built-in themes ------------------------
 
 const BUILT_IN_FAMILY_META: Record<string, { name: string; description: string }> = {
-  classic: { name: 'Classic', description: 'Sharp corners, offset shadows, blue accent — the original CommonPub look' },
-  agora: { name: 'Agora', description: 'Warm parchment tones, green accent, serif display font — institutional warmth' },
+  classic: { name: 'Classic', description: 'Sharp corners, offset shadows, blue accent, the original CommonPub look' },
+  agora: { name: 'Agora', description: 'Warm parchment tones, green accent, serif display font, institutional warmth' },
   generics: { name: 'Generics', description: 'Minimal dark aesthetic with soft glow shadows' },
 };
 

package/error.vue

@@ -7,7 +7,7 @@ const props = defineProps<{
   };
 }>();
 
-useSeoMeta({ title: `${props.error.statusCode} — CommonPub` });
+useSeoMeta({ title: `${props.error.statusCode}, CommonPub` });
 
 // Error pages render outside app.vue's NuxtLayout tree during SSR, so the theme
 // plugin's useHead doesn't propagate here. Re-apply BOTH the data-theme attribute

package/layouts/admin.vue

@@ -54,7 +54,7 @@ const { desktopCollapsed, mobileOpen, toggleDesktop, toggleMobile, closeMobile }
           <!--
             Nav link pattern: icon + visible label. When collapsed, label text
             stays in the DOM (clip-path) so screen readers still announce
-            "Dashboard, link" — the icon alone has no accessible name.
+            "Dashboard, link", the icon alone has no accessible name.
             `title` attr only set when collapsed → visual tooltip on hover.
           -->
           <NuxtLink to="/admin" class="admin-nav-link" :title="desktopCollapsed ? 'Dashboard' : undefined" @click="closeMobile">
@@ -83,7 +83,7 @@ const { desktopCollapsed, mobileOpen, toggleDesktop, toggleMobile, closeMobile }
           </NuxtLink>
           <!-- Layouts editor — gated on layoutEngine feature flag (CLAUDE.md rule #2).
                Stays invisible until the operator flips the flag, then appears between
-               the legacy /admin/homepage editor and Navigation. Phase 3a — session 160 audit. -->
+               the legacy /admin/homepage editor and Navigation. Phase 3a, session 160 audit. -->
           <NuxtLink v-if="layoutEngine" to="/admin/layouts" class="admin-nav-link" :title="desktopCollapsed ? 'Layouts' : undefined" @click="closeMobile">
             <i class="fa-solid fa-table-cells-large"></i><span class="admin-nav-label">Layouts</span>
           </NuxtLink>

package/layouts/default.vue

@@ -268,10 +268,10 @@ const userUsername = computed(() => user.value?.username ?? '');
 
 /* ═══ TOPBAR ═══
    Structure is token-driven (--cpub-topbar-*) so a theme can change the bar's SHAPE
-   — height, radius, shadow, position, padding — not just its colors, without forking
+  , height, radius, shadow, position, padding, not just its colors, without forking
    this layout. Every default reproduces the current flat 48px bar exactly.
    (Centering the bar's CONTENT at a max width while keeping a full-bleed background
-   needs an inner wrapper element, which the base markup doesn't have — that one
+   needs an inner wrapper element, which the base markup doesn't have, that one
    aspect stays a structural choice, not a token.) */
 .cpub-topbar {
   position: var(--cpub-topbar-position, fixed); top: 0; left: 0; right: 0;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@commonpub/layer",
-  "version": "0.57.0",
+  "version": "0.58.0",
   "type": "module",
   "main": "./nuxt.config.ts",
   "files": [
@@ -53,16 +53,16 @@
     "vue": "^3.4.0",
     "vue-router": "^4.3.0",
     "zod": "^4.3.6",
-    "@commonpub/auth": "0.8.0",
     "@commonpub/config": "0.18.0",
-    "@commonpub/docs": "0.6.3",
     "@commonpub/editor": "0.7.11",
-    "@commonpub/protocol": "0.13.0",
+    "@commonpub/explainer": "0.7.15",
     "@commonpub/learning": "0.5.2",
-    "@commonpub/server": "2.79.0",
-    "@commonpub/schema": "0.32.0",
-    "@commonpub/ui": "0.9.2",
-    "@commonpub/explainer": "0.7.15"
+    "@commonpub/schema": "0.33.0",
+    "@commonpub/auth": "0.8.0",
+    "@commonpub/server": "2.80.0",
+    "@commonpub/protocol": "0.13.0",
+    "@commonpub/docs": "0.6.3",
+    "@commonpub/ui": "0.9.2"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.9.1",

package/pages/[type]/index.vue

@@ -16,7 +16,7 @@ if (!isTypeEnabled(contentType.value as ContentType)) {
 }
 
 useSeoMeta({
-  title: () => `${contentType.value} — ${siteName}`,
+  title: () => `${contentType.value}, ${siteName}`,
   description: () => `Browse ${contentType.value} on ${siteName}.`,
 });
 

package/pages/about.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 useSeoMeta({
-  title: `About — ${useSiteName()}`,
+  title: `About, ${useSiteName()}`,
   description: 'CommonPub is an open-source, federated platform for maker communities.',
 });
 
@@ -23,12 +23,12 @@ const { hubs: hubsEnabled, learning: learningEnabled, contests: contestsEnabled,
         <div class="cpub-about-card">
           <div class="cpub-about-card-icon"><i class="fa-solid fa-microchip"></i></div>
           <h3>For Makers</h3>
-          <p>Document your builds with rich block editors. Parts lists, wiring diagrams, build steps, and code blocks — everything you need to share how you built it.</p>
+          <p>Document your builds with rich block editors. Parts lists, wiring diagrams, build steps, and code blocks, everything you need to share how you built it.</p>
         </div>
         <div v-if="hubsEnabled" class="cpub-about-card">
           <div class="cpub-about-card-icon"><i class="fa-solid fa-users"></i></div>
           <h3>Community Hubs</h3>
-          <p>Create spaces for your community, product, or company. Discussions, content galleries, learning paths, and contests — all in one place.</p>
+          <p>Create spaces for your community, product, or company. Discussions, content galleries, learning paths, and contests, all in one place.</p>
         </div>
         <div v-if="federationEnabled" class="cpub-about-card">
           <div class="cpub-about-card-icon"><i class="fa-solid fa-globe"></i></div>

package/pages/admin/api-keys.vue

@@ -4,7 +4,7 @@ import { PUBLIC_API_SCOPES } from '@commonpub/schema';
 
 definePageMeta({ layout: 'admin', middleware: 'auth' });
 
-useSeoMeta({ title: `API Keys — Admin — ${useSiteName()}` });
+useSeoMeta({ title: `API Keys, Admin, ${useSiteName()}` });
 
 interface KeyListResponse {
   items: AdminApiKeyView[];
@@ -116,7 +116,7 @@ function dismissCreated(): void {
 }
 
 function fmtDate(iso: string | null): string {
-  if (!iso) return '—';
+  if (!iso) return '-';
   return new Date(iso).toLocaleString();
 }
 
@@ -167,14 +167,14 @@ function fmtErrorRate(rate: number): string {
     <!-- One-time token reveal -->
     <div v-if="createdKey" class="cpub-key-reveal" role="alert">
       <div class="cpub-key-reveal-head">
-        <strong>Key created — copy it now.</strong>
+        <strong>Key created, copy it now.</strong>
         <button class="cpub-btn-link" aria-label="Close" @click="dismissCreated">
           <i class="fa-solid fa-xmark"></i>
         </button>
       </div>
       <p class="cpub-key-reveal-warn">
         This is the only time the full token will be displayed. Store it somewhere safe before
-        leaving this page — the server only keeps a hash.
+        leaving this page, the server only keeps a hash.
       </p>
       <div class="cpub-key-reveal-value">
         <code>{{ createdKey.token }}</code>
@@ -328,7 +328,7 @@ function fmtErrorRate(rate: number): string {
                     <tr v-for="e in (usageCache[k.id] as ApiKeyUsageStats).topEndpoints" :key="e.endpoint">
                       <td><code>{{ e.endpoint }}</code></td>
                       <td>{{ e.count }}</td>
-                      <td>{{ e.p95LatencyMs ?? '—' }}</td>
+                      <td>{{ e.p95LatencyMs ?? '-' }}</td>
                     </tr>
                   </tbody>
                 </table>

package/pages/admin/audit.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 definePageMeta({ layout: 'admin', middleware: 'auth' });
 
-useSeoMeta({ title: `Audit Log — Admin — ${useSiteName()}` });
+useSeoMeta({ title: `Audit Log, Admin, ${useSiteName()}` });
 
 const { data: logsData, pending } = await useFetch('/api/admin/audit');
 
@@ -41,7 +41,7 @@ const logs = computed<AuditEntry[]>(() => {
         <tr v-for="log in logs" :key="log.id">
           <td class="audit-action">{{ log.action }}</td>
           <td class="audit-id">{{ log.actorId }}</td>
-          <td class="audit-id">{{ log.targetId || '—' }}</td>
+          <td class="audit-id">{{ log.targetId || '-' }}</td>
           <td>{{ new Date(log.createdAt).toLocaleString() }}</td>
         </tr>
       </tbody>

package/pages/admin/categories.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 definePageMeta({ layout: 'admin', middleware: 'auth' });
-useSeoMeta({ title: `Categories — Admin — ${useSiteName()}` });
+useSeoMeta({ title: `Categories, Admin, ${useSiteName()}` });
 
 const toast = useToast();
 

package/pages/admin/content.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 definePageMeta({ layout: 'admin', middleware: 'auth' });
-useSeoMeta({ title: `Content Management — Admin — ${useSiteName()}` });
+useSeoMeta({ title: `Content Management, Admin, ${useSiteName()}` });
 
 const toast = useToast();
 
@@ -153,7 +153,7 @@ async function setCategory(id: string, categoryId: string | null): Promise<void>
       <button class="cpub-btn cpub-btn-sm" @click="bulkAction('uneditorial')"><i class="fa-regular fa-pen-to-square"></i> Unpick</button>
       <select class="cpub-bulk-cat-select" @change="(e) => bulkSetCategory((e.target as HTMLSelectElement).value || null)" aria-label="Set category">
         <option value="">Set Category...</option>
-        <option :value="''" v-if="false">—</option>
+        <option :value="''" v-if="false">-</option>
         <option v-for="cat in categories" :key="cat.id" :value="cat.id">{{ cat.name }}</option>
         <option value="">Remove Category</option>
       </select>

package/pages/admin/features.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 definePageMeta({ layout: 'admin', middleware: 'auth' });
-useSeoMeta({ title: `Feature Flags — Admin — ${useSiteName()}` });
+useSeoMeta({ title: `Feature Flags, Admin, ${useSiteName()}` });
 
 const toast = useToast();
 

package/pages/admin/federation.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 definePageMeta({ layout: 'admin', middleware: 'auth' });
-useSeoMeta({ title: `Federation — Admin — ${useSiteName()}` });
+useSeoMeta({ title: `Federation, Admin, ${useSiteName()}` });
 
 const activeTab = ref<'activity' | 'mirrors' | 'registry' | 'clients' | 'trusted' | 'tools'>('activity');
 
@@ -115,7 +115,7 @@ function onRegistrySearch(value: string): void {
 const FEDERATABLE_TYPES = ['project', 'blog', 'explainer'] as const;
 // Bounded "how far back" choices for the optional history import on create.
 const DEPTH_OPTIONS = [
-  { label: 'None — forward only (default)', body: null as Record<string, number> | null },
+  { label: 'None, forward only (default)', body: null as Record<string, number> | null },
   { label: 'Last 7 days', body: { sinceDays: 7 } },
   { label: 'Last 30 days', body: { sinceDays: 30 } },
   { label: 'Last 90 days', body: { sinceDays: 90 } },
@@ -157,7 +157,7 @@ async function createMirror(): Promise<void> {
           direction: 'push',
         },
       });
-      toast.success(`Request sent to ${domain} — they must approve before they mirror you`);
+      toast.success(`Request sent to ${domain}, they must approve before they mirror you`);
       resetMirrorForm();
       newMirrorDirection.value = 'pull';
       await refreshRequests();
@@ -183,12 +183,12 @@ async function createMirror(): Promise<void> {
       const backfillUrl: string = `/api/admin/federation/mirrors/${created.id}/backfill`;
       try {
         const r = await $fetch<{ processed: number }>(backfillUrl, { method: 'POST', body: depth });
-        toast.success(`Mirror added — imported ${r?.processed ?? 0} item(s)`);
+        toast.success(`Mirror added, imported ${r?.processed ?? 0} item(s)`);
       } catch {
-        toast.error('Mirror added, but history import failed — use Backfill in its details to retry.');
+        toast.error('Mirror added, but history import failed, use Backfill in its details to retry.');
       }
     } else {
-      toast.success('Mirror added — new posts will arrive as they publish');
+      toast.success('Mirror added, new posts will arrive as they publish');
     }
     resetMirrorForm();
     await refreshMirrors();
@@ -400,7 +400,7 @@ async function refederate(): Promise<void> {
     <div v-if="activeTab === 'mirrors'">
       <p class="cpub-fed-explain">
         A <strong>mirror</strong> pulls another instance's public content into your federated feed.
-        It's <strong>one-directional</strong> — you receive their posts; they receive nothing from
+        It's <strong>one-directional</strong>, you receive their posts; they receive nothing from
         you and need do nothing. New posts arrive automatically once added; use <strong>Import
         history</strong> to also pull older posts (bounded, so you don't ingest an entire large
         instance at once).
@@ -467,7 +467,7 @@ async function refederate(): Promise<void> {
 
       <!-- Instances mirroring you -->
       <h3 class="cpub-fed-subhead">Instances mirroring you</h3>
-      <p class="cpub-fed-info-text" style="margin-bottom: 8px;">Remote instances following your instance actor — they pull your public content. (One-directional: you don't pull them unless you add a mirror above.)</p>
+      <p class="cpub-fed-info-text" style="margin-bottom: 8px;">Remote instances following your instance actor, they pull your public content. (One-directional: you don't pull them unless you add a mirror above.)</p>
       <div class="cpub-fed-activity-list">
         <div v-if="!followersData?.length" class="cpub-fed-empty">No instances are mirroring you yet.</div>
         <div v-for="f in followersData" :key="f.actorUri" class="cpub-fed-activity-row">
@@ -605,7 +605,7 @@ async function refederate(): Promise<void> {
         <!-- Re-federate Content + Hub Posts -->
         <div class="cpub-fed-tool-card">
           <h3 class="cpub-fed-tool-title"><i class="fa-solid fa-rotate"></i> Re-federate</h3>
-          <p class="cpub-fed-tool-desc">Re-queue your published content (Create) and hub posts (Announce) for delivery to your current followers. Idempotent. <strong>Bounded by default</strong> so you don't blast every follower with thousands of activities — choose how far back.</p>
+          <p class="cpub-fed-tool-desc">Re-queue your published content (Create) and hub posts (Announce) for delivery to your current followers. Idempotent. <strong>Bounded by default</strong> so you don't blast every follower with thousands of activities, choose how far back.</p>
           <div class="cpub-fed-form">
             <select v-model="refederateScope" class="cpub-fed-input" style="flex:0 0 auto;width:auto;" aria-label="Re-federate scope">
               <option value="7">Last 7 days</option>

package/pages/admin/homepage.vue

@@ -2,7 +2,7 @@
 import type { HomepageSection } from '@commonpub/server';
 
 definePageMeta({ layout: 'admin', middleware: 'auth' });
-useSeoMeta({ title: `Homepage — Admin — ${useSiteName()}` });
+useSeoMeta({ title: `Homepage, Admin, ${useSiteName()}` });
 
 const toast = useToast();
 const { data, refresh } = await useFetch<HomepageSection[]>('/api/admin/homepage/sections');
@@ -115,12 +115,12 @@ const { layoutEngine } = useFeatures();
     <!-- R4 audit (session 160): deprecation banner when layoutEngine is on.
          The new visual editor at /admin/layouts is the canonical surface;
          this legacy page still saves its JSON but the live homepage now
-         renders via the layouts table. Auto-sync is non-destructive — it
+         renders via the layouts table. Auto-sync is non-destructive, it
          only creates the layout if one doesn't yet exist. -->
     <div v-if="layoutEngine" class="cpub-admin-homepage-deprecation" role="status">
       <i class="fa-solid fa-circle-info" aria-hidden="true"></i>
       <div>
-        <p><strong>This is the legacy homepage editor.</strong> The Layout Engine is active on this instance — use the new visual editor for live changes.</p>
+        <p><strong>This is the legacy homepage editor.</strong> The Layout Engine is active on this instance, use the new visual editor for live changes.</p>
         <NuxtLink to="/admin/layouts" class="cpub-admin-homepage-deprecation-link">
           Open Layouts editor <i class="fa-solid fa-arrow-right" aria-hidden="true"></i>
         </NuxtLink>
@@ -312,7 +312,7 @@ const { layoutEngine } = useFeatures();
 }
 
 /* R4 audit (session 160): deprecation banner for the legacy editor
-   when layoutEngine is on. Direct, friendly, non-blocking — links to
+   when layoutEngine is on. Direct, friendly, non-blocking, links to
    the new editor without removing access to this page (which still
    saves the JSON for backward compat). */
 .cpub-admin-homepage-deprecation {

package/pages/admin/index.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 definePageMeta({ layout: 'admin', middleware: 'auth' });
-useSeoMeta({ title: `Admin Dashboard — ${useSiteName()}` });
+useSeoMeta({ title: `Admin Dashboard, ${useSiteName()}` });
 
 const { data: stats, pending } = await useFetch('/api/admin/stats');
 

package/pages/admin/layouts/[id].vue

@@ -234,7 +234,7 @@ if (initial.value) {
 history.clear();
 
 useSeoMeta({
-  title: () => `Edit: ${editor.draft.value?.name ?? 'Layout'} — Admin — ${useSiteName()}`,
+  title: () => `Edit: ${editor.draft.value?.name ?? 'Layout'}, Admin, ${useSiteName()}`,
 });
 
 // Viewport preview state — purely UI; doesn't mutate the layout.
@@ -493,7 +493,7 @@ async function onPublish(): Promise<void> {
         case 'publish':
           toast.error(
             'Your changes are saved as a draft, but publish failed. ' +
-            'Try Publish again — the saved draft is durable.',
+            'Try Publish again, the saved draft is durable.',
           );
           return;
         case 'refresh':
@@ -501,7 +501,7 @@ async function onPublish(): Promise<void> {
           // is stale. The next save / publish picks up correctly; a
           // reload syncs immediately.
           toast.show(
-            'Published — but the editor view is stale. Reload to sync.',
+            'Published, but the editor view is stale. Reload to sync.',
           );
           return;
       }
@@ -519,7 +519,7 @@ async function onConflictRefresh(): Promise<void> {
     // Clear the throttle so auto-save resumes; if cascade really
     // persists, the rolling-window will trip again on its own.
     editor.clearConflictHistory();
-    toast.success('Refreshed — server state loaded');
+    toast.success('Refreshed, server state loaded');
   } catch (err) {
     const e = err as { statusMessage?: string };
     toast.error(e.statusMessage ?? 'Refresh failed');
@@ -571,7 +571,7 @@ async function onConflictForceSave(): Promise<void> {
 
       <!--
         Session 162 P2.5: conflict-thrash banner. Shows when 3+ saves
-        have 409'd within the last 60s — auto-save is now paused so the
+        have 409'd within the last 60s, auto-save is now paused so the
         page stops banging the server while the admin reconciles. The
         existing AdminLayoutsConflictModal handles the per-conflict UX;
         this banner is the layer above, addressing the cascade pattern.
@@ -595,7 +595,7 @@ async function onConflictForceSave(): Promise<void> {
           <strong>Auto-save paused</strong>
           <span>
             Three of your recent saves collided with another admin's
-            edits. Reload their version (recommended) — your edits will
+            edits. Reload their version (recommended), your edits will
             be lost. Overwriting their changes is destructive and final.
           </span>
         </div>
@@ -606,7 +606,7 @@ async function onConflictForceSave(): Promise<void> {
           option, danger red = destructive action LAST in tab order so
           keyboard users don't land on it.
           Banner-specific: "Resume auto-save" replaces the modal's
-          "Keep editing here" — same neutral level, different semantic
+          "Keep editing here", same neutral level, different semantic
           (banner's middle option turns auto-save back on without
           reconciliation; modal's middle option closes the modal).
         -->
@@ -642,9 +642,9 @@ async function onConflictForceSave(): Promise<void> {
       <!--
         Round-3 audit fix: phone (≤640px) sees a single banner instead
         of the editor. Drag-drop on a 375px viewport is user-hostile
-        regardless of how well-designed — matches docs/plans/layout-and-pages.md §7.7.
+        regardless of how well-designed, matches docs/plans/layout-and-pages.md §7.7.
         Note: the @media rule uses `max-width: 640px` (inclusive), so
-        a viewport at exactly 640px sees the banner — comment matches.
+        a viewport at exactly 640px sees the banner, comment matches.
       -->
       <div class="cpub-admin-layouts-editor-phone-only">
         <i class="fa-solid fa-display cpub-admin-layouts-editor-phone-icon" aria-hidden="true"></i>
@@ -668,7 +668,7 @@ async function onConflictForceSave(): Promise<void> {
         falls back to the page-meta form per §7.9 dispatch pattern).
       -->
       <!--
-        Phase 3b/A: SR narration channel — a singleton aria-live region
+        Phase 3b/A: SR narration channel, a singleton aria-live region
         that <LayoutSection> + <LayoutRow> mirror drag/drop + Move
         Up/Down events into. dnd-kit ships no announcer OOTB; this
         closes the WCAG 2.1.1 gap. Mounted ONCE outside the
@@ -693,7 +693,7 @@ async function onConflictForceSave(): Promise<void> {
                (Pre-audit ordering put palette first → admin had to scroll
                past 17 tiles to reach the canvas.)
                v-show on palette + inspector (not v-if) preserves component
-               state — scroll position, focused field — across hide/show. -->
+               state, scroll position, focused field, across hide/show. -->
           <AdminLayoutsCanvas
             :layout="editor.draft.value"
             :viewport="viewport"
@@ -726,7 +726,7 @@ async function onConflictForceSave(): Promise<void> {
             are always visible in editable mode.
 
             Hidden on mobile/tablet (< 1024px) where the body falls
-            back to a single column DOM-order stack — the toggles
+            back to a single column DOM-order stack, the toggles
             would float over content with no panel to collapse.
           -->
           <button
@@ -799,7 +799,7 @@ async function onConflictForceSave(): Promise<void> {
    --warning token didn't exist in the theme system → fell back to
    surface2 which read as a neutral box, not alert. Now uses the
    established --yellow-bg / --yellow-border tokens (defined on every
-   theme — base.css line 70-71 + all variants) that other "attention"
+   theme, base.css line 70-71 + all variants) that other "attention"
    surfaces in the layer use. Sits between toolbar + body so it's
    visible regardless of canvas scroll. */
 .cpub-admin-layouts-editor-thrash {
@@ -944,7 +944,7 @@ async function onConflictForceSave(): Promise<void> {
 
 @media (max-width: 1024px) {
   /* On tablet, fall back to DOM-order single column (canvas first,
-     palette next, inspector last) — admin sees the editing surface
+     palette next, inspector last), admin sees the editing surface
      immediately without scrolling past the palette. v1 doesn't ship
      bottom-sheet behavior (Phase 6a). */
   .cpub-admin-layouts-editor-body {
@@ -992,7 +992,7 @@ async function onConflictForceSave(): Promise<void> {
   z-index: 5;
   transition: left 200ms ease-out, right 200ms ease-out, background var(--transition-default), color var(--transition-default);
   /* Compact icon size matches the slim handle silhouette. The 28px
-     touch surface is what WCAG cares about — the chevron centers inside. */
+     touch surface is what WCAG cares about, the chevron centers inside. */
   font-size: 10px;
 }
 .cpub-admin-layouts-editor-edge-tab:hover {
@@ -1009,7 +1009,7 @@ async function onConflictForceSave(): Promise<void> {
 .cpub-admin-layouts-editor-edge-tab--left {
   /* Sit at the right edge of the palette (which is 280px wide). The
      -14px offset centers the 28px-wide tab ON the boundary so half is
-     in the palette + half in the canvas — reads as "the boundary
+     in the palette + half in the canvas, reads as "the boundary
      itself is the toggle". (Was -9px when the tab was 18px wide.) */
   left: calc(280px - 14px);
 }
@@ -1042,14 +1042,14 @@ async function onConflictForceSave(): Promise<void> {
   .cpub-admin-layouts-editor-edge-tab { display: none; }
   /* Session 164 audit R3-3: force panels visible regardless of the
      cookie-persisted desktop-collapse state. At tablet/phone the body
-     falls back to a DOM-order single-column stack — the desktop
+     falls back to a DOM-order single-column stack, the desktop
      'collapsed' state has no useful meaning when there's no grid column
      to remove, but `chrome.paletteHidden` / `chrome.inspectorHidden`
      still drive v-show on the panel components, leaving an admin who
      collapsed on desktop with NO way to re-show on tablet (the edge
      tabs are hidden by the rule above; the toolbar toggles were
      removed in the 164 polish). Override v-show's inline display:none
-     with `flex !important` (panels natively use display:flex column —
+     with `flex !important` (panels natively use display:flex column -
      'block' would break their internal layout). Scoped :deep() because
      the .cpub-admin-layouts-{palette,inspector} root classes live in
      child components. */

package/pages/admin/layouts/index.vue

@@ -18,7 +18,7 @@ definePageMeta({
   layout: 'admin',
   middleware: ['auth', 'admin-layouts'],
 });
-useSeoMeta({ title: `Layouts — Admin — ${useSiteName()}` });
+useSeoMeta({ title: `Layouts, Admin, ${useSiteName()}` });
 
 const toast = useToast();
 const { data: layouts, refresh, pending } = await useFetch<LayoutRecord[]>(
@@ -59,7 +59,7 @@ async function migrateHomepage(): Promise<void> {
       toast.success('Homepage migrated to layout engine');
       await refresh();
     } else if (result.reason === 'layout-already-exists') {
-      toast.show('A homepage layout already exists — opening it');
+      toast.show('A homepage layout already exists, opening it');
       await refresh();
     } else {
       toast.show(result.reason ?? 'Migration finished');
@@ -141,7 +141,7 @@ const sortedLayouts = computed<LayoutRecord[]>(() => {
 
     <template v-else-if="sortedLayouts.length === 0">
       <!--
-        Empty state — single icon + headline + one-line description +
+        Empty state, single icon + headline + one-line description +
         single primary action, per Carbon + Mobbin SaaS empty-state
         synthesis. Skipping illustration on purpose: the sharp-corner +
         mono UI label aesthetic reads as intentional with just text.
@@ -154,7 +154,7 @@ const sortedLayouts = computed<LayoutRecord[]>(() => {
         <i class="fa-regular fa-folder-open cpub-admin-layouts-empty-icon" aria-hidden="true"></i>
         <h2 class="cpub-admin-layouts-empty-text">No layouts yet</h2>
         <p class="cpub-admin-layouts-empty-hint">
-          Layouts arrange sections — hero, feed, blocks — into reusable page templates.
+          Layouts arrange sections, hero, feed, blocks, into reusable page templates.
           Start by migrating your existing homepage from the legacy editor.
         </p>
         <button

package/pages/admin/navigation.vue

@@ -2,7 +2,7 @@
 import type { NavItem } from '@commonpub/server';
 
 definePageMeta({ layout: 'admin', middleware: 'auth' });
-useSeoMeta({ title: `Navigation — Admin — ${useSiteName()}` });
+useSeoMeta({ title: `Navigation, Admin, ${useSiteName()}` });
 
 const toast = useToast();
 const { data, refresh } = await useFetch<NavItem[]>('/api/admin/navigation/items');

package/pages/admin/reports.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 definePageMeta({ layout: 'admin', middleware: 'auth' });
-useSeoMeta({ title: `Reports — Admin — ${useSiteName()}` });
+useSeoMeta({ title: `Reports, Admin, ${useSiteName()}` });
 
 const toast = useToast();
 const statusFilter = ref<string>('pending');

package/pages/admin/settings.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 definePageMeta({ layout: 'admin', middleware: 'auth' });
 
-useSeoMeta({ title: `Settings — Admin — ${useSiteName()}` });
+useSeoMeta({ title: `Settings, Admin, ${useSiteName()}` });
 
 const { data: settings, pending, refresh } = await useFetch<Record<string, string>>('/api/admin/settings');
 
@@ -98,7 +98,7 @@ async function backfillCdn(dryRun: boolean): Promise<void> {
             <button class="cpub-btn cpub-btn-sm" @click="cancelEdit">Cancel</button>
           </template>
           <template v-else>
-            <span class="settings-value">{{ (settings as Record<string, string>)[item.key] ?? '—' }}</span>
+            <span class="settings-value">{{ (settings as Record<string, string>)[item.key] ?? '-' }}</span>
             <button class="cpub-btn cpub-btn-sm" @click="startEdit(item.key, (settings as Record<string, string>)[item.key] ?? '')">Edit</button>
           </template>
         </div>

package/pages/admin/theme/edit/[id].vue

@@ -336,7 +336,7 @@ onBeforeUnmount(() => {
         <label v-if="pairCandidates.length" class="theme-editor-field">
           <span class="theme-editor-field-label">Pair with</span>
           <select v-model="draft.pairId" class="theme-editor-input" @change="onMetaChange">
-            <option :value="undefined">— none —</option>
+            <option :value="undefined">- none -</option>
             <option v-for="p in pairCandidates" :key="p.id" :value="p.id">{{ p.name }}</option>
           </select>
         </label>
@@ -367,7 +367,7 @@ onBeforeUnmount(() => {
     <textarea
       v-model="draft.description"
       class="theme-editor-description"
-      placeholder="Description — shown on the theme list (optional)"
+      placeholder="Description, shown on the theme list (optional)"
       rows="2"
       @input="onMetaChange"
     />