Feature/2026 04 29 (#13)

* Refactor autotile dialog and pattern group card to enhance paint tile functionality and update selection instructions

* feat: enhance autotile functionality with blob patterns and UI improvements

- Added support for a new "blob-47" preset, allowing for 47-tile blob patterns.
- Updated AutotilePatternDiagram to include a center cell button for better interaction.
- Refactored AutotilePatternTileCard to utilize the new center cell feature.
- Improved AutotileTerrainSidebar and AutotileDialog to reflect changes in terminology and functionality.
- Introduced accordion UI for pattern tiles in AutotileDialog for better organization.
- Enhanced autotile preset rules to include blob pattern definitions and their respective groups.
- Updated tests to cover new blob pattern functionality and ensure correctness.
- Adjusted Content Security Policy in vite.config.ts to include Google Analytics.
- Added Google Analytics initialization script for tracking.

Co-authored-by: Copilot <copilot@github.com>

* docs: update README to enhance clarity on features and workflows

* refactor: update project saving mechanism and improve error handling

- Replaced `markEditorSaved` and `saveProject` with `saveProjectAndNotify` in AppShell, TilesetPanel, and keyboard shortcuts for better error handling and user feedback.
- Introduced `saveProjectAndNotify` function to handle project saving with notifications on success or failure.
- Updated event listeners to use `project-save-success` for improved event handling.
- Added new tests for project saving and terrain functionalities to ensure reliability.
- Enhanced utility functions for generating unique identifiers and managing class names.
- Added new tests for image layer editor context and tile editor context to ensure proper state management.

* feat: add toggle component and tileset animation types; update favicon and config files

Co-authored-by: Copilot <copilot@github.com>

* feat: add tileset animation support with configuration and utilities

- Implemented tileset animations in the map editor, including creation, normalization, and retrieval functions.
- Added types for animation placement, drag payloads, and animation frame resolution.
- Introduced utility functions for resolving animated tile references and handling animation conflicts.
- Created tests for animation export guards and conversion functions to ensure compatibility with Tiled formats.
- Enhanced map canvas rendering types to accommodate animation rendering.

Co-authored-by: Copilot <copilot@github.com>

* feat: implement animation placement resolution and integrate into map editor components

Co-authored-by: Copilot <copilot@github.com>

* Potential fix for pull request finding 'Useless conditional'

Co-authored-by: Copilot Autofix powered by AI <223894421+github-code-quality[bot]@users.noreply.github.com>

---------

Co-authored-by: Copilot <copilot@github.com>
Co-authored-by: Copilot Autofix powered by AI <223894421+github-code-quality[bot]@users.noreply.github.com>

Author: 3 people

TODO.txt

@@ -1,5 +1,6 @@
 More advanced autotile
 Custom Animations i.e. water moving
+More advanced autotile: Wang Tile (Look at https://github.com/ruccho/FangAutoTile)
 
 Support Tiled Project Import/Export
 Godot project Import/Export

index.html

@@ -8,8 +8,8 @@
     ></script>
     <script src="/gtag-init.js"></script>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/icon.svg" />
-    <link rel="apple-touch-icon" href="/icon.svg" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <link rel="apple-touch-icon" href="/favicon.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta name="theme-color" content="#000000" />
     <meta name="description" content="A 2D tile map editor" />

public/favicon.svg

@@ -14,7 +14,6 @@ import {
   loadProjectPrefs,
   loadLastProjectId,
 } from "@/services/db";
-import {} from "@/services/db";
 import {
   hydrateZoomStoreForProject,
   saveCurrentProjectPrefs,

public/icon.svg

@@ -35,6 +35,7 @@ function ApiKeyRow({ id, label, url, placeholder }: KeyRowProps) {
   const [saved, setSaved] = useState(false);
   const [hasSaved, setHasSaved] = useState(false);
   const savedTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const inputId = `api-key-${id}`;
 
   useEffect(() => {
     setHasSaved(hasApiKey(id));
@@ -60,7 +61,9 @@ function ApiKeyRow({ id, label, url, placeholder }: KeyRowProps) {
   return (
     <div className="space-y-2 rounded-lg border p-3">
       <div className="flex items-center justify-between">
-        <Label className="text-sm font-medium">{label}</Label>
+        <Label htmlFor={inputId} className="text-sm font-medium">
+          {label}
+        </Label>
         <a
           href={url}
           target="_blank"
@@ -79,6 +82,8 @@ function ApiKeyRow({ id, label, url, placeholder }: KeyRowProps) {
       <div className="flex gap-2">
         <div className="relative flex-1">
           <input
+            id={inputId}
+            name={inputId}
             type={visible ? "text" : "password"}
             placeholder={hasSaved ? "Enter new key to replace" : placeholder}
             value={value}
@@ -92,6 +97,9 @@ function ApiKeyRow({ id, label, url, placeholder }: KeyRowProps) {
             type="button"
             onClick={() => setVisible((v) => !v)}
             className="absolute right-2 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
+            aria-label={
+              visible ? `Hide ${label} API key` : `Show ${label} API key`
+            }
             tabIndex={-1}
           >
             {visible ? (
@@ -117,6 +125,7 @@ function ApiKeyRow({ id, label, url, placeholder }: KeyRowProps) {
             className="h-8 px-2 text-muted-foreground hover:text-destructive"
             onClick={handleDelete}
             title="Remove key"
+            aria-label={`Remove ${label} API key`}
           >
             <Trash2 className="h-3.5 w-3.5" />
           </Button>
@@ -180,9 +189,9 @@ export function SettingsDialog({ open, onOpenChange }: SettingsDialogProps) {
             <AccordionContent>
               <div className="space-y-3">
                 <p className="text-[11px] text-muted-foreground leading-relaxed">
-                  Keys are encrypted with AES-GCM and stored locally in your
-                  browser — they are never sent to any server other than the
-                  provider&apos;s own API.
+                  Keys are obfuscated locally in your browser. They are never
+                  sent to any server other than the provider&apos;s own API, but
+                  any script running on this origin can still access them.
                 </p>
                 {API_KEY_PROVIDERS.map((p) => (
                   <ApiKeyRow

src/App.tsx

@@ -0,0 +1,45 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { Toggle as TogglePrimitive } from "radix-ui";
+
+import { cn } from "@/utils/cn";
+
+const toggleVariants = cva(
+  "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-[color,box-shadow] outline-none hover:bg-muted hover:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        outline:
+          "border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground",
+      },
+      size: {
+        default: "h-9 min-w-9 px-2",
+        sm: "h-8 min-w-8 px-1.5",
+        lg: "h-10 min-w-10 px-2.5",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+function Toggle({
+  className,
+  variant,
+  size,
+  ...props
+}: React.ComponentProps<typeof TogglePrimitive.Root> &
+  VariantProps<typeof toggleVariants>) {
+  return (
+    <TogglePrimitive.Root
+      data-slot="toggle"
+      className={cn(toggleVariants({ variant, size, className }))}
+      {...props}
+    />
+  );
+}
+
+export { Toggle };

src/components/dialogs/SettingsDialog.tsx

@@ -404,8 +404,6 @@ export function Generator() {
       return;
     }
 
-    console.log("[AiAssets] Prompt:", finalPrompt);
-
     setIsGenerating(true);
     setImages(
       Array.from({ length: count }, () => ({ status: "loading" as const })),

src/components/ui/Toggle.tsx

@@ -2,14 +2,17 @@ import { useRef, useState } from "react";
 import { X, Upload } from "lucide-react";
 import { Button } from "@/components/ui/Button";
 import { Label } from "@/components/ui/Label";
+import type { ImageUploadProps } from "@/types/integrations/ai-assets";
 
 async function resizeImage(
   file: File,
   maxSize: number = 1280,
 ): Promise<string> {
   return new Promise((resolve, reject) => {
     const image = new Image();
+    const objectUrl = URL.createObjectURL(file);
     image.onload = () => {
+      URL.revokeObjectURL(objectUrl);
       let { width, height } = image;
       if (width > maxSize || height > maxSize) {
         if (width > height) {
@@ -28,8 +31,11 @@ async function resizeImage(
       context.drawImage(image, 0, 0, width, height);
       resolve(canvas.toDataURL(file.type));
     };
-    image.onerror = reject;
-    image.src = URL.createObjectURL(file);
+    image.onerror = () => {
+      URL.revokeObjectURL(objectUrl);
+      reject(new Error("Failed to load uploaded image."));
+    };
+    image.src = objectUrl;
   });
 }
 
@@ -39,13 +45,7 @@ export function ImageUpload({
   value,
   onChange,
   label,
-}: {
-  id: string;
-  name: string;
-  value: string | null;
-  onChange: (value: string | null) => void;
-  label: string;
-}) {
+}: ImageUploadProps) {
   const [isDragging, setIsDragging] = useState(false);
   const inputRef = useRef<HTMLInputElement>(null);
 
@@ -128,4 +128,4 @@ export function ImageUpload({
       </button>
     </div>
   );
-}
+}

src/features/ai-assets/components/Generator.tsx

@@ -22,12 +22,11 @@ import {
   EditorWorkspaceDrawer,
 } from "@/features/map-editor/components/Layout/EditorLayouts";
 import { useEditorStore } from "@/hooks/use-editor-store";
-import { saveProject } from "@/services/db";
 import { clearTileEditorContext } from "@/features/map-editor/lib/tile-editor-context";
 import type { AppShellProps } from "@/features/app-shell/types";
 import type { EditorWorkspaceTab } from "@/features/map-editor/types/editor-layout";
 import type { ImportExportDialogMode } from "@/features/import-export/types";
-import { markEditorSaved } from "@/store/editor-store";
+import { saveProjectAndNotify } from "@/features/project-management/lib/project-save";
 
 const SettingsDialog = lazy(() =>
   import("@/components/dialogs/SettingsDialog").then((module) => ({
@@ -305,8 +304,9 @@ export function AppShell({
     function handleSaveEnd() {
       toast.success("Project saved");
     }
-    window.addEventListener("project-save-end", handleSaveEnd);
-    return () => window.removeEventListener("project-save-end", handleSaveEnd);
+    window.addEventListener("project-save-success", handleSaveEnd);
+    return () =>
+      window.removeEventListener("project-save-success", handleSaveEnd);
   }, []);
 
   const handleMapQuickExport = useEffectEvent(() => {
@@ -337,8 +337,7 @@ export function AppShell({
         onSaveProject={() => {
           const project = state.project;
           if (project) {
-            markEditorSaved();
-            void saveProject({ ...project, updatedAt: Date.now() });
+            void saveProjectAndNotify(project);
           }
         }}
         onOpenImportDialog={handleOpenImportDialog}