@growth-labs/cms 0.8.24 → 0.8.26

package/src/ui/screens/podcast-listening-data.ts

@@ -12,6 +12,7 @@ export type PodcastSortKey =
 	| 'completes'
 	| 'completionRate'
 	| 'totalListeningSeconds'
+	| 'avgListeningSecondsPerListener'
 
 /** Defensive read of one metric: a non-finite value renders as 0, not NaN. */
 function num(value: unknown): number {
@@ -19,6 +20,20 @@ function num(value: unknown): number {
 	return Number.isFinite(n) ? n : 0
 }
 
+function measuredCount(value: unknown): number | null {
+	return typeof value === 'number' && Number.isInteger(value) && value >= 0 ? value : null
+}
+
+function measuredAverage(value: unknown, count: number | null): number | null {
+	return count !== null &&
+		count > 0 &&
+		typeof value === 'number' &&
+		Number.isFinite(value) &&
+		value >= 0
+		? value
+		: null
+}
+
 function normalizeEpisode(input: unknown): PodcastListeningEpisode | null {
 	if (!input || typeof input !== 'object') return null
 	const row = input as Record<string, unknown>
@@ -26,6 +41,7 @@ function normalizeEpisode(input: unknown): PodcastListeningEpisode | null {
 	const hasListening = typeof row.totalListeningSeconds === 'number'
 	const listening = hasListening ? num(row.totalListeningSeconds) : null
 	const listeners = num(row.listeners)
+	const measuredListeners = hasListening ? measuredCount(row.measuredListeners) : null
 	return {
 		slug,
 		...(typeof row.title === 'string' && row.title.length > 0 ? { title: row.title } : {}),
@@ -39,8 +55,11 @@ function normalizeEpisode(input: unknown): PodcastListeningEpisode | null {
 		completes: num(row.completes),
 		completionRate: num(row.completionRate),
 		totalListeningSeconds: listening,
+		measuredListeners,
 		avgListeningSecondsPerListener:
-			listening !== null && listeners > 0 ? listening / listeners : null,
+			listening !== null
+				? measuredAverage(row.avgListeningSecondsPerListener, measuredListeners)
+				: null,
 	}
 }
 
@@ -61,6 +80,10 @@ export function normalizePodcastListening(input: unknown): PodcastListening | nu
 	const totalsRow = body.totals as Record<string, unknown> | undefined
 	const totals = totalsRow ?? {}
 	const rangeRow = body.range as Record<string, unknown> | undefined
+	const measuredListeners =
+		typeof totals.totalListeningSeconds === 'number'
+			? measuredCount(totals.measuredListeners)
+			: null
 	return {
 		episodes,
 		totals: {
@@ -71,11 +94,20 @@ export function normalizePodcastListening(input: unknown): PodcastListening | nu
 			completionRate: num(totals.completionRate),
 			totalListeningSeconds:
 				typeof totals.totalListeningSeconds === 'number' ? num(totals.totalListeningSeconds) : null,
+			measuredListeners,
+			avgListeningSecondsPerListener: measuredAverage(
+				totals.avgListeningSecondsPerListener,
+				measuredListeners,
+			),
 		},
 		range: {
 			from: typeof rangeRow?.from === 'string' ? rangeRow.from : '',
 			to: typeof rangeRow?.to === 'string' ? rangeRow.to : '',
 		},
+		...(typeof body.listeningStartedAt === 'string' &&
+		Number.isFinite(Date.parse(body.listeningStartedAt))
+			? { listeningStartedAt: body.listeningStartedAt }
+			: {}),
 	}
 }
 

package/src/ui/styles/broadsheet.css

@@ -398,3 +398,138 @@ a:focus-visible {
 .drag-handle { display: flex; align-items: center; justify-content: center; width: 18px; height: 22px; border-radius: 4px; color: var(--ink-faint); font-size: 11px; letter-spacing: -2px; cursor: grab; user-select: none; }
 .drag-handle:hover { background: var(--hover); color: var(--ink-soft); }
 .drag-handle:active { cursor: grabbing; }
+
+/* ── Cards and chips (survey results and any screen that uses them) ───── */
+.card {
+  background: var(--panel);
+  border: 1px solid var(--border);
+  box-shadow: var(--shadow-faint);
+  padding: 20px 22px;
+  min-width: 0;
+}
+.chip-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
+.chip {
+  display: inline-flex; align-items: center; gap: 6px;
+  height: 28px; padding: 0 12px;
+  border: 1px solid var(--border); border-radius: var(--radius-pill);
+  background: var(--panel); color: var(--ink-soft);
+  font-size: 12.5px; font-weight: 600; white-space: nowrap;
+  transition: background .12s, color .12s, border-color .12s;
+}
+button.chip:hover { background: var(--hover); color: var(--ink); }
+.chip[aria-pressed="true"] { background: var(--surface-inverse); border-color: var(--surface-inverse); color: var(--text-on-inverse); }
+.chip.is-quiet { height: 22px; padding: 0 8px; font-size: 11px; font-weight: 500; color: var(--ink-muted); background: var(--panel-2); }
+
+/* ── Survey results ───────────────────────────────────────────────────
+   Chart hues were run through the dataviz palette validator (lightness band,
+   chroma, CVD and normal-vision separation, 3:1 against the card) for each
+   theme. Group hues g0–g4 mark identity; mood hues mark polarity only. */
+.svy {
+  --svy-g0: #00897B; --svy-g1: #C8701A; --svy-g2: #2F6FBD; --svy-g3: #C2185B; --svy-g4: #7A5FD6;
+  --svy-happy: #00897B; --svy-unhappy: #D2453C; --svy-neutral: #9AA3AA;
+  --svy-bar: var(--svy-g0);
+  --svy-bar-soft: color-mix(in srgb, var(--svy-g0) 45%, var(--panel));
+}
+[data-theme="dark"] .svy {
+  --svy-g0: #169E90; --svy-g1: #C97C2C; --svy-g2: #4A8AD8; --svy-g3: #E0588C; --svy-g4: #9580EC;
+  --svy-happy: #169E90; --svy-unhappy: #E5675F; --svy-neutral: #79838A;
+}
+.svy-section { margin-top: 36px; }
+.svy-section-head { margin-bottom: 14px; }
+.svy-h2 { font-size: 22px; }
+.svy-control { display: inline-flex; flex-direction: column; gap: 6px; min-width: 220px; max-width: 360px; }
+.svy-control .selectbox { padding: 8px 10px; font-size: 13px; }
+.svy-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px; }
+.svy-swatch { display: inline-block; width: 10px; height: 10px; border-radius: 2px; flex: none; margin-right: 7px; vertical-align: -1px; }
+.svy .g0 { background: var(--svy-g0); } .svy .g1 { background: var(--svy-g1); } .svy .g2 { background: var(--svy-g2); }
+.svy .g3 { background: var(--svy-g3); } .svy .g4 { background: var(--svy-g4); }
+.svy .mood-happy { background: var(--svy-happy); }
+.svy .mood-unhappy { background: var(--svy-unhappy); }
+.svy .mood-neutral { background: var(--svy-neutral); }
+
+/* Headline */
+.svy-headline { margin-top: 8px; padding: 24px 28px; }
+.svy-headline-prompt { font-family: var(--font-display); font-size: 19px; font-weight: 600; color: var(--ink); margin: 10px 0 18px; line-height: 1.3; }
+.svy-headline-body { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(0, 2fr); gap: 36px; align-items: end; }
+.svy-big { font-family: var(--font-display); font-size: 56px; font-weight: 600; line-height: 1; letter-spacing: var(--tracking-tighter); color: var(--ink); font-variant-numeric: tabular-nums; }
+.svy-big-label { font-size: 14px; color: var(--ink-soft); margin-top: 8px; line-height: 1.4; }
+.svy-facts { margin: 18px 0 0; display: grid; gap: 8px; }
+.svy-facts > div { display: flex; justify-content: space-between; gap: 16px; padding-bottom: 8px; border-bottom: 1px solid var(--border-soft); font-size: 13px; }
+.svy-facts > div:last-child { border-bottom: 0; padding-bottom: 0; }
+.svy-facts dt { color: var(--ink-soft); display: flex; align-items: center; }
+.svy-facts dd { margin: 0; color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
+
+/* Columns (scale questions) */
+.svy-cols { margin: 0; min-width: 0; }
+.svy-cols-plot { display: grid; gap: 10px; height: 170px; align-items: end; border-bottom: 1px solid var(--border); }
+.svy-col { display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; height: 100%; min-width: 0; }
+.svy-col-value { text-align: center; font-size: 12px; font-weight: 600; color: var(--ink-soft); margin-bottom: 4px; font-variant-numeric: tabular-nums; }
+.svy-col-bar { display: block; min-height: 2px; border-radius: 4px 4px 0 0; max-height: calc(100% - 22px); }
+.svy-cols-axis { display: grid; gap: 10px; margin-top: 6px; }
+.svy-cols-axis span { text-align: center; font-size: 12px; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
+.svy-cols-avg { position: relative; height: 20px; margin-top: 2px; }
+.svy-cols-avg span { position: absolute; transform: translateX(-50%); white-space: nowrap; font-size: 11.5px; font-weight: 600; color: var(--ink); }
+.svy-cols-caption { display: flex; justify-content: space-between; font-size: 11px; color: var(--ink-faint); margin-top: 4px; }
+
+/* Question cards */
+.svy-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); align-items: start; }
+.svy-q-prompt { font-family: var(--font-display); font-size: 16px; font-weight: 600; line-height: 1.35; color: var(--ink); margin: 8px 0 6px; }
+.svy-takeaway { margin: 0 0 16px; font-size: 13.5px; line-height: 1.45; color: var(--ink-soft); }
+.svy-note { margin: 12px 0 0; font-size: 12px; color: var(--ink-muted); line-height: 1.45; }
+.svy-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
+.svy-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px 14px; align-items: baseline; }
+.svy-bar-label { font-size: 13px; line-height: 1.35; color: var(--ink); display: flex; align-items: center; }
+.svy-bar-value { display: inline-flex; align-items: baseline; gap: 8px; font-size: 13px; font-variant-numeric: tabular-nums; color: var(--ink); }
+.svy-count { font-size: 11.5px; color: var(--ink-muted); }
+.svy-track { grid-column: 1 / -1; display: flex; height: 10px; background: var(--panel-2); overflow: hidden; }
+.svy-track.sm { height: 7px; }
+.svy-fill { display: block; height: 100%; background: var(--svy-bar-soft); border-radius: 0 4px 4px 0; }
+.svy-fill.is-top { background: var(--svy-bar); }
+.svy-stack { gap: 2px; background: transparent; }
+.svy-seg { display: block; height: 100%; }
+.svy-seg:first-child { border-radius: 0; }
+.svy-seg:last-child { border-radius: 0 4px 4px 0; }
+.svy-bar.is-grouped { grid-template-columns: minmax(0, 1fr); }
+.svy-gbars { display: grid; gap: 3px; }
+.svy-gbar { display: grid; grid-template-columns: minmax(0, 1fr) 150px; gap: 10px; align-items: center; }
+.svy-gbar .svy-track { grid-column: auto; }
+.svy-gbar-value { font-size: 11.5px; color: var(--ink-soft); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.svy-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin: 0 0 14px; }
+.svy-legend-item { display: inline-flex; align-items: center; font-size: 12.5px; color: var(--ink); }
+.svy-compare-status { margin: 0 0 14px; }
+
+/* Callouts */
+.svy-callout {
+  margin: 0 0 12px; padding: 10px 14px; font-size: 13px; line-height: 1.5; color: var(--ink);
+  background: var(--amber-tint); border-left: 3px solid var(--amber);
+  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
+}
+.svy-callout.is-alert { background: var(--red-tint); border-left-color: var(--red); }
+
+/* Comments */
+.svy-comments { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); align-items: start; }
+.svy-comment { display: flex; flex-direction: column; gap: 12px; }
+.svy-comment-entry { display: grid; gap: 10px; }
+.svy-quote {
+  margin: 0; padding: 2px 0 2px 14px; border-left: 3px solid var(--svy-g0);
+  font-size: 15px; line-height: 1.6; color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere;
+}
+.svy-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: 12px; color: var(--ink-muted); }
+.svy-rating { display: inline-flex; align-items: center; font-weight: 600; color: var(--ink); }
+.svy-answers summary, .svy-silent summary { cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--ink-soft); }
+.svy-answers dl { margin: 10px 0 0; display: grid; gap: 8px; }
+.svy-answers dt { font-size: 11.5px; color: var(--ink-muted); }
+.svy-answers dd { margin: 2px 0 0; font-size: 13px; color: var(--ink); }
+.svy-silent { margin-top: 16px; }
+.svy-silent ul { margin: 10px 0 0; padding-left: 18px; display: grid; gap: 4px; font-size: 12.5px; color: var(--ink-muted); }
+.svy-pager { display: flex; justify-content: space-between; margin-top: 20px; }
+
+@media (max-width: 1080px) {
+  .svy-grid, .svy-comments { grid-template-columns: minmax(0, 1fr); }
+  .svy-headline-body { grid-template-columns: minmax(0, 1fr); gap: 24px; }
+}
+@media (max-width: 720px) {
+  .svy-headline { padding: 18px; }
+  .svy-big { font-size: 44px; }
+  .svy-control { min-width: 0; width: 100%; max-width: none; }
+}