@actuate-media/cms-admin 0.64.0 → 0.66.0

package/src/components/ui/StatusBadge.tsx

@@ -0,0 +1,66 @@
+import type { HTMLAttributes, ReactNode } from 'react'
+import { cv, type VariantProps } from '../../lib/cv.js'
+
+/**
+ * Canonical status chip from the design system (`.status` + `.status-dot`):
+ * a rectangular 5px-radius chip with a 5px dot, 11.5px medium text, and
+ * tint backgrounds per tone. This is the single source of truth for
+ * document / entity statuses across Posts, Pages, Forms, SEO, and tables —
+ * do not roll per-view status pills.
+ */
+const statusBadge = cv(
+  'inline-flex items-center gap-[5px] rounded-[5px] px-[9px] py-[3px] text-[length:var(--fs-hint)] font-medium whitespace-nowrap',
+  {
+    variants: {
+      tone: {
+        /** Published / Active — success tint (`.s-pub`). */
+        success: 'bg-[var(--suc-l)] text-[var(--suc)]',
+        /** Scheduled / Pending — warning tint (`.s-sch`). */
+        warning: 'bg-[var(--warn-l)] text-[var(--warn)]',
+        /** Errors / failing states. */
+        danger: 'bg-[var(--err-l)] text-[var(--err)]',
+        /** Informational states. */
+        info: 'bg-[var(--info-l)] text-[var(--info)]',
+        /** Draft — page background + border (`.s-dft`). */
+        neutral: 'border border-[var(--bdr)] bg-[var(--bg)] text-[var(--sub)]',
+        /** Archived — dimmest treatment (`.s-arc`). */
+        muted: 'border border-[var(--bdr)] bg-[var(--bg)] text-[var(--muted)]',
+      },
+    },
+    defaultVariants: { tone: 'neutral' },
+  },
+)
+
+const DOT_CLASS: Record<NonNullable<StatusBadgeVariants['tone']>, string> = {
+  success: 'bg-[var(--suc)]',
+  warning: 'bg-[var(--warn)]',
+  danger: 'bg-[var(--err)]',
+  info: 'bg-[var(--info)]',
+  neutral: 'bg-[var(--muted)]',
+  muted: 'bg-[var(--muted)]',
+}
+
+export type StatusBadgeVariants = VariantProps<typeof statusBadge>
+export type StatusBadgeTone = NonNullable<StatusBadgeVariants['tone']>
+
+export interface StatusBadgeProps extends HTMLAttributes<HTMLSpanElement>, StatusBadgeVariants {
+  /** Hide the leading dot (rare — e.g. numeric chips). */
+  dot?: boolean
+  children: ReactNode
+}
+
+export function StatusBadge({ tone, dot = true, className, children, ...rest }: StatusBadgeProps) {
+  return (
+    <span className={statusBadge({ tone, class: className })} {...rest}>
+      {dot && (
+        <span
+          aria-hidden
+          className={`h-[5px] w-[5px] shrink-0 rounded-full ${DOT_CLASS[tone ?? 'neutral']}`}
+        />
+      )}
+      {children}
+    </span>
+  )
+}
+
+export { statusBadge as statusBadgeVariants }

package/src/components/ui/index.ts

@@ -36,6 +36,14 @@ export { SearchInput } from './SearchInput.js'
 export type { SearchInputProps } from './SearchInput.js'
 export { Toggle, toggleTrackVariants, toggleThumbVariants } from './Toggle.js'
 export type { ToggleProps, ToggleVariants } from './Toggle.js'
+export { StatusBadge, statusBadgeVariants } from './StatusBadge.js'
+export type { StatusBadgeProps, StatusBadgeVariants, StatusBadgeTone } from './StatusBadge.js'
+export { FilterPill } from './FilterPill.js'
+export type { FilterPillProps } from './FilterPill.js'
+export { StatPill } from './StatPill.js'
+export type { StatPillProps } from './StatPill.js'
+export { RowActions, RowActionButton } from './RowActions.js'
+export type { RowActionButtonProps } from './RowActions.js'
 export { formControlBase, formControlState } from './form-control.js'
 export { CommandPalette } from './CommandPalette.js'
 export type { CommandPaletteProps } from './CommandPalette.js'

package/src/fields/PropInput.tsx

@@ -38,6 +38,7 @@ import {
   safeJsonStringify,
   switchUnionVariant,
 } from './component-block-helpers.js'
+import { Toggle } from '../components/ui/Toggle.js'
 
 export { defaultForType }
 
@@ -249,21 +250,11 @@ function BooleanInput({
   return (
     <div className="flex items-center justify-between text-sm">
       <span>{label}</span>
-      <button
-        type="button"
-        role="switch"
-        aria-checked={boolVal}
-        onClick={() => onChange(!boolVal)}
-        className={`relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors ${
-          boolVal ? 'bg-[var(--primary)]' : 'bg-[var(--muted)]'
-        }`}
-      >
-        <span
-          className={`bg-card pointer-events-none inline-block h-5 w-5 rounded-full shadow-sm ring-0 transition-transform ${
-            boolVal ? 'translate-x-5' : 'translate-x-0'
-          }`}
-        />
-      </button>
+      <Toggle
+        checked={boolVal}
+        onCheckedChange={(v) => onChange(v)}
+        aria-label={typeof label === 'string' ? label : undefined}
+      />
     </div>
   )
 }

package/src/fields/ToggleField.tsx

@@ -1,5 +1,7 @@
 'use client'
 
+import { Toggle } from '../components/ui/Toggle.js'
+
 export interface ToggleFieldProps {
   label: string
   value?: boolean
@@ -14,21 +16,7 @@ export function ToggleField({ label, value = false, onChange, helpText }: Toggle
         <span className="text-sm font-medium">{label}</span>
         {helpText && <p className="text-xs text-[var(--muted-foreground)]">{helpText}</p>}
       </div>
-      <button
-        type="button"
-        role="switch"
-        aria-checked={value}
-        onClick={() => onChange(!value)}
-        className={`relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors ${
-          value ? 'bg-[var(--primary)]' : 'bg-[var(--muted)]'
-        }`}
-      >
-        <span
-          className={`bg-card pointer-events-none inline-block h-5 w-5 rounded-full shadow-sm ring-0 transition-transform ${
-            value ? 'translate-x-5' : 'translate-x-0'
-          }`}
-        />
-      </button>
+      <Toggle checked={value} onCheckedChange={onChange} aria-label={label} />
     </div>
   )
 }

package/src/layout/Header.tsx

@@ -127,8 +127,8 @@ export function Header({
                 className="hover:bg-accent flex items-center gap-1.5 rounded-lg p-1 transition-colors"
                 aria-label="Account menu"
               >
-                <div className="flex h-8 w-8 items-center justify-center rounded-full bg-linear-to-br from-blue-500 to-purple-600">
-                  <span className="text-sm font-medium text-white">{initial}</span>
+                <div className="flex h-8 w-8 items-center justify-center rounded-full bg-[var(--acc)]">
+                  <span className="text-xs font-semibold text-white">{initial}</span>
                 </div>
                 <ChevronDown
                   className="text-muted-foreground hidden h-4 w-4 sm:block"

package/src/layout/Layout.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import { useMemo, useState, useEffect, type ReactNode } from 'react'
-import { ExternalLink, Plus } from 'lucide-react'
+import { Plus } from 'lucide-react'
 import { Sidebar } from './Sidebar.js'
 import { Header } from './Header.js'
 import { Breadcrumbs } from '../components/Breadcrumbs.js'
@@ -102,8 +102,9 @@ interface PageActionsContext {
  * primary/secondary pair that mirrors the reference dashboard.
  *
  * Resolution rules:
- *   - Dashboard / home → "+ New Post" + "View Site"
- *   - List views → just "+ New <Type>"
+ *   - Dashboard / Posts / Pages → nothing here; those views render their
+ *     hero CTAs inside the page header per the design
+ *   - Other list views → just "+ New <Type>"
  *   - Editor views → no top-bar action (editor renders its own toolbar)
  */
 function computePageActions({
@@ -112,56 +113,12 @@ function computePageActions({
   onNavigate,
 }: PageActionsContext): ReactNode | null {
   const collections = collectionList(config)
-  const postCollections = collections.filter((c) => c.type === 'post')
-  const newPostPath = resolveNewPostPath(postCollections)
-  const siteUrl: string | null = config?.site?.url ?? config?.seo?.siteUrl ?? null
 
+  // Dashboard, /posts, and /pages render their own hero CTAs in the page
+  // header (design `.page-hdr` → `.hdr-r`), so the top bar stays empty there.
   const isDashboard = currentPath === '/' || currentPath === '/dashboard'
-
-  // Dashboard: keep the existing "+ New Post" / "View Site" pair. With
-  // a single Post Type we route straight to its editor; with several we
-  // route to the picker so the user can choose the type first.
-  if (isDashboard) {
-    return (
-      <>
-        <button
-          type="button"
-          onClick={() => onNavigate(newPostPath)}
-          className="bg-primary text-primary-foreground hover:bg-primary/90 focus-visible:ring-ring inline-flex items-center gap-1.5 rounded-lg px-3.5 py-1.5 text-sm font-medium shadow-sm transition-colors focus:outline-none focus-visible:ring-2"
-        >
-          <Plus className="h-3.5 w-3.5" aria-hidden />
-          New Post
-        </button>
-        {siteUrl ? (
-          <a
-            href={siteUrl}
-            target="_blank"
-            rel="noopener noreferrer"
-            className="border-border bg-background text-foreground hover:bg-accent inline-flex items-center gap-1.5 rounded-lg border px-3 py-1.5 text-sm font-medium transition-colors"
-          >
-            <ExternalLink className="h-3.5 w-3.5" aria-hidden />
-            View Site
-          </a>
-        ) : null}
-      </>
-    )
-  }
-
-  // Posts area — "+ New Post" + "Manage types" on the list page;
-  // "+ New Post Type" on the types page. The buttons live in the top
-  // bar so the page header stays clean. See the dashboard rule for
-  // why these come from a single config-aware helper.
-  if (currentPath === '/posts') {
-    return (
-      <button
-        type="button"
-        onClick={() => onNavigate(newPostPath)}
-        className="bg-primary text-primary-foreground hover:bg-primary/90 focus-visible:ring-ring inline-flex items-center gap-1.5 rounded-lg px-3.5 py-1.5 text-sm font-medium shadow-sm transition-colors focus:outline-none focus-visible:ring-2"
-      >
-        <Plus className="h-3.5 w-3.5" aria-hidden />
-        New Post
-      </button>
-    )
+  if (isDashboard || currentPath === '/posts' || currentPath === '/pages') {
+    return null
   }
 
   if (currentPath === '/posts/types') {
@@ -177,22 +134,6 @@ function computePageActions({
     )
   }
 
-  // Pages list — "+ New page" routes to the page creation flow. Handled
-  // explicitly (not via the collection loop) so the label/route stay
-  // exact even though `pages` is a reserved route.
-  if (currentPath === '/pages') {
-    return (
-      <button
-        type="button"
-        onClick={() => onNavigate('/pages/new')}
-        className="bg-primary text-primary-foreground hover:bg-primary/90 focus-visible:ring-ring inline-flex items-center gap-1.5 rounded-lg px-3.5 py-1.5 text-sm font-medium shadow-sm transition-colors focus:outline-none focus-visible:ring-2"
-      >
-        <Plus className="h-3.5 w-3.5" aria-hidden />
-        New page
-      </button>
-    )
-  }
-
   // List views — surface "+ New X" so authors can keep creating without
   // hunting for a per-list button. Skip on editor views; those have their
   // own toolbar.
@@ -221,19 +162,6 @@ interface CollectionMeta {
   admin?: { hidden?: boolean }
 }
 
-/**
- * Where "+ New Post" should land, given the configured post-type
- * collections:
- *   - exactly one  → straight to that type's editor (`/<slug>/new`)
- *   - more than one → the type picker (`/posts/new`)
- *   - none          → the Post Type setup instructions
- */
-function resolveNewPostPath(postCollections: CollectionMeta[]): string {
-  if (postCollections.length === 1) return `/${postCollections[0]!.slug}/new`
-  if (postCollections.length > 1) return '/posts/new'
-  return '/posts/types/new'
-}
-
 function collectionList(config: any): CollectionMeta[] {
   if (!config?.collections) return []
   const raw = config.collections

package/src/layout/primitives/PageContainer.tsx

@@ -78,11 +78,7 @@ export function PageContainer({
           <header className="flex flex-col gap-3 md:flex-row md:items-start md:justify-between">
             {(title || description) && (
               <div className="min-w-0">
-                {title && (
-                  <h1 className="text-foreground truncate text-2xl font-medium tracking-tight">
-                    {title}
-                  </h1>
-                )}
+                {title && <h1 className="text-foreground truncate">{title}</h1>}
                 {description && <p className="text-muted-foreground mt-1 text-sm">{description}</p>}
               </div>
             )}

package/src/lib/pages-service.ts

@@ -510,6 +510,24 @@ export async function bulkUpdatePages(
   })
 }
 
+/** Duplicate a single page. Server resets status to DRAFT and appends "(Copy)". */
+export async function duplicatePage(id: string): Promise<{ id?: string; error?: string }> {
+  const res = await cmsApi<DocumentApiRow>(
+    `/collections/${PAGES_COLLECTION}/${encodeURIComponent(id)}/duplicate`,
+    { method: 'POST' },
+  )
+  if (res.error) return { error: res.error }
+  return { id: res.data?.id }
+}
+
+/** Soft-delete a single page. */
+export async function deletePage(id: string): Promise<{ error?: string }> {
+  const res = await cmsApi(`/collections/${PAGES_COLLECTION}/${encodeURIComponent(id)}`, {
+    method: 'DELETE',
+  })
+  return res.error ? { error: res.error } : {}
+}
+
 export async function bulkDeletePages(ids: string[]): Promise<BulkResult> {
   return mapWithConcurrency(ids, 5, async (id) => {
     const res = await cmsApi(`/collections/${PAGES_COLLECTION}/${encodeURIComponent(id)}`, {

package/src/lib/posts-service.ts

@@ -50,6 +50,8 @@ export interface Post {
   publishDate: string | null
   updatedDate: string
   seoScore: number | null
+  /** Featured-image URL for the list thumbnail, when the document has one. */
+  imageUrl: string | null
   createdAt: string
   updatedAt: string
 }
@@ -151,6 +153,7 @@ interface PostsApiPost {
   createdAt: string
   updatedAt: string
   seoScore: number | null
+  image?: string | null
   author: { id: string; name: string } | null
 }
 
@@ -240,6 +243,7 @@ export async function fetchPosts(query: PostsQuery = {}): Promise<PostsResult> {
       publishDate: d.publishedAt ?? d.scheduledAt ?? null,
       updatedDate: pickDisplayDate(d),
       seoScore: d.seoScore,
+      imageUrl: d.image ?? null,
       createdAt: d.createdAt,
       updatedAt: d.updatedAt,
     }
@@ -282,6 +286,28 @@ export async function bulkUpdatePosts(
   return { ok, failed }
 }
 
+/** Duplicate a single post. Server resets status to DRAFT and appends "(Copy)". */
+export async function duplicatePost(
+  postTypeId: string,
+  id: string,
+): Promise<{ id?: string; error?: string }> {
+  const res = await cmsApi<{ id?: string }>(
+    `/collections/${encodeURIComponent(postTypeId)}/${encodeURIComponent(id)}/duplicate`,
+    { method: 'POST' },
+  )
+  if (res.error) return { error: res.error }
+  return { id: res.data?.id }
+}
+
+/** Soft-delete a single post. */
+export async function deletePost(postTypeId: string, id: string): Promise<{ error?: string }> {
+  const res = await cmsApi(
+    `/collections/${encodeURIComponent(postTypeId)}/${encodeURIComponent(id)}`,
+    { method: 'DELETE' },
+  )
+  return res.error ? { error: res.error } : {}
+}
+
 export async function bulkDeletePosts(
   ids: Array<{ postTypeId: string; id: string }>,
 ): Promise<{ ok: number; failed: number }> {

package/src/lib/seo-service.ts

@@ -635,6 +635,9 @@ export interface CrawlSettings {
   indexEntireSite: boolean
   includeImagesInSitemap: boolean
   includePostsInSitemap: boolean
+  sitemapEnabled: boolean
+  autoRegenerateSitemapOnPublish: boolean
+  pingSearchEnginesOnPublish: boolean
 }
 
 export async function fetchSitemapStatus(): Promise<SitemapStatus | null> {

package/src/views/Dashboard.tsx

@@ -287,6 +287,14 @@ export function Dashboard({ config, session, onNavigate }: DashboardProps) {
 
   const collections = useMemo(() => resolveCollections(config), [config])
 
+  // Hero CTA targets (mirrors the quick-action "New Post" resolution).
+  const heroNewPostPath = useMemo(() => {
+    const postTypes = collections.filter((c) => c.type === 'post')
+    if (postTypes.length === 1) return `/${postTypes[0]!.slug}/new`
+    return postTypes.length > 1 ? '/posts/new' : '/posts/types/new'
+  }, [collections])
+  const siteUrl: string | null = config?.site?.url ?? config?.seo?.siteUrl ?? null
+
   // ── Stat cards ──────────────────────────────────────────────────────────
   const statCards: StatCardData[] = useMemo(() => {
     const counts = stats?.collectionCounts ?? {}
@@ -561,24 +569,46 @@ export function Dashboard({ config, session, onNavigate }: DashboardProps) {
       )}
 
       {/* Hero greeting ─────────────────────────────────────────────────
-          Primary "+ New Post" and "View Site" actions live in the top bar
-          (Header.tsx page-action slot), not here, so the hero is purely
-          informational and the dashboard's chrome-level affordances stay
-          consistent across navigation. The on-page secondary action row
-          below covers the same creation paths plus authoring shortcuts. */}
-      <div className="flex flex-col gap-1 sm:gap-0.5">
-        <h1 className="text-foreground text-xl font-medium tracking-tight sm:text-2xl">
-          {greeting}, {userName} <span aria-hidden>👋</span>
-        </h1>
-        <p className="text-muted-foreground text-sm">
-          {dateStr}
-          {totalIssues > 0 && (
-            <span className="hidden sm:inline">
-              {' · '}
-              {totalIssues} content item{totalIssues === 1 ? '' : 's'} need attention
-            </span>
-          )}
-        </p>
+          Per the design, the primary "+ New Post" and "View Site" actions
+          sit on the right of the hero (`.dash-hdr` → `.dh-r`), not in the
+          top bar. The quick-action row below keeps the wider authoring
+          shortcuts. */}
+      <div className="flex flex-wrap items-start justify-between gap-3">
+        <div className="flex flex-col gap-1 sm:gap-0.5">
+          <h1 className="text-foreground">
+            {greeting}, {userName} <span aria-hidden>👋</span>
+          </h1>
+          <p className="text-muted-foreground text-sm">
+            {dateStr}
+            {totalIssues > 0 && (
+              <span className="hidden sm:inline">
+                {' · '}
+                {totalIssues} content item{totalIssues === 1 ? '' : 's'} need attention
+              </span>
+            )}
+          </p>
+        </div>
+        <div className="flex items-center gap-2">
+          <button
+            type="button"
+            onClick={() => nav(heroNewPostPath)}
+            className="bg-primary text-primary-foreground hover:bg-primary/90 focus-visible:ring-ring inline-flex items-center gap-1.5 rounded-lg px-3.5 py-1.5 text-sm font-medium shadow-sm transition-colors focus:outline-none focus-visible:ring-2"
+          >
+            <Plus className="h-3.5 w-3.5" aria-hidden />
+            New Post
+          </button>
+          {siteUrl ? (
+            <a
+              href={siteUrl}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="border-border bg-card text-foreground hover:bg-accent inline-flex items-center gap-1.5 rounded-lg border px-3 py-1.5 text-sm font-medium transition-colors"
+            >
+              <ExternalLink className="h-3.5 w-3.5" aria-hidden />
+              View Site
+            </a>
+          ) : null}
+        </div>
       </div>
 
       {/* Quick actions ──────────────────────────────────────────────── */}

package/src/views/FormEditor.tsx

@@ -16,6 +16,7 @@ import {
 } from 'lucide-react'
 import { useApiData } from '../lib/useApiData.js'
 import { cmsApi } from '../lib/api.js'
+import { Toggle } from '../components/ui/Toggle.js'
 
 interface FormField {
   id: string
@@ -463,15 +464,11 @@ export function FormEditor({ formId, onNavigate }: FormEditorProps) {
         {expandedSection === 'analytics' && (
           <div className="border-border border-t p-4">
             <div className="mb-4 flex items-center gap-3">
-              <label className="relative inline-flex cursor-pointer items-center">
-                <input
-                  type="checkbox"
-                  checked={analytics.enabled}
-                  onChange={(e) => setAnalytics((a) => ({ ...a, enabled: e.target.checked }))}
-                  className="peer sr-only"
-                />
-                <div className="bg-muted peer peer-checked:bg-primary peer-focus:ring-ring/50 after:border-border after:bg-card h-5 w-9 rounded-full peer-focus:ring-2 peer-focus:outline-none after:absolute after:top-[2px] after:left-[2px] after:h-4 after:w-4 after:rounded-full after:border after:transition-all after:content-[''] peer-checked:after:translate-x-full peer-checked:after:border-white" />
-              </label>
+              <Toggle
+                checked={analytics.enabled}
+                onCheckedChange={(v) => setAnalytics((a) => ({ ...a, enabled: v }))}
+                aria-label="Push events to Google Analytics 4"
+              />
               <span className="text-foreground text-sm font-medium">
                 Push events to Google Analytics 4
               </span>

package/src/views/FormEntries.tsx

@@ -234,7 +234,7 @@ export function FormEntries({ onNavigate }: FormEntriesProps) {
     <div className="space-y-5 p-6">
       <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
         <div>
-          <h1 className="text-foreground text-2xl font-medium">All Entries</h1>
+          <h1 className="text-foreground">All Entries</h1>
           <p className="text-muted-foreground mt-1 text-sm">
             {total} {total === 1 ? 'submission' : 'submissions'} across your forms
           </p>

package/src/views/FormSubmissions.tsx

@@ -254,7 +254,7 @@ export function FormSubmissions({ formId, onNavigate }: FormSubmissionsProps) {
         </button>
         <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
           <div>
-            <h1 className="text-foreground text-2xl font-medium">
+            <h1 className="text-foreground">
               {formName ? `${formName} — Submissions` : 'Submissions'}
             </h1>
             <p className="text-muted-foreground mt-1 text-sm">

package/src/views/Forms.tsx

@@ -158,7 +158,7 @@ export function Forms({ onNavigate }: FormsProps) {
     <div className="space-y-5 p-6">
       <header className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
         <div>
-          <h1 className="text-foreground text-2xl font-medium">Forms</h1>
+          <h1 className="text-foreground">Forms</h1>
           <p className="text-muted-foreground mt-1 text-sm">
             Manage forms and view incoming submissions
           </p>

package/src/views/MediaBrowser.tsx

@@ -30,6 +30,8 @@ import { sortByRelevance, type SortConfig, toggleSort } from '../lib/search.js'
 import { useApiData } from '../lib/useApiData.js'
 import { cmsApi } from '../lib/api.js'
 import { FolderTree, type FolderSelection } from '../components/FolderTree.js'
+import { StatusBadge } from '../components/ui/StatusBadge.js'
+import { StatPill } from '../components/ui/StatPill.js'
 
 interface MediaItem {
   id: number | string
@@ -62,6 +64,14 @@ function matchesMediaType(item: MediaItem, filterType: string): boolean {
   return item.type === filterType
 }
 
+function formatStorage(bytes: number): string {
+  if (bytes <= 0) return '0 B'
+  const units = ['B', 'KB', 'MB', 'GB', 'TB']
+  const i = Math.min(units.length - 1, Math.floor(Math.log2(bytes) / 10))
+  const value = bytes / 1024 ** i
+  return `${value >= 100 || i === 0 ? Math.round(value) : value.toFixed(1)} ${units[i]}`
+}
+
 function MediaPreview({ item }: { item: MediaItem }) {
   if (isImageMedia(item)) {
     return (
@@ -149,6 +159,22 @@ export function MediaBrowser({ onNavigate }: MediaBrowserProps) {
     return results
   }, [mediaItems, searchQuery, filterType, sortConfig])
 
+  // Header stat pills (design `.mc-stats`): counts over the current folder
+  // scope, before search/type filters, so the numbers describe the library.
+  const mediaStats = useMemo(() => {
+    let images = 0
+    let videos = 0
+    let documents = 0
+    let bytes = 0
+    for (const item of mediaItems) {
+      if (item.type?.startsWith('image/') || isImageMedia(item)) images++
+      else if (item.type?.startsWith('video/')) videos++
+      else documents++
+      bytes += item.sizeBytes || 0
+    }
+    return { total: mediaItems.length, images, videos, documents, bytes }
+  }, [mediaItems])
+
   const openDetail = (item: MediaItem) => {
     setActiveItem(item)
     setEditAlt(item.altTag ?? '')
@@ -411,8 +437,14 @@ export function MediaBrowser({ onNavigate }: MediaBrowserProps) {
             <FolderInput className="text-muted-foreground h-5 w-5" />
           </button>
           <div>
-            <h1 className="text-foreground mb-1 text-xl font-medium sm:text-2xl">Media Library</h1>
-            <p className="text-muted-foreground text-sm">{filteredAndSorted.length} files</p>
+            <h1 className="text-foreground mb-1">Media Library</h1>
+            <div className="flex flex-wrap items-center gap-1.5">
+              <StatPill value={mediaStats.total} label="Total Files" />
+              <StatPill value={mediaStats.images} label="Images" />
+              <StatPill value={mediaStats.videos} label="Videos" />
+              <StatPill value={mediaStats.documents} label="Documents" />
+              <StatPill value={formatStorage(mediaStats.bytes)} label="Storage used" />
+            </div>
           </div>
         </div>
         <div>
@@ -722,13 +754,9 @@ export function MediaBrowser({ onNavigate }: MediaBrowserProps) {
                               </td>
                               <td className="px-3 py-2">
                                 {hasIssues ? (
-                                  <span className="bg-warning/15 text-warning inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs font-medium">
-                                    <AlertTriangle className="h-3 w-3" /> Needs attention
-                                  </span>
+                                  <StatusBadge tone="warning">Needs attention</StatusBadge>
                                 ) : (
-                                  <span className="bg-success/15 text-success inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium">
-                                    Complete
-                                  </span>
+                                  <StatusBadge tone="success">Complete</StatusBadge>
                                 )}
                               </td>
                             </tr>

package/src/views/Pages/PageTagManager.tsx

@@ -85,9 +85,7 @@ export function PageTagManager({ onNavigate, startCreating = false }: PageTagMan
 
       <div className="mb-5 flex items-center justify-between">
         <div>
-          <h1 className="text-foreground mb-1 text-xl font-medium tracking-tight sm:text-2xl">
-            Page Tags
-          </h1>
+          <h1 className="text-foreground mb-1">Page Tags</h1>
           <p className="text-muted-foreground text-sm">
             Organize pages with reusable, color-coded labels.
           </p>