feat: voeg thematische kleurplaten toe (v0.4.65-beta)

VERSION

@@ -1 +1 @@
-0.4.64-beta
+0.4.65-beta

db/024_creative_pupil_levels.sql

@@ -0,0 +1,7 @@
+-- Kleurplaten gebruiken dezelfde klas-standaard-met-leerling-override als de
+-- andere vakgebieden. Bestaande niveaukeuzes blijven ongewijzigd; alleen de
+-- toegestane waarde 'creatief' wordt aan de constraint toegevoegd.
+ALTER TABLE pupil_levels DROP CONSTRAINT IF EXISTS pupil_levels_subject_check;
+ALTER TABLE pupil_levels
+  ADD CONSTRAINT pupil_levels_subject_check
+  CHECK (subject IN ('taal','rekenen','world','creatief'));

public/css/coloring.css

@@ -0,0 +1,46 @@
+/* Thematische kleurplaten */
+.coloring-app{height:100%;min-height:0;display:flex;flex-direction:column;background:var(--surface);color:var(--ink)}
+.coloring-choices,.coloring-tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 10px;border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--orange) 7%,var(--surface))}
+.coloring-choices label{display:grid;grid-template-columns:auto minmax(120px,1fr);align-items:center;gap:6px;color:var(--muted);font-size:11px;font-weight:850}
+.coloring-choices select{height:34px;max-width:230px;border:1px solid var(--line);border-radius:9px;padding:0 28px 0 9px;background:var(--surface);color:var(--ink);font:inherit;font-weight:750}
+.coloring-fit{margin-left:auto;padding:5px 9px;border-radius:999px;background:var(--surface);color:var(--muted);font-size:11px;font-weight:800;white-space:nowrap}
+.coloring-tools{gap:6px;background:var(--surface)}
+.coloring-tool-buttons,.coloring-palette,.coloring-sizes{display:flex;align-items:center;gap:4px;padding:3px;border-radius:11px;background:var(--surface-2)}
+.coloring-tools button{width:36px;height:36px;display:grid;place-items:center;border:0;border-radius:9px;background:transparent;color:var(--ink);font:inherit;font-size:18px;cursor:pointer}
+.coloring-tools button:is(:hover,:focus-visible),.coloring-tools button.on{background:var(--surface);box-shadow:0 1px 5px rgba(30,50,90,.18)}
+.coloring-tool-buttons button.on{outline:2px solid var(--orange);outline-offset:-2px}
+.coloring-color i{width:22px;height:22px;display:block;border:1px solid rgba(38,52,74,.22);border-radius:50%;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
+.coloring-color.on{outline:2.5px solid var(--ink);outline-offset:-3px}
+.coloring-size i{display:block;border-radius:50%;background:var(--ink)}
+.coloring-size.on{outline:2px solid var(--orange);outline-offset:-2px}
+.coloring-custom{display:flex;align-items:center;gap:5px;color:var(--muted);font-size:10px;font-weight:800}
+.coloring-custom input{width:36px;height:36px;padding:3px;border:1px solid var(--line);border-radius:9px;background:var(--surface);cursor:pointer}
+.coloring-tools .coloring-reset{margin-left:auto;background:var(--red-soft);color:var(--red)}
+.coloring-tools .coloring-done{width:auto;min-width:112px;padding:0 12px;color:#fff;font-size:13px}
+.coloring-stage{flex:1;min-height:0;overflow:auto;display:grid;place-items:center;padding:12px;background:linear-gradient(135deg,var(--surface-2),color-mix(in srgb,var(--purple) 5%,var(--surface)))}
+.coloring-paper{position:relative;width:min(100%,900px);aspect-ratio:4/3;flex:none;overflow:hidden;border:1px solid var(--line);border-radius:16px;background:#fff;box-shadow:0 10px 28px rgba(30,50,90,.14);isolation:isolate}
+.coloring-art,.coloring-paper canvas{position:absolute;inset:0;width:100%;height:100%}
+.coloring-art svg{width:100%;height:100%;display:block;background:#fff}
+.coloring-art [hidden]{display:none}
+.coloring-paper canvas{z-index:2;touch-action:none;cursor:crosshair;mix-blend-mode:multiply}
+.coloring-app[data-tool="bucket"] .coloring-art{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30'%3E%3Ctext y='24' font-size='23'%3E%F0%9F%AA%A3%3C/text%3E%3C/svg%3E") 6 24,pointer}
+.coloring-app[data-tool="bucket"] .coloring-art [data-fillable]{pointer-events:all}
+.coloring-hint{min-height:30px;padding:7px 11px;color:var(--muted);font-size:11px;font-weight:700;text-align:center;background:var(--surface)}
+.widget[data-widget="coloring"]{--widget-accent:var(--orange)}
+
+@media(max-width:620px){
+ .coloring-choices,.coloring-tools{padding:6px;gap:4px}
+ .coloring-choices label{grid-template-columns:1fr;gap:2px;flex:1;min-width:125px}
+ .coloring-choices select{width:100%;max-width:none;height:32px}
+ .coloring-fit{width:100%;margin:0;text-align:center}
+ .coloring-tools button{width:32px;height:32px;font-size:16px}
+ .coloring-color i{width:18px;height:18px}
+ .coloring-custom span{display:none}.coloring-custom input{width:32px;height:32px}
+ .coloring-tools .coloring-reset{margin-left:0}
+ .coloring-tools .coloring-done{min-width:90px;font-size:11px}
+ .coloring-stage{place-items:start center;padding:6px}
+ .coloring-paper{min-width:360px;border-radius:10px}
+ .coloring-hint{font-size:10px}
+}
+@media(pointer:coarse){.coloring-tools button,.coloring-custom input{min-width:40px;min-height:40px}.coloring-choices select{min-height:40px}}
+@media(prefers-reduced-motion:reduce){.coloring-app *{scroll-behavior:auto!important}}

public/index.html

@@ -7,6 +7,7 @@
 <link rel="icon" type="image/svg+xml" href="img/logo.svg?v=__V__">
 <link rel="preload" href="fonts/quicksand.woff2" as="font" type="font/woff2" crossorigin>
 <link rel="stylesheet" href="css/teach.css?v=__V__">
+<link rel="stylesheet" href="css/coloring.css?v=__V__">
 <link rel="stylesheet" href="css/live-classroom.css?v=__V__">
 <link rel="stylesheet" href="css/image-catalog.css?v=__V__">
 <!-- alle app-scripts: defer = parallel downloaden, uitvoeren in dézelfde
@@ -49,6 +50,7 @@
 <script src="js/widgets/sentence.js?v=__V__" defer></script>
 <script src="js/widgets/learning.js?v=__V__" defer></script>
 <script src="js/widgets/world.js?v=__V__" defer></script>
+<script src="js/widgets/coloring.js?v=__V__" defer></script>
 <script src="js/board.js?v=__V__" defer></script>
 <script src="js/pupil.js?v=__V__" defer></script>
 <script src="js/pupil-live-actions.js?v=__V__" defer></script>

public/js/admin.js

@@ -24,7 +24,7 @@
   /* Klassenmanagement: welke klas/vakgebied nu getoond wordt, blijft behouden
      over her-renders heen zoals adminTab hierboven. */
   let kmClass = null, kmSubject = "rekenen";
-  const KM_SUBJECTS = ["taal", "rekenen", "world"];
+  const KM_SUBJECTS = ["taal", "rekenen", "world", "creatief"];
   let stopDashboardLive=()=>{};
   let liveDashboardState="reconnecting";
 

public/js/board.js

@@ -50,6 +50,7 @@ const REGISTRY = [
   { id:"birds", cat:"world", icon:"🐦", w:620, h:600, minW:360, minH:400, mount:mountBirds },
   { id:"plants", cat:"world", icon:"🌼", w:620, h:600, minW:360, minH:400, mount:mountPlants },
   { id:"topography", cat:"world", icon:"🗺️", w:680, h:640, minW:380, minH:440, mount:mountTopography },
+  { id:"coloring", cat:"creatief", icon:"🎨", w:760, h:700, minW:390, minH:430, mount:mountColoring },
   { id:"write",   cat:"tools", icon:"✏️", w:560, h:440, minW:360, minH:280, mount:mountWrite },
   { id:"mind",    cat:"tools", icon:"🕸️", w:640, h:480, minW:420, minH:320, mount:mountMind },
   { id:"notes",   cat:"tools", icon:"📝", w:340, h:300, minW:240, minH:180, mount:mountNotes },
@@ -68,7 +69,7 @@ const REGISTRY = [
   { id:"avatar", cat:"class", icon:"🦖", w:620, h:560, minW:400, minH:400, mount:mountAvatarWidget },
   { id:"media",   cat:"media", icon:"🎬", w:560, h:420, minW:320, minH:240, mount:mountMedia }
 ];
-const WIDGET_CATS = [["favorites","galleryFavorites"],["taal","catTaal"],["rekenen","catRekenen"],["world","catWorld"],["class","catClass"],["tools","catTools"],["media","catMedia"]];
+const WIDGET_CATS = [["favorites","galleryFavorites"],["taal","catTaal"],["rekenen","catRekenen"],["world","catWorld"],["creatief","catCreative"],["class","catClass"],["tools","catTools"],["media","catMedia"]];
 
 /* houdt een (opgeslagen of standaard) widgetgrootte binnen het bord. Op een
    telefoon is de beschikbare ruimte leidend: een desktop-minimum van bv.
@@ -369,7 +370,7 @@ function makeWidget(def, saved){
       ? boardLearningMountState(def, state, boardLearning) : state;
     mountedApi = def.mount(body, mountedState) || {};
     if(typeof appendLearningProfileBadge === "function" && mountedState &&
-       ["taal","rekenen"].includes(def.cat)){
+       ["taal","rekenen","creatief"].includes(def.cat)){
       appendLearningProfileBadge(body, def.cat, mountedState, def.id);
     }
     if(boardLearning && typeof appendBoardLearningLevelControls === "function"){

public/js/cast.js

@@ -37,7 +37,7 @@ let castNotice = "";
 let castActiveKeys = new Set();
 let castError = "";
 
-const CAST_WIDGET_CATEGORIES=new Set(["taal","rekenen"]);
+const CAST_WIDGET_CATEGORIES=new Set(["taal","rekenen","creatief"]);
 const CAST_THEME_WIDGETS=new Set(["letters","flits","hak","ball"]);
 function assignmentLibraryWidgets(){
   return REGISTRY.filter(widget=>CAST_WIDGET_CATEGORIES.has(widget.cat));

public/js/core.js

@@ -2,7 +2,7 @@
 "use strict";
 /* version — shown until /api/version resolves (or if the fetch fails, e.g. offline).
    Kept in sync by hand with the VERSION file at the repo root on every release. */
-const VERSION = "0.4.64-beta";
+const VERSION = "0.4.65-beta";
 /* Safari en oudere mobiele browsers behandelen 100vh/100% soms als de hoogte
    achter hun adres- en navigatiebalk. visualViewport geeft de werkelijk
    zichtbare hoogte; de CSS gebruikt deze pixelwaarde als betrouwbare bron en
@@ -49,6 +49,12 @@ const I18N = {
     wg_notes:"Notities", wg_notes_d:"Een vel om op te schrijven.",
     wg_timer:"Timer", wg_timer_d:"Afteltimer met kijkklok voor de klas.",
     wg_write:"Schrijfblad", wg_write_d:"Schrijven en rekenen: pen, gum en papier met schrijflijnen of rekenblokjes.",
+    wg_coloring:"Kleurplaten", wg_coloring_d:"Kies thematische kleurplaten op leerjaar en niveau; kleur met een echt werkend kleurpotlood of vul een vak met de verfemmer.",
+    colorTheme:"Thema", colorPage:"Kleurplaat", colorProfile:"Groep {year} · niveau {level}",
+    colorThemeAll:"Alle thema's", colorThemeAnimals:"Dieren", colorThemeSeasons:"Seizoenen", colorThemeNature:"Natuur", colorThemeScience:"Wetenschap & techniek", colorThemeCulture:"Cultuur & omgeving",
+    colorToolPencil:"Kleurpotlood", colorToolBucket:"Verfemmer",
+    colorPencilHint:"Teken meerdere keren over dezelfde plek om de kleur donkerder te maken, net als met een echt kleurpotlood.", colorBucketHint:"Tik op een omsloten vak om het in één keer te kleuren.", colorEraserHint:"Veeg alleen de potloodlaag weg; ingekleurde vakken blijven staan.",
+    colorReset:"Kleurplaat leegmaken", colorDone:"Ik ben klaar", colorFinished:"Kleurplaat klaar!",
     bgBlank:"Leeg blad", bgLines:"Lijntjes", bgWrite:"Schrijflijnen",
     bgGridS:"Kleine rekenblokjes", bgGridB:"Grote rekenblokjes",
     penSize:"Dikte", penColor:"Kleur", penExtras:"Hulpmiddelen", recentColors:"Recent gebruikt", paletteColors:"Kleuren", customColor:"Eigen kleur", eraser:"Gum", clearAll:"Alles wissen",
@@ -73,7 +79,7 @@ const I18N = {
     anchorLibEmptyGrid:"Zet eerst woorden in het diagram.",
     numWords:"Woorden per spel", all:"Alle", noThemes:"— nog geen thema's —",
     muteAll:"Alle geluiden aan/uit", sndWidget:"Geluid van deze widget aan/uit",
-    catTaal:"Taal", catRekenen:"Rekenen", catWorld:"Wereldoriëntatie", catClass:"Feest & klas", catTools:"Hulpmiddelen", catMedia:"Media",
+    catTaal:"Taal", catRekenen:"Rekenen", catWorld:"Wereldoriëntatie", catCreative:"Creatief", catClass:"Feest & klas", catTools:"Hulpmiddelen", catMedia:"Media",
     wg_madd:"Plussommen", wg_madd_d:"Optellen tot 10, 20 of 100.",
     wg_msub:"Minsommen", wg_msub_d:"Aftrekken tot 10, 20 of 100.",
     wg_mmul:"Keersommen", wg_mmul_d:"De tafels van 1 t/m 12 oefenen.",
@@ -263,8 +269,8 @@ const I18N = {
     wikiOfficialSource:"Open officiële SLO-publicatie",
     wikiOfficialArea:"Bekijk {area} in de officiële publicatie",
     wikiTuleTitle:"TULE en de nieuwe leerlijnen",
-    wikiYearProfiles:"Leerjaarprofielen taal en rekenen",
+    wikiYearProfiles:"Leerjaarprofielen taal, rekenen en creatief",
-    wikiYearProfilesText:"Praktische Teach-uitwerking voor widgetopdrachten per groep. Gebaseerd op de kerndoelen 2026 en TULE; geen officiële SLO-jaarnormen.",
+    wikiYearProfilesText:"Praktische Teach-uitwerking voor widgetopdrachten per groep. De creatieve profielen volgen de opbouw in detail en techniek; het zijn geen officiële jaarnormen.",
     wikiYear:"Groep {n}", wikiProfileGoals:"Leerdoelen",
     wikiTuleText:"TULE werkt de kerndoelen uit 2006 voorbeeldmatig uit. Nieuwe SLO-leerlijnen bij de doelen van 2026 zijn nog in ontwikkeling. Een niveau-indeling in Teach is daarom geen officiële SLO-leerlijn.",
     wikiTuleSource:"Open TULE bij SLO", wikiProgressionsSource:"Volg de ontwikkeling van nieuwe leerlijnen",
@@ -310,9 +316,9 @@ const I18N = {
     vwPreview:"Voorbeeldweergave", vwPreviewReset:"Terug naar systeem",
     vwTeacherPath:"🎯 Opdrachtenreeks", vwTeacherDashboard:"📈 Klasdashboard",
     vwParentPreview:"Voorbeeld van het ouderportaal. Echte kindgegevens en acties zijn in deze weergave uitgeschakeld.",
-    vwPupilPreview:"Voorbeeld van de leerlingomgeving met de taal- en rekenwidgets van het huidige bord. Bediening en voortgang zijn uitgeschakeld.",
+    vwPupilPreview:"Voorbeeld van de leerlingomgeving met de taal-, reken- en creatieve widgets van het huidige bord. Bediening en voortgang zijn uitgeschakeld.",
     vwPupilAddWidget:"Widget toevoegen", vwPupilChooseWidget:"Kies een leerlingwidget",
-    vwPupilAddWidgetNote:"Alleen taal- en rekenwidgets die in de leerlingomgeving werken worden getoond.",
+    vwPupilAddWidgetNote:"Alleen taal-, reken- en creatieve widgets die in de leerlingomgeving werken worden getoond.",
     vwNote:"Deze voorkeuren gelden voor dit apparaat.",
     pwChanged:"Wachtwoord gewijzigd ✓", pwCurrentPh:"huidig wachtwoord",
     namePh:"naam", passPh:"wachtwoord",
@@ -342,7 +348,7 @@ const I18N = {
     parentUnlink:"Ontkoppel",
     parentUnlinkWarn:"Verwijdert alleen de koppeling; het account van je kind blijft bestaan.",
     parentProgress:"📈 Voortgang", parentProgressEmpty:"Nog geen voortgang.",
-    parentLevel:"🎯 Leerniveau", parentLevelTaal:"Taal", parentLevelRekenen:"Rekenen",
+    parentLevel:"🎯 Leerniveau", parentLevelTaal:"Taal", parentLevelRekenen:"Rekenen", parentLevelCreative:"Creatief",
     parentLevelYear:"Groep", parentLevelPath:"Uitwerking", parentLevelSave:"Opslaan",
     parentLevelSaved:"Leerniveau opgeslagen.",
     dtLen:"Lengte", dtContrast:"Hoog contrast",
@@ -409,7 +415,7 @@ const I18N = {
     castClasses:"Klassen", castPupils:"Leerlingen",
     castNoClasses:"Geen klassen in deze school.", castNoPupils:"Geen leerlingen in deze school.",
     castActive:"✓ Actief", castPathTitle:"Opdrachtenreeks (optioneel)", castPathPlaceholder:"Naam van de reeks…",
-    castPathAdd:"＋ Geselecteerde widget als stap", castPathOnlyLearning:"Reeksen ondersteunen taal- en rekenwidgets.", castPathDefault:"Mijn opdrachtenreeks", castPathHint:"{count} van maximaal 12 stappen. Gebruik de pijlen om de volgorde te bepalen.",
+    castPathAdd:"＋ Geselecteerde widget als stap", castPathOnlyLearning:"Reeksen ondersteunen taal-, reken- en creatieve widgets.", castPathDefault:"Mijn opdrachtenreeks", castPathHint:"{count} van maximaal 12 stappen. Gebruik de pijlen om de volgorde te bepalen.",
     castIntro:"Stel zelfstandig een opdracht of reeks samen uit alle leerlingwidgets en geef deze daarna in één keer door.",
     castLibrarySubtitle:"Zelfstandige leerlingopdrachten · geen bord nodig",
     castStepChoose:"Kies vorm", castStepBuild:"Stel samen", castStepAudience:"Geef door",
@@ -451,7 +457,7 @@ const I18N = {
     amLevelClassDefault:"Klas-standaard", amLevelPupils:"Leerlingen",
     amLevelInherited:"erft van klas", amLevelNone:"nog niet ingesteld",
     amLevelReset:"terug naar klas-standaard", amLevelSaved:"Opgeslagen ✓",
-    amSubject_taal:"Taal", amSubject_rekenen:"Rekenen", amSubject_world:"Wereldoriëntatie",
+    amSubject_taal:"Taal", amSubject_rekenen:"Rekenen", amSubject_world:"Wereldoriëntatie", amSubject_creatief:"Creatief",
     amConfirmDel:"Weet je zeker dat je deze gebruiker wilt verwijderen?",
     amCopy:"kopieer", amCopyAll:"kopieer alles",
     amResetClass:"reset wachtwoorden klas", amResetSchool:"reset alle leerlingwachtwoorden",
@@ -473,6 +479,12 @@ const I18N = {
     wg_notes:"Notes", wg_notes_d:"A sheet to write on.",
     wg_timer:"Timer", wg_timer_d:"Countdown timer with a visual clock for class.",
     wg_write:"Writing pad", wg_write_d:"Writing and maths: pen, eraser and paper with handwriting lines or maths squares.",
+    wg_coloring:"Colouring pages", wg_coloring_d:"Choose themed colouring pages by year and level; use a realistic coloured pencil or fill an area with the paint bucket.",
+    colorTheme:"Theme", colorPage:"Colouring page", colorProfile:"Year {year} · level {level}",
+    colorThemeAll:"All themes", colorThemeAnimals:"Animals", colorThemeSeasons:"Seasons", colorThemeNature:"Nature", colorThemeScience:"Science & technology", colorThemeCulture:"Culture & surroundings",
+    colorToolPencil:"Coloured pencil", colorToolBucket:"Paint bucket",
+    colorPencilHint:"Draw over the same spot to make the colour darker, just like a real coloured pencil.", colorBucketHint:"Tap an enclosed area to colour it in one go.", colorEraserHint:"Erase only the pencil layer; filled areas stay in place.",
+    colorReset:"Clear colouring page", colorDone:"I'm finished", colorFinished:"Colouring page finished!",
     bgBlank:"Blank sheet", bgLines:"Lines", bgWrite:"Handwriting lines",
     bgGridS:"Small maths squares", bgGridB:"Big maths squares",
     penSize:"Thickness", penColor:"Colour", penExtras:"Tools", recentColors:"Recently used", paletteColors:"Colours", customColor:"Custom colour", eraser:"Eraser", clearAll:"Clear all",
@@ -497,7 +509,7 @@ const I18N = {
     anchorLibEmptyGrid:"Put words in the diagram first.",
     numWords:"Words per game", all:"All", noThemes:"— no themes yet —",
     muteAll:"All sounds on/off", sndWidget:"This widget's sound on/off",
-    catTaal:"Language", catRekenen:"Maths", catWorld:"World studies", catClass:"Celebration & class", catTools:"Tools", catMedia:"Media",
+    catTaal:"Language", catRekenen:"Maths", catWorld:"World studies", catCreative:"Creative", catClass:"Celebration & class", catTools:"Tools", catMedia:"Media",
     wg_madd:"Addition", wg_madd_d:"Adding up to 10, 20 or 100.",
     wg_msub:"Subtraction", wg_msub_d:"Subtracting up to 10, 20 or 100.",
     wg_mmul:"Multiplication", wg_mmul_d:"Practise the times tables 1–12.",
@@ -687,8 +699,8 @@ const I18N = {
     wikiOfficialSource:"Open the official SLO publication",
     wikiOfficialArea:"View {area} in the official publication",
     wikiTuleTitle:"TULE and the new learning progressions",
-    wikiYearProfiles:"Language and maths year profiles",
+    wikiYearProfiles:"Language, maths and creative year profiles",
-    wikiYearProfilesText:"Practical Teach interpretation for widget tasks per year. Based on the 2026 targets and TULE; not official SLO year standards.",
+    wikiYearProfilesText:"Practical Teach interpretation for widget tasks per year. Creative profiles progress through detail and technique; these are not official year standards.",
     wikiYear:"Year {n}", wikiProfileGoals:"Learning goals",
     wikiTuleText:"TULE is an illustrative elaboration of the 2006 targets. New SLO learning progressions for the 2026 targets are still being developed. Teach levels are therefore not official SLO progressions.",
     wikiTuleSource:"Open TULE at SLO", wikiProgressionsSource:"Follow the development of new progressions",
@@ -734,9 +746,9 @@ const I18N = {
     vwPreview:"Preview mode", vwPreviewReset:"Return to system",
     vwTeacherPath:"🎯 Learning path", vwTeacherDashboard:"📈 Class dashboard",
     vwParentPreview:"Preview of the parent portal. Real child data and actions are disabled in this view.",
-    vwPupilPreview:"Preview of the pupil environment using language and maths widgets from the current board. Controls and progress are disabled.",
+    vwPupilPreview:"Preview of the pupil environment using language, maths and creative widgets from the current board. Controls and progress are disabled.",
     vwPupilAddWidget:"Add widget", vwPupilChooseWidget:"Choose a pupil widget",
-    vwPupilAddWidgetNote:"Only language and maths widgets supported in the pupil environment are shown.",
+    vwPupilAddWidgetNote:"Only language, maths and creative widgets supported in the pupil environment are shown.",
     vwNote:"These preferences apply to this device.",
     pwChanged:"Password changed ✓", pwCurrentPh:"current password",
     namePh:"name", passPh:"password",
@@ -766,7 +778,7 @@ const I18N = {
     parentUnlink:"Unlink",
     parentUnlinkWarn:"Removes only the link; your child's account remains.",
     parentProgress:"📈 Progress", parentProgressEmpty:"No progress yet.",
-    parentLevel:"🎯 Learning level", parentLevelTaal:"Language", parentLevelRekenen:"Maths",
+    parentLevel:"🎯 Learning level", parentLevelTaal:"Language", parentLevelRekenen:"Maths", parentLevelCreative:"Creative",
     parentLevelYear:"Year", parentLevelPath:"Path", parentLevelSave:"Save",
     parentLevelSaved:"Learning level saved.",
     dtLen:"Length", dtContrast:"High contrast",
@@ -833,7 +845,7 @@ const I18N = {
     castClasses:"Classes", castPupils:"Pupils",
     castNoClasses:"No classes in this school.", castNoPupils:"No pupils in this school.",
     castActive:"✓ Active", castPathTitle:"Learning path (optional)", castPathPlaceholder:"Name of the path…",
-    castPathAdd:"＋ Add selected widget as step", castPathOnlyLearning:"Paths support language and maths widgets.", castPathDefault:"My learning path", castPathHint:"{count} of up to 12 steps. Use the arrows to set the order.",
+    castPathAdd:"＋ Add selected widget as step", castPathOnlyLearning:"Paths support language, maths and creative widgets.", castPathDefault:"My learning path", castPathHint:"{count} of up to 12 steps. Use the arrows to set the order.",
     castIntro:"Build an independent assignment or path from every pupil widget, then share it in one go.",
     castLibrarySubtitle:"Independent pupil assignments · no board required",
     castStepChoose:"Choose format", castStepBuild:"Build it", castStepAudience:"Assign it",
@@ -875,7 +887,7 @@ const I18N = {
     amLevelClassDefault:"Class default", amLevelPupils:"Pupils",
     amLevelInherited:"inherited from class", amLevelNone:"not set yet",
     amLevelReset:"reset to class default", amLevelSaved:"Saved ✓",
-    amSubject_taal:"Language", amSubject_rekenen:"Maths", amSubject_world:"World orientation",
+    amSubject_taal:"Language", amSubject_rekenen:"Maths", amSubject_world:"World orientation", amSubject_creatief:"Creative",
     amConfirmDel:"Are you sure you want to delete this user?",
     amCopy:"copy", amCopyAll:"copy all",
     amResetClass:"reset class passwords", amResetSchool:"reset all pupil passwords",

public/js/curriculum.js

@@ -91,8 +91,8 @@ const CURRICULUM_PO_2026=Object.freeze({
       id:"kunst-en-cultuur",icon:"🎨",title:"Kunst en cultuur",goalsRange:"35–37",page:92,
       description:"Artistiek creatief vermogen ontwikkelen, kunstzinnige uitingen maken en kunst en cultuur beleven en duiden.",
       goals:[
-        {id:35,domain:"Artistiek creatief vermogen",summary:"Leerlingen gebruiken creatieve strategieën in een iteratief proces en geven betekenis aan eigen en andermans werk.",parts:["Creatieve maak- en denkstrategieën","Ontwikkelen van creatieve vermogens","Betekenis geven"],coverage:"support",widgets:["write","mind","media","birthday","avatar"]},
+        {id:35,domain:"Artistiek creatief vermogen",summary:"Leerlingen gebruiken creatieve strategieën in een iteratief proces en geven betekenis aan eigen en andermans werk.",parts:["Creatieve maak- en denkstrategieën","Ontwikkelen van creatieve vermogens","Betekenis geven"],coverage:"support",widgets:["write","mind","media","birthday","avatar","coloring"]},
-        {id:36,domain:"Maken en betekenis geven",summary:"Leerlingen verbeelden ideeën en gebruiken technieken, vaardigheden, materialen en vaktaal uit verschillende kunstdisciplines.",parts:["Verbeelden en creëren","Kunstzinnige technieken en vaardigheden"],coverage:"support",widgets:["write","media","birthday","avatar"]},
+        {id:36,domain:"Maken en betekenis geven",summary:"Leerlingen verbeelden ideeën en gebruiken technieken, vaardigheden, materialen en vaktaal uit verschillende kunstdisciplines.",parts:["Verbeelden en creëren","Kunstzinnige technieken en vaardigheden"],coverage:"support",widgets:["write","media","birthday","avatar","coloring"]},
         {id:37,domain:"Meemaken en betekenis geven",summary:"Leerlingen beleven kunst en cultuur actief en verbinden uitingen aan maker, tijd, plaats, functie en context.",parts:["Kunst en cultuur actief meemaken","Kunst en cultuur in context"],coverage:"open",widgets:[]}
       ]
     },

public/js/learning-progressions.js

@@ -1,4 +1,4 @@
-/* teach - gedeelde leerjaarprofielen voor taal en rekenen
+/* teach - gedeelde leerjaarprofielen voor taal, rekenen en creatief
    Praktische Teach-uitwerking van de nieuwe kerndoelen po (SLO, juli 2026)
    en TULE. SLO ontwikkelt de nieuwe leerlijnen nog en kent ze geen wettelijke
    status toe; deze profielen zijn daarom geen officiele SLO-jaarnormen. */
@@ -31,6 +31,17 @@ const LEARNING_YEAR_PROFILES=Object.freeze({
   lp("5-6","Grote getallen, kommagetallen en procenten",["standaardprocedures gebruiken","kommagetallen en breuken verbinden","eenvoudige procenten en verhoudingen berekenen"]),
   lp("7-8","Verhoudingen, procenten en meten",["breuken, kommagetallen en procenten verbinden","bewerkingen doelmatig kiezen","meetkundige problemen oplossen"]),
   lp("7-8","Redeneren en rekenen in samenhang",["meer-stapsproblemen modelleren","schatten en uitkomsten beoordelen","rekenwijzen helder uitleggen"])
+ ]),
+ creatief:Object.freeze([
+  null,
+  lp("1-2","Grote vormen en vrij kleur ontdekken",["grote vlakken doelgericht kleuren","potloodgreep en druk verkennen","herkenbare thema's uit de leefwereld kiezen"]),
+  lp("1-2","Kleur en eenvoudige patronen",["binnen duidelijke contouren werken","kleuren combineren","eenvoudige herhaling herkennen"]),
+  lp("3-4","Vormen combineren en details zien",["middelgrote vlakken vullen","details met een potlood toevoegen","kleurkeuzes bij een thema uitleggen"]),
+  lp("3-4","Detail, herhaling en contrast",["kleinere vakken nauwkeurig kleuren","patronen voortzetten","licht-donkercontrast toepassen"]),
+  lp("5-6","Ruimte, natuur en verbeelding",["voor- en achtergrond onderscheiden","thematische kleuren onderzoeken","eigen details aan lijnwerk toevoegen"]),
+  lp("5-6","Kleurharmonie en complexe vormen",["kleurfamilies bewust combineren","complexere contouren beheersen","techniek en sfeer verbinden"]),
+  lp("7-8","Complexe patronen en betekenis",["veel detail planmatig uitwerken","kleurcontrast doelgericht inzetten","beeldkeuzes aan een thema koppelen"]),
+  lp("7-8","Zelfstandige stijl en verfijning",["een eigen kleurpalet ontwikkelen","gelaagd en nauwkeurig werken","artistieke keuzes toelichten"])
  ])
 });
 const LANGUAGE_WIDGET_TASKS=Object.freeze({
@@ -53,6 +64,9 @@ const MATH_WIDGET_TASKS=Object.freeze({
  placevalue:["","hoeveelheid en cijfer","tientallen en eenheden","getallen tot 100","getallen tot 1.000","getallen tot 10.000","getallen tot 100.000","getallen tot 1.000.000","grote getalstructuur"],
  money:["","munten herkennen","hele eurobedragen","eenvoudige bedragen","euros en centen","bedragen en teruggeven","precies rekenen met centen","korting en wisselgeld","budget en procentuele verandering"]
 });
+const CREATIVE_WIDGET_TASKS=Object.freeze({
+ coloring:["","grote kleurvlakken","duidelijke vormen en patronen","middelgrote vakken en details","meer detail en contrast","thematische composities","complexe contouren","fijne patronen en kleurplan","zelfstandige kleurstijl"]
+});
 
 function learningYearGroup(value){const year=Number(value);return Number.isInteger(year)&&year>=1&&year<=8?year:null}
 function learningLevel(value){return Math.max(1,Math.min(3,Number(value)||1))}
@@ -63,7 +77,8 @@ function learningProfile(subject,yearGroup,level){
 function learningLevelLabel(level){return (LEARNING_LEVEL_LABELS[LANG]||LEARNING_LEVEL_LABELS.nl)[learningLevel(level)]}
 function learningProfileSummary(subject,yearGroup,level,widgetId){
  const p=learningProfile(subject,yearGroup,level);if(!p)return"";
- const tasks=subject==="taal"?LANGUAGE_WIDGET_TASKS:MATH_WIDGET_TASKS,task=tasks[widgetId]&&tasks[widgetId][p.yearGroup];
+ const tasks=subject==="taal"?LANGUAGE_WIDGET_TASKS:subject==="rekenen"?MATH_WIDGET_TASKS:CREATIVE_WIDGET_TASKS;
+ const task=tasks[widgetId]&&tasks[widgetId][p.yearGroup];
  return (LANG==="nl"?"Groep ":"Year ")+p.yearGroup+" | "+learningLevelLabel(p.level)+" | "+(task||p.title)
 }
 function languageWordComplexity(word){
@@ -147,14 +162,15 @@ function mathTaskRules(yearGroup,level){
  return{addSub:Math.max(10,Math.round(addCap*factor/5)*5),timesTable:year<3?2:year===3?(l===1?2:l===2?5:10):year===4?(l===1?5:10):12,factorMax:year<=3?5:year<=4?10:year<=6?12:20,numberlineMax:Math.max(20,Math.round(numberMax*(l===1?.4:l===2?.7:1))),numberlineMin:year>=7&&l>=2?-100:0,numberlineStep:lineStep,fractionDen:year===1?2:year<=3?4:year===4?8:12,clockLevel:year<=2?1:year<=4?2:3,clockMinutes:year===1?[0]:year===2?[0,30]:year===3?[0,15,30,45]:null,placeLevel:year<=2?1:year<=4?2:3,moneyLevel:year<=2?1:year<=4?2:3,percentSets:year<=5?[50,100]:year===6?[10,25,50,75,100]:year===7?[5,10,20,25,50,75,100]:[5,10,15,20,25,30,40,50,60,70,75,80,90,100]}
 }
 
-let SELF_LEARNING_LEVELS={taal:null,rekenen:null};
+const LEARNING_SUBJECTS=["taal","rekenen","creatief"];
+let SELF_LEARNING_LEVELS={taal:null,rekenen:null,creatief:null};
 async function refreshSelfLearningLevels(){
- if(!currentUser||currentUser.role!=="pupil"||currentUser.schoolId!=null){SELF_LEARNING_LEVELS={taal:null,rekenen:null};return SELF_LEARNING_LEVELS}
+ if(!currentUser||currentUser.role!=="pupil"||currentUser.schoolId!=null){SELF_LEARNING_LEVELS={taal:null,rekenen:null,creatief:null};return SELF_LEARNING_LEVELS}
- const pairs=await Promise.all(["taal","rekenen"].map(async subject=>{try{return[subject,await api("/my/level?subject="+subject)]}catch(_){return[subject,null]}}));
+ const pairs=await Promise.all(LEARNING_SUBJECTS.map(async subject=>{try{return[subject,await api("/my/level?subject="+subject)]}catch(_){return[subject,null]}}));
  SELF_LEARNING_LEVELS=Object.fromEntries(pairs);return SELF_LEARNING_LEVELS
 }
 function applyLearningLevelToState(def,state,level,managed){
- const next=state?Object.assign({},state):{};if(!def||!["taal","rekenen"].includes(def.cat)||!level||level.yearGroup==null)return next;
+ const next=state?Object.assign({},state):{};if(!def||!LEARNING_SUBJECTS.includes(def.cat)||!level||level.yearGroup==null)return next;
  next.yearGroup=learningYearGroup(level.yearGroup);next.level=learningLevel(level.level);next.managedLearningLevel=managed!==false;return next
 }
 function learningStateForWidget(def,state){
@@ -166,7 +182,7 @@ function learningStateForWidget(def,state){
    in de systeem-, schoolbeheerder- en leerkrachtweergave. Ouder- en
    leerlingvoorbeelden gebruiken een aparte, alleen-lezen voorbeeldweergave. */
 function canConfigureBoardLearningLevel(def){
- if(!def||!["taal","rekenen"].includes(def.cat)||!currentUser)return false;
+ if(!def||!LEARNING_SUBJECTS.includes(def.cat)||!currentUser)return false;
  const role=typeof activeRole==="function"?activeRole():currentUser.role;
  return currentUser.role==="teacher"||
    (currentUser.role==="super"&&["super","admin","teacher"].includes(role))
@@ -203,10 +219,10 @@ function appendLearningProfileBadge(root,subject,state,widgetId){
 
 (function registerOwnLearningLevelSettings(){
  const host=document.createElement("div");host.className="st-section";host.dataset.section="learning-level";host.style.display="none";host.id="learningLevelSettings";document.getElementById("stContent").appendChild(host);
- const text=()=>LANG==="nl"?{title:"Leerniveau",sub:"Kies zelf het passende leerjaar voor taal en rekenen.",note:"Deze keuze bepaalt woorden, getalgrenzen en opdrachten. De profielen zijn een Teach-uitwerking op basis van SLO/TULE; geen officiele SLO-jaarnormen.",save:"Opslaan",saved:"Leerniveau opgeslagen.",year:"Groep",taal:"Taal",rekenen:"Rekenen"}:{title:"Learning level",sub:"Choose the suitable year for language and maths.",note:"This choice determines words, number ranges and tasks. The profiles are a Teach interpretation based on SLO/TULE; not official SLO year standards.",save:"Save",saved:"Learning level saved.",year:"Year",taal:"Language",rekenen:"Maths"};
+ const text=()=>LANG==="nl"?{title:"Leerniveau",sub:"Kies het passende leerjaar voor taal, rekenen en creatief.",note:"Deze keuze bepaalt woorden, getalgrenzen, kleurplaatdetail en opdrachten. De profielen zijn een praktische Teach-uitwerking; geen officiele jaarnormen.",save:"Opslaan",saved:"Leerniveau opgeslagen.",year:"Groep",taal:"Taal",rekenen:"Rekenen",creatief:"Creatief"}:{title:"Learning level",sub:"Choose the suitable year for language, maths and creative work.",note:"This choice determines words, number ranges, colouring-page detail and tasks. The profiles are a practical Teach interpretation; not official year standards.",save:"Save",saved:"Learning level saved.",year:"Year",taal:"Language",rekenen:"Maths",creatief:"Creative"};
  const render=async()=>{
   host.innerHTML="";const tx=text(),msg=document.createElement("div");msg.className="formMsg";host.appendChild(msg);await refreshSelfLearningLevels();
-  for(const subject of ["taal","rekenen"]){
+  for(const subject of LEARNING_SUBJECTS){
    const current=SELF_LEARNING_LEVELS[subject]||{yearGroup:4,level:2},card=document.createElement("section");card.className="learning-level-card";
    const h=document.createElement("h3");h.textContent=tx[subject];const summary=document.createElement("p");summary.className="guestnote";const controls=document.createElement("div");controls.className="am-inline";
    const year=document.createElement("select"),level=document.createElement("select");year.className=level.className="am-sel";
@@ -217,5 +233,5 @@ function appendLearningProfileBadge(root,subject,state,widgetId){
   }
   const note=document.createElement("p");note.className="guestnote learning-source-note";note.textContent=tx.note;host.appendChild(note)
  };
- registerSettingsSection({id:"learning-level",icon:"🎯",group:"personal",order:1.5,label:()=>text().title,sub:()=>text().sub,visible:()=>!!currentUser&&currentUser.role==="pupil"&&currentUser.schoolId==null,activate(){showSettingsDom("learning-level");return render()},keywords:()=>[text().title,text().year,"taal","rekenen","groep","niveau"]})
+ registerSettingsSection({id:"learning-level",icon:"🎯",group:"personal",order:1.5,label:()=>text().title,sub:()=>text().sub,visible:()=>!!currentUser&&currentUser.role==="pupil"&&currentUser.schoolId==null,activate(){showSettingsDom("learning-level");return render()},keywords:()=>[text().title,text().year,"taal","rekenen","creatief","groep","niveau"]})
 })();

public/js/live-classroom-dashboard.js

@@ -324,7 +324,7 @@ function renderLiveClassOverview(host,dashboard,live,onPupil,onAction){
         ?REGISTRY.find(def=>def.id===pupil.session?.widgetType)?.cat:null;
       actionButton("↘ "+T("amActionEasier"),"easier",
         ()=>{if(window.confirm(T("amActionEasierConfirm")))trigger("easier",{subject});},
-        !pupil.session||!["taal","rekenen","world"].includes(subject));
+        !pupil.session||!["taal","rekenen","world","creatief"].includes(subject));
       const pauseKind=pupil.session?.paused?"resume":"pause";
       actionButton((pauseKind==="pause"?"⏸ ":"▶ ")+
         T(pauseKind==="pause"?"amActionPause":"amActionResume"),pauseKind,

public/js/parent.js

@@ -106,10 +106,11 @@ function parentChildRow(c){
     levelHolder.innerHTML = "";
     try{
       const data = await api(`/parent/children/${c.id}/levels`);
-      ["taal","rekenen"].forEach(subject=>{
+      ["taal","rekenen","creatief"].forEach(subject=>{
         const current = data.levels?.[subject] || {yearGroup:4,level:2};
         const card = prH("section","learning-level-card");
-        card.appendChild(prH("h3",null,T(subject==="taal"?"parentLevelTaal":"parentLevelRekenen")));
+        const subjectKey={taal:"parentLevelTaal",rekenen:"parentLevelRekenen",creatief:"parentLevelCreative"}[subject];
+        card.appendChild(prH("h3",null,T(subjectKey)));
         const summary = prH("p","guestnote");
         const controls = prH("div","am-inline");
         const year = prH("select","am-sel"), level = prH("select","am-sel");

public/js/pupil.js

@@ -7,7 +7,7 @@
    voortgang wordt gelogd) of "kijken" (alleen meekijken: alle interactie
    geblokkeerd via een overlay, snellere poll zodat wijzigingen van de
    leerkracht vlot doorkomen). */
-const PUPIL_WIDGET_CATS = ["taal", "rekenen"];
+const PUPIL_WIDGET_CATS = ["taal", "rekenen", "creatief"];
 const PUPIL_POLL_MS = { kijken: 5000, werken: 20000 };
 const PUPIL_LIVE_HEARTBEAT_MS = 12000;
 const pupilView = document.getElementById("pupilView");

public/js/widgets/coloring.js

@@ -0,0 +1,368 @@
+/* teach - thematische kleurplaten met gekleurd potlood en vlakvulling */
+"use strict";
+
+const COLORING_THEME_KEYS=Object.freeze({
+  all:"colorThemeAll",animals:"colorThemeAnimals",seasons:"colorThemeSeasons",
+  nature:"colorThemeNature",science:"colorThemeScience",culture:"colorThemeCulture"
+});
+const COLORING_COLORS=Object.freeze([
+  "#26344a","#e0554d","#f28c3c","#f7c948","#3fae6a","#2fb7a8",
+  "#3b7dd8","#7557c8","#d85aa5","#8b5a3c","#f2b38f","#ffffff"
+]);
+
+function coloringPart(tag,id,attrs="",level=1){
+  return `<${tag} data-fillable="true" data-part="${id}"${level>1?` data-level="${level}"`:""} ${attrs}/>`;
+}
+function coloringLine(tag,attrs="",level=1){
+  return `<${tag}${level>1?` data-level="${level}"`:""} ${attrs}/>`;
+}
+function coloringScene(content){
+  return `<svg viewBox="0 0 800 600" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+    <g class="coloring-svg-lines" fill="#fff" stroke="#26344a" stroke-width="7" stroke-linecap="round" stroke-linejoin="round">
+      ${content}
+    </g>
+  </svg>`;
+}
+function coloringPetals(cx,cy,prefix,level=2){
+  return [0,60,120,180,240,300].map((angle,index)=>{
+    const rad=angle*Math.PI/180,x=(cx+Math.cos(rad)*27).toFixed(1),y=(cy+Math.sin(rad)*27).toFixed(1);
+    return coloringPart("circle",`${prefix}-petal-${index}`,`cx="${x}" cy="${y}" r="20"`,level);
+  }).join("")+coloringPart("circle",`${prefix}-heart`,`cx="${cx}" cy="${cy}" r="17"`,level);
+}
+function coloringStars(points,prefix,level=2){
+  return points.map(([x,y,r],index)=>coloringPart("path",`${prefix}-${index}`,
+    `d="M ${x} ${y-r} L ${x+r*.24} ${y-r*.25} L ${x+r} ${y} L ${x+r*.24} ${y+r*.25} L ${x} ${y+r} L ${x-r*.24} ${y+r*.25} L ${x-r} ${y} L ${x-r*.24} ${y-r*.25} Z"`,level)).join("");
+}
+
+function sceneButterfly(){return coloringScene(
+  coloringPart("rect","sky",'x="4" y="4" width="792" height="592" rx="28"')+
+  coloringPart("path","grass",'d="M 4 430 Q 170 390 320 438 T 796 420 L 796 596 L 4 596 Z"')+
+  coloringPart("circle","sun",'cx="685" cy="105" r="62"')+
+  coloringPart("ellipse","wing-left-top",'cx="304" cy="248" rx="112" ry="135" transform="rotate(-28 304 248)"')+
+  coloringPart("ellipse","wing-right-top",'cx="496" cy="248" rx="112" ry="135" transform="rotate(28 496 248)"')+
+  coloringPart("ellipse","wing-left-bottom",'cx="323" cy="386" rx="92" ry="105" transform="rotate(22 323 386)"')+
+  coloringPart("ellipse","wing-right-bottom",'cx="477" cy="386" rx="92" ry="105" transform="rotate(-22 477 386)"')+
+  coloringPart("ellipse","body",'cx="400" cy="316" rx="35" ry="142"')+
+  coloringPart("circle","head",'cx="400" cy="155" r="42"')+
+  coloringLine("path",'d="M 380 122 Q 340 72 315 82 M 420 122 Q 460 72 485 82" fill="none"')+
+  [[293,220],[507,220],[325,382],[475,382]].map(([x,y],i)=>coloringPart("circle",`wing-dot-${i}`,`cx="${x}" cy="${y}" r="28"`,2)).join("")+
+  coloringLine("path",'d="M 385 155 Q 400 170 415 155" fill="none"',2)+
+  coloringPetals(125,475,"flower-a",2)+coloringPetals(665,492,"flower-b",3)
+)}
+function sceneAutumn(){return coloringScene(
+  coloringPart("rect","sky",'x="4" y="4" width="792" height="592" rx="28"')+
+  coloringPart("path","ground",'d="M 4 440 Q 190 405 380 448 T 796 430 L 796 596 L 4 596 Z"')+
+  coloringPart("path","trunk",'d="M 337 500 Q 365 380 358 250 Q 398 285 420 250 Q 415 390 463 500 Z"')+
+  [[390,162,115],[285,215,95],[505,225,104],[340,290,92],[460,315,88]].map(([x,y,r],i)=>
+    coloringPart("circle",`crown-${i}`,`cx="${x}" cy="${y}" r="${r}"`,i>2?2:1)).join("")+
+  [[115,175,-18],[660,165,20],[175,355,12],[610,390,-24],[90,505,15],[705,500,-8]].map(([x,y,a],i)=>
+    coloringPart("path",`leaf-${i}`,`d="M ${x-35} ${y} Q ${x} ${y-45} ${x+35} ${y} Q ${x} ${y+45} ${x-35} ${y} Z" transform="rotate(${a} ${x} ${y})"`,2)).join("")+
+  coloringStars([[155,90,20],[585,95,18],[730,300,16]],"wind-leaf",3)+
+  coloringLine("path",'d="M 85 120 Q 170 80 240 118 M 560 120 Q 645 80 720 118" fill="none"',3)
+)}
+function sceneCake(){return coloringScene(
+  coloringPart("rect","party-wall",'x="4" y="4" width="792" height="592" rx="28"')+
+  coloringPart("path","table",'d="M 4 445 L 796 445 L 796 596 L 4 596 Z"')+
+  coloringPart("rect","cake-bottom",'x="190" y="360" width="420" height="120" rx="24"')+
+  coloringPart("rect","cake-middle",'x="245" y="265" width="310" height="105" rx="22"')+
+  coloringPart("rect","cake-top",'x="305" y="180" width="190" height="95" rx="20"')+
+  coloringPart("path","icing-bottom",'d="M 190 390 Q 225 430 260 390 Q 300 430 340 390 Q 380 430 420 390 Q 460 430 500 390 Q 555 430 610 390 L 610 360 L 190 360 Z"',2)+
+  coloringPart("path","icing-middle",'d="M 245 295 Q 285 330 325 295 Q 365 330 405 295 Q 450 330 495 295 Q 525 325 555 295 L 555 265 L 245 265 Z"',2)+
+  coloringPart("rect","candle",'x="382" y="93" width="36" height="92" rx="8"')+
+  coloringPart("path","flame",'d="M 400 92 Q 355 55 400 20 Q 445 55 400 92 Z"')+
+  [[110,115],[690,120],[135,280],[665,275]].map(([x,y],i)=>coloringPart("path",`balloon-${i}`,`d="M ${x} ${y+55} C ${x-65} ${y+20} ${x-48} ${y-65} ${x} ${y-65} C ${x+48} ${y-65} ${x+65} ${y+20} ${x} ${y+55} Z"`,i>1?2:1)).join("")+
+  coloringLine("path",'d="M 110 170 Q 130 260 95 350 M 690 175 Q 670 260 705 350 M 135 335 Q 160 390 140 440 M 665 330 Q 640 390 660 440" fill="none"')+
+  coloringStars([[205,95,22],[595,72,22],[90,405,15],[720,410,15]],"confetti",3)
+)}
+function sceneOcean(){return coloringScene(
+  coloringPart("rect","water",'x="4" y="4" width="792" height="592" rx="28"')+
+  coloringPart("path","sand",'d="M 4 475 Q 140 430 275 482 T 535 470 T 796 458 L 796 596 L 4 596 Z"')+
+  coloringPart("ellipse","fish-body",'cx="325" cy="260" rx="145" ry="88"')+
+  coloringPart("path","fish-tail",'d="M 185 260 L 85 178 Q 110 260 85 342 Z"')+
+  coloringPart("circle","fish-eye",'cx="395" cy="230" r="18"')+
+  coloringPart("path","turtle-shell",'d="M 510 390 Q 585 285 665 390 Q 600 485 510 390 Z"')+
+  coloringPart("circle","turtle-head",'cx="690" cy="382" r="38"')+
+  [[530,330,-28],[550,450,28],[635,330,25],[625,450,-25]].map(([x,y,a],i)=>coloringPart("ellipse",`flipper-${i}`,`cx="${x}" cy="${y}" rx="48" ry="20" transform="rotate(${a} ${x} ${y})"`,2)).join("")+
+  coloringLine("path",'d="M 270 220 Q 325 265 270 310 M 335 190 Q 370 260 335 330" fill="none"',2)+
+  coloringLine("path",'d="M 542 380 L 648 400 M 570 335 L 610 450 M 545 390 L 590 330 L 645 390 L 590 450 Z" fill="none"',3)+
+  [[115,105,18],[150,75,11],[640,100,22],[675,65,13],[730,145,15]].map(([x,y,r],i)=>coloringPart("circle",`bubble-${i}`,`cx="${x}" cy="${y}" r="${r}"`,3)).join("")+
+  coloringPart("path","seaweed-a",'d="M 120 525 Q 70 455 120 385 Q 165 455 120 525 Z"',2)+
+  coloringPart("path","seaweed-b",'d="M 190 535 Q 145 470 205 410 Q 240 475 190 535 Z"',3)
+)}
+function sceneGarden(){return coloringScene(
+  coloringPart("rect","garden-sky",'x="4" y="4" width="792" height="592" rx="28"')+
+  coloringPart("path","garden-ground",'d="M 4 390 Q 160 350 320 400 T 796 385 L 796 596 L 4 596 Z"')+
+  coloringPart("circle","sun",'cx="690" cy="95" r="58"')+
+  coloringPart("path","snail-shell",'d="M 120 405 C 120 290 300 290 305 405 C 280 490 155 490 120 405 Z"')+
+  coloringPart("path","snail-body",'d="M 95 455 Q 250 470 365 430 Q 410 415 438 450 Q 400 500 300 500 L 110 500 Z"')+
+  coloringPart("circle","snail-head",'cx="410" cy="410" r="48"')+
+  coloringLine("path",'d="M 388 370 L 370 315 M 427 370 L 450 318" fill="none"')+
+  coloringPart("circle","ladybird",'cx="600" cy="385" r="82"')+
+  coloringPart("circle","ladybird-head",'cx="600" cy="298" r="43"')+
+  coloringLine("path",'d="M 600 305 L 600 465 M 540 328 Q 600 385 540 440 M 660 328 Q 600 385 660 440" fill="none"',2)+
+  [[565,360],[635,360],[560,415],[640,415]].map(([x,y],i)=>coloringPart("circle",`ladybird-dot-${i}`,`cx="${x}" cy="${y}" r="15"`,2)).join("")+
+  coloringPetals(165,165,"garden-flower-a",2)+coloringPetals(430,145,"garden-flower-b",3)+
+  coloringLine("path",'d="M 165 205 L 165 315 M 430 185 L 430 280" fill="none"',2)
+)}
+function sceneWindmill(){return coloringScene(
+  coloringPart("rect","dutch-sky",'x="4" y="4" width="792" height="592" rx="28"')+
+  coloringPart("path","polder",'d="M 4 410 Q 190 380 365 420 T 796 405 L 796 596 L 4 596 Z"')+
+  coloringPart("path","water",'d="M 4 505 Q 200 475 400 515 T 796 500 L 796 596 L 4 596 Z"',2)+
+  coloringPart("path","mill-body",'d="M 310 470 L 350 185 L 485 185 L 535 470 Z"')+
+  coloringPart("path","mill-roof",'d="M 335 185 Q 420 78 500 185 Z"')+
+  coloringPart("rect","mill-door",'x="392" y="375" width="65" height="95" rx="25"')+
+  coloringPart("circle","mill-hub",'cx="418" cy="220" r="35"')+
+  [["M 405 190 L 320 55 L 345 40 L 430 205 Z"],["M 447 208 L 630 120 L 645 150 L 448 235 Z"],["M 430 250 L 515 410 L 485 425 L 405 248 Z"],["M 389 232 L 205 325 L 190 295 L 388 205 Z"]].map((d,i)=>coloringPart("path",`sail-${i}`,`d="${d}"`,1)).join("")+
+  coloringPart("rect","house",'x="80" y="345" width="165" height="125" rx="8"',2)+
+  coloringPart("path","house-roof",'d="M 55 345 L 165 260 L 270 345 Z"',2)+
+  coloringPart("rect","house-window-a",'x="105" y="375" width="45" height="45"',3)+
+  coloringPart("rect","house-window-b",'x="175" y="375" width="45" height="45"',3)+
+  coloringLine("path",'d="M 35 185 Q 75 155 115 185 Q 155 155 195 185 M 595 75 Q 630 50 665 75 Q 700 50 735 75" fill="none"',3)
+)}
+function sceneRocket(){return coloringScene(
+  coloringPart("rect","space",'x="4" y="4" width="792" height="592" rx="28"')+
+  coloringPart("circle","planet-large",'cx="650" cy="150" r="100"')+
+  coloringPart("path","planet-ring",'d="M 535 120 Q 650 195 765 120 Q 650 255 535 120 Z"',2)+
+  coloringPart("path","rocket-body",'d="M 320 420 Q 315 185 400 75 Q 485 185 480 420 Z"')+
+  coloringPart("circle","rocket-window",'cx="400" cy="225" r="48"')+
+  coloringPart("path","rocket-left-fin",'d="M 325 335 Q 245 385 245 480 L 350 410 Z"')+
+  coloringPart("path","rocket-right-fin",'d="M 475 335 Q 555 385 555 480 L 450 410 Z"')+
+  coloringPart("path","flame-outer",'d="M 350 420 Q 330 525 400 575 Q 470 525 450 420 Z"')+
+  coloringPart("path","flame-inner",'d="M 380 420 Q 365 495 400 530 Q 435 495 420 420 Z"',2)+
+  coloringStars([[110,105,30],[210,225,22],[680,350,28],[120,430,20],[575,80,15]],"space-star",2)+
+  coloringPart("circle","moon",'cx="680" cy="475" r="62"',3)+
+  [[655,458,13],[700,490,17],[690,445,9]].map(([x,y,r],i)=>coloringPart("circle",`crater-${i}`,`cx="${x}" cy="${y}" r="${r}"`,3)).join("")
+)}
+function sceneRainforest(){return coloringScene(
+  coloringPart("rect","forest-sky",'x="4" y="4" width="792" height="592" rx="28"')+
+  coloringPart("path","forest-floor",'d="M 4 475 Q 190 430 360 490 T 796 455 L 796 596 L 4 596 Z"')+
+  coloringPart("path","tree-trunk-left",'d="M 40 500 Q 95 330 70 45 L 205 45 Q 165 330 235 500 Z"')+
+  coloringPart("path","tree-trunk-right",'d="M 585 500 Q 640 300 615 35 L 760 35 Q 720 300 785 500 Z"')+
+  coloringPart("path","vine",'d="M 170 55 Q 300 175 230 315 Q 170 430 300 485 Q 400 525 455 425 Q 505 330 430 265"',2)+
+  coloringPart("path","parrot-body",'d="M 340 270 Q 390 155 490 230 Q 520 330 430 405 Q 330 390 340 270 Z"')+
+  coloringPart("circle","parrot-head",'cx="450" cy="205" r="75"')+
+  coloringPart("path","parrot-beak",'d="M 505 205 Q 590 225 515 270 Z"')+
+  coloringPart("path","parrot-wing",'d="M 365 275 Q 455 245 465 365 Q 390 400 365 275 Z"',2)+
+  coloringPart("circle","parrot-eye",'cx="470" cy="185" r="14"')+
+  [[285,125,-25],[540,100,18],[265,405,15],[525,450,-20]].map(([x,y,a],i)=>coloringPart("path",`forest-leaf-${i}`,`d="M ${x-55} ${y} Q ${x} ${y-70} ${x+55} ${y} Q ${x} ${y+70} ${x-55} ${y} Z" transform="rotate(${a} ${x} ${y})"`,i<2?2:3)).join("")+
+  coloringLine("path",'d="M 285 70 L 285 180 M 540 30 L 540 170 M 265 335 L 265 475 M 525 375 L 525 525" fill="none"',3)
+)}
+function sceneCastle(){return coloringScene(
+  coloringPart("rect","castle-sky",'x="4" y="4" width="792" height="592" rx="28"')+
+  coloringPart("path","castle-hill",'d="M 4 445 Q 200 380 400 450 T 796 420 L 796 596 L 4 596 Z"')+
+  coloringPart("rect","castle-main",'x="225" y="245" width="350" height="250"')+
+  coloringPart("rect","tower-left",'x="115" y="195" width="155" height="300"')+
+  coloringPart("rect","tower-right",'x="530" y="195" width="155" height="300"')+
+  coloringPart("path","roof-left",'d="M 85 195 L 193 75 L 300 195 Z"')+
+  coloringPart("path","roof-right",'d="M 500 195 L 608 75 L 715 195 Z"')+
+  coloringPart("path","gate",'d="M 350 495 L 350 385 Q 400 325 450 385 L 450 495 Z"')+
+  coloringPart("rect","flag-left",'x="193" y="55" width="92" height="50"',2)+
+  coloringPart("rect","flag-right",'x="608" y="55" width="92" height="50"',2)+
+  [[160,255],[225,255],[575,255],[640,255],[280,300],[475,300]].map(([x,y],i)=>coloringPart("rect",`window-${i}`,`x="${x-20}" y="${y-25}" width="40" height="58" rx="18"`,i>3?3:2)).join("")+
+  coloringLine("path",'d="M 225 345 L 575 345 M 155 385 L 230 385 M 570 385 L 645 385" fill="none"',3)+
+  coloringPart("path","path",'d="M 350 596 Q 365 510 400 445 Q 435 510 470 596 Z"',2)
+)}
+function sceneFourSeasons(){return coloringScene(
+  coloringPart("rect","season-sky",'x="4" y="4" width="792" height="592" rx="28"')+
+  coloringPart("path","season-ground",'d="M 4 455 Q 190 420 390 465 T 796 440 L 796 596 L 4 596 Z"')+
+  coloringPart("path","season-trunk",'d="M 345 510 Q 380 350 375 210 Q 420 255 445 205 Q 425 365 475 510 Z"')+
+  coloringPart("path","spring-crown",'d="M 385 230 Q 245 250 210 165 Q 225 65 355 85 Q 430 125 385 230 Z"')+
+  coloringPart("path","summer-crown",'d="M 395 230 Q 430 80 545 75 Q 675 95 620 220 Q 520 285 395 230 Z"')+
+  coloringPart("path","autumn-crown",'d="M 405 240 Q 560 220 635 295 Q 670 415 535 425 Q 420 390 405 240 Z"')+
+  coloringPart("path","winter-crown",'d="M 380 235 Q 335 385 225 420 Q 105 390 165 280 Q 250 210 380 235 Z"')+
+  coloringPetals(280,145,"spring-flower",2)+
+  coloringPart("circle","summer-fruit-a",'cx="515" cy="165" r="24"',2)+coloringPart("circle","summer-fruit-b",'cx="570" cy="215" r="24"',3)+
+  [[500,310,-15],[575,355,20],[460,375,-30]].map(([x,y,a],i)=>coloringPart("path",`autumn-leaf-${i}`,`d="M ${x-28} ${y} Q ${x} ${y-38} ${x+28} ${y} Q ${x} ${y+38} ${x-28} ${y} Z" transform="rotate(${a} ${x} ${y})"`,i===2?3:2)).join("")+
+  coloringStars([[205,310,17],[285,345,15],[160,365,13]],"snowflake",3)
+)}
+function sceneEcoCity(){return coloringScene(
+  coloringPart("rect","city-sky",'x="4" y="4" width="792" height="592" rx="28"')+
+  coloringPart("path","city-ground",'d="M 4 455 L 796 455 L 796 596 L 4 596 Z"')+
+  coloringPart("rect","tower",'x="95" y="190" width="155" height="265" rx="8"')+
+  coloringPart("rect","school",'x="285" y="275" width="235" height="180" rx="8"')+
+  coloringPart("path","school-roof",'d="M 260 275 L 402 185 L 545 275 Z"')+
+  coloringPart("rect","apartments",'x="565" y="135" width="145" height="320" rx="8"')+
+  [[135,235],[205,235],[135,305],[205,305],[135,375],[205,375],[600,185],[670,185],[600,255],[670,255],[600,325],[670,325]].map(([x,y],i)=>coloringPart("rect",`city-window-${i}`,`x="${x-22}" y="${y-25}" width="44" height="50"`,i>5?2:1)).join("")+
+  coloringPart("rect","school-door",'x="375" y="365" width="55" height="90" rx="12"')+
+  coloringPart("circle","tree-crown",'cx="60" cy="410" r="55"',2)+coloringPart("rect","tree-trunk",'x="48" y="430" width="24" height="75"',2)+
+  coloringPart("path","bike-frame",'d="M 250 515 L 315 515 L 285 470 L 250 515 L 330 465"',3)+
+  coloringLine("circle",'cx="240" cy="520" r="34" fill="none"',3)+coloringLine("circle",'cx="330" cy="520" r="34" fill="none"',3)+
+  coloringPart("path","solar-a",'d="M 100 190 L 125 135 L 245 135 L 225 190 Z"',2)+coloringPart("path","solar-b",'d="M 580 135 L 600 80 L 705 80 L 690 135 Z"',2)+
+  coloringLine("path",'d="M 125 160 L 235 160 M 165 135 L 155 190 M 205 135 L 195 190 M 600 105 L 700 105 M 635 80 L 625 135 M 670 80 L 660 135" fill="none"',3)
+)}
+function sceneMandala(){
+  const rings=[];
+  for(let i=0;i<16;i++){
+    const angle=i*Math.PI/8,cx=400+Math.cos(angle)*155,cy=300+Math.sin(angle)*155;
+    rings.push(coloringPart("ellipse",`mandala-outer-${i}`,`cx="${cx.toFixed(1)}" cy="${cy.toFixed(1)}" rx="38" ry="82" transform="rotate(${i*22.5+90} ${cx.toFixed(1)} ${cy.toFixed(1)})"`,i%2?3:2));
+  }
+  for(let i=0;i<12;i++){
+    const angle=i*Math.PI/6,cx=400+Math.cos(angle)*92,cy=300+Math.sin(angle)*92;
+    rings.push(coloringPart("path",`mandala-inner-${i}`,`d="M 400 300 Q ${cx.toFixed(1)} ${cy.toFixed(1)} ${(400+Math.cos(angle+.28)*145).toFixed(1)} ${(300+Math.sin(angle+.28)*145).toFixed(1)} Q ${cx.toFixed(1)} ${cy.toFixed(1)} 400 300 Z"`,1));
+  }
+  return coloringScene(
+    coloringPart("rect","mandala-bg",'x="4" y="4" width="792" height="592" rx="28"')+
+    rings.join("")+coloringPart("circle","mandala-heart",'cx="400" cy="300" r="62"')+
+    coloringStars([[400,300,34]],"mandala-star",3)
+  );
+}
+function sceneEcosystem(){return coloringScene(
+  coloringPart("rect","pond-sky",'x="4" y="4" width="792" height="592" rx="28"')+
+  coloringPart("path","pond-bank",'d="M 4 390 Q 160 335 315 395 T 620 375 T 796 390 L 796 596 L 4 596 Z"')+
+  coloringPart("ellipse","pond-water",'cx="405" cy="485" rx="310" ry="90"')+
+  coloringPart("path","frog-body",'d="M 305 435 Q 345 350 410 430 Q 465 350 505 435 Q 460 500 405 470 Q 350 500 305 435 Z"')+
+  coloringPart("circle","frog-eye-a",'cx="350" cy="385" r="34"')+coloringPart("circle","frog-eye-b",'cx="460" cy="385" r="34"')+
+  coloringPart("path","lily-pad-a",'d="M 120 505 Q 205 430 280 510 Q 205 555 120 505 Z"',2)+
+  coloringPart("path","lily-pad-b",'d="M 525 515 Q 610 435 690 510 Q 610 560 525 515 Z"',2)+
+  coloringPart("path","dragonfly-body",'d="M 585 220 Q 600 300 585 365 Q 570 300 585 220 Z"',2)+
+  [[545,250,-25],[625,250,25],[550,310,25],[620,310,-25]].map(([x,y,a],i)=>coloringPart("ellipse",`dragonfly-wing-${i}`,`cx="${x}" cy="${y}" rx="55" ry="22" transform="rotate(${a} ${x} ${y})"`,2)).join("")+
+  coloringPart("circle","sun",'cx="115" cy="105" r="55"')+
+  coloringPart("path","reed-a",'d="M 105 440 Q 75 320 105 210 Q 135 320 105 440 Z"',3)+coloringPart("path","reed-b",'d="M 160 430 Q 130 300 165 185 Q 195 310 160 430 Z"',3)+
+  coloringLine("path",'d="M 105 310 L 65 270 M 160 325 L 205 270" fill="none"',3)
+)}
+
+const COLORING_PAGES=Object.freeze([
+  {id:"butterfly",theme:"animals",years:[1,2],title:{nl:"Blije vlinder",en:"Happy butterfly"},svg:sceneButterfly()},
+  {id:"autumn",theme:"seasons",years:[1,2],title:{nl:"Herfstboom",en:"Autumn tree"},svg:sceneAutumn()},
+  {id:"cake",theme:"culture",years:[1,2],title:{nl:"Feesttaart",en:"Party cake"},svg:sceneCake()},
+  {id:"ocean",theme:"animals",years:[3,4],title:{nl:"Vrienden in zee",en:"Ocean friends"},svg:sceneOcean()},
+  {id:"garden",theme:"nature",years:[3,4],title:{nl:"Kleine tuindieren",en:"Little garden animals"},svg:sceneGarden()},
+  {id:"windmill",theme:"culture",years:[3,4],title:{nl:"Molen in de polder",en:"Windmill in the polder"},svg:sceneWindmill()},
+  {id:"rocket",theme:"science",years:[5,6],title:{nl:"Raket door de ruimte",en:"Rocket through space"},svg:sceneRocket()},
+  {id:"rainforest",theme:"nature",years:[5,6],title:{nl:"Regenwoud",en:"Rainforest"},svg:sceneRainforest()},
+  {id:"castle",theme:"culture",years:[5,6],title:{nl:"Kasteel en dorp",en:"Castle and village"},svg:sceneCastle()},
+  {id:"four-seasons",theme:"seasons",years:[7,8],title:{nl:"Boom van vier seizoenen",en:"Four seasons tree"},svg:sceneFourSeasons()},
+  {id:"eco-city",theme:"science",years:[7,8],title:{nl:"Duurzame stad",en:"Sustainable city"},svg:sceneEcoCity()},
+  {id:"mandala",theme:"culture",years:[7,8],title:{nl:"Geometrische mandala",en:"Geometric mandala"},svg:sceneMandala()},
+  {id:"ecosystem",theme:"nature",years:[7,8],title:{nl:"Leven rond de vijver",en:"Life around the pond"},svg:sceneEcosystem()}
+]);
+
+function coloringPagesFor(yearGroup,theme="all"){
+  const year=Math.max(1,Math.min(8,Number(yearGroup)||4));
+  return COLORING_PAGES.filter(page=>year>=page.years[0]&&year<=page.years[1]&&(theme==="all"||page.theme===theme));
+}
+function coloringPencilWidth(size,pressure,pointerType){
+  const base=Math.max(2,Math.min(18,Number(size)||6));
+  return pointerType==="pen"&&pressure>0?base*(.45+pressure*1.2):base;
+}
+function coloringSafeColor(value,fallback=COLORING_COLORS[1]){
+  return /^#[0-9a-f]{6}$/i.test(String(value||""))?String(value).toLowerCase():fallback;
+}
+
+function mountColoring(root,initState,opts={}){
+  const yearGroup=Math.max(1,Math.min(8,Number(initState&&initState.yearGroup)||4));
+  const level=Math.max(1,Math.min(3,Number(initState&&initState.level)||2));
+  let tool=["pencil","bucket","eraser"].includes(initState&&initState.tool)?initState.tool:"pencil";
+  let color=coloringSafeColor(initState&&initState.color);
+  let size=[4,7,12].includes(Number(initState&&initState.size))?Number(initState.size):7;
+  let theme=COLORING_THEME_KEYS[initState&&initState.theme]?initState.theme:"all";
+  let pageId=String(initState&&initState.pageId||"");
+  let fills=initState&&initState.pageId===pageId&&initState.fills&&typeof initState.fills==="object"?{...initState.fills}:{};
+  let completed=!!(initState&&initState.completed),restoreInk=initState&&initState.ink;
+
+  root.innerHTML=`<div class="coloring-app">
+    <div class="coloring-choices">
+      <label><span class="coloring-theme-label"></span><select class="coloring-theme"></select></label>
+      <label><span class="coloring-page-label"></span><select class="coloring-page"></select></label>
+      <span class="coloring-fit"></span>
+    </div>
+    <div class="coloring-tools">
+      <div class="coloring-tool-buttons"></div>
+      <div class="coloring-palette"></div>
+      <label class="coloring-custom"><span></span><input type="color"></label>
+      <div class="coloring-sizes"></div>
+      <button class="coloring-reset" type="button">↺</button>
+      <button class="coloring-done tbtn" type="button"></button>
+    </div>
+    <div class="coloring-stage"><div class="coloring-paper" role="img"><div class="coloring-art"></div><canvas width="800" height="600"></canvas></div></div>
+    <div class="coloring-hint" aria-live="polite"></div>
+  </div>`;
+  const app=root.querySelector(".coloring-app"),themeSel=root.querySelector(".coloring-theme"),pageSel=root.querySelector(".coloring-page");
+  const art=root.querySelector(".coloring-art"),paper=root.querySelector(".coloring-paper"),canvas=root.querySelector("canvas"),ctx=canvas.getContext("2d");
+  const toolHost=root.querySelector(".coloring-tool-buttons"),palette=root.querySelector(".coloring-palette"),sizes=root.querySelector(".coloring-sizes");
+  const custom=root.querySelector(".coloring-custom input"),reset=root.querySelector(".coloring-reset"),done=root.querySelector(".coloring-done"),hint=root.querySelector(".coloring-hint");
+  const TOOLS=[["pencil","✏️","colorToolPencil"],["bucket","🪣","colorToolBucket"],["eraser","🧽","eraser"]];
+
+  TOOLS.forEach(([id,icon])=>{const button=document.createElement("button");button.type="button";button.dataset.tool=id;button.textContent=icon;button.onclick=()=>{tool=id;refreshTools()};toolHost.appendChild(button)});
+  COLORING_COLORS.forEach(value=>{const button=document.createElement("button");button.type="button";button.className="coloring-color";button.dataset.color=value;const dot=document.createElement("i");dot.style.background=value;button.appendChild(dot);button.onclick=()=>{color=value;custom.value=value;if(tool==="eraser")tool="pencil";refreshTools()};palette.appendChild(button)});
+  [4,7,12].forEach(value=>{const button=document.createElement("button");button.type="button";button.className="coloring-size";button.dataset.size=value;const dot=document.createElement("i");dot.style.width=dot.style.height=(value+5)+"px";button.appendChild(dot);button.onclick=()=>{size=value;refreshTools()};sizes.appendChild(button)});
+  custom.value=color;custom.oninput=()=>{color=coloringSafeColor(custom.value,color);if(tool==="eraser")tool="pencil";refreshTools()};
+
+  function pageTitle(page){return page.title[LANG]||page.title.nl}
+  function eligibleThemes(){return [...new Set(coloringPagesFor(yearGroup).map(page=>page.theme))]}
+  function currentPages(){return coloringPagesFor(yearGroup,theme)}
+  function rebuildThemeOptions(){
+    const previous=theme;themeSel.replaceChildren();
+    const all=new Option(T("colorThemeAll"),"all");themeSel.add(all);
+    eligibleThemes().forEach(id=>themeSel.add(new Option(T(COLORING_THEME_KEYS[id]),id)));
+    theme=themeSel.querySelector(`option[value="${previous}"]`)?previous:"all";themeSel.value=theme;
+  }
+  function rebuildPageOptions(prefer=pageId){
+    const pages=currentPages();pageSel.replaceChildren();
+    pages.forEach(page=>pageSel.add(new Option(pageTitle(page),page.id)));
+    pageId=pages.some(page=>page.id===prefer)?prefer:(pages[0]&&pages[0].id)||"";pageSel.value=pageId;
+  }
+  function clearInk(){ctx.clearRect(0,0,canvas.width,canvas.height)}
+  function loadInk(url){
+    clearInk();if(!url)return;
+    const image=new Image();image.onload=()=>{clearInk();ctx.drawImage(image,0,0,canvas.width,canvas.height)};image.src=url;
+  }
+  function renderPage(keepState){
+    const page=COLORING_PAGES.find(item=>item.id===pageId)||currentPages()[0];if(!page)return;
+    pageId=page.id;art.innerHTML=page.svg;
+    const svg=art.querySelector("svg");paper.setAttribute("aria-label",pageTitle(page));
+    svg.querySelectorAll("[data-level]").forEach(node=>node.toggleAttribute("hidden",Number(node.dataset.level)>level));
+    if(!keepState){fills={};completed=false;restoreInk=null;clearInk()}
+    svg.querySelectorAll("[data-fillable][data-part]").forEach(node=>{
+      const saved=coloringSafeColor(fills[node.dataset.part],"");if(saved)node.setAttribute("fill",saved);
+    });
+    if(keepState&&restoreInk){loadInk(restoreInk);restoreInk=null}
+    refreshTools();updateTexts();
+  }
+  function updateTexts(){
+    root.querySelector(".coloring-theme-label").textContent=T("colorTheme");
+    root.querySelector(".coloring-page-label").textContent=T("colorPage");
+    root.querySelector(".coloring-fit").textContent=T("colorProfile").replace("{year}",yearGroup).replace("{level}",level);
+    TOOLS.forEach(([id,,key])=>{const button=toolHost.querySelector(`[data-tool="${id}"]`);button.title=T(key);button.setAttribute("aria-label",T(key))});
+    custom.parentElement.querySelector("span").textContent=T("customColor");
+    reset.title=T("colorReset");reset.setAttribute("aria-label",T("colorReset"));
+    done.textContent=completed?"✓ "+T("colorFinished"):T("colorDone");
+    hint.textContent=T(tool==="bucket"?"colorBucketHint":tool==="eraser"?"colorEraserHint":"colorPencilHint");
+    const selected=pageId;rebuildPageOptions(selected);
+  }
+  function refreshTools(){
+    toolHost.querySelectorAll("button").forEach(button=>{const on=button.dataset.tool===tool;button.classList.toggle("on",on);button.setAttribute("aria-pressed",String(on))});
+    palette.querySelectorAll("button").forEach(button=>button.classList.toggle("on",button.dataset.color===color&&tool!=="eraser"));
+    sizes.querySelectorAll("button").forEach(button=>{button.classList.toggle("on",Number(button.dataset.size)===size);button.title=T("penSize")});
+    app.dataset.tool=tool;canvas.style.pointerEvents=tool==="bucket"?"none":"auto";art.style.pointerEvents=tool==="bucket"?"auto":"none";
+    hint.textContent=T(tool==="bucket"?"colorBucketHint":tool==="eraser"?"colorEraserHint":"colorPencilHint");
+  }
+  themeSel.onchange=()=>{theme=themeSel.value;rebuildPageOptions("");renderPage(false)};
+  pageSel.onchange=()=>{pageId=pageSel.value;renderPage(false)};
+  art.addEventListener("click",event=>{
+    if(tool!=="bucket")return;const part=event.target.closest("[data-fillable][data-part]");if(!part||part.hasAttribute("hidden"))return;
+    part.setAttribute("fill",color);fills[part.dataset.part]=color;completed=false;updateTexts();
+  });
+
+  const point=event=>{const rect=canvas.getBoundingClientRect();return{x:(event.clientX-rect.left)*canvas.width/rect.width,y:(event.clientY-rect.top)*canvas.height/rect.height}};
+  let drawing=false,last=null,mid=null;
+  function pencilSegment(next,event){
+    const width=coloringPencilWidth(size,event.pressure,event.pointerType),erase=tool==="eraser";
+    ctx.save();ctx.globalCompositeOperation=erase?"destination-out":"source-over";ctx.strokeStyle=color;ctx.globalAlpha=erase?1:.27;ctx.lineCap="round";ctx.lineJoin="round";ctx.lineWidth=erase?width*3.5:width;
+    const nextMid={x:(last.x+next.x)/2,y:(last.y+next.y)/2};ctx.beginPath();ctx.moveTo(mid?mid.x:last.x,mid?mid.y:last.y);ctx.quadraticCurveTo(last.x,last.y,nextMid.x,nextMid.y);ctx.stroke();
+    if(!erase){for(let n=0;n<2;n++){const jitter=(Math.random()-.5)*width*.65;ctx.globalAlpha=.07;ctx.lineWidth=Math.max(1,width*.28);ctx.beginPath();ctx.moveTo(last.x+jitter,last.y-jitter);ctx.lineTo(next.x-jitter,next.y+jitter);ctx.stroke()}}
+    ctx.restore();last=next;mid=nextMid;
+  }
+  canvas.addEventListener("pointerdown",event=>{if(tool==="bucket"||(event.pointerType==="mouse"&&event.button!==0))return;event.preventDefault();canvas.setPointerCapture(event.pointerId);drawing=true;last=point(event);mid=null;pencilSegment({x:last.x+.01,y:last.y+.01},event);completed=false;updateTexts()});
+  canvas.addEventListener("pointermove",event=>{if(!drawing)return;(event.getCoalescedEvents?event.getCoalescedEvents():[event]).forEach(sample=>pencilSegment(point(sample),sample))});
+  const stop=()=>{drawing=false;last=mid=null};canvas.addEventListener("pointerup",stop);canvas.addEventListener("pointercancel",stop);
+  reset.onclick=()=>{fills={};completed=false;clearInk();renderPage(false)};
+  done.onclick=()=>{completed=true;updateTexts();if(typeof opts.onProgress==="function")opts.onProgress({attempts:1,correct:1,stars:1,detail:{question:pageTitle(COLORING_PAGES.find(page=>page.id===pageId)),answer:T("colorFinished"),correct:true}})};
+  document.addEventListener("langchange",()=>{rebuildThemeOptions();updateTexts();renderPage(true)});
+
+  rebuildThemeOptions();rebuildPageOptions(pageId);renderPage(true);
+  return{getState:()=>{
+    let ink=null;try{ink=canvas.toDataURL("image/png")}catch(_){/* een leeg canvas blijft gewoon herstelbaar */}
+    return{theme,pageId,fills:{...fills},ink,tool,color,size,completed,yearGroup,level,managedLearningLevel:!!(initState&&initState.managedLearningLevel)};
+  }};
+}

public/js/wiki.js

@@ -130,9 +130,10 @@
     profiles.appendChild(node("summary",null,T("wikiYearProfiles")));
     profiles.appendChild(node("p",null,T("wikiYearProfilesText")));
     const profileGrid=node("div","wiki-profile-grid");
-    [["taal","📖"],["rekenen","🔢"]].forEach(([subject,icon])=>{
+    [["taal","📖"],["rekenen","🔢"],["creatief","🎨"]].forEach(([subject,icon])=>{
       const column=node("section","wiki-profile-column");
-      column.appendChild(node("h3",null,icon+" "+(subject==="taal"?T("parentLevelTaal"):T("parentLevelRekenen"))));
+      const subjectKey={taal:"parentLevelTaal",rekenen:"parentLevelRekenen",creatief:"parentLevelCreative"}[subject];
+      column.appendChild(node("h3",null,icon+" "+T(subjectKey)));
       LEARNING_YEAR_PROFILES[subject].slice(1).forEach((profile,index)=>{
         const row=node("article","wiki-profile-row");
         row.appendChild(node("strong",null,T("wikiYear").replace("{n}",index+1)));

src/api.js

@@ -1167,12 +1167,12 @@ export default async function api(app) {
 
   // ---- klassenmanagement: niveaugroep + niveau per leerling per vakgebied -------
   // Zelfde klas-standaard-met-leerling-override-vorm als assignments hierboven,
-  // nu met vakgebied als extra dimensie (subject: taal/rekenen/world - dezelfde
+  // nu met vakgebied als extra dimensie (subject: taal/rekenen/world/creatief - dezelfde
   // waarden als REGISTRY's cat in board.js). "groep" (year_group, 1-8) is de
   // niveaugroep gebaseerd op de leerjaren van de basisschool waaraan de
   // leerdoelen gekoppeld zijn; "level" (1-3, niet geklemd in het datamodel) is
   // de fijnmazige verfijning daarbinnen die widgets nu al kennen.
-  const LEVEL_SUBJECTS = ['taal', 'rekenen', 'world'];
+  const LEVEL_SUBJECTS = ['taal', 'rekenen', 'world', 'creatief'];
   const describePupilLevel = (row) => ({ yearGroup: Number(row.year_group), level: Number(row.level) });
   const parseLevelBody = (req, reply) => {
     const { subject, yearGroup, level } = req.body ?? {};
@@ -1291,7 +1291,7 @@ export default async function api(app) {
     if (req.user.school_id != null) return fail(reply, 403, 'het leerniveau wordt door de school beheerd');
     const body = parseLevelBody(req, reply);
     if (body.error) return body;
-    if (!['taal', 'rekenen'].includes(body.subject)) return fail(reply, 400, 'ongeldig vakgebied');
+    if (!['taal', 'rekenen', 'creatief'].includes(body.subject)) return fail(reply, 400, 'ongeldig vakgebied');
     await pool.query(
       `INSERT INTO pupil_levels (pupil_id, subject, year_group, level) VALUES ($1,$2,$3,$4)
        ON CONFLICT (pupil_id, subject) WHERE pupil_id IS NOT NULL
@@ -1525,7 +1525,7 @@ export default async function api(app) {
     if (!child || child.role !== 'pupil') return fail(reply, 404, 'kind onbekend');
     if (child.school_id != null) return { schoolManaged: true, levels: {} };
     const rows = (await pool.query(
-      "SELECT * FROM pupil_levels WHERE pupil_id = $1 AND subject IN ('taal','rekenen')",
+      "SELECT * FROM pupil_levels WHERE pupil_id = $1 AND subject IN ('taal','rekenen','creatief')",
       [child.id])).rows;
     return {
       schoolManaged: false,
@@ -1541,7 +1541,7 @@ export default async function api(app) {
     if (child.school_id != null) return fail(reply, 403, 'het leerniveau wordt door de school beheerd');
     const body = parseLevelBody(req, reply);
     if (body.error) return body;
-    if (!['taal', 'rekenen'].includes(body.subject)) return fail(reply, 400, 'ongeldig vakgebied');
+    if (!['taal', 'rekenen', 'creatief'].includes(body.subject)) return fail(reply, 400, 'ongeldig vakgebied');
     await pool.query(
       `INSERT INTO pupil_levels (pupil_id, subject, year_group, level) VALUES ($1,$2,$3,$4)
        ON CONFLICT (pupil_id, subject) WHERE pupil_id IS NOT NULL

src/live-classroom.js

@@ -5,7 +5,7 @@
 const LIVE_WINDOW_MS = 45_000;
 const HELP_IDLE_MS = 3 * 60_000;
 const ACTION_KINDS = new Set(['hint', 'encourage', 'pause', 'resume', 'easier']);
-const LEVEL_SUBJECTS = new Set(['taal', 'rekenen', 'world']);
+const LEVEL_SUBJECTS = new Set(['taal', 'rekenen', 'world', 'creatief']);
 
 export default function registerLiveClassroom(app, options) {
   const {

test/coloring.test.js

@@ -0,0 +1,96 @@
+import test from 'node:test';
+import assert from 'node:assert/strict';
+import {readFile} from 'node:fs/promises';
+import {runInNewContext} from 'node:vm';
+
+async function coloringContext(){
+  const source=await readFile('public/js/widgets/coloring.js','utf8');
+  const context={};
+  runInNewContext(source+`;
+    globalThis.__coloring={
+      pages:COLORING_PAGES,
+      themes:COLORING_THEME_KEYS,
+      pagesFor:coloringPagesFor,
+      pencilWidth:coloringPencilWidth,
+      safeColor:coloringSafeColor
+    }`,context);
+  return{source,api:context.__coloring};
+}
+
+test('kleurplatenwidget laadt vóór het bord en is als creatieve leerlingwidget geregistreerd',async()=>{
+  const [html,board,pupil,cast,core,css]=await Promise.all([
+    readFile('public/index.html','utf8'),readFile('public/js/board.js','utf8'),
+    readFile('public/js/pupil.js','utf8'),readFile('public/js/cast.js','utf8'),
+    readFile('public/js/core.js','utf8'),readFile('public/css/coloring.css','utf8')
+  ]);
+  assert.ok(html.indexOf('js/widgets/coloring.js')>0);
+  assert.ok(html.indexOf('js/widgets/coloring.js')<html.indexOf('js/board.js'));
+  assert.match(html,/css\/coloring\.css\?v=__V__/);
+  assert.match(board,/id:"coloring"[^\n]*cat:"creatief"[^\n]*mount:mountColoring/);
+  assert.match(pupil,/PUPIL_WIDGET_CATS\s*=\s*\[[^\]]*"creatief"/);
+  assert.match(cast,/CAST_WIDGET_CATEGORIES=new Set\(\[[^\]]*"creatief"/);
+  assert.match(css,/\.coloring-paper[^}]*aspect-ratio:4\/3/);
+  for(const key of ['wg_coloring','wg_coloring_d','catCreative','colorToolPencil','colorToolBucket','colorBucketHint','colorPencilHint']){
+    assert.equal((core.match(new RegExp(key+':','g'))||[]).length,2,key);
+  }
+});
+
+test('elk leerjaar heeft meerdere passende kleurplaten met thema en drie detailniveaus',async()=>{
+  const {api}=await coloringContext();
+  const pages=JSON.parse(JSON.stringify(api.pages));
+  assert.equal(pages.length,13);
+  assert.equal(new Set(pages.map(page=>page.id)).size,pages.length);
+  for(let year=1;year<=8;year++){
+    const suitable=JSON.parse(JSON.stringify(api.pagesFor(year)));
+    assert.ok(suitable.length>=3,`groep ${year} heeft minimaal drie kleurplaten`);
+    assert.ok(suitable.every(page=>year>=page.years[0]&&year<=page.years[1]));
+    assert.ok(new Set(suitable.map(page=>page.theme)).size>=3,`groep ${year} heeft diverse thema's`);
+  }
+  for(const page of pages){
+    assert.ok(api.themes[page.theme],page.id+' heeft een bekend thema');
+    assert.ok(page.title.nl&&page.title.en,page.id+' heeft een tweetalige titel');
+    assert.match(page.svg,/data-fillable="true"/);
+    assert.match(page.svg,/data-level="2"/);
+    assert.match(page.svg,/data-level="3"/);
+    assert.doesNotMatch(page.svg,/<script|on\w+=/i);
+  }
+  assert.equal(api.pagesFor(5,'science').length,1);
+  assert.equal(api.pagesFor(3,'science').length,0);
+});
+
+test('potlood reageert op echte pendruk en bouwt kleur transparant op',async()=>{
+  const {source,api}=await coloringContext();
+  assert.ok(api.pencilWidth(7,.9,'pen')>api.pencilWidth(7,.2,'pen'));
+  assert.equal(api.pencilWidth(7,0,'mouse'),7);
+  assert.equal(api.safeColor('#AABBCC'),'#aabbcc');
+  assert.equal(api.safeColor('red'),'#e0554d');
+  for(const feature of ['getCoalescedEvents','event.pressure','erase?1:.27','quadraticCurveTo','Math.random()'])assert.ok(source.includes(feature),feature);
+  const css=await readFile('public/css/coloring.css','utf8');
+  assert.match(css,/mix-blend-mode:multiply/);
+});
+
+test('verfemmer vult een SVG-vak in één keer en state bewaart potlood én vlakkleuren',async()=>{
+  const {source}=await coloringContext();
+  assert.match(source,/event\.target\.closest\("\[data-fillable\]\[data-part\]\"\)/);
+  assert.match(source,/part\.setAttribute\("fill",color\)/);
+  assert.match(source,/fills\[part\.dataset\.part\]=color/);
+  assert.match(source,/canvas\.toDataURL\("image\/png"\)/);
+  assert.match(source,/return\{theme,pageId,fills:\{\.\.\.fills\},ink,tool,color,size,completed,yearGroup,level/);
+  assert.match(source,/opts\.onProgress/);
+});
+
+test('creatief niveau is beschikbaar per klas, leerling en thuiskind',async()=>{
+  const [api,admin,progressions,parent,wiki,migration,live]=await Promise.all([
+    readFile('src/api.js','utf8'),readFile('public/js/admin.js','utf8'),
+    readFile('public/js/learning-progressions.js','utf8'),readFile('public/js/parent.js','utf8'),
+    readFile('public/js/wiki.js','utf8'),
+    readFile('db/024_creative_pupil_levels.sql','utf8'),readFile('src/live-classroom.js','utf8')
+  ]);
+  assert.match(api,/LEVEL_SUBJECTS = \[[^\]]*'creatief'/);
+  assert.match(admin,/KM_SUBJECTS = \[[^\]]*"creatief"/);
+  assert.match(progressions,/LEARNING_SUBJECTS=\[[^\]]*"creatief"/);
+  assert.match(parent,/\["taal","rekenen","creatief"\]\.forEach/);
+  assert.match(wiki,/creatief:"parentLevelCreative"/);
+  assert.match(migration,/CHECK \(subject IN \('taal','rekenen','world','creatief'\)\)/);
+  assert.match(live,/LEVEL_SUBJECTS = new Set\(\[[^\]]*'creatief'/);
+});

test/learning-progressions.test.js

@@ -17,7 +17,7 @@ async function progressionContext(){
   return context;
 }
 
-test('taal en rekenen hebben een compleet inhoudelijk profiel voor groep 1 tot en met 8',async()=>{
+test('taal, rekenen en creatief hebben een compleet inhoudelijk profiel voor groep 1 tot en met 8',async()=>{
   const {__profiles:profiles}=await progressionContext();
   for(const subject of ['taal','rekenen']){
     assert.equal(profiles[subject].length,9);

test/parent-portal.test.js

@@ -89,15 +89,15 @@ test('ouder leest en wijzigt het leerniveau van een gekoppeld thuiskind', async
   const respond = (sql) => {
     if (sql.includes('FROM parent_children WHERE parent_id')) return { rows: [{ 1: 1 }] };
     if (sql.startsWith('SELECT * FROM users WHERE id')) return { rows: [homeChild] };
-    if (sql.includes("subject IN ('taal','rekenen')")) return { rows: [
+    if (sql.includes("subject IN ('taal','rekenen','creatief')")) return { rows: [
-      { subject:'taal',year_group:3,level:2 },{ subject:'rekenen',year_group:4,level:1 },
+      { subject:'taal',year_group:3,level:2 },{ subject:'rekenen',year_group:4,level:1 },{ subject:'creatief',year_group:5,level:3 },
     ] };
     return undefined;
   };
   const {app,calls}=await makeApp({user:parent,respond});
   const get=await app.inject({method:'GET',url:'/api/parent/children/30/levels',cookies});
   assert.equal(get.statusCode,200,get.body);
-  assert.deepEqual(get.json().levels,{taal:{yearGroup:3,level:2},rekenen:{yearGroup:4,level:1}});
+  assert.deepEqual(get.json().levels,{taal:{yearGroup:3,level:2},rekenen:{yearGroup:4,level:1},creatief:{yearGroup:5,level:3}});
   const put=await app.inject({method:'PUT',url:'/api/parent/children/30/level',cookies,
     payload:{subject:'rekenen',yearGroup:5,level:3}});
   assert.equal(put.statusCode,200,put.body);

test/pupil-levels.test.js

@@ -49,12 +49,12 @@ test('klassenmanagement: klas-standaard opslaan doet de juiste upsert-query', as
   const { app, calls } = await makeApp(admin);
   const res = await app.inject({
     method: 'PUT', url: '/api/levels/class/100', cookies,
-    payload: { subject: 'rekenen', yearGroup: 4, level: 2 },
+    payload: { subject: 'creatief', yearGroup: 4, level: 2 },
   });
   assert.equal(res.statusCode, 200, res.body);
   const ins = calls.find(c => c.sql.startsWith('INSERT INTO pupil_levels'));
   assert.ok(ins);
-  assert.deepEqual(ins.params, [100, 'rekenen', 4, 2]);
+  assert.deepEqual(ins.params, [100, 'creatief', 4, 2]);
 });
 
 test('klassenmanagement: ongeldig vakgebied geeft 400', async () => {
@@ -123,17 +123,17 @@ test('klassenmanagement: leerkracht-rol wordt geweigerd op /my/level (alleen lee
   assert.equal(res.statusCode, 403, res.body);
 });
 
-test('thuiskind kan eigen taalniveau opslaan, schoolleerling niet', async () => {
+test('thuiskind kan eigen creatief niveau opslaan, schoolleerling niet', async () => {
   const { app, calls } = await makeApp(homePupil);
   const res = await app.inject({ method: 'PUT', url: '/api/my/level', cookies,
-    payload: { subject: 'taal', yearGroup: 5, level: 2 } });
+    payload: { subject: 'creatief', yearGroup: 5, level: 2 } });
   assert.equal(res.statusCode, 200, res.body);
   const insert = calls.find(call=>call.sql.startsWith('INSERT INTO pupil_levels'));
-  assert.deepEqual(insert.params,[10,'taal',5,2]);
+  assert.deepEqual(insert.params,[10,'creatief',5,2]);
 
   const { app: schoolApp } = await makeApp(pupil);
   const denied = await schoolApp.inject({ method: 'PUT', url: '/api/my/level', cookies,
-    payload: { subject: 'taal', yearGroup: 5, level: 2 } });
+    payload: { subject: 'creatief', yearGroup: 5, level: 2 } });
   assert.equal(denied.statusCode,403,denied.body);
   await app.close();await schoolApp.close();
 });

test/widgets.test.js

@@ -324,11 +324,13 @@ test('letter- en cijferdoelvakken blijven gecentreerd en lange woorden blijven b
 });
 
 test('alle geregistreerde widgets hebben mobiele dekking en passen op een 320px-bord',async()=>{
- const [board,pupil,css]=await Promise.all([
+ const [board,pupil,css,coloringCss]=await Promise.all([
   readFile('public/js/board.js','utf8'),
   readFile('public/js/pupil.js','utf8'),
   readFile('public/css/teach.css','utf8'),
+  readFile('public/css/coloring.css','utf8'),
  ]);
+ const styles=css+coloringCss;
  const registrySource=board.slice(board.indexOf('const REGISTRY'),board.indexOf('const WIDGET_CATS'));
  const registered=[...registrySource.matchAll(/id:"([^"]+)"/g)].map(match=>match[1]).sort();
  const coverage={
@@ -353,6 +355,7 @@ test('alle geregistreerde widgets hebben mobiele dekking en passen op een 320px-
   placevalue:'.place-grid',
   money:'.money-task-card',
   wordtypes:'.wordtypes',
+  coloring:'.coloring-paper',
   write:'.wp-bar',
   mind:'.mm-top',
   notes:'.notes{',
@@ -373,7 +376,7 @@ test('alle geregistreerde widgets hebben mobiele dekking en passen op een 320px-
  };
  assert.deepEqual(registered,Object.keys(coverage).sort(),'ieder geregistreerd widgettype staat in de mobiele audit');
  for(const [id,selector] of Object.entries(coverage)){
-  assert.ok(css.includes(selector),id+' mist responsive/breedte-onafhankelijke opmaak');
+  assert.ok(styles.includes(selector),id+' mist responsive/breedte-onafhankelijke opmaak');
  }
 
  assert.match(css,/\.widget-body\{[^}]*container-type:inline-size[^}]*container-name:widget/);