Implement template system and PWA enhancements

Phase 6 - Template System:
- Add TemplateLayer component for background/overlay rendering
- Add SlotPlaceholder component with visual indicators for empty slots
- Add useTemplate hook with auto-crop and drag constraint functions
- Update templates.js with slot definitions for team-sport template
- Integrate template system into DesignCanvas and App
- Add slot upload UI in TemplatesTab sidebar

Phase 9 - PWA Improvements:
- Add Workbox caching rules for HuggingFace LFS, templates, and API
- Change registerType to 'prompt' for update notifications
- Add service worker update handler in main.jsx
- Add refresh prompt UI in PWAInstall component

Phase 10 - Responsive and Accessibility:
- Add responsive CSS media queries for tablet/mobile layouts
- Add OfflineIndicator component with online/offline detection
- Add focus trap and keyboard navigation to PhotoPreEditor
- Add aria labels and screen reader support to modal

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

client/src/components/panels/PropertiesPanel.jsx

@@ -1,6 +1,6 @@
 import { memo } from 'react';
 
-export const PropertiesPanel = memo(function PropertiesPanel({ element, onUpdate, onDelete }) {
+export const PropertiesPanel = memo(function PropertiesPanel({ element, onUpdate, onDelete, onEditPhoto }) {
   if (!element) {
     return (
       <div className="properties-panel">
@@ -178,6 +178,37 @@ export const PropertiesPanel = memo(function PropertiesPanel({ element, onUpdate
           </div>
         )}
 
+        {/* Edit Photo button (for images only) */}
+        {element.type === 'image' && onEditPhoto && (
+          <div style={{ marginBottom: '1rem' }}>
+            <button
+              onClick={() => onEditPhoto(element)}
+              style={{
+                width: '100%',
+                padding: '0.75rem',
+                border: `1px solid var(--accent)`,
+                borderRadius: 'var(--radius-md)',
+                background: 'var(--accent-bg)',
+                color: 'var(--accent)',
+                fontSize: '13px',
+                fontWeight: '600',
+                cursor: 'pointer',
+                transition: 'all 0.15s ease',
+              }}
+              onMouseEnter={(e) => {
+                e.target.style.background = 'var(--accent)';
+                e.target.style.color = '#fff';
+              }}
+              onMouseLeave={(e) => {
+                e.target.style.background = 'var(--accent-bg)';
+                e.target.style.color = 'var(--accent)';
+              }}
+            >
+              ✏️ Edit Photo
+            </button>
+          </div>
+        )}
+
         {/* Font size (for text) */}
         {element.type === 'text' && (
           <>