From 847f08a975853e20fc1901454c90b3b13731830b Mon Sep 17 00:00:00 2001
From: Patrick Mulligan <patjmulligan@protonmail.com>
Date: Tue, 28 Jul 2026 18:45:41 +0200
Subject: [PATCH] feat(deck): make the raise slide an interactive cost
 drill-down

Click any of the four investment categories (or its bar segment) to expand
its line-item breakdown inline; the proportion bar highlights the selected
slice and dims the rest. Buttons are keyboard-focusable with aria-pressed;
respects prefers-reduced-motion. Register ChevronRight in the Icon map.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 src/deck/components/Icon.vue                |   2 +
 src/deck/slides/InvestmentOverviewSlide.vue | 149 ++++++++++++++++++--
 2 files changed, 138 insertions(+), 13 deletions(-)

diff --git a/src/deck/components/Icon.vue b/src/deck/components/Icon.vue
index 950b284..1ecde30 100644
--- a/src/deck/components/Icon.vue
+++ b/src/deck/components/Icon.vue
@@ -29,6 +29,7 @@ import {
   Sun,
   Moon,
   MapPin,
+  ChevronRight,
   type LucideProps,
 } from '@lucide/vue'
 import type { FunctionalComponent } from 'vue'
@@ -62,6 +63,7 @@ const registry: Record<string, FunctionalComponent<LucideProps>> = {
   Sun,
   Moon,
   MapPin,
+  ChevronRight,
 }
 
 const props = defineProps<{ name: string }>()
diff --git a/src/deck/slides/InvestmentOverviewSlide.vue b/src/deck/slides/InvestmentOverviewSlide.vue
index e7608d1..0c1ae78 100644
--- a/src/deck/slides/InvestmentOverviewSlide.vue
+++ b/src/deck/slides/InvestmentOverviewSlide.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { ref, computed } from 'vue'
 import SlideFrame from '../components/SlideFrame.vue'
 import Icon from '../components/Icon.vue'
 import PlaceholderBadge from '../components/PlaceholderBadge.vue'
@@ -17,12 +18,30 @@ const text: Record<string, string> = {
   indigo: 'text-indigo-300',
   clay: 'text-clay-400',
 }
+const ring: Record<string, string> = {
+  amber: 'border-amber-400/50 bg-amber-400/[0.06]',
+  pine: 'border-pine-500/50 bg-pine-500/[0.06]',
+  indigo: 'border-indigo-500/50 bg-indigo-500/[0.06]',
+  clay: 'border-clay-400/50 bg-clay-400/[0.06]',
+}
+
+// interactive drill-down: which category is expanded (null = overview)
+const selected = ref<string | null>(null)
+const selectedCat = computed(() => costCategories.find((c) => c.id === selected.value) ?? null)
+function toggle(id: string) {
+  selected.value = selected.value === id ? null : id
+}
+const pct = (c: (typeof costCategories)[number]) => (categoryTotal(c) / raiseTotal) * 100
 </script>
 
 <template>
-  <SlideFrame kicker="The raise" title="Where the investment goes">
-    <div class="grid items-center gap-10 lg:grid-cols-[1fr_1.1fr]">
-      <!-- headline number + proportion bar -->
+  <SlideFrame
+    kicker="The raise"
+    title="Where the investment goes"
+    subtitle="Tap any category to break down its costs."
+  >
+    <div class="grid items-start gap-10 lg:grid-cols-[1fr_1.05fr]">
+      <!-- left: headline number, proportion bar, live detail panel -->
       <div>
         <div class="flex items-end gap-3">
           <span class="font-display text-6xl font-bold text-sand">{{ fmtUsd(raiseTotal) }}</span>
@@ -32,29 +51,99 @@ const text: Record<string, string> = {
           One shared core stack, plus a launch for each of the three entities.
         </p>
 
+        <!-- proportion bar doubles as a selector -->
         <div class="mt-8 flex h-4 w-full overflow-hidden rounded-full">
-          <div
+          <button
             v-for="c in costCategories"
             :key="c.id"
-            :class="barBg[c.accent]"
-            :style="{ width: `${(categoryTotal(c) / raiseTotal) * 100}%` }"
-            class="h-full"
+            class="h-full cursor-pointer transition-opacity"
+            :class="[barBg[c.accent], selected && selected !== c.id ? 'opacity-30' : 'opacity-100']"
+            :style="{ width: `${pct(c)}%` }"
+            :title="`${c.title} · ${fmtUsd(categoryTotal(c))}`"
+            :aria-label="`Show ${c.title} breakdown`"
+            @click="toggle(c.id)"
           />
         </div>
         <div class="mt-3 flex flex-wrap gap-x-5 gap-y-1 text-xs text-sand-dim">
           <span v-for="c in costCategories" :key="c.id" class="flex items-center gap-2">
             <span class="size-2 rounded-full" :class="barBg[c.accent]" />
-            {{ Math.round((categoryTotal(c) / raiseTotal) * 100) }}%
+            {{ Math.round(pct(c)) }}%
           </span>
         </div>
+
+        <!-- detail panel: swaps between hint and the selected breakdown -->
+        <Transition name="detail" mode="out-in">
+          <div
+            v-if="selectedCat"
+            :key="selectedCat.id"
+            class="mt-6 rounded-2xl border p-5"
+            :class="ring[selectedCat.accent]"
+          >
+            <div class="flex items-center gap-3">
+              <span class="grid size-9 place-items-center rounded-lg bg-white/5" :class="text[selectedCat.accent]">
+                <Icon :name="selectedCat.icon" class="size-5" />
+              </span>
+              <div class="min-w-0 flex-1">
+                <h3 class="font-display text-base font-semibold leading-tight text-sand">
+                  {{ selectedCat.title }}
+                </h3>
+                <p class="truncate text-xs text-sand-dim">{{ selectedCat.subtitle }}</p>
+              </div>
+              <button
+                class="grid size-7 shrink-0 place-items-center rounded-full border border-white/10 text-sand-dim transition hover:bg-white/10"
+                aria-label="Close breakdown"
+                @click="selected = null"
+              >
+                <Icon name="ArrowRight" class="size-4 rotate-180" />
+              </button>
+            </div>
+
+            <ul class="mt-4 space-y-2">
+              <li
+                v-for="item in selectedCat.items"
+                :key="item.label"
+                class="flex items-baseline justify-between gap-3 text-sm"
+              >
+                <span class="text-sand-dim">
+                  {{ item.label }}
+                  <span v-if="item.note" class="text-[11px] text-sand-dim/60">· {{ item.note }}</span>
+                </span>
+                <span class="shrink-0 tabular-nums text-sand">{{ fmtUsd(item.amount) }}</span>
+              </li>
+            </ul>
+
+            <div class="mt-4 flex items-center justify-between border-t border-white/10 pt-3">
+              <span class="text-xs uppercase tracking-wider text-sand-dim">Subtotal</span>
+              <span class="font-display text-lg font-semibold" :class="text[selectedCat.accent]">
+                {{ fmtUsd(categoryTotal(selectedCat)) }}
+              </span>
+            </div>
+          </div>
+
+          <div
+            v-else
+            key="hint"
+            class="mt-6 flex items-center gap-3 rounded-2xl border border-dashed border-white/15 p-5 text-sm text-sand-dim"
+          >
+            <Icon name="ArrowRight" class="size-4 shrink-0 text-amber-300" />
+            Select a category to see its detailed line-item breakdown.
+          </div>
+        </Transition>
       </div>
 
-      <!-- four categories -->
+      <!-- right: four selectable category cards -->
       <div class="space-y-2.5">
-        <div
+        <button
           v-for="c in costCategories"
           :key="c.id"
-          class="flex items-center gap-4 rounded-2xl border border-white/10 bg-white/[0.03] p-4"
+          class="flex w-full items-center gap-4 rounded-2xl border p-4 text-left transition"
+          :class="
+            selected === c.id
+              ? ring[c.accent]
+              : 'border-white/10 bg-white/[0.03] hover:border-white/25 hover:bg-white/[0.06]'
+          "
+          :aria-pressed="selected === c.id"
+          @click="toggle(c.id)"
         >
           <span class="grid size-10 shrink-0 place-items-center rounded-xl bg-white/5" :class="text[c.accent]">
             <Icon :name="c.icon" class="size-5" />
@@ -63,9 +152,43 @@ const text: Record<string, string> = {
             <h3 class="font-display text-base font-semibold text-sand">{{ c.title }}</h3>
             <p class="truncate text-xs text-sand-dim">{{ c.subtitle }}</p>
           </div>
-          <span class="font-display text-lg font-semibold text-sand">{{ fmtUsd(categoryTotal(c)) }}</span>
-        </div>
+          <span class="shrink-0 font-display text-lg font-semibold text-sand">
+            {{ fmtUsd(categoryTotal(c)) }}
+          </span>
+          <Icon
+            name="ChevronRight"
+            class="size-4 shrink-0 text-sand-dim transition-transform"
+            :class="selected === c.id ? 'rotate-90' : ''"
+          />
+        </button>
+        <p class="pt-1 text-center text-[11px] text-sand-dim/70">
+          {{ costCategories.length }} categories · {{ fmtUsd(raiseTotal) }} total
+        </p>
       </div>
     </div>
   </SlideFrame>
 </template>
+
+<style scoped>
+.detail-enter-active,
+.detail-leave-active {
+  transition:
+    opacity 0.2s ease,
+    transform 0.2s ease;
+}
+.detail-enter-from,
+.detail-leave-to {
+  opacity: 0;
+  transform: translateY(6px);
+}
+@media (prefers-reduced-motion: reduce) {
+  .detail-enter-active,
+  .detail-leave-active {
+    transition: opacity 0.15s ease;
+  }
+  .detail-enter-from,
+  .detail-leave-to {
+    transform: none;
+  }
+}
+</style>