M12 / ST-1110: Demo gebruiker read-only (#17)

* feat(ST-1110.3): add proxy.ts demo-guard for non-GET API routes

* feat(ST-1110.3+4): demo-guard proxy + block demo in QR-pairing

- proxy.ts: gebruik unsealData ipv getIronSession (middleware-compatibel)
- pair/start: isDemo-check via cookies() guard
- pair/claim: check pairing.user.is_demo na DB-read; 403 + clearPairCookie

* feat(ST-1110.5): unify demo write-button pattern to disabled+tooltip

Convert all !isDemo && <Button> patterns to <DemoTooltip show={isDemo}>
<Button disabled={isDemo}> so demo visitors see app capabilities.
Affects: pbi-list, story-panel, story-dialog, task-list, sprint-backlog,
token-manager, product-list, activate-product-button, leave-product-button,
settings page.

* test(ST-1110.6): proxy demo-guard coverage — 403 for demo+non-GET on /api/*

* docs(ST-1110.7): document three-layer demo-readonly policy and mirror plan

components/shared/activate-product-button.tsx

@@ -3,6 +3,7 @@
 import { useRouter } from 'next/navigation'
 import { useTransition } from 'react'
 import { toast } from 'sonner'
+import { DemoTooltip } from '@/components/shared/demo-tooltip'
 import { setActiveProductAction } from '@/actions/active-product'
 
 interface Props {
@@ -18,7 +19,6 @@ export function ActivateProductButton({ productId, isDemo, redirectTo, label = '
   const [isPending, startTransition] = useTransition()
 
   function handleActivate() {
-    if (isDemo) { toast.error('Niet beschikbaar in demo-modus'); return }
     startTransition(async () => {
       const result = await setActiveProductAction(productId)
       if (result?.error) toast.error(typeof result.error === 'string' ? result.error : 'Activeren mislukt')
@@ -28,12 +28,14 @@ export function ActivateProductButton({ productId, isDemo, redirectTo, label = '
   }
 
   return (
-    <button
-      onClick={handleActivate}
-      disabled={isPending}
-      className="text-xs text-primary hover:underline font-medium disabled:opacity-50"
-    >
-      {label}
-    </button>
+    <DemoTooltip show={isDemo}>
+      <button
+        onClick={() => !isDemo && handleActivate()}
+        disabled={isDemo || isPending}
+        className="text-xs text-primary hover:underline font-medium disabled:opacity-50 disabled:no-underline"
+      >
+        {label}
+      </button>
+    </DemoTooltip>
   )
 }