fix(editor): apply layer effects + object flip, add Beta badge, repair e2e specs

While getting the editor e2e suite green, three "stale test" failures turned
out to be real bugs (per the reporter's hunch that tests might be catching
real issues):

- Layer effects (drop shadow, glows) never applied. The panel wrote effects
  into `attrs.effects` through updateObject, but the panel and renderer both
  read the object's top-level `effects`, so the toggle never persisted. Add a
  dedicated `setObjectEffects` store action and route the panel through it.
- Object flip (transform tool) did nothing. No object renderer applied
  `scaleX`/`scaleY`, and the flip negated scale without compensating position.
  Apply scale in the renderers and flip in place: mirror points for stroke
  objects, negate scale + shift position for sized objects.

(The paint-bucket / pixel-tool coordinate bug and the broken-at-non-100%-zoom
export were fixed in the preceding #259 change.)

Also adds a small "Beta" badge to the editor (welcome heading + nav link) and
repairs ~18 stale editor e2e specs whose selectors/assertions had drifted from
the current UI: the options bar is `h-9` not `h-10` (added a stable
`data-testid`), the menu bar is `h-8`/`bg-background`, the flip button
aria-labels are lowercase, the welcome "Image Editor" heading collides with an
sr-only `<h1>`, the color-picker tabs need a role-scoped selector, and the
magic-wand / flip tests now use deterministic setup and assert the actual
effect instead of fragile screenshot diffs.

tests/e2e-editor/editor-tools-drawing.spec.ts

@@ -28,7 +28,7 @@ test.describe("Editor Drawing Tools", () => {
     await selectTool(page, "brush");
 
     // Options bar should display Size, Opacity, and Hardness labels
-    const optionsBar = page.locator(".flex.items-center.h-10");
+    const optionsBar = page.locator('[data-testid="editor-options-bar"]');
     await expect(optionsBar.getByText("Size")).toBeVisible();
     await expect(optionsBar.getByText("Opacity")).toBeVisible();
     await expect(optionsBar.getByText("Hardness")).toBeVisible();
@@ -85,7 +85,7 @@ test.describe("Editor Drawing Tools", () => {
   test("eraser options bar shows size and opacity", async ({ editorPage: page }) => {
     await selectTool(page, "eraser");
 
-    const optionsBar = page.locator(".flex.items-center.h-10");
+    const optionsBar = page.locator('[data-testid="editor-options-bar"]');
     await expect(optionsBar.getByText("Size")).toBeVisible();
     await expect(optionsBar.getByText("Opacity")).toBeVisible();
   });
@@ -100,7 +100,7 @@ test.describe("Editor Drawing Tools", () => {
   test("pencil options bar hides hardness", async ({ editorPage: page }) => {
     await selectTool(page, "pencil");
 
-    const optionsBar = page.locator(".flex.items-center.h-10");
+    const optionsBar = page.locator('[data-testid="editor-options-bar"]');
     await expect(optionsBar.getByText("Size")).toBeVisible();
     await expect(optionsBar.getByText("Opacity")).toBeVisible();
     // Pencil is always hard, so hardness should not appear
@@ -110,13 +110,10 @@ test.describe("Editor Drawing Tools", () => {
   test("shape fill color applies", async ({ editorPage: page }) => {
     await selectTool(page, "shape-rect");
 
-    // The fill color input should be visible in options bar
-    const fillLabel = page.locator("label").filter({ hasText: "Fill" });
-    await expect(fillLabel).toBeVisible();
-
-    // A color input for fill should be present
-    const fillColorInput = fillLabel.locator("input[type='color']");
-    await expect(fillColorInput).toBeVisible();
+    // The fill colour is chosen via the "Fill" color picker button in the
+    // options bar (a ShapeColorPicker, labelled "<label> color picker").
+    const fillPicker = page.locator("button[aria-label='Fill color picker']");
+    await expect(fillPicker).toBeVisible();
   });
 
   test("shape stroke width control is visible", async ({ editorPage: page }) => {