feat: add clipart export/import and badge integration

- Add shareClipartData and importClipartData to FileHelper
- Add Import button and share icon in Saved Cliparts screen
- Add Saved Cliparts tab in Create Badge screen with apply/transfer
- Fix clipart LED preview layout and overflow issues
- Fix static clipart display
- Fix cache sync after save (await generateClipartCache)
- Add 2-column grid layout for clipart browsing
- Add localization keys for en/it/hi
- Fixed TabBar length mismatch and clipart data loss on clear.
- Fix save button rejecting clipart-only badges (text OR clipart now accepted)
- Fix transfer mode detection for clipart (`Mode.fixed` accepted alongside
  `Mode.picture` — backward compatible)
- Fix first-tap blank preview race condition (synchronous `renderGrid()` call
  ensures `_paintGrid` updates immediately)

Author: aditya27b

lib/bademagic_module/utils/file_helper.dart

@@ -364,7 +364,11 @@ class FileHelper {
       File file = File(filePath);
       if (await file.exists()) {
         // Use share_plus to share the file
-        final result = await Share.shareXFiles([XFile(filePath)]);
+        final result = await SharePlus.instance.share(
+          ShareParams(
+            files: [XFile(filePath)],
+          ),
+        );
         if (result.status == ShareResultStatus.success) {
           logger.i('File shared successfully');
         } else {
@@ -394,7 +398,92 @@ class FileHelper {
     }
   }
 
-  Future<bool> importBadgeData(context) async {
+  /// Shares a clipart file (JSON) via the platform share sheet.
+  Future<void> shareClipartData(String filename) async {
+    try {
+      final directory = await getApplicationDocumentsDirectory();
+      final filePath = '${directory.path}/$filename';
+
+      File file = File(filePath);
+      if (await file.exists()) {
+        final result = await SharePlus.instance.share(
+          ShareParams(
+            files: [XFile(filePath)],
+          ),
+        );
+        if (result.status == ShareResultStatus.success) {
+          logger.i('Clipart shared successfully');
+        } else {
+          logger.i('Error sharing clipart');
+        }
+      } else {
+        logger.i('Clipart file not found: $filePath');
+      }
+    } catch (e) {
+      logger.i('Error sharing clipart: $e');
+    }
+  }
+
+  /// Imports one or more clipart JSON files and adds them to Saved Cliparts.
+  /// Returns true if at least one file was imported.
+  Future<bool> importClipartData(BuildContext context) async {
+    try {
+      FilePickerResult? result = await FilePicker.platform.pickFiles(
+        type: FileType.custom,
+        allowedExtensions: ['json'],
+        allowMultiple: true,
+      );
+
+      if (result == null || result.files.isEmpty) {
+        ToastUtils().showToast('No file selected');
+        return false;
+      }
+
+      int imported = 0;
+      for (final platformFile in result.files) {
+        final path = platformFile.path;
+        if (path == null) continue;
+
+        File file = File(path);
+        if (!await file.exists()) continue;
+
+        final content = await file.readAsString();
+        final decoded = jsonDecode(content);
+
+        // Clipart format: JSON array of arrays of int (List<List<int>>)
+        if (decoded is! List) continue;
+        try {
+          final list = decoded.map((row) {
+            if (row is List) {
+              return row.map<int>((e) => (e is int) ? e : 0).toList();
+            }
+            return <int>[];
+          }).toList();
+          if (list.isEmpty) continue;
+        } catch (_) {
+          continue;
+        }
+
+        final filename = _generateUniqueFilename();
+        await _writeToFile(filename, content);
+        imported++;
+      }
+
+      if (imported > 0) {
+        await generateClipartCache();
+      }
+      return imported > 0;
+    } catch (e) {
+      if (context.mounted) {
+        ScaffoldMessenger.of(context).showSnackBar(
+          SnackBar(content: Text('Error importing clipart: $e')),
+        );
+      }
+      return false;
+    }
+  }
+
+  Future<bool> importBadgeData(BuildContext context) async {
     try {
       // Open file picker to select a JSON file
       FilePickerResult? result = await FilePicker.platform.pickFiles(

lib/l10n/app_en.arb

@@ -211,5 +211,7 @@
   "badgeNameHint": "Badge name",
   "triangle": "Triangle",
   "clipartSavedSuccessfully": "Clipart saved successfully",
+  "clipartImportedSuccessfully": "Clipart imported successfully",
+  "switchedOrientationForDraw": "Switched orientation for ease of draw",
   "badgeScanMode": "Badge Scan Mode"
 }

lib/l10n/app_hi.arb

@@ -192,6 +192,8 @@
   "circle": "गोला",
   "triangle": "तिकोना",
   "clipartSavedSuccessfully": "तस्वीर सेव हो गई",
+  "clipartImportedSuccessfully": "तस्वीर अपलोड हो गई",
+  "switchedOrientationForDraw": "ड्रॉ करने में आसानी के लिए ओरिएंटेशन बदला गया",
   "badgeScanMode": "बैज स्कैन मोड",
   "connectToBadgesWithNames": "निम्नलिखित नामों वाले बैज से कनेक्ट करें",
   "selectAll": "सभी चुनें",

lib/l10n/app_it.arb

@@ -211,5 +211,7 @@
   "badgeNameHint": "Nome badge",
   "triangle": "Triangolo",
   "clipartSavedSuccessfully": "Clipart salvato con successo",
+  "clipartImportedSuccessfully": "Clipart importato con successo",
+  "switchedOrientationForDraw": "Orientamento cambiato per disegnare più comodamente",
   "badgeScanMode": "Modalità Scansione Badge"
 }

lib/providers/animation_badge_provider.dart

@@ -126,16 +126,33 @@ class AnimationBadgeProvider extends ChangeNotifier {
   List<List<bool>> _newGrid =
       List.generate(11, (i) => List.generate(44, (j) => false));
 
+  /// When set, transfer uses this hex instead of text (for saved clipart overwrite).
+  List<String>? _clipartHex;
+
   //getter for newGrid
   List<List<bool>> getNewGrid() => _newGrid;
 
+  /// Returns stored clipart hex for transfer when in Picture mode; null otherwise.
+  List<String>? getClipartHex() => _clipartHex;
+
   //setter for newGrid
   void setNewGrid(List<List<bool>> grid) {
     _newGrid = grid;
     _animationIndex = 0;
     notifyListeners();
   }
 
+  /// Applies a saved clipart to the badge (complete overwrite, like animations).
+  void setClipartAsBadge(List<List<int>> grid) {
+    final boolGrid =
+        grid.map((row) => row.map((e) => e == 1).toList()).toList();
+    _clipartHex = Converters.convertBitmapToLEDHex(grid, false);
+    setNewGrid(boolGrid);
+    setAnimationMode(FixedAnimation());
+    // Render immediately so _paintGrid is updated for display (first tap fix)
+    renderGrid(boolGrid);
+  }
+
   Set<BadgeEffect?> get getCurrentEffect => _currentEffect;
 
   /// Clears all currently active effects
@@ -198,12 +215,12 @@ class AnimationBadgeProvider extends ChangeNotifier {
   }
 
   void setAnimationMode(BadgeAnimation? animation) {
-    // Always reset the animation index and set the new animation
     _animationIndex = 0;
     _currentAnimation = animation ?? LeftAnimation();
-    // Stop the timer if running
+    if (_currentAnimation is! PictureAnimation) {
+      _clipartHex = null;
+    }
     _timer?.cancel();
-    // Start the timer for the new animation
     startTimer();
     notifyListeners();
     logger.i("Animation Mode set to: $_currentAnimation and timer restarted");
@@ -227,15 +244,25 @@ class AnimationBadgeProvider extends ChangeNotifier {
   void badgeAnimation(
       String message, Converters converters, bool isInverted) async {
     bool isSpecial = isSpecialAnimationSelected();
-    if (message.isEmpty && !isSpecial) {
+    // If message is empty and no clipart is active, clear everything
+    if (message.isEmpty && !isSpecial && _clipartHex == null) {
       stopAllAnimations();
       List<List<bool>> emptyGrid =
           List.generate(11, (i) => List.generate(44, (j) => false));
       _newGrid = emptyGrid;
       _paintGrid = emptyGrid;
+      _clipartHex = null;
       notifyListeners();
       return;
     }
+    // If clipart is active, don't overwrite it with empty message
+    if (_clipartHex != null) {
+      return;
+    }
+    // Only clear clipart if typing new text (non-empty message)
+    if (message.isNotEmpty) {
+      _clipartHex = null;
+    }
     if (_timer == null || !_timer!.isActive) {
       startTimer();
     }

lib/providers/badge_message_provider.dart

@@ -10,6 +10,7 @@ import 'package:badgemagic/bademagic_module/models/messages.dart';
 import 'package:badgemagic/bademagic_module/models/mode.dart';
 import 'package:badgemagic/bademagic_module/models/speed.dart';
 import 'package:badgemagic/providers/BadgeScanProvider.dart';
+import 'package:badgemagic/providers/animation_badge_provider.dart';
 import 'package:badgemagic/providers/imageprovider.dart';
 import 'package:badgemagic/services/localization_service.dart';
 import 'package:flutter/material.dart';
@@ -70,20 +71,25 @@ class BadgeMessageProvider {
     return data;
   }
 
-  Future<Data> generateData(
-      String? text,
-      bool? flash,
-      bool? marq,
-      bool? inverted,
-      Speed? speed,
-      Mode? mode,
-      Map<String, dynamic>? jsonData) async {
+  Future<Data> generateData(String? text, bool? flash, bool? marq,
+      bool? inverted, Speed? speed, Mode? mode, Map<String, dynamic>? jsonData,
+      {List<String>? clipartHex}) async {
     if (jsonData != null) {
       return fileHelper.jsonToData(jsonData);
-    } else {
-      return getBadgeData(text ?? '', flash ?? false, marq ?? false,
-          speed ?? Speed.one, mode ?? Mode.left, inverted ?? false);
     }
+    if (clipartHex != null && clipartHex.isNotEmpty) {
+      return Data(messages: [
+        Message(
+          text: clipartHex,
+          flash: flash ?? false,
+          marquee: marq ?? false,
+          speed: speed ?? Speed.one,
+          mode: mode ?? Mode.picture,
+        )
+      ]);
+    }
+    return getBadgeData(text ?? '', flash ?? false, marq ?? false,
+        speed ?? Speed.one, mode ?? Mode.left, inverted ?? false);
   }
 
   Future<void> transferData(
@@ -129,11 +135,9 @@ class BadgeMessageProvider {
     }
 
     if (controllerData.getController().text.isEmpty && isSavedBadge == false) {
-      // Allow empty text if Pacman or Fireworks mode is selected
-      // Fireworks: Mode.fixed and animation index 19
+      // Allow empty text if Pacman, Fireworks, or Picture mode with saved clipart
       bool isFireworks = false;
       try {
-        // Try to get animation index from modeValueMap
         int fireworksIndex = 19;
         int cycleIndex = 20;
         if (mode == Mode.fixed &&
@@ -145,7 +149,12 @@ class BadgeMessageProvider {
             modeValueMap.containsKey(cycleIndex) &&
             modeValueMap[cycleIndex] == Mode.cycle) {}
       } catch (_) {}
-      if (mode != Mode.pacman && !isFireworks) {
+      final hasClipart = (mode == Mode.picture || mode == Mode.fixed) &&
+          Provider.of<AnimationBadgeProvider>(context, listen: false)
+                  .getClipartHex()
+                  ?.isNotEmpty ==
+              true;
+      if (mode != Mode.pacman && !isFireworks && !hasClipart) {
         final l10n = GetIt.instance.get<LocalizationService>().l10n;
         ToastUtils().showErrorToast(l10n.pleaseEnterMessage);
         return;
@@ -222,8 +231,16 @@ class BadgeMessageProvider {
         data = Data(messages: [newMessage, ...data.messages.skip(1)]);
       }
     } else {
+      List<String>? clipartHex;
+      if (text?.isEmpty == true &&
+          (mode == Mode.picture || mode == Mode.fixed)) {
+        final aniProvider =
+            Provider.of<AnimationBadgeProvider>(context, listen: false);
+        clipartHex = aniProvider.getClipartHex();
+      }
       data = await generateData(
-          text, flash, marq, isInverted, speedMap[speed], mode, jsonData);
+          text, flash, marq, isInverted, speedMap[speed], mode, jsonData,
+          clipartHex: clipartHex);
     }
 
     DataTransferManager manager = DataTransferManager(data);

lib/view/draw_badge_screen.dart

@@ -31,11 +31,25 @@ class DrawBadge extends StatefulWidget {
 class _DrawBadgeState extends State<DrawBadge> {
   var drawToggle = DrawBadgeProvider();
   bool _showShapeOptions = false;
+  bool _orientationMessageShown = false;
 
   @override
   void didChangeDependencies() {
     super.didChangeDependencies();
     _setLandscapeOrientation();
+    if (!_orientationMessageShown) {
+      _orientationMessageShown = true;
+      WidgetsBinding.instance.addPostFrameCallback((_) {
+        if (mounted) {
+          ToastUtils().showToast(
+            GetIt.instance
+                .get<LocalizationService>()
+                .l10n
+                .switchedOrientationForDraw,
+          );
+        }
+      });
+    }
   }
 
   @override
@@ -253,14 +267,17 @@ class _DrawBadgeState extends State<DrawBadge> {
           await fileHelper.saveImage(drawToggle.getDrawViewGrid());
         }
 
-        fileHelper.generateClipartCache();
+        await fileHelper.generateClipartCache();
         ToastUtils().showToast(GetIt.instance
             .get<LocalizationService>()
             .l10n
             .clipartSavedSuccessfully);
 
         if (mounted) {
-          Navigator.of(context).popUntil((route) => route.isFirst);
+          Navigator.of(context).pushNamedAndRemoveUntil(
+            '/savedClipart',
+            (route) => false,
+          );
         }
       },
       style: TextButton.styleFrom(