feat(ux): adopt shared Empty primitive across all empty states

- one Empty/EmptyHeader/EmptyMedia/EmptyTitle/EmptyDescription
  component replaces ~18 ad-hoc empty states
- projects gains a real empty state (was four bare columns) with a
  create CTA wired to the existing handler
- governance/ops/customize/comms/comments empty states unified;
  existing CTAs and conditions preserved (presentational only)

app/(app)/customize/panels/area-leads-panel.tsx

@@ -3,8 +3,10 @@
 import { useState } from 'react'
 import { useRouter } from 'next/navigation'
 import { toast } from 'sonner'
+import { UserCog } from 'lucide-react'
 import { createAreaLeadRole, assignAreaLead, unassignAreaLead, deleteAreaLeadRole } from '@/lib/actions'
 import { Card } from './card'
+import { Empty, EmptyHeader, EmptyMedia, EmptyTitle, EmptyDescription } from '@/components/ui/empty'
 
 interface AreaLead {
   id: string
@@ -64,7 +66,13 @@ export function AreaLeadsPanel({ isAdmin, areaLeads: initial, members }: Props)
       )}
 
       {rows.length === 0 ? (
-        <p className="font-sans text-sm text-muted-foreground py-2">No area-lead roles yet.</p>
+        <Empty className="border-0 p-0 md:p-6">
+          <EmptyHeader>
+            <EmptyMedia variant="icon"><UserCog /></EmptyMedia>
+            <EmptyTitle>No area-lead roles yet</EmptyTitle>
+            <EmptyDescription>Create a role per shop area, then assign a member to it. Roles without a member show as Vacant.</EmptyDescription>
+          </EmptyHeader>
+        </Empty>
       ) : (
         <ul className="divide-y divide-border">
           {rows.map(r => (

app/(app)/customize/panels/areas-panel.tsx

@@ -2,8 +2,10 @@
 
 import { useState } from 'react'
 import { toast } from 'sonner'
+import { LayoutGrid } from 'lucide-react'
 import { createArea, updateArea, deleteArea } from '@/lib/actions'
 import { Card } from './card'
+import { Empty, EmptyHeader, EmptyMedia, EmptyTitle, EmptyDescription } from '@/components/ui/empty'
 import type { Area } from './types'
 
 export function AreasPanel({ isAdmin, areas: initial }: { isAdmin: boolean; areas: Area[] }) {
@@ -36,8 +38,16 @@ export function AreasPanel({ isAdmin, areas: initial }: { isAdmin: boolean; area
           <button type="submit" className="md:col-span-3 bg-primary text-white text-xs font-sans px-3 py-1.5 rounded hover:bg-primary/90 transition">Create area</button>
         </form>
       )}
+      {areas.length === 0 && (
+        <Empty className="border-0 p-0 md:p-6">
+          <EmptyHeader>
+            <EmptyMedia variant="icon"><LayoutGrid /></EmptyMedia>
+            <EmptyTitle>No areas yet</EmptyTitle>
+            <EmptyDescription>Areas tag tasks, projects, and knowledge base entries by shop space.</EmptyDescription>
+          </EmptyHeader>
+        </Empty>
+      )}
       <ul className="divide-y divide-border">
-        {areas.length === 0 && <li className="py-6 text-center font-sans text-sm text-muted-foreground">No areas yet.</li>}
         {[...areas].sort((a, b) => a.sort_order - b.sort_order).map(a => (
           <li key={a.id} className={`py-3 flex items-center gap-3 flex-wrap ${a.is_archived ? 'opacity-50' : ''}`}>
             <input type="number" defaultValue={a.sort_order} disabled={!isAdmin} onBlur={async e => { const n = parseInt(e.target.value, 10); if (isNaN(n) || n === a.sort_order) return; const res = await updateArea({ areaId: a.id, sort_order: n }); if (res.error) { toast.error(res.error); return } setAreas(prev => prev.map(x => x.id === a.id ? { ...x, sort_order: n } : x)) }} className="w-14 bg-background border border-border text-foreground font-mono text-xs rounded px-2 py-1 focus:outline-none focus:border-primary" />

app/(app)/customize/panels/invites-panel.tsx

@@ -2,8 +2,10 @@
 
 import { useState } from 'react'
 import { toast } from 'sonner'
+import { Ticket } from 'lucide-react'
 import { createInvite, updateInvite, deleteInvite } from '@/lib/actions'
 import { Card } from './card'
+import { Empty, EmptyHeader, EmptyMedia, EmptyTitle, EmptyDescription } from '@/components/ui/empty'
 import type { Invite } from './types'
 
 function inviteLink(code: string) {
@@ -42,8 +44,16 @@ export function InvitesPanel({ isAdmin, invites: initial }: { isAdmin: boolean;
           <button type="submit" className="md:col-span-2 bg-primary text-white text-xs font-sans px-3 py-1.5 rounded hover:bg-primary/90 transition">Create invite</button>
         </form>
       )}
+      {invites.length === 0 && (
+        <Empty className="border-0 p-0 md:p-6">
+          <EmptyHeader>
+            <EmptyMedia variant="icon"><Ticket /></EmptyMedia>
+            <EmptyTitle>No invite codes yet</EmptyTitle>
+            <EmptyDescription>Create a code to let new members join, with an optional expiry or use cap.</EmptyDescription>
+          </EmptyHeader>
+        </Empty>
+      )}
       <ul className="divide-y divide-border">
-        {invites.length === 0 && <li className="py-6 text-center font-sans text-sm text-muted-foreground">No invites yet.</li>}
         {invites.map(inv => {
           const expired = inv.expires_at ? new Date(inv.expires_at) < new Date() : false
           const usedUp = inv.max_uses !== null && inv.uses_count >= inv.max_uses

app/(app)/customize/panels/onboarding-panel.tsx

@@ -2,8 +2,10 @@
 
 import { useState } from 'react'
 import { toast } from 'sonner'
+import { ListChecks } from 'lucide-react'
 import { createOnboardingStep, updateOnboardingStep, deleteOnboardingStep } from '@/lib/actions'
 import { Card } from './card'
+import { Empty, EmptyHeader, EmptyMedia, EmptyTitle, EmptyDescription } from '@/components/ui/empty'
 import type { Step } from './types'
 
 export function OnboardingPanel({ isAdmin, steps: initial }: { isAdmin: boolean; steps: Step[] }) {
@@ -28,6 +30,15 @@ export function OnboardingPanel({ isAdmin, steps: initial }: { isAdmin: boolean;
         </button>
       ) : undefined}
     >
+      {steps.length === 0 && (
+        <Empty className="border-0 p-0 md:p-6">
+          <EmptyHeader>
+            <EmptyMedia variant="icon"><ListChecks /></EmptyMedia>
+            <EmptyTitle>No steps yet</EmptyTitle>
+            <EmptyDescription>Add steps that run, in order, the first time a new member opens the app.</EmptyDescription>
+          </EmptyHeader>
+        </Empty>
+      )}
       <ul className="space-y-3">
         {[...steps].sort((a, b) => a.sort_order - b.sort_order).map(s => (
           <li key={s.id} className="border border-border rounded p-4">

app/(app)/customize/panels/roles-panel.tsx

@@ -5,7 +5,9 @@ import { useRouter } from 'next/navigation'
 import { toast } from 'sonner'
 import { upsertRoleLabel, createCustomRole, updateCustomRole, deleteCustomRole } from '@/lib/actions'
 import { BUILTIN_ROLES, DEFAULT_ROLE_LABELS } from '@/lib/role-labels'
+import { Tags } from 'lucide-react'
 import { Card } from './card'
+import { Empty, EmptyHeader, EmptyMedia, EmptyTitle, EmptyDescription } from '@/components/ui/empty'
 import type { RoleLabelRow, CustomRole } from './types'
 
 export function RolesPanel({ isAdmin, roleLabels, customRoles: initial }: { isAdmin: boolean; roleLabels: RoleLabelRow[]; customRoles: CustomRole[] }) {
@@ -110,7 +112,13 @@ export function RolesPanel({ isAdmin, roleLabels, customRoles: initial }: { isAd
           </form>
         )}
         {customRoles.length === 0 ? (
-          <p className="font-sans text-sm text-muted-foreground py-2">No custom roles yet.</p>
+          <Empty className="border-0 p-0 md:p-6">
+            <EmptyHeader>
+              <EmptyMedia variant="icon"><Tags /></EmptyMedia>
+              <EmptyTitle>No custom roles yet</EmptyTitle>
+              <EmptyDescription>Add labels for committees, mentors, or area leads. They are display-only and do not change permissions.</EmptyDescription>
+            </EmptyHeader>
+          </Empty>
         ) : (
           <ul className="divide-y divide-border">
             {customRoles.map(r => (

app/(app)/customize/panels/tiers-panel.tsx

@@ -2,8 +2,10 @@
 
 import { useState } from 'react'
 import { toast } from 'sonner'
+import { CreditCard } from 'lucide-react'
 import { createTier, updateTier, deleteTier } from '@/lib/actions'
 import { Card } from './card'
+import { Empty, EmptyHeader, EmptyMedia, EmptyTitle, EmptyDescription } from '@/components/ui/empty'
 import type { Tier } from './types'
 
 export function TiersPanel({ isAdmin, tiers: initial }: { isAdmin: boolean; tiers: Tier[] }) {
@@ -40,8 +42,16 @@ export function TiersPanel({ isAdmin, tiers: initial }: { isAdmin: boolean; tier
           <button type="submit" className="md:col-span-2 bg-primary text-white text-xs font-sans px-3 py-1.5 rounded hover:bg-primary/90 transition">Create tier</button>
         </form>
       )}
+      {tiers.length === 0 && (
+        <Empty className="border-0 p-0 md:p-6">
+          <EmptyHeader>
+            <EmptyMedia variant="icon"><CreditCard /></EmptyMedia>
+            <EmptyTitle>No tiers yet</EmptyTitle>
+            <EmptyDescription>Membership tiers set the plans members can be placed on, with prices and billing cadence.</EmptyDescription>
+          </EmptyHeader>
+        </Empty>
+      )}
       <ul className="divide-y divide-border">
-        {tiers.length === 0 && <li className="py-6 text-center font-sans text-sm text-muted-foreground">No tiers yet.</li>}
         {tiers.map(t => (
           <li key={t.id} className="py-3 flex items-center gap-3 flex-wrap">
             <div className="flex-1 min-w-0">