Add QTI DaisyUI theme runtime

Introduce package-owned QTI theme tokens, a DaisyUI bridge, and a stable web-component runtime loader/CSS entrypoint for default player hosts.

Co-authored-by: Cursor <cursoragent@cursor.com>

Author: chillenious

.changeset/config.json

@@ -21,6 +21,8 @@
       "@pie-qti/source-profiles",
       "@pie-qti/storage",
       "@pie-qti/test-utils",
+      "@pie-qti/theme",
+      "@pie-qti/theme-daisyui",
       "@pie-qti/to-pie",
       "@pie-qti/transform-cli",
       "@pie-qti/transform-core",

.changeset/quiet-owls-theme.md

@@ -0,0 +1,13 @@
+---
+"@pie-qti/default-components": minor
+"@pie-qti/item-player": minor
+"@pie-qti/theme": minor
+"@pie-qti/theme-daisyui": minor
+"@pie-qti/web-component-loaders": minor
+---
+
+Add package-owned QTI theme tokens and a DaisyUI bridge so host applications can cascade their active theme into QTI players through stable `--pie-qti-*` variables.
+
+`loadPieQtiPlayerElements()` now also loads the bundled default interaction web components, giving browser hosts a single stable loader for the default player runtime.
+
+`@pie-qti/web-component-loaders/default-runtime.css` now exposes the default browser runtime CSS, including the DaisyUI theme bridge and QTI shared vocabulary classes.

apps/demo/package.json

@@ -29,6 +29,7 @@
     "@pie-qti/pie-to-qti2": "workspace:*",
     "@pie-qti/player-elements": "workspace:*",
     "@pie-qti/qti-common": "workspace:*",
+    "@pie-qti/theme-daisyui": "workspace:*",
     "@pie-qti/typeset-katex": "workspace:*",
     "@pie-qti/web-component-loaders": "workspace:*",
     "@tiptap/core": "^3.18.0",

apps/demo/src/app.css

@@ -3,6 +3,4 @@
 /* Import DaisyUI v5 styles and themes */
 @import 'daisyui/daisyui.css';
 @import 'daisyui/themes.css';
-
-/* QTI 3.0 Shared Vocabulary CSS classes (I20) */
-@import '@pie-qti/default-components/shared/styles/qti-shared-vocabulary.css';
+@import '@pie-qti/web-component-loaders/default-runtime.css';

bun.lock

@@ -199,17 +199,20 @@ The theming system balances three goals:
 
 #### CSS variables (theme tokens)
 
-Components consume DaisyUI-compatible variables:
+Components consume package-owned PIE QTI theme variables. DaisyUI hosts can import
+`@pie-qti/theme-daisyui/bridge.css` to map their active `--color-*` theme into
+these variables.
 
 | Variable | Purpose |
 |----------|---------|
-| `--p` | Primary color |
-| `--a` | Accent color |
-| `--b1`, `--b2`, `--b3` | Base surface colors |
-| `--bc` | Base content (text) color |
-| `--su` | Success color |
-
-Usage in components: `hsl(var(--p))`, `hsl(var(--bc))`, etc.
+| `--pie-qti-primary` | Primary color |
+| `--pie-qti-accent` | Accent color |
+| `--pie-qti-base-100`, `--pie-qti-base-200`, `--pie-qti-base-300` | Base surface colors |
+| `--pie-qti-base-content` | Base content (text) color |
+| `--pie-qti-success` | Success color |
+
+Usage in components: `var(--pie-qti-primary, <fallback>)`,
+`var(--pie-qti-base-content, <fallback>)`, etc.
 
 If the host doesn't provide these variables, components fall back to safe defaults via `var(--token, fallback)`.