diff --git a/.github/workflows/build_whl.yml b/.github/workflows/build_whl.yml
index a1a1733eb59..b0b1d0244fe 100644
--- a/.github/workflows/build_whl.yml
+++ b/.github/workflows/build_whl.yml
@@ -8,6 +8,9 @@ on:
       tar-file-name:
         description: "TAR file name"
         value: ${{ jobs.build_whl.outputs.tar-file-name }}
+      sandbox-static-artifact:
+        description: "Artifact name for the collected sandbox static files"
+        value: sandbox-static
 permissions:
   contents: read
 jobs:
@@ -64,6 +67,15 @@ jobs:
           key: cext-${{ hashFiles('requirements/cext.txt', 'requirements/cext_noarch.txt') }}
       - name: Build Kolibri
         run: make dist
+      # Collected here rather than from the installed whl at release time: the built
+      # static tree is already on disk, and running it on every build means a breakage
+      # surfaces in PR CI rather than mid-release.
+      - name: Collect sandbox static files
+        run: pnpm run collect-sandbox-static dist/static --clear
+      - uses: actions/upload-artifact@v7
+        with:
+          name: sandbox-static
+          path: dist/static
       - name: Get WHL filename
         id: get-whl-filename
         run: echo "whl-file-name=$(basename dist/*.whl)" >> "$GITHUB_OUTPUT"
diff --git a/.github/workflows/dependency_updates.yml b/.github/workflows/dependency_updates.yml
index 800b31ad1a8..a45066e63cb 100644
--- a/.github/workflows/dependency_updates.yml
+++ b/.github/workflows/dependency_updates.yml
@@ -35,7 +35,7 @@ jobs:
           # Get the latest commit from the API response
           latest_commit = "${{ fromJson(steps.get-commit.outputs.data).commit.sha }}".strip()
           # Check stored commit
-          commit_file = Path('packages/kolibri-sandbox/.h5p-commit-sha')
+          commit_file = Path('kolibri/plugins/h5p_viewer/h5p_build/.h5p-commit-sha')
           stored_commit = ""
           if commit_file.exists():
               stored_commit = commit_file.read_text().strip()
@@ -64,16 +64,16 @@ jobs:
         if: steps.check-commit.outputs.changed == 'true'
         run: |
           # Update the commit file
-          echo "${{ steps.check-commit.outputs.latest_commit }}" > packages/kolibri-sandbox/.h5p-commit-sha
+          echo "${{ steps.check-commit.outputs.latest_commit }}" > kolibri/plugins/h5p_viewer/h5p_build/.h5p-commit-sha
 
           # Run your script here
-          pnpm --filter kolibri-sandbox run build-h5p
+          pnpm --filter kolibri-h5p-viewer-plugin run build-h5p
       - name: Check for actual build changes
         if: steps.check-commit.outputs.changed == 'true'
         id: check-build-changes
         run: |
           # Stage only the build output files, excluding the commit SHA file
-          git add kolibri/core/content/static/h5p packages/kolibri-sandbox/h5p_build.json
+          git add kolibri/plugins/h5p_viewer/static/h5p kolibri/plugins/h5p_viewer/h5p_build/h5p_build.json
           if git diff --cached --quiet; then
             echo "has_build_changes=false" >> "$GITHUB_OUTPUT"
           else
diff --git a/.github/workflows/release_kolibri.yml b/.github/workflows/release_kolibri.yml
index 620c2c031d5..097af636242 100644
--- a/.github/workflows/release_kolibri.yml
+++ b/.github/workflows/release_kolibri.yml
@@ -193,14 +193,11 @@ jobs:
           destination: '${{ secrets.BCK_PRERELEASE_BUILD_ARTIFACT_GCS_BUCKET }}'
           parent: false
           process_gcloudignore: false
-      - name: Unzip content static files from whl file
-        run: |
-          unzip dist/${{ needs.whl.outputs.whl-file-name }} 'kolibri/core/content/static/*' -d static
-          mv static/kolibri/core/content/static/** static
-          rm -rf static/kolibri
-          rm static/**/*.file_size
-          # Ungzip all .gz files in the static folder
-          for f in static/**/*.gz; do gunzip -f "$f"; done
+      - name: Download sandbox static artifact
+        uses: actions/download-artifact@v8
+        with:
+          name: ${{ needs.whl.outputs.sandbox-static-artifact }}
+          path: static
       - name: Upload content static files to BCK bucket
         uses: 'google-github-actions/upload-cloud-storage@v3'
         with:
diff --git a/.gitignore b/.gitignore
index 4b478e6d023..3e97743cd4e 100644
--- a/.gitignore
+++ b/.gitignore
@@ -107,9 +107,11 @@ js-dist
 storage/*
 kolibri/content/content_db/*.sqlite3
 kolibri/core/content/contentschema/migrations/*
-# Check in h5p & bloom specific files
-!kolibri/core/content/static/h5p/
-!kolibri/core/content/static/bloom/
+# Check in h5p & bloom specific files in their respective plugins
+!kolibri/plugins/h5p_viewer/static/h5p/
+!kolibri/plugins/bloompub_viewer/static/bloom/
+# H5P PHP library unpacked by build-h5p; only its build output is checked in
+kolibri/plugins/h5p_viewer/h5p_build/vendor/
 
 # virtual environment
 venv/
diff --git a/.pre-commit-config.yaml b/.pre-commit-config.yaml
index 63f0ba23b12..e91f7172619 100644
--- a/.pre-commit-config.yaml
+++ b/.pre-commit-config.yaml
@@ -1,4 +1,6 @@
-exclude: (\.git/|\.tox/|\.venv/|build/|static/(?!assets/fonts)|dist/|node_modules/|kolibripip\.pex)
+# `build/` matches a whole path segment: unanchored it also swallowed the hand-written
+# sources in the kolibri-build package and the h5p_viewer h5p_build scripts.
+exclude: (\.git/|\.tox/|\.venv/|(^|/)build/|static/(?!assets/fonts)|dist/|node_modules/|kolibripip\.pex)
 repos:
   - repo: https://github.com/pre-commit/pre-commit-hooks
     rev: v6.0.0
diff --git a/MANIFEST.in b/MANIFEST.in
index 9a0bb80dfef..3e965ba405b 100644
--- a/MANIFEST.in
+++ b/MANIFEST.in
@@ -37,6 +37,7 @@ recursive-exclude kolibri/* *pyo
 prune kolibri/core/frontend
 prune kolibri/core/node_modules
 prune kolibri/plugins/*/frontend
+prune kolibri/plugins/*/h5p_build
 prune kolibri/plugins/*/node_modules
 exclude kolibri/*/buildConfig.js
 exclude kolibri/plugins/*/buildConfig.js
diff --git a/docs/frontend_architecture/components.rst b/docs/frontend_architecture/components.rst
index aeb85bdfb43..17064870cba 100644
--- a/docs/frontend_architecture/components.rst
+++ b/docs/frontend_architecture/components.rst
@@ -17,7 +17,7 @@ Before creating new components, check for existing ones in this order:
 
 1. **Kolibri Design System** (``kolibri-design-system``) — Always prefer KDS components first. Browse the catalog at https://design-system.learningequality.org/
 2. **Kolibri package** (``packages/kolibri/components/``) — Core application components such as ``AuthMessage``, ``CoreTable``, ``BottomAppBar``, and ``DownloadButton``
-3. **Kolibri-Common package** (``packages/kolibri-common/components/``) — Shared components used across plugins, such as ``AccordionContainer``, ``BaseToolbar``, and ``MetadataChips``
+3. **Kolibri-Common package** (``packages/kolibri-common/components/``) — Shared components used across plugins, such as ``AccordionContainer``, ``EmbeddedReadCard``, and ``MetadataChips``
 
 Only create a new component if none of the above provide what you need.
 
diff --git a/docs/frontend_architecture/single_page_apps.rst b/docs/frontend_architecture/single_page_apps.rst
index b38ece7b541..02b25ec92ff 100644
--- a/docs/frontend_architecture/single_page_apps.rst
+++ b/docs/frontend_architecture/single_page_apps.rst
@@ -86,7 +86,9 @@ This will create a navigation component which will be registered to appear in th
 Content viewers
 ---------------
 
-A special kind of Kolibri Module is dedicated to rendering particular content types. All content renderers should extend the ``ContentViewer`` class found in the `kolibri-viewer` package as the default export. In addition, rather than subclassing the ``WebpackBundleHook`` class, content renderers should be defined in the Python code using the ``ContentRendererHook`` class defined in ``kolibri.content.hooks``. In addition to the standard options for the ``WebpackBundleHook``, the ``ContentRendererHook`` also requires a ``presets`` tuple listing the format presets that it will render.
+A special kind of Kolibri Module is dedicated to viewing particular content types. All content viewers should extend the ``ContentViewer`` class found in the `kolibri-viewer` package as the default export. In addition, rather than subclassing the ``WebpackBundleHook`` class, content viewers should be defined in the Python code using the ``ContentViewerHook`` class defined in ``kolibri.core.content.hooks``. In addition to the standard options for the ``WebpackBundleHook``, the ``ContentViewerHook`` also requires a ``presets`` tuple listing the format presets that it will handle.
+
+For content that requires sandboxed execution (HTML5 apps, H5P, Bloom, etc.), use ``SandboxedContentViewerHook`` instead. This hook requires an additional ``sandbox_handler_id`` property and a corresponding sandbox handler bundle in ``buildConfig.js`` with ``sandbox_handler: true``.
 
 .. automodule:: kolibri.core.content.hooks
     :members:
diff --git a/eslint.config.mjs b/eslint.config.mjs
index 9f91868888a..b62c3c74208 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -21,6 +21,7 @@ export default [
       'packages/kolibri-jest-config/**',
       'packages/kolibri-logging/**',
       'packages/build_kolibri_package.js',
+      'kolibri/**/h5p_build/**',
     ],
     rules: CJS_RULES,
   },
diff --git a/kolibri/core/content/hooks.py b/kolibri/core/content/hooks.py
index 1f22a294e54..53530f76808 100644
--- a/kolibri/core/content/hooks.py
+++ b/kolibri/core/content/hooks.py
@@ -2,31 +2,39 @@
 Kolibri Content hooks
 ---------------------
 
-Hooks for managing the display and rendering of content.
+Hooks for managing the display and viewing of content.
 """
 
 import json
+import logging
 from abc import abstractmethod
 
+from django.conf import settings
 from django.core.serializers.json import DjangoJSONEncoder
 from django.utils.safestring import mark_safe
+from importlib_resources import files
 from le_utils.constants import file_formats
 from le_utils.constants import format_presets
 
+from kolibri.core.content.utils.paths import zip_content_static_root
+from kolibri.core.utils.urls import join_url
 from kolibri.core.webpack.hooks import WebpackBundleHook
+from kolibri.core.webpack.hooks import WebpackError
 from kolibri.core.webpack.hooks import WebpackInclusionMixin
 from kolibri.plugins.hooks import define_hook
 from kolibri.plugins.hooks import KolibriHook
 
+logger = logging.getLogger(__name__)
+
 
 @define_hook
-class ContentRendererHook(WebpackBundleHook, WebpackInclusionMixin):
+class ContentViewerHook(WebpackBundleHook, WebpackInclusionMixin):
     """
     An inheritable hook that allows special behaviour for a frontend module that defines
-    a content renderer.
+    a content viewer.
     """
 
-    #: Set tuple of format presets that this content renderer can handle
+    #: Set tuple of format presets that this content viewer can handle
     @property
     @abstractmethod
     def presets(self):
@@ -63,16 +71,28 @@ def html(cls):
             tags.append(hook.template_html())
         return mark_safe("\n".join(tags))
 
-    def template_html(self):
+    @property
+    def viewer_data(self):
         """
-        Generates template tags containing data to register a content renderer.
+        Data registering this content viewer with the frontend.
 
-        :returns: HTML of a template tags to insert into a page.
+        :returns: dict serialized into this viewer's template tag.
         """
         # Note, while most plugins use sorted chunks to filter by text direction
-        # content renderers do not, as they may need to have styling for a different
+        # content viewers do not, as they may need to have styling for a different
         # text direction than the interface due to the text direction of content
-        urls = [chunk["url"] for chunk in self.bundle]
+        return {
+            "urls": [chunk["url"] for chunk in self.bundle],
+            "presets": self.presets,
+            "css_selectors": self.all_css_selectors(),
+        }
+
+    def template_html(self):
+        """
+        Generates template tags containing data to register a content viewer.
+
+        :returns: HTML of a template tags to insert into a page.
+        """
         tags = (
             self.frontend_message_tag()
             + self.plugin_data_tag()
@@ -80,11 +100,7 @@ def template_html(self):
                 '<template data-viewer="{bundle}">{data}</template>'.format(
                     bundle=self.unique_id,
                     data=json.dumps(
-                        {
-                            "urls": urls,
-                            "presets": self.presets,
-                            "css_selectors": self.all_css_selectors(),
-                        },
+                        self.viewer_data,
                         separators=(",", ":"),
                         ensure_ascii=False,
                         cls=DjangoJSONEncoder,
@@ -95,6 +111,120 @@ def template_html(self):
         return mark_safe("\n".join(tags))
 
 
+# Backwards compatibility alias
+ContentRendererHook = ContentViewerHook
+
+
+@define_hook
+class SandboxedContentViewerHook(ContentViewerHook):
+    """
+    A content viewer that uses the Kolibri sandbox with a dynamically loaded handler.
+
+    Subclasses must define:
+    - bundle_id: The main viewer bundle ID (inherited from WebpackBundleHook)
+    - presets: Tuple of format presets this viewer handles (inherited from ContentViewerHook)
+    - sandbox_handler_id: The bundle ID of the sandbox handler
+
+    The sandbox handler is built separately with no Kolibri externals and loaded
+    dynamically into the sandbox iframe at runtime.
+    """
+
+    @property
+    @abstractmethod
+    def sandbox_handler_id(self):
+        """
+        Bundle ID of the sandbox handler.
+        This should match a bundle defined in buildConfig.js with sandbox_handler: true
+        """
+        pass
+
+    @property
+    def sandbox_static_path(self):
+        """
+        Returns the filesystem path to the plugin's static directory.
+        """
+        return str(files(self._module_path).joinpath("static"))
+
+    @classmethod
+    def get_sandbox_static_paths(cls):
+        """
+        Returns a list of filesystem paths to static directories
+        that should be mounted on the sandbox server.
+
+        Includes:
+        - Core content static directory (kolibri/core/content/static)
+        - Plugin static directories for each registered sandbox handler
+        """
+        core_static_path = str(files("kolibri.core.content").joinpath("static"))
+        return [core_static_path] + [
+            hook.sandbox_static_path for hook in cls.registered_hooks
+        ]
+
+    @property
+    def sandbox_handler_unique_id(self):
+        """Full unique ID for the sandbox handler bundle."""
+        return "{}.{}".format(self._module_path, self.sandbox_handler_id)
+
+    def _get_sandbox_handler_stats(self):
+        """Load stats file for the sandbox handler bundle."""
+        developer_mode = getattr(settings, "DEVELOPER_MODE", False)
+        if hasattr(self, "_cached_sandbox_handler_stats") and not developer_mode:
+            return self._cached_sandbox_handler_stats
+
+        try:
+            stats = json.loads(
+                files(self._module_path)
+                .joinpath("build")
+                .joinpath("{}_stats.json".format(self.sandbox_handler_unique_id))
+                .read_text()
+            )
+        except OSError as e:
+            raise WebpackError(
+                "Error accessing sandbox handler stats file '{}': {}".format(
+                    self.sandbox_handler_unique_id, e
+                )
+            )
+
+        self._cached_sandbox_handler_stats = stats
+        return stats
+
+    @property
+    def sandbox_handler_url(self):
+        """URL to the built sandbox handler JavaScript file."""
+        stats = self._get_sandbox_handler_stats()
+        chunks = stats.get("chunks", {}).get(self.sandbox_handler_unique_id, [])
+
+        for chunk in chunks:
+            name = chunk.get("name", "")
+            if name.endswith(".js"):
+                relpath = "{}/{}".format(self.sandbox_handler_unique_id, name)
+                if getattr(settings, "DEVELOPER_MODE", False):
+                    url = chunk.get("publicPath")
+                    if url and not url.startswith("auto"):
+                        return url
+                # The handler <script> is loaded inside the sandbox iframe, which
+                # is served from the alternate (zip content) origin. Serve the
+                # handler from that origin's static root — where alt_wsgi mounts
+                # the plugin static dirs — not the main-origin STATIC_URL, which
+                # 404s when resolved against the iframe's origin.
+                return join_url(zip_content_static_root(), relpath)
+
+        return None
+
+    @property
+    def viewer_data(self):
+        """
+        Extends the base payload with the sandbox handler URL, when built.
+        """
+        # `define_hook` rebuilds the class through KolibriHookMeta, so the class
+        # zero-argument `super()` closes over is not in the instance's MRO.
+        data = super(SandboxedContentViewerHook, self).viewer_data
+        handler_url = self.sandbox_handler_url
+        if handler_url:
+            data["sandboxHandlerUrl"] = handler_url
+        return data
+
+
 @define_hook
 class ContentNodeDisplayHook(KolibriHook):
     """
diff --git a/kolibri/core/content/templatetags/content_tags.py b/kolibri/core/content/templatetags/content_tags.py
index 21b5e17267f..ebdd1dfd360 100644
--- a/kolibri/core/content/templatetags/content_tags.py
+++ b/kolibri/core/content/templatetags/content_tags.py
@@ -8,8 +8,8 @@
 
     {% load webpack_tags %}
 
-    <!-- Render on-demand async inclusion tag for content renderers -->
-    {% content_renderer_assets %}
+    <!-- Render on-demand async inclusion tag for content viewers -->
+    {% content_viewer_assets %}
 
 """
 
@@ -21,13 +21,12 @@
 
 
 @register.simple_tag()
-def content_renderer_assets():
+def content_viewer_assets():
     """
-    This is a script tag for all ``ContentRendererInclusionHook`` hooks that implement a
-    render_to_html() method - this is used in in any template to
-    register any content renderers with the frontend so that they can be dynamically loaded
-    on demand.
+    Generates script tags for all ``ContentViewerHook`` hooks.
+    Used in templates to register content viewers with the frontend
+    so they can be dynamically loaded on demand.
 
     :return: HTML of script tags to insert into template
     """
-    return hooks.ContentRendererHook.html()
+    return hooks.ContentViewerHook.html()
diff --git a/kolibri/core/content/test/test_content_viewer_hooks.py b/kolibri/core/content/test/test_content_viewer_hooks.py
new file mode 100644
index 00000000000..988f61599cb
--- /dev/null
+++ b/kolibri/core/content/test/test_content_viewer_hooks.py
@@ -0,0 +1,166 @@
+import os
+
+from django.conf import settings
+from django.test import TestCase
+from le_utils.constants import format_presets
+from mock import MagicMock
+from mock import patch
+
+from kolibri.core.content.hooks import SandboxedContentViewerHook
+from kolibri.core.content.utils.paths import zip_content_static_root
+from kolibri.core.webpack.hooks import WebpackError
+
+
+class SandboxHook(SandboxedContentViewerHook):
+    # register_hook sets this; hooks defined outside a kolibri_plugin module
+    # cannot be registered, so mark it concrete directly.
+    _not_abstract = True
+
+    bundle_id = "main"
+    sandbox_handler_id = "sandbox_handler"
+    presets = (format_presets.HTML5_ZIP,)
+    css_selectors = ("iframe[data-sandbox]",)
+
+
+class SandboxedContentViewerHookTestCase(TestCase):
+    def setUp(self):
+        self.hook = SandboxHook()
+
+    def test_sandbox_handler_unique_id_namespaces_the_bundle(self):
+        self.assertEqual(
+            self.hook.sandbox_handler_unique_id,
+            "kolibri.core.content.test.sandbox_handler",
+        )
+
+    def test_sandbox_static_path_is_the_module_static_dir(self):
+        self.assertEqual(
+            self.hook.sandbox_static_path,
+            os.path.join(os.path.dirname(__file__), "static"),
+        )
+
+    def test_get_sandbox_static_paths_puts_core_first(self):
+        with patch.object(
+            SandboxedContentViewerHook,
+            "_registered_hooks",
+            {self.hook.unique_id: self.hook},
+        ):
+            paths = SandboxedContentViewerHook.get_sandbox_static_paths()
+
+        self.assertEqual(len(paths), 2)
+        self.assertTrue(paths[0].endswith(os.path.join("content", "static")))
+        self.assertEqual(paths[1], self.hook.sandbox_static_path)
+
+    def test_missing_stats_file_raises(self):
+        with self.assertRaises(WebpackError):
+            self.hook._get_sandbox_handler_stats()
+
+    def _patch_stats_file(self, contents):
+        stats_file = MagicMock()
+        stats_file.joinpath.return_value = stats_file
+        stats_file.read_text.return_value = contents
+        return (
+            patch("kolibri.core.content.hooks.files", return_value=stats_file),
+            stats_file,
+        )
+
+    def test_stats_file_read_once_outside_developer_mode(self):
+        patcher, stats_file = self._patch_stats_file('{"chunks": {}}')
+        with patcher, self.settings(DEVELOPER_MODE=False):
+            self.hook._get_sandbox_handler_stats()
+            self.hook._get_sandbox_handler_stats()
+
+        stats_file.read_text.assert_called_once()
+
+    def test_stats_file_reread_in_developer_mode(self):
+        patcher, stats_file = self._patch_stats_file('{"chunks": {}}')
+        with patcher, self.settings(DEVELOPER_MODE=True):
+            self.hook._get_sandbox_handler_stats()
+            self.hook._get_sandbox_handler_stats()
+
+        self.assertEqual(stats_file.read_text.call_count, 2)
+
+    def test_sandbox_handler_url_is_none_without_a_js_chunk(self):
+        with patch.object(
+            SandboxHook, "_get_sandbox_handler_stats", return_value={"chunks": {}}
+        ):
+            self.assertIsNone(self.hook.sandbox_handler_url)
+
+    def test_sandbox_handler_url_served_from_zip_content_origin(self):
+        # The handler <script> loads inside the sandbox iframe, which is served
+        # from the alternate (zip content) origin, so the URL must live under
+        # that origin's static root — not the main-origin STATIC_URL, which
+        # 404s when resolved against the iframe's origin.
+        stats = {
+            "chunks": {
+                self.hook.sandbox_handler_unique_id: [{"name": "handler.js"}],
+            }
+        }
+        with patch.object(
+            SandboxHook, "_get_sandbox_handler_stats", return_value=stats
+        ):
+            url = self.hook.sandbox_handler_url
+
+        self.assertTrue(url.startswith(zip_content_static_root()))
+        self.assertFalse(url.startswith(settings.STATIC_URL))
+        self.assertTrue(
+            url.endswith("kolibri.core.content.test.sandbox_handler/handler.js")
+        )
+
+    def test_sandbox_handler_url_prefers_public_path_in_developer_mode(self):
+        stats = {
+            "chunks": {
+                self.hook.sandbox_handler_unique_id: [
+                    {"name": "handler.js", "publicPath": "http://localhost:3000/x.js"}
+                ],
+            }
+        }
+        with patch.object(
+            SandboxHook, "_get_sandbox_handler_stats", return_value=stats
+        ):
+            with self.settings(DEVELOPER_MODE=True):
+                self.assertEqual(
+                    self.hook.sandbox_handler_url, "http://localhost:3000/x.js"
+                )
+
+    def test_viewer_data_adds_the_handler_url_to_the_base_payload(self):
+        stats = {
+            "chunks": {
+                self.hook.sandbox_handler_unique_id: [{"name": "handler.js"}],
+            }
+        }
+        with patch.object(
+            SandboxHook, "_get_sandbox_handler_stats", return_value=stats
+        ), patch.object(SandboxHook, "bundle", [{"url": "/main.js"}]):
+            data = self.hook.viewer_data
+
+        self.assertEqual(data["urls"], ["/main.js"])
+        self.assertEqual(data["presets"], (format_presets.HTML5_ZIP,))
+        self.assertEqual(data["css_selectors"], ("iframe[data-sandbox]",))
+        self.assertTrue(data["sandboxHandlerUrl"].endswith("handler.js"))
+
+    def test_viewer_data_omits_the_handler_url_without_a_js_chunk(self):
+        with patch.object(
+            SandboxHook, "_get_sandbox_handler_stats", return_value={"chunks": {}}
+        ), patch.object(SandboxHook, "bundle", [{"url": "/main.js"}]):
+            data = self.hook.viewer_data
+
+        self.assertNotIn("sandboxHandlerUrl", data)
+        self.assertEqual(data["css_selectors"], ("iframe[data-sandbox]",))
+
+    def test_sandbox_handler_url_ignores_auto_public_path(self):
+        stats = {
+            "chunks": {
+                self.hook.sandbox_handler_unique_id: [
+                    {"name": "handler.js", "publicPath": "auto"}
+                ],
+            }
+        }
+        with patch.object(
+            SandboxHook, "_get_sandbox_handler_stats", return_value=stats
+        ):
+            with self.settings(DEVELOPER_MODE=True):
+                url = self.hook.sandbox_handler_url
+
+        self.assertTrue(
+            url.endswith("kolibri.core.content.test.sandbox_handler/handler.js")
+        )
diff --git a/kolibri/core/content/utils/content_types_tools.py b/kolibri/core/content/utils/content_types_tools.py
index b30ca29404c..122441ea38d 100644
--- a/kolibri/core/content/utils/content_types_tools.py
+++ b/kolibri/core/content/utils/content_types_tools.py
@@ -3,7 +3,7 @@
 from le_utils.constants import content_kinds
 from le_utils.constants.format_presets import RENDERABLE_PRESETS_ORDER
 
-from kolibri.core.content.hooks import ContentRendererHook
+from kolibri.core.content.hooks import ContentViewerHook
 from kolibri.core.content.models import File
 
 # Every renderable preset's bit, keyed by preset. Used by the pre-V6 backfills.
@@ -16,7 +16,7 @@
 available_presets_bitmask = 0
 
 # loop through all the registered content renderer hooks
-for hook in ContentRendererHook.registered_hooks:
+for hook in ContentViewerHook.registered_hooks:
     for preset in hook.presets:
         # iterate through each of the content presets that each hook can handle
         renderable_files_presets.add(preset)
diff --git a/kolibri/core/templates/kolibri/base.html b/kolibri/core/templates/kolibri/base.html
index efc2b6f5134..0a110e47d92 100644
--- a/kolibri/core/templates/kolibri/base.html
+++ b/kolibri/core/templates/kolibri/base.html
@@ -44,7 +44,7 @@
   </div>
 </rootvue>
 {% block frontend_assets %}
-{% content_renderer_assets %}
+{% content_viewer_assets %}
 {% webpack_asset 'kolibri.core.default_frontend' %}
 {% frontend_base_assets %}
 {% endblock %}
diff --git a/kolibri/core/test/test_key_urls.py b/kolibri/core/test/test_key_urls.py
index cc5af3f129e..dade0b0e299 100644
--- a/kolibri/core/test/test_key_urls.py
+++ b/kolibri/core/test/test_key_urls.py
@@ -76,6 +76,10 @@ def test_facility_plugin_redirects_to_setup_wizard(self):
 
     @patch("kolibri.core.webpack.hooks.WebpackBundleHook.get_by_unique_id")
     @patch("kolibri.core.webpack.hooks.WebpackBundleHook.bundle", return_value=[])
+    @patch(
+        "kolibri.core.content.hooks.SandboxedContentViewerHook.sandbox_handler_url",
+        None,
+    )
     def test_setup_wizard_not_redirected(self, *mocks):
         response = self.client.get(
             reverse("kolibri:kolibri.plugins.setup_wizard:setupwizard")
@@ -237,6 +241,9 @@ def check_urls(urlpatterns, prefix=""):  # noqa: C901
             "kolibri.core.webpack.hooks.WebpackBundleHook.bundle", return_value=[]
         ), patch(
             "kolibri.core.webpack.hooks.WebpackBundleHook.get_by_unique_id"
+        ), patch(
+            "kolibri.core.content.hooks.SandboxedContentViewerHook.sandbox_handler_url",
+            None,
         ), patch.object(requests.Session, "request", mock_external_request):
             from kolibri.deployment.default.urls import urlpatterns
 
diff --git a/kolibri/deployment/default/alt_wsgi.py b/kolibri/deployment/default/alt_wsgi.py
index 202d8aff1bb..d3606574562 100644
--- a/kolibri/deployment/default/alt_wsgi.py
+++ b/kolibri/deployment/default/alt_wsgi.py
@@ -7,7 +7,6 @@
 
 import django
 
-import kolibri.core.content
 from kolibri.core.content.utils import paths
 
 os.environ.setdefault(
@@ -18,8 +17,9 @@
 def generate_alt_wsgi_application():
     django.setup(set_prefix=False)
 
-    # Defer these imports until after django setup has run
-    # as both depend on the NetworkClient (which depends on Django models)
+    # Defer these imports until after django setup has run, as they depend
+    # on Django models (via the NetworkClient) or the plugin registry
+    from kolibri.core.content.hooks import SandboxedContentViewerHook
     from kolibri.core.content.zip_wsgi import get_application
     from kolibri.utils.kolibri_whitenoise import DynamicWhiteNoise
 
@@ -29,9 +29,13 @@ def generate_alt_wsgi_application():
 
     content_dirs = [paths.get_content_dir_path()] + paths.get_content_fallback_paths()
 
-    content_static_path = os.path.join(
-        os.path.dirname(kolibri.core.content.__file__), "static"
-    )
+    static_root = paths.zip_content_static_root()
+
+    # Mount all sandbox static directories at the same root
+    static_locations = [
+        (static_root, fs_path)
+        for fs_path in SandboxedContentViewerHook.get_sandbox_static_paths()
+    ]
 
     # Mount static files
     return DynamicWhiteNoise(
@@ -39,7 +43,7 @@ def generate_alt_wsgi_application():
         dynamic_locations=[
             (alt_content_path, content_dir) for content_dir in content_dirs
         ]
-        + [(paths.zip_content_static_root(), content_static_path)],
+        + static_locations,
         app_paths=[paths.get_zip_content_base_path()],
     )
 
diff --git a/kolibri/plugins/bloompub_viewer/README.md b/kolibri/plugins/bloompub_viewer/README.md
new file mode 100644
index 00000000000..b4c685b448b
--- /dev/null
+++ b/kolibri/plugins/bloompub_viewer/README.md
@@ -0,0 +1,11 @@
+# BloomPub viewer
+
+Renders BloomPub books inside the Kolibri sandbox.
+
+## Vendored Bloom Player
+
+`static/bloom/` is built from [learningequality/bloom-player](https://github.com/learningequality/bloom-player), a fork of [BloomBooks/bloom-player](https://github.com/BloomBooks/bloom-player), using the fork's `patched` default branch.
+
+To regenerate, clone the fork, run `pnpm run build` within it, and copy everything from its `dist` into `static/bloom/`. Previously existing hash-named files can be deleted.
+
+There is no pinned upstream ref and no automated update path. Replacing this with a reproducible build from upstream is tracked in [#15039](https://github.com/learningequality/kolibri/issues/15039).
diff --git a/kolibri/plugins/bloompub_viewer/buildConfig.js b/kolibri/plugins/bloompub_viewer/buildConfig.js
index 860f69b4941..7eff7ddb565 100644
--- a/kolibri/plugins/bloompub_viewer/buildConfig.js
+++ b/kolibri/plugins/bloompub_viewer/buildConfig.js
@@ -1,6 +1,20 @@
-module.exports = {
-  bundle_id: 'main',
-  webpack_config: {
-    entry: './frontend/module.js',
+module.exports = [
+  {
+    bundle_id: 'main',
+    webpack_config: {
+      entry: './frontend/module.js',
+    },
   },
-};
+  {
+    bundle_id: 'sandbox_handler',
+    sandbox_handler: true,
+    webpack_config: {
+      entry: './frontend/sandbox_handler/index.js',
+      resolve: {
+        fallback: {
+          stream: require.resolve('web-streams-polyfill/es5'),
+        },
+      },
+    },
+  },
+];
diff --git a/kolibri/plugins/bloompub_viewer/frontend/module.js b/kolibri/plugins/bloompub_viewer/frontend/module.js
index 61156242934..18cbe1eeac8 100644
--- a/kolibri/plugins/bloompub_viewer/frontend/module.js
+++ b/kolibri/plugins/bloompub_viewer/frontend/module.js
@@ -1,9 +1,9 @@
 import ContentViewerModule from 'kolibri-viewer';
-import BloomPubComponent from './views/BloomPubRendererIndex.vue';
+import SandboxedContentViewer from 'kolibri/components/SandboxedContentViewer';
 
 class BloomPubModule extends ContentViewerModule {
   get viewerComponent() {
-    return BloomPubComponent;
+    return SandboxedContentViewer;
   }
 }
 
diff --git a/kolibri/plugins/bloompub_viewer/frontend/sandbox_handler/BloomHandler.js b/kolibri/plugins/bloompub_viewer/frontend/sandbox_handler/BloomHandler.js
new file mode 100644
index 00000000000..9aae2dea719
--- /dev/null
+++ b/kolibri/plugins/bloompub_viewer/frontend/sandbox_handler/BloomHandler.js
@@ -0,0 +1,40 @@
+/**
+ * Bloompub Handler for sandboxed content.
+ *
+ * Handles BLOOMPUB content type using BloomRunner for content loading.
+ * Provides BloomShim for progress tracking.
+ */
+import SandboxHandler from 'kolibri-sandbox/SandboxHandler';
+import BloomShim from './BloomShim';
+import BloomRunner from './BloomRunner';
+
+export default class BloomHandler extends SandboxHandler {
+  /**
+   * Shims required by Bloompub content.
+   * - BloomPlayer: For progress tracking via page reads
+   */
+  static shims = [BloomShim];
+
+  /**
+   * Initialize the iframe with Bloompub content.
+   * @param {HTMLIFrameElement} iframe - The content iframe
+   * @param {string} startUrl - URL to the Bloompub file
+   * @returns {Promise<void>}
+   */
+  init(iframe, startUrl) {
+    return new Promise((resolve, reject) => {
+      this.runner = new BloomRunner();
+      this.runner.init(iframe, startUrl, resolve, reject);
+    });
+  }
+
+  /**
+   * Clean up resources when content is unloaded.
+   */
+  destroy() {
+    this.runner = null;
+  }
+
+  // Note: Bloom Player gets its configuration via URL parameters,
+  // not from global objects like H5P. No _initializeShims override needed.
+}
diff --git a/packages/kolibri-sandbox/src/Bloom/BloomRunner.js b/kolibri/plugins/bloompub_viewer/frontend/sandbox_handler/BloomRunner.js
similarity index 97%
rename from packages/kolibri-sandbox/src/Bloom/BloomRunner.js
rename to kolibri/plugins/bloompub_viewer/frontend/sandbox_handler/BloomRunner.js
index f6daf3e6222..8a199315d05 100644
--- a/packages/kolibri-sandbox/src/Bloom/BloomRunner.js
+++ b/kolibri/plugins/bloompub_viewer/frontend/sandbox_handler/BloomRunner.js
@@ -1,6 +1,5 @@
 import ZipFile from 'kolibri-zip';
 import { DOMMapper, defaultFilePathMappers } from 'kolibri-zip/src/fileUtils';
-import { events } from '../base';
 
 const domParser = new DOMParser();
 
@@ -95,12 +94,6 @@ const filePathMappers = {
  * in CSS files are instead referenced by their new Blob URLs.
  */
 export default class BloomRunner {
-  constructor(shim) {
-    this.shim = shim;
-    this.data = shim.data;
-    this.events = events;
-  }
-
   init(iframe, filepath, loaded, errored) {
     // For each Bloom package, an object that maps the original file
     // reference in the Bloom file to a blob URL reference
@@ -117,7 +110,7 @@ export default class BloomRunner {
     this.errored = errored;
     // A fallback URL to the zipcontent endpoint for this Bloom file
     this.zipcontentUrl = new URL(
-      `../../zipcontent/${this.filepath.split('/').pop()}`,
+      `../../zipcontent/${this.filepath.substring(this.filepath.lastIndexOf('/') + 1)}`,
       window.location,
     ).href;
     const largeFileUrlGenerator = filePath => `${this.zipcontentUrl}/${filePath}`;
diff --git a/kolibri/plugins/bloompub_viewer/frontend/sandbox_handler/BloomShim.js b/kolibri/plugins/bloompub_viewer/frontend/sandbox_handler/BloomShim.js
new file mode 100644
index 00000000000..f1a4d44bbc6
--- /dev/null
+++ b/kolibri/plugins/bloompub_viewer/frontend/sandbox_handler/BloomShim.js
@@ -0,0 +1,48 @@
+/**
+ * Bloom Player shim for progress tracking.
+ *
+ * This shim handles the BLOOMPAGESREAD event to calculate progress
+ * based on pages read in Bloom content.
+ */
+import SandboxShim from 'kolibri-sandbox/SandboxShim';
+
+export default class BloomShim extends SandboxShim {
+  static shimName = 'BloomPlayer';
+
+  static consumesUserData = true;
+
+  // Bloom Player's own analytics event name - the space is theirs.
+  static events = {
+    BLOOMPAGESREAD: 'Pages Read',
+  };
+
+  constructor(mediator) {
+    super(mediator);
+    this._hasBeenFlaggedAsComplete = false;
+    this.__getProgress = this.__getProgress.bind(this);
+    this.on(this.events.BLOOMPAGESREAD, this.__getProgress);
+  }
+
+  __getProgress(data = {}) {
+    let progress = this.userData.progress || 0;
+    if (data.totalNumberedPages) {
+      progress = (data.audioPages + data.nonAudioPages + data.videoPages) / data.totalNumberedPages;
+      if (!this._hasBeenFlaggedAsComplete && progress >= 1) {
+        progress = 0.95;
+      }
+      this._hasBeenFlaggedAsComplete = data.lastNumberedPageRead;
+      this.userData.progress = progress;
+    }
+    this.stateUpdated();
+  }
+
+  getProgress() {
+    return this.userData.progress || null;
+  }
+
+  // eslint-disable-next-line no-unused-vars
+  iframeInitialize(contentWindow) {
+    // Bloom Player doesn't need special window patching like H5P
+    // The BloomRunner handles setting up the player
+  }
+}
diff --git a/kolibri/plugins/bloompub_viewer/frontend/sandbox_handler/BloomShim.spec.js b/kolibri/plugins/bloompub_viewer/frontend/sandbox_handler/BloomShim.spec.js
new file mode 100644
index 00000000000..0f95afa091b
--- /dev/null
+++ b/kolibri/plugins/bloompub_viewer/frontend/sandbox_handler/BloomShim.spec.js
@@ -0,0 +1,65 @@
+import { events } from 'kolibri-sandbox/base';
+import BloomShim from './BloomShim';
+
+describe('BloomShim', () => {
+  let shim;
+  let mediator;
+
+  beforeEach(() => {
+    mediator = { registerMessageHandler: jest.fn(), sendMessage: jest.fn() };
+    shim = new BloomShim(mediator);
+  });
+
+  function pagesRead(overrides = {}) {
+    shim.__getProgress({
+      totalNumberedPages: 10,
+      audioPages: 0,
+      nonAudioPages: 0,
+      videoPages: 0,
+      lastNumberedPageRead: false,
+      ...overrides,
+    });
+  }
+
+  function lastStateUpdate() {
+    const calls = mediator.sendMessage.mock.calls.filter(
+      c => c[0].nameSpace === 'BloomPlayer' && c[0].event === events.STATEUPDATE,
+    );
+    return calls[calls.length - 1]?.[0].data;
+  }
+
+  it('should report pages read as progress on a state update', () => {
+    // Progress reaches the main client through STATEUPDATE, the same path every
+    // other shim uses.
+    pagesRead({ nonAudioPages: 4 });
+
+    expect(lastStateUpdate()).toEqual({ state: {}, progress: 0.4 });
+  });
+
+  it('should count audio, non-audio and video pages together', () => {
+    pagesRead({ audioPages: 1, nonAudioPages: 2, videoPages: 2 });
+
+    expect(lastStateUpdate().progress).toEqual(0.5);
+  });
+
+  it('should hold back from complete until the last page has been read', () => {
+    pagesRead({ nonAudioPages: 10 });
+
+    expect(lastStateUpdate().progress).toEqual(0.95);
+  });
+
+  it('should report complete once the last page has been read', () => {
+    pagesRead({ nonAudioPages: 10, lastNumberedPageRead: true });
+    pagesRead({ nonAudioPages: 10, lastNumberedPageRead: true });
+
+    expect(lastStateUpdate().progress).toEqual(1);
+  });
+
+  it('should keep the progress restored from user data when no page count is reported', () => {
+    shim.setUserData({ progress: 0.3 });
+
+    pagesRead({ totalNumberedPages: 0 });
+
+    expect(lastStateUpdate().progress).toEqual(0.3);
+  });
+});
diff --git a/kolibri/plugins/bloompub_viewer/frontend/sandbox_handler/index.js b/kolibri/plugins/bloompub_viewer/frontend/sandbox_handler/index.js
new file mode 100644
index 00000000000..ba29bc8f9ab
--- /dev/null
+++ b/kolibri/plugins/bloompub_viewer/frontend/sandbox_handler/index.js
@@ -0,0 +1,10 @@
+/**
+ * Entry point for Bloompub sandbox handler.
+ *
+ * This module is loaded inside the sandboxed iframe and registers
+ * the BloomHandler with the SandboxEnvironment.
+ */
+import BloomHandler from './BloomHandler';
+
+// Instantiate the handler - this self-registers with window.SandboxEnvironment
+new BloomHandler(window.SandboxEnvironment);
diff --git a/kolibri/plugins/bloompub_viewer/frontend/views/BloomPubRendererIndex.vue b/kolibri/plugins/bloompub_viewer/frontend/views/BloomPubRendererIndex.vue
deleted file mode 100644
index 1e83607bdfd..00000000000
--- a/kolibri/plugins/bloompub_viewer/frontend/views/BloomPubRendererIndex.vue
+++ /dev/null
@@ -1,201 +0,0 @@
-<template>
-
-  <CoreFullscreen
-    ref="bloompubViewer"
-    class="bloompub-viewer"
-    :style="{ width: iframeWidth }"
-    @changeFullscreen="isInFullscreen = $event"
-  >
-    <ViewerToolbar
-      :isInFullscreen="isInFullscreen"
-      @toggleFullscreen="$refs.bloompubViewer.toggleFullscreen()"
-    />
-    <div
-      class="iframe-container"
-      :style="containerStyle"
-    >
-      <iframe
-        ref="iframe"
-        class="iframe"
-        sandbox="allow-scripts allow-same-origin"
-        :style="{ backgroundColor: $themePalette.grey.v_200 }"
-        frameBorder="0"
-        :src="rooturl"
-        :title="$tr('contentFrameTitle')"
-        allow="fullscreen"
-      >
-      </iframe>
-      <KCircularLoader
-        v-if="loading"
-        :delay="false"
-        class="loader"
-      />
-    </div>
-  </CoreFullscreen>
-
-</template>
-
-
-<script>
-
-  import urls from 'kolibri/urls';
-  import { now } from 'kolibri/utils/serverClock';
-  import CoreFullscreen from 'kolibri-common/components/CoreFullscreen';
-  import ViewerToolbar from 'kolibri-common/components/ViewerToolbar';
-  import Sandbox from 'kolibri-sandbox';
-  import useContentViewer from 'kolibri/composables/useContentViewer';
-
-  const defaultContentHeight = '500px';
-  const frameTopbarHeight = '48px';
-  export default {
-    name: 'BloomPubRendererIndex',
-    components: {
-      CoreFullscreen,
-      ViewerToolbar,
-    },
-    setup(props, context) {
-      const {
-        defaultFile,
-        options,
-        forceDurationBasedProgress,
-        reportError,
-        userId,
-        userFullName,
-        progress,
-        lang,
-        timeSpent,
-        extraFields,
-      } = useContentViewer(context, { defaultDuration: 300 });
-      return {
-        defaultFile,
-        options,
-        forceDurationBasedProgress,
-        reportError,
-        userId,
-        userFullName,
-        progress,
-        lang,
-        timeSpent,
-        extraFields,
-      };
-    },
-    data() {
-      return {
-        iframeHeight: (this.options && this.options.height) || defaultContentHeight,
-        isInFullscreen: false,
-        loading: false,
-      };
-    },
-    computed: {
-      rooturl() {
-        return urls.sandbox();
-      },
-      iframeWidth() {
-        return (this.options && this.options.width) || 'auto';
-      },
-      userData() {
-        return {
-          userId: this.userId,
-          userFullName: this.userFullName,
-          progress: this.progress,
-          complete: this.progress >= 1,
-          language: this.lang.id,
-          timeSpent: this.timeSpent,
-        };
-      },
-      containerStyle() {
-        if (this.isInFullscreen) {
-          return {
-            position: 'absolute',
-            top: frameTopbarHeight,
-            bottom: 0,
-          };
-        }
-        return {};
-      },
-    },
-    watch: {
-      userData(newValue) {
-        if (newValue && this.sandbox) {
-          this.sandbox.updateData({ userData: newValue });
-        }
-      },
-    },
-    mounted() {
-      this.sandbox = new Sandbox({ iframe: this.$refs.iframe, now });
-      this.sandbox.onUserDataUpdate(data => {
-        const progress = data.progress;
-        if (progress !== null && !this.forceDurationBasedProgress) {
-          this.$emit('updateProgress', progress);
-          if (progress >= 1) {
-            this.$emit('finished');
-          }
-        }
-      });
-      this.sandbox.on(this.sandbox.events.RESIZE, scrollHeight => {
-        this.iframeHeight = scrollHeight;
-      });
-      this.sandbox.on(this.sandbox.events.LOADING, loading => {
-        this.loading = loading;
-      });
-      this.sandbox.on(this.sandbox.events.ERROR, err => {
-        this.loading = false;
-        this.reportError(err);
-      });
-
-      this.sandbox.initialize(
-        (this.extraFields && this.extraFields.contentState) || {},
-        this.userData,
-        this.defaultFile.storage_url,
-        this.defaultFile.checksum,
-      );
-      this.$emit('startTracking');
-    },
-    beforeDestroy() {
-      if (this.timeout) {
-        clearTimeout(this.timeout);
-      }
-      this.$emit('stopTracking');
-    },
-    $trs: {
-      contentFrameTitle: {
-        message: 'Content viewer',
-        context: 'Accessible title for the iframe that displays the content',
-      },
-    },
-  };
-
-</script>
-
-
-<style lang="scss" scoped>
-
-  @import '~kolibri-design-system/lib/styles/definitions';
-  $frame-topbar-height: 48px;
-
-  .bloompub-viewer {
-    position: relative;
-    text-align: center;
-  }
-
-  .iframe {
-    width: 100%;
-    height: 100%;
-  }
-
-  .iframe-container {
-    @extend %momentum-scroll;
-
-    width: 100%;
-    height: calc(100% - #{$frame-topbar-height});
-    margin-bottom: -8px;
-    overflow: hidden;
-  }
-
-  .loader {
-    position: absolute;
-    top: calc(50% - 16px);
-    left: calc(50% - 16px);
-  }
-
-</style>
diff --git a/kolibri/plugins/bloompub_viewer/kolibri_plugin.py b/kolibri/plugins/bloompub_viewer/kolibri_plugin.py
index 8436e8ea814..94f47f241c0 100644
--- a/kolibri/plugins/bloompub_viewer/kolibri_plugin.py
+++ b/kolibri/plugins/bloompub_viewer/kolibri_plugin.py
@@ -10,6 +10,7 @@ class BloomPubRenderPlugin(KolibriPluginBase):
 
 
 @register_hook
-class BloomPubRenderAsset(content_hooks.ContentRendererHook):
+class BloomPubRenderAsset(content_hooks.SandboxedContentViewerHook):
     bundle_id = "main"
+    sandbox_handler_id = "sandbox_handler"
     presets = (format_presets.BLOOMPUB,)
diff --git a/kolibri/plugins/bloompub_viewer/package.json b/kolibri/plugins/bloompub_viewer/package.json
index d9128ca43db..4e273e17aa4 100644
--- a/kolibri/plugins/bloompub_viewer/package.json
+++ b/kolibri/plugins/bloompub_viewer/package.json
@@ -4,12 +4,15 @@
     "private": true,
     "version": "0.0.1",
     "dependencies": {
+        "core-js": "catalog:",
         "kolibri": "workspace:*",
         "kolibri-common": "workspace:*",
         "kolibri-design-system": "catalog:",
         "kolibri-sandbox": "workspace:*",
         "kolibri-viewer": "workspace:*",
+        "kolibri-zip": "workspace:*",
         "lodash": "catalog:",
-        "vue": "catalog:"
+        "vue": "catalog:",
+        "web-streams-polyfill": "catalog:"
     }
 }
\ No newline at end of file
diff --git a/kolibri/core/content/static/bloom/bloomPlayer-02a77592459cdf0b1bd7.min.js b/kolibri/plugins/bloompub_viewer/static/bloom/bloomPlayer-02a77592459cdf0b1bd7.min.js
similarity index 100%
rename from kolibri/core/content/static/bloom/bloomPlayer-02a77592459cdf0b1bd7.min.js
rename to kolibri/plugins/bloompub_viewer/static/bloom/bloomPlayer-02a77592459cdf0b1bd7.min.js
diff --git a/kolibri/core/content/static/bloom/bloomplayer.htm b/kolibri/plugins/bloompub_viewer/static/bloom/bloomplayer.htm
similarity index 67%
rename from kolibri/core/content/static/bloom/bloomplayer.htm
rename to kolibri/plugins/bloompub_viewer/static/bloom/bloomplayer.htm
index 6ba5d8a90e8..78ecb9bb4c6 100644
--- a/kolibri/core/content/static/bloom/bloomplayer.htm
+++ b/kolibri/plugins/bloompub_viewer/static/bloom/bloomplayer.htm
@@ -5,6 +5,12 @@
 <html>
     <head>
         <meta charset="UTF-8" />
+        <!-- Kolibri: hand the sandbox this window so it can install its shims before
+             any content script runs. Served statically, so unlike zip content this
+             is not injected by zip_wsgi - keep it when re-vendoring the player. -->
+        <script>
+            if (window.parent && window.parent.sandbox) {try {window.parent.sandbox.initializeIframe(window);} catch (e) {}}
+        </script>
     </head>
     <body style="background-color: #2e2e2e;">
         <div id="root"></span></div>
diff --git a/kolibri/core/content/static/bloom/right_answer-913c37e88e2939122d763361833efd24.mp3 b/kolibri/plugins/bloompub_viewer/static/bloom/right_answer-913c37e88e2939122d763361833efd24.mp3
similarity index 100%
rename from kolibri/core/content/static/bloom/right_answer-913c37e88e2939122d763361833efd24.mp3
rename to kolibri/plugins/bloompub_viewer/static/bloom/right_answer-913c37e88e2939122d763361833efd24.mp3
diff --git a/kolibri/core/content/static/bloom/wrong_answer-f96cfc1e0cc2cea2dd523d521d4c8738.mp3 b/kolibri/plugins/bloompub_viewer/static/bloom/wrong_answer-f96cfc1e0cc2cea2dd523d521d4c8738.mp3
similarity index 100%
rename from kolibri/core/content/static/bloom/wrong_answer-f96cfc1e0cc2cea2dd523d521d4c8738.mp3
rename to kolibri/plugins/bloompub_viewer/static/bloom/wrong_answer-f96cfc1e0cc2cea2dd523d521d4c8738.mp3
diff --git a/kolibri/plugins/epub_viewer/frontend/views/EpubRendererIndex.vue b/kolibri/plugins/epub_viewer/frontend/views/EpubRendererIndex.vue
index c3742753054..a9a0c322ae9 100644
--- a/kolibri/plugins/epub_viewer/frontend/views/EpubRendererIndex.vue
+++ b/kolibri/plugins/epub_viewer/frontend/views/EpubRendererIndex.vue
@@ -4,7 +4,7 @@
     :active="mobileEmbedded"
     @read="$refs.epubViewer.toggleFullscreen()"
   >
-    <CoreFullscreen
+    <Fullscreen
       ref="epubViewer"
       class="epub-viewer"
       :class="{ small: windowIsSmall, scrolled: scrolled, 'no-bottom-bar': mobileEmbedded }"
@@ -150,7 +150,7 @@
           @sliderChanged="handleSliderChanged"
         />
       </div>
-    </CoreFullscreen>
+    </Fullscreen>
   </EmbeddedReadCard>
 
 </template>
@@ -165,7 +165,7 @@
   import clamp from 'lodash/clamp';
   import Lockr from 'lockr';
   import FocusLock from 'vue-focus-lock';
-  import CoreFullscreen from 'kolibri-common/components/CoreFullscreen';
+  import Fullscreen from 'kolibri/components/Fullscreen';
   import EmbeddedReadCard from 'kolibri-common/components/EmbeddedReadCard';
   import useKResponsiveWindow from 'kolibri-design-system/lib/composables/useKResponsiveWindow';
   import useContentViewer from 'kolibri/composables/useContentViewer';
@@ -200,7 +200,7 @@
   export default {
     name: 'EpubRendererIndex',
     components: {
-      CoreFullscreen,
+      Fullscreen,
       EmbeddedReadCard,
       TopBar,
       TableOfContentsSideBar,
diff --git a/kolibri/plugins/epub_viewer/frontend/views/TopBar.vue b/kolibri/plugins/epub_viewer/frontend/views/TopBar.vue
index 96eda9dbc84..bfe7ec92f7b 100644
--- a/kolibri/plugins/epub_viewer/frontend/views/TopBar.vue
+++ b/kolibri/plugins/epub_viewer/frontend/views/TopBar.vue
@@ -36,7 +36,7 @@
 
 <script>
 
-  import ViewerToolbar from 'kolibri-common/components/ViewerToolbar';
+  import ViewerToolbar from 'kolibri/components/ViewerToolbar';
   import TocButton from './TocButton';
   import SettingsButton from './SettingsButton';
   import SearchButton from './SearchButton';
diff --git a/kolibri/plugins/epub_viewer/frontend/views/__tests__/TopBar.spec.js b/kolibri/plugins/epub_viewer/frontend/views/__tests__/TopBar.spec.js
index 8d612d3219f..532d656ab93 100644
--- a/kolibri/plugins/epub_viewer/frontend/views/__tests__/TopBar.spec.js
+++ b/kolibri/plugins/epub_viewer/frontend/views/__tests__/TopBar.spec.js
@@ -1,6 +1,6 @@
 import { render, screen, fireEvent } from '@testing-library/vue';
 import { createTranslator } from 'kolibri/utils/i18n';
-import { viewerToolbarStrings } from 'kolibri-common/components/ViewerToolbar';
+import { viewerToolbarStrings } from 'kolibri/components/ViewerToolbar';
 import TopBar from '../TopBar';
 import TocButton from '../TocButton';
 import SettingsButton from '../SettingsButton';
diff --git a/kolibri/plugins/epub_viewer/kolibri_plugin.py b/kolibri/plugins/epub_viewer/kolibri_plugin.py
index baaa516f5aa..497d6c74565 100644
--- a/kolibri/plugins/epub_viewer/kolibri_plugin.py
+++ b/kolibri/plugins/epub_viewer/kolibri_plugin.py
@@ -10,7 +10,7 @@ class DocumentEPUBRenderPlugin(KolibriPluginBase):
 
 
 @register_hook
-class DocumentEPUBRenderAsset(content_hooks.ContentRendererHook):
+class DocumentEPUBRenderAsset(content_hooks.ContentViewerHook):
     bundle_id = "main"
     presets = (format_presets.EPUB,)
     allow_object_tag = True
diff --git a/kolibri/plugins/h5p_viewer/README.md b/kolibri/plugins/h5p_viewer/README.md
new file mode 100644
index 00000000000..d2e27af13ac
--- /dev/null
+++ b/kolibri/plugins/h5p_viewer/README.md
@@ -0,0 +1,15 @@
+# H5P viewer
+
+Renders H5P content inside the Kolibri sandbox.
+
+## Vendored H5P library
+
+`static/h5p/` is built from [h5p/h5p-php-library](https://github.com/h5p/h5p-php-library). The upstream commit is pinned in `h5p_build/.h5p-commit-sha`.
+
+To update by hand, write the desired commit SHA to that file and run:
+
+```bash
+pnpm --filter kolibri-h5p-viewer-plugin run build-h5p
+```
+
+The `update-h5p` job in `.github/workflows/dependency_updates.yml` does this automatically, opening a PR when upstream moves.
diff --git a/kolibri/plugins/h5p_viewer/__init__.py b/kolibri/plugins/h5p_viewer/__init__.py
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/kolibri/plugins/h5p_viewer/babel.config.js b/kolibri/plugins/h5p_viewer/babel.config.js
new file mode 100644
index 00000000000..18c40736aea
--- /dev/null
+++ b/kolibri/plugins/h5p_viewer/babel.config.js
@@ -0,0 +1,15 @@
+/* eslint-disable import-x/no-commonjs, import-x/no-amd, import-x/no-import-module-exports */
+// babel-loader resolves this relative to the build's cwd, which is this package.
+module.exports = {
+  presets: ['@babel/preset-env'],
+  plugins: [
+    [
+      'babel-plugin-polyfill-corejs3',
+      {
+        method: 'usage-global',
+        // Our own core-js dependency is the single source of truth for the version.
+        version: require('core-js/package.json').version,
+      },
+    ],
+  ],
+};
diff --git a/kolibri/plugins/h5p_viewer/buildConfig.js b/kolibri/plugins/h5p_viewer/buildConfig.js
new file mode 100644
index 00000000000..7eff7ddb565
--- /dev/null
+++ b/kolibri/plugins/h5p_viewer/buildConfig.js
@@ -0,0 +1,20 @@
+module.exports = [
+  {
+    bundle_id: 'main',
+    webpack_config: {
+      entry: './frontend/module.js',
+    },
+  },
+  {
+    bundle_id: 'sandbox_handler',
+    sandbox_handler: true,
+    webpack_config: {
+      entry: './frontend/sandbox_handler/index.js',
+      resolve: {
+        fallback: {
+          stream: require.resolve('web-streams-polyfill/es5'),
+        },
+      },
+    },
+  },
+];
diff --git a/kolibri/plugins/h5p_viewer/frontend/module.js b/kolibri/plugins/h5p_viewer/frontend/module.js
new file mode 100644
index 00000000000..5fe3ec9fe02
--- /dev/null
+++ b/kolibri/plugins/h5p_viewer/frontend/module.js
@@ -0,0 +1,12 @@
+import ContentViewerModule from 'kolibri-viewer';
+import SandboxedContentViewer from 'kolibri/components/SandboxedContentViewer';
+
+class H5PViewerModule extends ContentViewerModule {
+  get viewerComponent() {
+    return SandboxedContentViewer;
+  }
+}
+
+const h5pViewerModule = new H5PViewerModule();
+
+export { h5pViewerModule as default };
diff --git a/kolibri/plugins/h5p_viewer/frontend/sandbox_handler/H5PHandler.js b/kolibri/plugins/h5p_viewer/frontend/sandbox_handler/H5PHandler.js
new file mode 100644
index 00000000000..09a6f9c7c29
--- /dev/null
+++ b/kolibri/plugins/h5p_viewer/frontend/sandbox_handler/H5PHandler.js
@@ -0,0 +1,42 @@
+/**
+ * H5P Handler for sandboxed content.
+ *
+ * Handles H5P_ZIP content type using H5PRunner for content loading.
+ * Provides xAPI shim for learning record storage.
+ */
+import SandboxHandler from 'kolibri-sandbox/SandboxHandler';
+import xAPIShim from './xAPIShim';
+import H5PShim from './H5PShim';
+import H5PRunner from './H5PRunner';
+
+export default class H5PHandler extends SandboxHandler {
+  /**
+   * Shims required by H5P content.
+   * - xAPI: For learning record storage
+   * - H5P: Defines the H5PIntegration global, and persists H5P's own user data
+   */
+  static shims = [xAPIShim, H5PShim];
+
+  /**
+   * Initialize the iframe with H5P content.
+   * @param {HTMLIFrameElement} iframe - The content iframe
+   * @param {string} startUrl - URL to the H5P file
+   * @returns {Promise<void>}
+   */
+  init(iframe, startUrl) {
+    return new Promise((resolve, reject) => {
+      this.runner = new H5PRunner(this.shims.H5P);
+      // Hand the runner over before it sets iframe.src, so the shim can build
+      // H5PIntegration when the content page calls back from its <head>.
+      this.shims.H5P.setRunner(this.runner);
+      this.runner.init(iframe, startUrl, resolve, reject);
+    });
+  }
+
+  /**
+   * Clean up resources when content is unloaded.
+   */
+  destroy() {
+    this.runner = null;
+  }
+}
diff --git a/packages/kolibri-sandbox/src/H5P/H5PRunner.js b/kolibri/plugins/h5p_viewer/frontend/sandbox_handler/H5PRunner.js
similarity index 94%
rename from packages/kolibri-sandbox/src/H5P/H5PRunner.js
rename to kolibri/plugins/h5p_viewer/frontend/sandbox_handler/H5PRunner.js
index 455c31c5414..bd6acd54d09 100644
--- a/packages/kolibri-sandbox/src/H5P/H5PRunner.js
+++ b/kolibri/plugins/h5p_viewer/frontend/sandbox_handler/H5PRunner.js
@@ -6,8 +6,8 @@ import debounce from 'lodash/debounce';
 import unset from 'lodash/unset';
 import Toposort from 'toposort-class';
 import ZipFile from 'kolibri-zip';
-import filenameObj from '../../h5p_build.json';
-import { XAPIVerbMap } from '../xAPI/xAPIVocabulary';
+import filenameObj from '../../h5p_build/h5p_build.json';
+import { XAPIVerbMap } from './xAPIConstants';
 
 const H5PFilename = filenameObj.filename;
 
@@ -78,10 +78,23 @@ const metadataKeys = [
 export default class H5PRunner {
   constructor(shim) {
     this.shim = shim;
-    this.data = shim.data;
     this.scriptLoader = this.scriptLoader.bind(this);
   }
 
+  /*
+   * H5P's state and the learner's user data both live on the shim, which is what
+   * persists them and what receives updates from Kolibri. Read them through rather
+   * than copying the references: an update replaces the object, and a copy would
+   * leave us reading state nobody writes to and writing state nobody reads.
+   */
+  get data() {
+    return this.shim.data;
+  }
+
+  get userData() {
+    return this.shim.userData;
+  }
+
   init(iframe, filepath, loaded, errored) {
     // An array of the H5P package dependencies for this library
     // This is not a sorted list, but the result of recursing through
@@ -126,7 +139,7 @@ export default class H5PRunner {
     this.filepath = filepath;
     // A fallback URL to the zipcontent endpoint for this H5P file
     this.zipcontentUrl = new URL(
-      `../../zipcontent/${this.filepath.split('/').pop()}`,
+      `../../zipcontent/${this.filepath.substring(this.filepath.lastIndexOf('/') + 1)}`,
       window.location,
     ).href;
     // Callback to call when H5P has finished loading
@@ -184,6 +197,8 @@ export default class H5PRunner {
    * Shim H5P, load dependencies, and then start H5P in the contentWindow.
    */
   initH5P() {
+    // H5PIntegration is installed by H5PShim from the content page's <head>,
+    // before any of the H5P host page's own scripts run.
     this.shimH5P(this.iframe.contentWindow);
     return this.scriptLoader(this.cssURL, true).then(() => {
       return this.scriptLoader(this.javascriptURL).then(() => {
@@ -359,10 +374,15 @@ export default class H5PRunner {
   }
 
   /*
-   * This will setup the H5PIntegration property that H5P then uses
-   * to configure itself.
+   * The object H5P reads to configure itself. Every field is a getter, so this
+   * can be handed out before the H5P file has been processed - the values
+   * resolve whenever H5P actually reads them. Built once, so H5PIntegration
+   * keeps a stable identity across reads as it did when set as a plain value.
    */
-  shimH5PIntegration(contentWindow) {
+  buildIntegration() {
+    if (this.integrationShim) {
+      return this.integrationShim;
+    }
     const self = this;
     this.integrationShim = {
       get contents() {
@@ -403,7 +423,7 @@ export default class H5PRunner {
       },
       get user() {
         return {
-          name: self.userData.userFullName,
+          name: self.userData.userFullName || '',
           mail: '',
         };
       },
@@ -414,17 +434,14 @@ export default class H5PRunner {
         return self.zipcontentUrl;
       },
     };
-    Object.defineProperty(contentWindow, 'H5PIntegration', {
-      value: this.integrationShim,
-      configurable: true,
-    });
+    return this.integrationShim;
   }
 
   /**
    * Loads a Javascript file and executes it.
-   * @param {string} url - URL for the script.
-   * @param {boolean} [css] - When true, load the URL as a stylesheet instead of a script.
-   * @returns {Promise<void>} Resolves when the script (or stylesheet) has loaded.
+   * @param {string} url - URL for the script
+   * @param {boolean} css - Whether to load the URL as a stylesheet instead of a script
+   * @returns {Promise} Promise that resolves when the script has loaded
    */
   scriptLoader(url, css = false) {
     const iframeDocument = this.iframe.contentWindow.document;
diff --git a/kolibri/plugins/h5p_viewer/frontend/sandbox_handler/H5PShim.js b/kolibri/plugins/h5p_viewer/frontend/sandbox_handler/H5PShim.js
new file mode 100644
index 00000000000..21326e1455f
--- /dev/null
+++ b/kolibri/plugins/h5p_viewer/frontend/sandbox_handler/H5PShim.js
@@ -0,0 +1,45 @@
+/**
+ * H5P shim.
+ *
+ * Defines the H5PIntegration global that the H5P vendor bundle reads to
+ * configure itself. This has to be a shim rather than something the runner
+ * sets up after loading the content: the vendor bundle reads H5PIntegration on
+ * document ready, which fires long before the H5P zip has been processed.
+ */
+import SandboxShim from 'kolibri-sandbox/SandboxShim';
+
+/**
+ * @typedef {import('./H5PRunner').default} H5PRunner
+ */
+
+export default class H5PShim extends SandboxShim {
+  static shimName = 'H5P';
+
+  // The runner reads the learner's name out of user data, for the xAPI actor H5P
+  // puts on every statement it sends.
+  static consumesUserData = true;
+
+  /**
+   * Wire up the runner that resolves the integration object.
+   * @param {H5PRunner} runner - Runner that builds the integration object
+   */
+  setRunner(runner) {
+    this.runner = runner;
+  }
+
+  /**
+   * Define H5PIntegration as an accessor rather than a value, so installing it
+   * does not depend on the runner already existing - it only has to be wired up
+   * by the time H5P reads the property, which is strictly later.
+   * @param {Window} contentWindow - Window object to define H5PIntegration on
+   */
+  iframeInitialize(contentWindow) {
+    const self = this;
+    Object.defineProperty(contentWindow, 'H5PIntegration', {
+      get() {
+        return self.runner.buildIntegration();
+      },
+      configurable: true,
+    });
+  }
+}
diff --git a/kolibri/plugins/h5p_viewer/frontend/sandbox_handler/H5PShim.spec.js b/kolibri/plugins/h5p_viewer/frontend/sandbox_handler/H5PShim.spec.js
new file mode 100644
index 00000000000..8869c9427dd
--- /dev/null
+++ b/kolibri/plugins/h5p_viewer/frontend/sandbox_handler/H5PShim.spec.js
@@ -0,0 +1,72 @@
+import { events } from 'kolibri-sandbox/base';
+import H5PHandler from './H5PHandler';
+import H5PRunner from './H5PRunner';
+import H5PShim from './H5PShim';
+
+jest.mock('./H5PRunner');
+
+describe('H5PShim', () => {
+  let mockMediator;
+  let mockSandbox;
+
+  beforeEach(() => {
+    H5PRunner.mockClear();
+    mockMediator = {
+      registerMessageHandler: jest.fn(),
+      sendMessage: jest.fn(),
+    };
+    mockSandbox = { mediator: mockMediator, registerHandler: jest.fn() };
+  });
+
+  it('should be the shim the runner persists H5P user data through', () => {
+    // Content played on 0.19.x has its resume state keyed by 'H5P' in contentState,
+    // so the shim the runner writes through has to be this one - hand it the xAPI
+    // shim it sits alongside and everything saved before the upgrade is orphaned.
+    const handler = new H5PHandler(mockSandbox);
+
+    handler.init(document.createElement('iframe'), 'test.h5p');
+
+    expect(H5PRunner).toHaveBeenCalledWith(expect.objectContaining({ nameSpace: 'H5P' }));
+  });
+
+  it('should keep the runner reading state that arrives after it was created', () => {
+    const RealRunner = jest.requireActual('./H5PRunner').default;
+    const shim = new H5PShim(mockMediator);
+    const runner = new RealRunner(shim);
+
+    shim.setData({ 0: { answers: '[1]' } });
+
+    expect(runner.data).toEqual({ 0: { answers: '[1]' } });
+  });
+
+  it('should name the learner in the integration H5P reads', () => {
+    // H5P puts this on the actor of every xAPI statement it sends.
+    const RealRunner = jest.requireActual('./H5PRunner').default;
+    const shim = new H5PShim(mockMediator);
+    const runner = new RealRunner(shim);
+
+    shim.setUserData({ userFullName: 'Test Learner' });
+
+    expect(runner.buildIntegration().user).toEqual({ name: 'Test Learner', mail: '' });
+  });
+
+  it('should name the learner as empty when there is no user data', () => {
+    const RealRunner = jest.requireActual('./H5PRunner').default;
+    const runner = new RealRunner(new H5PShim(mockMediator));
+
+    expect(runner.buildIntegration().user).toEqual({ name: '', mail: '' });
+  });
+
+  it('should send state under the H5P namespace', () => {
+    const shim = new H5PShim(mockMediator);
+    shim.data = { 0: { answers: '[1]' } };
+
+    shim.stateUpdated();
+
+    expect(mockMediator.sendMessage).toHaveBeenCalledWith({
+      nameSpace: 'H5P',
+      event: events.STATEUPDATE,
+      data: { state: { 0: { answers: '[1]' } } },
+    });
+  });
+});
diff --git a/kolibri/plugins/h5p_viewer/frontend/sandbox_handler/index.js b/kolibri/plugins/h5p_viewer/frontend/sandbox_handler/index.js
new file mode 100644
index 00000000000..6db93220d27
--- /dev/null
+++ b/kolibri/plugins/h5p_viewer/frontend/sandbox_handler/index.js
@@ -0,0 +1,10 @@
+/**
+ * Entry point for H5P sandbox handler.
+ *
+ * This module is loaded inside the sandboxed iframe and registers
+ * the H5PHandler with the SandboxEnvironment.
+ */
+import H5PHandler from './H5PHandler';
+
+// Instantiate the handler - this self-registers with window.SandboxEnvironment
+new H5PHandler(window.SandboxEnvironment);
diff --git a/packages/kolibri-sandbox/src/xAPI/xAPIVocabulary.js b/kolibri/plugins/h5p_viewer/frontend/sandbox_handler/xAPIConstants.js
similarity index 62%
rename from packages/kolibri-sandbox/src/xAPI/xAPIVocabulary.js
rename to kolibri/plugins/h5p_viewer/frontend/sandbox_handler/xAPIConstants.js
index 7ab7624f89c..c4b1e6aa13b 100644
--- a/packages/kolibri-sandbox/src/xAPI/xAPIVocabulary.js
+++ b/kolibri/plugins/h5p_viewer/frontend/sandbox_handler/xAPIConstants.js
@@ -1,6 +1,9 @@
+/**
+ * xAPI Constants and Vocabulary
+ */
+
 // Known XAPI verbs, based on the ADL XAPI vocabulary:
 // https://github.com/adlnet/xapi-authored-profiles/blob/master/adl/v1.0/adl.jsonld
-
 export const XAPIVerbMap = {
   attended: 'http://adlnet.gov/expapi/verbs/attended',
   imported: 'http://adlnet.gov/expapi/verbs/imported',
@@ -20,10 +23,7 @@ export const XAPIVerbMap = {
   exited: 'http://adlnet.gov/expapi/verbs/exited',
   experienced: 'http://adlnet.gov/expapi/verbs/experienced',
   mastered: 'http://adlnet.gov/expapi/verbs/mastered',
-  // These are not specified in the above link, but are claimed by H5P to be derived
-  // from the ADL XAPI Vocabulary
-  // At least some seem to be derived from the CMI5 specification that defines specific verbs
-  // https://github.com/AICC/CMI-5_Spec_Current/blob/quartz/cmi5_spec.md#93-verbs
+  // CMI5 specification verbs
   completed: 'http://adlnet.gov/expapi/verbs/completed',
   failed: 'http://adlnet.gov/expapi/verbs/failed',
   initialized: 'http://adlnet.gov/expapi/verbs/initialized',
@@ -33,14 +33,49 @@ export const XAPIVerbMap = {
   scored: 'http://adlnet.gov/expapi/verbs/scored',
   suspended: 'http://adlnet.gov/expapi/verbs/suspended',
   terminated: 'http://adlnet.gov/expapi/verbs/terminated',
-
-  // These are custom verbs added by H5P and are not included in the above vocabulary
-  // used by the H5P action bar - we deviate here by using an invented URI
-  // These should not actually get used in our implementation, as we hide all these UI
-  // elements.
+  // H5P custom verbs
   downloaded: 'http://h5p.org/x-api/verbs/downloaded',
   copied: 'http://h5p.org/x-api/verbs/copied',
   'accessed-reuse': 'http://h5p.org/x-api/verbs/accessed-reuse',
   'accessed-embed': 'http://h5p.org/x-api/verbs/accessed-embed',
   'accessed-copyright': 'http://h5p.org/x-api/verbs/accessed-copyright',
 };
+
+export const OBJECT_TYPES = {
+  AGENT: 'Agent',
+  GROUP: 'Group',
+  ACTIVITY: 'Activity',
+  STATEMENTREF: 'StatementRef',
+  SUBSTATEMENT: 'SubStatement',
+};
+
+export const ObjectTypeChoices = new Set(Object.values(OBJECT_TYPES));
+
+export const INTERACTION_TYPES = {
+  TRUE_FALSE: 'true-false',
+  CHOICE: 'choice',
+  FILL_IN: 'fill-in',
+  LONG_FILL_IN: 'long-fill-in',
+  MATCHING: 'matching',
+  PERFORMANCE: 'performance',
+  SEQUENCING: 'sequencing',
+  LIKERT: 'likert',
+  NUMERIC: 'numeric',
+  OTHER: 'other',
+};
+
+export const InteractionTypeChoices = new Set(Object.values(INTERACTION_TYPES));
+
+export const interactionOptionsLookup = {
+  choices: new Set([INTERACTION_TYPES.CHOICE, INTERACTION_TYPES.SEQUENCING]),
+  scale: new Set([INTERACTION_TYPES.LIKERT]),
+  source: new Set([INTERACTION_TYPES.MATCHING]),
+  target: new Set([INTERACTION_TYPES.MATCHING]),
+  steps: new Set([INTERACTION_TYPES.PERFORMANCE]),
+};
+
+export const OUTER_DELIMITER = '[,]';
+export const INNER_DELIMITER = '[.]';
+export const RANGE_DELIMITER = '[:]';
+
+export const CMI_INTERACTION = 'http://adlnet.gov/expapi/activities/cmi.interaction';
diff --git a/packages/kolibri-sandbox/src/xAPI/xAPISchema.js b/kolibri/plugins/h5p_viewer/frontend/sandbox_handler/xAPISchema.js
similarity index 100%
rename from packages/kolibri-sandbox/src/xAPI/xAPISchema.js
rename to kolibri/plugins/h5p_viewer/frontend/sandbox_handler/xAPISchema.js
diff --git a/packages/kolibri-sandbox/test/xAPI.spec.js b/kolibri/plugins/h5p_viewer/frontend/sandbox_handler/xAPISchema.spec.js
similarity index 99%
rename from packages/kolibri-sandbox/test/xAPI.spec.js
rename to kolibri/plugins/h5p_viewer/frontend/sandbox_handler/xAPISchema.spec.js
index 9a59a8177aa..2b23ec0d74f 100644
--- a/packages/kolibri-sandbox/test/xAPI.spec.js
+++ b/kolibri/plugins/h5p_viewer/frontend/sandbox_handler/xAPISchema.spec.js
@@ -14,7 +14,7 @@ import {
   SubStatement,
   xAPIValidationError,
   Verb,
-} from '../src/xAPI/xAPISchema';
+} from './xAPISchema';
 import { SampleStatements, SampleObjects, SampleActivityDefinitions } from './xapidata';
 
 const logging = console; // eslint-disable-line no-console
diff --git a/packages/kolibri-sandbox/src/xAPI/xAPIInterface.js b/kolibri/plugins/h5p_viewer/frontend/sandbox_handler/xAPIShim.js
similarity index 76%
rename from packages/kolibri-sandbox/src/xAPI/xAPIInterface.js
rename to kolibri/plugins/h5p_viewer/frontend/sandbox_handler/xAPIShim.js
index ad6009b3625..20c276adb40 100644
--- a/packages/kolibri-sandbox/src/xAPI/xAPIInterface.js
+++ b/kolibri/plugins/h5p_viewer/frontend/sandbox_handler/xAPIShim.js
@@ -1,5 +1,7 @@
 /**
- * This class creates an interface for validating, storing, and retrieving xAPI statements
+ * xAPI shim for H5P content.
+ *
+ * This class creates an interface for validating, storing, and retrieving xAPI statements.
  *
  * For more information, see:
  * https://github.com/adlnet/xAPI-Spec/blob/master/xAPI-Data.md
@@ -12,11 +14,11 @@ import unset from 'lodash/unset';
 import isMatch from 'lodash/isMatch';
 import isNumber from 'lodash/isNumber';
 import overSome from 'lodash/overSome';
-import BaseShim from '../baseShim';
-import { XAPIVerbMap } from './xAPIVocabulary';
-import { OBJECT_TYPES } from './xAPIConstants';
+import SandboxShim from 'kolibri-sandbox/SandboxShim';
+import { XAPIVerbMap, OBJECT_TYPES } from './xAPIConstants';
+import { Statement } from './xAPISchema';
 
-const logging = console; //eslint-disable-line no-console
+const logging = console; //eslint-disable-line no-console, no-unused-vars
 
 function actorsEqual(actor1, actor2) {
   if (actor1.mbox && actor2.mbox) {
@@ -26,7 +28,7 @@ function actorsEqual(actor1, actor2) {
     return actor1.mbox_sha1sum === actor2.mbox_sha1sum;
   }
   if (actor1.openid && actor2.openid) {
-    return actor2.openid === actor2.openid;
+    return actor1.openid === actor2.openid;
   }
   if (actor1.account && actor2.account) {
     return actor1.homePage === actor2.homePage && actor1.name && actor2.name;
@@ -35,31 +37,14 @@ function actorsEqual(actor1, actor2) {
 }
 
 const STATE = 'state';
-
 const ACTIVITY_PROFILE = 'activityProfile';
-
 const AGENT_PROFILE = 'agentProfile';
-
 const STATEMENT = 'statement';
-export default class xAPI extends BaseShim {
-  constructor(mediator) {
-    super(mediator);
-    this.data = {};
-    this.userData = {};
-    this.nameSpace = 'xAPI';
-    this.__setData = this.__setData.bind(this);
-    this.__setUserData = this.__setUserData.bind(this);
-    this.on(this.events.STATEUPDATE, this.__setData);
-    this.on(this.events.USERDATAUPDATE, this.__setUserData);
-  }
 
-  __setData(data = {}) {
-    this.data = data;
-  }
+export default class xAPIShim extends SandboxShim {
+  static shimName = 'xAPI';
 
-  __setUserData(userData = {}) {
-    this.userData = userData;
-  }
+  static consumesUserData = true;
 
   /*
    * Applies heuristics based on the CMI5 vocabulary:
@@ -68,7 +53,7 @@ export default class xAPI extends BaseShim {
    * @return {Number|null} returns a value between 0 or 1 or null if no progress could
    * be calculated.
    */
-  __calculateProgress() {
+  getProgress() {
     const possibleSuccessStatement = find(
       this.data[STATEMENT],
       s =>
@@ -175,7 +160,7 @@ export default class xAPI extends BaseShim {
     }
     statements = filter(statements, match);
     const orFilter = overSome(orFns);
-    statements = statements.filter(statements, orFilter);
+    statements = statements.filter(orFilter);
     if (since) {
       statements = statements.filter(s => s.stored > since);
     }
@@ -287,53 +272,33 @@ export default class xAPI extends BaseShim {
        */
       sendStatement(statement, compress = false) {
         return new Promise(resolve => {
-          return import(
-            /* webpackChunkName: "xAPISchema", webpackPrefetch: true */ './xAPISchema'
-          ).then(({ Statement }) => {
-            this.prepareStatement(statement);
-            try {
-              statement = Statement.clean(statement);
-            } catch (e) {
-              logging.debug('Statement: ', statement, 'gave the following error: ', e);
-              statement.error = e.message;
-            }
-            if (compress) {
-              // If we are compressing, then remove things that we
-              // can probably reconstruct
-              delete statement.actor;
-              delete statement.authority;
-              if (
-                !statement.object.objectType ||
-                statement.object.objectType === OBJECT_TYPES.ACTIVITY
-              ) {
-                delete statement.object;
-              }
+          this.prepareStatement(statement);
+          try {
+            statement = Statement.clean(statement);
+          } catch (e) {
+            logging.debug('Statement: ', statement, 'gave the following error: ', e);
+            statement.error = e.message;
+          }
+          if (compress) {
+            // If we are compressing, then remove things that we
+            // can probably reconstruct
+            delete statement.actor;
+            delete statement.authority;
+            if (
+              !statement.object.objectType ||
+              statement.object.objectType === OBJECT_TYPES.ACTIVITY
+            ) {
+              delete statement.object;
             }
-            self.storeStatements(statement);
-            self.stateUpdated();
-            resolve();
-          });
+          }
+          self.storeStatements(statement);
+          self.stateUpdated();
+          resolve();
         });
       }
       /*
        * Get statements that have previously been recorded
-       * Based on LRS behaviour defined here:
-       * https://github.com/adlnet/xAPI-Spec/blob/master/xAPI-Communication.md#213-get-statements
        * @param {Object} params - an object with search params for statements
-       * @param {string} [params.statementId] - Id of Statement
-       * @param {string} [params.voidedStatementId] - Id of voided Statement
-       * @param {Object} [params.agent] - Agent object that is the agent of the statement
-       * @param {string} [params.verb] - Verb IRI
-       * @param {string} [params.activity] - Activity IRI that matches Object of statement
-       * @param {string} [params.registration] - Registration UUID
-       * @param {Boolean} [params.related_activities=false] - Check activity IRI against any
-       * activity in the statement
-       * @param {Boolean} [params.related_agents=false] - Check agent object against any
-       * agent in the statement
-       * @param {string} [params.since] - Time to check statements since
-       * @param {string} [params.until] - Time to check statements until
-       * @param {Number} [params.limit] - Maximum number of statements to return
-       * @param {Boolean} [params.ascending=false] - Whether to return statements in ascending order
        * @return {Promise} Promise that will resolve with the statements
        */
       getStatements(params) {
@@ -366,7 +331,6 @@ export default class xAPI extends BaseShim {
       }
       /*
        * Retrieve multiple pieces of state, stored since a certain time
-       * https://github.com/adlnet/xAPI-Spec/blob/master/xAPI-Communication.md#multiple-document-get
        * @param {string} since - timestamp to retrieve state stored since
        * @return {Promise} Promise that will resolve with the matching state ids
        */
@@ -384,7 +348,6 @@ export default class xAPI extends BaseShim {
       }
       /*
        * Store activity profile id and value
-       * https://github.com/adlnet/xAPI-Spec/blob/master/xAPI-Communication.md#single-document-put--post--get--delete-1
        * @param {string} id - key for the activity profile to store
        * @param {string} value - the value for the activity profile to store
        * @return {Promise} Promise that will resolve when the activity profile is stored
@@ -394,7 +357,6 @@ export default class xAPI extends BaseShim {
       }
       /*
        * Get activity profile by id
-       * https://github.com/adlnet/xAPI-Spec/blob/master/xAPI-Communication.md#single-document-put--post--get--delete-1
        * @param {string} id - key for the activity profile to store
        * @return {Promise} Promise that will resolve with the activity profile or null
        */
@@ -403,7 +365,6 @@ export default class xAPI extends BaseShim {
       }
       /*
        * Retrieve multiple activity profile ids, stored since a certain time
-       * https://github.com/adlnet/xAPI-Spec/blob/master/xAPI-Communication.md#multiple-document-get-2
        * @param {string} since - timestamp to retrieve activity profiles stored since
        * @return {Promise} Promise that will resolve with the matching activity profile ids
        */
@@ -421,7 +382,6 @@ export default class xAPI extends BaseShim {
       }
       /*
        * Return the agent to use in statements
-       * https://github.com/adlnet/xAPI-Spec/blob/master/xAPI-Communication.md#combined-information-get
        * return {Promise} Promise that resolves to the agent
        */
       getAgent() {
@@ -429,7 +389,6 @@ export default class xAPI extends BaseShim {
       }
       /*
        * Store agent profile id and value
-       * https://github.com/adlnet/xAPI-Spec/blob/master/xAPI-Communication.md#single-agent-or-profile-document-put--post--get--delete
        * @param {string} id - key for the agent profile to store
        * @param {string} value - the value for the agent profile to store
        * @return {Promise} Promise that will resolve when the agent profile is stored
@@ -439,7 +398,6 @@ export default class xAPI extends BaseShim {
       }
       /*
        * Get agent profile by id
-       * https://github.com/adlnet/xAPI-Spec/blob/master/xAPI-Communication.md#single-agent-or-profile-document-put--post--get--delete
        * @param {string} id - key for the agent profile to store
        * @return {Promise} Promise that will resolve with the agent profile or null
        */
@@ -448,7 +406,6 @@ export default class xAPI extends BaseShim {
       }
       /*
        * Retrieve multiple agent profile ids, stored since a certain time
-       * https://github.com/adlnet/xAPI-Spec/blob/master/xAPI-Communication.md#multiple-document-get-1
        * @param {string} since - timestamp to retrieve agent profiles stored since
        * @return {Promise} Promise that will resolve with the matching agent profile ids
        */
diff --git a/kolibri/plugins/h5p_viewer/frontend/sandbox_handler/xAPIShim.spec.js b/kolibri/plugins/h5p_viewer/frontend/sandbox_handler/xAPIShim.spec.js
new file mode 100644
index 00000000000..1c53ecef3a5
--- /dev/null
+++ b/kolibri/plugins/h5p_viewer/frontend/sandbox_handler/xAPIShim.spec.js
@@ -0,0 +1,104 @@
+import xAPIShim from './xAPIShim';
+
+describe('xAPIShim', () => {
+  let shim;
+  let mockMediator;
+
+  beforeEach(() => {
+    mockMediator = {
+      registerMessageHandler: jest.fn(),
+      sendMessage: jest.fn(),
+    };
+    shim = new xAPIShim(mockMediator);
+    shim.userData = { userId: 'testuser' };
+  });
+
+  describe('getStatements with related_agents filter', () => {
+    // Regression test for bug: statements.filter(statements, orFilter)
+    // should be statements.filter(orFilter)
+    // The first argument to Array.filter should be a callback, not the array itself
+    it('should not throw TypeError when filtering with related_agents', () => {
+      const statement = {
+        id: 'stmt-1',
+        verb: { id: 'http://example.com/verb' },
+        object: { mbox: 'mailto:test@example.com' },
+      };
+      shim.data = { statement: [statement] };
+
+      // This should not throw - exercises the orFilter code path
+      expect(() => {
+        shim.getStatements({
+          agent: { mbox: 'mailto:other@example.com' },
+          related_agents: true,
+        });
+      }).not.toThrow();
+    });
+  });
+
+  describe('actorsEqual (via getStatements)', () => {
+    // Regression test for bug: actor2.openid === actor2.openid
+    // should be actor1.openid === actor2.openid
+    it('should correctly compare actors by openid', () => {
+      // Store a statement with an object that has an openid
+      const actorWithOpenId = { openid: 'https://example.com/user1' };
+      const statement = {
+        id: 'stmt-1',
+        verb: { id: 'http://example.com/verb' },
+        object: actorWithOpenId,
+      };
+      shim.data = { statement: [statement] };
+
+      // Search for statements with a DIFFERENT openid actor
+      // This should NOT match because the openids are different
+      const differentActor = { openid: 'https://example.com/user2' };
+      const results = shim.getStatements({
+        agent: differentActor,
+        related_agents: true,
+      });
+
+      // BUG: Currently this returns the statement because actorsEqual
+      // compares actor2.openid === actor2.openid (always true)
+      // instead of actor1.openid === actor2.openid
+      expect(results).toEqual([]);
+    });
+
+    it('should match actors with the same openid', () => {
+      const actorWithOpenId = { openid: 'https://example.com/user1' };
+      const statement = {
+        id: 'stmt-1',
+        verb: { id: 'http://example.com/verb' },
+        object: actorWithOpenId,
+      };
+      shim.data = { statement: [statement] };
+
+      // Search with the SAME openid - should match
+      const sameActor = { openid: 'https://example.com/user1' };
+      const results = shim.getStatements({
+        agent: sameActor,
+        related_agents: true,
+      });
+
+      expect(results).toHaveLength(1);
+      expect(results[0].id).toBe('stmt-1');
+    });
+
+    it('should correctly compare actors by mbox', () => {
+      const actorWithMbox = { mbox: 'mailto:user1@example.com' };
+      const statement = {
+        id: 'stmt-1',
+        verb: { id: 'http://example.com/verb' },
+        object: actorWithMbox,
+      };
+      shim.data = { statement: [statement] };
+
+      // Different mbox should not match
+      const differentActor = { mbox: 'mailto:user2@example.com' };
+      const results = shim.getStatements({
+        agent: differentActor,
+        related_agents: true,
+      });
+
+      expect(results).toEqual([]);
+    });
+  });
+});
diff --git a/packages/kolibri-sandbox/test/xapidata.js b/kolibri/plugins/h5p_viewer/frontend/sandbox_handler/xapidata.js
similarity index 100%
rename from packages/kolibri-sandbox/test/xapidata.js
rename to kolibri/plugins/h5p_viewer/frontend/sandbox_handler/xapidata.js
diff --git a/packages/kolibri-sandbox/.h5p-commit-sha b/kolibri/plugins/h5p_viewer/h5p_build/.h5p-commit-sha
similarity index 100%
rename from packages/kolibri-sandbox/.h5p-commit-sha
rename to kolibri/plugins/h5p_viewer/h5p_build/.h5p-commit-sha
diff --git a/packages/kolibri-sandbox/downloadH5PVendor.js b/kolibri/plugins/h5p_viewer/h5p_build/downloadH5PVendor.js
similarity index 93%
rename from packages/kolibri-sandbox/downloadH5PVendor.js
rename to kolibri/plugins/h5p_viewer/h5p_build/downloadH5PVendor.js
index a17c24863be..7fdc31c6d66 100644
--- a/packages/kolibri-sandbox/downloadH5PVendor.js
+++ b/kolibri/plugins/h5p_viewer/h5p_build/downloadH5PVendor.js
@@ -1,4 +1,3 @@
-/* eslint-disable import-x/no-commonjs, import-x/no-amd, import-x/no-import-module-exports */
 var fs = require('node:fs');
 var https = require('node:https');
 var path = require('node:path');
@@ -13,7 +12,7 @@ const zipUrl = `https://codeload.github.com/h5p/h5p-php-library/zip/${h5pCommit}
 
 const targetFolder = path.resolve(__dirname, './vendor/h5p');
 
-const h5pStaticFolder = path.resolve(__dirname, '../../kolibri/core/content/static/h5p');
+const h5pStaticFolder = path.resolve(__dirname, '../static/h5p');
 
 const logging = console; // eslint-disable-line no-console
 
@@ -31,7 +30,7 @@ const fileManifest = [
 ];
 
 function downloadFiles() {
-  https.get(new URL(zipUrl), function (res) {
+  https.get(zipUrl, function (res) {
     if (res.statusCode !== 200) {
       logging.log(res);
       // handle error
diff --git a/packages/kolibri-sandbox/src/h5p.html b/kolibri/plugins/h5p_viewer/h5p_build/h5p.html
similarity index 100%
rename from packages/kolibri-sandbox/src/h5p.html
rename to kolibri/plugins/h5p_viewer/h5p_build/h5p.html
diff --git a/packages/kolibri-sandbox/src/h5pBundle.js b/kolibri/plugins/h5p_viewer/h5p_build/h5pBundle.js
similarity index 68%
rename from packages/kolibri-sandbox/src/h5pBundle.js
rename to kolibri/plugins/h5p_viewer/h5p_build/h5pBundle.js
index df0da9c7a7d..287a4eaefba 100644
--- a/packages/kolibri-sandbox/src/h5pBundle.js
+++ b/kolibri/plugins/h5p_viewer/h5p_build/h5pBundle.js
@@ -1,14 +1,13 @@
-/* eslint-disable import-x/no-commonjs, import-x/no-amd, import-x/no-import-module-exports */
-import jQuery from 'jquery';
 /* eslint-disable import-x/no-unresolved */
 /*
  * These files are temporarily brought in
  * for building new versions of our H5P vendor
  * bundle, so are not actually always present.
  */
-import '../vendor/h5p/styles/h5p.css';
-import '../vendor/h5p/styles/h5p-core-button.css';
-import '../vendor/h5p/styles/h5p-confirmation-dialog.css';
+import jQuery from 'jquery';
+import './vendor/h5p/styles/h5p.css';
+import './vendor/h5p/styles/h5p-core-button.css';
+import './vendor/h5p/styles/h5p-confirmation-dialog.css';
 
 const logging = console; //elsint-disable-line no-console
 
@@ -42,11 +41,11 @@ window.H5P.jQuery.fn.load = function (url) {
   return window.H5P.jQuery.fn.__originalLoad.apply(this, arguments);
 };
 
-require('../vendor/h5p/js/h5p');
-require('../vendor/h5p/js/h5p-event-dispatcher');
-require('../vendor/h5p/js/h5p-x-api');
-require('../vendor/h5p/js/h5p-x-api-event');
-require('../vendor/h5p/js/h5p-content-type');
-require('../vendor/h5p/js/h5p-confirmation-dialog');
-require('../vendor/h5p/js/h5p-resizer');
+require('./vendor/h5p/js/h5p');
+require('./vendor/h5p/js/h5p-event-dispatcher');
+require('./vendor/h5p/js/h5p-x-api');
+require('./vendor/h5p/js/h5p-x-api-event');
+require('./vendor/h5p/js/h5p-content-type');
+require('./vendor/h5p/js/h5p-confirmation-dialog');
+require('./vendor/h5p/js/h5p-resizer');
 /* eslint-enable */
diff --git a/packages/kolibri-sandbox/h5p_build.json b/kolibri/plugins/h5p_viewer/h5p_build/h5p_build.json
similarity index 100%
rename from packages/kolibri-sandbox/h5p_build.json
rename to kolibri/plugins/h5p_viewer/h5p_build/h5p_build.json
diff --git a/packages/kolibri-sandbox/webpack.config.h5p.js b/kolibri/plugins/h5p_viewer/h5p_build/webpack.config.h5p.js
similarity index 90%
rename from packages/kolibri-sandbox/webpack.config.h5p.js
rename to kolibri/plugins/h5p_viewer/h5p_build/webpack.config.h5p.js
index ed5052343a7..3a5b5a2eb91 100644
--- a/packages/kolibri-sandbox/webpack.config.h5p.js
+++ b/kolibri/plugins/h5p_viewer/h5p_build/webpack.config.h5p.js
@@ -1,4 +1,3 @@
-/* eslint-disable import-x/no-commonjs, import-x/no-amd, import-x/no-import-module-exports */
 const path = require('node:path');
 const fs = require('node:fs');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
@@ -25,10 +24,10 @@ Plugin.prototype.apply = function (compiler) {
 };
 
 module.exports = {
-  entry: path.resolve(__dirname, './src/h5pBundle.js'),
+  entry: path.resolve(__dirname, './h5pBundle.js'),
   output: {
     filename: 'h5p-[contenthash].js',
-    path: path.resolve(__dirname, '../../kolibri/core/content/static/h5p'),
+    path: path.resolve(__dirname, '../static/h5p'),
   },
   mode: 'production',
   module: {
@@ -42,6 +41,10 @@ module.exports = {
           /node_modules[\\/]core-js/,
           /node_modules[\\/]webpack[\\/]buildin/,
         ],
+        options: {
+          // Let babel auto-detect ES vs CommonJS - css-loader's runtime is CommonJS.
+          sourceType: 'unambiguous',
+        },
       },
       {
         test: /\.css$/,
@@ -92,7 +95,7 @@ module.exports = {
     new Plugin(),
     new HtmlWebpackPlugin({
       filename: 'h5p-[contenthash].html',
-      template: 'src/h5p.html',
+      template: path.resolve(__dirname, './h5p.html'),
       minify: {
         collapseWhitespace: true,
         keepClosingSlash: true,
diff --git a/kolibri/plugins/h5p_viewer/kolibri_plugin.py b/kolibri/plugins/h5p_viewer/kolibri_plugin.py
new file mode 100644
index 00000000000..416454ea08d
--- /dev/null
+++ b/kolibri/plugins/h5p_viewer/kolibri_plugin.py
@@ -0,0 +1,16 @@
+from le_utils.constants import format_presets
+
+from kolibri.core.content import hooks as content_hooks
+from kolibri.plugins import KolibriPluginBase
+from kolibri.plugins.hooks import register_hook
+
+
+class H5PViewerPlugin(KolibriPluginBase):
+    pass
+
+
+@register_hook
+class H5PViewerAsset(content_hooks.SandboxedContentViewerHook):
+    bundle_id = "main"
+    sandbox_handler_id = "sandbox_handler"
+    presets = (format_presets.H5P_ZIP,)
diff --git a/kolibri/plugins/h5p_viewer/package.json b/kolibri/plugins/h5p_viewer/package.json
new file mode 100644
index 00000000000..9d822bcf7f4
--- /dev/null
+++ b/kolibri/plugins/h5p_viewer/package.json
@@ -0,0 +1,44 @@
+{
+  "name": "kolibri-h5p-viewer-plugin",
+  "description": "H5P Viewer Plugin for Kolibri",
+  "private": true,
+  "version": "0.0.1",
+  "scripts": {
+    "build-h5p": "node ./h5p_build/downloadH5PVendor.js && webpack --config ./h5p_build/webpack.config.h5p.js --mode=production"
+  },
+  "dependencies": {
+    "core-js": "catalog:",
+    "dayjs": "^1.11.20",
+    "iri": "^1.3.1",
+    "is-language-code": "^3.1.0",
+    "iso8601-duration": "^2.1.4",
+    "kolibri": "workspace:*",
+    "kolibri-sandbox": "workspace:*",
+    "kolibri-viewer": "workspace:*",
+    "kolibri-zip": "workspace:*",
+    "lodash": "catalog:",
+    "toposort-class": "^1.0.1",
+    "uuid": "^14.0.1",
+    "web-streams-polyfill": "catalog:"
+  },
+  "devDependencies": {
+    "@babel/core": "^8.0.0",
+    "@babel/preset-env": "^8.0.0",
+    "babel-loader": "^10.1.1",
+    "babel-plugin-polyfill-corejs3": "^1.0.0",
+    "browserslist-config-kolibri": "workspace:*",
+    "css-loader": "7.1.2",
+    "css-minimizer-webpack-plugin": "8.0.0",
+    "html-webpack-plugin": "5.6.5",
+    "jquery": "3.5.1",
+    "jszip": "^3.10.1",
+    "mini-css-extract-plugin": "^2.9.4",
+    "purgecss": "^6.0.0",
+    "terser-webpack-plugin": "^5.3.14",
+    "webpack": "^5.103.0",
+    "webpack-cli": "^7.0.2"
+  },
+  "browserslist": [
+    "extends browserslist-config-kolibri"
+  ]
+}
diff --git a/kolibri/core/content/static/h5p/h5p-35be066674b0e6aea376.js b/kolibri/plugins/h5p_viewer/static/h5p/h5p-35be066674b0e6aea376.js
similarity index 100%
rename from kolibri/core/content/static/h5p/h5p-35be066674b0e6aea376.js
rename to kolibri/plugins/h5p_viewer/static/h5p/h5p-35be066674b0e6aea376.js
diff --git a/kolibri/core/content/static/h5p/h5p-35be066674b0e6aea376.js.LICENSE.txt b/kolibri/plugins/h5p_viewer/static/h5p/h5p-35be066674b0e6aea376.js.LICENSE.txt
similarity index 100%
rename from kolibri/core/content/static/h5p/h5p-35be066674b0e6aea376.js.LICENSE.txt
rename to kolibri/plugins/h5p_viewer/static/h5p/h5p-35be066674b0e6aea376.js.LICENSE.txt
diff --git a/kolibri/core/content/static/h5p/h5p-690c3b7bbb77820814ed.html b/kolibri/plugins/h5p_viewer/static/h5p/h5p-690c3b7bbb77820814ed.html
similarity index 100%
rename from kolibri/core/content/static/h5p/h5p-690c3b7bbb77820814ed.html
rename to kolibri/plugins/h5p_viewer/static/h5p/h5p-690c3b7bbb77820814ed.html
diff --git a/kolibri/core/content/static/h5p/h5p-784c5bbaa7b4ce5e56bf.css b/kolibri/plugins/h5p_viewer/static/h5p/h5p-784c5bbaa7b4ce5e56bf.css
similarity index 100%
rename from kolibri/core/content/static/h5p/h5p-784c5bbaa7b4ce5e56bf.css
rename to kolibri/plugins/h5p_viewer/static/h5p/h5p-784c5bbaa7b4ce5e56bf.css
diff --git a/kolibri/core/content/static/h5p/h5p-core-30-29b394a9fedbc3f0afc1.svg b/kolibri/plugins/h5p_viewer/static/h5p/h5p-core-30-29b394a9fedbc3f0afc1.svg
similarity index 100%
rename from kolibri/core/content/static/h5p/h5p-core-30-29b394a9fedbc3f0afc1.svg
rename to kolibri/plugins/h5p_viewer/static/h5p/h5p-core-30-29b394a9fedbc3f0afc1.svg
diff --git a/kolibri/core/content/static/h5p/h5p-core-30-53117a8758d6c0b7b71a.woff b/kolibri/plugins/h5p_viewer/static/h5p/h5p-core-30-53117a8758d6c0b7b71a.woff
similarity index 100%
rename from kolibri/core/content/static/h5p/h5p-core-30-53117a8758d6c0b7b71a.woff
rename to kolibri/plugins/h5p_viewer/static/h5p/h5p-core-30-53117a8758d6c0b7b71a.woff
diff --git a/kolibri/core/content/static/h5p/h5p-core-30-e56c8e46d3671f073422.eot b/kolibri/plugins/h5p_viewer/static/h5p/h5p-core-30-e56c8e46d3671f073422.eot
similarity index 100%
rename from kolibri/core/content/static/h5p/h5p-core-30-e56c8e46d3671f073422.eot
rename to kolibri/plugins/h5p_viewer/static/h5p/h5p-core-30-e56c8e46d3671f073422.eot
diff --git a/kolibri/plugins/html5_viewer/buildConfig.js b/kolibri/plugins/html5_viewer/buildConfig.js
index 860f69b4941..9edb9a6c838 100644
--- a/kolibri/plugins/html5_viewer/buildConfig.js
+++ b/kolibri/plugins/html5_viewer/buildConfig.js
@@ -1,6 +1,15 @@
-module.exports = {
-  bundle_id: 'main',
-  webpack_config: {
-    entry: './frontend/module.js',
+module.exports = [
+  {
+    bundle_id: 'main',
+    webpack_config: {
+      entry: './frontend/module.js',
+    },
   },
-};
+  {
+    bundle_id: 'sandbox_handler',
+    sandbox_handler: true,
+    webpack_config: {
+      entry: './frontend/sandbox_handler/index.js',
+    },
+  },
+];
diff --git a/kolibri/plugins/html5_viewer/frontend/module.js b/kolibri/plugins/html5_viewer/frontend/module.js
index 17152419b44..3c11cfa6888 100644
--- a/kolibri/plugins/html5_viewer/frontend/module.js
+++ b/kolibri/plugins/html5_viewer/frontend/module.js
@@ -1,9 +1,34 @@
 import ContentViewerModule from 'kolibri-viewer';
-import HTML5AppComponent from './views/Html5AppRendererIndex';
+import urls from 'kolibri/urls';
+import { createSandboxedContentViewer } from 'kolibri/components/SandboxedContentViewer';
+
+/**
+ * Build content URL for HTML5 zip content.
+ * Handles entry point and remote URL baseurl parameter.
+ * @param {object} file - The content file object to resolve a URL for
+ * @param {object} props - Viewer state; its `options.entry` sets the zip entry point
+ * @returns {string} URL to the HTML5 zip content's entry point
+ */
+function buildContentUrl(file, props) {
+  const entry = (props.options && props.options.entry) || 'index.html';
+
+  // zipContentUrl takes the file object and the embedded file path, and
+  // preserves any remote-URL baseurl from the file's storage_url internally.
+  return urls.zipContentUrl(file, entry);
+}
+
+const Html5ViewerComponent = createSandboxedContentViewer({
+  defaultDuration: 300,
+  progressPollingInterval: 5000,
+  urlBuilder: buildContentUrl,
+  eventHandlers: {
+    navigateTo: (message, emit) => emit('navigateTo', message),
+  },
+});
 
 class HTML5AppModule extends ContentViewerModule {
   get viewerComponent() {
-    return HTML5AppComponent;
+    return Html5ViewerComponent;
   }
 }
 
diff --git a/kolibri/plugins/html5_viewer/frontend/sandbox_handler/Html5ZipHandler.js b/kolibri/plugins/html5_viewer/frontend/sandbox_handler/Html5ZipHandler.js
new file mode 100644
index 00000000000..1766e43f7d6
--- /dev/null
+++ b/kolibri/plugins/html5_viewer/frontend/sandbox_handler/Html5ZipHandler.js
@@ -0,0 +1,54 @@
+/**
+ * HTML5 Zip Handler for sandboxed content.
+ *
+ * Handles HTML5_ZIP and IMSCP_ZIP content types.
+ * Provides SCORM shim for SCORM-based learning content.
+ * Kolibri data API is provided by the base SandboxHandler.
+ */
+import SandboxHandler from 'kolibri-sandbox/SandboxHandler';
+import SCORMShim from './SCORMShim';
+
+export default class Html5ZipHandler extends SandboxHandler {
+  /**
+   * Shims required by HTML5 zip content.
+   * - SCORM: For SCORM-based learning content
+   * (Kolibri data API is provided by SandboxHandler.baseShims)
+   */
+  static shims = [SCORMShim];
+
+  constructor(sandbox) {
+    super(sandbox);
+    // The SCORM spec has content walk up the frame chain with ScanForAPI, but content
+    // commonly shortcuts to window.parent.API, because a conventional LMS frames the SCO
+    // directly. The sandbox window is that parent, so the API goes on it as well as on
+    // the content window.
+    this.shims[SCORMShim.shimName].iframeInitialize(window);
+  }
+
+  /**
+   * Initialize the iframe with HTML5 zip content.
+   * @param {HTMLIFrameElement} iframe - The content iframe
+   * @param {string} startUrl - URL to the content entry point (zip file URL)
+   * @returns {Promise<void>}
+   */
+  async init(iframe, startUrl) {
+    return new Promise((resolve, reject) => {
+      // Set up the onload handler
+      iframe.onload = () => {
+        const error = iframe.contentDocument?.head?.querySelector('meta[name="sandbox-error"]');
+        if (error) {
+          reject(new Error(error.getAttribute('content')));
+        } else {
+          resolve();
+        }
+      };
+
+      iframe.onerror = () => {
+        reject(new Error('Failed to load content'));
+      };
+
+      // Navigate to the content URL
+      iframe.src = startUrl;
+    });
+  }
+}
diff --git a/kolibri/plugins/html5_viewer/frontend/sandbox_handler/Html5ZipHandler.spec.js b/kolibri/plugins/html5_viewer/frontend/sandbox_handler/Html5ZipHandler.spec.js
new file mode 100644
index 00000000000..fb8c66c4822
--- /dev/null
+++ b/kolibri/plugins/html5_viewer/frontend/sandbox_handler/Html5ZipHandler.spec.js
@@ -0,0 +1,36 @@
+import Mediator from 'kolibri-sandbox/mediator';
+import Html5ZipHandler from './Html5ZipHandler';
+
+describe('Html5ZipHandler', () => {
+  let mediator;
+  let sandbox;
+  let handler;
+
+  beforeEach(() => {
+    mediator = new Mediator(window);
+    sandbox = { mediator, registerHandler: jest.fn() };
+    handler = new Html5ZipHandler(sandbox);
+  });
+
+  afterEach(() => {
+    handler._destroyShims();
+    mediator.destroy();
+    delete window.API;
+  });
+
+  it('registers itself with the sandbox', () => {
+    expect(sandbox.registerHandler).toHaveBeenCalledWith(handler);
+  });
+
+  it('exposes the SCORM API on the sandbox window, for content that reads window.parent.API', () => {
+    expect(window.API).toBe(handler.shims.SCORM.shim);
+  });
+
+  it('exposes the same SCORM API object on the content window', () => {
+    const iframe = document.createElement('iframe');
+    document.body.appendChild(iframe);
+    handler._initializeShims(iframe.contentWindow, { contentNamespace: 'test' });
+    expect(iframe.contentWindow.API).toBe(window.API);
+    document.body.removeChild(iframe);
+  });
+});
diff --git a/packages/kolibri-sandbox/src/SCORM.js b/kolibri/plugins/html5_viewer/frontend/sandbox_handler/SCORMShim.js
similarity index 97%
rename from packages/kolibri-sandbox/src/SCORM.js
rename to kolibri/plugins/html5_viewer/frontend/sandbox_handler/SCORMShim.js
index 308b5fa40aa..112fc80fd98 100644
--- a/packages/kolibri-sandbox/src/SCORM.js
+++ b/kolibri/plugins/html5_viewer/frontend/sandbox_handler/SCORMShim.js
@@ -1,11 +1,13 @@
 /**
+ * SCORM API shim for HTML5 zip content.
+ *
  * This class offers an API-compatible replacement window.API for SCORM modules
  * to be used when apps are run in sandbox mode.
  *
  * For more information, see:
  * https://scorm.com/scorm-explained/technical-scorm/run-time/run-time-reference/
  */
-import BaseShim from './baseShim';
+import SandboxShim from 'kolibri-sandbox/SandboxShim';
 
 const logger = console; //eslint-disable-line no-console
 
@@ -592,28 +594,13 @@ const statusProgressMap = {
   incomplete: 0.5,
 };
 
-export default class SCORM extends BaseShim {
-  constructor(mediator) {
-    super(mediator);
-    this.data = {};
-    this.userData = {};
-    this.nameSpace = 'SCORM';
-    this.__setData = this.__setData.bind(this);
-    this.__setUserData = this.__setUserData.bind(this);
-    this.on(this.events.STATEUPDATE, this.__setData);
-    this.on(this.events.USERDATAUPDATE, this.__setUserData);
-  }
-
-  __setData(data = {}) {
-    this.data = data;
-  }
+export default class SCORMShim extends SandboxShim {
+  static shimName = 'SCORM';
 
-  __setUserData(userData = {}) {
-    this.userData = userData;
-  }
+  static consumesUserData = true;
 
-  __calculateProgress() {
-    const score = getByKeyPath(this.data, 'cmi.core.score', SCHEMA, self.userData);
+  getProgress() {
+    const score = getByKeyPath(this.data, 'cmi.core.score', SCHEMA, this.userData);
     if (score) {
       // If min and max are not set, raw will be a value in the range 0-100. Source:
       // https://support.scorm.com/hc/en-us/articles/206166466-cmi-score-raw-whole-numbers-
@@ -622,7 +609,7 @@ export default class SCORM extends BaseShim {
       const raw = Number(isNaN(score.raw) ? min : score.raw);
       return Math.max(Math.min((raw - min) / (max - min), 1), 0);
     }
-    const lessonStatus = getByKeyPath(this.data, 'cmi.core.lesson_status', SCHEMA, self.userData);
+    const lessonStatus = getByKeyPath(this.data, 'cmi.core.lesson_status', SCHEMA, this.userData);
     if (Object.prototype.hasOwnProperty.call(statusProgressMap, lessonStatus)) {
       return statusProgressMap[lessonStatus];
     }
@@ -631,7 +618,9 @@ export default class SCORM extends BaseShim {
   }
 
   iframeInitialize(contentWindow) {
-    this.__setShimInterface();
+    if (!this.shim) {
+      this.__setShimInterface();
+    }
     contentWindow.API = this.shim;
   }
 
diff --git a/packages/kolibri-sandbox/test/SCORM.spec.js b/kolibri/plugins/html5_viewer/frontend/sandbox_handler/SCORMShim.spec.js
similarity index 76%
rename from packages/kolibri-sandbox/test/SCORM.spec.js
rename to kolibri/plugins/html5_viewer/frontend/sandbox_handler/SCORMShim.spec.js
index 00ecec91bc2..298a122b96f 100644
--- a/packages/kolibri-sandbox/test/SCORM.spec.js
+++ b/kolibri/plugins/html5_viewer/frontend/sandbox_handler/SCORMShim.spec.js
@@ -1,52 +1,53 @@
 import flatMap from 'lodash/flatMap';
-import Mediator from '../src/mediator';
-import SCORM from '../src/SCORM';
+import Mediator from 'kolibri-sandbox/mediator';
+import SCORMShim from './SCORMShim';
 
 describe('SCORM shim', () => {
   let scorm;
   let mediator;
   beforeEach(() => {
+    // The shim traces every SCORM API call at debug level, which jest-fail-on-console
+    // would otherwise treat as a failure.
+    jest.spyOn(console, 'debug').mockImplementation(() => {});
     mediator = new Mediator(window);
-    scorm = new SCORM(mediator);
+    scorm = new SCORMShim(mediator);
   });
-  describe('__setData', () => {
+  afterEach(() => {
+    mediator.destroy();
+    jest.restoreAllMocks();
+  });
+  describe('setData', () => {
     it('should set data to the passed in data', () => {
       const testData = {
         test: 'test',
       };
-      scorm.__setData(testData);
+      scorm.setData(testData);
       expect(scorm.data).toEqual(testData);
     });
     it('should set data to an empty state if no data passed in', () => {
-      scorm.__setData();
+      scorm.setData();
       expect(scorm.data).toEqual({});
     });
   });
-  describe('__setUserData', () => {
+  describe('setUserData', () => {
     it('should set userData to the passed in data', () => {
       const testData = {
         test: 'test',
       };
-      scorm.__setUserData(testData);
+      scorm.setUserData(testData);
       expect(scorm.userData).toEqual(testData);
     });
     it('should set userData to an empty state if no data passed in', () => {
-      scorm.__setUserData();
+      scorm.setUserData();
       expect(scorm.userData).toEqual({});
     });
   });
   describe('shim management and instance methods', () => {
     let shim;
     beforeEach(() => {
-      // SCORM.js uses `const logger = console`, so all shim methods call console.debug.
-      // Silence these to prevent jest-fail-on-console from failing the tests.
-      jest.spyOn(console, 'debug').mockImplementation(() => {}); // eslint-disable-line no-console
       shim = scorm.__setShimInterface();
       scorm.stateUpdated = jest.fn();
     });
-    afterEach(() => {
-      console.debug.mockRestore(); // eslint-disable-line no-console
-    });
     describe('__setShimInterface method', () => {
       it('should set scorm shim property', () => {
         expect(scorm.shim).not.toBeUndefined();
@@ -158,5 +159,29 @@ describe('SCORM shim', () => {
         expect(shim.LMSGetValue('cmi.interactions.0.objectives._count')).toEqual(statuses.length);
       });
     });
+    describe('getProgress method', () => {
+      it('should report no progress until the content says something', () => {
+        expect(scorm.getProgress()).toBeNull();
+      });
+      it('should scale a raw score between its reported min and max', () => {
+        shim.LMSSetValue('cmi.core.score.min', 0);
+        shim.LMSSetValue('cmi.core.score.max', 10);
+        shim.LMSSetValue('cmi.core.score.raw', 5);
+        expect(scorm.getProgress()).toEqual(0.5);
+      });
+      it('should treat a raw score as a percentage when min and max are unset', () => {
+        shim.LMSSetValue('cmi.core.score.raw', 25);
+        expect(scorm.getProgress()).toEqual(0.25);
+      });
+      it('should fall back to lesson_status when no score is reported', () => {
+        shim.LMSSetValue('cmi.core.lesson_status', 'passed');
+        expect(scorm.getProgress()).toEqual(1);
+      });
+      it('should prefer a reported score over lesson_status', () => {
+        shim.LMSSetValue('cmi.core.lesson_status', 'passed');
+        shim.LMSSetValue('cmi.core.score.raw', 50);
+        expect(scorm.getProgress()).toEqual(0.5);
+      });
+    });
   });
 });
diff --git a/kolibri/plugins/html5_viewer/frontend/sandbox_handler/index.js b/kolibri/plugins/html5_viewer/frontend/sandbox_handler/index.js
new file mode 100644
index 00000000000..91fd14c6ac5
--- /dev/null
+++ b/kolibri/plugins/html5_viewer/frontend/sandbox_handler/index.js
@@ -0,0 +1,10 @@
+/**
+ * Entry point for HTML5 Zip sandbox handler.
+ *
+ * This module is loaded inside the sandboxed iframe and registers
+ * the Html5ZipHandler with the SandboxEnvironment.
+ */
+import Html5ZipHandler from './Html5ZipHandler';
+
+// Instantiate the handler - this self-registers with window.SandboxEnvironment
+new Html5ZipHandler(window.SandboxEnvironment);
diff --git a/kolibri/plugins/html5_viewer/frontend/views/Html5AppRendererIndex.vue b/kolibri/plugins/html5_viewer/frontend/views/Html5AppRendererIndex.vue
deleted file mode 100644
index bcae0ed4fa7..00000000000
--- a/kolibri/plugins/html5_viewer/frontend/views/Html5AppRendererIndex.vue
+++ /dev/null
@@ -1,240 +0,0 @@
-<template>
-
-  <CoreFullscreen
-    ref="html5Viewer"
-    class="html5-viewer"
-    :style="{ width: iframeWidth }"
-    @changeFullscreen="isInFullscreen = $event"
-  >
-    <ViewerToolbar
-      :isInFullscreen="isInFullscreen"
-      @toggleFullscreen="$refs.html5Viewer.toggleFullscreen()"
-    />
-    <div
-      class="iframe-container"
-      :style="containerStyle"
-    >
-      <iframe
-        ref="iframe"
-        class="iframe"
-        sandbox="allow-scripts allow-same-origin"
-        :style="{ backgroundColor: $themePalette.grey.v_200 }"
-        frameBorder="0"
-        :src="rooturl"
-        :title="$tr('contentFrameTitle')"
-        allow="fullscreen"
-      >
-      </iframe>
-      <KCircularLoader
-        v-if="loading"
-        :delay="false"
-        class="loader"
-      />
-    </div>
-  </CoreFullscreen>
-
-</template>
-
-
-<script>
-
-  import urls from 'kolibri/urls';
-  import { now } from 'kolibri/utils/serverClock';
-  import CoreFullscreen from 'kolibri-common/components/CoreFullscreen';
-  import ViewerToolbar from 'kolibri-common/components/ViewerToolbar';
-  import Sandbox from 'kolibri-sandbox';
-  import useContentViewer from 'kolibri/composables/useContentViewer';
-
-  const defaultContentHeight = '500px';
-  const frameTopbarHeight = '48px';
-  export default {
-    name: 'Html5AppRendererIndex',
-    components: {
-      CoreFullscreen,
-      ViewerToolbar,
-    },
-    setup(props, context) {
-      const {
-        options,
-        lang,
-        forceDurationBasedProgress,
-        durationBasedProgress,
-        defaultFile,
-        reportError,
-        extraFields,
-        timeSpent,
-        userId,
-        userFullName,
-        progress,
-      } = useContentViewer(context, { defaultDuration: 300 });
-      return {
-        options,
-        lang,
-        forceDurationBasedProgress,
-        durationBasedProgress,
-        defaultFile,
-        reportError,
-        extraFields,
-        timeSpent,
-        userId,
-        userFullName,
-        progress,
-      };
-    },
-    data() {
-      return {
-        iframeHeight: (this.options && this.options.height) || defaultContentHeight,
-        isInFullscreen: false,
-        loading: false,
-      };
-    },
-    computed: {
-      rooturl() {
-        return urls.sandbox();
-      },
-      iframeWidth() {
-        return (this.options && this.options.width) || 'auto';
-      },
-      userData() {
-        return {
-          userId: this.userId,
-          userFullName: this.userFullName,
-          progress: this.progress,
-          complete: this.progress >= 1,
-          language: this.lang.id,
-          timeSpent: this.timeSpent,
-        };
-      },
-      containerStyle() {
-        if (this.isInFullscreen) {
-          return {
-            position: 'absolute',
-            top: frameTopbarHeight,
-            bottom: 0,
-          };
-        }
-        return {};
-      },
-      entry() {
-        return (this.options && this.options.entry) || 'index.html';
-      },
-      isH5P() {
-        return this.defaultFile.extension === 'h5p';
-      },
-    },
-    watch: {
-      userData(newValue) {
-        if (newValue && this.sandbox) {
-          this.sandbox.updateData({ userData: newValue });
-        }
-      },
-    },
-    mounted() {
-      this.sandbox = new Sandbox({ iframe: this.$refs.iframe, now });
-      this.sandbox.onStateUpdate(data => {
-        this.$emit('updateContentState', data);
-        const progress = this.sandbox.getProgress();
-        if (progress !== null && !this.forceDurationBasedProgress) {
-          this.$emit('updateProgress', progress);
-          if (progress >= 1) {
-            this.$emit('finished');
-          }
-        }
-      });
-      this.sandbox.on('navigateTo', message => {
-        this.$emit('navigateTo', message);
-      });
-      this.sandbox.on(this.sandbox.events.RESIZE, scrollHeight => {
-        this.iframeHeight = scrollHeight;
-      });
-      this.sandbox.on(this.sandbox.events.LOADING, loading => {
-        this.loading = loading;
-      });
-      this.sandbox.on(this.sandbox.events.ERROR, err => {
-        this.loading = false;
-        this.reportError(err);
-      });
-      const storageUrl = this.isH5P
-        ? this.defaultFile.storage_url
-        : urls.zipContentUrl(this.defaultFile, this.entry);
-
-      this.sandbox.initialize(
-        (this.extraFields && this.extraFields.contentState) || {},
-        this.userData,
-        storageUrl,
-        this.defaultFile.checksum,
-      );
-      this.$emit('startTracking');
-      if (!this.isH5P) {
-        this.pollProgress();
-      }
-    },
-    beforeDestroy() {
-      if (this.timeout) {
-        clearTimeout(this.timeout);
-      }
-      this.$emit('stopTracking');
-    },
-    methods: {
-      recordProgress() {
-        let progress;
-        if (this.forceDurationBasedProgress) {
-          progress = this.durationBasedProgress;
-        } else {
-          const sandboxProgress = this.sandbox ? this.sandbox.getProgress() : null;
-          progress = sandboxProgress === null ? this.durationBasedProgress : sandboxProgress;
-        }
-        this.$emit('updateProgress', progress);
-        if (progress >= 1) {
-          this.$emit('finished');
-        }
-        this.pollProgress();
-      },
-      pollProgress() {
-        this.timeout = setTimeout(() => {
-          this.recordProgress();
-        }, 5000);
-      },
-    },
-    $trs: {
-      contentFrameTitle: {
-        message: 'Content viewer',
-        context: 'Accessible title for the iframe that displays the content',
-      },
-    },
-  };
-
-</script>
-
-
-<style lang="scss" scoped>
-
-  @import '~kolibri-design-system/lib/styles/definitions';
-  $frame-topbar-height: 48px;
-
-  .html5-viewer {
-    position: relative;
-    text-align: center;
-  }
-
-  .iframe {
-    width: 100%;
-    height: 100%;
-  }
-
-  .iframe-container {
-    @extend %momentum-scroll;
-
-    width: 100%;
-    height: calc(100% - #{$frame-topbar-height});
-    margin-bottom: -8px;
-    overflow: hidden;
-  }
-
-  .loader {
-    position: absolute;
-    top: calc(50% - 16px);
-    left: calc(50% - 16px);
-  }
-
-</style>
diff --git a/kolibri/plugins/html5_viewer/frontend/views/__tests__/Html5AppRendererIndex.spec.js b/kolibri/plugins/html5_viewer/frontend/views/__tests__/Html5AppRendererIndex.spec.js
deleted file mode 100644
index 7fa8d38327b..00000000000
--- a/kolibri/plugins/html5_viewer/frontend/views/__tests__/Html5AppRendererIndex.spec.js
+++ /dev/null
@@ -1,28 +0,0 @@
-import Html5AppRendererIndex from '../Html5AppRendererIndex';
-
-const { methods } = Html5AppRendererIndex;
-
-describe('recordProgress', () => {
-  let context = {};
-
-  beforeEach(() => {
-    context = {
-      $emit: jest.fn(),
-      durationBasedProgress: 0.1,
-      pollProgress: jest.fn(),
-      sandbox: {
-        getProgress() {
-          return 0.1;
-        },
-      },
-    };
-  });
-
-  it('should be able to calculate progress using time-based tracking when progress is null', () => {
-    context.sandbox = null;
-    methods.recordProgress.call(context);
-
-    expect(context.$emit.mock.calls[0][0]).toBe('updateProgress');
-    expect(context.$emit.mock.calls[0][1]).toBe(0.1);
-  });
-});
diff --git a/kolibri/plugins/html5_viewer/kolibri_plugin.py b/kolibri/plugins/html5_viewer/kolibri_plugin.py
index b3af7aea151..491a2802f36 100644
--- a/kolibri/plugins/html5_viewer/kolibri_plugin.py
+++ b/kolibri/plugins/html5_viewer/kolibri_plugin.py
@@ -10,10 +10,10 @@ class HTML5AppPlugin(KolibriPluginBase):
 
 
 @register_hook
-class HTML5AppAsset(content_hooks.ContentRendererHook):
+class HTML5AppAsset(content_hooks.SandboxedContentViewerHook):
     bundle_id = "main"
+    sandbox_handler_id = "sandbox_handler"
     presets = (
         format_presets.HTML5_ZIP,
-        format_presets.H5P_ZIP,
         format_presets.IMSCP_ZIP,
     )
diff --git a/kolibri/plugins/html5_viewer/package.json b/kolibri/plugins/html5_viewer/package.json
index 544b3ed687b..2da4b43e946 100644
--- a/kolibri/plugins/html5_viewer/package.json
+++ b/kolibri/plugins/html5_viewer/package.json
@@ -4,6 +4,7 @@
     "private": true,
     "version": "0.0.1",
     "dependencies": {
+        "core-js": "catalog:",
         "kolibri": "workspace:*",
         "kolibri-common": "workspace:*",
         "kolibri-design-system": "catalog:",
diff --git a/kolibri/plugins/learn/frontend/views/AssessmentWrapper/LessonMasteryBar.vue b/kolibri/plugins/learn/frontend/views/AssessmentWrapper/LessonMasteryBar.vue
index 47c6afb16a3..db1601aa02d 100644
--- a/kolibri/plugins/learn/frontend/views/AssessmentWrapper/LessonMasteryBar.vue
+++ b/kolibri/plugins/learn/frontend/views/AssessmentWrapper/LessonMasteryBar.vue
@@ -22,7 +22,7 @@
 <script>
 
   import commonCoreStrings from 'kolibri/uiText/commonCoreStrings';
-  import BaseToolbar from 'kolibri-common/components/BaseToolbar';
+  import BaseToolbar from 'kolibri/components/BaseToolbar';
   import useKResponsiveWindow from 'kolibri-design-system/lib/composables/useKResponsiveWindow';
 
   export default {
diff --git a/kolibri/plugins/learn/frontend/views/ChannelRenderer/CustomContentRenderer.vue b/kolibri/plugins/learn/frontend/views/ChannelRenderer/CustomContentRenderer.vue
index a754655326c..c1289cbcf27 100644
--- a/kolibri/plugins/learn/frontend/views/ChannelRenderer/CustomContentRenderer.vue
+++ b/kolibri/plugins/learn/frontend/views/ChannelRenderer/CustomContentRenderer.vue
@@ -11,6 +11,14 @@
       :title="$tr('contentFrameTitle')"
     >
     </iframe>
+    <UiAlert
+      v-if="errorMessage"
+      class="error"
+      type="error"
+      :dismissible="false"
+    >
+      {{ errorMessage }}
+    </UiAlert>
     <ContentModal
       v-if="overlayIsOpen"
       :key="currentContent.id"
@@ -26,6 +34,8 @@
 <script>
 
   import { get } from '@vueuse/core';
+  import UiAlert from 'kolibri-design-system/lib/keen/UiAlert';
+  import coreApp from 'kolibri';
   import urls from 'kolibri/urls';
   import Sandbox from 'kolibri-sandbox';
   import { now } from 'kolibri/utils/serverClock';
@@ -33,7 +43,7 @@
   import ContentNodeResource from 'kolibri-common/apiResources/ContentNodeResource';
   import router from 'kolibri/router';
   import { ContentNodeKinds } from 'kolibri/constants';
-  import { events, nameSpace, MessageStatuses } from 'kolibri-sandbox/src/base';
+  import { events, nameSpace, MessageStatuses } from 'kolibri-sandbox/base';
   import useChannels from 'kolibri-common/composables/useChannels';
   import { validateChannelTheme } from '../../utils/validateChannelTheme';
   import useContentLink from '../../composables/useContentLink';
@@ -61,6 +71,7 @@
     name: 'CustomContentRenderer',
     components: {
       ContentModal,
+      UiAlert,
     },
     setup() {
       const { genContentLinkBackLinkCurrentPage } = useContentLink();
@@ -76,6 +87,7 @@
       return {
         overlayIsOpen: false,
         channelTheme: null,
+        errorMessage: null,
       };
     },
     computed: {
@@ -89,10 +101,22 @@
       currentChannel() {
         return get(channelsMap)[this.topic.channel_id];
       },
+      zipFile() {
+        return this.topic.files.find(f => f.extension === 'zip');
+      },
+      handlerUrl() {
+        return this.zipFile ? coreApp.getSandboxHandlerUrl(this.zipFile.preset) : null;
+      },
     },
     mounted() {
+      if (!this.handlerUrl) {
+        this.errorMessage = this.$tr('viewerNotAvailable');
+        return;
+      }
       this.sandbox = new Sandbox({ iframe: this.$refs.iframe, now });
-      const zipFile = this.topic.files.find(f => f.extension === 'zip');
+      this.sandbox.on(events.ERROR, () => {
+        this.errorMessage = this.$tr('channelLoadError');
+      });
       this.sandbox.on(events.COLLECTIONREQUESTED, message => {
         this.fetchContentCollection(message);
       });
@@ -126,7 +150,15 @@
       this.sandbox.on(events.RANDOMCOLLECTIONREQUESTED, message => {
         this.sendRandomCollection.call(this, message);
       });
-      this.sandbox.initialize({}, {}, urls.zipContentUrl(zipFile, 'index.html'), zipFile.checksum);
+      // A custom channel is an HTML5 zip, so it renders through the handler registered
+      // for its preset; the base shims that handler brings are what supply window.kolibri.
+      this.sandbox.initialize(
+        {},
+        {},
+        urls.zipContentUrl(this.zipFile, 'index.html'),
+        this.zipFile.checksum,
+        { handlerUrl: this.handlerUrl },
+      );
     },
     methods: {
       // helper functions for fetching data from kolibri
@@ -282,7 +314,7 @@
             return createReturnMsg({ message, err });
           })
           .then(newMsg => {
-            this.sandbox.mediator.sendLocalMessage(newMsg);
+            this.sandbox.mediator.sendMessage(newMsg);
           });
       },
       getOrUpdateContext(message) {
@@ -299,7 +331,7 @@
         }
 
         const newMsg = createReturnMsg({ message, data: {} });
-        this.sandbox.mediator.sendLocalMessage(newMsg);
+        this.sandbox.mediator.sendMessage(newMsg);
       },
       updateTheme(message) {
         const themeCopy = { ...message };
@@ -373,6 +405,15 @@
         message: 'Content viewer',
         context: 'Accessible title for the iframe that displays the content',
       },
+      viewerNotAvailable: {
+        message: 'Kolibri cannot display this channel because no viewer is available for it',
+        context:
+          'Error shown when the plugin that renders a custom channel is missing or disabled.',
+      },
+      channelLoadError: {
+        message: 'Kolibri is unable to load this channel',
+        context: 'Error shown when a custom channel fails to load in the content viewer.',
+      },
     },
   };
 
@@ -404,4 +445,12 @@
     overflow: visible;
   }
 
+  .error {
+    position: absolute;
+    top: 8px;
+    left: 8px;
+    width: calc(100% - 16px);
+    text-align: left;
+  }
+
 </style>
diff --git a/kolibri/plugins/learn/frontend/views/ChannelRenderer/__tests__/CustomContentRenderer.spec.js b/kolibri/plugins/learn/frontend/views/ChannelRenderer/__tests__/CustomContentRenderer.spec.js
new file mode 100644
index 00000000000..6a71feffb2b
--- /dev/null
+++ b/kolibri/plugins/learn/frontend/views/ChannelRenderer/__tests__/CustomContentRenderer.spec.js
@@ -0,0 +1,91 @@
+import { render, screen } from '@testing-library/vue';
+import coreApp from 'kolibri';
+import Sandbox from 'kolibri-sandbox';
+import { events } from 'kolibri-sandbox/base';
+import { createTranslator } from 'kolibri/utils/i18n';
+import CustomContentRenderer from '../CustomContentRenderer';
+
+const { contentFrameTitle$, viewerNotAvailable$, channelLoadError$ } = createTranslator(
+  CustomContentRenderer.name,
+  CustomContentRenderer.$trs,
+);
+
+jest.mock('kolibri', () => ({
+  __esModule: true,
+  default: { getSandboxHandlerUrl: jest.fn() },
+}));
+
+jest.mock('kolibri-sandbox', () => {
+  const handlers = {};
+  const initialize = jest.fn();
+  return {
+    __esModule: true,
+    default: jest.fn(() => ({
+      on: (event, callback) => {
+        handlers[event] = callback;
+      },
+      initialize,
+      mediator: { sendMessage: jest.fn() },
+      __handlers: handlers,
+    })),
+  };
+});
+
+jest.mock('kolibri/urls', () => ({
+  __esModule: true,
+  default: {
+    sandbox: () => '/sandbox',
+    zipContentUrl: () => '/zipcontent/index.html',
+  },
+}));
+
+jest.mock('../../../composables/useContentLink', () => ({
+  __esModule: true,
+  default: () => ({ genContentLinkBackLinkCurrentPage: jest.fn() }),
+}));
+
+const TOPIC = {
+  id: 'topic-id',
+  channel_id: 'channel-id',
+  files: [{ extension: 'zip', preset: 'html5_zip', checksum: 'abc123' }],
+};
+
+function renderComponent() {
+  return render(CustomContentRenderer, {
+    props: { topic: TOPIC },
+    routes: [],
+  });
+}
+
+describe('CustomContentRenderer', () => {
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders the sandbox iframe when a handler is registered for the preset', () => {
+    coreApp.getSandboxHandlerUrl.mockReturnValue('/static/handler.js');
+
+    renderComponent();
+
+    expect(screen.getByTitle(contentFrameTitle$())).toBeInTheDocument();
+    expect(Sandbox).toHaveBeenCalled();
+  });
+
+  it('reports that no viewer is available when the preset has no registered handler', async () => {
+    coreApp.getSandboxHandlerUrl.mockReturnValue(null);
+
+    renderComponent();
+
+    expect(await screen.findByText(viewerNotAvailable$())).toBeInTheDocument();
+    expect(Sandbox).not.toHaveBeenCalled();
+  });
+
+  it('reports an error when the sandbox fails to load the channel', async () => {
+    coreApp.getSandboxHandlerUrl.mockReturnValue('/static/handler.js');
+
+    renderComponent();
+    Sandbox.mock.results[0].value.__handlers[events.ERROR](new Error('boom'));
+
+    expect(await screen.findByText(channelLoadError$())).toBeInTheDocument();
+  });
+});
diff --git a/kolibri/plugins/media_player/frontend/views/MediaPlayerFullscreen/index.vue b/kolibri/plugins/media_player/frontend/views/MediaPlayerFullscreen/index.vue
index a754161170f..ad4575114a5 100755
--- a/kolibri/plugins/media_player/frontend/views/MediaPlayerFullscreen/index.vue
+++ b/kolibri/plugins/media_player/frontend/views/MediaPlayerFullscreen/index.vue
@@ -1,23 +1,23 @@
 <template>
 
-  <CoreFullscreen
+  <Fullscreen
     ref="core"
     @changeFullscreen="handleChangeFullscreen"
   >
     <slot></slot>
-  </CoreFullscreen>
+  </Fullscreen>
 
 </template>
 
 
 <script>
 
-  import CoreFullscreen from 'kolibri-common/components/CoreFullscreen';
+  import Fullscreen from 'kolibri/components/Fullscreen';
   import { injectMediaPlayer } from '../../composables/useMediaPlayer';
 
   export default {
     name: 'MediaPlayerFullscreen',
-    components: { CoreFullscreen },
+    components: { Fullscreen },
     setup() {
       const { player } = injectMediaPlayer();
 
diff --git a/kolibri/plugins/media_player/kolibri_plugin.py b/kolibri/plugins/media_player/kolibri_plugin.py
index 754534ada8d..ba3c63d3e37 100644
--- a/kolibri/plugins/media_player/kolibri_plugin.py
+++ b/kolibri/plugins/media_player/kolibri_plugin.py
@@ -10,7 +10,7 @@ class MediaPlayerPlugin(KolibriPluginBase):
 
 
 @register_hook
-class MediaPlayerAsset(content_hooks.ContentRendererHook):
+class MediaPlayerAsset(content_hooks.ContentViewerHook):
     bundle_id = "main"
     presets = (
         format_presets.AUDIO,
diff --git a/kolibri/plugins/pdf_viewer/frontend/views/PdfRendererIndex.vue b/kolibri/plugins/pdf_viewer/frontend/views/PdfRendererIndex.vue
index 7a150de89d1..1eea6454d85 100644
--- a/kolibri/plugins/pdf_viewer/frontend/views/PdfRendererIndex.vue
+++ b/kolibri/plugins/pdf_viewer/frontend/views/PdfRendererIndex.vue
@@ -4,7 +4,7 @@
     :active="mobileEmbedded"
     @read="$refs.pdfViewer.toggleFullscreen()"
   >
-    <CoreFullscreen
+    <Fullscreen
       ref="pdfViewer"
       class="pdf-viewer"
       :class="{
@@ -114,7 +114,7 @@
           </KGridItem>
         </KGrid>
       </template>
-    </CoreFullscreen>
+    </Fullscreen>
   </EmbeddedReadCard>
 
 </template>
@@ -131,9 +131,9 @@
   import 'intersection-observer';
   import commonCoreStrings from 'kolibri/uiText/commonCoreStrings';
   import useKResponsiveWindow from 'kolibri-design-system/lib/composables/useKResponsiveWindow';
-  import CoreFullscreen from 'kolibri-common/components/CoreFullscreen';
+  import Fullscreen from 'kolibri/components/Fullscreen';
   import EmbeddedReadCard from 'kolibri-common/components/EmbeddedReadCard';
-  import ViewerToolbar from 'kolibri-common/components/ViewerToolbar';
+  import ViewerToolbar from 'kolibri/components/ViewerToolbar';
   import useContentViewer from 'kolibri/composables/useContentViewer';
   import { ref, computed } from 'vue';
   import '../utils/domPolyfills';
@@ -153,7 +153,7 @@
     components: {
       SideBar,
       PdfPage,
-      CoreFullscreen,
+      Fullscreen,
       EmbeddedReadCard,
       RecyclableScroller,
       ViewerToolbar,
diff --git a/kolibri/plugins/pdf_viewer/kolibri_plugin.py b/kolibri/plugins/pdf_viewer/kolibri_plugin.py
index 427afc9d11a..ab38ce106be 100644
--- a/kolibri/plugins/pdf_viewer/kolibri_plugin.py
+++ b/kolibri/plugins/pdf_viewer/kolibri_plugin.py
@@ -10,7 +10,7 @@ class DocumentPDFRenderPlugin(KolibriPluginBase):
 
 
 @register_hook
-class DocumentPDFRenderAsset(content_hooks.ContentRendererHook):
+class DocumentPDFRenderAsset(content_hooks.ContentViewerHook):
     bundle_id = "main"
     presets = (format_presets.DOCUMENT,)
     allow_object_tag = True
diff --git a/kolibri/plugins/perseus_viewer/kolibri_plugin.py b/kolibri/plugins/perseus_viewer/kolibri_plugin.py
index d2d389fd1a9..d225089cbd4 100644
--- a/kolibri/plugins/perseus_viewer/kolibri_plugin.py
+++ b/kolibri/plugins/perseus_viewer/kolibri_plugin.py
@@ -10,7 +10,7 @@ class ExercisePerseusRenderPlugin(KolibriPluginBase):
 
 
 @register_hook
-class ExercisePerseusRenderAsset(content_hooks.ContentRendererHook):
+class ExercisePerseusRenderAsset(content_hooks.ContentViewerHook):
     bundle_id = "main"
     presets = (format_presets.EXERCISE,)
     allow_object_tag = True
diff --git a/kolibri/plugins/qti_viewer/kolibri_plugin.py b/kolibri/plugins/qti_viewer/kolibri_plugin.py
index 2bb400fdb17..6ab5edbb575 100644
--- a/kolibri/plugins/qti_viewer/kolibri_plugin.py
+++ b/kolibri/plugins/qti_viewer/kolibri_plugin.py
@@ -10,7 +10,7 @@ class QTIViewerPlugin(KolibriPluginBase):
 
 
 @register_hook
-class QTIViewerAsset(content_hooks.ContentRendererHook):
+class QTIViewerAsset(content_hooks.ContentViewerHook):
     bundle_id = "main"
     presets = (format_presets.QTI_ZIP,)
     allow_object_tag = True
diff --git a/kolibri/plugins/safe_html5_viewer/kolibri_plugin.py b/kolibri/plugins/safe_html5_viewer/kolibri_plugin.py
index 8b46f76b56d..ce692c90219 100644
--- a/kolibri/plugins/safe_html5_viewer/kolibri_plugin.py
+++ b/kolibri/plugins/safe_html5_viewer/kolibri_plugin.py
@@ -10,6 +10,6 @@ class SafeHTML5AppPlugin(KolibriPluginBase):
 
 
 @register_hook
-class SafeHTML5AppAsset(content_hooks.ContentRendererHook):
+class SafeHTML5AppAsset(content_hooks.ContentViewerHook):
     bundle_id = "main"
     presets = (format_presets.KPUB_ZIP,)
diff --git a/kolibri/plugins/slideshow_viewer/frontend/views/SlideshowRendererComponent.vue b/kolibri/plugins/slideshow_viewer/frontend/views/SlideshowRendererComponent.vue
index af4ba3cf352..3dd70974fcb 100644
--- a/kolibri/plugins/slideshow_viewer/frontend/views/SlideshowRendererComponent.vue
+++ b/kolibri/plugins/slideshow_viewer/frontend/views/SlideshowRendererComponent.vue
@@ -1,6 +1,6 @@
 <template>
 
-  <CoreFullscreen
+  <Fullscreen
     ref="slideshowViewer"
     class="slideshow-viewer"
     :style="{ height: contentHeight }"
@@ -69,7 +69,7 @@
       />
       <!-- eslint-enable -->
     </Hooper>
-  </CoreFullscreen>
+  </Fullscreen>
 
 </template>
 
@@ -82,7 +82,7 @@
   import client from 'kolibri/client';
 
   import UiIconButton from 'kolibri-design-system/lib/keen/UiIconButton';
-  import CoreFullscreen from 'kolibri-common/components/CoreFullscreen';
+  import Fullscreen from 'kolibri/components/Fullscreen';
   import {
     Hooper,
     Slide,
@@ -96,7 +96,7 @@
     name: 'SlideshowRendererComponent',
     components: {
       UiIconButton,
-      CoreFullscreen,
+      Fullscreen,
       Hooper,
       Slide,
       HooperPagination,
diff --git a/kolibri/plugins/slideshow_viewer/kolibri_plugin.py b/kolibri/plugins/slideshow_viewer/kolibri_plugin.py
index 8eedca83645..91e412b413e 100644
--- a/kolibri/plugins/slideshow_viewer/kolibri_plugin.py
+++ b/kolibri/plugins/slideshow_viewer/kolibri_plugin.py
@@ -10,6 +10,6 @@ class SlideshowRenderPlugin(KolibriPluginBase):
 
 
 @register_hook
-class SlideshowRenderAsset(content_hooks.ContentRendererHook):
+class SlideshowRenderAsset(content_hooks.ContentViewerHook):
     bundle_id = "main"
     presets = (format_presets.SLIDESHOW_MANIFEST,)
diff --git a/kolibri/utils/build_config/default_plugins.py b/kolibri/utils/build_config/default_plugins.py
index d2bea70f2f4..50ed6afcf23 100644
--- a/kolibri/utils/build_config/default_plugins.py
+++ b/kolibri/utils/build_config/default_plugins.py
@@ -16,4 +16,5 @@
     "kolibri.plugins.user_auth",
     "kolibri.plugins.user_profile",
     "kolibri.plugins.bloompub_viewer",
+    "kolibri.plugins.h5p_viewer",
 ]
diff --git a/package.json b/package.json
index 1dc0542b8b3..2ba32c6cddd 100644
--- a/package.json
+++ b/package.json
@@ -22,13 +22,14 @@
     "devserver-with-kds": "concurrently --passthrough-arguments --kill-others \"pnpm run watch --watchonly={2} --require-kds-path --kds-path={1}\" \"pnpm run python-devserver\" \"pnpm run sandbox-dev\" --",
     "bundle-stats": "kolibri-build prod --file ./build_tools/build_plugins.txt --transpile --json",
     "clean": "rm -fr kolibri/core/content/static/sandbox/ && kolibri-build clean --file ./build_tools/build_plugins.txt",
-    "lint-frontend": "kolibri-format --pattern '{kolibri*/**/frontend,packages,build_tools}/**/*.{js,vue,scss,less,css}' --ignore '**/dist/**' '**/node_modules/**' '**/static/**'",
+    "lint-frontend": "kolibri-format --pattern '{kolibri*/**/frontend,kolibri*/**/h5p_build,packages,build_tools}/**/*.{js,vue,scss,less,css}' --ignore '**/dist/**' '**/node_modules/**' '**/static/**'",
     "lint-frontend:format": "pnpm run lint-frontend --write",
     "lint-frontend:watch": "pnpm run lint-frontend --monitor",
     "lint-frontend:watch:format": "pnpm run lint-frontend --monitor --write",
     "sandbox-dev": "pnpm --filter kolibri-sandbox run dev",
     "sandbox-build": "pnpm --filter kolibri-sandbox run build",
-    "compress": "kolibri-build compress 'kolibri/*/**/static/**/*.{html,js,css,svg,map,eot,ttf}'"
+    "compress": "kolibri-build compress 'kolibri/*/**/static/**/*.{html,js,css,svg,map,eot,ttf}'",
+    "collect-sandbox-static": "kolibri-build collect-sandbox-static --file ./build_tools/build_plugins.txt"
   },
   "repository": {
     "type": "git",
diff --git a/packages/kolibri-build/.npmignore b/packages/kolibri-build/.npmignore
index ecdf2f81c2c..d981bb1ef1b 100644
--- a/packages/kolibri-build/.npmignore
+++ b/packages/kolibri-build/.npmignore
@@ -5,4 +5,4 @@
 *.test.js
 
 # Exclude development files
-.gitignore
\ No newline at end of file
+.gitignore
diff --git a/packages/kolibri-build/src/__tests__/collect_sandbox_static.spec.js b/packages/kolibri-build/src/__tests__/collect_sandbox_static.spec.js
new file mode 100644
index 00000000000..0c2ad936145
--- /dev/null
+++ b/packages/kolibri-build/src/__tests__/collect_sandbox_static.spec.js
@@ -0,0 +1,223 @@
+const fs = require('node:fs');
+const os = require('node:os');
+const path = require('node:path');
+const { gzipSync } = require('node:zlib');
+const collectSandboxStatic = require('../collect_sandbox_static');
+const compressFile = require('../compress');
+
+describe('collectSandboxStatic', () => {
+  let tmp;
+  let destination;
+  let core;
+  let plugin;
+
+  function write(filePath, contents) {
+    fs.mkdirSync(path.dirname(filePath), { recursive: true });
+    fs.writeFileSync(filePath, contents);
+  }
+
+  /* Mirror compress.js: gzip the file, truncate the original, record its size. */
+  function writeTruncated(filePath, contents) {
+    fs.mkdirSync(path.dirname(filePath), { recursive: true });
+    fs.writeFileSync(filePath + '.gz', gzipSync(Buffer.from(contents)));
+    fs.writeFileSync(filePath, '');
+    fs.writeFileSync(filePath + '.file_size', String(contents.length));
+  }
+
+  function read(...relative) {
+    return fs.readFileSync(path.join(destination, ...relative), 'utf-8');
+  }
+
+  /* The subset of read_webpack_json output that collectSandboxStatic reads. */
+  function bundleData({ handlerPlugins = [plugin] } = {}) {
+    return [
+      { module_path: 'kolibri.core', plugin_path: core, sandbox_handler: false },
+      ...handlerPlugins.map(pluginPath => ({
+        module_path: 'kolibri.plugins.test_viewer',
+        plugin_path: pluginPath,
+        static_dir: path.join(pluginPath, 'static'),
+        sandbox_handler: true,
+      })),
+    ];
+  }
+
+  beforeEach(() => {
+    tmp = fs.mkdtempSync(path.join(os.tmpdir(), 'collect-sandbox-static-'));
+    destination = path.join(tmp, 'dest');
+    // The core content static directory is nested inside the kolibri.core plugin path.
+    core = path.join(tmp, 'core');
+    plugin = path.join(tmp, 'plugin');
+  });
+
+  afterEach(() => {
+    fs.rmSync(tmp, { recursive: true, force: true });
+  });
+
+  function coreStatic(...relative) {
+    return path.join(core, 'content', 'static', ...relative);
+  }
+
+  function pluginStatic(...relative) {
+    return path.join(plugin, 'static', ...relative);
+  }
+
+  it('collects from every source dir', () => {
+    write(coreStatic('core.js'), 'core');
+    write(pluginStatic('nested', 'plugin.js'), 'plugin');
+
+    collectSandboxStatic(bundleData(), destination);
+
+    expect(read('core.js')).toEqual('core');
+    expect(read('nested', 'plugin.js')).toEqual('plugin');
+  });
+
+  it('skips plugins with no sandbox handler bundle', () => {
+    write(coreStatic('core.js'), 'core');
+    write(pluginStatic('plugin.js'), 'plugin');
+
+    collectSandboxStatic(bundleData({ handlerPlugins: [] }), destination);
+
+    expect(fs.existsSync(path.join(destination, 'plugin.js'))).toBe(false);
+  });
+
+  it('resolves colliding paths first-wins', () => {
+    // FileFinder serves the first matching location, so the collected bundle must
+    // keep the core copy rather than the later plugin one.
+    write(coreStatic('shared.js'), 'core');
+    write(pluginStatic('shared.js'), 'plugin');
+
+    collectSandboxStatic(bundleData(), destination);
+
+    expect(read('shared.js')).toEqual('core');
+  });
+
+  it('skips a missing source dir', () => {
+    write(coreStatic('core.js'), 'core');
+
+    collectSandboxStatic(bundleData(), destination);
+
+    expect(read('core.js')).toEqual('core');
+  });
+
+  it('throws when no files are found', () => {
+    fs.mkdirSync(coreStatic(), { recursive: true });
+
+    expect(() => collectSandboxStatic(bundleData(), destination)).toThrow(
+      'No static files found to collect',
+    );
+  });
+
+  it('throws when kolibri.core is absent from the bundle data', () => {
+    expect(() => collectSandboxStatic([], destination)).toThrow('kolibri.core must be');
+  });
+
+  it('removes stale destination files when clearing', () => {
+    write(path.join(destination, 'stale.js'), 'stale');
+    write(coreStatic('core.js'), 'core');
+
+    collectSandboxStatic(bundleData(), destination, { clear: true });
+
+    expect(fs.existsSync(path.join(destination, 'stale.js'))).toBe(false);
+    expect(read('core.js')).toEqual('core');
+  });
+
+  it('recollects over an existing destination without clear', () => {
+    write(path.join(destination, 'core.js'), 'stale');
+    write(coreStatic('core.js'), 'core');
+
+    collectSandboxStatic(bundleData(), destination);
+
+    expect(read('core.js')).toEqual('core');
+  });
+
+  it('reconstructs a build-truncated file from its gzip', () => {
+    // A CDN won't reconstruct build-truncated files, so the collected copy must
+    // carry the full bytes, inflated from the .gz counterpart.
+    writeTruncated(coreStatic('app.js'), 'real content');
+
+    collectSandboxStatic(bundleData(), destination);
+
+    expect(read('app.js')).toEqual('real content');
+  });
+
+  it('reconstructs a file compressed by the real compressor', async () => {
+    // writeTruncated only mirrors compress.js; drive the compressor itself so the
+    // two halves of the round-trip cannot drift apart.
+    write(coreStatic('app.js'), 'real content');
+    await compressFile(coreStatic('app.js'));
+
+    collectSandboxStatic(bundleData(), destination);
+
+    expect(read('app.js')).toEqual('real content');
+    expect(fs.existsSync(path.join(destination, 'app.js.gz'))).toBe(false);
+    expect(fs.existsSync(path.join(destination, 'app.js.file_size'))).toBe(false);
+  });
+
+  it('does not collect the file_size sidecar', () => {
+    writeTruncated(coreStatic('app.js'), 'real content');
+
+    collectSandboxStatic(bundleData(), destination);
+
+    expect(fs.existsSync(path.join(destination, 'app.js.file_size'))).toBe(false);
+  });
+
+  it('does not collect a gzip sidecar', () => {
+    // DynamicWhiteNoise serves the .gz as content-encoding on app.js's own URL, so a
+    // collected app.js.gz would be an unreachable duplicate.
+    writeTruncated(coreStatic('app.js'), 'real content');
+
+    collectSandboxStatic(bundleData(), destination);
+
+    expect(fs.existsSync(path.join(destination, 'app.js.gz'))).toBe(false);
+  });
+
+  it('collects a gzip file that has no primary', () => {
+    // A .gz with no counterpart is a content file in its own right.
+    write(coreStatic('archive.gz'), 'archive');
+
+    collectSandboxStatic(bundleData(), destination);
+
+    expect(read('archive.gz')).toEqual('archive');
+  });
+
+  it('refuses to clear a symlinked destination', () => {
+    write(coreStatic('core.js'), 'core');
+    const real = path.join(tmp, 'real');
+    write(path.join(real, 'keep.js'), 'keep');
+    fs.symlinkSync(real, destination);
+
+    expect(() => collectSandboxStatic(bundleData(), destination, { clear: true })).toThrow(
+      'Refusing to clear symlinked destination',
+    );
+    // The symlink target's contents must survive.
+    expect(fs.existsSync(path.join(real, 'keep.js'))).toBe(true);
+  });
+
+  it('refuses to clear a destination containing a source', () => {
+    core = path.join(destination, 'core');
+    write(coreStatic('core.js'), 'core');
+
+    expect(() => collectSandboxStatic(bundleData(), destination, { clear: true })).toThrow(
+      'it contains source',
+    );
+    // The source under the destination must not be wiped.
+    expect(fs.existsSync(coreStatic('core.js'))).toBe(true);
+  });
+
+  it('refuses a destination containing a source without clearing', () => {
+    core = path.join(destination, 'core');
+    write(coreStatic('core.js'), 'core');
+
+    expect(() => collectSandboxStatic(bundleData(), destination)).toThrow('it contains source');
+  });
+
+  it('refuses a destination inside a source', () => {
+    // The walk reads each directory as it descends, so files already written to a
+    // destination below the source get collected again under a doubled path.
+    write(coreStatic('core.js'), 'core');
+    destination = coreStatic('collected');
+
+    expect(() => collectSandboxStatic(bundleData(), destination)).toThrow('it is inside source');
+    expect(fs.existsSync(destination)).toBe(false);
+  });
+});
diff --git a/packages/kolibri-build/src/__tests__/webpack.config.plugin.spec.js b/packages/kolibri-build/src/__tests__/webpack.config.plugin.spec.js
index 26a07931561..826bc82b1b4 100644
--- a/packages/kolibri-build/src/__tests__/webpack.config.plugin.spec.js
+++ b/packages/kolibri-build/src/__tests__/webpack.config.plugin.spec.js
@@ -1,11 +1,18 @@
 const path = require('node:path');
 const _ = require('lodash');
+const baseConfig = require('../webpack.config.base');
 const webpackConfigPlugin = require('../webpack.config.plugin');
 
 jest.mock('../apiSpecExportTools', () => ({
   getCoreExternals: () => ({}),
 }));
 
+// Spied on to simulate a base config with no JS transpilation rule.
+jest.mock('../webpack.config.base', () => {
+  const actual = jest.requireActual('../webpack.config.base');
+  return jest.fn((...args) => actual(...args));
+});
+
 jest.mock('kolibri-logging', () => ({
   error: () => {},
   getLogger: () => {
@@ -40,6 +47,14 @@ function hasMessageRegistrationPlugin(config) {
   return config.plugins.some(plugin => plugin.constructor.name === 'MessageRegistrationPlugin');
 }
 
+function hasRTLPlugin(config) {
+  return config.plugins.some(plugin => plugin.constructor.name === 'WebpackRTLPlugin');
+}
+
+function findJsRule(config) {
+  return config.module.rules.find(rule => rule.loader && rule.loader.includes('swc-loader'));
+}
+
 const baseData = {
   name: 'kolibri.plugin.test.test_plugin',
   bundle_id: 'test_plugin',
@@ -154,4 +169,58 @@ describe('webpackConfigPlugin', function () {
       expect(hasMessageRegistrationPlugin(webpackConfigPlugin(data))).toBe(false);
     });
   });
+
+  describe('sandbox handler bundles', function () {
+    beforeEach(function () {
+      data.sandbox_handler = true;
+      // Resolving core-js for the polyfill version needs a real plugin with it as a dependency.
+      data.plugin_path = 'kolibri/plugins/html5_viewer';
+      delete data.locale_data_folder;
+    });
+
+    it('should not need a locale_data_folder', function () {
+      expect(webpackConfigPlugin(data)).toBeDefined();
+    });
+
+    it('should exclude MessageRegistrationPlugin', function () {
+      expect(hasMessageRegistrationPlugin(webpackConfigPlugin(data))).toBe(false);
+    });
+
+    it('should exclude WebpackRTLPlugin', function () {
+      expect(hasRTLPlugin(webpackConfigPlugin(data))).toBe(false);
+    });
+
+    it('should inject the polyfills they use, as they have no core bundle to rely on', function () {
+      const { env } = findJsRule(webpackConfigPlugin(data, { transpile: true })).options;
+      expect(env.mode).toEqual('usage');
+      expect(env.coreJs).toEqual(
+        require(require.resolve('core-js/package.json', { paths: [data.plugin_path] })).version,
+      );
+    });
+
+    it('should detect module type per file so CommonJS gets require() polyfill imports', function () {
+      expect(findJsRule(webpackConfigPlugin(data, { transpile: true })).options.isModule).toEqual(
+        'unknown',
+      );
+    });
+
+    it('should throw when there is no transpilation rule to inject polyfills through', function () {
+      baseConfig.mockReturnValueOnce({ module: { rules: [] } });
+      expect(() => webpackConfigPlugin(data, { transpile: true })).toThrow(
+        /no JS transpilation rule/,
+      );
+    });
+  });
+
+  describe('plugin bundles', function () {
+    it('should include WebpackRTLPlugin', function () {
+      expect(hasRTLPlugin(webpackConfigPlugin(data))).toBe(true);
+    });
+
+    it('should not inject polyfills, as they rely on the core bundle for them', function () {
+      const { options } = findJsRule(webpackConfigPlugin(data, { transpile: true }));
+      expect(options.env.mode).toBeUndefined();
+      expect(options.isModule).toBeUndefined();
+    });
+  });
 });
diff --git a/packages/kolibri-build/src/cli.js b/packages/kolibri-build/src/cli.js
index 7fa96f683cf..fc620f28666 100755
--- a/packages/kolibri-build/src/cli.js
+++ b/packages/kolibri-build/src/cli.js
@@ -15,6 +15,7 @@ const readWebpackJson = require('./read_webpack_json');
 const webpackConfig = require('./webpack.config.plugin');
 const clean = require('./clean');
 const compressFile = require('./compress');
+const collectSandboxStatic = require('./collect_sandbox_static');
 
 const cliLogging = logger.getLogger('Kolibri Build CLI');
 const buildLogging = logger.getLogger('Kolibri Build');
@@ -34,6 +35,7 @@ function createWebpackCompiler(bundleData, options) {
   const buildOptions = {
     hot: options.hot,
     port: options.port,
+    address: options.host,
     mode: options.development ? 'development' : 'production',
     cache: options.cache,
     transpile: options.transpile,
@@ -43,7 +45,10 @@ function createWebpackCompiler(bundleData, options) {
     setDevServerPublicPath: !options.writeToDisk,
   };
 
-  const webpackArray = bundleData.map(bundle => webpackConfig(bundle, buildOptions));
+  // Generate webpack config for each bundle (sandbox_handler flag is handled internally)
+  const webpackArray = bundleData
+    .map(bundle => webpackConfig(bundle, buildOptions))
+    .filter(Boolean);
 
   if (options.parallel) {
     webpackArray.parallelism = options.parallel;
@@ -217,7 +222,7 @@ addBuildOptions(program.command('dev'))
   .description('Start development server with hot module reloading')
   .option('-h, --hot', 'Use hot module reloading in the webpack devserver', false)
   .option('--port <port>', 'Set a port number to start devserver on', Number, 3000)
-  .option('--host <host>', 'Set a host to serve devserver', String, '127.0.0.1')
+  .option('--host <host>', 'Set a host to serve devserver', String, 'localhost')
   .option('--write-to-disk', 'Write files to disk instead of using webpack devserver', false)
   .option(
     '--watchonly [plugins...]',
@@ -311,6 +316,21 @@ addBuildOptions(program.command('clean'))
     clean(bundleData);
   });
 
+// Collect sandbox static command
+addBuildOptions(program.command('collect-sandbox-static'))
+  .arguments('<destination>')
+  .description('Collect the static files the sandbox server serves into one directory')
+  .option('--clear', 'Clear the destination directory before collecting', false)
+  .action(function (destination, options) {
+    const bundleData = getBundleData(options);
+    try {
+      collectSandboxStatic(bundleData, destination, { clear: options.clear });
+    } catch (e) {
+      cliLogging.error(e.message);
+      process.exit(1);
+    }
+  });
+
 // Compress
 const compressCommand = program.command('compress');
 compressCommand
diff --git a/packages/kolibri-build/src/collect_sandbox_static.js b/packages/kolibri-build/src/collect_sandbox_static.js
new file mode 100644
index 00000000000..0a03da0cb5f
--- /dev/null
+++ b/packages/kolibri-build/src/collect_sandbox_static.js
@@ -0,0 +1,201 @@
+const fs = require('node:fs');
+const path = require('node:path');
+const { gunzipSync } = require('node:zlib');
+const logger = require('kolibri-logging');
+
+const logging = logger.getLogger('Kolibri Sandbox Static Collector');
+
+const GZ = '.gz';
+const FILE_SIZE = '.file_size';
+
+/**
+ * @typedef {object} BundleDatum The fields of a read_webpack_json entry used here.
+ * @property {string} module_path Dotted Python path of the plugin the bundle belongs to.
+ * @property {string} plugin_path Filesystem path of the plugin package.
+ * @property {string} static_dir The plugin's static directory.
+ * @property {boolean} sandbox_handler Whether the bundle is a sandbox handler.
+ */
+
+/**
+ * List the directories alt_wsgi.py mounts on the sandbox server: the core content
+ * static directory (where the kolibri-sandbox package builds to) followed by the
+ * static directory of every plugin shipping a sandbox handler bundle.
+ * @param {BundleDatum[]} bundleData - All bundles read from the plugins being built.
+ * @returns {string[]} Source directories, in the order the sandbox server resolves them.
+ * @throws {Error} If kolibri.core is absent, leaving the core static path unknown.
+ */
+function sandboxStaticPaths(bundleData) {
+  const core = bundleData.find(bundle => bundle.module_path === 'kolibri.core');
+  if (!core) {
+    throw new Error('kolibri.core must be in the plugin list to locate the core static files');
+  }
+  return [
+    path.join(core.plugin_path, 'content', 'static'),
+    ...new Set(bundleData.filter(bundle => bundle.sandbox_handler).map(b => b.static_dir)),
+  ];
+}
+
+/**
+ * Whether a file exists only to support serve-time reconstruction, so a plain static
+ * host has no URL for it. DynamicWhiteNoise serves a .gz as content-encoding on its
+ * primary's URL, never as a path of its own; a .gz with no primary is a content file.
+ * @param {string} srcFile - Path of the candidate file.
+ * @returns {boolean} True when the file should not be collected.
+ */
+function isServeArtifact(srcFile) {
+  if (srcFile.endsWith(FILE_SIZE)) {
+    return true;
+  }
+  return srcFile.endsWith(GZ) && fs.existsSync(srcFile.slice(0, -GZ.length));
+}
+
+/**
+ * Copy one file, writing it whole. This undoes compress.js, which gzips each static
+ * file, truncates the original to 0 bytes and leaves a .file_size sibling;
+ * DynamicWhiteNoise rebuilds those at serve time but a CDN won't.
+ * @param {string} srcFile - Path of the file to collect.
+ * @param {string} destFile - Path to write, whose parent directory must already exist.
+ */
+function collectFile(srcFile, destFile) {
+  const buildCompressed =
+    fs.existsSync(srcFile + FILE_SIZE) &&
+    fs.statSync(srcFile).size === 0 &&
+    fs.existsSync(srcFile + GZ);
+  if (buildCompressed) {
+    fs.writeFileSync(destFile, gunzipSync(fs.readFileSync(srcFile + GZ)));
+  } else {
+    fs.copyFileSync(srcFile, destFile);
+  }
+}
+
+/**
+ * Resolve a path through symlinks, tolerating one that does not exist yet by resolving
+ * its nearest existing ancestor and re-appending the rest.
+ * @param {string} target - Path to resolve, which need not exist.
+ * @returns {string} Absolute path with every existing symlink component resolved.
+ */
+function realPath(target) {
+  const missing = [];
+  let existing = path.resolve(target);
+  while (!fs.existsSync(existing)) {
+    missing.unshift(path.basename(existing));
+    existing = path.dirname(existing);
+  }
+  return path.join(fs.realpathSync(existing), ...missing);
+}
+
+/**
+ * Refuse a destination that overlaps a source tree, in either direction: one containing
+ * a source loses it to --clear, and one nested inside a source is walked as it is
+ * written, collecting each file again under a doubled relative path.
+ * @param {string} destination - Directory to collect into, which need not exist yet.
+ * @param {string[]} sourceDirs - Source directories to collect from.
+ * @throws {Error} If the destination overlaps a source directory.
+ */
+function assertDisjoint(destination, sourceDirs) {
+  const destReal = realPath(destination);
+  for (const sourceDir of sourceDirs) {
+    if (!fs.existsSync(sourceDir)) {
+      continue;
+    }
+    const sourceReal = fs.realpathSync(sourceDir);
+    if (sourceReal === destReal || sourceReal.startsWith(destReal + path.sep)) {
+      throw new Error(`Refusing to collect into ${destination}: it contains source ${sourceDir}`);
+    }
+    if (destReal.startsWith(sourceReal + path.sep)) {
+      throw new Error(`Refusing to collect into ${destination}: it is inside source ${sourceDir}`);
+    }
+  }
+}
+
+/**
+ * Delete an existing destination tree, refusing a symlink: rm would remove the link
+ * rather than the tree it names, leaving the stale files in place.
+ * @param {string} destination - Directory to delete, which must exist.
+ * @throws {Error} If the destination is a symlink.
+ */
+function clearDestination(destination) {
+  if (fs.lstatSync(destination).isSymbolicLink()) {
+    throw new Error(`Refusing to clear symlinked destination: ${destination}`);
+  }
+  logging.info(`Clearing destination directory: ${destination}`);
+  fs.rmSync(destination, { recursive: true });
+}
+
+/**
+ * Recursively yield every file under a directory.
+ * @param {string} dir - Directory to walk.
+ * @yields {string} Path of each file found, at any depth.
+ */
+function* walkFiles(dir) {
+  for (const entry of fs.readdirSync(dir, { withFileTypes: true })) {
+    const entryPath = path.join(dir, entry.name);
+    if (entry.isDirectory()) {
+      yield* walkFiles(entryPath);
+    } else {
+      yield entryPath;
+    }
+  }
+}
+
+/**
+ * Copy every file the sandbox server serves into a single directory, suitable for
+ * upload to a CDN or object storage.
+ * @param {BundleDatum[]} bundleData - All bundles read from the plugins being built.
+ * @param {string} destination - Directory to collect into; created if absent.
+ * @param {object} options - Collection options.
+ * @param {boolean} [options.clear] - Delete the destination tree before collecting.
+ * @returns {number} How many files were collected.
+ * @throws {Error} If the sources yield no files, or the destination overlaps a source.
+ */
+function collectSandboxStatic(bundleData, destination, { clear = false } = {}) {
+  const sourceDirs = sandboxStaticPaths(bundleData);
+
+  assertDisjoint(destination, sourceDirs);
+
+  if (clear && fs.existsSync(destination)) {
+    clearDestination(destination);
+  }
+
+  fs.mkdirSync(destination, { recursive: true });
+
+  const collected = new Set();
+
+  for (const sourceDir of sourceDirs) {
+    if (!fs.existsSync(sourceDir)) {
+      logging.warn(`Source directory not found: ${sourceDir}`);
+      continue;
+    }
+
+    logging.info(`Collecting from: ${sourceDir}`);
+
+    for (const srcFile of walkFiles(sourceDir)) {
+      if (isServeArtifact(srcFile)) {
+        continue;
+      }
+
+      // FileFinder resolves colliding relative paths first-wins, in source order —
+      // mirror that rather than overwriting.
+      const relFile = path.relative(sourceDir, srcFile);
+      if (collected.has(relFile)) {
+        logging.debug(`Skipping ${srcFile}: already collected from an earlier source`);
+        continue;
+      }
+      collected.add(relFile);
+
+      const destFile = path.join(destination, relFile);
+      fs.mkdirSync(path.dirname(destFile), { recursive: true });
+      collectFile(srcFile, destFile);
+    }
+  }
+
+  if (!collected.size) {
+    throw new Error('No static files found to collect');
+  }
+
+  logging.info(`Successfully collected ${collected.size} files to ${destination}`);
+  return collected.size;
+}
+
+module.exports = collectSandboxStatic;
+module.exports.sandboxStaticPaths = sandboxStaticPaths;
diff --git a/packages/kolibri-build/src/read_webpack_json.js b/packages/kolibri-build/src/read_webpack_json.js
index 19b61e00c5d..2b869bcb15a 100644
--- a/packages/kolibri-build/src/read_webpack_json.js
+++ b/packages/kolibri-build/src/read_webpack_json.js
@@ -21,6 +21,9 @@ function parseConfig(buildConfig, pythonData, configPath, index = null) {
     config_path: configPath,
     module_path: pythonData.module_path,
     index,
+    // Flag for sandbox handler builds - these are built with no externals
+    // and output as IIFE format for script tag injection
+    sandbox_handler: buildConfig.sandbox_handler || false,
   };
 }
 
diff --git a/packages/kolibri-build/src/webpack.config.plugin.js b/packages/kolibri-build/src/webpack.config.plugin.js
index 2f33510e2de..fab0620b244 100644
--- a/packages/kolibri-build/src/webpack.config.plugin.js
+++ b/packages/kolibri-build/src/webpack.config.plugin.js
@@ -29,6 +29,7 @@ const { createCssInsert } = require('./createCssInsert');
  * @param {string} data.name - The name that the plugin is referred to by.
  * @param {string} data.static_dir - Directory path to the module in which the plugin is defined.
  * @param {string} data.stats_file - The name of the webpack bundle stats file that the plugin data.
+ * @param {boolean} data.sandbox_handler - Whether this is a sandbox handler bundle.
  * @param {object} [options] - Build options.
  * @param {string} [options.mode] - The webpack mode to set for the configuration.
  * @param {boolean} [options.hot] - Activate hot module reloading.
@@ -42,6 +43,8 @@ const { createCssInsert } = require('./createCssInsert');
  * the dev server.
  * @returns {object|undefined} The webpack bundle configuration, or undefined when `data`
  * is missing required parameters.
+ * @throws {Error} When a sandbox handler bundle has no JS transpilation rule to inject
+ * polyfills through, or its plugin does not depend on core-js.
  */
 module.exports = (
   data,
@@ -57,24 +60,35 @@ module.exports = (
     setDevServerPublicPath = true,
   } = {},
 ) => {
-  if (
-    typeof data.name === 'undefined' ||
-    typeof data.bundle_id === 'undefined' ||
-    typeof data.config_path === 'undefined' ||
-    typeof data.static_dir === 'undefined' ||
-    typeof data.stats_file === 'undefined' ||
-    typeof data.locale_data_folder === 'undefined' ||
-    typeof data.plugin_path === 'undefined' ||
-    typeof data.version === 'undefined'
-  ) {
-    logging.error(data.name + ' plugin is misconfigured, missing parameter(s)');
+  const isSandboxHandler = Boolean(data.sandbox_handler);
+
+  // Validate required parameters - locale_data_folder not required for sandbox handlers
+  const requiredParams = [
+    'name',
+    'bundle_id',
+    'config_path',
+    'static_dir',
+    'stats_file',
+    'plugin_path',
+    'version',
+  ];
+  if (!isSandboxHandler) {
+    requiredParams.push('locale_data_folder');
+  }
+
+  const missingParams = requiredParams.filter(param => typeof data[param] === 'undefined');
+  if (missingParams.length > 0) {
+    const bundleType = isSandboxHandler ? 'sandbox handler' : 'plugin';
+    logging.error(
+      `${data.name} ${bundleType} is misconfigured, missing parameter(s): ${missingParams.join(', ')}`,
+    );
     return;
   }
   const configData = require(data.config_path);
   // The bundle's own buildConfig.js entry, alongside its webpack_config, may set
   // `skipMessageRegistration` to opt out of the frontend message registration bootstrap below.
   const configEntry = data.index !== null ? configData[data.index] : configData;
-  let webpackConfig = configEntry.webpack_config;
+  const webpackConfig = configEntry.webpack_config;
   if (typeof webpackConfig.entry === 'string') {
     webpackConfig.entry = {
       [data.name]: path.join(data.plugin_path, webpackConfig.entry),
@@ -101,34 +115,43 @@ module.exports = (
 
   const isCoreBundle = webpackConfig.output && webpackConfig.output.library === kolibriName;
 
-  // If this is not the core bundle, then we need to add the external library mappings.
-  const externals = isCoreBundle ? {} : getCoreExternals();
+  // Sandbox handlers are self-contained with no externals.
+  // Core bundle also has no externals.
+  // Other plugins use core externals.
+  const externals = isSandboxHandler || isCoreBundle ? {} : getCoreExternals();
 
   const alias = {};
   if (kdsPath) {
     alias['kolibri-design-system'] = path.resolve(kdsPath);
     cache = false;
   }
+  const output = {
+    path: path.resolve(path.join(data.static_dir, data.name)),
+    filename: '[name]-' + data.version + '.js',
+    // Need to define this in order for chunks to be named
+    // Without this chunks from different bundles will likely have colliding names
+    chunkFilename: data.name + '-[name]-' + data.version + '.js',
+    // c.f. https://webpack.js.org/configuration/output/#outputchunkloadingglobal
+    // Without this namespacing, there is a possibility that chunks from different
+    // plugins could conflict in the global chunk namespace.
+    // Replace any '.' in the name as unclear from documentation whether
+    // webpack properly handles that or not.
+    chunkLoadingGlobal: 'webpackChunkwebpack__' + data.name.replace('.', ''),
+    scriptType: 'text/javascript',
+    pathinfo: false,
+    publicPath: 'auto',
+  };
+
+  // Sandbox handlers use IIFE format for script tag injection
+  if (isSandboxHandler) {
+    output.iife = true;
+  }
+
   let bundle = {
     externals,
     name: data.name,
     mode,
-    output: {
-      path: path.resolve(path.join(data.static_dir, data.name)),
-      filename: '[name]-' + data.version + '.js',
-      // Need to define this in order for chunks to be named
-      // Without this chunks from different bundles will likely have colliding names
-      chunkFilename: data.name + '-[name]-' + data.version + '.js',
-      // c.f. https://webpack.js.org/configuration/output/#outputchunkloadingglobal
-      // Without this namespacing, there is a possibility that chunks from different
-      // plugins could conflict in the global chunk namespace.
-      // Replace any '.' in the name as unclear from documentation whether
-      // webpack properly handles that or not.
-      chunkLoadingGlobal: 'webpackChunkwebpack__' + data.name.replace('.', ''),
-      scriptType: 'text/javascript',
-      pathinfo: false,
-      publicPath: 'auto',
-    },
+    output,
     resolve: {
       // Add the plugin's node_modules first so pnpm can resolve plugin-specific dependencies
       modules: [path.join(data.plugin_path, 'node_modules')],
@@ -144,10 +167,8 @@ module.exports = (
         chunkFilename: '[name]' + data.version + '[id].css',
         insert: createCssInsert(data.name),
       }),
-      new WebpackRTLPlugin({
-        minify: false,
-        isCoreBundle,
-      }),
+      // Sandbox handlers get no RTL support - they have no i18n machinery.
+      ...(isSandboxHandler ? [] : [new WebpackRTLPlugin({ minify: false, isCoreBundle })]),
       // BundleTracker creates stats about our built files which we can then pass to Django to
       // allow our template tags to load the correct frontend files.
       new BundleTracker({
@@ -165,13 +186,14 @@ module.exports = (
       }),
       // Add custom messages per bundle.
       new WebpackMessages({
-        name: data.name,
+        name: data.name + (isSandboxHandler ? ' (sandbox)' : ''),
         logger: str => logging.info(str),
       }),
     ],
   };
 
-  if (!configEntry.skipMessageRegistration) {
+  // Sandbox handlers get no message registration.
+  if (!isSandboxHandler && !configEntry.skipMessageRegistration) {
     bundle.plugins.push(
       // Inject code to register frontend messages
       new MessageRegistrationPlugin({
@@ -212,6 +234,41 @@ module.exports = (
 
   bundle = merge(bundle, baseConfig({ mode, hot, cache, transpile }), webpackConfig);
 
+  // Sandbox handlers run in the sandbox iframe with no core bundle, so they cannot rely
+  // on its polyfills - inject the ones they actually use into each handler bundle.
+  if (isSandboxHandler && transpile) {
+    const jsRule = bundle.module.rules.find(
+      rule => rule.loader && rule.loader.includes('swc-loader'),
+    );
+    if (!jsRule) {
+      throw new Error(
+        `${data.name} sandbox handler bundle has no JS transpilation rule to inject polyfills through`,
+      );
+    }
+    // core-js must be a dependency of the handler's plugin so the injected imports resolve,
+    // and is the single source of truth for the version we tell swc to target.
+    let coreJsPackage;
+    try {
+      coreJsPackage = require.resolve('core-js/package.json', { paths: [data.plugin_path] });
+    } catch {
+      throw new Error(
+        `${data.name} sandbox handler bundle requires core-js as a dependency of ${data.plugin_path} so the injected polyfill imports resolve`,
+      );
+    }
+    jsRule.options = {
+      ...jsRule.options,
+      // swc's equivalent of babel's sourceType: 'unambiguous' - CommonJS modules in the
+      // graph get require() polyfill imports rather than ESM ones, which would otherwise
+      // make webpack treat them as ES modules and drop their module.exports.
+      isModule: 'unknown',
+      env: {
+        ...jsRule.options.env,
+        mode: 'usage',
+        coreJs: require(coreJsPackage).version,
+      },
+    };
+  }
+
   if (devServer) {
     if (setDevServerPublicPath) {
       const publicPath = `http://${address}:${port}/${data.name}/`;
diff --git a/packages/kolibri-format/eslint.config.mjs b/packages/kolibri-format/eslint.config.mjs
index 66984734d55..418e0685008 100644
--- a/packages/kolibri-format/eslint.config.mjs
+++ b/packages/kolibri-format/eslint.config.mjs
@@ -82,7 +82,7 @@ export default [
       reportUnusedDisableDirectives: 'off',
     },
     languageOptions: {
-      ecmaVersion: 2020,
+      ecmaVersion: 'latest',
       sourceType: 'module',
       parserOptions: {
         ecmaFeatures: {
diff --git a/packages/kolibri-sandbox/README.md b/packages/kolibri-sandbox/README.md
index 41348177fd2..1b58e73f5ea 100644
--- a/packages/kolibri-sandbox/README.md
+++ b/packages/kolibri-sandbox/README.md
@@ -10,7 +10,7 @@ The code inside the iframe mocks the localStorage, sessionStorage, and document.
 
 Once this has been setup, it sends a ready event to the external code that may be listening that it is ready. Once it receives a return ready event, it loads up the actual HTML for the page and writes that into the document.
 
-This inner code then communicates with an object external to the iframe that is setup by the HTML5AppRenderer, that then communicates changes in persistent state to be saved into the extraFields object on the ContentSummaryLog.
+This inner code then communicates with an object external to the iframe that is setup by the SandboxedContentViewer, that then communicates changes in persistent state to be saved into the extraFields object on the ContentSummaryLog.
 
 Getting Started
 ----------------
@@ -166,18 +166,3 @@ function createReturnMsg({ message, data, err }) {
 ```
 
 Finally, the same process of postMessages then happens in reverse, with `CustomContentRenderer.vue` sending a message to `mainClient.js`, which in turn sends a message to `mediator.js` which then resolves or rejects the promise that has been pending with `kolibri.getContentById()`.
-
-H5P Static Files
-----------------
-
-This code is currently generated from https://github.com/h5p/h5p-php-library
-
-To update, update the `h5pCommit` variable in `downloadH5PVendor.js` to the desired tag and then run `pnpm run build-h5p`.
-
-
-Bloom Reader Static Files
--------------------------
-
-This code is currently generated from https://github.com/learningequality/bloom-player (specifically the 'patched' default branch).
-
-To regenerate, the repository should be cloned, and `pnpm run build` run within the context of that repository to regenerate the new assets. All the files put into `dist` should then be copied into `kolibri/core/content/static/bloom` in the Kolibri repository. Any previously existing hash named files can be deleted and replaced by the new hash named files.
diff --git a/packages/kolibri-sandbox/babel.config.js b/packages/kolibri-sandbox/babel.config.js
index 3ae36da48aa..e0ab8c0efd3 100644
--- a/packages/kolibri-sandbox/babel.config.js
+++ b/packages/kolibri-sandbox/babel.config.js
@@ -1,6 +1,14 @@
 /* eslint-disable import-x/no-commonjs, import-x/no-amd, import-x/no-import-module-exports */
 module.exports = {
   presets: ['@babel/preset-env'],
-  // `version` must track the `core-js` catalog entry in pnpm-workspace.yaml.
-  plugins: [['babel-plugin-polyfill-corejs3', { method: 'usage-global', version: '3.49' }]],
+  plugins: [
+    [
+      'babel-plugin-polyfill-corejs3',
+      {
+        method: 'usage-global',
+        // Our own core-js dependency is the single source of truth for the version.
+        version: require('core-js/package.json').version,
+      },
+    ],
+  ],
 };
diff --git a/packages/kolibri-sandbox/package.json b/packages/kolibri-sandbox/package.json
index a367ccbc3ef..8282f2e90d5 100644
--- a/packages/kolibri-sandbox/package.json
+++ b/packages/kolibri-sandbox/package.json
@@ -4,12 +4,18 @@
   "version": "0.1.0",
   "description": "A library for providing a secure sandbox environment for Kolibri.",
   "main": "src/mainClient.js",
+  "exports": {
+    ".": "./src/mainClient.js",
+    "./SandboxHandler": "./src/SandboxHandler.js",
+    "./SandboxShim": "./src/SandboxShim.js",
+    "./base": "./src/base.js",
+    "./mediator": "./src/mediator.js"
+  },
   "scripts": {
     "build-base": "webpack --config ./webpack.config.js",
     "build": "pnpm build-base --mode=production",
     "dev": "pnpm build-base --mode=development --watch",
-    "compat": "eslint -c ./compat.js ./src/*.js",
-    "build-h5p": "node ./downloadH5PVendor.js && webpack --config ./webpack.config.h5p.js --mode=production"
+    "compat": "eslint -c ./compat.js ./src/*.js"
   },
   "author": "Learning Equality",
   "license": "MIT",
@@ -22,26 +28,14 @@
     "css-minimizer-webpack-plugin": "8.0.0",
     "eslint-plugin-compat": "^6.0.2",
     "html-webpack-plugin": "5.6.5",
-    "jquery": "3.5.1",
-    "jszip": "^3.10.1",
-    "mini-css-extract-plugin": "^2.9.4",
     "mutationobserver-shim": "^0.3.7",
-    "purgecss": "^6.0.0",
     "terser-webpack-plugin": "^5.3.14",
     "webpack": "^5.103.0",
     "webpack-cli": "^7.0.2"
   },
   "dependencies": {
     "core-js": "catalog:",
-    "dayjs": "^1.11.20",
-    "iri": "^1.3.1",
-    "is-language-code": "^3.1.0",
-    "iso8601-duration": "^2.1.4",
-    "kolibri-zip": "workspace:*",
-    "lodash": "catalog:",
-    "toposort-class": "^1.0.1",
-    "uuid": "^14.0.1",
-    "web-streams-polyfill": "catalog:"
+    "uuid": "^14.0.1"
   },
   "browserslist": [
     "extends browserslist-config-kolibri"
diff --git a/packages/kolibri-sandbox/src/Bloom/BloomInterface.js b/packages/kolibri-sandbox/src/Bloom/BloomInterface.js
deleted file mode 100644
index a41136b93f6..00000000000
--- a/packages/kolibri-sandbox/src/Bloom/BloomInterface.js
+++ /dev/null
@@ -1,72 +0,0 @@
-import BaseShim from '../baseShim';
-import { events, nameSpace } from '../base';
-
-export default class Bloom extends BaseShim {
-  constructor(mediator) {
-    super(mediator);
-    this.data = {};
-    this.userData = {};
-    this.nameSpace = 'BloomPlayer';
-    // Bind this to ensure that we don't end up with unpredictable this.
-    this.__setData = this.__setData.bind(this);
-    this.__setUserData = this.__setUserData.bind(this);
-    this.__getProgress = this.__getProgress.bind(this);
-    this.loaded = this.loaded.bind(this);
-    this.errored = this.errored.bind(this);
-    this.on(this.events.STATEUPDATE, this.__setData);
-    this.on(this.events.USERDATAUPDATE, this.__setUserData);
-    this.on(this.events.BLOOMPAGESREAD, this.__getProgress);
-    this._hasBeenFlaggedAsComplete = false;
-  }
-
-  init(iframe, filepath) {
-    import(/* webpackChunkName: "BloomRunner" */ './BloomRunner').then(
-      ({ default: BloomRunner }) => {
-        this.BloomRunner = new BloomRunner(this);
-        this.BloomRunner.init(iframe, filepath, this.loaded, this.errored);
-      },
-    );
-  }
-
-  __setData(data = {}) {
-    this.data = data;
-  }
-
-  __setUserData(userData = {}) {
-    this.userData = userData;
-  }
-
-  __getProgress(data = {}) {
-    let progress = this.userData.progress || 0;
-    if (data.totalNumberedPages) {
-      progress = (data.audioPages + data.nonAudioPages + data.videoPages) / data.totalNumberedPages;
-      if (!this._hasBeenFlaggedAsComplete && progress >= 1) {
-        progress = 0.95;
-      }
-      this._hasBeenFlaggedAsComplete = data.lastNumberedPageRead;
-      this.userData.progress = progress;
-    }
-    this.__mediator.sendMessage({
-      nameSpace: nameSpace,
-      event: events.USERDATAUPDATE,
-      data: this.userData,
-    });
-  }
-
-  /*
-   * Called by Hashi when the iframe is ready
-   * This will setup the BloomIntegration property that Bloom then uses
-   * to configure itself.
-   */
-  iframeInitialize(contentWindow) {
-    this.BloomRunner && this.BloomRunner.shimBloomIntegration(contentWindow);
-  }
-
-  loaded() {
-    this.__mediator.sendMessage({ nameSpace, event: events.LOADING, data: false });
-  }
-
-  errored(err) {
-    this.__mediator.sendMessage({ nameSpace, event: events.ERROR, data: err });
-  }
-}
diff --git a/packages/kolibri-sandbox/src/H5P/H5PInterface.js b/packages/kolibri-sandbox/src/H5P/H5PInterface.js
deleted file mode 100644
index 3dfff1411ba..00000000000
--- a/packages/kolibri-sandbox/src/H5P/H5PInterface.js
+++ /dev/null
@@ -1,50 +0,0 @@
-import BaseShim from '../baseShim';
-import { events, nameSpace } from '../base';
-
-export default class H5P extends BaseShim {
-  constructor(mediator) {
-    super(mediator);
-    this.data = {};
-    this.userData = {};
-    this.nameSpace = 'H5P';
-    // Bind this to ensure that we don't end up with unpredictable this.
-    this.__setData = this.__setData.bind(this);
-    this.__setUserData = this.__setUserData.bind(this);
-    this.loaded = this.loaded.bind(this);
-    this.errored = this.errored.bind(this);
-    this.on(this.events.STATEUPDATE, this.__setData);
-    this.on(this.events.USERDATAUPDATE, this.__setUserData);
-  }
-
-  init(iframe, filepath) {
-    import(/* webpackChunkName: "H5PRunner" */ './H5PRunner').then(({ default: H5PRunner }) => {
-      this.H5PRunner = new H5PRunner(this);
-      this.H5PRunner.init(iframe, filepath, this.loaded, this.errored);
-    });
-  }
-
-  __setData(data = {}) {
-    this.data = data;
-  }
-
-  __setUserData(userData = {}) {
-    this.userData = userData;
-  }
-
-  /*
-   * Called by Hashi when the iframe is ready
-   * This will setup the H5PIntegration property that H5P then uses
-   * to configure itself.
-   */
-  iframeInitialize(contentWindow) {
-    this.H5PRunner && this.H5PRunner.shimH5PIntegration(contentWindow);
-  }
-
-  loaded() {
-    this.__mediator.sendMessage({ nameSpace, event: events.LOADING, data: false });
-  }
-
-  errored(err) {
-    this.__mediator.sendMessage({ nameSpace, event: events.ERROR, data: err });
-  }
-}
diff --git a/packages/kolibri-sandbox/src/SandboxHandler.js b/packages/kolibri-sandbox/src/SandboxHandler.js
new file mode 100644
index 00000000000..6796201a78d
--- /dev/null
+++ b/packages/kolibri-sandbox/src/SandboxHandler.js
@@ -0,0 +1,178 @@
+/**
+ * Base class for sandbox handlers.
+ *
+ * Handlers are content-type-specific code that runs inside the sandboxed iframe.
+ * They are responsible for initializing and managing content rendering.
+ *
+ * Usage:
+ *   import SandboxHandler from 'kolibri-sandbox/SandboxHandler';
+ *
+ *   export default class MyHandler extends SandboxHandler {
+ *     static shims = [MyShim];
+ *
+ *     async init(iframe, startUrl, options) {
+ *       // Initialize content
+ *     }
+ *   }
+ *
+ * The handler self-registers with the sandbox environment when instantiated.
+ * Handler scripts should instantiate their handler class at the module level:
+ *
+ *   new MyHandler(window.SandboxEnvironment);
+ */
+
+// SandboxShim is imported for documentation purposes (used in @type annotations)
+// eslint-disable-next-line no-unused-vars
+import { SandboxShim } from './SandboxShim';
+import LocalStorage from './localStorage';
+import SessionStorage from './sessionStorage';
+import Cookie from './cookie';
+import Kolibri from './kolibri';
+import IndexedDBShim from './indexedDBShim';
+
+/**
+ * @typedef {import('./iframeClient').default} SandboxEnvironment
+ */
+
+export class SandboxHandler {
+  /**
+   * Base shims that are always included for all handlers.
+   * These provide common storage API replacements.
+   * @type {Array<typeof SandboxShim>}
+   */
+  static baseShims = [LocalStorage, SessionStorage, Cookie, Kolibri, IndexedDBShim];
+
+  /**
+   * Array of SandboxShim subclasses this handler requires.
+   * Override in subclass to add custom shims.
+   * @type {Array<typeof SandboxShim>}
+   */
+  static shims = [];
+
+  /**
+   * Bind the handler to its sandbox environment and instantiate its shims.
+   * @param {SandboxEnvironment} sandbox - The sandbox environment instance
+   */
+  constructor(sandbox) {
+    if (!sandbox) {
+      throw new Error(
+        'SandboxHandler requires a sandbox environment. ' +
+          'Pass window.SandboxEnvironment when instantiating.',
+      );
+    }
+
+    this.sandbox = sandbox;
+    this.mediator = sandbox.mediator;
+    this.shims = {};
+
+    // Instantiate all shims (base + custom)
+    const allShimClasses = [...this.constructor.baseShims, ...this.constructor.shims];
+
+    for (const ShimClass of allShimClasses) {
+      if (!ShimClass.shimName) {
+        throw new Error(`Shim class ${ShimClass.name} must define static shimName`);
+      }
+      const shim = new ShimClass(this.mediator);
+      this.shims[ShimClass.shimName] = shim;
+    }
+
+    // Self-register with sandbox
+    sandbox.registerHandler(this);
+  }
+
+  /**
+   * Initialize content in the iframe.
+   * Override in subclass.
+   * @param {HTMLIFrameElement} iframe - The content iframe
+   * @param {string} startUrl - URL to the content entry point
+   * @param {object} options - Initialization options
+   * @param {string} options.contentNamespace - Namespace for content storage
+   * @returns {Promise<void>}
+   */
+  // eslint-disable-next-line no-unused-vars
+  async init(iframe, startUrl, options) {
+    throw new Error('Subclass must implement init()');
+  }
+
+  /**
+   * Clean up resources when content is unloaded.
+   * Override in subclass if cleanup is needed.
+   */
+  destroy() {}
+
+  /**
+   * Called by sandbox to initialize shims on the content window.
+   * @param {Window} contentWindow - The iframe's content window
+   * @param {object} options - Initialization options
+   * @param {string} options.contentNamespace - Namespace for content storage
+   * @private
+   */
+  _initializeShims(contentWindow, { contentNamespace } = {}) {
+    for (const shim of Object.values(this.shims)) {
+      try {
+        shim.iframeInitialize(contentWindow, { contentNamespace });
+      } catch (e) {
+        console.error(`Failed to initialize shim ${shim.constructor.shimName}:`, e); // eslint-disable-line no-console
+      }
+    }
+  }
+
+  /**
+   * Called by sandbox when the content is torn down, to unsubscribe the shims.
+   * Separate from destroy(), which subclasses override to release their own resources.
+   * @private
+   */
+  _destroyShims() {
+    for (const shim of Object.values(this.shims)) {
+      shim.destroy();
+    }
+  }
+
+  /**
+   * Restore state data to shims.
+   * @param {object} data - State data keyed by shim name
+   */
+  setData(data) {
+    if (!data) return;
+    for (const [name, shimData] of Object.entries(data)) {
+      if (this.shims[name]) {
+        this.shims[name].setData(shimData);
+      }
+    }
+  }
+
+  /**
+   * Set user data on all shims.
+   * @param {object} userData - User data object
+   */
+  setUserData(userData) {
+    for (const shim of Object.values(this.shims)) {
+      shim.setUserData(userData);
+    }
+  }
+
+  /**
+   * Propagate the server-corrected clock to every shim.
+   * @param {number|Date} now - Current server time
+   */
+  setNow(now) {
+    for (const shim of Object.values(this.shims)) {
+      shim.setNow(now);
+    }
+  }
+
+  /**
+   * Get list of registered shim names, and of those that consume user data.
+   * @returns {object} Registration info with shim names
+   */
+  getRegistration() {
+    return {
+      shims: Object.keys(this.shims),
+      userDataShims: Object.entries(this.shims)
+        .filter(([, shim]) => shim.consumesUserData)
+        .map(([name]) => name),
+    };
+  }
+}
+
+export default SandboxHandler;
diff --git a/packages/kolibri-sandbox/src/SandboxShim.js b/packages/kolibri-sandbox/src/SandboxShim.js
new file mode 100644
index 00000000000..f0b65f7416f
--- /dev/null
+++ b/packages/kolibri-sandbox/src/SandboxShim.js
@@ -0,0 +1,209 @@
+/**
+ * Base class for sandbox shims.
+ *
+ * Shims provide API compatibility layers for content running in the sandbox.
+ * For example, xAPI or SCORM shims allow content to use these APIs while
+ * the sandbox intercepts and handles the calls.
+ *
+ * Usage:
+ *   import SandboxShim from 'kolibri-sandbox/SandboxShim';
+ *
+ *   export class MyShim extends SandboxShim {
+ *     static shimName = 'myShim';
+ *
+ *     static events = { MYEVENT: 'myevent' };
+ *
+ *     iframeInitialize(contentWindow) {
+ *       contentWindow.myAPI = { ... };
+ *     }
+ *   }
+ */
+import { events } from './base';
+
+/**
+ * @typedef {import('./mediator').default} Mediator
+ */
+
+export class SandboxShim {
+  /**
+   * Unique identifier for this shim.
+   * Must be overridden in subclass.
+   * @type {string}
+   */
+  static shimName = null;
+
+  /**
+   * Whether this shim does anything with the learner's user data. Main only sends
+   * USERDATAUPDATE to the shims that declare it, so it isn't broadcast to every
+   * shim on every tick.
+   * @type {boolean}
+   */
+  static consumesUserData = false;
+
+  /**
+   * Events this shim exchanges with its content, beyond the shared set in base.js.
+   * Merged into `this.events`, which on() and off() validate against, so a shim can
+   * subscribe to an event that means nothing outside its own namespace.
+   * @type {object}
+   */
+  static events = {};
+
+  /**
+   * Wire the shim to the mediator.
+   * @param {Mediator} mediator - The mediator instance for message passing
+   */
+  constructor(mediator) {
+    this.__mediator = mediator;
+    this.events = Object.assign({}, events, this.constructor.events);
+    this.__nowDiff = 0;
+    // Everything a shim subscribes to goes through on(), so recording here is what
+    // lets destroy() unsubscribe a shim whose own events we know nothing about.
+    this.__subscriptions = [];
+
+    if (!this.constructor.shimName) {
+      throw new Error(`${this.constructor.name} must define static shimName`);
+    }
+
+    // Use shimName as the namespace for message passing
+    this.nameSpace = this.constructor.shimName;
+
+    // State persisted by Kolibri between sessions, and the learner's user data. A
+    // shim that computes either rather than storing it declares accessors instead,
+    // as Cookie does - its live jar holds more than it persists.
+    this.data = {};
+    this.userData = {};
+
+    // Every shim stores both the same way, so subscribe here rather than leaving
+    // each subclass to remember to. Subclasses that need to do more than store what
+    // they are handed override __setData or __setUserData.
+    this.__setData = this.__setData.bind(this);
+    this.__setUserData = this.__setUserData.bind(this);
+    this.on(this.events.STATEUPDATE, this.__setData);
+    this.on(this.events.USERDATAUPDATE, this.__setUserData);
+  }
+
+  /**
+   * Initialize the shim on the content window.
+   * Override in subclass to patch APIs on the content window.
+   *
+   * Install unconditionally. This runs before the content's own scripts, so a
+   * shim that returns early because some backing state is not ready yet leaves
+   * the content permanently unshimmed, with no error at the point of failure.
+   * Resolve backing state at access time instead — via a getter or accessor on
+   * the installed API — and throw there if it is genuinely missing.
+   * @param {Window} contentWindow - Window object to patch the shim's APIs onto
+   * @param {object} options - Initialization options
+   * @param {string} options.contentNamespace - Namespace for content storage
+   */
+  // eslint-disable-next-line no-unused-vars
+  iframeInitialize(contentWindow, options) {
+    // Default implementation does nothing
+    // Subclasses should override to set up their APIs
+  }
+
+  /**
+   * Unsubscribe the shim. The mediator outlives the shim - a handler swap replaces
+   * the shims but not the mediator they registered on - so a shim left subscribed
+   * keeps taking state pushed for its successor.
+   */
+  destroy() {
+    for (const { event, callback } of this.__subscriptions) {
+      this.off(event, callback);
+    }
+    this.__subscriptions = [];
+  }
+
+  /**
+   * Optional: Return progress calculated by this shim.
+   * @returns {number|null} Progress value between 0 and 1, or null if not applicable
+   */
+  getProgress() {
+    return null;
+  }
+
+  /**
+   * Handler for state pushed from main. A shim that needs to do more than store what
+   * it is handed, or that computes its state rather than holding it, declares a `data`
+   * setter - see Cookie and BaseStorage. Override this only to refuse the restore
+   * outright, as SessionStorage does.
+   * @param {object} data - This shim's persisted state
+   */
+  __setData(data = {}) {
+    this.data = data;
+  }
+
+  setData(data) {
+    this.__setData(data);
+    this.stateUpdated();
+  }
+
+  /**
+   * Handler for user data pushed from main. As with __setData, customise through a
+   * `userData` setter rather than overriding this.
+   * @param {object} userData - The learner's user data
+   */
+  __setUserData(userData = {}) {
+    this.userData = userData;
+  }
+
+  setUserData(data) {
+    this.__setUserData(data);
+  }
+
+  /**
+   * Whether this shim consumes user data, so main can address it selectively.
+   * @returns {boolean}
+   */
+  get consumesUserData() {
+    return this.constructor.consumesUserData;
+  }
+
+  // Because we are persisting data across multiple client devices
+  // it can be helpful to have a single source of truth for timestamps
+  // that we persist. As such, we allow the setting of a time difference
+  // to allow our Hashi internal timestamps to be set relative to the
+  // current time on the Kolibri server.
+  // This may be no more accurate than the time on the client device,
+  // but at least it is consistent across client devices.
+  __now() {
+    return new Date(Date.now() + this.__nowDiff);
+  }
+
+  setNow(now) {
+    this.__nowDiff = new Date(now).getTime() - Date.now();
+  }
+
+  sendMessage(event, data) {
+    this.__mediator.sendMessage({ nameSpace: this.nameSpace, event, data });
+  }
+
+  on(event, callback) {
+    if (!Object.values(this.events).includes(event)) {
+      throw ReferenceError(`${event} is not a valid event name for ${this.nameSpace}`);
+    }
+    this.__mediator.registerMessageHandler({ nameSpace: this.nameSpace, event, callback });
+    this.__subscriptions.push({ event, callback });
+  }
+
+  off(event, callback) {
+    if (!Object.values(this.events).includes(event)) {
+      throw ReferenceError(`${event} is not a valid event name for ${this.nameSpace}`);
+    }
+    this.__mediator.removeMessageHandler({ nameSpace: this.nameSpace, event, callback });
+  }
+
+  /**
+   * Send state update to main client.
+   * Always sends { state }, with optional progress if getProgress() returns non-null.
+   */
+  stateUpdated() {
+    const data = { state: this.data };
+    const progress = this.getProgress();
+    if (progress !== null) {
+      data.progress = progress;
+    }
+    this.sendMessage(this.events.STATEUPDATE, data);
+  }
+}
+
+export default SandboxShim;
diff --git a/packages/kolibri-sandbox/src/base.js b/packages/kolibri-sandbox/src/base.js
index 3bc46235e3e..e86968fa8bf 100644
--- a/packages/kolibri-sandbox/src/base.js
+++ b/packages/kolibri-sandbox/src/base.js
@@ -4,13 +4,11 @@ export const events = {
   IFRAMEREADY: 'iframeready',
   STATEUPDATE: 'stateupdate',
   USERDATAUPDATE: 'userdataupdate',
-  DATAREQUESTED: 'datarequested',
   COLLECTIONREQUESTED: 'collectionrequested',
   COLLECTIONPAGEREQUESTED: 'collectionpagerequested',
   MODELREQUESTED: 'modelrequested',
   SEARCHRESULTREQUESTED: 'searchresultrequested',
   DATARETURNED: 'datareturned',
-  KOLIBRIDATARETURNED: 'kolibridatareturned',
   NAVIGATETO: 'navigateTo',
   CONTEXT: 'context',
   THEMECHANGED: 'themechanged',
@@ -18,22 +16,9 @@ export const events = {
   CHANNELMETADATAREQUESTED: 'channelmetadatarequested',
   CHANNELFILTEROPTIONSREQUESTED: 'channelfilteroptionsrequested',
   RANDOMCOLLECTIONREQUESTED: 'randomcollectionrequested',
-  NOW: 'now',
-  RESIZE: 'resize',
   LOADING: 'loading',
   ERROR: 'error',
-  BLOOMPAGESREAD: 'Pages Read',
-};
-
-export const DataTypes = {
-  MODEL: 'Model',
-  SEARCHRESULT: 'SearchResult',
-  COLLECTION: 'Collection',
-  COLLECTIONPAGE: 'CollectionPage',
-  KOLIBRIVERSION: 'KolibriVersion',
-  CHANNELMETADATA: 'ChannelMetadata',
-  CHANNELFILTEROPTIONS: 'ChannelFilterOptions',
-  RANDOMCOLLECTION: 'RandomCollection',
+  HANDLER_REGISTRATION: 'handlerregistration',
 };
 
 export const MessageStatuses = {
diff --git a/packages/kolibri-sandbox/src/baseShim.js b/packages/kolibri-sandbox/src/baseShim.js
deleted file mode 100644
index 530d49f06e2..00000000000
--- a/packages/kolibri-sandbox/src/baseShim.js
+++ /dev/null
@@ -1,69 +0,0 @@
-import { events } from './base';
-
-export default class BaseShim {
-  constructor(mediator) {
-    this.__mediator = mediator;
-    this.events = Object.assign({}, events);
-    this.__nowDiff = 0;
-    this.__setNowDiff = this.__setNowDiff.bind(this);
-    this.on(this.events.NOW, this.__setNowDiff);
-  }
-
-  setData(data) {
-    this.__setData(data);
-    this.stateUpdated();
-  }
-
-  setUserData(data) {
-    if (this.__setUserData) {
-      this.__setUserData(data);
-      this.userDataUpdated();
-    }
-  }
-
-  // Because we are persisting data across multiple client devices
-  // it can be helpful to have a single source of truth for timestamps
-  // that we persist. As such, we allow the setting of a time difference
-  // to allow our Hashi internal timestamps to be set relative to the
-  // current time on the Kolibri server.
-  // This may be no more accurate than the time on the client device,
-  // but at least it is consistent across client devices.
-  __now() {
-    return new Date(Date.now() + this.__nowDiff);
-  }
-
-  __setNowDiff(nowDiff) {
-    this.__nowDiff = nowDiff;
-  }
-
-  setNow(now) {
-    this.__setNowDiff(new Date(now).getTime() - Date.now());
-    this.sendMessage(this.events.NOW, this.__nowDiff);
-  }
-
-  sendMessage(event, data) {
-    this.__mediator.sendMessage({ nameSpace: this.nameSpace, event, data });
-  }
-
-  on(event, callback) {
-    if (!Object.values(this.events).includes(event)) {
-      throw ReferenceError(`${event} is not a valid event name for ${this.nameSpace}`);
-    }
-    this.__mediator.registerMessageHandler({ nameSpace: this.nameSpace, event, callback });
-  }
-
-  off(event, callback) {
-    if (!Object.values(this.events).includes(event)) {
-      throw ReferenceError(`${event} is not a valid event name for ${this.nameSpace}`);
-    }
-    this.__mediator.removeMessageHandler({ nameSpace: this.nameSpace, event, callback });
-  }
-
-  stateUpdated() {
-    this.sendMessage(this.events.STATEUPDATE, this.data);
-  }
-
-  userDataUpdated() {
-    this.sendMessage(this.events.USERDATAUPDATE, this.userData);
-  }
-}
diff --git a/packages/kolibri-sandbox/src/baseStorage.js b/packages/kolibri-sandbox/src/baseStorage.js
index 1ab70ed3161..9785e303e09 100644
--- a/packages/kolibri-sandbox/src/baseStorage.js
+++ b/packages/kolibri-sandbox/src/baseStorage.js
@@ -4,7 +4,7 @@
  *
  * For more information, see: https://developer.mozilla.org/en-US/docs/Web/API/Storage
  */
-import BaseShim from './baseShim';
+import { SandboxShim } from './SandboxShim';
 
 // List out all the keys that exist on the shim itself to
 // prevent accidental overwriting.
@@ -12,14 +12,18 @@ import BaseShim from './baseShim';
 // of object membership with 'in'
 const internalKeys = ['length', 'key', 'getItem', 'setItem', 'removeItem', 'clear'];
 
-export default class BaseStorage extends BaseShim {
-  constructor(mediator) {
-    super(mediator);
-    this.data = {};
+export default class BaseStorage extends SandboxShim {
+  /*
+   * The content reads and writes an object we hand it, rather than going through
+   * getItem/setItem, so the two have to be kept in step: every assignment to our
+   * state is pushed onto that object.
+   */
+  get data() {
+    return this.__data;
   }
 
-  __setData(data = {}) {
-    this.data = data;
+  set data(data) {
+    this.__data = data;
     this.setDataToShim();
   }
 
@@ -50,7 +54,7 @@ export default class BaseStorage extends BaseShim {
       }
     });
     if (updated) {
-      this.__setData(updatedData);
+      this.data = updatedData;
       this.stateUpdated();
     }
   }
diff --git a/packages/kolibri-sandbox/src/cookie.js b/packages/kolibri-sandbox/src/cookie.js
index 5e4b75ab386..5e34e9ede5f 100644
--- a/packages/kolibri-sandbox/src/cookie.js
+++ b/packages/kolibri-sandbox/src/cookie.js
@@ -4,28 +4,18 @@
  *
  * For more information, see: https://developer.mozilla.org/en-US/docs/Web/API/document/cookie
  */
-import BaseShim from './baseShim';
+import { SandboxShim } from './SandboxShim';
 
 // Value to set on expires that will prevent this data from being persisted
 const sessionOnly = 'session';
 
-export default class Cookie extends BaseShim {
+export default class Cookie extends SandboxShim {
+  static shimName = 'cookie';
+
   constructor(mediator) {
     super(mediator);
-    this.nameSpace = 'cookie';
-    this.__clearData();
-    this.__setData = this.__setData.bind(this);
     this.__getCookies = this.__getCookies.bind(this);
     this.__setItem = this.__setItem.bind(this);
-    this.on(this.events.STATEUPDATE, this.__setData);
-  }
-
-  __clearData() {
-    const defaultData = {
-      rootCookies: {},
-      byPath: {},
-    };
-    this.__data = Object.assign({}, defaultData);
   }
 
   __removeExpiredCookies(data) {
@@ -54,14 +44,6 @@ export default class Cookie extends BaseShim {
     return output;
   }
 
-  __setData(data) {
-    if (data && data.rootCookies && data.byPath) {
-      this.__data = this.__removeExpiredCookies(data);
-    } else {
-      this.__clearData();
-    }
-  }
-
   iframeInitialize(contentWindow) {
     Object.defineProperty(contentWindow.document, this.nameSpace, {
       get: this.__getCookies,
@@ -74,6 +56,18 @@ export default class Cookie extends BaseShim {
     });
   }
 
+  /*
+   * The live cookie jar holds session-only cookies, which must not outlive the
+   * session, so what we store and what we hand over to be persisted differ. Anything
+   * restored to us has been sitting in the database, so drop what expired in between.
+   */
+  set data(data) {
+    this.__data =
+      data && data.rootCookies && data.byPath
+        ? this.__removeExpiredCookies(data)
+        : { rootCookies: {}, byPath: {} };
+  }
+
   get data() {
     // Return data that should be persisted across sessions
     const data = {
diff --git a/packages/kolibri-sandbox/src/handlerLoader.js b/packages/kolibri-sandbox/src/handlerLoader.js
new file mode 100644
index 00000000000..41cfaae380e
--- /dev/null
+++ b/packages/kolibri-sandbox/src/handlerLoader.js
@@ -0,0 +1,48 @@
+/**
+ * Utilities for loading handlers in the sandbox environment.
+ */
+
+/**
+ * @typedef {import('./iframeClient').default} SandboxEnvironment
+ */
+
+/**
+ * Load a handler script from a URL and wait for it to register.
+ * @param {string} url - URL to the handler script
+ * @param {SandboxEnvironment} sandbox - The sandbox environment the handler registers into
+ * @param {number} timeout - Timeout in milliseconds
+ * @returns {Promise<void>}
+ */
+export function loadHandler(url, sandbox, timeout = 10000) {
+  return new Promise((resolve, reject) => {
+    const script = document.createElement('script');
+    script.src = url;
+
+    // Release the script tag and resolver on every terminal path, so
+    // re-invoking loadHandler on content navigation doesn't leak either.
+    const cleanup = () => {
+      clearTimeout(timeoutId);
+      sandbox._handlerRegistrationResolver = null;
+      script.remove();
+    };
+
+    const timeoutId = setTimeout(() => {
+      cleanup();
+      reject(new Error(`Handler registration timeout after ${timeout}ms`));
+    }, timeout);
+
+    // Store resolver so registerHandler can call it
+    sandbox._handlerRegistrationResolver = () => {
+      cleanup();
+      resolve();
+    };
+
+    script.onerror = () => {
+      cleanup();
+      reject(new Error(`Failed to load handler script: ${url}`));
+    };
+    document.head.appendChild(script);
+  });
+}
+
+export default { loadHandler };
diff --git a/packages/kolibri-sandbox/src/iframe.html b/packages/kolibri-sandbox/src/iframe.html
index eddc7885bd9..587a66d97ed 100644
--- a/packages/kolibri-sandbox/src/iframe.html
+++ b/packages/kolibri-sandbox/src/iframe.html
@@ -5,7 +5,7 @@
         <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <meta name="google" content="notranslate">
-        <meta http-equiv="Content-Security-Policy" content="default-src 'self' 'unsafe-inline' 'unsafe-eval' data: blob:">
+        <meta http-equiv="Content-Security-Policy" content="default-src 'self' 'unsafe-inline' 'unsafe-eval' data: blob:<%= devCSP %>">
     </head>
     <body style="margin: 0; padding: 0;">
         <% for (var chunk in htmlWebpackPlugin.files.chunks) { %>
diff --git a/packages/kolibri-sandbox/src/iframeClient.js b/packages/kolibri-sandbox/src/iframeClient.js
index 852a65c8b9e..3a9d8e067fd 100644
--- a/packages/kolibri-sandbox/src/iframeClient.js
+++ b/packages/kolibri-sandbox/src/iframeClient.js
@@ -1,14 +1,10 @@
 import Mediator from './mediator';
-import LocalStorage from './localStorage';
-import SessionStorage from './sessionStorage';
-import Cookie from './cookie';
-import SCORM from './SCORM';
-import Kolibri from './kolibri';
-import patchIndexedDB from './patchIndexedDB';
 import { events, nameSpace } from './base';
-import H5P from './H5P/H5PInterface';
-import xAPI from './xAPI/xAPIInterface';
-import Bloom from './Bloom/BloomInterface';
+import { loadHandler } from './handlerLoader';
+
+/**
+ * @typedef {import('./SandboxHandler').default} SandboxHandler
+ */
 
 const logging = console; //eslint-disable-line no-console
 
@@ -18,6 +14,9 @@ const logging = console; //eslint-disable-line no-console
  * inside a sandboxed iframe context, and communicates persistent data
  * via window.postMessage, to allow for persistence between sessions
  * without violating Same-Origin policies.
+ *
+ * Content-type specific handling (H5P, Bloom, etc.) is done via pluggable
+ * handlers loaded dynamically based on content type.
  */
 export default class SandboxEnvironment {
   constructor() {
@@ -25,38 +24,28 @@ export default class SandboxEnvironment {
     // this window (i.e. the iframe parent)
     this.mediator = new Mediator(window.parent);
 
-    this.localStorage = new LocalStorage(this.mediator);
-
-    this.sessionStorage = new SessionStorage(this.mediator);
-
-    this.cookie = new Cookie(this.mediator);
-
-    this.kolibri = new Kolibri(this.mediator);
-
-    this.SCORM = new SCORM(this.mediator);
-
-    this.H5P = new H5P(this.mediator);
+    this.lastSentHeight = null;
 
-    this.Bloom = new Bloom(this.mediator);
+    // Handler state for pluggable handler system
+    this.handler = null;
+    this._handlerRegistrationResolver = null;
 
-    this.xAPI = new xAPI(this.mediator);
+    // The build in flight, and the handler it is building, so createIframe can
+    // serialise against it.
+    this._building = null;
+    this._buildingHandlerUrl = null;
 
-    this.lastSentHeight = null;
-
-    // We initialize SCORM here, as the usual place for SCORM
-    // to look for its API is window.parent.
-    this.SCORM.iframeInitialize(window);
+    // Expose self globally for handler self-registration
+    window.SandboxEnvironment = this;
 
     this.createIframe = this.createIframe.bind(this);
 
     this.mediator.registerMessageHandler({
       nameSpace,
       event: events.MAINREADY,
-      // Get all script tags that have been wrapped in templates
-      // by the backend, and then execute them in order.
-      // This causes any script execution to be deferred until Hashi has
-      // initalized the local environment.
-      callback: this.createIframe,
+      callback: data => {
+        this.createIframe(data);
+      },
     });
 
     // Set up a listener for a ready check event.
@@ -68,28 +57,41 @@ export default class SandboxEnvironment {
       },
     });
 
-    // At this point we are ready, so send the message, in case we misssed the
+    // At this point we are ready, so send the message, in case we missed the
     // the ready check request.
     this.mediator.sendMessage({ nameSpace, event: events.IFRAMEREADY, data: true });
   }
 
+  /**
+   * Called by SandboxHandler constructor to register itself.
+   * @param {SandboxHandler} handler - The handler instance registering itself
+   */
+  registerHandler(handler) {
+    this.handler = handler;
+
+    // Resolve any pending registration promise from loadHandler
+    if (this._handlerRegistrationResolver) {
+      this._handlerRegistrationResolver();
+      this._handlerRegistrationResolver = null;
+    }
+  }
+
+  /**
+   * Install the handler's shims on the content window.
+   * @param {Window} contentWindow - The calling window
+   */
   initializeIframe(contentWindow) {
-    // Only do anything if the contentWindow is the contentWindow of our
-    // iframe - this is to prevent other generated iframes from doing anything here.
-    if (contentWindow === this.iframe.contentWindow) {
-      // Initialize the local storage
-      try {
-        this.localStorage.iframeInitialize(this.iframe.contentWindow);
-        this.sessionStorage.iframeInitialize(this.iframe.contentWindow);
-        this.cookie.iframeInitialize(this.iframe.contentWindow);
-        this.kolibri.iframeInitialize(this.iframe.contentWindow);
-        this.H5P.iframeInitialize(this.iframe.contentWindow);
-        this.xAPI.iframeInitialize(this.iframe.contentWindow);
-        patchIndexedDB(this.contentNamespace, this.iframe.contentWindow);
-      } catch (e) {
-        logging.debug(e);
-        logging.log('Shimming storage APIs failed, data will not persist');
-      }
+    // Ignore any other iframes the content may have generated.
+    if (!this.handler || !this.iframe || contentWindow !== this.iframe.contentWindow) {
+      return;
+    }
+    try {
+      this.handler._initializeShims(contentWindow, {
+        contentNamespace: this.contentNamespace,
+      });
+    } catch (e) {
+      logging.debug(e);
+      logging.log('Shimming APIs failed, data will not persist');
     }
   }
 
@@ -98,11 +100,51 @@ export default class SandboxEnvironment {
       document.body.removeChild(this.iframe);
     } catch (e) {} // eslint-disable-line no-empty
     this.lastSentHeight = null;
+    if (this.handler) {
+      this.handler.destroy();
+      // The shims registered on our mediator, which outlives them, so they have to
+      // be unsubscribed or they keep taking the next handler's state.
+      this.handler._destroyShims();
+      this.handler = null;
+    }
+  }
+
+  /**
+   * Build the iframe for a piece of content, one build at a time.
+   *
+   * Main re-sends MAINREADY on every IFRAMEREADY, so the same build arrives more
+   * than once, and content can change while a build is still in flight. Both would
+   * otherwise interleave inside _buildIframe's awaits: the earlier run resumes to
+   * find this.iframe and this.handler replaced, and initializes its successor's
+   * iframe. So drop an exact repeat, and let a build finish before replacing it.
+   * @param {object} options - Options as sent with MAINREADY
+   * @returns {Promise<void>} Resolves when the content has loaded, or failed to
+   */
+  async createIframe(options = {}) {
+    while (this._building) {
+      if (options.handlerUrl === this._buildingHandlerUrl) {
+        return this._building;
+      }
+      await this._building;
+    }
+    this._buildingHandlerUrl = options.handlerUrl ?? null;
+    this._building = this._buildIframe(options).finally(() => {
+      this._building = null;
+      this._buildingHandlerUrl = null;
+    });
+    return this._building;
   }
 
-  createIframe({ contentNamespace, startUrl = '' } = {}) {
+  async _buildIframe({
+    contentNamespace,
+    startUrl = '',
+    handlerUrl = null,
+    contentState = {},
+    userData = {},
+    now = null,
+  } = {}) {
     if (this.iframe) {
-      this.clearIframe(this.iframe);
+      this.clearIframe();
     }
     this.contentNamespace = contentNamespace;
     this.iframe = document.createElement('iframe');
@@ -113,26 +155,61 @@ export default class SandboxEnvironment {
     this.iframe.style.width = '100%';
     this.iframe.height = '100%';
     document.body.appendChild(this.iframe);
-    const baseUrl = startUrl.split('?')[0];
     this.mediator.sendMessage({ nameSpace, event: events.LOADING, data: true });
-    if (baseUrl.endsWith('.h5p')) {
-      this.H5P.init(this.iframe, startUrl);
-    } else if (baseUrl.endsWith('bloompub') || baseUrl.endsWith('bloomd')) {
-      this.Bloom.init(this.iframe, startUrl);
-    } else {
-      this.iframe.onload = () => {
-        const error = this.iframe.contentDocument.head.querySelector('meta[name="sandbox-error"]');
-        if (error) {
-          this.mediator.sendMessage({
-            nameSpace,
-            event: events.ERROR,
-            data: { message: error.getAttribute('content'), error: 'LOADING_ERROR' },
-          });
-        } else {
-          this.mediator.sendMessage({ nameSpace, event: events.LOADING, data: false });
-        }
-      };
-      this.iframe.src = startUrl;
+
+    try {
+      // Load the content-type specific handler
+      if (!handlerUrl) {
+        throw new Error('handlerUrl is required - each content type must provide its own handler');
+      }
+
+      await loadHandler(handlerUrl, this);
+      if (!this.handler) {
+        throw new Error('Handler script loaded but did not register');
+      }
+
+      // Emit registration BEFORE loading content (security: establish contract first)
+      const registration = this.handler.getRegistration();
+      this.mediator.sendMessage({
+        nameSpace,
+        event: events.HANDLER_REGISTRATION,
+        data: registration,
+      });
+
+      if (now != null) {
+        this.handler.setNow(now);
+      }
+
+      // Restore the saved session before the content loads, so the shims already
+      // hold it by the time the content's own scripts read them.
+      this.handler.setData(contentState);
+      this.handler.setUserData(userData);
+
+      // Initialize content via handler - handler is responsible for setting iframe.src
+      // and returning a promise that resolves when content is loaded
+      await this.handler.init(this.iframe, startUrl, { contentNamespace });
+
+      // Only readable while contentWindow is live; a transiently-null window
+      // just means no error meta, not that loading should hang.
+      const error = this.iframe.contentWindow
+        ? this.iframe.contentDocument?.head?.querySelector('meta[name="sandbox-error"]')
+        : null;
+      if (error) {
+        this.mediator.sendMessage({
+          nameSpace,
+          event: events.ERROR,
+          data: { message: error.getAttribute('content'), error: 'LOADING_ERROR' },
+        });
+      } else {
+        this.mediator.sendMessage({ nameSpace, event: events.LOADING, data: false });
+      }
+    } catch (e) {
+      logging.error('Handler loading/initialization failed:', e);
+      this.mediator.sendMessage({
+        nameSpace,
+        event: events.ERROR,
+        data: { message: e.message, error: 'HANDLER_ERROR' },
+      });
     }
   }
 }
diff --git a/packages/kolibri-sandbox/src/indexedDBShim.js b/packages/kolibri-sandbox/src/indexedDBShim.js
new file mode 100644
index 00000000000..2d413638e79
--- /dev/null
+++ b/packages/kolibri-sandbox/src/indexedDBShim.js
@@ -0,0 +1,65 @@
+/**
+ * IndexedDB shim for sandbox environment.
+ * Namespaces IndexedDB database names to isolate content storage.
+ */
+import { SandboxShim } from './SandboxShim';
+
+export default class IndexedDBShim extends SandboxShim {
+  static shimName = 'indexedDB';
+
+  constructor(mediator) {
+    super(mediator);
+    this.contentNamespace = null;
+  }
+
+  /**
+   * Prefix for this content's database names.
+   * Resolved per access, so a missing namespace surfaces where it is used.
+   * @returns {string} The namespace prefix
+   */
+  get __nameSpacePrefix() {
+    if (!this.contentNamespace) {
+      // Falling back to unprefixed names would leak databases between content.
+      throw new Error('IndexedDB accessed before the content namespace was set');
+    }
+    return `${this.contentNamespace}-`;
+  }
+
+  iframeInitialize(contentWindow, { contentNamespace } = {}) {
+    this.contentNamespace = contentNamespace ?? null;
+    const originalIndexDB = contentWindow.indexedDB;
+    const self = this;
+
+    const Shim = {
+      open(databaseName, version) {
+        return originalIndexDB.open(self.__nameSpacePrefix + databaseName, version);
+      },
+      deleteDatabase(databaseName) {
+        return originalIndexDB.deleteDatabase(self.__nameSpacePrefix + databaseName);
+      },
+      cmp(first, second) {
+        return originalIndexDB.cmp(first, second);
+      },
+      databases() {
+        const nameSpacePrefix = self.__nameSpacePrefix;
+        return originalIndexDB.databases().then(databases => {
+          return databases
+            .filter(database => {
+              return database.name.indexOf(nameSpacePrefix) === 0;
+            })
+            .map(database => {
+              return {
+                ...database,
+                name: database.name.replace(nameSpacePrefix, ''),
+              };
+            });
+        });
+      },
+    };
+
+    Object.defineProperty(contentWindow, 'indexedDB', {
+      value: Shim,
+      configurable: true,
+    });
+  }
+}
diff --git a/packages/kolibri-sandbox/src/kolibri.js b/packages/kolibri-sandbox/src/kolibri.js
index 64fe623470a..c5b6474a28b 100644
--- a/packages/kolibri-sandbox/src/kolibri.js
+++ b/packages/kolibri-sandbox/src/kolibri.js
@@ -2,9 +2,8 @@
  * This class offers an API interface for interacting directly with the Kolibri app
  * that the HTML5 app is embedded within
  */
-import BaseShim from './baseShim';
-import Mediator from './mediator';
-import { events, nameSpace, DataTypes } from './base';
+import { SandboxShim } from './SandboxShim';
+import { events, nameSpace } from './base';
 
 /**
  * Type definition for Language metadata.
@@ -89,13 +88,12 @@ import { events, nameSpace, DataTypes } from './base';
  * generate links externally to jump to this state
  */
 
-export default class Kolibri extends BaseShim {
-  constructor(mediator) {
-    super(mediator);
-    this.data = {};
-    this.nameSpace = 'kolibri';
-    this.mediator = new Mediator(window.parent);
-  }
+export default class Kolibri extends SandboxShim {
+  static shimName = 'kolibri';
+
+  // Unlike other shims, these are request/reply calls on the base sandbox namespace -
+  // main listens for them directly (MainClient.on) rather than through the shim state
+  // plumbing - so they go via the mediator instead of SandboxShim.sendMessage.
 
   iframeInitialize(contentWindow) {
     this.__setShimInterface();
@@ -128,9 +126,9 @@ export default class Kolibri extends BaseShim {
        * @return {Promise<PageResult>} - a Promise that resolves to an array of ContentNodes
        */
       getContentByFilter(options) {
-        return self.mediator.sendMessageAwaitReply({
-          event: events.DATAREQUESTED,
-          data: { options, dataType: DataTypes.COLLECTION },
+        return self.__mediator.sendMessageAwaitReply({
+          event: events.COLLECTIONREQUESTED,
+          data: { options },
           nameSpace,
         });
       }
@@ -141,9 +139,9 @@ export default class Kolibri extends BaseShim {
        * @return {Promise<PageResult>} - a Promise that resolves to an array of ContentNodes
        */
       getContentPage(options) {
-        return self.mediator.sendMessageAwaitReply({
-          event: events.DATAREQUESTED,
-          data: { options, dataType: DataTypes.COLLECTIONPAGE },
+        return self.__mediator.sendMessageAwaitReply({
+          event: events.COLLECTIONPAGEREQUESTED,
+          data: { options },
           nameSpace,
         });
       }
@@ -154,9 +152,9 @@ export default class Kolibri extends BaseShim {
        * @return {Promise<ContentNode>} - a Promise that resolves to a ContentNode
        */
       getContentById(id) {
-        return self.mediator.sendMessageAwaitReply({
-          event: events.DATAREQUESTED,
-          data: { id, dataType: DataTypes.MODEL },
+        return self.__mediator.sendMessageAwaitReply({
+          event: events.MODELREQUESTED,
+          data: { id },
           nameSpace,
         });
       }
@@ -171,9 +169,9 @@ export default class Kolibri extends BaseShim {
        * @return {Promise<PageResult>} - a Promise that resolves to an array of ContentNodes
        */
       searchContent(options) {
-        return self.mediator.sendMessageAwaitReply({
-          event: events.DATAREQUESTED,
-          data: { options, dataType: DataTypes.SEARCHRESULT },
+        return self.__mediator.sendMessageAwaitReply({
+          event: events.SEARCHRESULTREQUESTED,
+          data: { options },
           nameSpace,
         });
       }
@@ -188,7 +186,7 @@ export default class Kolibri extends BaseShim {
        * @return {Promise} - a Promise that resolves when the theme has been applied
        */
       themeRenderer(options) {
-        return self.mediator.sendMessageAwaitReply({
+        return self.__mediator.sendMessageAwaitReply({
           event: events.THEMECHANGED,
           data: options,
           nameSpace,
@@ -209,7 +207,7 @@ export default class Kolibri extends BaseShim {
        * @return {Promise} - a Promise that resolves when the navigation has completed
        */
       navigateTo(nodeId, context) {
-        return self.mediator.sendMessageAwaitReply({
+        return self.__mediator.sendMessageAwaitReply({
           event: events.NAVIGATETO,
           data: { nodeId, context },
           nameSpace,
@@ -222,7 +220,7 @@ export default class Kolibri extends BaseShim {
        * @return {Promise} - a Promise that resolves when the context has been updated
        */
       updateContext(context) {
-        return self.mediator.sendMessageAwaitReply({
+        return self.__mediator.sendMessageAwaitReply({
           event: events.CONTEXT,
           data: { context },
           nameSpace,
@@ -235,7 +233,7 @@ export default class Kolibri extends BaseShim {
        * when the context has been updated
        */
       getContext() {
-        return self.mediator.sendMessageAwaitReply({
+        return self.__mediator.sendMessageAwaitReply({
           event: events.CONTEXT,
           data: {},
           nameSpace,
@@ -247,9 +245,9 @@ export default class Kolibri extends BaseShim {
        * @return {Promise<string>} - A version string
        */
       getVersion() {
-        return self.mediator.sendMessageAwaitReply({
-          event: events.DATAREQUESTED,
-          data: { dataType: DataTypes.KOLIBRIVERSION },
+        return self.__mediator.sendMessageAwaitReply({
+          event: events.KOLIBRIVERSIONREQUESTED,
+          data: {},
           nameSpace,
         });
       }
@@ -259,9 +257,9 @@ export default class Kolibri extends BaseShim {
        * @return {Promise<ChannelMetadata>} - a Promise that resolves to ChannelMetadata
        */
       getChannelMetadata() {
-        return self.mediator.sendMessageAwaitReply({
-          event: events.DATAREQUESTED,
-          data: { dataType: DataTypes.CHANNELMETADATA },
+        return self.__mediator.sendMessageAwaitReply({
+          event: events.CHANNELMETADATAREQUESTED,
+          data: {},
           nameSpace,
         });
       }
@@ -271,9 +269,9 @@ export default class Kolibri extends BaseShim {
        * @return {Promise<ChannelFilterOptions>} - a Promise that resolves to ChannelFilterOptions
        */
       getChannelFilterOptions() {
-        return self.mediator.sendMessageAwaitReply({
-          event: events.DATAREQUESTED,
-          data: { dataType: DataTypes.CHANNELFILTEROPTIONS },
+        return self.__mediator.sendMessageAwaitReply({
+          event: events.CHANNELFILTEROPTIONSREQUESTED,
+          data: {},
           nameSpace,
         });
       }
@@ -291,9 +289,9 @@ export default class Kolibri extends BaseShim {
        * @return {Promise<PageResult>} - a Promise that resolves to an array of ContentNodes
        */
       getRandomNodes(options) {
-        return self.mediator.sendMessageAwaitReply({
-          event: events.DATAREQUESTED,
-          data: { options, dataType: DataTypes.RANDOMCOLLECTION },
+        return self.__mediator.sendMessageAwaitReply({
+          event: events.RANDOMCOLLECTIONREQUESTED,
+          data: { options },
           nameSpace,
         });
       }
diff --git a/packages/kolibri-sandbox/src/localStorage.js b/packages/kolibri-sandbox/src/localStorage.js
index 9d6d0093876..bb7fb9d38c5 100644
--- a/packages/kolibri-sandbox/src/localStorage.js
+++ b/packages/kolibri-sandbox/src/localStorage.js
@@ -9,10 +9,5 @@
 import BaseStorage from './baseStorage';
 
 export default class LocalStorage extends BaseStorage {
-  constructor(mediator) {
-    super(mediator);
-    this.nameSpace = 'localStorage';
-    this.__setData = this.__setData.bind(this);
-    this.on(this.events.STATEUPDATE, this.__setData);
-  }
+  static shimName = 'localStorage';
 }
diff --git a/packages/kolibri-sandbox/src/mainClient.js b/packages/kolibri-sandbox/src/mainClient.js
index 07a07861f3d..2be5852b7ff 100644
--- a/packages/kolibri-sandbox/src/mainClient.js
+++ b/packages/kolibri-sandbox/src/mainClient.js
@@ -1,11 +1,5 @@
 import Mediator from './mediator';
-import LocalStorage from './localStorage';
-import Cookie from './cookie';
-import H5P from './H5P/H5PInterface';
-import SCORM from './SCORM';
-import xAPI from './xAPI/xAPIInterface';
-import { events, nameSpace, DataTypes } from './base';
-import Kolibri from './kolibri';
+import { events, nameSpace } from './base';
 
 /*
  * This is the main entry point for interacting with the Hashi library.
@@ -16,25 +10,45 @@ import Kolibri from './kolibri';
  * a contained HTML5 app.
  */
 export default class MainClient {
+  /**
+   * Wrap an iframe hosting a SandboxEnvironment.
+   * @param {object} options - Configuration
+   * @param {HTMLIFrameElement} options.iframe - The iframe to wrap
+   * @param {Function} options.now - Required. Returns the current time; inject the
+   * server-corrected clock (kolibri/utils/serverClock) so shim-written timestamps
+   * stay consistent across clock-skewed devices.
+   */
   constructor({ iframe, now } = {}) {
+    // Checked here rather than at call time: `now()` is only invoked inside a mediator
+    // callback, which swallows the TypeError, so the handshake would hang silently.
+    if (typeof now !== 'function') {
+      throw new TypeError('MainClient requires a `now` function returning the current time');
+    }
     this.events = events;
     this.iframe = iframe;
     this.mediator = new Mediator(this.iframe.contentWindow);
-    this.storage = {
-      localStorage: new LocalStorage(this.mediator),
-      cookie: new Cookie(this.mediator),
-      H5P: new H5P(this.mediator),
-      SCORM: new SCORM(this.mediator),
-      xAPI: new xAPI(this.mediator),
-    };
-    this.kolibri = new Kolibri(this.mediator);
     this.now = now;
     this.ready = false;
     this.contentNamespace = null;
     this.startUrl = null;
-    this.__setData = this.__setData.bind(this);
+    this.handlerUrl = null;
+    this.registration = null;
+    this._shimData = {};
+    this._userData = null;
+    this._iframeProgress = null;
   }
-  initialize(contentState, userData, startUrl, contentNamespace) {
+
+  /**
+   * Initialize content in the sandbox.
+   * @param {object} contentState - Initial content state for storage shims
+   * @param {object} userData - User data object with userId, userFullName, progress, etc.
+   * @param {string} startUrl - URL to the content entry point
+   * @param {string} contentNamespace - Namespace for content storage (usually file checksum)
+   * @param {object} options - Additional options
+   * @param {string} [options.handlerUrl] - URL to a sandbox handler script for pluggable handlers
+   */
+  initialize(contentState, userData, startUrl, contentNamespace, options = {}) {
+    const { handlerUrl = null } = options;
     /*
      * userData should be an object with the following keys, all optional:
      * userId: <user ID>,
@@ -44,11 +58,19 @@ export default class MainClient {
      * timeSpent: <time spent in seconds>,
      * language: <language code>,
      */
-    this.__setData(contentState, userData);
-    this.__setListeners();
+    this._userData = userData ? JSON.parse(JSON.stringify(userData)) : {};
+
+    // Initialize _shimData from contentState
+    this._shimData = {};
+    if (contentState) {
+      for (const [ns, data] of Object.entries(contentState)) {
+        this._shimData[ns] = JSON.parse(JSON.stringify(data));
+      }
+    }
 
     this.contentNamespace = contentNamespace;
     this.startUrl = startUrl;
+    this.handlerUrl = handlerUrl;
 
     this.iframe.style.width = '100%';
 
@@ -59,7 +81,14 @@ export default class MainClient {
     // Set this here so that any time the inner frame declares it is ready
     // it can reinitialize its SandboxEnvironment.
     this.on(this.events.IFRAMEREADY, () => {
-      this.__setData(this.data, this.userData);
+      // Update remote reference - contentWindow may have changed after iframe navigation,
+      // and is transiently null while the document swap is in flight. Bail rather than
+      // clobber the remote with null; the iframe re-announces once it settles.
+      const contentWindow = this.iframe.contentWindow;
+      if (!contentWindow) {
+        return;
+      }
+      this.mediator.remote = contentWindow;
       this.ready = true;
       this.mediator.sendMessage({
         nameSpace,
@@ -67,54 +96,54 @@ export default class MainClient {
         data: {
           contentNamespace,
           startUrl,
+          handlerUrl,
+          // Send current accumulated state, not the original contentState
+          contentState: this._shimData,
+          userData: this._userData,
+          now: this.now(),
         },
       });
     });
     this.mediator.sendMessage({ nameSpace, event: events.READYCHECK, data: true });
 
-    // This group of functions and events is for the custom channels work
-    // They each fetch data from the kolibri database and return it to
-    // the iframe
-    this.on(this.events.DATAREQUESTED, message => {
-      let event;
-      if (message.dataType === DataTypes.COLLECTION) {
-        event = events.COLLECTIONREQUESTED;
-      } else if (message.dataType === DataTypes.COLLECTIONPAGE) {
-        event = events.COLLECTIONPAGEREQUESTED;
-      } else if (message.dataType === DataTypes.MODEL) {
-        event = events.MODELREQUESTED;
-      } else if (message.dataType === DataTypes.SEARCHRESULT) {
-        event = events.SEARCHRESULTREQUESTED;
-      } else if (message.dataType === DataTypes.KOLIBRIVERSION) {
-        event = events.KOLIBRIVERSIONREQUESTED;
-      } else if (message.dataType === DataTypes.CHANNELMETADATA) {
-        event = events.CHANNELMETADATAREQUESTED;
-      } else if (message.dataType === DataTypes.CHANNELFILTEROPTIONS) {
-        event = events.CHANNELFILTEROPTIONSREQUESTED;
-      } else if (message.dataType === DataTypes.RANDOMCOLLECTION) {
-        event = events.RANDOMCOLLECTIONREQUESTED;
-      }
+    // Handle registration events from iframe
+    this.on(events.HANDLER_REGISTRATION, registration => {
+      this.registration = registration;
+
+      // Set up state update listeners for each registered shim
+      for (const shimName of registration.shims) {
+        if (!this._shimData[shimName]) {
+          this._shimData[shimName] = {};
+        }
+
+        // Repeated IFRAMEREADY re-fires this; drop the prior handler so STATEUPDATE
+        // isn't registered, and emitted, twice.
+        this.mediator.removeMessageHandler({
+          nameSpace: shimName,
+          event: events.STATEUPDATE,
+        });
 
-      if (event) {
-        this.mediator.sendLocalMessage({
-          nameSpace,
-          event,
-          data: message,
+        this.mediator.registerMessageHandler({
+          nameSpace: shimName,
+          event: events.STATEUPDATE,
+          callback: data => {
+            // Data is always { state, progress? }
+            this._shimData[shimName] = data.state;
+            const progress = Number(data.progress);
+            if (!isNaN(progress)) {
+              this._iframeProgress = progress;
+            }
+
+            // Emit local state update event for consumer to receive
+            this.mediator.sendLocalMessage({
+              nameSpace,
+              event: events.STATEUPDATE,
+              data: this.data,
+            });
+          },
         });
       }
     });
-
-    this.on(this.events.DATARETURNED, message => {
-      this.mediator.sendMessage({ nameSpace, event: events.DATARETURNED, data: message });
-    });
-
-    this.on(this.events.NAVIGATETO, message => {
-      this.mediator.sendMessage({ nameSpace, event: events.NAVIGATETO, data: message });
-    });
-
-    this.on(this.events.CONTEXT, message => {
-      this.mediator.sendMessage({ nameSpace, event: events.CONTEXT, data: message });
-    });
   }
 
   updateData({ contentState, userData }) {
@@ -122,60 +151,53 @@ export default class MainClient {
     // Can do this as all contentState that is coming in should be JSON
     // compatible in the first place, if not, we have other problems.
     if (userData) {
-      userData = JSON.parse(JSON.stringify(userData));
-      this.userData = userData;
+      this._userData = JSON.parse(JSON.stringify(userData));
     }
     if (contentState) {
-      contentState = JSON.parse(JSON.stringify(contentState));
+      for (const [ns, data] of Object.entries(contentState)) {
+        this._shimData[ns] = JSON.parse(JSON.stringify(data));
+      }
     }
-    Object.keys(this.storage).forEach(key => {
-      const storage = this.storage[key];
-      if (contentState && contentState[storage.nameSpace]) {
-        storage.setData(contentState[storage.nameSpace]);
+    this._sendDataToShims({ contentState, userData });
+  }
+
+  /*
+   * The shims live inside the iframe, so anything that changes after the MAINREADY
+   * handshake only reaches them by message. Each shim listens on its own namespace,
+   * and its handler takes the bare state/user data - only the shim-to-main direction
+   * wraps state alongside progress.
+   */
+  _sendDataToShims({ contentState, userData }) {
+    const userDataShims = new Set(this.registration?.userDataShims ?? []);
+    for (const shimName of this.registration?.shims ?? []) {
+      if (contentState && shimName in contentState) {
+        this.mediator.sendMessage({
+          nameSpace: shimName,
+          event: events.STATEUPDATE,
+          data: this._shimData[shimName],
+        });
       }
-      if (userData) {
-        storage.setUserData(userData);
+      if (userData && userDataShims.has(shimName)) {
+        this.mediator.sendMessage({
+          nameSpace: shimName,
+          event: events.USERDATAUPDATE,
+          data: this._userData,
+        });
       }
-    });
+    }
   }
 
   getProgress() {
-    // Return any calculated progress from the storage APIs
-    // So far, only the SCORM and xAPI shim supports this
-    // If no progress has been reported, this will be null.
-    const xAPIprogress = this.storage.xAPI.__calculateProgress();
-    if (xAPIprogress !== null) {
-      return xAPIprogress;
-    }
-    return this.storage.SCORM.__calculateProgress();
+    return this._iframeProgress;
   }
 
-  __setData(contentState, userData) {
-    this.updateData({ contentState, userData });
-    if (this.now) {
-      Object.keys(this.storage).forEach(key => {
-        this.storage[key].setNow(this.now());
-      });
-    }
-  }
-  __setListeners() {
-    Object.keys(this.storage).forEach(key => {
-      const storage = this.storage[key];
-      storage.on(events.STATEUPDATE, () => {
-        this.mediator.sendLocalMessage({ nameSpace, event: events.STATEUPDATE, data: this.data });
-      });
-    });
+  get data() {
+    // Return a copy of the shim data to prevent direct access
+    return JSON.parse(JSON.stringify(this._shimData));
   }
 
-  get data() {
-    const data = {};
-    Object.keys(this.storage).forEach(key => {
-      const storage = this.storage[key];
-      // Make a quick copy of the data that is being exposed
-      // to prevent direct access to the stored data.
-      data[storage.nameSpace] = JSON.parse(JSON.stringify(storage.data));
-    });
-    return data;
+  get userData() {
+    return this._userData;
   }
 
   on(event, callback) {
@@ -189,7 +211,9 @@ export default class MainClient {
     this.on(events.STATEUPDATE, callback);
   }
 
-  onUserDataUpdate(callback) {
-    this.on(events.USERDATAUPDATE, callback);
+  // Tear down the mediator's window listener so the client and its accumulated
+  // shim data can be collected.
+  destroy() {
+    this.mediator.destroy();
   }
 }
diff --git a/packages/kolibri-sandbox/src/mediator.js b/packages/kolibri-sandbox/src/mediator.js
index e1565b4f737..bf6ab49e6c0 100644
--- a/packages/kolibri-sandbox/src/mediator.js
+++ b/packages/kolibri-sandbox/src/mediator.js
@@ -15,7 +15,14 @@ class Mediator {
   constructor(remote) {
     this.local = window;
     this.remote = remote;
-    this.local.addEventListener('message', this.handleMessage.bind(this));
+    this.__boundHandleMessage = this.handleMessage.bind(this);
+    this.local.addEventListener('message', this.__boundHandleMessage);
+    this.__messageHandlers = {};
+  }
+
+  // Remove the window message listener and drop all registered handlers.
+  destroy() {
+    this.local.removeEventListener('message', this.__boundHandleMessage);
     this.__messageHandlers = {};
   }
 
@@ -25,8 +32,9 @@ class Mediator {
     if (isUndefined(nameSpace) || isUndefined(event)) {
       return;
     }
-    if (this.__messageHandlers[nameSpace] && this.__messageHandlers[nameSpace][event]) {
-      this.__messageHandlers[nameSpace][event].forEach(callback => {
+    const handlers = this.__messageHandlers[nameSpace]?.[event];
+    if (handlers) {
+      handlers.forEach(callback => {
         try {
           callback(data);
         } catch (e) {
@@ -43,7 +51,12 @@ class Mediator {
     this.local.postMessage({ event, data, nameSpace }, '*');
   }
 
+  // The remote may be transiently null mid-navigation (an iframe's contentWindow is
+  // null while it swaps documents). Drop the message; the handshake retries.
   sendMessage({ event, data, nameSpace }) {
+    if (!this.remote) {
+      return;
+    }
     this.remote.postMessage({ event, data, nameSpace }, '*');
   }
 
diff --git a/packages/kolibri-sandbox/src/patchIndexedDB.js b/packages/kolibri-sandbox/src/patchIndexedDB.js
deleted file mode 100644
index c3306e0a03a..00000000000
--- a/packages/kolibri-sandbox/src/patchIndexedDB.js
+++ /dev/null
@@ -1,39 +0,0 @@
-export default function (namespace, window) {
-  const nameSpacePrefix = `${namespace}-`;
-  const originalIndexDB = window.indexedDB;
-  const Shim = {
-    open(databaseName, version) {
-      const namespacedDatabaseName = nameSpacePrefix + databaseName;
-      return originalIndexDB.open(namespacedDatabaseName, version);
-    },
-    deleteDatabase(databaseName) {
-      const namespacedDatabaseName = nameSpacePrefix + databaseName;
-      return originalIndexDB.deleteDatabase(namespacedDatabaseName);
-    },
-    cmp(first, second) {
-      return originalIndexDB.cmp(first, second);
-    },
-    databases() {
-      return originalIndexDB.databases().then(databases => {
-        return databases
-          .filter(database => {
-            return database.name.indexOf(nameSpacePrefix) === 0;
-          })
-          .map(database => {
-            return {
-              ...database,
-              name: database.name.replace(nameSpacePrefix, ''),
-            };
-          });
-      });
-    },
-  };
-  Shim.open.bind(originalIndexDB);
-  Shim.deleteDatabase.bind(originalIndexDB);
-  Shim.cmp.bind(originalIndexDB);
-  Shim.databases.bind(originalIndexDB);
-  Object.defineProperty(window, 'indexedDB', {
-    value: Shim,
-    configurable: true,
-  });
-}
diff --git a/packages/kolibri-sandbox/src/sessionStorage.js b/packages/kolibri-sandbox/src/sessionStorage.js
index 95afa3b52ac..08b851d1564 100644
--- a/packages/kolibri-sandbox/src/sessionStorage.js
+++ b/packages/kolibri-sandbox/src/sessionStorage.js
@@ -9,13 +9,14 @@
 import BaseStorage from './baseStorage';
 
 export default class SessionStorage extends BaseStorage {
-  constructor(mediator) {
-    super(mediator);
-    this.nameSpace = 'sessionStorage';
+  static shimName = 'sessionStorage';
+
+  // Both directions stubbed, so non-persistence holds here rather than depending on
+  // main never having any state to restore.
+  __setData() {
+    return;
   }
-  // Override the default implementation of stateUpdated to prevent unnecessarily messages
-  // However, as nothing is listening for this in the main client, it wouldn't actually
-  // hurt if this was still transmitting.
+
   stateUpdated() {
     return;
   }
diff --git a/packages/kolibri-sandbox/src/xAPI/xAPIConstants.js b/packages/kolibri-sandbox/src/xAPI/xAPIConstants.js
deleted file mode 100644
index 070dbc2faa5..00000000000
--- a/packages/kolibri-sandbox/src/xAPI/xAPIConstants.js
+++ /dev/null
@@ -1,42 +0,0 @@
-/*
- * xAPI Constants
- */
-
-export const OBJECT_TYPES = {
-  AGENT: 'Agent',
-  GROUP: 'Group',
-  ACTIVITY: 'Activity',
-  STATEMENTREF: 'StatementRef',
-  SUBSTATEMENT: 'SubStatement',
-};
-
-export const ObjectTypeChoices = new Set(Object.values(OBJECT_TYPES));
-
-export const INTERACTION_TYPES = {
-  TRUE_FALSE: 'true-false',
-  CHOICE: 'choice',
-  FILL_IN: 'fill-in',
-  LONG_FILL_IN: 'long-fill-in',
-  MATCHING: 'matching',
-  PERFORMANCE: 'performance',
-  SEQUENCING: 'sequencing',
-  LIKERT: 'likert',
-  NUMERIC: 'numeric',
-  OTHER: 'other',
-};
-
-export const InteractionTypeChoices = new Set(Object.values(INTERACTION_TYPES));
-
-export const interactionOptionsLookup = {
-  choices: new Set([INTERACTION_TYPES.CHOICE, INTERACTION_TYPES.SEQUENCING]),
-  scale: new Set([INTERACTION_TYPES.LIKERT]),
-  source: new Set([INTERACTION_TYPES.MATCHING]),
-  target: new Set([INTERACTION_TYPES.MATCHING]),
-  steps: new Set([INTERACTION_TYPES.PERFORMANCE]),
-};
-
-export const OUTER_DELIMITER = '[,]';
-export const INNER_DELIMITER = '[.]';
-export const RANGE_DELIMITER = '[:]';
-
-export const CMI_INTERACTION = 'http://adlnet.gov/expapi/activities/cmi.interaction';
diff --git a/packages/kolibri-sandbox/test/SandboxHandler.spec.js b/packages/kolibri-sandbox/test/SandboxHandler.spec.js
new file mode 100644
index 00000000000..50e6c25942d
--- /dev/null
+++ b/packages/kolibri-sandbox/test/SandboxHandler.spec.js
@@ -0,0 +1,291 @@
+import { SandboxHandler } from '../src/SandboxHandler';
+import { SandboxShim } from '../src/SandboxShim';
+import { events } from '../src/base';
+
+class TestShim extends SandboxShim {
+  static shimName = 'testShim';
+}
+
+class AnotherShim extends SandboxShim {
+  static shimName = 'anotherShim';
+}
+
+class UserDataShim extends SandboxShim {
+  static shimName = 'userDataShim';
+
+  static consumesUserData = true;
+}
+
+class TestHandler extends SandboxHandler {
+  static shims = [TestShim];
+  async init() {}
+}
+
+class MultiShimHandler extends SandboxHandler {
+  static shims = [TestShim, AnotherShim];
+  async init() {}
+}
+
+class UserDataHandler extends SandboxHandler {
+  static shims = [TestShim, UserDataShim];
+  async init() {}
+}
+
+class BaseShimsHandler extends SandboxHandler {
+  async init() {}
+}
+
+describe('SandboxHandler', () => {
+  describe('setNow', () => {
+    it('should propagate the clock to every shim', () => {
+      const mockSandbox = {
+        mediator: { registerMessageHandler: jest.fn(), sendMessage: jest.fn() },
+        registerHandler: jest.fn(),
+      };
+      const handler = new MultiShimHandler(mockSandbox);
+      const spies = Object.values(handler.shims).map(shim => jest.spyOn(shim, 'setNow'));
+
+      handler.setNow(5000);
+
+      expect(spies.length).toBeGreaterThan(0);
+      for (const spy of spies) {
+        expect(spy).toHaveBeenCalledWith(5000);
+      }
+    });
+  });
+
+  describe('getRegistration', () => {
+    it('should return an object with a shims array', () => {
+      const mockSandbox = {
+        mediator: { registerMessageHandler: jest.fn() },
+        registerHandler: jest.fn(),
+      };
+      const handler = new TestHandler(mockSandbox);
+      const registration = handler.getRegistration();
+
+      expect(registration).toHaveProperty('shims');
+      expect(Array.isArray(registration.shims)).toBe(true);
+    });
+
+    it('should include shimName in the array', () => {
+      const mockSandbox = {
+        mediator: { registerMessageHandler: jest.fn() },
+        registerHandler: jest.fn(),
+      };
+      const handler = new TestHandler(mockSandbox);
+      const registration = handler.getRegistration();
+
+      expect(registration.shims).toContain('testShim');
+    });
+
+    it('should include all shims when handler has multiple shims', () => {
+      const mockSandbox = {
+        mediator: { registerMessageHandler: jest.fn() },
+        registerHandler: jest.fn(),
+      };
+      const handler = new MultiShimHandler(mockSandbox);
+      const registration = handler.getRegistration();
+
+      // Should include 5 base shims plus 2 custom shims
+      expect(registration.shims).toHaveLength(7);
+      // Base shims
+      expect(registration.shims).toContain('localStorage');
+      expect(registration.shims).toContain('sessionStorage');
+      expect(registration.shims).toContain('cookie');
+      expect(registration.shims).toContain('kolibri');
+      expect(registration.shims).toContain('indexedDB');
+      // Custom shims
+      expect(registration.shims).toContain('testShim');
+      expect(registration.shims).toContain('anotherShim');
+    });
+
+    it('should list only the shims that consume user data', () => {
+      const mockSandbox = {
+        mediator: { registerMessageHandler: jest.fn() },
+        registerHandler: jest.fn(),
+      };
+      const handler = new UserDataHandler(mockSandbox);
+      const registration = handler.getRegistration();
+
+      expect(registration.userDataShims).toEqual(['userDataShim']);
+    });
+  });
+
+  describe('_initializeShims', () => {
+    // Shims must install unconditionally and resolve backing state at access
+    // time. One that returns early leaves content silently unshimmed, and the
+    // failure only surfaces later as the content misbehaving.
+    it('installs every base shim given no backing data', () => {
+      const mockSandbox = {
+        mediator: { registerMessageHandler: jest.fn(), sendMessage: jest.fn() },
+        registerHandler: jest.fn(),
+      };
+      const handler = new BaseShimsHandler(mockSandbox);
+      const contentWindow = { document: {} };
+
+      handler._initializeShims(contentWindow);
+
+      // Every shim installs itself under its own shimName, on the window or
+      // (for cookie) the document.
+      const missing = Object.keys(handler.shims).filter(
+        shimName => !(shimName in contentWindow) && !(shimName in contentWindow.document),
+      );
+      expect(missing).toEqual([]);
+    });
+
+    it('hands the initialization options to every shim', () => {
+      const mockSandbox = {
+        mediator: { registerMessageHandler: jest.fn(), sendMessage: jest.fn() },
+        registerHandler: jest.fn(),
+      };
+      const handler = new MultiShimHandler(mockSandbox);
+      const spies = Object.values(handler.shims).map(shim => jest.spyOn(shim, 'iframeInitialize'));
+      const contentWindow = { document: {} };
+
+      handler._initializeShims(contentWindow, { contentNamespace: 'abc123' });
+
+      for (const spy of spies) {
+        expect(spy).toHaveBeenCalledWith(contentWindow, { contentNamespace: 'abc123' });
+      }
+    });
+  });
+
+  describe('_destroyShims', () => {
+    it('should destroy every shim', () => {
+      const mockSandbox = {
+        mediator: { registerMessageHandler: jest.fn(), removeMessageHandler: jest.fn() },
+        registerHandler: jest.fn(),
+      };
+      const handler = new MultiShimHandler(mockSandbox);
+      const spies = Object.values(handler.shims).map(shim => jest.spyOn(shim, 'destroy'));
+
+      handler._destroyShims();
+
+      expect(spies.length).toBeGreaterThan(0);
+      for (const spy of spies) {
+        expect(spy).toHaveBeenCalled();
+      }
+    });
+  });
+
+  describe('progress in state updates', () => {
+    it('should include progress field in STATEUPDATE when getProgress returns non-null', () => {
+      const sendMessage = jest.fn();
+      const mockSandbox = {
+        mediator: { registerMessageHandler: jest.fn(), sendMessage },
+        registerHandler: jest.fn(),
+      };
+
+      class ProgressShim extends SandboxShim {
+        static shimName = 'progressShim';
+        constructor(mediator) {
+          super(mediator);
+          this.data = { someKey: 'someValue' };
+        }
+        getProgress() {
+          return 0.75;
+        }
+      }
+
+      class ProgressHandler extends SandboxHandler {
+        static shims = [ProgressShim];
+        async init() {}
+      }
+
+      const handler = new ProgressHandler(mockSandbox);
+      sendMessage.mockClear();
+
+      // Trigger state update
+      handler.shims.progressShim.stateUpdated();
+
+      // Find the STATEUPDATE call for this shim
+      const stateUpdateCall = sendMessage.mock.calls.find(
+        c => c[0].nameSpace === 'progressShim' && c[0].event === events.STATEUPDATE,
+      );
+
+      expect(stateUpdateCall).toBeDefined();
+      expect(stateUpdateCall[0].data).toHaveProperty('progress', 0.75);
+      expect(stateUpdateCall[0].data).toHaveProperty('state', { someKey: 'someValue' });
+    });
+
+    it('should NOT include progress field when getProgress returns null', () => {
+      const sendMessage = jest.fn();
+      const mockSandbox = {
+        mediator: { registerMessageHandler: jest.fn(), sendMessage },
+        registerHandler: jest.fn(),
+      };
+
+      class NoProgressShim extends SandboxShim {
+        static shimName = 'noProgressShim';
+        constructor(mediator) {
+          super(mediator);
+          this.data = { key: 'value' };
+        }
+        // getProgress() returns null by default from SandboxShim
+      }
+
+      class NoProgressHandler extends SandboxHandler {
+        static shims = [NoProgressShim];
+        async init() {}
+      }
+
+      const handler = new NoProgressHandler(mockSandbox);
+      sendMessage.mockClear();
+
+      handler.shims.noProgressShim.stateUpdated();
+
+      const stateUpdateCall = sendMessage.mock.calls.find(
+        c => c[0].nameSpace === 'noProgressShim' && c[0].event === events.STATEUPDATE,
+      );
+
+      expect(stateUpdateCall).toBeDefined();
+      expect(stateUpdateCall[0].data).not.toHaveProperty('progress');
+      // Should have state wrapped
+      expect(stateUpdateCall[0].data).toEqual({ state: { key: 'value' } });
+    });
+
+    it('should use recalculated progress value when shim progress changes', () => {
+      const sendMessage = jest.fn();
+      const mockSandbox = {
+        mediator: { registerMessageHandler: jest.fn(), sendMessage },
+        registerHandler: jest.fn(),
+      };
+
+      let progressValue = 0.25;
+
+      class ChangingShim extends SandboxShim {
+        static shimName = 'changingShim';
+        constructor(mediator) {
+          super(mediator);
+          this.data = {};
+        }
+        getProgress() {
+          return progressValue;
+        }
+      }
+
+      class ChangingHandler extends SandboxHandler {
+        static shims = [ChangingShim];
+        async init() {}
+      }
+
+      const handler = new ChangingHandler(mockSandbox);
+      sendMessage.mockClear();
+
+      // First update with 0.25
+      handler.shims.changingShim.stateUpdated();
+      let calls = sendMessage.mock.calls.filter(
+        c => c[0].nameSpace === 'changingShim' && c[0].event === events.STATEUPDATE,
+      );
+      expect(calls[0][0].data.progress).toBe(0.25);
+
+      // Change progress and update again
+      progressValue = 0.9;
+      handler.shims.changingShim.stateUpdated();
+      calls = sendMessage.mock.calls.filter(
+        c => c[0].nameSpace === 'changingShim' && c[0].event === events.STATEUPDATE,
+      );
+      expect(calls[1][0].data.progress).toBe(0.9);
+    });
+  });
+});
diff --git a/packages/kolibri-sandbox/test/SandboxShim.spec.js b/packages/kolibri-sandbox/test/SandboxShim.spec.js
new file mode 100644
index 00000000000..04d8559a661
--- /dev/null
+++ b/packages/kolibri-sandbox/test/SandboxShim.spec.js
@@ -0,0 +1,242 @@
+import { SandboxShim } from '../src/SandboxShim';
+import Mediator from '../src/mediator';
+import { events } from '../src/base';
+
+class TestShim extends SandboxShim {
+  static shimName = 'testShim';
+}
+
+describe('SandboxShim', () => {
+  describe('constructor', () => {
+    it('should set nameSpace from static shimName', () => {
+      const mockMediator = {
+        registerMessageHandler: jest.fn(),
+      };
+      const shim = new TestShim(mockMediator);
+
+      expect(shim.nameSpace).toBe('testShim');
+    });
+
+    it('should throw if shimName is not defined', () => {
+      class NoNameShim extends SandboxShim {}
+
+      const mockMediator = { registerMessageHandler: jest.fn() };
+
+      expect(() => new NoNameShim(mockMediator)).toThrow('must define static shimName');
+    });
+  });
+
+  describe('on', () => {
+    it('should accept an event the subclass declares', () => {
+      const mediator = new Mediator(window);
+      const callback = jest.fn();
+
+      class OwnEventShim extends SandboxShim {
+        static shimName = 'ownEventShim';
+        static events = { OWNEVENT: 'ownevent' };
+      }
+
+      const shim = new OwnEventShim(mediator);
+      shim.on(shim.events.OWNEVENT, callback);
+      mediator.handleMessage({
+        data: { nameSpace: 'ownEventShim', event: 'ownevent', data: 3 },
+      });
+
+      expect(callback).toHaveBeenCalledWith(3);
+    });
+
+    it('should reject an event no one declares', () => {
+      const shim = new TestShim({ registerMessageHandler: jest.fn() });
+
+      expect(() => shim.on('ownevent', jest.fn())).toThrow(ReferenceError);
+    });
+  });
+
+  describe('getProgress', () => {
+    it('should return null by default', () => {
+      const mockMediator = { registerMessageHandler: jest.fn() };
+      const shim = new TestShim(mockMediator);
+
+      expect(shim.getProgress()).toBeNull();
+    });
+
+    it('should return value when overridden', () => {
+      class ProgressShim extends SandboxShim {
+        static shimName = 'progressShim';
+        getProgress() {
+          return 0.5;
+        }
+      }
+
+      const mockMediator = { registerMessageHandler: jest.fn() };
+      const shim = new ProgressShim(mockMediator);
+
+      expect(shim.getProgress()).toBe(0.5);
+    });
+  });
+
+  describe('setData', () => {
+    it('should restore state without the subclass wiring anything up', () => {
+      const sendMessage = jest.fn();
+      const mockMediator = { registerMessageHandler: jest.fn(), sendMessage };
+
+      const shim = new TestShim(mockMediator);
+      shim.setData({ key: 'value' });
+
+      expect(shim.data).toEqual({ key: 'value' });
+      expect(sendMessage).toHaveBeenCalledWith({
+        nameSpace: 'testShim',
+        event: events.STATEUPDATE,
+        data: { state: { key: 'value' } },
+      });
+    });
+
+    it('should store state pushed from main', () => {
+      const mediator = new Mediator(window);
+      const shim = new TestShim(mediator);
+
+      mediator.handleMessage({
+        data: { nameSpace: 'testShim', event: events.STATEUPDATE, data: { key: 'value' } },
+      });
+
+      expect(shim.data).toEqual({ key: 'value' });
+    });
+
+    it('should honour a subclass that computes its state', () => {
+      const mockMediator = { registerMessageHandler: jest.fn(), sendMessage: jest.fn() };
+
+      class TransformingShim extends SandboxShim {
+        static shimName = 'transformingShim';
+        get data() {
+          return this.__data;
+        }
+        set data(data) {
+          this.__data = { ...data, restored: true };
+        }
+      }
+
+      const shim = new TransformingShim(mockMediator);
+      shim.setData({ key: 'value' });
+
+      expect(shim.data).toEqual({ key: 'value', restored: true });
+    });
+  });
+
+  describe('setUserData', () => {
+    it('should store user data without the subclass wiring anything up', () => {
+      const mockMediator = { registerMessageHandler: jest.fn(), sendMessage: jest.fn() };
+      const shim = new TestShim(mockMediator);
+
+      shim.setUserData({ userId: 'testuser' });
+
+      expect(shim.userData).toEqual({ userId: 'testuser' });
+    });
+
+    it('should not declare itself a user data consumer by default', () => {
+      // Main sends USERDATAUPDATE only to the shims that declare an interest, so
+      // storing user data and asking for it are deliberately separate.
+      const mockMediator = { registerMessageHandler: jest.fn(), sendMessage: jest.fn() };
+
+      class UserDataShim extends SandboxShim {
+        static shimName = 'userDataShim';
+        static consumesUserData = true;
+      }
+
+      expect(new TestShim(mockMediator).consumesUserData).toBe(false);
+      expect(new UserDataShim(mockMediator).consumesUserData).toBe(true);
+    });
+  });
+
+  describe('destroy', () => {
+    it('should stop taking state pushed from main', () => {
+      const mediator = new Mediator(window);
+      const shim = new TestShim(mediator);
+
+      shim.destroy();
+      mediator.handleMessage({
+        data: { nameSpace: 'testShim', event: events.STATEUPDATE, data: { key: 'value' } },
+      });
+
+      expect(shim.data).toEqual({});
+    });
+
+    it('should drop the subscriptions a subclass added through on', () => {
+      // Subclasses subscribe to their own events too, so tracking them in on() is
+      // the only teardown that covers a shim we do not know about.
+      const mediator = new Mediator(window);
+      const callback = jest.fn();
+
+      class SubscribingShim extends SandboxShim {
+        static shimName = 'subscribingShim';
+        static events = { OWNEVENT: 'ownevent' };
+        constructor(mediator) {
+          super(mediator);
+          this.on(this.events.OWNEVENT, callback);
+        }
+      }
+
+      const shim = new SubscribingShim(mediator);
+      shim.destroy();
+      mediator.handleMessage({
+        data: { nameSpace: 'subscribingShim', event: 'ownevent', data: 3 },
+      });
+
+      expect(callback).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('stateUpdated', () => {
+    it('should send state wrapped in { state } object', () => {
+      const sendMessage = jest.fn();
+      const mockMediator = {
+        registerMessageHandler: jest.fn(),
+        sendMessage,
+      };
+
+      class DataShim extends SandboxShim {
+        static shimName = 'dataShim';
+        constructor(mediator) {
+          super(mediator);
+          this.data = { key: 'value' };
+        }
+      }
+
+      const shim = new DataShim(mockMediator);
+      shim.stateUpdated();
+
+      expect(sendMessage).toHaveBeenCalledWith({
+        nameSpace: 'dataShim',
+        event: events.STATEUPDATE,
+        data: { state: { key: 'value' } },
+      });
+    });
+
+    it('should include progress when getProgress returns non-null', () => {
+      const sendMessage = jest.fn();
+      const mockMediator = {
+        registerMessageHandler: jest.fn(),
+        sendMessage,
+      };
+
+      class ProgressShim extends SandboxShim {
+        static shimName = 'progressShim';
+        constructor(mediator) {
+          super(mediator);
+          this.data = { foo: 'bar' };
+        }
+        getProgress() {
+          return 0.75;
+        }
+      }
+
+      const shim = new ProgressShim(mockMediator);
+      shim.stateUpdated();
+
+      expect(sendMessage).toHaveBeenCalledWith({
+        nameSpace: 'progressShim',
+        event: events.STATEUPDATE,
+        data: { state: { foo: 'bar' }, progress: 0.75 },
+      });
+    });
+  });
+});
diff --git a/packages/kolibri-sandbox/test/baseStorage.spec.js b/packages/kolibri-sandbox/test/baseStorage.spec.js
index a0dbc18e076..dae6aa10f06 100644
--- a/packages/kolibri-sandbox/test/baseStorage.spec.js
+++ b/packages/kolibri-sandbox/test/baseStorage.spec.js
@@ -1,29 +1,36 @@
 import Mediator from '../src/mediator';
 import BaseStorage from '../src/baseStorage';
 
+// Test subclass that provides required shimName
+class TestStorage extends BaseStorage {
+  static get shimName() {
+    return 'testStorage';
+  }
+}
+
 describe('BaseStorage shim', () => {
   let baseStorage;
   let mediator;
   beforeEach(() => {
     mediator = new Mediator(window);
-    baseStorage = new BaseStorage(mediator);
+    baseStorage = new TestStorage(mediator);
   });
-  describe('__setData', () => {
+  describe('setData', () => {
     it('should set data to the passed in data', () => {
       const testData = {
         test: 'test',
       };
-      baseStorage.__setData(testData);
+      baseStorage.setData(testData);
       expect(baseStorage.data).toEqual(testData);
     });
     it('should set data to an empty state if no data passed in', () => {
-      baseStorage.__setData();
+      baseStorage.setData();
       expect(baseStorage.data).toEqual({});
     });
-    it('should call setDataToShim', () => {
-      baseStorage.setDataToShim = jest.fn();
-      baseStorage.__setData();
-      expect(baseStorage.setDataToShim).toHaveBeenCalled();
+    it('should push restored data onto the object the content holds', () => {
+      const shim = baseStorage.__setShimInterface();
+      baseStorage.setData({ test: 'test' });
+      expect(shim['test']).toEqual('test');
     });
   });
   describe('shim management and instance methods', () => {
@@ -79,22 +86,22 @@ describe('BaseStorage shim', () => {
         expect(shim.length).toEqual(1);
       });
       it('should have length 2 when 2 items are present', () => {
-        baseStorage.__setData({
+        baseStorage.setData({
           test: 'test',
           test1: 'test',
         });
         expect(shim.length).toEqual(2);
       });
       it('should have length 1 when 2 items are set but one deleted', () => {
-        baseStorage.__setData({
+        baseStorage.setData({
           test: 'test',
           test1: 'test',
         });
         delete shim['test1'];
         expect(shim.length).toEqual(1);
       });
-      it('should have length 3 when 2 items are set with __setData and another set on the shim', () => {
-        baseStorage.__setData({
+      it('should have length 3 when 2 items are set with setData and another set on the shim', () => {
+        baseStorage.setData({
           test: 'test',
           test1: 'test',
         });
@@ -104,21 +111,21 @@ describe('BaseStorage shim', () => {
     });
     describe('key method', () => {
       it('should return the key of the passed in index', () => {
-        baseStorage.__setData({
+        baseStorage.setData({
           test: 'test',
           test1: 'test',
         });
         expect(shim.key(1)).toEqual('test1');
       });
       it('should return null if an invalid index is passed in', () => {
-        baseStorage.__setData({
+        baseStorage.setData({
           test: 'test',
           test1: 'test',
         });
         expect(shim.key(100)).toEqual(null);
       });
       it('should return null if an index that has been deleted is passed in', () => {
-        baseStorage.__setData({
+        baseStorage.setData({
           test: 'test',
           test1: 'test',
         });
@@ -127,7 +134,7 @@ describe('BaseStorage shim', () => {
         expect(shim.key(1)).toEqual(null);
       });
       it('should return the key if an index for a key just added on the shim is passed in', () => {
-        baseStorage.__setData({
+        baseStorage.setData({
           test: 'test',
           test1: 'test',
         });
@@ -138,7 +145,7 @@ describe('BaseStorage shim', () => {
     });
     describe('getItem method', () => {
       it('should return the value of the passed in key', () => {
-        baseStorage.__setData({
+        baseStorage.setData({
           test: 'test1',
           test1: 'test',
         });
@@ -173,7 +180,7 @@ describe('BaseStorage shim', () => {
     });
     describe('removeItem method', () => {
       it('should remove the item corresponding to that key from data', () => {
-        baseStorage.__setData({
+        baseStorage.setData({
           test: 'test1',
           test1: 'test',
         });
@@ -182,7 +189,7 @@ describe('BaseStorage shim', () => {
         expect(baseStorage.data['test']).toBeUndefined();
       });
       it('should remove the item corresponding to that key from the shim', () => {
-        baseStorage.__setData({
+        baseStorage.setData({
           test: 'test1',
           test1: 'test',
         });
@@ -190,7 +197,7 @@ describe('BaseStorage shim', () => {
         expect(shim['test']).toBeUndefined();
       });
       it('should not remove the item corresponding to that key from the shim if it is a shim method', () => {
-        baseStorage.__setData({
+        baseStorage.setData({
           getItem: 'test',
         });
         shim.removeItem('getItem');
@@ -205,7 +212,7 @@ describe('BaseStorage shim', () => {
     });
     describe('clear method', () => {
       it('should empty the data property of baseStorage', () => {
-        baseStorage.__setData({
+        baseStorage.setData({
           test: 'test1',
           test1: 'test',
         });
@@ -213,6 +220,14 @@ describe('BaseStorage shim', () => {
         shim.clear();
         expect(baseStorage.data).toEqual({});
       });
+      it('should stay cleared when the data is next read back', () => {
+        // Clearing has to reach the object the content holds, or the next read
+        // reconciles every key straight back out of it.
+        shim.setItem('test', 'test1');
+        shim.clear();
+        expect(shim.getItem('test')).toBeNull();
+        expect(baseStorage.data).toEqual({});
+      });
       it('should call stateUpdated', () => {
         baseStorage.stateUpdated = jest.fn();
         shim.clear();
diff --git a/packages/kolibri-sandbox/test/cookie.spec.js b/packages/kolibri-sandbox/test/cookie.spec.js
index 617163298bf..42f1f8c6d6e 100644
--- a/packages/kolibri-sandbox/test/cookie.spec.js
+++ b/packages/kolibri-sandbox/test/cookie.spec.js
@@ -13,13 +13,6 @@ describe('The cookie shim', () => {
     mediator = new Mediator(window);
     cookie = new Cookie(mediator);
   });
-  describe('__clearData method', () => {
-    it('should set the __data attribute to the empty base object', () => {
-      cookie.__data = {};
-      cookie.__clearData();
-      expect(cookie.__data).toEqual(emptyData);
-    });
-  });
   describe('__removeExpiredCookies method', () => {
     it('should remove any expired cookies from the rootCookies', () => {
       const testData = cookie.__data;
@@ -40,16 +33,20 @@ describe('The cookie shim', () => {
       expect(cookie.__removeExpiredCookies(testData)).toEqual(emptyData);
     });
   });
-  describe('__setData method', () => {
-    it('should call __removeExpiredCookies if the data is of valid form', () => {
-      cookie.__removeExpiredCookies = jest.fn();
-      cookie.__setData(emptyData);
-      expect(cookie.__removeExpiredCookies).toHaveBeenCalledWith(emptyData);
+  describe('setData method', () => {
+    it('should restore cookies that have not expired', () => {
+      const unexpired = { value: 'test', expires: new Date(Date.now() + 10000) };
+      cookie.setData({ rootCookies: { test: unexpired }, byPath: {} });
+      expect(cookie.data).toEqual({ rootCookies: { test: unexpired }, byPath: {} });
+    });
+    it('should drop cookies that expired while the state was persisted', () => {
+      const expired = { value: 'test', expires: new Date(Date.now() - 10) };
+      cookie.setData({ rootCookies: { test: expired }, byPath: {} });
+      expect(cookie.data).toEqual(emptyData);
     });
-    it('should call __clearData if the data is of invalid form', () => {
-      cookie.__clearData = jest.fn();
-      cookie.__setData({});
-      expect(cookie.__clearData).toHaveBeenCalled();
+    it('should empty the jar if the data is of invalid form', () => {
+      cookie.setData({});
+      expect(cookie.data).toEqual(emptyData);
     });
   });
   describe('iframeInitialize method', () => {
@@ -134,32 +131,6 @@ describe('The cookie shim', () => {
       cookie.setNow(new Date(1000));
       expect(cookie.__nowDiff).toEqual(1000);
     });
-    it('should send a message with the NOW event', () => {
-      return new Promise(resolve => {
-        mediator.registerMessageHandler({
-          nameSpace: cookie.nameSpace,
-          event: cookie.events.NOW,
-          callback: () => {
-            resolve();
-          },
-        });
-        cookie.setNow(new Date(1000));
-      });
-    });
-    it('should send a message with the __nowDiff value', () => {
-      Date.now = jest.fn(() => 0);
-      return new Promise(resolve => {
-        mediator.registerMessageHandler({
-          nameSpace: cookie.nameSpace,
-          event: cookie.events.NOW,
-          callback: nowDiff => {
-            expect(nowDiff).toEqual(1000);
-            resolve();
-          },
-        });
-        cookie.setNow(new Date(1000));
-      });
-    });
   });
   describe('__getCookies method', () => {
     it('should return an empty string when data is empty', () => {
diff --git a/packages/kolibri-sandbox/test/handlerLoader.spec.js b/packages/kolibri-sandbox/test/handlerLoader.spec.js
new file mode 100644
index 00000000000..ae82a19b077
--- /dev/null
+++ b/packages/kolibri-sandbox/test/handlerLoader.spec.js
@@ -0,0 +1,49 @@
+import { loadHandler } from '../src/handlerLoader';
+
+describe('loadHandler', () => {
+  let sandbox;
+
+  beforeEach(() => {
+    sandbox = {};
+    document.head.innerHTML = '';
+  });
+
+  const appendedScripts = () => Array.from(document.head.querySelectorAll('script'));
+
+  it('removes the script and clears the resolver on successful registration', async () => {
+    const promise = loadHandler('http://example.test/handler.js', sandbox);
+    expect(appendedScripts()).toHaveLength(1);
+
+    // Simulate registerHandler firing the stored resolver.
+    sandbox._handlerRegistrationResolver();
+    await expect(promise).resolves.toBeUndefined();
+
+    expect(appendedScripts()).toHaveLength(0);
+    expect(sandbox._handlerRegistrationResolver).toBeNull();
+  });
+
+  it('removes the script and clears the resolver on timeout', async () => {
+    jest.useFakeTimers();
+    try {
+      const promise = loadHandler('http://example.test/handler.js', sandbox, 1000);
+      jest.advanceTimersByTime(1000);
+      await expect(promise).rejects.toThrow(/timeout/);
+
+      expect(appendedScripts()).toHaveLength(0);
+      expect(sandbox._handlerRegistrationResolver).toBeNull();
+    } finally {
+      jest.useRealTimers();
+    }
+  });
+
+  it('removes the script and clears the resolver when the script fails to load', async () => {
+    const promise = loadHandler('http://example.test/handler.js', sandbox);
+    const script = appendedScripts()[0];
+
+    script.onerror();
+    await expect(promise).rejects.toThrow(/Failed to load/);
+
+    expect(appendedScripts()).toHaveLength(0);
+    expect(sandbox._handlerRegistrationResolver).toBeNull();
+  });
+});
diff --git a/packages/kolibri-sandbox/test/iframeClient.spec.js b/packages/kolibri-sandbox/test/iframeClient.spec.js
index 7ada269bf2d..20e5751b479 100644
--- a/packages/kolibri-sandbox/test/iframeClient.spec.js
+++ b/packages/kolibri-sandbox/test/iframeClient.spec.js
@@ -1,6 +1,32 @@
 import 'mutationobserver-shim';
 import Sandbox from '../src/iframeClient';
 import { events, nameSpace } from '../src/base';
+import * as handlerLoader from '../src/handlerLoader';
+
+jest.mock('../src/handlerLoader');
+
+// The parts of the SandboxHandler contract that createIframe drives.
+function mockHandler(overrides = {}) {
+  return {
+    getRegistration: () => ({ shims: [] }),
+    init: jest.fn().mockResolvedValue(),
+    setNow: jest.fn(),
+    setData: jest.fn(),
+    setUserData: jest.fn(),
+    _initializeShims: jest.fn(),
+    _destroyShims: jest.fn(),
+    destroy: jest.fn(),
+    ...overrides,
+  };
+}
+
+function deferred() {
+  let resolve;
+  const promise = new Promise(r => {
+    resolve = r;
+  });
+  return { promise, resolve };
+}
 
 describe('Sandbox iframeClient', () => {
   let sandbox;
@@ -8,6 +34,11 @@ describe('Sandbox iframeClient', () => {
     window.name = nameSpace;
     sandbox = new Sandbox();
   });
+  afterEach(() => {
+    // Remove this instance's window message listener so leftover mediators from
+    // earlier tests don't receive messages and re-trigger createIframe.
+    sandbox.mediator.destroy();
+  });
   describe('constructor method', () => {
     it('should bind a listener to a readycheck event to send a ready event', () => {
       sandbox.mediator.sendMessage = jest.fn();
@@ -49,4 +80,325 @@ describe('Sandbox iframeClient', () => {
       });
     });
   });
+
+  describe('handler registration ordering', () => {
+    it('should emit HANDLER_REGISTRATION before calling handler.init', async () => {
+      const eventOrder = [];
+
+      sandbox.mediator.sendMessage = jest.fn(msg => {
+        eventOrder.push({ type: 'sendMessage', event: msg.event });
+      });
+
+      const handler = mockHandler({
+        getRegistration: () => ({
+          shims: ['testShim'],
+        }),
+        init: jest.fn(() => {
+          eventOrder.push({ type: 'handlerInit' });
+          return Promise.resolve();
+        }),
+      });
+
+      // Mock loadHandler to register the handler
+      handlerLoader.loadHandler.mockImplementation(async (url, sandboxEnv) => {
+        sandboxEnv.registerHandler(handler);
+      });
+
+      // Call createIframe with a handler URL
+      await sandbox.createIframe({
+        contentNamespace: 'test',
+        startUrl: 'http://test.com',
+        handlerUrl: 'http://handler.js',
+      });
+
+      // Find indices of relevant events
+      const registrationIndex = eventOrder.findIndex(
+        e => e.type === 'sendMessage' && e.event === 'handlerregistration',
+      );
+      const initIndex = eventOrder.findIndex(e => e.type === 'handlerInit');
+
+      expect(registrationIndex).toBeGreaterThanOrEqual(0);
+      expect(initIndex).toBeGreaterThanOrEqual(0);
+      expect(registrationIndex).toBeLessThan(initIndex);
+    });
+
+    it('should include all shim registrations in the HANDLER_REGISTRATION event', async () => {
+      let capturedRegistration = null;
+      sandbox.mediator.sendMessage = jest.fn(msg => {
+        if (msg.event === 'handlerregistration') {
+          capturedRegistration = msg.data;
+        }
+      });
+
+      const handler = mockHandler({
+        getRegistration: () => ({
+          shims: ['shimA', 'shimB'],
+        }),
+      });
+
+      // Mock loadHandler to register the handler
+      handlerLoader.loadHandler.mockImplementation(async (url, sandboxEnv) => {
+        sandboxEnv.registerHandler(handler);
+      });
+
+      // Call createIframe with a handler URL
+      await sandbox.createIframe({
+        contentNamespace: 'test',
+        startUrl: 'http://test.com',
+        handlerUrl: 'http://handler.js',
+      });
+
+      expect(capturedRegistration).not.toBeNull();
+      expect(capturedRegistration.shims).toContain('shimA');
+      expect(capturedRegistration.shims).toContain('shimB');
+    });
+  });
+
+  describe('repeated and overlapping builds', () => {
+    it('should ignore a repeat of the build already in flight', async () => {
+      // Main re-sends MAINREADY on every IFRAMEREADY, so the same build arrives twice.
+      const handler = mockHandler();
+      const gate = deferred();
+      handlerLoader.loadHandler.mockImplementation(async (url, env) => {
+        await gate.promise;
+        env.registerHandler(handler);
+      });
+      handlerLoader.loadHandler.mockClear();
+      sandbox.mediator.sendMessage = jest.fn();
+
+      const build = sandbox.createIframe({
+        contentNamespace: 'test',
+        startUrl: 'http://test.com',
+        handlerUrl: 'http://handler.js',
+      });
+      const repeat = sandbox.createIframe({
+        contentNamespace: 'test',
+        startUrl: 'http://test.com',
+        handlerUrl: 'http://handler.js',
+      });
+      gate.resolve();
+      await Promise.all([build, repeat]);
+
+      expect(handlerLoader.loadHandler).toHaveBeenCalledTimes(1);
+      expect(handler.init).toHaveBeenCalledTimes(1);
+    });
+
+    it('should let an in-flight build settle before replacing it with other content', async () => {
+      // Otherwise the first run resumes after the swap and initializes the second
+      // run's iframe, and its handler registration lands on top of the live one.
+      const first = mockHandler();
+      const second = mockHandler();
+      const gate = deferred();
+      handlerLoader.loadHandler.mockImplementation(async (url, env) => {
+        if (url === 'http://first.js') {
+          await gate.promise;
+          env.registerHandler(first);
+        } else {
+          env.registerHandler(second);
+        }
+      });
+      sandbox.mediator.sendMessage = jest.fn();
+
+      const firstBuild = sandbox.createIframe({
+        contentNamespace: 'one',
+        startUrl: 'http://one.com',
+        handlerUrl: 'http://first.js',
+      });
+      const secondBuild = sandbox.createIframe({
+        contentNamespace: 'two',
+        startUrl: 'http://two.com',
+        handlerUrl: 'http://second.js',
+      });
+      gate.resolve();
+      await Promise.all([firstBuild, secondBuild]);
+
+      expect(first.init).toHaveBeenCalledTimes(1);
+      expect(second.init).toHaveBeenCalledTimes(1);
+      expect(first.init.mock.calls[0][0]).not.toBe(second.init.mock.calls[0][0]);
+      expect(second.init.mock.calls[0][0]).toBe(sandbox.iframe);
+      expect(sandbox.handler).toBe(second);
+    });
+
+    it('should unsubscribe the replaced handler shims', async () => {
+      // The shims subscribe on the shared mediator, so a handler left subscribed
+      // keeps taking state pushed for its successor.
+      const first = mockHandler();
+      const second = mockHandler();
+      handlerLoader.loadHandler.mockImplementation(async (url, env) => {
+        env.registerHandler(url === 'http://first.js' ? first : second);
+      });
+      sandbox.mediator.sendMessage = jest.fn();
+
+      await sandbox.createIframe({
+        contentNamespace: 'one',
+        startUrl: 'http://one.com',
+        handlerUrl: 'http://first.js',
+      });
+      await sandbox.createIframe({
+        contentNamespace: 'two',
+        startUrl: 'http://two.com',
+        handlerUrl: 'http://second.js',
+      });
+
+      expect(first._destroyShims).toHaveBeenCalled();
+      expect(second._destroyShims).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('clock propagation', () => {
+    it('should propagate the injected clock to the handler after registration', async () => {
+      const handler = mockHandler();
+      handlerLoader.loadHandler.mockImplementation(async (url, env) => {
+        env.registerHandler(handler);
+      });
+      sandbox.mediator.sendMessage = jest.fn();
+
+      await sandbox.createIframe({
+        contentNamespace: 'test',
+        startUrl: 'http://test.com',
+        handlerUrl: 'http://handler.js',
+        now: 4242,
+      });
+
+      expect(handler.setNow).toHaveBeenCalledWith(4242);
+    });
+  });
+
+  describe('session restoration', () => {
+    it('should hand the saved state and user data to the handler before content loads', async () => {
+      const applied = [];
+      const handler = mockHandler({
+        init: jest.fn(() => {
+          applied.push('init');
+          return Promise.resolve();
+        }),
+        setData: jest.fn(() => applied.push('setData')),
+        setUserData: jest.fn(() => applied.push('setUserData')),
+      });
+      handlerLoader.loadHandler.mockImplementation(async (url, env) => {
+        env.registerHandler(handler);
+      });
+      sandbox.mediator.sendMessage = jest.fn();
+
+      const contentState = { localStorage: { key: 'value' } };
+      const userData = { userId: 'test123' };
+      await sandbox.createIframe({
+        contentNamespace: 'test',
+        startUrl: 'http://test.com',
+        handlerUrl: 'http://handler.js',
+        contentState,
+        userData,
+      });
+
+      expect(handler.setData).toHaveBeenCalledWith(contentState);
+      expect(handler.setUserData).toHaveBeenCalledWith(userData);
+      // The content's own scripts read the shims as they load, so the data has to
+      // already be there.
+      expect(applied).toEqual(['setData', 'setUserData', 'init']);
+    });
+
+    it('should give the handler empty state when nothing has been saved', async () => {
+      const handler = mockHandler();
+      handlerLoader.loadHandler.mockImplementation(async (url, env) => {
+        env.registerHandler(handler);
+      });
+      sandbox.mediator.sendMessage = jest.fn();
+
+      await sandbox.createIframe({
+        contentNamespace: 'test',
+        startUrl: 'http://test.com',
+        handlerUrl: 'http://handler.js',
+      });
+
+      expect(handler.setData).toHaveBeenCalledWith({});
+      expect(handler.setUserData).toHaveBeenCalledWith({});
+    });
+  });
+
+  describe('loading signalling', () => {
+    function loadWith(init) {
+      const handler = mockHandler({ init });
+      handlerLoader.loadHandler.mockImplementation(async (url, env) => {
+        env.registerHandler(handler);
+      });
+      sandbox.mediator.sendMessage = jest.fn();
+      return sandbox.createIframe({
+        contentNamespace: 'test',
+        startUrl: 'http://test.com',
+        handlerUrl: 'http://handler.js',
+      });
+    }
+
+    it('should clear the loading state once content is loaded', async () => {
+      await loadWith(jest.fn().mockResolvedValue());
+
+      expect(sandbox.mediator.sendMessage).toHaveBeenCalledWith({
+        nameSpace,
+        event: events.LOADING,
+        data: false,
+      });
+    });
+
+    it('should clear the loading state even if contentWindow is null after init', async () => {
+      // Otherwise the consumer hangs in the loading state indefinitely.
+      await loadWith(
+        jest.fn(iframe => {
+          Object.defineProperty(iframe, 'contentWindow', {
+            configurable: true,
+            get: () => null,
+          });
+          return Promise.resolve();
+        }),
+      );
+
+      expect(sandbox.mediator.sendMessage).toHaveBeenCalledWith({
+        nameSpace,
+        event: events.LOADING,
+        data: false,
+      });
+    });
+  });
+
+  describe('initializeIframe', () => {
+    // The content document calls this from its own <head>, before any of its
+    // scripts run. Shimming only happens here - see the comment on the method.
+    async function withHandler(handler) {
+      handlerLoader.loadHandler.mockImplementation(async (url, sandboxEnv) => {
+        sandboxEnv.registerHandler(handler);
+      });
+      sandbox.mediator.sendMessage = jest.fn();
+      await sandbox.createIframe({
+        contentNamespace: 'test',
+        startUrl: 'http://test.com',
+        handlerUrl: 'http://handler.js',
+      });
+    }
+
+    it('should not shim the content window as a side effect of loading', async () => {
+      const handler = mockHandler();
+      await withHandler(handler);
+
+      expect(handler._initializeShims).not.toHaveBeenCalled();
+    });
+
+    it('should shim the content window when the content document calls in', async () => {
+      const handler = mockHandler();
+      await withHandler(handler);
+
+      sandbox.initializeIframe(sandbox.iframe.contentWindow);
+
+      expect(handler._initializeShims).toHaveBeenCalledWith(sandbox.iframe.contentWindow, {
+        contentNamespace: 'test',
+      });
+    });
+
+    it('should ignore windows that are not the content iframe', async () => {
+      const handler = mockHandler();
+      await withHandler(handler);
+
+      sandbox.initializeIframe(window);
+
+      expect(handler._initializeShims).not.toHaveBeenCalled();
+    });
+  });
 });
diff --git a/packages/kolibri-sandbox/test/indexedDBShim.spec.js b/packages/kolibri-sandbox/test/indexedDBShim.spec.js
new file mode 100644
index 00000000000..61f9c5bf85d
--- /dev/null
+++ b/packages/kolibri-sandbox/test/indexedDBShim.spec.js
@@ -0,0 +1,64 @@
+import Mediator from '../src/mediator';
+import IndexedDBShim from '../src/indexedDBShim';
+
+describe('The indexedDB shim', () => {
+  let shim;
+  let originalIndexedDB;
+  let contentWindow;
+
+  beforeEach(() => {
+    shim = new IndexedDBShim(new Mediator(window));
+    originalIndexedDB = {
+      open: jest.fn(),
+      deleteDatabase: jest.fn(),
+      databases: jest.fn(),
+    };
+    contentWindow = { indexedDB: originalIndexedDB };
+  });
+
+  describe('with a content namespace set', () => {
+    beforeEach(() => {
+      shim.iframeInitialize(contentWindow, { contentNamespace: 'abc123' });
+    });
+
+    it('should prefix database names on open', () => {
+      contentWindow.indexedDB.open('mydb', 2);
+      expect(originalIndexedDB.open).toHaveBeenCalledWith('abc123-mydb', 2);
+    });
+
+    it('should prefix database names on deleteDatabase', () => {
+      contentWindow.indexedDB.deleteDatabase('mydb');
+      expect(originalIndexedDB.deleteDatabase).toHaveBeenCalledWith('abc123-mydb');
+    });
+
+    it('should only list this content namespace, with the prefix stripped', async () => {
+      originalIndexedDB.databases.mockResolvedValue([
+        { name: 'abc123-mine', version: 1 },
+        { name: 'other-theirs', version: 1 },
+      ]);
+      await expect(contentWindow.indexedDB.databases()).resolves.toEqual([
+        { name: 'mine', version: 1 },
+      ]);
+    });
+  });
+
+  describe('without a content namespace set', () => {
+    beforeEach(() => {
+      shim.iframeInitialize(contentWindow);
+    });
+
+    // A shim that refused to install would leave the content permanently
+    // unshimmed, so it installs regardless and fails loudly on use rather than
+    // leaking unprefixed databases between content.
+    it('should still install itself on the content window', () => {
+      expect(contentWindow.indexedDB).not.toBe(originalIndexedDB);
+    });
+
+    it('should throw on open rather than use an unprefixed name', () => {
+      expect(() => contentWindow.indexedDB.open('mydb')).toThrow(
+        'IndexedDB accessed before the content namespace was set',
+      );
+      expect(originalIndexedDB.open).not.toHaveBeenCalled();
+    });
+  });
+});
diff --git a/packages/kolibri-sandbox/test/kolibri.spec.js b/packages/kolibri-sandbox/test/kolibri.spec.js
index 5588feea71d..1cccdfed92c 100644
--- a/packages/kolibri-sandbox/test/kolibri.spec.js
+++ b/packages/kolibri-sandbox/test/kolibri.spec.js
@@ -28,14 +28,14 @@ describe('the kolibri shim', () => {
   describe('getContentById method', () => {
     id = 'abc123';
     mockMessage = {
-      data: { dataType: 'Model', id: 'abc123' },
-      event: 'datarequested',
+      data: { id: 'abc123' },
+      event: 'modelrequested',
       nameSpace,
     };
     response = { node: { id: 'abc123' } };
     beforeEach(function () {
       mockMediatorPromise = jest
-        .spyOn(kolibri.mediator, 'sendMessageAwaitReply')
+        .spyOn(mediator, 'sendMessageAwaitReply')
         .mockResolvedValue(response);
     });
     it('should be called once', () => {
@@ -58,12 +58,12 @@ describe('the kolibri shim', () => {
     response = { page: 1, pageSize: 50, results: [{ id: 'abc123' }, { id: 'def456' }] };
     beforeEach(function () {
       mockMessage = {
-        data: { dataType: 'Collection', options: options },
-        event: 'datarequested',
+        data: { options: options },
+        event: 'collectionrequested',
         nameSpace,
       };
       mockMediatorPromise = jest
-        .spyOn(kolibri.mediator, 'sendMessageAwaitReply')
+        .spyOn(mediator, 'sendMessageAwaitReply')
         .mockResolvedValue(response);
     });
     it('should be called once', () => {
@@ -102,7 +102,7 @@ describe('the kolibri shim', () => {
         nameSpace,
       };
       mockMediatorPromise = jest
-        .spyOn(kolibri.mediator, 'sendMessageAwaitReply')
+        .spyOn(mediator, 'sendMessageAwaitReply')
         .mockResolvedValue(response);
     });
     it('should be called once', () => {
@@ -130,7 +130,7 @@ describe('the kolibri shim', () => {
   describe('themeRenderer method', () => {
     it('sets the shim.theme object within the Shim class', async () => {
       const sendMessageAwaitReplySpy = jest
-        .spyOn(kolibri.mediator, 'sendMessageAwaitReply')
+        .spyOn(mediator, 'sendMessageAwaitReply')
         .mockResolvedValue();
       await kolibri.shim.themeRenderer({
         appBarColor: 'pink',
@@ -155,7 +155,7 @@ describe('the kolibri shim', () => {
         nameSpace,
       };
       mockMediatorPromise = jest
-        .spyOn(kolibri.mediator, 'sendMessageAwaitReply')
+        .spyOn(mediator, 'sendMessageAwaitReply')
         .mockResolvedValue(response);
     });
 
@@ -172,11 +172,8 @@ describe('the kolibri shim', () => {
       };
       await kolibri.shim.searchContent(options);
       expect(mockMediatorPromise).toHaveBeenCalledWith({
-        event: 'datarequested',
-        data: {
-          options,
-          dataType: 'SearchResult',
-        },
+        event: 'searchresultrequested',
+        data: { options },
         nameSpace,
       });
     });
diff --git a/packages/kolibri-sandbox/test/localStorage.spec.js b/packages/kolibri-sandbox/test/localStorage.spec.js
index 7bab9890088..6f7b5c0e34e 100644
--- a/packages/kolibri-sandbox/test/localStorage.spec.js
+++ b/packages/kolibri-sandbox/test/localStorage.spec.js
@@ -10,10 +10,15 @@ describe('LocalStorage shim', () => {
     localStorage = new LocalStorage(mediator);
   });
   describe('constructor method', () => {
-    it('should set an event handler for the STATEUPDATE event', () => {
-      expect(mediator.__messageHandlers[localStorage.nameSpace][events.STATEUPDATE]).toEqual([
-        localStorage.__setData,
-      ]);
+    it('should store state pushed to it on the STATEUPDATE event', () => {
+      mediator.handleMessage({
+        data: {
+          nameSpace: localStorage.nameSpace,
+          event: events.STATEUPDATE,
+          data: { test: 'test' },
+        },
+      });
+      expect(localStorage.data).toEqual({ test: 'test' });
     });
     it('should set nameSpace to localStorage', () => {
       expect(localStorage.nameSpace).toEqual('localStorage');
diff --git a/packages/kolibri-sandbox/test/mainClient.spec.js b/packages/kolibri-sandbox/test/mainClient.spec.js
index 0bef6ece07c..2c344aee379 100644
--- a/packages/kolibri-sandbox/test/mainClient.spec.js
+++ b/packages/kolibri-sandbox/test/mainClient.spec.js
@@ -18,15 +18,30 @@ describe('Sandbox mainClient', () => {
         return obj[prop];
       },
     });
-    sandbox = new Sandbox({ iframe: iframeProxy });
+    sandbox = new Sandbox({ iframe: iframeProxy, now: () => 1234 });
+  });
+  afterEach(() => {
+    // Every client listens on the shared jsdom window, so a client left alive
+    // keeps relaying later tests' messages.
+    sandbox.destroy();
+  });
+  describe('constructor', () => {
+    it('should throw when no now function is passed', () => {
+      expect(() => new Sandbox({ iframe })).toThrow(TypeError);
+    });
   });
   describe('initialize method', () => {
-    it('should call __setData immediately', () => {
-      const data = {};
+    it('should store contentState in _shimData', () => {
+      const data = { myShim: { key: 'value' } };
       const userData = {};
-      sandbox.__setData = jest.fn();
       sandbox.initialize(data, userData);
-      expect(sandbox.__setData).toHaveBeenCalledWith(data, userData);
+      expect(sandbox._shimData).toEqual({ myShim: { key: 'value' } });
+    });
+    it('should store userData', () => {
+      const data = {};
+      const userData = { userId: 'test123' };
+      sandbox.initialize(data, userData);
+      expect(sandbox._userData).toEqual(userData);
     });
     it('should fire a ready check', () => {
       sandbox.mediator.sendMessage = jest.fn();
@@ -37,44 +52,38 @@ describe('Sandbox mainClient', () => {
         data: true,
       });
     });
-    it('should call __setData once the iframe ready event is fired', () => {
-      const data = {};
-      const userData = {};
+    it('should send MAINREADY with data when iframe ready event is fired', () => {
+      const contentState = { myShim: { key: 'value' } };
+      const userData = { userId: 'test' };
       return new Promise(resolve => {
         sandbox.mediator.sendMessage = jest.fn();
-        sandbox.initialize(data, userData);
+        sandbox.initialize(contentState, userData, 'http://start.url', 'testns');
         sandbox.on(events.IFRAMEREADY, () => {
           resolve();
         });
-        sandbox.__setData = jest.fn();
         sandbox.mediator.sendLocalMessage({ nameSpace, event: events.IFRAMEREADY, data: true });
       }).then(() => {
-        expect(sandbox.__setData).toHaveBeenCalledWith(sandbox.data, userData);
-      });
-    });
-    it('should call __setData once a second iframe ready event is fired', () => {
-      const data = {};
-      const userData = {};
-      sandbox.mediator.sendMessage = jest.fn();
-      sandbox.initialize(data, userData);
-      return new Promise(resolve => {
-        sandbox.__setData = jest.fn();
-        sandbox.on(events.IFRAMEREADY, () => {
-          resolve();
+        expect(sandbox.mediator.sendMessage).toHaveBeenCalledWith({
+          nameSpace,
+          event: events.MAINREADY,
+          data: {
+            contentNamespace: 'testns',
+            startUrl: 'http://start.url',
+            handlerUrl: null,
+            contentState: { myShim: { key: 'value' } },
+            userData: { userId: 'test' },
+            now: 1234,
+          },
         });
-        sandbox.mediator.sendLocalMessage({ nameSpace, event: events.IFRAMEREADY, data: true });
-      }).then(() => {
-        expect(sandbox.__setData).toHaveBeenCalledWith(sandbox.data, userData);
       });
     });
-    it('should call __setData once a second iframe ready event is fired with any updated data', () => {
+    it('should send updated data when iframe ready fires again after updateData', () => {
       const data = {};
       const userData = {};
       const updatedUserData = { userId: 'test' };
       sandbox.mediator.sendMessage = jest.fn();
-      sandbox.initialize(data, userData);
+      sandbox.initialize(data, userData, 'http://start.url', 'testns');
       return new Promise(resolve => {
-        sandbox.__setData = jest.fn();
         sandbox.updateData({
           contentState: { localStorage: { test: 'this' } },
           userData: updatedUserData,
@@ -84,7 +93,40 @@ describe('Sandbox mainClient', () => {
         });
         sandbox.mediator.sendLocalMessage({ nameSpace, event: events.IFRAMEREADY, data: true });
       }).then(() => {
-        expect(sandbox.__setData).toHaveBeenCalledWith(sandbox.data, updatedUserData);
+        expect(sandbox.mediator.sendMessage).toHaveBeenCalledWith({
+          nameSpace,
+          event: events.MAINREADY,
+          data: expect.objectContaining({
+            contentState: { localStorage: { test: 'this' } },
+            userData: updatedUserData,
+          }),
+        });
+      });
+    });
+    it('should not send MAINREADY while contentWindow is null', () => {
+      // An iframe's contentWindow is transiently null mid-navigation; sending then
+      // would throw, and the previous remote must not be clobbered.
+      let contentWindow = window;
+      const nullableIframe = new Proxy(document.createElement('iframe'), {
+        get(obj, prop) {
+          return prop === 'contentWindow' ? contentWindow : obj[prop];
+        },
+      });
+      const client = new Sandbox({ iframe: nullableIframe, now: () => 1234 });
+      client.mediator.sendMessage = jest.fn();
+      client.initialize({}, {}, 'http://start.url', 'testns');
+      contentWindow = null;
+
+      return new Promise(resolve => {
+        client.on(events.IFRAMEREADY, resolve);
+        client.mediator.sendLocalMessage({ nameSpace, event: events.IFRAMEREADY, data: true });
+      }).then(() => {
+        expect(client.mediator.remote).toBe(window);
+        expect(client.ready).toBe(false);
+        expect(client.mediator.sendMessage).not.toHaveBeenCalledWith(
+          expect.objectContaining({ event: events.MAINREADY }),
+        );
+        client.destroy();
       });
     });
     it('should call mediator sendMessage with the readycheck event', () => {
@@ -99,107 +141,88 @@ describe('Sandbox mainClient', () => {
       });
     });
   });
-  describe('__setData method', () => {
-    it('should call setData on each storage object', () => {
-      sandbox.mediator.sendMessage = jest.fn();
-      const data = {};
-      Object.keys(sandbox.storage).forEach(key => {
-        const storage = sandbox.storage[key];
-        data[storage.nameSpace] = {
-          test: storage.nameSpace,
-        };
-        storage.setData = jest.fn();
-      });
-      sandbox.__setData(data);
-      Object.keys(sandbox.storage).forEach(key => {
-        const storage = sandbox.storage[key];
-        expect(storage.setData).toHaveBeenCalledWith(data[storage.nameSpace]);
-      });
+  describe('updateData method', () => {
+    it('should update userData when provided', () => {
+      sandbox.initialize({}, {});
+      sandbox.updateData({ userData: { userId: 'newUser' } });
+      expect(sandbox._userData).toEqual({ userId: 'newUser' });
     });
-    it('should call setNow on the cookie storage if now is defined', () => {
-      sandbox.mediator.sendMessage = jest.fn();
-      const data = {};
-      sandbox.storage.cookie.setNow = jest.fn();
-      sandbox.now = jest.fn(() => 'test');
-      sandbox.__setData(data);
-      expect(sandbox.storage.cookie.setNow).toHaveBeenCalledWith('test');
+    it('should update _shimData when contentState provided', () => {
+      sandbox.initialize({}, {});
+      sandbox.updateData({ contentState: { myShim: { key: 'value' } } });
+      expect(sandbox._shimData.myShim).toEqual({ key: 'value' });
     });
-    it('should not call setNow on the cookie storage if now is undefined', () => {
-      sandbox.mediator.sendMessage = jest.fn();
-      const data = {};
-      sandbox.storage.cookie.setNow = jest.fn();
-      sandbox.__setData(data);
-      expect(sandbox.storage.cookie.setNow).not.toHaveBeenCalled();
-    });
-    it('should set the userData if it is defined', () => {
-      sandbox.mediator.sendMessage = jest.fn();
-      const data = {};
-      const userData = {};
-      sandbox.__setData(data, userData);
-      expect(sandbox.userData).toEqual(userData);
+    it('should merge new contentState with existing _shimData', () => {
+      sandbox.initialize({ existingShim: { old: 'data' } }, {});
+      sandbox.updateData({ contentState: { newShim: { new: 'data' } } });
+      expect(sandbox._shimData).toEqual({
+        existingShim: { old: 'data' },
+        newShim: { new: 'data' },
+      });
     });
-  });
-  describe('__setListeners method', () => {
-    it('should call on with the stateupdate event', () => {
-      sandbox.mediator.sendMessage = jest.fn();
-      Object.keys(sandbox.storage).forEach(key => {
-        const storage = sandbox.storage[key];
-        storage.on = jest.fn();
+    describe('once the handler has registered its shims', () => {
+      beforeEach(async () => {
+        sandbox.initialize({}, {}, 'http://test.com', 'testns');
+        sandbox.mediator.sendLocalMessage({
+          nameSpace,
+          event: events.HANDLER_REGISTRATION,
+          data: { shims: ['shimOne', 'shimTwo'], userDataShims: ['shimOne'] },
+        });
+        await new Promise(resolve => setTimeout(resolve, 0));
+        sandbox.mediator.sendMessage = jest.fn();
       });
-      sandbox.__setListeners();
-      Object.keys(sandbox.storage).forEach(key => {
-        const storage = sandbox.storage[key];
-        expect(storage.on.mock.calls[0][0]).toEqual(events.STATEUPDATE);
+      it('should send new user data only to the shims that consume it', () => {
+        // The shims are in the iframe, so a mid-session change only reaches them
+        // by message.
+        sandbox.updateData({ userData: { userId: 'newUser' } });
+
+        expect(sandbox.mediator.sendMessage).toHaveBeenCalledWith({
+          nameSpace: 'shimOne',
+          event: events.USERDATAUPDATE,
+          data: { userId: 'newUser' },
+        });
+        expect(sandbox.mediator.sendMessage).not.toHaveBeenCalledWith(
+          expect.objectContaining({ nameSpace: 'shimTwo', event: events.USERDATAUPDATE }),
+        );
+      });
+      it('should send new state only to the shims it was given for', () => {
+        sandbox.updateData({ contentState: { shimOne: { key: 'value' } } });
+
+        expect(sandbox.mediator.sendMessage).toHaveBeenCalledWith({
+          nameSpace: 'shimOne',
+          event: events.STATEUPDATE,
+          data: { key: 'value' },
+        });
+        expect(sandbox.mediator.sendMessage).not.toHaveBeenCalledWith(
+          expect.objectContaining({ nameSpace: 'shimTwo', event: events.STATEUPDATE }),
+        );
       });
     });
+    it('should not send to shims before the handler has registered', () => {
+      sandbox.initialize({}, {}, 'http://test.com', 'testns');
+      sandbox.mediator.sendMessage = jest.fn();
+
+      sandbox.updateData({ userData: { userId: 'newUser' } });
+
+      // MAINREADY carries the current user data, so there is nothing to catch up.
+      expect(sandbox.mediator.sendMessage).not.toHaveBeenCalled();
+    });
   });
   describe('data getter', () => {
-    it('should return the data from each of the storage objects in a namespaced object', () => {
-      sandbox.mediator.sendMessage = jest.fn();
-      const data = {};
-      const cookie = sandbox.storage.cookie;
-      const cookieData = {
-        rootCookies: {
-          test: {
-            value: 'test',
-            expires: String(new Date(Date.now() + 1000000)),
-          },
-        },
-        byPath: {},
-      };
-      data[cookie.nameSpace] = cookieData;
-      cookie.setData(cookieData);
-      const localStorage = sandbox.storage.localStorage;
-      const localStorageData = {
-        test: localStorage.nameSpace,
-      };
-      data[localStorage.nameSpace] = localStorageData;
-      localStorage.setData(localStorageData);
-      const SCORM = sandbox.storage.SCORM;
-      const SCORMData = {
-        cmi: {
-          core: {
-            lesson_status: 'passed',
-          },
-        },
-      };
-      data[SCORM.nameSpace] = SCORMData;
-      SCORM.setData(SCORMData);
-      const xAPI = sandbox.storage.xAPI;
-      const xAPIData = {
-        statements: [],
+    it('should return a copy of _shimData', () => {
+      const contentState = {
+        shimOne: { key: 'value1' },
+        shimTwo: { key: 'value2' },
       };
-      data[xAPI.nameSpace] = xAPIData;
-      xAPI.setData(xAPIData);
-      const H5P = sandbox.storage.H5P;
-      const H5PData = {
-        random: {
-          data: 123,
-        },
-      };
-      data[H5P.nameSpace] = H5PData;
-      H5P.setData(H5PData);
-      expect(sandbox.data).toEqual(data);
+      sandbox.initialize(contentState, {});
+      expect(sandbox.data).toEqual(contentState);
+    });
+    it('should return a deep copy (not the same reference)', () => {
+      sandbox.initialize({ myShim: { key: 'value' } }, {});
+      const data1 = sandbox.data;
+      const data2 = sandbox.data;
+      expect(data1).not.toBe(data2);
+      expect(data1.myShim).not.toBe(data2.myShim);
     });
   });
   describe('on method', () => {
@@ -225,4 +248,198 @@ describe('Sandbox mainClient', () => {
       expect(sandbox.on).toHaveBeenCalledWith(events.STATEUPDATE, callback);
     });
   });
+  describe('registration handling', () => {
+    it('should store registration when HANDLER_REGISTRATION event received', () => {
+      return new Promise(resolve => {
+        sandbox.mediator.sendMessage = jest.fn();
+        sandbox.initialize({}, {}, 'http://test.com', 'testns');
+
+        expect(sandbox.registration).toBeNull();
+
+        const registration = {
+          shims: ['testShim'],
+        };
+
+        sandbox.on(events.HANDLER_REGISTRATION, () => {
+          resolve();
+        });
+
+        sandbox.mediator.sendLocalMessage({
+          nameSpace,
+          event: events.HANDLER_REGISTRATION,
+          data: registration,
+        });
+      }).then(() => {
+        expect(sandbox.registration).toEqual({ shims: ['testShim'] });
+      });
+    });
+
+    it('should initialize _shimData with empty objects for each registered shim namespace', () => {
+      return new Promise(resolve => {
+        sandbox.mediator.sendMessage = jest.fn();
+        sandbox.initialize({}, {}, 'http://test.com', 'testns');
+
+        const registration = {
+          shims: ['myShim', 'otherShim'],
+        };
+
+        sandbox.on(events.HANDLER_REGISTRATION, () => {
+          resolve();
+        });
+
+        sandbox.mediator.sendLocalMessage({
+          nameSpace,
+          event: events.HANDLER_REGISTRATION,
+          data: registration,
+        });
+      }).then(() => {
+        expect(sandbox._shimData).toHaveProperty('myShim');
+        expect(sandbox._shimData).toHaveProperty('otherShim');
+      });
+    });
+
+    it('should not double-register a shim STATEUPDATE handler when registration repeats', async () => {
+      // The iframe re-announces IFRAMEREADY during the handshake, so
+      // HANDLER_REGISTRATION can arrive twice; the shim handler must not stack,
+      // or one shim update would be relayed to the consumer twice.
+      sandbox.initialize({}, {}, 'http://test.com', 'testns');
+      const onStateUpdate = jest.fn();
+      sandbox.onStateUpdate(onStateUpdate);
+
+      for (let i = 0; i < 2; i++) {
+        sandbox.mediator.sendLocalMessage({
+          nameSpace,
+          event: events.HANDLER_REGISTRATION,
+          data: { shims: ['myShim'] },
+        });
+        await new Promise(resolve => setTimeout(resolve, 0));
+      }
+
+      sandbox.mediator.sendLocalMessage({
+        nameSpace: 'myShim',
+        event: events.STATEUPDATE,
+        data: { state: { key: 'value' } },
+      });
+      // Two hops: the shim message, then the relayed local STATEUPDATE.
+      await new Promise(resolve => setTimeout(resolve, 0));
+      await new Promise(resolve => setTimeout(resolve, 0));
+
+      expect(onStateUpdate).toHaveBeenCalledTimes(1);
+    });
+
+    it('should populate _shimData with existing contentState data for matching namespaces', () => {
+      const existingState = {
+        myShim: { savedKey: 'savedValue' },
+      };
+
+      return new Promise(resolve => {
+        sandbox.mediator.sendMessage = jest.fn();
+        sandbox.initialize(existingState, {}, 'http://test.com', 'testns');
+
+        const registration = {
+          shims: ['myShim'],
+        };
+
+        sandbox.on(events.HANDLER_REGISTRATION, () => {
+          resolve();
+        });
+
+        sandbox.mediator.sendLocalMessage({
+          nameSpace,
+          event: events.HANDLER_REGISTRATION,
+          data: registration,
+        });
+      }).then(() => {
+        expect(sandbox._shimData.myShim).toEqual({ savedKey: 'savedValue' });
+      });
+    });
+  });
+
+  describe('progress from state updates', () => {
+    beforeEach(async () => {
+      sandbox.initialize({}, {}, 'http://test.com', 'testns');
+      await new Promise(resolve => setTimeout(resolve, 0));
+      sandbox.mediator.sendLocalMessage({
+        nameSpace,
+        event: events.HANDLER_REGISTRATION,
+        data: {
+          shims: ['progressShim', 'noProgressShim'],
+        },
+      });
+      await new Promise(resolve => setTimeout(resolve, 0));
+    });
+
+    it('should extract and store progress from STATEUPDATE when progress is present', async () => {
+      expect(sandbox._iframeProgress).toBeNull();
+
+      sandbox.mediator.sendLocalMessage({
+        nameSpace: 'progressShim',
+        event: events.STATEUPDATE,
+        data: { state: { someData: true }, progress: 0.65 },
+      });
+      await new Promise(resolve => setTimeout(resolve, 0));
+
+      expect(sandbox._iframeProgress).toBe(0.65);
+    });
+
+    it('should store state data separately from progress', async () => {
+      sandbox.mediator.sendLocalMessage({
+        nameSpace: 'progressShim',
+        event: events.STATEUPDATE,
+        data: { state: { myKey: 'myValue' }, progress: 0.5 },
+      });
+      await new Promise(resolve => setTimeout(resolve, 0));
+
+      expect(sandbox._shimData.progressShim).toEqual({ myKey: 'myValue' });
+    });
+
+    it('should return stored iframe progress from getProgress()', async () => {
+      sandbox.mediator.sendLocalMessage({
+        nameSpace: 'progressShim',
+        event: events.STATEUPDATE,
+        data: { state: {}, progress: 0.8 },
+      });
+      await new Promise(resolve => setTimeout(resolve, 0));
+
+      expect(sandbox.getProgress()).toBe(0.8);
+    });
+
+    it('should handle STATEUPDATE without progress field', async () => {
+      sandbox.mediator.sendLocalMessage({
+        nameSpace: 'noProgressShim',
+        event: events.STATEUPDATE,
+        data: { state: { rawData: 'value' } },
+      });
+      await new Promise(resolve => setTimeout(resolve, 0));
+
+      // Progress should remain null
+      expect(sandbox._iframeProgress).toBeNull();
+      // Data should be stored from state property
+      expect(sandbox._shimData.noProgressShim).toEqual({ rawData: 'value' });
+    });
+  });
+
+  describe('destroy method', () => {
+    it('should stop handling messages so the client can be collected', async () => {
+      sandbox.initialize({}, {}, 'http://test.com', 'testns');
+      await new Promise(resolve => setTimeout(resolve, 0));
+      sandbox.mediator.sendLocalMessage({
+        nameSpace,
+        event: events.HANDLER_REGISTRATION,
+        data: { shims: ['progressShim'] },
+      });
+      await new Promise(resolve => setTimeout(resolve, 0));
+
+      sandbox.destroy();
+
+      sandbox.mediator.sendLocalMessage({
+        nameSpace: 'progressShim',
+        event: events.STATEUPDATE,
+        data: { state: {}, progress: 0.9 },
+      });
+      await new Promise(resolve => setTimeout(resolve, 0));
+
+      expect(sandbox.getProgress()).toBeNull();
+    });
+  });
 });
diff --git a/packages/kolibri-sandbox/test/mediator.spec.js b/packages/kolibri-sandbox/test/mediator.spec.js
index 3b846ebde32..e916f92f12f 100644
--- a/packages/kolibri-sandbox/test/mediator.spec.js
+++ b/packages/kolibri-sandbox/test/mediator.spec.js
@@ -167,6 +167,13 @@ describe('Mediator', () => {
         });
       });
     });
+    it('should drop the message when the remote is null', () => {
+      // An iframe's contentWindow is null while it swaps documents.
+      mediator.remote = null;
+      expect(() =>
+        mediator.sendMessage({ data: 'testData', event: 'testEvent', nameSpace: 'testNameSpace' }),
+      ).not.toThrow();
+    });
   });
   describe('registerMessageHandler method', () => {
     it('should add a callback to the array of callbacks for that nameSpace and event', () => {
diff --git a/packages/kolibri-sandbox/webpack.config.js b/packages/kolibri-sandbox/webpack.config.js
index b2b3503277c..aa49713ba68 100644
--- a/packages/kolibri-sandbox/webpack.config.js
+++ b/packages/kolibri-sandbox/webpack.config.js
@@ -29,66 +29,72 @@ Plugin.prototype.apply = function (compiler) {
   }
 };
 
-module.exports = {
-  entry: path.resolve(__dirname, './src/iframe.js'),
-  resolve: {
-    fallback: {
-      stream: require.resolve('web-streams-polyfill/es5'),
+module.exports = (env, argv) => {
+  // Sandbox handlers are served by the webpack dev server in development, so the
+  // alternate origin has to be allowed to reach it - including over ws: for hot
+  // reload, as http: sources do not match the websocket scheme. Mirrors the
+  // CSP_DEFAULT_SRC additions in kolibri/deployment/default/settings/dev.py.
+  const devCSP = argv.mode !== 'production' ? ' http://localhost:* http://127.0.0.1:* ws:' : '';
+
+  return {
+    entry: path.resolve(__dirname, './src/iframe.js'),
+    output: {
+      filename: 'sandbox-[contenthash].js',
+      chunkFilename: 'sandbox-[name]-[contenthash].bundle.js',
+      path: path.resolve(__dirname, '../../kolibri/core/content/static/sandbox'),
     },
-  },
-  output: {
-    filename: 'sandbox-[contenthash].js',
-    chunkFilename: 'sandbox-[name]-[contenthash].bundle.js',
-    path: path.resolve(__dirname, '../../kolibri/core/content/static/sandbox'),
-  },
-  mode: 'production',
-  module: {
-    rules: [
-      {
-        test: /\.(js|mjs)$/,
-        loader: 'babel-loader',
-        exclude: [
-          // From: https://webpack.js.org/loaders/babel-loader/#exclude-libraries-that-should-not-be-transpiled
-          // \\ for Windows, / for macOS and Linux
-          /node_modules[\\/]core-js/,
-          /node_modules[\\/]webpack[\\/]buildin/,
-        ],
-        options: {
-          // Let babel auto-detect ES vs CommonJS
-          sourceType: 'unambiguous',
+    mode: argv.mode || 'production',
+    module: {
+      rules: [
+        {
+          test: /\.(js|mjs)$/,
+          loader: 'babel-loader',
+          exclude: [
+            // From: https://webpack.js.org/loaders/babel-loader/#exclude-libraries-that-should-not-be-transpiled
+            // \\ for Windows, / for macOS and Linux
+            /node_modules[\\/]core-js/,
+            /node_modules[\\/]webpack[\\/]buildin/,
+          ],
+          options: {
+            // Let babel auto-detect ES vs CommonJS
+            sourceType: 'unambiguous',
+          },
         },
-      },
-    ],
-  },
-  optimization: {
-    splitChunks: {
-      minChunks: 2,
+      ],
     },
-    minimizer: [
-      new TerserPlugin({
-        parallel: true,
-        terserOptions: {
-          mangle: {
+    optimization: {
+      splitChunks: {
+        minChunks: 2,
+      },
+      minimizer: [
+        new TerserPlugin({
+          parallel: true,
+          terserOptions: {
+            mangle: {
+              safari10: true,
+            },
             safari10: true,
+            output: {
+              comments: false,
+            },
           },
-          safari10: true,
-          output: {
-            comments: false,
+        }),
+        new CssMinimizerPlugin({
+          minimizerOptions: {
+            preset: ['default', { reduceIdents: false, zindex: false }],
           },
-        },
-      }),
-      new CssMinimizerPlugin({
-        minimizerOptions: {
-          preset: ['default', { reduceIdents: false, zindex: false }],
+        }),
+      ],
+    },
+    plugins: [
+      new Plugin(),
+      new HtmlWebpackPlugin({
+        filename: 'sandbox-[fullhash].html',
+        template: 'src/iframe.html',
+        templateParameters: {
+          devCSP,
         },
       }),
     ],
-  },
-  plugins: [
-    new Plugin(),
-    new HtmlWebpackPlugin({
-      filename: 'sandbox-[fullhash].html',
-      template: 'src/iframe.html',
-    }),
-  ],
+  };
 };
diff --git a/packages/kolibri-common/components/BaseToolbar.vue b/packages/kolibri/components/BaseToolbar.vue
similarity index 100%
rename from packages/kolibri-common/components/BaseToolbar.vue
rename to packages/kolibri/components/BaseToolbar.vue
diff --git a/packages/kolibri-common/components/CoreFullscreen.vue b/packages/kolibri/components/Fullscreen.vue
similarity index 95%
rename from packages/kolibri-common/components/CoreFullscreen.vue
rename to packages/kolibri/components/Fullscreen.vue
index 5fbb8785247..a8757be8a23 100644
--- a/packages/kolibri-common/components/CoreFullscreen.vue
+++ b/packages/kolibri/components/Fullscreen.vue
@@ -19,7 +19,7 @@
   const MIMIC_FULLSCREEN_CLASS = 'mimic-fullscreen';
 
   export default {
-    name: 'CoreFullscreen',
+    name: 'Fullscreen',
     data() {
       return {
         isInFullscreen: false,
@@ -51,7 +51,7 @@
     },
     methods: {
       /**
-       * Toggle fullscreen mode; called by viewer components via $refs.
+       * Toggle the wrapped content in and out of fullscreen.
        * @public
        */
       toggleFullscreen() {
diff --git a/packages/kolibri/components/SandboxedContentViewer/index.js b/packages/kolibri/components/SandboxedContentViewer/index.js
new file mode 100644
index 00000000000..1ae93245481
--- /dev/null
+++ b/packages/kolibri/components/SandboxedContentViewer/index.js
@@ -0,0 +1,22 @@
+import SandboxedContentViewer from './internal/SandboxedContentViewer.vue';
+import setup from './internal/setup';
+
+/**
+ * Factory function to create a SandboxedContentViewer with baked-in options.
+ * @param {object} options - Configuration options
+ * @param {number|null} [options.defaultDuration=null] - Default duration for time-based progress
+ * @param {number|null} [options.progressPollingInterval=null] - Interval in ms to poll progress
+ * @param {Function|null} [options.urlBuilder=null] - Custom function to build content URL
+ * @param {object} [options.eventHandlers={}] - Additional sandbox event handlers
+ * @returns {object} Vue component definition
+ */
+export function createSandboxedContentViewer(options = {}) {
+  return {
+    extends: SandboxedContentViewer,
+    setup(props, context) {
+      return setup(props, context, options);
+    },
+  };
+}
+
+export default SandboxedContentViewer;
diff --git a/packages/kolibri/components/SandboxedContentViewer/internal/SandboxedContentViewer.vue b/packages/kolibri/components/SandboxedContentViewer/internal/SandboxedContentViewer.vue
new file mode 100644
index 00000000000..21f11e473ea
--- /dev/null
+++ b/packages/kolibri/components/SandboxedContentViewer/internal/SandboxedContentViewer.vue
@@ -0,0 +1,102 @@
+<template>
+
+  <Fullscreen
+    ref="fullscreenRef"
+    class="sandboxed-content-viewer"
+    @changeFullscreen="isFullscreen = $event"
+  >
+    <ViewerToolbar
+      :isInFullscreen="isFullscreen"
+      @toggleFullscreen="toggleFullscreen"
+    />
+
+    <div
+      class="iframe-container"
+      :style="containerStyle"
+    >
+      <iframe
+        ref="iframeElement"
+        class="iframe"
+        sandbox="allow-scripts allow-same-origin"
+        :style="{ backgroundColor: $themePalette.grey.v_200 }"
+        frameBorder="0"
+        :src="sandboxUrl"
+        :title="contentFrameTitle"
+        allow="fullscreen"
+      >
+      </iframe>
+
+      <KCircularLoader
+        v-if="loading"
+        :delay="false"
+        class="loader"
+      />
+    </div>
+  </Fullscreen>
+
+</template>
+
+
+<script>
+
+  import Fullscreen from 'kolibri/components/Fullscreen';
+  import ViewerToolbar from 'kolibri/components/ViewerToolbar';
+  import setup from './setup';
+
+  export default {
+    name: 'SandboxedContentViewer',
+
+    components: {
+      Fullscreen,
+      ViewerToolbar,
+    },
+
+    setup(props, context) {
+      return setup(props, context);
+    },
+
+    emits: [
+      'startTracking',
+      'stopTracking',
+      'updateProgress',
+      'updateContentState',
+      'error',
+      'navigateTo',
+      'finished',
+    ],
+  };
+
+</script>
+
+
+<style lang="scss" scoped>
+
+  @import '~kolibri-design-system/lib/styles/definitions';
+  $frame-topbar-height: 48px;
+
+  .sandboxed-content-viewer {
+    position: relative;
+    text-align: center;
+  }
+
+  .iframe-container {
+    @extend %momentum-scroll;
+
+    width: 100%;
+    height: calc(100% - #{$frame-topbar-height});
+    margin-bottom: -8px;
+    overflow: hidden;
+  }
+
+  .iframe {
+    width: 100%;
+    height: 100%;
+  }
+
+  .loader {
+    position: absolute;
+    top: calc(50% - 16px);
+    left: calc(50% - 16px);
+  }
+
+</style>
diff --git a/packages/kolibri/components/SandboxedContentViewer/internal/setup.js b/packages/kolibri/components/SandboxedContentViewer/internal/setup.js
new file mode 100644
index 00000000000..9ef2c1726c8
--- /dev/null
+++ b/packages/kolibri/components/SandboxedContentViewer/internal/setup.js
@@ -0,0 +1,76 @@
+import { ref, computed, onMounted } from 'vue';
+import { createTranslator } from 'kolibri/utils/i18n';
+import useSandbox from '../../../composables/internal/useSandbox';
+
+const FRAME_TOPBAR_HEIGHT = '48px';
+
+const { contentFrameTitle$ } = createTranslator('SandboxedContentViewer', {
+  contentFrameTitle: {
+    message: 'Content viewer',
+    context: 'Accessible title for the iframe that displays the content',
+  },
+});
+
+export default function sandboxedContentViewerSetup(props, context, options = {}) {
+  const {
+    defaultDuration = null,
+    progressPollingInterval = null,
+    urlBuilder = null,
+    eventHandlers = {},
+  } = options;
+
+  const viewer = useSandbox(context, {
+    defaultDuration,
+    progressPollingInterval,
+    urlBuilder,
+    eventHandlers,
+  });
+
+  const fullscreenRef = ref(null);
+  const iframeElement = ref(null);
+  const isFullscreen = ref(false);
+
+  const containerStyle = computed(() => {
+    if (isFullscreen.value) {
+      return {
+        position: 'absolute',
+        top: FRAME_TOPBAR_HEIGHT,
+        bottom: 0,
+      };
+    }
+    return {};
+  });
+
+  function toggleFullscreen() {
+    fullscreenRef.value?.toggleFullscreen();
+  }
+
+  onMounted(() => {
+    viewer.iframeRef.value = iframeElement.value;
+
+    if (viewer.isSandboxed.value) {
+      // Initialize sandbox immediately (like the old code did)
+      // The sandbox handles the iframe load timing internally via READYCHECK/IFRAMEREADY
+      viewer.initializeSandbox();
+      context.emit('startTracking');
+    } else {
+      viewer.reportLoadingFailure(
+        `No sandbox handler registered for preset ${viewer.defaultItemPreset.value}`,
+      );
+    }
+  });
+
+  return {
+    fullscreenRef,
+    iframeElement,
+    isFullscreen,
+    // Exposed so a host can bind its own handlers to the client once it exists.
+    sandbox: viewer.sandbox,
+    loading: viewer.loading,
+    sandboxUrl: viewer.sandboxUrl,
+    contentFrameTitle: contentFrameTitle$(),
+    containerStyle,
+    toggleFullscreen,
+    getProgress: viewer.getProgress,
+  };
+}
diff --git a/packages/kolibri-common/components/ViewerToolbar.vue b/packages/kolibri/components/ViewerToolbar.vue
similarity index 97%
rename from packages/kolibri-common/components/ViewerToolbar.vue
rename to packages/kolibri/components/ViewerToolbar.vue
index 203b78a63fe..b6e350256a0 100644
--- a/packages/kolibri-common/components/ViewerToolbar.vue
+++ b/packages/kolibri/components/ViewerToolbar.vue
@@ -29,7 +29,7 @@
 <script>
 
   import { createTranslator } from 'kolibri/utils/i18n';
-  import BaseToolbar from 'kolibri-common/components/BaseToolbar';
+  import BaseToolbar from 'kolibri/components/BaseToolbar';
 
   export const viewerToolbarStrings = createTranslator('ViewerToolbar', {
     exitFullscreen: {
diff --git a/packages/kolibri/components/__tests__/SandboxedContentViewer.spec.js b/packages/kolibri/components/__tests__/SandboxedContentViewer.spec.js
new file mode 100644
index 00000000000..985244cc7b5
--- /dev/null
+++ b/packages/kolibri/components/__tests__/SandboxedContentViewer.spec.js
@@ -0,0 +1,110 @@
+import { render, screen } from '@testing-library/vue';
+import { computed, defineComponent, nextTick, provide } from 'vue';
+import { viewerToolbarStrings } from 'kolibri/components/ViewerToolbar';
+import { ContentErrorConstants } from 'kolibri/constants';
+import { CONTENT_VIEWER_CONTEXT_KEY } from '../internal/ContentViewer';
+import SandboxedContentViewer from '../SandboxedContentViewer/internal/SandboxedContentViewer';
+
+jest.mock('kolibri-sandbox', () =>
+  jest.fn().mockImplementation(function () {
+    this.events = { LOADING: 'loading', ERROR: 'error' };
+    this.initialize = jest.fn();
+    this.updateData = jest.fn();
+    this.destroy = jest.fn();
+    this.getProgress = () => null;
+    this.on = jest.fn();
+    this.onStateUpdate = jest.fn();
+  }),
+);
+
+jest.mock('kolibri/urls', () => ({ sandbox: () => '/sandbox/' }));
+
+let mockHandlerUrl = '/handler.js';
+
+jest.mock('kolibri', () => ({
+  __esModule: true,
+  default: {
+    getSandboxHandlerUrl: () => mockHandlerUrl,
+    presetViewerComponent: () => ({ name: 'StubViewer', render: h => h('div') }),
+  },
+}));
+
+const FILE = {
+  storage_url: '/content/file.zip',
+  checksum: 'abc123',
+  preset: 'html5_zip',
+  available: true,
+  supplementary: false,
+  thumbnail: false,
+};
+
+function renderViewer() {
+  const onError = jest.fn();
+  const rendered = render(
+    defineComponent({
+      components: { SandboxedContentViewer },
+      setup() {
+        provide(CONTENT_VIEWER_CONTEXT_KEY, {
+          files: computed(() => [FILE]),
+          defaultFile: computed(() => FILE),
+          defaultItemPreset: computed(() => 'html5_zip'),
+          itemData: computed(() => null),
+          itemId: computed(() => null),
+          answerState: computed(() => ({})),
+          showCorrectAnswer: computed(() => false),
+          interactive: computed(() => true),
+          lang: computed(() => null),
+          options: computed(() => ({})),
+          extraFields: computed(() => ({})),
+          userId: computed(() => 'user-id'),
+          allowHints: computed(() => true),
+          timeSpent: computed(() => 0),
+          duration: computed(() => null),
+          userFullName: computed(() => 'Test User'),
+          progress: computed(() => 0),
+          embedded: computed(() => false),
+          setCustomExtractors: () => {},
+          registerAssessmentApi: () => {},
+        });
+        return { onError };
+      },
+      template: '<SandboxedContentViewer @error="onError" />',
+    }),
+  );
+  return { ...rendered, onError };
+}
+
+describe('SandboxedContentViewer', () => {
+  afterEach(() => {
+    mockHandlerUrl = '/handler.js';
+  });
+
+  it('renders the sandbox iframe', () => {
+    const { container } = renderViewer();
+
+    const iframe = container.querySelector('iframe');
+    expect(iframe).toBeTruthy();
+    expect(iframe).toHaveAttribute('src', '/sandbox/');
+    expect(iframe).toHaveAttribute('sandbox', 'allow-scripts allow-same-origin');
+  });
+
+  it('offers a fullscreen toggle', () => {
+    renderViewer();
+
+    expect(
+      screen.getByRole('button', { name: viewerToolbarStrings.enterFullscreen$() }),
+    ).toBeInTheDocument();
+  });
+
+  it('reports an error and stops loading when no handler is registered for the preset', async () => {
+    mockHandlerUrl = null;
+
+    const { onError, container } = renderViewer();
+    await nextTick();
+
+    expect(onError).toHaveBeenCalledWith(
+      expect.objectContaining({ error: ContentErrorConstants.LOADING_ERROR }),
+    );
+    expect(container.querySelector('.loader')).toBeNull();
+  });
+});
diff --git a/packages/kolibri-common/components/__tests__/ViewerToolbar.spec.js b/packages/kolibri/components/__tests__/ViewerToolbar.spec.js
similarity index 100%
rename from packages/kolibri-common/components/__tests__/ViewerToolbar.spec.js
rename to packages/kolibri/components/__tests__/ViewerToolbar.spec.js
diff --git a/packages/kolibri/components/internal/ContentViewer/index.js b/packages/kolibri/components/internal/ContentViewer/index.js
index c6537b20eea..8a579bc52d0 100644
--- a/packages/kolibri/components/internal/ContentViewer/index.js
+++ b/packages/kolibri/components/internal/ContentViewer/index.js
@@ -341,6 +341,7 @@ export default {
       element: computed(() => props.element),
       files,
       defaultFile,
+      defaultItemPreset,
       itemData: computed(() => props.itemData),
       itemId: computed(() => props.itemId),
       answerState: computed(() => props.answerState),
diff --git a/packages/kolibri/composables/__tests__/useSandbox.spec.js b/packages/kolibri/composables/__tests__/useSandbox.spec.js
new file mode 100644
index 00000000000..7ab64bb1e1a
--- /dev/null
+++ b/packages/kolibri/composables/__tests__/useSandbox.spec.js
@@ -0,0 +1,179 @@
+import { render } from '@testing-library/vue';
+import { computed, defineComponent, provide } from 'vue';
+import { CONTENT_VIEWER_CONTEXT_KEY } from '../../components/internal/ContentViewer';
+import useSandbox from '../internal/useSandbox';
+
+// The sandbox client wraps a real iframe and postMessage handshake - stub it and
+// drive its event callbacks directly.
+const sandboxInstances = [];
+
+jest.mock('kolibri-sandbox', () =>
+  jest.fn().mockImplementation(function () {
+    this.events = { LOADING: 'loading', ERROR: 'error' };
+    this.progress = null;
+    this.stateUpdateCallback = null;
+    this.initialize = jest.fn();
+    this.updateData = jest.fn();
+    this.destroy = jest.fn();
+    this.getProgress = () => this.progress;
+    this.on = jest.fn();
+    this.onStateUpdate = callback => {
+      this.stateUpdateCallback = callback;
+    };
+    sandboxInstances.push(this);
+  }),
+);
+
+jest.mock('kolibri/urls', () => ({ sandbox: () => '/sandbox/' }));
+
+jest.mock('kolibri', () => ({
+  __esModule: true,
+  default: {
+    getSandboxHandlerUrl: () => '/handler.js',
+    presetViewerComponent: () => ({ name: 'StubViewer', render: h => h('div') }),
+  },
+}));
+
+const FILE = {
+  storage_url: '/content/file.zip',
+  checksum: 'abc123',
+  preset: 'html5_zip',
+  available: true,
+  supplementary: false,
+  thumbnail: false,
+};
+
+// Render a component that calls useSandbox against a stubbed ContentViewer context.
+// Returns the composable API, the events it emitted, and the stub sandbox instance.
+function renderSandbox({ options = {}, timeSpent = 0, duration = null, sandboxOptions = {} } = {}) {
+  const emitted = [];
+  let api;
+
+  const Child = defineComponent({
+    setup() {
+      api = useSandbox(
+        { emit: (event, payload) => emitted.push([event, payload]) },
+        sandboxOptions,
+      );
+      api.iframeRef.value = document.createElement('iframe');
+      return () => null;
+    },
+  });
+
+  const utils = render(
+    defineComponent({
+      components: { Child },
+      setup() {
+        provide(CONTENT_VIEWER_CONTEXT_KEY, {
+          files: computed(() => [FILE]),
+          defaultFile: computed(() => FILE),
+          defaultItemPreset: computed(() => 'html5_zip'),
+          itemData: computed(() => null),
+          itemId: computed(() => null),
+          answerState: computed(() => ({})),
+          showCorrectAnswer: computed(() => false),
+          interactive: computed(() => true),
+          lang: computed(() => null),
+          options: computed(() => options),
+          extraFields: computed(() => ({})),
+          userId: computed(() => 'user-id'),
+          allowHints: computed(() => true),
+          timeSpent: computed(() => timeSpent),
+          duration: computed(() => duration),
+          userFullName: computed(() => 'Test User'),
+          progress: computed(() => 0),
+          embedded: computed(() => false),
+          setCustomExtractors: () => {},
+          registerAssessmentApi: () => {},
+        });
+      },
+      template: '<Child />',
+    }),
+  );
+
+  return { api, emitted, utils, sandbox: () => sandboxInstances[sandboxInstances.length - 1] };
+}
+
+describe('useSandbox', () => {
+  beforeEach(() => {
+    sandboxInstances.length = 0;
+  });
+
+  describe('progress reporting', () => {
+    it('reports no progress on a state update when the sandbox reports none', async () => {
+      const { api, emitted, sandbox } = renderSandbox({ timeSpent: 30, duration: 300 });
+      await api.initializeSandbox();
+
+      sandbox().progress = null;
+      sandbox().stateUpdateCallback({});
+
+      expect(emitted.filter(([event]) => event === 'updateProgress')).toHaveLength(0);
+    });
+
+    it('falls back to duration-based progress when polling and the sandbox reports none', async () => {
+      const { api, emitted, utils } = renderSandbox({
+        timeSpent: 30,
+        duration: 300,
+        sandboxOptions: { progressPollingInterval: 5000 },
+      });
+      await api.initializeSandbox();
+      utils.unmount();
+
+      expect(emitted).toContainEqual(['updateProgress', 0.1]);
+    });
+
+    it('prefers the sandbox progress over the duration-based value', async () => {
+      const { api, emitted, sandbox } = renderSandbox({ timeSpent: 30, duration: 300 });
+      await api.initializeSandbox();
+
+      sandbox().progress = 0.5;
+      sandbox().stateUpdateCallback({});
+
+      expect(emitted).toContainEqual(['updateProgress', 0.5]);
+    });
+
+    it('ignores the sandbox progress when the content forces duration-based progress', async () => {
+      const { api, emitted, sandbox } = renderSandbox({
+        options: { force_duration_based_progress: true },
+        timeSpent: 30,
+        duration: 300,
+      });
+      await api.initializeSandbox();
+
+      sandbox().progress = 0.5;
+      sandbox().stateUpdateCallback({});
+
+      expect(emitted).not.toContainEqual(['updateProgress', 0.5]);
+    });
+
+    it('emits finished once progress reaches 1', async () => {
+      const { api, emitted, sandbox } = renderSandbox({ timeSpent: 300, duration: 300 });
+      await api.initializeSandbox();
+
+      sandbox().progress = 1;
+      sandbox().stateUpdateCallback({});
+
+      expect(emitted).toContainEqual(['finished', undefined]);
+    });
+
+    it('emits nothing when neither the sandbox nor a duration gives progress', async () => {
+      const { api, emitted, sandbox } = renderSandbox();
+      await api.initializeSandbox();
+
+      sandbox().progress = null;
+      sandbox().stateUpdateCallback({});
+
+      expect(emitted.filter(([event]) => event === 'updateProgress')).toHaveLength(0);
+    });
+  });
+
+  it('tears the sandbox down on unmount', async () => {
+    const { api, utils, sandbox } = renderSandbox();
+    await api.initializeSandbox();
+    const instance = sandbox();
+
+    utils.unmount();
+
+    expect(instance.destroy).toHaveBeenCalled();
+  });
+});
diff --git a/packages/kolibri/composables/internal/useSandbox.js b/packages/kolibri/composables/internal/useSandbox.js
new file mode 100644
index 00000000000..3e60a39ee7d
--- /dev/null
+++ b/packages/kolibri/composables/internal/useSandbox.js
@@ -0,0 +1,267 @@
+import { ref, shallowRef, computed, watch, onBeforeUnmount } from 'vue';
+import logger from 'kolibri-logging';
+import Sandbox from 'kolibri-sandbox';
+import urls from 'kolibri/urls';
+import { now } from 'kolibri/utils/serverClock';
+import useContentViewer from '../useContentViewer';
+
+const logging = logger.getLogger(__filename);
+
+/**
+ * Composable for content viewers that render inside the Kolibri sandbox.
+ *
+ * Wraps useContentViewer, taking all content and session state from it, and layers
+ * sandbox lifecycle management on top. Returns the full useContentViewer API plus the
+ * sandbox-specific state and methods, so a sandboxed viewer component only needs to call
+ * this composable.
+ * @param {object} context - The Vue component context object
+ * @param {Function} context.emit - The component's emit function for emitting events
+ * @param {object} options - Configuration options
+ * @param {number|null} [options.defaultDuration=null] - Default duration for progress
+ * @param {number|null} [options.progressPollingInterval=null] - Interval in ms to poll progress
+ * @param {Function|null} [options.urlBuilder=null] - Custom function to build content URL
+ * @param {object} [options.eventHandlers={}] - Additional sandbox event handlers
+ * @returns {object} The useContentViewer API plus sandbox state and methods
+ */
+export default function useSandbox({ emit }, options = {}) {
+  const {
+    defaultDuration = null,
+    progressPollingInterval = null,
+    urlBuilder = null,
+    eventHandlers = {},
+  } = options;
+
+  const viewer = useContentViewer({ emit }, { defaultDuration });
+
+  const {
+    options: contentOptions,
+    lang,
+    defaultFile,
+    defaultItemPreset,
+    forceDurationBasedProgress,
+    durationBasedProgress,
+    reportError,
+    reportLoadingError,
+    userId,
+    userFullName,
+    timeSpent,
+    progress,
+    extraFields,
+  } = viewer;
+
+  const iframeRef = ref(null);
+  // Returned so a consumer can bind its own handlers to the client. shallowRef because
+  // the client holds a mediator and the iframe element - deep reactivity would walk both.
+  const sandbox = shallowRef(null);
+  const loading = ref(true);
+  let progressPollTimeout = null;
+
+  const sandboxUrl = computed(() => urls.sandbox());
+
+  const sandboxHandlerUrl = computed(() => {
+    const preset = defaultItemPreset.value;
+    if (!preset) {
+      return null;
+    }
+    // Lazy require to avoid circular dependency and test initialization issues
+    const coreApp = require('kolibri').default;
+    return coreApp.getSandboxHandlerUrl(preset);
+  });
+
+  const isSandboxed = computed(() => {
+    return sandboxHandlerUrl.value !== null;
+  });
+
+  const contentUrl = computed(() => {
+    const file = defaultFile.value;
+    if (!file) {
+      return null;
+    }
+    if (urlBuilder) {
+      return urlBuilder(file, { options: contentOptions.value });
+    }
+    return file.storage_url;
+  });
+
+  /**
+   * Report a failure to load the content. The spinner is ours, so clearing it is too -
+   * nothing downstream of the error event unmounts the viewer.
+   * @param {string} message - What failed
+   */
+  function reportLoadingFailure(message) {
+    loading.value = false;
+    reportLoadingError(message);
+  }
+
+  /**
+   * Emit progress update, handling duration-based fallback.
+   * @param {number|null} sandboxProgress - Progress reported by the sandbox, or null when unknown
+   */
+  function emitProgress(sandboxProgress) {
+    let currentProgress;
+    if (forceDurationBasedProgress.value) {
+      currentProgress = durationBasedProgress.value;
+    } else {
+      currentProgress = sandboxProgress !== null ? sandboxProgress : durationBasedProgress.value;
+    }
+
+    if (currentProgress !== null) {
+      emit('updateProgress', currentProgress);
+      if (currentProgress >= 1) {
+        emit('finished');
+      }
+    }
+  }
+
+  /**
+   * Poll progress at configured interval.
+   */
+  function pollProgress() {
+    if (!progressPollingInterval || !sandbox.value) {
+      return;
+    }
+
+    const currentProgress = sandbox.value.getProgress();
+    emitProgress(currentProgress);
+
+    progressPollTimeout = setTimeout(pollProgress, progressPollingInterval);
+  }
+
+  /**
+   * Create the sandbox instance, bind its events, and load the content into the iframe.
+   */
+  async function initializeSandbox() {
+    if (!isSandboxed.value) {
+      logging.warn('initializeSandbox called but content is not sandboxed');
+      return;
+    }
+
+    if (!iframeRef.value) {
+      throw new Error('iframeRef must be set before initializing sandbox');
+    }
+
+    const file = defaultFile.value;
+    if (!file) {
+      reportLoadingFailure('No renderable file found');
+      return;
+    }
+
+    // Create sandbox instance
+    const client = new Sandbox({
+      iframe: iframeRef.value,
+      now,
+    });
+    sandbox.value = client;
+
+    // Bind standard sandbox events
+    client.onStateUpdate(data => {
+      emit('updateContentState', data);
+      const currentProgress = client.getProgress();
+      if (currentProgress !== null && !forceDurationBasedProgress.value) {
+        emitProgress(currentProgress);
+      }
+    });
+
+    client.on(client.events.LOADING, isLoading => {
+      loading.value = isLoading;
+    });
+
+    client.on(client.events.ERROR, err => {
+      loading.value = false;
+      reportError(err);
+    });
+
+    // Bind additional custom event handlers
+    for (const [eventName, handler] of Object.entries(eventHandlers)) {
+      client.on(eventName, data => handler(data, emit));
+    }
+
+    // Build user data object
+    const userData = {
+      userId: userId.value,
+      userFullName: userFullName.value,
+      progress: progress.value,
+      complete: progress.value >= 1,
+      language: lang.value?.id,
+      timeSpent: timeSpent.value,
+    };
+
+    // Initialize sandbox with content
+    client.initialize(
+      extraFields.value?.contentState || {},
+      userData,
+      contentUrl.value,
+      file.checksum,
+      { handlerUrl: sandboxHandlerUrl.value },
+    );
+
+    // Start progress polling if configured
+    if (progressPollingInterval) {
+      pollProgress();
+    }
+  }
+
+  function getProgress() {
+    return sandbox.value?.getProgress() ?? null;
+  }
+
+  function updateUserData() {
+    if (!sandbox.value) return;
+
+    sandbox.value.updateData({
+      userData: {
+        userId: userId.value,
+        userFullName: userFullName.value,
+        progress: progress.value,
+        complete: progress.value >= 1,
+        language: lang.value?.id,
+        timeSpent: timeSpent.value,
+      },
+    });
+  }
+
+  // Watch for user data changes
+  watch(
+    () => ({
+      userId: userId.value,
+      userFullName: userFullName.value,
+      progress: progress.value,
+      timeSpent: timeSpent.value,
+    }),
+    () => {
+      if (isSandboxed.value) {
+        updateUserData();
+      }
+    },
+  );
+
+  // Cleanup on unmount
+  onBeforeUnmount(() => {
+    if (progressPollTimeout) {
+      clearTimeout(progressPollTimeout);
+    }
+    // Only emit stopTracking for sandboxed content - non-sandboxed viewers handle their own
+    if (isSandboxed.value) {
+      emit('stopTracking');
+    }
+    sandbox.value?.destroy();
+    sandbox.value = null;
+  });
+
+  return {
+    ...viewer,
+
+    // Sandbox state and methods
+    sandbox,
+    iframeRef,
+    loading,
+    sandboxUrl,
+    sandboxHandlerUrl,
+    isSandboxed,
+    contentUrl,
+    reportLoadingFailure,
+    initializeSandbox,
+    getProgress,
+    updateUserData,
+  };
+}
diff --git a/packages/kolibri/composables/useContentViewer.js b/packages/kolibri/composables/useContentViewer.js
index a40f4a97583..d52b0566e2f 100644
--- a/packages/kolibri/composables/useContentViewer.js
+++ b/packages/kolibri/composables/useContentViewer.js
@@ -139,6 +139,7 @@ export default function useContentViewer(
 
   const {
     files,
+    defaultItemPreset,
     itemData,
     itemId,
     answerState,
@@ -215,6 +216,7 @@ export default function useContentViewer(
     thumbnailFiles,
     contentDirection,
     contentIsRtl,
+    defaultItemPreset,
     registerAssessmentApi,
     reportLoadingError,
     reportError,
diff --git a/packages/kolibri/internal/apiSpec.js b/packages/kolibri/internal/apiSpec.js
index c2938cc5f8d..076e076de4f 100644
--- a/packages/kolibri/internal/apiSpec.js
+++ b/packages/kolibri/internal/apiSpec.js
@@ -11,6 +11,7 @@ export default {
   'kolibri/client': require('kolibri/client'),
   'kolibri/components/AuthMessage': require('kolibri/components/AuthMessage'),
   'kolibri/components/Backdrop': require('kolibri/components/Backdrop'),
+  'kolibri/components/BaseToolbar': require('kolibri/components/BaseToolbar'),
   'kolibri/components/BottomAppBar': require('kolibri/components/BottomAppBar'),
   'kolibri/components/CoreLogo': require('kolibri/components/CoreLogo'),
   'kolibri/components/CoreMenu': require('kolibri/components/CoreMenu'),
@@ -18,10 +19,13 @@ export default {
   'kolibri/components/CoreTable': require('kolibri/components/CoreTable'),
   'kolibri/components/DownloadButton': require('kolibri/components/DownloadButton'),
   'kolibri/components/FilterTextbox': require('kolibri/components/FilterTextbox'),
+  'kolibri/components/Fullscreen': require('kolibri/components/Fullscreen'),
   'kolibri/components/GlobalSnackbar': require('kolibri/components/GlobalSnackbar'),
   'kolibri/components/PrivacyInfoModal': require('kolibri/components/PrivacyInfoModal'),
+  'kolibri/components/SandboxedContentViewer': require('kolibri/components/SandboxedContentViewer'),
   'kolibri/components/SkipNavigationLink': require('kolibri/components/SkipNavigationLink'),
   'kolibri/components/SyncStatusDisplay': require('kolibri/components/SyncStatusDisplay'),
+  'kolibri/components/ViewerToolbar': require('kolibri/components/ViewerToolbar'),
   'kolibri/components/error/AppError': require('kolibri/components/error/AppError'),
   'kolibri/components/error/ReportErrorModal': require('kolibri/components/error/ReportErrorModal'),
   'kolibri/components/error/TechnicalTextBlock': require('kolibri/components/error/TechnicalTextBlock'),
diff --git a/packages/kolibri/internal/pluginMediator.js b/packages/kolibri/internal/pluginMediator.js
index 1f73ab03c74..88077bb3351 100644
--- a/packages/kolibri/internal/pluginMediator.js
+++ b/packages/kolibri/internal/pluginMediator.js
@@ -25,6 +25,7 @@ const publicMethods = [
   'registerLanguageAssets',
   'registerContentViewer',
   'loadDirectionalCSS',
+  'getSandboxHandlerUrl',
   'ready',
   'presetViewerComponent',
   'elementViewerComponent',
@@ -87,6 +88,10 @@ export default function pluginMediatorFactory(facade) {
      * Keep track of urls for content viewers.
      */
     _contentViewerUrls: {},
+    /**
+     * Keep track of sandbox handler URLs, keyed by content preset.
+     */
+    _sandboxHandlerUrls: {},
     /**
      * Public ready method - called when plugins can start operating
      */
@@ -198,12 +203,34 @@ export default function pluginMediatorFactory(facade) {
      * files that constitute the kolibriModule
      * @param {string[]} contentPresets - the names of presets this content viewer can render
      * @param {string[]} domTags - DOM tags handled
+     * @param {string|null} sandboxHandlerUrl - URL of the sandbox handler, for sandboxed viewers
      */
-    registerContentViewer(kolibriModuleName, kolibriModuleUrls, contentPresets = [], domTags = []) {
+    registerContentViewer(
+      kolibriModuleName,
+      kolibriModuleUrls,
+      contentPresets = [],
+      domTags = [],
+      sandboxHandlerUrl = null,
+    ) {
       this._contentViewerUrls[kolibriModuleName] = kolibriModuleUrls;
 
       this._registerViewerType(kolibriModuleName, contentPresets, VIEWER_SUFFIX);
       this._registerViewerType(kolibriModuleName, domTags, DOM_VIEWER_SUFFIX);
+
+      if (sandboxHandlerUrl) {
+        for (const preset of contentPresets) {
+          this._sandboxHandlerUrls[preset] = sandboxHandlerUrl;
+        }
+      }
+    },
+
+    /**
+     * Get the sandbox handler URL for a given content preset.
+     * @param {string} preset - The content preset
+     * @returns {string|null} The sandbox handler URL, or null if none is registered
+     */
+    getSandboxHandlerUrl(preset) {
+      return this._sandboxHandlerUrls[preset] || null;
     },
 
     /**
@@ -218,7 +245,13 @@ export default function pluginMediatorFactory(facade) {
         const moduleName = element.getAttribute('data-viewer');
         try {
           const data = JSON.parse(decodeMarkedSafeText(element.innerHTML.trim()));
-          this.registerContentViewer(moduleName, data.urls, data.presets, data.css_selectors);
+          this.registerContentViewer(
+            moduleName,
+            data.urls,
+            data.presets,
+            data.css_selectors,
+            data.sandboxHandlerUrl,
+          );
         } catch (e) {
           logger.error(`Error parsing content viewer for ${moduleName}`);
         }
diff --git a/packages/kolibri/package.json b/packages/kolibri/package.json
index ad8a2ee6b6f..b3fe3a25d7b 100644
--- a/packages/kolibri/package.json
+++ b/packages/kolibri/package.json
@@ -17,6 +17,7 @@
     "./client": "./client",
     "./components/AuthMessage": "./components/AuthMessage",
     "./components/Backdrop": "./components/Backdrop",
+    "./components/BaseToolbar": "./components/BaseToolbar",
     "./components/BottomAppBar": "./components/BottomAppBar",
     "./components/CoreLogo": "./components/CoreLogo",
     "./components/CoreMenu": "./components/CoreMenu",
@@ -24,10 +25,13 @@
     "./components/CoreTable": "./components/CoreTable",
     "./components/DownloadButton": "./components/DownloadButton",
     "./components/FilterTextbox": "./components/FilterTextbox",
+    "./components/Fullscreen": "./components/Fullscreen",
     "./components/GlobalSnackbar": "./components/GlobalSnackbar",
     "./components/PrivacyInfoModal": "./components/PrivacyInfoModal",
+    "./components/SandboxedContentViewer": "./components/SandboxedContentViewer",
     "./components/SkipNavigationLink": "./components/SkipNavigationLink",
     "./components/SyncStatusDisplay": "./components/SyncStatusDisplay",
+    "./components/ViewerToolbar": "./components/ViewerToolbar",
     "./components/error/AppError": "./components/error/AppError",
     "./components/error/ReportErrorModal": "./components/error/ReportErrorModal",
     "./components/error/TechnicalTextBlock": "./components/error/TechnicalTextBlock",
@@ -90,10 +94,12 @@
     "kolibri-design-system": "catalog:",
     "kolibri-logging": "workspace:*",
     "kolibri-plugin-data": "workspace:*",
+    "kolibri-sandbox": "workspace:*",
     "lockr": "0.8.5",
     "lodash": "catalog:",
     "path-to-regexp": "1.9.0",
     "qs": "^6.15.2",
+    "screenfull": "^5.2.0",
     "tippy.js": "^6.3.7",
     "ua-parser-js": "^1.0.41",
     "vue": "catalog:",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 91ed191f24f..0243ae85c1a 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -176,6 +176,9 @@ importers:
 
   kolibri/plugins/bloompub_viewer:
     dependencies:
+      core-js:
+        specifier: 'catalog:'
+        version: 3.49.0
       kolibri:
         specifier: workspace:*
         version: link:../../../packages/kolibri
@@ -191,12 +194,18 @@ importers:
       kolibri-viewer:
         specifier: workspace:*
         version: link:../../../packages/kolibri-viewer
+      kolibri-zip:
+        specifier: workspace:*
+        version: link:../../../packages/kolibri-zip
       lodash:
         specifier: 'catalog:'
         version: 4.17.23
       vue:
         specifier: 'catalog:'
         version: 2.7.16
+      web-streams-polyfill:
+        specifier: 'catalog:'
+        version: 4.2.0
 
   kolibri/plugins/coach:
     dependencies:
@@ -436,8 +445,99 @@ importers:
         specifier: 'catalog:'
         version: 5.9.0(vue-template-compiler@2.7.16)(vue@2.7.16)
 
+  kolibri/plugins/h5p_viewer:
+    dependencies:
+      core-js:
+        specifier: 'catalog:'
+        version: 3.49.0
+      dayjs:
+        specifier: ^1.11.20
+        version: 1.11.20
+      iri:
+        specifier: ^1.3.1
+        version: 1.3.1
+      is-language-code:
+        specifier: ^3.1.0
+        version: 3.1.0
+      iso8601-duration:
+        specifier: ^2.1.4
+        version: 2.1.4
+      kolibri:
+        specifier: workspace:*
+        version: link:../../../packages/kolibri
+      kolibri-sandbox:
+        specifier: workspace:*
+        version: link:../../../packages/kolibri-sandbox
+      kolibri-viewer:
+        specifier: workspace:*
+        version: link:../../../packages/kolibri-viewer
+      kolibri-zip:
+        specifier: workspace:*
+        version: link:../../../packages/kolibri-zip
+      lodash:
+        specifier: 'catalog:'
+        version: 4.17.23
+      toposort-class:
+        specifier: ^1.0.1
+        version: 1.0.1
+      uuid:
+        specifier: ^14.0.1
+        version: 14.0.1
+      web-streams-polyfill:
+        specifier: 'catalog:'
+        version: 4.2.0
+    devDependencies:
+      '@babel/core':
+        specifier: ^8.0.0
+        version: 8.0.1
+      '@babel/preset-env':
+        specifier: ^8.0.0
+        version: 8.0.2(@babel/core@8.0.1)
+      babel-loader:
+        specifier: ^10.1.1
+        version: 10.1.1(@babel/core@8.0.1)(webpack@5.106.2)
+      babel-plugin-polyfill-corejs3:
+        specifier: ^1.0.0
+        version: 1.0.0(@babel/core@8.0.1)
+      browserslist-config-kolibri:
+        specifier: workspace:*
+        version: link:../../../packages/browserslist-config-kolibri
+      css-loader:
+        specifier: 7.1.2
+        version: 7.1.2(webpack@5.106.2)
+      css-minimizer-webpack-plugin:
+        specifier: 8.0.0
+        version: 8.0.0(webpack@5.106.2)
+      html-webpack-plugin:
+        specifier: 5.6.5
+        version: 5.6.5(webpack@5.106.2)
+      jquery:
+        specifier: 3.5.1
+        version: 3.5.1
+      jszip:
+        specifier: ^3.10.1
+        version: 3.10.1
+      mini-css-extract-plugin:
+        specifier: ^2.9.4
+        version: 2.10.0(webpack@5.106.2)
+      purgecss:
+        specifier: ^6.0.0
+        version: 6.0.0
+      terser-webpack-plugin:
+        specifier: ^5.3.14
+        version: 5.6.1(postcss@8.5.23)(webpack@5.106.2)
+      webpack:
+        specifier: ^5.103.0
+        version: 5.106.2(postcss@8.5.23)(webpack-cli@7.0.2)
+      webpack-cli:
+        specifier: ^7.0.2
+        version: 7.0.2(webpack-dev-server@5.2.6)(webpack@5.106.2)
+
   kolibri/plugins/html5_viewer:
     dependencies:
+      core-js:
+        specifier: 'catalog:'
+        version: 3.49.0
       kolibri:
         specifier: workspace:*
         version: link:../../../packages/kolibri
@@ -1137,6 +1237,9 @@ importers:
       kolibri-plugin-data:
         specifier: workspace:*
         version: link:../kolibri-plugin-data
+      kolibri-sandbox:
+        specifier: workspace:*
+        version: link:../kolibri-sandbox
       lockr:
         specifier: 0.8.5
         version: 0.8.5
@@ -1149,6 +1252,9 @@ importers:
       qs:
         specifier: ^6.15.2
         version: 6.15.2
+      screenfull:
+        specifier: ^5.2.0
+        version: 5.2.0
       tippy.js:
         specifier: ^6.3.7
         version: 6.3.7
@@ -1287,7 +1393,7 @@ importers:
         version: 2.7.16
       webpack:
         specifier: ^5.102.0
-        version: 5.104.1(@swc/core@1.15.24(@swc/helpers@0.5.23))(webpack-cli@7.0.2)
+        version: 5.104.1(@swc/core@1.15.24(@swc/helpers@0.5.23))(postcss@8.5.23)(webpack-cli@7.0.2)
       webpack-cli:
         specifier: ^7.0.2
         version: 7.0.2(webpack-dev-server@5.2.6)(webpack@5.104.1)
@@ -1662,33 +1768,9 @@ importers:
       core-js:
         specifier: 'catalog:'
         version: 3.49.0
-      dayjs:
-        specifier: ^1.11.20
-        version: 1.11.20
-      iri:
-        specifier: ^1.3.1
-        version: 1.3.1
-      is-language-code:
-        specifier: ^3.1.0
-        version: 3.1.0
-      iso8601-duration:
-        specifier: ^2.1.4
-        version: 2.1.4
-      kolibri-zip:
-        specifier: workspace:*
-        version: link:../kolibri-zip
-      lodash:
-        specifier: 'catalog:'
-        version: 4.17.23
-      toposort-class:
-        specifier: ^1.0.1
-        version: 1.0.1
       uuid:
         specifier: ^14.0.1
         version: 14.0.1
-      web-streams-polyfill:
-        specifier: 'catalog:'
-        version: 4.2.0
     devDependencies:
       '@babel/core':
         specifier: ^8.0.0
@@ -1714,21 +1796,9 @@ importers:
       html-webpack-plugin:
         specifier: 5.6.5
         version: 5.6.5(webpack@5.104.1)
-      jquery:
-        specifier: 3.5.1
-        version: 3.5.1
-      jszip:
-        specifier: ^3.10.1
-        version: 3.10.1
-      mini-css-extract-plugin:
-        specifier: ^2.9.4
-        version: 2.10.0(webpack@5.104.1)
       mutationobserver-shim:
         specifier: ^0.3.7
         version: 0.3.7
-      purgecss:
-        specifier: ^6.0.0
-        version: 6.0.0
       terser-webpack-plugin:
         specifier: ^5.3.14
         version: 5.3.16(webpack@5.104.1)
@@ -10946,7 +11016,7 @@ snapshots:
 
   '@es-joy/jsdoccomment@0.86.0':
     dependencies:
-      '@types/estree': 1.0.8
+      '@types/estree': 1.0.9
       '@typescript-eslint/types': 8.58.2
       comment-parser: 1.4.6
       esquery: 1.7.0
@@ -12218,7 +12288,7 @@ snapshots:
   '@npmcli/fs@1.1.1':
     dependencies:
       '@gar/promisify': 1.1.3
-      semver: 7.7.4
+      semver: 7.8.5
 
   '@npmcli/fs@2.1.2':
     dependencies:
@@ -12555,17 +12625,16 @@ snapshots:
   '@types/eslint-scope@3.7.7':
     dependencies:
       '@types/eslint': 9.6.1
-      '@types/estree': 1.0.8
+      '@types/estree': 1.0.9
 
   '@types/eslint@9.6.1':
     dependencies:
-      '@types/estree': 1.0.8
+      '@types/estree': 1.0.9
       '@types/json-schema': 7.0.15
 
   '@types/estree@1.0.8': {}
 
-  '@types/estree@1.0.9':
-    optional: true
+  '@types/estree@1.0.9': {}
 
   '@types/express-serve-static-core@4.19.9':
     dependencies:
@@ -12726,7 +12795,7 @@ snapshots:
       '@typescript-eslint/visitor-keys': 8.53.1
       debug: 4.4.3
       minimatch: 9.0.5
-      semver: 7.7.4
+      semver: 7.8.5
       tinyglobby: 0.2.15
       ts-api-utils: 2.4.0(typescript@5.9.3)
       typescript: 5.9.3
@@ -13256,7 +13325,6 @@ snapshots:
   acorn-import-phases@1.0.4(acorn@8.18.0):
     dependencies:
       acorn: 8.18.0
-    optional: true
 
   acorn-jsx@5.3.2(acorn@7.4.1):
     dependencies:
@@ -13272,8 +13340,7 @@ snapshots:
 
   acorn@8.17.0: {}
 
-  acorn@8.18.0:
-    optional: true
+  acorn@8.18.0: {}
 
   aes-decrypter@3.1.3:
     dependencies:
@@ -14135,16 +14202,29 @@ snapshots:
 
   css-loader@7.1.2(webpack@5.104.1):
     dependencies:
-      icss-utils: 5.1.0(postcss@8.5.6)
-      postcss: 8.5.6
-      postcss-modules-extract-imports: 3.1.0(postcss@8.5.6)
-      postcss-modules-local-by-default: 4.2.0(postcss@8.5.6)
-      postcss-modules-scope: 3.2.1(postcss@8.5.6)
-      postcss-modules-values: 4.0.0(postcss@8.5.6)
+      icss-utils: 5.1.0(postcss@8.5.23)
+      postcss: 8.5.23
+      postcss-modules-extract-imports: 3.1.0(postcss@8.5.23)
+      postcss-modules-local-by-default: 4.2.0(postcss@8.5.23)
+      postcss-modules-scope: 3.2.1(postcss@8.5.23)
+      postcss-modules-values: 4.0.0(postcss@8.5.23)
       postcss-value-parser: 4.2.0
-      semver: 7.7.3
+      semver: 7.8.5
     optionalDependencies:
-      webpack: 5.104.1(@swc/core@1.15.24(@swc/helpers@0.5.23))(webpack-cli@7.0.2)
+      webpack: 5.104.1(@swc/core@1.15.24(@swc/helpers@0.5.23))(postcss@8.5.23)(webpack-cli@7.0.2)
+
+  css-loader@7.1.2(webpack@5.106.2):
+    dependencies:
+      icss-utils: 5.1.0(postcss@8.5.23)
+      postcss: 8.5.23
+      postcss-modules-extract-imports: 3.1.0(postcss@8.5.23)
+      postcss-modules-local-by-default: 4.2.0(postcss@8.5.23)
+      postcss-modules-scope: 3.2.1(postcss@8.5.23)
+      postcss-modules-values: 4.0.0(postcss@8.5.23)
+      postcss-value-parser: 4.2.0
+      semver: 7.8.5
+    optionalDependencies:
+      webpack: 5.106.2(postcss@8.5.23)(webpack-cli@7.0.2)
 
   css-minimizer-webpack-plugin@8.0.0(webpack@5.104.1):
     dependencies:
@@ -14154,7 +14234,17 @@ snapshots:
       postcss: 8.5.23
       schema-utils: 4.3.3
       serialize-javascript: 7.0.7
-      webpack: 5.104.1(@swc/core@1.15.24(@swc/helpers@0.5.23))(webpack-cli@7.0.2)
+      webpack: 5.104.1(@swc/core@1.15.24(@swc/helpers@0.5.23))(postcss@8.5.23)(webpack-cli@7.0.2)
+
+  css-minimizer-webpack-plugin@8.0.0(webpack@5.106.2):
+    dependencies:
+      '@jridgewell/trace-mapping': 0.3.31
+      cssnano: 7.1.9(postcss@8.5.23)
+      jest-worker: 30.4.1
+      postcss: 8.5.23
+      schema-utils: 4.3.3
+      serialize-javascript: 7.0.7
+      webpack: 5.106.2(postcss@8.5.23)(webpack-cli@7.0.2)
 
   css-select@4.3.0:
     dependencies:
@@ -14533,7 +14623,6 @@ snapshots:
     dependencies:
       graceful-fs: 4.2.11
       tapable: 2.3.3
-    optional: true
 
   enquirer@2.4.1:
     dependencies:
@@ -14652,8 +14741,7 @@ snapshots:
 
   es-module-lexer@2.0.0: {}
 
-  es-module-lexer@2.3.1:
-    optional: true
+  es-module-lexer@2.3.1: {}
 
   es-object-atoms@1.1.2:
     dependencies:
@@ -14710,7 +14798,7 @@ snapshots:
   eslint-compat-utils@0.5.1(eslint@9.39.4(jiti@2.6.1)):
     dependencies:
       eslint: 9.39.4(jiti@2.6.1)
-      semver: 7.7.4
+      semver: 7.8.5
 
   eslint-config-prettier@10.1.8(eslint@9.39.4(jiti@2.6.1)):
     dependencies:
@@ -15565,10 +15653,20 @@ snapshots:
       html-minifier-terser: 6.1.0
       lodash: 4.17.23
       pretty-error: 4.0.0
-      tapable: 2.3.0
+      tapable: 2.3.3
     optionalDependencies:
       webpack: 5.104.1(webpack-cli@7.0.2)
 
+  html-webpack-plugin@5.6.5(webpack@5.106.2):
+    dependencies:
+      '@types/html-minifier-terser': 6.1.0
+      html-minifier-terser: 6.1.0
+      lodash: 4.17.23
+      pretty-error: 4.0.0
+      tapable: 2.3.3
+    optionalDependencies:
+      webpack: 5.106.2(postcss@8.5.23)(webpack-cli@7.0.2)
+
   htmlparser2@6.1.0:
     dependencies:
       domelementtype: 2.3.0
@@ -15680,9 +15778,9 @@ snapshots:
     dependencies:
       safer-buffer: 2.1.2
 
-  icss-utils@5.1.0(postcss@8.5.6):
+  icss-utils@5.1.0(postcss@8.5.23):
     dependencies:
-      postcss: 8.5.6
+      postcss: 8.5.23
 
   ignore@4.0.6: {}
 
@@ -15965,7 +16063,7 @@ snapshots:
       '@babel/parser': 7.29.7
       '@istanbuljs/schema': 0.1.3
       istanbul-lib-coverage: 3.2.2
-      semver: 7.7.4
+      semver: 7.8.5
     transitivePeerDependencies:
       - supports-color
 
@@ -16582,7 +16680,7 @@ snapshots:
       jest-message-util: 30.2.0
       jest-util: 30.2.0
       pretty-format: 30.2.0
-      semver: 7.7.4
+      semver: 7.8.5
       synckit: 0.11.12
     transitivePeerDependencies:
       - supports-color
@@ -16682,7 +16780,7 @@ snapshots:
 
   jest-worker@27.5.1:
     dependencies:
-      '@types/node': 25.0.9
+      '@types/node': 26.1.1
       merge-stream: 2.0.0
       supports-color: 8.1.1
 
@@ -16920,8 +17018,7 @@ snapshots:
 
   loader-runner@4.3.1: {}
 
-  loader-runner@4.3.2:
-    optional: true
+  loader-runner@4.3.2: {}
 
   loader-utils@1.4.2:
     dependencies:
@@ -17200,7 +17297,13 @@ snapshots:
     dependencies:
       schema-utils: 4.3.3
       tapable: 2.3.0
-      webpack: 5.104.1(@swc/core@1.15.24(@swc/helpers@0.5.23))(webpack-cli@7.0.2)
+      webpack: 5.104.1(@swc/core@1.15.24(@swc/helpers@0.5.23))(postcss@8.5.23)(webpack-cli@7.0.2)
+
+  mini-css-extract-plugin@2.10.0(webpack@5.106.2):
+    dependencies:
+      schema-utils: 4.3.3
+      tapable: 2.3.0
+      webpack: 5.106.2(postcss@8.5.23)(webpack-cli@7.0.2)
 
   minimalistic-assert@1.0.1: {}
 
@@ -17418,7 +17521,7 @@ snapshots:
     dependencies:
       hosted-git-info: 4.1.0
       is-core-module: 2.16.1
-      semver: 7.7.4
+      semver: 7.8.5
       validate-npm-package-license: 3.0.4
 
   normalize-path@3.0.0: {}
@@ -17721,7 +17824,7 @@ snapshots:
       postcss: 8.5.23
       semver: 7.7.4
     optionalDependencies:
-      webpack: 5.104.1(@swc/core@1.15.24(@swc/helpers@0.5.23))(webpack-cli@7.0.2)
+      webpack: 5.104.1(@swc/core@1.15.24(@swc/helpers@0.5.23))(postcss@8.5.23)(webpack-cli@7.0.2)
     transitivePeerDependencies:
       - typescript
 
@@ -17768,26 +17871,26 @@ snapshots:
       postcss: 8.5.23
       postcss-selector-parser: 7.1.4
 
-  postcss-modules-extract-imports@3.1.0(postcss@8.5.6):
+  postcss-modules-extract-imports@3.1.0(postcss@8.5.23):
     dependencies:
-      postcss: 8.5.6
+      postcss: 8.5.23
 
-  postcss-modules-local-by-default@4.2.0(postcss@8.5.6):
+  postcss-modules-local-by-default@4.2.0(postcss@8.5.23):
     dependencies:
-      icss-utils: 5.1.0(postcss@8.5.6)
-      postcss: 8.5.6
-      postcss-selector-parser: 7.1.1
+      icss-utils: 5.1.0(postcss@8.5.23)
+      postcss: 8.5.23
+      postcss-selector-parser: 7.1.4
       postcss-value-parser: 4.2.0
 
-  postcss-modules-scope@3.2.1(postcss@8.5.6):
+  postcss-modules-scope@3.2.1(postcss@8.5.23):
     dependencies:
-      postcss: 8.5.6
-      postcss-selector-parser: 7.1.1
+      postcss: 8.5.23
+      postcss-selector-parser: 7.1.4
 
-  postcss-modules-values@4.0.0(postcss@8.5.6):
+  postcss-modules-values@4.0.0(postcss@8.5.23):
     dependencies:
-      icss-utils: 5.1.0(postcss@8.5.6)
-      postcss: 8.5.6
+      icss-utils: 5.1.0(postcss@8.5.23)
+      postcss: 8.5.23
 
   postcss-normalize-charset@7.0.3(postcss@8.5.23):
     dependencies:
@@ -17996,7 +18099,7 @@ snapshots:
     dependencies:
       commander: 12.1.0
       glob: 10.5.0
-      postcss: 8.5.6
+      postcss: 8.5.23
       postcss-selector-parser: 6.1.2
 
   pvtsutils@1.3.6:
@@ -18394,7 +18497,7 @@ snapshots:
       neo-async: 2.6.2
     optionalDependencies:
       node-sass: 9.0.0
-      webpack: 5.104.1(@swc/core@1.15.24(@swc/helpers@0.5.23))(webpack-cli@7.0.2)
+      webpack: 5.104.1(@swc/core@1.15.24(@swc/helpers@0.5.23))(postcss@8.5.23)(webpack-cli@7.0.2)
 
   sax@1.6.1: {}
 
@@ -18814,7 +18917,7 @@ snapshots:
 
   style-loader@4.0.0(webpack@5.104.1):
     dependencies:
-      webpack: 5.104.1(@swc/core@1.15.24(@swc/helpers@0.5.23))(webpack-cli@7.0.2)
+      webpack: 5.104.1(@swc/core@1.15.24(@swc/helpers@0.5.23))(postcss@8.5.23)(webpack-cli@7.0.2)
 
   style-search@0.1.0: {}
 
@@ -18980,7 +19083,7 @@ snapshots:
     dependencies:
       '@swc/core': 1.15.24(@swc/helpers@0.5.23)
       '@swc/counter': 0.1.3
-      webpack: 5.104.1(@swc/core@1.15.24(@swc/helpers@0.5.23))(webpack-cli@7.0.2)
+      webpack: 5.104.1(@swc/core@1.15.24(@swc/helpers@0.5.23))(postcss@8.5.23)(webpack-cli@7.0.2)
 
   symbol-tree@3.2.4: {}
 
@@ -19002,8 +19105,7 @@ snapshots:
 
   tapable@2.3.0: {}
 
-  tapable@2.3.3:
-    optional: true
+  tapable@2.3.3: {}
 
   tar@6.2.1:
     dependencies:
@@ -19033,7 +19135,7 @@ snapshots:
       schema-utils: 4.3.3
       serialize-javascript: 6.0.2
       terser: 5.46.0
-      webpack: 5.104.1(@swc/core@1.15.24(@swc/helpers@0.5.23))(webpack-cli@7.0.2)
+      webpack: 5.104.1(@swc/core@1.15.24(@swc/helpers@0.5.23))(postcss@8.5.23)(webpack-cli@7.0.2)
     optionalDependencies:
       '@swc/core': 1.15.24(@swc/helpers@0.5.23)
 
@@ -19044,6 +19146,35 @@ snapshots:
       schema-utils: 4.3.3
       serialize-javascript: 6.0.2
       terser: 5.46.0
+      webpack: 5.104.1(webpack-cli@7.0.2)
+
+  terser-webpack-plugin@5.6.1(@swc/core@1.15.24(@swc/helpers@0.5.23))(postcss@8.5.23)(webpack@5.104.1):
+    dependencies:
+      '@jridgewell/trace-mapping': 0.3.31
+      jest-worker: 27.5.1
+      schema-utils: 4.3.3
+      terser: 5.46.0
+      webpack: 5.104.1(@swc/core@1.15.24(@swc/helpers@0.5.23))(postcss@8.5.23)(webpack-cli@7.0.2)
+    optionalDependencies:
+      '@swc/core': 1.15.24(@swc/helpers@0.5.23)
+      postcss: 8.5.23
+
+  terser-webpack-plugin@5.6.1(postcss@8.5.23)(webpack@5.106.2):
+    dependencies:
+      '@jridgewell/trace-mapping': 0.3.31
+      jest-worker: 27.5.1
+      schema-utils: 4.3.3
+      terser: 5.46.0
+      webpack: 5.106.2(postcss@8.5.23)(webpack-cli@7.0.2)
+    optionalDependencies:
+      postcss: 8.5.23
+
+  terser-webpack-plugin@5.6.1(webpack@5.104.1):
+    dependencies:
+      '@jridgewell/trace-mapping': 0.3.31
+      jest-worker: 27.5.1
+      schema-utils: 4.3.3
+      terser: 5.46.0
       webpack: 5.104.1
 
   terser-webpack-plugin@5.6.1(webpack@5.106.2):
@@ -19058,7 +19189,7 @@ snapshots:
   terser@5.46.0:
     dependencies:
       '@jridgewell/source-map': 0.3.11
-      acorn: 8.17.0
+      acorn: 8.18.0
       commander: 2.20.3
       source-map-support: 0.5.21
 
@@ -19361,7 +19492,7 @@ snapshots:
       loader-utils: 2.0.4
       mime-types: 2.1.35
       schema-utils: 3.3.0
-      webpack: 5.104.1(@swc/core@1.15.24(@swc/helpers@0.5.23))(webpack-cli@7.0.2)
+      webpack: 5.104.1(@swc/core@1.15.24(@swc/helpers@0.5.23))(postcss@8.5.23)(webpack-cli@7.0.2)
 
   url-polyfill@1.1.14: {}
 
@@ -19473,7 +19604,7 @@ snapshots:
       loader-utils: 1.4.2
       vue-hot-reload-api: 2.3.4
       vue-style-loader: 4.1.3
-      webpack: 5.104.1(@swc/core@1.15.24(@swc/helpers@0.5.23))(webpack-cli@7.0.2)
+      webpack: 5.104.1(@swc/core@1.15.24(@swc/helpers@0.5.23))(postcss@8.5.23)(webpack-cli@7.0.2)
     optionalDependencies:
       vue-template-compiler: 2.7.16
     transitivePeerDependencies:
@@ -19601,7 +19732,6 @@ snapshots:
   watchpack@2.5.2:
     dependencies:
       graceful-fs: 4.2.11
-    optional: true
 
   wbuf@1.7.3:
     dependencies:
@@ -19625,11 +19755,26 @@ snapshots:
       import-local: 3.2.0
       interpret: 3.1.1
       rechoir: 0.8.0
-      webpack: 5.104.1(@swc/core@1.15.24(@swc/helpers@0.5.23))(webpack-cli@7.0.2)
+      webpack: 5.104.1(@swc/core@1.15.24(@swc/helpers@0.5.23))(postcss@8.5.23)(webpack-cli@7.0.2)
       webpack-merge: 6.0.1
     optionalDependencies:
       webpack-dev-server: 5.2.6(tslib@2.8.1)(webpack-cli@7.0.2)(webpack@5.104.1)
 
+  webpack-cli@7.0.2(webpack-dev-server@5.2.6)(webpack@5.106.2):
+    dependencies:
+      '@discoveryjs/json-ext': 1.0.0
+      commander: 14.0.3
+      cross-spawn: 7.0.6
+      envinfo: 7.21.0
+      fastest-levenshtein: 1.0.16
+      import-local: 3.2.0
+      interpret: 3.1.1
+      rechoir: 0.8.0
+      webpack: 5.106.2(postcss@8.5.23)(webpack-cli@7.0.2)
+      webpack-merge: 6.0.1
+    optionalDependencies:
+      webpack-dev-server: 5.2.6(tslib@2.8.1)(webpack-cli@7.0.2)(webpack@5.106.2)
+
   webpack-dev-middleware@7.4.5(tslib@2.8.1)(webpack@5.104.1):
     dependencies:
       colorette: 2.0.20
@@ -19639,9 +19784,23 @@ snapshots:
       range-parser: 1.3.0
       schema-utils: 4.3.3
     optionalDependencies:
-      webpack: 5.104.1(@swc/core@1.15.24(@swc/helpers@0.5.23))(webpack-cli@7.0.2)
+      webpack: 5.104.1(@swc/core@1.15.24(@swc/helpers@0.5.23))(postcss@8.5.23)(webpack-cli@7.0.2)
+    transitivePeerDependencies:
+      - tslib
+
+  webpack-dev-middleware@7.4.5(tslib@2.8.1)(webpack@5.106.2):
+    dependencies:
+      colorette: 2.0.20
+      memfs: 4.64.0(tslib@2.8.1)
+      mime-types: 3.0.2
+      on-finished: 2.4.1
+      range-parser: 1.3.0
+      schema-utils: 4.3.3
+    optionalDependencies:
+      webpack: 5.106.2(postcss@8.5.23)(webpack-cli@7.0.2)
     transitivePeerDependencies:
       - tslib
+    optional: true
 
   webpack-dev-server@5.2.6(tslib@2.8.1)(webpack-cli@7.0.2)(webpack@5.104.1):
     dependencies:
@@ -19674,7 +19833,7 @@ snapshots:
       webpack-dev-middleware: 7.4.5(tslib@2.8.1)(webpack@5.104.1)
       ws: 8.21.1
     optionalDependencies:
-      webpack: 5.104.1(@swc/core@1.15.24(@swc/helpers@0.5.23))(webpack-cli@7.0.2)
+      webpack: 5.104.1(@swc/core@1.15.24(@swc/helpers@0.5.23))(postcss@8.5.23)(webpack-cli@7.0.2)
       webpack-cli: 7.0.2(webpack-dev-server@5.2.6)(webpack@5.104.1)
     transitivePeerDependencies:
       - bufferutil
@@ -19683,6 +19842,47 @@ snapshots:
       - tslib
       - utf-8-validate
 
+  webpack-dev-server@5.2.6(tslib@2.8.1)(webpack-cli@7.0.2)(webpack@5.106.2):
+    dependencies:
+      '@types/bonjour': 3.5.13
+      '@types/connect-history-api-fallback': 1.5.4
+      '@types/express': 4.17.25
+      '@types/express-serve-static-core': 4.19.9
+      '@types/serve-index': 1.9.4
+      '@types/serve-static': 1.15.10
+      '@types/sockjs': 0.3.36
+      '@types/ws': 8.18.1
+      ansi-html-community: 0.0.8
+      bonjour-service: 1.4.3
+      chokidar: 3.6.0
+      colorette: 2.0.20
+      compression: 1.8.1
+      connect-history-api-fallback: 2.0.0
+      express: 4.22.2
+      graceful-fs: 4.2.11
+      http-proxy-middleware: 2.0.10(@types/express@4.17.25)
+      ipaddr.js: 2.4.0
+      launch-editor: 2.14.1
+      open: 10.2.0
+      p-retry: 6.2.1
+      schema-utils: 4.3.3
+      selfsigned: 5.5.0
+      serve-index: 1.9.2
+      sockjs: 0.3.24
+      spdy: 4.0.2
+      webpack-dev-middleware: 7.4.5(tslib@2.8.1)(webpack@5.106.2)
+      ws: 8.21.1
+    optionalDependencies:
+      webpack: 5.106.2(postcss@8.5.23)(webpack-cli@7.0.2)
+      webpack-cli: 7.0.2(webpack-dev-server@5.2.6)(webpack@5.106.2)
+    transitivePeerDependencies:
+      - bufferutil
+      - debug
+      - supports-color
+      - tslib
+      - utf-8-validate
+    optional: true
+
   webpack-merge@6.0.1:
     dependencies:
       clone-deep: 4.0.1
@@ -19691,8 +19891,7 @@ snapshots:
 
   webpack-sources@3.3.3: {}
 
-  webpack-sources@3.5.1:
-    optional: true
+  webpack-sources@3.5.1: {}
 
   webpack@5.104.1:
     dependencies:
@@ -19718,15 +19917,24 @@ snapshots:
       neo-async: 2.6.2
       schema-utils: 4.3.3
       tapable: 2.3.0
-      terser-webpack-plugin: 5.3.16(webpack@5.104.1)
+      terser-webpack-plugin: 5.6.1(webpack@5.104.1)
       watchpack: 2.5.1
       webpack-sources: 3.3.3
     transitivePeerDependencies:
+      - '@minify-html/node'
       - '@swc/core'
+      - '@swc/css'
+      - '@swc/html'
+      - clean-css
+      - cssnano
+      - csso
       - esbuild
+      - html-minifier-terser
+      - lightningcss
+      - postcss
       - uglify-js
 
-  webpack@5.104.1(@swc/core@1.15.24(@swc/helpers@0.5.23))(webpack-cli@7.0.2):
+  webpack@5.104.1(@swc/core@1.15.24(@swc/helpers@0.5.23))(postcss@8.5.23)(webpack-cli@7.0.2):
     dependencies:
       '@types/eslint-scope': 3.7.7
       '@types/estree': 1.0.8
@@ -19750,14 +19958,23 @@ snapshots:
       neo-async: 2.6.2
       schema-utils: 4.3.3
       tapable: 2.3.0
-      terser-webpack-plugin: 5.3.16(@swc/core@1.15.24(@swc/helpers@0.5.23))(webpack@5.104.1)
+      terser-webpack-plugin: 5.6.1(@swc/core@1.15.24(@swc/helpers@0.5.23))(postcss@8.5.23)(webpack@5.104.1)
       watchpack: 2.5.1
       webpack-sources: 3.3.3
     optionalDependencies:
       webpack-cli: 7.0.2(webpack-dev-server@5.2.6)(webpack@5.104.1)
     transitivePeerDependencies:
+      - '@minify-html/node'
       - '@swc/core'
+      - '@swc/css'
+      - '@swc/html'
+      - clean-css
+      - cssnano
+      - csso
       - esbuild
+      - html-minifier-terser
+      - lightningcss
+      - postcss
       - uglify-js
 
   webpack@5.104.1(webpack-cli@7.0.2):
@@ -19784,14 +20001,23 @@ snapshots:
       neo-async: 2.6.2
       schema-utils: 4.3.3
       tapable: 2.3.0
-      terser-webpack-plugin: 5.3.16(webpack@5.104.1)
+      terser-webpack-plugin: 5.6.1(webpack@5.104.1)
       watchpack: 2.5.1
       webpack-sources: 3.3.3
     optionalDependencies:
       webpack-cli: 7.0.2(webpack-dev-server@5.2.6)(webpack@5.104.1)
     transitivePeerDependencies:
+      - '@minify-html/node'
       - '@swc/core'
+      - '@swc/css'
+      - '@swc/html'
+      - clean-css
+      - cssnano
+      - csso
       - esbuild
+      - html-minifier-terser
+      - lightningcss
+      - postcss
       - uglify-js
 
   webpack@5.106.2:
@@ -19835,6 +20061,48 @@ snapshots:
       - uglify-js
     optional: true
 
+  webpack@5.106.2(postcss@8.5.23)(webpack-cli@7.0.2):
+    dependencies:
+      '@types/eslint-scope': 3.7.7
+      '@types/estree': 1.0.9
+      '@types/json-schema': 7.0.15
+      '@webassemblyjs/ast': 1.14.1
+      '@webassemblyjs/wasm-edit': 1.14.1
+      '@webassemblyjs/wasm-parser': 1.14.1
+      acorn: 8.18.0
+      acorn-import-phases: 1.0.4(acorn@8.18.0)
+      browserslist: 4.28.7
+      chrome-trace-event: 1.0.4
+      enhanced-resolve: 5.24.5
+      es-module-lexer: 2.3.1
+      eslint-scope: 5.1.1
+      events: 3.3.0
+      glob-to-regexp: 0.4.1
+      graceful-fs: 4.2.11
+      loader-runner: 4.3.2
+      mime-db: 1.54.0
+      neo-async: 2.6.2
+      schema-utils: 4.3.3
+      tapable: 2.3.3
+      terser-webpack-plugin: 5.6.1(postcss@8.5.23)(webpack@5.106.2)
+      watchpack: 2.5.2
+      webpack-sources: 3.5.1
+    optionalDependencies:
+      webpack-cli: 7.0.2(webpack-dev-server@5.2.6)(webpack@5.106.2)
+    transitivePeerDependencies:
+      - '@minify-html/node'
+      - '@swc/core'
+      - '@swc/css'
+      - '@swc/html'
+      - clean-css
+      - cssnano
+      - csso
+      - esbuild
+      - html-minifier-terser
+      - lightningcss
+      - postcss
+      - uglify-js
+
   websocket-driver@0.7.5:
     dependencies:
       http-parser-js: 0.5.10