+
+
Happening Now
+
+
diff --git a/packages/shared/src/components/icons/Snapshot/index.tsx b/packages/shared/src/components/icons/Snapshot/index.tsx
new file mode 100644
index 00000000000..8707b229fad
--- /dev/null
+++ b/packages/shared/src/components/icons/Snapshot/index.tsx
@@ -0,0 +1,10 @@
+import type { ReactElement } from 'react';
+import React from 'react';
+import type { IconProps } from '../../Icon';
+import Icon from '../../Icon';
+import OutlinedIcon from './outlined.svg';
+import FilledIcon from './filled.svg';
+
+export const SnapshotIcon = (props: IconProps): ReactElement => (
+ >();
+
+ useEffect(
+ () => () => {
+ if (flashTimeout.current) {
+ clearTimeout(flashTimeout.current);
+ }
+ },
+ [],
+ );
+
+ const onSnapshot = useCallback(
+ async (event: React.MouseEvent) => {
+ // Every placement sits inside a clickable card, row or link.
+ event.preventDefault();
+ event.stopPropagation();
+ playShutterSound();
+ setIsFlashing(true);
+ flashTimeout.current = setTimeout(
+ () => setIsFlashing(false),
+ SHUTTER_SWEEP_MS,
+ );
+ setIsCapturing(true);
+
+ try {
+ const element = target instanceof HTMLElement ? target : target.current;
+ const capture = captureShareImage(
+ target,
+ captureOptions ?? getSnapshotCaptureOptions(element),
+ );
+
+ if (onCapture) {
+ onCapture(await capture);
+ return;
+ }
+
+ // Pasting beats a file in Downloads for every target we share to, so
+ // the clipboard leads and the download is the fallback.
+ if (await copyShareImage(capture, link)) {
+ displayToast(link ? 'Image and link copied' : 'Image copied', {
+ variant: ToastType.Success,
+ });
+ return;
+ }
+
+ downloadShareImage(await capture, filename);
+ displayToast('Image saved', { variant: ToastType.Success });
+ } catch {
+ displayToast('Could not create the snapshot, please try again', {
+ variant: ToastType.Error,
+ });
+ } finally {
+ setIsCapturing(false);
+ }
+ },
+ [captureOptions, displayToast, filename, link, onCapture, target],
+ );
+
+ return (
+
+ }
+ onClick={onSnapshot}
+ >
+ {showLabel ? label : undefined}
+
+
+ );
+}
diff --git a/packages/shared/src/components/share/CopyStateIcon.spec.tsx b/packages/shared/src/components/share/CopyStateIcon.spec.tsx
new file mode 100644
index 00000000000..adaa7834668
--- /dev/null
+++ b/packages/shared/src/components/share/CopyStateIcon.spec.tsx
@@ -0,0 +1,46 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { LinkIcon } from '../icons';
+import { CopyStateIcon } from './CopyStateIcon';
+
+const layers = (container: HTMLElement): string[] => {
+ const grid = container.querySelector('span.inline-grid');
+
+ if (!grid) {
+ throw new Error('CopyStateIcon did not render its grid');
+ }
+
+ return Array.from(grid.children).map(
+ (child) => child.getAttribute('class') ?? '',
+ );
+};
+
+describe('CopyStateIcon', () => {
+ it('rests on the given glyph with the confirmation hidden', () => {
+ const { container } = render(
+ ;
+}): ReactElement => {
+ const layer = classNames(
+ className,
+ 'col-start-1 row-start-1 transition-[opacity,transform,filter] duration-200 motion-reduce:transition-none',
+ EASE_OUT_EXPO,
+ );
+
+ return (
+
+ ;
+}
+
+export function HighlightSelectionBar({
+ id,
+ link,
+ containerRef,
+}: HighlightSelectionBarProps): ReactElement | null {
+ const barRef = useRef(null);
+ const cardRef = useRef(null);
+ const selection = useTextSelection(containerRef, true, barRef);
+ // The card outlives the bar: pressing Snapshot collapses the selection in
+ // some browsers, and the capture still has to find the quote mounted.
+ const [quote, setQuote] = useState(null);
+ const [linkCopied, copyLink] = useCopyText(link);
+ const [textCopied, copyText] = useCopyText(quote?.text);
+
+ useEffect(() => {
+ if (selection) {
+ setQuote(selection);
+ }
+ }, [selection]);
+
+ if (!quote || typeof document === 'undefined') {
+ return null;
+ }
+
+ return createPortal(
+ <>
+ {selection && (
+
+
+ }
+ onClick={() => copyLink({ message: '✅ Copied link' })}
+ size={ButtonSize.Small}
+ type="button"
+ variant={ButtonVariant.Tertiary}
+ />
+
+
+ }
+ onClick={() => copyText({ message: '✅ Copied text' })}
+ size={ButtonSize.Small}
+ type="button"
+ variant={ButtonVariant.Tertiary}
+ />
+
+
+ )}
+
+ {/* The card the capture reads from, off-screen at its full 1080px. */}
+
+
+ }
+ onClick={() => copyLink({ message: '✅ Copied link' })}
+ size={ButtonSize.Small}
+ type="button"
+ variant={ButtonVariant.Tertiary}
+ />
+
+ {
+ id: string;
+ link?: string;
+ showLabel?: boolean;
+ size?: ButtonSize;
+ variant?: ButtonVariant;
+ className?: string;
+}
+
+/**
+ * The card is staged off-screen at full size because the capture reads live
+ * DOM — it has to be mounted before the press, not after.
+ */
+export function HighlightSnapshotButton({
+ id,
+ tldr,
+ source,
+ link,
+ showLabel,
+ size,
+ variant,
+ className,
+}: HighlightSnapshotButtonProps): ReactElement {
+ const cardRef = useRef(null);
+
+ return (
+ <>
+ ,
+): ReactElement {
+ const copy = truncateAtWord(tldr, SNAPSHOT_PASSAGE_LIMIT);
+
+ return (
+
+ {copy}
+
+
+
+ {source?.name && (
+ ,
+): ReactElement {
+ const quote = truncateAtWord(text, SNAPSHOT_PASSAGE_LIMIT);
+
+ return (
+
+
+
+
+ {quote}
+
+
+
+ {source?.name && (
+
+ );
+}
+
+export const HighlightTextSnapshotCard = forwardRef(
+ HighlightTextSnapshotCardComponent,
+);
diff --git a/packages/shared/src/features/snapshot/SnapshotCredit.tsx b/packages/shared/src/features/snapshot/SnapshotCredit.tsx
new file mode 100644
index 00000000000..d5d0badd1c8
--- /dev/null
+++ b/packages/shared/src/features/snapshot/SnapshotCredit.tsx
@@ -0,0 +1,47 @@
+import type { ReactElement } from 'react';
+import React from 'react';
+import colors from '../../styles/colors';
+
+const MUTED = colors.salt['90'];
+const DIVIDER = colors.pepper['10'];
+
+export interface SnapshotCreditProps {
+ name: string;
+ image?: string;
+}
+
+/**
+ * Who the copy came from, under a rule. The post and highlight cards sit next
+ * to each other wherever this feature is reviewed, so they credit their source
+ * from one component rather than two that drift.
+ *
+ * Just the name: a date or a URL alongside it reads as a second fact competing
+ * with the first, and neither is why anyone opens a shared image.
+ */
+export function SnapshotCredit({
+ name,
+ image,
+}: SnapshotCreditProps): ReactElement {
+ return (
+
+ {image && (
+ 
+ )}
+
+ {name}
+
+
+ );
+}
diff --git a/packages/shared/src/features/snapshot/SnapshotEyebrow.tsx b/packages/shared/src/features/snapshot/SnapshotEyebrow.tsx
new file mode 100644
index 00000000000..64797e2650b
--- /dev/null
+++ b/packages/shared/src/features/snapshot/SnapshotEyebrow.tsx
@@ -0,0 +1,39 @@
+import type { ReactElement } from 'react';
+import React from 'react';
+import colors from '../../styles/colors';
+
+export interface SnapshotEyebrowProps {
+ label: string;
+ /** Paints the label with the surface's own wordmark gradient. */
+ gradient?: string;
+}
+
+/**
+ * Which part of the product the card came from. It rides the logo row rather
+ * than the copy: it is a sibling of the mark, not a headline for the text
+ * under it.
+ */
+export function SnapshotEyebrow({
+ label,
+ gradient,
+}: SnapshotEyebrowProps): ReactElement {
+ return (
+
+ {label}
+
+ );
+}
diff --git a/packages/shared/src/features/snapshot/SnapshotFrame.tsx b/packages/shared/src/features/snapshot/SnapshotFrame.tsx
new file mode 100644
index 00000000000..73c28e15b51
--- /dev/null
+++ b/packages/shared/src/features/snapshot/SnapshotFrame.tsx
@@ -0,0 +1,134 @@
+import type { ReactElement, ReactNode } from 'react';
+import React, { forwardRef } from 'react';
+import classNames from 'classnames';
+import LogoIcon from '../../svg/LogoIcon';
+import LogoText from '../../svg/LogoText';
+import {
+ getSnapshotGradient,
+ SNAPSHOT_MAX_HEIGHT,
+ SNAPSHOT_SIZE,
+} from './snapshotGradient';
+
+export const SNAPSHOT_CARD_SIZE = 780;
+/**
+ * A page-shaped card: the gradient stays as a border rather than a stage, so
+ * the copy gets the room instead. Surfaces where the text *is* the payload use
+ * it — a wide margin around a cramped article is space spent on nothing.
+ */
+export const SNAPSHOT_CARD_WIDE = 1008;
+
+const CARD_RADIUS = 48;
+const CARD_EDGE = 2;
+const CARD_PADDING = 58;
+const CARD_PADDING_WIDE = 32;
+
+/**
+ * The App Store device frame: a lit hairline that is brightest along the top
+ * edge and fades out by the middle, over a body darker than the ground.
+ */
+const CARD_EDGE_GRADIENT =
+ 'linear-gradient(170deg, rgba(214, 196, 255, 0.92) 0%, rgba(158, 126, 236, 0.5) 12%, rgba(104, 82, 168, 0.16) 38%, rgba(255, 255, 255, 0.05) 72%, rgba(180, 156, 255, 0.14) 100%)';
+const CARD_BODY = '#0B0812';
+const CARD_GLOW =
+ '0 0 120px rgba(126, 82, 214, 0.38), 0 48px 96px rgba(4, 2, 9, 0.62)';
+
+interface SnapshotFrameProps {
+ seed: string;
+ /**
+ * Sits on the logo row, far right — for a surface label that belongs with
+ * the mark rather than with the copy.
+ */
+ logoAside?: ReactNode;
+ /**
+ * Let the height follow the content instead of holding 1:1. Text surfaces
+ * use it so the image can carry more than a screenshot would; it still
+ * starts at the square and stops at SNAPSHOT_MAX_HEIGHT.
+ */
+ grow?: boolean;
+ /**
+ * Widen the card to SNAPSHOT_CARD_WIDE and tighten its padding, for surfaces
+ * whose copy needs the room more than the frame needs the margin.
+ */
+ wide?: boolean;
+ children: ReactNode;
+}
+
+function SnapshotFrameComponent(
+ { seed, logoAside, grow, wide, children }: SnapshotFrameProps,
+ ref: React.Ref,
+): ReactElement {
+ const cardWidth = wide ? SNAPSHOT_CARD_WIDE : SNAPSHOT_CARD_SIZE;
+ const gutter = (SNAPSHOT_SIZE - cardWidth) / 2;
+ const logo = (
+
+
+ ,
+ );
+
+const setHostname = (hostname: string) => {
+ Object.defineProperty(window, 'location', {
+ configurable: true,
+ value: { ...window.location, hostname },
+ });
+};
+
+const flagOn = () => {
+ const gb = new GrowthBook();
+ gb.setFeatures({
+ [featureHappeningNowShare.id]: { defaultValue: true },
+ });
+
+ return gb;
+};
+
+describe('useSharePlacement', () => {
+ afterEach(() => setHostname('localhost'));
+
+ it('follows the flag on the production host', () => {
+ setHostname('app.daily.dev');
+
+ renderProbe(flagOn());
+
+ expect(screen.getByText('on')).toBeInTheDocument();
+ });
+
+ it('stays off on the production host when the flag is off', () => {
+ setHostname('app.daily.dev');
+
+ renderProbe();
+
+ expect(screen.getByText('off')).toBeInTheDocument();
+ });
+
+ it('opens itself on a branch preview, where no flag can be reached', () => {
+ setHostname('my-branch.preview.app.daily.dev');
+
+ renderProbe();
+
+ expect(screen.getByText('on')).toBeInTheDocument();
+ });
+
+ it('respects a surface that opted out, even on a preview', () => {
+ setHostname('my-branch.preview.app.daily.dev');
+
+ renderProbe(undefined, false);
+
+ expect(screen.getByText('off')).toBeInTheDocument();
+ });
+});
diff --git a/packages/shared/src/features/snapshot/useSharePlacement.ts b/packages/shared/src/features/snapshot/useSharePlacement.ts
new file mode 100644
index 00000000000..2c822d648a6
--- /dev/null
+++ b/packages/shared/src/features/snapshot/useSharePlacement.ts
@@ -0,0 +1,32 @@
+import { useEffect, useState } from 'react';
+import type { Feature } from '../../lib/featureManagement';
+import { useConditionalFeature } from '../../hooks/useConditionalFeature';
+import { isPreviewHost } from '../../lib/constants';
+
+/**
+ * A share placement is on when its flag says so — or unconditionally on a
+ * branch preview deployment, which is the only way to review one: previews run
+ * as production against the production API, so there is no dev mode and no
+ * GrowthBook tooling to open the flag from the browser.
+ *
+ * The flag default stays false, so merging changes nothing for anyone on
+ * app.daily.dev; the rollout is still a GrowthBook decision.
+ */
+export function useSharePlacement({
+ feature,
+ shouldEvaluate,
+}: {
+ feature: Feature;
+ shouldEvaluate?: boolean;
+}): boolean {
+ const { value } = useConditionalFeature({ feature, shouldEvaluate });
+ // After mount, not during render: the server cannot know the host the page
+ // will be served from, and disagreeing with it would break hydration.
+ const [isPreview, setIsPreview] = useState(false);
+
+ useEffect(() => {
+ setIsPreview(isPreviewHost());
+ }, []);
+
+ return value || (isPreview && shouldEvaluate !== false);
+}
diff --git a/packages/shared/src/features/snapshot/useTextSelection.ts b/packages/shared/src/features/snapshot/useTextSelection.ts
new file mode 100644
index 00000000000..73b5abb82ac
--- /dev/null
+++ b/packages/shared/src/features/snapshot/useTextSelection.ts
@@ -0,0 +1,117 @@
+import type { RefObject } from 'react';
+import { useCallback, useEffect, useState } from 'react';
+
+export interface TextSelection {
+ text: string;
+ /** Viewport coordinates, so a fixed toolbar can use them unchanged. */
+ top: number;
+ bottom: number;
+ left: number;
+ width: number;
+}
+
+/** Under this a selection is a stray double-click, not a quote worth sharing. */
+export const MIN_SELECTION_LENGTH = 24;
+
+/** How long the selection has to hold still before the toolbar commits to it. */
+const SETTLE_MS = 150;
+
+const read = (container: HTMLElement | null): TextSelection | null => {
+ const selection = globalThis.getSelection?.();
+
+ if (!container || !selection || selection.isCollapsed) {
+ return null;
+ }
+
+ const text = selection.toString().trim();
+
+ if (text.length < MIN_SELECTION_LENGTH || selection.rangeCount === 0) {
+ return null;
+ }
+
+ const range = selection.getRangeAt(0);
+
+ if (!container.contains(range.commonAncestorContainer)) {
+ return null;
+ }
+
+ const rect = range.getBoundingClientRect();
+
+ if (!rect.width && !rect.height) {
+ return null;
+ }
+
+ return {
+ text,
+ top: rect.top,
+ bottom: rect.bottom,
+ left: rect.left,
+ width: rect.width,
+ };
+};
+
+/**
+ * The current selection, but only while it lives inside `containerRef` — a
+ * quote from the post body, never from the comments or the nav around it.
+ */
+export function useTextSelection(
+ containerRef: RefObject,
+ enabled: boolean,
+ /** Pointer presses inside this element leave the selection alone, so the
+ toolbar built on top of it can be clicked. */
+ ignoreRef?: RefObject,
+): TextSelection | null {
+ const [selection, setSelection] = useState(null);
+
+ const sync = useCallback(
+ () => setSelection(read(containerRef.current)),
+ [containerRef],
+ );
+
+ useEffect(() => {
+ if (!enabled) {
+ setSelection(null);
+ return undefined;
+ }
+
+ let settle: ReturnType;
+
+ // The range grows on every mouse move and a toolbar that chases it is
+ // unusable, so the trailing edge of the drag is the one that counts. A
+ // timer rather than a drag flag: a pointerup can be lost to a pointer
+ // released outside the window, and a flag left raised would strand the
+ // toolbar for the rest of the page's life.
+ const onSelectionChange = () => {
+ clearTimeout(settle);
+ settle = setTimeout(sync, SETTLE_MS);
+ };
+ const onPointerDown = (event: PointerEvent) => {
+ if (ignoreRef?.current?.contains(event.target as Node)) {
+ return;
+ }
+
+ setSelection(null);
+ };
+ const onPointerUp = () => {
+ clearTimeout(settle);
+ sync();
+ };
+
+ document.addEventListener('selectionchange', onSelectionChange);
+ document.addEventListener('pointerdown', onPointerDown);
+ document.addEventListener('pointerup', onPointerUp);
+ globalThis.addEventListener('scroll', sync, { passive: true });
+ globalThis.addEventListener('resize', sync);
+
+ return () => {
+ clearTimeout(settle);
+ document.removeEventListener('selectionchange', onSelectionChange);
+ document.removeEventListener('pointerdown', onPointerDown);
+ document.removeEventListener('pointerup', onPointerUp);
+ globalThis.removeEventListener('scroll', sync);
+ globalThis.removeEventListener('resize', sync);
+ };
+ }, [enabled, ignoreRef, sync]);
+
+ return selection;
+}
diff --git a/packages/shared/src/lib/constants.ts b/packages/shared/src/lib/constants.ts
index 8e962b8f031..4663aa220b3 100644
--- a/packages/shared/src/lib/constants.ts
+++ b/packages/shared/src/lib/constants.ts
@@ -49,6 +49,21 @@ export const isTesting =
process.env.NODE_ENV === 'test' || (!isDevelopment && !isProduction);
export const isGBDevMode = process.env.NEXT_PUBLIC_GB_DEV_MODE === 'true';
+/**
+ * Branch preview deployments, e.g. my-branch.preview.app.daily.dev. They run
+ * NODE_ENV=production against the production API, so neither `isDevelopment`
+ * nor GrowthBook's dev tools are available to open a flag for review — the
+ * host is the only thing that distinguishes them from app.daily.dev.
+ *
+ * Only this domain: the same deployment is also served from vercel.app, but
+ * the API rejects that origin on CORS, so the app never boots there.
+ */
+export const PREVIEW_HOST_SUFFIX = '.preview.app.daily.dev';
+
+export const isPreviewHost = (): boolean =>
+ typeof window !== 'undefined' &&
+ window.location.hostname.endsWith(PREVIEW_HOST_SUFFIX);
+
export const isBrave = (): boolean => {
if (typeof window === 'undefined' || !window.Promise) {
return false;
diff --git a/packages/shared/src/lib/featureManagement.ts b/packages/shared/src/lib/featureManagement.ts
index a8446e8c602..351977b2e8f 100644
--- a/packages/shared/src/lib/featureManagement.ts
+++ b/packages/shared/src/lib/featureManagement.ts
@@ -30,6 +30,12 @@ export const featurePostPageHighlights = new Feature(
false,
);
export const featurePostRedesign = new Feature('post_redesign', false);
+// Every share affordance on Happening Now: snapshot on an expanded highlight,
+// the selection bar inside its TLDR, and the copy-link controls.
+export const featureHappeningNowShare = new Feature(
+ 'happening_now_share',
+ false,
+);
// @ts-expect-error stale feature without default
export const plusTakeoverContent = new Feature<{
diff --git a/packages/shared/src/lib/imageShare/captureShareImage.ts b/packages/shared/src/lib/imageShare/captureShareImage.ts
index 216c2b92344..afc98734118 100644
--- a/packages/shared/src/lib/imageShare/captureShareImage.ts
+++ b/packages/shared/src/lib/imageShare/captureShareImage.ts
@@ -19,11 +19,14 @@ const LOGO_BAR_HEIGHT = 72;
const LOGO_BAR_BORDER = 2;
const LOGO_HEIGHT = 26;
const LOGO_GAP = 8;
+const CAPTURE_TIMEOUT_MS = 15000;
export type CaptureTarget = HTMLElement | RefObject;
export interface CaptureShareImageOptions
extends Omit {
+ width?: number;
+ height?: number;
padding?: number;
frameBackgroundColor?: string;
branded?: boolean;
@@ -48,6 +51,19 @@ const PROBE_STYLE = [
'color:var(--theme-text-primary)',
].join(';');
+// A cross-origin image without CORS headers leaves snapdom's inliner pending
+// forever, which would otherwise spin the trigger button indefinitely.
+const withTimeout = (promise: Promise): Promise =>
+ Promise.race([
+ promise,
+ new Promise((_, reject) => {
+ setTimeout(
+ () => reject(new Error('captureShareImage: capture timed out')),
+ CAPTURE_TIMEOUT_MS,
+ );
+ }),
+ ]);
+
const resolveTheme = (element: HTMLElement): ShareImageTheme => {
const probe = element.ownerDocument.createElement('div');
probe.style.cssText = PROBE_STYLE;
@@ -82,20 +98,22 @@ const fillPaths = (
const drawLogoBar = (
context: CanvasRenderingContext2D,
theme: ShareImageTheme,
+ canvasWidth: number,
+ canvasHeight: number,
): void => {
- const barTop = SHARE_IMAGE_HEIGHT - LOGO_BAR_HEIGHT;
+ const barTop = canvasHeight - LOGO_BAR_HEIGHT;
context.fillStyle = theme.background;
- context.fillRect(0, barTop, SHARE_IMAGE_WIDTH, LOGO_BAR_HEIGHT);
+ context.fillRect(0, barTop, canvasWidth, LOGO_BAR_HEIGHT);
context.fillStyle = theme.border;
- context.fillRect(0, barTop, SHARE_IMAGE_WIDTH, LOGO_BAR_BORDER);
+ context.fillRect(0, barTop, canvasWidth, LOGO_BAR_BORDER);
const markScale = LOGO_HEIGHT / MARK_HEIGHT;
const wordmarkScale = LOGO_HEIGHT / WORDMARK_HEIGHT;
const markWidth = MARK_WIDTH * markScale;
const wordmarkWidth = WORDMARK_WIDTH * wordmarkScale;
- const left = (SHARE_IMAGE_WIDTH - (markWidth + LOGO_GAP + wordmarkWidth)) / 2;
+ const left = (canvasWidth - (markWidth + LOGO_GAP + wordmarkWidth)) / 2;
const top = barTop + (LOGO_BAR_HEIGHT - LOGO_HEIGHT) / 2;
context.fillStyle = theme.logo;
@@ -124,14 +142,16 @@ export async function captureShareImage(
}
const {
+ width = SHARE_IMAGE_WIDTH,
+ height = SHARE_IMAGE_HEIGHT,
padding = 48,
frameBackgroundColor,
branded = true,
...snapOptions
} = options;
const barHeight = branded ? LOGO_BAR_HEIGHT : 0;
- const contentWidth = SHARE_IMAGE_WIDTH - padding * 2;
- const contentHeight = SHARE_IMAGE_HEIGHT - padding * 2 - barHeight;
+ const contentWidth = width - padding * 2;
+ const contentHeight = height - padding * 2 - barHeight;
const rect = element.getBoundingClientRect();
@@ -148,16 +168,18 @@ export async function captureShareImage(
const captureScale = Math.max(1, fitScale);
const { snapdom } = await import('@zumer/snapdom');
- const result = await snapdom(element, {
- embedFonts: true,
- ...snapOptions,
- scale: captureScale,
- });
+ const result = await withTimeout(
+ snapdom(element, {
+ embedFonts: true,
+ ...snapOptions,
+ scale: captureScale,
+ }),
+ );
const source = await result.toCanvas();
const canvas = document.createElement('canvas');
- canvas.width = SHARE_IMAGE_WIDTH;
- canvas.height = SHARE_IMAGE_HEIGHT;
+ canvas.width = width;
+ canvas.height = height;
const context = canvas.getContext('2d');
if (!context) {
@@ -184,7 +206,7 @@ export async function captureShareImage(
);
if (branded) {
- drawLogoBar(context, theme);
+ drawLogoBar(context, theme, width, height);
}
return new Promise((resolve, reject) => {
diff --git a/packages/shared/src/lib/imageShare/copyShareImage.spec.ts b/packages/shared/src/lib/imageShare/copyShareImage.spec.ts
new file mode 100644
index 00000000000..6ee26b27c87
--- /dev/null
+++ b/packages/shared/src/lib/imageShare/copyShareImage.spec.ts
@@ -0,0 +1,57 @@
+import { copyShareImage } from './copyShareImage';
+
+const LINK = 'https://app.daily.dev/posts/p1';
+
+class FakeClipboardItem {
+ public readonly types: string[];
+
+ constructor(public readonly items: Record>) {
+ this.types = Object.keys(items);
+ }
+}
+
+const write = jest.fn();
+
+beforeEach(() => {
+ write.mockReset().mockResolvedValue(undefined);
+ Object.assign(globalThis, { ClipboardItem: FakeClipboardItem });
+ Object.assign(navigator, { clipboard: { write } });
+});
+
+const blob = () => Promise.resolve(new Blob(['png'], { type: 'image/png' }));
+
+describe('copyShareImage', () => {
+ it('puts the image and the link on the clipboard together', async () => {
+ await expect(copyShareImage(blob(), LINK)).resolves.toBe(true);
+
+ const [[[item]]] = write.mock.calls;
+ expect(item.types).toEqual(['image/png', 'text/plain']);
+ // jsdom's Blob has no text(); its size is the link's byte length.
+ const text = item.items['text/plain'] as Blob;
+ expect(text.type).toBe('text/plain');
+ expect(text.size).toBe(LINK.length);
+ });
+
+ it('keeps the image when a browser refuses two representations', async () => {
+ write.mockRejectedValueOnce(new Error('NotAllowedError'));
+
+ await expect(copyShareImage(blob(), LINK)).resolves.toBe(true);
+
+ expect(write).toHaveBeenCalledTimes(2);
+ const [, [[retry]]] = write.mock.calls;
+ expect(retry.types).toEqual(['image/png']);
+ });
+
+ it('copies the image alone when there is no link to carry', async () => {
+ await expect(copyShareImage(blob())).resolves.toBe(true);
+
+ const [[[item]]] = write.mock.calls;
+ expect(item.types).toEqual(['image/png']);
+ });
+
+ it('reports failure so the caller can fall back to a download', async () => {
+ write.mockRejectedValue(new Error('NotAllowedError'));
+
+ await expect(copyShareImage(blob(), LINK)).resolves.toBe(false);
+ });
+});
diff --git a/packages/shared/src/lib/imageShare/copyShareImage.ts b/packages/shared/src/lib/imageShare/copyShareImage.ts
new file mode 100644
index 00000000000..5f573e94684
--- /dev/null
+++ b/packages/shared/src/lib/imageShare/copyShareImage.ts
@@ -0,0 +1,45 @@
+/**
+ * Puts the PNG on the clipboard so it can be pasted straight into a chat or a
+ * composer, with the post's link beside it as text: a rich composer takes the
+ * image, a plain one takes the link, and neither leaves the reader having to
+ * go back for the other half.
+ *
+ * Safari only honours a clipboard write inside the task that handled the
+ * gesture, so the blob is handed over as a promise rather than awaited first —
+ * `ClipboardItem` resolves it without losing the gesture.
+ */
+export async function copyShareImage(
+ blob: Promise,
+ link?: string,
+): Promise {
+ if (typeof ClipboardItem === 'undefined' || !navigator.clipboard?.write) {
+ return false;
+ }
+
+ const write = async (item: ClipboardItem): Promise => {
+ try {
+ await navigator.clipboard.write([item]);
+
+ return true;
+ } catch {
+ return false;
+ }
+ };
+
+ if (link) {
+ const copied = await write(
+ new ClipboardItem({
+ 'image/png': blob,
+ 'text/plain': new Blob([link], { type: 'text/plain' }),
+ }),
+ );
+
+ if (copied) {
+ return true;
+ }
+ }
+
+ // Not every browser accepts two representations in one item, and the image
+ // is the half worth keeping when one of them has to go.
+ return write(new ClipboardItem({ 'image/png': blob }));
+}
diff --git a/packages/shared/src/lib/imageShare/downloadShareImage.ts b/packages/shared/src/lib/imageShare/downloadShareImage.ts
new file mode 100644
index 00000000000..e4d411d267d
--- /dev/null
+++ b/packages/shared/src/lib/imageShare/downloadShareImage.ts
@@ -0,0 +1,10 @@
+export function downloadShareImage(blob: Blob, filename: string): void {
+ const url = URL.createObjectURL(blob);
+ const anchor = document.createElement('a');
+ anchor.href = url;
+ anchor.download = `${filename}.png`;
+ document.body.appendChild(anchor);
+ anchor.click();
+ anchor.remove();
+ URL.revokeObjectURL(url);
+}
diff --git a/packages/shared/src/lib/links.ts b/packages/shared/src/lib/links.ts
index fb802ebe610..30dca746b1d 100644
--- a/packages/shared/src/lib/links.ts
+++ b/packages/shared/src/lib/links.ts
@@ -186,3 +186,11 @@ export const getRedirectNextPath = (params: URLSearchParams): string => {
return checkIsExtension() ? `${webappUrl}${nextPath}` : nextPath;
};
+
+/* A function, not a constant: `webappUrl` comes from the environment, and a
+ module-level template literal captures it before a test can set it. */
+export const getHighlightsUrl = (highlightId?: string): string => {
+ const base = `${webappUrl}highlights`;
+
+ return highlightId ? `${base}?highlight=${highlightId}` : base;
+};
diff --git a/packages/shared/src/styles/utilities.css b/packages/shared/src/styles/utilities.css
index 269f0e41dd3..c16fc2ea664 100644
--- a/packages/shared/src/styles/utilities.css
+++ b/packages/shared/src/styles/utilities.css
@@ -1188,3 +1188,54 @@ img.agent-media-ring {
panel, hanging off the right edge. These re-run the card's own mobile rules
against the container instead, at the same 500px the card switches on, so a
panel dragged wide gets the side-by-side layout back. */
+
+/* Shutter feedback on the snapshot button: a highlight crossing the face once,
+ left to right, so the press reads as a capture rather than a submit. */
+@keyframes snapshot-shutter-sweep {
+ 0% {
+ opacity: 0;
+ transform: translateX(-120%) skewX(-18deg);
+ }
+
+ 22% {
+ opacity: 1;
+ }
+
+ 100% {
+ opacity: 0;
+ transform: translateX(220%) skewX(-18deg);
+ }
+}
+
+.snapshot-shutter-sweep::after {
+ content: '';
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ width: 60%;
+ pointer-events: none;
+ background: linear-gradient(
+ 90deg,
+ transparent 0%,
+ rgba(255, 255, 255, 0.85) 50%,
+ transparent 100%
+ );
+ animation: snapshot-shutter-sweep 380ms cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+@media (prefers-reduced-motion: reduce) {
+ .snapshot-shutter-sweep::after {
+ animation: none;
+ opacity: 0;
+ }
+}
+
+/* Snapshot copy is rasterized once and never reflows, so it can afford the
+ expensive wrapping: balance evens the line lengths and removes the orphan
+ word, and anywhere keeps long URLs or type names inside the card. */
+.snapshot-copy {
+ text-wrap: balance;
+ overflow-wrap: anywhere;
+ hyphens: none;
+}
diff --git a/packages/webapp/pages/dev/snapshot-happening-now.tsx b/packages/webapp/pages/dev/snapshot-happening-now.tsx
new file mode 100644
index 00000000000..90d83da5e86
--- /dev/null
+++ b/packages/webapp/pages/dev/snapshot-happening-now.tsx
@@ -0,0 +1,257 @@
+import type { ReactElement, ReactNode } from 'react';
+import React, { useEffect, useState } from 'react';
+import { NextSeo } from 'next-seo';
+import Toast from '@dailydotdev/shared/src/components/notifications/Toast';
+import {
+ FeaturesReadyContext,
+ GrowthBookContext,
+} from '@dailydotdev/shared/src/components/GrowthBookProvider';
+import { HighlightItem } from '@dailydotdev/shared/src/components/highlights/HighlightItem';
+import { HighlightSnapshotCard } from '@dailydotdev/shared/src/features/snapshot/HighlightSnapshotCard';
+import { SNAPSHOT_SIZE } from '@dailydotdev/shared/src/features/snapshot/snapshotGradient';
+import { featureHappeningNowShare } from '@dailydotdev/shared/src/lib/featureManagement';
+import type { PostHighlightFeed } from '@dailydotdev/shared/src/graphql/highlights';
+import type { AuthContextData } from '@dailydotdev/shared/src/contexts/AuthContext';
+import AuthContext from '@dailydotdev/shared/src/contexts/AuthContext';
+import { getLogContextStatic } from '@dailydotdev/shared/src/contexts/LogContext';
+import type { LogContextData } from '@dailydotdev/shared/src/hooks/log/useLogContextData';
+
+/**
+ * /dev/snapshot-happening-now — the expanded-highlight placement rendered by
+ * the production HighlightItem with `snapshot_highlight_expanded` forced on,
+ * so what is reviewed here is what ships. Blocked on the canonical production
+ * hosts and carries `noindex`/`nofollow`.
+ */
+
+const hoursAgo = (hours: number): string =>
+ new Date(Date.now() - hours * 60 * 60 * 1000).toISOString();
+
+const HIGHLIGHTS: PostHighlightFeed[] = [
+ {
+ id: 'dev-highlight-openai',
+ channel: 'headlines',
+ headline: 'OpenAI ships a cheaper model tier',
+ highlightedAt: hoursAgo(2),
+ post: {
+ id: 'dev-post-openai',
+ type: 'article',
+ commentsPermalink: 'https://app.daily.dev/posts/dev-post-openai',
+ summary:
+ 'Priced at a third of the previous tier with the same context window. The cut lands first on the API, with the assistant products following next quarter.',
+ },
+ },
+ {
+ id: 'dev-highlight-react',
+ channel: 'webdev',
+ headline: 'React 20 drops the legacy render path',
+ highlightedAt: hoursAgo(4),
+ post: {
+ id: 'dev-post-react',
+ type: 'article',
+ commentsPermalink: 'https://app.daily.dev/posts/dev-post-react',
+ summary:
+ 'The codemod covers most applications; class components with legacy context are the exception and will need a manual pass.',
+ },
+ },
+ {
+ id: 'dev-highlight-postgres',
+ channel: 'databases',
+ headline:
+ 'Postgres 19 lands asynchronous I/O by default across every supported platform',
+ highlightedAt: hoursAgo(6),
+ post: {
+ id: 'dev-post-postgres',
+ type: 'article',
+ commentsPermalink: 'https://app.daily.dev/posts/dev-post-postgres',
+ summary:
+ 'Early benchmarks show double-digit gains on write-heavy workloads, with the largest wins on NVMe and the smallest on network storage.',
+ },
+ },
+];
+
+const CARD_PREVIEW_SIZE = 300;
+
+const useIsAllowedHost = () => {
+ const [allowed, setAllowed] = useState(true);
+
+ useEffect(() => {
+ const { hostname } = window.location;
+ setAllowed(hostname !== 'app.daily.dev' && hostname !== 'www.daily.dev');
+ }, []);
+
+ return allowed;
+};
+
+const LogContext = getLogContextStatic();
+
+/**
+ * `/dev/*` short-circuits to a QueryClient-only tree in _app — no boot, no
+ * auth — which is what makes this page load without the API. HighlightItem
+ * reaches for both, so the review harness stands in: signed out, logging
+ * swallowed, and the flag forced rather than fetched.
+ */
+const AUTH_STUB = {
+ isLoggedIn: false,
+ isAuthReady: true,
+ tokenRefreshed: true,
+ shouldShowLogin: false,
+ squads: [],
+ showLogin: () => {},
+ closeLogin: () => {},
+ logout: async () => {},
+ updateUser: async () => {},
+ getRedirectUri: () => '',
+} as unknown as AuthContextData;
+
+const LOG_STUB = {
+ logEvent: () => {},
+ logEventStart: () => {},
+ logEventEnd: () => {},
+} as unknown as LogContextData;
+
+const FORCED: Record = {
+ [featureHappeningNowShare.id]: true,
+};
+
+/* GrowthBookContext is re-exported for harnesses exactly like this one, so the
+ flag is pinned here rather than fetched. */
+const GB_STUB = {
+ getFeatureValue: (id: string, fallback: unknown) => FORCED[id] ?? fallback,
+} as never;
+
+const DevProviders = ({ children }: { children: ReactNode }) => (
+
+
+
+
+ (FORCED[feature.id] ?? feature.defaultValue) as never,
+ }}
+ >
+ {children}
+
+
+
+
+);
+
+const Section = ({
+ title,
+ caption,
+ children,
+}: {
+ title: string;
+ caption: string;
+ children: ReactNode;
+}) => (
+
+
+ {title}
+ {caption}
+
+ {children}
+
+);
+
+const Feed = ({ expandedId }: { expandedId?: string }) => (
+
+ {HIGHLIGHTS.map((highlight) => (
+
+ The snapshot review page is not available on production.
+
+
+ );
+ }
+
+ return (
+ <>
+
+
+
+
+
+ Snapshot on Happening now
+
+
+ Every highlight is a self-contained claim with sources behind
+ it, and today none of them can be lifted out. The page also has
+ the shortest shelf life in the product, which is why the image
+ beats the link: a URL sends someone to a page that has already
+ moved on.
+
+
+ These are the production rows with{' '}
+ snapshot_highlight_expanded forced on, not a copy
+ of them. On /highlights the flag defaults to off
+ and opens on branch previews.
+
+
+
+
+
+
+
+
+
+ {HIGHLIGHTS.map((highlight) => (
+
+
+ {highlight.post.summary?.length} characters
+
+
+ {/* zoom, not transform: a transformed card leaves its
+ full height behind in the layout, and these grow.
+ It sits inside the width rather than on it, since
+ zoom scales the element's own box too. */}
+
+
+ ))}
+
+
+
+
+
+
+ );
+};
+
+SnapshotHappeningNowDevPage.getLayout = (page: ReactNode): ReactNode => page;
+
+export default SnapshotHappeningNowDevPage;
diff --git a/packages/webapp/public/sounds/shutter.mp3 b/packages/webapp/public/sounds/shutter.mp3
new file mode 100644
index 00000000000..f49b95f152c
Binary files /dev/null and b/packages/webapp/public/sounds/shutter.mp3 differ
Happening Now
+
+
+ }
+ onClick={() => copyLink({ message: '✅ Copied link' })}
+ size={ButtonSize.Small}
+ type="button"
+ variant={ButtonVariant.Tertiary}
+ />
+
+
+ }
+ onClick={() => copyText({ message: '✅ Copied text' })}
+ size={ButtonSize.Small}
+ type="button"
+ variant={ButtonVariant.Tertiary}
+ />
+
+
+ )}
+
+ {/* The card the capture reads from, off-screen at its full 1080px. */}
+
+
+ ,
+ document.body,
+ );
+}
diff --git a/packages/shared/src/features/snapshot/HighlightShareActions.tsx b/packages/shared/src/features/snapshot/HighlightShareActions.tsx
new file mode 100644
index 00000000000..8c2e10aa308
--- /dev/null
+++ b/packages/shared/src/features/snapshot/HighlightShareActions.tsx
@@ -0,0 +1,48 @@
+import type { ReactElement } from 'react';
+import React from 'react';
+import { Button } from '../../components/buttons/Button';
+import { ButtonSize, ButtonVariant } from '../../components/buttons/common';
+import { LinkIcon } from '../../components/icons';
+import { CopyStateIcon } from '../../components/share/CopyStateIcon';
+import { Tooltip } from '../../components/tooltip/Tooltip';
+import { useCopyText } from '../../hooks/useCopy';
+import type { HighlightSnapshotButtonProps } from './HighlightSnapshotButton';
+import { HighlightSnapshotButton } from './HighlightSnapshotButton';
+
+type HighlightShareActionsProps = Pick<
+ HighlightSnapshotButtonProps,
+ 'id' | 'tldr' | 'source'
+> & {
+ link: string;
+};
+
+export function HighlightShareActions({
+ link,
+ ...card
+}: HighlightShareActionsProps): ReactElement {
+ // useCopyText, not useCopyLink: the link variant reaches for the shortener,
+ // which needs an authenticated user, and the page has to work signed out.
+ const [copied, copyLink] = useCopyText(link);
+
+ return (
+ <>
+
+
+
+ );
+}
diff --git a/packages/shared/src/features/snapshot/HighlightSnapshotCard.tsx b/packages/shared/src/features/snapshot/HighlightSnapshotCard.tsx
new file mode 100644
index 00000000000..2bb42817123
--- /dev/null
+++ b/packages/shared/src/features/snapshot/HighlightSnapshotCard.tsx
@@ -0,0 +1,70 @@
+import type { ReactElement } from 'react';
+import React, { forwardRef } from 'react';
+import { SnapshotCredit } from './SnapshotCredit';
+import { SnapshotEyebrow } from './SnapshotEyebrow';
+import { SnapshotFrame } from './SnapshotFrame';
+import { HIGHLIGHTS_EYEBROW_GRADIENT } from './snapshotGradient';
+import {
+ SNAPSHOT_COPY_SIZE,
+ SNAPSHOT_PASSAGE_LIMIT,
+ truncateAtWord,
+} from './snapshotText';
+
+export interface HighlightSnapshotCardProps {
+ /** The TLDR, and the whole subject of the card. */
+ tldr: string;
+ /** Credits the publication the claim came from, where the feed knows it. */
+ source?: { name: string; image?: string };
+ seed?: string;
+}
+
+/**
+ * The claim in white under the Happening Now wordmark, credited to its source.
+ * The headline is left off: the TLDR already says what it says, at more
+ * length, and two statements of the same fact compete for the same glance.
+ */
+function HighlightSnapshotCardComponent(
+ { tldr, source, seed }: HighlightSnapshotCardProps,
+ ref: React.Ref
+ {/* Body copy, not display copy: no balanced wrapping and no negative
+ tracking, both of which fight legibility at normal weight, and the
+ leading a long paragraph needs. */}
+
+
+ );
+}
+
+export const HighlightSnapshotCard = forwardRef(HighlightSnapshotCardComponent);
diff --git a/packages/shared/src/features/snapshot/HighlightTextSnapshotCard.tsx b/packages/shared/src/features/snapshot/HighlightTextSnapshotCard.tsx
new file mode 100644
index 00000000000..32296539bf1
--- /dev/null
+++ b/packages/shared/src/features/snapshot/HighlightTextSnapshotCard.tsx
@@ -0,0 +1,57 @@
+import type { ReactElement } from 'react';
+import React, { forwardRef } from 'react';
+import { SnapshotCredit } from './SnapshotCredit';
+import { SnapshotFrame } from './SnapshotFrame';
+import {
+ SNAPSHOT_COPY_SIZE,
+ SNAPSHOT_PASSAGE_LIMIT,
+ truncateAtWord,
+} from './snapshotText';
+
+export interface HighlightTextSnapshotCardProps {
+ /** What the reader marked, and the whole subject of the card. */
+ text: string;
+ source?: { name: string; image?: string };
+ seed?: string;
+}
+
+/**
+ * The reader's selection, set like the post card's TLDR: same copy scale,
+ * same credit. Nothing around the selection is carried — what was marked is
+ * what gets sent, so the card needs no highlight of its own. The source is
+ * named, not linked: a URL is unreadable at a glance and unclickable in an
+ * image.
+ */
+function HighlightTextSnapshotCardComponent(
+ { text, source, seed }: HighlightTextSnapshotCardProps,
+ ref: React.Ref
+
+
+ {source?.name && (
+ + {copy} +
+
+
+
+
+
+ {source?.name && (
+ + {quote} +
+
+ {image && (
+
+ )}
+
+ {name}
+
+
+ );
+}
diff --git a/packages/shared/src/features/snapshot/SnapshotEyebrow.tsx b/packages/shared/src/features/snapshot/SnapshotEyebrow.tsx
new file mode 100644
index 00000000000..64797e2650b
--- /dev/null
+++ b/packages/shared/src/features/snapshot/SnapshotEyebrow.tsx
@@ -0,0 +1,39 @@
+import type { ReactElement } from 'react';
+import React from 'react';
+import colors from '../../styles/colors';
+
+export interface SnapshotEyebrowProps {
+ label: string;
+ /** Paints the label with the surface's own wordmark gradient. */
+ gradient?: string;
+}
+
+/**
+ * Which part of the product the card came from. It rides the logo row rather
+ * than the copy: it is a sibling of the mark, not a headline for the text
+ * under it.
+ */
+export function SnapshotEyebrow({
+ label,
+ gradient,
+}: SnapshotEyebrowProps): ReactElement {
+ return (
+
+ {label}
+
+ );
+}
diff --git a/packages/shared/src/features/snapshot/SnapshotFrame.tsx b/packages/shared/src/features/snapshot/SnapshotFrame.tsx
new file mode 100644
index 00000000000..73c28e15b51
--- /dev/null
+++ b/packages/shared/src/features/snapshot/SnapshotFrame.tsx
@@ -0,0 +1,134 @@
+import type { ReactElement, ReactNode } from 'react';
+import React, { forwardRef } from 'react';
+import classNames from 'classnames';
+import LogoIcon from '../../svg/LogoIcon';
+import LogoText from '../../svg/LogoText';
+import {
+ getSnapshotGradient,
+ SNAPSHOT_MAX_HEIGHT,
+ SNAPSHOT_SIZE,
+} from './snapshotGradient';
+
+export const SNAPSHOT_CARD_SIZE = 780;
+/**
+ * A page-shaped card: the gradient stays as a border rather than a stage, so
+ * the copy gets the room instead. Surfaces where the text *is* the payload use
+ * it — a wide margin around a cramped article is space spent on nothing.
+ */
+export const SNAPSHOT_CARD_WIDE = 1008;
+
+const CARD_RADIUS = 48;
+const CARD_EDGE = 2;
+const CARD_PADDING = 58;
+const CARD_PADDING_WIDE = 32;
+
+/**
+ * The App Store device frame: a lit hairline that is brightest along the top
+ * edge and fades out by the middle, over a body darker than the ground.
+ */
+const CARD_EDGE_GRADIENT =
+ 'linear-gradient(170deg, rgba(214, 196, 255, 0.92) 0%, rgba(158, 126, 236, 0.5) 12%, rgba(104, 82, 168, 0.16) 38%, rgba(255, 255, 255, 0.05) 72%, rgba(180, 156, 255, 0.14) 100%)';
+const CARD_BODY = '#0B0812';
+const CARD_GLOW =
+ '0 0 120px rgba(126, 82, 214, 0.38), 0 48px 96px rgba(4, 2, 9, 0.62)';
+
+interface SnapshotFrameProps {
+ seed: string;
+ /**
+ * Sits on the logo row, far right — for a surface label that belongs with
+ * the mark rather than with the copy.
+ */
+ logoAside?: ReactNode;
+ /**
+ * Let the height follow the content instead of holding 1:1. Text surfaces
+ * use it so the image can carry more than a screenshot would; it still
+ * starts at the square and stops at SNAPSHOT_MAX_HEIGHT.
+ */
+ grow?: boolean;
+ /**
+ * Widen the card to SNAPSHOT_CARD_WIDE and tighten its padding, for surfaces
+ * whose copy needs the room more than the frame needs the margin.
+ */
+ wide?: boolean;
+ children: ReactNode;
+}
+
+function SnapshotFrameComponent(
+ { seed, logoAside, grow, wide, children }: SnapshotFrameProps,
+ ref: React.Ref
+
+ );
+
+ const logoRow = logoAside ? (
+
+ {logo}
+ {logoAside}
+
+ ) : (
+ logo
+ );
+
+ return (
+
+
+ );
+}
+
+export const SnapshotFrame = forwardRef(SnapshotFrameComponent);
diff --git a/packages/shared/src/features/snapshot/shutterSound.ts b/packages/shared/src/features/snapshot/shutterSound.ts
new file mode 100644
index 00000000000..ac00c91412d
--- /dev/null
+++ b/packages/shared/src/features/snapshot/shutterSound.ts
@@ -0,0 +1,23 @@
+import { fromCDN } from '../../lib/links';
+
+let shutter: HTMLAudioElement | null = null;
+
+/**
+ * One shared element rather than one per press: rewinding an existing clip is
+ * instant, while a fresh Audio has to fetch and decode before it plays.
+ */
+export function playShutterSound(): void {
+ if (typeof window === 'undefined') {
+ return;
+ }
+
+ if (!shutter) {
+ shutter = new Audio(fromCDN('/sounds/shutter.mp3'));
+ shutter.volume = 0.45;
+ }
+
+ shutter.currentTime = 0;
+ // Autoplay policy rejects until the page has been interacted with, and the
+ // capture must not fail because the sound did.
+ shutter.play().catch(() => {});
+}
diff --git a/packages/shared/src/features/snapshot/snapshotCapture.ts b/packages/shared/src/features/snapshot/snapshotCapture.ts
new file mode 100644
index 00000000000..ebcfe1a4473
--- /dev/null
+++ b/packages/shared/src/features/snapshot/snapshotCapture.ts
@@ -0,0 +1,22 @@
+import type { CaptureShareImageOptions } from '../../lib/imageShare/captureShareImage';
+import { SNAPSHOT_MAX_HEIGHT, SNAPSHOT_SIZE } from './snapshotGradient';
+
+/**
+ * A designed card is 1080 wide and carries its own logo, so the capture only
+ * has to match its height. Growing cards are measured rather than assumed, in
+ * both directions: assuming the square would letterbox a long passage down to
+ * a screenshot's worth of text, and pad a short one out with dead gradient.
+ * An unmeasurable element falls back to the square.
+ */
+export function getSnapshotCaptureOptions(
+ element?: HTMLElement | null,
+): CaptureShareImageOptions {
+ const measured = Math.round(element?.getBoundingClientRect().height ?? 0);
+
+ return {
+ width: SNAPSHOT_SIZE,
+ height: measured ? Math.min(SNAPSHOT_MAX_HEIGHT, measured) : SNAPSHOT_SIZE,
+ padding: 0,
+ branded: false,
+ };
+}
diff --git a/packages/shared/src/features/snapshot/snapshotGradient.ts b/packages/shared/src/features/snapshot/snapshotGradient.ts
new file mode 100644
index 00000000000..1f967e9bd23
--- /dev/null
+++ b/packages/shared/src/features/snapshot/snapshotGradient.ts
@@ -0,0 +1,85 @@
+import colors from '../../styles/colors';
+
+export const SNAPSHOT_SIZE = 1080;
+/**
+ * 9:16 — the tallest frame every share destination still shows whole. Text
+ * surfaces grow into it instead of clamping their copy to the square.
+ */
+export const SNAPSHOT_MAX_HEIGHT = 1920;
+
+/**
+ * The production "Happening Now" wordmark animates across
+ * blueCheese -> cheese -> avocado. A still frame has to pick a position, and
+ * the yellow-to-green end is the one the brand shots use.
+ */
+export const HIGHLIGHTS_EYEBROW_GRADIENT = `linear-gradient(120deg, ${colors.cheese['40']} 0%, ${colors.avocado['10']} 52%, ${colors.avocado['40']} 100%)`;
+
+/* eslint-disable no-bitwise -- an FNV hash and a mulberry32 PRNG are defined
+ in terms of integer bit operations; expressing them any other way would
+ change the numbers they produce. */
+const hashSeed = (seed: string): number => {
+ let hash = 2166136261;
+
+ for (let i = 0; i < seed.length; i += 1) {
+ hash ^= seed.charCodeAt(i);
+ hash = Math.imul(hash, 16777619);
+ }
+
+ return hash >>> 0;
+};
+
+const createRandom = (seed: string): (() => number) => {
+ let state = hashSeed(seed) || 1;
+
+ return () => {
+ state += 0x6d2b79f5;
+ let t = state;
+ t = Math.imul(t ^ (t >>> 15), t | 1);
+ t ^= t + Math.imul(t ^ (t >>> 7), t | 61);
+ return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+ };
+};
+/* eslint-enable no-bitwise */
+
+/**
+ * Sampled from the App Store screenshots: a near-black violet ground with one
+ * large halo behind the subject and a quieter wash along the bottom.
+ */
+const BASE = 'linear-gradient(178deg, #150C26 0%, #0B0713 52%, #08060F 100%)';
+
+const HALOS = [
+ { r: 128, g: 82, b: 214 },
+ { r: 151, g: 78, b: 224 },
+ { r: 106, g: 78, b: 220 },
+ { r: 177, g: 75, b: 215 },
+];
+
+const rgba = (
+ { r, g, b }: { r: number; g: number; b: number },
+ alpha: number,
+): string => `rgba(${r}, ${g}, ${b}, ${alpha})`;
+
+export function getSnapshotGradient(seed: string): string {
+ const random = createRandom(seed);
+ const halo = HALOS[Math.floor(random() * HALOS.length)];
+ const accent = HALOS[Math.floor(random() * HALOS.length)];
+
+ const haloX = Math.round(38 + random() * 24);
+ const haloY = Math.round(2 + random() * 12);
+ const haloAlpha = 0.5 + random() * 0.18;
+
+ const washX = Math.round(12 + random() * 76);
+ const washAlpha = 0.16 + random() * 0.12;
+
+ return [
+ `radial-gradient(72% 48% at ${haloX}% ${haloY}%, ${rgba(
+ halo,
+ haloAlpha,
+ )} 0%, ${rgba(halo, 0)} 68%)`,
+ `radial-gradient(58% 34% at ${washX}% 104%, ${rgba(
+ accent,
+ washAlpha,
+ )} 0%, ${rgba(accent, 0)} 72%)`,
+ BASE,
+ ].join(', ');
+}
diff --git a/packages/shared/src/features/snapshot/snapshotText.ts b/packages/shared/src/features/snapshot/snapshotText.ts
new file mode 100644
index 00000000000..1e9e1e78155
--- /dev/null
+++ b/packages/shared/src/features/snapshot/snapshotText.ts
@@ -0,0 +1,35 @@
+/** The most that still sets legibly inside the square. */
+const SNAPSHOT_TEXT_LIMIT = 280;
+
+/**
+ * The frame grows to fit, so the ceiling on a shared passage is about
+ * legibility at 1080 wide rather than about the square.
+ */
+export const SNAPSHOT_PASSAGE_LIMIT = 900;
+
+/**
+ * One size for the copy, not a scale. The frames grow to fit, so type no
+ * longer has to shrink to reach the bottom of a fixed square — and a shared
+ * image that changes size with its length reads as two different cards.
+ */
+export const SNAPSHOT_COPY_SIZE = 38;
+
+export function truncateAtWord(
+ text: string,
+ limit = SNAPSHOT_TEXT_LIMIT,
+): string {
+ const trimmed = text.trim();
+
+ if (trimmed.length <= limit) {
+ return trimmed;
+ }
+
+ const cut = trimmed.slice(0, limit);
+ const lastSpace = cut.lastIndexOf(' ');
+
+ // A single unbroken run longer than the limit has no word to fall back to.
+ return `${(lastSpace > limit * 0.6
+ ? cut.slice(0, lastSpace)
+ : cut
+ ).trimEnd()}…`;
+}
diff --git a/packages/shared/src/features/snapshot/useSharePlacement.spec.tsx b/packages/shared/src/features/snapshot/useSharePlacement.spec.tsx
new file mode 100644
index 00000000000..b8959641043
--- /dev/null
+++ b/packages/shared/src/features/snapshot/useSharePlacement.spec.tsx
@@ -0,0 +1,75 @@
+import React from 'react';
+import { QueryClient } from '@tanstack/react-query';
+import { GrowthBook } from '@growthbook/growthbook-react';
+import { render, screen } from '@testing-library/react';
+import { TestBootProvider } from '../../../__tests__/helpers/boot';
+import { featureHappeningNowShare } from '../../lib/featureManagement';
+import { useSharePlacement } from './useSharePlacement';
+
+const Probe = ({ shouldEvaluate }: { shouldEvaluate?: boolean }) => {
+ const enabled = useSharePlacement({
+ feature: featureHappeningNowShare,
+ shouldEvaluate,
+ });
+
+ return {enabled ? 'on' : 'off'};
+};
+
+const renderProbe = (gb?: GrowthBook, shouldEvaluate?: boolean) =>
+ render(
+
+
+
+
+
+ {logoRow}
+ {children}
+
+
+
+ {children}
+ {title}
+{caption}
+
+ {HIGHLIGHTS.map((highlight) => (
+
+);
+
+const SnapshotHappeningNowDevPage = (): ReactElement => {
+ const allowed = useIsAllowedHost();
+
+ if (!allowed) {
+ return (
+
+
+ );
+ }
+
+ return (
+ <>
+ + The snapshot review page is not available on production. +
+
+
+
+
+
+
+
+
+
+
+
+
+ + Snapshot on Happening now +
++ Every highlight is a self-contained claim with sources behind + it, and today none of them can be lifted out. The page also has + the shortest shelf life in the product, which is why the image + beats the link: a URL sends someone to a page that has already + moved on. +
+
+ These are the production rows with{' '}
+ snapshot_highlight_expanded forced on, not a copy
+ of them. On /highlights the flag defaults to off
+ and opens on branch previews.
+
+
+
+ {HIGHLIGHTS.map((highlight) => (
+
+
+ {highlight.post.summary?.length} characters
+
+
+ ))}
+
+
+ {/* zoom, not transform: a transformed card leaves its
+ full height behind in the layout, and these grow.
+ It sits inside the width rather than on it, since
+ zoom scales the element's own box too. */}
+
+
+
+