Select an element to edit properties

';\n return;\n }\n \n let html = '';\n \n // Common properties\n html += '

';\n html += 'Type:';\n html += `${selectedElement.type}`;\n html += '

';\n \n // Type-specific properties\n if (selectedElement.type === 'wall') {\n const p1 = selectedElement.points[0];\n const p2 = selectedElement.points[1];\n const length = Math.sqrt(Math.pow(p2.x - p1.x, 2) + Math.pow(p2.y - p1.y, 2));\n \n html += '

';\n html += 'Length:';\n html += `${Math.round(length)}px`;\n html += '

';\n \n } else if (selectedElement.type === 'door' || selectedElement.type === 'window') {\n html += '

';\n html += 'Width:';\n html += ``;\n html += '

';\n \n html += '

';\n html += 'Height:';\n html += ``;\n html += '

';\n \n } else if (selectedElement.type === 'furniture') {\n html += '

';\n html += 'Furniture:';\n html += `${selectedElement.properties.furnitureType}`;\n html += '

';\n \n html += '

';\n html += 'Width:';\n html += ``;\n html += '

';\n \n html += '

';\n html += 'Height:';\n html += ``;\n html += '

';\n \n html += '

';\n html += 'Rotation:';\n html += ``;\n html += '

';\n \n } else if (selectedElement.type === 'text') {\n html += '

';\n html += 'Text:';\n html += ``;\n html += '

';\n }\n \n // Delete button\n html += '';\n \n propertiesPanel.innerHTML = html;\n \n // Add event listeners to property inputs\n if (selectedElement.type === 'door' || selectedElement.type === 'window' || selectedElement.type === 'furniture') {\n document.getElementById('prop-width')?.addEventListener('change', e => {\n selectedElement.properties.width = parseInt(e.target.value);\n drawGrid();\n drawElements();\n });\n \n document.getElementById('prop-height')?.addEventListener('change', e => {\n selectedElement.properties.height = parseInt(e.target.value);\n drawGrid();\n drawElements();\n });\n }\n \n if (selectedElement.type === 'furniture') {\n document.getElementById('prop-rotation')?.addEventListener('change', e => {\n selectedElement.properties.rotation = parseInt(e.target.value);\n drawGrid();\n drawElements();\n });\n }\n \n if (selectedElement.type === 'text') {\n document.getElementById('prop-text')?.addEventListener('change', e => {\n selectedElement.properties.text = e.target.value;\n drawGrid();\n drawElements();\n });\n }\n \n // Delete element button\n document.getElementById('delete-element')?.addEventListener('click', () => {\n elements = elements.filter(el => el.id !== selectedElement.id);\n selectedElement = null;\n updatePropertiesPanel();\n drawGrid();\n drawElements();\n });\n}\n\n// Save the current plan\nasync function savePlan() {\n const name = planNameInput.value.trim() || 'Untitled Plan';\n \n if (elements.length === 0) {\n alert('Cannot save an empty plan. Add some elements first.');\n return;\n }\n \n // Show loading indicator\n showLoading();\n \n try {\n // Generate thumbnail\n const thumbnail = canvas.toDataURL('image/png');\n \n // Prepare data to save\n const planData = {\n name,\n elements,\n thumbnail\n };\n \n // Send to server\n const response = await fetch('/api/plans', {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json'\n },\n body: JSON.stringify(planData)\n });\n \n const result = await response.json();\n \n if (result.success) {\n alert('Plan saved successfully!');\n loadSavedPlans();\n } else {\n alert('Error saving plan: ' + result.error);\n }\n } catch (error) {\n console.error('Error saving plan:', error);\n alert('Error saving plan. Please try again.');\n } finally {\n hideLoading();\n }\n}\n\n// Load saved plans\nasync function loadSavedPlans() {\n const savedPlansList = document.getElementById('saved-plans-list');\n \n // Show loading indicator\n showLoading();\n \n try {\n const response = await fetch('/api/plans');\n const result = await response.json();\n \n if (result.success && result.plans.length > 0) {\n let html = '';\n \n result.plans.forEach(plan => {\n const planId = plan.key.replace('house_plan_', '');\n \n html += `

`;\n html += `

${planId}

`;\n html += `

`;\n html += ``;\n html += ``;\n html += `

`;\n html += `

`;\n });\n \n savedPlansList.innerHTML = html;\n \n // Add event listeners to buttons\n document.querySelectorAll('.load-plan-btn').forEach(btn => {\n btn.addEventListener('click', () => loadPlan(btn.dataset.id));\n });\n \n document.querySelectorAll('.delete-plan-btn').forEach(btn => {\n btn.addEventListener('click', () => deletePlan(btn.dataset.id));\n });\n } else {\n savedPlansList.innerHTML = '

No saved plans yet

';\n }\n } catch (error) {\n console.error('Error loading plans:', error);\n savedPlansList.innerHTML = '

Error loading plans. Please try again.

';\n } finally {\n hideLoading();\n }\n}\n\n// Load a specific plan\nasync function loadPlan(id) {\n if (!confirm('Loading a plan will replace your current design. Continue?')) {\n return;\n }\n \n // Show loading indicator\n showLoading();\n \n try {\n const response = await fetch(`/api/plans/${id}`);\n const result = await response.json();\n \n if (result.success) {\n // Load the plan data\n elements = result.plan.elements;\n planNameInput.value = result.plan.name;\n selectedElement = null;\n updatePropertiesPanel();\n drawGrid();\n drawElements();\n alert('Plan loaded successfully!');\n } else {\n alert('Error loading plan: ' + result.error);\n }\n } catch (error) {\n console.error('Error loading plan:', error);\n alert('Error loading plan. Please try again.');\n } finally {\n hideLoading();\n }\n}\n\n// Delete a specific plan\nasync function deletePlan(id) {\n if (!confirm('Are you sure you want to delete this plan? This cannot be undone.')) {\n return;\n }\n \n // Show loading indicator\n showLoading();\n \n try {\n const response = await fetch(`/api/plans/${id}`, {\n method: 'DELETE'\n });\n \n const result = await response.json();\n \n if (result.success) {\n alert('Plan deleted successfully!');\n loadSavedPlans();\n } else {\n alert('Error deleting plan: ' + result.error);\n }\n } catch (error) {\n console.error('Error deleting plan:', error);\n alert('Error deleting plan. Please try again.');\n } finally {\n hideLoading();\n }\n}\n\n// Export the current plan as an image\nfunction exportAsImage() {\n // Create a temporary canvas with white background\n const tempCanvas = document.createElement('canvas');\n tempCanvas.width = canvas.width;\n tempCanvas.height = canvas.height;\n const tempCtx = tempCanvas.getContext('2d');\n \n // Fill with white background\n tempCtx.fillStyle = '#ffffff';\n tempCtx.fillRect(0, 0, tempCanvas.width, tempCanvas.height);\n \n // Draw grid\n tempCtx.strokeStyle = '#eeeeee';\n tempCtx.lineWidth = 1;\n \n for (let x = 0; x < tempCanvas.width; x += gridSize) {\n tempCtx.beginPath();\n tempCtx.moveTo(x, 0);\n tempCtx.lineTo(x, tempCanvas.height);\n tempCtx.stroke();\n }\n \n for (let y = 0; y < tempCanvas.height; y += gridSize) {\n tempCtx.beginPath();\n tempCtx.moveTo(0, y);\n tempCtx.lineTo(tempCanvas.width, y);\n tempCtx.stroke();\n }\n \n // Copy the current canvas content\n tempCtx.drawImage(canvas, 0, 0);\n \n // Create download link\n const link = document.createElement('a');\n link.download = 'house-plan.png';\n link.href = tempCanvas.toDataURL('image/png');\n link.click();\n}\n\n// Show loading indicator\nfunction showLoading() {\n const loadingOverlay = document.createElement('div');\n loadingOverlay.className = 'loading-overlay';\n loadingOverlay.id = 'loading-overlay';\n \n const spinner = document.createElement('div');\n spinner.className = 'loading-spinner';\n \n loadingOverlay.appendChild(spinner);\n document.body.appendChild(loadingOverlay);\n}\n\n// Hide loading indicator\nfunction hideLoading() {\n const loadingOverlay = document.getElementById('loading-overlay');\n if (loadingOverlay) {\n loadingOverlay.remove();\n }\n}\n\n// Initialize the application when the page loads\nwindow.addEventListener('load', init);",[],[182,189],{"_103":198,"_95":199,"_152":200,"_154":183,"_155":137,"_156":201,"_158":159,"_105":202,"_100":203,"_161":204,"_163":205,"_164":22,"_165":-5,"_166":206,"_98":207},"13f7fed4-33bf-11f0-b853-9e149126039e","index.html","895eb444-33bd-11f0-8d59-9e149126039e",18,["D",1747555621518],3,"file","\n\n\n \n \n House Plan Designer\n \n \n \n \n \n \n\n\n

House Plan Designer

\n View Source\n

\n\n

\n \n

Tools

\n \n \n

\n \n

\n \n \n \n \n \n \n \n \n \n \n \n

\n\n

Properties

Select an element to edit properties

\n\n

Furniture Library

\n \n \n \n \n \n \n \n \n \n \n \n \n

\n\n

Room Templates

\n \n \n \n \n

\n \n

Roof Styles

\n \n \n \n \n \n \n

\n\n

\n \n \n \n

\n\n \n

\n Grid Size:\n \n

\n Scale:\n \n

\n Unit:\n \n

\n \n

Position: 0, 0

\n Elements: 0\n

\n\n \n

Saved Plans

No saved plans yet

\n\n \n\n \n\n",[],[182,199],{"_103":209,"_95":210,"_152":211,"_154":183,"_155":137,"_156":212,"_158":159,"_105":213,"_100":203,"_161":204,"_163":214,"_164":22,"_165":-5,"_166":215,"_98":216},"1b6b91b2-33bf-11f0-9708-9e149126039e","styles.css","959bf9ce-33bd-11f0-894c-9e149126039e",20,["D",1747555634023],"/* Custom styles for the House Plan Designer */\n\n.canvas-container {\n position: relative;\n background-color: #f8f8f8;\n background-image: \n linear-gradient(rgba(200, 200, 200, 0.5) 1px, transparent 1px),\n linear-gradient(90deg, rgba(200, 200, 200, 0.5) 1px, transparent 1px);\n background-size: 20px 20px;\n}\n\n.tool-btn.active {\n background-color: #4299e1;\n color: white;\n}\n\n.furniture-item.active {\n background-color: #4299e1;\n color: white;\n}\n\n.template-item.active {\n background-color: #4299e1;\n color: white;\n}\n\n.roof-style.active {\n background-color: #4299e1;\n color: white;\n}\n\n/* Properties panel styles */\n.property-row {\n display: flex;\n margin-bottom: 8px;\n align-items: center;\n}\n\n.property-label {\n width: 80px;\n font-size: 14px;\n}\n\n.property-input {\n flex: 1;\n padding: 4px;\n border: 1px solid #ccc;\n border-radius: 4px;\n}\n\n/* Saved plan card */\n.plan-card {\n border: 1px solid #e2e8f0;\n border-radius: 8px;\n padding: 12px;\n transition: all 0.2s;\n}\n\n.plan-card:hover {\n box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n transform: translateY(-2px);\n}\n\n.plan-thumbnail {\n width: 100%;\n height: 150px;\n background-color: #f8f8f8;\n border: 1px solid #e2e8f0;\n border-radius: 4px;\n margin-bottom: 8px;\n object-fit: contain;\n}\n\n/* Context menu */\n.context-menu {\n position: absolute;\n background: white;\n border: 1px solid #ccc;\n border-radius: 4px;\n box-shadow: 0 2px 5px rgba(0,0,0,0.2);\n padding: 8px 0;\n z-index: 1000;\n}\n\n.context-menu-item {\n padding: 8px 16px;\n cursor: pointer;\n}\n\n.context-menu-item:hover {\n background-color: #f0f0f0;\n}\n\n/* Loading indicator */\n.loading-overlay {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: rgba(255, 255, 255, 0.7);\n display: flex;\n justify-content: center;\n align-items: center;\n z-index: 9999;\n}\n\n.loading-spinner {\n border: 4px solid rgba(0, 0, 0, 0.1);\n border-radius: 50%;\n border-top: 4px solid #3498db;\n width: 40px;\n height: 40px;\n animation: spin 1s linear infinite;\n}\n\n@keyframes spin {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n}\n\n/* Measurement display */\n#measurement-display {\n background-color: rgba(255, 255, 255, 0.9);\n border: 1px solid #ccc;\n padding: 4px 8px;\n border-radius: 4px;\n font-size: 12px;\n pointer-events: none;\n z-index: 100;\n}\n\n/* Room styles */\n.room {\n fill-opacity: 0.2;\n stroke-width: 1;\n transition: fill-opacity 0.2s;\n}\n\n.room:hover {\n fill-opacity: 0.4;\n}\n\n.room-label {\n font-size: 14px;\n font-weight: bold;\n pointer-events: none;\n user-select: none;\n}\n\n/* Undo/Redo buttons */\n#undo-btn, #redo-btn {\n font-size: 16px;\n line-height: 1;\n}\n\n#undo-btn:disabled, #redo-btn:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n/* Cursor position display */\n#cursor-position {\n font-family: monospace;\n}\n\n/* Tooltip */\n.tooltip {\n position: absolute;\n background-color: rgba(0, 0, 0, 0.8);\n color: white;\n padding: 4px 8px;\n border-radius: 4px;\n font-size: 12px;\n pointer-events: none;\n z-index: 1000;\n white-space: nowrap;\n}\n\n/* New furniture items */\n.furniture-stove, .furniture-fridge, .furniture-plant, .furniture-desk {\n stroke: #666;\n fill: #ddd;\n}\n\n/* Room colors */\n.room-bedroom {\n fill: #c6dbef;\n stroke: #6baed6;\n}\n\n.room-living {\n fill: #c7e9c0;\n stroke: #74c476;\n}\n\n.room-bathroom {\n fill: #d9d9d9;\n stroke: #969696;\n}\n\n.room-kitchen {\n fill: #fdd0a2;\n stroke: #fd8d3c;\n}\n\n.room-custom {\n fill: #dadaeb;\n stroke: #9e9ac8;\n}\n\n/* Roof styles */\n.roof {\n stroke-width: 2;\n fill-opacity: 0.7;\n}\n\n.roof-gable {\n fill: #b3a369;\n stroke: #8c7853;\n}\n\n.roof-hip {\n fill: #a67c52;\n stroke: #8c6239;\n}\n\n.roof-flat {\n fill: #7c7c7c;\n stroke: #5a5a5a;\n}\n\n.roof-shed {\n fill: #b35a44;\n stroke: #8c4531;\n}\n\n.roof-gambrel {\n fill: #8c9bd9;\n stroke: #6a75a3;\n}\n\n.roof-mansard {\n fill: #5a8c7c;\n stroke: #3d6655;\n}\n\n/* Roof ridge line */\n.roof-ridge {\n stroke: #333;\n stroke-width: 2;\n stroke-dasharray: 5, 5;\n}",[],[182,210],[182],{"_103":219,"_95":220,"_152":221,"_154":-5,"_155":137,"_156":203,"_158":159,"_105":222,"_100":32,"_161":162,"_163":-5,"_164":22,"_165":-5,"_166":223,"_98":233},"78eccc04-33bd-11f0-8c3a-9e149126039e","shared","8fd29af9-ae19-4704-9ed0-2c919a1979cf",["D",1747554931905],[224],{"_103":225,"_95":226,"_152":227,"_154":221,"_155":137,"_156":228,"_158":159,"_105":229,"_100":157,"_161":193,"_163":230,"_164":22,"_165":-5,"_166":231,"_98":232},"059f2d08-33bf-11f0-8b7c-9e149126039e","types.ts","78ec96a8-33bd-11f0-8c3a-9e149126039e",16,["D",1747555597449],"// Types for house plan elements\n\nexport type ElementType = 'wall' | 'door' | 'window' | 'furniture' | 'text' | 'room' | 'roof';\nexport type MeasurementUnit = 'pixels' | 'feet' | 'meters';\nexport type RoofStyle = 'gable' | 'hip' | 'flat' | 'shed' | 'gambrel' | 'mansard';\n\nexport interface Point {\n x: number;\n y: number;\n}\n\nexport interface Element {\n id: string;\n type: ElementType;\n points: Point[];\n properties?: {\n width?: number;\n height?: number;\n rotation?: number;\n color?: string;\n text?: string;\n furnitureType?: string;\n area?: number;\n roomType?: string;\n wallThickness?: number;\n doorStyle?: string;\n windowStyle?: string;\n // Roof specific properties\n roofStyle?: RoofStyle;\n pitch?: number; // Roof pitch/slope in degrees\n overhang?: number; // Roof overhang in measurement units\n ridgeHeight?: number; // Height of roof ridge\n material?: string; // Roof material\n };\n}\n\nexport interface HousePlan {\n id: string;\n name: string;\n elements: Element[];\n scale: number;\n unit: MeasurementUnit;\n gridSize: number;\n createdAt: string;\n updatedAt: string;\n version?: number;\n history?: Element[][];\n historyIndex?: number;\n}\n\nexport interface SavedPlan {\n key: string;\n size: number;\n metadata?: any;\n}\n\nexport interface RoomTemplate {\n name: string;\n type: string;\n furniture: {\n type: string;\n x: number;\n y: number;\n width: number;\n height: number;\n rotation: number;\n }[];\n}",[],[220,226],[220],{"_103":235,"_95":236,"_152":237,"_154":-5,"_155":137,"_156":238,"_158":159,"_105":239,"_100":32,"_161":162,"_163":-5,"_164":22,"_165":-5,"_166":240,"_98":241},"e41cdd96-33bf-11f0-8feb-9e149126039e","untitled-folder-4294","e41cde4a-33bf-11f0-8feb-9e149126039e",25,["D",1747555970731],[],[236],{"_103":243,"_95":244,"_152":245,"_154":-5,"_155":137,"_156":246,"_158":159,"_105":247,"_100":32,"_161":204,"_163":248,"_164":22,"_165":-5,"_166":249,"_98":250},"668ad984-33bd-11f0-85cd-9e149126039e","README.md","668ada42-33bd-11f0-85cd-9e149126039e",1,["D",1747554901065],"# House Plan Designer\n\nA web-based application for creating and editing house building plans.\n\n## Features\n\n- Draw walls, doors, windows, and other house elements\n- Add furniture and fixtures\n- Save and load your designs\n- Export designs as images\n\n## Project Structure\n\n- `backend/index.ts` - Main HTTP entry point and API routes\n- `frontend/index.html` - Main HTML template\n- `frontend/app.js` - Frontend JavaScript for the drawing application\n- `frontend/styles.css` - Styling for the application\n- `shared/types.ts` - Shared types between frontend and backend\n\n## How to Use\n\n1. Draw walls by clicking and dragging on the canvas\n2. Use the toolbar to select different elements (doors, windows, furniture)\n3. Save your design using the save button\n4. Load previous designs from the saved designs list\n\n## Technologies Used\n\n- Canvas API for drawing\n- Tailwind CSS for styling\n- Val Town's blob storage for saving designs",[],[244],{"_103":252,"_95":253,"_152":254,"_154":-5,"_155":137,"_156":136,"_158":159,"_105":255,"_100":256,"_161":175,"_163":257,"_164":22,"_165":-5,"_166":258,"_98":259},"b402e658-33c1-11f0-9105-9e149126039e","new-file-1615.tsx","e8b69be4-33bf-11f0-bf70-9e149126039e",["D",1747556749023],8,"export default async function (req: Request): Promise {\n return Response.json({ ok: true })\n}",[],[253],"files",[149,168,180,187,197,208,218,224,234,242,251],"counts",{"_264":32,"_265":246,"_266":32,"_267":32},"pulls","branches","forks","envVars","contents",[],{"_103":169,"_95":170,"_152":171,"_154":153,"_155":137,"_156":172,"_158":159,"_105":271,"_100":174,"_161":175,"_163":176,"_164":22,"_165":-5,"_98":272},["D",1747555326985],[151,170],"upstreamProject","upstreamBranch","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.branch.$branch.history_.$",{"_93":94,"_95":96,"_97":43,"_98":99,"_101":281,"_204":286,"_289":290,"_316":317,"_325":-7,"_326":32,"_327":22},{"_103":104,"_95":96,"_105":282,"_107":-5,"_108":22,"_109":110,"_111":-5,"_112":-5,"_14":113,"_114":-5,"_115":22,"_116":-5,"_117":32,"_16":118,"_119":120,"_121":120,"_122":123,"_124":123,"_125":123,"_126":120,"_127":120,"_23":283,"_131":284,"_134":285,"_146":22},["D",1747554776207],{"_93":94,"_129":130},{"_93":94,"_133":130},{"_100":136,"_95":43,"_103":137,"_138":104,"_139":-5,"_140":-5,"_141":-5,"_142":-5,"_143":-5,"_144":96,"_145":94},{"_103":169,"_95":170,"_152":171,"_154":153,"_155":137,"_156":172,"_158":159,"_105":287,"_100":174,"_161":175,"_163":176,"_164":22,"_165":-5,"_98":288},["D",1747555326985],[151,170],"history",[291,293,298,303,308,313],{"_103":169,"_155":137,"_152":171,"_95":170,"_163":176,"_161":175,"_100":174,"_154":153,"_105":292,"_156":172,"_165":-5},["D",1747555326985],{"_103":294,"_155":137,"_152":171,"_95":170,"_163":295,"_161":175,"_100":184,"_154":153,"_105":296,"_156":297,"_165":-5},"606f8bd4-33be-11f0-9379-9e149126039e","import { Hono } from \"https://esm.sh/hono@3.11.7\";\nimport { blob } from \"https://esm.town/v/std/blob\";\nimport { readFile, serveFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\nimport { parseProject } from \"https://esm.town/v/std/utils@85-main/index.ts\";\n\n// Types\nimport { HousePlan } from \"../shared/types.ts\";\n\nconst app = new Hono();\n\n// Unwrap Hono errors to see original error details\napp.onError((err, c) => {\n throw err;\n});\n\n// Serve static files\napp.get(\"/frontend/*\", c => serveFile(c.req.path, import.meta.url));\napp.get(\"/shared/*\", c => serveFile(c.req.path, import.meta.url));\n\n// Main HTML page\napp.get(\"/\", async c => {\n let html = await readFile(\"/frontend/index.html\", import.meta.url);\n \n // Get project info for view source link\n const projectInfo = parseProject(import.meta.url);\n const viewSourceUrl = projectInfo.links.self.project;\n \n // Inject the view source URL\n html = html.replace(\"__VIEW_SOURCE_URL__\", viewSourceUrl);\n \n return c.html(html);\n});\n\n// API endpoints\n// List all saved plans\napp.get(\"/api/plans\", async c => {\n try {\n const plans = await blob.list(\"house_plan_\");\n return c.json({ success: true, plans });\n } catch (error) {\n console.error(\"Error listing plans:\", error);\n return c.json({ success: false, error: \"Failed to list plans\" }, 500);\n }\n});\n\n// Get a specific plan\napp.get(\"/api/plans/:id\", async c => {\n try {\n const id = c.req.param(\"id\");\n const plan = await blob.getJSON(`house_plan_${id}`) as HousePlan;\n if (!plan) {\n return c.json({ success: false, error: \"Plan not found\" }, 404);\n }\n return c.json({ success: true, plan });\n } catch (error) {\n console.error(\"Error getting plan:\", error);\n return c.json({ success: false, error: \"Failed to get plan\" }, 500);\n }\n});\n\n// Save a plan\napp.post(\"/api/plans\", async c => {\n try {\n const body = await c.req.json();\n const { name, elements, scale, unit, gridSize, thumbnail } = body;\n \n if (!name || !elements) {\n return c.json({ success: false, error: \"Missing required fields\" }, 400);\n }\n \n const id = Date.now().toString();\n const plan: HousePlan = {\n id,\n name,\n elements,\n scale: scale || 1,\n unit: unit || 'pixels',\n gridSize: gridSize || 20,\n createdAt: new Date().toISOString(),\n updatedAt: new Date().toISOString(),\n version: 1,\n history: [elements],\n historyIndex: 0\n };\n \n await blob.setJSON(`house_plan_${id}`, plan);\n \n // Store thumbnail separately to reduce main plan size\n if (thumbnail) {\n await blob.setJSON(`house_plan_thumbnail_${id}`, { thumbnail });\n }\n \n return c.json({ success: true, id, plan });\n } catch (error) {\n console.error(\"Error saving plan:\", error);\n return c.json({ success: false, error: \"Failed to save plan\" }, 500);\n }\n});\n\n// Update a plan\napp.put(\"/api/plans/:id\", async c => {\n try {\n const id = c.req.param(\"id\");\n const body = await c.req.json();\n const { name, elements, scale, unit, gridSize, thumbnail, version } = body;\n \n const existingPlan = await blob.getJSON(`house_plan_${id}`) as HousePlan;\n if (!existingPlan) {\n return c.json({ success: false, error: \"Plan not found\" }, 404);\n }\n \n // Check version to prevent conflicts\n if (version && existingPlan.version && version < existingPlan.version) {\n return c.json({ \n success: false, \n error: \"Plan has been updated by another session\", \n currentVersion: existingPlan.version \n }, 409);\n }\n \n // Update history for undo/redo\n let history = existingPlan.history || [];\n let historyIndex = existingPlan.historyIndex || 0;\n \n // If elements changed, add to history\n if (elements && JSON.stringify(elements) !== JSON.stringify(existingPlan.elements)) {\n // Remove any future history if we're not at the end\n if (historyIndex < history.length - 1) {\n history = history.slice(0, historyIndex + 1);\n }\n \n // Add new state to history (limit to 30 steps)\n history.push(elements);\n if (history.length > 30) {\n history.shift();\n }\n historyIndex = history.length - 1;\n }\n \n const updatedPlan: HousePlan = {\n ...existingPlan,\n name: name || existingPlan.name,\n elements: elements || existingPlan.elements,\n scale: scale !== undefined ? scale : existingPlan.scale,\n unit: unit || existingPlan.unit,\n gridSize: gridSize || existingPlan.gridSize,\n updatedAt: new Date().toISOString(),\n version: (existingPlan.version || 0) + 1,\n history,\n historyIndex\n };\n \n await blob.setJSON(`house_plan_${id}`, updatedPlan);\n \n // Update thumbnail if provided\n if (thumbnail) {\n await blob.setJSON(`house_plan_thumbnail_${id}`, { thumbnail });\n }\n \n return c.json({ success: true, plan: updatedPlan });\n } catch (error) {\n console.error(\"Error updating plan:\", error);\n return c.json({ success: false, error: \"Failed to update plan\" }, 500);\n }\n});\n\n// Get a specific plan's thumbnail\napp.get(\"/api/plans/:id/thumbnail\", async c => {\n try {\n const id = c.req.param(\"id\");\n const thumbnailData = await blob.getJSON(`house_plan_thumbnail_${id}`);\n if (!thumbnailData) {\n return c.json({ success: false, error: \"Thumbnail not found\" }, 404);\n }\n return c.json({ success: true, thumbnail: thumbnailData.thumbnail });\n } catch (error) {\n console.error(\"Error getting thumbnail:\", error);\n return c.json({ success: false, error: \"Failed to get thumbnail\" }, 500);\n }\n});\n\n// Get room templates\napp.get(\"/api/templates\", async c => {\n try {\n // Return predefined room templates\n const templates = [\n {\n name: \"Bedroom\",\n type: \"bedroom\",\n furniture: [\n { type: \"bed\", x: 20, y: 20, width: 100, height: 180, rotation: 0 },\n { type: \"cabinet\", x: 140, y: 20, width: 60, height: 40, rotation: 0 },\n { type: \"cabinet\", x: 20, y: 220, width: 120, height: 60, rotation: 0 }\n ]\n },\n {\n name: \"Living Room\",\n type: \"living\",\n furniture: [\n { type: \"sofa\", x: 20, y: 20, width: 160, height: 80, rotation: 0 },\n { type: \"table\", x: 20, y: 120, width: 100, height: 60, rotation: 0 },\n { type: \"chair\", x: 140, y: 120, width: 40, height: 40, rotation: 0 }\n ]\n },\n {\n name: \"Bathroom\",\n type: \"bathroom\",\n furniture: [\n { type: \"toilet\", x: 20, y: 20, width: 40, height: 60, rotation: 0 },\n { type: \"sink\", x: 80, y: 20, width: 60, height: 40, rotation: 0 },\n { type: \"shower\", x: 20, y: 100, width: 80, height: 80, rotation: 0 }\n ]\n },\n {\n name: \"Kitchen\",\n type: \"kitchen\",\n furniture: [\n { type: \"sink\", x: 20, y: 20, width: 60, height: 40, rotation: 0 },\n { type: \"cabinet\", x: 100, y: 20, width: 120, height: 40, rotation: 0 },\n { type: \"table\", x: 20, y: 80, width: 80, height: 80, rotation: 0 }\n ]\n }\n ];\n \n return c.json({ success: true, templates });\n } catch (error) {\n console.error(\"Error getting templates:\", error);\n return c.json({ success: false, error: \"Failed to get templates\" }, 500);\n }\n});\n\n// Export as entry point for HTTP val\nexport default app.fetch;",["D",1747555320316],11,{"_103":299,"_155":137,"_152":171,"_95":170,"_163":300,"_161":175,"_100":203,"_154":153,"_105":301,"_156":302,"_165":-5},"56f3bc2e-33be-11f0-8983-9e149126039e","import { Hono } from \"https://esm.sh/hono@3.11.7\";\nimport { blob } from \"https://esm.town/v/std/blob\";\nimport { readFile, serveFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\nimport { parseProject } from \"https://esm.town/v/std/utils@85-main/index.ts\";\n\n// Types\nimport { HousePlan } from \"../shared/types.ts\";\n\nconst app = new Hono();\n\n// Unwrap Hono errors to see original error details\napp.onError((err, c) => {\n throw err;\n});\n\n// Serve static files\napp.get(\"/frontend/*\", c => serveFile(c.req.path, import.meta.url));\napp.get(\"/shared/*\", c => serveFile(c.req.path, import.meta.url));\n\n// Main HTML page\napp.get(\"/\", async c => {\n let html = await readFile(\"/frontend/index.html\", import.meta.url);\n \n // Get project info for view source link\n const projectInfo = parseProject(import.meta.url);\n const viewSourceUrl = projectInfo.links.self.project;\n \n // Inject the view source URL\n html = html.replace(\"__VIEW_SOURCE_URL__\", viewSourceUrl);\n \n return c.html(html);\n});\n\n// API endpoints\n// List all saved plans\napp.get(\"/api/plans\", async c => {\n try {\n const plans = await blob.list(\"house_plan_\");\n return c.json({ success: true, plans });\n } catch (error) {\n console.error(\"Error listing plans:\", error);\n return c.json({ success: false, error: \"Failed to list plans\" }, 500);\n }\n});\n\n// Get a specific plan\napp.get(\"/api/plans/:id\", async c => {\n try {\n const id = c.req.param(\"id\");\n const plan = await blob.getJSON(`house_plan_${id}`) as HousePlan;\n if (!plan) {\n return c.json({ success: false, error: \"Plan not found\" }, 404);\n }\n return c.json({ success: true, plan });\n } catch (error) {\n console.error(\"Error getting plan:\", error);\n return c.json({ success: false, error: \"Failed to get plan\" }, 500);\n }\n});\n\n// Save a plan\napp.post(\"/api/plans\", async c => {\n try {\n const body = await c.req.json();\n const { name, elements, scale, unit, gridSize, thumbnail } = body;\n \n if (!name || !elements) {\n return c.json({ success: false, error: \"Missing required fields\" }, 400);\n }\n \n const id = Date.now().toString();\n const plan: HousePlan = {\n id,\n name,\n elements,\n scale: scale || 1,\n unit: unit || 'pixels',\n gridSize: gridSize || 20,\n createdAt: new Date().toISOString(),\n updatedAt: new Date().toISOString(),\n version: 1,\n history: [elements],\n historyIndex: 0\n };\n \n await blob.setJSON(`house_plan_${id}`, plan);\n \n // Store thumbnail separately to reduce main plan size\n if (thumbnail) {\n await blob.setJSON(`house_plan_thumbnail_${id}`, { thumbnail });\n }\n \n return c.json({ success: true, id, plan });\n } catch (error) {\n console.error(\"Error saving plan:\", error);\n return c.json({ success: false, error: \"Failed to save plan\" }, 500);\n }\n});\n\n// Update a plan\napp.put(\"/api/plans/:id\", async c => {\n try {\n const id = c.req.param(\"id\");\n const body = await c.req.json();\n const { name, elements, scale, unit, gridSize, thumbnail, version } = body;\n \n const existingPlan = await blob.getJSON(`house_plan_${id}`) as HousePlan;\n if (!existingPlan) {\n return c.json({ success: false, error: \"Plan not found\" }, 404);\n }\n \n // Check version to prevent conflicts\n if (version && existingPlan.version && version < existingPlan.version) {\n return c.json({ \n success: false, \n error: \"Plan has been updated by another session\", \n currentVersion: existingPlan.version \n }, 409);\n }\n \n // Update history for undo/redo\n let history = existingPlan.history || [];\n let historyIndex = existingPlan.historyIndex || 0;\n \n // If elements changed, add to history\n if (elements && JSON.stringify(elements) !== JSON.stringify(existingPlan.elements)) {\n // Remove any future history if we're not at the end\n if (historyIndex < history.length - 1) {\n history = history.slice(0, historyIndex + 1);\n }\n \n // Add new state to history (limit to 30 steps)\n history.push(elements);\n if (history.length > 30) {\n history.shift();\n }\n historyIndex = history.length - 1;\n }\n \n const updatedPlan: HousePlan = {\n ...existingPlan,\n name: name || existingPlan.name,\n elements: elements || existingPlan.elements,\n scale: scale !== undefined ? scale : existingPlan.scale,\n unit: unit || existingPlan.unit,\n gridSize: gridSize || existingPlan.gridSize,\n updatedAt: new Date().toISOString(),\n version: (existingPlan.version || 0) + 1,\n history,\n historyIndex\n };\n \n await blob.setJSON(`house_plan_${id}`, updatedPlan);\n \n // Update thumbnail if provided\n if (thumbnail) {\n await blob.setJSON(`house_plan_thumbnail_${id}`, { thumbnail });\n }\n \n return c.json({ success: true, plan: updatedPlan });\n } catch (error) {\n console.error(\"Error updating plan:\", error);\n return c.json({ success: false, error: \"Failed to update plan\" }, 500);\n }\n});\n\n// Delete a plan\napp.delete(\"/api/plans/:id\", async c => {\n try {\n const id = c.req.param(\"id\");\n await blob.delete(`house_plan_${id}`);\n return c.json({ success: true });\n } catch (error) {\n console.error(\"Error deleting plan:\", error);\n return c.json({ success: false, error: \"Failed to delete plan\" }, 500);\n }\n});\n\n// Export as entry point for HTTP val\nexport default app.fetch;",["D",1747555304405],10,{"_103":304,"_155":137,"_152":171,"_95":170,"_163":305,"_161":175,"_100":157,"_154":153,"_105":306,"_156":307,"_165":-5},"4e14cf30-33be-11f0-bd37-9e149126039e","import { Hono } from \"https://esm.sh/hono@3.11.7\";\nimport { blob } from \"https://esm.town/v/std/blob\";\nimport { readFile, serveFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\nimport { parseProject } from \"https://esm.town/v/std/utils@85-main/index.ts\";\n\n// Types\nimport { HousePlan } from \"../shared/types.ts\";\n\nconst app = new Hono();\n\n// Unwrap Hono errors to see original error details\napp.onError((err, c) => {\n throw err;\n});\n\n// Serve static files\napp.get(\"/frontend/*\", c => serveFile(c.req.path, import.meta.url));\napp.get(\"/shared/*\", c => serveFile(c.req.path, import.meta.url));\n\n// Main HTML page\napp.get(\"/\", async c => {\n let html = await readFile(\"/frontend/index.html\", import.meta.url);\n \n // Get project info for view source link\n const projectInfo = parseProject(import.meta.url);\n const viewSourceUrl = projectInfo.links.self.project;\n \n // Inject the view source URL\n html = html.replace(\"__VIEW_SOURCE_URL__\", viewSourceUrl);\n \n return c.html(html);\n});\n\n// API endpoints\n// List all saved plans\napp.get(\"/api/plans\", async c => {\n try {\n const plans = await blob.list(\"house_plan_\");\n return c.json({ success: true, plans });\n } catch (error) {\n console.error(\"Error listing plans:\", error);\n return c.json({ success: false, error: \"Failed to list plans\" }, 500);\n }\n});\n\n// Get a specific plan\napp.get(\"/api/plans/:id\", async c => {\n try {\n const id = c.req.param(\"id\");\n const plan = await blob.getJSON(`house_plan_${id}`) as HousePlan;\n if (!plan) {\n return c.json({ success: false, error: \"Plan not found\" }, 404);\n }\n return c.json({ success: true, plan });\n } catch (error) {\n console.error(\"Error getting plan:\", error);\n return c.json({ success: false, error: \"Failed to get plan\" }, 500);\n }\n});\n\n// Save a plan\napp.post(\"/api/plans\", async c => {\n try {\n const body = await c.req.json();\n const { name, elements, scale, unit, gridSize, thumbnail } = body;\n \n if (!name || !elements) {\n return c.json({ success: false, error: \"Missing required fields\" }, 400);\n }\n \n const id = Date.now().toString();\n const plan: HousePlan = {\n id,\n name,\n elements,\n scale: scale || 1,\n unit: unit || 'pixels',\n gridSize: gridSize || 20,\n createdAt: new Date().toISOString(),\n updatedAt: new Date().toISOString(),\n version: 1,\n history: [elements],\n historyIndex: 0\n };\n \n await blob.setJSON(`house_plan_${id}`, plan);\n \n // Store thumbnail separately to reduce main plan size\n if (thumbnail) {\n await blob.setJSON(`house_plan_thumbnail_${id}`, { thumbnail });\n }\n \n return c.json({ success: true, id, plan });\n } catch (error) {\n console.error(\"Error saving plan:\", error);\n return c.json({ success: false, error: \"Failed to save plan\" }, 500);\n }\n});\n\n// Update a plan\napp.put(\"/api/plans/:id\", async c => {\n try {\n const id = c.req.param(\"id\");\n const body = await c.req.json();\n const { name, elements } = body;\n \n const existingPlan = await blob.getJSON(`house_plan_${id}`) as HousePlan;\n if (!existingPlan) {\n return c.json({ success: false, error: \"Plan not found\" }, 404);\n }\n \n const updatedPlan: HousePlan = {\n ...existingPlan,\n name: name || existingPlan.name,\n elements: elements || existingPlan.elements,\n updatedAt: new Date().toISOString()\n };\n \n await blob.setJSON(`house_plan_${id}`, updatedPlan);\n return c.json({ success: true, plan: updatedPlan });\n } catch (error) {\n console.error(\"Error updating plan:\", error);\n return c.json({ success: false, error: \"Failed to update plan\" }, 500);\n }\n});\n\n// Delete a plan\napp.delete(\"/api/plans/:id\", async c => {\n try {\n const id = c.req.param(\"id\");\n await blob.delete(`house_plan_${id}`);\n return c.json({ success: true });\n } catch (error) {\n console.error(\"Error deleting plan:\", error);\n return c.json({ success: false, error: \"Failed to delete plan\" }, 500);\n }\n});\n\n// Export as entry point for HTTP val\nexport default app.fetch;",["D",1747555289521],9,{"_103":309,"_155":137,"_152":171,"_95":170,"_163":310,"_161":175,"_100":246,"_154":153,"_105":311,"_156":312,"_165":-5},"df42d2b4-33bd-11f0-8268-9e149126039e","import { Hono } from \"https://esm.sh/hono@3.11.7\";\nimport { blob } from \"https://esm.town/v/std/blob\";\nimport { readFile, serveFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\nimport { parseProject } from \"https://esm.town/v/std/utils@85-main/index.ts\";\n\n// Types\nimport { HousePlan } from \"../shared/types.ts\";\n\nconst app = new Hono();\n\n// Unwrap Hono errors to see original error details\napp.onError((err, c) => {\n throw err;\n});\n\n// Serve static files\napp.get(\"/frontend/*\", c => serveFile(c.req.path, import.meta.url));\napp.get(\"/shared/*\", c => serveFile(c.req.path, import.meta.url));\n\n// Main HTML page\napp.get(\"/\", async c => {\n let html = await readFile(\"/frontend/index.html\", import.meta.url);\n \n // Get project info for view source link\n const projectInfo = parseProject(import.meta.url);\n const viewSourceUrl = projectInfo.links.self.project;\n \n // Inject the view source URL\n html = html.replace(\"__VIEW_SOURCE_URL__\", viewSourceUrl);\n \n return c.html(html);\n});\n\n// API endpoints\n// List all saved plans\napp.get(\"/api/plans\", async c => {\n try {\n const plans = await blob.list(\"house_plan_\");\n return c.json({ success: true, plans });\n } catch (error) {\n console.error(\"Error listing plans:\", error);\n return c.json({ success: false, error: \"Failed to list plans\" }, 500);\n }\n});\n\n// Get a specific plan\napp.get(\"/api/plans/:id\", async c => {\n try {\n const id = c.req.param(\"id\");\n const plan = await blob.getJSON(`house_plan_${id}`) as HousePlan;\n if (!plan) {\n return c.json({ success: false, error: \"Plan not found\" }, 404);\n }\n return c.json({ success: true, plan });\n } catch (error) {\n console.error(\"Error getting plan:\", error);\n return c.json({ success: false, error: \"Failed to get plan\" }, 500);\n }\n});\n\n// Save a plan\napp.post(\"/api/plans\", async c => {\n try {\n const body = await c.req.json();\n const { name, elements } = body;\n \n if (!name || !elements) {\n return c.json({ success: false, error: \"Missing required fields\" }, 400);\n }\n \n const id = Date.now().toString();\n const plan: HousePlan = {\n id,\n name,\n elements,\n createdAt: new Date().toISOString(),\n updatedAt: new Date().toISOString()\n };\n \n await blob.setJSON(`house_plan_${id}`, plan);\n return c.json({ success: true, id, plan });\n } catch (error) {\n console.error(\"Error saving plan:\", error);\n return c.json({ success: false, error: \"Failed to save plan\" }, 500);\n }\n});\n\n// Update a plan\napp.put(\"/api/plans/:id\", async c => {\n try {\n const id = c.req.param(\"id\");\n const body = await c.req.json();\n const { name, elements } = body;\n \n const existingPlan = await blob.getJSON(`house_plan_${id}`) as HousePlan;\n if (!existingPlan) {\n return c.json({ success: false, error: \"Plan not found\" }, 404);\n }\n \n const updatedPlan: HousePlan = {\n ...existingPlan,\n name: name || existingPlan.name,\n elements: elements || existingPlan.elements,\n updatedAt: new Date().toISOString()\n };\n \n await blob.setJSON(`house_plan_${id}`, updatedPlan);\n return c.json({ success: true, plan: updatedPlan });\n } catch (error) {\n console.error(\"Error updating plan:\", error);\n return c.json({ success: false, error: \"Failed to update plan\" }, 500);\n }\n});\n\n// Delete a plan\napp.delete(\"/api/plans/:id\", async c => {\n try {\n const id = c.req.param(\"id\");\n await blob.delete(`house_plan_${id}`);\n return c.json({ success: true });\n } catch (error) {\n console.error(\"Error deleting plan:\", error);\n return c.json({ success: false, error: \"Failed to delete plan\" }, 500);\n }\n});\n\n// Export as entry point for HTTP val\nexport default app.fetch;",["D",1747555103596],7,{"_103":314,"_155":137,"_152":171,"_95":170,"_163":310,"_161":193,"_100":32,"_154":153,"_105":315,"_156":157,"_165":-5},"726e85ca-33bd-11f0-bcd2-9e149126039e",["D",1747554921011],"versions",[318,320,321,322,323,324],{"_204":291,"_319":293},"previous",{"_204":293,"_319":298},{"_204":298,"_319":303},{"_204":303,"_319":308},{"_204":308,"_319":313},{"_204":313,"_319":-5},"versionNumber","page","hasNext","actionData","errors"]

History for index.ts