✨ feat: initial app

apps/web/components/editor/editor-mobile-section.test.tsx

@@ -0,0 +1,52 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { EditorMobileSection } from "./editor-mobile-section";
+
+vi.mock("../canvas-renderer", () => ({
+  CanvasRenderer: () => <div data-testid="canvas-renderer" />,
+}));
+
+describe("EditorMobileSection", () => {
+  it("shows face detection helper message in face mode", () => {
+    render(
+      <EditorMobileSection
+        isDark={false}
+        canvasWidth={100}
+        canvasHeight={120}
+        layers={[]}
+        selectedLayerId={null}
+        tool="face"
+        faceDetections={[{ x: 1, y: 1, width: 10, height: 10, label: "f" }]}
+        faceOverlayLayerId={null}
+        faceStatus="idle"
+        faceBlurPreview={null}
+        labels={{
+          resize: "Resize",
+          faceMlFailedShort: "Face failed",
+          detectingFacesShort: "Detecting",
+          faceDetectionTip: (count) => `Faces ${count}`,
+          import: "Import",
+          mood: "Mood",
+          quick: "Quick",
+          face: "Face",
+          decor: "Decor",
+        }}
+        onOpenCanvasSize={() => undefined}
+        onImportImage={() => undefined}
+        onSelectLayer={() => undefined}
+        onMoveLayer={() => undefined}
+        onMoveLayerEnd={() => undefined}
+        onResizeLayer={() => undefined}
+        onResizeLayerEnd={() => undefined}
+        onRotateLayer={() => undefined}
+        onRotateLayerEnd={() => undefined}
+        onInteractionStart={() => undefined}
+        onInteractionEnd={() => undefined}
+      />,
+    );
+
+    expect(screen.getByText("Faces 1")).toBeInTheDocument();
+    expect(screen.getByText("Import")).toBeInTheDocument();
+  });
+});