From bce557cc2dc767628bed6aac87301a1be7c5431b Mon Sep 17 00:00:00 2001
From: rxliuli <rxliuli@gmail.com>
Date: Tue, 4 Nov 2025 05:03:50 +0800
Subject: init commit

---
 .../shelf/AccessibilityDeveloperLinkShelf.svelte   |  36 +++
 .../jet/shelf/AccessibilityFeaturesShelf.svelte    |  35 +++
 .../jet/shelf/AccessibilityHeaderShelf.svelte      | 182 ++++++++++++
 src/components/jet/shelf/ActionShelf.svelte        |  80 ++++++
 src/components/jet/shelf/AnnotationShelf.svelte    |  49 ++++
 .../jet/shelf/AppEventDetailShelf.svelte           | 290 +++++++++++++++++++
 src/components/jet/shelf/AppPromotionShelf.svelte  |  47 +++
 src/components/jet/shelf/AppShowcaseShelf.svelte   |  29 ++
 .../jet/shelf/AppTrailerLockupShelf.svelte         |  48 ++++
 src/components/jet/shelf/ArcadeFooterShelf.svelte  |  32 +++
 src/components/jet/shelf/BannerShelf.svelte        |  35 +++
 src/components/jet/shelf/BrickShelf.svelte         |  31 ++
 src/components/jet/shelf/CategoryBrickShelf.svelte |  28 ++
 src/components/jet/shelf/EditorialCardShelf.svelte |  32 +++
 src/components/jet/shelf/EditorialLinkShelf.svelte | 122 ++++++++
 src/components/jet/shelf/FallbackShelf.svelte      |  39 +++
 src/components/jet/shelf/FramedArtworkShelf.svelte |  98 +++++++
 src/components/jet/shelf/FramedVideoShelf.svelte   |  78 +++++
 src/components/jet/shelf/HeroCarouselShelf.svelte  |  38 +++
 .../jet/shelf/HorizontalRuleShelf.svelte           |  54 ++++
 src/components/jet/shelf/HorizontalShelf.svelte    |  53 ++++
 .../jet/shelf/InAppPurchaseLockupShelf.svelte      |  31 ++
 src/components/jet/shelf/LargeBrickShelf.svelte    |  26 ++
 .../jet/shelf/LargeHeroBreakoutShelf.svelte        |  31 ++
 .../jet/shelf/LargeImageLockupShelf.svelte         |  30 ++
 src/components/jet/shelf/LargeLockupShelf.svelte   |  28 ++
 .../jet/shelf/LargeStoryCardShelf.svelte           |  32 +++
 src/components/jet/shelf/LinkableTextShelf.svelte  |  43 +++
 src/components/jet/shelf/MarkerShelf.svelte        |  36 +++
 .../jet/shelf/MediumImageLockupShelf.svelte        |  28 ++
 src/components/jet/shelf/MediumLockupShelf.svelte  |  31 ++
 .../jet/shelf/MediumStoryCardShelf.svelte          |  31 ++
 src/components/jet/shelf/PageHeaderShelf.svelte    |  34 +++
 src/components/jet/shelf/ParagraphShelf.svelte     |  52 ++++
 src/components/jet/shelf/PosterLockupShelf.svelte  |  31 ++
 src/components/jet/shelf/PrivacyFooterShelf.svelte |  40 +++
 src/components/jet/shelf/PrivacyHeaderShelf.svelte | 145 ++++++++++
 src/components/jet/shelf/PrivacyTypeShelf.svelte   |  29 ++
 src/components/jet/shelf/ProductBadgeShelf.svelte  |  59 ++++
 .../jet/shelf/ProductCapabilityShelf.svelte        |  31 ++
 .../jet/shelf/ProductDescriptionShelf.svelte       |  95 ++++++
 src/components/jet/shelf/ProductMediaShelf.svelte  | 269 +++++++++++++++++
 .../jet/shelf/ProductPageLinkShelf.svelte          |  59 ++++
 .../jet/shelf/ProductRatingsShelf.svelte           |  29 ++
 src/components/jet/shelf/ProductReviewShelf.svelte |  38 +++
 src/components/jet/shelf/QuoteShelf.svelte         |  80 ++++++
 .../jet/shelf/ReviewsContainerShelf.svelte         |  84 ++++++
 src/components/jet/shelf/ReviewsShelf.svelte       |  28 ++
 src/components/jet/shelf/RibbonBarShelf.svelte     | 135 +++++++++
 src/components/jet/shelf/SearchLinkShelf.svelte    |  26 ++
 src/components/jet/shelf/SearchResultShelf.svelte  |  49 ++++
 src/components/jet/shelf/Shelf.svelte              | 320 +++++++++++++++++++++
 src/components/jet/shelf/SmallBreakoutShelf.svelte |  32 +++
 src/components/jet/shelf/SmallBrickShelf.svelte    |  26 ++
 src/components/jet/shelf/SmallLockupShelf.svelte   |  54 ++++
 .../jet/shelf/SmallStoryCardShelf.svelte           |  66 +++++
 .../jet/shelf/TitledParagraphShelf.svelte          | 118 ++++++++
 src/components/jet/shelf/TodayCardShelf.svelte     | 187 ++++++++++++
 src/components/jet/shelf/UberShelf.svelte          |  40 +++
 59 files changed, 3939 insertions(+)
 create mode 100644 src/components/jet/shelf/AccessibilityDeveloperLinkShelf.svelte
 create mode 100644 src/components/jet/shelf/AccessibilityFeaturesShelf.svelte
 create mode 100644 src/components/jet/shelf/AccessibilityHeaderShelf.svelte
 create mode 100644 src/components/jet/shelf/ActionShelf.svelte
 create mode 100644 src/components/jet/shelf/AnnotationShelf.svelte
 create mode 100644 src/components/jet/shelf/AppEventDetailShelf.svelte
 create mode 100644 src/components/jet/shelf/AppPromotionShelf.svelte
 create mode 100644 src/components/jet/shelf/AppShowcaseShelf.svelte
 create mode 100644 src/components/jet/shelf/AppTrailerLockupShelf.svelte
 create mode 100644 src/components/jet/shelf/ArcadeFooterShelf.svelte
 create mode 100644 src/components/jet/shelf/BannerShelf.svelte
 create mode 100644 src/components/jet/shelf/BrickShelf.svelte
 create mode 100644 src/components/jet/shelf/CategoryBrickShelf.svelte
 create mode 100644 src/components/jet/shelf/EditorialCardShelf.svelte
 create mode 100644 src/components/jet/shelf/EditorialLinkShelf.svelte
 create mode 100644 src/components/jet/shelf/FallbackShelf.svelte
 create mode 100644 src/components/jet/shelf/FramedArtworkShelf.svelte
 create mode 100644 src/components/jet/shelf/FramedVideoShelf.svelte
 create mode 100644 src/components/jet/shelf/HeroCarouselShelf.svelte
 create mode 100644 src/components/jet/shelf/HorizontalRuleShelf.svelte
 create mode 100644 src/components/jet/shelf/HorizontalShelf.svelte
 create mode 100644 src/components/jet/shelf/InAppPurchaseLockupShelf.svelte
 create mode 100644 src/components/jet/shelf/LargeBrickShelf.svelte
 create mode 100644 src/components/jet/shelf/LargeHeroBreakoutShelf.svelte
 create mode 100644 src/components/jet/shelf/LargeImageLockupShelf.svelte
 create mode 100644 src/components/jet/shelf/LargeLockupShelf.svelte
 create mode 100644 src/components/jet/shelf/LargeStoryCardShelf.svelte
 create mode 100644 src/components/jet/shelf/LinkableTextShelf.svelte
 create mode 100644 src/components/jet/shelf/MarkerShelf.svelte
 create mode 100644 src/components/jet/shelf/MediumImageLockupShelf.svelte
 create mode 100644 src/components/jet/shelf/MediumLockupShelf.svelte
 create mode 100644 src/components/jet/shelf/MediumStoryCardShelf.svelte
 create mode 100644 src/components/jet/shelf/PageHeaderShelf.svelte
 create mode 100644 src/components/jet/shelf/ParagraphShelf.svelte
 create mode 100644 src/components/jet/shelf/PosterLockupShelf.svelte
 create mode 100644 src/components/jet/shelf/PrivacyFooterShelf.svelte
 create mode 100644 src/components/jet/shelf/PrivacyHeaderShelf.svelte
 create mode 100644 src/components/jet/shelf/PrivacyTypeShelf.svelte
 create mode 100644 src/components/jet/shelf/ProductBadgeShelf.svelte
 create mode 100644 src/components/jet/shelf/ProductCapabilityShelf.svelte
 create mode 100644 src/components/jet/shelf/ProductDescriptionShelf.svelte
 create mode 100644 src/components/jet/shelf/ProductMediaShelf.svelte
 create mode 100644 src/components/jet/shelf/ProductPageLinkShelf.svelte
 create mode 100644 src/components/jet/shelf/ProductRatingsShelf.svelte
 create mode 100644 src/components/jet/shelf/ProductReviewShelf.svelte
 create mode 100644 src/components/jet/shelf/QuoteShelf.svelte
 create mode 100644 src/components/jet/shelf/ReviewsContainerShelf.svelte
 create mode 100644 src/components/jet/shelf/ReviewsShelf.svelte
 create mode 100644 src/components/jet/shelf/RibbonBarShelf.svelte
 create mode 100644 src/components/jet/shelf/SearchLinkShelf.svelte
 create mode 100644 src/components/jet/shelf/SearchResultShelf.svelte
 create mode 100644 src/components/jet/shelf/Shelf.svelte
 create mode 100644 src/components/jet/shelf/SmallBreakoutShelf.svelte
 create mode 100644 src/components/jet/shelf/SmallBrickShelf.svelte
 create mode 100644 src/components/jet/shelf/SmallLockupShelf.svelte
 create mode 100644 src/components/jet/shelf/SmallStoryCardShelf.svelte
 create mode 100644 src/components/jet/shelf/TitledParagraphShelf.svelte
 create mode 100644 src/components/jet/shelf/TodayCardShelf.svelte
 create mode 100644 src/components/jet/shelf/UberShelf.svelte

(limited to 'src/components/jet/shelf')

diff --git a/src/components/jet/shelf/AccessibilityDeveloperLinkShelf.svelte b/src/components/jet/shelf/AccessibilityDeveloperLinkShelf.svelte
new file mode 100644
index 0000000..c1e7b2e
--- /dev/null
+++ b/src/components/jet/shelf/AccessibilityDeveloperLinkShelf.svelte
@@ -0,0 +1,36 @@
+<script lang="ts" context="module">
+    import type {
+        AccessibilityParagraph,
+        Shelf,
+    } from '@jet-app/app-store/api/models';
+
+    interface AccessibilityDeveloperLinkShelf extends Shelf {
+        items: [AccessibilityParagraph];
+    }
+
+    export function isAccessibilityDeveloperLinkShelf(
+        shelf: Shelf,
+    ): shelf is AccessibilityDeveloperLinkShelf {
+        let { contentType, items, title } = shelf;
+
+        return (
+            contentType === 'accessibilityParagraph' &&
+            !title &&
+            Array.isArray(items)
+        );
+    }
+</script>
+
+<script lang="ts">
+    import ShelfWrapper from '~/components/Shelf/Wrapper.svelte';
+    import AccessibilityParagraphItem from '../item/AccessibilityParagraphItem.svelte';
+    import { getAccessibilityLayoutConfiguration } from '~/context/accessibility-layout';
+
+    export let shelf: AccessibilityDeveloperLinkShelf;
+
+    $: ({ withBottomPadding } = getAccessibilityLayoutConfiguration(shelf));
+</script>
+
+<ShelfWrapper {shelf} centered {withBottomPadding}>
+    <AccessibilityParagraphItem item={shelf.items[0]} />
+</ShelfWrapper>
diff --git a/src/components/jet/shelf/AccessibilityFeaturesShelf.svelte b/src/components/jet/shelf/AccessibilityFeaturesShelf.svelte
new file mode 100644
index 0000000..cb2fed8
--- /dev/null
+++ b/src/components/jet/shelf/AccessibilityFeaturesShelf.svelte
@@ -0,0 +1,35 @@
+<script lang="ts" context="module">
+    import type {
+        AccessibilityFeatures,
+        Shelf,
+    } from '@jet-app/app-store/api/models';
+
+    export interface AccessibilityFeaturesShelf extends Shelf {
+        items: AccessibilityFeatures[];
+    }
+
+    export function isAccessibilityFeaturesShelf(
+        shelf: Shelf,
+    ): shelf is AccessibilityFeaturesShelf {
+        let { contentType, items } = shelf;
+
+        return contentType === 'accessibilityFeatures' && Array.isArray(items);
+    }
+</script>
+
+<script lang="ts">
+    import ShelfWrapper from '~/components/Shelf/Wrapper.svelte';
+    import ShelfItemLayout from '~/components/ShelfItemLayout.svelte';
+    import AccessibilityFeaturesItem from '~/components/jet/item/AccessibilityFeaturesItem.svelte';
+    import { getAccessibilityLayoutConfiguration } from '~/context/accessibility-layout';
+
+    export let shelf: AccessibilityFeaturesShelf;
+
+    $: ({ withBottomPadding } = getAccessibilityLayoutConfiguration(shelf));
+</script>
+
+<ShelfWrapper {shelf} {withBottomPadding}>
+    <ShelfItemLayout {shelf} gridType="B" let:item>
+        <AccessibilityFeaturesItem {item} />
+    </ShelfItemLayout>
+</ShelfWrapper>
diff --git a/src/components/jet/shelf/AccessibilityHeaderShelf.svelte b/src/components/jet/shelf/AccessibilityHeaderShelf.svelte
new file mode 100644
index 0000000..990c507
--- /dev/null
+++ b/src/components/jet/shelf/AccessibilityHeaderShelf.svelte
@@ -0,0 +1,182 @@
+<script lang="ts" context="module">
+    import {
+        type Action,
+        type FlowAction,
+        type GenericPage,
+        type AccessibilityParagraph,
+        type Shelf,
+        isFlowAction,
+    } from '@jet-app/app-store/api/models';
+
+    import {
+        isAccessibilityFeaturesShelf,
+        type AccessibilityFeaturesShelf,
+    } from '~/components/jet/shelf/AccessibilityFeaturesShelf.svelte';
+
+    interface AccessibilityParagraphShelf extends Shelf {
+        items: [AccessibilityParagraph];
+    }
+
+    interface AccessibilityHeaderShelf extends AccessibilityParagraphShelf {
+        items: [AccessibilityParagraph];
+    }
+
+    interface AccessibilityDetailPage extends GenericPage {
+        shelves: (AccessibilityFeaturesShelf | AccessibilityParagraphShelf)[];
+    }
+
+    interface AccessibilityDetailPageFlowAction extends FlowAction {
+        page: 'accessibilityDetails';
+        pageData: AccessibilityDetailPage;
+    }
+
+    export function isAccessibilityHeaderShelf(
+        shelf: Shelf,
+    ): shelf is AccessibilityHeaderShelf {
+        let { contentType, items, title } = shelf;
+
+        return (
+            contentType === 'accessibilityParagraph' &&
+            !!title &&
+            Array.isArray(items)
+        );
+    }
+
+    function isAccessibilityParagraphShelf(
+        shelf: Shelf,
+    ): shelf is AccessibilityParagraphShelf {
+        let { contentType, items } = shelf;
+
+        return contentType === 'accessibilityParagraph' && Array.isArray(items);
+    }
+
+    function isAccessibilityDetailFlowAction(
+        action: Action,
+    ): action is AccessibilityDetailPageFlowAction {
+        return isFlowAction(action) && action.page === 'accessibilityDetails';
+    }
+</script>
+
+<script lang="ts">
+    import Modal from '@amp/web-app-components/src/components/Modal/Modal.svelte';
+    import ContentModal from '~/components/jet/item/ContentModal.svelte';
+    import ShelfWrapper from '~/components/Shelf/Wrapper.svelte';
+    import ShelfTitle from '~/components/Shelf/Title.svelte';
+    import AccessibilityParagraphItem from '~/components/jet/item/AccessibilityParagraphItem.svelte';
+    import AccessibilityFeaturesItem from '~/components/jet/item/AccessibilityFeaturesItem.svelte';
+    import { getI18n } from '~/stores/i18n';
+    import { getAccessibilityLayoutConfiguration } from '~/context/accessibility-layout';
+
+    export let shelf: AccessibilityHeaderShelf;
+
+    $: ({ withBottomPadding } = getAccessibilityLayoutConfiguration(shelf));
+
+    let modalComponent: Modal | undefined;
+    let modalTriggerElement: HTMLElement | null = null;
+
+    const { seeAllAction } = shelf;
+    const i18n = getI18n();
+    const translateFn = (key: string) => $i18n.t(key);
+    const handleModalClose = () => modalComponent?.close();
+    const handleOpenModalClick = (e: Event) => {
+        modalTriggerElement = e.target as HTMLElement;
+        modalComponent?.showModal();
+    };
+
+    const destination =
+        seeAllAction && isAccessibilityDetailFlowAction(seeAllAction)
+            ? seeAllAction
+            : undefined;
+    const pageData = destination?.pageData;
+</script>
+
+<ShelfWrapper {shelf} {withBottomPadding}>
+    <div slot="title" class="title-container">
+        {#if shelf.title}
+            {#if destination}
+                <button on:click={handleOpenModalClick}>
+                    <ShelfTitle
+                        title={shelf.title}
+                        seeAllAction={destination}
+                    />
+                </button>
+            {:else}
+                <ShelfTitle title={shelf.title} />
+            {/if}
+        {/if}
+
+        {#if pageData}
+            <Modal {modalTriggerElement} bind:this={modalComponent}>
+                <ContentModal
+                    on:close={handleModalClose}
+                    title={pageData.title || null}
+                    subtitle={null}
+                >
+                    <svelte:fragment slot="content">
+                        <div class="modal-content-container">
+                            {#each pageData.shelves as shelf}
+                                <div class="content-section">
+                                    {#if isAccessibilityParagraphShelf(shelf)}
+                                        {#each shelf.items as item}
+                                            <AccessibilityParagraphItem
+                                                {item}
+                                            />
+                                        {/each}
+                                    {/if}
+
+                                    {#if isAccessibilityFeaturesShelf(shelf)}
+                                        {#each shelf.items as item}
+                                            <AccessibilityFeaturesItem
+                                                {item}
+                                                isDetailView={true}
+                                            />
+                                        {/each}
+                                    {/if}
+                                </div>
+                            {/each}
+                        </div>
+                    </svelte:fragment>
+                </ContentModal>
+            </Modal>
+        {/if}
+    </div>
+
+    <div class="header-container">
+        <div>
+            <AccessibilityParagraphItem item={shelf.items[0]} />
+        </div>
+    </div>
+</ShelfWrapper>
+
+<style>
+    .title-container {
+        display: flex;
+        justify-content: space-between;
+        padding-top: 16px;
+        padding-inline-end: var(--bodyGutter);
+    }
+
+    .header-container {
+        margin: 0 var(--bodyGutter);
+    }
+
+    .header-container div {
+        @media (--range-medium-up) {
+            width: 66%;
+        }
+    }
+
+    .modal-content-container {
+        font: var(--body-tall);
+        white-space: normal;
+    }
+
+    .modal-content-container .content-section {
+        padding-top: 20px;
+        border-top: 1px solid var(--defaultLine);
+    }
+
+    .modal-content-container .content-section:not(:first-child) {
+        margin-top: 20px;
+    }
+</style>
diff --git a/src/components/jet/shelf/ActionShelf.svelte b/src/components/jet/shelf/ActionShelf.svelte
new file mode 100644
index 0000000..847438f
--- /dev/null
+++ b/src/components/jet/shelf/ActionShelf.svelte
@@ -0,0 +1,80 @@
+<script lang="ts" context="module">
+    import type { Shelf, Action } from '@jet-app/app-store/api/models';
+
+    interface ActionShelf extends Shelf {
+        items: Action[];
+    }
+
+    export function isActionShelf(shelf: Shelf): shelf is ActionShelf {
+        return shelf.contentType === 'action' && Array.isArray(shelf.items);
+    }
+</script>
+
+<script lang="ts">
+    import Artwork, { getNaturalProfile } from '~/components/Artwork.svelte';
+    import LinkWrapper from '~/components/LinkWrapper.svelte';
+    import ShelfItemLayout from '~/components/ShelfItemLayout.svelte';
+    import ShelfWrapper from '~/components/Shelf/Wrapper.svelte';
+
+    export let shelf: ActionShelf;
+</script>
+
+<ShelfWrapper {shelf}>
+    <ShelfItemLayout {shelf} gridType="F" let:item>
+        {@const action = item}
+        {@const artwork = item.artwork}
+        {@const title = item.title}
+
+        <div class="container">
+            <LinkWrapper {action}>
+                {#if artwork}
+                    <div class="artwork-container" aria-hidden="true">
+                        <Artwork
+                            {artwork}
+                            profile={getNaturalProfile(artwork, [24])}
+                            hasTransparentBackground
+                        />
+                    </div>
+                {/if}
+                {title}
+            </LinkWrapper>
+        </div>
+    </ShelfItemLayout>
+</ShelfWrapper>
+
+<style>
+    .container :global(a) {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        flex-shrink: 0;
+        background: var(--pageBG);
+        border-radius: var(--global-border-radius-medium);
+        box-shadow: var(--shadow-small);
+        padding: 16px 10px;
+        width: 100%;
+        font: var(--title-3-medium);
+        transition: background-color 210ms ease-out;
+    }
+
+    .container :global(a:hover) {
+        /* stylelint-disable color-function-notation */
+        background-color: rgb(from var(--pageBG) r g b/0.1);
+        /* stylelint-enable color-function-notation */
+
+        @media (prefers-color-scheme: dark) {
+            /* stylelint-disable color-function-notation */
+            background-color: rgb(from var(--pageBG) r g b/0.85);
+            /* stylelint-enable color-function-notation */
+        }
+    }
+
+    .artwork-container {
+        width: 24px;
+        height: 24px;
+    }
+
+    .container :global(.external-link-arrow) {
+        height: 10px;
+    }
+</style>
diff --git a/src/components/jet/shelf/AnnotationShelf.svelte b/src/components/jet/shelf/AnnotationShelf.svelte
new file mode 100644
index 0000000..e11de72
--- /dev/null
+++ b/src/components/jet/shelf/AnnotationShelf.svelte
@@ -0,0 +1,49 @@
+<script lang="ts" context="module">
+    import type { Shelf, Annotation } from '@jet-app/app-store/api/models';
+
+    interface AnnotationShelf extends Shelf {
+        items: Annotation[];
+    }
+
+    export function isAnnotationShelf(shelf: Shelf): shelf is AnnotationShelf {
+        const { contentType, items } = shelf;
+
+        return contentType === 'annotation' && Array.isArray(items);
+    }
+</script>
+
+<script lang="ts">
+    import Grid from '~/components/Grid.svelte';
+    import CollapsableContent from '~/components/CollapsableContent.svelte';
+    import AnnotationItem from '~/components/jet/item/Annotation/AnnotationItem.svelte';
+    import ShelfWrapper from '~/components/Shelf/Wrapper.svelte';
+
+    export let shelf: AnnotationShelf;
+</script>
+
+<ShelfWrapper {shelf}>
+    <dl>
+        <Grid items={shelf.items} gridType="F" let:item>
+            <dt>{item.title}</dt>
+
+            {#if item.summary}
+                <CollapsableContent>
+                    <svelte:fragment slot="summary">
+                        {item.summary}
+                    </svelte:fragment>
+
+                    <AnnotationItem {item} />
+                </CollapsableContent>
+            {:else}
+                <AnnotationItem {item} />
+            {/if}
+        </Grid>
+    </dl>
+</ShelfWrapper>
+
+<style>
+    dt {
+        color: var(--systemSecondary);
+        margin-bottom: 4px;
+    }
+</style>
diff --git a/src/components/jet/shelf/AppEventDetailShelf.svelte b/src/components/jet/shelf/AppEventDetailShelf.svelte
new file mode 100644
index 0000000..2ae84eb
--- /dev/null
+++ b/src/components/jet/shelf/AppEventDetailShelf.svelte
@@ -0,0 +1,290 @@
+<script lang="ts" context="module">
+    import {
+        type AppEventDetailShelf,
+        isAppEventDetailShelf,
+        isFlowAction,
+    } from '@jet-app/app-store/api/models';
+
+    export { isAppEventDetailShelf };
+</script>
+
+<script lang="ts">
+    import type { CropCode } from '@amp/web-app-components/src/components/Artwork/types';
+    import { buildSrc } from '@amp/web-app-components/src/components/Artwork/utils/srcset';
+    import mediaQueries from '~/utils/media-queries';
+    import Artwork from '~/components/Artwork.svelte';
+    import Video from '~/components/jet/Video.svelte';
+    import ShelfWrapper from '~/components/Shelf/Wrapper.svelte';
+    import SmallLockupItem from '~/components/jet/item/SmallLockupItem.svelte';
+    import GradientOverlay from '~/components/GradientOverlay.svelte';
+    import { colorAsString } from '~/utils/color';
+    import AppEventDate from '~/components/AppEventDate.svelte';
+    import { platform } from '@amp/web-apps-utils';
+    import LaunchNativeButton from '~/components/LaunchNativeButton.svelte';
+
+    export let shelf: AppEventDetailShelf;
+
+    $: item = shelf.items[0];
+    $: ({ appEvent, artwork: productArtwork, video } = item);
+    $: ({ requirements, lockup } = appEvent);
+    $: artwork = video ? video.preview : productArtwork;
+
+    $: backgroundImageUrl = artwork
+        ? buildSrc(
+              artwork.template,
+              {
+                  crop: artwork.crop as CropCode,
+                  width: 200,
+                  height: Math.floor(200 / (artwork.width / artwork.height)),
+                  fileType: 'webp',
+              },
+              {},
+          )
+        : undefined;
+
+    $: backgroundColor = artwork?.backgroundColor
+        ? colorAsString(artwork.backgroundColor)
+        : '#000';
+    $: hasLightArtwork = appEvent.mediaOverlayStyle === 'light';
+    $: isXSmallViewport = $mediaQueries === 'xsmall';
+    $: clickAction = lockup?.clickAction;
+    $: urlToLaunchNatively =
+        clickAction && isFlowAction(clickAction) ? clickAction.pageUrl : null;
+    $: shouldShowLaunchNativeButton =
+        platform.ismacOS() &&
+        lockup?.isIOSBinaryMacOSCompatible &&
+        !!urlToLaunchNatively;
+
+    function makeCSSURL(url: string | null | undefined): string {
+        return url ? `url(${url})` : '';
+    }
+</script>
+
+<ShelfWrapper {shelf} withBottomPadding={false} centered={false}>
+    <div
+        class="event-detail"
+        style:--background-image-url={makeCSSURL(backgroundImageUrl)}
+        style:--background-color={backgroundColor}
+    >
+        {#if video}
+            <div class="video-container">
+                <Video
+                    {video}
+                    autoplay
+                    loop
+                    useControls={false}
+                    profile="app-event-detail"
+                />
+            </div>
+        {:else if artwork}
+            <div class="artwork-container">
+                <Artwork {artwork} profile="app-event-detail" />
+            </div>
+        {/if}
+
+        {#if isXSmallViewport}
+            <div class="gradient-container">
+                <GradientOverlay
+                    --color={backgroundColor}
+                    --height="70%"
+                    shouldDarken={!hasLightArtwork}
+                />
+            </div>
+        {:else}
+            <div class="tint-container" />
+        {/if}
+
+        <div class="time-container">
+            <AppEventDate {appEvent} />
+        </div>
+
+        <div
+            class="text-container"
+            class:dark={hasLightArtwork && isXSmallViewport}
+        >
+            <div class="event-details-container">
+                <p class="app-event-kind">{appEvent.kind}</p>
+                <h1 class="app-event-title">{appEvent.title}</h1>
+                <p class="app-event-subtitle">
+                    {appEvent.detail}
+                </p>
+                {#if requirements}
+                    <span class="requirements">{requirements}</span>
+                {/if}
+            </div>
+
+            {#if lockup}
+                <div class="lockup-container">
+                    <SmallLockupItem
+                        {shouldShowLaunchNativeButton}
+                        item={lockup}
+                        buttonVariant="transparent"
+                        appIconProfile="app-icon"
+                    >
+                        <svelte:fragment slot="launch-native-button">
+                            {#if urlToLaunchNatively}
+                                <LaunchNativeButton url={urlToLaunchNatively} />
+                            {/if}
+                        </svelte:fragment>
+                    </SmallLockupItem>
+                </div>
+            {/if}
+        </div>
+    </div>
+</ShelfWrapper>
+
+<style lang="scss">
+    @use '@amp/web-shared-styles/sasskit-stylekit/ac-sasskit-config';
+    @use 'ac-sasskit/core/locale' as *;
+
+    .event-detail {
+        --event-image-desktop-width: 31.64%;
+        --border-radius: 16px;
+        --event-gutter: 16px;
+        border-radius: var(--border-radius);
+        display: grid;
+        grid-template-areas:
+            'time'
+            'text';
+        grid-template-rows: 1fr auto;
+        aspect-ratio: 9/16;
+        max-height: 90vh;
+        overflow: hidden;
+        position: relative;
+
+        @media (--range-small-up) {
+            --event-gutter: 20px;
+            aspect-ratio: 16/9;
+            background-image: var(--background-image-url);
+            background-position-x: 50%;
+            background-position-y: 50%;
+            background-size: cover;
+            grid-template-areas:
+                'image time'
+                'image text';
+            grid-template-columns: var(--event-image-desktop-width) auto;
+            grid-template-rows: auto 1fr;
+        }
+    }
+
+    .artwork-container,
+    .video-container {
+        z-index: 1;
+
+        /* On "mobile" the artwork should be behind both the time and text */
+        grid-row-start: time;
+        grid-row-end: text;
+        grid-column: 1;
+
+        @media (--range-small-up) {
+            /* On large screens, it should be to the right of the text */
+            grid-area: image;
+        }
+    }
+
+    .video-container {
+        background: var(--background-color);
+        color: transparent;
+    }
+
+    .video-container :global(video) {
+        width: unset;
+        position: absolute;
+    }
+
+    .tint-container {
+        background: var(--systemTertiary-onLight_IC);
+        backdrop-filter: saturate(120%) blur(24px);
+        z-index: 1;
+
+        /* One smaller screens, extend behind just the text */
+        grid-area: text;
+
+        /* On larger screens, extend behind time and text */
+        grid-row-start: time;
+        grid-row-end: text;
+    }
+
+    .time-container {
+        grid-area: time;
+        margin-top: var(--event-gutter);
+        margin-inline-start: var(--event-gutter);
+    }
+
+    .time-container :global(time) {
+        color: var(--systemPrimary-onLight);
+        font: var(--callout-emphasized);
+        padding: 3px 10px;
+        background-color: var(--systemSecondary-onDark);
+        border-radius: var(--global-border-radius-medium);
+        position: relative;
+        z-index: 3;
+
+        @media (--range-small-up) {
+            position: relative;
+            z-index: 3;
+            mix-blend-mode: plus-lighter;
+        }
+    }
+
+    .text-container {
+        --blend-mode: plus-lighter;
+        --text-color: var(--systemPrimary-onDark);
+        padding: var(--event-gutter);
+
+        /* Placement within parent */
+        grid-area: text;
+
+        /* Layout of child elements */
+        display: flex;
+        flex-direction: column;
+        gap: 16px;
+        justify-content: space-between;
+        color: var(--text-color);
+    }
+
+    .text-container.dark {
+        --blend-mode: normal;
+        --text-color: var(--systemPrimary-onLight);
+    }
+
+    .event-details-container {
+        display: flex;
+        flex-direction: column;
+        gap: 6px;
+    }
+
+    .app-event-kind {
+        font: var(--callout-emphasized);
+        mix-blend-mode: var(--blend-mode);
+        z-index: 1;
+    }
+
+    .app-event-title {
+        font: var(--large-title-emphasized);
+        text-wrap: pretty;
+        z-index: 1;
+    }
+
+    .app-event-subtitle {
+        font: var(--title-3);
+        z-index: 1;
+    }
+
+    .requirements {
+        position: relative;
+        z-index: 1;
+        font: var(--body-emphasized);
+    }
+
+    .lockup-container {
+        --title-color: var(--text-color);
+        --subtitle-color: var(--text-color);
+        --eyebrow-color: var(--text-color);
+        --linkColor: var(--text-color);
+        --button-blend-mode: var(--blend-mode);
+        border-top: 1px solid var(--systemQuaternary-onDark);
+        padding-top: 16px;
+        z-index: 1;
+    }
+</style>
diff --git a/src/components/jet/shelf/AppPromotionShelf.svelte b/src/components/jet/shelf/AppPromotionShelf.svelte
new file mode 100644
index 0000000..48590cb
--- /dev/null
+++ b/src/components/jet/shelf/AppPromotionShelf.svelte
@@ -0,0 +1,47 @@
+<script lang="ts" context="module">
+    import type {
+        AppPromotion,
+        AppEvent,
+        Shelf,
+    } from '@jet-app/app-store/api/models';
+
+    interface AppPromotionShelf extends Shelf {
+        items: AppPromotion[];
+    }
+
+    export function isAppPromotionShelf(
+        shelf: Shelf,
+    ): shelf is AppPromotionShelf {
+        const { contentType, items } = shelf;
+        return contentType === 'appPromotion' && Array.isArray(items);
+    }
+</script>
+
+<script lang="ts">
+    import AppEventItem from '~/components/jet/item/AppEventItem.svelte';
+    import ShelfItemLayout from '~/components/ShelfItemLayout.svelte';
+    import ShelfWrapper from '~/components/Shelf/Wrapper.svelte';
+    import mediaQueries from '~/utils/media-queries';
+
+    export let shelf: AppPromotionShelf;
+
+    $: appEventItems = shelf.items.filter(
+        (item): item is AppEvent => item.promotionType === 'appEvent',
+    );
+    $: isArticleContext = shelf.presentationHints?.isArticleContext;
+    $: gridType =
+        isArticleContext && $mediaQueries !== 'small' ? 'Spotlight' : 'B';
+</script>
+
+<ShelfWrapper {shelf} withTopMargin={isArticleContext}>
+    <ShelfItemLayout
+        shelf={{
+            ...shelf,
+            items: appEventItems,
+        }}
+        {gridType}
+        let:item
+    >
+        <AppEventItem {item} {isArticleContext} />
+    </ShelfItemLayout>
+</ShelfWrapper>
diff --git a/src/components/jet/shelf/AppShowcaseShelf.svelte b/src/components/jet/shelf/AppShowcaseShelf.svelte
new file mode 100644
index 0000000..095acf2
--- /dev/null
+++ b/src/components/jet/shelf/AppShowcaseShelf.svelte
@@ -0,0 +1,29 @@
+<script lang="ts" context="module">
+    import type { AppShowcase, Shelf } from '@jet-app/app-store/api/models';
+
+    interface AppShowcaseShelf extends Shelf {
+        contentType: 'appShowcase';
+        items: [AppShowcase];
+    }
+
+    export function isAppShowcaseShelf(
+        shelf: Shelf,
+    ): shelf is AppShowcaseShelf {
+        return (
+            shelf.contentType === 'appShowcase' && Array.isArray(shelf.items)
+        );
+    }
+</script>
+
+<script lang="ts">
+    import ShelfWrapper from '~/components/Shelf/Wrapper.svelte';
+    import SmallLockup from '~/components/jet/item/SmallLockupItem.svelte';
+
+    export let shelf: AppShowcaseShelf;
+
+    $: item = shelf.items[0];
+</script>
+
+<ShelfWrapper {shelf} withTopMargin centered>
+    <SmallLockup item={item.lockup} />
+</ShelfWrapper>
diff --git a/src/components/jet/shelf/AppTrailerLockupShelf.svelte b/src/components/jet/shelf/AppTrailerLockupShelf.svelte
new file mode 100644
index 0000000..f516074
--- /dev/null
+++ b/src/components/jet/shelf/AppTrailerLockupShelf.svelte
@@ -0,0 +1,48 @@
+<script lang="ts" context="module">
+    import type {
+        TrailersLockup,
+        MixedMediaLockup,
+        Shelf,
+    } from '@jet-app/app-store/api/models';
+
+    type AppTrailerLockupItem = TrailersLockup | MixedMediaLockup;
+
+    interface AppTrailerLockupShelf extends Shelf {
+        contentType: 'appTrailerLockup';
+        items: AppTrailerLockupItem[];
+    }
+
+    export function isAppTrailerLockupShelf(
+        shelf: Shelf,
+    ): shelf is AppTrailerLockupShelf {
+        return (
+            shelf.contentType === 'appTrailerLockup' &&
+            Array.isArray(shelf.items)
+        );
+    }
+
+    function isMixedMediaLockup(
+        item: AppTrailerLockupItem,
+    ): item is MixedMediaLockup {
+        return Array.isArray(item.trailers);
+    }
+</script>
+
+<script lang="ts">
+    import ShelfItemLayout from '~/components/ShelfItemLayout.svelte';
+    import ShelfWrapper from '~/components/Shelf/Wrapper.svelte';
+    import MixedMediaLockupItem from '~/components/jet/item/MixedMediaLockupItem.svelte';
+    import TrailersLockupItem from '~/components/jet/item/TrailersLockupItem.svelte';
+
+    export let shelf: AppTrailerLockupShelf;
+</script>
+
+<ShelfWrapper {shelf}>
+    <ShelfItemLayout {shelf} gridType="B" let:item>
+        {#if isMixedMediaLockup(item)}
+            <MixedMediaLockupItem {item} />
+        {:else}
+            <TrailersLockupItem {item} />
+        {/if}
+    </ShelfItemLayout>
+</ShelfWrapper>
diff --git a/src/components/jet/shelf/ArcadeFooterShelf.svelte b/src/components/jet/shelf/ArcadeFooterShelf.svelte
new file mode 100644
index 0000000..dc46740
--- /dev/null
+++ b/src/components/jet/shelf/ArcadeFooterShelf.svelte
@@ -0,0 +1,32 @@
+<script lang="ts" context="module">
+    import type { Shelf, ArcadeFooter } from '@jet-app/app-store/api/models';
+
+    interface ArcadeFooterShelf extends Shelf {
+        items: [ArcadeFooter];
+    }
+
+    export function isArcadeFooterShelf(
+        shelf: Shelf,
+    ): shelf is ArcadeFooterShelf {
+        const { contentType, items } = shelf;
+
+        return contentType === 'arcadeFooter' && Array.isArray(items);
+    }
+</script>
+
+<script lang="ts">
+    import ArcadeFooterItem from '~/components/jet/item/ArcadeFooterItem.svelte';
+    import HorizontalShelf from '~/components/jet/shelf/HorizontalShelf.svelte';
+    import ShelfWrapper from '~/components/Shelf/Wrapper.svelte';
+
+    export let shelf: ArcadeFooterShelf;
+
+    $: gridRows = shelf.rowsPerColumn ?? undefined;
+    $: items = shelf.items;
+</script>
+
+<ShelfWrapper {shelf} withBottomPadding={false}>
+    <HorizontalShelf {gridRows} gridType="Spotlight" {items} let:item>
+        <ArcadeFooterItem {item} />
+    </HorizontalShelf>
+</ShelfWrapper>
diff --git a/src/components/jet/shelf/BannerShelf.svelte b/src/components/jet/shelf/BannerShelf.svelte
new file mode 100644
index 0000000..84289c9
--- /dev/null
+++ b/src/components/jet/shelf/BannerShelf.svelte
@@ -0,0 +1,35 @@
+<script lang="ts" context="module">
+    import type { Shelf, Banner } from '@jet-app/app-store/api/models';
+
+    interface BannerShelf extends Shelf {
+        contentType: 'banner';
+        items: Banner[];
+    }
+
+    export function isBannerShelf(shelf: Shelf): shelf is BannerShelf {
+        return shelf.contentType === 'banner' && Array.isArray(shelf.items);
+    }
+</script>
+
+<script lang="ts">
+    import BannerItem from '~/components/jet/item/BannerItem.svelte';
+    import ShelfWrapper from '~/components/Shelf/Wrapper.svelte';
+
+    export let shelf: BannerShelf;
+</script>
+
+<ShelfWrapper {shelf}>
+    <div class="banner-items-container">
+        {#each shelf.items as item}
+            <BannerItem {item} />
+        {/each}
+    </div>
+</ShelfWrapper>
+
+<style>
+    .banner-items-container {
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+    }
+</style>
diff --git a/src/components/jet/shelf/BrickShelf.svelte b/src/components/jet/shelf/BrickShelf.svelte
new file mode 100644
index 0000000..4bd55e5
--- /dev/null
+++ b/src/components/jet/shelf/BrickShelf.svelte
@@ -0,0 +1,31 @@
+<script lang="ts" context="module">
+    import type { Brick, Shelf } from '@jet-app/app-store/api/models';
+
+    interface BrickShelf extends Shelf {
+        items: Brick[];
+    }
+
+    export function isBrickShelf(shelf: Shelf): shelf is BrickShelf {
+        const { contentType, items } = shelf;
+        return contentType === 'brick' && Array.isArray(items);
+    }
+</script>
+
+<script lang="ts">
+    import ShelfItemLayout from '~/components/ShelfItemLayout.svelte';
+    import BrickItem from '~/components/jet/item/BrickItem.svelte';
+    import ShelfWrapper from '~/components/Shelf/Wrapper.svelte';
+
+    export let shelf: BrickShelf;
+</script>
+
+<ShelfWrapper {shelf}>
+    <ShelfItemLayout
+        {shelf}
+        gridTypeForShelf="Brick"
+        gridTypeForGrid="F"
+        let:item
+    >
+        <BrickItem {item} />
+    </ShelfItemLayout>
+</ShelfWrapper>
diff --git a/src/components/jet/shelf/CategoryBrickShelf.svelte b/src/components/jet/shelf/CategoryBrickShelf.svelte
new file mode 100644
index 0000000..22ca86b
--- /dev/null
+++ b/src/components/jet/shelf/CategoryBrickShelf.svelte
@@ -0,0 +1,28 @@
+<script lang="ts" context="module">
+    import type { Brick, Shelf } from '@jet-app/app-store/api/models';
+
+    interface CategoryBrickShelf extends Shelf {
+        items: Brick[];
+    }
+
+    export function isCategoryBrickShelf(
+        shelf: Shelf,
+    ): shelf is CategoryBrickShelf {
+        const { contentType, items } = shelf;
+        return contentType === 'categoryBrick' && Array.isArray(items);
+    }
+</script>
+
+<script lang="ts">
+    import ShelfItemLayout from '~/components/ShelfItemLayout.svelte';
+    import BrickItem from '~/components/jet/item/BrickItem.svelte';
+    import ShelfWrapper from '~/components/Shelf/Wrapper.svelte';
+
+    export let shelf: CategoryBrickShelf;
+</script>
+
+<ShelfWrapper {shelf}>
+    <ShelfItemLayout {shelf} gridType="C" let:item>
+        <BrickItem {item} shouldOverlayDescription />
+    </ShelfItemLayout>
+</ShelfWrapper>
diff --git a/src/components/jet/shelf/EditorialCardShelf.svelte b/src/components/jet/shelf/EditorialCardShelf.svelte
new file mode 100644
index 0000000..efbd71d
--- /dev/null
+++ b/src/components/jet/shelf/EditorialCardShelf.svelte
@@ -0,0 +1,32 @@
+<script lang="ts" context="module">
+    import type { Shelf, EditorialCard } from '@jet-app/app-store/api/models';
+
+    interface EditorialCardShelf extends Shelf {
+        items: EditorialCard[];
+    }
+
+    export function isEditorialCardShelf(
+        shelf: Shelf,
+    ): shelf is EditorialCardShelf {
+        const { contentType, items } = shelf;
+
+        return contentType === 'editorialCard' && Array.isArray(items);
+    }
+</script>
+
+<script lang="ts">
+    import HeroCarousel from '~/components/hero/Carousel.svelte';
+    import EditorialCardItem from '~/components/jet/item/EditorialCardItem.svelte';
+
+    export let shelf: EditorialCardShelf;
+
+    $: items = shelf.items;
+
+    function deriveBackgroundArtworkFromItem(item: EditorialCard) {
+        return item.artwork;
+    }
+</script>
+
+<HeroCarousel {shelf} {items} {deriveBackgroundArtworkFromItem} let:item>
+    <EditorialCardItem {item} />
+</HeroCarousel>
diff --git a/src/components/jet/shelf/EditorialLinkShelf.svelte b/src/components/jet/shelf/EditorialLinkShelf.svelte
new file mode 100644
index 0000000..0946462
--- /dev/null
+++ b/src/components/jet/shelf/EditorialLinkShelf.svelte
@@ -0,0 +1,122 @@
+<script lang="ts" context="module">
+    import type { Shelf, EditorialLink } from '@jet-app/app-store/api/models';
+
+    interface EditorialLinkShelf extends Shelf {
+        contentType: 'smallStoryCard';
+        items: [EditorialLink];
+    }
+
+    export function isEditorialLinkShelf(
+        shelf: Shelf,
+    ): shelf is EditorialLinkShelf {
+        const { contentType, items } = shelf;
+        return contentType === 'editorialLink' && Array.isArray(items);
+    }
+</script>
+
+<script lang="ts">
+    import ShelfWrapper from '~/components/Shelf/Wrapper.svelte';
+    import ChevronRightIcon from '~/sf-symbols/chevron.right.svg';
+    import LinkWrapper from '~/components/LinkWrapper.svelte';
+
+    export let shelf: EditorialLinkShelf;
+    $: item = shelf.items[0];
+    $: ({ clickAction, descriptionText, summaryText } = item);
+</script>
+
+<ShelfWrapper {shelf} withBottomPadding={false}>
+    <article>
+        <LinkWrapper
+            action={clickAction}
+            includeExternalLinkArrowIcon={false}
+            label={descriptionText}
+        >
+            <svelte:fragment>
+                <div>
+                    <span class="title">{descriptionText}</span>
+                    <span class="subtitle">{summaryText}</span>
+                </div>
+
+                <span class="icon-container" aria-hidden="true">
+                    <ChevronRightIcon />
+                </span>
+            </svelte:fragment>
+        </LinkWrapper>
+    </article>
+</ShelfWrapper>
+
+<style lang="scss">
+    @use '@amp/web-shared-styles/sasskit-stylekit/ac-sasskit-config';
+    @use 'ac-sasskit/core/helpers' as *;
+    @use 'ac-sasskit/core/locale' as *;
+
+    article {
+        display: flex;
+        align-items: center;
+        flex-direction: row;
+        justify-content: space-between;
+        padding: 16px;
+        margin: 0 var(--bodyGutter);
+        border-radius: var(--global-border-radius-medium);
+        background-color: var(--systemQuinary);
+        transition: background-color 210ms ease-out;
+    }
+
+    article:hover {
+        cursor: pointer;
+        // a fallback for browsers that don't support relative colors (e.g. the `from` syntax)
+        background-color: var(--systemQuinary);
+        // stylelint-disable-next-line color-function-notation
+        background-color: rgb(
+            from var(--systemQuinary) r g b / calc(alpha + 0.02)
+        );
+    }
+
+    article:hover .icon-container {
+        transform: translateX(2px);
+
+        @include rtl {
+            transform: translateX(-2px) rotate(-180deg);
+        }
+    }
+
+    div {
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+    }
+
+    .title {
+        font: var(--body-emphasized);
+    }
+
+    .subtitle {
+        color: var(--systemSecondary);
+    }
+
+    .icon-container {
+        position: relative;
+        height: 10px;
+        aspect-ratio: 0.9;
+        transition: transform 210ms ease-out;
+
+        @include rtl {
+            transform: rotate(-180deg);
+        }
+    }
+
+    .icon-container :global(path:not([fill='none'])) {
+        fill: var(--systemPrimary);
+    }
+
+    article :global(a) {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        width: 100%;
+
+        &:hover {
+            text-decoration: none;
+        }
+    }
+</style>
diff --git a/src/components/jet/shelf/FallbackShelf.svelte b/src/components/jet/shelf/FallbackShelf.svelte
new file mode 100644
index 0000000..c7e4200
--- /dev/null
+++ b/src/components/jet/shelf/FallbackShelf.svelte
@@ -0,0 +1,39 @@
+<script lang="ts" context="module">
+    import type { Shelf, ShelfModel } from '@jet-app/app-store/api/models';
+
+    interface FallbackShelf extends Shelf {
+        items: ShelfModel[];
+    }
+
+    export function isFallbackShelf(shelf: Shelf): shelf is FallbackShelf {
+        return Array.isArray(shelf.items);
+    }
+</script>
+
+<script lang="ts">
+    import ShelfItemLayout from '~/components/ShelfItemLayout.svelte';
+    import ShelfWrapper from '~/components/Shelf/Wrapper.svelte';
+
+    export let shelf: FallbackShelf;
+
+    const isPlaceholder = shelf.contentType === 'placeholder';
+</script>
+
+<ShelfWrapper withTopBorder>
+    <ShelfItemLayout {shelf} gridType="C">
+        <div class="wip">
+            {isPlaceholder
+                ? `🔄 Placeholder for ${shelf.placeholderContentType}`
+                : `🚧 ${shelf.contentType}`}
+        </div>
+    </ShelfItemLayout>
+</ShelfWrapper>
+
+<style>
+    .wip {
+        background: #f8f8f8;
+        padding: 16px;
+        border-radius: 8px;
+        border: 1px solid #ccc;
+    }
+</style>
diff --git a/src/components/jet/shelf/FramedArtworkShelf.svelte b/src/components/jet/shelf/FramedArtworkShelf.svelte
new file mode 100644
index 0000000..16f7c48
--- /dev/null
+++ b/src/components/jet/shelf/FramedArtworkShelf.svelte
@@ -0,0 +1,98 @@
+<script lang="ts" context="module">
+    import type { FramedArtwork, Shelf } from '@jet-app/app-store/api/models';
+
+    interface FramedArtworkShelf extends Shelf {
+        contentType: 'framedArtwork';
+        items: [FramedArtwork];
+    }
+
+    export function isFramedArtworkShelf(
+        shelf: Shelf,
+    ): shelf is FramedArtworkShelf {
+        return (
+            shelf.contentType === 'framedArtwork' && Array.isArray(shelf.items)
+        );
+    }
+</script>
+
+<script lang="ts">
+    import { sanitizeHtml } from '@amp/web-app-components/src/utils/sanitize-html';
+    import Artwork, { getNaturalProfile } from '~/components/Artwork.svelte';
+    import ShelfWrapper from '~/components/Shelf/Wrapper.svelte';
+
+    export let shelf: FramedArtworkShelf;
+
+    $: item = shelf.items[0];
+    $: ({ artwork, caption, hasRoundedCorners } = item);
+    $: profile = getNaturalProfile(artwork, [1275, 1185, 825, 500, 690]);
+    $: aspectRatio = artwork.width / artwork.height;
+    $: isPortrait = aspectRatio < 1;
+</script>
+
+<ShelfWrapper {shelf} withBottomPadding={false}>
+    <figure
+        class="framed-artwork-item"
+        class:has-rounded-corners={hasRoundedCorners}
+        class:is-portrait={isPortrait}
+    >
+        <div
+            class="artwork-container"
+            style:--aspect-ratio={artwork.width / artwork.height}
+        >
+            <Artwork {artwork} {profile} forceFullWidth={!isPortrait} />
+        </div>
+
+        {#if caption}
+            <figcaption class="caption">
+                {@html sanitizeHtml(caption)}
+            </figcaption>
+        {/if}
+    </figure>
+</ShelfWrapper>
+
+<style lang="scss">
+    @use '@amp/web-shared-styles/app/core/globalvars' as *;
+
+    .framed-artwork-item {
+        border-radius: var(--framed-artwork-border-radius);
+        padding: 0 20px;
+        overflow: hidden;
+
+        @media (--sidebar-visible) {
+            padding: 0 20px;
+        }
+
+        @media (--range-small-only) {
+            padding: 0 var(--bodyGutter);
+        }
+    }
+
+    .framed-artwork-item.has-rounded-corners {
+        --framed-artwork-border-radius: var(--global-border-radius-medium);
+    }
+
+    .artwork-container {
+        border-radius: inherit;
+    }
+
+    .caption {
+        border-bottom-left-radius: var(--framed-artwork-border-radius);
+        border-bottom-right-radius: var(--framed-artwork-border-radius);
+        color: var(--systemSecondary);
+        padding: 8px var(--article-page-padding) 0;
+    }
+
+    .framed-artwork-item.is-portrait {
+        --artwork-override-max-height: 560px;
+        --artwork-override-max-width: 100%;
+        --artwork-override-width: auto;
+    }
+
+    .framed-artwork-item.framed-artwork-item.is-portrait .artwork-container {
+        display: flex;
+        justify-content: center;
+        width: 100%;
+        max-height: var(--artwork-override-max-height);
+        aspect-ratio: var(--aspect-ratio);
+    }
+</style>
diff --git a/src/components/jet/shelf/FramedVideoShelf.svelte b/src/components/jet/shelf/FramedVideoShelf.svelte
new file mode 100644
index 0000000..a685d39
--- /dev/null
+++ b/src/components/jet/shelf/FramedVideoShelf.svelte
@@ -0,0 +1,78 @@
+<script lang="ts" context="module">
+    import type { FramedVideo, Shelf } from '@jet-app/app-store/api/models';
+
+    interface FramedVideoShelf extends Shelf {
+        contentType: 'framedArtwork';
+        items: [FramedVideo];
+    }
+
+    export function isFramedVideoShelf(
+        shelf: Shelf,
+    ): shelf is FramedVideoShelf {
+        return (
+            shelf.contentType === 'framedVideo' && Array.isArray(shelf.items)
+        );
+    }
+</script>
+
+<script lang="ts">
+    import { sanitizeHtml } from '@amp/web-app-components/src/utils/sanitize-html';
+    import ShelfWrapper from '~/components/Shelf/Wrapper.svelte';
+    import { getNaturalProfile } from '~/components/Artwork.svelte';
+    import Video from '~/components/jet/Video.svelte';
+
+    export let shelf: FramedVideoShelf;
+
+    $: ({ caption, video } = shelf.items[0]);
+    $: aspectRatio = video.preview.width / video.preview.height;
+    $: profile = getNaturalProfile(video.preview, [608, 528, 608, 928, 298]);
+    $: isPortrait = aspectRatio < 1;
+</script>
+
+<ShelfWrapper {shelf} withBottomPadding={false}>
+    <figure class="framed-artwork-item" class:is-portrait={isPortrait}>
+        <div class="artwork-container" style:--aspect-ratio={aspectRatio}>
+            <Video {video} {profile} autoplay />
+        </div>
+
+        {#if caption}
+            <figcaption class="caption">
+                {@html sanitizeHtml(caption)}
+            </figcaption>
+        {/if}
+    </figure>
+</ShelfWrapper>
+
+<style>
+    .framed-artwork-item {
+        border-radius: var(--global-border-radius-medium);
+        padding: 0 20px;
+        overflow: hidden;
+
+        @media (--sidebar-visible) {
+            padding: 0 20px;
+        }
+
+        @media (--range-small-only) {
+            padding: 0 var(--bodyGutter);
+        }
+    }
+
+    .artwork-container {
+        aspect-ratio: var(--aspect-ratio);
+        overflow: hidden;
+        line-height: 0;
+        border-radius: var(--global-border-radius-medium);
+        background-color: var(--systemQuaternary);
+        max-height: 560px;
+        max-width: 100%;
+        margin: 0 auto;
+    }
+
+    .caption {
+        border-bottom-left-radius: var(--global-border-radius-medium);
+        border-bottom-right-radius: var(--global-border-radius-medium);
+        color: var(--systemSecondary);
+        padding: 8px var(--article-page-padding) 0;
+    }
+</style>
diff --git a/src/components/jet/shelf/HeroCarouselShelf.svelte b/src/components/jet/shelf/HeroCarouselShelf.svelte
new file mode 100644
index 0000000..31a0287
--- /dev/null
+++ b/src/components/jet/shelf/HeroCarouselShelf.svelte
@@ -0,0 +1,38 @@
+<script lang="ts" context="module">
+    import type {
+        Shelf,
+        HeroCarousel as HeroCarouselModel,
+        HeroCarouselItem as HeroCarouselItemModel,
+    } from '@jet-app/app-store/api/models';
+
+    interface HeroCarouselShelf extends Shelf {
+        items: [HeroCarouselModel];
+    }
+
+    export function isHeroCarouselShelf(
+        shelf: Shelf,
+    ): shelf is HeroCarouselShelf {
+        const { contentType, items } = shelf;
+
+        return contentType === 'heroCarousel' && Array.isArray(items);
+    }
+</script>
+
+<script lang="ts">
+    import HeroCarousel from '~/components/hero/Carousel.svelte';
+    import HeroCarouselItem from '~/components/jet/item/HeroCarouselItem.svelte';
+    import { isRtl } from '~/utils/locale';
+
+    export let shelf: HeroCarouselShelf;
+
+    $: ({ items: ltrItems, rtlItems } = shelf.items[0]);
+    $: items = isRtl() && rtlItems.length ? rtlItems : ltrItems;
+
+    function deriveBackgroundArtworkFromItem(item: HeroCarouselItemModel) {
+        return item.artwork || item.video?.preview;
+    }
+</script>
+
+<HeroCarousel {shelf} {items} {deriveBackgroundArtworkFromItem} let:item>
+    <HeroCarouselItem {item} />
+</HeroCarousel>
diff --git a/src/components/jet/shelf/HorizontalRuleShelf.svelte b/src/components/jet/shelf/HorizontalRuleShelf.svelte
new file mode 100644
index 0000000..3313ff2
--- /dev/null
+++ b/src/components/jet/shelf/HorizontalRuleShelf.svelte
@@ -0,0 +1,54 @@
+<script lang="ts" context="module">
+    import type {
+        HorizontalRule,
+        HorizontalRuleStyle,
+        Shelf,
+    } from '@jet-app/app-store/api/models';
+
+    export interface HorizontalRuleShelf extends Shelf {
+        contentType: 'horizontalRule';
+        items: [HorizontalRule];
+    }
+
+    export function isHorizontalRuleShelf(
+        shelf: Shelf,
+    ): shelf is HorizontalRuleShelf {
+        return (
+            shelf.contentType === 'horizontalRule' && Array.isArray(shelf.items)
+        );
+    }
+
+    function horizontalRuleStyleToBorderStyle(
+        style: HorizontalRuleStyle,
+    ): string {
+        return style.toLowerCase();
+    }
+</script>
+
+<script lang="ts">
+    import ShelfWrapper from '~/components/Shelf/Wrapper.svelte';
+    import { colorAsString } from '~/utils/color';
+
+    export let shelf: HorizontalRuleShelf;
+
+    $: item = shelf.items[0];
+    $: borderStyle = horizontalRuleStyleToBorderStyle(item.style);
+</script>
+
+<ShelfWrapper {shelf} withBottomPadding={false}>
+    <hr
+        style:color={colorAsString(item.color)}
+        style:border-style={borderStyle}
+    />
+</ShelfWrapper>
+
+<style>
+    hr {
+        display: block;
+        height: 1px;
+        border-width: 1px 0 0;
+        border-color: currentColor;
+        margin: 1em var(--bodyGutter);
+        padding: 0;
+    }
+</style>
diff --git a/src/components/jet/shelf/HorizontalShelf.svelte b/src/components/jet/shelf/HorizontalShelf.svelte
new file mode 100644
index 0000000..1addb31
--- /dev/null
+++ b/src/components/jet/shelf/HorizontalShelf.svelte
@@ -0,0 +1,53 @@
+<script lang="ts">
+    import type { Opt } from '@jet/environment';
+    import Shelf from '@amp/web-app-components/src/components/Shelf/Shelf.svelte';
+    import type {
+        ArrowOffset,
+        GridType,
+    } from '@amp/web-app-components/src/components/Shelf/types';
+    import { getI18n } from '~/stores/i18n';
+
+    type T = $$Generic;
+
+    export let items: T[];
+    export let gridType: GridType;
+    export let gridRows: number = 1;
+    export let arrowOffset: Opt<ArrowOffset> = null;
+
+    const i18n = getI18n();
+    // This makes the let:item of type T, because it doesn't know type when it comes back from the Shelf component.
+    function castGenericItem(x: T): T {
+        return x;
+    }
+</script>
+
+<div class="horizontal-shelf" data-test-id="horizontal-shelf">
+    <Shelf translateFn={$i18n.t} {items} {gridType} {gridRows} {arrowOffset}>
+        <svelte:fragment slot="item" let:item let:index let:numberOfItems>
+            <slot item={castGenericItem(item)} {index} {numberOfItems} />
+        </svelte:fragment>
+    </Shelf>
+</div>
+
+<style>
+    .horizontal-shelf :global(.shelf-grid) {
+        --shelfGridPaddingInline: var(--bodyGutter);
+        --shelfGridGutterWidth: var(--bodyGutter);
+    }
+
+    .horizontal-shelf :global(.shelf-grid__list) {
+        @media (--range-xsmall-only) {
+            scroll-padding-inline-start: var(
+                --shelfScrollPaddingInline,
+                var(--bodyGutter)
+            );
+        }
+    }
+
+    .horizontal-shelf
+        :global(.shelf-grid__list--grid-type-Spotlight .shelf-grid__list-item) {
+        @media (--range-xsmall-only) {
+            --standard-lockup-shadow-offset: var(--shelfScrollPaddingInline, 0);
+        }
+    }
+</style>
diff --git a/src/components/jet/shelf/InAppPurchaseLockupShelf.svelte b/src/components/jet/shelf/InAppPurchaseLockupShelf.svelte
new file mode 100644
index 0000000..bf2e75e
--- /dev/null
+++ b/src/components/jet/shelf/InAppPurchaseLockupShelf.svelte
@@ -0,0 +1,31 @@
+<script lang="ts" context="module">
+    import type {
+        InAppPurchaseLockup,
+        Shelf,
+    } from '@jet-app/app-store/api/models';
+
+    interface InAppPurchaseLockupShelf extends Shelf {
+        items: InAppPurchaseLockup[];
+    }
+
+    export function isInAppPurchaseLockupShelf(
+        shelf: Shelf,
+    ): shelf is InAppPurchaseLockupShelf {
+        const { contentType, items } = shelf;
+        return contentType === 'inAppPurchaseLockup' && Array.isArray(items);
+    }
+</script>
+
+<script lang="ts">
+    import ShelfItemLayout from '~/components/ShelfItemLayout.svelte';
+    import InAppPurchaseLockupComponent from '~/components/jet/item/InAppPurchaseLockup.svelte';
+    import ShelfWrapper from '~/components/Shelf/Wrapper.svelte';
+
+    export let shelf: InAppPurchaseLockupShelf;
+</script>
+
+<ShelfWrapper {shelf}>
+    <ShelfItemLayout {shelf} gridType="InAppPurchaseLockup" let:item>
+        <InAppPurchaseLockupComponent {item} />
+    </ShelfItemLayout>
+</ShelfWrapper>
diff --git a/src/components/jet/shelf/LargeBrickShelf.svelte b/src/components/jet/shelf/LargeBrickShelf.svelte
new file mode 100644
index 0000000..eea1044
--- /dev/null
+++ b/src/components/jet/shelf/LargeBrickShelf.svelte
@@ -0,0 +1,26 @@
+<script lang="ts" context="module">
+    import type { Brick, Shelf } from '@jet-app/app-store/api/models';
+
+    interface LargeBrickShelf extends Shelf {
+        items: Brick[];
+    }
+
+    export function isLargeBrickShelf(shelf: Shelf): shelf is LargeBrickShelf {
+        const { contentType, items } = shelf;
+        return contentType === 'largeBrick' && Array.isArray(items);
+    }
+</script>
+
+<script lang="ts">
+    import ShelfItemLayout from '~/components/ShelfItemLayout.svelte';
+    import LargeBrickItem from '~/components/jet/item/LargeBrickItem.svelte';
+    import ShelfWrapper from '~/components/Shelf/Wrapper.svelte';
+
+    export let shelf: LargeBrickShelf;
+</script>
+
+<ShelfWrapper {shelf}>
+    <ShelfItemLayout {shelf} gridType="LargeBrick" let:item>
+        <LargeBrickItem {item} />
+    </ShelfItemLayout>
+</ShelfWrapper>
diff --git a/src/components/jet/shelf/LargeHeroBreakoutShelf.svelte b/src/components/jet/shelf/LargeHeroBreakoutShelf.svelte
new file mode 100644
index 0000000..a0dfe9c
--- /dev/null
+++ b/src/components/jet/shelf/LargeHeroBreakoutShelf.svelte
@@ -0,0 +1,31 @@
+<script lang="ts" context="module">
+    import type {
+        LargeHeroBreakout,
+        Shelf,
+    } from '@jet-app/app-store/api/models';
+
+    interface LargeHeroBreakoutShelf extends Shelf {
+        items: LargeHeroBreakout[];
+    }
+
+    export function isLargeHeroBreakoutShelf(
+        shelf: Shelf,
+    ): shelf is LargeHeroBreakoutShelf {
+        const { contentType, items } = shelf;
+        return contentType === 'largeHeroBreakout' && Array.isArray(items);
+    }
+</script>
+
+<script lang="ts">
+    import ShelfItemLayout from '~/components/ShelfItemLayout.svelte';
+    import LargeHeroBreakoutItem from '~/components/jet/item/LargeHeroBreakoutItem.svelte';
+    import ShelfWrapper from '~/components/Shelf/Wrapper.svelte';
+
+    export let shelf: LargeHeroBreakoutShelf;
+</script>
+
+<ShelfWrapper {shelf}>
+    <ShelfItemLayout {shelf} gridType="Spotlight" let:item>
+        <LargeHeroBreakoutItem {item} />
+    </ShelfItemLayout>
+</ShelfWrapper>
diff --git a/src/components/jet/shelf/LargeImageLockupShelf.svelte b/src/components/jet/shelf/LargeImageLockupShelf.svelte
new file mode 100644
index 0000000..fd192fb
--- /dev/null
+++ b/src/components/jet/shelf/LargeImageLockupShelf.svelte
@@ -0,0 +1,30 @@
+<script lang="ts" context="module">
+    import type { Shelf, ImageLockup } from '@jet-app/app-store/api/models';
+
+    interface LargeImageLockupShelf extends Shelf {
+        items: ImageLockup[];
+    }
+
+    export function isLargeImageLockupShelf(
+        shelf: Shelf,
+    ): shelf is LargeImageLockupShelf {
+        return (
+            shelf.contentType === 'largeImageLockup' &&
+            Array.isArray(shelf.items)
+        );
+    }
+</script>
+
+<script lang="ts">
+    import LargeImageLockupItem from '~/components/jet/item/LargeImageLockupItem.svelte';
+    import ShelfItemLayout from '~/components/ShelfItemLayout.svelte';
+    import ShelfWrapper from '~/components/Shelf/Wrapper.svelte';
+
+    export let shelf: LargeImageLockupShelf;
+</script>
+
+<ShelfWrapper {shelf}>
+    <ShelfItemLayout {shelf} gridType="A" let:item>
+        <LargeImageLockupItem {item} />
+    </ShelfItemLayout>
+</ShelfWrapper>
diff --git a/src/components/jet/shelf/LargeLockupShelf.svelte b/src/components/jet/shelf/LargeLockupShelf.svelte
new file mode 100644
index 0000000..dedd1fe
--- /dev/null
+++ b/src/components/jet/shelf/LargeLockupShelf.svelte
@@ -0,0 +1,28 @@
+<script lang="ts" context="module">
+    import type { Lockup, Shelf } from '@jet-app/app-store/api/models';
+
+    interface LargeLockupShelf extends Shelf {
+        items: Lockup[];
+    }
+
+    export function isLargeLockupShelf(
+        shelf: Shelf,
+    ): shelf is LargeLockupShelf {
+        const { contentType, items } = shelf;
+        return contentType === 'largeLockup' && Array.isArray(items);
+    }
+</script>
+
+<script lang="ts">
+    import ShelfItemLayout from '~/components/ShelfItemLayout.svelte';
+    import LargeLockupItem from '~/components/jet/item/LargeLockupItem.svelte';
+    import ShelfWrapper from '~/components/Shelf/Wrapper.svelte';
+
+    export let shelf: LargeLockupShelf;
+</script>
+
+<ShelfWrapper {shelf}>
+    <ShelfItemLayout {shelf} gridType="LargeLockup" let:item>
+        <LargeLockupItem {item} />
+    </ShelfItemLayout>
+</ShelfWrapper>
diff --git a/src/components/jet/shelf/LargeStoryCardShelf.svelte b/src/components/jet/shelf/LargeStoryCardShelf.svelte
new file mode 100644
index 0000000..c1a1e57
--- /dev/null
+++ b/src/components/jet/shelf/LargeStoryCardShelf.svelte
@@ -0,0 +1,32 @@
+<script lang="ts" context="module">
+    import type { Shelf, TodayCard } from '@jet-app/app-store/api/models';
+
+    interface LargeStoryCardShelf extends Shelf {
+        items: TodayCard[];
+    }
+
+    export function isLargeStoryCardShelf(
+        shelf: Shelf,
+    ): shelf is LargeStoryCardShelf {
+        return (
+            shelf.contentType === 'largeStoryCard' && Array.isArray(shelf.items)
+        );
+    }
+</script>
+
+<script lang="ts">
+    import HeroCarousel from '~/components/hero/Carousel.svelte';
+    import LargeStoryCardItem from '~/components/jet/item/LargeStoryCardItem.svelte';
+
+    export let shelf: LargeStoryCardShelf;
+
+    $: items = shelf.items;
+
+    function deriveBackgroundArtworkFromItem(item: TodayCard) {
+        return item.heroMedia?.artworks[0];
+    }
+</script>
+
+<HeroCarousel {shelf} {items} {deriveBackgroundArtworkFromItem} let:item>
+    <LargeStoryCardItem {item} />
+</HeroCarousel>
diff --git a/src/components/jet/shelf/LinkableTextShelf.svelte b/src/components/jet/shelf/LinkableTextShelf.svelte
new file mode 100644
index 0000000..dcfde36
--- /dev/null
+++ b/src/components/jet/shelf/LinkableTextShelf.svelte
@@ -0,0 +1,43 @@
+<script lang="ts" context="module">
+    import type { Shelf, LinkableText } from '@jet-app/app-store/api/models';
+
+    interface LinkableTextShelf extends Shelf {
+        contentType: 'linkableText';
+        items: [LinkableText];
+    }
+
+    export function isLinkableTextShelf(
+        shelf: Shelf,
+    ): shelf is LinkableTextShelf {
+        return (
+            shelf.contentType === 'linkableText' && Array.isArray(shelf.items)
+        );
+    }
+</script>
+
+<script lang="ts">
+    import ShelfWrapper from '~/components/Shelf/Wrapper.svelte';
+
+    import LinkableTextItem from '~/components/jet/item/LinkableTextItem.svelte';
+
+    export let shelf: LinkableTextShelf;
+</script>
+
+<ShelfWrapper centered withPaddingTop={true}>
+    <div class="banner">
+        <LinkableTextItem item={shelf.items[0]} />
+    </div>
+</ShelfWrapper>
+
+<style>
+    .banner {
+        background: rgba(var(--keyColor-rgb), 0.07);
+        padding: 8px 16px;
+        text-align: center;
+        border-radius: var(--global-border-radius-small);
+    }
+
+    .banner :global(a) {
+        color: var(--keyColor);
+    }
+</style>
diff --git a/src/components/jet/shelf/MarkerShelf.svelte b/src/components/jet/shelf/MarkerShelf.svelte
new file mode 100644
index 0000000..c719235
--- /dev/null
+++ b/src/components/jet/shelf/MarkerShelf.svelte
@@ -0,0 +1,36 @@
+<script lang="ts" context="module">
+    import type { ShelfBasedProductPage } from '@jet-app/app-store/api/models';
+    import type {
+        Lockup,
+        Shelf,
+        ShelfMarker,
+    } from '@jet-app/app-store/api/models';
+
+    export interface MarkerShelf extends Shelf {
+        contentType: 'marker';
+        marker: ShelfMarker;
+        items: Lockup[];
+    }
+
+    export function isMarkerShelf(shelf: Shelf): shelf is MarkerShelf {
+        const { contentType, marker, items } = shelf;
+
+        return (
+            contentType === 'marker' &&
+            typeof marker === 'string' &&
+            Array.isArray(items)
+        );
+    }
+</script>
+
+<script lang="ts">
+    import ProductTopLockup from '~/components/jet/marker-shelf/ProductTopLockup.svelte';
+
+    export let shelf: MarkerShelf;
+
+    export let page: ShelfBasedProductPage;
+</script>
+
+{#if shelf.marker === 'productTopLockup'}
+    <ProductTopLockup {page} />
+{/if}
diff --git a/src/components/jet/shelf/MediumImageLockupShelf.svelte b/src/components/jet/shelf/MediumImageLockupShelf.svelte
new file mode 100644
index 0000000..f7b1316
--- /dev/null
+++ b/src/components/jet/shelf/MediumImageLockupShelf.svelte
@@ -0,0 +1,28 @@
+<script lang="ts" context="module">
+    import type { ImageLockup, Shelf } from '@jet-app/app-store/api/models';
+
+    interface MediumImageLockupShelf extends Shelf {
+        items: ImageLockup[];
+    }
+
+    export function isMediumImageLockupShelf(
+        shelf: Shelf,
+    ): shelf is MediumImageLockupShelf {
+        const { contentType, items } = shelf;
+        return contentType === 'mediumImageLockup' && Array.isArray(items);
+    }
+</script>
+
+<script lang="ts">
+    import ShelfItemLayout from '~/components/ShelfItemLayout.svelte';
+    import MediumImageLockupItem from '~/components/jet/item/MediumImageLockupItem.svelte';
+    import ShelfWrapper from '~/components/Shelf/Wrapper.svelte';
+
+    export let shelf: MediumImageLockupShelf;
+</script>
+
+<ShelfWrapper {shelf}>
+    <ShelfItemLayout {shelf} gridType="B" let:item>
+        <MediumImageLockupItem {item} />
+    </ShelfItemLayout>
+</ShelfWrapper>
diff --git a/src/components/jet/shelf/MediumLockupShelf.svelte b/src/components/jet/shelf/MediumLockupShelf.svelte
new file mode 100644
index 0000000..186acb2
--- /dev/null
+++ b/src/components/jet/shelf/MediumLockupShelf.svelte
@@ -0,0 +1,31 @@
+<script lang="ts" context="module">
+    import type { Lockup, Shelf } from '@jet-app/app-store/api/models';
+
+    interface MediumLockupShelf extends Shelf {
+        items: Lockup[];
+    }
+
+    export function isMediumLockupShelf(
+        shelf: Shelf,
+    ): shelf is MediumLockupShelf {
+        const { contentType, items } = shelf;
+        return contentType === 'mediumLockup' && Array.isArray(items);
+    }
+</script>
+
+<script lang="ts">
+    import MediumLockupItem from '~/components/jet/item/MediumLockupItem.svelte';
+    import ShelfItemLayout from '~/components/ShelfItemLayout.svelte';
+    import ShelfWrapper from '~/components/Shelf/Wrapper.svelte';
+
+    export let shelf: MediumLockupShelf;
+
+    $: isArticleContext = shelf.presentationHints?.isArticleContext;
+    $: gridType = isArticleContext ? 'Spotlight' : 'MediumLockup';
+</script>
+
+<ShelfWrapper {shelf}>
+    <ShelfItemLayout {shelf} {gridType} rowsPerColumnOverride={2} let:item>
+        <MediumLockupItem {item} />
+    </ShelfItemLayout>
+</ShelfWrapper>
diff --git a/src/components/jet/shelf/MediumStoryCardShelf.svelte b/src/components/jet/shelf/MediumStoryCardShelf.svelte
new file mode 100644
index 0000000..35c3ec3
--- /dev/null
+++ b/src/components/jet/shelf/MediumStoryCardShelf.svelte
@@ -0,0 +1,31 @@
+<script lang="ts" context="module">
+    import type { Shelf } from '@jet-app/app-store/api/models';
+
+    import MediumStoryCardItem, {
+        type Item as MediumStoryCardItemModel,
+    } from '~/components/jet/item/MediumStoryCardItem.svelte';
+
+    interface MediumStoryCardShelf extends Shelf {
+        items: MediumStoryCardItemModel[];
+    }
+
+    export function isMediumStoryCardShelf(
+        shelf: Shelf,
+    ): shelf is MediumStoryCardShelf {
+        const { contentType, items } = shelf;
+        return contentType === 'mediumStoryCard' && Array.isArray(items);
+    }
+</script>
+
+<script lang="ts">
+    import ShelfItemLayout from '~/components/ShelfItemLayout.svelte';
+    import ShelfWrapper from '~/components/Shelf/Wrapper.svelte';
+
+    export let shelf: MediumStoryCardShelf;
+</script>
+
+<ShelfWrapper {shelf}>
+    <ShelfItemLayout {shelf} gridType="B" let:item>
+        <MediumStoryCardItem {item} />
+    </ShelfItemLayout>
+</ShelfWrapper>
diff --git a/src/components/jet/shelf/PageHeaderShelf.svelte b/src/components/jet/shelf/PageHeaderShelf.svelte
new file mode 100644
index 0000000..59c99b2
--- /dev/null
+++ b/src/components/jet/shelf/PageHeaderShelf.svelte
@@ -0,0 +1,34 @@
+<script lang="ts" context="module">
+    import type { PageHeader, Shelf } from '@jet-app/app-store/api/models';
+
+    interface PageHeaderShelf extends Shelf {
+        items: [PageHeader];
+    }
+
+    export function isPageHeaderShelf(shelf: Shelf): shelf is PageHeaderShelf {
+        const { contentType, items } = shelf;
+        return contentType === 'pageHeader' && Array.isArray(items);
+    }
+</script>
+
+<script lang="ts">
+    import ShelfWrapper from '~/components/Shelf/Wrapper.svelte';
+    import ShelfTitle from '~/components/Shelf/Title.svelte';
+
+    export let shelf: PageHeaderShelf;
+
+    $: [item] = shelf.items;
+</script>
+
+<ShelfWrapper {shelf} withBottomPadding={false}>
+    <div class="shelf-title-wrapper" slot="title">
+        <ShelfTitle title={item.title} subtitle={item.subtitle} />
+    </div>
+</ShelfWrapper>
+
+<style>
+    .shelf-title-wrapper {
+        --shelf-title-font: var(--title-1-emphasized);
+        display: contents;
+    }
+</style>
diff --git a/src/components/jet/shelf/ParagraphShelf.svelte b/src/components/jet/shelf/ParagraphShelf.svelte
new file mode 100644
index 0000000..777338e
--- /dev/null
+++ b/src/components/jet/shelf/ParagraphShelf.svelte
@@ -0,0 +1,52 @@
+<script lang="ts" context="module">
+    import type { Paragraph, Shelf } from '@jet-app/app-store/api/models';
+
+    interface ParagraphShelf extends Shelf {
+        contentType: 'paragraph';
+        items: Paragraph[];
+    }
+
+    export function isParagraphShelf(shelf: Shelf): shelf is ParagraphShelf {
+        return shelf.contentType === 'paragraph' && Array.isArray(shelf.items);
+    }
+</script>
+
+<script lang="ts">
+    import ShelfWrapper from '~/components/Shelf/Wrapper.svelte';
+    import ParagraphShelfItem from '~/components/jet/item/ParagraphShelfItem.svelte';
+
+    export let shelf: ParagraphShelf;
+</script>
+
+<ShelfWrapper {shelf} withBottomPadding={false}>
+    <div slot="title" class="title-container">
+        {#if shelf.title}
+            <h2>{shelf.title}</h2>
+        {/if}
+    </div>
+
+    <div class="content-container">
+        {#each shelf.items as item}
+            <ParagraphShelfItem {item} />
+        {/each}
+    </div>
+</ShelfWrapper>
+
+<style>
+    h2 {
+        color: var(--systemPrimary);
+        font: var(--title-2-emphasized);
+        text-wrap: pretty;
+        margin: 16px 0;
+    }
+
+    .title-container,
+    .content-container {
+        margin: 0 var(--bodyGutter);
+    }
+
+    /* Whenever this shelf is nested in a modal, we don't want to add extra margin since the modal provides its own */
+    :global(.modal-content) .content-container {
+        margin: unset;
+    }
+</style>
diff --git a/src/components/jet/shelf/PosterLockupShelf.svelte b/src/components/jet/shelf/PosterLockupShelf.svelte
new file mode 100644
index 0000000..101c1d6
--- /dev/null
+++ b/src/components/jet/shelf/PosterLockupShelf.svelte
@@ -0,0 +1,31 @@
+<script lang="ts" context="module">
+    import type { Shelf, PosterLockup } from '@jet-app/app-store/api/models';
+
+    interface PosterLockupShelf extends Shelf {
+        items: PosterLockup[];
+    }
+
+    export function isPosterLockupShelf(
+        shelf: Shelf,
+    ): shelf is PosterLockupShelf {
+        const { contentType, items } = shelf;
+        return contentType === 'posterLockup' && Array.isArray(items);
+    }
+</script>
+
+<script lang="ts">
+    import mediaQueries from '~/utils/media-queries';
+    import ShelfItemLayout from '~/components/ShelfItemLayout.svelte';
+    import PosterLockupItem from '~/components/jet/item/PosterLockupItem.svelte';
+    import ShelfWrapper from '~/components/Shelf/Wrapper.svelte';
+
+    export let shelf: PosterLockupShelf;
+
+    $: gridType = $mediaQueries === 'xsmall' ? 'Spotlight' : 'PosterLockup';
+</script>
+
+<ShelfWrapper {shelf}>
+    <ShelfItemLayout {shelf} {gridType} let:item>
+        <PosterLockupItem {item} />
+    </ShelfItemLayout>
+</ShelfWrapper>
diff --git a/src/components/jet/shelf/PrivacyFooterShelf.svelte b/src/components/jet/shelf/PrivacyFooterShelf.svelte
new file mode 100644
index 0000000..dccade6
--- /dev/null
+++ b/src/components/jet/shelf/PrivacyFooterShelf.svelte
@@ -0,0 +1,40 @@
+<script lang="ts" context="module">
+    import type { PrivacyFooter, Shelf } from '@jet-app/app-store/api/models';
+
+    interface PrivacyFooterShelf extends Shelf {
+        items: [PrivacyFooter];
+    }
+
+    export function isPrivacyFooterShelf(
+        shelf: Shelf,
+    ): shelf is PrivacyFooterShelf {
+        let { contentType, items } = shelf;
+
+        return contentType === 'privacyFooter' && Array.isArray(items);
+    }
+</script>
+
+<script lang="ts">
+    import LinkableTextItem from '~/components/jet/item/LinkableTextItem.svelte';
+    import ShelfWrapper from '~/components/Shelf/Wrapper.svelte';
+
+    export let shelf: PrivacyFooterShelf;
+
+    $: bodyText = shelf.items[0].bodyText;
+</script>
+
+<ShelfWrapper {shelf} centered>
+    <p>
+        <LinkableTextItem item={bodyText} />
+    </p>
+</ShelfWrapper>
+
+<style>
+    p {
+        font: var(--body-tall);
+    }
+
+    p :global(a) {
+        color: var(--keyColor);
+    }
+</style>
diff --git a/src/components/jet/shelf/PrivacyHeaderShelf.svelte b/src/components/jet/shelf/PrivacyHeaderShelf.svelte
new file mode 100644
index 0000000..5ace666
--- /dev/null
+++ b/src/components/jet/shelf/PrivacyHeaderShelf.svelte
@@ -0,0 +1,145 @@
+<script lang="ts" context="module">
+    import {
+        type Action,
+        type FlowAction,
+        type GenericPage,
+        type PrivacyHeader,
+        type Shelf,
+        isFlowAction,
+    } from '@jet-app/app-store/api/models';
+
+    import {
+        isPrivacyTypeShelf,
+        type PrivacyTypeShelf,
+    } from '~/components/jet/shelf/PrivacyTypeShelf.svelte';
+
+    interface PrivacyHeaderShelf extends Shelf {
+        items: [PrivacyHeader];
+    }
+
+    interface PrivacyDetailPage extends GenericPage {
+        shelves: (PrivacyTypeShelf | PrivacyHeaderShelf)[];
+    }
+
+    interface PrivacyDetailPageFlowAction extends FlowAction {
+        page: 'privacyDetail';
+        pageData: PrivacyDetailPage;
+    }
+
+    export function isPrivacyHeaderShelf(
+        shelf: Shelf,
+    ): shelf is PrivacyHeaderShelf {
+        let { contentType, items } = shelf;
+        return contentType === 'privacyHeader' && Array.isArray(items);
+    }
+
+    function isPrivacyDetailFlowAction(
+        action: Action,
+    ): action is PrivacyDetailPageFlowAction {
+        return isFlowAction(action) && action.page === 'privacyDetail';
+    }
+</script>
+
+<script lang="ts">
+    import Modal from '@amp/web-app-components/src/components/Modal/Modal.svelte';
+    import ContentModal from '~/components/jet/item/ContentModal.svelte';
+    import ShelfWrapper from '~/components/Shelf/Wrapper.svelte';
+    import ShelfTitle from '~/components/Shelf/Title.svelte';
+    import PrivacyHeaderItem from '~/components/jet/item/PrivacyHeaderItem.svelte';
+    import PrivacyTypeItem from '~/components/jet/item/PrivacyTypeItem.svelte';
+    import { getI18n } from '~/stores/i18n';
+    import { APP_PRIVACY_MODAL_ID } from '~/utils/metrics';
+
+    export let shelf: PrivacyHeaderShelf;
+
+    let modalComponent: Modal | undefined;
+    let modalTriggerElement: HTMLElement | null = null;
+
+    const { seeAllAction } = shelf;
+    const i18n = getI18n();
+    const translateFn = (key: string) => $i18n.t(key);
+    const handleModalClose = () => modalComponent?.close();
+    const handleOpenModalClick = (e: Event) => {
+        modalTriggerElement = e.target as HTMLElement;
+        modalComponent?.showModal();
+    };
+
+    const destination =
+        seeAllAction && isPrivacyDetailFlowAction(seeAllAction)
+            ? seeAllAction
+            : undefined;
+    const pageData = destination?.pageData;
+</script>
+
+<ShelfWrapper {shelf} withBottomPadding={false}>
+    <div slot="title" class="title-container">
+        {#if shelf.title}
+            <button on:click={handleOpenModalClick}>
+                <ShelfTitle title={shelf.title} seeAllAction={destination} />
+            </button>
+        {/if}
+
+        {#if pageData}
+            <Modal {modalTriggerElement} bind:this={modalComponent}>
+                <ContentModal
+                    {translateFn}
+                    on:close={handleModalClose}
+                    title={pageData.title || null}
+                    subtitle={null}
+                    targetId={APP_PRIVACY_MODAL_ID}
+                >
+                    <svelte:fragment slot="content">
+                        <ul class="modal-content-container">
+                            {#each pageData.shelves as shelf}
+                                {#if isPrivacyHeaderShelf(shelf)}
+                                    {#each shelf.items as item}
+                                        <PrivacyHeaderItem {item} />
+                                    {/each}
+                                {/if}
+
+                                {#if isPrivacyTypeShelf(shelf)}
+                                    {#each shelf.items as item}
+                                        <PrivacyTypeItem
+                                            {item}
+                                            isDetailView={true}
+                                        />
+                                    {/each}
+                                {/if}
+                            {/each}
+                        </ul>
+                    </svelte:fragment>
+                </ContentModal>
+            </Modal>
+        {/if}
+    </div>
+
+    <div class="header-container">
+        <div>
+            <PrivacyHeaderItem item={shelf.items[0]} />
+        </div>
+    </div>
+</ShelfWrapper>
+
+<style>
+    .title-container {
+        display: flex;
+        justify-content: space-between;
+        padding-top: 16px;
+        padding-inline-end: var(--bodyGutter);
+    }
+
+    .header-container {
+        margin: 0 var(--bodyGutter);
+    }
+
+    .header-container div {
+        @media (--range-medium-up) {
+            width: 66%;
+        }
+    }
+
+    .modal-content-container {
+        font: var(--body-tall);
+        white-space: normal;
+    }
+</style>
diff --git a/src/components/jet/shelf/PrivacyTypeShelf.svelte b/src/components/jet/shelf/PrivacyTypeShelf.svelte
new file mode 100644
index 0000000..3817251
--- /dev/null
+++ b/src/components/jet/shelf/PrivacyTypeShelf.svelte
@@ -0,0 +1,29 @@
+<script lang="ts" context="module">
+    import type { PrivacyType, Shelf } from '@jet-app/app-store/api/models';
+
+    export interface PrivacyTypeShelf extends Shelf {
+        items: PrivacyType[];
+    }
+
+    export function isPrivacyTypeShelf(
+        shelf: Shelf,
+    ): shelf is PrivacyTypeShelf {
+        let { contentType, items } = shelf;
+
+        return contentType === 'privacyType' && Array.isArray(items);
+    }
+</script>
+
+<script lang="ts">
+    import ShelfWrapper from '~/components/Shelf/Wrapper.svelte';
+    import ShelfItemLayout from '~/components/ShelfItemLayout.svelte';
+    import PrivacyTypeItem from '~/components/jet/item/PrivacyTypeItem.svelte';
+
+    export let shelf: PrivacyTypeShelf;
+</script>
+
+<ShelfWrapper {shelf} withBottomPadding={false}>
+    <ShelfItemLayout {shelf} gridType="B" let:item>
+        <PrivacyTypeItem {item} />
+    </ShelfItemLayout>
+</ShelfWrapper>
diff --git a/src/components/jet/shelf/ProductBadgeShelf.svelte b/src/components/jet/shelf/ProductBadgeShelf.svelte
new file mode 100644
index 0000000..cded0b7
--- /dev/null
+++ b/src/components/jet/shelf/ProductBadgeShelf.svelte
@@ -0,0 +1,59 @@
+<script lang="ts" context="module">
+    import type { Badge, Shelf } from '@jet-app/app-store/api/models';
+
+    interface ProductBadgeShelf extends Shelf {
+        items: Badge[];
+    }
+
+    export function isProductBadgeShelf(
+        shelf: Shelf,
+    ): shelf is ProductBadgeShelf {
+        const { contentType, items } = shelf || {};
+        return contentType === 'productBadge' && Array.isArray(items);
+    }
+</script>
+
+<script lang="ts">
+    import ShelfItemLayout from '~/components/ShelfItemLayout.svelte';
+    import ProductBadgeItem from '~/components/jet/item/ProductBadgeItem.svelte';
+    import ShelfWrapper from '~/components/Shelf/Wrapper.svelte';
+
+    export let shelf: ProductBadgeShelf;
+
+    $: shelf.items = shelf.items.filter(
+        (item) => item.type !== 'friendsPlaying',
+    );
+</script>
+
+<ShelfWrapper {shelf} withBottomPadding={false} withTopMargin={true}>
+    <div class="inforibbon-shelf-wrapper">
+        <ShelfItemLayout {shelf} gridType="ProductBadge" let:item>
+            <ProductBadgeItem {item} />
+        </ShelfItemLayout>
+    </div>
+</ShelfWrapper>
+
+<style lang="scss">
+    .inforibbon-shelf-wrapper {
+        padding-bottom: 16px;
+    }
+
+    .inforibbon-shelf-wrapper :global(ul) {
+        display: grid;
+
+        /*
+            Here we are overriding the grid template styles from `ShelfItemLayout -> Grid`,
+            to make it so the badge row always takes up the full-width of the browser until
+            when not in the XS/mobile view.
+        */
+        @media (--range-small-up) {
+            display: flex;
+            justify-content: space-between;
+        }
+    }
+
+    // prevent collapse of focus outlines
+    .inforibbon-shelf-wrapper :global(a) {
+        display: block;
+    }
+</style>
diff --git a/src/components/jet/shelf/ProductCapabilityShelf.svelte b/src/components/jet/shelf/ProductCapabilityShelf.svelte
new file mode 100644
index 0000000..6a4307a
--- /dev/null
+++ b/src/components/jet/shelf/ProductCapabilityShelf.svelte
@@ -0,0 +1,31 @@
+<script lang="ts" context="module">
+    import type {
+        Shelf,
+        ProductCapability,
+    } from '@jet-app/app-store/api/models';
+
+    interface ProductCapabilityShelf extends Shelf {
+        items: ProductCapability[];
+    }
+
+    export function isProductCapabilityShelf(
+        shelf: Shelf,
+    ): shelf is ProductCapabilityShelf {
+        const { contentType, items } = shelf;
+        return contentType === 'productCapability' && Array.isArray(items);
+    }
+</script>
+
+<script lang="ts">
+    import ShelfItemLayout from '~/components/ShelfItemLayout.svelte';
+    import ProductCapabilityItem from '../item/ProductCapabilityItem.svelte';
+    import ShelfWrapper from '~/components/Shelf/Wrapper.svelte';
+
+    export let shelf: ProductCapabilityShelf;
+</script>
+
+<ShelfWrapper {shelf}>
+    <ShelfItemLayout {shelf} gridType="SearchLink" let:item>
+        <ProductCapabilityItem {item} />
+    </ShelfItemLayout>
+</ShelfWrapper>
diff --git a/src/components/jet/shelf/ProductDescriptionShelf.svelte b/src/components/jet/shelf/ProductDescriptionShelf.svelte
new file mode 100644
index 0000000..7cddcee
--- /dev/null
+++ b/src/components/jet/shelf/ProductDescriptionShelf.svelte
@@ -0,0 +1,95 @@
+<script lang="ts" context="module">
+    import type {
+        Shelf,
+        ProductDescription,
+    } from '@jet-app/app-store/api/models';
+
+    interface ProductDescriptionShelf extends Shelf {
+        items: [ProductDescription];
+    }
+
+    export function isProductDescriptionShelf(
+        shelf: Shelf,
+    ): shelf is ProductDescriptionShelf {
+        const { contentType, items } = shelf;
+
+        return contentType === 'productDescription' && Array.isArray(items);
+    }
+</script>
+
+<script lang="ts">
+    import { sanitizeHtml } from '@amp/web-app-components/src/utils/sanitize-html';
+    import LineClamp from '@amp/web-app-components/src/components/LineClamp/LineClamp.svelte';
+    import ShelfWrapper from '~/components/Shelf/Wrapper.svelte';
+    import { getI18n } from '~/stores/i18n';
+
+    export let shelf: ProductDescriptionShelf;
+
+    const i18n = getI18n();
+    const description = shelf.items[0]?.paragraph.text;
+    const handleMoreClick = () => (isOpen = true);
+    let isOpen = false;
+
+    function handleLineClampResize(event: CustomEvent) {
+        if (!event.detail.truncated) {
+            isOpen = true;
+        }
+    }
+</script>
+
+<ShelfWrapper centered>
+    <article>
+        <p>
+            {#if isOpen}
+                {@html sanitizeHtml(description)}
+            {:else}
+                <LineClamp observe clamp={5} on:resize={handleLineClampResize}>
+                    {@html sanitizeHtml(description)}
+                </LineClamp>
+            {/if}
+
+            {#if !isOpen}
+                <button on:click={handleMoreClick}>
+                    {$i18n.t('ASE.Web.AppStore.More')}
+                </button>
+            {/if}
+        </p>
+    </article>
+</ShelfWrapper>
+
+<style lang="scss">
+    @use '@amp/web-shared-styles/sasskit-stylekit/ac-sasskit-config';
+    @use 'ac-sasskit/core/locale' as *;
+
+    p {
+        white-space: break-spaces;
+        font: var(--body-tall);
+        position: relative;
+        display: flex;
+        flex-direction: column;
+
+        @media (--range-medium-up) {
+            width: 66%;
+        }
+    }
+
+    button {
+        --gradient-direction: 270deg;
+        display: flex;
+        justify-content: end;
+        position: absolute;
+        bottom: 0;
+        inset-inline-end: 0;
+        padding-inline-start: 20px;
+        color: var(--keyColor);
+        background: linear-gradient(
+            var(--gradient-direction),
+            var(--pageBg) 72%,
+            transparent 100%
+        );
+
+        @include rtl {
+            --gradient-direction: 90deg;
+        }
+    }
+</style>
diff --git a/src/components/jet/shelf/ProductMediaShelf.svelte b/src/components/jet/shelf/ProductMediaShelf.svelte
new file mode 100644
index 0000000..f57fee7
--- /dev/null
+++ b/src/components/jet/shelf/ProductMediaShelf.svelte
@@ -0,0 +1,269 @@
+<script lang="ts" context="module">
+    import type {
+        Shelf,
+        ProductMedia,
+        AppPlatform,
+        MediaType,
+        MediaPlatform,
+    } from '@jet-app/app-store/api/models';
+
+    interface ProductMediaShelf extends Shelf, ProductMedia {
+        items: ProductMedia['items'];
+        expandedMedia?: ProductMediaShelf[];
+    }
+
+    export function isProductMediaShelf(
+        shelf: Shelf,
+    ): shelf is ProductMediaShelf {
+        const { contentType, items } = shelf;
+        return contentType === 'productMediaItem' && Array.isArray(items);
+    }
+
+    const platformToIconNameMap: Record<AppPlatform, string> = {
+        phone: 'iphone.gen2',
+        pad: 'ipad.gen2',
+        tv: 'tv',
+        watch: 'applewatch',
+        mac: 'macbook.gen2',
+        messages: 'message',
+        vision: 'visionpro',
+    };
+
+    const platformToDescriptionMap: Record<AppPlatform, string> = {
+        phone: 'AppStore.AppPlatform.Phone',
+        pad: 'AppStore.AppPlatform.Pad',
+        tv: 'AppStore.AppPlatform.TV',
+        watch: 'AppStore.AppPlatform.Watch',
+        mac: 'AppStore.AppPlatform.Mac',
+        messages: 'AppStore.AppPlatform.Messages',
+        vision: 'AppStore.AppPlatform.Vision',
+    };
+</script>
+
+<script lang="ts">
+    import ShelfWrapper from '~/components/Shelf/Wrapper.svelte';
+    import ShelfItemLayout from '~/components/ShelfItemLayout.svelte';
+    import ProductMediaVisionItem from '~/components/jet/item/ProductMedia/ProductMediaVisionItem.svelte';
+    import ProductMediaPhoneItem from '~/components/jet/item/ProductMedia/ProductMediaPhoneItem.svelte';
+    import ProductMediaMacItem from '~/components/jet/item/ProductMedia/ProductMediaMacItem.svelte';
+    import ProductMediaPadItem from '~/components/jet/item/ProductMedia/ProductMediaPadItem.svelte';
+    import ProductMediaWatchItem from '~/components/jet/item/ProductMedia/ProductMediaWatchItem.svelte';
+    import ProductMediaTVItem from '~/components/jet/item/ProductMedia/ProductMediaTVItem.svelte';
+    import ChevronDown from '~/sf-symbols/chevron.down.svg';
+    import SFSymbol from '~/components/SFSymbol.svelte';
+    import { getI18n } from '~/stores/i18n';
+    import { slide } from 'svelte/transition';
+    import { getJet } from '~/jet';
+
+    export let shelf: ProductMediaShelf;
+    export let isExpandedMedia: boolean = false;
+
+    const i18n = getI18n();
+    const jet = getJet();
+
+    let appPlatform: AppPlatform | undefined;
+    let allPlatforms: MediaPlatform[] | undefined;
+    let mediaType: MediaType | undefined;
+    let hasPortraitMedia: boolean = false;
+    let shouldDisplayExpandedMedia: boolean = false;
+
+    $: {
+        if (shelf.contentsMetadata.type === 'productMedia') {
+            ({ hasPortraitMedia, allPlatforms } = shelf.contentsMetadata);
+            ({ appPlatform, mediaType } = shelf.contentsMetadata.platform);
+        }
+    }
+
+    $: allPlatformsDescription = allPlatforms
+        ?.map(({ appPlatform }) =>
+            $i18n.t(platformToDescriptionMap[appPlatform]),
+        )
+        ?.join($i18n.t('AppStore.AppPlatform.Component.Separator'));
+
+    $: shouldShowPlatform =
+        isExpandedMedia ||
+        shouldDisplayExpandedMedia ||
+        allPlatforms?.length === 1;
+
+    const displayExpandedMedia = () => {
+        shouldDisplayExpandedMedia = true;
+        jet.recordCustomMetricsEvent({
+            eventType: 'click',
+            actionDetails: { type: 'platformSelect' },
+            targetType: 'button',
+            targetId: 'productMediaShelf',
+        });
+    };
+</script>
+
+<ShelfWrapper {shelf} withBottomPadding={!shelf.expandedMedia}>
+    {#if appPlatform === 'vision'}
+        <ShelfItemLayout {shelf} gridType="ScreenshotVision" let:item>
+            <ProductMediaVisionItem {item} />
+        </ShelfItemLayout>
+    {:else if appPlatform === 'phone' || appPlatform === 'messages'}
+        <ShelfItemLayout
+            {shelf}
+            gridType={hasPortraitMedia ? 'ScreenshotPhone' : 'ScreenshotLarge'}
+            let:item
+        >
+            <ProductMediaPhoneItem {item} {hasPortraitMedia} {mediaType} />
+        </ShelfItemLayout>
+    {:else if appPlatform === 'pad'}
+        <ShelfItemLayout
+            {shelf}
+            gridType={hasPortraitMedia ? 'ScreenshotPad' : 'ScreenshotLarge'}
+            let:item
+        >
+            <ProductMediaPadItem {item} {hasPortraitMedia} {mediaType} />
+        </ShelfItemLayout>
+    {:else if appPlatform === 'mac'}
+        <ShelfItemLayout {shelf} gridType="ScreenshotLarge" let:item>
+            <ProductMediaMacItem {item} />
+        </ShelfItemLayout>
+    {:else if appPlatform === 'tv'}
+        <ShelfItemLayout {shelf} gridType="ScreenshotLarge" let:item>
+            <ProductMediaTVItem {item} />
+        </ShelfItemLayout>
+    {:else if appPlatform === 'watch'}
+        <ShelfItemLayout {shelf} gridType="ScreenshotPhone" let:item>
+            <ProductMediaWatchItem {item} {mediaType} />
+        </ShelfItemLayout>
+    {:else}
+        <ShelfItemLayout {shelf} gridType="A" let:item>
+            <ProductMediaPhoneItem {item} {hasPortraitMedia} {mediaType} />
+        </ShelfItemLayout>
+    {/if}
+
+    {#if appPlatform && shouldShowPlatform}
+        <div class="platform-description">
+            <div class="icon" aria-hidden="true">
+                <SFSymbol name={platformToIconNameMap[appPlatform]} />
+            </div>
+            <div class="platform-label">
+                {$i18n.t(platformToDescriptionMap[appPlatform])}
+            </div>
+        </div>
+    {/if}
+</ShelfWrapper>
+
+{#if shelf.expandedMedia && allPlatforms && allPlatforms.length > 1}
+    <div class="expanded-media">
+        {#if !shouldDisplayExpandedMedia}
+            <button
+                class="expanded-media-header"
+                on:click={displayExpandedMedia}
+            >
+                <div class="all-platforms">
+                    <div class="all-platforms-icons">
+                        {#each allPlatforms as platform}
+                            <div class="icon" aria-hidden="true">
+                                <SFSymbol
+                                    name={platformToIconNameMap[
+                                        platform.appPlatform
+                                    ]}
+                                />
+                            </div>
+                        {/each}
+                    </div>
+                    <div class="all-platforms-names">
+                        {allPlatformsDescription}
+                    </div>
+                </div>
+                <div class="chevron-container icon" aria-hidden="true">
+                    <ChevronDown />
+                </div>
+            </button>
+        {/if}
+        {#if shouldDisplayExpandedMedia}
+            <div class="expanded-media-content" transition:slide>
+                {#each shelf.expandedMedia as expandedMediaShelf}
+                    <svelte:self
+                        shelf={expandedMediaShelf}
+                        isExpandedMedia={true}
+                    />
+                {/each}
+            </div>
+        {/if}
+    </div>
+{/if}
+
+{#if !isExpandedMedia}
+    <div class="divider" />
+{/if}
+
+<style>
+    .expanded-media {
+        margin: 15px 0;
+    }
+
+    .expanded-media-header {
+        width: 100%;
+        padding-inline: var(--bodyGutter);
+        display: inline-flex;
+        align-items: center;
+        justify-content: space-between;
+    }
+
+    .platform-description {
+        display: inline-flex;
+        align-items: center;
+        font: var(--body-reduced-semibold);
+        color: var(--systemSecondary);
+        margin-top: 15px;
+        gap: 10px;
+        margin-inline: var(--bodyGutter);
+    }
+
+    .all-platforms {
+        display: inline-flex;
+        align-items: center;
+        flex-wrap: wrap;
+        gap: 10px;
+        color: var(--systemSecondary);
+    }
+
+    .all-platforms-icons {
+        display: inline-flex;
+        gap: 10px;
+    }
+
+    .all-platforms-names {
+        font: var(--body-reduced-semibold);
+    }
+
+    .icon :global(svg) {
+        overflow: visible;
+        height: 16px;
+        max-width: 25px;
+        fill: var(--systemSecondary);
+        position: relative;
+        display: flex;
+    }
+
+    .divider {
+        margin: 10px var(--bodyGutter);
+        border-bottom: 1px solid var(--systemGray4);
+    }
+
+    .chevron-container {
+        top: 2px;
+    }
+
+    .expanded-media-content :global(.shelf:last-of-type) {
+        padding-bottom: 0;
+    }
+
+    .expanded-media-header .all-platforms,
+    .expanded-media-header .chevron-container :global(svg) {
+        transition-duration: 210ms;
+        transition-timing-function: ease-out;
+        transition-property: color, fill;
+    }
+
+    .expanded-media-header:hover .all-platforms,
+    .expanded-media-header:hover .chevron-container :global(svg) {
+        color: var(--systemPrimary);
+        fill: var(--systemPrimary);
+    }
+</style>
diff --git a/src/components/jet/shelf/ProductPageLinkShelf.svelte b/src/components/jet/shelf/ProductPageLinkShelf.svelte
new file mode 100644
index 0000000..7b41e80
--- /dev/null
+++ b/src/components/jet/shelf/ProductPageLinkShelf.svelte
@@ -0,0 +1,59 @@
+<script lang="ts" context="module">
+    import type { Shelf, ProductPageLink } from '@jet-app/app-store/api/models';
+
+    interface ProductPageLinkShelf extends Shelf {
+        items: ProductPageLink[];
+    }
+
+    export function isProductPageLinkShelf(
+        shelf: Shelf,
+    ): shelf is ProductPageLinkShelf {
+        const { contentType, items } = shelf;
+        return contentType === 'productPageLink' && Array.isArray(items);
+    }
+</script>
+
+<script lang="ts">
+    import ProductPageLinkItem from '~/components/jet/item/ProductPageLinkItem.svelte';
+    import ShelfWrapper from '~/components/Shelf/Wrapper.svelte';
+
+    export let shelf: ProductPageLinkShelf;
+</script>
+
+<ShelfWrapper {shelf}>
+    <div class="product-page-link-shelf">
+        {#each shelf.items as item}
+            <li class="product-page-link-item">
+                <ProductPageLinkItem {item} />
+            </li>
+        {/each}
+    </div>
+</ShelfWrapper>
+
+<style lang="scss">
+    $product-page-link-border: 1px solid var(--systemGray4);
+
+    .product-page-link-shelf {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        column-gap: 20px;
+
+        @media (--range-xsmall-down) {
+            flex-direction: column;
+            align-items: flex-start;
+        }
+    }
+
+    @media (--range-xsmall-down) {
+        .product-page-link-item:first-child {
+            border-top: $product-page-link-border;
+        }
+
+        .product-page-link-item {
+            width: 100%;
+            border-bottom: $product-page-link-border;
+            padding: 0 var(--bodyGutter);
+        }
+    }
+</style>
diff --git a/src/components/jet/shelf/ProductRatingsShelf.svelte b/src/components/jet/shelf/ProductRatingsShelf.svelte
new file mode 100644
index 0000000..8f09ab5
--- /dev/null
+++ b/src/components/jet/shelf/ProductRatingsShelf.svelte
@@ -0,0 +1,29 @@
+<script lang="ts" context="module">
+    import { type Ratings, type Shelf } from '@jet-app/app-store/api/models';
+
+    interface ProductRatingsShelf extends Shelf {
+        items: Ratings[];
+    }
+
+    export function isProductRatingsShelf(
+        shelf: Shelf,
+    ): shelf is ProductRatingsShelf {
+        let { contentType, items } = shelf;
+
+        return contentType === 'productRatings' && Array.isArray(items);
+    }
+</script>
+
+<script lang="ts">
+    import ShelfItemLayout from '~/components/ShelfItemLayout.svelte';
+    import ProductRatingsItem from '~/components/jet/item/ProductRatingsItem.svelte';
+    import ShelfWrapper from '~/components/Shelf/Wrapper.svelte';
+
+    export let shelf: ProductRatingsShelf;
+</script>
+
+<ShelfWrapper {shelf} withBottomPadding={false}>
+    <ShelfItemLayout {shelf} gridType="A" let:item>
+        <ProductRatingsItem {item} />
+    </ShelfItemLayout>
+</ShelfWrapper>
diff --git a/src/components/jet/shelf/ProductReviewShelf.svelte b/src/components/jet/shelf/ProductReviewShelf.svelte
new file mode 100644
index 0000000..6bc4ecb
--- /dev/null
+++ b/src/components/jet/shelf/ProductReviewShelf.svelte
@@ -0,0 +1,38 @@
+<script lang="ts" context="module">
+    import type { ProductReview, Shelf } from '@jet-app/app-store/api/models';
+
+    interface ProductReviewShelf extends Shelf {
+        items: ProductReview[];
+    }
+
+    export function isProductReviewShelf(
+        shelf: Shelf,
+    ): shelf is ProductReviewShelf {
+        let { contentType, items } = shelf;
+
+        return contentType === 'productReview' && Array.isArray(items);
+    }
+</script>
+
+<script lang="ts">
+    import ShelfItemLayout from '~/components/ShelfItemLayout.svelte';
+    import ShelfWrapper from '~/components/Shelf/Wrapper.svelte';
+    import EditorsChoiceReviewItem, {
+        isEditorsChoiceReviewItem,
+    } from '~/components/jet/item/ProductReview/EditorsChoiceReviewItem.svelte';
+    import UserReviewItem, {
+        isUserReviewItem,
+    } from '~/components/jet/item/ProductReview/UserReviewItem.svelte';
+
+    export let shelf: ProductReviewShelf;
+</script>
+
+<ShelfWrapper {shelf}>
+    <ShelfItemLayout {shelf} gridType="A" let:item>
+        {#if isUserReviewItem(item)}
+            <UserReviewItem {item} />
+        {:else if isEditorsChoiceReviewItem(item)}
+            <EditorsChoiceReviewItem {item} />
+        {/if}
+    </ShelfItemLayout>
+</ShelfWrapper>
diff --git a/src/components/jet/shelf/QuoteShelf.svelte b/src/components/jet/shelf/QuoteShelf.svelte
new file mode 100644
index 0000000..3a14f4f
--- /dev/null
+++ b/src/components/jet/shelf/QuoteShelf.svelte
@@ -0,0 +1,80 @@
+<script lang="ts" context="module">
+    import type { Quote, Shelf } from '@jet-app/app-store/api/models';
+
+    interface QuoteShelf extends Shelf {
+        contentType: 'quote';
+        items: [Quote];
+    }
+
+    export function isQuoteShelf(shelf: Shelf): shelf is QuoteShelf {
+        return shelf.contentType === 'quote' && Array.isArray(shelf.items);
+    }
+</script>
+
+<script lang="ts">
+    import ShelfWrapper from '~/components/Shelf/Wrapper.svelte';
+
+    export let shelf: QuoteShelf;
+
+    $: item = shelf.items[0];
+</script>
+
+<ShelfWrapper {shelf} withBottomPadding={false}>
+    <div class="outer">
+        <div class="inner">
+            <blockquote>
+                {item.text}
+            </blockquote>
+            <span>{item.credit}</span>
+        </div>
+    </div>
+</ShelfWrapper>
+
+<style lang="scss">
+    @use '@amp/web-shared-styles/app/core/globalvars' as *;
+    @use '@amp/web-shared-styles/sasskit-stylekit/ac-sasskit-config';
+    @use 'ac-sasskit/core/locale' as *;
+
+    .outer {
+        display: flex;
+        margin-bottom: 24px;
+        padding: 0 var(--bodyGutter);
+        gap: 6px;
+    }
+
+    .outer::before {
+        content: '❝';
+        font-size: 40px;
+        line-height: 2.2rem;
+        color: var(--systemSecondary);
+
+        @include rtl {
+            content: '❞';
+        }
+    }
+
+    .inner {
+        display: flex;
+        flex-direction: column;
+        gap: 6px;
+    }
+
+    blockquote {
+        font: var(--large-title-emphasized);
+        text-wrap: pretty;
+    }
+
+    blockquote::after {
+        content: '❞';
+        color: var(--systemSecondary);
+
+        @include rtl {
+            content: '❝';
+        }
+    }
+
+    span {
+        font: var(--title-3);
+        color: var(--systemSecondary);
+    }
+</style>
diff --git a/src/components/jet/shelf/ReviewsContainerShelf.svelte b/src/components/jet/shelf/ReviewsContainerShelf.svelte
new file mode 100644
index 0000000..a55fe40
--- /dev/null
+++ b/src/components/jet/shelf/ReviewsContainerShelf.svelte
@@ -0,0 +1,84 @@
+<script lang="ts" context="module">
+    import type {
+        Shelf,
+        ReviewsContainer,
+    } from '@jet-app/app-store/api/models';
+
+    export interface ReviewsContainerShelf extends Shelf {
+        items: [ReviewsContainer];
+    }
+
+    export function isReviewsContainerShelf(
+        shelf: Shelf,
+    ): shelf is ReviewsContainerShelf {
+        return (
+            shelf.contentType === 'reviewsContainer' &&
+            Array.isArray(shelf.items)
+        );
+    }
+</script>
+
+<script lang="ts">
+    import RatingComponent from '@amp/web-app-components/src/components/Rating/Rating.svelte';
+
+    import LinkWrapper from '~/components/LinkWrapper.svelte';
+    import ShelfTitle from '~/components/Shelf/Title.svelte';
+    import ShelfWrapper from '~/components/Shelf/Wrapper.svelte';
+    import Grid from '~/components/Grid.svelte';
+    import { getI18n } from '~/stores/i18n';
+    import { getJet } from '~/jet/svelte';
+
+    const i18n = getI18n();
+    const jet = getJet();
+
+    export let shelf: ReviewsContainerShelf;
+
+    $: reviewsContainer = shelf.items[0];
+    $: ({ productAction, ratings } = reviewsContainer);
+
+    $: numberOfRatings = jet.localization.formattedCount(
+        ratings.totalNumberOfRatings,
+    );
+</script>
+
+<ShelfWrapper {shelf}>
+    <header slot="title">
+        {#if productAction}
+            <div class="product-action">
+                <LinkWrapper action={productAction}>
+                    {productAction.title}
+                </LinkWrapper>
+            </div>
+        {/if}
+
+        <ShelfTitle title={shelf.title ?? ''} />
+
+        <Grid gridType="A" items={[1]}>
+            <div class="rating">
+                <RatingComponent
+                    averageRating={ratings.ratingAverage}
+                    ratingCount={ratings.totalNumberOfRatings}
+                    ratingCountText={$i18n.t(
+                        'ASE.Web.AppStore.Ratings.CountText',
+                        {
+                            numberOfRatings,
+                        },
+                    )}
+                    ratingCountsList={ratings.ratingCounts}
+                    totalText={$i18n.t('ASE.Web.AppStore.Ratings.TotalText')}
+                />
+            </div>
+        </Grid>
+    </header>
+</ShelfWrapper>
+
+<style>
+    .product-action {
+        --linkColor: var(--keyColor);
+        margin: 0 var(--bodyGutter) 6px;
+    }
+
+    .rating {
+        --ratingBarColor: var(--systemPrimary);
+    }
+</style>
diff --git a/src/components/jet/shelf/ReviewsShelf.svelte b/src/components/jet/shelf/ReviewsShelf.svelte
new file mode 100644
index 0000000..8304444
--- /dev/null
+++ b/src/components/jet/shelf/ReviewsShelf.svelte
@@ -0,0 +1,28 @@
+<script lang="ts" context="module">
+    import type {
+        Shelf,
+        Review as ReviewModel,
+    } from '@jet-app/app-store/api/models';
+
+    export interface ReviewsShelf extends Shelf {
+        items: ReviewModel[];
+    }
+
+    export function isReviewsShelf(shelf: Shelf): shelf is ReviewsShelf {
+        return shelf.contentType === 'reviews' && Array.isArray(shelf.items);
+    }
+</script>
+
+<script lang="ts">
+    import ShelfWrapper from '~/components/Shelf/Wrapper.svelte';
+    import ShelfItemLayout from '~/components/ShelfItemLayout.svelte';
+    import ReviewItem from '~/components/jet/item/ReviewItem.svelte';
+
+    export let shelf: ReviewsShelf;
+</script>
+
+<ShelfWrapper {shelf}>
+    <ShelfItemLayout {shelf} gridType="A" let:item>
+        <ReviewItem {item} />
+    </ShelfItemLayout>
+</ShelfWrapper>
diff --git a/src/components/jet/shelf/RibbonBarShelf.svelte b/src/components/jet/shelf/RibbonBarShelf.svelte
new file mode 100644
index 0000000..44a8ae9
--- /dev/null
+++ b/src/components/jet/shelf/RibbonBarShelf.svelte
@@ -0,0 +1,135 @@
+<script lang="ts" context="module">
+    import type { Shelf, RibbonBarItem } from '@jet-app/app-store/api/models';
+
+    interface RibbonBarShelf extends Shelf {
+        items: RibbonBarItem[];
+    }
+
+    export function isRibbonBarShelf(shelf: Shelf): shelf is RibbonBarShelf {
+        return shelf.contentType === 'ribbonBar' && Array.isArray(shelf.items);
+    }
+</script>
+
+<script lang="ts">
+    import Artwork, { getNaturalProfile } from '~/components/Artwork.svelte';
+    import LinkWrapper from '~/components/LinkWrapper.svelte';
+    import ShelfWrapper from '~/components/Shelf/Wrapper.svelte';
+    import SystemImage, {
+        isSystemImageArtwork,
+    } from '~/components/SystemImage.svelte';
+
+    export let shelf: RibbonBarShelf;
+</script>
+
+<ShelfWrapper {shelf} withBottomPadding={false} withPaddingTop={false}>
+    <div class="scroll">
+        <ul>
+            {#each shelf.items as ribbonBarItem}
+                {@const action = ribbonBarItem.clickAction}
+                {@const artwork = ribbonBarItem.artwork}
+                {@const title = ribbonBarItem.title}
+                <li>
+                    <LinkWrapper {action}>
+                        {#if artwork}
+                            <div
+                                class="artwork-container"
+                                style:--aspect-ratio={artwork.width /
+                                    artwork.height}
+                            >
+                                {#if isSystemImageArtwork(artwork)}
+                                    <SystemImage {artwork} />
+                                {:else}
+                                    <Artwork
+                                        {artwork}
+                                        profile={getNaturalProfile(artwork, [
+                                            17,
+                                        ])}
+                                        hasTransparentBackground
+                                    />
+                                {/if}
+                            </div>
+                        {/if}
+                        {title}
+                    </LinkWrapper>
+                </li>
+            {/each}
+        </ul>
+    </div>
+</ShelfWrapper>
+
+<style lang="scss">
+    @use '@amp/web-shared-styles/sasskit-stylekit/ac-sasskit-config';
+    @use 'ac-sasskit/core/helpers' as *;
+    @use 'ac-sasskit/core/locale' as *;
+
+    .scroll {
+        --gradient-direction: 90deg;
+        overflow-x: auto;
+        scrollbar-width: none;
+        padding-inline-start: var(--bodyGutter);
+        margin-inline-end: var(--bodyGutter);
+        // A small gradient that fades out the ribbon, to indicate that there is more
+        mask-image: linear-gradient(
+            var(--gradient-direction),
+            black calc(100% - 8px),
+            transparent 100%
+        );
+
+        @include rtl {
+            --gradient-direction: -90deg;
+        }
+    }
+
+    ul {
+        font: var(--body-emphasized);
+        display: flex;
+        gap: 4px;
+        padding-bottom: 16px;
+        padding-top: 13px;
+    }
+
+    li {
+        display: flex;
+        margin-inline-end: 8px;
+        flex-shrink: 0;
+    }
+
+    li:last-of-type {
+        padding-inline-end: 8px;
+    }
+
+    li :global(a) {
+        position: relative;
+        display: flex;
+        align-items: center;
+        gap: 4px;
+        flex-shrink: 0;
+        background: var(--pageBG);
+        border-radius: var(--global-border-radius-small);
+        padding: 6px 10px;
+
+        &::after {
+            content: '';
+            display: block;
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            border-radius: var(--global-border-radius-small);
+            box-shadow: var(--shadow-small);
+            z-index: calc(var(--z-default) - 1);
+        }
+
+        @media (prefers-color-scheme: dark) {
+            background: var(--systemGray5-default_IC);
+        }
+    }
+
+    .artwork-container {
+        --artwork-override-height: 17px;
+        flex-shrink: 0;
+        aspect-ratio: var(--aspect-ratio);
+        height: 17px;
+    }
+</style>
diff --git a/src/components/jet/shelf/SearchLinkShelf.svelte b/src/components/jet/shelf/SearchLinkShelf.svelte
new file mode 100644
index 0000000..6b29780
--- /dev/null
+++ b/src/components/jet/shelf/SearchLinkShelf.svelte
@@ -0,0 +1,26 @@
+<script lang="ts" context="module">
+    import type { Shelf, SearchLink } from '@jet-app/app-store/api/models';
+
+    interface SearchLinkShelf extends Shelf {
+        items: SearchLink[];
+    }
+
+    export function isSearchLinkShelf(shelf: Shelf): shelf is SearchLinkShelf {
+        const { contentType, items } = shelf;
+        return contentType === 'searchLink' && Array.isArray(items);
+    }
+</script>
+
+<script lang="ts">
+    import ShelfItemLayout from '~/components/ShelfItemLayout.svelte';
+    import SearchLinkItem from '~/components/jet/item/SearchLinkItem.svelte';
+    import ShelfWrapper from '~/components/Shelf/Wrapper.svelte';
+
+    export let shelf: SearchLinkShelf;
+</script>
+
+<ShelfWrapper {shelf}>
+    <ShelfItemLayout {shelf} gridType="SearchLink" let:item>
+        <SearchLinkItem {item} />
+    </ShelfItemLayout>
+</ShelfWrapper>
diff --git a/src/components/jet/shelf/SearchResultShelf.svelte b/src/components/jet/shelf/SearchResultShelf.svelte
new file mode 100644
index 0000000..9c15d3e
--- /dev/null
+++ b/src/components/jet/shelf/SearchResultShelf.svelte
@@ -0,0 +1,49 @@
+<script lang="ts" context="module">
+    import type {
+        AppSearchResult,
+        Shelf,
+        SearchResult,
+        AppEventSearchResult,
+    } from '@jet-app/app-store/api/models';
+
+    import AppSearchResultItem, {
+        isAppSearchResult,
+        isAppEventSearchResult,
+    } from '~/components/jet/item/SearchResult/AppSearchResultItem.svelte';
+
+    /**
+     * All sub-classes of {@linkcode SearchResult} that this component can handle rendering
+     */
+    type RenderableSearchResult = AppSearchResult | AppEventSearchResult;
+
+    interface SearchResultShelf extends Shelf {
+        items: SearchResult[];
+    }
+
+    export function isSearchResultShelf(
+        shelf: Shelf,
+    ): shelf is SearchResultShelf {
+        return (
+            shelf.contentType === 'searchResult' && Array.isArray(shelf.items)
+        );
+    }
+
+    export function isRenderableInSearchResultsShelf(
+        item: SearchResult,
+    ): item is RenderableSearchResult {
+        return isAppSearchResult(item) || isAppEventSearchResult(item);
+    }
+</script>
+
+<script lang="ts">
+    import Grid from '~/components/Grid.svelte';
+    import ShelfWrapper from '~/components/Shelf/Wrapper.svelte';
+
+    export let shelf: SearchResultShelf;
+</script>
+
+<ShelfWrapper {shelf}>
+    <Grid gridType="SearchResult" items={shelf.items} let:item>
+        <AppSearchResultItem {item} />
+    </Grid>
+</ShelfWrapper>
diff --git a/src/components/jet/shelf/Shelf.svelte b/src/components/jet/shelf/Shelf.svelte
new file mode 100644
index 0000000..6cbb0f6
--- /dev/null
+++ b/src/components/jet/shelf/Shelf.svelte
@@ -0,0 +1,320 @@
+<script lang="ts">
+    import type { Shelf } from '@jet-app/app-store/api/models';
+
+    // Components for specific types of `Shelf`
+    import AccessibilityHeaderShelf, {
+        isAccessibilityHeaderShelf,
+    } from '~/components/jet/shelf/AccessibilityHeaderShelf.svelte';
+    import AccessibilityFeaturesShelf, {
+        isAccessibilityFeaturesShelf,
+    } from '~/components/jet/shelf/AccessibilityFeaturesShelf.svelte';
+    import AccessibilityDeveloperLinkShelf, {
+        isAccessibilityDeveloperLinkShelf,
+    } from './AccessibilityDeveloperLinkShelf.svelte';
+    import ActionShelf, {
+        isActionShelf,
+    } from '~/components/jet/shelf/ActionShelf.svelte';
+    import AnnotationShelf, {
+        isAnnotationShelf,
+    } from '~/components/jet/shelf/AnnotationShelf.svelte';
+    import AppEventDetailShelf, {
+        isAppEventDetailShelf,
+    } from '~/components/jet/shelf/AppEventDetailShelf.svelte';
+    import AppPromotionShelf, {
+        isAppPromotionShelf,
+    } from '~/components/jet/shelf/AppPromotionShelf.svelte';
+    import AppShowcaseShelf, {
+        isAppShowcaseShelf,
+    } from '~/components/jet/shelf/AppShowcaseShelf.svelte';
+    import AppTrailerLockupShelf, {
+        isAppTrailerLockupShelf,
+    } from '~/components/jet/shelf/AppTrailerLockupShelf.svelte';
+    import ArcadeFooterShelf, {
+        isArcadeFooterShelf,
+    } from '~/components/jet/shelf/ArcadeFooterShelf.svelte';
+    import { isBannerShelf } from '~/components/jet/shelf/BannerShelf.svelte';
+    import BrickShelf, {
+        isBrickShelf,
+    } from '~/components/jet/shelf/BrickShelf.svelte';
+    import CategoryBrickShelf, {
+        isCategoryBrickShelf,
+    } from '~/components/jet/shelf/CategoryBrickShelf.svelte';
+    import EditorialCardShelf, {
+        isEditorialCardShelf,
+    } from '~/components/jet/shelf/EditorialCardShelf.svelte';
+    import EditorialLinkShelf, {
+        isEditorialLinkShelf,
+    } from '~/components/jet/shelf/EditorialLinkShelf.svelte';
+    import FramedArtworkShelf, {
+        isFramedArtworkShelf,
+    } from '~/components/jet/shelf/FramedArtworkShelf.svelte';
+    import FramedVideoShelf, {
+        isFramedVideoShelf,
+    } from '~/components/jet/shelf/FramedVideoShelf.svelte';
+    import HeroCarouselShelf, {
+        isHeroCarouselShelf,
+    } from '~/components/jet/shelf/HeroCarouselShelf.svelte';
+    import HorizontalRuleShelf, {
+        isHorizontalRuleShelf,
+    } from '~/components/jet/shelf/HorizontalRuleShelf.svelte';
+    import InAppPurchaseLockupShelf, {
+        isInAppPurchaseLockupShelf,
+    } from '~/components/jet/shelf/InAppPurchaseLockupShelf.svelte';
+    import LargeHeroBreakoutShelf, {
+        isLargeHeroBreakoutShelf,
+    } from '~/components/jet/shelf/LargeHeroBreakoutShelf.svelte';
+    import LargeBrickShelf, {
+        isLargeBrickShelf,
+    } from '~/components/jet/shelf/LargeBrickShelf.svelte';
+    import LargeImageLockupShelf, {
+        isLargeImageLockupShelf,
+    } from '~/components/jet/shelf/LargeImageLockupShelf.svelte';
+    import LargeLockupShelf, {
+        isLargeLockupShelf,
+    } from '~/components/jet/shelf/LargeLockupShelf.svelte';
+    import LargeStoryCardShelf, {
+        isLargeStoryCardShelf,
+    } from '~/components/jet/shelf/LargeStoryCardShelf.svelte';
+    import LinkableTextShelf, {
+        isLinkableTextShelf,
+    } from '~/components/jet/shelf/LinkableTextShelf.svelte';
+    import {
+        isMarkerShelf,
+        type MarkerShelf as MarkerShelfModel,
+    } from '~/components/jet/shelf/MarkerShelf.svelte';
+    import MediumImageLockupShelf, {
+        isMediumImageLockupShelf,
+    } from '~/components/jet/shelf/MediumImageLockupShelf.svelte';
+    import MediumLockupShelf, {
+        isMediumLockupShelf,
+    } from '~/components/jet/shelf/MediumLockupShelf.svelte';
+    import MediumStoryCardShelf, {
+        isMediumStoryCardShelf,
+    } from '~/components/jet/shelf/MediumStoryCardShelf.svelte';
+    import ProductBadgeShelf, {
+        isProductBadgeShelf,
+    } from '~/components/jet/shelf/ProductBadgeShelf.svelte';
+    import PageHeaderShelf, {
+        isPageHeaderShelf,
+    } from '~/components/jet/shelf/PageHeaderShelf.svelte';
+    import ParagraphShelf, {
+        isParagraphShelf,
+    } from '~/components/jet/shelf/ParagraphShelf.svelte';
+    import PosterLockupShelf, {
+        isPosterLockupShelf,
+    } from '~/components/jet/shelf/PosterLockupShelf.svelte';
+    import ProductMediaShelf, {
+        isProductMediaShelf,
+    } from '~/components/jet/shelf/ProductMediaShelf.svelte';
+    import ProductDescriptionShelf, {
+        isProductDescriptionShelf,
+    } from '~/components/jet/shelf/ProductDescriptionShelf.svelte';
+    import ProductRatingsShelf, {
+        isProductRatingsShelf,
+    } from '~/components/jet/shelf/ProductRatingsShelf.svelte';
+    import ProductReviewShelf, {
+        isProductReviewShelf,
+    } from '~/components/jet/shelf/ProductReviewShelf.svelte';
+    import RibbonBarShelf, {
+        isRibbonBarShelf,
+    } from '~/components/jet/shelf/RibbonBarShelf.svelte';
+    import SearchLinkShelf, {
+        isSearchLinkShelf,
+    } from '~/components/jet/shelf/SearchLinkShelf.svelte';
+    import SearchResultShelf, {
+        isSearchResultShelf,
+    } from '~/components/jet/shelf/SearchResultShelf.svelte';
+    import SmallBreakoutShelf, {
+        isSmallBreakoutShelf,
+    } from '~/components/jet/shelf/SmallBreakoutShelf.svelte';
+    import SmallBrickShelf, {
+        isSmallBrickShelf,
+    } from '~/components/jet/shelf/SmallBrickShelf.svelte';
+    import SmallLockupShelf, {
+        isSmallLockupShelf,
+    } from '~/components/jet/shelf/SmallLockupShelf.svelte';
+    import SmallStoryCardShelf, {
+        isSmallStoryCardShelf,
+    } from '~/components/jet/shelf/SmallStoryCardShelf.svelte';
+    import PrivacyHeaderShelf, {
+        isPrivacyHeaderShelf,
+    } from '~/components/jet/shelf/PrivacyHeaderShelf.svelte';
+    import PrivacyFooterShelf, {
+        isPrivacyFooterShelf,
+    } from '~/components/jet/shelf/PrivacyFooterShelf.svelte';
+    import PrivacyTypeShelf, {
+        isPrivacyTypeShelf,
+    } from '~/components/jet/shelf/PrivacyTypeShelf.svelte';
+    import ProductCapabilityShelf, {
+        isProductCapabilityShelf,
+    } from '~/components/jet/shelf/ProductCapabilityShelf.svelte';
+    import ProductPageLinkShelf, {
+        isProductPageLinkShelf,
+    } from './ProductPageLinkShelf.svelte';
+    import QuoteShelf, {
+        isQuoteShelf,
+    } from '~/components/jet/shelf/QuoteShelf.svelte';
+    import ReviewsContainerShelf, {
+        isReviewsContainerShelf,
+    } from '~/components/jet/shelf/ReviewsContainerShelf.svelte';
+    import ReviewsShelf, {
+        isReviewsShelf,
+    } from '~/components/jet/shelf/ReviewsShelf.svelte';
+    import TitledParagraphShelf, {
+        isTitledParagraphShelf,
+    } from '~/components/jet/shelf/TitledParagraphShelf.svelte';
+    import TodayCardShelf, {
+        isTodayCardShelf,
+    } from '~/components/jet/shelf/TodayCardShelf.svelte';
+    import UberShelf, {
+        isUberShelf,
+    } from '~/components/jet/shelf//UberShelf.svelte';
+    import FallbackShelf, {
+        isFallbackShelf,
+    } from '~/components/jet/shelf/FallbackShelf.svelte';
+
+    interface $$Slots {
+        /**
+         * If the `shelf` is recognized to be a {@linkcode MarkerShelfModel}, this
+         * slot is rendered with the `shelf` as data rather than rendering the
+         * shelf directly.
+         *
+         * This is done because "marker" shelves need the whole "page" definition to
+         * be rendered, which is not available at this level of the UI. Rather than
+         * having to pass that data down to this level, we yield rendering back to
+         * the "parent" component that can provide that data directly.
+         */
+        'marker-shelf': {
+            shelf: MarkerShelfModel;
+        };
+    }
+
+    export let shelf: Shelf;
+</script>
+
+<!--
+@component
+Render a generic `Shelf`
+
+This component is responsible for rendering any kind of `Shelf` that
+the App Store is capable of rendering. It primarily does this by trying
+to narrow the generic `Shelf` down to a more-specific type and then
+rendering a component specifically made for it
+-->
+
+{#if isAccessibilityHeaderShelf(shelf)}
+    <AccessibilityHeaderShelf {shelf} />
+{:else if isAccessibilityFeaturesShelf(shelf)}
+    <AccessibilityFeaturesShelf {shelf} />
+{:else if isAccessibilityDeveloperLinkShelf(shelf)}
+    <AccessibilityDeveloperLinkShelf {shelf} />
+{:else if isActionShelf(shelf)}
+    <ActionShelf {shelf} />
+{:else if isAnnotationShelf(shelf)}
+    <AnnotationShelf {shelf} />
+{:else if isAppEventDetailShelf(shelf)}
+    <AppEventDetailShelf {shelf} />
+{:else if isAppPromotionShelf(shelf)}
+    <AppPromotionShelf {shelf} />
+{:else if isAppShowcaseShelf(shelf)}
+    <AppShowcaseShelf {shelf} />
+{:else if isAppTrailerLockupShelf(shelf)}
+    <AppTrailerLockupShelf {shelf} />
+{:else if isArcadeFooterShelf(shelf)}
+    <ArcadeFooterShelf {shelf} />
+{:else if isBannerShelf(shelf)}
+    <!-- a no-op until we determine if we actually want to support these banners -->
+    <!-- <BannerShelf {shelf} /> -->
+{:else if isBrickShelf(shelf)}
+    <BrickShelf {shelf} />
+{:else if isCategoryBrickShelf(shelf)}
+    <CategoryBrickShelf {shelf} />
+{:else if isEditorialCardShelf(shelf)}
+    <EditorialCardShelf {shelf} />
+{:else if isEditorialLinkShelf(shelf)}
+    <EditorialLinkShelf {shelf} />
+{:else if isFramedArtworkShelf(shelf)}
+    <FramedArtworkShelf {shelf} />
+{:else if isFramedVideoShelf(shelf)}
+    <FramedVideoShelf {shelf} />
+{:else if isHeroCarouselShelf(shelf)}
+    <HeroCarouselShelf {shelf} />
+{:else if isHorizontalRuleShelf(shelf)}
+    <HorizontalRuleShelf {shelf} />
+{:else if isInAppPurchaseLockupShelf(shelf)}
+    <InAppPurchaseLockupShelf {shelf} />
+{:else if isLargeHeroBreakoutShelf(shelf)}
+    <LargeHeroBreakoutShelf {shelf} />
+{:else if isLargeBrickShelf(shelf)}
+    <LargeBrickShelf {shelf} />
+{:else if isLargeImageLockupShelf(shelf)}
+    <LargeImageLockupShelf {shelf} />
+{:else if isLargeLockupShelf(shelf)}
+    <LargeLockupShelf {shelf} />
+{:else if isLargeStoryCardShelf(shelf)}
+    <LargeStoryCardShelf {shelf} />
+{:else if isLinkableTextShelf(shelf)}
+    <LinkableTextShelf {shelf} />
+{:else if isProductDescriptionShelf(shelf)}
+    <ProductDescriptionShelf {shelf} />
+{:else if isMediumImageLockupShelf(shelf)}
+    <MediumImageLockupShelf {shelf} />
+{:else if isMediumLockupShelf(shelf)}
+    <MediumLockupShelf {shelf} />
+{:else if isMediumStoryCardShelf(shelf)}
+    <MediumStoryCardShelf {shelf} />
+{:else if isPosterLockupShelf(shelf)}
+    <PosterLockupShelf {shelf} />
+{:else if isProductBadgeShelf(shelf)}
+    <ProductBadgeShelf {shelf} />
+{:else if isPageHeaderShelf(shelf)}
+    <PageHeaderShelf {shelf} />
+{:else if isParagraphShelf(shelf)}
+    <ParagraphShelf {shelf} />
+{:else if isPrivacyHeaderShelf(shelf)}
+    <PrivacyHeaderShelf {shelf} />
+{:else if isPrivacyFooterShelf(shelf)}
+    <PrivacyFooterShelf {shelf} />
+{:else if isPrivacyTypeShelf(shelf)}
+    <PrivacyTypeShelf {shelf} />
+{:else if isProductMediaShelf(shelf)}
+    <ProductMediaShelf {shelf} />
+{:else if isProductRatingsShelf(shelf)}
+    <ProductRatingsShelf {shelf} />
+{:else if isProductReviewShelf(shelf)}
+    <ProductReviewShelf {shelf} />
+{:else if isRibbonBarShelf(shelf)}
+    <RibbonBarShelf {shelf} />
+{:else if isSearchLinkShelf(shelf)}
+    <SearchLinkShelf {shelf} />
+{:else if isSearchResultShelf(shelf)}
+    <SearchResultShelf {shelf} />
+{:else if isSmallBreakoutShelf(shelf)}
+    <SmallBreakoutShelf {shelf} />
+{:else if isSmallBrickShelf(shelf)}
+    <SmallBrickShelf {shelf} />
+{:else if isSmallStoryCardShelf(shelf)}
+    <SmallStoryCardShelf {shelf} />
+{:else if isSmallLockupShelf(shelf)}
+    <SmallLockupShelf {shelf} />
+{:else if isProductCapabilityShelf(shelf)}
+    <ProductCapabilityShelf {shelf} />
+{:else if isProductPageLinkShelf(shelf)}
+    <ProductPageLinkShelf {shelf} />
+{:else if isQuoteShelf(shelf)}
+    <QuoteShelf {shelf} />
+{:else if isReviewsContainerShelf(shelf)}
+    <ReviewsContainerShelf {shelf} />
+{:else if isReviewsShelf(shelf)}
+    <ReviewsShelf {shelf} />
+{:else if isTodayCardShelf(shelf)}
+    <TodayCardShelf {shelf} />
+{:else if isTitledParagraphShelf(shelf)}
+    <TitledParagraphShelf {shelf} />
+{:else if isUberShelf(shelf)}
+    <UberShelf {shelf} />
+{:else if isMarkerShelf(shelf)}
+    <slot name="marker-shelf" {shelf} />
+{:else if isFallbackShelf(shelf)}
+    <FallbackShelf {shelf} />
+{/if}
diff --git a/src/components/jet/shelf/SmallBreakoutShelf.svelte b/src/components/jet/shelf/SmallBreakoutShelf.svelte
new file mode 100644
index 0000000..095cf7f
--- /dev/null
+++ b/src/components/jet/shelf/SmallBreakoutShelf.svelte
@@ -0,0 +1,32 @@
+<script lang="ts" context="module">
+    import type {
+        LargeHeroBreakout,
+        Shelf,
+        SmallBreakout,
+    } from '@jet-app/app-store/api/models';
+
+    interface SmallBreakoutShelf extends Shelf {
+        items: SmallBreakout[];
+    }
+
+    export function isSmallBreakoutShelf(
+        shelf: Shelf,
+    ): shelf is SmallBreakoutShelf {
+        const { contentType, items } = shelf;
+        return contentType === 'smallBreakout' && Array.isArray(items);
+    }
+</script>
+
+<script lang="ts">
+    import ShelfItemLayout from '~/components/ShelfItemLayout.svelte';
+    import SmallBreakoutItem from '~/components/jet/item/SmallBreakoutItem.svelte';
+    import ShelfWrapper from '~/components/Shelf/Wrapper.svelte';
+
+    export let shelf: SmallBreakoutShelf;
+</script>
+
+<ShelfWrapper {shelf}>
+    <ShelfItemLayout {shelf} gridType="Spotlight" let:item>
+        <SmallBreakoutItem {item} />
+    </ShelfItemLayout>
+</ShelfWrapper>
diff --git a/src/components/jet/shelf/SmallBrickShelf.svelte b/src/components/jet/shelf/SmallBrickShelf.svelte
new file mode 100644
index 0000000..34426cf
--- /dev/null
+++ b/src/components/jet/shelf/SmallBrickShelf.svelte
@@ -0,0 +1,26 @@
+<script lang="ts" context="module">
+    import type { Brick, Shelf } from '@jet-app/app-store/api/models';
+
+    interface SmallBrickShelf extends Shelf {
+        items: Brick[];
+    }
+
+    export function isSmallBrickShelf(shelf: Shelf): shelf is SmallBrickShelf {
+        const { contentType, items } = shelf;
+        return contentType === 'smallBrick' && Array.isArray(items);
+    }
+</script>
+
+<script lang="ts">
+    import ShelfItemLayout from '~/components/ShelfItemLayout.svelte';
+    import BrickItem from '~/components/jet/item/BrickItem.svelte';
+    import ShelfWrapper from '~/components/Shelf/Wrapper.svelte';
+
+    export let shelf: SmallBrickShelf;
+</script>
+
+<ShelfWrapper {shelf}>
+    <ShelfItemLayout {shelf} gridType="C" let:item>
+        <BrickItem {item} shouldOverlayDescription />
+    </ShelfItemLayout>
+</ShelfWrapper>
diff --git a/src/components/jet/shelf/SmallLockupShelf.svelte b/src/components/jet/shelf/SmallLockupShelf.svelte
new file mode 100644
index 0000000..e286671
--- /dev/null
+++ b/src/components/jet/shelf/SmallLockupShelf.svelte
@@ -0,0 +1,54 @@
+<script lang="ts" context="module">
+    import type { Lockup, Shelf } from '@jet-app/app-store/api/models';
+
+    interface SmallLockupShelf extends Shelf {
+        items: Lockup[];
+    }
+
+    export function isSmallLockupShelf(
+        shelf: Shelf,
+    ): shelf is SmallLockupShelf {
+        const { contentType, items } = shelf;
+        return contentType === 'smallLockup' && Array.isArray(items);
+    }
+</script>
+
+<script lang="ts">
+    import ShelfItemLayout from '~/components/ShelfItemLayout.svelte';
+    import SmallLockupItem from '~/components/jet/item/SmallLockupItem.svelte';
+    import SmallLockupWithOrdinalItem, {
+        isSmallLockupWithOrdinalItem,
+    } from '~/components/jet/item/SmallLockupWithOrdinalItem.svelte';
+    import ShelfWrapper from '~/components/Shelf/Wrapper.svelte';
+
+    export let shelf: SmallLockupShelf;
+
+    $: ({ isArticleContext = false } = shelf.presentationHints ?? {});
+    $: itemHasOrdinal = shelf.items.some((item) => item.ordinal);
+    $: gridType = (() => {
+        if (itemHasOrdinal) {
+            return 'SmallLockupWithOrdinal';
+        }
+
+        if (isArticleContext) {
+            return 'Spotlight';
+        }
+
+        return 'SmallLockup';
+    })();
+</script>
+
+<ShelfWrapper {shelf}>
+    <ShelfItemLayout
+        {shelf}
+        {gridType}
+        rowsPerColumnOverride={gridType === 'SmallLockup' ? 3 : null}
+        let:item
+    >
+        {#if isSmallLockupWithOrdinalItem(item)}
+            <SmallLockupWithOrdinalItem {item} />
+        {:else}
+            <SmallLockupItem {item} --margin-inline-end="16px" />
+        {/if}
+    </ShelfItemLayout>
+</ShelfWrapper>
diff --git a/src/components/jet/shelf/SmallStoryCardShelf.svelte b/src/components/jet/shelf/SmallStoryCardShelf.svelte
new file mode 100644
index 0000000..c1a85ad
--- /dev/null
+++ b/src/components/jet/shelf/SmallStoryCardShelf.svelte
@@ -0,0 +1,66 @@
+<script lang="ts" context="module">
+    import type { Shelf, TodayCard } from '@jet-app/app-store/api/models';
+
+    interface SmallStoryCardShelf extends Shelf {
+        contentType: 'smallStoryCard';
+        items: TodayCard[];
+    }
+
+    export function isSmallStoryCardShelf(
+        shelf: Shelf,
+    ): shelf is SmallStoryCardShelf {
+        const { contentType, items } = shelf;
+        return contentType === 'smallStoryCard' && Array.isArray(items);
+    }
+</script>
+
+<script lang="ts">
+    import SmallStoryCardWithMediaItem, {
+        isSmallStoryCardWithMediaItem,
+    } from '~/components/jet/item/SmallStoryCardWithMediaItem.svelte';
+    import SmallStoryCardWithArtworkItem, {
+        isSmallStoryCardWithArtworkItem,
+    } from '~/components/jet/item/SmallStoryCardWithArtworkItem.svelte';
+    import SmallStoryCardWithMediaRiver, {
+        isSmallStoryCardWithMediaRiver,
+    } from '~/components/jet/item/SmallStoryCardWithMediaRiver.svelte';
+    import SmallStoryCardWithMediaAppIcon, {
+        isSmallStoryCardWithMediaAppIcon,
+    } from '~/components/jet/item/SmallStoryCardWithMediaAppIcon.svelte';
+    import SmallStoryCardMediaBrandedSingleApp, {
+        isSmallStoryCardMediaBrandedSingleApp,
+    } from '~/components/jet/item/SmallStoryCardMediaBrandedSingleApp.svelte';
+    import ShelfWrapper from '~/components/Shelf/Wrapper.svelte';
+    import ShelfItemLayout from '~/components/ShelfItemLayout.svelte';
+
+    export let shelf: SmallStoryCardShelf;
+
+    $: ({ isArticleContext = false } = shelf.presentationHints ?? {});
+    $: gridType = (() => {
+        if (isArticleContext) {
+            return 'SmallStoryCard';
+        }
+
+        if (shelf.items.some(isSmallStoryCardWithArtworkItem)) {
+            return 'D';
+        }
+
+        return 'B';
+    })();
+</script>
+
+<ShelfWrapper {shelf} withBottomPadding={!isArticleContext}>
+    <ShelfItemLayout {shelf} {gridType} let:item>
+        {#if isSmallStoryCardWithMediaRiver(item)}
+            <SmallStoryCardWithMediaRiver {item} />
+        {:else if isSmallStoryCardWithMediaAppIcon(item)}
+            <SmallStoryCardWithMediaAppIcon {item} />
+        {:else if isSmallStoryCardMediaBrandedSingleApp(item)}
+            <SmallStoryCardMediaBrandedSingleApp {item} />
+        {:else if isSmallStoryCardWithMediaItem(item)}
+            <SmallStoryCardWithMediaItem {item} />
+        {:else if isSmallStoryCardWithArtworkItem(item)}
+            <SmallStoryCardWithArtworkItem {item} />
+        {/if}
+    </ShelfItemLayout>
+</ShelfWrapper>
diff --git a/src/components/jet/shelf/TitledParagraphShelf.svelte b/src/components/jet/shelf/TitledParagraphShelf.svelte
new file mode 100644
index 0000000..41c1d74
--- /dev/null
+++ b/src/components/jet/shelf/TitledParagraphShelf.svelte
@@ -0,0 +1,118 @@
+<script lang="ts" context="module">
+    import {
+        type Action,
+        type FlowAction,
+        type GenericPage,
+        type Shelf,
+        type TitledParagraph,
+        isFlowAction,
+    } from '@jet-app/app-store/api/models';
+
+    interface TitledParagraphShelf extends Shelf {
+        items: [TitledParagraph];
+    }
+
+    interface VersionHistoryPage extends FlowAction {
+        page: 'versionHistory';
+        pageData: GenericPage;
+    }
+
+    export function isTitledParagraphShelf(
+        shelf: Shelf,
+    ): shelf is TitledParagraphShelf {
+        const { contentType, items } = shelf;
+
+        return contentType === 'titledParagraph' && Array.isArray(items);
+    }
+
+    function isVersionHistoryFlowAction(
+        action: Action,
+    ): action is VersionHistoryPage {
+        return isFlowAction(action) && action.page === 'versionHistory';
+    }
+</script>
+
+<script lang="ts">
+    import { createEventDispatcher, type SvelteComponent } from 'svelte';
+    import Modal from '@amp/web-app-components/src/components/Modal/Modal.svelte';
+    import ContentModal from '~/components/jet/item/ContentModal.svelte';
+    import TitledParagraphItem, {
+        isTitledParagraphItem,
+    } from '~/components/jet/item/TitledParagraphItem.svelte';
+    import ShelfWrapper from '~/components/Shelf/Wrapper.svelte';
+    import ShelfTitle from '~/components/Shelf/Title.svelte';
+    import { getI18n } from '~/stores/i18n';
+    import { getJetPerform } from '~/jet';
+    import { VERSION_HISTORY_MODAL_ID } from '~/utils/metrics';
+
+    const perform = getJetPerform();
+    export let shelf: TitledParagraphShelf;
+
+    let modalComponent: SvelteComponent;
+    let modalTriggerElement: HTMLElement | null = null;
+
+    const { seeAllAction } = shelf;
+    const i18n = getI18n();
+    const translateFn = (key: string) => $i18n.t(key);
+    const handleModalClose = () => modalComponent.close();
+    const handleOpenModalClick = (e: Event) => {
+        modalTriggerElement = e.target as HTMLElement;
+        modalComponent?.showModal();
+        perform(destination);
+    };
+
+    const destination =
+        seeAllAction && isVersionHistoryFlowAction(seeAllAction)
+            ? seeAllAction
+            : undefined;
+
+    const pageData = destination?.pageData;
+</script>
+
+<ShelfWrapper {shelf}>
+    <div slot="title" class="title-container">
+        {#if shelf.title}
+            <button on:click={handleOpenModalClick}>
+                <ShelfTitle title={shelf.title} seeAllAction={destination} />
+            </button>
+        {/if}
+
+        {#if pageData}
+            <Modal {modalTriggerElement} bind:this={modalComponent}>
+                <ContentModal
+                    on:close={handleModalClose}
+                    title={pageData.title || null}
+                    subtitle={null}
+                    targetId={VERSION_HISTORY_MODAL_ID}
+                >
+                    <svelte:fragment slot="content">
+                        <ul>
+                            {#each pageData.shelves as shelf}
+                                {#each shelf.items || [] as item}
+                                    {#if isTitledParagraphItem(item)}
+                                        <li>
+                                            <TitledParagraphItem {item} />
+                                        </li>
+                                    {/if}
+                                {/each}
+                            {/each}
+                        </ul>
+                    </svelte:fragment>
+                </ContentModal>
+            </Modal>
+        {/if}
+    </div>
+
+    {#each shelf.items as item}
+        <TitledParagraphItem {item} />
+    {/each}
+</ShelfWrapper>
+
+<style>
+    .title-container {
+        display: flex;
+        justify-content: space-between;
+        padding-top: 16px;
+        padding-inline-end: var(--bodyGutter);
+    }
+</style>
diff --git a/src/components/jet/shelf/TodayCardShelf.svelte b/src/components/jet/shelf/TodayCardShelf.svelte
new file mode 100644
index 0000000..e872112
--- /dev/null
+++ b/src/components/jet/shelf/TodayCardShelf.svelte
@@ -0,0 +1,187 @@
+<script lang="ts" context="module">
+    import type {
+        Shelf,
+        TodayCard as TodayCardModel,
+    } from '@jet-app/app-store/api/models';
+
+    export interface TodayCardShelf extends Shelf {
+        contentType: 'todayCard';
+
+        items: TodayCardModel[];
+    }
+
+    export function isTodayCardShelf(shelf: Shelf): shelf is TodayCardShelf {
+        return shelf.contentType === 'todayCard' && Array.isArray(shelf.items);
+    }
+</script>
+
+<script lang="ts">
+    import ShelfWrapper from '~/components/Shelf/Wrapper.svelte';
+    import TodayCard from '~/components/jet/today-card/TodayCard.svelte';
+
+    import { getTodayCardLayoutConfiguration } from '~/context/today-card-layout';
+
+    export let shelf: TodayCardShelf;
+
+    $: ({
+        wrap: { shouldStretchFirstCard: shouldStretchFirstCardWrap },
+        nowrap: { shouldStretchFirstCard: shouldStretchFirstCardNoWrap },
+    } = getTodayCardLayoutConfiguration(shelf));
+</script>
+
+<ShelfWrapper {shelf}>
+    <div>
+        <div
+            class="today-card-row"
+            class:today-card-row__stretch-first-wrap={shouldStretchFirstCardWrap &&
+                shelf.items.length >= 2}
+            class:today-card-row__stretch-first-nowrap={shouldStretchFirstCardNoWrap &&
+                shelf.items.length >= 2}
+            class:today-card-row__stretch-last-wrap={!shouldStretchFirstCardWrap &&
+                shelf.items.length >= 2}
+            class:today-card-row__stretch-last-nowrap={!shouldStretchFirstCardNoWrap &&
+                shelf.items.length >= 2}
+            class:today-card-row__1-card={shelf.items.length == 1}
+            class:today-card-row__2-card={shelf.items.length == 2}
+            class:today-card-row__3-card={shelf.items.length == 3}
+            class:today-card-row__4-card={shelf.items.length >= 4}
+        >
+            {#each shelf.items.slice(0, 4) as card}
+                <div class="today-card-wrapper">
+                    <TodayCard {card} />
+                </div>
+            {/each}
+        </div>
+    </div>
+</ShelfWrapper>
+
+<style lang="scss">
+    @use '@amp/web-shared-styles/sasskit-stylekit/ac-sasskit-config';
+    @use '@amp/web-shared-styles/app/core/globalvars' as *;
+    @use 'ac-sasskit/modules/viewportcontent/core' as *;
+    @use 'amp/stylekit/core/viewports' as *;
+    @use 'amp/stylekit/core/mixins/browser-targets' as *;
+
+    @mixin stretch-card($flex-shrink: 1) {
+        aspect-ratio: unset;
+        justify-self: stretch;
+        align-self: stretch;
+        width: auto;
+        flex-shrink: $flex-shrink;
+        flex-grow: 1;
+    }
+
+    .today-card-row {
+        --card-default-width: 407px;
+        --card-default-height: 534px;
+        --card-row-gap: 16px;
+        min-width: min(var(--card-default-width), 100vw);
+        padding: 0 25px;
+        display: flex;
+        flex-direction: column;
+        gap: var(--card-row-gap);
+
+        @media (--range-medium-up) {
+            padding: 0 40px;
+            flex-direction: row;
+            flex-wrap: wrap;
+        }
+    }
+
+    .today-card-wrapper {
+        --artworkShadowInset: 0;
+        --afterShadowBorderRadius: 0px;
+        aspect-ratio: 3 / 4;
+        width: 100%;
+        flex-shrink: 0;
+        max-height: 600px;
+        min-height: 100px;
+
+        > :global(a) {
+            display: block;
+            width: 100%;
+            height: 100%;
+        }
+
+        @include target-safari {
+            @media screen and (760px <= width) {
+                height: 600px;
+                aspect-ratio: unset;
+            }
+        }
+
+        @media (--range-medium-up) {
+            width: auto;
+            height: var(--card-default-height);
+            aspect-ratio: 3 / 4;
+        }
+    }
+
+    @media (--range-medium-up) {
+        .today-card-row__1-card .today-card-wrapper {
+            @include stretch-card;
+        }
+    }
+
+    @media (--range-medium-up) and (--range-large-down) {
+        .today-card-row__2-card {
+            &.today-card-row__stretch-first-wrap
+                .today-card-wrapper:first-child,
+            &.today-card-row__stretch-last-wrap .today-card-wrapper:last-child {
+                @include stretch-card;
+            }
+        }
+
+        .today-card-row__3-card {
+            .today-card-wrapper:first-child {
+                flex-basis: 100%;
+
+                @include stretch-card(0);
+            }
+
+            &.today-card-row__stretch-first-wrap
+                .today-card-wrapper:nth-child(2),
+            &.today-card-row__stretch-last-wrap .today-card-wrapper:last-child {
+                @include stretch-card;
+            }
+        }
+    }
+
+    @media (--range-medium-up) {
+        .today-card-row__4-card {
+            &.today-card-row__stretch-first-wrap
+                .today-card-wrapper:first-child,
+            &.today-card-row__stretch-first-wrap .today-card-wrapper:last-child,
+            &.today-card-row__stretch-last-wrap
+                .today-card-wrapper:nth-child(2),
+            &.today-card-row__stretch-last-wrap
+                .today-card-wrapper:nth-child(3) {
+                flex-basis: calc(
+                    100% - var(--card-default-width) - var(--card-row-gap)
+                );
+
+                @include stretch-card;
+            }
+        }
+    }
+
+    @media (--range-xlarge-up) {
+        .today-card-row__2-card {
+            &.today-card-row__stretch-first-nowrap
+                .today-card-wrapper:first-child,
+            &.today-card-row__stretch-last-nowrap
+                .today-card-wrapper:last-child {
+                @include stretch-card;
+            }
+        }
+
+        .today-card-row__3-card {
+            &.today-card-row__stretch-first-nowrap
+                .today-card-wrapper:first-child,
+            &.today-card-row__stretch-last-nowrap
+                .today-card-wrapper:last-child {
+                @include stretch-card;
+            }
+        }
+    }
+</style>
diff --git a/src/components/jet/shelf/UberShelf.svelte b/src/components/jet/shelf/UberShelf.svelte
new file mode 100644
index 0000000..6cdf004
--- /dev/null
+++ b/src/components/jet/shelf/UberShelf.svelte
@@ -0,0 +1,40 @@
+<script lang="ts" context="module">
+    import type { Shelf, Uber } from '@jet-app/app-store/api/models';
+
+    interface UberShelf extends Shelf {
+        contentType: 'uber';
+        items: [Uber];
+    }
+
+    export function isUberShelf(shelf: Shelf): shelf is UberShelf {
+        return shelf.contentType === 'uber' && Array.isArray(shelf.items);
+    }
+</script>
+
+<script lang="ts">
+    import Artwork from '~/components/Artwork.svelte';
+    import ShelfWrapper from '~/components/Shelf/Wrapper.svelte';
+
+    export let shelf: UberShelf;
+
+    $: uber = shelf.items[0];
+    $: artwork = uber.artwork;
+</script>
+
+{#if artwork}
+    <ShelfWrapper withPaddingTop={false} withBottomPadding={false}>
+        <div class="artwork-container">
+            <Artwork {artwork} profile="uber-shelf" />
+        </div>
+    </ShelfWrapper>
+{/if}
+
+<style>
+    .artwork-container {
+        border-bottom: 1px solid var(--systemQuaternary-onDark);
+
+        @media (--range-xlarge-only) {
+            border: 1px solid var(--systemQuaternary-onDark);
+        }
+    }
+</style>
-- 
cgit v1.2.3