diff --git a/packages/shared/src/components/archive/ArchiveIndexPage.tsx b/packages/shared/src/components/archive/ArchiveIndexPage.tsx
index 46ab41643b3..f1e6f77dce0 100644
--- a/packages/shared/src/components/archive/ArchiveIndexPage.tsx
+++ b/packages/shared/src/components/archive/ArchiveIndexPage.tsx
@@ -2,6 +2,7 @@ import type { ReactElement } from 'react';
 import React from 'react';
 import classNames from 'classnames';
 import type { Archive } from '../../graphql/archive';
+import { ArchiveScopeType } from '../../graphql/archive';
 import type { ArchiveScopeInfo, ArchivesByYear } from '../../lib/archive';
 import {
   getArchiveUrlFromArchive,
@@ -13,6 +14,9 @@ import Link from '../utilities/Link';
 import { ArrowIcon } from '../icons';
 import { IconSize } from '../Icon';
 import { ElementPlaceholder } from '../ElementPlaceholder';
+import { CopyLinkButton } from '../share/CopyLinkButton';
+import { LogEvent } from '../../lib/log';
+import { ReferralCampaignKey } from '../../lib/referral';
 
 interface ArchiveIndexPageProps {
   scopeType: ArchiveScopeInfo['scopeType'];
@@ -159,13 +163,31 @@ export function ArchiveIndexPage({
   className,
 }: ArchiveIndexPageProps): ReactElement {
   const groups = groupArchivesByYear(archives);
+  const isTagScope = scopeType === ArchiveScopeType.Tag;
+  const shareCampaign = isTagScope
+    ? ReferralCampaignKey.ShareTag
+    : ReferralCampaignKey.ShareSource;
+  const shareEvent = isTagScope ? LogEvent.ShareTag : LogEvent.ShareSource;
 
   return (
     <div className={classNames('flex flex-col', className)}>
       {/* Header */}
-      <h1 className="mx-4 font-bold typo-title2 tablet:typo-title1">
-        Best of {scopeName} &mdash; Archive
-      </h1>
+      <div className="mx-4 flex items-center gap-2">
+        <h1 className="flex-1 font-bold typo-title2 tablet:typo-title1">
+          Best of {scopeName} &mdash; Archive
+        </h1>
+        <CopyLinkButton
+          shareProps={{
+            text: `Check out the best of ${scopeName} on daily.dev`,
+            link: globalThis?.location?.href,
+            cid: shareCampaign,
+            logObject: () => ({
+              event_name: shareEvent,
+              target_id: scopeId,
+            }),
+          }}
+        />
+      </div>
 
       {/* Archive grid by year */}
       <ArchiveGrid
diff --git a/packages/shared/src/components/cards/Leaderboard/SourceTopList.tsx b/packages/shared/src/components/cards/Leaderboard/SourceTopList.tsx
index 9de8d735d2d..158e0a3a145 100644
--- a/packages/shared/src/components/cards/Leaderboard/SourceTopList.tsx
+++ b/packages/shared/src/components/cards/Leaderboard/SourceTopList.tsx
@@ -5,6 +5,10 @@ import type { CommonLeaderboardProps } from './LeaderboardList';
 import { LeaderboardList } from './LeaderboardList';
 import { LeaderboardListItem } from './LeaderboardListItem';
 import { UserHighlight, UserType } from '../../widgets/PostUsersHighlights';
+import { CopyLinkButton } from '../../share/CopyLinkButton';
+import { ButtonVariant } from '../../buttons/Button';
+import { ReferralCampaignKey } from '../../../lib/referral';
+import { LogEvent } from '../../../lib/log';
 
 export function SourceTopList({
   items,
@@ -16,7 +20,7 @@ export function SourceTopList({
         <LeaderboardListItem
           key={item.id}
           index={i + 1}
-          className="flex w-full flex-row items-center rounded-8 px-2 hover:bg-accent-pepper-subtler"
+          className="group/source flex w-full flex-row items-center rounded-8 px-2 hover:bg-accent-pepper-subtler"
         >
           <UserHighlight
             {...item}
@@ -30,6 +34,20 @@ export function SourceTopList({
             }}
             allowSubscribe={false}
           />
+          {/* Hover-revealed only where hover exists; always there on touch. */}
+          <CopyLinkButton
+            variant={ButtonVariant.Tertiary}
+            className="ml-auto shrink-0 laptop:opacity-0 laptop:group-focus-within/source:opacity-100 laptop:group-hover/source:opacity-100"
+            shareProps={{
+              text: `Check out ${item.handle} on daily.dev`,
+              link: item.permalink,
+              cid: ReferralCampaignKey.ShareSource,
+              logObject: () => ({
+                event_name: LogEvent.ShareSource,
+                target_id: item.id,
+              }),
+            }}
+          />
         </LeaderboardListItem>
       ))}
     </LeaderboardList>
diff --git a/packages/shared/src/components/cards/entity/SquadEntityCard.tsx b/packages/shared/src/components/cards/entity/SquadEntityCard.tsx
index 383b85ece75..a386218abcf 100644
--- a/packages/shared/src/components/cards/entity/SquadEntityCard.tsx
+++ b/packages/shared/src/components/cards/entity/SquadEntityCard.tsx
@@ -7,13 +7,16 @@ import {
   TypographyType,
 } from '../../typography/Typography';
 import type { Origin } from '../../../lib/log';
+import { LogEvent } from '../../../lib/log';
 import { largeNumberFormat } from '../../../lib';
 import { SquadActionButton } from '../../squads/SquadActionButton';
 import { SourceIcon } from '../../icons';
 import { IconSize } from '../../Icon';
 import { useSquad } from '../../../hooks';
-import { ButtonSize } from '../../buttons/Button';
+import { ButtonSize, ButtonVariant } from '../../buttons/Button';
 import SquadHeaderMenu from '../../squads/SquadHeaderMenu';
+import { CopyLinkButton } from '../../share/CopyLinkButton';
+import { ReferralCampaignKey } from '../../../lib/referral';
 import { Separator } from '../common/common';
 import EntityDescription from './EntityDescription';
 import EntityCard from './EntityCard';
@@ -59,6 +62,18 @@ const SquadEntityCard = ({
       actionButtons={
         !isLoading && (
           <>
+            <CopyLinkButton
+              variant={ButtonVariant.Tertiary}
+              shareProps={{
+                text: `Check out the ${name} squad on daily.dev`,
+                link: permalink,
+                cid: ReferralCampaignKey.ShareSource,
+                logObject: () => ({
+                  event_name: LogEvent.ShareSource,
+                  target_id: squad.id,
+                }),
+              }}
+            />
             <SquadActionButton
               className={{
                 button: 'order-6',
diff --git a/packages/shared/src/components/share/CopyLinkButton.tsx b/packages/shared/src/components/share/CopyLinkButton.tsx
new file mode 100644
index 00000000000..c81e4830863
--- /dev/null
+++ b/packages/shared/src/components/share/CopyLinkButton.tsx
@@ -0,0 +1,38 @@
+import type { ReactElement } from 'react';
+import React from 'react';
+import { Button, ButtonSize, ButtonVariant } from '../buttons/Button';
+import { LinkIcon } from '../icons';
+import { Tooltip } from '../tooltip/Tooltip';
+import type { UseShareOrCopyLinkProps } from '../../hooks/useShareOrCopyLink';
+import { useShareOrCopyLink } from '../../hooks/useShareOrCopyLink';
+
+interface CopyLinkButtonProps {
+  shareProps: UseShareOrCopyLinkProps;
+  className?: string;
+  size?: ButtonSize;
+  variant?: ButtonVariant;
+}
+
+const LABEL = 'Copy link';
+
+export const CopyLinkButton = ({
+  shareProps,
+  className,
+  size = ButtonSize.Small,
+  variant = ButtonVariant.Float,
+}: CopyLinkButtonProps): ReactElement => {
+  const [, onShareOrCopyLink] = useShareOrCopyLink(shareProps);
+
+  return (
+    <Tooltip content={LABEL}>
+      <Button
+        aria-label={LABEL}
+        className={className}
+        icon={<LinkIcon />}
+        onClick={() => onShareOrCopyLink()}
+        size={size}
+        variant={variant}
+      />
+    </Tooltip>
+  );
+};
diff --git a/packages/shared/src/components/sources/SourceActions/index.tsx b/packages/shared/src/components/sources/SourceActions/index.tsx
index 266ef8d4c31..dad7169f135 100644
--- a/packages/shared/src/components/sources/SourceActions/index.tsx
+++ b/packages/shared/src/components/sources/SourceActions/index.tsx
@@ -8,9 +8,11 @@ import SourceActionsNotify from './SourceActionsNotify';
 import SourceActionsBlock from './SourceActionsBlock';
 import SourceActionsFollow from './SourceActionsFollow';
 import CustomFeedOptionsMenu from '../../CustomFeedOptionsMenu';
+import { CopyLinkButton } from '../../share/CopyLinkButton';
 import { LogEvent } from '../../../lib/log';
 import { useContentPreference } from '../../../hooks/contentPreference/useContentPreference';
 import { ContentPreferenceType } from '../../../graphql/contentPreference';
+import type { ContentPreferenceMutation } from '../../../hooks/contentPreference/types';
 
 interface SourceActionsButton {
   className?: string;
@@ -25,6 +27,7 @@ export interface SourceActionsProps {
   hideFollow?: boolean;
   notifyProps?: SourceActionsButton;
   hideNotify?: boolean;
+  showCopyLink?: boolean;
 }
 
 export const SourceActions = ({
@@ -35,6 +38,7 @@ export const SourceActions = ({
   hideNotify = false,
   source,
   notifyProps,
+  showCopyLink = false,
 }: SourceActionsProps): ReactElement => {
   const {
     isBlocked,
@@ -49,6 +53,32 @@ export const SourceActions = ({
   const { follow, unfollow } = useContentPreference();
   const router = useRouter();
 
+  const updateCustomFeed = (
+    mutate: ContentPreferenceMutation,
+    feedId: string,
+  ) => {
+    if (!source.id) {
+      throw new Error('Cannot update a custom feed for a source without an id');
+    }
+
+    return mutate({
+      id: source.id,
+      entity: ContentPreferenceType.Source,
+      entityName: source.handle,
+      feedId,
+    });
+  };
+
+  const shareProps = {
+    text: `Check out ${source.handle} on daily.dev`,
+    link: source.permalink,
+    cid: ReferralCampaignKey.ShareSource,
+    logObject: () => ({
+      event_name: LogEvent.ShareSource,
+      target_id: source.id,
+    }),
+  };
+
   return (
     <div className="inline-flex flex-row gap-2">
       {!hideFollow && !isBlocked && (
@@ -74,37 +104,16 @@ export const SourceActions = ({
           {...blockProps}
         />
       )}
+      {showCopyLink && <CopyLinkButton shareProps={shareProps} />}
       <CustomFeedOptionsMenu
         onCreateNewFeed={() =>
           router.push(
             `/feeds/new?entityId=${source.id}&entityType=${ContentPreferenceType.Source}`,
           )
         }
-        onAdd={(feedId) =>
-          follow({
-            id: source.id,
-            entity: ContentPreferenceType.Source,
-            entityName: source.handle,
-            feedId,
-          })
-        }
-        onUndo={(feedId) =>
-          unfollow({
-            id: source.id,
-            entity: ContentPreferenceType.Source,
-            entityName: source.handle,
-            feedId,
-          })
-        }
-        shareProps={{
-          text: `Check out ${source.handle} on daily.dev`,
-          link: source.permalink,
-          cid: ReferralCampaignKey.ShareSource,
-          logObject: () => ({
-            event_name: LogEvent.ShareSource,
-            target_id: source.id,
-          }),
-        }}
+        onAdd={(feedId) => updateCustomFeed(follow, feedId)}
+        onUndo={(feedId) => updateCustomFeed(unfollow, feedId)}
+        shareProps={shareProps}
       />
     </div>
   );
diff --git a/packages/shared/src/components/tags/TagTopicPage.tsx b/packages/shared/src/components/tags/TagTopicPage.tsx
index 4c4dc241eec..c4249d7ffae 100644
--- a/packages/shared/src/components/tags/TagTopicPage.tsx
+++ b/packages/shared/src/components/tags/TagTopicPage.tsx
@@ -49,6 +49,7 @@ import { cloudinarySourceRoadmap } from '../../lib/image';
 import { anchorDefaultRel, formatKeyword } from '../../lib/strings';
 import Link from '../utilities/Link';
 import CustomFeedOptionsMenu from '../CustomFeedOptionsMenu';
+import { CopyLinkButton } from '../share/CopyLinkButton';
 import { ArchiveEntryCard } from '../archive/ArchiveEntryCard';
 import { ArchiveScopeType } from '../../graphql/archive';
 import { useContentPreference } from '../../hooks/contentPreference/useContentPreference';
@@ -356,6 +357,16 @@ export const TagTopicPage = ({
     },
   });
 
+  const shareProps = {
+    text: `Check out the ${tag} tag on daily.dev`,
+    link: globalThis?.location?.href,
+    cid: ReferralCampaignKey.ShareTag,
+    logObject: () => ({
+      event_name: LogEvent.ShareTag,
+      target_id: tag,
+    }),
+  };
+
   const statParts: ReactNode[] = [];
   if (typeof followers === 'number') {
     statParts.push(
@@ -447,6 +458,7 @@ export const TagTopicPage = ({
                   {tagStatus === 'blocked' ? 'Unblock' : 'Block'}
                 </Button>
               )}
+              <CopyLinkButton shareProps={shareProps} />
               <CustomFeedOptionsMenu
                 onCreateNewFeed={() =>
                   push(
@@ -469,15 +481,7 @@ export const TagTopicPage = ({
                     feedId,
                   })
                 }
-                shareProps={{
-                  text: `Check out the ${tag} tag on daily.dev`,
-                  link: globalThis?.location?.href,
-                  cid: ReferralCampaignKey.ShareTag,
-                  logObject: () => ({
-                    event_name: LogEvent.ShareTag,
-                    target_id: tag,
-                  }),
-                }}
+                shareProps={shareProps}
               />
             </div>
             {/* SEO crawl paths preserved from the legacy tag page. */}
diff --git a/packages/storybook/stories/features/snapshot/surfaceChrome.tsx b/packages/storybook/stories/features/snapshot/surfaceChrome.tsx
new file mode 100644
index 00000000000..d4654bca9ff
--- /dev/null
+++ b/packages/storybook/stories/features/snapshot/surfaceChrome.tsx
@@ -0,0 +1,162 @@
+import React from 'react';
+import {
+  Button,
+  ButtonSize,
+  ButtonVariant,
+} from '@dailydotdev/shared/src/components/buttons/Button';
+import { LinkIcon } from '@dailydotdev/shared/src/components/icons';
+
+export const AVATAR =
+  'https://res.cloudinary.com/daily-now/image/upload/s--O0TOmw4y--/f_auto/v1715772965/public/noProfile';
+
+
+/* ------------------------------------------------------------------ prose */
+
+export const H1 = ({ children }: { children: React.ReactNode }) => (
+  <h1 className="font-bold text-text-primary typo-mega3">{children}</h1>
+);
+
+export const P = ({ children }: { children: React.ReactNode }) => (
+  <p className="max-w-[54rem] text-text-secondary typo-body">{children}</p>
+);
+
+export const Note = ({ children }: { children: React.ReactNode }) => (
+  <p className="max-w-[54rem] rounded-12 border border-border-subtlest-tertiary bg-surface-float p-4 text-text-secondary typo-callout">
+    {children}
+  </p>
+);
+
+/* ---------------------------------------------------------------- controls */
+
+/**
+ * Inert on purpose: this page compares where a control sits inside a real
+ * screen. The working buttons and live capture are on Button placements.
+ */
+export const Control = () => (
+  <Button
+    aria-label="Copy link"
+    icon={<LinkIcon />}
+    size={ButtonSize.Small}
+    variant={ButtonVariant.Tertiary}
+  />
+);
+
+export type DeviceName = 'Desktop' | 'Tablet' | 'Mobile';
+
+/**
+ * Breakpoints matter more than usual here. PostSourceInfo renders the whole
+ * header cluster as `hidden laptop:flex`, so the ⋯ menu that carries sharing
+ * on desktop is simply not in the article header below 1020px — it moves to a
+ * sticky back-bar, and a floating action bar appears at the bottom. A
+ * recommendation that only works on one of the three is not a recommendation.
+ */
+export const DEVICES: Record<
+  DeviceName,
+  { width: number; viewport: string }
+> = {
+  Desktop: { width: 680, viewport: '1020px and up' },
+  Tablet: { width: 560, viewport: '768px' },
+  Mobile: { width: 375, viewport: '375px' },
+};
+
+/** A surface drawn at one real viewport width, so density is comparable. */
+export const Device = ({
+  name,
+  children,
+  height,
+}: {
+  name: DeviceName;
+  children: React.ReactNode;
+  /** Mobile surfaces pin a floating bar, so the frame needs a known height. */
+  height?: number;
+}) => (
+  <div className="flex shrink-0 flex-col gap-2">
+    <span className="font-bold uppercase text-text-quaternary typo-caption2">
+      {name} · {DEVICES[name].viewport}
+    </span>
+    <div
+      className="relative shrink-0 overflow-hidden rounded-16 border border-border-subtlest-tertiary bg-background-default"
+      style={{ width: DEVICES[name].width, height }}
+    >
+      {children}
+    </div>
+  </div>
+);
+
+/** Devices sit in a scroller rather than wrapping, so widths stay honest. */
+export const Rail = ({ children }: { children: React.ReactNode }) => (
+  <div className="flex w-full items-start gap-6 overflow-x-auto pb-3">
+    {children}
+  </div>
+);
+
+export const Variant = ({
+  step,
+  headline,
+  note,
+  children,
+}: {
+  step: string;
+  headline: string;
+  note: string;
+  children: React.ReactNode;
+}) => (
+  // Full width so a device rail can scroll across the whole canvas.
+  <div className="flex w-full flex-col gap-3">
+    <div className="flex flex-col gap-1">
+      <span className="font-bold uppercase text-text-quaternary typo-caption2">
+        {step}
+      </span>
+      <span className="font-bold text-text-primary typo-callout">
+        {headline}
+      </span>
+      <span className="text-text-tertiary typo-footnote">{note}</span>
+    </div>
+    {children}
+  </div>
+);
+
+export const Category = ({
+  title,
+  covers,
+  verdict,
+  children,
+}: {
+  title: string;
+  covers: string;
+  verdict: string;
+  children: React.ReactNode;
+}) => (
+  <section className="flex flex-col gap-6 border-t border-border-subtlest-tertiary pt-10">
+    <div className="flex flex-col gap-2">
+      <h2 className="font-bold text-text-primary typo-mega3">{title}</h2>
+      <span className="text-text-tertiary typo-footnote">{covers}</span>
+      <p className="max-w-[54rem] text-text-secondary typo-callout">
+        {verdict}
+      </p>
+    </div>
+    <div className="flex flex-col gap-10">{children}</div>
+  </section>
+);
+
+/** Every category page opens with the same header, so they read as a set. */
+export const SurfacePage = ({
+  title,
+  intro,
+  map,
+  children,
+}: {
+  title: string;
+  intro: string;
+  map: string;
+  children: React.ReactNode;
+}) => (
+  <div className="flex flex-col gap-6 p-8">
+    <div className="flex flex-col gap-3">
+      <H1>{title}</H1>
+      <P>{intro}</P>
+      <Note>{map}</Note>
+    </div>
+    {children}
+  </div>
+);
diff --git a/packages/storybook/stories/features/snapshot/surfaces/Directories.stories.tsx b/packages/storybook/stories/features/snapshot/surfaces/Directories.stories.tsx
new file mode 100644
index 00000000000..ea204241265
--- /dev/null
+++ b/packages/storybook/stories/features/snapshot/surfaces/Directories.stories.tsx
@@ -0,0 +1,323 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import {
+  Button,
+  ButtonSize,
+  ButtonVariant,
+} from '@dailydotdev/shared/src/components/buttons/Button';
+import {
+  BellIcon,
+  BlockIcon,
+  MenuIcon,
+} from '@dailydotdev/shared/src/components/icons';
+import type { DeviceName } from '../surfaceChrome';
+import {
+  AVATAR,
+  Category,
+  Control,
+  Device,
+  Rail,
+  SurfacePage,
+  Variant,
+} from '../surfaceChrome';
+
+const Options = () => (
+  <Button
+    aria-label="Options"
+    icon={<MenuIcon />}
+    size={ButtonSize.Small}
+    variant={ButtonVariant.Tertiary}
+  />
+);
+
+/* ------------------------------------------------------------------- tags */
+
+/** TagTopicPage: a centred hero, not a row. No logo, no avatar. */
+const TagScreen = ({ device }: { device: DeviceName }) => (
+  <Device name={device}>
+    {/* TagPageNavbar — full-bleed strip of related tags. */}
+    <div className="no-scrollbar flex gap-2 overflow-x-auto border-b border-border-subtlest-tertiary px-4 py-2">
+      {['typescript', 'javascript', 'react', 'node', 'webdev'].map(
+        (tag, index) => (
+          <span
+            key={tag}
+            className={`whitespace-nowrap rounded-10 px-2 py-1 typo-footnote ${
+              index === 0
+                ? 'bg-surface-float font-bold text-text-primary'
+                : 'text-text-tertiary'
+            }`}
+          >
+            #{tag}
+          </span>
+        ),
+      )}
+    </div>
+
+    <header className="mx-auto flex w-full max-w-[48rem] flex-col items-center gap-4 px-4 py-8 text-center">
+      <h1
+        className={`font-bold text-text-primary ${
+          device === 'Mobile' ? 'typo-title2' : 'typo-large-title'
+        }`}
+      >
+        TypeScript
+      </h1>
+      <span className="flex flex-wrap items-center justify-center gap-x-2 text-text-tertiary typo-callout">
+        <span>Tag</span>
+        <span aria-hidden>·</span>
+        <span>48.2K followers</span>
+        <span aria-hidden>·</span>
+        <span>12.4K stories</span>
+      </span>
+      <p className="max-w-[44rem] text-text-secondary typo-body">
+        A typed superset of JavaScript that compiles to plain JavaScript.
+      </p>
+      <div className="mt-1 flex flex-row items-center justify-center gap-3">
+        <Button size={ButtonSize.Small} variant={ButtonVariant.Primary}>
+          Follow
+        </Button>
+        <Button
+          icon={<BlockIcon />}
+          size={ButtonSize.Small}
+          variant={ButtonVariant.Float}
+        >
+          Block
+        </Button>
+        <Control />
+        <Options />
+      </div>
+    </header>
+  </Device>
+);
+
+/* ---------------------------------------------------------------- sources */
+
+/** The source page is left-aligned, and its actions sit below the title. */
+const SourceScreen = ({ device }: { device: DeviceName }) => (
+  <Device name={device}>
+    <div className="flex flex-col gap-3 p-4">
+      <span className="text-text-tertiary typo-footnote">
+        Sources / XDA Developers
+      </span>
+
+      <div className="flex items-center font-bold">
+        <img alt="" className="size-10 rounded-full object-cover" src={AVATAR} />
+        <h1 className="ml-2 w-fit text-text-primary typo-title2">
+          XDA Developers
+        </h1>
+      </div>
+
+      <div className="flex flex-row items-center gap-2">
+        <Button size={ButtonSize.Small} variant={ButtonVariant.Primary}>
+          Follow
+        </Button>
+        <Button
+          aria-label="Notifications"
+          icon={<BellIcon />}
+          size={ButtonSize.Small}
+          variant={ButtonVariant.Float}
+        />
+        <Control />
+        <Options />
+      </div>
+
+      <p className="text-text-primary typo-body">
+        News and reviews for developers, by developers.
+      </p>
+
+      <div className="flex flex-wrap gap-2">
+        {['#android', '#hardware', '#reviews'].map((tag) => (
+          <span
+            key={tag}
+            className="rounded-8 bg-surface-float px-2 py-1 text-text-tertiary typo-caption1"
+          >
+            {tag}
+          </span>
+        ))}
+      </div>
+    </div>
+  </Device>
+);
+
+/* ----------------------------------------------------------------- squads */
+
+/** SquadEntityCard: w-80, image and actions on one row, body under it. */
+const SquadCard = () => (
+  <div className="flex w-80 shrink-0 flex-col items-center rounded-16 border border-border-subtlest-tertiary bg-background-popover p-4">
+    <div className="flex w-full items-start justify-between gap-2">
+      <img alt="" className="size-10 rounded-full object-cover" src={AVATAR} />
+      <div className="flex items-center gap-2">
+        <Control />
+        <Button size={ButtonSize.Small} variant={ButtonVariant.Primary}>
+          Join
+        </Button>
+        {/* SquadHeaderMenu — `invisible group-hover/menu:visible`. */}
+        <Options />
+      </div>
+    </div>
+    <div className="mt-3 flex w-full flex-col gap-2">
+      <span className="font-bold text-text-primary typo-body">
+        Frontend Fans
+      </span>
+      <p className="text-text-secondary typo-footnote">
+        Everything CSS, React and the browser. Ship it and show it.
+      </p>
+      <span className="flex items-center gap-1 text-text-tertiary typo-footnote">
+        2.4K Members
+        <span aria-hidden>·</span>
+        12K Upvotes
+      </span>
+    </div>
+  </div>
+);
+
+const SquadScreen = ({ device }: { device: DeviceName }) => (
+  <Device name={device}>
+    <div className="flex flex-col gap-4 p-4">
+      <h1 className="font-bold text-text-primary typo-title2">Squads</h1>
+      <div className="flex gap-4 overflow-hidden">
+        <SquadCard />
+        {device === 'Desktop' && <SquadCard />}
+      </div>
+    </div>
+  </Device>
+);
+
+/* ---------------------------------------------------------------- archive */
+
+/** ArchiveIndexPage: a month grid, no posts and no feed controls. */
+const ArchiveScreen = ({ device }: { device: DeviceName }) => (
+  <Device name={device}>
+    <div className="flex flex-col gap-4 py-4">
+      <span className="px-4 text-text-tertiary typo-footnote">
+        Sources / XDA Developers / Best of
+      </span>
+      <div className="flex items-center gap-2 px-4">
+        <h1
+          className={`flex-1 font-bold text-text-primary ${
+            device === 'Mobile' ? 'typo-title2' : 'typo-title1'
+          }`}
+        >
+          Best of XDA Developers &mdash; Archive
+        </h1>
+        <Control />
+      </div>
+
+      <div className="flex flex-col gap-4 px-4">
+        {['2026', '2025'].map((year) => (
+          <div key={year}>
+            <h2 className="mb-3 font-bold text-text-primary typo-title3">
+              {year}
+            </h2>
+            <div
+              className={`grid gap-3 ${
+                device === 'Mobile' ? 'grid-cols-3' : 'grid-cols-4'
+              }`}
+            >
+              {['January', 'February', 'March', 'April'].map((month) => (
+                <span
+                  key={month}
+                  className="flex flex-col gap-1 rounded-12 border border-border-subtlest-tertiary p-3"
+                >
+                  <span className="font-bold text-text-primary typo-callout">
+                    {month}
+                  </span>
+                  <span className="text-text-tertiary typo-footnote">
+                    24 posts
+                  </span>
+                </span>
+              ))}
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  </Device>
+);
+
+/* -------------------------------------------------------------------- page */
+
+const Rails = ({
+  Screen,
+}: {
+  Screen: React.ComponentType<{ device: DeviceName }>;
+}) => (
+  <Rail>
+    <Screen device="Desktop" />
+    <Screen device="Tablet" />
+    <Screen device="Mobile" />
+  </Rail>
+);
+
+const Directories = () => (
+  <SurfacePage
+    intro="Tags, sources, squads and archives all end in a live feed, and each one now carries a copy link of its own. What differs is the frame around it — no two of these four headers are laid out the same way, so the same control lands in a different place on each."
+    map="Sharing map: Copy link leads on all of them (#6357, #6363, #6364). These are live pages — an image of a tag says nothing a feed does not, and the point of a squad share is joining. No snapshot on any of the four."
+    title="Topic & directory pages"
+  >
+    <Category
+      covers="TagTopicPage.tsx · CustomFeedOptionsMenu.tsx"
+      title="Tag page"
+      verdict="A centred hero: H1, a ‘Tag · 48.2K followers · 12.4K stories’ line, the description, then Follow / Block / ⋯ centred beneath. No logo and no avatar — the type is the whole identity."
+    >
+      <Variant
+        headline="Copy link in the button row"
+        note="Sits between Block and the ⋯, matched to them at Small. The row is centred, so the extra control shifts everything — worth checking against the Sponsored hero above it."
+        step="Shipping"
+      >
+        <Rails Screen={TagScreen} />
+      </Variant>
+    </Category>
+
+    <Category
+      covers="pages/sources/[source].tsx · SourceActions/index.tsx"
+      title="Source page"
+      verdict="Same menu, completely different frame: breadcrumbs, a 40px round logo beside a typo-title2 H1, and the action row on its own line below rather than beside the title."
+    >
+      <Variant
+        headline="Copy link beside the bell"
+        note="Cheaper here than on the tag page: the row is left-aligned and already mixes labeled and icon buttons, so one more icon costs nothing and moves nothing."
+        step="Shipping"
+      >
+        <Rails Screen={SourceScreen} />
+      </Variant>
+    </Category>
+
+    <Category
+      covers="SquadEntityCard.tsx · EntityCard.tsx · SquadHeaderMenu"
+      title="Squad directory card"
+      verdict="A w-80 card: logo top-left, Join and ⋯ top-right, then name, description and ‘2.4K Members · 12K Upvotes’. The ⋯ is `invisible group-hover/menu:visible`, so sharing through the menu does not exist on touch at all."
+    >
+      <Variant
+        headline="A persistent copy-link icon"
+        note="Always visible, so it works on touch where the hover-only menu never did, and placed before Join so it never competes with the conversion button."
+        step="Shipping"
+      >
+        <Rails Screen={SquadScreen} />
+      </Variant>
+    </Category>
+
+    <Category
+      covers="ArchiveIndexPage.tsx"
+      title="Best of / archive"
+      verdict="This page has no post list and no controls of any kind — breadcrumbs, an H1, and a grid of month tiles. The most linkable thing we publish, with nothing on it."
+    >
+      <Variant
+        headline="Copy link beside the heading"
+        note="Evergreen pages are worth landing on, so the link is the gift, and the heading row was empty. No snapshot: the page is a month grid rather than content, so an image would have to be generated from data instead of captured."
+        step="Shipping"
+      >
+        <Rails Screen={ArchiveScreen} />
+      </Variant>
+    </Category>
+  </SurfacePage>
+);
+
+const meta: Meta<typeof Directories> = {
+  title: 'Features/Snapshot/Surfaces/Topic & directory pages',
+  component: Directories,
+  parameters: { layout: 'fullscreen' },
+};
+
+export default meta;
+
+export const Variations: StoryObj<typeof Directories> = {};
diff --git a/packages/webapp/pages/sources/[source].tsx b/packages/webapp/pages/sources/[source].tsx
index baab4eadec0..4a48fc4e6f5 100644
--- a/packages/webapp/pages/sources/[source].tsx
+++ b/packages/webapp/pages/sources/[source].tsx
@@ -301,7 +301,7 @@ const SourcePage = ({
             <h1 className="ml-2 w-fit typo-title2">{source.name}</h1>
           </div>
           <div className="flex flex-row gap-3">
-            <SourceActions source={source} />
+            <SourceActions showCopyLink source={source} />
           </div>
           {source?.description && (
             <p className="typo-body">{source?.description}</p>