diff --git a/AGENTS.md b/AGENTS.md
index 937ea293..f57ae01c 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -51,6 +51,20 @@ Repository-wide baseline. Child files add local constraints; the nearest child f
 - Validate package and implementation changes in dependency order: source package typecheck/tests,
   source package build, `pnpm build:pkgs` when implementations consume it, implementation install,
   then downstream checks.
+- Treat package build outputs as shared mutable state across all SDKs. Never manually run `build`,
+  `clean`, `build:pkgs`, implementation install, `size:report`, `size:check`, or any command that
+  reads, writes, removes, or packages generated artifacts in parallel with another package command
+  that can touch the same package or an upstream/downstream package in its dependency graph.
+- `size:report` and `size:check` read generated package output and may depend on emitted chunks from
+  upstream packages. Serialize them with any build, clean, package, or size command for the package
+  being measured and every upstream or downstream SDK that can consume its output.
+- Do not manually parallelize validation for packages with dependency edges between them. Prefer the
+  aggregate workspace command, such as `pnpm build`, `pnpm build:pkgs`, or `pnpm size:check`, when
+  the full graph is involved because pnpm can schedule workspace dependencies. When running narrowed
+  package commands yourself, run each dependency level to completion before starting dependents.
+- Manual parallel commands are only appropriate for read-only inspection or checks that are
+  demonstrably independent and do not clean, rebuild, package, install, or measure generated package
+  artifacts.
 - For native, React Native, or E2E validation, use the implementation-specific runner documented in
   the nearest `AGENTS.md`, package scripts, or README before deciding the test cannot run locally.
   Missing attached devices, simulators, emulators, mock servers, or Metro are setup states; many
diff --git a/implementations/web-sdk/README.md b/implementations/web-sdk/README.md
index 76fc1ff0..bf1197f3 100644
--- a/implementations/web-sdk/README.md
+++ b/implementations/web-sdk/README.md
@@ -27,8 +27,9 @@ This is a reference implementation for the
 ## What this demonstrates
 
 Use this implementation when you need the smallest browser example for the Web SDK without a
-framework layer. It demonstrates a static HTML integration, local mock API usage, Web SDK asset
-copying, and Playwright coverage for browser-side optimization and tracking behavior.
+framework layer. It demonstrates a static HTML integration, Web Components entry rendering, local
+mock API usage, Web SDK asset copying, and Playwright coverage for browser-side optimization,
+tracking, live updates, consent gating, and offline recovery behavior.
 
 ## CDA locale handling
 
diff --git a/implementations/web-sdk/e2e/displays-identified-user-variants.spec.ts b/implementations/web-sdk/e2e/displays-identified-user-variants.spec.ts
index 7bd0f6f5..d5f83b50 100644
--- a/implementations/web-sdk/e2e/displays-identified-user-variants.spec.ts
+++ b/implementations/web-sdk/e2e/displays-identified-user-variants.spec.ts
@@ -1,4 +1,8 @@
-import { expect, test } from '@playwright/test'
+import { expect, test, type Locator, type Page } from '@playwright/test'
+
+function getRenderedEntries(page: Page): Locator {
+  return page.locator('#auto-observed, #manually-observed')
+}
 
 test.describe('identified user', () => {
   test.beforeEach(async ({ page }) => {
@@ -23,42 +27,50 @@ test.describe('identified user', () => {
   })
 
   test('displays common variants', async ({ page }) => {
+    const renderedEntries = getRenderedEntries(page)
+
     await expect(
-      page.getByText(
+      renderedEntries.getByText(
         'This is a merge tag content entry that displays the visitor\'s continent "EU" embedded within the text.',
       ),
     ).toBeVisible()
 
     await expect(
-      page.getByText('This is a variant content entry for visitors from Europe.'),
+      renderedEntries.getByText('This is a variant content entry for visitors from Europe.'),
     ).toBeVisible()
 
     await expect(
-      page.getByText('This is a variant content entry for visitors using a desktop browser.'),
+      renderedEntries.getByText(
+        'This is a variant content entry for visitors using a desktop browser.',
+      ),
     ).toBeVisible()
   })
 
   test('displays identified user variants', async ({ page }) => {
-    await expect(page.getByText('This is a level 0 nested variant entry.')).toBeVisible()
+    const renderedEntries = getRenderedEntries(page)
 
-    await expect(page.getByText('This is a level 1 nested variant entry.')).toBeVisible()
+    await expect(renderedEntries.getByText('This is a level 0 nested variant entry.')).toBeVisible()
 
-    await expect(page.getByText('This is a level 2 nested variant entry.')).toBeVisible()
+    await expect(renderedEntries.getByText('This is a level 1 nested variant entry.')).toBeVisible()
+
+    await expect(renderedEntries.getByText('This is a level 2 nested variant entry.')).toBeVisible()
 
     await expect(
-      page.getByText('This is a variant content entry for return visitors.'),
+      renderedEntries.getByText('This is a variant content entry for return visitors.'),
     ).toBeVisible()
 
     await expect(
-      page.getByText('This is a variant content entry for an A/B/C experiment: B'),
+      renderedEntries.getByText('This is a variant content entry for an A/B/C experiment: B'),
     ).toBeVisible()
 
     await expect(
-      page.getByText('This is a variant content entry for visitors with a custom event.'),
+      renderedEntries.getByText(
+        'This is a variant content entry for visitors with a custom event.',
+      ),
     ).toBeVisible()
 
     await expect(
-      page.getByText('This is a variant content entry for identified users.'),
+      renderedEntries.getByText('This is a variant content entry for identified users.'),
     ).toBeVisible()
   })
 })
diff --git a/implementations/web-sdk/e2e/displays-unidentified-user-variants.spec.ts b/implementations/web-sdk/e2e/displays-unidentified-user-variants.spec.ts
index 59496cf9..d2e88921 100644
--- a/implementations/web-sdk/e2e/displays-unidentified-user-variants.spec.ts
+++ b/implementations/web-sdk/e2e/displays-unidentified-user-variants.spec.ts
@@ -1,4 +1,8 @@
-import { expect, test } from '@playwright/test'
+import { expect, test, type Locator, type Page } from '@playwright/test'
+
+function getRenderedEntries(page: Page): Locator {
+  return page.locator('#auto-observed, #manually-observed')
+}
 
 test.describe('unidentified user', () => {
   test.beforeEach(async ({ page }) => {
@@ -7,42 +11,58 @@ test.describe('unidentified user', () => {
   })
 
   test('displays common variants', async ({ page }) => {
+    const renderedEntries = getRenderedEntries(page)
+
     await expect(
-      page.getByText(
+      renderedEntries.getByText(
         'This is a merge tag content entry that displays the visitor\'s continent "EU" embedded within the text.',
       ),
     ).toBeVisible()
 
     await expect(
-      page.getByText('This is a variant content entry for visitors from Europe.'),
+      renderedEntries.getByText('This is a variant content entry for visitors from Europe.'),
     ).toBeVisible()
 
     await expect(
-      page.getByText('This is a variant content entry for visitors using a desktop browser.'),
+      renderedEntries.getByText(
+        'This is a variant content entry for visitors using a desktop browser.',
+      ),
     ).toBeVisible()
   })
 
   test('displays unidentified user variants', async ({ page }) => {
-    await expect(page.getByText('This is a level 0 nested baseline entry.')).toBeVisible()
+    const renderedEntries = getRenderedEntries(page)
 
-    await expect(page.getByText('This is a level 1 nested baseline entry.')).toBeVisible()
+    await expect(
+      renderedEntries.getByText('This is a level 0 nested baseline entry.'),
+    ).toBeVisible()
 
-    await expect(page.getByText('This is a level 2 nested baseline entry.')).toBeVisible()
+    await expect(
+      renderedEntries.getByText('This is a level 1 nested baseline entry.'),
+    ).toBeVisible()
 
-    await expect(page.getByText('This is a variant content entry for new visitors.')).toBeVisible()
+    await expect(
+      renderedEntries.getByText('This is a level 2 nested baseline entry.'),
+    ).toBeVisible()
+
+    await expect(
+      renderedEntries.getByText('This is a variant content entry for new visitors.'),
+    ).toBeVisible()
 
     await expect(
-      page.getByText('This is a variant content entry for an A/B/C experiment: B'),
+      renderedEntries.getByText('This is a variant content entry for an A/B/C experiment: B'),
     ).toBeVisible()
 
     await expect(
-      page.getByText(
+      renderedEntries.getByText(
         'This is a baseline content entry for all visitors with or without a custom event.',
       ),
     ).toBeVisible()
 
     await expect(
-      page.getByText('This is a baseline content entry for all identified or unidentified users.'),
+      renderedEntries.getByText(
+        'This is a baseline content entry for all identified or unidentified users.',
+      ),
     ).toBeVisible()
   })
 })
diff --git a/implementations/web-sdk/e2e/entry-click-tracking.spec.ts b/implementations/web-sdk/e2e/entry-click-tracking.spec.ts
index a5f3efc2..2d5a86e4 100644
--- a/implementations/web-sdk/e2e/entry-click-tracking.spec.ts
+++ b/implementations/web-sdk/e2e/entry-click-tracking.spec.ts
@@ -10,7 +10,7 @@ const clickScenarios: ClickScenario[] = [
   {
     name: 'direct entry button',
     entryTestId: 'entry-click-direct-entry',
-    clickTargetTestId: 'entry-click-direct-entry',
+    clickTargetTestId: 'content-4ib0hsHWoSOnCVdDkizE8d',
   },
   {
     name: 'clickable descendant button',
@@ -65,8 +65,8 @@ test.describe('entry click tracking', () => {
       page,
     }) => {
       for (const scenario of clickScenarios) {
-        const entryLocator = page.getByTestId(scenario.entryTestId)
-        await expect(entryLocator, `${scenario.name}: entry should render`).toBeVisible()
+        const target = page.getByTestId(scenario.clickTargetTestId)
+        await expect(target, `${scenario.name}: click target should render`).toBeVisible()
 
         await expect
           .poll(async () => await readResolvedEntryId(page, scenario.entryTestId), {
@@ -75,7 +75,6 @@ test.describe('entry click tracking', () => {
           .not.toEqual('')
 
         const resolvedEntryId = await readResolvedEntryId(page, scenario.entryTestId)
-        const target = page.getByTestId(scenario.clickTargetTestId)
 
         await target.scrollIntoViewIfNeeded()
         await target.click()
diff --git a/implementations/web-sdk/e2e/entry-hover-tracking.spec.ts b/implementations/web-sdk/e2e/entry-hover-tracking.spec.ts
index f3ffec17..c6992b83 100644
--- a/implementations/web-sdk/e2e/entry-hover-tracking.spec.ts
+++ b/implementations/web-sdk/e2e/entry-hover-tracking.spec.ts
@@ -10,7 +10,7 @@ const hoverScenarios: HoverScenario[] = [
   {
     name: 'direct entry button',
     entryTestId: 'entry-click-direct-entry',
-    hoverTargetTestId: 'entry-click-direct-entry',
+    hoverTargetTestId: 'content-4ib0hsHWoSOnCVdDkizE8d',
   },
   {
     name: 'hoverable descendant button',
@@ -20,7 +20,7 @@ const hoverScenarios: HoverScenario[] = [
   {
     name: 'inline entry nested in clickable ancestor',
     entryTestId: 'entry-click-ancestor-entry',
-    hoverTargetTestId: 'entry-click-ancestor-entry',
+    hoverTargetTestId: 'content-2Z2WLOx07InSewC3LUB3eX',
   },
 ]
 
@@ -81,10 +81,9 @@ test.describe('entry hover tracking', () => {
       const hoverButtons = getHoverButtons(page)
 
       for (const scenario of hoverScenarios) {
-        const entryLocator = page.getByTestId(scenario.entryTestId)
-        await expect(entryLocator, `${scenario.name}: entry should render`).toBeVisible()
-
         const target = page.getByTestId(scenario.hoverTargetTestId)
+        await expect(target, `${scenario.name}: hover target should render`).toBeVisible()
+
         const baselineHoverEventCount = await hoverButtons.count()
 
         await target.scrollIntoViewIfNeeded()
diff --git a/implementations/web-sdk/e2e/entry-view-tracking.spec.ts b/implementations/web-sdk/e2e/entry-view-tracking.spec.ts
index e49de6b3..d61004a0 100644
--- a/implementations/web-sdk/e2e/entry-view-tracking.spec.ts
+++ b/implementations/web-sdk/e2e/entry-view-tracking.spec.ts
@@ -1,4 +1,4 @@
-import { expect, test } from '@playwright/test'
+import { expect, test, type Locator, type Page } from '@playwright/test'
 
 const variantEntryTexts: Record<string, string> = {
   '1JAU028vQ7v6nB2swl3NBo': 'This is a level 0 nested baseline entry.',
@@ -16,6 +16,12 @@ const variantEntryTexts: Record<string, string> = {
     'This is a baseline content entry for all identified or unidentified users.',
 }
 
+const MANUAL_VIEW_BASELINE_ENTRY_ID = '5XHssysWUDECHzKLzoIsg1'
+
+function getRenderedEntries(page: Page): Locator {
+  return page.locator('#auto-observed, #manually-observed')
+}
+
 test.describe('entry view tracking', () => {
   test.describe('without consent', () => {
     test.beforeEach(async ({ page }) => {
@@ -31,8 +37,10 @@ test.describe('entry view tracking', () => {
     })
 
     test('entry view events have not been emitted', async ({ page }) => {
+      const renderedEntries = getRenderedEntries(page)
+
       for (const entryText of Object.values(variantEntryTexts)) {
-        const element = page.getByText(entryText)
+        const element = renderedEntries.getByText(entryText)
 
         await element.scrollIntoViewIfNeeded()
 
@@ -60,12 +68,14 @@ test.describe('entry view tracking', () => {
     })
 
     test('entry view events have been emitted', async ({ page }) => {
+      const renderedEntries = getRenderedEntries(page)
+
       for (const entryId of Object.keys(variantEntryTexts)) {
         const entryText = variantEntryTexts[entryId]
 
         if (!entryText) continue
 
-        const element = page.getByText(entryText)
+        const element = renderedEntries.getByText(entryText)
 
         await element.scrollIntoViewIfNeeded()
 
@@ -97,5 +107,27 @@ test.describe('entry view tracking', () => {
 
       expect(new Set(viewIds).size).toEqual(viewIds.length)
     })
+
+    test('manual view example emits one view event without auto double tracking', async ({
+      page,
+    }) => {
+      const manualEntry = page.getByTestId('manual-view-entry')
+
+      await expect(manualEntry).toHaveAttribute('track-views', 'false')
+      await expect(manualEntry).toHaveAttribute('data-ctfl-track-views', 'false')
+      await expect(manualEntry).toHaveAttribute('data-ctfl-entry-id', /.+/)
+
+      const resolvedEntryId = await manualEntry.getAttribute('data-ctfl-entry-id')
+      expect(resolvedEntryId).not.toBeNull()
+
+      await page.getByTestId(`content-${MANUAL_VIEW_BASELINE_ENTRY_ID}`).scrollIntoViewIfNeeded()
+      await page.clock.fastForward('02:00')
+
+      await expect(
+        page.locator(
+          `#event-stream li button[data-component-id="${resolvedEntryId}"][data-view-id]`,
+        ),
+      ).toHaveCount(1)
+    })
   })
 })
diff --git a/implementations/web-sdk/e2e/events-consent-gating.spec.ts b/implementations/web-sdk/e2e/events-consent-gating.spec.ts
new file mode 100644
index 00000000..a026a567
--- /dev/null
+++ b/implementations/web-sdk/e2e/events-consent-gating.spec.ts
@@ -0,0 +1,41 @@
+import { type Page, expect, test } from '@playwright/test'
+
+async function scrollThroughEntries(page: Page): Promise<void> {
+  const entries = page.locator('[data-testid^="content-"]')
+  const entryCount = await entries.count()
+
+  for (let index = 0; index < entryCount; index += 1) {
+    await entries.nth(index).scrollIntoViewIfNeeded()
+  }
+}
+
+test.describe('consent gating', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/')
+    await page.waitForLoadState('domcontentloaded')
+    await expect(page.getByRole('heading', { name: 'Utilities' })).toBeVisible()
+  })
+
+  test('allows page events without consent but gates entry view events', async ({ page }) => {
+    const pageEvents = page.locator('[data-testid^="event-page-"]')
+    const viewEvents = page.locator('[data-testid^="event-view-"]')
+
+    await expect(pageEvents.first()).toBeVisible()
+
+    await scrollThroughEntries(page)
+    await expect(viewEvents).toHaveCount(0)
+  })
+
+  test('emits entry view events after consent is accepted', async ({ page }) => {
+    const pageEvents = page.locator('[data-testid^="event-page-"]')
+    const viewEvents = page.locator('[data-testid^="event-view-"]')
+
+    await expect(pageEvents.first()).toBeVisible()
+
+    await page.getByTestId('consent-button').click()
+    await expect(page.getByTestId('consent-status')).toHaveText('Consent: true')
+    await scrollThroughEntries(page)
+
+    await expect.poll(async () => await viewEvents.count()).toBeGreaterThan(0)
+  })
+})
diff --git a/implementations/web-sdk/e2e/flag-view-tracking.spec.ts b/implementations/web-sdk/e2e/flag-view-tracking.spec.ts
index 64780b23..428c3f2d 100644
--- a/implementations/web-sdk/e2e/flag-view-tracking.spec.ts
+++ b/implementations/web-sdk/e2e/flag-view-tracking.spec.ts
@@ -10,22 +10,43 @@ test.describe('flag view tracking', () => {
   test.beforeEach(async ({ page }) => {
     await page.goto('/')
     await page.waitForLoadState('domcontentloaded')
-    await page.getByRole('button', { name: 'Accept Consent' }).click()
+    await expect(page.getByRole('heading', { name: 'Utilities' })).toBeVisible()
   })
 
-  test('flag access emits a flag view event', async ({ page }) => {
+  test('does not emit flag view events without consent', async ({ page }) => {
     const flagAccessEvents = getFlagAccessEvents(page)
-    const baselineFlagEventCount = await flagAccessEvents.count()
+
+    await expect(flagAccessEvents).toHaveCount(0)
 
     await page.getByRole('button', { name: 'Identify' }).click()
     await expect(page.getByRole('button', { name: 'Reset Profile' })).toBeVisible()
 
+    await expect(flagAccessEvents).toHaveCount(0)
+  })
+
+  test('emits flag view events after consent and profile updates', async ({ page }) => {
+    const flagAccessEvents = getFlagAccessEvents(page)
+    const baselineFlagEventCount = await flagAccessEvents.count()
+
+    await page.getByRole('button', { name: 'Accept Consent' }).click()
+
     await expect
       .poll(async () => await flagAccessEvents.count(), {
-        message: 'flag access should append a flag view event in the event stream',
+        message: 'consented flag subscription should append a flag view event',
       })
       .toBeGreaterThan(baselineFlagEventCount)
 
+    const afterConsentFlagEventCount = await flagAccessEvents.count()
+
+    await page.getByRole('button', { name: 'Identify' }).click()
+    await expect(page.getByRole('button', { name: 'Reset Profile' })).toBeVisible()
+
+    await expect
+      .poll(async () => await flagAccessEvents.count(), {
+        message: 'profile updates should append additional flag view events',
+      })
+      .toBeGreaterThan(afterConsentFlagEventCount)
+
     const latestFlagAccessEvent = flagAccessEvents.last()
 
     await expect(latestFlagAccessEvent).toHaveText('component')
diff --git a/implementations/web-sdk/e2e/live-updates.spec.ts b/implementations/web-sdk/e2e/live-updates.spec.ts
new file mode 100644
index 00000000..fa1671ef
--- /dev/null
+++ b/implementations/web-sdk/e2e/live-updates.spec.ts
@@ -0,0 +1,133 @@
+import { type Locator, type Page, expect, test } from '@playwright/test'
+
+async function getEntryId(locator: Locator): Promise<string> {
+  const text = await locator.innerText()
+  return text.replace('Entry: ', '').trim()
+}
+
+async function identify(page: Page): Promise<void> {
+  await page.getByTestId('live-updates-identify-button').click()
+  await expect(page.getByTestId('identified-status')).toHaveText('Yes')
+}
+
+function getPreviewPanelToggle(page: Page): Locator {
+  return page.locator('ctfl-opt-preview-panel').locator('button.toggle-drawer')
+}
+
+test.describe('live updates behavior', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.context().clearCookies()
+    await page.goto('/')
+    await page.waitForLoadState('domcontentloaded')
+    await expect(page.getByRole('heading', { name: 'Utilities' })).toBeVisible()
+    await expect(page.getByTestId('preview-panel-status')).toHaveText('Closed')
+    await expect(page.getByTestId('global-live-updates-status')).toHaveText('OFF')
+    await expect(page.getByTestId('identified-status')).toHaveText('No')
+    await expect(page.locator('ctfl-opt-preview-panel')).toHaveCount(1)
+    await expect(page.getByTestId('live-updates-examples')).toBeVisible()
+    await expect
+      .poll(async () => {
+        const text = await page.getByTestId('selected-optimizations-count').innerText()
+        const value = Number.parseInt(text.replace('Selected Optimizations: ', ''), 10)
+        return Number.isNaN(value) ? 0 : value
+      })
+      .toBeGreaterThan(0)
+  })
+
+  test('default behavior locks to first value when global live updates is OFF', async ({
+    page,
+  }) => {
+    const initialDefaultEntryId = await getEntryId(page.getByTestId('entry-id-live-default'))
+
+    await identify(page)
+
+    await expect(page.getByTestId('entry-id-live-default')).toHaveText(
+      `Entry: ${initialDefaultEntryId}`,
+    )
+  })
+
+  test('global live updates ON updates default component while locked component stays fixed', async ({
+    page,
+  }) => {
+    await page.getByTestId('toggle-global-live-updates-button').click()
+    await expect(page.getByTestId('global-live-updates-status')).toHaveText('ON')
+
+    const initialDefaultEntryId = await getEntryId(page.getByTestId('entry-id-live-default'))
+    const initialLockedEntryId = await getEntryId(page.getByTestId('entry-id-live-locked'))
+
+    await identify(page)
+
+    await expect
+      .poll(async () => await getEntryId(page.getByTestId('entry-id-live-default')))
+      .not.toBe(initialDefaultEntryId)
+    await expect(page.getByTestId('entry-id-live-locked')).toHaveText(
+      `Entry: ${initialLockedEntryId}`,
+    )
+  })
+
+  test('per-component live-updates=true updates even when global live updates is OFF', async ({
+    page,
+  }) => {
+    const initialLiveEntryId = await getEntryId(page.getByTestId('entry-id-live-enabled'))
+
+    await identify(page)
+
+    await expect
+      .poll(async () => await getEntryId(page.getByTestId('entry-id-live-enabled')))
+      .not.toBe(initialLiveEntryId)
+  })
+
+  test('preview-panel override enables updates for locked components', async ({ page }) => {
+    const initialLockedEntryId = await getEntryId(page.getByTestId('entry-id-live-locked'))
+
+    await getPreviewPanelToggle(page).click()
+    await expect(page.getByTestId('preview-panel-status')).toHaveText('Open')
+
+    await identify(page)
+
+    await expect
+      .poll(async () => await getEntryId(page.getByTestId('entry-id-live-locked')))
+      .not.toBe(initialLockedEntryId)
+  })
+
+  test('screen controls toggle global live updates', async ({ page }) => {
+    await expect(page.getByTestId('global-live-updates-status')).toHaveText('OFF')
+    await page.getByTestId('toggle-global-live-updates-button').click()
+    await expect(page.getByTestId('global-live-updates-status')).toHaveText('ON')
+    await page.getByTestId('toggle-global-live-updates-button').click()
+    await expect(page.getByTestId('global-live-updates-status')).toHaveText('OFF')
+  })
+
+  test('built-in preview panel toggle opens and closes the panel', async ({ page }) => {
+    await expect(page.getByTestId('preview-panel-status')).toHaveText('Closed')
+    await getPreviewPanelToggle(page).click()
+    await expect(page.getByTestId('preview-panel-status')).toHaveText('Open')
+    await getPreviewPanelToggle(page).click()
+    await expect(page.getByTestId('preview-panel-status')).toHaveText('Closed')
+  })
+
+  test('screen controls identify and reset user', async ({ page }) => {
+    await expect(page.getByTestId('identified-status')).toHaveText('No')
+    await page.getByTestId('live-updates-identify-button').click()
+    await expect(page.getByTestId('identified-status')).toHaveText('Yes')
+    await page.getByTestId('live-updates-reset-button').click()
+    await expect(page.getByTestId('identified-status')).toHaveText('No')
+  })
+
+  test('renders default, enabled, and locked examples', async ({ page }) => {
+    await expect(page.getByTestId('live-updates-default')).toBeVisible()
+    await expect(page.getByTestId('live-updates-enabled')).toBeVisible()
+    await expect(page.getByTestId('live-updates-locked')).toBeVisible()
+
+    await expect(page.getByTestId('content-live-default')).toBeVisible()
+    await expect(page.getByTestId('content-live-enabled')).toBeVisible()
+    await expect(page.getByTestId('content-live-locked')).toBeVisible()
+
+    await expect(page.getByTestId('entry-text-live-default')).toBeVisible()
+    await expect(page.getByTestId('entry-text-live-enabled')).toBeVisible()
+    await expect(page.getByTestId('entry-text-live-locked')).toBeVisible()
+    await expect(page.getByTestId('entry-id-live-default')).toBeVisible()
+    await expect(page.getByTestId('entry-id-live-enabled')).toBeVisible()
+    await expect(page.getByTestId('entry-id-live-locked')).toBeVisible()
+  })
+})
diff --git a/implementations/web-sdk/e2e/offline-queue-recovery.spec.ts b/implementations/web-sdk/e2e/offline-queue-recovery.spec.ts
new file mode 100644
index 00000000..f8317a81
--- /dev/null
+++ b/implementations/web-sdk/e2e/offline-queue-recovery.spec.ts
@@ -0,0 +1,88 @@
+import { type BrowserContext, type Page, expect, test } from '@playwright/test'
+
+function parseCounterValue(text: string): number {
+  const match = /:\s*(\d+)/.exec(text)
+  return match?.[1] ? Number.parseInt(match[1], 10) : 0
+}
+
+async function getRawEventsCount(page: Page): Promise<number> {
+  const text = await page.getByTestId('raw-events-count').innerText()
+  return parseCounterValue(text)
+}
+
+async function expectRawEventsToIncrease(page: Page, baselineCount: number): Promise<void> {
+  await expect.poll(async () => await getRawEventsCount(page)).toBeGreaterThan(baselineCount)
+}
+
+async function setOffline(context: BrowserContext, offline: boolean): Promise<void> {
+  await context.setOffline(offline)
+}
+
+async function waitForBaseUi(page: Page): Promise<void> {
+  await expect(page.getByRole('heading', { name: 'Utilities' })).toBeVisible()
+  await expect(page.getByTestId('events-count')).toBeVisible()
+  await expect(page.getByTestId('raw-events-count')).toBeVisible()
+  await expect(page.getByTestId('live-updates-identify-button')).toBeVisible()
+}
+
+test.describe('offline queue and recovery', () => {
+  test.beforeEach(async ({ context, page }) => {
+    await context.clearCookies()
+    await setOffline(context, false)
+    await page.goto('/')
+    await page.waitForLoadState('domcontentloaded')
+    await waitForBaseUi(page)
+  })
+
+  test.afterEach(async ({ context }) => {
+    await setOffline(context, false)
+  })
+
+  test('continues tracking consented custom events while offline', async ({ context, page }) => {
+    await page.getByTestId('consent-button').click()
+    const baselineCount = await getRawEventsCount(page)
+
+    await setOffline(context, true)
+    await page.getByTestId('manual-track-button').click()
+    await expectRawEventsToIncrease(page, baselineCount)
+  })
+
+  test('recovers gracefully when network is restored', async ({ context, page }) => {
+    await setOffline(context, true)
+    await page.getByTestId('live-updates-identify-button').click()
+    await expect(page.getByTestId('identified-status')).toHaveText('No')
+
+    await setOffline(context, false)
+    await expect(page.getByTestId('live-updates-reset-button')).toBeVisible()
+    await expect(page.getByTestId('identified-status')).toHaveText('Yes')
+  })
+
+  test('remains stable across rapid network state changes', async ({ context, page }) => {
+    await setOffline(context, true)
+    await setOffline(context, false)
+    await setOffline(context, true)
+    await setOffline(context, false)
+
+    await waitForBaseUi(page)
+    await page.getByTestId('consent-button').click()
+    const baselineCount = await getRawEventsCount(page)
+    await page.getByTestId('manual-track-button').click()
+    await expectRawEventsToIncrease(page, baselineCount)
+  })
+
+  test('queues identify event offline and updates identified state when online', async ({
+    context,
+    page,
+  }) => {
+    const baselineCount = await getRawEventsCount(page)
+
+    await setOffline(context, true)
+    await page.getByTestId('live-updates-identify-button').click()
+    await expectRawEventsToIncrease(page, baselineCount)
+    await expect(page.getByTestId('identified-status')).toHaveText('No')
+
+    await setOffline(context, false)
+    await expect(page.getByTestId('live-updates-reset-button')).toBeVisible()
+    await expect(page.getByTestId('identified-status')).toHaveText('Yes')
+  })
+})
diff --git a/implementations/web-sdk/public/index.html b/implementations/web-sdk/public/index.html
index c047de18..4fd96627 100644
--- a/implementations/web-sdk/public/index.html
+++ b/implementations/web-sdk/public/index.html
@@ -6,6 +6,7 @@
     <title>ContentfulOptimization Web SDK Vanilla JS Implementation E2E Test</title>
     <script src="https://cdn.jsdelivr.net/npm/contentful@latest/dist/contentful.browser.min.js"></script>
     <script src="/dist/contentful-optimization-web.umd.js"></script>
+    <script src="/dist/contentful-optimization-web-components.umd.js"></script>
     <script src="/dist/contentful-optimization-web-preview-panel.umd.js"></script>
     <style>
       * {
@@ -84,8 +85,8 @@
         grid-auto-rows: minmax(75dvh, auto);
         margin-block-end: 2rem;
 
-        > div,
-        > button {
+        > button,
+        > ctfl-optimized-entry > .entry-content {
           display: grid;
           grid-gap: inherit;
           grid-auto-rows: inherit;
@@ -96,12 +97,24 @@
           overflow: visible;
         }
 
+        > ctfl-optimized-entry > .entry-content--inline {
+          display: inline;
+          width: auto;
+          height: auto;
+          padding: 0;
+          background: transparent;
+        }
+
         > button {
           appearance: none;
           border: 0;
           text-align: left;
         }
 
+        > button .entry-content {
+          display: inline;
+        }
+
         div.nested {
           display: grid;
           grid-gap: inherit;
@@ -120,70 +133,123 @@
   <body>
     <h1>ContentfulOptimization Web SDK Vanilla JS Implementation E2E Test</h1>
 
-    <main>
-      <section id="utility-panel">
-        <h2>Utilites</h2>
-
-        <span>
-          <button id="consent">Accept Consent</button>
-          <button id="unconsent">Reject Consent</button>
-        </span>
-        |
-        <span>
-          <button id="identify">Identify</button>
-          <button id="unidentify">Reset Profile</button>
-        </span>
-      </section>
-
-      <section>
-        <h2>Entries</h2>
-
-        <div id="auto-observed">
-          <div data-ctfl-entry-id="1JAU028vQ7v6nB2swl3NBo">
-            <!-- Nested Entry -->
-          </div>
-          <div data-ctfl-entry-id="1MwiFl4z7gkwqGYdvCmr8c">
-            <!-- Merge Tag "Rich Text" Entry -->
+    <ctfl-optimization-root id="optimization-root">
+      <main>
+        <section id="utility-panel">
+          <h2>Utilities</h2>
+
+          <span>
+            <button id="consent" data-testid="consent-button">Accept Consent</button>
+            <button id="unconsent" data-testid="unconsent-button">Reject Consent</button>
+          </span>
+          |
+          <span>
+            <button id="identify" data-testid="live-updates-identify-button">Identify</button>
+            <button id="unidentify" data-testid="live-updates-reset-button">Reset Profile</button>
+          </span>
+          |
+          <button id="toggle-global-live-updates" data-testid="toggle-global-live-updates-button">
+            Global: OFF
+          </button>
+          |
+          <button id="manual-track" data-testid="manual-track-button">Send Track Event</button>
+
+          <p data-testid="consent-status">Consent: undefined</p>
+          <p data-testid="selected-optimizations-count">Selected Optimizations: 0</p>
+          <p data-testid="identified-status">No</p>
+          <p data-testid="global-live-updates-status">OFF</p>
+          <p data-testid="preview-panel-status">Closed</p>
+        </section>
+
+        <section>
+          <h2>Live Updates</h2>
+
+          <div id="live-updates-examples" data-testid="live-updates-examples">
+            <section data-testid="live-updates-default">
+              <h3>Default (inherits global setting)</h3>
+              <ctfl-optimized-entry
+                data-entry-id="2Z2WLOx07InSewC3LUB3eX"
+                data-live-updates-prefix="live-default"
+              ></ctfl-optimized-entry>
+            </section>
+
+            <section data-testid="live-updates-enabled">
+              <h3>Always On (live-updates=true)</h3>
+              <ctfl-optimized-entry
+                data-entry-id="2Z2WLOx07InSewC3LUB3eX"
+                data-live-updates-prefix="live-enabled"
+                live-updates="true"
+              ></ctfl-optimized-entry>
+            </section>
+
+            <section data-testid="live-updates-locked">
+              <h3>Locked (live-updates=false)</h3>
+              <ctfl-optimized-entry
+                data-entry-id="2Z2WLOx07InSewC3LUB3eX"
+                data-live-updates-prefix="live-locked"
+                live-updates="false"
+              ></ctfl-optimized-entry>
+            </section>
           </div>
-          <button
-            type="button"
-            data-testid="entry-click-direct-entry"
-            data-e2e-click-scenario="direct"
-            data-ctfl-hover-duration-update-interval-ms="1000"
-            data-ctfl-entry-id="4ib0hsHWoSOnCVdDkizE8d"
-          ></button>
-          <div
-            data-testid="entry-click-descendant-entry"
-            data-e2e-click-scenario="descendant"
-            data-ctfl-hover-duration-update-interval-ms="1000"
-            data-ctfl-entry-id="xFwgG3oNaOcjzWiGe4vXo"
-          ></div>
-          <button type="button" data-testid="entry-click-ancestor-wrapper">
-            <span
-              data-testid="entry-click-ancestor-entry"
-              data-e2e-click-scenario="ancestor"
-              data-e2e-entry-inline="true"
+        </section>
+
+        <section>
+          <h2>Entries</h2>
+
+          <div id="auto-observed">
+            <ctfl-optimized-entry data-entry-id="1JAU028vQ7v6nB2swl3NBo">
+              <!-- Nested Entry -->
+            </ctfl-optimized-entry>
+            <ctfl-optimized-entry data-entry-id="1MwiFl4z7gkwqGYdvCmr8c">
+              <!-- Merge Tag "Rich Text" Entry -->
+            </ctfl-optimized-entry>
+            <ctfl-optimized-entry
+              data-testid="entry-click-direct-entry"
+              data-e2e-click-scenario="direct"
+              data-ctfl-clickable="true"
               data-ctfl-hover-duration-update-interval-ms="1000"
-              data-ctfl-entry-id="2Z2WLOx07InSewC3LUB3eX"
-            ></span>
-          </button>
-        </div>
+              data-entry-id="4ib0hsHWoSOnCVdDkizE8d"
+            ></ctfl-optimized-entry>
+            <ctfl-optimized-entry
+              data-testid="entry-click-descendant-entry"
+              data-e2e-click-scenario="descendant"
+              data-ctfl-hover-duration-update-interval-ms="1000"
+              data-entry-id="xFwgG3oNaOcjzWiGe4vXo"
+            ></ctfl-optimized-entry>
+            <button type="button" data-testid="entry-click-ancestor-wrapper">
+              <ctfl-optimized-entry
+                data-testid="entry-click-ancestor-entry"
+                data-e2e-click-scenario="ancestor"
+                data-e2e-entry-inline="true"
+                data-ctfl-hover-duration-update-interval-ms="1000"
+                data-entry-id="2Z2WLOx07InSewC3LUB3eX"
+              ></ctfl-optimized-entry>
+            </button>
+            <ctfl-optimized-entry data-entry-id="6zqoWXyiSrf0ja7I2WGtYj"></ctfl-optimized-entry>
+            <ctfl-optimized-entry data-entry-id="7pa5bOx8Z9NmNcr7mISvD"></ctfl-optimized-entry>
+          </div>
 
-        <div id="manually-observed">
-          <div data-entry-id="5XHssysWUDECHzKLzoIsg1"></div>
-          <div data-entry-id="6zqoWXyiSrf0ja7I2WGtYj"></div>
-          <div data-entry-id="7pa5bOx8Z9NmNcr7mISvD"></div>
-        </div>
-      </section>
+          <div id="manually-observed">
+            <ctfl-optimized-entry
+              data-testid="manual-view-entry"
+              data-manual-view-tracking="true"
+              data-entry-id="5XHssysWUDECHzKLzoIsg1"
+              track-views="false"
+            ></ctfl-optimized-entry>
+          </div>
+        </section>
 
-      <section>
-        <div id="event-stream-panel">
-          <h2>Event Stream</h2>
+        <section>
+          <div id="event-stream-panel">
+            <h2>Event Stream</h2>
 
-          <ol id="event-stream"></ol>
-        </div>
-      </section>
-    </main>
+            <ol id="event-stream"></ol>
+            <p data-testid="events-count">Events: 0</p>
+            <p data-testid="raw-events-count">Raw Events: 0</p>
+          </div>
+        </section>
+      </main>
+    </ctfl-optimization-root>
 
     <template id="event-dialog">
       <li>
@@ -235,22 +301,36 @@ <h2>Event Stream</h2>
         nonce: 'nonce-string',
       })
 
-      // Emit page event
-      contentfulOptimization.page()
+      ContentfulOptimizationWebComponents.defineContentfulOptimizationElements()
+
+      const optimizationRoot = document.getElementById('optimization-root')
 
       /* --- Utility Functionality (for E2E) --- */
 
       const consent = document.getElementById('consent')
       const unconsent = document.getElementById('unconsent')
+      const consentStatus = document.querySelector('[data-testid="consent-status"]')
+      const selectedOptimizationsCount = document.querySelector(
+        '[data-testid="selected-optimizations-count"]',
+      )
+      const identifiedStatus = document.querySelector('[data-testid="identified-status"]')
+      const globalLiveUpdatesStatus = document.querySelector(
+        '[data-testid="global-live-updates-status"]',
+      )
+      const previewPanelStatus = document.querySelector('[data-testid="preview-panel-status"]')
+      const toggleGlobalLiveUpdates = document.getElementById('toggle-global-live-updates')
+      const manualTrack = document.getElementById('manual-track')
 
-      function toggleConsent(consented = false) {
-        if (consented) {
+      function toggleConsent(consented) {
+        if (consented === true) {
           consent.setAttribute('style', 'display: none;')
           unconsent.removeAttribute('style')
         } else {
           consent.removeAttribute('style')
           unconsent.setAttribute('style', 'display: none;')
         }
+
+        consentStatus.innerText = `Consent: ${String(consented)}`
       }
 
       consent.addEventListener('click', () => contentfulOptimization.consent(true))
@@ -267,6 +347,8 @@ <h2>Event Stream</h2>
           identify.removeAttribute('style')
           unidentify.setAttribute('style', 'display: none;')
         }
+
+        identifiedStatus.innerText = identified ? 'Yes' : 'No'
       }
 
       identify.addEventListener('click', async () => {
@@ -280,10 +362,47 @@ <h2>Event Stream</h2>
         // Ensure we have a new profile after resetting the old one
         await contentfulOptimization.page()
       })
+      toggleGlobalLiveUpdates.addEventListener('click', () => {
+        optimizationRoot.liveUpdates = !optimizationRoot.liveUpdates
+      })
+      manualTrack.addEventListener('click', () => {
+        contentfulOptimization.track({
+          event: 'vanilla_web_sdk_custom_event',
+          properties: { source: 'implementations/web-sdk/public/index.html' },
+        })
+      })
+
+      optimizationRoot.subscribeOptimizationContext((context) => {
+        const globalLiveUpdatesLabel = context.rootLiveUpdatesEnabled ? 'ON' : 'OFF'
+
+        toggleGlobalLiveUpdates.innerText = `Global: ${globalLiveUpdatesLabel}`
+        globalLiveUpdatesStatus.innerText = globalLiveUpdatesLabel
+        previewPanelStatus.innerText = context.isPreviewPanelOpen ? 'Open' : 'Closed'
+      })
 
       const eventStream = document.querySelector('#event-stream')
+      const eventsCount = document.querySelector('[data-testid="events-count"]')
+      const rawEventsCount = document.querySelector('[data-testid="raw-events-count"]')
       const viewEventDialogs = new Map()
       const hoverEventDialogs = new Map()
+      let rawEventCount = 0
+      let currentConsent
+      let currentProfile
+      let flagSubscription
+
+      function syncFlagSubscription() {
+        const shouldSubscribe = currentConsent === true && currentProfile !== undefined
+
+        if (!shouldSubscribe) {
+          flagSubscription?.unsubscribe()
+          flagSubscription = undefined
+          return
+        }
+
+        if (flagSubscription) return
+
+        flagSubscription = contentfulOptimization.states.flag('boolean').subscribe(() => undefined)
+      }
 
       function isViewHeartbeatEvent(event) {
         return (
@@ -303,7 +422,27 @@ <h2>Event Stream</h2>
         )
       }
 
-      function updateEventDialog(button, pre, title, details) {
+      function getEventTestId(details) {
+        if (typeof details?.viewId === 'string') return `event-view-${details.viewId}`
+        if (typeof details?.hoverId === 'string') {
+          return `event-${details.type}-hover-${details.hoverId}`
+        }
+        if (typeof details?.componentId === 'string') {
+          return `event-${details.type}-${details.componentId}`
+        }
+        if (details?.type === 'page') {
+          return `event-page-${details.messageId ?? eventStream.children.length}`
+        }
+
+        return `event-${details?.type ?? 'unknown'}-${details?.messageId ?? eventStream.children.length}`
+      }
+
+      function updateEventCounters() {
+        eventsCount.innerText = `Events: ${eventStream.children.length}`
+        rawEventsCount.innerText = `Raw Events: ${rawEventCount}`
+      }
+
+      function updateEventDialog(item, button, pre, title, details) {
         const viewId = typeof details?.viewId === 'string' ? details.viewId : undefined
         const hoverId = typeof details?.hoverId === 'string' ? details.hoverId : undefined
         const componentId =
@@ -313,6 +452,7 @@ <h2>Event Stream</h2>
 
         button.innerText = title
         button.dataset.testid = details.componentId ?? details?.properties?.url ?? details.messageId
+        item.dataset.testid = getEventTestId(details)
 
         if (viewId) button.dataset.viewId = viewId
         else delete button.dataset.viewId
@@ -332,15 +472,16 @@ <h2>Event Stream</h2>
       function createEventDialog(title, details) {
         const template = document.querySelector('#event-dialog')
         const clone = template.content.cloneNode(true)
+        const item = clone.querySelector('li')
         const dialog = clone.querySelector('dialog')
         const button = clone.querySelector('button')
         const pre = clone.querySelector('pre')
 
         button.commandForElement = dialog
         button.command = 'show-modal'
-        updateEventDialog(button, pre, title, details)
+        updateEventDialog(item, button, pre, title, details)
 
-        return { fragment: clone, button, pre }
+        return { fragment: clone, item, button, pre }
       }
 
       /* --- Standard Rendering Code --- */
@@ -379,7 +520,69 @@ <h2>Event Stream</h2>
         }
       }
 
-      function decorateClickableEntryScenario(element) {
+      const manualViewEntryElements = new Map()
+      const configuredOptimizedEntryElements = new WeakSet()
+      const entryCache = new Map()
+
+      function enableManualViewTracking(element, entry, selectedOptimization) {
+        if (!entry?.sys?.id || element.dataset.manualViewTracking !== 'true') return
+
+        contentfulOptimization.tracking.clearElement('views', element)
+        manualViewEntryElements.set(element, [entry, selectedOptimization])
+
+        if (currentConsent !== true) return
+
+        contentfulOptimization.tracking.enableElement('views', element, {
+          data: {
+            entryId: entry.sys.id,
+            optimizationId: selectedOptimization?.experienceId,
+            sticky: selectedOptimization?.sticky,
+            variantIndex: selectedOptimization?.variantIndex,
+          },
+        })
+      }
+
+      function getEntryText(entry) {
+        return typeof entry.fields?.text === 'string' ? entry.fields.text : 'No content'
+      }
+
+      function getBaselineEntryId(element, fallbackEntry) {
+        return element.dataset.manualEntryId ?? element.dataset.entryId ?? fallbackEntry.sys.id
+      }
+
+      function renderLiveUpdatesEntry(element, entry) {
+        const prefix = element.dataset.liveUpdatesPrefix
+        if (!prefix) return false
+
+        const text = getEntryText(entry)
+        const content = document.createElement('div')
+        const textElement = document.createElement('p')
+        const idElement = document.createElement('p')
+
+        content.className = 'entry-content'
+        content.dataset.testid = `content-${prefix}`
+        textElement.dataset.testid = `entry-text-${prefix}`
+        textElement.ariaLabel = `${text} [Entry: ${entry.sys.id}]`
+        textElement.innerText = text
+        idElement.dataset.testid = `entry-id-${prefix}`
+        idElement.innerText = `Entry: ${entry.sys.id}`
+
+        content.append(textElement, idElement)
+        element.replaceChildren(content)
+
+        return true
+      }
+
+      function createNestedOptimizedEntry(nestedEntry) {
+        const nestedElement = document.createElement('ctfl-optimized-entry')
+
+        nestedElement.dataset.entryId = nestedEntry.sys.id
+        configureOptimizedEntryElement(nestedElement, nestedEntry)
+
+        return nestedElement
+      }
+
+      function decorateClickableEntryScenario(element, content) {
         if (element.dataset.e2eClickScenario !== 'descendant') return
 
         const button = document.createElement('button')
@@ -387,172 +590,155 @@ <h2>Event Stream</h2>
         button.dataset.testid = 'entry-click-descendant-button'
         button.innerText = 'Trigger entry click tracking from descendant button'
 
-        element.appendChild(button)
+        content.appendChild(button)
       }
 
-      let renderEntriesPromise = Promise.resolve()
+      function renderResolvedEntry(element, rawEntry, entry, selectedOptimization) {
+        if (renderLiveUpdatesEntry(element, entry)) return
 
-      // Render optimized entries
-      async function renderOptimizedEntry(rawEntry, element, autoObserve = true) {
-        const { entry, selectedOptimization } =
-          contentfulOptimization.resolveOptimizedEntry(rawEntry)
         const renderInline =
-          element.dataset.e2eEntryInline === 'true' || element.tagName === 'BUTTON'
+          element.dataset.e2eEntryInline === 'true' || element.closest('button') !== null
+        const content = document.createElement(renderInline ? 'span' : 'div')
+        const baselineEntryId = getBaselineEntryId(element, rawEntry)
+
+        content.className = renderInline ? 'entry-content entry-content--inline' : 'entry-content'
+        content.dataset.testid = `content-${baselineEntryId}`
 
         if (isRichText(entry.fields?.text)) {
-          const div = document.createElement('div')
-          simpleRenderRichText(entry.fields.text, div)
-          element.replaceChildren(div)
+          simpleRenderRichText(entry.fields.text, content)
         } else {
           const textElement = document.createElement(renderInline ? 'span' : 'p')
-          textElement.innerText = entry.fields?.text
-          element.replaceChildren(textElement)
+          textElement.innerText = getEntryText(entry)
+          content.appendChild(textElement)
         }
 
         if (entry.fields?.nested) {
-          const div = document.createElement('div')
-          div.className = 'nested'
+          const nested = document.createElement('div')
+          nested.className = 'nested'
 
           for (const nestedEntry of entry.fields.nested) {
-            await renderOptimizedEntry(nestedEntry, div, autoObserve)
+            nested.appendChild(createNestedOptimizedEntry(nestedEntry))
           }
 
-          element.appendChild(div)
+          content.appendChild(nested)
         }
 
-        decorateClickableEntryScenario(element)
+        element.replaceChildren(content)
+        decorateClickableEntryScenario(element, content)
 
-        // NOTE: Elements that are not auto-observed may still be auto-tracked (see below)
-        if (autoObserve) {
-          // The `data-ctfl-entry-id` data attribute is required for auto-observing
-          element.dataset.ctflEntryId = entry.sys?.id
+        enableManualViewTracking(element, entry, selectedOptimization)
+      }
 
-          // Store the original optimized baseline ID so later rerenders do not resolve a variant entry
-          if (rawEntry.fields.nt_experiences) element.dataset.ctflBaselineId = rawEntry.sys?.id
+      function handleOptimizedEntryResolved(event) {
+        if (event.target !== event.currentTarget) return
 
-          // Other standard auto-observing attributes are optional
-          if (selectedOptimization) {
-            element.dataset.ctflOptimizationId = selectedOptimization?.experienceId
-            element.dataset.ctflSticky = selectedOptimization?.sticky
-            element.dataset.ctflVariantIndex = selectedOptimization?.variantIndex
-          }
+        const element = event.currentTarget
+        const rawEntry = element.baselineEntry
+
+        if (!rawEntry) return
+
+        renderResolvedEntry(
+          element,
+          rawEntry,
+          event.detail.entry,
+          event.detail.selectedOptimization,
+        )
+      }
+
+      function configureOptimizedEntryElement(element, baselineEntry) {
+        if (!configuredOptimizedEntryElements.has(element)) {
+          element.addEventListener('ctfl-entry-resolved', handleOptimizedEntryResolved)
+          configuredOptimizedEntryElements.add(element)
         }
 
-        return [entry, selectedOptimization]
+        element.baselineEntry = baselineEntry
       }
 
-      // Get the optimized entry to render
-      async function addOptimizedEntry(entryId, element, autoObserve = true) {
-        let rawEntry
+      async function fetchEntry(entryId) {
+        if (entryCache.has(entryId)) return entryCache.get(entryId)
 
         try {
-          rawEntry = await contentfulClient.getEntry(entryId, {
+          const entry = await contentfulClient.getEntry(entryId, {
             include: 10,
             locale: APP_LOCALE,
           })
-        } catch (error) {
-          console.warn(`Entry "${entryId}" could not be found in the current space`)
-          return []
-        }
-
-        return renderOptimizedEntry(rawEntry, element, autoObserve)
-      }
-
-      const manuallyObservedEntryElements = new Map()
 
-      // Manually observe view elements for auto-tracking
-      function manuallyObserveEntryElement(element, entry, selectedOptimization) {
-        if (!entry?.sys?.id) return
+          entryCache.set(entryId, entry)
 
-        contentfulOptimization.tracking.clearElement('views', element)
-
-        // Manually observe the element for auto-tracking (does not use `data-ctfl-*` attributes)
-        contentfulOptimization.tracking.enableElement('views', element, {
-          data: {
-            // The `entryId` property is required for auto-tracking
-            entryId: entry.sys.id,
-            optimizationId: selectedOptimization?.experienceId,
-            sticky: selectedOptimization?.sticky,
-            variantIndex: selectedOptimization?.variantIndex,
-          },
-        })
+          return entry
+        } catch (error) {
+          console.warn(`Entry "${entryId}" could not be found in the current space`)
 
-        manuallyObservedEntryElements.set(element.dataset.entryId, [entry, selectedOptimization])
+          return undefined
+        }
       }
 
-      // Render all the entries
-      async function renderEntries() {
-        const autoObservedElements = Array.from(document.querySelectorAll('[data-ctfl-entry-id]'))
-
-        await Promise.all(
-          autoObservedElements.map(async (element) => {
-            await addOptimizedEntry(
-              element.dataset.ctflBaselineId ?? element.dataset.ctflEntryId,
-              element,
-              true,
-            )
-          }),
+      async function initializeOptimizedEntries() {
+        const optimizedEntryElements = Array.from(
+          document.querySelectorAll('ctfl-optimized-entry[data-entry-id]'),
         )
 
-        const manuallyObservedElements = Array.from(document.querySelectorAll('[data-entry-id]'))
-
         await Promise.all(
-          manuallyObservedElements.map(async (element) => {
-            const [entry, selectedOptimization] = await addOptimizedEntry(
-              element.dataset.entryId,
-              element,
-              false,
-            )
+          optimizedEntryElements.map(async (element) => {
+            const entryId = element.dataset.entryId
+            if (!entryId) return
 
+            const entry = await fetchEntry(entryId)
             if (!entry) return
 
-            manuallyObserveEntryElement(element, entry, selectedOptimization)
+            configureOptimizedEntryElement(element, entry)
           }),
         )
       }
 
-      function scheduleRenderEntries() {
-        renderEntriesPromise = renderEntriesPromise
-          .catch(() => undefined)
-          .then(() => renderEntries())
-
-        return renderEntriesPromise
-      }
+      void initializeOptimizedEntries()
 
       // Subscribe to consent state
       contentfulOptimization.states.consent.subscribe(async (consent) => {
+        currentConsent = consent
         toggleConsent(consent)
+        syncFlagSubscription()
 
-        if (consent)
-          document.querySelectorAll('[data-entry-id]').forEach((element) => {
-            const settings = manuallyObservedEntryElements.get(element.dataset.entryId)
-
-            if (!settings) return
-
+        manualViewEntryElements.forEach((settings, element) => {
+          if (consent) {
             const [entry, selectedOptimization] = settings
 
-            manuallyObserveEntryElement(element, entry, selectedOptimization)
-          })
+            enableManualViewTracking(element, entry, selectedOptimization)
+            return
+          }
+
+          contentfulOptimization.tracking.clearElement('views', element)
+        })
       })
 
       // Subscribe to the event stream
       contentfulOptimization.states.eventStream.subscribe((event) => {
         if (!event) return
+        rawEventCount += 1
 
         if (isViewHeartbeatEvent(event)) {
           const existingDialog = viewEventDialogs.get(event.viewId)
 
           if (existingDialog) {
-            updateEventDialog(existingDialog.button, existingDialog.pre, event.type, event)
+            updateEventDialog(
+              existingDialog.item,
+              existingDialog.button,
+              existingDialog.pre,
+              event.type,
+              event,
+            )
+            updateEventCounters()
             return
           }
 
           const newDialog = createEventDialog(event.type, event)
           viewEventDialogs.set(event.viewId, {
+            item: newDialog.item,
             button: newDialog.button,
             pre: newDialog.pre,
           })
           eventStream.appendChild(newDialog.fragment)
+          updateEventCounters()
           return
         }
 
@@ -560,40 +746,47 @@ <h2>Event Stream</h2>
           const existingDialog = hoverEventDialogs.get(event.hoverId)
 
           if (existingDialog) {
-            updateEventDialog(existingDialog.button, existingDialog.pre, event.type, event)
+            updateEventDialog(
+              existingDialog.item,
+              existingDialog.button,
+              existingDialog.pre,
+              event.type,
+              event,
+            )
+            updateEventCounters()
             return
           }
 
           const newDialog = createEventDialog(event.type, event)
           hoverEventDialogs.set(event.hoverId, {
+            item: newDialog.item,
             button: newDialog.button,
             pre: newDialog.pre,
           })
           eventStream.appendChild(newDialog.fragment)
+          updateEventCounters()
           return
         }
 
         eventStream.appendChild(createEventDialog(event.type, event).fragment)
+        updateEventCounters()
       })
 
       // Subscribe to selectedOptimizations state
-      contentfulOptimization.states.selectedOptimizations.subscribe(
-        async (selectedOptimizations) => {
-          if (!selectedOptimizations) return
-
-          void scheduleRenderEntries()
-        },
-      )
+      contentfulOptimization.states.selectedOptimizations.subscribe((selectedOptimizations) => {
+        selectedOptimizationsCount.innerText = `Selected Optimizations: ${
+          Array.isArray(selectedOptimizations) ? selectedOptimizations.length : 0
+        }`
+      })
 
       contentfulOptimization.states.profile.subscribe((profile) => {
-        if (!profile) return
-
-        // Emit and log flag access
-        const booleanFlag = contentfulOptimization.getFlag('boolean')
-        console.log('Flag "boolean" value:', booleanFlag)
-
-        toggleIdentity(profile.traits && Object.keys(profile.traits).length)
+        currentProfile = profile
+        toggleIdentity(Boolean(profile?.traits && Object.keys(profile.traits).length))
+        syncFlagSubscription()
       })
+
+      // Emit the initial page event after subscribers are attached so E2E surfaces reflect it.
+      void contentfulOptimization.page()
     </script>
   </body>
 </html>
diff --git a/lib/build-tools/README.md b/lib/build-tools/README.md
index 959c76a2..97a35abf 100644
--- a/lib/build-tools/README.md
+++ b/lib/build-tools/README.md
@@ -15,6 +15,10 @@ Use this package when maintaining shared build helper behavior, declaration outp
 bundle-size measurement. Package-specific bundle-size budgets belong in each package's
 `package.json` under `buildTools.bundleSize.gzipBudgets`.
 
+Bundle-size checks measure configured files as entrypoints. For JavaScript files, the reported `raw`
+and `gzip` values include local static chunks reachable from the configured file in `dist/`, so
+split ESM output is budgeted by effective entrypoint cost rather than by the tiny facade file alone.
+
 ## Commands
 
 Run commands from the monorepo root:
diff --git a/lib/build-tools/src/bundleSize.test.ts b/lib/build-tools/src/bundleSize.test.ts
index 065ab9ac..c7790024 100644
--- a/lib/build-tools/src/bundleSize.test.ts
+++ b/lib/build-tools/src/bundleSize.test.ts
@@ -35,12 +35,14 @@ describe('checkBundleSize', () => {
 
       expect(results).toEqual([
         {
+          files: ['index.mjs'],
           file: 'index.mjs',
           rawBytes: Buffer.byteLength(indexContents),
           gzipBytes: indexGzipBytes,
           budgetBytes: indexGzipBytes,
         },
         {
+          files: ['logger.mjs'],
           file: 'logger.mjs',
           rawBytes: Buffer.byteLength(loggerContents),
           gzipBytes: loggerGzipBytes,
@@ -60,6 +62,65 @@ describe('checkBundleSize', () => {
     }
   })
 
+  it('includes local chunks reachable from configured JavaScript entries', () => {
+    const packageDir = mkdtempSync(join(tmpdir(), 'build-tools-bundle-size-'))
+    const distDir = join(packageDir, 'dist')
+    const indexContents =
+      'import"./shared.mjs";export{value}from"./feature.mjs";require("./cjs.cjs");'
+    const sharedContents = 'export const shared = "shared";'
+    const featureContents = 'import "./shared.mjs"; export const value = "feature";'
+    const cjsContents = 'require("./leaf.js"); exports.value = "cjs";'
+    const leafContents = 'export const leaf = "leaf";'
+    const expectedRawBytes =
+      Buffer.byteLength(indexContents) +
+      Buffer.byteLength(sharedContents) +
+      Buffer.byteLength(featureContents) +
+      Buffer.byteLength(cjsContents) +
+      Buffer.byteLength(leafContents)
+    const expectedGzipBytes =
+      gzipSync(Buffer.from(indexContents), { level: 9 }).byteLength +
+      gzipSync(Buffer.from(sharedContents), { level: 9 }).byteLength +
+      gzipSync(Buffer.from(featureContents), { level: 9 }).byteLength +
+      gzipSync(Buffer.from(cjsContents), { level: 9 }).byteLength +
+      gzipSync(Buffer.from(leafContents), { level: 9 }).byteLength
+
+    try {
+      mkdirSync(distDir)
+      writeFileSync(
+        join(packageDir, 'package.json'),
+        JSON.stringify({
+          buildTools: {
+            bundleSize: {
+              gzipBudgets: {
+                'index.mjs': expectedGzipBytes,
+              },
+            },
+          },
+        }),
+      )
+      writeFileSync(join(distDir, 'index.mjs'), indexContents)
+      writeFileSync(join(distDir, 'shared.mjs'), sharedContents)
+      writeFileSync(join(distDir, 'feature.mjs'), featureContents)
+      writeFileSync(join(distDir, 'cjs.cjs'), cjsContents)
+      writeFileSync(join(distDir, 'leaf.js'), leafContents)
+
+      const { failures, results } = checkBundleSize({ packageDir })
+
+      expect(results).toEqual([
+        {
+          budgetBytes: expectedGzipBytes,
+          file: 'index.mjs',
+          files: ['index.mjs', 'shared.mjs', 'feature.mjs', 'cjs.cjs', 'leaf.js'],
+          gzipBytes: expectedGzipBytes,
+          rawBytes: expectedRawBytes,
+        },
+      ])
+      expect(failures).toEqual([])
+    } finally {
+      rmSync(packageDir, { force: true, recursive: true })
+    }
+  })
+
   it('suppresses failures in report-only mode', () => {
     const packageDir = mkdtempSync(join(tmpdir(), 'build-tools-bundle-size-'))
     const distDir = join(packageDir, 'dist')
diff --git a/lib/build-tools/src/bundleSize.ts b/lib/build-tools/src/bundleSize.ts
index 40f2c7b6..b20ebf61 100644
--- a/lib/build-tools/src/bundleSize.ts
+++ b/lib/build-tools/src/bundleSize.ts
@@ -1,8 +1,9 @@
-import { readFileSync } from 'node:fs'
-import { resolve } from 'node:path'
+import { existsSync, readFileSync } from 'node:fs'
+import { dirname, extname, relative, resolve, sep } from 'node:path'
 import { gzipSync } from 'node:zlib'
 
 export interface BundleSizeResult {
+  files: string[]
   file: string
   rawBytes: number
   gzipBytes: number
@@ -25,6 +26,11 @@ interface BuildToolsBundleSizeConfig {
   gzipBudgets: Record<string, number>
 }
 
+const LOCAL_IMPORT_PATTERN =
+  /\bimport\s*(?:[^'"]*?from\s*)?['"]([^'"]+)['"]|\bexport\s*[^'"]*?from\s*['"]([^'"]+)['"]|\brequire\(\s*['"]([^'"]+)['"]\s*\)/g
+const PARSEABLE_EXTENSIONS = new Set(['.cjs', '.js', '.mjs'])
+const RESOLVABLE_EXTENSIONS = ['', '.mjs', '.cjs', '.js', '.css', '.json']
+
 function isRecord(value: unknown): value is Record<string, unknown> {
   return typeof value === 'object' && value !== null
 }
@@ -74,9 +80,101 @@ function readGzipBudgets(packageDir: string): Map<string, number> {
   return new Map(Object.entries(bundleSizeConfig.gzipBudgets))
 }
 
+function isWithinDirectory(filePath: string, directory: string): boolean {
+  const relativePath = relative(directory, filePath)
+  return relativePath !== '' && !relativePath.startsWith('..') && !relativePath.includes(`..${sep}`)
+}
+
+function resolveLocalImport(
+  fromFilePath: string,
+  specifier: string,
+  distDir: string,
+): string | undefined {
+  if (!specifier.startsWith('./') && !specifier.startsWith('../')) {
+    return undefined
+  }
+
+  const resolvedPath = resolve(dirname(fromFilePath), specifier)
+  if (!isWithinDirectory(resolvedPath, distDir)) {
+    return undefined
+  }
+
+  for (const extension of RESOLVABLE_EXTENSIONS) {
+    const candidate = `${resolvedPath}${extension}`
+    if (existsSync(candidate)) {
+      return candidate
+    }
+  }
+
+  return undefined
+}
+
+function readLocalImportSpecifiers(contents: string): string[] {
+  const specifiers: string[] = []
+
+  for (const match of contents.matchAll(LOCAL_IMPORT_PATTERN)) {
+    const specifier = match.slice(1).find(Boolean)
+    if (specifier) {
+      specifiers.push(specifier)
+    }
+  }
+
+  return specifiers
+}
+
+function collectReachableFiles(entryFilePath: string, distDir: string): string[] {
+  const reachableFiles: string[] = []
+  const visitedFiles = new Set<string>()
+
+  function visit(filePath: string): void {
+    if (visitedFiles.has(filePath)) {
+      return
+    }
+
+    visitedFiles.add(filePath)
+    reachableFiles.push(filePath)
+
+    if (!PARSEABLE_EXTENSIONS.has(extname(filePath))) {
+      return
+    }
+
+    const contents = readFileSync(filePath, 'utf8')
+
+    for (const specifier of readLocalImportSpecifiers(contents)) {
+      const importedFilePath = resolveLocalImport(filePath, specifier, distDir)
+
+      if (importedFilePath !== undefined) {
+        visit(importedFilePath)
+      }
+    }
+  }
+
+  visit(entryFilePath)
+
+  return reachableFiles
+}
+
+function measureFiles(files: string[]): {
+  rawBytes: number
+  gzipBytes: number
+} {
+  return files.reduce(
+    (accumulator, file) => {
+      const contents = readFileSync(file)
+
+      return {
+        gzipBytes: accumulator.gzipBytes + gzipSync(contents, { level: 9 }).byteLength,
+        rawBytes: accumulator.rawBytes + contents.byteLength,
+      }
+    },
+    { gzipBytes: 0, rawBytes: 0 },
+  )
+}
+
 /**
- * Measures configured bundle files in a package's `dist/` directory and optionally enforces
- * configured gzip budgets from `package.json`.
+ * Measures configured bundle entries in a package's `dist/` directory and optionally enforces
+ * configured gzip budgets from `package.json`. JavaScript entries include local static chunks
+ * reachable from the configured entry file so ESM chunking cannot hide entrypoint cost.
  *
  * @param options - Package directory and reporting mode.
  * @returns Measured results and any budget failures.
@@ -95,12 +193,13 @@ export function checkBundleSize(options: CheckBundleSizeOptions = {}): {
 
   for (const [file, budgetBytes] of gzipBudgets) {
     const filePath = resolve(distDir, file)
-    const contents = readFileSync(filePath)
-    const { byteLength: gzipBytes } = gzipSync(contents, { level: 9 })
+    const reachableFiles = collectReachableFiles(filePath, distDir)
+    const { gzipBytes, rawBytes } = measureFiles(reachableFiles)
 
     results.push({
+      files: reachableFiles.map((reachableFile) => relative(distDir, reachableFile)),
       file,
-      rawBytes: contents.byteLength,
+      rawBytes,
       gzipBytes,
       budgetBytes,
     })
diff --git a/packages/AGENTS.md b/packages/AGENTS.md
index a21e0a68..526074af 100644
--- a/packages/AGENTS.md
+++ b/packages/AGENTS.md
@@ -42,3 +42,15 @@ For pnpm-managed packages with matching scripts, use `pnpm --filter <package-nam
   install or tests.
 - Broaden to affected downstream SDKs or reference implementations for shared behavior, public
   contracts, preview behavior, event flow, or platform integration changes.
+- Schedule package validation by the workspace dependency graph. Do not manually run SDK `build`,
+  `clean`, `build:pkgs`, implementation install, `size:report`, or `size:check` commands in parallel
+  across packages when one package can consume another package's generated output.
+- Run upstream SDK build, package, and size commands to completion before starting downstream SDK
+  build, package, or size commands. When the affected graph is broad or uncertain, prefer the
+  aggregate workspace command so pnpm owns the dependency scheduling.
+- Common package order is: `@contentful/optimization-api-schemas`, then
+  `@contentful/optimization-api-client`, then `@contentful/optimization-core`, then leaf packages
+  such as `@contentful/optimization-node`, `@contentful/optimization-react-native`,
+  `@contentful/optimization-web`, and `@contentful/optimization-js-bridge`. Web dependents such as
+  `@contentful/optimization-react-web` and `@contentful/optimization-web-preview-panel` run after
+  `@contentful/optimization-web`.
diff --git a/packages/react-native-sdk/package.json b/packages/react-native-sdk/package.json
index 11db71e8..b5702f20 100644
--- a/packages/react-native-sdk/package.json
+++ b/packages/react-native-sdk/package.json
@@ -121,7 +121,7 @@
     "bundleSize": {
       "gzipBudgets": {
         "index.cjs": 27000,
-        "index.mjs": 25500,
+        "index.mjs": 26500,
         "preview-support.cjs": 6500,
         "preview-support.mjs": 5500
       }
diff --git a/packages/universal/api-client/package.json b/packages/universal/api-client/package.json
index faada627..3ef50d1b 100644
--- a/packages/universal/api-client/package.json
+++ b/packages/universal/api-client/package.json
@@ -52,7 +52,7 @@
     "bundleSize": {
       "gzipBudgets": {
         "index.cjs": 5000,
-        "index.mjs": 3700
+        "index.mjs": 4600
       }
     }
   },
diff --git a/packages/universal/core-sdk/package.json b/packages/universal/core-sdk/package.json
index 389e2c62..c22c8600 100644
--- a/packages/universal/core-sdk/package.json
+++ b/packages/universal/core-sdk/package.json
@@ -92,7 +92,7 @@
     "bundleSize": {
       "gzipBudgets": {
         "index.cjs": 16000,
-        "index.mjs": 14000,
+        "index.mjs": 15000,
         "preview-support.cjs": 6500,
         "preview-support.mjs": 5500
       }
diff --git a/packages/web/AGENTS.md b/packages/web/AGENTS.md
index b8bd1ea4..d5a9c382 100644
--- a/packages/web/AGENTS.md
+++ b/packages/web/AGENTS.md
@@ -21,3 +21,10 @@ Web-family packages under `packages/web/`.
   changes.
 - Validate affected Web reference implementations for browser behavior, preview behavior, routing,
   event flow, or React integration changes.
+- Schedule Web-family package validation by dependency order. `@contentful/optimization-web` is
+  upstream of `@contentful/optimization-react-web` and `@contentful/optimization-web-preview-panel`;
+  run Web SDK build, size, and packaging commands to completion before starting dependent Web
+  package build, size, or packaging commands.
+- Do not run Web SDK `build`, `clean`, `size:report`, or `size:check` concurrently with React Web or
+  preview-panel build, declaration, package, or size commands. Those dependents may read Web SDK
+  `dist/` output, including emitted shared chunks and declarations.
diff --git a/packages/web/frameworks/react-web-sdk/AGENTS.md b/packages/web/frameworks/react-web-sdk/AGENTS.md
index ea93863a..18ae71cb 100644
--- a/packages/web/frameworks/react-web-sdk/AGENTS.md
+++ b/packages/web/frameworks/react-web-sdk/AGENTS.md
@@ -18,6 +18,10 @@ React-facing entry resolution primitives.
 ## Validate
 
 - Run `typecheck`, `test:unit`, and `build`.
+- Before React Web `build`, `size:report`, or `size:check`, make sure any required
+  `@contentful/optimization-web` build, clean, package, or size command has completed. Do not run
+  React Web build, declaration, package, or size commands concurrently with Web SDK commands that
+  clean, write, or measure `dist/`.
 - Validate the `dev/` harness when changing package flows it demonstrates.
 - Validate `implementations/react-web-sdk` Playwright flows for readiness state, live updates, entry
   rendering, or other runtime behavior changes.
diff --git a/packages/web/frameworks/react-web-sdk/README.md b/packages/web/frameworks/react-web-sdk/README.md
index 4e6ff7c7..40f3322d 100644
--- a/packages/web/frameworks/react-web-sdk/README.md
+++ b/packages/web/frameworks/react-web-sdk/README.md
@@ -45,6 +45,7 @@ source of truth for exported API signatures.
   - [Entry interaction tracking](#entry-interaction-tracking)
   - [Router page events](#router-page-events)
   - [Live updates and preview](#live-updates-and-preview)
+  - [Web Components](#web-components)
 - [Development harness](#development-harness)
 - [Related](#related)
 
@@ -338,6 +339,18 @@ The browser preview panel is provided by
 open, live updates are forced on for all `OptimizedEntry` components so authors can inspect variant
 changes immediately.
 
+### Web Components
+
+The React SDK keeps rendering React components. `OptimizedEntry` does not render through custom
+elements, and this package does not import or register Web Components.
+
+Use the optional `@contentful/optimization-web/web-components` subpath only when a non-React app or
+a deliberate custom-element island needs vanilla custom elements. Framework wrappers around those
+elements should assign complex DOM properties such as `baselineEntry`, `defaults`, `api`, `sdk`, and
+callbacks after hydration, and listen for entry lifecycle events instead of trying to emulate React
+render props. See the [Web SDK README](../../web-sdk/README.md#usage-with-web-components) for raw
+custom-element and UMD usage.
+
 ## Development harness
 
 The package-local development harness runs from `packages/web/frameworks/react-web-sdk/dev/`. Launch
@@ -355,6 +368,8 @@ behavior.
 - [Integrating the Optimization React Web SDK in a React app](https://contentful.github.io/optimization/documents/Documentation.Guides.integrating-the-react-web-sdk-in-a-react-app.html) -
   step-by-step React integration guide
 - [Optimization Web SDK](../../web-sdk/README.md) - lower-level browser SDK wrapped by this package
+- [Optimization Web Components](../../web-sdk/README.md#usage-with-web-components) - optional
+  vanilla custom elements exposed from the Web SDK package
 - [Optimization Web Preview Panel](../../preview-panel/README.md) - preview panel package for
   browser authoring workflows
 - [React Web reference implementation](../../../../implementations/react-web-sdk/README.md) -
diff --git a/packages/web/frameworks/react-web-sdk/package.json b/packages/web/frameworks/react-web-sdk/package.json
index bca0e2d0..6c8cc101 100644
--- a/packages/web/frameworks/react-web-sdk/package.json
+++ b/packages/web/frameworks/react-web-sdk/package.json
@@ -122,7 +122,7 @@
     "bundleSize": {
       "gzipBudgets": {
         "index.cjs": 3400,
-        "index.mjs": 2550
+        "index.mjs": 2900
       }
     }
   },
diff --git a/packages/web/frameworks/react-web-sdk/src/optimized-entry/OptimizedEntry.test.tsx b/packages/web/frameworks/react-web-sdk/src/optimized-entry/OptimizedEntry.test.tsx
index be0242c5..b86bfb67 100644
--- a/packages/web/frameworks/react-web-sdk/src/optimized-entry/OptimizedEntry.test.tsx
+++ b/packages/web/frameworks/react-web-sdk/src/optimized-entry/OptimizedEntry.test.tsx
@@ -148,6 +148,7 @@ describe('OptimizedEntry', () => {
     expect(view.container.textContent).toContain('variant-a')
     const resolvedWrapper = getWrapper(view.container)
     expect(resolvedWrapper.dataset.ctflClickable).toBe('true')
+    expect(resolvedWrapper.dataset.ctflBaselineId).toBe('optimized-baseline')
     expect(resolvedWrapper.dataset.ctflEntryId).toBe('variant-a')
     expect(resolvedWrapper.dataset.ctflHoverDurationUpdateIntervalMs).toBe('1000')
 
diff --git a/packages/web/frameworks/react-web-sdk/src/optimized-entry/OptimizedEntry.tsx b/packages/web/frameworks/react-web-sdk/src/optimized-entry/OptimizedEntry.tsx
index d5d26c3e..29a049b9 100644
--- a/packages/web/frameworks/react-web-sdk/src/optimized-entry/OptimizedEntry.tsx
+++ b/packages/web/frameworks/react-web-sdk/src/optimized-entry/OptimizedEntry.tsx
@@ -1,25 +1,25 @@
+import {
+  OPTIMIZED_ENTRY_HOST_DISPLAY,
+  resolveOptimizedEntryNestingState,
+} from '@contentful/optimization-web/presentation'
 import type { Entry } from 'contentful'
-import { createContext, useContext, useEffect, useMemo, useRef, useState, type JSX } from 'react'
+import { createContext, useContext, useEffect, useMemo, useRef, type JSX } from 'react'
 import { createScopedLogger } from '../logger'
 import {
   resolveChildren,
   resolveLoadingFallback,
   resolveLoadingLayoutTargetStyle,
-  resolveLoadingRenderState,
-  resolveTrackingAttributes,
   type LoadingFallback,
   type OptimizedEntryChildren,
   type RenderProp,
   type WrapperElement,
 } from './optimizedEntryUtils'
-import { useOptimizedEntry } from './useOptimizedEntry'
+import { useOptimizedEntrySnapshot } from './useOptimizedEntry'
 
 export type OptimizedEntryLoadingFallback = LoadingFallback
 export type OptimizedEntryWrapperElement = WrapperElement
 export type OptimizedEntryRenderProp = RenderProp
 
-const LOADING_BASELINE_REVEAL_MS = 5000
-
 /**
  * Props for the {@link OptimizedEntry} component.
  *
@@ -83,7 +83,7 @@ export interface OptimizedEntryProps {
   hoverDurationUpdateIntervalMs?: number
 }
 
-const WRAPPER_STYLE = Object.freeze({ display: 'contents' as const })
+const WRAPPER_STYLE = Object.freeze({ display: OPTIMIZED_ENTRY_HOST_DISPLAY })
 const OptimizedEntryNestingContext = createContext<ReadonlySet<string> | null>(null)
 const logger = createScopedLogger('React:OptimizedEntry')
 
@@ -93,7 +93,10 @@ function useDuplicateBaselineGuard(baselineEntryId: string): {
 } {
   const ancestorBaselineIds = useContext(OptimizedEntryNestingContext)
   const warnedDuplicateBaselineId = useRef(false)
-  const hasDuplicateBaselineAncestor = ancestorBaselineIds?.has(baselineEntryId) ?? false
+  const { currentAndAncestorBaselineIds, hasDuplicateBaselineAncestor } = useMemo(
+    () => resolveOptimizedEntryNestingState(baselineEntryId, ancestorBaselineIds),
+    [ancestorBaselineIds, baselineEntryId],
+  )
 
   useEffect(() => {
     if (!hasDuplicateBaselineAncestor || warnedDuplicateBaselineId.current) {
@@ -109,12 +112,6 @@ function useDuplicateBaselineGuard(baselineEntryId: string): {
     warnedDuplicateBaselineId.current = true
   }, [baselineEntryId, hasDuplicateBaselineAncestor])
 
-  const currentAndAncestorBaselineIds = useMemo(() => {
-    const nextIds = new Set(ancestorBaselineIds ?? [])
-    nextIds.add(baselineEntryId)
-    return nextIds
-  }, [ancestorBaselineIds, baselineEntryId])
-
   return { currentAndAncestorBaselineIds, hasDuplicateBaselineAncestor }
 }
 
@@ -138,53 +135,47 @@ export function OptimizedEntry({
   } = baselineEntry
   const { currentAndAncestorBaselineIds, hasDuplicateBaselineAncestor } =
     useDuplicateBaselineGuard(baselineEntryId)
-  const { entry, isLoading, isReady, resolvedData } = useOptimizedEntry({
+  const hasCustomLoadingFallback = loadingFallback !== undefined
+  const targetDisplay = as === 'span' ? 'inline' : 'block'
+  const snapshot = useOptimizedEntrySnapshot({
     baselineEntry,
+    clickable,
+    hasCustomLoadingFallback,
+    hoverDurationUpdateIntervalMs,
     liveUpdates,
+    targetDisplay,
+    trackClicks,
+    trackHovers,
+    trackViews,
+    viewDurationUpdateIntervalMs,
   })
-  const [revealTimedOutBaseline, setRevealTimedOutBaseline] = useState(false)
-
-  useEffect(() => {
-    if (!isLoading) {
-      setRevealTimedOutBaseline(false)
-      return
-    }
-
-    setRevealTimedOutBaseline(false)
-
-    const timer = window.setTimeout(() => {
-      setRevealTimedOutBaseline(true)
-    }, LOADING_BASELINE_REVEAL_MS)
-
-    return () => {
-      window.clearTimeout(timer)
-    }
-  }, [isLoading])
 
   if (hasDuplicateBaselineAncestor) {
     return null
   }
 
-  const hasCustomLoadingFallback = loadingFallback !== undefined
   const resolvedLoadingFallback = hasCustomLoadingFallback
     ? resolveLoadingFallback(loadingFallback)
     : undefined
-  const { hideLoadingLayoutTarget, loadingContent, showLoadingFallback } =
-    resolveLoadingRenderState({
-      baselineChildren: children,
-      baselineEntry,
-      hasCustomLoadingFallback,
-      isLoading,
-      revealTimedOutBaseline,
-      resolvedLoadingFallback,
-      sdkInitialized: isReady,
-    })
+  const { entry, hostAttributes, loadingPresentation } = snapshot
+  const {
+    hideLoadingLayoutTarget,
+    shouldRenderBaselineWhileLoading,
+    showLoadingFallback,
+    targetDisplay: loadingTargetDisplay,
+  } = loadingPresentation
+  const loadingContent = shouldRenderBaselineWhileLoading
+    ? resolveChildren(children, baselineEntry)
+    : resolvedLoadingFallback
   const dataTestId = dataTestIdProp ?? testId
   const Wrapper = as
 
   if (showLoadingFallback) {
     const LoadingLayoutTarget = Wrapper
-    const loadingLayoutTargetStyle = resolveLoadingLayoutTargetStyle(as, hideLoadingLayoutTarget)
+    const loadingLayoutTargetStyle = resolveLoadingLayoutTargetStyle(
+      loadingTargetDisplay,
+      hideLoadingLayoutTarget,
+    )
 
     return (
       <OptimizedEntryNestingContext.Provider value={currentAndAncestorBaselineIds}>
@@ -200,19 +191,9 @@ export function OptimizedEntry({
     )
   }
 
-  const trackingAttributes = resolveTrackingAttributes(resolvedData, {
-    baselineEntryId,
-    clickable,
-    hoverDurationUpdateIntervalMs,
-    trackClicks,
-    trackHovers,
-    trackViews,
-    viewDurationUpdateIntervalMs,
-  })
-
   return (
     <OptimizedEntryNestingContext.Provider value={currentAndAncestorBaselineIds}>
-      <Wrapper style={WRAPPER_STYLE} data-testid={dataTestId} {...trackingAttributes}>
+      <Wrapper style={WRAPPER_STYLE} data-testid={dataTestId} {...hostAttributes}>
         {resolveChildren(children, entry)}
       </Wrapper>
     </OptimizedEntryNestingContext.Provider>
diff --git a/packages/web/frameworks/react-web-sdk/src/optimized-entry/optimizedEntryUtils.ts b/packages/web/frameworks/react-web-sdk/src/optimized-entry/optimizedEntryUtils.ts
index ceee0844..1771548a 100644
--- a/packages/web/frameworks/react-web-sdk/src/optimized-entry/optimizedEntryUtils.ts
+++ b/packages/web/frameworks/react-web-sdk/src/optimized-entry/optimizedEntryUtils.ts
@@ -1,6 +1,5 @@
-import type { SelectedOptimization } from '@contentful/optimization-web/api-schemas'
-import type { ResolvedData } from '@contentful/optimization-web/core-sdk'
-import type { Entry, EntrySkeletonType } from 'contentful'
+import type { OptimizedEntryLoadingTargetDisplay } from '@contentful/optimization-web/presentation'
+import type { Entry } from 'contentful'
 import type { CSSProperties, ReactNode } from 'react'
 
 export type LoadingFallback = ReactNode | (() => ReactNode)
@@ -8,27 +7,8 @@ export type WrapperElement = 'div' | 'span'
 export type RenderProp = (resolvedEntry: Entry) => ReactNode
 export type OptimizedEntryChildren = ReactNode | RenderProp
 
-export interface LoadingRenderState {
-  hideLoadingLayoutTarget: boolean
-  isServerRender: boolean
-  loadingContent: ReactNode
-  showLoadingFallback: boolean
-}
-
-export interface TrackingAttributeOptions {
-  baselineEntryId: string
-  clickable?: boolean
-  hoverDurationUpdateIntervalMs?: number
-  trackClicks?: boolean
-  trackHovers?: boolean
-  trackViews?: boolean
-  viewDurationUpdateIntervalMs?: number
-}
-
 export type LoadingLayoutTargetStyle = Pick<CSSProperties, 'display' | 'visibility'>
 
-type TrackingAttributeValue = string | boolean | number | undefined
-
 export function resolveLoadingFallback(loadingFallback: LoadingFallback | undefined): ReactNode {
   if (typeof loadingFallback === 'function') {
     return loadingFallback()
@@ -49,118 +29,12 @@ export function resolveChildren(children: OptimizedEntryChildren, entry: Entry):
   return children(entry)
 }
 
-export function hasOptimizationReferences(entry: Entry): boolean {
-  return Array.isArray(entry.fields.nt_experiences) && entry.fields.nt_experiences.length > 0
-}
-
-function resolveDuplicationScope(
-  selectedOptimization: SelectedOptimization | undefined,
-): string | undefined {
-  const candidate =
-    selectedOptimization &&
-    typeof selectedOptimization === 'object' &&
-    'duplicationScope' in selectedOptimization
-      ? selectedOptimization.duplicationScope
-      : undefined
-
-  if (typeof candidate !== 'string') {
-    return undefined
-  }
-
-  return candidate.trim() ? candidate : undefined
-}
-
-export function resolveShouldLiveUpdate(params: {
-  previewPanelVisible: boolean
-  componentLiveUpdates: boolean | undefined
-  globalLiveUpdates: boolean
-}): boolean {
-  const { previewPanelVisible, componentLiveUpdates, globalLiveUpdates } = params
-
-  if (previewPanelVisible) {
-    return true
-  }
-
-  return componentLiveUpdates ?? globalLiveUpdates
-}
-
-export function resolveTrackingAttributes(
-  resolvedData: ResolvedData<EntrySkeletonType>,
-  options: TrackingAttributeOptions,
-): Record<string, TrackingAttributeValue> {
-  const {
-    selectedOptimization,
-    entry: {
-      sys: { id: entryId },
-    },
-  } = resolvedData
-  const {
-    baselineEntryId,
-    clickable,
-    hoverDurationUpdateIntervalMs,
-    trackClicks,
-    trackHovers,
-    trackViews,
-    viewDurationUpdateIntervalMs,
-  } = options
-
-  return {
-    'data-ctfl-baseline-id': baselineEntryId,
-    'data-ctfl-clickable': clickable === true ? true : undefined,
-    'data-ctfl-duplication-scope': resolveDuplicationScope(selectedOptimization),
-    'data-ctfl-entry-id': entryId,
-    'data-ctfl-hover-duration-update-interval-ms': hoverDurationUpdateIntervalMs,
-    'data-ctfl-optimization-id': selectedOptimization?.experienceId,
-    'data-ctfl-sticky': selectedOptimization?.sticky,
-    'data-ctfl-track-clicks': trackClicks,
-    'data-ctfl-track-hovers': trackHovers,
-    'data-ctfl-track-views': trackViews,
-    'data-ctfl-variant-index': selectedOptimization?.variantIndex ?? 0,
-    'data-ctfl-view-duration-update-interval-ms': viewDurationUpdateIntervalMs,
-  }
-}
-
 export function resolveLoadingLayoutTargetStyle(
-  wrapperElement: WrapperElement,
+  targetDisplay: OptimizedEntryLoadingTargetDisplay,
   isInvisible: boolean,
 ): LoadingLayoutTargetStyle {
   return {
-    display: wrapperElement === 'span' ? 'inline' : 'block',
+    display: targetDisplay,
     visibility: isInvisible ? 'hidden' : undefined,
   }
 }
-
-export function resolveLoadingRenderState(params: {
-  baselineChildren: OptimizedEntryChildren
-  baselineEntry: Entry
-  hasCustomLoadingFallback: boolean
-  isLoading: boolean
-  revealTimedOutBaseline: boolean
-  resolvedLoadingFallback: ReactNode
-  sdkInitialized: boolean
-}): LoadingRenderState {
-  const {
-    baselineChildren,
-    baselineEntry,
-    hasCustomLoadingFallback,
-    isLoading,
-    revealTimedOutBaseline,
-    resolvedLoadingFallback,
-    sdkInitialized,
-  } = params
-  const isServerRender = typeof window === 'undefined'
-  const showLoadingFallback = isLoading || (isServerRender && !sdkInitialized)
-  const renderBaselineInsteadOfFallback = !hasCustomLoadingFallback || revealTimedOutBaseline
-  const loadingContent = renderBaselineInsteadOfFallback
-    ? resolveChildren(baselineChildren, baselineEntry)
-    : resolvedLoadingFallback
-  const hideLoadingLayoutTarget =
-    isServerRender || (renderBaselineInsteadOfFallback && !revealTimedOutBaseline)
-
-  return {
-    hideLoadingLayoutTarget,
-    isServerRender,
-    loadingContent,
-    showLoadingFallback,
-  }
-}
diff --git a/packages/web/frameworks/react-web-sdk/src/optimized-entry/useOptimizedEntry.ts b/packages/web/frameworks/react-web-sdk/src/optimized-entry/useOptimizedEntry.ts
index f877a08e..988354e7 100644
--- a/packages/web/frameworks/react-web-sdk/src/optimized-entry/useOptimizedEntry.ts
+++ b/packages/web/frameworks/react-web-sdk/src/optimized-entry/useOptimizedEntry.ts
@@ -1,10 +1,13 @@
 import type { SelectedOptimizationArray } from '@contentful/optimization-web/api-schemas'
-import type { ExperienceRequestState, ResolvedData } from '@contentful/optimization-web/core-sdk'
+import type { ResolvedData } from '@contentful/optimization-web/core-sdk'
+import {
+  OptimizedEntryController,
+  type OptimizedEntrySnapshot,
+} from '@contentful/optimization-web/presentation'
 import type { Entry, EntrySkeletonType } from 'contentful'
 import { useEffect, useMemo, useState } from 'react'
 import { useLiveUpdates } from '../hooks/useLiveUpdates'
 import { useOptimizationContext } from '../hooks/useOptimization'
-import { hasOptimizationReferences, resolveShouldLiveUpdate } from './optimizedEntryUtils'
 
 export interface UseOptimizedEntryParams {
   baselineEntry: Entry
@@ -21,87 +24,105 @@ export interface UseOptimizedEntryResult {
   selectedOptimizations: SelectedOptimizationArray | undefined
 }
 
-export function useOptimizedEntry({
+export interface UseOptimizedEntrySnapshotParams extends UseOptimizedEntryParams {
+  clickable?: boolean
+  hasCustomLoadingFallback?: boolean
+  hoverDurationUpdateIntervalMs?: number
+  targetDisplay?: 'block' | 'inline'
+  trackClicks?: boolean
+  trackHovers?: boolean
+  trackViews?: boolean
+  viewDurationUpdateIntervalMs?: number
+}
+
+export function useOptimizedEntrySnapshot({
   baselineEntry,
+  clickable,
+  hasCustomLoadingFallback,
+  hoverDurationUpdateIntervalMs,
   liveUpdates,
-}: UseOptimizedEntryParams): UseOptimizedEntryResult {
+  targetDisplay,
+  trackClicks,
+  trackHovers,
+  trackViews,
+  viewDurationUpdateIntervalMs,
+}: UseOptimizedEntrySnapshotParams): OptimizedEntrySnapshot {
   const { sdk, isReady } = useOptimizationContext()
   const liveUpdatesContext = useLiveUpdates()
-  const requiresOptimization = hasOptimizationReferences(baselineEntry)
-  const [lockedSelectedOptimizations, setLockedSelectedOptimizations] = useState<
-    SelectedOptimizationArray | undefined
-  >(undefined)
-  const [canOptimize, setCanOptimize] = useState(false)
-  const [experienceRequestSettled, setExperienceRequestSettled] = useState(false)
-  const [sdkInitialized, setSdkInitialized] = useState(false)
+  const [isPresentationReady, setIsPresentationReady] = useState(false)
 
-  const shouldLiveUpdate = resolveShouldLiveUpdate({
-    componentLiveUpdates: liveUpdates,
-    globalLiveUpdates: liveUpdatesContext.globalLiveUpdates,
-    previewPanelVisible: liveUpdatesContext.previewPanelVisible,
-  })
+  const controllerOptions = useMemo(
+    () => ({
+      isPresentationReady,
+      baselineEntry,
+      entryLiveUpdatesEnabled: liveUpdates,
+      rootLiveUpdatesEnabled: liveUpdatesContext.globalLiveUpdates,
+      hasCustomLoadingFallback,
+      isPreviewPanelOpen: liveUpdatesContext.previewPanelVisible,
+      sdk,
+      isSdkStateReady: isReady,
+      targetDisplay,
+      clickable,
+      hoverDurationUpdateIntervalMs,
+      trackClicks,
+      trackHovers,
+      trackViews,
+      viewDurationUpdateIntervalMs,
+    }),
+    [
+      isPresentationReady,
+      baselineEntry,
+      clickable,
+      hasCustomLoadingFallback,
+      hoverDurationUpdateIntervalMs,
+      isReady,
+      liveUpdates,
+      liveUpdatesContext.globalLiveUpdates,
+      liveUpdatesContext.previewPanelVisible,
+      sdk,
+      targetDisplay,
+      trackClicks,
+      trackHovers,
+      trackViews,
+      viewDurationUpdateIntervalMs,
+    ],
+  )
+  const [controller] = useState(() => new OptimizedEntryController(controllerOptions))
+  const [snapshot, setSnapshot] = useState<OptimizedEntrySnapshot>(() => controller.getSnapshot())
 
   useEffect(() => {
-    if (!sdk || !isReady) {
-      setCanOptimize(false)
-      setExperienceRequestSettled(false)
-      return
-    }
-
-    const selectedOptimizationsSubscription = sdk.states.selectedOptimizations.subscribe(
-      (selectedOptimizations: SelectedOptimizationArray | undefined) => {
-        setLockedSelectedOptimizations((previous: SelectedOptimizationArray | undefined) => {
-          if (shouldLiveUpdate) {
-            return selectedOptimizations
-          }
-
-          if (previous === undefined && selectedOptimizations !== undefined) {
-            return selectedOptimizations
-          }
-
-          return previous
-        })
-      },
-    )
-
-    const canOptimizeSubscription = sdk.states.canOptimize.subscribe((value) => {
-      setCanOptimize(value)
-    })
-
-    const experienceRequestStateSubscription = sdk.states.experienceRequestState.subscribe(
-      (state: ExperienceRequestState) => {
-        setExperienceRequestSettled(state.status === 'success' || state.status === 'failed')
-      },
-    )
+    setIsPresentationReady(isReady)
+  }, [isReady])
 
+  useEffect(() => {
+    controller.setSnapshotListener(setSnapshot)
     return () => {
-      selectedOptimizationsSubscription.unsubscribe()
-      canOptimizeSubscription.unsubscribe()
-      experienceRequestStateSubscription.unsubscribe()
+      controller.setSnapshotListener(undefined)
     }
-  }, [isReady, sdk, shouldLiveUpdate])
+  }, [controller])
 
   useEffect(() => {
-    setSdkInitialized(isReady)
-  }, [isReady])
+    controller.updateOptions(controllerOptions)
+    controller.connect()
 
-  const resolvedData: ResolvedData<EntrySkeletonType> = useMemo(
-    () =>
-      sdk && isReady
-        ? sdk.resolveOptimizedEntry(baselineEntry, lockedSelectedOptimizations)
-        : { entry: baselineEntry, selectedOptimization: undefined },
-    [baselineEntry, isReady, lockedSelectedOptimizations, sdk],
-  )
+    return () => {
+      controller.disconnect()
+    }
+  }, [controller, controllerOptions])
+
+  return snapshot
+}
 
-  const isContentReady = !requiresOptimization || experienceRequestSettled
+export function useOptimizedEntry(params: UseOptimizedEntryParams): UseOptimizedEntryResult {
+  const snapshot = useOptimizedEntrySnapshot(params)
 
   return {
-    canOptimize,
-    entry: resolvedData.entry,
-    isLoading: !isContentReady,
-    isReady: sdkInitialized,
-    selectedOptimization: resolvedData.selectedOptimization,
-    resolvedData,
-    selectedOptimizations: lockedSelectedOptimizations,
+    canOptimize: snapshot.canOptimize,
+    entry: snapshot.entry,
+    isLoading: snapshot.isLoading,
+    isReady: snapshot.isReady,
+    selectedOptimization: snapshot.selectedOptimization,
+    resolvedData: snapshot.resolvedData,
+    selectedOptimizations: snapshot.selectedOptimizations,
   }
 }
diff --git a/packages/web/frameworks/react-web-sdk/src/provider/OptimizationProvider.tsx b/packages/web/frameworks/react-web-sdk/src/provider/OptimizationProvider.tsx
index 36dc59fa..ee78fca9 100644
--- a/packages/web/frameworks/react-web-sdk/src/provider/OptimizationProvider.tsx
+++ b/packages/web/frameworks/react-web-sdk/src/provider/OptimizationProvider.tsx
@@ -1,7 +1,12 @@
-import ContentfulOptimization, {
-  type AutoTrackEntryInteractionOptions,
-  type OptimizationWebConfig,
-} from '@contentful/optimization-web'
+import ContentfulOptimization from '@contentful/optimization-web'
+import {
+  createOptimizationRootSdkBinding,
+  disposeOptimizationRootSdkBinding,
+  type OptimizationRootSdkBinding,
+  type OptimizationRootSdkConfig,
+  type OnStatesReady as SharedOnStatesReady,
+  type TrackEntryInteractionOptions as SharedTrackEntryInteractionOptions,
+} from '@contentful/optimization-web/presentation'
 import { useLayoutEffect, useRef, useState, type PropsWithChildren, type ReactElement } from 'react'
 
 import { OptimizationContext, type OptimizationSdk } from '../context/OptimizationContext'
@@ -11,19 +16,11 @@ import { OptimizationContext, type OptimizationSdk } from '../context/Optimizati
  *
  * @public
  */
-type Cleanup = () => void
-type OnStatesReadyResult = Cleanup | ReturnType<Cleanup>
+export type OnStatesReady = SharedOnStatesReady<OptimizationSdk>
+export type TrackEntryInteractionOptions = SharedTrackEntryInteractionOptions
 
-export type OnStatesReady = (states: OptimizationSdk['states']) => OnStatesReadyResult
-export type TrackEntryInteractionOptions = AutoTrackEntryInteractionOptions
-
-type OptimizationProviderBaseConfigProps = Omit<OptimizationWebConfig, 'autoTrackEntryInteraction'>
-
-interface ProviderRuntime {
-  readonly cleanup?: Cleanup
-  readonly ownsInstance: boolean
-  readonly sdk: OptimizationSdk
-}
+type OptimizationProviderBaseConfigProps = OptimizationRootSdkConfig
+type ProviderSdkBinding = OptimizationRootSdkBinding<OptimizationSdk>
 
 interface ProviderState {
   readonly error: Error | undefined
@@ -31,14 +28,6 @@ interface ProviderState {
   readonly sdk: OptimizationSdk | undefined
 }
 
-function getCleanup(
-  sdk: OptimizationSdk,
-  onStatesReady: OnStatesReady | undefined,
-): Cleanup | undefined {
-  const cleanup = onStatesReady?.(sdk.states)
-  return typeof cleanup === 'function' ? cleanup : undefined
-}
-
 export type OptimizationProviderConfigProps = PropsWithChildren<
   OptimizationProviderBaseConfigProps & {
     /**
@@ -73,50 +62,25 @@ function toError(error: unknown): Error {
   return error instanceof Error ? error : new Error(String(error))
 }
 
-function resolveTrackEntryInteractionOptions(
-  trackEntryInteraction: TrackEntryInteractionOptions | undefined,
-): Required<AutoTrackEntryInteractionOptions> {
-  return {
-    clicks: trackEntryInteraction?.clicks ?? false,
-    hovers: trackEntryInteraction?.hovers ?? false,
-    views: trackEntryInteraction?.views ?? true,
-  }
-}
-
-function createInjectedRuntime(props: OptimizationProviderSdkProps): ProviderRuntime {
+function createInjectedSdkBinding(props: OptimizationProviderSdkProps): ProviderSdkBinding {
   const { onStatesReady, sdk } = props
 
-  return {
-    cleanup: getCleanup(sdk, onStatesReady),
-    ownsInstance: false,
-    sdk,
-  }
+  return createOptimizationRootSdkBinding({ onStatesReady, sdk })
 }
 
-function createOwnedRuntime(props: OptimizationProviderConfigProps): ProviderRuntime {
+function createOwnedSdkBinding(props: OptimizationProviderConfigProps): ProviderSdkBinding {
   const { children: _children, onStatesReady, sdk: _sdk, trackEntryInteraction, ...config } = props
-  const sdk = new ContentfulOptimization({
-    ...config,
-    autoTrackEntryInteraction: resolveTrackEntryInteractionOptions(trackEntryInteraction),
-  })
 
-  try {
-    return {
-      cleanup: getCleanup(sdk, onStatesReady),
-      ownsInstance: true,
-      sdk,
-    }
-  } catch (error) {
-    sdk.destroy()
-    throw error
-  }
+  return createOptimizationRootSdkBinding({
+    config,
+    createSdk: (sdkConfig) => new ContentfulOptimization(sdkConfig) as OptimizationSdk,
+    onStatesReady,
+    trackEntryInteraction,
+  })
 }
 
-function disposeRuntime(runtime: ProviderRuntime | undefined): void {
-  runtime?.cleanup?.()
-  if (runtime?.ownsInstance === true) {
-    runtime.sdk.destroy()
-  }
+function disposeSdkBinding(sdkBinding: ProviderSdkBinding | undefined): void {
+  disposeOptimizationRootSdkBinding(sdkBinding)
 }
 
 export function OptimizationProvider(props: OptimizationProviderProps): ReactElement | null {
@@ -137,14 +101,14 @@ export function OptimizationProvider(props: OptimizationProviderProps): ReactEle
     }
 
     try {
-      const runtime =
+      const sdkBinding =
         initialProps.sdk === undefined
-          ? createOwnedRuntime(initialProps)
-          : createInjectedRuntime(initialProps)
-      setState({ error: undefined, isReady: true, sdk: runtime.sdk })
+          ? createOwnedSdkBinding(initialProps)
+          : createInjectedSdkBinding(initialProps)
+      setState({ error: undefined, isReady: true, sdk: sdkBinding.sdk })
 
       return () => {
-        disposeRuntime(runtime)
+        disposeSdkBinding(sdkBinding)
       }
     } catch (error: unknown) {
       setState({ error: toError(error), isReady: false, sdk: undefined })
diff --git a/packages/web/web-sdk/README.md b/packages/web/web-sdk/README.md
index 6cb87e14..f520bf03 100644
--- a/packages/web/web-sdk/README.md
+++ b/packages/web/web-sdk/README.md
@@ -37,6 +37,7 @@ source of truth for exported API signatures.
 
 - [Getting started](#getting-started)
   - [Usage in vanilla JS web pages](#usage-in-vanilla-js-web-pages)
+  - [Usage with Web Components](#usage-with-web-components)
 - [When to use this package](#when-to-use-this-package)
 - [Common configuration](#common-configuration)
 - [Core workflows](#core-workflows)
@@ -94,6 +95,77 @@ The UMD build is available for HTML pages that do not use a bundler:
 </script>
 ```
 
+### Usage with Web Components
+
+The optional Web Components entrypoint provides vanilla custom elements from the same package:
+
+```ts
+import { defineContentfulOptimizationElements } from '@contentful/optimization-web/web-components'
+
+defineContentfulOptimizationElements()
+```
+
+Importing `@contentful/optimization-web/web-components` is side-effect-free. Custom elements are
+registered only when `defineContentfulOptimizationElements()` runs, and the main
+`@contentful/optimization-web` entrypoint does not export or register them.
+
+Use `<ctfl-optimization-root>` once around the entries that should share one SDK instance:
+
+```html
+<ctfl-optimization-root client-id="your-client-id" environment="main" locale="en-US">
+  <ctfl-optimized-entry id="hero-entry">
+    <article>Baseline content rendered by your app</article>
+  </ctfl-optimized-entry>
+</ctfl-optimization-root>
+```
+
+Assign complex values as DOM properties, not string attributes:
+
+```ts
+const root = document.querySelector('ctfl-optimization-root')
+const entry = document.querySelector('ctfl-optimized-entry')
+
+root.defaults = { consent: true }
+root.api = { preflight: false }
+root.trackEntryInteraction = { views: true, clicks: true }
+root.onStatesReady = (states) => {
+  const subscription = states.profile.subscribe((profile) => {
+    console.log(profile?.id)
+  })
+
+  return () => {
+    subscription.unsubscribe()
+  }
+}
+
+entry.baselineEntry = baselineEntry
+entry.addEventListener('ctfl-entry-resolved', (event) => {
+  renderHero(event.detail.entry)
+})
+```
+
+`baselineEntry` is property-only because Contentful entries are structured objects. For framework
+wrappers, assign `baselineEntry`, `sdk`, `defaults`, `api`, and callback properties after client
+hydration, then listen for `ctfl-entry-loading`, `ctfl-entry-resolved`, and `ctfl-entry-error` to
+render framework-owned UI. The custom element intentionally does not provide a framework-neutral
+render-prop API.
+
+For script-tag usage, load the main Web SDK UMD bundle and the separate Web Components UMD bundle:
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/@contentful/optimization-web@latest/dist/contentful-optimization-web.umd.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@contentful/optimization-web@latest/dist/contentful-optimization-web-components.umd.js"></script>
+<script>
+  ContentfulOptimizationWebComponents.defineContentfulOptimizationElements()
+</script>
+```
+
+SSR output can include inert custom-element markup. On the client, call
+`defineContentfulOptimizationElements()` and assign object properties before expecting entries to
+resolve. A root shares SDK readiness and preview-panel live-update state with descendant entries;
+entries diff `data-ctfl-*` host attributes and clean up subscriptions on disconnect. Prefer one root
+per SDK instance unless a page genuinely needs separate SDK ownership.
+
 ## When to use this package
 
 Use `@contentful/optimization-web` for browser applications that need the stateful Web runtime
diff --git a/packages/web/web-sdk/dev/index.html b/packages/web/web-sdk/dev/index.html
index 86b3b35a..1dfdea91 100644
--- a/packages/web/web-sdk/dev/index.html
+++ b/packages/web/web-sdk/dev/index.html
@@ -99,7 +99,8 @@
         grid-auto-rows: minmax(75dvh, auto);
         margin-block-end: 2rem;
 
-        > div {
+        > button,
+        > ctfl-optimized-entry > .entry-content {
           display: grid;
           grid-gap: inherit;
           grid-auto-rows: inherit;
@@ -110,6 +111,24 @@
           overflow: visible;
         }
 
+        > ctfl-optimized-entry > .entry-content--inline {
+          display: inline;
+          width: auto;
+          height: auto;
+          padding: 0;
+          background: transparent;
+        }
+
+        > button {
+          appearance: none;
+          border: 0;
+          text-align: left;
+        }
+
+        > button .entry-content {
+          display: inline;
+        }
+
         div.nested {
           display: grid;
           grid-gap: inherit;
@@ -118,92 +137,118 @@
           border: 1px solid #ccc;
           overflow: visible;
         }
+
+        [data-e2e-entry-inline='true'] {
+          display: block;
+        }
       }
     </style>
   </head>
   <body>
     <h1>ContentfulOptimization Web SDK Dev Development Dashboard</h1>
 
-    <main>
-      <section id="utility-panel">
-        <h2>Utilities</h2>
-
-        <span>
-          <button id="consent">Accept Consent</button>
-          <button id="unconsent">Reject Consent</button>
-        </span>
-        |
-        <span>
-          <button id="identify">Identify</button>
-          <button id="unidentify">Reset Profile</button>
-        </span>
-        |
-        <button commandfor="profile-dialog" command="show-modal">View Profile</button>
-        <dialog id="profile-dialog">
-          <pre id="profile"></pre>
-          <form method="dialog">
-            <button type="submit">Close</button>
+    <ctfl-optimization-root id="web-components-root">
+      <main>
+        <section id="utility-panel">
+          <h2>Utilities</h2>
+
+          <span>
+            <button id="consent">Accept Consent</button>
+            <button id="unconsent">Reject Consent</button>
+          </span>
+          |
+          <span>
+            <button id="identify">Identify</button>
+            <button id="unidentify">Reset Profile</button>
+          </span>
+          |
+          <button commandfor="profile-dialog" command="show-modal">View Profile</button>
+          <dialog id="profile-dialog">
+            <pre id="profile"></pre>
+            <form method="dialog">
+              <button type="submit">Close</button>
+            </form>
+          </dialog>
+          |
+          <button commandfor="selected-optimizations-dialog" command="show-modal">
+            View Selected Optimizations
+          </button>
+          <dialog id="selected-optimizations-dialog">
+            <pre id="selected-optimizations"></pre>
+            <form method="dialog">
+              <button type="submit">Close</button>
+            </form>
+          </dialog>
+        </section>
+
+        <section>
+          <h2>Entry Data</h2>
+
+          <form id="entry-form">
+            <fieldset>
+              <legend>Inspect Contentful Entry</legend>
+              <input type="text" name="entryId" id="entry-id" />
+              <button type="submit">Submit</button>
+            </fieldset>
           </form>
-        </dialog>
-        |
-        <button commandfor="selected-optimizations-dialog" command="show-modal">
-          View Selected Optimizations
-        </button>
-        <dialog id="selected-optimizations-dialog">
-          <pre id="selected-optimizations"></pre>
-          <form method="dialog">
-            <button type="submit">Close</button>
-          </form>
-        </dialog>
-      </section>
-
-      <section>
-        <h2>Entry Data</h2>
-
-        <form id="entry-form">
-          <fieldset>
-            <legend>Resolve Contentful Entry</legend>
-            <input type="text" name="entryId" id="entry-id" />
-            <button type="submit">Submit</button>
-          </fieldset>
-        </form>
-
-        <details>
-          <summary>Entry Data</summary>
-          <ol id="entries"></ol>
-        </details>
-      </section>
-
-      <section id="event-stream-panel">
-        <div>
-          <h2>Event Stream</h2>
-
-          <ol id="event-stream"></ol>
-        </div>
-      </section>
-
-      <section>
-        <h2>Entries</h2>
-
-        <div id="auto-observed">
-          <div data-ctfl-entry-id="1JAU028vQ7v6nB2swl3NBo">
-            <!-- Nested Entry -->
+
+          <details>
+            <summary>Entry Data</summary>
+            <ol id="entries"></ol>
+          </details>
+        </section>
+
+        <section id="event-stream-panel">
+          <div>
+            <h2>Event Stream</h2>
+
+            <ol id="event-stream"></ol>
           </div>
-          <div data-ctfl-entry-id="1MwiFl4z7gkwqGYdvCmr8c">
-            <!-- Merge Tag "Rich Text" Entry -->
+        </section>
+
+        <section>
+          <h2>Entries</h2>
+
+          <div id="auto-observed">
+            <ctfl-optimized-entry data-entry-id="1JAU028vQ7v6nB2swl3NBo">
+              <!-- Nested Entry -->
+            </ctfl-optimized-entry>
+            <ctfl-optimized-entry data-entry-id="1MwiFl4z7gkwqGYdvCmr8c">
+              <!-- Merge Tag "Rich Text" Entry -->
+            </ctfl-optimized-entry>
+            <ctfl-optimized-entry
+              data-ctfl-clickable="true"
+              data-ctfl-hover-duration-update-interval-ms="1000"
+              data-entry-id="4ib0hsHWoSOnCVdDkizE8d"
+            ></ctfl-optimized-entry>
+            <ctfl-optimized-entry
+              data-e2e-click-scenario="descendant"
+              data-ctfl-hover-duration-update-interval-ms="1000"
+              data-entry-id="xFwgG3oNaOcjzWiGe4vXo"
+            ></ctfl-optimized-entry>
+            <button type="button">
+              <ctfl-optimized-entry
+                data-e2e-click-scenario="ancestor"
+                data-e2e-entry-inline="true"
+                data-ctfl-hover-duration-update-interval-ms="1000"
+                data-entry-id="2Z2WLOx07InSewC3LUB3eX"
+              ></ctfl-optimized-entry>
+            </button>
+            <ctfl-optimized-entry data-entry-id="6zqoWXyiSrf0ja7I2WGtYj"></ctfl-optimized-entry>
+            <ctfl-optimized-entry data-entry-id="7pa5bOx8Z9NmNcr7mISvD"></ctfl-optimized-entry>
           </div>
-          <div data-ctfl-entry-id="4ib0hsHWoSOnCVdDkizE8d"></div>
-          <div data-ctfl-entry-id="xFwgG3oNaOcjzWiGe4vXo"></div>
-          <div data-ctfl-entry-id="2Z2WLOx07InSewC3LUB3eX"></div>
-        </div>
-
-        <div id="manually-observed">
-          <div data-entry-id="5XHssysWUDECHzKLzoIsg1"></div>
-          <div data-entry-id="6zqoWXyiSrf0ja7I2WGtYj"></div>
-          <div data-entry-id="7pa5bOx8Z9NmNcr7mISvD"></div>
-        </div>
-      </section>
-    </main>
+
+          <div id="manually-observed">
+            <ctfl-optimized-entry
+              data-testid="manual-view-entry"
+              data-manual-view-tracking="true"
+              data-entry-id="5XHssysWUDECHzKLzoIsg1"
+              track-views="false"
+            ></ctfl-optimized-entry>
+          </div>
+        </section>
+      </main>
+    </ctfl-optimization-root>
 
     <template id="event-dialog">
       <li>
@@ -236,6 +281,8 @@ <h2>Entries</h2>
     <script type="module">
       /* --- Standard Initialization Code --- */
 
+      const APP_LOCALE = 'en-US'
+
       // Initialize Contentful CDA SDK
       var contentfulClient = contentful.createClient({
         accessToken: '<%= PUBLIC_CONTENTFUL_TOKEN %>',
@@ -251,7 +298,8 @@ <h2>Entries</h2>
         clientId: '<%= PUBLIC_NINETAILED_CLIENT_ID %>',
         environment: '<%= PUBLIC_NINETAILED_ENVIRONMENT %>',
         logLevel: 'debug',
-        autoTrackEntryInteraction: { views: true, hovers: true },
+        autoTrackEntryInteraction: { views: true, clicks: true, hovers: true },
+        locale: APP_LOCALE,
         app: {
           name: document.title,
           version: '0.0.0',
@@ -262,8 +310,7 @@ <h2>Entries</h2>
         },
       })
 
-      // Emit page event
-      contentfulOptimization.page()
+      ContentfulOptimizationWebComponents.defineContentfulOptimizationElements()
 
       /* --- Utility Functionality --- */
 
@@ -311,6 +358,7 @@ <h2>Entries</h2>
       const eventStream = document.querySelector('#event-stream')
       const viewEventDialogs = new Map()
       const hoverEventDialogs = new Map()
+      let currentConsent
 
       function isViewHeartbeatEvent(event) {
         return (
@@ -416,9 +464,11 @@ <h2>Entries</h2>
         const data = new FormData(form)
         const entryId = data.get('entryId')
 
-        await addOptimizedEntry(entryId)
+        await inspectEntry(entryId)
 
-        localStorage.setItem(LAST_ENTRY_ID_KEY, entryId)
+        if (typeof entryId === 'string') {
+          localStorage.setItem(LAST_ENTRY_ID_KEY, entryId)
+        }
       })
 
       /* --- Standard Rendering Code --- */
@@ -457,150 +507,185 @@ <h2>Entries</h2>
         }
       }
 
-      let renderEntriesPromise = Promise.resolve()
+      const manualViewEntryElements = new Map()
+      const configuredOptimizedEntryElements = new WeakSet()
+      const entryCache = new Map()
 
-      // Render optimized entries
-      async function renderOptimizedEntry(rawEntry, element, autoObserve = true) {
-        const { entry, selectedOptimization } =
-          contentfulOptimization.resolveOptimizedEntry(rawEntry)
+      function enableManualViewTracking(element, entry, selectedOptimization) {
+        if (!entry?.sys?.id || element.dataset.manualViewTracking !== 'true') return
+
+        contentfulOptimization.tracking.clearElement('views', element)
+        manualViewEntryElements.set(element, [entry, selectedOptimization])
+
+        if (currentConsent !== true) return
+
+        contentfulOptimization.tracking.enableElement('views', element, {
+          data: {
+            entryId: entry.sys.id,
+            optimizationId: selectedOptimization?.experienceId,
+            sticky: selectedOptimization?.sticky,
+            variantIndex: selectedOptimization?.variantIndex,
+          },
+        })
+      }
+
+      function getEntryText(entry) {
+        return typeof entry.fields?.text === 'string' ? entry.fields.text : 'No content'
+      }
+
+      function getBaselineEntryId(element, fallbackEntry) {
+        return element.dataset.manualEntryId ?? element.dataset.entryId ?? fallbackEntry.sys.id
+      }
+
+      function createNestedOptimizedEntry(nestedEntry) {
+        const nestedElement = document.createElement('ctfl-optimized-entry')
+
+        nestedElement.dataset.entryId = nestedEntry.sys.id
+        configureOptimizedEntryElement(nestedElement, nestedEntry)
+
+        return nestedElement
+      }
+
+      function decorateClickableEntryScenario(element, content) {
+        if (element.dataset.e2eClickScenario !== 'descendant') return
+
+        const button = document.createElement('button')
+        button.type = 'button'
+        button.dataset.testid = 'entry-click-descendant-button'
+        button.innerText = 'Trigger entry click tracking from descendant button'
+
+        content.appendChild(button)
+      }
+
+      function renderResolvedEntry(element, rawEntry, entry, selectedOptimization) {
+        const renderInline =
+          element.dataset.e2eEntryInline === 'true' || element.closest('button') !== null
+        const content = document.createElement(renderInline ? 'span' : 'div')
+        const baselineEntryId = getBaselineEntryId(element, rawEntry)
+
+        content.className = renderInline ? 'entry-content entry-content--inline' : 'entry-content'
+        content.dataset.testid = `content-${baselineEntryId}`
 
         if (isRichText(entry.fields?.text)) {
-          const div = document.createElement('div')
-          simpleRenderRichText(entry.fields.text, div)
-          element.replaceChildren(div)
+          simpleRenderRichText(entry.fields.text, content)
         } else {
-          const p = document.createElement('p')
-          p.innerText = entry.fields?.text
-          element.replaceChildren(p)
+          const textElement = document.createElement(renderInline ? 'span' : 'p')
+          textElement.innerText = getEntryText(entry)
+          content.appendChild(textElement)
         }
 
         if (entry.fields?.nested) {
-          const div = document.createElement('div')
-          div.className = 'nested'
+          const nested = document.createElement('div')
+          nested.className = 'nested'
 
           for (const nestedEntry of entry.fields.nested) {
-            await renderOptimizedEntry(nestedEntry, div, autoObserve)
+            nested.appendChild(createNestedOptimizedEntry(nestedEntry))
           }
 
-          element.appendChild(div)
+          content.appendChild(nested)
         }
 
-        document
-          .getElementById('entries')
-          .appendChild(
-            createEntryDialog(entry.fields.internalTitle, rawEntry, entry, selectedOptimization),
-          )
+        element.replaceChildren(content)
+        decorateClickableEntryScenario(element, content)
+
+        enableManualViewTracking(element, entry, selectedOptimization)
+      }
 
-        // NOTE: Elements that are not auto-observed may still be auto-tracked (see below)
-        if (autoObserve) {
-          // The `data-ctfl-entry-id` data attribute is required for auto-observing
-          element.dataset.ctflEntryId = entry.sys?.id
+      function handleOptimizedEntryResolved(event) {
+        if (event.target !== event.currentTarget) return
 
-          // Store the original optimized baseline ID so later rerenders do not resolve a variant entry
-          if (rawEntry.fields.nt_experiences) element.dataset.ctflBaselineId = rawEntry.sys?.id
+        const element = event.currentTarget
+        const rawEntry = element.baselineEntry
 
-          // Other standard auto-observing attributes are optional
-          if (selectedOptimization) {
-            element.dataset.ctflOptimizationId = selectedOptimization?.experienceId
-            element.dataset.ctflSticky = selectedOptimization?.sticky
-            element.dataset.ctflVariantIndex = selectedOptimization?.variantIndex
-          }
+        if (!rawEntry) return
+
+        renderResolvedEntry(
+          element,
+          rawEntry,
+          event.detail.entry,
+          event.detail.selectedOptimization,
+        )
+      }
+
+      function configureOptimizedEntryElement(element, baselineEntry) {
+        if (!configuredOptimizedEntryElements.has(element)) {
+          element.addEventListener('ctfl-entry-resolved', handleOptimizedEntryResolved)
+          configuredOptimizedEntryElements.add(element)
         }
 
-        return [entry, selectedOptimization]
+        element.baselineEntry = baselineEntry
       }
 
-      // Get the optimized entry to render
-      async function addOptimizedEntry(entryId, element, autoObserve = true) {
-        let rawEntry
+      async function fetchEntry(entryId) {
+        if (entryCache.has(entryId)) return entryCache.get(entryId)
 
         try {
-          rawEntry = await contentfulClient.getEntry(entryId, { include: 10 })
+          const entry = await contentfulClient.getEntry(entryId, {
+            include: 10,
+            locale: APP_LOCALE,
+          })
+
+          entryCache.set(entryId, entry)
+
+          return entry
         } catch (error) {
           console.warn(`Entry "${entryId}" could not be found in the current space`)
-          return []
-        }
 
-        return renderOptimizedEntry(rawEntry, element, autoObserve)
+          return undefined
+        }
       }
 
-      const manuallyObservedEntryElements = new Map()
-
-      // Manually observe view elements for auto-tracking
-      function manuallyObserveEntryElement(element, entry, selectedOptimization) {
-        if (!entry?.sys?.id) return
+      async function inspectEntry(entryId) {
+        if (typeof entryId !== 'string' || entryId.length === 0) return
 
-        contentfulOptimization.tracking.clearElement('views', element)
+        const rawEntry = await fetchEntry(entryId)
+        if (!rawEntry) return
 
-        // Manually observe the element for auto-tracking (does not use `data-ctfl-*` attributes)
-        contentfulOptimization.tracking.enableElement('views', element, {
-          data: {
-            // The `entryId` property is required for auto-tracking
-            entryId: entry.sys.id,
-            optimizationId: selectedOptimization?.experienceId,
-            sticky: selectedOptimization?.sticky,
-            variantIndex: selectedOptimization?.variantIndex,
-          },
-        })
+        const { entry, selectedOptimization } =
+          contentfulOptimization.resolveOptimizedEntry(rawEntry)
 
-        manuallyObservedEntryElements.set(element.dataset.entryId, [entry, selectedOptimization])
+        document
+          .getElementById('entries')
+          .appendChild(
+            createEntryDialog(entry.fields.internalTitle, rawEntry, entry, selectedOptimization),
+          )
       }
 
-      // Render all the entries
-      async function renderEntries() {
-        document.getElementById('entries').replaceChildren()
-
-        const autoObservedElements = Array.from(document.querySelectorAll('[data-ctfl-entry-id]'))
-
-        await Promise.all(
-          autoObservedElements.map(async (element) => {
-            await addOptimizedEntry(
-              element.dataset.ctflBaselineId ?? element.dataset.ctflEntryId,
-              element,
-              true,
-            )
-          }),
+      async function initializeOptimizedEntries() {
+        const optimizedEntryElements = Array.from(
+          document.querySelectorAll('ctfl-optimized-entry[data-entry-id]'),
         )
 
-        const manuallyObservedElements = Array.from(document.querySelectorAll('[data-entry-id]'))
-
         await Promise.all(
-          manuallyObservedElements.map(async (element) => {
-            const [entry, selectedOptimization] = await addOptimizedEntry(
-              element.dataset.entryId,
-              element,
-              false,
-            )
+          optimizedEntryElements.map(async (element) => {
+            const entryId = element.dataset.entryId
+            if (!entryId) return
 
+            const entry = await fetchEntry(entryId)
             if (!entry) return
 
-            manuallyObserveEntryElement(element, entry, selectedOptimization)
+            configureOptimizedEntryElement(element, entry)
           }),
         )
       }
 
-      function scheduleRenderEntries() {
-        renderEntriesPromise = renderEntriesPromise
-          .catch(() => undefined)
-          .then(() => renderEntries())
-
-        return renderEntriesPromise
-      }
+      void initializeOptimizedEntries()
 
       // Subscribe to consent state
-      contentfulOptimization.states.consent.subscribe(async (consent) => {
-        toggleConsent(consent)
-
-        if (consent)
-          document.querySelectorAll('[data-entry-id]').forEach((element) => {
-            const settings = manuallyObservedEntryElements.get(element.dataset.entryId)
-
-            if (!settings) return
+      contentfulOptimization.states.consent.subscribe(async (consented) => {
+        currentConsent = consented
+        toggleConsent(consented)
 
+        manualViewEntryElements.forEach((settings, element) => {
+          if (consented) {
             const [entry, selectedOptimization] = settings
 
-            manuallyObserveEntryElement(element, entry, selectedOptimization)
-          })
+            enableManualViewTracking(element, entry, selectedOptimization)
+            return
+          }
+
+          contentfulOptimization.tracking.clearElement('views', element)
+        })
       })
 
       // Subscribe to the event stream
@@ -645,21 +730,17 @@ <h2>Entries</h2>
       })
 
       // Subscribe to selectedOptimizations state
-      contentfulOptimization.states.selectedOptimizations.subscribe(
-        async (selectedOptimizations) => {
-          if (!selectedOptimizations) return
-
-          document.querySelector('#selected-optimizations').innerText = JSON.stringify(
-            selectedOptimizations,
-            null,
-            2,
-          )
+      contentfulOptimization.states.selectedOptimizations.subscribe((selectedOptimizations) => {
+        if (!selectedOptimizations) return
 
-          void scheduleRenderEntries()
-        },
-      )
+        document.querySelector('#selected-optimizations').innerText = JSON.stringify(
+          selectedOptimizations,
+          null,
+          2,
+        )
+      })
 
-      // Subscribe to profile state, find entries in the markup, and render them
+      // Subscribe to profile state
       contentfulOptimization.states.profile.subscribe((profile) => {
         if (!profile) return
 
@@ -671,6 +752,9 @@ <h2>Entries</h2>
 
         toggleIdentity(profile.traits && Object.keys(profile.traits).length)
       })
+
+      // Emit the initial page event after subscribers are attached so the dashboard can display it.
+      void contentfulOptimization.page()
     </script>
   </body>
 </html>
diff --git a/packages/web/web-sdk/dev/main.ts b/packages/web/web-sdk/dev/main.ts
index ee05eb57..bb08c1b6 100644
--- a/packages/web/web-sdk/dev/main.ts
+++ b/packages/web/web-sdk/dev/main.ts
@@ -1,3 +1,9 @@
 import ContentfulOptimization from '../src/ContentfulOptimization'
+import { defineContentfulOptimizationElements } from '../src/web-components'
 
-if (typeof window !== 'undefined') window.ContentfulOptimization ??= ContentfulOptimization
+if (typeof window !== 'undefined') {
+  window.ContentfulOptimization ??= ContentfulOptimization
+  Object.assign(window, {
+    ContentfulOptimizationWebComponents: { defineContentfulOptimizationElements },
+  })
+}
diff --git a/packages/web/web-sdk/package.json b/packages/web/web-sdk/package.json
index 213ffda3..98162f4b 100644
--- a/packages/web/web-sdk/package.json
+++ b/packages/web/web-sdk/package.json
@@ -52,6 +52,26 @@
         "default": "./dist/symbols.cjs"
       }
     },
+    "./presentation": {
+      "import": {
+        "types": "./dist/presentation.d.mts",
+        "default": "./dist/presentation.mjs"
+      },
+      "require": {
+        "types": "./dist/presentation.d.cts",
+        "default": "./dist/presentation.cjs"
+      }
+    },
+    "./web-components": {
+      "import": {
+        "types": "./dist/web-components.d.mts",
+        "default": "./dist/web-components.mjs"
+      },
+      "require": {
+        "types": "./dist/web-components.d.cts",
+        "default": "./dist/web-components.cjs"
+      }
+    },
     "./core-sdk": {
       "import": {
         "types": "./dist/core-sdk.d.mts",
@@ -91,8 +111,13 @@
     "bundleSize": {
       "gzipBudgets": {
         "contentful-optimization-web.umd.js": 33000,
-        "index.cjs": 11500,
-        "index.mjs": 10600
+        "index.cjs": 11600,
+        "index.mjs": 11700,
+        "contentful-optimization-web-components.umd.js": 36300,
+        "presentation.cjs": 2600,
+        "presentation.mjs": 2200,
+        "web-components.cjs": 15000,
+        "web-components.mjs": 16000
       }
     }
   },
@@ -110,6 +135,7 @@
   },
   "dependencies": {
     "@contentful/optimization-core": "workspace:*",
+    "contentful": "catalog:",
     "zod": "catalog:"
   },
   "devDependencies": {
diff --git a/packages/web/web-sdk/rslib.config.ts b/packages/web/web-sdk/rslib.config.ts
index 91d077a4..1abbf41d 100644
--- a/packages/web/web-sdk/rslib.config.ts
+++ b/packages/web/web-sdk/rslib.config.ts
@@ -57,6 +57,8 @@ export default defineConfig({
           logger: './src/logger.ts',
           constants: './src/constants.ts',
           symbols: './src/symbols.ts',
+          presentation: './src/presentation/index.ts',
+          'web-components': './src/web-components/index.ts',
           'core-sdk': './src/core-sdk.ts',
           'api-client': './src/api-client.ts',
           'api-schemas': './src/api-schemas.ts',
@@ -93,6 +95,8 @@ export default defineConfig({
           logger: './src/logger.ts',
           constants: './src/constants.ts',
           symbols: './src/symbols.ts',
+          presentation: './src/presentation/index.ts',
+          'web-components': './src/web-components/index.ts',
           'core-sdk': './src/core-sdk.ts',
           'api-client': './src/api-client.ts',
           'api-schemas': './src/api-schemas.ts',
@@ -136,5 +140,28 @@ export default defineConfig({
         },
       },
     },
+
+    {
+      ...common,
+      format: 'umd',
+      autoExternal: false,
+      umdName: 'ContentfulOptimizationWebComponents',
+      source: {
+        entry: {
+          'contentful-optimization-web-components.umd': './src/web-components/index.ts',
+        },
+      },
+      output: {
+        distPath: { root: 'dist' },
+        filename: { js: '[name].js' },
+        sourceMap: true,
+        cleanDistPath: false,
+        minify: true,
+      },
+      dts: false,
+      tools: {
+        rspack: maybeEnableRsDoctor,
+      },
+    },
   ],
 })
diff --git a/packages/web/web-sdk/src/constants.ts b/packages/web/web-sdk/src/constants.ts
index 7198c158..d5acff1c 100644
--- a/packages/web/web-sdk/src/constants.ts
+++ b/packages/web/web-sdk/src/constants.ts
@@ -47,7 +47,14 @@ export { ANONYMOUS_ID_COOKIE } from '@contentful/optimization-core/constants'
  *
  * @public
  */
-export const ENTRY_SELECTOR = '[data-ctfl-entry-id]'
+export const ENTRY_ID_ATTRIBUTE = 'data-ctfl-entry-id'
+
+/**
+ * Selector used to locate tracked entry elements in the DOM.
+ *
+ * @public
+ */
+export const ENTRY_SELECTOR = `[${ENTRY_ID_ATTRIBUTE}]`
 
 /**
  * Flag indicating whether the current environment can safely add DOM
diff --git a/packages/web/web-sdk/src/entry-tracking/registry/ElementExistenceObserver.test.ts b/packages/web/web-sdk/src/entry-tracking/registry/ElementExistenceObserver.test.ts
index 490c8590..a95db781 100644
--- a/packages/web/web-sdk/src/entry-tracking/registry/ElementExistenceObserver.test.ts
+++ b/packages/web/web-sdk/src/entry-tracking/registry/ElementExistenceObserver.test.ts
@@ -3,19 +3,23 @@ import ElementExistenceObserver from './ElementExistenceObserver'
 
 type MinimalRecord = Readonly<{
   addedNodes: readonly Node[]
+  attributeName?: string | null
   removedNodes: readonly Node[]
+  target?: Node
+  type?: MutationRecordType
 }>
 
 class MOStub {
   private readonly cb: (records: readonly MinimalRecord[]) => void
+  public observeOptions?: MutationObserverInit
 
   public constructor(callback: (records: readonly MinimalRecord[]) => void) {
     this.cb = callback
     instances.push(this)
   }
 
-  public observe(): void {
-    /* no-op */
+  public observe(_target: Node, options?: MutationObserverInit): void {
+    this.observeOptions = options
   }
 
   public disconnect(): void {
@@ -56,6 +60,13 @@ describe('ElementExistenceObserver', () => {
     root.append(child)
 
     const [mo] = instances
+    expect(mo?.observeOptions).toMatchObject({
+      attributeFilter: ['data-ctfl-entry-id'],
+      attributes: true,
+      childList: true,
+      subtree: true,
+    })
+
     mo?.emit([{ addedNodes: [child], removedNodes: [] }])
 
     expect(onAdded).toHaveBeenCalledTimes(1)
@@ -67,6 +78,34 @@ describe('ElementExistenceObserver', () => {
     eo.disconnect()
   })
 
+  it('reports entry id attribute changes as remove and add candidates', () => {
+    const root = document.createElement('div')
+    const entry = document.createElement('div')
+    document.body.append(root)
+    root.append(entry)
+
+    const onAdded = rs.fn()
+    const onRemoved = rs.fn()
+    const eo = new ElementExistenceObserver({ root, onAdded, onRemoved })
+    const [mo] = instances
+
+    entry.dataset.ctflEntryId = 'entry-attribute'
+    mo?.emit([
+      {
+        addedNodes: [],
+        attributeName: 'data-ctfl-entry-id',
+        removedNodes: [],
+        target: entry,
+        type: 'attributes',
+      },
+    ])
+
+    expect(onRemoved).toHaveBeenCalledWith([entry])
+    expect(onAdded).toHaveBeenCalledWith([entry])
+
+    eo.disconnect()
+  })
+
   it('lazily observes when a subscriber is added and stops dispatch after cleanup', () => {
     const root = document.createElement('div')
     document.body.append(root)
diff --git a/packages/web/web-sdk/src/entry-tracking/registry/ElementExistenceObserver.ts b/packages/web/web-sdk/src/entry-tracking/registry/ElementExistenceObserver.ts
index 153bb76f..f6774db6 100644
--- a/packages/web/web-sdk/src/entry-tracking/registry/ElementExistenceObserver.ts
+++ b/packages/web/web-sdk/src/entry-tracking/registry/ElementExistenceObserver.ts
@@ -1,4 +1,4 @@
-import { CAN_ADD_LISTENERS, HAS_MUTATION_OBSERVER } from '../../constants'
+import { CAN_ADD_LISTENERS, ENTRY_ID_ATTRIBUTE, HAS_MUTATION_OBSERVER } from '../../constants'
 import { safeCall } from '../../lib'
 
 const isNode = (value: unknown): value is Node =>
@@ -39,6 +39,43 @@ function collectElements(
   }
 }
 
+function collectEntryAttributeMutation(
+  record: MutationRecord,
+  addedNodes: Set<Node>,
+  removedNodes: Set<Node>,
+): boolean {
+  if (record.type !== 'attributes' || record.attributeName !== ENTRY_ID_ATTRIBUTE) {
+    return false
+  }
+
+  if (isNode(record.target)) {
+    removedNodes.add(record.target)
+    addedNodes.add(record.target)
+  }
+
+  return true
+}
+
+function collectChildListMutation(
+  record: MutationRecord,
+  addedNodes: Set<Node>,
+  removedNodes: Set<Node>,
+): void {
+  if (record.addedNodes.length > 0) {
+    record.addedNodes.forEach((node) => {
+      if (removedNodes.delete(node)) return
+      addedNodes.add(node)
+    })
+  }
+
+  if (record.removedNodes.length > 0) {
+    record.removedNodes.forEach((node) => {
+      if (addedNodes.delete(node)) return
+      removedNodes.add(node)
+    })
+  }
+}
+
 class ElementExistenceObserver {
   private observer?: MutationObserver
   private readonly root: Node | null
@@ -99,6 +136,8 @@ class ElementExistenceObserver {
     })
 
     this.observer.observe(this.root, {
+      attributeFilter: [ENTRY_ID_ATTRIBUTE],
+      attributes: true,
       childList: true,
       subtree: true,
     })
@@ -118,19 +157,9 @@ class ElementExistenceObserver {
     const removedNodes = new Set<Node>()
 
     for (const record of records) {
-      if (record.addedNodes.length > 0) {
-        record.addedNodes.forEach((node) => {
-          if (removedNodes.delete(node)) return
-          addedNodes.add(node)
-        })
-      }
+      if (collectEntryAttributeMutation(record, addedNodes, removedNodes)) continue
 
-      if (record.removedNodes.length > 0) {
-        record.removedNodes.forEach((node) => {
-          if (addedNodes.delete(node)) return
-          removedNodes.add(node)
-        })
-      }
+      collectChildListMutation(record, addedNodes, removedNodes)
     }
 
     if (addedNodes.size === 0 && removedNodes.size === 0) return
diff --git a/packages/web/web-sdk/src/entry-tracking/registry/EntryElementRegistry.test.ts b/packages/web/web-sdk/src/entry-tracking/registry/EntryElementRegistry.test.ts
index 51954681..d7eccac2 100644
--- a/packages/web/web-sdk/src/entry-tracking/registry/EntryElementRegistry.test.ts
+++ b/packages/web/web-sdk/src/entry-tracking/registry/EntryElementRegistry.test.ts
@@ -222,6 +222,55 @@ describe('EntryElementRegistry', () => {
     registry.disconnect()
   })
 
+  it('registers an entry when the entry id attribute is added after subscription', () => {
+    const { observer, getSubscriber } = createMockExistenceObserver()
+    const registry = new EntryElementRegistry(observer)
+    const onAdded = rs.fn()
+    registry.subscribe({ onAdded })
+
+    const existenceSubscriber = getSubscriber()
+    if (!existenceSubscriber?.onAdded || !existenceSubscriber.onRemoved) {
+      throw new Error('Expected registry to register onAdded/onRemoved existence subscribers')
+    }
+
+    const entry = document.createElement('div')
+    entry.dataset.ctflEntryId = 'late-entry'
+
+    existenceSubscriber.onRemoved([entry])
+    existenceSubscriber.onAdded([entry])
+
+    expect(onAdded).toHaveBeenCalledTimes(1)
+    expect(onAdded).toHaveBeenCalledWith(entry)
+
+    registry.disconnect()
+  })
+
+  it('unregisters an entry when the entry id attribute is removed after subscription', () => {
+    const { observer, getSubscriber } = createMockExistenceObserver()
+    const registry = new EntryElementRegistry(observer)
+    const onAdded = rs.fn()
+    const onRemoved = rs.fn()
+    registry.subscribe({ onAdded, onRemoved })
+
+    const existenceSubscriber = getSubscriber()
+    if (!existenceSubscriber?.onAdded || !existenceSubscriber.onRemoved) {
+      throw new Error('Expected registry to register onAdded/onRemoved existence subscribers')
+    }
+
+    const entry = createEntryElement('removed-entry-id')
+    existenceSubscriber.onAdded([entry])
+
+    delete entry.dataset.ctflEntryId
+    existenceSubscriber.onRemoved([entry])
+    existenceSubscriber.onAdded([entry])
+
+    expect(onAdded).toHaveBeenCalledTimes(1)
+    expect(onRemoved).toHaveBeenCalledTimes(1)
+    expect(onRemoved).toHaveBeenCalledWith(entry)
+
+    registry.disconnect()
+  })
+
   it('ignores remove notifications for entries that were never added', () => {
     const { observer, getSubscriber } = createMockExistenceObserver()
     const registry = new EntryElementRegistry(observer)
diff --git a/packages/web/web-sdk/src/entry-tracking/registry/EntryElementRegistry.ts b/packages/web/web-sdk/src/entry-tracking/registry/EntryElementRegistry.ts
index 89ce3fd8..d157bb79 100644
--- a/packages/web/web-sdk/src/entry-tracking/registry/EntryElementRegistry.ts
+++ b/packages/web/web-sdk/src/entry-tracking/registry/EntryElementRegistry.ts
@@ -22,7 +22,7 @@ interface EntryElementRegistrySubscriber {
  */
 export class EntryElementRegistry {
   private readonly elementExistenceObserver: ElementExistenceObserver
-  private readonly entries = new Set<EntryElement>()
+  private readonly entries = new Map<Element, EntryElement>()
   private readonly subscribers = new Set<EntryElementRegistrySubscriber>()
   private cleanupExistenceSubscription?: () => void
 
@@ -76,7 +76,7 @@ export class EntryElementRegistry {
   private onEntryAdded(entryElement: EntryElement): void {
     if (this.entries.has(entryElement)) return
 
-    this.entries.add(entryElement)
+    this.entries.set(entryElement, entryElement)
 
     this.subscribers.forEach((subscriber) => {
       EntryElementRegistry.notifyAdded(subscriber, entryElement)
@@ -101,6 +101,13 @@ export class EntryElementRegistry {
 
   private onElementsRemoved(elements: readonly Element[]): void {
     elements.forEach((element) => {
+      const registeredEntryElement = this.entries.get(element)
+
+      if (registeredEntryElement && !isEntryElement(element)) {
+        this.onEntryRemoved(registeredEntryElement)
+        return
+      }
+
       const entryElement = EntryElementRegistry.resolveEntryElementFromMutation(element)
       if (!entryElement) return
       this.onEntryRemoved(entryElement)
diff --git a/packages/web/web-sdk/src/presentation/OptimizedEntryController.test.ts b/packages/web/web-sdk/src/presentation/OptimizedEntryController.test.ts
new file mode 100644
index 00000000..333fdb86
--- /dev/null
+++ b/packages/web/web-sdk/src/presentation/OptimizedEntryController.test.ts
@@ -0,0 +1,334 @@
+import type {
+  ExperienceRequestState,
+  Observable,
+  ResolvedData,
+  Subscription,
+} from '@contentful/optimization-core'
+import type { SelectedOptimizationArray } from '@contentful/optimization-core/api-schemas'
+import type { Entry, EntrySkeletonType } from 'contentful'
+import {
+  OPTIMIZED_ENTRY_HOST_DISPLAY,
+  OptimizedEntryController,
+  resolveOptimizedEntryNestingState,
+  type OptimizedEntrySdk,
+} from './OptimizedEntryController'
+
+type Subscriber<T> = (value: T) => void
+
+interface TestObservable<T> extends Observable<T> {
+  emit: (value: T) => void
+  subscriberCount: () => number
+}
+
+function createObservable<T>(initialValue: T): TestObservable<T> {
+  const subscribers = new Set<Subscriber<T>>()
+  let currentValue = initialValue
+
+  return {
+    get current() {
+      return currentValue
+    },
+    emit(value: T) {
+      currentValue = value
+      subscribers.forEach((subscriber) => {
+        subscriber(value)
+      })
+    },
+    subscribe(next: Subscriber<T>): Subscription {
+      subscribers.add(next)
+      next(currentValue)
+
+      return {
+        unsubscribe() {
+          subscribers.delete(next)
+        },
+      }
+    },
+    subscribeOnce(next: (value: NonNullable<T>) => void): Subscription {
+      if (currentValue !== undefined && currentValue !== null) {
+        next(currentValue)
+      }
+
+      return { unsubscribe: () => undefined }
+    },
+    subscriberCount() {
+      return subscribers.size
+    },
+  }
+}
+
+function createTestEntry(id: string): Entry {
+  return {
+    fields: { title: id },
+    metadata: { tags: [] },
+    sys: {
+      contentType: { sys: { id: 'test-content-type', linkType: 'ContentType', type: 'Link' } },
+      createdAt: '2024-01-01T00:00:00.000Z',
+      environment: { sys: { id: 'main', linkType: 'Environment', type: 'Link' } },
+      id,
+      publishedVersion: 1,
+      revision: 1,
+      space: { sys: { id: 'space-id', linkType: 'Space', type: 'Link' } },
+      type: 'Entry',
+      updatedAt: '2024-01-01T00:00:00.000Z',
+    },
+  }
+}
+
+function createOptimizableTestEntry(id: string): Entry {
+  const entry = createTestEntry(id)
+  entry.fields = {
+    ...entry.fields,
+    nt_experiences: [{ sys: { id: 'experience-link' } }],
+  }
+
+  return entry
+}
+
+function createSdk(
+  resolveOptimizedEntry: (
+    entry: Entry,
+    selectedOptimizations: SelectedOptimizationArray | undefined,
+  ) => ResolvedData<EntrySkeletonType>,
+): {
+  readonly canOptimize: TestObservable<boolean>
+  readonly experienceRequestState: TestObservable<ExperienceRequestState>
+  readonly sdk: OptimizedEntrySdk
+  readonly selectedOptimizations: TestObservable<SelectedOptimizationArray | undefined>
+} {
+  const selectedOptimizations = createObservable<SelectedOptimizationArray | undefined>(undefined)
+  const canOptimize = createObservable(false)
+  const experienceRequestState = createObservable<ExperienceRequestState>({ status: 'idle' })
+
+  return {
+    canOptimize,
+    experienceRequestState,
+    sdk: {
+      resolveOptimizedEntry,
+      states: {
+        canOptimize,
+        experienceRequestState,
+        selectedOptimizations,
+      },
+    },
+    selectedOptimizations,
+  }
+}
+
+describe('OptimizedEntryController', () => {
+  const baseline = createTestEntry('baseline')
+  const optimizedBaseline = createOptimizableTestEntry('optimized-baseline')
+  const variantA = createTestEntry('variant-a')
+  const variantB = createTestEntry('variant-b')
+
+  const variantOneState: SelectedOptimizationArray = [
+    {
+      experienceId: 'exp-hero',
+      sticky: true,
+      variantIndex: 1,
+      variants: { baseline: 'variant-a' },
+    },
+  ]
+
+  const variantTwoState: SelectedOptimizationArray = [
+    {
+      experienceId: 'exp-hero',
+      sticky: false,
+      variantIndex: 2,
+      variants: { baseline: 'variant-b' },
+    },
+  ]
+
+  afterEach(() => {
+    rs.useRealTimers()
+  })
+
+  it('exposes the optimized entry host display invariant', () => {
+    expect(OPTIMIZED_ENTRY_HOST_DISPLAY).toBe('contents')
+  })
+
+  it('resolves duplicate baseline nesting state', () => {
+    const ancestorBaselineIds = new Set(['ancestor-baseline', 'duplicate-baseline'])
+
+    expect(resolveOptimizedEntryNestingState('child-baseline', ancestorBaselineIds)).toEqual({
+      currentAndAncestorBaselineIds: new Set([
+        'ancestor-baseline',
+        'duplicate-baseline',
+        'child-baseline',
+      ]),
+      hasDuplicateBaselineAncestor: false,
+    })
+
+    expect(resolveOptimizedEntryNestingState('duplicate-baseline', ancestorBaselineIds)).toEqual({
+      currentAndAncestorBaselineIds: ancestorBaselineIds,
+      hasDuplicateBaselineAncestor: true,
+    })
+  })
+
+  it('creates host attributes from the resolved presentation snapshot', () => {
+    const runtime = createSdk((entry, selectedOptimizations) => ({
+      entry: selectedOptimizations ? variantA : entry,
+      selectedOptimization: selectedOptimizations?.[0],
+    }))
+    const controller = new OptimizedEntryController({
+      isPresentationReady: true,
+      baselineEntry: baseline,
+      sdk: runtime.sdk,
+      isSdkStateReady: true,
+      trackClicks: true,
+      trackHovers: false,
+    })
+
+    controller.connect()
+
+    expect(controller.getSnapshot().hostAttributes).toMatchObject({
+      'data-ctfl-entry-id': 'baseline',
+      'data-ctfl-track-clicks': true,
+      'data-ctfl-track-hovers': false,
+      'data-ctfl-variant-index': 0,
+    })
+
+    runtime.selectedOptimizations.emit(variantOneState)
+
+    expect(controller.getSnapshot().hostAttributes).toMatchObject({
+      'data-ctfl-entry-id': 'variant-a',
+      'data-ctfl-optimization-id': 'exp-hero',
+      'data-ctfl-sticky': true,
+      'data-ctfl-variant-index': 1,
+    })
+
+    controller.disconnect()
+  })
+
+  it('keeps tracking attributes empty while optimized content is loading', () => {
+    const runtime = createSdk((entry, selectedOptimizations) => ({
+      entry: selectedOptimizations ? variantA : entry,
+      selectedOptimization: selectedOptimizations?.[0],
+    }))
+    const controller = new OptimizedEntryController({
+      isPresentationReady: true,
+      baselineEntry: optimizedBaseline,
+      sdk: runtime.sdk,
+      isSdkStateReady: true,
+    })
+
+    controller.connect()
+
+    expect(controller.getSnapshot()).toMatchObject({
+      hostAttributes: {},
+      isLoading: true,
+      loadingPresentation: {
+        hideLoadingLayoutTarget: true,
+        shouldRenderBaselineWhileLoading: true,
+        showLoadingFallback: true,
+      },
+    })
+
+    runtime.selectedOptimizations.emit(variantOneState)
+    runtime.canOptimize.emit(true)
+    runtime.experienceRequestState.emit({ status: 'success' })
+
+    expect(controller.getSnapshot()).toMatchObject({
+      entry: variantA,
+      isLoading: false,
+      hostAttributes: {
+        'data-ctfl-baseline-id': 'optimized-baseline',
+        'data-ctfl-entry-id': 'variant-a',
+      },
+    })
+
+    controller.disconnect()
+  })
+
+  it('reveals baseline presentation after the loading timeout', async () => {
+    rs.useFakeTimers()
+    const runtime = createSdk((entry) => ({ entry }))
+    const controller = new OptimizedEntryController({
+      isPresentationReady: true,
+      baselineEntry: optimizedBaseline,
+      hasCustomLoadingFallback: true,
+      baselineRevealTimeoutMs: 50,
+      sdk: runtime.sdk,
+      isSdkStateReady: true,
+    })
+
+    controller.connect()
+
+    expect(controller.getSnapshot().loadingPresentation).toMatchObject({
+      hideLoadingLayoutTarget: false,
+      shouldRenderBaselineWhileLoading: false,
+      showLoadingFallback: true,
+    })
+
+    await rs.advanceTimersByTimeAsync(50)
+
+    expect(controller.getSnapshot().loadingPresentation).toMatchObject({
+      hideLoadingLayoutTarget: false,
+      shouldRenderBaselineWhileLoading: true,
+      showLoadingFallback: true,
+    })
+
+    controller.disconnect()
+  })
+
+  it('locks selected optimizations unless live updates are enabled', () => {
+    const runtime = createSdk((entry, selectedOptimizations) => ({
+      entry:
+        selectedOptimizations?.[0]?.variantIndex === 1
+          ? variantA
+          : selectedOptimizations?.[0]?.variantIndex === 2
+            ? variantB
+            : entry,
+      selectedOptimization: selectedOptimizations?.[0],
+    }))
+    const controller = new OptimizedEntryController({
+      isPresentationReady: true,
+      baselineEntry: baseline,
+      sdk: runtime.sdk,
+      isSdkStateReady: true,
+    })
+
+    controller.connect()
+    runtime.selectedOptimizations.emit(variantOneState)
+    expect(controller.getSnapshot().entry).toBe(variantA)
+
+    runtime.selectedOptimizations.emit(variantTwoState)
+    expect(controller.getSnapshot().entry).toBe(variantA)
+
+    controller.updateOptions({
+      isPresentationReady: true,
+      baselineEntry: baseline,
+      isPreviewPanelOpen: true,
+      sdk: runtime.sdk,
+      isSdkStateReady: true,
+    })
+
+    expect(controller.getSnapshot().entry).toBe(variantB)
+
+    controller.disconnect()
+  })
+
+  it('cleans up SDK subscriptions and timers on disconnect', () => {
+    rs.useFakeTimers()
+    const runtime = createSdk((entry) => ({ entry }))
+    const controller = new OptimizedEntryController({
+      isPresentationReady: true,
+      baselineEntry: optimizedBaseline,
+      baselineRevealTimeoutMs: 50,
+      sdk: runtime.sdk,
+      isSdkStateReady: true,
+    })
+
+    controller.connect()
+    expect(runtime.selectedOptimizations.subscriberCount()).toBe(1)
+    expect(runtime.canOptimize.subscriberCount()).toBe(1)
+    expect(runtime.experienceRequestState.subscriberCount()).toBe(1)
+
+    controller.disconnect()
+
+    expect(runtime.selectedOptimizations.subscriberCount()).toBe(0)
+    expect(runtime.canOptimize.subscriberCount()).toBe(0)
+    expect(runtime.experienceRequestState.subscriberCount()).toBe(0)
+    expect(rs.getTimerCount()).toBe(0)
+  })
+})
diff --git a/packages/web/web-sdk/src/presentation/OptimizedEntryController.ts b/packages/web/web-sdk/src/presentation/OptimizedEntryController.ts
new file mode 100644
index 00000000..71f0426b
--- /dev/null
+++ b/packages/web/web-sdk/src/presentation/OptimizedEntryController.ts
@@ -0,0 +1,454 @@
+import type { Observable, ResolvedData, Subscription } from '@contentful/optimization-core'
+import type { SelectedOptimizationArray } from '@contentful/optimization-core/api-schemas'
+import type { Entry, EntrySkeletonType } from 'contentful'
+
+const BASELINE_REVEAL_TIMEOUT_MS = 5000
+
+type HostAttributeValue = string | boolean | number | undefined
+export type OptimizedEntryLoadingTargetDisplay = 'block' | 'inline'
+
+export const OPTIMIZED_ENTRY_HOST_DISPLAY = 'contents'
+
+interface ExperienceRequestStateLike {
+  readonly status: string
+}
+
+interface SelectedOptimizationWithDuplicationScope {
+  readonly duplicationScope?: unknown
+  readonly experienceId?: string
+  readonly sticky?: boolean
+  readonly variantIndex?: number
+}
+
+export interface OptimizedEntrySdk {
+  readonly states: {
+    readonly canOptimize: Observable<boolean>
+    readonly experienceRequestState: Observable<ExperienceRequestStateLike>
+    readonly selectedOptimizations: Observable<SelectedOptimizationArray | undefined>
+  }
+  resolveOptimizedEntry: (
+    entry: Entry,
+    selectedOptimizations?: SelectedOptimizationArray,
+  ) => ResolvedData<EntrySkeletonType>
+}
+
+export interface OptimizedEntrySnapshot {
+  readonly canOptimize: boolean
+  readonly entry: Entry
+  readonly hostAttributes: Record<string, HostAttributeValue>
+  readonly isLoading: boolean
+  readonly isReady: boolean
+  readonly loadingPresentation: {
+    readonly showLoadingFallback: boolean
+    readonly hideLoadingLayoutTarget: boolean
+    readonly shouldRenderBaselineWhileLoading: boolean
+    readonly targetDisplay: OptimizedEntryLoadingTargetDisplay
+  }
+  readonly resolvedData: ResolvedData<EntrySkeletonType>
+  readonly selectedOptimization: ResolvedData<EntrySkeletonType>['selectedOptimization']
+  readonly selectedOptimizations: SelectedOptimizationArray | undefined
+}
+
+export interface OptimizedEntryControllerOptions {
+  readonly isPresentationReady?: boolean
+  readonly baselineEntry: Entry
+  readonly entryLiveUpdatesEnabled?: boolean
+  readonly rootLiveUpdatesEnabled?: boolean
+  readonly hasCustomLoadingFallback?: boolean
+  readonly baselineRevealTimeoutMs?: number
+  readonly isPreviewPanelOpen?: boolean
+  readonly sdk?: OptimizedEntrySdk
+  readonly isSdkStateReady?: boolean
+  readonly targetDisplay?: OptimizedEntryLoadingTargetDisplay
+  readonly clickable?: boolean
+  readonly hoverDurationUpdateIntervalMs?: number
+  readonly trackClicks?: boolean
+  readonly trackHovers?: boolean
+  readonly trackViews?: boolean
+  readonly viewDurationUpdateIntervalMs?: number
+}
+
+export type OptimizedEntrySnapshotListener = (snapshot: OptimizedEntrySnapshot) => void
+
+interface NormalizedOptimizedEntryControllerOptions {
+  readonly isPresentationReady: boolean
+  readonly baselineEntry: Entry
+  readonly entryLiveUpdatesEnabled?: boolean
+  readonly rootLiveUpdatesEnabled: boolean
+  readonly hasCustomLoadingFallback: boolean
+  readonly baselineRevealTimeoutMs: number
+  readonly isPreviewPanelOpen: boolean
+  readonly sdk?: OptimizedEntrySdk
+  readonly isSdkStateReady: boolean
+  readonly targetDisplay: OptimizedEntryLoadingTargetDisplay
+  readonly clickable?: boolean
+  readonly hoverDurationUpdateIntervalMs?: number
+  readonly trackClicks?: boolean
+  readonly trackHovers?: boolean
+  readonly trackViews?: boolean
+  readonly viewDurationUpdateIntervalMs?: number
+}
+
+export interface OptimizedEntryNestingState {
+  readonly currentAndAncestorBaselineIds: ReadonlySet<string>
+  readonly hasDuplicateBaselineAncestor: boolean
+}
+
+function normalizeOptions(
+  options: OptimizedEntryControllerOptions,
+): NormalizedOptimizedEntryControllerOptions {
+  return {
+    isPresentationReady: options.isPresentationReady ?? false,
+    baselineEntry: options.baselineEntry,
+    entryLiveUpdatesEnabled: options.entryLiveUpdatesEnabled,
+    rootLiveUpdatesEnabled: options.rootLiveUpdatesEnabled ?? false,
+    hasCustomLoadingFallback: options.hasCustomLoadingFallback ?? false,
+    baselineRevealTimeoutMs: options.baselineRevealTimeoutMs ?? BASELINE_REVEAL_TIMEOUT_MS,
+    isPreviewPanelOpen: options.isPreviewPanelOpen ?? false,
+    sdk: options.sdk,
+    isSdkStateReady: options.isSdkStateReady ?? false,
+    targetDisplay: options.targetDisplay ?? 'block',
+    clickable: options.clickable,
+    hoverDurationUpdateIntervalMs: options.hoverDurationUpdateIntervalMs,
+    trackClicks: options.trackClicks,
+    trackHovers: options.trackHovers,
+    trackViews: options.trackViews,
+    viewDurationUpdateIntervalMs: options.viewDurationUpdateIntervalMs,
+  }
+}
+
+export function hasOptimizationReferences(entry: Entry): boolean {
+  return Array.isArray(entry.fields.nt_experiences) && entry.fields.nt_experiences.length > 0
+}
+
+export function resolveOptimizedEntryNestingState(
+  baselineEntryId: string,
+  ancestorBaselineIds: ReadonlySet<string> | null | undefined,
+): OptimizedEntryNestingState {
+  const hasDuplicateBaselineAncestor = ancestorBaselineIds?.has(baselineEntryId) ?? false
+  const currentAndAncestorBaselineIds = new Set(ancestorBaselineIds ?? [])
+  currentAndAncestorBaselineIds.add(baselineEntryId)
+
+  return {
+    currentAndAncestorBaselineIds,
+    hasDuplicateBaselineAncestor,
+  }
+}
+
+export function resolveShouldLiveUpdate(params: {
+  readonly entryLiveUpdatesEnabled: boolean | undefined
+  readonly rootLiveUpdatesEnabled: boolean
+  readonly isPreviewPanelOpen: boolean
+}): boolean {
+  const { entryLiveUpdatesEnabled, rootLiveUpdatesEnabled, isPreviewPanelOpen } = params
+
+  if (isPreviewPanelOpen) {
+    return true
+  }
+
+  return entryLiveUpdatesEnabled ?? rootLiveUpdatesEnabled
+}
+
+function resolveDuplicationScope(
+  selectedOptimization: ResolvedData<EntrySkeletonType>['selectedOptimization'],
+): string | undefined {
+  const candidate = (selectedOptimization as SelectedOptimizationWithDuplicationScope | undefined)
+    ?.duplicationScope
+
+  if (typeof candidate !== 'string') {
+    return undefined
+  }
+
+  return candidate.trim() ? candidate : undefined
+}
+
+function resolveTrackingAttributes(
+  baselineEntry: Entry,
+  resolvedData: ResolvedData<EntrySkeletonType>,
+  options: Pick<
+    NormalizedOptimizedEntryControllerOptions,
+    | 'clickable'
+    | 'hoverDurationUpdateIntervalMs'
+    | 'trackClicks'
+    | 'trackHovers'
+    | 'trackViews'
+    | 'viewDurationUpdateIntervalMs'
+  >,
+): Record<string, HostAttributeValue> {
+  const {
+    selectedOptimization,
+    entry: {
+      sys: { id: entryId },
+    },
+  } = resolvedData
+  const {
+    clickable,
+    hoverDurationUpdateIntervalMs,
+    trackClicks,
+    trackHovers,
+    trackViews,
+    viewDurationUpdateIntervalMs,
+  } = options
+
+  return {
+    'data-ctfl-baseline-id': baselineEntry.sys.id,
+    'data-ctfl-clickable': clickable === true ? true : undefined,
+    'data-ctfl-duplication-scope': resolveDuplicationScope(selectedOptimization),
+    'data-ctfl-entry-id': entryId,
+    'data-ctfl-hover-duration-update-interval-ms': hoverDurationUpdateIntervalMs,
+    'data-ctfl-optimization-id': selectedOptimization?.experienceId,
+    'data-ctfl-sticky': selectedOptimization?.sticky,
+    'data-ctfl-track-clicks': trackClicks,
+    'data-ctfl-track-hovers': trackHovers,
+    'data-ctfl-track-views': trackViews,
+    'data-ctfl-variant-index': selectedOptimization?.variantIndex ?? 0,
+    'data-ctfl-view-duration-update-interval-ms': viewDurationUpdateIntervalMs,
+  }
+}
+
+function createBaselineResolvedData(entry: Entry): ResolvedData<EntrySkeletonType> {
+  return { entry, selectedOptimization: undefined }
+}
+
+function isExperienceRequestSettled(state: ExperienceRequestStateLike): boolean {
+  return state.status === 'success' || state.status === 'failed'
+}
+
+function areHostAttributesEqual(
+  left: Record<string, HostAttributeValue>,
+  right: Record<string, HostAttributeValue>,
+): boolean {
+  const leftKeys = Object.keys(left)
+  const rightKeys = Object.keys(right)
+
+  if (leftKeys.length !== rightKeys.length) {
+    return false
+  }
+
+  return leftKeys.every((key) => left[key] === right[key])
+}
+
+function areLoadingPresentationsEqual(
+  left: OptimizedEntrySnapshot['loadingPresentation'],
+  right: OptimizedEntrySnapshot['loadingPresentation'],
+): boolean {
+  return (
+    left.showLoadingFallback === right.showLoadingFallback &&
+    left.hideLoadingLayoutTarget === right.hideLoadingLayoutTarget &&
+    left.shouldRenderBaselineWhileLoading === right.shouldRenderBaselineWhileLoading &&
+    left.targetDisplay === right.targetDisplay
+  )
+}
+
+function areSnapshotsEqual(left: OptimizedEntrySnapshot, right: OptimizedEntrySnapshot): boolean {
+  return (
+    left.canOptimize === right.canOptimize &&
+    left.entry === right.entry &&
+    left.isLoading === right.isLoading &&
+    left.isReady === right.isReady &&
+    left.selectedOptimization === right.selectedOptimization &&
+    left.selectedOptimizations === right.selectedOptimizations &&
+    areLoadingPresentationsEqual(left.loadingPresentation, right.loadingPresentation) &&
+    areHostAttributesEqual(left.hostAttributes, right.hostAttributes)
+  )
+}
+
+export class OptimizedEntryController {
+  private canOptimize = false
+  private connected = false
+  private hasExperienceRequestSettled = false
+  private listener: OptimizedEntrySnapshotListener | undefined = undefined
+  private baselineRevealTimeout: ReturnType<typeof setTimeout> | undefined = undefined
+  private options: NormalizedOptimizedEntryControllerOptions
+  private hasBaselineRevealTimedOut = false
+  private selectedOptimizations: SelectedOptimizationArray | undefined = undefined
+  private snapshot: OptimizedEntrySnapshot
+  private subscriptions: Subscription[] = []
+
+  constructor(options: OptimizedEntryControllerOptions) {
+    this.options = normalizeOptions(options)
+    this.snapshot = this.createSnapshot()
+  }
+
+  setSnapshotListener(listener: OptimizedEntrySnapshotListener | undefined): void {
+    this.listener = listener
+  }
+
+  connect(): void {
+    if (this.connected) {
+      return
+    }
+
+    this.connected = true
+    this.resubscribe()
+    this.updateSnapshot()
+  }
+
+  disconnect(): void {
+    this.connected = false
+    this.clearSubscriptions()
+    this.clearLoadingRevealTimer()
+  }
+
+  updateOptions(options: OptimizedEntryControllerOptions): void {
+    const { options: previousOptions } = this
+    const previousShouldLiveUpdate = this.shouldLiveUpdate()
+    this.options = normalizeOptions(options)
+
+    if (!this.options.sdk || !this.options.isSdkStateReady) {
+      this.canOptimize = false
+      this.hasExperienceRequestSettled = false
+    }
+
+    if (
+      this.connected &&
+      (previousOptions.sdk !== this.options.sdk ||
+        previousOptions.isSdkStateReady !== this.options.isSdkStateReady ||
+        previousShouldLiveUpdate !== this.shouldLiveUpdate())
+    ) {
+      this.resubscribe()
+    }
+
+    this.updateSnapshot()
+  }
+
+  getSnapshot(): OptimizedEntrySnapshot {
+    return this.snapshot
+  }
+
+  private shouldLiveUpdate(): boolean {
+    return resolveShouldLiveUpdate({
+      entryLiveUpdatesEnabled: this.options.entryLiveUpdatesEnabled,
+      rootLiveUpdatesEnabled: this.options.rootLiveUpdatesEnabled,
+      isPreviewPanelOpen: this.options.isPreviewPanelOpen,
+    })
+  }
+
+  private clearSubscriptions(): void {
+    this.subscriptions.forEach((subscription) => {
+      subscription.unsubscribe()
+    })
+    this.subscriptions = []
+  }
+
+  private resubscribe(): void {
+    this.clearSubscriptions()
+
+    const { options } = this
+    const { sdk, isSdkStateReady } = options
+    if (!sdk || !isSdkStateReady) {
+      return
+    }
+
+    this.subscriptions = [
+      sdk.states.selectedOptimizations.subscribe((selectedOptimizations) => {
+        if (this.shouldLiveUpdate()) {
+          this.selectedOptimizations = selectedOptimizations
+          this.updateSnapshot()
+          return
+        }
+
+        if (this.selectedOptimizations === undefined && selectedOptimizations !== undefined) {
+          this.selectedOptimizations = selectedOptimizations
+          this.updateSnapshot()
+        }
+      }),
+      sdk.states.canOptimize.subscribe((canOptimize) => {
+        this.canOptimize = canOptimize
+        this.updateSnapshot()
+      }),
+      sdk.states.experienceRequestState.subscribe((state) => {
+        this.hasExperienceRequestSettled = isExperienceRequestSettled(state)
+        this.updateSnapshot()
+      }),
+    ]
+  }
+
+  private resolveIsLoading(): boolean {
+    const requiresOptimization = hasOptimizationReferences(this.options.baselineEntry)
+    const isContentReady = !requiresOptimization || this.hasExperienceRequestSettled
+
+    return !isContentReady
+  }
+
+  private createSnapshot(): OptimizedEntrySnapshot {
+    const isLoading = this.resolveIsLoading()
+    const isServerRender = typeof window === 'undefined'
+    const showLoadingFallback = isLoading || (isServerRender && !this.options.isPresentationReady)
+    const shouldRenderBaselineWhileLoading =
+      !this.options.hasCustomLoadingFallback || this.hasBaselineRevealTimedOut
+    const hideLoadingLayoutTarget =
+      isServerRender || (shouldRenderBaselineWhileLoading && !this.hasBaselineRevealTimedOut)
+    const resolvedData =
+      this.options.sdk && this.options.isSdkStateReady
+        ? this.options.sdk.resolveOptimizedEntry(
+            this.options.baselineEntry,
+            this.selectedOptimizations,
+          )
+        : createBaselineResolvedData(this.options.baselineEntry)
+
+    return {
+      canOptimize: this.canOptimize,
+      entry: resolvedData.entry,
+      hostAttributes: showLoadingFallback
+        ? {}
+        : resolveTrackingAttributes(this.options.baselineEntry, resolvedData, this.options),
+      isLoading,
+      isReady: this.options.isPresentationReady,
+      loadingPresentation: {
+        showLoadingFallback,
+        hideLoadingLayoutTarget,
+        shouldRenderBaselineWhileLoading,
+        targetDisplay: this.options.targetDisplay,
+      },
+      resolvedData,
+      selectedOptimization: resolvedData.selectedOptimization,
+      selectedOptimizations: this.selectedOptimizations,
+    }
+  }
+
+  private updateSnapshot(): void {
+    const isLoading = this.resolveIsLoading()
+
+    if (!isLoading) {
+      this.hasBaselineRevealTimedOut = false
+    }
+
+    const nextSnapshot = this.createSnapshot()
+    const { snapshot: previousSnapshot } = this
+    this.snapshot = nextSnapshot
+    this.syncLoadingRevealTimer(isLoading)
+
+    if (!areSnapshotsEqual(previousSnapshot, nextSnapshot)) {
+      this.listener?.(nextSnapshot)
+    }
+  }
+
+  private syncLoadingRevealTimer(isLoading: boolean): void {
+    if (!this.connected || !isLoading || this.hasBaselineRevealTimedOut) {
+      if (!isLoading || this.hasBaselineRevealTimedOut) {
+        this.clearLoadingRevealTimer()
+      }
+      return
+    }
+
+    if (this.baselineRevealTimeout !== undefined) {
+      return
+    }
+
+    this.baselineRevealTimeout = setTimeout(() => {
+      this.baselineRevealTimeout = undefined
+      this.hasBaselineRevealTimedOut = true
+      this.updateSnapshot()
+    }, this.options.baselineRevealTimeoutMs)
+  }
+
+  private clearLoadingRevealTimer(): void {
+    if (this.baselineRevealTimeout === undefined) {
+      return
+    }
+
+    clearTimeout(this.baselineRevealTimeout)
+    this.baselineRevealTimeout = undefined
+  }
+}
diff --git a/packages/web/web-sdk/src/presentation/index.ts b/packages/web/web-sdk/src/presentation/index.ts
new file mode 100644
index 00000000..8ca3dfd2
--- /dev/null
+++ b/packages/web/web-sdk/src/presentation/index.ts
@@ -0,0 +1,23 @@
+export {
+  createOptimizationRootSdkBinding,
+  disposeOptimizationRootSdkBinding,
+  resolveTrackEntryInteractionOptions,
+  type CreateInjectedOptimizationRootSdkBindingOptions,
+  type CreateOwnedOptimizationRootSdkBindingOptions,
+  type OnStatesReady,
+  type OptimizationRootSdk,
+  type OptimizationRootSdkBinding,
+  type OptimizationRootSdkConfig,
+  type TrackEntryInteractionOptions,
+} from './optimizationRootRuntime'
+export {
+  OPTIMIZED_ENTRY_HOST_DISPLAY,
+  OptimizedEntryController,
+  resolveOptimizedEntryNestingState,
+  type OptimizedEntryControllerOptions,
+  type OptimizedEntryLoadingTargetDisplay,
+  type OptimizedEntryNestingState,
+  type OptimizedEntrySdk,
+  type OptimizedEntrySnapshot,
+  type OptimizedEntrySnapshotListener,
+} from './OptimizedEntryController'
diff --git a/packages/web/web-sdk/src/presentation/optimizationRootRuntime.ts b/packages/web/web-sdk/src/presentation/optimizationRootRuntime.ts
new file mode 100644
index 00000000..46994dd2
--- /dev/null
+++ b/packages/web/web-sdk/src/presentation/optimizationRootRuntime.ts
@@ -0,0 +1,108 @@
+import type { Observable } from '@contentful/optimization-core'
+import type { OptimizationWebConfig } from '../ContentfulOptimization'
+import type { AutoTrackEntryInteractionOptions } from '../entry-tracking'
+import type { OptimizedEntrySdk } from './OptimizedEntryController'
+
+type Cleanup = () => void
+type OnStatesReadyResult = Cleanup | ReturnType<Cleanup>
+
+export type TrackEntryInteractionOptions = AutoTrackEntryInteractionOptions
+export type OptimizationRootSdkConfig = Omit<OptimizationWebConfig, 'autoTrackEntryInteraction'>
+
+export interface OptimizationRootSdk extends OptimizedEntrySdk {
+  readonly states: OptimizedEntrySdk['states'] & {
+    readonly previewPanelOpen: Observable<boolean>
+  }
+  destroy: () => void
+  setLocale: (locale: string) => string | undefined
+}
+
+export type OnStatesReady<TSdk extends OptimizationRootSdk = OptimizationRootSdk> = (
+  states: TSdk['states'],
+) => OnStatesReadyResult
+
+export interface OptimizationRootSdkBinding<
+  TSdk extends OptimizationRootSdk = OptimizationRootSdk,
+> {
+  readonly cleanup?: Cleanup
+  readonly ownsInstance: boolean
+  readonly sdk: TSdk
+}
+
+export interface CreateInjectedOptimizationRootSdkBindingOptions<TSdk extends OptimizationRootSdk> {
+  readonly onStatesReady?: OnStatesReady<TSdk>
+  readonly sdk: TSdk
+}
+
+export interface CreateOwnedOptimizationRootSdkBindingOptions<
+  TSdk extends OptimizationRootSdk = OptimizationRootSdk,
+> {
+  readonly config: OptimizationRootSdkConfig
+  readonly createSdk: (config: OptimizationWebConfig) => TSdk
+  readonly onStatesReady?: OnStatesReady<TSdk>
+  readonly trackEntryInteraction?: TrackEntryInteractionOptions
+}
+
+function getCleanup<TSdk extends OptimizationRootSdk>(
+  sdk: TSdk,
+  onStatesReady: OnStatesReady<TSdk> | undefined,
+): Cleanup | undefined {
+  const cleanup = onStatesReady?.(sdk.states)
+  return typeof cleanup === 'function' ? cleanup : undefined
+}
+
+function createOwnedSdkBinding<TSdk extends OptimizationRootSdk>(
+  sdk: TSdk,
+  onStatesReady: OnStatesReady<TSdk> | undefined,
+): OptimizationRootSdkBinding<TSdk> {
+  try {
+    return {
+      cleanup: getCleanup(sdk, onStatesReady),
+      ownsInstance: true,
+      sdk,
+    }
+  } catch (error) {
+    sdk.destroy()
+    throw error
+  }
+}
+
+export function resolveTrackEntryInteractionOptions(
+  trackEntryInteraction: TrackEntryInteractionOptions | undefined,
+): Required<AutoTrackEntryInteractionOptions> {
+  return {
+    clicks: trackEntryInteraction?.clicks ?? false,
+    hovers: trackEntryInteraction?.hovers ?? false,
+    views: trackEntryInteraction?.views ?? true,
+  }
+}
+
+export function createOptimizationRootSdkBinding<TSdk extends OptimizationRootSdk>(
+  options:
+    | CreateInjectedOptimizationRootSdkBindingOptions<TSdk>
+    | CreateOwnedOptimizationRootSdkBindingOptions<TSdk>,
+): OptimizationRootSdkBinding<TSdk> {
+  if ('sdk' in options) {
+    return {
+      cleanup: getCleanup(options.sdk, options.onStatesReady),
+      ownsInstance: false,
+      sdk: options.sdk,
+    }
+  }
+
+  const config = {
+    ...options.config,
+    autoTrackEntryInteraction: resolveTrackEntryInteractionOptions(options.trackEntryInteraction),
+  }
+
+  return createOwnedSdkBinding(options.createSdk(config), options.onStatesReady)
+}
+
+export function disposeOptimizationRootSdkBinding(
+  sdkBinding: OptimizationRootSdkBinding | undefined,
+): void {
+  sdkBinding?.cleanup?.()
+  if (sdkBinding?.ownsInstance === true) {
+    sdkBinding.sdk.destroy()
+  }
+}
diff --git a/packages/web/web-sdk/src/web-components/ContentfulOptimizationRootElement.ts b/packages/web/web-sdk/src/web-components/ContentfulOptimizationRootElement.ts
new file mode 100644
index 00000000..3ebc726b
--- /dev/null
+++ b/packages/web/web-sdk/src/web-components/ContentfulOptimizationRootElement.ts
@@ -0,0 +1,332 @@
+import ContentfulOptimization from '../ContentfulOptimization'
+import {
+  OPTIMIZED_ENTRY_HOST_DISPLAY,
+  createOptimizationRootSdkBinding,
+  disposeOptimizationRootSdkBinding,
+  type OnStatesReady,
+  type OptimizationRootSdk,
+  type OptimizationRootSdkBinding,
+  type OptimizationRootSdkConfig,
+  type TrackEntryInteractionOptions,
+} from '../presentation'
+
+const ROOT_READY_EVENT = 'ctfl-root-ready'
+const ROOT_ERROR_EVENT = 'ctfl-root-error'
+
+type OptimizationRootContextSubscriber = (context: ContentfulOptimizationRootContext) => void
+
+export interface ContentfulOptimizationRootContext {
+  readonly error: Error | undefined
+  readonly rootLiveUpdatesEnabled: boolean
+  readonly isSdkReady: boolean
+  readonly isPreviewPanelOpen: boolean
+  readonly sdk: OptimizationRootSdk | undefined
+}
+
+export interface ContentfulOptimizationRootReadyEventDetail {
+  readonly sdk: OptimizationRootSdk
+}
+
+export interface ContentfulOptimizationRootErrorEventDetail {
+  readonly error: Error
+}
+
+function toError(error: unknown): Error {
+  return error instanceof Error ? error : new Error(String(error))
+}
+
+function parseBooleanAttribute(value: string | null): boolean {
+  return value !== null && value !== 'false'
+}
+
+function getGlobalSdk(): OptimizationRootSdk | undefined {
+  if (typeof window === 'undefined') {
+    return undefined
+  }
+
+  return window.contentfulOptimization
+}
+
+export class ContentfulOptimizationRootElement extends HTMLElement {
+  static get observedAttributes(): string[] {
+    return ['client-id', 'environment', 'live-updates', 'locale']
+  }
+
+  private apiOptions: OptimizationRootSdkConfig['api'] | undefined = undefined
+  private context: ContentfulOptimizationRootContext = {
+    error: undefined,
+    rootLiveUpdatesEnabled: false,
+    isSdkReady: false,
+    isPreviewPanelOpen: false,
+    sdk: undefined,
+  }
+  private defaultOptions: OptimizationRootSdkConfig['defaults'] | undefined = undefined
+  private onStatesReadyHandler: OnStatesReady | undefined = undefined
+  private previewPanelOpenSubscription: { unsubscribe: () => void } | undefined = undefined
+  private sdkBinding: OptimizationRootSdkBinding | undefined = undefined
+  private assignedSdk: OptimizationRootSdk | undefined = undefined
+  private readonly subscribers = new Set<OptimizationRootContextSubscriber>()
+  private trackEntryInteractionOptions: TrackEntryInteractionOptions | undefined = undefined
+
+  get clientId(): string | undefined {
+    return this.getAttribute('client-id') ?? undefined
+  }
+
+  set clientId(value: string | undefined) {
+    if (value === undefined) {
+      this.removeAttribute('client-id')
+      return
+    }
+
+    this.setAttribute('client-id', value)
+  }
+
+  get environment(): string | undefined {
+    return this.getAttribute('environment') ?? undefined
+  }
+
+  set environment(value: string | undefined) {
+    if (value === undefined) {
+      this.removeAttribute('environment')
+      return
+    }
+
+    this.setAttribute('environment', value)
+  }
+
+  get locale(): string | undefined {
+    return this.getAttribute('locale') ?? undefined
+  }
+
+  set locale(value: string | undefined) {
+    if (value === undefined) {
+      this.removeAttribute('locale')
+      return
+    }
+
+    this.setAttribute('locale', value)
+  }
+
+  get liveUpdates(): boolean {
+    return parseBooleanAttribute(this.getAttribute('live-updates'))
+  }
+
+  set liveUpdates(value: boolean) {
+    if (value) {
+      this.setAttribute('live-updates', '')
+      return
+    }
+
+    this.removeAttribute('live-updates')
+  }
+
+  get defaults(): OptimizationRootSdkConfig['defaults'] | undefined {
+    return this.defaultOptions
+  }
+
+  set defaults(value: OptimizationRootSdkConfig['defaults'] | undefined) {
+    this.defaultOptions = value
+    this.reinitializeIfConnected()
+  }
+
+  get api(): OptimizationRootSdkConfig['api'] | undefined {
+    return this.apiOptions
+  }
+
+  set api(value: OptimizationRootSdkConfig['api'] | undefined) {
+    this.apiOptions = value
+    this.reinitializeIfConnected()
+  }
+
+  get trackEntryInteraction(): TrackEntryInteractionOptions | undefined {
+    return this.trackEntryInteractionOptions
+  }
+
+  set trackEntryInteraction(value: TrackEntryInteractionOptions | undefined) {
+    this.trackEntryInteractionOptions = value
+    this.reinitializeIfConnected()
+  }
+
+  get sdk(): OptimizationRootSdk | undefined {
+    return this.assignedSdk
+  }
+
+  set sdk(value: OptimizationRootSdk | undefined) {
+    this.assignedSdk = value
+    this.reinitializeIfConnected()
+  }
+
+  get onStatesReady(): OnStatesReady | undefined {
+    return this.onStatesReadyHandler
+  }
+
+  set onStatesReady(value: OnStatesReady | undefined) {
+    this.onStatesReadyHandler = value
+    this.reinitializeIfConnected()
+  }
+
+  connectedCallback(): void {
+    this.style.display ||= OPTIMIZED_ENTRY_HOST_DISPLAY
+
+    this.initializeSdkBinding()
+  }
+
+  disconnectedCallback(): void {
+    this.teardownSdkBinding()
+  }
+
+  attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void {
+    if (oldValue === newValue || !this.isConnected) {
+      return
+    }
+
+    if (name === 'live-updates') {
+      this.publishContext({ rootLiveUpdatesEnabled: this.liveUpdates })
+      return
+    }
+
+    if (name === 'locale') {
+      this.applyLocaleUpdate()
+      return
+    }
+
+    this.initializeSdkBinding()
+  }
+
+  subscribeOptimizationContext(subscriber: OptimizationRootContextSubscriber): () => void {
+    this.subscribers.add(subscriber)
+    subscriber(this.context)
+
+    return () => {
+      this.subscribers.delete(subscriber)
+    }
+  }
+
+  private reinitializeIfConnected(): void {
+    if (!this.isConnected) {
+      return
+    }
+
+    this.initializeSdkBinding()
+  }
+
+  private initializeSdkBinding(): void {
+    this.teardownSdkBinding()
+
+    try {
+      const providedSdk = this.assignedSdk ?? getGlobalSdk()
+      const sdkBinding =
+        providedSdk === undefined
+          ? createOptimizationRootSdkBinding({
+              config: this.createConfig(),
+              createSdk: (config) => new ContentfulOptimization(config),
+              onStatesReady: this.onStatesReadyHandler,
+              trackEntryInteraction: this.trackEntryInteractionOptions,
+            })
+          : createOptimizationRootSdkBinding({
+              onStatesReady: this.onStatesReadyHandler,
+              sdk: providedSdk,
+            })
+
+      this.sdkBinding = sdkBinding
+      this.subscribeToPreviewPanelOpenState(sdkBinding.sdk)
+      this.publishContext({
+        error: undefined,
+        rootLiveUpdatesEnabled: this.liveUpdates,
+        isSdkReady: true,
+        isPreviewPanelOpen: false,
+        sdk: sdkBinding.sdk,
+      })
+      this.dispatchEvent(
+        new CustomEvent<ContentfulOptimizationRootReadyEventDetail>(ROOT_READY_EVENT, {
+          bubbles: true,
+          composed: true,
+          detail: { sdk: sdkBinding.sdk },
+        }),
+      )
+    } catch (error: unknown) {
+      const normalizedError = toError(error)
+      this.publishContext({
+        error: normalizedError,
+        isSdkReady: false,
+        isPreviewPanelOpen: false,
+        sdk: undefined,
+      })
+      this.dispatchEvent(
+        new CustomEvent<ContentfulOptimizationRootErrorEventDetail>(ROOT_ERROR_EVENT, {
+          bubbles: true,
+          composed: true,
+          detail: { error: normalizedError },
+        }),
+      )
+    }
+  }
+
+  private createConfig(): OptimizationRootSdkConfig {
+    const { clientId } = this
+
+    if (!clientId) {
+      throw new Error('ctfl-optimization-root requires a client-id attribute or sdk property.')
+    }
+
+    return {
+      api: this.apiOptions,
+      clientId,
+      defaults: this.defaultOptions,
+      environment: this.environment,
+      locale: this.locale,
+    }
+  }
+
+  private subscribeToPreviewPanelOpenState(sdk: OptimizationRootSdk): void {
+    this.previewPanelOpenSubscription = sdk.states.previewPanelOpen.subscribe(
+      (isPreviewPanelOpen) => {
+        this.publishContext({ isPreviewPanelOpen })
+      },
+    )
+  }
+
+  private applyLocaleUpdate(): void {
+    if (!this.sdkBinding?.ownsInstance || this.locale === undefined) {
+      return
+    }
+
+    try {
+      this.sdkBinding.sdk.setLocale(this.locale)
+    } catch (error: unknown) {
+      const normalizedError = toError(error)
+      this.publishContext({ error: normalizedError })
+      this.dispatchEvent(
+        new CustomEvent<ContentfulOptimizationRootErrorEventDetail>(ROOT_ERROR_EVENT, {
+          bubbles: true,
+          composed: true,
+          detail: { error: normalizedError },
+        }),
+      )
+    }
+  }
+
+  private teardownSdkBinding(): void {
+    this.previewPanelOpenSubscription?.unsubscribe()
+    this.previewPanelOpenSubscription = undefined
+    disposeOptimizationRootSdkBinding(this.sdkBinding)
+    this.sdkBinding = undefined
+    this.publishContext({
+      error: undefined,
+      isSdkReady: false,
+      isPreviewPanelOpen: false,
+      sdk: undefined,
+    })
+  }
+
+  private publishContext(nextContext: Partial<ContentfulOptimizationRootContext>): void {
+    this.context = {
+      ...this.context,
+      ...nextContext,
+    }
+
+    this.subscribers.forEach((subscriber) => {
+      subscriber(this.context)
+    })
+  }
+}
diff --git a/packages/web/web-sdk/src/web-components/ContentfulOptimizedEntryElement.ts b/packages/web/web-sdk/src/web-components/ContentfulOptimizedEntryElement.ts
new file mode 100644
index 00000000..12ea1612
--- /dev/null
+++ b/packages/web/web-sdk/src/web-components/ContentfulOptimizedEntryElement.ts
@@ -0,0 +1,382 @@
+import type { ResolvedData } from '@contentful/optimization-core'
+import type { SelectedOptimizationArray } from '@contentful/optimization-core/api-schemas'
+import type { Entry, EntrySkeletonType } from 'contentful'
+import {
+  OPTIMIZED_ENTRY_HOST_DISPLAY,
+  OptimizedEntryController,
+  type OptimizedEntryControllerOptions,
+  type OptimizedEntrySdk,
+  type OptimizedEntrySnapshot,
+} from '../presentation'
+import {
+  ContentfulOptimizationRootElement,
+  type ContentfulOptimizationRootContext,
+} from './ContentfulOptimizationRootElement'
+
+const ENTRY_LOADING_EVENT = 'ctfl-entry-loading'
+const ENTRY_RESOLVED_EVENT = 'ctfl-entry-resolved'
+const ENTRY_ERROR_EVENT = 'ctfl-entry-error'
+
+type HostAttributeValue = string | boolean | number | undefined
+
+export interface ContentfulOptimizedEntryEventDetail {
+  readonly entry: Entry
+  readonly resolvedData: ResolvedData<EntrySkeletonType>
+  readonly selectedOptimization: ResolvedData<EntrySkeletonType>['selectedOptimization']
+  readonly selectedOptimizations: SelectedOptimizationArray | undefined
+  readonly snapshot: OptimizedEntrySnapshot
+}
+
+export interface ContentfulOptimizedEntryErrorEventDetail {
+  readonly error: Error
+}
+
+function parseOptionalBooleanAttribute(value: string | null): boolean | undefined {
+  if (value === null) {
+    return undefined
+  }
+
+  return value !== 'false'
+}
+
+function toError(error: unknown): Error {
+  return error instanceof Error ? error : new Error(String(error))
+}
+
+function isOptimizationRootElement(
+  value: Element | null,
+): value is ContentfulOptimizationRootElement {
+  return value instanceof ContentfulOptimizationRootElement
+}
+
+function isHostAttributeVisible(value: HostAttributeValue): value is string | boolean | number {
+  return value !== undefined
+}
+
+function toAttributeValue(value: string | boolean | number): string {
+  return String(value)
+}
+
+function hasResolvedDataChanged(
+  previous: OptimizedEntrySnapshot | undefined,
+  next: OptimizedEntrySnapshot,
+): boolean {
+  if (previous === undefined) {
+    return true
+  }
+
+  return (
+    previous.entry !== next.entry ||
+    previous.selectedOptimization !== next.selectedOptimization ||
+    previous.selectedOptimizations !== next.selectedOptimizations
+  )
+}
+
+export class ContentfulOptimizedEntryElement extends HTMLElement {
+  static get observedAttributes(): string[] {
+    return ['live-updates', 'track-clicks', 'track-hovers', 'track-views']
+  }
+
+  private explicitRoot: ContentfulOptimizationRootElement | undefined = undefined
+  private assignedBaselineEntry: Entry | undefined = undefined
+  private controller: OptimizedEntryController | undefined = undefined
+  private appliedHostAttributes = new Map<string, string>()
+  private previousSnapshot: OptimizedEntrySnapshot | undefined = undefined
+  private optimizationRootContext: ContentfulOptimizationRootContext | undefined = undefined
+  private unsubscribeFromRootContext: (() => void) | undefined = undefined
+  private assignedSdk: OptimizedEntrySdk | undefined = undefined
+
+  get baselineEntry(): Entry | undefined {
+    return this.assignedBaselineEntry
+  }
+
+  set baselineEntry(value: Entry | undefined) {
+    this.assignedBaselineEntry = value
+    this.syncEntryController()
+  }
+
+  get sdk(): OptimizedEntrySdk | undefined {
+    return this.assignedSdk
+  }
+
+  set sdk(value: OptimizedEntrySdk | undefined) {
+    this.assignedSdk = value
+    this.syncEntryController()
+  }
+
+  get root(): ContentfulOptimizationRootElement | undefined {
+    return this.explicitRoot
+  }
+
+  set root(value: ContentfulOptimizationRootElement | undefined) {
+    this.explicitRoot = value
+    this.bindRoot()
+    this.syncEntryController()
+  }
+
+  get liveUpdates(): boolean | undefined {
+    return parseOptionalBooleanAttribute(this.getAttribute('live-updates'))
+  }
+
+  set liveUpdates(value: boolean | undefined) {
+    this.setOptionalBooleanAttribute('live-updates', value)
+  }
+
+  get trackClicks(): boolean | undefined {
+    return parseOptionalBooleanAttribute(this.getAttribute('track-clicks'))
+  }
+
+  set trackClicks(value: boolean | undefined) {
+    this.setOptionalBooleanAttribute('track-clicks', value)
+  }
+
+  get trackHovers(): boolean | undefined {
+    return parseOptionalBooleanAttribute(this.getAttribute('track-hovers'))
+  }
+
+  set trackHovers(value: boolean | undefined) {
+    this.setOptionalBooleanAttribute('track-hovers', value)
+  }
+
+  get trackViews(): boolean | undefined {
+    return parseOptionalBooleanAttribute(this.getAttribute('track-views'))
+  }
+
+  set trackViews(value: boolean | undefined) {
+    this.setOptionalBooleanAttribute('track-views', value)
+  }
+
+  connectedCallback(): void {
+    this.style.display ||= OPTIMIZED_ENTRY_HOST_DISPLAY
+
+    this.bindRoot()
+    this.syncEntryController()
+  }
+
+  disconnectedCallback(): void {
+    this.unsubscribeFromRootContext?.()
+    this.unsubscribeFromRootContext = undefined
+    this.controller?.disconnect()
+    this.controller?.setSnapshotListener(undefined)
+    this.controller = undefined
+    this.optimizationRootContext = undefined
+    this.previousSnapshot = undefined
+  }
+
+  attributeChangedCallback(_name: string, oldValue: string | null, newValue: string | null): void {
+    if (oldValue === newValue) {
+      return
+    }
+
+    this.syncEntryController()
+  }
+
+  private setOptionalBooleanAttribute(name: string, value: boolean | undefined): void {
+    if (value === undefined) {
+      this.removeAttribute(name)
+      return
+    }
+
+    this.setAttribute(name, String(value))
+  }
+
+  private bindRoot(): void {
+    if (!this.isConnected) {
+      return
+    }
+
+    const nextRoot = this.explicitRoot ?? this.findRoot()
+
+    if (nextRoot === undefined) {
+      this.unsubscribeFromRootContext?.()
+      this.unsubscribeFromRootContext = undefined
+      this.optimizationRootContext = undefined
+      return
+    }
+
+    this.unsubscribeFromRootContext?.()
+    this.unsubscribeFromRootContext = nextRoot.subscribeOptimizationContext((context) => {
+      this.optimizationRootContext = context
+      this.syncEntryController()
+    })
+  }
+
+  private findRoot(): ContentfulOptimizationRootElement | undefined {
+    const root = this.closest('ctfl-optimization-root')
+
+    return isOptimizationRootElement(root) ? root : undefined
+  }
+
+  private syncEntryController(): void {
+    const { assignedBaselineEntry: baselineEntry } = this
+
+    if (!baselineEntry) {
+      this.clearController()
+      return
+    }
+
+    const { sdk, isSdkStateReady } = this.resolveControllerSdk()
+
+    if (!sdk || !isSdkStateReady) {
+      this.handleMissingControllerSdk()
+      return
+    }
+
+    try {
+      const controller = this.updateOrCreateController(
+        this.createControllerOptions({ baselineEntry, sdk, isSdkStateReady }),
+      )
+      this.applySnapshot(controller.getSnapshot())
+    } catch (error: unknown) {
+      this.dispatchEntryError(toError(error))
+    }
+  }
+
+  private clearController(): void {
+    this.controller?.disconnect()
+    this.controller?.setSnapshotListener(undefined)
+    this.controller = undefined
+  }
+
+  private resolveControllerSdk(): {
+    readonly sdk: OptimizedEntrySdk | undefined
+    readonly isSdkStateReady: boolean
+  } {
+    return {
+      sdk: this.assignedSdk ?? this.optimizationRootContext?.sdk,
+      isSdkStateReady:
+        this.assignedSdk !== undefined || this.optimizationRootContext?.isSdkReady === true,
+    }
+  }
+
+  private handleMissingControllerSdk(): void {
+    this.clearController()
+    this.applyHostAttributes({})
+
+    if (this.optimizationRootContext?.error) {
+      this.dispatchEntryError(this.optimizationRootContext.error)
+    }
+  }
+
+  private createControllerOptions({
+    baselineEntry,
+    sdk,
+    isSdkStateReady,
+  }: {
+    readonly baselineEntry: Entry
+    readonly sdk: OptimizedEntrySdk
+    readonly isSdkStateReady: boolean
+  }): OptimizedEntryControllerOptions {
+    return {
+      isPresentationReady: true,
+      baselineEntry,
+      entryLiveUpdatesEnabled: this.liveUpdates,
+      rootLiveUpdatesEnabled: this.optimizationRootContext?.rootLiveUpdatesEnabled ?? false,
+      hasCustomLoadingFallback: false,
+      isPreviewPanelOpen: this.optimizationRootContext?.isPreviewPanelOpen ?? false,
+      sdk,
+      isSdkStateReady,
+      targetDisplay: 'block',
+      trackClicks: this.trackClicks,
+      trackHovers: this.trackHovers,
+      trackViews: this.trackViews,
+    }
+  }
+
+  private updateOrCreateController(
+    controllerOptions: OptimizedEntryControllerOptions,
+  ): OptimizedEntryController {
+    if (this.controller === undefined) {
+      this.controller = new OptimizedEntryController(controllerOptions)
+      this.controller.setSnapshotListener((snapshot) => {
+        this.applySnapshot(snapshot)
+      })
+      this.controller.connect()
+      return this.controller
+    }
+
+    this.controller.updateOptions(controllerOptions)
+    return this.controller
+  }
+
+  private applySnapshot(snapshot: OptimizedEntrySnapshot): void {
+    const { previousSnapshot } = this
+    this.applyHostAttributes(snapshot.hostAttributes)
+    this.applyLoadingVisibility(snapshot)
+
+    if (snapshot.loadingPresentation.showLoadingFallback) {
+      if (previousSnapshot?.loadingPresentation.showLoadingFallback !== true) {
+        this.dispatchEntryEvent(ENTRY_LOADING_EVENT, snapshot)
+      }
+    } else if (
+      previousSnapshot?.loadingPresentation.showLoadingFallback === true ||
+      hasResolvedDataChanged(previousSnapshot, snapshot)
+    ) {
+      this.dispatchEntryEvent(ENTRY_RESOLVED_EVENT, snapshot)
+    }
+
+    this.previousSnapshot = snapshot
+  }
+
+  private applyHostAttributes(attributes: Record<string, HostAttributeValue>): void {
+    const nextAttributes = new Map<string, string>()
+
+    Object.entries(attributes).forEach(([name, value]) => {
+      if (isHostAttributeVisible(value)) {
+        nextAttributes.set(name, toAttributeValue(value))
+      }
+    })
+
+    this.appliedHostAttributes.forEach((_value, name) => {
+      if (!nextAttributes.has(name)) {
+        this.removeAttribute(name)
+      }
+    })
+
+    nextAttributes.forEach((value, name) => {
+      if (this.appliedHostAttributes.get(name) !== value) {
+        this.setAttribute(name, value)
+      }
+    })
+
+    this.appliedHostAttributes = nextAttributes
+  }
+
+  private applyLoadingVisibility(snapshot: OptimizedEntrySnapshot): void {
+    if (
+      snapshot.loadingPresentation.showLoadingFallback &&
+      snapshot.loadingPresentation.hideLoadingLayoutTarget
+    ) {
+      this.style.visibility = 'hidden'
+      return
+    }
+
+    this.style.removeProperty('visibility')
+  }
+
+  private dispatchEntryEvent(type: string, snapshot: OptimizedEntrySnapshot): void {
+    this.dispatchEvent(
+      new CustomEvent<ContentfulOptimizedEntryEventDetail>(type, {
+        bubbles: true,
+        composed: true,
+        detail: {
+          entry: snapshot.entry,
+          resolvedData: snapshot.resolvedData,
+          selectedOptimization: snapshot.selectedOptimization,
+          selectedOptimizations: snapshot.selectedOptimizations,
+          snapshot,
+        },
+      }),
+    )
+  }
+
+  private dispatchEntryError(error: Error): void {
+    this.dispatchEvent(
+      new CustomEvent<ContentfulOptimizedEntryErrorEventDetail>(ENTRY_ERROR_EVENT, {
+        bubbles: true,
+        composed: true,
+        detail: { error },
+      }),
+    )
+  }
+}
diff --git a/packages/web/web-sdk/src/web-components/index.test.ts b/packages/web/web-sdk/src/web-components/index.test.ts
new file mode 100644
index 00000000..553de392
--- /dev/null
+++ b/packages/web/web-sdk/src/web-components/index.test.ts
@@ -0,0 +1,386 @@
+import type {
+  ExperienceRequestState,
+  Observable,
+  ResolvedData,
+} from '@contentful/optimization-core'
+import type { SelectedOptimizationArray } from '@contentful/optimization-core/api-schemas'
+import type { Entry, EntrySkeletonType } from 'contentful'
+import type { OptimizationRootSdk } from '../presentation'
+import { ContentfulOptimizationRootElement } from './ContentfulOptimizationRootElement'
+import {
+  ContentfulOptimizedEntryElement,
+  type ContentfulOptimizedEntryEventDetail,
+} from './ContentfulOptimizedEntryElement'
+import { defineContentfulOptimizationElements } from './index'
+
+type Subscriber<T> = (value: T) => void
+
+interface TestObservable<T> extends Observable<T> {
+  emit: (value: T) => void
+  subscriberCount: () => number
+}
+
+function createObservable<T>(initialValue: T): TestObservable<T> {
+  const subscribers = new Set<Subscriber<T>>()
+  let currentValue = initialValue
+
+  return {
+    get current() {
+      return currentValue
+    },
+    emit(value: T) {
+      currentValue = value
+      subscribers.forEach((subscriber) => {
+        subscriber(value)
+      })
+    },
+    subscribe(next: Subscriber<T>) {
+      subscribers.add(next)
+      next(currentValue)
+
+      return {
+        unsubscribe() {
+          subscribers.delete(next)
+        },
+      }
+    },
+    subscribeOnce(next: (value: NonNullable<T>) => void) {
+      if (currentValue !== undefined && currentValue !== null) {
+        next(currentValue)
+      }
+
+      return { unsubscribe: () => undefined }
+    },
+    subscriberCount() {
+      return subscribers.size
+    },
+  }
+}
+
+function createTestEntry(id: string): Entry {
+  return {
+    fields: { title: id },
+    metadata: { tags: [] },
+    sys: {
+      contentType: { sys: { id: 'test-content-type', linkType: 'ContentType', type: 'Link' } },
+      createdAt: '2024-01-01T00:00:00.000Z',
+      environment: { sys: { id: 'main', linkType: 'Environment', type: 'Link' } },
+      id,
+      publishedVersion: 1,
+      revision: 1,
+      space: { sys: { id: 'space-id', linkType: 'Space', type: 'Link' } },
+      type: 'Entry',
+      updatedAt: '2024-01-01T00:00:00.000Z',
+    },
+  }
+}
+
+function createOptimizableTestEntry(id: string): Entry {
+  const entry = createTestEntry(id)
+  entry.fields = {
+    ...entry.fields,
+    nt_experiences: [{ sys: { id: 'experience-link' } }],
+  }
+
+  return entry
+}
+
+function createSdk(
+  resolveOptimizedEntry: (
+    entry: Entry,
+    selectedOptimizations: SelectedOptimizationArray | undefined,
+  ) => ResolvedData<EntrySkeletonType>,
+): {
+  readonly canOptimize: TestObservable<boolean>
+  readonly destroy: ReturnType<typeof rs.fn>
+  readonly experienceRequestState: TestObservable<ExperienceRequestState>
+  readonly previewPanelOpen: TestObservable<boolean>
+  readonly sdk: OptimizationRootSdk
+  readonly selectedOptimizations: TestObservable<SelectedOptimizationArray | undefined>
+} {
+  const selectedOptimizations = createObservable<SelectedOptimizationArray | undefined>(undefined)
+  const canOptimize = createObservable(false)
+  const experienceRequestState = createObservable<ExperienceRequestState>({ status: 'idle' })
+  const previewPanelOpen = createObservable(false)
+  const destroy = rs.fn()
+
+  const sdk = {
+    destroy,
+    resolveOptimizedEntry,
+    setLocale: () => undefined,
+    states: {
+      canOptimize,
+      experienceRequestState,
+      previewPanelOpen,
+      selectedOptimizations,
+    },
+  } satisfies OptimizationRootSdk
+
+  return {
+    canOptimize,
+    destroy,
+    experienceRequestState,
+    previewPanelOpen,
+    sdk,
+    selectedOptimizations,
+  }
+}
+
+function createRootElement(sdk: OptimizationRootSdk): ContentfulOptimizationRootElement {
+  const root = document.createElement('ctfl-optimization-root')
+
+  if (!(root instanceof ContentfulOptimizationRootElement)) {
+    throw new Error('ctfl-optimization-root is not registered.')
+  }
+
+  root.sdk = sdk
+
+  return root
+}
+
+function createEntryElement(baselineEntry: Entry): ContentfulOptimizedEntryElement {
+  const entry = document.createElement('ctfl-optimized-entry')
+
+  if (!(entry instanceof ContentfulOptimizedEntryElement)) {
+    throw new Error('ctfl-optimized-entry is not registered.')
+  }
+
+  entry.baselineEntry = baselineEntry
+
+  return entry
+}
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return typeof value === 'object' && value !== null
+}
+
+function isEntryDetail(value: unknown): value is ContentfulOptimizedEntryEventDetail {
+  return isRecord(value) && 'entry' in value && 'resolvedData' in value && 'snapshot' in value
+}
+
+function getEntryDetail(event: Event): ContentfulOptimizedEntryEventDetail {
+  if (!(event instanceof CustomEvent)) {
+    throw new Error('Expected a custom event.')
+  }
+
+  const { detail }: { detail: unknown } = event
+  if (!isEntryDetail(detail)) {
+    throw new Error('Expected Contentful optimized entry event detail.')
+  }
+
+  return detail
+}
+
+function ensureElementsDefined(): void {
+  defineContentfulOptimizationElements()
+}
+
+describe('Contentful Optimization Web Components', () => {
+  const baseline = createTestEntry('baseline')
+  const optimizedBaseline = createOptimizableTestEntry('optimized-baseline')
+  const variantA = createTestEntry('variant-a')
+  const variantB = createTestEntry('variant-b')
+
+  const variantOneState: SelectedOptimizationArray = [
+    {
+      experienceId: 'exp-hero',
+      sticky: true,
+      variantIndex: 1,
+      variants: { baseline: 'variant-a' },
+    },
+  ]
+
+  const variantTwoState: SelectedOptimizationArray = [
+    {
+      experienceId: 'exp-hero',
+      sticky: false,
+      variantIndex: 2,
+      variants: { baseline: 'variant-b' },
+    },
+  ]
+
+  afterEach(() => {
+    document.body.innerHTML = ''
+    rs.restoreAllMocks()
+  })
+
+  it('does not register custom elements as an import side effect', () => {
+    expect(customElements.get('ctfl-optimization-root')).toBeUndefined()
+    expect(customElements.get('ctfl-optimized-entry')).toBeUndefined()
+  })
+
+  it('registers custom elements on demand with duplicate guards', () => {
+    ensureElementsDefined()
+
+    expect(customElements.get('ctfl-optimization-root')).toBe(ContentfulOptimizationRootElement)
+    expect(customElements.get('ctfl-optimized-entry')).toBe(ContentfulOptimizedEntryElement)
+    expect(() => {
+      defineContentfulOptimizationElements()
+    }).not.toThrow()
+  })
+
+  it('binds injected root SDKs without destroying them on disconnect', () => {
+    ensureElementsDefined()
+    const runtime = createSdk((entry) => ({ entry }))
+    const root = createRootElement(runtime.sdk)
+    const ready = rs.fn()
+
+    root.addEventListener('ctfl-root-ready', ready)
+    document.body.append(root)
+
+    expect(ready).toHaveBeenCalledTimes(1)
+    expect(root.style.display).toBe('contents')
+
+    root.remove()
+
+    expect(runtime.destroy).not.toHaveBeenCalled()
+  })
+
+  it('resolves entries through the nearest root and applies host attributes', () => {
+    ensureElementsDefined()
+    const runtime = createSdk((entry) => ({ entry }))
+    const root = createRootElement(runtime.sdk)
+    const entry = createEntryElement(baseline)
+    const resolved = rs.fn((event: Event) => getEntryDetail(event).entry.sys.id)
+
+    entry.addEventListener('ctfl-entry-resolved', resolved)
+    root.append(entry)
+    document.body.append(root)
+
+    expect(resolved).toHaveReturnedWith('baseline')
+    expect(entry.style.display).toBe('contents')
+    expect(entry.dataset.ctflEntryId).toBe('baseline')
+    expect(entry.dataset.ctflVariantIndex).toBe('0')
+  })
+
+  it('dispatches loading and resolved events while keeping loading host attributes empty', () => {
+    ensureElementsDefined()
+    const runtime = createSdk((entry, selectedOptimizations) => ({
+      entry: selectedOptimizations ? variantA : entry,
+      selectedOptimization: selectedOptimizations?.[0],
+    }))
+    const root = createRootElement(runtime.sdk)
+    const entry = createEntryElement(optimizedBaseline)
+    const loading = rs.fn()
+    const resolved = rs.fn((event: Event) => getEntryDetail(event).entry.sys.id)
+
+    entry.addEventListener('ctfl-entry-loading', loading)
+    entry.addEventListener('ctfl-entry-resolved', resolved)
+    root.append(entry)
+    document.body.append(root)
+
+    expect(loading).toHaveBeenCalledTimes(1)
+    expect(entry.dataset.ctflBaselineId).toBeUndefined()
+    expect(entry.dataset.ctflEntryId).toBeUndefined()
+    expect(entry.style.visibility).toBe('hidden')
+
+    runtime.selectedOptimizations.emit(variantOneState)
+    runtime.canOptimize.emit(true)
+    runtime.experienceRequestState.emit({ status: 'success' })
+
+    expect(resolved).toHaveReturnedWith('variant-a')
+    expect(entry.dataset.ctflBaselineId).toBe('optimized-baseline')
+    expect(entry.dataset.ctflEntryId).toBe('variant-a')
+    expect(entry.dataset.ctflOptimizationId).toBe('exp-hero')
+    expect(entry.dataset.ctflVariantIndex).toBe('1')
+    expect(entry.style.visibility).toBe('')
+  })
+
+  it('locks selected optimizations until root live updates are enabled', () => {
+    ensureElementsDefined()
+    const runtime = createSdk((entry, selectedOptimizations) => ({
+      entry:
+        selectedOptimizations?.[0]?.variantIndex === 1
+          ? variantA
+          : selectedOptimizations?.[0]?.variantIndex === 2
+            ? variantB
+            : entry,
+      selectedOptimization: selectedOptimizations?.[0],
+    }))
+    const root = createRootElement(runtime.sdk)
+    const entry = createEntryElement(baseline)
+    const resolved = rs.fn((event: Event) => getEntryDetail(event).entry.sys.id)
+
+    entry.addEventListener('ctfl-entry-resolved', resolved)
+    root.append(entry)
+    document.body.append(root)
+
+    runtime.selectedOptimizations.emit(variantOneState)
+    expect(entry.dataset.ctflEntryId).toBe('variant-a')
+
+    runtime.selectedOptimizations.emit(variantTwoState)
+    expect(entry.dataset.ctflEntryId).toBe('variant-a')
+
+    root.liveUpdates = true
+
+    expect(entry.dataset.ctflEntryId).toBe('variant-b')
+    expect(resolved).toHaveReturnedWith('variant-b')
+  })
+
+  it('applies only changed host attributes', () => {
+    ensureElementsDefined()
+    const runtime = createSdk((entry, selectedOptimizations) => ({
+      entry:
+        selectedOptimizations?.[0]?.variantIndex === 1
+          ? variantA
+          : selectedOptimizations?.[0]?.variantIndex === 2
+            ? variantB
+            : entry,
+      selectedOptimization: selectedOptimizations?.[0],
+    }))
+    const root = createRootElement(runtime.sdk)
+    const entry = createEntryElement(baseline)
+
+    entry.liveUpdates = true
+    root.append(entry)
+    document.body.append(root)
+
+    runtime.selectedOptimizations.emit(variantOneState)
+
+    const setAttribute = rs.spyOn(entry, 'setAttribute')
+
+    runtime.selectedOptimizations.emit(variantTwoState)
+
+    expect(setAttribute).toHaveBeenCalledWith('data-ctfl-entry-id', 'variant-b')
+    expect(setAttribute).toHaveBeenCalledWith('data-ctfl-sticky', 'false')
+    expect(setAttribute).toHaveBeenCalledWith('data-ctfl-variant-index', '2')
+    expect(setAttribute).not.toHaveBeenCalledWith('data-ctfl-optimization-id', 'exp-hero')
+  })
+
+  it('bubbles resolved entry events for delegated listeners', () => {
+    ensureElementsDefined()
+    const runtime = createSdk((entry) => ({ entry }))
+    const root = createRootElement(runtime.sdk)
+    const entry = createEntryElement(baseline)
+    const delegated = rs.fn((event: Event) => event.target)
+
+    root.addEventListener('ctfl-entry-resolved', delegated)
+    root.append(entry)
+    document.body.append(root)
+
+    expect(delegated).toHaveReturnedWith(entry)
+  })
+
+  it('cleans up entry subscriptions on disconnect', () => {
+    ensureElementsDefined()
+    const runtime = createSdk((entry) => ({ entry }))
+    const root = createRootElement(runtime.sdk)
+    const entry = createEntryElement(baseline)
+
+    root.append(entry)
+    document.body.append(root)
+
+    expect(runtime.selectedOptimizations.subscriberCount()).toBe(1)
+
+    entry.remove()
+
+    expect(runtime.selectedOptimizations.subscriberCount()).toBe(0)
+  })
+
+  it('keeps unregistered SSR-style markup inert', () => {
+    const inert = document.createElement('ctfl-unregistered-optimized-entry')
+    inert.textContent = 'static baseline'
+
+    expect(inert.textContent).toBe('static baseline')
+  })
+})
diff --git a/packages/web/web-sdk/src/web-components/index.ts b/packages/web/web-sdk/src/web-components/index.ts
new file mode 100644
index 00000000..315d1723
--- /dev/null
+++ b/packages/web/web-sdk/src/web-components/index.ts
@@ -0,0 +1,47 @@
+import { ContentfulOptimizationRootElement } from './ContentfulOptimizationRootElement'
+import { ContentfulOptimizedEntryElement } from './ContentfulOptimizedEntryElement'
+
+const DEFAULT_ROOT_TAG_NAME = 'ctfl-optimization-root'
+const DEFAULT_OPTIMIZED_ENTRY_TAG_NAME = 'ctfl-optimized-entry'
+
+export interface DefineContentfulOptimizationElementsOptions {
+  readonly optimizedEntryTagName?: string
+  readonly registry?: CustomElementRegistry
+  readonly rootTagName?: string
+}
+
+function getDefaultCustomElementRegistry(): CustomElementRegistry {
+  if (typeof customElements === 'undefined') {
+    throw new Error('Custom elements are not available in this environment.')
+  }
+
+  return customElements
+}
+
+export function defineContentfulOptimizationElements(
+  options: DefineContentfulOptimizationElementsOptions = {},
+): void {
+  const registry = options.registry ?? getDefaultCustomElementRegistry()
+  const rootTagName = options.rootTagName ?? DEFAULT_ROOT_TAG_NAME
+  const optimizedEntryTagName = options.optimizedEntryTagName ?? DEFAULT_OPTIMIZED_ENTRY_TAG_NAME
+
+  if (!registry.get(rootTagName)) {
+    registry.define(rootTagName, ContentfulOptimizationRootElement)
+  }
+
+  if (!registry.get(optimizedEntryTagName)) {
+    registry.define(optimizedEntryTagName, ContentfulOptimizedEntryElement)
+  }
+}
+
+export {
+  ContentfulOptimizationRootElement,
+  type ContentfulOptimizationRootContext,
+  type ContentfulOptimizationRootErrorEventDetail,
+  type ContentfulOptimizationRootReadyEventDetail,
+} from './ContentfulOptimizationRootElement'
+export {
+  ContentfulOptimizedEntryElement,
+  type ContentfulOptimizedEntryErrorEventDetail,
+  type ContentfulOptimizedEntryEventDetail,
+} from './ContentfulOptimizedEntryElement'
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index ea50e160..c0a058cc 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -209,7 +209,7 @@ importers:
         version: 24.10.13
       contentful:
         specifier: 'catalog:'
-        version: 11.10.5(debug@4.3.7)
+        version: 11.10.5
       contentful-cli:
         specifier: ^3.10.4
         version: 3.10.4(@types/node@24.10.13)(enquirer@2.3.6)(eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.56.0(eslint@10.0.0(jiti@2.6.1))(typescript@5.9.3))(eslint@8.57.1))(eslint-plugin-n@17.24.0(eslint@8.57.1)(typescript@5.9.3))(eslint-plugin-promise@7.2.1(eslint@8.57.1))
@@ -276,7 +276,7 @@ importers:
         version: link:../../../lib/build-tools
       contentful:
         specifier: 'catalog:'
-        version: 11.10.5(debug@4.3.7)
+        version: 11.10.5
       ejs:
         specifier: 'catalog:'
         version: 3.1.10
@@ -415,7 +415,7 @@ importers:
         version: link:../../lib/build-tools
       contentful:
         specifier: 'catalog:'
-        version: 11.10.5(debug@4.3.7)
+        version: 11.10.5
       core-js:
         specifier: ^3.49.0
         version: 3.49.0
@@ -503,7 +503,7 @@ importers:
     dependencies:
       contentful:
         specifier: 'catalog:'
-        version: 11.10.5(debug@4.3.7)
+        version: 11.10.5
       zod:
         specifier: 'catalog:'
         version: 4.3.6
@@ -546,7 +546,7 @@ importers:
         version: 1.13.0
       contentful:
         specifier: 'catalog:'
-        version: 11.10.5(debug@4.3.7)
+        version: 11.10.5
       es-toolkit:
         specifier: 'catalog:'
         version: 1.46.0
@@ -657,7 +657,7 @@ importers:
         version: link:../../../../lib/build-tools
       contentful:
         specifier: 'catalog:'
-        version: 11.10.5(debug@4.3.7)
+        version: 11.10.5
       happy-dom:
         specifier: 'catalog:'
         version: 20.8.9
@@ -693,7 +693,7 @@ importers:
         version: 1.1.6
       contentful:
         specifier: 'catalog:'
-        version: 11.10.5(debug@4.3.7)
+        version: 11.10.5
       es-toolkit:
         specifier: 'catalog:'
         version: 1.46.0
@@ -728,6 +728,9 @@ importers:
       '@contentful/optimization-core':
         specifier: workspace:*
         version: link:../../universal/core-sdk
+      contentful:
+        specifier: 'catalog:'
+        version: 11.10.5
       zod:
         specifier: 'catalog:'
         version: 4.3.6
@@ -2262,12 +2265,6 @@ packages:
       '@types/react':
         optional: true
 
-  '@rollup/rollup-linux-x64-gnu@4.57.1':
-    resolution: {integrity: sha512-ABca4ceT4N+Tv/GtotnWAeXZUZuM/9AQyCyKYyKnpk4yoA7QIAuBt6Hkgpw8kActYlew2mvckXkvx0FfoInnLg==}
-    cpu: [x64]
-    os: [linux]
-    libc: [glibc]
-
   '@rollup/rollup-linux-x64-gnu@4.60.1':
     resolution: {integrity: sha512-77PpsFQUCOiZR9+LQEFg9GClyfkNXj1MP6wRnzYs0EeWbPcHs02AXu4xuUbM1zhwn3wqaizle3AEYg5aeoohhg==}
     cpu: [x64]
@@ -3637,10 +3634,6 @@ packages:
     resolution: {integrity: sha512-ymXze1OM0Yc7azlK244CU/1qR1FQBvb5hS5i6WRscuLkGBgOIXU/1SLSr9YP++XFs7wejSPQeSg8X1B4V8Fo0Q==}
     engines: {node: '>=4.7.2'}
 
-  contentful-sdk-core@9.4.4:
-    resolution: {integrity: sha512-61MfMyMU23dqCEOTHaHGys16tK2D0tbDe67GPcl6JkfbCcnhtmgTMLUbBnimW5wQse1mNmwS7lK2BNsz+rlFjA==}
-    engines: {node: '>=18'}
-
   contentful-sdk-core@9.4.5:
     resolution: {integrity: sha512-8eGTMO11LXFAiosaiV38bjvW6cjoQFtNE38pNtVilZTXpmGFinClljihH0eriv11Ispd4q82TqtsXMJPYD/C+A==}
     engines: {node: '>=18'}
@@ -9464,9 +9457,6 @@ snapshots:
     optionalDependencies:
       '@types/react': 19.2.14
 
-  '@rollup/rollup-linux-x64-gnu@4.57.1':
-    optional: true
-
   '@rollup/rollup-linux-x64-gnu@4.60.1':
     optional: true
 
@@ -10411,7 +10401,7 @@ snapshots:
     dependencies:
       possible-typed-array-names: 1.1.0
 
-  axios@1.16.1(debug@4.3.7):
+  axios@1.16.1:
     dependencies:
       follow-redirects: 1.16.0(debug@4.3.7)
       form-data: 4.0.5
@@ -11051,11 +11041,11 @@ snapshots:
 
   contentful-export@7.22.5:
     dependencies:
-      axios: 1.16.1(debug@4.3.7)
+      axios: 1.16.1
       bfj: 9.1.3
       bluebird: 3.7.2
       cli-table3: 0.6.5
-      contentful: 11.10.5(debug@4.3.7)
+      contentful: 11.10.5
       contentful-batch-libs: 10.1.6
       contentful-management: 11.75.0
       date-fns: 4.1.0
@@ -11102,7 +11092,7 @@ snapshots:
   contentful-management@11.75.0:
     dependencies:
       '@contentful/rich-text-types': 16.8.5
-      axios: 1.16.1(debug@4.3.7)
+      axios: 1.16.1
       contentful-sdk-core: 9.4.5
       fast-copy: 3.0.2
       globals: 15.15.0
@@ -11113,7 +11103,7 @@ snapshots:
   contentful-migration@4.32.0(@types/node@24.10.13)(enquirer@2.3.6):
     dependencies:
       '@hapi/hoek': 11.0.7
-      axios: 1.16.1(debug@4.3.7)
+      axios: 1.16.1
       bluebird: 3.7.2
       callsites: 3.1.0
       cardinal: 2.1.1
@@ -11139,15 +11129,6 @@ snapshots:
     dependencies:
       fast-copy: 3.0.2
 
-  contentful-sdk-core@9.4.4:
-    dependencies:
-      fast-copy: 3.0.2
-      lodash: 4.18.1
-      process: 0.11.10
-      qs: 6.15.0
-    optionalDependencies:
-      '@rollup/rollup-linux-x64-gnu': 4.57.1
-
   contentful-sdk-core@9.4.5:
     dependencies:
       fast-copy: 3.0.2
@@ -11157,13 +11138,13 @@ snapshots:
     optionalDependencies:
       '@rollup/rollup-linux-x64-gnu': 4.60.1
 
-  contentful@11.10.5(debug@4.3.7):
+  contentful@11.10.5:
     dependencies:
       '@contentful/content-source-maps': 0.11.44
       '@contentful/rich-text-types': 16.8.5
-      axios: 1.16.1(debug@4.3.7)
+      axios: 1.16.1
       contentful-resolve-response: 1.9.6
-      contentful-sdk-core: 9.4.4
+      contentful-sdk-core: 9.4.5
       json-stringify-safe: 5.0.1
       tslib: 2.8.1
       type-fest: 4.41.0