BloomBooks · hatton · Jan 26, 2026 · Feb 11, 2026 · Feb 12, 2026 · Feb 12, 2026
diff --git a/.claude/CLAUDE.md b/.claude/CLAUDE.md
@@ -0,0 +1,6 @@
+# Project Memory
+
+Instructions here apply to this project and are shared with team members.
+
+## Context
+
diff --git a/.github/prompts/bloom-uitest.prompt.md → ...ub/prompts/bloom-component-test.prompt.md b/.github/prompts/bloom-uitest.prompt.md → ...ub/prompts/bloom-component-test.prompt.md
@@ -1,5 +1,4 @@
 ---
-mode: agent
 description: setup ui tests
 ---
 We have a test system explained at src/BloomBrowserUI/react_components/component-tester/README.md.
@@ -21,6 +20,6 @@ Sometimes the top level component is not readily testable. In that case it might
 ## Guidelines for writing the tests
 * If you want to make a mock, stop and ask me.
 * Avoid using timed waits like page.waitForTimeout(1000). If there is no other way, you must discuss it with me first and then if I approve, document why it is necessary in a comment.
-* Feel free to add test-id attributes to elements in the component under test to make them easier to find. Avoid using css to finding things.
+* Feel free to add data-test-id attributes to elements in the component under test to make them easier to find. Avoid using css to finding things.
 * Keep the tests well factored with common code going to a test-helpers.ts file.
 
diff --git a/.github/prompts/bloom-l10.prompt.md b/.github/prompts/bloom-l10.prompt.md
@@ -1,5 +1,4 @@
 ---
-mode: agent
 description: make a string localizable
 ---
 

diff --git a/.github/prompts/bloom-process-pr-comments.prompt.md b/.github/prompts/bloom-process-pr-comments.prompt.md
@@ -0,0 +1,7 @@
+---
+description: read and process comments in a pr
+---
+
+Use the gh tool to determine the PR associated with the current branch. If you cannot find one, use the askQuestions tool to ask the user for a url.
+Read the unresolved pr comments and either answer them or handle the problem they call out and then answer them.
+When you answer, prefix your response with the name of your model, e.g. [hall9000].
diff --git a/.github/skills/bloom-canvas-e2e-testing/SKILL.md b/.github/skills/bloom-canvas-e2e-testing/SKILL.md
@@ -0,0 +1,99 @@
+---
+name: bloom-canvas-e2e-testing
+description: build and run automated Playwright end-to-end tests for Canvas Tool behavior on CURRENTPAGE.
+---
+
+## Scope
+Use this skill when the user wants automated Playwright tests (not manual devtools reproduction) for Canvas Tool behavior.
+
+This skill is for:
+- creating and maintaining `bookEdit/canvas-e2e-tests` tests
+- verifying drag/drop and canvas interactions with real mouse gestures
+- running focused Canvas E2E checks against Bloom Edit Tab
+
+This skill is not for:
+- manual-only reproduction (use the manual canvas tool testing skill)
+- component-harness tests under `react_components/*/*.uitest.ts`
+
+## Required context
+- Bloom is running and serving Edit Tab at `http://localhost:8089/bloom/CURRENTPAGE`
+- Current page includes `.bloom-canvas`
+- Canvas tool is available in toolbox
+- Playwright runtime dependencies are installed in:
+  - `src/BloomBrowserUI`
+
+## Primary URL
+- `http://localhost:8089/bloom/CURRENTPAGE`
+
+## Runtime and command model
+Use the `src/BloomBrowserUI` package and run the canvas suite via the root e2e script.
+
+1) Install once (or when deps change):
+- `cd src/BloomBrowserUI`
+- `yarn install`
+
+2) Run one canvas test:
+- `cd src/BloomBrowserUI`
+- `yarn e2e canvas specs/01-toolbox-drag-to-canvas.spec.ts`
+
+3) Run the full canvas suite:
+- `cd src/BloomBrowserUI`
+- `yarn e2e canvas`
+
+## Frame model (critical)
+Bloom Edit Tab has multiple iframes. Use frame names first:
+
+- Toolbox frame:
+  - name: `toolbox`
+  - URL usually includes `toolboxContent`
+- Editable page frame:
+  - name: `page`
+  - URL usually includes `page-memsim-...htm`
+- Do not treat top `CURRENTPAGE` frame as editable page content.
+
+## Reliable selectors and activation
+- Canvas tool tab header: `h3[data-toolid="canvasTool"]`
+- Canvas tool root: `#canvasToolControls`
+- Canvas surface: `.bloom-canvas`
+- Created elements: `.bloom-canvas-element`
+- Speech/comic palette item: `img[src*="comic-icon.svg"]`
+
+Before clicking the canvas tool header, first check whether `#canvasToolControls` is already visible.
+
+## Drag/drop requirements
+- Use real Playwright mouse gestures (`page.mouse.down/move/up`), not synthetic dispatched drag events.
+- Prefer distinct drop points.
+- Verify outcomes semantically:
+  - element count increase (`.bloom-canvas-element`)
+  - position/rect checks where relevant
+
+## Critical safety rule (Image Toolbox)
+- Do **not** run any action that opens the native Image Toolbox window.
+- In Canvas context menus/toolbars, never invoke commands that route to `doImageCommand(..., "change")`.
+- In practice, do not click:
+  - `Choose image from your computer...`
+  - `Change image`
+- Do **not** invoke native video capture/file-picker commands either.
+- In practice, do not click:
+  - `Choose Video from your Computer...`
+  - `Record yourself...`
+- If coverage needs those commands, verify command presence/enabled state only (do not invoke).
+
+## Minimal proof recipe
+A valid non-trivial proof test should:
+1. Open `CURRENTPAGE`
+2. Resolve toolbox + page frames
+3. Ensure Canvas tool active
+4. Drag a palette item onto `.bloom-canvas`
+5. Assert `.bloom-canvas-element` count increased
+
+## Troubleshooting
+- If test says "No tests found": verify path filter is relative to the config `testDir`.
+- If command says `playwright: not found`: run `yarn install` in `src/BloomBrowserUI`.
+- If canvas waits time out: confirm you selected the `page` frame, not top frame.
+- If canvas tab click times out: check whether Canvas controls are already visible and skip click in that case.
+
+
+## Pointers
+- Avoid time-based waiting; use DOM-based checks when possible. Feel free to add data-test-ids attributes or other hooks in the app code if needed for reliable testing.
+
diff --git a/.github/skills/bloom-canvas-tool-testing/SKILL.md b/.github/skills/bloom-canvas-tool-testing/SKILL.md
@@ -0,0 +1,39 @@
+---
+name: bloom-canvas-tool-manual-testing
+description: explore, reproduce, and verify Canvas Element behaviors manually via chrome-devtools-mcp, not in a playwright test.
+---
+
+## Scope
+Use this skill when the user reports a regression involving Canvas Tool interactions (especially drag/drop from the toolbox onto the page) and asks you to reproduce and verify fixes using a browser.
+
+This skill assumes:
+- Bloom is running locally and serving the Edit Tab
+- The current page has an element with class `.bloom-canvas`
+- The current page has the Canvas Tool tab available in the toolbox
+- The user has started the vite dev server for the frontend code
+
+## Primary test URL
+  - `http://localhost:8089/bloom/CURRENTPAGE`
+
+## Reproduction approach (required)
+When testing or verifying a UI regression:
+- Do not rely only on synthetic JS event dispatch.
+- Use browser automation/tools to perform an actual drag/drop gesture.
+
+## Finding things
+1. If your task involves the toolbox, identify that the toolbox iframe (often `.../toolboxContent`) and confirm the Canvas Tool tab is selected.
+2. The page we are editing is in an iframe (a `page-memsim-...htm`)
+3. On the page, you can locate the canvas we are editing as an element with the `.bloom-canvas` class.
+
+
+## If you are performing drag/drop
+1. Perform a drag from the toolbox item onto a distinct point on the page (test with multiple drop points).
+2. Verify outcome by measuring:
+   - The intended drop point (clientX/clientY over the page frame)
+   - The created element’s bounding rect and/or `style.left/top`
+   - The delta between drop point and element location
+   - Test with multiple zoom levels and page scaling to confirm consistent behavior
+
+## Notes
+- Bloom’s edit UI uses multiple iframes; coordinate systems (screen/client/page) often differ between frames.
+- Page scaling (`transform: scale(...)`) can affect `getBoundingClientRect()` values; prefer consistent coordinate spaces when comparing.
diff --git a/DistFiles/localization/am/Bloom.xlf b/DistFiles/localization/am/Bloom.xlf
@@ -2144,7 +2144,7 @@
         <target xml:lang="am" state="needs-translation">Cut image</target>
         <note>ID: EditTab.Image.CutImage</note>
       </trans-unit>
-      <trans-unit id="EditTab.Image.EditMetadata" sil:dynamic="true">
+      <trans-unit id="EditTab.Image.EditMetadata.MenuHelp" sil:dynamic="true">
         <source xml:lang="en">Edit image credits, copyright, &amp; license</source>
         <target xml:lang="am" state="needs-translation">Edit image credits, copyright, &amp; license</target>
         <note>ID: EditTab.Image.EditMetadata</note>

diff --git a/DistFiles/localization/ar/Bloom.xlf b/DistFiles/localization/ar/Bloom.xlf
@@ -2144,7 +2144,7 @@
         <target xml:lang="ar" state="final">قص الصورة</target>
         <note>ID: EditTab.Image.CutImage</note>
       </trans-unit>
-      <trans-unit id="EditTab.Image.EditMetadata" sil:dynamic="true" approved="yes">
+      <trans-unit id="EditTab.Image.EditMetadata.MenuHelp" sil:dynamic="true" approved="yes">
         <source xml:lang="en">Edit image credits, copyright, &amp; license</source>
         <target xml:lang="ar" state="final">تحرير المساهمين في العمل وحقوق الطبع والنشر والترخيص للصورة</target>
         <note>ID: EditTab.Image.EditMetadata</note>

diff --git a/DistFiles/localization/az/Bloom.xlf b/DistFiles/localization/az/Bloom.xlf
@@ -2144,7 +2144,7 @@
         <target xml:lang="az" state="final">Təsvir kəsmək</target>
         <note>ID: EditTab.Image.CutImage</note>
       </trans-unit>
-      <trans-unit id="EditTab.Image.EditMetadata" sil:dynamic="true" approved="yes">
+      <trans-unit id="EditTab.Image.EditMetadata.MenuHelp" sil:dynamic="true" approved="yes">
         <source xml:lang="en">Edit image credits, copyright, &amp; license</source>
         <target xml:lang="az" state="final">Təsvir Kreditlər, Müəllif Hüqquqları, &amp; Lisensiyanı Redakte Et</target>
         <note>ID: EditTab.Image.EditMetadata</note>

diff --git a/DistFiles/localization/bn/Bloom.xlf b/DistFiles/localization/bn/Bloom.xlf
@@ -2144,7 +2144,7 @@
         <target xml:lang="bn" state="final">ইমেজ কাট</target>
         <note>ID: EditTab.Image.CutImage</note>
       </trans-unit>
-      <trans-unit id="EditTab.Image.EditMetadata" sil:dynamic="true" approved="yes">
+      <trans-unit id="EditTab.Image.EditMetadata.MenuHelp" sil:dynamic="true" approved="yes">
         <source xml:lang="en">Edit image credits, copyright, &amp; license</source>
         <target xml:lang="bn" state="final">ইমেজের কৃতজ্ঞতা, কপিরাইট, ও লাইসেন্স সম্পাদন</target>
         <note>ID: EditTab.Image.EditMetadata</note>

diff --git a/DistFiles/localization/en/Bloom.xlf b/DistFiles/localization/en/Bloom.xlf
@@ -1893,7 +1893,7 @@
         <note>ID: EditTab.Image.CutImage</note>
         <note>Obsolete as of Bloom 6.3</note>
       </trans-unit>
-      <trans-unit id="EditTab.Image.EditMetadata" sil:dynamic="true">
+      <trans-unit id="EditTab.Image.EditMetadata.MenuHelp" sil:dynamic="true">
         <source xml:lang="en">Edit image credits, copyright, &amp; license</source>
         <note>ID: EditTab.Image.EditMetadata</note>
         <note xml:lang="en">OLD TEXT (before 3.9): Edit Image Credits, Copyright, and License</note>

diff --git a/DistFiles/localization/es/Bloom.xlf b/DistFiles/localization/es/Bloom.xlf
@@ -214,7 +214,7 @@
       </trans-unit>
       <trans-unit id="BookEditor.CharacterMap.Instructions" sil:dynamic="true" approved="yes">
         <source xml:lang="en">To select, use your mouse wheel or point at what you want, or press the key shown in purple. Finally, release the key that you pressed to show this list.</source>
-        <target xml:lang="es-ES" state="final">Para seleccionar, utilice la rueda del ratón, apunte a lo que quiere, o apriete la tecla mostrada en color púrpura. 
+        <target xml:lang="es-ES" state="final">Para seleccionar, utilice la rueda del ratón, apunte a lo que quiere, o apriete la tecla mostrada en color púrpura.
 Luego suelte la tecla que apretó para mostrar esta lista.</target>
         <note>ID: BookEditor.CharacterMap.Instructions</note>
       </trans-unit>
@@ -2146,7 +2146,7 @@ Por ejemplo, darle crédito al traductor de esta versión.</target>
         <target xml:lang="es-ES" state="final">Cortar la imagen</target>
         <note>ID: EditTab.Image.CutImage</note>
       </trans-unit>
-      <trans-unit id="EditTab.Image.EditMetadata" sil:dynamic="true" approved="yes">
+      <trans-unit id="EditTab.Image.EditMetadata.MenuHelp" sil:dynamic="true" approved="yes">
         <source xml:lang="en">Edit image credits, copyright, &amp; license</source>
         <target xml:lang="es-ES" state="final">Editar créditos de la imagen, derechos de autor y licencia</target>
         <note>ID: EditTab.Image.EditMetadata</note>

diff --git a/DistFiles/localization/fr/Bloom.xlf b/DistFiles/localization/fr/Bloom.xlf
@@ -2144,7 +2144,7 @@
         <target xml:lang="fr" state="final">Couper l'image</target>
         <note>ID: EditTab.Image.CutImage</note>
       </trans-unit>
-      <trans-unit id="EditTab.Image.EditMetadata" sil:dynamic="true" approved="yes">
+      <trans-unit id="EditTab.Image.EditMetadata.MenuHelp" sil:dynamic="true" approved="yes">
         <source xml:lang="en">Edit image credits, copyright, &amp; license</source>
         <target xml:lang="fr" state="final">Modifier les mentions pour les Images, les Droits d'auteur &amp; la Licence</target>
         <note>ID: EditTab.Image.EditMetadata</note>

diff --git a/DistFiles/localization/fuc/Bloom.xlf b/DistFiles/localization/fuc/Bloom.xlf
@@ -2144,7 +2144,7 @@
         <target xml:lang="fuc" state="needs-translation">Cut image</target>
         <note>ID: EditTab.Image.CutImage</note>
       </trans-unit>
-      <trans-unit id="EditTab.Image.EditMetadata" sil:dynamic="true">
+      <trans-unit id="EditTab.Image.EditMetadata.MenuHelp" sil:dynamic="true">
         <source xml:lang="en">Edit image credits, copyright, &amp; license</source>
         <target xml:lang="fuc" state="needs-translation">Edit image credits, copyright, &amp; license</target>
         <note>ID: EditTab.Image.EditMetadata</note>

diff --git a/DistFiles/localization/ha/Bloom.xlf b/DistFiles/localization/ha/Bloom.xlf
@@ -2144,7 +2144,7 @@
         <target xml:lang="ha" state="final">Yanke Sura</target>
         <note>ID: EditTab.Image.CutImage</note>
       </trans-unit>
-      <trans-unit id="EditTab.Image.EditMetadata" sil:dynamic="true" approved="yes">
+      <trans-unit id="EditTab.Image.EditMetadata.MenuHelp" sil:dynamic="true" approved="yes">
         <source xml:lang="en">Edit image credits, copyright, &amp; license</source>
         <target xml:lang="ha" state="final">Gyara Ta'allaƙar Sura, Haƙƙin Mallaka da kuma Izini</target>
         <note>ID: EditTab.Image.EditMetadata</note>

diff --git a/DistFiles/localization/hi/Bloom.xlf b/DistFiles/localization/hi/Bloom.xlf
@@ -214,7 +214,7 @@
       </trans-unit>
       <trans-unit id="BookEditor.CharacterMap.Instructions" sil:dynamic="true" approved="yes">
         <source xml:lang="en">To select, use your mouse wheel or point at what you want, or press the key shown in purple. Finally, release the key that you pressed to show this list.</source>
-        <target xml:lang="hi" state="final">चयन करने के लिए, अपने माउस व्हील का उपयोग करें या आप जिसे खोलना चाहते हैं उस पर रखें, या बैंगनी key दबाएँ। 
+        <target xml:lang="hi" state="final">चयन करने के लिए, अपने माउस व्हील का उपयोग करें या आप जिसे खोलना चाहते हैं उस पर रखें, या बैंगनी key दबाएँ।
 अंत में, सूची को देखने के लिए आपने जिस key को दबाए रखा है उसे छोड़ दें।</target>
         <note>ID: BookEditor.CharacterMap.Instructions</note>
       </trans-unit>
@@ -2145,7 +2145,7 @@
         <target xml:lang="hi" state="final">चित्र कट करें</target>
         <note>ID: EditTab.Image.CutImage</note>
       </trans-unit>
-      <trans-unit id="EditTab.Image.EditMetadata" sil:dynamic="true" approved="yes">
+      <trans-unit id="EditTab.Image.EditMetadata.MenuHelp" sil:dynamic="true" approved="yes">
         <source xml:lang="en">Edit image credits, copyright, &amp; license</source>
         <target xml:lang="hi" state="final">चित्र क्रेडिट, कॉपीराइट, &amp; लाइसेंस</target>
         <note>ID: EditTab.Image.EditMetadata</note>

diff --git a/DistFiles/localization/id/Bloom.xlf b/DistFiles/localization/id/Bloom.xlf
@@ -2144,7 +2144,7 @@
         <target xml:lang="id" state="final">Potong Gambar</target>
         <note>ID: EditTab.Image.CutImage</note>
       </trans-unit>
-      <trans-unit id="EditTab.Image.EditMetadata" sil:dynamic="true" approved="yes">
+      <trans-unit id="EditTab.Image.EditMetadata.MenuHelp" sil:dynamic="true" approved="yes">
         <source xml:lang="en">Edit image credits, copyright, &amp; license</source>
         <target xml:lang="id" state="final">Edit Gambar untuk Pengakuan, Hak Cipta, dan Lisensi</target>
         <note>ID: EditTab.Image.EditMetadata</note>

diff --git a/DistFiles/localization/km/Bloom.xlf b/DistFiles/localization/km/Bloom.xlf
@@ -2144,7 +2144,7 @@
         <target xml:lang="km" state="needs-translation">Cut image</target>
         <note>ID: EditTab.Image.CutImage</note>
       </trans-unit>
-      <trans-unit id="EditTab.Image.EditMetadata" sil:dynamic="true">
+      <trans-unit id="EditTab.Image.EditMetadata.MenuHelp" sil:dynamic="true">
         <source xml:lang="en">Edit image credits, copyright, &amp; license</source>
         <target xml:lang="km" state="needs-translation">Edit image credits, copyright, &amp; license</target>
         <note>ID: EditTab.Image.EditMetadata</note>

diff --git a/DistFiles/localization/ksw/Bloom.xlf b/DistFiles/localization/ksw/Bloom.xlf
@@ -2144,7 +2144,7 @@
         <target xml:lang="ksw" state="needs-translation">Cut image</target>
         <note>ID: EditTab.Image.CutImage</note>
       </trans-unit>
-      <trans-unit id="EditTab.Image.EditMetadata" sil:dynamic="true">
+      <trans-unit id="EditTab.Image.EditMetadata.MenuHelp" sil:dynamic="true">
         <source xml:lang="en">Edit image credits, copyright, &amp; license</source>
         <target xml:lang="ksw" state="needs-translation">Edit image credits, copyright, &amp; license</target>
         <note>ID: EditTab.Image.EditMetadata</note>

diff --git a/DistFiles/localization/kw/Bloom.xlf b/DistFiles/localization/kw/Bloom.xlf
@@ -2144,7 +2144,7 @@
         <target xml:lang="kw" state="translated">Treghi Skeusen</target>
         <note>ID: EditTab.Image.CutImage</note>
       </trans-unit>
-      <trans-unit id="EditTab.Image.EditMetadata" sil:dynamic="true">
+      <trans-unit id="EditTab.Image.EditMetadata.MenuHelp" sil:dynamic="true">
         <source xml:lang="en">Edit image credits, copyright, &amp; license</source>
         <target xml:lang="kw" state="needs-translation">Edit image credits, copyright, &amp; license</target>
         <note>ID: EditTab.Image.EditMetadata</note>

diff --git a/DistFiles/localization/ky/Bloom.xlf b/DistFiles/localization/ky/Bloom.xlf
@@ -2144,7 +2144,7 @@
         <target xml:lang="ky" state="needs-translation">Cut image</target>
         <note>ID: EditTab.Image.CutImage</note>
       </trans-unit>
-      <trans-unit id="EditTab.Image.EditMetadata" sil:dynamic="true">
+      <trans-unit id="EditTab.Image.EditMetadata.MenuHelp" sil:dynamic="true">
         <source xml:lang="en">Edit image credits, copyright, &amp; license</source>
         <target xml:lang="ky" state="needs-translation">Edit image credits, copyright, &amp; license</target>
         <note>ID: EditTab.Image.EditMetadata</note>

diff --git a/DistFiles/localization/lo/Bloom.xlf b/DistFiles/localization/lo/Bloom.xlf
@@ -2144,7 +2144,7 @@
         <target xml:lang="lo" state="needs-translation">Cut image</target>
         <note>ID: EditTab.Image.CutImage</note>
       </trans-unit>
-      <trans-unit id="EditTab.Image.EditMetadata" sil:dynamic="true" approved="yes">
+      <trans-unit id="EditTab.Image.EditMetadata.MenuHelp" sil:dynamic="true" approved="yes">
         <source xml:lang="en">Edit image credits, copyright, &amp; license</source>
         <target xml:lang="lo" state="final">ການປ່ອຍສິນເຊື່ອຮູບພາບດັດແກ້, ລິຂະສິດແລະອະນຸຍາດ.</target>
         <note>ID: EditTab.Image.EditMetadata</note>

diff --git a/DistFiles/localization/mam/Bloom.xlf b/DistFiles/localization/mam/Bloom.xlf
@@ -2144,7 +2144,7 @@
         <target xml:lang="mam" state="final">Iq'imil tilb'ilal</target>
         <note>ID: EditTab.Image.CutImage</note>
       </trans-unit>
-      <trans-unit id="EditTab.Image.EditMetadata" sil:dynamic="true" approved="yes">
+      <trans-unit id="EditTab.Image.EditMetadata.MenuHelp" sil:dynamic="true" approved="yes">
         <source xml:lang="en">Edit image credits, copyright, &amp; license</source>
         <target xml:lang="mam" state="final">Xtokb'il toklen tilb'ilal, toklen tajuwil ex tu'jil.</target>
         <note>ID: EditTab.Image.EditMetadata</note>

diff --git a/DistFiles/localization/my/Bloom.xlf b/DistFiles/localization/my/Bloom.xlf
@@ -2144,7 +2144,7 @@
         <target xml:lang="my" state="needs-translation">Cut image</target>
         <note>ID: EditTab.Image.CutImage</note>
       </trans-unit>
-      <trans-unit id="EditTab.Image.EditMetadata" sil:dynamic="true">
+      <trans-unit id="EditTab.Image.EditMetadata.MenuHelp" sil:dynamic="true">
         <source xml:lang="en">Edit image credits, copyright, &amp; license</source>
         <target xml:lang="my" state="needs-translation">Edit image credits, copyright, &amp; license</target>
         <note>ID: EditTab.Image.EditMetadata</note>