Public / Developer spec

Share mockup: option A (collapsed)

Article with the Bluesky / LinkedIn / Reddit / Email icons collapsed into one share icon with a hover / tap popover, plus a gift-link button ("Share full article") with its own popover.

Open the page

When it shows

The gift pill shows only when the article is paywalled AND the viewer is a subscriber (assumed: gift links are a subscriber benefit; confirm). The mockup uses data-paywalled and data-subscriber on .cno-share; the real check should be server-side, not a CSS hide
The share icon / icon row always shows; its link is the public canonical URL
The Mockup controls panel (bottom right) and its checkboxes are mockup scaffolding only

Copy

Gift pill label: Share full article (hidden on phones; the icon stays)
Gift popover: title Gift Articles; text Give free access to this article.
Share popover (option A): title Share Options; text Share a link that only subscribers can access.
Rows in both popovers, in order: Copy link, Email, Bluesky, LinkedIn, Reddit. Copy link is new; WhatsApp was removed

Share URLs

Regular: canonical URL. Gift: canonical URL plus the gift token (mock: ?gift=demo-token-0000)
Email: regular uses the existing /forward/node/{nid}; gift uses mailto:?subject={title}&body={url}
Bluesky: https://bsky.app/intent/compose?text={title} {url}
LinkedIn: https://www.linkedin.com/shareArticle?mini=true&url={url}&title={title}
Reddit: https://reddit.com/submit?url={url}&title={title} (all values URL-encoded)
Copy link: copies the URL for that popover (gift URL in the gift popover) and shows the toast Link copied for 1.8s; falls back to a hidden textarea + execCommand when the Clipboard API is missing

Interaction

Desktop (hover:hover and pointer:fine): opens 120ms after hover, closes 250ms after the pointer leaves unless pinned by a click
Click or tap toggles; a click on a popover opened by hover pins it open; a second click closes it
Esc closes and returns focus to the button; a click outside closes; only one popover is open at a time
Accessibility: buttons use aria-haspopup, aria-expanded and aria-controls; popovers are role=dialog with an aria-label; visible 2px focus ring (--cno-blue-dark); every row is a real link or button

Layout and breakpoint

Popover: opens 0.625rem below the button, left-aligned to it, width 18rem (max 100vw - 2.5rem), z-index 40; shifted left when it would leave the viewport (12px margin) and the caret follows the button centre
Phones (max-width 639px): the gift pill becomes a 1.875rem round icon; the share icon calls navigator.share({title, url}) when available and falls back to the popover
All sizes, colours and transitions are the site's own --cno-* properties; see share.css (nothing hard-coded except the popover shadow)

Open questions

Gift links: how many per subscriber, or unlimited? Do they expire or can they be revoked? Which service issues the token (and is it per share or per article)?
What exactly marks an article as paywalled and a viewer as a subscriber on the live site (the saved page's Piano tp-* classes were removed in this mockup)?
The Share Options text says a link only subscribers can access, but the public share link works for anyone: confirm the intended copy
Tracking: should share and gift clicks be reported (and to what)?
Should the lower share block and the footer row get the same treatment?
More networks later (Facebook, X, Threads, WhatsApp) would be a separate task: add a row to NETWORKS in share.js

Option A layout

Replaces the share row under the headline (.heading__share) with: [gift pill] [round share icon] [Google preferred-source star, unchanged]
The share icon opens the Share Options popover; the gift pill opens the Gift Articles popover
Not changed: the larger share block lower in the article (with the + toggle) and the footer row; WhatsApp was removed from them in this mockup for consistency

Files and references

Route	`/public/cno-article-share/option-a` (served in place from `cno-article-share/`)
Source files	cno-article-share/option-a.html cno-article-share/share.js cno-article-share/share.css
Components used	Gift pill Share icon and popover Toast Typography Colour
Design tokens	tokens.css fonts.css tokens.json DESIGN-TOKENS.md Token reference
AI files	AGENTS.md components.md design-tokens.md All AI files (.zip) AI files page
Claude skill	SKILL.md rules.md check.py starter.html Skill (.zip)
Notes	Mockup for the share / gift-link task; the Mockup controls panel is not part of the design Copy link is new; Bluesky, LinkedIn, Reddit and Email are the networks already on the page (WhatsApp removed) The gift URL and token are made up (see Open questions)