release: 1.13.6

Author: BCsabaEngine

CHANGELOG.md

@@ -1,5 +1,40 @@
 # Change log
 
+## [1.13.6] - 2025-12-04
+
+### Added
+
+- **Toast notification system**
+  - Visual error notifications for failed undo operations
+  - Toast appears in bottom-right corner with red error styling
+  - Auto-dismisses after 5 seconds
+  - Detailed error logging to console for debugging
+  - Implemented using Flowbite Svelte Toast component with Iconify icons
+
+### Changed
+
+- **Comprehensive undo system improvements**
+  - Added undo support for property modifications:
+    - Circle property edits (radius, depth)
+    - Rectangle property edits (width, height, depth, rotation)
+    - Rectangle rotation via keyboard (R key)
+    - Rectangle dimension flip via keyboard (F key)
+  - Implemented stack size limit (50 operations) to prevent memory issues
+  - Added automatic undo stack clearing on project reset
+  - Only creates undo entries when values actually change (optimization)
+  - Each rotation/flip creates individual undo entry for granular control
+- **Improved error handling**
+  - Failed undo operations now show toast notification to user
+  - Detailed console logging with operation name, error details, and stack trace
+  - Failed operations re-added to stack for retry
+
+### Fixed
+
+- **Cross-project undo contamination**
+  - Undo stack now clears when resetting project (File > New)
+  - Prevents accidentally restoring elements from previous project
+  - No more "ghost undos" after project reset
+
 ## [1.13.5] - 2025-12-01
 
 ### Changed

CLAUDE.md

@@ -70,7 +70,7 @@ Build outputs to `docs/` directory (configured for GitHub Pages deployment).
 
 ```
 src/
-├── stores/           # Svelte stores (projectStore, modalStore, undoStore, libraryStore)
+├── stores/           # Svelte stores (projectStore, modalStore, undoStore, toastStore, libraryStore)
 ├── types/            # Zod schemas, TypeScript types, and type guards
 │   ├── typeGuards.ts # Type guard functions (isCircle, isRectangle, isLeg)
 │   └── panels/       # Panel-specific type definitions
@@ -392,6 +392,101 @@ Each element type (circle, rectangle, leg) has its own context menu generator:
 - Positioned to the right of element using `getClientRect()` to avoid overlap
 - Content generated by `getSelectedElementInfo()` in `fineMovement.ts`
 
+## State Management
+
+### Undo System (`src/stores/undoStore.ts`)
+
+**Architecture:**
+
+- Stack-based LIFO (Last In First Out) design
+- Maximum 50 operations retained (oldest removed when exceeded)
+- Non-persistent (cleared on page refresh)
+- Automatically cleared on project reset to prevent cross-project contamination
+
+**Undoable Operations:**
+
+- **Element deletions**: Circles, rectangles, legs (individual or bulk)
+- **Property modifications**:
+  - Circle: radius, depth
+  - Rectangle: width, height, depth, rotation
+- **Keyboard shortcuts**:
+  - Rectangle rotation (`R` key): each 5° rotation creates undo entry
+  - Rectangle dimension flip (`F` key): swapping width/height
+- **Optimization**: Only creates undo entry if values actually changed
+
+**Implementation Pattern:**
+
+1. Capture previous state in closure before operation
+2. Perform the operation (delete, modify, rotate, flip)
+3. Add undo action to stack with descriptive name
+4. Undo action closure restores captured state when executed
+
+**Error Handling:**
+
+- Failed undo operations show toast notification to user
+- Detailed console logging with operation name, error details, and stack trace
+- Failed operations re-added to stack to allow retry
+
+**Key Functions:**
+
+- `addUndo(name, action)`: Adds undo entry with stack size enforcement
+- `executeLastUndo()`: Pops and executes last undo with error handling
+- `clearUndoStack()`: Clears entire stack (called on project reset)
+- `undoStoreLastItem`: Derived store providing operation name for UI
+
+**UI Integration:**
+
+- Keyboard: `Ctrl+Z` / `Cmd+Z` (defined in `AppNavigation.svelte`)
+- Edit menu: Shows "Undo: {operation name}" when stack not empty
+- Disabled when modals are open (except ESC key)
+
+### Toast Notification System (`src/stores/toastStore.ts`)
+
+**Architecture:**
+
+- Array-based store of active toast messages
+- Auto-removal via setTimeout after configurable duration
+- Each toast has unique UUID for tracking and manual dismissal
+- Type-safe toast types: `success`, `error`, `warning`, `info`
+
+**Toast Types and Colors:**
+
+- `success`: Green with check-circle icon
+- `error`: Red with alert-circle icon (default 5s duration)
+- `warning`: Orange with alert icon
+- `info`: Blue with information icon
+
+**Key Functions:**
+
+- `toastStore.push(type, message, duration)`: Add new toast
+- `toastStore.error(message, duration)`: Convenience method for error toasts
+- `toastStore.remove(id)`: Manually remove toast by UUID
+
+**UI Integration:**
+
+- `ToastContainer.svelte` component subscribes to store
+- Fixed position: bottom-right corner with z-50
+- Vertical stacking with 2-unit gap spacing
+- Uses Flowbite Svelte `Toast` component with Iconify icons
+- Dismissable by user click on X button
+
+**Usage Example:**
+
+```typescript
+import { toastStore } from '$stores/toastStore';
+
+// Show error toast
+toastStore.error('Failed to undo: Delete circle', 5000);
+
+// Show custom toast
+toastStore.push('success', 'Operation completed', 3000);
+```
+
+**Current Usage:**
+
+- Undo error notifications in `undoStore.ts`
+- Can be extended for success confirmations, warnings, etc.
+
 ## Testing Workflow
 
 Manual testing only. Key test scenarios:

README.md

@@ -41,7 +41,12 @@ In its current state, it facilitates the installation of circular and oblong com
   - Progress bar shows percentage and visual indicator
   - UI remains responsive throughout the generation process
 - **Measurement Tool**: Press `M` to measure distances in 1/10th millimeter precision
-- **Undo/Redo**: Press `Ctrl+Z` to undo component deletions and modifications
+- **Comprehensive Undo System**: Press `Ctrl+Z` to undo operations (max 50 actions)
+  - Component deletions (circles, rectangles, legs)
+  - Property modifications (radius, depth, width, height, rotation)
+  - Rectangle rotation (`R` key) and dimension flip (`F` key)
+  - Visual error notifications for failed undo operations
+  - Automatic stack clearing on project reset
 - **Component Library**: Save and reuse your favorite component configurations
 - **Keyboard Shortcuts**: Extensive keyboard shortcuts for efficient workflow
 - **Hover Info**: Real-time element information and available shortcuts when hovering
@@ -77,7 +82,7 @@ In its current state, it facilitates the installation of circular and oblong com
 
 ### Other
 
-- `Ctrl+Z` / `Cmd+Z` - Undo last action
+- `Ctrl+Z` / `Cmd+Z` - Undo last operation (deletions, property edits, rotations, flips)
 - `Shift+P` - Project settings
 - `D` - Display 3D mesh
 - `ESC` - Close modal dialogs
@@ -129,8 +134,8 @@ Use a PLA printer to save time and money. Practice shows that it is enough to pr
 
 ### Requirements
 
-- Node.js >= 22.0.0
-- npm >= 10.0.0
+- Node.js >= 24.0.0
+- npm >= 11.0.0
 
 ### Local Development
 

docs/assets/index-BVSmpbfQ.js docs/assets/index-CgLiWFUN.jsdocs/assets/index-BVSmpbfQ.js renamed to docs/assets/index-CgLiWFUN.js

@@ -44,7 +44,7 @@
 			property="twitter:image"
 			content="https://segmentcontroller.github.io/pcb-tht-holder/pcb-board-32.png"
 		/>
-		<script type="module" crossorigin src="/pcb-tht-holder/assets/index-BVSmpbfQ.js"></script>
+		<script type="module" crossorigin src="/pcb-tht-holder/assets/index-CgLiWFUN.js"></script>
 		<link rel="stylesheet" crossorigin href="/pcb-tht-holder/assets/index-C3KH6t1Q.css">
 	</head>
 

docs/index.html

@@ -2,7 +2,7 @@ const GHPATH = 'https://segmentcontroller.github.io/pcb-tht-holder/';
 
 const APP_PREFIX = 'pwa_pcb-tht-holder_';
 
-const VERSION = 'v1.13.5';
+const VERSION = 'v1.13.6';
 
 // The files to make available for offline use. make sure to add others to this list
 const URLS = [