Phase 9: PWA & Workbox Caching (merged)

client/src/App.jsx

@@ -79,6 +79,7 @@ function App() {
   };
 
   const handleAddTemplate = (template) => {
+    // Apply template elements to canvas
     if (template && template.elements) {
       template.elements.forEach((el, index) => {
         setTimeout(() => addElement({ ...el }), index * 50);

client/src/index.css

@@ -164,6 +164,12 @@ input, textarea, select {
   max-width: 400px;
 }
 
+.canvas-actions {
+  display: flex;
+  gap: 0.75rem;
+  align-items: center;
+}
+
 .undo-redo-buttons {
   display: flex;
   gap: 0.5rem;
@@ -196,6 +202,64 @@ input, textarea, select {
   cursor: not-allowed;
 }
 
+.export-btn {
+  padding: 0.5rem 1rem;
+  background: linear-gradient(135deg, #22c55e, #16a34a);
+  color: white;
+  border: none;
+  border-radius: var(--radius-md);
+  font-size: 0.875rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.export-btn:hover:not(:disabled) {
+  transform: translateY(-1px);
+  box-shadow: var(--shadow-md);
+}
+
+.export-btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.export-error {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.75rem 1rem;
+  background: #fef2f2;
+  border: 1px solid #fecaca;
+  border-radius: var(--radius-md);
+  color: #dc2626;
+  font-size: 0.875rem;
+  margin-bottom: 1rem;
+  width: 100%;
+  max-width: 400px;
+}
+
+.export-error p {
+  margin: 0;
+}
+
+.close-error {
+  background: transparent;
+  border: none;
+  color: #dc2626;
+  cursor: pointer;
+  font-size: 1.25rem;
+  padding: 0;
+  line-height: 1;
+}
+
+.close-error:hover {
+  color: #991b1b;
+}
+
 .canvas-wrapper {
   margin-bottom: 1rem;
 }