feat(canvas): inline two-step delete confirm in ComponentPropertyDialog

Replaces the window.confirm("Delete X?") modal with a footer that flips
into a "Delete X?" prompt + Cancel / Delete pair when the user arms the
delete. Less jarring on mobile (no native dialog), keeps the user's
flow inside the property panel.

frontend/src/components/simulator/ComponentPropertyDialog.css

@@ -272,6 +272,20 @@
   display: flex;
   gap: 8px;
   margin-top: 8px;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+/* Inline confirm prompt that replaces the Rotate / Delete pair while a
+   delete is armed. The label takes the full width above the two action
+   buttons on narrow widths so nothing gets cut off. */
+.property-confirm-label {
+  flex-basis: 100%;
+  font-size: 12px;
+  color: #f5b342;
+  font-weight: 500;
+  text-align: center;
+  padding: 2px 0 4px;
 }
 
 .property-action-button {

frontend/src/components/simulator/ComponentPropertyDialog.tsx

@@ -55,6 +55,10 @@ export const ComponentPropertyDialog: React.FC<ComponentPropertyDialogProps> = (
 }) => {
   const dialogRef = useRef<HTMLDivElement>(null);
   const [dialogPosition, setDialogPosition] = useState({ x: 0, y: 0 });
+  // Two-step delete: first click arms the action (footer flips to a
+  // "Delete X?" confirm prompt), second click commits. Replaces the old
+  // window.confirm() call which was visually jarring on mobile.
+  const [confirmingDelete, setConfirmingDelete] = useState(false);
 
   // Calculate dialog position on mount — clamp within canvas viewport
   useEffect(() => {
@@ -238,26 +242,49 @@ export const ComponentPropertyDialog: React.FC<ComponentPropertyDialogProps> = (
 
       </div>{/* /component-property-body */}
 
-      {/* Action Buttons */}
+      {/* Action Buttons — flips into a confirm-delete prompt when armed. */}
       <div className="property-actions">
-        <button
+        {confirmingDelete ? (
-          className="property-action-button rotate-button"
+          <>
-          onClick={() => onRotate(componentId)}
+            <span className="property-confirm-label">
-          title="Rotate 90°"
+              Delete {componentMetadata.name}?
-        >
+            </span>
-          Rotate
+            <button
-        </button>
+              className="property-action-button rotate-button"
-        <button
+              onClick={() => setConfirmingDelete(false)}
-          className="property-action-button delete-button"
+              title="Cancel"
-          onClick={() => {
+            >
-            if (window.confirm(`Delete ${componentMetadata.name}?`)) {
+              Cancel
-              onDelete(componentId);
+            </button>
-            }
+            <button
-          }}
+              className="property-action-button delete-button"
-          title="Delete component"
+              onClick={() => {
-        >
+                setConfirmingDelete(false);
-          Delete
+                onDelete(componentId);
-        </button>
+              }}
+              title="Confirm delete"
+            >
+              Delete
+            </button>
+          </>
+        ) : (
+          <>
+            <button
+              className="property-action-button rotate-button"
+              onClick={() => onRotate(componentId)}
+              title="Rotate 90°"
+            >
+              Rotate
+            </button>
+            <button
+              className="property-action-button delete-button"
+              onClick={() => setConfirmingDelete(true)}
+              title="Delete component"
+            >
+              Delete
+            </button>
+          </>
+        )}
       </div>
     </div>
   );